/* Phone presentation only. Desktop Unity menus and their layout remain original. */
#mobile-game-overlay { position:absolute; inset:0; z-index:12; pointer-events:none; color:#f0fbff; font:16px/1.4 system-ui,sans-serif; display:flex;flex-direction:column;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 55px) max(12px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 156px) max(12px,env(safe-area-inset-left,0px)); }
#mobile-game-overlay[hidden],#mobile-game-overlay [hidden] { display:none!important; }
#mobile-game-overlay::before { content:"";position:absolute;inset:0;pointer-events:none; }
#mobile-game-overlay.pressure-warning::before { box-shadow:inset 0 0 0 5px #ffb24e9c; }
#mobile-game-overlay.pressure-critical::before { box-shadow:inset 0 0 0 7px #ff3939c4;animation:pressure-edge 1s ease-in-out infinite alternate; }
#mobile-game-overlay.reduced-motion::before { animation:none; }
@keyframes pressure-edge { to { opacity:.45; } }
.mobile-hud-stack { display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;max-width:700px;flex:none; }
.mobile-status { display:flex;justify-content:center;flex-wrap:wrap;gap:2px 10px;width:100%;margin:auto;padding:3px 8px;border-radius:8px;background:#001723ad;text-shadow:0 1px 3px #000;font-size:14px;line-height:1.5; }
.mobile-stat { white-space:nowrap; }
/* The gauge lives inside the existing pressure item: no new row or overlay. */
.pressure-stat { position:relative; }
.pressure-gauge { position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;border-radius:2px;background:#80dce735;pointer-events:none; }
.pressure-gauge-fill { display:block;position:relative;height:100%;overflow:hidden;background:#87e9ed; }
.pressure-stat[data-pressure-venting=true] .pressure-gauge-fill::after { content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#efffff,transparent);animation:pressure-flow 1.2s linear infinite;animation-delay:var(--pressure-flow-offset,0ms); }
.pressure-stat[data-pressure-stable=true] { color:#a9f4e2; }
.pressure-stat[data-pressure-stable=true] .pressure-gauge { background:#a9f4e2; }
.pressure-stat[data-pressure-alert=true] .pressure-gauge-fill { background:#ffb38c; }
#mobile-game-overlay.reduced-motion .pressure-gauge-fill::after { animation:none;transform:none; }
#mobile-game-overlay:not([data-screen=playing]) .pressure-gauge-fill::after { animation:none;transform:none; }
@keyframes pressure-flow { to { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { .pressure-gauge-fill::after { animation:none!important;transform:none!important; } }
.mobile-warning { max-width:95%;text-align:center;color:#ffdb8a;font-size:14px;line-height:1.4;text-shadow:0 1px 3px #000,0 1px 5px #000; }
.pressure-critical .mobile-warning { color:#ffaaa4;font-weight:700; }
.mobile-objective { max-width:95%;text-align:center;font-size:14px;line-height:1.4;color:#eafaff;text-shadow:0 1px 3px #000,0 1px 5px #000; }
.mobile-menu { position:absolute;inset:calc(env(safe-area-inset-top,0px) + 58px) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));max-width:760px;max-height:660px;margin:auto;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;border:1px solid #62e7edaa;border-radius:14px;background:#071822f5;box-shadow:0 8px 40px #0008;text-align:left;touch-action:pan-y;overscroll-behavior:contain; }
.mobile-menu-title { flex:none;font-size:clamp(20px,3vw,26px);line-height:1.15;padding:14px 16px 10px;margin:0;border-bottom:1px solid #78e9ed35; }
.mobile-menu-body { flex:1;min-height:0;overflow-y:auto;padding:10px 16px;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin; }
.mobile-menu-body p { margin:0 0 10px;font-size:16px;line-height:1.4; }
.mobile-menu-instructions { margin:0 0 12px;padding-left:21px; }
.mobile-menu-instructions li { margin-bottom:8px; }
.mobile-menu-stats { display:flex;flex-wrap:wrap;gap:4px 16px;border-top:1px solid #78e9ed35;padding-top:10px; }
.mobile-menu-stats p { margin:0; }
.mobile-menu-actions { flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-top:1px solid #78e9ed35;background:#092330; }
.mobile-menu-actions button { flex:1 1 120px; }
.mobile-menu button { min-height:48px;min-width:48px;border-radius:9px;border:1px solid #66c5d0;padding:10px 12px;font:600 16px/1.25 system-ui,sans-serif;color:#f5feff;background:#123948;touch-action:manipulation; }
.mobile-menu button:focus-visible,.mobile-menu-body:focus-visible { outline:3px solid #fff;outline-offset:-3px; }
.mobile-menu button:disabled { opacity:.5; }
.mobile-menu-actions button:first-child:not(:disabled) { background:#087783;border-color:#8cffff; }
.mobile-menu-settings { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.mobile-setting { text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px; }
.mobile-setting::after { content:"OFF";color:#a4bbc5;font-size:14px; }
.mobile-setting[aria-pressed=true]::after { content:"ON";color:#60ffb1; }
.mobile-banner { position:relative;inset:auto;flex-shrink:1;width:100%;min-height:90px;max-height:240px;margin:0 auto;background:#071822dd; }
.mobile-banner .mobile-menu-title { font-size:18px;padding:8px 12px; }
.mobile-banner .mobile-menu-body { padding:6px 12px; }
.mobile-banner .mobile-menu-body p { margin-bottom:4px; }
.mobile-banner .mobile-menu-actions { padding:6px 10px; }
#game-stage:has(#mobile-game-overlay[data-modal=true]:not([hidden])) .touch-directions,
#game-stage:has(#mobile-game-overlay[data-modal=true]:not([hidden])) .touch-actions { visibility:hidden; }
@media (orientation:landscape) and (max-height:540px) {
 .mobile-menu { max-height:none; }
 .mobile-menu-title { padding:9px 14px;font-size:20px; }
 .mobile-menu-actions { padding:7px 12px; }
 .mobile-menu-body { padding:8px 14px; }
 .mobile-menu-instructions { columns:2;column-gap:30px; }
 .mobile-menu-instructions li { break-inside:avoid; }
 .mobile-banner { width:calc(100% - 360px);max-width:460px;height:150px;max-height:150px;flex:none; }
 .mobile-banner .mobile-menu-title { display:none; }
}
@media (max-width:420px) {
 .mobile-menu-settings { grid-template-columns:1fr; }
 .mobile-menu-actions { gap:6px; }
 .mobile-menu-actions button { flex-basis:42%; }
 .mobile-status { gap:2px 8px;font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { #mobile-game-overlay::before { animation:none!important; } }

/* Only phone landscape: reserve a thin HUD strip OUTSIDE the rendered world.
   Menus still use the original full-size overlay, and all touch targets stay put. */
.landscape-hud { display:none; }
@media (orientation:landscape) and (max-height:540px) {
 body.touch-enabled.game-open #game-wrap { --landscape-hud-height:calc(64px + env(safe-area-inset-top,0px)); }
 body.touch-enabled.game-open #unity-canvas { position:absolute;top:var(--landscape-hud-height);left:0;width:100%;height:calc(100% - var(--landscape-hud-height)); }
 #mobile-game-overlay[data-screen=playing] .mobile-hud-stack { display:none; }
 #mobile-game-overlay[data-screen=playing] .landscape-hud { display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(3px + env(safe-area-inset-top,0px));left:calc(140px + max(8px,env(safe-area-inset-left,0px)));right:calc(164px + max(8px,env(safe-area-inset-right,0px)));height:58px;overflow:hidden;text-align:center;pointer-events:none; }
 .landscape-stats { display:flex;flex-direction:column;gap:1px;font:600 13px/18px system-ui,sans-serif;font-variant-numeric:tabular-nums; }
 .landscape-stat-row { display:flex;justify-content:space-around;gap:3px; }
 .landscape-stats span { white-space:nowrap; }
 .landscape-stats [data-alert=true] { color:#ffb38c; }
 .landscape-notice { height:18px;flex:none;font:13px/18px system-ui,sans-serif;white-space:nowrap;color:#d6f7fb; }
 .landscape-notice[data-kind=urgent] { color:#ffd08b;font-weight:650; }
}

/* Touch enabled is the mobile-mode switch, including touch on a large screen.
   Keep keyboard/desktop presentation unchanged and retain the reserved HUD strip. */
body.touch-enabled.game-open #mobile-game-overlay { font-size:20px; }
body.touch-enabled.game-open .mobile-status,
body.touch-enabled.game-open .mobile-warning,
body.touch-enabled.game-open .mobile-objective { font-size:17.5px; }
body.touch-enabled.game-open .mobile-menu-title { font-size:clamp(25px,3.75vw,32.5px); }
body.touch-enabled.game-open .mobile-menu-body p,
body.touch-enabled.game-open .mobile-menu button { font-size:20px; }
body.touch-enabled.game-open .mobile-setting::after { font-size:17.5px; }
body.touch-enabled.game-open .mobile-banner .mobile-menu-title { font-size:22.5px; }
/* The safe room and portal stay visible below a dedicated, non-overlapping
   header. This applies only to nonmodal touch sanctuary/transfer screens. */
body.touch-enabled.game-open #game-wrap:has(#mobile-game-overlay[data-sanctuary=true]:not([hidden])) #unity-canvas { position:absolute;top:calc(112px + env(safe-area-inset-top,0px));left:0;width:100%;height:calc(100% - 112px - env(safe-area-inset-top,0px)); }
body.touch-enabled.game-open #game-stage:has(#mobile-game-overlay[data-sanctuary=true]:not([hidden])) .rotate-hint { display:none; }
body.touch-enabled.game-open .mobile-sanctuary { position:absolute;top:calc(56px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none; }
body.touch-enabled.game-open .mobile-sanctuary-copy { display:flex;flex-direction:column;min-width:0;font-size:16px;line-height:20px;color:#eafaff; }
body.touch-enabled.game-open .mobile-sanctuary-copy strong { font-size:16px;line-height:20px; }
body.touch-enabled.game-open .mobile-sanctuary button { flex:none;min-width:96px;min-height:44px;padding:8px 10px;border:1px solid #66c5d0;border-radius:9px;background:#123948;color:#f5feff;font:600 16px/1.25 system-ui,sans-serif;pointer-events:auto;touch-action:manipulation; }
@media (orientation:landscape) and (max-height:540px) {
 body.touch-enabled.game-open .mobile-menu-title { font-size:25px; }
 body.touch-enabled.game-open #mobile-game-overlay[data-screen=playing] .landscape-hud { top:calc(2px + env(safe-area-inset-top,0px));height:60px; }
 body.touch-enabled.game-open .landscape-stats { font-size:16px;line-height:19px; }
 body.touch-enabled.game-open .landscape-notice { font-size:16px;line-height:19px;height:19px; }
}
