/* ============ RÉVEILLON CITY UI ============ */
:root{
  /* Brand palette (2026-10-29). Every UI colour derives from these six. */
  --rc-pink:#FF00A8;      /* Rosa Neon */
  --rc-magenta:#E6007D;   /* Magenta */
  --rc-sunset:#FF8A3D;    /* Laranja Sunset */
  --rc-gold:#FFD166;      /* Amarelo Dourado */
  --rc-purple:#6A00FF;    /* Roxo Neon */
  --rc-night:#0B0F2B;     /* Azul Noturno */
  --rc-gradient:linear-gradient(100deg,var(--rc-purple),var(--rc-pink) 52%,var(--rc-sunset));
  --accent:var(--rc-pink);
  --accent2:var(--rc-gold);
  --hp:#4ade80;
  --ar:#5bb8ff;
  --bad:#ff4d5a;
  --ink:#e9eef5;
  --panel:rgba(11,15,43,.9);
  --line:rgba(255,255,255,.12);
  --fontd:"Bahnschrift","DIN Alternate","Arial Narrow",Impact,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent2);outline-offset:4px}
.city-eyebrow{font-size:10px;letter-spacing:3px;color:var(--accent);margin-bottom:14px}
.city-districts{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:20px 0 8px}
.city-districts span{padding:6px 9px;border:1px solid var(--line);border-radius:3px;font-size:11px;color:#a6a1ca}
#start-screen{background:linear-gradient(110deg,rgba(7,5,18,.92),rgba(5,7,20,.62));backdrop-filter:blur(3px)}
#start-screen .panel{border-top:3px solid var(--accent);background:linear-gradient(135deg,rgba(13,9,36,.94),rgba(7,10,28,.94))}
#city-status{font-size:12px;color:#b8b4d5;margin-top:12px;letter-spacing:1px}
#performance{margin-top:6px;font-size:11px;color:#958ec0}
#wardrobe-screen{z-index:35}
.panel.wardrobe-panel{width:min(1240px,96vw);min-width:0;padding:22px 26px;max-height:96vh;overflow:auto}
.wardrobe-heading{display:flex;gap:15px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:20px}
.wardrobe-heading h2{font-size:22px;letter-spacing:2px}
.wardrobe-free{font-size:10px;color:var(--accent);letter-spacing:1px;white-space:nowrap}
.wardrobe-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:24px;text-align:left}
.wardrobe-preview{border:1px solid var(--line);border-radius:8px;padding:15px;background:radial-gradient(ellipse at 50% 40%,#201555,#090c23 75%)}
#look-preview{display:block;width:100%;height:300px;max-height:36vh}
.asset-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.asset-tabs button{font:inherit;border:1px solid var(--line);border-radius:5px;color:#a6a1ca;background:#0b102d;padding:8px 12px;cursor:pointer}
.asset-tabs button[aria-selected="true"]{background:#1f1452;border-color:var(--accent);color:#ecfff7}
.character-filters{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.character-filters label{font-size:11px;color:#a6a1ca;display:grid;gap:7px}
.character-filters input,.character-filters select{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:5px;background:#0b102d;color:var(--ink);font:inherit;font-size:13px}
.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:56vh;overflow-y:auto;padding:8px 5px 5px 0;scrollbar-color:#900c60 #0b0f2c}
.character-card{font:inherit;text-align:left;color:var(--ink);background:#120c31;border:1px solid var(--line);border-radius:6px;cursor:pointer;overflow:hidden;min-width:0;padding-bottom:10px;transition:border-color .15s,background .15s}
.character-card:hover{border-color:#6e65a8;background:#1a1146}
.character-card[aria-pressed="true"]{border:2px solid var(--accent);background:#1a1146}
.character-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:radial-gradient(#212750,#0b0f2c)}
.character-card strong,.character-card small{display:block;margin:8px 9px 0;overflow-wrap:anywhere}
.character-card strong{font-size:12px;font-weight:600}.character-card small{font-size:10px;color:#9c96c4}
.asset-symbol{height:70px;display:grid;place-items:center;font-size:35px;color:var(--accent)}
.wardrobe-preview h3{font-size:19px;color:#eefff8;margin:7px 0}
.wardrobe-preview .btn{font-size:12px;letter-spacing:1px;padding:11px}
.wardrobe-preview .dim{font-size:11px;line-height:1.5;margin:8px 0 12px}
.wardrobe-preview #character-status{min-height:32px}
.wardrobe-preview .setting{margin:14px 0;font-size:12px}
@media(max-width:650px){
  .wardrobe-layout{grid-template-columns:1fr;gap:18px}
  .wardrobe-heading{display:block}.wardrobe-free{display:block;margin-bottom:14px}
  #look-preview{height:230px}.panel.wardrobe-panel{padding:20px}
  .character-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:32vh}
  .wardrobe-layout{display:flex;flex-direction:column-reverse}.character-filters{grid-template-columns:1fr 1fr}
  .panel{min-width:0;width:94vw;padding:24px}
  .tab{padding:9px 7px;font-size:11px;letter-spacing:1px}
  .death-inner h1{font-size:50px;letter-spacing:4px}
  #city-status{max-width:180px}.tag{letter-spacing:2px}
}
html,body{height:100%;overflow:hidden;background:#05070c}
body{font-family:var(--fontd);color:var(--ink);user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0}
canvas#canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}
.dim{opacity:.55;font-size:13px;margin-top:10px;letter-spacing:.5px}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}

#crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);
  transition:opacity .12s}
#crosshair .ch{position:absolute;background:rgba(255,255,255,.9);box-shadow:0 0 2px #000;
  transition:transform .06s ease-out}
.ch-t{left:50%;top:0;width:2px;height:9px;margin-left:-1px}
.ch-b{left:50%;bottom:0;width:2px;height:9px;margin-left:-1px}
.ch-l{top:50%;left:0;height:2px;width:9px;margin-top:-1px}
.ch-r{top:50%;right:0;height:2px;width:9px;margin-top:-1px}
.ch-dot{position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;background:rgba(255,255,255,.75)}
#crosshair.hostile .ch{background:#ff6a6a}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(45deg);
  opacity:0}
#hitmarker::before,#hitmarker::after{content:"";position:absolute;background:#fff;box-shadow:0 0 3px #000}
#hitmarker::before{left:50%;top:0;width:2px;height:100%;margin-left:-1px}
#hitmarker::after{top:50%;left:0;height:2px;width:100%;margin-top:-1px}
#hitmarker.show{animation:hm .25s ease-out}
#hitmarker.kill::before,#hitmarker.kill::after{background:#ff5a5a}
@keyframes hm{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.5)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.3)}}

#vignette{position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(150,0,10,.85) 100%)}
#lowhealth{position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(190,10,25,.55) 100%)}
#lowhealth.on{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.7}}
#dmg-dir{position:absolute;inset:0;opacity:0;transition:opacity .3s}

/* vitals */
#vitals{position:absolute;left:26px;bottom:26px;width:250px}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bar-ico{width:16px;text-align:center;font-size:15px;opacity:.85;text-shadow:0 1px 3px #000}
.bar{position:relative;flex:1;height:13px;background:rgba(0,0,0,.55);border:1px solid var(--line);
  border-radius:2px;overflow:hidden}
.bar.thin{height:7px;margin-top:5px}
.fill{position:absolute;inset:0;transform-origin:left;transition:transform .18s ease-out}
.fill.health{background:linear-gradient(90deg,#28c76f,#7bffa8)}
.fill.armor{background:linear-gradient(90deg,#2b7fd6,#7fd0ff)}
.fill.vehicle{background:linear-gradient(90deg,#ec6b15,#ffd36b)}
.bar-num{width:34px;text-align:right;font-size:15px;font-weight:700;text-shadow:0 2px 4px #000}
/* Circular driving HUD, inspired by an analogue instrument cluster. */
#hud{--speedometer-size:224px}
#speedo{position:absolute;right:22px;top:18px;width:var(--speedometer-size);color:#eef1e9;
  filter:drop-shadow(0 3px 5px #0009);pointer-events:none}
.speedometer-face{display:block;width:100%;height:auto;overflow:visible}
.speedometer-tick{stroke:#d3d1e1;stroke-width:1;opacity:.8}
.speedometer-tick.major{stroke-width:2;opacity:1}
.speedometer-tick.redline{stroke:#ff282c;stroke-width:2;opacity:1}
.speedometer-number{fill:#e4e0d8;font:italic 13px var(--fontd);font-weight:700;text-anchor:middle;dominant-baseline:central}
.speedometer-number.redline{fill:#ff5551}
.speedometer-caption{fill:#c9cab8;font:6px var(--fontd);letter-spacing:1.4px;opacity:.7}
.speedometer-unit{fill:#bab7cf;font:italic 9px var(--fontd);opacity:.7}
#speed-needle{transform-origin:110px 110px;transition:transform 80ms linear}
#speed-num{fill:#da008a;font:italic 700 31px Consolas,"Courier New",monospace;letter-spacing:-2px}
.speedometer-digital-unit{fill:#fff;font:700 11px var(--fontd)}
#vehicle-gear{fill:#fff;font:italic 700 18px var(--fontd)}
.vehicle-condition-row{display:flex;align-items:flex-end;gap:7px;width:75%;margin:-10px 4% 0 auto}
.vehicle-condition-icon{width:24px;height:31px;flex-shrink:0;filter:drop-shadow(0 1px 1px #000)}
.vehicle-condition-content{flex:1;min-width:0}
.vehicle-condition-label{display:block;font-size:8px;font-weight:700;letter-spacing:1.8px;color:#e2ece7;margin:0 0 3px 2px;text-shadow:0 1px 3px #000}
.vehicle-condition-track{position:relative;height:26px;background:#070513;border:3px solid #0c0e1d;
  border-radius:2px 6px 6px 2px;overflow:hidden;box-shadow:0 0 0 1px #a39ec266,inset 0 2px 4px #000}
#vehicle-fill{background:linear-gradient(180deg,#140d36,#bb0076 55%,#e0018e);box-shadow:inset 2px 0 4px #e60092;transition:transform .18s ease-out}
#speedo.damaged #vehicle-fill{background:linear-gradient(180deg,#5d131b,#e44845);box-shadow:none}
#speedo-vehicle-name{text-align:right;margin:9px 5% 0 0;color:#e1e7e2;font-size:9px;letter-spacing:1.8px;
  text-transform:uppercase;text-shadow:0 1px 4px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud.vehicle-driving #topright{right:calc(var(--speedometer-size) + 42px)}
@media(max-width:850px){
  #hud{--speedometer-size:182px}
  #speedo{top:178px;right:16px}
  #hud.vehicle-driving #topright{right:26px}
}
@media(max-height:550px){
  #hud{--speedometer-size:154px}
  #speedo{top:14px;right:14px}
  #hud.vehicle-driving #topright{right:calc(var(--speedometer-size) + 28px)}
}
@media(prefers-reduced-motion:reduce){#speed-needle{transition:none}}

/* weapon */
#weaponbox{position:absolute;right:26px;bottom:26px;text-align:right}
#btn-weapons{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;margin-bottom:9px;
  background:#080b20e6;border:1px solid #f155b888;border-radius:4px;color:#e8fff7;cursor:pointer;pointer-events:auto;
  font:700 10px var(--fontd);letter-spacing:1.5px}
#btn-weapons:hover{background:#1f1552}
#btn-weapons kbd{font:700 11px var(--fontd);color:var(--accent)}
#weapon-shortcuts{font-size:10px;color:#b6b2cf;margin-top:7px;letter-spacing:.4px;text-shadow:0 1px 3px #000}
#weapon-shortcuts b{color:#e7fff7}
#weapon-name{font-size:17px;letter-spacing:3px;opacity:.85;text-shadow:0 2px 5px #000}
#ammo{font-size:44px;font-weight:700;line-height:1;text-shadow:0 3px 10px #000}
#ammo-sep,#ammo-res{opacity:.5;font-size:26px}
#ammo.low #ammo-mag{color:var(--bad)}
#weapon-slots{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;margin:9px 0 0 auto;max-width:min(650px,calc(100vw - 310px))}
.slot{padding:3px 6px;font-size:10px;letter-spacing:.5px;border:1px solid var(--line);
  background:rgba(0,0,0,.45);opacity:.45;border-radius:2px}
.slot.active{opacity:1;border-color:var(--accent);color:var(--accent2);background:rgba(255,128,43,.16)}
.slot.empty{opacity:.18}
#reload-hint{margin-top:8px;font-size:13px;letter-spacing:2px;color:var(--accent2);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* money + stars */
#topright{position:absolute;right:26px;top:22px;text-align:right}
#money{font-size:33px;font-weight:700;color:#ffd166;text-shadow:0 3px 8px #000}
#money.flash{animation:mflash .6s}
@keyframes mflash{0%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
#stars{margin-top:6px;font-size:29px;letter-spacing:3px;line-height:1;height:32px}
#stars .st{color:rgba(255,255,255,.16);text-shadow:0 2px 4px #000}
#stars .st.on{color:var(--accent2);text-shadow:0 0 12px rgba(255,209,102,.9)}
#stars.blink .st.on{animation:blink .5s steps(2) infinite}
#wanted-note{font-size:12px;letter-spacing:3px;color:var(--accent2);opacity:.85}

/* mission */
#mission-panel{position:absolute;left:26px;top:22px;max-width:330px;
  border-left:3px solid var(--accent);padding:4px 0 4px 12px;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}
#mission-title{font-size:13px;letter-spacing:3px;color:var(--accent);text-shadow:0 2px 4px #000}
#mission-objective{font-size:19px;margin-top:3px;text-shadow:0 2px 5px #000}
#mission-dist{font-size:13px;opacity:.6;margin-top:2px}

/* radar */
#radar{position:absolute;left:26px;bottom:150px;width:168px;height:168px}
#radar-canvas{width:100%;height:100%;border-radius:50%;
  background:rgba(4,6,17,.72);box-shadow:0 6px 24px rgba(0,0,0,.6)}
#radar-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  pointer-events:none;box-shadow:inset 0 0 22px rgba(0,0,0,.75)}
#radar-north{position:absolute;left:50%;top:-4px;transform:translateX(-50%);font-size:11px;
  letter-spacing:1px;opacity:.6;text-shadow:0 1px 3px #000}

/* prompts / toasts */
#interact-prompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:16px;
  letter-spacing:1px;background:rgba(0,0,0,.55);padding:7px 15px;border:1px solid var(--line);border-radius:3px;
  text-shadow:0 2px 4px #000;white-space:nowrap}
#interact-prompt b{color:var(--accent2)}
#toast-wrap{position:absolute;left:50%;top:16%;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:7px;width:520px}
.toast{background:rgba(5,7,21,.85);border-left:3px solid var(--accent);padding:8px 15px;font-size:15px;
  letter-spacing:.6px;animation:tin .3s ease-out;box-shadow:0 5px 18px rgba(0,0,0,.5);max-width:100%}
.toast.good{border-color:var(--hp)} .toast.bad{border-color:var(--bad)} .toast.cash{border-color:#ffd166;color:#ffd166}
.toast.fade{opacity:0;transition:opacity .5s,transform .5s;transform:translateY(-8px)}
@keyframes tin{from{opacity:0;transform:translateY(-14px)}to{opacity:1}}
#subtitle{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);font-size:17px;
  background:rgba(0,0,0,.6);padding:6px 16px;border-radius:3px;text-shadow:0 2px 4px #000}

/* banner */
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;z-index:8;pointer-events:none}
#banner h2{font-size:62px;letter-spacing:9px;text-shadow:0 6px 26px #000;color:var(--accent2)}
#banner p{font-size:19px;letter-spacing:4px;opacity:.85;margin-top:6px;text-shadow:0 3px 10px #000}
#banner.show{animation:bfade 3.4s ease-out forwards}
@keyframes bfade{0%{opacity:0;transform:scale(1.12)}12%{opacity:1;transform:scale(1)}
  75%{opacity:1}100%{opacity:0}}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,9,.82);backdrop-filter:blur(7px)}
.panel{background:var(--panel);border:1px solid var(--line);padding:32px 38px;min-width:430px;
  max-height:92vh;overflow:auto;box-shadow:0 26px 70px rgba(0,0,0,.75);border-radius:5px}
.panel.wide{min-width:min(820px,94vw)}
.panel.start{text-align:center;min-width:min(600px,94vw)}
.panel h1,.panel h2{letter-spacing:5px;margin-bottom:16px;font-weight:700}
.panel h2{font-size:23px;color:var(--accent2)}
.logo{font-size:clamp(28px,4vw,42px);letter-spacing:3px}
.logo span{color:var(--accent)}
.logo.big{font-size:clamp(34px,6vw,66px);letter-spacing:4px;line-height:1.12}
.tag{opacity:.6;letter-spacing:4px;margin:6px 0 26px;font-size:14px}

.btn{display:block;width:100%;padding:13px;margin:9px 0;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:16px;letter-spacing:3px;
  cursor:pointer;transition:.14s;border-radius:3px}
.btn:hover{background:rgba(255,255,255,.14);transform:translateX(3px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#150800;font-weight:700}
.btn.primary:hover{background:#ff9650}
.btn.danger:hover{background:rgba(255,77,90,.28);border-color:var(--bad)}

#pause-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tab{background:none;border:none;color:var(--ink);opacity:.45;font-family:inherit;font-size:14px;
  letter-spacing:2px;padding:9px 15px;cursor:pointer;border-bottom:2px solid transparent}
.tab.active{opacity:1;border-bottom-color:var(--accent);color:var(--accent2)}

.controls-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:15px}
.controls-grid b{color:var(--accent2);letter-spacing:1px}
.controls-grid span{opacity:.75}

.setting{display:block;margin:16px 0;font-size:14px;letter-spacing:1.5px;opacity:.9}
.setting.inline{display:flex;align-items:center;gap:10px;cursor:pointer}
.setting input[type=range]{width:100%;margin-top:9px;accent-color:var(--accent)}
.setting select{width:100%;margin-top:9px;padding:8px;background:#0d1020;color:var(--ink);
  border:1px solid var(--line);font-family:inherit;border-radius:3px}
.setting output{float:right;color:var(--accent2)}

.hints{list-style:none;margin:20px 0 0;font-size:13px;opacity:.6;line-height:1.9}
.hints b{color:var(--accent2)}
#loading-wrap{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin:16px 0 10px}
#loading-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s}
#loading-text{font-size:13px;opacity:.6;letter-spacing:2px;min-height:18px}

/* City atlas: a fixed viewport, readable destination list and shared GPS colour. */
#map-screen{z-index:29;background:rgba(5,6,12,.94);padding:26px 34px;color:#edf0e8;
  font-family:"Bahnschrift","Segoe UI",system-ui,sans-serif;--gps:#FF00A8;--map-line:#ffffff14}
.city-map-shell{width:min(1660px,100%);height:calc(100dvh - 52px);display:grid;grid-template-rows:88px minmax(0,1fr) 43px;
  border:1px solid #ffffff1b;background:#0e1022;box-shadow:0 30px 100px #0008;overflow:hidden}
.city-map-header{display:flex;align-items:center;gap:27px;padding:0 25px;border-bottom:1px solid var(--map-line);background:#101326}
.map-brand{flex-shrink:0;display:flex;align-items:center}
.map-brand img{display:block;width:138px;height:auto;filter:drop-shadow(0 0 8px #FF00A855)}
.map-title-block{border-left:1px solid #ffffff24;padding-left:26px}.map-eyebrow{font-size:9px;letter-spacing:2.5px;color:#9e99ba}
#map-title{font-size:24px;font-weight:500;letter-spacing:-.4px;margin:4px 0 0;line-height:1.15}
.map-session{margin-left:auto;display:flex;gap:18px;align-items:center;color:#b7b4cb;font-size:12px}
.map-session b{font-size:21px;font-weight:400;color:#f0f1ea;font-variant-numeric:tabular-nums}
#map-screen button{font-family:inherit;cursor:pointer;color:inherit;transition:background .15s,border-color .15s,opacity .15s}
#map-screen button:focus-visible,#map-screen input:focus-visible,#map-canvas:focus-visible{outline:2px solid var(--gps);outline-offset:-2px}
.map-close{margin-left:6px;display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #ffffff24;padding:11px 12px;font-size:11px;border-radius:3px}
.map-close:hover{background:#ffffff0e}#map-screen kbd{font:500 9px "Bahnschrift",system-ui,sans-serif;border:1px solid #ffffff30;border-radius:2px;padding:3px 5px;color:#d1cfdf;letter-spacing:.3px;white-space:nowrap}
.city-map-body{display:grid;grid-template-columns:minmax(0,1fr) 316px;min-height:0}
.map-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;background:#3f92c8;isolation:isolate}
#map-canvas{display:block;width:100%;height:100%;border:0;border-radius:0;background:#3f92c8;cursor:crosshair;touch-action:none}
#map-canvas.dragging{cursor:grabbing}
.map-view-label{position:absolute;left:21px;top:20px;display:flex;align-items:center;gap:7px;font-size:9px;font-weight:600;letter-spacing:1.5px;padding:9px 11px;background:#0e1122dc;border:1px solid #ffffff12;border-radius:3px;pointer-events:none}
.map-live-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:#b7c9b2;flex-shrink:0}
.map-tools{position:absolute;right:18px;top:19px;display:flex;flex-direction:column;border:1px solid #ffffff24;background:#0e1123ed;border-radius:3px;overflow:hidden}
.map-tools button{height:37px;width:38px;border:0;border-bottom:1px solid #ffffff17;background:transparent;font-size:23px;font-weight:300;line-height:1}
.map-tools button:last-child{border:0}.map-tools button:hover{background:#ff96d82b}.map-tools button:disabled{opacity:.3;cursor:default}
.map-compass{position:absolute;left:21px;bottom:62px;display:grid;place-items:center;width:38px;height:44px;text-align:center;color:#eef3ee;pointer-events:none;background:#0e1122dc;border:1px solid #ffffff1a;border-radius:3px}
.map-compass b{font-size:10px;font-weight:600;line-height:1}.map-compass span{font-size:20px;line-height:1}
.map-scale{position:absolute;right:18px;bottom:62px;text-align:center;font-size:10px;font-variant-numeric:tabular-nums;color:#eef2ec;pointer-events:none;background:#0e1122dc;border:1px solid #ffffff1a;border-radius:3px;padding:6px 10px 7px}
.map-scale div{border:solid #d7e1db;border-width:0 1px 2px;width:90px;height:5px;margin-top:4px}
.map-status{position:absolute;bottom:16px;left:20px;right:20px;text-align:center;background:#0e1122e8;border:1px solid #ffffff16;padding:10px 13px;font-size:11px;line-height:1.4;border-radius:3px;pointer-events:none;color:#c5c3d6}
.map-status.error{border-color:#f08b48;color:#f7db9a}
.map-hover{position:absolute;z-index:3;pointer-events:none;max-width:260px;padding:10px 12px;background:#101327f5;border:1px solid #ff96d89c;border-radius:3px;font-size:12px;box-shadow:0 6px 22px #0006}
.map-hover small{display:block;color:#b6b3ca;margin-top:4px;font-size:10px}
.map-sidebar{min-width:0;min-height:0;display:flex;flex-direction:column;background:#111428;border-left:1px solid #ffffff19;padding:21px 18px 0;overflow:hidden}
.map-destination-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.map-destination-heading h3{font-weight:500;font-size:21px;letter-spacing:-.4px}.map-destination-heading>span{color:#b1adc9;font-size:11px;letter-spacing:1px;font-variant-numeric:tabular-nums}
.map-search-wrap{display:flex;align-items:center;gap:9px;flex-shrink:0;background:#0c0e1d;border:1px solid #ffffff1f;border-radius:3px;height:40px;padding:0 10px;color:#8a84b4}
.map-search-wrap svg{display:block;width:16px}.map-search-wrap input{background:none;border:0;min-width:0;flex:1;color:#f0f2eb;font-family:inherit;font-size:12px;outline:none;padding:10px 0;width:100%}
.map-search-wrap input{font-family:inherit;font-size:12px}.map-search-wrap input::placeholder{color:#9591b2}.map-search-wrap:focus-within{border-color:#ff96d8;box-shadow:0 0 0 2px #ff96d812}.map-search-wrap kbd{opacity:.55}
#map-screen .map-search-wrap input:focus-visible{outline:0}
.map-filters{display:flex;gap:5px;padding:12px 0 15px;flex-shrink:0}
.map-filters button{flex:1;padding:7px 4px;border:1px solid #ffffff19;background:transparent;border-radius:3px;font-size:10px;color:#adaac4!important;white-space:nowrap}
.map-filters button[aria-pressed=true]{background:#e7ecdf;color:#151933!important;border-color:#e7ecdf;font-weight:600}.map-filters button:hover{border-color:#b1adc8}
.map-mission{display:flex;align-items:center;gap:10px;padding:10px 9px;background:#f3c9670a;border:1px solid #eeb63230;border-radius:3px;text-align:left;margin-bottom:16px;flex-shrink:0;width:100%;font-size:11px}
.map-mission:hover{background:#f3c96717}.map-mission>span:last-child{margin-left:auto;color:#f3cc6f;font-size:17px}.map-mission-symbol{font-size:24px;color:#f4ce76}
.map-mission small{display:block;font-size:9px;color:#9894b2;margin-top:4px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-mission:disabled{opacity:.35;cursor:default!important}
.map-list-heading{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:#9691b8;padding:0 1px 9px;border-bottom:1px solid #ffffff12;flex-shrink:0}
.map-destinations{flex:1;overflow:auto;min-height:52px;scrollbar-width:thin;scrollbar-color:#635e81 #101327;padding:5px 0 9px;margin-bottom:4px;overscroll-behavior:contain}
.map-place{display:flex;align-items:center;gap:11px;width:100%;padding:11px 8px;background:transparent;border:1px solid transparent;border-bottom-color:#ffffff09;text-align:left;border-radius:3px}
.map-place:hover,.map-place.hovered{background:#ffffff08}.map-place[aria-pressed=true]{background:#ff96d812;border-color:#ff96d866}
.map-place-icon{display:grid;place-items:center;width:28px;height:30px;color:#bcb9cf;flex-shrink:0}.map-place[aria-pressed=true] .map-place-icon{color:var(--gps)}
.map-place-name{flex:1;min-width:0}.map-place-name strong{display:block;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.map-place-name small{display:block;font-size:9px;color:#938eb3;margin-top:2px}.map-place-distance{white-space:nowrap;color:#c0bcd4;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.map-empty{font-size:12px;color:#b3afcc;line-height:1.6;padding:22px 8px}.map-list-more{font-size:10px;color:#9893b8;padding:13px 8px;line-height:1.5}
.map-route-card{border-top:1px solid #ffffff20;padding:16px 0 17px;flex-shrink:0}
.map-route-eyebrow{display:flex;gap:7px;align-items:center;font-size:8px;letter-spacing:1.5px;color:#9a95b8;margin-bottom:8px}
.map-route-card.active .map-live-dot{background:var(--gps);box-shadow:0 0 8px #ff96d855}.map-route-card.active .map-route-eyebrow{color:#f8a7da}
#map-route-name{font-size:14px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#map-route-description{font-size:10px;line-height:1.5;color:#a09cbc;margin-top:6px}
.map-route-metrics{display:flex;margin:15px 0 12px;gap:25px}.map-route-metrics>div{display:flex;flex-direction:column;gap:5px}
.map-route-metrics b{font-size:24px;line-height:1;font-weight:500;letter-spacing:-.7px;font-variant-numeric:tabular-nums}.map-route-metrics span{font-size:8px;letter-spacing:1.2px;color:#9691b8}
.map-route-actions{display:flex;gap:7px}.map-route-actions button{padding:10px;border-radius:3px;font-size:11px;background:transparent;border:1px solid #ffffff25}
#map-drive{background:#f79dd6;color:#24064e;flex:1;border-color:#f79dd6;font-weight:600;display:flex;justify-content:space-between}#map-drive:hover{background:#fab9e2}
#map-clear:hover{background:#ffffff0c}.city-map-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 22px;background:#101326;border-top:1px solid #ffffff13}
.city-map-footer>div{display:flex;gap:23px}.city-map-footer>div>span{font-size:9px;color:#aaa7c3;display:flex;gap:6px;align-items:center}
.map-coordinate{font:9px "Bahnschrift",system-ui,sans-serif;letter-spacing:1px;color:#9792b8;white-space:nowrap;font-variant-numeric:tabular-nums}
.map-place-name strong{font-size:13px}.map-place-name small{font-size:11px}.map-place-distance{font-size:13px}
.map-list-heading{font-size:9px;letter-spacing:1px}.map-filters button{font-size:11px}.map-mission{font-size:12px}.map-mission small{font-size:10px}
.map-route-eyebrow{font-size:9px}#map-route-name{font-size:16px}#map-route-description{font-size:12px}.map-route-actions button{font-size:12px}
.city-map-footer>div>span{font-size:10px}.map-status{font-size:12px}
#map-canvas:focus-visible{outline:1px solid #f8aadb44;outline-offset:-1px}

/* Numeric hierarchy and navigation HUD. */
#money,#ammo,.bar-num,#gps-guidance,#city-clock{font-variant-numeric:tabular-nums lining-nums}
.wallet-label{font-size:8px;letter-spacing:2px;color:#d5e2d8;margin-bottom:3px;text-shadow:0 1px 5px #000}
#money{font-size:30px;letter-spacing:-.8px;color:#e1eddb}
#weapon-name{font-size:13px;letter-spacing:2px;color:#e6eee4;opacity:1}
#ammo{font-weight:600;min-width:155px;margin-left:auto}.ammo-values{display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
#ammo-mag{font-size:45px;min-width:54px;letter-spacing:-1.5px}#ammo-sep{font-size:21px;color:#bbb7d1;opacity:.8}#ammo-res{font-size:27px;letter-spacing:-.7px;min-width:43px;opacity:1;color:#cbd6c9}
.ammo-labels{display:flex;justify-content:flex-end;gap:22px;font-size:7px;letter-spacing:1.1px;line-height:1.5;color:#d0d9c9;font-weight:400;margin-top:2px}
#vitals{width:246px;bottom:22px;background:#0d0f20bd;padding:10px 12px 6px;border:1px solid #ffffff1b;border-radius:4px}
.bar-row{gap:8px;margin-bottom:5px}.bar-ico{font:500 8px "Bahnschrift",system-ui,sans-serif;letter-spacing:.7px;opacity:1;width:37px;text-align:left;color:#d6e2d5}
.bar-num{font-size:18px;font-weight:500;line-height:1.1;width:31px}.bar{height:5px;border:0;border-radius:1px;background:#ffffff16}
#radar{width:246px;height:180px;left:26px;bottom:111px}
#radar-canvas{border-radius:6px;width:100%;height:100%;border:1px solid #ffffff45;box-shadow:0 7px 22px #0006}
#radar-ring{border-radius:6px;border:1px solid #ffffff15;box-shadow:inset 0 0 15px #0005;pointer-events:none}
#radar-caption{position:absolute;bottom:-18px;left:0;right:0;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#e1e9e1;text-shadow:0 1px 5px #000}
#radar-caption kbd{font:600 8px "Bahnschrift",sans-serif;border:1px solid #ffffff77;border-radius:2px;padding:0 3px;letter-spacing:0}
#gps-guidance{position:absolute;left:26px;bottom:303px;width:246px;display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;gap:7px 10px;
  padding:12px 13px 9px;background:#101328ed;border:1px solid #ff96d855;border-left:3px solid #ff96d8;border-radius:4px;box-shadow:0 7px 22px #0003;color:#f0eeea}
#gps-turn-icon{color:#f8aadb;display:grid;place-items:center}#gps-turn-icon svg{width:32px;height:32px;stroke-width:2}
#gps-turn-distance{font-size:27px;letter-spacing:-.7px;font-weight:600;line-height:1.1}#gps-instruction{font-size:10px;margin-top:4px;color:#ceccdd;line-height:1.4}
.gps-trip{display:flex;justify-content:space-between;grid-column:1/-1;padding-top:8px;border-top:1px solid #ffffff16;color:#f8a5d9;font-size:11px}
#gps-eta{color:#b9b6cf}
@media(max-width:1080px){#map-screen{padding:16px}.city-map-shell{height:calc(100dvh - 32px);grid-template-rows:76px minmax(0,1fr) 40px}.city-map-body{grid-template-columns:minmax(0,1fr) 285px}.city-map-header{gap:17px;padding:0 18px}.map-session>span{display:none}.map-sidebar{padding:17px 14px 0}.map-title-block{padding-left:18px}.city-map-footer>div{gap:13px}}
@media(max-height:720px){.city-map-shell{grid-template-rows:67px minmax(0,1fr) 36px}.map-sidebar{padding-top:13px}.map-destination-heading{margin-bottom:10px}.map-destination-heading h3{font-size:18px}.map-filters{padding:9px 0}.map-mission{margin-bottom:10px;padding:7px 9px}.map-route-card{padding:11px 0}.map-route-metrics{margin:10px 0}.map-route-metrics b{font-size:22px}.map-place{padding:8px 6px}}
@media(max-width:740px){#map-screen{padding:0}.city-map-shell{height:100dvh;width:100%;border:0;grid-template-rows:64px minmax(0,1fr) 32px}.city-map-header{padding:0 13px;gap:12px}.map-brand img{width:104px}#map-title{font-size:19px}.map-eyebrow{font-size:7px}.map-title-block{padding-left:12px}.map-session{display:none}.map-close{margin-left:auto;padding:9px}.map-close>span{display:none}.city-map-body{grid-template-columns:minmax(0,1fr) 250px}.map-sidebar{padding:12px 10px 0}.map-destination-heading h3{font-size:18px}.map-place{padding:8px 4px;gap:6px}.map-place-name strong{font-size:10px}.map-place-icon{width:23px}.map-place-distance{font-size:10px}.map-filters{gap:3px}.map-filters button{font-size:9px}.city-map-footer{padding:0 10px}.city-map-footer>div{gap:9px}.city-map-footer>div>span{font-size:8px}.map-key-extra,.map-coordinate{display:none!important}.map-status{font-size:10px;left:10px;right:10px;bottom:10px}.map-view-label{left:10px;top:11px;font-size:8px;padding:7px}.map-tools{right:10px;top:48px}.map-tools button{width:32px;height:32px}.map-compass{left:14px;bottom:80px}.map-scale{right:13px;bottom:85px}}
@media(max-width:540px){.city-map-body{grid-template-columns:1fr;grid-template-rows:minmax(190px,1fr) 255px}.map-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 44%;grid-template-rows:32px 37px minmax(0,1fr);gap:7px 11px;padding:10px 12px;border-left:0;border-top:1px solid #ffffff20}.map-destination-heading{margin:0;grid-column:1}.map-destination-heading h3{font-size:17px}.map-search-wrap{height:34px;grid-column:1;grid-row:2}.map-filters{grid-row:1/3;grid-column:2;display:grid;grid-template-columns:1fr 1fr;padding:0}.map-mission,.map-list-heading{display:none}.map-destinations{grid-column:1;grid-row:3;margin:0;padding:0}.map-route-card{grid-column:2;grid-row:3;border:0;border-left:1px solid #ffffff20;padding:4px 0 0 11px;min-width:0}.map-route-eyebrow{font-size:7px;letter-spacing:.7px}#map-route-name{font-size:11px}#map-route-description{font-size:9px}.map-route-metrics{gap:9px;flex-wrap:wrap;margin:9px 0}.map-route-metrics b{font-size:18px}.map-route-metrics span{font-size:6px}.map-route-actions{gap:4px}.map-route-actions button{padding:7px 5px;font-size:9px}.map-search-wrap input{font-size:10px}.map-search-wrap kbd{display:none}.map-place-name small{font-size:8px}.map-place{padding:6px 2px}.map-place-distance{font-size:9px}.map-status{padding:6px 8px}.city-map-footer>div>span{font-size:7px}.city-map-footer kbd{font-size:7px!important;padding:2px!important}}
@media(max-width:800px),(max-height:600px){#radar{width:200px;height:146px;left:18px;bottom:99px}#vitals{width:200px;left:18px;bottom:19px;padding:8px 9px 5px}.bar-ico{width:34px;font-size:7px}.bar-num{font-size:16px}#gps-guidance{left:18px;bottom:258px;width:200px;padding:9px 10px 8px;grid-template-columns:32px minmax(0,1fr);gap:6px 8px}#gps-turn-icon svg{width:27px;height:27px}#gps-turn-distance{font-size:23px}#gps-instruction{font-size:9px}.gps-trip{font-size:10px}#money{font-size:25px}.wallet-label{font-size:7px}#ammo-mag{font-size:38px}#ammo-res{font-size:23px}}

/* inventory / shop rows */
#inv-list,#shop-list{margin:8px 0}
.inv-row,.shop-row{display:flex;align-items:center;gap:14px;padding:11px 13px;margin:7px 0;
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:3px}
.inv-row .n,.shop-row .n{flex:1;font-size:16px;letter-spacing:1px}
.inv-row .d,.shop-row .d{font-size:12.5px;opacity:.55;letter-spacing:.4px}
.shop-row .p{font-size:18px;color:#ffd166;font-weight:700;min-width:78px;text-align:right}
.shop-row button{padding:8px 16px;background:var(--accent);border:none;color:#150800;font-family:inherit;
  font-weight:700;letter-spacing:2px;cursor:pointer;border-radius:3px;font-size:13px}
.shop-row button:hover{background:#ff9650}
.shop-row button:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.35);cursor:not-allowed}
.shop-row.owned{opacity:.55}
.shop-head{display:flex;justify-content:space-between;font-size:15px;padding-bottom:12px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.shop-head b{color:#ffd166;font-size:19px}
.inv-row .tag2{font-size:11px;letter-spacing:2px;padding:3px 8px;border:1px solid var(--line);opacity:.7;border-radius:2px}

/* death */
#death-screen{background:rgba(60,0,4,.55);backdrop-filter:blur(4px) saturate(.3)}
.death-inner{text-align:center}
.death-inner h1{font-size:118px;letter-spacing:20px;color:#ff2e3f;text-shadow:0 0 60px rgba(255,0,20,.75)}
.death-inner p{font-size:19px;opacity:.8;margin:12px 0 30px;letter-spacing:3px}
.death-inner .btn{width:270px;margin:0 auto}

#fatal .panel{max-width:min(760px,92vw)}
#fatal pre{white-space:pre-wrap;font-size:13px;opacity:.8;line-height:1.55;font-family:Consolas,monospace}

/* Equipment selection: pause the simulation while browsing or purchasing. */
#weapon-menu{z-index:34}
.panel.weapon-menu-panel{width:min(1100px,96vw);min-width:0;padding:24px 28px}
.weapon-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.weapon-menu-heading h2{margin-bottom:0;font-size:24px;letter-spacing:2px}
.weapon-menu-heading .city-eyebrow{margin-bottom:8px}
.weapon-menu-wallet{text-align:right;flex-shrink:0}.weapon-menu-wallet span{display:block;color:#afaacd;font-size:9px;letter-spacing:1.5px}
.weapon-menu-wallet b{display:block;font-size:25px;color:#ffd166;margin-top:5px}
.weapon-menu-intro{color:#a6a1c5;font-size:12px;line-height:1.6;margin:14px 0}
#weapon-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:56vh;overflow:auto;padding:3px 7px 5px 3px;scrollbar-color:#900c60 #0b0f2c}
.weapon-choice{display:flex;flex-direction:column;min-width:0;padding:12px;background:linear-gradient(145deg,#160f3c,#0a0e27);border:1px solid var(--line);border-radius:7px}
.weapon-choice.equipped{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:linear-gradient(145deg,#1c134a,#110c2e)}
.weapon-choice-top{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#9e98c4;font-size:9px;letter-spacing:.7px}
.weapon-choice-top kbd{display:grid;place-items:center;width:21px;height:21px;border:1px solid #5f579188;border-radius:4px;font:700 12px var(--fontd);color:#e1eeea}
.weapon-choice.equipped .weapon-choice-top{color:#ff6fcf}
.weapon-choice img{width:100%;height:74px;object-fit:contain;display:block;margin:5px 0}
.weapon-empty-icon{height:84px;display:grid;place-items:center;font-size:42px;filter:grayscale(1)}
.weapon-choice h3{font-size:12px;color:#f0fff7;letter-spacing:.5px;margin:5px 0 7px}
.weapon-choice p{font-size:11px;line-height:1.5;color:#ada9c7;min-height:33px}
.weapon-choice small{display:block;color:#f14cb4;font-size:10px;line-height:1.5;margin:9px 0 10px}
.weapon-choice button{font:700 10px var(--fontd);letter-spacing:.4px;cursor:pointer;border:1px solid #ff00a866;border-radius:4px;background:#1c134c;color:#dffff0;padding:9px 5px;margin-top:auto}
.weapon-choice button:hover{background:#920c61;border-color:#f36cc2}
.weapon-choice button:disabled{color:#78729f;border-color:#232955;background:#12162d;cursor:default}
.weapon-menu-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;border-top:1px solid var(--line);margin-top:12px}
.weapon-menu-footer p{font-size:11px;color:#a6a1c5}.weapon-menu-footer kbd{color:#fcdcf0;font:700 11px var(--fontd)}
.weapon-menu-footer span{margin:0 6px;color:#514b7a}
.weapon-menu-footer .btn{width:auto;min-width:150px;margin:0;padding:10px;font-size:11px;letter-spacing:1px}
@media(max-width:900px){#weapon-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){
  .panel.weapon-menu-panel{padding:18px}.weapon-menu-heading h2{font-size:19px}.weapon-menu-wallet b{font-size:20px}
  #weapon-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.weapon-menu-footer{flex-wrap:wrap;gap:12px}
  #weapon-slots{display:none}#weaponbox{right:16px;bottom:110px}
}
/* Civic life: shared city guide, physical services and social rooms. */
.civic-mode #weaponbox,.civic-mode #crosshair,.civic-mode #hitmarker,.civic-mode #vitals .bar-row:nth-child(2),
.civic-mode #btn-weapons-inv,.civic-mode #weapon-menu-screen,.civic-mode #stars,.civic-mode #wanted-note {display:none!important}
.civic-mode #mission-panel {display:none!important}
.civic-mode .death-inner h1{font-size:clamp(28px,5vw,60px)}
#citizen-hud{position:absolute;top:28px;left:28px;max-width:360px;padding:16px 20px;background:linear-gradient(120deg,rgba(16,10,42,.94),rgba(18,21,43,.75));border:1px solid #9db4a52e;border-radius:14px;box-shadow:0 10px 35px #0003;pointer-events:auto;color:#f4f0e7}
#citizen-hud .city-eyebrow{font-size:10px;letter-spacing:2px;color:#a9cbb9;display:block;margin-bottom:7px}
#resident-count{font-size:17px;display:block;font-weight:600}
#citizen-job-hud{font-size:11px;color:#ceccdd;margin-top:8px;line-height:1.5}
#citizen-voice-hud{font-size:12px;color:#b9e7b5;margin-top:4px}
.citizen-hud-actions{display:flex;gap:12px;margin-top:10px}.citizen-hud-actions button{background:none;border:0;color:#dedad1;font:inherit;font-size:11px;cursor:pointer;padding:3px 0}
.resident-label{position:absolute;left:0;top:0;background:#17103edd;color:#f8f3e6;border:1px solid #bdd4c552;border-radius:5px;padding:4px 8px;font:12px 'Segoe UI',sans-serif;pointer-events:none;white-space:nowrap}
#resident-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#city-panel{z-index:85;align-items:center;justify-content:center;background:#090d24aa;backdrop-filter:blur(12px);padding:22px;color:#edeae3}
.citizen-shell{width:min(1160px,100%);height:min(820px,calc(100vh - 44px));background:#12162d;border:1px solid #9995b538;border-radius:20px;box-shadow:0 24px 100px #0007;display:flex;flex-direction:column;overflow:hidden;font-family:'Segoe UI',sans-serif}
.citizen-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 30px 20px;background:linear-gradient(115deg,#1e2349,#161a35)}
.citizen-header .city-eyebrow{color:#bbd7c3;font-size:10px;letter-spacing:2px;margin:0 0 6px}.citizen-header h2{font-size:28px;margin:0;font-weight:500;letter-spacing:-.7px}
.citizen-tabs{display:flex;gap:26px;border-bottom:1px solid #8982b42e;padding:0 30px;background:#161a35}
.citizen-tabs button{border:0;background:none;font:600 13px 'Segoe UI',sans-serif;color:#b7b4cf;padding:15px 0;border-bottom:2px solid transparent;cursor:pointer}
.citizen-tabs button.active{color:#fae7bc;border-color:#d1d8b2}.citizen-tabs button:hover{color:white}
.citizen-summary{display:flex;justify-content:space-between;gap:18px;padding:13px 30px;background:#101326;font-size:11px;color:#becfc5}.citizen-summary strong{color:#f7dea3;font-weight:600}
.citizen-body{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.15fr);gap:0;min-height:0;flex:1;overflow:auto}
.citizen-directory{padding:23px;border-right:1px solid #c6d5bc20;overflow:auto}.citizen-search{display:block;color:#b6b2d0;font-size:11px;letter-spacing:.3px;margin-bottom:17px}
.citizen-shell input{display:block;width:100%;box-sizing:border-box;border:1px solid #9590b648;border-radius:8px;background:#0e0a26;color:#efebe1;padding:11px 12px;font:13px 'Segoe UI',sans-serif;margin-top:7px;outline:none}
.citizen-shell input:focus{border-color:#bdcfb6;box-shadow:0 0 0 2px #bdcfb622}
.citizen-destination{display:flex;width:100%;gap:13px;align-items:center;text-align:left;border:1px solid transparent;border-radius:10px;padding:13px 9px;background:transparent;color:#ced8c9;cursor:pointer}
.citizen-destination:hover,.citizen-destination:focus-visible{background:#1e244a;border-color:#aaa6c533;outline:none}.citizen-destination>span:nth-child(2){flex:1}.citizen-destination strong{display:block;font-size:13px;font-weight:600}.citizen-destination small{display:block;font-size:10px;color:#9a94bc;margin-top:4px}
.citizen-place{padding:35px 32px;overflow:auto;background:radial-gradient(ellipse at top right,#252c5b55,transparent 60%)}
.citizen-place h3,.citizen-work h3,.citizen-social h3{font-size:25px;letter-spacing:-.5px;font-weight:500;margin:13px 0}
.citizen-place .city-eyebrow,.citizen-work .city-eyebrow,.citizen-social .city-eyebrow{font-size:10px;letter-spacing:2px;color:#a8ccba;text-transform:uppercase}
.citizen-address{font-size:12px;color:#b6c8bb}.citizen-description{font-size:14px;color:#d5dbce;line-height:1.7;margin-top:30px;max-width:420px}
.citizen-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:25px}
.citizen-shell .btn{font:600 11px 'Segoe UI',sans-serif;letter-spacing:.3px;border-radius:7px;border:1px solid #b9c8b33d;background:#212750;color:#eee9dd;padding:11px 16px;cursor:pointer;width:auto;flex-shrink:0;margin:0;display:inline-block}
.citizen-shell .btn:hover{transform:none}.citizen-actions .btn{width:100%;text-align:left}.citizen-header>div{flex:1}.citizen-header #city-panel-close{align-self:flex-start}.citizen-header .city-eyebrow{white-space:normal}.city-conversation form .btn{align-self:stretch}
.citizen-shell .btn:hover:not(:disabled){background:#2c356d;border-color:#c3d6b7}.citizen-shell .btn:disabled{opacity:.4;cursor:default}.citizen-shell .btn.primary{background:#c8d4af;color:#151933;border-color:#c8d4af}.citizen-shell .btn.talking{background:#87c899;box-shadow:0 0 0 3px #78d69b44}
.citizen-note{font-size:11px;color:#a8bcb2;line-height:1.65;margin:22px 0 0}.citizen-work{grid-column:1/-1;padding:34px;max-width:700px}.citizen-work #citizen-work-state{padding:20px;background:#100a2a;border:1px solid #a19cbf22;border-radius:10px;line-height:1.8;color:#ccdacb;font-size:14px}
.citizen-social>div{padding:28px;overflow:auto}.citizen-social>div:first-child{border-right:1px solid #a19cbf22}.citizen-social label{font-size:11px;color:#b5b2cd;display:block;margin-bottom:12px}.citizen-social summary{font-size:11px;color:#b7cec0;cursor:pointer;margin:12px 0}.citizen-social details input{font-size:11px}
#city-connect-form>.btn{margin:5px 4px 0 0}#city-connection-status{font-size:12px;line-height:1.5;color:#d3dab3}.city-residents{font-size:12px;color:#c0d2c3;line-height:2}.city-voice{border-top:1px solid #a19cbf22;margin-top:20px;padding-top:20px}.city-voice strong{font-size:13px}.city-voice p{font-size:11px;line-height:1.6}.city-voice .btn{margin:3px 3px 3px 0}
.city-conversation{display:flex;flex-direction:column;min-height:300px}.city-chat{flex:1;overflow:auto;padding:15px;background:#0f0a28;border:1px solid #a19cbf22;border-radius:10px;min-height:150px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.city-chat p{margin:0 0 13px}.city-chat strong{color:#b5d8bb}.city-chat span{color:#dedfd1}
#city-chat-form{display:flex;gap:8px;margin-top:14px}#city-chat-form input{margin:0;min-width:0}.citizen-footer{display:flex;justify-content:space-between;padding:15px 30px;border-top:1px solid #a19cbf22;font-size:10px;color:#9eb7aa}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.city-resident-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.resident-mute{background:none;border:0;color:#bcd3bd;font:10px 'Segoe UI',sans-serif;cursor:pointer;padding:4px}.city-voice-volume{max-width:220px;margin-top:12px}.city-voice-volume input{padding:0}
@media(max-width:760px){#city-panel{padding:8px}.citizen-shell{height:calc(100dvh - 16px);border-radius:12px}.citizen-header{padding:18px}.citizen-header h2{font-size:21px}.citizen-tabs{gap:20px;padding:0 18px}.citizen-tabs button{font-size:11px}.citizen-summary{padding:12px 18px;flex-wrap:wrap;gap:8px}.citizen-summary>span:last-child{display:none}.citizen-body{grid-template-columns:1fr;overflow:auto}.citizen-directory,.citizen-place,.citizen-social>div{overflow:visible;padding:20px}.citizen-directory{max-height:240px;overflow:auto;border-bottom:1px solid #a19cbf22}.citizen-footer{padding:12px 18px}.citizen-footer>span:first-child{display:none}#citizen-hud{top:14px;left:14px;padding:11px 14px;max-width:250px}#resident-count{font-size:13px}#citizen-hud .city-eyebrow{font-size:8px}#citizen-job-hud{font-size:10px}}

/* ============ RÉVEILLON ============ */
#reveillon-status{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(7,10,29,.72);border:1px solid rgba(255,209,102,.45);color:#fcf1d7;font-size:12px;letter-spacing:1.2px;white-space:nowrap;backdrop-filter:blur(6px);pointer-events:none;z-index:6}
#reveillon-status .rv-dot{width:8px;height:8px;border-radius:50%;background:#ffd166;box-shadow:0 0 10px #ffd166}
#reveillon-status[data-phase="show"] .rv-dot,#reveillon-status[data-phase="countdown"] .rv-dot{background:#ff5ac2;box-shadow:0 0 12px #ff5ac2;animation:rv-blink 1s steps(2) infinite}
#countdown{position:absolute;left:0;right:0;top:20%;text-align:center;pointer-events:none;z-index:9}
#countdown b{display:block;font:400 clamp(110px,16vw,210px)/1 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;color:#ffe4a6;transform:skewX(-6deg);text-shadow:0 0 30px rgba(255,206,90,.75),0 10px 30px rgba(0,0,0,.6)}
#countdown.greeting b{font-size:clamp(54px,8vw,104px);background:linear-gradient(100deg,#fff4dc,#ffd166 45%,#ff7fd0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 24px rgba(255,212,110,.55))}
#countdown span{display:block;margin-top:10px;font-size:16px;letter-spacing:5px;text-transform:uppercase;color:#fbecca;text-shadow:0 2px 10px #000}
#countdown b.pulse{animation:rv-pop .9s cubic-bezier(.2,.9,.3,1)}
@keyframes rv-pop{from{transform:skewX(-6deg) scale(1.35);opacity:.2}to{transform:skewX(-6deg) scale(1);opacity:1}}
@keyframes rv-blink{50%{opacity:.25}}
@media (max-width:760px){#reveillon-status{top:auto;bottom:92px;font-size:11px;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}}
@media (prefers-reduced-motion:reduce){#countdown b.pulse,#reveillon-status .rv-dot{animation:none!important}}
/* water: breath bar and underwater view */
.fill.breath{background:linear-gradient(90deg,#f36bc1,#ffbfe8)}#breath-row.low .fill.breath{background:#ffaf7a;animation:breath-low .6s ease-in-out infinite alternate}
@keyframes breath-low{to{opacity:.45}}
#underwater{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;overflow:hidden;
  background:radial-gradient(120% 95% at 50% 0%,#f044b133 0%,#23185e40 45%,#0d0924cc 100%)}
#underwater.on{opacity:1}
#underwater i{position:absolute;top:-20%;width:18%;height:140%;background:linear-gradient(180deg,#ffbfe838,#ffbfe800 70%);filter:blur(14px);transform:skewX(-12deg);animation:shaft 7s ease-in-out infinite alternate}
#underwater i:nth-child(1){left:18%}#underwater i:nth-child(2){left:48%;width:11%;animation-duration:9s;animation-delay:-3s}#underwater i:nth-child(3){left:72%;width:14%;animation-duration:6s;animation-delay:-5s}
@keyframes shaft{from{transform:translateX(-4vw) skewX(-12deg);opacity:.55}to{transform:translateX(4vw) skewX(-6deg);opacity:1}}