/* Keep navigation, status and touch input in separate safe-area lanes. */
/* Let Safari's changing toolbars and physical rotation resize the display.
   No CSS rotation or orientation lock: pointer coordinates stay in screen space. */
@supports(height:100dvh){
 body.touch-mode,body.touch-mode #game-canvas,body.touch-mode #hud{height:100dvh}
}
#office-graphics-recovery{position:fixed;inset:0;z-index:100000;background:#08170feb;display:grid;place-items:center;padding:24px;text-align:center}
#office-graphics-recovery>div{max-width:440px;display:grid;gap:18px}
#office-graphics-recovery button{font:inherit;background:#b9ef68;color:#14210b;border:0;border-radius:12px;padding:16px;cursor:pointer}
#office-graphics-recovery a{color:#dceccf;padding:12px}
body.touch-mode{--touch-size:112px;--safe-bottom:max(12px,env(safe-area-inset-bottom));--safe-left:max(12px,env(safe-area-inset-left));--safe-right:max(12px,env(safe-area-inset-right))}
.touch-mode #hud .hud-top{padding:calc(8px + env(safe-area-inset-top)) var(--safe-right) 0 var(--safe-left);gap:8px;grid-template-columns:minmax(0,1fr) auto}
.touch-mode .hud-title{font-size:13px;max-width:65vw;line-height:1.3}
.touch-mode .hud-day{font-size:10px}
.touch-mode #world-clock{font-size:10px!important;margin-top:0!important}
.touch-mode .hud-right{gap:4px}
.touch-mode .score-hud,.touch-mode .threat-hud,.touch-mode .prog-hud{padding:4px 7px;font-size:10px;gap:4px}
.touch-mode .threat-hud-label,.touch-mode .prog-label{display:none}
.touch-mode .threat-hud-bar{width:42px}
.touch-mode #mission-objective{max-width:min(54vw,290px)!important;font-size:10px!important;line-height:1.3!important;padding:6px 8px!important;margin-top:4px!important}
.touch-mode #joystick{left:var(--safe-left);bottom:var(--safe-bottom);width:var(--touch-size);height:var(--touch-size);z-index:30}
.touch-mode #joy-stick{width:46px;height:46px}
.touch-mode #btn-interact{right:var(--safe-right);bottom:calc(var(--safe-bottom) + 12px);width:68px;height:68px;z-index:30}
.touch-mode #hud .menu-bar{top:auto;bottom:calc(var(--safe-bottom) + 22px);left:calc(var(--safe-left) + var(--touch-size) + 10px);right:calc(var(--safe-right) + 78px);transform:none;gap:6px;max-width:none;flex-wrap:wrap;justify-content:center}
.touch-mode .menu-btn{min-width:44px;min-height:44px;padding:10px;justify-content:center}
.touch-mode #hud .minimap.office-minimap{right:var(--safe-right);bottom:auto;top:calc(92px + env(safe-area-inset-top));width:112px;height:112px}
.touch-mode #hud .minimap.office-minimap.is-expanded{top:calc(12px + env(safe-area-inset-top));bottom:calc(var(--touch-size) + var(--safe-bottom) + 16px);width:calc(100vw - var(--safe-left) - var(--safe-right));height:auto;max-height:440px}
.touch-mode .office-minimap-toggle{min-width:44px!important;min-height:36px!important}
.touch-mode .controls-hint{display:none!important}
.touch-mode #hud .hud-bottom{bottom:calc(var(--touch-size) + var(--safe-bottom) + 8px);padding:0 var(--safe-right) 0 var(--safe-left)}
.touch-mode .interact-hint{font-size:11px;padding:7px 9px;max-width:100%}
.touch-mode .interact-hint .key{display:none}
.touch-mode .npc-dialog{bottom:calc(var(--touch-size) + var(--safe-bottom) + 46px);max-width:min(340px,calc(100vw - 28px));padding:10px 12px;font-size:12px}
body.touch-mode #audio-toggle.office-audio-toggle{right:var(--safe-right)!important;bottom:calc(var(--safe-bottom) + 90px)!important;width:44px!important;height:44px!important;min-width:44px;min-height:44px}
.touch-mode .toast-game{bottom:calc(var(--touch-size) + var(--safe-bottom) + 8px);max-width:calc(100vw - 28px)}
.touch-mode.touch-blocked #joystick,.touch-mode.touch-blocked #btn-interact{visibility:hidden;pointer-events:none}
@media(max-height:520px){
 body.touch-mode{--touch-size:96px}
 .touch-mode #hud .minimap.office-minimap{top:calc(8px + env(safe-area-inset-top));right:calc(var(--safe-right) + 100px);width:96px;height:96px}
 .touch-mode #hud .minimap.office-minimap.is-expanded{right:var(--safe-right);top:8px;width:min(480px,calc(100vw - 140px));bottom:116px;height:auto}
 .touch-mode #mission-objective{max-width:min(42vw,290px)!important}
 .touch-mode .hud-title{font-size:12px}
 .touch-mode .npc-dialog{bottom:112px;max-width:45vw}
}