:root{color-scheme:dark;font-family:Consolas,monospace;background:#040b1a;color:#b9d9f4}body{margin:0}main{padding:18px 12px;text-align:center;min-width:640px}canvas{display:block;margin:auto;background:#071226;image-rendering:pixelated;image-rendering:crisp-edges;outline:none}canvas:focus-visible{outline:2px solid #ffe044;outline-offset:3px}.controls{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}button{font:inherit;color:#ffe044;background:#0a2146;border:2px solid #00d0e6;padding:8px 14px;cursor:pointer}button:hover,button:focus-visible{background:#173d70;outline:2px solid #ffe044}p{font-size:13px;line-height:1.65;margin:12px auto;max-width:940px}strong{color:#ffe044}#status{color:#64eea3}
.scores{max-width:940px;margin:20px auto;padding:12px;border:3px solid #00d0e6;box-shadow:inset 0 0 0 3px #173d70;background:#071226}.scores h2{font-size:20px;letter-spacing:3px;color:#ffe044;margin:8px}.scores label{display:flex;gap:10px;align-items:center}.scores input,.scores select{font:inherit;padding:8px;color:#ffe044;background:#0a2146;border:2px solid #00d0e6}.scores input{width:4ch;text-transform:uppercase}.scores table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}.scores th{color:#ffe044}.scores th,.scores td{padding:8px;border-bottom:1px solid #173d70}.scores tr:first-child td{color:#64eea3}#save-status{color:#64eea3}
#game-screen:fullscreen{display:grid;place-items:center;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden;background:#000}
#game-screen::backdrop{background:#000}
#game-screen:fullscreen canvas{margin:0;outline:none}

/* Phone layout keeps the complete 16:9 canvas. Landscape controls overlay corners. */
[hidden]{display:none!important}*{box-sizing:border-box}main{min-width:0;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))}
canvas{max-width:100%;height:auto;touch-action:none}button{min-height:44px}button:disabled{opacity:.45;cursor:default}
#game-screen{position:relative;width:100%;max-width:none;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.primary{gap:6px;margin:8px auto}.primary button{padding:7px 10px}#build-notes{max-width:980px;margin:auto}#build-toggle[aria-expanded=true]{background:#173d70}
.controller-panel{border:2px solid #00d0e6;margin:16px auto;padding:12px}#controller-mapping{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}#controller-mapping>div{display:flex;align-items:center;gap:8px;justify-content:space-between}#controller-mapping button{font-size:12px;max-width:170px}#controller-status{color:#64eea3}
.scores{overflow-x:auto}.scores table{min-width:540px}
#game-row{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%}
.touch-side{display:none;flex-direction:column;justify-content:space-evenly;gap:12px;width:64px;flex:0 0 64px;align-self:stretch}
.touch-side button{font-size:11px;min-height:46px;padding:4px 1px;touch-action:none}
#touch-controls{display:none;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:960px;user-select:none;touch-action:none;background:#040b1a}
#touch-dpad{display:grid;place-items:center;width:176px;height:152px;flex:0 0 176px;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:24px;background:#08162a}
.dpad{display:grid;grid-template:repeat(3,38px)/repeat(3,38px);filter:drop-shadow(0 4px 0 #000)}
.dpad button,.dpad-center{min-height:0;border:0;background:#16395a;color:#a6eeff;padding:0;font-size:23px;outline:none}
.dpad button:focus-visible{outline:2px solid #ffe044;z-index:1}
.dpad button[data-dpad-dir=ArrowUp]{grid-area:1/2;border-top:3px solid #00d0e6;border-radius:5px 5px 0 0}
.dpad button[data-dpad-dir=ArrowLeft]{grid-area:2/1;border-left:3px solid #00d0e6;border-radius:5px 0 0 5px}
.dpad-center{grid-area:2/2;position:relative}.dpad-center:after{content:'';position:absolute;inset:12px;border-radius:50%;background:#08162a}
.dpad button[data-dpad-dir=ArrowRight]{grid-area:2/3;border-right:3px solid #00d0e6;border-radius:0 5px 5px 0}
.dpad button[data-dpad-dir=ArrowDown]{grid-area:3/2;border-bottom:3px solid #00d0e6;border-radius:0 0 5px 5px}
#touch-dpad[data-direction=ArrowUp] [data-dpad-dir=ArrowUp],#touch-dpad[data-direction=ArrowDown] [data-dpad-dir=ArrowDown],#touch-dpad[data-direction=ArrowLeft] [data-dpad-dir=ArrowLeft],#touch-dpad[data-direction=ArrowRight] [data-dpad-dir=ArrowRight]{background:#28788b;color:#ffe044}
.touch-actions{display:flex;gap:16px;align-items:center;padding:8px}
.touch-actions>div{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:72px}.touch-actions>div:last-child{transform:translateY(-8px)}
.touch-actions .round-action{border-radius:50%;width:68px;height:68px;padding:0;background:rgba(100,25,65,.22);border:3px solid rgba(255,138,167,.8);color:#fff3be;text-shadow:0 1px 3px #000,0 -1px 3px #000;box-shadow:0 3px 0 rgba(25,5,25,.22);font:bold 28px Consolas,monospace;touch-action:none}
.touch-actions .round-action:active{background:rgba(200,50,85,.38);transform:translateY(3px);box-shadow:0 1px 0 rgba(25,5,25,.22)}.touch-actions span{font-size:10px;color:#a6eeff;text-shadow:0 1px 3px #000}
#touch-boxes{font-size:10px;padding:4px}
#game-screen.force-touch #touch-controls,#game-screen.force-touch .touch-side{display:flex}#game-screen.force-touch #touch-dpad{display:grid}
#initials-entry{position:absolute;bottom:30%;background:#071226;border:2px solid #00d0e6;padding:8px;max-width:95%;font-size:13px}#mobile-initials{width:4em;font:18px Consolas,monospace;text-transform:uppercase}
#game-screen:fullscreen{display:flex;flex-direction:column;justify-content:center;max-width:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#game-screen.force-touch #initials-entry{bottom:150px}
#touch-mode{font:inherit;color:#ffe044;background:#0a2146;border:2px solid #00d0e6;padding:8px;min-height:44px}
@media(max-width:430px){.touch-side{width:44px;flex-basis:44px}.touch-side button{font-size:9px;min-height:44px}#game-row{gap:3px}#touch-dpad{width:132px;height:140px;flex-basis:132px}.dpad{grid-template:repeat(3,34px)/repeat(3,34px)}.touch-actions{gap:9px;padding:4px}.touch-actions>div{min-width:60px}.touch-actions .round-action{width:58px;height:58px}.touch-actions span{font-size:8px}.primary button{font-size:11px;padding:5px 7px}p{font-size:12px}#touch-boxes{font-size:8px;padding:1px}}
@media(orientation:landscape) and (max-height:540px){#touch-dpad{height:112px;width:170px;flex-basis:170px}.dpad{grid-template:repeat(3,32px)/repeat(3,32px)}.touch-actions .round-action{width:62px;height:62px}.touch-actions{gap:24px}.touch-side{gap:8px}#touch-controls{max-width:800px}}
#build-toggle{display:list-item;list-style-position:inside;width:max-content;margin:8px auto;padding:10px 16px;border:2px solid #00d0e6;color:#ffe044;background:#0a2146;cursor:pointer;min-height:44px}#build-notes[open]>summary{background:#173d70}#build-toggle:focus-visible{outline:2px solid #ffe044}
@media(max-width:430px){#touch-controls{flex-wrap:wrap}}
/* No side gutters or bottom control row: enlarge the game and float the
   same broad thumb hit areas over its lower corners, inside safe areas. */
#game-screen.raised-controls #game-row{position:relative;width:100%;padding:0}
#game-screen.raised-controls .touch-side{position:absolute;top:6px;height:100px;gap:8px;justify-content:space-between;z-index:3;opacity:.82}
#game-screen.raised-controls #touch-left{left:6px;height:auto;justify-content:flex-start}
#game-screen.raised-controls #touch-right{right:6px}
#game-screen.raised-controls #touch-controls{position:absolute;left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));bottom:calc(var(--thumb-lift) + env(safe-area-inset-bottom));width:auto;max-width:none;background:transparent;pointer-events:none;z-index:4}
#game-screen.raised-controls #touch-dpad,#game-screen.raised-controls .touch-actions,#game-screen.raised-controls #touch-boxes{pointer-events:auto}
#game-screen.raised-controls #touch-boxes{align-self:stretch;background:#0a2146cc;flex:none}
#game-screen.raised-controls #touch-dpad{width:148px;flex-basis:148px;background:#08162a55}
#game-screen.raised-controls .touch-actions{width:172px;flex:0 0 172px;padding:4px;gap:12px;justify-content:space-between}
#game-screen.raised-controls .touch-actions>div{min-width:64px}
#game-screen.raised-controls .touch-actions span{font-size:8px}
#game-screen.raised-controls .touch-actions{opacity:1}
#story-controls{position:absolute;top:38px;left:50%;transform:translateX(-50%);z-index:6}#story-controls[hidden]{display:none}#story-controls button{font-size:10px;padding:5px 9px;min-height:32px;background:#07162bcc}
#initials-entry{z-index:10}
/* Treat the entire game surface (including gaps and side labels) as controls,
   not a selectable document. Keep the surrounding Build Notes scrollable. */
#game-screen,#game-screen *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game-screen{touch-action:none;overscroll-behavior:contain}
#game-screen[data-input="pointer"] #game:focus,#game-screen[data-input="pointer"] #game:focus-visible,#game-screen[data-input="pointer"] button:focus,#game-screen[data-input="pointer"] button:focus-visible,#game-screen[data-input="pointer"] button:hover{outline:none}
#game-screen input,#game-screen textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;touch-action:manipulation}
/* Pause/settings stays inside fullscreen while supporting native touch scrolling. */
#game-screen.menu-open{touch-action:pan-y}
#pause-menu[hidden]{display:none}
#pause-shade[hidden]{display:none}
#pause-shade{position:fixed;inset:0;z-index:49;background:#000b;touch-action:none}
#pause-menu{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:14px 20px;background:#07162b;border:3px solid #00d0e6;box-shadow:0 0 0 100vmax #000b;color:#a6eeff;touch-action:pan-y;overscroll-behavior:contain;text-align:center}
#pause-menu h2{margin:0 0 10px;color:#ffe044;font-size:22px}#pause-menu p{font-size:13px;line-height:1.5;margin:8px 0}#pause-menu>div{display:grid;gap:8px}#pause-menu button{font:16px Consolas,monospace;min-height:44px;white-space:normal;text-align:left;padding:10px 14px}
#game-screen #pause-menu button:focus,#game-screen #pause-menu button:focus-visible{outline:3px solid #ffe044;outline-offset:-3px;background:#173d70}
@media(max-height:500px){#pause-menu{padding:10px 16px}#pause-menu>div{grid-template-columns:repeat(2,minmax(0,1fr))}#pause-menu h2{font-size:18px}#pause-menu button{font-size:13px}}
/* App management does not resize/rearrange the approved game controls. */
#app-panel{max-width:940px;margin:10px auto;border:1px solid #173d70;padding:8px}#app-panel summary{cursor:pointer;color:#a6eeff;min-height:28px}#app-status{color:#64eea3}
#app-update{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:30;max-width:80%;width:max-content;background:#071226f5;border:2px solid #00d0e6;padding:8px;font-size:12px;box-shadow:0 2px 12px #000}#app-update button{font-size:12px;margin:4px;padding:4px 8px}
