:root{
  --bg:#0b0f14; --panel:#121822; --text:#e8eef6; --muted:#9aa7b4;
  --radius:14px; --good:#24c08b; --bad:#ff5d5d; --chip:rgba(0,0,0,.25);
  --gold:#e8c15a;
}

/* Base */
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto;color:var(--text);background:var(--bg)}
.wrap{max-width:1100px;margin:0 auto;padding:24px 16px}
h1{margin:0 0 8px;font-size:22px}
.muted{color:var(--muted)}
.hidden{display:none !important}

/* Toolbar (top) */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
.toolbar-slot{display:flex;gap:10px;align-items:center}
.btn{all:unset;cursor:pointer;padding:8px 12px;border-radius:999px;background:var(--panel);border:1px solid #1f2733}
.btn.danger{border-color:#3b1f23;background:linear-gradient(180deg,#3b1f23,#2a1418);color:#ff9a9a}

/* Counters */
.counter{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;background:var(--panel);border:1px solid #1f2733;border-radius:999px}
.count{font-weight:800;min-width:56px;text-align:center;display:inline-block;font-variant-numeric:tabular-nums lining-nums}
.count.up{animation:bumpUp .35s ease;color:var(--good)}
.count.down{animation:bumpDown .35s ease;color:var(--bad)}
@keyframes bumpUp{0%{transform:translateY(6px);opacity:.65}100%{transform:translateY(0);opacity:1}}
@keyframes bumpDown{0%{transform:translateY(-6px);opacity:.65}100%{transform:translateY(0);opacity:1}}

/* Generic bump helpers for ANY number */
.bump-up{animation:bumpUp .35s ease;color:var(--good)}
.bump-down{animation:bumpDown .35s ease;color:var(--bad)}

.pillstat{display:flex;gap:6px;align-items:baseline;background:var(--panel);border:1px solid #1f2733;border-radius:999px;padding:6px 10px}
.pillstat .label{color:var(--muted);font-size:12px}
.pillstat .num{font-weight:800}

/* Sections & card grid */
section{margin:18px 0 28px}
h2{font-size:14px;color:var(--muted);margin:0 0 10px;letter-spacing:.4px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{position:relative;border-radius:var(--radius);padding:12px;display:grid;gap:8px;color:var(--text);cursor:pointer;user-select:none;outline:2px solid transparent;outline-offset:0;transition:outline-color .15s ease, box-shadow .15s ease}
.card.perm-selected{outline-color:var(--gold);box-shadow:0 0 0 3px rgba(232,193,90,.15) inset}
.top{display:flex;justify-content:space-between;gap:8px}
.name{font-weight:700}
.rar{color:var(--muted);font-size:12px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:10px}
.value-big{font-size:24px;font-weight:800}
.demand-big{font-size:18px;font-weight:800;padding:6px 10px;border-radius:999px;background:var(--chip);border:1px solid rgba(255,255,255,.1)}
.kv{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.kv b{color:var(--text);font-weight:700}
.trend{padding:2px 8px;border-radius:999px;background:var(--chip);font-size:12px}

/* Rarity backgrounds */
.MYTHICAL{background:linear-gradient(135deg,#6b1a1a,#9e1c1c)}
.LEGENDARY{background:linear-gradient(135deg,#5e1a6b,#9b3d9e)}
.RARE{background:linear-gradient(135deg,#1a2b6b,#3d5b9e)}
.UNCOMMON{background:linear-gradient(135deg,#1a6b2d,#3d9e5b)}
.COMMON{background:linear-gradient(135deg,#3a3a3a,#5e5e5e)}
.GAMEPASS{background:linear-gradient(135deg,#6b5e1a,#9e8d3d)}
.LIMITED{background:linear-gradient(135deg,#9e7b1c,#d9a63c)}

/* Media on cards */
.media{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;margin-bottom:8px;border:1px solid rgba(255,255,255,.08);background:color-mix(in oklab, #ffffff 6%, transparent)}
.media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.item-img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}

/* Card mini Reg/Perm toggle */
.mini-toggle{position:absolute;top:6px;left:6px;display:inline-flex;background:var(--panel);border:1px solid #1f2733;border-radius:999px;overflow:hidden;z-index:3}
.mini-toggle button{all:unset;padding:4px 8px;cursor:pointer;color:var(--muted);font-weight:700;font-size:12px}
.mini-toggle button.active{background:var(--chip);color:var(--text)}

/* Card badges */
.badge-wrap{position:absolute; top:6px; right:6px; display:flex; gap:6px; align-items:center; z-index:3}
.sel-badge{background:var(--chip); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:2px 8px; font-size:12px; font-weight:800; line-height:1}
.sel-badge[hidden]{display:none}
.sel-badge.pop{animation:pop .18s ease}
@keyframes pop{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1);opacity:1}}
.del-badge{all:unset;width:22px;height:22px;display:grid;place-items:center;border-radius:999px;line-height:1;background:var(--chip);border:1px solid rgba(255,255,255,.14);font-weight:900;cursor:pointer}
.del-badge[hidden]{display:none}
.del-badge:active{transform:scale(.94)}

/* Click animations */
.card.added{animation:pulseAdd .22s ease}
.card.removed{animation:pulseRemove .22s ease}
@keyframes pulseAdd{0%{transform:scale(1)}50%{transform:scale(.98)}100%{transform:scale(1)}}
@keyframes pulseRemove{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* Calculator modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:50}
.overlay.show{display:flex}
.panel{width:min(960px,95vw);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid #1f2733;border-radius:18px;padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.4)}
.panel h3{margin:0 0 10px;font-size:16px}
.panel small{color:var(--muted)}
.calc-grid{display:grid;grid-template-columns:1fr minmax(160px,220px) 1fr;gap:14px;margin-top:12px}
.box{display:flex;flex-direction:column;min-height:260px;border:1px dashed #2a3443;border-radius:12px;padding:12px}
.row{display:flex;justify-content:space-between;gap:8px}
.grid-center{display:grid;place-items:center}
.vstack-center{display:flex;flex-direction:column;align-items:center}
.gap-12{gap:12px}
.diff{display:block;text-align:center;margin:0 auto;font-weight:900;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;font-size:clamp(32px,5vw,64px);line-height:1.05}
.pos{color:var(--good)} .neg{color:var(--bad)}
.badge{padding:10px 18px;border:2px solid rgba(255,255,255,.14);border-radius:999px}
.badge.win{color:var(--good);border-color:rgba(36,192,139,.3)}
.badge.lose{color:var(--bad);border-color:rgba(255,93,93,.3)}

/* Side stats row */
.stats-row{margin-top:auto;padding-top:10px;border-top:1px dashed #2a3443;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .label{color:var(--muted);font-size:12px;letter-spacing:.25px}
.stat .stat-num{font-weight:800;font-variant-numeric:tabular-nums lining-nums}

/* Icon tile grid (2×2 squares) */
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0}
.tile{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.22);animation:tileIn .16s ease both}
.tile img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.tile.reg{box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 3px 10px rgba(0,0,0,.22)}
.tile.perm{box-shadow:inset 0 0 0 2px rgba(232,193,90,.25),0 3px 10px rgba(0,0,0,.22)}
.tile.perm::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(232,193,90,.35),0 0 24px rgba(232,193,90,.15);border-radius:12px}
@keyframes tileIn{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}
.tile.removing{animation:tileOut .14s ease both}
@keyframes tileOut{0%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:0}}

/* Tile meta bar (fixed bottom overlay) */
.tile-meta{
  position:absolute; left:6px; right:6px; bottom:6px;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:6px 8px;
  display:grid; gap:2px; z-index:2;
  backdrop-filter: blur(2px);
}
.tile-meta .meta-value{font-weight:900}
.tile-meta .meta-demand{font-size:12px;color:var(--muted)}
.tile-meta .meta-price{font-size:12px;color:var(--muted)}

/* Bottom bar */
.bottom-bar{position:fixed;left:0;right:0;bottom:12px;display:flex;justify-content:center;z-index:60;pointer-events:none}
.bottom-inner{pointer-events:auto;display:flex;gap:10px;background:var(--panel);border:1px solid #1f2733;border-radius:999px;padding:8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.45);align-items:center}
.seg{display:inline-flex;background:var(--panel);border:1px solid #1f2733;border-radius:999px;overflow:hidden}
.seg-btn{all:unset;cursor:pointer;padding:8px 14px;color:var(--muted)}
.seg-btn.active{background:var(--chip);color:var(--text)}
.bb-btn{all:unset;cursor:pointer;user-select:none;padding:8px 14px;border-radius:999px;border:1px solid #1f2733;background:var(--panel);color:var(--text);transition:transform .12s ease, box-shadow .12s ease}
.bb-btn:active{transform:translateY(1px) scale(.98)}
#bbYou.active,#bbThem.active{background:var(--chip);color:var(--text);box-shadow:0 0 0 3px #fff1 inset}

/* Deny shake when reaching cap */
@keyframes deny{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.deny-shake{animation:deny .18s ease}

/* Sticky mini bar */
#stickyBar{position:fixed;top:8px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:10px;padding:6px 10px;background:var(--panel);border:1px solid #1f2733;border-radius:999px;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#stickyBar .counter{margin:0}