/* Mobile HUD items occupy layout rows instead of competing absolute offsets. */
:root{--game-safe-top:env(safe-area-inset-top,0px);--game-safe-right:env(safe-area-inset-right,0px);--game-safe-bottom:env(safe-area-inset-bottom,0px);--game-safe-left:env(safe-area-inset-left,0px)}
@media(max-width:700px),(max-width:900px) and (orientation:portrait),(max-width:960px) and (max-height:530px) and (orientation:landscape){
 html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .masthead{position:fixed;inset:max(8px,var(--game-safe-top)) max(10px,var(--game-safe-right)) auto max(10px,var(--game-safe-left));height:58px;padding:0 12px;gap:10px;flex-wrap:nowrap;min-width:0;border-radius:14px}
 .masthead .brand img{width:65px;height:44px}
 .masthead .arcade-label,.masthead .header-level{display:none}
 .masthead .header-stats{min-width:0;margin-left:auto;gap:5px;font-size:11px;letter-spacing:0}
 .masthead .header-stats>span{gap:5px;white-space:nowrap}
 .masthead .header-stats>span>span{font-size:19px}
 .masthead nav{gap:0;margin:0;flex:0 0 auto}
 .masthead .leaderboard-nav{min-width:44px;min-height:44px;padding:8px}
 .masthead .leaderboard-nav span{display:none}
 .cinematic-stage{position:relative;isolation:isolate;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(12px,1fr) auto auto auto;grid-template-areas:'toolbar' 'story' '.' 'navigation' 'mission' 'dock';align-content:start;gap:10px;height:100svh;height:100dvh;min-height:0;padding:calc(max(8px,var(--game-safe-top)) + 68px) max(12px,var(--game-safe-right)) max(10px,var(--game-safe-bottom)) max(12px,var(--game-safe-left));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;scrollbar-width:thin;background:#111724}
 .cinematic-stage>.world-shell{display:contents;position:static;inset:auto;height:auto;min-height:0;overflow:visible;border:0;background:none;box-shadow:none}
 .cinematic-stage .drive-environment,.cinematic-stage .mission-scene,.cinematic-stage .scene-vignette,.cinematic-stage .road-motion{position:absolute;inset:0;transform:none;pointer-events:none}
 .cinematic-stage #drive-world{position:absolute;inset:0;width:100%;height:100svh;height:100dvh;pointer-events:none}
 .cinematic-stage .scene-vignette{background:linear-gradient(180deg,#0c12264d,transparent 45%,#0c122655),linear-gradient(90deg,#10152244,transparent)}
 .cinematic-stage .world-toolbar{position:relative;inset:auto;grid-area:toolbar;justify-self:end;display:flex;align-items:center;justify-content:flex-end;width:auto;max-width:100%;height:44px;gap:8px;margin:0;padding:0;border:0;background:none;z-index:4}
 .cinematic-stage .world-toolbar>span:nth-child(2){display:none}
 .cinematic-stage .world-toolbar .signal{font-size:8px;margin:0;padding:4px 6px}
 .cinematic-stage .world-toolbar #radio-toggle{min-height:44px;min-width:120px;padding:8px 10px;font-size:11px}
 .cinematic-stage .world-toolbar #pause{width:44px;height:44px;min-width:44px;min-height:44px;font-size:17px}
 .cinematic-stage .scene-intro{position:relative;inset:auto;grid-area:story;align-self:start;min-width:0;width:auto;max-width:none;margin:0;padding:0;z-index:3}
 .cinematic-stage .scene-intro .eyebrow{font-size:8px;line-height:1.5;letter-spacing:.7px;overflow-wrap:anywhere}
 .cinematic-stage .scene-intro .scene-time{display:none}
 .cinematic-stage .scene-intro h1{max-width:none;margin:7px 0 9px;font-size:clamp(32px,9vw,46px);line-height:.96;overflow-wrap:break-word}
 .cinematic-stage .scene-intro p{display:block;max-width:100%;margin:0;padding:0;font-size:12px;line-height:1.5}
 .cinematic-stage .story-dispatch{width:100%;max-width:none;min-height:64px;margin:12px 0 0;padding:10px 12px;gap:10px}
 .cinematic-stage .story-dispatch .dispatch-label{font-size:8px;line-height:1.5;letter-spacing:.6px}
 .cinematic-stage .story-dispatch strong{font-size:22px;line-height:1.15;margin-top:2px}
 .cinematic-stage .story-dispatch small{font-size:11px;line-height:1.45;margin-top:4px}
 .cinematic-stage .story-dispatch .dispatch-icon{width:30px;height:32px;font-size:22px;flex:0 0 30px}
 .cinematic-stage .story-dispatch .dispatch-arrow{font-size:25px;flex:0 0 12px}
 .cinematic-stage .navigation-map,.cinematic-stage.story-arrived[data-scene-kind='interior'] .navigation-map{position:relative;inset:auto;grid-area:navigation;justify-self:start;align-self:center;width:88px;height:88px;min-width:0;margin:0;transform:none;opacity:1;z-index:3}
 .cinematic-stage .navigation-map .world-viewport{width:100%;height:100%}
 .cinematic-stage .navigation-map .map-badge{display:none}
 .cinematic-stage .navigation-map .map-coordinate{top:auto;bottom:9px;left:50%;font-size:5px;padding:3px;transform:translateX(-50%)}
 .cinematic-stage .navigation-map .map-north{top:8px;right:14px;font-size:6px}
 .cinematic-stage .navigation-map .map-expand>span{right:0;bottom:0;width:28px;height:28px;font-size:19px}
 .cinematic-stage .travel-readout,.cinematic-stage[data-opening-drive='true'] .travel-readout{position:relative;inset:auto;grid-area:navigation;justify-self:end;align-self:center;width:230px;max-width:calc(100% - 106px);margin:0;padding:11px 12px;transform:none;text-align:left;z-index:3}
 .cinematic-stage #travel-readout[hidden]{display:none!important}
 .cinematic-stage .travel-readout>span{font-size:9px;line-height:1.5;letter-spacing:.5px}
 .cinematic-stage .travel-readout small{font-size:8px;line-height:1.5;letter-spacing:.3px}
 .cinematic-stage>.quest-sidebar{position:relative;inset:auto;grid-area:mission;align-self:stretch;min-width:0;width:auto;max-width:none;min-height:0;max-height:none;margin:0;padding:13px 14px;overflow:visible;border-radius:14px;z-index:4}
 .cinematic-stage>.quest-sidebar>.next-mission{margin:0;padding:0;border:0}
 .cinematic-stage .next-mission-heading{gap:10px}
 .cinematic-stage .next-mission-heading .destination-art{width:34px;height:37px;flex:0 0 34px}
 .cinematic-stage .next-mission-heading .destination-art svg{width:24px;height:24px}
 .cinematic-stage .next-mission .micro{font-size:8px;line-height:1.5;letter-spacing:1.3px}
 .cinematic-stage .next-mission h2{font-size:27px;line-height:1.05;margin-top:3px;overflow-wrap:anywhere}
 .cinematic-stage .next-mission>p{display:none}
 .cinematic-stage .guided-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:9px;padding:0}
 .cinematic-stage .guided-controls .ride-status{display:block;min-height:0;flex:0 0 auto}
 .cinematic-stage .guided-controls .ride-status strong{display:block;font-size:11px;line-height:1.4}
 .cinematic-stage .guided-controls .main-button{min-height:46px;height:auto;padding:10px 12px;font-size:19px;line-height:1.25;white-space:normal}
 .cinematic-stage>.game-dock{position:relative;inset:auto;grid-area:dock;justify-self:stretch;display:flex;justify-content:space-around;width:auto;max-width:none;min-width:0;margin:0;padding:4px 8px;gap:0;transform:none;border-radius:14px;z-index:4}
 .cinematic-stage .game-dock button{flex:1;min-width:0;min-height:50px;padding:4px 5px;gap:3px}
 .cinematic-stage .game-dock button>span:last-child{font-size:10px;line-height:1.4}
 .cinematic-stage .game-dock svg{width:22px;height:22px;margin:0}
 .cinematic-stage .world-tutorial{display:none}
 .scene-loading .world-shell:after{content:none}
 .scene-loading .cinematic-stage:after{content:'RESTORING YOUR MISSION…';position:absolute;inset:45% 20px auto;text-align:center;font:600 12px/1.5 var(--sans);letter-spacing:2px;color:#e6c69d;pointer-events:none;z-index:4}
}
/* Browser chrome reduces usable height: shorten secondary copy before sacrificing space. */
@media(max-width:900px) and (max-height:760px) and (orientation:portrait){
 .cinematic-stage{gap:8px}
 .cinematic-stage .scene-intro p{display:none}
 .cinematic-stage .story-dispatch{min-height:52px;margin-top:9px;padding:8px 10px}
 .cinematic-stage .story-dispatch small{display:none}
 .cinematic-stage .story-dispatch strong{font-size:21px}
 .cinematic-stage .navigation-map,.cinematic-stage.story-arrived[data-scene-kind='interior'] .navigation-map{width:76px;height:76px}
}
@media(max-width:700px) and (max-height:650px) and (orientation:portrait){
 .masthead{height:50px}
 .masthead .brand img{width:55px;height:38px}
 .cinematic-stage{padding-top:calc(max(8px,var(--game-safe-top)) + 58px);gap:6px;grid-template-rows:auto auto minmax(4px,1fr) auto auto auto}
 .cinematic-stage .world-toolbar{height:44px}
 .cinematic-stage .world-toolbar #radio-toggle,.cinematic-stage .world-toolbar #pause{min-height:44px;height:44px}
 .cinematic-stage .scene-intro .eyebrow{display:none}
 .cinematic-stage .scene-intro h1{font-size:32px;margin:2px 0 7px}
 .cinematic-stage .story-dispatch{min-height:44px;margin-top:6px;padding:7px 10px}
 .cinematic-stage .story-dispatch .dispatch-icon,.cinematic-stage .story-dispatch .dispatch-label{display:none}
 .cinematic-stage .story-dispatch strong{font-size:20px;margin:0}
 .cinematic-stage .navigation-map,.cinematic-stage.story-arrived[data-scene-kind='interior'] .navigation-map{width:60px;height:60px}
 .cinematic-stage>.quest-sidebar{padding:10px 12px}
 .cinematic-stage .next-mission h2{font-size:24px}
 .cinematic-stage .next-mission-heading .destination-art{width:30px;height:32px;flex-basis:30px}
 .cinematic-stage .guided-controls{margin-top:7px;gap:6px}
 .cinematic-stage .guided-controls .ride-status{display:none}
 .cinematic-stage .guided-controls .main-button{min-height:44px;font-size:18px;padding:8px 10px}
 .cinematic-stage .game-dock button{min-height:44px}
 .cinematic-stage .game-dock svg{width:20px;height:20px}
}
/* A wide phone has two content columns and a separate bottom app row. */
@media(max-width:960px) and (max-height:530px) and (orientation:landscape){
 .masthead{height:45px;inset:max(6px,var(--game-safe-top)) max(12px,var(--game-safe-right)) auto max(12px,var(--game-safe-left))}
 .masthead .brand img{width:49px;height:33px}
 .cinematic-stage{grid-template-columns:minmax(0,1fr) minmax(240px,36%);grid-template-rows:auto auto auto auto;grid-template-areas:'toolbar toolbar' 'story mission' 'navigation mission' 'dock dock';gap:7px 18px;padding-top:calc(max(6px,var(--game-safe-top)) + 53px)}
 .cinematic-stage .world-toolbar{height:44px}
 .cinematic-stage .world-toolbar #radio-toggle,.cinematic-stage .world-toolbar #pause{min-height:44px;height:44px}
 .cinematic-stage .scene-intro{align-self:center}
 .cinematic-stage .scene-intro .eyebrow,.cinematic-stage .scene-intro p{display:none}
 .cinematic-stage .scene-intro h1{font-size:31px;margin:0 0 7px}
 .cinematic-stage .story-dispatch{min-height:44px;margin:5px 0 0;padding:7px 10px}
 .cinematic-stage .story-dispatch .dispatch-label,.cinematic-stage .story-dispatch small,.cinematic-stage .story-dispatch .dispatch-icon{display:none}
 .cinematic-stage .story-dispatch strong{font-size:20px;margin:0}
 .cinematic-stage .navigation-map,.cinematic-stage.story-arrived[data-scene-kind='interior'] .navigation-map{width:62px;height:62px}
 .cinematic-stage>.quest-sidebar{align-self:center;padding:13px}
 .cinematic-stage .next-mission h2{font-size:26px}
 .cinematic-stage .guided-controls .ride-status strong{font-size:10px}
 .cinematic-stage>.game-dock{justify-self:center;width:360px;max-width:100%;padding:3px 8px}
 .cinematic-stage .game-dock button{min-height:44px}
 .cinematic-stage .game-dock svg{width:20px;height:20px}
}