/* Keep the world visible; details and nearby targets expand on demand. */
#touch-pad, .mobile-mission-toggle { display: none; }
@media (max-width: 600px), (pointer: coarse) and (max-height: 600px) and (max-width: 1100px) {
  :root { --mobile-bottom: max(8px, env(safe-area-inset-bottom)); --mobile-left: max(8px, env(safe-area-inset-left)); --mobile-right: max(8px, env(safe-area-inset-right)); }
  html, body { overscroll-behavior: none; }
  .topbar { top: max(4px, env(safe-area-inset-top)); left: var(--mobile-left); right: var(--mobile-right); gap: 4px; }
  header { align-items: center; gap: 4px; min-height: 44px; }
  header .eyebrow, .header-actions .turn, .header-actions .readout, .header-actions .saved { display: none; }
  header h1 { font-size: 18px; margin: 0; }
  .header-actions { gap: 0; }
  .save-row { margin: 0; gap: 2px; display: flex; }
  .save-row button { min-height: 44px; padding: 4px 7px; font-size: 12px; border-radius: 8px; background: #0b1525d9; }
  .resources { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 4px; pointer-events: auto; touch-action: pan-x; scrollbar-width: none; }
  .res { flex: 0 0 auto; padding: 3px 5px; border-radius: 6px; gap: 3px; }
  .res b { font-size: 12px; } .res span { font-size: 9px; }
  .mission { width: 100%; padding: 0; border-radius: 9px; max-height: 46dvh; overflow-y: auto; }
  .mobile-mission-toggle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; background: transparent; color: #f4e6ac; font: 500 12px/1.3 Outfit, system-ui, sans-serif; text-align: left; }
  .mission:not(.mobile-expanded) > :not(.mobile-mission-toggle) { display: none !important; }
  .mission.mobile-expanded > :not(.mobile-mission-toggle) { margin: 6px 10px; }
  .mission.mobile-expanded .mission-keys { display: none; }
  .mission-item, .mission-step { font-size: 12px; }
  #compass, #thrust, #scan-chip, #suit-meter, .hud.is-surface .panels, .context { display: none !important; }
  #scanner-dev { position: fixed; left: auto !important; right: var(--mobile-right) !important; top: calc(max(4px, env(safe-area-inset-top)) + 132px) !important; width: 112px; padding: 5px; max-height: calc(100dvh - 280px) !important; }
  #scanner-dev .dev-head { min-height: 34px; margin: 0; }
  #scanner-dev .dev-collapse { min-height: 44px; min-width: 44px; }
  #scanner-dev .dev-screen, #scanner-dev #radar { width: 96px; height: 96px; }
  #scanner-dev .dev-lcd { font-size: 9px; }
  #scanner-dev .dev-modes { flex-wrap: wrap; }
  #scanner-dev .dev-mode { min-height: 44px; min-width: 44px; }
  #scanner-dev .dev-gauges, #scanner-dev .dev-foot { display: none; }
  #touch-pad:not([hidden]) { position: fixed; z-index: 19; left: var(--mobile-left); right: var(--mobile-right); bottom: var(--mobile-bottom); display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
  #touch-pad button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; min-width: 44px; height: 44px; padding: 0 4px; color: #e9f2f2; background: #0b1928dd; border: 1px solid #8db5b887; border-radius: 12px; font: 600 12px Outfit, system-ui, sans-serif; }
  #touch-pad button.is-held { background: #c9e0b6; color: #132329; }
  #touch-pad button:disabled { opacity: .4; }
  #touch-pad .mobile-use { background: #d6f26a; color: #172033; }
  .mobile-walk { display: grid; grid-template: repeat(3, 44px) / repeat(3, 44px); gap: 2px; }
  .walk-up { grid-area: 1 / 2; } .walk-left { grid-area: 2 / 1; } .walk-right { grid-area: 2 / 3; } .walk-down { grid-area: 3 / 2; }
  .mobile-tools { display: grid; grid-template-columns: repeat(3, 48px); gap: 5px; }
  .dock { bottom: calc(var(--mobile-bottom) + 144px); left: var(--mobile-left); right: var(--mobile-right); max-height: 22dvh; overflow: auto; }
  .dock .note { display: none; } .dock .action { min-height: 44px; }
  .announce { top: 45%; bottom: auto; max-width: 90vw; font-size: 12px; }
  .world-sandbox-banner { bottom: auto; top: 132px; left: var(--mobile-left); transform: none; max-width: 56%; padding: 5px 7px; font-size: 10px; }
  .guide, .overlay { padding: max(8px, env(safe-area-inset-top)) var(--mobile-right) var(--mobile-bottom) var(--mobile-left); }
  .guide-sheet, .dialog, .building-sheet { max-width: 100%; max-height: 90dvh; overflow-y: auto; }
  .guide-head, .building-head { position: sticky; top: 0; background: #111c2c; z-index: 2; }
  .guide button, .building-card button { min-height: 44px; }
  .building-card { inset: max(8px, env(safe-area-inset-top)) var(--mobile-right) auto var(--mobile-left); width: auto; z-index: 25; }
  #plot-bar { bottom: calc(var(--mobile-bottom) + 144px); max-height: 24dvh; overflow: auto; }
  #plot-bar button { min-height: 44px; }
  .coach { bottom: calc(var(--mobile-bottom) + 200px); max-height: 22dvh; overflow: auto; }
  body.in-lab #touch-pad, body.in-deck #touch-pad { display: none !important; }
  /* Phone: the pad sits above the touch controls, full width, same paw order. Use is the pad's main button. */
  .action-pad { left: var(--mobile-left); right: var(--mobile-right); bottom: calc(var(--mobile-bottom) + 144px); transform: none;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 44px 44px 52px; column-gap: 5px; row-gap: 4px; }
  .action-pad.has-side { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pad-btn { padding: 3px 6px 3px 4px; gap: 4px; font-size: 12px; border-radius: 13px; }
  .pad-btn kbd { display: none; }
  .pad-main { min-height: 52px; font-size: 14px; }
  .pad-main kbd { display: none; }
  .pad-target { font-size: 10px; }
  /* Phone: labels and targets wrap to two short lines instead of ellipsising (narrow 4-column buttons). */
  .pad-btn .pad-text { min-width: 0; }
  .pad-btn .pad-label, .pad-btn .pad-target { white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; }
  .pad-btn .pad-label { font-size: 11px; }
  .pad-btn .pad-target { font-size: 9.5px; overflow-wrap: break-word; hyphens: auto; }
  .pad-btn .pad-target::before { content: ""; }
  .pad-small { padding-left: 4px; padding-right: 4px; }
  .pad-main .pad-label { font-size: 13px; }
  .pad-btn:disabled .pad-reason:not(:empty), .pad-btn.has-note .pad-reason:not(:empty) { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 9.5px; line-height: 1.1; }
  .pad-scan, .pad-s3 { transform: translateY(14px); }
  .pad-s1, .pad-s2 { grid-row: 1 / span 2; align-self: start; }
  .pad-main:disabled .pad-reason:not(:empty) { padding-left: 0; }
  body.pad-on #touch-pad .mobile-use, body.pad-on #touch-pad [data-command="scan"] { visibility: hidden; }
}
@media (pointer: coarse) and (max-height: 600px) and (min-width: 601px) and (max-width: 1100px) {
  .topbar { right: calc(var(--mobile-right) + 124px); }
  header { position: absolute; left: 0; right: 0; }
  .resources { margin-top: 46px; }
  .mission { width: min(440px, 72%); }
  #scanner-dev { top: max(4px, env(safe-area-inset-top)) !important; max-height: calc(100dvh - 120px) !important; }
  .dock, #plot-bar { left: calc(var(--mobile-left) + 144px); right: calc(var(--mobile-right) + 160px); bottom: var(--mobile-bottom); max-height: 112px; }
  .world-sandbox-banner { top: 120px; max-width: 50%; }
}

/* Build round: the build paw and walkthrough card on phones (above the touch controls, like the action pad). */
@media (max-width: 600px), (pointer: coarse) and (max-height: 600px) and (max-width: 1100px) {
  .build-paw { left: var(--mobile-left); right: var(--mobile-right); width: auto; transform: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 48px 48px auto; column-gap: 5px; row-gap: 5px; bottom: calc(var(--mobile-bottom) + 144px); }
  .build-paw .build-toe { min-height: 46px; padding: 3px 6px; font-size: 12px; }
  .build-paw .pad-btn kbd { display: none; }
  .build-paw .pad-b1, .build-paw .pad-b4, .build-paw .pad-b5, .build-paw .pad-b8 { margin-top: 0; }
  .build-paw .pad-main { margin-top: 2px; min-height: 50px; }
  .walk-card { top: auto; bottom: calc(var(--mobile-bottom) + 300px); right: 8px; left: 8px; width: auto; padding: 10px 12px; font-size: 12.5px; }
  body.build-on .walk-card { display: none !important; }
}