/* The card page (GADR-092): the projector's felt and paper, a star sticker per
   marked square. One dark world, as the game's screens. */
@font-face { font-family: "Jersey 10"; src: url("fonts/jersey-10.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --felt: #1d3b31;
  --felt-dark: #12261f;
  --slate: #34454b;
  --slate-hi: #44585f;
  --ink: #0d1517;
  --paper: #f4f1e8;
  --paper-shade: #e4ddcb;
  --muted: #a9b9b6;
  --gold: #f5c542;
  --gold-lip: #b88e22;
  --red: #fe5f55;
  --display: "Jersey 10", "Courier New", monospace;
  --body: "Rubik", "Segoe UI", system-ui, sans-serif;
  --radius-s: 10px;
  --radius-m: 18px;
  --line: 3px;
  --line-m: 4px;
  --shadow: 0 6px 0 rgba(13, 21, 23, .7);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
#app { min-height: 100%; display: flex; flex-direction: column; }
/* The felt: the table's green, a soft weave, a light from above, edge to
   edge (the page's column is narrower on a wide screen). */
body {
  margin: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--felt);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--body);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* The page's column. */
.screen {
  flex: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
  position: relative;
}

.paper {
  background: var(--paper);
  color: var(--ink);
  border: var(--line-m) solid var(--ink);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
}
.wordmark {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
}

/* Fat buttons with a lip, as the game's. */
.fat {
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  padding: 10px 16px 12px;
  box-shadow: 0 6px 0 var(--gold-lip), 0 6px 0 2px var(--ink);
  transition: transform .06s, box-shadow .06s;
}
.fat:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 1px 0 var(--gold-lip), 0 1px 0 2px var(--ink); }
.fat[disabled] { background: var(--slate-hi); color: var(--muted); box-shadow: 0 6px 0 var(--slate), 0 6px 0 2px var(--ink); cursor: default; }

/* --- Join and messages --------------------------------------------------------------- */
.join { justify-content: center; gap: 22px; }
.join .wordmark { text-align: center; font-size: 64px; }
.tagline { text-align: center; color: var(--muted); margin: -14px 0 0; font-size: 15px; }
.join form, .message { padding: 20px; display: grid; gap: 14px; transform: rotate(-1.2deg); }
.join h1 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; margin: 0; }
.join label { font-size: 14px; font-weight: 700; }
.join input {
  width: 100%;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink);
  padding: 12px 14px;
  font-size: 18px;
}
.fine { font-size: 13px; color: #55605f; margin: 0; }
.error { font-size: 14px; font-weight: 700; color: #a3241c; margin: 0; }
.message p { margin: 0; font-size: 17px; line-height: 1.4; }

/* --- The game ------------------------------------------------------------------------ */
.topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prize {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--slate);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
.prize b { color: var(--gold); }

.banner {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  background: var(--slate);
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
  padding: 8px 12px;
}
.banner .led { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--ink); }

/* The round strip: what the projector says, in a phone's words. */
.strip { padding: 10px 12px 12px; display: grid; gap: 8px; }
.strip-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.swatch {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: var(--line) solid var(--ink);
  background: var(--paper-shade);
}
.swatch.spinning { background: conic-gradient(#5c97f9, #fff170, #358d52, #8330e9, #ef9834, #e61c00, #5c97f9); animation: spin 1s linear var(--spin, 0s) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.strip-text { min-width: 0; flex: 1; }
.strip-cat { font-family: var(--display); font-size: 30px; line-height: .95; overflow-wrap: anywhere; }
.strip-cat .pm { font-family: var(--body); font-weight: 700; font-size: .8em; }
.strip-phase { font-size: 14px; color: #3d4847; }
.round-no { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #55605f; align-self: flex-start; white-space: nowrap; }
.bar { height: 10px; border-radius: 99px; background: var(--paper-shade); border: 2px solid var(--ink); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--ink); }

/* The card: the printed card's look, colours only unless the game shows names. */
.card { padding: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 8px; gap: 10px; }
.card-head .no { font-family: var(--display); font-size: 24px; line-height: 1; }
.card-head .who { font-size: 14px; color: #3d4847; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.grid { display: grid; gap: 5px; }
/* The squares sit in a recess of darker paper, as on the projector's card. */
#grid { background: var(--paper-shade); border-radius: 10px; padding: 4px; box-shadow: inset 0 2px 0 rgba(13, 21, 23, .12); }
.cell {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border: 2.5px solid var(--ink);
  border-radius: 7px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  transition: transform .12s, box-shadow .12s;
  touch-action: manipulation;
}
.cell.on-ink { color: var(--ink); }
.cell.on-paper { color: var(--paper); }
.cell:active { transform: scale(.94); }
.cell .name { font-size: 10px; font-weight: 700; line-height: 1.05; padding: 2px; text-align: center; overflow-wrap: anywhere; }
/* A full line: its squares lift off the card, ink still the outermost edge. */
.cell.in-line { transform: translateY(-4px); box-shadow: 0 4px 0 var(--ink); }

/* The star sticker: paper, its own tilt, a darker paper edge, an ink outline. */
.sticker { position: absolute; inset: 14%; pointer-events: none; transform: rotate(var(--r)); filter: drop-shadow(0 2px 0 rgba(13, 21, 23, .85)); }
.sticker svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sticker.fresh { animation: slap .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes slap {
  0% { transform: rotate(var(--r)) translateY(-30%) scale(1.35); opacity: 0; }
  55% { transform: rotate(var(--r)) scale(1.12, .84); opacity: 1; }
  80% { transform: rotate(var(--r)) scale(.96, 1.04); }
}

.bingo-wrap {
  margin-top: auto;
  display: grid;
  gap: 6px;
  padding-top: 10px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--felt) 22%);
}
.bingo { font-size: 52px; padding: 8px 16px 14px; width: 100%; }
.bingo.ready { animation: ready 1.1s ease-in-out var(--loop, 0s) infinite; }
@keyframes ready { 50% { filter: brightness(1.12); } }
.bingo-note { text-align: center; font-size: 13px; color: var(--muted); min-height: 1.3em; margin: 0; }
.has { justify-self: center; font-family: var(--display); font-size: 30px; line-height: 1; padding: 6px 18px 8px; transform: rotate(-2deg); }
.has.fresh { animation: slap-in .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes slap-in { from { transform: rotate(-2deg) scale(1.5); opacity: 0; } }

/* The BINGO check and a won prize, over the card. */
.check {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 21, 23, .62);
  z-index: 5;
}
.check.mine {
  inset: 0 0 auto;
  place-items: start center;
  background: none;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.check.mine .big { font-size: 48px; }
.check .paper { padding: 18px 20px 20px; text-align: center; display: grid; gap: 6px; transform: rotate(-2deg); max-width: 300px; }
.check .big { font-family: var(--display); font-size: 64px; line-height: .9; }
.check .sub { font-size: 16px; }
.check .who { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.tile-row { display: flex; gap: 4px; justify-content: center; }
.tile { width: 34px; height: 40px; border: 3px solid var(--ink); border-radius: 6px; font-family: var(--display); font-size: 30px; line-height: 34px; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }

/* --- The win (GADR-101) ------------------------------------------------------------
   A screen of its own over the game: the winner's card on the winner's phone,
   the winner and their card on everyone else's, the game over at the end. */
.win {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .07), transparent 60%), var(--felt);
}
.win .tile-row .tile { width: 40px; height: 46px; font-size: 38px; line-height: 40px; }
.win .tile-row .tile:nth-child(odd) { transform: rotate(-4deg); }
.win .tile-row .tile:nth-child(even) { transform: rotate(4deg); }
.win-head { width: min(300px, 100%); padding: 14px 18px 16px; text-align: center; display: grid; justify-items: center; gap: 4px; transform: rotate(-2deg); }
.win-head .sub { font-size: 16px; }
.win-head .big { font-family: var(--display); font-size: 56px; line-height: .9; overflow-wrap: anywhere; }
.win-head .who { font-size: 16px; font-weight: 700; margin-top: 4px; }
.win-head .who-sub { font-size: 14px; color: #3d4847; }
.win-card { background: var(--paper); border: var(--line-m) solid var(--ink); border-radius: var(--radius-m); padding: 10px; box-shadow: var(--shadow); }
.win-card.big { width: min(300px, 100%); }
.win-card.mini { width: 170px; padding: 6px; border-width: var(--line); border-radius: 10px; background: var(--paper-shade); box-shadow: none; margin-top: 6px; }
.win-card .grid { gap: 5px; }
.win-card.mini .grid { gap: 3px; }
.win-card .cell { cursor: default; }
.win-card.mini .cell { border-width: 2px; border-radius: 5px; }
.win-card.big .cell.in-line { transform: translateY(-6px); box-shadow: 0 6px 0 var(--ink); }
.win-card.mini .cell.in-line { transform: translateY(-3px); box-shadow: 0 3px 0 var(--ink); }
.win-close { width: 100%; padding: 12px 16px 14px; display: grid; gap: 4px; transform: rotate(1deg); font-size: 15px; }
.win-close .big { font-family: var(--display); font-size: 28px; line-height: 1; }
.win-foot { margin-top: auto; display: grid; justify-items: center; gap: 8px; text-align: center; }
.win-foot p { margin: 0; font-size: 13px; color: #c4d0ce; }
/* Game over: the prizes by round with their winners, then this phone's game. */
.go-title { font-size: 56px; }
.go-list { width: 100%; padding: 6px 6px 4px; transform: rotate(-1deg); }
.go-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-bottom: 2px dashed #c9c1ab; }
.go-row:last-child { border-bottom: none; }
.go-star { position: relative; width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 0 rgba(13, 21, 23, .85)); }
.go-star svg { width: 100%; height: 100%; display: block; overflow: visible; }
.go-text { flex: 1; min-width: 0; }
.go-sub, .go-card { font-size: 13px; color: #3d4847; }
.go-name { font-family: var(--display); font-size: 30px; line-height: 1; overflow-wrap: anywhere; }
.go-stats { width: 100%; padding: 12px 16px 14px; display: grid; gap: 8px; transform: rotate(1deg); }
.go-h { font-family: var(--display); font-size: 26px; line-height: 1; }
.go-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.go-l { font-size: 13px; color: #3d4847; }
.go-v { font-family: var(--display); font-size: 40px; line-height: 1; }
.go-v.small { font-size: 24px; padding-top: 8px; overflow-wrap: anywhere; }
.go-thanks { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--gold); }
/* The player's own card over a win (and back). */
.peek {
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  min-height: 48px;
  padding: 0 20px;
  box-shadow: 0 4px 0 var(--ink);
}
.peek:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.back-to-win {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  align-self: center;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  min-height: 48px;
  padding: 0 22px;
  box-shadow: 0 4px 0 var(--gold-lip), 0 4px 0 2px var(--ink);
}

/* The round's count in the verdict. */

/* Dealing: the card comes in from the dealer's side. */
.dealt { animation: deal .7s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes deal { from { transform: translate(120%, -30%) rotate(18deg); } }

/* --- Answers (GADR-094) ------------------------------------------------------ */
.answer { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choices[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice {
  min-width: 0;
  min-height: 44px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  padding: 8px 6px;
  box-shadow: 0 3px 0 var(--ink);
  overflow-wrap: anywhere;
}
.choice:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.choice[aria-pressed="true"] { background: var(--gold); }
.row-input { display: flex; gap: 8px; }
.row-input input {
  flex: 1;
  min-width: 0;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  font-size: 18px;
}
.row-input .fat { flex: none; font-size: 24px; padding: 8px 14px 10px; }
.sent { font-size: 14px; color: #3d4847; margin: 0; }
.sent b { color: var(--ink); }

/* The verdict after the reveal: a stamp-like word, then the right answer. */

/* Placing an earned sticker (GADR-107): a paper veil over the empty squares it
   can't go on (the stickers already placed stay bright: they show the line
   closing); the right ones lift in a gold ring with a dashed ghost of it. */
.grid.placing .cell:not(.can):not([aria-pressed="true"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 241, 232, .55);
  pointer-events: none;
}
.grid.placing .sticker { z-index: 1; }
.cell.can { z-index: 2; transform: translateY(-3px); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 3px var(--gold); animation: can 1.1s ease-in-out var(--loop, 0s) infinite; }
.cell.can::after { content: ""; position: absolute; inset: 16%; border: 3px dashed rgba(13, 21, 23, .75); border-radius: 50%; background: rgba(244, 241, 232, .35); pointer-events: none; }
@keyframes can { 50% { transform: translateY(-5px); box-shadow: 0 6px 0 var(--ink), inset 0 0 0 5px var(--gold); } }
.cell:disabled { cursor: default; }
/* A sticker placed this round: a tap takes it off again (GADR-096). */
.cell.undo { outline: 2px dashed var(--ink); outline-offset: -5px; }

/* --- The round card while answering (GADR-100) ------------------------------------
   The projector's card: the category's ribbon with the round, the time
   sticker, the question, and the answer form. */
.rc {
  position: relative;
  margin-top: 10px;
  background: var(--paper);
  color: var(--ink);
  border: var(--line-m) solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 8px 0 rgba(13, 21, 23, .7);
}
.rc-ribbon { height: 52px; border-bottom: var(--line-m) solid var(--ink); border-radius: 10px 10px 0 0; display: grid; place-items: center; }
.rc-ribbon span {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  color: var(--paper);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(13, 21, 23, .8);
}
.rc-time {
  position: absolute;
  top: -18px;
  right: -8px;
  width: 62px;
  height: 62px;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  background: #27353a;
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 42px;
  line-height: 1;
  transform: rotate(5deg);
  box-shadow: 0 5px 0 rgba(13, 21, 23, .8);
}
.rc-time:empty { display: none; }
/* Each red second springs the sticker (the projector's T_EMPH elastic from
   1.22); the last one rocks it too. */
.rc-time.pop { animation: rc-pop .5s linear; }
.rc-time.pop.last { animation: rc-pop .5s linear, rc-rock .24s linear; }
@keyframes rc-pop {
  0% { transform: rotate(5deg) scale(1.22); }
  22% { transform: rotate(5deg) scale(.94); }
  42% { transform: rotate(5deg) scale(1.04); }
  62% { transform: rotate(5deg) scale(.99); }
  100% { transform: rotate(5deg) scale(1); }
}
@keyframes rc-rock { 25% { rotate: 7deg; } 50% { rotate: -5deg; } 75% { rotate: 3deg; } }
/* The round card and the result card drop in once per round, as the
   projector's (Juice.drop_in: from small, tilted and faint, a back ease). */
.rc.drop, .rv.drop { animation: drop-in .5s cubic-bezier(.34, 1.56, .64, 1) calc(0ms - var(--since, 0ms)) both; }
@keyframes drop-in { from { transform: scale(.8) rotate(-3deg); opacity: 0; } 80% { opacity: 1; } }
.rv.drop .rv-stamp { animation: stamp .12s cubic-bezier(.2, 0, .4, 1) calc(380ms - var(--since, 0ms)) both; }
@keyframes stamp { from { scale: 1.7; opacity: 0; } }
.rv.drop .rv-place { animation: drop-in .4s cubic-bezier(.34, 1.56, .64, 1) calc(450ms - var(--since, 0ms)) both; }
.rc-bar.pop { animation: rc-jolt .25s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rc-jolt { from { transform: scale(1.03, 1.4); } }
.rc-body { padding: 16px 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rc-q { font-family: var(--display); font-size: 44px; line-height: .95; text-align: center; overflow-wrap: anywhere; }
.rc-rule { margin: 0; font-size: 16px; font-weight: 700; text-align: center; color: #3d4847; }
.rc-note { margin: 0; font-size: 14px; color: #3d4847; text-align: center; }
.rc-form { display: grid; gap: 12px; }
.rc-input {
  width: 100%;
  height: 58px;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  font-size: 24px;
  font-weight: 700;
}
.rc .fat.send { font-size: 34px; height: 58px; width: 100%; padding: 0; }
.rc .choices { gap: 10px; }
.rc .choice {
  min-height: 76px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--ink);
}
.rc .choices[data-cols="3"] .choice { min-height: 64px; font-size: 26px; }
.rc-q .pm { font-family: var(--body); font-weight: 700; font-size: .8em; }
.rc .choice[aria-pressed="true"] { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.rc-bar { height: 22px; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--paper-shade); padding: 2px; overflow: hidden; }
.rc-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #27353a; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
/* The year wheel (GADR-106): a slot machine's reel in a paper cabinet, years snapping onto the pay line; once it stops the year drops
   into the window as a gold sticker. Blank until moved. */
.yw { --row: 54px; --rows: 5; --pad: calc(var(--row) * (var(--rows) - 1) / 2); background: var(--paper-shade); border: var(--line-m) solid var(--ink); border-radius: 18px; padding: 12px; box-shadow: 0 5px 0 var(--ink); display: grid; gap: 10px; }
.yw-drum { position: relative; height: calc(var(--row) * var(--rows) + 6px); margin: 0 10px; border: var(--line) solid var(--ink); border-radius: 10px; background: #fff; }
.yw-list { position: absolute; inset: 0; z-index: 1; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; outline: none; border-radius: 7px; }
.yw-list::-webkit-scrollbar { display: none; }
.yw-drum:has(.yw-list:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.yw-list ol { list-style: none; margin: 0; padding: var(--pad) 0; }
.yw-list li { height: var(--row); display: grid; place-items: center; scroll-snap-align: center; font-family: var(--display); font-size: 42px; line-height: 1; color: var(--ink); box-shadow: inset 0 -2px 0 rgba(13, 21, 23, .12); user-select: none; -webkit-user-select: none; }
.yw.blank .yw-list li { color: rgba(13, 21, 23, .32); }
/* The reel's curve as two flat steps of shade. */
.yw-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 7px; background: linear-gradient(to bottom, rgba(13,21,23,.18) 0 10%, rgba(13,21,23,.08) 10% 22%, transparent 22% 78%, rgba(13,21,23,.08) 78% 90%, rgba(13,21,23,.18) 90%); }
/* The pay line: ink pointers both sides, the sticker in it. */
.yw-window { position: absolute; left: -14px; right: -14px; top: var(--pad); height: var(--row); z-index: 3; pointer-events: none; }
.yw-window::before, .yw-window::after { content: ""; position: absolute; top: 50%; border: 9px solid transparent; transform: translateY(-50%); }
.yw-window::before { left: -8px; border-left: 11px solid var(--ink); }
.yw-window::after { right: -8px; border-right: 11px solid var(--ink); }
.yw-sticker { position: absolute; inset: -2px 8px; display: grid; place-items: center; border: var(--line-m) solid var(--ink); border-radius: 8px; background: var(--gold); box-shadow: inset 0 -5px 0 var(--gold-lip), 0 3px 0 var(--ink); transform: rotate(-1.5deg); font-family: var(--display); font-size: 48px; line-height: 1; color: var(--ink); }
.yw.blank .yw-sticker { font-size: 34px; }
.yw.moving .yw-sticker { visibility: hidden; }
.yw.clunk .yw-sticker { animation: yw-clunk .22s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes yw-clunk { from { transform: rotate(-1.5deg) translateY(-14px); } }
/* The decade a phone picked looks like the wheel's window. */
.choice[aria-pressed="true"] { box-shadow: inset 0 -5px 0 var(--gold-lip), 0 3px 0 var(--ink); }
/* Sent: the answer, with a button to change it. */
.sent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-shade);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  padding: 8px 8px 8px 12px;
}
.sent-text { flex: 1; min-width: 0; }
.sent-row .lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #155c38; }
.sent-row .val { font-family: var(--display); font-size: 30px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent-row button {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 3px 0 var(--ink);
}
.card-back { text-align: center; font-size: 13px; color: var(--muted); margin: auto 0 0; }

/* --- The round's result (GADR-104): the answering card with its verdict ---- */

/* --- The lobby: how to play (GADR-104) --------------------------------------- */
.lobby { padding: 14px 16px 16px; display: grid; gap: 8px; transform: rotate(-.6deg); }
.lb-title { font-family: var(--display); font-size: 34px; line-height: 1; }
.lb-wait { margin: 0; font-size: 14px; color: #3d4847; }
.lb-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.lb-steps li { display: flex; gap: 10px; align-items: flex-start; }
.lb-n { flex: none; width: 30px; height: 30px; border: var(--line) solid var(--ink); border-radius: 8px; display: grid; place-items: center; font-family: var(--display); font-size: 22px; line-height: 1; color: var(--ink); }
.lb-n.blue { background: #5c97f9; }
.lb-n.green { background: #3fc380; }
.lb-n.gold { background: var(--gold); }
.lb-n.purple { background: #b48cf0; }
.lb-h { font-size: 15px; font-weight: 700; }
.lb-s { font-size: 13px; color: #3d4847; }
.lb-sw { display: flex; gap: 5px; margin-top: 5px; }
.lb-sw i { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 5px; }
.lb-pr { font-size: 14px; margin-top: 3px; }
/* Who joined (GADR-109): name tags on the lobby card. */
.lb-players { margin-top: 6px; padding-top: 10px; border-top: 2px dashed rgba(13, 21, 23, .25); }
.lb-players ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lb-p { padding: 3px 10px 4px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-p.me { background: var(--gold); }
.lb-p.away { opacity: .45; }
.lb-p small { font-weight: 400; font-size: 12px; }

/* --- Your turn to spin (stage 1b): a small wheel, the word, the button ------ */
.turn { padding: 14px 16px 16px; display: grid; gap: 14px; transform: rotate(.6deg); }
.tw-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tw-wheel { position: relative; flex: none; width: 92px; height: 92px; }
.tw-wheel svg { display: block; width: 100%; height: 100%; }
.tw-pin {
  position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid var(--ink);
}
.turn.sent .tw-wheel svg { animation: spin .5s linear var(--spin, 0s) infinite; }
.tw-text { min-width: 0; flex: 1; }
.tw-title { font-family: var(--display); font-size: 38px; line-height: .95; }
.tw-sub { margin: 4px 0 0; font-size: 14px; color: #3d4847; }
.tw-acts { display: grid; gap: 10px; }
.fat.spin { width: 100%; font-size: 44px; padding: 8px 16px 12px; }
.tw-motion {
  justify-self: center; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  padding: 6px 14px 7px; font-size: 15px; font-weight: 700;
}

/* --- The round's result as the projector's reveal card (GADR-105) ---------- */
.rv {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: var(--line-m) solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 8px 0 rgba(13, 21, 23, .7);
  margin-top: 6px;
}
.rv-ribbon {
  min-height: 48px;
  border-bottom: var(--line-m) solid var(--ink);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  text-align: center;
}
.rv-ribbon > span {
  font-family: var(--display);
  font-size: 28px;
  line-height: .95;
  color: var(--paper);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(13, 21, 23, .8);
  overflow-wrap: anywhere;
}
.rv-ribbon .pm { font-family: var(--body); font-weight: 700; font-size: .8em; }
.rv-ribbon .sym { position: static; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; color: var(--ink); opacity: 1; }
/* The verdict as a sticker beside the year's (GADR-105). */
.rv-stamp {
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  padding: 4px 12px 6px;
  font-family: var(--display);
  font-size: 32px;
  line-height: .9;
  transform: rotate(-4deg);
  box-shadow: 0 4px 0 rgba(13, 21, 23, .55);
  white-space: nowrap;
}
.rv-stamp.right { background: #3fc380; }
.rv-stamp.wrong { background: var(--red); }
.rv-stamp.wait, .rv-stamp.late { background: var(--gold); }

.rv-title { font-family: var(--display); font-size: 38px; line-height: .92; overflow-wrap: anywhere; }
.rv-artist { font-size: 17px; font-weight: 700; color: #3d4847; margin-top: 2px; overflow-wrap: anywhere; }

.rv-year {
  border: var(--line) solid var(--ink);
  border-radius: 8px;
  background: var(--gold);
  font-family: var(--display);
  font-size: 36px;
  line-height: 1;
  padding: 2px 10px 4px;
  transform: rotate(2deg);
  box-shadow: 0 4px 0 rgba(13, 21, 23, .55);
}
.rv-foot { padding: 4px 12px 10px; display: grid; gap: 2px; text-align: center; border-top: 2px dashed #c9c1ab; margin: 4px 10px 0; }
.rv-sub { font-size: 14px; font-weight: 700; }
/* --- The round's result: A+C (song row, the answer slip with the verdict stamped on it) --- */
.rv .rv-ribbon { min-height: 38px; padding: 4px 12px; }
.rv .rv-ribbon > span { font-size: 24px; -webkit-text-stroke: 3.5px var(--ink); }
.rv-song { display: flex; align-items: center; gap: 10px; padding: 8px 12px 6px; }
.rv-song-text { flex: 1; min-width: 0; }
.rv .rv-title { font-family: var(--display); font-size: 30px; line-height: .92; overflow-wrap: anywhere; }
.rv .rv-artist { font-size: 15px; font-weight: 700; color: #3d4847; margin-top: 2px; overflow-wrap: anywhere; }
.rv .rv-artist b { color: var(--ink); }
.rv .rv-year { flex: none; font-size: 26px; padding: 1px 8px 3px; transform: rotate(2deg); }
.rv-slip { position: relative; margin: 4px 12px 2px; padding: 5px 12px 7px; background: #fff; border: var(--line) solid var(--ink); border-left-width: 8px; border-radius: 10px; }
.rv-slip.right { border-left-color: #3fc380; }
.rv-slip.wrong { border-left-color: var(--red); }
.rv-slip.wait { border-left-color: #8fa3a0; }
.rv-slip.late { border-left-color: #9fd8b8; }
.rv-slip-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #55605f; }
.rv-given { font-family: var(--display); font-size: 24px; line-height: .95; padding-right: 104px; overflow-wrap: anywhere; }
.rv-given.none { color: #8fa3a0; }
.rv .rv-stamp { position: absolute; right: -10px; top: 50%; transform: translateY(-50%) rotate(6deg); font-size: 24px; padding: 3px 10px 5px; }
.rv .rv-stamp.wait { background: #fff; border-style: dashed; }
.rv .rv-stamp.late { background: #9fd8b8; }
.rv .rv-foot { display: grid; gap: 1px; padding: 4px 12px 8px; margin: 0; border-top: 0; text-align: center; font-size: 13px; }
.rv .rv-sub { font-size: 13px; }
.rv-count { font-weight: 700; }

/* Where the sticker goes: the result card's gold foot (GADR-104). */
.rv-place { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px 12px; background: var(--gold); border-top: var(--line-m) solid var(--ink); border-radius: 0 0 10px 10px; }
.rv-place-text { min-width: 0; display: grid; gap: 1px; }
.rv-place-h { font-family: var(--display); font-size: 28px; line-height: .9; }
.rv-place-s { font-size: 14px; font-weight: 700; line-height: 1.2; }
.rv-place-w { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.2; color: #5b4510; }
.rv-place-w::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: wait-dot 1.1s ease-in-out var(--loop, 0s) infinite; }
@keyframes wait-dot { 50% { opacity: .25; } }
.rv-place.quiet { background: var(--paper-shade); padding: 8px 14px 10px; justify-content: center; }
.rv-place.quiet .rv-place-s { font-size: 13px; color: #3d4847; text-align: center; }
/* The sticker to place: a square in the colour (a rainbow for any square) with the star on it. */
.st-chip { position: relative; flex: none; display: block; width: 40px; height: 40px; border: var(--line) solid var(--ink); border-radius: 8px; animation: chip-bob 1.1s ease-in-out var(--loop, 0s) infinite; }
.st-chip.any { background: conic-gradient(#5c97f9, #fff170, #358d52, #8330e9, #ef9834, #e61c00, #5c97f9); }
.st-chip .sym { color: var(--ink); opacity: .85; }
.st-chip .sticker { inset: 22% 2% 2% 22%; }
@keyframes chip-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }

/* Category symbols (GADR-104): a shape in the square's corner, in its ink. */
.sym { position: absolute; top: 6%; left: 6%; width: 28%; height: 28%; pointer-events: none; opacity: .85; }
.sym svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.cell.on-ink .sym { color: var(--ink); }
.cell.on-paper .sym { color: var(--paper); }
.rc-ribbon { position: relative; }
.rc-ribbon .sym { position: static; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; color: var(--ink); opacity: 1; }
.rc-ribbon { display: flex; align-items: center; justify-content: center; }
.dot .sym, .lb-sw i .sym { position: static; display: block; width: 100%; height: 100%; padding: 2px; color: var(--ink); opacity: 1; }
.lb-sw i { position: relative; }
.card-head { align-items: center; }
.card-head .who { margin-left: auto; }
.card-head .sym-toggle {
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  min-height: 28px;
}
.card-head .sym-toggle[aria-pressed="true"] { background: var(--gold); }

/* Low screens: everything but the card gets tighter. */
@media (max-height: 700px) {
  .yw { --rows: 3; --row: 50px; padding: 10px; }
    .screen { gap: 8px; }
  .topline .wordmark { font-size: 24px; }
  .strip { padding: 6px 10px 8px; gap: 6px; }
  .swatch { width: 32px; height: 32px; }
  .strip-cat { font-size: 24px; }
  .answer { padding: 8px 10px; gap: 6px; }
  .card { padding: 6px; }
  .card-head { padding-bottom: 4px; }
  .bingo { font-size: 40px; padding: 4px 12px 8px; }
  .bingo-note { display: none; }
  .rc-q { font-size: 36px; }
  .rc-body { padding: 12px 12px 14px; gap: 10px; }
  .rc .choice { min-height: 64px; font-size: 28px; }
  .rv-title { font-size: 30px; }
  .rv-year { font-size: 28px; }
  .rv-stamp { font-size: 26px; }
  .rv-place { padding: 7px 12px 9px; margin-top: 6px; }
  .rv-place-h { font-size: 24px; }
  .st-chip { width: 34px; height: 34px; }

}

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

/* Pieces (owner's pick, direction A "Pionki"): board-game pieces.
   Every button and sticker is a thick flat piece: a hard light band on top, a hard
   shade on the bottom face, a tall lip with the ink wrapped round it. A press sinks
   the piece into the table (one move: down, lip gone, the light band flips to shade). */
:root {
  --gold-shade: #d9a92c;
    --white-lip: #cfc6ae;
  --hi: inset 0 3px 0 rgba(255, 255, 255, .55);
  --sunk: inset 0 4px 0 rgba(13, 21, 23, .16);
}
.fat {
  border-width: var(--line-m);
  border-radius: 14px;
  box-shadow: var(--hi), inset 0 -5px 0 var(--gold-shade), 0 10px 0 -4px var(--gold-lip), 0 10px 0 var(--ink);
  transition: transform .05s, box-shadow .05s;
}
.fat:active:not([disabled]) { transform: translateY(8px); box-shadow: var(--sunk), 0 2px 0 -4px var(--gold-lip), 0 2px 0 var(--ink); }
.fat[disabled] { box-shadow: inset 0 -5px 0 var(--slate), 0 10px 0 -4px var(--slate), 0 10px 0 var(--ink); }

.choice, .rc .choice, .sent-row button, .peek {
  border-width: var(--line);
  background: #fff;
  box-shadow: var(--hi), inset 0 -4px 0 var(--paper-shade), 0 8px 0 -3px var(--white-lip), 0 8px 0 var(--ink);
  transition: transform .05s, box-shadow .05s;
}
.rc .choice { border-radius: 14px; }
/* Zmień sits in the sent row: a low piece, its lip as wide as itself, centred. */
.sent-row button { box-shadow: var(--hi), inset 0 -3px 0 var(--paper-shade), 0 4px 0 var(--ink); margin-bottom: 4px; }
.sent-row button:active { transform: translateY(3px); box-shadow: var(--sunk), 0 1px 0 var(--ink); }
.choice:active, .peek:active { transform: translateY(6px); box-shadow: var(--sunk), 0 2px 0 -3px var(--white-lip), 0 2px 0 var(--ink); }
/* The picked decade: a gold piece pushed down and held there. */
.choice[aria-pressed="true"], .rc .choice[aria-pressed="true"] {
  background: var(--gold);
  transform: translateY(6px);
  box-shadow: var(--sunk), 0 2px 0 -3px var(--gold-lip), 0 2px 0 var(--ink);
}
.card-head .sym-toggle { box-shadow: var(--hi), 0 3px 0 -2px var(--white-lip), 0 3px 0 var(--ink); }
.card-head .sym-toggle[aria-pressed="true"] { transform: translateY(2px); box-shadow: var(--sunk), 0 1px 0 -2px var(--gold-lip), 0 1px 0 var(--ink); }
.back-to-win { box-shadow: var(--hi), 0 7px 0 -3px var(--gold-lip), 0 7px 0 var(--ink); }

/* Stickers become pieces too: the same light band and a thick lip of their own colour. */
/* The verdict stays a sticker slapped on the slip (owner), not a piece. */
.rv-year, .rc-time, .has, .st-chip { border-width: var(--line); }
.rv-year { box-shadow: var(--hi), 0 7px 0 -3px var(--gold-lip), 0 7px 0 var(--ink); }
.rc-time { border-radius: 14px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .14), 0 8px 0 -3px #10181b, 0 8px 0 var(--ink); }
.has { box-shadow: var(--hi), 0 8px 0 -3px var(--white-lip), 0 8px 0 var(--ink); }
.st-chip { box-shadow: var(--hi), 0 6px 0 -3px rgba(13, 21, 23, .4), 0 6px 0 var(--ink); }
.lb-n { box-shadow: var(--hi), 0 4px 0 var(--ink); }
.choices { row-gap: 14px; }
/* The gold foot: the same light band as the buttons. */
.rv-place { box-shadow: var(--hi), inset 0 -5px 0 var(--gold-shade); }

/* --- Historia (GADR-109): the rounds this phone played ----------------------- */
.hist { padding: 0; overflow: hidden; }
.hist-head { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-family: var(--display); font-size: 22px; cursor: pointer; }
.hist-head small { font-family: inherit; font-size: 16px; opacity: .6; }
.hist-head:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.hist-list { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 8px; }
.h-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.h-row.wrong, .h-row.late { background: #f1eee6; }
.h-dot { flex: none; position: relative; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--ink); border-radius: 6px; }
.h-dot .sym { position: static; display: block; width: 100%; height: 100%; padding: 2px; color: var(--ink); opacity: 1; }
.h-text { flex: 1; min-width: 0; }
.h-top { font-size: 12px; color: #3d4847; }
.h-title { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.h-song { font-size: 13px; color: #3d4847; overflow-wrap: anywhere; }
.h-ans { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.h-stamp { flex: none; align-self: center; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 6px; font-size: 12px; font-weight: 700; transform: rotate(-4deg); background: #f1eee6; }
.h-stamp.right { background: #3fc380; }
.h-stamp.wrong { background: #ff6b5a; }
.h-stamp.late, .h-stamp.wait { background: var(--gold); }

/* --- The countdown stamp (GADR-111): the corner sticker as the projector's -- */
.rc-time.stamp {
  width: 76px; height: 76px; top: -24px; right: -12px;
  border: 5px solid var(--ink); border-radius: 50%; background: var(--red);
  color: var(--paper); font-size: 44px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  outline: 3px solid var(--paper); outline-offset: -11px;
  box-shadow: 0 6px 0 var(--ink); transform: none; rotate: 6deg;
}
.rc-time.stamp.odd { rotate: -8deg; }
/* From big and faint down onto the card (the projector's T_FAST quart-in
   slam), then a little squash and settle so it lands instead of stopping. */
.rc-time.stamp.slam { animation: rc-slam .42s linear calc(0ms - var(--since, 0ms)) both; }
@keyframes rc-slam {
  0% { scale: 1.8; opacity: .3; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  30% { scale: .9; opacity: 1; animation-timing-function: ease-out; }
  55% { scale: 1.05; animation-timing-function: ease-in-out; }
  78% { scale: .98; }
  100% { scale: 1; opacity: 1; }
}
/* The card jolts under it (Juice.shake: 4 steps of half T_FAST), the last second harder. */
.rc.shake { animation: rc-shake .24s ease-in-out; }
.rc.shake.hard { animation-name: rc-shake-hard; }
@keyframes rc-shake { 25% { rotate: .9deg; } 50% { rotate: -.6deg; } 75% { rotate: .3deg; } }
@keyframes rc-shake-hard { 25% { rotate: 1.8deg; } 50% { rotate: -1.2deg; } 75% { rotate: .6deg; } }
@media (prefers-reduced-motion: reduce) { .rc.shake, .rc-time.stamp.slam { animation: none; } }