@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Press+Start+2P&display=swap');:root{font-family:Fredoka,system-ui,sans-serif;color:#fff;background:#101729}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0%,#354263,#101729 70%);min-height:100vh}.shell{max-width:1220px;margin:0 auto;padding:18px}.top{display:flex;align-items:center;gap:18px;justify-content:space-between;margin-bottom:12px}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.brand-icon{font-size:36px}.brand b{font-size:22px;letter-spacing:.4px;color:#ffe18b}.brand small{display:block;font-size:12px;color:#b7c3d8}.hud{display:flex;justify-content:center;gap:7px}.hud>div{background:#202d46;border:2px solid #42516f;border-radius:11px;padding:7px 14px;min-width:105px;text-align:center}.hud small{display:block;color:#9cbed9;font-size:11px;letter-spacing:1px}.hud b{font-size:17px}.hud>div:nth-child(2) b{color:#ffca7c}.hud>div:nth-child(3) b{color:#ff8c98}.sound{background:#354563;color:#fff;border:2px solid #64718b;border-radius:9px;padding:11px;cursor:pointer;font-weight:bold}.gamebox{position:relative;border:5px solid #516588;border-radius:17px;overflow:hidden;background:#84c8ef;box-shadow:0 20px 55px #060b18aa}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#0c1634a8;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.panel{background:#17253deF;border:3px solid #f8dc87;border-radius:20px;padding:25px 36px;max-width:545px;text-align:center;box-shadow:0 12px 0 #101929,0 22px 60px #0008}.tag{display:inline-block;background:#ef8354;color:#2b1521;font-weight:700;letter-spacing:2px;font-size:12px;border-radius:30px;padding:7px 14px}.panel h1{font-size:clamp(37px,5vw,64px);line-height:.95;margin:18px 0;text-shadow:4px 5px 0 #0e1426}.panel em{font-style:normal;color:#ffca65}.panel p{color:#dce5ee;line-height:1.5}.primary{font-family:inherit;font-size:20px;cursor:pointer;background:#f6ca5b;border:0;color:#3c2830;border-radius:13px;padding:13px 25px;box-shadow:0 6px #b87839;font-weight:700}.primary:hover{transform:translateY(2px);box-shadow:0 4px #b87839}.primary span{margin-left:12px}.how{font-size:12px!important;color:#95aac0!important;margin-bottom:0}footer{display:flex;justify-content:space-between;color:#b2bdd3;gap:10px;font-size:13px}footer b{color:#f7d180}.mobile{display:none;justify-content:space-between;margin-top:12px}.mobile button{touch-action:none;user-select:none;-webkit-user-select:none;border:2px solid #6f81a7;background:#304260;color:white;border-radius:12px;font-family:inherit;font-weight:700;padding:17px 20px;min-width:76px;font-size:18px}.move,.actions{display:flex;gap:8px}.actions button{background:#b55f58;border-color:#ffb08c}.actions button:first-child{background:#456c86}@media(max-width:900px){.top{flex-wrap:wrap}.hud{order:3;width:100%;justify-content:space-between}.hud>div{flex:1;min-width:0;padding:5px}.hud b{font-size:14px}.mobile{display:flex}footer{font-size:11px}.shell{padding:8px}.panel{padding:18px;max-width:90%}.panel p{font-size:13px}.how{font-size:10px!important}}@media(max-width:500px){.brand b{font-size:18px}.brand-icon{font-size:27px}.brand small{font-size:10px}.panel h1{font-size:32px;margin:10px 0}.tag{font-size:9px}.primary{font-size:14px;padding:10px}.panel p{margin:8px 0}.how{line-height:1.35!important}.mobile button{min-width:62px;padding:13px;font-size:13px}footer p:last-child{display:none}}

/* Single compact location chooser, visible only when the overlay is open. */
.location-picker{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 17px;max-width:390px}
.location-picker label{font-size:11px;letter-spacing:1.4px;font-weight:700;color:#ffdc8a;white-space:nowrap}
.location-picker select{min-width:0;flex:1;max-width:300px;padding:10px 33px 10px 12px;border:1px solid #748aa5;border-radius:10px;background:#263953;color:#fff;font:600 14px Fredoka,system-ui,sans-serif;cursor:pointer;outline-offset:3px}
.location-picker select:focus-visible{outline:2px solid #ffdc8a}
@media(max-width:500px){.location-picker{gap:6px;margin:9px auto}.location-picker label{font-size:9px}.location-picker select{font-size:11px;padding:7px 9px;max-width:225px}}

/* V2.5: fullscreen responsive layout and mobile touch controls */
.top-actions{display:flex;align-items:center;gap:8px}.top-actions .sound{white-space:nowrap}.gamepad-status{font-size:12px;font-weight:700;color:#ffe18b;white-space:nowrap}
.shell:fullscreen,.shell:-webkit-full-screen,.shell.pseudo-fullscreen{max-width:none;width:100%;height:100dvh;min-height:0;padding:8px;display:flex;flex-direction:column;background:#101729;overflow:hidden}
.shell:fullscreen .top,.shell:-webkit-full-screen .top,.shell.pseudo-fullscreen .top{flex:none;margin-bottom:6px;gap:8px}
.shell:fullscreen .brand img,.shell:-webkit-full-screen .brand img,.shell.pseudo-fullscreen .brand img{max-height:44px;width:auto}
.shell:fullscreen .hud>div,.shell:-webkit-full-screen .hud>div,.shell.pseudo-fullscreen .hud>div{padding:3px 9px}
.shell:fullscreen .hud b,.shell:-webkit-full-screen .hud b,.shell.pseudo-fullscreen .hud b{font-size:13px}
.shell:fullscreen .sound,.shell:-webkit-full-screen .sound,.shell.pseudo-fullscreen .sound{padding:8px}
.shell:fullscreen .gamebox,.shell:-webkit-full-screen .gamebox,.shell.pseudo-fullscreen .gamebox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-radius:8px}
.shell:fullscreen canvas,.shell:-webkit-full-screen canvas,.shell.pseudo-fullscreen canvas{width:100%;height:100%;max-height:100%;max-width:100%;object-fit:contain}
.shell:fullscreen footer,.shell:-webkit-full-screen footer,.shell.pseudo-fullscreen footer{display:none}
.shell:fullscreen .mobile,.shell:-webkit-full-screen .mobile,.shell.pseudo-fullscreen .mobile{flex:none;margin-top:5px;min-height:64px;align-items:center}
.shell:fullscreen .mobile button,.shell:-webkit-full-screen .mobile button,.shell.pseudo-fullscreen .mobile button{min-height:55px;min-width:70px}
@media(pointer:coarse){.shell:fullscreen .mobile,.shell:-webkit-full-screen .mobile,.shell.pseudo-fullscreen .mobile{display:flex}}
@media(max-width:600px){.shell:fullscreen .top,.shell:-webkit-full-screen .top,.shell.pseudo-fullscreen .top{flex-wrap:wrap}.shell:fullscreen .brand,.shell:-webkit-full-screen .brand,.shell.pseudo-fullscreen .brand{display:none}.shell:fullscreen .hud,.shell:-webkit-full-screen .hud,.shell.pseudo-fullscreen .hud{order:0;flex:1;gap:3px}.shell:fullscreen .hud>div,.shell:-webkit-full-screen .hud>div,.shell.pseudo-fullscreen .hud>div{padding:3px 2px}.shell:fullscreen .hud small,.shell:-webkit-full-screen .hud small,.shell.pseudo-fullscreen .hud small{font-size:8px}.shell:fullscreen .hud b,.shell:-webkit-full-screen .hud b,.shell.pseudo-fullscreen .hud b{font-size:10px}.shell:fullscreen .top-actions,.shell:-webkit-full-screen .top-actions,.shell.pseudo-fullscreen .top-actions{gap:3px}.shell:fullscreen .sound,.shell:-webkit-full-screen .sound,.shell.pseudo-fullscreen .sound{font-size:11px;padding:7px}.gamepad-status{display:none}.shell:fullscreen .mobile button,.shell:-webkit-full-screen .mobile button,.shell.pseudo-fullscreen .mobile button{min-height:56px;min-width:60px;padding:10px}}
@media(max-height:430px){.shell:fullscreen .brand,.shell:-webkit-full-screen .brand,.shell.pseudo-fullscreen .brand{display:none}.shell:fullscreen .mobile button,.shell:-webkit-full-screen .mobile button,.shell.pseudo-fullscreen .mobile button{min-height:42px}.shell:fullscreen .mobile,.shell:-webkit-full-screen .mobile,.shell.pseudo-fullscreen .mobile{min-height:45px}.shell:fullscreen .top,.shell:-webkit-full-screen .top,.shell.pseudo-fullscreen .top{margin-bottom:2px}}
/* No native Fullscreen API (notably some iOS browsers): immersive layout fallback. */
.shell.pseudo-fullscreen{position:fixed;inset:0;z-index:1000}