:root{
  --night:#17110c; --night2:#241a12; --panel:rgba(36,26,18,.95); --line:rgba(255,255,255,.14);
  --pink:#e9a23b; --pink2:#ffcf6e; --teal:#6fa3e0; --orange:#ff8a3d; --yellow:#f8cb62; --green:#7cf29c; --violet:#b67cff;
  --ink:#fff; --ink2:#ecdcc4; --ink3:#b9a68c;
  --title:"Futura","Avenir Next Condensed","Arial Black",Impact,system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font:15px/1.4 var(--body);overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
#app{position:fixed;inset:0}
.layer{position:absolute;inset:0}
[hidden]{display:none!important}

/* ---------- topbar ---------- */
.topbar{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(10px + var(--safe-t)) 14px 10px;background:linear-gradient(180deg,rgba(23,17,12,.95),rgba(23,17,12,.75) 70%,transparent);pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.b1{font:900 22px/1 var(--title);letter-spacing:-.5px}
.b2{font:italic 900 24px/1 var(--title);color:var(--pink);text-shadow:0 0 14px rgba(233,162,59,.6)}
.ver{font:700 10px var(--mono);color:var(--teal);letter-spacing:1px;margin-left:4px}
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px}
.filters::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);background:rgba(48,36,24,.85);
  border-radius:99px;padding:7px 11px;font-size:12px;font-weight:700;color:var(--ink2);transition:.15s}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.chip.on{background:color-mix(in srgb,var(--c) 22%,#2a1f14);border-color:var(--c);color:#fff}
.chip:not(.on){opacity:.55}
.actions{display:flex;gap:8px}
.btn{border:1px solid var(--line);background:rgba(48,36,24,.9);border-radius:10px;padding:9px 13px;font-weight:800;font-size:13px}
.btn.play{background:linear-gradient(135deg,var(--pink),var(--orange));border:0;color:#1a0b16;box-shadow:0 4px 18px rgba(233,162,59,.45)}
.btn:active{transform:scale(.97)}

/* ---------- viewer ---------- */
.viewer{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:
  radial-gradient(ellipse at 50% 40%,#3a2a1a 0,#17110c 70%)}
.viewer.dragging{cursor:grabbing}
.viewer:focus{outline:none}
.stage{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;will-change:transform}
#art{position:absolute;inset:0;width:1536px;height:1024px;user-select:none;-webkit-user-select:none;pointer-events:none;image-rendering:auto}
.overlay{position:absolute;inset:0;width:1536px;height:1024px;pointer-events:none;overflow:visible}
.markers{position:absolute;inset:0}
.mk{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.mk .dot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--c);border:2px solid #fff;
  transform:translate(-50%,-50%) scale(var(--inv,1));box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 45%,transparent),0 2px 8px #000;transition:transform .15s}
.mk.play .dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--c);animation:pulse 1.8s infinite}
.mk .lbl{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 12px * var(--inv,1))) scale(var(--inv,1));transform-origin:50% 100%;
  white-space:nowrap;font:800 11px var(--body);background:rgba(23,17,12,.9);border:1px solid var(--c);padding:3px 7px;border-radius:6px;opacity:0;transition:opacity .15s}
.viewer.zoomed .mk .lbl,.mk.sel .lbl,.mk.hover .lbl{opacity:1}
.mk .ms{position:absolute;left:0;top:0;transform:translate(calc(4px * var(--inv,1)),calc(-14px * var(--inv,1))) scale(var(--inv,1));transform-origin:0 0;
  background:var(--violet);color:#1a0b2a;font:900 9px var(--mono);border-radius:6px;padding:1px 4px;border:1px solid #fff}
.mk.sel .dot{transform:translate(-50%,-50%) scale(calc(var(--inv,1)*1.5))}
.mk.dim{opacity:.18}
@keyframes pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.2);opacity:0}}
.zoomctl{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:grid;gap:8px;z-index:5}
.zoomctl button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(36,26,18,.9);font-size:22px;font-weight:700}
.hint{position:absolute;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);font:700 11px var(--body);letter-spacing:.5px;color:var(--ink2);
  background:rgba(23,17,12,.85);border:1px solid var(--line);padding:8px 12px;border-radius:20px;white-space:nowrap;pointer-events:none;transition:opacity .5s}
.atlas-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:340px;text-align:center;background:var(--panel);border:1px solid var(--pink);padding:16px;border-radius:14px;z-index:6}
.here-chip{position:absolute;left:14px;bottom:calc(14px + var(--safe-b));background:var(--pink);color:#1a0b16;font-weight:900;font-size:12px;padding:7px 11px;border-radius:99px;z-index:6}

/* selection glow (svg) */
.sel-glow{fill:rgba(233,162,59,.18);stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 0 8px #e9a23b)}
.sel-ring{fill:none;stroke:var(--pink);stroke-width:2;animation:ring 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{0%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
.panel-hl{fill:rgba(64,205,221,.12);stroke:var(--teal);stroke-width:3}
.bound{fill:rgba(233,162,59,.10);stroke:var(--pink);stroke-width:2.5;stroke-dasharray:8 6}
.bound-lbl{fill:#fff;font:800 11px var(--body);paint-order:stroke;stroke:#17110c;stroke-width:4px}
.here{fill:var(--pink);stroke:#fff;stroke-width:3}
.here-ring{fill:none;stroke:#fff;stroke-width:2;animation:ring 1.4s ease-out infinite;transform-box:fill-box;transform-origin:center}

/* ---------- card ---------- */
.card{position:absolute;z-index:30;right:14px;top:74px;bottom:14px;width:380px;max-width:calc(100vw - 28px);background:var(--panel);
  border:1px solid var(--line);border-radius:18px;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:cardin .22s ease-out;overscroll-behavior:contain}
@keyframes cardin{from{transform:translateX(30px);opacity:0}}
.card-grip{display:none}
.card-x{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.55);font-size:22px;line-height:1}
.c-art{height:170px;background-repeat:no-repeat;background-color:#2a1f14;border-bottom:1px solid var(--line);position:relative}
.c-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(36,26,18,.95))}
.c-pad{padding:14px 16px 18px}
.c-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{font:800 10px var(--mono);letter-spacing:.6px;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--ink2)}
.tag.cat{background:color-mix(in srgb,var(--c) 25%,transparent);color:#fff}
.tag.pA{background:var(--pink);color:#1a0b16}.tag.pB{background:var(--teal);color:#06232a}.tag.pC{background:#7c7894;color:#fff}
.tag.st-jogavel{background:var(--green);color:#0b2414}.tag.st-expansao{background:var(--orange);color:#2a1100}
.c-name{font:italic 900 28px/1.05 var(--title);margin:4px 0 8px;color:#fff;text-shadow:0 0 18px rgba(233,162,59,.5)}
.c-desc{color:var(--ink2);margin:0 0 14px}
.c-h{font:800 11px var(--mono);letter-spacing:1px;color:var(--teal);text-transform:uppercase;margin:16px 0 8px}
.mis{display:block;width:100%;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:10px;padding:9px 11px;margin-bottom:6px}
.mis b{color:var(--violet);font-family:var(--mono);margin-right:6px}
.mis small{display:block;color:var(--ink3);margin-top:3px}
.mis .ms-st{float:right;font:800 9px var(--mono);text-transform:uppercase;color:var(--ink3)}
.mis .ms-st.demo{color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span,.chips button{font-size:12px;font-weight:700;border-radius:99px;padding:5px 10px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.chips button:hover{border-color:var(--pink)}
.geo{font:12px var(--mono);color:var(--ink3);margin-top:12px}
.c-btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.c-btns .btn{flex:1;min-width:140px;padding:12px}

/* ---------- loading / toast ---------- */
.loading{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 60%,#ffd27a 0,#e9a23b 25%,#7a3a1a 55%,#17110c 85%)}
.ld-title{font-size:50px}.ld-title .b1{font-size:46px}.ld-title .b2{font-size:52px;color:#fff}
.ld-bar{width:min(320px,70vw);height:8px;border-radius:9px;background:rgba(0,0,0,.4);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--teal));transition:width .2s}
.ld-msg{font:700 12px var(--mono);letter-spacing:1px}
.toast{position:fixed;left:50%;top:calc(80px + var(--safe-t));transform:translateX(-50%);z-index:200;background:var(--panel);border:1px solid var(--pink);padding:10px 16px;border-radius:12px;font-weight:700;max-width:90vw}

/* ---------- atlas como mapa do jogo ---------- */
body.in-game #atlas{z-index:50;background:rgba(23,17,12,.6)}
body.in-game #atlas .viewer{background:rgba(23,17,12,.85)}

/* ---------- HUD ---------- */
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none;font-family:var(--body);user-select:none;-webkit-user-select:none}
#hud .pe{pointer-events:auto}
.h-money{position:absolute;right:16px;top:calc(12px + var(--safe-t));text-align:right}
.h-money .eur{font:900 30px/1 var(--title);color:#8ef0a0;-webkit-text-stroke:1.5px #08260f;text-shadow:2px 2px 0 #000}
.h-money .clk{font:800 15px var(--mono);color:#fff;text-shadow:1px 1px 0 #000;margin-top:2px}
.h-money .stamps{margin-top:6px;font:800 12px var(--mono);background:rgba(23,17,12,.75);border:1px solid var(--line);padding:4px 8px;border-radius:8px;display:inline-block}
.h-top{position:absolute;left:14px;top:calc(12px + var(--safe-t));display:flex;gap:8px}
.h-btn{pointer-events:auto;border:1px solid var(--line);background:rgba(23,17,12,.8);border-radius:10px;padding:8px 11px;font-weight:800;font-size:12px}
.h-zone{position:absolute;right:20px;bottom:calc(200px + var(--safe-b));text-align:right;font:italic 900 44px/1 var(--title);color:#fff;
  -webkit-text-stroke:2px #1a0b16;text-shadow:3px 3px 0 #000,0 0 30px var(--pink);opacity:0;transition:opacity .6s;letter-spacing:-1px}
.h-zone small{display:block;font:800 13px var(--mono);-webkit-text-stroke:0;color:var(--yellow);letter-spacing:2px;margin-top:6px}
.h-zone.show{opacity:1}
.h-prompt{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));transform:translateX(-50%);background:rgba(23,17,12,.88);border:1px solid var(--yellow);
  padding:9px 14px;border-radius:10px;font-weight:800;white-space:nowrap}
.h-prompt kbd{display:inline-block;background:var(--yellow);color:#1a1200;border-radius:5px;padding:1px 7px;margin-right:8px;font:900 13px var(--mono)}
.h-timer{position:absolute;left:50%;top:calc(14px + var(--safe-t));transform:translateX(-50%);text-align:center}
.h-timer .t{font:900 34px/1 var(--mono);color:#fff;text-shadow:2px 2px 0 #000}
.h-timer .t.warn{color:#ff5a5a}
.h-timer .m{font:800 12px var(--body);color:var(--yellow);text-shadow:1px 1px 0 #000}
.h-ride{position:absolute;left:50%;top:calc(70px + var(--safe-t));transform:translateX(-50%);background:rgba(23,17,12,.85);border:1px solid var(--yellow);border-radius:10px;padding:6px 12px;font:800 13px var(--mono);color:var(--yellow)}
.h-alert{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:italic 900 34px var(--title);color:#ff5a5a;-webkit-text-stroke:1.5px #000;text-shadow:3px 3px 0 #000;text-align:center;animation:shake .3s infinite}
@keyframes shake{50%{transform:translate(-50%,-50%) rotate(-2deg)}}
.h-big{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;font:italic 900 46px/1 var(--title);color:var(--yellow);-webkit-text-stroke:2px #1a0b00;text-shadow:3px 3px 0 #000;animation:pop .4s ease-out}
.h-big small{display:block;font:800 18px var(--body);-webkit-text-stroke:0;color:#fff;margin-top:8px}
@keyframes pop{from{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
.minimap{position:absolute;left:16px;bottom:calc(16px + var(--safe-b));width:170px;height:170px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 3px #000,0 6px 20px rgba(0,0,0,.6);overflow:hidden;background:#123;pointer-events:auto}
.minimap canvas{width:100%;height:100%;display:block}
.h-help{position:absolute;left:14px;top:calc(56px + var(--safe-t));background:rgba(23,17,12,.82);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.7;color:var(--ink2)}
.h-help kbd{font:800 11px var(--mono);background:rgba(255,255,255,.12);border-radius:4px;padding:0 5px;color:#fff}
.h-modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(12,8,5,.45);pointer-events:auto;padding:16px}
.h-modal .card{position:relative;inset:auto;right:auto;top:auto;bottom:auto;width:400px;max-height:86vh}
.h-toasts{position:absolute;left:50%;top:calc(168px + var(--safe-t));transform:translateX(-50%);display:grid;gap:6px;justify-items:center}
.h-toasts div{background:rgba(23,17,12,.9);border-left:4px solid var(--pink);padding:8px 14px;border-radius:8px;font-weight:700;animation:pop .25s ease-out}

/* touch controls */
.tc{display:none}
.touch .tc{display:block}
.joy{position:absolute;left:24px;bottom:calc(200px + var(--safe-b));width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.25);pointer-events:auto;touch-action:none}
.joy i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:rgba(233,162,59,.75);border:2px solid #fff}
.tbtns{position:absolute;right:18px;bottom:calc(30px + var(--safe-b));display:grid;grid-template-columns:repeat(2,64px);gap:12px;pointer-events:auto}
.tbtns button{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(23,17,12,.7);font:900 13px var(--body);touch-action:none}
.tbtns button.on{background:var(--pink);color:#1a0b16}
.tbtns .act{background:var(--yellow);color:#1a1200;border-color:#fff}
.touch .minimap{width:120px;height:120px;left:auto;right:16px;top:calc(110px + var(--safe-t));bottom:auto}
.touch .h-zone{bottom:auto;top:calc(240px + var(--safe-t));font-size:32px}
.touch .h-help{display:none}

@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:8px}
  .filters{order:3;flex-basis:100%}
  .brand .ver{display:none}
  .hide-s{display:none}
  .card{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:58vh;border-radius:20px 20px 0 0;padding-bottom:var(--safe-b);animation:sheet .25s ease-out}
  .card.min{max-height:96px;overflow:hidden}
  .card-grip{display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.35);margin:8px auto 0;cursor:pointer}
  .c-art{height:120px}
  .zoomctl{top:auto;bottom:calc(64px + var(--safe-b));transform:none}
  .hint{font-size:10px}
  .h-zone{font-size:30px}
}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}

#hud.cine>*:not(#h-modal){opacity:0;transition:opacity .4s}
#hud>*{transition:opacity .4s}
.h-btn .hide-s{display:inline}
@media (max-width:760px){.h-btn .hide-s{display:none}}
.touch .minimap{left:14px;right:auto;top:calc(58px + var(--safe-t));width:110px;height:110px}
.touch .h-toasts{top:calc(196px + var(--safe-t))}
.touch .h-ride{top:calc(176px + var(--safe-t))}
.touch .h-prompt{bottom:calc(140px + var(--safe-b))}

/* ---------- v0.2: vidas, missões, pings, morte ---------- */
.mplay{display:block;width:100%;margin:-2px 0 10px;padding:9px;font-size:12px}
.h-money .hearts{font-size:20px;letter-spacing:2px;margin-bottom:2px;text-shadow:1px 1px 0 #000}
.h-money .hearts span{color:#ff4f6a}.h-money .hearts .off{color:rgba(255,255,255,.25)}
.h-mission{position:absolute;left:50%;top:calc(12px + var(--safe-t));transform:translateX(-50%);min-width:260px;max-width:min(440px,92vw);background:rgba(23,17,12,.86);border:1px solid var(--line);border-radius:14px;padding:10px 14px;text-align:center}
.hm-t{font:italic 900 15px var(--title);color:var(--c);letter-spacing:.3px}
.hm-o{font-size:13px;color:var(--ink2);margin:3px 0 6px}
.hm-time{font:900 30px/1 var(--mono);color:#fff;text-shadow:2px 2px 0 #000;margin-bottom:6px}.hm-time.warn{color:#ff5a5a}
.hm-bar{display:flex;align-items:center;gap:8px;font:800 11px var(--mono);color:var(--ink2);margin-top:4px}
.hm-bar span{width:86px;text-align:right}.hm-bar i{flex:1;height:8px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}.hm-bar b{display:block;height:100%;border-radius:6px;transition:width .2s}
.h-sub{position:absolute;left:50%;bottom:calc(170px + var(--safe-b));transform:translateX(-50%);max-width:min(620px,90vw);background:rgba(0,0,0,.72);padding:8px 14px;border-radius:8px;font-size:15px;text-align:center}
.h-sub b{color:var(--yellow)}
.h-speed{position:absolute;right:20px;bottom:calc(20px + var(--safe-b));font:italic 900 34px var(--title);color:#fff;-webkit-text-stroke:1.5px #000;text-shadow:2px 2px 0 #000}
.h-speed.bo,.touch .h-speed.bo{right:auto!important;left:16px!important;bottom:auto!important;top:calc(58px + var(--safe-t))!important;font-size:28px!important}
@media (max-width:760px){.h-speed.bo,.touch .h-speed.bo{top:calc(176px + var(--safe-t))!important}}   /* ecrã estreito: o minimapa ocupa o canto, o conta-quilómetros fica logo abaixo */
.touch .h-speed{bottom:calc(240px + var(--safe-b));font-size:24px}
.h-big.fail{color:#ff5a5a}
.h-dead{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(60,0,20,.15),rgba(20,0,10,.55));pointer-events:none}
.h-dead div{font:italic 900 clamp(34px,7vw,72px)/1 var(--title);color:#ff4f6a;-webkit-text-stroke:2px #1a0006;text-shadow:4px 4px 0 #000;text-align:center;animation:pop .5s ease-out}
.h-dead small{display:block;font:800 18px var(--body);-webkit-text-stroke:0;color:#fff;margin-top:12px}
.h-pings{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.h-ping{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform}
.h-ping b{font-size:26px;line-height:1;filter:drop-shadow(0 2px 2px #000)}
.h-ping span{font:800 11px var(--body);background:rgba(23,17,12,.85);border:1px solid var(--c);color:#fff;padding:2px 7px;border-radius:8px;white-space:nowrap}
.h-ping::after{content:"";width:2px;height:10px;background:var(--c)}
.h-ping.edge b{background:var(--c);border-radius:50%;padding:4px;font-size:18px}
.h-ping.edge::after{display:none}

.h-dbg{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font:700 11px var(--mono);background:rgba(0,0,0,.7);padding:3px 8px;border-radius:6px;color:#7cf29c}

/* ---- v0.3: vida, colete, estrelas, arma, mira, detenção ---- */
.h-money .bars{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin:3px 0 4px}
.h-money .bars i{display:block;width:150px;height:8px;background:rgba(0,0,0,.55);border:1.5px solid #000;border-radius:4px;overflow:hidden}
.h-money .bars i b{display:block;height:100%;background:#ff4f6a;transition:width .2s}
.h-money .bars i b.low{animation:blink .5s steps(2) infinite}
.h-money .bars i.ar b{background:#3a8bff}
.h-money .wanted{position:relative;font:900 26px/1 var(--title);letter-spacing:1px;color:rgba(255,255,255,.18);-webkit-text-stroke:1.5px #000;margin-bottom:2px;display:inline-block}
.h-money .wanted span.on{color:#fff;text-shadow:0 0 10px #fff}
.h-money .wanted span.blink{animation:blink .45s steps(2) infinite}
.h-money .wanted i{position:absolute;left:0;bottom:-3px;height:3px;background:#7cf29c;border-radius:2px}
.h-money .wanted.active{color:rgba(255,255,255,.3)}
@keyframes blink{50%{opacity:.25}}
.h-weapon{position:absolute;right:16px;top:calc(190px + var(--safe-t));display:flex;align-items:center;gap:8px;background:rgba(23,17,12,.78);border:1px solid var(--line);border-radius:12px;padding:5px 10px;font:800 13px var(--body)}
.h-weapon b{font-size:22px}
.h-weapon em{font:900 14px var(--mono);color:var(--yellow);font-style:normal;margin-left:8px}
.h-cross{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000;pointer-events:none}
.h-cross::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#ff5a5a;border-radius:50%}
.h-cross{transition:transform .08s,border-color .08s,background .08s}
.h-cross.alvo{border-color:#ff5a5a;transform:scale(1.35)}
.h-cross.alvo::after{width:7px;height:7px;margin:-3.5px}
.h-cross.hit{transform:scale(.7);background:rgba(255,90,90,.45)}
.h-bust{position:absolute;left:50%;top:calc(30% + 40px);transform:translateX(-50%);text-align:center;font:italic 900 22px var(--title);color:#7aa8ff;-webkit-text-stroke:1px #000;text-shadow:2px 2px 0 #000}
.h-bust i{display:block;width:220px;height:10px;margin:6px auto 0;background:rgba(0,0,0,.6);border:1.5px solid #000;border-radius:5px;overflow:hidden}
.h-bust i b{display:block;height:100%;background:linear-gradient(90deg,#3a6bff,#ff3030)}
.h-big.busted{color:#7aa8ff}
.h-speed .vhp{display:block;width:120px;height:6px;margin:4px 0 0 auto;background:rgba(0,0,0,.6);border:1px solid #000;border-radius:3px;overflow:hidden;-webkit-text-stroke:0}
.h-speed .vhp b{display:block;height:100%}
.tbtns button.fire{background:#c8402c;color:#fff;border-color:#fff}
#hb-phone{border-color:#c8402c}
.touch .h-weapon{top:auto;bottom:calc(240px + var(--safe-b));right:18px}
.touch .h-money .bars i{width:110px}
.touch .h-money .wanted{font-size:20px}

/* ---- v0.4: cartões em banda desenhada (história do Dourado) ---- */
.h-modal .card.comic{background:#f3e3bd;color:#2b1d14;border:3px solid #2b1d14;box-shadow:6px 6px 0 #2b1d14;border-radius:6px;max-width:520px}
.card.comic .card-x{color:#2b1d14;background:transparent}
.comic-in{display:flex;gap:14px;padding:20px 20px 4px;align-items:flex-start}
.comic-face{flex:0 0 auto;border:3px solid #2b1d14;border-radius:10px;overflow:hidden;line-height:0;box-shadow:3px 3px 0 #2b1d14}
.comic-txt{font:500 15px/1.5 var(--body);color:#2b1d14}
.comic-txt p{margin:0 0 10px}
.comic-t{font:italic 900 22px/1.1 var(--title);color:#7a2a2a;margin-bottom:10px;letter-spacing:.3px}
.comic-small{font-size:12px;color:#6b5a48}
.card.comic .btn{background:#fffaf0;color:#2b1d14;border:2px solid #2b1d14;box-shadow:2px 2px 0 #2b1d14}
.card.comic .btn.play{background:#ffd23d}
@media (max-width:520px){.comic-in{flex-direction:column}.comic-face svg{width:72px;height:72px}}
#h-modal{position:relative;z-index:60}
#h-modal .h-modal{z-index:60}
.c-art.c-comic{display:flex;align-items:center;gap:14px;padding:0 18px;background:#f3e3bd;color:#2b1d14;border-bottom:3px solid #2b1d14}
.c-art.c-comic svg{border:3px solid #2b1d14;border-radius:10px;box-shadow:3px 3px 0 #2b1d14;flex:0 0 auto}
.c-art.c-comic b{display:block;font:italic 900 24px/1 var(--title);color:#7a2a2a}
.c-art.c-comic span{font:600 13px var(--body);color:#5a4636}

/* ---- Atlas 1.1: vista 3D ilustrada ---- */
.seg{display:inline-flex;border:1.5px solid var(--pink);border-radius:99px;overflow:hidden;background:rgba(23,17,12,.85)}
.seg button{border:0;background:transparent;padding:7px 12px;font:900 13px var(--title);color:var(--ink2)}
.seg button.on{background:var(--pink);color:#1a1200}
body.in-game .seg{display:none}
.atlas3d{position:absolute;inset:0;z-index:5;background:#efd2a0}
.a3-root,.a3-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.a3-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.a3-pin{position:absolute;left:0;top:0;transform-origin:50% 100%;pointer-events:auto;border:2px solid #2b1d14;background:#f3e3bd;color:#2b1d14;
  border-radius:7px;padding:4px 9px;font:800 12px/1.2 var(--body);box-shadow:2px 2px 0 #2b1d14;white-space:nowrap;margin-top:-8px}
.a3-pin::after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:#2b1d14}
.a3-pin.star{background:#ffd23d;font-size:13px}
.a3-pin.dourado{background:#c8402c;color:#fff}
.a3-pin b{font-weight:900}
.a3-pin .a3-face{width:30px;height:30px;border-radius:50%;border:2px solid #2b1d14;vertical-align:middle;margin:-4px 6px -4px -6px;background:#e9b45c}
.a3-ui{position:absolute;right:14px;bottom:calc(16px + var(--safe-b));display:flex;flex-direction:column;gap:8px}
.a3-ui button{min-width:44px;height:44px;border:2px solid #2b1d14;border-radius:10px;background:#f3e3bd;color:#2b1d14;font:900 18px var(--title);box-shadow:2px 2px 0 #2b1d14}
.a3-ui .a3-mode.on{background:#ffd23d}
.a3-ui .a3-tour{font-size:13px;background:#ffd23d;padding:0 10px}
.a3-hint{position:absolute;left:50%;bottom:calc(16px + var(--safe-b));transform:translateX(-50%);background:rgba(43,29,20,.82);color:#f3e3bd;font:600 12px var(--body);padding:6px 12px;border-radius:99px;max-width:calc(100vw - 120px);text-align:center;pointer-events:none}
.a3-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f3e3bd;color:#2b1d14;border:3px solid #2b1d14;box-shadow:5px 5px 0 #2b1d14;border-radius:8px;padding:16px 20px;width:min(320px,80vw);text-align:center}
.a3-load b{font:italic 900 20px var(--title);color:#7a2a2a}
.a3-load i{display:block;height:10px;margin:10px 0 6px;background:#e3cfa4;border:2px solid #2b1d14;border-radius:5px;overflow:hidden}
.a3-load i span{display:block;height:100%;width:5%;background:#e9a23b;transition:width .2s}
.a3-load small{font:600 12px var(--body);color:#6b5a48}
body.view3d #viewer .zoomctl,body.view3d #hint{display:none}
.loading{background:linear-gradient(90deg,rgba(23,17,12,.2),rgba(23,17,12,.88) 30%,rgba(23,17,12,.88) 70%,rgba(23,17,12,.2)),url(../assets/rua-azulejo.jpg) left center/auto 100% no-repeat,url(../assets/rua-electrico.jpg) right center/auto 100% no-repeat,#17110c!important}
.a3-load{background:linear-gradient(rgba(243,227,189,.9),rgba(243,227,189,.95)),url(../assets/rua-electrico.jpg) center/cover}
.c-art.c-comic{background:linear-gradient(90deg,rgba(243,227,189,.96) 55%,rgba(243,227,189,.35)),url(../assets/rua-electrico.jpg) right center/auto 220% no-repeat}