/* ==========================================================================
   Responsive adaptations — cinematic composition preserved
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --letterbox: clamp(12px, 3vh, 28px);
  }

  .caption {
    width: min(92vw, 28rem);
    font-size: clamp(1.15rem, 4.8vw, 2rem);
  }

  .caption--hero {
    font-size: clamp(1.8rem, 9vw, 3.4rem);
    letter-spacing: 0.08em;
  }

  .whisper {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }

  /* Larger cinematic characters on tablet/phone */
  .character {
    width: clamp(140px, 34vw, 220px);
    bottom: 12%;
  }

  .character--bear {
    width: clamp(170px, 42vw, 280px);
  }

  .character--closeup {
    width: clamp(160px, 46vw, 280px);
  }

  .characters--together .character--masha {
    left: 18%;
    width: clamp(130px, 32vw, 200px);
  }

  .characters--together .character--bear {
    left: 46%;
    width: clamp(160px, 40vw, 250px);
  }

  .characters--montage .character--masha {
    left: 12%;
    width: clamp(130px, 32vw, 200px);
  }

  .characters--montage .character--bear {
    left: 46%;
    width: clamp(160px, 40vw, 250px);
  }

  .characters--cycle .character--masha,
  .characters--facing .character--masha {
    left: 4%;
    width: clamp(130px, 34vw, 210px);
  }

  .characters--cycle .character--bear,
  .characters--facing .character--bear {
    right: 2%;
    width: clamp(160px, 42vw, 270px);
  }

  .characters--side .character--masha {
    left: 12%;
    width: clamp(130px, 32vw, 200px);
  }

  .characters--side .character--bear {
    left: 46%;
    width: clamp(160px, 40vw, 250px);
  }

  .characters--farewell .character--masha {
    left: 28%;
    bottom: 20%;
    width: clamp(72px, 18vw, 110px);
  }

  .characters--farewell .character--bear {
    left: 48%;
    bottom: 18%;
    width: clamp(90px, 22vw, 140px);
  }

  .phone {
    top: 38%;
    width: min(260px, 78vw);
  }

  .phone__screen {
    min-height: 360px;
  }

  .scene__copy--phone {
    padding-bottom: calc(var(--letterbox) + 5vh);
  }

  .chat {
    width: min(340px, 90vw);
  }

  .chat__thread {
    min-height: 280px;
  }

  .memory-card {
    width: clamp(120px, 42vw, 200px);
  }

  .audio-toggle {
    right: 12px;
    top: calc(var(--letterbox) + 8px + var(--safe-top));
  }

  .progress {
    width: min(120px, 36vw);
  }

  .encore {
    top: 56%;
    width: min(94vw, 20rem);
  }

  .encore__invite {
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
    padding: 0.9rem 1.1rem;
  }

  .encore__play {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 560px) {
  .intro {
    padding: 1.5rem 1.25rem;
  }

  .intro__line {
    font-size: clamp(1.15rem, 5.5vw, 1.55rem);
  }

  .intro__cta {
    margin-top: 2.5rem;
    gap: 1rem;
  }

  .btn-start {
    padding: 0.8rem 2rem;
    letter-spacing: 0.22em;
  }

  .character {
    width: clamp(150px, 40vw, 210px);
    bottom: 10%;
  }

  .character--bear {
    width: clamp(180px, 48vw, 260px);
  }

  .character--closeup {
    width: clamp(170px, 52vw, 260px);
  }

  .characters--meeting .character--masha {
    left: 0%;
    width: clamp(150px, 42vw, 210px);
  }

  .characters--meeting .character--bear {
    right: -2%;
    width: clamp(180px, 50vw, 260px);
  }

  .characters--together .character--masha {
    left: 8%;
    width: clamp(140px, 38vw, 200px);
  }

  .characters--together .character--bear {
    left: 44%;
    width: clamp(170px, 46vw, 240px);
  }

  .characters--montage .character--masha {
    left: 4%;
    width: clamp(140px, 38vw, 200px);
  }

  .characters--montage .character--bear {
    left: 42%;
    width: clamp(170px, 46vw, 240px);
  }

  .characters--cycle .character--masha,
  .characters--facing .character--masha {
    left: 0%;
    width: clamp(145px, 40vw, 210px);
  }

  .characters--cycle .character--bear,
  .characters--facing .character--bear {
    right: -4%;
    width: clamp(175px, 48vw, 260px);
  }

  .characters--side .character--masha {
    left: 6%;
    width: clamp(140px, 38vw, 200px);
  }

  .characters--side .character--bear {
    left: 42%;
    width: clamp(170px, 46vw, 240px);
  }

  .characters--farewell .character--masha {
    left: 26%;
    bottom: 18%;
    width: clamp(80px, 22vw, 120px);
  }

  .characters--farewell .character--bear {
    left: 48%;
    bottom: 16%;
    width: clamp(100px, 28vw, 150px);
  }

  .caption--goodbye {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .rewind__faces {
    gap: 0.5rem;
  }

  .phone__call {
    margin-top: 3rem;
  }
}

@media (max-height: 700px) and (orientation: landscape) {
  :root {
    --letterbox: 8px;
  }

  .phone {
    transform: translate(-50%, -50%) scale(0.72);
    top: 48%;
  }

  .phone__screen {
    min-height: 280px;
  }

  .chat__thread {
    min-height: 200px;
  }

  .character {
    bottom: 6%;
    width: clamp(90px, 18vw, 140px);
  }

  .character--bear {
    width: clamp(110px, 22vw, 170px);
  }

  .caption {
    font-size: clamp(1rem, 3.2vw, 1.6rem);
  }
}

@media (min-width: 1400px) {
  .caption {
    width: min(42rem, 70vw);
  }

  .character {
    width: clamp(100px, 12vw, 160px);
  }

  .character--bear {
    width: clamp(120px, 15vw, 200px);
  }
}

/* Touch-friendly targets */

@media (hover: none) {
  .audio-toggle {
    opacity: 0.85;
    width: 44px;
    height: 44px;
  }

  .btn-start {
    min-height: 48px;
    min-width: 140px;
  }
}