:root{
  --navy:#0a1020; --navy2:#111a30; --steel:#1b2740; --line:#2b3b5c;
  --gold:#e7b53c; --gold2:#c9962a; --blue:#3b7dd8; --red:#e5484d; --green:#3fb27f;
  --ink:#e8eef7; --dim:#8ea2c4; --glass:rgba(14,22,40,.72);
  --shadow:0 10px 40px rgba(0,0,0,.55);
  --mono:'Consolas','SF Mono',ui-monospace,monospace;
  --disp:'Rajdhani','Bebas Neue','Arial Narrow',sans-serif;
}
@font-face{font-family:'PPfont';src:local('Rajdhani'),local('Oswald'),local('Impact');}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;}
html,body{height:100%;background:#05070d;overflow:hidden;color:var(--ink);
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif;letter-spacing:.3px;}
#game-root{position:fixed;inset:0;}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0a0e16;image-rendering:auto;}
.hidden{display:none !important;}

.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-family:var(--disp);}
#hud-top{position:absolute;top:16px;left:16px;right:16px;display:flex;gap:12px;align-items:flex-start;}
#badge-panel{display:flex;gap:12px;align-items:center;padding:10px 16px;}
.badge-shield{width:44px;height:52px;display:grid;place-items:center;font-weight:800;font-size:13px;
  color:#1a1206;background:linear-gradient(160deg,#f3d27a,var(--gold),#9c6e14);
  clip-path:polygon(50% 0,100% 22%,100% 68%,50% 100%,0 68%,0 22%);
  text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:inset 0 0 8px rgba(0,0,0,.4);}
.badge-info #hud-rank{font-size:19px;font-weight:700;line-height:1;}
.badge-info #hud-unit{font-size:12px;color:var(--dim);margin-top:3px;letter-spacing:1px;}
#clock-panel{padding:10px 18px;text-align:center;}
#hud-time{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:2px;}
#hud-day{font-size:11px;color:var(--dim);letter-spacing:1px;}
.heat{margin-top:3px;font-size:14px;letter-spacing:2px;color:#3a4a63;min-height:16px;}
.heat .on{color:#e5484d;text-shadow:0 0 8px rgba(229,72,77,.7);}
.heat .lbl{font-size:9px;color:#e5484d;letter-spacing:2px;margin-left:6px;vertical-align:middle;}
#stats-panel{margin-left:auto;display:flex;gap:20px;padding:10px 20px;}
.stat{display:flex;flex-direction:column;align-items:center;min-width:44px;}
.stat-label{font-size:10px;color:var(--dim);letter-spacing:1.5px;}
.stat span:last-child,.stat #hud-stops,.stat #hud-tickets,.stat #hud-arrests,.stat #hud-xp{font-size:22px;font-weight:700;color:var(--gold);}

#objective-panel{position:absolute;top:100px;left:16px;padding:10px 16px;max-width:320px;border-left:3px solid var(--gold);}
.obj-title{font-size:10px;color:var(--gold);letter-spacing:2px;margin-bottom:2px;}
#hud-objective{font-size:15px;color:var(--ink);}

#vitals{position:absolute;bottom:20px;left:20px;display:flex;flex-direction:column;gap:8px;width:220px;}
.vital-bar label{font-size:10px;color:var(--dim);letter-spacing:2px;}
.vital-bar .bar{height:9px;background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:2px;}
.fill{height:100%;width:100%;transition:width .25s ease;}
.fill.health{background:linear-gradient(90deg,#e5484d,#ff7a4d);}
.fill.stamina{background:linear-gradient(90deg,#3b7dd8,#3fb27f);}

#dash-panel{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 26px;display:flex;flex-direction:column;align-items:center;gap:6px;}
#speedo{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;line-height:.9;}
#speedo .unit{font-size:14px;color:var(--dim);margin-left:6px;}
#veh-indicators{display:flex;gap:10px;}
.ind{font-size:11px;letter-spacing:1.5px;padding:3px 10px;border-radius:20px;border:1px solid var(--line);color:var(--dim);}
.ind.on{color:#fff;}
#ind-lights.on{background:linear-gradient(90deg,var(--red),var(--blue));border-color:transparent;animation:flash .5s steps(2) infinite;}
#ind-siren.on{background:var(--red);border-color:transparent;}
@keyframes flash{50%{filter:hue-rotate(180deg);}}

#minimap{position:absolute;bottom:20px;right:20px;width:210px;height:210px;border-radius:50%;
  border:3px solid var(--line);box-shadow:var(--shadow),inset 0 0 30px rgba(0,0,0,.6);background:#0b1220;}

#prompt{position:absolute;left:50%;bottom:38%;transform:translateX(-50%);
  background:var(--glass);border:1px solid var(--gold);border-radius:30px;padding:10px 20px;
  font-size:15px;box-shadow:var(--shadow);backdrop-filter:blur(10px);}
#prompt b{display:inline-block;background:var(--gold);color:#1a1206;border-radius:6px;padding:1px 8px;margin:0 4px;font-weight:800;}

#notifications{position:absolute;top:150px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;width:320px;}
.notif{background:var(--glass);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;
  padding:8px 14px;font-size:14px;box-shadow:var(--shadow);animation:slideIn .35s ease;max-width:100%;}
.notif.good{border-left-color:var(--green);} .notif.bad{border-left-color:var(--red);} .notif.gold{border-left-color:var(--gold);}
@keyframes slideIn{from{opacity:0;transform:translateX(30px);}}

#radio-log{position:absolute;bottom:20px;right:245px;width:300px;max-height:150px;padding:8px 12px;overflow:hidden;}
.radio-title{font-size:11px;color:var(--red);letter-spacing:2px;margin-bottom:4px;}
#radio-lines{font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.5;}
#radio-lines .rl{opacity:.9;} #radio-lines .rl b{color:var(--gold);}

/* ---------- Overlay / Menus ---------- */
#overlay{position:absolute;inset:0;pointer-events:none;z-index:20;}
#overlay > *{pointer-events:auto;}
#fade{position:absolute;inset:0;background:#05070d;z-index:40;transition:opacity .6s ease;}
#fade.show{opacity:1;} #fade:not(.show){opacity:0;}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(20,32,60,.4),rgba(5,7,13,.94));animation:fadeIn .5s ease;}
@keyframes fadeIn{from{opacity:0;}}

.menu-title{font-family:var(--disp);font-size:84px;font-weight:800;letter-spacing:10px;line-height:.9;
  background:linear-gradient(180deg,#fff,#9db4dd 60%,#3b7dd8);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 8px 40px rgba(59,125,216,.35);}
.menu-sub{font-size:16px;color:var(--gold);letter-spacing:8px;margin-top:2px;margin-bottom:40px;text-transform:uppercase;}
.menu-strip{position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--blue) 0 40px,#fff 40px 80px,var(--red) 80px 120px,#0a0e16 120px 130px);opacity:.85;}
.menu-strip.bottom{top:auto;bottom:0;}

.menu-list{display:flex;flex-direction:column;gap:12px;width:320px;}
.menu-btn{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:3px;color:var(--ink);
  background:linear-gradient(100deg,rgba(27,39,64,.9),rgba(14,22,40,.7));border:1px solid var(--line);
  border-left:4px solid var(--line);border-radius:8px;padding:14px 22px;text-align:left;cursor:pointer;
  transition:border-color .2s,transform .15s,background .2s,box-shadow .2s;text-transform:uppercase;}
.menu-btn:hover{border-left-color:var(--gold);transform:translateX(8px);background:linear-gradient(100deg,rgba(45,62,98,.95),rgba(20,30,54,.8));box-shadow:-8px 0 24px rgba(231,181,60,.12);}
.menu-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.menu-foot{position:absolute;bottom:22px;font-size:12px;color:var(--dim);letter-spacing:2px;}

/* Modal panels */
.modal-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,5,10,.6);backdrop-filter:blur(3px);animation:fadeIn .25s ease;}
.modal{width:min(620px,92vw);max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--navy2),var(--navy));
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(59,125,216,.12),transparent);}
.modal-head h2{font-family:var(--disp);font-size:24px;letter-spacing:2px;font-weight:700;}
.modal-head .tag{margin-left:auto;font-size:11px;color:var(--gold);letter-spacing:2px;border:1px solid var(--gold2);padding:3px 10px;border-radius:20px;}
.modal-body{padding:20px 22px;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);flex-wrap:wrap;}

.btn{font-family:var(--disp);font-size:15px;letter-spacing:1.5px;font-weight:600;cursor:pointer;border-radius:8px;
  padding:11px 20px;border:1px solid var(--line);background:var(--steel);color:var(--ink);text-transform:uppercase;
  transition:transform .12s,filter .2s,background .2s;}
.btn:hover{transform:translateY(-2px);filter:brightness(1.15);}
.btn.primary{background:linear-gradient(100deg,var(--blue),#2a5fb0);border-color:transparent;}
.btn.gold{background:linear-gradient(100deg,var(--gold),var(--gold2));border-color:transparent;color:#1a1206;}
.btn.danger{background:linear-gradient(100deg,var(--red),#b3373b);border-color:transparent;}
.btn.good{background:linear-gradient(100deg,var(--green),#2b8a63);border-color:transparent;}
.btn.ghost{background:transparent;}

.dlg-line{margin:6px 0;font-size:16px;line-height:1.45;}
.dlg-line.officer{color:var(--blue);} .dlg-line.officer b{color:#7fb0ff;}
.dlg-line.driver{color:var(--ink);} .dlg-line.driver b{color:var(--gold);}
.subject-card{display:flex;gap:16px;align-items:center;padding:14px;background:rgba(0,0,0,.25);border-radius:10px;border:1px solid var(--line);margin-bottom:14px;}
.subject-avatar{width:70px;height:70px;border-radius:10px;flex:0 0 auto;border:1px solid var(--line);}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-size:13px;}
.kv .k{color:var(--dim);letter-spacing:1px;} .kv .v{color:var(--ink);}
.mood{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;letter-spacing:1px;border:1px solid var(--line);}

/* search grid */
.charge-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;}
.charge-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);transition:.15s;}
.charge-opt:hover{border-color:var(--gold);}
.charge-opt input{accent-color:var(--gold);width:16px;height:16px;flex:0 0 auto;}

.search-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.search-slot{background:rgba(0,0,0,.3);border:1px dashed var(--line);border-radius:10px;height:92px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.2s;position:relative;}
.search-slot:hover{border-color:var(--gold);background:rgba(231,181,60,.06);}
.search-slot.done{cursor:default;border-style:solid;}
.search-slot .lbl{font-size:11px;color:var(--dim);letter-spacing:1px;}
.search-slot .find{font-size:13px;font-weight:700;text-align:center;padding:0 6px;}
.search-slot .find.contraband{color:var(--red);} .search-slot .find.clean{color:var(--green);}
.slot-icon{width:34px;height:34px;opacity:.85;}

/* citation form */
.cite{font-family:var(--mono);background:#f4f1e6;color:#1a1a1a;border-radius:8px;padding:18px;line-height:1.7;font-size:13px;}
.cite h3{font-family:var(--disp);letter-spacing:3px;text-align:center;border-bottom:2px solid #1a1a1a;padding-bottom:6px;margin-bottom:10px;}
.cite .row{display:flex;justify-content:space-between;border-bottom:1px dotted #999;}
.cite .row b{color:#7a1010;}

/* computer / MDT */
.mdt{background:#02101a;border:1px solid #0c3;border-radius:10px;font-family:var(--mono);color:#5df58a;overflow:hidden;}
.mdt-bar{display:flex;gap:2px;background:#04202f;padding:6px;}
.mdt-tab{flex:1;text-align:center;padding:8px;font-size:12px;letter-spacing:1px;color:#3aa;cursor:pointer;border-radius:6px;}
.mdt-tab.active{background:#0c3a2a;color:#7fffb0;}
.mdt-screen{padding:16px;min-height:240px;font-size:13px;line-height:1.6;}
.mdt-screen .rec{border-bottom:1px solid #073;padding:6px 0;}
.mdt-screen .warn{color:#ff5b5b;} .mdt-screen .ok{color:#5df58a;}

.notif-center{position:absolute;top:0;left:0;}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.field label{font-size:12px;color:var(--dim);letter-spacing:1px;}
.field select,.field textarea,.field input{background:#0b1220;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:10px;font-family:inherit;font-size:14px;}
.grade{font-size:72px;font-weight:800;font-family:var(--disp);text-align:center;background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.rowline{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px;}
.rowline .v{color:var(--gold);font-weight:700;}
.hint{font-size:12px;color:var(--dim);margin-top:8px;}
.kbd{display:inline-block;background:#0b1220;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 8px;font-family:var(--mono);font-size:12px;color:var(--gold);margin:0 2px;}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;background:#05070d;z-index:60;}
.loading .bar{width:280px;height:6px;background:#111a30;border-radius:6px;overflow:hidden;}
.loading .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--gold));transition:width .2s;}
.loading .lt{font-family:var(--disp);letter-spacing:6px;color:var(--gold);font-size:14px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.optrow{display:flex;align-items:center;gap:12px;margin:10px 0;}
.optrow label{flex:1;font-size:14px;} .optrow input[type=range]{flex:1;}
.chip{display:inline-block;padding:4px 12px;border-radius:20px;border:1px solid var(--line);font-size:12px;margin:2px;cursor:pointer;}
.chip.sel{background:var(--blue);border-color:transparent;color:#fff;}
.chip.locked{opacity:.45;cursor:not-allowed;border-style:dashed;}