/* ═══════════════════════════════════════════════════
   POKE MINERS — POKEMON CRYPTO MINING THEME
   PulseChain · Pokémon Trading Card Game Aesthetic
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Background Palette ── */
  --void:        #0D0D1A;
  --void-2:      #111124;
  --void-3:      #161632;
  --void-card:   rgba(16, 16, 38, 0.92);
  --void-card-2: rgba(20, 20, 48, 0.78);

  /* ── Pokeball Red ── */
  --poke-red:      #EE1515;
  --poke-red-dim:  #AA0F0F;
  --poke-red-glow: rgba(238, 21, 21, 0.28);

  /* ── Pikachu Yellow (primary accent) ── */
  --poke-yellow:      #FFD733;
  --poke-yellow-dim:  #C9A800;
  --poke-yellow-glow: rgba(255, 215, 51, 0.25);

  /* ── Water Blue ── */
  --poke-blue:      #6890F0;
  --poke-blue-dim:  #4060C0;
  --poke-blue-glow: rgba(104, 144, 240, 0.25);

  /* ── Grass Green ── */
  --poke-green:      #78C850;
  --poke-green-dim:  #4A8030;
  --poke-green-glow: rgba(120, 200, 80, 0.22);

  /* ── Fire Orange ── */
  --poke-fire:      #F08030;
  --poke-fire-dim:  #A05820;
  --poke-fire-glow: rgba(240, 128, 48, 0.25);

  /* ── Psychic Pink ── */
  --poke-psychic:     #F85888;
  --poke-psychic-dim: #C03060;
  --poke-psychic-glow: rgba(248, 88, 136, 0.22);

  /* ── Dragon Purple ── */
  --poke-dragon:     #7038F8;
  --poke-dragon-dim: #5020C0;
  --poke-dragon-glow: rgba(112, 56, 248, 0.25);

  /* ── Gold (Ultra/Legendary) ── */
  --gold:     #FFD700;
  --gold-dim: #A89000;
  --gold-glow: rgba(255, 215, 0, 0.3);

  /* ── Text ── */
  --text-bright: #F8F8FF;
  --text-main:   #C8D4E8;
  --text:        #A0B0CC;
  --text-sub:    #D8E0F0;
  --text-dim:    #98A4BC;
  --text-muted:  #485890;

  /* ── Borders ── */
  --border:         rgba(104, 144, 240, 0.12);
  --border-md:      rgba(104, 144, 240, 0.28);
  --border-hi:      rgba(104, 144, 240, 0.60);
  --border-yellow:  rgba(255, 215, 51, 0.30);
  --border-red:     rgba(238, 21, 21, 0.30);

  /* ── Fonts ── */
  /* Nunito is included as a fallback in display/mono stacks because Bangers
     and Share Tech Mono don't ship the ₽ Pokédollar glyph (U+20BD). Without
     this, mobile system fonts often render ₽ as a tofu/zero. Browsers do
     per-glyph fallback through the stack, so Bangers is still used for every
     character it has — only ₽ falls through to Nunito. */
  --f-display: 'Bangers', 'PKDSymbolShim', 'Nunito', cursive;
  --f-title:   'Nunito', 'PKDSymbolShim', sans-serif;
  --f-mono:    'Share Tech Mono', 'PKDSymbolShim', 'Nunito', monospace;
  --f-body:    'Nunito', 'PKDSymbolShim', sans-serif;

  /* ── Geometry ── */
  --radius-card: 14px;
  --radius-sm:   8px;
  --clip-btn: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --clip-badge: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}

/* ── PKD SYMBOL SHIM ────────────────────────────────────────────────────
   The Pokédollar uses ₽ (U+20BD RUBLE SIGN). Many mobile system fonts
   and most decorative web-fonts (Bangers, Share Tech Mono, Press Start 2P)
   don't include this glyph, so the browser falls through to a system font
   that may also lack it → tofu box. This @font-face only kicks in for
   U+20BD and rolls through fonts known to contain ₽ on each platform.
   No webfont download — uses local() only, falling back to whatever
   the user has installed. Roboto (Android), Apple Symbols (iOS), Segoe UI
   (Windows), Noto Sans (Linux) cover the major OS fonts. */
@font-face {
  font-family: 'PKDSymbolShim';
  font-style: normal;
  font-weight: 400;
  src:
    local('Roboto'),
    local('Segoe UI'),
    local('Segoe UI Symbol'),
    local('Apple Symbols'),
    local('SF Pro Text'),
    local('Helvetica Neue'),
    local('Noto Sans'),
    local('DejaVu Sans'),
    local('Arial Unicode MS');
  unicode-range: U+20BD;
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--text-main);
  font-family: var(--f-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── BACKGROUND LAYERS ──────────────────────────────── */
#pokeball-canvas {
  position: fixed; inset: 0;
  z-index: 0; opacity: 0.18; pointer-events: none;
}
#scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
  );
}
#vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%,
    transparent 45%, rgba(0,0,0,0.65) 100%
  );
}

/* ── CORNER DECORATIONS ─────────────────────────────── */
.corner-deco {
  position: fixed; z-index: 10; pointer-events: none;
  width: 56px; height: 56px;
}
.corner-tl { top: 0; left: 0;
  border-top: 2px solid var(--poke-red); border-left: 2px solid var(--poke-red);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 20% 20%, 20% 100%, 0 100%);
  opacity: 0.6;
}
.corner-tr { top: 0; right: 0;
  border-top: 2px solid var(--poke-red); border-right: 2px solid var(--poke-red);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%, 80% 20%, 0 20%);
  opacity: 0.6;
}
.corner-bl { bottom: 0; left: 0;
  border-bottom: 2px solid var(--poke-blue-dim); border-left: 2px solid var(--poke-blue-dim);
  clip-path: polygon(0 0, 20% 0, 20% 80%, 100% 80%, 100% 100%, 0 100%);
  opacity: 0.45;
}
.corner-br { bottom: 0; right: 0;
  border-bottom: 2px solid var(--poke-blue-dim); border-right: 2px solid var(--poke-blue-dim);
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%, 0 80%, 80% 80%);
  opacity: 0.45;
}

/* ── NAVBAR ─────────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; height: 64px;
  padding: 0 2rem; gap: 2rem;
  background: linear-gradient(180deg, rgba(13,13,26,0.98) 0%, rgba(13,13,26,0.92) 100%);
  border-bottom: 1px solid var(--border-md);
  backdrop-filter: blur(16px);
}

/* ── Logo ── */
.nav-logo {
  display: flex; align-items: center; gap: 0.75rem;
  flex-shrink: 0; user-select: none;
}
.logo-pokeball {
  width: 40px; height: 40px;
  filter: drop-shadow(0 0 8px var(--poke-red));
  animation: pokeSpin 12s linear infinite;
}
@keyframes pokeSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.logo-text-block { display: flex; flex-direction: column; line-height: 1.05; }
.logo-poke {
  font-family: var(--f-display); font-size: 0.75rem; letter-spacing: 0.4em;
  color: var(--poke-yellow);
  text-shadow: 0 0 12px var(--poke-yellow), 0 0 24px rgba(255,215,51,0.35);
}
.logo-miners {
  font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 0.2em;
  color: var(--poke-red);
  text-shadow: 0 0 12px var(--poke-red), 0 0 28px rgba(238,21,21,0.4);
}
.logo-ver {
  font-family: var(--f-mono); font-size: 0.5rem;
  color: var(--text-dim); align-self: flex-end; margin-bottom: 2px; letter-spacing: 0.1em;
}

/* ── Nav Links ── */
.nav-links { display: flex; list-style: none; gap: 0; flex: 1; justify-content: center; }
.nav-link {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0 1rem; height: 64px;
  font-family: var(--f-title); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--text-sub);
  text-decoration: none; position: relative; transition: color 0.2s;
}
.nav-pip {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-dim); flex-shrink: 0; transition: all 0.2s;
}
.nav-link:hover { color: var(--poke-blue); }
.nav-link:hover .nav-pip { background: var(--poke-blue); box-shadow: 0 0 6px var(--poke-blue); }
.nav-link.active { color: var(--poke-yellow); }
.nav-link.active .nav-pip { background: var(--poke-yellow); box-shadow: 0 0 8px var(--poke-yellow); }
.nav-link.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--poke-yellow), transparent);
  box-shadow: 0 0 8px var(--poke-yellow);
}

/* ── Nav Right ── */
.nav-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.pulse-badge {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.14em;
  color: var(--text-sub); padding: 0.3rem 0.65rem;
  border: 1px solid var(--border); background: rgba(104,144,240,0.04);
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--poke-green);
  box-shadow: 0 0 6px var(--poke-green); animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0.25} }

.btn-connect {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1.2rem;
  background: transparent; border: 1px solid var(--poke-red-dim);
  color: var(--poke-red); font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s;
  clip-path: var(--clip-btn);
}
.btn-connect:hover {
  border-color: var(--poke-red); color: var(--text-bright);
  background: rgba(238,21,21,0.12);
  box-shadow: 0 0 18px var(--poke-red-glow);
}
.btn-connect.connected {
  border-color: var(--poke-green); color: var(--poke-green);
  /* Drop the chamfer clip-path when connected so the wallet-brand chip
     (inserted at the left edge by wallet.js _setWalletBrandIcon) isn't
     visually cropped by the polygon corner. */
  clip-path: none;
  padding-left: 0.85rem;
}

/* Market rarity-filter buttons — emoji + label on desktop, emoji-only at
   narrow widths (≤600px) so the row doesn't wrap into 4 lines on a phone.
   The aria-label on each button keeps screen reader announcements intact. */
.rarity-pill-emoji { margin-right: 0.35rem; }
@media (max-width: 600px) {
  .rarity-pill-label { display: none; }
  .rarity-pill-emoji { margin-right: 0; }
}

/* ── Typography utility classes ───────────────────────────────────────────
   The codebase has dozens of repeated inline-style patterns matching these
   shapes. Extracted as utility classes so future pages (and gradual
   refactors of existing pages) can use a single class instead of a
   ~80-char inline style block. Naming follows: `.t-<role>-<modifier>`. */
.t-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--text-sub);
  letter-spacing: 0.12em;
}
.t-eyebrow-dim { font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-dim); letter-spacing: 0.12em; }
.t-meta        { font-family: var(--f-mono); font-size: 0.65rem; color: var(--text-sub); letter-spacing: 0.06em; }
.t-meta-dim    { font-family: var(--f-mono); font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.06em; }
.t-mono-xs     { font-family: var(--f-mono); font-size: 0.55rem; color: var(--text-dim); letter-spacing: 0.1em; }
.t-mono-sm     { font-family: var(--f-mono); font-size: 0.7rem;  color: var(--text-sub); }
.t-num-big {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text-bright);
}
.t-num-xl {
  font-family: var(--f-display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--text-bright);
}

/* ── Hamburger ── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 36px; height: 36px;
  background: none; border: 1px solid var(--border); cursor: pointer;
  padding: 6px; flex-shrink: 0; transition: border-color 0.2s;
}
.nav-hamburger:hover { border-color: var(--poke-yellow); }
.nav-hamburger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--text-sub); transition: all 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--poke-yellow); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--poke-yellow); }

/* ── Mobile Drawer ── */
#nav-mobile-drawer {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 98;
  background: rgba(13,13,26,0.98); border-bottom: 1px solid var(--border-md);
  backdrop-filter: blur(20px); padding: 0.5rem 0;
  transform: translateY(-8px); opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
}
#nav-mobile-drawer.open { transform: translateY(0); opacity: 1; pointer-events: all; }
.nav-drawer-links { list-style: none; }
.nav-drawer-links li a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--f-title); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em;
  color: var(--text-sub); text-decoration: none;
  border-left: 2px solid transparent; transition: all 0.15s;
}
.nav-drawer-links li a:hover,
.nav-drawer-links li a.active { color: var(--poke-yellow); border-left-color: var(--poke-yellow); background: rgba(255,215,51,0.05); }
.nav-drawer-links .nav-pip { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.6; }

/* ── MAIN APP ─────────────────────────────────────── */
#app {
  position: relative; z-index: 10;
  padding-top: 64px; min-height: 100vh;
}
.page {
  display: none; padding: 3rem 2.5rem 6rem;
  max-width: 1440px; margin: 0 auto;
  animation: pageReveal 0.35s ease;
}
.page.active { display: block; }
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PAGE HEADERS ──────────────────────────────────── */
.page-eyebrow {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.25em;
  color: var(--poke-blue); margin-bottom: 0.4rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.page-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--poke-blue); }

/* ── BIG TITLE ─────────────────────────────────────── */
.pm-title {
  font-family: var(--f-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.pm-title .word-poke {
  display: block;
  color: var(--poke-yellow);
  text-shadow:
    0 0 20px var(--poke-yellow),
    0 0 50px rgba(255,215,51,0.4),
    0 4px 0 rgba(200,150,0,0.5);
  animation: titleGlow 3s ease-in-out infinite alternate;
}
.pm-title .word-miners {
  display: block;
  color: var(--poke-red);
  font-size: 0.55em;
  letter-spacing: 0.3em;
  text-shadow: 0 0 16px var(--poke-red), 0 0 40px rgba(238,21,21,0.35);
}
@keyframes titleGlow {
  0%  { text-shadow: 0 0 15px var(--poke-yellow), 0 0 40px rgba(255,215,51,0.3); }
  100%{ text-shadow: 0 0 30px var(--poke-yellow), 0 0 70px rgba(255,215,51,0.6), 0 0 100px rgba(255,215,51,0.2); }
}

.page-subtitle {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--text-sub); letter-spacing: 0.14em; margin-bottom: 2.5rem;
}
.page-subtitle::before { content: '// '; color: var(--poke-blue); }

/* ── SECTION LABELS ──────────────────────────────────── */
.section-label {
  font-family: var(--f-title); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.22em; color: var(--poke-blue);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 0.75rem;
  text-transform: uppercase;
}
.section-label::before {
  content: ''; width: 4px; height: 16px;
  background: linear-gradient(180deg, var(--poke-red), var(--poke-yellow));
  flex-shrink: 0; border-radius: 2px;
}
.section-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border-md), transparent);
}

/* ── POKEMON CARDS ───────────────────────────────────── */
/* Base card — used for UI panels */
.p-card {
  background: var(--void-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  backdrop-filter: blur(10px);
}
.p-card:hover { border-color: var(--border-md); transform: translateY(-1px); }
.p-card[data-label]::after {
  content: attr(data-label);
  position: absolute; top: -0.6rem; left: 1.2rem;
  background: var(--void); padding: 0 0.5rem;
  font-family: var(--f-mono); font-size: 0.58rem;
  letter-spacing: 0.15em; color: var(--text-sub);
}

/* Highlight variants */
.p-card.glow-yellow {
  border-color: rgba(255,215,51,0.3);
  box-shadow: 0 0 20px rgba(255,215,51,0.08), inset 0 0 30px rgba(255,215,51,0.02);
}
.p-card.glow-red {
  border-color: rgba(238,21,21,0.3);
  box-shadow: 0 0 20px rgba(238,21,21,0.08), inset 0 0 30px rgba(238,21,21,0.02);
}
.p-card.glow-blue {
  border-color: var(--border-md);
  box-shadow: 0 0 20px var(--poke-blue-glow), inset 0 0 30px rgba(104,144,240,0.02);
}

/* ── POKEMON NFT CARD ────────────────────────────────── */
/* This is the actual Pokemon card design */
.poke-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  background: linear-gradient(160deg, var(--void-2), var(--void-3));
  border: 1.5px solid var(--border-md);
  user-select: none;
}
.poke-card:hover { transform: translateY(-4px) scale(1.02); }

/* Card top band (type color) */
.poke-card-top {
  height: 6px;
  width: 100%;
}

/* Pokemon image area */
.poke-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.04) 0%,
    transparent 70%
  );
}
.poke-card-img img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  transition: transform 0.3s ease;
  image-rendering: auto;
}
.poke-card:hover .poke-card-img img { transform: scale(1.08) translateY(-2px); }

/* Card body */
.poke-card-body {
  padding: 0.6rem 0.75rem 0.8rem;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
}
.poke-card-number {
  font-family: var(--f-mono); font-size: 0.62rem;
  color: #ffffff; letter-spacing: 0.1em; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.poke-card-name {
  font-family: var(--f-title); font-weight: 800; font-size: 0.92rem;
  color: var(--text-bright); letter-spacing: 0.04em;
  margin: 0.1rem 0 0.3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.poke-card-stats {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.4rem;
}
.poke-card-power {
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--poke-yellow);
  display: flex; align-items: center; gap: 0.25rem;
}
.poke-card-power-icon { font-size: 0.65rem; opacity: 0.8; }

/* Card action buttons */
.poke-card-actions {
  display: flex; gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.poke-card-actions button {
  flex: 1; padding: 0.35rem; font-size: 0.62rem;
  font-family: var(--f-title); font-weight: 700; letter-spacing: 0.08em;
  border: 1px solid; border-radius: 4px; cursor: pointer;
  transition: all 0.15s; background: transparent;
}

/* ── RARITY BORDERS ──────────────────────────────────── */
.rarity-common    { border-color: rgba(160,160,180,0.4) !important; }
/* Off-screen cards skip layout + paint until they scroll into view. Massive
   win on /collection and /pokedex which can render 50-150 cards at once. */
.poke-card,
.dex-card {
  content-visibility: auto;
  contain-intrinsic-size: 240px 280px;
}

/* Honor user preference — kills every infinite animation including the
   rarity glow, holo shimmer, badge sweep, and pack float. Sweep extended
   to cover the connect-button pulse, source-status chips, pack glows,
   logo spin, and pack-float so motion-sensitive users get a quiet UI. */
@media (prefers-reduced-motion: reduce) {
  .rarity-holo, .rarity-ultra, .rarity-secret,
  .badge-ultra, .badge-secret,
  .pack-card-ball,
  .poke-card.rarity-holo .poke-card-img::after,
  .poke-card.rarity-ultra .poke-card-img::after,
  .poke-card.rarity-secret .poke-card-img::after,
  #pm-tx-banner .pm-tx-card,
  .live-ticker .ticker-track,
  .btn-connect:not(.connected),
  .source-chip.live, .source-chip.cached, .source-chip.pending,
  .pack-card[data-tier], .pack-card-glow,
  .pm-logo, .pm-logo svg {
    animation: none !important;
  }
}

/* Keyboard focus indicator — universal :focus-visible ring so users tabbing
   through the UI can always tell where they are. Previously no styles were
   defined which gave keyboard navigators zero feedback. Uses outline so it
   doesn't shift layout. Skipped for elements that own their own focus
   styles (form inputs already have .p-input:focus, button bg shifts on
   :hover etc) — :focus-visible is a hover-equivalent for tab users only,
   so won't appear on click-focus where it would be visual noise. */
*:focus-visible {
  outline: 2px solid var(--poke-yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

.rarity-uncommon  { border-color: rgba(120,200,80,0.5) !important;
  box-shadow: 0 0 10px rgba(120,200,80,0.12); }
.rarity-rare      { border-color: rgba(104,144,240,0.6) !important;
  box-shadow: 0 0 14px rgba(104,144,240,0.18); }
.rarity-holo {
  border-color: rgba(192,110,235,0.7) !important;
  box-shadow: 0 0 16px rgba(192,110,235,0.22);
  animation: holoPulse 3s ease-in-out infinite;
}
@keyframes holoPulse {
  0%,100% { box-shadow: 0 0 14px rgba(192,110,235,0.2); border-color: rgba(192,110,235,0.6) !important; }
  50%      { box-shadow: 0 0 28px rgba(192,110,235,0.45); border-color: rgba(192,110,235,0.95) !important; }
}
.rarity-ultra {
  border-color: rgba(255,215,0,0.8) !important;
  box-shadow: 0 0 18px rgba(255,215,0,0.25);
  animation: ultraPulse 2.5s ease-in-out infinite;
}
@keyframes ultraPulse {
  0%,100% { box-shadow: 0 0 12px rgba(255,215,0,0.2), inset 0 0 20px rgba(255,215,0,0.03); border-color: rgba(255,215,0,0.65) !important; }
  50%      { box-shadow: 0 0 30px rgba(255,215,0,0.55), inset 0 0 35px rgba(255,215,0,0.08); border-color: rgba(255,215,0,1) !important; }
}
.rarity-secret {
  border-color: rgba(255,60,180,0.9) !important;
  animation: secretPulse 1.8s ease-in-out infinite;
}
@keyframes secretPulse {
  0%   { box-shadow: 0 0 18px rgba(255,60,180,0.4); border-color: rgba(255,60,180,0.8) !important; }
  33%  { box-shadow: 0 0 28px rgba(100,60,255,0.5); border-color: rgba(100,60,255,0.9) !important; }
  66%  { box-shadow: 0 0 28px rgba(60,200,255,0.5); border-color: rgba(60,200,255,0.9) !important; }
  100% { box-shadow: 0 0 18px rgba(255,60,180,0.4); border-color: rgba(255,60,180,0.8) !important; }
}

/* Holo shimmer overlay */
.poke-card.rarity-holo .poke-card-img::after,
.poke-card.rarity-ultra .poke-card-img::after,
.poke-card.rarity-secret .poke-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    transparent 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  );
  animation: holoShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes holoShimmer {
  0%,100% { transform: translateX(-100%) rotate(10deg); }
  50%      { transform: translateX(200%) rotate(10deg); }
}

/* ── RARITY BADGES ───────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.55rem;
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  border: 1px solid; border-radius: 4px;
}
.badge-common   { color: #A0A0B8; border-color: rgba(160,160,184,0.35); background: rgba(160,160,184,0.06); }
.badge-uncommon { color: var(--poke-green); border-color: rgba(120,200,80,0.4); background: rgba(120,200,80,0.07); }
.badge-rare     { color: var(--poke-blue); border-color: rgba(104,144,240,0.45); background: rgba(104,144,240,0.08); }
.badge-holo     { color: #C06EEB; border-color: rgba(192,110,235,0.45); background: rgba(192,110,235,0.08); }
.badge-ultra    { color: var(--gold); border-color: rgba(255,215,0,0.45); background: rgba(255,215,0,0.08);
  animation: ultraBadge 2.5s ease-in-out infinite; }
@keyframes ultraBadge { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px rgba(255,215,0,0.5)} }
.badge-secret {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  background: linear-gradient(90deg, #FF3CB4, #6440FF, #3CC8FF, #FF3CB4);
  background-size: 300% 100%;
  animation: secretBadge 2s linear infinite;
  text-shadow: 0 0 6px rgba(255,255,255,0.8);
}
@keyframes secretBadge { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

/* ── TYPE BADGES ─────────────────────────────────────── */
.type-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.12rem 0.5rem;
  font-family: var(--f-title); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.06em;
  border-radius: 20px; text-transform: uppercase;
}
.type-normal   { background: rgba(168,168,120,0.2); color: #A8A878; border: 1px solid rgba(168,168,120,0.3); }
.type-fire     { background: rgba(240,128,48,0.2);  color: #F08030; border: 1px solid rgba(240,128,48,0.35); }
.type-water    { background: rgba(104,144,240,0.2); color: #6890F0; border: 1px solid rgba(104,144,240,0.35); }
.type-electric { background: rgba(248,208,48,0.2);  color: #F8D030; border: 1px solid rgba(248,208,48,0.35); }
.type-grass    { background: rgba(120,200,80,0.2);  color: #78C850; border: 1px solid rgba(120,200,80,0.35); }
.type-ice      { background: rgba(152,216,216,0.2); color: #98D8D8; border: 1px solid rgba(152,216,216,0.3); }
.type-fighting { background: rgba(192,48,40,0.2);   color: #C03028; border: 1px solid rgba(192,48,40,0.35); }
.type-poison   { background: rgba(160,64,160,0.2);  color: #A040A0; border: 1px solid rgba(160,64,160,0.35); }
.type-ground   { background: rgba(224,192,104,0.2); color: #E0C068; border: 1px solid rgba(224,192,104,0.3); }
.type-flying   { background: rgba(168,144,240,0.2); color: #A890F0; border: 1px solid rgba(168,144,240,0.35); }
.type-psychic  { background: rgba(248,88,136,0.2);  color: #F85888; border: 1px solid rgba(248,88,136,0.35); }
.type-bug      { background: rgba(168,184,32,0.2);  color: #A8B820; border: 1px solid rgba(168,184,32,0.3); }
.type-rock     { background: rgba(184,160,56,0.2);  color: #B8A038; border: 1px solid rgba(184,160,56,0.3); }
.type-ghost    { background: rgba(112,88,152,0.2);  color: #705898; border: 1px solid rgba(112,88,152,0.35); }
.type-dragon   { background: rgba(112,56,248,0.2);  color: #7038F8; border: 1px solid rgba(112,56,248,0.4); }
.type-steel    { background: rgba(184,184,208,0.2); color: #B8B8D0; border: 1px solid rgba(184,184,208,0.3); }

/* ── METRIC CARDS ───────────────────────────────────── */
.metric-value {
  font-family: var(--f-title); font-size: 2.4rem; font-weight: 900;
  line-height: 1; color: var(--poke-yellow);
  text-shadow: 0 0 14px rgba(255,215,51,0.4);
}
.metric-value.blue    { color: var(--poke-blue);   text-shadow: 0 0 14px var(--poke-blue-glow); }
.metric-value.red     { color: var(--poke-red);    text-shadow: 0 0 14px var(--poke-red-glow); }
.metric-value.green   { color: var(--poke-green);  text-shadow: 0 0 14px var(--poke-green-glow); }
.metric-value.gold    { color: var(--gold);         text-shadow: 0 0 14px var(--gold-glow); }
.metric-label {
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.18em; color: var(--text-sub); margin-top: 0.3rem;
}
.metric-sub {
  font-family: var(--f-mono); font-size: 0.64rem;
  color: var(--text-dim); margin-top: 0.5rem;
}

/* ── PROGRESS BAR ───────────────────────────────────── */
.progress-bar {
  height: 5px; background: rgba(104,144,240,0.08);
  border: 1px solid var(--border); border-radius: 3px;
  margin: 0.5rem 0; overflow: hidden;
}
.progress-fill {
  height: 100%; transition: width 1s ease; border-radius: 3px;
}
.progress-fill.yellow { background: linear-gradient(90deg, var(--poke-yellow-dim), var(--poke-yellow)); box-shadow: 0 0 8px var(--poke-yellow); }
.progress-fill.blue   { background: linear-gradient(90deg, var(--poke-blue-dim), var(--poke-blue)); box-shadow: 0 0 8px var(--poke-blue); }
.progress-fill.red    { background: linear-gradient(90deg, var(--poke-red-dim), var(--poke-red)); box-shadow: 0 0 8px var(--poke-red); }
.progress-fill.green  { background: linear-gradient(90deg, var(--poke-green-dim), var(--poke-green)); box-shadow: 0 0 8px var(--poke-green); }
.progress-label {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 0.6rem; color: var(--text-sub); letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

/* ── POOL RING ──────────────────────────────────────── */
.pool-ring-wrap {
  position: relative; width: 150px; height: 150px; margin: 0 auto;
}
.pool-ring-wrap svg { transform: rotate(-90deg); }
.pool-ring-bg { fill: none; stroke: rgba(104,144,240,0.08); stroke-width: 10; }
.pool-ring-fill {
  fill: none; stroke-width: 10; stroke-linecap: butt;
  stroke: url(#ringGrad);
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 5px var(--poke-yellow));
}
.pool-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 2rem; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,215,51,0.2) 0%, rgba(238,21,21,0.12) 100%);
  border: 1.5px solid var(--poke-yellow-dim);
  color: var(--poke-yellow); font-family: var(--f-title); font-size: 0.88rem;
  font-weight: 800; letter-spacing: 0.12em;
  clip-path: var(--clip-btn); transition: all 0.2s; position: relative; overflow: hidden;
  border-radius: 4px;
}
.btn-primary:hover {
  border-color: var(--poke-yellow); color: var(--text-bright);
  box-shadow: 0 0 24px var(--poke-yellow-glow); transform: translateY(-2px);
}
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.btn-red {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.6rem; cursor: pointer;
  background: linear-gradient(135deg, rgba(238,21,21,0.18), transparent);
  border: 1.5px solid var(--poke-red-dim); color: var(--poke-red);
  font-family: var(--f-title); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em;
  clip-path: var(--clip-btn); transition: all 0.2s;
}
.btn-red:hover { border-color: var(--poke-red); box-shadow: 0 0 18px var(--poke-red-glow); }

.btn-blue {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.6rem; cursor: pointer;
  background: linear-gradient(135deg, rgba(104,144,240,0.15), transparent);
  border: 1.5px solid var(--poke-blue-dim); color: var(--poke-blue);
  font-family: var(--f-title); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em;
  clip-path: var(--clip-btn); transition: all 0.2s;
}
.btn-blue:hover { border-color: var(--poke-blue); box-shadow: 0 0 18px var(--poke-blue-glow); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.4rem; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-sub); font-family: var(--f-title); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.08em; transition: all 0.15s;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { border-color: var(--border-md); color: var(--text-main); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.4rem; cursor: pointer;
  background: transparent; border: 1px solid rgba(238,21,21,0.35);
  color: var(--poke-red); font-family: var(--f-title); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.08em; transition: all 0.15s;
  border-radius: var(--radius-sm);
}
.btn-danger:hover { border-color: var(--poke-red); box-shadow: 0 0 12px var(--poke-red-glow); }

/* ── LIVE TICKER ─────────────────────────────────────── */
.live-ticker {
  font-family: var(--f-mono); font-size: 0.65rem; overflow: hidden;
  white-space: nowrap; margin-bottom: 2.5rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 0.35rem 0; position: relative;
  background: linear-gradient(90deg, rgba(238,21,21,0.04), transparent, rgba(255,215,51,0.04));
}
.ticker-label {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 0.75rem; background: rgba(238,21,21,0.15);
  border-right: 1px solid var(--border-md);
  color: var(--poke-red); font-size: 0.6rem; letter-spacing: 0.1em; z-index: 2;
}
.ticker-track {
  display: inline-block; padding-left: 120px;
  animation: tickScroll 50s linear infinite; color: var(--text-sub);
}
@keyframes tickScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── INPUTS ──────────────────────────────────────────── */
.p-input {
  background: rgba(10,10,26,0.8); border: 1px solid var(--border);
  color: var(--text-main); font-family: var(--f-mono); font-size: 0.82rem;
  padding: 0.6rem 1rem; width: 100%; outline: none;
  transition: border-color 0.2s; border-radius: var(--radius-sm);
}
.p-input:focus { border-color: var(--poke-yellow); box-shadow: 0 0 10px var(--poke-yellow-glow); }
.p-input::placeholder { color: var(--text-dim); }
.p-select {
  background: rgba(10,10,26,0.8); border: 1px solid var(--border);
  color: var(--text-main); font-family: var(--f-mono); font-size: 0.75rem;
  padding: 0.55rem 0.8rem; outline: none; cursor: pointer;
  border-radius: var(--radius-sm);
}
.input-label {
  display: block; font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--text-sub); letter-spacing: 0.16em; margin-bottom: 0.35rem;
}
.input-group { margin-bottom: 1.1rem; }

/* ── GRIDS ───────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.poke-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.poke-grid-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }

/* ── TABLES ──────────────────────────────────────────── */
.p-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.p-table th {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  color: var(--text-sub); text-align: left; padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-md);
  background: rgba(104,144,240,0.03);
}
.p-table td {
  padding: 0.75rem 1rem; border-bottom: 1px solid rgba(104,144,240,0.04);
  color: var(--text-sub); font-family: var(--f-mono);
}
.p-table tr:hover td { background: rgba(104,144,240,0.03); color: var(--text-main); }

/* ── TOAST ───────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
  padding: 0.65rem 1.4rem; min-width: 280px;
  border: 1px solid var(--border-md); border-left: 3px solid var(--poke-yellow);
  background: rgba(13,13,26,0.97);
  color: var(--text-main); font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.04em; backdrop-filter: blur(12px);
  border-radius: 8px;
  animation: toastIn 0.25s ease, toastOut 0.3s ease 3.5s forwards;
}
.toast.error { border-left-color: var(--poke-red); color: #ff8899; }
.toast.success { border-left-color: var(--poke-green); color: var(--poke-green); }
@keyframes toastIn  { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
@keyframes toastOut { to{opacity:0;pointer-events:none} }

/* ── MODAL ───────────────────────────────────────────── */
#modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,5,15,0.88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
#modal-overlay.hidden { display: none; }
#modal-box {
  background: var(--void-card); max-width: 640px; width: 92%;
  border: 1px solid var(--border-md); border-radius: 16px;
  box-shadow: 0 0 60px rgba(238,21,21,0.1), 0 0 80px rgba(0,0,0,0.6);
  overflow: hidden; max-height: 90vh;
  display: flex; flex-direction: column;
}
.modal-chrome {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border);
  background: rgba(238,21,21,0.04); flex-shrink: 0;
}
.modal-pokeball { opacity: 0.8; animation: pokeSpin 6s linear infinite; }
.modal-sys-label { font-family: var(--f-mono); font-size: 0.58rem; color: var(--text-dim); letter-spacing: 0.12em; }
.modal-x {
  margin-left: auto; background: none; border: none;
  color: var(--text-sub); font-size: 1rem; cursor: pointer;
  padding: 0 0.25rem; transition: color 0.15s;
}
.modal-x:hover { color: var(--poke-red); }
#modal-content { padding: 1.8rem 2rem; overflow-y: auto; flex: 1; }

/* ── ACTIVITY FEED ───────────────────────────────────── */
.feed-line {
  padding: 0.35rem 1.25rem;
  font-size: 0.68rem; font-family: var(--f-mono);
  color: var(--text-sub); border-bottom: 1px solid rgba(104,144,240,0.04);
  animation: feedIn 0.25s ease;
}
@keyframes feedIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }

/* ── DIVIDER ─────────────────────────────────────────── */
.divider {
  height: 1px; margin: 2rem 0;
  background: linear-gradient(90deg, transparent, var(--border-md), transparent);
  position: relative;
}
.divider::after {
  content: '◆'; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background: var(--void); padding: 0 0.6rem;
  color: var(--text-dim); font-size: 0.5rem;
}

/* ── PACK CARDS (Store) ──────────────────────────────── */
.pack-card {
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}
.pack-card:hover { transform: translateY(-6px); }
.pack-card-inner {
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
.pack-card-ball {
  width: 80px; height: 80px;
  animation: packFloat 3s ease-in-out infinite;
}
/* Suppress the float for higher-tier packs that already get the card-level
   glow animation. Three simultaneous compounding animations (float + glow +
   center-button rotation) was a measurable compositor cost AND the glow
   pulse already conveys "premium" — the float adds nothing on top. */
.pack-card[data-tier="ultraball"]  .pack-card-ball,
.pack-card[data-tier="masterball"] .pack-card-ball {
  animation: none;
}
@keyframes packFloat {
  0%,100% { transform: translateY(0); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); }
  50%      { transform: translateY(-8px); filter: drop-shadow(0 16px 24px rgba(0,0,0,0.6)); }
}
.pack-name { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.1em; }
.pack-desc { font-family: var(--f-body); font-size: 0.8rem; color: var(--text-sub); }
.pack-price {
  font-family: var(--f-title); font-weight: 900; font-size: 1.2rem;
  color: var(--poke-yellow);
}
.pack-odds {
  display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
  font-family: var(--f-mono); font-size: 0.58rem;
}

/* ── POKEDEX GRID ────────────────────────────────────── */
.dex-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden; cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  background: var(--void-card);
  aspect-ratio: 3/4;
  display: flex; flex-direction: column;
}
.dex-card:hover { transform: translateY(-3px); border-color: var(--border-md); }
.dex-card.owned { border-color: var(--border-md); }
.dex-card-img {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0.75rem;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.03), transparent);
}
.dex-card-img img {
  width: 75%; height: 75%; object-fit: contain;
  transition: transform 0.3s;
}
.dex-card:hover .dex-card-img img { transform: scale(1.1); }
.dex-card.not-owned .dex-card-img img {
  filter: brightness(0) invert(0.08) sepia(0.3);
  opacity: 0.4;
}
.dex-card-info {
  padding: 0.4rem 0.5rem 0.5rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
}
.dex-num { font-family: var(--f-mono); font-size: 0.55rem; color: var(--text-dim); }
.dex-name {
  font-family: var(--f-title); font-weight: 800; font-size: 0.78rem;
  color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dex-card.not-owned .dex-name { color: var(--text-dim); }

/* ── MARKET ITEM ─────────────────────────────────────── */
.market-item {
  display: grid; grid-template-columns: 70px 1fr auto auto;
  align-items: center; gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.market-item:hover { background: rgba(104,144,240,0.03); }
.market-item-img {
  width: 60px; height: 60px; border-radius: 8px;
  object-fit: contain; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

/* ── LEADERBOARD ROW ─────────────────────────────────── */
.lb-row {
  display: grid; grid-template-columns: 50px 1fr auto auto auto;
  align-items: center; gap: 1rem;
  padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.lb-row:hover { background: rgba(255,215,51,0.03); }
.lb-rank {
  font-family: var(--f-display); font-size: 1.4rem;
  color: var(--text-dim); text-align: center;
}
.lb-rank.gold-rank    { color: var(--gold);       text-shadow: 0 0 12px var(--gold-glow); }
.lb-rank.silver-rank  { color: #C0C0C0;           text-shadow: 0 0 8px rgba(192,192,192,0.4); }
.lb-rank.bronze-rank  { color: #CD7F32;           text-shadow: 0 0 8px rgba(205,127,50,0.4); }

/* ── FILTER BAR ──────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.filter-btn {
  padding: 0.3rem 0.75rem;
  font-family: var(--f-title); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-sub); cursor: pointer; border-radius: 20px;
  transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--poke-blue); color: var(--poke-blue); }
.filter-btn.active {
  background: rgba(104,144,240,0.15); border-color: var(--poke-blue);
  color: var(--poke-blue);
}
.filter-btn.active-yellow {
  background: rgba(255,215,51,0.12); border-color: var(--poke-yellow);
  color: var(--poke-yellow);
}

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--poke-blue-dim); }

/* ── UTILITIES ───────────────────────────────────────── */
.hidden { display: none !important; }
.mt-1{margin-top:0.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem}
.mb-1{margin-bottom:0.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem}
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; gap: 0.75rem; }
.text-yellow{color:var(--poke-yellow)} .text-red{color:var(--poke-red)} .text-blue{color:var(--poke-blue)}
.text-green{color:var(--poke-green)} .text-gold{color:var(--gold)}
.text-dim{color:var(--text-dim)} .text-sub{color:var(--text-sub)}

/* ── WALLET OPTION BUTTONS ───────────────────────────── */
.wallet-option-btn {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; width: 100%; cursor: pointer;
  border: 1px solid; font-family: var(--f-title); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.06em;
  transition: all 0.18s; text-decoration: none;
  background: transparent; border-radius: 10px;
}
.wallet-option-btn:hover { transform: translateX(4px); }

/* ═════════════════════════════════════════════════════
   VIBRANCY PASS — added 2026-05-08
   Hero glow, live chips, button shimmer, punched glows.
   ═════════════════════════════════════════════════════ */

/* ── Hero gradient behind page titles ─────────────────── */
.page::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 920px; max-width: 100vw; height: 360px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,215,51,0.10), transparent 55%),
    radial-gradient(ellipse at 30% 30%, rgba(238,21,21,0.08), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(104,144,240,0.07), transparent 60%);
  pointer-events: none;
  z-index: -1;
  filter: blur(2px);
}
.page { position: relative; }

/* ── Source / freshness chips (live, demo, empty, pending) ──
   Used by leaderboard/market/collection meta lines. The JS sets a
   .source-chip class plus a state modifier on the meta element. */
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--border-md);
  border-radius: 999px;
  background: rgba(13,13,26,0.6);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--text-sub);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.source-chip::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}
.source-chip.live    { border-color: rgba(120,200,80,0.45); color: var(--poke-green); box-shadow: 0 0 12px rgba(120,200,80,0.18); }
.source-chip.live::before    { background: var(--poke-green); box-shadow: 0 0 8px var(--poke-green); animation: pulseDot 2s ease-in-out infinite; }
.source-chip.demo    { border-color: rgba(255,215,51,0.45); color: var(--poke-yellow); }
.source-chip.demo::before    { background: var(--poke-yellow); }
.source-chip.empty   { border-color: rgba(238,21,21,0.35); color: #ff6c6c; }
.source-chip.empty::before   { background: var(--poke-red); }
.source-chip.pending { border-color: var(--border-md); color: var(--text-sub); }
.source-chip.pending::before { background: var(--poke-blue); animation: pulseDot 1.2s ease-in-out infinite; }

/* ── Big-title glow gets a punched-up version ────────── */
.pm-title .word-poke {
  text-shadow:
    0 0 22px var(--poke-yellow),
    0 0 56px rgba(255,215,51,0.55),
    0 0 110px rgba(255,215,51,0.18),
    0 4px 0 rgba(200,150,0,0.55);
}
.pm-title .word-miners {
  text-shadow:
    0 0 18px var(--poke-red),
    0 0 48px rgba(238,21,21,0.55),
    0 0 100px rgba(238,21,21,0.18);
}

/* ── Primary button hover shimmer ─────────────────────── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%, transparent 35%,
    rgba(255,255,255,0.18) 50%,
    transparent 65%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ── Connect-wallet button gets a subtle pulse when not connected ── */
.btn-connect:not(.connected) {
  animation: connectPulse 3.5s ease-in-out infinite;
}
@keyframes connectPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,21,21,0); }
  50%       { box-shadow: 0 0 18px rgba(238,21,21,0.45); }
}

/* ── Token balance bar — gradient + subtle accent ─────── */
#pm-token-bar {
  background:
    linear-gradient(90deg,
      rgba(238,21,21,0.05) 0%,
      rgba(13,13,26,0.92) 30%,
      rgba(13,13,26,0.92) 70%,
      rgba(255,215,51,0.05) 100%) !important;
  border-bottom: 1px solid rgba(255,215,51,0.18) !important;
  box-shadow: 0 1px 0 rgba(104,144,240,0.06);
}
#pm-token-bar #tb-refresh:hover { color: var(--poke-yellow) !important; opacity: 1 !important; transform: rotate(-30deg); transition: transform 0.3s, color 0.2s; }

/* ── Filter buttons — energetic active states ─────────── */
.filter-btn { transition: all 0.15s ease; }
.filter-btn.active-yellow {
  box-shadow: 0 0 14px rgba(255,215,51,0.25), inset 0 0 12px rgba(255,215,51,0.04);
}
.filter-btn.active {
  box-shadow: 0 0 14px rgba(104,144,240,0.25), inset 0 0 12px rgba(104,144,240,0.04);
}

/* ── Pack cards — pulse for the rare ones ─────────────── */
.pack-card[data-tier="ultraball"] { animation: packGlowYellow 4s ease-in-out infinite; }
.pack-card[data-tier="masterball"] { animation: packGlowPurple 3s ease-in-out infinite; }
@keyframes packGlowYellow {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,208,48,0); }
  50%      { box-shadow: 0 0 28px rgba(248,208,48,0.28); }
}
@keyframes packGlowPurple {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,110,235,0); }
  50%      { box-shadow: 0 0 32px rgba(192,110,235,0.35); }
}

/* ── Lift rarity glows slightly so the page feels alive ── */
.rarity-rare      { box-shadow: 0 0 18px rgba(104,144,240,0.22); }
.rarity-holo      { box-shadow: 0 0 22px rgba(192,110,235,0.30); }
.rarity-ultra     { box-shadow: 0 0 22px rgba(255,215,0,0.30); }

/* ── Pokémon card hover — extra "card lift" energy ─────── */
.poke-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 22px rgba(255,215,51,0.10);
}

/* ── Section dividers — gradient edge gets stronger color ── */
.section-label::after {
  background: linear-gradient(90deg, var(--border-hi), transparent);
}

/* ── Live ticker — slightly more saturated wash ─────────── */
.live-ticker {
  background: linear-gradient(90deg,
    rgba(238,21,21,0.08) 0%,
    rgba(13,13,26,0.6) 40%,
    rgba(13,13,26,0.6) 60%,
    rgba(255,215,51,0.08) 100%);
}

/* ── RESPONSIVE TABLET (≤1100px) ─────────────────────── */
@media(max-width:1100px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ── RESPONSIVE TABLET (≤900px) ─────────────────────── */
@media(max-width:900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  #navbar { padding: 0 1rem; gap: 0.75rem; }
  .logo-ver { display: none; }
  .page { padding: 2rem 1rem 5rem; }
  .pm-title { font-size: 3rem; }
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; }
  .poke-grid-lg { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── RESPONSIVE MOBILE (≤600px) ─────────────────────── */
@media(max-width:600px) {
  #navbar { height: 56px; padding: 0 0.7rem; gap: 0.4rem; }
  #nav-mobile-drawer { top: 56px; }
  #app { padding-top: 56px; }
  .page { padding: 1.25rem 0.75rem 5rem; }
  .pm-title { font-size: 2.2rem; }
  .page-subtitle { font-size: 0.7rem; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .poke-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .poke-grid-lg { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  /* Token bar — wraps and uses smaller text */
  #pm-token-bar { padding: 0.5rem 0.75rem !important; gap: 0.75rem !important; font-size: 0.7rem !important; }
  #pm-token-bar > span:first-child { font-size: 0.55rem !important; width: 100%; text-align: left; margin-bottom: 0.15rem; }

  /* Market items — stack into 2 columns instead of 4 */
  .market-item { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 0.6rem !important; padding: 0.7rem !important; }
  .market-item > *:nth-child(3),
  .market-item > *:nth-child(4) { grid-column: 1 / -1; }
  .market-item-img { width: 56px !important; height: 56px !important; }

  /* Leaderboard — drop secondary columns */
  .lb-row { grid-template-columns: 40px 1fr auto; }
  .lb-row > *:nth-child(4),
  .lb-row > *:nth-child(5) { display: none; }

  /* Modal: take almost the full viewport, scrollable body */
  #modal-box { width: 96vw; max-height: 92vh; }
  #modal-content { padding: 1.1rem 0.85rem; font-size: 0.85rem; }

  .pulse-badge { display: none; }
  .nav-right { gap: 0.35rem !important; }
  .btn-connect { padding: 0.45rem 0.7rem !important; font-size: 0.65rem !important; }
  #wallet-text { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

  /* Mining squad cards on /home — bigger sprite, smaller text */
  #active-squad-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Make collection / market filter bars wrap cleanly */
  .filter-bar { flex-wrap: wrap; gap: 0.35rem; }
  .filter-btn { padding: 0.35rem 0.65rem !important; font-size: 0.62rem !important; }

  /* Pack cards in store — stack tight */
  .pack-card-inner { padding: 0.85rem !important; gap: 0.65rem !important; }
  .pack-name { font-size: 1.05rem !important; }

  /* Action buttons row gets tight on mobile */
  .poke-card-actions { padding: 0.4rem 0.55rem; gap: 0.3rem; }
  .poke-card-actions button { font-size: 0.55rem !important; padding: 0.35rem 0.2rem !important; }

  /* Detail / actions modals: drop side-by-side layouts */
  .modal-img-side { width: 100% !important; flex: 1 1 100% !important; }

  /* Tx-status banner — full width, lower position so it doesn't cover nav */
  #pm-tx-banner { right: 0.5rem !important; bottom: 0.5rem !important; max-width: calc(100vw - 1rem) !important; }
  .pm-tx-card { padding: 0.7rem 0.8rem !important; }
}

/* ── RESPONSIVE TINY (≤400px) — keep it usable on iPhone SE ─── */
@media(max-width:400px) {
  .pm-title { font-size: 1.85rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .poke-grid-lg { grid-template-columns: 1fr; }
  .nav-logo .logo-text-block { display: none; }
  .btn-connect { font-size: 0.6rem !important; padding: 0.4rem 0.55rem !important; }
  #wallet-text { max-width: 70px; }
  #app { padding-bottom: 6rem; }  /* room for the audio toggle + tx banner */
}

/* ── POKÉMON SPRITE LOADING PLACEHOLDER ───────────────────────
   Paired with src/components/pm-sprite.js — together these turn
   "Pokémon not loading" anxiety (broken-image icons during a slow
   PokeAPI fetch) into a calm shimmering placeholder. Once an image
   paints (or hits the SVG Pokéball fallback), pm-sprite.js sets
   data-pm-loaded="1" on it and the shimmer stops.

   Targets ANY <img> whose src points at PokeAPI's GitHub raw CDN,
   so we don't need to add a class to every existing markup site. */
img[src*="raw.githubusercontent.com/PokeAPI"]:not([data-pm-loaded]) {
  background: linear-gradient(135deg,
    rgba(192,110,235,0.18) 0%,
    rgba(104,144,240,0.10) 35%,
    rgba(120,200,80,0.10)  65%,
    rgba(192,110,235,0.18) 100%);
  background-size: 220% 220%;
  animation: pmSpriteShimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes pmSpriteShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Honor reduced-motion — drop the shimmer, keep the soft tint so
   users still get a visible "loading" cue. */
@media (prefers-reduced-motion: reduce) {
  img[src*="raw.githubusercontent.com/PokeAPI"]:not([data-pm-loaded]) {
    animation: none;
    background-size: 100% 100%;
  }
}