/* ==========================================================================
   MOBILE ONLY  ·  max-width: 899px
   ------------------------------------------------------------------------
   Desktop is settled and this file must not touch it.

   The phone composition (Master's call, after trying and rejecting a
   semi-transparent ghost overlay — "it's kinda absurd and bad experience"):

     1. Suzu-chan sits BEHIND the content elements  ->  z-index 1 (content is 3)
     2. she is 100% visible                         ->  opacity 1, no blending
     3. she is a real figure in her own band at the foot of the screen,
        so the copy is never read through her

   Rules for anyone editing this file:
     - do NOT lower her opacity and do NOT raise her above .scene__content.
       The ghost overlay was tried and explicitly rejected by Master.
     - --suzu-h is the one knob for how much of the screen she takes.
   ========================================================================== */

:root {
  --suzu-h: 100svh;              /* << the knobs: her size */
  --suzu-scale: 162%;
}

.scene__sprite {
  /* BEHIND the copy. .scene__content is z-index 3 — if a panel ever reaches
     her, the panel wins and no text is ever obscured. */
  position: fixed !important;
  z-index: 1 !important;

  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  margin-inline: 0;
  transform: translateX(-50%) !important;

  /* The SIZE Master picked out of the ghost-overlay experiment — full-height
     and wide enough to read as a big presence — but SOLID and BEHIND the copy.
     Rejected: the transparency. Kept: the scale. */
  height: var(--suzu-h);
  width: var(--suzu-scale);
  max-width: none;
  object-fit: contain;
  object-position: center bottom;

  opacity: 1 !important;         /* 100% visible — never animated, never 0 */
  pointer-events: none;          /* taps pass through to the bell and buttons */
  user-select: none;

  filter: drop-shadow(0 22px 40px rgba(110, 38, 78, .30))
          saturate(1.03) sepia(.06) brightness(1.012);
  animation: suzu-rise .62s var(--ease-spring) both;
}

/* the scene light wrap goes back under her — she is a lit figure again */
.scene__light {
  z-index: 0 !important;
  opacity: .85;
}

/* the hidden bell stays findable: above the copy, well clear of her */
.charm { z-index: 6; }

/* Movement ONLY — never animate her opacity. An entrance fade with
   fill-mode:both was measured holding its "from" state at opacity:0, which
   is how she ended up invisible. Her opacity is a hard 1 and stays there. */
@keyframes suzu-rise {
  from { transform: translateX(-50%) translateY(22px); }
  to   { transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .scene__sprite { animation: none; }
}

/* ---- copy above her, and a reserved band so she is never crowded ------- */
.scene {
  min-height: 100svh;
}
.scene__content {
  padding-top: calc(var(--hud-h) + 3svh);
  /* she is a full-height backdrop BEHIND the copy, so no band is reserved:
     the copy simply runs over her, which is what "behind the content" means */
  padding-bottom: calc(var(--s-8) + 2svh + env(safe-area-inset-bottom));
}

/* panels stay opaque: text is always read on white, never through her */
.panel {
  background: rgba(255, 255, 255, .96);
}
.panel--dark {
  background: rgba(255, 250, 253, .94);
}

.hint-btn {
  z-index: 55;
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
}

/* ---- overflow guards: nothing may run off the right edge --------------- */
.scene__content > * { min-width: 0; max-width: 100%; }
.scene__title, .scene__lead, .panel p, .panel li, .chip, .btn {
  overflow-wrap: anywhere;
  word-break: break-word;
}
img, svg, video, iframe { max-width: 100%; height: auto; }
.scene-nav .btn { flex: 1 1 auto; justify-content: center; }
.profile__stats li { min-width: 0; }
.profile__stats li b, .profile__stats li span { overflow-wrap: anywhere; }

/* ---- smaller phones: give her less room so the copy keeps breathing ---- */
@media (max-width: 420px) {
  :root { --suzu-scale: 150%; }
  .panel { padding: var(--s-5); }
  .panel .scene__title {
    font-size: clamp(1.75rem, 8.5vw, 2.6rem);
  }
  .panel .scene__lead { font-size: var(--t-body); }
  .chips, .profile__stats, .gallery__tabs, .releases {
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
  }
  .hud { padding-inline: var(--s-3); gap: var(--s-2); }
}

/* the reaction animation must respect the mobile centring transform */
.scene__sprite.is-reacting {
  opacity: .001 !important;
}
.scene__sprite.is-happy {
  animation: suzu-delight .62s var(--ease-spring) both !important;
}


/* ===== MOBILE OVERFLOW FIX (root cause) =====================================
   .scene is display:grid with grid-template-columns:1fr, and the grid item
   .scene__lead defaults to min-width:auto, so the track inflated to the
   content's 704px (664px panel + 40px padding) and overflowed a 485px phone.
   minmax(0,1fr) lets the track shrink to the viewport; min-width:0 lets the
   items shrink with it. Nothing is clipped any more.
   ========================================================================== */
.scene { grid-template-columns: minmax(0, 1fr); }
.scene__lead,
.scene__content { min-width: 0; width: 100%; }
.scene__content > * { min-width: 0; max-width: 100%; }
.scene__bg { max-width: 100vw; }


/* ===== APP-STYLE STICKY BOTTOM NAV (Master: "like how an apps look like and
   sticky there even when scrolling... change it to icons whenever possible")
   ------------------------------------------------------------------------ */
.scene-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex; flex-wrap: nowrap; gap: 2px;
  margin: 0;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.scene-nav--top { display: none; }   /* the redundant clone is dropped on phones */
.scene-nav .btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 5px 2px; border-radius: 10px; text-decoration: none;
}
.scene-nav .btn .nav__icon { font-size: 18px; line-height: 1; }
.scene-nav .btn .nav__label {
  font-size: 8.5px; line-height: 1.1; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* reserve room so nothing hides behind the fixed bar */
.scene__content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.hint-btn { bottom: calc(66px + env(safe-area-inset-bottom)); }


/* ===== MV THEATER ON MOBILE: ONE VIDEO AT A TIME (Master) =================
   The slides become full-width 16:9 so only one shows; the arrow buttons and
   scroll-snap step to the next. ================================================= */
.scene--mv .theater__slide {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  scroll-snap-align: center;
}
.scene--mv .theater__track {
  justify-content: flex-start;
  gap: 0;
  scroll-snap-type: x mandatory;
}




/* ===== SECTIONS GROW + SCROLL TO SHOW ALL CONTENT (Master) =================
   .scene__lead was locked to height:100svh and .scene to overflow:hidden, so
   content taller than one screen (the content is ~1036px on a 757px phone) was
   CLIPPED and unreachable - and the body-level footer landed at the clip
   boundary and overlapped the theater video. Let the lead grow (min-height
   keeps the full-screen first impression) and let the page scroll vertically.
   ========================================================================== */
.scene { overflow-x: hidden; overflow-y: visible; }
.scene__lead { height: auto; min-height: 100svh; }
.scene__content { height: auto; }


/* ===== NARROW-PHONE (≤390px) ROBUSTNESS =====================================
   These only bite on real phones (my headless floor is 485px):
   - Long eyebrow / dialogue text must wrap, never run off the right edge.
   - The 9 nav labels truncate ("Co…" for Connect) at 390px, so the app bar goes
     icons-only (Master: "change it to icons whenever possible") - each button
     keeps its title tooltip. Fits any width, no truncation.
   - The bar clears the iOS/Android home indicator via safe-area padding.
   ========================================================================== */
.eyebrow, .dialogue, .dialogue__body, .dialogue__text, .panel h1, .panel h2,
.panel p, .panel li, .scene__title, .scene__lead, .lead--romaji {
  overflow-wrap: anywhere; word-break: break-word; white-space: normal; max-width: 100%;
}
.scene-nav .btn .nav__label { display: none; }   /* icons only on phones */
.scene-nav .btn { padding: 8px 2px; }
.scene-nav .btn .nav__icon { font-size: 20px; line-height: 1; }
.scene-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }


/* Gallery on phones: 2 columns */
.masonry { grid-template-columns: repeat(2, 1fr); }
.album-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }

/* gallery section 2 on phones */
.scene__section--gallery { padding: var(--s-5) var(--s-3) var(--s-6); }


/* ---- Popovers (Bell collection + BGM volume) on mobile ----
   Fixed under the HUD so they never clip at the edges or scroll away,
   sized to the viewport, with bigger touch targets for the slider/mute. */
@media (max-width: 899px) {
  .bell-pop, .vol-pop {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    right: 12px;
    left: auto;
    width: min(300px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    z-index: 90;
  }
  .vol-pop { width: min(320px, calc(100vw - 24px)); }
  .vol-pop__mute { width: 44px; height: 44px; font-size: 1.2rem; }
  .vol-pop__slider { height: 8px; }
  .vol-pop__slider::-webkit-slider-thumb { width: 26px; height: 26px; }
  .vol-pop__slider::-moz-range-thumb { width: 26px; height: 26px; }
  .vol-pop__pct { font-size: 1rem; min-width: 3.4em; }
}