:root{--ink: #1c2418;--hedge: #2a4630;--path: #e6d2a0;--lantern: #f0b44a;--vermilion: #d4543c;--mist: #c8b898;--paper: #f6ead0;--safe: env(safe-area-inset-bottom, 0px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(58% 38% at 50% 0%,rgba(240,180,74,.18),transparent 58%),radial-gradient(70% 48% at 8% 100%,rgba(42,70,48,.55),transparent 56%),linear-gradient(180deg,#243228 0%,var(--ink) 46%,#12180f 100%);color:var(--paper);font-family:Kosugi Maru,Hiragino Maru Gothic ProN,sans-serif}body{min-height:100dvh}#app{width:min(390px,100%);margin:0 auto;min-height:100dvh;min-height:100svh;padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(12px + var(--safe));display:grid;grid-template-rows:auto auto auto 1fr auto auto;gap:7px}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--lantern);outline-offset:3px}.top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px 10px}.brand h1{margin:0;font-family:Hina Mincho,Yu Mincho,serif;font-weight:400;font-size:clamp(28px,8vw,40px);letter-spacing:.18em;line-height:1.05}.eyebrow,.ver{margin:0;font-size:11px;letter-spacing:.2em;color:var(--mist)}.ver{font-family:IBM Plex Mono,ui-monospace,monospace;letter-spacing:.08em;color:var(--lantern)}.pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.pill{min-width:64px;padding:6px 8px 5px;border:1px solid rgba(240,180,74,.32);background:#121810b8;text-align:center}.pill b{display:block;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:15px;line-height:1.1}.pill span{font-size:10px;letter-spacing:.12em;color:var(--mist)}.how{margin:0;font-size:12px;line-height:1.55;color:var(--mist)}.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.diff{min-height:40px;border:1px solid rgba(240,180,74,.28);background:#1218108c;letter-spacing:.08em}.diff.is-on{background:linear-gradient(180deg,#d4543c,#9a3024);color:var(--paper);border-color:transparent;font-weight:700}.stage-wrap{position:relative;min-height:0;display:grid;place-items:center}.stage{width:min(100%,92dvw);aspect-ratio:1;max-height:min(420px,52dvh)}.stage canvas{display:block;width:100%;height:100%;border:2px solid #6a4a22;box-shadow:inset 0 0 0 1px #f0b44a2e,0 8px #0c100a;touch-action:none}.hud{display:flex;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--mist)}.hud b{color:var(--lantern);font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:500}.pad-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px}.dpad{display:grid;grid-template-columns:56px 56px 56px;grid-template-rows:56px 56px 56px;gap:4px}.dir{display:grid;place-items:center;background:#35553a;color:var(--paper);font-size:20px;box-shadow:0 4px #1a2c1e}.dir:active{transform:translateY(2px);box-shadow:0 2px #1a2c1e}.dir[data-dir=up]{grid-column:2;grid-row:1}.dir[data-dir=left]{grid-column:1;grid-row:2}.dir[data-dir=right]{grid-column:3;grid-row:2}.dir[data-dir=down]{grid-column:2;grid-row:3}.actions{display:grid;gap:8px}.lantern,.ghost{min-height:44px;padding:0 10px;letter-spacing:.08em}.lantern{background:linear-gradient(180deg,#f0b44a,#c88828);color:#2a1c0c;font-weight:700;box-shadow:0 3px #7a5418}.lantern:active{transform:translateY(2px);box-shadow:0 1px #7a5418}.lantern:disabled,.ghost:disabled{opacity:.4}.ghost{border:1px solid rgba(240,180,74,.35);background:#12181099;color:var(--paper)}.toast,.sheet{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;z-index:3}.toast p,.sheet .panel{margin:0;padding:14px 18px;background:#10140ef0;border:2px solid var(--lantern);color:var(--paper);text-align:center;letter-spacing:.08em}.toast[hidden],.sheet[hidden]{display:none}.sheet{pointer-events:auto;background:#080c0885}.sheet .panel{width:min(90%,320px);display:grid;gap:10px}.sheet h2{margin:0;font-family:Hina Mincho,Yu Mincho,serif;font-weight:400;letter-spacing:.16em}.sheet .meta{margin:0;color:var(--mist);font-size:13px}@media(max-width:380px){.dpad{grid-template-columns:50px 50px 50px;grid-template-rows:50px 50px 50px}}@media(max-height:700px){.how{display:none}.ghost,.lantern,.diff{min-height:40px}.stage{max-height:min(360px,46dvh)}}@media(prefers-reduced-motion:reduce){.dir,.lantern{transition:none}}