@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&family=Barlow:wght@400;600&display=swap";:root{--hud-font:"Barlow Condensed", "Arial Narrow", Impact, sans-serif;--body-font:"Barlow", system-ui, sans-serif;--accent:#f2c94c;--money:#7ed957;--danger:#e0433a}*{box-sizing:border-box}html,body{width:100%;height:100%;font-family:var(--body-font);color:#fff;background:#000;margin:0;padding:0;overflow:hidden}canvas#game{outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}#hud{pointer-events:none;font-family:var(--hud-font);text-shadow:0 2px 4px #000000e6,0 0 2px #000;position:fixed;inset:0}#hud-topright{text-align:right;position:absolute;top:18px;right:22px}#wanted{letter-spacing:3px;color:#ffffff47;height:30px;font-size:28px}#wanted .star{transition:color .15s;display:inline-block}#wanted .star.on{color:#fff;text-shadow:0 0 10px #ffffffb3,0 2px 4px #000}#wanted.flash .star.on{animation:.5s infinite alternate wantedflash}@keyframes wantedflash{0%{color:#fff}to{color:#ff4a3d}}#money{color:var(--money);letter-spacing:1px;margin-top:4px;font-size:34px;font-weight:700}#money.gain{animation:.4s ease-out pop}@keyframes pop{0%{transform:scale(1.25)}to{transform:scale(1)}}#clock{color:#ddd;font-size:20px;font-weight:500}#ammo{color:#eee;margin-top:10px;font-size:22px;font-weight:700}#ammo-count{color:#bbb;margin-left:10px;font-weight:500}#hud-bottomleft{position:absolute;bottom:22px;left:22px}#minimap-wrap{background:#101418;border:2px solid #000000a6;border-radius:6px;width:256px;height:256px;position:relative;overflow:hidden;box-shadow:0 4px 18px #0009}#minimap{width:100%;height:100%;display:block}#minimap-compass{color:#fff;font-size:14px;font-weight:900;position:absolute;top:4px;left:50%;transform:translate(-50%)}#bars{gap:4px;width:256px;margin-top:8px;display:flex}.bar{background:#0009;border:1px solid #000c;border-radius:2px;flex:1;height:9px;overflow:hidden}.bar>div{width:100%;height:100%;transition:width .2s}.bar.health>div{background:#45b04f}.bar.armor>div{background:#4aa3e0;width:0}.bar.stamina>div{background:#d9c34a}#streetname{color:#fff;opacity:0;font-size:22px;font-weight:700;transition:opacity .4s;position:absolute;bottom:316px;left:22px}#streetname.show{opacity:1}#streetname #district{color:var(--accent);letter-spacing:2px;text-transform:uppercase;font-size:15px;font-weight:500;display:block}#objective{color:#fff;text-align:center;border-left:4px solid var(--accent);background:#0000008c;border-radius:4px;max-width:70vw;padding:8px 18px;font-size:22px;font-weight:500;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}#objective b{color:var(--accent);font-weight:700}#notify{flex-direction:column;gap:6px;display:flex;position:absolute;top:22px;left:22px}#notify .toast{border-left:4px solid var(--accent);background:#0009;border-radius:4px;max-width:380px;padding:8px 14px;font-size:18px;animation:.3s ease-out toastin}@keyframes toastin{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:none}}#subtitle{font-family:var(--body-font);color:#fff;text-align:center;background:#00000080;border-radius:4px;max-width:70vw;padding:6px 14px;font-size:20px;position:absolute;bottom:110px;left:50%;transform:translate(-50%)}#subtitle b{color:var(--accent)}#speedo{color:#fff;font-size:44px;font-weight:900;position:absolute;bottom:22px;right:22px}#speedo .unit{color:#bbb;margin-left:6px;font-size:16px;font-weight:500}#speedo #gear{color:#999;text-align:right;font-size:15px;font-weight:500;display:block}#radio{text-align:right;color:#ddd;font-size:16px;position:absolute;bottom:90px;right:22px}#radio #radio-name{color:var(--accent);font-size:20px;font-weight:700;display:block}#crosshair{border:2px solid #ffffffd9;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:50%;left:50%;box-shadow:0 0 4px #000}#hint{color:#ddd;opacity:0;background:#00000073;border-radius:4px;padding:4px 12px;font-size:18px;transition:opacity .3s;position:absolute;top:20px;left:50%;transform:translate(-50%)}#hint.show{opacity:1}#damage-vignette{pointer-events:none;opacity:0;background:radial-gradient(#f000 45%,#c80000bf 100%);transition:opacity .15s;position:absolute;inset:0}#mission-title{letter-spacing:3px;color:var(--accent);text-transform:uppercase;text-align:center;font-size:56px;font-weight:900;animation:4s ease-in-out forwards titlein;position:absolute;top:20%;left:50%;transform:translate(-50%)}#mission-title small{color:#fff;letter-spacing:2px;font-size:22px;font-weight:500;display:block}@keyframes titlein{0%{opacity:0;transform:translate(-50%,20px)}10%{opacity:1;transform:translate(-50%)}85%{opacity:1}to{opacity:0}}#bigmsg{letter-spacing:4px;text-transform:uppercase;text-align:center;font-size:72px;font-weight:900;position:absolute;top:40%;left:50%;transform:translate(-50%)}#bigmsg.fail{color:var(--danger)}#bigmsg.pass{color:var(--money)}#bigmsg small{color:#fff;letter-spacing:2px;font-size:24px;font-weight:500;display:block}#fps{color:#0f0;pointer-events:none;z-index:30;background:#00000080;padding:2px 6px;font:12px monospace;position:fixed;top:6px;left:50%;transform:translate(-50%)}#mapscreen{z-index:10;background:#06080ced;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#bigmap{cursor:crosshair;border:2px solid #333;max-width:96vw;max-height:88vh;box-shadow:0 10px 40px #000}#mapscreen-legend{font-family:var(--hud-font);letter-spacing:2px;color:#ccc;margin-top:10px;font-size:18px}#pause{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.panel{text-align:center;min-width:380px}.panel h1{font-family:var(--hud-font);letter-spacing:6px;color:var(--accent);margin:0 0 20px;font-size:64px;font-weight:900}.menu-items{flex-direction:column;align-items:center;gap:8px;display:flex}.menu-items button{font-family:var(--hud-font);letter-spacing:2px;text-transform:uppercase;color:#fff;cursor:pointer;background:#ffffff0f;border:2px solid #ffffff26;min-width:320px;padding:10px 40px;font-size:26px;font-weight:700;transition:all .12s}.menu-items button:hover:not(:disabled){background:var(--accent);color:#111;border-color:var(--accent)}.menu-items button:disabled{opacity:.35;cursor:default}#settings-panel,#controls-panel{text-align:left;background:#0006;border-radius:6px;margin-top:18px;padding:14px 18px}#settings-panel label{justify-content:space-between;align-items:center;gap:12px;margin:8px 0;font-size:16px;display:flex}#settings-panel input[type=range]{width:180px}#controls-panel table{border-collapse:collapse;width:100%;font-size:16px}#controls-panel td{padding:4px 8px}#controls-panel td:first-child{font-family:var(--hud-font);color:var(--accent);letter-spacing:1px;font-weight:700}#title{z-index:25;background:#05070a;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#title-bg{opacity:.92;background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}#title-bg:after{content:"";background:linear-gradient(#00000059,#000000bf);position:absolute;inset:0}#title-content{text-align:center;position:relative}#title-logo{filter:drop-shadow(0 10px 30px #000c);width:min(720px,80vw)}#title-tagline{font-family:var(--hud-font);letter-spacing:3px;color:#ddd;text-transform:uppercase;margin:8px 0 28px;font-size:24px}#title-footer{color:#999;margin-top:30px;font-size:13px}#loading{z-index:40;background-color:#07090d;background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}#loading:before{content:"";background:linear-gradient(#0003 40%,#000000e6 100%);position:absolute;inset:0}#loading-inner{text-align:center;width:min(720px,90vw);margin-bottom:8vh;position:relative}#loading-title{font-family:var(--hud-font);letter-spacing:8px;color:var(--accent);font-size:42px;font-weight:900}#loading-bar{background:#ffffff1f;border-radius:5px;height:10px;margin:14px 0 10px;overflow:hidden}#loading-fill{background:var(--accent);width:0;height:100%;transition:width .2s}#loading-text{color:#ddd;font-size:16px}#loading-tip{color:#999;min-height:20px;margin-top:8px;font-size:14px}#loading.fade{animation:.8s forwards fadeout}@keyframes fadeout{to{opacity:0;visibility:hidden}}@media (max-width:800px){#minimap-wrap{width:160px;height:160px}#bars{width:160px}#money{font-size:26px}#speedo{font-size:32px}.menu-items button{min-width:240px;font-size:20px}}
