/* ── Fonts ────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./outfit-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./dm-mono-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./dm-mono-medium-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ────────────────────────────────────────────── */
:root {
  /* Font size scale — adjust here to rescale the whole site */
  --font-3xs: 0.6875rem; /* 11px — dense section labels */
  --font-2xs: 0.8125rem; /* 13px — micro labels, pills, badges */
  --font-xs: 0.875rem; /* 14px — small metadata */
  --font-sm: 0.875rem; /* 14px — secondary text */
  --font-md: 0.9375rem; /* 15px — medium */
  --font-base: 1rem; /* 16px — standard UI elements */
  --font-lg: 1.0625rem; /* 17px — nav, inputs */
  --font-body: 1.25rem; /* 20px — main body text */
  --font-h1: 1.625rem; /* 26px — page headings */
  --bg: #03060d;
  --card-bg: rgba(8, 14, 26, 0.48);
  --border: rgba(255, 255, 255, 0.11);
  --border-light: rgba(255, 255, 255, 0.06);
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-dim: rgba(255, 255, 255, 0.75);
  --text-tertiary: rgba(255, 255, 255, 0.65);
  --text-faint: rgba(255, 255, 255, 0.65);
  --text-nav: rgba(255, 255, 255, 0.72);
  --text-nav-hover: rgba(255, 255, 255, 0.92);
  --text-icon: rgba(255, 255, 255, 0.55);
  --text-icon-active: rgba(255, 255, 255, 0.85);
  --text-community: rgba(250, 204, 21, 0.9);
  --link: #93c5fd;
  --nav-bg: rgba(3, 6, 13, 0.6);
  --nav-border: rgba(255, 255, 255, 0.09);
  --glass-blur: blur(28px) saturate(220%) brightness(1.01);
  --glass-blur-sm: blur(14px) saturate(180%) brightness(1);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.03), inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 8px 32px rgba(0, 0, 0, 0.6);
  --build-shadow: rgba(99, 102, 241, 0.5);
  --build-mega: rgba(249, 115, 22, 0.5);
  --build-primal: rgba(16, 185, 129, 0.5);
  --build-dynamax: rgba(239, 68, 68, 0.5);
  --build-purified: rgba(148, 163, 184, 0.4);
  --build-regular: rgba(255, 255, 255, 0.15);
  --green: #9ccf90;
  --amber: #f59e0b;
  --red: #ef4444;

  /* Pokémon type colors — single source of truth */
  --type-normal: #9fa19f;
  --type-fire: #e62829;
  --type-water: #2980ef;
  --type-electric: #fac000;
  --type-grass: #3fa129;
  --type-ice: #3dcef3;
  --type-fighting: #ff8000;
  --type-poison: #9141cb;
  --type-ground: #915121;
  --type-flying: #81b9ef;
  --type-psychic: #ef4179;
  --type-bug: #91a119;
  --type-rock: #afa981;
  --type-ghost: #704170;
  --type-dragon: #5060e1;
  --type-dark: #624d4e;
  --type-steel: #60a1b8;
  --type-fairy: #ef70ef;
}

/* ── Base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px; /* rem anchor — all --font-* tokens scale from here */
  background: var(--bg);
}

/* Ambient mesh gradient — gives glass panels something to refract */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 10% 5%, rgba(99, 179, 252, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 90% 90%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 40%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 75% 15%, rgba(249, 115, 22, 0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family:
    'Outfit',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: var(--font-body);
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  position: relative;
  z-index: 1;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Sticky nav ───────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--nav-border);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  height: 48px;
  gap: 0;
  box-sizing: border-box;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

nav a {
  color: var(--text-nav);
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 0 11px;
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

nav a:hover {
  color: var(--text-nav-hover);
  text-decoration: none;
}

nav a.active {
  color: #fff;
  background: rgba(147, 197, 253, 0.12);
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 8px;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 14px rgba(147, 197, 253, 0.1);
}

.nav-toggle,
.nav-toggle-check {
  display: none;
}

/* ── Nav search ───────────────────────────────────────────────── */
.nav-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-search input[type='search'] {
  font-size: var(--font-lg);
  font-family: inherit;
  padding: 5px 10px;
  border: 1px solid var(--nav-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  width: 220px;
  outline-offset: 2px;
}

.nav-search input[type='search']:focus {
  outline: 1px solid rgba(147, 197, 253, 0.4);
  border-color: rgba(147, 197, 253, 0.4);
}

/* ── Updated stamp ────────────────────────────────────────────── */
.updated-stamp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 0 12px;
  white-space: nowrap;
}

.updated-stamp__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.updated-stamp--stale .updated-stamp__dot {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}

.updated-stamp--old .updated-stamp__dot {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
}

.updated-stamp__text {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* ── Focus styles ─────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.75);
  outline-offset: 2px;
  border-radius: 3px;
}

nav a:focus-visible {
  border-radius: 8px;
  outline-offset: 1px;
}

/* ── Mobile nav ───────────────────────────────────────────────── */
@media (width <= 1100px) {
  /* Disable all backdrop-filter on mobile — re-compositing 30-50 blurred
     cards on keyboard appear exhausts the iOS GPU and freezes Safari. */
  :root {
    --glass-blur: none;
    --glass-blur-sm: none;
  }

  blockquote {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  nav {
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-body);
    color: var(--text-nav);
    padding: 0.1rem 0.25rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(3, 6, 13, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--nav-border);
    padding: 8px 1rem;
    z-index: 99;
  }

  .nav-toggle-check:checked ~ .nav-links {
    display: flex;
  }

  .nav-links a {
    height: auto;
    padding: 8px 4px;
    border-bottom: none;
    border-left: 2px solid transparent;
    width: 100%;
  }

  .nav-links a:hover,
  .nav-links a.active {
    border-bottom-color: transparent;
    border-left-color: #93c5fd;
    padding-left: 10px;
  }
}

/* ── Page layout ──────────────────────────────────────────────── */
.page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ── Headings ─────────────────────────────────────────────────── */
h1 {
  font-size: var(--font-h1);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

h2 {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

h2:first-child {
  margin-top: 0;
}

h3 {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 8px;
}

section {
  margin-bottom: 4px;
}

/* ── Bento grid ───────────────────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 12px;
  margin-bottom: 12px;
}

.bento-tile {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  padding: 14px 16px;
  min-height: 88px;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    border-color 0.2s,
    transform 0.2s;
  overflow: hidden;
}

.bento-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.bento-tile:hover {
  background: rgba(12, 20, 38, 0.62);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1);
  transform: translateY(-2px);
}

.bento-tile--raids:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(239, 68, 68, 0.15);
}

.bento-tile--eggs:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(236, 72, 153, 0.15);
}

.bento-tile--tasks:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(34, 197, 94, 0.15);
}

.bento-tile--rocket:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(249, 115, 22, 0.15);
}

.bento-tile--dynamax:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(250, 204, 21, 0.12);
}

.bento-tile--wide {
  grid-column: span 2;
  min-height: 120px;
}

/* ── Bento tile section accents ───────────────────────────────── */
.bento-tile--raids {
  border-left: 3px solid rgba(239, 68, 68, 0.55);
}

.bento-tile--eggs {
  border-left: 3px solid rgba(236, 72, 153, 0.55);
}

.bento-tile--tasks {
  border-left: 3px solid rgba(34, 197, 94, 0.55);
}

.bento-tile--rocket {
  border-left: 3px solid rgba(249, 115, 22, 0.55);
}

.bento-tile--dynamax {
  border-left: 3px solid rgba(250, 204, 21, 0.55);
}

.bento-tile--trades {
  border-left: 3px solid rgba(56, 189, 248, 0.55);
}

.bento-tile--trades:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(56, 189, 248, 0.15);
}

/* ── Trade bonus chips ────────────────────────────────────────── */
.trade-event-name {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 8px;
}

.trade-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.trade-chip {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
  line-height: 1.5;
}

.trade-chip--dust {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.28);
  color: rgba(250, 204, 21, 0.88);
}

.trade-chip--special {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.28);
  color: rgba(56, 189, 248, 0.88);
}

.trade-chip--lucky {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.28);
  color: rgba(52, 211, 153, 0.88);
}

.trade-chip--trinket {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.28);
  color: rgba(168, 85, 247, 0.88);
}

.trade-chip--xl {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.28);
  color: rgba(249, 115, 22, 0.88);
}

/* ── Lucky Friend trade targets (Trades page) ─────────────────── */
.lucky-targets {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 16px;
}

.lucky-targets__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.lucky-targets__detail {
  flex: 1;
  min-width: 0;
}

.lucky-targets__name {
  font-size: var(--font-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lucky-targets__rank {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: 1px;
}

.lucky-targets__note {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 8px;
}

.bento-tile__label {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 9px;
}

/* Stretch-link: makes the whole tile clickable via the label anchor */
.bento-tile__link {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bento-tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.bento-tile__link:hover {
  text-decoration: none;
  color: var(--text-dim);
}

/* Inner links sit above the stretch pseudo-element */
.bento-tile__content a,
.bento-tile__list a {
  position: relative;
  z-index: 1;
}

.bento-tile__arrow {
  opacity: 0.4;
  font-size: var(--font-md);
  transition:
    opacity 0.15s,
    transform 0.15s;
}

.bento-tile:hover .bento-tile__arrow {
  opacity: 0.7;
  transform: translateX(2px);
}

.bento-tile__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bento-tile__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.bento-tile__content {
  font-size: var(--font-lg);
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (width <= 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card ─────────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  margin-bottom: 8px;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

details.card__body > summary,
details.lineup-card__body > summary {
  cursor: pointer;
  list-style: none;
}

details.card__body > summary::-webkit-details-marker,
details.lineup-card__body > summary::-webkit-details-marker {
  display: none;
}

.card__inner {
  display: flex;
  align-items: stretch;
}

.card__bar {
  width: 3px;
  align-self: stretch;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
}

.card__body {
  flex: 1;
  padding: 13px 14px;
  min-width: 0;
}

/* ── Card header ──────────────────────────────────────────────── */
.card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.card__header-left {
  flex: 1;
  min-width: 0;
}

.egg-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Pokémon sprite icon ──────────────────────────────────────── */
.picon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 4px;
  overflow: hidden;
}

.picon-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(6px) brightness(0.4) saturate(1.4);
  transform: scale(0.85) translateY(5px);
  z-index: 0;
  pointer-events: none;
}

.picon {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  image-rendering: pixelated;
  object-fit: contain;
}

.picon-wrap--sm {
  width: 22px;
  height: 22px;
}

.picon-wrap--lg {
  width: 56px;
  height: 56px;
}

/* ── Card two-column layout (sprite + text) ───────────────────── */
.card__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Tall enough to span the card__name line + one encounter-row__rank line:
   19px × 1.3 + 15px × 1.5 ≈ 48px */
.card__sprite {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* card-sprite-link is the <a> (or <span>) wrapping the sprite + optional shadow overlay */
.card-sprite-link {
  position: relative;
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}

.card__sprite .picon-wrap,
.card__sprite .picon-wrap--lg,
.card-sprite-link .picon-wrap--lg {
  width: 48px;
  height: 48px;
}

/* Shadow Pokémon overlay image — placed behind the sprite */
.card-sprite-shadow {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* Ensure picon-wrap sits above the shadow overlay */
.card-sprite-link .picon-wrap {
  position: relative;
  z-index: 1;
}

.card__text {
  flex: 1;
  min-width: 0;
}

/* Sprite column already handles indentation — remove legacy padding-left. */
.card__text .encounter-row__rank {
  padding-left: 0;
  margin-top: 4px;
}

/* Raid card rank: target species shown with its own card-sprite-link */
.rank-species {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}

.rank-species__detail {
  flex: 1;
  min-width: 0;
}

/* Rank-lines: no sprite, just name + rank lines stacked */
.rank-lines {
  margin-top: 4px;
}

.encounter-row__sprite {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card__name {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.card__name a {
  color: var(--text);
  text-decoration: none;
}

.card__name a:hover {
  text-decoration: underline;
}

.card__subtext {
  font-size: var(--font-base);
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.4;
}

.card__meta {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-dim);
}

.card__meta.card__prob {
  font-family: inherit;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.card__note {
  font-size: var(--font-sm);
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.4;
}

.card__note--community {
  color: var(--text-community);
}

.community-note {
  color: var(--text-community);
  font-size: var(--font-sm);
  margin: 0 0 1rem;
}

/* ── Chevron ──────────────────────────────────────────────────── */
.chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-icon);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

details.card__body[open] .chevron {
  transform: rotate(180deg);
  color: var(--text-icon-active);
}

details.lineup-card__body[open] .chevron {
  transform: rotate(180deg);
  color: var(--text-icon);
}

/* ── Card list — content revealed by <details> ────────────────── */
.card-list {
  padding-left: 4px;
}

details.card__body[open] > .card-list,
details.lineup-card__body[open] > .card-list {
  margin: 10px -14px -13px;
  padding: 10px 14px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.1);
}

/* ── Raid tier icons (repeated ic_raid_small sprites) ─────────── */
.raid-tier {
  font-size: var(--font-lg);
  line-height: 1;
  color: var(--text);
  flex-shrink: 0;
}

.raid-tier--mega {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Bento tile: image-based tier inside .raid-egg */
.raid-egg .raid-tier {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  min-height: 14px;
  z-index: 2;
}

.raid-egg .raid-tier img {
  width: 14px;
  height: 14px;
  display: block;
}

/* ─── Raid egg component ───────────────────────────────────────────────────
   Egg sprite stacked above repeated tier icons. Structure:
   .raid-egg  (column flex container, relative for shadow flame)
     .raid-egg__img  (base egg sprite)
     .raid-tier  (row of repeated tier icons below the egg)
   Modifiers: --normal, --rare, --legendary, --mega, --elite, --shadow
   ─────────────────────────────────────────────────────────────────────── */
.raid-egg {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  isolation: isolate;
}

.raid-egg__img {
  display: block;
  position: relative;
  height: 56px;
  width: auto;
  z-index: 2;
}

/* Shadow raid: purple flame behind the egg */
.raid-egg--shadow::before {
  content: '';
  position: absolute;
  inset: -18% -22% -12%;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(170, 70, 255, 0.85), transparent 60%),
    radial-gradient(ellipse at 50% 55%, rgba(255, 70, 220, 0.45), transparent 62%);
  filter: blur(6px);
  z-index: 1;
}

/* Mega raid: animated hue-shift applied directly to the egg sprite */
.raid-egg--mega .raid-egg__img {
  animation: raid-mega-shift 3s linear infinite;
}

@keyframes raid-mega-shift {
  0% {
    filter: hue-rotate(0deg) saturate(1.8) brightness(1.1);
  }

  100% {
    filter: hue-rotate(360deg) saturate(1.8) brightness(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .raid-egg--mega .raid-egg__img {
    animation: none;
  }
}

/* Four-column grid: sprite | name | tier | end date. All auto so the name
   column never stretches to fill the wide tile. <li> uses display:contents
   to pass children directly into the grid, aligning columns across rows. */
.bento-tile--raids .bento-tile__list {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 4px 8px;
}

.bento-tile--raids li {
  display: contents;
}

.bento-tile--raids .raid-tier {
  text-align: right;
}

.bento-tile--raids .raid-end-label {
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

@media (width <= 640px) {
  .bento-tile--raids .bento-tile__list {
    grid-template-columns: auto 1fr auto;
  }

  .bento-tile--raids .raid-end-label {
    display: none;
  }
}

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.badge--new {
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: #5eead4;
}

.badge--legendary {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: rgba(168, 85, 247, 0.88);
  font-size: var(--font-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card__catch-items {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.badge--catch-priority {
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.badge--catch-priority-farm {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #6ee7b7;
}

.badge--catch-priority-selective {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

/* ── Upcoming raid event grouping ────────────────────────────── */
.upcoming-raid-event {
  margin-bottom: 16px;
}

.upcoming-raid-event__title {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.upcoming-raid-event__special {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-bottom: 6px;
}

.upcoming-raid-event .card {
  margin-bottom: 4px;
}

.upcoming-raid-event .card:last-child {
  margin-bottom: 0;
}

/* ── Encounter rows ───────────────────────────────────────────── */
.encounter-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.encounter-row:last-child {
  border-bottom: none;
}

.encounter-row__left {
  flex: 1;
  min-width: 0;
}

.encounter-row__name-line {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.encounter-row__name {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.encounter-row__name:hover {
  text-decoration: underline;
}

.encounter-row__rank {
  font-size: var(--font-md);
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 36px;
}

.encounter-row__rank a {
  color: var(--text-dim);
}

.encounter-row__pct {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── Schedule rows ────────────────────────────────────────────── */
.schedule-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.schedule-row:last-child {
  border-bottom: none;
}

/* ── Raid end-date label ──────────────────────────────────────── */
.raid-end-label {
  margin-left: auto;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.raid-end-label--soon {
  color: rgba(239, 68, 68, 0.8);
}

.schedule-date {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-muted);
  width: 160px;
  flex-shrink: 0;
}

.schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Table wrap (generic card-styled table) ───────────────────── */
.table-wrap {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  margin-bottom: 8px;
}

.table-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap th {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 9px 12px;
  text-align: left;
}

.table-wrap td {
  padding: 8px 12px;
  font-size: var(--font-lg);
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}

.table-wrap tr:first-child td {
  border-top: none;
}

.table-wrap .table-scroll {
  overflow-x: auto;
}

/* Legacy table fallback */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 10px;
  font-size: var(--font-lg);
  text-align: left;
  vertical-align: top;
  color: var(--text-secondary);
}

thead th {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.025);
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

tbody tr.top10-row {
  background: rgba(255, 220, 50, 0.07);
}

/* ── Mermaid diagrams ─────────────────────────────────────────── */
main svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mermaid uses foreignObject with <p> labels; reset global p overrides so
   node widths (measured at 16px in mmdc) match what the browser renders. */
.evo-chart p {
  font-size: inherit;
  margin: 0;
  color: inherit;
  line-height: inherit;
}

/* ── Prose ────────────────────────────────────────────────────── */
p {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.6;
}

ul,
ol {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin: 0 0 12px;
  padding-left: 20px;
  line-height: 1.7;
}

li {
  margin-bottom: 4px;
}

strong {
  color: var(--text);
  font-weight: 600;
}

blockquote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid rgba(147, 197, 253, 0.3);
  border-radius: 0 8px 8px 0;
  background: rgba(147, 197, 253, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

blockquote p {
  margin: 0;
}

code,
pre {
  font-family: 'DM Mono', monospace;
}

code {
  font-size: var(--font-base);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text);
}

pre {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  padding: 0.75rem;
  overflow-x: auto;
  border-radius: 8px;
  font-size: var(--font-base);
}

/* ── Site footer ──────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-muted);
  padding: 28px 0 0;
}

.site-footer__disclaimer {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 0 20px;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Family page nav ──────────────────────────────────────────── */

/* ── Family lede ─────────────────────────────────────────────── */
.family-lede {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.6;
}

/* ── Baby-stage second-move cost banner ──────────────────────── */
.baby-stage-banner {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(148, 163, 184, 0.08);
  border-left: 3px solid rgba(148, 163, 184, 0.35);
  border-radius: 0 6px 6px 0;
}

/* ── Family metadata card ────────────────────────────────────── */
.family-meta__types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.family-meta__rankings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-sm);
}

.family-meta__no-value {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Family upcoming events callout ──────────────────────────── */
.family-upcoming {
  display: grid;
  grid-template-columns: max-content 1fr max-content max-content;
  gap: 4px 12px;
  align-items: baseline;
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid rgba(147, 197, 253, 0.4);
  border-radius: 0 8px 8px 0;
  background: rgba(147, 197, 253, 0.06);
}

.family-upcoming__heading {
  grid-column: 1 / -1;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}

.family-upcoming__row {
  display: contents;
}

.family-upcoming__type {
  font-size: var(--font-sm);
  color: var(--text);
}

.family-upcoming__row--active .family-upcoming__type {
  font-weight: 700;
}

.family-upcoming__event {
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.family-upcoming__date {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.family-upcoming__link {
  font-size: var(--font-xs);
  color: var(--link);
  text-decoration: none;
}

.family-upcoming__link:hover {
  text-decoration: underline;
}

/* ── Build path cards (Family pages) ─────────────────────────── */
.build-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 24px;
}

.build-card__purify-note {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.build-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.build-card--shadow {
  border-left: 3px solid var(--build-shadow);
}

.build-card--mega {
  border-left: 3px solid var(--build-mega);
}

.build-card--primal {
  border-left: 3px solid var(--build-primal);
}

.build-card--dynamax {
  border-left: 3px solid var(--build-dynamax);
}

.build-card--purified {
  border-left: 3px solid var(--build-purified);
}

.build-card--regular {
  border-left: 3px solid var(--build-regular);
}

.build-card__header {
  display: flex;
  align-items: baseline;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-light);
  gap: 8px;
}

.build-card__roles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-card__role-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.build-card__form-badge {
  font-size: var(--font-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.build-card__form-badge--shadow {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}

.build-card__form-badge--mega {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
  color: #fdba74;
}

.build-card__form-badge--primal {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.build-card__form-badge--dynamax {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.build-card__form-badge--purified {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.build-card__form-badge--regular {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border);
  color: var(--text-secondary);
}

.build-card__title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text);
}

.build-card__role {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.build-card__rank {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.build-card__body {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
}

.build-card__sprite-col {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.build-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.build-card__move {
  font-size: var(--font-sm);
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.build-card__move--fast::before {
  content: 'fast · ';
  font-style: normal;
  color: var(--text-dim);
  font-size: var(--font-2xs);
}

.build-card__move--fast {
  font-style: italic;
}

.build-card__move--charged::before {
  content: 'charged · ';
  color: var(--text-dim);
  font-size: var(--font-2xs);
}

.build-card__deps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.build-card__dep {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.build-card__dep-icon {
  margin-right: 2px;
}

.build-card__cost-tier {
  display: flex;
  align-items: center;
  gap: 8px;
}

.build-card__resources {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-sm);
}

.build-card__resources tr + tr td {
  border-top: 1px solid var(--border-light);
}

.build-card__res-label {
  padding: 4px 8px 4px 0;
  color: var(--text-muted);
  width: 50%;
}

.build-card__res-value {
  padding: 4px 0;
  color: var(--text-secondary);
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
}

/* XL Candy difficulty inline pill */
.build-card__res-tag {
  display: inline-block;
  font-size: var(--font-2xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  vertical-align: middle;
  margin-left: 4px;
}

.xl-legendary {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.xl-event {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
  color: #fdba74;
}

.xl-farmable {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #86efac;
}

.res-tag-note {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--text-secondary);
  font-weight: 400;
}

.build-card__res-note {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin: 0;
}

.build-card__annotations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-card__annotation {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.build-card__annotation--shared {
  border-left-color: var(--link);
  color: var(--link);
}

.build-card__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.build-card__iv,
.build-card__channels {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Raid counter section ─────────────────────────────────────── */
.raid-counters {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border-light);
  margin-top: 2px;
}

.raid-counters__heading {
  font-size: var(--font-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.type-guidance {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}

.type-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.type-row-label {
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 40px;
}

.type-row-label--bring {
  color: #6dbf6d;
}

.type-row-label--avoid {
  color: #c47a7a;
}

.type-row-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.type-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-2xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

/* vivid: type color from --type-* var; background is 13% alpha via color-mix() */
.type-pill--vivid {
  --pill-color: var(--text-secondary);

  color: var(--pill-color);
  background: color-mix(in srgb, var(--pill-color) 13%, transparent);
}

.type-pill--vivid[data-type='normal'] {
  --pill-color: var(--type-normal);
}

.type-pill--vivid[data-type='fire'] {
  --pill-color: var(--type-fire);
}

.type-pill--vivid[data-type='water'] {
  --pill-color: var(--type-water);
}

.type-pill--vivid[data-type='electric'] {
  --pill-color: var(--type-electric);
}

.type-pill--vivid[data-type='grass'] {
  --pill-color: var(--type-grass);
}

.type-pill--vivid[data-type='ice'] {
  --pill-color: var(--type-ice);
}

.type-pill--vivid[data-type='fighting'] {
  --pill-color: var(--type-fighting);
}

.type-pill--vivid[data-type='poison'] {
  --pill-color: var(--type-poison);
}

.type-pill--vivid[data-type='ground'] {
  --pill-color: var(--type-ground);
}

.type-pill--vivid[data-type='flying'] {
  --pill-color: var(--type-flying);
}

.type-pill--vivid[data-type='psychic'] {
  --pill-color: var(--type-psychic);
}

.type-pill--vivid[data-type='bug'] {
  --pill-color: var(--type-bug);
}

.type-pill--vivid[data-type='rock'] {
  --pill-color: var(--type-rock);
}

.type-pill--vivid[data-type='ghost'] {
  --pill-color: var(--type-ghost);
}

.type-pill--vivid[data-type='dragon'] {
  --pill-color: var(--type-dragon);
}

.type-pill--vivid[data-type='dark'] {
  --pill-color: var(--type-dark);
}

.type-pill--vivid[data-type='steel'] {
  --pill-color: var(--type-steel);
}

.type-pill--vivid[data-type='fairy'] {
  --pill-color: var(--type-fairy);
}

/* muted: all avoid types use the same dim style */
.type-pill--muted {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-faint);
}

.type-row-resisted {
  font-size: var(--font-2xs);
  font-style: italic;
  color: var(--text-faint);
  margin-left: 2px;
}

.search-string-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}

.search-string-label {
  font-size: var(--font-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 0 9px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-light);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.search-string-value {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: 'DM Mono', 'Fira Code', monospace;
  font-size: var(--font-xs);
  color: var(--text-dim);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.search-string-value::-webkit-scrollbar {
  display: none;
}

.search-string-copy {
  flex-shrink: 0;
  padding: 8px 11px;
  background: none;
  border: none;
  border-left: 1px solid var(--border-light);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}

.search-string-copy:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.search-string-copy.copied {
  color: #6dbf6d;
}

.sort-hint {
  font-size: var(--font-xs);
  color: var(--text-faint);
  margin: 0 0 12px;
}

.tactical-note {
  padding: 9px 11px;
  background: rgba(245, 200, 66, 0.04);
  border-left: 3px solid rgba(245, 200, 66, 0.25);
  border-radius: 0 5px 5px 0;
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 10px;
}

.tactical-note__trap {
  display: block;
  margin-top: 5px;
  color: #c47a7a;
  font-size: var(--font-xs);
}

.deep-dive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s;
}

.deep-dive:hover {
  color: var(--text-dim);
}

/* ── Lineup card (Rocket page) ────────────────────────────────── */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lineup-card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  margin-bottom: 8px;
  animation: fade-up 0.35s ease both;
  -webkit-tap-highlight-color: transparent;
}

.lineup-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Frosted glass grain — makes blur feel physically frosted ─────── */
.card::after,
.bento-tile::after,
.table-wrap::after,
.lineup-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23a)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.032;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.lineup-card:nth-child(1) {
  animation-delay: 0s;
}

.lineup-card:nth-child(2) {
  animation-delay: 0.05s;
}

.lineup-card:nth-child(3) {
  animation-delay: 0.1s;
}

.lineup-card:nth-child(4) {
  animation-delay: 0.15s;
}

.lineup-card:nth-child(5) {
  animation-delay: 0.2s;
}

.lineup-card:nth-child(6) {
  animation-delay: 0.25s;
}

.lineup-card:nth-child(7) {
  animation-delay: 0.3s;
}

.lineup-card:nth-child(8) {
  animation-delay: 0.35s;
}

.lineup-card:nth-child(9) {
  animation-delay: 0.4s;
}

.lineup-card:nth-child(10) {
  animation-delay: 0.45s;
}

.lineup-card__inner {
  display: flex;
}

.lineup-card__bar {
  width: 3px;
  flex-shrink: 0;
  align-self: stretch;
}

.lineup-card__body {
  flex: 1;
  padding: 13px 14px;
  min-width: 0;
}

.lineup-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.lineup-card__header-left {
  flex: 1;
  min-width: 0;
}

.lineup-card__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lineup-card__name {
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 4px;
}

.lineup-card__gender {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-left: 4px;
  font-style: normal;
}

.lineup-card__pct {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-dim);
}

.lineup-card__quote {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  font-style: normal;
  line-height: 1.3;
}

/* Type colors on lineup-card__bar, card__bar */
.lineup-card__bar[data-type],
.card__bar[data-type] {
  background: var(--type-color);
}

.lineup-card__bar[data-type='normal'],
.card__bar[data-type='normal'] {
  --type-color: var(--type-normal);
}

.lineup-card__bar[data-type='fire'],
.card__bar[data-type='fire'] {
  --type-color: var(--type-fire);
}

.lineup-card__bar[data-type='water'],
.card__bar[data-type='water'] {
  --type-color: var(--type-water);
}

.lineup-card__bar[data-type='electric'],
.card__bar[data-type='electric'] {
  --type-color: var(--type-electric);
}

.lineup-card__bar[data-type='grass'],
.card__bar[data-type='grass'] {
  --type-color: var(--type-grass);
}

.lineup-card__bar[data-type='ice'],
.card__bar[data-type='ice'] {
  --type-color: var(--type-ice);
}

.lineup-card__bar[data-type='fighting'],
.card__bar[data-type='fighting'] {
  --type-color: var(--type-fighting);
}

.lineup-card__bar[data-type='poison'],
.card__bar[data-type='poison'] {
  --type-color: var(--type-poison);
}

.lineup-card__bar[data-type='ground'],
.card__bar[data-type='ground'] {
  --type-color: var(--type-ground);
}

.lineup-card__bar[data-type='flying'],
.card__bar[data-type='flying'] {
  --type-color: var(--type-flying);
}

.lineup-card__bar[data-type='psychic'],
.card__bar[data-type='psychic'] {
  --type-color: var(--type-psychic);
}

.lineup-card__bar[data-type='bug'],
.card__bar[data-type='bug'] {
  --type-color: var(--type-bug);
}

.lineup-card__bar[data-type='rock'],
.card__bar[data-type='rock'] {
  --type-color: var(--type-rock);
}

.lineup-card__bar[data-type='ghost'],
.card__bar[data-type='ghost'] {
  --type-color: var(--type-ghost);
}

.lineup-card__bar[data-type='dragon'],
.card__bar[data-type='dragon'] {
  --type-color: var(--type-dragon);
}

.lineup-card__bar[data-type='dark'],
.card__bar[data-type='dark'] {
  --type-color: var(--type-dark);
}

.lineup-card__bar[data-type='steel'],
.card__bar[data-type='steel'] {
  --type-color: var(--type-steel);
}

.lineup-card__bar[data-type='fairy'],
.card__bar[data-type='fairy'] {
  --type-color: var(--type-fairy);
}

/* ── Utilities ────────────────────────────────────────────────── */
.num {
  font-family: 'DM Mono', monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.section-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: currentcolor;
  box-shadow: 0 0 6px currentcolor;
}

/* ── Rankings pages ──────────────────────────────────────────── */
.rankings-intro {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.rankings-index__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.rankings-index__list a {
  font-size: var(--font-sm);
  color: var(--link);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.rankings-index__list a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.rankings-type-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
  margin-bottom: 24px;
}

.rankings-type-nav a {
  font-size: var(--font-xs);
  color: var(--link);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.rankings-type-nav a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.rankings-type-nav__link--active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.rankings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rankings-empty {
  color: var(--text-muted);
}

.rankings-search-section {
  margin: 24px 0 8px;
}

.rankings-search-section h2 {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.rankings-search-intro {
  font-size: var(--font-xs);
  color: var(--text-faint);
  margin: 12px 0 4px;
}

.rankings-search-intro:first-of-type {
  margin-top: 0;
}

.rankings-search-cross-type {
  font-size: var(--font-xs);
  color: var(--text-faint);
  margin: 4px 0 0;
}

.ranking-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto 56px 1fr auto;
  align-items: start;
  gap: 10px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  padding: 10px 12px;
  overflow: hidden;
}

.ranking-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.ranking-entry__rank {
  font-family: 'DM Mono', monospace;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-dim);
  opacity: 0.35;
  text-align: right;
  min-width: 2ch;
  align-self: center;
}

.ranking-entry__sprite {
  display: flex;
  align-items: flex-start;
}

.ranking-entry__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ranking-entry__name {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text);
}

.ranking-entry__form {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-weight: 400;
}

.ranking-entry__form--gigantamax {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c4b5fd;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form--dynamax {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form--shadow {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form-group-note {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  font-style: italic;
}

.ranking-entry__moves {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ranking-entry__move--fast::before {
  content: 'Fast ';
  color: var(--text-dim);
}

.ranking-entry__move--charged::before {
  content: 'Charged ';
  color: var(--text-dim);
}

.elite-tm-badge {
  font-size: var(--font-2xs);
  background: rgba(250, 204, 21, 0.12);
  color: var(--text-community);
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: middle;
}

.ranking-entry__cost {
  align-self: start;
}

.cost-dots-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 6px 4px;
  background: none;
  border: none;
  outline: none;
}

.cost-dots-btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

.cost-dots-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cost-tier-label {
  font-size: var(--font-2xs);
  color: var(--text-dim);
  margin-top: 3px;
}

.cost-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  flex-shrink: 0;
}

.cost-dot--filled {
  background: var(--link);
  border-color: var(--link);
}

.cost-tip {
  /* Override [popover] UA defaults; CSS anchor positioning controls placement */
  position: absolute;
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
  margin: 8px;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  color: var(--text);

  /* Visual styles */
  background: rgba(8, 14, 26, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  padding: 12px 14px;
  min-width: 200px;
  max-width: 280px;
}

.cost-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: var(--font-xs);
}

.cost-panel dt {
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
}

.cost-panel dd {
  color: var(--text-secondary);
  margin: 0;
}

.cost-panel__difficulty {
  font-size: var(--font-2xs);
  color: var(--text-dim);
}

.cost-panel__note {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin: 8px 0 0;
}

.event-bonuses {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: 8px;
  padding: 6px 14px 6px 28px;
  border-left: 3px solid color-mix(in srgb, #facc15 25%, transparent);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, #facc15 3%, transparent);
}

.event-bonuses li {
  margin-bottom: 3px;
}

.event-bonuses li:last-child {
  margin-bottom: 0;
}

/* ── Type icons ───────────────────────────────────────────────── */

.type-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}

.type-icon--normal {
  background-image: url('./img/types/ico_0_normal.webp');
}

.type-icon--fighting {
  background-image: url('./img/types/ico_1_fighting.webp');
}

.type-icon--flying {
  background-image: url('./img/types/ico_2_flying.webp');
}

.type-icon--poison {
  background-image: url('./img/types/ico_3_poison.webp');
}

.type-icon--ground {
  background-image: url('./img/types/ico_4_ground.webp');
}

.type-icon--rock {
  background-image: url('./img/types/ico_5_rock.webp');
}

.type-icon--bug {
  background-image: url('./img/types/ico_6_bug.webp');
}

.type-icon--ghost {
  background-image: url('./img/types/ico_7_ghost.webp');
}

.type-icon--steel {
  background-image: url('./img/types/ico_8_steel.webp');
}

.type-icon--fire {
  background-image: url('./img/types/ico_9_fire.webp');
}

.type-icon--water {
  background-image: url('./img/types/ico_10_water.webp');
}

.type-icon--grass {
  background-image: url('./img/types/ico_11_grass.webp');
}

.type-icon--electric {
  background-image: url('./img/types/ico_12_electric.webp');
}

.type-icon--psychic {
  background-image: url('./img/types/ico_13_psychic.webp');
}

.type-icon--ice {
  background-image: url('./img/types/ico_14_ice.webp');
}

.type-icon--dragon {
  background-image: url('./img/types/ico_15_dragon.webp');
}

.type-icon--dark {
  background-image: url('./img/types/ico_16_dark.webp');
}

.type-icon--fairy {
  background-image: url('./img/types/ico_17_fairy.webp');
}

/* ── Type card grid ───────────────────────────────────────────── */
.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 0.5rem;
  margin-bottom: 24px;
}

@media (width >= 640px) {
  .type-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (width <= 360px) {
  .type-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.type-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--type-card-color, var(--border));
  background: color-mix(in srgb, var(--type-card-color, transparent) 8%, transparent);
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  color: inherit;
  font-size: var(--font-2xs);
  line-height: 1.3;
  transition: background 0.12s ease;
}

.type-card:hover,
.type-card:focus-visible {
  background: color-mix(in srgb, var(--type-card-color, transparent) 18%, transparent);
  outline: none;
}

.type-card[aria-current='page'] {
  background: color-mix(in srgb, var(--type-card-color, transparent) 22%, transparent);
  font-weight: 600;
  pointer-events: none;
}

.type-card--bug {
  --type-card-color: var(--type-bug);
}

.type-card--dark {
  --type-card-color: var(--type-dark);
}

.type-card--dragon {
  --type-card-color: var(--type-dragon);
}

.type-card--electric {
  --type-card-color: var(--type-electric);
}

.type-card--fairy {
  --type-card-color: var(--type-fairy);
}

.type-card--fighting {
  --type-card-color: var(--type-fighting);
}

.type-card--fire {
  --type-card-color: var(--type-fire);
}

.type-card--flying {
  --type-card-color: var(--type-flying);
}

.type-card--ghost {
  --type-card-color: var(--type-ghost);
}

.type-card--grass {
  --type-card-color: var(--type-grass);
}

.type-card--ground {
  --type-card-color: var(--type-ground);
}

.type-card--ice {
  --type-card-color: var(--type-ice);
}

.type-card--normal {
  --type-card-color: var(--type-normal);
}

.type-card--poison {
  --type-card-color: var(--type-poison);
}

.type-card--psychic {
  --type-card-color: var(--type-psychic);
}

.type-card--rock {
  --type-card-color: var(--type-rock);
}

.type-card--steel {
  --type-card-color: var(--type-steel);
}

.type-card--water {
  --type-card-color: var(--type-water);
}

/* ── Type badge (inline, e.g. in h1) ─────────────────────────── */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--type-card-color, transparent) 15%, transparent);
  font-size: var(--font-2xs);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

/* ── Endgame · Focus hero ──────────────────────────────────────── */
.focus-hero {
  margin-bottom: 12px;
}

.focus-hero__bar {
  background: rgba(245, 158, 11, 0.85);
}

.focus-hero__label {
  margin-bottom: 6px;
  color: rgba(245, 158, 11, 0.75);
}

.focus-hero__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.focus-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-secondary);
}

.focus-hero__expiry--urgent {
  color: rgba(245, 158, 11, 0.9);
  font-weight: 500;
}

.focus-hero__why {
  color: var(--text-muted);
}

/* ── Index event tiles (Eggs, Trades) ─────────────────────────── */
.event-tiles {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.event-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

.event-tile:hover {
  background: rgba(255, 255, 255, 0.04);
}

.event-tile:last-child {
  border-bottom: none;
}

.event-tile__label {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 56px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.event-tile__main {
  flex: 1;
  min-width: 0;
}

.event-tile__name {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tile__why {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tile__link {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  text-decoration: none;
  opacity: 0.5;
}

.event-tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* ── Endgame · Your Queue ──────────────────────────────────────── */
.queue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.queue-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

.queue-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.queue-item:last-child {
  border-bottom: none;
}

.queue-item__action {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 56px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.queue-item__main {
  flex: 1;
  min-width: 0;
}

.queue-item__name {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-item__name a {
  position: relative;
  z-index: 1;
}

.queue-item__why {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-item__expiry {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  color: var(--text-muted);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  text-decoration: none;
}

.queue-item__expiry::after {
  content: '';
  position: absolute;
  inset: 0;
}

.queue-item--p0 .queue-item__expiry {
  color: rgba(245, 158, 11, 0.8);
}

/* ── Light mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f0f4f8;
    --card-bg: rgba(255, 255, 255, 0.75);
    --border: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --text: #0f172a;
    --text-secondary: #1e293b;
    --text-muted: rgba(15, 23, 42, 0.65);
    --text-dim: rgba(15, 23, 42, 0.65);
    --text-tertiary: rgba(15, 23, 42, 0.65);
    --text-faint: rgba(15, 23, 42, 0.3);
    --link: #2563eb;
    --nav-bg: rgba(240, 244, 248, 0.88);
    --nav-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1);
    --text-nav: rgba(0, 0, 0, 0.5);
    --text-nav-hover: rgba(0, 0, 0, 0.8);
    --text-icon: rgba(0, 0, 0, 0.4);
    --text-icon-active: rgba(0, 0, 0, 0.7);
    --build-regular: rgba(0, 0, 0, 0.15);
    --text-community: #92400e;
  }

  /* Ambient gradient — softer on light backgrounds */
  html::before {
    background:
      radial-gradient(ellipse 80% 55% at 10% 5%, rgba(56, 189, 248, 0.1) 0%, transparent 55%),
      radial-gradient(ellipse 60% 70% at 90% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 55%),
      radial-gradient(ellipse 40% 40% at 55% 40%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
      radial-gradient(ellipse 50% 30% at 75% 15%, rgba(249, 115, 22, 0.05) 0%, transparent 50%);
  }

  /* Card shine — brighter top-left highlight looks natural on light glass */
  .card::before,
  .bento-tile::before,
  .table-wrap::before,
  .lineup-card::before {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 45%, transparent 60%),
      linear-gradient(225deg, rgba(180, 210, 255, 0.08) 0%, transparent 50%);
  }

  /* Nav links */
  nav a {
    color: rgba(0, 0, 0, 0.5);
  }

  nav a:hover {
    color: rgba(0, 0, 0, 0.8);
  }

  nav a.active {
    color: #0f172a;
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  .nav-toggle {
    color: rgba(0, 0, 0, 0.6);
  }

  .nav-search input[type='search'] {
    background: rgba(0, 0, 0, 0.05);
  }

  .nav-links {
    background: rgba(240, 244, 248, 0.97);
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  .nav-links a.active {
    border-left-color: #2563eb;
  }

  /* Card bar */
  .card__bar {
    background: rgba(0, 0, 0, 0.1);
  }

  /* Chevrons */
  .chevron {
    color: rgba(0, 0, 0, 0.4);
  }

  details.card__body[open] .chevron {
    color: rgba(0, 0, 0, 0.7);
  }

  details.lineup-card__body[open] .chevron {
    color: rgba(0, 0, 0, 0.4);
  }

  /* Card list separator + inner panel */
  details.card__body[open] > .card-list,
  details.lineup-card__body[open] > .card-list {
    border-top-color: rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0.04);
  }

  /* Encounter rows */
  .encounter-row {
    border-bottom-color: rgba(0, 0, 0, 0.07);
  }

  .encounter-row__rank {
    color: rgba(0, 0, 0, 0.38);
  }

  .encounter-row__rank a {
    color: rgba(0, 0, 0, 0.5);
  }

  .encounter-row__pct {
    color: rgba(0, 0, 0, 0.3);
  }

  /* Schedule rows */
  .schedule-row {
    border-bottom-color: rgba(0, 0, 0, 0.07);
  }

  .schedule-date {
    color: rgba(0, 0, 0, 0.42);
  }

  /* Bento tile hover */
  .bento-tile:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
  }

  .bento-tile--raids:hover,
  .bento-tile--eggs:hover,
  .bento-tile--tasks:hover,
  .bento-tile--rocket:hover,
  .bento-tile--dynamax:hover,
  .bento-tile--trades:hover {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(37, 99, 235, 0.1);
  }

  .bento-tile__link:hover {
    color: rgba(0, 0, 0, 0.65);
  }

  /* Table-wrap rows */
  .table-wrap td {
    border-top-color: rgba(0, 0, 0, 0.05);
  }

  /* Generic tables */
  th,
  td {
    border-color: rgba(0, 0, 0, 0.07);
  }

  thead th {
    background: rgba(0, 0, 0, 0.03);
  }

  tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
  }

  tbody tr.top10-row {
    background: rgba(180, 130, 0, 0.1);
  }

  /* Blockquote */
  blockquote {
    border-left-color: rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.05);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Code / pre */
  code {
    background: rgba(0, 0, 0, 0.06);
  }

  pre {
    background: rgba(0, 0, 0, 0.05);
  }

  /* H2 separator */
  h2 {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  /* Footer */
  .site-footer {
    color: rgba(0, 0, 0, 0.6);
  }

  .site-footer__disclaimer {
    color: rgba(0, 0, 0, 0.6);
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  /* Badges — darken text for legibility on light backgrounds */
  .badge--new {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(13, 148, 136, 0.35);
    color: #134e4a;
  }

  .badge--legendary {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(126, 34, 206, 0.35);
    color: #6b21a8;
  }

  .badge--catch-priority-farm {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #065f46;
  }

  .badge--catch-priority-selective {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(100, 116, 139, 0.3);
    color: #334155;
  }

  /* Build form badges */
  .build-card__form-badge--shadow {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
  }

  .build-card__form-badge--mega {
    background: rgba(249, 115, 22, 0.1);
    color: #c2410c;
  }

  .build-card__form-badge--primal {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
  }

  .build-card__form-badge--dynamax {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
  }

  .build-card__form-badge--purified {
    background: rgba(148, 163, 184, 0.1);
    color: #475569;
  }

  .build-card__form-badge--regular {
    background: rgba(0, 0, 0, 0.04);
    color: #475569;
  }

  .ranking-entry__form--gigantamax {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.25);
    color: #7c3aed;
  }

  .ranking-entry__form--dynamax {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #b91c1c;
  }

  .ranking-entry__form--shadow {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    color: #4338ca;
  }

  /* XL candy difficulty badges */
  .xl-legendary {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #b91c1c;
  }

  .xl-event {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.25);
    color: #c2410c;
  }

  .xl-farmable {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: #15803d;
  }

  .res-tag-note {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
  }

  .baby-stage-banner {
    background: rgba(148, 163, 184, 0.05);
    border-left-color: rgba(148, 163, 184, 0.25);
  }

  /* Rankings */
  .rankings-index__list a {
    color: #1d4ed8;
    border-color: rgba(0, 0, 0, 0.12);
  }

  .rankings-type-nav a {
    color: #1d4ed8;
    border-color: rgba(0, 0, 0, 0.12);
  }

  .rankings-type-nav__link--active {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.2);
  }

  .cost-dot {
    border-color: rgba(0, 0, 0, 0.3);
  }

  .cost-dot--filled {
    background: #1d4ed8;
    border-color: #1d4ed8;
  }

  .cost-tip {
    background: rgba(255, 255, 255, 0.97);
  }

  .elite-tm-badge {
    background: rgba(161, 98, 7, 0.1);
    color: #92400e;
    border-color: rgba(161, 98, 7, 0.25);
  }

  .type-card {
    background: color-mix(in srgb, var(--type-card-color, transparent) 15%, transparent);
  }

  .type-card:hover,
  .type-card:focus-visible {
    background: color-mix(in srgb, var(--type-card-color, transparent) 25%, transparent);
  }

  .type-card[aria-current='page'] {
    background: color-mix(in srgb, var(--type-card-color, transparent) 30%, transparent);
  }
}