:root{
  --bg:#F3F4F8; --surface:#FFFFFF; --ink:#12152A; --muted:#5E6480; --line:#DCDFE8;
  --zero:#FF5A36; --zero-ink:#B8321A; --zero-soft:#FFE7DF; --zero-deep:#FFD2C4;
  --one:#2F5BFF;  --one-ink:#1D3BC4;  --one-soft:#E3E9FF;  --one-deep:#C9D5FF;
  --match:#0FA36B; --match-soft:#D8F4E8; --miss:#AEB3C4;
  --shadow:0 1px 0 rgba(18,21,42,.04),0 12px 32px -18px rgba(18,21,42,.25);
  --f-game:"Unbounded",ui-rounded,system-ui,sans-serif;
  --f-body:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0D1020; --surface:#161A30; --ink:#ECEEF8; --muted:#959BB8; --line:#272C48;
  --zero:#FF7A5C; --zero-ink:#FFB19E; --zero-soft:#2E1A1B; --zero-deep:#4A2320;
  --one:#6F8CFF;  --one-ink:#AFC0FF;  --one-soft:#18204A; --one-deep:#223070;
  --match:#34D399; --match-soft:#123528; --miss:#4A5070;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 16px 40px -20px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D1020; --surface:#161A30; --ink:#ECEEF8; --muted:#959BB8; --line:#272C48;
  --zero:#FF7A5C; --zero-ink:#FFB19E; --zero-soft:#2E1A1B; --zero-deep:#4A2320;
  --one:#6F8CFF;  --one-ink:#AFC0FF;  --one-soft:#18204A; --one-deep:#223070;
  --match:#34D399; --match-soft:#123528; --miss:#4A5070;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 16px 40px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:17px/1.5 var(--f-body);padding-inline:16px;padding-block:20px 72px}
.wrap{max-width:1000px;margin:0 auto;display:grid;gap:22px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,summary:focus-visible{outline:3px solid var(--one);outline-offset:3px}
.eyebrow{font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- top bar with bit register ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.logo{font:800 22px/1 var(--f-game);letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:8px}
.logo .j{color:var(--zero)} .logo .y{color:var(--one)}
.logo .vs{font:500 11px var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 7px}
.reg{display:flex;gap:10px;flex-wrap:wrap}
.byte{display:flex;gap:3px}
.cell{width:18px;height:24px;border-radius:5px;display:grid;place-items:center;font:700 12px var(--f-mono);background:var(--surface);border:1px solid var(--line);color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.cell.now{border-color:var(--ink);color:var(--ink)}
.cell.hit{background:var(--match);border-color:transparent;color:#fff}
.cell.flip{background:transparent;border:1px dashed var(--miss);color:var(--miss)}

/* ---------- stage ---------- */
.stage{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(18px,3.5vw,34px);display:grid;gap:22px;min-height:460px;align-content:start}

/* intro */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.hero h2{font:800 clamp(34px,6vw,58px)/1 var(--f-game);letter-spacing:-.035em;margin:10px 0 14px;text-wrap:balance}
.hero h2 em{font-style:normal;background:linear-gradient(90deg,var(--zero),var(--one));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0 0 22px;color:var(--muted);max-width:44ch}
.preview{display:grid;gap:10px;transform:rotate(-2deg)}
.pcard{border-radius:16px;padding:16px 18px;font:600 17px/1.25 var(--f-body);display:flex;gap:12px;align-items:center}
.pcard b{font:700 24px var(--f-mono)}
.pcard.z{background:var(--zero-soft);color:var(--zero-ink)} .pcard.z b{color:var(--zero)}
.pcard.o{background:var(--one-soft);color:var(--one-ink);margin-left:28px} .pcard.o b{color:var(--one)}
.or{font:800 13px var(--f-game);color:var(--muted);text-align:center;letter-spacing:.1em}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.primary{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:15px 28px;font:800 15px var(--f-game);letter-spacing:-.01em;transition:transform .12s}
.primary:hover{transform:translateY(-1px)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:999px;padding:14px 22px;font-weight:600}
.ghost:hover{border-color:var(--muted)}
.hint{font:500 13px var(--f-mono);color:var(--muted)}
kbd{font:700 12px var(--f-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--bg)}

/* question */
.qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chip{font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.wyr{font:800 clamp(22px,3.4vw,30px)/1.1 var(--f-game);letter-spacing:-.03em;margin:0}
.duel{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.duel{grid-template-columns:1fr}}
.opt{position:relative;text-align:left;border:0;border-radius:18px;padding:22px 22px 26px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;transition:transform .15s,box-shadow .15s,opacity .2s;overflow:hidden}
.opt[data-b="0"]{background:var(--zero-soft);color:var(--zero-ink)}
.opt[data-b="1"]{background:var(--one-soft);color:var(--one-ink)}
.opt .digit{font:700 15px var(--f-mono);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff}
.opt[data-b="0"] .digit{background:var(--zero)} .opt[data-b="1"] .digit{background:var(--one)}
.opt .txt{font:700 clamp(21px,2.8vw,27px)/1.18 var(--f-body);letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
.opt:hover:not([disabled]){transform:translateY(-3px)}
.opt[data-b="0"]:hover:not([disabled]){box-shadow:0 0 0 2px var(--zero)}
.opt[data-b="1"]:hover:not([disabled]){box-shadow:0 0 0 2px var(--one)}
.opt[disabled]{cursor:default}
.opt.chosen[data-b="0"]{background:var(--zero-deep);box-shadow:0 0 0 3px var(--zero)}
.opt.chosen[data-b="1"]{background:var(--one-deep);box-shadow:0 0 0 3px var(--one)}
.opt.faded{opacity:.42}
.vs-disc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font:800 13px var(--f-game);color:var(--muted);pointer-events:none;z-index:1}
@media (max-width:620px){.vs-disc{width:44px;height:44px}}
.stamps{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.stamp{font:800 12px/1 var(--f-game);letter-spacing:.06em;padding:7px 10px;border-radius:8px;border:2px solid currentColor;background:var(--surface);animation:stamp .28s cubic-bezier(.2,1.6,.4,1) backwards}
.stamp.you{color:var(--one);transform:rotate(4deg)}
.stamp.jev{color:var(--zero);transform:rotate(-5deg);animation-delay:.18s}
@keyframes stamp{from{opacity:0;scale:1.8}to{opacity:1;scale:1}}
.verdict{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-radius:16px;padding:16px 18px;background:var(--bg)}
.verdict.same{background:var(--match-soft)}
.verdict h3{margin:0;font:800 19px var(--f-game);letter-spacing:-.02em}
.verdict.same h3{color:var(--match)}
.verdict p{margin:2px 0 0;font-size:15px;color:var(--muted)}
.verdict .timer{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--ink);opacity:.22;animation:fillbar var(--dwell) linear forwards}
.verdict.same .timer{background:var(--match);opacity:.6}
@keyframes fillbar{to{width:100%}}
.skip{background:transparent;border:0;padding:8px 4px;font:600 14px var(--f-body);color:var(--muted);display:flex;align-items:center;gap:8px}
.skip:hover{color:var(--ink)}
.stage.tapnext{cursor:pointer}
.keys{display:flex;gap:14px;flex-wrap:wrap}
.chip.hot{background:var(--zero);color:#fff;border-color:transparent}
.jevsays{flex:1 1 100%;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start}
.jevsays .av{width:38px;height:38px;border-radius:50%;background:var(--zero);color:#fff;display:grid;place-items:center;font:800 15px var(--f-game)}
.jevsays .said{background:var(--surface);border-radius:4px 16px 16px 16px;padding:11px 15px;font:500 17px/1.4 var(--f-body);color:var(--ink);animation:pop .35s .15s backwards}
.jevsays .said small{display:block;font:700 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--zero);margin-bottom:6px}

/* live meter */
.meter{display:flex;align-items:center;gap:10px;font:700 12px var(--f-mono);color:var(--muted)}
.meter .m-pct{font:800 16px var(--f-game);color:var(--ink);letter-spacing:-.03em;min-width:3.2ch;text-align:right;font-variant-numeric:tabular-nums}
.meter .m-bar{width:72px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter .m-bar i{display:block;height:100%;background:var(--match);transition:width .4s}
.streak{background:var(--zero);color:#fff;padding:5px 9px;border-radius:999px;font:800 11px/1 var(--f-game);letter-spacing:.02em;animation:stamp .3s cubic-bezier(.2,1.6,.4,1) backwards}

/* guess */
.guess{display:grid;gap:18px;max-width:600px}
.guess h2{font:800 clamp(26px,4.4vw,40px)/1.05 var(--f-game);letter-spacing:-.035em;margin:0;text-wrap:balance}
.guess p{margin:0;color:var(--muted)}
.gread{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.gval{font:800 clamp(64px,12vw,104px)/.85 var(--f-game);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.gtier{font:800 19px/1.2 var(--f-game);letter-spacing:-.02em;padding-bottom:6px}
.guess input[type=range]{width:100%;accent-color:var(--one);height:28px}
.gaxis{display:flex;justify-content:space-between;font:500 11px var(--f-mono);color:var(--muted);margin-top:-8px}

/* result */
.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;align-items:center}
.pct{font:800 clamp(80px,15vw,140px)/.82 var(--f-game);letter-spacing:-.06em;margin:10px 0 12px}
.tier{font:800 26px/1.1 var(--f-game);letter-spacing:-.03em;margin:0}
.blurb{color:var(--muted);margin:8px 0 0;max-width:36ch}
.cmp{display:grid;gap:8px;background:var(--bg);border-radius:16px;padding:16px;min-width:0}
.cmp .row{display:flex;align-items:center;gap:10px}
.cmp .lbl{width:40px;flex:none;font:700 11px var(--f-mono);letter-spacing:.1em;color:var(--muted)}
.cmp .bits{display:flex;gap:6px 10px;flex-wrap:wrap;min-width:0}
.b{width:clamp(14px,3.4vw,18px);height:24px;border-radius:5px;display:grid;place-items:center;font:700 12px var(--f-mono)}
.b.z{background:var(--zero-soft);color:var(--zero)} .b.o{background:var(--one-soft);color:var(--one)}
.b.m{background:var(--match);color:#fff} .b.x{border:1px dashed var(--miss);color:var(--miss)}
.reveal .b{animation:pop .3s backwards}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.note{font-size:14px;color:var(--muted);margin:0}
.called{margin:14px 0 0;font:600 15px/1.4 var(--f-body);padding:10px 14px;border-radius:12px;background:var(--bg);display:inline-block}
.share{display:grid;gap:12px;background:var(--bg);border-radius:16px;padding:18px}
.share .shead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.share pre{margin:0;font:500 15px/1.55 var(--f-mono);white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.copy{background:var(--one);color:#fff;border:0;border-radius:999px;padding:10px 18px;font:800 13px var(--f-game)}
.copy.done{background:var(--match)}
.recap{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.recap li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.35}
.recap .dot{width:12px;height:12px;border-radius:4px;margin-top:4px;background:var(--match)}
.recap .dot.x{background:transparent;border:1px dashed var(--miss)}
.recap span b{font-weight:700}
details.more summary{cursor:pointer;font-weight:700;font-size:15px}
details.more[open] summary{margin-bottom:12px}

/* ---------- board ---------- */
.board{display:grid}
.crowd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.crowd>div{display:grid;gap:16px;align-content:start}
@media (max-width:760px){.crowd{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:16px}
.card h3{margin:4px 0 0;font:800 20px/1.15 var(--f-game);letter-spacing:-.03em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats div{background:var(--bg);border-radius:12px;padding:12px}
.stats b{display:block;font:800 24px/1.1 var(--f-game);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stats span{font-size:13px;color:var(--muted)}
.hist{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;align-items:end;height:90px}
.hist div{background:var(--line);border-radius:4px 4px 1px 1px;min-height:3px}
.hist div.me{background:var(--one)}
.axis{display:flex;justify-content:space-between;font:500 11px var(--f-mono);color:var(--muted);margin-top:6px}
.split{display:grid;gap:10px}
.split .r{display:grid;gap:5px}
.split .r .t{font-size:14px;line-height:1.3}
.split .r .t b{font-weight:700}
.bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line)}
.bar i{display:block;height:100%}
.bar .a{background:var(--match)}
.split .v{font:500 12px var(--f-mono);color:var(--muted)}
.empty{color:var(--muted);margin:0;font-size:15px}
.poll{display:grid;gap:8px}
.poll .head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.poll .track{display:flex;height:34px;border-radius:10px;overflow:hidden;background:var(--line)}
.poll .seg{display:flex;align-items:center;padding:0 10px;font:700 13px var(--f-mono);color:#fff;white-space:nowrap;transition:width .6s cubic-bezier(.2,.8,.2,1);min-width:0;overflow:hidden}
.poll .seg.z{background:var(--zero)} .poll .seg.o{background:var(--one);justify-content:flex-end}
.poll .legend{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted)}
.poll .legend>span{display:flex;align-items:center;gap:6px;min-width:0}
.poll .legend b{color:var(--ink);font-weight:700}
.poll .jv{font:800 10px/1 var(--f-game);letter-spacing:.06em;color:var(--bg);background:var(--ink);padding:4px 6px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* site additions */
.said.thinking{color:var(--muted);font-style:italic}
.said.thinking::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.err{color:var(--zero-ink);font-weight:600}
.retry{background:transparent;border:1px solid currentColor;border-radius:999px;padding:6px 12px;color:var(--zero-ink);font-weight:600;margin-left:8px}
footer{max-width:1000px;margin:0 auto;font-size:13px;color:var(--muted);text-align:center}
[hidden]{display:none!important}