:root {
    --void-navy: #070B23;
    --trapdoor-purple: #5A189A;
    --decision-cyan: #20E8D4;
    --consequence-pink: #FF3B8D;
    --token-yellow: #FFE45E;
    --cardboard-cream: #F6E7C1;
    --fail-red: #F72535;
    --display: "Rubik Dirt", cursive;
    --headline: "Changa One", system-ui;
    --body: "Atkinson Hyperlegible", sans-serif;
    --accent: "Fraunces", serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    margin: 0;
    background: var(--void-navy);
    color: var(--cardboard-cream);
    font-family: var(--body);
    overflow-x: hidden;
    cursor: none;
}

button, a { cursor: none; }

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
    opacity: .18;
    background-image:
        radial-gradient(circle at 12% 19%, rgba(246,231,193,.8) 0 1px, transparent 1px),
        radial-gradient(circle at 83% 61%, rgba(255,228,94,.6) 0 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 47%, rgba(255,59,141,.16) 48% 49%, transparent 50%);
    background-size: 31px 37px, 43px 29px, 160px 160px;
    mix-blend-mode: screen;
}

.token-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    z-index: 100;
    pointer-events: none;
    display: grid;
    place-items: center;
    border: 3px solid var(--void-navy);
    border-radius: 50% 50% 48% 52%;
    background: var(--token-yellow);
    color: var(--void-navy);
    box-shadow: 0 0 24px rgba(32,232,212,.7), 6px 6px 0 var(--consequence-pink);
    transition: width .18s ease, height .18s ease, background .18s ease;
}

.token-cursor span {
    font-family: var(--headline);
    font-size: 22px;
}

.token-cursor.hot {
    width: 48px;
    height: 48px;
    background: var(--decision-cyan);
}

.edge-nav {
    position: fixed;
    z-index: 90;
    top: 18px;
    left: 18px;
    right: 18px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.edge-nav a {
    pointer-events: auto;
    color: var(--void-navy);
    background: var(--cardboard-cream);
    border: 3px solid var(--void-navy);
    box-shadow: 4px 4px 0 var(--fail-red);
    padding: 8px 12px;
    text-decoration: none;
    font-family: var(--headline);
    font-size: clamp(.72rem, 1.2vw, 1rem);
    text-transform: uppercase;
    transform: rotate(var(--tilt, -1deg));
}

.edge-nav a:nth-child(even) { --tilt: 1.5deg; box-shadow: 4px 4px 0 var(--decision-cyan); }
.edge-nav a.active { background: var(--token-yellow); color: var(--void-navy); }

.room {
    position: relative;
    min-height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(82px, 9vw, 120px) clamp(22px, 5vw, 76px) 48px;
}

.room::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(rgba(246,231,193,.06) 2px, transparent 2px),
        linear-gradient(90deg, rgba(246,231,193,.06) 2px, transparent 2px);
    background-size: 64px 64px;
    transform: rotate(var(--grid-tilt, 0deg)) scale(1.18);
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.room.active::before { transform: rotate(var(--active-grid-tilt, 4deg)) scale(1.1); }

.chapter-tag {
    margin: 0 0 12px;
    color: var(--decision-cyan);
    font-family: var(--headline);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 2px 2px 0 var(--trapdoor-purple);
}

h1, h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    line-height: .88;
    color: var(--cardboard-cream);
}

h1 { font-size: clamp(4.8rem, 15vw, 14rem); letter-spacing: -.05em; }
h2 { font-size: clamp(3rem, 8.5vw, 8.2rem); max-width: 1050px; }
h3 { margin: 0 0 10px; font-family: var(--headline); font-size: clamp(1.5rem, 2.5vw, 2.6rem); line-height: .95; }
p { font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.45; }

.lobby {
    display: grid;
    place-items: center;
    text-align: center;
    background: radial-gradient(circle at 50% 80%, rgba(90,24,154,.8), transparent 42%), var(--void-navy);
}

.stage-light {
    position: absolute;
    top: -12%;
    width: 40vw;
    height: 115vh;
    opacity: .4;
    filter: blur(8px);
    clip-path: polygon(43% 0, 58% 0, 100% 100%, 0 100%);
    background: linear-gradient(var(--decision-cyan), transparent 78%);
    mix-blend-mode: screen;
}

.stage-light.left { left: 4vw; transform: rotate(17deg); }
.stage-light.right { right: 3vw; transform: rotate(-17deg); background: linear-gradient(var(--consequence-pink), transparent 78%); }

.branch-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.route { fill: none; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 18 28; filter: drop-shadow(0 0 16px currentColor); transition: d .35s ease, stroke-width .35s ease, opacity .35s ease; }
.route-a { stroke: var(--decision-cyan); color: var(--decision-cyan); }
.route-b { stroke: var(--consequence-pink); color: var(--consequence-pink); }
.route-ghost { stroke: var(--token-yellow); opacity: .3; stroke-width: 7; }
.lobby.choice-obey .route-a, .lobby.choice-break .route-b { stroke-width: 32; opacity: 1; }
.lobby.choice-obey .route-b, .lobby.choice-break .route-a { opacity: .22; }

.misregister {
    position: absolute;
    font-family: var(--display);
    font-size: clamp(5rem, 15vw, 14rem);
    color: var(--fail-red);
    opacity: .28;
    transform: translate(10px, -5px) rotate(-1deg);
}

.lobby-content { position: relative; z-index: 3; }
.dilemma-line { font-family: var(--accent); font-style: italic; font-size: clamp(1.4rem, 3vw, 3rem); color: var(--token-yellow); margin: 12px auto 34px; max-width: 820px; }

.prompt-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.choice-prompt {
    border: 4px solid var(--cardboard-cream);
    background: var(--decision-cyan);
    color: var(--void-navy);
    padding: 18px 24px;
    font-family: var(--headline);
    font-size: clamp(1rem, 2vw, 1.7rem);
    box-shadow: 8px 8px 0 var(--trapdoor-purple);
    transform: rotate(-1deg);
    transition: transform .2s ease, box-shadow .2s ease;
}
.choice-prompt.break { background: var(--fail-red); color: var(--cardboard-cream); transform: rotate(1deg); }
.choice-prompt:hover { transform: translateY(-8px) rotate(-4deg) scale(1.04); box-shadow: 14px 14px 0 var(--token-yellow); }
.choice-prompt.break:hover { transform: translateY(-8px) rotate(4deg) scale(1.04); }

.door-label {
    position: absolute;
    bottom: 10vh;
    font-family: var(--headline);
    color: var(--cardboard-cream);
    border: 3px dashed currentColor;
    padding: 10px 16px;
}
.door-label.obey { left: 8vw; transform: rotate(-8deg); color: var(--decision-cyan); }
.door-label.break { right: 8vw; transform: rotate(8deg); color: var(--consequence-pink); }

.pit { --grid-tilt: -13deg; --active-grid-tilt: -18deg; background: linear-gradient(135deg, var(--trapdoor-purple), var(--void-navy) 55%); }
.skewed { transform: rotate(-3deg); position: relative; z-index: 3; }
.playtest-table {
    position: absolute;
    left: 50%;
    bottom: -8vh;
    width: min(980px, 88vw);
    height: min(620px, 64vh);
    transform: translateX(-50%) rotate(-7deg);
    border: 10px solid var(--cardboard-cream);
    background: #19093d;
    box-shadow: 0 35px 0 rgba(0,0,0,.32), 0 0 0 12px var(--void-navy), 0 0 80px rgba(32,232,212,.25);
    transition: transform .4s ease;
}
.playtest-table.tilt { transform: translateX(-50%) rotate(5deg) translateY(-16px); }
.table-grid { position: absolute; inset: 0; background: linear-gradient(var(--decision-cyan) 2px, transparent 2px), linear-gradient(90deg, var(--decision-cyan) 2px, transparent 2px); background-size: 72px 72px; opacity: .28; }
.rule-card {
    position: absolute;
    width: min(310px, 35vw);
    padding: 20px;
    background: var(--cardboard-cream);
    color: var(--void-navy);
    border: 4px solid var(--void-navy);
    box-shadow: 8px 8px 0 var(--fail-red);
}
.rule-card span, .ticket span { font-family: var(--headline); color: var(--fail-red); text-transform: uppercase; }
.card-one { left: 7%; top: 12%; transform: rotate(8deg); }
.card-two { right: 8%; bottom: 12%; transform: rotate(-7deg); box-shadow: 8px 8px 0 var(--decision-cyan); }
.token { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--token-yellow); color: var(--void-navy); font-family: var(--headline); font-size: 36px; box-shadow: 6px 6px 0 var(--consequence-pink); animation: tokenSlide 5s ease-in-out infinite alternate; }
.crown { left: 48%; top: 22%; }.key { left: 34%; bottom: 20%; animation-delay: -1.5s; }.door { right: 29%; top: 45%; animation-delay: -3s; }
.dice { position: absolute; left: 52%; top: 48%; display: flex; gap: 8px; animation: diceTwitch 1.7s steps(2,end) infinite; }
.dice span { width: 48px; height: 48px; display: grid; place-items: center; background: var(--cardboard-cream); color: var(--fail-red); border: 3px solid var(--void-navy); font-family: var(--headline); font-size: 32px; }
.playtester { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--void-navy); border: 5px solid var(--cardboard-cream); box-shadow: inset 0 -18px 0 var(--trapdoor-purple); }
.playtester.one { left: 3%; bottom: 35%; }.playtester.two { right: 12%; top: -8%; }.playtester.three { left: 55%; bottom: -8%; }

.arcade { background: radial-gradient(circle at 20% 20%, rgba(255,59,141,.25), transparent 35%), var(--void-navy); }
.arcade-marquee { width: max-content; margin: 0 auto 28px; padding: 16px 32px; background: var(--token-yellow); color: var(--void-navy); border: 5px solid var(--void-navy); box-shadow: 0 0 0 6px var(--fail-red), 12px 12px 0 var(--trapdoor-purple); font-family: var(--headline); font-size: clamp(2.4rem, 7vw, 7rem); transform: rotate(-1deg); }
.cabinet-wall { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: clamp(18px, 3vw, 42px); align-items: end; }
.cabinet { min-height: 58vh; padding: 22px; background: linear-gradient(160deg, var(--trapdoor-purple), #250849); border: 7px solid var(--cardboard-cream); border-radius: 18px 18px 4px 4px; box-shadow: 10px 10px 0 var(--fail-red); transform: translateY(var(--drop, 0)) rotate(var(--turn, 0deg)); }
.cabinet:nth-child(2) { --drop: 38px; --turn: 2deg; box-shadow: 10px 10px 0 var(--decision-cyan); }.cabinet:nth-child(3) { --drop: 8px; --turn: -2deg; }
.screen { height: 34vh; min-height: 220px; margin-bottom: 18px; background: var(--void-navy); border: 5px solid #000; position: relative; overflow: hidden; box-shadow: inset 0 0 35px rgba(32,232,212,.35); }
.screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(246,231,193,.08) 9px 10px); animation: flicker 1.4s infinite; }
.boss { position: absolute; top: 25%; width: 34%; height: 45%; border-radius: 50% 50% 40% 40%; background: var(--decision-cyan); }.left-face { left: 12%; }.right-face { right: 12%; background: var(--consequence-pink); }
.boss::before, .boss::after { content: ""; position: absolute; width: 11px; height: 11px; top: 35%; border-radius: 50%; background: var(--void-navy); }.boss::before { left: 28%; }.boss::after { right: 28%; }
.dialogue-tree span { position: absolute; width: 18px; background: var(--decision-cyan); transform-origin: bottom; border-radius: 999px; }.dialogue-tree span:nth-child(1){height:70%;left:48%;bottom:0}.dialogue-tree span:nth-child(2){height:45%;left:36%;bottom:34%;transform:rotate(-44deg)}.dialogue-tree span:nth-child(3){height:44%;right:35%;bottom:34%;transform:rotate(44deg)}.dialogue-tree span:nth-child(4){height:30%;left:53%;bottom:53%;transform:rotate(18deg);background:var(--consequence-pink)}
.map-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px; }.map-tiles i { background: var(--cardboard-cream); min-height: 70px; position: relative; }.map-tiles i::after { content: "→"; color: var(--fail-red); font-family: var(--headline); font-size: 40px; position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(var(--arrow, 0deg)); }.map-tiles i:nth-child(2n)::after { --arrow: 180deg; }.map-tiles i:nth-child(3n)::after { --arrow: -90deg; }
.sticker { position: absolute; font-family: var(--headline); color: var(--void-navy); background: var(--consequence-pink); padding: 12px 18px; border-radius: 50%; border: 3px solid var(--cardboard-cream); box-shadow: 5px 5px 0 var(--void-navy); }.sticker-one { left: 6vw; bottom: 12vh; transform: rotate(-16deg); }.sticker-two { right: 8vw; top: 22vh; background: var(--fail-red); color: var(--cardboard-cream); transform: rotate(18deg); }.sticker-three { right: 18vw; bottom: 9vh; background: var(--token-yellow); transform: rotate(-6deg); }

.backstage { background: linear-gradient(90deg, #13051f, var(--trapdoor-purple) 50%, #13051f); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5vw; }
.curtain { position: absolute; top: 0; bottom: 0; width: 25vw; background: repeating-linear-gradient(90deg, var(--trapdoor-purple) 0 30px, #3b0e70 31px 58px); filter: drop-shadow(0 0 22px rgba(0,0,0,.5)); transition: transform 1s ease; z-index: -1; }.left-curtain { left: 0; }.right-curtain { right: 0; }.backstage.active .left-curtain { transform: translateX(-8vw); }.backstage.active .right-curtain { transform: translateX(8vw); }
.rope-rig { position: absolute; inset: 0 0 auto 0; height: 62vh; display: flex; justify-content: space-around; pointer-events: none; }.rope-rig span { width: 4px; background: var(--cardboard-cream); height: var(--h, 68%); animation: ropeTug 3s ease-in-out infinite; }.rope-rig span:nth-child(2){--h:86%;animation-delay:-.4s}.rope-rig span:nth-child(3){--h:58%;animation-delay:-.8s}.rope-rig span:nth-child(4){--h:78%;animation-delay:-1.2s}.rope-rig span:nth-child(5){--h:63%;animation-delay:-1.6s}
.mask-wall { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }.mask { width: clamp(120px, 14vw, 190px); height: clamp(170px, 20vw, 260px); background: var(--cardboard-cream); border: 5px solid var(--void-navy); border-radius: 50% 50% 42% 42%; position: relative; box-shadow: 8px 8px 0 var(--fail-red); animation: maskBlink 4s infinite; }.mask:nth-child(2){animation-delay:-1.3s;background:var(--consequence-pink)}.mask:nth-child(3){animation-delay:-2.6s;background:var(--decision-cyan)}
.mask::before, .mask::after { content: ""; position: absolute; top: 34%; width: 22px; height: 12px; background: var(--void-navy); border-radius: 50%; transition: height .15s ease; }.mask::before { left: 28%; }.mask::after { right: 28%; }.mask span { position: absolute; left: 30%; right: 30%; bottom: 28%; height: 6px; background: var(--void-navy); transform: rotate(var(--mouth, 0deg)); }.happy { --mouth: 8deg; }.angry { --mouth: -8deg; }.blank { --mouth: 0deg; }
.backstage-copy { position: relative; z-index: 2; max-width: 680px; }.backstage-copy p:last-of-type { color: var(--cardboard-cream); background: rgba(7,11,35,.55); padding: 18px; border-left: 6px solid var(--decision-cyan); }
.consequence-stamp { display: inline-block; margin-top: 22px; padding: 14px 22px; color: var(--cardboard-cream); background: var(--fail-red); border: 4px solid var(--cardboard-cream); font-family: var(--headline); font-size: clamp(1.3rem, 3vw, 3rem); transform: rotate(-5deg); box-shadow: 8px 8px 0 var(--void-navy); }

.ending { background: radial-gradient(circle at 50% 25%, rgba(246,231,193,.16), transparent 34%), var(--void-navy); display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 4vw; }
.ending-orbit { position: relative; min-height: 70vh; }.ticket { position: absolute; width: min(370px, 36vw); padding: 24px; background: var(--cardboard-cream); color: var(--void-navy); border: 4px solid var(--void-navy); box-shadow: 12px 12px 0 var(--trapdoor-purple); animation: paperMoth 5s ease-in-out infinite alternate; }.ticket h3 { color: var(--void-navy); }.ticket p { font-family: var(--accent); font-style: italic; }.rejected { left: 6%; top: 8%; transform: rotate(-10deg); box-shadow: 12px 12px 0 var(--fail-red); }.chosen { right: 6%; top: 30%; transform: rotate(7deg); animation-delay: -1.4s; }.flutter { left: 26%; bottom: 6%; transform: rotate(2deg); box-shadow: 12px 12px 0 var(--decision-cyan); animation-delay: -2.8s; }
.final-copy { max-width: 620px; }.final-copy h2 { color: var(--token-yellow); }.final-copy p:last-child { font-size: clamp(1.2rem, 2vw, 1.8rem); }

@keyframes tokenSlide { from { transform: translate(-8px, 10px) rotate(-9deg); } to { transform: translate(18px, -14px) rotate(12deg); } }
@keyframes diceTwitch { 0%, 85%, 100% { transform: rotate(0deg); } 88% { transform: rotate(9deg) translateY(-4px); } 92% { transform: rotate(-8deg) translateX(5px); } }
@keyframes flicker { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes ropeTug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } }
@keyframes maskBlink { 0%, 88%, 100% { filter: none; } 90% { filter: brightness(.4); } }
@keyframes paperMoth { from { translate: 0 0; } to { translate: 18px -24px; } }

@media (max-width: 900px) {
    body { cursor: auto; }
    button, a { cursor: pointer; }
    .token-cursor { display: none; }
    .edge-nav { flex-wrap: wrap; position: fixed; justify-content: center; }
    .room { padding-top: 150px; }
    .cabinet-wall, .backstage, .ending { grid-template-columns: 1fr; }
    .cabinet { min-height: auto; }
    .screen { height: 230px; }
    .playtest-table { position: relative; margin: 30px auto 0; left: auto; bottom: auto; transform: rotate(-4deg); width: 92vw; height: 560px; }
    .playtest-table.tilt { transform: rotate(3deg); }
    .rule-card { width: 255px; }
    .ending-orbit { min-height: 760px; }
    .ticket { width: min(330px, 82vw); }
}