/* Swoop. "Riso night": cream keycap tiles on a riso-blue board, a fluorescent pink ink ribbon with a
   blue misregistered shadow. Light theme is the same print on cream stock.
   10/09 redesign kept: ONE raised keycap per screen (tiles, the board and the pink primary keep their
   lip; cards, secondary buttons, chips, tabs and switches are flat) and no paper grain.
   10/09 evening (Cooper: the redesign "took life out of Swoop"): the pre-redesign character is back
   from .backup/pre-redesign-2026-10-09.tgz: Duel blue and the daily sun on home (flat), the heavy
   Inter type with letterspaced capital labels, the old corners, the tilted rank stamp, the old verdict
   colours and motion; and the halftone dots in the page background (back an hour earlier). */

/* Inter, self-hosted (variable wght 100-900 + opsz). One family everywhere, picked for legibility. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ----------
   The rules from before the redesign carry their own sizes and corners again (10/09 evening). These
   tokens size only what the redesign added (the first board, the daily screen's streak and week, the
   asks, the Settings list, delete account), matched to the old type and corners: hero 68 (the end
   screen score), score 46 (the round score), title 28, head 22, body 16, label 15, caption 13;
   corners 12 chips, 18 buttons and rows, 24 cards, 28 sheets. */
:root {
  --t-hero: 68px;
  --t-score: 46px;
  --t-title: 28px;
  --t-head: 22px;
  --t-body: 16px;
  --t-label: 15px;
  --t-cap: 13px;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;
  --r-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --bg: #141218; /* also inline in index.html <head> (the page colour before this file arrives) */
  --bg2: #1e1b24; /* surface: cards, rows, sheets */
  --bg3: #29252f; /* raised: secondary buttons, chips, the selected half of a switch */
  --line: rgba(246, 239, 226, 0.09);
  --line2: rgba(246, 239, 226, 0.18); /* inputs and outlines that must read as a control */
  --text: #f6efe2;
  --muted: #aaa3b5;
  --tile: #f6efe2;
  --lip: #cdbfa3;
  --ink: #1a1720;
  /* 11/10 UI review: the text on a tile-coloured chip and the light text on an ink chip. Classic and the cream-tile
     themes keep ink on tile; the dark-key themes (Neon, Synthwave, Terminal, Lava, Frost, Blueprint) swap in their
     glyph colour below, where a selected tab, a found word and the +1 tag were dark on dark */
  --on-tile: var(--ink); --on-ink: var(--tile);
  --panel: #2440c4;
  --panel-lip: #172a8a;
  --pink: #ff4fa3;
  --pink-lip: #c42f78;
  --pink-ink: #ff6fb5; /* pink TEXT: lighter on dark, darker in light mode */
  --blue: #3d6bff;
  --blue-lip: #2445c2;
  --blue-btn: #3358f0;
  --mint: #2fe0a0;
  --mint-lip: #15a26f;
  --sun: #ffd23f;
  --sun-lip: #d3a312;
  --sun-ink: #ffd23f; /* sun TEXT (deep gold in light mode) */
  --orange: #ff8a3d;
  --violet: #a98bff;
  --red: #ff5f57;
  --red-lip: #c13a33;
  --red-ink: #ff8a84;
  --sel: #ffd7ea;
  --sel-lip: #e8a5c6;
  --shadow: rgba(0, 0, 0, 0.38);
  --scrim: rgba(8, 6, 12, 0.6);
  --font-d: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-u: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
/* light: Settings > Color mode picks it (html[data-theme]), or "System" follows the phone */
:root[data-theme='light'] {
  --bg: #f3ecdf;
  --bg2: #fbf6ec;
  --bg3: #efe6d5;
  --line: rgba(27, 24, 34, 0.1);
  --line2: rgba(27, 24, 34, 0.2);
  --text: #1b1822;
  --muted: #5f5868;
  --tile: #fffdf8;
  --lip: #dccfb6;
  --panel: #2f55e8;
  --panel-lip: #1d38a8;
  --pink: #f0368f;
  --pink-lip: #b51f66;
  --pink-ink: #b8146a;
  --blue: #2f55e8;
  --blue-lip: #1d38a8;
  --blue-btn: #2f55e8;
  --mint: #1fcf8f;
  --mint-lip: #0f9563;
  --sun: #ffcc2e;
  --sun-lip: #cf9c00;
  --sun-ink: #7d5a00;
  --orange: #f2701d;
  --violet: #7d58f0;
  --red-ink: #b3261e;
  --shadow: rgba(60, 40, 10, 0.18);
  --scrim: rgba(27, 20, 10, 0.4);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #f3ecdf;
    --bg2: #fbf6ec;
    --bg3: #efe6d5;
    --line: rgba(27, 24, 34, 0.1);
    --line2: rgba(27, 24, 34, 0.2);
    --text: #1b1822;
    --muted: #5f5868;
    --tile: #fffdf8;
    --lip: #dccfb6;
    --panel: #2f55e8;
    --panel-lip: #1d38a8;
    --pink: #f0368f;
    --pink-lip: #b51f66;
    --pink-ink: #b8146a;
    --blue: #2f55e8;
    --blue-lip: #1d38a8;
    --blue-btn: #2f55e8;
    --mint: #1fcf8f;
    --mint-lip: #0f9563;
    --sun: #ffcc2e;
    --sun-lip: #cf9c00;
    --sun-ink: #7d5a00;
    --orange: #f2701d; /* audit N13: players 5-6 looked different under Light and System */
    --violet: #7d58f0;
    --red-ink: #b3261e;
    --shadow: rgba(60, 40, 10, 0.18);
    --scrim: rgba(27, 20, 10, 0.4);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; background: var(--bg); overscroll-behavior: none; }
body {
  margin: 0;
  min-height: 100%;
  background: transparent; /* html paints --bg, so the .paper layer can sit between them */
  color: var(--text);
  font-family: var(--font-u);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
/* 10/10: margin / padding / border zeroed: #copyLive is a <p>, and its 16px margin pushed it under #app, so every home
   scrolled 17px on a 390x844 phone */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
[tabindex='-1']:focus { outline: none; } /* a screen title or sheet heading that took focus (S12) */
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* paper: two halftone ink blooms on a fixed layer behind every screen (pink top right, blue bottom
   left), the same dots, colours and strength as before the redesign. Page background only: cards,
   buttons, sheets and the board paint over it. Painted once. 10/09 evening (Cooper: "i like the dots"). */
.paper { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.paper::before, .paper::after {
  content: ''; position: absolute; border-radius: 50%; opacity: 0.28;
  background: radial-gradient(circle, currentColor 0 1.9px, transparent 2.2px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
}
.paper::before { width: 440px; height: 440px; top: -180px; right: -160px; color: var(--pink); }
.paper::after { width: 380px; height: 380px; bottom: -160px; left: -160px; color: var(--blue); }
[data-theme='light'] .paper::before, [data-theme='light'] .paper::after { opacity: 0.2; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .paper::before, :root:not([data-theme='dark']) .paper::after { opacity: 0.2; } }
/* the Home Screen app on iOS 26 sized one status bar short (see "Home Screen app" below): the layer reaches the real bottom */
:root[data-fit] .paper { bottom: auto; height: var(--vh); }

#app { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }
.screen { min-height: 100vh; min-height: 100dvh; padding: calc(var(--safe-t) + 12px) 20px calc(var(--safe-b) + 24px); }

/* Home Screen app (10/10, Cooper 12:06pm from the installed app: "bottom maybe cut off and then the top is like blurry"). Two
   iOS 26 behaviours of a black-translucent, viewport-fit=cover web app:
   - the top: iOS blurs the page under the status bar (its Liquid Glass edge effect, fading ~40 pt into the page, so the
     player chip and the tool buttons looked soft) unless the first fixed box 4 px under the top edge paints one plain
     colour; the dots layer is pointer-events: none, so iOS looked past it. .edge-top is that box: the page colour under
     the status bar only, under the sheets (their scrim still dims it).
   - the bottom: iOS sizes the page one status bar short (innerHeight, 100dvh and fixed inset: 0 end 62 pt above the
     screen's bottom on a 402x874 iPhone; WebKit bug 301108), so home ended at 812 with an empty band under "Have a code?"
     and the dots cut off. The script in index.html sees exactly that (short by the status bar) and sets --vh (the
     screen's height) and --vh-gap on html[data-fit]; these rules use it. Elsewhere nothing changes. */
.edge-top { display: none; }
:root[data-app] .edge-top { display: block; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-t); z-index: 35; background: var(--bg); }
:root[data-fit] #app, :root[data-fit] .screen { min-height: var(--vh); }
:root[data-fit] #game { height: var(--vh); }
:root[data-fit] .sheet { bottom: auto; height: var(--vh); }
:root[data-fit] .sheet.tall .sheet-card { max-height: calc(var(--vh) - var(--safe-t) - 28px); }
:root[data-fit] .settings-card { max-height: calc(var(--vh) - var(--safe-t) - 16px); }
:root[data-fit] .install-bar { bottom: calc(var(--safe-b) + 14px - var(--vh-gap)); }
:root[data-fit] .toast { bottom: calc(var(--safe-b) + 22px - var(--vh-gap)); }

/* labels and meta lines: sentence case, no letterspacing (codes keep theirs, .code) */
.eyebrow, .label { display: block; margin: 0; font: 700 12px/1 var(--font-u); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sub { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.fine { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 24px; padding: 16px; }
.code { font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a game code you tap to copy (10/10, Cooper: "one-click copy for the code"): the code and a copy icon on a
   chip; after a tap the icon is a tick and "Copied" sits over the chip for a moment (app.js copyCode) */
.code-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  min-height: 38px; margin: 0; padding: 4px 9px 4px 12px; border: 1px dashed var(--line2); border-radius: 12px;
  background: var(--bg3); color: var(--text); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  transition: transform 0.12s var(--ease), background-color 0.2s, border-color 0.2s;
}
.code-btn:active { transform: scale(0.95); }
.code-btn .code { color: var(--text); }
.code-btn::after {
  content: ''; flex: none; width: 16px; height: 16px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='2.6'/%3E%3Cpath d='M15.5 8.5V6.1a2.6 2.6 0 0 0-2.6-2.6H6.1a2.6 2.6 0 0 0-2.6 2.6v6.8a2.6 2.6 0 0 0 2.6 2.6h2.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='2.6'/%3E%3Cpath d='M15.5 8.5V6.1a2.6 2.6 0 0 0-2.6-2.6H6.1a2.6 2.6 0 0 0-2.6 2.6v6.8a2.6 2.6 0 0 0 2.6 2.6h2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.code-btn.copied { border-style: solid; border-color: var(--mint-lip); background: color-mix(in srgb, var(--mint) 16%, var(--bg3)); }
.code-btn.copied::after { background: var(--mint-lip); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }
.cb-done {
  position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 2; transform: translateX(-50%);
  padding: 6px 10px; border-radius: 9px; background: var(--text); color: var(--bg);
  font: 800 13px/1 var(--font-u); letter-spacing: 0; white-space: nowrap; pointer-events: none;
  animation: cbIn 0.22s var(--ease) both;
}
@keyframes cbIn { from { opacity: 0; transform: translate(-50%, 4px); } }
.empty { margin: 0; padding: 24px 8px; text-align: center; color: var(--muted); }
.empty.small { padding: 8px 0; text-align: left; font-size: 14px; }

/* ---------- buttons ----------
   .btn = flat secondary (raised fill, 1 px line). .btn-pink = THE keycap: the one primary step on a
   screen, with its lip. .btn-blue and .btn-ghost are the same flat secondary (kept as names). */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 13px 18px; border: 0;
  font: 800 17px/1.1 var(--font-u); border-radius: 18px;
  background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, filter 0.15s;
  user-select: none; -webkit-user-select: none;
}
.btn:active:not(:disabled) { transform: scale(0.98); transition-duration: 0.09s; }
.btn:disabled { filter: saturate(0.4) brightness(0.9); cursor: progress; }
.btn-blue, .btn-ghost { background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-pink { background: var(--pink); color: #1c0812; box-shadow: 0 6px 0 var(--pink-lip); }
.btn-pink:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-lip); }
.btn-red, .btn-danger { background: var(--red); color: #1f0503; box-shadow: none; }
.btn-sm { min-height: 44px; padding: 9px 14px; font-size: 14px; border-radius: 13px; }
.btn-wide { width: 100%; }
.btn-xl {
  width: 100%; min-height: 0;
  flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px 56px 20px 24px;
  border-radius: 22px; text-align: left;
}
.btn-xl::after {
  content: ''; position: absolute; right: 26px; top: 50%;
  width: 11px; height: 11px; border-right: 3px solid currentColor; border-top: 3px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}
.b-main { font: 800 27px/1 var(--font-d); letter-spacing: -0.01em; }
.b-sub { font: 650 14px/1.2 var(--font-u); }
.linkbtn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 8px 4px; white-space: nowrap;
  font: 700 14px var(--font-u); color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn.inline { min-height: 0; display: inline; padding: 0 2px; font-size: inherit; }
.linkbtn.armed { color: var(--red-ink) !important; }
/* icon buttons: 44 x 44, no ring (24 pt drawings, 2 pt round strokes) */
.iconbtn {
  position: relative; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg2); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--text);
}
.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:active { background: var(--bg3); }
.iconbtn.ghost { background: none; }
.iconbtn.star[aria-pressed='true'] svg { fill: var(--sun); stroke: var(--sun-lip); }
.iconbtn.star.sm svg { width: 22px; height: 22px; }
.iconbtn.fr-x svg { width: 18px; height: 18px; }

/* avatars (avatar.js) and title badges */
svg.av { display: block; width: 100%; height: 100%; overflow: visible; }
.badge {
  display: inline-block; padding: 3px 10px 4px; border-radius: 999px; white-space: nowrap;
  font: 800 13px/1.1 var(--font-u); background: var(--bc); color: var(--bt);
}
.badge.sm { padding: 1px 8px 2px; font-size: 11px; }
.badge-none { color: var(--muted); font: 700 13px var(--font-u); }

/* ---------- loading ---------- */
#loading { display: grid; place-items: center; }
.loader { display: flex; gap: 10px; }
.loader i { width: 26px; height: 26px; border-radius: 7px; background: var(--tile); box-shadow: inset 0 -4px 0 var(--lip); animation: hop 0.9s ease-in-out infinite; }
.loader i:nth-child(2) { animation-delay: 0.1s; background: var(--pink); box-shadow: inset 0 -4px 0 var(--pink-lip); }
.loader i:nth-child(3) { animation-delay: 0.2s; }
.loader i:nth-child(4) { animation-delay: 0.3s; background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-lip); }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } }

/* ---------- home: your player and three tools, the wordmark, Play, Duel, Daily ---------- */
#home { display: flex; flex-direction: column; }
.home-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.me-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 72%;
  padding: 4px 14px 4px 4px; border: 0; border-radius: 999px;
  background: var(--bg2); box-shadow: inset 0 0 0 1.5px var(--line); text-align: left;
}
.me-av { flex: none; width: 40px; height: 40px; }
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-text b { font: 800 15px/1.15 var(--font-u); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { font: 700 12px/1.2 var(--font-u); color: var(--pink-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-btns { display: inline-flex; gap: 10px; flex: none; }
/* signed in, four tools: 40 px buttons (46 px tap areas that meet in the 6 px gaps) keep room for the chip */
.home-tools:has(#friendsTool:not([hidden])) { gap: 10px; }
.tool-btns:has(#friendsTool:not([hidden])) { gap: 6px; }
.tool-btns:has(#friendsTool:not([hidden])) .iconbtn { position: relative; width: 40px; height: 40px; }
.tool-btns:has(#friendsTool:not([hidden])) .iconbtn::before { content: ''; position: absolute; inset: -3px; }
.tool-btns:has(#friendsTool:not([hidden])) .iconbtn svg { width: 21px; height: 21px; }
.home-tools:has(#friendsTool:not([hidden])) .me-chip { gap: 8px; padding-right: 11px; }
.tool-friends { position: relative; }
.tool-badge {
  position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  font: 900 12px/1 var(--font-u); border-radius: 10px; display: grid; place-items: center;
  background: var(--pink); color: #1c0812; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg);
}
.tool-badge.pop { animation: popIn 0.5s var(--ease) both; }
/* 10/09 night: the redesign's positions again (Cooper picked them). 10/10 (Cooper 12:01am "raise the play and
   stuff higher"): Play, Duel and the daily sit right under the wordmark; the free space is split evenly above the
   wordmark and under the daily, so the wordmark stays where it was and "Have a code?" stays at the bottom.
   10/10 9:45am (Cooper: now the buttons moved up, the logo should sit higher too): a quarter of the free space goes
   above the wordmark and three quarters under the daily (grow 1 : 3), so the wordmark and the buttons rise as one */
.home-head { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 24px 0 28px; }
.hero {
  position: relative; isolation: isolate; display: block;
  width: min(330px, 86vw); aspect-ratio: 330 / 124; margin: 0 auto;
  background: none; border: 0; padding: 0;
}
/* tiles are not stacking contexts, so face (z1), ribbon (z2) and letter (z3) interleave */
.htile {
  position: absolute; width: 19%; height: 50.56%;
  left: calc((33 + var(--k) * 66) / 330 * 100% - 9.5%);
  top: 34.4%;
}
.htile:nth-of-type(even) { top: 11.8%; }
.htile::before, .htile::after { position: absolute; inset: 0; border-radius: 24%; }
.htile::before { content: ''; z-index: 1; background: var(--tile); box-shadow: inset 0 -6px 0 var(--lip), 0 5px 0 var(--shadow); }
.htile::after {
  content: attr(data-l); z-index: 3; display: grid; place-items: center; padding-bottom: 8%;
  font: 800 clamp(30px, 10vw, 42px)/1 var(--font-d); color: var(--ink);
}
.hero-trail { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 19; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ht-ink { stroke: var(--pink); opacity: 0.92; }
.ht-shadow { stroke: var(--blue); opacity: 0.95; }
/* the trail draws once per launch (and on a tap): nothing on home moves by itself after that */
.hero.go .hero-trail path { animation: draw 1.05s cubic-bezier(.5, 0, .3, 1) 0.15s both; }
.hero.go .htile::before { animation: hFace 0.55s var(--ease) calc(var(--k) * 190ms + 180ms) both; }
.hero.go .htile::after { animation: hGlyph 0.55s var(--ease) calc(var(--k) * 190ms + 180ms) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hFace { 45% { transform: translateY(-9px); background: var(--sel); } }
@keyframes hGlyph { 45% { transform: translateY(-9px); } }
.tagline { margin: 20px 0 0; font: 800 22px/1.1 var(--font-d); letter-spacing: -0.01em; }
.tagline em { font-style: normal; color: var(--pink); }

.home-body { flex: 3 0 auto; display: flex; flex-direction: column; gap: 12px; }
#dailyCard { margin-bottom: auto; }
.cta { display: flex; flex-direction: column; gap: 12px; }
/* Duel, the daily, your waiting duel: rows with an icon tile, the redesign's layout. Duel and the
   daily keep this build's colours (10/09 night, Cooper: the redesign's positions, "This build"'s colours): Duel a
   blue row, the daily a sun row, both flat; Play stays the one keycap with a lip. */
.row-card {
  position: relative; width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 14px; align-items: center;
  min-height: 80px; padding: 14px 16px; border-radius: 22px; background: var(--bg2); border: 1px solid var(--line);
  color: var(--text); text-align: left; font: inherit; transition: transform 0.16s ease-out;
}
.row-card:active:not(:disabled) { transform: scale(0.99); transition-duration: 0.09s; }
.row-card:disabled { cursor: progress; }
.row-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.row-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.row-ico.duel { background: var(--blue-btn); color: #fff; }
.row-ico.sun { background: var(--sun); color: var(--ink); }
.row-ico.sun svg { fill: currentColor; stroke: none; }
.row-ico.pink { background: var(--pink); color: #1c0812; }
.row-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row-t .b-sub, .row-t .chal-line { font: 650 14px/1.25 var(--font-u); color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.row-t .b-sub b { color: var(--text); font-weight: 800; }
.row-t .chal-line { font-weight: 700; }
/* your waiting duel is the quieter row: a smaller title */
.wait-card .b-main { font: 800 19px/1.15 var(--font-u); letter-spacing: 0; }
.chev { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* the two colour rows: the fill, white or ink text, the icon on a darker tile of the same colour */
#playBlind.row-card { background: var(--blue-btn); border-color: transparent; color: #fff; }
#playBlind .row-ico.duel { background: var(--blue-lip); }
#playBlind .b-sub { color: rgba(255, 255, 255, 0.92); }
#playBlind .chev { stroke: rgba(255, 255, 255, 0.9); }
.daily .row-card { background: var(--sun); border-color: transparent; color: var(--ink); }
.daily .row-ico.sun { background: var(--ink); color: var(--sun); }
.daily .row-t .b-sub { color: rgba(26, 23, 32, 0.74); }
.daily .row-t .b-sub b { color: var(--ink); }
.daily .chev { stroke: rgba(26, 23, 32, 0.7); }
/* the streak keeps its colour: an ink chip with sun type by the title, like the old streak chip */
.row-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.day-streak { padding: 5px 9px 5px; border-radius: 999px; background: var(--ink); color: var(--sun); font: 700 13px/1 var(--font-u); white-space: nowrap; }
.day-streak b { font-weight: 900; }
/* N14: offline, the Duel and the daily say so before the tap */
#playBlind.off, .daily.off .row-card { filter: saturate(0.2); opacity: 0.6; }
.home-links { margin: -2px 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 10px; color: var(--muted); }
.home-links .linkbtn { font-size: 15px; }
.favs-link { display: inline-flex; align-items: center; gap: 10px; }
.chal-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chal-chev { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* S5: a Duel you made and have not played yet */
.wait-card { padding: 0; grid-template-columns: minmax(0, 1fr) 44px; gap: 0; padding-right: 8px; border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.wait-open { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 14px; align-items: center; min-height: 78px; padding: 13px 4px 13px 16px;
  border: 0; background: none; color: var(--text); text-align: left; font: inherit; border-radius: 22px; }

/* join a game: code or link, with a paste button inside the field */
.joinbox { padding: 16px; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 8px; }
.join-field { position: relative; min-width: 0; }
.join-field input {
  width: 100%; height: 52px; padding: 0 92px 0 16px;
  font: 800 17px var(--font-u); border-radius: 14px;
  background: var(--bg); border: 1.5px solid var(--line2); outline: none; letter-spacing: 0.04em; transition: border-color 0.15s;
}
.join-field input::placeholder { font-weight: 650; letter-spacing: 0; color: var(--muted); opacity: 0.85; }
.join-field input:focus { border-color: var(--pink); }
.join-field input[aria-invalid='true'] { border-color: var(--red); }
.paste {
  position: absolute; right: 6px; top: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px; border: 0;
  font: 800 13px var(--font-u); border-radius: 10px; background: var(--bg3); color: var(--text);
}
.paste::before { content: ''; position: absolute; inset: -6px -3px; }
.paste svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-row .btn { height: 52px; padding: 0 20px; border-radius: 14px; }
.join-msg { margin: 8px 4px 0; font: 700 13.5px/1.3 var(--font-u); color: var(--red-ink); }
.join-msg:empty { display: none; }
.namefield { display: flex; flex-direction: column; gap: 6px; }
.namefield > span { font: 700 12px var(--font-u); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-left: 4px; }
.namefield input {
  width: 100%;
  font: 700 18px var(--font-u); border-radius: 16px; background: var(--bg2); padding: 14px 16px; border: 1.5px solid var(--line2); outline: none; transition: border-color 0.15s;
}
.namefield input:focus { border-color: var(--pink); }
.namefield input::placeholder { color: var(--muted); opacity: 0.75; }
.namefield input[aria-invalid='true'] { border-color: var(--red); }

/* favorite boards (History > Starred) and the mini boards in History rows */
.favs { padding: 0; }
.fav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fav { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg2); }
.fav-board { --mb: 58px; width: var(--mb); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 4px; border-radius: 11px; background: var(--panel); }
.fav-board.big { grid-template-columns: repeat(5, 1fr); gap: 1.5px; padding: 3px; }
.fav-board.big i { font-size: calc(var(--mb) * 0.13); border-radius: 2px; }
.fav-board i { aspect-ratio: 1; display: grid; place-items: center; font: 800 calc(var(--mb) * 0.155)/1 var(--font-d); border-radius: 3px; background: var(--tile); color: var(--on-tile); font-style: normal; }
.fav-board.blank i { background: repeating-linear-gradient(135deg, var(--tile) 0 3px, var(--sel) 3px 6px); }
.fav-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fav-meta b { font: 800 16px var(--font-u); }
.fav-meta b span { color: var(--muted); font-weight: 700; font-size: 14px; }
.fav-meta small { font: 650 12px var(--font-u); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Replay, Share and Send fit one row on a 375 px phone (10/08) */
.fav-btns .btn-sm { padding: 8px 10px; }
.fav-more { text-align: center; padding-top: 4px; }

/* segmented switch (Settings: points, board position, color mode; History tabs) */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg); }
.seg button {
  position: relative; min-height: 38px; padding: 7px 14px; border: 0;
  font: 800 14px var(--font-u); border-radius: 9px; background: none; color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg button::before { content: ''; position: absolute; inset: -3px 0; }
.seg button[aria-checked='true'], .seg button[aria-selected='true'] { background: var(--tile); color: var(--on-tile); box-shadow: 0 1px 3px var(--shadow); }
table.pts { border-collapse: collapse; margin-top: 8px; width: 100%; font-size: 13px; }
table.pts th, table.pts td { text-align: center; padding: 5px 2px; font-variant-numeric: tabular-nums; }
table.pts th { font: 800 16px var(--font-d); color: var(--text); }
table.pts td { font-weight: 700; color: var(--text); border-top: 1px solid var(--line); }
.pb-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats div { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 12px 10px; text-align: center; min-width: 0; }
.stats b { display: block; font: 800 22px/1.1 var(--font-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.stats b.w { font-size: 17px; line-height: 1.3; }
.stats span { font: 650 12px var(--font-u); color: var(--muted); }

.rules summary { min-height: 52px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font: 800 16px var(--font-u); }
.rules summary::-webkit-details-marker { display: none; }
.rules summary::after { content: '+'; font: 800 24px/1 var(--font-d); color: var(--pink); transition: transform 0.2s; }
.rules[open] summary::after { transform: rotate(45deg); }
.rules ol { margin: 0 0 14px; padding-left: 20px; font-size: 15px; color: var(--muted); }
.rules li { margin: 0 0 8px; }
.rules li b { color: var(--text); }

/* ---------- invite: a duel link, a Duel's send screen, today's daily ---------- */
#invite { display: flex; flex-direction: column; gap: 12px; }
.res-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 52px; }
.res-title { margin: 0; display: flex; justify-content: center; align-items: baseline; min-width: 0; text-align: center; font: 800 22px var(--font-d); }
.res-mode { margin-left: 0.35em; font: 700 15px var(--font-u); color: var(--muted); white-space: nowrap; }
.res-mode:empty { display: none; }
.top-spacer { width: 44px; height: 44px; }
.hist-count { justify-self: end; text-align: right; font: 700 13px var(--font-u); color: var(--muted); white-space: nowrap; }
.invite { flex: 1; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 0; background: none; border: 0; }
.invite h2 { margin: 4px 0 0; font: 800 32px/1.08 var(--font-d); }
.inv-av { width: 96px; height: 96px; margin-bottom: 10px; transform: rotate(-5deg); filter: drop-shadow(5px 6px 0 var(--blue)); }
.inv-facts { margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; font: 700 14px/1.3 var(--font-u); color: var(--muted); }
.inv-facts b { color: var(--text); }
.inv-facts .blind-tag { margin-right: 2px; }
.inv-facts .dot-sep { margin-right: 6px; }
.inv-facts #inviteCode { flex-basis: 100%; } /* the code on its own line, never a wrapped "· Code" */
.inv-facts .code-btn { margin-left: 4px; }
.inv-clock { margin: 10px 0 0; padding: 10px 14px;
  font: 800 15px/1.3 var(--font-u); border-radius: 14px; background: color-mix(in srgb, var(--sun) 24%, transparent); color: var(--text); font-variant-numeric: tabular-nums;
}
.app-hint { margin: 12px 0 0; padding: 10px 14px; font-size: 14px; line-height: 1.35; border-radius: 14px; background: var(--bg3); color: var(--muted); }
.app-hint b { color: var(--text); }
.app-hint .code-btn { min-height: 30px; margin: 2px 0; padding: 2px 8px 2px 10px; }
.backs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 176px; margin: 18px 0 20px; padding: 10px; background: var(--panel); border-radius: 18px; transform: rotate(3deg); box-shadow: 0 7px 0 var(--panel-lip); }
.backs i { aspect-ratio: 1; border-radius: 9px; background: repeating-linear-gradient(135deg, var(--tile) 0 5px, var(--sel) 5px 10px); box-shadow: inset 0 -3px 0 var(--lip); }
.invite .namefield { width: 100%; text-align: left; margin: 4px 0 12px; }
.invite .btn-xl { align-items: center; padding-right: 24px; text-align: center; }
.invite .btn-xl::after { display: none; }
.invite .btn-xl .b-sub { text-align: center; }
.invite-play { width: 100%; margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mini-rank { list-style: none; width: 100%; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.mini-rank li { display: grid; grid-template-columns: 18px 32px 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 8px 14px 8px 12px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--line); }
.mini-av { width: 32px; height: 32px; }
.mini-rank .r { font: 800 14px var(--font-u); color: var(--muted); text-align: center; }
.mini-rank .nm { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-rank b { font: 800 18px var(--font-d); font-variant-numeric: tabular-nums; }
.mini-rank:not([hidden]) + .backs { width: 128px; gap: 5px; padding: 7px; margin: 14px 0 16px; }
.mini-rank li.solo-first { grid-template-columns: 32px 1fr auto; }
.invite-links { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; }
.playing-as { margin: 2px 0 6px; font: 650 15px var(--font-u); color: var(--muted); }
.playing-as b { color: var(--text); font-weight: 800; }
.playing-as .linkbtn { position: relative; margin-left: 8px; font-size: 15px; }
.playing-as .linkbtn::before { content: ''; position: absolute; inset: -12px -8px; }
#invitePlay.needs-name { filter: saturate(0.3); opacity: 0.6; }
.sendbox { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
/* the send screen's two choices for this duel (2026-11-09): board size and point canceling, before it is sent */
.send-opts { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; text-align: left; }
.so-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.so-label { font: 800 14px/1.2 var(--font-u); color: var(--text); white-space: nowrap; }
.send-opts .seg button { min-width: 64px; }
.so-note { margin: 0; font: 600 12.5px/1.3 var(--font-u); color: var(--muted); }
.send-opts.busy .seg { opacity: 0.55; pointer-events: none; }
.inv-cancel { color: var(--text); }
.send-url { margin: 0; padding: 10px 12px; font: 650 13px/1.3 var(--font-u); border-radius: 12px; background: var(--bg3); color: var(--muted); word-break: break-all; user-select: all; -webkit-user-select: all; }
#invitePlay.locked { filter: saturate(0.15) brightness(0.85); opacity: 0.55; cursor: not-allowed; box-shadow: none; }
#invitePlay.locked .b-main::before {
  content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.35em; vertical-align: -0.04em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='12' rx='2.5'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='12' rx='2.5'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#invite.is-send .backs, #invite.is-send #inviteHint { display: none; } /* keeps the locked Play in view on a phone */
.send-lock { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; font: 700 13px var(--font-u); color: var(--muted); }
.send-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
#invite.is-away #inviteSub { color: var(--text); font-weight: 700; }
.blind-tag, .blindpill, .dailypill {
  display: inline-block; flex: none; margin: 0; padding: 4px 10px; border-radius: 999px;
  font: 900 11px/1 var(--font-u); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun); background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--sun);
}
[data-theme='light'] .blind-tag, [data-theme='light'] .blindpill { background: var(--text); color: var(--sun); }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .blind-tag, :root:not([data-theme='dark']) .blindpill { background: var(--text); color: var(--sun); } }
.dailypill { color: var(--ink); background: var(--sun); box-shadow: none; }
.blindpill, .dailypill { margin: 0 0 10px; }
.first-tag, .tag-slot { display: inline-block; margin-left: 6px; padding: 1px 6px 2px; font: 700 11.5px/1.2 var(--font-u); letter-spacing: 0.02em; border-radius: 6px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line2); white-space: nowrap; vertical-align: 2px; }
.side .first-tag, .side .tag-slot { margin: 0; align-self: flex-start; }
.tag-slot { visibility: hidden; }
.side.r .first-tag { align-self: flex-end; }

/* the daily screen (the invite in daily mode): the streak, the week, the next milestone */
.dstreak { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 2px 0 6px; }
.ds-big { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ds-big svg { width: 44px; height: 44px; fill: var(--sun); }
.ds-big b { font: 800 68px/1 var(--font-d); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ds-word { margin: -4px 0 0; font: 700 12px/1 var(--font-u); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.week { width: 100%; padding: 16px 12px 14px; }
.week-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-row li { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 var(--t-cap) var(--font-u); color: var(--muted); }
.wd { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg3); color: var(--ink); }
.wd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wd.done { background: var(--sun); }
.wd.rest { background: none; outline: 2px dashed var(--sun); outline-offset: -2px; color: var(--sun-ink); }
.wd.today { background: none; box-shadow: inset 0 0 0 2.5px var(--pink); color: var(--pink-ink); font: 800 var(--t-cap) var(--font-u); }
.wd.today.done { background: var(--sun); box-shadow: none; color: var(--ink); }
.week-note { margin: 12px 4px 0; text-align: center; font: 600 var(--t-cap)/1.4 var(--font-u); color: var(--muted); }
.goal { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 14px; align-items: center; padding: 14px 14px 14px 16px; text-align: left; }
.goal b { display: block; font: 800 var(--t-body) var(--font-u); }
.goal-bar { height: 8px; margin-top: 10px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.goal-bar i { display: block; height: 100%; width: calc(var(--p) * 1%); min-width: 6px; border-radius: 999px; background: var(--sun); }
.goal-ico { width: 48px; height: 48px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--bg3); color: var(--sun-ink); }
.goal-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invite.is-daily .backs { width: 156px; margin: 10px 0 8px; }
.invite-daily { margin: 8px 0 4px; font: 700 14px var(--font-u); color: var(--muted); }

/* ---------- the round ---------- */
#game {
  display: flex; flex-direction: column; align-items: center;
  height: 100vh; height: 100dvh; overflow: hidden;
  padding: calc(var(--safe-t) + 8px) 20px calc(var(--safe-b) + 12px);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hud { width: 100%; flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.hud-back { align-self: center; }
.scorebox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scorebox .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scorebox b { font: 800 46px/0.95 var(--font-d); letter-spacing: -0.02em; transform-origin: left center; font-variant-numeric: tabular-nums; }
.scorebox.bump b { animation: bump 0.36s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--mint); } }
.scorebox .count { font: 700 14px var(--font-u); color: var(--muted); }
.timer { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.t-track { fill: none; stroke: var(--bg3); stroke-width: 5; }
.t-ring { fill: none; stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.timer span { position: relative; font: 800 21px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.timer.urgent .t-ring { stroke: var(--red); }
.timer.urgent span { color: var(--red-ink); }

/* found words: ONE strip under the score, newest first, fading out at the right edge */
#found {
  width: calc(100% + 40px); margin: 12px -20px 0; padding: 0 20px; flex: none; height: 40px;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 70%, transparent 96%);
}
#found:empty::before {
  content: 'Swipe across touching letters. Diagonals count.';
  font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.chip {
  flex: none; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 12px;
  font: 800 14px/1 var(--font-u); letter-spacing: 0.04em; border-radius: 11px; background: var(--bg2); border: 1px solid var(--line);
}
.chip i { font-style: normal; font-weight: 700; font-size: 12px; color: var(--muted); }
.chip.long { border-color: color-mix(in srgb, var(--pink) 60%, transparent); }
.chip.long i { color: var(--pink-ink); }
/* a found word lands with the old spring (10/09 night, pre-redesign) */
.chip.pop { animation: chipIn 0.35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes chipIn { from { transform: scale(0.4); opacity: 0; } }

/* Board position (Settings, 10/09): the gaps around the word bubble + board. Middle (the default)
   centres the board in the space under the found-words strip (the bottom gap's base is the bubble's
   row, so the board itself sits in the middle); Lower puts it at the bottom (thumb reach); Higher
   right under the strip. A phone held sideways (S1, below) has the board beside the HUD. */
.g-gap { flex: 1 1 0px; min-height: 0; width: 100%; }
.g-gap.g-bot { flex-basis: 76px; }
html[data-board='low'] .g-gap.g-bot { flex: 0 0 0px; }
html[data-board='high'] .g-gap.g-top { flex: 0 0 12px; }

/* the word you are tracing, right above the board. 10/09 night (Cooper: the redesign's verdict "too much",
   the old one "lit up green"): the pre-redesign bubble and tag again, copied from .backup/pre-redesign-2026-10-09.tgz
   (no check / loop / cross; the words "+3", "got it", "not a word" still say it without colour) */
.preview { position: relative; height: 64px; margin: 0 0 12px; flex: none; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.preview .pv-word, .preview .pv-tag { transition: opacity 0.12s; }
.preview[data-state=''] .pv-word, .preview[data-state=''] .pv-tag { opacity: 0; }
.pv-word {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 30px/1 var(--font-d); letter-spacing: 0.05em;
  padding: 11px 18px 12px; border-radius: 16px;
  background: var(--bg3); color: var(--text);
  box-shadow: 0 4px 0 var(--shadow);
  max-width: 82vw; overflow: hidden; white-space: nowrap;
}
.pv-tag { margin-left: -8px; transform: translateY(-16px) rotate(6deg); font: 800 14px/1 var(--font-u); padding: 6px 9px; border-radius: 10px; background: var(--ink); color: var(--on-ink); }
.preview .pv-tag:empty { display: none; }
.preview[data-state='good'] .pv-word { background: var(--mint); color: var(--ink); box-shadow: 0 4px 0 var(--mint-lip); }
.preview[data-state='dupe'] .pv-word { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-lip); }
.preview[data-state='bad'] .pv-word { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-lip); }
.preview[data-settled='1'] .pv-word { animation: settle 0.5s ease-out 0.25s forwards; }
.preview[data-settled='1'][data-state='good'] .pv-word { animation: rise 0.6s cubic-bezier(.2, .9, .3, 1) forwards; }
.preview.shake .pv-word { animation: shake 0.42s cubic-bezier(.36, .07, .19, .97), settle 0.4s ease-out 0.5s forwards; }
/* the tag goes with its word (audit N1: the "+1" used to hang on alone after the word rose away) */
.preview[data-settled='1'] .pv-tag { animation: tagSettle 0.5s ease-out 0.25s forwards; }
.preview[data-settled='1'][data-state='good'] .pv-tag { animation: tagRise 0.6s cubic-bezier(.2, .9, .3, 1) forwards; }
.preview.shake .pv-tag { animation: tagSettle 0.4s ease-out 0.5s forwards; }
@keyframes tagSettle { to { opacity: 0; } }
@keyframes tagRise { 100% { transform: translateY(-30px) rotate(6deg); opacity: 0; } }
/* 1-2 letters let go (audit N9): a quiet "3+ letters" so the swipe does not just vanish */
.preview[data-state='short'] .pv-word { background: var(--bg2); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
@keyframes shake { 15%, 85% { transform: translateX(-3px); } 30%, 70% { transform: translateX(6px); } 45%, 55% { transform: translateX(-8px); } }
@keyframes settle { to { opacity: 0; transform: scale(0.94); } }
@keyframes rise { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 100% { transform: translateY(-14px) scale(0.98); opacity: 0; } }

.board-wrap { position: relative; flex: none; width: min(100%, 470px, calc(100dvh - 330px)); min-width: 280px; }
@supports not (height: 100dvh) { .board-wrap { width: min(100%, 470px, calc(100vh - 330px)); } }

/* the board (also the replay board in the path sheet) */
.board {
  --gap: 3.2%;
  --pitch: 80px;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--gap);
  padding: 4.6%;
  aspect-ratio: 1; width: 100%;
  background: var(--panel);
  border-radius: 9%;
  box-shadow: 0 9px 0 var(--panel-lip), 0 22px 40px var(--shadow);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.tile { position: relative; aspect-ratio: 1; }
/* Big Swoop (5x5, 2026-11-09): tighter gaps, and the board may take the full width so tiles stay a thumb wide on an SE */
.board.big { --gap: 2.6%; padding: 3.6%; border-radius: 7%; }
#game.big .board-wrap { width: min(100%, 520px, calc(100dvh - 290px)); min-width: min(100%, 320px); }
@supports not (height: 100dvh) { #game.big .board-wrap { width: min(100%, 520px, calc(100vh - 290px)); } }
.face {
  position: absolute; inset: 0; z-index: 1; border-radius: 24%;
  background: var(--tile);
  box-shadow: inset 0 calc(var(--pitch) * -0.075) 0 var(--lip), 0 calc(var(--pitch) * 0.035) 0 rgba(0, 0, 0, 0.22);
  transition: transform 0.09s ease-out, background-color 0.12s ease, box-shadow 0.09s ease-out;
}
.glyph {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; padding-bottom: 8%;
  font: 800 calc(var(--pitch) * 0.5)/1 var(--font-d); color: var(--ink);
  pointer-events: none;
  transition: transform 0.09s ease-out;
}
.trail { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.trail path, .trail line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail-ink { stroke: var(--pink); opacity: 0.9; }
.trail-shadow { stroke: var(--blue); opacity: 0.9; }
.trail-tail { stroke: var(--pink); opacity: 0.45; }
.tile.on .face { background: var(--sel); transform: translateY(calc(var(--pitch) * 0.03)); box-shadow: inset 0 calc(var(--pitch) * -0.045) 0 var(--sel-lip); }
.tile.on .glyph { transform: translateY(calc(var(--pitch) * 0.03)); }
.tile.good .face { background: var(--mint); box-shadow: inset 0 calc(var(--pitch) * -0.04) 0 var(--mint-lip); }
.tile.dupe .face { background: var(--sun); box-shadow: inset 0 calc(var(--pitch) * -0.04) 0 var(--sun-lip); }
.tile.flash-good .face { animation: fGood 0.5s ease-out; }
.tile.flash-good .glyph { animation: popG 0.42s cubic-bezier(.3, 1.7, .5, 1); }
.tile.flash-dupe .face { animation: fDupe 0.5s ease-out; }
.tile.flash-bad .face { animation: fBad 0.45s ease-out; }
.tile.flash-bad .glyph { animation: wob 0.38s ease-out; }
@keyframes fGood { 0% { background: var(--mint); transform: scale(1.08); } 100% { background: var(--tile); transform: scale(1); } }
@keyframes popG { 40% { transform: scale(1.2); } }
@keyframes fDupe { 0% { background: var(--sun); } 100% { background: var(--tile); } }
@keyframes fBad { 0% { background: var(--red); } 100% { background: var(--tile); } }
@keyframes wob { 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }

/* before the round: blank tiles; on "Go" the letters drop in, left to right, top to bottom */
#game:not(.revealed) .glyph { opacity: 0; }
#game:not(.revealed) .face { background: repeating-linear-gradient(135deg, var(--tile) 0 6px, var(--sel) 6px 12px); }
/* .revealing lives only for the drop-in, so it never masks the flash animations during play */
#game.revealing .glyph { animation: drop 0.36s var(--ease) calc(var(--i) * 22ms) both; }
#game.revealing .face { animation: land 0.36s ease-out calc(var(--i) * 22ms) both; }
#game.over .board { filter: saturate(0.7); }
#game.over .glyph, #game.over .face { animation: none; }
@keyframes drop { from { opacity: 0; transform: translateY(-30%) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes land { 0% { transform: scale(0.94); } 100% { transform: none; } }

.countdown, .timeup { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10; pointer-events: none; }
.countdown { grid-template-rows: 1fr auto 1fr; }
.cd-num { grid-row: 2; font: 800 120px/1 var(--font-d); text-shadow: 5px 6px 0 var(--pink), -1px -1px 0 var(--ink); color: var(--on-ink); }
.cd-num.tick { animation: cd 0.7s var(--ease) both; }
.cd-num.go { animation: go 0.4s var(--ease) both; text-shadow: 5px 6px 0 var(--ink); color: var(--mint); }
.cd-wait { grid-row: 3; align-self: start; margin-top: 14px; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 700 14px var(--font-u); }
@keyframes cd { 0% { transform: scale(2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(0.85); opacity: 0; } }
@keyframes go { 0% { transform: scale(0.4) rotate(-12deg); opacity: 0; } 100% { transform: scale(1.1) rotate(-4deg); opacity: 1; } }
.timeup span {
  font: 800 76px/1 var(--font-d); color: var(--pink); padding: 6px 26px 12px; border: 7px solid var(--pink); border-radius: 22px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  transform: rotate(-9deg); animation: stamp 0.4s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes stamp { from { transform: rotate(-9deg) scale(2.2); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
.float {
  position: absolute; z-index: 12; pointer-events: none;
  font: 800 26px/1 var(--font-d); color: var(--mint); text-shadow: 2px 3px 0 var(--ink);
  transform: translate(-50%, -50%); animation: floatUp 0.95s cubic-bezier(.2, .8, .3, 1) forwards;
}
.float.big { font-size: 38px; color: var(--sun); }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -240%) scale(1); } }

/* ---------- first launch: "Your first board" (a real round, a ghost finger, Skip) ---------- */
.tut-bar { display: none; width: 100%; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.tut-kicker { font: 700 12px/1 var(--font-u); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tut-skip { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); font: 800 var(--t-body) var(--font-u); }
.tut-skip:active { transform: scale(0.97); }
.tut-head { display: none; width: 100%; flex: none; text-align: center; padding: 12px 4px 0; }
.tut-title { margin: 0; font: 900 28px/1.1 var(--font-d); letter-spacing: -0.02em; text-wrap: balance; }
.tut-sub { margin: 10px 0 0; font: 600 var(--t-body)/1.4 var(--font-u); color: var(--muted); text-wrap: balance; }
.tut-sub b { color: var(--text); letter-spacing: 0.04em; }
#game.tut .tut-bar { display: flex; }
#game.tut .tut-head { display: block; }
#game.tut .hud, #game.tut #found { display: none; }
/* the board waits: the word to try is outlined, the other tiles step back */
#game.tut.tut-wait .tile:not(.tut-on) .face { background: color-mix(in srgb, var(--tile) 55%, var(--panel)); box-shadow: inset 0 calc(var(--pitch) * -0.075) 0 color-mix(in srgb, var(--lip) 55%, var(--panel-lip)); }
#game.tut.tut-wait .tile:not(.tut-on) .glyph { color: color-mix(in srgb, var(--ink) 70%, var(--panel)); }
#game.tut.tut-wait .tile.tut-on .face { box-shadow: inset 0 calc(var(--pitch) * -0.075) 0 var(--lip), 0 0 0 calc(var(--pitch) * 0.04) var(--pink); }
.ghost { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.ghost svg.ghost-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ghost-trail path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.ghost-hand { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -10px 0 0 -22px; will-change: transform; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.ghost-hand svg { width: 100%; height: 100%; }

/* ---------- results ---------- */
#results { display: flex; flex-direction: column; gap: 16px; }
.summary { position: relative; overflow: hidden; padding: 20px 20px 18px; }
/* solo, practice, the daily alone, "score to beat": the score card with its rank stamp beside the score
   (as before the redesign; back 10/09 evening) */
.summary .big { font: 800 68px/1 var(--font-d); margin: 6px 0 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score-row .big { margin: 6px 0 4px; }
.score-row .stamp { margin-right: 4px; }
.stamp {
  flex: none; max-width: 46%;
  font: 800 17px/1.05 var(--font-d); color: var(--pink-ink); text-align: center;
  padding: 7px 11px 8px; border: 3.5px solid var(--pink-ink); border-radius: 12px;
  transform: rotate(8deg); animation: stampSoft 0.5s cubic-bezier(.2, 1.6, .4, 1) 0.5s both;
}
@keyframes stampSoft { from { transform: rotate(8deg) scale(2); opacity: 0; } to { transform: rotate(8deg) scale(1); opacity: 1; } }
.summary .line { margin: 0; font-weight: 700; color: var(--muted); }
.linkword { background: none; border: 0; padding: 0; font: 800 17px var(--font-d); color: var(--pink-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.meter { height: 12px; border-radius: 8px; background: var(--bg3); margin: 14px 0 0; overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--p) * 1%); min-width: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--pink), var(--sun)); transform-origin: left; animation: grow 0.7s var(--ease) 0.2s both; }
@keyframes grow { from { transform: scaleX(0); } }
.totals { margin: 8px 0 0; font-size: 14px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.totals b { color: var(--text); font-weight: 800; }
.pb-line, .official { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--muted); }
.pb-line b, .official b { color: var(--text); }
.pb-new { color: var(--mint); font-weight: 800; }
.past-line { margin: 10px 0 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.daily-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.streak-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; border-radius: 999px; font: 700 13px/1 var(--font-u); background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--text); white-space: nowrap; }
.streak-chip svg { width: 16px; height: 16px; fill: var(--sun-ink); }
.streak-chip b { font-weight: 900; }
/* "Best one you missed": the highest-scoring word you did not find (solo and the daily) */
.missed-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 8px 14px 16px; text-align: left; }
.missed-card .label { margin-bottom: 4px; }
.mc-word { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; font: 800 var(--t-head)/1.2 var(--font-d); letter-spacing: 0.04em; }
.mc-word span { overflow: hidden; text-overflow: ellipsis; }
.mc-pts { flex: none; padding: 3px 8px; border-radius: var(--r-s); background: var(--bg3); font: 800 var(--t-cap)/1.2 var(--font-u); letter-spacing: 0; }
.missed-card .linkbtn { color: var(--text); }
.waiting { margin: 12px 0 0; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: hop 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.12s; background: var(--sun); }
.dots i:nth-child(3) { animation-delay: 0.24s; background: var(--blue); }
.gstatus { margin: 12px 0 0; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.sending, .unsent { margin: 14px 0 0; display: flex; align-items: center; gap: 10px; font: 700 15px/1.35 var(--font-u); color: var(--muted); }
.unsent { display: block; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--sun) 22%, transparent); color: var(--text); text-align: left; }
.unsent b { font-weight: 800; }
.spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the scoreboard (concept A): a result with other players ---------- */
.c0 { --c: var(--pink); }
.c1 { --c: var(--blue); }
.c2 { --c: var(--mint); }
.c3 { --c: var(--sun); }
.c4 { --c: var(--orange); }
.c5 { --c: var(--violet); }
.summary.sb { display: flex; flex-direction: column; gap: 12px; padding: 0; background: none; border: 0; overflow: visible; }
.res-hero { padding: 6px 6px 2px; }
.verdict { margin: 0; font: 900 40px/1.02 var(--font-d); letter-spacing: -0.035em; overflow-wrap: anywhere; }
.verdict em { font-style: normal; color: var(--sun); }
[data-theme='light'] .verdict em { color: var(--pink-ink); }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .verdict em { color: var(--pink-ink); } }
.hero-sub, .res-hero .gstatus { margin: 9px 0 0; font-size: 15px; font-weight: 650; color: var(--muted); }
.board-rank { list-style: none; margin: 0; padding: 0; }
.board-rank.duel { padding: 18px 18px 14px; animation: rowIn 0.32s var(--ease) both; border-radius: 26px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.side.r { align-items: flex-end; text-align: right; }
.side .who { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; font: 800 17px/1.1 var(--font-u); }
.side.r .who { flex-direction: row-reverse; }
.side .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-av { flex: none; width: 36px; height: 36px; }
.side .pts { font: 900 60px/0.9 var(--font-d); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.side.lose .pts { color: var(--muted); }
.vbar { display: flex; gap: 4px; height: 8px; margin-top: 16px; }
.vbar i { min-width: 6px; border-radius: 5px; background: var(--c); transform-origin: left; animation: grow 0.7s var(--ease) 0.2s both; }
.vbar i + i { transform-origin: right; }
.vsub { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.board-rank.group { padding: 8px; display: flex; flex-direction: column; gap: 4px; border-radius: 24px; }
.board-rank.group li {
  display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) minmax(36px, 0.7fr) auto; align-items: center; gap: 10px;
  min-height: 56px; padding: 6px 12px 6px 8px;
  border-radius: 17px;
  animation: rowIn 0.32s var(--ease) both;
}
.board-rank.group li:nth-child(2) { animation-delay: 0.06s; }
.board-rank.group li:nth-child(3) { animation-delay: 0.12s; }
.board-rank.group li:nth-child(4) { animation-delay: 0.18s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
.board-rank.group li.me { background: color-mix(in srgb, var(--pink) 9%, transparent); box-shadow: inset 0 0 0 2px var(--pink); }
.board-rank .rank { font: 800 16px var(--font-d); text-align: center; color: var(--muted); }
.crown { width: 24px; height: 17px; fill: var(--sun); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; vertical-align: middle; }
.row-av { width: 36px; height: 36px; }
.board-rank.group .who { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.board-rank.group .nm { max-width: 100%; font: 800 16px/1.15 var(--font-u); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbar { height: 8px; border-radius: 4px; background: var(--bg3); overflow: hidden; }
.gbar i { display: block; height: 100%; border-radius: 4px; background: var(--c); transform-origin: left; animation: grow 0.7s var(--ease) 0.2s both; }
.board-rank.group .pts { min-width: 34px; text-align: right; font: 900 24px var(--font-d); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* big rooms (10/10, 9+ players): compact rows, smaller faces and title badges, so 20 rows read on a phone */
.board-rank.group.many { gap: 2px; padding: 6px; }
.board-rank.group.many li { grid-template-columns: 22px 28px minmax(0, 1fr) minmax(28px, 0.5fr) auto; gap: 8px; min-height: 42px; padding: 4px 10px 4px 6px; border-radius: 14px; }
.board-rank.group.many .row-av { width: 28px; height: 28px; }
.board-rank.group.many .rank { font-size: 14px; }
.board-rank.group.many .crown { width: 20px; height: 14px; }
.board-rank.group.many .who { gap: 1px; }
.board-rank.group.many .nm { font-size: 15px; }
.board-rank.group.many .badge.sm { padding: 0 7px 1px; font-size: 10.5px; }
.board-rank.group.many .gbar { height: 6px; }
.board-rank.group.many .pts { font-size: 19px; }
.split-card { padding: 0; border-radius: 22px; }
.split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split .stat { padding: 14px 8px 12px; text-align: center; min-width: 0; }
.split .stat + .stat { box-shadow: -1px 0 0 var(--line); }
.split b { display: block; font: 900 28px/1.05 var(--font-d); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.split span { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--muted); min-width: 0; }
.split span em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split .dot, .finds .dot { width: 9px; height: 9px; }
.finds { list-style: none; margin: 2px 0 0; padding: 0 4px; display: flex; flex-direction: column; gap: 10px; }
.finds li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.finds .lbl { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; color: var(--muted); }
.wkey {
  flex: none; display: inline-flex; align-items: baseline; gap: 5px; height: 36px; padding: 0 12px; border: 0;
  font: 800 14px/30px var(--font-u); border-radius: 8px;
  background: var(--tile); color: var(--on-tile); letter-spacing: 0.02em; white-space: nowrap;
}
.wkey i { font-style: normal; font-size: 12px; font-weight: 800; color: #6f6680; letter-spacing: 0; }
.wkey:active { transform: scale(0.97); }
.possible { display: flex; justify-content: space-between; gap: 10px; margin: 4px 6px 0; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.possible b { color: var(--text); font-weight: 800; }
.track { height: 6px; margin: 0 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.track i { display: block; height: 100%; min-width: 4px; border-radius: 3px; background: var(--pink); transform-origin: left; animation: grow 0.7s var(--ease) 0.2s both; }
.hold { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; font-size: 14px; border-radius: 20px; background: var(--bg3); color: var(--muted); }
.hold b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.hold-t { color: var(--pink-ink); }
/* the actions: one keycap, then a flat pair, then quiet links */
.res-actions { display: flex; flex-direction: column; gap: 12px; }
.res-actions .btn { width: 100%; font-size: 18px; }
.res-actions.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.res-actions .btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* a button with where it goes on a second line: 10/08 the half-width Share / Send pair (a long label ends in …
   instead of widening its half). (10/10 1:47pm the solo Share lost its second line: one Share link, like the pair) */
.act-row .btn { min-width: 0; }
.act-row .btn > span { min-width: 0; }
/* 10/10 Share link + Share image: one line each, so the pair stays the same height (narrow phones: smaller, no icon) */
#shareLink, #shareImg, .res-actions #shareBoard { white-space: nowrap; padding-inline: 12px; }
@media (max-width: 374px) { #shareLink, #shareImg { font-size: 16px; } #shareLink svg, #shareImg svg { display: none; } }
/* 10/10 Share image whose picture failed to draw (rare): off, Share link still works */
.res-actions .btn.nopic { opacity: 0.5; filter: none; cursor: default; }
.res-actions .b-lines { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.act-row .b-lines { align-items: flex-start; text-align: left; }
.res-actions .b-lines .b-main { font: 800 18px/1.05 var(--font-u); letter-spacing: 0; }
.res-actions .b-lines .b-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.res-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: -4px; }
.link-row { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 10px; color: var(--muted); }
.code-line { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.code-line b { color: var(--text); }
.code-line .linkbtn { font-size: 13px; padding: 6px 2px; }
.code-line .code-btn { min-height: 32px; padding: 2px 8px 2px 10px; font-size: 14px; }
.res-details { padding: 0; }
.res-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; font: 800 16px var(--font-u); }
.res-details > summary::-webkit-details-marker { display: none; }
.res-details > summary::after { content: ''; width: 9px; height: 9px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease); }
.res-details[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.res-details > summary:focus-visible { outline-offset: -3px; border-radius: var(--r-l); }
.rd-body { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 16px; animation: rowIn 0.2s ease both; }
.rd-body .split-card { background: var(--bg); }
.nudge { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 6px 10px 12px; }
.nudge img { border-radius: 11px; }
.nudge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nudge-text b { font: 800 16px var(--font-u); }
.nudge-text span { font: 650 13.5px/1.25 var(--font-u); color: var(--muted); }

/* the share card: solo screens and "only you so far" */
.share h3 { margin: 0; font: 800 22px/1.1 var(--font-d); }
.share-text { margin: 12px 0 0; padding: 10px 14px; font-size: 15px; font-weight: 700; border-radius: 16px 16px 16px 4px; background: var(--bg3); }
.btn-share { margin-top: 14px; }
.share-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; align-items: center; }
/* 10/10: the code is a chip; "Code" sits over it so Copy link stays beside it for any code on a 375 px phone (the
   chip's own box would not fit next to it there), and goes under it on a narrower one */
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label link' 'code link'; gap: 2px 8px; align-items: center; margin-top: 14px; padding: 8px 6px 6px 14px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line2); }
.code-label { font: 700 12px var(--font-u); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.code-row .code { font-size: 16px; }
.code-row .code-label { grid-area: label; }
.code-row .code-btn { grid-area: code; justify-self: start; }
.code-row .btn { grid-area: link; white-space: nowrap; }
@media (max-width: 374px) {
  .code-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'label' 'code' 'link'; }
  .code-row .btn { justify-self: end; }
}
.share-url { width: 100%; min-width: 0; padding: 10px 12px; font: 600 13px ui-monospace, Menlo, monospace; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line2); color: var(--muted); text-overflow: ellipsis; }

/* word lists */
.words { padding: 14px; }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--bg); }
.tabs button { flex: 1; min-height: 44px; border: 0; background: none; padding: 10px 6px; font: 800 14px var(--font-u); border-radius: 11px; color: var(--muted); white-space: nowrap; }
.tabs button em { font-style: normal; font-size: 12px; margin-left: 2px; }
.tabs button[aria-selected='true'] { background: var(--tile); color: var(--on-tile); box-shadow: 0 1px 3px var(--shadow); }
.wordlist { margin-top: 6px; }
.wordlist h4 { margin: 16px 0 2px; font: 800 18px var(--font-d); }
.wordlist h4 span { font: 700 14px var(--font-u); color: var(--muted); margin-left: 4px; }
.wordlist h4:empty { display: none; }
.wordlist h4.ph { display: flex; align-items: center; gap: 8px; }
.wordlist h4.ph .dot { width: 11px; height: 11px; }
.wordlist h4 .dot { width: 10px; height: 10px; margin-right: 8px; vertical-align: 0.05em; }
.wordlist h4.ph span { margin-left: auto; }
.glabel { margin: 14px 0 8px; font: 700 12px var(--font-u); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.glabel span { margin-left: 4px; letter-spacing: 0.04em; text-transform: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip {
  position: relative; min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
  border: 0;
  font: 800 14px/1 var(--font-u); letter-spacing: 0.04em; border-radius: 11px; padding: 8px 12px;
  background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line2);
  transition: transform 0.09s ease-out;
}
.wchip::before { content: ''; position: absolute; inset: -4px 0; }
.wchip:active { transform: scale(0.96); }
.wchip span { font-size: 12px; font-weight: 700; }
.wchip.found { background: var(--tile); color: var(--on-tile); box-shadow: none; }
.wchip.theirs { background: color-mix(in srgb, var(--blue) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--text); }
.wchip.best { box-shadow: inset 0 0 0 2px var(--sun); }
.wchip.found.best { background: var(--sun); color: var(--ink); box-shadow: none; }
.wchip.missed.best { color: var(--sun-ink); box-shadow: inset 0 0 0 2px var(--sun); }
/* point canceling (2026-11-09): a word two or more players found scores 0, struck through and dimmed */
.wchip.canceled { opacity: 0.62; }
.wchip.canceled b { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--pink); }
.wchip.canceled span s { opacity: 0.7; margin-right: 2px; }
.cancelpill { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 11px 5px; border-radius: 999px; font: 700 12.5px/1.2 var(--font-u); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line2); }
.cancelpill s { font: 900 10px/1 var(--font-u); letter-spacing: 0.1em; color: var(--text); text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.c0 { background: var(--pink); }
.dot.c1 { background: var(--blue); }
.dot.c2 { background: var(--mint); }
.dot.c3 { background: var(--sun); }
.dot.c4 { background: var(--orange); }
.dot.c5 { background: var(--violet); }
.board-rank .dot { width: 10px; height: 10px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent); }
.pblock + .pblock { margin-top: 6px; }
.pblock .chips { margin-top: 8px; }
.missed-best { margin-top: 4px; }
.slot:empty { display: none; }

/* ---------- your player ---------- */
#profile { display: flex; flex-direction: column; gap: 14px; }
.prof-hero { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.prof-av { width: 112px; height: 112px; }
.prof-av.synced { animation: popIn 0.4s var(--ease); } /* the account just brought your player in */
.prof-id { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prof-badge { margin: 0; min-height: 24px; padding-left: 4px; }
.prof-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); }
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tabs button { position: relative; flex: none; border: 0; padding: 11px 16px; border-radius: 999px; background: var(--bg2); color: var(--muted); font: 800 14px var(--font-u); box-shadow: inset 0 0 0 1px var(--line); }
.prof-tabs button::before { content: ''; position: absolute; inset: -2px 0; }
.prof-tabs button[aria-selected='true'] { background: var(--tile); color: var(--on-tile); box-shadow: 0 1px 3px var(--shadow); }
.prof-grid { padding: 12px; }
.prof-grid .label { margin: 4px 4px 10px; }
.prof-grid .opts + .label { margin-top: 16px; }
.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opt { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 8px 4px 7px; border: 0; border-radius: 16px; background: var(--bg3); box-shadow: inset 0 0 0 2px transparent; }
.opt svg.av { width: 58px; height: 58px; }
.opt span { font: 700 12.5px/1.15 var(--font-u); color: var(--muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt[aria-pressed='true'] { box-shadow: inset 0 0 0 2.5px var(--pink); background: color-mix(in srgb, var(--pink) 12%, var(--bg3)); }
.opt[aria-pressed='true'] span { color: var(--text); }
.opt.sw i { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18), 0 0 0 2px var(--line); margin: 7px 0; }
.opts.titles { grid-template-columns: repeat(2, 1fr); }
.opt.ttl { padding: 12px 6px; }
.opt.ttl span.badge, .opt.ttl span.badge-none { color: var(--bt, var(--muted)); overflow: visible; font-size: 14px; }
.opt.ttl > span:last-child { display: none; }
.prof-note { margin: 0; text-align: center; }
.name-warn { margin: 6px 4px 0; font: 700 13px var(--font-u); color: var(--red-ink); }

/* ---------- sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet .scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 0.32s var(--ease); }
.sheet-card {
  position: relative; width: 100%; max-width: 520px;
  background: var(--bg2);
  border-radius: 28px 28px 0 0; border: 1px solid var(--line); border-bottom: 0;
  padding: 10px 20px calc(var(--safe-b) + 20px);
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(100%); transition: transform 0.32s var(--ease);
}
.sheet.open .scrim { opacity: 1; }
.sheet.open .sheet-card { transform: none; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line2); margin-bottom: 14px; flex: none; }
.sheet h3 { margin: 4px 0 0; font: 900 28px/1.1 var(--font-d); letter-spacing: -0.02em; text-align: center; }
.settings-card h3 { margin: 0 2px 2px; font: 900 26px/1.1 var(--font-d); letter-spacing: -0.02em; text-align: left; }
.install-card h3 { margin: 0; font: 800 24px/1.15 var(--font-d); }
.sheet .sub { text-align: center; max-width: 360px; }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head h3 { margin: 0; letter-spacing: 0.04em; font: 800 34px/1 var(--font-d); }
.sheet-pts { padding: 5px 10px; font: 800 14px var(--font-u); border-radius: 10px; background: var(--mint); color: var(--ink); }
.mini { width: min(82vw, 340px); margin: 16px 0 4px; cursor: pointer; }
.sheet .btn { width: 100%; margin-top: 14px; }
.sheet .linkbtn { margin-top: 4px; }
/* "See every word": a tall sheet that scrolls inside */
.sheet.tall .sheet-card { max-height: calc(100dvh - var(--safe-t) - 28px); padding-bottom: 0; align-items: stretch; }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 10px; }
.ws-head h3 { margin: 0; text-align: left; font: 900 24px/1.1 var(--font-d); letter-spacing: -0.02em; }
.words-sheet .grab { align-self: center; }
.ws-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px calc(var(--safe-b) + 18px); }
.ws-body .words { border: 0; padding: 0; background: none; }
.leave-card { text-align: center; }
.leave-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 20px; }
.leave-btns .btn { margin-top: 0; }
/* 10/10 "Keep going (practice)": a round that counts was left mid-round */
.keep-note { margin-top: 6px; color: var(--muted); }
.keep-btns { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 20px; }
.keep-btns .btn { margin-top: 0; }
#keepGo { flex-direction: column; gap: 3px; padding-top: 12px; padding-bottom: 12px; }
.k-main { font: 800 19px/1.1 var(--font-u); }
.k-sub { font: 650 14px/1.2 var(--font-u); opacity: 0.85; font-variant-numeric: tabular-nums; }
/* the round's label on a kept-going round: PRACTICE in a sun pill, so it never reads as the real one */
#gameLabel.practice { align-self: flex-start; padding: 4px 8px 3px; border-radius: 7px; background: var(--sun); color: var(--ink); }
/* the asks (one per visit): your name after your first round, alerts after your first duel */
.ask-card, .push-card, .delete-card { text-align: center; }
.ask-av { position: relative; width: 112px; height: 112px; margin: 4px 0 14px; }
.ask-av > span { display: block; width: 100%; height: 100%; }
.ask-dice { position: absolute; right: -10px; bottom: -6px; background: var(--bg3); box-shadow: 0 0 0 3px var(--bg2); }
.ask-card .namefield, .delete-card .namefield { width: 100%; margin-top: 18px; text-align: left; }
.ask-card .fine { margin: 10px 0 0; }
.push-demo { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-l); background: var(--bg3); text-align: left; }
.push-demo img { width: 44px; height: 44px; border-radius: var(--r-s); }
.push-demo b { display: block; font: 800 var(--t-label)/1.3 var(--font-u); }
.push-demo span { display: block; font: 600 var(--t-label)/1.3 var(--font-u); color: var(--muted); }
.push-demo small { align-self: start; font: 600 var(--t-cap) var(--font-u); color: var(--muted); }
.push-card .set-list { width: 100%; margin-top: 12px; text-align: left; }
.delete-card .sub { font-size: var(--t-label); }
.delete-card .namefield input { background: var(--bg); }
/* 2026-10-13 deleting in three steps: the sheet scrolls inside when step 2's lists are taller than the phone */
.delete-card { max-height: calc(100dvh - var(--safe-t) - 16px); overflow-y: auto; overscroll-behavior: contain; }
:root[data-fit] .delete-card { max-height: calc(var(--vh) - var(--safe-t) - 16px); }
.del-body { width: 100%; display: flex; flex-direction: column; align-items: center; }
.del-n { display: flex; gap: 6px; margin: 0 0 8px; }
.del-n span { width: 22px; height: 5px; border-radius: 3px; background: var(--line2); }
.del-n span.on { background: var(--red); }
.del-of { margin-bottom: 6px; }
.del-form { width: 100%; display: flex; flex-direction: column; align-items: center; }
.del-form .namefield { width: 100%; margin-top: 18px; text-align: left; }
.del-form .acct-msg:not(:empty) { margin: 10px 4px 0; align-self: stretch; text-align: left; }
.del-word { text-transform: uppercase; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.del-word::placeholder { letter-spacing: 0.12em; }
.del-ok { width: 100%; margin: 12px 0 0; padding: 9px 12px; border-radius: 14px; font: 700 14px/1.3 var(--font-u); background: color-mix(in srgb, var(--mint) 22%, transparent); color: var(--text); }
.del-box { width: 100%; margin: 14px 0 0; padding: 12px 14px 4px; border-radius: 16px; text-align: left; background: var(--bg3); border: 1px solid var(--line); }
.del-box ul { margin: 8px 0 0; padding: 0; list-style: none; }
.del-box li { position: relative; padding: 0 0 9px 22px; font: 600 15px/1.35 var(--font-u); color: var(--text); }
.del-box li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 3px; }
.del-gone { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.del-gone li::before { background: var(--red); }
.del-kept li::before { background: var(--mint); border-radius: 50%; }
.del-body .btn + .btn { margin-top: 10px; }
/* 2026-10-13 Your data: Download my data and Clear this phone */
.data-card, .clear-card { text-align: center; }
.data-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 22px; margin: 14px 0 0; font: 700 14px/1.35 var(--font-u); color: var(--muted); }
.clear-acct { max-width: 360px; }
.acct-pend { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.acct-pend .sub { margin: 0; }
.acct-pend .linkbtn { align-self: center; }

/* ---------- Settings: an iOS-style grouped list ---------- */
.settings-card { align-items: stretch; gap: 0; background: var(--bg); max-height: calc(100dvh - var(--safe-t) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.settings-card .grab { align-self: center; margin-bottom: 4px; }
.set-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.settings-card .set-top h3 { margin: 0; text-align: left; letter-spacing: -0.02em; }
.set-done { min-height: 44px; padding: 8px 4px 8px 12px; border: 0; background: none; color: var(--pink-ink); font: 800 16px var(--font-u); }
.set-h { margin: 18px 16px 6px; font: 700 12px/1 var(--font-u); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.set-list, .set-group { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 0 16px; display: flex; flex-direction: column; }
.set-group + .set-group { margin-top: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; }
.set-row + .set-row, .set-list > :not(:first-child), .set-group > :not(:first-child) { border-top: 1px solid var(--line); }
.set-label { font: 800 16px var(--font-u); }
.set-row > .set-label { white-space: nowrap; }
.set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-text small { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--muted); }
.set-val { margin-left: auto; font: 600 var(--t-body) var(--font-u); color: var(--muted); white-space: nowrap; }
/* a three-way switch too wide to sit beside its label (Board position): label above, full width */
.set-row.set-stack { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0; }
.set-stack .seg { display: grid; grid-template-columns: repeat(3, 1fr); }
.set-group .seg { flex: none; }
.set-link {
  width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: var(--text); text-align: left;
  font: 800 16px var(--font-u);
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.set-link::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2.5px solid var(--muted); border-top: 2.5px solid var(--muted); transform: rotate(45deg); }
.set-link .set-val { margin-left: auto; }
.set-link .set-val + * { margin-left: 0; }
.set-link:has(.set-val)::after { margin-left: 0; }
.set-link:focus-visible { outline-offset: -2px; border-radius: 10px; }
.set-link.danger { color: var(--red-ink); }
.set-links { padding: 0 16px; }
.set-links .rules summary { font: 800 16px var(--font-u); }
.set-credit { text-align: center; margin: 16px 0 0; }
/* 2026-10-22 Settings > Share: the QR code on a letter tile (cream face, lip under it) in both color
   modes, dark ink on cream so every camera reads it; the app icon in the middle */
.qr-card { margin: 0; padding: 18px 0 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr-tile { position: relative; line-height: 0; border-radius: 22px; background: var(--qr-paper, var(--tile)); box-shadow: inset 0 -6px 0 var(--lip), 0 3px 0 rgba(0, 0, 0, 0.22); padding: 0 0 6px; }
.qr-tile svg { display: block; fill: #1a1720; shape-rendering: crispEdges; }
.qr-logo { position: absolute; left: 50%; top: calc(50% - 3px); width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 8px; }
.qr-card figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qr-card figcaption small { font: 700 13px/1.25 var(--font-u); color: var(--pink-ink); letter-spacing: 0.01em; }
.set-select { appearance: none; -webkit-appearance: none; border: 0; background: none; color: var(--muted); font: 600 var(--t-body) var(--font-u); text-align: right; padding: 8px 0 8px 8px; min-height: 44px; }
.switch {
  flex: none; position: relative; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  background: var(--bg3); box-shadow: inset 0 0 0 1px var(--line2); transition: background-color 0.2s var(--ease);
}
.switch::before { content: ''; position: absolute; inset: -6px -3px; }
.switch i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--ease); }
.switch[aria-checked='true'] { background: var(--mint); box-shadow: none; }
.switch[aria-checked='true'] i { transform: translateX(20px); }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- add to home screen ---------- */
.install-card { text-align: center; }
.install-icon { width: 72px; height: 72px; border-radius: 18px; margin: 4px 0 12px; }
.install-card .sub { max-width: 320px; }
.install-steps { list-style: none; margin: 18px 0 4px; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.install-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 16px; border-radius: 16px; background: var(--bg3); }
.step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #1c0812; font: 800 15px var(--font-u); }
.step-t { flex: 1; }
.ios-glyph { flex: none; width: 30px; height: 30px; padding: 3px; border-radius: 8px; background: var(--tile); fill: none; stroke: #0a7aff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.install-bar {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 14px); z-index: 45; width: min(calc(100vw - 24px), 496px);
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: 0 16px 34px var(--shadow);
  transform: translate(-50%, 150%); transition: transform 0.32s var(--ease);
}
.install-bar.open { transform: translate(-50%, 0); }
.install-bar img { border-radius: 12px; flex: none; }
.ib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-text b { font: 800 16px var(--font-u); }
.ib-text span { font-size: 13px; color: var(--muted); }
.install-bar .btn { min-height: 44px; padding: 10px 16px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 22px); z-index: 60;
  transform: translate(-50%, 140%); opacity: 0;
  background: var(--text); color: var(--bg);
  font-size: 15px; font-weight: 800; border-radius: 14px;
  padding: 12px 18px; box-shadow: 0 14px 30px var(--shadow);
  transition: transform 0.32s var(--ease), opacity 0.2s;
  width: max-content; max-width: calc(100vw - 32px); text-align: center; pointer-events: none; /* max-content: left 50% alone wrapped it at half the screen */
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.noscript { padding: 40px; text-align: center; }

/* ---------- History ---------- */
#history { display: flex; flex-direction: column; gap: 12px; }
.hist-seg { display: flex; width: 100%; }
.hist-seg button { flex: 1; }
.hist-seg button em { font-style: normal; margin-left: 4px; font-size: 13px; }
.hist-rounds { display: flex; flex-direction: column; gap: 12px; }
.hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hist-day { margin: 12px 4px 0; font: 700 12px/1 var(--font-u); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hist-day:first-child { margin-top: 0; }
.hist-row { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg2); text-align: left; color: var(--text); font: inherit; }
.hist-row:active { transform: scale(0.99); }
.hist-row .fav-board { --mb: 52px; }
.hist-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist-meta b { font: 800 16px/1.15 var(--font-u); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta small { font: 650 12px var(--font-u); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hist-score b { font: 900 22px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.hist-score em { font: 800 11px/1 var(--font-u); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.hist-score em.res { padding: 3px 8px; border-radius: 6px; }
.hist-score em.win { color: var(--ink); background: var(--mint); }
.hist-score em.loss { background: var(--bg3); color: var(--muted); }
.hist-score em.tie { color: var(--ink); background: var(--sun); }
.hist-score em.open { background: var(--blue-btn); color: #fff; }
.hist-more { text-align: center; }
.hist-cap { margin: 10px 4px 2px; text-align: center; font: 600 12px/1.3 var(--font-u); color: var(--muted); }
#history .favs { padding: 0; }
/* History's stats lead to the whole picture (10/10) */
.hist-stats { align-self: center; flex-direction: column; gap: 2px; min-height: 44px; margin: -6px 0 -2px; padding: 4px 10px; color: var(--pink-ink); text-decoration: none; }
.hist-stats b { text-decoration: underline; text-underline-offset: 3px; }
.hist-stats span { font: 650 12px var(--font-u); color: var(--muted); }

/* ---------- stats (10/10, Cooper: "make it findable under account"): js/stats.js ---------- */
#mystats { display: flex; flex-direction: column; gap: 12px; }
.st-body { display: flex; flex-direction: column; gap: 12px; }
.st-where { margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 8px; font: 650 13px/1.35 var(--font-u); color: var(--muted); text-align: center; }
.st-where b { color: var(--text); }
.st-where .acct-dot { flex: none; transform: translateY(-1px); }
.st-save { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-color: color-mix(in srgb, var(--sun) 45%, var(--line)); }
.st-save p { flex: 1; margin: 0; font: 650 14px/1.35 var(--font-u); color: var(--muted); }
.st-save b { color: var(--text); }
.st-save .btn { flex: none; }
.st-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-tile { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px 12px; text-align: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; }
.st-tile b { display: inline-flex; align-items: center; gap: 2px; font: 800 30px/1.05 var(--font-d); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.st-tile b svg { width: 26px; height: 26px; fill: var(--sun-ink); }
.st-tile > span { font: 750 13px var(--font-u); color: var(--text); }
.st-tile small { font: 650 12px/1.3 var(--font-u); color: var(--muted); }
.st-h { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 800 17px/1.2 var(--font-d); }
.st-h small { font: 650 12px var(--font-u); color: var(--muted); white-space: nowrap; }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-pair > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--bg); }
.st-pair b { font: 800 24px/1.1 var(--font-d); font-variant-numeric: tabular-nums; }
.st-pair span { font: 650 12px var(--font-u); color: var(--muted); }
.st-top { margin: 10px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 700 14px var(--font-u); color: var(--muted); }
.st-top .wkey { max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
.st-long { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: st; }
.st-long li { display: flex; align-items: center; gap: 10px; min-height: 40px; counter-increment: st; }
.st-long li::before { content: counter(st); flex: none; width: 18px; text-align: right; font: 800 13px var(--font-u); color: var(--muted); font-variant-numeric: tabular-nums; }
.st-long .wkey { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-len { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.st-len b { font: 800 14px var(--font-u); font-variant-numeric: tabular-nums; }
.st-len small { font: 650 12px var(--font-u); color: var(--muted); }
.st-cap { margin: 0; text-align: center; }
.st-hist { align-self: center; }
/* ---------- leaderboards + achievements (2026-11-09, js/boards.js): keycaps like the board's tiles ---------- */
.lb-line {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px 10px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); color: var(--text); font: 800 15px var(--font-u); text-align: left;
}
.lb-line svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb-line span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lb-line small { font: 650 12px var(--font-u); color: var(--muted); }
#resBoard { margin: 0; border-color: color-mix(in srgb, var(--sun) 55%, var(--line)); }
#resBoard span { font: 800 15px var(--font-u); color: var(--text); }
.lb-seg { display: flex; align-self: stretch; margin: 0 0 12px; }
.lb-seg button { flex: 1; }
.lb-body { display: flex; flex-direction: column; gap: 12px; }
.lb-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); }
.lb-row { display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 4px 10px 4px 6px; border-radius: 15px; animation: rowIn 0.25s var(--ease) both; }
.lb-row.me { background: color-mix(in srgb, var(--pink) 9%, transparent); box-shadow: inset 0 0 0 2px var(--pink); }
.lb-place {
  justify-self: center; display: inline-grid; place-items: center; min-width: 30px; height: 32px; padding: 0 6px 3px; border-radius: 9px;
  background: var(--tile); color: var(--on-tile); box-shadow: inset 0 -3px 0 var(--lip), 0 2px 0 rgba(0, 0, 0, 0.2);
  font: 900 16px var(--font-d); font-variant-numeric: tabular-nums;
}
.lb-place.p1 { background: var(--sun); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--sun) 60%, #8a5a00), 0 2px 0 rgba(0, 0, 0, 0.2); }
.lb-place.p2 { background: #dfe4ee; box-shadow: inset 0 -3px 0 #a9b1c2, 0 2px 0 rgba(0, 0, 0, 0.2); }
.lb-place.p3 { background: #f2b98a; box-shadow: inset 0 -3px 0 #c98656, 0 2px 0 rgba(0, 0, 0, 0.2); }
.lb-name { min-width: 0; font: 800 16px/1.15 var(--font-u); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name em { font-style: normal; font: 750 12px var(--font-u); color: var(--pink-ink); }
.lb-score { height: 34px; padding: 0 12px; font: 900 16px/34px var(--font-d); font-variant-numeric: tabular-nums; box-shadow: inset 0 -3px 0 var(--lip); }
.lb-you { margin: 0; text-align: center; font: 700 14px var(--font-u); color: var(--muted); }
.lb-you b { color: var(--text); }
.lb-note { margin: 0; text-align: center; }
.lb-gate { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px; text-align: center; }
.lb-gate p { margin: 0; font: 650 15px/1.4 var(--font-u); color: var(--muted); }
.lb-gate b { display: block; color: var(--text); }
.lb-retry { align-self: center; }
.lb-show { padding: 8px 14px 8px 16px; }
.lb-show-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 750 15px var(--font-u); }
.lb-show-txt small { font: 650 12px/1.3 var(--font-u); color: var(--muted); }
.achv-key {
  flex: none; display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px 4px; border-radius: 10px;
  font: 900 15px var(--font-d); letter-spacing: -0.02em; color: var(--muted); background: transparent; box-shadow: inset 0 0 0 2px var(--line2);
}
.achv-key.long { font-size: 12.5px; padding: 0 4px 4px; }
.achv-badge.got .achv-key, .achv-key.big.got { background: var(--tile); color: var(--on-tile); box-shadow: inset 0 -4px 0 var(--lip), 0 2px 0 rgba(0, 0, 0, 0.22); }
.achv-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.achv-txt b { font: 800 14px/1.2 var(--font-u); }
.achv-txt small { font: 650 12px/1.25 var(--font-u); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 11/10 the compact achievements card (js/boards.js achievementsHtml): Next up, then one row of keycaps a group */
.achv-bar { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.achv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--pink); }
.achv-total { margin: -2px 0 12px; height: 6px; }
.achv-sub { margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 800 12px/1.2 var(--font-u); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.achv-sub small { font: 700 12px var(--font-u); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.achv-next { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.achv-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 76px; align-items: center; gap: 10px; width: 100%; padding: 5px 10px 5px 5px;
  border: 0; border-radius: 14px; background: var(--bg); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.achv-row:active { transform: scale(0.98); }
.achv-prog { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.achv-prog small { font: 750 11.5px var(--font-u); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.achv-all { margin: 0 0 14px; font: 750 14px var(--font-u); color: var(--pink-ink); }
.achv-groups { display: flex; flex-direction: column; gap: 12px; }
.achv-pair { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.achv-pair > .achv-group { grid-column: span 3; }
.achv-pair > .achv-group + .achv-group { grid-column: 5 / span 3; }
.achv-pair .achv-keys { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
/* seven keys fit a row on an iPhone SE (the longest group is 7): each key shrinks with the card, never wraps */
.achv-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.achv-keys li { min-width: 0; }
.achv-badge {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.achv-badge .achv-key { width: 100%; min-width: 0; height: auto; aspect-ratio: 1; max-height: 48px; font-size: clamp(12px, 3.6vw, 16px); }
.achv-badge .achv-key.long { font-size: clamp(9.5px, 2.75vw, 12.5px); letter-spacing: -0.04em; padding: 0 2px 4px; }
.achv-badge:active .achv-key { transform: translateY(2px); }
.achv-badge .achv-bar { height: 4px; }
.achv-badge.got .achv-bar { visibility: hidden; }
.achv-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--bg2); }
.achv-badge:not(.got) .achv-dot { background: var(--bg2); box-shadow: inset 0 0 0 2px var(--pink), 0 0 0 2px var(--bg2); }
.achv-legend { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font: 650 12px var(--font-u); color: var(--muted); }
.achv-legend .achv-dot { position: static; flex: none; box-shadow: none; }
/* the detail sheet */
.achv-card { text-align: center; }
.achv-key.big { min-width: 72px; height: 72px; padding: 0 10px 7px; border-radius: 16px; font-size: 28px; margin: 4px 0 12px; }
.achv-key.big.long { font-size: 22px; }
.achv-key.big.got { box-shadow: inset 0 -6px 0 var(--lip), 0 3px 0 rgba(0, 0, 0, 0.25); }
.achv-sheet-prog { width: 100%; max-width: 320px; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.achv-sheet-prog .achv-bar { height: 8px; border-radius: 4px; }
.achv-sheet-prog small { font: 700 13px var(--font-u); color: var(--muted); }
.achv-earned { font: 800 15px var(--font-u); color: var(--pink-ink); }
.achv-sheet-theme { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; margin: 16px 0 0; padding: 10px 12px; border-radius: 16px; background: var(--bg); text-align: left; }
.achv-sheet-theme > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.achv-sheet-theme b { font: 800 15px var(--font-u); }
.achv-sheet-theme small { font: 650 12.5px/1.3 var(--font-u); color: var(--muted); }
.achv-sheet-theme .btn { width: auto; margin: 0; flex: none; }
.achv-on { font: 750 13px var(--font-u); font-style: normal; color: var(--pink-ink); flex: none; }
@media (prefers-reduced-motion: reduce) { .achv-row:active, .achv-badge:active .achv-key { transform: none; } }
/* Your player's account box: Stats is its first row, signed out too (above Sign in to back up) */
.acct-stats { width: 100%; margin: 0 0 12px; text-align: left; }

/* ---------- the account box (Your player, Friends) ---------- */
.acct { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px; }
.acct .fine { margin: 6px 0 0; }
.acct-line { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 650; }
.acct-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }
.acct-form { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; animation: rowIn 0.2s ease both; }
.acct-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acct-msg { margin: 0; min-height: 0; font: 700 13px var(--font-u); color: var(--red-ink); }
.acct-msg:empty { min-height: 0; }
.acct-msg:not(:empty) { margin: -2px 4px 0; }
.acct.is-in, .acct:has(.acct-form), .acct:has(.acct-code) { align-items: stretch; text-align: left; }
.acct-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.acct-seg button { min-height: 40px; }
.acct-top { padding: 2px 2px 0; }
.acct-h { margin: 0; font: 900 22px/1.15 var(--font-d); letter-spacing: -0.02em; }
.acct-hint { margin: -4px 4px 0; min-height: 1.3em; font: 650 12.5px/1.3 var(--font-u); color: var(--muted); }
.acct-hint:empty { display: none; }
.acct-hint.bad { color: var(--red-ink); font-weight: 700; }
.acct-hint.ok { color: var(--text); }
.namefield .pw-wrap { position: relative; display: block; padding: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.pw-wrap input { padding-right: 54px; }
.pw-eye { position: absolute; right: 3px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--muted); }
.pw-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye[aria-pressed='false'] .eye-off { display: none; }
.acct-go { margin-top: 2px; }
.acct-links { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 -6px; }
.acct-links .linkbtn, .acct-pbtns .linkbtn { min-height: 44px; padding: 10px 6px; }
.acct-form .fine { margin: 0 2px; }
.acct-note { width: 100%; margin: 0 0 10px; padding: 10px 12px; font: 700 14px/1.3 var(--font-u); border-radius: 14px; background: color-mix(in srgb, var(--sun) 24%, transparent); color: var(--text); text-align: center; }
.shake { animation: shake 0.42s ease; }
.acct-code { display: flex; flex-direction: column; gap: 10px; animation: rowIn 0.2s ease both; }
.acct-done { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; font: 800 17px/1.25 var(--font-u); }
.acct-check { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: #08281b; }
.acct-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pop { animation: popIn 0.4s var(--ease) both; }
@keyframes popIn { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.rcode { margin: 0; padding: 14px 8px;
  font: 900 clamp(17px, 5.4vw, 22px)/1.25 var(--font-d); border-radius: 16px; border: 2px dashed var(--line2); background: var(--bg); text-align: center; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all;
}
.rcode span { display: inline-block; white-space: nowrap; } /* two groups per line at most: never split inside a group */
.rc-btns { margin-top: 0; }
.rc-input { text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.rc-input::placeholder { text-transform: none; letter-spacing: 0.04em; }
.acct-code .fine { margin: 0 2px; }
.acct-me { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 10px; text-align: center; }
.acct-me .fine { margin: 2px 0 0; }
.acct-rows { list-style: none; margin: 0; padding: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.acct-rows > li + li { border-top: 1px solid var(--line); }
.acct-row { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; background: none; color: var(--text); text-align: left; font: 800 16px/1.2 var(--font-u); }
.acct-row:active { background: var(--bg3); }
.acct-row:focus-visible { outline-offset: -3px; }
.acct-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-rt small { font: 650 13px/1.25 var(--font-u); color: var(--muted); }
.acct-row.warn small { color: var(--pink-ink); font-weight: 700; }
.acct-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease); }
.acct-row[aria-expanded='true'] .acct-chev { transform: rotate(90deg); }
.acct-row.danger { justify-content: center; color: var(--red-ink); }
.acct-row.danger.armed { background: color-mix(in srgb, var(--red) 16%, transparent); }
.acct-badge { min-width: 24px; height: 24px; padding: 0 7px; font: 900 13px/1 var(--font-u); border-radius: 12px; display: grid; place-items: center; background: var(--pink); color: #1c0812; font-variant-numeric: tabular-nums; }
.acct-panel { display: flex; flex-direction: column; gap: 10px; padding: 2px 14px 14px; animation: rowIn 0.2s ease both; }
.acct-panel .sub { margin: 0 2px; font-size: 14px; }
.acct-panel .fine { margin: 0 2px; }
.acct-pbtns { display: flex; align-items: center; gap: 12px; }
.sr-hide { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.acct.is-in > .fine { margin: 10px 2px 0; text-align: center; }
.acct-del { margin-top: 10px; }

/* tap and hold a word: its meaning */
.wchip, .wkey, .linkword, .wordinfo { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.wordinfo {
  position: fixed; z-index: 60; max-width: calc(100vw - 24px); padding: 12px 14px;
  border-radius: 16px;
  background: var(--tile); color: var(--on-tile); box-shadow: 0 14px 30px var(--shadow);
  opacity: 0; transform: translateY(4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); pointer-events: auto;
}
.wordinfo.open { opacity: 1; transform: none; }
.wordinfo p { margin: 0; }
.wi-word { font: 900 18px/1.1 var(--font-d); letter-spacing: 0.04em; }
.wi-pos { margin-left: 4px; font: 700 12px var(--font-u); letter-spacing: 0.02em; color: #6f6680; font-style: italic; }
.wi-rel { margin-top: 2px !important; font: 650 13px var(--font-u); color: #6f6680; }
.wi-rel b { color: var(--ink); }
.wi-def { margin-top: 5px !important; font: 600 15px/1.35 var(--font-u); }
.wi-wait, .wi-none { color: #6f6680; }
.wi-credit { margin-top: 7px !important; font: 600 11.5px var(--font-u); color: #6f6680; }

/* ---------- friends (v6): the Friends screen and the panel on the daily board ---------- */
#friends { display: flex; flex-direction: column; gap: 12px; }
.fr-body { display: flex; flex-direction: column; gap: 12px; }
.fr-out { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 18px; }
.fr-out .btn { margin-top: 10px; min-width: 160px; }
.fr-lead { margin: 0; font: 800 18px/1.25 var(--font-u); }
.fr-msg { margin: 8px 2px 0; min-height: 1.2em; font: 700 13px var(--font-u); color: var(--pink-ink); }
.fr-msg:empty { display: none; }
.fr-code { margin: 10px 0 0; font: 700 13px var(--font-u); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fr-code .code { margin-left: 6px; font-size: 22px; text-transform: none; letter-spacing: 0.1em; color: var(--text); }
.fr-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.fr-list, .fp-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fr-row, .fp-row { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 8px; border-radius: 14px; background: var(--bg3); border: 0; color: var(--text); text-align: left; font: inherit; }
.fr-av, svg.av.fr-av { width: 36px; height: 36px; flex: none; display: block; }
.fr-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fr-name b { font: 800 15px/1.2 var(--font-u); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-name small { font: 650 12px var(--font-u); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-right { display: flex; align-items: center; gap: 6px; }
.fr-right .btn-sm { position: relative; min-height: 36px; }
.fr-right .btn-sm::before { content: ''; position: absolute; inset: -5px -3px; } /* 44 px tall tap area in a 52 px row */
.fr-today { font: 700 13px var(--font-u); color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.fr-today b { font: 900 17px/1 var(--font-d); color: var(--text); font-variant-numeric: tabular-nums; }
.fr-today svg, .fp-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fr-today.none { opacity: 0.75; }
.iconbtn.fr-x { width: 36px; height: 36px; }
.iconbtn.fr-x::before { content: ''; position: absolute; inset: -4px; } /* a 44 px target around the 36 px button */
.fr-empty, .fp-empty { margin: 8px 0 0; font-size: 14px; }
.fpanel { text-align: left; }
.fpanel.card { padding: 14px 14px 12px; }
.fpanel.in-invite { width: 100%; margin: 14px 0 4px; }
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fp-head .linkbtn { position: relative; padding: 4px 2px; font-size: 13px; }
.fp-head .linkbtn::before { content: ''; position: absolute; inset: -12px -8px; }
.fp-row { grid-template-columns: 18px 32px minmax(0, 1fr) auto; }
.fp-list.locked .fp-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
.fp-row .fr-av, .fp-row svg.av.fr-av { width: 32px; height: 32px; }
.fp-row .r { font: 800 14px var(--font-u); color: var(--muted); text-align: center; }
.fp-row.me { box-shadow: inset 0 0 0 2px var(--pink); }
button.fp-row:active { transform: scale(0.99); }
.fp-pts { font: 900 18px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.fp-lock { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--font-u); color: var(--muted); white-space: nowrap; }
.fp-note, .fp-later { margin: 8px 2px 0; font: 650 12.5px/1.35 var(--font-u); color: var(--muted); }
.acct .fr-open { margin-top: 8px; }
.fr-add .fr-link { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fr-add .fr-code { margin-top: 0; }
.fr-add .fr-btns { margin-top: 10px; }
.fr-add .fine .linkbtn { color: var(--text); }
.fr-req { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.fr-row.just { animation: justIn 1.6s ease both; }
@keyframes justIn { 0% { box-shadow: inset 0 0 0 2px var(--pink); } 70% { box-shadow: inset 0 0 0 2px var(--pink); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.fr-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
.fr-acct { margin: 0; }
.fr-out .sub { margin-top: 4px; }
.fr-card .join-field input { padding-right: 16px; letter-spacing: 0; font-weight: 700; }

/* ---------- the waiting-duel row's text and chevron (v7b's Challenges row and friend group sheets are gone since 10/10) ---------- */
.chal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chal-chev { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- short phones: tighten the round so the board stays big ---------- */
@media (max-height: 700px) {
  .timer { width: 60px; height: 60px; }
  .preview { height: 56px; margin-bottom: 8px; }
  #found { margin-top: 8px; }
  .g-gap.g-bot { flex-basis: 64px; }
  .scorebox b { font-size: 38px; }
  .pv-word { font-size: 25px; padding: 9px 14px 10px; }
  .home-head { padding: 12px 0 16px; }
}
@media (min-width: 700px) {
  .screen { padding-top: calc(var(--safe-t) + 28px); }
}

/* ---------- 11/10 UI review: small-phone rough spots ----------
   Home rows: the second line breaks evenly (never one orphan word), and a 375 px phone gets a little more room for it. */
.row-t .b-sub, .row-t .chal-line { text-wrap: balance; }
@media (max-width: 380px) {
  .row-card { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 12px; padding-left: 14px; padding-right: 14px; }
  .row-ico { width: 48px; height: 48px; border-radius: 15px; }
  /* Settings: Light / Dark / System stays inside its card */
  .set-group .seg button { padding-left: 9px; padding-right: 9px; }
}
.set-group .set-row > .seg { max-width: 100%; }
/* Settings: a long hint runs under its row at full width (it was a 5-line column beside the switch) */
.set-row.set-wrap { flex-wrap: wrap; row-gap: 6px; }
.set-row.set-wrap > .set-note { flex-basis: 100%; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--muted); text-wrap: pretty; }
/* centred copy never ends on one orphan word */
.sheet-card .sub, .data-state, .invite .sub, .tut-sub, .week-note, .set-push-msg, .join-msg, .so-note { text-wrap: balance; }
/* the rank stamp keeps to one line beside a small score; a long missed word shrinks instead of ending in "..." */
.stamp { max-width: 58%; }
.mc-word.mc-long { font-size: 17px; letter-spacing: 0.02em; }
.mc-word.mc-xlong { font-size: 15px; letter-spacing: 0; }
/* Details: "Only Cooper" wraps under its number instead of "Only Coo..." */
.split span { align-items: baseline; }
.split span em { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }

/* the "New theme unlocked" bar never sits on a tall sheet's title and close button (Every word, Settings) */
body:has(.sheet.tall:not([hidden])) .unlock, body:has(#settingsSheet:not([hidden])) .unlock { opacity: 0; visibility: hidden; }

/* Settings > Theme: every name whole ("Synthwave", "Blueprint", "Keyboard" ended in "..." on phones under 400 px) */
.set-row.set-stack .skin-seg { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.set-row.set-stack .skin-seg button { padding-left: 0; padding-right: 0; }
.set-row.set-stack .skin-seg button span { font-size: 11.5px; letter-spacing: -0.02em; }
/* ...and every swatch has an edge: the dark themes (Neon, Synthwave, Terminal, Lava, Frost) vanished on the dark page */
.set-row.set-stack .skin-ico.plain, .unlock .skin-ico.plain { box-shadow: inset 0 -3px 0 var(--sw-lip), 0 0 0 1.5px color-mix(in srgb, var(--text) 24%, transparent); }
.skin-ico.plain[style*='--sw-edge']::after { box-shadow: inset 0 -4px 0 var(--sw-tlip), 0 0 0 1.5px var(--sw-edge), 0 0 7px color-mix(in srgb, var(--sw-edge) 55%, transparent); }
/* Stats > Next up: the goal reads whole on a small phone (two lines, never "Find a word of 10 letter...") */
.achv-row .achv-txt small { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; line-height: 1.25; }
@media (max-width: 400px) { .achv-row { grid-template-columns: auto minmax(0, 1fr) 62px; gap: 8px; } }
/* an invite's standings: a long list (up to 20 players) scrolls in place, the Play button stays put */
.mini-rank { max-height: 190px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* the dark-key themes: chips painted like a tile carry the theme's letter colour, with the key's edge so they read as keys */
:root[data-skin='neon'], :root[data-skin='synthwave'], :root[data-skin='terminal'], :root[data-skin='lava'], :root[data-skin='frost'], :root[data-skin='blueprint'] {
  --on-tile: var(--n-glyph); --on-ink: #fff; --qr-paper: #f6f1e6;
}
:root:is([data-skin='neon'], [data-skin='synthwave'], [data-skin='terminal'], [data-skin='lava'], [data-skin='frost'], [data-skin='blueprint']) :is(.seg button[aria-checked='true'], .seg button[aria-selected='true'], .tabs button[aria-selected='true'], .prof-tabs button[aria-selected='true'], .wchip.found:not(.best)) {
  box-shadow: inset 0 0 0 1.5px var(--n-edge);
}

/* ---------- 11/10 UI review: the one big button of an invite / daily / send screen stays on screen ----------
   The decorative face-down board and the big avatar give way as the screen gets shorter (an iPhone SE, a small
   Android, any phone with Safari's or Chrome's bars showing), and a long list of standings scrolls in place. */
@media (orientation: portrait) and (max-height: 860px) {
  .invite .backs, .invite.is-daily .backs, .mini-rank:not([hidden]) + .backs { width: 112px; gap: 4px; padding: 6px; margin: 10px 0 10px; border-radius: 13px; box-shadow: 0 5px 0 var(--panel-lip); }
  .invite .backs i { border-radius: 6px; box-shadow: inset 0 -2px 0 var(--lip); }
}
@media (orientation: portrait) and (max-height: 760px) {
  .invite .backs, .invite.is-daily .backs, .mini-rank:not([hidden]) + .backs { display: none; }
  .invite { padding-top: 4px; }
  .inv-av { width: 72px; height: 72px; margin-bottom: 6px; filter: drop-shadow(4px 5px 0 var(--blue)); }
  .invite h2 { font-size: 28px; }
  .mini-rank { max-height: 138px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .ds-big svg { width: 34px; height: 34px; }
  .ds-big b { font-size: 52px; }
  .dstreak { gap: 8px; }
  .invite .namefield { margin: 2px 0 8px; }
}
@media (orientation: portrait) and (max-height: 640px) {
  #invite { gap: 4px; }
  .inv-av { display: none; }
  .invite h2 { font-size: 26px; }
  .mini-rank { max-height: 84px; margin-top: 8px; }
  .send-opts { padding: 8px 12px; gap: 6px; }
  .sendbox { gap: 8px; }
  .dstreak .week { padding-top: 8px; padding-bottom: 8px; }
  .dstreak .goal { display: none; }
}

/* Reduce Motion (audit M2, 10/09 design plan): every transform becomes a short fade; shakes,
   fly-offs and the drop-in are dropped; colours, shapes and numbers still change. The countdown
   digit, the word bubble and the tile flashes stay on screen (they carry meaning). */
@media (prefers-reduced-motion: reduce) {
  .hero.go .hero-trail path, .hero.go .htile::before, .hero.go .htile::after, .scorebox.bump b,
  .chip.pop, .tile.flash-good .glyph, .tile.flash-bad .glyph, #game.revealing .face, .meter i, .vbar i, .gbar i, .track i,
  .fr-row.just, .shake, .preview.shake .pv-word, .cd-num.tick, .cd-num.go { animation: none; }
  #game.revealing .glyph, .board-rank.duel, .board-rank.group li, .acct-form, .acct-code, .acct-panel, .stamp, .timeup span,
  .pop, .tool-badge.pop, .prof-av.synced, .res-details[open] .rd-body { animation-name: fadeIn; animation-duration: 0.15s; }
  .loader i, .dots i { animation-name: blink; }
  /* the word preview and its tag stay put until game.js clears them (0.7-0.9 s) */
  .preview[data-settled='1'][data-state] .pv-word, .preview[data-settled='1'][data-state] .pv-tag, .preview.shake[data-state] .pv-word, .preview.shake[data-state] .pv-tag { animation: none; }
  /* tile flashes: a plain colour while the class is on (board.js takes it off after 0.5 s) */
  .tile.flash-good .face { animation: none; background: var(--mint); }
  .tile.flash-dupe .face { animation: none; background: var(--sun); }
  .tile.flash-bad .face { animation: none; background: var(--red); }
  /* sheets, the install bar, the toast and the meaning bubble fade in place instead of sliding */
  .sheet-card { transform: none; opacity: 0; transition: opacity 0.15s; }
  .sheet.open .sheet-card { opacity: 1; }
  .install-bar { transform: translate(-50%, 0); opacity: 0; transition: opacity 0.15s; }
  .install-bar.open { opacity: 1; }
  .toast, .toast.on { transform: translate(-50%, 0); }
  .wordinfo { transform: none; }
  .switch i, .acct-chev, .rules summary::after, .res-details > summary::after { transition: none; }
  .btn:active:not(:disabled), .btn-pink:active:not(:disabled), .row-card:active:not(:disabled) { transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes blink { 50% { opacity: 0.35; } }

/* S1: phone held sideways during a round: the HUD on the left, the board on the right, sized to the
   short side, so the bottom row is never off screen */
@media (orientation: landscape) and (max-height: 540px) {
  body[data-screen='game'] #app { max-width: none; }
  #game {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: 22px; align-items: start; justify-items: stretch;
    padding: calc(var(--safe-t) + 8px) calc(env(safe-area-inset-right, 0px) + 16px) calc(var(--safe-b) + 8px) calc(env(safe-area-inset-left, 0px) + 16px);
  }
  #game .hud { grid-column: 1; grid-row: 1; padding: 0; }
  #game #found { grid-column: 1; grid-row: 2; width: 100%; margin: 8px 0 0; padding: 0; }
  #game .preview { grid-column: 1; grid-row: 3; margin: 8px 0; }
  #game .g-gap { display: none; }
  #game .tut-bar, #game .tut-head { grid-column: 1; }
  #game .board-wrap { grid-column: 2; grid-row: 1 / 5; align-self: center; margin: 0;
    width: calc(100dvh - var(--safe-t) - var(--safe-b) - 40px); min-width: 0; }
}

/* the daily screen: the facts and the board under the streak, the button at the bottom */
.invite.is-daily .backs { order: 1; }
.invite.is-daily .inv-facts { order: 2; }
.invite.is-daily .invite-play { order: 3; }
/* a streak milestone (7, 30, 100) on the daily result: one celebration */
.milestone { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sun) 24%, transparent); font: 800 var(--t-body) var(--font-u); }
.ms-flame svg { display: block; width: 24px; height: 24px; fill: var(--sun-ink); }
/* one keycap per screen: while the sign-in form is open on Your player, its button is the next step */
#profile:has(.acct-form) #profDone { background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- themes (10/10; 11/09 colours only, earned by achievements): Settings > Theme and the unlock moments ----------
   Each choice is a small tile in that theme's board colour: a season's sprite at 2 px a pixel, or (.plain) a keycap
   in the theme's tile colour. Locked ones are dimmed with a lock; the line under the choices says what earns one. */
.set-stack .skin-seg { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.skin-ico.plain { position: relative; background: var(--sw-panel); box-shadow: inset 0 -3px 0 var(--sw-lip); }
.skin-ico.plain::after { content: ''; position: absolute; inset: 9px 10px 12px; border-radius: 6px; background: var(--sw-tile); box-shadow: inset 0 -4px 0 var(--sw-tlip); }
.skin-ico.plain.keys::after { inset: 8px 9px 11px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--sw-tlip), inset 0 -6px 0 var(--sw-tlip); }
.skin-seg button.locked { color: var(--muted); }
.skin-seg button.locked .skin-ico { opacity: 0.45; filter: saturate(0.5); }
.skin-seg button.locked::after {
  content: ''; position: absolute; top: 19px; left: 50%; width: 18px; height: 18px; margin-left: -9px; background: var(--text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.skin-hint { display: block; font: 650 12.5px/1.35 var(--font-u); color: var(--muted); }
.skin-icon.plain::after {
  content: ''; position: absolute; inset: 24px 26px 30px; border-radius: 16px; background: var(--tile);
  box-shadow: inset 0 -9px 0 var(--lip), 0 4px 0 rgba(0, 0, 0, 0.22);
}
.skin-icon.plain.keys::after { border-radius: 10px; box-shadow: inset 0 0 0 5px var(--lip), inset 0 -14px 0 var(--lip), 0 5px 0 rgba(0, 0, 0, 0.4); }
/* an achievement unlocked a theme: a small bar at the top (js/themes.js earned), over everything, never blocking */
.unlock {
  position: fixed; z-index: 90; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); width: min(calc(100vw - 24px), 380px);
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; overflow: hidden;
  background: var(--bg2); color: var(--text); box-shadow: 0 0 0 1px var(--line2), 0 10px 30px var(--shadow);
  transform: translate(-50%, -140%); opacity: 0; transition: transform 0.26s var(--ease), opacity 0.2s ease;
  pointer-events: none; /* taps go through to the screen; only Use takes one */
}
.unlock-use { pointer-events: auto; }
.unlock[hidden] { display: none; }
.unlock.on { transform: translate(-50%, 0); opacity: 1; }
.unlock .skin-ico { flex: none; }
.unlock-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; position: relative; }
.unlock-txt small { font: 750 12px/1.2 var(--font-u); color: var(--pink-ink); }
.unlock-txt b { font: 850 17px/1.2 var(--font-u); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unlock-use { flex: none; position: relative; min-height: 40px; padding: 0 18px; font-size: 15px; border-radius: 12px; box-shadow: 0 3px 0 var(--pink-lip); }
.unlock-burst { position: absolute; inset: 0; pointer-events: none; }
.unlock-burst i { position: absolute; top: -14px; border-radius: 3px; opacity: 0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
@media (prefers-reduced-motion: no-preference) {
  .unlock.on .unlock-burst i { animation: unlockFall 1.1s ease-in 0.15s both; }
}
@keyframes unlockFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(90px) rotate(70deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .unlock { transition: none; } }
.skin-seg button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px 7px; font-size: 12px; min-width: 0; }
.skin-seg button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.skin-ico { display: block; width: 40px; height: 40px; border-radius: 11px; background-position: center; background-repeat: no-repeat; }
.skin-card { position: relative; overflow: hidden; text-align: center; }
.skin-icon {
  position: relative; z-index: 1; width: 112px; height: 112px; margin: 6px 0 16px; border-radius: 26px;
  background: var(--panel) center / 64px 64px no-repeat; box-shadow: 0 7px 0 var(--panel-lip);
}
.skin-card .eyebrow { position: relative; z-index: 1; color: var(--pink-ink); }
.skin-card h3, .skin-card .sub, .skin-card .leave-btns { position: relative; z-index: 1; }
.skin-burst { position: absolute; inset: 0 0 auto; height: 190px; pointer-events: none; }
.skin-burst i { position: absolute; top: var(--y); background: center / 100% 100% no-repeat; opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .sheet.open .skin-burst i { animation: skinFall 1.6s steps(8, end) both; }
}
@keyframes skinFall { from { transform: translateY(-120px); opacity: 0; } 12% { opacity: 0.9; } }

/* leaderboards: the 4x4 / Big 5x5 switch over This week and All time (2026-11-09) */
.lb-size { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 12px; }