/* ==========================================================================
   Burn City UI v7 "Ember Glass" — the one design system for every overlay.
   Loaded LAST (end of <body>) so it styles the panels other modules inject.
   style.css keeps only structure; colour, type, spacing, radii and layout
   zones live here as tokens.
   ========================================================================== */
:root{
  /* type */
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --t-xs:11px;--t-sm:12.5px;--t-md:14px;--t-lg:16px;--t-xl:20px;
  /* surfaces */
  --glass:rgba(17,12,11,.64);
  --glass-2:rgba(14,10,10,.88);
  --glass-3:rgba(10,7,7,.96);
  --blur:blur(18px) saturate(150%);
  --edge:rgba(255,178,128,.13);
  --edge-2:rgba(255,178,128,.26);
  --hair:rgba(255,255,255,.07);
  --fill:rgba(255,255,255,.05);
  --fill-2:rgba(255,255,255,.09);
  /* text */
  --txt:#f6efe9;--txt-2:#c7b8ae;--txt-3:#8f8078;
  /* brand */
  --ember:#ff6b1a;--ember-hi:#ffa24d;--ember-lo:#c23f0c;
  --ember-soft:rgba(255,107,26,.14);--ember-line:rgba(255,120,40,.45);
  --ember-grad:linear-gradient(135deg,#ff5418 0%,#ff8a2a 60%,#ffb35c 100%);
  --cool:#62e4ff;--ok:#43f39a;--warn:#ffc24a;--bad:#ff5a4d;
  /* shape */
  --r-xs:6px;--r-sm:10px;--r:14px;--r-lg:20px;--r-pill:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --tap:44px;--ctl:40px;
  --shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  --glow:0 0 0 1px var(--ember-line),0 8px 26px rgba(255,90,20,.32);
  --ease:cubic-bezier(.2,.8,.2,1);
  /* safe areas + zones */
  --sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);
  --edge-x:16px;--edge-y:14px;
  --top:calc(var(--sa-t) + var(--edge-y));          /* top row y */
  --row2:calc(var(--top) + var(--ctl) + 10px);       /* second row y (status chips) */
  --left:calc(var(--sa-l) + var(--edge-x));
  --right:calc(var(--sa-r) + var(--edge-x));
  --bottom:calc(var(--sa-b) + var(--edge-y));
  --ctl-h:0px;                                        /* height reserved by touch controls (set per mode) */
  /* z scale */
  --z-world:2;--z-hud:10;--z-ctl:30;--z-pop:45;--z-panel:75;--z-modal:100;--z-top:130;
  /* legacy aliases (older modules) */
  --ui-font:var(--f-ui);--ui-mono:var(--f-mono);--line:var(--hair);--line-2:var(--edge-2);--fire:var(--ember);--fire-2:var(--ember-hi);--ice:var(--cool);--r-sm-legacy:var(--r-sm);
}
@media (min-width:1600px){:root{--edge-x:22px;--edge-y:18px;--t-sm:13px;--t-md:15px}}
html,body{font-family:var(--f-ui);color:var(--txt);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}

/* ---------- 1. base controls ---------- */
button{font-family:var(--f-ui);font-weight:600;letter-spacing:.01em;color:var(--txt);
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-sm);box-shadow:none;cursor:pointer;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s,transform .12s var(--ease),box-shadow .18s}
@media (hover:hover){button:hover{background:rgba(40,26,20,.78);border-color:var(--edge-2);color:#fff}}
button:active{transform:scale(.96)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.on,button[aria-pressed=true]{background:var(--ember-grad);border-color:transparent;color:#1b0700}
:focus-visible{outline:2px solid var(--cool)!important;outline-offset:2px}
select{font-family:var(--f-ui);font-size:var(--t-sm);background:var(--fill);color:var(--txt);border:1px solid var(--edge);border-radius:var(--r-sm);padding:0 10px}
select option{background:#140e0c;color:var(--txt)}
input[type=range]{accent-color:var(--ember);background:transparent;border:0}
input[type=checkbox]{accent-color:var(--ember)}
input[type=text],input[type=number],input:not([type]){font-family:var(--f-ui)}
kbd,.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:5px;
  border:1px solid var(--edge-2);border-bottom-width:2px;background:var(--fill);color:var(--txt);font:600 11px var(--f-mono);vertical-align:middle;box-sizing:border-box}
.dim{opacity:1;color:var(--txt-3)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,160,100,.3) transparent}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:rgba(255,160,100,.3);border-radius:6px}

/* shared glass surface */
#hud,#more,#info,#music,#recap,#bagList,#guide .gbox,#keysBox,#rPanel,#fPanel,#fUI,#vMenu>div,#skGear .sg-card,#aegisModal .am-card,#cityChat .cbody,#cityChat .cch,#rpBar{
  background:var(--glass-2)!important;border:1px solid var(--edge)!important;box-shadow:var(--shadow)!important;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--txt);font-family:var(--f-ui)}
/* shared close buttons */
#info .x,#music .x,#recap .x,#rPanel .x,#fPanel .x,#bagList .bx,#aegisModal .am-x,#skGear .sg-x{
  width:36px!important;height:36px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:var(--r-pill)!important;
  display:flex!important;align-items:center;justify-content:center;font-size:16px!important;line-height:1;
  background:var(--fill)!important;border:1px solid var(--hair)!important;color:var(--txt-2)!important;opacity:1!important}
#info .x:hover,#music .x:hover,#recap .x:hover,#rPanel .x:hover,#fPanel .x:hover,#bagList .bx:hover,#aegisModal .am-x:hover,#skGear .sg-x:hover{background:var(--fill-2)!important;color:#fff!important}
/* panel headings */
#info h2,#music h2,#recap h3,#guide h3,#rPanel h3,#fPanel h3,#fPanel h2{font-family:var(--f-ui);font-weight:800;letter-spacing:.01em;color:#fff}
.pnum,#info .kpi b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- 2. loader ---------- */
#loader{font-family:var(--f-ui);background:radial-gradient(ellipse at 50% 62%,#2a120a 0%,#0c0707 55%,#050304 100%)}
#loader .lt{font-weight:800;letter-spacing:.32em;font-size:20px;color:#fff;text-shadow:0 0 26px rgba(255,107,26,.7)}
#loader .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.08)}
#loader .bar i{background:var(--ember-grad);box-shadow:0 0 12px var(--ember)}
#loader #ltxt{color:var(--txt-2);font-size:var(--t-sm)}
#loader .lsrc{color:var(--txt-3)}

/* ---------- 3. top row ---------- */
/* HUD: brand pill that expands into the city panel */
#hud{left:var(--left)!important;top:var(--top)!important;width:300px;max-width:calc(100vw - 2*var(--edge-x));box-sizing:border-box;
  padding:0 14px 12px;border-radius:var(--r)!important;font-size:var(--t-sm);line-height:1.5;color:var(--txt-2);z-index:var(--z-hud);
  max-height:calc(100vh - var(--top) - 290px);overflow-y:auto;overscroll-behavior:contain;
  transition:opacity .3s var(--ease)}
#hud b{color:var(--txt)}
#hud .hdr{font:800 12.5px var(--f-ui);letter-spacing:.18em;color:#fff;text-shadow:none;display:flex;align-items:center;gap:10px;min-height:var(--ctl)!important;cursor:pointer;position:sticky;top:0;z-index:1}
#hud .hdr .brand{display:flex;align-items:center;gap:9px;white-space:nowrap}
#hud .hdr .flame{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe2a8,var(--ember) 55%,#b8300a);
  box-shadow:0 0 10px var(--ember),0 0 22px rgba(255,107,26,.55);animation:ember 2.6s ease-in-out infinite;display:inline-block}
@keyframes ember{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.2);opacity:1}}
#hud .hdr #fps{margin-left:auto;float:none;font:500 10.5px var(--f-mono);color:var(--txt-3);letter-spacing:0}
#hud .hdr .chev{width:7px;height:7px;border-right:2px solid var(--txt-2);border-bottom:2px solid var(--txt-2);transform:rotate(45deg);margin:-3px 2px 0 auto;transition:transform .25s var(--ease);display:none}
#hudBody>div,#hudBody>details{margin-top:var(--s2)}
#tot{font-size:var(--t-sm)}
#burnCount{font-size:12px;padding:8px 10px;border-radius:var(--r-sm);background:var(--ember-soft);border:1px solid rgba(255,107,26,.22);color:#ffdcc0;margin:var(--s2) 0 0}
#mood{background:var(--fill);border:1px solid var(--hair);border-radius:var(--r-sm);padding:8px 10px;font-size:12px}
#hud details.sec{border-top:1px solid var(--hair);padding-top:2px}
#hud details.sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:40px;
  font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt)}
#hud details.sec>summary::-webkit-details-marker{display:none}
#hud details.sec>summary::after{content:'';width:7px;height:7px;border-right:2px solid var(--txt-3);border-bottom:2px solid var(--txt-3);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:4px}
#hud details.sec[open]>summary::after{transform:rotate(-135deg)}
#hud details.sec[open]>:not(summary){animation:secIn .26s var(--ease)}
@keyframes secIn{from{transform:translateY(-4px)}to{transform:none}}
#hud .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
#hud .row>b{min-width:64px;font-weight:600;color:var(--txt-2)}
#hud select{flex:1;min-width:0;min-height:36px}
#hud input[type=range]{flex:1;min-width:90px;width:auto}
#hud label{display:inline-flex;align-items:center;gap:7px;min-height:32px;color:var(--txt-2);cursor:pointer}
#hud label:hover{color:var(--txt)}
#hud input[type=checkbox]{width:18px;height:18px;margin:0;flex:none}
#hud .row.tl button,#tlOpen{width:100%;min-height:40px;justify-content:center;display:flex;align-items:center;gap:8px;
  background:var(--ember-soft)!important;border:1px solid rgba(255,107,26,.32)!important;color:#ffd6b4!important;border-radius:var(--r-sm)}
#hud .feat{display:grid!important;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);padding-top:6px;margin-top:6px}
#hud .feat label{min-height:34px}
#aegisStatus{margin:0 0 4px 25px!important;font-size:11px!important;color:var(--txt-3)}
#hud .legend{font-size:12px}
#hud .legend div{margin:6px 0}
#src{font-size:10.5px;color:var(--txt-3);opacity:1}
#src a{color:var(--ember-hi)}

/* toolbar */
#btns{right:var(--right)!important;top:var(--top)!important;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;max-width:none!important;z-index:var(--z-hud)}
#btns>button{min-height:var(--ctl)!important;min-width:var(--ctl);padding:0 14px!important;font-size:13px!important;border-radius:12px;box-sizing:border-box;white-space:nowrap}
#btns .seg{display:flex;padding:3px;gap:2px;border-radius:13px;background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
#btns .seg button{white-space:nowrap;min-height:32px!important;min-width:0!important;padding:0 12px!important;border:0;background:transparent;border-radius:10px;color:var(--txt-2);
  -webkit-backdrop-filter:none;backdrop-filter:none;font-size:13px!important;box-shadow:none}
#btns .seg button:hover{background:var(--fill);color:#fff}
#btns .seg button.on{background:var(--fill-2);color:#fff;box-shadow:inset 0 0 0 1px var(--edge-2),inset 0 -2px 0 var(--ember)}
#btns #playBtn{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important;box-shadow:0 6px 22px rgba(255,90,20,.38);font-weight:800}
#btns #playBtn:hover{filter:brightness(1.08)}
#btns #moreBtn{padding:0!important;width:var(--ctl);font-size:18px!important;letter-spacing:.06em}
#btns #moreBtn.on{background:var(--fill-2);border-color:var(--edge-2);color:#fff}
#btns [data-kbd]::after{content:attr(data-kbd);margin-left:7px;font:600 10px var(--f-mono);color:var(--txt-3);border:1px solid var(--hair);border-radius:4px;padding:1px 4px}
#btns .seg button.on[data-kbd]::after{color:var(--txt-2)}

/* overflow menu */
#more{position:fixed;z-index:var(--z-pop);right:var(--right);top:calc(var(--top) + var(--ctl) + 8px);min-width:230px;padding:6px;border-radius:var(--r)!important;
  display:flex;flex-direction:column;gap:2px;transform-origin:top right;opacity:0;transform:scale(.96) translateY(-4px);pointer-events:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease);max-height:calc(100vh - var(--top) - 70px);overflow-y:auto}
#more.open{opacity:1;transform:none;pointer-events:auto}
#more button{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap)!important;padding:0 12px!important;border:0;background:transparent;border-radius:var(--r-sm);
  font-size:14px!important;text-align:left;justify-content:flex-start;-webkit-backdrop-filter:none;backdrop-filter:none;min-width:0!important;color:var(--txt-2);box-shadow:none}
#more button:hover{background:var(--fill);color:#fff}
#more button.on{background:var(--ember-soft);color:#fff}
#more button::after{content:attr(data-l);color:var(--txt);font-weight:600}
#more button[data-k]::before{content:attr(data-k);order:2;margin-left:auto;font:600 10px var(--f-mono);color:var(--txt-3);border:1px solid var(--hair);border-radius:4px;padding:1px 5px}
#more button[hidden]{display:none!important}
#more .msep{height:1px;background:var(--hair);margin:4px 6px}

/* status chips */
#status{position:fixed;right:var(--right);top:var(--row2);z-index:var(--z-hud);display:flex;gap:8px;align-items:center;pointer-events:none}
#status>*{pointer-events:auto;position:static!important;transform:none!important}
#wchip,#live{min-height:30px!important;border-radius:var(--r-pill)!important;background:var(--glass)!important;border:1px solid var(--edge)!important;font:600 12px var(--f-ui)!important;color:var(--txt)!important;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:0 12px!important;display:flex;align-items:center;gap:7px;box-shadow:none;margin:0!important;white-space:nowrap;box-sizing:border-box}
#live{color:var(--txt-2)!important;font-weight:500!important}
#live i{width:7px;height:7px}

/* view exit (explore / fly) */
#vExit{top:var(--top)!important;min-height:var(--ctl)!important;padding:0 14px!important;border-radius:12px!important;font:700 13px var(--f-ui)!important;color:var(--txt)!important;
  background:var(--glass-2)!important;border:1px solid var(--ember-line)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:var(--z-hud)!important;letter-spacing:.02em}
#vExit::after{content:'Esc';margin-left:8px;font:600 10px var(--f-mono);color:var(--txt-3);border:1px solid var(--hair);border-radius:4px;padding:1px 4px}
body.touch #vExit::after{display:none}

/* ---------- 4. feedback: toasts, banners, prompts ---------- */
#toasts{position:fixed;right:var(--right)!important;top:calc(var(--row2) + 40px)!important;bottom:auto!important;width:min(300px,calc(100vw - 2*var(--edge-x)))!important;gap:8px;z-index:var(--z-hud);pointer-events:none}
.toast{pointer-events:auto;font:500 12px/1.45 var(--f-ui)!important;color:var(--txt)!important;background:var(--glass-2)!important;border:1px solid var(--hair);border-left:3px solid var(--c,var(--ember))!important;border-radius:12px!important;padding:9px 12px!important;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow);transform:translateX(16px) scale(.98);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.toast.in{transform:none}
.toast a,#evbanner a{color:var(--ember-hi)}
#evbanner{top:calc(var(--row2) + 46px)!important;font-family:var(--f-ui)!important;font-weight:800;letter-spacing:.06em!important;font-size:24px;max-width:min(680px,calc(100vw - 2*var(--edge-x)));box-sizing:border-box;
  transition:opacity .7s var(--ease),transform .7s var(--ease);z-index:var(--z-world)!important;text-wrap:balance}
#evbanner small{font-weight:500;letter-spacing:.02em;color:var(--txt-2);font-size:12px}
#banner{font-family:var(--f-ui);font-weight:800;letter-spacing:.2em;text-wrap:balance;max-width:calc(100vw - 2*var(--edge-x))}
#banner small{color:var(--txt-2)}
#cityToast{top:calc(var(--row2) + 46px)!important;z-index:var(--z-world)!important;max-width:calc(100vw - 2*var(--edge-x))}
#cityToast div{background:var(--glass-2)!important;border:1px solid var(--edge)!important;color:var(--txt)!important;font:600 12px/1.35 var(--f-ui)!important;border-radius:var(--r-pill)!important;padding:7px 14px!important;white-space:normal!important;text-align:center;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
#tourCap{font:500 14px/1.45 var(--f-ui)!important;color:var(--txt)!important;background:var(--glass-2)!important;border:1px solid var(--edge);border-radius:var(--r);padding:10px 16px!important;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transform:translateX(-50%) translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);bottom:calc(var(--bottom) + 64px)!important}
#tourCap.show{transform:translateX(-50%)}
#prompt{left:50%!important;bottom:calc(var(--bottom) + var(--ctl-h) + 64px)!important;top:auto!important;transform:translateX(-50%)!important;
  background:var(--glass-2)!important;border:1px solid var(--ember-line)!important;border-radius:var(--r-pill)!important;color:var(--txt)!important;
  font:600 13px/1.3 var(--f-ui)!important;padding:10px 18px!important;min-height:var(--tap);box-sizing:border-box;display:none;align-items:center;justify-content:center;text-align:center;
  max-width:min(460px,calc(100vw - 2*var(--edge-x)));white-space:normal;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glow);z-index:var(--z-ctl)!important}
#prompt[style*="block"]{display:flex!important}
#tip{font:500 12px var(--f-ui)!important;color:var(--txt)!important;background:var(--glass-3)!important;border:1px solid var(--edge)!important;border-radius:var(--r-sm)!important;padding:6px 10px!important;box-shadow:var(--shadow)}
#help{font:500 11px var(--f-ui)!important;color:var(--txt-2);opacity:.75!important;bottom:calc(var(--bottom) - 6px)!important;text-shadow:0 1px 3px #000}
#tapTip,#vHint{font:600 13px/1.4 var(--f-ui)!important;color:var(--txt)!important;background:var(--glass-2)!important;border:1px solid var(--edge)!important;border-radius:var(--r)!important;padding:10px 16px!important;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow);max-width:min(360px,calc(100vw - 2*var(--edge-x)))!important;white-space:normal!important;text-align:center;box-sizing:border-box}
#tapTip{top:auto!important;bottom:calc(var(--bottom) + var(--ctl-h) + 124px)!important}
#vHint{bottom:calc(var(--bottom) + var(--ctl-h) + 124px)!important}
#whaleToast{font:600 13px var(--f-ui)!important;background:var(--glass-2)!important;border:1px solid rgba(255,240,190,.5)!important;border-radius:var(--r-pill)!important;color:#fff4c8!important;min-height:var(--tap);padding:0 18px!important;top:calc(var(--row2) + 46px)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.alertPill{top:calc(var(--row2) + 46px)!important;background:var(--glass-2)!important;border:1px solid var(--ember-line)!important;color:#ffdcc0!important;font:600 14px var(--f-ui)!important;box-shadow:var(--glow)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.lbl{font-family:var(--f-ui);font-weight:700;letter-spacing:.02em;border-radius:8px;background:rgba(10,7,7,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 0 8px var(--c);padding:2px 8px}
.lbl small{font-family:var(--f-mono);font-weight:500}
.ptag .pn{font-family:var(--f-ui)!important;background:var(--glass-2)!important}
.pbub{font-family:var(--f-ui)!important}

/* ---------- 5. panels & cards ---------- */
#info{border-radius:var(--r-lg)!important;right:var(--right)!important;bottom:calc(var(--bottom) + 64px)!important;padding:14px 16px!important;font-size:var(--t-sm);
  max-height:calc(100vh - var(--row2) - 140px);overflow-y:auto;overscroll-behavior:contain;animation:cardIn .3s var(--ease);box-sizing:border-box;z-index:var(--z-panel)!important}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
#info .x{position:absolute;right:10px;top:10px;float:none}
#info h2{color:#fff!important}
#info .kpi{background:var(--fill)!important;border:1px solid var(--hair)!important;border-radius:var(--r-sm)!important}
#info .kpi span{color:var(--txt-3);opacity:1!important}
#info .rb{background:var(--ember-soft)!important;border-color:rgba(255,107,26,.22)!important;border-radius:var(--r-sm)!important}
#info .rbh{color:var(--ember-hi)!important}
#info .cardBtns a,#info .tbtn{border-radius:var(--r-sm)!important;border:1px solid var(--edge)!important;background:var(--fill)!important;color:var(--txt)!important;font-family:var(--f-ui)!important;min-height:var(--tap)}
#info .cardBtns a.trade{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important;font-weight:800}
#info .attr a,#info a{color:var(--ember-hi)}
#info details.more summary{color:var(--txt-2)}

#music{right:var(--right)!important;top:calc(var(--top) + var(--ctl) + 8px)!important;border-radius:var(--r-lg)!important;padding:14px 16px!important;width:290px!important;box-sizing:border-box;z-index:var(--z-pop)!important}
#music h2{color:#fff!important}
.mctl button{background:var(--fill)!important;border:1px solid var(--edge)!important;color:var(--txt)!important;border-radius:50%!important}
.mctl .mplay{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important}
.mprog{background:var(--fill-2)!important}.mprog i{background:var(--ember-grad)!important}
.mlist button,#signin,#skTut button,#cityChat .crep,#guide .gpause,.linkBtn{background:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
.mlist button{color:var(--txt-2)!important;min-height:36px;width:100%;text-align:left!important;border-radius:var(--r-xs)!important;padding:0 6px!important}
.mlist button:hover{background:var(--fill)!important;color:#fff!important}
.mlist li.cur button{color:var(--ember-hi)!important}.mlinks a{color:var(--ember-hi)!important}

#recap{border-radius:var(--r-lg)!important;top:calc(var(--row2) + 46px)!important;padding:14px 16px!important;z-index:var(--z-pop)!important}
#recap h3{color:#fff!important}
#recap .x{position:absolute;right:10px;top:10px}
#recap .rr{border-top:1px solid var(--hair)!important}

#bagList{border-radius:var(--r-lg)!important;right:var(--right)!important;top:calc(var(--row2) + 46px)!important;z-index:var(--z-pop)!important}
#bagList .bhd{border-bottom:1px solid var(--hair)!important}
#bagList .bt{color:#fff!important;font-weight:800}
#bagList button:not(.bx):not(.bdim){background:var(--fill)!important;border:1px solid var(--hair)!important;border-radius:var(--r-sm)!important;color:var(--txt)!important}
#bagList .bdim{border:1px solid var(--edge)!important;color:var(--txt-2)!important;background:transparent!important;border-radius:var(--r-pill)!important}
#bagList .bdim.on{background:var(--ember-soft)!important;color:#fff!important;border-color:var(--ember-line)!important}
#bagList a{color:var(--ember-hi)!important}

#guide{background:rgba(6,3,3,.55)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:var(--z-modal)!important}
#guide .gbox{border-radius:var(--r-lg)!important;padding:24px 22px 16px!important;width:min(380px,calc(100vw - 32px))!important;box-sizing:border-box}
#guide h3{color:#fff!important}
#guide .gstep{color:var(--ember-hi)!important}
#guide button{border-radius:var(--r-sm)!important;font-weight:700;background:var(--fill)!important;border:1px solid var(--edge)!important;color:var(--txt)!important;min-height:var(--tap)}
#guide .gnext{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important}
#guide .gdots i.on,#guide .gbar i{background:var(--ember)!important}

#keysBtn{left:calc(var(--left) + 170px)!important;bottom:var(--bottom)!important;min-height:var(--ctl)!important;padding:0 14px!important;border-radius:12px!important;font:600 13px var(--f-ui)!important;
  background:var(--glass)!important;color:var(--txt)!important;border:1px solid var(--edge)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:var(--z-hud)!important}
#keysBtn::after{content:'H';margin-left:8px;font:600 10px var(--f-mono);color:var(--txt-3);border:1px solid var(--hair);border-radius:4px;padding:1px 4px}
#keysBox{left:calc(var(--left) + 170px)!important;bottom:calc(var(--bottom) + var(--ctl) + 8px)!important;border-radius:var(--r-lg)!important;padding:14px 18px!important;font:13px/1.75 var(--f-ui)!important;z-index:var(--z-pop)!important;min-width:300px!important}
#keysBox kbd{min-width:22px!important;height:22px;border:1px solid var(--edge-2)!important;border-bottom-width:2px!important;background:var(--fill)!important;border-radius:5px!important;font:600 11px var(--f-mono)!important;padding:0 6px!important;margin:1px 2px 1px 0!important;line-height:20px}
#keysBox b{color:var(--ember-hi)!important;letter-spacing:.06em}
#keysBox>b:first-child{color:#fff!important;font-size:14px!important}

#rPanel{border-radius:var(--r-lg)!important;padding:18px!important;z-index:var(--z-modal)!important}
#rPanel h3{color:#fff!important}
#rPanel .r{border-bottom:1px solid var(--hair)!important}
#rPanel button.b{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important;border-radius:var(--r-sm)!important;min-height:var(--tap);font-weight:800}
#rToast{background:var(--glass-2)!important;border:1px solid var(--ember-line);color:#ffdcc0!important;font:600 14px var(--f-ui)!important;border-radius:var(--r-pill)!important;padding:10px 18px!important;bottom:calc(var(--bottom) + var(--ctl-h) + 70px)!important}
#rChip{min-height:var(--ctl)!important;box-sizing:border-box;font:700 12.5px var(--f-ui)!important;padding:0 12px!important;border-radius:var(--r-pill)!important;border:1px solid var(--edge)!important;
  background:var(--glass)!important;color:#ffdcb0!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:var(--z-hud)!important;
  left:var(--left)!important;top:auto!important;bottom:calc(var(--bottom) + 166px)!important}
#skGearBtn{left:var(--left)!important;top:auto!important;bottom:calc(var(--bottom) + 218px)!important;min-height:var(--ctl)!important;padding:0 14px!important;border-radius:var(--r-pill)!important;font:700 13px var(--f-ui)!important;
  background:var(--glass)!important;color:var(--txt)!important;border:1px solid var(--ember-line)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:var(--z-hud)!important}

/* fishing UI (DOM only) */
#fBar{bottom:calc(var(--bottom) + var(--ctl-h) + 16px)!important;gap:8px;z-index:var(--z-ctl)!important}
#fBar button,#fUI button{font:700 14px var(--f-ui)!important;min-height:var(--tap);padding:0 18px!important;border-radius:12px!important;border:1px solid var(--edge)!important;background:var(--glass-2)!important;color:var(--txt)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
#fBar #fCast,#fUI #fHook,#fUI #fReel,#fUI #fGo{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important}
#fUI{bottom:calc(var(--bottom) + var(--ctl-h) + 76px)!important;border-radius:var(--r-lg)!important;padding:14px!important;font:14px/1.4 var(--f-ui)!important;width:min(calc(100vw - 2*var(--edge-x)),380px)!important;z-index:var(--z-ctl)!important}
#fUI .bar{background:rgba(255,255,255,.08)!important;border-radius:var(--r-sm)!important;height:28px!important;box-shadow:inset 0 0 0 1px var(--hair)}
#fUI .mk{background:#fff!important;box-shadow:0 0 8px #fff}
#fUI .nv,.nv{color:var(--txt-3);opacity:1!important}
#fPanel{border-radius:var(--r-lg)!important;padding:16px!important;font:14px/1.4 var(--f-ui)!important;z-index:var(--z-modal)!important}
#fPanel .c{border:1px solid var(--hair)!important;background:var(--fill);border-radius:var(--r-sm)!important}
#fPanel button.b{background:var(--fill)!important;border:1px solid var(--edge)!important;color:var(--txt)!important;border-radius:var(--r-sm)!important;min-height:var(--tap)}
#fPanel button.b:not(:disabled):hover{border-color:var(--ember-line)!important}
#fPanel .x{position:absolute;right:12px;top:12px}

/* view menu */
#vMenu{background:rgba(6,3,3,.5)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal)!important}
#vMenu>div{border-radius:var(--r-lg)!important;padding:20px!important;min-width:260px!important;font:600 14px var(--f-ui)!important;color:var(--txt-2)!important;gap:8px!important}
#vMenu>div>b{color:#fff;font-size:15px;letter-spacing:.04em;margin-bottom:4px}
#vMenu button{min-height:48px!important;font:600 15px var(--f-ui)!important;color:var(--txt)!important;background:var(--fill)!important;border:1px solid var(--edge)!important;border-radius:12px!important;text-align:left;padding:0 16px}
#vMenu button:hover{background:var(--ember-soft)!important;border-color:var(--ember-line)!important}
#vMenu button[data-v=resume]{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important}
/* short landscape phones: 5 view rows would fill the screen, so two columns (title + Resume span both); targets stay 48px */
@media (max-height:500px) and (orientation:landscape){#vMenu>div{grid-template-columns:1fr 1fr;min-width:min(480px,calc(100vw - var(--sa-l) - var(--sa-r) - 24px))!important;padding:16px!important}#vMenu>div>b,#vMenu button[data-v=resume]{grid-column:1/-1}}

/* AEGIS modal */
#aegisModal{background:rgba(6,3,3,.78)!important;z-index:var(--z-top)!important}
#aegisModal .am-card{border-radius:var(--r-lg)!important;overflow:hidden!important;display:flex;flex-direction:column}
#aegisModal .am-head{padding:12px 12px 10px 16px!important;border-bottom:1px solid var(--hair)}
#aegisModal .am-head b{color:#fff}
#aegisModal .am-head small{color:var(--txt-2);opacity:1!important}
#aegisModal .am-foot{color:var(--txt-3);opacity:1!important}

/* skate gear + NFT picker */
#skGear{background:rgba(6,3,3,.72)!important;z-index:var(--z-modal)!important;font-family:var(--f-ui)!important}
#skGear .sg-card{border-radius:var(--r-lg)!important}
#skGear .sg-tabs button{min-height:36px;border-radius:var(--r-pill)!important;background:var(--fill)!important;border:1px solid var(--edge)!important;color:var(--txt-2)!important}
#skGear .sg-tabs button.on{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important}
#skGear .sg-it{background:var(--fill)!important;border:1px solid var(--hair)!important;border-radius:var(--r)!important}
#skGear .sg-it.sel{border-color:var(--ember)!important;box-shadow:inset 0 0 0 1px var(--ember)!important}
#skGear .sg-eq{background:var(--ember-grad)!important;color:#1b0700!important;min-height:var(--tap);border-radius:var(--r-sm)!important}
#skGear .sg-eq:disabled{background:var(--fill-2)!important;color:var(--txt-3)!important}
#nftPick{font-family:var(--f-ui)!important;background:rgba(6,3,3,.75)!important;z-index:var(--z-modal)!important}

/* debug panel keeps its utility look but joins the type system */
#dbgPanel{font-family:var(--f-mono)!important;border-radius:var(--r)!important}
#perfHud{border-radius:var(--r-sm)!important;top:calc(var(--row2) + 40px)!important}

/* ---------- 6. chat ---------- */
#cityChat{right:var(--right)!important;bottom:var(--bottom)!important;z-index:var(--z-hud)!important;font-family:var(--f-ui)}
#cityChat .cch{color:var(--txt)!important;font:600 13px var(--f-ui)!important;min-height:var(--tap)}
#cityChat:not(.open) .cch{width:48px!important;height:48px!important;min-height:48px!important;border-radius:50%!important}
#cityChat .cdot{background:var(--ok)!important;box-shadow:0 0 8px var(--ok)!important}
#cityChat .cun{background:var(--ember)!important;color:#fff!important}
#cityChat.open .cch{border-radius:0 0 var(--r) var(--r)!important;border-top:0!important}
#cityChat.open .cbody{border-radius:var(--r) var(--r) 0 0!important}
#cityChat .cfoot{border-top:1px solid var(--hair)!important}
#cityChat .cform input{background:var(--fill)!important;border:1px solid var(--edge)!important;color:var(--txt)!important;border-radius:var(--r-sm)!important;font-family:var(--f-ui)}
#cityChat .cform input:focus{border-color:var(--ember-line)!important;outline:0}
#cityChat .cform button,#cityChat .csign{background:var(--ember-grad)!important;color:#1b0700!important;border-radius:var(--r-sm)!important}
#cityChat .cnft{background:var(--ember-soft)!important;border:1px solid var(--ember-line)!important;color:#ffdcc0!important;border-radius:var(--r-sm)!important;font-family:var(--f-ui)!important}
#cityChat .ctoast{background:var(--glass-3)!important;border:1px solid var(--ember-line)!important;color:#ffdcc0!important;border-radius:var(--r-sm)!important}
#cityChat .ct{color:var(--txt)!important}
#chat{left:calc(var(--left) + 170px)!important;bottom:calc(var(--bottom) + var(--ctl) + 10px)!important}
#chatLog{font-family:var(--f-ui)!important;font-size:12px!important}
#chatIn{min-height:var(--ctl);background:var(--glass-2)!important;border:1px solid var(--edge)!important;border-radius:var(--r-sm)!important;color:var(--txt)!important;padding:0 12px!important;font:13px var(--f-ui)!important;box-sizing:border-box}

/* ---------- 7. map ---------- */
#minimap{left:var(--left)!important;bottom:var(--bottom)!important;width:156px!important;height:156px!important;border:1px solid var(--edge-2)!important;box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 4px rgba(10,7,7,.35)!important;background:rgba(10,7,7,.6)!important;z-index:var(--z-hud)!important}

/* ---------- 8. gear column, touch controls, mode bars ---------- */
#gearBar{position:fixed;right:var(--right)!important;top:calc(var(--row2) + 44px)!important;left:auto!important;transform:none!important;display:none;flex-direction:column;gap:8px;z-index:var(--z-ctl)!important}
#gearBar.on{display:flex}
body:not(.touch) #gearBar{top:auto!important;bottom:calc(var(--bottom) + 60px)!important}
body.touch #gearBar{top:calc(var(--row2) + 42px)!important}
#gearBar button{position:static!important;min-width:96px!important;height:var(--tap)!important;padding:0 14px!important;font:700 13px var(--f-ui)!important;border-radius:12px!important;
  border:1px solid var(--edge)!important;background:var(--glass-2)!important;color:var(--txt)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);text-align:left;display:flex!important;align-items:center;gap:6px;touch-action:manipulation}
#gearBar button[style*="display: none"]{display:none!important}
#gearBar button.on,#gearBar button[aria-pressed=true]{background:var(--ember-grad)!important;color:#1b0700!important;border-color:transparent!important;box-shadow:var(--glow)}
#gearBar button[data-k]::after{content:attr(data-k);margin-left:auto;font:600 10px var(--f-mono);opacity:.6;border:1px solid currentColor;border-radius:4px;padding:1px 4px}
body.touch #gearBar button[data-k]::after{display:none}
#webBtn:not(#gearBar #webBtn),#jetBtn:not(#gearBar #jetBtn){font:700 13px var(--f-ui)!important;border-radius:12px!important;border:1px solid var(--edge)!important;background:var(--glass-2)!important;color:var(--txt)!important}

#touch.on{display:block}
#joy{left:calc(var(--sa-l) + 22px)!important;bottom:calc(var(--sa-b) + 26px)!important;width:120px!important;height:120px!important;box-sizing:border-box;border-radius:50%!important;
  border:1px solid var(--edge-2)!important;background:radial-gradient(circle,rgba(255,107,26,.10) 0%,rgba(14,10,10,.45) 70%)!important;box-shadow:inset 0 0 0 6px rgba(255,255,255,.03),0 6px 22px rgba(0,0,0,.35);z-index:var(--z-ctl)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#knob{width:50px!important;height:50px!important;background:radial-gradient(circle at 40% 35%,#ffd2a8,var(--ember) 70%)!important;box-shadow:0 0 16px rgba(255,107,26,.7)!important;opacity:.9}
#tbtns{position:fixed;right:0;bottom:0;width:0;height:0;display:block!important;z-index:var(--z-ctl)!important}
#tbtns button{position:fixed;border-radius:50%!important;padding:0!important;display:flex;align-items:center;justify-content:center;
  background:rgba(14,10,10,.6)!important;border:1px solid var(--edge-2)!important;color:var(--txt)!important;font:800 13px var(--f-ui)!important;letter-spacing:.04em;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.35);touch-action:none;-webkit-user-select:none;user-select:none}
#tbtns button:active{background:var(--ember-soft)!important;border-color:var(--ember)!important}
#tUse{right:calc(var(--sa-r) + 22px);bottom:calc(var(--sa-b) + 26px);width:78px;height:78px;font-size:14px!important;border-color:var(--ember-line)!important}
#tUse.hot{background:var(--ember-grad)!important;color:#1b0700!important;border-color:transparent!important;animation:usePulse 1.2s infinite}
@keyframes usePulse{0%{box-shadow:0 0 0 0 rgba(255,107,26,.6)}70%{box-shadow:0 0 0 16px rgba(255,107,26,0)}100%{box-shadow:0 0 0 0 rgba(255,107,26,0)}}
#tJump{right:calc(var(--sa-r) + 112px);bottom:calc(var(--sa-b) + 30px);width:66px;height:66px;font-size:22px!important}
#tRun{right:calc(var(--sa-r) + 30px);bottom:calc(var(--sa-b) + 116px);width:60px;height:60px;font-size:20px!important}
#tUp{right:calc(var(--sa-r) + 30px);bottom:calc(var(--sa-b) + 116px);width:62px;height:62px;font-size:18px!important}
#tDown{right:calc(var(--sa-r) + 112px);bottom:calc(var(--sa-b) + 30px);width:62px;height:62px;font-size:18px!important}
#tSkate{right:calc(var(--sa-r) + 112px);bottom:calc(var(--sa-b) + 108px);width:54px;height:54px;font-size:20px!important}
#tSkate.on{background:var(--ember-grad)!important;color:#1b0700!important}
#skBtns{right:auto!important;left:50%!important;transform:translateX(-50%);bottom:calc(var(--bottom) + 186px)!important;grid-template-columns:repeat(4,64px)!important;gap:8px!important;z-index:var(--z-ctl)!important}
#skBtns button{height:48px!important;border-radius:var(--r-pill)!important;border:1px solid var(--ember-line)!important;background:rgba(14,10,10,.62)!important;color:#ffdcc0!important;font:800 11.5px var(--f-ui)!important;letter-spacing:.06em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#skBtns button.on,#skBtns button:active{background:var(--ember-grad)!important;color:#1b0700!important}
#skHud{top:calc(var(--row2) + 46px)!important;font-family:var(--f-ui)!important}
#skTut{bottom:calc(var(--bottom) + var(--ctl-h) + 70px)!important;background:var(--glass-2)!important;border:1px solid var(--ember-line)!important;border-radius:var(--r)!important;font-family:var(--f-ui)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:var(--z-ctl)!important;max-width:calc(100vw - 2*var(--edge-x));box-sizing:border-box}
#skTut b{color:var(--ember-hi)!important}
#skTut button{min-height:32px;color:var(--txt-3)!important}
#bBar{right:auto!important;left:50%!important;transform:translateX(-50%);bottom:calc(var(--bottom) + var(--ctl-h) + 16px)!important;z-index:var(--z-ctl)!important}
#bBar button{font:700 14px var(--f-ui)!important;min-height:var(--tap);padding:0 20px!important;border-radius:12px!important;border:1px solid var(--edge)!important;background:var(--glass-2)!important;color:var(--txt)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
#droneBar{bottom:calc(var(--bottom) + var(--ctl-h) + 16px)!important;z-index:var(--z-ctl)!important}
#droneBar button{font:600 13px var(--f-ui)!important;min-height:var(--ctl);padding:0 16px!important;border-radius:12px!important;border:1px solid var(--edge)!important;background:var(--glass-2)!important;color:var(--txt)!important}
#droneBar button.on{background:var(--ember-grad)!important;color:#1b0700!important;border-color:transparent!important}

/* ---------- 9. replay bar ---------- */
#rpBar{border-radius:var(--r-lg)!important;bottom:var(--bottom)!important;font-family:var(--f-ui)!important;color:var(--txt)!important}
#rpBar button{border-radius:12px!important;border:1px solid var(--edge)!important;background:var(--fill)!important;color:var(--txt)!important;font:600 15px var(--f-ui)!important}
#rpBar button.on,#rpBar #rpPlay{background:var(--ember-grad)!important;color:#1b0700!important;border:0!important}
#rpBar #rpDate{font-family:var(--f-mono)!important;color:var(--ember-hi)!important}
#rpTicks,#rpBar .r3{font-family:var(--f-ui)!important;color:var(--txt-3)!important}
#rpCall{font-family:var(--f-ui)!important;background:var(--glass-2)!important;border-radius:var(--r)!important;top:calc(var(--row2) + 46px)!important}

/* ---------- 10. PYRETHEUM (tower interior) — harmonise chrome only ---------- */
#burnTowerInterior button{font-family:var(--f-ui)}
body.touch #burnTowerInterior button{min-height:var(--tap)}

/* hide clutter during cinematic moments */
body.rpOn #btns,body.rpOn #status{opacity:.4;transition:opacity .3s}
body.rpOn #minimap,body.rpOn #keysBtn,body.rpOn #rChip{opacity:0;pointer-events:none}


/* centred floaters: size to content, not to the half-viewport left:50% leaves them */
#prompt,#tapTip,#vHint,#tourCap,#evbanner,#banner,#whaleToast,#skTut,#rToast,#rpCall,.alertPill{width:max-content!important}
/* ==========================================================================
   Desktop: tour & first-person modes keep corners clear
   ========================================================================== */
body:not(.touch).mExplore #minimap,body:not(.touch).mFly #minimap{opacity:.92}
body.mExplore #help,body.mFly #help{bottom:calc(var(--bottom) - 4px)!important}

/* ==========================================================================
   Compact (phones portrait ≤700px wide) — thumb-zone layout
   ========================================================================== */
@media (max-width:700px){
  :root{--edge-x:10px;--edge-y:10px;--ctl:44px}
  #hud{width:auto;max-width:calc(100vw - 2*var(--edge-x) - 150px)!important;padding:0 12px;border-radius:var(--r-pill)!important;overflow:hidden;max-height:none}
  #hud .hdr{font-size:11.5px;letter-spacing:.14em;min-height:var(--ctl)!important}
  #hud .hdr #fps{display:none}
  #hud .hdr .chev{display:block}
  #hud.open{left:var(--left)!important;right:var(--right);width:auto;max-width:none!important;padding:0 14px 12px;border-radius:var(--r-lg)!important;
    max-height:calc(100dvh - var(--top) - var(--sa-b) - 16px)!important;overflow-y:auto;z-index:var(--z-pop)!important}
  #hud.open .hdr{background:transparent}
  #hud.open .hdr .chev{transform:rotate(-135deg);margin-top:3px}
  #hud select{min-height:var(--tap)}
  #hud label{min-height:var(--tap)}
  #hud input[type=checkbox]{width:22px;height:22px}

  #btns{gap:6px}
  #btns>button{min-height:var(--ctl)!important;padding:0 14px!important}
  #btns .seg{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--bottom);padding:4px;border-radius:var(--r-lg);background:var(--glass-2);box-shadow:var(--shadow);z-index:var(--z-hud)}
  #btns .seg button{min-height:var(--tap)!important;min-width:84px!important;padding:0 12px!important;font-size:13px!important;border-radius:15px}
  #btns #tour{display:none}
  body.uiHudOpen #btns,body.uiHudOpen #status,body.uiHudOpen #gearBar,body.uiHudOpen #vExit{visibility:hidden}

  #status{left:var(--left);right:auto;top:var(--row2);flex-wrap:wrap;max-width:calc(100vw - 2*var(--edge-x))}
  #wchip,#live{font-size:11.5px!important}
  #toasts{top:auto!important;bottom:calc(var(--bottom) + 70px)!important;right:var(--right)!important;width:min(250px,calc(100vw - 150px))!important}
  #evbanner{font-size:15px!important;letter-spacing:.03em!important;top:calc(var(--row2) + 44px)!important}
  #banner{top:calc(var(--row2) + 110px)!important;font-size:18px!important;letter-spacing:.12em!important}
  #cityToast{top:calc(var(--row2) + 44px)!important}

  #minimap{width:96px!important;height:96px!important;bottom:calc(var(--bottom) + 62px)!important}
  #rChip{bottom:calc(var(--bottom) + 166px)!important}
  #cityChat{bottom:calc(var(--bottom) + 62px)!important}
  #info{left:var(--left)!important;right:var(--right)!important;width:auto!important;bottom:calc(var(--bottom) + 62px)!important;max-height:min(62dvh,calc(100dvh - 210px))!important;border-radius:var(--r-lg)!important}
  #music{left:var(--left)!important;right:var(--right)!important;width:auto!important;top:auto!important;bottom:calc(var(--bottom) + 62px)!important}
  #bagList{left:auto!important;right:var(--right)!important;top:auto!important;bottom:calc(var(--bottom) + 62px)!important;max-height:45dvh!important}
  #more{min-width:230px}
  #tourCap{bottom:calc(var(--bottom) + 64px)!important;font-size:13px!important}
  #recap{top:calc(var(--row2) + 44px)!important}
  /* first-person modes: the mode dock leaves (✕ Exit switches views), controls own the bottom */
  body.mFly #btns .seg,body.mExplore #btns .seg{display:none}
}

/* ==========================================================================
   Touch devices in Explore / Fly — controls own the bottom band
   ========================================================================== */
body.touch.mExplore,body.touch.mFly{--ctl-h:150px}
body.touch.skating{--ctl-h:206px}
body.touch.mExplore #minimap,body.touch.mFly #minimap{bottom:auto!important;top:calc(var(--row2) + 42px)!important;width:96px!important;height:96px!important}
body.touch.mExplore #rChip,body.touch.mFly #rChip{bottom:auto!important;top:calc(var(--row2) + 148px)!important}
body.touch.mExplore #cityChat,body.touch.mFly #cityChat{bottom:auto!important;top:calc(var(--row2) + 44px + 3*52px)!important}
body.touch.mExplore #cityChat.open,body.touch.mFly #cityChat.open{top:auto!important;bottom:var(--bottom)!important;z-index:var(--z-pop)!important}
body.touch.mExplore #toasts,body.touch.mFly #toasts{bottom:calc(var(--bottom) + var(--ctl-h) + 120px)!important}
body.touch.mExplore #help,body.touch.mFly #help{display:none}
body.touch #keysBtn,body.touch #keysBox{display:none!important}
body.touch.mExplore #info,body.touch.mFly #info{bottom:calc(var(--bottom) + var(--ctl-h) + 10px)!important;max-height:calc(100dvh - var(--row2) - var(--ctl-h) - 70px)!important}

/* ==========================================================================
   Short landscape phones (≤500px tall) — one slim top band, controls in the corners
   ========================================================================== */
@media (max-height:500px) and (orientation:landscape){
  :root{--edge-y:8px;--ctl:38px}
  #hud:not(.open){width:auto;max-width:200px!important;padding:0 12px;border-radius:var(--r-pill)!important;overflow:hidden;max-height:none}
  #hud:not(.open) #hudBody{display:none}
  #hud .hdr #fps{display:none}
  #hud .hdr .chev{display:block}
  #hud.open{max-height:calc(100dvh - var(--top) - 10px)!important;width:340px;z-index:var(--z-pop)!important}
  #hud.open .hdr .chev{transform:rotate(-135deg);margin-top:3px}
  #btns .seg button{min-height:32px!important}
  #status{top:var(--top);right:auto;left:calc(var(--left) + 210px)}
  body.touch #status{display:none}
  #minimap{width:96px!important;height:96px!important}
  #toasts{top:calc(var(--top) + 46px)!important;width:min(260px,40vw)!important}
  #evbanner{top:calc(var(--top) + 46px)!important;font-size:15px!important}
  #cityToast,#whaleToast,.alertPill,#skHud,#rpCall{top:calc(var(--top) + 46px)!important}
  #info{max-height:calc(100dvh - 90px)!important;bottom:var(--bottom)!important;right:calc(var(--right) + 56px)!important}
  #recap{top:calc(var(--top) + 46px)!important;max-height:calc(100dvh - 70px);overflow:auto}
  body.touch.mExplore,body.touch.mFly{--ctl-h:0px}
  body.touch.skating{--ctl-h:0px}
  body.touch #btns .seg{display:none}
  body.touch.mExplore #minimap,body.touch.mFly #minimap{top:calc(var(--top) + 46px)!important;left:var(--left)!important}
  body.touch.mExplore #rChip,body.touch.mFly #rChip{top:calc(var(--top) + 150px)!important}
  body.touch.mExplore #cityChat,body.touch.mFly #cityChat{top:calc(var(--top) + 46px)!important;right:calc(var(--right) + 110px)!important}
  body.touch #gearBar{top:calc(var(--top) + 46px)!important}
  body.touch.mExplore #toasts,body.touch.mFly #toasts{right:calc(var(--right) + 104px)!important;top:calc(var(--top) + 46px)!important;bottom:auto!important}
  body.touch #gearBar button{height:38px!important;min-width:84px!important}
  #joy{bottom:calc(var(--sa-b) + 16px)!important;left:calc(var(--sa-l) + 26px)!important}
  #tUse{bottom:calc(var(--sa-b) + 16px)}
  #tJump{bottom:calc(var(--sa-b) + 18px)}
  #tDown{bottom:calc(var(--sa-b) + 18px)}
  #tRun,#tUp{bottom:calc(var(--sa-b) + 104px)}
  #tSkate{bottom:calc(var(--sa-b) + 96px)}
  #skBtns{left:auto!important;right:calc(var(--sa-r) + 196px)!important;transform:none;bottom:calc(var(--sa-b) + 16px)!important;grid-template-columns:repeat(2,64px)!important}
  #prompt{bottom:calc(var(--bottom) + 8px)!important;max-width:min(400px,calc(100vw - 420px))!important}
  body:not(.touch) #prompt{max-width:min(460px,80vw)!important;bottom:calc(var(--bottom) + 60px)!important}
  #tapTip,#vHint{bottom:calc(var(--bottom) + 70px)!important}
  #fBar{bottom:calc(var(--bottom) + 8px)!important}
  #fUI{bottom:calc(var(--bottom) + 60px)!important;max-height:calc(100dvh - 120px);overflow:auto}
  #bBar,#droneBar{bottom:calc(var(--bottom) + 8px)!important}
  #rpBar{padding:6px 10px!important}
  #skTut{bottom:calc(var(--bottom) + 8px)!important;max-width:min(380px,calc(100vw - 420px))}
}

/* ==========================================================================
   Touch: every tappable thing ≥44px
   ========================================================================== */
body.touch #wchip,body.touch #live{min-height:36px!important}
body.touch #info .x,body.touch #music .x,body.touch #recap .x,body.touch #rPanel .x,body.touch #fPanel .x,body.touch #bagList .bx,body.touch #aegisModal .am-x,body.touch #skGear .sg-x{width:var(--tap)!important;height:var(--tap)!important}
body.touch #info button,body.touch #info summary,body.touch #bagList .bdim,body.touch #skGear .sg-tabs button,body.touch #droneBar button,body.touch #hud details.sec>summary,body.touch #tlOpen,body.touch #skTut button{min-height:var(--tap)!important}
body.touch #rChip,body.touch #skGearBtn,body.touch #keysBtn{min-height:var(--tap)!important}
body.touch.mExplore #skGearBtn{left:var(--left)!important;bottom:auto!important;top:calc(var(--row2) + 200px)!important}
body.rpOn #btns .seg{opacity:0;pointer-events:none}
/* ==========================================================================
   v7.1 functional fixes (tap reachability, z-order, safe areas)
   ========================================================================== */
/* [1] recap sits under the toolbar, its menu, chips and cards (was z 45 = menu level) and steps aside while the menu is open */
#recap{z-index:var(--z-recap,20)!important}
body.moreOpen #recap,body.moreOpen #status,body.touch.moreOpen #gearBar{visibility:hidden}
/* overflow menu: above cards/panels while open; closed = not hit-testable or focusable */
#more{z-index:calc(var(--z-panel) + 1)!important}
#more:not(.open){visibility:hidden}
/* [4] toolbar + menu buttons get their own stacking layer above the 3D canvas */
#btns>button,#more button,#guideBtn,#musicBtn,#audio,#socialBtn,#copyLink,#tour{position:relative;z-index:1}
#btns,#more{isolation:isolate}
/* [8] closed HUD sections take no boxes: their rows (Replay, City features #f_*) no longer sit under #src / #keysBtn while hidden */
#hud details.sec:not([open])>:not(summary){display:none!important}
/* [5] touch: every toolbar / chip / card control >=44px */
body.touch #btns>button,body.touch #btns #playBtn,body.touch #btns #moreBtn{min-height:var(--tap)!important;min-width:var(--tap)!important}
body.touch #btns #moreBtn{width:var(--tap)!important}
body.touch #more button{min-height:var(--tap)!important}
body.touch #hud select{min-height:var(--tap)}
/* desktop music panel opens under the status chips instead of over #live */
body:not(.touch) #music{top:calc(var(--row2) + 40px)!important}
body.touch #wchip,body.touch #live{min-height:var(--tap)!important}
body.touch #info .attr a,body.touch #recap .rs a{display:inline-flex;align-items:center;min-height:var(--tap)}
/* 44px chips push everything that hangs off row 2 down by 8px */
body.touch #recap{top:calc(var(--row2) + 52px)!important}
body.touch #evbanner,body.touch #cityToast{top:calc(var(--row2) + 52px)!important}
body.touch #gearBar{top:calc(var(--row2) + 52px)!important}
body.touch.mExplore #minimap,body.touch.mFly #minimap{top:calc(var(--row2) + 52px)!important}
body.touch.mExplore #rChip,body.touch.mFly #rChip{top:calc(var(--row2) + 158px)!important}
body.touch.mExplore #cityChat,body.touch.mFly #cityChat{top:calc(var(--row2) + 52px + 3*52px)!important}
body.touch.mExplore #skGearBtn{top:calc(var(--row2) + 210px)!important}
/* [7] safe areas: the mode dock and top row clear the home bar / notch with a floor even when the inset is 0 */
body.touch{--bottom:calc(var(--sa-b) + max(var(--edge-y),10px));--ctl:var(--tap)}
@media (max-height:500px) and (orientation:landscape){
  /* [2] two-column menu stays clear of City chat (bottom-right) */
  #more{display:grid;grid-template-columns:1fr 1fr;min-width:0;width:min(440px,calc(100vw - var(--left) - var(--right)));max-height:calc(100dvh - var(--top) - var(--tap) - 8px - var(--bottom) - 60px)}
  body.touch #recap{top:calc(var(--top) + var(--tap) + 8px)!important}
  body.touch #gearBar{top:calc(var(--top) + var(--tap) + 8px)!important}
  body.touch #gearBar button{height:var(--tap)!important}
  body.touch.mExplore #minimap,body.touch.mFly #minimap{top:calc(var(--top) + var(--tap) + 8px)!important}
  body.touch.mExplore #cityChat,body.touch.mFly #cityChat{top:calc(var(--top) + var(--tap) + 8px)!important}
  body.touch.mExplore #rChip,body.touch.mFly #rChip{top:calc(var(--top) + var(--tap) + 112px)!important}
  body.touch.mExplore #skGearBtn{top:calc(var(--top) + var(--tap) + 112px)!important;left:calc(var(--left) + 122px)!important}
  body.touch:has(#music:not([hidden])) #cityChat:not(.open){visibility:hidden}
  body.touch.mExplore #toasts,body.touch.mFly #toasts,#toasts{top:calc(var(--top) + var(--tap) + 8px)!important}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* [8] overlap fixes (fix/ui-overlaps, audit: scripts/ui-overlap-audit.mjs) */
/* the daily recap is an Orbit card: it steps aside in Explore / Fly and while an estate interior banner is up (it covered the minimap column, chips, prompt and HUD) */
body.mExplore #recap,body.mFly #recap,body:has(#estateInteriorHud) #recap{display:none!important}
/* estate interior banner (TOUR · / ESTATES ·): on touch it takes the status-chip row while you are inside (it sat on the top row, View/Play and the Market chip); the chips come back on exit */
body.touch #estateInteriorHud{top:var(--row2)!important;left:var(--left)!important;right:var(--right)!important;transform:none!important;max-width:none!important;max-height:40px;overflow:hidden;box-sizing:border-box;font-size:11px!important;letter-spacing:.02em!important;padding:4px 8px!important;display:flex;align-items:center;justify-content:center}
body.touch:has(#estateInteriorHud) #status{visibility:hidden}
/* one-shot tips step aside inside a residence (the prompt + banner already say how to exit) */
body:has(#estateInteriorHud) #vHint,body:has(#estateInteriorHud) #tapTip{display:none!important}
/* desktop hint line stays clear of the minimap + Keys button */
#help{width:max-content!important;max-width:calc(100vw - 2*var(--left) - 600px)}
/* PWA install hint: bottom edge in Orbit (it sat over the minimap/streak chip column and the prompt) */
#iosHint{width:max-content;max-width:calc(100vw - 2*var(--edge-x));box-sizing:border-box;bottom:var(--bottom)!important}
/* the one-line control hint steps aside while the install hint is up (they share the bottom edge) */
body:has(#iosHint) #help{visibility:hidden}
/* touch: between the minimap (left) and City chat (right) on the bottom row */
body.touch #iosHint{left:calc(var(--left) + 106px)!important;right:calc(var(--right) + 54px)!important;transform:none!important;width:auto;max-width:none;text-align:center}
@media (max-width:520px){
  /* status chips stay on one row (a wrapped 2nd row ran under the minimap and recap); the live chip truncates */
  body.touch #status{flex-wrap:nowrap;max-width:calc(100vw - 2*var(--edge-x))}
  body.touch #status #live{display:block!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:calc(var(--tap) - 2px)}
  body.touch #status #live i{display:inline-block;vertical-align:middle;margin:-2px 7px 0 0}
  body.touch #status #wchip{flex:0 0 auto}
  /* hints/tips sit between the minimap column and the gear column in Explore / Fly */
  body.touch.mExplore #vHint,body.touch.mFly #vHint,body.touch.mExplore #tapTip,body.touch.mFly #tapTip{max-width:calc(100vw - 2*var(--left) - 220px)!important;white-space:normal;text-align:center;box-sizing:border-box}
}
/* short phones (iPhone SE): the recap ends above the streak chip + minimap column and scrolls */
@media (max-width:520px) and (max-height:600px){
  body.touch #recap{max-height:calc(100dvh - var(--row2) - 52px - var(--bottom) - 248px)!important;overflow:auto}
}
/* 320px phones (iPhone SE 1st gen): the brand text gives way to the flame mark so ☰ View fits */
@media (max-width:340px){
  #hud:not(.open) .hdr .brand{font-size:0}
}
/* iPhone SE / mini: the top row (BURN CITY, ☰ View, ⇄ Play, ⋯) did not fit around the centred View button */
@media (max-width:380px){
  #bcMoveGamesOpen .bc-mg-short{display:none!important}
  body.touch #vExit{left:auto!important;right:calc(var(--right) + 118px)!important;transform:none!important;padding:0 10px!important}
  #bcMoveGamesOpen .bc-mg-mark{margin-right:0!important}
}
@media (max-height:500px) and (orientation:landscape){
  body.touch #estateInteriorHud{top:calc(var(--top) + var(--tap) + 8px)!important;left:calc(var(--left) + 106px)!important;right:calc(var(--right) + 160px)!important}
}