/* ======================================================
   Sayonara_Alice.exe — v72.04
   Smooth playback + mobile-first opening correction
====================================================== */

/* Reduce expensive continuously composited filters around the video layers. */
.v72-dual-memory-stage,
.v72-memory-lane,
.v72-opening-video {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.v72-opening-video {
  transition: opacity .43s ease, transform .72s var(--v72-ease);
  will-change: opacity, transform;
}

.v72-opening-video.is-visible {
  transform: translateZ(0) scale(1);
}

.v72-opening.is-memory-switching .v72-dual-memory-stage {
  filter: saturate(1.055) contrast(1.025);
}

/* The optimized video files do not need extra per-frame filtering. */
.v72-video-portal {
  filter: brightness(var(--v72-adaptive-portal-brightness));
}

/* ------------------------------------------------------
   Tablet/mobile: exactly one memory and a true centered UI.
------------------------------------------------------ */
@media (max-width: 1100px) {
  .v72-memory-lane--b,
  [data-v72-memory-lane="b"],
  [data-v72-video-portal="b"],
  [data-v72-opening-video^="b-"] {
    display: none !important;
    visibility: hidden !important;
  }

  .v72-dual-memory-stage {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 780px) {
  .v72-opening {
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: clip;
  }

  .v72-opening::before {
    background:
      linear-gradient(180deg, rgb(2 4 11 / .1) 0%, rgb(2 4 11 / .05) 38%, rgb(2 4 11 / .76) 59%, rgb(2 4 11 / .99) 100%),
      linear-gradient(90deg, rgb(2 4 11 / .12), transparent 72%);
  }

  .v72-opening-ambient--b,
  .v72-opening-noise,
  .v72-memory-orbit {
    display: none !important;
  }

  .v72-opening-ambient--a {
    inset: -8%;
    filter:
      blur(18px)
      brightness(var(--v72-adaptive-ambient-brightness))
      saturate(1.12);
    transform: scale(1.08);
    opacity: .68;
  }

  .v72-opening-shell {
    display: block;
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(.72rem, env(safe-area-inset-top)) clamp(.9rem, 4vw, 1.2rem) max(.7rem, env(safe-area-inset-bottom));
  }

  .v72-opening-header {
    position: relative;
    z-index: 12;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: .5rem;
    letter-spacing: .14em;
  }

  .v72-opening-header .v72-opening-instance,
  .v72-opening-header::after {
    display: none !important;
  }

  .v72-opening-status {
    justify-content: center;
    white-space: normal;
  }

  .v72-dual-memory-stage {
    top: calc(2.2rem + min(23svh, 186px));
    left: 50%;
    right: auto;
    width: auto;
    height: min(46svh, 372px);
    max-width: 82vw;
    aspect-ratio: 512 / 686;
    transform: translate(-50%, -50%);
    contain: layout paint;
  }

  .v72-memory-lane,
  .v72-video-portal {
    width: 100%;
    height: 100%;
  }

  .v72-memory-lane {
    border-radius: 18px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 91%, transparent 100%);
    box-shadow:
      0 22px 58px rgb(0 0 0 / .46),
      0 0 38px rgb(34 116 255 / .13),
      0 0 0 1px rgb(143 242 255 / .075);
  }

  .v72-opening-copy {
    position: relative;
    z-index: 11;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: calc(2.2rem + min(46svh, 372px) + 1rem) 0 3.2rem;
    text-align: center;
    opacity: 1;
    transform: none;
    animation: none;
  }

  .v72-opening-copy::before {
    inset: -1.2rem -.65rem -1.4rem;
    opacity: calc(var(--v72-adaptive-copy-surface) + .16);
    background: radial-gradient(ellipse at 50% 48%, rgb(1 4 12 / .98), rgb(1 4 12 / .72) 54%, transparent 86%);
    filter: blur(9px);
  }

  .v72-opening-kicker {
    justify-content: center;
    gap: .55rem;
    margin: 0 auto .72rem;
    font-size: clamp(.52rem, 2.1vw, .61rem);
    letter-spacing: .16em;
  }

  .v72-opening-kicker::before {
    width: 2rem;
  }

  .v72-opening-title {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    text-align: center;
    line-height: .82;
    letter-spacing: -.055em;
  }

  .v72-title-sayonara {
    font-size: clamp(2.35rem, 11.5vw, 3.75rem);
  }

  .v72-title-alice {
    margin-top: .12em;
    padding-right: 0;
    font-size: clamp(2.85rem, 14vw, 4.55rem);
  }

  .v72-title-extension {
    font-size: .19em;
  }

  .v72-opening-subtitle {
    width: min(100%, 21rem);
    max-width: 21rem;
    margin: .95rem auto 0;
    padding: 0 .3rem;
    font-size: clamp(.8rem, 3.45vw, .96rem);
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .v72-opening-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 20rem);
    margin: 1.05rem auto 0;
    gap: .58rem;
  }

  .v72-enter,
  .v72-archive-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: .7rem .85rem;
    box-sizing: border-box;
    font-size: clamp(.54rem, 2.35vw, .64rem);
    line-height: 1.2;
    letter-spacing: .105em;
    text-align: center;
    white-space: normal;
  }

  .v72-opening-footer {
    position: absolute;
    z-index: 12;
    right: 0;
    bottom: max(.48rem, env(safe-area-inset-bottom));
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
  }

  .v72-opening-coordinate {
    display: none !important;
  }

  .v72-scroll-cue {
    justify-self: auto;
    margin: 0 auto;
    padding: .2rem .6rem;
    font-size: .48rem;
    letter-spacing: .13em;
  }

  .v72-scroll-cue-line {
    display: none;
  }

  body.is-entering .v72-dual-memory-stage {
    transform: translate(-50%, -50%) scale(1.025);
  }
}

@media (max-width: 420px) {
  .v72-opening-shell {
    padding-right: .85rem;
    padding-left: .85rem;
  }

  .v72-dual-memory-stage {
    height: min(45svh, 348px);
    max-width: 80vw;
  }

  .v72-opening-copy {
    padding-top: calc(2.2rem + min(45svh, 348px) + .8rem);
  }

  .v72-title-sayonara {
    font-size: clamp(2.2rem, 11.1vw, 3rem);
  }

  .v72-title-alice {
    font-size: clamp(2.68rem, 13.5vw, 3.55rem);
  }

  .v72-opening-subtitle {
    font-size: clamp(.77rem, 3.35vw, .88rem);
  }

  .v72-opening-actions {
    width: min(100%, 18.5rem);
  }
}

@media (max-height: 700px) and (max-width: 780px) {
  .v72-dual-memory-stage {
    height: min(46svh, 320px);
  }

  .v72-opening-copy {
    padding-top: calc(2.2rem + min(46svh, 320px) + .55rem);
    padding-bottom: 2.5rem;
  }

  .v72-opening-kicker {
    margin-bottom: .55rem;
  }

  .v72-opening-subtitle {
    margin-top: .72rem;
    line-height: 1.35;
  }

  .v72-opening-actions {
    margin-top: .78rem;
  }

  .v72-enter,
  .v72-archive-link {
    min-height: 40px;
    padding-top: .58rem;
    padding-bottom: .58rem;
  }
}

@media (orientation: landscape) and (max-height: 640px) and (max-width: 1100px) {
  .v72-opening-shell {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) 1fr;
    align-items: center;
    padding: .7rem 1rem;
  }

  .v72-opening-header {
    position: absolute;
    top: .55rem;
    left: 1rem;
    width: auto;
  }

  .v72-dual-memory-stage {
    top: 50%;
    left: 75%;
    width: auto;
    height: 92svh;
    max-width: 52vw;
  }

  .v72-opening-copy {
    grid-column: 1;
    padding: 1.8rem 0 1rem;
    text-align: left;
  }

  .v72-opening-kicker { justify-content: flex-start; }
  .v72-opening-title,
  .v72-opening-subtitle { text-align: left; margin-left: 0; }
  .v72-opening-actions { align-items: stretch; margin-left: 0; width: min(100%, 18rem); }
  .v72-opening-footer { display: none; }
}