:root {
  /* POKEMON LIGHT THEME (default) — clean whites, pokemon red, yellow accents, charcoal ink.
     Classic Pokemon trading-card aesthetic: bright card surfaces on soft grey canvas. */

  /* Surface tokens */
  --bg:        #f1f3f9;
  --bg-2:      #e9ecf4;
  --panel:     #ffffff;
  --panel-2:   #f7f8fc;
  --panel-3:   #eaedf5;
  --border:    #d6dae8;
  --border-2:  #a9b1cc;

  /* Text */
  --text:      #1a1d29;
  --text-2:    #4a5068;
  --muted:     #7a8099;

  /* Brand — Pokemon red, yellow, charcoal */
  --accent:    #ee1515;   /* classic pokemon red */
  --accent-2:  #ffcb05;   /* pikachu yellow */
  --accent-3:  #2d2d38;   /* ink charcoal */

  /* Rarity — kept consistent across themes so card borders read the same */
  --common:    #8a8fa8;
  --uncommon:  #2db86a;
  --rare:      #3282c9;
  --holo:      #9340d4;
  --ultra:     #e67a1a;
  --secret:    #d4a80e;

  /* Pokemon type palette */
  --type-grass:     #78c850;
  --type-fire:      #f08030;
  --type-water:     #6890f0;
  --type-electric:  #f8d030;
  --type-psychic:   #f85888;
  --type-fighting:  #c03028;

  /* Status */
  --success:   #1f9d5a;
  --warn:      #e67a1a;
  --danger:    #ee1515;

  /* Surface overlays — tuned so hover highlights work on light surfaces */
  --overlay-hover:   rgba(0,0,0,0.04);
  --overlay-active:  rgba(0,0,0,0.08);
  --elevate-fill:    rgba(255,255,255,0.6);

  /* Geometry + timing */
  --radius:     14px;
  --radius-sm:  8px;
  --radius-lg:  20px;
  --ease:       cubic-bezier(.2,.9,.3,1.08);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* Shadows — softer on light bg */
  --shadow-sm:  0 2px 8px rgba(30,40,80,0.08);
  --shadow-md:  0 12px 28px rgba(30,40,80,0.14);
  --shadow-lg:  0 24px 50px rgba(30,40,80,0.2);
  --shadow-glow: 0 0 32px rgba(238,21,21,0.18);

  /* Font */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* GX DARK THEME — purple/grey/black for the "GX mode" toggle */
:root[data-theme="gx"] {
  --bg:        #0a0818;
  --bg-2:      #130f2a;
  --panel:     #1a1533;
  --panel-2:   #221c44;
  --panel-3:   #2d2558;
  --border:    #3a3270;
  --border-2:  #4d4490;

  --text:      #ecebf6;
  --text-2:    #c4bfdf;
  --muted:     #8e87b5;

  --accent:    #a78bfa;   /* GX purple */
  --accent-2:  #ff4d7a;   /* GX magenta-red */
  --accent-3:  #5cd7ff;   /* GX cyan */

  --common:    #aab1d2;
  --uncommon:  #45d7a3;
  --rare:      #4aa3ff;
  --holo:      #b463ff;
  --ultra:     #ff9b3d;
  --secret:    #ffd84a;

  --success:   #58e6a0;
  --warn:      #ff9b3d;
  --danger:    #ff5c6b;

  --overlay-hover:   rgba(255,255,255,0.05);
  --overlay-active:  rgba(255,255,255,0.09);
  --elevate-fill:    rgba(255,255,255,0.04);

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 14px 34px rgba(0,0,0,0.55);
  --shadow-lg:  0 30px 70px rgba(0,0,0,0.68);
  --shadow-glow: 0 0 40px rgba(167,139,250,0.32);
}

* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
body {
  min-height: 100vh;
  background: var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Pokemon light mode — pokeball monogram pattern tiled at low opacity */
:root:not([data-theme="gx"]) body {
  background-image:
    radial-gradient(1000px 500px at 0% -10%, rgba(238,21,21,0.06), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(255,203,5,0.08), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g transform='translate(36 36)' fill='none' stroke='%23222' stroke-width='1.3' opacity='0.09'><circle r='14'/><line x1='-14' y1='0' x2='14' y2='0'/><circle r='4' fill='%23fff' opacity='1' stroke-width='1.6'/></g></svg>");
  background-size: auto, auto, 72px 72px;
  background-position: 0 0, 100% 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* GX mode — purple/cyan radial glows over deep navy */
:root[data-theme="gx"] body {
  background-image:
    radial-gradient(1400px 700px at 8% -10%, rgba(167,139,250,0.16), transparent 55%),
    radial-gradient(1200px 600px at 105% 5%, rgba(92,215,255,0.12), transparent 58%),
    radial-gradient(900px 500px at 100% 110%, rgba(255,77,122,0.10), transparent 55%);
  background-attachment: fixed, fixed, fixed;
}
:root[data-theme="gx"] body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

body > * { position: relative; z-index: 1; }

/* dis-bet cross-promo banner — dismissable, sits between ticker and main */
.disbet-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 18%, var(--panel)) 0%,
    color-mix(in oklab, var(--accent-2) 18%, var(--panel)) 100%);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.disbet-banner.hidden { display: none; }
.db-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 10px var(--danger);
  animation: db-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes db-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.6; transform: scale(1.3); }
}
.disbet-banner strong { color: var(--accent); font-weight: 800; letter-spacing: 0.3px; }
.db-link {
  margin-left: auto;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent); color: white;
  text-decoration: none; font-weight: 700; font-size: 12px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 40%, transparent);
}
.db-link:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in oklab, var(--accent) 55%, transparent); }
.db-close {
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: 12px;
}
.db-close:hover { color: var(--text); background: var(--overlay-hover); }

/* Site footer */
.site-footer {
  margin-top: 60px; padding: 32px 28px 40px;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  display: flex; flex-direction: column; gap: 14px;
  max-width: 1400px; margin-left: auto; margin-right: auto;
  font-size: 13px; color: var(--muted);
}
.sf-brand { display: flex; align-items: center; gap: 10px; }
.sf-brand .brand-mark { width: 24px; height: 24px; }
.sf-name { font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.sf-sep { color: var(--muted); opacity: 0.6; }
.sf-parent strong { color: var(--accent); }
.sf-links { display: flex; gap: 20px; flex-wrap: wrap; }
.sf-links a {
  color: var(--text-2); text-decoration: none;
  transition: color .15s;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.sf-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sf-small {
  font-size: 11px; line-height: 1.6; color: var(--muted); max-width: 900px;
}
.sf-small a { color: var(--text-2); }

/* Legal pages */
.legal-block {
  max-width: 780px; padding: 28px 32px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.legal-block h3 {
  color: var(--text); margin: 22px 0 8px;
  font-size: 16px; font-weight: 700;
}
.legal-block h3:first-child { margin-top: 0; }
.legal-block p, .legal-block ul { color: var(--text-2); line-height: 1.65; font-size: 14px; }
.legal-block ul { padding-left: 22px; }
.legal-block li { margin-bottom: 6px; }
.legal-block b { color: var(--text); }
.legal-block a { color: var(--accent); }

/* Pokeball loading spinner — use anywhere with `<span class="pokeball-spin"></span>` */
.pokeball-spin {
  display: inline-block;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(180deg, #ff4757 0%, #ff4757 48%, #111 48%, #111 52%, #f4f6fb 52%, #f4f6fb 100%);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.25), inset 2px 2px 4px rgba(255,255,255,0.25);
  position: relative;
  animation: pb-roll 1.2s ease-in-out infinite;
}
.pokeball-spin::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #fff, #e1e4ec 60%, #8a8fa8);
  box-shadow: 0 0 0 1.5px #111;
}
@keyframes pb-roll {
  0%   { transform: rotate(0) translateY(0); }
  25%  { transform: rotate(90deg) translateY(-3px); }
  50%  { transform: rotate(180deg) translateY(0); }
  75%  { transform: rotate(270deg) translateY(-3px); }
  100% { transform: rotate(360deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pokeball-spin { animation: pb-roll 3s linear infinite; }
}

/* Scrollbars — match theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* Page transition — every #app re-render gets a subtle fade-in */
#app > * { animation: app-fade-in .28s var(--ease-out); }
@keyframes app-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #app > * { animation: none; }
}

/* Typography scale */
.page-title {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700; letter-spacing: -0.5px;
  margin: 0 0 4px;
  background: linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.mono { font-family: var(--font-mono); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
}
.brand { display: flex; align-items: center; gap: 12px; }
/* Pokeball-inspired mark. CSS-only, no image. */
.brand-mark {
  width: 32px; height: 32px; border-radius: 50%;
  position: relative;
  background: linear-gradient(180deg, #ff4757 0%, #ff4757 48%, #111 48%, #111 52%, #f4f6fb 52%, #f4f6fb 100%);
  box-shadow: 0 4px 14px rgba(255,71,87,0.35), inset -3px -3px 6px rgba(0,0,0,0.25), inset 3px 3px 6px rgba(255,255,255,0.25);
  transition: transform .2s var(--ease-spring);
}
.brand-mark::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #fff, #e1e4ec 40%, #8a8fa8 80%);
  box-shadow: 0 0 0 2px #111, 0 0 0 3px rgba(255,255,255,0.6);
}
.brand:hover .brand-mark {
  transform: rotate(-12deg) scale(1.08);
}
/* Gentle idle bob so the pokeball feels alive */
.brand-mark { animation: brand-bob 3.4s ease-in-out infinite; }
@keyframes brand-bob {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-2px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark { animation: none; }
}
.brand-name {
  font-weight: 800; font-size: 22px; letter-spacing: -0.5px;
  font-variant-ligatures: no-common-ligatures;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 0 rgba(0,0,0,0); /* prevent subpixel blur on some engines */
  position: relative;
  padding-right: 4px;
}
.brand-name::after {
  content: '™';
  position: absolute; top: 2px; right: -10px;
  font-size: 9px; font-weight: 600;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  letter-spacing: 0;
}
.nav { display: flex; gap: 4px; }
.nav a {
  font-size: 14px; color: var(--muted);
  padding: 8px 14px; border-radius: 8px;
  transition: color .15s, background .15s;
  position: relative;
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav a.active { color: var(--text); background: rgba(138,109,255,0.12); }
.nav a.active::after {
  content: ''; position: absolute;
  left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 20px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(138,109,255,0.6);
}

.wallet { display: flex; align-items: center; gap: 14px; }
.shards {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.s-icon {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff5c0, var(--secret) 60%, #b98600);
  box-shadow: 0 0 8px rgba(255,216,74,0.7);
}
.username { font-size: 13px; color: var(--muted); }
.daily-btn {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: #1a1432; border: 0; padding: 7px 14px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
  box-shadow: 0 6px 22px rgba(74,163,255,0.38), inset 0 0 0 1px rgba(255,255,255,0.2);
  transition: transform .1s, box-shadow .2s;
  animation: daily-pulse 2.4s var(--ease-out) infinite;
}
@keyframes daily-pulse {
  0%,100% { box-shadow: 0 6px 22px rgba(74,163,255,0.38), inset 0 0 0 1px rgba(255,255,255,0.2); }
  50%     { box-shadow: 0 6px 32px rgba(255,210,74,0.55), inset 0 0 0 1px rgba(255,255,255,0.28); }
}
@media (prefers-reduced-motion: reduce) { .daily-btn { animation: none; } }
.daily-btn:hover { transform: translateY(-1px); }
.db-streak {
  margin-left: 4px; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,155,61,0.25); font-size: 11px; color: #ffd4a8;
  font-weight: 700;
}
.hidden { display: none !important; }

/* Main */
main { padding: 36px 28px 96px; max-width: 1400px; margin: 0 auto; }

/* Landing hero */
.landing-hero {
  display: none; margin-bottom: 28px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(800px 400px at 80% -20%, rgba(255,155,61,0.18), transparent 55%),
    radial-gradient(600px 300px at 10% 110%, rgba(138,109,255,0.18), transparent 50%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-2);
  overflow: hidden;
  position: relative;
}
.landing-hero.shown { display: block; }
.lh-inner {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px;
  padding: 32px 36px;
  align-items: center;
}
.lh-copy .lh-kicker {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-3); font-weight: 700;
  margin-bottom: 8px;
}
.lh-title {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 700;
  margin: 0 0 6px; letter-spacing: -0.3px;
  background: linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lh-sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.lh-cards {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.lh-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; min-width: 140px;
  animation: lh-slide-in .6s var(--ease-spring) both;
}
.lh-trainer { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.lh-amount {
  font-size: 20px; font-weight: 700; color: var(--secret);
  font-variant-numeric: tabular-nums; line-height: 1;
  text-shadow: 0 0 20px rgba(255,216,74,0.3);
}
.lh-pack { font-size: 11px; color: var(--muted); margin-top: 6px; text-transform: capitalize; }
@keyframes lh-slide-in {
  from { transform: translateY(14px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@media (max-width: 760px) {
  .lh-inner { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
  .lh-cards { justify-content: flex-start; }
}

/* RTP meter (Fair page) */
.rtp-meter { margin-top: 12px; }
.rtp-scale {
  position: relative; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  overflow: visible;
}
.rtp-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--success), var(--accent-2), var(--secret));
  transition: width .8s var(--ease-out);
}
.rtp-target {
  position: absolute; top: -6px; bottom: -6px; width: 2px;
  background: var(--text); box-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.rtp.on-target { color: var(--success); }
.rtp.over      { color: var(--secret); }
.rtp.under     { color: var(--warn); }

/* Onboarding overlay */
.onboarding-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  z-index: 80;
  opacity: 0; transition: opacity .24s;
}
.onboarding-overlay.open { opacity: 1; }
.onboarding-overlay.closing { opacity: 0; }
.ob-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  padding: 36px 40px;
  width: min(520px, 92vw); position: relative;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(138,109,255,0.25);
  transform: scale(0.92);
  transition: transform .3s var(--ease-spring);
}
.onboarding-overlay.open .ob-card { transform: scale(1); }
.ob-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
}
.ob-close:hover { color: var(--text); }
.ob-mark {
  width: 48px; height: 48px; border-radius: 14px;
  background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  box-shadow: 0 0 30px rgba(138,109,255,0.5);
  margin-bottom: 18px;
}
.ob-card h2 {
  margin: 0 0 6px; font-size: 28px; font-weight: 700; letter-spacing: -0.4px;
  background: linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ob-steps {
  margin: 18px 0 24px; padding-left: 22px;
  color: var(--text-2); line-height: 1.55; display: grid; gap: 10px;
}
.ob-steps b { color: var(--text); }
.ob-steps a { color: var(--accent); }
.ob-actions { display: flex; justify-content: flex-end; }

/* How it works */
.how-it-works {
  margin-top: 36px; padding: 22px 26px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.how-it-works h3 { margin: 0 0 14px; font-size: 18px; }
.how-it-works ol {
  margin: 0; padding-left: 20px; display: grid; gap: 10px;
  color: var(--text-2); line-height: 1.5;
}
.how-it-works ol li b { color: var(--text); }
.how-it-works a { color: var(--accent); }

/* Home / Rip tier picker */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tier-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; position: relative; overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .3s;
  box-shadow: var(--shadow-sm);
}
.tier-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(400px 200px at 50% -10%, rgba(138,109,255,0.08), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.tier-card:hover {
  transform: translateY(-5px);
  border-color: rgba(138,109,255,0.6);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.tier-card:hover::before { opacity: 1; }
.tier-card .tier-name { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.tier-card .tier-cost { color: var(--secret); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.tier-card .tier-viz {
  height: 160px; border-radius: 10px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.tier-card.starter .tier-viz { background: linear-gradient(135deg, #1b2f3a, #0d1a22); }
.tier-card.premium .tier-viz { background: linear-gradient(135deg, #2d1f3f, #14092a); }
.tier-card.elite .tier-viz   { background: linear-gradient(135deg, #3f1f1f, #2a0a1a); }

/* 3-card fan preview — replaces the SVG pack mock */
.tier-viz-fan {
  overflow: hidden;
  padding: 18px 12px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 900px;
}
.tv-fan {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}
.tv-fan-card {
  width: 78px; height: 108px;
  border-radius: 6px; overflow: hidden;
  position: absolute;
  box-shadow: 0 10px 24px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform .35s var(--ease-spring), box-shadow .3s;
  background: #0a0a12;
}
.tv-fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fan angles — middle card slightly forward */
.tv-fan-0 { transform: translateX(-58px) rotate(-14deg) translateZ(-20px); }
.tv-fan-1 { transform: translateX(0)    rotate(0deg)   translateZ(10px); z-index: 2; }
.tv-fan-2 { transform: translateX(58px) rotate(14deg)  translateZ(-20px); }

.tier-card:hover .tv-fan-0 { transform: translateX(-80px) translateY(-6px) rotate(-20deg) translateZ(0); }
.tier-card:hover .tv-fan-1 { transform: translateX(0)    translateY(-14px) rotate(0deg)   translateZ(30px); }
.tier-card:hover .tv-fan-2 { transform: translateX(80px) translateY(-6px)  rotate(20deg)  translateZ(0); }

/* Rarity-specific glow on the fanned cards */
.tier-viz-fan.r-rare .tv-fan-card   { box-shadow: 0 10px 26px rgba(0,0,0,0.7), 0 0 16px rgba(74,163,255,0.3); }
.tier-viz-fan.r-holo .tv-fan-card   { box-shadow: 0 10px 26px rgba(0,0,0,0.7), 0 0 22px rgba(180,99,255,0.4); }
.tier-viz-fan.r-ultra .tv-fan-card  { box-shadow: 0 10px 26px rgba(0,0,0,0.7), 0 0 28px rgba(255,155,61,0.5); }
.tier-viz-fan.r-secret .tv-fan-card { box-shadow: 0 10px 26px rgba(0,0,0,0.7), 0 0 34px rgba(255,216,74,0.55); animation: fan-secret-pulse 3s ease-in-out infinite; }
@keyframes fan-secret-pulse {
  0%,100% { box-shadow: 0 10px 26px rgba(0,0,0,0.7), 0 0 28px rgba(255,216,74,0.45); }
  50%     { box-shadow: 0 10px 26px rgba(0,0,0,0.7), 0 0 48px rgba(255,216,74,0.85); }
}

/* Old single-card viz kept for fallback */
.tier-viz-card {
  overflow: hidden;
  padding: 16px;
}
.tier-viz-card .tv-img {
  height: 100%; width: auto; max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform .35s var(--ease), box-shadow .35s;
  object-fit: contain;
}
.tier-card:hover .tier-viz-card .tv-img {
  transform: translateY(-4px) scale(1.04) rotate(-1.5deg);
  box-shadow: -8px 24px 44px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(255,255,255,0.1);
}
/* Rarity-specific glow on the previewed card */
.tier-viz-card.r-rare   .tv-img { box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 0 22px rgba(74,163,255,0.35); }
.tier-viz-card.r-holo   .tv-img { box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 0 28px rgba(180,99,255,0.45); }
.tier-viz-card.r-ultra  .tv-img { box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 0 32px rgba(255,155,61,0.5); }
.tier-viz-card.r-secret .tv-img { box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 0 42px rgba(255,216,74,0.6); animation: tv-secret-shimmer 3s ease-in-out infinite; }
@keyframes tv-secret-shimmer {
  0%,100% { box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 0 30px rgba(255,216,74,0.45); }
  50%     { box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 0 55px rgba(255,216,74,0.9); }
}
.tv-tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; letter-spacing: 2px; font-weight: 900;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(0,0,0,0.82); color: #ffffff;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  text-transform: uppercase;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.tier-viz-fan.r-holo   .tv-tag { border-color: rgba(180,99,255,0.8);   color: #e9c9ff; }
.tier-viz-fan.r-ultra  .tv-tag { border-color: rgba(255,155,61,0.8);   color: #ffd9b3; }
.tier-viz-fan.r-secret .tv-tag { border-color: rgba(255,216,74,0.95);  color: #fff1a8; }
.tier-viz-fan.r-rare   .tv-tag { border-color: rgba(74,163,255,0.8);   color: #b8dcff; }
.tv-meta {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s;
}
.tier-card:hover .tv-meta { opacity: 1; transform: translateY(0); }
.tv-name { font-size: 13px; font-weight: 700; color: var(--text); }
.tv-set  { font-size: 10px; color: var(--muted); }
.tier-odds { list-style: none; padding: 0; margin: 0 0 18px; font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.tier-odds li { display: flex; justify-content: space-between; }
.tier-odds .pct { font-variant-numeric: tabular-nums; }
.rip-btn {
  width: 100%; padding: 14px 12px; border-radius: 10px; border: 0;
  background: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 100%);
  color: white; font-weight: 800; font-size: 15px; letter-spacing: 0.3px;
  box-shadow: 0 10px 32px color-mix(in oklab, var(--accent) 38%, transparent),
              inset 0 0 0 1px rgba(255,255,255,0.15);
  transition: transform .12s, filter .2s, box-shadow .2s;
}
.rip-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 16px 40px color-mix(in oklab, var(--accent) 55%, transparent),
              inset 0 0 0 1px rgba(255,255,255,0.22);
}
.rip-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(1); }
.rip-btn.cant-afford { opacity: .55; filter: grayscale(0.6); }
.rip-btn.shake-nope { animation: rip-shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes rip-shake {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-6px); }
  40%,60% { transform: translateX(6px); }
}

/* Shard icon pulse on balance change */
.sound-btn, .bell-btn, .theme-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--elevate-fill); border: 1px solid var(--border);
  cursor: pointer; font-size: 14px; display: flex;
  align-items: center; justify-content: center;
  color: var(--muted); transition: background .15s, color .15s, transform .2s;
  position: relative;
}
.sound-btn:hover, .bell-btn:hover, .theme-btn:hover {
  background: var(--overlay-hover); color: var(--text);
}
.sound-btn.on { color: var(--accent); border-color: var(--accent); }
.theme-btn:hover { transform: rotate(30deg); }

.bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: linear-gradient(135deg, #ff4d9a, #ff9b3d);
  color: white; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(255,77,154,0.5);
}
.bell-badge.hidden { display: none; }

.bell-dropdown {
  position: fixed; width: 340px; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6); z-index: 55;
  padding: 6px;
}
.bell-dropdown.hidden { display: none; }
.bd-item {
  padding: 10px 12px; border-radius: 8px; cursor: default;
  border-left: 3px solid transparent;
}
.bd-item:hover { background: rgba(255,255,255,0.03); }
.bd-item.unread { border-left-color: var(--accent); background: rgba(124,92,255,0.05); }
.bd-item.global { border-left-color: #ffd84a; background: rgba(255,216,74,0.05); }
.bd-item.global:hover { background: rgba(255,216,74,0.08); }
.bd-tag {
  display: inline-block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; background: rgba(255,216,74,0.2); color: #ffd84a;
  margin-bottom: 4px;
}
.bd-title { font-size: 13px; font-weight: 600; color: var(--text); }
.bd-msg { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bd-ago { font-size: 10px; color: var(--muted); margin-top: 6px; opacity: 0.6; }
.bd-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* User menu */
.user-menu { position: relative; }
.um-trigger {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.um-trigger:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }
.um-trigger.login { border-color: var(--border); padding: 4px 12px; }
.um-avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
}
.um-avatar.initial { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

.um-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6); z-index: 55;
  padding: 4px;
}
.um-dropdown.hidden { display: none; }
.um-header { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.um-name { font-weight: 600; color: var(--text); font-size: 13px; }
.um-email { font-size: 11px; color: var(--muted); margin-top: 2px; }
.um-item {
  display: block; padding: 8px 12px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: 13px;
  transition: background .15s;
}
.um-item:hover { background: rgba(255,255,255,0.06); }

/* Ledger table */
.ledger-table {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  font-size: 13px;
}
.ledger-table th {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.ledger-table th.num, .ledger-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.ledger-table tr:last-child td { border-bottom: none; }
.ledger-table tr.pos td .reason-pill { color: #58e6a0; }
.ledger-table tr.neg td .reason-pill { color: #ff9b3d; }
.reason-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.05); font-size: 11px; font-weight: 600;
}
.ledger-table .ref { margin-left: 6px; font-size: 10px; color: var(--muted); font-family: var(--mono, monospace); }
.ledger-table tr.pos td .num b { color: #58e6a0; }
.ledger-table tr.neg td .num b { color: #ff9b3d; }

/* Live pull ticker */
.pull-ticker {
  position: relative; overflow: hidden;
  max-height: 0; transition: max-height .3s;
  background: linear-gradient(90deg, rgba(255,216,74,0.08), rgba(255,99,163,0.06), rgba(180,99,255,0.08));
  border-bottom: 1px solid rgba(255,216,74,0.2);
}
.pull-ticker.shown { max-height: 36px; }
.pt-strip {
  display: flex; gap: 24px; padding: 8px 0;
  white-space: nowrap;
  animation: pt-scroll 40s linear infinite;
}
.pt-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text);
}
.pt-icon { color: #ffd84a; }
.pt-text { font-weight: 600; }
.pt-ago { color: var(--muted); font-size: 11px; }
@keyframes pt-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-strip { animation: none; }
}

/* Hall of rippers */
.hall-tabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.hall-tab {
  padding: 10px 18px; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; font-weight: 600; font-size: 14px;
  transition: color .15s, border-color .15s;
}
.hall-tab:hover { color: var(--text); }
.hall-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.hall-table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.hall-table th {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.hall-table th.num, .hall-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hall-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.hall-table tr:last-child td { border-bottom: none; }
.hall-table tr:hover td { background: rgba(255,255,255,0.02); }
.hall-table .rank { width: 40px; color: var(--muted); font-weight: 700; }
.hall-table .trainer { display: flex; align-items: center; gap: 10px; }
.hall-avatar {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.hall-table td.num.hi { color: var(--secret); font-weight: 700; }
.hall-table td.muted { color: var(--muted); font-size: 12px; }

.hall-table tr.top-1 td.rank { color: #ffd84a; }
.hall-table tr.top-2 td.rank { color: #c0c0c0; }
.hall-table tr.top-3 td.rank { color: #cd7f32; }

/* FAQ */
.faq-list { max-width: 720px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; padding: 0;
  overflow: hidden; transition: border-color .15s;
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  padding: 14px 18px; font-weight: 600; cursor: pointer;
  list-style: none; position: relative;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); font-size: 20px; color: var(--muted);
  transition: transform .2s;
}
.faq-item[open] summary::after { content: '–'; }
.faq-answer {
  padding: 0 18px 16px; color: var(--muted); line-height: 1.55;
}
.faq-answer a { color: var(--accent); }
.faq-answer b { color: var(--text); }

/* ---------- ADMIN PANEL ---------- */
.admin-stats { margin-bottom: 18px; }
.admin-search {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 14px;
}
.admin-search input {
  flex: 1; min-width: 240px;
  padding: 10px 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 14px;
}
.admin-search input:focus { border-color: var(--accent); outline: none; }

.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; font-size: 13px;
}
.admin-table th {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.admin-table th.num, .admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }

.admin-user { display: flex; align-items: center; gap: 10px; }
.au-name { color: var(--text); font-weight: 600; }
.au-email { color: var(--muted); font-size: 11px; }
.au-id {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,0.04); padding: 2px 6px; border-radius: 4px;
}
.admin-actions { display: flex; gap: 6px; justify-content: flex-end; }
.admin-actions .btn { padding: 6px 10px; font-size: 12px; }

.um-admin { color: var(--accent) !important; font-weight: 600; }

/* Admin modal (grant / ledger) */
.admin-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 70;
}
.admin-modal.hidden { display: none; }
.am-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 28px;
  width: min(440px, 90vw);
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.am-card-wide { width: min(720px, 92vw); max-height: 85vh; overflow-y: auto; }
.am-card h3 { margin-top: 0; }
.am-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
}
.am-close:hover { color: var(--text); }
.am-grid {
  display: flex; flex-direction: column; gap: 10px; margin: 14px 0 10px;
}
.am-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.am-grid input {
  padding: 10px 12px; background: rgba(0,0,0,0.25);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.am-grid input:focus { border-color: var(--accent); outline: none; }
.am-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.am-quick .btn { padding: 5px 10px; font-size: 11px; }
.am-footer { display: flex; justify-content: flex-end; gap: 10px; }

.s-icon.pulse { animation: s-pulse-up .6s cubic-bezier(.36,.07,.19,1); }
.s-icon.pulse-down { animation: s-pulse-down .6s cubic-bezier(.36,.07,.19,1); }
@keyframes s-pulse-up {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,216,74,0)); }
  40% { transform: scale(1.4); filter: drop-shadow(0 0 8px rgba(255,216,74,0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,216,74,0)); }
}
@keyframes s-pulse-down {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,99,99,0)); }
  40% { transform: scale(0.85); filter: drop-shadow(0 0 6px rgba(255,99,99,0.5)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,99,99,0)); }
}

/* Pack visual — designed to look like a foil TCG booster wrapper */
.tier-viz {
  perspective: 1000px;
  /* Drop-in entrance when the rip page renders. */
  animation: pack-dropin .8s cubic-bezier(.2,.9,.3,1.08) both;
}
.tier-grid > .tier-card:nth-child(1) .tier-viz { animation-delay: 0.05s; }
.tier-grid > .tier-card:nth-child(2) .tier-viz { animation-delay: 0.18s; }
.tier-grid > .tier-card:nth-child(3) .tier-viz { animation-delay: 0.31s; }
@keyframes pack-dropin {
  0%   { transform: translateY(-40px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(8px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.pack {
  width: 130px; height: 182px; border-radius: 4px 4px 8px 8px;
  position: relative;
  box-shadow:
    0 24px 50px rgba(0,0,0,0.65),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 -12px 26px rgba(0,0,0,0.38);
  transform-style: preserve-3d;
  transition: transform .4s var(--ease), box-shadow .3s;
  overflow: hidden;
}
.tier-card:hover .pack {
  transform: rotateY(-12deg) rotateX(5deg) translateZ(10px);
  box-shadow: -20px 30px 60px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Wrapper foil gradient per tier — vibrant top fading to dark bottom */
.pack.starter { background: linear-gradient(160deg, #5aa9e6 0%, #1c4b7c 45%, #0a2239 100%); }
.pack.premium { background: linear-gradient(160deg, #9b5cff 0%, #4f1fa3 45%, #1e0f3d 100%); }
.pack.elite   { background: linear-gradient(160deg, #ff9b3d 0%, #c44b1a 45%, #4d0e05 100%); }

/* Top tear-strip — darker band with a dashed tear line at the bottom edge */
.pack::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 30px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  border-bottom: 1px dashed rgba(255,255,255,0.35);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
  z-index: 2;
}

/* Holographic shimmer sweep over the whole pack */
.pack::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.22) 50%, transparent 75%);
  background-size: 220% 100%;
  background-position: -100% 0;
  animation: pack-foil-sweep 3.5s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
}
@keyframes pack-foil-sweep {
  0%, 100% { background-position: -120% 0; }
  50%      { background-position: 120% 0; }
}

/* Chunky tier name banner — centered big text */
.pack .pack-label {
  position: absolute; bottom: 30px; left: 0; right: 0;
  text-align: center;
  font-weight: 900; letter-spacing: 3px; font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 14px currentColor;
  z-index: 4;
  padding: 0 10px;
}
.pack.starter .pack-label { color: #b0dcff; }
.pack.premium .pack-label { color: #d5b9ff; }
.pack.elite   .pack-label { color: #ffd89c; }

/* Pokeball mark in top strip */
.pack-brand {
  position: absolute; top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(180deg, #ff4757 0%, #ff4757 48%, #111 48%, #111 52%, #f4f6fb 52%, #f4f6fb 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  z-index: 4;
}
.pack-brand::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff; box-shadow: 0 0 0 1px #111;
}

/* TCG kicker under the pokeball */
.pack-tcg {
  position: absolute; top: 26px; left: 0; right: 0;
  text-align: center;
  font-size: 7px; letter-spacing: 2.5px; font-weight: 900;
  color: rgba(255,255,255,0.9);
  z-index: 4;
}

/* Expansion symbol — the silhouetted translucent circle in the art area */
.pack-symbol {
  position: absolute; top: 52px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.32), rgba(255,255,255,0.06) 60%, transparent 75%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 0 24px rgba(255,255,255,0.15);
  z-index: 4;
}
.pack.starter .pack-symbol { background: radial-gradient(circle, rgba(90,169,230,0.7), transparent 65%); }
.pack.premium .pack-symbol { background: radial-gradient(circle, rgba(155,92,255,0.7), transparent 65%); }
.pack.elite   .pack-symbol { background: radial-gradient(circle, rgba(255,155,61,0.7), transparent 65%); }

/* Real product-photo pack image — overlays the CSS pack when you drop
   a file at /public/packs/<set_id>.jpg. Sits on top of everything else
   inside the .pack so the CSS mock is just the fallback. */
.pack-real {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 5;
}

/* Real pokemontcg.io set logo when available */
.pack-set-logo {
  position: absolute; top: 50px; left: 50%;
  transform: translateX(-50%);
  width: 104px; height: auto; max-height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  z-index: 4;
}
.pack-set-symbol {
  position: absolute; bottom: 46px; right: 10px;
  width: 18px; height: 18px;
  object-fit: contain; opacity: 0.8;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
  z-index: 4;
}
/* Move the tier label below the set logo so they don't overlap */
.pack-set-logo ~ .pack-label { bottom: 22px; font-size: 14px; letter-spacing: 2px; }

/* Bottom footer strip */
.pack-footer {
  position: absolute; bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-size: 6px; letter-spacing: 0.6px; font-weight: 700;
  color: rgba(255,255,255,0.78);
  z-index: 4;
  white-space: nowrap;
  padding: 0 6px;
}

/* Rip reveal */
.rip-stage {
  min-height: 70vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; position: relative;
}
.skip-btn {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.06); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; letter-spacing: 0.5px;
  cursor: pointer; transition: background .2s, color .2s, opacity .2s;
  z-index: 2;
}
.skip-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }

.pref-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px; cursor: pointer;
  user-select: none; padding: 6px 10px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.pref-toggle:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.pref-toggle input { accent-color: var(--accent); }

.trust-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(124,92,255,0.08); border: 1px solid rgba(124,92,255,0.3);
  color: var(--text); font-size: 12px; font-weight: 600;
  cursor: help;
}

.value-ticker {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  position: relative; overflow: hidden;
  transition: border-color .4s, background .4s;
}
.value-ticker.plus-ev {
  border-color: rgba(88, 230, 160, 0.6);
  background: rgba(88, 230, 160, 0.08);
}
.value-ticker.plus-ev {
  padding-right: 70px; /* reserve space so +EV badge doesn't overlap "shards" */
}
.value-ticker.plus-ev::after {
  content: '+EV'; position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: var(--success); padding: 3px 7px;
  border: 1px solid color-mix(in oklab, var(--success) 55%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--success) 14%, transparent);
  animation: plus-ev-in .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes plus-ev-in {
  0% { transform: translateY(-50%) scale(0.5); opacity: 0; }
  100% { transform: translateY(-50%) scale(1); opacity: 1; }
}
.vt-label { color: var(--muted); font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; }
.vt-amount { font-size: 28px; font-weight: 700; color: var(--text); transition: color .2s; }
.vt-suffix { color: var(--muted); font-size: 13px; }
.vt-amount.bump { animation: vt-bump .45s cubic-bezier(.36,0,.2,1); }
.vt-amount.bump-hi { animation: vt-bump-hi .7s cubic-bezier(.36,0,.2,1); color: #ffd84a; }
@keyframes vt-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes vt-bump-hi {
  0% { transform: scale(1); text-shadow: 0 0 0 rgba(255,216,74,0); }
  35% { transform: scale(1.35); text-shadow: 0 0 24px rgba(255,216,74,0.95); }
  100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,216,74,0); }
}
.rip-pack { transform-origin: center; transition: transform .4s; position: relative; }
.rip-pack.tearing { animation: shake .32s ease-in-out infinite; }
/* While tearing, show a lifted top strip to signal "it's being torn open" */
.rip-pack.tearing .pack::before {
  animation: tear-strip-lift 1.1s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes tear-strip-lift {
  0%,100% { transform: rotate(0) translateY(0); }
  50%     { transform: rotate(-6deg) translateY(-4px); }
}
.rip-pack.bursting .pack::before {
  /* Top strip flies off first */
  animation: tear-strip-fly .45s cubic-bezier(.36,0,.2,1) forwards;
}
@keyframes tear-strip-fly {
  0%   { transform: rotate(0) translateY(0); opacity: 1; }
  100% { transform: rotate(-35deg) translateY(-90px) translateX(-20px); opacity: 0; }
}
.rip-pack.bursting { animation: pack-burst .55s cubic-bezier(.36,0,.2,1) forwards; }
.rip-pack.bursting::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 65%);
  animation: pack-flash .5s ease-out forwards;
  pointer-events: none;
}
@keyframes pack-burst {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  35%  { transform: scale(1.25) rotate(-4deg); opacity: 1; filter: brightness(1.6); }
  100% { transform: scale(0.2) rotate(14deg); opacity: 0; }
}
@keyframes pack-flash {
  0%   { transform: scale(0.6); opacity: 0; }
  50%  { transform: scale(1.8); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.ripping-label { font-variant-numeric: tabular-nums; }
.ripping-label .dots { display: inline-block; animation: dots 1.1s steps(4, jump-none) infinite; }
@keyframes dots {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-3px,2px) rotate(-1deg); }
  40% { transform: translate(3px,-2px) rotate(1.5deg); }
  60% { transform: translate(-2px,3px) rotate(-1.5deg); }
  80% { transform: translate(2px,-1px) rotate(1deg); }
}

.reveal-row {
  display: flex; column-gap: 18px; row-gap: 64px; flex-wrap: wrap; justify-content: center;
  max-width: 1200px;
  /* row-gap covers the absolute-positioned label height when cards wrap
     to a second row. margin-bottom clears the rip-summary box below. */
  margin-bottom: 56px;
}
.reveal-card {
  width: 180px; height: 252px; perspective: 900px; cursor: pointer;
  position: relative;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .45s cubic-bezier(.2,.9,.3,1.08), transform .45s cubic-bezier(.2,.9,.3,1.08);
}
.reveal-card.entering {
  opacity: 0;
  transform: translateY(-22px) scale(0.92);
}
.reveal-card .flipper {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .85s cubic-bezier(.3,.9,.4,1.06);
}
.reveal-card.flipped .flipper { transform: rotateY(180deg); }
.reveal-card .face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px;
  overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}
.reveal-card .back {
  background: url("/card-back.jpg") center/cover no-repeat, #1e2a78;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.reveal-card .front { transform: rotateY(180deg); background: var(--panel-3); overflow: hidden; }
.reveal-card .front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reveal-card .front::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.reveal-card.flipped.r-holo .front::before,
.reveal-card.flipped.r-ultra .front::before {
  opacity: 0.55; mix-blend-mode: color-dodge;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 35%,
    rgba(180, 99, 255, 0.45) 45%,
    rgba(99, 255, 220, 0.45) 52%,
    rgba(255, 170, 99, 0.45) 60%,
    rgba(255,255,255,0) 75%
  );
  background-size: 220% 100%;
  animation: holo-shimmer 2.6s linear infinite;
}
.reveal-card.flipped.r-secret .front::before {
  opacity: 0.75; mix-blend-mode: color-dodge;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 30%,
    rgba(255, 99, 163, 0.55) 42%,
    rgba(255, 216, 74, 0.65) 50%,
    rgba(99, 255, 220, 0.55) 58%,
    rgba(180, 99, 255, 0.55) 66%,
    rgba(255,255,255,0) 80%
  );
  background-size: 250% 100%;
  animation: holo-shimmer 2s linear infinite;
}
@keyframes holo-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-card.flipped .front::before { animation: none; }
}
.reveal-card.r-holo   { box-shadow: 0 0 26px rgba(180,99,255,0.55); }
.reveal-card.r-ultra  { box-shadow: 0 0 32px rgba(255,155,61,0.6); }
.reveal-card.r-secret { box-shadow: 0 0 50px rgba(255,216,74,0.8); animation: secret-pulse 1.6s infinite; }
@keyframes secret-pulse {
  0%,100% { box-shadow: 0 0 30px rgba(255,216,74,0.6); }
  50%     { box-shadow: 0 0 65px rgba(255,216,74,0.95); }
}

/* Rarity burst — fires once when card flips open. Scales with rarity. */
.reveal-card::before,
.reveal-card::after {
  content: '';
  position: absolute;
  inset: 50%;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
}
.reveal-card.flipped.r-rare::before,
.reveal-card.flipped.r-holo::before,
.reveal-card.flipped.r-ultra::before,
.reveal-card.flipped.r-secret::before {
  animation: rarity-burst 0.95s cubic-bezier(.16,1,.3,1) forwards;
}
.reveal-card.flipped.r-holo::after,
.reveal-card.flipped.r-ultra::after,
.reveal-card.flipped.r-secret::after {
  animation: rarity-ring 1.2s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: .08s;
}
.reveal-card.r-rare::before   { background: radial-gradient(circle, rgba(120,180,255,0.9), rgba(120,180,255,0) 70%); }
.reveal-card.r-holo::before   { background: radial-gradient(circle, rgba(180,99,255,0.95), rgba(180,99,255,0) 70%); }
.reveal-card.r-ultra::before  { background: radial-gradient(circle, rgba(255,155,61,0.95), rgba(255,155,61,0) 70%); }
.reveal-card.r-secret::before { background: radial-gradient(circle, rgba(255,216,74,1), rgba(255,150,120,0) 70%); }

.reveal-card.r-holo::after    { border: 2px solid rgba(180,99,255,0.7); }
.reveal-card.r-ultra::after   { border: 2px solid rgba(255,155,61,0.8); }
.reveal-card.r-secret::after  { border: 3px solid rgba(255,216,74,0.95); }

@keyframes rarity-burst {
  0%   { inset: 50%; opacity: 0; }
  25%  { opacity: 0.9; }
  100% { inset: -18%; opacity: 0; }
}
@keyframes rarity-ring {
  0%   { inset: 40%; opacity: 0; }
  40%  { opacity: 0.85; }
  100% { inset: -40%; opacity: 0; }
}

/* Screen shake on ultra/secret reveals. Respects reduced-motion. */
.shake-soft { animation: shake-soft .45s cubic-bezier(.36,.07,.19,.97) both; }
.shake-hard { animation: shake-hard .7s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake-soft {
  10%,90% { transform: translate3d(-1px, 0, 0); }
  20%,80% { transform: translate3d(2px, 0, 0); }
  30%,50%,70% { transform: translate3d(-3px, 0, 0); }
  40%,60% { transform: translate3d(3px, 0, 0); }
}
@keyframes shake-hard {
  10%,90% { transform: translate3d(-2px, -1px, 0); }
  20%,80% { transform: translate3d(5px, 1px, 0); }
  30%,50%,70% { transform: translate3d(-7px, -2px, 0); }
  40%,60% { transform: translate3d(7px, 2px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .shake-soft, .shake-hard { animation: none; }
}
.card-label {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; text-align: center;
  font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .3s .2s;
}
.reveal-card.flipped .card-label { opacity: 1; }

.new-badge {
  position: absolute; top: 8px; right: -6px; z-index: 3;
  background: linear-gradient(135deg, #ff4d9a, #ff9b3d);
  color: white; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(255,77,154,0.45);
  opacity: 0; transform: scale(0.5) rotate(12deg);
  transition: opacity .3s .4s, transform .4s .4s cubic-bezier(.34,1.56,.64,1);
}
.reveal-card.flipped.is-new .new-badge { opacity: 1; transform: scale(1) rotate(12deg); }

/* Variant badges — shown on shiny/foil/reverse pulls */
.variant-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  opacity: 0; transform: scale(0.5);
  transition: opacity .3s .5s, transform .4s .5s var(--ease-spring);
}
.reveal-card.flipped .variant-badge { opacity: 1; transform: scale(1); }
.col-card .variant-badge { opacity: 1; transform: scale(1); }

.variant-badge.v-reverse {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: white;
}
.variant-badge.v-shiny {
  background: linear-gradient(135deg, #f0abfc, #a855f7, #60a5fa);
  background-size: 200% 200%;
  color: white;
  animation: shiny-shift 2.4s linear infinite;
}
.variant-badge.v-foil {
  background: linear-gradient(135deg, #fbbf24, #f97316, #ef4444, #ec4899);
  background-size: 300% 300%;
  color: white;
  animation: foil-shift 3s linear infinite;
}
@keyframes shiny-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes foil-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 300%; }
}
@media (prefers-reduced-motion: reduce) {
  .variant-badge.v-shiny, .variant-badge.v-foil { animation: none; }
}

/* Rarity card glow override for variants — foil > shiny > reverse */
.col-card.v-reverse { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(96,165,250,0.6), 0 0 18px rgba(96,165,250,0.3); }
.col-card.v-shiny   { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(168,85,247,0.7), 0 0 24px rgba(168,85,247,0.4); }
.col-card.v-foil    { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(251,191,36,0.8), 0 0 30px rgba(251,191,36,0.5); animation: foil-idle-pulse 3s ease-in-out infinite; }
@keyframes foil-idle-pulse {
  0%,100% { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(251,191,36,0.8), 0 0 22px rgba(251,191,36,0.4); }
  50%     { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(251,191,36,0.95), 0 0 42px rgba(251,191,36,0.75); }
}

/* Reveal-card matching glow */
.reveal-card.v-shiny { box-shadow: 0 0 32px rgba(168,85,247,0.55); }
.reveal-card.v-foil  { box-shadow: 0 0 42px rgba(251,191,36,0.7); animation: foil-idle-pulse 2.6s ease-in-out infinite; }

.big-pull-banner {
  position: fixed; top: 110px; left: 50%;
  transform: translate(-50%, -40px);
  padding: 14px 36px; border-radius: 14px;
  z-index: 50; pointer-events: none; text-align: center;
  opacity: 0; transition: opacity .25s, transform .45s cubic-bezier(.34,1.56,.64,1);
  min-width: 280px;
  backdrop-filter: blur(12px);
}
.big-pull-banner.in { opacity: 1; transform: translate(-50%, 0); }
.big-pull-banner.out { opacity: 0; transform: translate(-50%, -20px); transition: opacity .4s, transform .4s; }
.big-pull-banner.r-ultra {
  background: linear-gradient(135deg, rgba(255,155,61,0.95), rgba(143,45,13,0.95));
  box-shadow: 0 12px 40px rgba(255,155,61,0.4), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.big-pull-banner.r-secret {
  background: linear-gradient(135deg, rgba(255,216,74,0.95), rgba(255,99,163,0.95), rgba(180,99,255,0.95));
  box-shadow: 0 12px 40px rgba(255,216,74,0.45), inset 0 0 0 1px rgba(255,255,255,0.18);
  animation: bp-pulse 1.2s ease-in-out infinite;
}
@keyframes bp-pulse {
  0%,100% { box-shadow: 0 12px 40px rgba(255,216,74,0.45), inset 0 0 0 1px rgba(255,255,255,0.18); }
  50%     { box-shadow: 0 12px 60px rgba(255,216,74,0.85), inset 0 0 0 1px rgba(255,255,255,0.3); }
}
.bp-tier { font-size: 11px; letter-spacing: 3px; color: rgba(255,255,255,0.85); font-weight: 700; }
.bp-name { font-size: 22px; font-weight: 800; color: white; margin: 4px 0 2px; }
.bp-value { font-size: 13px; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
.card-label .c-name { color: var(--text); font-weight: 600; }
.card-label .c-value { display: block; font-variant-numeric: tabular-nums; }

.rip-summary {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 22px; font-size: 15px;
}
.rip-summary .diff.pos { color: var(--uncommon); }
.rip-summary .diff.neg { color: #ff6a6a; }

.rip-actions { display: flex; gap: 12px; }
.btn {
  padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 14px;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.btn:hover {
  border-color: var(--accent);
  background: var(--panel-3);
  box-shadow: 0 4px 18px rgba(138,109,255,0.18);
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 100%);
  border: 0; color: white;
  font-weight: 700;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--accent) 38%, transparent),
              inset 0 0 0 1px rgba(255,255,255,0.12);
  transition: filter .2s, box-shadow .2s, transform .1s;
}
.btn.primary:hover {
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 14px 38px color-mix(in oklab, var(--accent) 55%, transparent),
              inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* Collection */
.price-range { display: inline-flex; align-items: center; gap: 4px; }
.price-range input {
  width: 70px; padding: 6px 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.price-range span { color: var(--muted); }

.collection-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
}
.collection-toolbar select, .collection-toolbar input {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 8px; font-size: 14px; font-family: inherit;
}
/* Collection summary row — stats pills on top, rarity chips below, never squished together */
.summary-row {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px;
}
.summary-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border);
}
.summary-chip .n { font-variant-numeric: tabular-nums; margin-left: 4px; }

.stats-pills {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.stats-pill {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  min-width: 80px;
}
.stats-pill.gold { border-color: rgba(255,216,74,0.35); background: rgba(255,216,74,0.06); }
.sp-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.sp-val {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}
.rarity-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.loading-state {
  display: flex; align-items: center; gap: 12px;
  padding: 40px 20px; color: var(--muted);
  justify-content: center;
}
.loading-state .pokeball-spin { width: 22px; height: 22px; }

/* Confetti burst — spawned by JS on secret pulls */
.confetti-dot {
  position: fixed; top: 40%; left: 50%;
  width: 10px; height: 14px; border-radius: 2px;
  z-index: 45; pointer-events: none;
  animation-name: confetti-fly;
  animation-timing-function: cubic-bezier(.1,.4,.3,1);
  animation-fill-mode: forwards;
  box-shadow: 0 0 6px currentColor;
}
@keyframes confetti-fly {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--dx), 120vh) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-dot { display: none; }
}

.recent-pulls {
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.rp-header { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rp-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.rp-item {
  flex: 0 0 56px; width: 56px; height: 78px; border-radius: 6px;
  overflow: hidden; background: #0a0a12;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform .15s;
}
.rp-item:hover { transform: translateY(-3px); }
.rp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-item.r-holo   { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(180,99,255,0.6); }
.rp-item.r-ultra  { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,155,61,0.6); }
.rp-item.r-secret { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,216,74,0.75), 0 0 16px rgba(255,216,74,0.3); }

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.binder-strip {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.set-tile {
  flex: 1 1 180px; max-width: 260px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  color: var(--text); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.set-tile:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.set-tile.active { border-color: var(--accent); background: rgba(124,92,255,0.06); }
.st-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.st-progress { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.st-bar {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s;
}
.st-counts { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-missing { opacity: 0.75; }
.st-error { color: var(--muted); font-size: 13px; }

.card-grid { perspective: 1200px; }
.col-card {
  position: relative; aspect-ratio: 5/7; border-radius: 8px; overflow: hidden;
  background: var(--panel-3); cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.08), box-shadow .25s;
  box-shadow: var(--shadow-sm);
}
.col-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-card:hover {
  transform: translateY(-8px) rotateY(-8deg) rotateX(4deg) scale(1.04);
  box-shadow: -12px 20px 35px rgba(0,0,0,0.6);
  z-index: 2;
}
.col-card.selected {
  outline: 3px solid var(--accent-2); outline-offset: 2px;
  transform: translateY(-4px) scale(1.02);
}
/* Rarity-colored border glow — subtle idle, stronger on hover */
.col-card.r-rare    { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(120,180,255,0.4); }
.col-card.r-holo    { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(180,99,255,0.55), 0 0 14px rgba(180,99,255,0.25); }
.col-card.r-ultra   { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,155,61,0.6), 0 0 18px rgba(255,155,61,0.3); }
.col-card.r-secret  { box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,216,74,0.7), 0 0 22px rgba(255,216,74,0.4); }
.col-card.r-rare:hover    { box-shadow: -12px 20px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(120,180,255,0.6), 0 0 24px rgba(120,180,255,0.4); }
.col-card.r-holo:hover    { box-shadow: -12px 20px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(180,99,255,0.8), 0 0 32px rgba(180,99,255,0.55); }
.col-card.r-ultra:hover   { box-shadow: -12px 20px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,155,61,0.85), 0 0 38px rgba(255,155,61,0.6); }
.col-card.r-secret:hover  { box-shadow: -12px 20px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,216,74,0.95), 0 0 44px rgba(255,216,74,0.75); }

/* Holo/ultra/secret foil on collection cards — visible on hover */
.col-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.col-card.r-holo::after, .col-card.r-ultra::after {
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 35%,
    rgba(180,99,255,0.4) 45%,
    rgba(99,255,220,0.4) 52%,
    rgba(255,170,99,0.4) 60%,
    rgba(255,255,255,0) 75%);
  background-size: 220% 100%;
  mix-blend-mode: color-dodge;
}
.col-card.r-secret::after {
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 30%,
    rgba(255,99,163,0.55) 42%,
    rgba(255,216,74,0.6) 50%,
    rgba(99,255,220,0.5) 58%,
    rgba(180,99,255,0.5) 66%,
    rgba(255,255,255,0) 80%);
  background-size: 250% 100%;
  mix-blend-mode: color-dodge;
}
.col-card:hover::after { opacity: 0.6; animation: holo-shimmer 2.4s linear infinite; }
.col-card.r-secret:hover::after { opacity: 0.75; animation-duration: 1.8s; }

/* Sparkles — little dots drifting up off rare+ cards on hover */
.col-card.r-holo .sparkle,
.col-card.r-ultra .sparkle,
.col-card.r-secret .sparkle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; pointer-events: none;
  opacity: 0;
}
.col-card.r-holo:hover .sparkle,
.col-card.r-ultra:hover .sparkle,
.col-card.r-secret:hover .sparkle {
  animation: sparkle-drift 1.8s ease-out infinite;
}
.col-card .sparkle:nth-child(1) { left: 14%; bottom: 18%; animation-delay: 0s !important; background: var(--secret); }
.col-card .sparkle:nth-child(2) { left: 72%; bottom: 28%; animation-delay: 0.4s !important; background: var(--accent-3); }
.col-card .sparkle:nth-child(3) { left: 40%; bottom: 58%; animation-delay: 0.9s !important; background: var(--accent-2); }
.col-card .sparkle:nth-child(4) { left: 86%; bottom: 68%; animation-delay: 1.3s !important; background: var(--secret); }
@keyframes sparkle-drift {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  25%  { opacity: 1; transform: translateY(-12px) scale(1.2); }
  70%  { opacity: 0.6; transform: translateY(-40px) scale(0.8); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.2); }
}
@media (prefers-reduced-motion: reduce) {
  .col-card .sparkle { animation: none !important; }
}
.col-card .floor {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.75); padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--secret);
  font-variant-numeric: tabular-nums;
}
.col-card .dupe-badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,0.82); color: #ffffff;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 3;
}
.col-card .floor {
  color: #ffd84a;
}
.col-card .tcg-badge {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(35,133,100,0.85); color: #b8f5d0;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(88,230,160,0.35);
}
.col-card .zoom-btn {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s;
}
.col-card:hover .zoom-btn { opacity: 1; }
.col-card .zoom-btn:hover { background: rgba(0,0,0,0.85); color: white; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 60; opacity: 0; transition: opacity .18s;
  backdrop-filter: blur(6px);
}
.lightbox.open { opacity: 1; }
.lightbox.closing { opacity: 0; }
.lb-close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.2);
  font-size: 18px; cursor: pointer;
}
.lb-close:hover { background: rgba(255,255,255,0.15); }
.lb-card {
  max-width: 90vw; max-height: 90vh;
  display: flex; gap: 24px; align-items: center;
  transform: scale(.92); transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.lightbox.open .lb-card { transform: scale(1); }
.lb-card img { max-height: 82vh; max-width: 60vw; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.7); }
.lb-meta { color: var(--text); max-width: 300px; }
.lb-meta h3 { margin: 0 0 8px; font-size: 26px; }
.lb-row { margin-bottom: 8px; color: var(--muted); }
.lb-row b { color: var(--secret); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  /* Lightbox becomes a full-height sheet on mobile */
  .lightbox {
    align-items: flex-start; /* anchor to top so long meta panels scroll naturally */
    padding: 0;
  }
  .lb-close {
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.6);
    color: white; border-color: rgba(255,255,255,0.2);
    z-index: 5;
  }
  .lb-card {
    flex-direction: column; gap: 0;
    width: 100vw;
    max-width: none; max-height: 100vh;
    background: var(--bg);
    border-radius: 0;
    overflow-y: auto;
  }
  .lb-image-col {
    width: 100%;
    background: color-mix(in oklab, var(--bg) 70%, black);
    padding: 16px 12px 14px;
    position: sticky; top: 0; z-index: 2;
  }
  .lb-image {
    max-height: 44vh; max-width: 74vw;
    width: auto;
  }
  .lb-meta {
    width: 100%; max-width: none; max-height: none;
    padding: 16px 16px 40px; overflow: visible;
    background: var(--bg);
  }
  .lb-name { font-size: 22px; }
  .lb-row { font-size: 13px; }

  /* Attack text easier to read on small screens */
  .lb-attack-text, .lb-subsection p, .lb-flavor { font-size: 14px; line-height: 1.6; }
  /* Stack attack/ability headers: cost pips + name on top line, damage below right-aligned */
  .lb-attack-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .lb-attack-cost { flex: 0 0 auto; }
  .lb-attack-name { flex: 1 1 100%; min-width: 0; }
  /* After cost pips take their space, name drops to its own full-width line */
  .lb-attack-cost + .lb-attack-name { flex-basis: auto; }
  .lb-attack-dmg { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

  /* Combat rows wrap their values instead of clipping */
  .lb-combat-row { flex-wrap: wrap; }
  .lb-combat-row > :last-child { word-break: break-word; }

  /* Price table: horizontal scroll if needed instead of cramping */
  .lb-price-table { font-size: 12px; }
  .lb-price-table td, .lb-price-table th { padding: 6px 8px; white-space: nowrap; }
  .lb-cm-prices { gap: 10px; font-size: 12px; }

  /* Energy pips easier to tap/read */
  .energy { width: 22px; height: 22px; font-size: 11px; }

  /* Link row wraps cleanly */
  .lb-links { gap: 6px; }
  .lb-link { padding: 8px 12px; font-size: 13px; }
}

/* Very-small phones */
@media (max-width: 400px) {
  .lb-image { max-height: 38vh; max-width: 82vw; }
  .lb-name { font-size: 20px; }
}

/* Expanded lightbox layout: image on left, meta+details scroll on right */
.lb-image-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-image {
  max-height: 78vh; max-width: 55vw;
  border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.7);
}
.lb-variant-tag {
  padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: white; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.lb-variant-tag.v-reverse { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.lb-variant-tag.v-shiny   { background: linear-gradient(135deg, #f0abfc, #a855f7, #60a5fa); background-size: 200% 100%; animation: shiny-shift 2.4s linear infinite; }
.lb-variant-tag.v-foil    { background: linear-gradient(135deg, #fbbf24, #f97316, #ef4444, #ec4899); background-size: 300% 300%; animation: foil-shift 3s linear infinite; }

.lb-meta {
  width: 400px; max-width: 40vw;
  max-height: 82vh;
  overflow-y: auto; padding-right: 8px;
  color: var(--text);
}
.lb-name { margin: 0 0 8px; font-size: 26px; line-height: 1.1; }
.lb-row { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); }
.lb-set { color: var(--muted); font-size: 13px; }
.lb-floor { background: color-mix(in oklab, var(--secret) 12%, transparent); padding: 8px 12px; border-radius: 8px; border: 1px solid color-mix(in oklab, var(--secret) 25%, transparent); }
.lb-floor-val { color: var(--secret); font-variant-numeric: tabular-nums; font-size: 18px; }
.lb-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

.lb-section { margin: 16px 0; }
.lb-subsection { margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.lb-subsection h4 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); font-weight: 800;
}

.lb-flavor {
  font-style: italic; color: var(--text-2); line-height: 1.55;
  padding: 10px 14px; background: var(--panel-2); border-radius: 8px;
  border-left: 3px solid var(--border-2);
  margin: 10px 0;
}

.lb-attack, .lb-ability {
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}
.lb-attack:first-child, .lb-ability:first-child { border-top: 0; padding-top: 0; }
.lb-attack-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.lb-attack-name { font-weight: 700; color: var(--text); flex: 1; }
.lb-attack-dmg { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.lb-attack-text { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.lb-ability-tag {
  font-size: 9px; letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase;
  background: var(--accent); color: white;
  padding: 2px 8px; border-radius: 3px;
}
.lb-attack-cost { display: inline-flex; gap: 3px; }

/* Pokemon energy pips */
.energy {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: white;
  background: #999;
}
.energy.e-grass     { background: var(--type-grass); }
.energy.e-fire      { background: var(--type-fire); }
.energy.e-water     { background: var(--type-water); }
.energy.e-lightning, .energy.e-electric { background: var(--type-electric); color: #4a3800; }
.energy.e-psychic   { background: var(--type-psychic); }
.energy.e-fighting  { background: var(--type-fighting); }
.energy.e-fairy     { background: #f8bbd0; color: #7a003d; }
.energy.e-dark, .energy.e-darkness { background: #222; }
.energy.e-metal     { background: #9aa0b1; color: #2c2f40; }
.energy.e-dragon    { background: #6b3fa0; }
.energy.e-colorless { background: #d4d4d4; color: #3a3a40; }

.lb-combat { display: grid; gap: 6px; }
.lb-combat-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.lb-combat-row > span:last-child, .lb-combat-row > b { color: var(--text); }
.lb-wr {
  padding: 2px 8px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
}

.lb-price-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.lb-price-table th {
  text-align: left; padding: 6px 10px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.lb-price-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.lb-price-table td:first-child { text-transform: capitalize; color: var(--text-2); }
.pr-low  { color: var(--muted); }
.pr-market { color: var(--accent-2); font-size: 14px; }
.pr-high { color: var(--muted); }

.lb-cm-prices { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.lb-cm-prices b { color: var(--accent-2); }

.lb-sub { font-size: 11px; color: var(--muted); margin-top: 6px; }

.lb-links {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.lb-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: border-color .15s, background .15s, transform .1s;
}
.lb-link:hover {
  border-color: var(--accent); background: var(--panel-3);
  transform: translateY(-1px);
}
.lb-link-placeholder { display: none; }

/* Sell bar */
.sell-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(24,26,38,0.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 14px 28px; display: flex; align-items: center; gap: 16px;
  transform: translateY(100%); transition: transform .25s;
  z-index: 25;
}
.sell-bar.shown { transform: translateY(0); }
.sell-bar .info { flex: 1; }
.sell-bar .total { color: var(--secret); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Toasts */
.toasts { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.toast {
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--border-2); border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 18px; font-size: 14px; min-width: 220px; max-width: 360px;
  color: var(--text);
  box-shadow: var(--shadow-md);
  animation: toast-in .3s var(--ease-spring);
}
.toast.error { border-left-color: var(--danger); background: color-mix(in oklab, var(--danger) 10%, var(--panel) 90%); }
.toast.success { border-left-color: var(--success); background: color-mix(in oklab, var(--success) 10%, var(--panel) 90%); }
@keyframes toast-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Loading / empty */
.empty {
  padding: 80px 20px; text-align: center; color: var(--muted);
  background: var(--panel); border: 1px dashed var(--border-2); border-radius: var(--radius);
  position: relative;
}
.empty h3 { color: var(--text); margin: 0 0 8px; font-size: 20px; font-weight: 700; }

/* Fairness page */
.fair-block {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-bottom: 18px;
}
.fair-block code, .mono {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  background: var(--bg-2); padding: 2px 8px; border-radius: 6px;
  word-break: break-all;
}

/* Rarity accent border for reveal cards */
.r-common   { border: 2px solid var(--common); border-radius: 12px; }
.r-uncommon { border: 2px solid var(--uncommon); border-radius: 12px; box-shadow: 0 0 18px rgba(69,215,163,0.35); }
.r-rare     { border: 2px solid var(--rare); border-radius: 12px; box-shadow: 0 0 22px rgba(74,163,255,0.45); }
.r-holo     { border: 2px solid var(--holo); border-radius: 12px; }
.r-ultra    { border: 2px solid var(--ultra); border-radius: 12px; }
.r-secret   { border: 2px solid var(--secret); border-radius: 12px; }

.rarity-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.rarity-pill.common   { background: rgba(138,143,168,0.2); color: var(--common); }
.rarity-pill.uncommon { background: rgba(69,215,163,0.2);  color: var(--uncommon); }
.rarity-pill.rare     { background: rgba(74,163,255,0.2);  color: var(--rare); }
.rarity-pill.holo     { background: rgba(180,99,255,0.2);  color: var(--holo); }
.rarity-pill.ultra    { background: rgba(255,155,61,0.2);  color: var(--ultra); }
.rarity-pill.secret   { background: rgba(255,216,74,0.2);  color: var(--secret); }

/* Responsive */
@media (max-width: 720px) {
  .topbar { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  .nav { order: 3; width: 100%; justify-content: space-around; overflow-x: auto; }
  .nav a { font-size: 13px; padding: 6px 10px; white-space: nowrap; }
  .wallet { gap: 8px; margin-left: auto; }
  .wallet .username { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main { padding: 20px 14px 100px; }
  .reveal-card { width: 140px; height: 196px; }
  .reveal-row { column-gap: 10px; row-gap: 56px; margin-bottom: 44px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .page-title { font-size: 24px; }
  .page-sub { font-size: 13px; margin-bottom: 16px; }
  .hall-tabs { overflow-x: auto; }
  .hall-tab { white-space: nowrap; padding: 10px 14px; font-size: 13px; }
  .stats-pills { gap: 6px; }
  .stats-pill { padding: 6px 10px; }
  .sp-val { font-size: 16px; }
  /* Tables scroll horizontally instead of breaking layout */
  .hall-table, .admin-table, .ledger-table {
    display: block; overflow-x: auto; white-space: nowrap;
  }
  .admin-search input { min-width: 0; }
  .trust-badges { gap: 6px; }
  .trust-badge { font-size: 11px; padding: 4px 10px; }
  .big-pull-banner { min-width: 0; width: calc(100vw - 32px); }
  .bell-dropdown { width: calc(100vw - 20px); right: 10px !important; }

  /* dis-bet banner — 2 rows on mobile: message then CTA */
  .disbet-banner { padding: 8px 14px; font-size: 12px; }
  .disbet-banner span:nth-child(2) { flex: 1 1 100%; }
  .db-link { margin-left: 0; padding: 5px 12px; font-size: 11px; }
  .db-close { width: 22px; height: 22px; }

  /* Pull ticker — tighter, smaller */
  .pull-ticker.shown { max-height: 30px; }
  .pt-strip { gap: 18px; padding: 6px 0; }
  .pt-item { font-size: 11px; }

  /* Tier grid — stack vertically, take full width */
  .tier-grid { grid-template-columns: 1fr; gap: 14px; }
  .tier-card { padding: 16px; }
  .tier-card .tier-name { font-size: 20px; }
  .tier-card .tier-cost { font-size: 14px; margin-bottom: 12px; }
  .tier-viz { height: 130px; }

  /* Landing hero — single column, smaller */
  .lh-inner { grid-template-columns: 1fr; padding: 18px 16px; gap: 14px; }
  .lh-title { font-size: 20px; }
  .lh-sub { font-size: 12px; margin-bottom: 12px; }
  .lh-cards { gap: 8px; }
  .lh-card { min-width: 120px; padding: 10px 12px; }
  .lh-amount { font-size: 18px; }

  /* Bell dropdown full-width */
  .bell-dropdown { width: calc(100vw - 20px); left: 10px !important; right: 10px !important; max-height: 60vh; }

  /* User menu dropdown also full-width on mobile */
  .um-dropdown { width: calc(100vw - 20px); right: 10px; min-width: 0; }

  /* Binder strip — full-width tiles on mobile */
  .binder-strip .set-tile { flex: 1 1 100%; max-width: none; }

  /* Recent pulls carousel — smaller thumbs */
  .rp-item { flex: 0 0 48px; width: 48px; height: 67px; }

  /* Summary row spacing tighter */
  .summary-row { gap: 8px; margin-bottom: 16px; }
  .rarity-chips { gap: 6px; }
  .summary-chip { font-size: 12px; padding: 4px 8px; }

  /* Admin panel search row stacks */
  .admin-search { flex-wrap: wrap; }

  /* Collection toolbar wraps + compresses */
  .collection-toolbar { gap: 8px; }
  .collection-toolbar input, .collection-toolbar select { font-size: 13px; }
  .price-range input { width: 60px; padding: 5px 6px; }

  /* Rip summary box shrinks */
  .rip-summary { gap: 10px; padding: 10px 14px; font-size: 13px; flex-wrap: wrap; justify-content: center; }

  /* Value ticker smaller during reveal */
  .value-ticker { padding: 8px 14px; }
  .vt-amount { font-size: 22px; }

  /* Onboarding modal — full-width on mobile */
  .ob-card { padding: 24px 20px; width: calc(100vw - 16px); max-height: 92vh; overflow-y: auto; }
  .ob-card h2 { font-size: 22px; }

  /* Admin modal — full sheet */
  .am-card { padding: 20px 18px; width: calc(100vw - 16px); }
  .am-card-wide { width: calc(100vw - 16px); max-height: 90vh; }

  /* Footer cleaner on mobile */
  .site-footer { padding: 24px 16px 32px; font-size: 12px; }
  .sf-links { gap: 12px; }
  .sf-small { font-size: 10px; }

  /* FAQ tighter */
  .faq-item summary { padding: 12px 14px; font-size: 14px; }
  .faq-answer { padding: 0 14px 14px; font-size: 13px; }

  /* Legal pages — less padding */
  .legal-block { padding: 20px 16px; }
  .legal-block h3 { font-size: 15px; }
  .legal-block p, .legal-block ul { font-size: 13px; }

  /* Hall cards table rows tighter */
  .hall-avatar { width: 22px; height: 22px; }

  /* Toast doesn't overflow */
  .toasts { bottom: 16px; right: 16px; left: 16px; }
  .toast { min-width: 0; max-width: none; font-size: 13px; }

  /* Tap targets — all buttons at least 44px */
  .btn { min-height: 38px; }
}

@media (max-width: 480px) {
  .brand-name { display: none; }
  .nav { gap: 0; }
  .nav a { padding: 6px 8px; font-size: 12px; }
  /* Tighten the wallet row so it stops overflowing */
  .topbar { padding: 10px 10px; gap: 6px; }
  .wallet { gap: 4px; }
  /* User menu collapses to just the avatar — tap avatar to open dropdown */
  .um-trigger .username { display: none; }
  .um-trigger { padding: 2px; }
  .um-avatar { width: 28px; height: 28px; }
  /* Shards pill trimmer */
  .shards { padding: 5px 10px; font-size: 13px; gap: 4px; }
  /* Daily button tighter */
  .daily-btn { padding: 5px 10px; font-size: 12px; }
  /* Circular control buttons slightly smaller */
  .sound-btn, .bell-btn, .theme-btn { width: 28px; height: 28px; font-size: 12px; }
  .bell-badge { min-width: 14px; height: 14px; font-size: 9px; top: -3px; right: -3px; }
}

/* Extra-narrow phones */
@media (max-width: 380px) {
  .topbar { padding: 8px; }
  .shards .s-icon { width: 10px; height: 10px; }
  /* Hide the theme + sound buttons on tiny phones — they're in the user menu if we add them */
  .theme-btn { display: none; }
}

/* ============================================================
   Polish pass — many small tweaks collected in one block
   ============================================================ */

/* 1. Nav underline now slides under rather than popping */
.nav a { transition: color .18s, background .18s, transform .18s; }
.nav a.active::after { animation: nav-underline-slide .3s var(--ease) both; }
@keyframes nav-underline-slide {
  from { transform: translateX(-50%) scaleX(0); }
  to   { transform: translateX(-50%) scaleX(1); }
}

/* 2. Stats pill hover lift */
.stats-pill { transition: transform .15s, border-color .15s, background .15s; }
.stats-pill:hover { transform: translateY(-2px); border-color: var(--border-2); }

/* 3. Rarity pill subtle gradient + hover bounce */
.rarity-pill {
  transition: transform .15s var(--ease-spring), filter .15s;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
.rarity-pill:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.15); }

/* 4. Price inputs focus */
.price-range input:focus, .admin-search input:focus {
  border-color: var(--accent-2); outline: none;
  box-shadow: 0 0 0 3px rgba(74,163,255,0.18);
}

/* 5. Table row hover lift — hall / admin / ledger */
.hall-table tr, .admin-table tr, .ledger-table tr { transition: background .15s, transform .15s; }
.hall-table tbody tr:hover, .admin-table tbody tr:hover, .ledger-table tbody tr:hover {
  background: rgba(255,210,74,0.04);
}

/* 6. Zebra striping (subtle) */
.hall-table tbody tr:nth-child(even) td,
.admin-table tbody tr:nth-child(even) td,
.ledger-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.015);
}

/* 7. User dropdown & bell dropdown entrance */
.um-dropdown:not(.hidden), .bell-dropdown:not(.hidden) {
  animation: dropdown-in .2s var(--ease-spring);
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 8. Toast now bounces in */
.toast { animation: toast-bounce-in .45s var(--ease-spring); }
@keyframes toast-bounce-in {
  0%   { transform: translateX(40px) scale(0.9); opacity: 0; }
  60%  { transform: translateX(-4px) scale(1.02); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* 9. Empty state with pokeball mark above the heading */
.empty { padding-top: 100px; }
.empty::before {
  content: '';
  position: absolute; top: 28px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(180deg, #ff4757 0%, #ff4757 48%, #111 48%, #111 52%, #f4f6fb 52%, #f4f6fb 100%);
  box-shadow: inset -3px -3px 6px rgba(0,0,0,0.3);
  opacity: 0.5;
}
.empty::after {
  content: ''; position: absolute; top: 43px; left: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translateX(-50%);
  background: #f4f6fb; box-shadow: 0 0 0 2px #111;
  opacity: 0.8;
}

/* 10. Trust badge hover */
.trust-badge { transition: transform .15s, background .15s, border-color .15s; }
.trust-badge:hover { transform: translateY(-1px); background: rgba(255,210,74,0.12); border-color: rgba(255,210,74,0.5); }

/* 11. Skip button hover glow */
.skip-btn:hover { box-shadow: 0 0 0 2px rgba(74,163,255,0.2); }

/* 12. Pref toggle focus outline */
.pref-toggle:focus-within { background: rgba(74,163,255,0.08); color: var(--text); }

/* 13. FAQ summary hover */
.faq-item summary { transition: background .15s, padding-left .15s; }
.faq-item summary:hover { background: rgba(255,255,255,0.03); }
.faq-item[open] summary { color: var(--accent); }

/* 14. Onboarding close button */
.ob-close { transition: background .15s, color .15s, transform .15s; }
.ob-close:hover { background: rgba(255,92,107,0.2); color: var(--danger); transform: rotate(90deg); }

/* 15. Set-tile active glow */
.set-tile.active { box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(255,210,74,0.18); }

/* 16. Pull ticker pause on hover */
.pull-ticker:hover .pt-strip { animation-play-state: paused; }

/* 17. Card label typography tightening */
.card-label .c-name { font-size: 13px; letter-spacing: 0.2px; }
.card-label .c-value { font-size: 11px; margin-top: 2px; }

/* 18. Error toast gets an action-indicator ::before */
.toast.error::before {
  content: '!'; display: inline-block;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger); color: white; font-weight: 700; font-size: 12px;
  text-align: center; line-height: 18px;
  margin-right: 8px; vertical-align: middle;
}
.toast.success::before {
  content: '✓'; display: inline-block;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--success); color: #0a0e1a; font-weight: 700; font-size: 12px;
  text-align: center; line-height: 18px;
  margin-right: 8px; vertical-align: middle;
}

/* 19. Fair block subtle divider */
.fair-block { transition: border-color .2s; }
.fair-block:hover { border-color: var(--border-2); }

/* 20. Binder strip transition */
.set-tile { transition: border-color .18s, background .18s, transform .18s, box-shadow .18s; }

/* 21. Value ticker — more prominent when +EV */
.value-ticker.plus-ev .vt-amount { color: var(--success); text-shadow: 0 0 18px rgba(88,230,160,0.5); }

/* 22. Admin action buttons inherit proper sizing */
.admin-actions .btn { transition: transform .1s, background .15s; }
.admin-actions .btn:hover { transform: translateY(-1px); }

/* 23. Lightbox bg click area shows "click to close" cursor */
.lightbox { cursor: zoom-out; }
.lightbox .lb-card, .lightbox .lb-close { cursor: default; }

/* 24. Collection card loaded animation */
.col-card { animation: col-card-in .35s var(--ease-out) both; }
@keyframes col-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 25. Hall tabs underline transition */
.hall-tab { transition: color .18s, border-color .18s, background .18s; }
.hall-tab:hover { background: rgba(255,255,255,0.02); }

/* 26. Admin user table avatar size consistency */
.admin-table .hall-avatar { width: 28px; height: 28px; }

/* 27. Ledger rows feel like transaction receipts */
.ledger-table td { transition: color .15s; }

/* 28. Better scrollbar corner */
::-webkit-scrollbar-corner { background: transparent; }

/* 29. Selection color matches brand */
::selection { background: rgba(255,210,74,0.3); color: var(--text); }

/* 30. Hidden utility for assistive screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 31. Tier-card shadow colors match gradient */
.tier-card.starter:hover { box-shadow: var(--shadow-md), 0 0 50px rgba(74,163,255,0.22); }
.tier-card.premium:hover { box-shadow: var(--shadow-md), 0 0 50px rgba(155,92,255,0.24); }
.tier-card.elite:hover   { box-shadow: var(--shadow-md), 0 0 50px rgba(255,155,61,0.25); }

/* 32. Rip summary card hover */
.rip-summary { transition: border-color .2s; }
.rip-summary:hover { border-color: var(--border-2); }

/* 33. Mobile: ensure tier-viz-fan scales down without cropping */
@media (max-width: 760px) {
  .tv-fan-card { width: 68px; height: 94px; }
  .tv-fan-0 { transform: translateX(-48px) rotate(-14deg); }
  .tv-fan-2 { transform: translateX(48px) rotate(14deg); }
  .tier-viz { min-height: 150px; }
}