:root{color-scheme:dark;--ink:#122632;--yellow:#ffd538;--paper:#fff7da;--red:#f0573c}*{box-sizing:border-box}body{margin:0;background:#112b36;color:var(--paper);font-family:'Barlow Condensed',system-ui,sans-serif;min-height:100dvh;display:grid;place-items:center;background-image:radial-gradient(#29404b 1px,transparent 1px);background-size:8px 8px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}.cabinet{width:min(1060px,96vw);padding:22px 30px 20px;background:#192f3a;border:1px solid #3a4e55;box-shadow:0 22px 70px #00131c88;border-radius:20px}header{display:flex;align-items:center;gap:24px;margin-bottom:22px}.wordmark{font-size:29px;font-weight:900;letter-spacing:-1px;color:var(--paper);text-decoration:none}.wordmark b{color:var(--yellow)}.edition{font-size:14px;letter-spacing:2px;color:#a5b5b9;flex:1}.edition i{font-style:normal;background:var(--red);color:#fff;padding:3px 7px;margin-left:8px;letter-spacing:0}.icon-btn{background:transparent;color:#d7e2de;border:1px solid #718089;border-radius:5px;padding:9px 14px;font-weight:700;letter-spacing:1px}.display{max-width:900px;margin:auto}.bezel{position:relative;padding:10px;background:#071d28;border-radius:9px;border-bottom:2px solid #53626a;box-shadow:inset 0 2px 8px #0008}canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;image-rendering:pixelated;image-rendering:crisp-edges;background:#052835;outline:0;touch-action:none;border-radius:2px}#loading{position:absolute;inset:10px;display:grid;place-items:center;background:#122632;color:var(--yellow);font-weight:800;letter-spacing:3px}.screen-meta{display:flex;justify-content:space-between;padding:10px 3px;font-size:12px;letter-spacing:1.5px;color:#90a6b0}.screen-meta i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--yellow);margin-right:8px}.controller{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 22px;user-select:none;touch-action:none}.dpad{display:flex;gap:8px}.dpad button{width:64px;height:57px;border-radius:9px;background:#233e49;color:#d8e0da;border:1px solid #52616a;border-bottom:5px solid #0a1e28;font-size:24px}.system{display:flex;gap:13px;padding-top:12px}.system button{border:0;border-radius:20px;background:#70818a;color:#061c27;font-size:13px;letter-spacing:1px;font-weight:800;padding:7px 15px;border-bottom:3px solid #091d28}.actions{display:flex;align-items:center;gap:16px}.actions button{position:relative;width:55px;height:55px;border-radius:50%;border:1px solid #ffecc055;border-bottom:5px solid #0004;color:#142735;font-size:26px;font-weight:900;box-shadow:0 3px 0 #081d28}.actions button span{position:absolute;font-size:11px;letter-spacing:1px;top:58px;left:50%;transform:translateX(-50%);color:#a4b6bd;white-space:nowrap}.special{background:#70bcb4!important;width:42px!important;height:42px!important;font-size:20px!important}.special span{top:46px!important}.attack{background:var(--red);margin-top:14px}.jump{background:var(--yellow);margin-top:-10px}button.pressed{transform:translateY(3px);filter:brightness(1.3)}footer{border-top:1px solid #40545e;padding-top:16px;display:flex;justify-content:space-between;gap:14px;font-family:system-ui,sans-serif;font-size:12px;color:#9eb1b7}footer div{display:flex;gap:16px;flex-shrink:0}footer a,footer button{background:none;border:0;color:#e7ddbd;font-size:12px;text-decoration:none;padding:0}kbd{font-family:inherit;border:1px solid #5b6e77;border-radius:3px;padding:1px 4px}dialog{max-width:510px;background:#fff5d7;color:#192f3a;border:0;border-radius:14px;padding:32px;font-family:system-ui,sans-serif;font-size:15px;line-height:1.8}dialog::backdrop{background:#001722cc;backdrop-filter:blur(5px)}dialog h1{font-size:27px;line-height:1.4}dialog .close{position:absolute;right:15px;top:10px;border:0;background:none;color:#152b36;font-size:30px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:bold;color:#b04e2f}dl{display:grid;grid-template-columns:1fr 1fr;font-size:14px}dd{margin:0}.credit{font-size:12px;border-top:1px solid #b6b099;padding-top:14px}.cabinet:fullscreen{width:100%;height:100%;border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center}.cabinet:fullscreen .display{width:min(105vh,90vw)}.cabinet:fullscreen header,.cabinet:fullscreen footer{display:none}@media(min-width:900px) and (max-height:850px){.cabinet{width:min(830px,94vw);padding:15px 25px}.display{max-width:690px}header{margin-bottom:12px}.controller{padding:3px 12px 22px}}@media(max-width:650px){.cabinet{width:100%;padding:16px 12px 24px;border-radius:0;border:0;background:transparent;box-shadow:none}header{gap:10px;margin:0 4px 15px}.wordmark{font-size:24px}.edition{font-size:10px;letter-spacing:1px}.edition i{display:none}.icon-btn{font-size:10px;padding:7px}.bezel{padding:5px}.screen-meta{font-size:9px;letter-spacing:1px}.controller{padding:24px 4px 32px}.dpad button{width:53px;height:57px}.system{gap:7px;flex-direction:column;padding:0}.system button{font-size:10px;padding:5px 11px}.actions{gap:10px}.actions button{width:49px;height:49px}.actions button span{top:52px;font-size:9px}.special{width:36px!important;height:36px!important}.special span{top:40px!important}footer{justify-content:center}footer>span{display:none}footer div{gap:30px}dialog{margin:16px;padding:26px}}

/* iOS: controls must never enter text selection or long-press callouts. */
.controller,.controller *,#game{ -webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;touch-action:none;}
.controller button{-webkit-appearance:none;appearance:none;}
.controller button span{pointer-events:none;}

/* Full-height landscape playfield with large translucent overlay controls. */
.landscape-fullscreen{display:none}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse), (orientation:landscape) and (max-height:520px){
 html,body{width:100%;height:100dvh;min-height:0;overflow:hidden;background:#000}
 body{display:block;background-image:none}
 .cabinet,.cabinet:fullscreen{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;padding:0;margin:0;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;box-shadow:none;background:#000;--control-size:clamp(64px,22dvh,100px)}
 .display,.cabinet:fullscreen .display{width:min(100vw,150dvh);max-width:none;height:min(100dvh,66.666667vw);margin:0;flex:none}
 .bezel{width:100%;height:100%;padding:0;border:0;border-radius:0;box-shadow:none;background:#000}
 #game{width:100%;height:100%;border-radius:0;object-fit:contain}
 #loading{inset:0}
 .screen-meta,footer,header .wordmark,header .edition{display:none}
 header,.cabinet:fullscreen header{position:absolute;left:50%;right:auto;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:8px;margin:0;z-index:4}
 #sound,.landscape-fullscreen{font-size:11px;padding:7px 10px;min-height:34px;border-radius:18px;opacity:.82}
 .landscape-fullscreen{display:block;font-size:18px}
 .controller{position:absolute;inset:0;padding:0;pointer-events:none;z-index:3}
 .controller button{pointer-events:auto;opacity:.82;min-width:44px;min-height:44px}
 .controller button.pressed{opacity:1;filter:none;transform:none}
 .dpad{position:absolute;left:0;right:auto;top:auto;bottom:max(44px,calc(env(safe-area-inset-bottom) + 20px));transform:none;gap:10px;margin:0}
 .dpad button{width:var(--control-size);height:clamp(76px,26dvh,114px);font-size:clamp(30px,10dvh,42px);border-radius:16px}
 .system{position:absolute;left:50%;right:auto;top:auto;bottom:max(9px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:row-reverse;gap:12px;padding:0;margin:0}
 .system button{min-width:78px;min-height:34px;padding:7px 12px;font-size:12px;border-radius:22px}
 .actions{position:static;display:contents;width:auto;height:auto;margin:0}
 .actions button{position:absolute;width:var(--control-size);height:var(--control-size);margin:0;font-size:clamp(32px,10dvh,46px)}
 .actions .jump{top:auto;left:auto;right:max(14px,env(safe-area-inset-right));bottom:calc(max(24px,env(safe-area-inset-bottom)) + var(--control-size) * .9)}
 .actions .attack{top:auto;left:auto;right:calc(max(14px,env(safe-area-inset-right)) + var(--control-size) * 1.05);bottom:max(24px,env(safe-area-inset-bottom))}
 .actions .special{--special-size:clamp(48px,16dvh,72px);left:auto;top:auto;bottom:calc(max(24px,env(safe-area-inset-bottom)) + var(--control-size) * 1.9 + 10px);right:calc(max(14px,env(safe-area-inset-right)) + (var(--control-size) - var(--special-size)) * .5);width:var(--special-size)!important;height:var(--special-size)!important;padding:0;font-size:26px!important;border-radius:50%}
 .actions button span{display:none}
 dialog{max-height:90dvh;overflow:auto;z-index:10}
}

/* The handheld surface consumes touch gestures; help remains scrollable. */
.cabinet{touch-action:none}dialog{touch-action:pan-y}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Block native iOS/Android long-press actions across the game surface. */
html,body,.cabinet,.cabinet *{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-user-drag:none!important}
html,body{overscroll-behavior:none}

/* Retro UI typography. Game framebuffer and input geometry are unchanged. */
@font-face{font-family:GamePixel;src:url('game-pixel.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Arcade8;src:url('arcade8.woff') format('woff');font-weight:400;font-display:swap}
body,footer,dialog,kbd{font-family:GamePixel,monospace;font-weight:700;font-synthesis:weight}
button,.icon-btn,.system button,.actions button,.actions button span,.screen-meta,.eyebrow,#loading,footer button{font-family:Arcade8,GamePixel,monospace;font-weight:400;letter-spacing:0}
.controller button{border-top:2px solid #ffffff80;border-left:2px solid #ffffff55;box-shadow:0 4px 0 #071820}
.actions button{font-size:26px;text-shadow:1px 1px 0 #ffffff25}.special{font-size:20px!important}
.system button{font-size:9px;line-height:1.4;padding:9px 12px}.actions button span{font-size:7px;line-height:1.5;color:#d3e2e6;text-shadow:1px 1px #081d28}
.icon-btn{font-size:9px;padding:11px 12px;border:2px solid #d1e1de;box-shadow:3px 3px 0 #061c27;border-radius:3px;color:#fff}
.screen-meta{justify-content:flex-end;font-size:8px;line-height:1.5;letter-spacing:0}
footer{font-size:12px;line-height:1.8;font-weight:700;-webkit-text-stroke:.25px currentColor;align-items:center}
footer div{gap:16px}footer button#help{font-size:10px;line-height:1.5;padding:11px 14px;background:#ffd538;color:#142735;border:2px solid #071820;border-radius:3px;box-shadow:3px 3px 0 #0007;-webkit-text-stroke:0}
#loading{font-size:12px;line-height:1.7;letter-spacing:0}
dialog{font-family:GamePixel,monospace;font-size:14px;font-weight:700;line-height:1.9;border:3px solid #142735;border-radius:4px;box-shadow:7px 7px 0 #0008;padding:28px;-webkit-text-stroke:.3px currentColor}
dialog h1{font-family:GamePixel,monospace;font-size:21px;font-weight:700;line-height:1.6;margin:14px 0}
dialog p,dialog dl,dialog dt,dialog dd{font-family:GamePixel,monospace;font-size:14px;font-weight:700;line-height:1.9;letter-spacing:0}
dialog dl{gap:6px}dialog dt{font-weight:900}dialog .eyebrow{font-family:Arcade8,monospace;font-size:11px;line-height:1.6;color:#ad3428;-webkit-text-stroke:0}
dialog .credit{font-size:12px;font-weight:700}dialog .close{font-family:GamePixel,monospace;font-size:26px;font-weight:900;line-height:1}
@media(max-width:650px){
 header{flex-wrap:nowrap;gap:10px}.icon-btn,#sound{font-size:8px;padding:9px 8px;margin-left:auto}
 .system button{font-size:8px;padding:8px 9px}.actions button span{font-size:6px}.screen-meta{font-size:7px}
 footer div{gap:16px}footer button#help{font-size:9px;padding:10px 14px}
 dialog{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;margin:16px;padding:24px 20px}
 dialog dl{grid-template-columns:1fr;gap:0}dialog dd{margin-bottom:7px}
}
@media(max-width:360px) and (orientation:portrait){
 .dpad{gap:6px}.dpad button{width:46px}.actions{gap:8px}.actions button{width:42px;height:42px}.actions .special{width:32px!important;height:32px!important}.system button{font-size:8px;padding:8px 6px}
 .actions button span{top:48px}.special span{top:38px!important}
}
@media(orientation:landscape) and (max-height:600px){
 #sound{font-size:9px;padding:8px 10px;min-height:34px;box-shadow:2px 2px 0 #0005}
 .system button{font-size:9px;padding:8px 10px;min-width:78px}.actions button{font-size:clamp(28px,9dvh,40px)}
 .actions .special{font-size:24px!important}.controller button{box-shadow:0 3px 0 #07182088}
}

@font-face{font-family:TitleCondensed;src:url('title-black.woff') format('woff');font-weight:900;font-display:swap}
@font-face{font-family:TitleCondensed;src:url('title-semibold.woff') format('woff');font-weight:600;font-display:swap}
header .wordmark,header .wordmark b{font-family:TitleCondensed,sans-serif;font-size:29px;font-weight:900;letter-spacing:-1px;-webkit-text-stroke:0}
header .edition,header .edition i{font-family:TitleCondensed,sans-serif;font-weight:600;font-size:14px;letter-spacing:2px}header .edition i{letter-spacing:0}
@media(max-width:650px){header .wordmark,header .wordmark b{font-size:24px}header .edition{font-size:10px;letter-spacing:1px}}

@media(max-width:360px) and (orientation:portrait){header .edition{display:none}}

/* Creator credit at the bottom of the game UI. */
footer{flex-wrap:wrap;row-gap:6px;padding-top:8px}footer .game-credit{flex:0 0 100%;margin:0;text-align:center;font-family:Arcade8,GamePixel,monospace;font-size:9px;font-weight:400;line-height:1.4;letter-spacing:-.35px;color:#d7e2de;-webkit-text-stroke:0}

header #sound{margin-left:auto}

footer .rotate-hint{flex:0 0 100%;margin:0;padding:0;text-align:center;font-family:Arcade8,GamePixel,monospace;font-size:clamp(11px,2.8vw,14px);font-weight:700;line-height:1.45;letter-spacing:-.35px;color:#ffd638;text-shadow:2px 2px 0 #071820;-webkit-text-stroke:.3px currentColor}

.rotate-phone-icon{display:block;width:32px;height:32px;margin:0 auto 4px;filter:drop-shadow(2px 2px 0 #071820)}
