/* ── VARIABLES & RESET ──────────────────────────────────────── */
:root {
    --bg: #08080f;
    --green: #e879b8;
    /* OC pink — primary accent */
    --red: #f06292;
    /* soft alert pink-red */
    --gold: #eef2f7;
    /* OC pearl white */
    --purple: #c9b0f5;
    /* OC lavender */
    --blue: #7ecce8;
    /* OC hair blue */
    --text: #dde0e8;
    --dim: #666a7a;
    --border: rgba(232, 121, 184, .18);
    --px: 'Press Start 2P', monospace;
    --mono: 'Share Tech Mono', monospace;
}

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
}

/* ── CRT OVERLAY ────────────────────────────────────────────── */
#crt {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .75) 100%);
}

#scanlines {
    position: fixed;
    inset: 0;
    z-index: 901;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            transparent 0px, transparent 3px,
            rgba(0, 0, 0, .12) 3px, rgba(0, 0, 0, .12) 4px);
}

/* ── PARTICLES ──────────────────────────────────────────────── */
#particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: .35;
}

/* ── APP SHELL ──────────────────────────────────────────────── */
#app {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── PROGRESS DOTS ──────────────────────────────────────────── */
#progress {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 14px 0 6px;
    flex-shrink: 0;
}

.pdot {
    width: 8px;
    height: 8px;
    border: 1px solid var(--green);
    cursor: pointer;
    transition: background .25s, box-shadow .25s;
}

.pdot.on {
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
}

/* ── SLIDES CONTAINER ───────────────────────────────────────── */
#slides {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
    overflow: hidden;
}

.slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

/* ── NAVIGATION ─────────────────────────────────────────────── */
#nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 0 16px;
    flex-shrink: 0;
}

.nbtn {
    background: transparent;
    border: 1px solid var(--green);
    color: var(--green);
    font-family: var(--px);
    font-size: 9px;
    padding: 8px 18px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background .2s, color .2s, box-shadow .2s;
}

.nbtn:hover:not(:disabled) {
    background: var(--green);
    color: var(--bg);
    box-shadow: 0 0 12px var(--green);
}

.nbtn:disabled {
    opacity: .25;
    cursor: default;
}

/* mute button — smaller, right-aligned, dimmer by default */
.mute-btn {
    font-size: 8px;
    padding: 6px 12px;
    opacity: .55;
    margin-left: 8px;
}

.mute-btn:hover:not(:disabled) {
    opacity: 1;
}

.mute-btn.muted {
    border-color: var(--dim);
    color: var(--dim);
    opacity: .45;
}

#counter {
    font-family: var(--px);
    font-size: 9px;
    color: var(--dim);
    min-width: 60px;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   SLIDE 0 — BOOT
═══════════════════════════════════════════════════════════════ */
.boot {
    font-family: var(--mono);
    font-size: clamp(11px, 1.4vw, 14px);
    color: var(--green);
    max-width: 620px;
    width: 100%;
    line-height: 2.1;
}

.boot-line {
    display: block;
    white-space: pre;
}

.cursor {
    display: inline-block;
    color: var(--green);
    animation: blink .75s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ════════════════════════════════════════════════════════════
   SLIDE 1 — TITLE
═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes title-slam {
    0%   { opacity: 0; transform: translateY(-220px) scale(1.7); filter: blur(12px); }
    35%  { opacity: 1; transform: translateY(24px) scale(.87); filter: blur(0); }
    52%  { transform: translateY(-12px) scale(1.06); }
    67%  { transform: translateY(7px) scale(.98); }
    80%  { transform: translateY(-3px) scale(1.01); }
    91%  { transform: translateY(1px) scale(1); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes title-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes title-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ring-pulse {
    0%   { transform: translate(-50%,-50%) scale(.85); opacity: .12; }
    50%  { transform: translate(-50%,-50%) scale(1.08); opacity: .3; }
    100% { transform: translate(-50%,-50%) scale(.85); opacity: .12; }
}

@keyframes shockwave {
    0%   { transform: translate(-50%,-50%) scale(.1); opacity: .95; }
    100% { transform: translate(-50%,-50%) scale(3.2); opacity: 0; }
}

@keyframes screen-shake {
    0%   { transform: translate(0,0) rotate(0deg); }
    7%   { transform: translate(-16px,-8px) rotate(-1.1deg); }
    15%  { transform: translate(13px, 9px) rotate(.9deg); }
    23%  { transform: translate(-10px, 6px) rotate(-.7deg); }
    31%  { transform: translate(11px,-7px) rotate(.55deg); }
    40%  { transform: translate(-7px, 5px) rotate(-.35deg); }
    50%  { transform: translate(6px,-4px) rotate(.22deg); }
    61%  { transform: translate(-4px, 3px) rotate(-.12deg); }
    73%  { transform: translate(2px,-2px) rotate(.06deg); }
    85%  { transform: translate(-1px,1px); }
    94%  { transform: translate(1px,0); }
    100% { transform: translate(0,0) rotate(0deg); }
}

@keyframes impact-flash {
    0%   { opacity: 0; }
    6%   { opacity: 1; }       /* hard blast */
    17%  { opacity: .15; }     /* dip 1 */
    27%  { opacity: .82; }     /* second hit */
    41%  { opacity: .05; }     /* dip 2 */
    51%  { opacity: .5; }      /* echo */
    66%  { opacity: .08; }
    82%  { opacity: .22; }     /* final shimmer */
    95%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes shard-fly {
    0%   { opacity: 0;  transform: rotate(var(--a,0deg)) scaleY(0) translateX(-50%); }
    18%  { opacity: 1; }
    35%  { opacity: .75; transform: rotate(var(--a,0deg)) scaleY(1) translateX(-50%); }
    100% { opacity: 0;  transform: rotate(var(--a,0deg)) scaleY(.7) translateX(-50%) translateY(75%); }
}

/* ── Flash + shard overlay ──────────────────────────────────── */
.title-impact {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,.8) 0%,
        rgba(232,121,184,.55) 28%,
        rgba(126,204,232,.25) 58%,
        transparent 80%);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.title-impact.impact-flash {
    animation: impact-flash 1.6s ease-out forwards;
}

/* Shard lines injected by JS */
.impact-shard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: var(--l, 160px);
    background: linear-gradient(to bottom,
        rgba(255,255,255,.95) 0%,
        rgba(232,121,184,.55) 45%,
        transparent 100%);
    transform-origin: top center;
    transform: rotate(var(--a,0deg)) translateX(-50%);
    animation: shard-fly 1.2s cubic-bezier(.18,.6,.28,1) both;
}

/* ── Title wrap ─────────────────────────────────────────────── */
.title-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

/* Ambient glow ring */
.title-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,121,184,.2) 0%, transparent 70%);
    animation: ring-pulse 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Shockwave ring that fires on slam */
.title-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border: 3px solid transparent;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(.1);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.title-ready::after {
    border-color: rgba(232,121,184,.75);
    animation: shockwave 1s .08s cubic-bezier(.18,1,.3,1) forwards;
}

.title-wrap > * { position: relative; z-index: 1; }

/* All elements hidden until title-ready */
.title-wrap .glitch,
.title-wrap .title-sub,
.title-wrap .title-dmg,
.title-wrap .title-meta {
    opacity: 0;
}

/* Screen shake fires on the wrap when title-ready */
.title-ready {
    animation: screen-shake 1.1s cubic-bezier(.22,1,.36,1) both;
}

/* Glitch text */
.glitch {
    font-family: var(--px);
    font-size: clamp(22px, 5.5vw, 52px);
    color: var(--green);
    position: relative;
    text-shadow: 0 0 18px var(--green), 0 0 40px rgba(232, 121, 184, .3);
    letter-spacing: 4px;
}

.title-ready .glitch {
    animation: title-slam 1.2s cubic-bezier(.22, 1, .36, 1) both,
        glitch-flicker 4s 1.5s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    color: var(--red);
    clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
    animation: glitch-a 4s 1.5s infinite;
}

.glitch::after {
    color: var(--blue);
    clip-path: polygon(0 60%, 100% 60%, 100% 78%, 0 78%);
    animation: glitch-b 4s 1.5s infinite;
}

@keyframes glitch-a {

    0%,
    88%,
    100% {
        transform: translate(0);
    }

    90% {
        transform: translate(-5px, 2px);
    }

    92% {
        transform: translate(5px, -2px);
    }

    94% {
        transform: translate(-3px, 1px);
    }
}

@keyframes glitch-b {

    0%,
    88%,
    100% {
        transform: translate(0);
    }

    89% {
        transform: translate(4px, -1px);
    }

    91% {
        transform: translate(-4px, 1px);
    }

    93% {
        transform: translate(2px, 2px);
    }
}

@keyframes glitch-flicker {

    0%,
    89%,
    100% {
        text-shadow: 0 0 18px var(--green), 0 0 40px rgba(232, 121, 184, .3);
    }

    90% {
        text-shadow: -4px 0 var(--red), 4px 0 var(--blue), 0 0 18px var(--green);
    }
}

.title-sub {
    font-family: var(--px);
    font-size: clamp(9px, 1.8vw, 14px);
    color: var(--text);
    letter-spacing: 5px;
}

.title-ready .title-sub {
    animation: title-rise .7s .7s cubic-bezier(.22, 1, .36, 1) both;
}

.title-dmg {
    font-family: var(--mono);
    font-size: clamp(14px, 2.5vw, 20px);
    color: var(--red);
}

.title-ready .title-dmg {
    animation: title-rise .7s 1.1s cubic-bezier(.22, 1, .36, 1) both;
}

.title-meta {
    font-family: var(--mono);
    font-size: clamp(11px, 1.4vw, 13px);
    color: var(--dim);
    letter-spacing: 2px;
}

.title-ready .title-meta {
    animation: title-fade .8s 1.6s both;
}

/* ════════════════════════════════════════════════════════════
   SLIDE 2 — WARNING DIALOG
═══════════════════════════════════════════════════════════════ */
.dialog {
    max-width: 480px;
    width: 100%;
    border: 2px solid var(--red);
    padding: 28px;
    background: rgba(8, 8, 15, .97);
    box-shadow: 0 0 24px rgba(240, 98, 146, .25), 4px 4px 0 rgba(240, 98, 146, .15);
}

.dialog-head {
    font-family: var(--px);
    font-size: 11px;
    color: var(--red);
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(240, 98, 146, .3);
}

.dialog-body {
    font-size: 15px;
    line-height: 2.1;
}

.dialog-body ul {
    list-style: none;
    margin-top: 10px;
}

.dialog-body li {
    color: var(--text);
}

.dialog-foot {
    margin-top: 28px;
    display: flex;
    gap: 20px;
    font-family: var(--px);
    font-size: 9px;
}

.mchoice {
    background: transparent;
    border: none;
    font-family: var(--px);
    font-size: 9px;
    cursor: pointer;
    color: var(--dim);
    padding: 0;
}

.mchoice.active {
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
}

/* ════════════════════════════════════════════════════════════
   SLIDE 3 — NUMBERS
═══════════════════════════════════════════════════════════════ */
.nums-wrap {
    max-width: 600px;
    width: 100%;
}

.slabel {
    font-family: var(--px);
    font-size: 10px;
    color: var(--green);
    letter-spacing: 2px;
    margin-bottom: 28px;
}

.num-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ncard {
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-left: 2px solid var(--green);
    padding-left: 14px;
}

.ncard.gold-card {
    border-color: var(--gold);
}

.nval {
    font-family: var(--px);
    font-size: clamp(20px, 4.5vw, 36px);
    color: var(--green);
    text-shadow: 0 0 10px rgba(232, 121, 184, .5);
}

.nval-text {
    font-size: clamp(14px, 3vw, 22px);
}

.gold-card .nval {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(238, 242, 247, .5);
}

.nname {
    font-size: 10px;
    color: var(--dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footnote {
    margin-top: 24px;
    font-size: 11px;
    color: var(--dim);
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   SLIDE 4 — GALLERY
═══════════════════════════════════════════════════════════════ */
.gallery-wrap {
    width: 100%;
    max-width: 820px;
}

.cover-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}

.cover-grid::-webkit-scrollbar {
    width: 4px;
}

.cover-grid::-webkit-scrollbar-track {
    background: transparent;
}

.cover-grid::-webkit-scrollbar-thumb {
    background: var(--green);
}

.ccard {
    position: relative;
    border: 1px solid rgba(232, 121, 184, .15);
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: border-color .2s, box-shadow .2s;
}

.ccard:hover {
    border-color: var(--green);
    box-shadow: 0 0 14px rgba(232, 121, 184, .4);
}

.ccard img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(.65) brightness(.85);
    transition: filter .2s;
}

.ccard:hover img {
    filter: saturate(1) brightness(1);
}

.ccard-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .97) 60%);
    padding: 22px 8px 8px;
    font-size: 13px;
    font-family: var(--mono);
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
    line-height: 1.5;
    opacity: 0;
    transition: opacity .2s;
    white-space: pre-line;
}

.ccard:hover .ccard-label {
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   SLIDES 5–11 — WRAPPED CATEGORIES
═══════════════════════════════════════════════════════════════ */

/* ── hidden until reveal ─────────────────────────────────── */
.cat-slide>* {
    opacity: 0;
}

.cat-slide>.chaos-list {
    opacity: 1;
}

/* rows handle their own reveal */
.chaos-row {
    opacity: 0;
    transform: translateX(-40px);
}

/* ── reveal keyframes ─────────────────────────────────────── */
@keyframes cat-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cat-slam {
    0% {
        opacity: 0;
        transform: scale(1.9);
        filter: blur(6px);
    }

    55% {
        opacity: 1;
        transform: scale(0.94);
        filter: blur(0);
    }

    75% {
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes cat-scale-in {
    from {
        opacity: 0;
        transform: scale(0.86);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes chaos-in {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes chaos-top1 {
    0% {
        opacity: 0;
        transform: translateX(-70px) scale(0.82);
    }

    65% {
        transform: translateX(8px) scale(1.06);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ── running — triggers staggered child animations ────────── */
.cat-slide.running>.cat-label {
    animation: cat-up 0.45s 0.15s ease-out forwards;
}

.cat-slide.running>.cat-stat {
    animation: cat-slam 0.65s 0.55s cubic-bezier(.23, 1, .32, 1) forwards;
}

.cat-slide.running>.cat-stat-label {
    animation: cat-up 0.35s 1.35s ease-out forwards;
}

.cat-slide.running>.cat-song {
    animation: cat-up 0.45s 1.90s ease-out forwards;
}

.cat-slide.running>.cat-source {
    animation: cat-up 0.35s 2.15s ease-out forwards;
}

.cat-slide.running>.cat-thumb-link,
.cat-slide.running>.duo-thumbs,
.cat-slide.running>.open-grid {
    animation: cat-scale-in 0.55s 2.50s ease-out forwards;
}

.cat-slide.running>.cat-note {
    animation: cat-up 0.40s 3.05s ease-out forwards;
}

/* chaos label + note via running class */
.cat-slide.running>.cat-label {
    animation: cat-up 0.45s 0.15s ease-out forwards;
}

/* chaos rows — triggered by JS */
.chaos-row.r-show {
    animation: chaos-in 0.5s ease-out forwards;
}

.chaos-row.r-show.r-top1 {
    animation: chaos-top1 0.65s cubic-bezier(.23, 1, .32, 1) forwards;
}

.chaos-row.r-show~.cat-note {
    opacity: 1;
}

/* chaos note triggered by JS */
.cat-note.r-show {
    animation: cat-up 0.4s ease-out forwards;
}

.cat-slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    gap: 0;
    text-align: center;
    position: relative;
}

/* accent glow bleeding from bottom-left — Wrapped energy */
.cat-slide::before {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--cat-accent, #e879b8);
    opacity: .07;
    filter: blur(80px);
    pointer-events: none;
}

.cat-label {
    font-family: var(--px);
    font-size: clamp(8px, 1.3vw, 11px);
    color: var(--cat-accent, #e879b8);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: .7;
}

/* The massive number — the hero of the slide */
.cat-stat {
    font-family: var(--px);
    font-size: clamp(44px, 12vw, 90px);
    line-height: 1;
    color: var(--cat-accent, #e879b8);
    text-shadow: 0 0 40px var(--cat-accent, #e879b8),
        0 0 90px color-mix(in srgb, var(--cat-accent, #e879b8) 40%, transparent);
    margin-bottom: 6px;
}

.cat-stat-label {
    font-size: clamp(9px, 1.4vw, 12px);
    font-family: var(--px);
    color: var(--dim);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.cat-song {
    font-family: var(--px);
    font-size: clamp(13px, 3vw, 22px);
    color: #fff;
    letter-spacing: 2px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.cat-source {
    font-size: clamp(10px, 1.4vw, 12px);
    font-family: var(--mono);
    color: var(--dim);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cat-thumb-link {
    display: block;
    width: min(300px, 60vw);
    position: relative;
    border: 2px solid;
    border-color: color-mix(in srgb, var(--cat-accent, #e879b8) 30%, transparent);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .25s;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.cat-thumb-link:hover {
    box-shadow: 0 0 28px color-mix(in srgb, var(--cat-accent, #e879b8) 50%, transparent);
}

.cat-thumb-link img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cat-note {
    font-size: clamp(11px, 1.5vw, 13px);
    color: rgba(221, 224, 232, .6);
    font-style: italic;
    line-height: 1.7;
    max-width: 420px;
}

/* ── PURE CHAOS — top-3 ranked layout ─────────────────────── */
.chaos-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 560px;
    margin-bottom: 14px;
}

.chaos-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.chaos-rank {
    font-family: var(--px);
    font-size: clamp(24px, 6vw, 48px);
    color: var(--cat-accent, #f4aad8);
    min-width: 60px;
    text-align: right;
    flex-shrink: 0;
    text-shadow: 0 0 20px var(--cat-accent, #f4aad8);
    line-height: 1;
}

.chaos-rank.r2 {
    opacity: .7;
}

.chaos-rank.r3 {
    opacity: .45;
}

.chaos-thumb-link {
    display: block;
    width: min(180px, 36vw);
    flex-shrink: 0;
    border: 1px solid;
    border-color: color-mix(in srgb, var(--cat-accent, #f4aad8) 25%, transparent);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s;
}

.chaos-thumb-link:hover {
    box-shadow: 0 0 16px color-mix(in srgb, var(--cat-accent, #f4aad8) 45%, transparent);
}

.chaos-thumb-link img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.chaos-info {
    flex: 1;
    min-width: 0;
}

.chaos-song {
    font-family: var(--px);
    font-size: clamp(10px, 2.2vw, 16px);
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chaos-src {
    font-size: clamp(9px, 1.3vw, 11px);
    font-family: var(--mono);
    color: var(--dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 3px;
}

/* ── DUO layout — ADO AGENDA, TETO FILES ──────────────────────── */
.duo-thumbs {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 560px;
    justify-content: center;
    margin-bottom: 12px;
}

.duo-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.duo-thumb-link {
    display: block;
    width: 100%;
    border: 2px solid;
    border-color: color-mix(in srgb, var(--cat-accent, #e879b8) 30%, transparent);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .25s;
}

.duo-thumb-link:hover {
    box-shadow: 0 0 20px color-mix(in srgb, var(--cat-accent, #e879b8) 50%, transparent);
}

.duo-thumb-link img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.duo-song {
    font-family: var(--px);
    font-size: clamp(7px, 1.3vw, 11px);
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.5;
}

.duo-src {
    font-size: clamp(8px, 1.1vw, 10px);
    font-family: var(--mono);
    color: var(--dim);
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

/* ── OPEN GRID layout — OPENING SEASON ────────────────────────── */
.open-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 620px;
    margin-bottom: 12px;
    overflow: hidden;
}

.open-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.open-thumb-link {
    display: block;
    position: relative;
    padding-top: 56.25%;
    /* 9/16 — locks 16:9 regardless of flex/grid stretch */
    border: 1px solid;
    border-color: color-mix(in srgb, var(--cat-accent, #c9b0f5) 25%, transparent);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s;
    flex-shrink: 0;
}

.open-thumb-link:hover {
    outline: 2px solid color-mix(in srgb, var(--cat-accent, #c9b0f5) 70%, transparent);
    outline-offset: -2px;
}

.open-thumb-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.open-song {
    font-size: clamp(6px, 1vw, 9px);
    font-family: var(--px);
    color: var(--dim);
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   SLIDE 10 — CHARACTER CLASS
═══════════════════════════════════════════════════════════════ */
.char-card {
    max-width: 400px;
    width: 100%;
    border: 2px solid var(--purple);
    padding: 22px;
    background: rgba(8, 8, 15, .98);
    box-shadow: 0 0 22px rgba(201, 176, 245, .2), 4px 4px 0 rgba(201, 176, 245, .1);
    font-family: var(--mono);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.char-name {
    font-family: var(--px);
    font-size: clamp(14px, 3vw, 20px);
    color: var(--green);
    text-shadow: 0 0 10px var(--green);
}

.char-hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.char-class {
    color: var(--purple);
    font-size: 14px;
}

.char-title {
    color: var(--gold);
    font-size: 13px;
}

.char-skills {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
}

.stat-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.srow {
    display: grid;
    grid-template-columns: 52px 1fr 28px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--dim);
}

.sbar {
    height: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

.sfill {
    height: 100%;
    width: 0;
    background: var(--green);
    transition: width 1.3s cubic-bezier(.4, 0, .2, 1);
}

.sfill.chaos {
    background: var(--purple);
}

.sfill.dmg {
    background: var(--red);
}

.sfill.low {
    background: #555;
}

.sfill.peak {
    background: var(--gold);
}

/* ════════════════════════════════════════════════════════════
   SLIDE 8 — CLASSIFIED
═══════════════════════════════════════════════════════════════ */
.cl-wrap {
    max-width: 560px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cl-head {
    font-family: var(--px);
    font-size: 10px;
    color: var(--gold);
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(238, 242, 247, .5);
}

.cl-sub {
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 3px;
}

.cl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cl-item {
    font-size: 14px;
    color: var(--green);
    border-left: 2px solid rgba(232, 121, 184, .3);
    padding-left: 12px;
    min-height: 20px;
}

.cl-item::before {
    content: "> ";
    color: var(--dim);
}

/* The meme name — wraps, gold, extra glow */
.cl-name {
    font-size: 11px;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(238, 242, 247, .4);
    border-left-color: rgba(238, 242, 247, .35);
    white-space: normal;
    line-height: 1.9;
    margin-top: 4px;
}

.cl-foot {
    font-size: 13px;
    color: var(--dim);
    font-style: italic;
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   SLIDE 9 — PICKER
═══════════════════════════════════════════════════════════ */
.picker-wrap {
    max-width: 660px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.picker-sub {
    font-size: 13px;
    color: var(--dim);
    font-style: italic;
    margin-top: -4px;
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    width: 100%;
}

.pcard {
    position: relative;
    border: 1px solid rgba(232, 121, 184, .12);
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: block;
    transition: border-color .2s, box-shadow .2s;
}

.pcard:hover {
    border-color: rgba(232, 121, 184, .5);
}

.pcard.pcard-selected {
    border-color: var(--green);
    box-shadow: 0 0 14px rgba(232, 121, 184, .55);
}

.pcard img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(.5) brightness(.65);
    transition: filter .2s;
}

.pcard:hover img,
.pcard.pcard-selected img {
    filter: saturate(1) brightness(1);
}

.pcard-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .92));
    padding: 14px 5px 4px;
    font-size: 7px;
    font-family: var(--mono);
    color: var(--text);
    line-height: 1.3;
    opacity: 0;
    transition: opacity .2s;
    white-space: pre-line;
}

.pcard:hover .pcard-label,
.pcard.pcard-selected .pcard-label {
    opacity: 1;
}

.pcard.pcard-selected::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    color: var(--green);
    font-size: 13px;
    text-shadow: 0 0 8px var(--green);
    font-family: sans-serif;
}

.share-reveal {
    /* kept for graceful removal — no longer used */
    display: none;
}

/* ── card preview ───────────────────────────────────────────── */
.card-preview {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.card-preview.visible {
    display: flex;
}

#share-canvas {
    width: min(320px, 80vw);
    height: min(320px, 80vw);
    border: 2px solid rgba(232, 121, 184, .3);
    box-shadow: 0 0 28px rgba(232, 121, 184, .15);
    display: block;
}

.share-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.share-btn {
    font-size: 8px;
    padding: 8px 14px;
}

.share-copied {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--green);
    height: 18px;
    opacity: 0;
    transition: opacity .3s;
}

.share-copied.visible {
    opacity: 1;
}

.pick-back {
    background: transparent;
    border: none;
    color: var(--dim);
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    transition: color .2s;
}

.pick-back:hover {
    color: var(--text);
}

/* ════════════════════════════════════════════════════════════
   SLIDE 10 — ENDING
═══════════════════════════════════════════════════════════════ */
.ending {
    background: #f2ede8;
}

.ending #nav {
    display: none;
}

/* hide pixel nav on ending — handled in JS */

.end-wrap {
    max-width: 480px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.end-wrap p {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(16px, 2.8vw, 22px);
    color: #2a2a2a;
    line-height: 1.7;
    font-style: italic;
}

.end-wrap p:first-child {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(20px, 4vw, 32px);
    font-style: normal;
    color: var(--green);
    text-shadow: 0 0 18px rgba(232, 121, 184, .55);
    letter-spacing: 2px;
    line-height: 1.4;
}

.end-sig {
    font-family: Georgia, serif;
    font-size: 15px;
    color: #777;
}

.end-kanji {
    font-size: 42px;
    color: #bbb;
    letter-spacing: 6px;
    margin-top: 8px;
}

/* ── ENDING: override nav for light bg ──────────────────────── */
.app-ending .nbtn {
    border-color: #aaa;
    color: #555;
}

.app-ending .nbtn:hover:not(:disabled) {
    background: #555;
    color: #f2ede8;
    box-shadow: none;
}

.app-ending #counter {
    color: #aaa;
}

.app-ending .pdot {
    border-color: #aaa;
}

.app-ending .pdot.on {
    background: #888;
    box-shadow: none;
}

.app-ending #scanlines,
.app-ending #crt {
    opacity: 0;
}

/* ── UTILITY COLORS ─────────────────────────────────────────── */
.c-red {
    color: var(--red) !important;
}

.c-gold {
    color: var(--gold) !important;
}

.c-purple {
    color: var(--purple) !important;
}

.c-green {
    color: var(--green) !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cv-card {
        gap: 8px;
    }

    .num-grid {
        grid-template-columns: 1fr;
    }

    .char-card {
        padding: 16px;
    }

    .dialog {
        padding: 20px;
    }
}

@media (max-width: 380px) {
    .cv-thumb {
        max-width: 100%;
    }
}