@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --ink: #dceaf0;
  --muted: #8fa8b2;
  --line: rgba(173, 217, 225, .17);
  --panel: rgba(5, 17, 28, .76);
  --yellow: #f4c64e;
  --cyan: #64e0e2;
  --red: #ff625c;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #07131d; color: var(--ink); font-family: Manrope, Arial, sans-serif; }
button { font: inherit; }

#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.scanlines { position: fixed; z-index: 3; pointer-events: none; inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.15) 4px); mix-blend-mode: overlay; }
#flash { position: fixed; z-index: 9; pointer-events: none; inset: 0; background: #fff; opacity: 0; transition: opacity .08s; }

.hud-panel { position: fixed; z-index: 5; border: 1px solid var(--line); background: linear-gradient(125deg, rgba(9,30,43,.84), var(--panel)); backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.eyebrow, .label { margin: 0; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .16em; color: var(--cyan); }
.topbar { top: 22px; left: 26px; right: 26px; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-left: 3px solid var(--yellow); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 25px; height: 27px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 2px solid var(--yellow); padding: 0 1px 4px; }
.brand-mark span { display: block; background: var(--yellow); width: 5px; transform: skewY(-15deg); }
.brand-mark span:nth-child(1) { height: 11px; }.brand-mark span:nth-child(2) { height: 18px; }.brand-mark span:nth-child(3) { height: 23px; }
h1, h2 { font-family: "Barlow Condensed", Impact, sans-serif; margin: 0; letter-spacing: .045em; }
h1 { font-size: 27px; line-height: 25px; color: #fff; font-weight: 800; } h1 span { color: var(--yellow); }
.topbar-right { display: flex; align-items: center; gap: 17px; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .09em; color: var(--muted); }
.district { display: flex; align-items: center; gap: 8px; }.district i { display:block; width: 7px; height:7px; background: var(--cyan); border-radius:50%; box-shadow: 0 0 9px var(--cyan); }
.sound-toggle { width: 29px; height: 29px; border-radius: 50%; border: 1px solid var(--line); color: var(--yellow); background: transparent; cursor: pointer; }

.player-card { top: 104px; left: 26px; width: 286px; padding: 14px 15px 13px; }
.card-head { display:flex; align-items:center; gap:10px; margin-bottom: 14px; }.portrait { position:relative; overflow:hidden; width:35px; height:35px; border: 1px solid rgba(100,224,226,.55); background: linear-gradient(135deg,#365c67,#162b3a); }.portrait:before { content:""; position:absolute; bottom:-8px; left:7px; width:18px; height:16px; border-radius: 40% 40% 0 0; background:#e1a880; }.portrait-head { position:absolute; top:6px; left:11px; width:12px; height:14px; border-radius:48%; background:#efa87d; }.portrait-head:after { content:""; position:absolute; width:15px; height:7px; top:-3px; left:-2px; border-radius: 60% 70% 30% 20%; background:#202631; }
.card-head strong { font-family:"Barlow Condensed"; font-size:17px; letter-spacing:.08em; display:block; line-height:16px; }.card-head .label { color:var(--muted); font-size:8px; }.level { font: 9px "DM Mono",monospace; color:var(--cyan); }.level b { color:#fff; }.cash { margin-left:auto; text-align:right; }.cash span { display:block; font:8px "DM Mono",monospace; letter-spacing:.12em; color:var(--muted); }.cash strong { display:block; color:var(--yellow); font:700 19px "Barlow Condensed"; letter-spacing:.05em; }
.meter-row { display:grid; align-items:center; grid-template-columns:43px 1fr 24px; gap:8px; margin-top:7px; color:var(--muted); font:8px "DM Mono",monospace; letter-spacing:.08em; }.meter { height:5px; overflow:hidden; background:#1b3440; }.meter i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#54d6bd,#d3f371); box-shadow:0 0 8px #54d6bd; transition:width .25s; }.meter-row b { color:#d5f6e4; font-size:9px; text-align:right; }.heat-row { margin-top:9px; }.stars { display:flex; gap:3px; }.stars i { width:9px; height:5px; background:#344450; transform:skewX(-25deg); }.stars i.active { background:var(--red); box-shadow:0 0 7px var(--red); }.heat-row b { color:var(--muted); }.status-row { margin-top:8px; }.status-meter { height:4px; overflow:hidden; background:#1b3440; border:1px solid rgba(100,224,226,.16); }.status-meter i { display:block; height:100%; width:0; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transition:width .3s; }.status-row b { color:var(--cyan); }

.mission-panel { left:26px; bottom:29px; width:347px; padding: 15px 16px 13px; border-top: 2px solid var(--yellow); }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.panel-heading h2 { font-size:21px; line-height:23px; color:#fff; margin-top:4px; }.mission-count { color:var(--yellow); font:10px "DM Mono",monospace; white-space:nowrap; padding-top:3px; }.mission-panel > p { font-size:11px; line-height:1.5; margin:11px 0 12px; max-width:284px; color:#b9cbd1; }.objective-line { display:flex; align-items:center; gap:7px; color:#d6e8eb; font:10px "DM Mono",monospace; }.objective-icon { color:var(--yellow); font-size:15px; }.objective-line b { margin-left:auto; color:var(--yellow); font-weight:500; }.mission-progress { height:3px; margin:12px 0 9px; background:#1b3742; }.mission-progress i { display:block; height:100%; width: 25%; background:var(--yellow); box-shadow:0 0 7px var(--yellow); transition:width .35s; }.text-button { padding:0; color:var(--cyan); background:none; border:0; font:9px "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; }.text-button span { color:var(--yellow); font-size:13px; margin-left:4px; }

.boss-card { display:none; top:104px; right:26px; width:247px; padding:10px 12px 12px; border-color:rgba(255,98,92,.45); }.boss-card.visible { display:block; }.boss-alert { color:var(--red); font:9px "DM Mono",monospace; letter-spacing:.11em; padding-bottom:9px; border-bottom:1px solid rgba(255,98,92,.18); }.boss-alert span { font-size:13px; }.boss-content { display:flex; align-items:center; gap:10px; padding-top:10px; }.boss-icon { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--red); color:var(--red); font:700 19px "Barlow Condensed"; }.boss-content p { font:700 14px "Barlow Condensed"; letter-spacing:.1em; margin:0 0 5px; }.boss-health { width:145px; height:4px; background:#3a2427; }.boss-health i { display:block; height:100%; width:100%; background:var(--red); box-shadow:0 0 7px var(--red); }.boss-content b { margin-left:auto; color:#ffaaa5; font:10px "DM Mono",monospace; }

.minimap { top:104px; right:26px; width:247px; padding:11px 12px 10px; }.minimap-head { display:flex; justify-content:space-between; margin-bottom:8px; font:9px "DM Mono",monospace; letter-spacing:.1em; color:var(--muted); }.minimap-head b { font-weight:500; color:var(--cyan); }#map-canvas { display:block; width:100%; height:145px; border:1px solid rgba(126,191,201,.22); background:#102a35; }.map-key { display:flex; gap:9px; padding-top:8px; font:8px "DM Mono",monospace; color:var(--muted); }.map-key span { display:flex; align-items:center; gap:4px; }.map-key i { width:5px; height:5px; display:block; border-radius:50%; }.map-key .yellow { background:var(--yellow); }.map-key .red { background:var(--red); }.map-key .cyan { background:var(--cyan); }

.weapon-panel { right:26px; bottom:29px; width:285px; padding:12px 13px 11px; border-right:2px solid var(--cyan); }.weapon-type { display:flex; align-items:center; gap:10px; }.weapon-glyph { display:grid; place-items:center; width:31px; height:26px; border:1px solid rgba(100,224,226,.5); color:var(--cyan); font-size:24px; }.weapon-type p { margin:0; font:700 16px "Barlow Condensed"; letter-spacing:.08em; }.weapon-type small { font:8px "DM Mono",monospace; color:var(--muted); letter-spacing:.09em; }.ammo { position:absolute; right:13px; top:12px; display:flex; align-items:baseline; gap:3px; }.ammo b { font:700 28px "Barlow Condensed"; color:#fff; line-height:23px; }.ammo span,.ammo strong { font:10px "DM Mono",monospace; color:var(--muted); }.ammo strong { font-weight:400; }.weapon-actions { display:flex; gap:10px; margin-top:11px; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font:8px "DM Mono",monospace; }.weapon-actions kbd, .controls kbd, .interaction-prompt kbd { font-family:"DM Mono",monospace; color:var(--yellow); border:1px solid rgba(244,198,78,.55); padding:1px 3px; background:rgba(244,198,78,.06); }

.vehicle-panel { display:none; left:50%; bottom:28px; transform:translateX(-50%); width:245px; padding:11px 13px; border-bottom:2px solid var(--cyan); }.vehicle-panel.visible { display:block; }.vehicle-title { display:flex; align-items:center; gap:9px; margin-top:6px; }.vehicle-symbol { color:var(--cyan); font-size:26px; }.vehicle-title strong { display:block; font:700 17px "Barlow Condensed"; letter-spacing:.1em; }.vehicle-title small { color:var(--muted); font:8px "DM Mono",monospace; }.vehicle-list { display:flex; gap:5px; margin-top:10px; }.vehicle-list span { font:7px "DM Mono",monospace; color:#6d8790; border:1px solid rgba(132,178,188,.18); padding:3px 4px; }.vehicle-list span:last-child { color:var(--cyan); }

.controls { position:fixed; z-index:5; left:50%; bottom:13px; transform:translateX(-50%); display:flex; gap:13px; color:rgba(215,236,240,.68); font:8px "DM Mono",monospace; letter-spacing:.06em; white-space:nowrap; }.controls kbd { color:#e7f1f1; border-color:rgba(220,234,240,.25); }
.crosshair { position:fixed; z-index:5; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%,-50%); pointer-events:none; opacity:.75; }.crosshair i { position:absolute; background:rgba(222,246,244,.9); box-shadow:0 0 4px var(--cyan); }.crosshair i:nth-child(1),.crosshair i:nth-child(2) { width:6px;height:1px;top:10px; }.crosshair i:nth-child(1){left:0}.crosshair i:nth-child(2){right:0}.crosshair i:nth-child(3),.crosshair i:nth-child(4) { height:6px;width:1px;left:10px; }.crosshair i:nth-child(3){top:0}.crosshair i:nth-child(4){bottom:0}
.interaction-prompt { display:none; position:fixed; z-index:8; left:50%; top:61%; transform:translateX(-50%); gap:8px; align-items:center; padding:8px 10px; color:#f7f3df; background:rgba(5,17,28,.9); border:1px solid rgba(244,198,78,.52); font:9px "DM Mono",monospace; letter-spacing:.09em; box-shadow:0 0 20px rgba(244,198,78,.16); }.interaction-prompt.visible { display:flex; }.interaction-prompt kbd { padding:3px 5px; }
#message-stack { position:fixed; z-index:10; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; gap:7px; align-items:center; pointer-events:none; }.toast { color:#fff; background:rgba(5,16,24,.88); border-left:2px solid var(--yellow); padding:8px 12px; font:10px "DM Mono",monospace; letter-spacing:.05em; box-shadow:0 8px 20px rgba(0,0,0,.22); animation:toast-in .25s ease-out, toast-out .4s ease-in 2.5s forwards; }.toast.raid { border-color:var(--red); }.toast.money { border-color:#a5e96b; color:#d5ffb2; }@keyframes toast-in { from{ opacity:0; transform:translateY(8px) }to{opacity:1;transform:none} }@keyframes toast-out { to{ opacity:0; transform:translateY(-9px) } }

.start-screen { position:fixed; z-index:20; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 66% 39%, rgba(29,88,104,.42), transparent 33%), linear-gradient(135deg,rgba(4,15,24,.93),rgba(5,19,30,.7)); transition:opacity .65s, visibility .65s; }.start-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }.start-grid { position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(112,201,211,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(112,201,211,.08) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,black,transparent); }.start-content { width:min(550px, calc(100% - 48px)); text-align:center; position:relative; }.start-content h2 { font-size:clamp(57px,8vw,105px); line-height:.79; color:#effafd; margin:15px 0 23px; text-shadow:0 0 35px rgba(93,216,220,.15); }.start-content h2 em { color:var(--yellow); font-style:normal; }.start-copy { max-width:415px; margin:0 auto 27px; color:#b5cbd0; font-size:13px; line-height:1.7; }.start-content button { padding:14px 20px 13px; min-width:206px; border:1px solid var(--yellow); background:var(--yellow); color:#172029; cursor:pointer; font:800 16px "Barlow Condensed"; letter-spacing:.1em; transition:transform .15s,box-shadow .15s; }.start-content button:hover { transform:translateY(-2px); box-shadow:0 0 22px rgba(244,198,78,.35); }.start-content button span { margin-left:13px; font-size:19px; }.start-features { display:flex; justify-content:center; flex-wrap:wrap; gap:17px; margin-top:22px; color:#83a8ae; font:8px "DM Mono",monospace; letter-spacing:.1em; }.start-features span:before { content:'+'; color:var(--cyan); margin-right:5px; }.start-tip { position:absolute; bottom:26px; left:26px; color:#99aeb4; font:10px "DM Mono",monospace; }.start-tip b { color:var(--yellow); margin-right:7px; }

@media (max-width: 760px) { .topbar { top:12px; left:12px; right:12px; height:52px; padding:0 11px; }.district { display:none; }h1{font-size:23px}.player-card{top:76px;left:12px;width:245px}.minimap{top:76px;right:12px;width:152px;padding:8px}.map-key{display:none}#map-canvas{height:108px}.minimap-head{font-size:7px}.boss-card{top:197px;right:12px;width:190px}.boss-health{width:100px}.mission-panel{left:12px;bottom:12px;width:min(360px,calc(100% - 24px));}.weapon-panel{display:none}.vehicle-panel{bottom:12px;max-width:calc(100% - 24px)}.controls{display:none}.start-tip{display:none}.topbar-right{gap:8px}.mission-panel > p{font-size:10px}.crosshair{top:48%} }