:root{--paper:#f4f1ea;--ink:#0a0a0a;--pink:#ff2d87;--yellow:#ffe14d;--cyan:#19d3ff;--lime:#7dff4a;--orange:#ff6a00;--mono:'JetBrains Mono',ui-monospace,monospace;--px:'Press Start 2P',monospace;--disp:'Commissioner',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);overflow-x:clip;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
::selection{background:var(--pink);color:#fff}

/* menu bar */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:9px 16px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden}
.bar .logo{font-family:var(--px);font-size:10px;color:var(--yellow)}
.bar .menu{display:flex;gap:16px;opacity:.75}
.bar .clock{margin-left:auto;color:var(--lime)}
.bar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pink);margin-right:6px;animation:blink 1s steps(1) infinite}

/* hero */
.hero{padding:56px 20px 28px;max-width:1180px;margin:0 auto;position:relative}
.tag{display:inline-flex;gap:10px;align-items:center;font-family:var(--px);font-size:10px;padding:8px 10px;border:2px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink);margin-bottom:28px}
.tag i{width:10px;height:10px;background:var(--lime);display:inline-block;animation:blink 1.2s steps(1) infinite}
h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.03em;font-size:clamp(2.3rem,10.4vw,9rem)}
h1 .l{display:block;position:relative;width:max-content;max-width:100%}
h1 .name{font-family:var(--px);font-size:clamp(1.6rem,7vw,5.6rem);letter-spacing:0;line-height:1.15;margin-bottom:.12em}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.glitch::before{color:var(--pink);transform:translate(4px,0);clip-path:inset(0 0 60% 0);mix-blend-mode:multiply;animation:g1 2.6s infinite steps(1)}
.glitch::after{color:var(--cyan);transform:translate(-4px,0);clip-path:inset(55% 0 0 0);mix-blend-mode:multiply;animation:g2 3.1s infinite steps(1)}
@keyframes g1{0%,86%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}87%{transform:translate(6px,-2px);clip-path:inset(10% 0 55% 0)}90%{transform:translate(-5px,1px);clip-path:inset(40% 0 30% 0)}93%{transform:translate(3px,0);clip-path:inset(70% 0 5% 0)}}
@keyframes g2{0%,80%,100%{transform:translate(0);clip-path:inset(100% 0 0 0)}81%{transform:translate(-6px,2px);clip-path:inset(60% 0 10% 0)}84%{transform:translate(5px,-1px);clip-path:inset(20% 0 60% 0)}}
.hl{background:var(--yellow);padding:0 .08em;box-decoration-break:clone}
.sub{margin-top:26px;font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.75rem);max-width:760px;line-height:1.25}
.route{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{font-weight:800;font-size:13px;text-transform:uppercase;padding:10px 14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.chip:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:5px 5px 0 var(--ink)}
.chip:nth-child(1){background:var(--pink);color:#fff}.chip:nth-child(2){background:var(--cyan)}.chip:nth-child(3){background:var(--lime)}.chip:nth-child(4){background:var(--ink);color:var(--yellow)}
.sticker{position:absolute;right:24px;top:40px;width:128px;height:128px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;text-align:center;font-family:var(--px);font-size:9px;line-height:1.7;border:2px solid var(--ink);animation:spin 14s linear infinite;box-shadow:4px 4px 0 var(--ink)}
.sticker b{display:block;font-size:22px;margin:2px 0}

/* desktop + windows */
.desk{max-width:1180px;margin:20px auto 0;padding:0 20px 60px;display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"count wanted" "boot wanted";gap:22px;align-items:start}
.win{background:#fff;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);position:relative;touch-action:none}
.win.drag{z-index:40;box-shadow:14px 14px 0 var(--ink)}
.tb{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(0deg,var(--ink) 0 2px,#fff 2px 4px);cursor:grab;user-select:none}
.tb span{background:#fff;padding:0 8px;font-weight:800;font-size:12px;letter-spacing:.04em}
.tb .x{margin-left:auto;display:flex;gap:6px}
.tb .x b{width:14px;height:14px;border:2px solid var(--ink);background:#fff;display:block}
.tb .x b:nth-child(1){background:var(--yellow)}.tb .x b:nth-child(2){background:var(--lime)}.tb .x b:nth-child(3){background:var(--pink)}
.w-count{grid-area:count}.w-wanted{grid-area:wanted}.w-boot{grid-area:boot}

/* countdown */
.cd-body{padding:22px 20px 24px}
.cd-q{font-family:var(--disp);font-weight:900;font-size:clamp(1.4rem,3vw,2rem);text-transform:uppercase;margin-bottom:16px}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cell{background:var(--ink);color:var(--paper);padding:16px 6px 10px;text-align:center;position:relative;overflow:hidden}
.cell:nth-child(1) .n{color:var(--yellow)}.cell:nth-child(2) .n{color:var(--cyan)}.cell:nth-child(3) .n{color:var(--lime)}.cell:nth-child(4) .n{color:var(--pink)}
.n{display:block;font-family:var(--mono);font-weight:800;font-size:clamp(2rem,5.6vw,3.9rem);line-height:1;font-variant-numeric:tabular-nums}
.n.tick{animation:pop .35s ease}
.lbl{display:block;margin-top:8px;font-size:10px;letter-spacing:.18em;font-weight:700;opacity:.7}
.dates{margin-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-weight:800;font-size:13px}
.dates em{font-style:normal;background:var(--pink);color:#fff;padding:2px 8px}

/* wanted */
.wanted{padding:18px;text-align:center}
.wanted h3{font-family:var(--px);font-size:clamp(13px,2.2vw,18px);line-height:1.5;margin-bottom:12px;letter-spacing:.02em}
.frame{position:relative;border:2px solid var(--ink);overflow:hidden;aspect-ratio:180/301;max-width:330px;margin:0 auto;animation:hue 6s steps(1) infinite;background:var(--pink)}
.frame img{width:100%;height:100%;display:block;image-rendering:pixelated;mix-blend-mode:multiply;animation:jitter 4s infinite steps(1)}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 48%,rgba(255,255,255,.35) 50%,transparent 52%);background-size:100% 200%;animation:scan 3.2s linear infinite;pointer-events:none}
.stamp{position:absolute;bottom:16px;left:50%;transform:translateX(-50%) rotate(-8deg);background:var(--yellow);border:2px solid var(--ink);font-family:var(--px);font-size:10px;padding:8px 10px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
.wanted p{margin-top:14px;font-weight:700;font-size:14px;line-height:1.5}
.wanted .rew{display:inline-block;margin-top:10px;background:var(--ink);color:var(--lime);padding:6px 10px;font-weight:800;font-size:13px}

/* boot */
.term{background:var(--ink);color:#e9e9e9;padding:18px 18px 22px;font-size:13.5px;line-height:1.75;min-height:240px}
.term .ok{color:var(--lime)}.term .off{color:var(--pink)}.term .y{color:var(--yellow)}.term .c{color:var(--cyan)}
.cur{display:inline-block;width:9px;height:1.05em;background:var(--lime);vertical-align:-2px;animation:blink .9s steps(1) infinite}

/* marquee */
.marq{background:var(--ink);color:var(--paper);border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap;transform:rotate(-1.5deg);margin:10px -20px;padding:16px 0}
.marq.two{background:var(--yellow);color:var(--ink);transform:rotate(1.2deg);margin-top:-6px}
.track{display:inline-flex;gap:34px;animation:marq 26s linear infinite;font-family:var(--disp);font-weight:900;font-size:clamp(1.4rem,3.4vw,2.6rem);text-transform:uppercase}
.marq.two .track{animation-direction:reverse;animation-duration:30s}
.track b{color:var(--pink)}.track i{font-style:normal;color:var(--cyan)}.marq.two .track b{color:var(--ink)}

/* no list */
.no{max-width:1180px;margin:0 auto;padding:80px 20px 40px}
.no h2{font-family:var(--px);font-size:clamp(14px,2.4vw,20px);margin-bottom:28px;line-height:1.6}
.rows{display:grid;gap:14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;border:2px solid var(--ink);background:#fff;padding:18px 22px;box-shadow:6px 6px 0 var(--ink);opacity:0;transform:translateX(-40px);transition:opacity .5s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.row.in{opacity:1;transform:none}
.row:nth-child(2){transition-delay:.12s}.row:nth-child(3){transition-delay:.24s}
.row .w{font-family:var(--disp);font-weight:900;font-size:clamp(1.6rem,5.2vw,3.6rem);text-transform:uppercase;position:relative;line-height:1}
.row .w::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:.13em;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .45s .5s}
.row.in .w::after{transform:scaleX(1)}
.badge{font-family:var(--px);font-size:10px;padding:8px 10px;background:var(--ink);color:var(--pink);white-space:nowrap}
.age{margin-top:22px;border:2px solid var(--ink);background:var(--lime);box-shadow:6px 6px 0 var(--ink);padding:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.age .w{font-family:var(--disp);font-weight:900;font-size:clamp(1.6rem,5.2vw,3.6rem);text-transform:uppercase;line-height:1}
.age .num{font-family:var(--px);font-size:clamp(2.2rem,8vw,4.6rem);line-height:1}

/* loading */
.load{max-width:1180px;margin:0 auto;padding:40px 20px 90px}
.lw{border:2px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--ink)}
.lw .in{padding:24px 22px}
.lw h3{font-family:var(--disp);font-weight:900;font-size:clamp(1.3rem,3.2vw,2.2rem);text-transform:uppercase;margin-bottom:16px}
.pb{height:34px;border:2px solid var(--ink);padding:3px;display:flex;gap:3px}
.pb i{flex:1;background:var(--paper);transition:background .1s}
.pb i.on{background:var(--pink)}.pb i.on:nth-child(3n){background:var(--cyan)}.pb i.on:nth-child(5n){background:var(--yellow)}
.pct{display:flex;justify-content:space-between;margin-top:12px;font-weight:800;font-size:13px}
.soon{margin-top:24px;font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,6vw,4.4rem);text-transform:uppercase;line-height:.95}
.soon span{display:block;color:var(--pink)}

footer{background:var(--ink);color:var(--paper);padding:34px 20px 40px;text-align:center}
footer .big{font-family:var(--disp);font-weight:900;font-size:clamp(1.3rem,3.4vw,2.2rem);text-transform:uppercase}
footer .big span{color:var(--yellow)}
footer p{margin-top:10px;font-size:12px;opacity:.7;letter-spacing:.06em}

@keyframes blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:translateY(-30%);opacity:.2}100%{transform:none;opacity:1}}
@keyframes scan{to{background-position:0 -200%}}
@keyframes hue{0%{background:var(--pink)}25%{background:var(--yellow)}50%{background:var(--cyan)}75%{background:var(--lime)}}
@keyframes jitter{0%,90%,100%{transform:none}91%{transform:translate(3px,0) skewX(4deg)}93%{transform:translate(-3px,1px)}95%{transform:translate(2px,-1px) skewX(-3deg)}}

@media (max-width:860px){
  .desk{grid-template-columns:1fr;grid-template-areas:"count" "wanted" "boot"}
  .sticker{width:96px;height:96px;font-size:7px;top:auto;bottom:-30px;right:14px}
  .sticker b{font-size:16px}
  .bar .menu{display:none}
  .cd{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.row{opacity:1;transform:none}}