:root {
  --bg:#f6f9fc; --card:#fff; --field:#f6f9fc; --fg:#0a2540; --mute:#5c6f87; --line:#e3e8ee;
  --acc:#635bff; --hi:#635bff; --tint:rgba(99,91,255,.1); --ok:#0e9f6e; --bad:#df1b41;
  --hit:#2bb673; --near:#e2a611; --miss:#8792a2;
  --shadow:0 13px 27px -5px rgba(50,50,93,.2), 0 8px 16px -8px rgba(0,0,0,.25);
  --shadow-s:0 2px 5px -1px rgba(50,50,93,.2), 0 1px 3px -1px rgba(0,0,0,.25);
  --glass:rgba(255,255,255,.84);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0a2540; --card:#12335c; --field:#0c2a4c; --fg:#fff; --mute:#a9bbd1; --line:#27497a;
    --acc:#7a73ff; --hi:#80e9ff; --tint:rgba(122,115,255,.24); --ok:#3ecf8e; --bad:#ff7a90;
    --hit:#2fa86a; --near:#c9971a; --miss:#3b557a;
    --shadow:0 13px 27px -5px rgba(0,0,0,.45), 0 8px 16px -8px rgba(0,0,0,.5);
    --shadow-s:0 2px 5px -1px rgba(0,0,0,.4), 0 1px 3px -1px rgba(0,0,0,.4);
    --glass:rgba(18,51,92,.82);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; touch-action: manipulation; }
main { position:relative; max-width:560px; margin:0 auto; padding:12px 16px calc(28px + env(safe-area-inset-bottom)); }
h1 { font-size:44px; line-height:1.05; margin:0 0 10px; letter-spacing:-1.6px; }
h2 { font-size:17px; margin:0 0 10px; letter-spacing:-.2px; }
p { margin:0 0 10px; }
.mute { color:var(--mute); }
.small { font-size:13px; }
.center { text-align:center; }
.card { background:var(--card); border-radius:20px; padding:20px; margin-bottom:14px; box-shadow:var(--shadow); }
.hero { text-align:center; padding:28px 20px; }
.rules { text-align:left; color:var(--mute); padding-left:20px; margin:16px 0; }
.rules li { margin-bottom:4px; }
input { width:100%; font-size:17px; padding:14px; border-radius:12px; border:1px solid var(--line); background:var(--field); color:var(--fg); margin-bottom:10px; text-align:center; outline:0; transition:border-color .15s, box-shadow .15s; }
input:focus { border-color:var(--acc); box-shadow:0 0 0 4px var(--tint); }
button { font:inherit; color:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card); border-radius:99px; padding:13px 18px; -webkit-tap-highlight-color:transparent; transition:transform .12s, background-color .15s, border-color .15s, box-shadow .15s; }
button:active:not(:disabled) { transform:scale(.97); }
button:disabled { opacity:.4; }
.primary { background:var(--acc); border-color:transparent; color:#fff; font-weight:600; box-shadow:var(--shadow-s); }
.wide { width:100%; font-size:18px; padding:15px 18px; }
.link { display:block; margin:14px auto 0; padding:8px 16px; border:0; background:var(--card); box-shadow:var(--shadow-s); color:var(--mute); font-size:13px; }
.card .link { background:var(--field); box-shadow:none; }
.err { color:var(--bad); min-height:1.4em; margin:8px 0 0; font-size:14px; }
.or { color:var(--mute); font-size:13px; margin:16px 0 10px; }
.joinrow { display:flex; gap:8px; }
.joinrow input { margin:0; text-transform:uppercase; letter-spacing:6px; font-weight:700; }
.joinrow button { flex:none; }

/* the gradient behind everything (drawn by fx.js), and what sits straight on it */
#fx { position:fixed; inset:0; width:100%; height:100%; z-index:-1; clip-path:polygon(0 0, 100% 0, 100% 0, 0 0); }
#fx.flat { background:linear-gradient(120deg, #635bff, #a960ee 45%, #ff5996); }
#fx.flat.hot { background:linear-gradient(120deg, #ff333d, #ff7a1a 50%, #ff2d92); }
#confetti { position:fixed; inset:0; width:100%; height:100%; z-index:9; pointer-events:none; display:none; }
#confetti.on { display:block; }
#vignette { position:fixed; inset:0; z-index:8; pointer-events:none; opacity:0; box-shadow:inset 0 0 70px 14px rgba(255,45,70,.6); }
.banner { color:#fff; text-align:center; padding:30px 6px 24px; text-shadow:0 1px 14px rgba(10,37,64,.28); }
.banner p { margin:0 auto 10px; max-width:340px; font-size:17px; opacity:.94; }
.banner .eyebrow { font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; opacity:.85; margin-bottom:4px; }
.banner.full { display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - 120px); min-height:calc(100dvh - 120px); }
.banner .rules { align-self:center; max-width:360px; color:#fff; margin:18px auto 0; padding:14px 18px 12px 34px; border-radius:16px; background:rgba(10,37,64,.22); text-shadow:none; }
.ghost { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); color:#fff; font-weight:600; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.banner .link { background:rgba(255,255,255,.2); color:#fff; box-shadow:none; }

/* lobby */
.code { font-size:68px; font-weight:800; letter-spacing:10px; margin:0 0 2px 10px; line-height:1.1; }
.players { list-style:none; margin:0; padding:0; }
.players li { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); }
.players li:last-child { border-bottom:0; }
.players .who { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { font-size:11px; color:var(--mute); border:1px solid var(--line); border-radius:99px; padding:1px 8px; }
.badge.you { color:var(--hi); border-color:var(--hi); }
.chips { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; margin-bottom:12px; }
.chip { padding:11px 0; background:var(--field); border-width:2px; }
.chip.sel { border-color:var(--acc); background:var(--tint); font-weight:600; }
.games { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.game { text-align:left; padding:10px 12px 12px; background:var(--field); border-width:2px; border-radius:16px; }
.game b { display:block; margin-bottom:2px; }
.game span { display:block; font-size:12px; line-height:1.3; color:var(--mute); }
.game.sel { border-color:var(--acc); background:var(--tint); box-shadow:0 0 0 4px var(--tint); }
.count { font-size:150px; font-weight:800; line-height:1; margin:6px 0 10px; font-variant-numeric:tabular-nums; letter-spacing:-4px; }
.count.pop { animation:pop .6s cubic-bezier(.2,.9,.3,1.3); }

/* a small moving picture of each game, on its card in the lobby */
.pv { display:flex; align-items:center; justify-content:center; gap:3px; height:46px; margin-bottom:8px; border-radius:10px; background:var(--card); }
.pv i, .pv b { display:grid; place-items:center; min-width:20px; height:24px; padding:0 4px; border-radius:5px; font:700 11px/1 inherit; font-style:normal; color:#fff; background:var(--miss); }
.pv em { font-style:normal; font-weight:700; font-size:12px; color:var(--mute); margin:0 1px; }
.pv-word i { animation:4s infinite both; }
.pv-word .g { animation-name:pv-hit; }
.pv-word .y { animation-name:pv-near; }
.pv-word .x { animation-name:pv-miss; }
.pv-word i:nth-child(2) { animation-delay:.15s; } .pv-word i:nth-child(3) { animation-delay:.3s; }
.pv-word i:nth-child(4) { animation-delay:.45s; } .pv-word i:nth-child(5) { animation-delay:.6s; }
.pv-letters i { background:var(--acc); animation:pv-hop 1.8s infinite; }
.pv-letters i:nth-child(2) { animation-delay:.12s; } .pv-letters i:nth-child(3) { animation-delay:.24s; }
.pv-letters i:nth-child(4) { animation-delay:.36s; } .pv-letters i:nth-child(5) { animation-delay:.48s; }
.pv-numbers b { background:var(--acc); animation:pv-pop 2.6s infinite; }
.pv-iq i:last-child { background:var(--acc); animation:pv-pop 2s infinite; }
@keyframes pv-hit { 0%, 18% { background:var(--line); color:var(--fg); transform:rotateX(0); } 24% { transform:rotateX(90deg); } 30%, 90% { background:var(--hit); color:#fff; transform:rotateX(0); } 100% { background:var(--line); color:var(--fg); } }
@keyframes pv-near { 0%, 18% { background:var(--line); color:var(--fg); transform:rotateX(0); } 24% { transform:rotateX(90deg); } 30%, 90% { background:var(--near); color:#fff; transform:rotateX(0); } 100% { background:var(--line); color:var(--fg); } }
@keyframes pv-miss { 0%, 18% { background:var(--line); color:var(--fg); transform:rotateX(0); } 24% { transform:rotateX(90deg); } 30%, 90% { background:var(--miss); color:#fff; transform:rotateX(0); } 100% { background:var(--line); color:var(--fg); } }
@keyframes pv-hop { 0%, 40%, 100% { transform:translateY(0); } 20% { transform:translateY(-7px); } }
@keyframes pv-pop { 0%, 55%, 100% { transform:scale(1); } 70% { transform:scale(1.14); } }

/* test */
.bar { position:sticky; top:8px; z-index:2; margin-bottom:12px; padding:10px 14px; border-radius:18px; background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); box-shadow:var(--shadow-s); }
.bar .row { display:flex; align-items:center; gap:10px; font-size:17px; }
.bar .prog { margin-top:8px; }
.tag { font-size:12px; color:var(--mute); border:1px solid var(--line); border-radius:99px; padding:2px 9px; }
.timer { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.timer.low, .hot .timer { color:var(--bad); }
.prog { height:4px; background:var(--line); border-radius:4px; overflow:hidden; }
.prog i { display:block; height:100%; background:var(--acc); border-radius:4px; }
.qtext { font-size:17px; }
.big { font-size:24px; font-weight:700; text-align:center; letter-spacing:.5px; margin:14px 0 16px; font-variant-numeric:tabular-nums; }
.matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-width:264px; margin:12px auto 18px; }
.cell { aspect-ratio:1; border:1px solid var(--line); border-radius:10px; background:var(--field); }
.cell.qm { display:grid; place-items:center; font-size:34px; font-weight:700; color:var(--hi); border-style:dashed; border-color:var(--acc); }
svg { display:block; width:100%; height:100%; }
.opts { display:grid; gap:8px; }
.opt { display:flex; align-items:center; gap:12px; text-align:left; min-height:52px; background:var(--field); border-width:2px; border-radius:14px; }
.ltr { flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:13px; color:var(--mute); }
.opt.sel { border-color:var(--acc); background:var(--tint); }
.opt.sel .ltr { background:var(--acc); border-color:var(--acc); color:#fff; }
.opts.vis { grid-template-columns:repeat(3,1fr); max-width:340px; margin:0 auto; }
.opts.vis .opt { flex-direction:column-reverse; gap:0; padding:2px 4px 6px; min-height:0; }
.opts.vis .opt svg { height:auto; aspect-ratio:1; }
.opts.vis .ltr { width:20px; height:20px; font-size:11px; }
.nav { display:flex; gap:10px; }
.nav button { flex:1; box-shadow:var(--shadow-s); }
.card .nav button { box-shadow:none; }
.dots { display:grid; grid-template-columns:repeat(auto-fill,minmax(36px,1fr)); gap:6px; margin-top:16px; }
.dot { padding:7px 0; font-size:13px; border-radius:10px; color:var(--mute); }
.dot.done { background:var(--acc); color:#fff; border-color:transparent; }
.dot.cur { border-color:var(--acc); color:var(--fg); box-shadow:0 0 0 3px var(--tint); }
.dot.done.cur { color:#fff; }

/* the last stretch of a round: the gradient takes over the screen, then the clock starts to shake */
.panic #vignette { animation:throb .59s infinite; }
.panic .timer { animation:shake .3s infinite; }
@keyframes throb { 0%, 100% { opacity:0; } 30% { opacity:1; } }
@keyframes shake { 0%, 100% { transform:translateX(0) scale(1.15); } 25% { transform:translateX(-2px) scale(1.15); } 75% { transform:translateX(2px) scale(1.15); } }

/* results */
.iq { font-size:92px; font-weight:800; line-height:1; letter-spacing:-4px; color:var(--hi); margin:8px 0 2px; }
.stats { display:flex; justify-content:center; gap:22px; margin:16px 0 4px; }
.stats b { display:block; font-size:20px; }
.stats span { font-size:12px; color:var(--mute); }
.champ { text-align:center; font-size:18px; font-weight:700; margin-bottom:14px; }
.catrow { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:14px; }
.catrow label { width:88px; }
.catrow .prog { flex:1; height:8px; }
.catrow em { font-style:normal; color:var(--mute); width:36px; text-align:right; }
table { width:100%; border-collapse:collapse; font-size:15px; }
td, th { padding:9px 4px; text-align:left; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:0; }
th { font-size:11px; color:var(--mute); font-weight:600; letter-spacing:.6px; text-transform:uppercase; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
tr.me td { color:var(--hi); font-weight:700; }
td.name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
details summary { cursor:pointer; font-weight:600; }
.past + .past { margin-top:12px; }
.past table { margin-top:6px; }
.rev { border-top:1px solid var(--line); padding:12px 0; font-size:14px; }
.rev .big { font-size:17px; text-align:left; margin:4px 0; }
.rev .ok { color:var(--ok); } .rev .no { color:var(--bad); }
.mini { display:inline-block; width:44px; height:44px; vertical-align:middle; border:1px solid var(--line); border-radius:8px; margin:2px 4px; }
.fine { font-size:12px; color:var(--mute); text-align:center; }
.hist { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0; background:none; }
.hist:last-child { border-bottom:0; }
.hist b { font-size:20px; color:var(--hi); width:52px; }
.hist span { flex:1; font-size:14px; }
.rev .matrix { max-width:200px; margin:10px 0; }
.rev .strip { margin:10px 0; }
.rev .strip.solo .cell { width:140px; }

/* series and reference figures */
/* long series wrap onto a second line rather than shrinking the tiles below a readable size */
.strip { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:12px auto 18px; }
.strip { --n:6; }
.strip[data-n="2"] { --n:2; } .strip[data-n="3"] { --n:3; } .strip[data-n="4"] { --n:4; } .strip[data-n="5"] { --n:5; }
.strip .cell { width:clamp(58px, calc((100% - (var(--n) - 1) * 6px) / var(--n)), 84px); }
.strip.solo .cell { width:210px; max-width:100%; }
.shrink { width:100%; animation:shrink linear forwards; }
@keyframes shrink { to { width:0; } }

/* scratch pad */
.padbtn { padding:3px 10px; font-size:13px; }
#pad { display:none; position:fixed; left:0; right:0; bottom:0; height:44vh; z-index:5; flex-direction:column; background:var(--card); border-radius:20px 20px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.25); }
body.padopen #pad { display:flex; }
body.padopen main { padding-bottom:calc(44vh + 20px); }
.padbar { display:flex; align-items:center; justify-content:space-between; padding:8px 10px 8px 18px; border-bottom:1px solid var(--line); font-size:14px; }
.padbar button { padding:6px 12px; font-size:14px; margin-left:6px; }
#padcv { flex:1; width:100%; min-height:0; touch-action:none; cursor:crosshair; }

/* word, letter and number games */
.tile { display:grid; place-items:center; padding:0; font-size:24px; font-weight:700; text-transform:uppercase; border:2px solid var(--line); border-radius:10px; background:var(--field); }
.tile.sel { border-color:var(--acc); background:var(--tint); box-shadow:0 0 0 3px var(--tint); }
.tile.made { border-style:dashed; }
button.tile:disabled { opacity:.2; }
.tile.g, .key.g { background:var(--hit); border-color:var(--hit); color:#fff; }
.tile.y, .key.y { background:var(--near); border-color:var(--near); color:#fff; }
.tile.x, .key.x { background:var(--miss); border-color:var(--miss); color:#fff; }
.tile.typed { border-color:var(--mute); }
.wgrid { display:grid; gap:5px; justify-content:center; }
.wrow { display:grid; grid-template-columns:repeat(5,48px); gap:5px; }
.wrow .tile { height:48px; }
/* the row just guessed turns over one tile at a time */
.wrow.flip .tile { animation:flip .5s both; }
.wrow.flip .tile:nth-child(2) { animation-delay:.12s; } .wrow.flip .tile:nth-child(3) { animation-delay:.24s; }
.wrow.flip .tile:nth-child(4) { animation-delay:.36s; } .wrow.flip .tile:nth-child(5) { animation-delay:.48s; }
.wrow.no { animation:shake-row .35s; }
@keyframes flip { 0% { transform:rotateX(90deg); } 100% { transform:rotateX(0); } }
@keyframes shake-row { 0%, 100% { transform:translateX(0); } 20%, 60% { transform:translateX(-6px); } 40%, 80% { transform:translateX(6px); } }
@keyframes pop { 0% { transform:scale(.8); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }
.card .err { text-align:center; }
.keys { display:grid; gap:6px; margin-top:12px; }
.krow { display:flex; justify-content:center; gap:5px; }
.key { flex:1; max-width:44px; min-width:0; height:52px; padding:0; font-weight:600; text-transform:uppercase; border-radius:9px; border-color:transparent; background:var(--card); box-shadow:var(--shadow-s); }
.key.wide { flex:1.6; max-width:70px; font-size:13px; text-transform:none; }
.rivals { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 12px; }
.rival { font-size:13px; color:var(--mute); background:var(--card); box-shadow:var(--shadow-s); border-radius:99px; padding:4px 12px; }
.rival.done { color:var(--ok); font-weight:600; }
.answer { text-transform:uppercase; letter-spacing:1px; color:var(--fg); }
.answer.big { font-size:38px; font-weight:800; letter-spacing:4px; color:var(--hi); }
.hero .wgrid { margin:12px 0; }
.grids { display:flex; flex-wrap:wrap; gap:14px 18px; }
.grids b { display:block; margin-bottom:6px; font-size:14px; }
.grids .wgrid { gap:3px; justify-content:start; }
.grids .wrow { grid-template-columns:repeat(5,24px); gap:3px; }
.grids .tile { height:24px; font-size:13px; border-width:1px; border-radius:5px; }
.letters { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:4px; }
.letters .tile { aspect-ratio:1; min-width:0; border-radius:8px; font-size:clamp(16px, 5vw, 26px); }
.entry { min-height:52px; display:grid; place-items:center; margin:12px 0; font-size:28px; font-weight:800; letter-spacing:5px; text-transform:uppercase; border-bottom:2px solid var(--line); }
.entry .mute { font-size:15px; font-weight:400; letter-spacing:0; text-transform:none; }
.found { display:flex; flex-wrap:wrap; gap:6px; }
.found span { text-transform:uppercase; font-weight:600; font-size:14px; border:1px solid var(--line); border-radius:99px; padding:4px 11px; }
.found span.best { border-color:var(--acc); background:var(--tint); }
.found small { color:var(--mute); font-weight:400; }
.target { font-size:60px; font-weight:800; line-height:1.1; letter-spacing:-2px; text-align:center; color:var(--hi); margin-bottom:14px; font-variant-numeric:tabular-nums; }
.numbers, .ops { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:10px; }
.numbers { min-height:52px; }
.numbers .tile { min-width:54px; height:52px; padding:0 8px; font-size:21px; }
.ops .tile { width:54px; height:44px; border-radius:99px; }
.steps { margin:8px 0 12px; text-align:center; font-variant-numeric:tabular-nums; }
.rev .steps { text-align:left; margin:4px 0 0; }

/* a new screen rises into place */
.enter > * { animation:rise .45s cubic-bezier(.2,.8,.2,1) both; }
.enter > :nth-child(2) { animation-delay:.05s; } .enter > :nth-child(3) { animation-delay:.1s; }
.enter > :nth-child(4) { animation-delay:.15s; } .enter > :nth-child(n+5) { animation-delay:.2s; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .shrink { animation:shrink linear forwards !important; } /* the memory countdown bar is information, not decoration */
}