/* Handheld layout, including the iPhone notch and home indicator. Desktop keeps its layout. */
@media (pointer:coarse) and (max-width:1100px) {
  html,body {overscroll-behavior:none;-webkit-text-size-adjust:100%}
  button,a,select {touch-action:manipulation}
  input,select,textarea {font-size:16px!important}
  body.first-playable>header {height:calc(48px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  body.first-playable>.world-shell {height:calc(100dvh - 48px - env(safe-area-inset-top));min-height:0}
  body.first-cinematic>.world-shell {height:100dvh}
  .first-playable>header .brand {font-size:12px;gap:7px}
  .first-playable>header .brandmark {width:28px;height:28px;font-size:18px}
  .first-playable>header #character-profile {font-size:11px;padding:6px;min-width:0}
  .first-playable>header #character-title,.first-playable>header #avatar,.first-playable>header .brand-sub {display:none}
  .first-playable>header #xp {font-size:12px;white-space:nowrap}
  body.first-playable .world-top {left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));top:8px;max-width:none}
  body.first-playable .town-toolbar {max-width:100%;gap:6px}
  body.first-playable .town-toolbar button {min-height:44px;padding:8px 12px;font-size:12px}
  .town-toolbar kbd,.first-playable .madrid-clock {display:none}
  body.first-playable .touch-pad {display:grid;left:max(12px,env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px;z-index:26}
  .touch-pad button {min-height:44px;-webkit-user-select:none;-webkit-touch-callout:none}
  body.first-playable .bottom-hud {bottom:calc(120px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:25}
  body.first-playable .bottom-hud button {min-height:48px;max-width:min(420px,100%);font-size:13px}
  .mobile-actions {position:absolute;right:max(12px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,70px);gap:6px;z-index:26;touch-action:none}
  .mobile-actions button {min-height:44px;border:1px solid #d6c48f;border-bottom:3px solid #718775;border-radius:8px;background:#fff7e9ee;color:#294d43;font:600 12px system-ui;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}
  #mobile-camera {grid-column:1 / -1}
  .mobile-actions button:active,#mobile-run[aria-pressed=true] {background:#e5c483}
  .town-modal-open .mobile-actions,.town-modal-open .touch-pad {visibility:hidden}
  body.first-playable .minimap-panel {width:88px;top:68px;bottom:auto;right:max(12px,env(safe-area-inset-right))}
  body.first-playable .minimap-panel canvas {height:75px}
  body.first-playable .minimap-panel button {display:none}
  #first-task,.first-playable #current-activity {top:66px;left:max(10px,env(safe-area-inset-left));width:calc(100% - 118px);max-width:270px;max-height:calc(100% - 245px);overflow:auto;padding:10px}
  #first-task b {font-size:15px}
  #first-task button {min-height:36px}
  #first-task.minimized,.first-playable #current-activity.minimized {width:calc(100% - 118px)}
  #town-object-info {left:max(10px,env(safe-area-inset-left));top:66px;width:calc(100% - 118px);max-width:270px;max-height:calc(100% - 245px)}
  #town-notifications {bottom:calc(179px + env(safe-area-inset-bottom));left:12px;width:calc(100% - 24px);max-width:350px;transform:none}
  dialog {max-width:calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overscroll-behavior:contain}
  dialog :is(button,a.button) {min-height:44px}
  .welcome-dialog,.first-dialog {padding:18px}
  .welcome-dialog h2 {font-size:24px}
  .title-screen {padding:calc(62px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) calc(35px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));align-items:start}
  .title-center {padding:8px 0}
  .town-wordmark {margin-left:0;margin-right:0}
  .title-clock {top:calc(12px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
  .title-foot {position:static;justify-content:center;grid-column:1;font-size:9px;margin-top:20px}
  .title-tagline {margin:20px auto}
  .title-player {margin-top:18px!important}
  #title-quit,#session-quit {display:none!important}
  #places-dialog {padding:16px}
  .places-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .places-grid button {min-width:0}
  #cinema-skip {right:max(12px,env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top))}
  .cinema-caption {left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:calc(35px + env(safe-area-inset-bottom))}
}
@media (pointer:coarse) and (max-height:500px) {
  .first-playable .minimap-panel {display:none}
  #first-task,.first-playable #current-activity,#town-object-info {max-width:230px;max-height:calc(100% - 170px)}
  body.first-playable .bottom-hud {left:170px;right:175px;bottom:calc(20px + env(safe-area-inset-bottom))}
  #town-notifications {left:36%;width:32%;bottom:90px}
  .title-screen {padding-top:calc(48px + env(safe-area-inset-top))}
  .town-wordmark {font-size:40px}
  .cinema-caption h2 {font-size:23px}
}
.mobile-actions {visibility:hidden}
.town-mobile .mobile-actions {visibility:visible}
body.at-title .mobile-actions,body.first-cinematic .mobile-actions,body.town-modal-open .mobile-actions {visibility:hidden}