/* =====================================================================
   SIGNAL COMBAT 3.1 · THE STAGE (story panels as a motion comic: js/stage.js)
   The world map stays behind (its camera moved to the place); the stage is transparent over it.
   ===================================================================== */
.st { position: absolute; inset: 0; overflow: hidden; container-type: size; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  --hue: #F9F4EE; --dim: .2; user-select: none; -webkit-user-select: none; }
.st-veil { position: absolute; inset: 0; pointer-events: none; transition: opacity .9s ease;
  background: radial-gradient(130% 90% at 50% 40%, rgba(5, 6, 10, calc(var(--dim) * .6)), rgba(5, 6, 10, calc(.3 + var(--dim) * .7)) 75%),
              linear-gradient(180deg, rgba(5, 6, 10, .35), transparent 22%, transparent 62%, rgba(5, 6, 10, .82)); }
.st-set, .st-cast, .st-fx, .st-fxb { position: absolute; inset: 0; pointer-events: none; }
.st-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-set.st-near { z-index: 3; }
.st-cast { z-index: 2; }
.st-fx { z-index: 4; overflow: hidden; }
.st-set > .st-svg { animation: st-set-in .7s ease both; }
.st.same-set .st-set > .st-svg { animation: none; }
@keyframes st-set-in { from { opacity: 0; } }

/* the sheet a story panel sits in: see-through (the world is the backdrop); the world under it, put in scene mode */
.sg.v.story { background: none; }
.ws.st-on .ws-cam { filter: blur(var(--st-blur, 0px)); transition: transform 1.3s cubic-bezier(.22, .7, .18, 1), filter .8s ease; }
.ws.st-on .w-ch, .ws.st-on .wd, .ws.st-on .m-pin, .ws.st-on .m-guide, .ws.st-on .w-land, .ws.st-on .ws-tag, .ws.st-on .w-fig, .ws.st-on .m-act { display: none !important; }
html:has(.sg.v.story:not([hidden])) .v-hud, html:has(.sg.v.story:not([hidden])) .g-tip { display: none !important; }

/* ---------- the cast: bottom-anchored, sized by the frame (a phone keeps them inside its width) ---------- */
.st-a { position: absolute; bottom: 0; left: calc(var(--x) * 1%); height: min(calc(var(--h) * 100cqh), calc(var(--h) * 120cqw)); aspect-ratio: 1;
  transform: translateX(-50%); animation: st-a-in .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.st-a > .sav, .st-a > img, .st-a > .v-flat { position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 1px rgba(0, 0, 0, .8)); }
.st-a::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -2%; height: 9%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.st-a.k-sanji { aspect-ratio: 898 / 979; }
.st-a.k-sanji > img { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
@keyframes st-a-in { from { opacity: 0; transform: translateX(-50%) translateY(3%); } }
.st-a.f-in { animation-name: st-a-walk; animation-duration: .8s; }
@keyframes st-a-walk { from { opacity: 0; transform: translateX(calc(-50% + 14cqw)); } }
.st-a.f-dim > * { filter: brightness(.5) saturate(.7) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.st-a.f-back { bottom: 5%; }
.st-a.f-back > * { filter: brightness(.72) blur(.6px); }
.st-cast:has(.talk) .st-a:not(.talk):not(.st-wolf) > * { filter: brightness(.66) saturate(.85); transition: filter .3s ease; }
.st-a.talk > * { transition: filter .3s ease; }
/* the speaker's light: a rim in their colour along the ground */
.st-a.talk::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 26%; z-index: -1;
  background: radial-gradient(closest-side at 50% 100%, color-mix(in srgb, var(--c, #fff) 38%, transparent), transparent); }

/* ---------- W01VES ---------- */
.st-wolf { aspect-ratio: 1000 / 1160; height: min(calc(var(--h) * 100cqh), calc(var(--h) * 110cqw)); }
.st-wolf > svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 22px rgba(0, 0, 0, .7)); }
.st-wolf.d1 { bottom: 6%; z-index: -1; }
.st-wolf.d1 > svg { filter: brightness(.7) drop-shadow(0 0 18px rgba(0, 0, 0, .7)); }
.st-wolf.d2 { bottom: 12%; z-index: -2; }
.st-wolf.d2 > svg { filter: brightness(.48) blur(1px); }
.st-wolf.p-watch { bottom: 4%; }
.st-wolf.p-watch.d1 { bottom: 14%; } .st-wolf.p-watch.d2 { bottom: 22%; }
.st-wolf.p-watch > svg { filter: brightness(1.05) drop-shadow(0 0 3px rgba(150, 175, 230, .45)) drop-shadow(0 0 30px #000); }
.st-wolf.p-watch.d1 > svg { filter: brightness(.8) drop-shadow(0 0 2px rgba(150, 175, 230, .3)); } .st-wolf.p-watch.d2 > svg { filter: brightness(.6) blur(.6px); }
.st-wolf .wf-eyes circle { animation: wf-eyes 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
@keyframes wf-eyes { 0%, 100% { opacity: .55; } 50% { opacity: 1; } 47%, 49% { opacity: .1; } }
.st-wolf.p-watch { animation: wf-from-dark 1.6s ease both; animation-delay: calc(var(--i, 0) * 220ms); }
@keyframes wf-from-dark { from { opacity: 0; } }
.st-wolf.p-stalk { animation: wf-stalk 2.4s cubic-bezier(.3, .6, .3, 1) both; animation-delay: calc(var(--i, 0) * 160ms); }
@keyframes wf-stalk { from { opacity: 0; transform: translateX(-50%) translateY(6%) scale(.9); } }
.st-wolf.p-lunge { bottom: -18%; animation: wf-lunge .34s cubic-bezier(.6, 0, .9, .4) both; }
@keyframes wf-lunge { from { opacity: .2; transform: translateX(-50%) scale(.5); filter: blur(3px); } }
.st-wolf.p-away { animation: wf-away 2.6s ease-in both; animation-delay: calc(var(--i, 0) * 180ms); }
@keyframes wf-away { 0% { opacity: 1; transform: translateX(-50%); } 100% { opacity: .08; transform: translateX(-50%) translateY(-4%) scale(.78); } }
.st-wolf.p-guard > svg { animation: wf-breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes wf-breathe { 50% { transform: scaleY(1.012); } }

/* ---------- an insert panel: SAN's art in a comic frame ---------- */
.st-ins { position: absolute; z-index: 5; top: 11%; margin: 0; width: min(34cqw, 45cqh); aspect-ratio: 4 / 5; background: #F4EFE8;
  padding: 7px; box-shadow: 0 0 0 2px #0A0A0A, 0 24px 60px rgba(0, 0, 0, .65); transform: rotate(-1.6deg); animation: st-ins-in .5s cubic-bezier(.2, .9, .2, 1.15) both; }
.st-ins.at-r { right: 7%; } .st-ins.at-l { left: 7%; transform: rotate(1.4deg); }
.st-ins > img { width: 100%; height: 100%; object-fit: cover; display: block; background: #0A0A0A; }
.st-ins.k-aina > img, .st-ins.k-xin > img { background: radial-gradient(circle at 50% 40%, #2C2633, #0C0B10); }
@keyframes st-ins-in { from { opacity: 0; transform: rotate(-4deg) scale(.92); } }
.st-sparks { position: absolute; left: 58%; top: 44%; width: 1px; height: 1px; }
.st-sparks b { position: absolute; width: 3px; height: 18px; background: linear-gradient(#FFF7D6, #FFB15C); border-radius: 2px; transform-origin: 50% 100%;
  animation: st-spark .9s steps(2) infinite; }
.st-sparks b:nth-child(1) { transform: rotate(-60deg) translateY(-14px); } .st-sparks b:nth-child(2) { transform: rotate(-20deg) translateY(-18px); animation-delay: .2s; }
.st-sparks b:nth-child(3) { transform: rotate(20deg) translateY(-16px); animation-delay: .4s; } .st-sparks b:nth-child(4) { transform: rotate(60deg) translateY(-12px); animation-delay: .1s; }
.st-sparks b:nth-child(5) { transform: rotate(100deg) translateY(-14px); animation-delay: .3s; }
@keyframes st-spark { 50% { opacity: 0; } }

/* ---------- Xin, peeking from behind a gourd on Sanji's staff ---------- */
.st-peek { position: absolute; z-index: 3; bottom: 24%; width: min(11cqw, 17cqh); aspect-ratio: 200 / 260; }
.st-peek.at-r { right: 27%; } .st-peek.at-l { left: 27%; }
.st-peek > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.st-staff { position: absolute; left: -16%; width: 7%; bottom: -60cqh; height: 140cqh; background: linear-gradient(90deg, #2A2622, #7A7066 45%, #2A2622); z-index: 0; border-radius: 3px; }
.st-peek > svg path:first-of-type { display: none; }
.st-peek > img { position: absolute; left: 44%; width: 74%; top: 16%; z-index: 1; transform: rotate(14deg); transform-origin: 50% 100%; animation: st-peek 1.2s cubic-bezier(.3, .8, .3, 1) both .35s; }
@keyframes st-peek { from { transform: rotate(14deg) translate(-30%, 20%); } }

/* ---------- the words ---------- */
.st-talk { position: absolute; z-index: 6; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); max-width: min(560px, calc(100% - 32px)); padding: 13px 18px 15px;
  background: rgba(10, 10, 14, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 40px rgba(0, 0, 0, .55); border-top: 3px solid var(--w);
  display: grid; gap: 6px; animation: st-say .32s cubic-bezier(.2, .8, .2, 1) both; cursor: pointer; }
.st-talk.at-l { left: max(16px, 6%); } .st-talk.at-r { right: max(16px, 6%); } .st-talk.at-c { left: 50%; transform: translateX(-50%); animation-name: st-say-c; }
.st-talk b { font: 700 12px/1 var(--f-disp); letter-spacing: .16em; color: var(--w); text-transform: uppercase; }
.st-talk p { margin: 0; font: 500 clamp(16px, 1.55vw, 20px)/1.42 var(--f-text); color: var(--ink); text-wrap: pretty; }
@keyframes st-say { from { opacity: 0; transform: translateY(6px); } }
@keyframes st-say-c { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
.st-cap { position: absolute; z-index: 6; top: calc(64px + env(safe-area-inset-top, 0px)); left: max(16px, 4%); max-width: min(460px, calc(100% - 32px));
  padding: 11px 15px 12px; background: rgba(10, 10, 14, .78); box-shadow: inset 3px 0 0 var(--hue); animation: st-say .4s ease both; }
.st-cap p { margin: 0; font: italic 500 clamp(15px, 1.35vw, 18px)/1.42 var(--f-text); color: var(--ink-2); text-wrap: pretty; }
.st-shout { position: absolute; z-index: 5; right: 6%; top: 50%; margin: 0; padding: 14px 22px; background: #F4EFE8; color: #0A0A0A;
  font: italic 700 clamp(18px, 2vw, 26px)/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em;
  clip-path: polygon(0 12%, 8% 0, 22% 10%, 38% 0, 54% 9%, 70% 0, 86% 10%, 100% 4%, 94% 30%, 100% 52%, 93% 72%, 100% 96%, 82% 88%, 64% 100%, 46% 90%, 28% 100%, 12% 89%, 0 98%, 6% 70%, 0 48%, 7% 28%);
  transform: rotate(3deg); animation: st-ins-in .35s ease both; }

/* the kicker: where we are (first panel), and the panel count */
.st-k { position: absolute; z-index: 7; top: calc(18px + env(safe-area-inset-top, 0px)); left: max(16px, 4%); margin: 0; font: 600 11px/1 var(--f-mono); letter-spacing: .2em; color: var(--hue); text-transform: uppercase;
  display: flex; gap: 14px; align-items: center; }
.st-k em { font-style: normal; color: var(--dim); letter-spacing: .1em; }
.st-dots { display: inline-flex; gap: 5px; }
.st-dots i { width: 14px; height: 3px; background: rgba(255, 255, 255, .2); }
.st-dots i.on { background: var(--hue); }

/* ---------- a technique, a gift: cards on the stage ---------- */
.st-tech { position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 16px; align-items: center; padding: 18px 20px; background: rgba(10, 10, 14, .9); box-shadow: inset 0 0 0 1.5px var(--hue), 0 20px 60px rgba(0, 0, 0, .6); animation: st-ins-in .45s ease both; }
.st-tech .v-ic { width: 56px; height: 56px; color: var(--hue); }
.st-tech span { display: grid; gap: 6px; }
.st-tech i { font: 600 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--dim); font-style: normal; }
.st-tech b { font: italic 700 clamp(28px, 3vw, 38px)/1 var(--f-head); text-transform: uppercase; color: var(--hue); }
.st-tech em { font: 700 11px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: var(--ink-2); }
.st-item { position: absolute; z-index: 5; right: 8%; top: 18%; width: min(240px, 42cqw); padding: 10px 10px 14px; background: rgba(10, 10, 14, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 50px rgba(0, 0, 0, .6);
  display: grid; gap: 8px; justify-items: center; animation: st-ins-in .5s ease both; }
.st-item b { font: 700 12px/1.2 var(--f-disp); letter-spacing: .14em; color: var(--ink); text-align: center; }
.st-item i { font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--dim); font-style: normal; }

/* ---------- the air ---------- */
.st-fog { position: absolute; left: -20%; right: -20%; bottom: 8%; height: 46%; background: radial-gradient(60% 50% at 30% 60%, rgba(120, 140, 180, .14), transparent 70%),
  radial-gradient(50% 40% at 70% 70%, rgba(120, 140, 180, .1), transparent 70%); animation: st-fog 22s ease-in-out infinite alternate; }
.st-fog.b { bottom: 0; height: 30%; animation-duration: 30s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes st-fog { to { transform: translateX(8%); } }
.st-embers b { position: absolute; bottom: -10px; left: calc(6% + var(--i) * 6.5%); width: 3px; height: 3px; border-radius: 50%; background: #FFB15C; box-shadow: 0 0 6px #FC4C01;
  animation: st-ember calc(5s + var(--i) * .37s) linear infinite; animation-delay: calc(var(--i) * -.83s); opacity: .8; }
@keyframes st-ember { to { transform: translate(calc(var(--i) * 3px - 20px), -105cqh); opacity: 0; } }
.st-eyes { position: absolute; inset: 0; background-size: cover; background-position: center 30%; mix-blend-mode: screen; opacity: 0; animation: st-eyes 2.4s ease forwards .4s; }
@keyframes st-eyes { 30% { opacity: .9; } 36% { opacity: .2; } 42%, 100% { opacity: .9; } }
.st-blink { position: absolute; inset: 0; box-shadow: inset 0 0 0 4px #FF3B30, inset 0 0 120px rgba(255, 59, 48, .45); opacity: 0; animation: st-blink 1.4s steps(1) 2 .3s; }
@keyframes st-blink { 0%, 30% { opacity: 1; } 31%, 60% { opacity: 0; } 61%, 80% { opacity: 1; } 81%, 100% { opacity: 0; } }
.st-rays { position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 50% 100%, rgba(255, 200, 140, .06) 0 3deg, transparent 3deg 11deg); animation: st-rays 20s linear infinite; }
@keyframes st-rays { to { transform: rotate(4deg); } }
.st-dust { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 60px, rgba(220, 210, 200, .05) 60px 62px); animation: st-dust 3s linear infinite; }
@keyframes st-dust { to { background-position: 400px 0; } }
.st-hum { position: absolute; left: 0; right: 0; bottom: 18%; height: 30%; background: repeating-linear-gradient(0deg, rgba(205, 239, 255, .06) 0 2px, transparent 2px 9px);
  -webkit-mask-image: radial-gradient(50% 60% at 50% 100%, #000, transparent); mask-image: radial-gradient(50% 60% at 50% 100%, #000, transparent); animation: st-hum 1.6s ease-in-out infinite alternate; }
@keyframes st-hum { to { opacity: .4; transform: translateY(-4px); } }
.st-flash { position: absolute; inset: 0; background: #FFF4E6; opacity: 0; animation: st-flash .5s ease-out both; }
@keyframes st-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.st.fx-shake .st-cast, .st.fx-shake .st-set { animation: st-shake .45s steps(2) 2; }
@keyframes st-shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-6px, 3px); } 50% { transform: translate(5px, -4px); } 75% { transform: translate(-3px, -2px); } }
.st-net { animation: st-sway 5s ease-in-out infinite alternate; transform-origin: 940px 250px; }
@keyframes st-sway { to { transform: rotate(1.5deg); } }
.st-dangle { animation: st-sway 3.4s ease-in-out infinite alternate; }
.st-ember { animation: wf-eyes 2.6s ease-in-out infinite; }
.st-xin { animation: wf-from-dark 2s ease both; }

/* ---------- the dock: progress, SKIP, NEXT ---------- */
.st-dock { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; align-items: center;
  padding: 12px max(16px, 4%) calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(5, 6, 10, .55)); cursor: default; }
.st-dock .btn { min-width: 112px; }

/* ---------- phones: the cast stays inside the width, the words go full width at the bottom, inserts at the top ---------- */
@media (max-width: 700px) {
  /* a tall screen: the words at the bottom, the cast standing on them, an insert in the open sky above */
  .st-talk, .st-talk.at-l, .st-talk.at-r, .st-talk.at-c { left: 16px; right: 16px; max-width: none; transform: none; animation-name: st-say; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .st-cap { top: calc(48px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; max-width: none; }
  .st-a { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); height: min(calc(var(--h) * 100cqh), calc(var(--h) * 100cqw)); }
  .st-a.f-back { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
  .st-a::after { display: none; }
  .st-cast::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(152px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(5, 6, 10, .7) 30%, rgba(5, 6, 10, .9)); z-index: -3; }
  .st-wolf.d0, .st-wolf.p-watch { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  .st-wolf.d1, .st-wolf.p-watch.d1 { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }
  .st-wolf.d2, .st-wolf.p-watch.d2 { bottom: calc(206px + env(safe-area-inset-bottom, 0px)); }
  .st-wolf.p-lunge { bottom: 0; }
  .st-ins, .st-ins.at-l, .st-ins.at-r { top: calc(56px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; right: auto; width: min(62cqw, 33cqh); aspect-ratio: 1; transform: translateX(-50%) rotate(-1.4deg); }
  .st-ins:has(~ .st-cap) { top: calc(132px + env(safe-area-inset-top, 0px)); }
  .st-item { top: auto; bottom: calc(330px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 40cqw; }
  .st-tech { top: 34%; }
  .st-shout { top: 30%; right: 16px; }
  .st-peek { width: 20cqw; bottom: calc(150px + 18cqh); }
}
@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
html.sc-calm .st *, html.sc-calm .st *::before, html.sc-calm .st *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

/* the W01VES outside a story panel: the den's card, the den fight's corner */
.v-wolf-art { display: block; width: 100%; height: 100%; }
.v-wolf-art > svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .6)); }
.v-ch-big .v-wolf-art { width: 112px; aspect-ratio: 1000 / 1160; height: auto; }

/* =====================================================================
   3.2 · THE LOWER THIRD: the words (a name in the speaker's colour and the line, or the narration), the panel count, SKIP and
   NEXT, together at the bottom. The art keeps the frame; nothing sits in a corner
   ===================================================================== */
.st-lt { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; cursor: default;
  padding: 64px max(16px, 5%) calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent 0, rgba(5, 6, 10, .74) 46px, rgba(5, 6, 10, .95) 100%); }
.st-lt-in { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 36px; }
.st-w { min-width: 0; display: grid; gap: 9px; align-content: end; animation: st-say .34s cubic-bezier(.2, .8, .2, 1) both; }
.st-w b { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--f-disp); letter-spacing: .18em; color: var(--w); text-transform: uppercase; }
.st-w b::before { content: ''; width: 20px; height: 3px; background: var(--w); }
.st-w p { margin: 0; max-width: 60ch; font: 500 clamp(18px, 1.7vw, 24px)/1.45 var(--f-text); color: var(--ink); text-wrap: pretty; }
.st-w.narr { padding-left: 16px; box-shadow: inset 3px 0 0 var(--hue); }
.st-w.narr.about { box-shadow: inset 3px 0 0 var(--w); }
.st-w.narr p { font-style: italic; color: #E4DED6; }
.st-lt-b { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
.st-lt-b .st-dots { margin-right: 8px; }
.st-lt .v-btn.go { min-width: 136px; }
.st-k { gap: 10px; }
/* the cast stands clear of the words on a wide screen too */
.st-a { bottom: 0; }
@media (max-width: 700px) {
  .st-lt { padding: 44px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .st-lt-in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-w p { font-size: 17px; line-height: 1.42; }
  .st-lt-b { justify-content: flex-end; }
  .st-lt-b .st-dots { margin-right: auto; }
  .st-lt .v-btn.go { min-width: 120px; }
  .st-a { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  .st-a.f-back { bottom: calc(214px + env(safe-area-inset-bottom, 0px)); }
  .st-cast::after { height: calc(200px + env(safe-area-inset-bottom, 0px)); }
  .st-wolf.d0, .st-wolf.p-watch { bottom: calc(178px + env(safe-area-inset-bottom, 0px)); }
  .st-wolf.d1, .st-wolf.p-watch.d1 { bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
  .st-wolf.d2, .st-wolf.p-watch.d2 { bottom: calc(250px + env(safe-area-inset-bottom, 0px)); }
  .st-item { bottom: calc(372px + env(safe-area-inset-bottom, 0px)); }
  .st-peek { bottom: calc(196px + 18cqh); }
}
@media (prefers-reduced-motion: reduce) { .st-w { animation: none; } }
/* 3.2 · the Road's edge: the fissure's seam breathes (it hums) */
.st-seam { animation: st-seam 3.2s ease-in-out infinite alternate; }
@keyframes st-seam { to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .st-seam { animation: none; } }
/* 3.2 · the hum: rings of sound rising off the fissure, not stripes across it (stripes read as a road surface) */
.st-hum { left: 10%; right: 10%; bottom: 4%; height: 46%; background: repeating-radial-gradient(ellipse 60% 42% at 50% 100%, transparent 0 18px, rgba(255, 214, 170, .07) 18px 20px, transparent 20px 38px);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 100%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 80% at 50% 100%, #000 20%, transparent 75%);
  animation: st-hum2 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes st-hum2 { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .st-hum { animation: none; } }