/* Word Redacted: Blush page, glossy Plum containers, burnt paper letter
   slips, eraser-pile scores. One deliberate light-page look.
   Fonts: Lilita One for letters on slips and the logo, Comic Neue for
   chat, Nunito for everything else. */

:root {
  color-scheme: light;
  /* page (outside containers) */
  --page: #f7e6ee;
  --page-glow: #ffffff;
  --ink: #3a0a35;        /* text on the page */
  --ink-soft: #8a4f78;
  /* containers */
  --panel-top: #8e1a6e;
  --panel-bottom: #5c1458;
  --panel-edge: #b0287f;
  --panel-lip: #6e0a49;
  --text: #fff3fa;       /* text inside containers */
  --text-soft: #f0bfdc;
  --well: #2a0826;
  --row: rgba(0, 0, 0, 0.22);
  /* accents */
  --pink: #ff4fb8;
  --pink-deep: #c0157f;
  --pink-lip: #4a0735;
  --gold: #ffc94a;
  --gold-deep: #c98a12;
  --gold-ink: #5a3300;
  /* teams: Red (A) and Blue (B), tuned to the Plum palette */
  --red: #ff4d7e;        /* a raspberry red-pink, deeper than the accent pink */
  --red-deep: #c21a52;
  --red-edge: #e8386c;
  --red-lip: #7e0d33;
  --blue: #74c8ff;       /* a light sky blue */
  --blue-deep: #2f86c8;
  --blue-edge: #4ea9e6;
  --blue-lip: #1c5f8f;
  --bad: #ff8a9a;
  --redact: #0d0310;
  --hurry: #ff5a2e;      /* time running out: flashes with gold */
  /* paper */
  --paper-ink: #2a1608;
  --note: #fff6c9;
  --note-ink: #4b3a00;
  --good-bg: #e2f4dc;
  --good-ink: #1f4a15;
  --good-mark: #2f7d22;
  --bad-bg: #fde3e7;
  --bad-ink: #6d1020;
  --bad-mark: #c8283d;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --letters: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --chat: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  --type: "Special Elite", "Courier New", monospace;
  --serif: "Fraunces", Georgia, serif; /* rules on the cue cards */
}

* { box-sizing: border-box; }

/* `hidden` must win over any display rule (e.g. flex rows). */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.5 var(--body);
  background: radial-gradient(1200px 600px at 50% -10%, var(--page-glow) 0%, transparent 60%), var(--page);
}

main { max-width: 1000px; margin: 0 auto; padding: 16px; }

h2 { font-size: 1.05rem; font-weight: 900; margin: 0 0 8px; }
p { margin: 0 0 8px; }
.soft { color: var(--ink-soft); }
.center { text-align: center; }
.small-text { font-size: 0.85rem; }
.eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.status { color: var(--pink-deep); font-weight: 800; font-size: 0.9rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stack { display: grid; gap: 8px; }

/* Messages and hints read as paper notes */
.error { color: var(--pink-deep); font-weight: 700; min-height: 1em; margin: 6px 0 0; padding-left: 0; list-style: none; }
.panel .error { min-height: 0; display: grid; gap: 6px; }
.panel .error:empty { display: none; }
.panel .error li, .panel p.error:not(:empty) {
  background: var(--bad-bg);
  color: var(--bad-ink);
  border-radius: 4px;
  padding: 6px 10px 6px 34px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.panel .error li::before, .panel p.error:not(:empty)::before {
  content: "!";
  position: absolute; left: 8px; top: 6px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--bad-mark); color: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: 0.75rem;
}
.notice {
  font-size: 0.85rem;
  color: #ffe7a3;
  background: rgba(255, 201, 74, 0.12);
  border: 1px solid rgba(255, 201, 74, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 12px 0 0;
}
#waiting-banner {
  color: var(--note-ink);
  background: var(--note);
  border: 0;
  box-shadow: 0 6px 14px rgba(110, 10, 73, 0.15);
  margin: 0 0 16px;
  font-weight: 700;
}

/* ---------- the stage: stage lights and a crowd on the Blush page ---------- */

.stage {
  /* clip, not hidden: nothing (the beams stick out) may scroll it sideways */
  position: relative; overflow: hidden; overflow: clip; min-height: 100vh; padding: 0 0 90px;
  background: radial-gradient(70% 380px at 50% 0%, rgba(255, 79, 184, 0.14), transparent 70%);
}
.beam { position: absolute; top: -40px; width: 170px; height: 560px; pointer-events: none; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 79, 184, 0.16), rgba(255, 79, 184, 0) 85%); }
.beam.l { left: -40px; transform: rotate(-24deg); }
.beam.r { right: -40px; transform: rotate(24deg); background: linear-gradient(180deg, rgba(255, 201, 74, 0.22), rgba(255, 201, 74, 0) 85%); }
.lamps { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 20px; pointer-events: none; }
.lamp { width: 22px; height: 14px; border-radius: 0 0 10px 10px; background: linear-gradient(#5c1458, #3a0d35);
  box-shadow: 0 6px 12px 1px rgba(255, 201, 74, 0.55), inset 0 -4px 0 var(--gold); }
.lamp.p { box-shadow: 0 6px 12px 1px rgba(255, 79, 184, 0.55), inset 0 -4px 0 var(--pink); }
.lamp.b { box-shadow: 0 6px 12px 1px rgba(116, 200, 255, 0.55), inset 0 -4px 0 var(--blue); }
.audience { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none; opacity: 0.22;
  background:
    radial-gradient(22px 26px at 20px 52px, #5c1458 98%, transparent) 0 0 / 52px 80px repeat-x,
    radial-gradient(14px 14px at 20px 24px, #5c1458 98%, transparent) 0 0 / 52px 80px repeat-x,
    radial-gradient(22px 26px at 46px 66px, #3a0d35 98%, transparent) 0 0 / 52px 80px repeat-x,
    radial-gradient(14px 14px at 46px 38px, #3a0d35 98%, transparent) 0 0 / 52px 80px repeat-x,
    linear-gradient(transparent 70%, #3a0d35 70%); }
/* No z-index on .page: the phone chat sheet inside it must stack above the scrim. */
.page { position: relative; }

/* ---------- header: the emblem ---------- */

.topbar { display: grid; justify-items: center; gap: 4px; padding: 20px 16px 0; }
/* A bulb-ringed badge with WORD lit up, and REDACTED across it as a ribbon. */
.emblem { margin: 0; display: grid; justify-items: center; line-height: 1; }
.badge { position: relative; width: 190px; padding: 12px 0 24px; border-radius: 26px 26px 40px 40px; display: grid; justify-items: center;
  background: linear-gradient(180deg, var(--panel-top), #4a0f40); box-shadow: 0 6px 0 var(--well), 0 10px 24px rgba(92, 20, 88, 0.35); }
.badge::before { content: ""; position: absolute; inset: 5px; border-radius: 21px 21px 35px 35px; border: 4px dotted #ffe08a; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 201, 74, 0.9)); animation: twinkle 1.2s steps(2) infinite; }
@keyframes twinkle { 50% { border-color: #ff9ad0; } }
.sign { position: relative; display: flex; gap: 4px; padding: 8px 10px; }
.sign span { width: 32px; height: 38px; display: grid; place-items: center; border-radius: 7px;
  font-family: var(--letters); font-weight: 400; font-size: 1.7rem; color: #fff6c9;
  background: radial-gradient(circle at 50% 40%, #3a0d35, #1a0616);
  text-shadow: 0 0 6px var(--gold), 0 0 14px rgba(255, 201, 74, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, 0.35); }
/* One dark plum ribbon; the folded ends carry a gloss. */
.ribbon { position: relative; z-index: 2; margin-top: -14px; padding: 5px 18px 7px; transform: rotate(-3deg);
  color: #fff; font-weight: 900; font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(180deg, #4a1242 0%, #3a0d35 45%, #2a0826 100%); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: 8px; width: 16px; height: 100%; z-index: -1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 38%, transparent 55%), linear-gradient(180deg, #3a0d35, #1f061c); }
.ribbon::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.status:empty { display: none; }

/* Top corners: the one-tap mute (left) and your avatar (right), which
   opens your profile, or the room menu during a game. */
.corner-btn { position: absolute; top: 22px; z-index: 22; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.mute-btn { left: 14px; }
.avatar-btn { right: 14px; }
.corner-btn svg { width: 24px; height: 24px; }
.mute-btn .cross { display: none; }
.mute-btn.off .waves { display: none; }
.mute-btn.off .cross { display: inline; }
.mute-btn.off { filter: saturate(0.4); }
/* A character's face in a round frame, on its own color. */
.face { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--face-bg, transparent); }
.face svg, .seat-avatar.has-face svg { width: 100%; height: 100%; display: block; }
.avatar-btn .face { width: 38px; height: 38px; box-shadow: inset 0 0 0 2px rgba(58, 10, 53, 0.15); }
.avatar-btn { background: linear-gradient(180deg, #ffd66e, var(--gold) 55%, var(--gold-deep)); color: var(--gold-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 var(--gold-ink); }
/* .panel.room-menu, not .room-menu: the general .panel rule further down
   would otherwise put it back in the page flow and push the page down. */
.panel.room-menu { position: absolute; top: 74px; right: 14px; z-index: 23; width: min(280px, calc(100vw - 28px)); display: grid; gap: 10px; margin: 0; }
.room-menu-name { margin: 0; font-weight: 900; font-size: 1.1rem; }
.menu-items { display: grid; gap: 10px; }
.menu-items[hidden] { display: none; }
/* Closes a page opened from the menu (or Play), back to where you were. */
button.close-btn { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; min-height: 0; padding: 0; margin: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(255, 255, 255, 0.35); box-shadow: none; color: #fff; }
button.close-btn:hover { background: rgba(0, 0, 0, 0.4); }
button.close-btn svg { width: 22px; height: 22px; }
/* The heading shares the X's row, so nothing below can run under it. */
.panel > .close-btn + h2 { min-height: 44px; display: flex; align-items: center; margin: -6px 52px 10px 0; }
.panel > .close-btn + .face.big { margin-top: 34px; }
/* On wide screens the chat column takes the right side during a game, so
   the avatar (and its menu) move beside the mute button. */
@media (min-width: 900px) {
  .stage:has(.page.has-chat) .avatar-btn { right: auto; left: 66px; }
  .stage:has(.page.has-chat) .panel.room-menu { right: auto; left: 14px; }
}
.sound-controls { display: grid; gap: 12px; }
.sound-controls .slider { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 10px; }
.sound-controls input[type="range"] { width: 100%; accent-color: var(--pink); }
.sound-controls input[type="range"]:disabled { opacity: 0.4; }

/* ---------- containers (Plum) ---------- */

.panel {
  position: relative;
  color: var(--text);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 2px solid var(--panel-edge);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 var(--panel-lip);
}
.panel::before { /* soft top sheen */
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}
.panel .soft, .panel .eyebrow { color: var(--text-soft); }
.narrow { max-width: 540px; margin: 24px auto; }

/* ---------- form controls ---------- */

label { font-weight: 800; }
input {
  font: inherit;
  color: var(--text);
  background: var(--well);
  border: 1px solid #5a1650;
  border-radius: 10px;
  padding: 9px 12px;
  min-width: 0;
}
input::placeholder { color: #b97fa6; letter-spacing: 0.06em; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
#join-code { width: 7em; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 800; }

button {
  position: relative;
  font: inherit;
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 20px;
  cursor: pointer;
  background: linear-gradient(180deg, #ff7ccf, var(--pink) 45%, var(--pink-deep));
  text-shadow: 0 1px 0 rgba(90, 0, 60, 0.4);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(90, 0, 60, 0.35),
    0 4px 0 var(--pink-lip),
    0 8px 14px rgba(110, 10, 73, 0.2);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
button:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 1px 0 var(--pink-lip); }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button:disabled { cursor: default; filter: saturate(0.35) brightness(0.85); }
button.secondary {
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  text-shadow: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 3px 0 rgba(0, 0, 0, 0.25);
}
/* A secondary button on the page itself (outside a container) */
main > .screen > .row button.secondary {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px #e7a8c9, 0 3px 0 #e2b8cd;
}
button.small { font-size: 0.9rem; padding: 6px 14px; border-radius: 10px; }

/* ---------- lobby ---------- */

/* The lobby on the stage. Phone: the code board, both teams, the desk.
   Wide screens: each team's podiums on either side of the board and desk. */
.lobby-floor { display: grid; gap: 16px; max-width: 640px; margin: 0 auto;
  grid-template-areas: "board" "seatsA" "seatsB" "desk"; }
.lobby-board { grid-area: board; display: grid; gap: 8px; }
#seats-A { grid-area: seatsA; }
#seats-B { grid-area: seatsB; }
.desk { grid-area: desk; }
.lobby-board .marquee { margin: 0; }
.code-board { gap: 12px; padding: 16px 12px 18px; }
/* The room code, lit like the WORD sign. */
.code-sign { margin: 0; display: flex; justify-content: center; gap: 8px; }
.code-sign span { width: 54px; height: 64px; display: grid; place-items: center; border-radius: 10px;
  font-family: var(--letters); font-size: 2.6rem; color: #fff6c9; background: radial-gradient(circle at 50% 40%, #3a0d35, #1a0616);
  text-shadow: 0 0 8px var(--gold), 0 0 18px rgba(255, 201, 74, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, 0.35); }
.lobby-hint { margin: 0; text-align: center; font-weight: 800; color: var(--ink-soft); }

/* Each player at a small podium with an LED edge in the team color. */
.seats h2 { margin: 0 0 10px; font-family: var(--letters); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.05em; text-transform: uppercase; }
.seats.team-A h2 { color: var(--red-deep); }
.seats.team-B h2 { color: var(--blue-deep); }
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 10px; min-height: 60px; }
.seat { --c: var(--red); --c-deep: var(--red-deep); --c-lip: var(--red-lip); --c-light: #ff9bb6;
  display: grid; justify-items: center; min-width: 0; }
.seats.team-B .seat { --c: var(--blue); --c-deep: var(--blue-deep); --c-lip: var(--blue-lip); --c-light: #c9ebff; }
.seat-avatar { position: relative; z-index: 1; width: 56px; height: 56px; margin-bottom: -8px; border-radius: 50%; padding: 11px; color: #fff;
  background: radial-gradient(circle at 35% 28%, var(--c-light), var(--c) 45%, var(--c-deep)); border: 3px solid rgba(255, 255, 255, 0.8); }
.seat-avatar svg { width: 100%; height: 100%; display: block; }
.seat-avatar.has-face { padding: 0; overflow: hidden; background: var(--face-bg); border-color: var(--c); }
.seat.host .seat-avatar { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(255, 201, 74, 0.6); }
.seat.away { opacity: 0.55; }
.seat-desk { position: relative; width: 100%; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 9px; border-radius: 10px 10px 14px 14px;
  color: #fff; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.1) 48%, rgba(0, 0, 0, 0.35)), linear-gradient(180deg, var(--c-deep), var(--c-lip));
  box-shadow: 0 -3px 0 var(--c-light), 0 0 12px var(--c), 0 4px 0 #1a0616; }
.seat-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.seat-tag { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.seat.you .seat-desk { outline: 2px solid #fff; outline-offset: 2px; }

/* The host's control desk: a console with an LED edge. */
.desk { display: grid; justify-items: center; }
.desk-top { width: 100%; height: 16px; border-radius: 10px; position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), #ff9ad0 16%, var(--pink) 55%, var(--pink-deep));
  box-shadow: 0 4px 0 var(--pink-lip), 0 0 0 2px #ffc7e6, 0 0 18px var(--pink); }
.desk-face { width: 96%; margin-top: 4px; padding: 16px 16px 20px; display: grid; gap: 12px; justify-items: start; color: var(--text);
  border-radius: 0 0 22px 22px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.35)), linear-gradient(180deg, var(--panel-bottom), #3a0d35); }
.desk-base { width: 100%; height: 14px; margin-top: -6px; border-radius: 8px; background: linear-gradient(180deg, #6b1a63, var(--well) 70%); box-shadow: 0 4px 0 #1a0616, 0 -2px 0 #ffc7e6, 0 0 16px var(--pink); }
.desk-title { margin: 0; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.desk-row { display: grid; gap: 6px; width: 100%; }
.desk-note { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.desk-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.desk-settings .setting { display: flex; align-items: center; gap: 10px; }
.desk-settings select { width: auto; max-width: none; }
.desk-settings:not(:has(> :not([hidden]))) { display: none; }
.desk-buttons { width: 100%; }
/* The mode dropdown in the heading font. */
#mode-select, #format-select, #mode-select option, #format-select option { font-family: var(--letters); font-weight: 400; letter-spacing: 0.03em; }

/* Phones: the players as a clean two-column table, Red | Blue, split like
   a T: small avatars beside the names, no podium boxes. */
@media (max-width: 899px) {
  .lobby-floor { grid-template-columns: 1fr 1fr; gap: 16px 0; grid-template-areas: "board board" "seatsA seatsB" "desk desk"; }
  .seats { padding: 0 10px; min-width: 0; }
  #seats-B { border-left: 3px solid rgba(92, 20, 88, 0.25); }
  .seats h2 { font-size: 1.15rem; margin: 0 -10px 8px; padding: 0 10px 6px; border-bottom: 3px solid rgba(92, 20, 88, 0.25); }
  .seat-list { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .seat { display: flex; align-items: center; gap: 8px; }
  .seat-avatar { width: 30px; height: 30px; padding: 5px; margin: 0; border-width: 2px; flex: none; }
  .seat.host .seat-avatar { box-shadow: 0 0 0 2px var(--gold); }
  .seat-desk { display: grid; justify-items: start; gap: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); }
  .seat-name { font-size: 0.98rem; }
  .seat-tag { font-size: 0.6rem; color: var(--pink-deep); }
  .seat.you .seat-desk { outline: none; }
  .seat.you .seat-name { text-decoration: underline 2px; text-underline-offset: 3px; }
}

@media (min-width: 900px) {
  .lobby-floor { max-width: 1240px; gap: 20px 26px; align-items: start;
    grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.4fr) minmax(220px, 1fr);
    grid-template-areas: "seatsA board seatsB" "seatsA desk seatsB"; }
  .seat-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--pink-deep); cursor: inherit; }
.toggle:has(input:disabled) { cursor: default; }
select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit; font-weight: 900; font-size: 1.1rem; color: var(--ink);
  background:
    linear-gradient(45deg, transparent 50%, var(--pink-deep) 50%) calc(100% - 20px) 55% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--pink-deep) 50%, transparent 50%) calc(100% - 13px) 55% / 7px 7px no-repeat,
    #fff;
  border: 2px solid var(--text-soft);
  border-radius: 12px;
  padding: 9px 40px 9px 12px;
  width: 100%; max-width: 340px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
select:disabled { cursor: default; opacity: 1; }
option { font-family: var(--body); font-weight: 800; color: var(--ink); background: #fff; }

/* Cue card: the lit marquee board with the mode's name in gold and its
   rules in Fraunces. */
.cue-card { position: relative; width: 100%; border-radius: 18px; padding: 12px; background: linear-gradient(180deg, #7a1660, #4e0f45); box-shadow: 0 4px 0 #3a0a35, 0 14px 24px rgba(40, 0, 30, 0.35); }
.cue-card::before { content: ""; position: absolute; inset: 4px; border-radius: 15px; border: 5px dotted #ffe08a; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 224, 138, 0.8)); animation: twinkle 1.2s steps(2) infinite; }
.cue-card > * { position: relative; }
.cue-card h3 { margin: 0; padding: 14px 16px 6px; border-radius: 11px 11px 0 0; background: #1a0616; text-align: center;
  font-family: var(--letters); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.06em; color: var(--gold); text-shadow: 0 0 12px rgba(255, 201, 74, 0.55); }
.cue-card ul, .cue-card .ex-title, .cue-card .cue-section, .cue-card .examples { margin: 0; background: #1a0616; }
.cue-card ul { padding: 4px 16px 10px 36px; font-family: var(--serif); color: #fff3fa; }
.cue-card li { margin: 2px 0; }
.cue-card .ex-title, .cue-card .cue-section { padding: 4px 16px 4px; font-weight: 900; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.cue-card .examples { padding: 0 16px 16px; border-radius: 0 0 11px 11px; }
.examples { display: grid; gap: 6px; }
.ex { display: grid; grid-template-columns: 22px auto 1fr; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 6px; font-size: 0.92rem; }
.ex .mark { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 0.8rem; }
.ex code { font-family: var(--type); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ex.good { background: var(--good-bg); color: var(--good-ink); }
.ex.good .mark { background: var(--good-mark); }
.ex.bad { background: var(--bad-bg); color: var(--bad-ink); }
.ex.bad .mark { background: var(--bad-mark); }

/* ---------- phase bar and timer ---------- */

.phasebar { display: grid; gap: 10px; }
.phasebar-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.round { font-weight: 900; font-size: 1.15rem; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.timer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.timer-track { height: 12px; border-radius: 999px; background: var(--well); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5); overflow: hidden; }
.timer-fill {
  height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink) 70%, #ffd1ec);
  box-shadow: 0 0 12px var(--pink);
  transition: width 250ms linear;
}
.timer-fill.urgent { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 12px var(--gold); }
.timer-num { font-weight: 900; font-size: 1.4rem; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.timer-num.urgent { color: var(--gold); }


/* ---------- the stage: clue and guess phases ---------- */

/* Phone: the two podiums flank the clock, then the board and the console,
   then each team's list. Wide screens: see the media query below. */
.floor {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 8px; align-items: end;
  grid-template-areas: "podA clock podB" "center center center" "rosterA rosterA rosterA" "rosterB rosterB rosterB";
  max-width: 640px; margin: 0 auto;
}
#pod-A { grid-area: podA; }
#pod-B { grid-area: podB; }
.clock-box { grid-area: clock; align-self: center; display: grid; justify-items: center; }
.stage-center { grid-area: center; display: grid; min-width: 0; }
#roster-A { grid-area: rosterA; }
#roster-B { grid-area: rosterB; }
/* Phone: your own team's list comes first. */
.floor.mine-B { grid-template-areas: "podA clock podB" "center center center" "rosterB rosterB rosterB" "rosterA rosterA rosterA"; }

/* The clock: seconds left in a ring that runs down (--p is set by the client). */
.clock { --p: 100%; position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold) 0 var(--p), rgba(92, 20, 88, 0.2) var(--p) 100%); box-shadow: 0 4px 0 var(--well); }
.clock::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(var(--panel-bottom), var(--well)); }
.clock span { position: relative; font-family: var(--letters); font-size: 1.7rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.clock.urgent { background: conic-gradient(var(--hurry) 0 var(--p), rgba(92, 20, 88, 0.2) var(--p) 100%); animation: clock-pulse 700ms ease-in-out infinite alternate; }
.clock.urgent span { color: var(--gold); }
@keyframes clock-pulse { to { box-shadow: 0 4px 0 var(--well), 0 0 18px var(--hurry); } }
.round-name { margin: 8px 0 0; text-align: center; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-deep); }
.phase-line { margin: 4px 0 10px; text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.stage-center .format-rule, .stage-center .topic-line { justify-self: center; margin: 0 0 10px; padding: 4px 14px; border-radius: 999px; text-align: center; font-size: 0.9rem; background: var(--well); color: var(--gold); }

/* Podiums with an LED edge: the team's score on the front, this round's
   clue giver standing behind it. Phone sizes first. */
.pd { --c: var(--red); --c-deep: var(--red-deep); --c-lip: var(--red-lip); --c-light: #ff9bb6; --c-dark: #4f0620;
  position: relative; display: grid; justify-items: center; min-width: 0; }
.pd.team-B { --c: var(--blue); --c-deep: var(--blue-deep); --c-lip: var(--blue-lip); --c-light: #c9ebff; --c-dark: #0f3b5c; }
.pd-spot { position: absolute; left: -10%; right: -10%; bottom: -18px; height: 50px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); }
.pd-avatar { position: relative; z-index: 1; width: 76px; height: 76px; margin-bottom: -8px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 28%, var(--c-light), var(--c) 45%, var(--c-deep)); border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(255, 201, 74, 0.6); }
.pd-avatar .person { width: 58%; height: 58%; margin-top: -8%; }
.pd-avatar .pencil { position: absolute; right: -6px; bottom: 18%; width: 28px; height: 28px; }
/* The giver's character: no frame, standing behind the podium (the slab
   hides the waist). Drawn with its own shading. */
.pd-avatar.figure { width: 104px; height: 112px; margin-bottom: -22px; border: 0; border-radius: 0; background: none; box-shadow: none; display: block;
  filter: drop-shadow(0 6px 10px rgba(58, 10, 53, 0.35)); }
.pd-avatar.figure svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pd-slab { position: relative; z-index: 2; width: 100%; height: 14px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, var(--c-light) 16%, var(--c) 52%, var(--c-deep) 100%);
  box-shadow: 0 4px 0 var(--c-lip), 0 0 0 2px var(--c-light), 0 0 14px var(--c), 0 10px 14px rgba(58, 10, 53, 0.3); }
.pd-face { position: relative; z-index: 1; width: 88%; margin-top: 4px; padding: 8px 6px 16px; display: grid; justify-items: center; gap: 4px; min-width: 0;
  border-radius: 0 0 50% 50% / 0 0 14px 14px; color: #fff;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.05) 20%, rgba(255, 255, 255, 0.16) 46%, rgba(0, 0, 0, 0.05) 74%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, var(--c-deep), var(--c-lip) 80%, var(--c-dark)); }
.pd-face::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent); }
.pd-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0 28%, transparent 28.5%); }
.pd-tag { font-size: 0.64rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.pd-score { padding: 2px 14px; border-radius: 8px; background: linear-gradient(180deg, #12030f, #2c0a28);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.3);
  font-family: var(--letters); font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px var(--c); }
.pd-plate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; color: #fff6c9; }
.pd-note { display: none; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.pd-trim { width: 100%; height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 6px 2px var(--c-light), 0 0 16px 4px var(--c); }
.pd-base { position: relative; z-index: 1; width: 100%; height: 12px; margin-top: -7px; border-radius: 8px 8px 12px 12px;
  background: linear-gradient(180deg, #6b1a63, var(--well) 70%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #1a0616, 0 -2px 0 var(--c-light), 0 0 18px var(--c); }
.pd-shadow { width: 104%; height: 12px; margin-top: -5px; border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 10, 53, 0.45), transparent); }

/* The clue board: a lit marquee around a dark sign. */
.marquee { position: relative; margin: 0 0 14px; border-radius: 20px; padding: 14px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); box-shadow: 0 6px 0 #3a0d35, 0 10px 24px rgba(92, 20, 88, 0.3); }
.marquee::before { content: ""; position: absolute; inset: 4px; border-radius: 17px; pointer-events: none; border: 5px dotted #ffe08a;
  filter: drop-shadow(0 0 3px rgba(255, 201, 74, 0.9)); animation: twinkle 1.2s steps(2) infinite; }
.board { position: relative; border-radius: 12px; background: #1a0616; padding: 12px 10px 14px; text-align: center; color: var(--text);
  box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.6); display: grid; justify-items: center; gap: 10px; min-height: 96px; align-content: center; }
.board-label { margin: 0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.board-label:empty { display: none; }
.board-body { display: grid; justify-items: center; gap: 10px; width: 100%; }
.board-body .tiles { width: min(100%, 400px); }
.board-body .clue-tiles { justify-content: center; margin: 0; }
.board-body .hints { justify-content: center; margin: 0; }
.board-msg { margin: 0; font-weight: 800; font-size: 1.1rem; }
.board-sub { margin: 0; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.board .no-clue { margin: 0; }
.console { margin: 0 0 14px; }

/* Team lists: clue giver first; your teammates' guesses during guessing. */
.roster { border-radius: 18px; overflow: hidden; color: var(--text); border: 2px solid var(--red-edge);
  background: linear-gradient(180deg, var(--panel-bottom), #3a0d35); box-shadow: 0 5px 0 var(--red-lip); }
.roster.team-B { border-color: var(--blue-edge); box-shadow: 0 5px 0 var(--blue-lip); }
.roster h3 { margin: 0; padding: 8px 12px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 900;
  background: linear-gradient(90deg, var(--red-deep), transparent); }
.roster.team-B h3 { background: linear-gradient(90deg, var(--blue-deep), transparent); }
.roster ul { list-style: none; margin: 0; padding: 6px; display: grid; gap: 4px; }
.roster li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.18); font-weight: 800; }
.roster .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster .star { color: var(--gold); text-align: center; }
.roster .g.guess { font-family: var(--type); letter-spacing: 0.06em; }
.roster .g.soft { color: var(--text-soft); font-weight: 700; }
.roster .g.hidden { letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.35); }
.roster li.giver { background: linear-gradient(90deg, rgba(255, 201, 74, 0.25), rgba(255, 201, 74, 0.04)); }
.roster .giver-mark { color: var(--gold); font-weight: 900; letter-spacing: 0.08em; font-size: 0.72rem; text-transform: uppercase; }
.roster li.you { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }

/* Wide screens: podiums on either side of the clock and board, each
   team's list under its podium. Sizes grow a little with the window. */
@media (min-width: 900px) {
  .floor, .floor.mine-B { max-width: none; gap: 16px 22px; align-items: start;
    grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.5fr) minmax(220px, 1fr);
    grid-template-areas: "podA clock podB" "podA center podB" "rosterA center rosterB";
    grid-template-rows: auto auto 1fr; }
  .clock-box { align-self: start; }
  .clock { width: clamp(84px, 12vh, 118px); height: clamp(84px, 12vh, 118px); }
  .clock span { font-size: clamp(1.8rem, 4vh, 2.6rem); }
  .pd-avatar { width: clamp(130px, 19vh, 190px); height: clamp(130px, 19vh, 190px); margin-bottom: -14px; border-width: 4px;
    box-shadow: 0 0 0 5px var(--gold), 0 0 28px rgba(255, 201, 74, 0.6); }
  .pd-avatar .pencil { width: 25%; height: 25%; }
  .pd-avatar.figure { width: clamp(170px, 26vh, 250px); height: clamp(184px, 28vh, 270px); margin-bottom: -40px; box-shadow: none; }
  .pd-slab { height: 24px; border-radius: 13px; box-shadow: 0 6px 0 var(--c-lip), 0 0 0 2px var(--c-light), 0 0 22px var(--c), 0 12px 16px rgba(58, 10, 53, 0.3); }
  .pd-face { margin-top: 6px; padding: 16px 16px 26px; gap: 8px; border-radius: 0 0 50% 50% / 0 0 22px 22px; }
  .pd-face::before { height: 12px; }
  .pd-tag { font-size: 0.78rem; }
  .pd-score { font-size: 2.6rem; padding: 2px 22px; }
  .pd-plate { padding: 6px 18px; border-radius: 10px; background: linear-gradient(180deg, #12030f, #2c0a28);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.3);
    font-family: var(--letters); font-weight: 400; font-size: clamp(1.2rem, 2.4vh, 1.6rem); letter-spacing: 0.05em; text-shadow: 0 0 10px rgba(255, 201, 74, 0.5); }
  .pd-note { display: block; }
  .pd-trim { height: 4px; }
  .pd-base { height: 18px; margin-top: -10px; }
  .pd-shadow { height: 18px; margin-top: -8px; }
  .pd-spot { bottom: -22px; height: 56px; }
  .marquee { padding: clamp(14px, 2.6vh, 26px) 18px; }
  .board { min-height: 130px; }
  /* Tiles grow with the window but an 8-tile clue always fits on one line. */
  .board-body { container-type: inline-size; }
  .board-body .clue-tiles { flex-wrap: nowrap; }
  .board-body .clue-tiles .tile { width: min(clamp(44px, 7vh, 64px), calc(100cqi / 9)); font-size: clamp(1.4rem, 3.4vh, 2.1rem); }
  .board-body .tiles { width: min(100%, 460px); }
  .console .slip-row .tile { max-width: clamp(48px, 7vh, 64px); font-size: clamp(1.4rem, 3.4vh, 2.1rem); }
  .console .answer-box { max-width: 560px; }
  .roster li { padding: clamp(6px, 1.2vh, 12px) 12px; font-size: clamp(1rem, 1.8vh, 1.15rem); }
}

/* ---------- Showtime: versus page and clue giver intro ---------- */

/* A dark stage under colored lights, for the moments between rounds. */
.show-stage {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px 18px; min-height: 420px; color: var(--text);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(255, 201, 74, 0.25), transparent 70%),
    radial-gradient(500px 300px at 10% 100%, rgba(255, 77, 126, 0.28), transparent 70%),
    radial-gradient(500px 300px at 90% 100%, rgba(116, 200, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #3a0a35, #1a0616);
  box-shadow: 0 10px 30px rgba(110, 10, 73, 0.25);
  max-width: 980px; margin: 8px auto 16px;
}

/* Versus: Red slides in and shakes to a stop, VS pops past full size and
   settles, then Blue slides in the same way, then the countdown. */
.versus { display: grid; align-content: center; gap: 22px; }
.vs-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.vs-card { border-radius: 16px; padding: 14px; background: rgba(0, 0, 0, 0.28); }
.vs-card h2 { margin: 0 0 8px; font-family: var(--letters); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: 0.05em; text-transform: uppercase; }
.vs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vs-card li { font-weight: 800; background: rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 4px 10px; overflow-wrap: anywhere; }
.vs-card.team-A { border: 3px solid var(--red); box-shadow: 0 0 20px rgba(255, 77, 126, 0.45); }
.vs-card.team-A h2 { color: var(--red); }
.vs-card.team-B { border: 3px solid var(--blue); box-shadow: 0 0 20px rgba(116, 200, 255, 0.45); text-align: right; }
.vs-card.team-B h2 { color: var(--blue); }
.vs-mark { position: relative; z-index: 2; font-family: var(--letters); font-size: clamp(3rem, 9vw, 5.5rem); line-height: 1; color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 201, 74, 0.8), 0 4px 0 #7a4a00; animation: vs-grow 800ms ease-out 650ms both; }
.slide-left { animation: slide-left 700ms ease-out both; }
.slide-right { animation: slide-right 700ms ease-out 1300ms both; }
.vs-count { display: grid; justify-items: center; animation: fade-in 400ms ease 2100ms both; }
.vs-count .round-name { color: var(--gold); }
@keyframes slide-left {
  0% { transform: translateX(-120%); opacity: 0; } 55% { transform: translateX(18px); opacity: 1; }
  68% { transform: translateX(-12px); } 79% { transform: translateX(7px); } 88% { transform: translateX(-3px); }
  95% { transform: translateX(1px); } 100% { transform: none; opacity: 1; }
}
@keyframes slide-right {
  0% { transform: translateX(120%); opacity: 0; } 55% { transform: translateX(-18px); opacity: 1; }
  68% { transform: translateX(12px); } 79% { transform: translateX(-7px); } 88% { transform: translateX(3px); }
  95% { transform: translateX(-1px); } 100% { transform: none; opacity: 1; }
}
@keyframes vs-grow {
  0% { transform: scale(0); opacity: 0; } 45% { transform: scale(2.1); opacity: 1; }
  70% { transform: scale(0.9); } 85% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Intro: the clue giver's announcement, or everyone else's waiting screen. */
.intro { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; }
.intro > * { transition: opacity 300ms ease, filter 300ms ease; }
.intro-eyebrow { margin: 0; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.intro-big { margin: 0; font-family: var(--letters); font-weight: 400; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); overflow-wrap: anywhere; }
.intro.team-A .intro-big { color: var(--red); }
.intro.team-B .intro-big { color: var(--blue); }
.intro-sub { margin: 0; max-width: 34ch; color: var(--text-soft); font-weight: 700; }
.intro-other { margin: 6px 0 0; font-size: 0.9rem; color: var(--text-soft); background: rgba(0, 0, 0, 0.25); padding: 4px 12px; border-radius: 999px; }
.intro-ring { width: 64px; height: 64px; }
.intro-ring span { font-size: 1.4rem; }
.wait-timer { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: min(100%, 420px); margin-top: 6px; }
.wait-timer .timer-num { color: #fff; }
/* The last 3 seconds: a big number over the dimmed stage. */
.intro.counting > :not(.count-num) { opacity: 0.25; filter: blur(2px); }
.count-num { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.count-num span { font-family: var(--letters); font-size: clamp(6rem, 22vw, 11rem); color: #fff;
  text-shadow: 0 0 30px rgba(255, 201, 74, 0.9), 0 8px 0 rgba(0, 0, 0, 0.35); animation: count 900ms ease-out both; }
@keyframes count { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 75% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(0.7); opacity: 0; } }
/* GO, then a soft burst opens into the clue screen. */
.go-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; }
.go-overlay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 201, 74, 0.9), rgba(255, 79, 184, 0.85) 40%, #3a0a35 75%);
  clip-path: circle(0% at 50% 50%); }
.go-overlay span { position: relative; font-family: var(--letters); font-size: clamp(6rem, 22vw, 11rem); color: var(--gold); text-shadow: 0 0 30px rgba(255, 201, 74, 0.9), 0 8px 0 rgba(0, 0, 0, 0.35); opacity: 0; }
.go-overlay.play::before { animation: burst 700ms ease-in 350ms forwards; }
.go-overlay.play span { animation: count 700ms ease-out both; }
@keyframes burst { 0% { clip-path: circle(0% at 50% 50%); opacity: 1; } 100% { clip-path: circle(80% at 50% 50%); opacity: 0; } }

/* Emotes and quick lines, under the versus and results pages. */
.showtime-bar { max-width: 980px; margin: 0 auto 16px; display: grid; gap: 8px; justify-items: center; }
.emotes, .lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
/* Emoji get a color emoji font by name: bold white button text would
   otherwise pull some faces from a plain font, drawn white on white. */
.emote, .floater { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; }
.emote { font-size: 1.5rem; line-height: 1; color: var(--ink); padding: 6px 9px; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #e2b8cd; text-shadow: none; }
.line { font-weight: 800; font-size: 0.85rem; padding: 5px 12px; border-radius: 999px; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px #e7a8c9, 0 3px 0 #e2b8cd; text-shadow: none; }
.floaters { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.floater { position: absolute; bottom: -40px; font-size: 2.2rem; animation: float 2200ms ease-out both; }
@keyframes float { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-40px) scale(1.1); } 100% { transform: translateY(-70vh) scale(1); opacity: 0; } }

@media (max-width: 640px) {
  .vs-row { grid-template-columns: 1fr; }
  .vs-card.team-B { text-align: left; }
  .vs-mark { justify-self: center; }
  .show-stage { min-height: 360px; }
}

/* END OF ROUND: the page dims and the words zoom in and out. */
.eor-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: rgba(26, 6, 22, 0); }
.eor-overlay.play { animation: eor-dim 1500ms ease both; }
.eor-overlay p { margin: 0; text-align: center; font-family: var(--letters); font-size: clamp(2.2rem, 8vw, 4.4rem); letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 24px rgba(255, 201, 74, 0.8), 0 6px 0 rgba(0, 0, 0, 0.4); opacity: 0; }
.eor-overlay.play p { animation: eor-zoom 1500ms cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.eor-overlay small { display: block; margin-top: 6px; font-family: var(--body); font-weight: 900; font-size: 0.3em; letter-spacing: 0.25em; color: var(--gold); }
@keyframes eor-dim { 0% { background: rgba(26, 6, 22, 0); } 20%, 80% { background: rgba(26, 6, 22, 0.82); } 100% { background: rgba(26, 6, 22, 0); } }
@keyframes eor-zoom { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1.05); } 45% { transform: scale(1); } 85% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.3); } }

/* End of game: the final scores count up, then who stood out. */
.final-scores { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 2px; }
.final-score { display: grid; justify-items: center; min-width: 130px; padding: 8px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.final-score .who { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.final-score.team-A .who { color: var(--red); }
.final-score.team-B .who { color: var(--blue); }
.final-score .num { font-family: var(--letters); font-size: 2.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.final.won-A .final-score.team-A, .final.won-B .final-score.team-B { box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(255, 201, 74, 0.45); }
.highlights { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.highlights:empty { display: none; }
.highlight { display: grid; justify-items: center; gap: 2px; min-width: 180px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 201, 74, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, 0.45); }
.highlight .h-title { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.highlight .h-name { font-family: var(--letters); font-size: 1.4rem; color: #fff6c9; overflow-wrap: anywhere; text-align: center; }
.highlight .h-value { font-size: 0.85rem; font-weight: 700; color: var(--text-soft); }

/* ---------- burnt paper letter slips ---------- */

/* The torn edge (clip-path) would cut off a shadow on the slip itself, so
   rows of slips carry the shadow instead. */
.tiles, .clue-tiles, .slip-row { filter: drop-shadow(0 3px 2px rgba(40, 10, 0, 0.4)); }
.tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(3px, 1.2vw, 6px); max-width: 420px; }
.tile {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  line-height: 1;
  font-family: var(--letters);
  font-size: clamp(1rem, 5vw, 1.45rem);
  text-transform: uppercase;
  color: var(--paper-ink);
  background: radial-gradient(circle at 50% 50%, #fbf0d6 0 50%, #ecd4a4 63%, #b9844a 77%, #52280f 93%);
  clip-path: polygon(6% 4%, 22% 0, 40% 5%, 58% 1%, 78% 6%, 96% 2%, 99% 22%, 95% 42%, 100% 62%, 96% 82%, 98% 97%, 78% 94%, 60% 100%, 42% 95%, 22% 99%, 3% 96%, 5% 76%, 0 56%, 4% 36%, 1% 16%);

}
.tile:nth-child(odd) { transform: rotate(-1.5deg); }
.tile:nth-child(even) { transform: rotate(1.2deg); }
.tile.blank { color: transparent; } /* a space: a paper slip with nothing on it */
.tile.slot { background: radial-gradient(circle at 50% 50%, #4a1242 0 55%, #3a0d35 85%); color: transparent; }
.tile.caret { background: radial-gradient(circle at 50% 50%, #5a1652 0 45%, #a8126f 75%, var(--pink) 95%); }
.tile.letter.caret { background: radial-gradient(circle at 50% 50%, #fff4f9 0 48%, #ffc7e6 68%, var(--pink) 92%); }
.tile.pop { animation: pop 180ms ease-out; }
@keyframes pop { 0% { scale: 0.7; } 70% { scale: 1.08; } 100% { scale: 1; } }

/* The clue: slips, with gaps where the giver typed a space or dash. */
.clue-tiles { display: flex; flex-wrap: wrap; gap: clamp(3px, 1.2vw, 6px); margin: 0 0 16px; }
.clue-tiles .tile { width: clamp(30px, 9vw, 44px); }
.no-clue { font-weight: 800; font-size: 1.15rem; margin: 0 0 16px; }

/* Answer box: slips drawn from a real input underneath, so typing,
   backspace, arrow keys, and phone keyboards work normally. */
.answer-box { position: relative; max-width: 420px; }
.answer-box input {
  position: absolute; inset: 0; width: 100%;
  opacity: 0;
  font-size: 16px; /* stops mobile zoom on focus */
  cursor: text;
}
.answer-box:focus-within .slip-row { outline: 2px dashed color-mix(in srgb, var(--pink) 60%, transparent); outline-offset: 6px; border-radius: 10px; }

/* Slip row for typing: slips and empty slots, with a narrow gap for a space. */
.slip-row { display: flex; gap: clamp(3px, 1.2vw, 6px); min-height: 40px; }
.slip-row .tile { flex: 1 1 0; min-width: 0; max-width: 46px; } /* slips share the row, so 8 plus a gap fit on a phone */
.slip-row .gap { width: clamp(10px, 3vw, 16px); flex: none; border-radius: 4px; }
.slip-row .gap.caret { box-shadow: inset 0 -4px 0 var(--pink); }

/* Last 5 seconds of writing or guessing: a glow traces each slip's torn
   edge (the clip-path would hide a border), flashing coral and gold. */
.slip-row.hurry { animation: hurry 700ms ease-in-out infinite alternate; }
@keyframes hurry {
  from { filter: drop-shadow(0 0 1px var(--hurry)) drop-shadow(0 0 1px var(--hurry)) drop-shadow(0 0 1px var(--hurry)) drop-shadow(0 0 6px var(--hurry)); }
  to { filter: drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 8px var(--gold)); }
}

/* ---------- clue giver ---------- */

.giver-intro { font-weight: 900; font-size: 1.3rem; margin: 0 0 4px; }
.clue-list { display: grid; gap: 16px; margin: 8px 0 0; }

/* Lawless: what the clue is worth, and which patterns cost points. */
.clue-cost:empty { display: none; }
.clue-cost { margin: 8px 0 0; background: var(--row); border-radius: 10px; padding: 8px 12px; }
.clue-cost .worth { margin: 0; font-weight: 900; color: var(--hurry); }
.clue-cost .worth.full { color: var(--gold); }
.clue-cost ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; font-weight: 700; }
.clue-cost li { display: flex; justify-content: space-between; gap: 10px; }
.clue-cost .minus { color: var(--hurry); font-weight: 900; }
.clue-cost .floor { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-soft); }
.penalty-line { margin: 8px 0 0; font-weight: 800; color: var(--hurry); font-size: 0.9rem; }
.format-picker { display: grid; gap: 6px; justify-items: start; width: 100%; }
.format-picker .soft { margin: 0; }
.format-rule { margin: 10px 0 0; font-weight: 700; color: var(--gold); }
.final .format-picker { margin: 10px 0; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.suggestions:empty { display: none; }
.chip {
  font-family: var(--type); font-size: 0.9rem; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--note); color: var(--note-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); text-shadow: none;
}
.topic-line { margin: 10px 0 0; font-weight: 900; color: var(--gold); }
.hints { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.hint {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 0.85rem;
}
.hint .swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.hints-editor { margin: 10px 0 0; background: var(--row); border-radius: 10px; padding: 8px 10px; }
.hints-editor .eyebrow { margin: 0 0 6px; }
.hint-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.hint-list:empty { display: none; }
.hint-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hint-controls select { width: auto; max-width: 160px; padding: 6px 30px 6px 10px; font-size: 0.9rem; }
.first-clue { margin: 0 0 8px; font-weight: 800; color: var(--gold); }
.worth-each { font-size: 0.8rem; font-weight: 800; color: var(--gold); }
.accepted { color: var(--gold); font-weight: 800; margin: 6px 0 0; }

/* ---------- chat ---------- */

.chat .messages { list-style: none; padding: 0; margin: 0 0 10px; flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 6px; word-break: break-word; }
.chat .messages li {
  background: var(--row);
  border-radius: 4px 12px 12px 12px;
  padding: 4px 11px;
  font-family: var(--chat); font-weight: 700; font-size: 1.02rem;
}
.chat .messages li.soft { background: none; font-family: var(--body); font-weight: 600; font-size: 0.9rem; color: var(--text-soft); }
.chat .messages strong { color: #ffc7e6; font-weight: 700; }
.chat .use-this { margin-left: 8px; padding: 2px 10px; font-size: 0.78rem; vertical-align: 1px; font-family: var(--body); }
.chat .messages li.system {
  background: none; border-radius: 0; padding: 2px 4px;
  font-family: var(--body); font-weight: 700; font-size: 0.85rem; font-style: italic;
  color: var(--text-soft); text-align: center;
}
.chat .messages li.team-msg.team-A { box-shadow: inset 3px 0 0 var(--red); }
.chat .messages li.team-msg.team-B { box-shadow: inset 3px 0 0 var(--blue); }
.chat .messages .tag {
  font-family: var(--body); font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px;
}
.chat h2 .chat-scope { font-size: 0.9rem; font-weight: 700; color: var(--text-soft); }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; font-family: var(--chat); font-weight: 700; }

/* The dock: a pull-up sheet on phones, opened from a bubble. */
.chat-dock .chat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; height: 60vh; height: 60dvh;
  border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  transform: translateY(105%); visibility: hidden; transition: transform 220ms ease-out, visibility 220ms; }
.chat-dock .chat.open { transform: none; visibility: visible; }
.chat .grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); margin: -6px auto 8px; flex: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-head h2 { margin: 0 0 8px; }
.icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; flex: none; }
#chat-collapse { display: none; font-size: 1.2rem; }
.chat-fab { position: fixed; right: 16px; bottom: 18px; z-index: 20; width: 58px; height: 58px; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.chat-fab svg { width: 26px; height: 26px; }
.badge-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 900; text-shadow: none;
  background: var(--gold); color: var(--gold-ink); box-shadow: 0 2px 0 var(--gold-deep); }
.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(42, 8, 38, 0.35); }

/* Wide screens: the chat is a column beside the game, as tall as the game
   (it never sets the height itself). Folded, the column is gone entirely
   and the game gets the space back; a big bubble in the top right, with the
   unread count, opens it again. */
@media (min-width: 900px) {
  .page.has-chat { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding: 0 20px 0 0; transition: grid-template-columns 200ms; }
  .page.has-chat.folded { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .page.has-chat main { max-width: 1240px; }
  .chat-dock { padding-top: 20px; }
  .page.folded .chat-dock { display: none; }
  .chat-dock .chat { position: relative; left: auto; right: auto; bottom: auto; z-index: auto; transform: none; visibility: visible; transition: none;
    border-radius: 20px; height: 0; min-height: 100%; }
  .chat .grab, #chat-close, .scrim { display: none !important; }
  #chat-collapse { display: grid; }
  .chat-fab { top: 18px; bottom: auto; right: 22px; width: 76px; height: 76px; }
  .chat-fab svg { width: 36px; height: 36px; }
  .chat-fab .badge-count { top: -6px; right: -6px; min-width: 30px; height: 30px; border-radius: 15px; font-size: 0.95rem; }
}

/* ---------- results and final ---------- */

/* The clock and title, as on the game stage. */
.results-head { display: grid; justify-items: center; gap: 8px; margin: 0 0 16px; }
.results-head .clock-box { grid-area: auto; }
.results-title { margin: 0; text-align: center; font-weight: 900; font-size: 1.15rem; }
.results-next { font-weight: 700; color: var(--ink-soft); }

.results-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.3fr) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.reveal-box { margin: 0; }
.reveal { min-height: 0; }
.board .eyebrow { color: var(--gold); }
.board .piles { gap: 14px; }
.board .pile { width: 140px; }

/* Each team's clues and answers, on a card like the team lists. */
.result-card { padding: 0 0 12px; }
.result-card h2 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 12px;
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 900;
  background: linear-gradient(90deg, var(--red-deep), transparent); }
.result-card.team-B h2 { background: linear-gradient(90deg, var(--blue-deep), transparent); }
.result-card h2 span:nth-child(2) { font-family: var(--letters); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.04em; color: var(--gold); }
.result-card > :not(h2) { margin-left: 12px; margin-right: 12px; }
.result-card .soft { color: var(--text-soft); }
.words { display: grid; gap: 10px; justify-items: center; margin: 4px 0 12px; width: 100%; }
.words .tiles { width: min(100%, 300px); }
.words .tile { font-size: clamp(0.9rem, 3.5vw, 1.25rem); }

/* Scores as eraser piles: one eraser per point; erasers shrink as the
   pile grows (the size is set per pile from the client). */
.piles { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.pile-box { display: grid; gap: 4px; justify-items: center; }
.who { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); }
.pile { display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; gap: 1px; width: 170px; min-height: 60px; }
.eraser { position: relative; width: var(--w, 34px); height: calc(var(--w, 34px) * 0.46); transform: rotate(var(--r, -10deg)); flex: none; }
.eraser::before { content: ""; position: absolute; inset: 0 34% 0 0; border-radius: 4px 2px 2px 4px; background: linear-gradient(180deg, #ff9cc7, #f06aa8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #b8457c; }
.eraser::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 38%; border-radius: 2px 4px 4px 2px; background: linear-gradient(180deg, #7fc4ff, #3f8fd8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #2a6aa8; }
.eraser.drop { animation: drop 260ms ease-out; }

/* Team results: a redaction bar over each secret word, rubbed away by an
   eraser moving left to right. --delay staggers Speed Round words. */
.reveal-wrap { position: relative; width: min(100%, 300px); }
.reveal-wrap .tiles { width: 100%; }
.redaction {
  position: absolute; inset: -5px -6px;
  background: #1a0616; border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  animation: unredact 1100ms ease-in-out var(--delay) forwards;
}
@keyframes unredact { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.eraser.rubbing {
  --w: 46px;
  position: absolute; top: 50%; left: -6px; margin-top: -11px;
  opacity: 0;
  animation: rub 1100ms ease-in-out var(--delay) forwards;
}
@keyframes rub {
  0% { left: -6px; opacity: 1; transform: rotate(-12deg); }
  20% { transform: rotate(8deg) translateY(-3px); }
  40% { transform: rotate(-10deg) translateY(2px); }
  60% { transform: rotate(9deg) translateY(-2px); }
  80% { transform: rotate(-8deg); opacity: 1; }
  100% { left: calc(100% - 40px); opacity: 0; transform: rotate(0deg); }
}
@keyframes drop { from { translate: 0 -14px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.count { font-weight: 900; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1; }
.count small { font-size: 0.8rem; color: var(--text-soft); font-weight: 800; }

.word-block + .word-block { margin-top: 12px; }
.word-block .clue-line { margin: 0 0 4px; font-weight: 800; }
.answers { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.answers li { display: grid; grid-template-columns: 1.4em 1fr; gap: 4px; background: var(--row); border-radius: 8px; padding: 3px 8px; font-size: 0.9rem; overflow-wrap: anywhere; }
.answers .mark { font-weight: 900; text-align: center; }
.answers .correct .mark { color: var(--gold); }
.answers .wrong .mark { color: var(--bad); }
.answers .guess { font-family: var(--type); text-transform: uppercase; letter-spacing: 0.04em; }
.answers .wrong .guess { color: var(--text-soft); }

/* The winner, lit up on the board. */
.final { margin: 0 0 18px; }
.final .board { padding: 18px 14px 20px; gap: 6px; }
.final-title { margin: 0; font-family: var(--letters); font-weight: 400; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.1; color: #fff6c9;
  text-shadow: 0 0 8px var(--gold), 0 0 22px rgba(255, 201, 74, 0.8); }
.final-note { margin: 0; color: var(--text-soft); }
.final .format-picker { justify-items: center; }
.final button { margin-top: 8px; }

@media (max-width: 700px) {
  .results-grid { grid-template-columns: 1fr; }
  .reveal-box { order: -1; }
}

/* Big monitors and TVs: everything scales up with the screen instead of
   sitting small in the middle. zoom scales layout, text, tiles, and the
   chat column together. */
@media (min-width: 1700px) { .page { zoom: 1.12; } }
@media (min-width: 1950px) { .page { zoom: 1.25; } }
@media (min-width: 2300px) { .page { zoom: 1.45; } }
@media (min-width: 2800px) { .page { zoom: 1.75; } }

@media (prefers-reduced-motion: reduce) {
  .tile.pop, .eraser.drop { animation: none; }
  .redaction, .eraser.rubbing { display: none; }
  .slip-row.hurry { animation: none; filter: drop-shadow(0 0 1px var(--hurry)) drop-shadow(0 0 1px var(--hurry)) drop-shadow(0 0 1px var(--hurry)) drop-shadow(0 0 6px var(--hurry)); }
  .timer-fill, button, .chat-dock .chat { transition: none; }
  .badge::before, .marquee::before, .clock.urgent { animation: none; }
  .eor-overlay.play, .eor-overlay.play p { animation-duration: 600ms !important; }
  .slide-left, .slide-right, .vs-mark, .vs-count, .count-num span, .floater, .go-overlay.play::before, .go-overlay.play span { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}

/* ---------- Home: title screen, menus, settings ---------- */
.home { display: grid; gap: 16px; justify-items: center; }
.home .marquee.preview { width: 100%; margin: 0; }
.preview-board { min-height: 190px; display: grid; align-content: center; justify-items: center; gap: 10px; }
.preview-board .tiles { width: min(100%, 360px); }
.preview-board .tile.gap-tile { background: none; box-shadow: none; }
.preview-guess { margin: 0; font-weight: 800; color: var(--text-soft); }
.preview-guess strong { color: var(--text); letter-spacing: 0.08em; }
.preview-guess.done { color: var(--text); animation: drop 260ms ease-out 1200ms both; }
.preview-points { display: inline-block; color: var(--gold) !important; font-size: 1.2rem; animation: pop-points 500ms 1300ms ease-out both; }
@keyframes pop-points { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } }
.home-actions { width: min(100%, 360px); display: grid; gap: 12px; justify-items: stretch; text-align: center; }
.home-actions .small { justify-self: center; }
/* Big menu buttons (and the Log In / Create Account links, drawn the same). */
.big-btn { font-size: 1.25rem; padding: 14px 20px; border-radius: 14px; text-align: center; text-decoration: none; }
a.big-btn {
  display: block; font-family: var(--letters); font-weight: 400; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(180deg, #ff7fcb, var(--pink) 55%, #e33a9f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 4px 0 var(--pink-lip);
}
a.big-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 1px 0 var(--pink-lip); }
a.big-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a.big-btn.secondary, button.big-btn.secondary {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); color: var(--text);
  border: 2px solid var(--panel-edge); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 4px 0 var(--panel-lip);
}
button.big-btn { font-family: var(--letters); font-weight: 400; letter-spacing: 0.02em; }
.menu-note { margin: -6px 0 0; color: var(--ink-soft); font-weight: 700; }
.welcome { margin: 0 0 4px; font-family: var(--letters); font-size: 1.5rem; color: var(--pink-deep); }
.invite-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--gold); color: var(--gold-ink); font-weight: 800; }
.home-note { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.home-links { margin: 0; font-size: 0.85rem; text-align: center; }
.home-links a { color: var(--pink-deep); font-weight: 700; }
.panel .home-links a { color: var(--gold); }
button.back-btn { justify-self: start; margin: 0 0 10px; background: none; border: 0; box-shadow: none; padding: 4px 0; min-height: 0;
  color: var(--pink-deep); font: 800 1rem/1 var(--body); cursor: pointer; }
button.back-btn:active:not(:disabled) { transform: none; box-shadow: none; }
.or-line { margin: 4px 0 0; text-align: center; color: var(--text-soft); font-size: 0.9rem; }
.join-row { flex-wrap: nowrap; }
.join-row input { flex: 1; min-width: 0; }
.panel > h2:first-child { margin-top: 0; }

/* Create your account */
.auth-panel { display: grid; gap: 12px; }
.auth-panel h2 { margin: 0; }
.auth-panel a, .settings a { color: var(--gold); }
.auth-note { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.auth-rules { margin: -4px 0 0; font-size: 0.9rem; color: var(--text-soft); }
.auth-rules.bad { color: var(--gold); font-weight: 700; }
.toggle.agree { align-items: flex-start; font-weight: 600; }
.toggle.agree input { flex: none; margin-top: 2px; }

/* Settings */
.settings { display: grid; gap: 12px; }
.settings h2 { margin: 0; }
.settings h3 { margin: 10px 0 0; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.settings .row { flex-wrap: nowrap; }
.settings .row input { flex: 1; min-width: 0; }
.settings > button { justify-self: start; }
details.danger summary { cursor: pointer; color: var(--text-soft); font-weight: 700; }
details.danger[open] summary { margin-bottom: 8px; }
details.danger p { margin: 0; }
button.danger-btn { background: linear-gradient(180deg, #ff6b6b, #d93636); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #7a1414; }

/* Profile */
.profile { display: grid; justify-items: center; gap: 6px; text-align: center; }
.profile h2 { margin: 6px 0 0; font-size: 1.5rem; }
.profile p { margin: 0; }
.profile-heading { margin: 14px 0 0; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.profile-heading span { letter-spacing: 0; text-transform: none; color: var(--text-soft); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; width: min(100%, 320px); margin: 4px 0 8px; text-align: left; }
.stat-grid dt { color: var(--text-soft); font-weight: 700; }
.stat-grid dd { margin: 0; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.face.big { width: 96px; height: 96px; justify-self: center; border: 4px solid #fff; box-shadow: 0 5px 0 var(--gold-ink); }
.face.big:not(.has-face) { padding: 18px; color: #fff; background: linear-gradient(180deg, #ffd66e, var(--gold) 55%, var(--gold-deep)); }

/* Picking a character: a grid of faces; the picked one is ringed in gold. */
.char-pick { border: 0; margin: 4px 0; padding: 0; min-width: 0; }
.char-pick legend { padding: 0; margin-bottom: 8px; font-weight: 800; }
.char-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.char { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; min-height: 0; margin: 0; padding: 6px 2px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.22); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); text-shadow: none; }
.char:hover { background: rgba(255, 255, 255, 0.12); }
.char .face { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; }
.char-name { max-width: 100%; font-size: 0.66rem; font-weight: 800; line-height: 1.1; text-align: center; }
.char.on, .char.on:hover { background: #fff6c9; color: var(--gold-ink); box-shadow: inset 0 0 0 3px var(--gold), 0 0 12px rgba(255, 201, 74, 0.6); }
.char-riff { min-height: 2.6em; margin: 6px 0 0; }

/* The tour: the old tutorial pages, self-paced. */
.tutorial-card { min-height: 300px; }
.tutorial-card h2 { margin: 2px 0 10px; font-size: 1.5rem; }
.tutorial-card p { margin: 0 0 10px; line-height: 1.45; }
.tutorial-card ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.45; }

/* Illustrations: a dark well holding the game's own pieces. */
.tut-art {
  display: grid; gap: 12px; justify-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #4a1242, var(--well));
  border-radius: 14px; padding: 16px 12px; margin: 0 0 14px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}
.tut-slips { display: inline-flex; gap: 3px; filter: drop-shadow(0 2px 1px rgba(40, 10, 0, 0.4)); }
.tut-slips .tile { width: 30px; font-size: 1.05rem; }
.tut-slips.small .tile { width: 22px; font-size: 0.8rem; }
.tile.hot { background: radial-gradient(circle at 50% 50%, #ffe1d8 0 48%, #ff9a7e 66%, var(--hurry) 80%, #7a1a05 94%); }
.tile.struck { opacity: 0.7; }
.tile.struck::after { content: ""; position: absolute; left: 12%; right: 12%; top: 48%; height: 2px; background: var(--bad-mark); transform: rotate(-35deg); border-radius: 2px; }
.tut-mark { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 900; font-size: 0.8rem; flex: none; }
.tut-mark.good { background: var(--good-mark); }
.tut-mark.bad { background: var(--bad-mark); }
.tut-caption { font-size: 0.8rem; font-weight: 700; color: var(--text-soft); flex-basis: 100%; text-align: center; }
.tut-icon, .tut-mini-icon, .tut-step-icon, .tut-mode-icon, .tut-dice, .tut-trophy { display: inline-grid; place-items: center; }
.tut-icon svg, .tut-mini-icon svg, .tut-step-icon svg, .tut-mode-icon svg, .tut-dice svg, .tut-trophy svg { width: 100%; height: 100%; display: block; }
.tut-mini-icon { width: 16px; height: 16px; }

/* People */
.tut-avatar {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: inline-grid; place-items: center; padding: 6px;
  color: #fff; border: 2px solid rgba(255, 255, 255, 0.5);
}
.tut-avatar.team-A { background: linear-gradient(180deg, var(--red), var(--red-deep)); }
.tut-avatar.team-B { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); }
.tut-avatar svg { width: 100%; height: 100%; }
.tut-avatar.giver { box-shadow: 0 0 0 3px var(--gold); }
.tut-badge { position: absolute; right: -8px; bottom: -6px; width: 20px; height: 20px; }
.tut-badge svg { width: 100%; height: 100%; }

/* Page 1: teams and the phases of a round */
.tut-teams { display: flex; align-items: center; gap: 14px; }
.tut-team { display: grid; gap: 6px; justify-items: center; }
.tut-team-name { font-weight: 900; font-size: 0.85rem; }
.tut-team.team-A .tut-team-name { color: var(--red); }
.tut-team.team-B .tut-team-name { color: var(--blue); }
.tut-huddle { display: flex; gap: 4px; }
.tut-huddle .tut-avatar { width: 34px; height: 34px; }
.tut-huddle .giver { transform: translateY(-6px); animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.tut-vs { font-family: var(--letters); color: var(--gold); font-size: 1.2rem; }
.tut-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.tut-step {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 4px 10px 4px 6px;
  font-weight: 800; font-size: 0.85rem; opacity: 0; animation: step-in 400ms ease-out forwards;
}
@keyframes step-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.tut-step-icon { width: 22px; height: 22px; color: var(--text); }
.tut-step-icon .eraser { --w: 22px; }
.tut-arrow { color: var(--text-soft); font-weight: 900; }
.tut-repeat { flex-basis: 100%; text-align: center; font-size: 0.8rem; font-weight: 800; color: var(--gold); }

/* Page 2: a random giver, the secret word, good and bad clues */
.tut-pick { display: flex; align-items: center; gap: 8px; }
.tut-dice { width: 30px; height: 30px; animation: roll 900ms ease-in-out 2; }
@keyframes roll { 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg); } }
.tut-avatar.spot { animation: spotlight 350ms ease-in-out; }
.tut-pick .tut-avatar.giver { box-shadow: none; animation: spotlight 350ms ease-in-out 1050ms, land 600ms ease-out 1.4s both; }
.tut-pick .tut-badge { opacity: 0; animation: step-in 300ms ease-out 1.7s forwards; }
@keyframes spotlight { 50% { box-shadow: 0 0 0 4px var(--gold), 0 0 18px var(--gold); } }
@keyframes land { from { scale: 1; } 50% { scale: 1.25; } to { scale: 1.1; box-shadow: 0 0 0 3px var(--gold); } }
.tut-secret { display: grid; gap: 4px; justify-items: center; }
.tut-eye { display: inline-flex; gap: 4px; align-items: center; font-size: 0.75rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.tut-examples { display: grid; gap: 8px; justify-items: center; }
.tut-example { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }

/* Page 3: the clue, team chat, and an answer being typed */
.tut-clue-card { display: grid; gap: 4px; justify-items: center; }
.tut-label { font-size: 0.75rem; font-weight: 800; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.tut-chat { display: grid; gap: 6px; width: min(100%, 280px); }
.tut-bubble {
  justify-self: start; background: rgba(255, 255, 255, 0.14); border-radius: 4px 12px 12px 12px;
  padding: 4px 10px; font-family: var(--chat); font-weight: 700; font-size: 0.9rem;
  opacity: 0; animation: step-in 350ms ease-out forwards;
}
.tut-bubble.right { justify-self: end; border-radius: 12px 4px 12px 12px; background: rgba(255, 79, 184, 0.35); animation-delay: 500ms; }
.tut-answer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tile.type-in { opacity: 0; animation: type-in 160ms ease-out forwards; }
@keyframes type-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
.tut-lock {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--pink); color: #fff; font-weight: 900; font-size: 0.8rem;
  animation: press 300ms ease-out 2.1s both;
}
@keyframes press { 50% { scale: 1.15; } }

/* Page 4: eraser piles and a trophy */
.tut-piles { grid-template-columns: 1fr 1fr; align-items: end; }
.tut-pile-box { position: relative; display: grid; gap: 6px; justify-items: center; }
.tut-pile { display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 1px; width: 110px; min-height: 40px; }
.eraser.tut-drop { opacity: 0; animation: drop 260ms ease-out forwards; }
.tut-trophy { width: 44px; height: 44px; animation: step-in 400ms ease-out 1.5s both, bob 1.6s ease-in-out 1.9s infinite; }
.tut-plus { position: absolute; top: 30px; right: 4px; font-weight: 900; color: var(--gold); animation: float-up 1.2s ease-out 800ms both; }
@keyframes float-up { from { opacity: 0; translate: 0 10px; } 30% { opacity: 1; } to { opacity: 0; translate: 0 -22px; } }
.tut-score { font-weight: 900; font-size: 0.85rem; }
.tut-score.team-A { color: var(--red); }
.tut-score.team-B { color: var(--blue); }

/* Page 5: one mini card per mode */
.tut-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.tut-mode {
  min-width: 0;
  display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center;
  background: var(--well); border-radius: 12px; padding: 10px 6px;
  border: 2px solid transparent;
  opacity: 0; animation: step-in 350ms ease-out forwards;
}
.tut-mode:nth-child(2) { animation-delay: 150ms; }
.tut-mode:nth-child(3) { animation-delay: 300ms; }
.tut-mode:nth-child(4) { animation-delay: 450ms; }
.tut-mode.current { border-color: var(--gold); }
.tut-mode-name { font-weight: 900; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.tut-now { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: 1px 6px; }
.tut-mode-art { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; flex-wrap: wrap; }
.tut-mode-art.tut-stack { flex-direction: column; }
.tut-row { display: inline-flex; align-items: center; gap: 4px; }
.tut-mode-art .tut-slips.small { gap: 1px; }
.tut-mode-art .tut-slips.small .tile { width: 15px; font-size: 0.6rem; }
.tut-mode-icon { width: 22px; height: 22px; }
.tut-cost { font-size: 0.72rem; font-weight: 900; color: var(--gold-ink); background: var(--gold); border-radius: 999px; padding: 1px 7px; }
.tut-mode-rule { font-size: 0.78rem; line-height: 1.35; color: var(--text-soft); }

.dots { display: flex; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); }
.dot.on { background: var(--pink-deep); }
.tutorial-card h2 { margin: 2px 0 10px; }
.tour-foot { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dots dots" "skip buttons"; align-items: center; gap: 12px; margin-top: 14px; }
.tour-foot .dots { grid-area: dots; justify-content: center; }
.tour-foot .back-btn { grid-area: skip; margin: 0; }
.tour-foot .row { grid-area: buttons; justify-self: end; flex-wrap: nowrap; }
.tour-foot button { white-space: nowrap; }
.tour-foot button.secondary { background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); color: var(--text); box-shadow: inset 0 0 0 2px var(--panel-edge), 0 3px 0 var(--panel-lip); }

/* How to Play: numbered cards with an emoji badge each. */
dialog.howto { border: 0; padding: 0; background: none; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.howto::backdrop { background: rgba(26, 6, 22, 0.6); }
dialog.howto .panel { margin: 0; display: grid; gap: 12px; }
dialog.howto h2 { margin: 0; font-family: var(--letters); font-weight: 400; font-size: 1.8rem; color: var(--gold); text-align: center; }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.howto-steps > li {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start;
  background: rgba(0, 0, 0, 0.18); border-radius: 14px; padding: 12px;
}
.howto-icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  background: radial-gradient(circle at 50% 35%, #4a1242, #1a0616); box-shadow: 0 0 0 3px var(--gold), 0 3px 0 3px var(--gold-ink);
}
.howto-steps h3 { margin: 2px 0 4px; font-family: var(--letters); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.01em; }
.howto-steps p { margin: 0 0 6px; line-height: 1.45; }
.howto-steps p:last-child { margin-bottom: 0; }
.howto-steps strong { color: var(--gold); }
.howto-rules { margin: 0 0 8px; padding-left: 18px; line-height: 1.45; }
.howto-rules li::marker { content: "✗  "; color: #ff9a9a; font-weight: 900; }
.howto-tip { font-size: 0.9rem; color: var(--text-soft); }
.howto-tip code { font-family: var(--chat); font-weight: 700; color: var(--text); background: rgba(255, 255, 255, 0.12); padding: 1px 6px; border-radius: 6px; }
.howto-examples { display: grid; gap: 6px; }
.howto-ex-title { margin: 0; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.howto-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.howto-ex .mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 0.8rem; flex: none; }
.howto-ex.good .mark { background: var(--good-mark); }
.howto-ex.bad .mark { background: var(--bad-mark); }
.howto-slips { display: inline-flex; gap: 2px; filter: drop-shadow(0 2px 1px rgba(40, 10, 0, 0.4)); }
.howto-slips .tile { width: 22px; font-size: 0.8rem; }
.howto-ex .why { font-size: 0.85rem; font-weight: 700; color: var(--text-soft); }
.howto-modes { margin: 4px 0 0; display: grid; gap: 8px; }
.howto-modes dt { font-family: var(--letters); font-size: 1.05rem; color: var(--gold); }
.howto-modes dd { margin: 0; line-height: 1.45; }
.howto-formats { margin: 6px 0 0; padding: 8px 10px 8px 26px; display: grid; gap: 4px; background: rgba(0, 0, 0, 0.18); border-radius: 10px; font-size: 0.92rem; }
.howto-formats strong { color: var(--text); }
.howto-foot { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.howto-foot form { margin: 0; }

/* ---------- Feedback ---------- */
/* Small, bottom-left, out of the way of play (the chat bubble has the
   bottom right on phones). */
.feedback-btn {
  position: fixed; left: 12px; bottom: 12px; z-index: 30;
  width: 42px; height: 42px; padding: 5px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 0 rgba(58, 10, 53, 0.35), 0 4px 12px rgba(58, 10, 53, 0.18);
  opacity: 0.85;
}
.feedback-btn:hover, .feedback-btn:focus-visible { opacity: 1; }
.feedback-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58, 10, 53, 0.35); }
.feedback-btn svg { width: 100%; height: 100%; display: block; }
dialog.feedback-dialog { border: 0; padding: 0; background: none; width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.feedback-dialog::backdrop { background: rgba(26, 6, 22, 0.6); }
dialog.feedback-dialog .panel { margin: 0; display: grid; gap: 12px; }
dialog.feedback-dialog h2 { margin: 0; font-family: var(--letters); font-weight: 400; font-size: 1.6rem; color: var(--gold); text-align: center; }
.fb-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.fb-group legend, .fb-label { padding: 0; margin: 0 0 8px; font-weight: 800; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fb-chip span {
  display: inline-block; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-weight: 700;
  background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.fb-chip input:checked + span { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--gold-deep); }
.fb-chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
#fb-message { width: 100%; resize: vertical; min-height: 110px; font: inherit; }
.fb-count { margin: -6px 0 0; text-align: right; font-size: 0.8rem; color: var(--text-soft); }
.fb-foot { display: flex; justify-content: flex-end; gap: 10px; }
.fb-thanks { text-align: center; justify-items: center; }
.fb-thanks p { margin: 0; }

/* ---------- Badges, titles, player cards ---------- */
.player-title { margin: 0; font-family: var(--letters); font-weight: 400; color: var(--gold); letter-spacing: 0.02em; }
.profile-field { display: grid; gap: 6px; width: min(100%, 340px); text-align: left; font-weight: 700; color: var(--text-soft); }
.player-card { width: min(100%, 340px); }
.player-card.preview { background: rgba(0, 0, 0, 0.22); border-radius: 14px; padding: 14px; }
.card-body { display: grid; justify-items: center; gap: 4px; text-align: center; }
.card-body .face.big { width: 76px; height: 76px; }
.card-name { margin: 6px 0 0; font-weight: 900; font-size: 1.25rem; }
.medals { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.medal-wrap { display: grid; justify-items: center; gap: 4px; width: 78px; }
.medal-name { font-size: 0.78rem; font-weight: 800; color: var(--text-soft); line-height: 1.2; }
.medal {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 1.4rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  background: radial-gradient(circle at 50% 35%, #4a1242, #1a0616); box-shadow: 0 0 0 3px var(--gold), 0 3px 0 3px var(--gold-ink);
}
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.badge-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); }
.badge-text { display: grid; gap: 2px; font-size: 0.9rem; color: var(--text-soft); }
.badge-text strong { color: var(--text); font-size: 1rem; }
.badge-item.locked { opacity: 0.6; }
.badge-item.locked .medal { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); filter: grayscale(1); }
button.show-btn { font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
button.show-btn.on { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--gold-deep); text-shadow: none; }
.seat-title { font-family: var(--letters); font-size: 0.8rem; color: var(--gold-deep); letter-spacing: 0.02em; }
.seat.has-profile { cursor: pointer; }
.seat.has-profile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
dialog.player-dialog { border: 0; padding: 0; background: none; width: min(380px, calc(100vw - 24px)); }
dialog.player-dialog::backdrop { background: rgba(26, 6, 22, 0.6); }
dialog.player-dialog .panel { margin: 0; display: grid; gap: 14px; justify-items: center; }
dialog.player-dialog form { margin: 0; }
.badge-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(420px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); color: var(--text);
  box-shadow: 0 0 0 3px var(--gold), 0 10px 30px rgba(26, 6, 22, 0.45);
  display: grid; gap: 8px; animation: toast-in 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.badge-toast[hidden] { display: none; }
@keyframes toast-in { from { transform: translate(-50%, -30px); opacity: 0; } }
.toast-head { margin: 0; font-family: var(--letters); font-size: 1.4rem; color: var(--gold); text-align: center; }
.toast-line { margin: 0; display: flex; align-items: center; gap: 10px; }
.badge-toast .auth-note { text-align: center; }