:root{
  --wall:#1b2024; --wall2:#151a1d; --frame:#0c0e10; --rim:#3a4248;
  --flapT:#2a3035; --flapB:#22272b; --char:#f4efe4; --muted:#9aa4ab; --soft:#c9cfd3;
  --yellow:#f2c230; --green:#3fd28a; --red:#ff5b4f; --paper:#f3eee2; --ink:#16181a;
  --fw:clamp(15px,2.05vw,30px); --fh:calc(var(--fw)*1.42);
  --board:"Barlow Condensed",Arial Narrow,sans-serif; --body:Geist,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--wall)}
body{margin:0;color:var(--soft);font-family:var(--body);font-size:16px;line-height:1.55;
  background:
    radial-gradient(1200px 520px at 50% -140px,rgba(242,194,48,.10),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 120px),
    linear-gradient(var(--wall),var(--wall2));min-height:100vh}
a{color:var(--yellow)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.top{display:flex;align-items:center;gap:20px;padding:18px clamp(16px,4vw,48px);max-width:1280px;margin:0 auto}
.mark{display:flex;align-items:center;gap:10px;color:var(--char);text-decoration:none;font-weight:600;font-size:17px}
.route{margin:0;color:var(--muted);font-size:14px;flex:1}
.clock{font-family:var(--board);font-weight:600;font-size:22px;color:var(--yellow);letter-spacing:.04em}
.clock small{font-size:13px;color:var(--muted)}

.hall{max-width:1280px;margin:0 auto;padding:8px clamp(16px,4vw,48px) 24px}
.board{position:relative;background:linear-gradient(#111416,#0a0c0d);border-radius:10px;padding:22px clamp(12px,2.2vw,30px) 26px;
  box-shadow:0 0 0 1px #000,0 0 0 7px var(--rim),0 0 0 8px #000,0 40px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
.screws i{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7d868c,#2c3236);box-shadow:inset 0 0 0 1px #000}
.screws i:nth-child(1){left:8px;top:8px}.screws i:nth-child(2){right:8px;top:8px}.screws i:nth-child(3){left:8px;bottom:8px}.screws i:nth-child(4){right:8px;bottom:8px}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.board h1{margin:0;font-family:var(--board);font-weight:600;font-size:clamp(22px,2.6vw,34px);color:var(--yellow);letter-spacing:.02em;line-height:1}
.sound{background:none;border:1px solid #3a4248;color:var(--muted);border-radius:6px;padding:6px 10px;font:500 13px var(--body);cursor:pointer}
.sound[aria-pressed="true"]{color:var(--yellow);border-color:var(--yellow)}
.cols{display:grid;grid-template-columns:var(--gcols);gap:calc(var(--fw)*.8);color:#6f7a81;font-size:13px;padding:0 0 8px;border-bottom:1px solid #1f2427;margin-bottom:10px}
.board{--gcols:calc(var(--fw)*16 + 15*3px) calc(var(--fw)*12 + 11*3px) 1fr}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:var(--gcols);gap:calc(var(--fw)*.8);align-items:center}
.row.mine{padding:8px 0;border-top:1px dashed #2a3035;border-bottom:1px dashed #2a3035}
.flaps{display:flex;gap:3px}
.f{position:relative;width:var(--fw);height:var(--fh);border-radius:3px;perspective:300px;font-family:var(--board);font-weight:600;
  font-size:calc(var(--fh)*.86);line-height:var(--fh);color:var(--char);text-align:center;flex:none}
.f .hu,.f .hl,.f .fu,.f .fl{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden}
.f .hu,.f .fu{top:0;background:var(--flapT);border-radius:3px 3px 0 0}
.f .hl,.f .fl{bottom:0;background:var(--flapB);border-radius:0 0 3px 3px}
.f .hl span,.f .fl span{display:block;transform:translateY(-50%)}
.f .hu span,.f .fu span{display:block}
.f span{height:var(--fh)}
.f::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:#07090a;z-index:5}
.f .fu{transform-origin:bottom;z-index:3}
.f .fl{transform-origin:top;z-index:3;transform:rotateX(90deg)}
.f.go .fu{animation:ftop var(--fs,70ms) ease-in forwards}
.f.go .fl{animation:fbot var(--fs,70ms) ease-out var(--fs,70ms) forwards}
@keyframes ftop{to{transform:rotateX(-90deg);filter:brightness(.6)}}
@keyframes fbot{from{transform:rotateX(90deg);filter:brightness(1.4)}to{transform:rotateX(0)}}
.f.dot{width:calc(var(--fw)*.42)}
.f.ok{color:var(--green)}.f.bad{color:var(--red)}.f.warn{color:var(--yellow)}
.status{display:grid;grid-template-columns:12px 1fr;column-gap:10px;align-items:center;font-family:var(--board);font-weight:600;font-size:calc(var(--fh)*.5);line-height:1.05;color:var(--char);letter-spacing:.03em;min-width:0}
.status .word{white-space:nowrap}
.status small{grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lamp{grid-row:span 2;width:12px;height:12px;border-radius:50%;background:#2a3035;flex:none;transition:background .3s,box-shadow .3s}
.lamp.green{background:var(--green);box-shadow:0 0 12px var(--green)}
.lamp.red{background:var(--red);box-shadow:0 0 12px var(--red)}
.lamp.yellow{background:var(--yellow);box-shadow:0 0 12px var(--yellow);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.35}}
.status small{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--muted);letter-spacing:0;margin-top:3px}

.ask{margin:26px auto 0;max-width:900px}
.ask label{display:block;color:var(--char);font-size:clamp(20px,2.2vw,26px);font-weight:500;margin-bottom:10px}
.ask-row{display:flex;gap:10px}
.ask input{flex:1;min-width:0;background:#0f1214;border:1px solid #3a4248;border-radius:10px;color:var(--char);font:400 17px var(--body);padding:15px 16px}
.ask input::placeholder{color:#66717a}
.ask button,#copy{background:var(--yellow);color:#14130f;border:0;border-radius:10px;font:600 16px var(--body);padding:0 22px;cursor:pointer}
.ask button:disabled{opacity:.6;cursor:progress}
#copy:disabled{opacity:.35;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips button{background:#14181b;border:1px solid #2e353a;color:var(--soft);border-radius:999px;padding:6px 12px;font:400 14px var(--body);cursor:pointer}
.chips button:hover{border-color:var(--yellow)}
.hint{color:var(--muted);font-size:14px;margin:12px 0 0}
.hint.err{color:var(--red)}

.result{max-width:760px;margin:10px auto 0;padding:0 clamp(16px,4vw,48px) 30px}
.answer h2{margin:0 0 12px;color:var(--char);font-size:22px;font-weight:600}
.options{margin-top:18px}
.options h3{margin:0 0 10px;color:var(--char);font-size:17px;font-weight:600}
.opt-list{display:flex;flex-direction:column;gap:8px}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;background:#0f1214;border:1px solid #2e353a;border-radius:10px;padding:12px 14px;color:var(--soft);font:400 15px var(--body);cursor:pointer}
.opt:hover{border-color:var(--yellow)}
.opt.on{border-color:var(--green);background:#0f1714}
.opt code{font-family:var(--board);font-weight:600;font-size:20px;color:var(--char);letter-spacing:.03em}
.opt .d{color:var(--muted);font-size:13px;white-space:nowrap}
.opt .tag{display:inline-block;margin-left:8px;font-size:12px;color:var(--yellow)}
.more{max-width:620px;margin:16px auto 0;color:var(--soft)}
.more summary{cursor:pointer;color:var(--char)}
.more .who{color:var(--muted);font-size:14px;margin:10px 0}
.center{text-align:center;max-width:620px;margin:18px auto 0}
.pair{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}
.lane h2{margin:0;color:var(--char);font-size:19px;font-weight:600}
.lane .who{margin:2px 0 12px;color:var(--muted);font-size:14px}
.code-flaps{display:flex;gap:3px;--fw:clamp(20px,3vw,38px);--fh:calc(var(--fw)*1.42)}
.code-flaps.small{--fw:clamp(15px,2vw,26px)}
.verdict{margin:10px 0 0;font-size:15px;color:var(--soft)}
.verdict b{color:var(--char)}
.label{position:relative;margin:30px auto 0;max-width:620px;background:var(--paper);color:var(--ink);border-radius:4px;padding:22px 26px 20px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);transform-origin:top;animation:print .9s steps(18) both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.label header{display:flex;justify-content:space-between;font-weight:600;font-size:13px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:6px}
.label dl{margin:0}
.label dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid #d8d1c2}
.label dt{color:#646a70;font-size:13px}
.label dd{margin:0;font-size:15px}
.label .lcode{font-family:var(--board);font-weight:700;font-size:30px;letter-spacing:.03em;line-height:1}
.label-foot{display:flex;align-items:center;gap:12px;margin-top:14px}
#copy{padding:11px 16px;font-size:15px}
.copied{color:#1e7a4f;font-weight:600;font-size:14px}
.stamp{position:absolute;right:26px;top:118px;border:3px solid #1e7a4f;color:#1e7a4f;font:700 22px var(--board);letter-spacing:.06em;padding:4px 12px;border-radius:6px;
  transform:rotate(-9deg) scale(2);opacity:0;transition:transform .2s cubic-bezier(.3,1.7,.6,1),opacity .12s}
.stamp.on{transform:rotate(-9deg) scale(1);opacity:.9}
.stamp.held{border-color:#c4372d;color:#c4372d}
.prec{max-width:620px;margin:22px auto 0}
#prec ul{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid #262d32}
#prec li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #262d32;font-size:14px}
#prec li code{font-family:var(--board);font-weight:600;font-size:17px;color:var(--char);letter-spacing:.03em;white-space:nowrap}
#prec li code.hit{color:var(--green)}
.prec h3{margin:0 0 8px;color:var(--char);font-size:16px;font-weight:600}
.prec ul{list-style:none;margin:0;padding:0;border-top:1px solid #262d32}
.prec li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #262d32;font-size:14px}
.prec li code{font-family:var(--board);font-weight:600;font-size:17px;color:var(--char);letter-spacing:.03em;white-space:nowrap}
.prec li code.hit{color:var(--green)}
.why{max-width:620px;margin:16px auto 0;color:var(--soft)}
.why summary{cursor:pointer;color:var(--char)}
.small-print{font-size:13px;color:var(--muted)}

.numbers{max-width:1100px;margin:40px auto 0;padding:0 clamp(16px,4vw,48px)}
.numbers h2,.story h2{color:var(--char);font-size:clamp(22px,2.4vw,30px);font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.lede{max-width:70ch;margin:0 0 22px}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.t{background:#0f1214;border:1px solid #262d32;border-radius:10px;padding:18px 20px}
.t.win{border-color:var(--yellow)}
.t .big{display:flex;align-items:baseline;gap:8px;font-family:var(--board);font-weight:700;font-size:64px;line-height:1;color:var(--char)}
.t.win .big{color:var(--yellow)}
.t .big small{font-size:22px;color:var(--muted);font-weight:600}
.t p{margin:8px 0 0;font-size:15px}
.t p.sub{color:var(--muted);font-size:13px;margin-top:4px}
.foot{color:var(--muted);font-size:14px;margin:14px 0 0;max-width:80ch}

.story{max-width:1100px;margin:56px auto 0;padding:0 clamp(16px,4vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:48px}
.story p{max-width:62ch}
.steps{padding-left:20px}.steps li{margin-bottom:8px}
.bottom{max-width:1100px;margin:60px auto 0;padding:24px clamp(16px,4vw,48px) 40px;color:#6f7a81;font-size:13px;border-top:1px solid #262d32}

@media (max-width:820px){
  :root{--fw:clamp(12px,3.3vw,22px)}
  .board{--gcols:1fr}
  .cols{display:none}
  .row{gap:6px;padding-bottom:10px;border-bottom:1px solid #1a1f22}
  .route{display:none}
  .pair,.story,.tally{grid-template-columns:1fr}
  .ask-row{flex-direction:column}.ask button{padding:14px}
  .label dl div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  .f.go .fu,.f.go .fl,.label,.lamp.yellow{animation:none!important}
  .stamp{transition:none}
}

/* ---------- a whole list ---------- */
.batch{max-width:1080px;margin:0 auto;padding:36px clamp(16px,4vw,48px) 8px}
.batch h2{font-family:var(--board);font-weight:600;font-size:clamp(26px,3vw,36px);color:var(--char);margin:0 0 8px;letter-spacing:.01em}
.batch .lede{margin:0 0 14px;max-width:760px}
#bList{width:100%;min-height:150px;background:#0e1113;color:var(--char);border:1px solid #2f363b;border-radius:8px;padding:12px 14px;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical;tab-size:12}
#bList:focus{outline:2px solid var(--yellow);outline-offset:1px}
.b-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:12px 0 0}
#bGo,.b-dl{background:var(--yellow);color:#16181a;border:0;border-radius:8px;padding:11px 18px;font:600 15px var(--body);cursor:pointer}
#bGo:disabled{opacity:.6;cursor:progress}
.b-file{color:var(--yellow);font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.b-file input{position:absolute;width:1px;height:1px;opacity:0}
.b-hint{color:var(--muted);font-size:14px}
.b-out{margin-top:20px}
.b-sum{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.b-sum span{font-family:var(--board);font-weight:600;font-size:18px;letter-spacing:.03em;border-radius:6px;padding:4px 10px;background:#15191c;border:1px solid #2a3035;color:var(--char)}
.b-only{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--soft);margin:0 0 10px}
.b-wrap{overflow-x:auto;border:1px solid #23292d;border-radius:8px}
.b-table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.b-table th{text-align:left;font-weight:500;color:#7c868d;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:9px 12px;border-bottom:1px solid #23292d;background:#101315}
.b-table td{padding:10px 12px;border-bottom:1px solid #1b2023;vertical-align:top;color:var(--soft)}
.b-table tr:last-child td{border-bottom:0}
.b-table td.ref{color:var(--muted);white-space:nowrap}
.b-table td.code{font-family:var(--board);font-weight:600;font-size:18px;letter-spacing:.04em;color:var(--char);white-space:nowrap}
.b-table td.code small{display:block;font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:0;color:var(--muted);white-space:normal;max-width:220px}
.b-table td.why{max-width:340px;font-size:13px}
.b-table td.why em{display:block;color:var(--muted);font-style:normal;margin-top:4px}
.chip{display:inline-block;font-family:var(--board);font-weight:600;font-size:14px;letter-spacing:.06em;border-radius:5px;padding:2px 8px;white-space:nowrap}
.chip.ready{background:rgba(63,210,138,.12);color:var(--green)}
.chip.check{background:rgba(242,194,48,.12);color:var(--yellow)}
.chip.detail,.chip.error{background:rgba(255,91,79,.12);color:var(--red)}
.b-out.only tr.ready{display:none}
.b-dl{margin-top:14px;background:none;color:var(--yellow);border:1px solid var(--yellow)}