/* Only what every look shares: the reset, the look switcher and the skeleton of the guess card.
   Each look sets the --switch-* and --card-* variables to make them its own. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-bottom: 64px; }
button, textarea, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#switcher {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 2px; max-width: calc(100vw - 16px); overflow-x: auto; padding: 4px;
  border-radius: 10px; background: var(--switch-bg, #fff); color: var(--switch-ink, #222);
  box-shadow: 0 0 0 1px var(--switch-rule, rgba(0, 0, 0, .14)), 0 6px 20px rgba(0, 0, 0, .18);
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; scrollbar-width: none;
}
#switcher button {
  border: 0; background: none; border-radius: 7px; padding: 8px 11px; cursor: pointer; white-space: nowrap; opacity: .72;
}
#switcher button:hover { opacity: 1; }
#switcher button[aria-pressed="true"] { opacity: 1; background: var(--switch-active-bg, #222); color: var(--switch-active-ink, #fff); }
#switcher button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

#card {
  position: fixed; z-index: 30; pointer-events: none; width: max-content; max-width: min(360px, calc(100vw - 16px));
  padding: 14px 16px; border-radius: var(--card-radius, 10px);
  background: var(--card-bg, #fff); color: var(--card-ink, #222);
  box-shadow: 0 0 0 1px var(--card-rule, rgba(0, 0, 0, .14)), 0 12px 32px rgba(0, 0, 0, .2);
  font: 400 13px/1.45 var(--card-ui, system-ui, sans-serif);
}
#card .card-token { font: 400 24px/1.2 var(--card-text, Georgia, serif); overflow-wrap: anywhere; }
#card .card-sum { margin: 4px 0 10px; }
#card .card-sum b { font-weight: 600; font-variant-numeric: tabular-nums; }
#card .card-heading { margin: 0 0 4px; color: var(--card-dim, #666); font-size: 12.5px; }
#card .guess { display: grid; grid-template-columns: 14px minmax(56px, auto) 64px 48px; gap: 8px; align-items: center; padding: 2px 6px; margin: 0 -6px; border-radius: 4px; }
#card .guess-rank { color: var(--card-dim, #666); font-variant-numeric: tabular-nums; }
#card .guess-text { font: 400 15px/1.3 var(--card-text, Georgia, serif); white-space: pre; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
#card .guess-text.named { font: italic 400 13px/1.3 var(--card-ui, system-ui, sans-serif); color: var(--card-dim, #666); }
#card .guess-bar { height: 4px; border-radius: 2px; background: var(--card-bar, #c9cdd8); }
#card .guess-p { text-align: right; font-variant-numeric: tabular-nums; color: var(--card-dim, #666); }
#card .guess.actual { background: var(--card-actual-bg, rgba(255, 225, 77, .55)); }
#card .guess.actual .guess-bar { background: var(--card-actual-bar, currentColor); }
#card .guess.actual .guess-p, #card .guess.actual .guess-text { color: inherit; }
#card .guess-gap { color: var(--card-dim, #666); padding-left: 2px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}