/* app.css - shell, gallery, filters. The card itself is styled by pokedex.css;
   this file is tuned to sit in the same soft, rounded, tone-tinted family as the
   card so the new chrome feels like part of the deck.
   Dark mode: html[data-theme="dark"]. */

:root {
  --bg: #f5f6f9;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --ink: #22262d;
  --ink-soft: #6a7480;
  --ink-faint: #9aa3ad;
  --line: #e4e8ee;
  --line-soft: #eef1f5;
  --brand: #e0564f;
  --brand-ink: #b23b35;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(20,25,35,.04), 0 6px 18px rgba(20,25,35,.06);
  --shadow-hover: 0 2px 6px rgba(20,25,35,.06), 0 14px 30px rgba(20,25,35,.12);
}
html[data-theme="dark"] {
  --bg: #1b1e24;
  --surface: #23272e;
  --surface-2: #2b303a;
  --ink: #dbe0e6;
  --ink-soft: #9aa3ad;
  --ink-faint: #727b86;
  --line: #363c46;
  --line-soft: #2a2f38;
  --brand: #e0564f;
  --brand-ink: #f0918b;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.4);
  --shadow-hover: 0 2px 6px rgba(0,0,0,.4), 0 16px 34px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page-bg, var(--bg));
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
/* Gallery: a soft brand-tinted glow behind everything (no single Pokémon colour
   to key off). Suppressed on a detail page, where the whole page instead takes
   the Pokémon's own tone (below). */
body:not(:has(.pokedex-card[data-color]))::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 460px at 50% -180px, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 220px);
}

/* Detail page tones the WHOLE page to the current Pokémon's Pokédex colour - a
   whisper of it (like the deck's 3% outer frame), so the card sits in a matching
   wash instead of on flat grey. Keyed off the card's data-color via :has(), so it
   auto-follows form switches (a Mega that recolours retones the page). One rule
   set for both themes: --bg is already theme-aware. Kept lighter than the card's
   own wash so the card still lifts. */
/* Set --page-bg (used by both the body AND the sticky header) so the header's
   opaque backdrop matches the tinted page and hides content in its gaps. */
body:has(.pokedex-card[data-color="black"])  { --page-bg: color-mix(in srgb, #4b5058 6%, var(--bg)); }
body:has(.pokedex-card[data-color="blue"])   { --page-bg: color-mix(in srgb, #4f83cc 6%, var(--bg)); }
body:has(.pokedex-card[data-color="brown"])  { --page-bg: color-mix(in srgb, #9c6b4a 6%, var(--bg)); }
body:has(.pokedex-card[data-color="gray"])   { --page-bg: color-mix(in srgb, #7d8794 6%, var(--bg)); }
body:has(.pokedex-card[data-color="green"])  { --page-bg: color-mix(in srgb, #5aa84f 6%, var(--bg)); }
body:has(.pokedex-card[data-color="pink"])   { --page-bg: color-mix(in srgb, #e07ba6 6%, var(--bg)); }
body:has(.pokedex-card[data-color="purple"]) { --page-bg: color-mix(in srgb, #9163c4 6%, var(--bg)); }
body:has(.pokedex-card[data-color="red"])    { --page-bg: color-mix(in srgb, #dc5348 6%, var(--bg)); }
body:has(.pokedex-card[data-color="white"])  { --page-bg: color-mix(in srgb, #a7adb6 6%, var(--bg)); }
body:has(.pokedex-card[data-color="yellow"]) { --page-bg: color-mix(in srgb, #dca62c 6%, var(--bg)); }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }

/* ---------------- top bar ---------------- */
/* Floating frosted "island" header: translucent + blurred, so it picks up the
   colour of whatever is behind it (grey on the gallery, the Pokémon tint on a
   detail page) instead of being a fixed opaque bar that clashes. Inset from the
   edges + rounded + soft shadow so it reads as floating, not a classic full bar. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  padding: 10px 12px;
  background: transparent;
}
/* Opaque strip ONLY from the screen top down to the island's top edge, so content
   can't scroll into the gap above the island. Below the island stays transparent,
   so content still runs blurred UNDER the frosted island. */
.topbar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 11px;
  background: var(--page-bg, var(--bg)); z-index: 0;
}
.topbar-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  max-width: 1360px; margin: 0 auto;
  padding: 8px 12px 8px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: saturate(1.8) blur(16px);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  box-shadow: 0 4px 22px rgba(20, 25, 35, .10);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 16px; letter-spacing: .2px; cursor: pointer; flex: none;
}
.brand-logo { width: 22px; height: 22px; flex: none; }
.brand span:last-child { color: var(--ink); }
.search {
  flex: 1 1 auto; max-width: 480px; margin: 0 auto;
  font: inherit; padding: 10px 15px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 38%, transparent); color: var(--ink);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.search:focus {
  outline: none;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 3px 14px rgba(20, 25, 35, .09);
}
.search::placeholder { color: var(--ink-faint); }
/* Bigger, theme-aware clear (×) button (the native one is tiny). */
.search::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; margin-left: 8px; cursor: pointer;
  background-color: currentColor; opacity: .4;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.5 5 12 10.5 17.5 5 19 6.5 13.5 12 19 17.5 17.5 19 12 13.5 6.5 19 5 17.5 10.5 12 5 6.5z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.5 5 12 10.5 17.5 5 19 6.5 13.5 12 19 17.5 17.5 19 12 13.5 6.5 19 5 17.5 10.5 12 5 6.5z'/></svg>") center / contain no-repeat;
}
@media (hover: hover) { .search::-webkit-search-cancel-button:hover { opacity: .75; } }
.icon-btn {
  flex: none; font: inherit; cursor: pointer; line-height: 1;
  height: 40px; min-width: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 38%, transparent); color: var(--ink);
  transition: border-color .12s, background .12s, transform .06s;
}
@media (hover: hover) { .icon-btn:hover { border-color: var(--brand); } }
.icon-btn:active { transform: translateY(1px); }

/* ---------------- gallery: toolbar + collapsible filters ---------------- */
.container { max-width: 1320px; margin: 0 auto; padding: 16px 18px 64px; }

.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
/* Frosted-glass control pills - same language as the header island: translucent
   + blurred, with a soft border for definition (so the pill is clearly visible
   against the page instead of blending in). */
.filter-btn, .sort-btn, .dir-btn {
  font: inherit; cursor: pointer; height: 36px; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border-radius: 999px; transition: background .12s, color .12s, border-color .12s;
}
/* Only on real hover devices - on touch the :hover state sticks after a tap
   (the button stayed red until you tapped elsewhere). */
@media (hover: hover) {
  .filter-btn:hover, .sort-btn:hover, .dir-btn:hover {
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-ink);
  }
}
.filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; font-weight: 600; }
.filter-btn > svg { width: 15px; height: 15px; flex: none; }
.filter-btn .caret { display: inline-flex; align-items: center; transition: transform .18s; color: var(--ink-faint); }
.filter-btn .caret svg { width: 12px; height: 12px; }
.filter-btn.open, .filter-btn:has(.fbadge.show) {   /* active: filters selected or panel open */
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); color: var(--brand-ink);
}
.filter-btn.open .caret { transform: rotate(180deg); }
.icon-btn svg { width: 18px; height: 18px; }
.fbadge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.fbadge.show { display: inline-flex; }

.active-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.apill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 7px 9px 7px 12px; border-radius: 999px; border: none;
  background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand-ink); cursor: pointer; text-transform: capitalize;
  transition: background .12s;
}
.apill:hover { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); }
.apill .x { font-size: 15px; line-height: .8; opacity: .55; }
.apill:hover .x { opacity: 1; }

/* Result count: quiet, inline, pushed to the right (the flex:1 pills do the pushing). */
.count { font-size: 12.5px; font-weight: 500; color: var(--ink-faint); white-space: nowrap; margin-left: auto; }

.sortbox { display: flex; align-items: center; gap: 6px; flex: none; }
.sort-select { position: relative; display: flex; }
.sort-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; font-weight: 500; }
.sort-btn > svg { width: 15px; height: 15px; flex: none; color: var(--ink-faint); }
.sort-btn .sort-car { display: inline-flex; color: var(--ink-faint); }
.sort-btn .sort-car svg { width: 12px; height: 12px; }
/* Frosted-glass dropdown, matching the header island + control pills. */
.sort-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 40;
  width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px; padding: 5px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: var(--shadow-hover);
  transform-origin: top right; animation: sortpop .13s ease;
}
@keyframes sortpop { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.sort-menu[hidden] { display: none; }
.sort-opt {
  font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; padding: 8px 11px;
  border: none; background: none; color: var(--ink); border-radius: 9px; cursor: pointer;
  transition: background .1s, color .1s;
}
@media (hover: hover) { .sort-opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.sort-opt.on { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand-ink); font-weight: 600; }
.dir-btn {
  flex: none; width: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.dir-btn svg { width: 17px; height: 17px; }

.filter-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 16px;
  display: grid; gap: 12px;
}
.filter-panel[hidden] { display: none; }
.group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.group .lbl {
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .5px;
  width: 62px; flex: none;
}
.chip {
  font: inherit; font-size: 12.5px; cursor: pointer; line-height: 1;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  transition: border-color .1s, background .1s, color .1s;
}
@media (hover: hover) { .chip:hover { border-color: var(--brand); } }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.type { text-transform: capitalize; }

/* Type & Colour chips wear their own hue (a light tint by default, full colour
   when selected) so the panel has some pop. Gen / Region / Tags have no inherent
   colour, so they stay neutral and turn brand-red when selected (above). */
.chip.type[data-val="normal"]{--c:#A8A77A} .chip.type[data-val="fire"]{--c:#EE8130}
.chip.type[data-val="water"]{--c:#6390F0} .chip.type[data-val="electric"]{--c:#F7D02C}
.chip.type[data-val="grass"]{--c:#7AC74C} .chip.type[data-val="ice"]{--c:#96D9D6}
.chip.type[data-val="fighting"]{--c:#C22E28} .chip.type[data-val="poison"]{--c:#A33EA1}
.chip.type[data-val="ground"]{--c:#E2BF65} .chip.type[data-val="flying"]{--c:#A98FF3}
.chip.type[data-val="psychic"]{--c:#F95587} .chip.type[data-val="bug"]{--c:#A6B91A}
.chip.type[data-val="rock"]{--c:#B6A136} .chip.type[data-val="ghost"]{--c:#735797}
.chip.type[data-val="dragon"]{--c:#6F35FC} .chip.type[data-val="dark"]{--c:#705746}
.chip.type[data-val="steel"]{--c:#B7B7CE} .chip.type[data-val="fairy"]{--c:#D685AD}
.chip[data-key="colors"][data-val="black"]{--c:#4b5058} .chip[data-key="colors"][data-val="blue"]{--c:#4f83cc}
.chip[data-key="colors"][data-val="brown"]{--c:#9c6b4a} .chip[data-key="colors"][data-val="gray"]{--c:#7d8794}
.chip[data-key="colors"][data-val="green"]{--c:#5aa84f} .chip[data-key="colors"][data-val="pink"]{--c:#e07ba6}
.chip[data-key="colors"][data-val="purple"]{--c:#9163c4} .chip[data-key="colors"][data-val="red"]{--c:#dc5348}
.chip[data-key="colors"][data-val="white"]{--c:#a7adb6} .chip[data-key="colors"][data-val="yellow"]{--c:#dca62c}
.chip.type, .chip[data-key="colors"] {
  background: color-mix(in srgb, var(--c) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--c) 20%, transparent);
}
.chip.type.on, .chip[data-key="colors"].on {
  background: var(--c); border-color: var(--c); color: #fff;
}
@media (hover: hover) {
  .chip.type:hover, .chip[data-key="colors"]:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
}
/* Stat filter: pick a stat, then a dual (min–max) slider bounded by its real range. */
.stat-group { align-items: center; }
.stat-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-range { display: flex; align-items: center; gap: 12px; margin-left: 10px; }
.stat-val { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.stat-val b { color: var(--ink); font-variant-numeric: tabular-nums; }

.dual { position: relative; width: 178px; height: 20px; }
.dual-track, .dual-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 4px; }
.dual-track { left: 0; right: 0; background: var(--surface-2); border: 1px solid var(--line); }
.dual-fill { background: var(--brand); }
.dual-in {
  position: absolute; left: 0; top: 0; width: 100%; height: 20px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.dual-in::-webkit-slider-runnable-track { height: 20px; background: none; border: none; }
.dual-in::-moz-range-track { height: 20px; background: none; border: none; }
.dual-in::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; margin-top: 2.5px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}
.dual-in::-moz-range-thumb {
  pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}
.panel-foot { display: flex; justify-content: flex-end; }
/* Clear all: a real button (soft filled + icon), distinct from the round option chips. */
.clear-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  background: color-mix(in srgb, var(--brand) 11%, var(--surface)); color: var(--brand-ink);
  transition: background .12s, border-color .12s;
}
.clear-btn svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .clear-btn:hover {
    background: color-mix(in srgb, var(--brand) 20%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  }
}

/* ---------------- gallery grid ---------------- */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.g-card {
  --tint: var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 10px 12px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  /* Frosted glass: tint glow over a translucent surface, blurring the page behind. */
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--tint) 20%, transparent) 0%, transparent 60%),
    color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(9px) saturate(1.4);
  -webkit-backdrop-filter: blur(9px) saturate(1.4);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.g-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--tint) 55%, var(--line));
}
.g-img {
  width: 120px; height: 120px; object-fit: contain; margin: 6px 0 8px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.14));
}
.g-dex { font-size: 11px; font-weight: 700; color: var(--ink-faint); letter-spacing: .6px; }
.g-name { font-size: 14.5px; font-weight: 700; text-align: center; margin: 1px 0 7px; line-height: 1.15; }
.g-types { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.g-types .type { font-size: 9.5px; padding: 3px 8px; }
/* Mega Evolution badge: the colourful Mega logo, transparent (no chip). A soft
   drop-shadow keeps it legible on light cards. Only for Pokémon with a Mega. */
.mega-badge {
  position: absolute; top: 9px; right: 9px;
  width: 14px; height: 14px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.empty { text-align: center; color: var(--ink-soft); padding: 70px 20px; grid-column: 1 / -1; }

/* ---------------- detail view ---------------- */
/* Detail nav: one compact row - a gallery button, a centred prev/name/next
   group, and random. Circular icon buttons instead of dated outlined text. */
.detailbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;
  max-width: 1280px;
  margin-inline: auto;
}
.nav-group { display: flex; align-items: center; gap: 12px; }
/* Frosted circular nav buttons - same glass language as the header / pills. */
.nav-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--surface) 42%, transparent); color: var(--ink-soft);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.nav-btn svg { width: 19px; height: 19px; }
@media (hover: hover) {
  .nav-btn:hover { color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
}
.card { max-width: 1120px; margin: 0 auto; }
/* Web: drop the deck's outer ".card" frame tint so the card doesn't sit inside a
   second faint rectangle. In Anki that tint is the window frame; on the web the
   card should sit straight on the page. Overrides both the day and (important,
   more specific) night :has() rules from pokedex.css - matched specificity, and
   app.css loads later so it wins the tie. */
.card:has(.pokedex-card[data-color]) { background: transparent !important; }
.card.nightMode:has(.pokedex-card[data-color]),
.card.night_mode:has(.pokedex-card[data-color]) { background: transparent !important; }

/* Detail view: let the card run closer to the screen edges (~30% less side gap)
   and tighten the top/bottom padding. Scoped to the detail page via :has() so the
   gallery container is untouched. The card widths come from pokedex.css's
   [data-w] rules; app.css loads later so these win. */
/* Keyed on a stable .detail class (set on the container at render time), NOT on
   body:has(.pokedex-card) - otherwise the padding differed between the loading
   state (no card yet) and the loaded card, making the nav bar + card jump. */
.container.detail { max-width: 1520px; padding: 8px 16px 26px; }
.container.detail .card { max-width: none; padding: 0; }
/* narrow (phones): fill the width instead of the deck's 380px cap, which on a
   ~430-600px phone left big side gaps and made the card look cramped. */
.container.detail .back-card[data-w="narrow"] { max-width: none; }
/* Clickable evolution nodes (rendered as <a> by card.js) - navigate on tap. */
.evo-node[href] { text-decoration: none; color: inherit; cursor: pointer; border-radius: 10px; transition: transform .1s, background .12s; }
@media (hover: hover) { .evo-node[href]:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 8%, transparent); } }
.back-card[data-w="wide"]  { max-width: 960px; }
.back-card[data-w="xwide"] { max-width: 1280px; }
/* Glassy card: translucent wash + blur so the page tint shows through for a bit of
   depth (subtle - there's only flat colour behind the card, not moving content). */
body:has(.pokedex-card) .back-card {
  background: color-mix(in srgb, var(--accent-soft) 68%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
/* Tall while loading so the page doesn't collapse (which would make the nav bar
   jump between the loading state and the loaded card). */
.loading { min-height: 62vh; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }

/* Copyright disclaimer at the bottom of the gallery (after the last page) and the
   detail page (below the card). */
.disclaimer {
  max-width: 720px; margin: 20px auto 0; padding: 22px 16px 6px;
  border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 12px; line-height: 1.7; color: var(--ink-faint);
}

/* ---------------- mobile ---------------- */
@media (max-width: 620px) {
  /* header stays a SINGLE row: brand + search + theme */
  .topbar { padding: 8px 8px; }
  .topbar-inner { padding: 6px 8px 6px 10px; gap: 8px; }
  .brand { font-size: 15px; }
  .search { max-width: none; margin: 0; padding: 9px 12px; min-width: 0; }
  .container { padding: 12px 12px 56px; }
  .container.detail { padding: 6px 15px 20px; }   /* detail: sit closer to the phone edges */
  /* keep the gallery toolbar (Filters / count / sort) on ONE row */
  .toolbar { gap: 8px; }
  .filter-btn, .sort-btn, .dir-btn { height: 34px; font-size: 13.5px; }
  .filter-btn { padding: 0 13px; }
  .count { font-size: 12px; }
  .sort-btn { padding: 0 12px; }
  .dir-btn { width: 34px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .g-img { width: 96px; height: 96px; }
  .g-name { font-size: 13.5px; }
  .group .lbl { width: 100%; }
  /* detail nav: keep one row on small screens - smaller circular buttons */
  .nav-btn { width: 36px; height: 36px; }
  .nav-btn svg { width: 17px; height: 17px; }
  .dname { font-size: 15px; }
  .detailbar { gap: 6px; }
}
@media (max-width: 380px) {
  .brand span:last-child { display: none; }   /* very narrow: keep just the dot */
}