@font-face { font-family: "Fredoka"; font-weight: 400; font-display: swap; src: url("fonts/fredoka-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("fonts/fredoka-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Luckiest Guy"; font-weight: 400; font-display: swap; src: url("fonts/luckiest-guy-latin-400-normal.woff2") format("woff2"); }

/* Good Day / Bad Day — poker-night table: green felt, wood rail, real
   playing cards, and checker-style tokens. */
:root {
  --felt: #1f7048;
  --felt-lt: #2a8a59;
  --felt-dk: #0e3b26;
  --wood: #6b3d1b;
  --wood-lt: #9a6433;
  --wood-dk: #3d2210;
  --cream: #fbf4e2;
  --cream-dk: #efe2c2;
  --paper-line: #d9c9a3;
  --ink: #2a1d12;
  --muted: #7a6650;
  --gold: #f2c14e;
  --gold-dk: #b98a17;
  --red: #d2402f;
  --red-dk: #8e2419;
  --good: #f0a500;
  --bad: #3f63b8;
  --hit: #2e9e5b;
  --display: "Luckiest Guy", "Fredoka", system-ui, sans-serif;
  --ui: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 5px 0 rgb(0 0 0 / .22), 0 12px 24px rgb(0 0 0 / .28);
  --radius: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 500 16px/1.4 var(--ui);
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 35%, rgb(255 255 255 / .09), transparent 60%),
    repeating-linear-gradient(45deg, rgb(0 0 0 / .025) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, var(--felt-lt) 0%, var(--felt) 55%, var(--felt-dk) 100%) fixed;
  background-color: var(--felt);
  -webkit-tap-highlight-color: transparent;
}
/* The wooden rail around the table. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30;
  border: 10px solid var(--wood);
  border-image: linear-gradient(135deg, var(--wood-lt), var(--wood) 40%, var(--wood-dk)) 1;
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .35), inset 0 0 40px rgb(0 0 0 / .45);
}
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: 1.1; margin: 0 0 .5em; }
h2 { font-size: 1.15rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
em { font-style: normal; font-size: .72rem; color: var(--muted); border: 1.5px solid var(--paper-line); border-radius: 99px; padding: 0 .5em; margin-left: .35em; }

/* ---------- buttons & fields ---------- */
.btn {
  font: 600 1rem var(--ui); cursor: pointer; color: var(--ink);
  background: var(--cream); border: 2.5px solid var(--wood-dk); border-radius: 14px;
  padding: .65em 1.3em; box-shadow: 0 4px 0 var(--wood-dk);
  transition: transform .06s, box-shadow .06s, filter .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dk); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: linear-gradient(var(--red), #b8321f); color: #fff; border-color: var(--red-dk); box-shadow: 0 4px 0 var(--red-dk); text-shadow: 0 1px 0 rgb(0 0 0 / .3); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--red-dk); }
.btn.ghost { background: rgb(251 244 226 / .12); color: var(--cream); border-color: rgb(251 244 226 / .4); box-shadow: none; }
.btn.small { padding: .45em .9em; font-size: .9rem; }
.btn.tiny { padding: .3em .75em; font-size: .8rem; border-width: 1.5px; }
.btn.big { font: 400 1.35rem var(--display); letter-spacing: .04em; padding: .7em 1.8em; }
.btn.wide { width: 100%; }
.field { display: grid; gap: .3em; font-size: .85rem; color: var(--muted); font-weight: 600; }
input, select {
  font: 500 1rem var(--ui); color: var(--ink); background: #fffaf0;
  border: 2px solid var(--paper-line); border-radius: 10px; padding: .6em .8em; width: 100%;
}
input:focus-visible, select:focus-visible, .btn:focus-visible, .card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Cream "score sheet" panels with a chunky board-game edge. */
.panel, .controls, .fill-grid, .scores, .results, .wheel-zone, .spotlight, .direction, .bonus-badge {
  background: var(--cream); border: 2.5px solid var(--wood-dk); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel { padding: 1.1rem; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0;
  background: var(--ink); color: var(--cream); padding: .6em 1.1em; border-radius: 12px; font-weight: 600;
  border: 2px solid var(--gold); transition: .25s; pointer-events: none; z-index: 80; max-width: calc(100% - 40px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.offline { background: var(--red); color: #fff; text-align: center; padding: .4em; font-size: .9rem; position: relative; z-index: 31; }

/* ---------- home ---------- */
.home, .lobby, .over, .pick-first { max-width: 500px; margin: 0 auto; padding: 28px 20px 48px; display: grid; gap: 18px; }
.hero { text-align: center; padding-top: 12px; }
.hero h1, .title {
  font-size: clamp(2.3rem, 9vw, 3.1rem); color: var(--gold);
  text-shadow: 0 3px 0 var(--wood-dk), 0 6px 0 rgb(0 0 0 / .25), -2px -2px 0 var(--wood-dk), 2px -2px 0 var(--wood-dk), -2px 2px 0 var(--wood-dk), 2px 2px 0 var(--wood-dk);
}
.title { text-align: center; }
.hero .slash { color: var(--cream); }
.hero .tag { color: var(--cream); margin: 0; font-size: 1.05rem; text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.hero-logo { display: block; margin: 0 auto .6em; width: 150px; height: 150px; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .45)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.home .panel { display: grid; gap: 12px; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.code-input { text-transform: uppercase; letter-spacing: .3em; font-family: var(--display); font-size: 1.3rem; text-align: center; }
.or { display: flex; align-items: center; gap: .6em; color: var(--muted); font-size: .8rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1.5px; background: var(--paper-line); }
.how { background: rgb(0 0 0 / .22); color: var(--cream); border-radius: var(--radius); padding: 1rem 1.2rem; border: 1.5px solid rgb(251 244 226 / .2); }
.how h2 { color: var(--gold); }
.how ol { padding-left: 1.2em; margin: 0 0 .6em; }
.how li { margin-bottom: .35em; }
.how .muted { color: rgb(251 244 226 / .7); }

/* ---------- lobby ---------- */
.lobby-head { text-align: center; color: var(--cream); }
.lobby-head p { margin: 0; color: rgb(251 244 226 / .75); }
.lobby-logo { display: block; margin: 0 auto .4em; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .4)); }
.big-code { font-family: var(--display); font-size: 3.6rem; letter-spacing: .18em; margin: .05em 0 .2em .18em; color: var(--gold); text-shadow: 0 4px 0 var(--wood-dk); }
.count { color: var(--muted); font-family: var(--ui); font-weight: 500; font-size: .85rem; }
.players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; }
.players li { display: flex; align-items: center; gap: .5em; min-width: 0; font-weight: 600; }
.players li span:not(.disc) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players li.away { opacity: .4; }
.settings { display: grid; gap: 10px; margin-bottom: 14px; }
.lobby > .btn.ghost { justify-self: center; }

/* ---------- tokens: checkers ---------- */
.disc {
  --c: var(--red);
  --dk: color-mix(in srgb, var(--c) 58%, #000);
  --lt: color-mix(in srgb, var(--c) 65%, #fff);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 2.6em; height: 2.6em; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgb(255 255 255 / .45), transparent 42%),
    radial-gradient(circle, var(--c) 0 38%, var(--dk) 39% 43%, var(--c) 44% 58%, var(--dk) 59% 63%, var(--c) 64%);
  border: 2px dashed var(--lt); /* the fluted rim */
  box-shadow: 0 3px 0 var(--dk), 0 5px 0 color-mix(in srgb, var(--dk) 70%, #000), 0 7px 9px rgb(0 0 0 / .45);
  font-family: var(--display); font-weight: 400; color: #fff;
  user-select: none; -webkit-user-select: none;
}
.disc b { font-weight: 400; font-size: 1.15em; line-height: 1; text-shadow: 0 2px 0 var(--dk), -1px -1px 0 var(--dk), 1px -1px 0 var(--dk), -1px 1px 0 var(--dk), 1px 1px 0 var(--dk); translate: 0 .06em; }
.disc.hidden b { color: var(--lt); font-family: var(--ui); font-size: 1.1em; }
.disc.small { width: 1.75em; height: 1.75em; font-size: .9rem; border-width: 1.5px; box-shadow: 0 2px 0 var(--dk), 0 3px 4px rgb(0 0 0 / .4); }
.swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%; background: var(--c); margin-right: .45em; flex: none; box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 58%, #000); }

/* ---------- game layout ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 16px 22px 10px;
  background: linear-gradient(var(--wood), var(--wood-dk));
  border-bottom: 3px solid rgb(0 0 0 / .35);
  box-shadow: 0 4px 12px rgb(0 0 0 / .35);
}
.bar-left { display: flex; gap: 6px; }
.bar-right { display: flex; gap: 6px; justify-content: flex-end; }
.pill { font: 400 .9rem var(--display); letter-spacing: .04em; background: var(--gold); color: var(--wood-dk); border-radius: 99px; padding: .25em .8em; white-space: nowrap; box-shadow: 0 2px 0 var(--gold-dk); }
.pill.ghost { background: transparent; color: var(--cream); box-shadow: none; border: 1.5px solid rgb(251 244 226 / .4); letter-spacing: .15em; }
.timer { font: 400 1.4rem var(--display); color: var(--cream); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.timer.urgent { color: #ff8a73; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.game { max-width: 1200px; margin: 0 auto; padding: 18px 22px 40px; display: grid; grid-template-columns: 1fr 250px; gap: 20px; align-items: start; }
.stage { display: grid; gap: 16px; min-width: 0; }
.side { position: sticky; top: 76px; }
/* Dragging on the table should never start a text selection. */
.game, .bar, .pick-first { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@media (max-width: 860px) {
  .game { grid-template-columns: 1fr; padding: 14px 16px 40px; }
  .side { position: static; }
}

.spotlight { display: flex; align-items: center; gap: .7em; padding: .6em 1em; border-left: 10px solid var(--c); }
.spotlight b { font: 400 1.2rem var(--display); letter-spacing: .03em; }
.spotlight .mic { font-size: 1.6rem; }
.spotlight .warn { color: var(--red); font-size: .85rem; margin-left: .3em; }

.bonus-badge { padding: .5em 1em; border-left: 10px solid var(--b); font-size: .95rem; }
.bonus-badge b { font: 400 1.05rem var(--display); letter-spacing: .03em; }
.bb-label { font-weight: 600; }

/* ---------- coin & direction ---------- */
.coin-zone { display: grid; justify-items: center; gap: 16px; padding: 16px 0; }
.coin { width: 120px; height: 120px; position: relative; transform-style: preserve-3d; }
.coin .face {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: 3.4rem;
  backface-visibility: hidden; border: 5px solid rgb(0 0 0 / .25);
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / .35), 0 8px 18px rgb(0 0 0 / .4);
}
.coin .good { background: radial-gradient(circle at 35% 30%, #fff0a0, var(--gold) 55%, var(--gold-dk)); }
.coin .bad { background: radial-gradient(circle at 35% 30%, #b8c9f0, #5a7bd0 55%, #2c4488); transform: rotateY(180deg); }
.coin.idle { animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotateY(-25deg); } 50% { transform: rotateY(25deg); } }
.coin.flipping { --end: 1800deg; animation: coinflip 2.2s cubic-bezier(.2, .6, .25, 1) both; }
.coin.flipping.bad { --end: 1980deg; }
@keyframes coinflip {
  0% { transform: translateY(0) rotateY(0); }
  40% { transform: translateY(-70px) rotateY(calc(var(--end) * .6)); }
  100% { transform: translateY(0) rotateY(var(--end)); }
}
.coin-zone .muted { color: var(--cream); }

.direction { display: flex; align-items: center; gap: .8em; padding: .7em 1.1em; }
.direction.good { background: linear-gradient(90deg, #fff1c4, var(--cream)); border-left: 10px solid var(--good); }
.direction.bad { background: linear-gradient(90deg, #dbe4fb, var(--cream)); border-left: 10px solid var(--bad); }
.direction b { font: 400 1.25rem var(--display); letter-spacing: .03em; }
.direction.pending { display: grid; justify-items: center; text-align: center; }
.direction p { margin: 0 0 .5em; }
.dir-icon { font-size: 2.1rem; }
.scale { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dir-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.announce {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none;
  background: rgb(10 20 12 / .55); animation: announce 2.6s ease both;
}
.announce-inner { background: var(--cream); border-radius: 22px; padding: 28px 40px; text-align: center; box-shadow: var(--shadow); border: 4px solid var(--good); }
.announce.bad .announce-inner { border-color: var(--bad); }
.announce-icon { font-size: 5rem; animation: pop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.announce-title { font: 400 1.8rem var(--display); letter-spacing: .03em; }
@keyframes announce { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop { 0% { transform: scale(.5); } 100% { transform: none; } }

/* ---------- playing cards ---------- */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; perspective: 1400px; padding: 4px 2px 8px; }
.card { font: inherit; color: var(--ink); text-align: center; padding: 0; margin: 0; border: 0; background: none; cursor: default; position: relative; display: block; }
.card-inner { position: relative; display: block; height: 100%; transform-style: preserve-3d; }
.card-face { display: flex; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-front {
  position: relative; flex-direction: column; align-items: stretch; aspect-ratio: 5 / 7; height: 100%;
  padding: 26px 12px 12px;
  background: radial-gradient(ellipse at 50% 30%, #fffdf6, var(--cream) 70%, var(--cream-dk));
  border: 1px solid #cdbb90;
  box-shadow: 0 2px 0 #d8c69c, 0 4px 0 #c9b688, 0 10px 18px rgb(0 0 0 / .4);
}
.card-front::before { content: ""; position: absolute; inset: 7px; border-radius: 8px; border: 2px solid var(--good); opacity: .55; pointer-events: none; }
.card.bad .card-front::before { border-color: var(--bad); }
.pip { position: absolute; font-size: 1rem; line-height: 1; }
.pip.tl { top: 10px; left: 11px; }
.pip.br { bottom: 10px; right: 11px; transform: rotate(180deg); }
.card-text { flex: 1; display: grid; place-items: center; font-weight: 600; font-size: .98rem; line-height: 1.3; padding: 0 2px; }
.slot { display: flex; align-items: center; justify-content: center; gap: .45em; min-height: 3.6em; flex-wrap: wrap; }
.empty-slot {
  display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%;
  border: 2.5px dashed #c7b58a; color: #b5a276; font-size: .62rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .06em;
}
.card-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  border: 7px solid #fffaf0; outline: 1px solid #cdbb90;
  background:
    url("logo.svg") center / 46% no-repeat,
    repeating-linear-gradient(45deg, rgb(255 255 255 / .12) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .12) 0 3px, transparent 3px 11px),
    linear-gradient(#b3342a, #8a2219);
  box-shadow: 0 4px 0 #c9b688, 0 10px 18px rgb(0 0 0 / .4);
}
.card.selectable { cursor: pointer; }
.card.selectable:hover .card-front { translate: 0 -3px; }
.card.drop-target .card-front { translate: 0 -6px; box-shadow: 0 0 0 4px var(--gold), 0 14px 26px rgb(0 0 0 / .45); }
.card.drop-target .empty-slot { border-color: var(--gold-dk); background: rgb(242 193 78 / .25); color: var(--gold-dk); }
.yours { display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; color: var(--muted); font-weight: 600; }
.yours.match { color: var(--hit); font-weight: 700; }
@media (max-width: 760px) {
  .board { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .card { grid-column: span 2; }
  .card:nth-child(4) { grid-column: 2 / span 2; }
  .card-front { padding: 22px 7px 8px; }
  .card-text { font-size: .74rem; }
  .pip { font-size: .8rem; }
  .slot { min-height: 3em; }
  .empty-slot { width: 2.9em; height: 2.9em; font-size: .52rem; }
  .card .disc { font-size: .85rem; }
}

/* ---------- controls ---------- */
.controls { display: grid; gap: 12px; justify-items: center; padding: 14px; }
.hint { margin: 0; text-align: center; color: var(--muted); font-weight: 500; }
.hint b { color: var(--ink); }
.hint.drumroll { font: 400 1.6rem var(--display); color: var(--ink); animation: pulse .5s infinite; }
.tray { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 4px 0 6px; }
.tray-token {
  --c: var(--red);
  --dk: color-mix(in srgb, var(--c) 58%, #000);
  --lt: color-mix(in srgb, var(--c) 65%, #fff);
  font: 400 1.5rem var(--display); color: #fff; cursor: grab;
  width: 62px; height: 62px; border-radius: 50%; padding: 0;
  background:
    radial-gradient(circle at 35% 28%, rgb(255 255 255 / .45), transparent 42%),
    radial-gradient(circle, var(--c) 0 38%, var(--dk) 39% 43%, var(--c) 44% 58%, var(--dk) 59% 63%, var(--c) 64%);
  border: 2.5px dashed var(--lt);
  box-shadow: 0 4px 0 var(--dk), 0 7px 0 color-mix(in srgb, var(--dk) 70%, #000), 0 10px 12px rgb(0 0 0 / .4);
  text-shadow: 0 2px 0 var(--dk), -1px -1px 0 var(--dk), 1px -1px 0 var(--dk), -1px 1px 0 var(--dk), 1px 1px 0 var(--dk);
  transition: transform .12s, opacity .12s;
}
.tray-token.placed { opacity: .25; transform: scale(.85); box-shadow: none; }
.tray-token.selected { transform: translateY(-10px) scale(1.12); opacity: 1; outline: 3px solid var(--gold); outline-offset: 3px; }
.lock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.locked-badge { font: 400 1.1rem var(--display); letter-spacing: .03em; color: var(--hit); }
.lock-row .idle { font-size: .9rem; color: var(--red); font-weight: 700; }
@media (max-width: 760px) {
  /* Keep the tray in reach while the cards scroll. */
  .controls.sorting { position: sticky; bottom: 10px; z-index: 15; padding: 10px; gap: 8px; }
  .controls.sorting .hint { font-size: .8rem; }
  .tray { gap: 10px; }
  .tray-token { width: 52px; height: 52px; font-size: 1.3rem; }
}

/* ---------- wheel ---------- */
.wheel-zone { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 20px; }
.wheel-wrap { position: relative; width: min(290px, 74vw); filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); }
.pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); transform-origin: 50% 20%; z-index: 2; font-size: 2rem; color: var(--red); text-shadow: 0 2px 0 var(--red-dk), 0 4px 4px rgb(0 0 0 / .35); }
.wheel { width: 100%; display: block; }
.wheel path { stroke: #fffaf0; stroke-width: 1.5; }
.wheel .rim { fill: var(--wood); stroke: var(--wood-dk); stroke-width: 2; }
.wheel .peg { fill: var(--gold); stroke: var(--gold-dk); stroke-width: 1; }
.w-label { fill: #fff; font-family: var(--display); letter-spacing: .03em; text-anchor: middle; paint-order: stroke; stroke: rgb(0 0 0 / .35); stroke-width: 2px; }
.hub { fill: var(--gold); stroke: var(--wood-dk); stroke-width: 2.5; }
.wheel-action { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 300px; }
.wheel-title { font-size: 1.5rem; margin: 0; }
.wheel-result { display: grid; gap: 2px; }
.wheel-result b { font: 400 1.9rem var(--display); letter-spacing: .03em; color: var(--red); }
.wheel-result span { color: var(--muted); font-weight: 600; }
.pick-first .title { margin-bottom: 0; }

/* ---------- live fill grid, results, scores ---------- */
.fill-grid, .results, .scores { padding: 14px; }
.fill-grid h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.table-wrap { overflow: auto; max-height: 60vh; }
.fill-grid .table-wrap { max-height: 45vh; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 6px 8px; text-align: center; border-bottom: 1.5px solid var(--paper-line); }
thead th { position: sticky; top: 0; background: var(--cream); font-size: .72rem; font-weight: 600; color: var(--muted); max-width: 110px; z-index: 1; }
tbody th { text-align: left; white-space: nowrap; font-weight: 700; }
.fill-grid tbody th { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.fill-grid td { width: 15%; padding: 4px 6px; }
.fill-grid .hole { display: inline-block; width: 1.75em; height: 1.75em; border-radius: 50%; border: 2px dashed var(--paper-line); vertical-align: middle; }
.fill-grid .status { width: 3em; font-size: .85rem; font-weight: 700; color: var(--muted); }
.fill-grid tr.is-locked .status { color: var(--hit); }
.fill-grid tr.away, .scores li.away { opacity: .45; }
td.hit { background: rgb(46 158 91 / .22); }
tr.spot-row { background: var(--cream-dk); }
tr.spot-row th::after { content: " — answer key"; color: var(--muted); font-weight: 500; font-size: .75rem; }
tr.you-row { outline: 2.5px solid var(--gold-dk); outline-offset: -2px; }
td.score { white-space: nowrap; font-weight: 700; }
.gain { color: var(--hit); margin-left: .3em; }
.gain small { font-weight: 500; color: var(--muted); }

.scores ol, .final { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scores li, .final li { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; }
.scores li b, .final li b { font: 400 1.2rem var(--display); }
.scores li.you .nm { font-weight: 700; }
.nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .scores ol { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- game over ---------- */
.over { text-align: center; }
.over h1 { font-size: 2.6rem; color: var(--gold); text-shadow: 0 3px 0 var(--wood-dk); }
.final li { background: var(--cream); border: 2.5px solid var(--wood-dk); border-radius: 14px; padding: .6em .9em; text-align: left; box-shadow: 0 4px 0 rgb(0 0 0 / .25); }
.final li.winner { background: linear-gradient(90deg, #fff1c4, var(--cream)); border-color: var(--gold-dk); font-size: 1.15rem; }
.rank { width: 1.6em; color: var(--muted); font-family: var(--display); }
.over > .muted { color: var(--cream); }

/* ---------- JS animation & drag support ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }
.disc.landing { visibility: hidden; }
.disc.ghost { position: fixed; }
.disc.ghost.dragging { transition: none; box-shadow: 0 5px 0 var(--dk), 0 16px 22px rgb(0 0 0 / .45); }
.disc.spot.suspense { box-shadow: 0 0 0 4px var(--gold), 0 0 22px 8px rgb(242 193 78 / .75); }
.tray-token, .card .disc.mine { touch-action: none; cursor: grab; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- color pass: less paper, more game ---------- */
/* The token tray is a wooden rack; chips pop against it. */
.controls {
  background: linear-gradient(180deg, #7a4722, var(--wood) 45%, var(--wood-dk));
  border-color: #2a160a; color: var(--cream);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .15), inset 0 -3px 0 rgb(0 0 0 / .3), var(--shadow);
}
.controls .hint { color: rgb(251 244 226 / .8); }
.controls .hint b { color: var(--gold); }
.controls .hint.drumroll { color: var(--gold); }
.controls .tray { background: rgb(0 0 0 / .28); border-radius: 99px; padding: 10px 18px 14px; box-shadow: inset 0 3px 8px rgb(0 0 0 / .5); }
.controls .locked-badge { color: #7ee2a2; }
.controls .lock-row .idle { color: #ffb4a6; }
.bonus-badge { background: var(--b); color: #fff; border-color: rgb(0 0 0 / .45); text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.bonus-badge .muted { color: rgb(255 255 255 / .85); }
.spotlight { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, var(--cream)), var(--cream) 60%); }
.wheel-zone { background: radial-gradient(ellipse at center, #2a1a3f, #170e24); border-color: #0b0612; color: var(--cream); }
.wheel-zone .hint, .wheel-zone .wheel-result span { color: rgb(251 244 226 / .8); }
.wheel-zone .wheel-result b { color: var(--gold); }
.wheel-title { color: var(--gold); }
.scores { background: linear-gradient(#fffaf0, var(--cream)); }
.scores h2, .fill-grid h2, .results h2 { color: var(--red); }

/* The in-game coin uses the logo's two halves as its two faces. */
.coin .face { border: 0; box-shadow: 0 8px 18px rgb(0 0 0 / .45); font-size: 0; }
.coin .good { background: url("coin-sun.svg") center / contain no-repeat; }
.coin .bad { background: url("coin-storm.svg") center / contain no-repeat; }
.lobby-logo { border-radius: 50%; }

/* ---------- calm layout: fixed-size bars, reserved space ---------- */
html, body { overflow-x: clip; }
.direction { min-height: 92px; padding: .6em 1.1em; gap: 1em; }
.direction.pending { display: flex; justify-content: flex-start; text-align: left; }
.dir-body { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; flex: 1; }
.direction .coin { width: 68px; height: 68px; flex: none; }
.direction .coin.flipping { animation-name: coinflip-small; }
@keyframes coinflip-small {
  0% { transform: translateY(0) rotateY(0); }
  40% { transform: translateY(-22px) rotateY(calc(var(--end) * .6)); }
  100% { transform: translateY(0) rotateY(var(--end)); }
}
.direction .coin.landed.bad { transform: rotateY(180deg); }
.direction .dir-buttons { justify-content: flex-start; }
.card-spot { aspect-ratio: 5 / 7; border-radius: 12px; border: 2.5px dashed rgb(251 244 226 / .25); background: rgb(0 0 0 / .08); }
@media (max-width: 760px) {
  .card-spot { grid-column: span 2; }
  .card-spot:nth-child(4) { grid-column: 2 / span 2; }
  .direction { min-height: 84px; }
  .direction .coin { width: 56px; height: 56px; }
}
/* Lines that come and go keep their space. */
.controls .hint { min-height: 2.8em; display: grid; place-items: center; }
.lock-row { min-height: 3.2em; }
.lock-row .idle { min-width: 10em; text-align: left; }
@media (max-width: 760px) { .lock-row .idle { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; min-width: 0; font-size: .75rem; } .controls.sorting { padding-bottom: 20px; } }
/* Less hover jiggle on the table. */
.card.selectable:hover .card-front { translate: none; box-shadow: 0 0 0 3px rgb(242 193 78 / .6), 0 2px 0 #d8c69c, 0 10px 18px rgb(0 0 0 / .4); }
.controls { position: relative; }

/* The top bar never changes height; the clock is a fixed-width, tabular box. */
.bar { height: 66px; }
.bar-mid { height: 40px; display: grid; place-items: center; }
.timer {
  font: 700 1.35rem/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  display: inline-grid; place-items: center; min-width: 4.6em; height: 38px; padding: 0 .6em;
  background: rgb(0 0 0 / .3); border: 1.5px solid rgb(251 244 226 / .3); border-radius: 99px;
}
.timer::before { content: "⏱"; font-size: .8em; margin-right: .35em; line-height: 1; }
.timer { grid-auto-flow: column; }
.controls .hint { min-height: 3.2em; }

/* Build badge (bottom-right), for checking which code is running. */
#build {
  position: fixed; right: 16px; bottom: 14px; z-index: 35;
  font: 600 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em;
  color: rgb(251 244 226 / .75); background: rgb(0 0 0 / .35); border: 1px solid rgb(251 244 226 / .2);
  border-radius: 99px; padding: .35em .7em; pointer-events: auto; user-select: all;
}

/* Titles and taglines wrap in balanced lines, never leaving one orphan word. */
h1, h2, .tag, .hint, .wheel-result, .announce-title { text-wrap: balance; }
.nw { white-space: nowrap; }
.hero h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }

/* Ghost buttons on cream panels need dark ink (e.g. "Rejoin room"). */
.panel .btn.ghost { color: var(--wood-dk); border-color: var(--wood-dk); background: transparent; }
#build { cursor: default; color: #b9f5c9; border-color: rgb(126 226 162 / .45); }
#build.stale { cursor: pointer; color: #fff; background: var(--red); border-color: var(--red-dk); font-size: .8rem; padding: .5em .9em; box-shadow: 0 3px 0 var(--red-dk); }

/* Bonus wheel floats above the table. */
.wheel-overlay { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 16px; background: rgb(8 20 12 / .45); animation: fade-in .25s ease both; }
.wheel-overlay .wheel-zone { max-width: 680px; width: 100%; }
@keyframes fade-in { from { opacity: 0; } }
.bonus-badge.pending { background: var(--cream); color: var(--ink); text-shadow: none; }

/* Reveal: the spotlight's face-down cards invite a tap. */
.card.flippable .card-front { box-shadow: 0 0 0 3px var(--gold), 0 2px 0 #d8c69c, 0 10px 18px rgb(0 0 0 / .4); animation: invite 1.6s ease-in-out infinite; }
@keyframes invite { 50% { box-shadow: 0 0 0 6px rgb(242 193 78 / .55), 0 2px 0 #d8c69c, 0 10px 18px rgb(0 0 0 / .4); } }
.card.flippable .slot::after { content: "tap to flip"; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-dk); }

/* Nothing inside the stage may widen the page (the reveal table scrolls in its box). */
.stage { grid-template-columns: minmax(0, 1fr); }
.stage > * { min-width: 0; }
@media (max-width: 760px) {
  .results, .fill-grid { padding: 10px 8px; }
  .results th, .results td, .fill-grid th, .fill-grid td { padding: 4px 3px; }
  .results thead th { font-size: .6rem; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .results tbody th, .fill-grid tbody th { max-width: 76px; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
  tr.spot-row th::after { content: ""; }
  .results .disc.small, .fill-grid .disc.small { font-size: .78rem; }
  td.score { font-size: .8rem; }
  .gain small { display: none; }
}

/* The wooden rail eats space on phones; felt goes edge to edge there. */
@media (max-width: 760px) { body::before { display: none; } }

/* Hint text flows as one paragraph (inline <b> must not become grid items). */
.controls .hint { display: block; text-align: center; }

/* ---------- phone: compact, one-row token tray ---------- */
@media (max-width: 760px) {
  .controls.sorting { gap: 6px; padding: 8px 8px 20px; }
  .controls.sorting .hint { min-height: 0; font-size: .78rem; }
  .controls.sorting .hint .long { display: none; }
  .controls .tray { flex-wrap: nowrap; gap: 6px; padding: 6px 10px 9px; }
  .tray-token { width: 46px; height: 46px; font-size: 1.15rem; border-width: 2px; box-shadow: 0 3px 0 var(--dk), 0 5px 0 color-mix(in srgb, var(--dk) 70%, #000), 0 7px 9px rgb(0 0 0 / .4); }
  .tray-token.selected { transform: translateY(-6px) scale(1.08); }
  .lock-row { min-height: 0; }
  .lock-row .btn { padding: .4em 1.2em; font-size: .95rem; }
  .locked-badge { font-size: .95rem; }
  /* The table's "you" tag crowds the name; the highlighted row already says it. */
  .results tbody th em, .fill-grid tbody th em { display: none; }
}

/* Small phones: the top bar must fit round + clock + Leave. */
@media (max-width: 760px) {
  .bar { padding: 10px 12px 8px; gap: 6px; height: 58px; }
  .pill { font-size: .8rem; padding: .2em .65em; }
  .timer { font-size: 1.15rem; min-width: 4.2em; height: 34px; }
}
@media (max-width: 400px) {
  .bar .pill.ghost { display: none; } /* room code lives in the link and the lobby */
}
@media (max-width: 760px) {
  .card.flippable .slot::after { content: none; } /* the gold glow says "tap me" on phones */
}
@media (max-width: 760px) {
  /* Cards grow to fit their text instead of holding a fixed shape. */
  .card, .card-inner { height: 100%; }
  .card-front { aspect-ratio: auto; min-height: 150px; height: 100%; }
}
@media (max-width: 400px) { .card-text { font-size: .7rem; } }
/* The top bar (Leave, Skip round) stays usable above the wheel overlay. */
.wheel-overlay { z-index: 18; }