* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#04121a; font-family:"Segoe UI", Helvetica, Arial, sans-serif; color:#fff; user-select:none; }
canvas { display:block; }
.hidden { display:none !important; }

/* ---------- loading ---------- */
#loading { position:fixed; inset:0; background:linear-gradient(160deg,#0b2733 0%,#123 40%,#052 100%); z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.ld-title { font-size:72px; font-weight:900; letter-spacing:10px; background:linear-gradient(90deg,#ffd24a,#ff5f2e,#ff2e88); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ld-sub { color:#7fd; letter-spacing:6px; font-size:13px; margin-bottom:20px; }
.ld-bar { width:420px; height:8px; border:1px solid #2e6; border-radius:6px; overflow:hidden; }
#ld-fill { height:100%; width:0%; background:linear-gradient(90deg,#ffd24a,#ff5f2e); transition:width .25s; }
#ld-msg { color:#9cd; font-size:12px; letter-spacing:2px; }

/* ---------- hud ---------- */
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
#minimap { position:absolute; top:12px; left:12px; border:2px solid rgba(0,0,0,.55); border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.6); background:#123; }
#district-banner { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:26px; font-weight:800; letter-spacing:3px; color:#ffd24a; text-shadow:2px 2px 0 #000; opacity:0; transition:opacity .6s; }
#wanted { position:absolute; top:12px; right:14px; font-size:30px; letter-spacing:4px; text-shadow:2px 2px 0 #000; text-align:right; }
#wanted .star { color:rgba(255,255,255,.18); } #wanted .star.on { color:#ffd24a; text-shadow:0 0 10px #ff0; }
#status { position:absolute; bottom:14px; right:14px; text-align:right; }
.stat-row { text-shadow:2px 2px 0 #000; }
#cash { font-size:26px; font-weight:800; color:#8f8; }
.bar { width:200px; height:10px; background:rgba(0,0,0,.5); border-radius:6px; margin-top:6px; overflow:hidden; margin-left:auto; }
#hp-fill { height:100%; background:linear-gradient(90deg,#4c4,#8e4); width:100%; }
#ap-fill { height:100%; background:linear-gradient(90deg,#48c,#8cf); width:0%; }
#weapon-name { font-size:18px; font-weight:700; color:#ffc; }
#ammo { font-size:18px; font-weight:700; color:#fff; margin-left:10px; }
#mission-panel { position:absolute; top:12px; left:248px; padding:10px 14px; background:rgba(4,10,14,.55); border-left:4px solid #ffd24a; border-radius:6px; max-width:340px; }
#mission-title { color:#ffd24a; font-weight:800; font-size:15px; letter-spacing:1px; }
#mission-obj { font-size:13px; margin-top:4px; color:#dff; }
#mission-timer { font-size:22px; font-weight:800; margin-top:4px; color:#fff; }
#help-panel { position:absolute; bottom:14px; left:14px; padding:10px 14px; background:rgba(4,10,14,.5); border-radius:6px; font-size:12px; line-height:1.7; color:#cfe; white-space:pre; }
#mission-log { position:absolute; top:250px; right:14px; width:230px; padding:8px 10px; background:rgba(4,10,14,.55); border-radius:6px; font-size:12px; line-height:1.6; color:#efe; }
#subtitle { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); padding:8px 16px; background:rgba(2,6,8,.65); border-radius:8px; font-size:15px; max-width:70%; text-align:center; opacity:0; transition:opacity .4s; }
#reticle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:22px; text-shadow:0 0 4px #000; opacity:0; }
#reticle.on { opacity:.85; }
#prompt { position:absolute; bottom:140px; left:50%; transform:translateX(-50%); font-size:16px; font-weight:700; color:#ffd24a; text-shadow:1px 1px 0 #000; opacity:0; }
#prompt.on { opacity:1; }
#dmg-flash { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 40%, rgba(255,0,0,.45) 100%); opacity:0; transition:opacity .15s; }
#vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%); }
#drug-overlay { position:absolute; inset:0; opacity:0; pointer-events:none; backdrop-filter:hue-rotate(0deg); transition:opacity .8s; background:radial-gradient(ellipse at center, rgba(120,40,200,.12) 0%, rgba(40,200,140,.10) 60%, rgba(250,60,180,.16) 100%); mix-blend-mode:screen; }

/* ---------- overlays ---------- */
.overlay { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(2,6,10,.72); backdrop-filter:blur(3px); }
.ov-card { background:linear-gradient(170deg,#0d2530,#062028); border:1px solid #1c4; border-radius:14px; padding:34px 40px; text-align:center; box-shadow:0 10px 60px rgba(0,0,0,.8); max-width:640px; }
.ov-card h1 { font-size:44px; letter-spacing:6px; margin-bottom:14px; }
.ov-card.death h1 { color:#f43; text-shadow:0 0 24px #f00; }
.ov-card.mission h1 { color:#ffd24a; }
.ov-card .ov-keys { text-align:left; font-size:13px; line-height:1.9; color:#bde; margin:14px auto 18px; white-space:pre; display:inline-block; }
.ov-card button, .overlay button { display:block; margin:10px auto 0; padding:10px 26px; font-size:15px; font-weight:700; letter-spacing:1px; color:#021; background:#ffd24a; border:none; border-radius:8px; cursor:pointer; pointer-events:auto; }
.ov-card button:hover { filter:brightness(1.15); }
.big-title { font-size:64px; letter-spacing:12px; background:linear-gradient(90deg,#ffd24a,#ff5f2e,#ff2e88); -webkit-background-clip:text; background-clip:text; color:transparent; }
.big-sub { color:#7fd; letter-spacing:5px; font-size:13px; margin-bottom:8px; }
#ms-desc { color:#cfe; font-size:15px; line-height:1.6; }
#death-sub { color:#cfe; font-size:15px; margin-bottom:10px; }
/* ---------- big map ---------- */
.map-card { background:rgba(2,8,12,.92); border:2px solid #2a4a5a; border-radius:10px; padding:14px 16px; max-width:92vw; text-align:center; pointer-events:auto; }
.map-title { color:#ffd24a; letter-spacing:3px; font-size:14px; margin-bottom:10px; }
#bigmap { width:min(78vh,90vw); height:auto; border-radius:8px; background:#16283a; display:block; margin:0 auto; }
.map-legend { margin-top:10px; font-size:12px; color:#9cb; letter-spacing:1px; }
.map-legend b { font-weight:700; }
.lg-m { color:#ffa22e; } .lg-p { color:#d070ff; } .lg-c { color:#88ff88; }
#log-list { text-align:left; font-size:13px; line-height:1.9; color:#cfe; margin:8px 0 14px; max-height:40vh; overflow:auto; }
#log-list .done { color:#8f8; } #log-list .active { color:#ffd24a; } #log-list .avail { color:#7fd; }