:root {
    --mint: #37FFB4;
    --gold: #F7D878;
    --violet: #6E54FF;
    --pink: #FF4FD8;
    --orange: #FF7A3D;
    --ice: #EAF7FF;
    --night: #090A1A;
    --shadow: rgba(9, 10, 26, 0.72);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--night);
    color: var(--ice);
    font-family: "Atkinson Hyperlegible", sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 10%, rgba(55, 255, 180, 0.22), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(255, 79, 216, 0.2), transparent 30%),
        radial-gradient(circle at 50% 90%, rgba(110, 84, 255, 0.32), transparent 42%),
        var(--night);
    z-index: -3;
}

.scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(234,247,255,0.035), rgba(234,247,255,0.035) 1px, transparent 1px, transparent 5px);
    mix-blend-mode: screen;
    z-index: 30;
}

.cursor-orb {
    position: fixed;
    width: 28px;
    height: 28px;
    border: 2px solid var(--mint);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 24px var(--mint), inset 0 0 14px var(--pink);
    z-index: 29;
    opacity: 0.75;
}

.campaign-hud {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(9, 10, 26, 0.82);
    border: 2px solid var(--mint);
    box-shadow: 0 0 0 4px rgba(110,84,255,0.26), 0 0 28px rgba(55,255,180,0.26);
    z-index: 20;
    font-family: "Silkscreen", monospace;
    transition: transform 300ms ease, opacity 300ms ease;
}

.campaign-hud a, .hud-title { color: var(--ice); text-decoration: none; font-size: 12px; }
.hud-title { color: var(--gold); margin-right: 6px; }
.campaign-hud a.active { color: var(--mint); text-shadow: 0 0 10px var(--mint); }

.chapter {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 110px 6vw;
    isolation: isolate;
}

.chapter::before {
    content: attr(data-stage);
    position: absolute;
    left: 4vw;
    top: 120px;
    font-family: "Silkscreen", monospace;
    color: rgba(234,247,255,0.14);
    font-size: clamp(26px, 6vw, 86px);
    z-index: -1;
}

h1, h2 { margin: 0; }
h1 { font-family: "Bungee Shade", cursive; font-size: clamp(42px, 7vw, 116px); color: var(--gold); text-shadow: 0 0 18px var(--orange), 4px 4px 0 var(--pink); letter-spacing: 0.04em; }
h2 { font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(36px, 5vw, 84px); line-height: 0.92; color: var(--ice); }
p { font-size: clamp(17px, 1.6vw, 24px); line-height: 1.55; color: rgba(234,247,255,0.84); }
.ui-label { font-family: "Silkscreen", monospace; color: var(--mint); letter-spacing: 0.12em; font-size: 13px; text-transform: uppercase; }

.cabinet {
    width: min(1120px, 94vw);
    min-height: 820px;
    border-radius: 42px 42px 24px 24px;
    padding: 24px;
    background: linear-gradient(145deg, #17183B, #090A1A 42%, #24105A);
    border: 6px solid var(--violet);
    box-shadow: 0 0 0 10px var(--night), 0 0 80px rgba(110,84,255,0.55), inset 0 0 70px rgba(255,79,216,0.16);
    position: relative;
}

.marquee { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; background: linear-gradient(90deg, rgba(255,79,216,.25), rgba(55,255,180,.18), rgba(255,122,61,.22)); border: 4px solid var(--gold); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); animation: flicker 2.7s infinite; }
.mini-light { width: 18px; height: 18px; background: var(--mint); box-shadow: 0 0 20px var(--mint); }

.glass { margin-top: 24px; min-height: 430px; border: 5px solid var(--mint); background: linear-gradient(135deg, rgba(234,247,255,0.08), rgba(9,10,26,0.86)), radial-gradient(circle at 50% 50%, rgba(255,79,216,0.22), transparent 35%); position: relative; overflow: hidden; box-shadow: inset 0 0 60px rgba(55,255,180,0.22); }
.glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 15%, rgba(234,247,255,0.16) 18%, transparent 24%, transparent 58%, rgba(55,255,180,0.12) 62%, transparent 68%); }
.screen-copy { position: relative; z-index: 2; max-width: 660px; padding: 62px; }
.pixel-stars { position: absolute; inset: 0; background-image: radial-gradient(var(--gold) 2px, transparent 2px), radial-gradient(var(--mint) 2px, transparent 2px); background-size: 70px 70px, 110px 110px; animation: drift 12s linear infinite; opacity: .58; }
.map-line { position: absolute; right: 12%; top: 18%; width: 280px; height: 280px; border: 5px dashed var(--orange); transform: rotate(24deg); filter: drop-shadow(0 0 12px var(--orange)); }
.npc-clerk { position: absolute; right: 21%; bottom: 18%; width: 92px; height: 122px; z-index: 2; animation: bob 1.7s infinite steps(2); }
.clerk-head, .clerk-body { display:block; margin:auto; background: var(--gold); box-shadow: 0 0 0 6px var(--night), 0 0 18px var(--gold); }
.clerk-head { width: 58px; height: 50px; border-radius: 16px 16px 6px 6px; }
.clerk-body { width: 76px; height: 72px; margin-top: 10px; background: var(--pink); }

.controls { display:flex; align-items:center; gap:26px; justify-content:center; padding:30px 10px 14px; flex-wrap:wrap; }
button { font-family: "Silkscreen", monospace; cursor: pointer; color: var(--night); background: var(--gold); border: 0; }
.start-button, .seal-button { padding: 18px 26px; box-shadow: 7px 7px 0 var(--pink), 0 0 25px rgba(247,216,120,.45); }
.coin-slot { color: var(--mint); font-family:"Silkscreen", monospace; border:3px solid var(--mint); padding:16px 26px; box-shadow: inset 0 0 16px rgba(55,255,180,.2); }
.joystick { width:82px; height:52px; border-radius:50%; background:var(--orange); position:relative; box-shadow:0 8px 0 #7d2918; }
.joystick span { position:absolute; left:31px; top:-42px; width:20px; height:52px; background:var(--ice); border-radius:12px; }
.joystick span::before { content:""; position:absolute; left:-14px; top:-26px; width:48px; height:48px; border-radius:50%; background:var(--pink); box-shadow:0 0 24px var(--pink); }

.license-scroll { position:absolute; left:50%; bottom:-94px; width:min(440px, 80vw); transform:translateX(-50%) scaleY(.2); transform-origin:top; opacity:0; transition: transform 700ms cubic-bezier(.2,1,.2,1), opacity 400ms ease; z-index:5; }
.license-scroll.printed { transform:translateX(-50%) scaleY(1); opacity:1; }
.scroll-cap { height:28px; background:linear-gradient(90deg, var(--orange), var(--gold), var(--orange)); border-radius:20px; }
.scroll-paper { padding:24px; color:var(--night); background:linear-gradient(90deg, #fbe7ac, var(--gold), #fbe7ac); border-left:5px dashed var(--orange); border-right:5px dashed var(--orange); text-align:center; font-family:"Fraunces", serif; }
.scroll-paper span, .scroll-paper strong { display:block; }

.rights-inventory { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap:5vw; background:linear-gradient(180deg, transparent, rgba(55,255,180,.07)); }
.chapter-card { max-width:820px; padding:44px; background:rgba(9,10,26,.76); border:3px solid var(--mint); box-shadow:12px 12px 0 rgba(255,79,216,.46), inset 0 0 40px rgba(55,255,180,.07); }
.inventory-grid { display:grid; grid-template-columns:repeat(2, minmax(180px, 1fr)); gap:18px; margin-top:28px; }
.inventory-slot { min-height:150px; padding:22px; background:linear-gradient(145deg, rgba(234,247,255,.08), rgba(110,84,255,.42)); color:var(--ice); border:3px solid var(--violet); text-align:left; transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }
.inventory-slot span { display:block; font-family:"Bungee Shade", cursive; color:var(--gold); font-size:30px; }
.inventory-slot em { font-style:normal; display:block; margin-top:12px; line-height:1.4; }
.inventory-slot.unlocked { transform:translateY(-8px); border-color:var(--mint); box-shadow:0 0 32px rgba(55,255,180,.42); }

.artifact-stack { position:relative; width:330px; height:430px; }
.cartridge { position:absolute; inset:40px 10px auto 10px; height:230px; padding:34px; background:linear-gradient(135deg, #25265c, #11122c); border:5px solid var(--ice); box-shadow:14px 14px 0 var(--violet); font-family:"Silkscreen", monospace; color:var(--gold); }
.cartridge span { display:block; height:84px; background:repeating-linear-gradient(90deg, var(--mint) 0 14px, transparent 14px 24px); margin-bottom:35px; }
.wax-seal { position:absolute; right:0; top:210px; width:120px; height:120px; border-radius:50%; display:grid; place-items:center; background:var(--pink); color:var(--ice); font-family:"Bungee Shade"; font-size:38px; box-shadow:0 0 35px var(--pink); }
.clause-ribbon { position:absolute; left:0; bottom:50px; padding:16px 24px; background:var(--gold); color:var(--night); font-family:"Silkscreen"; transform:rotate(-7deg); box-shadow:9px 9px 0 var(--orange); }

.modding-dungeon { grid-template-columns: .9fr 1.1fr; gap:5vw; background:radial-gradient(circle at 20% 45%, rgba(255,79,216,.14), transparent 34%); }
.dungeon-wall { width:min(500px, 86vw); padding:36px; border:6px solid var(--orange); background:repeating-linear-gradient(45deg, rgba(110,84,255,.28) 0 24px, rgba(9,10,26,.88) 24px 48px); box-shadow:0 0 50px rgba(255,122,61,.28); }
.boss-key { padding:18px; background:var(--gold); color:var(--night); font-family:"Bungee Shade"; font-size:clamp(32px,4vw,56px); text-align:center; margin-bottom:34px; }
.lock-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.padlock { height:130px; background:var(--night); color:var(--mint); border:3px solid var(--mint); position:relative; transition:transform 220ms ease, background 220ms ease; }
.padlock::before { content:""; position:absolute; top:-28px; left:50%; width:48px; height:42px; transform:translateX(-50%); border:8px solid var(--mint); border-bottom:0; border-radius:28px 28px 0 0; }
.padlock:hover { transform:translateY(-10px); background:rgba(55,255,180,.13); }
.dark-card { border-color:var(--pink); box-shadow:12px 12px 0 rgba(255,122,61,.48); }
.clause-meter { height:28px; border:3px solid var(--ice); margin-top:26px; padding:4px; }
.clause-meter span { display:block; height:100%; width:22%; background:linear-gradient(90deg, var(--pink), var(--mint)); box-shadow:0 0 18px var(--mint); transition:width 500ms ease; }

.distribution-gate { grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); gap:6vw; background:linear-gradient(90deg, rgba(247,216,120,.08), transparent); }
.gate-panel { max-width:760px; }
.lever-board { display:flex; gap:18px; margin-top:34px; flex-wrap:wrap; }
.lever { padding:22px 30px; background:var(--violet); color:var(--ice); box-shadow:0 8px 0 #2d236c; transition:transform 180ms ease, background 180ms ease; }
.lever.pulled { transform:translateY(8px); background:var(--mint); color:var(--night); box-shadow:0 0 22px var(--mint); }
.boss-door { width:min(480px, 84vw); height:620px; border:8px solid var(--gold); border-radius:220px 220px 10px 10px; display:grid; place-items:center; background:linear-gradient(90deg, rgba(9,10,26,.95) 49%, rgba(234,247,255,.14) 50%, rgba(9,10,26,.95) 51%); box-shadow:0 0 65px rgba(247,216,120,.32), inset 0 0 40px rgba(255,79,216,.24); position:relative; overflow:hidden; }
.boss-door span { font-family:"Bungee Shade"; color:var(--gold); font-size:clamp(38px,5vw,68px); text-align:center; }
.door-light { position:absolute; top:70px; width:28px; height:28px; border-radius:50%; background:var(--pink); box-shadow:0 0 25px var(--pink); }
.boss-door.open { background:linear-gradient(90deg, rgba(55,255,180,.24) 0 42%, rgba(234,247,255,.5) 50%, rgba(55,255,180,.24) 58% 100%); }
.boss-door.open .door-light { background:var(--mint); box-shadow:0 0 32px var(--mint); }

.attribution-tavern { background:radial-gradient(circle at 70% 35%, rgba(255,122,61,.20), transparent 38%); }
.tavern-sign { font-family:"Bungee Shade"; font-size:clamp(38px,7vw,92px); color:var(--orange); text-align:center; text-shadow:0 0 20px var(--orange); margin-bottom:34px; }
.parchment-card { background:linear-gradient(135deg, rgba(247,216,120,.94), rgba(234,247,255,.88)); color:var(--night); border-color:var(--orange); box-shadow:14px 14px 0 rgba(110,84,255,.55); }
.parchment-card h2, .parchment-card p { color:var(--night); }
.ticket-roll { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:26px; }
.ticket { padding:22px 10px; background:var(--ice); color:var(--night); border:3px dashed var(--orange); font-family:"Silkscreen"; text-align:center; transform:rotate(var(--tilt, -2deg)); }
.ticket:nth-child(even) { --tilt: 3deg; }

.endgame { background:radial-gradient(circle, rgba(55,255,180,.12), transparent 52%); }
.final-scroll { width:min(880px, 92vw); padding:58px; text-align:center; background:linear-gradient(90deg, #f5d788, #EAF7FF 14%, #F7D878 50%, #EAF7FF 86%, #f5d788); color:var(--night); border:6px solid var(--orange); box-shadow:0 0 0 12px rgba(9,10,26,.72), 0 0 80px rgba(247,216,120,.34); }
.final-scroll h2, .final-scroll p { color:var(--night); }
.mega-seal { width:240px; height:240px; border-radius:50%; margin:38px auto 0; display:grid; place-items:center; background:var(--pink); color:var(--ice); font-family:"Bungee Shade"; font-size:34px; transform:scale(.72) rotate(-18deg); opacity:.42; box-shadow:0 0 42px var(--pink); transition:transform 500ms cubic-bezier(.2,1.4,.2,1), opacity 300ms ease, background 300ms ease; }
.mega-seal.sealed { transform:scale(1) rotate(-8deg); opacity:1; background:var(--mint); color:var(--night); box-shadow:0 0 65px var(--mint); }

.tooltip { position:fixed; max-width:260px; padding:12px 14px; background:var(--ice); color:var(--night); font-family:"Silkscreen"; font-size:12px; pointer-events:none; opacity:0; transform:translate(12px, 12px); z-index:40; box-shadow:7px 7px 0 var(--pink); transition:opacity 160ms ease; }

.reveal { transform: translateY(36px); opacity: 0; transition: transform 700ms ease, opacity 700ms ease; }
.reveal.visible { transform: translateY(0); opacity: 1; }

@keyframes flicker { 0%, 100% { filter:brightness(1); } 8% { filter:brightness(1.35); } 10% { filter:brightness(.74); } 12% { filter:brightness(1.5); } 60% { filter:brightness(1.08); } }
@keyframes drift { from { background-position:0 0, 0 0; } to { background-position:140px 70px, -110px 110px; } }
@keyframes bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

@media (max-width: 900px) {
    .campaign-hud { width: calc(100% - 24px); overflow:auto; justify-content:flex-start; }
    .rights-inventory, .modding-dungeon, .distribution-gate { grid-template-columns:1fr; }
    .ticket-roll, .inventory-grid { grid-template-columns:1fr; }
    .cabinet { min-height: 760px; }
    .screen-copy { padding: 34px; }
    .lock-grid { grid-template-columns:1fr; }
}