/*
 * Mobile editorial pass.
 * Keeps the existing story and scene mechanics while giving every phone-sized
 * chapter the same gutter, safe-area, type rhythm and touch behaviour.
 */

@media (max-width: 680px) {
  :root {
    --mobile-gutter: clamp(16px, 4.6vw, 20px);
    --mobile-top: max(64px, calc(env(safe-area-inset-top) + 50px));
    --mobile-bottom: calc(max(54px, env(safe-area-inset-bottom) + 44px));
    --mobile-control-gap: 12px;
    --mobile-glow-x: 72%;
    --mobile-glow-y: 14%;
    --mobile-shadow-x: 14%;
    --mobile-shadow-y: 88%;
    --mobile-glow: 255, 226, 180;
    --mobile-shadow: 105, 58, 62;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overscroll-behavior: none;
  }

  button,
  input,
  a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .paper-grain {
    opacity: 0.09;
    mix-blend-mode: soft-light;
  }

  #stage .scene {
    isolation: isolate;
  }

  #stage .scene::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(
        circle at var(--mobile-glow-x) var(--mobile-glow-y),
        rgba(var(--mobile-glow), 0.44),
        transparent 42%
      ),
      radial-gradient(
        circle at var(--mobile-shadow-x) var(--mobile-shadow-y),
        rgba(var(--mobile-shadow), 0.18),
        transparent 48%
      );
    mix-blend-mode: soft-light;
    opacity: 0.9;
  }

  .scene--prologue {
    --mobile-glow: 255, 228, 181;
    --mobile-shadow: 134, 76, 76;
    --mobile-glow-x: 69%;
    --mobile-glow-y: 16%;
  }

  .scene--opening {
    --mobile-glow: 255, 224, 171;
    --mobile-shadow: 116, 57, 60;
    --mobile-glow-x: 77%;
    --mobile-glow-y: 12%;
  }

  .scene--meal {
    --mobile-glow: 255, 179, 104;
    --mobile-shadow: 50, 37, 47;
    --mobile-glow-x: 73%;
    --mobile-glow-y: 18%;
  }

  .scene--cinema {
    --mobile-glow: 101, 171, 177;
    --mobile-shadow: 8, 24, 38;
    --mobile-glow-x: 82%;
    --mobile-glow-y: 17%;
  }

  .scene--christmas {
    --mobile-glow: 239, 190, 100;
    --mobile-shadow: 9, 45, 37;
    --mobile-glow-x: 74%;
    --mobile-glow-y: 16%;
  }

  .scene--valentines {
    --mobile-glow: 255, 200, 205;
    --mobile-shadow: 118, 72, 92;
    --mobile-glow-x: 72%;
    --mobile-glow-y: 13%;
  }

  .scene--camping {
    --mobile-glow: 248, 221, 139;
    --mobile-shadow: 73, 101, 60;
    --mobile-glow-x: 77%;
    --mobile-glow-y: 12%;
  }

  .scene--travel {
    --mobile-glow: 250, 192, 113;
    --mobile-shadow: 24, 67, 83;
    --mobile-glow-x: 70%;
    --mobile-glow-y: 13%;
  }

  .scene--disney {
    --mobile-glow: 231, 163, 193;
    --mobile-shadow: 60, 32, 90;
    --mobile-glow-x: 77%;
    --mobile-glow-y: 14%;
  }

  .scene--hiking {
    --mobile-glow: 226, 202, 120;
    --mobile-shadow: 24, 67, 47;
    --mobile-glow-x: 79%;
    --mobile-glow-y: 12%;
  }

  .scene--qingdao {
    --mobile-glow: 255, 236, 179;
    --mobile-shadow: 52, 121, 141;
    --mobile-glow-x: 77%;
    --mobile-glow-y: 12%;
  }

  .scene--terms {
    --mobile-glow: 255, 233, 184;
    --mobile-shadow: 150, 81, 72;
    --mobile-glow-x: 78%;
    --mobile-glow-y: 14%;
  }

  .scene--finale {
    --mobile-glow: 255, 221, 154;
    --mobile-shadow: 151, 82, 67;
    --mobile-glow-x: 75%;
    --mobile-glow-y: 12%;
  }

  .scene--kiss-reward {
    --mobile-glow: 238, 157, 177;
    --mobile-shadow: 29, 47, 66;
    --mobile-glow-x: 76%;
    --mobile-glow-y: 18%;
  }

  .scene__top {
    top: max(10px, env(safe-area-inset-top));
    right: var(--mobile-gutter);
    left: var(--mobile-gutter);
    min-height: 42px;
    padding: 8px 46px 8px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .scene__top b {
    font-size: 11.5px;
  }

  .scene__top time {
    font-size: 11px;
  }

  .music-toggle {
    top: max(10px, env(safe-area-inset-top));
    right: var(--mobile-gutter);
  }

  #stage .scene > [class$="__layout"] {
    width: 100%;
    max-width: none;
    padding-right: var(--mobile-gutter);
    padding-left: var(--mobile-gutter);
    padding-top: var(--mobile-top);
    padding-bottom: var(--mobile-bottom);
  }

  .scene h2 {
    max-width: 100%;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .scene__kicker {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 0.055em;
  }

  .scene [class$="__lead"]:not(.kiss-reward__lead):not(.disney__lead) {
    max-width: 25em;
    margin-right: auto;
    margin-left: auto;
    font-size: 16px;
    line-height: 1.72;
    text-wrap: pretty;
  }

  .scene-actions,
  .finale__actions,
  .terms__actions {
    align-items: stretch;
    width: 100%;
    max-width: 380px;
    gap: var(--mobile-control-gap);
    margin-right: auto;
    margin-left: auto;
  }

  .next-button,
  .back-button {
    min-height: 48px;
    padding: 11px 16px;
    font-size: 13.5px;
    line-height: 1.2;
  }

  .scene-actions .next-button,
  .finale__actions .next-button,
  .terms__actions .next-button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  .scene-actions .back-button,
  .finale__actions .back-button,
  .terms__actions .back-button {
    flex: 0 1 auto;
    justify-content: center;
  }

  .next-button i,
  .back-button i {
    flex: 0 0 auto;
  }

  .stage__footer {
    right: var(--mobile-gutter);
    bottom: max(10px, env(safe-area-inset-bottom));
    left: var(--mobile-gutter);
    font-size: 10px;
  }

  .scene-number b {
    font-size: 14px;
  }

  .gate {
    padding: max(62px, calc(env(safe-area-inset-top) + 48px)) var(--mobile-gutter)
      max(34px, env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 16%, rgba(255, 251, 240, 0.86), transparent 34%),
      radial-gradient(circle at 80% 82%, rgba(193, 132, 95, 0.22), transparent 34%),
      linear-gradient(145deg, #f8ecda 0%, #eed6bb 52%, #d9af95 100%);
  }

  .gate__card {
    padding: 54px 22px 38px;
  }

  .gate h1 {
    line-height: 1.13;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .passcode-row {
    gap: 10px;
  }

  .passcode-row input,
  .passcode-row button {
    min-height: 50px;
  }

  .passcode-row input {
    font-size: 17px;
    letter-spacing: 0.15em;
  }

  .question-layer {
    padding: 12px;
  }

  .question-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 44px 20px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .question-card__close {
    top: 7px;
    right: 7px;
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  .question-card h2 {
    padding-right: 10px;
    font-size: clamp(27px, 8vw, 35px);
    line-height: 1.38;
    text-wrap: balance;
  }

  .choice-option {
    min-height: 52px;
    padding: 11px 13px;
  }

  .choice-option .choice-text {
    font-size: 15px;
    line-height: 1.45;
  }

  .question-card__actions {
    gap: 10px;
  }

  .question-card__submit,
  .question-card__cancel {
    min-height: 48px;
    padding: 10px 16px;
    font-size: 13.5px;
  }

  .scene-prelude {
    padding: max(28px, env(safe-area-inset-top)) var(--mobile-gutter)
      max(22px, env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 36%, rgba(255, 250, 215, 0.9) 0 10%, rgba(255, 226, 179, 0.44) 35%, transparent 58%),
      radial-gradient(circle at 82% 84%, rgba(180, 110, 88, 0.16), transparent 32%),
      linear-gradient(148deg, #fbf1df 0%, #f2d5b5 45%, #e6b49a 73%, #d9a08c 100%);
  }

  .scene-prelude__content {
    gap: clamp(13px, 2.1vh, 19px);
  }

  .scene-prelude__prompt {
    max-width: 13em;
    font-size: clamp(25px, 7.1vw, 32px);
  }

  .scene-prelude__caption {
    max-width: 21em;
    font-size: clamp(14px, 3.9vw, 16px);
  }

  .scene-prelude__photo-stage {
    width: min(92vw, 430px);
    height: min(44svh, 420px);
    min-height: 220px;
  }

  .scene-prelude__photo img {
    max-width: min(92vw, 430px);
    max-height: min(44svh, 420px);
    border-radius: 3px;
    box-shadow: 0 20px 48px rgba(88, 48, 42, 0.24);
  }

  .scene-prelude__skip {
    right: var(--mobile-gutter);
    bottom: max(13px, env(safe-area-inset-bottom));
    min-height: 44px;
    padding: 9px 15px;
    font-size: 11px;
  }

  .terms__card {
    width: 100%;
  }

  .finale__letter {
    width: 100%;
    padding-right: 23px;
    padding-left: 23px;
  }

  .finale__message {
    font-size: 16px;
    line-height: 1.78;
  }

  .finale__message p {
    text-wrap: pretty;
  }

  .kiss-reward__layout {
    width: 100%;
  }

  .kiss-reward__cat {
    max-width: 104px;
  }

  .back-button--kiss {
    width: min(220px, 68vw);
    min-height: 48px;
  }

  .next-button:hover,
  .back-button:hover,
  .scene-prelude__skip:hover {
    transform: none;
  }

  .next-button:active,
  .back-button:active,
  .scene-prelude__skip:active,
  .passcode-row button:active,
  .choice-option:active,
  .question-card__submit:active,
  .question-card__cancel:active {
    transform: translateY(1px) scale(0.985);
    transition-duration: 80ms;
  }
}

@media (max-width: 360px) {
  .scene-actions,
  .finale__actions {
    grid-template-columns: 1fr;
  }

  .scene-actions,
  .finale__actions,
  .terms__actions {
    flex-direction: column;
  }

  .scene-actions .next-button,
  .scene-actions .back-button,
  .finale__actions .next-button,
  .finale__actions .back-button,
  .terms__actions .next-button,
  .terms__actions .back-button {
    width: 100%;
  }
}

@media (max-width: 680px) and (max-height: 650px) {
  :root {
    --mobile-top: max(58px, calc(env(safe-area-inset-top) + 44px));
    --mobile-bottom: calc(max(48px, env(safe-area-inset-bottom) + 38px));
  }

  .scene__kicker {
    margin-bottom: 6px;
  }

  .scene [class$="__lead"]:not(.kiss-reward__lead):not(.disney__lead) {
    margin-top: 11px;
    font-size: 15px;
    line-height: 1.62;
  }

  .scene-actions,
  .finale__actions,
  .terms__actions {
    margin-top: 14px;
  }

  .scene-prelude__photo-stage {
    height: 39svh;
    min-height: 180px;
  }

  .scene-prelude__photo img {
    max-height: 39svh;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .next-button,
  .back-button,
  .scene-prelude__skip,
  .passcode-row button {
    transition: none;
  }

  .next-button:active,
  .back-button:active,
  .scene-prelude__skip:active,
  .passcode-row button:active,
  .choice-option:active,
  .question-card__submit:active,
  .question-card__cancel:active {
    transform: none;
  }
}