/* =========================================================================
   POLICE SIMULATOR — interface stylesheet
   Retro 80s precinct-terminal look: dark station photography, translucent
   blue bars, white condensed type, gold department accents. Squared corners.
   ========================================================================= */
:root {
  --bg: #04070d;
  --bg-2: #08101e;
  --panel: rgba(6, 12, 26, 0.88);
  --panel-2: rgba(10, 20, 42, 0.92);
  --bar: rgba(20, 56, 128, 0.58);
  --bar-hi: rgba(38, 96, 204, 0.86);
  --bar-line: rgba(120, 170, 255, 0.30);
  --line: rgba(150, 180, 230, 0.18);
  --gold: #c9a227;
  --gold-hi: #f0cd5e;
  --text: #f1f3f7;
  --text-dim: #aab5c9;
  --text-mute: #6e7a92;
  --red: #e0453f;
  --green: #45c46f;
  --amber: #eaa53a;
  --blue: #4b8dff;
  --term: #8dffa8;
  --term-dim: #3f8a55;
  --term-bg: #020a05;
  --r-common: #9aa4b2; --r-uncommon: #4fbf6a; --r-rare: #3d8bff; --r-epic: #a65cff; --r-legendary: #f0a12a;
  --f-head: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --f-body: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, sans-serif;
  --f-term: 'VT323', 'Consolas', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--f-body); overflow: hidden; user-select: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
kbd { font-family: var(--f-head); font-size: .72em; border: 1px solid var(--line); padding: 1px 6px; color: var(--text-dim); letter-spacing: .05em; }
.hidden { display: none !important; }

#game-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #000; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 900; transition: opacity .35s ease; }
#fade.on { opacity: 1; }

/* --------------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; display: none; z-index: 10; }
.screen.active { display: block; }
.bg-photo { position: absolute; inset: -4%; background: url(../assets/ui/menu_bg.jpg) center/cover no-repeat;
  filter: brightness(.42) saturate(.7) contrast(1.08); animation: kenburns 60s ease-in-out infinite alternate; }
.bg-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,5,12,.94) 0%, rgba(3,8,20,.70) 42%, rgba(4,10,28,.35) 100%),
              linear-gradient(0deg, rgba(2,4,10,.85) 0%, transparent 35%); }
.bg-photo.dim { filter: brightness(.25) saturate(.6) blur(2px); }
@keyframes kenburns { from { transform: scale(1.0) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
.scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }

/* --------------------------------------------------------------- splash */
.splash-inner { position: absolute; left: 8vw; top: 50%; transform: translateY(-50%); }
.splash-badge { width: 150px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)); margin-bottom: 10px; }
.title-xl { font: 700 clamp(64px, 9vw, 132px)/.9 var(--f-head); letter-spacing: .02em; margin: 0; text-shadow: 0 4px 0 rgba(0,0,0,.45); }
.title-lg { font: 700 clamp(40px, 4.4vw, 64px)/1 var(--f-head); letter-spacing: .03em; margin: 0; }
.title-rule { height: 4px; width: 420px; max-width: 70vw; background: linear-gradient(90deg, var(--gold), var(--gold-hi) 40%, transparent); margin: 18px 0 14px; }
.title-rule.short { width: 260px; margin: 10px 0 8px; }
.splash-sub { font: 500 18px var(--f-head); letter-spacing: .35em; color: var(--text-dim); margin: 0 0 60px; }
.press-key { font: 500 20px var(--f-head); letter-spacing: .3em; color: var(--text); }
.blink { animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* --------------------------------------------------------------- main menu */
.menu-head { position: absolute; left: 6vw; top: 7vh; display: flex; align-items: center; gap: 22px; }
.menu-badge { width: 96px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.8)); }
.menu-tag { font: 500 14px var(--f-head); letter-spacing: .32em; color: var(--text-dim); }
.menu-bars { position: absolute; left: 0; top: 30vh; display: flex; flex-direction: column; gap: 9px; }
.bar { position: relative; display: flex; align-items: center; gap: 18px; width: min(600px, 48vw); height: 56px;
  padding: 0 0 0 6vw; border: 0; border-left: 5px solid transparent; background: var(--bar);
  font: 600 27px var(--f-head); letter-spacing: .09em; text-align: left; color: var(--text);
  box-shadow: inset 0 1px 0 var(--bar-line), inset 0 -1px 0 rgba(0,0,0,.35);
  transition: background .14s, padding .14s, border-color .14s, width .14s; }
.bar small { margin-left: auto; margin-right: 20px; font: 400 13px var(--f-body); letter-spacing: .04em; color: var(--text-dim); }
.bar-num { font: 500 14px var(--f-head); color: var(--gold); letter-spacing: .1em; width: 22px; }
.bar:hover, .bar:focus-visible, .bar.sel { background: var(--bar-hi); border-left-color: var(--gold); padding-left: calc(6vw + 12px); width: min(630px, 50vw); outline: none; }
.bar:disabled { opacity: .38; cursor: default; }
.bar:disabled:hover { background: var(--bar); border-left-color: transparent; padding-left: 6vw; width: min(600px, 48vw); }
.menu-side { position: absolute; right: 4vw; top: 30vh; bottom: 7vh; width: 340px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.side-card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 13px 16px; }
.menu-side .side-card:hover { border-color: var(--bar-line); border-top-color: var(--gold-hi); }
.side-card h4 { font: 600 13px var(--f-head); letter-spacing: .25em; color: var(--gold); margin: 0 0 8px; }
.side-card .big { font: 600 24px var(--f-head); letter-spacing: .04em; }
.side-card .muted { color: var(--text-dim); font-size: 14px; }
.cd-mini { font: 500 22px var(--f-head); letter-spacing: .08em; margin-top: 6px; }
.menu-foot { position: absolute; left: 6vw; right: 4vw; bottom: 3vh; display: flex; justify-content: space-between;
  font: 500 12px var(--f-head); letter-spacing: .25em; color: var(--text-mute); }

/* --------------------------------------------------------------- panels */
.panel-wrap { position: absolute; inset: 5vh 5vw; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--gold); display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(20,56,128,.45), transparent 70%); }
.panel-head h2 { margin: 0; font: 600 32px var(--f-head); letter-spacing: .1em; }
.btn-back { background: transparent; border: 1px solid var(--line); padding: 8px 14px; font: 500 15px var(--f-head); letter-spacing: .15em; }
.btn-back:hover { border-color: var(--gold); color: var(--gold-hi); }
#panel-body { flex: 1; overflow: auto; padding: 22px 26px; }
#panel-body::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 10px; }
#panel-body::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: rgba(120,160,220,.25); }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 10px 18px; font: 500 18px var(--f-head); letter-spacing: .14em; color: var(--text-dim); }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--gold); background: var(--bar); }

.btn { background: var(--bar); border: 1px solid var(--bar-line); padding: 9px 18px; font: 500 16px var(--f-head); letter-spacing: .12em; text-transform: uppercase; transition: background .12s; }
.btn:hover { background: var(--bar-hi); }
.btn.gold { background: linear-gradient(180deg, #d6ad31, #a8841a); color: #1a1406; border-color: #f0cd5e; }
.btn.gold:hover { background: linear-gradient(180deg, #edc54a, #b8921f); }
.btn.red { background: rgba(160, 30, 30, .7); border-color: rgba(255,120,120,.4); }
.btn.red:hover { background: rgba(200, 40, 40, .9); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .4; cursor: default; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text-dim); }
.small { font-size: 13px; }
.notice { border-left: 3px solid var(--amber); background: rgba(234,165,58,.08); padding: 10px 14px; color: var(--text-dim); font-size: 14px; margin: 12px 0; }
.notice.info { border-left-color: var(--blue); background: rgba(75,141,255,.08); }
.notice.bad { border-left-color: var(--red); background: rgba(224,69,63,.08); }

/* options */
.opt-grid { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 12px 26px; align-items: center; max-width: 920px; }
.opt-grid label { font: 500 16px var(--f-head); letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }
.opt-grid .ctl { display: flex; gap: 12px; align-items: center; }
.opt-grid .val { font: 500 16px var(--f-head); min-width: 56px; color: var(--text); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 320px; height: 6px; background: rgba(120,160,220,.22); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; background: var(--gold); border: 0; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 14px; height: 22px; background: var(--gold); border: 0; border-radius: 0; cursor: pointer; }
select, .inp { background: #0a1426; border: 1px solid var(--line); color: var(--text); padding: 7px 10px; font: 500 15px var(--f-body); min-width: 200px; border-radius: 0; }
.seg { display: flex; }
.seg button { background: transparent; border: 1px solid var(--line); margin-right: -1px; padding: 6px 14px; font: 500 14px var(--f-head); letter-spacing: .1em; color: var(--text-dim); }
.seg button.on { background: var(--bar-hi); color: var(--text); border-color: var(--bar-line); }
.keys { display: grid; grid-template-columns: 220px 1fr 220px 1fr; gap: 8px 18px; max-width: 980px; }
.keys div:nth-child(odd) { font: 500 15px var(--f-head); letter-spacing: .08em; color: var(--gold-hi); }

/* save slots */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.slot { background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--bar-line); padding: 16px 18px; }
.slot.has { border-left-color: var(--gold); }
.slot h3 { margin: 0 0 6px; font: 600 20px var(--f-head); letter-spacing: .1em; }
.slot .meta { color: var(--text-dim); font-size: 14px; line-height: 1.5; min-height: 64px; }
.slot .row { margin-top: 10px; }
.slot.bad { border-left-color: var(--red); }

/* --------------------------------------------------------------- shop */
.wallet { font: 600 22px var(--f-head); letter-spacing: .08em; color: var(--gold-hi); }
.shop-layout { display: grid; grid-template-columns: 1fr 430px; gap: 22px; min-height: 100%; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-content: start; }
.card { position: relative; background: var(--panel-2); border: 1px solid var(--line); border-bottom: 3px solid var(--rc, var(--r-common)); padding: 0; text-align: left; transition: transform .1s, border-color .1s; }
.card:hover, .card.sel { border-color: var(--rc); transform: translateY(-2px); }
.card img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: radial-gradient(ellipse at 50% 40%, #1b2a48, #070c18); }
.card .ci { padding: 8px 10px 10px; }
.card .cn { font: 600 16px var(--f-head); letter-spacing: .04em; line-height: 1.15; }
.card .ct { font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .1em; }
.card .cp { font: 600 16px var(--f-head); color: var(--gold-hi); margin-top: 4px; }
.rar { display: inline-block; font: 600 11px var(--f-head); letter-spacing: .15em; padding: 2px 7px; color: #050505; background: var(--rc); }
.own-tag { position: absolute; top: 8px; right: 8px; font: 600 11px var(--f-head); letter-spacing: .15em; background: var(--green); color: #031; padding: 2px 7px; }
.lock-tag { position: absolute; top: 8px; right: 8px; font: 600 11px var(--f-head); letter-spacing: .15em; background: #333c4c; color: var(--text-dim); padding: 2px 7px; }
.time-tag { position: absolute; top: 8px; left: 8px; font: 500 12px var(--f-head); letter-spacing: .06em; background: rgba(0,0,0,.65); padding: 2px 7px; color: var(--amber); }
.detail { background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--rc, var(--gold)); padding: 0 0 18px; position: sticky; top: 0; align-self: start; }
.detail canvas { display: block; width: 100%; height: 300px; background: radial-gradient(ellipse at 50% 45%, #1d2e52, #050912); }
.detail .dbody { padding: 14px 18px 0; }
.detail h3 { margin: 6px 0; font: 600 26px var(--f-head); letter-spacing: .04em; }
.detail p { color: var(--text-dim); line-height: 1.45; margin: 6px 0 12px; }
.countdown-line { font: 500 15px var(--f-head); letter-spacing: .08em; color: var(--amber); margin: 6px 0; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 800; display: flex; align-items: center; justify-content: center; }
.modal { width: 460px; background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 22px 24px; }
.modal h3 { margin: 0 0 8px; font: 600 24px var(--f-head); letter-spacing: .08em; }
.modal p { color: var(--text-dim); line-height: 1.5; }
.loadout { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); margin-bottom: 8px; background: rgba(255,255,255,.02); }
.cust-grid { display: grid; grid-template-columns: 220px 1fr 430px; gap: 18px; }
.cust-list button { display: block; width: 100%; text-align: left; margin-bottom: 6px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pick { background: var(--panel-2); border: 1px solid var(--line); padding: 8px; text-align: left; }
.pick.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pick .sw { height: 26px; margin-bottom: 6px; border: 1px solid rgba(255,255,255,.15); }
.pick span { font: 500 14px var(--f-head); letter-spacing: .04em; }

/* --------------------------------------------------------------- events */
.ev-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 34px 38px; background:
  linear-gradient(110deg, rgba(120,16,22,.55), rgba(10,40,30,.55) 60%, rgba(6,12,26,.6)), url(../assets/ui/menu_bg.jpg) center/cover; }
.ev-hero::before { content: ''; position: absolute; inset: 0; background: rgba(3,6,14,.55); }
.ev-hero > * { position: relative; }
.ev-kicker { font: 500 15px var(--f-head); letter-spacing: .4em; color: var(--gold-hi); }
.ev-title { font: 700 clamp(40px, 5vw, 70px)/1 var(--f-head); letter-spacing: .03em; margin: 10px 0 4px; }
.ev-date { font: 600 24px var(--f-head); letter-spacing: .2em; color: var(--text); }
.countdown { display: flex; gap: 12px; margin: 26px 0 8px; }
.cd-box { width: 120px; background: rgba(0,0,0,.55); border: 1px solid var(--line); border-top: 2px solid var(--gold); text-align: center; padding: 12px 0 8px; }
.cd-box b { display: block; font: 600 52px/1 var(--f-head); letter-spacing: .02em; }
.cd-box span { font: 500 12px var(--f-head); letter-spacing: .3em; color: var(--text-dim); }
.ev-status { font: 600 18px var(--f-head); letter-spacing: .2em; margin-top: 12px; }
.ev-status.live { color: var(--green); }
.ev-status.ended { color: var(--text-mute); }
.ev-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 20px 0; }
.ev-feat { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid #b3262c; padding: 14px 16px; }
.ev-feat h4 { margin: 0 0 4px; font: 600 18px var(--f-head); letter-spacing: .06em; }
.ev-feat p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.4; }
.ev-feat .lk { font: 500 11px var(--f-head); letter-spacing: .2em; color: var(--text-mute); margin-top: 8px; }
.ev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ev-item { background: var(--panel-2); border: 1px solid var(--line); padding: 14px 16px; }
.ev-item h4 { margin: 0; font: 600 20px var(--f-head); letter-spacing: .08em; }
.ev-item .d { color: var(--text-dim); font-size: 14px; margin-top: 4px; }

/* --------------------------------------------------------------- loading */
.loading-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 80vw); text-align: center; }
.loading-badge { width: 120px; margin-bottom: 20px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.3) drop-shadow(0 0 18px rgba(240,205,94,.4)); } }
.loading-title { font: 600 28px var(--f-head); letter-spacing: .3em; margin-bottom: 18px; }
.loading-bar { height: 10px; background: rgba(120,160,220,.15); border: 1px solid var(--line); }
#loading-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width .2s; }
.loading-tip { margin-top: 18px; color: var(--text-dim); font-size: 15px; min-height: 40px; }

/* --------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; font-family: var(--f-head); }
#hud-career { position: absolute; left: 22px; top: 18px; width: 250px; background: rgba(4,8,18,.62); border-left: 3px solid var(--gold); padding: 8px 12px; }
.hc-rank { font: 600 17px var(--f-head); letter-spacing: .14em; }
.hc-xp { height: 5px; background: rgba(255,255,255,.12); margin: 6px 0; }
#hud-xp-fill { height: 100%; width: 0; background: var(--gold); transition: width .4s; }
.hc-cash { font: 500 15px var(--f-head); color: var(--gold-hi); letter-spacing: .08em; }
#hud-objective { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); min-width: 360px; max-width: 560px; text-align: center; background: rgba(4,8,18,.62); border-top: 2px solid var(--blue); padding: 8px 16px; }
.ho-title { font: 600 13px var(--f-head); letter-spacing: .3em; color: var(--blue); }
.ho-text { font: 500 18px var(--f-head); letter-spacing: .04em; margin-top: 2px; }
.ho-dist { font: 400 13px var(--f-body); color: var(--text-dim); }
#hud-clock { position: absolute; right: 22px; top: 18px; text-align: right; background: rgba(4,8,18,.62); padding: 6px 12px; border-right: 3px solid var(--gold); }
#hud-time { font: 600 24px var(--f-head); letter-spacing: .06em; display: block; }
#hud-day { font: 500 12px var(--f-head); letter-spacing: .25em; color: var(--text-dim); }
#hud-radio { position: absolute; right: 22px; top: 88px; width: 360px; display: flex; flex-direction: column; gap: 4px; }
.radio-line { background: rgba(4,8,18,.66); border-left: 3px solid var(--term-dim); padding: 5px 10px; font: 400 14px/1.35 var(--f-body); color: #cfe9d6; animation: slidein .25s ease; }
.radio-line b { color: var(--term); font-weight: 600; font-family: var(--f-head); letter-spacing: .08em; margin-right: 6px; }
@keyframes slidein { from { transform: translateX(14px); opacity: 0; } }
#hud-call { position: absolute; right: 22px; top: 300px; width: 360px; background: rgba(6,12,26,.9); border: 1px solid var(--line); border-top: 3px solid var(--red); padding: 12px 14px; pointer-events: auto; }
#hud-call h4 { margin: 0; font: 600 13px var(--f-head); letter-spacing: .3em; color: var(--red); }
#hud-call .ct { font: 600 20px var(--f-head); margin: 4px 0; letter-spacing: .03em; }
#hud-call .cd { font: 400 14px var(--f-body); color: var(--text-dim); }
#hud-call .row { margin-top: 10px; }
#minimap { position: absolute; left: 22px; bottom: 22px; width: 220px; height: 220px; border: 2px solid rgba(150,180,230,.35); background: rgba(4,8,18,.6); }
#hud-equip { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 6px; }
.eq { width: 86px; height: 52px; background: rgba(4,8,18,.6); border: 1px solid var(--line); border-bottom: 3px solid transparent; padding: 4px 6px; font: 500 12px var(--f-head); letter-spacing: .08em; color: var(--text-dim); position: relative; }
.eq b { position: absolute; right: 6px; top: 3px; color: var(--gold); font-size: 12px; }
.eq.on { border-bottom-color: var(--gold); color: var(--text); background: rgba(20,56,128,.6); }
.eq i { display: block; font-style: normal; font-size: 11px; color: var(--text-mute); margin-top: 16px; }
#hud-prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); background: rgba(4,8,18,.78); border: 1px solid var(--line); padding: 8px 14px; font: 500 17px var(--f-head); letter-spacing: .06em; white-space: nowrap; }
#hud-prompt kbd { color: #111; background: var(--gold-hi); border: 0; font-size: 14px; padding: 2px 7px; margin-right: 8px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
#hud-subtitle { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: 760px; text-align: center; background: rgba(0,0,0,.6); padding: 8px 16px; font: 400 19px/1.35 var(--f-body); }
#hud-subtitle b { color: var(--gold-hi); font-family: var(--f-head); letter-spacing: .06em; font-weight: 500; }
#hud-stamina { position: absolute; right: 22px; bottom: 26px; width: 220px; height: 6px; background: rgba(255,255,255,.12); }
#hud-stamina-fill { height: 100%; width: 100%; background: var(--green); }
#hud-vehicle { position: absolute; right: 18px; bottom: 16px; width: 170px; text-align: center; }
#speedo { width: 150px; height: 150px; }
#veh-flags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.vf { font: 600 11px var(--f-head); letter-spacing: .12em; padding: 2px 6px; background: rgba(4,8,18,.7); color: var(--text-mute); border: 1px solid var(--line); }
.vf.on { color: #fff; border-color: var(--gold); }
.vf.on.red { background: rgba(200,30,30,.8); }
.vf.on.blue { background: rgba(30,80,220,.8); }
#hud-toasts { position: absolute; right: 22px; bottom: 210px; display: flex; flex-direction: column-reverse; gap: 6px; width: 320px; }
.toast { background: rgba(6,12,26,.88); border-left: 3px solid var(--gold); padding: 8px 12px; font: 500 15px var(--f-head); letter-spacing: .05em; animation: slidein .25s ease; }
.toast.xp { border-left-color: var(--gold); }
.toast.bad { border-left-color: var(--red); }
.toast.good { border-left-color: var(--green); }
.toast small { display: block; font: 400 13px var(--f-body); color: var(--text-dim); letter-spacing: 0; }
#hud-fps { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font: 500 12px var(--f-head); color: var(--text-dim); }
#hud-hint { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); font: 500 13px var(--f-head); letter-spacing: .25em; color: var(--text-mute); }
.bubble3d { position: fixed; z-index: 15; transform: translate(-50%, -100%); background: rgba(250,250,245,.92); color: #111; font: 500 14px var(--f-body); padding: 5px 10px; max-width: 260px; pointer-events: none; border-bottom: 2px solid var(--gold); }

/* --------------------------------------------------------------- overlays */
#overlay-root > * { z-index: 60; }
.ov { position: fixed; inset: 0; z-index: 60; }
.ov-dim { background: rgba(2,4,10,.62); }
.pause-box { position: absolute; left: 0; top: 0; bottom: 0; width: min(640px, 52vw); background: linear-gradient(90deg, rgba(3,6,14,.96), rgba(3,6,14,.75)); padding: 12vh 0 0; }
.pause-box h2 { font: 700 54px var(--f-head); letter-spacing: .06em; margin: 0 0 4px 6vw; }
.pause-box .title-rule { margin-left: 6vw; }
.pause-box .menu-bars { position: static; margin-top: 14px; gap: 6px; }
.pause-box { padding-top: 7vh; overflow-y: auto; }
.pause-box .bar { height: 44px; font-size: 21px; }
.msg .who { display: block; font: 600 11px var(--f-head); letter-spacing: .2em; color: var(--gold); margin-bottom: 2px; }
.msg.me .who { color: #cfe0ff; text-align: right; }
.msg.sys.act { color: #9fd7ae; font: 500 13px var(--f-body); letter-spacing: 0; text-transform: none; border-left: 2px solid var(--green); padding: 4px 10px; align-self: stretch; background: rgba(69,196,111,.07); max-width: none; }
#hud-marker { position: absolute; transform: translate(-50%, -100%); text-align: center; font: 600 13px var(--f-head); letter-spacing: .08em; color: #111; pointer-events: none; }
#hud-marker .dia { width: 18px; height: 18px; margin: 0 auto 2px; background: var(--gold-hi); transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
#hud-marker .lab { background: rgba(240,205,94,.92); padding: 1px 6px; }
#hud-help { position: absolute; left: 22px; top: 76px; font: 500 12px var(--f-head); letter-spacing: .14em; color: var(--text-mute); }
.pause-stats { position: absolute; right: 5vw; top: 14vh; width: 380px; }

/* dialogue */
.dlg { position: fixed; right: 0; top: 0; bottom: 0; width: 460px; z-index: 60; background: rgba(4,8,18,.94); border-left: 1px solid var(--line); display: flex; flex-direction: column; font-family: var(--f-body); }
.dlg-head { padding: 16px 18px; border-bottom: 1px solid var(--line); border-top: 3px solid var(--gold); }
.dlg-name { font: 600 24px var(--f-head); letter-spacing: .05em; }
.dlg-role { font: 500 13px var(--f-head); letter-spacing: .2em; color: var(--text-dim); }
.dlg-mood { display: flex; gap: 14px; margin-top: 8px; font: 500 12px var(--f-head); letter-spacing: .12em; color: var(--text-mute); }
.meter { width: 70px; height: 5px; background: rgba(255,255,255,.12); display: inline-block; vertical-align: middle; margin-left: 6px; }
.meter i { display: block; height: 100%; background: var(--green); }
.dlg-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; user-select: text; }
.msg { max-width: 86%; padding: 9px 12px; line-height: 1.42; font-size: 15px; }
.msg.npc { align-self: flex-start; background: rgba(255,255,255,.07); border-left: 3px solid var(--gold); }
.msg.me { align-self: flex-end; background: rgba(38,96,204,.55); border-right: 3px solid var(--blue); }
.msg.sys { align-self: center; font: 500 12px var(--f-head); letter-spacing: .15em; color: var(--text-mute); background: transparent; text-transform: uppercase; }
.msg .act { display: block; font-style: italic; color: var(--text-dim); font-size: 13px; margin-top: 3px; }
.typing { color: var(--text-mute); font-style: italic; font-size: 14px; }
.dlg-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.dlg-quick button { background: transparent; border: 1px solid var(--line); padding: 5px 9px; font: 500 13px var(--f-head); letter-spacing: .06em; color: var(--text-dim); }
.dlg-quick button:hover { border-color: var(--gold); color: var(--text); }
.dlg-quick button.warn { border-color: rgba(224,69,63,.5); color: #ffb3ae; }
.dlg-input { display: flex; gap: 6px; padding: 12px 14px 16px; border-top: 1px solid var(--line); }
.dlg-input input { flex: 1; background: #0a1426; border: 1px solid var(--line); color: var(--text); padding: 10px 12px; font: 400 15px var(--f-body); outline: none; }
.dlg-input input:focus { border-color: var(--bar-line); }
.mic { width: 44px; background: var(--bar); border: 1px solid var(--bar-line); font: 600 13px var(--f-head); }
.mic.on { background: var(--red); }
.dlg-foot { padding: 0 14px 10px; font-size: 12px; color: var(--text-mute); }

/* MDT terminal */
.mdt { position: fixed; inset: 6vh 8vw; z-index: 60; background: var(--term-bg); border: 2px solid #1d4a2a; box-shadow: 0 0 0 6px #0b0f0c, 0 0 60px rgba(60,255,120,.12) inset; font-family: var(--f-term); color: var(--term); display: flex; flex-direction: column; }
.mdt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.mdt-head { display: flex; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid #1d4a2a; font-size: 24px; letter-spacing: .06em; }
.mdt-tabs { display: flex; gap: 2px; padding: 8px 14px 0; }
.mdt-tabs button { background: transparent; border: 1px solid #1d4a2a; border-bottom: 0; color: var(--term-dim); font: 22px var(--f-term); padding: 4px 14px; }
.mdt-tabs button.on { background: #0b2a15; color: var(--term); }
.mdt-body { flex: 1; overflow: auto; padding: 16px 20px; font-size: 22px; line-height: 1.25; border-top: 1px solid #1d4a2a; user-select: text; }
.mdt-body input { background: #031a0b; border: 1px solid var(--term-dim); color: var(--term); font: 22px var(--f-term); padding: 3px 8px; outline: none; }
.mdt-body button { background: #0b2a15; border: 1px solid var(--term-dim); color: var(--term); font: 22px var(--f-term); padding: 2px 12px; }
.mdt-body button:hover { background: #134a24; }
.mdt-body .warn { color: #ffcf6b; }
.mdt-body .alert { color: #ff7a6b; }
.mdt-body table { border-collapse: collapse; }
.mdt-body td { padding: 2px 18px 2px 0; vertical-align: top; }
.mdt-body hr { border: 0; border-top: 1px dashed var(--term-dim); }
.mdt-foot { padding: 6px 18px; border-top: 1px solid #1d4a2a; font-size: 18px; color: var(--term-dim); }

/* ID card */
.idcard { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 70; width: 440px; background: linear-gradient(135deg, #dfe8f2, #b9c9db); color: #10203a; border: 1px solid #fff; box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 16px 18px; font-family: var(--f-body); }
.idcard .st { font: 700 15px var(--f-head); letter-spacing: .2em; color: #1b3a78; border-bottom: 2px solid #1b3a78; padding-bottom: 4px; margin-bottom: 10px; display: flex; justify-content: space-between; }
.idcard .grid { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.idcard .ph { width: 110px; height: 130px; background: linear-gradient(180deg, #6d7f96, #3b4a5f); display: flex; align-items: flex-end; justify-content: center; font: 600 46px var(--f-head); color: rgba(255,255,255,.65); }
.idcard dl { margin: 0; display: grid; grid-template-columns: 90px 1fr; gap: 3px 8px; font-size: 14px; }
.idcard dt { font: 600 11px var(--f-head); letter-spacing: .12em; color: #44597a; padding-top: 2px; }
.idcard dd { margin: 0; font-weight: 600; }

/* full map */
.bigmap { position: fixed; inset: 5vh 8vw; z-index: 60; background: rgba(4,8,18,.96); border: 1px solid var(--line); border-top: 3px solid var(--gold); display: flex; flex-direction: column; }
.bigmap canvas { flex: 1; width: 100%; height: 100%; cursor: crosshair; }
.bigmap .legend { padding: 8px 16px; font: 500 13px var(--f-head); letter-spacing: .1em; color: var(--text-dim); display: flex; gap: 18px; }
.lg { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }

/* quit screen */
.quit-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.quit-box h2 { font: 700 46px var(--f-head); letter-spacing: .1em; margin: 0 0 10px; }