/* =========================================================
   Responsive — mobile first
   ========================================================= */

@media (min-width: 600px) {
  .page {
    padding-left: 40px;
    padding-right: 40px;
  }

  .stack { width: min(100%, 620px); }
  .stack-wide { width: min(100%, 860px); }
}

@media (min-width: 900px) {
  .page {
    padding-left: 64px;
    padding-right: 64px;
  }

  .chapter-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .lab-panel {
    max-width: 640px;
  }

  .time-dial {
    width: min(420px, 90vw) !important;
    height: min(420px, 90vw) !important;
  }
}

@media (max-width: 480px) {
  .bouquet {
    transform: translateX(-50%) scale(0.82);
    transform-origin: 50% 100%;
  }
  .surprise-fab {
    font-size: 0.66rem;
    max-width: 112px;
  }
  .site-credit {
    max-width: min(42vw, 168px);
    font-size: 0.64rem;
  }

  .display-xl {
    font-size: clamp(1.8rem, 9vw, 2.4rem) !important;
  }

  .btn {
    width: 100%;
    max-width: 320px;
  }

  .continue-bar {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .quiz-options button {
    font-size: 0.92rem !important;
    padding: 0.95rem 1rem !important;
  }

  .ticket {
    transform: scale(0.92);
  }
}

@media (hover: none) {
  .magnetic { transform: none !important; }
}

@media (max-height: 700px) and (orientation: landscape) {
  .page-center {
    justify-content: flex-start;
    padding-top: 48px;
  }

  .opening-stage {
    min-height: auto !important;
  }
}

/* Touch targets */
@media (pointer: coarse) {
  .secret-hotspot,
  .egg-target,
  .candle {
    min-width: 44px;
    min-height: 44px;
  }
}