/* ============================================================
   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; }
.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 ---------- */
#s-title { justify-content: center; }
#s-title .scene-stage { gap: 22px; }
.title-logo {
    width: min(80vw, 400px);
    height: auto;
    image-rendering: auto;
    filter: drop-shadow(0 0 18px rgba(128, 232, 255, 0.55));
}
.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;
}
.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); }
}
.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-credits {
    font-size: 14px;
    color: var(--dim);
    text-align: center;
    line-height: 1.6;
    margin-top: 10px;
}
.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%;
    mix-blend-mode: screen;
}
.aur-blob.a {
    top: -45vmax;
    left: -30vmax;
    background: radial-gradient(circle, rgba(32, 80, 255, 0.5), 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.4), 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.85; }
    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; }
}
.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) ---------- */
.vision-orb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 34px 12px rgba(248, 204, 80, 0.65);
    animation: orb-pulse 1.8s ease-in-out infinite;
}
@keyframes orb-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 26px 8px rgba(248, 204, 80, 0.5); }
    50% { transform: scale(1.35); box-shadow: 0 0 44px 18px rgba(248, 204, 80, 0.8); }
}
#s-prophecy .vision-frame {
    opacity: 0;
    transform: scale(0.06);
    transition: transform 1s cubic-bezier(0.2, 1.3, 0.35, 1), opacity 0.5s ease;
}
#s-prophecy.revealed .vision-frame {
    opacity: 1;
    transform: scale(1);
}
#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, #041210 0%, #0a2a1e 70%); }
#s-rito .env { background: linear-gradient(180deg, #0a0c16 0%, #131a2c 70%); }

/* 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;
}
.g-forest {
    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 {
    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 {
    background-image:
        linear-gradient(180deg, #8a6210 0 6px, transparent 6px),
        repeating-linear-gradient(90deg, #3a2c10 0 16px, #2c2008 16px 32px);
}
@keyframes ground-scroll {
    from { background-position: 0 0, 0 0; }
    to   { background-position: -32px 0, -32px 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,
        walk-bob 0.55s steps(2) infinite;
}
@keyframes walk-in {
    from { transform: translateX(-60vw); opacity: 0; }
    10% { opacity: 1; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes walk-bob {
    0%, 100% { margin-bottom: 0; }
    50% { margin-bottom: 5px; }
}

/* 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;
    animation:
        ship-in 1.8s cubic-bezier(0.2, 0.8, 0.3, 1) 0.3s both,
        ship-bob 2.6s ease-in-out 2.1s infinite;
}
.ship-wrap .ship { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }
.ship-wrap .flame {
    position: absolute;
    left: -14%;
    top: 38%;
    width: 16%;
    height: 22%;
    background: linear-gradient(90deg, transparent, #80e8ff 60%, #fff);
    animation: flame-flicker 0.18s 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% { margin-top: 0; }
    50% { margin-top: 14px; }
}
@keyframes flame-flicker {
    0%, 100% { opacity: 1; transform: scaleX(1); }
    50% { opacity: 0.6; transform: scaleX(0.7); }
}
.speedlines {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(128, 232, 255, 0.14) 50%, transparent 100%);
    background-size: 220px 3px;
    background-repeat: repeat;
    animation: speed-fly 0.5s linear infinite;
    opacity: 0.5;
}
@keyframes speed-fly {
    from { background-position: 0 0; }
    to   { background-position: -220px 0; }
}

/* Throne room */
.throne {
    position: absolute;
    bottom: calc(var(--floor) + 46px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(150px, 42vw, 240px);
    height: auto;
    z-index: 1;
    shape-rendering: crispEdges;
    filter: drop-shadow(0 0 28px rgba(248, 204, 80, 0.45));
}
.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) + 16px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(40px, 12vw, 90px);
    z-index: 2;
}
.unite-heroes .char {
    position: static;
    width: clamp(58px, 15vw, 84px);
    animation: walk-in 1.6s steps(10) both, walk-bob 0.55s steps(2) 6;
}
.unite-heroes .char:nth-child(1) { animation-delay: 0.2s, 0.2s; }
.unite-heroes .char:nth-child(2) { animation-delay: 0.9s, 0.9s; }
.unite-heroes .char:nth-child(3) { animation-delay: 1.6s, 1.6s; }
.unite-heroes .char svg { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }

/* 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; }
.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; }
.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, .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, .ground, .speedlines, .level-card, .char, .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; }
}