:root{--bg: #0c0c0b;--panel: #161614;--line: #2a2a26;--gold: #c9a45c;--off: #ece7da;--dim: #8a867b}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--off);font-family:ui-monospace,SF Mono,Menlo,Consolas,Hiragino Mincho ProN,monospace;letter-spacing:.06em;background-image:linear-gradient(rgba(201,164,92,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,164,92,.04) 1px,transparent 1px);background-size:32px 32px}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.8) 100%)}.shell{position:relative;min-height:100%;padding-bottom:64px}button{font:inherit;color:inherit;cursor:pointer}.screen{min-height:100%;max-width:480px;margin:0 auto;padding:24px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.landing{justify-content:center}.mark{font-size:5rem;color:var(--gold);line-height:1;text-shadow:0 0 24px rgba(201,164,92,.55)}.mark.small{font-size:2.5rem}h1{margin:0;font-size:3rem;font-weight:400;letter-spacing:.4em;padding-left:.4em}h2{margin:0;font-weight:400;letter-spacing:.2em}.meaning{margin:0;color:var(--off)}.tagline{margin:0;color:var(--gold);font-style:italic}.modes{display:flex;flex-direction:column;gap:10px;width:100%;margin:12px 0}.mode,.level,.row button,.tools button,.ghost{background:transparent;border:1px solid var(--line);padding:14px;transition:border-color .2s,color .2s}.mode{display:flex;flex-direction:column;gap:4px}.mode small,.level small{color:var(--dim)}.mode:hover,.level:not(:disabled):hover,.row button:hover,.tools button:hover{border-color:var(--gold)}.cta{display:inline-block;padding:14px 40px;background:var(--gold);color:var(--bg);text-decoration:none;letter-spacing:.3em;text-transform:uppercase}.ghost{color:var(--dim);border-color:transparent}.disclaimer{margin-top:auto;padding-top:12px;font-size:.65rem;color:var(--dim);letter-spacing:.2em}.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}.level{display:flex;flex-direction:column;gap:4px}.level b{color:var(--gold);font-weight:400}.level:disabled{opacity:.35;cursor:default}.hud{display:flex;justify-content:space-between;width:100%;font-size:.8rem;color:var(--dim);letter-spacing:.15em}.hud .low{color:#c0664f}.goal{margin:0;color:var(--dim);font-size:.85rem}.board{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:4px;width:min(100%,420px);aspect-ratio:1;margin:auto 0}.cell{position:relative;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:2px}.cell.zone{background:#c9a45c14;border:1px dashed rgba(201,164,92,.55)}.cell.tile{background:var(--off);border-color:var(--off)}.cell.fixed{background:#5b574d;border-color:#5b574d;cursor:default}.cell.tile.zone{background:#d9b97a;border-color:var(--gold)}.cell.anchor:not(.tile):after{content:"";position:absolute;top:28%;right:28%;bottom:28%;left:28%;border:1px solid var(--gold);border-radius:50%}.cell.next:before{content:"";position:absolute;top:42%;right:42%;bottom:42%;left:42%;background:var(--dim);border-radius:50%;opacity:.6}.cell.sel{outline:2px solid var(--gold);outline-offset:1px}.msg{margin:0;min-height:1.4em;color:var(--dim);font-size:.85rem}.tools{display:flex;gap:8px;width:100%}.tools button{flex:1}.tools button.on{border-color:var(--gold);color:var(--gold)}.lvl{margin:0;color:var(--dim)}.stats{display:flex;gap:40px;margin:8px 0}.stats div{display:flex;flex-direction:column;align-items:center;gap:4px}.stats dt{color:var(--dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em}.stats dd{margin:0;font-size:2rem;color:var(--gold)}.lesson{max-width:32ch;font-style:italic;line-height:1.6}.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}h1,h2,.hud,.cta,.tabs button,.label{text-transform:uppercase}h2{font-size:1rem;color:var(--gold)}.mode,.level,.card,.modal,.grid-stats>div{position:relative;background:#161614b3;border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.cta{box-shadow:0 0 20px #c9a45c59;font-size:.85rem}.cell.zone{box-shadow:inset 0 0 12px #c9a45c33}.cell.tile{box-shadow:0 0 10px #ece7da59}.label{color:var(--dim);font-size:.7rem;letter-spacing:.2em}.glitch{position:relative;animation:flicker 4s infinite}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;mix-blend-mode:screen;animation:shift 3.2s infinite steps(1)}.glitch:before{color:#4fd1c5;transform:translate(-2px);clip-path:inset(0 0 55% 0)}.glitch:after{color:#c0664f;transform:translate(2px);clip-path:inset(55% 0 0 0);animation-delay:.4s}@keyframes shift{0%,90%{opacity:0}92%,to{opacity:.6}}@keyframes flicker{0%,93%,to{opacity:1}94%{opacity:.6}96%{opacity:1}97%{opacity:.7}}.bar{width:100%;height:6px;background:var(--line);overflow:hidden}.bar.thin{height:2px}.bar i{display:block;height:100%;background:var(--gold);box-shadow:0 0 10px var(--gold);transition:width .3s}.boot{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;position:relative}.boot .bar{max-width:260px}.boot-lines{min-height:5.5em;color:var(--dim);font-size:.75rem;letter-spacing:.2em;text-align:left}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:#0808078c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.modal{width:100%;max-width:420px;max-height:90vh;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:16px;border-color:var(--gold);box-shadow:0 0 40px #c9a45c26}.modal button{background:var(--gold);color:var(--bg);border:0;padding:12px;text-transform:uppercase;letter-spacing:.25em}.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left;font-size:.8rem;line-height:1.5}.steps li{display:grid;grid-template-columns:56px 1fr;gap:10px}.steps b{color:var(--gold);font-weight:400;text-transform:uppercase;font-size:.7rem;letter-spacing:.15em;padding-top:2px}.steps span{color:var(--off)}.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;max-width:480px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom);background:#0c0c0beb;border-top:1px solid var(--line)}.tabs button{flex:1;padding:16px;background:transparent;border:0;color:var(--dim);letter-spacing:.25em;font-size:.75rem}.tabs button.on{color:var(--gold);box-shadow:inset 0 2px 0 var(--gold)}.card{width:100%;padding:20px;display:flex;flex-direction:column;gap:10px;align-items:center}.rank{font-size:1.8rem;color:var(--gold);letter-spacing:.3em;text-transform:uppercase;text-shadow:0 0 16px rgba(201,164,92,.5)}.grid-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;margin:0}.grid-stats>div{padding:14px;display:flex;flex-direction:column;gap:6px}.grid-stats dt{color:var(--dim);font-size:.65rem;text-transform:uppercase;letter-spacing:.2em}.grid-stats dd{margin:0;font-size:1.4rem;color:var(--off)}.note{color:var(--dim);font-size:.7rem;line-height:1.6;margin:0}
