/* Undead Island: out-of-raid theme (approved art direction v1, docs/art/mockups-v1).
   Bright, saturated, toy-like: teal-blue panels with thick dark outlines + inner highlight, glossy bevelled buttons,
   Lilita One display text in white with a dark outline, sunny yellow/orange accents, rarity frames, red notification dots.
   Loaded after ui.css (which keeps layout rules). The in-raid HUD (hud.css) keeps its own look: every token here is scoped to
   the menu layers (#ui, #sheet, #modal, #loading, #toasts, #crateOv), never :root. */

#ui, #sheet, #modal, #loading, #ui.on ~ #toasts, #crateOv, #celebrate {
  --ol:#0b1a33; --ol2:#12284c;
  --sky1:#1a4f94; --sky2:#0f2e5e;
  --pn1:#2a6fc0; --pn2:#1c4f95; --pn3:#153d77; --pnHi:rgba(140,205,255,.35);
  --bl1:#57b8ff; --bl2:#1e6fdc; --or1:#ffb43c; --or2:#ff6d1a; --or3:#ec3d1c; --yl1:#ffe467; --yl2:#ffbe1a; --yl3:#f39a0c; --gr1:#8def58; --gr2:#35ae22; --rd1:#ff7a5a; --rd2:#e0302a;
  --bg:#0f2e5e; --bg2:#133a72; --panel:#1c4f95; --panel2:#2462ad; --panel3:#2d74c4; --line:rgba(8,20,45,.9); --line2:#0b1a33;
  --tx:#ffffff; --mut:#bcd6f5; --dim:#86a9d4; --acc:#ff7a1f; --acc2:#ffb43c; --accbg:rgba(255,160,40,.18);
  --gold:#ffd23f; --grn:#7ff05a; --red:#ff5a44; --blue:#6cc4ff; --purple:#c58bff; --warn:#ffc23a;
  --fh:"Lilita One","Nunito","Arial Rounded MT Bold",system-ui,sans-serif;
  --fb:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px; --navh:78px;
  /* outlined display text */
  --so:0 2px 0 var(--ol),0 -1.5px 0 var(--ol),1.5px 0 0 var(--ol),-1.5px 0 0 var(--ol),1.5px 1.5px 0 var(--ol),-1.5px 1.5px 0 var(--ol),1.5px -1.5px 0 var(--ol),-1.5px -1.5px 0 var(--ol),0 3px 0 var(--ol);
  --so2:0 1.5px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol),1px 1px 0 var(--ol),-1px 1px 0 var(--ol),1px -1px 0 var(--ol),-1px -1px 0 var(--ol),0 2px 0 var(--ol);
  --panelBg:linear-gradient(180deg,var(--pn1),var(--pn2) 60%,var(--pn3));
  --panelSh:inset 0 2px 0 var(--pnHi),inset 0 0 0 2px rgba(110,180,255,.22),0 3px 0 rgba(4,12,30,.55);
  font-family:var(--fb); font-weight:700;
}
html, body { background:#081a38 radial-gradient(ellipse at 50% 40%,#16407c 0%,#081a38 70%) fixed; }
#app { background:#0f2e5e; }
#ui svg.i, #sheet svg.i, #modal svg.i { stroke-width:2.4; }

/* ---------- shell ---------- */
#ui { background:
  radial-gradient(ellipse at 50% -10%,rgba(120,200,255,.35),transparent 55%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px),
  linear-gradient(180deg,#1d5aa6 0%,#123f7c 45%,#0d2c5a 100%); }
/* (optional panel pattern art: assets/ui/bg-panel-pattern.webp was not made; no overlay so nothing 404s) */
#ui > * { position:relative; z-index:1; }
#ui ::selection, #sheet ::selection { background:rgba(255,190,40,.55); color:#fff; }
#uiView { scrollbar-width:none; }
#uiView::-webkit-scrollbar { display:none; }
.screen { padding:12px 12px 26px; }

/* top bar */
#uiTop { gap:8px; padding:calc(8px + env(safe-area-inset-top)) 10px 8px; background:linear-gradient(180deg,rgba(10,30,66,.92),rgba(14,44,92,.86)); border-bottom:3px solid var(--ol); box-shadow:0 3px 0 rgba(0,0,0,.18), inset 0 -2px 0 rgba(120,190,255,.2); z-index:3; }
#uiTop.onHome { position:absolute; left:0; right:0; top:0; background:none; border:0; box-shadow:none; }
.tMe { flex:1 1 auto; min-width:0; gap:8px; padding:0; border-radius:14px; background:none; }
.tMe:active { background:none; transform:scale(.98); }
.tAv { width:50px; height:50px; flex:none; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(160deg,#6fd0ff,#2a7fd6); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 3px 0 rgba(0,0,0,.3); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.tAv img, .tAv .art { width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:flex; align-items:center; justify-content:center; }
.tAv b { font:400 26px/1 var(--fh); color:#fff; text-shadow:var(--so); }
.tWho { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tWho > b { font:400 18px/1.05 var(--fh); letter-spacing:.3px; text-transform:none; color:#fff; text-shadow:var(--so2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:2px; }
.tLvRow { display:flex; align-items:center; min-width:0; }
.tLvl { position:relative; z-index:1; width:31px; height:35px; flex:none; display:flex; align-items:center; justify-content:center; padding-bottom:3px; font:400 16px/1 var(--fh); color:#fff; text-shadow:var(--so2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff27a'/%3E%3Cstop offset='.5' stop-color='%23ffc21a'/%3E%3Cstop offset='1' stop-color='%23f08a0a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M16 2 L29 6.5 Q29.5 23 16 34 Q2.5 23 3 6.5 Z' fill='url(%23g)' stroke='%230b1a33' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M16 5.5 L26 9 Q26 12 25.3 14 Q16 11 6.7 14 Q6 12 6 9 Z' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E") center/100% 100% no-repeat; filter:drop-shadow(0 2px 0 rgba(11,26,51,.6)); }
.tLvl::before { content:none; }
.tXp { position:relative; flex:1; min-width:54px; max-width:150px; height:16px; margin-left:-7px; border:2.5px solid var(--ol); border-radius:0 8px 8px 0; background:#0b2346; overflow:hidden; }
.tXp i { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(180deg,#8ff0ff,#1fb6e8); box-shadow:inset 0 -2px 0 rgba(0,0,0,.15); }
.tXp em { position:absolute; inset:0; padding-left:4px; font:900 9px/11px var(--fb); font-style:normal; color:#fff; text-align:center; text-shadow:0 1px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol),1px 1px 0 var(--ol),-1px 1px 0 var(--ol),1px -1px 0 var(--ol),-1px -1px 0 var(--ol); letter-spacing:.2px; white-space:nowrap; }
.tRight { flex:none; display:flex; align-items:center; gap:6px; }
.tIcon { position:relative; width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; border:3px solid var(--ol); background:radial-gradient(circle at 50% 30%,#4fa8f0,#1b5aa8 70%); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.3); color:#fff; padding:0; }
.tIcon svg { width:22px; height:22px; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.tIcon img, .tIcon .art { width:34px; height:34px; object-fit:contain; display:flex; align-items:center; justify-content:center; }
.tIcon:active { transform:translateY(2px); }
.tIcon .dot, #uiNav .dot, .hSq .dot, .tp .dotn, .hbIco .dot, .hbM .dot { position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 5px; border-radius:11px; background:radial-gradient(circle at 40% 30%,#ff8a70,#e8261c 70%); border:2.5px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.35); color:#fff; font:400 12px/17px var(--fh); text-align:center; text-shadow:0 1px 0 rgba(0,0,0,.4); z-index:3; }
.tGold { flex:none; display:flex; align-items:center; gap:0; height:40px; padding:0 3px 0 0; margin-left:12px; background:linear-gradient(180deg,#0c2448,#12325f); border:3px solid var(--ol); border-radius:12px; box-shadow:inset 0 2px 0 rgba(0,0,0,.35), 0 2px 0 rgba(120,190,255,.15); font:400 18px/1 var(--fh); color:#fff; letter-spacing:.3px; text-shadow:var(--so2); }
.tGold .coin { width:38px; height:38px; margin:0 3px 0 -18px; flex:none; }
.tGold .num { padding:0 6px 0 2px; min-width:40px; text-align:right; }
.tPlus { width:30px; height:30px; padding:0; border-radius:9px; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--gr1),var(--gr2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.18); color:#fff; display:flex; align-items:center; justify-content:center; }
.tPlus svg { width:18px; height:18px; stroke-width:4; filter:drop-shadow(0 1.5px 0 #145c0c); }
.tPlus:active { transform:translateY(1px); }

/* coins everywhere: the art if present, a drawn coin otherwise */
.coin { display:inline-block; width:1.05em; height:1.05em; border-radius:50%; vertical-align:-.16em; flex:none;
  background:url("../assets/ui/coin.webp") center/contain no-repeat, radial-gradient(circle at 36% 30%,#fff6c4 0 12%,#ffd84a 32%,#f0a818 70%,#b5700a 100%);
  box-shadow:inset 0 0 0 1.5px rgba(120,70,0,.55), 0 1px 0 rgba(0,0,0,.35); }

/* bottom nav: big illustrated tiles, the selected one raised and golden */
#uiNav { gap:4px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,#123a73,#0b2650); border-top:3px solid var(--ol); box-shadow:inset 0 2px 0 rgba(120,190,255,.25); overflow:visible; }
#uiNav button { flex:1; min-width:0; height:66px; padding:4px 0 5px; gap:0; justify-content:flex-end; border-radius:14px; border:2.5px solid rgba(8,20,45,.85);
  background:linear-gradient(180deg,#2a6cbc,#1a4c90); box-shadow:inset 0 2px 0 rgba(140,205,255,.35), 0 2px 0 rgba(0,0,0,.25); color:#fff; font:400 13px/1 var(--fh); letter-spacing:.2px; text-transform:none; text-shadow:var(--so2); transition:transform .12s, background .12s; }
#uiNav button .nIco { position:absolute; left:50%; top:3px; width:44px; height:40px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1; transition:transform .15s; filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
#uiNav button .nIco img, #uiNav button .nIco .art { width:100%; height:100%; object-fit:contain; display:flex; align-items:center; justify-content:center; }
#uiNav button .nLbl { position:relative; white-space:nowrap; font-size:12.5px; }
#uiNav button.on { background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); border-color:var(--ol); box-shadow:inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(160,80,0,.25), 0 3px 0 rgba(0,0,0,.35); transform:translateY(-8px); }
#uiNav button.on::before { display:none; }
#uiNav button.on .nIco { transform:translateX(-50%) scale(1.14) translateY(-4px); }
#uiNav button:active { transform:translateY(1px); }
#uiNav button.on:active { transform:translateY(-6px); }

/* ---------- type ---------- */
.h1, .h2 { font:400 24px/1.05 var(--fh); letter-spacing:.4px; text-transform:none; color:#fff; text-shadow:var(--so); }
.h2 { font-size:22px; margin:2px 0 10px; }
.h3 { font:400 15px var(--fh); letter-spacing:.4px; text-transform:none; color:#fff; text-shadow:var(--so2); margin:16px 2px 8px; }
.h3::after { height:3px; border-radius:2px; background:linear-gradient(90deg,rgba(8,20,45,.7),rgba(8,20,45,0)); }
.h3 small { font:700 11.5px var(--fb); color:var(--mut); text-shadow:none; }
.note { color:var(--mut); font-size:12.5px; font-weight:700; }
.note.red { color:#ffb0a0; }
.fh { font-family:var(--fh); letter-spacing:.3px; }
.mut { color:var(--mut); } .dim { color:var(--dim); }

/* ---------- buttons: glossy, bevelled, thick outline, drop shadow ---------- */
.btn { position:relative; gap:6px; min-height:42px; padding:8px 14px 10px; border:3px solid var(--ol); border-radius:14px;
  background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; font:400 16px/1 var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol); transition:transform .07s, filter .15s, box-shadow .07s; }
.btn::before { content:""; position:absolute; left:8px; right:8px; top:3px; height:38%; border-radius:10px 10px 18px 18px; background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0)); pointer-events:none; }
.btn:active { transform:translateY(3px); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 var(--ol); filter:brightness(1.06); }
.btn.pri { background:linear-gradient(180deg,var(--or1),var(--or2) 55%,var(--or3)); border-color:#5a1a05; box-shadow:inset 0 2px 0 rgba(255,240,200,.65), inset 0 -4px 0 rgba(140,30,0,.3), 0 3px 0 #5a1a05; color:#fff; }
.btn.gold { background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); border-color:#6a3a00; box-shadow:inset 0 2px 0 rgba(255,255,230,.75), inset 0 -4px 0 rgba(160,80,0,.3), 0 3px 0 #6a3a00; color:#fff; text-shadow:0 1.5px 0 #7a4200,0 -1px 0 #7a4200,1px 0 0 #7a4200,-1px 0 0 #7a4200,1px 1px 0 #7a4200,-1px 1px 0 #7a4200,0 2px 0 #7a4200; }
.btn.grn { background:linear-gradient(180deg,var(--gr1),var(--gr2)); border-color:#0f4a08; box-shadow:inset 0 2px 0 rgba(230,255,210,.6), inset 0 -4px 0 rgba(0,60,0,.25), 0 3px 0 #0f4a08; color:#fff; }
.btn.red { background:linear-gradient(180deg,var(--rd1),var(--rd2)); border-color:#5a0a05; box-shadow:inset 0 2px 0 rgba(255,220,210,.55), inset 0 -4px 0 rgba(100,0,0,.25), 0 3px 0 #5a0a05; color:#fff; }
.btn.ghost { background:linear-gradient(180deg,rgba(12,36,72,.85),rgba(10,28,58,.85)); border-color:var(--ol); box-shadow:inset 0 2px 0 rgba(120,190,255,.2), 0 3px 0 rgba(4,12,30,.6); }
.btn.ghost::before { display:none; }
.btn.sm { min-height:34px; padding:5px 10px 7px; font-size:14px; border-radius:11px; border-width:2.5px; }
.btn.lg { min-height:58px; padding:12px 16px 14px; font-size:24px; letter-spacing:.6px; border-radius:18px; text-shadow:var(--so); }
.btn[disabled], .btn.no { filter:grayscale(.85) brightness(.85); opacity:.75; }
.btn small { font:800 11px var(--fb); text-shadow:0 1px 0 rgba(0,0,0,.4); }
.btn .coin { width:1.1em; height:1.1em; }
.btn svg.i { filter:drop-shadow(0 1.5px 0 rgba(8,20,45,.9)); }
.btnCol { gap:9px; } .btnRow { gap:8px; }

/* ---------- controls ---------- */
.field span { font:400 13px var(--fh); letter-spacing:.3px; text-transform:none; color:#fff; text-shadow:var(--so2); margin:0 0 5px 2px; }
.field input, .inp, #ui textarea { background:#0b2448; border:3px solid var(--ol); border-radius:12px; color:#fff; padding:11px 13px; font:800 15px var(--fb); box-shadow:inset 0 3px 0 rgba(0,0,0,.3), 0 2px 0 rgba(120,190,255,.2); }
.field input::placeholder, .inp::placeholder { color:#6f93c0; }
.field input:focus, .inp:focus { border-color:var(--ol); box-shadow:inset 0 3px 0 rgba(0,0,0,.3), 0 0 0 3px var(--yl2); }
.chips { gap:7px; padding-top:3px; padding-bottom:10px; }
.chips button { border:2.5px solid var(--ol); border-radius:12px; padding:6px 11px 7px; background:linear-gradient(180deg,#2a6cbc,#1a4c90); box-shadow:inset 0 2px 0 rgba(140,205,255,.3), 0 2px 0 rgba(0,0,0,.3); font:400 13px var(--fh); letter-spacing:.2px; text-transform:none; color:#fff; text-shadow:var(--so2); }
.chips button.on { background:linear-gradient(180deg,var(--yl1),var(--yl2) 60%,var(--yl3)); border-color:var(--ol); color:#fff; }
.chips button b { color:rgba(255,255,255,.75); }
.seg, .subtabs { gap:5px; padding:4px; border:3px solid var(--ol); border-radius:14px; background:#0b2448; box-shadow:inset 0 3px 0 rgba(0,0,0,.3); overflow:visible; }
.seg button, .subtabs button { border:0; border-radius:10px; background:transparent; padding:8px 4px 9px; font:400 15px var(--fh); letter-spacing:.3px; text-transform:none; color:#9fc3ee; text-shadow:0 1.5px 0 var(--ol); }
.seg button.on, .subtabs button.on { background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--ol), 0 0 0 2px var(--ol); }
.tog .sw { width:52px; height:30px; border-radius:15px; background:#0b2448; border:3px solid var(--ol); box-shadow:inset 0 3px 0 rgba(0,0,0,.35); }
.tog .sw::after { top:2px; left:2px; width:20px; height:20px; background:linear-gradient(180deg,#e8f1fa,#9fb3c8); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.tog.on .sw { background:linear-gradient(180deg,var(--gr1),var(--gr2)); border-color:var(--ol); }
.tog.on .sw::after { transform:translateX(22px); background:#fff; }
.tog > div { font-weight:800; } .tog small { font-weight:700; }

/* ---------- tab strip with icons (Character) ---------- */
.tabs { gap:5px; padding:8px 8px 9px; border-bottom:3px solid var(--ol); background:linear-gradient(180deg,#123a73,#0f3166); box-shadow:0 3px 0 rgba(0,0,0,.18); }
.tabs button { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px 6px; border:2.5px solid rgba(8,20,45,.9); border-radius:12px;
  background:linear-gradient(180deg,#2a6cbc,#1a4c90); box-shadow:inset 0 2px 0 rgba(140,205,255,.3), 0 2px 0 rgba(0,0,0,.3); color:#fff; font:400 12px/1 var(--fh); letter-spacing:.1px; text-transform:none; text-shadow:var(--so2); }
.tabs button svg.i { width:22px; height:22px; stroke-width:2.6; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.tabs button.on { background:linear-gradient(180deg,#7fd0ff,#2d8ae8 60%,#1f6fd0); box-shadow:inset 0 2px 0 rgba(255,255,255,.7), 0 3px 0 var(--ol); transform:translateY(-1px); }
.tabs button.on::after { display:none; }
#charTabs button { flex:1 1 0; padding:6px 1px 6px; font-size:11.5px; letter-spacing:0; }
#charTabs button span { max-width:100%; padding:0 2px; white-space:nowrap; }
#charTabs #ctab-customize { flex-grow:1.45; }
.tabs.more-r, .tabs.more-l, .tabs.more-l.more-r { -webkit-mask-image:none; mask-image:none; }
.retBar { margin:-12px -12px 12px; width:calc(100% + 24px); background:linear-gradient(180deg,var(--or1),var(--or2)); border:0; border-bottom:3px solid var(--ol); color:#fff; font:400 15px var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2); }

/* ---------- panels ---------- */
.panel, .gCard, .statSec > button, .hb2 details, .qList, .pickC { background:var(--panelBg); border:3px solid var(--ol); border-radius:16px; box-shadow:var(--panelSh); }
.panel { padding:12px; margin-bottom:12px; }
.panel.tight { padding:0; }
.panel.warn { background:linear-gradient(180deg,#f6b83a,#e08a18); }
.panel.warn .note, .panel.warn p { color:#4a2600; }
.panel.acc { box-shadow:var(--panelSh), 0 0 0 3px var(--yl2); }
.ph { font:400 15px var(--fh); letter-spacing:.3px; text-transform:none; color:var(--mut); text-shadow:0 1.5px 0 var(--ol); margin:-2px 0 9px; }
.ph b { color:#fff; font-weight:400; text-shadow:var(--so2); }
.li { border-bottom:2px solid rgba(8,20,45,.35); min-height:54px; }
.li .t { font-weight:900; font-size:14px; }
.li .s { color:var(--mut); font-weight:700; }
.li.tap:active { background:rgba(255,255,255,.08); }
.kv { border-bottom:2px dashed rgba(8,20,45,.3); font-size:13.5px; font-weight:800; }
.kv span { color:var(--mut); }
.kv b { font:400 15px var(--fh); letter-spacing:.2px; color:#fff; text-shadow:0 1.5px 0 var(--ol); }
.statg { gap:7px; }
.statg > div { background:#0d2a55; border:2.5px solid var(--ol); border-radius:12px; box-shadow:inset 0 2px 0 rgba(0,0,0,.3), 0 2px 0 rgba(120,190,255,.15); padding:6px 8px; }
.statg span { font:800 10px var(--fb); letter-spacing:.3px; color:#8fb6e6; text-transform:uppercase; }
.statg b { font:400 17px var(--fh); letter-spacing:.2px; color:#fff; text-shadow:var(--so2); }
.bar { height:10px; border:2px solid var(--ol); border-radius:6px; background:#0b2346; box-sizing:content-box; }
.bar i { border-radius:4px; background:linear-gradient(180deg,#a8ff7a,#3cc42a); box-shadow:inset 0 -2px 0 rgba(0,0,0,.18); }
.bar.big { height:14px; }
.lvbar { height:18px; border:2.5px solid var(--ol); border-radius:9px; background:#0b2346; }
.lvbar i { background:linear-gradient(180deg,#a8ff7a,#3cc42a); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); border-radius:6px; }
.lvbar span { font:400 11.5px/13px var(--fh); letter-spacing:.3px; color:#fff; text-shadow:var(--so2); }
.pill { font:400 12px var(--fh); letter-spacing:.2px; text-transform:none; padding:3px 9px 4px; border-radius:10px; border:2px solid var(--ol); background:#0d2a55; color:#fff; text-shadow:0 1px 0 var(--ol); }
.pill.grn { background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; } .pill.red { background:linear-gradient(180deg,var(--rd1),var(--rd2)); color:#fff; }
.pill.gold { background:linear-gradient(180deg,var(--yl1),var(--yl3)); color:#fff; text-shadow:0 1px 0 #6a3a00; } .pill.acc { background:linear-gradient(180deg,var(--or1),var(--or2)); color:#fff; } .pill.blue { background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; }
.pill svg { width:12px; height:12px; }
.empty { color:var(--mut); font-weight:800; font-size:14px; }
.bubble { background:#0b2448; border:2.5px solid var(--ol); border-radius:12px; color:#dbe9fa; font-weight:700; box-shadow:inset 0 2px 0 rgba(0,0,0,.3); }
.mBadge { font:400 12px var(--fh); letter-spacing:.6px; padding:3px 11px 4px; border:2.5px solid var(--ol); border-radius:10px; background:linear-gradient(180deg,var(--rd1),var(--rd2)); color:#fff; text-shadow:var(--so2); text-transform:uppercase; box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 rgba(0,0,0,.3); }
.pBadge { font:400 11px var(--fh); border-radius:8px; }

/* ---------- items: rarity tiles ---------- */
.art { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
img.art { object-fit:contain; }
.ia { width:100%; height:100%; }
span.ia { font-size:inherit; }
.inl { width:1.25em; height:1.25em; vertical-align:-.28em; display:inline-flex; }
.ic { width:44px; height:44px; border-radius:11px; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--r1,#c3ccd6),var(--r2,#7d8996)); box-shadow:inset 0 0 0 2px var(--r3,rgba(255,255,255,.5)), inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.35); font-size:24px; overflow:visible; }
.ic > .ia { width:84%; height:84%; }
.ic > .ia:not(img) { filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); } /* item pictures carry the shadow baked in (tools/bake-icon-shadows.py): no filter, perf 2026-10-01 */
.ic.sm { width:36px; height:36px; font-size:19px; border-radius:9px; }
.ic.lg { width:76px; height:76px; font-size:40px; border-width:3px; border-radius:16px; }
.ic i { right:3px; bottom:0; font:400 12px var(--fh); color:#fff; text-shadow:var(--so2); }
.igrid { gap:7px; }
.cell { border-radius:13px; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--r1,#c3ccd6),var(--r2,#7d8996)); box-shadow:inset 0 0 0 2.5px var(--r3,rgba(255,255,255,.5)), inset 0 4px 0 rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.35); font-size:28px; overflow:hidden; }
.cell::before { content:""; position:absolute; left:4px; top:4px; width:13px; height:13px; background:var(--r3,#fff); clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,37% 36%); filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)); opacity:.95; }
.cell .e { position:absolute; inset:6% 6% 16%; display:flex; align-items:center; justify-content:center; margin:0; font-size:26px; }
.cell .e .ia { width:100%; height:100%; filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.cell .n { left:3px; right:3px; top:auto; bottom:2px; font:900 8px/1.1 var(--fb); letter-spacing:0; color:#fff; text-transform:none; text-align:center; text-shadow:0 1px 1px var(--ol),0 0 2px var(--ol); }
.cell .q { right:4px; bottom:auto; top:2px; font:400 14px var(--fh); color:#fff; text-shadow:var(--so2); }

.cell .lv { left:auto; right:3px; bottom:12px; font:400 10px var(--fh); color:#fff; background:linear-gradient(180deg,var(--yl1),var(--yl3)); border:1.5px solid var(--ol); border-radius:6px; padding:0 3px; text-shadow:0 1px 0 #6a3a00; }
.cell.emptyc { background:#0d2a55; border:2.5px dashed rgba(120,180,255,.35); box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.cell.emptyc::before { display:none; }
.cell:active { transform:scale(.96); }
.capbar { font:400 14px var(--fh); letter-spacing:.2px; color:#fff; text-transform:none; text-shadow:var(--so2); }

/* ---------- sheet / modal / toast ---------- */
#sheet { background:rgba(4,14,34,.55); }
.sheetIn { background:linear-gradient(180deg,#2a6fc0 0,#1d5299 90px,#16427f 100%); border:3px solid var(--ol); border-bottom:0; border-radius:24px 24px 0 0; box-shadow:inset 0 2px 0 var(--pnHi), 0 -8px 30px rgba(0,0,0,.45); padding:22px 14px calc(22px + env(safe-area-inset-bottom)); scrollbar-width:none; }
.sheetIn::-webkit-scrollbar { display:none; }
.sheetIn::before { top:8px; width:46px; height:5px; margin-left:-23px; border-radius:3px; background:rgba(8,20,45,.55); }
.shx { right:10px; top:10px; width:38px; height:38px; border-radius:12px; border:3px solid var(--ol); background:linear-gradient(180deg,var(--rd1),var(--rd2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--ol); color:#fff; }
.shx svg { width:18px; height:18px; stroke-width:3.4; filter:drop-shadow(0 1.5px 0 #5a0a05); }
.ihead { gap:12px; }
.ihead h3 { font:400 21px/1.1 var(--fh); letter-spacing:.3px; color:#fff; text-shadow:var(--so2); }
.ihead small { color:var(--mut); font-weight:800; }
#modal { background:rgba(4,14,34,.62); }
.mIn { background:var(--panelBg); border:3px solid var(--ol); border-radius:20px; box-shadow:var(--panelSh), 0 18px 50px rgba(0,0,0,.55); padding:20px 16px 16px; text-align:center; }
.mIn h3 { font:400 24px var(--fh); letter-spacing:.3px; text-transform:none; color:#fff; text-shadow:var(--so); margin:0 0 8px; }
.mIn p { color:#dbe9fa; font-weight:700; font-size:14px; }
#ui.on ~ #toasts .tst, #sheet.open ~ #toasts .tst { background:linear-gradient(180deg,#123a73,#0b2650); border:3px solid var(--ol); border-left-width:3px; border-radius:14px; box-shadow:inset 0 0 0 2px var(--c, var(--yl2)), 0 4px 0 rgba(0,0,0,.35); color:#fff; font:400 15px/1.25 var(--fh); letter-spacing:.2px; text-shadow:var(--so2); padding:9px 14px 10px; }

/* ---------- loading / gate ---------- */
#loading { background:radial-gradient(ellipse at 50% 30%,#ffcf7a 0%,#f08a3a 30%,#8a3a6a 62%,#1d2f6a 100%); }
#loading .ldbar { width:210px; height:14px; border:3px solid var(--ol); border-radius:9px; background:#0b2346; }
#loading .ldbar i { background:linear-gradient(180deg,var(--yl1),var(--yl3)); border-radius:5px; }
#loading p { color:#fff; font:400 14px var(--fh); letter-spacing:.6px; text-shadow:var(--so2); }
.logo { position:relative; }
.logo .logoImg { display:block; width:min(78vw,300px); margin:0 auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.logo .logoImg ~ .l1, .logo .logoImg ~ .l2 { display:none; }
.logo .l1, .logo .l2, .txtLogo .l1, .txtLogo .l2 { font:400 52px/0.9 var(--fh); letter-spacing:1px; text-transform:uppercase; }
.logo .l1, .txtLogo .l1 { color:#fff; text-shadow:0 3px 0 var(--ol),0 -3px 0 var(--ol),3px 0 0 var(--ol),-3px 0 0 var(--ol),2.5px 2.5px 0 var(--ol),-2.5px 2.5px 0 var(--ol),2.5px -2.5px 0 var(--ol),-2.5px -2.5px 0 var(--ol),0 7px 0 var(--ol),0 10px 12px rgba(0,0,0,.35); }
.logo .l2, .txtLogo .l2 { color:#ffd23f; background:linear-gradient(180deg,#fff27a,#ffc21a 50%,#f08a0a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 0 var(--ol)) drop-shadow(0 -3px 0 var(--ol)) drop-shadow(3px 0 0 var(--ol)) drop-shadow(-3px 0 0 var(--ol)) drop-shadow(0 4px 0 var(--ol)); margin-top:2px; }
.logo .tag { margin-top:14px; font:400 14px var(--fh); letter-spacing:2px; color:#fff; text-shadow:var(--so2); }
.gate { background:linear-gradient(180deg,rgba(15,46,94,.05) 0%,rgba(15,46,94,.35) 45%,rgba(12,36,76,.92) 72%,#0d2c5a 100%), url("../assets/ui/bg-garage.webp?v=2") 50% 20%/cover no-repeat, linear-gradient(180deg,#5b7fd8 0%,#f0a07a 40%,#1d5aa6 70%,#0f2e5e 100%); }
.gLogo .logoArt { display:block; width:min(76vw,290px); height:auto; max-height:24dvh; object-fit:contain; margin:0 auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.gLogo span.logoArt { display:flex; justify-content:center; }
.gLogo .txtLogo .l1, .gLogo .txtLogo .l2 { font-size:clamp(40px,8dvh,56px); }
.gate .h2, .gate .note { text-align:center; }
.gate .note { color:#fff; font-weight:800; text-shadow:var(--so2); }
.gCard { padding:16px 14px; }
.gErr { background:linear-gradient(180deg,#ff8a70,#e03a2a); border:2.5px solid var(--ol); color:#fff; border-radius:12px; font-weight:800; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.gFoot { color:rgba(255,255,255,.7); font-weight:800; }
.modeC { gap:12px; padding:14px; border:3px solid var(--ol); border-radius:18px; background:var(--panelBg); box-shadow:var(--panelSh); color:#fff; margin-bottom:12px; }
.modeC .mi { width:54px; height:54px; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(180deg,var(--rd1),var(--rd2)); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.5); }
.modeC .mi svg { filter:drop-shadow(0 1.5px 0 var(--ol)); }
.modeC b { font:400 21px var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2); }
.modeC small { color:var(--mut); font-weight:700; }
.modeC.sel { box-shadow:var(--panelSh), 0 0 0 4px var(--yl2); }
.modeC.soon { opacity:.6; filter:grayscale(.7); }
.swatches { gap:10px; }
.swc { border:3px solid var(--ol); box-shadow:inset 0 -5px 8px rgba(0,0,0,.3), inset 0 4px 6px rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.35); }
.swc.on { border-color:var(--ol); box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ol), inset 0 -5px 8px rgba(0,0,0,.3); transform:scale(1.06); }

/* ---------- 3D car stages (UI.car3D) ---------- */
.c3d { position:relative; overflow:hidden; }
.c3d > canvas.c2d { position:absolute; inset:0; width:100%; height:100%; display:block; }
.c3d.on3d > canvas.c2d { display:none; }
.c3d > canvas.s3cv { z-index:1; }

/* ---------- HOME (mockup 1) ---------- */
.home { height:100%; min-height:0; padding:0; display:block; overflow:hidden; text-align:center; }
.home::before { display:none; }
.hBg { position:absolute; inset:0; z-index:0;
  background:url("../assets/ui/bg-garage.webp?v=2") 50% 38%/cover no-repeat,
    radial-gradient(ellipse at 70% 44%,rgba(255,236,160,.95) 0,rgba(255,196,90,.7) 12%,rgba(255,150,70,0) 38%),
    linear-gradient(180deg,#5b7fd8 0%,#9a8ad8 16%,#f0a07a 34%,#ffc27a 44%,#e39a5a 48%,#7a6a58 50%,#6a5a4a 62%,#4a4038 100%); }
.hBg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,30,70,.35) 0,rgba(10,30,70,0) 22%,rgba(10,30,70,0) 70%,rgba(8,22,50,.55) 100%); }
.home > * { position:absolute; z-index:2; }
#ui.homeScr #uiView { overflow:hidden; }
.hLogo { left:50%; top:calc(76px + env(safe-area-inset-top) + 1.2dvh); transform:translateX(-50%); width:min(74%,300px); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.hLogo .mBadge { font-size:15px; padding:3px 14px 4px; border-radius:12px; }
.home { --hH:clamp(64px,11dvh,92px); --hSq:clamp(68px,11dvh,84px); }
.hStage { left:0; right:0; top:calc(52px + 27dvh); bottom:calc(var(--hH) + 4px); cursor:grab; }
.hStage > canvas.c2d { filter:drop-shadow(0 10px 10px rgba(0,0,0,.4)); }
/* bottom row: BASE · RAID · LOADOUT */
.hBar { z-index:4; left:50%; bottom:12px; transform:translateX(-50%); width:min(100% - 16px,420px); display:flex; gap:8px; }
.hSq { position:relative; flex:none; width:var(--hSq); height:var(--hH); padding:0; border-radius:20px; border:4px solid var(--ol); background:radial-gradient(circle at 50% 30%,#57b0f5,#1a58a8 72%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.2), 0 5px 0 var(--ol); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hSq .hqI { width:64%; height:52%; display:flex; align-items:center; justify-content:center; font-size:clamp(26px,5dvh,40px); margin-top:-4px; }
.hSq .hqI img, .hSq .hqI .art { width:100%; height:100%; object-fit:contain; }
.hSq .hqT { margin-top:1px; font:400 clamp(13px,2.1dvh,16px)/1 var(--fh); color:#fff; text-shadow:var(--so2); letter-spacing:.3px; }
.hSq:active { transform:translateY(3px); }
.hRaid { position:relative; flex:1; min-width:0; height:var(--hH); padding:0 10px 0 0; border:4px solid #3a0f02; border-radius:26px;
  background:linear-gradient(180deg,#ffb04a 0,#ff7a24 30%,#f2461c 78%,#d8321a 100%); box-shadow:inset 0 3px 0 rgba(255,236,190,.8), inset 0 -6px 0 rgba(120,20,0,.35), 0 5px 0 #3a0f02, 0 12px 22px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; animation:raidPulse 2.4s ease-in-out infinite; }
.hRaid::before { content:""; position:absolute; left:14px; right:14px; top:5px; height:36%; border-radius:18px 18px 30px 30px; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0)); pointer-events:none; }
.hRaid .hrI { width:clamp(50px,8.4dvh,70px); height:clamp(50px,8.4dvh,70px); margin:-12px -2px 0 -8px; display:flex; align-items:center; justify-content:center; font-size:clamp(34px,6dvh,48px); filter:drop-shadow(0 3px 0 rgba(58,15,2,.6)); }
.hRaid .hrI img, .hRaid .hrI .art { width:100%; height:100%; object-fit:contain; }
.hRaid .hrT { font:400 clamp(34px,6.2dvh,52px)/1 var(--fh); letter-spacing:1.5px; color:#fff; text-shadow:0 4px 0 #3a0f02,0 -3px 0 #3a0f02,3px 0 0 #3a0f02,-3px 0 0 #3a0f02,2.5px 2.5px 0 #3a0f02,-2.5px 2.5px 0 #3a0f02,2.5px -2.5px 0 #3a0f02,-2.5px -2.5px 0 #3a0f02,0 6px 0 #3a0f02; }
.hRaid:active { transform:translateY(4px); box-shadow:inset 0 3px 0 rgba(255,236,190,.8), inset 0 -4px 0 rgba(120,20,0,.35), 0 1px 0 #3a0f02; animation:none; }
.hLogo .logoArt { width:100%; height:clamp(84px,18dvh,170px); object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.hLogo span.logoArt { display:flex; align-items:center; justify-content:center; }
.txtLogo { display:flex; flex-direction:column; align-items:center; transform:rotate(-3deg); }
.hLogo .txtLogo .l1, .hLogo .txtLogo .l2 { font-size:clamp(40px,8.2dvh,64px); }
@keyframes raidPulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.1) saturate(1.1); } }

/* ---------- CHARACTER ---------- */
.carStrip { gap:9px; padding-bottom:6px; }
.cc { width:100px; border:3px solid var(--ol); border-radius:14px; background:var(--panelBg); box-shadow:var(--panelSh); padding:5px 6px 6px; color:#fff; }
.cc canvas { height:40px; }
.cc b { font:400 14px var(--fh); letter-spacing:.2px; text-transform:none; text-shadow:var(--so2); }
.cc span { color:var(--mut); font-weight:800; font-size:10.5px; }
.cc.sel { background:linear-gradient(180deg,var(--yl1),var(--yl2) 60%,var(--yl3)); } .cc.sel span { color:#6a3a00; }
.cc.add { color:#fff; border-style:dashed; border-color:rgba(160,210,255,.6); background:rgba(10,30,66,.5); box-shadow:none; font:400 14px var(--fh); text-transform:none; text-shadow:var(--so2); }
/* gear stage: the car in the middle, part slots around it (mockup 3) */
.gStage { position:relative; margin:0 -12px 12px; padding:10px 8px 12px; min-height:352px; border-bottom:3px solid var(--ol);
  background:url("../assets/ui/bg-garage.webp?v=2") 50% 40%/cover no-repeat, radial-gradient(ellipse at 50% 62%,#f7c78a 0,#c77a45 35%,#5a3a2e 70%,#2a2030 100%); }
.gStage::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,30,70,.25),rgba(10,30,70,0) 30%,rgba(10,30,70,0) 70%,rgba(10,30,70,.45)); pointer-events:none; }
.gStage .gCar { position:absolute; left:0; right:0; top:34px; bottom:40px; z-index:1; }
.gCol { position:absolute; top:10px; bottom:12px; width:68px; display:flex; flex-direction:column; justify-content:space-between; z-index:2; }
.gCol.l { left:6px; } .gCol.r { right:6px; }
.gSlot { position:relative; z-index:2; width:68px; height:62px; padding:0; border-radius:13px; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--r1),var(--r2)); box-shadow:inset 0 0 0 2.5px var(--r3), inset 0 3px 0 rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.4); color:#fff; overflow:hidden; }
.gSlot .gi { position:absolute; left:6px; right:6px; top:3px; bottom:17px; display:flex; align-items:center; justify-content:center; font-size:24px; }
.gSlot .gi img, .gSlot .gi .art { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.gSlot .gn { position:absolute; left:0; right:0; bottom:3px; font:400 11px/1 var(--fh); letter-spacing:0; color:#fff; text-shadow:var(--so2); white-space:nowrap; }
.gSlot .gl { position:absolute; top:3px; right:4px; font:400 13px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.gSlot .gh { position:absolute; top:3px; left:3px; width:15px; height:15px; border:0; background:none; z-index:1; filter:drop-shadow(1.2px 0 0 var(--ol)) drop-shadow(-1.2px 0 0 var(--ol)) drop-shadow(0 1.2px 0 var(--ol)) drop-shadow(0 -1.2px 0 var(--ol)) drop-shadow(0 1.5px 0 rgba(11,26,51,.6)); }
.gSlot .gh::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%), var(--hc); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.gSlot:active { transform:scale(.95); }
.gPower { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:6px; padding:4px 14px 5px 6px; border-radius:14px; border:3px solid #5a3200;
  background:linear-gradient(180deg,#ffe26a,#ffbc1a 60%,#f0960a); box-shadow:inset 0 2px 0 rgba(255,255,230,.8), 0 3px 0 #5a3200; font:400 18px/1 var(--fh); color:#fff; white-space:nowrap; text-shadow:0 2px 0 #6a3a00,0 -1px 0 #6a3a00,1.5px 0 0 #6a3a00,-1.5px 0 0 #6a3a00,0 3px 0 #6a3a00; }
.gPower .pw { width:26px; height:26px; border-radius:8px; background:linear-gradient(180deg,#ff9a3a,#e0501a); border:2px solid #5a3200; display:flex; align-items:center; justify-content:center; font-size:15px; }
.gName { position:absolute; left:84px; right:84px; top:8px; z-index:2; text-align:center; font:400 18px/1 var(--fh); color:#fff; text-shadow:var(--so2); pointer-events:none; }
.gName small { display:block; margin-top:3px; font:800 11px var(--fb); color:#fff; text-shadow:0 1px 2px var(--ol); }
/* weapon cards (mockup 4) */
.wCards { display:flex; flex-direction:column; gap:10px; }
.wCard { position:relative; display:grid; grid-template-columns:108px 1fr 104px; gap:0; min-height:110px; border-radius:18px; border:3px solid var(--ol); overflow:hidden;
  background:linear-gradient(180deg,var(--r1),var(--r2)); box-shadow:inset 0 0 0 3px var(--r3), 0 3px 0 rgba(0,0,0,.35); color:#fff; text-align:left; }
.wCard .wImg { position:relative; display:flex; align-items:center; justify-content:center; font-size:46px; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.35),rgba(255,255,255,0) 65%); }
.wCard .wImg img, .wCard .wImg .art { width:90%; height:90%; object-fit:contain; filter:drop-shadow(0 4px 2px rgba(0,0,0,.4)); }
.wCard .wRar { position:absolute; left:0; top:0; padding:2px 10px 3px 8px; font:400 11px var(--fh); letter-spacing:.4px; text-transform:uppercase; color:#fff; background:rgba(8,20,45,.55); border-radius:0 0 12px 0; text-shadow:0 1px 0 var(--ol); }
.wCard .wMid { padding:9px 6px 8px 8px; min-width:0; background:rgba(8,20,45,.28); display:flex; flex-direction:column; gap:4px; }
.wCard .wMid b { font:400 16px/1.05 var(--fh); text-shadow:var(--so2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wCard .wLv { display:flex; align-items:center; gap:6px; font:400 13px var(--fh); text-shadow:0 1.5px 0 var(--ol); }
.wCard .wLv .lvbar { flex:1; height:12px; }
.wCard .wDmg { font:400 14px var(--fh); text-shadow:0 1.5px 0 var(--ol); }
.wCard .wDmg em { font-style:normal; color:#ffe46a; }
.wCard .wTags { display:flex; gap:5px; } .wCard .wTags span { width:26px; height:26px; border-radius:8px; border:2px solid var(--ol); background:rgba(8,20,45,.45); display:flex; align-items:center; justify-content:center; font-size:14px; }
.wCard .wBtns { display:flex; flex-direction:column; justify-content:center; gap:7px; padding:8px 8px 9px 4px; background:rgba(8,20,45,.2); }
.wCard .wBtns .btn { min-height:40px; padding:4px 4px 6px; font-size:14px; line-height:1.05; flex-direction:column; gap:1px; border-radius:12px; }
.wCard .wBtns .btn small { font:400 12px var(--fh); text-shadow:var(--so2); display:flex; align-items:center; gap:3px; }
/* the Upgrade button says what's missing (UX 2026-10-06): amber label wraps to two lines; a red "!" marks guns ready to upgrade */
.btn.wShort { font-size:13px; line-height:1.1; white-space:normal; text-align:center; }
.wCard .wBtns .btn.wShort { font-size:12.5px; }
.wCard .wBang { position:absolute; right:4px; top:4px; z-index:2; width:22px; height:22px; border-radius:50%; border:2.5px solid var(--ol); background:var(--rd2); color:#fff; font:400 14px/17px var(--fh); text-align:center; text-shadow:var(--so2); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.wCard.empty { --r1:#2a5c9c; --r2:#1a3f75; --r3:rgba(120,180,255,.25); }
.wCard.lock { --r1:#5a6470; --r2:#343b44; --r3:rgba(255,255,255,.15); filter:saturate(.3); }
.wCard.lock .wImg, .wCard.empty .wImg { font-size:34px; opacity:.85; }
/* upgrade tracks */
.trk { border-bottom:2px solid rgba(8,20,45,.35); padding:9px 10px; }
.trk .t { font:400 15px var(--fh); letter-spacing:.2px; text-transform:none; text-shadow:var(--so2); }
.trk .t .grn { color:var(--grn); } .trk .t .gold { color:var(--gold); } .trk .t .mut { color:var(--mut); }
.trk .lvbar { height:10px; margin-top:5px; }
.trkNeed { color:var(--gold); font-weight:800; }
.trk .tI { width:40px; height:40px; flex:none; border-radius:10px; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--r1),var(--r2)); box-shadow:inset 0 0 0 2px var(--r3); display:flex; align-items:center; justify-content:center; font-size:20px; }
.trk .tI img, .trk .tI .art { width:84%; height:84%; object-fit:contain; }
.cost > span { background:#0b2448; border:2px solid var(--ol); border-radius:10px; padding:3px 8px; font-weight:800; }
.cost > span.miss { color:#ffb0a0; box-shadow:inset 0 0 0 1.5px rgba(255,90,70,.6); } .cost > span.ok { box-shadow:inset 0 0 0 1.5px rgba(126,240,90,.45); }
.slots { gap:8px; }
.slot { border:2.5px dashed rgba(160,210,255,.45); border-radius:13px; background:#0d2a55; color:#9fc3ee; font:400 11px var(--fh); letter-spacing:.2px; text-transform:none; }
.slot.full { border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--r1),var(--r2)); box-shadow:inset 0 0 0 2.5px var(--r3), 0 3px 0 rgba(0,0,0,.35); }
.slot .nm { font:900 8.5px var(--fb); text-shadow:0 1px 1px var(--ol); color:#fff; }
.carStage { border:3px solid var(--ol); border-radius:18px; background:radial-gradient(ellipse at 50% 60%,#f3c68c 0,#c9804c 40%,#5a3a2e 80%); box-shadow:var(--panelSh); }
.carStage .grid-bg { display:none; }
.hs { background:rgba(10,30,66,.85); border:2.5px solid var(--ol); border-radius:11px; font:400 11px var(--fh); letter-spacing:.1px; text-transform:none; text-shadow:0 1px 0 var(--ol); }
.hs b { color:var(--gold); }
.stageHead b { font:400 20px var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2); }
.stageHead small { color:#fff; font-weight:800; text-shadow:0 1px 2px var(--ol); }
.cos { border:2.5px solid var(--ol); border-radius:13px; background:linear-gradient(180deg,#2a6cbc,#1a4c90); box-shadow:inset 0 2px 0 rgba(140,205,255,.3), 0 2px 0 rgba(0,0,0,.3); }
.cos .nm { font:900 9px/1.15 var(--fb); text-transform:none; color:#fff; }
.cos.on { box-shadow:0 0 0 3px var(--yl2), inset 0 2px 0 rgba(140,205,255,.3); background:linear-gradient(180deg,#3a86d8,#1f5aa6); }
.cos .rb { height:4px; }
.sk { border-bottom:2px solid rgba(8,20,45,.35); }
.sk .sq { border:2.5px solid var(--ol); border-radius:11px; background:linear-gradient(180deg,var(--bl1),var(--bl2)); font:400 17px var(--fh); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(255,255,255,.45); }
.sk .sq.elite { background:linear-gradient(180deg,var(--yl1),var(--yl3)); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 0 10px rgba(255,210,63,.5); }
.sk .t { font:400 15px var(--fh); letter-spacing:.2px; text-transform:none; text-shadow:var(--so2); }
.sk .t small { font-weight:800; }
.sk .bar i { background:linear-gradient(180deg,var(--yl1),var(--yl3)); }
.perk { border-radius:10px; font-weight:800; }
.perk b { font:400 12px var(--fh); }
.perk.got { background:rgba(126,240,90,.18); }
.mapBox { border:3px solid var(--ol); border-radius:16px; box-shadow:var(--panelSh); }
.mapCtl button { border:2.5px solid var(--ol); border-radius:10px; background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; font:400 20px var(--fh); box-shadow:inset 0 2px 0 rgba(255,255,255,.45); }
.poiLore { color:#e6f0fb; border-left:3px solid var(--yl2); font-weight:700; }
.intel li { color:#dbe9fa; font-weight:700; }
.statSec > button { padding:11px 12px; font:400 16px var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2); color:#fff; }
.statSec > button svg { color:#fff; }
.statSec.open > button { border-radius:16px 16px 0 0; }
.statSec .body { background:#123a73; border:3px solid var(--ol); border-top:0; border-radius:0 0 16px 16px; }
.ovHead .h2 { margin:0; }
.ring div { font:400 22px/1 var(--fh); text-shadow:var(--so2); }
.ring small { font:800 8px var(--fb); color:#fff; }
.wtable th { font:800 10px var(--fb); color:var(--mut); border-bottom:2px solid rgba(8,20,45,.45); }
.wtable td { font-weight:800; border-bottom:1px dashed rgba(8,20,45,.35); }

/* ---------- TRADERS (mockup 5) ---------- */
.trRow { gap:8px; padding:6px 12px 10px; }
.tp { width:84px; }
.tp .av { width:84px; height:104px; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(170deg,var(--c),#1a3a6a 120%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.35); font:400 28px var(--fh); color:#fff; text-shadow:var(--so); }
.tp .av::after { background:linear-gradient(180deg,transparent 55%,rgba(8,20,45,.75)); }
.tp.sel .av { box-shadow:0 0 0 3px var(--yl1), 0 0 0 6px var(--ol), 0 0 18px rgba(255,210,60,.55); }
.tp.lock .av { filter:grayscale(1) brightness(.55); }
.tp .lk { font:400 14px var(--fh); text-shadow:var(--so2); gap:2px; }
.tp .lk svg { width:26px; height:26px; filter:drop-shadow(0 2px 0 var(--ol)); }
.tp b { position:relative; margin-top:-24px; z-index:3; font:400 12.5px/1.05 var(--fh); letter-spacing:.1px; text-transform:none; color:#fff; text-shadow:var(--so2); padding:0 2px; }
.tp small { font-weight:800; color:var(--mut); margin-top:4px; }
.tp small.v { color:var(--warn); }
.tp .dotn { top:-6px; right:-4px; }
.av.pic { background:#1a3a6a; }
.trSign { position:relative; display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:9px 10px 9px 12px; border:3px solid #3a2210; border-radius:14px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 3px,transparent 3px 11px), linear-gradient(180deg,#c98a4e,#9c6232); box-shadow:inset 0 2px 0 rgba(255,230,190,.45), inset 0 -3px 0 rgba(60,30,10,.35), 0 3px 0 rgba(0,0,0,.35); }
.trSign::before, .trSign::after { content:""; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#5a3a1e; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.trSign::before { left:5px; } .trSign::after { right:5px; }
.trSign .ts { flex:1; min-width:0; }
.trSign h2 { margin:0; font:400 21px/1 var(--fh); letter-spacing:.3px; text-transform:uppercase; color:#fff; text-shadow:var(--so); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trSign p { margin:3px 0 0; font:800 11.5px/1.25 var(--fb); font-style:italic; color:#fff3dc; text-shadow:0 1px 1px rgba(40,20,5,.8); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.trSign .rs { flex:none; display:flex; align-items:center; gap:6px; padding:4px 8px 5px 6px; border-radius:11px; border:2.5px solid var(--ol); background:#0f2e5e; box-shadow:inset 0 2px 0 rgba(120,190,255,.25); }
.trSign .rs svg { width:22px; height:22px; color:#fff; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.trSign .rs span { display:block; font:800 10px var(--fb); color:#cfe3fb; }
.trSign .rs b { display:block; font:400 16px/1 var(--fh); color:#fff; text-shadow:var(--so2); font-variant-numeric:tabular-nums; }
.shopGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.shop { position:relative; display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:6px 6px 7px; border-radius:16px; border:3px solid var(--ol);
  background:radial-gradient(ellipse at 50% 32%,rgba(255,255,255,.3),rgba(255,255,255,0) 60%), linear-gradient(180deg,var(--r1,#4fb2ff),var(--r2,#1c5fcc)); box-shadow:inset 0 0 0 2.5px var(--r3,rgba(255,255,255,.4)), 0 3px 0 rgba(0,0,0,.35); color:#fff; text-align:center; }
.shop .si { position:relative; height:74px; display:flex; align-items:center; justify-content:center; font-size:44px; }
.shop .si img, .shop .si .art { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 2px rgba(0,0,0,.35)); }
.shop .sq { position:absolute; right:-2px; bottom:0; padding:1px 7px 2px; border-radius:10px; background:rgba(8,20,45,.85); border:2px solid var(--ol); font:400 13px var(--fh); text-shadow:0 1px 0 var(--ol); }
.shop .sn { margin:4px 0 5px; font:400 13.5px/1.05 var(--fh); letter-spacing:.1px; text-shadow:var(--so2); min-height:2.1em; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.shop .sl { position:absolute; left:6px; top:6px; font:800 9.5px var(--fb); color:#fff; background:rgba(8,20,45,.6); border-radius:7px; padding:1px 5px; }
.shop .btn.gold { min-height:36px; padding:3px 6px 5px; font-size:17px; border-radius:11px; gap:4px; width:100%; }
.shop .btn.gold .coin { width:1.15em; height:1.15em; }
.shop .alt { margin-top:5px; min-height:28px; font-size:12px; padding:2px 4px 4px; border-radius:9px; }
.shop.dim { filter:grayscale(.75) brightness(.8); }
.shop .why { font:800 10px/1.2 var(--fb); color:#fff; background:rgba(8,20,45,.6); border-radius:8px; padding:4px 3px; }
.shop .tag { position:absolute; right:-6px; top:-6px; z-index:2; width:44px; height:44px; display:flex; align-items:center; justify-content:center; text-align:center; font:400 11px/0.95 var(--fh); color:#fff; text-shadow:0 1px 0 #5a0a05;
  background:radial-gradient(circle,#ff5a3a,#d8201a); clip-path:polygon(50% 0,61% 12%,76% 6%,80% 21%,95% 24%,90% 39%,100% 50%,90% 61%,95% 76%,80% 79%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 79%,5% 76%,10% 61%,0 50%,10% 39%,5% 24%,20% 21%,24% 6%,39% 12%); transform:rotate(12deg); }
.sellHead { background:linear-gradient(180deg,var(--yl1),var(--yl3)); border:3px solid var(--ol); border-radius:14px; box-shadow:inset 0 2px 0 rgba(255,255,230,.7); }
.sellHead b { font:400 16px var(--fh); letter-spacing:.2px; text-transform:none; color:#fff; text-shadow:var(--so2); }
.sellHead span { color:#5a3000; font-weight:800; }
.sellHead > svg { color:#fff; }
.trHead h2 { font:400 21px var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2); }
.trHead p { color:#e6f0fb; font-weight:700; }
.rest { font:400 13px var(--fh); letter-spacing:.2px; text-transform:none; color:var(--mut); border-top:2px solid rgba(8,20,45,.35); }
.rest b { color:#fff; font-weight:400; text-shadow:0 1.5px 0 var(--ol); }
/* market */
.mtH { font:800 10px var(--fb); letter-spacing:.3px; color:#cfe3fb; background:#123a73; border-bottom:2px solid var(--ol); }
.mtR { border-bottom:2px solid rgba(8,20,45,.35); content-visibility:auto; contain-intrinsic-size:auto 58px; } /* perf 2026-10-06 (vss-02): off-screen Market rows skip layout and paint */
.mtR .it .t { font-weight:900; font-size:13.5px; }
.mtR .it .s, .mtR .ex { color:var(--mut); font-weight:700; }
.mtR .pr { font:400 16px var(--fh); color:#ffe46a; text-shadow:0 1.5px 0 var(--ol); }
.mtR.own .t::after { color:var(--yl1); }
/* chat + mail */
.chatLog { gap:8px; }
.cm { max-width:84%; background:#fff; color:#12284c; border:2.5px solid var(--ol); border-radius:16px 16px 16px 4px; box-shadow:0 2px 0 rgba(0,0,0,.3); font-weight:800; padding:6px 10px 7px; }
.cm b { font:400 13px var(--fh); letter-spacing:.2px; color:#1f6fdc; }
.cm small { color:#7a8ba8; font-weight:800; }
.cm.me { background:linear-gradient(180deg,#8ff05a,#56c93a); color:#0a2a05; border-color:var(--ol); border-radius:16px 16px 4px 16px; }
.cm.me b { color:#0f4a08; }
.chatIn { border-top:0; padding-top:10px; }
.mail { border-bottom:2px solid rgba(8,20,45,.35); }
.mail .mi { width:42px; height:42px; border-radius:12px; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.45); }
.mail .mi svg { width:22px; height:22px; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.mail .grow { font-weight:800; }
.mail small { color:var(--mut); font-weight:700; }
.chipl > span { background:#0b2448; border:2px solid var(--rc, var(--ol)); border-radius:10px; font-weight:800; }

/* ---------- BASE (3D compound, mockup 2) ---------- */
#bzRoot { position:absolute; inset:0; overflow:hidden; background:#e6c27e; }
#bzRoot.b3d canvas.bzCv { display:none; }
.bz3 { position:absolute; inset:0; }
.bzOv { position:absolute; inset:0; pointer-events:none; z-index:2; }
.bzLbl { position:absolute; z-index:2; transform:translate(-50%,-50%); display:flex; align-items:center; pointer-events:auto; padding:0; background:none; border:0; white-space:nowrap; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.bzLbl .lv { position:relative; z-index:1; width:34px; height:36px; display:flex; align-items:center; justify-content:center; font:400 12px/1 var(--fh); color:#fff; text-shadow:var(--so2);
  background:linear-gradient(180deg,#3d7fd8,#1b4e9a); clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%); }
.bzLbl .lv::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--ol); clip-path:inherit; }
.bzLbl .lv i { position:absolute; inset:2.5px 2.5px 3.5px; z-index:-1; background:linear-gradient(180deg,#4f9af0,#1d58ac); clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%); }
.bzLbl .nm { margin-left:-6px; padding:4px 10px 5px 12px; border-radius:0 11px 11px 0; background:linear-gradient(180deg,#123a73,#0b2650); border:2.5px solid var(--ol); font:400 14px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.bzLbl.off .lv i { background:linear-gradient(180deg,#8a96a4,#5a6674); } .bzLbl.off .nm { color:#cfe0f2; }
.bzLbl.build .nm { background:linear-gradient(180deg,#f0a21a,#c06a08); }
.bzLbl.can .lv i { background:linear-gradient(180deg,var(--gr1),var(--gr2)); }
.bzLbl:active { transform:translate(-50%,-50%) scale(.95); }
/* compact tags (built), "+" pads (empty plots), the ring lock badge */
.bzLbl.tag .nm { margin:0; padding:3px 8px 4px; border-radius:9px; border-width:1.5px; background:rgba(12,24,40,.78); font-size:11px; }
.bzLbl.tag .nm b { display:inline-block; min-width:15px; margin-right:5px; padding:1px 3px; border-radius:5px; background:linear-gradient(180deg,#4f9af0,#1d58ac); text-align:center; font-weight:400; }
.bzLbl.tag.build .nm { background:rgba(170,95,10,.85); }
.bzLbl.tag.garLo .nm { background:linear-gradient(180deg,#ffa23c,#e8670f); } .bzLbl.tag.garLo:hover .nm { filter:brightness(1.12); transform:scale(1.08); } /* Bucket 6: the Hideout car opens Loadout */
.bzBox.wpMoved { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:13px; color:var(--mut); } .bzBox.wpMoved b { color:var(--tx); } .bzBox.wpMoved span { flex:1; }
.bzLbl.plus { flex-direction:column; gap:2px; }
.bzLbl.plus .pl { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(20,30,44,.72); border:2px dashed #ffd24a; color:#ffd24a; font:400 22px/1 var(--fh); }
.bzLbl.plus.can .pl { background:linear-gradient(180deg,var(--gr1),var(--gr2)); border:2px solid var(--ol); color:#fff; animation:bzPulse 1.6s ease-in-out infinite; }
.bzLbl.plus .nm { margin:0; padding:2px 7px 3px; border-radius:8px; border-width:1.5px; background:rgba(12,24,40,.7); font-size:10px; }
.bzLbl.plus.solo .pl { width:26px; height:26px; font-size:18px; opacity:.9; }
.bzLbl.plus.sq .nm { display:none; } /* vh-06: no free spot for "+ name" (ui/base.js placeOverlay): just the "+", name in the tooltip */
.bzLbl.lock { padding:4px 10px; border-radius:10px; background:rgba(10,14,20,.8); border:1.5px solid rgba(255,255,255,.25); color:#e8e8e8; font:400 12px/1 var(--fh); }
@keyframes bzPulse { 50% { transform:scale(1.1); } }
button.bzPill { font:inherit; color:inherit; cursor:pointer; }
.bzPill.lvp .pi { background:linear-gradient(180deg,#f0c040,#b07a10); } .bzPill.horde .pi { background:linear-gradient(180deg,#8a5ae0,#4a2a90); }
.bzEmo { width:64px; height:64px; flex:none; display:flex; align-items:center; justify-content:center; font-size:40px; border-radius:14px; background:rgba(0,0,0,.25); }
.bzUnl { margin:4px 0 2px 18px; padding:0; font-size:13px; } .bzUnl li { margin:2px 0; }
.bzLadder > div { display:flex; gap:8px; align-items:baseline; padding:5px 8px; border-radius:8px; font-size:12px; opacity:.72; }
.bzDefBtn { position:absolute; left:8px; bottom:12px; z-index:3; padding:7px 14px 9px; border-radius:14px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#5a6a7a,#2d3a48); color:#fff; font:400 15px/1 var(--fh); text-shadow:var(--so2); box-shadow:0 3px 0 rgba(0,0,0,.35); }
#bzRoot.panel .bzDefBtn, #bzRoot.placing .bzDefBtn, #bzRoot:not(.b3d) .bzDefBtn { opacity:0; pointer-events:none; }
.bzPlace { position:absolute; left:8px; right:8px; bottom:12px; z-index:4; display:none; align-items:center; gap:8px; padding:7px 8px 7px 12px; border-radius:14px; border:2.5px solid var(--ol); background:rgba(10,30,66,.92); color:#fff; font:400 13px/1.2 var(--fh); }
#bzRoot.placing .bzPlace { display:flex; } .bzPlace span { flex:1; } #bzRoot.placing .bzBub, #bzRoot.placing .bzLbl { opacity:.35; pointer-events:none; }
.bzLbl.gun.plus .pl { width:22px; height:22px; font-size:15px; border-color:#9fd0ff; color:#9fd0ff; } .bzLbl.tag.gun .nm { padding:2px 6px 3px; }
.bzGrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 10px; } .bzMini { padding:7px 8px; border-radius:10px; background:rgba(0,0,0,.2); font-size:12px; display:flex; flex-direction:column; gap:2px; } .bzMini.lock { opacity:.55; } .bzMini small { opacity:.85; font-size:11px; }
.bzSRow { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.08); } .bzSRow .bzIco { width:34px; height:34px; flex:none; } .bzSRow .bzIco > * { width:100%; height:100%; } .bzRn { flex:1; font-size:13px; }
.bzBtns3 { display:flex; gap:6px; margin-top:8px; } .bzBtns3 .btn { flex:1; }
.bzLadder > div b { min-width:20px; font:400 14px/1 var(--fh); } .bzLadder > .done { opacity:.45; } .bzLadder > .next { opacity:1; background:rgba(255,210,70,.14); }
.bzBub { position:absolute; z-index:1; transform:translate(-50%,-100%); display:flex; align-items:center; gap:6px; pointer-events:auto; padding:3px 10px 4px 3px; border-radius:14px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#123a73,#0b2650); color:#fff; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.bzBub::after { content:""; position:absolute; left:22px; bottom:-10px; border:7px solid transparent; border-top:8px solid var(--ol); }
.bzBub .bi { width:34px; height:34px; border-radius:50%; background:#fff; border:2.5px solid var(--ol); display:flex; align-items:center; justify-content:center; font-size:19px; overflow:hidden; }
.bzBub .bi img, .bzBub .bi .art { width:86%; height:86%; object-fit:contain; }
.bzBub .bt { display:flex; flex-direction:column; font:400 12px/1.05 var(--fh); text-shadow:var(--so2); text-align:left; }
.bzBub .bt b { font-weight:400; font-size:15px; font-variant-numeric:tabular-nums; }
.bzBub.ready { background:linear-gradient(180deg,var(--gr1),var(--gr2)); animation:bzBob 1.2s ease-in-out infinite; }
.bzBub.build { background:linear-gradient(180deg,#f0a21a,#c06a08); }
.bzBub.can { background:linear-gradient(180deg,var(--or1),var(--or2)); animation:bzBob 1.6s ease-in-out infinite; }
@keyframes bzBob { 50% { transform:translate(-50%,calc(-100% - 4px)); } }
.bzInfo { position:absolute; left:6px; top:6px; right:120px; z-index:3; display:flex; flex-wrap:wrap; gap:5px; pointer-events:none; }
.bzPill { display:flex; align-items:center; gap:5px; padding:2px 9px 3px 2px; border-radius:22px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#123a73cc,#0b2650e6); color:#fff; pointer-events:auto; box-shadow:0 2px 0 rgba(0,0,0,.3); }
.bzPill .pi { width:28px; height:28px; border-radius:50%; border:2.5px solid var(--ol); display:flex; align-items:center; justify-content:center; font-size:18px; background:linear-gradient(180deg,var(--yl1),var(--yl3)); }
.bzPill .pi.off { background:linear-gradient(180deg,#8a96a4,#5a6674); }
.bzPill span { display:flex; flex-direction:column; font:400 10.5px/1.05 var(--fh); text-shadow:var(--so2); }
.bzPill b { font-weight:400; font-size:13.5px; }
.bzCollectAll { position:absolute; right:6px; top:6px; z-index:3; } .bzCollectAll .btn { min-height:38px; padding:5px 12px 7px; }
.bzHint3 { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3; padding:5px 14px 6px; border-radius:14px; border:2.5px solid var(--ol); background:rgba(10,30,66,.85); color:#fff; font:400 13px var(--fh); text-shadow:var(--so2); white-space:nowrap; pointer-events:none; }
#bzRoot.panel .bzInfo, #bzRoot.panel .bzHint3, #bzRoot.panel .bzCollectAll { opacity:0; pointer-events:none; }
#bzRoot.panel .bzLbl:not(.sel), #bzRoot.panel .bzBub { opacity:.0; pointer-events:none; }
.bzInfo, .bzHint3, .bzLbl, .bzBub { transition:opacity .2s; }
/* 2D fallback chrome (basegfx) + station panels */
.bzTop { background:linear-gradient(180deg,rgba(10,30,66,.85),rgba(10,30,66,0)); }
.bzTitle { font:400 24px/1 var(--fh); letter-spacing:.4px; text-transform:none; text-shadow:var(--so); }
.bzTag { font:400 11.5px var(--fh); letter-spacing:.2px; text-transform:none; border-radius:10px; border:2px solid var(--ol); background:rgba(10,30,66,.85); color:#fff; padding:3px 8px; }
.bzTag.on { color:var(--grn); } .bzTag.off { color:#ffb0a0; } .bzTag.gold { color:var(--gold); }
.bzReady { font:400 15px var(--fh); letter-spacing:.2px; text-transform:none; border:3px solid #0f4a08; border-radius:14px; background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(230,255,210,.6), 0 3px 0 #0f4a08; }
.bzDock { background:linear-gradient(0deg,rgba(10,30,66,.95) 55%,rgba(10,30,66,0)); }
.bzHint { font:400 12px var(--fh); letter-spacing:.3px; text-transform:none; color:#fff; text-shadow:var(--so2); }
.bzChip { border:2.5px solid var(--ol); border-radius:13px; background:var(--panelBg); box-shadow:var(--panelSh); }
.bzChip .t { font:400 13px/1.1 var(--fh); letter-spacing:.1px; text-transform:none; text-shadow:var(--so2); }
.bzChip .s { font-weight:800; color:var(--mut); }
.bzChip.ready { box-shadow:var(--panelSh), 0 0 0 3px var(--gr1); } .bzChip.ready .s { color:var(--grn); }
.bzChip .dot { background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; border:2px solid #fff; font:400 11px/14px var(--fh); }
.bzPips i { background:rgba(8,20,45,.5); } .bzPips i.on { background:var(--yl1); }
#sheet.bzSheet { background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(4,14,34,.3) 45%); }
#sheet.bzSheet .sheetWrap { max-height:60%; }
.bzHead { gap:12px; margin:-6px 40px 12px 0; }
.bzArt { width:92px; height:84px; border-radius:14px; border:3px solid var(--ol); background:radial-gradient(ellipse at 50% 60%,#f3d49a,#c9985a 75%); box-shadow:inset 0 2px 0 rgba(255,255,255,.4); }
.bzHead h3 { font:400 22px/1.05 var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2); }
.bzHead p { color:#dbe9fa; font-weight:700; font-size:12px; }
.bzHead .now { background:rgba(126,240,90,.2); color:#b8ff9a; border-radius:8px; font-weight:800; }
.bzLv { font:400 13px var(--fh); letter-spacing:.2px; text-transform:none; color:var(--yl1); text-shadow:0 1.5px 0 var(--ol); }
.bzTabs { gap:5px; padding:4px; margin:4px 0 12px; border:3px solid var(--ol); border-radius:14px; background:#0b2448; box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.bzTabs button { border-radius:10px; padding:8px 4px 9px; font:400 15px var(--fh); letter-spacing:.2px; text-transform:none; color:#9fc3ee; text-shadow:0 1.5px 0 var(--ol); }
.bzTabs button.on { background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 2px var(--ol); }
.bzTabs button.on::after { display:none; }
.bzTabs .n { background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; font:400 11px/15px var(--fh); border:1.5px solid var(--ol); }
.bzBox { background:#123a73; border:3px solid var(--ol); border-radius:16px; box-shadow:inset 0 2px 0 rgba(120,190,255,.2); padding:11px; margin-bottom:11px; }
.bzBox.hl { background:linear-gradient(180deg,#1f5aa6,#15427f); box-shadow:inset 0 2px 0 rgba(120,190,255,.3), 0 0 0 2px var(--yl2); }
.bzH { font:400 14px var(--fh); letter-spacing:.2px; text-transform:none; color:#fff; text-shadow:var(--so2); }
.bzRow { border-top:2px solid rgba(8,20,45,.35); }
.bzRow .nm { font-weight:900; font-size:14px; }
.bzRow .sub { color:var(--mut); font-weight:700; }
.bzIn { font-weight:800; } .bzIn.miss { color:#ffb0a0; }
.bzTime { color:var(--yl1); font:400 13px var(--fh); letter-spacing:.2px; text-shadow:0 1px 0 var(--ol); }
.bzBar { height:10px; border:2px solid var(--ol); border-radius:6px; background:#0b2346; box-sizing:content-box; }
.bzBar i { background:linear-gradient(180deg,var(--yl1),var(--yl3)); border-radius:4px; }
.bzBar.grn i { background:linear-gradient(180deg,#a8ff7a,#3cc42a); }
.bzCost > span { background:#0b2448; border:2px solid var(--ol); border-radius:10px; font-weight:800; }
.bzCost > span.miss { color:#ffb0a0; box-shadow:inset 0 0 0 1.5px rgba(255,90,70,.6); } .bzCost > span.ok { box-shadow:inset 0 0 0 1.5px rgba(126,240,90,.45); }
.bzReq { color:#ffb0a0; font-weight:800; } .bzReq.ok { color:var(--grn); }
.bzStat > div { background:#0b2448; border:2px solid var(--ol); border-radius:10px; }
.bzStat b { font:400 15px var(--fh); color:var(--grn); text-shadow:0 1px 0 var(--ol); } .bzStat small { font-weight:800; color:var(--mut); }
.bzWl i { background:rgba(8,20,45,.5); height:6px; border-radius:2px; } .bzWl i.on { background:var(--yl1); } .bzWl i.nx { background:rgba(255,228,103,.4); }
.bzNote { color:#dbe9fa; font-weight:700; }
.bzEmpty { color:var(--mut); font-weight:800; }

/* ---------- RAID FLOW ---------- */
.pickScr { padding-top:14px; }
.pickTop .h2 { text-align:center; }
.pickC { padding:12px 12px 10px; margin-bottom:12px; color:#fff; }
.pickC::before { display:none; }
.pickC.junk { background:linear-gradient(180deg,#63c43e,#2f8a22 60%,#246d1a); }
.pickC:active { transform:translateY(2px); }
.pickC.off { filter:grayscale(.7) brightness(.85); }
.pkHead h3 { font:400 clamp(22px,3.4dvh,27px)/1 var(--fh); letter-spacing:.4px; text-transform:none; text-shadow:var(--so); }
.pkHead small { color:#e6f0fb; font-weight:800; }
.pkBody canvas { filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.pkS { background:rgba(8,20,45,.45); border:2px solid var(--ol); border-radius:10px; }
.pkS svg { color:#fff; } .pkS span { font:800 9.5px var(--fb); color:#cfe3fb; } .pkS b { font:400 14px/1.2 var(--fh); text-shadow:0 1px 0 var(--ol); }
.pkCond { font:400 12px var(--fh); letter-spacing:.2px; text-transform:none; color:#fff; } .pkCond b { font:400 14px var(--fh); }
.pkWhy { border-top:2px dashed rgba(8,20,45,.35); }
.pkWhy li { color:#fff; font-weight:800; }
.pkWhy li i { border:1.5px solid var(--ol); background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; border-radius:6px; }
.pkWhy li.c i { background:linear-gradient(180deg,var(--rd1),var(--rd2)); color:#fff; }
.pkGo { justify-content:center; margin:10px -2px 0; padding:8px 12px 10px; border:3px solid #5a1a05; border-radius:14px; background:linear-gradient(180deg,var(--or1),var(--or2) 55%,var(--or3)); box-shadow:inset 0 2px 0 rgba(255,240,200,.65), 0 3px 0 #5a1a05; font:400 19px var(--fh); letter-spacing:.3px; text-transform:none; color:#fff; text-shadow:var(--so2); }
.pickC.junk .pkGo { color:#fff; background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); border-color:#6a3a00; box-shadow:inset 0 2px 0 rgba(255,255,230,.75), 0 3px 0 #6a3a00; }
.pickC.off .pkGo { color:#fff; }
.warns { color:var(--yl1); font-weight:800; text-shadow:0 1px 0 var(--ol); }
.stick { background:linear-gradient(0deg,#0d2c5a 70%,rgba(13,44,90,0)); }
.qScr { background:radial-gradient(ellipse at 50% 18%,rgba(255,200,110,.45),transparent 55%), linear-gradient(180deg,#3a6ad0 0%,#1d5aa6 40%,#0f2e5e 100%); }
.qTag, .qLen { font:400 12px var(--fh); letter-spacing:.3px; border:2px solid var(--ol); border-radius:10px; background:rgba(10,30,66,.85); color:#fff; }
.qHead h1 { font:400 clamp(28px,4.6dvh,36px)/1 var(--fh); letter-spacing:.5px; text-transform:none; color:#fff; text-shadow:var(--so); }
.qTick { font:400 14px var(--fh); letter-spacing:.4px; text-transform:none; color:var(--yl1); text-shadow:var(--so2); }
.qStats > div { background:var(--panelBg); border:3px solid var(--ol); border-radius:14px; box-shadow:var(--panelSh); }
.qStats span { font:800 10px var(--fb); color:#cfe3fb; } .qStats b { font:400 24px/1.15 var(--fh); color:#fff; text-shadow:var(--so2); } .qStats small { color:var(--mut); font-weight:700; }
.qAuto svg circle { stroke:#0b2346; } .qAuto svg #qRing { stroke:var(--yl1); filter:none; }
.qLh { font:400 13px var(--fh); letter-spacing:.2px; text-transform:none; color:#fff; background:#123a73; border-bottom:2px solid var(--ol); text-shadow:0 1px 0 var(--ol); }
.qRow { border-bottom:2px solid rgba(8,20,45,.3); } .qRow .t { font-weight:900; } .qRow .s { color:var(--mut); font-weight:700; }
.qAv { border:2px solid var(--ol); font:400 12px var(--fh); }
.qLoad { font:400 12px var(--fh); letter-spacing:.2px; text-transform:none; color:#fff; }
.qLoad > span:not(.pill) { border:2px solid var(--ol); border-radius:10px; background:rgba(10,30,66,.7); }
@keyframes qGlow { 50% { box-shadow:inset 0 2px 0 rgba(255,240,200,.65), 0 3px 0 #5a1a05, 0 0 26px rgba(255,160,40,.7); } }
.res h1 { font:400 44px var(--fh); letter-spacing:.8px; text-transform:none; text-shadow:var(--so); }
.res > p { color:#e6f0fb; font-weight:800; }
.xpl { font:400 19px var(--fh); letter-spacing:.3px; color:var(--yl1); text-shadow:var(--so2); }
.lvup { background:linear-gradient(180deg,var(--yl1),var(--yl3)); color:#fff; font:400 14px var(--fh); letter-spacing:.3px; border:2px solid var(--ol); border-radius:10px; text-shadow:0 1px 0 #6a3a00; }
.skg { border-bottom:2px dashed rgba(8,20,45,.3); font-weight:800; } .skg b { color:var(--yl1); font:400 14px var(--fh); text-shadow:0 1px 0 var(--ol); }

/* ---------- handbook / misc ---------- */
.hb2 details { margin-bottom:8px; }
.hb2 summary { font:400 16px var(--fh); letter-spacing:.3px; text-transform:none; text-shadow:var(--so2); }
.hb2 summary::after { color:#fff; }
.hb2 .hbody { color:#e6f0fb; font-weight:700; }
.legend { color:var(--mut); font-weight:800; }
@media (hover:hover) { .btn:hover { filter:brightness(1.08); } .li.tap:hover, .mtR:hover { background:rgba(255,255,255,.06); } }

/* ---------- crate ceremony ---------- */
#crateOv { background:radial-gradient(ellipse at 50% 38%,#3a86d8 0%,#123a73 55%,#081a38 100%); }
#crateOv .cTitle b { font-family:var(--fh); font-weight:400; font-size:30px; text-shadow:var(--so), 0 0 18px var(--tc); }
#crateOv .cTitle small { font:400 13px var(--fh); letter-spacing:1px; }
#crateOv .card .back { background:linear-gradient(180deg,#2a6cbc,#1a4c90); border:3px solid var(--ol); color:#fff; font:400 38px var(--fh); text-shadow:var(--so); }
#crateOv .card .front { border:3px solid var(--rc); }
#crateOv .card b { font:400 13px/1.15 var(--fh); text-shadow:0 1px 0 var(--ol); }
#crateOv .cHint { color:#fff; font:400 14px var(--fh); text-shadow:var(--so2); }

/* ---------- short phones (390x664) ---------- */
@media (max-height:720px) {
  #uiNav button { height:58px; }
  #uiNav button .nIco { width:38px; height:34px; font-size:24px; }
  #uiNav button .nLbl { font-size:11.5px; }
  .tAv { width:44px; height:44px; } .tWho > b { font-size:16px; } .tIcon { width:40px; height:40px; } .tGold { height:36px; } .tGold .coin { width:34px; height:34px; }
  .gStage { min-height:318px; } .gSlot { height:56px; width:62px; } .gCol { width:62px; }
}
#bzRoot.b3d .bzTop, #bzRoot.b3d .bzDock { display:none; }
#bzRoot:not(.b3d) .bz3, #bzRoot:not(.b3d) .bzOv, #bzRoot:not(.b3d) .bzInfo, #bzRoot:not(.b3d) .bzCollectAll, #bzRoot:not(.b3d) .bzHint3 { display:none; }
.cfCar { height:190px; }
.carStage .stageHead { z-index:3; pointer-events:none; }
.wCard .wWhere { font:800 10.5px/1.2 var(--fb); color:#e6f0fb; text-shadow:0 1px 1px var(--ol); }
.wCard .wWhere .bzIn { font-size:10.5px; }
.wCard .wLockMsg { display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; font:400 13px/1.1 var(--fh); color:#dfe6ee; text-shadow:var(--so2); }
.wCard .wLockMsg svg { width:26px; height:26px; }
.wCard .wWhy { font:800 9.5px/1.15 var(--fb); color:#fff; text-align:center; text-shadow:0 1px 1px var(--ol); }
#sheet .wCard { grid-template-columns:96px 1fr 98px; }
/* crate art (icons/<crateId>.webp) replaces the CSS box when it exists; the seam glow and shakes still play */
#crateOv .crate img.crateArt { position:absolute; left:-24px; top:-44px; width:calc(100% + 48px); height:calc(100% + 64px); object-fit:contain; z-index:4; filter:drop-shadow(0 12px 14px rgba(0,0,0,.45)); transition:transform .45s cubic-bezier(.2,1.4,.5,1), opacity .45s; }
#crateOv .crate:has(img.crateArt) .body, #crateOv .crate:has(img.crateArt) .lid { opacity:0; }
#crateOv .crate.open:has(img.crateArt) .seam { opacity:0 !important; transition:opacity .35s; }
#crateOv .crate.open img.crateArt { transform:scale(1.25) translateY(-10px); opacity:0; }
#crateOv .card .ci { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }
#crateOv .card .ci .ia, #crateOv .card .ci .coin { width:54px; height:54px; font-size:38px; }

/* ---------- Raid Results: hero car on a light-ray burst, ribbon banner, reward chips, stats panel, loot ---------- */
.resX { min-height:100%; display:flex; flex-direction:column; text-align:center; background:radial-gradient(120% 60% at 50% 18%,rgba(120,200,255,.35),rgba(120,200,255,0) 60%); }
.resX.lose { background:radial-gradient(120% 60% at 50% 18%,rgba(255,110,80,.3),rgba(255,110,80,0) 60%); }
.resX.mia { background:radial-gradient(120% 60% at 50% 18%,rgba(255,190,90,.3),rgba(255,190,90,0) 60%); }
.resTag { font:400 13px var(--fh); letter-spacing:2px; color:#fff; text-shadow:var(--so2); opacity:.9; }
.resHero { position:relative; height:clamp(120px,22dvh,190px); margin:0 -12px -6px; overflow:hidden; }
.resRays { position:absolute; left:50%; top:52%; width:520px; height:520px; margin:-260px 0 0 -260px; background:repeating-conic-gradient(from 0deg,rgba(255,244,190,.55) 0deg 8deg,transparent 8deg 22deg); -webkit-mask:radial-gradient(circle,#000 0%,transparent 55%); mask:radial-gradient(circle,#000 0%,transparent 55%); animation:cSpin 22s linear infinite; }
.resX.lose .resRays { background:repeating-conic-gradient(from 0deg,rgba(255,120,90,.4) 0deg 8deg,transparent 8deg 22deg); }
.resPad { position:absolute; left:50%; bottom:8%; width:62%; height:26%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side,#ffe890,#f5b43a 70%,#b86a10); border:3px solid var(--ol); box-shadow:inset 0 -6px 0 rgba(120,60,0,.35), 0 6px 0 rgba(11,26,51,.45); }
.resCar { position:absolute; left:50%; bottom:14%; width:min(78%,300px); height:86%; transform:translateX(-50%); filter:drop-shadow(0 8px 6px rgba(0,0,0,.35)); }
.resX.lose .resCar { filter:grayscale(.75) brightness(.7) sepia(.3) drop-shadow(0 8px 6px rgba(0,0,0,.35)); }
.resSmoke { position:absolute; left:50%; top:10%; width:120px; height:80px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(60,60,70,.55),rgba(60,60,70,0)); filter:blur(4px); animation:resSmoke 3s ease-in-out infinite; }
@keyframes resSmoke { 50% { transform:translate(-44%,-8px) scale(1.12); opacity:.7; } }
.resBanner { position:relative; z-index:1; margin:0 18px 8px; padding:6px 10px 8px; border:3px solid var(--ol); border-radius:14px; background:linear-gradient(180deg,color-mix(in srgb,var(--rb) 70%,#fff),var(--rb) 55%,color-mix(in srgb,var(--rb) 70%,#000)); box-shadow:inset 0 3px 0 rgba(255,255,255,.55), 0 4px 0 var(--ol), 0 8px 18px rgba(0,0,0,.3); }
.resBanner::before, .resBanner::after { content:""; position:absolute; top:12px; width:26px; height:100%; z-index:-1; border:3px solid var(--ol); background:color-mix(in srgb,var(--rb) 65%,#000); }
.resBanner::before { left:-18px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%); border-radius:4px 0 0 4px; }
.resBanner::after { right:-18px; clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%); border-radius:0 4px 4px 0; }
.resX .resBanner h1 { margin:0; font:400 38px/1 var(--fh); letter-spacing:.8px; color:#fff; text-shadow:var(--so); }
.resX > p { margin:2px 4px 12px; color:#fff; font-weight:800; font-size:13px; text-shadow:0 1px 2px var(--ol); }
.resRew { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
.resRew .rw { flex:1; max-width:130px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px 7px; border:3px solid var(--ol); border-radius:16px; background:linear-gradient(180deg,#3b8fe6,#1d5bb0); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 rgba(11,26,51,.6); }
.resRew .rw b { font:400 22px/1 var(--fh); color:#fff; text-shadow:var(--so2); white-space:nowrap; }
.resRew .rw small { font:800 10px var(--fb); letter-spacing:.4px; text-transform:uppercase; color:#d8ecff; text-shadow:0 1px 0 var(--ol); }
.resRew .rw .coin { width:34px; height:34px; }
.resRew .rw .xs { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:2.5px solid var(--ol); background:radial-gradient(circle at 40% 30%,#bff6ff,#27b6ea 70%); font:400 13px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.resRew .rw.gold { background:linear-gradient(180deg,#ffd84a,#f09a10); }
.resRew .rw.gold small { color:#fff6d0; }
.resRew .rw.lv { background:linear-gradient(180deg,#b884ff,#6a36d8); }
.resRew .rw.lv .xs { background:radial-gradient(circle at 40% 30%,#fff27a,#f0a010 70%); font-size:16px; }
.resStats { padding:8px; }
.resStats .statg > div { padding:5px 6px; }
.resStats .statg b { font-size:16px; }
.resEmpty { display:flex; align-items:center; gap:12px; text-align:left; }
.resEmpty .ico { width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; }
.resEmpty .ico .ia { width:52px; height:52px; font-size:36px; object-fit:contain; filter:grayscale(.3); }
.resEmpty b { display:block; font:400 16px var(--fh); color:#fff; text-shadow:var(--so2); }
.resEmpty small { color:#d8ecff; font-weight:800; font-size:12px; }
.resX .h3 { text-align:left; }
.resX .stick { margin-top:auto; padding-top:14px; }

/* ---------- META (js/ui/meta.js): celebration card, daily calendar, missions, next unlock, invite, results extras ---------- */
#celebrate { position:absolute; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:22px; background:radial-gradient(ellipse at 50% 42%,rgba(40,110,210,.78),rgba(4,14,34,.9) 70%); overflow:hidden; }
#celebrate.open { display:flex; animation:fadeIn .15s; }
.ceIn { position:relative; width:min(100%,360px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; animation:cePop .45s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes cePop { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
.ceRays { position:absolute; left:50%; top:110px; width:520px; height:520px; margin:-260px 0 0 -260px; background:url(../assets/ui/reward-rays.webp) center/contain no-repeat; opacity:.55; animation:ceSpin 14s linear infinite; pointer-events:none; -webkit-mask:radial-gradient(circle,#000 30%,transparent 68%); mask:radial-gradient(circle,#000 30%,transparent 68%); z-index:-1; }
@keyframes ceSpin { to { transform:rotate(360deg); } }
.ceKick { font:400 15px/1 var(--fh); letter-spacing:.14em; color:var(--gold); text-shadow:var(--so2); }
.ceArt { width:168px; height:168px; display:flex; align-items:center; justify-content:center; animation:ceBob 2.2s ease-in-out infinite; }
.ceArt .ceImg, .ceArt img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
.ceEmo, .ceArt span.ceImg { font-size:110px; line-height:1; display:flex; align-items:center; justify-content:center; }
@keyframes ceBob { 50% { transform:translateY(-8px) rotate(-2deg); } }
.ceT { margin:0; font:400 44px/1 var(--fh); color:#fff; text-shadow:var(--so), 0 6px 0 var(--ol); }
.ceS { margin:0; font:800 14px/1.35 var(--fb); color:var(--mut); }
.ceRew { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:4px 0; }
.rwc { display:inline-flex; align-items:center; gap:5px; padding:6px 11px 6px 8px; border:3px solid var(--ol); border-radius:12px; background:linear-gradient(180deg,#2a6fc0,#1c4f95); color:#fff; font:400 17px/1 var(--fh); text-shadow:var(--so2); box-shadow:0 3px 0 var(--ol); }
.rwc.gold { background:linear-gradient(180deg,#ffd45a,#f39a0c); } .rwc.xp { background:linear-gradient(180deg,#57b8ff,#1e6fdc); }
.rwc .rwI { width:24px; height:24px; object-fit:contain; font-size:18px; } .rwc .coin { width:20px; height:20px; }
.ceList { width:100%; text-align:left; background:rgba(10,30,66,.7); border:3px solid var(--ol); border-radius:14px; padding:8px 12px; }
.ceList > b { font:400 14px var(--fh); color:var(--gold); text-shadow:var(--so2); }
.ceU { display:flex; gap:10px; align-items:center; padding:5px 0; } .ceU > span { font-size:24px; } .ceU b { display:block; font:400 16px var(--fh); color:#fff; text-shadow:var(--so2); } .ceU small { font:700 12px var(--fb); color:var(--mut); }
.ceGo { margin-top:6px; min-height:54px; font-size:22px; }
.ceAlt { margin-top:8px; min-height:46px; }
.cfBox { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cfBox i { position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:cfFall linear forwards; }
@keyframes cfFall { to { transform:translate(var(--dx),110vh) rotate(var(--rot)); } }

.dHead { display:flex; gap:12px; align-items:center; margin:2px 30px 10px 0; text-align:left; }
.dHead .dHi { width:58px; height:58px; flex:none; object-fit:contain; font-size:40px; }
.dHead h3 { margin:0; font:400 24px/1 var(--fh); color:#fff; text-shadow:var(--so2); } .dHead p { margin:4px 0 0; font:700 12.5px/1.35 var(--fb); color:var(--mut); }
.dStreak { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:6px 10px; border-radius:12px; background:rgba(255,140,40,.16); border:2px solid rgba(255,160,60,.45); }
.dStreak .dFl { width:30px; height:30px; object-fit:contain; font-size:22px; } .dStreak b { font:400 17px var(--fh); color:#ffd23f; text-shadow:var(--so2); } .dStreak small { margin-left:auto; font:800 12px var(--fb); color:var(--mut); }
.dGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:12px; }
.dCell { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 3px 7px; border:3px solid var(--ol); border-radius:12px; background:linear-gradient(180deg,#2462ad,#153d77); min-height:106px; }
.dCell.big { grid-column:span 2; background:linear-gradient(180deg,#8a4fd8,#4a2690); }
.dCell.now { background:linear-gradient(180deg,#ffd45a,#f39a0c); animation:dGlow 1.4s ease-in-out infinite; }
@keyframes dGlow { 50% { box-shadow:0 0 0 3px #fff, 0 0 18px rgba(255,210,63,.9); } }
.dCell.got { filter:saturate(.35) brightness(.75); }
.dDay { font:400 13px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.dArt { width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:34px; } .dArt img, .dArt .art { width:100%; height:100%; object-fit:contain; }
.dCell.big .dArt { width:64px; height:64px; }
.dRew { font:800 11px/1.2 var(--fb); color:#fff; text-align:center; text-shadow:0 1px 0 var(--ol); } .dRew .coin { width:12px; height:12px; vertical-align:-2px; }
.dChk { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .dChk .i { width:40px; height:40px; stroke:#8def58; stroke-width:4; filter:drop-shadow(0 2px 0 var(--ol)); }
.dNext { text-align:center; font:800 13px var(--fb); color:var(--mut); padding:10px; } .dNext b { color:#fff; }

.mRow { display:flex; align-items:center; gap:10px; padding:9px 10px; margin-bottom:7px; border:3px solid var(--ol); border-radius:12px; background:linear-gradient(180deg,#2462ad,#1c4f95); text-align:left; }
.mRow.ready { background:linear-gradient(180deg,#2f8a3a,#1f6a28); } .mRow.claimed { opacity:.6; }
.mTxt { flex:1; min-width:0; } .mTxt b { font:400 15px/1.15 var(--fh); color:#fff; text-shadow:var(--so2); } .mTxt .bar { margin:5px 0 3px; height:8px; } .mTxt .bar i { display:block; height:100%; } .mTxt small { font:800 11.5px var(--fb); color:var(--mut); } .mTxt .coin { width:12px; height:12px; vertical-align:-2px; }
.mRow .btn, .mBonus .btn { min-height:38px; padding:6px 12px 8px; flex:none; }
.mOk .i { width:28px; height:28px; stroke:#8def58; stroke-width:4; }
.mBonus { display:flex; align-items:center; gap:10px; padding:8px 10px; margin:2px 0 10px; border:3px dashed rgba(255,210,63,.6); border-radius:12px; background:rgba(255,190,26,.1); text-align:left; }
.mBonus.ready { border-style:solid; background:rgba(255,190,26,.25); } .mBonus.claimed { opacity:.6; }
.mBonus .mBi { width:44px; height:44px; object-fit:contain; font-size:30px; flex:none; } .mBonus > div { flex:1; } .mBonus b { display:block; font:400 15px var(--fh); color:#fff; text-shadow:var(--so2); } .mBonus .rwc { font-size:12px; padding:2px 6px; border-width:2px; box-shadow:none; margin:3px 4px 0 0; }

.iLink { display:flex; gap:8px; margin:6px 0 10px; } .iLink input { flex:1; min-width:0; font:800 13px var(--fb); padding:10px; border-radius:10px; border:3px solid var(--ol); background:#0b2346; color:#fff; }
.btn .btnI, .btn img.btnI { width:26px; height:26px; object-fit:contain; margin:-4px 0; font-size:18px; }


.resMis { display:flex; align-items:center; gap:10px; margin:10px 0; padding:8px 10px; border:3px solid var(--ol); border-radius:14px; background:linear-gradient(180deg,#2f8a3a,#1f6a28); text-align:left; }
.resMis .rmI { width:42px; height:42px; object-fit:contain; font-size:30px; flex:none; } .resMis > div { flex:1; min-width:0; } .resMis b { font:400 16px var(--fh); color:#fff; text-shadow:var(--so2); } .resMis small { display:block; font:800 12px var(--fb); color:#d8ffd0; }
.resBtns { display:flex; gap:8px; } .resBtns .resShare { flex:none; width:64px; padding:0; } .resBtns .resShare .btnI { width:38px; height:38px; }
.bzCost .free { font-family:var(--fh); letter-spacing:.06em; }
/* setup: START follows the paint swatches instead of floating over the second row (taps meant for a swatch hit START) */
.suStick { position:static; background:none; margin-top:10px; }

/* ---------- Garage rework (2026-09-27, docs/art/garage-v1): Garage carousel, Tuning / Attachments / Weapons cards, Loadout,
   Profile, Stash head, Messages tabs, Home MAP button ---------- */
.subHead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.subHead .tIcon { width:40px; height:40px; }
.garStage { min-height:300px; margin-bottom:0; }
.garStage .gCar { top:8px; bottom:8px; }
.gArrow { position:absolute; top:50%; z-index:3; width:46px; height:46px; margin-top:-23px; padding:0; border-radius:50%; border:3px solid var(--ol); color:#fff;
  background:radial-gradient(circle at 50% 30%,#57b0f5,#1a58a8 72%); box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.gArrow svg { width:24px; height:24px; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.gArrow.l { left:8px; } .gArrow.r { right:8px; }
.gArrow:active { transform:translateY(2px); }
.garLock { position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:3; padding:3px 12px 4px; border-radius:10px; border:2.5px solid var(--ol); background:rgba(10,30,66,.85); color:#fff; font:400 14px var(--fh); text-shadow:var(--so2); display:flex; gap:6px; align-items:center; }
.garLock svg { width:14px; height:14px; }
.garInfo { margin:-18px 6px 10px; z-index:3; padding:10px 12px 8px; }
.giTop { display:flex; align-items:center; gap:10px; }
.giName { flex:1; min-width:0; }
.giName b { display:block; font:400 24px/1 var(--fh); color:#fff; text-shadow:var(--so); letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.giName small { display:inline-block; margin-top:5px; padding:2px 9px; border-radius:8px; background:rgba(8,24,52,.6); font:800 11.5px var(--fb); color:#bcd6f5; }
.gPow { flex:none; display:flex; align-items:center; gap:6px; padding:4px 12px 5px 5px; border-radius:14px; border:3px solid #5a3200; background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); font:400 17px var(--fh); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 2px 0 rgba(0,0,0,.35); }
.gPow .pw { width:24px; height:24px; border-radius:8px; background:linear-gradient(180deg,#ff9a3a,#e0501a); border:2px solid #5a3200; display:flex; align-items:center; justify-content:center; font-size:13px; text-shadow:none; }
.gPow.price { padding:5px 12px; }
.giCond { display:flex; align-items:center; gap:8px; margin-top:9px; }
.giCond > span { font:800 11px var(--fb); color:#bcd6f5; text-transform:uppercase; }
.giCond .bar { flex:1; height:14px; border-radius:7px; }
.giCond > b { font:400 15px var(--fh); text-shadow:var(--so2); min-width:38px; text-align:right; }
.giCond .btn { min-height:32px; padding:4px 10px; }
.giDots { margin-top:6px; text-align:center; font:800 11px var(--fb); color:#9fc2ea; }
.garStats { grid-template-columns:repeat(4,1fr); margin:0 0 4px; }
.garStats > div { padding:5px 6px; }
.garStats b { font-size:15px; }
.tuneG { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.tuneC { position:relative; display:flex; flex-direction:column; align-items:center; padding:6px 3px 5px; border-radius:14px; border:2.5px solid var(--ol); cursor:pointer; min-width:0;
  background:linear-gradient(180deg,var(--r1),var(--r2)); box-shadow:inset 0 0 0 2.5px var(--r3), inset 0 3px 0 rgba(255,255,255,.3), 0 3px 0 rgba(4,12,30,.5); }
.tuneC .ti { width:100%; height:42px; display:flex; align-items:center; justify-content:center; font-size:26px; }
.tuneC .ti img, .tuneC .ti .art { width:44px; height:42px; object-fit:contain; filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.tuneC b { font:400 12.5px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); white-space:nowrap; }
.tuneC small { font:800 10px var(--fb); color:#fff; text-shadow:0 1px 1px var(--ol); margin:1px 0 4px; }
.tuneC .gh { position:absolute; top:4px; left:4px; width:12px; height:12px; }
.tuneC .gh::before { content:""; position:absolute; inset:0; background:var(--hc); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.tuneBuy { width:100%; min-height:26px; padding:1px 2px 2px; border-radius:9px; border:2px solid #0f4a08; background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; font:400 12.5px var(--fh); text-shadow:var(--so2); display:flex; align-items:center; justify-content:center; gap:2px; box-shadow:inset 0 2px 0 rgba(255,255,255,.45); white-space:nowrap; }
.tuneBuy .coin { width:13px; height:13px; }
.tuneBuy.max { background:linear-gradient(180deg,var(--yl1),var(--yl3)); border-color:#5a3200; }
.tuneC:active, .slotC:active { transform:scale(.96); }
.slotG { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.slotC { position:relative; display:flex; flex-direction:column; align-items:center; padding:6px 3px 6px; border-radius:14px; border:2.5px solid var(--ol); color:#fff; min-width:0;
  background:linear-gradient(180deg,var(--r1),var(--r2)); box-shadow:inset 0 0 0 2.5px var(--r3), inset 0 3px 0 rgba(255,255,255,.3), 0 3px 0 rgba(4,12,30,.5); }
.slotC .si { width:100%; height:50px; display:flex; align-items:center; justify-content:center; font-size:30px; }
.slotC .si img, .slotC .si .art { width:54px; height:50px; object-fit:contain; filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.slotC .si svg { width:26px; height:26px; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.slotC .si.big { font:400 30px var(--fh); text-shadow:var(--so); }
.slotC b { font:400 13px/1.1 var(--fh); text-shadow:var(--so2); white-space:nowrap; }
.slotC small { max-width:100%; font:800 9.5px/1.15 var(--fb); color:#fff; text-shadow:0 1px 1px var(--ol); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:2px; }
.slotC small .coin { width:11px; height:11px; }
.slotC.empty { background:#0d2a55; box-shadow:inset 0 3px 0 rgba(0,0,0,.3); border-style:dashed; border-color:rgba(120,180,255,.5); }
.slotC.lock { background:linear-gradient(180deg,#4a5a72,#2c3a52); box-shadow:inset 0 3px 0 rgba(255,255,255,.15), 0 3px 0 rgba(4,12,30,.5); }
.slotC.spec { cursor:default; }
.garBtns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 6px; }
.btn.purple { background:linear-gradient(180deg,#c68cff,#8a45e8 55%,#6a2bc8); border-color:#2a0a5a; color:#fff; }
.stHead { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:8px 10px; border-radius:14px; border:2.5px solid var(--ol); background:var(--panelBg); box-shadow:var(--panelSh); }
.stHead .stIc, .stHead svg { width:44px; height:44px; object-fit:contain; }
.stHead small { font:800 11.5px var(--fb); color:#bcd6f5; }
.profCard { display:flex; gap:12px; align-items:center; padding:12px; margin-bottom:12px; border-radius:16px; border:2.5px solid var(--ol); background:var(--panelBg); box-shadow:var(--panelSh); }
.profAv { width:78px; height:78px; flex:none; border-radius:16px; border:3px solid var(--ol); overflow:hidden; background:radial-gradient(circle at 50% 30%,#57b0f5,#1a58a8 72%); display:flex; align-items:center; justify-content:center; font:400 34px var(--fh); color:#fff; }
.profAv img { width:100%; height:100%; object-fit:cover; }
.profName { font:400 22px/1 var(--fh); color:#fff; text-shadow:var(--so); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profCard .tLvRow { display:flex; align-items:center; gap:4px; }
.profCard .tXp { flex:1; }
.profChips { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.profChips span { display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:9px; background:rgba(8,24,52,.6); font:800 11px var(--fb); color:#bcd6f5; }
.profChips b { font:400 14px var(--fh); color:#fff; }
.profChips svg { width:14px; height:14px; }
.msgTabs button { display:flex; align-items:center; justify-content:center; gap:6px; }
.msgTabs svg { width:16px; height:16px; }
.loCar { display:flex; align-items:center; gap:12px; cursor:pointer; }
.loCar canvas { width:120px; height:78px; flex:none; border-radius:10px; background:radial-gradient(ellipse at 50% 70%,#f7c78a 0,#c77a45 45%,#5a3a2e 100%); border:2.5px solid var(--ol); }
.loCar > .grow > b { display:block; font:400 20px/1 var(--fh); color:#fff; text-shadow:var(--so); }
.loCar > .grow > small { display:block; margin-top:3px; font:800 11px var(--fb); color:#bcd6f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loCar .pkCond { margin:6px 0 0; }
.loPow { display:inline-flex; align-items:center; gap:5px; margin-top:5px; padding:1px 9px 2px 3px; border-radius:10px; border:2px solid #5a3200; background:linear-gradient(180deg,var(--yl1),var(--yl3)); font:400 14px var(--fh); color:#fff; text-shadow:var(--so2); }
.loPow .pw { width:18px; height:18px; border-radius:6px; background:linear-gradient(180deg,#ff9a3a,#e0501a); border:1.5px solid #5a3200; display:flex; align-items:center; justify-content:center; font-size:10px; text-shadow:none; }
.fuelRow { display:flex; align-items:center; gap:8px; }
.fuelRow .bar { flex:1; margin:0; }
.fuelRow > b { font:400 15px var(--fh); text-shadow:var(--so2); }
.cell.emptyc.glv { border-color:rgba(127,240,90,.45); }

/* ---------- results, one screen (no scrolling): the hero shrinks to make room, everything else is fixed-height ---------- */
#ui:has(.resOne) #uiView { overflow:hidden; }
.resOne { height:100%; min-height:0; box-sizing:border-box; overflow:hidden; position:relative; padding:calc(8px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); gap:0; }
.resOne .resHero { flex:1 1 150px; height:auto; min-height:64px; max-height:250px; }
.resOne .resBanner { margin-bottom:4px; } .resOne .resBanner h1 { font-size:34px; }
.resOne > p { margin:2px 4px 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:none; }
.resOne .resRew { margin-bottom:8px; align-items:stretch; }
.resOne .resRew .rw { position:relative; max-width:none; padding:7px 4px 8px; font:inherit; cursor:default; transition:transform .2s, filter .3s, opacity .3s; }
.resOne .resRew .rw b { font-size:24px; }
.resOne .resRew .rw.sk { cursor:pointer; background:linear-gradient(180deg,#9b6cff,#5a2fc4); color:#fff; }
.resOne .resRew .rw.sk .xs { background:radial-gradient(circle at 40% 30%,#f3e6ff,#a674ff 70%); color:#fff; font-size:17px; }
.resOne .resRew .rw.sk:disabled { opacity:.6; }
.resOne .resRew .rw.wait { filter:saturate(.35) brightness(.72); transform:scale(.94); }
.resOne .resRew .rw.go { animation:rwPop .45s cubic-bezier(.3,1.6,.5,1); }
.resOne .resRew .rw.hit .coin, .resOne .resRew .rw.hit .xs { animation:rwHit .22s ease-out; }
.resOne .resRew .rw.lvl { animation:rwLvl .7s ease-out; }
@keyframes rwPop { 0% { transform:scale(.9); } 55% { transform:scale(1.1); } 100% { transform:scale(1); } }
@keyframes rwHit { 50% { transform:scale(1.35); filter:brightness(1.6); } }
@keyframes rwLvl { 0% { box-shadow:0 0 0 0 rgba(255,236,120,.95); filter:brightness(1.7); } 100% { box-shadow:0 0 0 18px rgba(255,236,120,0); filter:none; } }
.resOne .rbar { display:block; width:82%; height:7px; margin-top:3px; border-radius:6px; border:2px solid var(--ol); background:rgba(0,20,50,.55); overflow:hidden; }
.resOne .rbar i { display:block; height:100%; background:linear-gradient(90deg,#8ef2ff,#27b6ea); box-shadow:0 0 6px #8ef2ff; }
.resOne .rchip { margin-top:3px; padding:1px 7px; border-radius:8px; border:2px solid var(--ol); background:linear-gradient(180deg,#fff27a,#f0a010); font:400 10px/1.3 var(--fh); color:#4a2600; white-space:nowrap; }
.resOne .rchip.dim { background:rgba(255,255,255,.18); color:#fff; }
/* orbs flying from the car into a tile */
.resOrb { position:absolute; left:0; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; pointer-events:none; z-index:5; }
.resOrb.og { background:radial-gradient(circle at 35% 30%,#fff8c8,#ffd23a 45%,#e08a00); box-shadow:0 0 10px 3px rgba(255,200,60,.8); border:1.5px solid #7a4400; }
.resOrb.ox { background:radial-gradient(circle at 35% 30%,#effdff,#5fd8ff 50%,#1c88d0); box-shadow:0 0 10px 3px rgba(110,220,255,.85); }
.resOrb.os { background:radial-gradient(circle at 35% 30%,#fbf2ff,#b98aff 50%,#6a36d8); box-shadow:0 0 10px 3px rgba(185,138,255,.85); }
.resStatRow { display:flex; gap:6px; margin-bottom:8px; }
.resStatRow > div { flex:1; min-width:0; padding:5px 2px; border:2.5px solid var(--ol); border-radius:12px; background:rgba(8,28,62,.72); }
.resStatRow b { display:block; font:400 15px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); white-space:nowrap; }
.resStatRow small { font:800 9.5px var(--fb); text-transform:uppercase; letter-spacing:.4px; color:#bcd8f5; }
.resLoot { margin-bottom:8px; text-align:left; }
.resLoot .rlH { display:flex; gap:10px; margin:0 2px 4px; font:400 13px var(--fh); letter-spacing:.4px; }
.resLoot .rlH .k { color:#9df59a; } .resLoot .rlH .l { color:#ff8a78; } .resLoot .rlH .n { color:#d8ecff; }
.resLoot .rlStrip { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 4px; touch-action:pan-x; scrollbar-width:none; }
.resLoot .rlStrip::-webkit-scrollbar { display:none; }
.resLoot .rlStrip .cell { flex:none; width:58px; height:58px; position:relative; }
.resLoot .rlStrip .cell[data-lost] { filter:grayscale(.85) brightness(.6); }
.resLoot .rlStrip .cell[data-lost]::after { content:""; position:absolute; inset:0; background:linear-gradient(to top right,transparent 46%,#ff4a3a 46% 54%,transparent 54%); opacity:.9; }
.resOne .resMis { margin:0 0 8px; padding:5px 8px; } .resOne .resMis .rmI { width:32px; height:32px; }
.resNote { display:flex; align-items:center; gap:8px; width:100%; margin:0 0 8px; padding:7px 10px; border:2.5px solid var(--ol); border-radius:12px; background:rgba(8,28,62,.72); color:#e6f0fb; font:800 12px/1.3 var(--fb); text-align:left; cursor:pointer; }
.resNote span { flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.resNote i { flex:none; font:400 12px var(--fh); font-style:normal; color:#fff; padding:1px 7px; border-radius:8px; background:rgba(255,255,255,.18); }
.resOne .resBtns { margin-top:auto; flex:none; }
@media (max-height:700px) { .resOne .resBanner h1 { font-size:28px; } .resOne .resRew .rw b { font-size:20px; } .resOne .resRew .rw .coin, .resOne .resRew .rw .xs { width:28px; height:28px; } .resLoot .rlStrip .cell { width:50px; height:50px; } }

/* ---------- Home top bar: Daily gift · Jobs · Map · Messages. The XP bar gives up width so four icons fit down to 360px. ---------- */
#uiTop.onHome { gap:6px; }
#uiTop.onHome .tRight { gap:7px; }
#uiTop.onHome .tIcon { width:42px; height:42px; }
#uiTop.onHome .tIcon img, #uiTop.onHome .tIcon .art { width:32px; height:32px; }
#uiTop.onHome .tXp { min-width:0; max-width:92px; }
#uiTop.onHome .tIcon .dot { top:-7px; right:-7px; min-width:20px; height:20px; font-size:11px; line-height:15px; }
@media (max-width:375px) {
  #uiTop.onHome { padding-left:8px; padding-right:8px; }
  #uiTop.onHome .tRight { gap:5px; }
  #uiTop.onHome .tIcon { width:39px; height:39px; }
  #uiTop.onHome .tIcon img, #uiTop.onHome .tIcon .art { width:29px; height:29px; }
  #uiTop.onHome .tAv { width:44px; height:44px; }
  #uiTop.onHome .tWho > b { font-size:16px; }
  #uiTop.onHome .tXp em { font-size:8px; letter-spacing:0; padding-left:5px; }
}
/* attention cues: a claimable Daily gift wiggles, rings and shimmers every 3 s; claimable Jobs only shimmer, every 4 s */
.tShine { position:absolute; inset:0; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tShine::after { content:""; position:absolute; z-index:1; top:-20%; bottom:-20%; left:-60%; width:40%; transform:skewX(-20deg) translateX(-120%); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0)); opacity:0; pointer-events:none; }
.tGift.ready { animation:giftPulse 3s ease-in-out infinite; }
.tGift.ready .tShine img, .tGift.ready .tShine .art { animation:giftWiggle 3s ease-in-out infinite; transform-origin:50% 80%; }
.tGift.ready .tShine::after { animation:iconShine 3s ease-in-out infinite; }
.tJobs.ready .tShine::after { animation:iconShine 4s ease-in-out 1.6s infinite; }
@keyframes giftWiggle { 0%,62%,100% { transform:rotate(0) scale(1); } 66% { transform:rotate(-11deg) scale(1.1); } 71% { transform:rotate(9deg) scale(1.1); } 76% { transform:rotate(-6deg) scale(1.06); } 81% { transform:rotate(3deg) scale(1.03); } 86% { transform:rotate(0) scale(1); } }
@keyframes giftPulse { 0%,60%,100% { box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.3), 0 0 0 0 rgba(255,214,90,0); } 72% { box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.3), 0 0 0 4px rgba(255,200,50,.75); } 90% { box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.3), 0 0 0 9px rgba(255,214,90,0); } }
@keyframes iconShine { 0%,20% { transform:skewX(-20deg) translateX(-120%); opacity:0; } 24% { opacity:1; } 44% { transform:skewX(-20deg) translateX(520%); opacity:1; } 46%,100% { transform:skewX(-20deg) translateX(520%); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .tGift.ready, .tGift.ready .tShine img, .tGift.ready .tShine .art, .tShine::after { animation:none; } }
/* Jobs sheet: Missions | Tasks tabs over the existing sheets */
.jTabs { margin:-4px 46px 14px 0; border:3px solid var(--ol); border-radius:14px; box-shadow:0 3px 0 rgba(0,0,0,.2); }
.jTabs button { flex-direction:row; justify-content:center; gap:6px; padding:8px 4px 9px; font:400 15px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.jTabs .jN { font-style:normal; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:radial-gradient(circle at 40% 30%,#ff8a70,#e8261c 70%); border:2px solid #fff; font:400 11px/16px var(--fh); text-align:center; }
/* Invite lives in Profile */
.profInvite { margin:10px 0 2px; display:flex; align-items:center; justify-content:center; gap:8px; }
.profInvite .btnI { width:28px; height:28px; object-fit:contain; }

/* ---------- Horde Night HUD (ui/horde.js) ---------- */
#bzRoot.horde .bzLbl, #bzRoot.horde .bzBub, #bzRoot.horde .bzInfo, #bzRoot.horde .bzDefBtn, #bzRoot.horde .bzCollectAll, #bzRoot.horde .bzHint3 { opacity:0 !important; pointer-events:none !important; }
.hnHud { position:absolute; inset:0; z-index:5; pointer-events:none; font-family:var(--fh); color:#fff; text-shadow:var(--so2); }
.hnHud button { pointer-events:auto; }
.hnTop { position:absolute; left:6px; right:6px; top:6px; padding:6px 8px 7px; border-radius:14px; border:2.5px solid var(--ol); background:rgba(10,16,34,.85); }
.hnRow { display:flex; gap:10px; align-items:baseline; font-size:13px; } .hnTitle { font-size:15px; color:#c9a2ff; margin-right:auto; }
.hnBar { position:relative; height:13px; margin-top:4px; border-radius:7px; background:rgba(255,255,255,.12); overflow:hidden; } .hnBar i { position:absolute; left:0; top:0; bottom:0; width:100%; transition:width .15s; }
.hnBar span { position:relative; display:block; font-size:10px; line-height:13px; padding-left:6px; } .hnBar.core i { background:linear-gradient(90deg,#3cc8ff,#8ff0ff); } .hnBar.wall i { background:linear-gradient(90deg,#a08a6a,#d8c29a); } .hnBar.boss i { background:linear-gradient(90deg,#c0392b,#ff6a4a); }
.hnBan { position:absolute; left:50%; top:30%; transform:translate(-50%,-50%) scale(.8); opacity:0; transition:all .25s; font-size:26px; white-space:nowrap; color:#ffe27a; }
.hnBan.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.hnAim { position:absolute; left:50%; bottom:92px; transform:translateX(-50%); font-size:14px; white-space:nowrap; }
.hnBot { position:absolute; left:6px; right:6px; bottom:10px; display:flex; gap:6px; align-items:flex-end; }
.hnAb { position:relative; flex:1; max-width:84px; padding:6px 2px 7px; border-radius:14px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#4a3a8a,#2a1f5a); color:#fff; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:2px; }
.hnAb .i { font-size:22px; line-height:1; } .hnAb .n { font-size:10px; } .hnAb .cd { position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(0,0,0,.55); }
.hnAb.wait { filter:grayscale(.7); } .hnAb.on { border-color:#ffe27a; box-shadow:0 0 0 3px rgba(255,226,122,.5); }
.hnSide { margin-left:auto; display:flex; flex-direction:column; gap:5px; } .hnSm { padding:5px 10px; border-radius:10px; border:2px solid var(--ol); background:rgba(10,16,34,.85); color:#fff; font:400 13px var(--fh); }
.hnRes { text-align:center; padding:6px 0 4px; } .hnRes .hnBig { font-size:54px; line-height:1.1; } .hnRes h3 { margin:2px 0 6px; font-size:24px; } .hnRes.fell h3 { color:#ff8a6a; } .hnRes.held h3 { color:#8fe08a; }
.hnIts { display:flex; flex-wrap:wrap; gap:5px; } .hnIt { padding:3px 8px; border-radius:9px; background:rgba(0,0,0,.25); font-size:13px; }
.hnNext { text-align:center; padding:8px; margin:6px 0 10px; border-radius:12px; background:rgba(80,50,150,.35); font-size:13px; } .hnNext b { display:block; font:400 28px var(--fh); color:#e8d4ff; } .hnNext small { opacity:.8; }
.hHorde { pointer-events:auto; display:flex; align-items:center; gap:6px; padding:4px 12px 5px; border-radius:14px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#5a3aa8,#2d1d62); color:#fff; font:400 13px var(--fh); text-shadow:var(--so2); box-shadow:0 3px 0 rgba(0,0,0,.35); }
.hHorde b { color:#ffe27a; font-weight:400; } .hHorde.live { background:linear-gradient(180deg,#d8452c,#8a1f12); animation:bzPulse 1.2s ease-in-out infinite; }
/* Garden beds + Chem Lab recipe book categories */
.gBeds { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px; margin:4px 0 8px; }
.gBed { padding:7px 6px; border-radius:12px; background:rgba(60,40,20,.35); border:2px solid rgba(0,0,0,.3); text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; }
.gBed .gI { font-size:26px; line-height:1.1; } .gBed.empty { opacity:.55; } .gBed.ready { background:linear-gradient(180deg,#4a8a2a,#2a5a18); border-color:#9fe07a; cursor:pointer; animation:bzPulse 1.6s ease-in-out infinite; } .gBed b { color:#ffe27a; font-weight:400; font-family:var(--fh); }
.gBed .bzBar { width:100%; margin:2px 0; }
.gSeeds { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; margin:4px 0 8px; }
.gSeed { padding:6px 4px; border-radius:12px; border:2px solid var(--ol); background:linear-gradient(180deg,#3f7a2a,#244e16); color:#fff; display:flex; flex-direction:column; align-items:center; gap:1px; font-size:12px; }
.gSeed .gI { font-size:22px; } .gSeed small { font-size:10px; opacity:.85; } .gSeed.no { filter:grayscale(.8); opacity:.6; }
.bzCat { margin:10px 0 2px; font:400 14px var(--fh); color:#ffd24a; text-shadow:var(--so2); } .bzCat:first-child { margin-top:0; }
.rtChips { display:flex; gap:4px; margin:3px 0 2px; } .rtChip { width:24px; height:22px; padding:0; border-radius:7px; border:2px solid var(--rc); background:rgba(0,0,0,.25); color:var(--rc); font:400 12px/18px var(--fh); cursor:pointer; } .rtChip.on { background:var(--rc); color:#10141c; box-shadow:0 0 8px var(--rc); } .rtChip.lock { opacity:.45; border-style:dashed; } /* rarity picker on boost / deployable recipes */
.rkList { margin-top:8px; } .rkRow { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; margin-bottom:4px; background:rgba(0,0,0,.18); font-size:14px; }
.rkRow.top { background:rgba(255,210,70,.14); } .rkRow.me { outline:2px solid #7dff6a; } .rkN { width:30px; text-align:center; font:400 16px var(--fh); } .rkU { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rkV { font:400 14px var(--fh); color:#ffe27a; }
.bzLbl.plus.locked .pl { border-style:solid; border-color:#8a96a4; color:#fff; font-size:14px; background:rgba(20,30,44,.8); }
.rkW { margin-left:6px; padding:3px 8px 4px; font-size:11px; }
.hRanks { background:linear-gradient(180deg,#2f6fb8,#1c3f73); }
/* the new-player hint ("Start with the Generator…") sits bottom-centre: lift the Defense button above it while it shows */
.bzHint3:not([style*="none"]) ~ .bzDefBtn { bottom:60px; }

/* ---------- Store sheet (ui/shop.js): Store · Daily gifts · Free gold ---------- */
.shTabs { display:flex; gap:5px; padding:4px; margin:0 34px 12px 0; border:3px solid var(--ol); border-radius:14px; background:#0b2448; box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.shTabs button { flex:1; position:relative; border-radius:10px; padding:8px 4px 9px; font:400 15px var(--fh); color:#9fc3ee; text-shadow:0 1.5px 0 var(--ol); background:none; border:0; }
.shTabs button.on { background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 2px var(--ol); }
.shTabs .n { position:absolute; top:-6px; right:-2px; min-width:17px; background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; font:400 11px/15px var(--fh); border:1.5px solid var(--ol); border-radius:9px; padding:0 4px; }
.shSoon { display:inline-block; vertical-align:3px; margin-left:4px; font:400 11px/1 var(--fh); color:#fff; background:linear-gradient(180deg,#ff8a3a,#d9480f); border:2px solid var(--ol); border-radius:7px; padding:3px 6px 4px; text-shadow:0 1px 0 var(--ol); }
.shPacks { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.shPack { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border:3px solid var(--ol); border-radius:12px; background:linear-gradient(180deg,#2462ad,#153d77); filter:saturate(.55) brightness(.85); }
.shPack .art { width:52px; height:52px; object-fit:contain; }
.shPack b { font:400 16px/1 var(--fh); color:#ffd23f; text-shadow:var(--so2); display:flex; gap:4px; align-items:center; } .shPack b .coin { width:14px; height:14px; }
.shLock { display:flex; gap:3px; align-items:center; font:800 12px var(--fb); color:#cfe3ff; } .shLock .i { width:13px; height:13px; }
.shInfo { display:grid; gap:4px; padding:10px 12px; border:3px solid var(--ol); border-radius:14px; background:rgba(255,190,60,.12); }
.shInfo b { font:400 18px var(--fh); color:#fff; text-shadow:var(--so2); } .shInfo span { font:700 12.5px/1.35 var(--fb); color:var(--mut); } .shInfo .btn { margin-top:6px; }
.shAds { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:12px; }
.shAd { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border:3px solid var(--ol); border-radius:12px; background:linear-gradient(180deg,#2462ad,#153d77); filter:saturate(.5) brightness(.8); }
.shAd .art { width:40px; height:40px; object-fit:contain; } .shAd b { font:400 13px/1 var(--fh); color:#ffd23f; text-shadow:var(--so2); display:flex; gap:2px; align-items:center; } .shAd b .coin { width:11px; height:11px; }
.shAd small { font:800 10px var(--fb); color:#cfe3ff; }
.shNote { margin:8px 0 0; text-align:center; font:700 12px/1.35 var(--fb); color:var(--mut); }
.hHorde.soon { background:linear-gradient(180deg,#e0781f,#9a3a0c); animation:bzPulse 2s ease-in-out infinite; } /* last 3 hours before Horde Night */

/* ---------- Skins screen (ui/shop.js): pinned try-on preview on top, skin cards scroll underneath ---------- */
.skScreen { padding-top:0; }
.skTop { position:sticky; top:0; z-index:4; margin:0 -12px; padding:6px 12px 6px; background:linear-gradient(180deg,#123a73 0%,#0f3066 88%,rgba(15,48,102,0)); }
.skTop .subHead { margin:0 0 6px; } .skMine { margin-left:auto; font:800 12px var(--fb); color:#cfe3ff; }
.skStage { position:relative; height:clamp(170px,26vh,215px); border:3px solid var(--ol); border-radius:16px; overflow:hidden; background:radial-gradient(ellipse at 50% 72%,#2d5fae,#0d2448 75%); }
.skStage .skCar { position:absolute; inset:0; }
.skStage.concept .skCar { visibility:hidden; }
.skStage .skConcept { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.skStage.concept .skConcept { display:block; }
.skStage .skNote { position:absolute; top:6px; left:6px; font:800 10.5px var(--fb); color:#fff; background:rgba(0,0,0,.55); border-radius:7px; padding:3px 6px; display:none; }
.skStage.concept .skNote { display:block; }
.skBar { display:flex; align-items:center; gap:10px; margin:8px 0 6px; }
.skBar .skInfo { display:grid; gap:3px; min-width:0; flex:1; }
.skBar .skInfo b { font:400 21px/1 var(--fh); color:#fff; text-shadow:var(--so2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.skBar .skInfo .skR { justify-self:start; }
.skBar #skAct .btn { min-width:128px; font-size:16px; }
.skR { font:800 11px var(--fb); color:#fff; border-radius:7px; padding:3px 7px; border:2px solid var(--ol); white-space:nowrap; }
.skR.r2 { background:#2f7fd6; } .skR.r3 { background:#8a4fd8; } .skR.r4 { background:linear-gradient(180deg,#ffb43d,#e07a0a); }
.skCats { display:flex; gap:5px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; }
.skCats button { flex:none; font:800 12px var(--fb); color:#cfe3ff; background:#0b2448; border:2px solid var(--ol); border-radius:10px; padding:5px 9px; }
.skCats button.on { background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; }
.skGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding-top:6px; }
.skCard { position:relative; display:flex; flex-direction:column; gap:2px; padding:0 0 6px; border:3px solid var(--ol); border-radius:12px; overflow:hidden; background:#16294a; text-align:center; }
.skCard img { width:100%; aspect-ratio:300/260; object-fit:cover; display:block; }
.skCard b { font:400 13px/1.1 var(--fh); color:#fff; text-shadow:0 1px 0 var(--ol); padding:0 3px; }
.skCard small { font:800 11px var(--fb); color:#ffd23f; display:flex; gap:3px; align-items:center; justify-content:center; } .skCard small .coin { width:11px; height:11px; }
.skCard.r2 { border-color:#2f7fd6; } .skCard.r3 { border-color:#8a4fd8; } .skCard.r4 { border-color:#f0a020; }
.skCard.sel { box-shadow:0 0 0 3px #fff; }
.skCard.wip img { filter:saturate(.55) brightness(.8); } .skCard.wip small { color:#9fb3d6; }

/* ===== overnight 2026-09-28: the browser must never treat a long press as "select / copy / share this" (product owner).
   Nothing in the game is selectable text except real text fields; images and canvases never offer a callout or a drag. ===== */
html, body, #app, #app * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
#app input, #app textarea, #app [contenteditable], #app [contenteditable] *, #app .selectable, #app .selectable * { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
#app img, #app canvas, #app svg { -webkit-user-drag:none; }
#game, #cv, #hud { touch-action:none; }

/* ================= overnight 2026-09-28: Choose your ride · Loadout · Queue (one screen each, no scrolling) ================= */
/* --- choose your ride: two big one-tap cards, the car with its real rig --- */
.pk2Scr { display:flex; flex-direction:column; gap:10px; min-height:100%; box-sizing:border-box; padding-bottom:14px; }
.pk2H { text-align:center; margin:2px 0 0; }
.pk2 { position:relative; flex:1 1 0; min-height:150px; max-height:250px; border-radius:20px; border:3px solid var(--ol); overflow:hidden; cursor:pointer;
  background:radial-gradient(ellipse at 50% 58%,rgba(255,255,255,.22),transparent 60%),linear-gradient(180deg,#3b8ae0,#1d5aa6 60%,#153f7a); box-shadow:inset 0 2px 0 var(--pnHi),0 4px 0 rgba(4,12,30,.55); }
.pk2.junk { background:radial-gradient(ellipse at 50% 58%,rgba(255,255,255,.22),transparent 60%),linear-gradient(180deg,#5cc045,#2f8e24 60%,#1f6a17); }
.pk2.off { filter:grayscale(.7) brightness(.8); cursor:default; }
.pk2:active:not(.off) { transform:scale(.985); }
.pk2Cv { position:absolute; left:6%; right:6%; top:30px; bottom:34px; width:88%; height:calc(100% - 64px); }
.pk2Top { position:absolute; left:12px; right:10px; top:8px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.pk2Top h3 { margin:0; font:400 22px/1 var(--fh); color:#fff; text-shadow:var(--so); }
.pk2Top small { display:block; margin-top:2px; font:800 11.5px/1.2 var(--fb); color:#dff0ff; text-shadow:0 1px 0 var(--ol); }
.pk2Bot { position:absolute; left:10px; right:10px; bottom:8px; display:flex; align-items:center; gap:6px; }
.pk2S { display:inline-flex; align-items:center; gap:3px; padding:2px 7px 3px; border-radius:9px; background:rgba(8,20,45,.55); border:2px solid var(--ol); font:400 12px var(--fh); color:#fff; }
.pk2S svg { width:12px; height:12px; }
.pk2Hp { flex:1; height:8px; border-radius:5px; border:2px solid var(--ol); background:#0b2346; overflow:hidden; } .pk2Hp i { display:block; height:100%; }
.pk2Go { flex:none; display:inline-flex; align-items:center; gap:2px; padding:4px 10px 5px; border-radius:11px; border:2.5px solid #7a2a00; background:linear-gradient(180deg,var(--or1),var(--or2)); font:400 15px var(--fh); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(255,240,200,.6),0 2px 0 #7a2a00; }
.pk2Go svg { width:14px; height:14px; }
.pk2.off .pk2Go { display:none; }
.pk2Sw { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:-4px 0; } .pk2Sw::-webkit-scrollbar { display:none; }
.pk2Sw button { flex:none; padding:5px 11px 6px; border-radius:11px; border:2.5px solid var(--ol); background:#0d2a55; font:400 13px var(--fh); color:#bfe0ff; }
.pk2Sw button.sel { background:linear-gradient(180deg,var(--bl1),var(--bl2)); color:#fff; text-shadow:var(--so2); }
/* --- loadout: one screen --- */
.lo2 { display:flex; flex-direction:column; min-height:100%; box-sizing:border-box; padding-bottom:4px; }
.lo2 .subHead { margin-bottom:4px; } .lo2Cars { margin-left:auto; display:flex; gap:6px; }
.lo2Hero { position:relative; flex:1 1 auto; min-height:150px; max-height:230px; border-radius:18px; border:3px solid var(--ol); overflow:hidden;
  background:radial-gradient(ellipse at 50% 62%,rgba(255,255,255,.25),transparent 62%),linear-gradient(180deg,#4a9ae8,#1d5aa6); box-shadow:inset 0 2px 0 var(--pnHi),0 3px 0 rgba(4,12,30,.55); }
.lo2Car { position:absolute; inset:0; cursor:pointer; }
.lo2Name { position:absolute; left:10px; top:8px; right:10px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.lo2Name b { font:400 20px/1 var(--fh); color:#fff; text-shadow:var(--so); }
.lo2Chips { position:absolute; left:8px; right:8px; bottom:8px; display:flex; gap:6px; justify-content:flex-start; }
.lo2Ch { display:inline-flex; align-items:center; gap:4px; padding:3px 9px 4px; border-radius:10px; border:2.5px solid var(--ol); background:rgba(8,20,45,.72); font:400 13px var(--fh); color:var(--c,#fff); text-shadow:0 1px 0 var(--ol); }
.lo2Ch svg { width:13px; height:13px; } .lo2Ch .gold { color:#ffd23f; }
.lo2Slots { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin:8px 0; }
.lo2Sl { position:relative; aspect-ratio:1; min-width:0; padding:0; border-radius:11px; border:2.5px solid var(--ol); background:#0d2a55; display:flex; align-items:center; justify-content:center; font:400 18px var(--fh); color:#6f95c8; box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.lo2Sl.e { border-style:dashed; border-color:rgba(120,180,255,.4); } .lo2Sl.lk { opacity:.5; } .lo2Sl.lk svg { width:14px; height:14px; }
.lo2Sl .ic { width:86%; height:86%; }
.lo2Sl small { position:absolute; left:0; right:0; bottom:-1px; font:900 7.5px/1 var(--fb); color:#cfe4ff; text-align:center; text-shadow:0 1px 0 var(--ol); pointer-events:none; }
.lo2Cargo { padding:8px 10px 9px; margin-bottom:8px; position:relative; }
.lo2Cargo .ph { margin-bottom:6px; } .lo2Cargo .ph b { display:flex; align-items:center; gap:5px; font-size:15px; }
.lo2Acts { display:flex; gap:5px; } .lo2Acts .btn.sm { padding:4px 8px 5px; font-size:12px; min-height:0; }
.lo2Grid { grid-template-columns:repeat(7,1fr) !important; gap:5px; }
.lo2Grid .cell .n { display:none; } .lo2Grid .cell .e { inset:8%; }
.lo2More { position:absolute; right:12px; bottom:4px; font:400 11px var(--fh); color:#ffd23f; }
.lo2Raid { padding:6px 10px; margin-bottom:6px; }
.lo2Row { display:flex; align-items:center; gap:8px; min-height:40px; } .lo2Row + .lo2Row { border-top:2px solid rgba(8,20,45,.35); }
.lo2Row > span { flex:none; width:74px; font:400 13px/1.1 var(--fh); color:#dff0ff; text-shadow:0 1px 0 var(--ol); }
.lo2Row > em { font:800 12px/1.2 var(--fb); font-style:normal; display:flex; align-items:center; gap:4px; } .lo2Row > em svg { width:14px; height:14px; }
.lo2NoGun > span, .lo2NoGun > em { color:#ffb35a; } .lo2NoGun > span svg { width:14px; height:14px; vertical-align:-2px; } .lo2NoGun > em { flex-wrap:wrap; } .lo2NoGun .btn { margin-left:auto; } /* decision 5: a car with no gun */
.lo2Seg { flex:1; padding:3px; border-width:2.5px; } .lo2Seg button { padding:5px 2px 6px; font-size:13px; }
.lo2Ins { flex:1; display:flex; gap:6px; }
.lo2T { flex:1; padding:6px 6px 7px; border-radius:11px; border:2.5px solid var(--ol); background:#0b2448; font:400 13px var(--fh); color:#9fc3ee; box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.lo2T.on { background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; text-shadow:var(--so2); box-shadow:inset 0 2px 0 rgba(235,255,220,.5),0 2px 0 var(--ol); }
.lo2T .num, .lo2T .gold { color:inherit; }
.lo2 .stick { margin-top:auto; padding-top:6px; }
@media (max-height:700px) { .lo2Hero { min-height:128px; } .lo2Row { min-height:36px; } .lo2Slots { margin:6px 0; } }
/* --- queue --- */
.q2 { min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:8px; padding:calc(12px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); text-align:center; }
.q2Tags { align-self:stretch; display:flex; justify-content:space-between; }
.q2Tag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 5px; border-radius:11px; border:2.5px solid var(--ol); background:#0d2a55; font:400 13px var(--fh); letter-spacing:.4px; color:#fff; text-shadow:0 1px 0 var(--ol); }
.q2Tag i { width:8px; height:8px; border-radius:50%; background:#ffd23f; }
.q2.live .q2Tag i { background:#7ff05a; box-shadow:0 0 6px #7ff05a; animation:qBlink 1.2s steps(2) infinite; }
@keyframes qBlink { 50% { opacity:.25; } }
.q2Tag.len { background:linear-gradient(180deg,var(--or1),var(--or2)); }
.q2Map { width:min(78vw, 42vh, 330px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:4px solid var(--ol); background:#144c76; box-shadow:0 0 0 4px rgba(120,200,255,.35), 0 8px 24px rgba(0,0,0,.35); }
.q2Map canvas { width:100%; height:100%; display:block; }
.q2 h1 { margin:6px 0 0; font:400 30px/1 var(--fh); color:#fff; text-shadow:var(--so); }
.q2Tick { font:800 13px var(--fb); color:#ffd23f; text-shadow:0 1px 0 var(--ol); }
.q2Tick.in { animation:qTin .3s ease-out; }
@keyframes qTin { from { transform:translateY(6px); opacity:0; } }
.q2Who { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:340px; }
.q2P { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 4px 3px; border-radius:14px; border:2.5px solid var(--ol); background:#0d2a55; font:800 12px var(--fb); color:#fff; }
.q2P b { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:400 10px var(--fh); background:linear-gradient(180deg,var(--yl1),var(--yl3)); color:#5a3000; }
.q2P.you { background:linear-gradient(180deg,#2d74c4,#1c4f95); } .q2P.ai b { background:linear-gradient(180deg,var(--gr1),var(--gr2)); color:#fff; }
.q2Err { align-self:stretch; text-align:left; margin:0; }
.q2Btns { margin-top:auto; align-self:stretch; display:flex; flex-direction:column; align-items:center; gap:8px; }
.q2Btns .qGo small { font:400 14px var(--fh); opacity:.85; margin-left:6px; }
.q2X { border:0; background:none; font:400 15px var(--fh); color:#bfe0ff; text-decoration:underline; text-underline-offset:3px; padding:6px 14px; }
/* results (overnight 2026-09-28): the car in full colour with its rig (a wreck only smokes), compact reward tiles, a real Share button */
.resX.lose .resCar { filter:drop-shadow(0 8px 6px rgba(0,0,0,.35)) !important; }
.resOne .resRew { gap:6px; }
.resOne .resRew .rw { padding:5px 4px 6px; border-radius:14px; gap:1px; }
.resOne .resRew .rw b { font-size:19px; }
.resOne .resRew .rw .coin, .resOne .resRew .rw .xs { width:24px; height:24px; font-size:13px; }
.resOne .resRew .rw small { font-size:9px; }
.resOne .rbar { height:5px; margin-top:2px; }
.resOne .rchip { font-size:9px; margin-top:2px; }
.resBtns .resShare { width:auto !important; padding:0 14px !important; display:inline-flex; align-items:center; gap:6px; font:400 17px var(--fh); }
.resBtns .resShare svg { width:22px; height:22px; stroke-width:2.6; }
.resOne .resRew .rw { padding:4px 4px 5px; }
.resOne .resRew .rw .coin, .resOne .resRew .rw .xs { width:20px; height:20px; font-size:11px; border-width:2px; }
.resOne .resRew .rw b { font-size:18px; }
.resOne .resRew .rw .rchip.dim { display:none; }

/* inbox (overnight 2026-09-28): compact one-line messages, tap for the full card, a checkmark to clear, Clear all */
.mailTop { display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; font:400 14px var(--fh); color:#dff0ff; text-shadow:0 1px 0 var(--ol); }
.mailList { overflow:hidden; }
.mail2 { display:flex; align-items:center; gap:10px; padding:9px 10px; cursor:pointer; }
.mail2 + .mail2 { border-top:2px solid rgba(8,20,45,.45); }
.mail2:active { background:rgba(255,255,255,.06); }
.mail2 .mi { flex:none; width:32px; height:32px; border-radius:50%; border:2.5px solid var(--ol); background:radial-gradient(circle at 50% 30%,#4fa8f0,#1b5aa8 70%); display:flex; align-items:center; justify-content:center; }
.mail2 .mi svg { width:16px; height:16px; }
.mail2 .grow { min-width:0; }
.mail2 b { display:block; font:800 13px/1.25 var(--fb); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail2 small { display:block; font:800 11px var(--fb); color:var(--mut); } .mail2 small.gold { color:#ffd23f; }
.mOk { flex:none; width:36px; height:36px; padding:0; border-radius:50%; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--gr1),var(--gr2)); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 2px 0 rgba(235,255,220,.5),0 2px 0 var(--ol); }
.mOk svg { width:18px; height:18px; stroke:#fff; stroke-width:3; }
.mailFull { text-align:center; padding:4px 4px 12px; }
.mailFull .mi { display:inline-flex; width:52px; height:52px; border-radius:50%; border:3px solid var(--ol); background:radial-gradient(circle at 50% 30%,#4fa8f0,#1b5aa8 70%); align-items:center; justify-content:center; }
.mailFull .mi svg { width:26px; height:26px; }
.mailFull p { font:800 15px/1.45 var(--fb); color:#fff; margin:10px 0; }
.mailFull .att { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px; }
.mailFull small { color:var(--mut); font:800 11px var(--fb); }

/* stash (overnight 2026-09-28): compact header row, filter + sort menus, every slot drawn */
.st2Head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.st2T { display:flex; align-items:baseline; gap:6px; flex:none; }
.st2T b { font:400 24px/1 var(--fh); color:#fff; text-shadow:var(--so); }
.st2T .num { font:400 15px var(--fh); color:#ffd23f; text-shadow:0 1px 0 var(--ol); } .st2T .num.red { color:#ff5a44; }
.st2Bar { flex:1; min-width:40px; height:10px; }
.st2Head .btn.sm { flex:none; padding:5px 10px 6px; }
.st2Bar2 { display:flex; gap:8px; margin-bottom:10px; }
.st2Dd { flex:1; display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:12px; border:2.5px solid var(--ol); background:#0d2a55; font:400 14px var(--fh); color:#fff; text-shadow:0 1px 0 var(--ol); box-shadow:inset 0 2px 0 rgba(140,205,255,.2); }
.st2Dd span { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .st2Dd svg { width:16px; height:16px; flex:none; }
.st2List { display:flex; flex-direction:column; gap:6px; }
.st2List button { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:12px; border:2.5px solid var(--ol); background:#0d2a55; font:400 16px var(--fh); color:#fff; text-shadow:0 1px 0 var(--ol); }
.st2List button.on { background:linear-gradient(180deg,var(--bl1),var(--bl2)); }
.st2List button.dim { opacity:.55; }
.st2List button b { font:400 14px var(--fh); color:#ffd23f; }

/* traders (overnight 2026-09-28): buy-only, arrows around the portrait row, 4 compact item cards per row */
.trRowW { position:relative; display:flex; align-items:center; gap:4px; }
.trRowW .trRow { flex:1; min-width:0; }
.trArr { flex:none; width:28px; height:44px; padding:0; border-radius:10px; border:2.5px solid var(--ol); background:rgba(13,42,85,.9); display:flex; align-items:center; justify-content:center; z-index:2; }
.trArr svg { width:16px; height:16px; }
.trScr .shopGrid { grid-template-columns:repeat(4,1fr) !important; gap:6px !important; }
.trScr .shop { padding:4px 4px 5px !important; border-radius:12px !important; }
.trScr .shop .si { height:auto !important; aspect-ratio:1; }
.trScr .shop .sn { font-size:10px !important; line-height:1.15 !important; min-height:0 !important; margin:2px 0 3px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trScr .shop .btn { padding:3px 2px 4px !important; font-size:12px !important; min-height:0 !important; }
.trScr .shop .btn.sm.alt { display:none; }
.trScr .shop .sl { font-size:9px !important; }
.trScr .shop .why { font-size:10px !important; }
/* tasks in Jobs: the trader's face on each row, a card per task */
.tkRow { cursor:pointer; }
.tkAv { position:relative; flex:none; width:40px; height:40px; border-radius:12px; border:2.5px solid var(--ol); overflow:hidden; background:var(--c,#2a6fc0); display:flex; align-items:center; justify-content:center; }
.tkAv img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.tkAv b { font:400 14px var(--fh); color:#fff; text-shadow:var(--so2); }
.tkGo { flex:none; color:#bfe0ff; } .tkGo svg { width:18px; height:18px; }
.tkCard { text-align:center; padding:4px 2px 8px; }
.tkCard .tkAv { width:84px; height:84px; margin:0 auto 6px; border-radius:18px; }
.tkWho b { display:block; font:400 18px var(--fh); color:#fff; text-shadow:var(--so2); } .tkWho small { display:block; font:800 12px var(--fb); color:var(--mut); margin-top:2px; }
.tkCard h3 { margin:10px 0 4px; font:400 20px var(--fh); color:#ffd23f; text-shadow:var(--so2); }
.tkCard p { margin:0 0 10px; font:800 14px/1.4 var(--fb); color:#fff; }
.tkCard .chipl { justify-content:center; }
.mail2 .grow { flex:1; }
.hHorde.prot { background:linear-gradient(180deg,#3d4f7a,#23305a); animation:none !important; }
/* Home (overnight 2026-09-29): the car now carries its roof gun, so the chips under the logo sit above the 3D stage */
.hLogo { z-index:3; } .hLogo .hHorde, .hLogo .hRanks, .hLogo .mBadge { pointer-events:auto; position:relative; z-index:3; }
.hStage { top:calc(64px + 29dvh); }
.lo2Name, .lo2Chips { z-index:2; } .lo2Name b { max-width:62%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Home: Horde Night countdown as plain text under the top-right icons (no pill), taps through to the Base */
.hClock { position:absolute; z-index:4; right:12px; top:calc(env(safe-area-inset-top) + 66px); display:flex; align-items:baseline; gap:6px; padding:2px 2px; border:0; background:none; color:#fff; font:400 15px var(--fh); text-shadow:0 2px 0 var(--ol), 0 0 6px rgba(0,0,0,.55); cursor:pointer; }
.hClock b { font-weight:400; color:#ffe27a; font-size:17px; font-variant-numeric:tabular-nums; }
.hClock.soon, .hClock.soon b { color:#ffb14a; }
.hClock.live { color:#ff5a45; animation:bzPulse 1.2s ease-in-out infinite; }
.hClock:active { transform:translateY(1px); }
/* tabs used outside the market (Leaderboards sheet): same look — unselected tabs are text on the dark track */
.bzTabs { display:flex; } .bzTabs button { flex:1; min-width:0; } .bzTabs button:not(.on) { background:none; border:0; box-shadow:none; }
/* Choose your ride: a car coming back from insurance (greyed car, live countdown, Rush button) */
.pk2.off.ret { filter:none; background:linear-gradient(180deg,#4a5670,#2c3550); }
.pk2.ret .pk2Cv { filter:grayscale(.85) brightness(.75); }
.pk2.ret .pk2Top small span { color:#ffe27a; font-variant-numeric:tabular-nums; }
.pk2Rush { margin-left:auto; padding:10px 18px; font-size:18px; }
/* in-game share sheet: the card, the daily reward line, Text / Email / Social, Save, creator link */
.shSheet { display:flex; flex-direction:column; gap:10px; }
.shImg { width:min(100%,300px); align-self:center; border-radius:14px; border:3px solid var(--ol); box-shadow:0 6px 0 rgba(0,0,0,.3); }
.shRew { align-self:center; display:flex; align-items:center; gap:6px; padding:5px 14px; border-radius:14px; background:rgba(255,210,63,.16); border:2px solid #ffd23f; font:800 14px var(--fb); color:#fff; }
.shRew b { font:400 18px var(--fh); color:#ffd23f; } .shRew.done { border-color:#5ac85a; background:rgba(90,200,90,.14); }
.shRow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.shB { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px 10px; border-radius:16px; border:3px solid var(--ol); color:#fff; font:400 17px var(--fh); text-shadow:var(--so2); box-shadow:inset 0 3px 0 rgba(255,255,255,.35), 0 4px 0 rgba(0,0,0,.3); }
.shB svg { width:30px; height:30px; } .shB:active { transform:translateY(3px); }
.shB.txt { background:linear-gradient(180deg,#6fe06a,#2f9e36); } .shB.mail { background:linear-gradient(180deg,#5fb0ff,#2466c0); } .shB.soc { background:linear-gradient(180deg,#ff8ad0,#c83a8e); }
.shSoc { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .shSoc[hidden] { display:none; }
.shCreator { border:2px solid rgba(255,255,255,.18); border-radius:14px; padding:8px 12px; background:rgba(0,0,0,.18); }
.shCreator summary { font:800 14px var(--fb); color:#ffd23f; cursor:pointer; } .shCreator p { margin:6px 0; font:600 13px/1.35 var(--fb); color:#cfe0f5; }
.shIn { display:flex; gap:6px; } .shIn input { flex:1; min-width:0; padding:10px; border-radius:10px; border:2px solid var(--ol); font:600 14px var(--fb); }

/* Choose your ride v3 (2026-09-29): dark garage panels, the car on a lit pad, labelled stat bars, Stats + GO */
.pk2.pk3 { display:flex; flex-direction:column; max-height:none; min-height:0; padding:10px 12px 10px; gap:6px; background:radial-gradient(ellipse at 50% 42%,rgba(110,170,255,.20),transparent 55%),linear-gradient(180deg,#26406e,#152a4d 70%,#10213d); box-shadow:inset 0 3px 0 rgba(255,255,255,.12), 0 5px 0 rgba(0,0,0,.3); }
.pk2.pk3.junk { background:radial-gradient(ellipse at 50% 42%,rgba(255,170,90,.22),transparent 55%),linear-gradient(180deg,#6a4a2e,#4a321f 70%,#3a2616); }
.pk2.pk3::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,#5fb0ff,#2466c0); }
.pk2.pk3.junk::before { background:repeating-linear-gradient(135deg,#f2b92e 0 12px,#23262c 12px 24px); }
.pk3 .pk2Top { position:relative; left:auto; right:auto; top:auto; }
.pk3Stage { position:relative; flex:1 1 auto; min-height:92px; }
.pk3Pad { position:absolute; left:18%; right:18%; bottom:2%; height:22%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.28),rgba(255,255,255,.06) 60%,transparent 72%); }
.pk3 .pk2Cv { position:absolute; left:4%; top:0; width:92%; height:100%; }
.pk3Stats { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.pk3B { display:grid; grid-template-columns:48px 1fr 34px; align-items:center; gap:6px; font:800 11px var(--fb); color:#cfe0f5; text-transform:uppercase; letter-spacing:.3px; }
.pk3B i { height:8px; border-radius:5px; background:rgba(0,0,0,.35); border:1.5px solid var(--ol); overflow:hidden; } .pk3B u { display:block; height:100%; border-radius:4px; }
.pk3B b { font:400 14px var(--fh); color:#fff; text-align:right; letter-spacing:0; text-transform:none; }
.pk3B.sp u { background:#ffd23f; } .pk3B.ar u { background:#6fe06a; } .pk3B.cg u { background:#5fb0ff; } .pk3B.gn u { background:#ff7a5a; }
.pk3Bot { display:flex; align-items:center; gap:8px; }
.pk3Info { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:12px; border:2.5px solid var(--ol); background:rgba(0,0,0,.28); color:#dfeaff; font:400 14px var(--fh); }
.pk3Info svg { width:15px; height:15px; }
.pk3 .pk2Go { margin-left:auto; padding:7px 18px 8px; font-size:19px; }
.pk3Sheet .h3 { margin:10px 0 4px; }
.pk3R { display:flex; justify-content:space-between; gap:10px; padding:6px 2px; border-bottom:1px solid rgba(255,255,255,.08); font:700 14px var(--fb); color:#cfe0f5; } .pk3R b { font:400 16px var(--fh); color:#fff; }

/* level 5: protection is over */
.protEnd .peRow { display:flex; flex-direction:column; gap:2px; padding:9px 12px; margin:6px 0; border-radius:12px; border:2px solid rgba(255,255,255,.14); background:rgba(0,0,0,.2); }
.protEnd .peRow b { font:400 16px var(--fh); color:#fff; } .protEnd .peRow span { font:700 13px/1.3 var(--fb); color:#cfe0f5; }
.protEnd .peRow.bad { border-color:#ff7a5a; } .protEnd .peRow.bad b { color:#ff9a7a; } .protEnd .peRow.good { border-color:#6fe06a; } .protEnd .peRow.good b { color:#8ef080; }
.protEnd .btn { margin-top:8px; }

/* Garage: one Repair button with the kit count; Fill tank row */
#btnGarRepair { position:relative; } #btnGarRepair .kitN { position:absolute; top:-9px; right:-9px; min-width:22px; height:22px; padding:0 5px; border-radius:11px; background:linear-gradient(180deg,#6fe06a,#2f9e36); border:2.5px solid #fff; color:#fff; font:400 12px/17px var(--fh); text-align:center; box-shadow:0 2px 0 rgba(0,0,0,.3); }
#btnGarRepair:disabled { opacity:.55; }
.giFuel { margin-top:6px; }

/* attachment categories + levels */
.slotG.slot3 { grid-template-columns:repeat(3,1fr); } .slotG.slot3.slot4 { grid-template-columns:repeat(4,1fr); } /* 2 gadget slots (gadgets.js) */
.slotC { position:relative; } .slotC .lvB { position:absolute; top:4px; right:4px; padding:1px 6px; border-radius:8px; background:#0b1a33; border:1.5px solid #ffd23f; font:400 11px var(--fh); color:#ffd23f; }
.attLv { display:flex; flex-direction:column; gap:6px; margin:10px 0; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.22); border:2px solid rgba(255,210,63,.4); }
.attLv b { font:400 18px var(--fh); color:#fff; } .attLv small { font:700 12px var(--fb); color:#cfe0f5; }
.attCost { display:flex; flex-wrap:wrap; gap:6px; } .attCost > span { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:9px; background:rgba(0,0,0,.25); font:800 12.5px var(--fb); color:#dff5d8; white-space:nowrap; }
.attCost > span.miss { color:#ffb0a4; background:rgba(160,20,10,.3); } .attCost .coin { width:16px; height:16px; } .attCost .art.inl { width:18px; height:18px; }
.attLv .btn.block { white-space:normal; line-height:1.15; }

/* ---------- v96: product-owner pass 2026-09-29 ---------- */
/* full pages (chrome "page"): no profile header, a back button + a bigger title, then the content, the normal bottom nav */
#ui.page #uiTop { display:none; }
.pgScr .tabs { position:relative; top:auto; z-index:1; }
.pgHead { position:sticky; top:-12px; z-index:5; display:flex; align-items:center; gap:10px; margin:-12px -12px 12px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:linear-gradient(180deg,#0a1e42,#0e2c5c); border-bottom:3px solid var(--ol); box-shadow:0 3px 0 rgba(0,0,0,.18), inset 0 -2px 0 rgba(120,190,255,.2); }
.pgBack { flex:none; width:44px; height:44px; padding:0; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(180deg,var(--bl1),var(--bl2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 var(--ol); color:#fff; display:flex; align-items:center; justify-content:center; }
.pgBack svg { width:24px; height:24px; stroke-width:3.2; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.pgBack:active { transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 var(--ol); }
.pgT { flex:1; min-width:0; margin:0; font:400 28px/1.05 var(--fh); letter-spacing:.4px; color:#fff; text-shadow:var(--so); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pgR { flex:none; display:flex; gap:8px; align-items:center; }
.pgR .tIcon { width:44px; height:44px; }
.pgTabs { display:flex; margin:0 0 10px; }
.pgTabs button { flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:6px; }
.pgTabs .jN { font-style:normal; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:radial-gradient(circle at 40% 30%,#ff8a70,#e8261c 70%); border:2px solid #fff; color:#fff; font:400 11px/16px var(--fh); text-align:center; text-shadow:none; }
.pgSub { margin:0 2px 10px; font:800 12.5px/1.35 var(--fb); color:var(--mut); }
.chatScr .pgHead { flex:none; }

/* Jobs (Missions | Tasks): cards with depth; tap to expand in place */
.jList { display:flex; flex-direction:column; gap:10px; }
.jSec { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:6px 4px -2px; }
.jSec b { font:400 19px var(--fh); color:#fff; text-shadow:var(--so2); }
.jSec small { display:flex; align-items:center; gap:4px; font:800 11.5px var(--fb); color:var(--mut); }
.jSec small svg { width:13px; height:13px; }
.jCard { position:relative; border:3px solid var(--ol); border-radius:18px; background:linear-gradient(180deg,#3a82d4 0,#2563b3 38%,#1b4c93 100%); box-shadow:inset 0 2px 0 rgba(170,220,255,.45), inset 0 -4px 0 rgba(4,16,40,.28), 0 4px 0 rgba(4,12,30,.55), 0 8px 16px rgba(0,0,0,.22); overflow:hidden; }
.jCard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:rgba(140,200,255,.35); }
.jCard.ready { background:linear-gradient(180deg,#45b24a 0,#2f8f36 45%,#226d29 100%); box-shadow:inset 0 2px 0 rgba(200,255,170,.5), inset 0 -4px 0 rgba(0,40,0,.28), 0 4px 0 rgba(4,12,30,.55), 0 0 0 2px var(--yl2), 0 8px 18px rgba(0,0,0,.25); }
.jCard.ready::before { background:var(--yl1); }
.jCard.claimed { opacity:.62; filter:saturate(.6); }
.jHead { display:flex; align-items:center; gap:12px; width:100%; padding:12px 12px 8px 16px; border:0; background:none; color:#fff; text-align:left; cursor:pointer; }
.jHead:active { background:rgba(255,255,255,.06); }
.jIc { flex:none; width:52px; height:52px; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(180deg,#123a73,#0b2650); box-shadow:inset 0 2px 0 rgba(120,190,255,.3); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.jEmo { font-size:30px; line-height:1; filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.jArt { width:46px; height:46px; object-fit:contain; font-size:30px; display:flex; align-items:center; justify-content:center; }
.jCard.big .jIc { width:72px; height:72px; border-radius:18px; }
.jIc .tkAv { width:100%; height:100%; border:0; border-radius:0; }
.jIc .tkAv b { font-size:22px; }
.jMid { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.jWho { font:800 11px var(--fb); letter-spacing:.3px; color:#cfe6ff; text-transform:uppercase; }
.jT { font:400 18px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); }
.jBar { position:relative; display:block; height:18px; border:2.5px solid var(--ol); border-radius:9px; background:#0b2346; box-shadow:inset 0 2px 0 rgba(0,0,0,.35); overflow:hidden; }
.jBar i { position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:linear-gradient(180deg,#a8ff7a,#3cc42a); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.4); }
.jBar em { position:absolute; inset:0; font:400 12px/13px var(--fh); font-style:normal; color:#fff; text-align:center; text-shadow:var(--so2); }
.jEnd { flex:none; display:flex; align-items:center; }
.jChev svg { width:22px; height:22px; stroke-width:3; transition:transform .15s; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.jCard.open .jChev svg { transform:rotate(180deg); }
.jRdy { padding:4px 8px 5px; border-radius:10px; border:2.5px solid #6a3a00; background:linear-gradient(180deg,var(--yl1),var(--yl3)); font:400 12px var(--fh); letter-spacing:.5px; color:#fff; text-shadow:0 1px 0 #6a3a00; animation:bzPulse 1.6s ease-in-out infinite; }
.jOk { width:30px; height:30px; border-radius:50%; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--gr1),var(--gr2)); display:flex; align-items:center; justify-content:center; }
.jOk svg { width:18px; height:18px; stroke-width:3.4; color:#fff; }
.jRew { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 11px 16px; }
.jRew .rwc { font-size:13px; padding:3px 8px 3px 5px; border-width:2.5px; border-radius:10px; }
.jRew .rwc .coin { width:15px; height:15px; } .jRew .rwc .rwI { width:18px; height:18px; font-size:14px; }
.jMore { display:none; margin:0 10px 10px 14px; padding:10px 12px 12px; border-radius:14px; background:rgba(6,20,46,.45); box-shadow:inset 0 2px 0 rgba(0,0,0,.25); }
.jCard.open .jMore { display:block; animation:fadeIn .15s; }
.jTxt { margin:0 0 8px; font:800 13.5px/1.35 var(--fb); color:#e6f0fb; }
.jQuote { margin:0 0 6px; font:700 12.5px/1.35 var(--fb); font-style:italic; color:#bcd6f5; }
.jMore .jClaim { margin-top:4px; }
.jMore .jTxt:last-child { margin-bottom:0; }

/* Home: gold under the XP bar; name and XP bar a touch smaller to make room */
#uiTop.onHome .tWho { gap:2px; }
#uiTop.onHome .tWho > b { font-size:16px; }
#uiTop.onHome .tLvl { width:27px; height:30px; font-size:14px; }
#uiTop.onHome .tXp { height:14px; }
#uiTop.onHome .tXp em { font-size:8px; line-height:9px; }
.tGoldS { display:inline-flex; align-self:flex-start; align-items:center; gap:4px; margin-top:1px; padding:1px 9px 2px 3px; border-radius:10px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#0c2448,#12325f); box-shadow:inset 0 2px 0 rgba(0,0,0,.35); font:400 15px/1 var(--fh); color:#fff; text-shadow:var(--so2); cursor:pointer; }
.tGoldS .coin { width:18px; height:18px; }
.tGoldS:active { transform:translateY(1px); }

/* Garage: one screen on a phone (412x884) */
.garScr { padding-top:0; padding-bottom:10px; }
.garStage { min-height:182px; height:182px; margin-bottom:0; padding:6px 8px; }
.garStage .gCar { top:2px; bottom:0; }
.garStage .gArrow { width:40px; height:40px; margin-top:-20px; }
.garCos { position:absolute; top:8px; right:8px; z-index:4; display:flex; align-items:center; gap:5px; padding:5px 10px 6px 7px; border-radius:12px; border:3px solid var(--ol); background:linear-gradient(180deg,#c58bff,#8a3fe0); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 var(--ol); color:#fff; font:400 14px/1 var(--fh); text-shadow:var(--so2); }
.garCos svg { width:18px; height:18px; stroke-width:2.8; filter:drop-shadow(0 1.5px 0 var(--ol)); }
.garCos:active { transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 var(--ol); }
.garInfo { margin:-12px 4px 5px; padding:7px 10px 7px; }
.giName b { font-size:22px; }
.giName small { margin-top:3px; }
.gPow { padding:3px 10px 3px 4px; }
.gpT { display:flex; flex-direction:column; line-height:1; }
.gpT small { font:900 8.5px var(--fb); letter-spacing:.8px; color:#6a3a00; text-shadow:none; }
.gpT b { font:400 17px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.giCond { margin-top:6px; }
.giCond > span { width:66px; flex:none; }
.giCond .bar { height:12px; }
.giCond .btn { min-width:104px; min-height:30px; padding:3px 8px; justify-content:center; }
.giCond .btn svg { width:15px; height:15px; }
.giFuel { margin-top:5px; }
#btnGarRepair .kitN { top:-8px; right:-8px; min-width:20px; height:20px; font-size:11px; line-height:15px; }
.garScr .garStats { margin:0 0 2px; }
.garScr .garStats > div { padding:3px 6px; }
.garScr .garStats span { font-size:9px; }
.garScr .garStats b { font-size:14px; }
.garScr .h3 { margin:5px 2px 3px; font-size:14px; display:flex; align-items:center; gap:5px; }
.garScr .h3 svg { width:15px; height:15px; }
.garScr .tuneG { gap:5px; }
.garScr .tuneC { padding:3px 2px 4px; }
.garScr .tuneC .ti { height:26px; }
.garScr .tuneC .ti img, .garScr .tuneC .ti .art { width:28px; height:26px; }
.garScr .tuneC b { font-size:11.5px; }
.garScr .tuneC small { font-size:9px; margin:0 0 2px; }
.garScr .tuneBuy { min-height:22px; font-size:11.5px; }
.garScr .slotG { gap:5px; }
.garScr .slotC { padding:3px 2px 4px; }
.garScr .slotC .si { height:26px; }
.garScr .slotC .si img, .garScr .slotC .si .art { width:30px; height:26px; }
.garScr .slotC .si svg { width:20px; height:20px; }
.garScr .slotC b { font-size:11.5px; }
.garScr .slotC small { font-size:8.5px; }

/* Profile: tidy card (no duplicate name / XP in Overall), invite below the stats */
.profSince { margin-top:6px; font:800 11.5px var(--fb); color:var(--mut); }
.ovHead .ovTiles { flex:1; min-width:0; grid-template-columns:repeat(2,1fr); gap:6px; }
.ovTiles > div { padding:4px 8px; }
.profInvite { margin:14px 0 2px; }

/* Tour welcome card: the level-up line */
.ceLvUp { display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0; }
.ceLvUp .tLvl { width:36px; height:40px; font-size:19px; }
.ceLvUp b { font:400 26px/1 var(--fh); color:var(--gold); text-shadow:var(--so); }

/* sheets (UI test 2026-09-29): the close X lives in a header strip OUTSIDE the scrolling body (.sheetWrap > .shx), so it is
   always in view and never sits on content (sheet titles, "Load into cargo", the stash "All" chip, a craft's cancel x) */
.sheetWrap { position:relative; width:100%; max-height:88%; display:flex; flex-direction:column; background:linear-gradient(180deg,#2a6fc0 0,#1d5299 90px,#16427f 100%); border:3px solid var(--ol); border-bottom:0; border-radius:24px 24px 0 0; box-shadow:inset 0 2px 0 var(--pnHi), 0 -8px 30px rgba(0,0,0,.45); padding-top:42px; animation:sheetUp .22s cubic-bezier(.2,.9,.3,1); }
.sheetWrap::before { content:""; position:absolute; top:8px; left:50%; width:46px; height:5px; margin-left:-23px; border-radius:3px; background:rgba(8,20,45,.55); }
.sheetWrap > .shx { position:absolute; top:4px; right:10px; width:36px; height:36px; margin:0; }
.sheetWrap > .sheetIn { max-height:none; flex:0 1 auto; min-height:0; background:none; border:0; border-radius:0; box-shadow:none; animation:none; padding-top:2px; }
.sheetWrap > .sheetIn::before { display:none; }

/* sign-up: date of birth + Terms checkbox */
.ageRow { display:grid; grid-template-columns:1.4fr 1fr; gap:8px; }
.ageRow select { width:100%; padding:10px 8px; border-radius:10px; border:2px solid var(--ol); background:#0b2448; color:#fff; font:700 15px var(--fb); }
.agree { display:flex; align-items:center; gap:8px; margin:6px 0 10px; font:700 13px var(--fb); color:#dfeaff; } .agree input { width:20px; height:20px; flex:none; } .agree a { color:#ffe467; }
/* Sign up: "No key? Request an invite" (decision 31) and the server-unreachable card (decision 36) */
.gInvite { margin:-2px 0 10px; font:700 13px var(--fb); color:#dfeaff; } .gInvite summary { cursor:pointer; color:#ffe467; list-style:revert; }
.gInvRow { display:flex; gap:8px; margin-top:8px; } .gInvRow input { flex:1; min-width:0; padding:10px; border-radius:10px; border:2px solid var(--ol); background:#0b2448; color:#fff; font:700 14px var(--fb); } .gInvRow .btn { flex:none; }
.gDown .ph b { color:#ffb35a; }
/* Tester mode badge (admin switch, util.js isTester): top-left corner of Home, over the avatar */
#uiTop .tTester { position:absolute; left:6px; top:calc(1px + env(safe-area-inset-top)); z-index:5; pointer-events:none; font:400 10px/1 var(--fh); letter-spacing:1px; padding:3px 6px 3px; border:2px solid var(--ol); border-radius:7px; background:linear-gradient(180deg,#ff9a3c,#e2551c); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.45); box-shadow:0 2px 0 rgba(0,0,0,.3); }

/* ================= UI test fixes 2026-09-29 ================= */
/* Traders carousel: the row sits BETWEEN the arrows (no card under an arrow), room for the selected glow, names on up to
   two lines, and the visiting timer / "Private" as a badge on the portrait so nothing is clipped under the row */
.trRowW .trRow { margin:0; padding:8px 6px 10px; scroll-padding-inline:6px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%); }
.trRowW .tp { position:relative; }
.trRowW .tp b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.05; margin-top:-28px; min-height:26px; hyphens:manual; }
.trRowW .tp small { position:absolute; top:5px; left:50%; transform:translateX(-50%); margin:0; z-index:4; padding:2px 7px; border-radius:8px; background:rgba(8,20,45,.85); border:2px solid var(--ol); color:#fff; font:400 11px/1.1 var(--fh); letter-spacing:.2px; white-space:nowrap; overflow:visible; max-width:none; }
.trRowW .tp small.v { color:#ffd166; }
/* Loadout: the slot name sits under its tile, never printed over the gun / attachment icon */
.lo2Slots { row-gap:15px; margin-bottom:16px; }
.lo2Sl small { top:calc(100% + 2px); bottom:auto; font-size:8px; color:#9fc2ef; }
/* Results: the subtitle sits above the banner's ribbon tails (its first letter was hidden under the left tail), and the
   loot strip wraps onto more rows instead of cutting off the 7th item; names get two short lines */
.resOne > p, .resX > p { position:relative; z-index:2; padding:0 20px; }
.resLoot .rlStrip { flex-wrap:wrap; overflow-x:hidden; overflow-y:auto; max-height:128px; touch-action:pan-y; justify-content:flex-start; } /* two rows, then it scrolls */
.resLoot .rlStrip .cell .n { white-space:normal; overflow:hidden; text-overflow:clip; line-height:1; font-size:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:normal; overflow-wrap:normal; padding:0 1px; }
/* full-page header gold chip (Skins, Customize, Loadout: the profile header is hidden there) */
.pgHead .pgGold { margin-left:0; height:36px; font-size:16px; }
.pgHead .pgGold .coin { width:34px; height:34px; margin-left:-12px; }
.pgHead .pgGold .num { min-width:0; }
.pgHead .skMine { font:800 12px var(--fb); color:#cfe0f5; white-space:nowrap; }
.pgHead .lo2Cars { display:flex; gap:4px; }
.pgHead .lo2Cars .btn { width:34px; height:36px; padding:0; }
/* Garage on short phones (360x740 and the like): no scrolling — a shorter stage, Armor + Mods side by side in one row,
   slot tiles show icon + name only (the item name is one tap away) */
.garAtt .ls { display:none; }
@media (max-height:800px) {
  .garStage { min-height:148px; height:148px; }
  .garInfo { margin:-10px 4px 4px; padding:6px 10px 6px; }
  .garAtt { display:grid; grid-template-columns:4fr 3fr; gap:6px; }
  .garAtt .lf { display:none; } .garAtt .ls { display:inline; }
  .garScr .slotG { gap:4px; }
  .garScr .slotC { padding:3px 1px 4px; border-radius:11px; }
  .garScr .slotC b { font-size:10.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .garScr .slotC small { display:none; }
  .garScr .slotC .lvB { top:1px; right:1px; font-size:9px; padding:0 4px; }
}
/* Skins: the sticky top (header, preview, chips) is solid all the way down, so skin cards never show through the chip
   row; the page header sits inside it (full-page pattern) */
.skTop { padding-top:0; background:#0f3066; box-shadow:0 6px 10px -4px rgba(4,12,30,.6); border-bottom:2px solid rgba(8,20,45,.6); }
.skTop .pgHead { position:relative; top:0; margin:0 -12px 8px; }
.skCats { padding:2px 0 6px; }
/* Base overlay, tight mode (big base zoomed out, base.js placeOverlay): smaller station tags, bubbles shrink to their icon
   with a count badge (the colour still says Collect / Crafting / Building) */
.bzBub .bn { display:none; }
#bzOv.tight .bzLbl.tag .nm { padding:2px 6px 3px; font-size:10px; }
#bzOv.tight .bzLbl.tag .nm b { min-width:12px; margin-right:3px; padding:0 2px; }
#bzOv.tight .bzBub { padding:3px; gap:0; border-radius:50%; }
#bzOv.tight .bzBub .bt { display:none; }
#bzOv.tight .bzBub .bi { width:28px; height:28px; font-size:15px; }
#bzOv.tight .bzBub::after { left:50%; margin-left:-7px; bottom:-9px; }
#bzOv.tight .bzBub .bn { display:block; position:absolute; top:-7px; right:-9px; min-width:19px; height:19px; padding:0 4px; border-radius:10px; background:#e8261c; border:2px solid #fff; color:#fff; font:400 11px/15px var(--fh); font-style:normal; text-align:center; }
/* Results: a lost item's name stays readable (the red strike stops above it; the name sits on a dark band) */
.resLoot .rlStrip .cell[data-lost]::after { inset:0 0 13px 0; }
.resLoot .rlStrip .cell .n { z-index:2; left:2px; right:2px; bottom:2px; padding:1px 1px; border-radius:4px; background:rgba(8,20,45,.72); }
/* supply bay (raid redesign 2026-09-30): six fixed cells on the Loadout and in the Garage */
.bayGrid { grid-template-columns:repeat(6,1fr) !important; gap:6px; }
.bayGrid .bayE { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-style:dashed; opacity:.85; cursor:pointer; }
.bayGrid .bayE .bayPh { font-size:20px; filter:grayscale(.6); opacity:.7; line-height:1; }
.bayGrid .bayE small { font-size:9.5px; font-weight:800; letter-spacing:.02em; color:var(--mute, #9aa3ad); white-space:nowrap; }
.lo2CargoLine { display:flex; align-items:center; gap:6px; width:100%; margin-top:8px; padding:7px 10px; border-radius:10px; border:2px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); color:inherit; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.lo2CargoLine svg { width:16px; height:16px; }

/* ---- Phase 2 (2026-09-30): level milestones (profile) and the Reactor Cell checkpoint (garage) ---- */
.lvMiles { display:flex; flex-direction:column; gap:4px; }
.lvMile { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.04); color:#9aa3ad; }
.lvMile b { min-width:28px; font:400 15px/1 var(--fh); color:#6d7782; text-align:center; }
.lvMile span { flex:1; font-size:13px; }
.lvMile i { font-style:normal; color:#7ee07a; font-weight:700; }
.lvMile.on { background:rgba(126,224,122,.10); color:#e8f4e6; }
.lvMile.on b { color:#ffd166; }
.cpPanel { border:2px solid #59e0ff; box-shadow:0 0 0 3px rgba(89,224,255,.12); }
.cpPanel .ph b { color:#59e0ff; }

/* ---- Phase 4 results: wreck recap, haul roll-up, chips, crates waiting ---- */
.resRecap { margin:6px 14px 2px; padding:10px 12px; border-radius:14px; background:rgba(40,8,8,.55); border:2px solid rgba(255,90,74,.5); }
.resRecap .rcH { font:400 16px/1.1 var(--fh); color:#fff; margin-bottom:6px; } .resRecap .rcH b { color:#ff8a6a; font-weight:400; }
.resRecap .rcRow { display:grid; grid-template-columns:minmax(0, 1fr) 40% auto; align-items:center; gap:8px; font-size:13px; color:#f3e6e2; margin:3px 0; }
.resRecap .rcRow span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resRecap .rcRow i { display:block; height:8px; border-radius:4px; background:linear-gradient(90deg,#ff5a4a var(--w),rgba(255,255,255,.08) var(--w)); }
.resRecap .rcRow b { font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.resRecap .rcLS { display:flex; justify-content:space-between; gap:8px; margin-top:8px; font-size:13px; }
.resRecap .rcLS .l b { color:#ff8a6a; } .resRecap .rcLS .s b { color:#7ee07a; }
.resHaul { display:flex; align-items:baseline; justify-content:center; gap:8px; margin:2px 0 4px; }
.resHaul b { font:400 40px/1 var(--fh); color:#ffd23f; text-shadow:0 3px 0 #6a4a00, 0 0 18px rgba(255,210,63,.45); font-variant-numeric:tabular-nums; }
.resHaul small { font:800 12px/1 var(--fb, system-ui); color:#e8eef8; text-transform:uppercase; letter-spacing:.08em; }
.resHaul .coin { width:26px; height:26px; align-self:center; }
.resHaul.go b { animation:haulPop .5s cubic-bezier(.3,1.6,.6,1) .85s both; }
@keyframes haulPop { 50% { transform:scale(1.15); } }
.resChips { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 12px 6px; transition:opacity .3s, transform .3s; }
.resChips.wait { opacity:0; transform:translateY(6px); }
.resChips .rcp { padding:4px 10px; border-radius:999px; font:800 12px/16px var(--fb, system-ui); color:#fff; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.18); }
.resChips .rcp.cell { border-color:#59e0ff; color:#bff4ff; } .resChips .rcp.rec { border-color:#ffd23f; color:#ffe9a0; }
.resCrates { display:flex; align-items:center; gap:8px; margin:6px 14px 0; padding:10px 14px; border-radius:14px; border:2.5px solid #ffd23f; background:linear-gradient(180deg,rgba(255,210,63,.22),rgba(255,210,63,.08)); color:#fff; font:inherit; cursor:pointer; animation:crPulse 1.6s ease-in-out infinite; }
.resCrates b { flex:1; text-align:left; font:400 16px/1 var(--fh); } .resCrates span { font:800 12px/1 var(--fb, system-ui); color:#ffd23f; text-transform:uppercase; }
@keyframes crPulse { 50% { box-shadow:0 0 0 4px rgba(255,210,63,.18); } }

/* full-screen Legendary reveal (Phase 4, ui/crates.js legendFull) */
.legendFull { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:radial-gradient(circle at 50% 45%, rgba(120,70,0,.92), rgba(20,10,0,.97) 70%); animation:lfIn .35s ease-out both; overflow:hidden; }
.legendFull.bye { animation:lfOut .26s ease-in both; }
.legendFull .lfRays { position:absolute; left:50%; top:45%; width:180vmax; height:180vmax; margin:-90vmax 0 0 -90vmax; background:repeating-conic-gradient(from 0deg, rgba(255,210,63,.32) 0 7deg, rgba(255,210,63,0) 7deg 18deg); animation:lfSpin 9s linear infinite; pointer-events:none; }
.legendFull .lfArt { position:relative; width:min(46vw, 240px); height:min(46vw, 240px); display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 28px rgba(255,210,63,.85)); animation:lfPop .7s cubic-bezier(.2,1.7,.5,1) .1s both; }
.legendFull .lfArt > * { width:100%; height:100%; transform:scale(1.6); }
.legendFull .lfTag { position:relative; font:400 20px/1 var(--fh, system-ui); letter-spacing:.3em; color:#ffd23f; text-shadow:0 2px 0 #6a4a00; animation:lfUp .4s ease-out .45s both; }
.legendFull .lfName { position:relative; max-width:88vw; text-align:center; font:400 clamp(28px, 8vw, 46px)/1.05 var(--fh, system-ui); color:#fff; text-shadow:0 3px 0 #3a2600, 0 0 22px rgba(255,210,63,.6); animation:lfUp .4s ease-out .55s both; }
.legendFull .lfTap { position:absolute; bottom:calc(28px + env(safe-area-inset-bottom, 0px)); font:800 12px/1 var(--fb, system-ui); color:rgba(255,255,255,.6); letter-spacing:.12em; text-transform:uppercase; }
@keyframes lfIn { from { opacity:0; } } @keyframes lfOut { to { opacity:0; transform:scale(1.04); } }
@keyframes lfSpin { to { transform:rotate(360deg); } } @keyframes lfPop { from { transform:scale(.2) rotate(-12deg); opacity:0; } }
@keyframes lfUp { from { transform:translateY(14px); opacity:0; } }

/* revenge list (profile) and the recap line */
.revList { display:flex; flex-direction:column; gap:4px; }
.revRow { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.05); }
.revRow b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.revRow span { font-size:12px; font-weight:700; } .revRow span.wk { color:#ff8a6a; } .revRow span.rb { color:#ffb347; }
.revRow small { color:#9aa3ad; font-size:11px; }
.revRow { flex-wrap:wrap; } .revRow .rw { flex-basis:100%; font-style:normal; font-size:12px; color:#cfd3d8; margin-top:1px; } /* what they did (the weapon, or what they took) */
.resRecap .rcRev { margin-top:8px; font-size:13px; color:#ffd1f0; }
.resKilled { margin:6px auto 4px; padding:7px 12px; max-width:340px; border-radius:12px; background:rgba(255,70,60,.14); border:2px solid rgba(255,90,74,.55); color:#ffd8d2; font-size:14px; text-align:center; } .resKilled b { color:#fff; } /* revenge list: who killed you */

/* base Production tab (2026-10-01) */
.prodBox .prodSt { font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); }
.prodBox .prodSt.on { color:#7ee07a; } .prodBox .prodSt.off { color:#ff8a6a; } .prodBox .prodSt.warn { color:#ffd166; }
.prodRow { display:flex; align-items:center; gap:8px; margin:6px 0; } .prodRow .grow { flex:1; min-width:0; } .prodRow .nm small { font-weight:600; }
.prodRow .bzBar.full i { background:linear-gradient(180deg,#ffe07a,#e0a400); } .prodQ { font-variant-numeric:tabular-nums; font-size:13px; min-width:64px; text-align:right; }
.prodFund { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; } .prodFund .btn { display:flex; flex-direction:column; align-items:center; padding:6px 2px; } .prodFund small { font-size:10px; opacity:.85; }
.prodMult { font:400 18px/1 var(--fh); color:#ffd166; }
.prodTrack { position:relative; height:12px; border-radius:6px; background:rgba(255,255,255,.08); overflow:visible; }
.prodTrack i { position:absolute; inset:0 auto 0 0; border-radius:6px; background:linear-gradient(90deg,#3cc42a,#a8ff7a); }
.prodTrack em { position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1px; background:#ffd166; border-radius:2px; }
.prodScale { display:flex; justify-content:space-between; font-size:11px; color:#9aa3ad; margin-top:3px; }
.bzSpeed { white-space:nowrap; }

/* vehicle family + trait under the car name (Track B 2026-10-03, fleet.js) */
.giName small.giFam { display:block; width:max-content; max-width:100%; margin-top:4px; background:rgba(255,197,61,.16); color:#ffd977; font-size:10.5px; white-space:normal; }

/* busted gadgets (gadgets.js): the gadget's art, greyed and cracked */
.ia.busted, .art.busted { filter:grayscale(.75) brightness(.8) contrast(1.1); position:relative; } .bustWrap { position:relative; display:inline-flex; } .bustWrap::after { content:""; position:absolute; inset:8%; background:linear-gradient(55deg, transparent 46%, rgba(20,20,24,.9) 47%, rgba(20,20,24,.9) 50%, transparent 51%), linear-gradient(-35deg, transparent 58%, rgba(20,20,24,.85) 59%, rgba(20,20,24,.85) 61%, transparent 62%); pointer-events:none; }
/* quality audit 2026-10-05: on Home the transparent top bar spans the width and swallowed taps on the Horde Night clock
   below it; only its own controls take pointer events. A visible keyboard focus ring everywhere (the browser default
   was a dark 1px line on dark blue). */
#uiTop.onHome { pointer-events:none; } #uiTop.onHome > * { pointer-events:auto; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #ffd23f; outline-offset:2px; }

/* Hideout outputs (UX redesign 2026-10-06) */
/* buildings make goods: map pills name the output ("2 Cocaine / READY") or why a building stopped ("Full", "Needs 2 Seeds");
   a drug facility's panel offers Sell now / Save for a heist; crafting stations Collect to Stash */
.bzBub.warn { background:linear-gradient(180deg,#ff9a3c,#d2560e); }
.bzBub.warn .bt b { font-size:13px; }
.bzBub.ready .bt { font-size:14px; } .bzBub.ready .bt b { font-size:12px; letter-spacing:.5px; }
.hoOut { margin:0 0 12px; padding:10px; border-radius:14px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#123a73,#0b2650); }
.hoOutHd { display:flex; align-items:center; gap:10px; font:400 18px/1.1 var(--fh); text-shadow:var(--so2); color:#fff; margin-bottom:8px; }
.hoOutHd b { font-weight:400; color:#ffe467; }
.hoOutI { flex:none; width:40px; height:40px; border-radius:50%; background:#fff; border:2.5px solid var(--ol); display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.hoOutI img, .hoOutI .art { width:86%; height:86%; object-fit:contain; }
.hoCards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hoCard { display:flex; flex-direction:column; gap:4px; min-width:0; padding:9px 8px 8px; border-radius:12px; border:2.5px solid var(--ol); text-align:center; color:#fff; }
.hoCard.sell { background:linear-gradient(180deg,#3cbf2a,#1d7a14); } .hoCard.save { background:linear-gradient(180deg,#ff9a2a,#c9520a); }
.hoCard.off { filter:saturate(.35) brightness(.85); }
.hoCard h4 { margin:0; font:400 19px/1 var(--fh); text-transform:uppercase; letter-spacing:.5px; text-shadow:var(--so2); }
.hoCard p { margin:0; flex:1; font-size:12px; line-height:1.3; color:#f4ffe8; }
.hoAmt { font:400 24px/1.05 var(--fh); text-shadow:var(--so2); color:#fff; padding:4px 0; border-radius:10px; background:rgba(0,0,0,.18); }
.hoAmt small { display:block; font-size:12px; color:#ffe9b0; }
.hoCard .btn { min-height:40px; font-size:15px; }
.hoSub { display:block; margin-top:6px; font-size:11.5px; line-height:1.35; color:#cfe0ff; }
.hoAlways { display:flex; align-items:center; gap:8px; margin-top:9px; font-size:13px; color:#fff; cursor:pointer; }
.hoAlways input { width:20px; height:20px; accent-color:#35ae22; }
.hoOut.craft .hoCollect { min-height:48px; font-size:19px; }
@media (max-width:360px) { .hoCards { grid-template-columns:1fr; } }
/* F4 (review 2026-10-07): business panels (ui/crime.js): product chips, batch count, secondary controls, Advanced */
.crPick { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px; } .crPick .btn { flex:1 1 30%; min-width:0; flex-direction:column; line-height:1.1; }
.crPick .btn small, .crSec .btn small { display:block; font:700 11px var(--fb); opacity:.85; }
.crNb { display:flex; align-items:center; gap:6px; margin:6px 0 2px; } .crNb > span { font:800 13px var(--fb); color:var(--mut); margin-right:4px; } .crNb .btn { flex:1; }
.crSec .btn { flex-direction:column; line-height:1.1; }
.crAdv { margin:10px 0 4px; padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.18); } .crAdv summary { cursor:pointer; font:800 14px var(--fb); color:var(--mut); min-height:28px; display:flex; align-items:center; }
/* B2 (review 2026-10-07): pre-launch check rows */
.pfRow { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.pfRow b { display:block; font:800 16px/1.2 var(--fb); }
.pfRow small { display:block; font:600 13px/1.3 var(--fb); color:#bcd3f5; }
.pfRow + .btn { margin-top:12px; }
/* F3 (review 2026-10-07): crafting filter, missing-input line, folded locked recipes */
.bzCf { margin:0 0 8px; }
.bzWhy { color:#ff9a7a; font-weight:800; }
.bzLocked summary { cursor:pointer; padding:10px 4px; font:800 14px/1.2 var(--fb); color:#bcd3f5; }
.resSell, .resClaim { margin-top:8px; } /* D4/C6 */