/* Touch-capable recovery layout only when the 3D handheld cannot load.
   Normal phone/tablet play uses the same full Game Boy as desktop. */
#mobile-play[hidden]{display:none}
#mobile-play{position:fixed;inset:0;z-index:4;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-rows:48px minmax(0,1fr) 226px;gap:12px;color:#e2e4dd;letter-spacing:normal;text-transform:none;font:13px/1.2 system-ui,sans-serif;pointer-events:none;user-select:none;-webkit-user-select:none}
.mobile-ui{min-height:100dvh}
/* The root scroll container owns overscroll, not the fixed WebGL canvas.
   Restore ordinary browser behavior while native dialogs are open. */
html.mobile-game-active,html.mobile-game-active body{overscroll-behavior:none}
.mobile-focused{background:radial-gradient(ellipse at 50% 23%,#283235,#141a20 65%,#10151b)!important}
.mobile-focused #stage,.mobile-focused #screen,.mobile-focused #device-shell-canvas{visibility:hidden!important;pointer-events:none!important}
.mobile-ui #hud{display:none!important}
.mobile-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:auto}
.mobile-wordmark{font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.17em;color:#9dabaa}
.mobile-view-tools{display:flex;gap:6px}
#mobile-play button{appearance:none;-webkit-appearance:none;touch-action:none;-webkit-tap-highlight-color:transparent;border:1px solid #495457;border-radius:12px;background:#293339;color:#dde3dc;font:600 13px/1.2 system-ui,sans-serif;min-height:44px;min-width:44px;cursor:pointer;box-shadow:0 3px 0 #0b1118;pointer-events:auto}
#mobile-play button:focus-visible{outline:3px solid #edca8c;outline-offset:3px}
#mobile-play button:disabled{opacity:.4;cursor:default}
#mobile-play button:not([data-mobile-key]):active,#mobile-play button.is-held{background:#415551;box-shadow:0 1px 0 #0b1118;transform:translateY(2px)}
.mobile-view-tools button{padding:0 12px;color:#becbc7!important;background:transparent!important;border-color:#39464a!important;box-shadow:none!important;font-size:11px!important}
#mobile-fullscreen{padding:10px}
#mobile-fullscreen[hidden]{display:none}
#mobile-fullscreen svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
#mobile-screen-well{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
#mobile-screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%;aspect-ratio:11/10;touch-action:none;pointer-events:auto;background:#091018;outline:6px solid #080d13;box-shadow:0 0 0 7px #3b474a,0 18px 48px #0005;border-radius:1px}
.mobile-deck{display:grid;grid-template-columns:156px minmax(0,1fr);grid-template-rows:160px 50px;column-gap:16px;row-gap:12px;align-items:center;max-width:490px;width:100%;justify-self:center}
#mobile-dpad{width:156px;height:156px;position:relative;pointer-events:auto;touch-action:none;display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);filter:drop-shadow(0 4px 5px #0003)}
#mobile-dpad button{border-radius:7px;min-width:0;box-shadow:0 3px 0 #0b1118;font-size:19px;color:#aebebd}
#mobile-dpad [data-mobile-key="ArrowUp"]{grid-area:1/2;border-bottom:0;border-radius:8px 8px 0 0}
#mobile-dpad [data-mobile-key="ArrowLeft"]{grid-area:2/1;border-right:0;border-radius:8px 0 0 8px}
#mobile-dpad [data-mobile-key="ArrowRight"]{grid-area:2/3;border-left:0;border-radius:0 8px 8px 0}
#mobile-dpad [data-mobile-key="ArrowDown"]{grid-area:3/2;border-top:0;border-radius:0 0 8px 8px}
.mobile-dpad-center{grid-area:2/2;background:#293339;display:grid;place-items:center;color:#52666a;font-size:20px}
.mobile-face-buttons{display:flex;gap:14px;align-items:center;justify-content:flex-end;padding:0 2px 16px 0}
#mobile-play .mobile-a,#mobile-play .mobile-b{width:62px;height:62px;border-radius:50%;font-size:22px;box-shadow:0 5px 0 #070c12,0 9px 15px #0003}
#mobile-play .mobile-a{margin-top:-35px;background:#d0b57d;color:#242e30;border-color:#e1cb98}
#mobile-play .mobile-b{margin-top:32px;background:#34464b;border-color:#536c70}
.mobile-system-buttons{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px}
.mobile-system-buttons button{padding:0 17px;min-width:75px!important;font-size:11px!important;letter-spacing:.08em;text-transform:uppercase}
.mobile-button-caption{font-size:10px;color:#7f9495;text-align:center;margin-top:10px}
.mobile-device #device-shell-canvas{touch-action:pinch-zoom}
#mobile-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Landscape puts thumbs alongside the display, never over the map/dialogue. */
#mobile-play.mobile-landscape{grid-template-rows:44px minmax(0,1fr);gap:8px}
.mobile-landscape #mobile-screen-well{grid-row:2;grid-column:1;padding:0 147px}
.mobile-landscape .mobile-deck{position:absolute;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:calc(100% - max(14px,env(safe-area-inset-left)) - max(14px,env(safe-area-inset-right)));justify-self:start;max-width:none;height:calc(100% - 76px);display:block;pointer-events:none}
.mobile-landscape #mobile-dpad{position:absolute;left:0;top:50%;transform:translateY(-45%);width:144px;height:144px;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
.mobile-landscape .mobile-face-buttons{position:absolute;right:0;top:20%;padding:0;gap:10px}
.mobile-landscape .mobile-system-buttons{position:absolute;right:0;bottom:0;gap:6px;flex-wrap:wrap;max-width:156px}
.mobile-landscape .mobile-system-buttons button{padding:0 7px;min-width:66px!important}
@media(max-width:350px){#mobile-play{padding-left:8px;padding-right:8px;gap:8px;grid-template-rows:44px minmax(0,1fr) 218px}.mobile-wordmark{font-size:9px;letter-spacing:.08em}.mobile-view-tools{gap:4px}.mobile-view-tools button{padding:0 9px}.mobile-deck{column-gap:10px;grid-template-columns:144px 1fr}.mobile-face-buttons{gap:8px}#mobile-play .mobile-a,#mobile-play .mobile-b{width:56px;height:56px}#mobile-dpad{width:144px;height:144px;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}}
/* Short phones reserve space for the display before adding decorative gaps. */
@media(max-height:650px) and (orientation:portrait){#mobile-play{grid-template-rows:44px minmax(0,1fr) 194px;gap:8px}.mobile-deck{grid-template-columns:144px 1fr;grid-template-rows:144px 44px;row-gap:6px}#mobile-dpad{width:144px;height:144px;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}#mobile-play .mobile-a,#mobile-play .mobile-b{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){#mobile-play button{transition:none}}