/* css/mobile.css — responsive design for phones and tablets
   Breakpoints:
     - Small phones: max-width 480px
     - Regular phones: max-width 768px
     - Tablets: max-width 1024px
   Load this LAST so it overrides desktop styles.
*/

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TOUCH & iOS SAFE AREAS
   ═══════════════════════════════════════════════════════════════ */

html, body {
  /* Handle iOS safe area (notch) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* Prevent text selection on taps */
  -webkit-user-select: none;
  user-select: none;
  /* Prevent iOS text zoom on input focus */
  -webkit-text-size-adjust: 100%;
  /* Better touch scrolling */
  -webkit-overflow-scrolling: touch;
  /* Prevent pull-to-refresh */
  overscroll-behavior: none;
}

/* All buttons need minimum 44px touch target (Apple guideline) */
@media (max-width: 768px) {
  button, .btn, .menu-btn, .choice-btn, .start-btn, .scene-choice,
  .dock-btn, .ach-filter, .crew-tab, .market-tab, .base-tab,
  .tutorial-dismiss, .start-btn-small, .npc-choice,
  .directive-btn, .combat-ability-btn {
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Increase hit area for small clickable elements */
  .hud-menu-btn, .base-close-btn, .menu-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HUD — top bar
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hud-bar {
    padding: 8px 12px !important;
    font-size: 11px;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .hud-left, .hud-right {
    gap: 8px !important;
  }
  .hud-stat {
    gap: 2px !important;
  }
  .hud-label {
    font-size: 8px !important;
    letter-spacing: 0.1em !important;
  }
  .hud-value {
    font-size: 12px !important;
  }
  .hud-location {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hud-menu-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    letter-spacing: 0.1em !important;
  }
}

@media (max-width: 480px) {
  .hud-bar {
    /* On very small phones, hide center section */
    padding: 6px 10px !important;
  }
  .hud-center {
    display: none;
  }
  .hud-label {
    display: none; /* Only show values */
  }
}

/* ═══════════════════════════════════════════════════════════════
   MODALS — make them full screen on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* All modal panels go full screen */
  .crew-panel, .achievements-panel, .base-panel, .market-panel,
  .shipyard-panel, .missions-panel, .menu-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
  }

  /* Headers become sticky */
  .crew-header, .achievements-header, .base-header,
  .market-header, .missions-header, .menu-header {
    position: sticky;
    top: 0;
    background: var(--bg-void);
    z-index: 5;
    padding: 16px 18px !important;
    flex-wrap: wrap;
    gap: 12px !important;
  }

  /* Headers text smaller */
  .crew-title, .achievements-title, .base-title,
  .market-title, .missions-title, .menu-title {
    font-size: 16px !important;
    letter-spacing: 0.1em !important;
  }
  .crew-subtitle, .achievements-subtitle, .base-subtitle {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
  }

  /* Body padding smaller */
  .crew-body, .achievements-body, .base-body,
  .market-body, .missions-body {
    padding: 16px 14px !important;
  }

  /* Credits box smaller */
  .crew-credits-box, .market-credits-box {
    text-align: left !important;
  }
  .crew-credits, .market-credits {
    font-size: 14px !important;
  }

  /* Grids become single column */
  .crew-grid, .achievements-grid, .base-grid,
  .market-grid, .shipyard-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Tabs scroll horizontally */
  .crew-tabs, .market-tabs, .base-tabs, .achievements-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .crew-tab, .market-tab, .base-tab, .ach-filter {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 10px 14px !important;
    font-size: 11px !important;
  }

  /* Close button bigger */
  .base-close-btn {
    font-size: 22px !important;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN MENU
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .game-menu {
    padding: 0 !important;
  }
  .menu-panel {
    padding: 16px !important;
    overflow-y: auto;
  }
  .menu-header {
    padding: 12px 0 !important;
    margin-bottom: 16px !important;
  }
  .menu-title {
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
  }
  .menu-pilot-name {
    font-size: 22px !important;
  }
  .menu-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
  .menu-section-title {
    font-size: 10px !important;
    letter-spacing: 0.25em !important;
    margin: 16px 0 8px !important;
  }
  .menu-btn {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .menu-btn-icon {
    font-size: 18px !important;
    min-width: 20px;
  }
  .menu-btn-label {
    font-size: 14px !important;
  }
  .menu-btn-hint {
    font-size: 10px !important;
  }
  .menu-close {
    margin-top: 24px !important;
    padding: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STORY SCENE (the narrative modal — most important!)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .scene-overlay {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .scene-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 24px 18px !important;
    padding-top: max(32px, env(safe-area-inset-top)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .scene-header {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  .scene-portrait {
    font-size: 8px !important;
    min-width: 60px !important;
  }
  .scene-title {
    font-size: 16px !important;
    letter-spacing: 0.08em !important;
  }
  .scene-speaker {
    font-size: 10px !important;
  }
  .scene-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  .scene-choices {
    gap: 8px !important;
    margin-top: auto;
  }
  .scene-choice {
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMBAT (critical — combat on mobile is currently broken)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .combat-overlay {
    padding: 0 !important;
  }
  .combat-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 12px 10px !important;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    display: flex;
    flex-direction: column;
  }

  /* Stack ships vertically instead of side-by-side */
  .combat-arena {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 10px 0 !important;
  }
  .combat-vs {
    display: none !important;
  }
  .combat-ship {
    width: 100% !important;
  }
  .combat-ship-name {
    font-size: 14px !important;
  }
  .combat-ship-sprite {
    font-size: 32px !important;
    margin: 8px 0 !important;
  }
  .combat-hp-bar {
    height: 12px !important;
  }
  .combat-stats {
    font-size: 11px !important;
    gap: 6px !important;
  }

  /* Abilities grid for touch */
  .combat-abilities {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .combat-ability-btn {
    padding: 10px 8px !important;
    min-height: 56px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .combat-ability-name {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }
  .combat-ability-desc {
    font-size: 10px !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .combat-ability-cost {
    font-size: 10px !important;
  }

  .combat-log {
    max-height: 80px !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 480px) {
  .combat-abilities {
    grid-template-columns: 1fr !important;
  }
  .combat-ability-btn {
    min-height: 48px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .combat-ability-desc {
    -webkit-line-clamp: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE — touch pan/zoom
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #timeline-canvas {
    touch-action: pan-x pan-y !important;
  }
  .timeline-controls {
    bottom: 16px !important;
    right: 16px !important;
    gap: 6px !important;
  }
  .timeline-ctrl-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .timeline-legend {
    bottom: 16px !important;
    left: 16px !important;
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GALAXY MAP — touch controls
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #galaxy-canvas {
    touch-action: pan-x pan-y !important;
  }
  .galaxy-header {
    padding: 10px 14px !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .galaxy-title {
    font-size: 13px !important;
    letter-spacing: 0.2em !important;
  }
  .galaxy-subtitle {
    font-size: 10px !important;
  }
  .galaxy-back-btn {
    font-size: 11px !important;
    padding: 8px 14px !important;
  }
  .galaxy-tooltip {
    max-width: 280px !important;
    font-size: 11px !important;
    padding: 10px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DOCK MENU (when landing on a planet)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .dock-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 16px !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  .dock-services {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dock-btn {
    padding: 14px 10px !important;
    font-size: 12px !important;
    min-height: 60px !important;
  }
  .dock-icon {
    font-size: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   START SCREEN
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .start-content {
    padding: 40px 20px !important;
    gap: 24px !important;
  }
  .start-subtitle {
    font-size: 10px !important;
    letter-spacing: 0.5em !important;
  }
  .start-title {
    font-size: clamp(42px, 12vw, 72px) !important;
    letter-spacing: 0.05em !important;
  }
  .start-tagline {
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    padding: 0 16px;
  }
  .start-actions {
    max-width: 100% !important;
    padding: 0 12px !important;
  }
  .start-btn {
    padding: 14px 18px !important;
  }
  .start-btn-label {
    font-size: 15px !important;
  }
  .start-btn-sub {
    font-size: 10px !important;
  }
  .start-version {
    font-size: 9px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NPC ENCOUNTER modal
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .npc-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 22px 16px !important;
    padding-top: max(32px, env(safe-area-inset-top)) !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .npc-header {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }
  .npc-portrait {
    font-size: 8px !important;
    align-self: center;
  }
  .npc-name {
    font-size: 16px !important;
  }
  .npc-location {
    font-size: 10px !important;
  }
  .npc-entry {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  .npc-response {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
  .npc-choice {
    padding: 13px 16px !important;
    font-size: 13px !important;
  }
  .npc-dismiss {
    padding: 14px !important;
    margin-top: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DIRECTIVE BANNER — position below HUD on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .directive-banner {
    top: 62px !important;
    left: 12px !important;
    right: 12px !important;
    transform: translateY(-10px) !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 10px 14px !important;
  }
  .directive-banner.show {
    transform: translateY(0) !important;
  }
  .directive-label {
    font-size: 8px !important;
    letter-spacing: 0.25em !important;
  }
  .directive-goal {
    font-size: 13px !important;
  }
  .directive-hint {
    font-size: 10px !important;
  }
  .directive-btn {
    padding: 8px 12px !important;
    font-size: 9px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #toast-layer {
    top: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  .toast {
    max-width: calc(100vw - 24px) !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
  }
  .achievement-toast {
    min-width: auto !important;
    max-width: calc(100vw - 24px) !important;
    padding: 12px 14px !important;
  }
  .ach-name {
    font-size: 13px !important;
  }
  .ach-desc {
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GAME OVER
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .gameover-content {
    padding: 24px 18px !important;
    padding-top: max(40px, env(safe-area-inset-top)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
  .gameover-title {
    font-size: clamp(24px, 7vw, 32px) !important;
    letter-spacing: 0.15em !important;
  }
  .gameover-subtitle {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .gameover-stats {
    grid-template-columns: 1fr !important;
    padding: 14px 16px !important;
  }
  .gameover-quote {
    font-size: 12px !important;
  }
  .gameover-btn {
    padding: 12px 16px !important;
  }
  .gameover-btn-label {
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TUTORIAL HINTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .tutorial-hint {
    max-width: calc(100vw - 32px) !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
  }
  .tutorial-center {
    top: 50% !important;
    left: 16px !important;
    right: 16px !important;
    transform: translateY(-50%) scale(0.95) !important;
  }
  .tutorial-center.show {
    transform: translateY(-50%) scale(1) !important;
  }
  .tutorial-top {
    top: 80px !important;
    left: 16px !important;
    right: 16px !important;
    transform: translateY(8px) scale(0.95) !important;
  }
  .tutorial-top.show {
    transform: translateY(0) scale(1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   IDLE HUB (shown between scenes)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .idle-hub {
    padding: 40px 20px !important;
    text-align: center;
  }
  .idle-title {
    font-size: 18px !important;
  }
  .idle-subtitle {
    font-size: 12px !important;
    margin-bottom: 20px !important;
  }
  .idle-actions {
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .idle-btn {
    padding: 12px 18px !important;
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE orientation warning (for very small phones)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) and (orientation: landscape) and (max-height: 420px) {
  .orientation-hint {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-void);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    text-align: center;
  }
  .orientation-hint::before {
    content: '⟳';
    font-size: 56px;
    color: var(--gold);
    animation: rotate-hint 2s ease-in-out infinite;
  }
  .orientation-hint::after {
    content: 'Best played in portrait';
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.2em;
  }
  @keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   PREVENT iOS DOUBLE-TAP ZOOM on buttons
   ═══════════════════════════════════════════════════════════════ */

button, .btn, [role="button"], .scene-choice, .menu-btn, .dock-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}