*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#101522;color:#fff0cb;font-family:Verdana,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#stage{position:absolute;inset:0;overflow:hidden}canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;outline:none}button{font:700 15px Verdana;color:#ffefd0;background:#283c48;border:2px solid #c9af79;border-radius:4px;padding:12px 20px;box-shadow:0 4px #0c151e;touch-action:none;cursor:pointer}button:focus-visible{outline:3px solid #76e7cd;outline-offset:3px}button:active,.pressed{transform:translateY(2px);background:#417a78}button:disabled{opacity:.5}#tools{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));display:flex;gap:6px;z-index:4}#tools button{padding:7px 10px;background:#15232bea}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0a12263d;padding:14px;z-index:3}#panel{width:min(620px,96%);max-height:94%;overflow-y:auto;background:#152431f2;border:3px solid #c5a16b;box-shadow:0 0 0 5px #273a48,0 16px 50px #0009;padding:25px;text-align:center;touch-action:pan-y}h1{font-size:clamp(28px,5vw,48px);letter-spacing:1px;margin:10px 0;color:#ffe6a3;text-shadow:0 4px #805835}h2{margin:12px 0;color:#ade8d5}p{font-size:14px;line-height:1.6;color:#c8d8dc}.tag{font-size:12px;letter-spacing:3px;color:#8ce6d2}.primary{background:#307b70;color:#fff5d4;font-size:19px}.row{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}#touch{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:space-between;pointer-events:none;z-index:2}#touch button{pointer-events:auto;min-width:60px;height:58px;padding:4px;background:#213d4de0;font-size:24px;touch-action:none}#touch .directions,#touch .actions{display:flex;align-items:center;gap:8px}.directions>div{display:flex;gap:6px}#touch .actions button{width:74px;background:#35695be8;font-size:14px}.initials{display:flex;justify-content:center;gap:18px}.initials>div{display:grid;gap:5px}.initials b{font:900 32px monospace;padding:4px;border:2px solid transparent}.initials b.selected{border-color:#8ae8cd}.initials button{padding:5px 16px}#records{font:16px monospace;line-height:1.8}.recordrow{display:flex;justify-content:space-between;border-bottom:1px solid #3d5260}#status{min-height:22px}#coverThumb{width:100%;max-height:200px;object-fit:cover;image-rendering:pixelated;border:1px solid #ac946b}[hidden]{display:none!important}@media(max-height:500px){#panel{padding:12px;max-width:640px}#coverThumb{display:none}h1{font-size:30px;margin:4px}p{margin:7px}.row{margin:8px}#touch button{height:48px;min-width:52px}#touch .actions button{width:65px}}@media(pointer:coarse) and (min-width:700px){#touch button{height:70px;min-width:76px}#touch .actions button{width:88px}}

#tools{top:max(64px,env(safe-area-inset-top));gap:4px}#tools button{font:700 15px monospace;padding:5px 8px;border-width:1px;background:#091426d9;box-shadow:0 2px #020611}
#touch button{border:2px solid #877655;border-bottom:5px solid #3c332a;border-radius:10px;background:linear-gradient(#334454,#152437);box-shadow:0 2px 0 #060d19,inset 0 1px #cbb68b55;font-family:monospace;color:#f9e5b8;font-size:32px}#touch .actions button{background:linear-gradient(#377f7b,#1d454f);border-color:#78b2a1;border-bottom-color:#16363e;font-family:monospace;letter-spacing:1px}#touch .pressed{background:#648e94;transform:translateY(3px);border-bottom-width:2px}
@media(pointer:coarse){#stage{bottom:84px;overflow:visible}#touch{bottom:-76px}#overlay{bottom:0}#touch button,#touch .actions button{height:60px}}
@media(max-width:480px){#touch button{min-width:45px;width:45px;height:56px}.directions>div,#touch .directions,#touch .actions{gap:5px}#touch .actions button{width:62px;font-size:12px}#touch{left:8px;right:8px}#tools button{padding:5px 7px}}
@media(pointer:coarse) and (max-height:500px){#stage{bottom:0}#touch{bottom:8px}#touch button{opacity:.85;height:46px}#touch .actions button{height:46px}}

/* Arcade controls: one thumb on the cross, the other on the staggered actions. */
#touch{--pad:clamp(44px,7vw,58px);align-items:center;bottom:max(14px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
#touch .directions{display:grid;grid-template:repeat(3,var(--pad))/repeat(3,var(--pad));gap:3px;position:relative;filter:drop-shadow(0 5px 3px #0008)}
#touch .directions>div{display:contents}
#touch .directions::before{content:"";grid-area:2/2;background:#172a39;border:1px solid #635b45;border-radius:8px;box-shadow:inset 0 2px 10px #0008}
#touch [data-key="up"]{grid-area:1/2;border-radius:14px 14px 5px 5px}
#touch [data-key="down"]{grid-area:3/2;border-radius:5px 5px 14px 14px}
#touch [data-key="left"]{grid-area:2/1;border-radius:14px 5px 5px 14px}
#touch [data-key="right"]{grid-area:2/3;border-radius:5px 14px 14px 5px}
#touch .directions button{min-width:0;width:var(--pad);height:var(--pad);padding:0;font-size:28px;opacity:1}
#touch .actions{display:flex;gap:14px;align-items:center;padding-top:25px}
#touch .actions button{width:clamp(66px,10vw,82px);height:clamp(66px,10vw,82px);min-width:0;border-radius:50%;font-size:12px;letter-spacing:0;border-width:3px;border-bottom-width:7px;box-shadow:0 5px 0 #08131b,0 8px 15px #0007,inset 0 3px #ffffff26;opacity:1}
#touch #attack{margin-top:-58px;background:linear-gradient(#a76a41,#653921);border-color:#e2b379;border-bottom-color:#482918}
#touch #jump{background:linear-gradient(#3e9b95,#225b69)}
#touch button.pressed{transform:translateY(4px);filter:brightness(1.35);border-bottom-width:2px}
@media(pointer:coarse) and (min-height:501px){#stage{bottom:calc(190px + env(safe-area-inset-bottom));overflow:visible}#touch{bottom:calc(-180px - env(safe-area-inset-bottom))}}
@media(max-height:500px){#touch{--pad:42px;bottom:8px}#touch .actions{gap:14px;padding-top:24px}#touch .actions button{width:64px;height:64px}#touch #attack{margin-top:-42px}}
@media(max-width:360px){#touch{--pad:42px;left:8px;right:8px}#touch .actions{gap:8px}#touch .actions button{width:60px;height:60px;font-size:11px}}