/* ============================================================================
   livemap.css — 📍 Live map mode, place labels, route banner / cards and the camera-view bar.
   Loaded after style.css. Uses its tokens (--ink, --paper, --yellow …) and the safe-area vars --sl/--sr/--st/--sb.
   The layout is landscape-first: one column on the left (banner, status, card), the top bar across, the map on the right.
   ============================================================================ */

/* ---- place labels (views.js) */
#lm-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lm{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;background:rgba(255,253,246,.95);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:2px 9px 2px 6px;font:800 11.5px/1.25 Figtree,system-ui,sans-serif;white-space:nowrap;pointer-events:auto;cursor:pointer;box-shadow:0 2px 0 rgba(27,42,52,.45);will-change:transform;-webkit-user-select:none;user-select:none}
.lm::after{content:"";position:absolute;left:50%;bottom:-8px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--red);border:1.5px solid var(--ink)}
.lm .lm-ic{font-size:11px;color:var(--red)}
.lm i{font-style:normal;font-weight:700;color:#6b7a82;font-size:10.5px}
.lm.mrt{background:#1b2a34;color:#fff}.lm.mrt::after{background:#fff}.lm.mrt i{color:#9fd8b0}.lm.mrt .lm-ic{color:#fff}
.lm.place{background:rgba(232,241,251,.95)}.lm.place::after{background:var(--blue)}.lm.place .lm-ic{color:var(--blue)}
.lm.dest,.lm.pin{background:var(--orange);color:#fff;border-color:var(--ink)}.lm.dest i,.lm.pin i{color:#fff3d6}.lm.dest .lm-ic,.lm.pin .lm-ic{color:#fff}.lm.dest::after,.lm.pin::after{background:var(--orange)}
.lm.sel{background:var(--yellow);outline:3px solid #fff}.lm.sel::after{background:var(--yellow)}
.lm.sel.mrt{background:var(--yellow);color:var(--ink)}
.lm.area{pointer-events:none;background:none;border:0;box-shadow:none;padding:0;font:700 15px/1 Fredoka,Figtree,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.45)}
.lm.area::after,.lm.area .lm-ic,.lm.area i{display:none}
.lm-chip{display:inline-block;border-radius:4px;color:#fff;font:800 9.5px/1.3 Figtree,sans-serif;padding:0 4px}
body.touch .lm{padding:5px 10px 5px 7px;font-size:12px}

/* ---- camera view bar (top-down / isometric / orbit) */
#view-bar{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:4px;background:var(--panel);border:2px solid var(--ink);border-radius:999px;padding:2px 4px 2px 12px;font:800 12.5px Figtree,sans-serif;pointer-events:auto;box-shadow:var(--shadow);white-space:nowrap;z-index:2}
#view-bar.on{display:flex}
#view-bar b{margin-right:4px}
#view-bar button{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-size:15px;line-height:1;padding:0}
#view-bar button.off{opacity:.45}
#view-bar button[hidden]{display:none}
body:not(.touch) #view-bar{left:14px;top:70px;transform:none}
body.touch #view-bar{top:calc(var(--st) + 40px)}
body.touch #view-bar button{width:38px;height:38px}
body.live #view-bar,body.nohud #view-bar{display:none!important}

/* ---- live map: top bar, banner, status */
#live-ui{display:none}
#live-ui.on{display:block}
#lv-bar{position:absolute;left:calc(var(--sl) + 10px);right:calc(var(--sr) + 10px);top:calc(var(--st) + 8px);display:flex;gap:6px;align-items:center;pointer-events:none;z-index:3}
#lv-bar>*{pointer-events:auto}
body.touch #lv-bar{right:calc(var(--sr) + 258px)}
#lv-bar button{height:38px;min-width:38px;border:2px solid var(--ink);background:var(--panel);border-radius:12px;font:800 13px Figtree,sans-serif;padding:0 8px;box-shadow:0 2px 0 rgba(27,42,52,.5);color:var(--ink);white-space:nowrap}
#lv-bar button:active{background:var(--yellow)}
#lv-bar button.off{opacity:.5}
#lv-bar #lv-north span{margin-left:2px;font-size:12px}
#lv-bar .stop,#lv-chip .stop{background:var(--red);color:#fff}
#lv-search{position:relative;flex:1 1 150px;min-width:110px;max-width:430px}
#lv-q{width:100%;height:38px;border:2px solid var(--ink);border-radius:12px;padding:0 10px;font:600 14px Figtree,sans-serif;background:var(--panel);outline:none;box-shadow:0 2px 0 rgba(27,42,52,.5);-webkit-user-select:text;user-select:text}
body.touch #lv-q{font-size:16px}
#lv-results{display:none;position:absolute;left:0;right:0;top:44px;max-height:min(55vh,330px);overflow:auto;background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink),0 10px 26px rgba(0,0,0,.3);padding:4px;z-index:5;-webkit-overflow-scrolling:touch}
#lv-results.on{display:block}
.lv-res{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;cursor:pointer;min-height:40px}
.lv-res:hover,.lv-res:active{background:#f6efd8}
.lv-res .n{flex:1;min-width:0}.lv-res b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-res small{display:block;color:#6b7a82;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-res span{font-size:12px;color:#8a979e;font-variant-numeric:tabular-nums}
#lv-banner{position:absolute;left:calc(var(--sl) + 10px);top:calc(var(--st) + 76px);width:min(400px,calc(100% - 20px - var(--sl) - var(--sr)));display:none;gap:10px;align-items:center;background:#0e3a66;color:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:7px 12px 7px 10px;box-shadow:0 3px 0 var(--ink),0 8px 20px rgba(0,0,0,.28);pointer-events:none}
#lv-banner.on{display:flex}
#lv-banner .ar{flex:none;width:42px;text-align:center;font:700 34px/1 Fredoka,Figtree,sans-serif;color:#ffd24a}
#lv-banner .tx{min-width:0}
#lv-banner b{display:block;font:700 16.5px/1.15 Fredoka,Figtree,sans-serif}
#lv-banner small{display:block;font-size:11.5px;color:#bcd7f1;margin-top:1px}
#lv-status{position:absolute;left:calc(var(--sl) + 10px);top:calc(var(--st) + 52px);max-width:min(560px,calc(100% - 20px - var(--sl) - var(--sr)));background:rgba(14,30,46,.78);color:#fff;border-radius:8px;padding:2px 9px;font:700 11px/1.5 Figtree,sans-serif;pointer-events:auto}
body.touch #lv-status{max-width:min(420px,calc(100% - 20px - var(--sl) - var(--sr)))}
#lv-status .lk{color:#9fe8b4}
#lv-status .ok{color:#7dff9a}.warn{color:#ffd24a}
#lv-status .pulse{animation:lvpulse 1.2s ease-in-out infinite}
#lv-status button{border:1.5px solid #fff;background:none;color:#fff;border-radius:6px;font:800 11px Figtree,sans-serif;padding:0 7px;margin-left:3px}
@keyframes lvpulse{50%{opacity:.4}}
#live-ui:not(.on) #lv-status{display:none}
#lv-banner.on ~ #lv-status{top:calc(var(--st) + 52px)}

/* ---- bottom card: idle / place info / route / arrival */
#lv-card{position:absolute;left:calc(var(--sl) + 10px);bottom:calc(var(--sb) + 10px);width:min(420px,calc(100% - 20px - var(--sl) - var(--sr)));display:none;background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink),0 10px 26px rgba(0,0,0,.28);padding:8px 10px 9px;pointer-events:auto;font-size:13px;max-height:calc(var(--app-h,100vh) - 150px - var(--st) - var(--sb));overflow:auto;-webkit-overflow-scrolling:touch}
#lv-card.on{display:block}
body.touch:not(.live) #lv-card{left:50%;transform:translateX(-50%);width:min(400px,calc(100vw - 500px));bottom:calc(var(--sb) + 56px)}
.cd-h{display:flex;gap:8px;align-items:flex-start}
.cd-t{flex:1;min-width:0}
.cd-t b{display:block;font:700 16.5px/1.15 Fredoka,Figtree,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-t small{display:block;color:#56656e;font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-h .x{flex:none;width:30px;height:30px;border:2px solid var(--ink);background:#fff;border-radius:8px;font-weight:800;padding:0}
body.touch .cd-h .x{width:38px;height:38px}
.cd-d{margin:5px 0 2px;color:#3d4d57;font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cd-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cd-b button,.cd-m button{border:2px solid var(--ink);background:#fff;border-radius:10px;padding:5px 10px;font:800 12.5px Figtree,sans-serif;min-height:34px;color:var(--ink)}
body.touch .cd-b button,body.touch .cd-m button{min-height:40px;font-size:13px}
@media (max-height:480px){body.touch .cd-b button{padding:3px 8px;font-size:12px;min-height:38px}body.touch .cd-b{gap:5px;margin-top:5px}}
.cd-b .pri{background:var(--yellow);box-shadow:0 2px 0 var(--ink)}
.cd-b .on{background:var(--orange);color:#fff}
.cd-b .ghost{background:none;border-color:#9aa4aa;color:#56656e}
.cd-b button:active,.cd-m button:active{background:var(--yellow)}
.cd-m{margin-top:7px;padding:5px 8px;border-radius:9px;background:#e8f1fb;border:1.5px solid #9cc2ec;font-size:12px;line-height:1.4;color:#12395f}
.cd-m button{margin-left:4px;padding:2px 8px;min-height:28px}
body.touch .cd-m button{min-height:34px}
.cd-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;font-size:12.5px}
.cd-steps li{display:flex;gap:6px;align-items:flex-start;padding:2px 4px;border-radius:7px;color:#56656e}
.cd-steps li.cur{background:#fff2c2;color:var(--ink);font-weight:800}
.cd-steps li.done{opacity:.45;text-decoration:line-through}
.cd-steps i{font-style:normal;flex:none}
.cd-steps small{color:#6b7a82;font-weight:600}
#lv-chip{position:absolute;top:calc(var(--st) + 8px);left:50%;transform:translateX(-50%);display:none;gap:6px;pointer-events:auto;z-index:3}
#lv-chip.on{display:flex}
body.touch #lv-chip{top:calc(var(--st) + 44px)}
#lv-chip button{height:36px;border:2px solid var(--ink);background:var(--yellow);border-radius:12px;font:800 13px Figtree,sans-serif;padding:0 12px;box-shadow:0 2px 0 var(--ink);color:var(--ink)}
@media (max-height:480px){
  .cd-steps li:not(.cur){display:none}
  .cd-steps{margin-top:3px}
  .cd-d{-webkit-line-clamp:2;margin:3px 0 0}
  .cd-t b{font-size:15px}
  #lv-card{padding:6px 9px 7px}
  .cd-b{margin-top:5px}
  #lv-banner{top:calc(var(--st) + 74px);padding:5px 10px 5px 8px}
  #lv-banner b{font-size:15.5px}
  #lv-banner .ar{font-size:30px;width:36px}
}

/* ---- in live mode the game HUD gets out of the way */
body.live #minimap,body.live #passport,body.live #wallet,body.live #quest-btn,body.live #env-btn,body.live #help-btn,body.live #mrt-hint,
body.live #loc,body.live #clock,body.live #mode,body.live #prompt,body.live #speedo,body.live #fare,body.live #train-panel,body.live #story-card,body.live #story-xp,body.live #story-banner,
body.live #touch .tb:not(.top),body.live #t-ghost,body.live #t-stick{display:none!important}
body.live #toast{left:auto;right:calc(var(--sr) + 10px);top:calc(var(--st) + 56px);transform:translate(0,-10px);max-width:min(380px,calc(100vw - 440px));text-align:left}
body.live #toast.show{transform:none}
body.live.touch #toast{top:calc(var(--st) + 56px);right:calc(var(--sr) + 10px);left:auto}
@media (max-width:720px){ body.live #toast{max-width:calc(100vw - 20px);top:calc(var(--st) + 120px)} }

/* ---- first-run notice, title / pause-menu additions, confetti */
.lv-modal{position:fixed;inset:0;z-index:25;display:none;place-items:center;padding:calc(10px + var(--st)) calc(10px + var(--sr)) calc(10px + var(--sb)) calc(10px + var(--sl));background:rgba(10,25,40,.55)}
.lv-modal.open{display:grid}
.lv-modal-card{width:min(470px,100%);max-height:100%;overflow:auto;background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink),0 20px 60px rgba(0,0,0,.35);padding:14px 18px 16px;text-align:center}
.lv-ico{font-size:36px;line-height:1}
.lv-modal-card h2{margin:6px 0 6px;font:700 21px/1.15 Fredoka,Figtree,sans-serif}
.lv-priv{margin:6px 0;padding:7px 10px;background:#e7f6ea;border:2px solid #9ad1a6;border-radius:10px;font-size:13.5px;color:#14502a}
.lv-small{margin:6px 0 10px;font-size:12.5px;color:#56656e}
.lv-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lv-btns button{border:3px solid var(--ink);background:#fff;border-radius:12px;padding:9px 16px;font:700 16px Fredoka,Figtree,sans-serif;min-height:46px;box-shadow:0 3px 0 var(--ink)}
.lv-btns .pri{background:var(--yellow)}
.lv-btns .ghost{border-color:#9aa4aa;color:#56656e;box-shadow:none}
.live-btn{display:block;margin:12px auto 0;border:3px solid var(--ink);background:#fff;border-radius:12px;padding:8px 22px;font:700 17px Fredoka,Figtree,sans-serif;box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.live-btn:disabled{opacity:.5;cursor:wait}
.live-btn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.live-note{margin-top:5px;font-size:12px;color:#56656e}
@media (max-height:500px){
  body.touch .live-btn{margin-top:6px;padding:6px 18px;font-size:15px;min-height:40px}
  body.touch .live-note{display:none}
}
#viewrow{align-items:center}
body.touch #openlive{order:2}
body.touch #viewrow{order:1}
.lv-confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.lv-confetti i{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;animation:lvconf 2s linear forwards}
@keyframes lvconf{to{transform:translate(var(--dx,0),110vh) rotate(720deg)}}

body.live #music-toast{left:auto;right:calc(var(--sr) + 10px);top:auto;bottom:calc(var(--sb) + 10px)}
#lm-layer{z-index:1}
#lv-card,#lv-banner,#lv-status{z-index:4}