:root{--bg: #0b0b0c;--panel: #151517;--line: #2a2a2e;--gold: #d4a937;--ink: #ece8df;--dim: #8b887f;--bad: #c8412f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--ink)}body{font-family:ui-sans-serif,system-ui,Hiragino Sans,Noto Sans JP,sans-serif;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.screen{min-height:100%;max-width:480px;margin:0 auto;padding:24px 16px 12px;display:flex;flex-direction:column;align-items:center;gap:14px}h1{margin:0;letter-spacing:.35em;font-weight:800;font-size:2rem}h2{margin:0;letter-spacing:.25em;font-weight:700}h2.good{color:var(--gold)}h2.bad{color:var(--bad)}.kanji{font-size:7rem;line-height:1;color:var(--gold);text-shadow:0 0 40px rgba(212,169,55,.35);margin-top:3vh}.kanji.small{font-size:4rem;margin:0}.tag{margin:0;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}.meaning,.lesson{margin:0;text-align:center;color:var(--dim);line-height:1.5;max-width:320px}.lesson{color:var(--ink);font-style:italic}.modes{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:8px}.btn{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:14px 18px;font:inherit;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}.btn small{font-weight:400;letter-spacing:.05em;color:var(--dim);text-transform:none}.btn em{color:var(--gold);font-size:.7rem;font-style:normal}.btn.gold{border-color:var(--gold);color:var(--gold)}.btn:active,.lv:active{transform:scale(.98)}.cta{margin-top:6px;color:var(--bg);background:var(--gold);padding:13px 22px;font-weight:800;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;font-size:.85rem}.disc{margin-top:auto;padding-top:12px;font-size:.62rem;letter-spacing:.18em;color:var(--dim);text-align:center}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.lv{background:var(--panel);border:1px solid var(--line);color:var(--ink);aspect-ratio:1;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.lv span{font-size:1.6rem;font-weight:800}.lv small{font-size:.6rem;color:var(--dim)}.lv.done{border-color:var(--gold)}.lv.done span{color:var(--gold)}.lv:disabled{opacity:.4;cursor:not-allowed}.hud{display:flex;width:100%;justify-content:space-between;align-items:flex-end}.hud label{display:block;font-size:.6rem;letter-spacing:.2em;color:var(--dim)}.hud b{font-size:1.1rem;font-variant-numeric:tabular-nums}.pips{display:flex;gap:5px;margin-top:4px}.pips i{width:16px;height:6px;background:var(--line)}.pips i.on{background:var(--gold)}.quit{background:none;border:1px solid var(--line);color:var(--dim);width:32px;height:32px;cursor:pointer}.play{gap:8px;padding-top:14px}.status{height:18px;font-size:.7rem;letter-spacing:.25em;color:var(--gold)}.board{width:100%;max-height:62vh;flex:1 1 auto;min-height:0;touch-action:none}.board.shake{animation:shake .3s}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.edge{stroke:var(--line);stroke-width:2}.gold{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(212,169,55,.6))}.pulse{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.1}50%{opacity:.9}}.node{fill:#3a3a3f}.node.decoy{fill:#2f2f33}.node.bad{fill:var(--bad);r:12}.player{fill:var(--ink)}.player-ring{fill:none;stroke:var(--ink);stroke-width:2;opacity:.6}.sentinel{fill:var(--bad)}.gate{fill:none;stroke-width:3}.gate.open{stroke:var(--gold)}.gate.shut{stroke:var(--bad);fill:#c8412f40}.end{fill:var(--gold);font-size:22px;text-anchor:middle}.dpad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}.dpad button{background:var(--panel);border:1px solid var(--line);color:var(--ink);height:52px;font-size:1.1rem;cursor:pointer}.dpad button:active{background:var(--gold);color:var(--bg)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:4px 0}.stats div{background:var(--panel);border:1px solid var(--line);padding:10px;text-align:center}.stats dt{font-size:.6rem;letter-spacing:.15em;color:var(--dim);text-transform:uppercase}.stats dd{margin:4px 0 0;font-size:1.3rem;font-weight:800}.mode{margin:0;color:var(--dim);letter-spacing:.2em;text-transform:uppercase;font-size:.75rem}.row{display:flex;gap:10px;width:100%}.row .btn{flex:1}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;background:#0b0b0c8c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadein .3s}.sheet{width:100%;max-width:420px;background:#151517eb;border:1px solid var(--gold);padding:22px 18px;display:flex;flex-direction:column;gap:16px;text-align:center}.guide{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left}.guide li b{display:block;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}.guide li span{color:var(--ink);font-size:.9rem;line-height:1.45}@keyframes fadein{0%{opacity:0}}.topbar{display:flex;justify-content:space-between;width:100%;gap:8px}.chip,.back{background:none;border:1px solid var(--line);color:var(--dim);padding:8px 12px;font:inherit;font-size:.7rem;letter-spacing:.1em;cursor:pointer}.chip:hover,.back:hover{color:var(--gold);border-color:var(--gold)}.back{align-self:flex-start}.rank{display:flex;flex-direction:column;align-items:center}.rank b{font-size:1.6rem;color:var(--gold);letter-spacing:.15em;text-transform:uppercase}.rank span{color:var(--dim);letter-spacing:.2em;font-size:.75rem}.xp{width:100%;height:8px;background:var(--line)}.xp i{display:block;height:100%;background:var(--gold);transition:width .6s}.loading{justify-content:center}.loading .kanji{animation:breathe 1.1s ease-in-out infinite}.bar{width:160px;height:2px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;width:100%;background:var(--gold);transform:translate(-100%);animation:fill 1.1s ease-out forwards}@keyframes fill{to{transform:translate(0)}}@keyframes breathe{50%{opacity:.45}}:root{--bg: #050607;--panel: rgba(18,20,22,.72);--line: #23282b;--cyan: #5fd0c4}body{font-family:ui-monospace,SF Mono,JetBrains Mono,Menlo,Consolas,Noto Sans JP,monospace;background:radial-gradient(ellipse at 50% 0%,#11161a 0%,var(--bg) 60%) fixed;background-image:linear-gradient(rgba(95,208,196,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(95,208,196,.035) 1px,transparent 1px),radial-gradient(ellipse at 50% 0%,#11161a 0%,var(--bg) 60%);background-size:32px 32px,32px 32px,100% 100%}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,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%);animation:flicker 5s infinite}@keyframes flicker{0%,to{opacity:1}47%{opacity:1}48%{opacity:.82}50%{opacity:1}93%{opacity:.9}}h1,h2,.tag,.btn,.chip,.back,.hud label,.status,.disc{text-transform:uppercase}h1{position:relative;text-shadow:0 0 18px rgba(212,169,55,.25);animation:glitch 6s infinite}@keyframes glitch{0%,94%,to{transform:none;text-shadow:0 0 18px rgba(212,169,55,.25)}95%{transform:translate(-3px);text-shadow:3px 0 var(--cyan),-3px 0 var(--bad)}97%{transform:translate(3px);text-shadow:-3px 0 var(--cyan),3px 0 var(--bad)}}.kanji{animation:kglitch 7s infinite}@keyframes kglitch{0%,90%,to{transform:none;opacity:1}91%{transform:translate(4px,-2px);opacity:.7}93%{transform:translate(-4px,2px);opacity:.9}}.tag:before{content:"> ";color:var(--cyan)}.tag:after{content:"_";animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.meaning{font-size:.8rem;border-left:2px solid var(--gold);padding-left:10px;text-align:left}.btn,.chip,.back,.lv,.dpad button,.stats div,.sheet,.cta{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);border-radius:0}.btn,.lv,.stats div{background:var(--panel);position:relative}.btn:hover,.lv:not(:disabled):hover{border-color:var(--cyan);box-shadow:inset 0 0 18px #5fd0c41f}.btn.gold{box-shadow:inset 0 0 22px #d4a9371f}.cta{box-shadow:0 0 22px #d4a93759;animation:ctaglow 2.4s ease-in-out infinite}@keyframes ctaglow{50%{box-shadow:0 0 34px #d4a93799}}.sheet{border-color:var(--cyan);box-shadow:0 0 40px #5fd0c426}.overlay{background:#05060799;backdrop-filter:blur(14px) saturate(.7);-webkit-backdrop-filter:blur(14px) saturate(.7)}.guide li b{color:var(--cyan)}.guide li b:before{content:"// ";color:var(--gold)}.hud b,.stats dd{font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(236,232,223,.25)}.hud label:before{content:"▸ ";color:var(--cyan)}.status{color:var(--cyan);text-shadow:0 0 8px rgba(95,208,196,.5)}.pips i.on{box-shadow:0 0 8px var(--gold)}.board{filter:drop-shadow(0 0 14px rgba(95,208,196,.07));background:radial-gradient(circle at center,rgba(95,208,196,.04),transparent 70%)}.edge{stroke:#1d2326;stroke-dasharray:3 5}.node{fill:#2c353a;stroke:#5fd0c440;stroke-width:1}.node.decoy{animation:nodepulse 3s ease-in-out infinite}@keyframes nodepulse{50%{stroke:#5fd0c499}}.player{filter:drop-shadow(0 0 8px #fff)}.player-ring{stroke:var(--cyan);animation:ring 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes ring{0%{transform:scale(.8);opacity:.9}to{transform:scale(1.6);opacity:0}}.sentinel{filter:drop-shadow(0 0 8px var(--bad))}.gate.open{stroke:var(--cyan)}.dpad button{background:var(--panel);border-color:var(--line);color:var(--cyan)}.rank b{text-shadow:0 0 14px rgba(212,169,55,.4)}.xp{background:#12171a;border:1px solid var(--line)}.xp i{box-shadow:0 0 10px var(--gold);background:linear-gradient(90deg,var(--gold),#f0d27a)}.loading .bar{width:200px;height:3px;box-shadow:0 0 12px #d4a9374d}.loading:before{content:"SYS//BOOT · KATA.PATH · INTEGRITY CHECK";font-size:.6rem;letter-spacing:.25em;color:var(--cyan);animation:blink 1.1s steps(1) infinite}.disc{color:#5d625f;border-top:1px solid var(--line);width:100%}.sentinel{fill:#c8412f59;stroke:var(--bad);stroke-width:2}.sentinel.occ{animation:occpulse .8s ease-in-out infinite}@keyframes occpulse{50%{fill:#c8412fb3}}.sentinel.open,.sentinel.safe{fill:#d4a93726;stroke:var(--gold);filter:drop-shadow(0 0 8px var(--gold));animation:safeflash .4s ease-in-out infinite}@keyframes safeflash{50%{fill:#d4a93773}}.status{min-height:18px;height:auto;text-align:center}