/* Compact HUD: the street stays visible between the top status strip and thumbs. */
.wordmark,.top-actions,.icon-btn { flex-shrink:0; white-space:nowrap; }
.top-actions { gap:8px; }
#hud { pointer-events:none; }
.pause-overview { display:flex; align-items:center; gap:18px; margin:12px 0 20px; }
#pause-summary { flex:1; margin:0; white-space:pre-line; }
#pause-map { width:78px; height:90px; border:1px solid #ffffff30; border-radius:6px; }
#sound-pause { margin-bottom:4px; }
.touch-help { display:none; }

@media (max-width:760px), (pointer:coarse), (max-width:950px) and (max-height:550px) {
  #app { height:100dvh; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); }
  .topbar { height:calc(48px + var(--safe-top)); padding:var(--safe-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); gap:8px; }
  .wordmark { font-size:23px; letter-spacing:-1px; gap:5px; }
  .wordmark-small { font-size:14px; }
  .mark { font-size:20px; margin-right:1px; }
  .edition,.build-label { display:none; }
  .icon-btn { min-width:44px; min-height:44px; padding:0 10px; font-size:14px; line-height:1; }
  .icon-btn kbd { display:none; }
  /* Sound remains available in the pause menu during a walk. */
  .playing #sound { display:none; }

  .objective { top:calc(56px + var(--safe-top)); left:max(12px,env(safe-area-inset-left)); width:auto; padding:6px 10px; border-radius:6px; background:#152b22b8; backdrop-filter:blur(6px); box-shadow:none; }
  .objective>.eyebrow,.objective h2,.objective .progress-track,.objective-bottom,.distance-detail { display:none; }
  .distance { gap:6px; height:27px; }
  .distance strong { font-size:24px; line-height:1; letter-spacing:-.5px; }
  .distance>span { font-size:14px; line-height:1; }
  .compass { top:calc(56px + var(--safe-top)); left:auto; right:max(12px,env(safe-area-inset-right)); transform:none; gap:7px; min-height:39px; padding:6px 10px; font-size:14px; border-radius:6px; background:#152b22b8; }
  .compass>span:first-child { font-size:21px; line-height:1; }

  .bottom-hud { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:calc(10px + var(--safe-bottom)); gap:0; display:block; }
  .vitals { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1fr); align-items:center; gap:12px; width:100%; max-width:440px; margin:0 auto; padding:6px 9px; border-radius:6px; background:#152b228c; backdrop-filter:blur(4px); box-shadow:none; }
  .vital-head { margin:0; font-size:12px; }
  .vital-head>span:first-child { display:none; }
  #hearts { font-size:12px; letter-spacing:0; white-space:nowrap; }
  .meter-row { min-width:0; gap:5px; min-height:20px; font-size:14px; }
  .meter-row label { width:auto; white-space:nowrap; }
  .meter-row meter { min-width:12px; height:4px; }
  .meter-row meter::-webkit-meter-bar { height:4px; }
  #stress-value,.route-chip,#minimap,.hint,#interaction { display:none; }

  .toast { top:calc(103px + var(--safe-top)); left:50%; right:auto; width:max-content; max-width:calc(100% - 24px); padding:7px 11px; font-size:14px; line-height:1.45; border-left-width:2px; text-align:left; background:#152b22d9; border-radius:4px; box-shadow:none; }
  .toast small { display:none; }

  #touch-controls { display:flex; left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); bottom:calc(54px + var(--safe-bottom)); padding:0; align-items:flex-end; justify-content:space-between; pointer-events:none; }
  #joystick { width:96px; height:96px; flex-shrink:0; border:1px solid #ffffff55; background:#17332932; backdrop-filter:none; touch-action:none; pointer-events:auto; }
  #stick { width:34px; height:34px; left:calc(50% - 17px); top:calc(50% - 17px); border:1px solid #ffffffa6; background:#dfedba99; }
  .touch-right { display:flex; flex-direction:column; align-items:center; gap:10px; }
  .touch-right button { width:64px; height:64px; flex-shrink:0; border:1px solid #e3f4ad80; border-radius:50%; background:#17332970; font-size:14px; color:var(--lime); pointer-events:auto; touch-action:none; }
  #drink-touch { width:56px; height:44px; border-radius:22px; }
  .control-row,.location-tag,.keyboard-help { display:none; }
  .touch-help { display:inline; }
  .mobile-instruction { display:block; }
  .dialog-inner { width:min(420px,calc(100vw - 24px)); padding:24px; }
}

@media (max-width:950px) and (max-height:500px) and (orientation:landscape) {
  .playing .wordmark { display:none; }
  .playing .topbar { left:auto; right:max(12px,env(safe-area-inset-right)); padding:var(--safe-top) 0 0; }
  .objective { top:calc(8px + var(--safe-top)); }
  .compass { top:calc(8px + var(--safe-top)); left:calc(120px + env(safe-area-inset-left)); right:auto; }
  .toast { top:calc(55px + var(--safe-top)); }
  #touch-controls { bottom:calc(12px + var(--safe-bottom)); }
  .bottom-hud { left:calc(126px + env(safe-area-inset-left)); right:calc(100px + env(safe-area-inset-right)); bottom:calc(12px + var(--safe-bottom)); }
  .vitals { max-width:360px; gap:9px; }
}