:root{
  --bg:#0a0e16;
  --surface:#121826;
  --surface-2:#1a2233;
  --surface-3:#232d40;
  --line:#232d40;
  --line-soft:#1b2333;
  --ink:#f3f5f9;
  --ink-dim:#c7cdd9;
  --muted:#8b96a8;
  --gold:#f0a83c;
  --green:#34d399;
  --green-dim:rgba(52,211,153,0.12);
  --red:#f87171;
  --red-dim:rgba(248,113,113,0.12);
  --blue:#60a5fa;
  --body:"Inter",sans-serif;
  --mono:"JetBrains Mono",monospace;
  --shell-max:1150px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{width:18px;height:18px;display:block;flex-shrink:0}
button{font-family:inherit}

/* ===== PAGE SHELL ===== */
.page-shell{
  max-width:var(--shell-max);
  margin:0 auto;
  padding:0 1.5rem 2rem;
}

/* ===== BRAND BAR ===== */
#brand-bar{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:0.7rem 0;
}
.brand-inner{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.brand-left{display:flex;align-items:center;gap:0.55rem}
.brand-mark{
  width:34px;height:34px;border-radius:8px;
  background:var(--gold);color:#0a0e16;
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:22px;height:22px;stroke-width:3}
.brand-name{font-size:1.15rem;font-weight:800;letter-spacing:-0.01em}
.brand-tag{
  font-size:1rem;font-weight:600;color:var(--muted);
  letter-spacing:-0.01em;flex:1;text-align:right;
}
.brand-tag .accent{color:var(--gold)}

/* ===== STICKY ZONE (toolbar only) ===== */
#sticky-zone{
  position:sticky;
  top:0;
  z-index:90;
  background:var(--bg);
}

#toolbar{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  padding:0.55rem 0;
}
.toolbar-inner{
  display:flex;
  align-items:center;gap:1rem;flex-wrap:wrap;
}
.search-wrap{
  display:flex;align-items:center;gap:0.5rem;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:0.5rem 0.7rem;color:var(--muted);
  flex:1;min-width:240px;
}
#search-input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-size:0.9rem}
#search-input::placeholder{color:var(--muted)}
#max-price-input{
  width:66px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;
  color:var(--ink);padding:0.28rem 0.4rem;font-family:var(--mono);font-size:0.78rem;text-align:center;
}
.sort-pills{display:flex;gap:0.4rem}
.sort-pill{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-dim);
  font-weight:600;font-size:0.78rem;
  padding:0.42rem 0.9rem;border-radius:7px;cursor:pointer;
  transition:all .15s;
}
.sort-pill:hover{border-color:var(--gold);color:var(--ink)}
.sort-pill.active{background:var(--gold);border-color:var(--gold);color:#0a0e16}
#refresh-btn{
  display:block;width:100%;margin:0.5rem 0 0;
  padding:0.55rem;background:var(--gold);border:none;border-radius:6px;
  color:#0a0e16;font-weight:700;cursor:pointer;
}

/* ===== BODY ===== */
.refresh-status{color:var(--muted);font-size:0.75rem;margin:0.5rem 0}
.loading-indicator{text-align:center;color:var(--muted);padding:18px;display:none;font-size:0.85rem}
.empty-state{color:var(--muted);text-align:center;padding:2rem 1rem;font-size:0.9rem}

/* ===== SINGLE SCROLLABLE TABLE ===== */
.table-scroll{
  width:100%;
  overflow: auto;
  -webkit-overflow-scrolling:touch;
  touch-action: auto;   /* will be dynamically overridden during gestures */
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  max-height: calc(100vh - var(--chrome-h, 140px));
}

#card-table{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:0.82rem;
}

/* Sticky header — freezes under the toolbar */
#card-table thead th{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--surface-2);
  color:var(--muted);
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:0.72rem 0.7rem;
  text-align:center;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  white-space:nowrap;
  user-select:none;
  height:42px;
  vertical-align:middle;
}
#card-table thead th:last-child{border-right:none}
#card-table thead th.th-right{text-align:center}
#card-table thead th.th-left{text-align:center}
#card-table thead th.th-action{text-align:center;padding-left:0.9rem}

#card-table thead th.sortable{cursor:pointer;transition:background .15s,color .15s}
#card-table thead th.sortable:hover{background:var(--surface-3);color:var(--ink)}
#card-table thead th.sortable.active{color:var(--gold);background:var(--surface-3)}
#card-table thead th .arr{
  display:inline-flex;align-items:center;margin-left:0.28rem;color:var(--gold);vertical-align:middle;
}
#card-table thead th .arr svg{width:11px;height:11px}

/* ===== Column widths ===== */
.col-action { width:76px;  }
.col-name   { width:20%;   }
.col-metric { width:10%;   }
.col-price  { width:11%;   }

/* ===== BODY CELLS ===== */
#card-table tbody td{
  padding:0.55rem 0.7rem;
  border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
  background:var(--surface);
  vertical-align:middle;
  font-size:0.82rem;
  height:52px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#card-table tbody td:last-child{border-right:none}
#card-table tbody tr:hover > td{background:var(--surface-2)}
#card-table tbody tr.open > td{background:var(--surface-2);border-bottom-color:transparent}
#card-table tbody tr.open + tr.cards-row > td{border-top:none}

#card-table tbody td.td-right{text-align:center;font-family:var(--mono);font-weight:600;font-size:0.82rem}
#card-table tbody td.td-name{
  font-weight:700;
  font-size:0.85rem;
  padding-left:0.6rem;
  white-space:normal;
  line-height:1.25;
}
#card-table tbody td.td-action{
  text-align:left;
  padding:0.4rem 0.5rem 0.4rem 0.7rem;
  overflow:visible;
  text-overflow:clip;
}
/* ===== FREEZE Action + Player on horizontal scroll ===== */
#card-table thead th.th-action{
  position: sticky;
  left: 0;
  z-index: 26;
  background: var(--surface-2);
}
#card-table tbody td:nth-child(1){
  position: sticky;
  left: 0;
  z-index: 16;
  background: var(--surface);
}

#card-table thead th[data-sort="player"]{
  position: sticky;
  left: 76px;
  z-index: 26;
  background: var(--surface-2);
}
#card-table tbody td:nth-child(2){
  position: sticky;
  left: 76px;
  z-index: 16;
  background: var(--surface);
}

#card-table tbody tr:hover > td:nth-child(1),
#card-table tbody tr:hover > td:nth-child(2){
  background: var(--surface-2);
}
#card-table tbody tr.open > td:nth-child(1),
#card-table tbody tr.open > td:nth-child(2){
  background: var(--surface-2);
}

.cell-name{display:flex;flex-direction:column;gap:0.15rem;min-width:0}
.cell-name .top-line{display:flex;align-items:center;gap:0.35rem;min-width:0}
.cell-name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-name .sub-line{display:flex;align-items:center;gap:0.35rem;font-family:var(--mono);font-size:0.68rem;font-weight:600;color:var(--muted);letter-spacing:0.02em}
.rc-badge{
  background:var(--red-dim);color:var(--red);
  font-size:0.5rem;font-weight:800;letter-spacing:0.05em;
  padding:0.1rem 0.3rem;border-radius:3px;flex-shrink:0;
}
.m-green{color:var(--green)}
.m-red{color:var(--red)}
.m-gold{color:var(--gold)}
.m-blue{color:var(--blue)}
.m-muted{color:var(--muted)}

/* Trend cell: arrow tight to the number */
.trend{
  display:inline-flex;
  align-items:center;
  gap:0.1rem;
  font-family:var(--mono);
  font-weight:600;
}
.trend .t-arr{font-size:0.72rem;line-height:1}

/* ===== VIEW BUTTON ===== */
.view-btn{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  font-weight:600;font-size:0.72rem;
  padding:0.35rem 0.5rem;border-radius:6px;cursor:pointer;
  transition:all .15s;
  display:inline-flex;align-items:center;gap:0.2rem;
}
.view-btn-arrow{
  display:inline-flex;align-items:center;justify-content:center;
}
.view-btn-arrow svg{width:12px;height:12px}
.view-btn:hover{background:var(--gold);border-color:var(--gold);color:#0a0e16}
tr.open .view-btn{background:var(--gold);border-color:var(--gold);color:#0a0e16}

/* ===== CARDS EXPANSION ROW ===== */
tr.cards-row > td{
  padding:0!important;
  background:var(--surface)!important;
  border-right:none!important;
  border-bottom:1px solid var(--line)!important;
}
.cards-inner{padding:1rem 0.9rem 1.1rem;animation:slideDown .18s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.serials-scroll{
  display:flex;gap:0.7rem;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:0.55rem;
}
.serials-scroll::-webkit-scrollbar{height:6px}
.serials-scroll::-webkit-scrollbar-track{background:var(--surface-2);border-radius:6px}
.serials-scroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:6px}

.card-tile{
  flex:0 0 220px;width:220px;min-height:330px;scroll-snap-align:start;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;color:var(--ink);text-decoration:none;
  transition:transform .15s,border-color .15s;cursor:pointer;
  display:flex;flex-direction:column;
}
.card-tile:hover{transform:translateY(-3px);border-color:var(--gold)}
.card-img{
  position:relative;background:#0d1220;aspect-ratio:4/5;width:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.card-img img{max-width:100%;max-height:100%;object-fit:contain}
.card-img .ph{font-size:2rem;color:var(--muted)}
.ebay-icn{
  position:absolute;bottom:0.5rem;right:0.5rem;
  background:rgba(10,14,22,0.92);
  border:1px solid var(--blue);
  color:var(--blue);
  border-radius:5px;
  padding:0.28rem 0.6rem;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.02em;
  white-space:nowrap;
  transition:background .15s,color .15s;
}
.card-tile:hover .ebay-icn{
  background:var(--blue);
  color:#0a0e16;
}
.card-body{padding:0.55rem 0.65rem 0.6rem;display:flex;flex-direction:column;gap:0.3rem;flex:1}
.card-title{
  font-size:0.72rem;font-weight:600;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid var(--line);padding-top:0.4rem;margin-top:auto;
}
.card-foot .col{display:flex;flex-direction:column}
.card-foot .lbl{font-size:0.45rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em}
.card-foot .val{font-family:var(--mono);font-size:0.76rem;font-weight:600}
.card-foot .val.gold{color:var(--gold)}

.affiliate-disclaimer{
  padding:1rem 0;margin:1.5rem auto 0;border-top:1px solid var(--line);
  font-size:0.7rem;color:var(--muted);text-align:center;line-height:1.6;
}

/* ===== MOBILE — smaller padding, tighter fonts, native scroll ===== */
@media (max-width:820px){
  .page-shell{padding:0 0.5rem 1.5rem}
  .brand-name{font-size:1rem}
  .brand-tag{font-size:0.82rem;text-align:center;flex-basis:100%}

  #toolbar{padding:0.4rem 0}
  .toolbar-inner{gap:0.5rem}
  .search-wrap{padding:0.4rem 0.55rem;min-width:0;flex:1 1 100%}
  #search-input{font-size:0.82rem}
  #max-price-input{width:56px;font-size:0.72rem}
  .sort-pills{display:flex;gap:0.35rem;flex:1 1 100%}
  .sort-pill{font-size:0.7rem;padding:0.35rem 0.5rem;flex:1;text-align:center}

  /* Table keeps its 900px min-width — user scrolls horizontally */
  #card-table{min-width:0}
  #card-table thead th{font-size:0.56rem;padding:0.1rem 0.05rem;height:32px}
  #card-table tbody td{padding:0.1rem 0.05rem;font-size:0.72rem;height:48px}
  #card-table tbody td.td-name{font-size:0.78rem;padding-left:0.3rem}
 #card-table thead th.th-action{
  text-align:center;
  padding-left:0.1rem;
  padding-right:0.1rem;
  white-space:nowrap;
  overflow:hidden;
}
  #card-table thead th[data-sort="player"],
  #card-table tbody td:nth-child(2){
    left: 48px !important;
  }
#card-table tbody td.td-action{
  text-align:center;
  padding:0.1rem 0.1rem 0.1rem 0.1rem;
  overflow:hidden;
  text-overflow:clip;
  white-space:nowrap;
}

  .cell-name .sub-line{font-size:0.62rem}

  /* Slightly smaller columns for mobile so more fits before scroll */
  .col-action { width:70px  !important }
  .col-name   { width:140px !important }
  .col-metric { width:65px  !important }
  .col-price  { width:80px  !important }

  .view-btn{font-size:0.66rem;padding:0.35rem 0.4rem;gap:0.28rem}
  .view-btn-arrow svg{width:11px;height:11px}

  /* Cards */
  .cards-inner{padding:0.7rem 0.5rem 0.8rem}
  .serials-scroll{gap:0.5rem}
  .card-tile{flex:0 0 180px;width:180px;min-height:265px}
  .card-title{font-size:0.64rem;line-height:1.25}
  .card-body{padding:0.42rem 0.5rem 0.5rem}
  .card-foot .val{font-size:0.72rem}
  .ebay-icn{font-size:0.56rem;padding:0.22rem 0.45rem}
}