:root {
  --paper: #f5efe4;
  --paper-deep: #ece3d3;
  --card: #fffcf6;
  --card-alt: #fff7df;
  --hole: #fbf7ef;
  --ink: #1f2233;
  --ink-soft: #4a4c5c;
  --muted: #7b7a82;
  --line: #e4dac8;
  --on-ink: #f5efe4;
  --ink-shadow: #000;
  --bubble-mine: #1f2233;
  --bubble-mine-text: #f5efe4;
  --bubble-theirs: #efe7d8;
  --glow-a: rgba(246,196,49,.22);
  --glow-b: rgba(29,95,216,.12);
  --blue: #1d5fd8;
  --blue-deep: #1447a8;
  --blue-light: #3d7cf0;
  --blue-base: #0f3a8c;
  --red: #e8423f;
  --red-deep: #b52622;
  --yellow: #f6c431;
  --yellow-deep: #c98f08;
  --green: #22a75d;
  --active-token: var(--red);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 22px;
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 30px -18px rgba(60,40,10,.35), 0 2px 6px -2px rgba(60,40,10,.12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15161d; --paper-deep: #22242e; --card: #1c1e27; --card-alt: #232330; --hole: #0d0e13;
    --ink: #efebe3; --ink-soft: #c7c3ba; --muted: #8e8c95; --line: #2c2e39; --on-ink: #15161d; --ink-shadow: #6f6c66;
    --bubble-mine: #3d7cf0; --bubble-mine-text: #fff; --bubble-theirs: #2a2c37;
    --glow-a: rgba(246,196,49,.08); --glow-b: rgba(61,124,240,.12);
    --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 30px -16px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15161d; --paper-deep: #22242e; --card: #1c1e27; --card-alt: #232330; --hole: #0d0e13;
  --ink: #efebe3; --ink-soft: #c7c3ba; --muted: #8e8c95; --line: #2c2e39; --on-ink: #15161d; --ink-shadow: #6f6c66;
  --bubble-mine: #3d7cf0; --bubble-mine-text: #fff; --bubble-theirs: #2a2c37;
  --glow-a: rgba(246,196,49,.08); --glow-b: rgba(61,124,240,.12);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 30px -16px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 88% -10%, var(--glow-a), transparent 60%),
    radial-gradient(800px 520px at -10% 110%, var(--glow-b), transparent 60%),
    var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }

.shell { width: min(1180px, 100%); margin: 0 auto; padding: 18px 20px 28px; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Header ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 18px; }
.brand { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px; border-radius: 12px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--blue); display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 6px; box-shadow: 0 3px 0 var(--blue-deep); transform: rotate(-6deg); transition: transform .3s; }
.brand:hover .brand-mark { transform: rotate(6deg); }
.brand-mark i { border-radius: 50%; background: var(--red); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: var(--yellow); }
.brand-name { font: 700 1.4rem/1 var(--display); letter-spacing: -.02em; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.net { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; color: var(--muted); font-size: .85rem; }
.status-light { width: 8px; height: 8px; border-radius: 50%; background: #c4bba9; }
.status-light.live { background: var(--green); box-shadow: 0 0 0 4px rgba(34,167,93,.15); }
.status-light.error { background: var(--red); box-shadow: 0 0 0 4px rgba(232,66,63,.15); }
.nav-button { border: 0; background: transparent; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--ink-soft); transition: background .15s, color .15s; }
.nav-button:hover, .nav-button:focus-visible { background: var(--card); color: var(--ink); }
.icon-only { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.icon-only svg { width: 20px; height: 20px; fill: currentColor; }
.sound-button.muted svg { opacity: .35; }
.sun { display: none; }
:root[data-theme="dark"] .sun { display: block; }
:root[data-theme="dark"] .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sun { display: block; }
  :root:not([data-theme="light"]) .moon { display: none; }
}

/* ---------- Lobby ---------- */
.lobby { flex: 1; }
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; padding: 22px 0 30px; }
.kicker { margin: 0 0 8px; color: var(--muted); font-size: .92rem; font-weight: 600; }
.hero h1 { margin: 0; font: 700 clamp(2.5rem, 5.6vw, 4.6rem)/1.02 var(--display); letter-spacing: -.035em; }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--blue-light); }
.lede { max-width: 34rem; margin: 20px 0 0; color: var(--ink-soft); font-size: 1.1rem; }
.hero-art { position: relative; justify-self: center; width: min(340px, 100%); padding-top: 50px; }
.mini-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px; background: var(--blue); border-radius: 18px; box-shadow: 0 8px 0 var(--blue-deep), 0 30px 40px -20px rgba(20,71,168,.6); transform: rotate(3deg); }
.mini-board i { aspect-ratio: 1; border-radius: 50%; background: var(--hole); box-shadow: inset 0 3px 5px rgba(0,0,0,.18); }
.mini-board i.r { background: radial-gradient(circle at 35% 30%, #ff7a73, var(--red) 55%, var(--red-deep)); }
.mini-board i.y { background: radial-gradient(circle at 35% 30%, #ffe48a, var(--yellow) 55%, var(--yellow-deep)); }
.falling-puck { position: absolute; top: 0; left: 59%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a73, var(--red) 55%, var(--red-deep)); animation: hover-puck 2.4s ease-in-out infinite; }
@keyframes hover-puck { 50% { transform: translateY(8px); } }

.you-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px 28px; align-items: center; margin-bottom: 20px; padding: 24px 28px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.you-copy h2 { margin: 0; font: 700 1.6rem/1.15 var(--display); letter-spacing: -.02em; }
.you-copy p { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }
.you-fields { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.you-fields label { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.pin-note { grid-column: 2; margin: 0; color: var(--muted); font-size: .84rem; }
.pin-note.saved { color: var(--green); font-weight: 600; }
input:not([type=checkbox]) { width: 100%; padding: 13px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--hole); outline: none; font-size: 1.05rem; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(61,124,240,.16); }
input::placeholder { color: var(--muted); opacity: .7; }

.lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.action-card { position: relative; display: flex; flex-direction: column; padding: 26px 28px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.join-card { background: var(--card-alt); }
.step { position: absolute; top: 22px; right: 24px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 700 1rem var(--display); color: #fff; background: var(--red); }
.join-card .step { background: var(--yellow); color: #1f2233; }
.action-card h2 { margin: 0; font: 700 1.9rem/1.1 var(--display); letter-spacing: -.02em; }
.action-card > p { margin: 4px 0 18px; color: var(--muted); }
.action-card > .primary-button { margin-top: auto; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: auto; }
.code-input { font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.lobby-message { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: #fde7e4; color: #8f201c; font-weight: 500; }

/* ---------- Buttons ---------- */
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 50px; padding: 12px 22px; border: 0; border-radius: 999px; font-weight: 700; font-size: 1rem; transition: transform .12s, box-shadow .12s, background .15s; }
.primary-button { background: var(--ink); color: var(--on-ink); box-shadow: 0 4px 0 var(--ink-shadow); }
.secondary-button { background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-deep); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); }
.primary-button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink-shadow); }
.secondary-button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-deep); }
.primary-button:disabled, .secondary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Game ---------- */
.game-view { flex: 1; }
.game-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.code-button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 2px dashed var(--line); border-radius: 999px; background: var(--card); }
.code-button span { color: var(--muted); font-size: .85rem; }
.code-button b { font-size: 1.1rem; letter-spacing: .18em; }
.code-button i { font-style: normal; font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--paper-deep); }
.code-button:hover i { background: var(--ink); color: var(--on-ink); }
.turn-indicator { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); transition: background .25s, color .25s; }
.turn-indicator > span { width: 26px; height: 26px; border-radius: 50%; background: var(--paper-deep); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.turn-indicator.red > span { background: var(--red); }
.turn-indicator.yellow > span { background: var(--yellow); }
.turn-indicator p { margin: 0; font-weight: 700; }
.turn-indicator.mine.red { background: var(--red); color: #fff; }
.turn-indicator.mine.yellow { background: var(--yellow); color: #1f2233; }
.turn-indicator.mine > span { background: #fff; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-3px); } }
.leave-link { border: 0; background: none; color: var(--muted); font-weight: 600; font-size: .92rem; padding: 8px 12px; border-radius: 999px; }
.leave-link:hover { color: var(--red-deep); background: #fde7e4; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.board-panel { background: var(--card); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; }
.board-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 24px 28px 0; }
.board-heading .kicker { margin-bottom: 2px; }
.board-heading h2 { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--display); letter-spacing: -.02em; }
.move-counter { text-align: right; }
.move-counter strong { display: block; font: 700 2rem/1 var(--display); }
.move-counter span { color: var(--muted); font-size: .82rem; }

.forfeit-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 16px 28px 0; padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--card-alt); border: 2px solid var(--yellow); animation: pop .3s ease-out; }
.forfeit-banner p { margin: 0; font-weight: 600; }
.forfeit-actions { display: flex; gap: 8px; }
.forfeit-actions button { min-height: 40px; padding: 8px 16px; font-size: .92rem; }

/* The board: pucks sit on a layer behind a blue front panel with real holes cut in it. */
.board-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 24px 12px; }
.lane-controls, .board { width: min(100%, 600px); }
.lane-controls { --pad: clamp(8px, 1.8vw, 16px); display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 var(--pad); }
.lane-button { position: relative; aspect-ratio: 1; max-height: 64px; border: 0; background: transparent; }
.lane-button::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: var(--active-token); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); opacity: 0; transform: translateY(-8px) scale(.8); transition: opacity .15s, transform .18s; }
.lane-button:not(:disabled):hover::after, .lane-button:not(:disabled):focus-visible::after, .lane-button.hovered::after { opacity: 1; transform: none; }
.lane-button.hinted::before { content: "💡"; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(1.1rem, 3vw, 1.6rem); animation: hintBob .9s ease-in-out infinite; }
.lane-button.hinted.hovered::before { opacity: 0; }
@keyframes hintBob { 50% { transform: translateY(6px); } }
.lane-button:disabled { cursor: default; }

.board { --pad: clamp(8px, 1.8vw, 16px); position: relative; padding: var(--pad) var(--pad) calc(var(--pad) + 16px); border-radius: 20px; background: var(--blue); box-shadow: 0 10px 0 var(--blue-base), 0 30px 40px -18px rgba(15,58,140,.55), inset 0 2px 0 rgba(255,255,255,.25); overflow: hidden; isolation: isolate; }
.board-slots { position: relative; z-index: 1; overflow: hidden; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); aspect-ratio: 7 / 6; background: var(--hole); }
.board-slots.can-move { cursor: pointer; }
.board-front {
  --tile: calc(100% / 7) calc(100% / 6);
  position: absolute; inset: var(--pad) var(--pad) calc(var(--pad) + 16px); z-index: 2; pointer-events: none;
  background:
    radial-gradient(closest-side, transparent 78%, rgba(0,10,50,.45) 79%, rgba(0,10,50,0) 90%) 0 0 / var(--tile),
    var(--blue);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79.5%) 0 0 / var(--tile);
  mask: radial-gradient(closest-side, transparent 78%, #000 79.5%) 0 0 / var(--tile);
}
.cell { position: relative; }
.cell.lane-hover { background: rgba(61,124,240,.12); }
.cell.hint-col { background: rgba(246,196,49,.22); }
/* Pucks are a touch larger than the holes, so each hole is filled edge to edge with solid colour. */
.piece { position: absolute; inset: 2%; border-radius: 50%; transform: scale(0); }
.cell.red .piece { transform: none; background: radial-gradient(circle at 40% 35%, #ff6e67, var(--red) 45%, #d23431 70%, var(--red-deep)); }
.cell.yellow .piece { transform: none; background: radial-gradient(circle at 40% 35%, #ffdd6e, var(--yellow) 45%, #eab41f 70%, var(--yellow-deep)); }
.cell.ghost .piece { transform: none; background: var(--active-token); opacity: .35; }
.cell.latest .piece { animation: fall var(--fall-time, .5s) linear both; }
@keyframes fall {
  0% { transform: translateY(var(--fall-from)); animation-timing-function: cubic-bezier(.45, 0, 1, .6); }
  78% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .4, .6, 1); }
  89% { transform: translateY(-9%); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  100% { transform: translateY(0); }
}
.board-feet { position: relative; width: min(88%, 540px); height: 20px; }
.board-feet i { position: absolute; top: 0; width: 44px; height: 20px; background: var(--blue-base); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.board-feet i:first-child { left: 4%; }
.board-feet i:last-child { right: 4%; }

.waiting-cover { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--card) 70%, transparent); }
.waiting-card { width: min(400px, 100%); padding: 30px; text-align: center; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.waiting-card strong { display: block; margin: 4px 0 18px; font: 700 clamp(2.2rem, 6vw, 3rem)/1 var(--display); letter-spacing: .12em; }
.waiting-card > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: .9rem; }
.waiting-dots { display: inline-flex; gap: 6px; margin-bottom: 14px; }
.waiting-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--red); animation: bounce 1.1s ease-in-out infinite; }
.waiting-dots i:nth-child(2) { background: var(--yellow); animation-delay: .15s; }
.waiting-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 40% { transform: translateY(-9px); } 80% { transform: none; } }

.board-tools { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 6px 20px 20px; }
.board-help { margin: 0; text-align: center; color: var(--muted); font-size: .92rem; }
.tool-button { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); font-size: .92rem; transition: background .15s, border-color .15s, opacity .15s; }
.tool-button:not(:disabled):hover { background: var(--paper); border-color: var(--yellow); }
.tool-button.subtle:not(:disabled):hover { border-color: var(--red); }
.tool-button:disabled { opacity: .45; cursor: not-allowed; }
.tool-button.active { border-color: var(--yellow); background: var(--card-alt); }

.side-panel { display: grid; gap: 16px; }
.card { padding: 20px 22px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.side-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.side-heading h3 { margin: 0; font: 700 1.15rem var(--display); }
.side-heading b { color: var(--muted); font-size: .8rem; font-weight: 600; }
.player-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 16px; transition: background .2s; }
.player-row + .player-row { margin-top: 4px; }
.player-row.active { background: var(--paper); }
.token-dot { flex: none; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.token-dot.red { background: var(--red); }
.token-dot.yellow { background: var(--yellow); }
.player-row div { flex: 1; min-width: 0; }
.player-row div b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
.player-row small { color: var(--muted); }
.player-row i { font-style: normal; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); opacity: 0; transform: scale(.8); transition: .2s; }
.player-row.active i { opacity: 1; transform: none; }

.chat-log { list-style: none; margin: 0 -6px; padding: 2px 6px; height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.chat-log li { max-width: 85%; animation: logIn .25s ease-out; }
.chat-log .msg { align-self: flex-start; }
.chat-log .msg.mine { align-self: flex-end; text-align: right; }
.chat-log .who { display: block; margin: 0 4px 2px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.chat-log .bubble { display: inline-block; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--bubble-theirs); font-size: .93rem; line-height: 1.35; text-align: left; overflow-wrap: anywhere; }
.chat-log .mine .bubble { border-radius: 16px 16px 4px 16px; background: var(--bubble-mine); color: var(--bubble-mine-text); }
.chat-log .bubble.emoji { padding: 0 4px; background: none; font-size: 2rem; line-height: 1.1; }
.chat-log .system { align-self: center; max-width: 100%; color: var(--muted); font-size: .8rem; text-align: center; }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } }
.emoji-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0 8px; }
.emoji-bar button { height: 42px; border: 0; border-radius: 12px; background: var(--paper); font-size: 1.35rem; transition: transform .12s, background .15s; }
.emoji-bar button:hover { transform: translateY(-2px) scale(1.08); background: var(--paper-deep); }
.emoji-bar button:active { transform: scale(.92); }
.emoji-bar button:disabled { opacity: .5; transform: none; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.chat-form input { padding: 10px 14px; font-size: .95rem; border-radius: 999px; }
.chat-form button { width: 44px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1rem; }

/* Reactions float up the screen edges so they never cover the board. */
.reaction-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.reaction { position: absolute; bottom: -120px; display: grid; justify-items: center; will-change: transform, opacity; animation: floatUp 2.2s cubic-bezier(.2,.7,.3,1) forwards; }
.reaction .big { font-size: clamp(64px, 11vw, 110px); line-height: 1; filter: drop-shadow(0 8px 14px rgba(0,0,0,.2)); animation: wobble .5s ease-in-out 3 alternate; }
.reaction .label { margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: .8rem; font-weight: 700; }
.reaction-bit { position: absolute; bottom: -40px; font-size: 30px; will-change: transform, opacity; animation: bitUp 1.6s ease-out forwards; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translateY(-38vh) scale(1.1); } 70% { opacity: 1; transform: translateY(-58vh) scale(1); } 100% { opacity: 0; transform: translateY(-78vh) scale(.9); } }
@keyframes bitUp { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), -65vh) scale(1) rotate(var(--rot)); opacity: 0; } }
@keyframes wobble { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }

/* ---------- Modals ---------- */
.modal { width: min(560px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 32px; border: 0; border-radius: 28px; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); overflow: auto; }
.modal::backdrop { background: rgba(20,22,32,.5); }
.modal[open] { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; } }
.modal-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1.4rem; line-height: 1; }
.modal-close:hover { background: var(--paper-deep); }
.modal h2 { margin: 0 0 18px; font: 700 2.2rem/1.05 var(--display); letter-spacing: -.02em; }
.rules-modal ol { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: rule; display: grid; gap: 14px; }
.rules-modal li { counter-increment: rule; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
.rules-modal li::before { content: counter(rule); grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-deep); font: 700 1rem var(--display); }
.rules-modal li span { color: var(--ink-soft); }
.confirm-modal { width: min(420px, calc(100% - 28px)); text-align: center; }
.confirm-modal h2 { font-size: 1.7rem; margin-bottom: 8px; }
.confirm-modal p { margin: 0 0 22px; color: var(--ink-soft); }

.result-modal { position: relative; width: min(600px, calc(100% - 28px)); overflow-x: hidden; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; }
.result-modal > *:not(.fx-canvas):not(.modal-close) { position: relative; z-index: 1; }
.result-top { display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.result-top .kicker { margin-bottom: 2px; }
.result-modal h2 { margin: 0; font-size: clamp(2.1rem, 7vw, 3rem); }
.result-sub { margin: 10px 0 16px; color: var(--ink-soft); }
.result-modal.victory { background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 22%, var(--card)), var(--card) 45%); }
.result-modal.defeat { background: linear-gradient(180deg, color-mix(in srgb, #7288ad 22%, var(--card)), var(--card) 45%); }
.result-modal.draw { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 14%, var(--card)), var(--card) 45%); }
.result-face { flex: none; position: relative; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, var(--yellow) 60%, var(--yellow-deep)); box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.result-face i { position: absolute; top: 27px; width: 9px; height: 12px; border-radius: 50%; background: #1f2233; }
.result-face i:first-child { left: 22px; }
.result-face i:nth-child(2) { right: 22px; }
.result-face b { position: absolute; left: 50%; top: 41px; width: 30px; height: 15px; margin-left: -15px; border: 4px solid #1f2233; border-top: 0; border-radius: 0 0 30px 30px; }
.result-face u { display: none; }
.victory .result-face { animation: celebrate .9s ease-in-out infinite; }
@keyframes celebrate { 25% { transform: rotate(-10deg) translateY(-5px); } 75% { transform: rotate(10deg) translateY(-5px); } }
.defeat .result-face { background: radial-gradient(circle at 35% 30%, #d8e0ee, #9fb0cc 60%, #7288ad); animation: sulk 3s ease-in-out infinite; }
.defeat .result-face i { top: 31px; height: 7px; }
.defeat .result-face b { top: 47px; height: 12px; border: 4px solid #1f2233; border-bottom: 0; border-radius: 30px 30px 0 0; }
.defeat .result-face u { display: block; position: absolute; left: 20px; top: 40px; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #5fa8f5; animation: tear 1.8s ease-in infinite; }
.draw .result-face { background: linear-gradient(90deg, var(--red) 50%, var(--yellow) 50%); animation: shrug 2.4s ease-in-out infinite; }
.draw .result-face b { top: 46px; height: 0; border: 0; border-top: 4px solid #1f2233; border-radius: 2px; }
@keyframes sulk { 50% { transform: translateY(4px) rotate(-3deg); } }
@keyframes tear { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes shrug { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

.result-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: min(100%, 300px); margin: 0 auto; padding: 9px; border-radius: 14px; background: var(--blue); box-shadow: 0 5px 0 var(--blue-base); }
.result-board i { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--hole); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.result-board i.r { background: var(--red); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.result-board i.y { background: var(--yellow); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.result-board i.dim { filter: saturate(.45) brightness(.85); }
.result-board i.win::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid #3ee383; box-shadow: 0 0 10px #3ee383; }
.result-board i.last { animation: lastFlash .6s ease-in-out infinite alternate; }
@keyframes lastFlash { from { filter: brightness(1); transform: scale(1); } to { filter: brightness(1.6); transform: scale(.78); } }
.result-board-note { margin: 10px 0 18px; text-align: center; color: var(--muted); font-size: .82rem; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.summary-stat, .accuracy-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--paper); }
.summary-stat strong { font: 700 2.2rem/1 var(--display); }
.summary-stat span, .accuracy-stat small { color: var(--muted); font-size: .8rem; text-align: center; }
.score-ring { --score: 0; position: relative; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--score) * 1%), var(--paper-deep) 0); }
.score-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--paper); }
.score-ring b { position: relative; font-size: .92rem; }
.red-score .score-ring { --ring: var(--red); }
.yellow-score .score-ring { --ring: var(--yellow-deep); }
.accuracy-stat > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .92rem; }
.engine-note { margin: 0 0 18px; color: var(--muted); font-size: .8rem; text-align: center; }
.result-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.result-actions .secondary-button { background: var(--paper-deep); color: var(--ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--paper-deep) 70%, #000); }
.rematch-status { margin-top: 14px; color: var(--ink-soft); font-size: .9rem; font-weight: 600; text-align: center; }

.leaderboard-table { border-radius: 18px; overflow: hidden; background: var(--paper); }
.leaderboard-head, .leaderboard-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 56px 62px 76px; align-items: center; gap: 6px; padding: 11px 16px; }
.leaderboard-head { color: var(--muted); font-size: .78rem; font-weight: 600; }
.leaderboard-row { border-top: 1px solid var(--line); font-size: .95rem; }
.leaderboard-row .rank { font: 700 1rem var(--display); color: var(--muted); }
.leaderboard-row .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row .rate { font-weight: 600; }
.leaderboard-row.top-three .rank { color: var(--ink); }
.leaderboard-row.top-three:nth-child(1) .rank::after { content: " ★"; color: var(--yellow-deep); }
.leaderboard-empty { padding: 26px 16px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
.leaderboard-note { margin: 14px 0 0; color: var(--muted); font-size: .82rem; }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 60; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: .92rem; text-align: center; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 10px; padding-top: 8px; }
  .hero-art { width: min(260px, 75%); order: -1; }
  .game-layout { grid-template-columns: 1fr; }
  .side-panel { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .you-card { grid-template-columns: 1fr; }
  .pin-note { grid-column: 1; }
}
@media (max-width: 640px) {
  .shell { padding: 12px 16px 20px; }
  .net span:last-child { display: none; }
  .nav-button { padding: 8px 9px; font-size: .84rem; }
  .icon-only { width: 36px; height: 36px; }
  .brand-name { font-size: 1.1rem; }
  .you-card, .action-card { padding: 20px; }
  .you-fields { grid-template-columns: 1fr; }
  .lobby-actions { grid-template-columns: 1fr; }
  .game-strip { flex-wrap: wrap; }
  .turn-indicator { order: -1; width: 100%; justify-content: center; }
  .board-heading { padding: 18px 18px 0; }
  .forfeit-banner { margin: 14px 14px 0; }
  .board-stage { padding: 8px 8px 10px; }
  .board-tools { grid-template-columns: 1fr 1fr; padding: 4px 14px 16px; }
  .board-help { grid-column: 1 / -1; grid-row: 1; }
  .tool-button { justify-content: center; }
  .side-panel { grid-template-columns: 1fr; }
  .chat-log { height: 200px; }
  .modal { padding: 24px 18px; }
  .result-top { gap: 12px; }
  .result-face { zoom: .8; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-stat { grid-column: 1 / -1; flex-direction: row; gap: 10px; }
  .leaderboard-head, .leaderboard-row { grid-template-columns: 30px minmax(0, 1fr) 42px 48px 60px; padding-inline: 10px; font-size: .85rem; }
  footer { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Head-to-head, spectators ---------- */
.h2h { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.h2h-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--paper-deep); }
.h2h-bar span { width: 0; transition: width .6s cubic-bezier(.3,.8,.3,1); }
.h2h-bar .red { background: var(--red); }
.h2h-bar .draw { background: var(--muted); opacity: .5; }
.h2h-bar .yellow { background: var(--yellow); }
.h2h p { margin: 8px 0 0; color: var(--ink-soft); font-size: .88rem; text-align: center; }
.h2h p b { color: var(--ink); }
.watchers { margin: 12px 0 0; color: var(--muted); font-size: .84rem; }
.spectating-badge { padding: 8px 14px; border-radius: 999px; background: var(--card-alt); border: 2px solid var(--line); font-weight: 700; font-size: .88rem; }
.spectating .board-tools { grid-template-columns: 1fr; }
.spectating #hintButton, .spectating #forfeitButton, .spectating #emojiBar, .spectating .lane-controls { visibility: hidden; }
.spectating #hintButton, .spectating #forfeitButton, .spectating #emojiBar { display: none; }
.spectating .chat-form { margin-top: 12px; }
.chat-log .who .tag { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--paper-deep); font-size: .66rem; }
.result-series { margin: -8px 0 16px; font-weight: 600; color: var(--ink); }
.result-series span { color: var(--muted); font-weight: 500; }


/* ---------- v4: settings, tools, lane numbers, opponent hover, spill ---------- */
.board-help { padding: 4px 20px 0; }
.board-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 20px 8px; }
.tool-button.undo { border-color: var(--blue-light); background: color-mix(in srgb, var(--blue-light) 12%, var(--card)); animation: pop .2s ease-out; }
.tool-button.results { border-color: var(--green); }
.tool-button b { font-weight: 600; }
.keys-hint { margin: 0; padding: 0 20px 18px; text-align: center; color: var(--muted); font-size: .76rem; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--card); font: 600 .72rem var(--body); text-align: center; }
@media (hover: none) { .keys-hint { display: none; } }
.rules-keys { margin: -8px 0 20px; color: var(--muted); font-size: .85rem; }

.rule-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 28px 0; }
.rule-chips:empty { display: none; }
.rule-chips span { padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--ink-soft); font-size: .76rem; font-weight: 600; }

.lane-numbers { position: absolute; left: var(--pad); right: var(--pad); bottom: 1px; z-index: 3; display: grid; grid-template-columns: repeat(7, 1fr); height: calc(var(--pad) + 14px); align-items: center; pointer-events: none; }
.lane-numbers span { text-align: center; font: 700 .72rem/1 var(--body); color: rgba(0, 18, 70, .5); text-shadow: 0 1px 0 rgba(255,255,255,.12); }

.lane-controls { position: relative; }
.opp-puck { --col: 3; position: absolute; top: 0; left: var(--pad); width: calc((100% - 2 * var(--pad)) / 7); aspect-ratio: 1; max-height: 64px; transform: translateX(calc(var(--col) * 100%)); transition: transform .22s cubic-bezier(.3,.8,.3,1), opacity .2s; opacity: 0; pointer-events: none; }
.opp-puck::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: var(--opp-color, var(--yellow)); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.18); animation: oppBob 1.4s ease-in-out infinite; }
.opp-puck.show { opacity: .9; }
@keyframes oppBob { 50% { transform: translateY(4px); } }

.cell.spotlight .piece { animation: spotlight .55s ease-in-out 5 alternate; }
@keyframes spotlight { to { filter: brightness(1.45); } }
@keyframes spotlightRing { 0% { opacity: 0; transform: scale(1.6); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.spill-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.spill-disc { position: absolute; border-radius: 50%; will-change: transform; }
.spill-disc.r { background: radial-gradient(circle at 40% 35%, #ff6e67, var(--red) 45%, #d23431 70%, var(--red-deep)); }
.spill-disc.y { background: radial-gradient(circle at 40% 35%, #ffdd6e, var(--yellow) 45%, #eab41f 70%, var(--yellow-deep)); }
.board-slots .spill-disc { z-index: 2; }

.host-buttons { display: grid; gap: 10px; margin-top: auto; }
.settings-button { justify-self: center; border: 0; background: none; padding: 6px 12px; border-radius: 999px; color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
.settings-button:hover { background: var(--paper); color: var(--ink); }
.settings-summary { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: .8rem; }
.text-button { border: 0; background: none; color: var(--muted); font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.text-button:hover { color: var(--ink); background: var(--paper); }

.settings-modal { width: min(520px, calc(100% - 28px)); }
.settings-form { display: grid; gap: 10px; }
.setting { margin: 0; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--paper); }
.setting legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-weight: 700; }
.setting small { display: block; color: var(--muted); font-weight: 500; font-size: .82rem; }
.setting legend small { display: inline; margin-left: 6px; }
.segmented { clear: both; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; place-items: center; height: 40px; border-radius: 12px; background: var(--card); border: 2px solid var(--line); font-weight: 700; cursor: pointer; transition: .15s; }
.segmented input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.segmented input:focus-visible + span { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i { flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--paper-deep); border: 2px solid var(--line); transition: .2s; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.toggle input:checked + i { background: var(--green); border-color: var(--green); }
.toggle input:checked + i::after { transform: translateX(20px); }
.toggle input:focus-visible + i { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.settings-form .result-actions { margin-top: 8px; }

.queue-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.queue-title { margin: 0 0 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.queue-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: q; }
.queue-list li { counter-increment: q; display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.queue-list li::before { content: counter(q); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-deep); font-size: .72rem; font-weight: 700; }
.queue-list li.me { font-weight: 700; }
.queue-list.watchers li::before { content: "👀"; background: none; }
.next-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--paper); text-align: center; font-weight: 600; }
.chat-log .system.hint { color: var(--yellow-deep); }
.leaderboard-row.me { background: color-mix(in srgb, var(--blue-light) 12%, transparent); }
@media (max-width: 640px) {
  .rule-chips { margin: 10px 18px 0; }
  .board-tools { padding: 8px 12px 14px; }
  .tool-button { padding: 8px 12px; font-size: .86rem; }
}
.segmented label, .toggle { position: relative; }
.segmented input, .toggle input { inset: 0; width: 100%; height: 100%; margin: 0; }
.settings-modal { overflow-x: hidden; }
.lane-button.spot::before { content: "▼"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: clamp(1rem, 2.6vw, 1.5rem); animation: hintBob .5s ease-in-out 5 alternate; }
.cell.spotlight .piece { animation: spotlight .45s ease-in-out 6 alternate; }
@keyframes spotlight { to { filter: brightness(1.7) saturate(1.2); } }

.nav-icon { display: none; }
@media (max-width: 640px) {
  .nav-icon { display: inline; font-size: 1.05rem; }
  .nav-label { display: none; }
  .top-actions .nav-button { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
  .game-strip { gap: 8px; }
  .spectating-badge { padding: 6px 10px; font-size: .8rem; }
  .code-button { padding: 6px 6px 6px 12px; gap: 6px; }
  .code-button b { font-size: 1rem; letter-spacing: .12em; }
}

/* ---------- v5 ---------- */
/* Aiming counter: exactly counter-sized and half sunk into the top of the column, as if about to drop.
   The row is shorter than the counter and clips it, so the lower part disappears "into" the board. */
.lane-controls { overflow: hidden; }
.lane-button { aspect-ratio: 1 / .6; max-height: none; }
.lane-button::after, .opp-puck::after { inset: auto; left: 2%; width: 96%; aspect-ratio: 1; top: 6%; }
.lane-button::after { transform: translateY(-30%); }
.lane-button:not(:disabled):hover::after, .lane-button:not(:disabled):focus-visible::after, .lane-button.hovered::after { transform: none; }
.lane-button::after, .opp-puck::after { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, #fff 30%, var(--active-token)), var(--active-token) 50%, color-mix(in srgb, #000 22%, var(--active-token))); box-shadow: none; }
.opp-puck { height: 100%; aspect-ratio: auto; max-height: none; }
.opp-puck::after { --active-token: var(--opp-color, var(--yellow)); animation: none; }
.opp-puck.show { opacity: .95; }
.lane-button.hinted::before, .lane-button.spot::before { place-items: start center; padding-top: 2px; z-index: 1; }

/* Bigger turn banner that fills the space next to the code. */
.game-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.game-strip .spectating-badge { grid-column: 2; grid-row: 2; justify-self: center; }
.turn-indicator { justify-content: center; min-height: 54px; padding: 10px 22px 10px 14px; }
.turn-indicator p { font-size: 1.12rem; }
.turn-indicator > span { width: 30px; height: 30px; }
.turn-timer { margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.12); font-variant-numeric: tabular-nums; font-size: .95rem; }
.turn-timer.low { background: var(--red); color: #fff; animation: timerPulse .5s ease-in-out infinite alternate; }
.turn-indicator.mine.red .turn-timer.low { background: #fff; color: var(--red-deep); }
@keyframes timerPulse { to { transform: scale(1.12); } }
.turn-indicator.nudge { animation: nudgeFlash .7s ease-in-out infinite alternate; }
@keyframes nudgeFlash { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--active-glow, var(--red)) 70%, transparent); filter: brightness(1); } to { box-shadow: 0 0 0 10px transparent; filter: brightness(1.2); } }

.cancel-button { display: block; margin: 16px auto 0; padding: 10px 22px; border: 2px solid var(--red); border-radius: 999px; background: transparent; color: var(--red); font-weight: 700; }
.cancel-button:hover { background: var(--red); color: #fff; }

.identity-modal { width: min(460px, calc(100% - 28px)); }
.identity-modal h2 { margin-bottom: 6px; }
.identity-context { margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; background: var(--paper); font-weight: 600; }
.identity-form { display: grid; gap: 14px; margin-top: 16px; }
.field { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.field em { font-style: normal; font-weight: 500; color: var(--muted); }
.name-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.reroll-button { width: 52px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); font-size: 1.3rem; transition: transform .2s; }
.reroll-button:hover { transform: rotate(-15deg) scale(1.05); }
.identity-preview { margin: -4px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--paper); font-size: .9rem; }
.identity-preview.counted { background: color-mix(in srgb, var(--green) 14%, var(--card)); }
.identity-form .lobby-message { margin: 0; }
.identity-form .primary-button { width: 100%; }
.identity-form .text-button { justify-self: center; }

.setting.select { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.setting.select select { flex: none; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; }

.tool-button.results.attention { animation: nudgeFlash .7s ease-in-out infinite alternate; --active-glow: var(--green); }
.next-note.ask { background: color-mix(in srgb, var(--green) 16%, var(--card)); }

/* Phone landing: get straight to Start / Join. */
@media (max-width: 640px) {
  .hero { padding: 4px 0 16px; }
  .hero-art { display: none; }
  .hero .kicker { display: none; }
  .hero h1 { font-size: 2.15rem; line-height: 1.05; }
  .lede { margin-top: 10px; font-size: .95rem; }
  .lobby-actions { gap: 12px; }
  .action-card { padding: 18px 18px 16px; }
  .action-card h2 { font-size: 1.5rem; }
  .action-card > p { margin: 2px 0 12px; font-size: .9rem; }
  .step { top: 16px; right: 16px; width: 28px; height: 28px; font-size: .85rem; }
  .settings-summary { margin-top: 4px; }
  .game-strip { grid-template-columns: 1fr auto; }
  .game-strip .turn-indicator { grid-column: 1 / -1; grid-row: 1; }
  .game-strip .spectating-badge { grid-column: 1 / -1; grid-row: 3; }
  .turn-indicator p { font-size: 1rem; }
}

/* ---------- v6 ---------- */
/* Headline: one phrase per line, never broken mid-phrase. */
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1.02; }
.hero h1 > * { display: block; white-space: nowrap; }
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .hero h1 em, .hero h1 > span:last-child { display: inline; }
}

/* Front-page board plays a little demo game on a loop. */
.mini-board i { transition: opacity .35s, box-shadow .3s; }
.mini-board i.drop { animation: miniDrop var(--t, .45s) cubic-bezier(.55, 0, 1, .45) both; }
@keyframes miniDrop { from { transform: translateY(var(--from, -300%)); } }
.mini-board i.win { box-shadow: 0 0 0 3px #3ee383, 0 0 14px 2px #3ee383; animation: miniWin .5s ease-in-out infinite alternate; }
@keyframes miniWin { to { filter: brightness(1.3); } }
.mini-board.clearing i.r, .mini-board.clearing i.y { opacity: 0; transform: translateY(40%); transition: opacity .4s, transform .4s ease-in; }
.falling-puck { transition: left .35s cubic-bezier(.3,.8,.3,1), background .2s; }
.falling-puck.y { background: radial-gradient(circle at 35% 30%, #ffe48a, var(--yellow) 55%, var(--yellow-deep)); }

.leaderboard-row .rank { font-size: 1.05rem; }
.leaderboard-row.top-three:nth-child(1) .rank::after { content: none; }

/* ---------- v7: demo board built like the real one (counters behind a front panel) ---------- */
.mini-board { display: block; position: relative; padding: 12px; }
.mini-slots { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); aspect-ratio: 7 / 6; overflow: hidden; background: var(--hole); }
.mini-slots i { position: relative; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; transition: none; }
.mini-slots b { position: absolute; inset: 2%; border-radius: 50%; transform: translateY(var(--y, 0)); }
.mini-slots b.r { background: radial-gradient(circle at 40% 35%, #ff6e67, var(--red) 45%, #d23431 70%, var(--red-deep)); }
.mini-slots b.y { background: radial-gradient(circle at 40% 35%, #ffdd6e, var(--yellow) 45%, #eab41f 70%, var(--yellow-deep)); }
.mini-slots b.win { animation: miniWin .45s ease-in-out infinite alternate; }
.mini-slots b.win::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); }
@keyframes miniWin { to { filter: brightness(1.35); } }
.mini-front {
  --tile: calc(100% / 7) calc(100% / 6);
  position: absolute; inset: 12px; pointer-events: none;
  background: radial-gradient(closest-side, transparent 78%, rgba(0,10,50,.4) 79%, rgba(0,10,50,0) 90%) 0 0 / var(--tile), var(--blue);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79.5%) 0 0 / var(--tile);
  mask: radial-gradient(closest-side, transparent 78%, #000 79.5%) 0 0 / var(--tile);
}
.falling-puck { top: 6px; left: 0; width: var(--puck, 11%); height: var(--puck, auto); aspect-ratio: 1; opacity: 0; transition: left .32s cubic-bezier(.3,.8,.3,1), opacity .2s; animation: none; }
.falling-puck.show { opacity: 1; }

/* Header icons drawn in the site's own ink colour; status dot only matters during a game. */
svg.nav-icon { width: 20px; height: 20px; }
.nav-icon { display: none; }
body:not(.in-game) .net { display: none; }
@media (max-width: 640px) {
  svg.nav-icon { display: block; }
}
.mini-board { transform: none; }
.hero-art { transform: rotate(3deg); }
.settings-button { display: inline-flex; align-items: center; gap: 6px; }
.settings-button .gear { width: 16px; height: 16px; transition: transform .4s; }
.settings-button:hover .gear { transform: rotate(90deg); }
/* Paint the dark hole colour only inside each hole, so no dark seam shows where the grid meets the frame. */
.mini-slots { background: none; }
.mini-slots i { background: radial-gradient(closest-side, var(--hole) 84%, transparent 86%); }

/* ---------- v8 ---------- */
/* Hint highlight uses your own colour, not always yellow. */
.cell.hint-col { background: color-mix(in srgb, var(--active-token) 24%, transparent); }

/* The aiming counter can rise above the row without its top being cut off; only the bottom is clipped
   (where it sinks into the board). */
.lane-controls { overflow: visible; clip-path: inset(-150% -2% 0 -2%); }
.board-stage { padding-top: 22px; }

/* Desktop: the players and chat cards fill the board's height, and chat takes the spare space. */
@media (min-width: 961px) {
  .game-layout { align-items: stretch; }
  .side-panel { display: flex; flex-direction: column; gap: 16px; }
  .chat-card { flex: 1; display: flex; flex-direction: column; min-height: 320px; }
  .chat-log { flex: 1 1 0; height: auto; min-height: 140px; }
}

.status-light.warn { background: var(--yellow); box-shadow: 0 0 0 4px rgba(246,196,49,.22); }
.presence-banner { margin: 16px 28px 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--yellow) 22%, var(--card)); border: 2px solid var(--yellow); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .presence-banner { margin: 14px 14px 0; } }

/* Reactions: five recent + a picker with more */
.emoji-bar { grid-template-columns: repeat(6, 1fr); }
.emoji-bar .emoji-more { font-size: 1.2rem; font-weight: 700; color: var(--ink-soft); }
.emoji-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 0 0 8px; padding: 8px; border-radius: 14px; background: var(--paper); max-height: 180px; overflow-y: auto; animation: pop .15s ease-out; }
.emoji-picker button { height: 38px; border: 0; border-radius: 10px; background: none; font-size: 1.3rem; }
.emoji-picker button:hover { background: var(--card); transform: scale(1.1); }

/* Leaderboard rows open the player's page */
.leaderboard-row { cursor: pointer; transition: background .15s; }
.leaderboard-row:hover, .leaderboard-row:focus-visible { background: color-mix(in srgb, var(--blue-light) 10%, transparent); }

/* Player page */
.profile-modal { width: min(860px, calc(100% - 28px)); }
.profile-modal h2 { margin-bottom: 4px; }
.profile-sub { margin: 0 0 16px; color: var(--muted); }
.profile-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
.stat-tile { padding: 12px; border-radius: 14px; background: var(--paper); }
.stat-tile strong { display: block; font: 700 1.25rem/1.2 var(--display); overflow-wrap: anywhere; }
.stat-tile span { color: var(--muted); font-size: .78rem; }
.profile-filter { display: flex; gap: 6px; margin-bottom: 12px; }
.profile-filter button { padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px; background: none; font-weight: 600; font-size: .88rem; }
.profile-filter button.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.history-card { padding: 12px; border-radius: 16px; background: var(--paper); border-left: 5px solid var(--muted); }
.history-card.result-W { border-left-color: var(--green); }
.history-card.result-L { border-left-color: var(--red); }
.history-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.history-badge { padding: 2px 9px; border-radius: 999px; font-size: .75rem; color: #fff; background: var(--muted); }
.result-W .history-badge { background: var(--green); }
.result-L .history-badge { background: var(--red); }
.history-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .92rem; }
.history-head time { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.history-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 6px; border-radius: 10px; background: var(--blue); }
.history-board i { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--hole); }
.history-board i.r { background: var(--red); }
.history-board i.y { background: var(--yellow); }
.history-board i.dim { filter: saturate(.45) brightness(.85); }
.history-board i.win::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #3ee383; }
.history-board i.last { box-shadow: 0 0 0 2px #fff inset; }
.history-meta { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--muted); font-size: .78rem; }
.history-colour { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.history-colour.r { background: var(--red); }
.history-colour.y { background: var(--yellow); }
.more-button { display: flex; margin: 16px auto 0; min-height: 42px; }
.danger-zone { margin-top: 24px; padding: 16px 18px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--red) 40%, var(--line)); }
.danger-zone h3 { margin: 0 0 4px; font: 700 1.05rem var(--display); }
.danger-zone p { margin: 0 0 12px; color: var(--ink-soft); font-size: .88rem; }
.danger-button { padding: 10px 18px; border: 2px solid var(--red); border-radius: 999px; background: none; color: var(--red); font-weight: 700; }
.danger-button:hover, .danger-button.solid { background: var(--red); color: #fff; }
.danger-button.solid { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; }
.delete-modal { width: min(420px, calc(100% - 28px)); }
.delete-modal p { color: var(--ink-soft); }
.privacy-list { margin: 0 0 20px; padding-left: 18px; display: grid; gap: 10px; color: var(--ink-soft); }
.privacy-list b { color: var(--ink); }
footer .text-button { padding: 0; font-size: .85rem; }
footer .text-button:hover { background: none; text-decoration: underline; }
@media (max-width: 760px) {
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .history-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ---------- House of Turns ---------- */
.all-games { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.signed-in-as { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--green) 12%, var(--card)); }
.signed-in-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent); }
.signed-in-as small { display: block; color: var(--muted); font-size: .8rem; }
.signed-in-as b { font-size: 1.1rem; }
.signed-in-as .text-button { font-size: .85rem; }