/* ============================================
   JORNADA BÍBLICA — Responsive Design
   Proper scaling for all devices
   ============================================ */

/* === Extra Large Screens (>1440px) — cap sizes === */
@media (min-width: 1441px) {
  :root {
    font-size: 15px;
  }

  .chapters-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    max-width: 860px;
  }
}

/* === Large Desktop (1200px - 1440px) === */
@media (min-width: 1200px) and (max-width: 1440px) {
  :root {
    font-size: 15px;
  }
}

/* === Desktop (1024px - 1199px) === */
@media (min-width: 1024px) and (max-width: 1199px) {
  :root {
    font-size: 14px;
  }

  .testament-cards {
    max-width: 400px;
  }
}

/* === Tablet (768px - 1023px) === */
@media (max-width: 1023px) {
  :root {
    font-size: 14px;
  }

  .testament-cards {
    max-width: 380px;
    gap: var(--space-sm);
  }

  .chapters-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .parchment {
    padding: var(--space-sm);
    width: 92%;
  }

  .game-scene {
    padding: var(--space-sm) var(--space-md);
  }
}

/* === Mobile Large (481px - 767px) === */
@media (max-width: 767px) {
  :root {
    font-size: 13px;
  }

  .testament-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    max-width: 340px;
  }

  .testament-card {
    padding: var(--space-sm);
  }

  .testament-card .card-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
  }

  .testament-card .card-desc {
    display: none;
  }

  .chapters-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 4px;
  }

  .game-scene {
    padding: var(--space-xs) var(--space-sm);
  }

  .dialogue-box {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
  }

  .challenge-box {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
  }

  .xp-bar {
    width: 60px;
  }

  .hud-inline .hud-chapter-title {
    display: none;
  }

  .menu-buttons .btn {
    min-width: 160px;
    max-width: 220px;
  }

  .results-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }

  .results-buttons {
    flex-direction: column;
    align-items: center;
  }

  .results-buttons .btn {
    width: 100%;
    max-width: 200px;
  }

  .parchment {
    width: 95%;
    padding: var(--space-sm);
  }

  .achievement-popup {
    left: var(--space-sm);
    right: var(--space-sm);
    top: auto;
    bottom: var(--space-lg);
    transform: translateY(calc(100% + 50px));
  }

  .achievement-popup.visible {
    transform: translateY(0);
  }

  .fill-verse-container {
    font-size: var(--fs-tiny);
    line-height: 1.8;
  }

  .fill-verse-blank {
    min-width: 50px;
  }

  .settings-panel {
    max-width: 100%;
  }
}

/* === Mobile Small (<=480px) === */
@media (max-width: 480px) {
  :root {
    font-size: 12px;
  }

  .title-hero {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  #screen-menu .menu-subtitle {
    font-size: var(--fs-tiny);
  }

  .menu-buttons .btn {
    min-width: 140px;
  }

  .testament-cards {
    gap: var(--space-xs);
    max-width: 280px;
  }

  .testament-card .card-icon {
    font-size: 1.3rem;
  }

  .dialogue-narrator {
    min-height: 2em;
  }

  .word-bank {
    gap: 3px;
  }

  .word-bank-item {
    padding: 2px 6px;
  }

  .results-stars {
    font-size: 1.3rem;
    letter-spacing: 3px;
  }

  .xp-bar {
    width: 45px;
  }
}

/* === Landscape Mobile === */
@media (max-height: 500px) and (orientation: landscape) {
  .game-scene {
    padding: var(--space-xs) var(--space-sm);
  }

  .dialogue-box {
    padding: var(--space-xs) var(--space-sm);
  }

  .dialogue-narrator {
    min-height: 1.5em;
    font-size: var(--fs-tiny);
  }

  .choices-container {
    margin-top: var(--space-xs);
  }

  .btn-choice {
    padding: 3px 6px;
    margin-bottom: 2px;
    font-size: var(--fs-tiny);
  }

  .challenge-box {
    padding: var(--space-xs);
    max-height: 85vh;
  }

  #screen-menu .menu-content .title-hero {
    font-size: var(--fs-h2);
  }

  .menu-buttons {
    margin-top: var(--space-xs);
    gap: var(--space-xs);
  }

  .testament-cards {
    margin-top: var(--space-xs);
  }
}

/* === Very Tall Screens (phones) — extra breathing room === */
@media (min-height: 800px) and (max-width: 480px) {
  .menu-buttons {
    margin-top: var(--space-xl);
    gap: var(--space-sm);
  }

  .game-scene {
    padding: var(--space-md);
  }

  .dialogue-narrator {
    min-height: 3em;
  }
}

/* === Touch Device Optimizations === */
@media (hover: none) and (pointer: coarse) {
  .btn-choice:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--gold-dark);
    background: linear-gradient(135deg, rgba(244, 232, 193, 0.9) 0%, rgba(232, 213, 163, 0.9) 100%);
  }

  .btn-choice:active {
    transform: translateX(4px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
    border-color: var(--gold);
  }

  .btn-primary:hover {
    transform: none;
  }

  .btn-primary:active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(200, 169, 110, 0.4);
  }

  .btn-secondary:hover {
    transform: none;
    background: transparent;
  }

  .btn-secondary:active {
    background: rgba(200, 169, 110, 0.15);
  }

  .testament-card:hover {
    transform: none;
    border-color: var(--gold-dark);
    box-shadow: none;
  }

  .testament-card:active {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: var(--shadow-lg), var(--shadow-divine);
  }

  .chapter-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(200, 169, 110, 0.3);
  }

  .chapter-card:active {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: var(--shadow-md), var(--shadow-glow);
  }
}

/* === Print (for verse collections) === */
@media print {
  body {
    background: white;
    color: black;
  }

  .hud, .btn-back, .lang-selector, #particles-canvas {
    display: none !important;
  }

  .parchment {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}