/* ============================================================
   RESPONSIVE.CSS  (v3 — premium polish)
   Fully tested at 320 / 360 / 390 / 430 / 768 / 1024px.
   Loaded last — these rules win at every breakpoint.
   ============================================================ */

/* ============================================================
   BASE — prevent horizontal overflow
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }

/* ============================================================
   DESKTOP LARGE  (> 1200px)
   ============================================================ */
@media (min-width: 1200px) {
  .cinema-frame { height: 500px; max-width: 860px; }
  .clips-track  { min-height: 500px; }
  .cd-unit      { min-width: 110px; padding: 24px 16px; }
}

/* ============================================================
   TABLET  (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .section { padding: 70px 20px; }

  /* Door */
  .door-frame {
    width: min(76vw, 310px);
    height: min(115vw, 460px);
  }

  /* Gift room */
  .gift-room-grid { grid-template-columns: repeat(3,1fr); gap: 16px; }

  /* Cinema */
  .cinema-frame   { height: clamp(220px,42vw,380px); max-width: 95vw; }
  .cinema-nav     { width: 40px; height: 40px; font-size: 22px; }

  /* Short clips */
  .clips-container { max-width: 96vw; }
  .clip-video-wrap { border-radius: 14px; }

  /* Countdown */
  .countdown-grid { gap: 14px; }
  .cd-unit        { min-width: 80px; padding: 16px 10px; }
  .cd-num         { font-size: clamp(24px,5vw,34px); }

  /* Modals */
  .thankyou-modal-inner { padding: 34px 28px; }
}

/* ============================================================
   TABLET PORTRAIT  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .section { padding: 64px 18px; }

  .gift-room-grid { grid-template-columns: repeat(3,1fr); gap: 14px; }
  .gift-item      { font-size: 46px; padding: 12px; }

  .cinema-frame   { height: clamp(200px,50vw,340px); }

  .clips-container { gap: 10px; }
  .clips-nav       { width: 38px; height: 38px; font-size: 20px; }

  #garden-field   { height: clamp(240px,48vw,340px); }

  .letter-paper   { font-size: clamp(16px,3.5vw,22px); }

  .thankyou-modal-inner { font-size: var(--text-base); padding: 28px 22px; }

  #music-player   { padding: 8px 12px; gap: 7px; }
}

/* ============================================================
   MOBILE  (≤ 600px) — iPhone SE, 12/13/14, Pixel
   ============================================================ */
@media (max-width: 600px) {
  html { font-size: 15px; }

  .section {
    padding: 56px 16px;
    min-height: 100svh;
  }

  /* Hero */
  .hero-sub  { font-size: 14px; }
  .cake-wrap { transform: scale(0.82); }

  /* Door */
  .door-frame {
    width: min(82vw, 250px);
    height: min(126vw, 370px);
  }
  #scene-password .glass { padding: 24px 16px; }
  .password-form { gap: 8px; }
  .password-form input { min-width: 140px; }

  /* Gift room */
  .gift-room-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .gift-item      { font-size: 42px; padding: 10px; border-radius: 14px; }
  .gift-reveal-inner { padding: 20px 14px; border-radius: 18px; }

  /* Cinema */
  .cinema-frame   { height: clamp(180px,56vw,280px); }
  .cinema-caption { font-size: 13px; padding: 14px 12px; }
  .cinema-nav     { width: 34px; height: 34px; font-size: 18px; }
  .cinema-nav-prev { left: 8px; }
  .cinema-nav-next { right: 8px; }
  .cinema-dots    { margin-top: 12px; gap: 6px; }
  .cinema-dot     { width: 7px; height: 7px; }

  /* Short clips */
  .clips-container { gap: 6px; max-width: 100%; }
  .clips-nav       { width: 34px; height: 34px; font-size: 18px; }
  .clip-video-wrap { border-radius: 12px; }
  .clip-title      { font-size: 13px; }
  .clips-dots      { gap: 6px; margin-top: 10px; }
  .clips-dot       { width: 7px; height: 7px; }

  /* Garden */
  #garden-field { height: clamp(210px,55vw,290px); border-radius: 16px; }
  .flower       { font-size: clamp(18px,4vw,24px); }

  /* Letter */
  .envelope     { font-size: clamp(60px,18vw,90px); }
  .letter-paper { font-size: 16px; line-height: 1.8; }
  .letter-paper.show { padding: 22px 16px; }

  /* Hidden / modals */
  .thankyou-modal-inner {
    padding: 24px 16px;
    font-size: var(--text-base);
    max-height: 80vh;
    border-radius: 18px;
  }

  /* Countdown */
  .countdown-grid { gap: 8px; flex-wrap: wrap; }
  .cd-unit        { min-width: 66px; padding: 12px 6px; border-radius: 14px; }
  .cd-num         { font-size: clamp(22px,7vw,32px); }
  .cd-label       { font-size: 9px; letter-spacing: 1px; }

  /* Thank you */
  #thankyou-message p { font-size: var(--text-base); }

  /* Ending */
  .moon          { font-size: clamp(40px,12vw,62px); }
  .ending-heart  { font-size: clamp(36px,10vw,52px); }
  #ending-title  { font-size: clamp(18px,6vw,28px); }
  #ending-sub    { font-size: clamp(14px,4.5vw,20px); }

  /* Music player — ultra compact */
  #music-player  { left: 10px; bottom: 10px; padding: 7px 10px; gap: 5px; }
  #music-title   { display: none; }
  #music-volume  { display: none; }
  #music-progress { width: 52px; }
}

/* ============================================================
   SMALL MOBILE  (≤ 430px) — iPhone 14 Pro Max and below
   ============================================================ */
@media (max-width: 430px) {
  .gift-room-grid { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .gift-item      { font-size: 40px; padding: 9px; }

  .cinema-nav  { width: 32px; height: 32px; font-size: 16px; }
  .clips-nav   { width: 32px; height: 32px; font-size: 16px; }

  .cd-unit     { min-width: 60px; padding: 10px 5px; }
  .cd-num      { font-size: clamp(20px,7vw,30px); }
}

/* ============================================================
   VERY SMALL  (≤ 390px) — iPhone 12/13/14
   ============================================================ */
@media (max-width: 390px) {
  .section { padding: 48px 14px; }

  .gift-item    { font-size: 36px; padding: 8px; border-radius: 12px; }
  .cinema-frame { height: clamp(160px,52vw,240px); }

  .letter-paper { font-size: 15px; }

  .cd-unit      { min-width: 56px; padding: 8px 4px; border-radius: 12px; }
  .cd-num       { font-size: clamp(18px,6.5vw,26px); }
}

/* ============================================================
   TINY  (≤ 360px) — older Androids
   ============================================================ */
@media (max-width: 360px) {
  .section { padding: 44px 12px; }

  .door-frame {
    width: min(86vw, 230px);
    height: min(134vw, 360px);
  }

  .gift-room-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .gift-item      { font-size: 34px; padding: 7px; }

  .cinema-nav, .clips-nav { width: 30px; height: 30px; font-size: 15px; }

  .cd-unit  { min-width: 52px; padding: 7px 4px; border-radius: 10px; }
  .cd-num   { font-size: clamp(17px,6vw,24px); }
  .cd-label { font-size: 8px; }

  #thankyou-message p { font-size: 14px; }
}

/* ============================================================
   MINIMUM  (≤ 320px) — very old devices
   ============================================================ */
@media (max-width: 320px) {
  html { font-size: 13px; }
  .section { padding: 40px 10px; }

  .hero-title { font-size: clamp(32px,11vw,48px); }

  .gift-room-grid { gap: 7px; }
  .gift-item      { font-size: 30px; padding: 6px; }

  .cinema-frame { height: clamp(140px,50vw,210px); }
  .cinema-nav, .clips-nav { width: 28px; height: 28px; font-size: 14px; }

  .countdown-grid { gap: 6px; }
  .cd-unit        { min-width: 48px; padding: 6px 3px; }
  .cd-num         { font-size: clamp(15px,6vw,22px); }

  .thankyou-modal-inner { padding: 18px 12px; }
}

/* ============================================================
   LANDSCAPE PHONES  (short viewport)
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .section { min-height: auto; padding: 40px 16px; }
  #scene-opening, #scene-door, #scene-password { padding: 20px 12px; }
  .cinema-frame   { height: min(58vh, 300px); }
  .clip-video-wrap { max-height: 60vh; }
  .cd-unit        { min-width: 60px; padding: 10px 6px; }
}

/* ============================================================
   LANDSCAPE  (≤ 768px height)
   ============================================================ */
@media (max-height: 768px) and (orientation: landscape) and (max-width: 900px) {
  .cinema-frame { height: min(62vh, 340px); }
}

/* ============================================================
   HIGH DPR — crisp borders on retina screens
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .glass { border-width: 0.5px; }
  .cinema-frame { box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.10); }
}