html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;
  font-family:"Arial Black",Arial,Helvetica,sans-serif;-webkit-user-select:none;user-select:none}
#game{position:fixed;inset:0;display:block}
#ui{position:fixed;inset:0;pointer-events:none;color:#fff}
.hidden{display:none!important}

/* screens */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(10,20,40,.88),rgba(0,0,5,.96));pointer-events:auto;text-align:center}
.screen h1{font-size:84px;margin:0;letter-spacing:6px;color:#ffd24a;text-shadow:0 0 24px #ff7b2f,0 4px 0 #b3305a}
.screen h1 span{color:#2fd6c8;text-shadow:0 0 24px #1a8cff,0 4px 0 #0c4d6e}
.screen h2{font-size:42px;letter-spacing:4px;color:#ffd24a}
.tag{color:#9ad;font-style:italic}
.foot{position:absolute;bottom:18px;font-size:11px;color:#678}
.menu{display:flex;flex-direction:column;gap:14px;margin-top:26px}
button{pointer-events:auto;font:inherit;font-size:22px;letter-spacing:2px;padding:10px 46px;cursor:pointer;
  background:#12203a;color:#ffd24a;border:2px solid #ffd24a;border-radius:4px}
button:hover{background:#ffd24a;color:#12203a}
.cols{display:flex;gap:60px;text-align:left;font-size:17px}
.cols ul{list-style:none;padding:0}.cols li{margin:8px 0;color:#cde}
.cols b{color:#ffd24a;display:inline-block;min-width:90px}
.big{font-size:110px!important}
.red{color:#ff3355!important;text-shadow:0 0 30px #a00!important}
.blue{color:#4af!important;text-shadow:0 0 30px #04f!important}
.back{margin-top:20px}

/* HUD */
#hud{position:absolute;inset:0}
#hud-tl{position:absolute;top:16px;left:16px;text-shadow:0 2px 3px #000}
#hud-bars .bar{width:220px;height:12px;background:rgba(0,0,0,.55);border:1px solid #000;margin-bottom:5px;border-radius:3px;overflow:hidden}
.fill{height:100%;width:100%}
.fill.health{background:linear-gradient(#7f7,#2a2)}
.fill.armor{background:linear-gradient(#8cf,#35c)}
#hud-money{font-size:26px;color:#9f9;text-shadow:0 2px 3px #000}
#hud-district{font-size:15px;color:#ffd24a;letter-spacing:2px;margin-top:2px}
#hud-tr{position:absolute;top:16px;right:16px;text-align:right;text-shadow:0 2px 3px #000}
#hud-stars{font-size:26px;letter-spacing:3px;color:#444}
#hud-stars .on{color:#ffd24a;text-shadow:0 0 8px #fa0}
#hud-weapon{font-size:18px;margin-top:6px;color:#fff}
#wpn-ammo{color:#fc6;margin-left:10px}
#minimap-wrap{position:absolute;left:16px;bottom:16px;border:3px solid rgba(0,0,0,.6);border-radius:50%;overflow:hidden;
  width:220px;height:220px;box-shadow:0 0 20px rgba(0,0,0,.6)}
#hud-mission{position:absolute;top:70px;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 4px #000}
#mission-title{font-size:22px;color:#ffd24a;letter-spacing:2px}
#mission-obj{font-size:16px;color:#fff;margin-top:4px}
#mission-timer{font-size:28px;color:#f66;margin-top:4px}
#hud-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:17px;color:#ffe;
  text-shadow:0 2px 4px #000;background:rgba(0,0,0,.35);padding:4px 18px;border-radius:12px}
#hud-hint:empty{display:none}
#toasts{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);text-align:center}
.toast{font-size:18px;margin:4px 0;color:#fff;text-shadow:0 2px 4px #000;animation:tst 4s forwards}
.toast.good{color:#9f9}.toast.bad{color:#f99}
@keyframes tst{0%{opacity:0;transform:translateY(10px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#drunkfx{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 55%,rgba(120,0,160,.0));transition:background 1s}
#mission-list{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto;pointer-events:auto;padding:6px 30px}
.mrow{font-size:17px;color:#cde;text-align:left;border-bottom:1px solid #345;padding:4px}
.mrow b{color:#ffd24a}.mrow.done{color:#7d7}.mrow.locked{color:#566}