@charset "UTF-8";
:root{color-scheme:dark;--ink:#f7f2de;--muted:#9c98aa;--purple:#ae8cfa;--yellow:#f7d975;--line:#36313e}*{box-sizing:border-box}body{margin:0;background:#191821;color:var(--ink);font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}main{max-width:1104px;margin:auto;padding:0 40px}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:800;letter-spacing:2px}.brand-mark{background:var(--purple);color:#211b31;padding:7px 9px;font-size:15px;letter-spacing:1px;box-shadow:3px 3px 0 #000}.edition{font:10px monospace;letter-spacing:1.3px;color:var(--muted)}.edition b{color:var(--yellow);margin-left:8px}.heading{display:flex;justify-content:space-between;align-items:end;padding:31px 0 24px}.eyebrow{font-size:11px;color:var(--muted);margin:0 0 11px;letter-spacing:1px}h1{margin:0;font-size:30px;font-weight:900;letter-spacing:1px}h1 span{font-size:12px;font-weight:400;margin-left:17px;color:#b4aec0;letter-spacing:0}.world-tag{display:grid;gap:3px;text-align:right}.world-tag span{font:9px monospace;letter-spacing:2px;color:var(--purple)}.world-tag strong{font:22px monospace;font-weight:800}.world-tag small{font-size:10px;color:var(--muted)}.game-shell{border:1px solid #4c455c;background:#101019;padding:7px;box-shadow:0 15px 50px #0003}.screen-wrap{position:relative;aspect-ratio:4/3;background:#83b5ec;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:auto;outline:none;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#17132142}.overlay[hidden]{display:none}.panel{text-align:center;border:2px solid #ddc9ff;background:#211932f5;box-shadow:5px 5px 0 #100e1b;padding:23px 38px;min-width:45%;max-width:88%}.panel-kicker{font:10px monospace;letter-spacing:3px;color:var(--yellow);margin:0 0 12px}.panel h2{font-size:clamp(21px,3vw,36px);letter-spacing:2px;margin:0 0 8px}.panel p:not(.panel-kicker){font-size:12px;line-height:1.7}.primary{border:0;border-bottom:4px solid #7753b3;background:#b796ed;color:#211632;font-weight:800;padding:12px 37px;margin:10px 0 2px;box-shadow:3px 3px 0 #0c0815}.primary:hover{background:#c8b1f4}.primary:disabled{opacity:.6;cursor:wait}.panel .panel-sub{color:#aaa0bc;font-size:10px!important;margin:10px 0 0}.toast{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);padding:7px 15px;background:#221929ee;border:1px solid #ddc9ff;color:white;text-align:center;white-space:nowrap;font-size:clamp(11px,1.7vw,17px);pointer-events:none;opacity:0;transition:opacity .12s}.toast.visible{opacity:1}.game-toolbar{min-height:43px;display:flex;align-items:center;justify-content:space-between;padding:6px 7px 0;font-size:10px;color:var(--muted)}.game-toolbar>div{display:flex;gap:6px}.game-toolbar button{background:none;border:1px solid #373140;padding:5px 8px;font-size:10px}.game-toolbar button:hover{color:var(--ink);border-color:var(--purple)}.under-game{display:flex;align-items:center;justify-content:space-between;padding:18px 0}.controls{display:flex;gap:17px;align-items:center;font-size:10px;color:var(--muted)}.controls>span{white-space:nowrap}.controls kbd{display:inline-block;background:#25232e;border:1px solid #45404e;border-bottom:2px solid #45404e;border-radius:3px;padding:3px 6px;color:#ddd6e7;font:10px monospace;margin-right:4px}.text-button{background:none;border:0;font-size:10px;color:var(--muted)}.text-button:hover{color:var(--ink)}.practice{border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px}.practice summary{cursor:pointer;padding:15px 0;color:#d4cbdc}.practice summary span{color:var(--muted);margin-left:12px;font-size:10px}.practice-inner{padding:0 0 15px;color:var(--muted);line-height:1.8}.practice-buttons{display:flex;gap:8px}.practice-buttons button{background:#2c253a;border:1px solid #5f497d;padding:7px 16px;font-size:11px;color:#e4d4fc}footer{display:flex;justify-content:space-between;padding:20px 0 25px;font-size:9px;color:#726b80;letter-spacing:1px}.touch-controls{display:none;justify-content:space-between;gap:12px;padding-top:12px;touch-action:none;user-select:none}.touch-controls>div{display:flex;gap:12px}.touch-controls button{border:1px solid #625377;background:#342a45;min-width:60px;min-height:52px;font-weight:bold;touch-action:none}.touch-controls .jump{min-width:104px;background:#8d68bb;color:white}.screen-wrap:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:#111}.screen-wrap:fullscreen canvas{object-fit:contain}.screen-wrap:fullscreen .panel{max-width:600px}@media(pointer:coarse){.touch-controls{display:flex}}@media(max-width:700px){main{padding:0 14px}header{height:62px}.edition{font-size:8px}.heading{padding:23px 0 18px}h1{font-size:23px}h1 span{display:block;margin:6px 0 0;font-size:10px}.eyebrow{font-size:9px}.world-tag small{display:none}.game-shell{padding:4px}.panel{padding:12px 18px;min-width:65%}.panel-kicker{font-size:8px;margin-bottom:7px}.panel p:not(.panel-kicker){font-size:10px;margin:4px 0}.primary{padding:8px 22px;margin:5px 0;font-size:12px}.panel .panel-sub{font-size:8px!important}.game-toolbar{font-size:9px}.game-toolbar button{font-size:9px;padding:5px}.controls{gap:9px;flex-wrap:wrap;font-size:9px}.gamepad{display:none}.under-game{gap:10px}.text-button{white-space:nowrap;font-size:9px}.touch-controls{display:flex}footer{font-size:8px;letter-spacing:0}}

/* Test controls stay reachable at narrow widths and with the practice panel expanded. */
.game-toolbar{flex-wrap:wrap;gap:8px}.game-toolbar>div{flex-wrap:wrap}.game-toolbar button[aria-pressed="true"]#invincible{color:#211b31;background:var(--yellow);border-color:var(--yellow)}.practice-buttons{flex-wrap:wrap}
.menu-panel{width:min(92%,420px);max-height:calc(100% - 16px);display:flex;flex-direction:column;padding:12px 18px;background:#211932fa;border:2px solid #ddc9ff;box-shadow:4px 4px #100e1b}
.menu-panel h2{font-size:clamp(14px,2vw,22px);margin:0 0 7px;text-align:center}.menu-panel p{font-size:10px;text-align:center;margin:7px 0 0;color:#c9bfd5}
#menu-overlay{z-index:4;background:#17132180}#menu-items{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding:3px}
#menu-items button{flex-shrink:0;text-align:left;background:#332742;border:1px solid #685080;padding:9px 12px;font-size:clamp(11px,1.5vw,15px)}
#menu-items button.selected{background:#c8a5f2;color:#20152e;border-color:#f7d975}#menu-items button:focus-visible{outline:2px solid #f7d975;outline-offset:0}
#screen-menu{display:none;position:absolute;bottom:10px;right:10px;z-index:3;background:#211932e8;border:1px solid #ddc9ff;padding:8px 14px;font-size:18px}
.screen-wrap:fullscreen #screen-menu{display:block}@media(max-width:700px){.menu-panel{padding:7px 10px}.menu-panel p{font-size:8px;margin-top:4px}.menu-panel h2{margin-bottom:3px}#menu-items button{padding:6px 9px}}

/* Fullscreen includes the controls and retains a 4:3 play area at any orientation. */
.game-shell:fullscreen{width:100vw;height:100dvh;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#101019;border:0;overflow:auto}
.game-shell:fullscreen .screen-wrap{flex:none;width:min(100%,calc((100dvh - 76px)*4/3));aspect-ratio:4/3}
.game-shell:fullscreen .game-toolbar{flex:none;width:100%;max-width:1080px;min-height:44px;padding:0;justify-content:flex-end}
.game-shell:fullscreen #screen-menu{display:block;min-height:44px;min-width:44px}
.game-shell:fullscreen .touch-controls{flex:none;width:100%;max-width:800px;padding:0}
@media(pointer:coarse),(max-width:700px){.game-toolbar button{min-height:44px;min-width:44px}#menu-items button{min-height:44px}.game-toolbar{justify-content:flex-end}.game-shell:fullscreen .screen-wrap{width:min(100%,calc((100dvh - 140px)*4/3))}.touch-controls{padding:8px 4px 4px}.touch-controls button{user-select:none;-webkit-user-select:none}}
@media(pointer:coarse) and (orientation:landscape){.game-shell:fullscreen{flex-direction:row;flex-wrap:wrap;align-content:center;gap:4px}.game-shell:fullscreen .screen-wrap{width:min(calc(100% - 176px),calc((100dvh - 70px)*4/3));order:1}.game-shell:fullscreen .touch-controls{width:156px;flex-direction:column;align-items:stretch;order:2;gap:12px}.game-shell:fullscreen .touch-controls>div{gap:6px;justify-content:space-between}.game-shell:fullscreen .game-toolbar{order:3;justify-content:center}}

/* Dedicated title composition, sized from the 4:3 screen rather than the viewport. */
@font-face{font-family:DotGothic16;src:url('./assets/fonts/DotGothic16-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
header{height:64px;border:0}.game-shell{margin-top:8px}.screen-wrap{container-type:inline-size}
.title-screen{background:transparent}
.title-screen .panel{position:absolute;inset:0;min-width:0;max-width:none;border:0;background:none;box-shadow:none;padding:0}
.title-screen .panel-kicker{position:absolute;top:5%;left:0;width:100%;margin:0;font:400 2cqw DotGothic16,monospace;letter-spacing:.5cqw;color:#292335}
.title-screen #panel-title{position:absolute;top:10%;left:0;width:100%;margin:0;font:400 16cqw/1.16 DotGothic16,monospace;letter-spacing:.25cqw;color:#fff0b8;paint-order:stroke fill;-webkit-text-stroke:.65cqw #292335;filter:drop-shadow(0 1cqw 0 #6f3241)}
.title-screen #panel-title span{display:block}
.title-screen #panel-title span+span{font-size:13.5cqw;color:#ffb14d;letter-spacing:.15cqw}
.title-screen #panel-text{display:none}
.title-screen .primary{position:absolute;top:57%;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 3.5cqw/1 DotGothic16,monospace;letter-spacing:.3cqw;min-height:44px;margin:0;padding:2cqw 6cqw;color:#fff5c9;background:#352544;border:.6cqw solid #fff0b8;box-shadow:0 .8cqw 0 #271b34}
.title-screen .primary:hover{background:#574066}.title-screen .primary:focus-visible{outline-color:#fff0b8;outline-offset:4px}
.title-screen .panel .panel-sub{position:absolute;bottom:4%;left:0;width:100%;margin:0!important;font:400 2cqw/1.5 DotGothic16,monospace!important;letter-spacing:.1cqw;color:#fff0cc;text-shadow:1px 1px #4a2c27}
@media(max-width:700px){header{height:50px}.game-shell{margin-top:0}.title-screen .primary{padding:1.5cqw 5cqw;font-size:4cqw}.title-screen .panel .panel-sub{font-size:2.4cqw!important}}
