/* Before or After - aplexotools.com/before. Self-contained: the site's fonts and Wowdle's icons; the only requests go to this site's own /api.
   The identity: the bronze of the timeways (Chromie's sands) on the site's dark violet, with the expansions' own colours at every reveal. */
@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 800; 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;
  --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;
  /* this game's accent: bronze (Normal). The accent follows the level in play (html[data-level]): Easy teal, Hard ember,
     Insane crimson; everything that used the bronze reads these. --on-acc is the text colour on an accent surface. */
  --acc: #e2a95a; --acc-2: #b5652b; --acc-3: #f7dfa3; --on-acc: #1a1206;
  --acc-grad: linear-gradient(135deg, var(--acc-2), var(--acc) 70%, var(--acc-3));
  --acc-glow: color-mix(in srgb, var(--acc) 85%, transparent);
  --good: #3ddc84; --bad: #ff4d6d; --cool: #8f7cff;
  --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);
  --heat: 0; /* 0 at the start of a run, 1 at a streak of 20: the HUD and the flame read it */
}
/* registered so the accent tweens between levels instead of snapping */
@property --acc { syntax: '<color>'; inherits: true; initial-value: #e2a95a; }
@property --acc-2 { syntax: '<color>'; inherits: true; initial-value: #b5652b; }
@property --acc-3 { syntax: '<color>'; inherits: true; initial-value: #f7dfa3; }
html { transition: --acc .6s var(--ease), --acc-2 .6s var(--ease), --acc-3 .6s var(--ease); }
html[data-level="easy"] { --acc: #2dd4bf; --acc-2: #0f9f8f; --acc-3: #9ff3e6; --on-acc: #04201c; }
html[data-level="hard"] { --acc: #ff7a3d; --acc-2: #c2410c; --acc-3: #ffb48a; --on-acc: #2a0f03; }
html[data-level="insane"] { --acc: #ff3b5c; --acc-2: #9f1239; --acc-3: #ff93a8; --on-acc: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
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 12% -10%, color-mix(in srgb, var(--acc-2) 32%, transparent), transparent 62%),
    radial-gradient(700px 480px at 100% 8%, rgba(143,124,255,.14), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, color-mix(in srgb, var(--acc) 10%, transparent), 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, 980px); 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(--acc); color: var(--on-acc); font-weight: 600; }
.skip:focus { top: 12px; }
header, main, footer { position: relative; z-index: 1; }
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); }

/* sand drifting up behind the page; still in Calm */
.dust { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dust i { position: absolute; left: var(--x); bottom: -10px; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: var(--acc-3); opacity: 0; filter: blur(.5px); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--acc) 45%, transparent); animation: drift var(--d, 16s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes drift { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .55; } 90% { opacity: .35; } 100% { transform: translate(var(--dx, 30px), -105vh); opacity: 0; } }
.dust i:nth-child(1) { --x: 6%; --d: 19s; --dl: -3s; --dx: 40px; } .dust i:nth-child(2) { --x: 14%; --s: 3px; --d: 23s; --dl: -11s; --dx: -30px; }
.dust i:nth-child(3) { --x: 23%; --d: 17s; --dl: -7s; --dx: 20px; --s: 5px; } .dust i:nth-child(4) { --x: 31%; --s: 3px; --d: 26s; --dl: -15s; --dx: -40px; }
.dust i:nth-child(5) { --x: 42%; --d: 21s; --dl: -1s; --dx: 24px; } .dust i:nth-child(6) { --x: 51%; --s: 3px; --d: 18s; --dl: -9s; --dx: -18px; }
.dust i:nth-child(7) { --x: 60%; --d: 24s; --dl: -13s; --dx: 36px; --s: 5px; } .dust i:nth-child(8) { --x: 68%; --s: 3px; --d: 20s; --dl: -5s; --dx: -26px; }
.dust i:nth-child(9) { --x: 77%; --d: 22s; --dl: -17s; --dx: 16px; } .dust i:nth-child(10) { --x: 85%; --s: 3px; --d: 25s; --dl: -2s; --dx: -34px; }
.dust i:nth-child(11) { --x: 92%; --d: 18s; --dl: -10s; --dx: 28px; --s: 5px; } .dust i:nth-child(12) { --x: 97%; --s: 3px; --d: 27s; --dl: -20s; --dx: -12px; }
html.calm .dust { display: none; }

/* ---------- header (the site's) ---------- */
.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,169,90,.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(--acc); border-color: rgba(226,169,90,.45); background: rgba(226,169,90,.1); }
.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; }
.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-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.06); outline: none; }
header.top { z-index: 30; }
/* the header sheds things step by step so everything still fits at 320px; sounds stay reachable in Settings */
@media (max-width: 760px) { .user-btn { padding: 0 5px; max-width: none; } .user-name, .user-btn .chev { 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: 16px; padding: 4px 0 28px; }
.title-row { text-align: center; padding: 6px 0 2px; }
/* the title: the hourglass of the timeways beside the words. Its sand runs for five seconds, the glass turns, and the sand
   runs again (a 12 s loop of transforms on three small blocks and the glass; the glass drawing sits on the box, not the
   baseline, so it turns in place). The bronze sweeps across "Before" once as the page opens and then rests, and the
   word flares while the glass turns (opacity only). The loops run unless the visitor chose Calm, and rest while the title
   is out of the window or the tab is hidden (.rest, set by the script). The flare's bright copy of the word is generated
   content with an empty spoken text, so the heading's own text holds the word once. */
.logo { margin: 0; display: inline-flex; align-items: center; gap: .18em; font: 700 clamp(30px, 8vw, 48px)/1 var(--display); letter-spacing: -.04em; }
.logo .or { font: italic 600 .5em var(--display); letter-spacing: 0; color: var(--acc); vertical-align: .12em; margin: 0 .08em; }
.logo .w1 { position: relative; background: linear-gradient(90deg, var(--acc-3), var(--acc) 28%, var(--acc-2) 50%, var(--acc) 72%, var(--acc-3)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: logo-shine 2.4s var(--ease) .4s 1 both; }
.logo .w1::after { content: attr(data-flare); content: attr(data-flare) / ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff1d6, #f7dfa3 50%, #ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; }
.logo.rest, .logo.rest *, .logo.rest *::before, .logo.rest *::after { animation-play-state: paused !important; }
.logo-glass { position: relative; flex: none; width: .72em; height: .72em; margin-right: .06em; color: var(--acc); filter: drop-shadow(0 0 .22em color-mix(in srgb, var(--acc) 55%, transparent)); }
.logo-glass svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo-glass .sand { position: absolute; left: 34.5%; right: 34.5%; background: currentColor; opacity: .92; }
.logo-glass .sa { top: 23%; height: 24%; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.logo-glass .sb { top: 53%; height: 24%; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 100%; transform: scaleY(0); }
.logo-glass .st { left: calc(50% - .5px); right: auto; width: 1.5px; top: 47%; height: 9%; }
html:not(.calm) .logo .w1::after { animation: logo-flare 12s var(--ease) infinite; }
html:not(.calm) .logo-glass { animation: logo-turn 12s var(--ease) infinite; }
html:not(.calm) .logo-glass .sa { animation: sand-top 12s linear infinite; }
html:not(.calm) .logo-glass .sb { animation: sand-bottom 12s linear infinite; }
html:not(.calm) .logo-glass .st { animation: sand-stream 12s linear infinite; }
html.calm .logo .w1 { animation: none; }
@keyframes logo-shine { to { background-position: 200% 0; } }
@keyframes logo-flare { 0%, 38%, 50%, 88%, 100% { opacity: 0; } 42%, 46% { opacity: .8; } 92%, 96% { opacity: .8; } }
@keyframes logo-turn { 0%, 40% { transform: rotate(0); } 48%, 90% { transform: rotate(180deg); } 98%, 100% { transform: rotate(360deg); } }
@keyframes sand-top { 0% { transform: scaleY(1); } 40%, 48% { transform: scaleY(0); } 90%, 100% { transform: scaleY(1); } }
@keyframes sand-bottom { 0% { transform: scaleY(0); } 40%, 48% { transform: scaleY(1); } 90%, 100% { transform: scaleY(0); } }
@keyframes sand-stream { 0%, 38% { opacity: 1; } 40%, 48% { opacity: 0; } 50%, 88% { opacity: 1; } 90%, 100% { opacity: 0; } }
.tagline { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; }
.screen { animation: screen-in .4s var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } }
html.calm .screen { animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } }

/* ---------- buttons, chips, segments (the site's) ---------- */
.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: var(--on-acc); background: var(--acc-grad); box-shadow: 0 10px 28px -12px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.btn.primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn.primary kbd { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.12); color: var(--on-acc); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255,255,255,.05); }
.btn.discord { color: #fff; border-color: transparent; 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.big { padding: 14px 26px; font-size: 16px; border-radius: 16px; }
.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:hover { color: var(--text); background: rgba(255,255,255,.07); }
.link-btn { border: 0; background: none; padding: 0; color: var(--acc); font: 500 12.5px var(--font); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(226,169,90,.4); text-underline-offset: 3px; }
.link-btn:hover { color: var(--acc-3); }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.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; min-width: 0; }
.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; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tag.exp { color: #0b0a12; border-color: transparent; background: var(--xc, var(--acc)); }
.xtag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; color: #0b0a12; background: var(--xc); vertical-align: 1px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin: 0 0 10px; }
.eyebrow::before, .eyebrow::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--acc-grad); }

/* ---------- the start screen: the game in small on one side, Play as the hero on the other ---------- */
.start { display: flex; flex-direction: column; gap: 16px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 16px; align-items: stretch; }
.hero-main { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 60%), var(--surface); overflow: hidden; min-width: 0; }
.hero-main::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--acc-grad); opacity: .5; }
.hero-demo { display: flex; min-width: 0; }
/* two ways to play, side by side: today's daily and Endless. The bright one is the natural next step (it breathes, a sheen runs
   over it, and Enter presses it); the other waits in the level's colour. */
.plays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.play-btn { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; min-height: 124px; padding: 14px 16px 15px; border-radius: 22px; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
  color: var(--text); border: 1px solid color-mix(in srgb, var(--acc) 42%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), rgba(0,0,0,.28); transition: transform .18s var(--ease), filter .2s, box-shadow .3s, border-color .2s, background .3s; }
.play-btn:hover { transform: translateY(-2px); border-color: var(--acc); }
.play-btn:active { transform: scale(.985); }
.play-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 22px; }
.play-btn[disabled] { opacity: .55; filter: saturate(.4); cursor: default; animation: none; pointer-events: none; }
.play-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent); transition: background .3s, color .3s; }
.play-ic .ic { width: 20px; height: 20px; }
.play-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.play-text b { font: 800 clamp(19px, 2vw, 23px)/1.1 var(--display); letter-spacing: -.02em; }
.play-text small { font: 600 12.5px/1.3 var(--font); color: var(--muted); }
.play-btn kbd { position: absolute; top: 14px; right: 14px; display: none; background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.12); color: var(--on-acc); }
.play-btn.main { color: var(--on-acc); border-color: transparent; background: var(--acc-grad); box-shadow: 0 20px 54px -18px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2); animation: play-breathe 2.8s ease-in-out infinite alternate; }
@keyframes play-breathe { from { box-shadow: 0 16px 40px -20px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2); } to { box-shadow: 0 24px 70px -14px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2); } }
.play-btn.main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 46%, rgba(255,255,255,.12) 54%, transparent 64%); transform: translateX(-130%); animation: play-sheen 3.6s 1s var(--ease) infinite; }
@keyframes play-sheen { 0% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } }
html.calm .play-btn.main, html.calm .play-btn.main::before { animation: none; }
.play-btn.main:hover { filter: brightness(1.07); }
.play-btn.main .play-ic { color: var(--on-acc); background: rgba(0,0,0,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.25); }
.play-btn.main .play-text small { color: inherit; opacity: .82; }
.play-btn.main kbd { display: block; }
/* today's daily is played: its result stands on the button, with a tick */
.play-btn.done:not(.main) .play-ic { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent); }
.play-btn.done:not(.main) .play-ic .ic { stroke-width: 2.6; }
@media (hover: none) and (pointer: coarse) { .play-btn kbd, .play-btn.main kbd, .btn kbd { display: none; } }
/* the levels, two by two: each tile carries today's daily at that level. A dot and "to play" until it is started (the ten
   squares are a faint track then, not forty boxes), the squares so far while it runs, a tick and the score once it is played. */
.levels { display: flex; flex-direction: column; gap: 8px; }
.levels-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lbl { font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.levels-done { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.level-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.level-tile { position: relative; display: block; min-width: 0; --lc: #e2a95a; }
.level-tile[data-level="easy"] { --lc: #2dd4bf; } .level-tile[data-level="hard"] { --lc: #ff7a3d; } .level-tile[data-level="insane"] { --lc: #ff3b5c; }
.level-tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lt-body { display: flex; flex-direction: column; gap: 9px; height: 100%; padding: 10px 12px 11px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0,0,0,.24); transition: border-color .2s, background .2s, box-shadow .25s, transform .2s var(--ease); }
.lt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.lt-name { font: 700 14.5px/1.2 var(--display); color: var(--lc); white-space: nowrap; }
.lt-state { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 600 11.5px/1.2 var(--font); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.level-tile.new .lt-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 8px var(--lc); }
.level-tile.open .lt-state { color: var(--acc-3); }
.level-tile.done .lt-state { font: 700 13px/1.2 var(--display); color: var(--text); }
.level-tile.done .lt-state::before { content: ""; width: 5px; height: 9px; margin: 0 2px 2px 0; border: solid var(--good); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.level-tile .squares { gap: 3px; width: 100%; } .level-tile .squares i { flex: 1 1 0; width: auto; min-width: 0; height: 6px; border-radius: 3px; }
.level-tile.new .squares i, .level-tile.unknown .squares i { background: rgba(255,255,255,.06); box-shadow: none; }
.level-tile.unknown .squares i { animation: shimmer-sq 1.4s ease-in-out infinite alternate; }
@keyframes shimmer-sq { from { opacity: .4; } to { opacity: 1; } }
html.calm .level-tile.unknown .squares i { animation: none; }
.level-tile input:hover:not(:checked) + .lt-body { border-color: color-mix(in srgb, var(--lc) 55%, transparent); transform: translateY(-1px); }
.level-tile input:checked + .lt-body { border-color: var(--lc); background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 22%, transparent), transparent 85%), rgba(0,0,0,.24); box-shadow: 0 0 0 1px var(--lc), 0 14px 30px -18px var(--lc); }
.level-tile input:focus-visible + .lt-body { outline: 2px solid var(--lc); outline-offset: 2px; }
.level-tile[data-level="insane"] input:checked + .lt-body { background: repeating-linear-gradient(-55deg, transparent 0 9px, rgba(255,59,92,.07) 9px 14px), linear-gradient(180deg, color-mix(in srgb, var(--lc) 22%, transparent), transparent 85%), rgba(0,0,0,.24); }
.level-about { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; min-height: 1.45em; }
.daily-meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-num { font: 700 13px 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); }
.offline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border-radius: 14px; border: 1px dashed rgba(255,77,109,.45); background: rgba(255,77,109,.06); }
.offline-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,77,109,.14); color: #ffb4c0; flex: none; }
.offline-ic .ic { width: 22px; height: 22px; }
.offline > div { flex: 1 1 200px; min-width: 0; }
.offline b { display: block; font: 700 14px var(--display); }
.offline p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* the demo: the arena in small. Its states follow the game's: a pick presses the card, the answer stamps both, the strip draws the gap. */
.demo { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 26px; border: 1px solid var(--line); background: radial-gradient(90% 110% at 50% 0%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 60%), var(--surface); overflow: hidden; transition: opacity .45s; min-width: 0; }
.demo.out { opacity: 0; }
.demo-cards { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 8px; min-height: 0; }
.demo-card { --xc: var(--acc); --rim: var(--acc); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 216px; padding: 18px 10px 46px; border-radius: 18px; border: 1px solid var(--line-2); background: #0d0b14; text-align: center; transition: transform .22s var(--ease), border-color .3s, box-shadow .4s, filter .4s; }
.demo-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.demo-bg img { position: absolute; left: 50%; top: 40%; width: 150%; aspect-ratio: 1; translate: -50% -50%; filter: blur(26px) saturate(1.7) brightness(.8); opacity: .7; }
.demo-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(95% 80% at 50% 36%, transparent 0 26%, rgba(10,9,16,.52) 64%, rgba(10,9,16,.9) 100%); }
.demo-icon { position: relative; width: 56px; height: 56px; flex: none; border-radius: 13px; overflow: hidden; background: #0b0a12; transition: box-shadow .4s; box-shadow: 0 0 0 2px #07060b, 0 0 0 4px color-mix(in srgb, var(--rim) 88%, #fff), 0 0 0 9px rgba(9,8,14,.7), 0 0 0 10px color-mix(in srgb, var(--rim) 45%, transparent), 0 12px 26px -8px rgba(0,0,0,.95), 0 0 30px -4px color-mix(in srgb, var(--rim) 60%, transparent); }
.demo-icon img { display: block; width: 100%; height: 100%; }
.demo-icon.none img, .demo-bg.none img { visibility: hidden; }
.demo-name { font: 700 clamp(15px, 1.6vw, 20px)/1.12 var(--display); letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.75); margin-top: 6px; }
.demo-cat { padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,9,16,.55); color: #d6d2e4; font-size: 11px; font-weight: 600; }
.demo-band { position: absolute; left: 0; right: 0; bottom: 0; min-height: 34px; display: grid; place-items: center; padding: 4px 6px; font: 800 10.5px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #0b0a12; background: linear-gradient(90deg, color-mix(in srgb, var(--xc) 78%, #000), var(--xc) 50%, color-mix(in srgb, var(--xc) 78%, #000)); transform: translateY(101%); transition: transform .45s var(--ease); }
.demo-tag { position: absolute; z-index: 3; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; font: 800 9px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--on-acc); background: var(--acc-grad); opacity: 0; transform: translateY(-6px) scale(.8); transition: opacity .16s, transform .3s var(--bounce), background .2s, color .2s; }
.demo-stamp { --rot: -9deg; position: absolute; z-index: 3; top: 12px; right: 8px; padding: .3em .55em .26em; border: 2px solid currentColor; border-radius: 7px; font: 800 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--stamp, #c9c4da); background: rgba(10,9,16,.62); opacity: 0; transform: rotate(var(--rot)) scale(2.6); }
.demo-card[data-side="b"] .demo-stamp { --rot: 7deg; }
.demo-card.picked { transform: scale(.965); border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc), inset 0 12px 36px rgba(0,0,0,.55); }
.demo-card.picked .demo-tag { opacity: 1; transform: none; }
.demo.has-pick .demo-card:not(.picked) { filter: brightness(.62) saturate(.6); }
.demo.reveal .demo-card { --rim: var(--xc); transform: none; filter: none; }
.demo.reveal .demo-band { transform: none; }
.demo.reveal .demo-stamp { animation: stamp-in .4s cubic-bezier(.2, 1.3, .35, 1) both; }
.demo.reveal .demo-card.first { border-color: var(--good); box-shadow: 0 0 0 2px var(--good), 0 0 46px -14px color-mix(in srgb, var(--good) 85%, transparent); }
.demo.reveal .demo-card.first .demo-stamp { --stamp: var(--good); animation-delay: .07s; }
.demo.reveal .demo-card.later .demo-stamp { animation-delay: .22s; }
.demo.reveal .demo-card.later:not(.wrong) { filter: brightness(.72) saturate(.7); }
.demo.reveal .demo-card.wrong { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad), 0 0 46px -14px color-mix(in srgb, var(--bad) 85%, transparent); animation: shake .55s var(--ease); }
.demo.reveal .demo-card.wrong .demo-stamp { --stamp: var(--bad); }
.demo.reveal .demo-card.picked.first .demo-tag { background: var(--good); color: #052e16; }
.demo.reveal .demo-card.picked.wrong .demo-tag { background: var(--bad); color: #fff; }
html.calm .demo.reveal .demo-stamp { animation: none; opacity: 1; transform: rotate(var(--rot)); }
html.calm .demo.reveal .demo-card.wrong { animation: none; }
html.calm .demo, html.calm .demo-band { transition: none; }
.demo-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.demo-ask { font: 700 9.5px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.ring.demo-ring { width: 62px; }
.ring.demo-ring b { font-size: 22px; }
.demo-strip { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 30px 4px 0; }
.demo-strip .tl-span { top: 32px; }
.demo-strip .tl-mark { width: 22px; height: 22px; margin-left: -11px; top: -27px; border-radius: 7px; }
.demo-cap { margin: 0; min-height: 2.9em; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45; text-wrap: balance; }
.demo-cap b { color: var(--text); }

/* a first visit: three lines with pictures */
.first-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.first-lines li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--muted); font-size: 13px; line-height: 1.45; }
.first-lines li b { color: var(--text); }
.fl-art { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 96px; }
.fl-art img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 2px #07060b, 0 0 0 3px var(--acc); }
.fl-art i { font: italic 600 12px var(--display); color: var(--acc); }
.fl-clock { position: relative; width: 46px; height: 46px; }
.fl-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fl-clock .ring-fg { stroke: var(--acc); stroke-dashoffset: 60; }
.fl-clock b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px var(--display); }
.fl-squares { flex-wrap: wrap; max-width: 60px; gap: 3px; }
.fl-squares i { width: 9px; height: 9px; }

/* under the hero: Versus, today's board, your bests */
.start-low { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.start-low .versus-entry { grid-column: 1 / -1; width: 100%; }
.side-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(20,18,28,.7); min-width: 0; }
.side-card h2 { margin: 0 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.side-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.lvl-tag { display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 10px/1.5 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--lc, var(--acc)); }
.lvl-tag.normal, .hud-level.normal { color: #1a1206; } .lvl-tag.easy, .hud-level.easy { color: #04201c; }
.lvl-tag.insane, .hud-level.insane { background: repeating-linear-gradient(-55deg, transparent 0 6px, rgba(0,0,0,.28) 6px 10px), var(--lc); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.bests.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.best-tile { padding: 10px 6px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); text-align: center; min-width: 0; }
.best-tile b { display: block; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.best-tile b.none { color: var(--dim); }
.best-tile span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.best-tile.hi { border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), rgba(0,0,0,.22); }
.best-tile.hi b { color: var(--acc-3); }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-demo { order: -1; }
  /* someone who has played before: the first screen is the two buttons and the four levels, the demo has done its job */
  html.returning .hero-demo { display: none; }
  .demo-card { min-height: 0; padding: 14px 8px 42px; gap: 7px; }
  .demo-cap { min-height: 2.9em; font-size: 12.5px; }
  .first-lines { grid-template-columns: minmax(0, 1fr); }
  .start-low { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .title-row { padding: 0; }
  .tagline { display: none; }
  .start { gap: 12px; }
  .hero { gap: 12px; }
  .hero-main { padding: 14px; gap: 12px; border-radius: 22px; }
  .demo { padding: 10px; border-radius: 22px; gap: 8px; }
  .demo-cards { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 6px; }
  .demo-ask { display: none; }
  .ring.demo-ring { width: 52px; } .ring.demo-ring b { font-size: 18px; }
  .demo-name { font-size: 14.5px; margin-top: 4px; }
  .demo-band { height: 30px; font-size: 9.5px; letter-spacing: .03em; }
  .demo-stamp { font-size: 10px; top: 8px; right: 6px; }
  .demo-tag { font-size: 8px; top: 6px; left: 6px; padding: 2px 6px; }
  .demo-strip { padding-top: 26px; } .demo-strip .tl-span { top: 28px; } .demo-strip .tl-mark { width: 20px; height: 20px; margin-left: -10px; top: -24px; }
  .plays { gap: 8px; }
  .play-btn { min-height: 112px; border-radius: 20px; padding: 12px 13px 13px; gap: 10px; }
  .play-ic { width: 36px; height: 36px; } .play-ic .ic { width: 18px; height: 18px; }
  .play-text b { font-size: 19px; }
  .daily-meta { justify-content: center; }
}
@media (max-width: 360px) { .play-text b { font-size: 17px; } .play-text small { font-size: 12px; } .lt-body { padding: 9px 10px 10px; } .lt-name { font-size: 13.5px; } }

/* ---------- the game: HUD ---------- */
.play { display: flex; flex-direction: column; gap: 12px; position: relative; outline: none; }
/* while a pair is on the table the page is the arena: the title steps aside, the column may grow to 1,400 px and sits in the middle of the screen */
body.playing .app.wrap { width: min(100% - 32px, 1400px); min-height: calc(100dvh - 72px); justify-content: center; padding-bottom: 16px; }
body.playing .title-row, body.playing .foot { display: none; }
.hud { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 55%), rgba(20,18,28,.66); transition: border-color .5s, background .5s, box-shadow .5s; }
.hud-streak { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-streak b { font: 700 30px/1 var(--display); letter-spacing: -.03em; min-width: 1.2ch; text-align: center; display: inline-block; font-variant-numeric: tabular-nums; }
.hud-streak b.pop { animation: pop-num .5s var(--bounce); }
@keyframes pop-num { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--acc-3); } 100% { transform: scale(1); } }
html.calm .hud-streak b.pop { animation: none; }
.hud-label { color: var(--muted); font-size: 13px; }
.hud-mid { display: flex; align-items: center; gap: 8px; justify-content: center; min-width: 0; }
.hud-mode { font: 700 13px var(--display); color: var(--text); padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); white-space: nowrap; }
.hud-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.hud-best { color: var(--muted); font-size: 13px; white-space: nowrap; }
.hud-best b { color: var(--text); font: 700 15px var(--display); }
/* the flame: cold at 0, grows with the streak */
.flame { position: relative; width: 26px; height: 34px; flex: none; transform-origin: 50% 100%; transition: transform .5s var(--bounce), opacity .4s, filter .4s; }
.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%; animation: flicker 1.1s ease-in-out infinite alternate; }
.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); animation-delay: -.35s; animation-duration: .9s; }
.flame i:nth-child(3) { width: 8px; height: 13px; background: radial-gradient(60% 70% at 50% 85%, #fff7d6, #ffd166 80%, transparent); animation-delay: -.6s; animation-duration: .7s; }
@keyframes flicker { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.14) scaleX(.94) skewX(2deg); } }
.flame.cold { opacity: .4; filter: saturate(.35); }
html.calm .flame i { animation: none; }

/* ---------- the arena: two large cards and the clock between them ---------- */
.arena { --arena-h: clamp(300px, min(calc(100dvh - 300px), 64vw), 660px); --mid: clamp(132px, 13vw, 208px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--mid) minmax(0, 1fr); gap: 0 clamp(8px, 1.2vw, 18px); align-items: stretch; height: var(--arena-h); padding: clamp(10px, 1.2vw, 18px); border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--acc) 7%, transparent), transparent 60%), var(--surface); transition: border-color .35s, box-shadow .5s; }
.arena.urgent { border-color: rgba(255,77,109,.5); box-shadow: 0 0 0 1px rgba(255,77,109,.2), 0 0 80px -24px rgba(255,77,109,.7); }
/* Insane feels dangerous: a crimson glow breathes under the cards, and the last seconds burn white */
.arena::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(120% 90% at 50% 120%, rgba(255,59,92,.26), transparent 62%), repeating-linear-gradient(-55deg, transparent 0 18px, rgba(255,59,92,.035) 18px 26px); }
html[data-level="insane"] .arena::before { opacity: 1; animation: danger 2.8s ease-in-out infinite alternate; }
@keyframes danger { from { opacity: .5; } to { opacity: 1; } }
html.calm .arena::before { animation: none; }
html[data-level="insane"] .ring.urgent { --tcol: #fff; }
html[data-level="insane"] .ring.urgent b { color: #fff; }
html[data-level="insane"] .arena.urgent { border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 80px -24px rgba(255,59,92,.9); }

/* a card: the thing's own icon, sharp and near its real size, set like a gem in a dial of the timeways; a large blurred copy of the
   same icon is the card's backdrop, so every card has the colours of its thing. --rim is the level's accent until the answer is
   out, then the expansion's colour (--xc): green and red are kept for the verdict alone. */
.card { --xc: var(--acc); --rim: var(--acc); --rim-2: var(--acc-2); --rim-3: var(--acc-3); --medal: clamp(118px, min(13.5vw, 27vh), 196px); --icon: 72px;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border-radius: 24px; border: 1px solid var(--line-2); background: #0d0b14; color: var(--text); cursor: pointer; text-align: center;
  transition: transform .22s var(--ease), border-color .3s, box-shadow .4s, filter .4s; -webkit-tap-highlight-color: transparent; }
.card[aria-disabled="true"] { cursor: default; }
.card:focus-visible { outline: 3px solid var(--acc-3); outline-offset: 3px; border-radius: 24px; }
.card-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background: radial-gradient(80% 70% at 50% 36%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%); }
.card-bg img { position: absolute; left: 50%; top: 40%; width: 128%; aspect-ratio: 1; translate: -50% -50%; filter: blur(clamp(22px, 3.4vw, 48px)) saturate(1.75) brightness(.82); opacity: 0; transition: opacity .5s; }
.card-bg.ready img { opacity: .72; }
.card-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(95% 80% at 50% 36%, transparent 0 28%, rgba(10,9,16,.5) 64%, rgba(10,9,16,.9) 100%), linear-gradient(180deg, rgba(10,9,16,.25), transparent 28%, transparent 58%, rgba(10,9,16,.86)); }
.card-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 1.6vh, 22px); padding: clamp(14px, 2vw, 30px) clamp(12px, 1.6vw, 26px) 6px; }
@media (hover: hover) {
  .card:hover:not([aria-disabled="true"]) { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 70%, transparent); box-shadow: 0 30px 60px -34px var(--acc-glow), 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent); }
  .card:hover:not([aria-disabled="true"]) .medal { transform: scale(1.05); }
  .card:hover:not([aria-disabled="true"]) .card-bg img { opacity: .9; }
}
.card:active:not([aria-disabled="true"]) { transform: scale(.985); }
/* the dial: a bezel, twelve marks, a dark plate; the icon sits in the middle with a rim of its own */
.medal { position: relative; flex: none; width: var(--medal); aspect-ratio: 1; display: grid; place-items: center; transition: transform .35s var(--bounce); }
.medal-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(9,8,14,.82) 0 70%, rgba(9,8,14,.5) 86%, transparent 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 44px -18px rgba(0,0,0,.95); }
.medal-ring::before, .medal-ring::after { content: ""; position: absolute; border-radius: 50%; transition: background .4s; }
.medal-ring::before { inset: 0; background: conic-gradient(from 200deg, var(--rim-2), var(--rim) 20%, var(--rim-3) 34%, var(--rim) 50%, var(--rim-2) 68%, var(--rim) 84%, var(--rim-2));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rim) 55%, transparent)); }
.medal-ring::after { inset: 11px; background: repeating-conic-gradient(from -1.2deg, color-mix(in srgb, var(--rim-3) 85%, transparent) 0 2.4deg, transparent 2.4deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); opacity: .75; animation: dial-turn 90s linear infinite; }
@keyframes dial-turn { to { transform: rotate(360deg); } }
html.calm .medal-ring::after { animation: none; }
.card-icon { position: relative; flex: none; width: var(--icon); height: var(--icon); border-radius: 15px; overflow: hidden; background: #0b0a12; display: grid; place-items: center; transition: box-shadow .4s;
  box-shadow: 0 0 0 2px #07060b, 0 0 0 4px color-mix(in srgb, var(--rim) 88%, #fff), 0 0 0 5px rgba(0,0,0,.6), 0 14px 30px -10px rgba(0,0,0,.95), 0 0 34px -4px color-mix(in srgb, var(--rim) 60%, transparent); }
.card-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 38%, transparent 70%, rgba(0,0,0,.38)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.6); }
.card-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-icon .ph { display: none; width: 56%; height: 56%; color: var(--rim); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.none > .card-icon, .card-icon.none { background: linear-gradient(145deg, #1d1828, #0b0a12); }
.none > .card-icon img, .card-icon.none img { visibility: hidden; }
.none > .card-icon .ph, .card-icon.none .ph { display: block; position: absolute; }
.card-text { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1vh, 12px); min-width: 0; max-width: 100%; }
.card-name { font: 700 clamp(21px, 2.35vw, 38px)/1.1 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.75); }
.card-cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,9,16,.55); color: #d6d2e4; font-size: clamp(11.5px, .95vw, 13.5px); font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* the band at the foot of a card: the key hint before the answer, then where the thing is from, in its expansion's colour. Its room is
   kept from the start, so nothing jumps at the reveal. */
.card-band { position: relative; flex: none; height: clamp(46px, 7.4vh, 66px); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 14px; overflow: hidden; }
.card-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--xc) 78%, #000), var(--xc) 50%, color-mix(in srgb, var(--xc) 78%, #000)); transform: translateY(101%); transition: transform .45s var(--ease); }
.card.revealed .card-band::before { transform: none; }
.band-text, .band-num { position: relative; opacity: 0; transform: translateY(10px); transition: opacity .3s .12s, transform .4s .12s var(--ease); color: #0b0a12; min-width: 0; }
.card.revealed .band-text, .card.revealed .band-num { opacity: 1; transform: none; }
.band-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.band-exp { font: 800 clamp(12px, 1.05vw, 15px)/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.band-patch { font-size: clamp(11px, .9vw, 12.5px); font-weight: 600; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.band-patch:empty, .band-num:empty { display: none; }
.band-num { font: 800 clamp(24px, 3vw, 40px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.card-key { position: absolute; left: 50%; bottom: clamp(12px, 2vh, 20px); translate: -50% 0; color: var(--muted); background: rgba(10,9,16,.6); font-size: 11px; padding: 3px 9px; transition: opacity .2s; }
.card-key i { font-style: normal; opacity: .6; margin: 0 3px; }
.card.revealed .card-key, .card.picked .card-key { opacity: 0; }
@media (hover: none) and (pointer: coarse) { .card-key { display: none; } }
/* a pick answers at once: the card presses in and carries "your pick" until the answer and through it */
.card-tag { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; font: 800 11px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--on-acc); background: var(--acc-grad); box-shadow: 0 8px 20px -8px rgba(0,0,0,.8); opacity: 0; transform: translateY(-8px) scale(.8); transition: opacity .16s, transform .3s var(--bounce), background .2s, color .2s; pointer-events: none; }
.card.picked .card-tag { opacity: 1; transform: none; }
.card.picked:not(.revealed) { transform: scale(.972); border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc), inset 0 16px 50px rgba(0,0,0,.55), 0 0 44px -14px var(--acc-glow); }
.arena.has-pick .card:not(.picked):not(.revealed) { filter: brightness(.62) saturate(.6); }
/* the answer. Verdict colours: green marks the one that came first, red a wrong pick; the other card steps back in a neutral tone. */
.card.revealed { --rim: var(--xc); --rim-2: color-mix(in srgb, var(--xc) 55%, #000); --rim-3: color-mix(in srgb, var(--xc) 60%, #fff); }
.card.first { border-color: var(--good); box-shadow: 0 0 0 2px var(--good), 0 0 70px -18px color-mix(in srgb, var(--good) 85%, transparent); }
.card.later:not(.wrong) { filter: brightness(.72) saturate(.7); }
.card.wrong { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad), 0 0 70px -18px color-mix(in srgb, var(--bad) 85%, transparent); }
.card.picked.first .card-tag { background: var(--good); color: #052e16; }
.card.picked.wrong .card-tag { background: var(--bad); color: #fff; }
.arena.late .card.later { filter: brightness(.6) saturate(.5); }
/* the shake outranks the entrance below (whose selectors are kept light with :where), so a wrong pick always shakes */
.arena .card.wrong { animation: shake .55s var(--ease); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
html.calm .arena .card.wrong { animation: none; }
/* the next pair is dealt in: A from the left, B from the right */
.arena.swap :where(#cardA) { animation: in-left .5s var(--ease) both; }
.arena.swap :where(#cardB) { animation: in-right .5s var(--ease) both; }
@keyframes in-left { from { opacity: 0; transform: translateX(-46px) rotate(-1.5deg) scale(.96); } }
@keyframes in-right { from { opacity: 0; transform: translateX(46px) rotate(1.5deg) scale(.96); } }
html.calm .arena.swap :where(.card) { animation: fade .25s both; }

.middle { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 18px); min-width: 0; }
.ask { font: 700 clamp(11px, .95vw, 14px)/1.35 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; text-wrap: balance; }
.ask b { display: block; color: var(--xc, var(--acc)); letter-spacing: .04em; }
.ring { position: relative; flex: none; width: clamp(88px, 8.6vw, 132px); aspect-ratio: 1; --tcol: var(--acc); }
.ring svg:first-child { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-bg { fill: rgba(9,8,14,.5); stroke: rgba(255,255,255,.08); stroke-width: 6; }
.ring-fg { fill: none; stroke: var(--tcol); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 0; transition: stroke .3s; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tcol) 70%, transparent)); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(28px, 3vw, 44px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); transition: color .3s; }
.ring.warn { --tcol: #ffb347; }
.ring.urgent { --tcol: var(--bad); }
.ring.urgent b { color: var(--bad); animation: pulse-num .5s ease-in-out infinite alternate; }
@keyframes pulse-num { from { transform: scale(1); } to { transform: scale(1.18); } }
html.calm .ring.urgent b { animation: none; }
.ring.out { --tcol: var(--bad); } .ring.out b { color: var(--bad); animation: none; }
.ring.hold { --tcol: var(--muted); } .ring.hold .ring-fg { filter: none; } .ring.hold b { color: var(--muted); animation: none; }
.verdict { min-height: 1.3em; font: 800 clamp(15px, 1.5vw, 22px)/1.3 var(--display); color: var(--muted); text-align: center; letter-spacing: -.01em; white-space: nowrap; }
.verdict.good { color: var(--good); } .verdict.bad { color: var(--bad); }
.verdict.pop { animation: verdict-in .4s var(--bounce) both; }
@keyframes verdict-in { from { opacity: 0; transform: scale(.6); } }
html.calm .verdict.pop { animation: fade .2s both; }

/* a low or narrow desktop window: the dial and the text sit side by side so nothing is squeezed */
@media (min-width: 641px) and (max-height: 620px) { .card-main { flex-direction: row; text-align: left; gap: 18px; } .card-text { align-items: flex-start; } .card { --medal: clamp(96px, 20vh, 130px); } }
@media (min-width: 641px) and (max-width: 900px) { .arena { --mid: 112px; } }
/* a small card has no room for a dial: there the icon sits in a square plate with a bezel of its own, like an item in a bag */
@media (max-width: 900px) {
  .card { --medal: 104px; }
  .medal-ring { border-radius: 28px; background: linear-gradient(160deg, rgba(24,20,36,.92), rgba(8,7,13,.88)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 30px -14px rgba(0,0,0,.95); }
  .medal-ring::before { border-radius: inherit; padding: 4px; -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 exclude, linear-gradient(#000 0 0); }
  .medal-ring::after { display: none; }
}

/* phone: the game is the whole screen. The two cards are two big halves to tap, the clock sits on the seam between them. */
@media (max-width: 640px) {
  body.playing .top { display: none; }
  body.playing .app.wrap { width: min(100% - 16px, 1400px); min-height: 100dvh; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); justify-content: flex-start; }
  .play { flex: 1; gap: 8px; min-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); }
  .hud { min-height: 46px; padding: 6px 8px 6px 10px; gap: 8px; border-radius: 14px; }
  .hud-streak b { font-size: 24px; } .hud-label, .hud-best { display: none; }
  .hud-mode { font-size: 12px; padding: 2px 8px; }
  .arena { flex: 1; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; padding: 8px; border-radius: 22px; }
  .card { --medal: 90px; --icon: 64px; border-radius: 18px; text-align: left; }
  .medal-ring { border-radius: 24px; }
  .card-main { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 10px 14px 0 12px; }
  .card-text { flex: 1; align-items: flex-start; gap: 6px; }
  .card-name { font-size: clamp(17px, 5.2vw, 23px); text-wrap: pretty; }
  .card-cat { font-size: 11.5px; padding: 3px 9px; }
  .card-band { height: 40px; }
  /* one line: the expansion and the patch's number. The clock sits on the seam between the cards, so the upper card's
     answer keeps to the part of its band the clock does not reach */
  .band-text { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 0 8px; align-items: baseline; max-width: 100%; }
  .band-exp { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .band-patch { font-size: 11px; flex: none; }
  .band-pname { display: none; }
  #cardA .card-band { padding-bottom: 9px; }
  .band-num { font-size: 22px; }
  .card-tag { top: 8px; left: auto; right: 8px; font-size: 10px; padding: 4px 9px; }
  .card-bg img { top: 50%; left: 22%; width: 90%; min-width: 0; }
  .middle { flex-direction: row; justify-content: center; gap: 10px; height: 58px; margin: -7px 0; }
  .ask { flex: 1; text-align: right; font-size: 10.5px; letter-spacing: .08em; }
  .ring { width: 58px; isolation: isolate; }
  .ring::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: var(--surface); z-index: -1; }
  .ring b { font-size: 21px; }
  .verdict { flex: 1; text-align: left; font-size: 15px; }
  .arena.swap :where(#cardA) { animation-name: in-up; } .arena.swap :where(#cardB) { animation-name: in-down; }
  @keyframes in-up { from { opacity: 0; transform: translateY(-26px) scale(.97); } }
  @keyframes in-down { from { opacity: 0; transform: translateY(26px) scale(.97); } }
}
/* a tall phone has the room for the dial above the name */
@media (max-width: 640px) and (min-height: 760px) {
  .card { text-align: center; }
  .card-main { flex-direction: column; justify-content: center; gap: 10px; padding: 12px 12px 0; }
  .card-text { flex: none; align-items: center; }
  .card-bg img { left: 50%; top: 40%; width: 128%; }
}
@media (max-width: 360px) { .card { --medal: 86px; } .medal-ring { border-radius: 22px; } .card-main { gap: 12px; padding-left: 10px; } .hud-mid { gap: 5px; } }

/* ---------- slots for what comes next (filled once the server's contract arrives; hidden until then) ----------
   The difficulty picker sits under the mode switch on the start screen; its pill joins the HUD. Each level has its own
   colour: Easy teal, Normal the game's bronze, Hard ember, Insane crimson with hazard stripes. */
.seg.level label { --lc: #e2a95a; }
.seg.level label[data-level="easy"] { --lc: #2dd4bf; }
.seg.level label[data-level="hard"] { --lc: #ff7a3d; }
.seg.level label[data-level="insane"] { --lc: #ff3b5c; }
.seg.level input:hover:not(:checked) + span { color: var(--lc); }
.seg.level input:checked + span { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--lc) 70%, #000), var(--lc)); box-shadow: 0 8px 22px -10px var(--lc); }
.seg.level label[data-level="normal"] input:checked + span { color: #1a1206; }
.seg.level label[data-level="easy"] input:checked + span { color: #04201c; }
.seg.level label[data-level="insane"] input:checked + span { background: repeating-linear-gradient(-55deg, transparent 0 9px, rgba(0,0,0,.22) 9px 14px), linear-gradient(135deg, #5c0f22, #ff3b5c); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.seg.level input:focus-visible + span { outline-color: var(--lc); }
.hud-level { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 3px 9px; border-radius: 999px; background: var(--lc, var(--acc)); white-space: nowrap; }
.over-count .hud-level { vertical-align: 1px; margin-left: 4px; }
@media (max-width: 400px) { .seg.level span { padding: 6px 4px; font-size: 12px; } }
/* the Versus entry: one pill under the title, like Wowdle's */
.versus-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--cool) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--cool) 16%, transparent), transparent 70%), rgba(20,18,28,.7); color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .25s; }
.versus-entry:hover { border-color: var(--cool); transform: translateY(-1px); box-shadow: 0 20px 44px -26px var(--cool); }
.ve-badge { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #5b4bd6, var(--cool)); }
.ve-badge .ic { width: 20px; height: 20px; }
.ve-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ve-text b { font: 700 14px var(--display); }
.ve-text small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ve-cta { margin-left: auto; flex: none; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: #fff; background: var(--cool); }
@media (max-width: 480px) { .ve-cta { display: none; } }

/* ---------- the strip under the arena: the eleven expansions in their colours, lit where the two things sit; within one
   expansion (always at Insane) its patches instead, as the server lists them. One height for both, kept from the start. ---------- */
.strip { position: relative; flex: none; overflow: hidden; padding: 8px 16px 10px; border-radius: 18px; border: 1px solid var(--line); background: rgba(0,0,0,.24); --xc: var(--acc); transition: border-color .4s; }
.strip.patches { border-color: color-mix(in srgb, var(--xc) 38%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--xc) 9%, transparent), transparent 70%), rgba(0,0,0,.24); }
.strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 24px; }
.strip-title { font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.strip.patches .strip-title { color: var(--xc); }
.gap { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--text); font: 700 12.5px/1.2 var(--display); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .3s var(--ease); font-variant-numeric: tabular-nums; }
.gap.on { opacity: 1; transform: none; }
.gap small { color: var(--muted); font: 600 11.5px var(--font); }
.timeline, .pl-cells { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding-top: 34px; }
.tl-cell, .pl-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.tl-bar, .pl-bar { width: 100%; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--xc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xc) 24%, transparent); transition: background .4s, box-shadow .4s, transform .45s var(--bounce); }
.tl-cell.lit .tl-bar, .pl-cell.lit .pl-bar { background: var(--xc); box-shadow: 0 0 16px color-mix(in srgb, var(--xc) 75%, transparent); transform: scaleY(1.7); }
.tl-lbl, .pl-num { font: 600 10.5px/1.15 var(--font); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: color .3s; }
.tl-year { font: 500 9.5px/1 var(--font); color: var(--dim); opacity: .8; font-variant-numeric: tabular-nums; }
.tl-cell.lit .tl-lbl, .pl-cell.lit .pl-num { color: var(--text); }
.pl-num { font: 700 12px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.pl-name { font: 500 10px/1.15 var(--font); color: var(--dim); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cell.lit .pl-name { color: var(--text); overflow: visible; }
.pl-name:empty::before { content: "\00a0"; }
/* the names of the patches come with the answer */
.pl-cells .pl-name { opacity: 0; transform: translateY(-3px); transition: opacity .35s .2s, transform .4s .2s var(--ease); }
.pl-cells.named .pl-name { opacity: 1; transform: none; }
html.calm .pl-cells .pl-name { transform: none; transition: opacity .2s; }
/* a timed daily: the answer keeps its two seconds; a short line under the verdict runs out as the next pair comes */
.verdict.await::after { content: ""; display: block; width: 46px; height: 3px; margin: 7px auto 0; border-radius: 2px; background: currentColor; opacity: .55; transform-origin: left center; animation: wait-run var(--wait, 2s) linear both; }
@keyframes wait-run { to { transform: scaleX(0); } }
/* Calm takes the movement away, not the news: the wait is said in words, so a tap that does nothing is no riddle */
html.calm .verdict.await::after { content: "next pair in 2 s"; width: auto; height: auto; margin-top: 3px; border-radius: 0; background: none; opacity: 1; transform: none; animation: none; font: 600 11px/1.25 var(--font); letter-spacing: .01em; color: var(--muted); }
@media (max-width: 640px) { .verdict.await::after { margin: 4px 0 0; width: 40px; } }
/* a timed daily: a tap during the answer does not skip, the clock just nods */
.ring.nudge { animation: ring-nudge .32s var(--ease); }
@keyframes ring-nudge { 40% { transform: scale(.9); } }
html.calm .ring.nudge { animation: none; }
/* a marker: the thing's own small icon, set down on its expansion (or its patch) */
.tl-mark { position: absolute; top: -32px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 8px; overflow: hidden; background: #0b0a12; box-shadow: 0 0 0 2px var(--mc, var(--xc)), 0 6px 14px -4px rgba(0,0,0,.9); opacity: 0; transform: translateY(-14px) scale(.6); transition: opacity .2s, transform .4s var(--bounce); z-index: 2; }
.tl-mark img { display: block; width: 100%; height: 100%; }
.tl-mark.on { opacity: 1; transform: none; }
.tl-mark.first { --mc: var(--good); }
.tl-mark.shift-l { margin-left: -28px; } .tl-mark.shift-r { margin-left: 2px; }
html.calm .tl-mark { transition: opacity .2s; transform: none; }
/* the gap, drawn from the one that came first to the later one */
.tl-span { position: absolute; top: 36px; height: 4px; border-radius: 2px; left: var(--l, 0); width: var(--w, 0); background: linear-gradient(90deg, var(--c1, var(--acc)), var(--c2, var(--acc))); opacity: 0; pointer-events: none; transform-origin: var(--from, left) center; z-index: 1; box-shadow: 0 0 12px color-mix(in srgb, var(--c2, var(--acc)) 60%, transparent); }
.tl-span.on { opacity: .95; animation: span-draw .55s var(--ease) both; }
@keyframes span-draw { from { transform: scaleX(0); } }
html.calm .tl-span.on { animation: fade .2s both; }
@media (max-width: 640px) {
  .strip { padding: 6px 10px 8px; border-radius: 14px; }
  .strip-head { height: 22px; }
  .strip-title { font-size: 10px; letter-spacing: .1em; }
  .gap { font-size: 11.5px; padding: 2px 9px; } .gap small { display: none; }
  .timeline, .pl-cells { gap: 3px; padding-top: 28px; }
  .tl-year { display: none; }
  .tl-lbl, .pl-num, .pl-name { visibility: hidden; font-size: 9.5px; overflow: visible; }
  .tl-cell.lit .tl-lbl, .pl-cell.lit .pl-num { visibility: visible; }
  .pl-name { display: none; }
  .tl-mark { width: 22px; height: 22px; margin-left: -11px; top: -27px; border-radius: 7px; }
  .tl-mark.shift-l { margin-left: -24px; } .tl-mark.shift-r { margin-left: 2px; }
  .tl-span { top: 30px; }
  .pl-cells .pl-num { visibility: visible; }
}

/* ---------- the streak heats the room (Endless) ----------
   At 5, 10 and 20 in a row the whole arena steps up: its light, the embers between the cards, the sand behind the page, the flame,
   and the number, which grows and moves to the middle of the HUD. --hc and --hc2 are the colours of the step: ember, then
   magenta fire, then the white-blue of the hottest flame. Calm keeps the light and the number and leaves out what moves. */
body[data-heat="1"] { --hc: #ff8a3d; --hc2: #ffd166; --heat-k: 1.9; }
body[data-heat="2"] { --hc: #ff4d8d; --hc2: #ffa03d; --heat-k: 2.8; }
body[data-heat="3"] { --hc: #6fd0ff; --hc2: #ffffff; --heat-k: 4; }
body[data-heat] .dust i { animation-duration: calc(var(--d, 16s) / var(--heat-k, 1)); background: var(--hc2); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--hc) 70%, transparent); }
body[data-heat="2"] .dust i, body[data-heat="3"] .dust i { width: calc(var(--s, 4px) + 2px); height: calc(var(--s, 4px) + 2px); }
body[data-heat]::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(90% 60% at 50% 105%, color-mix(in srgb, var(--hc) 26%, transparent), transparent 70%); animation: heat-breathe 2.6s ease-in-out infinite alternate; }
body[data-heat="3"]::after { background: radial-gradient(110% 80% at 50% 105%, color-mix(in srgb, var(--hc) 30%, transparent), transparent 72%), radial-gradient(70% 40% at 50% -5%, color-mix(in srgb, var(--hc) 16%, transparent), transparent 70%); }
@keyframes heat-breathe { from { opacity: .55; } to { opacity: 1; } }
html.calm body[data-heat]::after { animation: none; }
body[data-heat] .arena { border-color: color-mix(in srgb, var(--hc) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hc) 22%, transparent), 0 0 90px -26px var(--hc), inset 0 -70px 110px -70px color-mix(in srgb, var(--hc) 55%, transparent); }
body[data-heat="2"] .arena { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hc) 34%, transparent), 0 0 120px -22px var(--hc), inset 0 -110px 150px -80px color-mix(in srgb, var(--hc) 65%, transparent), inset 0 60px 110px -90px color-mix(in srgb, var(--hc2) 40%, transparent); }
body[data-heat="3"] .arena { border-color: var(--hc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc) 45%, transparent), 0 0 150px -16px var(--hc), inset 0 -140px 170px -80px color-mix(in srgb, var(--hc) 70%, transparent), inset 0 90px 130px -90px color-mix(in srgb, var(--hc2) 45%, transparent); }
body[data-heat] .hud { border-color: color-mix(in srgb, var(--hc) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 16%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--hc) 12%, transparent)), rgba(20,18,28,.66); box-shadow: 0 0 44px -18px var(--hc); }
body[data-heat] .strip { border-color: color-mix(in srgb, var(--hc) 30%, transparent); }
body[data-heat] .card:not(.revealed):not(.picked) { border-color: color-mix(in srgb, var(--hc) 45%, transparent); }
body[data-heat] .ring:not(.warn):not(.urgent):not(.out):not(.hold) { --tcol: var(--hc); }
/* the number grows with every step and, from 10, sits in the middle of the HUD */
.hud { height: 58px; position: relative; z-index: 3; }
.hud-streak, .hud-mid { grid-row: 1; }
.hud-streak { grid-column: 1; } .hud-mid { grid-column: 2; }
body[data-heat] .hud-streak b { font-size: 40px; background: linear-gradient(180deg, #fff, var(--hc2) 45%, var(--hc)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--hc) 70%, transparent)); }
body[data-heat] .hud-label { color: var(--text); }
body[data-heat="2"] .hud-streak, body[data-heat="3"] .hud-streak { grid-column: 2; justify-self: center; }
body[data-heat="2"] .hud-mid, body[data-heat="3"] .hud-mid { grid-column: 1; justify-self: start; }
/* the big numbers stand inside the bar: their line is as tall as the digits, and at 20 the bar grows for them (the arena
   gives up the same few pixels, so nothing is pushed off the screen) */
body[data-heat="2"] .hud-streak b { font-size: 52px; line-height: .82; }
body[data-heat="3"] .hud-streak b { font-size: 66px; line-height: .82; filter: drop-shadow(0 0 22px var(--hc)); }
@media (min-width: 641px) {
  body[data-heat="3"] .hud { height: 68px; padding-block: 6px; }
  body[data-heat="3"] .arena { --arena-h: clamp(300px, min(calc(100dvh - 310px), 64vw), 660px); }
}
body[data-heat="1"] .flame { transform: scale(1.3); }
body[data-heat="2"] .flame { transform: scale(1.6); }
body[data-heat="3"] .flame { transform: scale(2); }
body[data-heat="2"] .flame i:nth-child(1) { background: radial-gradient(60% 70% at 50% 85%, #ff4d8d, #c2185b 70%, transparent 100%); }
body[data-heat="2"] .flame i:nth-child(2) { background: radial-gradient(60% 70% at 50% 85%, #ffd166, #ff6a8d 75%, transparent); }
body[data-heat="3"] .flame i:nth-child(1) { background: radial-gradient(60% 70% at 50% 85%, #8fd9ff, #4a6cff 70%, transparent 100%); }
body[data-heat="3"] .flame i:nth-child(2) { background: radial-gradient(60% 70% at 50% 85%, #ffffff, #8fd9ff 75%, transparent); }
body[data-heat="3"] .flame i:nth-child(3) { background: radial-gradient(60% 70% at 50% 85%, #ffffff, #e0f4ff 80%, transparent); }
body[data-heat="2"] .flame i, body[data-heat="3"] .flame i { animation-duration: .5s; }
/* embers rise between the cards */
.embers { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.embers i { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--hc2, #ffd166); box-shadow: 0 0 10px 2px var(--hc, #ff8a3d); opacity: 0; animation: ember-rise var(--d) linear var(--dl) infinite; }
@keyframes ember-rise { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: 1; } 70% { opacity: .8; } 100% { transform: translate(var(--dx), calc(-1 * var(--h, 640px))) scale(.3); opacity: 0; } }
html.calm .embers { display: none; }
.arena > .card { z-index: 1; } .arena > .middle { z-index: 3; }
/* what bursts over the arena stays inside it: the surge of light when the room steps up, and the sparks */
.fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 5; }
.surge { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--hc2, #fff) 75%, transparent), color-mix(in srgb, var(--hc, #ff8a3d) 55%, transparent) 45%, transparent 70%); }
.surge.go { animation: surge .9s ease-out; }
@keyframes surge { 0% { opacity: .95; transform: scale(.2); } 100% { opacity: 0; transform: scale(4.2); } }
html.calm .surge { display: none; }
/* the banner: a little larger and louder at every step */
.milestone { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 26px; border-radius: 999px; background: var(--acc-grad); color: var(--on-acc); white-space: nowrap; box-shadow: 0 24px 70px -20px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.35); animation: ms-in 1.5s var(--ease) both; }
.milestone b { font: 800 clamp(18px, 2.6vw, 28px)/1.1 var(--display); letter-spacing: -.01em; }
.milestone small { font: 700 clamp(10px, 1vw, 12.5px)/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.milestone small:empty { display: none; }
.milestone.m1 { background: linear-gradient(135deg, #c2410c, #ff8a3d 60%, #ffd166); color: #2a0f03; box-shadow: 0 24px 80px -16px #ff8a3d, inset 0 1px 0 rgba(255,255,255,.4); }
.milestone.m2 { padding: 18px 40px; border-radius: 28px; background: linear-gradient(135deg, #9d174d, #ff4d8d 50%, #ffa03d); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); box-shadow: 0 30px 110px -14px #ff4d8d, 0 0 0 3px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.4); animation-duration: 1.6s; }
.milestone.m2 b { font-size: clamp(26px, 4.4vw, 50px); }
.milestone.m3 { padding: 24px 54px; border-radius: 34px; background: linear-gradient(135deg, #1d4ed8, #6fd0ff 45%, #ffffff 70%, #6fd0ff); color: #06213a; box-shadow: 0 40px 160px -10px #6fd0ff, 0 0 0 4px rgba(255,255,255,.5), inset 0 2px 0 rgba(255,255,255,.7); animation-duration: 1.7s; }
.milestone.m3 b { font-size: clamp(34px, 6.4vw, 78px); letter-spacing: -.03em; text-transform: uppercase; }
.milestone.m3 small { font-size: clamp(11px, 1.3vw, 16px); }
.milestone.best { background: linear-gradient(135deg, #ffd166, #fff7d6 45%, var(--acc)); color: #1a1206; }
@keyframes ms-in { 0% { opacity: 0; transform: scale(.4) rotate(-3deg); } 12% { opacity: 1; transform: scale(1.12) rotate(1deg); } 22% { transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-18px) scale(.96); } }
html.calm .milestone { animation: ms-calm 1.5s both; }
@keyframes ms-calm { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
.spark { position: absolute; left: 50%; top: 50%; width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%; background: var(--sc, var(--gold)); box-shadow: 0 0 8px var(--sc, var(--gold)); pointer-events: none; z-index: 5; animation: spark-fly .9s var(--ease) both; }
@keyframes spark-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (max-width: 640px) {
  .hud { height: 48px; }
  body[data-heat] .hud-streak b { font-size: 28px; }
  body[data-heat="2"] .hud-streak b { font-size: 34px; }
  body[data-heat="3"] .hud-streak b { font-size: 40px; }
  body[data-heat="1"] .flame { transform: scale(1.1); } body[data-heat="2"] .flame { transform: scale(1.25); } body[data-heat="3"] .flame { transform: scale(1.45); }
  body[data-heat="2"] .hud-mode, body[data-heat="3"] .hud-mode { display: none; }
  .milestone.m2 { padding: 14px 26px; border-radius: 22px; } .milestone.m3 { padding: 18px 28px; border-radius: 26px; }
}

/* ---------- the end screen ---------- */
.over-card { position: relative; width: min(100%, 720px); margin: 0 auto; padding: 28px 24px 22px; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%), var(--surface); text-align: center; overflow: hidden; box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); }
.over-card::before { content: ""; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%); pointer-events: none; }
.over-card.best::before { background: radial-gradient(closest-side, rgba(255,209,102,.3), transparent 70%); }
.over-card > * { position: relative; }
.over-count { display: flex; flex-direction: column; align-items: center; }
.over-count b { font: 700 clamp(64px, 18vw, 100px)/1 var(--display); letter-spacing: -.05em; background: linear-gradient(180deg, var(--acc-3), var(--acc) 55%, var(--acc-2)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: count-in .6s var(--bounce) both; }
@keyframes count-in { from { transform: scale(.6); opacity: 0; } }
html.calm .over-count b { animation: fade .3s both; }
.over-label { color: var(--muted); font-size: 14px; }
.record { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 14px; border-radius: 999px; font: 800 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #1a1206; background: linear-gradient(135deg, #ffd166, #fff7d6 50%, var(--acc)); box-shadow: 0 12px 30px -12px rgba(255,209,102,.9); animation: rec-in .6s .2s var(--bounce) both; }
.record .ic { width: 14px; height: 14px; }
@keyframes rec-in { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.over-why { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.over-why b { color: var(--text); }
.over-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; margin: 16px 0 0; }
.mini-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 14px; border-radius: 16px; border: 1px solid var(--xc, var(--line-2)); background: linear-gradient(180deg, color-mix(in srgb, var(--xc, var(--acc)) 14%, transparent), transparent 70%), rgba(0,0,0,.22); --xc: var(--acc); min-width: 0; }
.mini-card .card-icon { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 0 0 2px var(--xc), 0 0 0 4px rgba(0,0,0,.45); }
.mini-card .card-icon .ph { width: 56%; height: 56%; }
.mini-text { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.mini-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%; }
.mini-name { font: 700 16px/1.2 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.mini-cat { color: var(--dim); font-size: 12px; font-weight: 500; }
.mini-pick { display: none; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.mini-card.picked .mini-pick { display: block; }
.mini-card.first { box-shadow: 0 0 0 2px var(--good); }
.mini-card.wrong { box-shadow: 0 0 0 2px var(--bad); }
.mini-card.late { opacity: .8; }
.mini-vs { align-self: center; color: var(--dim); font: 700 12px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.over-note { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.over-note b { color: var(--text); }
.over-place { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(226,169,90,.45); background: rgba(226,169,90,.1); color: var(--muted); font-size: 13px; }
.over-place b { color: var(--acc-3); font-variant-numeric: tabular-nums; }
.over-place .ic { width: 15px; height: 15px; color: var(--acc); }
.bests.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.over .bests { max-width: 420px; margin: 16px auto 0; }
.claim { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px auto 0; padding: 14px; max-width: 520px; 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); }
.claim p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.over .win-actions { margin-top: 18px; }
.share-line { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; white-space: pre-wrap; text-align: left; user-select: all; }
.result-next { margin: 14px 0 0; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .over-pair { grid-template-columns: minmax(0, 1fr); gap: 14px; } .mini-vs { display: none; } .over-card { padding: 22px 16px 18px; } .mini-card { flex-direction: row; text-align: left; align-items: center; padding: 16px 12px 14px; gap: 12px; } .mini-card .card-icon { width: 52px; height: 52px; flex: none; } .mini-text { flex: 1; align-items: flex-start; } .mini-meta { justify-content: flex-start; } .mini-name { font-size: 15px; } .mini-card .rib { left: 12px; translate: 0; } }

/* ---------- 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%, rgba(181,101,43,.2), transparent 70%), rgba(6,5,10,.74); }
@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; }
html.calm .dlg { animation: fade .2s both; }
.dlg.wide { width: min(100%, 600px); }
.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; }
.dlg-title .trophy { color: var(--acc); width: 22px; height: 22px; }
@media (max-width: 420px) { .dlg { padding: 24px 18px 18px; } }

/* boards */
.board-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.board-controls .seg.level:empty { display: none; }
.board-note { margin: 10px 0 12px; color: var(--dim); font-size: 12.5px; line-height: 1.5; min-height: 1.5em; }
.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 - 380px), 460px); overflow-y: auto; scrollbar-width: thin; padding: 1px 4px 1px 1px; margin-right: -4px; overscroll-behavior: contain; }
.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; }
@keyframes slide-in { from { opacity: 0; transform: translateY(6px); } }
html.calm .brow { animation: none; }
.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 { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; }
.brow .who b .nm { min-width: 0; 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,169,90,.6); background: linear-gradient(90deg, rgba(226,169,90,.16), rgba(226,169,90,.04)); box-shadow: 0 0 0 1px rgba(226,169,90,.2); }
.brow.me.top { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 16%, transparent), rgba(226,169,90,.06)); }
.brow.me .who b::after { content: "you"; flex: none; padding: 1px 6px; border-radius: 999px; font: 700 9.5px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--on-acc); background: var(--acc); }
.lb.mini .brow { padding: 5px 8px 5px 6px; gap: 8px; grid-template-columns: 24px 26px minmax(0, 1fr) auto; }
.lb.mini .brow .rank { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }
.lb.mini .brow .avatar { width: 26px; height: 26px; }
.lb.mini .brow .who b { font-size: 13px; } .lb.mini .brow .val b { font-size: 15px; }
.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.small { padding: 18px 12px; font-size: 12.5px; }
.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, .lb-skel li b, .lb-skel li span { display: block; 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 { to { background-position: -200% 0; } }
html.calm .lb-skel li i, html.calm .lb-skel li b, html.calm .lb-skel li span { animation: none; }
.lb-skel li i { width: 30px; height: 30px; } .lb-skel li i:nth-child(2) { width: 32px; height: 32px; border-radius: 50%; }
.lb-skel li b { width: 46%; height: 14px; } .lb-skel li span { 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; } }

/* help */
.help { display: flex; flex-direction: column; gap: 12px; }
.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.55; }
.help p b { color: var(--text); }
.help .win-actions, .dlg > .win-actions { margin-top: 16px; }

/* 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-note { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.row-note b { color: var(--muted); }
.settings-body .seg input:checked + span { color: var(--on-acc); background: var(--acc-grad); box-shadow: 0 6px 18px -8px var(--acc-glow); }
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(--acc-2), var(--acc)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--acc-2), var(--acc)); }
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(--acc); 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(--acc); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(226,169,90,.35); }
.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; }

/* ---------- footer, toast, confetti ---------- */
.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); }
.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; }

/* ---------- the daily: ten squares that fill green and red, building towards the tenth ---------- */
.squares { display: inline-flex; gap: 4px; align-items: center; flex: none; }
.squares i { width: 16px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .3s, box-shadow .3s, transform .35s var(--bounce); }
.squares i.on { background: var(--good); box-shadow: 0 0 10px -2px var(--good); }
.squares i.off { background: var(--bad); box-shadow: 0 0 10px -2px var(--bad); }
.squares i.gone { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,77,109,.5); }
.squares i.now { box-shadow: inset 0 0 0 2px var(--acc), 0 0 12px -2px var(--acc); animation: sq-now 1.2s ease-in-out infinite alternate; }
@keyframes sq-now { from { opacity: .55; } to { opacity: 1; } }
html.calm .squares i.now { animation: none; }
.squares i.pop { animation: sq-pop .45s var(--bounce); }
@keyframes sq-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: none; } }
html.calm .squares i.pop { animation: none; }
.squares.small { gap: 2px; } .squares.small i { width: 8px; height: 8px; border-radius: 2.5px; }
.squares.big { gap: 6px; margin: 14px 0 2px; } .squares.big i { width: clamp(20px, 6.4vw, 34px); height: clamp(20px, 6.4vw, 34px); border-radius: 9px; }
.hud-daily { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-pair { font: 700 14px var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the state of today's daily at the level in view, on the start screen */
.daily-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.18); }
.daily-box.open { border-color: color-mix(in srgb, var(--acc) 50%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), rgba(0,0,0,.18); }
.daily-box.done { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.daily-box-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.daily-box-text b { font: 700 15px var(--display); }
.daily-box-text span { color: var(--muted); font-size: 12.5px; }
/* a step that did not get through: nothing is sent again before the server has said where the run stands */
.lost { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 7; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 10px 8px 12px; border-radius: 12px; border: 1px solid rgba(255,77,109,.5); background: #2a1420; color: #ffd0d8; font-size: 13px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.9); }
.lost .ic { width: 18px; height: 18px; }
.btn.danger { border-color: rgba(255,77,109,.5); color: #ffc2cc; background: rgba(255,77,109,.1); }
.btn.danger:hover { background: rgba(255,77,109,.2); border-color: var(--bad); }
.confirm-text { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.confirm-text b { color: var(--text); }
#confirmSquares { margin: 0 0 16px; }
/* a board row of the daily: the ten squares and the time under the score */
.brow .val .squares { margin-top: 3px; justify-content: flex-end; }
.brow .val small.secs { text-transform: none; letter-spacing: 0; }

/* the two small cards of the end screen keep their ribbons */
.rib { position: absolute; top: -12px; left: 50%; translate: -50% 0; padding: 4px 12px; border-radius: 999px; font: 800 11px var(--font); letter-spacing: .12em; text-transform: uppercase; opacity: 0; white-space: nowrap; z-index: 2; }
.rib.first { background: var(--good); color: #052e16; box-shadow: 0 10px 24px -10px var(--good); }
.rib.later { background: var(--bad); color: #fff; box-shadow: 0 10px 24px -10px var(--bad); }
.mini-card.first .rib.first, .mini-card.wrong .rib.later { opacity: 1; }
.mini-card .tag.exp { white-space: normal; text-align: center; line-height: 1.3; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ---------- the reveal: the moment of the game ----------
   The verdict lands in the middle: the clock closes into a full ring of green or red and its number becomes a tick or a cross. */
.ring-mark { position: absolute; inset: 22%; width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; pointer-events: none; }
.ring-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.ring.good { --tcol: var(--good); } .ring.bad { --tcol: var(--bad); }
.ring.good .ring-fg, .ring.bad .ring-fg { stroke-dashoffset: 0 !important; transition: stroke-dashoffset .4s var(--ease), stroke .2s; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--tcol) 85%, transparent)); }
.ring.good .ring-bg, .ring.bad .ring-bg { fill: color-mix(in srgb, var(--tcol) 16%, rgba(9,8,14,.7)); transition: fill .3s; }
.ring.good b, .ring.bad b { opacity: 0; transform: scale(.3); transition: opacity .15s, transform .2s; animation: none; }
.ring.good .tick, .ring.bad .cross { opacity: 1; color: var(--tcol); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tcol) 70%, transparent)); }
.ring.good .tick path, .ring.bad .cross path { animation: mark-draw .34s .1s var(--ease) forwards; }
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
.ring.good, .ring.bad { animation: ring-land .5s var(--bounce); }
@keyframes ring-land { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* a wave leaves the clock when the verdict lands */
.ring.good::after, .ring.bad::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tcol); opacity: 0; animation: ring-wave .7s ease-out; pointer-events: none; }
@keyframes ring-wave { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
html.calm .ring.good, html.calm .ring.bad { animation: none; }
html.calm .ring.good::after, html.calm .ring.bad::after { display: none; }
html.calm .ring.good .tick path, html.calm .ring.bad .cross path { animation: none; stroke-dashoffset: 0; }
html.calm .ring.good .ring-fg, html.calm .ring.bad .ring-fg { transition: stroke .2s; }
/* the cards get stamped: FIRST on the one that came first, LATER on the other */
.stamp { --rot: -9deg; position: absolute; z-index: 3; top: clamp(16px, 3.4vh, 40px); right: clamp(14px, 2vw, 34px); padding: .3em .62em .26em; border: 3px solid currentColor; border-radius: 10px; font: 800 clamp(15px, 1.75vw, 27px)/1 var(--display); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; color: var(--stamp, #c9c4da); background: rgba(10,9,16,.62); box-shadow: 0 10px 26px -10px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.35); opacity: 0; transform: rotate(var(--rot)) scale(2.8); pointer-events: none; }
#cardB .stamp { --rot: 7deg; }
.card.first .stamp { --stamp: var(--good); box-shadow: 0 10px 26px -10px rgba(0,0,0,.9), 0 0 30px -6px color-mix(in srgb, var(--good) 70%, transparent), inset 0 0 0 1px rgba(0,0,0,.35); }
.card.wrong .stamp { --stamp: var(--bad); }
.card.revealed .stamp { animation: stamp-in .4s cubic-bezier(.2, 1.3, .35, 1) both; }
.card.first .stamp { animation-delay: .07s; } .card.later .stamp { animation-delay: .22s; }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(calc(var(--rot) * 2.4)) scale(2.9); } 55% { opacity: 1; transform: rotate(var(--rot)) scale(.9); } 100% { opacity: 1; transform: rotate(var(--rot)) scale(1); } }
html.calm .card.revealed .stamp { animation: none; opacity: 1; transform: rotate(var(--rot)); }
/* the frame answers too: it swells for a moment as its rim takes the expansion's colour */
.card.revealed .medal { animation: medal-bump .5s var(--bounce); }
@keyframes medal-bump { 0% { transform: scale(1); } 40% { transform: scale(1.13); } 100% { transform: scale(1); } }
html.calm .card.revealed .medal { animation: none; }
/* "+1" flies from the clock to the streak, or to the daily's square */
.fly { position: fixed; z-index: 40; left: 0; top: 0; pointer-events: none; font: 800 30px/1 var(--display); letter-spacing: -.02em; color: var(--good); text-shadow: 0 0 18px color-mix(in srgb, var(--good) 80%, transparent), 0 2px 0 rgba(0,0,0,.5); opacity: 0; will-change: transform, opacity; }
.squares i.land { animation: sq-land .5s var(--bounce); }
@keyframes sq-land { 0% { transform: scale(.3); } 55% { transform: scale(1.6); } 100% { transform: none; } }
html.calm .squares i.land { animation: none; }
/* within one expansion the patch is the answer: the band leads with its number */
.card.same .band-text { align-items: flex-start; text-align: left; }
.card.same .band-exp { letter-spacing: .03em; }
@media (max-width: 640px) {
  .stamp { top: auto; bottom: 50px; right: 10px; font-size: 14px; border-width: 2px; border-radius: 8px; }
  .card.same .band-text { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  .card.same .band-exp { max-width: 100%; }
}
@media (max-width: 640px) and (min-height: 760px) { .stamp { top: 12px; bottom: auto; left: 10px; right: auto; --rot: -8deg; } #cardB .stamp { --rot: -8deg; } }
html.calm .card-band::before { transform: none; opacity: 0; transition: opacity .25s; }
html.calm .card.revealed .card-band::before { opacity: 1; }
html.calm .band-text, html.calm .band-num { transform: none; transition: opacity .25s; }
/* a right answer: light runs over the card that came first, and sparks leave the clock. A wrong one: the arena flinches red. */
.card.first::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.05) 56%, transparent 66%); transform: translateX(-120%); animation: shine 0.9s .12s var(--ease) both; }
@keyframes shine { to { transform: translateX(120%); } }
html.calm .card.first::after { display: none; }
.arena.flinch { animation: flinch .5s ease-out; }
@keyframes flinch { 0% { box-shadow: inset 0 0 0 2px rgba(255,77,109,.9), inset 0 0 120px rgba(255,77,109,.45); } 100% { box-shadow: inset 0 0 0 0 rgba(255,77,109,0), inset 0 0 0 rgba(255,77,109,0); } }
html.calm .arena.flinch { animation: none; }
/* phone: the daily's HUD is its ten squares; the day's number steps aside */
@media (max-width: 640px) {
  .hud.daily { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hud.daily .hud-mode { display: none; }
  .hud.daily .hud-mid { justify-content: flex-end; }
  .hud-daily { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hud-daily .squares { gap: 3px; } .hud-daily .squares i { width: 13px; height: 13px; border-radius: 4px; }
  .hud-pair { font-size: 11.5px; line-height: 1; color: var(--muted); }
}
@media (max-width: 360px) { .hud-daily .squares i { width: 11px; height: 11px; border-radius: 3.5px; } }

/* ---------- Versus: live rooms. A round is played in the same arena as a solo game; around it sit the players. ---------- */
.lt-name .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.vs-who { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.2); font-size: 13.5px; color: var(--muted); }
.vs-who b { color: var(--text); }
.vs-who label { display: flex; flex-direction: column; gap: 6px; flex: 1; font-weight: 600; font-size: 12.5px; }
.vs-join label, .room-name label { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.vs-join-row, .room-name-row { display: flex; gap: 8px; }
.vs-who input { flex: none; }
.vs-who input, .vs-join input, .room-name input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--text); font: 600 15px var(--font); }
.vs-join input { font: 800 20px var(--display); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.vs-who input:focus-visible, .vs-join input:focus-visible, .room-name input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.vs-note { margin: 8px 0 0; min-height: 1.4em; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.vs-note.bad { color: #ff9eb0; }
.vs-or { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.vs-or::before, .vs-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.vs-create { width: 100%; }
.vs-initial { display: inline-grid; place-items: center; flex: none; border-radius: 50%; font: 800 13px/1 var(--display); color: #0b0a12; background: var(--si, var(--acc)); text-transform: uppercase; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
/* the room between matches */
.room-card { position: relative; width: min(100%, 860px); margin: 0 auto; padding: 22px; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%), var(--surface); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); display: flex; flex-direction: column; gap: 14px; }
.room-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.room-id .eyebrow { margin-bottom: 4px; }
.room-code { margin: 0; }
.room-code b { font: 800 clamp(34px, 9vw, 56px)/1 var(--display); letter-spacing: .16em; background: linear-gradient(180deg, var(--acc-3), var(--acc) 60%, var(--acc-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.room-share { display: flex; flex-wrap: wrap; gap: 8px; }
.room-sub { margin: 4px 0 -4px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vs-banner { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,77,109,.45); background: rgba(255,77,109,.08); color: #ffd0d8; font-size: 13px; }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.seat { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0,0,0,.24); }
.seat.free { border-style: dashed; color: var(--dim); font-size: 12.5px; justify-content: center; min-height: 54px; }
.seat.me { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.seat.away { opacity: .5; }
.seat .avatar, .seat .vs-initial { width: 34px; height: 34px; }
.seat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.seat-text b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-text small { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 4px; }
.seat-text small .ic { width: 12px; height: 12px; color: #ffd166; }
/* the host's settings: every option with its icon. Everyone sees them; only the host can change them. */
.vs-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.vs-set { min-width: 0; border: 0; margin: 0; padding: 0; }
.vs-set.wide { grid-column: 1 / -1; }
.vs-set legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.vs-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-opt { position: relative; flex: 1 1 0; min-width: 64px; }
.vs-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vs-opt input:disabled { cursor: default; }
.vs-opt span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 100%; min-height: 42px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.24); font: 700 13.5px var(--display); color: var(--muted); white-space: nowrap; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.vs-opt span .ic { width: 16px; height: 16px; color: var(--oc, var(--acc)); }
.vs-opt input:checked + span { color: var(--text); border-color: var(--oc, var(--acc)); background: linear-gradient(180deg, color-mix(in srgb, var(--oc, var(--acc)) 22%, transparent), transparent 90%), rgba(0,0,0,.24); box-shadow: 0 0 0 1px var(--oc, var(--acc)); }
.vs-opt input:not(:disabled):hover:not(:checked) + span { color: var(--text); border-color: rgba(255,255,255,.3); }
.vs-opt input:focus-visible + span { outline: 2px solid var(--acc-3); outline-offset: 2px; }
.vs-opt input:disabled:not(:checked) + span { opacity: .45; }
.vs-set.off { opacity: .45; }
.vs-set-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.room-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.room-wait { margin: 0; color: var(--muted); font-size: 13px; }
/* after a match: Rematch stands in the middle, right under the podium */
.room-go.after { flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
.room-go.after .btn { min-width: min(100%, 300px); }
.room-name { max-width: 380px; }
/* reactions: four quick ones, no chat */
.vs-react { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vs-react button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font: 700 12.5px var(--display); cursor: pointer; transition: color .15s, background .15s, border-color .15s, transform .15s var(--ease); }
.vs-react button:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
.vs-react button:active { transform: scale(.95); }
.vs-react .ic { width: 14px; height: 14px; color: var(--acc); }
.vs-bubble { position: absolute; left: 50%; bottom: calc(100% + 4px); z-index: 8; translate: -50% 0; padding: 4px 10px; border-radius: 999px; background: var(--acc-grad); color: var(--on-acc); font: 800 12px/1.3 var(--display); white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px -8px rgba(0,0,0,.9); animation: bubble 1.9s var(--ease) both; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1.08); } 20% { transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
html.calm .vs-bubble { animation: ms-calm 1.9s both; }
/* the final table */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; max-width: 620px; width: 100%; margin: 4px auto 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; animation: pod-in .6s var(--bounce) both; }
.pod.p1 { order: 2; animation-delay: .35s; } .pod.p2 { order: 1; animation-delay: .18s; } .pod.p3 { order: 3; }
@keyframes pod-in { from { opacity: 0; transform: translateY(26px) scale(.9); } }
html.calm .pod { animation: fade .3s both; }
.pod .avatar, .pod .vs-initial { width: 56px; height: 56px; font-size: 22px; }
.pod.p1 .avatar, .pod.p1 .vs-initial { width: 76px; height: 76px; font-size: 30px; box-shadow: 0 0 0 3px #ffd166, 0 0 40px -6px #ffd166; }
.pod b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px var(--display); }
.pod small { color: var(--muted); font-size: 12px; }
.pod-step { width: 100%; display: grid; place-items: center; border-radius: 14px 14px 0 0; font: 800 26px var(--display); color: #0b0a12; }
.pod.p1 .pod-step { height: 92px; background: linear-gradient(180deg, #ffe9a8, #ffd166 40%, #b8860b); font-size: 38px; }
.pod.p2 .pod-step { height: 66px; background: linear-gradient(180deg, #f1f1f6, #c0c0cc 50%, #7d7d8c); }
.pod.p3 .pod-step { height: 48px; background: linear-gradient(180deg, #f3c19a, #cd7f32 50%, #7a4a1c); }
.pod.me b::after { content: " (you)"; color: var(--acc-3); font-weight: 600; }
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rk { display: grid; grid-template-columns: 30px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.rk.me { border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%); }
.rk .rank { text-align: center; font: 700 13px var(--display); color: var(--muted); }
.rk .avatar, .rk .vs-initial { width: 30px; height: 30px; }
.rk .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rk .who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk .who small { color: var(--muted); font-size: 11.5px; }
.rk .val { font: 700 16px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hearts { letter-spacing: 1px; color: var(--bad); } .hearts i { font-style: normal; opacity: .25; }
/* in a match: the strip of players above the arena */
.hud-vs { display: flex; align-items: baseline; gap: 8px; min-width: 0; grid-row: 1; grid-column: 1; }
.hud-vs b { font: 700 22px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.hud-vs span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.vs-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 46px; }
.vp { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 220px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(20,18,28,.8); transition: border-color .25s, background .25s, opacity .3s, box-shadow .3s; }
.vp .avatar, .vp .vs-initial { width: 30px; height: 30px; }
.vp-place { flex: none; min-width: 16px; text-align: center; font: 800 12px var(--display); color: var(--muted); }
.vp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.vp-score { font: 700 14px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-state { flex: none; min-width: 18px; text-align: center; font: 800 12px var(--display); font-style: normal; color: var(--muted); white-space: nowrap; }
.vp.me { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.vp.picked:not(.right):not(.wrong) { border-color: color-mix(in srgb, var(--cool) 70%, transparent); background: color-mix(in srgb, var(--cool) 16%, rgba(20,18,28,.8)); }
.vp.picked:not(.right):not(.wrong) .vp-state { color: var(--cool); }
.vp.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, rgba(20,18,28,.8)); } .vp.right .vp-state { color: var(--good); }
.vp.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, rgba(20,18,28,.8)); } .vp.wrong .vp-state { color: var(--bad); }
.vp.away { opacity: .45; } .vp.out { opacity: .5; filter: saturate(.4); }
.vp.out .vp-name { text-decoration: line-through; }
.vs-count { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: inherit; background: radial-gradient(closest-side, rgba(10,9,16,.86), rgba(10,9,16,.55) 70%, rgba(10,9,16,.3)); pointer-events: none; text-align: center; }
.vs-count span { font: 700 clamp(13px, 1.4vw, 18px) var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-3); }
.vs-count b { font: 800 clamp(90px, 16vw, 200px)/.95 var(--display); letter-spacing: -.05em; background: linear-gradient(180deg, #fff, var(--acc-3) 40%, var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 40px var(--acc-glow)); }
.vs-count b.beat { animation: count-beat .9s var(--ease); }
@keyframes count-beat { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.92); opacity: .9; } }
html.calm .vs-count b.beat { animation: none; }
.vs-count small { color: var(--muted); font-size: 14px; }
.card.blank .card-name { opacity: .35; } .card.blank .card-cat { visibility: hidden; }
@media (max-width: 640px) {
  .room-card { padding: 16px; border-radius: 22px; }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-settings { grid-template-columns: minmax(0, 1fr); }
  .room-share .btn { padding: 9px 12px; font-size: 13px; }
  .hud-vs b { font-size: 17px; } .hud-vs span { font-size: 12px; }
  .vs-players { gap: 4px; min-height: 34px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .vp { padding: 3px 8px 3px 4px; gap: 5px; flex: none; } .vp .avatar, .vp .vs-initial { width: 24px; height: 24px; font-size: 11px; } .vp-name { font-size: 12px; max-width: 72px; } .vp-score { font-size: 12.5px; }
  .vs-react button { padding: 5px 9px; font-size: 11.5px; }
  body.playing .vs-react { gap: 4px; }
}
.vs-bar { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.vs-bar .vs-players { flex: 1; min-width: 0; justify-content: flex-start; min-height: 0; }
.vs-bar .vs-react { flex: none; flex-wrap: nowrap; }
body.versus .arena { --arena-h: clamp(280px, min(calc(100dvh - 358px), 64vw), 640px); }
@media (max-width: 640px) {
  .vs-bar { min-height: 34px; gap: 6px; }
  .vs-bar .vs-react button { padding: 7px; } .vs-bar .vs-react button span { display: none; }
}
/* during the 3-2-1 the clock and the question step aside */
.arena:has(.vs-count:not([hidden])) .middle { visibility: hidden; }
@media (max-width: 640px) {
  /* phone, in a room: the players on one line that scrolls sideways inside itself, the four reactions on a line of their own */
  .vs-bar { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; }
  .vs-bar .vs-players { flex: none; }
  .vs-bar .vs-react { justify-content: center; }
  .vs-bar .vs-react button { padding: 4px 9px; font-size: 11px; } .vs-bar .vs-react button span { display: inline; }
  .vs-bar .vs-react .ic { width: 12px; height: 12px; }
  body.versus .hud-mode { display: none; }
  .hud-vs { align-items: baseline; gap: 5px; }
}

/* ---------- the end screens: the number, "again" right under it and always on screen, then the story of the run ---------- */
.over .win-actions { position: sticky; top: 8px; z-index: 6; margin-top: 16px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.over-place { margin-top: 14px; }
.story { margin: 16px 0 0; text-align: center; }
.story-head { display: block; margin-bottom: 8px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.story-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.story-list li { position: relative; width: 34px; height: 34px; border-radius: 9px; background: #0b0a12; box-shadow: 0 0 0 2px var(--good); animation: story-in .35s var(--bounce) both; animation-delay: calc(var(--i, 0) * 28ms); }
.story-list li.miss { box-shadow: 0 0 0 2px var(--bad), 0 0 16px -2px var(--bad); }
.story-list li.more { width: auto; padding: 0 9px; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line-2); color: var(--muted); font: 700 12px var(--display); }
.story-list img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.story-list li::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052e16' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; box-shadow: 0 0 0 2px var(--surface); }
.story-list li.miss::after { background: var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 8px no-repeat; }
.story-list li.more::after { display: none; }
@keyframes story-in { from { opacity: 0; transform: scale(.4); } }
html.calm .story-list li { animation: none; }
/* ---------- a daily ends like a win, and hands over the next one ----------
   The ten squares fill one by one and the number counts up with them; a daily that went well is stamped across the corner of its
   number (a perfect ten in gold, with the confetti). While that runs, the buttons wait: the first tap only ends it. */
.over-card.filling .win-actions, .over-card.filling .dailies { opacity: .5; }
.win-actions, .dailies { transition: opacity .3s; }
.over-card > .over-stamp { --rot: -9deg; position: absolute; z-index: 3; top: clamp(64px, 12vw, 92px); left: calc(50% + clamp(46px, 11vw, 86px)); padding: .34em .7em .3em; border: 3px solid currentColor; border-radius: 12px; font: 800 clamp(15px, 3.6vw, 22px)/1 var(--display); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; white-space: nowrap; color: var(--acc-3); background: rgba(10,9,16,.72); box-shadow: 0 12px 30px -10px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.35); transform: rotate(var(--rot)); animation: stamp-in .5s cubic-bezier(.2, 1.3, .35, 1) both; pointer-events: none; overflow: hidden; }
.over-card > .over-stamp.perfect { color: #ffd166; box-shadow: 0 12px 30px -10px rgba(0,0,0,.9), 0 0 44px -6px rgba(255,209,102,.75), inset 0 0 0 1px rgba(0,0,0,.35); }
.over-card > .over-stamp.perfect::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.1) 56%, transparent 66%); transform: translateX(-130%); animation: shine 1.1s .45s var(--ease) both; }
.over-card > .over-stamp.great { font-size: clamp(13px, 3vw, 17px); border-width: 2px; }
.over-card > .over-stamp.still, html.calm .over-card > .over-stamp { animation: none; }
.over-card > .over-stamp.still::after, html.calm .over-card > .over-stamp::after { display: none; }
.over-card.is-daily:has(.over-stamp.perfect:not([hidden]))::before { background: radial-gradient(closest-side, rgba(255,209,102,.3), transparent 70%); }
/* today's dailies, one tap away: a chip per level */
.dailies { margin: 14px 0 0; }
.dailies-head { display: block; margin-bottom: 8px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dailies.all .dailies-head { color: var(--acc-3); }
.dailies-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dchip { --lc: var(--acc); display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 5px 7px 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lc) 40%, transparent); background: rgba(0,0,0,.24); color: var(--text); font: 600 13px var(--font); cursor: pointer; transition: border-color .2s, background .2s, transform .15s var(--ease), box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.dchip b { display: inline-flex; align-items: center; gap: 5px; font: 700 13px var(--display); color: var(--lc); white-space: nowrap; }
.dchip b .ic { width: 14px; height: 14px; }
.dchip-val { padding: 3px 9px; border-radius: 999px; font: 700 12px var(--display); font-variant-numeric: tabular-nums; color: var(--muted); background: rgba(255,255,255,.05); white-space: nowrap; }
.dchip.done .dchip-val { color: var(--text); }
.dchip.done .dchip-val::before { content: ""; display: inline-block; width: 6px; height: 10px; margin: 0 7px 1px 1px; border: solid var(--good); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.dchip-val.go { color: #0b0a12; background: var(--lc); box-shadow: 0 6px 16px -8px var(--lc); }
.dchip:hover { border-color: var(--lc); transform: translateY(-1px); }
.dchip.cur { background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 18%, transparent), transparent 90%), rgba(0,0,0,.24); box-shadow: 0 0 0 1px var(--lc); cursor: default; transform: none; }
.dchip.unknown { opacity: .6; cursor: default; }
/* the top of the day's board under a daily's result */
.over-board { width: min(100%, 540px); margin: 16px auto 0; text-align: left; }
.over-board h3 { margin: 0 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.over-board .link-btn { flex: none; letter-spacing: 0; text-transform: none; }
.lb-gap { list-style: none; text-align: center; color: var(--dim); font-size: 12px; line-height: 1; padding: 1px 0; }
/* a row here is two lines high: the ten squares stand beside the score, not under it */
.over-board .brow .val { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; }
.over-board .brow .val .squares { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.over-board .brow .val b { grid-column: 2; grid-row: 1; }
.over-board .brow .val small.secs { grid-column: 2; grid-row: 2; margin-top: 1px; }
.over-board .brow .val small.secs:empty { display: none; }
.over-card.is-daily { padding-top: 22px; }
.over-card.is-daily .squares.big { margin-top: 10px; }
.over-card.is-daily .over-why { margin-top: 10px; }
.over-board .brow.me { animation: mine-in .9s .3s var(--bounce) both; }
@keyframes mine-in { 0% { opacity: 0; transform: translateX(-26px) scale(.96); box-shadow: 0 0 0 0 var(--acc); } 55% { opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--acc), 0 0 40px -6px var(--acc); } 100% { opacity: 1; transform: none; } }
html.calm .over-board .brow.me { animation: none; }
/* the day changed under the end screen */
.new-day { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 80%); color: var(--muted); font-size: 13.5px; }
.new-day b { color: var(--text); }
/* a picture of the story opens its pair: both things, which came first, where each is from, what you picked */
.story-pic { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-pic:focus-visible { outline: 2px solid var(--acc-3); outline-offset: 3px; }
.story-list li { transition: transform .2s var(--ease), box-shadow .2s; }
.story-list li.sel { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 2px var(--good), 0 0 0 4px var(--acc-3), 0 10px 20px -8px rgba(0,0,0,.9); }
.story-list li.miss.sel { box-shadow: 0 0 0 2px var(--bad), 0 0 0 4px var(--acc-3), 0 10px 20px -8px rgba(0,0,0,.9); }
.story-list li.skip { box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.story-list li.skip img { filter: saturate(.3) brightness(.7); }
.story-list li.skip::after { display: none; }
@media (hover: none) and (pointer: coarse) { .story-list { gap: 8px; } .story-list li { width: 40px; height: 40px; border-radius: 10px; } }
.pair-detail { width: min(100%, 540px); margin: 14px auto 0; padding: 10px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(0,0,0,.26); text-align: left; animation: detail-in .28s var(--ease) both; }
@keyframes detail-in { from { opacity: 0; transform: translateY(-6px); } }
html.calm .pair-detail { animation: fade .2s both; }
.pd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pd-verdict { padding: 3px 10px; border-radius: 999px; font: 800 10.5px/1.3 var(--font); letter-spacing: .1em; }
.pd-verdict.good { background: var(--good); color: #052e16; } .pd-verdict.bad { background: var(--bad); color: #fff; } .pd-verdict.none { border: 1px solid var(--line-2); color: var(--muted); }
.pd-row { --xc: var(--acc); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 10px 8px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.pd-row + .pd-row { margin-top: 5px; }
.pd-row.first { border-color: color-mix(in srgb, var(--good) 60%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--good) 10%, transparent), transparent 70%); }
.pd-row.wrong { border-color: color-mix(in srgb, var(--bad) 70%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 10%, transparent), transparent 70%); }
.pd-icon { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: #0b0a12; box-shadow: 0 0 0 2px #07060b, 0 0 0 3.5px var(--xc); }
.pd-icon img { display: block; width: 100%; height: 100%; }
.pd-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pd-text b { font: 700 14.5px/1.2 var(--display); letter-spacing: -.01em; }
.pd-text small { color: var(--muted); font-size: 11.5px; }
.pd-row.picked .pd-text small { color: var(--acc-3); }
.pd-when { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; max-width: 46vw; text-align: right; }
.pd-order { font: 800 10px/1 var(--font); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-row.first .pd-order { color: var(--good); }
.pd-when small { color: var(--muted); font-size: 11px; line-height: 1.2; }
.pd-when small:empty { display: none; }
.pd-foot { margin: 8px 2px 0; color: var(--muted); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  /* a phone: the stamp keeps inside the card, beside the number; a pair's two things each get the whole width, with where they
     are from on a line under the name; the ten pictures stand as two rows of five */
  .over-card > .over-stamp { left: auto; right: 8px; top: 78px; font-size: 12.5px; letter-spacing: .1em; text-indent: .1em; border-width: 2px; border-radius: 9px; }
  .over-card > .over-stamp.great { font-size: 11.5px; }
  .pd-row { grid-template-columns: 42px minmax(0, 1fr); align-items: start; row-gap: 5px; }
  .pd-icon { grid-row: 1 / span 2; }
  .pd-when { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 8px; max-width: none; text-align: left; }
  .story-list.ten { max-width: 250px; margin-inline: auto; }
  .over-board .brow .val { column-gap: 8px; }
  .over-board .brow .val .squares { gap: 1.5px; } .over-board .brow .val .squares i { width: 6px; height: 8px; border-radius: 2px; }
}
.pd-text b { overflow-wrap: break-word; }
/* the boards' tabs say what they are: the daily of today and of yesterday, the Endless streaks of the week and of all time */
.seg.two-line span { padding: 5px 8px 6px; line-height: 1.15; }
.seg.two-line small { display: block; font: 700 9px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.board-controls .seg { flex: 1 1 auto; }
@media (max-width: 640px) {
  body:has(#over:not([hidden])) .title-row { display: none; }
  .over .win-actions { top: 4px; }
  .over .win-actions .btn.big { flex: 1 1 100%; }
}
.over-place { display: inline-block; text-align: center; line-height: 1.5; } .over-place .ic { vertical-align: -2px; margin-right: 6px; }
/* a short phone: the demo keeps to its pictures, so Play stays above the fold */
@media (max-width: 640px) and (max-height: 620px) { .demo-cap { display: none; } .demo-card { padding: 12px 6px 38px; } .logo { font-size: 26px; } }

/* inside Discord: the room of this channel, the first thing on the start screen (someone may be waiting in it) */
.here { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--cool) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--cool) 20%, transparent), transparent 75%), rgba(20,18,28,.7); }
.here-note { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.here.quiet { padding: 10px 14px; border-style: dashed; background: rgba(20,18,28,.5); }
.room-here { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; max-width: 46ch; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.room-here .ic { width: 16px; height: 16px; color: var(--cool); }
@media (max-width: 640px) { .here { gap: 8px; padding: 10px; } .here .btn { width: 100%; padding: 12px 16px; } .here-note { flex-basis: 100%; font-size: 12.5px; text-align: center; } }