:root {
    --midnight: #10111F;
    --carbon: #2B2D42;
    --teal: #00F5D4;
    --magenta: #F15BB5;
    --yellow: #FEE440;
    --violet: #9B5DE5;
    --paper: #D8F3DC;
    --red: #FF4D6D;
    --pixel: 6px;
}

/* Design parser tokens: Space Grotes Grotesk** inventory chips territory tags */

* { box-sizing: border-box; }

html {
    background: var(--midnight);
    color: var(--paper);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: "Bricolage Grotesque", Inter, sans-serif;
    background:
        radial-gradient(circle at 15% 4%, rgba(0, 245, 212, .18), transparent 28rem),
        radial-gradient(circle at 84% 18%, rgba(241, 91, 181, .18), transparent 34rem),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        var(--midnight);
    background-size: auto, auto, 44px 44px, 44px 44px, auto;
}

.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    opacity: .16;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, transparent 0 8px, rgba(254,228,64,.08) 8px 10px);
    mix-blend-mode: screen;
}

.bureau { position: relative; z-index: 2; }

.room {
    position: relative;
    min-height: 100vh;
    padding: clamp(34px, 6vw, 88px);
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
}

.room::before {
    content: attr(data-room);
    position: absolute;
    right: 4vw;
    top: 5vh;
    font: 700 clamp(3rem, 12vw, 11rem)/1 "Space Grotesk", sans-serif;
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 245, 212, .22);
    z-index: -1;
}

h1, h2 {
    margin: 0;
    font-family: "Press Start 2P", system-ui;
    letter-spacing: -.04em;
    line-height: 1.22;
    color: var(--yellow);
    text-shadow: 5px 5px 0 var(--violet), 10px 10px 0 rgba(0,0,0,.5);
}

h1 { font-size: clamp(1.15rem, 3.7vw, 3rem); max-width: 12ch; }
h2 { font-size: clamp(1rem, 3.1vw, 2.35rem); }
p { font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.38; }

.permit-ribbon {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 700vh;
    z-index: 1;
    pointer-events: none;
}

.permit-ribbon svg { width: 100%; height: 100%; display: block; }
.permit-ribbon path {
    fill: none;
    stroke: var(--yellow);
    stroke-width: 18;
    stroke-linecap: square;
    stroke-dasharray: 24 16;
    filter: drop-shadow(0 0 13px rgba(254,228,64,.45));
    opacity: .58;
}

.cabinet-face {
    width: min(1120px, 96vw);
    min-height: 88vh;
    padding: clamp(16px, 3vw, 34px);
    border: 18px solid var(--carbon);
    background:
        linear-gradient(135deg, rgba(43,45,66,.72), rgba(16,17,31,.94)),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,245,212,.09) 18px 20px);
    box-shadow: 0 0 0 8px var(--violet), inset 0 0 0 8px #000, 0 28px 70px #000;
    transform: rotate(-1.2deg);
}

.marquee {
    height: clamp(82px, 14vw, 160px);
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 8px solid var(--yellow);
    background: var(--magenta);
    color: var(--midnight);
    box-shadow: inset 0 -14px 0 rgba(0,0,0,.22);
}

.marquee span {
    font-family: "Press Start 2P", system-ui;
    font-size: clamp(2.4rem, 10vw, 8.5rem);
    white-space: nowrap;
    transform: translateX(-4vw) translateY(1.8vw);
    text-shadow: 8px 8px 0 var(--teal);
}

.cabinet-screen {
    position: relative;
    margin: 28px auto 0;
    min-height: 58vh;
    padding: clamp(24px, 5vw, 70px);
    border: 10px solid #000;
    background:
        radial-gradient(circle at 50% 40%, rgba(0,245,212,.17), transparent 35%),
        linear-gradient(#17182a, #070811);
}

.clerk-line, .permit-top, .queue-ticket, .glyph small, .inspection-tag span, .stamp-stack span, .foil-key {
    font-family: "Space Grotesk", sans-serif;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 700;
}

.clerk-line { color: var(--teal); max-width: 52ch; }
.coin-slot {
    position: absolute;
    right: clamp(28px, 10vw, 130px);
    bottom: 31%;
    width: 245px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 5px solid var(--teal);
    background: #000;
    color: var(--teal);
    box-shadow: 0 0 32px rgba(0,245,212,.75), inset 0 0 20px rgba(0,245,212,.35);
    cursor: pointer;
}

.coin-glow {
    position: absolute;
    right: clamp(58px, 12vw, 170px);
    bottom: 25%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,245,212,.48), transparent 66%);
    animation: pulseGlow 2.4s infinite;
}

.return-mouth {
    position: absolute;
    left: clamp(20px, 8vw, 118px);
    bottom: 8%;
    width: min(430px, 76vw);
    height: 210px;
    border-top: 18px solid #000;
    background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(43,45,66,.6));
    perspective: 900px;
}

.play-permit, .permit-copy, .coupon-document, .final-certificate, .paper-tab, .inspection-tag {
    color: var(--midnight);
    background: var(--paper);
    border: 4px solid var(--midnight);
    box-shadow: 12px 12px 0 rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.35);
}

.play-permit {
    position: absolute;
    left: 30px;
    top: 28px;
    width: min(360px, 72vw);
    padding: 18px;
    transform: rotateX(10deg) translateY(var(--permit-y, 120px));
    transition: transform .75s cubic-bezier(.2,1.4,.3,1), filter .4s;
}

.play-permit.ejected { --permit-y: 0px; }
.permit-top { color: var(--red); border-bottom: 3px dashed var(--midnight); padding-bottom: 9px; }
.permit-name { margin: 13px 0; font-family: "Libre Baskerville", serif; }
.permit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.permit-grid span {
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 3px dashed var(--carbon);
    font-family: "Space Grotesk", sans-serif;
    text-transform: uppercase;
}
.permit-grid span.filled { background: var(--yellow); border-style: solid; color: var(--midnight); animation: stampIn .42s both; }
.clause, .ceremony, .final-certificate p { font-family: "Libre Baskerville", serif; font-size: 1rem; }
.queue-ticket { position: absolute; right: 42px; bottom: 18px; color: var(--yellow); }

.paper-tab { max-width: 560px; padding: 30px; transform: rotate(-4deg) translate(-18vw, -6vh); }
.paper-tab span { color: var(--red); font-weight: 800; }
.inventory { grid-template-columns: 1fr 1fr; gap: 5vw; background: linear-gradient(155deg, var(--midnight), #17182c 60%, rgba(155,93,229,.28)); }
.equipment-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 190px));
    gap: 24px;
    transform: rotate(3deg);
}
.glyph {
    aspect-ratio: 1;
    border: 7px solid var(--midnight);
    border-radius: 50%;
    font: 2.6rem "Press Start 2P", system-ui;
    color: var(--midnight);
    background: var(--teal);
    box-shadow: 9px 11px 0 var(--magenta), 0 0 0 8px var(--yellow);
    cursor: pointer;
    transition: transform .22s, filter .22s;
}
.glyph:nth-child(2) { background: var(--yellow); box-shadow: 9px 11px 0 var(--violet), 0 0 0 8px var(--teal); }
.glyph:nth-child(3) { background: var(--magenta); }
.glyph:nth-child(4) { background: var(--red); color: #fff; }
.glyph.clicked { transform: translateY(10px) scale(.94); filter: saturate(1.35); }
.glyph small { display: block; margin-top: 10px; font-size: .55rem; }
.permit-copy { width: min(370px, 80vw); padding: 22px; position: absolute; right: 8vw; bottom: 9vh; transform: rotate(7deg); }
.button-sockets { display: flex; gap: 10px; }
.button-sockets i { width: 46px; height: 46px; border: 4px solid var(--carbon); border-radius: 50%; background: var(--paper); }
.button-sockets i.loaded { background: var(--teal); box-shadow: inset 0 0 0 8px var(--yellow); }

.territory { background: radial-gradient(circle at 32% 30%, rgba(216,243,220,.18), transparent 26rem), var(--carbon); }
.map-scroll { width: min(820px, 88vw); transform: rotate(2deg); }
.rpg-map {
    position: relative;
    height: min(56vh, 520px);
    margin-top: 26px;
    border: 8px solid var(--midnight);
    background:
        linear-gradient(90deg, rgba(16,17,31,.12) 1px, transparent 1px),
        linear-gradient(0deg, rgba(16,17,31,.12) 1px, transparent 1px),
        var(--paper);
    background-size: 34px 34px;
    box-shadow: 20px 20px 0 rgba(0,0,0,.28);
    overflow: hidden;
}
.land, .visa {
    position: absolute;
    display: grid;
    place-items: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 800;
    color: var(--midnight);
}
.land { border: 5px solid var(--midnight); background: var(--teal); clip-path: polygon(12% 0, 88% 7%, 100% 55%, 70% 100%, 18% 87%, 0 38%); }
.land-a { left: 7%; top: 14%; width: 190px; height: 140px; }
.land-b { right: 11%; top: 9%; width: 230px; height: 175px; background: var(--yellow); }
.land-c { left: 34%; bottom: 11%; width: 225px; height: 145px; background: var(--magenta); }
.land-d { right: 7%; bottom: 8%; width: 150px; height: 120px; background: var(--violet); color: #fff; }
.visa { padding: 8px 13px; border: 4px solid var(--red); color: var(--red); transform: rotate(-14deg) scale(var(--visa-scale, .2)); opacity: var(--visa-opacity, 0); transition: .5s cubic-bezier(.2,1.7,.3,1); }
.visa.visible { --visa-scale: 1; --visa-opacity: 1; }
.visa-one { left: 21%; top: 35%; }
.visa-two { right: 26%; top: 28%; }
.visa-three { left: 46%; bottom: 32%; }
.inspection-tag { position: absolute; right: 9vw; bottom: 12vh; max-width: 340px; padding: 22px; transform: rotate(-7deg); }

.modding { grid-template-columns: 1fr 1fr; gap: 5vw; background: linear-gradient(24deg, var(--midnight) 0 55%, rgba(241,91,181,.16) 55% 100%); }
.counter-slab { padding: 36px; border: 8px solid var(--teal); background: rgba(43,45,66,.78); box-shadow: 18px 18px 0 #000; transform: skewY(-2deg); }
.speech { background: #fff; color: var(--midnight); padding: 22px; border-radius: 24px 24px 24px 0; border: 4px solid var(--midnight); }
.tool-loop { position: relative; height: 170px; }
.tool { position: absolute; font-size: 4.4rem; color: var(--yellow); filter: drop-shadow(8px 8px 0 var(--red)); animation: toolOrbit 4.5s infinite ease-in-out; }
.scissors { left: 10%; top: 12%; }
.tape { left: 44%; top: 40%; animation-delay: -.9s; }
.wrench { right: 7%; top: 4%; animation-delay: -1.8s; }
.coupon-document { position: relative; padding: 42px; min-height: 340px; transform: rotate(5deg); }
.perfs { position: absolute; inset: 18px; border: 4px dashed var(--red); animation: perforate 1.2s steps(8) infinite; }
.denial { position: absolute; right: 28px; bottom: 24px; color: var(--red); border: 5px solid currentColor; padding: 10px 16px; transform: rotate(-10deg); animation: denialShake 3s infinite; }

.streaming { background: radial-gradient(circle at 70% 40%, rgba(0,245,212,.13), transparent 30rem), #090a14; }
.broadcast-window { position: relative; width: min(760px, 86vw); min-height: 510px; padding: 44px; border: 12px solid var(--teal); background: rgba(43,45,66,.86); box-shadow: inset 0 0 0 8px #000, 22px 22px 0 var(--magenta); overflow: hidden; }
.antenna { width: 42px; height: 110px; border-left: 7px solid var(--yellow); border-top: 7px solid var(--yellow); transform: rotate(24deg); margin-left: auto; }
.waves i { position: absolute; right: 98px; top: 84px; width: 70px; height: 70px; border: 5px solid var(--magenta); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: waveOut 2.4s infinite; }
.waves i:nth-child(2) { animation-delay: .4s; }
.waves i:nth-child(3) { animation-delay: .8s; }
.waves i:nth-child(4) { animation-delay: 1.2s; }
.stamp-stack { position: absolute; left: 8vw; bottom: 12vh; display: grid; gap: 13px; transform: rotate(-8deg); }
.stamp-stack span { color: var(--magenta); background: transparent; border: 5px solid currentColor; padding: 12px 18px; font-size: 1.1rem; opacity: .3; transform: scale(.76); transition: .36s; }
.stamp-stack span.hit { opacity: 1; transform: scale(1); background: rgba(241,91,181,.08); }

.vault { background: linear-gradient(180deg, #0c1818, var(--midnight)); color: var(--paper); }
.vault-door { width: min(550px, 80vw); aspect-ratio: 1; border-radius: 50%; border: 18px solid var(--paper); display: grid; place-items: center; text-align: center; padding: 55px; background: radial-gradient(circle, var(--carbon), #050608 68%); box-shadow: 0 0 0 12px var(--teal), inset 0 0 60px #000; transform: rotate(-2deg); }
.wheel { width: 150px; height: 150px; border-radius: 50%; border: 12px solid var(--yellow); box-shadow: inset 0 0 0 18px var(--violet); animation: wheelTurn 8s linear infinite; }
.drawers { position: absolute; right: 7vw; top: 19vh; display: grid; gap: 14px; }
.drawers span { width: 230px; padding: 18px; color: var(--midnight); background: var(--paper); border: 4px solid var(--midnight); box-shadow: 10px 10px 0 rgba(0,0,0,.35); transform: translateX(var(--drawer-x, 70px)); transition: transform .7s cubic-bezier(.2,1.3,.2,1); }
.drawers span.open { --drawer-x: 0px; }
.foil-key { position: absolute; left: 8vw; bottom: 16vh; padding: 18px 28px; color: var(--midnight); background: linear-gradient(135deg, var(--yellow), var(--teal), var(--violet)); clip-path: polygon(0 20%, 74% 20%, 74% 0, 100% 50%, 74% 100%, 74% 80%, 0 80%); }

.final { background: radial-gradient(circle, rgba(155,93,229,.25), transparent 40rem), var(--midnight); }
.seal-stage { display: grid; place-items: center; gap: 34px; text-align: center; }
.medallion { width: min(460px, 76vw); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--midnight); background: conic-gradient(from 0deg, var(--teal), var(--yellow), var(--magenta), var(--violet), var(--teal)); border: 14px solid var(--paper); box-shadow: 0 0 45px rgba(0,245,212,.5), 0 0 0 18px rgba(254,228,64,.18); transform: scale(.72) rotate(-18deg); transition: transform .8s cubic-bezier(.2,1.7,.2,1); }
.medallion.complete { transform: scale(1) rotate(0deg); animation: hologram 3.4s infinite linear; }
.medallion span { font-family: "Press Start 2P", system-ui; font-size: clamp(.9rem, 3vw, 2.1rem); line-height: 1.55; text-shadow: 3px 3px 0 rgba(255,255,255,.44); }
.final-certificate { width: min(720px, 88vw); padding: 28px; transform: rotate(1deg); }
.final-certificate h3 { margin: 0 0 12px; font: 700 1.7rem "Libre Baskerville", serif; color: var(--red); }
.signature { font-family: "Libre Baskerville", serif; color: var(--violet); }

.stamp-burst {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 40;
    padding: 18px 28px;
    border: 7px solid var(--red);
    color: var(--red);
    font: 700 2rem "Space Grotesk", sans-serif;
    letter-spacing: .12em;
    transform: translate(-50%, -50%) scale(.2) rotate(-18deg);
    opacity: 0;
    pointer-events: none;
}
.stamp-burst.show { animation: burstStamp .55s cubic-bezier(.2,1.8,.2,1); }

@keyframes pulseGlow { 50% { transform: scale(1.18); opacity: .55; } }
@keyframes stampIn { 0% { transform: scale(1.9) rotate(-12deg); filter: blur(2px); } 100% { transform: scale(1) rotate(0); filter: blur(0); } }
@keyframes toolOrbit { 50% { transform: translateY(36px) rotate(18deg); color: var(--teal); } }
@keyframes perforate { 50% { border-color: var(--teal); } }
@keyframes denialShake { 4%, 10% { transform: rotate(-10deg) translateX(-8px); } 7%, 13% { transform: rotate(-10deg) translateX(8px); } 16% { transform: rotate(-10deg) translateX(0); } }
@keyframes waveOut { from { transform: scale(.2); opacity: 1; } to { transform: scale(4.6); opacity: 0; } }
@keyframes wheelTurn { to { transform: rotate(360deg); } }
@keyframes hologram { to { filter: hue-rotate(360deg); } }
@keyframes burstStamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-34deg); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(-8deg); } }

@media (max-width: 820px) {
    .inventory, .modding { grid-template-columns: 1fr; }
    .paper-tab, .permit-copy, .inspection-tag { position: relative; inset: auto; transform: rotate(-2deg); }
    .equipment-board { grid-template-columns: repeat(2, minmax(105px, 1fr)); }
    .drawers { position: relative; right: auto; top: auto; }
    .coin-slot { position: relative; inset: auto; margin: 28px 0; }
    .return-mouth { position: relative; inset: auto; margin-top: 24px; }
}