/* ============================================================
   CHILL CHUMS QUEST — 16-bit JRPG overture
   Tokens: night-sky void, royal window gradient, treasure gold
   ============================================================ */

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/press-start-2p-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DotGothic16';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/dotgothic16-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --void: #04041c;
    --nebula: #10104a;
    --win-top: #3050e0;
    --win-bot: #101070;
    --win-line: #181860;
    --frame: #f8f8f8;
    --ink: #ffffff;
    --dim: #a8b0e8;
    --gold: #f8cc50;
    --gold-deep: #c89020;
    --glint: #80e8ff;
    --rose: #ff70b8;
    --danger: #ff5860;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--void);
    color: var(--ink);
    font-family: 'DotGothic16', 'Courier New', monospace;
    -webkit-font-smoothing: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.f-title { font-family: 'Press Start 2P', monospace; }

.sprite-defs { position: absolute; width: 0; height: 0; }

/* ---------- Starfield ---------- */
#starfield {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background:
        radial-gradient(ellipse 120% 60% at 50% 110%, rgba(32, 40, 140, 0.45), transparent 60%),
        radial-gradient(ellipse 80% 40% at 80% -10%, rgba(64, 24, 96, 0.35), transparent 60%),
        var(--void);
}
.star-layer { position: absolute; inset: -10% 0; will-change: transform; }
.star {
    position: absolute;
    background: #fff;
    image-rendering: pixelated;
}
.star.glint { background: var(--glint); }
.star.warm { background: var(--gold); }
.star-layer.drift-slow { animation: star-drift 240s linear infinite; }
.star-layer.drift-mid  { animation: star-drift 150s linear infinite; }
.star-layer.drift-fast { animation: star-drift 90s linear infinite; }
@keyframes star-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(12%); }
}
.star.twinkle { animation: twinkle 3.5s step-end infinite; }
@keyframes twinkle {
    0%, 60%, 100% { opacity: 1; }
    70%, 80% { opacity: 0.15; }
}

/* ---------- Stage & scenes ---------- */
#stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}
.scene {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.scene.active { display: flex; }

.scene-stage {
    flex: 1 1 auto;
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 0;
}

/* Fade-to-black between scenes */
#fader {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}
#fader.dark { opacity: 1; }

/* ---------- The royal window (dialog box) ---------- */
.dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    min-height: 7.5em;
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--win-top), var(--win-bot));
    border: 3px solid var(--frame);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 3px var(--win-line),
        0 6px 0 rgba(0, 0, 0, 0.45);
    padding: 16px 20px 22px;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-shadow: 1px 1px 0 rgba(0, 0, 20, 0.8);
}
.dialog-text { min-height: 4.35em; white-space: pre-wrap; }
.dialog-text .gold { color: var(--gold); }
.dialog-text .glint { color: var(--glint); }
.dialog-text .rose { color: var(--rose); }
.dialog-next {
    position: absolute;
    right: 16px;
    bottom: 8px;
    color: var(--frame);
    font-size: 16px;
    opacity: 0;
    animation: next-bounce 0.7s steps(2) infinite;
}
.dialog.ready .dialog-next { opacity: 1; }
@keyframes next-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
/* Speaker tab, e.g. NARRATOR */
.dialog-tab {
    position: absolute;
    top: -14px;
    left: 14px;
    background: var(--win-bot);
    border: 2px solid var(--frame);
    border-radius: 5px;
    padding: 3px 9px 2px;
    font-size: 9px;
    color: var(--gold);
}

/* ---------- HUD ---------- */
#hud {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 39;
    display: flex;
    gap: 8px;
}
#hud[hidden] { display: none; }
.hud-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(8, 8, 40, 0.85);
    border: 2px solid var(--frame);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 7px 9px;
    cursor: pointer;
}
.hud-btn:hover, .hud-btn:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.hud-icon {
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.i-sound-on  { --icon: url(/assets/quest/icons/volume-3.svg); }
.i-sound-off { --icon: url(/assets/quest/icons/volume.svg); }
.i-skip      { --icon: url(/assets/quest/icons/forward.svg); }

#progress {
    position: fixed;
    bottom: max(6px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 39;
    display: flex;
    gap: 7px;
}
#progress[hidden] { display: none; }
.dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
}
.dot.on { background: var(--gold); }

/* ---------- Title scene ---------- */
/* safe center: vertically centered when it fits, top-anchored (not clipped)
   when the stack is taller than the viewport, with scroll to reach the rest.
   Height uses dvh (dynamic viewport) so iOS's expanded address bar on first
   load doesn't push the logo above the fold. */
#s-title {
    justify-content: safe center;
    overflow-y: auto;
    bottom: auto;
    height: 100dvh;
    max-height: 100dvh;
}
#s-title .scene-stage {
    gap: 22px;
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 24px 0;
}
@media (max-height: 720px) {
    #s-title .scene-stage { gap: 14px; }
    .title-logo-wrap { width: min(78vw, 420px); }
}
.title-logo-wrap {
    position: relative;
    width: min(88vw, 480px);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.title-logo {
    width: 78%;
    height: auto;
    image-rendering: auto;
    filter: drop-shadow(0 0 18px rgba(128, 232, 255, 0.55));
    transition: opacity 0.8s ease;
}
/* The animated logo video plays on a black field. Because the starfield is a
   separate CSS layer, mix-blend-mode: screen has nothing to blend against, so
   we give the wrap a void-colored backing (matching the page) ONLY while the
   video plays: screen-blend turns the video's black into that void, and an
   elliptical mask on the wrap feathers the whole unit into the starfield. */
.title-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}
.title-logo-wrap.video-on {
    background: var(--void);
    -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 48%, #000 34%, transparent 96%);
    mask: radial-gradient(ellipse 80% 70% at 50% 48%, #000 34%, transparent 96%);
}
.title-logo-wrap.video-on .title-video { opacity: 1; }
.title-logo-wrap.video-on .title-logo { opacity: 0; }
.title-logo-wrap { cursor: pointer; }
.title-logo-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.intro-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -6px;
}
.title-play, .title-skip {
    font-size: clamp(9px, 2.4vw, 11px);
    background: rgba(8, 8, 40, 0.85);
    border-radius: 6px;
    padding: 9px 15px;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.4s ease;
}
.title-play {
    color: var(--gold);
    border: 2px solid var(--gold);
    animation: sound-note-glow 2s ease-in-out infinite;
}
.title-skip {
    color: var(--dim);
    border: 2px solid var(--dim);
}
.title-play:hover, .title-play:focus-visible { color: var(--glint); border-color: var(--glint); outline: none; }
.title-skip:hover, .title-skip:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.title-play.playing { opacity: 0.35; animation: none; }

/* The mode menu waits behind the intro: fades in after play-through or skip */
#s-title .menu,
#s-title .sound-note,
#s-title .title-copyright {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.9s ease, transform 0.9s ease;
}
#s-title.menu-revealed .menu,
#s-title.menu-revealed .sound-note,
#s-title.menu-revealed .title-copyright {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.game-title {
    font-size: clamp(26px, 7.5vw, 44px);
    text-align: center;
    line-height: 1.35;
    color: var(--gold);
    text-shadow:
        3px 3px 0 #703808,
        6px 6px 0 rgba(0, 0, 0, 0.55);
}
.game-sub {
    font-size: clamp(9px, 2.6vw, 13px);
    color: var(--glint);
    letter-spacing: 0.22em;
    text-align: center;
}
.menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    width: min(100%, 430px);
    background: linear-gradient(180deg, var(--win-top), var(--win-bot));
    border: 3px solid var(--frame);
    border-radius: 8px;
    box-shadow: inset 0 0 0 3px var(--win-line), 0 6px 0 rgba(0, 0, 0, 0.45);
    padding: 14px 12px;
}
.menu-item {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(11px, 3vw, 14px);
    text-align: left;
    padding: 11px 8px 11px 30px;
    position: relative;
    cursor: pointer;
    line-height: 1.6;
    text-decoration: none;
}
.menu-item-gold { color: var(--gold); }
.menu-item-gold small { color: var(--gold-deep) !important; }
.menu-item small {
    display: block;
    font-family: 'DotGothic16', monospace;
    font-size: 15px;
    color: var(--dim);
    margin-top: 3px;
}
.menu-item::before {
    content: "\25B6";
    position: absolute;
    left: 8px;
    top: 13px;
    font-size: 12px;
    color: var(--gold);
    opacity: 0;
}
.menu-item:hover::before,
.menu-item:focus-visible::before { opacity: 1; animation: cursor-nudge 0.5s steps(2) infinite; }
.menu-item:hover, .menu-item:focus-visible { color: var(--gold); outline: none; }
@keyframes cursor-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
}
.sound-note {
    font-size: clamp(8px, 2.2vw, 10px);
    color: var(--glint);
    letter-spacing: 0.14em;
    margin-top: 12px;
}
#s-title.menu-revealed .sound-note { animation: sound-note-glow 2.4s ease-in-out infinite; }
@keyframes sound-note-glow {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

.title-copyright {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--dim);
    text-align: center;
    margin-top: 14px;
}

/* ---------- Legend scene ---------- */
.legend-logo {
    width: min(84vw, 460px);
    height: auto;
    filter: drop-shadow(0 0 26px rgba(128, 232, 255, 0.6));
    animation: logo-arrive 1.6s ease-out both;
}
@keyframes logo-arrive {
    from { opacity: 0; transform: scale(0.6); filter: drop-shadow(0 0 0 rgba(128, 232, 255, 0)); }
    to   { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 26px rgba(128, 232, 255, 0.6)); }
}
.legend-sparkle {
    width: 46px;
    height: 46px;
    background: var(--gold);
    -webkit-mask: url(/assets/quest/icons/sparkles.svg) center / contain no-repeat;
    mask: url(/assets/quest/icons/sparkles.svg) center / contain no-repeat;
    animation: sparkle-spin 4s ease-in-out infinite;
}
@keyframes sparkle-spin {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
    50% { transform: scale(1.25) rotate(12deg); opacity: 1; }
}

/* ---------- Prophecy scene (video) ---------- */
.vision-frame {
    position: relative;
    width: 100%;
    max-width: 560px;
    border: 3px solid var(--gold);
    border-radius: 6px;
    box-shadow:
        inset 0 0 0 3px #503808,
        0 0 32px rgba(248, 204, 80, 0.35),
        0 6px 0 rgba(0, 0, 0, 0.45);
    background: #000;
    padding: 6px;
}
.vision-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    image-rendering: auto;
}
.vision-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(248, 204, 80, 0.8);
}
.vision-corner.tl { top: -8px; left: -8px; }
.vision-corner.tr { top: -8px; right: -8px; }
.vision-corner.bl { bottom: -8px; left: -8px; }
.vision-corner.br { bottom: -8px; right: -8px; }
.vision-mute {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
}

/* ---------- Item-get scenes ---------- */
.itemget { position: relative; gap: 6px; }
.rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(120vw, 560px);
    aspect-ratio: 1;
    transform: translate(-50%, -58%);
    background: conic-gradient(
        from 0deg,
        rgba(248, 204, 80, 0.16) 0deg 12deg, transparent 12deg 30deg,
        rgba(248, 204, 80, 0.16) 30deg 42deg, transparent 42deg 60deg,
        rgba(248, 204, 80, 0.16) 60deg 72deg, transparent 72deg 90deg,
        rgba(248, 204, 80, 0.16) 90deg 102deg, transparent 102deg 120deg,
        rgba(248, 204, 80, 0.16) 120deg 132deg, transparent 132deg 150deg,
        rgba(248, 204, 80, 0.16) 150deg 162deg, transparent 162deg 180deg,
        rgba(248, 204, 80, 0.16) 180deg 192deg, transparent 192deg 210deg,
        rgba(248, 204, 80, 0.16) 210deg 222deg, transparent 222deg 240deg,
        rgba(248, 204, 80, 0.16) 240deg 252deg, transparent 252deg 270deg,
        rgba(248, 204, 80, 0.16) 270deg 282deg, transparent 282deg 300deg,
        rgba(248, 204, 80, 0.16) 300deg 312deg, transparent 312deg 330deg,
        rgba(248, 204, 80, 0.16) 330deg 342deg, transparent 342deg 360deg
    );
    -webkit-mask: radial-gradient(circle, #000 0%, transparent 68%);
    mask: radial-gradient(circle, #000 0%, transparent 68%);
    opacity: 0;
    transition: opacity 1s ease;
    animation: rays-turn 26s linear infinite;
    pointer-events: none;
}
.itemget.got .rays { opacity: 1; }
@keyframes rays-turn { to { transform: translate(-50%, -58%) rotate(360deg); } }

.item-sprite {
    position: relative;
    z-index: 2;
    width: clamp(110px, 30vw, 150px);
    opacity: 0;
    transform: translateY(46px) scale(0.65);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.itemget.got .item-sprite {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: item-hover 3s ease-in-out 0.8s infinite;
}
@keyframes item-hover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
.item-sprite svg { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }
.item-sprite.sigil svg { filter: drop-shadow(0 0 14px rgba(255, 112, 184, 0.9)); }

.chest {
    position: relative;
    z-index: 2;
    width: clamp(84px, 22vw, 110px);
    height: clamp(84px, 22vw, 110px);
    background: var(--gold-deep);
    -webkit-mask: url(/assets/quest/icons/open-treasure-chest.svg) center / contain no-repeat;
    mask: url(/assets/quest/icons/open-treasure-chest.svg) center / contain no-repeat;
    transition: transform 0.3s ease;
}
.itemget.got .chest { transform: scale(1.05); background: var(--gold); }

.item-title {
    z-index: 2;
    font-size: clamp(12px, 3.4vw, 16px);
    color: var(--gold);
    text-align: center;
    line-height: 1.7;
    opacity: 0;
    transition: opacity 0.6s ease 0.35s;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}
.itemget.got .item-title { opacity: 1; }

/* ---------- Law scene (three hearts) ---------- */
.law-hearts { display: flex; gap: clamp(18px, 6vw, 40px); }
.law-hearts svg {
    width: clamp(52px, 14vw, 76px);
    height: auto;
    shape-rendering: crispEdges;
    animation: heart-beat 1.6s steps(2) infinite;
}
.law-hearts svg:nth-child(2) { animation-delay: 0.25s; }
.law-hearts svg:nth-child(3) { animation-delay: 0.5s; }
@keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.law-banner {
    font-size: clamp(11px, 3vw, 15px);
    color: var(--gold);
    text-align: center;
    line-height: 2;
    border-top: 2px solid var(--gold-deep);
    border-bottom: 2px solid var(--gold-deep);
    padding: 10px 6px;
}

/* ---------- Gift scene ---------- */
.gift-books { display: flex; align-items: center; gap: clamp(14px, 5vw, 30px); }
.gift-book {
    width: clamp(58px, 16vw, 84px);
    height: clamp(58px, 16vw, 84px);
    background: var(--glint);
    -webkit-mask: url(/assets/quest/icons/spell-book.svg) center / contain no-repeat;
    mask: url(/assets/quest/icons/spell-book.svg) center / contain no-repeat;
    animation: gift-bob 2.4s ease-in-out infinite;
}
.gift-book + .gift-book { animation-delay: 1.2s; }
.gift-plus {
    font-family: 'Press Start 2P', monospace;
    font-size: 22px;
    color: var(--gold);
}
@keyframes gift-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- Trial scene ---------- */
#s-trial .scene-stage { gap: 12px; }
.trial-heading {
    font-size: clamp(12px, 3.2vw, 16px);
    color: var(--danger);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
    animation: trial-flash 1.1s step-end infinite;
}
@keyframes trial-flash {
    0%, 100% { color: var(--danger); }
    50% { color: var(--gold); }
}
.battle-menu {
    width: min(100%, 520px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.battle-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: linear-gradient(180deg, var(--win-top), var(--win-bot));
    border: 3px solid var(--frame);
    border-radius: 8px;
    box-shadow: inset 0 0 0 3px var(--win-line), 0 4px 0 rgba(0, 0, 0, 0.45);
    color: var(--ink);
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
}
.battle-option:hover, .battle-option:focus-visible {
    border-color: var(--gold);
    outline: none;
    transform: translateX(4px);
}
.battle-option.chosen { border-color: var(--glint); }
.battle-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--gold);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.battle-icon.i-dice   { --icon: url(/assets/quest/icons/dice-six-faces-five.svg); }
.battle-icon.i-swords { --icon: url(/assets/quest/icons/crossed-swords.svg); }
.battle-icon.i-scroll { --icon: url(/assets/quest/icons/scroll-unfurled.svg); }
.battle-label { display: flex; flex-direction: column; gap: 4px; }
.battle-label b {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2.8vw, 13px);
    font-weight: 400;
    letter-spacing: 0.04em;
}
.battle-label span { font-size: 16px; color: var(--dim); line-height: 1.3; }

/* ---------- End scene ---------- */
.end-crown {
    width: clamp(70px, 18vw, 100px);
    height: clamp(70px, 18vw, 100px);
    background: var(--gold);
    -webkit-mask: url(/assets/quest/icons/laurel-crown.svg) center / contain no-repeat;
    mask: url(/assets/quest/icons/laurel-crown.svg) center / contain no-repeat;
}
.end-title {
    font-size: clamp(18px, 5.2vw, 30px);
    color: var(--gold);
    text-align: center;
    line-height: 1.6;
    text-shadow: 3px 3px 0 #703808, 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.insert-coin {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2.8vw, 13px);
    color: var(--glint);
    animation: coin-blink 0.9s step-end infinite;
}
@keyframes coin-blink { 50% { opacity: 0; } }
.end-links { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 6px; }
.end-link {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(9px, 2.6vw, 11px);
    color: var(--ink);
    text-decoration: none;
    border: 2px solid var(--frame);
    border-radius: 6px;
    padding: 10px 16px;
    background: rgba(8, 8, 40, 0.85);
    cursor: pointer;
}
.end-link:hover, .end-link:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
.end-link.gold-link { color: var(--gold); border-color: var(--gold); }
.end-link.gold-link:hover, .end-link.gold-link:focus-visible { color: var(--glint); border-color: var(--glint); }
.end-credits {
    font-size: 15px;
    color: var(--dim);
    text-align: center;
    line-height: 1.5;
    margin-top: 14px;
    max-width: 380px;
}
.end-credits p { margin: 0 0 7px; }
.end-credits .cr-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--gold);
    letter-spacing: 1px;
    margin-right: 6px;
}
.end-credits .cr-sig { margin-top: 10px; color: var(--glint); }
.end-credits a { color: var(--dim); }

/* ============================================================
   CINEMATIC LAYERS
   ============================================================ */

/* Aurora: two huge color blobs re-hued per scene (hue-rotate transitions) */
#aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: hue-rotate(var(--aur-rot, 0deg));
    opacity: var(--aur-op, 0.4);
    transition: filter 1.6s ease, opacity 1.6s ease;
}
.aur-blob {
    position: absolute;
    width: 90vmax;
    height: 90vmax;
    border-radius: 50%;
    will-change: transform;
}
.aur-blob.a {
    top: -45vmax;
    left: -30vmax;
    background: radial-gradient(circle, rgba(32, 80, 255, 0.55), transparent 62%);
    animation: aur-drift-a 26s ease-in-out infinite alternate;
}
.aur-blob.b {
    bottom: -45vmax;
    right: -30vmax;
    background: radial-gradient(circle, rgba(255, 48, 192, 0.48), transparent 62%);
    animation: aur-drift-b 32s ease-in-out infinite alternate;
}
@keyframes aur-drift-a {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(12vw, 8vh) scale(1.15); }
}
@keyframes aur-drift-b {
    from { transform: translate(0, 0) scale(1.1); }
    to   { transform: translate(-10vw, -8vh) scale(0.95); }
}

/* Per-scene color moods */
body[data-scene="s-open"]     { --aur-rot: 0deg;    --aur-op: 0.35; }
body[data-scene="s-legend"]   { --aur-rot: 45deg;   --aur-op: 0.55; }
body[data-scene="s-prophecy"] { --aur-rot: 95deg;   --aur-op: 0.6; }
body[data-scene="s-t1"]       { --aur-rot: 165deg;  --aur-op: 0.6; }
body[data-scene="s-t2"]       { --aur-rot: 120deg;  --aur-op: 0.55; }
body[data-scene="s-t3"]       { --aur-rot: -35deg;  --aur-op: 0.65; }
body[data-scene="s-law"]      { --aur-rot: 25deg;   --aur-op: 0.45; }
body[data-scene="s-gift"]     { --aur-rot: 70deg;   --aur-op: 0.65; }
body[data-scene="s-trial"]    { --aur-rot: 140deg;  --aur-op: 0.6; }
body[data-scene="s-vote"]     { --aur-rot: 55deg;   --aur-op: 0.5; }
body[data-scene="s-end"]      { --aur-rot: 30deg;   --aur-op: 0.6; }

/* Vignette: quiet cinema edges */
#vignette {
    position: fixed;
    inset: 0;
    z-index: 34;
    pointer-events: none;
    background: radial-gradient(ellipse 105% 90% at 50% 50%, transparent 62%, rgba(0, 0, 6, 0.55) 100%);
}

/* Letterbox bars slide in once the story starts */
.letterbox {
    position: fixed;
    left: 0;
    right: 0;
    height: 5.5vh;
    background: linear-gradient(180deg, #000, #000);
    z-index: 38;
    pointer-events: none;
    transition: transform 0.9s ease;
}
#letterbox-top { top: 0; transform: translateY(-101%); }
#letterbox-bottom { bottom: 0; transform: translateY(101%); }
body.playing #letterbox-top { transform: translateY(0); }
body.playing #letterbox-bottom { transform: translateY(0); }
/* keep scene content out from under the bars */
body.playing .scene {
    padding-top: calc(5.5vh + max(10px, env(safe-area-inset-top)));
    padding-bottom: calc(5.5vh + max(12px, env(safe-area-inset-bottom)));
}

/* Full-screen light sweep on scene entry */
#sweep {
    position: fixed;
    inset: -20% -60%;
    z-index: 35;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 42%,
        rgba(255, 255, 255, 0.05) 47%,
        rgba(128, 232, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.05) 53%,
        transparent 58%
    );
    transform: translateX(-130%);
    opacity: 0;
}
#sweep.run {
    animation: sweep-run 1.5s ease-in-out forwards;
}
@keyframes sweep-run {
    0% { transform: translateX(-130%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
}

/* White flash (item get, lightning, vision reveal) */
#flash {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}
#flash.hit { animation: flash-pop 0.45s ease-out forwards; }
@keyframes flash-pop {
    0% { opacity: 0.38; }
    100% { opacity: 0; }
}

/* Screen shake */
#stage.shake { animation: stage-shake 0.45s linear; }
@keyframes stage-shake {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-7px, 4px); }
    30% { transform: translate(6px, -5px); }
    45% { transform: translate(-5px, -3px); }
    60% { transform: translate(5px, 4px); }
    75% { transform: translate(-3px, 2px); }
    90% { transform: translate(2px, -2px); }
}

/* FX particles */
#fx-layer { position: fixed; inset: 0; z-index: 36; pointer-events: none; overflow: hidden; }
.burst-p {
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--gold);
    animation: burst-fly 0.9s ease-out forwards;
}
@keyframes burst-fly {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(300deg); opacity: 0; }
}
.mote {
    position: absolute;
    bottom: -12px;
    width: 3px;
    height: 3px;
    background: var(--gold);
    opacity: 0;
    animation: mote-rise var(--dur, 7s) linear forwards;
}
.mote.cool { background: var(--glint); }
@keyframes mote-rise {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translate(var(--sway, 20px), -108vh); opacity: 0; }
}
.sparkfall {
    position: absolute;
    top: -12px;
    width: 3px;
    height: 3px;
    background: var(--glint);
    opacity: 0;
    animation: spark-fall var(--dur, 5s) linear forwards;
}
@keyframes spark-fall {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translate(var(--sway, -30px), 110vh); opacity: 0; }
}
.shockwave {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 3px solid rgba(248, 204, 80, 0.9);
    animation: shockwave-out 0.85s ease-out forwards;
    will-change: transform, opacity;
}
@keyframes shockwave-out {
    0% { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(9); opacity: 0; }
}
.sstar {
    position: absolute;
    top: var(--y, 20%);
    left: -12%;
    width: 110px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(191, 233, 255, 0.9), #fff);
    transform: rotate(16deg);
    animation: sstar-fly 1.3s ease-in forwards;
}
@keyframes sstar-fly {
    0% { transform: translate(0, 0) rotate(16deg); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(130vw, 38vh) rotate(16deg); opacity: 0; }
}

/* ---------- Real book covers as item art ---------- */
.item-sprite.cover img {
    display: block;
    height: clamp(180px, 32vh, 280px);
    width: auto;
    border: 3px solid var(--frame);
    border-radius: 4px;
    box-shadow:
        0 0 34px rgba(248, 204, 80, 0.55),
        0 12px 34px rgba(0, 0, 0, 0.65);
}

/* ---------- Vision reveal (prophecy scene) ---------- */
/* The scrying orb: pulses while radiating expanding rings, building tension. */
.vision-orb {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #fff 0 30%, var(--gold) 62%, var(--gold-deep));
    box-shadow: 0 0 34px 12px rgba(248, 204, 80, 0.65);
    animation: orb-pulse 1.6s ease-in-out infinite;
    will-change: transform;
}
.vision-orb::before,
.vision-orb::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    opacity: 0;
    animation: scry-ripple 2.4s ease-out infinite;
    will-change: transform, opacity;
}
.vision-orb::after { animation-delay: 1.2s; }
@keyframes orb-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 26px 8px rgba(248, 204, 80, 0.5); }
    50% { transform: scale(1.3); box-shadow: 0 0 48px 20px rgba(248, 204, 80, 0.85); }
}
@keyframes scry-ripple {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(7); opacity: 0; }
}

/* The vision materializes like a scrying window powering on: a bright slit
   opens vertically, then the picture shimmers into focus (ripple-dissolve). */
#s-prophecy .vision-frame {
    opacity: 0;
    transform: scaleX(0.7) scaleY(0.008);
    filter: brightness(3) saturate(0);
    transition: none;
    will-change: transform, opacity, filter;
}
#s-prophecy.revealed .vision-frame {
    animation: vision-open 1.25s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes vision-open {
    0%   { opacity: 0; transform: scaleX(0.7) scaleY(0.008); filter: brightness(3.5) saturate(0) blur(1px); }
    28%  { opacity: 1; transform: scaleX(1.04) scaleY(0.02); filter: brightness(3.5) saturate(0) blur(1px); }
    55%  { opacity: 1; transform: scaleX(1) scaleY(1.03); filter: brightness(2) saturate(0.4) blur(2px); }
    72%  { transform: scaleX(1) scaleY(0.99); filter: brightness(1.3) saturate(0.9) blur(1px); }
    100% { opacity: 1; transform: scaleX(1) scaleY(1); filter: brightness(1) saturate(1) blur(0); }
}
/* A shimmer sweep passes across the picture as it settles. */
#s-prophecy .vision-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 245, 210, 0.55) 50%, transparent 62%);
    opacity: 0;
}
#s-prophecy.revealed .vision-frame::after {
    animation: vision-shimmer 1.1s ease-in 0.5s;
}
@keyframes vision-shimmer {
    0% { opacity: 0; transform: translateX(-70%); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateX(70%); }
}
#s-prophecy.revealed .orb { display: none; }

/* ============================================================
   SIDE-SCROLLER LEVELS (hero entrances + throne room)
   ============================================================ */
.level { justify-content: flex-end; --floor: clamp(205px, 30vh, 285px); }
/* The level world lives above the dialog area: env bottom = the floor line */
.level .env {
    position: absolute;
    inset: 0 0 var(--floor) 0;
    overflow: hidden;
    pointer-events: none;
}
#s-jay .env { background: linear-gradient(180deg, #05060f 0%, #0d1626 70%); }
#s-rito .env { background: linear-gradient(180deg, #0b0812 0%, #191024 70%); }

/* Image parallax bands (ansimuz CC0 art): fixed-px tiles for seamless loops */
.imgband {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 48px);
    mask-image: linear-gradient(180deg, transparent, #000 48px);
}
/* The strip is one tile wider than the band; translating it by exactly one
   tile loops seamlessly — pure transform, fully GPU-composited. */
.imgband::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(100% + var(--tw, 442px));
    background-repeat: repeat-x;
    background-size: var(--tw, 442px) 100%;
    image-rendering: pixelated;
    will-change: transform;
}
/* Animation is added only once JS has set --tw and (re)started it, so the
   scroll distance is never stale on mobile browsers that don't live-update
   custom properties inside a running animation's keyframes. */
.imgband.scrolling::before {
    animation: imgband-scroll var(--dur, 30s) linear infinite;
}
@keyframes imgband-scroll {
    to { transform: translate3d(calc(-1 * var(--tw, 442px)), 0, 0); }
}
/* Emerald Wood: 272x160 layers at 1.625x = 442x260 tiles */
#s-jay .imgband { bottom: 44px; height: calc(100% - 44px); }
.fb-back::before   { background-image: url(/assets/quest/bg/forest-back.png);   --dur: 34s; }
.fb-mid::before    { background-image: url(/assets/quest/bg/forest-mid.png);    --dur: 18s; }
.fb-front::before  { background-image: url(/assets/quest/bg/forest-front.png);  --dur: 9s; }
.fb-lights::before { background-image: url(/assets/quest/bg/forest-lights.png); --dur: 24s; }
.fb-lights { mix-blend-mode: screen; opacity: 0.9; }
/* Crystal Depths: 240x176 at 1.5x = 360x264 */
.cave-band {
    bottom: 44px;
    height: calc(100% - 44px);
    --dur: 14s;
    /* shift the pack's hot pink toward cool crystal violet */
    filter: hue-rotate(-75deg) saturate(0.75) brightness(0.72);
}
.cave-band::before { background-image: url(/assets/quest/bg/caves.png); }
/* Outer Rim: 272x160 at 2x = 544x320, drifting slow like deep space */
#s-warren .imgband {
    top: 0;
    height: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 130px), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 56px, #000 calc(100% - 130px), transparent);
}
.sp-base::before    { background-image: url(/assets/quest/bg/space-base.png);    --dur: 90s; }
.sp-stars::before   { background-image: url(/assets/quest/bg/space-stars.png);   --dur: 42s; }
.sp-planets::before { background-image: url(/assets/quest/bg/space-planets.png); --dur: 22s; }

/* Scrolling parallax bands: two copies of a seamless strip, marquee-style */
.band {
    position: absolute;
    left: 0;
    width: 200%;
    display: flex;
}
.band svg { width: 50%; height: 100%; flex: 0 0 auto; }
.band.back { bottom: 100px; height: 62%; opacity: 0.9; }
.band.front { bottom: 48px; height: 36%; }
.band-slow { animation: band-scroll 40s linear infinite; }
.band-fast { animation: band-scroll 16s linear infinite; }
.band-space { bottom: 12%; height: 70%; animation-duration: 60s; }
@keyframes band-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Tiled ground strip (sits at the bottom of the env = the floor line) */
.ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    background-size: 32px 32px;
}
.ground { overflow: hidden; }
.ground::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(100% + 32px);
    background-size: 32px 32px;
    will-change: transform;
}
.g-forest::before {
    background-image:
        linear-gradient(180deg, #1e5c3a 0 6px, transparent 6px),
        repeating-linear-gradient(90deg, #143024 0 16px, #0e241a 16px 32px);
    animation: ground-scroll 1.1s linear infinite;
}
.g-tech::before {
    background-image:
        linear-gradient(180deg, #3a4a70 0 6px, transparent 6px),
        repeating-linear-gradient(90deg, #1c2438 0 16px, #141a2c 16px 32px);
    animation: ground-scroll 1.1s linear infinite;
}
.g-castle::before {
    background-image:
        linear-gradient(180deg, #8a6210 0 6px, transparent 6px),
        repeating-linear-gradient(90deg, #3a2c10 0 16px, #2c2008 16px 32px);
}
@keyframes ground-scroll {
    to { transform: translate3d(-32px, 0, 0); }
}

/* Level title card, NES style */
.level-card {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: clamp(13px, 3.6vw, 19px);
    line-height: 2;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
    background: rgba(0, 0, 6, 0.72);
    border: 3px solid var(--frame);
    padding: 12px 20px;
    z-index: 3;
    animation: level-card-show 3.2s ease forwards;
    pointer-events: none;
}
@keyframes level-card-show {
    0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
    12% { opacity: 1; transform: translateX(-50%) scale(1); }
    78% { opacity: 1; }
    100% { opacity: 0; }
}

/* Walking hero: strides in, then walks in place as the world scrolls by */
.level .char {
    position: absolute;
    bottom: calc(var(--floor) + 46px);
    left: 16%;
    width: clamp(74px, 20vw, 108px);
    z-index: 2;
}
.level .char svg { width: 100%; height: auto; shape-rendering: crispEdges; display: block; }
.level .char.walker { animation: walk-in 2s steps(12) 0.35s both; will-change: transform; }
.level .char.walker svg { animation: walk-bob 0.55s steps(2) infinite; will-change: transform; }
@keyframes walk-in {
    from { transform: translateX(-60vw); opacity: 0; }
    10% { opacity: 1; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes walk-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -5px, 0); }
}

/* The Chill Chums Network Messenger (floating orb) */
.orb {
    position: absolute;
    bottom: calc(var(--floor, 200px) + 46px + clamp(110px, 30vw, 160px));
    left: 34%;
    width: 30px;
    height: 30px;
    z-index: 2;
    opacity: 0;
    animation:
        orb-fly 1s ease-out 2.4s forwards,
        orb-bob 2.2s ease-in-out 3.4s infinite;
}
.orb-core {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 10px 4px rgba(128, 232, 255, 0.9),
        0 0 26px 12px rgba(128, 232, 255, 0.45);
}
.orb-ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--glint);
    border-radius: 50%;
    opacity: 0.7;
}
.orb.hailing .orb-ring { animation: ring-pulse 0.7s ease-out 3; }
@keyframes ring-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.2); opacity: 0; }
}
@keyframes orb-fly {
    from { transform: translate(50vw, -30vh) scale(0.3); opacity: 0; }
    to   { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes orb-bob {
    0%, 100% { margin-bottom: 0; }
    50% { margin-bottom: 12px; }
}
.orb.orb-high { bottom: auto; top: 24%; left: 40%; }
.orb.orb-center {
    position: relative;
    bottom: auto;
    left: auto;
    animation: orb-fly 1s ease-out 0.3s forwards, orb-bob 2.2s ease-in-out 1.3s infinite;
}

/* Warren's ship: shmup flyby that settles into a hover */
.ship-wrap {
    position: absolute;
    top: 34%;
    left: 12%;
    width: clamp(120px, 32vw, 190px);
    z-index: 2;
    will-change: transform;
    animation: ship-in 1.8s cubic-bezier(0.2, 0.8, 0.3, 1) 0.3s both;
}
/* Ship + flame bob together as one unit; only the flame flickers on top. */
.ship-bobber {
    position: relative;
    animation: ship-bob 2.6s ease-in-out 2.1s infinite;
    will-change: transform;
}
.ship-wrap .ship { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }
.ship-wrap .flame {
    position: absolute;
    left: -13%;
    top: 40%;
    width: 20%;
    height: 20%;
    border-radius: 50% 40% 40% 50% / 50%;
    background: linear-gradient(90deg, rgba(128,232,255,0) 0%, #80e8ff 55%, #eaffff 100%);
    box-shadow: 0 0 10px 2px rgba(128, 232, 255, 0.7);
    transform-origin: right center;
    animation: flame-flicker 0.12s steps(2) infinite;
}
@keyframes ship-in {
    from { transform: translateX(110vw) translateY(-14vh) scale(0.6); }
    to   { transform: translateX(0) translateY(0) scale(1); }
}
@keyframes ship-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 14px, 0); }
}
@keyframes flame-flicker {
    0%, 100% { opacity: 1; transform: scaleX(1); }
    50% { opacity: 0.6; transform: scaleX(0.68); }
}

/* Throne room */
.throne {
    position: absolute;
    bottom: calc(var(--floor) + 34px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(140px, 38vw, 220px);
    height: clamp(122px, 33vw, 192px);
    z-index: 1;
    shape-rendering: crispEdges;
    filter: drop-shadow(0 0 26px rgba(248, 204, 80, 0.55));
    animation: throne-shimmer 3.5s ease-in-out infinite;
}
@keyframes throne-shimmer {
    0%, 100% { filter: drop-shadow(0 0 22px rgba(248, 204, 80, 0.45)); }
    50% { filter: drop-shadow(0 0 38px rgba(248, 204, 80, 0.85)); }
}
/* Radiant aura behind the throne: rotating rays + expanding halo rings */
.throne-rays {
    position: absolute;
    bottom: calc(var(--floor) - 70px);
    left: 50%;
    width: clamp(260px, 76vw, 420px);
    height: clamp(260px, 76vw, 420px);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: conic-gradient(
        from 0deg,
        rgba(248, 204, 80, 0.18) 0deg 10deg, transparent 10deg 30deg,
        rgba(248, 204, 80, 0.18) 30deg 40deg, transparent 40deg 60deg,
        rgba(248, 204, 80, 0.18) 60deg 70deg, transparent 70deg 90deg,
        rgba(248, 204, 80, 0.18) 90deg 100deg, transparent 100deg 120deg,
        rgba(248, 204, 80, 0.18) 120deg 130deg, transparent 130deg 150deg,
        rgba(248, 204, 80, 0.18) 150deg 160deg, transparent 160deg 180deg,
        rgba(248, 204, 80, 0.18) 180deg 190deg, transparent 190deg 210deg,
        rgba(248, 204, 80, 0.18) 210deg 220deg, transparent 220deg 240deg,
        rgba(248, 204, 80, 0.18) 240deg 250deg, transparent 250deg 270deg,
        rgba(248, 204, 80, 0.18) 270deg 280deg, transparent 280deg 300deg,
        rgba(248, 204, 80, 0.18) 300deg 310deg, transparent 310deg 330deg,
        rgba(248, 204, 80, 0.18) 330deg 340deg, transparent 340deg 360deg
    );
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 60%);
    mask: radial-gradient(circle, #000 8%, transparent 60%);
    animation: throne-rays-turn 32s linear infinite;
    will-change: transform;
}
@keyframes throne-rays-turn {
    to { transform: translateX(-50%) rotate(360deg); }
}
.throne-halo {
    position: absolute;
    /* Center vertically on the same point the sunburst rays radiate from:
       rays center = (--floor - 70px) + raysHeight/2, minus half this halo. */
    bottom: calc(var(--floor) - 100px + clamp(130px, 38vw, 210px));
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    border-radius: 50%;
    border: 2px solid rgba(248, 204, 80, 0.7);
    z-index: 0;
    pointer-events: none;
    animation: throne-halo-out 3.2s ease-out infinite;
    will-change: transform, opacity;
}
.throne-halo.h2 { animation-delay: 1.6s; }
@keyframes throne-halo-out {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(4.5); opacity: 0; }
}
.throne-glow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 120vmin;
    height: 70vmin;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 100%, rgba(248, 204, 80, 0.22), transparent 65%);
}
#s-unite .env { background: linear-gradient(180deg, #0c0820 0%, #241430 75%); }
.unite-heroes {
    position: absolute;
    bottom: calc(var(--floor) + 12px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: clamp(48px, 15vw, 104px);
    z-index: 2;
}
.unite-heroes .char {
    position: static;
    width: clamp(58px, 15vw, 84px);
    animation: walk-in 1.6s steps(10) both;
    will-change: transform;
}
.unite-heroes .char svg { animation: walk-bob 0.55s steps(2) 6; }
.unite-heroes .char:nth-child(1), .unite-heroes .char:nth-child(1) svg { animation-delay: 0.2s; }
.unite-heroes .char:nth-child(2), .unite-heroes .char:nth-child(2) svg { animation-delay: 0.9s; }
.unite-heroes .char:nth-child(3), .unite-heroes .char:nth-child(3) svg { animation-delay: 1.6s; }
.unite-heroes .char svg { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }

/* ---------- Cold open: moonlit castle of the Network ---------- */
.moon {
    position: absolute;
    top: 7%;
    right: 13%;
    width: clamp(58px, 15vw, 96px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, #f6eed2 0 58%, #ddd0ac 58% 100%);
    box-shadow: 0 0 44px rgba(240, 230, 200, 0.4), 0 0 90px rgba(240, 230, 200, 0.18);
}
.castle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 540px);
    height: auto;
    filter: drop-shadow(0 -4px 18px rgba(140, 150, 255, 0.28));
}
/* Moonlit horizon behind the castle so the silhouette reads against the sky */
.open-env::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    background: linear-gradient(180deg, transparent, rgba(110, 122, 235, 0.3) 45%, rgba(138, 148, 250, 0.52) 100%);
}
.open-env .castle { z-index: 1; }
/* The Messenger slips out of the castle and rises to the sky */
.orb.orb-rise {
    bottom: auto;
    top: 24%;
    left: 36%;
    animation:
        orb-rise 3.4s ease-out 0.7s forwards,
        orb-bob 2.2s ease-in-out 4.2s infinite;
}
@keyframes orb-rise {
    0% { transform: translate(11vw, 42vh) scale(0.2); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* ---------- Throne-room halls (law / gift / trial / ballot) ---------- */
.hall { --floor: clamp(205px, 30vh, 285px); }
.hall .env {
    position: absolute;
    inset: 0 0 var(--floor) 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 30%, rgba(24, 12, 44, 0.55) 100%);
}
.hall .env .ground { height: 36px; }

/* ---------- Inline teaser player ---------- */
#teaser-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
#teaser-modal[hidden] { display: none; }
.teaser-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 2, 12, 0.9);
}
.teaser-frame {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
}
.teaser-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
}
.teaser-close {
    position: absolute;
    top: -46px;
    right: 0;
}
.end-sublink {
    font-family: 'DotGothic16', monospace;
    font-size: 16px;
    color: var(--dim);
}
.end-sublink:hover, .end-sublink:focus-visible { color: var(--gold); outline: none; }

/* Law scene heroes above their hearts */
.law-heroes { display: flex; gap: clamp(30px, 9vw, 64px); }
.law-heroes svg {
    width: clamp(48px, 12vw, 70px);
    height: auto;
    shape-rendering: crispEdges;
}

/* ============================================================
   THE ROYAL BALLOT (vote scene)
   ============================================================ */
.vote-stage { gap: 14px; }
/* The ballot can get tall (chips + inputs + tally + CTA). Let it scroll above
   the dialog instead of hiding the last rows behind the Oracle. */
#s-vote .scene-stage {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 46px;
    padding-bottom: 4px;
    gap: 12px;
}
#s-vote .dialog { min-height: 4.6em; }
/* The end scene stacks crown + title + buttons + full credits; let it scroll
   above the dialog so the last credit lines aren't hidden. */
#s-end .scene-stage {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 44px;
    padding-bottom: 4px;
    gap: 12px;
}
#s-end .dialog { min-height: 4.6em; }
.ballot {
    width: min(100%, 520px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ballot-chips { display: flex; gap: 8px; }
.chip {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, var(--win-top), var(--win-bot));
    border: 3px solid var(--frame);
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px var(--win-line), 0 4px 0 rgba(0, 0, 0, 0.45);
    color: var(--ink);
    padding: 11px 4px 9px;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(7px, 2vw, 9px);
}
.chip:hover, .chip:focus-visible { border-color: var(--gold); outline: none; }
.chip.chosen {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 2px var(--win-line), 0 0 18px rgba(248, 204, 80, 0.55);
    color: var(--gold);
}
.chip .battle-icon { width: 26px; height: 26px; }
.ballot-row { display: flex; gap: 8px; }
.ballot-input {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(4, 4, 28, 0.85);
    border: 3px solid var(--frame);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'DotGothic16', monospace;
    font-size: 18px;
    padding: 10px 12px;
}
.ballot-input:focus-visible { outline: none; border-color: var(--glint); }
.ballot-input::placeholder { color: #5a60a0; }
#vote-code { text-transform: uppercase; letter-spacing: 0.12em; }
.ballot-btn {
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--win-top), var(--win-bot));
    border: 3px solid var(--frame);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(8px, 2.2vw, 10px);
    line-height: 1.7;
    padding: 10px 13px;
    cursor: pointer;
}
.ballot-btn:hover, .ballot-btn:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.ballot-btn:disabled { opacity: 0.45; cursor: default; }
.ballot-btn.gold { border-color: var(--gold); color: var(--gold); }
.tally { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tally[hidden] { display: none; }
.ballot-cta {
    display: block;
    width: 100%;
    margin-top: 6px;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    color: #201004;
    border: 3px solid var(--frame);
    border-radius: 8px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2.8vw, 13px);
    letter-spacing: 0.04em;
    padding: 13px 10px;
    cursor: pointer;
    animation: cta-glow 1.8s ease-in-out infinite;
}
.ballot-cta[hidden] { display: none; }
.ballot-cta:hover, .ballot-cta:focus-visible { filter: brightness(1.12); outline: none; }
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 12px rgba(248,204,80,0.4); }
    50% { box-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 24px rgba(248,204,80,0.8); }
}
.tally-row { display: flex; align-items: center; gap: 10px; }
.tally-row .f-title { font-size: 8px; width: 74px; flex: 0 0 auto; color: var(--dim); }
.tally-row.leader .f-title { color: var(--gold); }
.bar-track {
    flex: 1 1 auto;
    height: 14px;
    border: 2px solid var(--frame);
    border-radius: 4px;
    background: rgba(4, 4, 28, 0.8);
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(90deg, var(--glint) 0 8px, #4890c8 8px 12px);
    transition: width 0.9s cubic-bezier(0.2, 1, 0.4, 1);
}
.tally-row.leader .bar-fill {
    background: repeating-linear-gradient(90deg, var(--gold) 0 8px, var(--gold-deep) 8px 12px);
}
.tally-count {
    flex: 0 0 auto;
    width: 18px;
    text-align: right;
    font-size: 18px;
    color: var(--ink);
}

/* ---------- No-JS fallback ---------- */
.noscript-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--void);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-size: 20px;
    line-height: 1.6;
}
.noscript-overlay a { color: var(--gold); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .star-layer, .star, .dialog-next, .legend-logo, .legend-sparkle,
    .rays, .throne-rays, .throne-halo, .throne, .ballot-cta,
    .item-sprite, .item-title, .law-hearts svg, .gift-book,
    .trial-heading, .insert-coin, .menu-item::before,
    .aur-blob, #aurora, #sweep, #flash, #stage, .letterbox,
    .burst-p, .mote, .sparkfall, .sstar, .vision-orb, .bar-fill,
    .band, .imgband, .imgband::before, .ground, .ground::before,
    .level-card, .char, .char svg, .orb,
    .ship-wrap, .ship-wrap .flame, .unite-heroes .char, .law-heroes svg {
        animation: none !important;
        transition: none !important;
    }
    .item-sprite { opacity: 1; transform: none; }
    #s-prophecy .vision-frame { transition: none; }
    .orb { opacity: 1; }
    .level-card { opacity: 0.95; }
    #fader { transition: none; }
}

/* ---------- Small screens: tighter dialog ---------- */
@media (max-height: 640px) {
    .dialog { font-size: 17px; min-height: 6.5em; padding: 12px 16px 18px; }
    .scene-stage { gap: 10px; }
}