:root{color-scheme:dark;--ink:#111;--paper:#f3f3f3;--yellow:#fff;--red:#999}
*{box-sizing:border-box}
body{margin:0;background:#101010;color:var(--paper);font-family:Arial,"Noto Sans JP",sans-serif;min-height:100dvh;display:grid;place-items:center}
a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid #fff;outline-offset:5px}
.cabinet{width:min(960px,96vw);padding:20px 28px;border-left:1px solid #444;border-right:1px solid #444}
header{display:flex;align-items:center;gap:24px;margin-bottom:18px}
.wordmark{font-family:Impact,"Arial Black",sans-serif;font-size:32px;letter-spacing:-1px;line-height:1;color:#fff;text-decoration:none;transform:rotate(-2deg)}
.wordmark span{display:block;font-family:monospace;font-size:12px;font-weight:bold;letter-spacing:8px;padding:6px 0 0 3px}
.edition{flex:1;color:#aaa;font-size:12px;letter-spacing:2px}
.edition b{color:#fff}
.display{max-width:810px;margin:auto}
.bezel{position:relative;padding:6px;background:#ddd;border:1px solid #fff;box-shadow:0 0 0 5px #242424}
canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;image-rendering:pixelated;image-rendering:crisp-edges;background:#080808;outline:0;touch-action:none}
#loading{position:absolute;inset:6px;display:grid;place-items:center;background:#111;color:#fff;font-family:monospace;font-weight:bold;font-size:17px;letter-spacing:2px}
.screen-meta{display:flex;justify-content:space-between;padding:14px 0 8px;font-size:10px;font-family:monospace;letter-spacing:1px;color:#aaa}
#game{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;touch-action:none}
footer{border-top:1px solid #444;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#aaa;font-size:12px}
footer div{display:flex;gap:22px;flex-shrink:0}
footer a{font:inherit;background:none;border:0;color:#eee;text-decoration:none;padding:6px 0}
kbd{font:inherit;padding:0 3px}
dialog{width:min(510px,92vw);max-height:90dvh;overflow:auto;background:#eee;color:#151515;border:3px solid #111;outline:1px solid #ddd;padding:30px;font-size:15px;line-height:1.9}
dialog::backdrop{background:#000b}
dialog h1{font-size:25px}
.eyebrow{font-family:monospace;letter-spacing:2px;font-size:12px}
dl{display:grid;grid-template-columns:1fr 1.3fr;font-size:14px}
dd{margin:0}
.credit{border-top:1px solid #aaa;padding-top:15px;font-size:12px}
.cabinet:fullscreen{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;background:#101010}
.cabinet:fullscreen .display{width:min(105vh,90vw)}
.cabinet:fullscreen header,.cabinet:fullscreen footer{display:none}
@media(min-width:900px) and (max-height:900px){.cabinet{max-width:810px;padding:14px 24px}
.display{max-width:660px}
header{margin-bottom:12px}}
@media(max-width:650px){.cabinet{width:100%;padding:14px 12px 20px;border:0}
header{gap:12px;margin-bottom:20px}
.wordmark{font-size:27px}
.edition{font-size:10px;letter-spacing:1px}
.screen-meta{font-size:9px;letter-spacing:0}
footer{justify-content:center}
footer>span{display:none}
footer div{gap:35px}}
.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}
.landscape-fullscreen{font-size:11px;padding:7px 10px;min-height:34px;border-radius:18px;opacity:.82}
.landscape-fullscreen{display:block;font-size:18px}
dialog{max-height:90dvh;overflow:auto;z-index:10}}
.cabinet{touch-action:none}
dialog{touch-action:pan-y}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
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}
@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}
.screen-meta,.eyebrow,#loading{font-family:Arcade8,GamePixel,monospace;font-weight:400;letter-spacing:0}
.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}
#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}
@media(max-width:650px){header{flex-wrap:nowrap;gap:10px}
.screen-meta{font-size:7px}
footer div{gap:16px}
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}}
header .wordmark{font-family:Impact,"Arial Black",sans-serif;font-size:32px;font-weight:700;letter-spacing:-1px;-webkit-text-stroke:0}
header .wordmark span{font-family:monospace;font-size:12px;font-weight:bold;letter-spacing:8px}
header .edition,header .edition b{font-family:Arial,sans-serif;font-size:12px;letter-spacing:2px;font-weight:400}
header .edition b{font-weight:700}
@media(max-width:650px){header .wordmark{font-size:27px}
header .edition,header .edition b{font-size:10px;letter-spacing:1px}}
@media(max-width:360px) and (orientation:portrait){header .edition{display:none}}
/* Exact ELLYLAND button styles, including all responsive states. */
.controller{--red:#f0573c;--yellow:#ffd538}
button{--yellow:#ffd538}
button{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.icon-btn{background:transparent;color:#d7e2de;border:1px solid #718089;border-radius:5px;padding:9px 14px;font-weight:700;letter-spacing:1px}
.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 button{background:none;border:0;color:#e7ddbd;font-size:12px;text-decoration:none;padding:0}
dialog .close{position:absolute;right:15px;top:10px;border:0;background:none;color:#152b36;font-size:30px}
@media(min-width:900px) and (max-height:850px){.controller{padding:3px 12px 22px}}
@media(max-width:650px){.icon-btn{font-size:10px;padding:7px}
.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}}
.controller,.controller *{ -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;}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse), (orientation:landscape) and (max-height:520px){#sound{font-size:11px;padding:7px 10px;min-height:34px;border-radius:18px;opacity:.82}
.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}}
button,.icon-btn,.system button,.actions button,.actions button span,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}
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}
dialog .close{font-family:GamePixel,monospace;font-size:26px;font-weight:900;line-height:1}
@media(max-width:650px){.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}
footer button#help{font-size:9px;padding:10px 14px}}
@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}}

/* 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)}

/* Embedded browser: size against the visible viewport, never intrinsic content width. */
html{width:100%;overflow-x:clip}
body{width:min(100%,var(--view-width,100vw));max-width:100%;grid-template-columns:minmax(0,1fr);overflow-x:clip}
.cabinet{min-width:0;max-width:100%;width:min(960px,100%)}
header,.display,.bezel,.controller,footer{min-width:0;max-width:100%}
.display{width:100%}
#game{max-width:100%}
.compact-view header{gap:8px;flex-wrap:wrap}
.compact-view header .wordmark{font-size:clamp(20px,6vw,27px)}
.compact-view #sound{font-size:8px;padding:9px 6px;margin-left:auto;flex-shrink:0}
.compact-view .controller{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);gap:6px;padding:24px 0 32px}
.compact-view .dpad{gap:5px;min-width:0}
.compact-view .dpad button{width:calc((100% - 5px)/2);min-width:0;max-width:53px;padding:0;height:57px}
.compact-view .system{flex-direction:column;gap:7px;padding:0}
.compact-view .system button{font-size:7px;padding:8px 5px}
.compact-view .actions{gap:6px;justify-content:flex-end;min-width:0}
.compact-view .actions button{width:clamp(34px,11vw,49px);height:clamp(34px,11vw,49px);flex-shrink:1;padding:0;font-size:22px}
.compact-view .actions .special{width:30px!important;height:30px!important;min-width:25px;font-size:18px!important}
.compact-view footer div{flex-shrink:1;flex-wrap:wrap;justify-content:center}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse), (orientation:landscape) and (max-height:520px){
 body,.cabinet{width:var(--view-width,100vw);height:var(--view-height,100dvh)}
 .display,.cabinet:fullscreen .display{width:min(var(--view-width,100vw),calc(var(--view-height,100dvh)*1.5));height:min(var(--view-height,100dvh),calc(var(--view-width,100vw)*.6666667))}
}
.compact-view .actions button{min-width:0;width:clamp(26px,calc(var(--view-width,100vw)*.11),49px);height:clamp(26px,calc(var(--view-width,100vw)*.11),49px);font-size:clamp(16px,calc(var(--view-width,100vw)*.06),22px)}
.compact-view footer .rotate-hint{font-size:clamp(8px,calc(var(--view-width,100vw)*.027),14px);overflow-wrap:anywhere}
.compact-view footer .game-credit{font-size:clamp(6px,calc(var(--view-width,100vw)*.023),9px);overflow-wrap:anywhere}

/* Portrait webviews may have much less height than a standalone Safari tab. */
html.fit-portrait,html.fit-portrait body{height:var(--view-height,100dvh);min-height:0;overflow:hidden}
.fit-portrait body{display:block;position:fixed;left:var(--view-left,0px);top:var(--view-top,0px);margin:0;padding:0;width:var(--view-width,100vw)}
.fit-portrait .cabinet{position:absolute;left:50%;top:50%;inset:auto;width:var(--view-width,100vw);max-width:none;height:auto;min-height:0;margin:0;padding:12px;border:0;transform:translate(-50%,-50%) scale(var(--cabinet-scale,1));transform-origin:center center}
.fit-portrait .cabinet{left:50%;top:50%}
.fit-portrait header{margin-bottom:12px}
.fit-portrait .display{width:100%;height:auto;max-width:810px}
.fit-portrait .bezel{height:auto}
.fit-portrait #game{width:100%;height:auto;aspect-ratio:3/2}
.fit-portrait .controller{padding-top:18px;padding-bottom:28px}
.fit-portrait footer{padding-top:6px}
.fit-portrait dialog{max-height:calc(var(--view-height,100dvh) - 24px)}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse), (orientation:landscape) and (max-height:520px){
 .cabinet{left:var(--view-left,0px);top:var(--view-top,0px);right:auto;bottom:auto;--control-size:clamp(48px,calc(var(--view-height,100dvh)*.22),100px)}
 .actions .special{--special-size:clamp(36px,calc(var(--view-height,100dvh)*.16),72px)}
}