@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    --bg: #080608;
    --panel: rgba(18, 10, 16, 0.84);
    --panel-strong: rgba(10, 7, 10, 0.96);
    --primary: #ff7ac8;
    --secondary: #ffb6df;
    --accent: #ffd7ef;
    --text: #fff5fb;
    --muted: #a77f99;
    --error: #ff5b87;
    --line: rgba(255, 122, 200, 0.28);
    --glow: 0 0 6px rgba(255, 122, 200, .8), 0 0 20px rgba(255, 122, 200, .28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; }
body {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 122, 200, .055), transparent 42%),
        var(--bg);
    color: var(--text);
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 24px;
    min-height: 100vh;
    overflow: hidden;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.hidden { display: none !important; }

.emotion-wash {
    position: fixed;
    inset: 0;
    z-index: 47;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease, background .7s ease, box-shadow .7s ease;
}
body.emotion-jealousy .emotion-wash {
    opacity: 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 220, 38, .20), rgba(120, 92, 0, .10) 42%, rgba(0,0,0,0) 76%),
        rgba(92, 72, 0, .10);
    box-shadow: inset 0 0 190px rgba(255, 214, 0, .32);
}
body.emotion-anger .emotion-wash {
    opacity: 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 24, 24, .22), rgba(116, 0, 0, .13) 43%, rgba(0,0,0,0) 78%),
        rgba(96, 0, 0, .12);
    box-shadow: inset 0 0 210px rgba(255, 0, 0, .36);
    animation: angerScreenPulse 1.9s ease-in-out infinite;
}
body.emotion-sadness .emotion-wash {
    opacity: 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(48, 126, 255, .20), rgba(0, 43, 116, .12) 45%, rgba(0,0,0,0) 78%),
        rgba(0, 35, 98, .10);
    box-shadow: inset 0 0 210px rgba(40, 118, 255, .34);
}

@keyframes angerScreenPulse {
    0%, 100% { opacity: .78; filter: saturate(1); }
    50% { opacity: 1; filter: saturate(1.25); }
}

.emotion-word-burst {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(.72) rotate(-3deg);
    font-family: 'VT323', 'Courier New', monospace;
    font-size: clamp(92px, 18vw, 280px);
    font-weight: 700;
    line-height: .82;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    mix-blend-mode: screen;
    filter: blur(.2px);
    text-shadow: 0 0 22px currentColor, 0 0 70px currentColor;
}
.emotion-word-burst.show { animation: emotionWordBurst 1.05s cubic-bezier(.12,.84,.2,1) both; }
.emotion-word-burst.burst-jealousy { color: rgba(255, 226, 70, .35); }
.emotion-word-burst.burst-anger { color: rgba(255, 46, 58, .34); }
.emotion-word-burst.burst-sadness { color: rgba(69, 145, 255, .32); }
@keyframes emotionWordBurst {
    0% { opacity: 0; transform: scale(.68) rotate(-4deg); filter: blur(8px); }
    16% { opacity: .95; transform: scale(1.04) rotate(1deg); filter: blur(0); }
    45% { opacity: .48; transform: scale(1.12) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.32) rotate(2deg); filter: blur(3px); }
}
@media (max-width: 650px) {
    .emotion-word-burst { font-size: clamp(64px, 21vw, 140px); white-space: normal; padding: 22px; }
}


/* Privacy warning */
.privacy-warning {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 2, 4, .82);
    backdrop-filter: blur(10px);
}
.privacy-warning-card {
    width: min(620px, 94vw);
    border: 1px solid var(--error);
    background: rgba(12, 6, 10, .96);
    box-shadow: 0 0 32px rgba(255, 91, 135, .22), inset 0 0 35px rgba(255, 91, 135, .06);
    padding: clamp(28px, 5vw, 48px);
    text-align: center;
    animation: privacyPulse .18s linear 2;
}
.privacy-warning-kicker {
    color: var(--error);
    letter-spacing: .18em;
    font-size: 17px;
    margin-bottom: 12px;
}
.privacy-warning h2 {
    color: var(--accent);
    font-size: clamp(34px, 6vw, 54px);
    font-weight: 400;
    letter-spacing: .08em;
    text-shadow: 0 0 16px rgba(255, 91, 135, .55);
}
.privacy-warning p {
    color: var(--secondary);
    line-height: 1.25;
    margin: 16px auto;
    max-width: 500px;
}
.privacy-warning-line {
    margin-top: 24px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 91, 135, .25);
    color: var(--muted);
    font-size: 16px;
    letter-spacing: .1em;
}
.privacy-alert-active #screen {
    filter: blur(8px) brightness(.45);
}
@keyframes privacyPulse {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-4px); }
    70% { transform: translateX(4px); }
}

/* CRT */
.crt::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background:
        linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.27) 50%),
        linear-gradient(90deg, rgba(255,0,0,.045), rgba(0,255,0,.014), rgba(0,0,255,.045));
    background-size: 100% 3px, 4px 100%;
}
.crt::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 49;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.67) 100%);
    box-shadow: inset 0 0 120px rgba(255, 122, 200, .1);
}
.ambient-noise {
    position: fixed;
    inset: -40%;
    pointer-events: none;
    opacity: .025;
    z-index: 48;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: noiseShift .25s steps(2) infinite;
}
@keyframes noiseShift { 0% { transform: translate(0,0); } 50% { transform: translate(3%, -2%); } 100% { transform: translate(-2%, 2%); } }

.screen-container {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 4vw, 48px);
    text-shadow: 0 0 5px rgba(255, 122, 200, .75);
    transform-origin: center;
}
.stage { width: min(1120px, 100%); }
.centered-stage { max-width: 820px; text-align: center; margin: auto; }
.wide-stage { max-width: 900px; }
.final-stage { max-width: 1180px; }

.power-off { animation: turn-off .55s cubic-bezier(.23,1,.32,1) forwards; }
.power-on { animation: turn-on .72s cubic-bezier(.23,1,.32,1) forwards; }
@keyframes turn-off {
    0% { transform: scale(1,1); filter: brightness(1); opacity: 1; }
    55% { transform: scale(1,.012); filter: brightness(7); opacity: 1; }
    100% { transform: scale(0,.004); filter: brightness(0); opacity: 0; }
}
@keyframes turn-on {
    0% { transform: scale(0,.004); filter: brightness(0); opacity: 0; }
    45% { transform: scale(1,.012); filter: brightness(6); opacity: 1; }
    100% { transform: scale(1,1); filter: brightness(1); opacity: 1; }
}

.archive-label {
    color: var(--primary);
    font-size: 18px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.terminal-title, .stage-header h2 {
    color: var(--accent);
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.stage-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}
.live-dot, .signal-badge {
    color: var(--secondary);
    font-size: 16px;
    letter-spacing: .08em;
    white-space: nowrap;
}
.live-dot i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 12px var(--primary);
    margin-right: 7px;
    animation: pulse 1s infinite alternate;
}
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }

/* Boot */
#ui-boot { max-width: 720px; }
.boot-text {
    min-height: 300px;
    color: var(--secondary);
    line-height: 1.52;
    padding: 24px;
    border-left: 2px solid var(--primary);
    background: linear-gradient(90deg, rgba(255,122,200,.055), transparent 65%);
    box-shadow: -10px 0 35px rgba(255,122,200,.08);
}
.boot-line { animation: terminalLine .2s ease-out both; }
.boot-line::before { content: "> "; color: var(--primary); }
.boot-cursor { display: inline-block; color: var(--accent); animation: blink .65s step-end infinite; }
@keyframes terminalLine { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* Login */
.checkpoint-question {
    font-size: clamp(27px, 3.2vw, 42px);
    line-height: 1.15;
    margin: 32px auto 16px;
    max-width: 760px;
}
.hint-stack { width: min(680px, 90vw); margin-top: 12px; display: grid; gap: 7px; }
.hint { color: var(--secondary); font-size: 18px; opacity: .66; padding: 6px 10px; border-left: 1px solid rgba(255,182,223,.35); background: rgba(255,122,200,.035); animation: hintUnlock .35s ease-out; }
.hint.latest { opacity: 1; border-left-color: var(--primary); text-shadow: 0 0 8px rgba(255,122,200,.45); }
.hint-label { color: var(--primary); letter-spacing: 1px; }
@keyframes hintUnlock { from { opacity: 0; transform: translateY(-4px); } to { transform: none; } }
.input-field {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--primary);
    color: var(--text);
    outline: 0;
    padding: 10px 12px;
    text-shadow: 0 0 5px var(--primary);
    transition: border-color .2s, box-shadow .2s;
}
.input-field:focus { box-shadow: 0 8px 18px -14px var(--primary); border-color: var(--accent); }
.login-field { width: min(520px, 90%); margin-top: 28px; text-align: center; font-size: 29px; }
.status-line { min-height: 24px; color: var(--secondary); font-size: 18px; margin-top: 12px; }
.glitch { animation: glitch .16s linear 3; }
@keyframes glitch {
    0% { transform: translate(0); filter: hue-rotate(0); }
    20% { transform: translate(-5px,2px); }
    40% { transform: translate(4px,-1px); filter: hue-rotate(18deg); }
    60% { transform: translate(-3px,-2px); }
    80% { transform: translate(3px,2px); }
    100% { transform: translate(0); }
}

/* Shared buttons */
.btn, .icon-btn {
    border: 1px solid var(--primary);
    background: rgba(255,122,200,.08);
    color: var(--text);
    cursor: pointer;
    padding: 10px 18px;
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: 0 0 12px rgba(255,122,200,.16);
    transition: .2s ease;
}
.btn:hover:not(:disabled), .icon-btn:hover { background: var(--primary); color: var(--bg); box-shadow: var(--glow); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.secondary-btn { border-color: rgba(255,182,223,.48); color: var(--secondary); }

/* Chat */
.chat-container-outer {
    height: min(67vh, 650px);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,122,200,.025), rgba(0,0,0,.28));
    box-shadow: inset 0 0 40px rgba(0,0,0,.35), 0 0 35px rgba(255,122,200,.07);
    padding: 12px;
    display: flex;
    flex-direction: column;
}
.chat-box {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}
.msg {
    max-width: min(80%, 620px);
    padding: 10px 14px;
    line-height: 1.18;
    border: 1px solid transparent;
    animation: fadeIn .25s ease-out;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.msg.me { align-self: flex-start; background: rgba(255,122,200,.13); border-color: rgba(255,122,200,.5); }
.msg.dumpling { align-self: flex-end; background: rgba(255,182,223,.07); border-color: rgba(255,182,223,.28); text-align: right; }
.msg .msg-meta { display: block; font-size: 14px; color: var(--muted); margin-bottom: 3px; }
.chat-input-wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding: 12px 6px 2px;
}
.chat-input-wrapper .input-field { width: 100%; margin: 0; }
.prompt { color: var(--primary); }
.icon-btn { padding: 7px 13px; font-size: 17px; }

/* Questions */
.question-meta {
    width: min(720px, 100%);
    margin: 20px auto 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--secondary);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}
.timer { font-size: 48px; color: var(--primary); text-shadow: 0 0 16px var(--primary); min-width: 64px; }
.timer.ready { color: var(--accent); animation: timerReady .65s ease-out; }
@keyframes timerReady { 50% { transform: scale(1.18); text-shadow: 0 0 30px var(--primary); } }
.question-text { font-size: clamp(30px, 4vw, 45px); line-height: 1.12; margin: 24px auto; max-width: 760px; }
.answer-box {
    width: min(700px, 95%);
    height: 160px;
    background: rgba(8,6,8,.72);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 15px;
    outline: none;
    resize: none;
    text-shadow: 0 0 4px var(--primary);
    box-shadow: inset 0 0 20px rgba(255,122,200,.04);
}
.answer-box:focus { border-color: var(--primary); }
.wait-note { min-height: 24px; margin: 12px 0; color: var(--muted); font-size: 17px; }

/* Final music + lyrics */
.final-grid {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr);
    gap: clamp(24px, 4vw, 58px);
    align-items: center;
}
.player-container { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cassette {
    width: min(360px, 100%);
    height: 215px;
    border: 2px solid var(--primary);
    border-radius: 12px;
    background:
        linear-gradient(rgba(255,122,200,.055), rgba(255,122,200,.015)),
        var(--panel-strong);
    box-shadow: inset 0 0 25px rgba(255,122,200,.14), 0 0 22px rgba(255,122,200,.18);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cassette-topline, .cassette-label { color: var(--secondary); font-size: 15px; letter-spacing: .12em; text-align: center; }
.reel-row { display: flex; justify-content: center; align-items: center; gap: 18px; }
.reel {
    width: 76px;
    height: 76px;
    border: 2px dashed var(--secondary);
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
}
.reel span { width: 27px; height: 27px; border: 1px solid var(--primary); border-radius: 50%; box-shadow: inset 0 0 8px rgba(255,122,200,.35); }
.reel.playing { animation: spin 2.8s linear infinite; }
.tape-window { width: 92px; height: 34px; border: 1px solid var(--line); display: flex; align-items: center; padding: 4px; overflow: hidden; }
.tape-line { width: 100%; border-top: 2px solid rgba(255,182,223,.5); }
@keyframes spin { to { transform: rotate(360deg); } }
.time-row { width: min(360px, 100%); display: flex; justify-content: space-between; font-size: 18px; color: var(--secondary); margin-top: 18px; }
.progress-container {
    appearance: none;
    border: 0;
    padding: 0;
    width: min(360px, 100%);
    height: 18px;
    background: transparent;
    margin: 6px 0 12px;
    position: relative;
    cursor: pointer;
}
.progress-container::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(255,255,255,.16); }
.progress-bar { position: absolute; left: 0; top: 7px; height: 4px; width: 0; background: var(--primary); box-shadow: 0 0 12px var(--primary); }
.progress-knob { position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--primary); transform: translateX(-50%); }
.controls { display: flex; gap: 12px; }
.player-btn { min-width: 120px; }

.lyrics-shell {
    height: min(64vh, 590px);
    min-height: 430px;
    position: relative;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255,122,200,.035), transparent 40%),
        rgba(7,5,7,.72);
    box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 0 35px rgba(255,122,200,.08);
    overflow: hidden;
}
.lyrics-topbar {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    color: var(--secondary);
    font-size: 16px;
    letter-spacing: .12em;
}
.equalizer { display: flex; align-items: end; gap: 2px; height: 15px; }
.equalizer i { display: block; width: 2px; height: 6px; background: var(--primary); animation: eq .7s ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { animation-delay: -.2s; height: 12px; }
.equalizer i:nth-child(3) { animation-delay: -.45s; height: 9px; }
.equalizer i:nth-child(4) { animation-delay: -.1s; height: 14px; }
@keyframes eq { to { height: 2px; opacity: .45; } }
.lyrics-viewport { height: calc(100% - 45px); overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; }
.lyrics-viewport::-webkit-scrollbar { display: none; }
.lyrics-track { padding: 42% 28px; }
.lyric-line {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: visible;
    gap: 7px;
    padding: 8px 0 24px;
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.08;
    color: rgba(255,245,251,.28);
    transform: scale(.94);
    filter: blur(.2px);
    transition: color .4s ease, opacity .4s ease, transform .4s ease, text-shadow .4s ease, filter .4s ease;
    opacity: .55;
}
.lyric-text {
    display: inline-block;
    position: relative;
    z-index: 1;
    max-width: 100%;
}
.lyric-line.near { color: rgba(255,182,223,.55); opacity: .8; transform: scale(.98); }
.lyric-line.active {
    color: var(--text);
    opacity: 1;
    transform: scale(1.08);
    filter: none;
    text-shadow: 0 0 7px var(--primary), 0 0 24px rgba(255,122,200,.42);
}
.lyric-line.active[data-emoji]::before {
    content: attr(data-emoji);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%) scale(.92);
    z-index: 0;
    font-size: clamp(88px, 12vw, 165px);
    line-height: 1;
    opacity: .10;
    filter: blur(.2px) saturate(.85);
    pointer-events: none;
    text-shadow: none;
    animation: emotionEmojiIn .55s ease both;
}

.lyric-line.mood-jealousy.near {
    color: rgba(255, 224, 92, .72);
    text-shadow: 0 0 8px rgba(255, 211, 27, .22);
}
.lyric-line.mood-jealousy.active {
    color: #fff4a8;
    text-shadow: 0 0 9px rgba(255, 221, 64, .92), 0 0 27px rgba(190, 143, 0, .66), 0 0 45px rgba(255, 212, 0, .26);
}
.lyric-line.mood-jealousy.active[data-emoji]::before { opacity: .13; }

.lyric-line.mood-sadness.near {
    color: rgba(122, 180, 255, .70);
    text-shadow: 0 0 8px rgba(48, 125, 255, .20);
}
.lyric-line.mood-sadness.active {
    color: #dcecff;
    text-shadow: 0 0 9px rgba(90, 161, 255, .95), 0 0 26px rgba(0, 68, 180, .65), 0 0 44px rgba(30, 109, 255, .28);
    animation: sadnessFloat 2.5s ease-in-out infinite;
}
.lyric-line.mood-sadness.active[data-emoji]::before { opacity: .10; }

.lyric-line.mood-anger.near {
    color: rgba(255,124,124,.7);
    text-shadow: 0 0 9px rgba(255,64,64,.18);
}
.lyric-line.mood-anger.active {
    color: #ffe2e2;
    text-shadow: 0 0 9px rgba(255,76,76,.9), 0 0 24px rgba(156,0,0,.82), 0 0 42px rgba(255,0,0,.34);
    animation: angerPulse 1.8s ease-in-out infinite;
}
.lyric-line.mood-anger.active .lyric-text {
    color: #ffe7e7;
}
.lyric-line.mood-anger.active .lyric-text::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -9px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,72,72,.9), rgba(103,0,0,.08));
    filter: blur(7px);
    opacity: .8;
}
.lyric-line.mood-anger .lyric-bleed {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: min(76%, 420px);
    height: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease;
}
.lyric-line.mood-anger.active .lyric-bleed {
    opacity: 1;
}
.lyric-bleed i {
    position: absolute;
    top: 0;
    width: 7px;
    height: 0;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(180deg, rgba(255,56,56,.98), rgba(122,0,0,.82));
    box-shadow: 0 0 12px rgba(255,0,0,.35);
    animation: bleedDrop 1.9s ease-in-out infinite;
}
.lyric-bleed i:nth-child(1) { left: 24%; animation-delay: 0s; }
.lyric-bleed i:nth-child(2) { left: 51%; animation-delay: .38s; width: 5px; }
.lyric-bleed i:nth-child(3) { left: 73%; animation-delay: .74s; width: 6px; }
.lyrics-fade { position: absolute; left: 0; right: 0; height: 110px; z-index: 4; pointer-events: none; }
.lyrics-fade-top { top: 45px; background: linear-gradient(var(--panel-strong), transparent); }
.lyrics-fade-bottom { bottom: 0; background: linear-gradient(transparent, var(--panel-strong)); }
.final-message { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--line); text-align: center; background: rgba(255,122,200,.035); animation: fadeIn .7s ease; }
.final-message h2 { color: var(--primary); font-weight: 400; letter-spacing: .1em; }
.final-message p { color: var(--secondary); margin-top: 8px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


@keyframes emotionEmojiIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
}

@keyframes sadnessFloat {
    0%, 100% { transform: scale(1.08) translateY(0); }
    50% { transform: scale(1.08) translateY(2px); }
}

@keyframes angerPulse {
    0%, 100% { transform: scale(1.08); filter: none; }
    50% { transform: scale(1.11); filter: saturate(1.18); }
}

@keyframes bleedDrop {
    0% { height: 0; opacity: 0; }
    12% { opacity: .95; }
    55% { height: 28px; opacity: .88; }
    100% { height: 40px; opacity: 0; }
}


@media (max-width: 850px) {
    body { overflow: auto; }
    .screen-container { min-height: 100vh; height: auto; }
    .final-grid { grid-template-columns: 1fr; }
    .final-stage { padding: 20px 0; }
    .lyrics-shell { width: 100%; height: 440px; min-height: 0; }
    .player-container { margin-bottom: 8px; }
}
@media (max-width: 560px) {
    body { font-size: 20px; }
    .screen-container { padding: 16px; }
    .stage-header { align-items: start; flex-direction: column; gap: 5px; }
    .chat-container-outer { height: 70vh; }
    .msg { max-width: 92%; }
    .chat-input-wrapper { grid-template-columns: auto 1fr; }
    .chat-input-wrapper .icon-btn { grid-column: 2; justify-self: end; }
    .question-meta { width: 95%; }
    .final-header .signal-badge { display: none; }
    .lyrics-track { padding-left: 18px; padding-right: 18px; }
}


/* Session activity disclosure */
.session-disclosure {
    position: fixed;
    right: 12px;
    bottom: 9px;
    z-index: 12;
    max-width: min(520px, calc(100vw - 24px));
    color: rgba(255,182,223,.54);
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
    text-shadow: none;
    pointer-events: none;
}
@media (max-width: 560px) {
    .session-disclosure { font-size: 10px; bottom: 5px; right: 7px; }
}

/* =========================================================
   V10 DIRECTOR BUILD
   ========================================================= */
.remote-typing {
    padding: 8px 14px 2px;
    color: var(--secondary);
    font-size: 15px;
    letter-spacing: .08em;
    opacity: .75;
    animation: remoteTypingPulse 1s ease-in-out infinite;
}
.remote-typing span { letter-spacing: .2em; }
@keyframes remoteTypingPulse { 50% { opacity: .38; } }

.msg.mode-system {
    border-color: rgba(116,213,255,.55);
    background: rgba(55,150,210,.08);
    color: #d8f3ff;
    box-shadow: 0 0 18px rgba(65,180,255,.08);
}
.msg.mode-urgent {
    border-color: rgba(255,82,100,.75);
    background: rgba(150,0,20,.12);
    color: #ffe4e8;
    box-shadow: 0 0 24px rgba(255,35,58,.15);
    animation: urgentMessagePulse .9s ease-in-out 2;
}
.msg.mode-corrupted {
    border-color: rgba(196,111,255,.65);
    background: rgba(92,35,120,.12);
    text-shadow: 2px 0 rgba(255,0,90,.25), -2px 0 rgba(0,220,255,.18);
    animation: corruptMessageJitter .18s steps(2,end) 5;
}
@keyframes urgentMessagePulse { 50% { transform: scale(1.018); box-shadow: 0 0 34px rgba(255,35,58,.28); } }
@keyframes corruptMessageJitter { 0%,100% { transform:none; } 50% { transform: translateX(2px) skewX(-1deg); } }

.question-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.timer.warning { color:#ffd25c; text-shadow:0 0 18px rgba(255,210,92,.55); }
.timer.danger { color:#ff596c; text-shadow:0 0 20px rgba(255,50,75,.7); animation:timerDanger .7s ease-in-out infinite; }
@keyframes timerDanger { 50% { transform:scale(1.08); } }
.followup-overlay {
    position:fixed;
    inset:0;
    z-index:35;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(4,3,4,.82);
    backdrop-filter:blur(8px);
}
.followup-card {
    width:min(760px,94vw);
    padding:28px;
    border:1px solid var(--primary);
    background:rgba(10,6,9,.96);
    box-shadow:0 0 55px rgba(255,122,200,.18), inset 0 0 30px rgba(255,122,200,.04);
    text-align:center;
    animation:followupIn .28s ease-out;
}
.followup-question { margin:18px auto 22px; font-size:clamp(26px,4vw,42px); color:var(--text); line-height:1.12; }
@keyframes followupIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }

.director-effect {
    position:fixed;
    inset:0;
    z-index:8;
    pointer-events:none;
    opacity:0;
}
.director-effect.effect-static {
    opacity:.9;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.03) 1px 3px),
               repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px);
    animation:directorStatic .16s steps(2,end) 8;
}
.director-effect.effect-blackout { opacity:1; background:#000; animation:directorBlackout 1.3s ease both; }
.director-effect.effect-blood {
    opacity:1;
    background:linear-gradient(180deg, transparent 0 58%, rgba(120,0,8,.16) 72%, rgba(78,0,4,.48) 100%);
    animation:directorBlood 1.8s ease both;
}
body.director-signal-lost #screen { filter:grayscale(.7) contrast(1.4) brightness(.55); }
body.director-signal-lost::after { box-shadow:inset 0 0 180px rgba(0,0,0,.95); }
@keyframes directorStatic { 50% { transform:translate(2px,-1px); filter:contrast(1.7); } }
@keyframes directorBlackout { 0%,100% { opacity:0; } 18%,72% { opacity:1; } }
@keyframes directorBlood { 0% { opacity:0; transform:translateY(15%); } 25% { opacity:1; } 100% { opacity:0; transform:translateY(0); } }


/* Connection Recovery */
.recovery-meter {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 62;
    width: min(620px, calc(100vw - 28px)); padding: 9px 13px 11px;
    border: 1px solid rgba(255,122,200,.34); background: rgba(8,6,8,.88);
    box-shadow: 0 0 24px rgba(255,122,200,.13), inset 0 0 18px rgba(255,122,200,.04);
    backdrop-filter: blur(7px); text-shadow: none;
}
.recovery-meter-row { display:flex; justify-content:space-between; gap:12px; color:var(--secondary); font-size:15px; letter-spacing:.12em; }
.recovery-meter-row strong { color:var(--text); font-weight:400; }
.recovery-track { height:7px; margin-top:7px; background:#21151d; border:1px solid rgba(255,255,255,.04); overflow:hidden; }
.recovery-fill { height:100%; background:linear-gradient(90deg,#ff5b87,#ff7ac8,#ffd7ef); box-shadow:0 0 14px rgba(255,122,200,.7); transition:width .75s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.recovery-meter.low .recovery-fill { background:linear-gradient(90deg,#79091f,#ff294f); }
.recovery-meter.full .recovery-fill { background:linear-gradient(90deg,#7dffc2,#e9fff4); box-shadow:0 0 18px rgba(125,255,194,.7); }
.recovery-delta { position:absolute; right:12px; bottom:-23px; font-size:16px; opacity:0; pointer-events:none; }
.recovery-delta.show { animation:recoveryDelta 1.6s ease both; }
.recovery-delta.up { color:#9cffc8; }.recovery-delta.down { color:#ff6f8d; }
@keyframes recoveryDelta { 0%{opacity:0;transform:translateY(5px)} 15%,70%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-5px)} }
.recovery-terminal-overlay { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:24px; background:#020102; }
.recovery-terminal-card { width:min(760px,94vw); text-align:center; border:1px solid var(--line); padding:clamp(30px,6vw,64px); background:#080608; box-shadow:inset 0 0 70px rgba(255,122,200,.05); }
.recovery-terminal-card>div { letter-spacing:.18em; font-size:16px; color:var(--muted); }
.recovery-terminal-card h1 { margin:15px 0 20px; font-size:clamp(42px,8vw,82px); font-weight:400; }
.recovery-terminal-card p { font-size:clamp(26px,4vw,40px); line-height:1.15; white-space:pre-wrap; }
.recovery-terminal-card.failure { border-color:#a11434; color:#ff5878; box-shadow:inset 0 0 100px rgba(150,0,30,.14); }
.recovery-terminal-card.failure h1 { color:#ff335c; text-shadow:0 0 24px rgba(255,30,70,.48); }
.recovery-terminal-card.success { border-color:#72ffc0; }
.recovery-terminal-card.success h1 { color:#a9ffd5; text-shadow:0 0 24px rgba(83,255,176,.36); }
.recovery-terminal-card.success p { color:#fff5fb; }

/* Recovered context / intro */
.intro-stage { max-width:930px; margin:auto; padding-top:42px; }
.intro-terminal { min-height:280px; max-height:52vh; overflow:auto; padding:18px 4px; line-height:1.24; color:var(--text); }
.intro-terminal p { margin:0 0 19px; opacity:.95; }
.intro-cursor::after { content:'_'; color:var(--primary); animation:cursorBlink .65s steps(1) infinite; }
.intro-query { margin-top:18px; border-top:1px solid var(--line); padding-top:20px; }
.intro-query-label { color:var(--primary); letter-spacing:.18em; font-size:17px; }
.intro-query h2 { margin:10px 0 18px; font-size:clamp(25px,4vw,38px); font-weight:400; line-height:1.05; }
.intro-options { display:grid; gap:9px; }
.intro-choice { text-align:left; width:100%; background:rgba(255,122,200,.04); border:1px solid var(--line); color:var(--secondary); padding:12px 14px; cursor:pointer; font-family:inherit; }
.intro-choice:hover,.intro-choice.selected { border-color:var(--primary); color:var(--text); background:rgba(255,122,200,.12); box-shadow:0 0 15px rgba(255,122,200,.08); }
.intro-explain { margin-top:14px; text-align:left; }
.intro-explain label { color:var(--primary); display:block; margin-bottom:7px; letter-spacing:.08em; }
.intro-explain textarea { width:100%; background:#090608; border:1px solid var(--line); color:var(--text); padding:12px; outline:none; resize:vertical; }
.intro-query>.btn { margin-top:14px; }
@keyframes cursorBlink { 50%{opacity:0} }

@media(max-width:650px){
    .recovery-meter { top:7px; }
    .intro-stage { padding-top:56px; }
    .intro-terminal { max-height:46vh; }
}


/* =========================================================
   V13 AUDIO + EMOTIVE INTRO
   ========================================================= */
.audio-gate {
    position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 22px;
    background: radial-gradient(circle at 50% 45%, rgba(255,122,200,.08), transparent 40%), #050305;
    transition: opacity .4s ease, transform .4s ease;
}
.audio-gate.leaving { opacity: 0; transform: scale(1.018); pointer-events: none; }
.audio-gate-card {
    width: min(720px, 94vw); text-align: center; border: 1px solid var(--line); padding: clamp(28px, 6vw, 60px);
    background: rgba(8,6,8,.96); box-shadow: 0 0 70px rgba(255,122,200,.10), inset 0 0 60px rgba(255,122,200,.035);
}
.audio-gate-kicker { color: var(--primary); letter-spacing: .18em; font-size: 16px; }
.audio-gate-card h1 { margin: 14px 0 10px; font-size: clamp(38px, 7vw, 72px); font-weight: 400; }
.audio-gate-card p { color: var(--secondary); max-width: 560px; margin: 0 auto 20px; }
.audio-gate-sub { margin-top: 18px; color: rgba(255,182,223,.48); font-size: 13px; letter-spacing: .17em; }

.intro-word { position: relative; display: inline; transition: color .22s ease, text-shadow .22s ease, filter .22s ease; }
.intro-word.intro-anger { color: #ffd9df; }
.intro-word.intro-jealousy { color: #fff3ad; }
.intro-word.intro-sadness { color: #d9eaff; }
.intro-word.intro-anger.intro-hit {
    text-shadow: 0 0 8px rgba(255,38,62,.86), 0 0 22px rgba(170,0,20,.52);
    animation: introAngerHit .68s ease-out;
}
.intro-word.intro-anger.intro-hit::after {
    content: ''; position: absolute; left: 50%; top: 92%; width: 4px; height: 0; border-radius: 0 0 999px 999px;
    background: linear-gradient(#ff334f, #6d0014); box-shadow: 0 0 8px rgba(255,0,40,.45);
    animation: introWordBleed 1.6s .16s ease-in forwards; pointer-events: none;
}
.intro-word.intro-jealousy.intro-hit {
    color: #ffe95a; text-shadow: 0 0 9px rgba(255,220,45,.72), 2px 0 rgba(255,240,80,.22), -2px 0 rgba(135,100,0,.24);
    animation: introJealousyHit .8s steps(2,end);
}
.intro-word.intro-sadness.intro-hit {
    color: #bcdcff; text-shadow: 0 0 10px rgba(70,145,255,.72), 0 0 25px rgba(0,73,180,.42);
    animation: introSadnessHit 1.1s ease-out;
}
@keyframes introWordBleed { 0%{height:0;opacity:0} 18%{opacity:1} 72%{height:26px;opacity:.88} 100%{height:34px;opacity:0} }
@keyframes introAngerHit { 0%{transform:translateX(0)} 18%{transform:translateX(-1px)} 35%{transform:translateX(2px)} 55%{transform:translateX(-1px)} 100%{transform:none} }
@keyframes introJealousyHit { 0%,100%{filter:none} 35%{filter:brightness(1.7) saturate(1.5)} 65%{filter:brightness(.8)} }
@keyframes introSadnessHit { 0%{filter:blur(1px);opacity:.45} 100%{filter:none;opacity:1} }

/* =========================================================
   V15 DESKTOP EXPERIENCE + DUMPLING CURSOR + INTERCEPTION
   ========================================================= */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Keep every scrollable region functional, but never draw a scrollbar. */
* {
    scrollbar-width: none !important;
}
*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Desktop-only custom cursor. */
@media (pointer: fine) {
    body:not(.phone-blocked),
    body:not(.phone-blocked) * {
        cursor: none !important;
    }
}
.dumpling-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    font-size: 27px;
    line-height: 1;
    transform: translate(-50%, -50%) rotate(-8deg);
    filter: drop-shadow(0 0 7px rgba(255,182,223,.55));
    opacity: 0;
    transition: opacity .12s ease, transform .08s ease;
    will-change: left, top, transform;
}
.dumpling-cursor.visible { opacity: 1; }
.dumpling-cursor.press { transform: translate(-50%, -50%) rotate(7deg) scale(.82); }

/* Phone hard-stop. */
.mobile-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,122,200,.10), transparent 42%),
        #050305;
}
.mobile-gate-card {
    width: min(620px, 94vw);
    border: 1px solid var(--line);
    background: rgba(8,6,8,.97);
    padding: 34px 24px;
    text-align: center;
    box-shadow: 0 0 60px rgba(255,122,200,.12), inset 0 0 45px rgba(255,122,200,.035);
}
.mobile-gate-card h1 {
    margin: 10px 0 14px;
    color: var(--accent);
    font-size: clamp(36px, 10vw, 58px);
    font-weight: 400;
}
.mobile-gate-card p { color: var(--secondary); line-height: 1.25; }
.mobile-gate-sub { margin-top: 14px; color: var(--muted) !important; font-size: 17px; }
.mobile-dumpling { font-size: 58px; margin: 8px 0 2px; filter: drop-shadow(0 0 10px rgba(255,182,223,.35)); }
body.phone-blocked > :not(#mobile-gate) { display: none !important; }
body.phone-blocked #mobile-gate { display: grid !important; }

/* Answer-routing / interception hold. */
.question-submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 34;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4,3,4,.82);
    backdrop-filter: blur(7px);
}
.question-submit-card {
    width: min(680px, 92vw);
    padding: clamp(28px, 5vw, 48px);
    text-align: center;
    border: 1px solid var(--line);
    background: rgba(9,6,8,.97);
    box-shadow: 0 0 45px rgba(255,122,200,.12), inset 0 0 30px rgba(255,122,200,.035);
}
.question-submit-card h2 {
    color: var(--accent);
    font-size: clamp(30px, 4.5vw, 50px);
    font-weight: 400;
    letter-spacing: .05em;
}
.question-submit-card p { margin-top: 10px; color: var(--secondary); }
.question-submit-countdown {
    margin-top: 18px;
    color: var(--primary);
    font-size: 52px;
    text-shadow: 0 0 20px rgba(255,122,200,.55);
}
.question-submit-overlay.intercepted .question-submit-card {
    border-color: #ff5b87;
    box-shadow: 0 0 55px rgba(255,30,75,.16), inset 0 0 36px rgba(120,0,28,.08);
}
.question-submit-overlay.intercepted .question-submit-countdown {
    font-size: 24px;
    color: #ff8fa6;
    letter-spacing: .14em;
}

/* Resolution fitting: desktop keeps a single contained viewport, no page scroll. */
.screen-container {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    padding: clamp(12px, 3vmin, 48px);
}
.stage {
    max-height: calc(100dvh - 40px);
}
.chat-container-outer { height: min(67dvh, 650px); }
.answer-box { height: clamp(110px, 18dvh, 160px); }
.intro-terminal { max-height: 50dvh; }

@media (max-height: 820px) and (min-width: 901px) {
    body { font-size: 21px; }
    .screen-container { padding: 16px 24px; }
    .archive-label { margin-bottom: 6px; font-size: 16px; }
    .stage-header { margin-bottom: 10px; padding-bottom: 9px; }
    .chat-container-outer { height: 69dvh; }
    .question-meta { margin-top: 10px; }
    .question-text { margin: 12px auto; font-size: clamp(27px, 3.5vw, 39px); }
    .answer-box { height: 120px; }
    .wait-note { margin: 7px 0; }
    .cassette { height: 172px; width: min(310px,100%); padding: 12px; }
    .lyrics-shell { height: 61dvh; min-height: 360px; }
    .final-grid { gap: clamp(18px, 3vw, 38px); }
    .intro-stage { padding-top: 28px; }
    .intro-terminal { min-height: 220px; max-height: 47dvh; padding-top: 10px; }
}

@media (max-height: 680px) and (min-width: 901px) {
    body { font-size: 19px; }
    .screen-container { padding: 10px 18px; }
    .checkpoint-question { margin: 16px auto 8px; }
    .login-field { margin-top: 14px; }
    .chat-container-outer { height: 72dvh; }
    .question-text { margin: 8px auto; }
    .answer-box { height: 96px; }
    .timer { font-size: 38px; }
    .cassette { height: 145px; }
    .lyrics-shell { height: 60dvh; min-height: 315px; }
    .lyrics-track { padding-top: 34%; padding-bottom: 34%; }
}

/* Disable the old mobile stacking layout because phones get the desktop-required gate. */
@media (max-width: 900px) {
    body { overflow: hidden !important; }
    .screen-container { min-height: 100dvh; height: 100dvh; }
}


/* Country access gate */
.country-gate {
    position: fixed; inset: 0; z-index: 260; display: grid; place-items: center;
    background: #060506; padding: 24px; overflow: hidden;
}
.country-gate-card {
    width: min(680px, 94vw); padding: clamp(34px, 6vw, 64px); text-align: center;
    border: 1px solid var(--line); background: rgba(12,7,11,.97);
    box-shadow: 0 0 45px rgba(255,122,200,.12), inset 0 0 55px rgba(255,122,200,.04);
}
.country-gate-kicker { color: var(--primary); letter-spacing: .22em; font-size: 15px; }
.country-gate-dumpling { font-size: 64px; margin: 18px 0 10px; }
.country-gate h1 { font-size: clamp(40px, 8vw, 76px); font-weight: 400; letter-spacing: .08em; }
.country-gate p { color: var(--secondary); max-width: 520px; margin: 18px auto 0; line-height: 1.35; }
.country-gate.uae { background: radial-gradient(circle, rgba(120,0,0,.32), #050000 62%); animation: uaeGateShake .14s steps(2) infinite; }
.country-gate.uae .country-gate-card { border-color: #ff2638; box-shadow: 0 0 70px rgba(255,0,25,.34), inset 0 0 60px rgba(255,0,0,.11); }
.country-gate.uae .country-gate-kicker, .country-gate.uae h1 { color: #ff3446; text-shadow: 3px 0 #78000b, -3px 0 #ff7882, 0 0 24px #ff001e; }
.country-gate.uae .country-gate-card::before,
.country-gate.uae .country-gate-card::after { content: 'STAY OUT'; position: fixed; font-size: clamp(70px,16vw,220px); color: rgba(255,0,0,.055); pointer-events:none; }
.country-gate.uae .country-gate-card::before { top: 4%; left: -4%; transform: rotate(-8deg); }
.country-gate.uae .country-gate-card::after { bottom: 3%; right: -3%; transform: rotate(7deg); }
@keyframes uaeGateShake { 0%,100%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 60%{transform:translate(2px,-1px)} }

/* Admin-presence pause / daily shutdown */
.admin-pause-overlay, .session-tomorrow-overlay {
    position: fixed; inset: 0; z-index: 230; display: grid; place-items: center; padding: 24px;
    background: rgba(5,3,5,.94); backdrop-filter: blur(8px);
}
.admin-pause-card, .session-tomorrow-card {
    width: min(650px, 94vw); padding: clamp(34px,6vw,58px); text-align:center;
    border: 1px solid var(--line); background: rgba(11,7,10,.98); box-shadow: 0 0 45px rgba(255,122,200,.12);
}
.admin-pause-card h1, .session-tomorrow-card h1 { margin-top: 10px; font-size: clamp(42px,7vw,68px); font-weight:400; letter-spacing:.09em; }
.admin-pause-card p, .session-tomorrow-card p { color: var(--secondary); margin-top: 14px; }
.pause-pulse { margin: 30px auto 0; display:flex; justify-content:center; gap:9px; }
.pause-pulse i { width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 14px var(--primary); animation: pauseDot 1s ease-in-out infinite; }
.pause-pulse i:nth-child(2){animation-delay:.15s}.pause-pulse i:nth-child(3){animation-delay:.3s}
@keyframes pauseDot { 0%,100%{opacity:.2;transform:translateY(0)} 50%{opacity:1;transform:translateY(-8px)} }
.session-tomorrow-overlay { background: #020202; }
.session-tomorrow-card { border-color: rgba(255,91,135,.35); }
.session-tomorrow-card h1 { color: var(--error); text-shadow: 0 0 24px rgba(255,91,135,.3); }
body.admin-session-paused #screen { filter: blur(4px) brightness(.42); }
body.daily-session-closed #screen { opacity: 0; }


/* =========================================================
   V21 INTRO SCROLL CHANNEL
   The full recovered-context stage scrolls as one surface so
   the post-typing SYSTEM QUERY can always be reached.
   ========================================================= */
.intro-stage {
    position: relative;
    max-width: 930px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding-right: 16px;
    padding-bottom: 42px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,122,200,.76) rgba(255,122,200,.055);
}
.intro-terminal {
    min-height: 280px;
    max-height: none !important;
    overflow: visible !important;
}
/* The global desktop theme hides every scrollbar, so explicitly restore
   only this one. It becomes the little glowing side wheel for the intro. */
.intro-stage {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,122,200,.88) rgba(255,122,200,.07) !important;
}
.intro-stage::-webkit-scrollbar {
    display: block !important;
    width: 11px !important;
    height: auto !important;
}
.intro-stage::-webkit-scrollbar-track {
    display: block !important;
    background: linear-gradient(180deg, transparent, rgba(255,122,200,.075), transparent) !important;
    border-left: 1px solid rgba(255,122,200,.10);
    border-radius: 999px;
}
.intro-stage::-webkit-scrollbar-thumb {
    display: block !important;
    min-height: 44px;
    border-radius: 999px;
    border: 2px solid transparent;
    background:
        linear-gradient(180deg, rgba(255,228,244,.98), rgba(255,122,200,.78)) padding-box !important;
    box-shadow:
        0 0 8px rgba(255,122,200,.52),
        0 0 18px rgba(255,122,200,.16),
        inset 0 0 7px rgba(255,255,255,.18);
}
.intro-stage::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, #fff3fa, rgba(255,122,200,.98)) padding-box !important;
    box-shadow: 0 0 14px rgba(255,122,200,.78);
}
.intro-scroll-cue {
    position: sticky;
    top: 0;
    z-index: 4;
    width: max-content;
    margin: -2px 0 4px auto;
    padding: 4px 8px;
    border: 1px solid rgba(255,122,200,.16);
    border-radius: 999px;
    background: rgba(8,6,8,.80);
    backdrop-filter: blur(5px);
    color: rgba(255,182,223,.62);
    font-size: 13px;
    line-height: 1;
    letter-spacing: .13em;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(255,122,200,.05);
}
.intro-scroll-cue span { vertical-align: middle; }
.intro-scroll-cue b {
    display: inline-block;
    margin: 0 4px;
    color: var(--primary);
    font-weight: 400;
    animation: introScrollNudge 1.25s ease-in-out infinite;
}
.intro-scroll-cue i {
    display: inline-block;
    font-style: normal;
    font-size: 15px;
    filter: drop-shadow(0 0 4px rgba(255,122,200,.35));
}
@keyframes introScrollNudge {
    0%,100% { transform: translateY(-1px); opacity:.55; }
    50% { transform: translateY(2px); opacity:1; }
}
@media (max-height: 820px) and (min-width: 901px) {
    .intro-stage { max-height: calc(100dvh - 24px); padding-top: 22px; }
    .intro-terminal { min-height: 210px; }
}
@media (max-height: 680px) and (min-width: 901px) {
    .intro-stage { max-height: calc(100dvh - 14px); padding-top: 14px; }
    .intro-terminal { min-height: 175px; }
}