/* ============================================================================
   PixelDex — pixel-meets-modern theme
   Tailwind handles layout/spacing; this file owns the design system: tokens,
   retro-pixel accents (Press Start 2P, crisp sprites, pixel buttons), a
   collector-grade card treatment with rarity colour-coding, and the modal.
   ========================================================================= */

:root {
  /* Type */
  --pixel-font: 'Press Start 2P', monospace;
  --body-font: 'Poppins', system-ui, sans-serif;

  /* Surfaces (dark, layered for depth) */
  --bg-0: #060912;
  --bg-1: #0b1120;
  --surface-1: #131c2e;
  --surface-2: #1b2740;
  --line: #2c3a55;
  --line-soft: #233048;

  /* Text */
  --text-1: #f1f5f9;
  --text-2: #aeb9cc;
  --text-3: #6b7890;

  /* Brand accent (Poké-amber) */
  --accent: #fbbf24;
  --accent-dark: #b45309;
  --accent-soft: rgba(251, 191, 36, 0.15);

  /* Poké red (wishlist / brand) */
  --poke-red: #ef4444;
  --poke-red-dark: #b91c1c;

  /* Rarity palette */
  --r-common: #94a3b8;
  --r-uncommon: #4ade80;
  --r-rare: #60a5fa;
  --r-holo: #c084fc;
  --r-special: #fbbf24;

  --radius: 0.85rem;
  --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--body-font);
  color: var(--text-1);
  background:
    radial-gradient(1100px 600px at 50% -8%, #1c2740 0%, transparent 60%),
    radial-gradient(circle at top, #0e1726 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  background-attachment: fixed;
}

/* Subtle CRT scanline overlay for game feel — very faint, non-interactive */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.pixel-heading {
  font-family: var(--pixel-font);
  text-shadow: 2px 2px 0 var(--bg-0);
  letter-spacing: 0.5px;
}

/* ----- Header / brand -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 1rem 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(11, 17, 32, 0.96) 0%, rgba(11, 17, 32, 0.82) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 22px -16px rgba(0, 0, 0, 0.9);
}

@media (min-width: 768px) {
  .site-header { padding: 1.1rem 2rem 1.2rem; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.brand:hover { opacity: 0.85; }
.brand:active { transform: scale(0.98); }
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.brand-ball {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
  animation: ball-bob 3.5s ease-in-out infinite;
}

@keyframes ball-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}

.brand-title {
  font-size: 1.05rem;
  color: var(--accent);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .brand-title { font-size: 1.3rem; }
}

.brand-sub {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 0.35rem;
}

/* ----- Primary nav tabs ------------------------------------------------ */

.nav-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 0.6rem;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.nav-tab svg { flex: 0 0 auto; opacity: 0.85; }
.nav-tab:hover { color: var(--text-1); background: var(--surface-2); }
.nav-tab:active { transform: scale(0.97); }

.nav-tab.is-active {
  color: #1e293b;
  background: linear-gradient(160deg, #fcd34d 0%, var(--accent) 100%);
  box-shadow: 0 4px 12px -4px rgba(251, 191, 36, 0.6);
}

.nav-tab.is-active svg { opacity: 1; }

.nav-tab-badge {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: #fff1f2;
  background: var(--poke-red);
  border-radius: 999px;
  padding: 0.16rem 0.4rem;
  min-width: 1.1rem;
  text-align: center;
}

.nav-tab.is-active .nav-tab-badge { background: var(--poke-red-dark); }

/* ----- Toolbar / controls --------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding-left: 0.6rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.control-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.control-icon {
  color: var(--text-3);
  flex: 0 0 auto;
}

.control-group:focus-within .control-icon {
  color: var(--accent);
}

.control-search { flex: 1 1 200px; min-width: 160px; }

/* Inputs/selects now live inside .control-group: transparent, no own border */
.control {
  font-family: var(--body-font);
  font-size: 0.85rem;
  background: transparent;
  color: var(--text-1);
  border: none;
  border-radius: 0.6rem;
  padding: 0.5rem 0.6rem 0.5rem 0.15rem;
  width: 100%;
  cursor: pointer;
}

.control:focus { outline: none; }
.control-search .control { cursor: text; }
select.control { appearance: none; padding-right: 1.6rem; }

/* Custom dropdown caret */
.control-group:has(select)::after {
  content: '';
  width: 0;
  height: 0;
  margin-right: 0.55rem;
  margin-left: -1.2rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-3);
  pointer-events: none;
}

.control option { background: var(--surface-2); color: var(--text-1); }
.control optgroup {
  background: var(--bg-1);
  color: var(--accent);
  font-weight: 600;
}

/* Search combo and filter-panel selects render their own carets, so suppress
   the shared .control-group caret there. */
.search-combo::after { display: none; }

/* ----- Unified search (text + scope) ---------------------------------- */

.search-combo { flex: 0 1 320px; min-width: 260px; margin-left: auto; padding-right: 0; }

/* Scope selector pinned to the right edge of the search box, divider on left */
.search-scope {
  flex: 0 0 auto;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 0.5rem 1.5rem 0.5rem 0.7rem;
  margin-left: 0.3rem;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 0.85rem center, right 0.6rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.search-scope:focus { outline: none; color: var(--accent); }
.search-scope option { background: var(--surface-2); color: var(--text-1); font-weight: 500; }

/* ----- Filters button + popover panel --------------------------------- */

.filter-menu { position: relative; }

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.filter-btn:hover { background: var(--surface-2); }
.filter-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-btn svg { color: var(--text-3); }
.filter-btn[aria-expanded="true"] svg { color: var(--accent); }

.filter-count {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: #1e293b;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  min-width: 1.05rem;
  text-align: center;
}

.filter-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1.1rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.85);
  animation: filter-pop 0.16s ease both;
}

.filter-panel[hidden] { display: none; }

@keyframes filter-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Hidden when the active tab makes a filter irrelevant (e.g. generation on
   Trainer card). */
.filter-field[hidden] { display: none; }

/* ----- Searchable set combobox (type-to-filter dropdown) --------------- */
.combo { position: relative; }
.combo-input { width: 100%; padding-right: 1.6rem; }
.combo-native { display: none; }

.combo-caret {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-2);
  cursor: pointer;
}

.combo-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.combo-group {
  padding: 0.4rem 0.55rem 0.2rem;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0.85;
}

.combo-option {
  padding: 0.38rem 0.55rem;
  font-size: 0.72rem;
  border-radius: 0.35rem;
  color: var(--text-1);
  cursor: pointer;
}
.combo-option.is-active,
.combo-option:hover { background: rgba(251, 191, 36, 0.16); }
.combo-option.is-selected { color: var(--accent); font-weight: 600; }

.combo-empty {
  padding: 0.5rem 0.55rem;
  font-size: 0.7rem;
  color: var(--text-2);
}

.filter-field label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.filter-field .control {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.55rem 1.8rem 0.55rem 0.7rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.filter-field .control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-reset {
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.filter-reset:hover { color: #fecdd3; border-color: var(--poke-red); }

/* ----- Pixel buttons --------------------------------------------------- */

.btn-pixel {
  font-family: var(--pixel-font);
  font-size: 0.6rem;
  background: var(--accent);
  color: #1e293b;
  border: 2px solid var(--bg-0);
  border-radius: 0.3rem;
  padding: 0.5rem 0.7rem;
  box-shadow: 2px 2px 0 var(--bg-0);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

.btn-pixel:hover:not(:disabled) { filter: brightness(1.08); }

.btn-pixel:active:not(:disabled) {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-pixel:disabled {
  background: var(--line);
  color: var(--text-3);
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--line-soft);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ----- Drive panel ----------------------------------------------------- */

.drive-panel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.55rem 0.75rem;
}

.drive-icon { color: var(--accent); flex: 0 0 auto; }

.drive-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.drive-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-2);
  padding-left: 0.25rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-3);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
}

.drive-status.is-connected .status-dot {
  background: #4ade80;
  animation: pulse-dot 2s infinite;
}

.drive-status.is-busy .status-dot { background: var(--accent); }
.drive-status.is-error .status-dot { background: var(--poke-red); }

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ----- Status bar ------------------------------------------------------ */

.status-bar {
  font-size: 0.82rem;
  color: var(--text-2);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ----- Pokémon / card grid -------------------------------------------- */

.card {
  position: relative;
  background:
    linear-gradient(160deg, var(--surface-2) 0%, var(--surface-1) 70%, #0f1626 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 0.9rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  animation: card-in 0.35s ease both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Type accent bar across the top of each card (primary -> secondary type
   gradient). Colours come from the standard Pokémon type palette below. */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--type-color, var(--line)),
    var(--type-color2, var(--type-color, var(--line)))
  );
  transition: background 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--type-color, var(--accent));
  box-shadow: 0 16px 34px -14px var(--type-glow, rgba(251, 191, 36, 0.45));
}

/* Card tiles whose body opens the full-card modal on click. */
.card-clickable { cursor: pointer; }

/* Primary-type colour drives the bar's left edge, border, glow, and the
   rarity badge tint fallback. */
.card[data-type="normal"]   { --type-color: #a8a878; --type-glow: rgba(168,168,120,0.45); }
.card[data-type="fire"]     { --type-color: #f08030; --type-glow: rgba(240,128,48,0.5); }
.card[data-type="water"]    { --type-color: #6890f0; --type-glow: rgba(104,144,240,0.5); }
.card[data-type="electric"] { --type-color: #f8d030; --type-glow: rgba(248,208,48,0.55); }
.card[data-type="grass"]    { --type-color: #78c850; --type-glow: rgba(120,200,80,0.5); }
.card[data-type="ice"]      { --type-color: #98d8d8; --type-glow: rgba(152,216,216,0.5); }
.card[data-type="fighting"] { --type-color: #c03028; --type-glow: rgba(192,48,40,0.5); }
.card[data-type="poison"]   { --type-color: #a040a0; --type-glow: rgba(160,64,160,0.5); }
.card[data-type="ground"]   { --type-color: #e0c068; --type-glow: rgba(224,192,104,0.5); }
.card[data-type="flying"]   { --type-color: #a890f0; --type-glow: rgba(168,144,240,0.5); }
.card[data-type="psychic"]  { --type-color: #f85888; --type-glow: rgba(248,88,136,0.5); }
.card[data-type="bug"]      { --type-color: #a8b820; --type-glow: rgba(168,184,32,0.5); }
.card[data-type="rock"]     { --type-color: #b8a038; --type-glow: rgba(184,160,56,0.5); }
.card[data-type="ghost"]    { --type-color: #705898; --type-glow: rgba(112,88,152,0.5); }
.card[data-type="dragon"]   { --type-color: #7038f8; --type-glow: rgba(112,56,248,0.5); }
.card[data-type="dark"]     { --type-color: #705848; --type-glow: rgba(112,88,72,0.5); }
.card[data-type="steel"]    { --type-color: #b8b8d0; --type-glow: rgba(184,184,208,0.5); }
.card[data-type="fairy"]    { --type-color: #ee99ac; --type-glow: rgba(238,153,172,0.5); }

/* Secondary-type colour for the right edge of the gradient bar. */
.card[data-type2="normal"]   { --type-color2: #a8a878; }
.card[data-type2="fire"]     { --type-color2: #f08030; }
.card[data-type2="water"]    { --type-color2: #6890f0; }
.card[data-type2="electric"] { --type-color2: #f8d030; }
.card[data-type2="grass"]    { --type-color2: #78c850; }
.card[data-type2="ice"]      { --type-color2: #98d8d8; }
.card[data-type2="fighting"] { --type-color2: #c03028; }
.card[data-type2="poison"]   { --type-color2: #a040a0; }
.card[data-type2="ground"]   { --type-color2: #e0c068; }
.card[data-type2="flying"]   { --type-color2: #a890f0; }
.card[data-type2="psychic"]  { --type-color2: #f85888; }
.card[data-type2="bug"]      { --type-color2: #a8b820; }
.card[data-type2="rock"]     { --type-color2: #b8a038; }
.card[data-type2="ghost"]    { --type-color2: #705898; }
.card[data-type2="dragon"]   { --type-color2: #7038f8; }
.card[data-type2="dark"]     { --type-color2: #705848; }
.card[data-type2="steel"]    { --type-color2: #b8b8d0; }
.card[data-type2="fairy"]    { --type-color2: #ee99ac; }

/* Rarity still tints the rarity badge text (set lazily as TCG data loads). */
.card[data-rarity="Common"]   { --rarity-color: var(--r-common); }
.card[data-rarity="Uncommon"] { --rarity-color: var(--r-uncommon); }
.card[data-rarity="Rare"]     { --rarity-color: var(--r-rare); }
.card[data-rarity="Holo"]     { --rarity-color: var(--r-holo); }
.card[data-rarity="Special"]  { --rarity-color: var(--r-special); }

.card img.sprite {
  width: 88px;
  height: 88px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.16s ease;
}

.card:hover img.sprite { transform: scale(1.08); }

.card .dex-id {
  font-family: var(--pixel-font);
  font-size: 0.55rem;
  color: var(--text-3);
}

.card .name {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.card .gen-badge,
.card .pack-badge,
.card .rarity-badge,
.card .jp-set-badge,
.card .illustrator-badge {
  font-size: 0.62rem;
  color: var(--text-2);
  background: rgba(8, 13, 24, 0.7);
  border: 1px solid var(--line-soft);
  border-radius: 0.4rem;
  padding: 0.16rem 0.5rem;
  word-break: break-word;
  max-width: 100%;
}

.card .illustrator-badge {
  color: var(--accent);
  border-color: rgba(251, 191, 36, 0.3);
}

/* EN set name — tinted the site's yellow accent, matching the JP badge's
   coloured treatment. */
.card .pack-badge {
  color: var(--accent);
  border-color: rgba(251, 191, 36, 0.3);
}

/* Japanese counterpart set name (under the set on card tiles). */
.card .jp-set-badge {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.3);
}

.card .gen-badge {
  color: var(--accent);
  border-color: rgba(251, 191, 36, 0.3);
  /* Centred text with even top/bottom padding so the label sits dead-centre. */
  padding: 0.32rem 0.6rem;
  text-align: center;
  line-height: 1;
}

.card .rarity-badge { color: var(--rarity-color, var(--text-2)); }

.card .card-actions {
  display: flex;
  gap: 0.4rem;
  /* Pin actions to the bottom so buttons align across a row regardless of how
     much content (set/JP badges, multi-line names) sits above them. */
  margin-top: auto;
  padding-top: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/* Count of wishlisted printings shown on a species card */
.card .wish-count-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff1f2;
  background: linear-gradient(160deg, var(--poke-red) 0%, var(--poke-red-dark) 100%);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  box-shadow: 0 3px 8px -3px rgba(239, 68, 68, 0.7);
  z-index: 2;
}

/* Real card art shown in the My Wishlist card grid */
.card img.wish-card-image {
  width: 132px;
  max-width: 100%;
  height: auto;
  border-radius: 0.55rem;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7);
  transition: transform 0.16s ease;
}

.card:hover img.wish-card-image { transform: scale(1.04); }

.card img.wish-card-image.sprite {
  width: 88px;
  height: 88px;
  image-rendering: pixelated;
}

/* ----- Wishlist / action buttons -------------------------------------- */

/* Corner star toggle on card tiles. Hidden until the card is hovered, unless
   the card is already wishlisted (`.active`), where it stays visible. */
.wish-star {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(8, 12, 22, 0.78);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  /* The button box never transforms — it's pinned by `right`, so scaling it
     would shift it sideways and look like the star de-centres on hover. Only
     fade it in; press feedback lives on the inner svg below. */
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    background 0.15s ease;
}
/* Star icon stays centred in the button (flex + block svg) regardless of the
   on/off state. */
.wish-star svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 0.1s ease;
}
.card:hover .wish-star,
.wish-star:focus-visible { opacity: 1; }
.wish-star:hover { color: #fecdd3; border-color: var(--poke-red); }
.wish-star:active svg { transform: scale(0.85); }

/* Wishlisted: stays visible even without hover, filled red star. */
.wish-star.active {
  opacity: 1;
  color: #fff1f2;
  background: linear-gradient(160deg, var(--poke-red) 0%, var(--poke-red-dark) 100%);
  border-color: var(--poke-red-dark);
}
.wish-star.active:hover { color: #fff; }

/* Wishlist tab: every card is already wishlisted, so don't pin the star on
   permanently — reveal it on hover like the other tabs (the filled red style
   still applies, it's just hidden until hover). */
.wishlist-tile .wish-star.active { opacity: 0; }
.wishlist-tile:hover .wish-star.active,
.wishlist-tile .wish-star:focus-visible { opacity: 1; }

.view-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: linear-gradient(160deg, #fcd34d 0%, var(--accent) 100%);
  border: 1px solid var(--accent-dark);
  border-radius: 0.55rem;
  padding: 0.38rem 0.7rem;
  color: #1e293b;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.08s ease;
}

.view-card-btn:hover { filter: brightness(1.08); }
.view-card-btn:active { transform: scale(0.96); }

.view-card-btn:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--text-3);
  cursor: not-allowed;
}

/* ----- Pagination ------------------------------------------------------ */

#pagination .text-sm { color: var(--text-2); font-size: 0.85rem; }

.page-jump { display: inline-flex; align-items: center; gap: 0.35rem; }

.page-input {
  width: 3.5rem;
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  color: var(--accent);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.page-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ----- Empty state ----------------------------------------------------- */

.empty-state[hidden] { display: none; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-2);
}

.empty-ball { opacity: 0.8; animation: ball-bob 3.5s ease-in-out infinite; }

/* ----- Footer ---------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  color: var(--text-3);
  font-size: 0.78rem;
  border-top: 1px solid var(--line-soft);
  margin-top: 2rem;
}

.footer-link { color: var(--accent); text-decoration: none; }
.footer-link:hover { text-decoration: underline; }
.footer-fine { font-size: 0.68rem; margin-top: 0.5rem; color: var(--text-3); opacity: 0.75; }

/* ----- TCG card modal -------------------------------------------------- */

#card-modal.flex { display: flex; }

.modal-shell {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  max-width: 96rem;
  width: 95vw;
  max-height: 86vh;
  overflow-y: auto;
  padding: 2.75rem 2.5rem 1.75rem;
  animation: modal-in 0.2s ease both;
  /* Themed scrollbar (Firefox) — replaces the default OS bar. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* Themed scrollbar (WebKit/Chromium). */
.modal-shell::-webkit-scrollbar { width: 10px; }
.modal-shell::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.5rem 0;
}
.modal-shell::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border: 2px solid var(--surface-1);
  border-radius: 999px;
}
.modal-shell::-webkit-scrollbar-thumb:hover { background: var(--accent); }

@media (min-width: 768px) { .modal-shell { padding: 3.25rem 3.5rem 2.25rem; } }

/* ----- Card image lightbox (click a card to pop it bigger) ------------- */

.card-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}
/* Two-class rule beats Tailwind's `.hidden`, regardless of stylesheet order. */
.card-lightbox.hidden { display: none; }

.card-lightbox-img {
  max-width: min(92vw, 30rem);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
  animation: modal-in 0.2s ease both;
}

/* ----- TCG card gallery (View Card grid) ------------------------------- */

.tcg-gallery { width: 100%; }

.tcg-gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding-right: 2.5rem; /* clear the close button */
  margin-bottom: 1.75rem;
  padding-bottom: 0.25rem;
}

.tcg-gallery-id {
  font-family: var(--pixel-font);
  font-size: 0.8rem;
  color: var(--text-3);
  margin-left: auto; /* push the dex number to the right edge */
  order: 3;
}

.tcg-gallery-name {
  font-size: 1rem;
  color: var(--accent);
  line-height: 1.2;
}

@media (min-width: 768px) { .tcg-gallery-name { font-size: 1.25rem; } }

.tcg-gallery-types { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

.tcg-type-pill {
  font-size: 0.66rem;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
}

.tcg-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

@media (min-width: 560px) { .tcg-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .tcg-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .tcg-gallery-grid { grid-template-columns: repeat(5, 1fr); } }

.tcg-gallery-tile {
  margin: 0;
  padding: 1.4rem 1.25rem 1.25rem;
  gap: 0.6rem;
}

/* No type accent bar on View Cards tiles — keep it only on the Pokémon grid. */
.tcg-gallery-tile::before { display: none; }

/* Let the card art grow to fill the (larger) gallery cells instead of the
   132px cap used on the browse grid. */
.tcg-gallery-tile img.wish-card-image {
  width: 100%;
  max-width: 100%;
}

.tcg-gallery-status {
  text-align: center;
  color: var(--text-3);
  font-size: 0.72rem;
  padding: 1rem 0 0.25rem;
}

#gallery-sentinel { height: 1px; }

.modal-back-btn {
  margin-bottom: 1rem;
  font-size: 0.72rem;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--surface-1);
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover { background: var(--poke-red); color: #fff; border-color: var(--poke-red-dark); }

.tcg-card-image {
  width: 100%;
  max-width: 300px;
  border-radius: 0.9rem;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7);
  align-self: center;
}

.tcg-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  width: 100%;
  max-width: 300px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 0.9rem;
  color: var(--text-3);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

/* Thumbnail strip of every printing/expansion */
.tcg-version-gallery {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.tcg-version-gallery::-webkit-scrollbar { height: 7px; }
.tcg-version-gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.tcg-version-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 88px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 0.55rem;
  background: var(--bg-1);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.12s ease;
}

.tcg-version-thumb img { width: 100%; height: 100%; object-fit: cover; }

.tcg-version-thumb-label {
  font-size: 0.55rem;
  color: var(--text-2);
  padding: 0.25rem;
  text-align: center;
  word-break: break-word;
}

.tcg-version-thumb:hover { border-color: var(--accent-dark); transform: translateY(-2px); }
.tcg-version-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Marks a printing that's in the wishlist */
.tcg-version-thumb.wished::after {
  content: '★';
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 0.72rem;
  color: var(--poke-red);
  text-shadow: 0 0 3px #000, 0 0 2px #000;
  pointer-events: none;
}

/* How-many-printings selector */
.tcg-count-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

.tcg-count-label { font-size: 0.7rem; color: var(--text-2); }

.tcg-count-btn {
  font-size: 0.65rem;
  padding: 0.22rem 0.6rem;
  border: 2px solid var(--line);
  border-radius: 0.4rem;
  background: var(--bg-1);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tcg-count-btn:hover { border-color: var(--accent-dark); }
.tcg-count-btn.active { border-color: var(--accent); color: #1e293b; background: var(--accent); }

.tcg-count-total { font-size: 0.6rem; color: var(--text-3); margin-left: auto; }

.tcg-card-details h2 {
  font-family: var(--pixel-font);
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.tcg-type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--line);
  color: var(--text-1);
  margin-right: 0.25rem;
}

.tcg-attack {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.6rem;
  background: var(--bg-1);
}

.tcg-attack .attack-name {
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.tcg-attack .attack-text { font-size: 0.8rem; color: var(--text-2); margin-top: 0.25rem; }

/* ----- Loading overlay ------------------------------------------------- */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, var(--bg-1) 0%, var(--bg-0) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-family: var(--pixel-font);
  font-size: 0.78rem;
  color: var(--text-2);
  z-index: 100;
  text-align: center;
  padding: 1rem;
}

.loading-overlay.hidden { display: none; }

.pixel-spinner {
  width: 34px;
  height: 34px;
  background: var(--accent);
  box-shadow: 0 0 16px -2px var(--accent);
  animation: spin 1s steps(8) infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Site statistics dashboard ------------------------------------------ */
.stats-shell { max-width: 42rem; }

.stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-right: 2.4rem; /* clear the close button */
  margin-bottom: 1.1rem;
}
.stats-title { font-size: 0.9rem; color: var(--accent); }
.stats-reset { --pad: 0.3rem; }

.stats-body { display: flex; flex-direction: column; gap: 1.25rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (min-width: 560px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 0.7rem;
  padding: 0.7rem 0.6rem;
  text-align: center;
}
.stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  color: var(--accent);
  line-height: 1.3;
}
.stat-label {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-sub { margin-top: 0.2rem; font-size: 0.65rem; color: var(--text-3); }

.stat-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 0.35rem;
}

.stat-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.stat-bar-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.55rem;
}
.stat-bar-label {
  font-size: 0.74rem;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-bar-track {
  height: 0.7rem;
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 0.3rem;
  overflow: hidden;
}
.stat-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 0.3rem 0 0 0.3rem;
  transition: width 0.4s ease;
}
.stat-bar-val { font-size: 0.74rem; color: var(--text-2); text-align: right; }

.stat-spark {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: 0.6rem;
  padding: 0.6rem 0.7rem 0.4rem;
}
.stat-empty { font-size: 0.74rem; color: var(--text-3); }
.stat-foot {
  font-size: 0.66rem;
  color: var(--text-3);
  text-align: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.7rem;
}

/* ---- Admin login + multi-column stat sections --------------------------- */
.admin-login { display: grid; place-items: center; padding-top: 1.5rem; }
.admin-form { display: flex; flex-direction: column; gap: 0.7rem; }
.admin-form .control-group { width: 100%; }
.admin-error {
  color: var(--poke-red);
  font-size: 0.78rem;
  margin-top: 0.2rem;
}
.stat-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .stat-cols { grid-template-columns: 1fr 1fr; } }