/* iPhone Safari and home-screen layouts: fixed board, flexible safe areas. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding:0}
#account-gate{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));height:var(--game-viewport-height,100dvh)}
.account-card{align-self:safe center}
.account-card input{font-size:16px}
.map-view{padding-top:max(8px,env(safe-area-inset-top))}
.journey-dock{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media(max-height:550px) and (orientation:landscape){
 .game-view .game-status{padding:3px 5px;margin-bottom:4px}
 .game-view .topbar{height:30px;min-height:30px;margin-bottom:3px}
 .game-view .hud{height:60px}
 .game-view .metric.moves .metric-value{font-size:28px;margin-top:1px}
 .game-view .metric.collect>.crop{height:29px;width:30px}
 .game-view .metric.collect .metric-value{font-size:14px}
 .game-view .metric{padding:4px}
 .game-view .boosters{margin-top:4px;gap:8px}
 .game-view .booster{height:44px;min-height:44px;width:48px}
 .game-view .booster>.icon{height:28px;width:28px}
}

/* CSS dynamic viewport remains authoritative if Safari delays its resize event. */
html,body{height:100vh;height:100dvh}