/* ═══ INDEX / LANDING — Mobile Styles ═══ */

@media (max-width: 768px) {
  /* Prevent iOS auto-zoom on input focus (requires >= 16px) */
  input[type='text'], input[type='password'] {
    font-size: 16px !important;
  }

  /* --- Nav --- */
  nav { padding: 14px 20px !important; }
  nav.scrolled { padding: 12px 20px !important; }
  .nav-links { display: none !important; }
  .nav-logo { font-size: 0.9rem !important; letter-spacing: 0.2em !important; }
  .nav-cta { padding: 8px 16px !important; font-size: 0.65rem !important; }

  /* --- Hero --- */
  #hero { margin-top: 25px; padding: 0 5vw !important; min-height: 100svh !important; }
  .hero-content { padding-left: 0 !important; max-width: 100% !important; }
  .hero-tag { font-size: 0.6rem !important; margin-bottom: 14px !important; }
  h1 { font-size: clamp(2.4rem, 10vw, 4rem) !important; }
  .hero-sub { font-size: 0.88rem !important; max-width: 100% !important; margin-top: 20px !important; }
  .hero-actions { flex-direction: column !important; gap: 12px !important; margin-top: 28px !important; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100% !important; text-align: center !important; }
  .hero-stats { gap: 24px !important; margin-top: 40px !important; flex-wrap: wrap !important; }

  /* --- Planet --- */
  #the-planet { width: 55vh !important; height: 55vh !important; min-width: 280px !important; min-height: 280px !important; left: 70% !important; top: 55% !important; opacity: 0.5 !important; }

  /* --- Lore --- */
  .lore-inner { grid-template-columns: 1fr !important; gap: 40px !important; padding: 60px 24px !important; }
  .lore-visual { min-height: 200px !important; }
  .holo-map { width: 200px !important; height: 200px !important; }

  /* --- Avatar showcase --- */
  .avatar-inner { padding: 60px 24px !important; }
  .avatar-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .avatar-card { padding: 24px !important; }
  .skill-panel { padding: 20px !important; }

  /* --- Empire --- */
  .empire-inner { padding: 60px 24px !important; }
  .empire-panels { grid-template-columns: 1fr !important; }
  .empire-panel { padding: 24px 20px !important; }

  /* --- Features --- */
  .features-inner { padding: 60px 24px !important; }
  .features-panels { grid-template-columns: 1fr !important; }
  .feature-card { padding: 24px !important; }

  /* --- Footer --- */
  footer { padding: 24px 20px !important; flex-direction: column !important; gap: 16px !important; text-align: center !important; }
  .footer-links { gap: 16px !important; }

  /* --- Auth modal --- */
  .auth-modal-content { width: calc(100vw - 24px) !important; }
  .auth-modal-card { padding: 28px 22px 24px !important; border-radius: 16px !important; }
  .auth-modal-title { font-size: 1.25rem !important; }
  .auth-modal-sub { font-size: 0.82rem !important; }
  .step-title { font-size: 0.85rem !important; }
  .step-flavor { font-size: 0.8rem !important; }

  /* --- Wizard --- */
  .avatar-upload-area { width: 110px !important; height: 110px !important; }
  .attribute-row { grid-template-columns: 70px 1fr 24px auto !important; gap: 8px !important; }
  .confirm-attrs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .planet-card { padding: 14px !important; }
  .profession-card { padding: 12px 14px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 2.2rem !important; }
  .hero-stat-val { font-size: 1.4rem !important; }
  .hero-stats { gap: 16px !important; }
  .nav-logo { font-size: 0.75rem !important; }
  .auth-modal-card { padding: 22px 16px 20px !important; }
}