:root{
  --bg: #0f141c;
  --panel: #151a22;
  --text: #f2f5f9;
  --muted: #9fb0c3;
  --brand: #ffd166;
  --accent: #ff9b2f;
  --danger: #ff6b6b;
  --ring: rgba(255, 209, 102, 0.45);
  --shadow: 0 12px 28px rgba(0,0,0,.45);
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1000px 600px at 10% -10%, #142033 0, transparent 60%), 
              radial-gradient(900px 500px at 120% 0%, #1b2b3f 0, transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.45;
}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,12,16,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(16px, 5vw, 32px);
}
.brand img{height:28px}
.nav{display:flex; gap:16px; align-items:center}
.nav-link{padding:8px 12px; border-radius:10px; color:var(--text)}
.nav-link:hover{background:rgba(255,255,255,.06)}
.cart-count-badge{
  display:inline-block; min-width:22px; padding:3px 7px; border-radius:999px;
  background:var(--accent); color:#052014; font-weight:700; text-align:center; font-size:12px; margin-left:6px;
}
#app{padding: clamp(16px, 4vw, 32px)}
.hero{ text-align:center; padding: 64px 0 40px }
.hero h1{font-size: clamp(28px, 5vw, 52px); margin:0 0 8px}
.hero p{color:var(--muted); margin:0 0 24px}
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; background:var(--panel);
  border:1px solid rgba(255,255,255,.08); color:var(--text); font-weight:700; box-shadow:var(--shadow); }
.btn.primary{ background: linear-gradient(135deg, var(--brand), var(--accent)); color:#1a1203; }

.toolbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:14px }
.filters{display:flex; gap:10px; flex-wrap:wrap}
.filters label{display:flex; gap:8px; align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:8px 10px; border-radius:12px}
.filters select, .filters input{background:transparent; color:var(--text); border:none; outline:none}
.search input{width: min(70vw, 360px); padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.04); color:var(--text)}
.sorter{ margin-left: auto; color: var(--muted) }
.sorter select{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:6px 10px }

.game-bar,.category-bar,.subfilter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px }
.game-pill,.cat-pill,.sub-pill{ border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none }
.game-pill.active,.cat-pill.active,.sub-pill.active{ background: linear-gradient(135deg, var(--brand), var(--accent)); color:#1a1203; font-weight:800 }
.sealed-toggle{ margin: 4px 0 10px; color: var(--muted) }

.grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)) }
.card{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display:flex; flex-direction:column }
.card .thumb{ aspect-ratio: 3/4; background:#10131a; display:flex; align-items:center; justify-content:center }
.card .thumb img{ max-width:100%; max-height:100% }
.card .body{ padding:12px }
.card h4{ margin:0 0 4px; font-size:16px }
.card .sub{ color:var(--muted); font-size:12px; margin-bottom:8px }
.price-row{ display:flex; align-items:center; justify-content:space-between; gap:6px }
.price{ font-weight:800; font-size:18px }
.stock{ font-size:12px; color:var(--muted) }
.add-row{ display:flex; gap:8px; margin-top:10px }
.qty{ width:64px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--text) }

.badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.badge{ font-size: 11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04) }
.badge.common{ border-color: rgba(255,255,255,.06) }
.badge.uncommon{ background: rgba(122, 162, 247, .12); border-color: rgba(122,162,247,.35) }
.badge.rare{ background: rgba(250, 176, 5, .12); border-color: rgba(250,176,5,.35) }
.badge.super-rare{ background: rgba(216, 85, 255, .12); border-color: rgba(216,85,255,.35) }
.badge.ultra-rare{ background: rgba(255, 155, 47, .12); border-color: rgba(255,155,47,.35) }
.badge.secret-rare{ background: rgba(255, 93, 99, .12); border-color: rgba(255,93,99,.35) }
.badge.mythic-rare{ background: rgba(255, 93, 99, .18); border-color: rgba(255,93,99,.45) }

.cart-table{width:100%; border-collapse:separate; border-spacing:0 8px}
.cart-table th{color:var(--muted); font-weight:600; text-align:left; font-size:12px}
.cart-table td{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:12px; border-left:none; border-right:none}
.cart-table tr td:first-child{border-radius:12px 0 0 12px; border-left:1px solid rgba(255,255,255,.06)}
.cart-table tr td:last-child{border-radius:0 12px 12px 0; border-right:1px solid rgba(255,255,255,.06)}

.totals{ margin: 8px 0 16px; display:grid; gap:8px; max-width:420px }
.totals > div{display:flex; align-items:center; justify-content:space-between}
.totals .grand{font-size:20px; font-weight:800}

.site-footer{ padding:22px clamp(16px, 5vw, 32px); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.06); color:var(--muted) }
.hidden{ display:none }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:10px }