:root{--bg:#0b0710;--ink:#f4efe6;--pink:#ff4fa3;--gold:#ffc83d;--green:#7dff6b;--blue:#43c6ff;--panel:#16101f;--line:#2d2240;--px:"Press Start 2P",monospace;--hd:"Bungee",Impact,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:600 16px/1.6 Nunito,system-ui,sans-serif;overflow-x:hidden}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:var(--gold)}
button{font:inherit;cursor:pointer}
.box{position:relative;overflow:hidden;background:#000}
.box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.box.sq{aspect-ratio:1/1}.box.wide{aspect-ratio:16/9}
/* title */
.title-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000;transition:opacity .6s,visibility .6s}
.title-screen.gone{opacity:0;visibility:hidden}
.title-bg{position:absolute;inset:0;opacity:.45}
.title-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.3)}
.title-inner{position:relative;text-align:center;padding:20px}
.title-logo{width:clamp(110px,22vw,190px);aspect-ratio:1;margin:0 auto 16px;border-radius:50%;overflow:hidden;border:4px solid var(--gold);box-shadow:0 0 40px #ff4fa388}
.title-logo img{width:100%;height:100%;object-fit:cover}
.game-title{font:clamp(2.6rem,10vw,6.5rem)/.9 var(--hd);color:var(--gold);text-shadow:4px 4px 0 var(--pink),8px 8px 0 #000;letter-spacing:2px}
.game-title small{display:block;font:clamp(.6rem,2vw,.9rem) var(--px);color:var(--ink);text-shadow:2px 2px 0 #000;margin-top:14px;letter-spacing:3px}
.title-tag{margin:18px 0 26px;font-weight:800}
.press-start{background:none;border:0;color:var(--ink);font:clamp(.9rem,3vw,1.4rem) var(--px);animation:blink 1s steps(2) infinite;padding:12px}
.title-hint{font:.55rem var(--px);opacity:.6;margin-top:10px}
@keyframes blink{50%{opacity:0}}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0004 2px 4px)}
/* hud */
.hud{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-left{display:flex;flex-direction:column;gap:6px}
.wanted{font:.55rem var(--px);background:#000a;padding:6px 8px;border-radius:4px}
.wanted b{display:block;font-size:1.1rem;letter-spacing:2px;margin-top:4px}
.wanted b .off{opacity:.2}
.money{font:clamp(.8rem,2.4vw,1.2rem) var(--px);color:var(--green);text-shadow:2px 2px 0 #000}
.hud-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:.7rem var(--px);color:var(--gold);background:#000a;padding:6px 10px;border-radius:30px}
.hud-brand img{border-radius:50%}
.minimap{position:relative}
.map-toggle{display:none;width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);background:#1d3a26;font-size:1.4rem}
.map-pins{width:170px;height:170px;border-radius:50%;border:3px solid var(--ink);background:radial-gradient(circle,#2b5a35 0 40%,#1d3a26 41%),#1d3a26;box-shadow:0 0 0 4px #000a;position:relative}
.map-pins a{position:absolute;font:.45rem var(--px);color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap}
.map-pins a::before{content:attr(data-pin);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pink);font-size:.5rem;border:2px solid #000}
.map-pins a:hover::before,.map-pins a.on::before{background:var(--gold);color:#000}
.map-pins a:nth-child(1){top:14px;left:56px}.map-pins a:nth-child(2){top:46px;left:16px}.map-pins a:nth-child(3){top:46px;right:4px}
.map-pins a:nth-child(4){top:86px;left:22px}.map-pins a:nth-child(5){top:86px;right:12px}.map-pins a:nth-child(6){bottom:16px;left:62px}
/* panels */
main{padding-top:200px}
.panel{max-width:1180px;margin:0 auto 90px;padding:0 20px}
.kicker{font:.6rem var(--px);color:var(--pink);margin-bottom:8px}
h2{font:clamp(1.8rem,5vw,3.2rem)/1 var(--hd);color:var(--gold);text-shadow:3px 3px 0 #000;margin-bottom:18px}
.btn{display:inline-block;font:.65rem var(--px);text-decoration:none;color:#000;background:var(--gold);padding:14px 16px;border:3px solid #000;box-shadow:4px 4px 0 var(--pink);transition:transform .1s}
.btn:hover{transform:translate(-2px,-2px)}
.btn.alt{background:var(--ink);box-shadow:4px 4px 0 var(--blue)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ca{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#000;border:2px dashed var(--green);padding:10px 12px;margin-top:18px;max-width:100%}
.ca span{font:.6rem var(--px);color:var(--green)}
.ca code,.ca-text{font-family:ui-monospace,monospace;overflow-wrap:anywhere;word-break:break-all;min-width:0;flex:1 1 220px}
.copy{background:var(--green);color:#000;border:0;font:.55rem var(--px);padding:8px 10px}
/* profile */
.profile{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:40px;align-items:center}
.mugshot{background:repeating-linear-gradient(180deg,#2a2236 0 22px,#1e1828 22px 24px);padding:20px;border:3px solid var(--ink);transform:rotate(-2deg)}
.plate{display:block;margin-top:12px;background:#000;font:.5rem var(--px);text-align:center;padding:8px}
.bio{font-size:1.2rem;font-weight:800;margin-bottom:16px}
.sheet{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;border-left:4px solid var(--pink);padding-left:14px}
.sheet dt{font:.55rem/2 var(--px);color:var(--blue)}
/* missions */
.desc{max-width:820px;opacity:.9;margin-bottom:28px}
.mission-wrap{display:grid;grid-template-columns:320px 1fr;gap:24px;background:var(--panel);border:3px solid var(--line);padding:18px}
.mission-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.m{width:100%;text-align:left;background:transparent;color:var(--ink);border:0;border-left:4px solid transparent;padding:12px;font:.62rem var(--px);display:flex;gap:12px;align-items:center}
.m i{font-style:normal;color:var(--pink)}
.m:hover,.m.active{background:#ffc83d22;border-left-color:var(--gold);color:var(--gold)}
.preview .box{border:3px solid #000}
.preview img{transition:opacity .25s}
.preview img.fade{opacity:0}
.brief{padding-top:14px}
.tagm{font:.5rem var(--px);background:var(--pink);color:#000;padding:4px 6px}
.brief h3{font:1.6rem var(--hd);margin:8px 0}
/* reel */
.reel{margin-bottom:90px;background:#000;padding:30px 0;border-block:3px solid var(--line)}
.reel-head{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.reel-head h2{margin-right:auto}
.reel-ctl button{width:48px;height:48px;background:var(--gold);border:3px solid #000;font-size:1rem}
.strip{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 0;background:#111;border-block:14px dotted #333;scrollbar-width:thin}
.strip figure{flex:0 0 min(78vw,440px);scroll-snap-align:center;padding:0 10px;border-right:4px solid #000}
.strip figcaption{font:.5rem var(--px);margin-top:8px;color:#ffb}
/* stats */
.loading{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.load-art .box{border:3px solid var(--ink);filter:contrast(1.05)}
.bars{list-style:none;display:flex;flex-direction:column;gap:10px}
.bars li{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px}
.bars span{font:.55rem var(--px);color:var(--blue)}
.bar{height:14px;background:#000;border:2px solid var(--ink)}
.bar i{display:block;height:100%;width:var(--v);background:repeating-linear-gradient(90deg,var(--pink) 0 10px,#ff7fbf 10px 20px)}
.xp{margin-top:26px}
.xp-top{display:flex;justify-content:space-between;font:.6rem var(--px);margin-bottom:6px}
.xp-bar{height:24px;background:#000;border:3px solid var(--gold)}
.xp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width 2.2s ease-out}
.tip{margin-top:12px;font-size:.9rem;opacity:.85}
/* cheats */
.codes{list-style:none;display:flex;flex-direction:column;gap:2px;background:#000;border:3px solid var(--line);padding:10px;margin-bottom:10px}
.codes li{display:grid;grid-template-columns:240px 1fr auto;gap:16px;align-items:center;padding:14px 10px;border-bottom:1px dashed var(--line)}
.codes code{font:.7rem var(--px);color:var(--green);overflow-wrap:anywhere}
.codes em{font:.45rem var(--px);font-style:normal;color:var(--gold);opacity:0;transition:opacity .3s}
.codes li.hit em{opacity:1}
.cheats>.btn{margin-top:20px}
/* footer */
.passed{text-align:center;padding:60px 20px 40px;background:linear-gradient(#0000,#000)}
.passed-band{background:linear-gradient(90deg,#0000,#000c 20%,#000c 80%,#0000);padding:22px 0;margin-bottom:20px}
.passed-band h2{font:clamp(2rem,8vw,4.6rem) var(--hd);color:var(--gold);margin:0}
.passed-band p{font:clamp(.9rem,3vw,1.4rem) var(--px);color:var(--ink);margin-top:10px}
.join{font-weight:800}.passed .ctas{justify-content:center;margin-bottom:24px}
.fine{font-size:.8rem;opacity:.6}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--green);color:#000;font:.6rem var(--px);padding:12px 16px;transition:transform .3s;z-index:200}
.toast.show{transform:translateX(-50%) translateY(0)}
/* responsive */
@media (max-width:900px){
 main{padding-top:110px}
 .hud-brand{display:none}
 .map-toggle{display:block}
 .map-pins{display:none;position:absolute;right:0;top:64px}
 .minimap.open .map-pins{display:block}
 .profile,.loading,.mission-wrap{grid-template-columns:1fr}
 .mugshot{max-width:320px;margin:0 auto}
 .mission-list{flex-direction:row;overflow-x:auto;order:2}
 .m{white-space:nowrap;border-left:0;border-bottom:4px solid transparent}
 .m:hover,.m.active{border-bottom-color:var(--gold)}
 .codes li{grid-template-columns:1fr}
 .bars li{grid-template-columns:110px 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}