/* One shared rectangle for the canvas and all thumb controls. */
@media (pointer:coarse){
 html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 #world,#hud,#motorway,#game-scene{inset:auto;top:0;left:0;width:var(--game-width,100vw);height:var(--game-height,100svh)}
 #hud,#world,#motorway,#game-scene{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 #hud button:active,.drive-controls button:active{transform:none}
 input:not([type=checkbox]):not([type=radio]),select,textarea,.chat-panel input{font-size:16px!important}
 dialog,.chat-panel{overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
 .mobile-keyboard #hud,.mobile-keyboard #motorway,.mobile-keyboard .rotate-device{visibility:hidden!important}
 .mobile-keyboard .chat-panel{position:fixed;top:calc(var(--visual-top,0px) + 4px);bottom:auto;left:4px;right:4px;width:auto;height:calc(var(--visual-height,100dvh) - 8px);max-height:none}
 .mobile-keyboard dialog{max-height:calc(var(--visual-height,100dvh) - 12px);top:calc(var(--visual-top,0px) + 6px);bottom:auto;margin:0 auto}
 .mobile-dock,dialog::backdrop{backdrop-filter:none}
 /* Safari's layout viewport may extend under its bottom toolbar. Anchor thumb
    controls to the visual viewport instead, so every control remains tappable. */
 .touch-controls{position:fixed;top:var(--visual-top,0px);left:0;width:var(--game-width,100vw);height:var(--visual-height,100svh);overflow:visible}
 body[data-mobile-orientation=landscape] .rotate-device{display:none!important}
 body[data-mobile-orientation=landscape] .drive-steer{position:fixed;top:calc(var(--visual-top,0px) + var(--visual-height,100svh) - 116px - env(safe-area-inset-bottom));bottom:auto;left:calc(14px + env(safe-area-inset-left))}
 body[data-mobile-orientation=landscape] .drive-pedals{position:fixed;top:calc(var(--visual-top,0px) + var(--visual-height,100svh) - 112px - env(safe-area-inset-bottom));bottom:auto;right:calc(14px + env(safe-area-inset-right));grid-template-columns:repeat(3,58px);gap:6px}
 body[data-mobile-orientation=landscape] .drive-controls button{min-width:54px;min-height:48px}
 body[data-mobile-orientation=landscape] .vehicle-hud{left:calc(160px + env(safe-area-inset-left))!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;width:150px;max-width:150px;max-height:155px;padding:7px}
 body[data-mobile-orientation=landscape] .vehicle-hud #repair-guide{display:none!important}
 body[data-mobile-orientation=landscape] .vehicle-hud #radio-button{min-height:48px;padding:5px;font-size:12px}
 body[data-mobile-orientation=landscape] #wanted-level{top:44px;max-width:44vw}
 body[data-mobile-orientation=landscape] #wanted-level strong{font-size:20px}
 body.driving .quickbar{display:none}
}

/* Compact geometry depends on the available screen, not the pointing device.
   Left movement, center tools and right actions have separate bottom areas;
   the gesture popup sits above them. Keep the map and chat in one right rail. */
@media (max-width:960px) and (max-height:560px), (pointer:coarse) and (orientation:landscape){
 body{
  --control-target:48px;
  --compact-top:calc(var(--visual-top,0px) + 8px + env(safe-area-inset-top));
  --compact-bottom:calc(var(--visual-top,0px) + var(--visual-height,100dvh) - env(safe-area-inset-bottom));
  --compact-left:calc(14px + env(safe-area-inset-left));
  --compact-right:calc(14px + env(safe-area-inset-right));
  --compact-center:calc((var(--game-width,100vw) + env(safe-area-inset-left) - env(safe-area-inset-right))/2);
  --compact-rail:110px;
 }
 body #hud button,body #panel button,body .chat-panel button,body .chat-panel select,body .language-control select{min-width:var(--control-target);min-height:var(--control-target)}
 body #hud .vehicle-hud button{min-width:var(--control-target);min-height:var(--control-target)}
 body.playing .language-control,body .desktop-hint{display:none}
 body .hud-top{top:var(--compact-top);left:var(--compact-left);right:calc(var(--compact-right) + var(--compact-rail) + 8px);gap:6px;align-items:center}
 body .profile-button{padding:3px}
 body .profile-button img{width:38px;height:38px}
 body .profile-button span,body .hud-wallet small,body .hud-wallet>span{display:none}
 body .hud-wallet{padding:5px 8px}
 body .hud-wallet strong{font-size:.93rem;margin:0}
 body .hud-actions{display:flex!important;margin-left:0;gap:4px}
 body .hud-actions button:not(#menu-button):not(#fullscreen-button){display:none!important}
 body .hud-actions button{padding:5px 8px}
 body .world-info{position:fixed;top:var(--compact-top);left:calc(260px + env(safe-area-inset-left));right:calc(var(--compact-right) + var(--compact-rail) + 8px);bottom:auto;max-width:none;min-height:48px;padding:5px 6px;gap:5px;flex-direction:row;align-items:center;font-size:.625rem}
 body .world-info #location-name,body .world-info #legal-status{display:none}
 body .mission-hud{top:calc(var(--compact-top) + 56px);left:var(--compact-left);width:min(225px,34vw);padding:8px 10px}
 body .mission-hud>p:not(:first-child),body .mission-stage,body .gps{display:none}
 body .mission-hud h2{margin:3px 0 0;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body .mission-hud .bank-shortcut{margin-top:6px;padding:6px 8px;font-size:.75rem}
 body #bank-due:empty{display:none}
 body .minimap-button{position:fixed;display:block;top:var(--compact-top);right:var(--compact-right);bottom:auto;width:var(--compact-rail);height:var(--compact-rail)}
 body .online-button,body .mobile-dock{position:fixed;top:calc(var(--compact-top) + var(--compact-rail) + 6px);right:var(--compact-right);bottom:auto;left:auto;width:var(--compact-rail);max-width:var(--compact-rail);transform:none}
 body .online-button{min-height:48px;padding:6px;font-size:.6875rem;overflow-wrap:anywhere}
 body .mobile-dock{display:grid;grid-template-columns:repeat(2,minmax(48px,1fr));gap:4px;min-height:0;padding:4px;border:1px solid #9cb7b841;border-radius:9px;background:#0d2733e8}
 body .mobile-dock button{display:none;min-width:48px;min-height:48px;padding:3px;font-size:.625rem}
 body .mobile-dock #mobile-chat,body .mobile-dock #mobile-menu{display:flex}
 body .mobile-dock button::before{font-size:.8rem}
 body .joystick{position:fixed;top:calc(var(--compact-bottom) - 102px);bottom:auto;left:calc(17px + env(safe-area-inset-left));width:88px;height:88px}
 body .joystick>div{left:26px;top:26px;width:36px;height:36px}
 body .joystick>span{display:none}
 body .touch-actions{position:fixed;top:calc(var(--compact-bottom) - 116px);bottom:auto;right:var(--compact-right);display:grid;grid-template-columns:repeat(2,48px);gap:6px;align-items:center}
 body .touch-actions button,body .touch-actions #touch-work{width:48px;min-width:48px;height:48px;min-height:48px;padding:4px}
 body .touch-actions span{font-size:.625rem}
 body .quickbar{position:fixed;top:calc(var(--compact-bottom) - 64px);bottom:auto;left:var(--compact-center);transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));width:326px;max-width:calc(var(--game-width,100vw) - 236px - env(safe-area-inset-left) - env(safe-area-inset-right));height:58px;gap:4px;padding:4px;overflow-x:auto}
 body .quickbar button{min-width:48px;min-height:48px;padding:4px}
 body .quickbar kbd{font-size:.625rem;margin-bottom:2px}
 body .quickbar span{font-size:.65rem}
 body .character-actions{position:fixed;top:calc(var(--compact-bottom) - 182px);bottom:auto;left:var(--compact-center);right:auto;transform:translateX(-50%);width:378px;max-width:calc(var(--game-width,100vw) - 264px - env(safe-area-inset-left) - env(safe-area-inset-right));display:grid;grid-template-columns:repeat(3,minmax(48px,1fr));gap:6px;padding:5px;border:1px solid #afc4cb66;border-radius:10px;background:#102934f5;z-index:4}
 body .character-actions button{min-width:48px;min-height:48px;padding:6px;font-size:.8125rem}
 body .character-actions kbd{display:none}
 body .interaction{position:fixed;top:calc(var(--compact-bottom) - 118px);bottom:auto;left:var(--compact-center);min-width:0;width:326px;max-width:calc(var(--game-width,100vw) - 236px - env(safe-area-inset-left) - env(safe-area-inset-right));min-height:48px;padding:5px 8px;gap:8px}
 body .interaction strong{font-size:.75rem;line-height:1.25}
 body .interaction small{font-size:.625rem;line-height:1.2;margin-top:2px}
 body .interaction .key-cap{width:28px;height:28px}
 body .chat-panel>header button{width:48px;height:48px}
}

/* Keep floating speech above the controls and outside the two side rails. */
@media (max-width:960px) and (max-height:560px), (pointer:coarse) and (orientation:landscape){
 body .spoken-dialogue.floating-dialogue{top:auto;bottom:calc(100dvh - var(--visual-top,0px) - var(--visual-height,100dvh) + 126px + env(safe-area-inset-bottom));left:var(--compact-center);width:min(400px,calc(var(--game-width,100vw) - 264px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:104px}
 body .floating-dialogue.dialogue-expanded{max-height:max(100px,calc(var(--visual-height,100dvh) - 200px))}
}

/* Keep the current action readable on small screens without covering the city. */
@media (max-width:960px), (pointer:coarse){
 body .mission-hud{background:transparent;border:0;box-shadow:none;text-shadow:0 1px 3px #000,0 0 5px #000;padding:5px 7px;max-height:none;overflow:visible}
 body .mission-hud h2{white-space:normal;overflow:visible;font-size:.78rem;line-height:1.25;margin:2px 0 3px}
 body .mission-hud #mission-text{display:block;font-size:.7rem;line-height:1.35;color:#fff;margin:0}
 body .mission-hud .bank-shortcut{display:none}
 body .mission-stage{display:none}
}