:root {
    /* compliance notes: IBM Plex Mono for tiny receipt numbers; Interactions emphasize transformation—folding cardboard; Space Grotesk** Grotes for clear narration */
    --night: #17140F;
    --green: #24B36B;
    --silver: #C8D0C2;
    --cardboard: #C68A3A;
    --blue: #2D7DD2;
    --red: #F04E37;
    --glow: #D8F25D;
    --display: 'Rubik Dirt', cursive;
    --bubble: 'Bagel Fat One', cursive;
    --body: 'Space Grotesk', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--night);
    color: var(--silver);
    font-family: var(--body);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 22%, rgba(36,179,107,.18), transparent 26%),
        radial-gradient(circle at 87% 72%, rgba(216,242,93,.12), transparent 24%),
        repeating-linear-gradient(90deg, rgba(200,208,194,.04) 0 2px, transparent 2px 12px);
    mix-blend-mode: screen;
    z-index: 1;
}

.yard-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: .22;
    background-image:
        radial-gradient(circle, rgba(200,208,194,.55) 1px, transparent 1px),
        radial-gradient(circle, rgba(240,78,55,.25) 1px, transparent 1px);
    background-size: 13px 17px, 29px 31px;
}

.score-strip {
    position: fixed;
    left: 18px;
    right: 18px;
    top: 14px;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--night);
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(10px, 1.5vw, 13px);
    letter-spacing: .06em;
}

.score-strip span {
    background: var(--silver);
    border: 3px solid var(--night);
    box-shadow: 4px 4px 0 var(--red);
    padding: 7px 10px;
    transform: rotate(-1deg);
}

.score-strip span:nth-child(2) { background: var(--glow); transform: rotate(2deg); }
.score-strip span:nth-child(3) { background: var(--cardboard); }

.token-ring {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 22;
    display: grid;
    gap: 11px;
}

.nav-token {
    width: 76px;
    min-height: 76px;
    border-radius: 50%;
    border: 4px dashed var(--night);
    background: var(--cardboard);
    color: var(--night);
    font-family: var(--bubble);
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--silver), 6px 7px 0 rgba(0,0,0,.5);
    transform: rotate(var(--r, -4deg));
    transition: transform .24s ease, background .24s ease;
}
.nav-token:nth-child(2n) { --r: 5deg; background: var(--blue); }
.nav-token:nth-child(3n) { --r: -8deg; background: var(--red); }
.nav-token span { display: block; font-family: var(--mono); font-size: 11px; }
.nav-token:hover, .nav-token.active { background: var(--glow); transform: rotate(0deg) scale(1.1); }

.round {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: clamp(96px, 10vh, 130px) clamp(26px, 7vw, 110px);
    isolation: isolate;
    border-bottom: 8px solid var(--night);
}

.round::after {
    content: attr(data-round);
    position: absolute;
    left: -18px;
    bottom: 10px;
    font-family: var(--display);
    color: rgba(200,208,194,.08);
    font-size: clamp(52px, 12vw, 180px);
    white-space: nowrap;
    z-index: -1;
}

h1, h2 { font-family: var(--display); margin: 0; line-height: .88; color: var(--night); }
h1 { font-size: clamp(68px, 15vw, 184px); letter-spacing: -.05em; text-shadow: 5px 5px 0 var(--green), 10px 10px 0 var(--red); }
h2 { font-size: clamp(48px, 9vw, 112px); text-shadow: 4px 4px 0 var(--glow); }
p { font-size: clamp(18px, 2.1vw, 26px); line-height: 1.2; }
button { font: inherit; }

.gate {
    background: linear-gradient(135deg, var(--night) 0 58%, #211d16 58% 100%);
    display: grid;
    align-items: center;
}

.hero-sign {
    width: min(880px, calc(100vw - 150px));
    background: var(--cardboard);
    border: 7px solid var(--night);
    box-shadow: 16px 18px 0 var(--blue), -8px -8px 0 var(--silver);
    padding: clamp(28px, 5vw, 56px);
    transform: rotate(-3deg);
    position: relative;
    z-index: 4;
}
.hero-sign p { color: var(--night); max-width: 630px; font-weight: 700; }
.tag-blink, .mono-label {
    display: inline-block;
    font-family: var(--mono);
    color: var(--night);
    background: var(--silver);
    border: 3px solid var(--night);
    padding: 8px 12px;
    box-shadow: 5px 5px 0 var(--red);
}
.tag-blink { animation: blinkTag .8s steps(2, end) infinite; }

.cap-button {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    border: 8px ridge var(--silver);
    background: radial-gradient(circle, var(--red) 0 45%, #b62c1d 47% 58%, var(--night) 60% 62%, var(--red) 64%);
    color: var(--glow);
    font-family: var(--bubble);
    text-transform: uppercase;
    cursor: pointer;
    position: absolute;
    right: 19vw;
    bottom: 15vh;
    z-index: 6;
    box-shadow: 0 16px 0 rgba(0,0,0,.65);
    animation: dangle 2.2s ease-in-out infinite;
}
.cap-button span { display: block; transform: rotate(-9deg); }
.cap-button:hover { animation-play-state: paused; transform: scale(1.08) rotate(18deg); }

.recycle-maze {
    position: absolute;
    width: 56vw;
    height: 56vw;
    right: -14vw;
    top: 8vh;
    border-radius: 50%;
    animation: slowSpin 22s linear infinite;
    opacity: .78;
}
.recycle-maze span {
    position: absolute;
    width: 52%;
    height: 24%;
    background: var(--green);
    clip-path: polygon(0 25%, 68% 25%, 68% 0, 100% 50%, 68% 100%, 68% 75%, 0 75%);
    left: 22%;
    top: 38%;
    filter: drop-shadow(7px 7px 0 var(--night));
}
.recycle-maze span:nth-child(2) { transform: rotate(120deg) translateX(14%); }
.recycle-maze span:nth-child(3) { transform: rotate(240deg) translateX(14%); }

.crate-stack { position: absolute; z-index: 3; width: 280px; height: 280px; }
.crate-stack i { position: absolute; display: block; width: 170px; height: 112px; background: var(--blue); border: 5px solid var(--night); box-shadow: inset 0 0 0 12px rgba(23,20,15,.14), 8px 8px 0 rgba(0,0,0,.45); }
.crate-stack i::after { content: ""; position: absolute; inset: 24px; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(23,20,15,.28) 16px 24px); }
.left-crates { left: -20px; bottom: 6vh; }
.right-crates { right: 12vw; top: 12vh; transform: scale(.8); }
.crate-stack i:nth-child(1) { transform: rotate(10deg); left: 0; top: 80px; background: var(--cardboard); }
.crate-stack i:nth-child(2) { transform: rotate(-17deg); left: 92px; top: 20px; }
.crate-stack i:nth-child(3) { transform: rotate(6deg); left: 62px; top: 148px; background: var(--red); }

.belt { background: var(--blue); }
.belt::before, .bench::before, .market::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-35deg, transparent 0 34px, rgba(23,20,15,.2) 34px 44px);
}
.conveyor {
    position: absolute;
    left: -12vw;
    top: 28vh;
    width: 130vw;
    height: 138px;
    background: var(--night);
    border: 7px solid var(--silver);
    transform: rotate(-12deg);
    box-shadow: 0 14px 0 rgba(0,0,0,.4);
    overflow: hidden;
}
.conveyor::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, var(--silver) 0 28px, transparent 28px 62px); opacity:.28; animation: beltMove 1s linear infinite; }
.cap, .coin-a { position: absolute; width: 76px; height: 76px; border-radius: 50%; background: var(--red); border: 8px ridge var(--silver); top: 26px; left: 18%; animation: rideBelt 5s linear infinite; }
.can-shield { position:absolute; width:90px; height:80px; background:var(--silver); clip-path: polygon(12% 0,88% 0,100% 45%,50% 100%,0 45%); top:28px; left:42%; animation: rideBelt 6s linear infinite reverse; }
.paper-fold { position:absolute; width:90px; height:90px; background:var(--cardboard); clip-path: polygon(0 0,74% 0,100% 30%,100% 100%,0 100%); top:22px; left:70%; animation: wobble 1.4s ease-in-out infinite; }

.station-copy, .receipt, .garden-map, .shelf {
    position: relative;
    z-index: 4;
    max-width: 680px;
    background: var(--cardboard);
    color: var(--night);
    border: 6px solid var(--night);
    box-shadow: 13px 14px 0 rgba(0,0,0,.45), -8px -8px 0 var(--glow);
    padding: clamp(24px, 4vw, 46px);
}
.tilted { transform: rotate(3deg); margin-top: 26vh; }
.artifact-row { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 58px; }
.artifact, .swap-token, .cartridge {
    border: 4px solid var(--night);
    background: var(--silver);
    color: var(--night);
    padding: 19px 24px;
    box-shadow: 7px 8px 0 rgba(0,0,0,.5);
    cursor: pointer;
    transform: rotate(-2deg);
    transition: transform .24s ease, background .24s ease;
}
.artifact:nth-child(2n), .swap-token:nth-child(2n) { transform: rotate(4deg); background: var(--glow); }
.artifact b, .swap-token b { display:block; font-family:var(--bubble); font-size:30px; }
.artifact span, .swap-token span, .cartridge span { font-family: var(--mono); font-weight:700; }
.sticker-peel:hover, .swap-token:hover, .cartridge:hover { transform: rotate(0deg) translateY(-9px); background: var(--red); color: var(--glow); }

.bench { background: var(--cardboard); display:flex; align-items:center; gap:7vw; flex-wrap:wrap; }
.receipt { background: var(--silver); font-family: var(--mono); transform: rotate(-2deg); }
.receipt h2 { font-family: var(--display); }
.receipt li { margin: 16px 0; font-size: 19px; }
.workbench { position: relative; z-index:4; width:min(470px, 88vw); height:390px; background:#2b241b; border:8px solid var(--night); box-shadow:15px 17px 0 rgba(0,0,0,.45); }
.workbench::after { content:""; position:absolute; left:-25px; right:-25px; bottom:50px; height:48px; background:var(--blue); border:5px solid var(--night); }
.controller-vine { position:absolute; width:170px; height:92px; border-radius:48px; background:var(--night); left:48px; top:80px; box-shadow: inset 33px 0 0 var(--red), inset -33px 0 0 var(--blue); }
.controller-vine::before { content:""; position:absolute; width:178px; height:92px; border:7px solid var(--green); border-bottom:0; border-left:0; border-radius:50%; left:86px; top:-26px; transform:rotate(-20deg); }
.wrench-icon { position:absolute; width:150px; height:34px; background:var(--silver); right:48px; top:88px; transform:rotate(-24deg); border:4px solid var(--night); }
.wrench-icon::after { content:""; position:absolute; width:58px; height:58px; border-radius:50%; border:14px solid var(--silver); right:-32px; top:-25px; }
.fold-panel { position:absolute; left:58px; bottom:88px; width:310px; min-height:118px; background:var(--cardboard); color:var(--night); border:5px solid var(--night); box-shadow:8px 8px 0 var(--red); font-family:var(--bubble); cursor:pointer; transition:transform .35s ease; transform-origin:top; }
.fold-panel em { display:none; font-family:var(--mono); padding:12px; font-style:normal; }
.fold-panel.open { transform:perspective(500px) rotateX(22deg); background:var(--glow); }
.fold-panel.open em { display:block; }

.cabinet { background: var(--night); display:grid; grid-template-columns: minmax(280px, 520px) 1fr; align-items:center; gap:5vw; }
.arcade-cabinet { position:relative; z-index:4; min-height:610px; background:var(--red); border:9px solid var(--silver); clip-path: polygon(10% 0,90% 0,100% 18%,92% 100%,8% 100%,0 18%); box-shadow:18px 20px 0 rgba(0,0,0,.55); padding:70px 45px; }
.cabinet-screen { min-height:310px; background:var(--night); border:7px solid var(--silver); color:var(--glow); padding:32px; position:relative; overflow:hidden; }
.cabinet-screen h2 { color:var(--glow); text-shadow:4px 4px 0 var(--blue); }
.scanline { position:absolute; left:0; right:0; top:-30%; height:30%; background:linear-gradient(transparent, rgba(216,242,93,.25), transparent); animation: scan 2.2s linear infinite; }
.cabinet-controls i { display:inline-block; width:54px; height:54px; border-radius:50%; background:var(--glow); border:5px solid var(--night); margin:26px 12px; box-shadow:0 8px 0 rgba(0,0,0,.45); }
.cartridge-grid { position:relative; z-index:4; display:grid; gap:24px; }
.cartridge { min-height:115px; background:var(--cardboard); font-family:var(--bubble); font-size:32px; }
.rolling-cap { position:absolute; width:94px; height:94px; border-radius:50%; border:8px ridge var(--silver); background:var(--blue); right:18vw; bottom:12vh; animation: rollPath 7s ease-in-out infinite; }

.market { background: var(--silver); display:grid; place-items:center; }
.shelf { max-width:900px; background:var(--blue); color:var(--night); transform:rotate(1deg); }
.swap-slots { display:grid; grid-template-columns:repeat(4, minmax(120px, 1fr)); gap:18px; margin-top:30px; }
.paw-prints i { position:absolute; width:22px; height:28px; border-radius:50%; background:rgba(23,20,15,.35); transform:rotate(25deg); }
.paw-prints i:nth-child(1){left:12%;top:70%;}.paw-prints i:nth-child(2){left:16%;top:62%;}.paw-prints i:nth-child(3){left:22%;top:56%;}.paw-prints i:nth-child(4){left:28%;top:48%;}

.garden { background: radial-gradient(circle at 50% 80%, rgba(216,242,93,.28), transparent 38%), var(--green); display:grid; place-items:center; text-align:left; }
.garden-map { background:var(--night); color:var(--silver); max-width:760px; transform:rotate(-1deg); box-shadow:13px 14px 0 rgba(0,0,0,.45), -8px -8px 0 var(--glow); }
.garden-map h2 { color:var(--glow); text-shadow:4px 4px 0 var(--red); }
.cap-flowers i { position:absolute; bottom:6vh; width:70px; height:70px; border-radius:50%; background:var(--red); border:7px ridge var(--silver); }
.cap-flowers i::after { content:""; position:absolute; width:8px; height:90px; background:var(--night); left:26px; top:62px; }
.cap-flowers i:nth-child(1){left:13%;}.cap-flowers i:nth-child(2){left:28%;background:var(--blue);bottom:12vh}.cap-flowers i:nth-child(3){left:48%;background:var(--glow);}.cap-flowers i:nth-child(4){left:70%;bottom:15vh}.cap-flowers i:nth-child(5){left:84%;background:var(--cardboard);}
.respawn-star { position:absolute; right:22%; top:22%; color:var(--glow); font-size:150px; animation:pulseStar 1.8s ease-in-out infinite; text-shadow:7px 7px 0 var(--night); }
.restart { position:absolute; right:9vw; bottom:14vh; }

.pixel-goblin { position:absolute; width:72px; height:72px; background:var(--green); border:5px solid var(--night); z-index:6; image-rendering:pixelated; box-shadow: 18px 0 0 var(--green), 36px 0 0 var(--night), 0 18px 0 var(--green), 18px 18px 0 var(--glow), 36px 18px 0 var(--green); animation:goblinDrag 4s ease-in-out infinite; }
.pixel-goblin span { position:absolute; width:16px; height:16px; background:var(--night); left:15px; top:18px; box-shadow:30px 0 0 var(--night); }
.goblin-one { left:30%; bottom:13vh; }
.goblin-two { right:10%; bottom:22vh; }

.inventory-tag { position:fixed; left:24px; bottom:20px; z-index:24; max-width:min(520px, calc(100vw - 48px)); background:var(--night); color:var(--glow); border:3px solid var(--silver); padding:10px 14px; font-family:var(--mono); box-shadow:5px 5px 0 var(--red); }

@keyframes blinkTag { 50% { background: var(--glow); transform: translateY(2px); } }
@keyframes dangle { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(8deg) translateY(10px); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes beltMove { to { transform: translateX(62px); } }
@keyframes rideBelt { 0% { transform: translateX(-25vw) rotate(0); } 100% { transform: translateX(75vw) rotate(720deg); } }
@keyframes wobble { 50% { transform: rotate(9deg) translateY(-8px); } }
@keyframes scan { to { top: 110%; } }
@keyframes rollPath { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-45vw,-18vh) rotate(-520deg); background:var(--glow); } }
@keyframes pulseStar { 50% { transform: scale(1.18) rotate(12deg); } }
@keyframes goblinDrag { 0%,100% { transform: translateX(0); } 50% { transform: translateX(70px) rotate(-4deg); } }

@media (max-width: 840px) {
    .token-ring { right: 8px; gap: 6px; }
    .nav-token { width: 54px; min-height: 54px; font-size: 12px; }
    .hero-sign { width: calc(100vw - 92px); }
    .cap-button { right: 96px; bottom: 7vh; width: 128px; height: 128px; }
    .cabinet { grid-template-columns: 1fr; }
    .arcade-cabinet { min-height: 480px; }
    .swap-slots { grid-template-columns: 1fr 1fr; }
    .score-strip { left: 8px; right: 8px; }
    .score-strip span:first-child { display:none; }
}