/* ============================================================
 *  mobile.css — Responsive overrides for phones & small tablets
 *  Loaded LAST so it takes precedence over all scene CSS.
 *
 *  Breakpoints:
 *    ≤ 820px : tablet portrait  (stacking, reduced paddings)
 *    ≤ 640px : mobile           (aggressive stacking, smaller fonts)
 *    ≤ 420px : small mobile     (compact)
 * ============================================================ */

/* ============================================================
 *  TABLET PORTRAIT  (≤ 820px)
 * ============================================================ */
@media (max-width: 820px) {
  :root {
    --mobile-floating-ui-offset: calc(env(safe-area-inset-top, 0px) + 52px);
  }

  /* Keep html/body non-scrolling — each scene owns its own vertical scroll */
  html, body {
    overflow: hidden;
    background: var(--vr-blue-deep);
  }

  /* Default: center a single panel on screen */
  .scene.is-active {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Scenes with stacked content (header + panel + list) scroll from top,
     but children stay horizontally centered */
  #scene-calling-card.is-active,
  #scene-confidants.is-active,
  #scene-status.is-active,
  #scene-farewell.is-active {
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 1rem;
  }
  /* Lock non-scroll scenes to the viewport even when their glow layers are oversized */
  #scene-countdown.is-active,
  #scene-splash.is-active,
  #scene-finale.is-active {
    overflow-y: hidden !important;
  }
  /* Full-width children (lists, slabs, bars) still need to stretch */
  #scene-confidants .cf-slab,
  #scene-confidants .cf-scanlines,
  #scene-confidants .cf-wm,
  #scene-confidants .cf-bar,
  #scene-calling-card .cc-slab,
  #scene-calling-card .cc-scanlines,
  #scene-calling-card .cc-wm,
  #scene-calling-card .cc-bar {
    left: 0 !important;
    right: 0 !important;
  }

  /* ============ SPLASH (scene 1) ============ */
  /* Reduce clock size via width/height — don't touch transform (GSAP owns it) */
  .splash-clock {
    width: 220px !important;
    height: 220px !important;
    top: 10% !important;
    /* Must allow ring overflow — parent's contain: layout clips children
     * that extend past the clock bounds. */
    contain: none !important;
    overflow: visible !important;
  }
  /* Ring orbit halo — sized to account for .splash-clock's scale(0.6) */
  .splash-clock-rings {
    width: 460px !important;
    height: 460px !important;
    margin: -230px 0 0 -230px !important;
    display: block !important;
    opacity: 1 !important;
  }
  .splash-ring--outer svg text {
    font-size: 14px !important;
    letter-spacing: 8px !important;
  }
  /* Counter-rotating inner gear */
  .splash-clock-gear {
    width: 86px !important;
    height: 86px !important;
    margin: -43px 0 0 -43px !important;
  }
  /* Glow behind face scales with face */
  .splash-clock-aura {
    width: 280px !important;
    height: 280px !important;
    margin: -140px 0 0 -140px !important;
  }
  .splash-prism {
    top: 24.2% !important;
    width: 54vmin !important;
    height: 54vmin !important;
    margin: -27vmin 0 0 -27vmin !important;
    opacity: 0.22 !important;
  }
  .splash-rays {
    top: 25.4% !important;
    width: 96vmax !important;
    height: 96vmax !important;
    margin: -48vmax 0 0 -48vmax !important;
    opacity: 0.17 !important;
    filter: blur(3px) !important;
    transform: rotate(-4deg) !important;
  }
  .splash-clock-numerals { font-size: 0.88rem !important; }
  .splash-clock-numerals span:nth-child(1)  { transform: translate(0, -72px) !important; }
  .splash-clock-numerals span:nth-child(2)  { transform: translate(36px, -62px) !important; }
  .splash-clock-numerals span:nth-child(3)  { transform: translate(62px, -36px) !important; }
  .splash-clock-numerals span:nth-child(4)  { transform: translate(72px, 0) !important; }
  .splash-clock-numerals span:nth-child(5)  { transform: translate(62px, 36px) !important; }
  .splash-clock-numerals span:nth-child(6)  { transform: translate(36px, 62px) !important; }
  .splash-clock-numerals span:nth-child(7)  { transform: translate(0, 72px) !important; }
  .splash-clock-numerals span:nth-child(8)  { transform: translate(-36px, 62px) !important; }
  .splash-clock-numerals span:nth-child(9)  { transform: translate(-62px, 36px) !important; }
  .splash-clock-numerals span:nth-child(10) { transform: translate(-72px, 0) !important; }
  .splash-clock-numerals span:nth-child(11) { transform: translate(-62px, -36px) !important; }
  .splash-clock-numerals span:nth-child(12) { transform: translate(-36px, -62px) !important; }
  .splash-clock-hand--hour {
    width: 9px !important;
    height: 60px !important;
  }
  .splash-clock-hand--minute {
    width: 7px !important;
    height: 88px !important;
  }
  .splash-clock-hand--second {
    width: 2px !important;
    height: 110px !important;
  }
  .splash-clock-center {
    width: 17px !important;
    height: 17px !important;
    margin: -8.5px 0 0 -8.5px !important;
  }
  .splash-clock::before {
    width: 290px !important;
    height: 290px !important;
    margin: -145px 0 0 -145px !important;
    opacity: 0.26 !important;
    filter: blur(7px) !important;
  }
  .splash-clock::after {
    width: 250px !important;
    height: 250px !important;
    margin: -125px 0 0 -125px !important;
    opacity: 0.58 !important;
  }
  .splash-title { top: 57.8% !important; width: 84% !important; }
  .splash-title-small { font-size: 0.68rem !important; letter-spacing: 3px !important; margin-bottom: 10px !important; }
  .splash-title-big { font-size: 2.3rem !important; letter-spacing: 3px !important; line-height: 1.04 !important; }
  .splash-press { font-size: 0.75rem !important; letter-spacing: 3px !important; bottom: 40px !important; }
  html.perf-lite .splash-clock {
    top: 11.2% !important;
  }
  html.perf-lite .splash-prism {
    opacity: 0.18 !important;
  }
  html.perf-lite .splash-rays {
    opacity: 0.12 !important;
  }
  html.perf-lite .splash-clock::before {
    opacity: 0.22 !important;
  }

  /* ============ IGOR (scene 2) ============ */
  /* Portrait pinned near the top; dialogue at the bottom — no overlap */
  .igor-portrait {
    top: 6% !important;
    bottom: auto !important;
  }
  .igor-portrait-frame {
    width: 130px !important;
    height: 130px !important;
  }
  .igor-portrait-name {
    font-size: 0.75rem !important;
    letter-spacing: 4px !important;
    margin-top: 6px !important;
  }
  .dialogue-box {
    width: 90vw !important;
    max-width: 560px !important;
    bottom: 24px !important;
    padding: 24px 22px 18px !important;
    min-height: 0 !important;
  }
  .dialogue-text {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
  }
  .dialogue-nameplate {
    font-size: 0.78rem !important;
    padding: 3px 14px !important;
    letter-spacing: 3px !important;
  }

  /* ============ COMPENDIUM (scene 3) ============ */
  .compendium-frame {
    width: 92vw !important;
    max-width: 420px;
    padding: 56px 22px 32px !important;
  }
  .compendium-title { font-size: 1rem !important; letter-spacing: 4px !important; top: 18px !important; }
  .compendium-title::before, .compendium-title::after { margin: 0 8px !important; font-size: 0.7rem !important; }
  .compendium-item { font-size: 0.85rem !important; padding: 12px 16px !important; letter-spacing: 3px !important; }
  .compendium-item .lock { display: none !important; }
  .compendium-item .check { font-size: 0.7rem !important; left: 12px !important; }
  .compendium-item .cue { top: 6px !important; right: 8px !important; font-size: 0.42rem !important; letter-spacing: 1.5px !important; }
  .compendium-progress { margin-top: 16px !important; padding: 12px 12px 10px !important; }
  .compendium-progress-label { font-size: 0.54rem !important; letter-spacing: 3px !important; }
  .compendium-progress-text { font-size: 0.72rem !important; line-height: 1.35 !important; }
  .compendium-hud-tl {
    top: 12px !important;
    left: 12px !important;
    font-size: 0.6rem !important;
  }

  /* ============ TAROT (scene 4) ============ */
  .tarot-stage {
    width: 94% !important;
    max-width: 440px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 1rem 0 !important;
  }
  .tarot-card {
    width: 190px !important;
    height: 315px !important;
    margin: 0 auto !important;
    /* Ensure 3D context is preserved on mobile flip */
    transform-style: preserve-3d !important;
    perspective: 1200px !important;
  }
  .tarot-card-roman { font-size: 0.85rem !important; letter-spacing: 3px !important; }
  .tarot-card-symbol { font-size: 3.4rem !important; }
  .tarot-card-name { font-size: 0.85rem !important; letter-spacing: 2px !important; }
  .tarot-message { text-align: center !important; padding: 0 0.6rem !important; }
  .tarot-headline {
    font-size: 1.4rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 14px !important;
  }
  .tarot-body {
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
  }
  .tarot-signature {
    font-size: 0.82rem !important;
    letter-spacing: 3px !important;
    margin-top: 14px !important;
  }

  /* ============ STATUS (scene 5, P3R — stacked) ============ */
  .status-layout {
    width: 94% !important;
    max-width: 440px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: calc(var(--mobile-floating-ui-offset) + 0.8rem) 0 1rem !important;   /* return button scrolls with flow now */
  }
  /* HUD header shrinks and moves inward */
  .status-hud-top {
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    left: 14px !important;
    font-size: 0.58rem !important;
    letter-spacing: 2px !important;
    gap: 6px !important;
  }
  .hud-divider { width: 20px !important; }
  .hud-stamp { font-size: 0.55rem !important; padding: 2px 6px !important; }
  /* Corner brackets smaller on mobile */
  .status-c-tl, .status-c-tr, .status-c-bl, .status-c-br {
    width: 40px !important;
    height: 40px !important;
  }
  .status-c-tl { top: calc(env(safe-area-inset-top, 0px) + 52px) !important; left: 8px !important; }
  .status-c-tr { top: calc(env(safe-area-inset-top, 0px) + 52px) !important; right: 8px !important; }
  .status-c-bl, .status-c-br { display: none !important; }
  .p3-wm {
    right: 8px !important;
    bottom: 12px !important;
    font-size: 26vw !important;
    letter-spacing: -8px !important;
  }

  .status-makoto {
    min-height: 280px !important;
    padding: 44px 12px 14px !important;  /* more top padding for arcana badge */
    clip-path: none !important;           /* let the badge sit outside without clipping */
    border: 1px solid var(--p3-cyan-soft) !important;
  }
  .status-arcana-badge {
    top: 14px !important;   /* sit inside the panel instead of protruding */
    left: 14px !important;
    z-index: 4;
  }
  .arcana-badge-label { font-size: 0.5rem !important; }
  .arcana-badge-num { font-size: 1.1rem !important; }
  .status-makoto-img {
    max-height: 230px !important;
  }
  .status-makoto-img.is-fallback {
    width: 120px !important;
    height: 220px !important;
  }
  .status-makoto-caption {
    font-size: 0.8rem !important;
  }

  .status-card {
    padding: 1.4rem 1.2rem !important;
    clip-path: none !important;
    border: 1px solid var(--p3-cyan) !important;
  }
  .status-card-tag {
    font-size: 0.58rem !important;
    letter-spacing: 3px !important;
  }
  .status-card-name {
    font-size: 2.8rem !important;
    letter-spacing: 1px !important;
  }
  .status-card-subtitle {
    font-size: 0.66rem !important;
    letter-spacing: 3px !important;
  }
  .status-card-divider { margin: 12px 0 10px !important; }
  .arcana-row-label { font-size: 0.58rem !important; letter-spacing: 3px !important; }
  .arcana-row-value { font-size: 0.95rem !important; }
  .status-level-num { font-size: 1.25rem !important; }
  .status-card-quote {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }
  .status-resist { margin-top: 14px !important; padding-top: 10px !important; }
  .status-resist-title { font-size: 0.58rem !important; letter-spacing: 3px !important; }
  .status-resist-grid  { grid-template-columns: 1fr !important; gap: 6px !important; }
  .status-resist-pill  { padding: 5px 8px !important; font-size: 0.52rem !important; }
  .status-resist-label { letter-spacing: 1.5px !important; }
  .status-resist-badge { font-size: 0.48rem !important; }

  .status-stats {
    padding: 1.2rem 1rem 1.3rem !important;
    clip-path: none !important;
    border: 1px solid var(--p3-cyan-soft) !important;
    border-left: 3px solid var(--p3-cyan) !important;
  }
  .status-stats-title {
    font-size: 0.78rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 14px !important;
    gap: 6px !important;
  }
  .status-stats-mark {
    font-size: 0.52rem !important;
    letter-spacing: 2px !important;
    padding: 2px 6px !important;
  }
  .status-stat-row {
    grid-template-columns: 82px 1fr 42px !important;
    gap: 8px !important;
  }
  .status-stat-label {
    font-size: 0.66rem !important;
    letter-spacing: 2px !important;
  }
  .status-stat-bar { height: 7px !important; }
  .status-stat-value { font-size: 1rem !important; }
  .status-stat-grade { font-size: 0.55rem !important; padding: 1px 4px !important; }

  /* ============ CALLING CARD (scene 6) ============ */
  .cc-stage {
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: calc(var(--mobile-floating-ui-offset) + 0.8rem) 1rem 8rem !important;  /* bottom padding clears return button + bar */
    gap: 1.5rem;
    width: 100%;
    min-height: 100vh;
  }
  .calling-card {
    position: relative !important;
    left: auto !important; top: auto !important;
    transform: rotate(-2deg) !important;
    width: 88vw !important;
    max-width: 460px;
    margin: 1.2rem auto 0 !important;
  }
  .cc-file {
    position: relative !important;
    right: auto !important; top: auto !important;
    transform: none !important;
    width: 92vw !important;
    max-width: 440px;
    /* No clip-path on mobile — text was getting clipped. Use a solid panel. */
    clip-path: none !important;
    padding: 1.4rem 1.2rem !important;
    margin: 0 auto;
    border-top: 2px solid var(--p5-red);
    border-bottom: 2px solid var(--p5-red);
  }
  .cc-file-name { font-size: 2.6rem !important; }
  .cc-slab { clip-path: polygon(0 72%, 100% 46%, 100% 100%, 0 100%) !important; }
  .cc-wm { font-size: 60vw !important; }

  /* ============ CONFIDANTS (scene 7) ============ */
  .confidants-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: calc(var(--mobile-floating-ui-offset) + 0.2rem) 1.2rem 0.35rem !important;
    order: 1;
  }
  .confidants-title { font-size: 3rem !important; }
  .confidants-eyebrow { font-size: 0.62rem !important; letter-spacing: 4px !important; }
  .confidants-date { font-size: 0.6rem !important; letter-spacing: 3px !important; }

  .cf-file {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    width: calc(100% - 2.4rem) !important;
    max-width: 540px;
    margin: 0.2rem auto 0.6rem !important;
    padding: 1.4rem 1.2rem !important;
    /* No clip-path on mobile — content was getting clipped on the slanted edge */
    clip-path: none !important;
    border-top: 2px solid var(--p5-red);
    border-bottom: 2px solid var(--p5-red);
    order: 2;
  }
  .cf-file-name { font-size: 2.2rem !important; }
  .cf-file-codename { font-size: 1.6rem !important; }

  .confidants-list {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(100% - 2.4rem) !important;
    max-width: 620px;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;  /* stop being a flex container that collapses */
    margin: 0.8rem auto 10rem !important;  /* clear 46px button + 38px bar */
    padding-right: 0 !important;
    order: 3;
  }
  .confidant-row {
      grid-template-columns: 36px 28px 1fr auto !important;
      gap: 0.7rem !important;
      padding: 0.8rem 0.9rem !important;
    }
  .cf-skill-cost { display: none !important; }
    .cf-skill-name { font-size: 1.05rem !important; letter-spacing: 2px !important; }
    .cf-skill-desc { font-size: 0.54rem !important; max-width: 24ch !important; }
    .cf-skill-icon { font-size: 1.2rem !important; }
    .cf-skill-type { font-size: 0.5rem !important; min-width: 56px !important; padding: 0.18rem 0.4rem !important; }
    .cf-modal-card {
      width: min(92vw, 420px) !important;
      max-height: min(76vh, 640px) !important;
      padding: 22px 18px 20px !important;
    }
    .cf-modal-head {
      grid-template-columns: 54px 1fr !important;
      gap: 0.8rem !important;
      padding-right: 62px !important;
    }
    .cf-modal-icon {
      width: 54px !important;
      height: 54px !important;
      font-size: 1.5rem !important;
    }
    .cf-modal-kicker {
      font-size: 0.52rem !important;
      letter-spacing: 3px !important;
      margin-bottom: 0.45rem !important;
    }
    .cf-modal-name {
      font-size: 1.6rem !important;
      letter-spacing: 1px !important;
    }
    .cf-modal-copy {
      font-size: 0.88rem !important;
      line-height: 1.62 !important;
    }
    .cf-modal-close {
      top: 10px !important;
      right: 10px !important;
      font-size: 0.5rem !important;
      letter-spacing: 1px !important;
      padding: 0.34rem 0.5rem !important;
    }
  
    .cf-slab { width: 55% !important; opacity: 0.06 !important; }
    .cf-wm   { font-size: 70vw !important; }

  /* Scene-wide: make scene container scroll vertically on small screens */
  #scene-confidants, #scene-calling-card {
    overflow-y: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* ============ PHONOGRAPH (scene 8) ============ */
  #scene-phonograph.is-active {
    justify-content: flex-start !important;
    padding: calc(var(--mobile-floating-ui-offset) + 12px) 0 28px !important;
  }
  .phono-frame {
    width: 92vw !important;
    max-width: 380px !important;
    min-height: 0 !important;
    padding: 34px 22px 26px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background:
      linear-gradient(180deg, rgba(10, 20, 56, 0.92), rgba(4, 9, 28, 0.97)) !important;
  }
  .phono-frame::before {
    content: '' !important;
    display: block !important;
    inset: 12px !important;
  }
  .phono-stage {
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    margin: 0 auto 20px !important;
  }
  .phono-arm {
    width: 138px !important;
    right: -5% !important;
    top: 4% !important;
  }
  .phono-disc-label {
    width: 46px !important;
    height: 46px !important;
    margin: -23px 0 0 -23px !important;
  }
  .phono-info {
    display: block !important;
    margin-top: 2px !important;
  }
  .phono-track  { font-size: 1.05rem !important; letter-spacing: 2px !important; line-height: 1.16 !important; }
  .phono-artist { font-size: 0.82rem !important; letter-spacing: 1.4px !important; margin-top: 4px !important; }
  .phono-controls {
    margin-top: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .phono-play {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
  }
  .phono-progress {
    flex: 1 !important;
    width: auto !important;
  }
  .phono-story {
    min-height: 132px !important;
    margin-top: 16px !important;
    padding: 14px 14px 15px !important;
    text-align: left !important;
  }
  .phono-story-kicker { font-size: 0.5rem !important; letter-spacing: 3px !important; margin-bottom: 8px !important; }
  .phono-story-log { min-height: 92px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .phono-story-line { font-size: 0.82rem !important; line-height: 1.55 !important; }
  .phono-no-record { font-size: 0.7rem !important; padding: 0.5rem 0.8rem !important; }

  /* ============ FINALE (scene 9 — HSR legendary reveal) ============ */
  .finale-reveal          { padding: 0 0.8rem !important; }
  .finale-prism           { width: 92vmin !important; height: 92vmin !important; margin-top: -46vmin !important; margin-left: -46vmin !important; filter: blur(34px) !important; }
  .finale-aura-rays       { filter: blur(6px) brightness(0.78) !important; }
  .finale-aura-core       { filter: blur(10px) !important; }
  .finale-echo            { width: 22vmin !important; height: 22vmin !important; margin-top: -11vmin !important; margin-left: -11vmin !important; }
  .finale-tagline        { font-size: 1rem !important; letter-spacing: 4px !important; padding: 10px 22px !important; }
  .finale-dedication     { bottom: 18.5% !important; width: 80vw !important; font-size: 0.76rem !important; line-height: 1.45 !important; letter-spacing: 1.1px !important; }
  .finale-reveal-card    { width: min(86vw, 360px) !important; padding: 22px 28px 28px !important; background:
    radial-gradient(circle at 18% 16%, rgba(255, 235, 165, 0.2), transparent 28%),
    radial-gradient(circle at 82% 26%, rgba(255, 210, 95, 0.16), transparent 24%),
    linear-gradient(
      160deg,
      #090503 0%,
      #261603 18%,
      #5b3810 42%,
      #8e5f1c 52%,
      #5b3810 64%,
      #261603 84%,
      #090503 100%
    ) !important; box-shadow:
    0 0 32px rgba(255, 190, 60, 0.55),
    0 0 84px rgba(255, 180, 50, 0.28),
    inset 0 0 26px rgba(255, 220, 100, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; }
  .finale-reveal-badge   { gap: 6px !important; margin-bottom: 10px !important; padding: 6px 10px !important; }
  .finale-reveal-badge-main { font-size: 0.92rem !important; letter-spacing: 3px !important; }
  .finale-reveal-badge-sub  { font-size: 0.58rem !important; letter-spacing: 2px !important; }
  .finale-reveal-crown   { font-size: 0.62rem !important; letter-spacing: 3px !important; margin-bottom: 10px !important; }
  .finale-reveal-pips    { gap: 6px !important; margin-bottom: 12px !important; }
  .finale-reveal-pips .rarity-star { font-size: 26px !important; }
  .finale-reveal-name    { font-size: 2.6rem !important; letter-spacing: 4px !important; }
  .finale-reveal-arcana  { font-size: 0.82rem !important; letter-spacing: 3px !important; }
  .finale-reveal-sub     { font-size: 0.58rem !important; letter-spacing: 2px !important; }
  .finale-skip           { right: 16px !important; bottom: 18px !important; font-size: 0.56rem !important; letter-spacing: 3px !important; }

  /* ============ FAREWELL (scene 10) ============ */
  .farewell-dialogue { width: 88vw !important; }
  .watch-stage {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(92vw, 360px) !important;
    margin: calc(var(--mobile-floating-ui-offset) + 0.35rem) auto 1.8rem !important;
    padding-bottom: 1.4rem !important;
  }
  .watch-stage.is-shown {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .watch-glow {
    top: 150px !important;
    left: 50% !important;
    width: 320px !important;
    height: 320px !important;
    margin: -160px 0 0 -160px !important;
    filter: blur(8px) !important;
  }
  .gift-box { width: 200px !important; height: 200px !important; }
  .gift-reveal { width: 260px !important; }
  /* Watch layout stacks on mobile */
  .watch-layout {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'spinner'
      'info'
      'card' !important;
    gap: 12px !important;
  }
  .watch-spinner {
    width: min(78vw, 250px) !important;
    height: min(78vw, 250px) !important;
    margin: 0 auto !important;
  }
  .watch-info {
    max-width: 92vw !important;
    margin-top: 0 !important;
  }
  .watch-product-name {
    font-size: 1.28rem !important;
    letter-spacing: 4px !important;
    line-height: 1.2 !important;
  }
  .watch-product-subtitle {
    font-size: 0.76rem !important;
    letter-spacing: 3px !important;
    margin-top: 4px !important;
  }
  .watch-caption {
    max-width: 18ch !important;
    margin: 10px auto 0 !important;
    font-size: 0.94rem !important;
    line-height: 1.42 !important;
  }
  .item-card {
    max-width: 92vw !important;
    padding: 15px 14px 14px !important;
  }
  .watch-instruction {
    font-size: 0.52rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 10px !important;
  }
  .watch-finish {
    margin-top: 18px !important;
    padding: 0.78rem 1.7rem !important;
    font-size: 0.74rem !important;
    letter-spacing: 3px !important;
  }
  .item-card-name { font-size: 0.95rem !important; letter-spacing: 2px !important; }
  .item-card-flavor { font-size: 0.72rem !important; }
  .item-card-rows, .item-card-effect { font-size: 0.56rem !important; }
  .item-acquired {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(88vw, 320px) !important;
    margin: 0 auto 10px !important;
    padding: 9px 14px 11px !important;
  }
  .item-acquired-name {
    font-size: 0.96rem !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
  }
  .item-acquired-label { font-size: 0.56rem !important; letter-spacing: 3px !important; }
  .item-acquired-rarity { font-size: 0.66rem !important; letter-spacing: 2px !important; }
  .watch-sparkles { inset: -110px -50px -60px !important; }
  .farewell-closing-text {
    font-size: 1.85rem !important;
    letter-spacing: 4px !important;
    max-width: 88vw !important;
    padding: 0 18px !important;
  }
  html[lang='ja'] .watch-product-name {
    font-size: 1.12rem !important;
    letter-spacing: 1.5px !important;
    line-height: 1.35 !important;
  }
  html[lang='ja'] .watch-product-subtitle {
    font-size: 0.7rem !important;
    letter-spacing: 2px !important;
  }
  html[lang='ja'] .watch-caption {
    max-width: 18ch !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
  html[lang='ja'] .item-card-name {
    font-size: 0.86rem !important;
    letter-spacing: 0.8px !important;
    line-height: 1.35 !important;
  }
  html[lang='ja'] .item-card-rows,
  html[lang='ja'] .item-card-effect {
    font-size: 0.52rem !important;
  }
  html[lang='ja'] .item-card-flavor {
    font-size: 0.66rem !important;
    line-height: 1.6 !important;
  }
  html[lang='ja'] .watch-finish {
    font-size: 0.72rem !important;
    letter-spacing: 2px !important;
  }
  html[lang='ja'] .farewell-closing-text {
    font-size: 1.55rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.65 !important;
  }

  /* ============ BOTTOM BARS & RETURN BUTTONS ============ */
  /* Fixed to viewport on mobile so they stay pinned while scene scrolls */
  .cc-bar, .cf-bar {
    position: fixed !important;
    padding: 0 0.8rem !important;
    gap: 1rem !important;
    height: 34px !important;
    overflow-x: auto;
    white-space: nowrap;
  }
  .cc-bar-item, .cf-bar-item { font-size: 0.52rem !important; letter-spacing: 2px !important; flex-shrink: 0; }

  /* P5 return button (calling card + confidants) stays fixed above the status bar */
  .p5-return {
    position: fixed !important;
    bottom: 44px !important;
    right: 10px !important;
    padding: 0.55rem 1.1rem 0.55rem 0.8rem !important;
    font-size: 0.9rem !important;
    letter-spacing: 3px !important;
  }
  /* Velvet Room return button — scroll with content as the last element,
     so it can't overlay stats/text while scrolling */
  .vr-return {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    align-self: center !important;
    margin: 0.6rem auto 1.4rem !important;
    padding: 0.7rem 1.8rem !important;
    font-size: 0.85rem !important;
    letter-spacing: 3px !important;
  }
  /* Status scene (P3R) return button — stays pinned so it's always
     reachable without scrolling to the bottom. */
  .p3-return {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 12px !important;
    margin: 0 !important;
    align-self: auto !important;
    padding: 0.55rem 1.2rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 3px !important;
    z-index: 60 !important;
  }

  /* Corner brackets smaller */
  .c-tl, .c-br { width: 36px !important; height: 36px !important; }
  .c-tl { top: 0.9rem !important; left: 0.9rem !important; }
  .c-br { bottom: 2.4rem !important; right: 0.9rem !important; }
}

/* ============================================================
 *  MOBILE  (≤ 640px)
 * ============================================================ */
@media (max-width: 640px) {
  .splash-title { top: 58.2% !important; width: 84% !important; }
  .splash-title-big { font-size: 2.18rem !important; letter-spacing: 3px !important; line-height: 1.04 !important; }
  .splash-clock {
    width: 200px !important;
    height: 200px !important;
    top: 10.2% !important;
    contain: none !important;
    overflow: visible !important;
  }
  .splash-clock-rings {
    width: 420px !important;
    height: 420px !important;
    margin: -210px 0 0 -210px !important;
    opacity: 1 !important;
  }
  .splash-ring--outer svg text {
    font-size: 13px !important;
    letter-spacing: 7px !important;
  }
  .splash-clock-gear {
    width: 78px !important;
    height: 78px !important;
    margin: -39px 0 0 -39px !important;
  }
  .splash-clock-aura {
    width: 250px !important;
    height: 250px !important;
    margin: -125px 0 0 -125px !important;
  }
  .splash-prism {
    top: 24% !important;
    width: 52vmin !important;
    height: 52vmin !important;
    margin: -26vmin 0 0 -26vmin !important;
  }
  .splash-rays {
    top: 25% !important;
    width: 90vmax !important;
    height: 90vmax !important;
    margin: -45vmax 0 0 -45vmax !important;
  }
  .splash-clock::before {
    width: 260px !important;
    height: 260px !important;
    margin: -130px 0 0 -130px !important;
  }
  .splash-clock::after {
    width: 222px !important;
    height: 222px !important;
    margin: -111px 0 0 -111px !important;
  }
  .splash-clock-numerals { font-size: 0.82rem !important; }
  .splash-clock-numerals span:nth-child(1)  { transform: translate(0, -66px) !important; }
  .splash-clock-numerals span:nth-child(2)  { transform: translate(33px, -57px) !important; }
  .splash-clock-numerals span:nth-child(3)  { transform: translate(57px, -33px) !important; }
  .splash-clock-numerals span:nth-child(4)  { transform: translate(66px, 0) !important; }
  .splash-clock-numerals span:nth-child(5)  { transform: translate(57px, 33px) !important; }
  .splash-clock-numerals span:nth-child(6)  { transform: translate(33px, 57px) !important; }
  .splash-clock-numerals span:nth-child(7)  { transform: translate(0, 66px) !important; }
  .splash-clock-numerals span:nth-child(8)  { transform: translate(-33px, 57px) !important; }
  .splash-clock-numerals span:nth-child(9)  { transform: translate(-57px, 33px) !important; }
  .splash-clock-numerals span:nth-child(10) { transform: translate(-66px, 0) !important; }
  .splash-clock-numerals span:nth-child(11) { transform: translate(-57px, -33px) !important; }
  .splash-clock-numerals span:nth-child(12) { transform: translate(-33px, -57px) !important; }
  .splash-clock-hand--hour { width: 8px !important; height: 56px !important; }
  .splash-clock-hand--minute { width: 6px !important; height: 82px !important; }
  .splash-clock-hand--second { height: 100px !important; }
  .splash-clock-center { width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important; }
  .igor-portrait-frame { width: 110px !important; height: 110px !important; }
  .dialogue-text { font-size: 0.98rem !important; }

  .compendium-title { font-size: 0.9rem !important; letter-spacing: 3px !important; }
  .compendium-item  { font-size: 0.78rem !important; padding: 11px 14px !important; letter-spacing: 2px !important; }
  .compendium-progress-text { font-size: 0.64rem !important; }

  .cc-file-name { font-size: 2.1rem !important; }
  .cc-file-sub, .cc-file-row { font-size: 0.55rem !important; }

  .confidants-title { font-size: 2.4rem !important; }
  .cf-file-name { font-size: 1.9rem !important; }
  .cf-file-codename { font-size: 1.4rem !important; }
  .cf-file { margin-top: 0.15rem !important; padding: 1.2rem 1rem !important; }
  .confidants-header { padding-top: calc(var(--mobile-floating-ui-offset) - 0.1rem) !important; }
  .cf-stat-lbl { width: 66px !important; font-size: 0.52rem !important; }

  .confidant-row {
      grid-template-columns: 32px 26px 1fr auto !important;
      padding: 0.7rem !important;
    }
    .cf-skill-name { font-size: 0.95rem !important; }
    .cf-skill-desc { display: none !important; }
    .cf-skill-type { min-width: 48px !important; font-size: 0.46rem !important; }
    .cf-modal-card { width: min(94vw, 360px) !important; padding: 20px 16px 18px !important; }
    .cf-modal-name { font-size: 1.42rem !important; }
    .cf-modal-copy { font-size: 0.82rem !important; line-height: 1.56 !important; }
    .cf-modal-head { padding-right: 56px !important; }
    .cf-modal-meta { gap: 0.55rem !important; margin-top: 0.75rem !important; }
    .cf-modal-type, .cf-modal-cost, .cf-modal-label { font-size: 0.52rem !important; }
  
    .finale-reveal { padding: 0 0.6rem !important; }
  .finale-reveal-card { width: min(88vw, 336px) !important; padding: 18px 22px 22px !important; }
  .finale-reveal-badge-main { font-size: 0.8rem !important; }
  .finale-reveal-name { font-size: 2rem !important; letter-spacing: 3px !important; }
  .finale-reveal-pips .rarity-star { font-size: 22px !important; }
  .finale-dedication { bottom: 17.2% !important; width: 86vw !important; font-size: 0.7rem !important; letter-spacing: 1px !important; }
}

/* ============================================================
 *  SMALL MOBILE  (≤ 420px)
 * ============================================================ */
@media (max-width: 420px) {
  .splash-title { top: 58.8% !important; width: 84% !important; }
  .splash-title-big { font-size: 2rem !important; letter-spacing: 2px !important; line-height: 1.04 !important; }
  .splash-title-small { font-size: 0.64rem !important; }
  .splash-clock {
    width: 180px !important;
    height: 180px !important;
    top: 10.4% !important;
    contain: none !important;
    overflow: visible !important;
  }
  .splash-clock-rings {
    width: 380px !important;
    height: 380px !important;
    margin: -190px 0 0 -190px !important;
    opacity: 1 !important;
  }
  .splash-ring--outer svg text {
    font-size: 12px !important;
    letter-spacing: 5px !important;
  }
  .splash-clock-gear {
    width: 68px !important;
    height: 68px !important;
    margin: -34px 0 0 -34px !important;
  }
  .splash-clock-aura {
    width: 220px !important;
    height: 220px !important;
    margin: -110px 0 0 -110px !important;
  }
  .splash-prism {
    top: 24.2% !important;
    width: 50vmin !important;
    height: 50vmin !important;
    margin: -25vmin 0 0 -25vmin !important;
  }
  .splash-rays {
    top: 25.2% !important;
    width: 86vmax !important;
    height: 86vmax !important;
    margin: -43vmax 0 0 -43vmax !important;
  }
  .splash-clock::before {
    width: 240px !important;
    height: 240px !important;
    margin: -120px 0 0 -120px !important;
  }
  .splash-clock::after {
    width: 206px !important;
    height: 206px !important;
    margin: -103px 0 0 -103px !important;
  }
  .splash-clock-numerals { font-size: 0.76rem !important; }
  .splash-clock-numerals span:nth-child(1)  { transform: translate(0, -60px) !important; }
  .splash-clock-numerals span:nth-child(2)  { transform: translate(30px, -52px) !important; }
  .splash-clock-numerals span:nth-child(3)  { transform: translate(52px, -30px) !important; }
  .splash-clock-numerals span:nth-child(4)  { transform: translate(60px, 0) !important; }
  .splash-clock-numerals span:nth-child(5)  { transform: translate(52px, 30px) !important; }
  .splash-clock-numerals span:nth-child(6)  { transform: translate(30px, 52px) !important; }
  .splash-clock-numerals span:nth-child(7)  { transform: translate(0, 60px) !important; }
  .splash-clock-numerals span:nth-child(8)  { transform: translate(-30px, 52px) !important; }
  .splash-clock-numerals span:nth-child(9)  { transform: translate(-52px, 30px) !important; }
  .splash-clock-numerals span:nth-child(10) { transform: translate(-60px, 0) !important; }
  .splash-clock-numerals span:nth-child(11) { transform: translate(-52px, -30px) !important; }
  .splash-clock-numerals span:nth-child(12) { transform: translate(-30px, -52px) !important; }
  .splash-clock-hand--hour { width: 7px !important; height: 50px !important; }
  .splash-clock-hand--minute { width: 6px !important; height: 74px !important; }
  .splash-clock-hand--second { height: 90px !important; }
  .splash-clock-center { width: 14px !important; height: 14px !important; margin: -7px 0 0 -7px !important; }
  .compendium-frame { padding: 50px 16px 26px !important; }

  .confidants-title { font-size: 2rem !important; letter-spacing: 1px !important; }
  .cf-file-name { font-size: 1.65rem !important; }
  .cf-file-codename { font-size: 1.2rem !important; letter-spacing: 2px !important; }
  .confidants-header { padding-top: calc(var(--mobile-floating-ui-offset) - 0.25rem) !important; padding-bottom: 0.2rem !important; }
  .cf-file { margin-top: 0.1rem !important; }

  .cc-file-name { font-size: 1.8rem !important; }
  .cc-file { padding: 1.2rem 1rem !important; }

  .cc-bar, .cf-bar { gap: 0.6rem !important; }
  .cc-bar-item, .cf-bar-item { font-size: 0.48rem !important; letter-spacing: 1px !important; }
  .finale-dedication { bottom: 16.4% !important; width: 88vw !important; font-size: 0.64rem !important; letter-spacing: 0.9px !important; }
  .finale-reveal-card { width: min(90vw, 312px) !important; }
  .finale-tagline { font-size: 0.78rem !important; letter-spacing: 3px !important; padding: 9px 16px !important; }
  .finale-skip { right: 10px !important; bottom: 14px !important; font-size: 0.5rem !important; letter-spacing: 2px !important; }
}

/* ============================================================
 *  LANDSCAPE SHORT-HEIGHT (phones in landscape)
 * ============================================================ */
@media (max-width: 900px) and (max-height: 500px) {
  .cc-stage, #scene-confidants, #scene-calling-card {
    padding-top: 0.5rem !important;
  }
  .confidants-header { top: 0.8rem !important; }
  .cf-file { margin-top: 1rem !important; }
}