/* responsive.css — full breakpoint pass: desktop -> tablet -> mobile -> small mobile */

/* ============ Tablet (large) : <=1024px ============ */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }

  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-actions, .hero-stats { justify-content: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-visual { order: -1; max-width: 320px; margin: 0 auto; }

  .game-shell { grid-template-columns: 1fr; gap: 32px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .achv-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-list { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .country-chip-grid { grid-template-columns: repeat(4, 1fr); }
  .challenge-band { padding: 44px; }
}

/* ============ Mobile nav (tablet portrait / phones) : <=860px ============ */
@media (max-width: 860px) {
  .main-nav { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; z-index: 190;
    background: var(--color-bg); flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 24px; transform: translateX(-100%); transition: transform 0.35s ease; overflow-y: auto; }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a { width: 100%; padding: 14px 6px; border-bottom: 1px solid var(--color-border); font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .header-actions #searchToggle,
  .header-actions .btn-primary.btn-sm { display: none; }

  .search-panel { width: 92vw; padding: 18px; }
  .achv-grid { grid-template-columns: repeat(2, 1fr); }
  .country-chip-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ Tablet portrait / large phones : <=768px ============ */
@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .section-header { margin-bottom: 40px; }
  .card-grid, .steps-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
  .contact-form, .newsletter-card { padding: 26px; }
  .compass-wrap { max-width: 280px; }
}

/* ============ Mobile : <=640px ============ */
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .logo { font-size: 1.2rem; }
  .logo-mark { width: 32px; height: 32px; }

  .hero-visual { display: none; }
  .hero-eyebrow { display: none; }
  .hero-inner { display: block; }
  .section { padding: 56px 0; }
  .hero { padding: 44px 0 64px; }
  .hero h1 { font-size: 2.1rem; margin-top: 0; }
  .hero p.lead { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-stats { gap: 20px; justify-content: space-between; }
  .hero-stat b { font-size: 1.3rem; }

  .game-shell { padding: 20px; border-radius: var(--radius-md); }
  .game-modes { justify-content: center; }
  .silhouette-stage { border-radius: 12px; }
  .guess-form { flex-wrap: wrap; }
  .guess-form input { width: 100%; flex: 1 1 100%; }
  .guess-form button { flex: 1 1 100%; }

  .card-grid, .steps-grid, .achv-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .challenge-band { padding: 32px 22px; flex-direction: column; text-align: center; }

  .guess-row { grid-template-columns: 1fr auto; grid-template-areas: "name proximity" "distance direction"; row-gap: 6px; }
  .guess-name { grid-area: name; }
  .guess-proximity-num { grid-area: proximity; }
  .guess-distance { grid-area: distance; }
  .guess-direction, .guess-direction-label { display: none; }
  .guess-proximity-track { grid-column: 1 / -1; }

  .newsletter-form { flex-direction: column; }
  .country-chip-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-item { flex-direction: column; }
  .games-grid { grid-template-columns: 1fr; }
  .end-actions { flex-direction: column; }
  .end-actions .btn { width: 100%; }
  .game-actions { flex-direction: column; }
  .game-actions .btn { width: 100%; }

  .legal-content { padding: 40px 0 70px; }
  .legal-content h1 { font-size: 1.7rem; }
  .error-code { font-size: 4.5rem; }
}

/* ============ Small phones : <=400px ============ */
@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: 1.8rem; }
  .section-title { font-size: 1.5rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-number { font-size: 1.5rem; }
  .country-chip-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .achv-grid { grid-template-columns: 1fr; }
  .btn { padding: 12px 20px; font-size: 0.9rem; }
  .hero-stat b { font-size: 1.15rem; }
}