:root{--bg:#fbfaf7;--fg:#1d1d1f;--sub:#5b5b63;--hair:rgba(0,0,0,.28);--card:#fff;--line:#d9d6cf;--accent:#2f6fdb;--accent-fg:#fff;--warn:#b3261e;--focus:#c2410c}
@media (prefers-color-scheme:dark){:root{--bg:#141416;--fg:#f2f2f4;--sub:#a9a9b3;--hair:rgba(255,255,255,.3);--card:#1e1e22;--line:#34343b;--accent:#6ea0ff;--accent-fg:#0b1020;--warn:#ff8a80;--focus:#ffb066}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;min-height:100dvh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.staging{background:#fde68a;color:#3b2f00;padding:6px 12px;font-size:13px;text-align:center}
.staging a{color:inherit;margin:0 4px}
.top{display:flex;align-items:center;gap:8px;padding:8px 12px;max-width:560px;width:100%;margin:0 auto}
.brand{font-size:20px;margin:0;letter-spacing:.2px}
.meta{flex:1;color:var(--sub);font-size:13px;text-align:right}
.icons{display:flex;gap:2px}
.icon{min-width:44px;min-height:44px;border:0;background:none;color:var(--fg);font-size:18px;cursor:pointer;border-radius:10px}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:0 12px 12px}
.theme{margin:4px 0 10px;color:var(--sub);font-size:14px;text-align:center}
.stage{display:flex;justify-content:center}
.board{position:relative;width:min(100%,calc(var(--vvh,100dvh) - 270px));min-width:220px;aspect-ratio:1;background:var(--line);border-radius:8px;overflow:hidden;touch-action:manipulation}
.tile{position:absolute;border:0;padding:0;margin:0;cursor:pointer;box-shadow:inset 0 0 0 .5px var(--hair);touch-action:manipulation;border-radius:0}
.tile[aria-disabled=true]{cursor:default}
.tile:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;z-index:3}
.tile.fresh{animation:pop .28s ease-out}
@keyframes pop{0%{transform:scale(.6);filter:brightness(1.35)}100%{transform:scale(1);filter:none}}
@media (prefers-reduced-motion:reduce){.tile.fresh{animation:none}*{scroll-behavior:auto!important;transition:none!important}}
.full{width:min(100%,calc(var(--vvh,100dvh) - 270px));min-width:220px;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--line)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
.pops{font-weight:600}
.misses{letter-spacing:3px;font-size:18px}
.guess{display:flex;gap:8px}
.guess input{flex:1;min-width:0;font-size:16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);min-height:48px}
button.primary,.guess button{min-height:48px;padding:0 18px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-fg);font-size:16px;font-weight:600;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;color:var(--sub);text-decoration:underline;min-height:44px;font-size:14px;cursor:pointer;display:block;margin:0 auto}
.msg{min-height:1.5em;margin:6px 0;text-align:center;font-size:15px}
.msg.bad{color:var(--warn)}
.sub{color:var(--sub);font-size:14px;margin:6px 0}
.fact{margin:4px 0}
#result h2{margin:14px 0 4px;font-size:22px}
.maps{display:flex;gap:20px;justify-content:center;margin:14px 0 4px}
figure{margin:0;text-align:center;font-size:13px;color:var(--sub)}
.map{display:grid;width:128px;height:128px;border:1px solid var(--line);margin:0 auto 6px}
.m4{grid-template-columns:repeat(4,1fr)}.m16{grid-template-columns:repeat(16,1fr)}
.map i{display:block}
.mono{font-family:ui-monospace,monospace;white-space:pre;line-height:1.1}
.foot{text-align:center;padding:14px;font-size:12px;color:var(--sub)}
.foot a{color:var(--sub)}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);max-width:min(92vw,460px);padding:18px}
dialog::backdrop{background:rgba(0,0,0,.5)}
.how{padding:0;margin:0 0 8px;list-style:none;display:grid;gap:12px}
.how li{display:flex;gap:12px;align-items:center}
.how canvas{width:72px;height:72px;flex:none;image-rendering:pixelated;border:1px solid var(--line)}
.ts{display:flex;justify-content:center;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;margin-bottom:12px}
.stats b{display:block;font-size:24px}
.hist{display:grid;gap:4px}
.hist div{display:flex;align-items:center;gap:8px;font-size:13px}
.hist span.bar{display:block;height:14px;background:var(--accent);min-width:2px;border-radius:2px}