html,body{height:100%;overflow:hidden;overscroll-behavior:none}
#map{position:fixed;inset:0;background:#05030f}
.maplibregl-ctrl-attrib{background:rgba(5,3,15,.7)!important;color:#888;font-size:10px}.maplibregl-ctrl-attrib a{color:#9be9f7}
.maplibregl-popup-content{background:#140e2d;color:#e8e6ff;border:1px solid rgba(34,211,238,.35);border-radius:14px;box-shadow:0 0 24px rgba(168,85,247,.35)}.maplibregl-popup-tip{border-top-color:#140e2d!important;border-bottom-color:#140e2d!important}.maplibregl-popup-close-button{color:#fff;font-size:18px}
.brand{font-family:Orbitron,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.06em;background:linear-gradient(90deg,var(--c),var(--p),var(--k));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(168,85,247,.7))}
.nav{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:900;display:flex;background:rgba(14,10,32,.88);backdrop-filter:blur(14px);border:1px solid rgba(34,211,238,.3);border-radius:22px;padding:5px;box-shadow:0 0 24px rgba(34,211,238,.18)}
.nav button{flex:1;background:transparent;box-shadow:none;color:#a9a3cf;padding:7px 2px;font-size:1.05rem;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:16px}.nav button span{font-size:.68rem;letter-spacing:.04em}.nav button.on{color:#fff;background:rgba(168,85,247,.25);box-shadow:0 0 14px rgba(168,85,247,.4)}
#home{position:fixed;inset:0;z-index:600;overflow:auto;background-color:#05030f;background-image:radial-gradient(900px 500px at 80% -10%,rgba(168,85,247,.28),transparent),radial-gradient(700px 500px at -10% 100%,rgba(34,211,238,.2),transparent);transition:transform .35s ease,opacity .35s}
#home:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(34,211,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px);background-size:40px 40px}
body:not([data-v=home]) #home{transform:translateY(100%);opacity:0;pointer-events:none}
.hwrap{max-width:640px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px 110px;position:relative}
.hhead{display:flex;justify-content:space-between;align-items:center}.greet{font-family:Orbitron,sans-serif;font-size:1.6rem;margin-top:14px;background:linear-gradient(90deg,#fff,#9be9f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.radar{position:relative;width:170px;height:170px;margin:14px auto 6px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.12),rgba(5,3,15,.4) 70%);border:1px solid rgba(34,211,238,.35);overflow:hidden;box-shadow:0 0 30px rgba(34,211,238,.2);transition:height .4s,width .4s,opacity .4s}
.radar.done{width:90px;height:90px;opacity:.7}
.radar .ring{position:absolute;border:1px solid rgba(34,211,238,.25);border-radius:50%}.r1{inset:25%}.r2{inset:12%}.r3{inset:38%}
.radar .sweep{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(168,85,247,.55),transparent 25%);animation:spin 2.2s linear infinite;border-radius:50%}
.radar .me0{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#22d3ee;box-shadow:0 0 12px #22d3ee}
.blip{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#ec4899;box-shadow:0 0 10px #ec4899;animation:blip 1.6s ease-out both}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes blip{from{transform:scale(0);opacity:0}50%{transform:scale(1.8);opacity:1}to{transform:scale(1)}}
.sec{margin-top:18px}.sec h4{font-family:Orbitron,sans-serif;font-size:.78rem;letter-spacing:.1em;color:#22d3ee;text-transform:uppercase;margin-bottom:8px;display:flex;justify-content:space-between}
.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}.strip::-webkit-scrollbar{display:none}
.chipc{flex:0 0 auto;scroll-snap-align:start;background:rgba(20,14,45,.7);border:1px solid rgba(168,85,247,.35);border-radius:16px;padding:12px;min-width:150px;max-width:190px;cursor:pointer;animation:rise .4s both}.chipc .e{font-size:1.4rem}.chipc b{display:block;margin-top:4px;font-size:.9rem}.chipc small{color:#a9a3cf;font-size:.76rem}
.card{display:flex;gap:12px;align-items:center;background:rgba(20,14,45,.6);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:12px;margin:8px 0;cursor:pointer;animation:rise .4s both}.card.feat{border-color:rgba(34,211,238,.5);box-shadow:0 0 18px rgba(34,211,238,.18)}.card.ev{border-color:rgba(236,72,153,.5);box-shadow:0 0 18px rgba(236,72,153,.18)}
.card .ic{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:rgba(168,85,247,.18)}.card b{display:block}.card small{color:#a9a3cf}.card .go{margin-left:auto;padding:8px 12px;font-size:.8rem}
.promo{font-size:.64rem;color:#22d3ee;letter-spacing:.08em;text-transform:uppercase}
.orb{width:44px;height:44px;padding:0;border-radius:50%;font-size:1.1rem;background:radial-gradient(circle at 35% 30%,#fff,#22d3ee 25%,#a855f7 60%,#ec4899);box-shadow:0 0 22px rgba(168,85,247,.8);animation:orb 3s ease-in-out infinite}.orb.sm{width:42px;height:42px;flex:0 0 42px}
@keyframes orb{50%{box-shadow:0 0 34px rgba(34,211,238,.9)}}
.top{position:fixed;left:10px;right:10px;top:max(10px,env(safe-area-inset-top));z-index:500;display:flex;gap:8px;align-items:center}
.sbar{flex:1;display:flex;background:rgba(20,14,45,.82);backdrop-filter:blur(12px);border:1px solid rgba(34,211,238,.35);border-radius:14px}.sbar input{border:0;background:transparent}.sbar button{padding:8px 12px;margin:3px;border-radius:11px}
#res{position:fixed;left:10px;right:10px;top:64px;z-index:650;max-height:45vh;overflow:auto;display:none;padding:4px}#res div{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer}#res small{display:block;color:#a9a3cf}
.fab{position:fixed;right:12px;top:70px;z-index:500;display:flex;flex-direction:column;gap:8px}.fab button{width:46px;height:46px;padding:0;border-radius:50%;font-size:1rem}.fab button.on{box-shadow:0 0 0 2px #22d3ee,0 0 20px #22d3ee}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:700;background:rgba(14,10,32,.92);backdrop-filter:blur(16px);border-top:1px solid rgba(34,211,238,.3);border-radius:22px 22px 0 0;padding:6px 14px 86px;max-height:52vh;overflow:auto;transition:transform .3s}
.sheet.min{transform:translateY(calc(100% - 150px))}
.grab{width:46px;height:5px;border-radius:9px;background:rgba(255,255,255,.3);margin:4px auto 10px}
body[data-v=home] .sheet,body[data-v=home] .top,body[data-v=home] .fab{display:none}
.step{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem}.step i{font-style:normal;width:26px;text-align:center;color:var(--c)}.step small{margin-left:auto;color:#a9a3cf;white-space:nowrap}.step.cur{color:#fff;text-shadow:0 0 10px var(--c)}.step.past{opacity:.35}
.sum{font-family:Orbitron,sans-serif;color:var(--c);margin:6px 0}
.it{padding:10px;border-radius:12px;background:rgba(255,255,255,.04);margin:6px 0;display:flex;gap:10px;align-items:center}.it .r{margin-left:auto;display:flex;gap:6px}.it .r button{padding:6px 10px;font-size:.78rem}.it small{color:#a9a3cf;display:block}
.me{width:28px;height:28px;position:relative}.me .dot{position:absolute;inset:7px;border-radius:50%;background:var(--c);box-shadow:0 0 calc(14px*var(--glow)) var(--c);border:2px solid #fff}.me .cone{position:absolute;left:50%;top:-12px;margin-left:-9px;border:9px solid transparent;border-bottom:18px solid rgba(34,211,238,.8)}.me .pulse{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--c);animation:pulse 2s infinite}
@keyframes pulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.4);opacity:0}}
.pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--p);border:2px solid #fff;box-shadow:0 0 calc(12px*var(--glow)) var(--p)}
.biz{width:30px;height:30px;transform:rotate(45deg);border-radius:6px;background:linear-gradient(135deg,#22d3ee,#a855f7);border:2px solid #fff;box-shadow:0 0 calc(18px*var(--glow)) #22d3ee}.biz span{display:block;transform:rotate(-45deg);text-align:center;line-height:26px;font-size:14px;color:#fff}
.evt{font-size:30px;line-height:30px;color:#ec4899;text-shadow:0 0 calc(14px*var(--glow)) #ec4899,0 0 3px #fff}
.modal{position:fixed;inset:0;z-index:1000;background:rgba(3,2,10,.7);display:none;padding:14px;overflow:auto}.modal.on{display:block}.mc{max-width:480px;margin:40px auto 100px;background:rgba(20,14,45,.96);border:1px solid rgba(34,211,238,.35);border-radius:20px;padding:16px;box-shadow:0 0 40px rgba(168,85,247,.4)}.mc img{width:100%;border-radius:14px;max-height:40vh;object-fit:cover;margin-bottom:10px}.mc h2{font-family:Orbitron,sans-serif;font-size:1.2rem}.tag{display:inline-block;background:rgba(168,85,247,.2);color:#e9d5ff;border-radius:99px;padding:2px 10px;font-size:.78rem;margin:6px 0}
.toast{position:fixed;left:12px;right:12px;top:max(12px,env(safe-area-inset-top));z-index:950;display:none;cursor:pointer}.toast.on{display:block;animation:rise .4s}
#vo{position:fixed;inset:0;z-index:1100;background:rgba(3,2,10,.85);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}#vo.on{display:flex}
.vorb{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#22d3ee 22%,#a855f7 55%,#ec4899 80%,transparent 82%);box-shadow:0 0 60px #a855f7,0 0 120px rgba(34,211,238,.5);animation:vb 1.2s ease-in-out infinite}
@keyframes vb{50%{transform:scale(1.12);box-shadow:0 0 90px #22d3ee,0 0 160px rgba(236,72,153,.5)}}#vtxt{font-family:Orbitron,sans-serif;font-size:1.2rem}
#hud{position:fixed;inset:0;z-index:1050;background:#000;display:none;flex-direction:column}#hud.on{display:flex}#hudIn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:#22d3ee}#hud.mir #hudIn{transform:scaleX(-1)}
#harrow{font-size:9rem;line-height:1;color:#22d3ee;text-shadow:0 0 30px #22d3ee,0 0 60px #a855f7}#hdist{font-family:Orbitron,sans-serif;font-size:3rem;color:#fff;text-shadow:0 0 20px #22d3ee}#hstep{font-size:1.4rem;margin:10px 0 24px;color:#e8e6ff}
.hrow{display:flex;gap:28px}.hrow b{display:block;font-family:Orbitron,sans-serif;font-size:2rem;color:#ec4899;text-shadow:0 0 16px #ec4899}.hrow small{color:#a9a3cf}
.hctl{display:flex;gap:8px;padding:12px 12px max(14px,env(safe-area-inset-bottom))}.hctl button{flex:1}
/* v4 map-first */
body[data-v=home] .sheet{display:none}
body[data-v=home] .top,body[data-v=home] .fab{display:flex}
#home{top:auto;bottom:0;height:68vh;border-radius:22px 22px 0 0;border-top:1px solid rgba(34,211,238,.35);box-shadow:0 -10px 40px rgba(0,0,0,.6);z-index:720;background-color:rgba(8,5,22,.94)!important;backdrop-filter:blur(14px)}
#home:before{display:none}
#home .hwrap{padding:4px 14px 100px}
#home .hhead{align-items:center}#home .greet{margin-top:0;font-size:1.25rem}
#home .radar{width:64px;height:64px;margin:0}#home .radar.done{width:64px;height:64px;opacity:.9}
body:not([data-v=home]) #home{transform:translateY(105%);opacity:1}
.chips{position:fixed;left:0;right:0;top:calc(max(10px,env(safe-area-inset-top)) + 54px);z-index:480;display:flex;gap:6px;overflow-x:auto;padding:0 10px}.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;padding:7px 12px;font-size:.8rem;border-radius:99px;background:rgba(14,10,32,.85);color:#cfd3ff;border:1px solid rgba(168,85,247,.35);box-shadow:none;backdrop-filter:blur(8px)}.chips button.on{background:linear-gradient(90deg,var(--c),var(--p),var(--k));color:#fff;box-shadow:0 0 12px rgba(168,85,247,.6)}
.fab{top:calc(max(10px,env(safe-area-inset-top)) + 100px)}
.sheet{max-height:46vh;padding-bottom:84px}
.sheet.min{transform:translateY(calc(100% - 150px))}
.recenter{position:fixed;left:50%;transform:translateX(-50%);bottom:170px;z-index:760;display:none;padding:10px 18px;border-radius:99px}
body.follow-off.navOn .recenter{display:block}
.repbtn{position:fixed;right:12px;bottom:200px;z-index:760;width:58px;height:58px;padding:0;border-radius:50%;font-size:1.5rem;background:radial-gradient(circle at 35% 30%,#fde68a,#f97316 45%,#ec4899);box-shadow:0 0 24px rgba(249,115,22,.7)}
body.navOn .repbtn{bottom:120px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.rgrid button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;font-size:.8rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:none}.rgrid button span{font-size:1.7rem}
.rmk{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(10,6,24,.9);border:2px solid #f97316;box-shadow:0 0 calc(16px*var(--glow)) #f97316;animation:bz 2s ease-in-out infinite}.rmk.police{border-color:#60a5fa;box-shadow:0 0 calc(16px*var(--glow)) #60a5fa}.rmk.closed{border-color:#ef4444;box-shadow:0 0 calc(16px*var(--glow)) #ef4444}
@keyframes bz{50%{transform:scale(1.08)}}
.bcard{position:fixed;left:10px;right:10px;bottom:84px;z-index:800;display:none}.bcard.on{display:block;animation:rise .25s}.bcard .mc{margin:0 auto;max-width:520px;padding:14px}.bcard .mc img{max-height:24vh}
body.navOn .bcard{bottom:100px}
body.navOn .ui,body.navOn #home{display:none!important}
#nbanner{position:fixed;left:8px;right:8px;top:max(8px,env(safe-area-inset-top));z-index:770;display:none;background:linear-gradient(135deg,rgba(14,10,40,.96),rgba(40,10,60,.96));border:1px solid rgba(34,211,238,.45);border-radius:20px;padding:12px 14px;box-shadow:0 0 30px rgba(34,211,238,.25)}
body.navOn #nbanner,body.navOn #nbar{display:flex}
#nbanner{flex-direction:column}.nb1{display:flex;gap:14px;align-items:center}#narrow{font-size:3.4rem;line-height:1;color:#22d3ee;text-shadow:0 0 18px #22d3ee;min-width:56px;text-align:center}
#ndist{font-family:Orbitron,sans-serif;font-size:1.7rem;color:#fff}#nstreet{font-size:1.1rem;color:#e8e6ff;font-weight:700}
#lanes{display:flex;gap:4px;margin-top:8px;justify-content:center}#lanes:empty{display:none}#lanes span{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);color:#555a80;font-size:1.2rem;border:1px solid rgba(255,255,255,.1)}#lanes span.v{color:#22d3ee;border-color:#22d3ee;text-shadow:0 0 8px #22d3ee}
#nthen{font-size:.82rem;color:#a9a3cf;margin-top:6px}#nthen:empty{display:none}
#nbar{position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:770;display:none;align-items:center;gap:10px;background:rgba(10,6,26,.95);border:1px solid rgba(168,85,247,.4);border-radius:20px;padding:10px 12px;box-shadow:0 0 24px rgba(168,85,247,.3)}
#nbar>div{display:flex;flex-direction:column;align-items:center;flex:1}#nbar b{font-family:Orbitron,sans-serif;font-size:1.1rem;color:#fff}#nbar small{font-size:.66rem;color:#a9a3cf}#nbar .spd b{color:#ec4899;text-shadow:0 0 10px #ec4899}#nbar button{padding:9px 12px;font-size:.85rem}
#arrive{position:fixed;inset:0;z-index:1080;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(3,2,10,.88);text-align:center}#arrive.on{display:flex}#arrive h2{font-family:Orbitron,sans-serif;font-size:1.6rem}.vorb.small{width:110px;height:110px}
button.big{flex:1;font-size:1.1rem;padding:14px}
.alt{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);margin:6px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.alt.on{border-color:var(--c);box-shadow:0 0 14px rgba(34,211,238,.3)}.alt b{font-family:Orbitron,sans-serif;color:#fff}.alt small{color:#a9a3cf}
.toast{z-index:1000}body.navOn .toast{top:calc(max(8px,env(safe-area-inset-top)) + 150px)}