/* Undead Island: out-of-raid UI (Tarkov-style menus adapted to a phone). Tokens live on :root; hud.css reuses them. */
:root {
  --bg:#0c0e0a; --bg2:#11140e; --panel:#171b13; --panel2:#1f2419; --panel3:#293022; --line:#2e3527; --line2:#434c38;
  --tx:#e4decc; --mut:#8f8b7b; --dim:#5f5d52; --acc:#e8552f; --acc2:#ff7a4a; --accbg:rgba(232,85,47,.14);
  --gold:#ffd166; --grn:#7ee07a; --red:#ff5a4a; --blue:#5ab4ff; --purple:#b46bff; --warn:#ffb35a;
  --fh:"Bahnschrift","Oswald","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --fb:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:6px; --navh:58px;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:#050604 radial-gradient(ellipse at 50% 45%,#161a10 0%,#050604 65%) fixed; color:var(--tx); font:500 14px/1.35 var(--fb); overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
#app { position:relative; margin:0 auto; height:100vh; height:100svh; height:100dvh; width:min(100vw, calc(100dvh * .5)); background:var(--bg); overflow:hidden; box-shadow:0 0 80px #000; }
@media (max-width:600px){ #app { width:100vw; } }
#game { position:absolute; inset:0; }
#cv { position:absolute; inset:0; width:100%; height:100%; display:block; }
button { font:inherit; color:inherit; cursor:pointer; }
input, textarea { user-select:text; -webkit-user-select:text; }
/* Menus: text is selectable so testers can highlight and copy anything. The raid canvas/HUD, the map and swipe strips stay unselectable. */
#ui, #sheet, #modal, #toasts { user-select:text; -webkit-user-select:text; -webkit-touch-callout:default; }
#ui canvas, .mapBox, #uiNav, .tabs, .chips, .carStrip, .trRow, #game, #hud { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
::selection { background:rgba(232,85,47,.45); color:#fff; }
svg.i { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.14em; flex:none; }

/* ---------- shell ---------- */
#ui { position:absolute; inset:0; display:none; flex-direction:column; background:linear-gradient(180deg,#141810 0%,var(--bg) 40%); }
#ui.on { display:flex; }
#uiTop { flex:none; display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px; background:linear-gradient(#0a0c08,#10130d); border-bottom:1px solid var(--line); }
#ui.bare #uiTop, #ui.bare #uiNav { display:none; }
#ui.nonav #uiNav { display:none; }
.tLvl { position:relative; width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; font:700 15px var(--fh); color:#fff; }
.tLvl svg { position:absolute; inset:0; width:36px; height:36px; transform:rotate(-90deg); }
.tMe { flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:none; border:0; padding:2px 4px 2px 0; text-align:left; border-radius:6px; }
.tMe:active { background:rgba(255,255,255,.05); }
.tWho { flex:1; min-width:0; }
.tWho b { display:block; font:600 14px var(--fh); letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tWho small { display:block; color:var(--mut); font-size:11px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tMail { position:relative; flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:8px; color:var(--mut); }
.tMail svg { width:20px; height:20px; }
.tMail.has { color:var(--tx); border-color:var(--line2); }
.tMail .dot { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--acc); color:#fff; font:700 10.5px/18px var(--fb); box-shadow:0 0 0 2px #0c0e0a; }
.mBadge { font:600 9.5px var(--fh); letter-spacing:1px; padding:1px 6px; border:1px solid var(--acc); color:var(--acc2); border-radius:3px; text-transform:uppercase; }
.pBadge { font:600 9.5px var(--fh); letter-spacing:.6px; padding:1px 6px; background:rgba(126,224,122,.12); color:var(--grn); border-radius:3px; cursor:pointer; }
.tGold { flex:none; display:flex; align-items:center; gap:5px; font:600 16px var(--fh); color:var(--gold); letter-spacing:.4px; padding:6px 10px; background:rgba(255,209,102,.07); border:1px solid rgba(255,209,102,.22); border-radius:8px; }
.coin { display:inline-block; width:.95em; height:.95em; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3c0,#ffd166 40%,#b8862a); box-shadow:inset 0 0 0 1.5px rgba(90,60,10,.6); vertical-align:-.12em; flex:none; }
#uiView { flex:1; overflow-y:auto; overflow-x:hidden; touch-action:pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; position:relative; }
#uiNav { flex:none; display:flex; background:#0a0c08; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
#uiNav button { flex:1; min-width:0; background:none; border:0; padding:8px 0 7px; color:var(--mut); display:flex; flex-direction:column; align-items:center; gap:3px; font:600 9.5px var(--fh); letter-spacing:.8px; text-transform:uppercase; position:relative; }
#uiNav button svg { width:22px; height:22px; }
#uiNav button.on { color:var(--tx); }
#uiNav button.on::before { content:""; position:absolute; top:-1px; left:22%; right:22%; height:2px; background:var(--acc); box-shadow:0 0 10px var(--acc); }
#uiNav button.gear { flex:.62; }
#uiNav .dot { position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--acc); color:#fff; font:700 10px/16px var(--fb); letter-spacing:0; }
.screen { padding:12px 12px 28px; animation:scrIn .12s ease-out; }
@keyframes scrIn { from { opacity:0; transform:translateY(6px); } }

/* ---------- type ---------- */
.h1 { font:700 28px/1 var(--fh); letter-spacing:2px; text-transform:uppercase; margin:0; }
.h2 { font:600 18px/1.1 var(--fh); letter-spacing:1.2px; text-transform:uppercase; margin:0 0 8px; }
.h3 { font:600 13px var(--fh); letter-spacing:1.4px; text-transform:uppercase; color:var(--mut); margin:14px 2px 7px; display:flex; align-items:center; gap:8px; }
.h3::after { content:""; flex:1; height:1px; background:var(--line); }
.h3 small { font:500 11px var(--fb); letter-spacing:0; text-transform:none; color:var(--dim); }
.mut { color:var(--mut); } .dim { color:var(--dim); } .gold { color:var(--gold); } .grn { color:var(--grn); } .red { color:var(--red); } .acc { color:var(--acc2); } .warn { color:var(--warn); } .blue { color:var(--blue); }
.note { color:var(--mut); font-size:12px; margin:6px 2px; line-height:1.45; }
.note.red { color:#ff8a7a; } .note.grn { color:var(--grn); }
.num { font-variant-numeric:tabular-nums; }
.fh { font-family:var(--fh); letter-spacing:.6px; }

/* ---------- controls ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:linear-gradient(#262c20,#1d2218); border:1px solid var(--line2); border-radius:var(--r); padding:9px 12px; font:600 12.5px var(--fh); letter-spacing:.9px; text-transform:uppercase; color:var(--tx); transition:transform .08s, filter .15s, background .15s; min-height:36px; }
.btn:active { transform:scale(.97); filter:brightness(1.2); }
.btn.pri { background:linear-gradient(#f06238,#c9431f); border-color:#ff8a5a; color:#fff; box-shadow:0 2px 14px rgba(232,85,47,.25); }
.btn.gold { background:linear-gradient(#3a321a,#2a2412); border-color:#8a7030; color:var(--gold); }
.btn.grn { background:linear-gradient(#24361f,#1b2917); border-color:#4f7a3a; color:var(--grn); }
.btn.red { background:linear-gradient(#3a1d18,#2a1512); border-color:#7a3a2e; color:#ff8a7a; }
.btn.ghost { background:transparent; border-color:var(--line); }
.btn.sm { padding:5px 9px; min-height:28px; font-size:11px; }
.btn.lg { padding:14px 16px; font-size:16px; letter-spacing:2px; min-height:52px; }
.btn.block { display:flex; width:100%; }
.btn[disabled], .btn.no { opacity:.42; filter:grayscale(.6); }
.btn small { font:500 10px var(--fb); letter-spacing:0; text-transform:none; opacity:.85; }
.btn .coin { width:.9em; height:.9em; }
.btnCol { display:flex; flex-direction:column; gap:6px; }
.btnRow { display:flex; gap:6px; flex-wrap:wrap; }
.btnRow > .btn { flex:1; }
.field { display:block; margin:0 0 10px; }
.field span { display:block; font:600 11px var(--fh); letter-spacing:1.2px; color:var(--mut); text-transform:uppercase; margin:0 0 4px; }
.field input, .inp { width:100%; background:#0a0c08; border:1px solid var(--line2); border-radius:var(--r); color:var(--tx); padding:11px 12px; font:500 15px var(--fb); outline:none; }
.field input:focus, .inp:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(232,85,47,.15); }
.chips { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; margin:0 -12px 4px; padding-left:12px; padding-right:12px; touch-action:pan-x; scrollbar-width:none; }
.chips::-webkit-scrollbar, .tabs::-webkit-scrollbar { display:none; }
.chips button { flex:none; background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:6px 10px; font:600 11px var(--fh); letter-spacing:.8px; text-transform:uppercase; color:var(--mut); }
.chips button.on { color:var(--tx); border-color:var(--acc); background:var(--accbg); }
.chips button b { color:var(--dim); font-weight:600; margin-left:3px; }
.seg { display:flex; gap:0; border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; }
.seg button { flex:1; background:var(--panel); border:0; border-right:1px solid var(--line); padding:10px 4px; font:600 13px var(--fh); letter-spacing:.8px; color:var(--mut); }
.seg button:last-child { border-right:0; }
.seg button.on { background:var(--accbg); color:var(--tx); box-shadow:inset 0 -2px 0 var(--acc); }
.tog { display:flex; align-items:center; gap:10px; padding:10px 0; }
.tog .sw { width:42px; height:24px; border-radius:12px; background:#2a2f24; border:1px solid var(--line2); position:relative; flex:none; transition:background .15s; }
.tog .sw::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#8f8b7b; transition:transform .15s, background .15s; }
.tog.on .sw { background:rgba(232,85,47,.35); border-color:var(--acc); }
.tog.on .sw::after { transform:translateX(18px); background:#fff; }
.tog > div { flex:1; } .tog small { display:block; color:var(--mut); font-size:11.5px; }

/* ---------- tabs (Tarkov strip) ---------- */
.tabs { display:flex; overflow-x:auto; border-bottom:1px solid var(--line); background:#0d100a; position:sticky; top:0; z-index:4; touch-action:pan-x; scrollbar-width:none; }
.tabs button { flex:none; background:none; border:0; padding:12px 12px 10px; font:600 12px var(--fh); letter-spacing:1.4px; text-transform:uppercase; color:var(--mut); position:relative; white-space:nowrap; }
.tabs button.on { color:var(--tx); }
.tabs button.on::after { content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--acc); }
.tabs.fill button { flex:1; }
/* Character tab strip: compact so all 7 tabs fit on a 390 px phone; a right/left edge fade shows when more tabs are off screen. */
#charTabs button { flex:1 0 auto; padding:12px 6px 10px; font-size:11.5px; letter-spacing:.5px; }
#charTabs button.on::after { left:4px; right:4px; }
.tabs.more-r { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); }
.tabs.more-l { -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px); mask-image:linear-gradient(90deg,transparent,#000 44px); }
.tabs.more-l.more-r { -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); }
.subtabs { display:flex; gap:0; margin:0 0 12px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.subtabs button { flex:1; background:var(--panel); border:0; border-right:1px solid var(--line); padding:9px 4px; font:600 12px var(--fh); letter-spacing:1px; text-transform:uppercase; color:var(--mut); }
.subtabs button:last-child { border-right:0; }
.subtabs button.on { color:var(--tx); background:var(--panel3); box-shadow:inset 0 -2px 0 var(--acc); }
.retBar { display:flex; align-items:center; gap:8px; margin:-12px -12px 12px; padding:9px 12px; background:rgba(232,85,47,.12); border-bottom:1px solid rgba(232,85,47,.35); color:var(--acc2); font:600 12px var(--fh); letter-spacing:1px; text-transform:uppercase; width:calc(100% + 24px); border-left:0; border-right:0; border-top:0; text-align:left; }

/* ---------- panels / lists ---------- */
.panel { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--r); padding:10px; margin-bottom:10px; position:relative; }
.panel.tight { padding:0; overflow:hidden; }
.panel.warn { border-color:#6a5222; background:linear-gradient(180deg,#2a2412,#1c1a10); }
.panel.acc { border-color:rgba(232,85,47,.5); }
.ph { display:flex; align-items:center; justify-content:space-between; gap:8px; font:600 12px var(--fh); letter-spacing:1.4px; text-transform:uppercase; color:var(--mut); margin:-2px 0 8px; }
.ph b { color:var(--tx); font-weight:600; }
.li { display:flex; align-items:center; gap:10px; padding:9px 10px; border-bottom:1px solid var(--line); min-height:48px; }
.li:last-child { border-bottom:0; }
.li.tap { cursor:pointer; } .li.tap:active { background:rgba(255,255,255,.04); }
.li .grow { flex:1; min-width:0; }
.li .t { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li .s { color:var(--mut); font-size:11.5px; }
.li.dim { opacity:.5; }
.kv { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.06); font-size:13px; }
.kv:last-child { border-bottom:0; }
.kv span { color:var(--mut); } .kv b { font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.statg { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.statg.two { grid-template-columns:repeat(2,1fr); }
.statg > div { background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:4px; padding:6px 8px; min-width:0; }
.statg span { display:block; font:600 9.5px var(--fh); letter-spacing:1px; color:var(--mut); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.statg b { font:600 15px var(--fh); letter-spacing:.4px; white-space:nowrap; }
.bar { height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--grn); border-radius:3px; transition:width .3s; }
.bar.big { height:10px; }
.lvbar { position:relative; height:16px; background:rgba(0,0,0,.4); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.lvbar i { display:block; height:100%; background:linear-gradient(90deg,#8a2f18,var(--acc)); }
.lvbar span { position:absolute; inset:0; text-align:center; font:600 10.5px/14px var(--fh); letter-spacing:.8px; }
.pips { display:inline-flex; gap:3px; } .pips i { width:14px; height:5px; background:#2a2f24; border-radius:1px; } .pips i.on { background:var(--acc); box-shadow:0 0 6px rgba(232,85,47,.6); }
.pill { display:inline-flex; align-items:center; gap:4px; font:600 10px var(--fh); letter-spacing:.8px; text-transform:uppercase; padding:2px 7px; border-radius:3px; background:rgba(255,255,255,.07); color:var(--mut); white-space:nowrap; }
.pill.grn { background:rgba(126,224,122,.13); color:var(--grn); } .pill.red { background:rgba(255,90,74,.14); color:#ff8a7a; } .pill.gold { background:rgba(255,209,102,.12); color:var(--gold); } .pill.acc { background:var(--accbg); color:var(--acc2); } .pill.blue { background:rgba(90,180,255,.13); color:var(--blue); }
.empty { text-align:center; color:var(--mut); padding:26px 12px; font-size:13px; }
.empty svg { width:34px; height:34px; opacity:.5; display:block; margin:0 auto 8px; }

/* ---------- items ---------- */
.ic { width:38px; height:38px; flex:none; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; position:relative; background:var(--rb, #1a1d16); border:1px solid var(--rc, var(--line2)); box-shadow:inset 0 0 12px var(--rg, transparent); }
.ic.sm { width:30px; height:30px; font-size:16px; }
.ic.lg { width:64px; height:64px; font-size:34px; border-width:1.5px; }
.ic i { position:absolute; right:2px; bottom:0; font:600 9.5px var(--fh); font-style:normal; color:#fff; text-shadow:0 1px 2px #000; }
.igrid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
@media (min-width:420px){ .igrid { grid-template-columns:repeat(6,1fr); } }
.cell { position:relative; aspect-ratio:1; border-radius:3px; background:var(--rb, #181b14); border:1px solid var(--rc, var(--line)); box-shadow:inset 0 0 14px var(--rg, transparent); display:flex; align-items:center; justify-content:center; font-size:24px; overflow:hidden; cursor:pointer; }
.cell:active { filter:brightness(1.3); }
.cell .n { position:absolute; left:3px; top:2px; right:3px; font:600 8.5px/1.1 var(--fh); letter-spacing:.3px; color:#cfcab8; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; text-shadow:0 1px 2px #000; }
.cell .q { position:absolute; right:3px; bottom:1px; font:600 11px var(--fh); color:#fff; text-shadow:0 1px 2px #000; }
.cell .e { font-size:22px; margin-top:6px; }
.cell .lv { position:absolute; left:3px; bottom:2px; font:700 9px var(--fh); letter-spacing:.5px; color:#101309; background:var(--gold); border-radius:3px; padding:0 3px; }
.cell.emptyc { cursor:default; background:repeating-linear-gradient(45deg,#11140e 0 6px,#141810 6px 12px); border-color:#1f241a; }
.cell.lost { filter:grayscale(.8) brightness(.7); }
.capbar { display:flex; align-items:center; gap:8px; font:600 12px var(--fh); letter-spacing:1px; color:var(--mut); text-transform:uppercase; margin:0 0 8px; }
.capbar .bar { flex:1; }

/* ---------- sheet / modal / toast ---------- */
#sheet { position:absolute; inset:0; background:rgba(0,0,0,.6); display:none; align-items:flex-end; z-index:30; }
#sheet.open { display:flex; animation:fadeIn .15s; }
@keyframes fadeIn { from { opacity:0; } }
.sheetIn { position:relative; width:100%; max-height:88%; overflow-y:auto; overflow-x:hidden; background:linear-gradient(180deg,#1b1f16,#12150f); border-top:1px solid var(--line2); border-radius:12px 12px 0 0; padding:18px 14px calc(22px + env(safe-area-inset-bottom)); touch-action:pan-y; animation:sheetUp .22s cubic-bezier(.2,.9,.3,1); box-shadow:0 -10px 40px rgba(0,0,0,.6); }
.sheetIn::before { content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--line2); }
@keyframes sheetUp { from { transform:translateY(40px); opacity:.4; } }
.shx { position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:50%; background:var(--panel2); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; z-index:2; }
.shx svg { width:16px; height:16px; }
.ihead { display:flex; gap:12px; align-items:center; margin:0 40px 10px 0; }
.ihead h3 { margin:0; font:600 18px/1.15 var(--fh); letter-spacing:.8px; }
.ihead small { color:var(--mut); display:block; margin-top:2px; }
#modal { position:absolute; inset:0; z-index:40; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; padding:24px; }
#modal.open { display:flex; animation:fadeIn .12s; }
.mIn { width:100%; max-width:340px; background:linear-gradient(180deg,#1f2419,#161a12); border:1px solid var(--line2); border-radius:8px; padding:18px 16px 14px; box-shadow:0 20px 60px rgba(0,0,0,.7); animation:pop .18s ease-out; }
@keyframes pop { from { transform:scale(.94); opacity:0; } }
.mIn h3 { margin:0 0 6px; font:600 17px var(--fh); letter-spacing:1px; text-transform:uppercase; }
.mIn p { margin:0 0 14px; color:var(--mut); font-size:13px; line-height:1.45; }
#toasts { position:absolute; left:0; right:0; bottom:calc(var(--navh) + 12px + env(safe-area-inset-bottom)); z-index:50; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; padding:0 16px; }
.tst { background:rgba(12,14,10,.96); border:1px solid var(--line2); border-left:3px solid var(--c, var(--acc)); padding:9px 14px; border-radius:4px; font-weight:600; font-size:13px; max-width:100%; box-shadow:0 6px 24px rgba(0,0,0,.6); animation:tstIn .22s ease-out; }
.tst.out { animation:tstOut .25s ease-in forwards; }
@keyframes tstIn { from { transform:translateY(10px); opacity:0; } }
#sheet.open ~ #toasts, #ui.bare ~ #toasts { bottom:auto; top:calc(14px + env(safe-area-inset-top)); }
#ui.nonav ~ #toasts { bottom:calc(84px + env(safe-area-inset-bottom)); }
#ui:not(.on) ~ #toasts { bottom:auto; top:calc(70px + env(safe-area-inset-top)); }
@keyframes tstOut { to { transform:translateY(6px); opacity:0; } }
.bubble { background:#0e110b; border:1px solid var(--line2); border-radius:6px; padding:10px; margin:8px 0; font-size:12.5px; line-height:1.45; color:#cdc8b6; }

/* ---------- gate: loading, login, mode, setup ---------- */
#loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 40%,#1c2215,#070806 70%); z-index:60; gap:14px; transition:opacity .35s; }
#loading.hide { opacity:0; pointer-events:none; visibility:hidden; transition:opacity .35s, visibility 0s .35s; }
.logo { text-align:center; }
.logo .l1 { font:700 44px/0.9 var(--fh); letter-spacing:6px; color:#efe7d2; text-shadow:0 2px 0 #000, 0 0 30px rgba(232,85,47,.25); }
.logo .l2 { font:700 44px/0.95 var(--fh); letter-spacing:9px; color:var(--acc); text-shadow:0 2px 0 #000, 0 0 30px rgba(232,85,47,.5); }
.logo .tag { margin-top:10px; font:600 11px var(--fh); letter-spacing:4px; color:var(--mut); text-transform:uppercase; }
.ldbar { width:180px; height:3px; background:#1d2118; overflow:hidden; border-radius:2px; }
.ldbar i { display:block; height:100%; width:40%; background:var(--acc); animation:ld 1.1s ease-in-out infinite; }
@keyframes ld { 0% { transform:translateX(-110%); } 100% { transform:translateX(260%); } }
#loading p { margin:0; color:var(--mut); font:600 11px var(--fh); letter-spacing:2px; text-transform:uppercase; }
#loading.tap { cursor:pointer; }
#loading.tap .ldbar { visibility:hidden; }
#loading.tap p { font-size:20px; animation:tapPulse 1.2s ease-in-out infinite; }
@keyframes tapPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(.96); } }
.gate { min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 0%,rgba(232,85,47,.12),transparent 60%); }
.gate .logo { margin-bottom:26px; }
.gCard { background:rgba(18,21,15,.92); border:1px solid var(--line2); border-radius:8px; padding:16px; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.gErr { background:rgba(255,90,74,.1); border:1px solid rgba(255,90,74,.4); color:#ff9a8a; border-radius:4px; padding:8px 10px; font-size:12.5px; margin:0 0 10px; display:none; }
.gErr.on { display:block; animation:shake .3s; }
@keyframes shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.gFoot { text-align:center; color:var(--dim); font-size:11px; margin-top:16px; letter-spacing:.5px; }
.modeC { display:flex; gap:12px; align-items:center; padding:14px; border:1px solid var(--line2); border-radius:8px; background:linear-gradient(135deg,#1f2419,#141810); margin-bottom:10px; position:relative; overflow:hidden; cursor:pointer; text-align:left; width:100%; }
.modeC .mi { width:48px; height:48px; border-radius:6px; background:#0c0e0a; border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; flex:none; color:var(--acc2); }
.modeC .mi svg { width:26px; height:26px; }
.modeC b { display:block; font:600 18px var(--fh); letter-spacing:1.5px; text-transform:uppercase; }
.modeC small { color:var(--mut); font-size:12px; display:block; margin-top:2px; }
.modeC.sel { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc), 0 0 30px rgba(232,85,47,.15); }
.modeC.soon { opacity:.45; filter:grayscale(1); cursor:not-allowed; }
.modeC .pill { position:absolute; top:10px; right:10px; }
.setupPrev { width:100%; height:190px; display:block; }
.swatches { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.swc { aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,255,255,.1); box-shadow:inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.2); cursor:pointer; transition:transform .1s; }
.swc.on { border-color:#fff; transform:scale(1.08); box-shadow:0 0 0 3px var(--acc), inset 0 -4px 8px rgba(0,0,0,.35); }

/* ---------- home: see theme.css (approved art direction) ---------- */

/* ---------- character ---------- */
.carStrip { display:flex; gap:8px; overflow-x:auto; margin:0 -12px 10px; padding:0 12px 4px; touch-action:pan-x; scrollbar-width:none; }
.carStrip::-webkit-scrollbar { display:none; }
.cc { flex:none; width:108px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:6px; text-align:left; font-size:11px; color:var(--tx); }
.cc canvas { width:100%; height:50px; display:block; }
.cc b { display:block; font:600 12px var(--fh); letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc span { color:var(--mut); font-size:10px; }
.cc.sel { border-color:var(--acc); background:linear-gradient(180deg,rgba(232,85,47,.14),var(--panel)); }
.cc.dim { opacity:.55; }
.cc.add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--mut); border-style:dashed; font:600 11px var(--fh); letter-spacing:1px; text-transform:uppercase; }
.cc.add svg { width:22px; height:22px; }
.carStage { position:relative; background:radial-gradient(ellipse at 50% 55%,#252b1e,#10130d 70%); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:10px; }
.carStage canvas { width:100%; height:200px; display:block; }
.carStage .grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.hs { position:absolute; transform:translate(-50%,-50%); background:rgba(10,12,8,.82); border:1px solid var(--line2); border-radius:5px; min-height:42px; min-width:50px; justify-content:center; padding:2px 7px 2px 13px; touch-action:manipulation; font:600 9.5px var(--fh); letter-spacing:.8px; text-transform:uppercase; color:var(--tx); display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.15; white-space:nowrap; z-index:2; }
.hs::before { content:""; position:absolute; left:4px; top:50%; margin-top:-3px; width:6px; height:6px; border-radius:50%; background:var(--hc, var(--grn)); box-shadow:0 0 6px var(--hc, var(--grn)); }
.hs:active { border-color:var(--acc); }
.hs b { color:var(--gold); font-weight:600; font-size:10.5px; }
.stageHead { position:absolute; left:10px; top:8px; z-index:2; }
.stageHead b { display:block; font:600 18px var(--fh); letter-spacing:1.5px; text-transform:uppercase; }
.stageHead small { color:var(--mut); font-size:11px; }
.slots { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.slot { aspect-ratio:1; border:1px dashed var(--line2); border-radius:4px; background:#10130d; display:flex; flex-direction:column; align-items:center; justify-content:center; font:600 9px var(--fh); letter-spacing:.8px; color:var(--dim); position:relative; cursor:pointer; text-transform:uppercase; }
.slot .k { position:absolute; left:4px; top:3px; font-size:9px; color:var(--mut); }
.slot.full { border-style:solid; border-color:var(--rc, var(--line2)); background:var(--rb, #181b14); box-shadow:inset 0 0 14px var(--rg, transparent); color:var(--tx); }
.slot.full .e { font-size:24px; }
.slot.lock { background:repeating-linear-gradient(45deg,#0e110b 0 5px,#12150f 5px 10px); }
.slot svg { width:18px; height:18px; }
.slot .nm { position:absolute; bottom:3px; left:3px; right:3px; text-align:center; font-size:8.5px; color:#cfcab8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trk { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line); cursor:pointer; }
.trk:last-child { border-bottom:0; }
.trk .grow { flex:1; min-width:0; }
.trk .t { font:600 13px var(--fh); letter-spacing:.8px; text-transform:uppercase; display:flex; justify-content:space-between; }
.trk .lvbar { margin-top:4px; height:8px; } .trk .lvbar span { display:none; }
.trkNeed { display:flex; align-items:center; gap:4px; margin-top:3px; font-size:10.5px; color:var(--gold); } .trkNeed svg { width:12px; height:12px; }
.cost svg { width:13px; height:13px; }
.cost { display:flex; flex-wrap:wrap; gap:6px; }
.cost > span { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:3px; padding:3px 7px; font-size:12px; }
.cost > span.miss { border-color:rgba(255,90,74,.5); color:#ff9a8a; }
.cost > span.ok { border-color:rgba(126,224,122,.3); }
.cosGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.cos { position:relative; border:1px solid var(--line); border-radius:4px; background:#12150f; padding:6px 4px 5px; text-align:center; cursor:pointer; min-width:0; }
.cos .pv { height:34px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.cos .pv .dot { width:28px; height:28px; border-radius:50%; box-shadow:inset 0 -4px 6px rgba(0,0,0,.35), inset 0 3px 5px rgba(255,255,255,.25); }
.cos .pv .dg { font-size:24px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.8); line-height:1; }
.cos .nm { font:600 9px/1.15 var(--fh); letter-spacing:.4px; text-transform:uppercase; color:#cfcab8; height:2.3em; overflow:hidden; margin-top:3px; }
.cos.on { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); background:rgba(232,85,47,.1); }
.cos.lock { opacity:.45; }
.cos .lk { position:absolute; top:3px; right:3px; width:12px; height:12px; color:var(--mut); }
.cos .q { position:absolute; top:2px; left:4px; font:600 9px var(--fh); color:var(--gold); }
.cos .rb { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rc); }
.skB { margin-bottom:12px; }
.sk { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line); cursor:pointer; }
.sk:last-child { border-bottom:0; }
.sk .sq { width:36px; height:36px; flex:none; border-radius:4px; border:1px solid var(--line2); background:#0e110b; display:flex; align-items:center; justify-content:center; font:700 15px var(--fh); color:var(--tx); position:relative; }
.sk .sq.elite { border-color:var(--gold); color:var(--gold); box-shadow:0 0 10px rgba(255,209,102,.3); }
.sk .grow { flex:1; min-width:0; }
.sk .t { display:flex; justify-content:space-between; font:600 13px var(--fh); letter-spacing:.8px; text-transform:uppercase; }
.sk .t small { font:500 11px var(--fb); color:var(--mut); letter-spacing:0; text-transform:none; }
.sk .bar { margin-top:5px; height:4px; } .sk .bar i { background:linear-gradient(90deg,#b8862a,var(--gold)); }
.perk { display:flex; gap:10px; align-items:center; padding:6px 8px; border-radius:3px; font-size:12.5px; }
.perk b { width:44px; flex:none; font:600 11px var(--fh); letter-spacing:.6px; color:var(--mut); }
.perk.got { background:rgba(126,224,122,.08); } .perk.got b { color:var(--grn); }
.mapBox { position:relative; width:100%; aspect-ratio:1; background:#0a1a22; border:1px solid var(--line); border-radius:6px; overflow:hidden; touch-action:none; cursor:grab; }
.mapBox canvas { width:100%; height:100%; display:block; }
.mapCtl { position:absolute; right:8px; top:8px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.mapCtl button { width:34px; height:34px; border-radius:4px; background:rgba(10,12,8,.85); border:1px solid var(--line2); font:700 18px var(--fh); display:flex; align-items:center; justify-content:center; }
.mapRose { position:absolute; left:8px; bottom:8px; width:40px; height:40px; z-index:2; pointer-events:none; }
.mapRose svg { width:40px; height:40px; display:block; }
.mapRose circle { fill:rgba(10,12,8,.8); stroke:var(--line2); stroke-width:1.5; }
.mapRose .n { fill:var(--acc); } .mapRose .s { fill:#cfc9b6; opacity:.7; }
.mapRose b { position:absolute; left:0; right:0; top:-13px; text-align:center; font:700 11px var(--fh); color:#f0e8d2; text-shadow:0 1px 2px #000; }
.poiMeta { display:flex; gap:6px; margin:-2px 0 8px; }
.poiLore { margin:0 0 4px; font-size:13px; line-height:1.5; color:#d8d2c0; font-style:italic; border-left:2px solid rgba(232,85,47,.5); padding:2px 0 2px 10px; }
.intelG { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:360px){ .intelG { grid-template-columns:1fr; } }
.intelG .h3 { margin:10px 0 5px; font-size:11.5px; } .intelG .h3 svg { width:14px; height:14px; }
.intel { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.intel li { position:relative; padding-left:12px; font-size:12px; line-height:1.35; color:#cdc8b6; }
.intel li::before { content:""; position:absolute; left:2px; top:.5em; width:5px; height:5px; border-radius:1px; background:var(--gold); }
.intel.mobs li::before { background:var(--red); border-radius:50%; }
.poiTip { display:flex; gap:8px; align-items:flex-start; margin-bottom:0; } .poiTip svg { width:16px; height:16px; color:var(--blue); flex:none; margin-top:1px; }
.legend { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--mut); margin:8px 2px; }
.legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:-1px; }
.danger { display:inline-flex; gap:2px; } .danger i { width:8px; height:10px; background:#2a2f24; transform:skewX(-15deg); } .danger i.on { background:var(--red); }
.statSec { margin-bottom:10px; }
.statSec > button { width:100%; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; font:600 13px var(--fh); letter-spacing:1.4px; text-transform:uppercase; color:var(--tx); }
.statSec > button svg { transition:transform .2s; color:var(--mut); }
.statSec.open > button { border-radius:var(--r) var(--r) 0 0; }
.statSec.open > button svg { transform:rotate(180deg); }
.statSec .body { display:none; border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r); padding:4px 12px 8px; background:#10130d; }
.statSec.open .body { display:block; animation:scrIn .2s; }
.ovHead { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.ring { position:relative; width:74px; height:74px; flex:none; }
.ring svg { width:74px; height:74px; transform:rotate(-90deg); }
.ring div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font:700 20px/1 var(--fh); }
.ring small { font:600 8px var(--fh); letter-spacing:1px; color:var(--mut); margin-top:3px; }
.wtable { width:100%; border-collapse:collapse; font-size:12px; }
.wtable th { font:600 9.5px var(--fh); letter-spacing:1px; color:var(--mut); text-transform:uppercase; text-align:right; padding:5px 4px; border-bottom:1px solid var(--line); }
.wtable th:first-child, .wtable td:first-child { text-align:left; }
.wtable td { padding:6px 4px; border-bottom:1px dashed rgba(255,255,255,.05); text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- traders / market ---------- */
.trRow { display:flex; align-items:flex-start; gap:8px; overflow-x:auto; margin:0 -12px 12px; padding:4px 12px 6px; touch-action:pan-x; scrollbar-width:none; }
.trRow::-webkit-scrollbar { display:none; }
.tp { flex:none; width:72px; background:none; border:0; padding:0; text-align:center; color:var(--tx); }
.tp .av { position:relative; width:64px; height:64px; margin:0 auto; border-radius:6px; border:1px solid var(--line2); background:linear-gradient(160deg,var(--c),#0c0e0a 130%); display:flex; align-items:center; justify-content:center; font:700 22px var(--fh); letter-spacing:1px; color:rgba(0,0,0,.72); text-shadow:0 1px 0 rgba(255,255,255,.2); overflow:hidden; }
.tp .av::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45)); }
.tp.sel .av { border-color:var(--acc); box-shadow:0 0 0 2px var(--acc), 0 0 18px rgba(232,85,47,.35); }
.tp.lock .av { filter:grayscale(1) brightness(.5); }
.tp .lk { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; z-index:2; font:600 9px var(--fh); letter-spacing:.8px; }
.tp .lk svg { width:20px; height:20px; }
.tp b { display:block; margin-top:5px; font:600 11px/1.15 var(--fh); letter-spacing:.6px; text-transform:uppercase; overflow-wrap:break-word; hyphens:manual; }
.tp small { display:block; font-size:9.5px; line-height:1.25; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp small.v { color:var(--warn); }
.tp .dotn { position:absolute; top:-5px; right:-5px; z-index:3; min-width:18px; height:18px; border-radius:9px; background:var(--acc); color:#fff; font:700 10px/18px var(--fb); }
.av.pic { background:#0c0e0a; color:transparent; text-shadow:none; }
.av.pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.av.pic .ini { display:none; }
.trHead .av { position:relative; overflow:hidden; }
.trHead .av.pic { width:72px; height:72px; box-shadow:0 0 0 1px var(--c), 0 6px 18px rgba(0,0,0,.5); }
.sellHead { display:flex; gap:10px; align-items:flex-start; background:linear-gradient(135deg,rgba(255,209,102,.08),transparent); border:1px solid rgba(255,209,102,.22); border-radius:var(--r); padding:10px 12px; margin-bottom:12px; }
.sellHead > svg { width:22px; height:22px; color:var(--gold); margin-top:2px; }
.sellHead b { display:block; font:600 14px var(--fh); letter-spacing:1px; text-transform:uppercase; }
.sellHead span { display:block; color:var(--mut); font-size:12px; line-height:1.45; margin-top:2px; }
.trHead { display:flex; gap:12px; align-items:center; }
.trHead .av { width:54px; height:54px; border-radius:6px; flex:none; background:linear-gradient(160deg,var(--c),#0c0e0a 130%); display:flex; align-items:center; justify-content:center; font:700 19px var(--fh); color:rgba(0,0,0,.72); border:1px solid var(--line2); }
.trHead h2 { margin:0; font:600 20px var(--fh); letter-spacing:1.5px; text-transform:uppercase; }
.trHead p { margin:2px 0 0; color:var(--mut); font-size:12px; font-style:italic; }
.rest { display:flex; justify-content:space-between; align-items:center; font:600 11px var(--fh); letter-spacing:1px; color:var(--mut); text-transform:uppercase; margin:10px 0 0; padding-top:8px; border-top:1px solid var(--line); }
.rest b { color:var(--tx); font-weight:600; }
.mSearch { display:flex; gap:6px; margin-bottom:8px; }
.mSearch .inp { padding:9px 10px; font-size:14px; }
.mt { width:100%; }
.mtH, .mtR { display:grid; grid-template-columns:minmax(0,1fr) 62px 70px; gap:8px; align-items:center; }
.mtH { font:600 9.5px var(--fh); letter-spacing:1.2px; color:var(--mut); text-transform:uppercase; padding:6px 10px; border-bottom:1px solid var(--line); background:#0e110b; }
.mtR { padding:8px 10px; border-bottom:1px solid var(--line); cursor:pointer; }
.mtR:active { background:rgba(255,255,255,.04); }
.mtR .it { display:flex; align-items:center; gap:8px; min-width:0; }
.mtR .it .grow { min-width:0; }
.mtR .it .t { font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtR .it .s { font-size:10.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtR .ex { font-size:11px; color:var(--mut); text-align:right; }
.mtR .pr { text-align:right; font:600 13px var(--fh); color:var(--gold); }
.mtR .pr small { display:block; font:500 9.5px var(--fb); color:var(--mut); }
.mtR.own .t::after { content:" · YOU"; color:var(--acc2); font-size:10px; }
.chatScr { display:flex; flex-direction:column; height:100%; padding-bottom:10px; }
.chatScr #msgBody { flex:1; min-height:0; display:flex; flex-direction:column; }
.chat { display:flex; flex-direction:column; flex:1; min-height:240px; }
.chatLog { flex:1; overflow-y:auto; padding:6px 2px; display:flex; flex-direction:column; gap:6px; touch-action:pan-y; }
.cm { max-width:86%; background:var(--panel2); border:1px solid var(--line); border-radius:8px 8px 8px 2px; padding:6px 9px; font-size:13px; align-self:flex-start; word-wrap:break-word; }
.cm b { display:block; font:600 11px var(--fh); letter-spacing:.8px; color:var(--acc2); }
.cm small { color:var(--dim); font-size:10px; margin-left:6px; font-family:var(--fb); letter-spacing:0; }
.cm.me { align-self:flex-end; border-radius:8px 8px 2px 8px; background:rgba(232,85,47,.12); border-color:rgba(232,85,47,.35); }
.cm.me b { color:var(--gold); }
.chatIn { display:flex; gap:6px; padding-top:8px; border-top:1px solid var(--line); }
.mail { display:flex; gap:10px; padding:10px; border-bottom:1px solid var(--line); }
.mail:last-child { border-bottom:0; }
.mail .mi { width:34px; height:34px; border-radius:4px; background:#0e110b; border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; flex:none; color:var(--mut); }
.mail .mi svg { width:18px; height:18px; }
.mail .grow { flex:1; min-width:0; font-size:13px; }
.mail .att { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.mail small { color:var(--mut); display:block; margin-top:3px; font-size:11px; }

/* ---------- base ---------- */
.stn { display:flex; gap:10px; }
.stn .si { width:46px; height:46px; border-radius:6px; flex:none; background:#0e110b; border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; font-size:24px; }
.stn.off .si { filter:grayscale(1); opacity:.5; }
.stn .grow { flex:1; min-width:0; }
.stn .t { display:flex; justify-content:space-between; align-items:center; gap:6px; font:600 15px var(--fh); letter-spacing:1px; text-transform:uppercase; }
.stn p { margin:3px 0 6px; font-size:12px; color:var(--mut); }
.craft { background:#0e110b; border:1px solid var(--line); border-radius:4px; padding:8px; margin-top:8px; }
.craft .bar { margin:6px 0 4px; height:8px; } .craft .bar i { background:linear-gradient(90deg,#2f6a8a,var(--blue)); }
.craft.done { border-color:rgba(126,224,122,.5); } .craft.done .bar i { background:var(--grn); }
.rcp { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.06); }
.rcp:last-child { border-bottom:0; }
.rcp .grow { flex:1; min-width:0; } .rcp .t { font-weight:600; font-size:13px; } .rcp .s { font-size:11px; color:var(--mut); }

/* ---------- raid flow ---------- */
.pickScr { min-height:100%; display:flex; flex-direction:column; justify-content:center; gap:0; }
.pickTop { text-align:center; margin-bottom:10px; } .pickTop .note { margin:-2px 0 0; }
.pickC { display:block; width:100%; text-align:left; border:1px solid var(--line2); border-radius:10px; background:linear-gradient(135deg,#232a1c,#12150f 70%); padding:12px 12px 10px; margin-bottom:12px; position:relative; overflow:hidden; color:var(--tx); cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:border-color .15s, transform .08s; }
.pickC::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc); box-shadow:0 0 14px var(--acc); }
.pickC.junk::before { background:var(--grn); box-shadow:0 0 14px rgba(126,224,122,.6); }
.pickC:active { border-color:var(--acc); transform:scale(.99); }
.pickC.off { opacity:.55; }
.pickC.junk { background:linear-gradient(135deg,#2a2317,#12150f 70%); }
.pkHead { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding-left:4px; }
.pkHead h3 { margin:0; font:700 clamp(20px,3.2dvh,24px)/1 var(--fh); letter-spacing:3px; text-transform:uppercase; }
.pkHead small { display:block; color:var(--mut); font-size:12px; margin-top:3px; }
.pkHead .pill { flex:none; margin-top:1px; }
.pkBody { display:grid; grid-template-columns:44% 1fr; gap:8px; align-items:center; margin:6px 0 4px; }
.pkBody canvas { width:100%; height:clamp(70px,11dvh,112px); display:block; }
.pkStats { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.pkS { background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:5px; padding:5px 6px 5px 24px; position:relative; min-width:0; }
.pkS svg { position:absolute; left:6px; top:7px; width:13px; height:13px; color:var(--mut); }
.pkS span { display:block; font:600 9px var(--fh); letter-spacing:1px; color:var(--mut); text-transform:uppercase; }
.pkS b { display:block; font:600 12.5px/1.2 var(--fh); letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pkCond { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin:2px 4px 6px; font:600 10px var(--fh); letter-spacing:1.2px; text-transform:uppercase; color:var(--mut); }
.pkCond .bar { height:7px; } .pkCond b { font:600 12px var(--fh); letter-spacing:.5px; }
.pkWhy { list-style:none; margin:0; padding:6px 4px 0; border-top:1px dashed rgba(255,255,255,.08); display:flex; flex-direction:column; gap:3px; }
.pkWhy li { display:flex; gap:7px; font-size:12px; line-height:1.35; color:#cdc8b6; }
.pkWhy li i { flex:none; width:14px; height:14px; margin-top:1px; border-radius:3px; display:flex; align-items:center; justify-content:center; font:700 12px/1 var(--fh); font-style:normal; background:rgba(126,224,122,.14); color:var(--grn); }
.pkWhy li.c i { background:rgba(255,90,74,.14); color:#ff8a7a; }
.pkWhy li span { flex:1; min-width:0; }
.pkGo { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:8px; font:600 12px var(--fh); letter-spacing:1.4px; text-transform:uppercase; color:var(--acc2); }
.pickC.junk .pkGo { color:var(--grn); }
.pickC.off .pkGo { color:var(--mut); }
.cfSec { cursor:pointer; }
.cfSec .ph svg { width:14px; height:14px; }
.chipl { display:flex; flex-wrap:wrap; gap:4px; }
.chipl > span { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.3); border:1px solid var(--rc, var(--line)); border-radius:3px; padding:3px 6px; font-size:11.5px; }
.warns { color:var(--warn); font-size:12px; margin-top:8px; display:flex; flex-direction:column; gap:3px; }
.stick { position:sticky; bottom:0; z-index:5; padding:10px 0 4px; background:linear-gradient(0deg,var(--bg) 70%,transparent); margin-top:6px; }
/* queue: animated drop briefing */
.qScr { min-height:100%; display:flex; flex-direction:column; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 18%,rgba(232,85,47,.16),transparent 55%), radial-gradient(ellipse at 50% 100%,rgba(90,180,255,.06),transparent 50%); animation:scrIn .3s ease-out; }
.qHero { position:relative; flex:1 1 0; min-height:150px; max-height:380px; }
.qHero canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.qTag { position:absolute; left:0; top:0; display:flex; align-items:center; gap:6px; font:600 10px var(--fh); letter-spacing:1.6px; color:var(--acc2); background:rgba(10,12,8,.7); border:1px solid rgba(232,85,47,.4); border-radius:3px; padding:3px 8px; }
.qTag i { width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc); animation:qBlink 1s ease-in-out infinite; }
.qScr.live .qTag { color:var(--grn); border-color:rgba(126,224,122,.4); } .qScr.live .qTag i { background:var(--grn); box-shadow:0 0 8px var(--grn); }
.qLen { position:absolute; right:0; top:0; font:600 10px var(--fh); letter-spacing:1.6px; color:var(--mut); background:rgba(10,12,8,.7); border:1px solid var(--line2); border-radius:3px; padding:3px 8px; }
@keyframes qBlink { 50% { opacity:.25; } }
.qHead { text-align:center; }
.qHead h1 { margin:0; font:700 clamp(24px,4.2dvh,32px)/1 var(--fh); letter-spacing:.16em; text-transform:uppercase; color:#f3ecd8; text-shadow:0 0 24px rgba(232,85,47,.35); }
.qHead h1::after { content:""; display:inline-block; width:1.2em; text-align:left; animation:qDots 1.4s steps(4) infinite; }
.qScr:not(.busy):not(.live) .qHead h1::after { content:""; animation:none; width:0; }
@keyframes qDots { 0% { content:""; } 25% { content:"."; } 50% { content:".."; } 75% { content:"..."; } }
.qTick { margin-top:5px; font:600 11px var(--fh); letter-spacing:2px; text-transform:uppercase; color:var(--gold); opacity:.85; }
.qTick.in { animation:qTickIn .45s ease-out; }
@keyframes qTickIn { from { opacity:0; transform:translateY(5px); } }
.qStats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.qStats > div { position:relative; background:linear-gradient(180deg,rgba(31,36,25,.9),rgba(20,24,16,.9)); border:1px solid var(--line); border-radius:8px; padding:8px 6px; text-align:center; min-width:0; }
.qStats span { display:block; font:600 9.5px var(--fh); letter-spacing:1.4px; color:var(--mut); text-transform:uppercase; }
.qStats b { display:block; font:700 22px/1.15 var(--fh); letter-spacing:.5px; color:#f3ecd8; font-variant-numeric:tabular-nums; }
.qStats small { display:block; font-size:10px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qAuto { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.qAuto svg { position:absolute; left:50%; top:50%; width:50px; height:50px; margin:-33px 0 0 -25px; transform:rotate(-90deg); pointer-events:none; }
.qAuto svg circle { fill:none; stroke:#2a2f24; stroke-width:2.5; }
.qAuto svg #qRing { stroke:var(--acc); stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(232,85,47,.8)); transition:stroke-dasharray .9s linear; }
.qAuto b { font-size:14px; position:relative; margin-top:-4px; }
.qAuto span { position:absolute; bottom:5px; left:0; right:0; }
.qList { background:rgba(14,17,11,.85); border:1px solid var(--line); border-radius:8px; overflow:hidden; flex:0 1 auto; min-height:0; display:flex; flex-direction:column; }
.qLh { display:flex; justify-content:space-between; padding:7px 10px; font:600 10.5px var(--fh); letter-spacing:1.4px; text-transform:uppercase; color:var(--mut); border-bottom:1px solid var(--line); background:#0e110b; }
.qLh b { color:var(--tx); font-weight:600; }
#qRows { overflow-y:auto; max-height:24dvh; touch-action:pan-y; }
.qRow { display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.04); }
.qRow:last-child { border-bottom:0; }
.qRow.new { animation:qRowIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes qRowIn { from { opacity:0; transform:translateX(-18px); } }
.qRow .grow { flex:1; min-width:0; } .qRow .t { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .qRow .t .acc { font:600 10px var(--fh); letter-spacing:1px; } .qRow .s { font-size:11px; color:var(--mut); }
.qAv { width:30px; height:30px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 11px var(--fh); letter-spacing:.5px; color:#1a1405; background:radial-gradient(circle at 35% 30%,#fff3c0,#ffd166 45%,#b8862a); box-shadow:0 0 0 2px rgba(255,209,102,.25); }
.qRow.ai .qAv { color:#0e1a0c; background:radial-gradient(circle at 35% 30%,#d6f5d2,#7ee07a 45%,#3f7a3a); box-shadow:0 0 0 2px rgba(126,224,122,.2); }
.qRow.ai { opacity:.75; }
.qOk { color:var(--grn); display:flex; } .qOk svg { width:16px; height:16px; }
.qLoad { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; font:600 11px var(--fh); letter-spacing:1px; text-transform:uppercase; color:var(--mut); }
.qLoad > span:not(.pill) { padding:2px 8px; border:1px solid var(--line); border-radius:3px; background:rgba(0,0,0,.25); }
.qBtns { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.qBtns .note { text-align:center; margin:2px 0 0; }
.qGo:not([disabled]) { animation:qGlow 1.8s ease-in-out infinite; }
@keyframes qGlow { 50% { box-shadow:0 0 28px rgba(232,85,47,.6), 0 2px 14px rgba(232,85,47,.25); } }
.res { text-align:center; }
.res h1 { margin:8px 0 2px; font:700 38px var(--fh); letter-spacing:4px; text-transform:uppercase; }
.res > p { color:var(--mut); margin:0 0 12px; font-size:13px; }
.xpl { font:600 16px var(--fh); letter-spacing:1px; color:var(--gold); margin:10px 0; }
.lvup { display:inline-block; background:linear-gradient(90deg,#b8862a,#ffd166); color:#1a1405; font:700 12px var(--fh); letter-spacing:1.5px; padding:3px 10px; border-radius:3px; margin-left:6px; animation:pop .4s; }
.skg { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.06); text-align:left; font-size:12.5px; }
.skg:last-child { border-bottom:0; }
.skg .nm { flex:1; } .skg b { color:var(--gold); font:600 12px var(--fh); }

/* ---------- misc ---------- */
.hb2 { margin:4px 0 10px; }
.hb2 details { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); margin-bottom:6px; }
.hb2 summary { padding:11px 12px; font:600 13px var(--fh); letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.hb2 summary::-webkit-details-marker { display:none; }
.hb2 summary::after { content:"+"; color:var(--mut); }
.hb2 details[open] summary::after { content:"−"; }
.hb2 .hbody { padding:0 12px 10px; font-size:13px; color:#cdc8b6; line-height:1.5; }
.hb2 .hbody p { margin:6px 0; }
.hb2 .hbody b { color:var(--tx); }
.spacer { height:8px; }
@media (hover:hover) { .btn:hover { filter:brightness(1.15); } .li.tap:hover, .mtR:hover { background:rgba(255,255,255,.03); } .cell:hover { filter:brightness(1.2); } }
/* short phones (browser bars eat the height): tighten the raid pick cards so both fit */
@media (max-height:720px) {
  .pickTop .note { display:none; } .pickTop { margin-bottom:6px; }
  .pickC { padding:10px 10px 8px; margin-bottom:8px; }
  .pkWhy { padding-top:4px; } .pkGo { margin-top:4px; }
}
@media (max-height:720px) {
  .qScr { gap:8px; } .qHero { min-height:170px; } #qRows { max-height:112px; } #qFoot { display:none; }
  .qStats b { font-size:19px; } .qStats > div { padding:6px 4px; }
}
.ph .h2 { color:var(--tx); }

/* ---------- crate opening ceremony (js/ui/crates.js) ---------- */
#crateOv { position:absolute; inset:0; z-index:60; background:radial-gradient(ellipse at 50% 38%, #1d2116 0%, #050604 72%); display:flex; flex-direction:column; align-items:center; overflow:hidden; animation:fadeIn .15s; user-select:none; -webkit-user-select:none; }
#crateOv.bye { opacity:0; transition:opacity .2s; }
#crateOv .cTitle { margin-top:calc(34px + env(safe-area-inset-top)); text-align:center; font-family:var(--fh); letter-spacing:1px; z-index:2; }
#crateOv .cTitle small { display:block; color:var(--tc); font-size:12px; letter-spacing:3px; text-transform:uppercase; }
#crateOv .cTitle b { font-size:26px; color:#fff; text-shadow:0 0 18px var(--tc); }
#crateOv .cStage { height:220px; width:100%; display:flex; align-items:flex-end; justify-content:center; perspective:600px; z-index:2; flex:0 0 auto; }
#crateOv .crate { position:relative; width:150px; height:110px; margin-bottom:18px; }
#crateOv .crate.in { animation:crateIn .45s cubic-bezier(.3,1.6,.6,1); }
#crateOv .crate .body { position:absolute; inset:18px 0 0; background:var(--box); border:3px solid rgba(0,0,0,.55); border-radius:6px; box-shadow:inset 0 -18px 0 rgba(0,0,0,.25), 0 14px 28px rgba(0,0,0,.6); }
#crateOv .crate .band { position:absolute; top:0; bottom:0; width:12px; background:var(--band); box-shadow:0 0 6px rgba(0,0,0,.4); }
#crateOv .crate .b1 { left:22px; } #crateOv .crate .b2 { right:22px; }
#crateOv .crate .lock { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:26px; }
#crateOv .crate .lid { position:absolute; left:-6px; right:-6px; top:0; height:26px; background:var(--box); filter:brightness(1.18); border:3px solid rgba(0,0,0,.55); border-radius:6px; z-index:2; transform-origin:10% 100%; transition:transform .45s cubic-bezier(.2,1.4,.5,1), opacity .45s; }
#crateOv .crate .lid i { position:absolute; left:22px; right:22px; top:0; bottom:0; border-left:12px solid var(--band); border-right:12px solid var(--band); }
#crateOv .crate .seam { position:absolute; left:4px; right:4px; top:18px; height:4px; background:var(--bc); box-shadow:0 0 12px 3px var(--bc); opacity:.25; z-index:3; transition:opacity .2s, box-shadow .2s; }
#crateOv .crate.glow1 .seam { opacity:.5; } #crateOv .crate.glow2 .seam { opacity:.8; box-shadow:0 0 22px 6px var(--bc); } #crateOv .crate.glow3 .seam { opacity:1; box-shadow:0 0 34px 10px var(--bc); }
#crateOv .crate.shake1 { animation:cShake .33s linear; } #crateOv .crate.shake2 { animation:cShake .33s linear; --amp:6px; } #crateOv .crate.shake3 { animation:cShake .42s linear; --amp:10px; }
#crateOv .crate.shake1 .seam { opacity:.45; } #crateOv .crate.shake2 .seam { opacity:.75; } #crateOv .crate.shake3 .seam { opacity:1; box-shadow:0 0 30px 9px var(--bc); }
#crateOv .crate.open .lid { transform:translate(-40px,-120px) rotate(-70deg); opacity:0; }
#crateOv .crate.open .seam { opacity:1; height:10px; top:14px; box-shadow:0 -20px 60px 24px var(--bc); }
#crateOv .cRays { position:absolute; left:50%; top:210px; width:900px; height:900px; margin:-450px 0 0 -450px; border-radius:50%; opacity:0; transition:opacity .5s; z-index:1;
  background:repeating-conic-gradient(from 0deg, var(--bc) 0deg 7deg, transparent 7deg 22deg); -webkit-mask:radial-gradient(circle, #000 0%, transparent 62%); mask:radial-gradient(circle, #000 0%, transparent 62%); animation:cSpin 14s linear infinite; }
#crateOv.opened .cRays { opacity:.22; }
#crateOv.hush .cRays { opacity:.05; } #crateOv.hush .cCards .card:not(.tremble) { opacity:.35; }
#crateOv .cFlash { position:absolute; inset:0; opacity:0; pointer-events:none; z-index:5; }
#crateOv .cFlash.go { animation:cFlash .5s ease-out; }
#crateOv .cCards { z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:4px 14px; max-width:420px; overflow-y:auto; flex:1 1 auto; align-content:flex-start; }
#crateOv .card { width:98px; height:124px; perspective:500px; animation:cardIn .25s ease-out; transition:opacity .3s; }
#crateOv .card .in { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .42s cubic-bezier(.3,1.3,.5,1); }
#crateOv .card.flip .in { transform:rotateY(180deg); }
#crateOv .card .back, #crateOv .card .front { position:absolute; inset:0; border-radius:10px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px; }
#crateOv .card .back { background:linear-gradient(160deg,#2a3020,#141810); border:2px solid #4a5238; color:#8f8b7b; font:700 34px var(--fh); }
#crateOv .card.tremble .back { border-color:var(--rc); box-shadow:0 0 22px var(--rg); color:var(--rc); animation:cShake .12s linear infinite; --amp:2px; }
#crateOv .card .front { transform:rotateY(180deg); background:radial-gradient(circle at 50% 35%, var(--rg), #12150e 70%); border:2px solid var(--rc); box-shadow:0 0 18px var(--rg); }
#crateOv .card .ci { font-size:38px; line-height:1.1; filter:drop-shadow(0 2px 3px #000); }
#crateOv .card b { font:700 12px/1.15 var(--fh); color:var(--rc); margin-top:4px; }
#crateOv .card i { font-style:normal; font-size:11px; color:#fff; }
#crateOv .card small { font-size:10px; color:var(--mut); letter-spacing:1px; text-transform:uppercase; }
#crateOv .card.r4.flip .front { animation:legPulse 1.2s ease-in-out infinite; }
#crateOv .cHint { z-index:2; color:var(--mut); font:600 13px var(--fh); letter-spacing:1px; min-height:18px; margin:6px 0; text-align:center; padding:0 16px; }
#crateOv .cBtns { z-index:2; display:flex; flex-direction:column; gap:8px; width:min(320px, 86%); margin-bottom:calc(22px + env(safe-area-inset-bottom)); }
@keyframes crateIn { 0% { transform:translateY(-260px) scale(.9); } 100% { transform:none; } }
@keyframes cShake { 0%,100% { transform:translate(0,0) rotate(0); } 20% { transform:translate(calc(var(--amp,3px) * -1), 0) rotate(-2deg); } 40% { transform:translate(var(--amp,3px), -2px) rotate(2deg); } 60% { transform:translate(calc(var(--amp,3px) * -1), 1px) rotate(-1deg); } 80% { transform:translate(var(--amp,3px), 0) rotate(1deg); } }
@keyframes cSpin { to { transform:rotate(360deg); } }
@keyframes cFlash { 0% { opacity:.55; } 100% { opacity:0; } }
@keyframes cardIn { 0% { transform:translateY(40px) scale(.6); opacity:0; } 100% { transform:none; opacity:1; } }
@keyframes legPulse { 0%,100% { box-shadow:0 0 18px var(--rg); } 50% { box-shadow:0 0 38px 6px var(--rc); } }
/* Bucket 0: a toast with an action ("View in Stash") and the item it points at */
.tst.hasAct { display:flex; align-items:center; gap:10px; pointer-events:auto; }
.tst .tstAct { flex:none; padding:4px 10px; border-radius:9px; border:2px solid rgba(0,0,0,.35); background:#ffd23f; color:#2a1600; font:900 12px/1.1 var(--fb, system-ui); cursor:pointer; }
.cell.stHl { outline:3px solid #ffd23f; outline-offset:2px; animation:stHlPulse 1.2s ease-in-out 3; }
@keyframes stHlPulse { 50% { outline-color:#fff6c8; } }