/* Wowdle - aplexotools.com/wowdle. Self-contained: local fonts and icons; the only requests go to the site's own /api. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); 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: 'Sora'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/sora-latin.woff2') format('woff2'); 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; }

:root {
  color-scheme: dark;
  --css-v: 17;      /* this stylesheet's stamp (the ?v= index.html loads it with): the script asks for its own stylesheet if another is on the page */
  --bg: #0a0910; --surface: #14121c; --surface-2: #1a1826; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #f2f0f8; --muted: #a8a4b9; --dim: #716d82;
  --purple: #a335ee; --orange: #ff8000; --pink: #e268a8; --gold: #e5cc80; --red: #f43f5e; --teal: #2dd4bf; --blue: #0070dd; --green: #1eff00;
  --parse: linear-gradient(90deg, var(--purple), var(--pink) 55%, var(--gold));
  --display: Sora, Inter, system-ui, sans-serif; --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1); --bounce: cubic-bezier(.34,1.56,.64,1);
  /* tile colours (Wordle-ish, tuned for the dark brand) */
  --c-correct: #3aa655; --c-present: #c9a227; --c-absent: #3a3747; --c-empty: rgba(255,255,255,.03);
  --win: #a335ee;
  /* difficulty colours: Easy is teal, Medium the brand pink, Insane crimson. None of them is a rarity colour. */
  --easy: #2dd4bf; --easy-2: #0d9488; --easy-3: #8be9dc;
  --medium: #e268a8; --medium-2: #b23ef0; --medium-3: #f08ac0;
  --insane: #ff4d6d; --insane-2: #9f1239; --insane-3: #ff7a93;
  /* the accent follows the difficulty in play (html[data-diff]); every control that used the brand gradient uses it */
  --acc: var(--medium); --acc-2: var(--medium-2); --acc-3: var(--medium-3);
  --acc-grad: linear-gradient(135deg, var(--acc-2), var(--acc) 70%, var(--acc-3));
  --acc-glow: color-mix(in srgb, var(--acc) 85%, transparent);
}
/* registered so the accent colours tween between difficulties instead of snapping */
@property --acc { syntax: '<color>'; inherits: true; initial-value: #e268a8; }
@property --acc-2 { syntax: '<color>'; inherits: true; initial-value: #b23ef0; }
@property --acc-3 { syntax: '<color>'; inherits: true; initial-value: #f08ac0; }
html { transition: --acc .7s var(--ease), --acc-2 .7s var(--ease), --acc-3 .7s var(--ease); }
html[data-diff="easy"] { --acc: var(--easy); --acc-2: var(--easy-2); --acc-3: var(--easy-3); }
html[data-diff="insane"] { --acc: var(--insane); --acc-2: var(--insane-2); --acc-3: var(--insane-3); }
html.contrast { --c-correct: #f5793a; --c-present: #85c0f9; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font: 15px/1.55 var(--font); overflow-x: hidden;
  background:
    radial-gradient(900px 560px at 15% -10%, color-mix(in srgb, var(--acc-2) 28%, transparent), transparent 62%),
    radial-gradient(700px 480px at 100% 10%, color-mix(in srgb, var(--acc) 13%, transparent), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, rgba(229,204,128,.07), transparent 60%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent); -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(100% - 32px, 760px); margin: 0 auto; }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--pink); color: #fff; font-weight: 600; }
.skip:focus { top: 12px; }
header, main, footer { position: relative; z-index: 1; }
.grad { background: var(--parse); -webkit-background-clip: text; background-clip: text; color: transparent; }
kbd { font: 600 11px var(--font); letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); }

/* ---------- header ---------- */
.top .wrap { display: flex; align-items: center; gap: 10px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -10px rgba(226,104,168,.8); }
.crumb { color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; }
.crumb .sep { color: var(--dim); margin: 0 10px 0 2px; }
.top-actions { margin-left: auto; display: flex; gap: 6px; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn .off { display: none; }
.icon-btn[aria-pressed="true"] .on { display: none; }
.icon-btn[aria-pressed="true"] .off { display: block; }
.icon-btn[aria-expanded="true"] { color: var(--pink); border-color: rgba(226,104,168,.4); background: rgba(226,104,168,.1); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg); }
/* sign-in: a Discord-blue pill, then avatar + name with a small account menu */
.login-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 12px; color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; background: linear-gradient(180deg, #6571f3, #5865f2); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px -12px rgba(88,101,242,.9), inset 0 1px 0 rgba(255,255,255,.14); transition: filter .15s, transform .15s var(--ease); }
.login-link:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ic.discord { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.account { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 5px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; max-width: 250px; transition: background .15s, border-color .15s; }
/* the player's standing on the overall board sits next to the name; the avatar's ring takes its colour at every width */
.user-btn .st { font-size: 9px; padding: 0 6px; line-height: 1.7; }
#account[data-level] .avatar { box-shadow: 0 0 0 2px var(--sc); }
.user-btn:hover, .user-btn[aria-expanded="true"] { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); }
.user-btn .chev { width: 14px; height: 14px; color: var(--dim); transition: transform .2s var(--ease); }
.user-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.user-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #2a2440; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 232px; padding: 6px; border-radius: 16px; background: #1a1826; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4); animation: menu-in .22s var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head .avatar { width: 34px; height: 34px; }
.menu-head div { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.menu-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head small { color: var(--dim); font-size: 11.5px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-weight: 500; font-size: 13.5px; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.menu-item .ic { width: 16px; height: 16px; color: var(--muted); }
.menu-state { margin-left: auto; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.menu-item[aria-checked="true"] .menu-state { border-color: transparent; background: var(--teal); color: #06231f; }
.menu-item:disabled { opacity: .6; cursor: default; }
.menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.menu-item.danger:hover, .menu-item.danger:focus-visible { color: #ffb4c0; background: rgba(244,63,94,.1); }
.menu-item.danger:hover .ic, .menu-item.danger:focus-visible .ic { color: #ffb4c0; }
/* the standing in the account menu: chip, points and rank, and a small reputation bar */
.menu-rep { display: flex; flex-direction: column; gap: 7px; padding: 6px 10px 10px; margin: -2px 0 6px; border-bottom: 1px solid var(--line); }
.menu-rep .mr-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-rep .rep { height: 12px; }
.menu-rep .rep-txt { font-size: 9px; }
.menu-rep .mr-next { color: var(--dim); font-size: 11.5px; }
header.top { z-index: 30; } /* the account menu drops over the page */
/* The header sheds things step by step so seven controls still fit at 320px. Sounds stay reachable in Settings. */
@media (max-width: 760px) { .user-btn { padding: 0 5px; max-width: none; } .user-name, .user-btn .chev, .user-btn .st { display: none; } }
@media (max-width: 700px) { .crumb { display: none; } }
@media (max-width: 600px) { .brand span { display: none; } }
@media (max-width: 460px) { #soundBtn { display: none; } }
@media (max-width: 420px) { .top-actions { gap: 4px; } .icon-btn { width: 36px; height: 36px; } .login-link { height: 36px; padding: 0 10px 0 9px; gap: 6px; border-radius: 11px; font-size: 13px; } .ic.discord { width: 18px; height: 18px; } .user-btn { height: 36px; border-radius: 11px; } .user-btn .avatar { width: 26px; height: 26px; } }
@media (max-width: 374px) { .login-link { width: 36px; padding: 0; justify-content: center; } .login-link span { display: none; } }

/* ---------- layout ---------- */
.app { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 28px; }
.title-row { text-align: center; padding: 6px 0 2px; }
/* the title: its pieces flip in like tiles when the page opens, the site's gradient sweeps across "Wow" once and rests,
   and every 9 s the d, l and e flip over like tiles while "Wow" flares (transforms and opacity only; the entrance and
   the loop sit on different elements). The title moves unless the visitor chose Calm (here or on the front page), and
   its loops rest while it is out of the window or the tab is hidden (.rest, set by the script). The flare's bright copy
   of "Wow" is generated content with an empty spoken text, so the heading's own text holds the word once. */
.logo { margin: 0; font: 700 clamp(34px, 9vw, 52px)/1 var(--display); letter-spacing: -.04em; --k-flip: none; --k-shine: none; }   /* the perspective lives in the keyframes: a 3D context on the h1 kept the re-flips partly on the main thread */
html:not(.motion-reduced) .logo { --k-flip: logo-flip; --k-shine: logo-shine; }   /* the entrance exists only while motion runs (its name is `none` otherwise), so a still page shows the whole title */
.logo > * { display: inline-block; font-weight: inherit; animation: var(--k-flip) .7s var(--ease) both; animation-delay: calc(.1s + var(--i, 0) * 90ms); }
.logo > :nth-child(2) { --i: 1; } .logo > :nth-child(3) { --i: 2; } .logo > :nth-child(4) { --i: 3; }
.logo > b > i { display: inline-block; font-style: normal; animation: logo-reflip 9s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 110ms); }
.logo .grad { position: relative; background: linear-gradient(90deg, var(--purple), var(--pink) 28%, var(--gold) 50%, var(--pink) 72%, var(--purple)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  animation: var(--k-flip) .7s var(--ease) both, var(--k-shine) 2.4s var(--ease) 1 both; animation-delay: .1s, .5s; }
.logo .grad::after { content: attr(data-flare); content: attr(data-flare) / ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #f3d7ff, #ffd9ee 50%, #fff0c2); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; animation: logo-flare 9s var(--ease) infinite; }
.logo.rest, .logo.rest *, .logo.rest *::before, .logo.rest *::after { animation-play-state: paused !important; }
@keyframes logo-flip { from { opacity: 0; transform: perspective(400px) rotateX(-90deg) translateY(.2em); } }
@keyframes logo-reflip { 0%, 88% { transform: perspective(400px) rotateX(0); } 100% { transform: perspective(400px) rotateX(360deg); } }
@keyframes logo-flare { 0%, 84%, 100% { opacity: 0; } 92%, 96% { opacity: .8; } }
@keyframes logo-shine { to { background-position: 200% 0; } }
.tagline { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }

/* difficulty switch: three options, a thumb that slides to the chosen one (--i) in that difficulty's colours (data-diff) */
.diff-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -2px; }
.diff-switch { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--line); width: min(100%, 380px); --sw: var(--medium); --sw-2: var(--medium-2); --sw-3: var(--medium-3); }
.diff-switch[data-diff="easy"] { --sw: var(--easy); --sw-2: var(--easy-2); --sw-3: var(--easy-3); }
.diff-switch[data-diff="insane"] { --sw: var(--insane); --sw-2: var(--insane-2); --sw-3: var(--insane-3); }
.diff-switch .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: linear-gradient(135deg, var(--sw-2), var(--sw) 70%, var(--sw-3)); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--sw) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.18); transform: translateX(calc(var(--i, 1) * 100%)); transition: transform .45s var(--bounce), background .5s, box-shadow .5s; }
.diff-switch label { position: relative; display: block; z-index: 1; min-width: 0; }
.diff-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.diff-switch span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; transition: color .25s; white-space: nowrap; }
.diff-switch span .ic { width: 16px; height: 16px; }
.diff-switch input:checked + span { color: #fff; }
.diff-switch input:hover:not(:checked) + span { color: var(--text); }
.diff-switch input:focus-visible + span { outline: 2px solid var(--sw); outline-offset: 2px; }
/* on a visit to another difficulty's daily (the Next button, the Today card) the player's own difficulty wears a dot */
.diff-switch label.home span::after { content: ""; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold); animation: fade .4s both; }
.diff-switch.small { width: 100%; max-width: 340px; margin: 0 0 10px; }
.diff-switch.small span { padding: 6px 4px; font-size: 12.5px; gap: 5px; }
.diff-switch.small span .ic { width: 14px; height: 14px; }
.diff-line { margin: 0; color: var(--dim); font-size: 12.5px; text-align: center; min-height: 1.5em; }
@media (max-width: 374px) { .diff-switch span { font-size: 12.5px; gap: 4px; padding: 8px 2px; } }
/* difficulty pill: on the puzzle title, the result card, the Streak hero and HUD */
.diff-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font: 700 11px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--dc, var(--acc)); background: color-mix(in srgb, var(--dc, var(--acc)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dc, var(--acc)) 45%, transparent); vertical-align: middle; white-space: nowrap; }
.diff-pill .ic { width: 12px; height: 12px; }
.puzzle-title .diff-pill { vertical-align: 3px; }

/* mode tabs */
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.mode-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; min-width: 0; }
.mode-tab .ic { width: 17px; height: 17px; }
.mode-tab kbd { opacity: .55; }
.mode-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.mode-tab[aria-selected="true"] { color: #fff; background: var(--acc-grad); box-shadow: 0 8px 22px -10px var(--acc-glow); }
.mode-tab[aria-selected="true"] kbd { opacity: .8; background: rgba(0,0,0,.25); }
/* a dot in the corner once today's daily (at the difficulty in play) is done */
.tab-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; display: none; }
.mode-tab[data-done="won"] .tab-dot { display: block; background: var(--c-correct); box-shadow: 0 0 6px color-mix(in srgb, var(--c-correct) 80%, transparent); }
.mode-tab[data-done="lost"] .tab-dot { display: block; background: var(--red); }
.mode-tab[aria-selected="true"] .tab-dot { box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
@media (max-width: 560px) { .mode-tab { padding: 9px 2px; font-size: 13px; gap: 5px; } .mode-tab kbd { display: none; } }
@media (max-width: 360px) { .mode-tab .ic { display: none; } }

/* bar: daily/endless + filter + meta */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.seg input:checked + span { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.seg input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.seg input:hover:not(:checked) + span { color: var(--text); background: rgba(255,255,255,.05); }
.seg.small span { padding: 6px 10px; font-size: 12.5px; }
.bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
select { appearance: none; -webkit-appearance: none; padding: 8px 32px 8px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0,0,0,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a4b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; max-width: 100%; }
select:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
select option { background: #1a1826; color: var(--text); }
/* Endless: how much of the chosen pool this browser has seen, next to the expansion filter */
.pool-meter { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-track { display: block; width: 56px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.pm-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--acc-2), var(--acc)); transition: width .6s var(--ease); }
.pool-meter.full .pm-fill { background: var(--gold); }
.pool-meter.full { color: var(--muted); }
.daily-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-num { font: 700 14px var(--display); color: var(--text); padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.meta-sep { color: var(--dim); }
/* today's nine dailies: a row per difficulty, a dot per mode; click one to jump to it */
.pips-wrap { display: inline-flex; align-items: center; gap: 7px; }
.day-pips { display: grid; grid-template-columns: repeat(3, 14px); grid-auto-rows: 14px; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: border-color .4s, box-shadow .4s; }
.day-pips.all { border-color: rgba(229,204,128,.55); box-shadow: 0 0 14px -3px rgba(229,204,128,.6); }
.pip { position: relative; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.pip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); background: transparent; transition: background .3s, border-color .3s, transform .2s var(--bounce); }
.pip[data-state="open"]::before { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 35%, transparent); }
.pip[data-state="won"]::before { border-color: var(--dc); background: var(--dc); box-shadow: 0 0 6px color-mix(in srgb, var(--dc) 70%, transparent); animation: chip-pop .5s var(--bounce) both; }
.pip[data-state="lost"]::before { border-color: transparent; background: rgba(244,63,94,.6); }
.pip[data-state="none"] { cursor: default; } .pip[data-state="none"]::before { border-style: dashed; opacity: .4; }
.pip.cur { box-shadow: 0 0 0 1.5px var(--dc); }
.pip:hover:not([disabled])::before { transform: scale(1.3); }
.pip:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.pips-n { font: 700 12.5px var(--display); color: var(--muted); }

/* ---------- the first screen, compact ----------
   The puzzle starts on the first screen. The title is one small line with the day's chip and Versus beside it (the deck),
   and the controls that are rarely changed (Daily or Endless with its filter, and the difficulty) share one row under the
   tabs. What used to stand above the board is one tap away: the nine dailies and the countdown in the Today card, the
   difficulty's line as it changes, Versus behind its chip. The tiles give a little on a short window, so the board and
   the keyboard stay on one screen. */
.deck { display: flex; align-items: center; gap: 10px 14px; min-height: 40px; }
.deck .logo { font-size: clamp(27px, 7vw, 32px); flex: none; }
.deck .tagline { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-chips { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 700px) { .deck .tagline { display: none; } }
.today-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px 0 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 42%, transparent); background: color-mix(in srgb, var(--acc) 10%, rgba(0,0,0,.3)); color: var(--text); cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.today-btn:hover { border-color: var(--acc); transform: translateY(-1px); box-shadow: 0 14px 30px -16px var(--acc-glow); }
.today-btn .rd-pips { background: rgba(0,0,0,.25); }
.tb-text { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tb-text b { font: 700 13.5px var(--display); letter-spacing: .01em; }
.tb-text small { font: 700 12.5px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.today-btn.all { border-color: rgba(229,204,128,.6); box-shadow: 0 0 16px -4px rgba(229,204,128,.6); }
.today-btn.clear .tb-text small { color: var(--gold); }
.today-btn.bump { animation: chip-pop .55s var(--bounce); }
.today-btn.bump .tb-text small { display: inline-block; animation: today-count .9s var(--ease); }
@keyframes today-count { 0% { color: #fff; text-shadow: 0 0 12px var(--acc); transform: scale(1.35); } 100% { transform: none; } }
.deck-chips .versus-entry { gap: 7px; height: 38px; padding: 0 13px 0 4px; width: auto; border-radius: 999px; }
.deck-chips .ve-badge { width: 30px; height: 30px; }
.deck-chips .ve-badge .ic { width: 16px; height: 16px; }
.deck-chips .ve-text small { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.deck-chips .versus-entry.note { border-color: var(--gold); }
@media (max-width: 560px) {
  .deck { gap: 8px; } .deck .logo { font-size: 25px; } .deck-chips { gap: 6px; }
  .today-btn { padding: 0 10px 0 5px; gap: 6px; } .today-btn .rd-pips { grid-template-columns: repeat(3, 6px); gap: 2px; padding: 3px; } .today-btn .rd-pip { width: 6px; height: 6px; border-width: 1px; }
  .deck-chips .versus-entry { padding: 0 10px 0 4px; gap: 6px; } .deck-chips .ve-badge { width: 28px; height: 28px; }
}
@media (max-width: 374px) { .deck-chips .versus-entry { padding: 0 4px; } .deck-chips .ve-text b { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } }   /* the swords alone: the name stays for a screen reader */
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: -4px; }
.controls > .bar { display: contents; }
.controls .kind { order: 1; }
.controls .diff-row { order: 2; margin: 0 0 0 auto; flex: none; }
.controls .bar-right { order: 3; flex: 1 1 100%; flex-wrap: nowrap; min-width: 0; }
.controls .exp-pick { flex: 0 1 250px; min-width: 0; }
.controls .exp-pick select { width: 100%; text-overflow: ellipsis; }
.controls .pool-meter { flex: none; }
.controls .diff-switch.small { margin: 0; width: auto; max-width: none; }
.controls .diff-switch.small span { padding: 7px 13px; }
@media (max-width: 560px) {
  .app { gap: 10px; }
  .controls { gap: 8px; }
  .controls .seg.kind span { padding: 7px 8px; }
  .controls .diff-switch.small span { padding: 7px 6px; font-size: 12px; }
  .controls .diff-switch.small span .ic { display: none; }
  .play { padding: 14px 12px 16px; gap: 12px; }
  .panel-word { gap: 14px; }
  .top .wrap { padding: 10px 0; }
  .app .key { height: 46px; }
}
@media (max-width: 374px) { .controls { gap: 6px; } .controls .seg.kind span { padding: 7px 6px; font-size: 12px; } .controls .diff-switch.small span { padding: 7px 4px; font-size: 11.5px; } }
@media (max-width: 340px) { .controls .seg.kind span { padding: 7px 4px; font-size: 11.5px; } .controls .diff-switch.small span { padding: 7px 2px; font-size: 11px; } .controls .pm-track { width: 36px; } }
/* on a phone the locked hints fold into one chip; a tap opens them (the script counts them and says when the next one comes) */
.chip.fold { display: none; cursor: pointer; border-style: dashed; color: var(--muted); background: transparent; }
.chip.fold .ic { color: var(--dim); }
.chip.fold:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
@media (max-width: 560px) {
  .chip.fold:not([hidden]) { display: inline-flex; }
  .chips:not(.open):not(.nofold) .chip.locked { display: none; }
  .chips.open .chip.fold { border-style: solid; }
  .chips.open .chip.fold small { display: none; }
}
/* the Today card: a row per difficulty, a column per mode; a cell shows its state and plays it. A solved cell wears the
   rarity colour of its guess count (--rc), as the result card does; the row keeps the difficulty's colour (--dc). */
.dlg.today { width: min(100%, 480px); }
.dlg.today .dlg-title .meta-num { font-size: 13px; }
.today-sum { margin: -6px 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.today-sum b { color: var(--text); }
.today-grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 9px 8px; align-items: stretch; margin-bottom: 18px; }
.tg-col { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tg-col .ic { width: 14px; height: 14px; }
.tg-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding-right: 2px; }
.tg-row small { color: var(--dim); font-size: 10.5px; white-space: nowrap; padding-left: 3px; }
.tcell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 60px; padding: 8px 4px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--dc) 45%, transparent); background: color-mix(in srgb, var(--dc) 6%, transparent); color: var(--text); cursor: pointer; transition: transform .2s var(--bounce), border-color .2s, background .2s, box-shadow .2s; }
.tcell b { font: 700 18px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.tcell small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tcell:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--dc); box-shadow: 0 12px 26px -16px var(--dc); }
.tcell:focus-visible { outline: 2px solid var(--dc); outline-offset: 2px; }
.tcell[data-state="new"] b { color: var(--dc); font-size: 15px; }
.tcell[data-state="open"] { border-style: solid; background: color-mix(in srgb, var(--dc) 15%, transparent); }
.tcell[data-state="won"] { border-style: solid; border-color: color-mix(in srgb, var(--rc, var(--dc)) 80%, transparent); background: color-mix(in srgb, var(--rc, var(--dc)) 13%, transparent); box-shadow: inset 0 0 20px -9px var(--rc, var(--dc)); }
.tcell[data-state="won"] b { color: color-mix(in srgb, var(--rc, var(--dc)) 70%, #fff); }
.tcell[data-state="lost"] { border-style: solid; border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.08); }
.tcell[data-state="lost"] b { color: #ff8fa3; }
.tcell[data-state="none"] { opacity: .45; cursor: default; }
.tcell.cur::after { content: "on the board"; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); padding: 0 7px; border-radius: 999px; font: 700 9px/1.7 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: color-mix(in srgb, var(--dc) 80%, #000); white-space: nowrap; }
.dlg.today .tcell { animation: chip-pop .45s var(--bounce) backwards; animation-delay: calc(var(--n, 0) * 35ms); }   /* backwards, not both: a cell that keeps its last frame keeps a layer of its own, and the card's sheen then shows a seam */
.today-grid.all { filter: drop-shadow(0 0 14px rgba(229,204,128,.25)); }
.today-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .today-grid { gap: 9px 6px; } .tg-row small { display: none; } .tcell { min-height: 56px; } }

/* ---------- play area ---------- */
.play { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 16px 20px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--surface); min-height: 420px; position: relative; overflow: hidden; }
.play::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--acc-2), var(--acc) 55%, var(--gold)); opacity: .45; }
/* switching difficulty: a wash of the new colour breathes across the card */
.play.swap::before { content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 30%, transparent), transparent 72%); animation: swap-wash 1s var(--ease) both; }
@keyframes swap-wash { 0% { opacity: 0; transform: scale(.55); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
.puzzle-head { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; text-align: center; }
.puzzle-title { margin: 0; font: 700 clamp(18px, 4.6vw, 22px)/1.2 var(--display); letter-spacing: -.02em; }
.puzzle-title small { display: block; color: var(--dim); font: 500 12.5px var(--font); letter-spacing: 0; margin-top: 2px; }
.puzzle-title small.said { color: color-mix(in srgb, var(--dc, var(--acc)) 75%, #fff); animation: fade .35s both; }   /* what the difficulty means, for a few seconds after it changes */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.2; transition: background .3s, border-color .3s, color .3s, transform .3s var(--bounce); }
.chip .ic { width: 13px; height: 13px; color: var(--acc); }
.chip small { color: var(--dim); font-weight: 500; font-size: 11px; }
.chip.cat { border-color: color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.chip.len { color: var(--muted); }
.chip.locked { color: var(--dim); background: transparent; border-style: dashed; cursor: default; }
.chip.locked .ic { color: var(--dim); }
.chip.never { opacity: .6; } /* a hint this difficulty never gives: shown crossed, so the stinginess is part of the deal */
.chip.never .lock { display: none; }
.chip.never::before { content: "\2715"; font-size: 10px; line-height: 1; color: var(--dim); }
.chip.unlocked { color: var(--text); border-color: rgba(229,204,128,.45); background: rgba(229,204,128,.1); border-style: solid; animation: chip-pop .5s var(--bounce) both; }
.chip.unlocked .ic { color: var(--gold); }
.chip.unlocked small { display: none; }
.chip.unlocked .lock { display: none; }
.chip.unlocked::before { content: "\2726"; color: var(--xc, var(--gold)); font-size: 11px; line-height: 1; }
.chip.exp-chip.unlocked { border-color: var(--xc, var(--gold)); background: color-mix(in srgb, var(--xc, var(--gold)) 16%, transparent); }
@keyframes chip-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.done-row { display: flex; gap: 8px; justify-content: center; }

/* ---------- word board ---------- */
.panel-word { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
/* tiles and gaps shrink together, so an 11-letter word still fits a 320px phone */
.board { display: grid; --gap: clamp(3px, (100vw - 200px) / 30, 6px); gap: var(--gap); --cols: 5; --tile: clamp(18px, min(52px, (100vw - 72px - (var(--cols) - 1) * var(--gap)) / var(--cols)), 56px); }
/* ...and by the window's height: --fit is what the script measured as left for a row once everything above the board and
   the keyboard under it have their place (fitBoard); never under 36 px, never over 52, and 52 where nothing was measured. */
.app .board { --tall: clamp(36px, var(--fit, 52px), 52px); --tile: clamp(18px, min(var(--tall), (100vw - 72px - (var(--cols) - 1) * var(--gap)) / var(--cols)), 56px); }
/* a hint that unlocks in the middle of a puzzle adds a row of chips above the board: the tiles then give in one soft move
   (the script sets .refit for that moment only; a browser that cannot tween a length it was told about just steps) */
@property --tile { syntax: '<length>'; inherits: true; initial-value: 52px; }
.board.refit { transition: --tile .35s var(--ease); }
/* on a phone the keyboard is the only way to type, so there the tiles give a little further (30 px) before a key is cut */
@media (max-width: 560px) { .app .board { --tall: clamp(30px, var(--fit, 52px), 52px); } }
.row { display: grid; grid-template-columns: repeat(var(--cols), var(--tile)); gap: var(--gap); }
.tile { position: relative; width: var(--tile); height: var(--tile); display: grid; place-items: center; border-radius: 9px; border: 2px solid var(--line-2); background: var(--c-empty); font: 700 calc(var(--tile) * .5) var(--display); color: var(--text); text-transform: uppercase; user-select: none; transition: border-color .15s, transform .15s var(--bounce), background .2s; }
.tile.filled { border-color: rgba(255,255,255,.4); animation: tile-in .12s var(--bounce); }
@keyframes tile-in { from { transform: scale(.85); } to { transform: none; } }
.tile[data-state="c"] { background: var(--c-correct); border-color: var(--c-correct); color: #fff; }
.tile[data-state="p"] { background: var(--c-present); border-color: var(--c-present); color: #fff; }
.tile[data-state="a"] { background: var(--c-absent); border-color: var(--c-absent); color: #cfcbdc; }
.tile.flip { animation: flip .6s var(--ease) both; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
.tile.bounce { animation: bounce .75s var(--ease) both; }
@keyframes bounce { 0%, 20% { transform: translateY(0); } 40% { transform: translateY(-28%); } 55% { transform: translateY(6%); } 70% { transform: translateY(-12%); } 85% { transform: translateY(2%); } 100% { transform: translateY(0); } }
.row.shake { animation: shake .5s var(--ease); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
.row.won .tile { box-shadow: 0 0 18px -4px color-mix(in srgb, var(--c-correct) 80%, transparent); }
.tile.hinted { border-color: rgba(229,204,128,.6); color: var(--gold); }

/* keyboard */
.keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.krow { display: flex; justify-content: center; gap: 5px; }
.key { flex: 1 1 0; max-width: 44px; height: 50px; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: var(--text); font: 600 14px var(--font); text-transform: uppercase; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .08s, color .3s; }
.key:hover { background: rgba(255,255,255,.16); }
.key:active { transform: scale(.94); }
.key.wide { flex: 1.6 1 0; max-width: 72px; font-size: 12px; }
.key .ic { width: 20px; height: 20px; }
.key[data-state="c"] { background: var(--c-correct); color: #fff; }
.key[data-state="p"] { background: var(--c-present); color: #fff; }
.key[data-state="a"] { background: var(--c-absent); color: var(--dim); }
@media (max-width: 380px) { .key { height: 46px; font-size: 13px; } .krow { gap: 4px; } .keyboard { gap: 5px; } }

/* ---------- pick panel (icon + quote) ---------- */
.panel-pick { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 520px; }
.icon-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.icon-frame { position: relative; width: clamp(160px, 46vw, 220px); aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #0b0a12; isolation: isolate;
  box-shadow: 0 0 0 3px #3a3047, 0 0 0 5px rgba(229,204,128,.35), 0 24px 60px -24px rgba(163,53,238,.55); }
.icon-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 40px rgba(0,0,0,.35); pointer-events: none; }
.icon-frame img { display: block; width: 100%; height: 100%; image-rendering: pixelated; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .9s var(--ease), filter .9s var(--ease); will-change: transform, filter; }
.icon-frame.r0 img { transform: scale(4.6); filter: blur(6px) saturate(1.15); }
.icon-frame.r1 img { transform: scale(3.6); filter: blur(4.5px) saturate(1.1); }
.icon-frame.r2 img { transform: scale(2.8); filter: blur(3.2px); }
.icon-frame.r3 img { transform: scale(2.2); filter: blur(2.2px); }
.icon-frame.r4 img { transform: scale(1.7); filter: blur(1.3px); }
.icon-frame.r5 img { transform: scale(1.3); filter: blur(.6px); }
.icon-frame.r6 img { transform: none; filter: none; image-rendering: auto; }
.icon-frame.r6 { box-shadow: 0 0 0 3px #3a3047, 0 0 0 5px rgba(229,204,128,.6), 0 24px 70px -20px color-mix(in srgb, var(--win) 70%, transparent); }
.stage-note { margin: 0; color: var(--dim); font-size: 12.5px; }
.quote-card { position: relative; margin: 0; width: 100%; padding: 26px 26px 18px; border-radius: 20px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(163,53,238,.12), rgba(226,104,168,.05) 50%, transparent), rgba(0,0,0,.25); text-align: center; }
.quote-card::before { content: "\201C"; position: absolute; left: 14px; top: -6px; font: 700 64px/1 var(--display); color: color-mix(in srgb, var(--acc) 35%, transparent); }
.quote-card p { margin: 0; font: 600 clamp(17px, 4.6vw, 22px)/1.4 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.quote-card footer { margin-top: 12px; color: var(--dim); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.quote-card mark { background: none; color: var(--gold); border-bottom: 2px dashed rgba(229,204,128,.6); padding: 0 .1em; letter-spacing: .1em; }
.pick-form { display: flex; gap: 8px; width: 100%; }
.pick-input { position: relative; flex: 1; min-width: 0; }
.pick-input input { width: 100%; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line-2); background: rgba(0,0,0,.28); color: var(--text); font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.pick-input input::placeholder { color: var(--dim); }
.pick-input input:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.pick-input input:disabled { opacity: .5; }
.pick-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none; max-height: 262px; overflow-y: auto; border-radius: 14px; border: 1px solid var(--line-2); background: #1a1826; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9); scrollbar-width: thin; }
.pick-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-weight: 500; color: var(--muted); }
.pick-list li b { color: var(--text); font-weight: 700; }
.pick-list li.active, .pick-list li:hover { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--text); }
.pick-list li .sub { margin-left: auto; color: var(--dim); font-size: 11.5px; font-weight: 500; }
.pick-list li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-list .none { color: var(--dim); cursor: default; font-size: 13px; }
.pick-list .none:hover { background: transparent; }
.pick-form .btn { padding: 11px 16px; }
.pick-form.shake { animation: shake .5s var(--ease); }
.guesses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.guesses li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.guesses li.in { animation: slide-in .35s var(--ease) both; }
.guesses li .mark { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; color: #fff; font-weight: 700; font-size: 12px; background: var(--c-absent); }
.guesses li.hit .mark { background: var(--c-correct); }
.guesses li .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.guesses li .t { color: var(--dim); font-size: 12px; }
.guesses li.hit { border-color: color-mix(in srgb, var(--c-correct) 55%, transparent); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- streak ---------- */
.streak-start, .streak-over { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 480px; text-align: center; padding: 6px 0; }
.streak-hero h2 { margin: 10px 0 6px; font: 700 clamp(26px, 7vw, 36px)/1.1 var(--display); letter-spacing: -.03em; }
.streak-hero p { margin: 0; color: var(--muted); max-width: 46ch; }
.streak-hero .streak-diff { margin: 12px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; color: var(--dim); font-size: 12.5px; max-width: none; }
.streak-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; text-align: left; }
.opt-group { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.opt-group legend, .opt-group .legend { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 0; margin-bottom: 2px; }
.opt-group select { width: 100%; }
.check { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.check .box { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); display: grid; place-items: center; transition: background .2s, border-color .2s; flex: none; }
.check .box::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity .15s; }
.check input:checked + .box { background: var(--acc-grad); border-color: transparent; }
.check input:checked + .box::after { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--acc); outline-offset: 2px; }
.streak-best { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 13.5px; }
.streak-best > div { display: flex; align-items: baseline; gap: 10px; }
.streak-best b { font: 700 22px var(--display); color: var(--text); }
.streak-best small { color: var(--dim); font-size: 12px; } /* the other two difficulties' bests */
.btn.big { padding: 14px 26px; font-size: 16px; border-radius: 16px; }
.streak-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(255,128,0,.25); background: linear-gradient(90deg, rgba(255,128,0,.12), transparent 60%); }
.hud-count { display: flex; align-items: center; gap: 10px; }
.hud-count b { font: 700 30px/1 var(--display); letter-spacing: -.03em; min-width: 1.2ch; text-align: center; display: inline-block; }
.hud-count b.pop { animation: pop-num .5s var(--bounce); }
@keyframes pop-num { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: var(--gold); } 100% { transform: scale(1); } }
.hud-label { color: var(--muted); font-size: 13px; }
.hud-right { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.hud-right b { color: var(--text); }
/* flame: three layered blobs that flicker */
.flame { position: relative; width: 26px; height: 34px; flex: none; }
.flame i { position: absolute; left: 50%; bottom: 0; translate: -50% 0; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; transform-origin: 50% 100%; }
.flame i:nth-child(1) { width: 26px; height: 34px; background: radial-gradient(60% 70% at 50% 85%, #ff8000, #e2463a 70%, transparent 100%); filter: blur(1px); opacity: .9; }
.flame i:nth-child(2) { width: 16px; height: 24px; background: radial-gradient(60% 70% at 50% 85%, #ffd166, #ff8000 75%, transparent); }
.flame i:nth-child(3) { width: 8px; height: 13px; background: radial-gradient(60% 70% at 50% 85%, #fff7d6, #ffd166 80%, transparent); }
.flame.big { width: 56px; height: 72px; margin-inline: auto; }
.flame.big i:nth-child(1) { width: 56px; height: 72px; } .flame.big i:nth-child(2) { width: 34px; height: 50px; } .flame.big i:nth-child(3) { width: 16px; height: 26px; }
.flame.dim { opacity: .45; filter: saturate(.5); }
.flame.hot i:nth-child(1) { background: radial-gradient(60% 70% at 50% 85%, #e268a8, #a335ee 70%, transparent 100%); }
.flame.hot i:nth-child(2) { background: radial-gradient(60% 70% at 50% 85%, #ffd166, #e268a8 75%, transparent); }
@keyframes flicker { 0%, 100% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.08) scaleX(.95) rotate(-2deg); } 60% { transform: scaleY(.94) scaleX(1.05) rotate(2deg); } }
.over-count { display: flex; flex-direction: column; align-items: center; }
.over-count b { font: 700 clamp(56px, 18vw, 84px)/1 var(--display); letter-spacing: -.04em; background: linear-gradient(90deg, #ffd166, #ff8000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.over-count span { color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.over-note { margin: 0; color: var(--gold); font-weight: 600; }
.over-answer { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--muted); font-size: 13.5px; text-align: left; max-width: 100%; }
.over-answer img { width: 40px; height: 40px; border-radius: 8px; flex: none; }
.over-answer b { color: var(--text); display: block; font-size: 15px; }
.over-rep { margin: -6px 0 0; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.over-rep b { color: var(--text); font-family: var(--display); }
.milestone { position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 5; pointer-events: none; padding: 10px 22px; border-radius: 999px; font: 700 clamp(20px, 6vw, 30px) var(--display); color: #fff; background: linear-gradient(135deg, #ff8000, #e268a8); box-shadow: 0 20px 50px -14px rgba(255,128,0,.8); animation: milestone 1.6s var(--ease) both; white-space: nowrap; }
@keyframes milestone { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1.1); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(.95); } }

.streak-note { margin: -6px 0 0; color: var(--dim); font-size: 12.5px; max-width: 44ch; line-height: 1.5; }
.streak-note a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.streak-note a:hover { color: var(--text); }
.ranked-pill, .hud-ranked { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffd166; background: rgba(255,128,0,.14); border: 1px solid rgba(255,128,0,.4); vertical-align: middle; }
.ranked-pill::before, .hud-ranked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 8px #ff8000; }
.streak-note .ranked-pill { margin-right: 6px; }
.hud-ranked { margin-left: 4px; }
.hud-diff { display: inline-flex; margin-left: 4px; }
.hud-diff:empty { display: none; }
@media (max-width: 420px) { .hud-ranked { display: none; } .hud-diff .diff-pill { padding: 3px 5px; } .hud-diff .diff-pill span { display: none; } .hud-diff .diff-pill .ic { width: 13px; height: 13px; } }
@media (max-width: 360px) { .hud-label { display: none; } .streak-hud { padding: 10px; gap: 8px; } .hud-count { gap: 8px; } .hud-right { gap: 8px; } .hud-right .mini-btn { white-space: nowrap; padding: 6px 8px; } }

/* ---------- daily: skeleton while loading, offline state ---------- */
.daily-status { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.skel { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; animation: fade .35s .12s both; } /* the short delay keeps a fast answer from flashing a skeleton */
.skel-title, .skel-chips i, .skel-board i, .skel-board .skel-bar, .skel-board .skel-card, .skel-board .skel-square, .lb-skel li i, .lb-skel li b, .lb-skel li span { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 75%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-title { width: 190px; height: 22px; margin-top: 2px; }
.skel-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.skel-chips i { width: 74px; height: 26px; border-radius: 999px; }
.skel-chips i:nth-child(2) { width: 62px; } .skel-chips i:nth-child(3) { width: 90px; } .skel-chips i:nth-child(4) { width: 56px; }
.skel-board { --cols: 5; --tile: clamp(28px, min(52px, (100vw - 72px - (var(--cols) - 1) * 6px) / var(--cols)), 56px); margin-top: 6px; }
.skel-board[data-mode="word"] { display: grid; grid-template-columns: repeat(var(--cols), var(--tile)); gap: 6px; }
.skel-board[data-mode="word"] i { width: var(--tile); height: var(--tile); border-radius: 9px; }
.skel-board[data-mode="icon"], .skel-board[data-mode="quote"] { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 520px; }
.skel-board .skel-square { width: clamp(160px, 46vw, 220px); aspect-ratio: 1; border-radius: 22px; box-shadow: 0 0 0 3px #2a2335; }
.skel-board .skel-card { width: 100%; height: 118px; border-radius: 20px; }
.skel-board .skel-bar { width: 100%; height: 46px; border-radius: 13px; }
.offline { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 440px; padding: 26px 8px 8px; text-align: center; animation: fade .3s both; }
.offline-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--pink); background: rgba(226,104,168,.1); border: 1px solid rgba(226,104,168,.3); margin-bottom: 4px; }
.offline-ic .ic { width: 28px; height: 28px; }
.offline h3 { margin: 0; font: 700 clamp(18px, 4.8vw, 22px)/1.2 var(--display); letter-spacing: -.02em; }
.offline p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.skel-board[data-mode="word"] ~ .skel-keys { display: flex; }
.skel-keys { display: none; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 520px; margin-top: 12px; }
.skel-keys i { display: block; height: 50px; border-radius: 8px; background: rgba(255,255,255,.05); }
.skel-keys i:nth-child(1) { width: 100%; } .skel-keys i:nth-child(2) { width: 90%; } .skel-keys i:nth-child(3) { width: 100%; }
@media (max-width: 380px) { .skel-keys i { height: 46px; } .skel-keys { gap: 5px; } }
/* a guess on its way to the score server: only shows when the answer takes a moment */
.row.pending .tile.filled, .pick-form.pending .pick-input input { animation: pending 1s ease-in-out .3s infinite; }
@keyframes pending { 50% { opacity: .55; } }
.icon-frame.loading img { opacity: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease), filter .15s; }
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.btn.primary { border-color: transparent; color: #fff; background: var(--acc-grad); box-shadow: 0 10px 28px -12px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255,255,255,.05); }
.btn.ok { border-color: rgba(45,212,191,.5); color: #9ff3e6; background: rgba(45,212,191,.1); }
.btn.danger { border-color: rgba(244,63,94,.5); color: #ffb4c0; background: rgba(244,63,94,.1); }
.btn.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.discord { background: linear-gradient(180deg, #6571f3, #5865f2); box-shadow: 0 10px 28px -12px rgba(88,101,242,.9), inset 0 1px 0 rgba(255,255,255,.14); }
.btn.discord .ic { fill: currentColor; stroke: none; }
.btn[disabled], .mini-btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.mini-btn .ic { width: 14px; height: 14px; }
.mini-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.mini-btn.danger:hover { color: #ffb4c0; border-color: rgba(244,63,94,.45); }
.mini-btn.armed { color: #fff; background: var(--red); border-color: var(--red); }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 480px) { .win-actions { flex-direction: column; } .win-actions .btn { width: 100%; } }

/* ---------- footer ---------- */
.foot { padding: 20px 0 28px; color: var(--dim); font-size: 12.5px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
.foot a { color: var(--muted); } .foot a:hover { color: var(--text); }

/* ---------- dialogs ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade .25s both;
  background: radial-gradient(60% 55% at 50% 40%, color-mix(in srgb, var(--win) 22%, transparent), transparent 70%), rgba(6,5,10,.74); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.94); } 60% { transform: translateY(-3px) scale(1.01); } to { opacity: 1; transform: none; } }
.dlg { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 24px 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--surface);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); animation: pop .45s var(--ease) both; outline: none; scrollbar-width: thin; }
.dlg.wide { width: min(100%, 600px); }
.dlg.result { text-align: center; box-shadow: 0 40px 100px -30px color-mix(in srgb, var(--win) 70%, transparent), 0 0 0 1px rgba(0,0,0,.4); }
.dlg.result::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--win) 80%, white 20%), transparent 40%, transparent 60%, color-mix(in srgb, var(--win) 60%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.close-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.close-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
.dlg-title { margin: 0 0 14px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.sub { margin: 20px 0 10px; font: 600 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 12px; }
.sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hint { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin: 0 0 14px; }
.eyebrow::before, .eyebrow::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--parse); }
.dlg.result .eyebrow { color: color-mix(in srgb, var(--win) 70%, white 30%); }
.dlg.result[data-rarity="poor"] .eyebrow { color: var(--muted); }

/* lore card */
.lore-card { display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--win) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--win) 14%, transparent), transparent 60%), rgba(0,0,0,.2); }
.lore-icon { position: relative; flex: none; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; background: #0b0a12; box-shadow: 0 0 0 2px color-mix(in srgb, var(--win) 85%, white 15%), 0 0 0 4px rgba(0,0,0,.5), 0 16px 40px -14px var(--win); animation: icon-in .6s var(--bounce) both; }
.lore-icon img { display: block; width: 100%; height: 100%; }
.lore-icon.none { display: grid; place-items: center; color: var(--win); font: 700 30px var(--display); }
.lore-icon.none img { display: none; }
@keyframes icon-in { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lore-text { min-width: 0; flex: 1; }
.lore-name { margin: 0 0 6px; font: 700 clamp(20px, 5vw, 26px)/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; color: color-mix(in srgb, var(--win) 55%, white 45%); }
.dlg.result[data-rarity="poor"] .lore-name { color: var(--text); }
.lore-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.tag.exp { color: #fff; border-color: transparent; background: var(--xc, var(--purple)); }
.tag.diff { display: inline-flex; align-items: center; gap: 4px; color: var(--dc, var(--dim)); border-color: color-mix(in srgb, var(--dc, var(--dim)) 50%, transparent); background: color-mix(in srgb, var(--dc, var(--dim)) 12%, transparent); }
.tag.diff .ic { width: 11px; height: 11px; }
.lore-hint { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }
.lore-fact { margin: 0; font-size: 13.5px; line-height: 1.5; }
.result-grid { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 18px 0 6px; }
.result-grid .rg-row { display: flex; gap: 3px; }
.result-grid .rg { width: 16px; height: 16px; border-radius: 3px; background: var(--c-absent); }
.result-grid .rg[data-state="c"] { background: var(--c-correct); }
.result-grid .rg[data-state="p"] { background: var(--c-present); }
.result-line { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.result-rank { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 16px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0,0,0,.22); color: var(--muted); font-size: 13px; line-height: 1.35; animation: fade .3s both; }
.result-rank .ic { width: 15px; height: 15px; color: var(--gold); }
.result-rank b { color: var(--text); font-variant-numeric: tabular-nums; }
.result-rank.r1 { border-color: rgba(255,128,0,.5); background: rgba(255,128,0,.12); } .result-rank.r1 b { color: #ffb366; }
.result-rank.r2 { border-color: rgba(163,53,238,.5); background: rgba(163,53,238,.12); } .result-rank.r2 b { color: #d2a0f7; }
.result-rank.r3 { border-color: rgba(0,112,221,.55); background: rgba(0,112,221,.14); } .result-rank.r3 b { color: #7fb8ff; }
.result-rank a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
@media (max-width: 420px) { .result-rank { border-radius: 14px; } }
/* a solved daily: what it was worth on the overall board, and the standing it moved */
.result-rep { display: flex; flex-direction: column; gap: 8px; margin: -6px 0 16px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sc, var(--line-2)) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--sc, transparent) 12%, transparent), transparent 60%), rgba(0,0,0,.22); text-align: left; animation: fade .3s both; }
.result-rep .rr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.result-rep .rr-head b { color: var(--text); font: 700 15px var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.result-rep .rr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.result-next { margin: 14px 0 0; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
/* under a daily's result: the nine dots of today and "2 of 9 done today"; the countdown only after the ninth */
.result-day { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.result-day .result-next { margin: 0; }
.result-day.all .rd-text { color: var(--text); font-weight: 600; }
.result-day.clear .rd-text { color: var(--gold); }
.rd-pips { display: grid; grid-template-columns: repeat(3, 8px); gap: 3px; padding: 4px; border-radius: 7px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.rd-pip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); box-sizing: border-box; }
.rd-pip[data-state="open"] { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 35%, transparent); }
.rd-pip[data-state="won"] { border-color: var(--dc); background: var(--dc); box-shadow: 0 0 5px color-mix(in srgb, var(--dc) 70%, transparent); }
.rd-pip[data-state="lost"] { border-color: transparent; background: rgba(244,63,94,.6); }
.rd-pip[data-state="none"] { border-style: dashed; opacity: .4; }
.dlg.result .rd-pip[data-state="won"], .dlg.result .rd-pip[data-state="lost"] { animation: chip-pop .5s var(--bounce) .25s backwards; }
.result-day.clear .rd-pips { border-color: rgba(229,204,128,.55); box-shadow: 0 0 14px -3px rgba(229,204,128,.6); }
/* the ninth daily of the day, as it is finished: the line under the result has its moment (the script adds .finale as the
   card opens, with a burst of its own for a full clear), the nine dots come in one after another, and a full clear's words
   keep catching the light */
.result-day.finale { animation: day-finale .9s var(--bounce) .2s both; }
.dlg.result .result-day.finale .rd-pip { animation-delay: calc(.3s + var(--n, 0) * 70ms); }
@keyframes day-finale { 0% { transform: scale(.88); } 45% { transform: scale(1.14); } 100% { transform: none; } }
.result-day.clear .rd-text { background: linear-gradient(90deg, var(--gold) 30%, #fff 50%, var(--gold) 70%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html:not(.motion-reduced) .result-day.clear .rd-text { animation: st-shine 3.2s linear infinite; }
/* the result's main button, when it leads on to another difficulty, wears that difficulty's colour */
.btn.primary[data-diff] { background: linear-gradient(135deg, color-mix(in srgb, var(--dc) 72%, #000), var(--dc) 70%, color-mix(in srgb, var(--dc) 80%, #fff)); box-shadow: 0 10px 28px -12px var(--dc), inset 0 1px 0 rgba(255,255,255,.18); }
.mini-btn.go { color: #fff; border-color: transparent; background: var(--acc-grad); box-shadow: 0 6px 18px -10px var(--acc-glow); }
.mini-btn.go:hover { filter: brightness(1.08); color: #fff; }
.dlg.result .win-actions { margin-top: 4px; }
@media (max-width: 420px) { .lore-card { flex-direction: column; align-items: center; text-align: center; } .lore-tags { justify-content: center; } .dlg { padding: 24px 18px 18px; } }

/* stats */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.stat-tiles div { padding: 10px 6px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); text-align: center; }
.stat-tiles b { display: block; font: 700 24px/1.1 var(--display); letter-spacing: -.02em; }
.stat-tiles span { display: block; color: var(--dim); font-size: 11.5px; margin-top: 3px; }
@media (max-width: 380px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.dist { display: flex; flex-direction: column; gap: 5px; }
.dist .drow { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; font-size: 12.5px; }
.dist .dlabel { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.dist .dbar { height: 20px; border-radius: 5px; background: var(--c-absent); display: flex; align-items: center; justify-content: flex-end; padding: 0 7px; color: #fff; font-weight: 700; font-size: 12px; min-width: 24px; width: var(--w, 10%); transition: width .6s var(--ease); }
.dist .drow.hi .dbar { background: var(--c-correct); }
.dist .drow.fail .dbar { background: rgba(244,63,94,.6); }
.streak-stat { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,128,0,.25); background: rgba(255,128,0,.08); font-size: 13.5px; color: var(--muted); }
.streak-stat b { color: var(--text); font: 700 20px var(--display); }
.know-line { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
.know-line b { color: var(--text); }
.know { display: flex; flex-direction: column; gap: 6px; }
.know .krow2 { display: grid; grid-template-columns: minmax(84px, 110px) 1fr 44px; align-items: center; gap: 10px; font-size: 12.5px; }
.know .kname { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.know .ktrack { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.know .kfill { height: 100%; border-radius: 999px; background: var(--kc, var(--pink)); width: var(--w, 0%); transition: width .6s var(--ease); }
.know .kval { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.know .kval small { color: var(--dim); font-weight: 500; }
.know .empty { color: var(--dim); font-size: 13px; }

/* achievements */
.points { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--display); color: var(--gold); padding: 4px 10px; border-radius: 999px; background: rgba(229,204,128,.12); border: 1px solid rgba(229,204,128,.35); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 6px; }
.ach { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.2); min-width: 0; }
.ach.earned { border-color: rgba(229,204,128,.4); background: linear-gradient(135deg, rgba(229,204,128,.12), transparent 60%), rgba(0,0,0,.2); }
.ach .ach-shield { width: 38px; height: 44px; }
.ach:not(.earned) .ach-shield { filter: grayscale(1) brightness(.6); }
.ach .ach-text { min-width: 0; }
.ach b { display: block; font-size: 14px; }
.ach:not(.earned) b { color: var(--muted); }
.ach small { display: block; color: var(--dim); font-size: 12px; line-height: 1.4; }
.ach .when { color: var(--gold); }

/* WoW-style achievement toast. It says something and takes no press: a tap goes to what is under it (on a phone that is
   the Today chip, or a result card's close button), so it never stands in the way for its four seconds. */
.ach-toast { pointer-events: none; position: fixed; left: 50%; top: 18px; z-index: 80; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 14px; min-width: 260px; max-width: calc(100vw - 32px);
  color: #fff; background: linear-gradient(180deg, #3a2f12, #1a1508 60%, #120f06); border: 2px solid #c9a227; box-shadow: 0 0 0 1px #5a4a1c, 0 24px 60px -20px rgba(201,162,39,.9), inset 0 1px 0 rgba(255,236,170,.25); animation: ach-in .6s var(--bounce) both; }
.ach-toast.out { animation: ach-out .4s var(--ease) both; }
@keyframes ach-in { from { opacity: 0; transform: translateY(-40px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ach-out { to { opacity: 0; transform: translateY(-30px) scale(.95); } }
.ach-shield { position: relative; width: 40px; height: 46px; flex: none; display: grid; place-items: center; }
.ach-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ach-shield b { position: relative; font: 700 15px var(--display); color: #ffe9a8; text-shadow: 0 1px 0 #000; }
.ach-text { display: flex; flex-direction: column; line-height: 1.2; }
.ach-text small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffd66e; font-weight: 600; }
.ach-text b { font: 700 16px var(--display); color: #fff; }

/* archive */
.archive { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.archive li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.archive .anum { font: 700 14px var(--display); min-width: 42px; }
.archive .adate { color: var(--dim); font-size: 12.5px; }
.archive .amodes { display: flex; gap: 6px; }
.archive .am { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.archive .am:hover { color: var(--text); background: rgba(255,255,255,.08); }
.archive .am.won { color: #b9f0c6; border-color: rgba(58,166,85,.5); background: rgba(58,166,85,.12); }
.archive .am.lost { color: #ffb4c0; border-color: rgba(244,63,94,.4); background: rgba(244,63,94,.1); }
.archive .am .ic { width: 12px; height: 12px; }
.archive .am[disabled] { opacity: .4; cursor: default; pointer-events: none; }
.archive .aload { justify-content: center; color: var(--dim); font-size: 13px; display: flex; }
.archive-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(226,104,168,.3); background: rgba(226,104,168,.08); }
.archive-note p { margin: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 420px) { .archive li { grid-template-columns: 1fr auto; } .archive .adate { grid-column: 1 / -1; order: 3; } }

/* leaderboards: two boards behind one switch. The first follows the page (difficulty and mode tab) and offers Today or
   All-time for a daily mode; browsing elsewhere is folded behind a button. The second is the overall board. */
.dlg-title .trophy { color: var(--gold); width: 22px; height: 22px; }
.board-view { margin: 0 0 12px; }
.board-view span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.board-view .ic { width: 14px; height: 14px; }
.board-view input:checked + span { color: #fff; background: var(--acc-grad); box-shadow: 0 6px 18px -8px var(--acc-glow); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.board-name { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; min-width: 0; }
.board-name small { color: var(--dim); font: 500 12.5px var(--font); }
.board-head-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.board-head-right .seg.small span { padding: 5px 10px; }
.board-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 14px; border: 1px dashed var(--line-2); background: rgba(0,0,0,.18); animation: fade .25s both; }
.board-pick .diff-switch.small { max-width: none; margin: 0; }
.board-note { margin: 10px 0 12px; color: var(--dim); font-size: 12.5px; line-height: 1.5; min-height: 1.5em; }
.board-overall .board-note { margin-top: 0; }
.board-body { min-height: 120px; }
.lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lb.scroll { max-height: clamp(214px, calc(100dvh - 420px), 420px); overflow-y: auto; scrollbar-width: thin; padding: 1px 4px 1px 1px; margin-right: -4px; overscroll-behavior: contain; }
.lb.still .brow { animation: none; }
.lb-hint { margin: 12px 0 0; color: var(--dim); font-size: 12.5px; text-align: center; }
.brow .val b i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.brow { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); animation: slide-in .3s var(--ease) both; }
.brow .rank { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font: 700 13px var(--display); color: var(--dim); font-variant-numeric: tabular-nums; }
.brow.top .rank { color: #fff; background: var(--rc); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 8px 18px -8px var(--rc); }
.brow.r1 { --rc: var(--orange); border-color: rgba(255,128,0,.4); background: linear-gradient(90deg, rgba(255,128,0,.12), transparent 55%), rgba(255,255,255,.025); }
.brow.r2 { --rc: var(--purple); border-color: rgba(163,53,238,.4); background: linear-gradient(90deg, rgba(163,53,238,.12), transparent 55%), rgba(255,255,255,.025); }
.brow.r3 { --rc: var(--blue); border-color: rgba(0,112,221,.45); background: linear-gradient(90deg, rgba(0,112,221,.14), transparent 55%), rgba(255,255,255,.025); }
.brow.r1 .who b { color: #ffb366; } .brow.r2 .who b { color: #d2a0f7; } .brow.r3 .who b { color: #7fb8ff; }
.brow .avatar { width: 32px; height: 32px; }
.brow .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.brow .who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .who small { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .val { text-align: right; line-height: 1.1; white-space: nowrap; }
.brow .val b { font: 700 17px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.brow .val small { display: block; color: var(--dim); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.brow.me { border-color: rgba(226,104,168,.55); background: linear-gradient(90deg, rgba(226,104,168,.14), rgba(226,104,168,.04)); box-shadow: 0 0 0 1px rgba(226,104,168,.2); }
.brow.me.top { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 16%, transparent), rgba(226,104,168,.06)); }
.brow.me .who b::after { content: "you"; margin-left: 7px; padding: 1px 6px; border-radius: 999px; font: 700 9.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--pink); vertical-align: 2px; }
.lb-sep { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--dim); font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; }
.lb-sep::before, .lb-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lb-empty, .lb-error { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px; text-align: center; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.lb-empty .ic, .lb-error .ic { width: 28px; height: 28px; color: var(--dim); margin-bottom: 4px; }
.lb-empty b, .lb-error b { color: var(--text); font: 700 16px var(--display); }
.lb-skel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lb-skel li { display: grid; grid-template-columns: 30px 32px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border-radius: 12px; border: 1px solid var(--line); }
.lb-skel li i { width: 30px; height: 30px; border-radius: 9px; display: block; }
.lb-skel li i:nth-child(2) { width: 32px; height: 32px; border-radius: 50%; }
.lb-skel li b { display: block; width: 46%; height: 14px; }
.lb-skel li span { display: block; width: 44px; height: 20px; }
.board-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; padding: 16px; border-radius: 16px; border: 1px solid rgba(88,101,242,.4); background: linear-gradient(135deg, rgba(88,101,242,.16), transparent 70%), rgba(0,0,0,.2); text-align: center; }
.board-cta p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 52ch; }
.board-cta p b { color: var(--text); display: block; font: 700 15px var(--display); margin-bottom: 4px; }
@media (max-width: 420px) { .brow { gap: 8px; grid-template-columns: 26px 28px minmax(0, 1fr) auto; padding: 6px 8px; } .brow .rank { width: 26px; height: 26px; font-size: 12px; } .brow .avatar { width: 28px; height: 28px; } .brow .val b { font-size: 15px; } .brow .who small { white-space: normal; } }

/* ---------- standings: the overall board's reputation ladder ----------
   Neutral, Friendly, Honored, Revered, Exalted, then Paragon levels. Their colour language is metal with a sheen (iron,
   copper, silver, gold, radiant) carried by dark text on a lit chip, so a standing never reads as a difficulty accent
   (teal, pink, crimson: flat, coloured text) or a rarity (grey, green, blue, purple, orange). data-level 0..4 sets --sc. */
[data-level="0"] { --sc: #8f93a3; --sc-2: #5b5e6c; --sc-3: #c9ccd6; }
[data-level="1"] { --sc: #c98d5f; --sc-2: #86532f; --sc-3: #edc39f; }
[data-level="2"] { --sc: #d7dce9; --sc-2: #8f99b0; --sc-3: #ffffff; }
[data-level="3"] { --sc: #f0c455; --sc-2: #a87818; --sc-3: #ffeaa8; }
[data-level="4"] { --sc: #ffe9b0; --sc-2: #efbd58; --sc-3: #ffffff; }
.st { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; font: 700 10.5px/1.6 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #15110c; white-space: nowrap; vertical-align: middle; background: linear-gradient(160deg, var(--sc-3), var(--sc) 48%, var(--sc-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.5); }
.st[data-level="4"] { background: linear-gradient(110deg, var(--sc-2) 0%, var(--sc) 30%, var(--sc-3) 50%, var(--sc) 70%, var(--sc-2) 100%); background-size: 200% 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 14px -2px rgba(255,226,150,.75), 0 1px 3px rgba(0,0,0,.5); }
.st-par { font-style: normal; display: inline-flex; align-items: center; gap: 1px; }
.st-par::before { content: "\2726"; font-size: .85em; }
.brow .who small .st { font-size: 9px; padding: 0 6px; margin-right: 2px; }
/* the reputation bar: how far through the standing; this win's share is lit up when there is one */
.rep { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); overflow: hidden; }
.rep-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sc-2), var(--sc) 70%, var(--sc-3)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: width .9s var(--ease); }
.rep-gain { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); background: repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 4px, rgba(255,255,255,.2) 4px 8px); animation: rep-gain 1.6s ease-in-out infinite; }
@keyframes rep-gain { 50% { opacity: .35; } }
.rep-txt { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10.5px var(--display); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
/* the overall board's hero: the signed-in player's standing, bar, points, rank and the flex numbers */
.rep-card { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 14px 16px 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 16%, transparent), transparent 55%), radial-gradient(400px 120px at 100% 0%, color-mix(in srgb, var(--sc-2) 25%, transparent), transparent 70%), rgba(0,0,0,.22); animation: fade .3s both; }
.rep-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rep-title { min-width: 0; }
.rep-title small { display: block; color: var(--dim); font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.st-line { display: flex; align-items: baseline; gap: 8px; }
.st-name { font: 700 clamp(24px, 6vw, 32px)/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; background: linear-gradient(160deg, var(--sc-3), var(--sc) 45%, var(--sc-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rep-card[data-level="4"] .st-name { background-image: linear-gradient(110deg, var(--sc-2) 0%, var(--sc) 30%, var(--sc-3) 50%, var(--sc) 70%, var(--sc-2) 100%); background-size: 200% 100%; filter: drop-shadow(0 0 10px rgba(255,226,150,.55)); } /* background-image, not the shorthand: the shorthand would undo the clip to text */
.st-par.big { font: 700 16px var(--display); color: var(--sc); }
.rep-rank { text-align: right; line-height: 1.1; flex: none; }
.rep-rank b { font: 700 20px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rep-rank small { display: block; color: var(--dim); font-size: 11.5px; margin-top: 3px; }
.rep-next { margin: 0; color: var(--muted); font-size: 12.5px; }
.rep-next b { color: var(--text); font-variant-numeric: tabular-nums; }
.rep-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.rep-stats div { padding: 8px 4px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); text-align: center; min-width: 0; }
.rep-stats b { display: block; font: 700 18px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rep-stats span { display: block; color: var(--dim); font-size: 10px; margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 380px) { .rep-stats { grid-template-columns: repeat(2, 1fr); } }
.rep-bests { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--dim); font-size: 12px; }
.rep-bests .rb { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.rep-bests .rb i { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 6px color-mix(in srgb, var(--dc) 70%, transparent); }
.rep-bests .rb b { color: var(--text); font-family: var(--display); font-variant-numeric: tabular-nums; }
/* the podium: the top three of the overall board, the first in the middle and a step up */
.podium { list-style: none; margin: 0 0 10px; padding: 12px 2px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px 10px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--rc) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 12%, transparent), transparent 60%), rgba(255,255,255,.025); text-align: center; min-width: 0; animation: pod-in .55s var(--ease) both; }
.pod.p1 { --rc: var(--orange); order: 2; padding-top: 20px; padding-bottom: 16px; animation-delay: .1s; }
.pod.p2 { --rc: var(--purple); order: 1; animation-delay: .2s; }
.pod.p3 { --rc: var(--blue); order: 3; animation-delay: .3s; }
@keyframes pod-in { from { opacity: 0; transform: translateY(14px); } }
.pod-rank { position: absolute; top: -11px; left: 50%; translate: -50% 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--display); color: #fff; background: var(--rc); box-shadow: 0 0 0 2px var(--surface), 0 6px 14px -6px var(--rc); }
.pod .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--sc), 0 0 0 4px rgba(0,0,0,.45); }
.pod.p1 .avatar { width: 60px; height: 60px; }
.pod[data-level="4"] .avatar { box-shadow: 0 0 0 2px var(--sc), 0 0 0 4px rgba(0,0,0,.45), 0 0 18px -2px rgba(255,226,150,.7); }
.pod-name { font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.pod.p1 .pod-name { font-size: 15px; color: #ffb366; }
.pod.p2 .pod-name { color: #d2a0f7; } .pod.p3 .pod-name { color: #7fb8ff; }
.pod .st { max-width: 100%; }
.pod-pts { font: 700 17px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pod.p1 .pod-pts { font-size: 20px; }
.pod-pts small { font: 600 10px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-left: 3px; }
.pod-meta { color: var(--dim); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod.me { border-color: rgba(226,104,168,.55); box-shadow: 0 0 0 1px rgba(226,104,168,.2); }
.pod.me .pod-name::after { content: "you"; margin-left: 5px; padding: 1px 5px; border-radius: 999px; font: 700 9px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--pink); vertical-align: 2px; }
@media (max-width: 380px) { .podium { gap: 5px; } .pod { padding: 14px 4px 8px; } .pod .avatar { width: 40px; height: 40px; } .pod.p1 .avatar { width: 50px; height: 50px; } .pod-name { font-size: 12px; } .pod.p1 .pod-name { font-size: 13px; } .pod .st { font-size: 8.5px; padding: 0 5px; letter-spacing: .06em; } .pod-pts { font-size: 15px; } .pod.p1 .pod-pts { font-size: 17px; } }
/* How to play: the ladder in order */
.st-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.st-ladder .arr { color: var(--dim); font-size: 12px; }

/* delete account */
.dlg-text { margin: 0 0 12px; color: var(--text); font-size: 14px; line-height: 1.55; }
.dlg-text.dim { color: var(--dim); font-size: 13px; }
.dlg-text b { color: var(--muted); }

/* help */
.help { display: flex; flex-direction: column; gap: 14px; }
/* How to play: Basics is three lines and the tile example; the rest sits behind tabs in the same dialog */
.help-dlg .dlg-title { margin-bottom: 10px; }
.help-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.help-tab { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s, border-color .15s; white-space: nowrap; }
.help-tab:hover { color: var(--text); border-color: rgba(255,255,255,.28); }
.help-tab[aria-selected="true"] { color: #fff; border-color: transparent; background: var(--acc-grad); box-shadow: 0 6px 18px -10px var(--acc-glow); }
.help section[data-help] { animation: fade .25s both; }
.help .help-basics { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; }
.help .help-lead { color: var(--text); font-size: 15px; line-height: 1.5; }
.help .help-lead b { color: #fff; }
.help-basics .ex-row { margin: 2px 0 0; gap: 5px; }
.help-basics .ex-tile { width: 40px; height: 40px; font-size: 19px; border-radius: 8px; }
html:not(.motion-reduced) .help-basics .ex-tile { animation: flip .6s var(--ease) backwards; animation-delay: calc(.25s + var(--n, 0) * 90ms); }
.help-basics .ex-tile:nth-child(2) { --n: 1; } .help-basics .ex-tile:nth-child(3) { --n: 2; } .help-basics .ex-tile:nth-child(4) { --n: 3; } .help-basics .ex-tile:nth-child(5) { --n: 4; } .help-basics .ex-tile:nth-child(6) { --n: 5; }
.help-basics .legend { margin-bottom: 4px; }
.help-block + .help-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.help-dlg .win-actions { margin-top: 14px; }
@media (max-width: 480px) { .help-tabs { gap: 5px; } .help-tab { padding: 6px 9px; font-size: 12px; } }
/* Versus by an invite link: the room's Join button and nothing of the create form */
#versusDlg:not(.invited) .vs-invite-only { display: none; }
#versusDlg.invited .vs-intro, #versusDlg.invited .vs-sec-create, #versusDlg.invited .vs-join-head, #versusDlg.invited #vsCodeInput { display: none; }
#versusDlg.invited .vs-join { display: block; margin-top: 14px; }
#versusDlg.invited .vs-join .btn { width: 100%; padding: 14px 20px; font-size: 16px; border-radius: 16px; }
#versusDlg.invited .vs-note { text-align: center; }
#versusDlg.invited #vsOwnRoomBtn { display: flex; width: 100%; margin-top: 6px; font-size: 13px; }
.help section { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.18); }
.help h3 { margin: 0 0 6px; font: 700 15px var(--display); }
.help p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.help p b { color: var(--text); }
.ex-row { display: flex; gap: 4px; margin: 10px 0 8px; }
.ex-tile { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; border: 2px solid var(--line-2); font: 700 16px var(--display); }
.ex-tile[data-state="c"] { background: var(--c-correct); border-color: var(--c-correct); }
.ex-tile[data-state="p"] { background: var(--c-present); border-color: var(--c-present); }
.ex-tile[data-state="a"] { background: var(--c-absent); border-color: var(--c-absent); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px !important; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.sw[data-state="c"] { background: var(--c-correct); } .sw[data-state="p"] { background: var(--c-present); } .sw[data-state="a"] { background: var(--c-absent); }
.ex-icons { display: flex; gap: 10px; margin-top: 10px; }
.ex-ic { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #0b0a12; box-shadow: 0 0 0 2px #3a3047; }
.ex-ic img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.ex-ic.r0 img { transform: scale(4); filter: blur(4px); } .ex-ic.r3 img { transform: scale(2); filter: blur(1.5px); } .ex-ic.r6 img { image-rendering: auto; }
.ex-quote { margin: 10px 0 0; font: 600 16px var(--display); color: var(--text); }
.diff-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--dim); font-size: 12.5px; }

/* settings */
.settings-body { display: flex; flex-direction: column; gap: 16px; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.row-head label, .row-head .lbl { font-weight: 600; font-size: 13.5px; }
.row-head output, .lbl-hint { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.row-end { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.row-note { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.row-note b { color: var(--muted); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--pink)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--pink)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(226,104,168,.35); }
.seg input:checked + span.on { color: #fff; }
.settings-body .seg input:checked + span { color: #fff; background: var(--acc-grad); box-shadow: 0 6px 18px -8px var(--acc-glow); }
.toggles { display: flex; flex-direction: column; gap: 10px; }
.switch { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch .track { flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--line-2); position: relative; transition: background .2s, border-color .2s; margin-top: 1px; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--acc-grad); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--acc); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 1px; }
.switch-text small { color: var(--dim); font-size: 12px; font-weight: 400; }

/* toast + confetti */
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 70; translate: -50% 16px; opacity: 0; padding: 10px 16px; border-radius: 12px; background: #221e30; color: var(--text); font-weight: 500; font-size: 14px; border: 1px solid var(--line-2); box-shadow: 0 16px 40px -16px rgba(0,0,0,.9); pointer-events: none; transition: opacity .25s, translate .25s var(--ease); max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; translate: -50% 0; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; display: none; }

/* ---------- live boards at the side ----------
   A fixed panel in the free margin right of the 760 px column, only when the viewport is at least 1500 px wide and 700 px
   tall; narrower screens never see it and the column never moves. It takes the accent of the difficulty in play. Rows are
   the leaderboard's own .brow rows, a little tighter. Change animations below are governed by the motion rules further down. */
.side { display: none; }
@media (min-width: 1500px) and (min-height: 700px) { .side:not([hidden]) { display: flex; } }
.side { position: fixed; z-index: 5; top: 84px; left: calc(50% + 412px); width: min(340px, calc(50vw - 436px)); max-height: calc(100dvh - 108px); flex-direction: column; gap: 12px; padding: 14px 16px 12px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, transparent), transparent 32%), rgba(12,10,18,.84); box-shadow: 0 30px 80px -40px rgba(0,0,0,.9); animation: fade .4s both; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.side-live i { width: 8px; height: 8px; border-radius: 50%; background: #5bff8a; animation: side-live 1.8s ease-out infinite; }
@keyframes side-live { 0% { box-shadow: 0 0 0 0 rgba(91,255,138,.6); } 70% { box-shadow: 0 0 0 7px rgba(91,255,138,0); } 100% { box-shadow: 0 0 0 0 rgba(91,255,138,0); } }
.side-activity { font-size: 11.5px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.side-activity b { color: var(--muted); font-weight: 600; display: inline-block; }
.side-activity.bump b { animation: side-bump .5s var(--bounce); }
@keyframes side-bump { 40% { transform: scale(1.3); color: #fff; } }
.side-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.side-sub { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.side-sub > span:first-child { color: var(--muted); }
.side-count { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 11.5px; white-space: nowrap; }
.side-count b { color: var(--text); font-variant-numeric: tabular-nums; display: inline-block; }
.side-count.bump b { animation: side-bump .5s var(--bounce); }
/* the board rows, tighter, clickable, no entrance on every poll */
.side .lb { gap: 4px; }
.side .brow { animation: none; gap: 8px; grid-template-columns: 24px 28px minmax(0, 1fr) auto; padding: 5px 8px 5px 6px; cursor: pointer; transition: background .15s, border-color .15s; }
.side .brow:hover { border-color: var(--line-2); }
.side .brow .rank { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }
.side .brow .avatar { width: 28px; height: 28px; }
.side .brow .who b { font-size: 13px; }
.side .brow .who small { font-size: 11px; }
.side .brow .val b { font-size: 15px; }
.side .brow .val small { font-size: 9.5px; margin-top: 1px; }
.side .brow .who small .st { font-size: 8.5px; padding: 0 5px; }
.side .brow.fresh { animation: side-fresh 2.4s var(--ease) both; }
@keyframes side-fresh { 0% { opacity: 0; transform: translateY(-8px); } 15% { opacity: 1; transform: none; box-shadow: 0 0 0 1px var(--acc), 0 0 22px -4px var(--acc); } 100% { box-shadow: 0 0 0 0 transparent; } }
.side .brow.newtop::after { content: "new fastest"; position: absolute; right: 8px; top: -9px; padding: 1px 7px; border-radius: 999px; font: 800 9px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #0b0a10; background: var(--gold); box-shadow: 0 4px 10px rgba(0,0,0,.5); animation: side-tag 6s var(--ease) both; }
.side .brow.newtop.alltime::after { content: "new leader"; }
.side .brow { position: relative; }
@keyframes side-tag { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.side-empty { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 6%, transparent); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.side-empty b { color: var(--text); display: block; font: 700 14px var(--display); margin-bottom: 2px; }
.side-note { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.4; }
.side-note a { color: var(--acc); font-weight: 600; }
.side-me { margin: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); font-size: 12.5px; color: var(--muted); }
.side-me b { color: var(--text); font-family: var(--display); }
.side-me .ic { width: 15px; height: 15px; color: var(--acc); }
.side-cta { width: 100%; padding: 9px 12px; font-size: 13.5px; margin-top: 2px; }
/* latest solves feed: it clips at the bottom with a fade when the window is short */
.side-feedwrap { flex: 0 1 auto; min-height: 58px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); padding-bottom: 12px; }
.side-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-feed .frow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 8px; width: 100%; padding: 5px 7px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.side-feed .frow:hover { background: rgba(255,255,255,.06); }
.side-feed .frow .avatar { width: 24px; height: 24px; margin-top: 1px; }
.side-feed .txt { min-width: 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; display: flex; flex-direction: column; gap: 2px; }
.side-feed .txt .l1, .side-feed .txt .l2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-feed .txt .l2 { font-size: 11.5px; color: var(--dim); }
.side-feed .txt b { color: var(--text); font-weight: 600; }
.side-feed .txt .diff-pill { font-size: 9.5px; padding: 1px 6px 1px 5px; margin: 0 2px; vertical-align: 1px; }
.side-feed .txt .diff-pill .ic { width: 11px; height: 11px; }
.side-feed .txt .n { color: var(--gold); font-weight: 700; font-family: var(--display); }
.side-feed .ago { font-size: 11px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 2px; }
.side-feed .frow.fresh { animation: side-feed-in 2s var(--ease) both; }
@keyframes side-feed-in { 0% { opacity: 0; transform: translateY(-10px); } 15% { opacity: 1; transform: none; background: color-mix(in srgb, var(--acc) 18%, transparent); } 100% { background: transparent; } }
.side-feed .empty { font-size: 12.5px; color: var(--dim); padding: 6px 7px; }
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.side-foot b { color: var(--text); font-family: var(--display); }
.side-foot a { color: var(--acc); font-weight: 600; }
.side-foot #sideMe { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.side-foot .mini-btn { flex: none; }

/* ---------- Versus ----------
   The optional live mode: a private room where 2 to 4 players race the same puzzles. One chip beside the title opens it;
   a room swaps the difficulty switch, tabs and bar for a HUD and plays every round on the page's own boards, with the
   lobby, the countdown, the opponents' live strips, the reveal and the podium inside the play card. Gold is Versus's
   colour (it belongs to no difficulty); the accent still follows the room's difficulty. */
.versus-row { display: flex; justify-content: center; margin-top: -4px; }
.versus-entry { position: relative; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid rgba(229,204,128,.38); background: linear-gradient(90deg, rgba(229,204,128,.14), rgba(163,53,238,.1) 60%, transparent), rgba(0,0,0,.3); color: var(--text); cursor: pointer; text-align: left; overflow: hidden; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.versus-entry::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%); background-size: 260% 100%; animation: ve-shine 6s linear infinite; }
@keyframes ve-shine { from { background-position: 160% 0; } to { background-position: -160% 0; } }
.versus-entry:hover { border-color: rgba(229,204,128,.75); transform: translateY(-1px); box-shadow: 0 16px 36px -18px rgba(229,204,128,.75); }
.ve-badge { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #1a1408; background: linear-gradient(145deg, #ffe9a8, #e5cc80 55%, #b8963c); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -8px rgba(229,204,128,.9); flex: none; }
.ve-badge .ic { width: 20px; height: 20px; stroke-width: 2.1; }
.ve-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ve-text b { font: 700 14px var(--display); letter-spacing: .02em; }
.ve-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-cta { margin-left: 4px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--acc-grad); box-shadow: 0 8px 20px -10px var(--acc-glow); white-space: nowrap; }
.versus-entry.off { border-style: dashed; opacity: .85; } .versus-entry.off .ve-badge { filter: grayscale(.85); } .versus-entry.off::after { display: none; }
.versus-entry.note .ve-text small { color: var(--gold); }
@media (max-width: 520px) { .ve-text small { white-space: normal; font-size: 11.5px; } .ve-cta { display: none; } .versus-entry { width: 100%; border-radius: 18px; } }

/* the HUD */
.vs-hud { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 14%, transparent), transparent 55%), rgba(0,0,0,.28); transition: border-color .3s; }
.vs-hud-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.vs-hud-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vs-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #1a1408; background: linear-gradient(145deg, #ffe9a8, #e5cc80 55%, #b8963c); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); flex: none; }
.vs-mark .ic { width: 19px; height: 19px; stroke-width: 2.1; }
.vs-hud-text { display: flex; flex-direction: column; line-height: 1.15; }
.vs-hud-text b { font: 700 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.vs-code-btn { border: 0; background: none; padding: 0; color: var(--text); font: 700 16px var(--display); letter-spacing: .18em; cursor: pointer; text-align: left; }
.vs-code-btn:hover { color: #fff; text-decoration: underline dotted; text-underline-offset: 4px; }
.vs-hud-mid { display: flex; align-items: baseline; gap: 8px; font: 700 15px var(--display); letter-spacing: -.01em; }
.vs-hud-mode { color: var(--muted); font: 500 12.5px var(--font); letter-spacing: 0; }
.vs-hud-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.vs-me { display: inline-flex; align-items: baseline; gap: 5px; color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.vs-me b { font: 700 16px var(--display); color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; display: inline-block; }
.vs-me b.pop { animation: pop-num .5s var(--bounce); }
.vs-clock { font: 700 22px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 3.4ch; text-align: right; display: inline-block; }
.vs-hud.urgent { border-color: rgba(255,77,109,.55); }
.vs-hud.urgent .vs-clock { color: var(--insane); animation: vs-pulse .8s ease-in-out infinite; }
@keyframes vs-pulse { 50% { transform: scale(1.12); } }
.vs-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.vs-bar i { display: block; height: 100%; width: var(--p, 100%); border-radius: inherit; background: linear-gradient(90deg, var(--acc-2), var(--acc) 60%, var(--gold)); transition: width .12s linear, background .3s; }
.vs-hud.urgent .vs-bar i { background: var(--insane); }
@media (max-width: 520px) { .vs-hud { padding: 8px 10px; } .vs-hud-mid { order: 3; width: 100%; font-size: 14px; } .vs-clock { font-size: 20px; } .vs-hud-right { gap: 8px; } }
@media (max-width: 360px) { .vs-hud-text b { display: none; } .vs-mark { width: 30px; height: 30px; } }

/* connection notice */
.vs-banner { width: 100%; max-width: 520px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,128,0,.4); background: rgba(255,128,0,.1); color: #ffd166; font-size: 13px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.vs-banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ffd166; flex: none; animation: side-live 1.4s ease-out infinite; }

/* lobby */
.vs-lobby { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 520px; text-align: center; }
.vs-codebox { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vs-codebox small { font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.vs-bigcode { border: 1px solid rgba(229,204,128,.42); background: linear-gradient(180deg, rgba(229,204,128,.16), rgba(229,204,128,.04)); color: var(--gold); padding: 8px 20px 8px 26px; border-radius: 16px; font: 700 clamp(30px, 10vw, 44px)/1.1 var(--display); letter-spacing: .26em; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.vs-bigcode:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -20px rgba(229,204,128,.8); }
.vs-codeactions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vs-seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.vs-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); min-width: 0; min-height: 118px; animation: pod-in .4s var(--ease) both; }
.vs-seat.empty { border-style: dashed; color: var(--dim); font-size: 12px; justify-content: center; line-height: 1.35; }
.vs-seat.empty .ic { width: 22px; height: 22px; color: var(--dim); margin-bottom: 2px; }
.vs-seat .avatar { width: 44px; height: 44px; }
.vs-seat.you { border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.vs-seat.off { opacity: .55; }
.vs-seat b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: 16px; }
.vs-tag { font: 700 9.5px var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--pink); line-height: 1.5; }
.vs-tag.host { color: #1a1408; background: var(--gold); }
.vs-tag.off { color: var(--muted); background: rgba(255,255,255,.1); }
.vs-initial { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 18px var(--display); color: #fff; background: linear-gradient(145deg, var(--si-2, var(--acc-2)), var(--si, var(--acc))); box-shadow: 0 0 0 1px rgba(255,255,255,.12); flex: none; text-transform: uppercase; }
@media (max-width: 420px) { .vs-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-settings { width: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.2); text-align: left; }
.vs-settings-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vs-settings-head span:last-child { color: var(--dim); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 11.5px; }
.vs-form { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.vs-opt { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.vs-opt .legend { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 0; }
.vs-opt .seg { width: 100%; }
.vs-opt .seg.small span { padding: 6px 4px; }
.vs-opt .diff-switch.small { max-width: none; margin: 0; }
.vs-opt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vs-opt select { width: 100%; }
.vs-checks { display: flex; gap: 12px 16px; flex-wrap: wrap; padding: 8px 0 0; }
.vs-form.readonly { opacity: .72; }
.vs-form.readonly .seg input, .vs-form.readonly .check input, .vs-form.readonly select, .vs-form.readonly .diff-switch input, .vs-form.readonly .vs-team-opt input { cursor: default; }
.vs-scores.coop .rank { visibility: hidden; } /* co-op: one shared score, so no places (the reveal's rows and the final table) */
@media (max-width: 480px) { .vs-opt-row { grid-template-columns: 1fr; } }
.vs-avail { margin: -6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.vs-avail b { color: var(--text); font-family: var(--display); font-variant-numeric: tabular-nums; }
.vs-avail.warn { color: #ffb4c0; } .vs-avail.warn b { color: #ffb4c0; }
.vs-lobby-note { margin: -8px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }

/* the opponents: one compact live strip per other player */
.vs-rivals { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
.vs-rivals[data-n="1"] { max-width: 280px; }
.vs-rivals[data-n="2"] { max-width: 400px; }
.vs-rival { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.22); min-width: 0; transition: border-color .3s, box-shadow .3s, opacity .3s; }
.vs-rival.solved { border-color: rgba(229,204,128,.6); box-shadow: 0 0 22px -8px rgba(229,204,128,.85); background: linear-gradient(180deg, rgba(229,204,128,.13), transparent 60%), rgba(0,0,0,.22); }
.vs-rival.out { opacity: .75; }
.vs-rival.off { opacity: .45; }
.vs-rival.empty { grid-column: 1 / -1; color: var(--dim); font-size: 12.5px; text-align: center; padding: 10px; }
.vr-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vr-head .avatar, .vr-head .vs-initial { width: 22px; height: 22px; font-size: 11px; }
.vr-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-score { font: 700 12px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.vs-rival.solved .vr-score { color: var(--gold); }
.vr-grid { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 2px; width: min(100%, calc(var(--n, 5) * 11px)); margin: 0 auto; }
.vr-grid i { display: block; aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.07); }
.vr-grid i[data-s="c"] { background: var(--c-correct); } .vr-grid i[data-s="p"] { background: var(--c-present); } .vr-grid i[data-s="a"] { background: var(--c-absent); }
.vr-grid i.new, .vr-marks i.new { animation: vr-in .45s var(--bounce) both; }
@keyframes vr-in { from { transform: scale(.2); opacity: 0; } }
.vr-marks { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.vr-marks i { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font: 700 10px/1 var(--font); font-style: normal; color: #fff; background: rgba(255,255,255,.07); }
.vr-marks i[data-s="a"] { background: var(--c-absent); } .vr-marks i[data-s="a"]::before { content: "\2715"; color: #cfcbdc; }
.vr-marks i[data-s="c"] { background: var(--c-correct); } .vr-marks i[data-s="c"]::before { content: "\2713"; }
.vr-foot { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.vr-badge { font: 700 10px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-gain { font: 700 10px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vr-score2 { display: none; font: 700 11px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .vr-gain { display: none; } }
@media (max-width: 520px) { .vr-head .vr-score { display: none; } .vr-score2 { display: inline; } .vr-foot { justify-content: space-between; } .vs-rivals .vs-rival.solved .vr-score2 { color: var(--gold); } }
@media (max-width: 360px) { .vs-rivals { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; } .vs-rival { padding: 6px; gap: 5px; } .vr-badge { font-size: 9px; letter-spacing: .06em; } .vr-marks i { width: 14px; height: 14px; } } /* three strips still side by side on a 320 px phone */
.vs-rival.solved .vr-badge { color: var(--gold); }
.vs-rival.out .vr-badge { color: #ffb4c0; }
.vr-pts { position: absolute; right: 6px; top: -11px; z-index: 2; padding: 2px 8px; border-radius: 999px; font: 800 11px var(--display); color: #1a1408; background: var(--gold); box-shadow: 0 6px 14px -6px rgba(229,204,128,.9); animation: vr-pts 2.6s var(--ease) both; pointer-events: none; }
@keyframes vr-pts { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* countdown before a round: a badge over the play card that never blocks the board */
.vs-countdown { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 6px; pointer-events: none; background: radial-gradient(closest-side, rgba(10,9,16,.78), transparent 82%); }
.vs-countdown b { font: 700 clamp(72px, 24vw, 124px)/1 var(--display); letter-spacing: -.05em; background: linear-gradient(180deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--acc) 65%, transparent)); display: inline-block; }
.vs-countdown b.pop { animation: vs-count .9s var(--ease) both; }
@keyframes vs-count { 0% { transform: scale(1.7); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .92; } }
.vs-countdown span { color: var(--muted); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-align: center; }

/* done before the clock: a calm note above the board */
.vs-wait { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; max-width: 520px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0,0,0,.22); text-align: center; animation: slide-in .35s var(--ease) both; }
.vs-wait b { font: 700 17px var(--display); letter-spacing: -.01em; }
.vs-wait.won { border-color: rgba(229,204,128,.5); background: linear-gradient(180deg, rgba(229,204,128,.12), transparent), rgba(0,0,0,.22); } .vs-wait.won b { color: var(--gold); }
.vs-wait .pts { font: 700 13.5px var(--display); color: var(--text); }
.vs-wait span { color: var(--muted); font-size: 12.5px; }

/* the reveal: the answer as a lore card, who solved it first, the scores, the next round */
.vs-reveal { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 520px; --win: var(--gold); animation: slide-in .4s var(--ease) both; }
.vs-reveal .eyebrow { margin: 0; align-self: center; color: var(--gold); }
.vs-reveal .lore-name { color: var(--gold); }
.vs-scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; width: 100%; }
.vs-score { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); animation: slide-in .3s var(--ease) both; text-align: left; }
.vs-score.me { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.vs-score.first { border-color: rgba(229,204,128,.5); }
.vs-score .rank { font: 700 13px var(--display); color: var(--dim); text-align: center; font-variant-numeric: tabular-nums; }
.vs-score .avatar, .vs-score .vs-initial { width: 28px; height: 28px; font-size: 12px; }
.vs-score .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vs-score .who b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-score.me .who b::after { content: "you"; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font: 700 9px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--pink); vertical-align: 2px; }
.vs-score .who small { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-score .who small .first { color: var(--gold); font-weight: 700; }
.vs-score .gain { font: 700 14px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.vs-score .gain.zero { color: var(--dim); font-weight: 600; }
.vs-score .total { font: 700 15px var(--display); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; line-height: 1.1; }
.vs-score .total small { display: block; font: 600 9.5px var(--font); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; }
.vs-next { margin: 0; align-self: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .vs-score { gap: 6px; grid-template-columns: 18px 24px minmax(0, 1fr) auto auto; padding: 6px 8px 6px 4px; } .vs-score .avatar, .vs-score .vs-initial { width: 24px; height: 24px; } .vs-score .who small { white-space: normal; } }

/* match over */
.vs-over { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 520px; text-align: center; }
.vs-over .eyebrow { margin: 0; color: var(--gold); }
.vs-over-title { margin: -6px 0 0; font: 700 clamp(26px, 7vw, 36px)/1.1 var(--display); letter-spacing: -.03em; background: linear-gradient(90deg, #ffd166, var(--gold) 50%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.vs-over .podium { width: 100%; margin: 4px 0 0; }
.vs-podium .pod { --sc: var(--rc); }
.vs-podium .pod-pts { color: var(--text); }
.vs-podium.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; }
.vs-table { margin-top: -4px; }
.vs-table .vs-score { grid-template-columns: 22px 28px minmax(0, 1fr) auto; }
@media (max-width: 380px) { .vs-table .vs-score { grid-template-columns: 18px 24px minmax(0, 1fr) auto; } }

/* ---------- teams (Shuffle and Co-op) ----------
   Shuffle deals new pairs every round; Co-op puts everybody on one board. Teammates share the board and take turns,
   so the page says whose go it is, shows who made each guess, and shows the other side per team instead of per player. */
/* the choice, in the form */
.vs-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vs-team-opt { position: relative; display: block; min-width: 0; }
.vs-team-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vs-team-opt .vt-box { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.22); transition: border-color .2s, background .2s, box-shadow .2s; }
.vs-team-opt .vt-box b { font: 700 13px var(--display); letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.vs-team-opt .vt-box b .ic { width: 14px; height: 14px; color: var(--muted); }
.vs-team-opt .vt-box small { color: var(--dim); font-size: 11.5px; line-height: 1.4; }
.vs-team-opt input:hover:not(:disabled) + .vt-box { border-color: rgba(255,255,255,.25); }
.vs-team-opt input:checked + .vt-box { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent); }
.vs-team-opt input:checked + .vt-box b .ic { color: var(--acc); }
.vs-team-opt input:focus-visible + .vt-box { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (max-width: 480px) { .vs-teams { grid-template-columns: 1fr; } .vs-team-opt .vt-box { flex-direction: row; align-items: baseline; gap: 8px; } .vs-team-opt .vt-box b { flex: none; min-width: 86px; } }
/* the lobby says which mode the room is in */
.vs-modeline { margin: -6px 0 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0,0,0,.22); color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.vs-modeline b { color: var(--text); font: 700 11px var(--display); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; }
.vs-modeline b .ic { width: 13px; height: 13px; color: var(--gold); }
.vs-modeline.team { border-color: rgba(229,204,128,.4); background: rgba(229,204,128,.08); }
/* the countdown shows the round's teams: dealt in from both sides, "VS" between them */
.vs-countdown.teams b { font-size: clamp(54px, 15vw, 88px); }
.vs-count-mode { color: var(--gold) !important; letter-spacing: .06em !important; text-transform: none !important; font-size: 13px !important; }
.vs-mu { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: min(100%, 520px); padding: 6px 12px 0; }
.vs-mu-team { flex: 1 1 0; min-width: 0; max-width: 230px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 8px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12,10,18,.92); box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); }
.vs-mu-team.mine { border-color: color-mix(in srgb, var(--acc) 65%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%), rgba(12,10,18,.94); }
.vs-mu-team.left { animation: mu-left .7s var(--bounce) both; }
.vs-mu-team.right { animation: mu-right .7s var(--bounce) both; }
.vs-mu-team.all { max-width: 340px; animation: mu-up .6s var(--bounce) both; }
@keyframes mu-left { from { opacity: 0; transform: translateX(-60px) rotate(-6deg) scale(.8); } }
@keyframes mu-right { from { opacity: 0; transform: translateX(60px) rotate(6deg) scale(.8); } }
@keyframes mu-up { from { opacity: 0; transform: translateY(24px) scale(.9); } }
.vs-mu-faces { display: flex; justify-content: center; }
.vs-mu-faces .avatar, .vs-mu-faces .vs-initial { width: 40px; height: 40px; font-size: 16px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(255,255,255,.18); animation: mu-face .5s var(--bounce) both; animation-delay: calc(.25s + var(--d, 0) * .12s); }
.vs-mu-faces > :not(:first-child) { margin-left: -10px; }
.vs-mu-team.all .vs-mu-faces .avatar, .vs-mu-team.all .vs-mu-faces .vs-initial { width: 44px; height: 44px; }
@keyframes mu-face { from { opacity: 0; transform: scale(.3) rotate(-20deg); } }
.vs-countdown .vs-mu-names { font: 700 13px var(--display); color: var(--text); letter-spacing: -.01em; text-transform: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* more specific than the countdown's own span rule */
.vs-mu-team small { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.vs-mu-team.mine small { color: var(--acc); }
.vs-countdown .vs-mu-vs { align-self: center; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--display); letter-spacing: .04em; color: #1a1408; background: linear-gradient(145deg, #ffe9a8, #e5cc80 55%, #b8963c); box-shadow: 0 8px 18px -8px rgba(229,204,128,.9); animation: mu-vs .5s var(--bounce) .35s both; }
@keyframes mu-vs { from { opacity: 0; transform: scale(.2) rotate(-90deg); } }
@media (max-width: 360px) { .vs-mu { gap: 6px; padding: 6px 4px 0; } .vs-mu-team { padding: 8px 4px 6px; } .vs-mu-faces .avatar, .vs-mu-faces .vs-initial { width: 32px; height: 32px; font-size: 13px; } .vs-countdown .vs-mu-names { font-size: 12px; } .vs-countdown .vs-mu-vs { width: 28px; height: 28px; font-size: 11px; } }
/* whose go it is on a shared board */
.vs-turn { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; max-width: 520px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0,0,0,.22); color: var(--muted); font-size: 12.5px; line-height: 1.35; text-align: center; transition: border-color .3s, background .3s, box-shadow .3s; }
.vs-turn .avatar, .vs-turn .vs-initial { width: 22px; height: 22px; font-size: 11px; }
.vs-turn b { font: 700 14px var(--display); color: var(--text); letter-spacing: -.01em; }
.vs-turn.mine { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 22%, transparent), color-mix(in srgb, var(--acc) 8%, transparent)); box-shadow: 0 0 24px -8px var(--acc-glow); color: var(--text); }
.vs-turn.mine b { color: #fff; }
.vs-turn.mine::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 var(--acc-glow); animation: side-live 1.4s ease-out infinite; }
.vs-turn.pop { animation: turn-pop .6s var(--bounce); }
@keyframes turn-pop { 0% { transform: scale(.92); } 50% { transform: scale(1.04); } 100% { transform: none; } }
.vs-turn.theirs { border-style: dashed; }
/* waiting for a teammate: the keys dim but still take a draft; Enter out of turn shakes with the room's own words */
.keyboard.waiting .key { opacity: .55; }
.keyboard.waiting .key.wide[data-key="ENTER"] { opacity: .35; }
.pick-form.waiting .btn { opacity: .55; filter: grayscale(.4); }
.play.my-turn .board { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--acc) 40%, transparent)); }
/* who made each guess on a shared board: a face on the row's corner, or before the name in the pick list */
.row { position: relative; }
.row .by { position: absolute; left: -7px; top: -7px; z-index: 2; display: grid; place-items: center; pointer-events: none; animation: by-in .35s var(--bounce) both; }
.row .by .avatar, .row .by .vs-initial, .guesses li .by .avatar, .guesses li .by .vs-initial { width: 18px; height: 18px; font-size: 9px; box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(0,0,0,.6); }
.row .by.me .avatar, .row .by.me .vs-initial { box-shadow: 0 0 0 2px var(--acc), 0 2px 6px rgba(0,0,0,.6); }
@keyframes by-in { from { opacity: 0; transform: scale(.4); } }
.guesses li .by { display: inline-grid; place-items: center; flex: none; margin-right: -2px; }
/* the other side, per team: both faces, who is up */
.vs-rival.team { gap: 5px; }
.vr-faces { display: flex; align-items: center; min-width: 0; }
.vr-faces > :not(:first-child) { margin-left: -6px; }
.vr-face { position: relative; display: inline-grid; place-items: center; border-radius: 50%; }
.vr-face .avatar, .vr-face .vs-initial { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
.vr-face.up .avatar, .vr-face.up .vs-initial { box-shadow: 0 0 0 2px var(--gold), 0 0 10px -2px var(--gold); }
.vr-face.off { opacity: .4; }
.vr-face.up::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgba(0,0,0,.6); animation: side-live 1.4s ease-out infinite; }
.vs-rival.ours { border-color: color-mix(in srgb, var(--acc) 50%, transparent); background: color-mix(in srgb, var(--acc) 8%, transparent); }
.vs-rivals[data-n="0"] { max-width: 320px; }
.vr-mates { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.vr-mate { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; max-width: 90px; font-size: 11px; color: var(--muted); }
.vr-mate .avatar, .vr-mate .vs-initial { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
.vr-mate.up .avatar, .vr-mate.up .vs-initial { box-shadow: 0 0 0 2px var(--gold), 0 0 12px -2px var(--gold); }
.vr-mate.off { opacity: .45; }
.vr-mate b { font-size: 11.5px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-mate.up b { color: var(--gold); }
.vr-mate small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--dim); }
.vr-mate.up small { color: var(--gold); }
/* reveal and table rows in a team's colour; who you were with */
.vs-score[data-team] { border-left: 3px solid var(--tc); }
.vs-score .who small .mate { color: var(--muted); }
/* co-op: a shared result instead of a podium */
.vs-coop-result { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 16px 14px 14px; border-radius: 18px; border: 1px solid rgba(229,204,128,.45); background: linear-gradient(180deg, rgba(229,204,128,.14), transparent 70%), rgba(0,0,0,.22); animation: pod-in .5s var(--ease) both; }
.vs-coop-result .vs-mu-faces .avatar, .vs-coop-result .vs-mu-faces .vs-initial { width: 52px; height: 52px; font-size: 20px; }
.vs-coop-result .vs-mu-faces > :not(:first-child) { margin-left: -12px; }
.vs-coop-names { font: 700 15px var(--display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-coop-stats { display: flex; justify-content: center; gap: 8px; width: 100%; }
.vs-coop-stats div { flex: 1 1 0; max-width: 160px; padding: 8px 6px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.vs-coop-stats b { display: block; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gold); }
.vs-coop-stats span { display: block; color: var(--dim); font-size: 10.5px; margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; }
.vs-coop-rounds { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.vs-coop-rounds i { width: 14px; height: 14px; border-radius: 4px; background: var(--c-absent); }
.vs-coop-rounds i.won { background: var(--c-correct); box-shadow: 0 0 8px -2px var(--c-correct); }

/* the dialog */
.vs-dlg .dlg-title .swords { color: var(--gold); width: 24px; height: 24px; }
.vs-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; font-size: 13.5px; color: var(--muted); }
.vs-who b { color: var(--text); }
.vs-who .avatar { width: 30px; height: 30px; }
.vs-name { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.vs-name span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.vs-name input { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0,0,0,.28); color: var(--text); font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.vs-who small { width: 100%; color: var(--dim); font-size: 12px; }
.vs-who small a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.vs-who small a:hover { color: var(--text); }
.vs-sec .sub { margin-top: 16px; }
.vs-join { display: flex; gap: 8px; }
.vs-join input { flex: 1; min-width: 0; width: 100%; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.28); color: var(--text); font: 700 20px var(--display); letter-spacing: .3em; text-transform: uppercase; transition: border-color .15s, box-shadow .15s; }
.vs-join input::placeholder { letter-spacing: .2em; color: var(--dim); }
.vs-name input:focus, .vs-join input:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.vs-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.vs-note.bad { color: #ffb4c0; }
.vs-dlg .win-actions { margin-top: 12px; }

/* ---------- the room chat ----------
   All chat reaches everyone in the room, Team chat a Shuffle pair (party blue, [Team] in front, like the chat frame WoW
   players know). A button with an unread badge in the HUD toggles the panel: on a wide screen it docks in the free
   margin right of the column and is open by default; elsewhere it is a sheet in the corner, folded by default, over
   the page rather than pushing the board. */
.vs-chat-btn { position: relative; gap: 5px; }
.vs-chat-btn[aria-expanded="true"] { color: var(--text); border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.vs-chat-badge { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font: 700 10.5px var(--display); font-style: normal; color: #1a1408; background: var(--gold); box-shadow: 0 0 0 2px var(--bg); animation: chip-pop .4s var(--bounce) both; }
@media (max-width: 420px) { .vs-chat-btn span { display: none; } .vs-chat-btn { padding: 6px 8px; } }
.vs-chat { position: fixed; z-index: 40; right: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.vs-chat-panel { pointer-events: auto; display: flex; flex-direction: column; height: min(60vh, 520px); border-radius: 18px; border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, transparent), transparent 30%), rgba(12,10,18,.95); box-shadow: 0 30px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4); animation: pop .35s var(--ease) both; overflow: hidden; }
@media (min-width: 1400px) { .vs-chat { right: auto; bottom: auto; left: calc(50% + 396px); top: 84px; width: min(330px, calc(50vw - 420px)); } .vs-chat-panel { height: min(72vh, 680px); animation: fade .3s both; } }
@media (max-width: 480px) { .vs-chat { right: 8px; left: 8px; bottom: 8px; width: auto; } .vs-chat-panel { height: min(58vh, 460px); border-radius: 16px; } }
.vs-chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.vs-chat-head b { display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.vs-chat-head b .ic { width: 14px; height: 14px; }
.vs-chat-sub { flex: 1; min-width: 0; color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-chat-x { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.vs-chat-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
.vs-chat-x .ic { width: 14px; height: 14px; }
.vs-chat-list { list-style: none; margin: 0; padding: 8px 8px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; overscroll-behavior: contain; font-size: 12.5px; line-height: 1.4; }
.vs-chat-list:empty::before { content: "Nothing said yet. Say hello."; display: block; padding: 14px 8px; text-align: center; color: var(--dim); font-size: 12px; }
.vs-msg { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; align-items: start; padding: 3px 7px 3px 6px; border-radius: 8px; overflow-wrap: anywhere; word-break: break-word; }
.vs-msg .avatar, .vs-msg .vs-initial { width: 16px; height: 16px; font-size: 8px; margin-top: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.vs-msg .chan { font: 700 10px var(--font); letter-spacing: .06em; color: var(--dim); margin-right: 4px; }
.vs-msg .who { font-weight: 700; color: var(--c, var(--text)); margin-right: 4px; }
.vs-msg .txt { color: var(--text); white-space: pre-wrap; }
.vs-msg.team { background: rgba(159,180,255,.08); box-shadow: inset 2px 0 0 #9fb4ff; }
.vs-msg.team .chan { color: #9fb4ff; }
.vs-msg.team .txt { color: #d8dfff; }
.vs-msg.old { opacity: .5; }
.vs-msg.old .chan::after { content: " · earlier round"; font-weight: 500; letter-spacing: 0; }
.vs-sys { text-align: center; color: var(--dim); font-size: 11px; padding: 6px 6px 3px; }
.vs-sys b { color: #9fb4ff; font-weight: 700; }
.vs-chat-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); align-items: center; }
.vs-chat-chan { display: grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.vs-chat-chan label { position: relative; display: block; }
.vs-chat-chan input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vs-chat-chan span { display: block; padding: 6px 8px; border-radius: 6px; font: 700 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); transition: background .15s, color .15s; }
.vs-chat-chan input:checked + span { color: #fff; background: rgba(255,255,255,.12); }
.vs-chat-chan input[value="team"]:checked + span { color: #0f1430; background: #9fb4ff; }
.vs-chat-chan input:disabled + span { opacity: .35; }
.vs-chat-chan input:disabled { cursor: not-allowed; }
.vs-chat-chan input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 1px; }
.vs-chat-form input[type="text"] { width: 100%; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); color: var(--text); font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.vs-chat-form input[type="text"]:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.vs-chat-form.team input[type="text"] { border-color: rgba(159,180,255,.65); color: #d8dfff; background: rgba(159,180,255,.08); }
.vs-chat-form.team input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(159,180,255,.18); border-color: #9fb4ff; }
.vs-chat-form.team input[type="text"]::placeholder { color: rgba(159,180,255,.7); }
.vs-chat-send { padding: 8px 10px; border-radius: 10px; }
.vs-chat-send .ic { width: 16px; height: 16px; }
.vs-chat-note { margin: 0; padding: 0 12px 8px; font-size: 11.5px; color: #ffb4c0; line-height: 1.4; }
@media (max-width: 360px) { .vs-chat-chan span { padding: 6px 6px; font-size: 10px; } .vs-chat-form { gap: 5px; padding: 8px 8px 8px; } }

/* ---------- motion ----------
   Effects are on for everyone, also on a device that asks for less motion: no media query here switches anything off.
   Calm (html.motion-reduced) is the visitor's own choice, made in Settings here or on the front page. */
html:not(.motion-reduced) .flame i { animation: flicker 1.1s ease-in-out infinite; }
html:not(.motion-reduced) .flame i:nth-child(2) { animation-duration: .9s; animation-delay: -.3s; }
html:not(.motion-reduced) .flame i:nth-child(3) { animation-duration: .7s; animation-delay: -.5s; }
html:not(.motion-reduced) .st[data-level="4"], html:not(.motion-reduced) .rep-card[data-level="4"] .st-name { animation: st-shine 3.2s linear infinite; } /* Exalted catches the light */
@keyframes st-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
html.motion-reduced, html.motion-reduced *, html.motion-reduced *::before, html.motion-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }