/* ─── Tokens — Clean light + gaming touches ───────────────── */
:root {
  --c-bg:        #F4F5F7;
  --c-surface:   #FFFFFF;
  --c-border:    #E2E8F0;
  --c-border-2:  #F1F5F9;
  --c-text:      #1E293B;
  --c-text-2:    #64748B;
  --c-text-3:    #94A3B8;
  --c-primary:   #2563EB;
  --c-primary-s: #EFF6FF;
  --c-green:     #16A34A;
  --c-green-s:   #F0FDF4;
  --c-red:       #DC2626;
  --c-red-s:     #FEF2F2;
  --c-amber:     #D97706;
  --c-amber-s:   #FFFBEB;
  --c-side:      #0F1117;
  --c-side-2:    #1A1D27;
  --c-side-text: #71717A;
  --c-side-act:  #FFFFFF;
  --sidebar-w:   160px;
  --topbar-h:    68px;
  --ticker-h:    34px;
  --r:           8px;
  --r-lg:        12px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* ─── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100vw; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px; line-height: 1.5; color: var(--c-text);
  background: var(--c-bg); display: flex; min-height: 100vh;
  min-height: -webkit-fill-available;
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ─── Layout ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); background: var(--c-side); flex-shrink: 0;
  position: fixed; top: calc(var(--topbar-h) + var(--ticker-h)); bottom: 0; left: 0; display: flex; flex-direction: column;
  z-index: 100; border-right: 1px solid rgba(255,255,255,.06);
  transition: width .22s ease; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar.collapsed { width: 52px; }
.sidebar.collapsed .side-game-name,
.sidebar.collapsed .side-game-arrow,
.sidebar.collapsed .side-label,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .side-btn span { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .side-game  { justify-content: center; padding: 8px 0; margin: 8px 6px; }
.sidebar.collapsed .side-section { padding: 10px 6px 4px; }
.sidebar.collapsed .side-foot { padding: 8px 6px; }
.sidebar.collapsed .side-btn { justify-content: center; padding: 8px 0; }
.main { margin-left: var(--sidebar-w); padding-top: calc(var(--topbar-h) + var(--ticker-h)); flex: 1; min-width: 0; display: flex; flex-direction: column; transition: margin-left .22s ease; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
.main.expanded { margin-left: 52px; }
.topbar {
  height: var(--topbar-h);
  background: #0D1117;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; padding: 0 24px; gap: 12px;
  box-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.topbar-left  { display: flex; align-items: center; gap: 8px; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ─── Market ticker (stock-tape) ─────────────────────────── */
#ticker {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--ticker-h);
  background: #000; border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 150; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
#ticker-track {
  display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
  will-change: transform; animation: ticker-scroll linear infinite;
}
#ticker:hover #ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk-item {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 18px; height: var(--ticker-h); line-height: var(--ticker-h);
  border-right: 1px solid rgba(255,255,255,.06); cursor: pointer;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.tk-item:hover { background: rgba(255,255,255,.04); }
.tk-name  { color: #E2E8F0; font-weight: 700; letter-spacing: .3px; }
.tk-price { color: #CBD5E1; font-weight: 600; }
.tk-pct   { font-weight: 700; }
.tk-vol   { color: #64748B; font-size: 10px; }
@media (max-width: 768px) {
  #ticker { z-index: 150; }
  .tk-item { padding: 0 13px; font-size: 10px; }
}
/* Mobile hamburger + drawer backdrop — hidden on desktop, shown in the ≤768px block */
.menu-burger { display: none; background: none; border: none; color: #E2E8F0; padding: 6px; margin-right: 2px; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; }
.menu-burger:hover { background: rgba(255,255,255,.08); }
#nav-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
#nav-overlay.show { display: block; }
.content { padding: 20px; flex: 1; }
/* The footer is a sibling of .main in the DOM (not a child), so it does not
   inherit .main's margin-left. Offset it by the sidebar width so it sits flush
   to the right of the fixed sidebar — no overlap, no gap. Kept in sync with the
   collapsed sidebar state via the sibling selector below. */
.site-footer { margin-left: var(--sidebar-w); transition: margin-left .22s ease; }
.main.expanded ~ .site-footer { margin-left: 52px; }
.page { display: none; }
.page.active { display: block; }

/* ─── Watchlist "good time to buy" highlight ──────────────── */
/* A watchlist card with an active buy signal gets a pulsing green glow so it
   visibly stands out from cards that are just waiting. */
@keyframes buyPulse {
  0%, 100% { box-shadow: 0 0 0 1.5px #22C55E, 0 0 12px rgba(34,197,94,.35); }
  50%      { box-shadow: 0 0 0 2px   #22C55E, 0 0 28px rgba(34,197,94,.80); }
}
.buy-card.buy-now { border-color: #22C55E !important; animation: buyPulse 1.8s ease-in-out infinite; }
@keyframes buyDot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: .45; transform: scale(1.5); }
}
.buy-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E;
           box-shadow: 0 0 6px #22C55E; animation: buyDot 1.1s ease-in-out infinite; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .buy-card.buy-now { animation: none; box-shadow: 0 0 0 1.5px #22C55E, 0 0 16px rgba(34,197,94,.5); }
  .buy-dot { animation: none; }
}

/* ─── Sidebar ────────────────────────────────────────────── */
.side-toggle {
  width: 100%; padding: 14px 0 10px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer;
  background: none; border-left: none; border-right: none; border-top: none;
  color: rgba(255,255,255,.4); transition: color .15s;
}
.side-toggle:hover { color: rgba(255,255,255,.8); }

.side-game {
  margin: 8px 10px; padding: 8px 10px; background: var(--c-side-2);
  border-radius: var(--r); cursor: pointer; display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.06); transition: background .15s;
}
.game-color { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.side-game-name { font-size: 12px; font-weight: 500; color: #E4E4E7; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-game-arrow { color: var(--c-side-text); flex-shrink: 0; }

.side-section { padding: 14px 10px 4px; }
.side-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #E2E8F0; padding: 0 6px; margin-bottom: 2px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: var(--r); color: var(--c-side-text); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .12s; border: none; background: none;
  width: 100%; text-align: left; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #D4D4D8; }
.nav-item.active { background: rgba(255,255,255,.1); color: var(--c-side-act); }
.nav-item svg { flex-shrink: 0; opacity: .7; }
.nav-item.active svg { opacity: 1; }
.nav-badge {
  margin-left: auto; background: var(--c-red); color: #fff;
  font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px;
  min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
}

.side-foot {
  margin-top: auto; padding: 10px; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 6px;
}
.side-btn {
  width: 100%; padding: 8px 10px; border-radius: var(--r); font-size: 12px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.1); background: transparent; color: var(--c-side-text);
  display: flex; align-items: center; gap: 7px; transition: all .12s; cursor: pointer;
}
.side-btn:hover { background: rgba(255,255,255,.06); color: #D4D4D8; }
.side-btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.side-btn-primary:hover { background: #1D4ED8; }

/* ─── Topbar ─────────────────────────────────────────────── */
.topbar-title { font-size: 14px; font-weight: 600; }
#last-upd-pill { display: none !important; }
.topbar-sep { flex: 1; }
.status-pill {
  display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-text-2);
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 20px; padding: 4px 10px;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); flex-shrink: 0; }
.status-dot.ok { background: var(--c-green); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px;
  border-radius: var(--r); border: 1px solid transparent; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .12s; white-space: nowrap; line-height: 1;
}
.btn svg { width: 13px; height: 13px; }
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: #1D4ED8; }
.btn-outline { background: var(--c-surface); color: var(--c-text-2); border-color: var(--c-border); }
.btn-outline:hover { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-s); }
.btn-ghost { background: transparent; color: var(--c-text-2); border-color: var(--c-border); }
.btn-ghost:hover { background: var(--c-bg); color: var(--c-text); }
.btn-danger { background: var(--c-red-s); color: var(--c-red); border-color: #FECACA; }
.btn-danger:hover { background: var(--c-red); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-sm svg { width: 12px; height: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--c-text-2); margin-bottom: 14px;
}

/* ─── KPI grid ───────────────────────────────────────────── */
.kpi-grid { display: grid; gap: 12px; margin-bottom: 20px; }
.kpi-grid-4 { grid-template-columns: repeat(4,1fr); }
.kpi-grid-3 { grid-template-columns: repeat(3,1fr); }
.kpi-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 1px solid var(--c-primary);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 12px 16px;
}
.kpi-card .kpi-value { color: var(--c-primary); }
.kpi-label { font-size: 11px; color: var(--c-text-2); font-weight: 500; margin-bottom: 6px; }
.kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1; }
.kpi-sub { font-size: 11px; color: var(--c-text-3); margin-top: 4px; }

/* ─── Tables ─────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead tr { background: #F8FAFC; }
th {
  padding: 9px 12px; text-align: left; font-size: 10px; font-weight: 600;
  color: #E2E8F0; text-transform: uppercase; letter-spacing: .7px;
  white-space: nowrap; border-bottom: 1px solid var(--c-border);
}
.dark-head thead tr { background: #1A2235; }
.dark-head th { color: #E2E8F0 !important; border-bottom: 1px solid #263147 !important; }
tr.row-open-head th {
  background: #1A2235 !important; color: #E2E8F0 !important;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--c-border-2); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.item-row td { background: #FFFFFF; }
tr.item-row:hover td { background: #F8FAFC; }
tbody tr:hover td { background: #F8FAFC; }
.dark-panel tbody tr:hover td { background: rgba(255,255,255,.04) !important; }
tr#inline-detail-tr td { background: #F8FAFC !important; }
.item-img {
  width: 28px; height: 28px; border-radius: 6px; object-fit: contain;
  background: var(--c-bg); border: 1px solid var(--c-border); display: block;
}
.item-img-ph {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--c-bg); border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
}
.item-img-ph svg { width: 14px; height: 14px; color: var(--c-text-3); }

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
}
.badge-Legendary { background:rgba(227,179,65,.15);  color:#E3B341; border:1px solid rgba(227,179,65,.3); }
.badge-Immortal  { background:rgba(236,72,153,.15);  color:#F472B6; border:1px solid rgba(236,72,153,.3); }
.badge-Arcana    { background:rgba(139,92,246,.15);  color:#A78BFA; border:1px solid rgba(139,92,246,.3); }
.badge-Beyond    { background:rgba(6,182,212,.15);   color:#22D3EE; border:1px solid rgba(6,182,212,.3); }
.badge-Celestial { background:rgba(59,130,246,.15);  color:#60A5FA; border:1px solid rgba(59,130,246,.3); }
.badge-Divine    { background:rgba(248,81,73,.15);   color:#F87171; border:1px solid rgba(248,81,73,.3); }
.badge-Cosmic    { background:rgba(249,115,22,.15);  color:#FB923C; border:1px solid rgba(249,115,22,.3); }
.badge-Material  { background:rgba(110,118,129,.15); color:#8B949E; border:1px solid rgba(110,118,129,.3); }

.mono { font-variant-numeric: tabular-nums; font-weight: 500; color: #64748B; }
.text-green { color: var(--c-green); }
.text-red   { color: var(--c-red); }
.text-muted { color: var(--c-text-2); }

/* ─── Filter bar ─────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.input-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r); padding: 0 10px; color: var(--c-text-2);
  transition: border-color .15s;
}
.input-search:focus-within { border-color: var(--c-primary); }
.input-search svg { width: 13px; height: 13px; flex-shrink: 0; }
.input-search input {
  border: none; outline: none; background: transparent; padding: 7px 0;
  font-size: 12px; color: var(--c-text); width: 180px;
}
.input-search input::placeholder { color: var(--c-text-3); }
select.select-filter {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r);
  color: var(--c-text); padding: 7px 10px; font-size: 12px; outline: none; cursor: pointer;
}
select.select-filter:focus { border-color: var(--c-primary); }
.sep { flex: 1; }

/* ─── Progress ───────────────────────────────────────────── */
.progress-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 12px 16px; margin-bottom: 14px; display: none;
}
.progress-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--c-text-2); margin-bottom: 7px; }
.progress-track { background: var(--c-bg); border-radius: 3px; height: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--c-primary); border-radius: 3px; transition: width .3s; }

/* ─── Modal ──────────────────────────────────────────────── */
.modal-bg {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 200; align-items: center; justify-content: center; padding: 16px;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,.15);
  width: min(720px,100%); max-height: 88vh; overflow-y: auto; padding: 20px;
}
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.modal-title { font-size: 14px; font-weight: 600; flex: 1; }
.modal-close {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--c-border);
  background: var(--c-bg); color: var(--c-text-2); display: flex; align-items: center; justify-content: center;
}
.modal-close svg { width: 13px; height: 13px; }
.modal-close:hover { background: var(--c-border); }
.chart-area { position: relative; height: 240px; margin-top: 10px; }

/* ─── Alert form ─────────────────────────────────────────── */
.alert-form {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.f-field { display: flex; flex-direction: column; gap: 4px; }
.f-label { font-size: 10px; font-weight: 600; color: var(--c-text-2); text-transform: uppercase; letter-spacing: .6px; }
.f-input {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r);
  padding: 7px 10px; font-size: 12px; color: var(--c-text); outline: none;
}
.f-input:focus { border-color: var(--c-primary); }

/* ─── Spinner ────────────────────────────────────────────── */
.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--c-border); border-top-color: var(--c-primary);
  border-radius: 50%; animation: rot .6s linear infinite; vertical-align: middle;
}
@keyframes rot { to { transform: rotate(360deg); } }

/* ─── Empty ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 40px 16px; color: var(--c-text-2); }
.empty svg { width: 28px; height: 28px; margin-bottom: 10px; opacity: .35; }
.empty p { font-size: 12px; }

/* ─── Skeleton loading ───────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, var(--c-border) 25%, var(--c-border-2) 50%, var(--c-border) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite;
  border-radius: 4px;
}
@keyframes skel-shimmer { to { background-position: -200% 0; } }
.skel-line { height: 12px; margin: 6px 0; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-line.w40 { width: 40%; }
.skel-val  { height: 28px; width: 80px; margin: 4px 0; }

/* ─── Toast notifications ────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: var(--r);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  pointer-events: all; max-width: 320px;
  animation: toast-in .25s ease; transition: opacity .3s ease;
}
.toast.info    { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); }
.toast.success { background: var(--c-green-s); border: 1px solid #bbf7d0; color: var(--c-green); }
.toast.warn    { background: var(--c-amber-s); border: 1px solid #fde68a; color: var(--c-amber); }
.toast.error   { background: var(--c-red-s); border: 1px solid #fecaca; color: var(--c-red); }
.toast svg     { width: 15px; height: 15px; flex-shrink: 0; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }


/* ─── Mobile responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Hamburger drives the nav; the desktop collapse toggle is irrelevant here */
  .menu-burger { display: flex; }
  .side-toggle { display: none !important; }

  /* Sidebar becomes an off-canvas drawer (full labels, not the icon rail) */
  .sidebar,
  .sidebar.collapsed { width: 260px !important; transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.6); }
  /* Always show labels inside the drawer, ignoring the .collapsed rules */
  .sidebar .nav-text,
  .sidebar .side-btn span        { display: inline !important; }
  .sidebar .side-label,
  .sidebar .side-game-name       { display: block !important; }
  .sidebar .side-game-arrow      { display: inline-block !important; }
  .sidebar .nav-item,
  .sidebar .side-btn             { justify-content: flex-start !important; padding: 8px 14px !important; }
  .sidebar .side-game            { justify-content: flex-start !important; }
  .sidebar .side-section         { padding: 14px 10px 4px !important; }

  /* Content takes the full width on mobile (sidebar becomes a drawer) */
  .main, .main.expanded { margin-left: 0 !important; }
  .site-footer { margin-left: 0 !important; }
  .content { padding: 14px 12px; }

  .grid-2 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  .game-banner-img { display: none; }

  /* Inline-styled elements added later — overridden here for mobile */
  #topbar-nav { display: none !important; }            /* nav lives in the drawer */
  #topbar-clock { display: none !important; }
  #brand-text { font-size: 15px !important; letter-spacing: 1px !important; }
  .topbar { padding: 0 10px !important; gap: 8px !important; }
  #float-stats { display: none !important; }

  /* ════ Mobile sizing pass: everything fits / stacks vertical ════ */
  /* Media never exceeds the viewport */
  .content img { max-width: 100% !important; height: auto; }
  .content canvas { max-width: 100% !important; }
  /* Root-cause fix: let flex/grid children shrink below their content size */
  .content [style*="display:flex"] > *,
  .content [style*="display:grid"] > * { min-width: 0; }
  /* Fixed-width flex children must be allowed to shrink */
  .content [style*="flex-shrink:0"] { flex-shrink: 1 !important; }

  /* ── First line: restart-timer / market info bar → compact ── */
  #market-info-bar { padding: 8px 12px !important; }
  #market-info-bar > [style*="width:1px"] { display: none !important; }   /* vertical divider */
  #market-info-bar [style*="gap:18px"] { gap: 14px !important; width: 100%; justify-content: space-between; margin-top: 8px; }

  /* ── Search & Filters → stack ── */
  .mkt-toolbar { flex-wrap: wrap; }
  .mkt-toolbar .input-search { flex: 1 1 100% !important; }

  /* ── iOS Safari fixes ── */
  html { -webkit-text-size-adjust: 100%; }
  .tbl-wrap, .scan-items-list, .sidebar { -webkit-overflow-scrolling: touch; }
  a, button { -webkit-tap-highlight-color: transparent; }
  input, select { -webkit-appearance: none; border-radius: var(--r); }

  /* ── Topbar brand: escala con el ancho de pantalla ── */
  #brand-text {
    font-size: clamp(11px, 3.5vw, 15px) !important;
    letter-spacing: clamp(0px, 0.4vw, 1px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 110px) !important;
  }
  .topbar > div:first-of-type { flex-shrink: 1 !important; min-width: 0; }
  .topbar img { height: 30px !important; flex-shrink: 0; }

  /* ── Filtros: ocultar separadores verticales, wrap ── */
  #filter-chips-row > div[style*="width:1px"] { display: none !important; }
  #filter-chips-row { row-gap: 8px !important; }
}

/* ─── Mobile portrait stacking (≤768px, taller than wide) ────
   On phones, portrait is blocked by the mobile gate; these rules still serve
   narrow desktop windows / tablets. In landscape — the only mobile mode — the
   multi-column desktop layout is preserved (see the landscape blocks below):
   stacking it there hid 2 of the 3 trends/velocity columns and wrecked the
   item-detail modal on phones narrower than ~770px. */
@media (max-width: 768px) and (orientation: portrait) {
  .exp-main { flex-direction: column !important; }

  /* ── Game-stats strip (Players + 4 stats) → 2-up, smaller number ── */
  #gs-players { font-size: 26px !important; }
  .content [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; row-gap: 12px; }
  .content [style*="grid-template-columns:repeat(4,1fr)"] > * { border-right: none !important; padding: 0 8px !important; }

  /* ── Trend containers → smaller reserved height on mobile ── */
  #trend-up, #trend-down, #trend-flat { min-height: 160px; }

  /* ── Top Items / Market Trends / Market Activity → ONE column ── */
  #trends-section   [style*="grid-template-columns"],
  #velocity-section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #trends-section   [style*="border-right"],
  #velocity-section [style*="border-right"] { border-right: none !important; border-bottom: 1px solid var(--c-border) !important; }
  /* Card grids (rotation / volume cards) → one card per row */
  .content [style*="minmax(132px"],
  .content [style*="minmax(110px"] { grid-template-columns: 1fr !important; }

  /* ── Rarity → table on top, donut below (with real height) ── */
  #rarity-section [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 16px !important; }
  #rarity-section [style*="min-height:220px"][style*="flex:1"] { min-height: 190px !important; flex: 0 0 190px !important; }

  /* ── Donut chart (analysis) → smaller ── */
  .content [style*="width:220px"][style*="height:220px"] { width: 168px !important; height: 168px !important; }

  /* ── Charts → shorter on phones ── */
  .chart-area { height: 180px !important; }

  /* ── Expandable item panel (.exp-detail) → stack vertically ── */
  .exp-detail { flex-direction: column !important; }
  .exp-detail > * { width: 100% !important; }
  .exp-detail [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Expandable item panel (.exp-main) → card, KPIs, chart, then
        Market activity — all stacked full-width ── */
  .exp-main { flex-direction: column !important; min-height: 0 !important; }
  .exp-main > * { width: 100% !important; }
  .exp-kpi { grid-template-columns: repeat(4, 1fr) !important; }
  .exp-main [style*="min-height:160px"] { flex-direction: column !important; }
  .exp-main [style*="min-height:160px"] > * { width: 100% !important; }
  .exp-main [style*="min-height:160px"] > [style*="position:relative"] { min-height: 190px !important; }
  #dist-body-idp { min-height: 150px; }

  /* ── Game banner: apila imagen arriba, contenido abajo ── */
  #game-banner { flex-direction: column !important; }
  #game-banner-img {
    width: 100% !important;
    height: clamp(120px, 35vw, 200px) !important;
    flex-shrink: 1 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--c-border) !important;
  }
  #game-banner-content { padding: 16px 14px !important; gap: 10px !important; }
  #game-banner-name {
    font-size: clamp(22px, 7vw, 42px) !important;
    letter-spacing: clamp(0px, 1vw, 3px) !important;
  }
  #players-pill { padding: 10px 20px !important; }
  #gs-players { font-size: clamp(28px, 8vw, 40px) !important; }

  /* ── About sections list: 1 columna en vertical ── */
  #about-sections-list { grid-template-columns: 1fr !important; }
}

/* ── Extra small phones (<380px) ── */
@media (max-width: 380px) {
  :root { --topbar-h: 58px; }
  .topbar { padding: 0 8px !important; gap: 6px !important; }
  .topbar img { height: 26px !important; }
  #brand-text { font-size: 10px !important; letter-spacing: 0 !important; }
  .content { padding: 10px 8px; }
  .kpi-value { font-size: 20px; }
  .exp-kpi { grid-template-columns: repeat(2, 1fr) !important; }
  #players-pill { padding: 8px 14px !important; }
}

/* ─── Info bar ───────────────────────────────────────────── */
.info-bar {
  background: var(--c-primary-s); border: 1px solid rgba(88,166,255,.2); border-radius: var(--r);
  padding: 9px 13px; font-size: 12px; color: var(--c-primary);
  display: flex; align-items: center; gap: 7px; margin-bottom: 14px;
}
.info-bar svg { width: 14px; height: 14px; flex-shrink: 0; }
.info-bar a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ─── 2-col ──────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── Sidebar inventory grid ─────────────────────────────── */
.inv-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; padding: 4px 6px 8px; }
.inv-slot {
  aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: all .12s;
}
.inv-slot:hover { border-color: rgba(255,255,255,.3); transform: scale(1.06); z-index: 2; }
.inv-slot.inv-selected { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.inv-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.inv-slot .inv-rar-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; }

/* ─── Dark table rows (volume history) ──────────────────── */
.dark-vol td { background: #0F172A !important; color: inherit; }
.dark-vol tbody tr:hover td { background: #1A2235 !important; }

/* ─── Item row open state ────────────────────────────────── */
tr.row-open td { background: #F8FAFC !important; border-bottom: 1px solid var(--c-border) !important; }
tr.row-open td:first-child { border-left: none; }
tr.row-open-head th { background: #1A2235 !important; color: #E2E8F0 !important; position: sticky; top: var(--topbar-h); z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ─── Filter chips ───────────────────────────────────────── */
.filter-chip {
  padding: 3px 11px; border-radius: 20px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--c-border); background: rgba(255,255,255,.03); color: var(--c-text-2);
  cursor: pointer; transition: all .12s;
}
.filter-chip:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-s); }
.filter-chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 0 10px rgba(88,166,255,.4); }

/* ─── Item card (analysis) ───────────────────────────────── */
.icard {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r); padding: 10px 8px; text-align: center;
  cursor: pointer; transition: all .15s;
}
.icard:hover { border-color: var(--c-primary); background: var(--c-primary-s); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.12); }
.icard-img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: rgba(0,0,0,.04); display: block; margin: 0 auto 7px; }
.icard-img-ph { width: 56px; height: 56px; border-radius: 8px; background: rgba(0,0,0,.06); margin: 0 auto 7px; display: flex; align-items: center; justify-content: center; }
.icard-name { font-size: 11px; font-weight: 600; color: var(--c-text); line-height: 1.3; margin-bottom: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.icard-price { font-size: 12px; font-weight: 700; color: var(--c-primary); }
.icard-vol { font-size: 10px; color: var(--c-text-2); margin-top: 2px; }

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

/* ─── Mobile gate — portrait blocked, landscape only ─────── */
#mobile-gate { display: none; }
@media (max-width: 900px) and (orientation: portrait) {
  #mobile-gate {
    display: flex; position: fixed; inset: 0; z-index: 100000;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px 24px;
    background: radial-gradient(circle at 50% 30%, #161E2E, #0D1117 70%);
    color: #E2E8F0; overflow-y: auto;
  }
  body { overflow: hidden; }
  .mg-lang {
    position: absolute; top: 18px; right: 18px;
    display: flex; gap: 8px;
  }
  .mg-lang button {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px; color: #94A3B8; font-size: 12px; font-weight: 600;
    padding: 7px 14px; cursor: pointer; transition: all .15s;
  }
  .mg-lang button.active {
    background: rgba(37,99,235,.2); border-color: #3B82F6; color: #E2E8F0;
  }
  .mg-logo  { height: 52px; width: auto; margin-bottom: 14px; }
  .mg-brand { font-family: 'Orbitron', sans-serif; font-size: 17px; font-weight: 900; letter-spacing: 2px; color: #E2E8F0; margin-bottom: 24px; }
  .mg-emoji { font-size: 52px; margin-bottom: 12px; animation: rotate-hint 2s ease-in-out infinite; }
  .mg-title { font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #60A5FA; margin-bottom: 12px; }
  .mg-text  { font-size: 13px; line-height: 1.6; color: #94A3B8; max-width: 320px; }
  .mg-steps {
    display: flex; flex-direction: column; gap: 10px; margin-top: 22px;
    text-align: left; max-width: 300px; width: 100%;
  }
  .mg-step {
    display: flex; align-items: center; gap: 11px;
    font-size: 12px; color: #CBD5E1; line-height: 1.4;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: 10px 13px;
  }
  .mg-step-n {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: rgba(37,99,235,.18); border: 1px solid rgba(59,130,246,.45);
    color: #60A5FA; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .mg-badge { margin-top: 24px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #64748B; border: 1px solid #263147; border-radius: 20px; padding: 7px 16px; }
}
@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  30%       { transform: rotate(90deg); }
  70%       { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .mg-emoji { animation: none; } }

/* ─── Mobile landscape (phones horizontal ≤500px tall) ─────── */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --topbar-h:  66px;
    --sidebar-w: 0px;
    --ticker-h:  24px;
  }

  /* Topbar: FIXED (normal), two rows, 66px total */
  .topbar {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    padding: 0 10px !important;
    gap: 0 !important;
    height: 66px !important;
    overflow: hidden;
  }

  /* Row 1 (44px): hamburger pinned left, logo+brand centered */
  .menu-burger {
    display: flex !important;
    position: absolute !important;
    left: 10px !important;
    top: 22px !important;
    transform: translateY(-50%) !important;
    z-index: 201;
  }
  .topbar > div:not(#topbar-nav) {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
  }
  #brand-text  { font-size: 13px !important; letter-spacing: 1px !important; }
  .topbar img  { height: 24px !important; }
  .side-toggle { display: none !important; }

  /* Row 2 (22px): sections centered, small */
  #topbar-nav {
    order: 10 !important;
    width: 100% !important;
    flex: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    background: rgba(0,0,0,.15) !important;
    overflow: hidden;
  }
  #topbar-nav > a,
  #topbar-nav > span {
    font-size: 7px !important;
    padding: 2px 5px !important;
    letter-spacing: .3px !important;
  }
  #topbar-nav > span > span { font-size: 5px !important; padding: 0 2px !important; }
  #topbar-nav > button#lang-toggle {
    font-size: 7px !important;
    padding: 2px 5px !important;
    margin-left: 4px !important;
    gap: 2px !important;
  }
  #topbar-nav > button#lang-toggle svg { width: 8px !important; height: 8px !important; }
  #topbar-clock {
    display: inline !important;
    font-size: 8px !important;
    margin-left: 6px !important;
    letter-spacing: .8px !important;
  }
  #last-upd-pill, #status-dot, #status-label, #user-pill { display: none !important; }

  /* Sidebar: fully off-canvas until hamburger tap */
  .sidebar,
  .sidebar.collapsed {
    top: 0 !important;
    bottom: 0 !important;
    width: 220px !important;
    transform: translateX(calc(-100% - 4px)) !important;
    box-shadow: none !important;
    border-right: none !important;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.7) !important;
  }

  .main, .main.expanded { margin-left: 0 !important; }
  .site-footer          { margin-left: 0 !important; }
  .content              { padding: 10px 12px; }

  .kpi-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .kpi-value  { font-size: 18px !important; }
  #gs-players { font-size: 32px !important; }
  .chart-area { height: 160px !important; }
  .tbl-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table       { min-width: 520px; }

  /* Modals use the short screen fully */
  .modal-bg { padding: 8px !important; }
  .modal    { max-height: 96vh !important; padding: 14px !important; }
}

/* ── Narrow landscape phones (≤768px wide): keep the desktop multi-column
      layout (3 trend/velocity columns, item modal in a row) but compact it ── */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 768px) {
  /* Item detail modal: KPIs 4+4 instead of 8 in a row; slimmer side panels */
  .exp-kpi { grid-template-columns: repeat(4, 1fr) !important; }
  .exp-main > div[style*="flex-shrink:0"] { width: 140px !important; flex-shrink: 0 !important; }
  .exp-main [style*="width:180px"] { width: 150px !important; }

  /* Game banner stays in a row — just cap the image so content fits */
  #game-banner-img { width: 42% !important; min-width: 0 !important; }
  #game-banner-name { font-size: clamp(24px, 5vw, 44px) !important; }
  #game-banner-content { padding: 14px 12px !important; gap: 10px !important; }
  #gs-players { font-size: clamp(26px, 5vw, 38px) !important; }
  #players-pill { padding: 8px 16px !important; }

  .content { padding: 10px !important; }
}
/* ── Reserve space before async content loads (prevents CLS) ── */
#trend-up, #trend-down, #trend-flat { min-height: 220px; }

/* ══════════════════════════════════════════════════════════════
   INVENTORY SCANNER
══════════════════════════════════════════════════════════════ */
.scan-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed rgba(139,92,246,.35);
  border-radius: 10px; padding: 24px 16px; cursor: pointer;
  background: rgba(139,92,246,.04);
  transition: border-color .15s, background .15s;
  text-align: center;
}
.scan-dropzone:hover { border-color: rgba(139,92,246,.7); background: rgba(139,92,246,.08); }

.scan-items-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow-y: auto;
  padding-right: 4px; margin-bottom: 12px;
}
.scan-item-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px; padding: 7px 10px;
  transition: background .12s;
}
.scan-item-row:hover      { background: rgba(255,255,255,.06); }
.scan-item-row--has       { opacity: .6; }

.scan-add-btn {
  width: 100%; padding: 10px; background: #7C3AED; color: #fff;
  border: none; border-radius: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; letter-spacing: .3px;
  transition: background .15s;
}
.scan-add-btn:hover { background: #6D28D9; }

.scan-build-btn {
  padding: 8px 16px; background: rgba(217,119,6,.18);
  color: #FCD34D; border: 1px solid rgba(217,119,6,.35);
  border-radius: 7px; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.scan-build-btn:hover    { background: rgba(217,119,6,.3); }
.scan-build-btn:disabled { opacity: .55; cursor: default; }