/* ==========================================================================
   LUNASPIS — MOBILE & TOUCH RESPONSIVENESS PASS
   Loaded after style.css / premium.css so these rules win the cascade.
   Goals:
   - No control may overflow the viewport or cover primary content.
   - Buttons keep comfortable touch targets without dominating the screen.
   - Title, lobby, and in-game HUD each get a deliberate compact layout.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The ground map is a HUD layer: it must never sit above dialogs, briefings,
   or the top-right toolbar. */
body #space-center-ground-map {
  z-index: 57 !important;
}

/* ==========================================================================
   1. TITLE SCREEN — compact header, capped hero, no horizontal overflow
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) {
  #screen-menu {
    gap: 14px;
    overflow-x: hidden;
    padding: calc(18px + var(--safe-top)) calc(14px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(14px + var(--safe-left));
  }

  .title-topbar {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }

  .title-brand {
    font-size: 9px;
    letter-spacing: 1.3px;
    min-width: 0;
  }

  .title-top-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 6px;
  }

  .title-top-actions .title-chip-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 9px;
    letter-spacing: 0.8px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .title-hero {
    width: 100%;
    max-width: 560px;
    gap: 9px;
  }

  .title-eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
    line-height: 1.4;
  }

  .title-display {
    font-size: clamp(36px, 11vw, 56px);
    letter-spacing: 0.14em;
  }

  .title-premise {
    max-width: 100%;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .title-callsign-row {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    padding: 4px 0;
  }

  .title-callsign-input {
    min-width: 0;
  }

  .title-cta-row {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
  }

  .btn-title-primary,
  .btn-title-secondary {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 8px;
    font-size: 10.5px;
    letter-spacing: 1.2px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .title-join-row {
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  .title-code-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
  }

  .btn-title-join {
    flex: 0 0 auto;
    min-width: 84px;
    min-height: 42px;
    padding: 9px 14px;
  }

  .title-telemetry-strip {
    flex-wrap: wrap;
    gap: 5px 9px;
    font-size: 9px;
    letter-spacing: 1px;
    line-height: 1.4;
  }
}

/* Phones: 2x2 header chips, full-width primary CTA, two secondary CTAs. */
@media (max-width: 540px) {
  .title-brand {
    width: 100%;
  }

  .title-top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    flex: 1 1 100%;
  }

  .title-top-actions .title-chip-btn {
    min-height: 36px;
    padding: 6px;
    font-size: 8.5px;
    letter-spacing: 0.7px;
    white-space: normal;
  }

  .title-top-actions .title-region-toggle {
    grid-column: 1 / -1;
    justify-content: space-between;
    min-height: 36px;
    padding: 5px 8px 5px 10px;
  }

  .title-top-actions .title-region-toggle .region-opt-btn {
    min-height: 26px;
    padding: 4px 12px;
  }

  .title-cta-row {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .btn-title-primary {
    grid-column: 1 / -1;
  }

  .btn-title-primary,
  .btn-title-secondary {
    min-height: 44px;
    font-size: 10px;
    letter-spacing: 0.9px;
  }
}

/* Short landscape phones: drop non-essential hero copy so the CTAs fit. */
@media (max-height: 520px) and (max-width: 900px) {
  #screen-menu {
    padding-top: calc(10px + var(--safe-top));
    gap: 8px;
  }

  .title-hero {
    gap: 6px;
  }

  .title-premise,
  .title-telemetry-strip {
    display: none;
  }

  .title-display {
    font-size: clamp(30px, 8vh, 44px);
  }

  .btn-title-primary,
  .btn-title-secondary {
    min-height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .title-code-input,
  .btn-title-join {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* ==========================================================================
   2. LOBBY STAGING DECK — compact top bar and bottom action bar
   ========================================================================== */
@media (max-width: 960px) {
  #screen-lobby {
    justify-content: flex-start;
    gap: 8px;
    overflow-x: hidden;
    padding: calc(12px + var(--safe-top)) calc(10px + var(--safe-right)) calc(132px + var(--safe-bottom)) calc(10px + var(--safe-left));
  }

  .lobby-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 8px 10px;
  }

  .room-code-badge {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
  }

  .room-code-badge .field-label {
    flex: 0 0 auto;
    font-size: 8px;
    letter-spacing: 0.8px;
    white-space: nowrap;
  }

  .room-code-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(14px, 4.4vw, 18px);
    letter-spacing: 1.8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn-copy {
    flex: 0 0 auto;
    padding: 5px 8px;
    font-size: 7.5px;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }

  .lobby-top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .lobby-top-actions > * {
    width: 100% !important;
    min-height: 34px;
    padding: 6px 8px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.6px;
    text-align: center;
  }

  .lobby-count-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lobby-staging-shell {
    gap: 10px;
  }

  .lobby-mission-panel {
    padding: 8px 10px;
    gap: 6px;
  }

  .lobby-mission-header {
    gap: 6px;
  }

  .lobby-mission-selected {
    font-size: 10.5px;
    letter-spacing: 0.6px;
  }

  .lobby-mission-hint {
    font-size: 8px;
    letter-spacing: 0.6px;
  }

  .lobby-ops-mode-bar {
    gap: 5px;
    margin-bottom: 6px;
  }

  .ops-mode-btn {
    padding: 8px 6px;
    font-size: 9.5px;
    line-height: 1.25;
  }

  /* Cards are generated with inline min-width/padding: override them. */
  .lobby-mission-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px;
    margin: 4px 0;
  }

  .lobby-mission-cards > button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  .lobby-mission-cards > button > div:nth-child(1) {
    font-size: 9px !important;
  }

  .lobby-mission-cards > button > div:nth-child(2) {
    margin: 3px 0 !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }

  .lobby-mission-cards > button > div:nth-child(3) {
    min-height: 0 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .lobby-mission-cards > button > div:nth-child(4) {
    margin-top: 5px !important;
    font-size: 9.5px !important;
  }

  .lobby-mission-tip,
  .lobby-difficulty-hint {
    font-size: 9.5px;
    line-height: 1.45;
  }

  .lobby-difficulty-row {
    gap: 6px;
  }

  .lobby-difficulty-pills {
    gap: 5px;
  }

  .lobby-difficulty-pills > button {
    padding: 5px 9px !important;
    font-size: 9.5px !important;
  }

  .lobby-academy-link {
    font-size: 9px;
    padding: 5px 7px;
    line-height: 1.35;
  }

  .lobby-customizer {
    padding: 8px 10px;
    gap: 8px;
  }

  .lobby-chat-box {
    min-height: 84px;
  }

  .lobby-manifest-stage {
    padding: 8px 10px;
    gap: 8px;
  }

  .lobby-manifest-toolbar {
    gap: 6px;
    padding-bottom: 6px;
  }

  .lobby-manifest-title-block .customizer-title {
    font-size: 10px;
    line-height: 1.35;
  }

  .lobby-role-coverage {
    font-size: 9.5px;
    line-height: 1.4;
  }

  .lobby-manifest-actions .btn-secondary {
    padding: 6px 9px;
    font-size: 9px;
  }

  .lobby-zone-rows {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
  }

  .lobby-manifest-row {
    padding: 7px 9px;
    gap: 4px;
  }

  .lobby-row-name {
    font-size: 11px;
  }

  .lobby-row-duty {
    font-size: 10px;
  }

  .lobby-swap-btn {
    padding: 4px 8px;
    font-size: 9.5px;
  }

  .lobby-players-grid {
    gap: 8px;
  }
}

/* Tablets and landscape phones have room for the top actions in one row. */
@media (min-width: 541px) and (max-width: 960px) {
  .lobby-top-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* One mission card per row on phones; no clipped inline widths. */
@media (max-width: 540px) {
  .lobby-mission-cards {
    grid-template-columns: 1fr;
  }

  .lobby-mission-cards > button > div:nth-child(3) {
    -webkit-line-clamp: 2;
  }
}

/* Keep the launch controls docked, compact, and clear of the scroll content. */
@media (max-width: 900px), (pointer: coarse) {
  .lobby-bottom-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left));
    text-align: center;
  }

  .lobby-controls-hint {
    display: none !important;
  }

  .lobby-start-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }

  .lobby-autoshuffle-toggle {
    flex: 1 1 140px;
    min-height: 38px;
    padding: 4px 8px;
    gap: 6px;
    justify-content: center;
    font-size: 8.5px;
    letter-spacing: 0.5px;
    line-height: 1.25;
  }

  .lobby-autoshuffle-toggle input {
    width: 16px;
    height: 16px;
  }

  .btn-start-game {
    flex: 1 1 160px;
    width: auto;
    min-height: 44px;
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: 1.1px;
  }

  #screen-lobby {
    padding-bottom: calc(132px + var(--safe-bottom)) !important;
  }
}

/* Short landscape: keep the fixed bar to a single compact row. */
@media (max-height: 520px) and (max-width: 900px) {
  #screen-lobby {
    padding-top: calc(8px + var(--safe-top));
    padding-bottom: calc(76px + var(--safe-bottom)) !important;
  }

  .lobby-bottom-bar {
    flex-direction: row;
    align-items: center;
    padding-top: 5px;
    padding-bottom: calc(5px + var(--safe-bottom));
  }

  .lobby-autoshuffle-toggle,
  .btn-start-game {
    min-height: 36px;
  }

  .lobby-mission-cards {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* ==========================================================================
   3. IN-GAME HUD — clear the top-right toolbar and keep touch controls apart
   ========================================================================== */
@media (max-width: 900px) {
  /* The ground map used to sit on top of the toolbar and mission briefings. */
  body #space-center-ground-map {
    top: calc(168px + var(--safe-top)) !important;
    right: calc(8px + var(--safe-right)) !important;
  }

  #lunaspis-ship-minimap,
  #hud-active-speakers {
    top: calc(168px + var(--safe-top));
  }
}

@media (max-width: 659px) {
  body #space-center-ground-map {
    top: calc(184px + var(--safe-top)) !important;
  }

  #lunaspis-ship-minimap,
  #hud-active-speakers {
    top: calc(184px + var(--safe-top));
  }

  .hud-checklist-panel:not(.collapsed) {
    top: calc(184px + var(--safe-top));
  }
}

@media (max-width: 540px) {
  body #space-center-ground-map {
    top: calc(184px + var(--safe-top)) !important;
    width: 172px;
  }

  #lunaspis-ship-minimap,
  #hud-active-speakers {
    top: calc(184px + var(--safe-top));
  }

  /* Ground/station action bars: tighter buttons and never taller than needed. */
  #space-center-ground-hud,
  #ship-interior-hud {
    padding: 6px 8px;
    gap: 4px;
  }

  .sc-hud-btn {
    padding: 4px 6px;
    font-size: 8.5px;
  }

  .sc-step-chip {
    font-size: 8px;
    padding: 2px 5px;
  }

  /* Long interaction prompts must ellipsize instead of running off-screen. */
  #btn-proximity-use {
    max-width: calc(100vw - 132px);
    padding: 0 8px;
    gap: 6px;
    font-size: 8.5px;
    letter-spacing: 0.5px;
    overflow: hidden;
  }

  #btn-proximity-use .prox-key-badge {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  #proximity-task-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The telemetry toggle shared the bottom-left corner with the interact
     button; lift it above the interact button on touch phones. */
  body.touch-ui #btn-telemetry-toggle {
    left: auto;
    right: calc(8px + var(--safe-right));
    bottom: calc(58px + var(--safe-bottom));
  }
}

/* Very narrow phones: keep the checklist header from truncating its title. */
@media (max-width: 360px) {
  .hud-checklist-header {
    font-size: 9px;
    gap: 4px;
  }

  #hud-checklist-title {
    font-size: 9px;
    letter-spacing: 0.3px;
  }

  .checklist-count-pill {
    font-size: 8px;
    padding: 1px 4px;
  }
}

/* Short landscape: keep the map below the toolbar and preserve screen height. */
@media (max-height: 520px) and (max-width: 900px) {
  /* Keep the map/minimap below the taller touch toolbar; it was covering the
     middle button rows on landscape phones. */
  body #space-center-ground-map {
    top: calc(156px + var(--safe-top)) !important;
    width: 150px;
  }

  #lunaspis-ship-minimap,
  #hud-active-speakers {
    top: calc(156px + var(--safe-top)) !important;
  }
}

/* ==========================================================================
   4. TOUCH TARGETS & SCROLLING — comfortable taps without giant controls
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) {
  button,
  .btn-title-primary,
  .btn-title-secondary,
  .btn-title-join,
  .btn-lobby-voice,
  .btn-copy,
  .btn-start-game,
  .voice-mic-btn,
  .voice-settings-btn {
    touch-action: manipulation;
  }

  .settings-modal-card,
  .task-modal-card,
  .mission-briefing-card {
    max-width: calc(100vw - 16px);
  }

  .settings-modal-body,
  #task-modal-content,
  .mission-briefing-objectives {
    -webkit-overflow-scrolling: touch;
  }
}