:root {
  color-scheme: dark light;
  /* Horizontal inset for main, catalog sticky bar, topnav (halved on narrow viewports). */
  --page-gutter: 1rem;
  /* Widen on large / ultrawide monitors (main column is already beside Rotom). */
  --content-max-width: 1280px;
  /* Rotom sidebar width (overridable via JS + localStorage) */
  --rotom-sidebar-width: 340px;
  /* Topnav height (used by media queries / layout notes) */
  --topnav-h: 56px;
  --radius: 12px;
  /* Rotom + section accents (match home cards & nav) */
  --rotom-orange: #e85d2c;
  --rotom-orange-deep: #b84318;
  --rotom-cyan: #6ee7f0;
  --nav-home: #cfd6e6;
  --nav-species: #5eb0ff;
  --nav-moves: #c97bff;
  --nav-abilities: #9fe067;
  --nav-items: #f0b24a;
  --nav-calc: var(--rotom-orange);
  --calc-atk-accent: #f87171;
  --calc-def-accent: #5eb0ff;
  --calc-move-accent: #facc15;
  --calc-field-accent: #94a3b8;
  --nav-team: #7dd3fc;
  --nav-compare: #f472b6;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Dark theme (default) */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #121722;
  --panel2: #161c28;
  --border: #2a3140;
  --text: #e8eaef;
  --muted: #8b99b3;
  --accent: #e24a4a;
  --link: #8ec7ff;
  --table-header-bg: color-mix(in srgb, var(--panel2) 82%, #fff 18%);
  --topnav-bg-start: #101522;
  --nav-hover-bg: rgba(255, 255, 255, 0.04);
  --nav-active-bg: rgba(0, 0, 0, 0.35);
  --nav-active-text: #fff;
  --shadow-md: rgba(0, 0, 0, 0.35);
  --bar-track-bg: rgba(255, 255, 255, 0.06);
  --input-bg: var(--panel);
  --backdrop: rgba(7, 9, 14, 0.55);
  --rotom-sidebar-bg: linear-gradient(180deg, #2a160c 0%, #1a0d08 40%, #120805 100%);
  --rotom-sidebar-shadow: inset -8px 0 24px rgba(0, 0, 0, 0.35);
  --rotom-head-bg: rgba(232, 93, 44, 0.12);
  --btn-secondary-bg: var(--panel);
  --btn-secondary-solid: #2f3b52;
  --btn-secondary-hover: color-mix(in srgb, var(--page-accent) 12%, var(--panel2));
  --row-hover-bg: rgba(255, 255, 255, 0.02);
  --catalog-row-hover-bg: rgba(22, 28, 40, 0.85);
  --catalog-row-hover-title: #fff;
  --catalog-row-hover-border: var(--border);
  --sprite-plate-bg: radial-gradient(circle at 50% 70%, #1e2433, #0f121a);
  --calc-sprite-plate-bg: rgba(0, 0, 0, 0.35);
  --accent-chip-color: color-mix(in srgb, var(--page-accent) 42%, #f2f6ff);
  --dropdown-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  --card-hover-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  /* Stat column tints (bright on dark UI) */
  --stat-color-hp: #4ade80;
  --stat-color-hp-head: #86efac;
  --stat-color-atk: #facc15;
  --stat-color-atk-head: #fde047;
  --stat-color-def: #fb923c;
  --stat-color-def-head: #fdba74;
  --stat-color-spatk: #38bdf8;
  --stat-color-spatk-head: #7dd3fc;
  --stat-color-spdef: #818cf8;
  --stat-color-spdef-head: #a5b4fc;
  --stat-color-spe: #e879f9;
  --stat-color-spe-head: #f0abfc;
  --stat-color-bst: #e8eaef;
  --stat-color-bst-head: #f8fafc;
  /* Rotom chat chrome */
  --rotom-brand-color: #fff5e8;
  --rotom-sub-color: rgba(255, 230, 210, 0.75);
  --rotom-head-border: rgba(232, 93, 44, 0.35);
  --rotom-compose-bg: rgba(0, 0, 0, 0.25);
  --rotom-compose-border: rgba(232, 93, 44, 0.25);
  --rotom-input-bg: #0d0604;
  --rotom-input-color: #fff5ec;
  --rotom-input-border: rgba(232, 93, 44, 0.45);
  --rotom-msg-user-bg: #1e2a3d;
  --rotom-msg-user-border: #334055;
  --rotom-msg-user-color: var(--text);
  --rotom-msg-rotom-bg: rgba(232, 93, 44, 0.18);
  --rotom-msg-rotom-border: rgba(232, 93, 44, 0.45);
  --rotom-msg-rotom-color: #fff2e8;
  --rotom-link-color: #b8fbff;
  --rotom-link-bg: rgba(110, 231, 240, 0.15);
  --rotom-link-bg-hover: rgba(110, 231, 240, 0.28);
  --rotom-agent-label: rgba(255, 230, 210, 0.88);
  --rotom-toggle-ui-bg: rgba(0, 0, 0, 0.32);
  --rotom-toggle-knob: #fff5e8;
  --rotom-mic-bg: rgba(110, 231, 240, 0.12);
  --rotom-mic-border: rgba(110, 231, 240, 0.5);
  --rotom-mic-hover-bg: rgba(110, 231, 240, 0.22);
  --rotom-cyan-ui: #6ee7f0;
}

/* Light theme */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5fa;
  --panel: #ffffff;
  --panel2: #e8edf5;
  --border: #c5cedd;
  --text: #141b28;
  --muted: #5a6578;
  --accent: #d63a3a;
  --link: #1a5fb4;
  --table-header-bg: color-mix(in srgb, var(--panel2) 65%, var(--text) 8%);
  --topnav-bg-start: #e8ecf4;
  --nav-hover-bg: rgba(0, 0, 0, 0.05);
  --nav-active-bg: #ffffff;
  --nav-active-text: var(--text);
  --shadow-md: rgba(15, 23, 42, 0.1);
  --bar-track-bg: rgba(0, 0, 0, 0.08);
  --input-bg: #ffffff;
  --backdrop: rgba(15, 23, 42, 0.35);
  --rotom-sidebar-bg: linear-gradient(180deg, #fff8f4 0%, #f5ebe6 45%, #ebe4df 100%);
  --rotom-sidebar-shadow: inset -4px 0 16px rgba(15, 23, 42, 0.06);
  --rotom-head-bg: rgba(232, 93, 44, 0.1);
  --btn-secondary-bg: var(--panel);
  --btn-secondary-solid: #d5dde9;
  --btn-secondary-hover: color-mix(in srgb, var(--page-accent) 10%, var(--panel2));
  --row-hover-bg: rgba(0, 0, 0, 0.04);
  --catalog-row-hover-bg: color-mix(in srgb, var(--page-accent) 30%, var(--panel2));
  --catalog-row-hover-title: color-mix(in srgb, var(--page-accent) 92%, var(--text));
  --catalog-row-hover-border: color-mix(in srgb, var(--page-accent) 45%, var(--border));
  --sprite-plate-bg: radial-gradient(circle at 50% 70%, #dce4f0, #f8fafc);
  --calc-sprite-plate-bg: color-mix(in srgb, var(--page-accent) 6%, var(--panel2));
  --accent-chip-color: color-mix(in srgb, var(--page-accent) 92%, var(--text));
  --dropdown-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
  --card-hover-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  --nav-home: #5a6478;
  --nav-species: #2563eb;
  --nav-moves: #7c3aed;
  --nav-abilities: #4d7c0f;
  --nav-items: #b45309;
  --nav-team: #0369a1;
  --nav-compare: #db2777;
  /* Stat column tints (darker variants for light backgrounds) */
  --stat-color-hp: #15803d;
  --stat-color-hp-head: #166534;
  --stat-color-atk: #a16207;
  --stat-color-atk-head: #854d0e;
  --stat-color-def: #c2410c;
  --stat-color-def-head: #9a3412;
  --stat-color-spatk: #0369a1;
  --stat-color-spatk-head: #075985;
  --stat-color-spdef: #4338ca;
  --stat-color-spdef-head: #3730a3;
  --stat-color-spe: #a21caf;
  --stat-color-spe-head: #86198f;
  --stat-color-bst: #1e293b;
  --stat-color-bst-head: #334155;
  /* Rotom chat chrome */
  --rotom-brand-color: #2a1810;
  --rotom-sub-color: #5c4a42;
  --rotom-head-border: rgba(232, 93, 44, 0.32);
  --rotom-compose-bg: rgba(255, 255, 255, 0.72);
  --rotom-compose-border: rgba(232, 93, 44, 0.22);
  --rotom-input-bg: #ffffff;
  --rotom-input-color: var(--text);
  --rotom-input-border: color-mix(in srgb, var(--rotom-orange) 45%, var(--border));
  --rotom-msg-user-bg: #e8edf5;
  --rotom-msg-user-border: var(--border);
  --rotom-msg-user-color: var(--text);
  --rotom-msg-rotom-bg: rgba(232, 93, 44, 0.12);
  --rotom-msg-rotom-border: rgba(232, 93, 44, 0.38);
  --rotom-msg-rotom-color: #2d1f18;
  --rotom-link-color: #0e7490;
  --rotom-link-bg: rgba(14, 116, 144, 0.1);
  --rotom-link-bg-hover: rgba(14, 116, 144, 0.18);
  --rotom-agent-label: #5c4a42;
  --rotom-toggle-ui-bg: rgba(0, 0, 0, 0.14);
  --rotom-toggle-knob: #ffffff;
  --rotom-mic-bg: rgba(14, 116, 144, 0.1);
  --rotom-mic-border: rgba(14, 116, 144, 0.45);
  --rotom-mic-hover-bg: rgba(14, 116, 144, 0.18);
  --rotom-cyan-ui: #0e7490;
  --rotom-cyan: #0e7490;
}

@media (min-width: 1400px) {
  :root {
    --content-max-width: 1480px;
  }
}
@media (min-width: 1680px) {
  :root {
    --content-max-width: 1720px;
  }
}
@media (min-width: 2000px) {
  :root {
    --content-max-width: 1960px;
  }
}
@media (min-width: 2400px) {
  :root {
    --content-max-width: 2280px;
  }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Per-route accent (see `data-page-accent` in app.js). */
  --page-accent: var(--nav-home);
  /* Scrollbars (thumb follows --page-accent). */
  --scrollbar-size: 5px;
  --scrollbar-thumb: color-mix(in srgb, var(--page-accent) 52%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--page-accent) 78%, transparent);
  --scrollbar-track: transparent;
}

body[data-page-accent="species"] {
  --page-accent: var(--nav-species);
}
body[data-page-accent="moves"] {
  --page-accent: var(--nav-moves);
}
body[data-page-accent="abilities"] {
  --page-accent: var(--nav-abilities);
}
body[data-page-accent="items"] {
  --page-accent: var(--nav-items);
}
body[data-page-accent="calc"] {
  --page-accent: var(--nav-calc);
}
body[data-page-accent="compare"] {
  --page-accent: var(--nav-compare);
}
body[data-page-accent="team"] {
  --page-accent: var(--nav-team);
}

/* Minimal scrollbars — thumb tint follows current section (--page-accent on body). */
.app-shell,
.app-shell * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.app-shell *::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.app-shell *::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.app-shell *::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.app-shell *::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

.app-shell *::-webkit-scrollbar-corner {
  background: transparent;
}

.app-shell *::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.site-header {
  flex-shrink: 0;
}

.app-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: auto;
}

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

.topnav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem var(--page-gutter);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--topnav-bg-start), var(--bg));
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand-rotom {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}
.brand-rotom:hover {
  color: var(--rotom-cyan);
  text-decoration: none;
}
.brand-rotom-icon {
  border-radius: 12px;
  border: 2px solid var(--rotom-orange);
  object-fit: cover;
  flex-shrink: 0;
}

.brand-rotom-label {
  white-space: nowrap;
}

.topnav-primary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 1 auto;
  min-width: 0;
}

.topnav-primary .nav-links {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.28rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel2) 72%, var(--bg));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border-radius: 9px;
  padding: 0.42rem 0.72rem 0.42rem 0.62rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition:
    color 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--nav-item);
  line-height: 0;
}

.nav-link-icon .category-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.nav-link-label {
  white-space: nowrap;
}

/* Subtle dividers between items */
.nav-link + .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: color-mix(in srgb, var(--border) 85%, transparent);
  pointer-events: none;
}

.nav-link:hover::before,
.nav-link.active::before,
.nav-link:hover + .nav-link::before,
.nav-link.active + .nav-link::before {
  opacity: 0;
}

.nav-link--home {
  --nav-item: var(--nav-home);
}
.nav-link--species {
  --nav-item: var(--nav-species);
}
.nav-link--moves {
  --nav-item: var(--nav-moves);
}
.nav-link--abilities {
  --nav-item: var(--nav-abilities);
}
.nav-link--items {
  --nav-item: var(--nav-items);
}
.nav-link--calc {
  --nav-item: var(--nav-calc);
}
.nav-link--team {
  --nav-item: var(--nav-team);
}
.nav-link--compare {
  --nav-item: var(--nav-compare);
}

.nav-link:not(.active) {
  color: color-mix(in srgb, var(--nav-item) 48%, var(--muted));
}

.nav-link:hover {
  text-decoration: none;
  color: color-mix(in srgb, var(--nav-item) 78%, var(--text));
  background: color-mix(in srgb, var(--nav-item) 11%, var(--nav-hover-bg));
  border-color: color-mix(in srgb, var(--nav-item) 22%, transparent);
}

.nav-link.active {
  z-index: 1;
  color: var(--nav-active-text);
  background: color-mix(in srgb, var(--nav-item) 34%, var(--nav-active-bg));
  border-color: color-mix(in srgb, var(--nav-item) 58%, var(--border));
  box-shadow:
    0 1px 4px var(--shadow-md),
    inset 0 1px 0 color-mix(in srgb, var(--nav-item) 28%, transparent);
}

html[data-theme="light"] .nav-links {
  background: color-mix(in srgb, var(--panel2) 55%, var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html[data-theme="light"] .nav-link:not(.active) {
  color: color-mix(in srgb, var(--nav-item) 72%, var(--muted));
}

html[data-theme="light"] .nav-link:hover {
  color: color-mix(in srgb, var(--nav-item) 92%, var(--text));
  background: color-mix(in srgb, var(--nav-item) 12%, var(--panel));
}

html[data-theme="light"] .nav-link.active {
  color: color-mix(in srgb, var(--nav-item) 88%, var(--text));
  background: color-mix(in srgb, var(--nav-item) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--nav-item) 42%, var(--border));
  box-shadow: 0 1px 3px var(--shadow-md);
}

/* --- Catalog spreadsheet lists (Pokémon, moves, items, abilities) --- */
.catalog-list-main {
  max-width: var(--content-max-width);
  margin-inline: auto;
  margin-block: 0;
  padding: 0 var(--page-gutter) 2.5rem;
}

.catalog-sticky-panel {
  position: sticky;
  /* Scrollport is `.app-main` (below site header); stick flush to top of that pane */
  top: 0;
  z-index: 15;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem var(--page-gutter) 0.65rem;
  margin-inline: calc(-1 * var(--page-gutter));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 16px var(--shadow-md);
}

.species-hero-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

.species-hero-inline h1 {
  margin: 0;
  font-size: 1.65rem;
}

.species-hero-count {
  margin: 0;
  font-size: 0.95rem;
  white-space: nowrap;
}

.species-sheet-grid {
  display: grid;
  grid-template-columns: minmax(2.75rem, 3rem) minmax(200px, 2.4fr) minmax(44px, max-content) repeat(7, minmax(44px, 0.75fr));
  gap: 0.35rem 0.5rem;
  align-items: center;
}

/* Pokémon list: capped name column · stats share remaining width · select */
.species-sheet-grid--with-compare {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns:
    minmax(11rem, min(20rem, 34vw))
    repeat(7, minmax(2.35rem, 1fr))
    36px;
}

.catalog-list-main .species-col-headers.species-sheet-grid--with-compare .species-name-head {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

/* Data rows: stats + checkbox sit on the bottom line (beside dex / types) */
.catalog-list-main div.species-row.species-sheet-grid--with-compare {
  align-items: end;
}

.catalog-list-main div.species-row.species-sheet-grid--with-compare .species-row-name {
  align-self: stretch;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
}

.catalog-list-main div.species-row.species-sheet-grid--with-compare .species-name-stack--with-types {
  flex: 1;
  justify-content: space-between;
  align-self: stretch;
  min-height: 100%;
}

.catalog-list-main div.species-row.species-sheet-grid--with-compare .species-stat,
.catalog-list-main div.species-row.species-sheet-grid--with-compare .species-cmp-wrap {
  align-self: end;
}

.species-name-stack--with-types {
  align-items: stretch;
  width: 100%;
}

.catalog-list-main .species-sheet-grid--with-compare .species-stat,
.catalog-list-main
  .species-col-headers.species-sheet-grid--with-compare
  .catalog-sort-btn[class*="species-stat-head--"] {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  text-align: center;
  width: 100%;
  max-width: 2.75rem;
  margin-inline: auto;
  padding-inline: 0.15rem;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--panel2) 50%, transparent);
  border-radius: 0;
}

.catalog-list-main
  .species-col-headers.species-sheet-grid--with-compare
  .catalog-sort-btn[class*="species-stat-head--"] {
  padding: 0.3rem 0.15rem;
}

.catalog-list-main .species-sheet-grid--with-compare .species-stat--hp,
.catalog-list-main
  .species-col-headers.species-sheet-grid--with-compare
  .catalog-sort-btn.species-stat-head--hp {
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}

.catalog-list-main .species-sheet-grid--with-compare .species-stat--bst,
.catalog-list-main
  .species-col-headers.species-sheet-grid--with-compare
  .catalog-sort-btn.species-stat-head--bst {
  padding-right: 0.15rem;
}

.species-name-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
}

.species-row-dex-num {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.species-row-name .species-name-stack--with-types {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.species-name-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.species-row-types--inline {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  min-width: 0;
}

.species-row-types--inline .type-icon {
  width: 20px;
  height: 20px;
}

.species-name-head {
  display: flex;
  justify-content: flex-start;
  justify-self: start;
  min-width: 0;
}

.species-name-head-sort {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
}

.species-name-head-sort .catalog-sort-btn {
  width: auto;
  padding-inline: 0.35rem 0.45rem;
  text-align: left;
}
.species-row-types {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  justify-content: flex-start;
  justify-self: start;
  min-width: 0;
}
.species-col-headers .catalog-sort-btn[data-sort-col="type"] {
  text-align: left;
  padding-inline: 0.35rem 0.45rem;
  width: auto;
  justify-self: start;
  max-width: 100%;
}
.species-cmp-head {
  font-size: 0.85rem;
  text-align: center;
  color: var(--muted);
  user-select: none;
}
.species-cmp-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.species-cmp-wrap input {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
/* Rows live here; vertical scroll is the parent `.app-main` (no nested list scrollbar). */
.catalog-sheet-scroll {
  margin-top: 0.15rem;
}

.catalog-sheet-scroll .species-sheet-grid,
.catalog-sheet-scroll .moves-sheet-grid,
.catalog-sheet-scroll .items-sheet-grid,
.catalog-sheet-scroll .abilities-sheet-grid {
  min-width: 720px;
}
.catalog-sheet-scroll .species-sheet-grid--with-compare {
  min-width: 0;
  width: 100%;
}

/* Moves / items / abilities: header + rows share width on narrow screens (avoid 720px row vs narrow header). */
@media (max-width: 900px) {
  .catalog-list-main .moves-col-headers.moves-sheet-grid,
  .catalog-list-main .moves-row.moves-sheet-grid,
  .catalog-sheet-scroll .moves-sheet-grid {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns:
      minmax(4.5rem, 1.2fr)
      2.35rem
      minmax(4.25rem, 1.05fr)
      minmax(1.45rem, 2rem)
      minmax(1.45rem, 2rem)
      minmax(1.45rem, 2rem);
    gap: 0.28rem 0.3rem;
  }

  .catalog-list-main .moves-col-headers {
    padding-inline: 0.25rem;
  }

  .catalog-list-main .moves-row > span:nth-child(3) {
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.2;
    word-break: break-word;
  }

  .catalog-list-main .items-col-headers.items-sheet-grid,
  .catalog-list-main .items-row.items-sheet-grid,
  .catalog-sheet-scroll .items-sheet-grid {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns:
      2.35rem
      minmax(4.5rem, 1fr)
      minmax(3.25rem, 0.8fr)
      minmax(0, 1.35fr);
    gap: 0.28rem 0.35rem;
  }

  .catalog-list-main .items-col-headers {
    padding-inline: 0.25rem;
  }

  .catalog-list-main .abilities-col-headers.abilities-sheet-grid,
  .catalog-list-main .abilities-row.abilities-sheet-grid,
  .catalog-sheet-scroll .abilities-sheet-grid {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr);
    gap: 0.28rem 0.4rem;
  }

  .catalog-list-main .abilities-col-headers {
    padding-inline: 0.25rem;
  }

  .catalog-list-main .moves-row-type {
    justify-content: center;
    justify-self: center;
  }

  .catalog-list-main .moves-stat {
    text-align: center;
    justify-self: center;
    font-variant-numeric: tabular-nums;
  }

  .catalog-list-main .moves-col-headers .catalog-sort-btn[data-sort-col="power"],
  .catalog-list-main .moves-col-headers .catalog-sort-btn[data-sort-col="accuracy"],
  .catalog-list-main .moves-col-headers .catalog-sort-btn[data-sort-col="pp"] {
    text-align: center;
    justify-self: center;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-inline: 0.22rem;
    font-size: 0.72rem;
  }

  .catalog-list-main .moves-col-headers .catalog-sort-btn[data-sort-col="category"] {
    width: 100%;
    max-width: 100%;
    padding-inline: 0.3rem;
    font-size: 0.76rem;
  }
}

@media (min-width: 901px) {
  .catalog-list-main .species-col-headers.species-sheet-grid--with-compare,
  .catalog-sheet-scroll .species-sheet-grid--with-compare {
    width: 100%;
  }

  /* Fill each stat track; name column stays capped (no 1fr on name) */
  .catalog-list-main .species-sheet-grid--with-compare .species-stat,
  .catalog-list-main
    .species-col-headers.species-sheet-grid--with-compare
    > .catalog-sort-btn[class*="species-stat-head--"] {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    justify-self: stretch;
    justify-content: center;
  }
}

/* Narrow viewports: half the desktop gutter; catalog + detail share --page-gutter */
@media (max-width: 900px) {
  :root {
    --page-gutter: 0.5rem;
  }

  .main-column {
    width: 100%;
    max-width: 100%;
  }

  .app-main {
    padding-inline: 0;
  }

  main {
    max-width: none;
    padding-block: 0.65rem 1.25rem;
  }

  /* Bleed section cards to main edges — one gutter layer, not main + card padding stacked. */
  .app-main > main > .section,
  .app-main > main > .species-detail-extras.section {
    margin-inline: calc(-1 * var(--page-gutter));
    padding: 0.65rem var(--page-gutter);
  }

  .section {
    padding: 0.65rem var(--page-gutter);
  }

  .home-main {
    max-width: none;
    padding-bottom: 1.25rem;
  }

  .catalog-list-main {
    max-width: none;
    width: 100%;
    padding-bottom: 1rem;
  }

  main.compare-hub-main {
    padding-block: 0;
  }

  .compare-filter-panel {
    padding-inline: var(--page-gutter);
  }

  .stat-build-card {
    padding-inline: var(--page-gutter);
  }

  .detail-action-btn {
    padding-inline: 0.5rem;
  }

  .data-table th,
  .data-table td {
    padding-inline: 0.28rem;
  }

  /* Symmetric stat column padding (was extra left on HP only). */
  .catalog-list-main
    .species-sheet-grid--with-compare
    .catalog-sort-btn.species-stat-head--hp,
  .catalog-list-main .species-sheet-grid--with-compare .species-stat--hp {
    padding-inline: 0.1rem;
    border-left: none;
  }

  .catalog-list-main .type-chips {
    gap: 0.3rem;
  }

  .catalog-list-main .type-chips .chip {
    padding: 0.28rem;
    border-radius: 50%;
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .catalog-list-main .type-chips .chip-inner {
    gap: 0;
  }

  .catalog-list-main .type-chips .chip-inner > span:last-child {
    display: none;
  }

  .catalog-list-main .type-chips .chip-type-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .catalog-list-main .species-sheet-grid--with-compare,
  .catalog-list-main .species-col-headers.species-sheet-grid--with-compare {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    align-items: center;
    grid-template-columns:
      minmax(4.25rem, min(7rem, 32vw))
      repeat(7, minmax(1.35rem, 1fr))
      1.85rem;
    gap: 0.16rem 0.18rem;
  }

  .catalog-list-main .species-name-head-sort {
    flex-wrap: nowrap;
    gap: 0.12rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .catalog-list-main .species-name-head-sort::-webkit-scrollbar {
    display: none;
  }

  .catalog-list-main .species-name-head-sort .catalog-sort-btn {
    font-size: 0.62rem;
    padding: 0.22rem 0.28rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .catalog-list-main .species-col-headers .catalog-sort-btn[class*="species-stat-head--"] {
    font-size: 0.62rem;
    padding: 0.22rem 0.12rem;
    white-space: nowrap;
  }

  .catalog-sheet-scroll .species-sheet-grid--with-compare {
    min-width: 0;
    overflow-x: visible;
  }

  .catalog-list-main .species-sheet-grid--with-compare .species-stat,
  .catalog-list-main
    .species-col-headers.species-sheet-grid--with-compare
    > .catalog-sort-btn[class*="species-stat-head--"] {
    font-size: 0.72rem;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    justify-self: stretch;
    padding-inline: 0.1rem;
    justify-content: center;
    text-align: center;
  }

  .catalog-list-main .species-row-thumb,
  .catalog-list-main .species-row-thumb--empty {
    width: 36px;
    height: 36px;
  }

  .catalog-list-main .species-row-types--inline .type-icon {
    width: 18px;
    height: 18px;
  }

  .catalog-list-main .species-row-dex-num {
    font-size: 0.7rem;
  }

  .catalog-list-main a.species-row-title {
    font-size: 0.82rem;
  }
}

/* Fixed type track: each row is its own grid — max-content per row misaligns stat columns. */
.species-sheet-grid--learners-move {
  grid-template-columns:
    minmax(11rem, 14rem)
    4.75rem
    repeat(7, minmax(42px, 0.7fr))
    minmax(40px, 0.45fr);
}

/* Ability learners + team builder picker: same roster columns as main list (no checkbox). */
.species-sheet-grid--learners-ability,
.species-sheet-grid--tb-picker {
  grid-template-columns:
    minmax(11rem, 14rem)
    4.75rem
    repeat(7, minmax(42px, 0.7fr));
}

/* Type cell + stat block: move/ability learners, team builder roster (main list uses inline types). */
:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .species-row-types {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  justify-content: flex-start;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-inline: 0.35rem;
}

.species-row-types .types {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.2rem;
  vertical-align: middle;
}

:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .species-col-headers
  .catalog-sort-btn[data-sort-col="type"],
:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .species-col-headers
  .catalog-sort-btn[data-learner-sort-col="type"],
:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .species-col-headers
  .catalog-sort-btn[data-tb-sort-col="type"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding-inline: 0.35rem;
  justify-self: stretch;
}

:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .species-stat,
:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .catalog-sort-btn[class*="species-stat-head--"] {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.45rem;
  background: color-mix(in srgb, var(--panel2) 50%, transparent);
  border-radius: 0;
}

:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .species-stat--hp,
:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .catalog-sort-btn.species-stat-head--hp {
  border-left: 1px solid color-mix(in srgb, var(--border) 65%, var(--page-accent) 40%);
  padding-left: 0.65rem;
}

:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .species-stat--bst,
:is(
    .species-sheet-grid--learners-move,
    .species-sheet-grid--learners-ability,
    .species-sheet-grid--tb-picker
  )
  .catalog-sort-btn.species-stat-head--bst {
  padding-right: 0.55rem;
  border-right: 1px solid color-mix(in srgb, var(--border) 65%, var(--page-accent) 40%);
}

.species-col-headers.species-sheet-grid--learners-move .catalog-sort-btn[class*="species-stat-head--"],
.species-col-headers.species-sheet-grid--learners-ability .catalog-sort-btn[class*="species-stat-head--"],
.species-col-headers.species-sheet-grid--tb-picker .catalog-sort-btn[class*="species-stat-head--"] {
  width: 100%;
  justify-self: stretch;
}

.species-sheet-grid--learners-move .species-stat,
.species-sheet-grid--learners-ability .species-stat,
.species-sheet-grid--tb-picker .species-stat {
  justify-self: stretch;
}

.catalog-sheet-scroll .species-sheet-grid--learners-move,
.catalog-sheet-scroll .species-sheet-grid--learners-ability,
.catalog-sheet-scroll .species-sheet-grid--tb-picker,
.tb-picker-scroll .species-sheet-grid--tb-picker {
  min-width: 720px;
}

.learners-sheet-section {
  margin-top: 1.25rem;
}

.learners-sheet-section h2 {
  margin-bottom: 0.35rem;
}

.learners-sheet-scroll {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.learners-sheet-empty {
  padding: 1rem 0;
}

.species-learner-extra,
.species-learner-extra-head {
  font-size: 0.86rem;
  text-align: left;
  justify-self: start;
  min-width: 0;
}

.species-learner-extra-head {
  color: var(--muted);
  font-weight: 600;
}

.species-col-headers.species-sheet-grid--learners-move .catalog-sort-btn,
.species-col-headers.species-sheet-grid--learners-ability .catalog-sort-btn {
  width: 100%;
}

.moves-sheet-grid {
  display: grid;
  grid-template-columns:
    minmax(160px, 2.2fr)
    72px
    minmax(108px, 1.25fr)
    minmax(2.5rem, 2.85rem)
    minmax(2.5rem, 2.85rem)
    minmax(2.35rem, 2.75rem);
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.moves-row-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.moves-col-headers .catalog-sort-btn[data-sort-col="power"],
.moves-col-headers .catalog-sort-btn[data-sort-col="accuracy"],
.moves-col-headers .catalog-sort-btn[data-sort-col="pp"] {
  width: auto;
  min-width: 0;
  max-width: 100%;
  justify-self: center;
  text-align: center;
  padding-inline: 0.3rem;
}

.items-sheet-grid {
  display: grid;
  grid-template-columns: 52px minmax(140px, 1.6fr) minmax(100px, 1fr) minmax(200px, 2fr);
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.abilities-sheet-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 2.2fr);
  gap: 0.35rem 0.5rem;
  align-items: start;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}
.category-chip {
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-weight: 600;
  max-width: 100%;
}
.category-chip:hover {
  color: var(--text);
  border-color: #3d4a63;
}
.category-chip-on {
  border-color: color-mix(in srgb, var(--page-accent) 72%, #ffffff 18%);
  color: var(--accent-chip-color);
  background: color-mix(in srgb, var(--page-accent) 14%, var(--panel2));
}

.species-sort-btn,
.catalog-sort-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  justify-self: start;
}
.species-sort-btn:hover,
.catalog-sort-btn:hover {
  color: var(--text);
  border-color: #3d4a63;
}
.species-sort-btn.active,
.catalog-sort-btn.active {
  color: var(--accent-chip-color);
  border-color: color-mix(in srgb, var(--page-accent) 72%, #ffffff 18%);
  background: color-mix(in srgb, var(--page-accent) 14%, var(--panel2));
}

.species-col-headers,
.moves-col-headers,
.items-col-headers,
.abilities-col-headers {
  margin-top: 0;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--table-header-bg);
  border-radius: 8px;
}

/* Catalog spreadsheets: left-align headers and cells (avoid mixed center/right columns). */
.catalog-list-main .species-sheet-grid,
.catalog-list-main .moves-sheet-grid,
.catalog-list-main .items-sheet-grid,
.catalog-list-main .abilities-sheet-grid,
.catalog-list-main .species-col-headers,
.catalog-list-main .moves-col-headers,
.catalog-list-main .items-col-headers,
.catalog-list-main .abilities-col-headers {
  justify-items: start;
  text-align: left;
}

.catalog-list-main .moves-row > span,
.catalog-list-main .items-row > span:not(.items-row-icon),
.catalog-list-main .abilities-row > span {
  text-align: left;
  justify-self: start;
}

.catalog-list-main .species-sheet-grid,
.catalog-list-main .moves-sheet-grid,
.catalog-list-main .items-sheet-grid,
.catalog-list-main .abilities-sheet-grid {
  align-items: start;
}

.catalog-list-main .species-col-headers > *,
.catalog-list-main .moves-col-headers > *,
.catalog-list-main .items-col-headers > *,
.catalog-list-main .abilities-col-headers > * {
  justify-self: start;
}

.catalog-list-main .species-sheet-grid--with-compare .species-stat,
.catalog-list-main
  .species-col-headers.species-sheet-grid--with-compare
  > .catalog-sort-btn[class*="species-stat-head--"] {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  text-align: center;
}

.catalog-list-main div.species-row.species-sheet-grid--with-compare .species-stat {
  align-self: end;
}

.catalog-list-main .catalog-sort-btn {
  width: max-content;
  max-width: 100%;
}

.catalog-list-main .species-cmp-wrap,
.catalog-list-main .species-cmp-head {
  justify-self: center;
}

.catalog-list-main div.species-row.species-sheet-grid--with-compare .species-cmp-wrap {
  align-self: end;
}

a.species-row,
div.species-row,
a.moves-row,
a.items-row,
a.abilities-row {
  text-decoration: none;
  color: inherit;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
a.species-row:hover,
div.species-row:hover,
a.moves-row:hover,
a.items-row:hover,
a.abilities-row:hover {
  background: var(--catalog-row-hover-bg);
  border-bottom-color: var(--catalog-row-hover-border);
}

html[data-theme="light"] a.species-row:hover,
html[data-theme="light"] div.species-row:hover,
html[data-theme="light"] a.moves-row:hover,
html[data-theme="light"] a.items-row:hover,
html[data-theme="light"] a.abilities-row:hover {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--page-accent) 70%, transparent);
}

.species-row-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.species-name-stack .species-row-title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-add-star-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: color-mix(in srgb, var(--page-accent) 55%, #f0d878);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s,
    transform 0.1s;
}
.team-add-star-btn:hover {
  border-color: color-mix(in srgb, var(--page-accent) 65%, #fff);
  background: color-mix(in srgb, var(--page-accent) 14%, var(--panel2));
  color: #ffe08a;
  transform: scale(1.06);
}
.team-add-star-btn:active {
  transform: scale(0.96);
}
.team-add-star__icon {
  width: 1rem;
  height: 1rem;
  display: block;
}
.team-add-btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.team-add-btn-detail .team-add-star__icon {
  width: 0.95rem;
  height: 0.95rem;
  color: color-mix(in srgb, var(--page-accent) 55%, #f0d878);
}
.species-row-title {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.species-row-title {
  text-decoration: none;
  color: inherit;
}
a.species-row:hover .species-row-title,
div.species-row:hover .species-row-title,
div.species-row:hover a.species-row-title,
a.moves-row:hover .moves-row-title,
a.items-row:hover .items-row-title,
a.abilities-row:hover .abilities-row-title {
  color: var(--catalog-row-hover-title);
}

/* Main-column links pick up the active section accent (row links stay inherit). */
.app-main a:not(.btn):not(.btn.secondary):not(.species-row):not(.species-row-title):not(.moves-row):not(.items-row):not(
    .abilities-row
  ):not(.dash-card):not(.card):not(.card-block):not(.mega-stone-link) {
  color: color-mix(in srgb, var(--page-accent) 50%, #b8c8e8);
}
.app-main a:not(.btn):not(.btn.secondary):not(.species-row):not(.species-row-title):not(.moves-row):not(.items-row):not(
    .abilities-row
  ):not(.dash-card):not(.card):not(.card-block):not(.mega-stone-link):hover {
  color: color-mix(in srgb, var(--page-accent) 72%, #ffffff);
}

/* Spreadsheet rows: primary name uses the same section accent as the nav (Pokémon-style). */
.catalog-list-main a.species-row-title,
.catalog-list-main a.moves-row .moves-row-title,
.catalog-list-main a.items-row .items-row-title,
.catalog-list-main a.abilities-row .abilities-row-title {
  color: color-mix(in srgb, var(--page-accent) 62%, #e8eaef);
}
.catalog-list-main a.species-row-title:hover,
.catalog-list-main a.moves-row:hover .moves-row-title,
.catalog-list-main a.items-row:hover .items-row-title,
.catalog-list-main a.abilities-row:hover .abilities-row-title {
  color: var(--catalog-row-hover-title);
}

html[data-theme="light"] .catalog-list-main a.species-row-title,
html[data-theme="light"] .catalog-list-main a.moves-row .moves-row-title,
html[data-theme="light"] .catalog-list-main a.items-row .items-row-title,
html[data-theme="light"] .catalog-list-main a.abilities-row .abilities-row-title {
  color: color-mix(in srgb, var(--page-accent) 82%, var(--text));
}

html[data-theme="light"] .species-sort-btn:hover,
html[data-theme="light"] .catalog-sort-btn:hover,
html[data-theme="light"] .category-chip:hover,
html[data-theme="light"] .chip:hover {
  border-color: color-mix(in srgb, var(--page-accent) 35%, var(--border));
}

html[data-theme="light"] .species-name-head .catalog-sort-btn,
html[data-theme="light"] .species-col-headers .catalog-sort-btn:not([class*="species-stat-head--"]),
html[data-theme="light"] .moves-col-headers .catalog-sort-btn,
html[data-theme="light"] .items-col-headers .catalog-sort-btn,
html[data-theme="light"] .abilities-col-headers .catalog-sort-btn {
  color: color-mix(in srgb, var(--page-accent) 88%, var(--text));
}

html[data-theme="light"] .species-name-head .catalog-sort-btn.active,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.active:not([class*="species-stat-head--"]),
html[data-theme="light"] .moves-col-headers .catalog-sort-btn.active,
html[data-theme="light"] .items-col-headers .catalog-sort-btn.active,
html[data-theme="light"] .abilities-col-headers .catalog-sort-btn.active {
  color: var(--accent-chip-color);
  font-weight: 700;
}

html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--hp,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--hp:hover,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--hp.active {
  color: var(--stat-color-hp);
}
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--atk,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--atk:hover,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--atk.active {
  color: var(--stat-color-atk);
}
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--def,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--def:hover,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--def.active {
  color: var(--stat-color-def);
}
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spatk,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spatk:hover,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spatk.active {
  color: var(--stat-color-spatk);
}
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spdef,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spdef:hover,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spdef.active {
  color: var(--stat-color-spdef);
}
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spe,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spe:hover,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--spe.active {
  color: var(--stat-color-spe);
}
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--bst,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--bst:hover,
html[data-theme="light"] .species-col-headers .catalog-sort-btn.species-stat-head--bst.active {
  color: var(--stat-color-bst);
}

.catalog-list-main .species-hero-inline h1 {
  color: color-mix(in srgb, var(--page-accent) 40%, var(--text));
}

.app-main main > .hero h1 {
  color: color-mix(in srgb, var(--page-accent) 38%, var(--text));
}

.species-row-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--sprite-plate-bg);
  border: 1px solid var(--border);
}
.species-row-thumb--empty {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px dashed var(--border);
}

.species-row-types .type-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.species-stat,
.moves-stat {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
  justify-self: start;
  color: var(--muted);
}

.species-stat--hp {
  color: var(--stat-color-hp);
}
.species-stat--atk {
  color: var(--stat-color-atk);
}
.species-stat--def {
  color: var(--stat-color-def);
}
.species-stat--spatk {
  color: var(--stat-color-spatk);
}
.species-stat--spdef {
  color: var(--stat-color-spdef);
}
.species-stat--spe {
  color: var(--stat-color-spe);
}
.species-stat--bst {
  color: var(--stat-color-bst);
  font-weight: 600;
}

.species-col-headers .catalog-sort-btn.species-stat-head--hp {
  color: var(--stat-color-hp-head);
}
.species-col-headers .catalog-sort-btn.species-stat-head--atk {
  color: var(--stat-color-atk-head);
}
.species-col-headers .catalog-sort-btn.species-stat-head--def {
  color: var(--stat-color-def-head);
}
.species-col-headers .catalog-sort-btn.species-stat-head--spatk {
  color: var(--stat-color-spatk-head);
}
.species-col-headers .catalog-sort-btn.species-stat-head--spdef {
  color: var(--stat-color-spdef-head);
}
.species-col-headers .catalog-sort-btn.species-stat-head--spe {
  color: var(--stat-color-spe-head);
}
.species-col-headers .catalog-sort-btn.species-stat-head--bst {
  color: var(--stat-color-bst-head);
}

.species-col-headers .catalog-sort-btn.species-stat-head--hp:hover {
  color: var(--stat-color-hp);
}
.species-col-headers .catalog-sort-btn.species-stat-head--atk:hover {
  color: var(--stat-color-atk);
}
.species-col-headers .catalog-sort-btn.species-stat-head--def:hover {
  color: var(--stat-color-def);
}
.species-col-headers .catalog-sort-btn.species-stat-head--spatk:hover {
  color: var(--stat-color-spatk);
}
.species-col-headers .catalog-sort-btn.species-stat-head--spdef:hover {
  color: var(--stat-color-spdef);
}
.species-col-headers .catalog-sort-btn.species-stat-head--spe:hover {
  color: var(--stat-color-spe);
}
.species-col-headers .catalog-sort-btn.species-stat-head--bst:hover {
  color: var(--stat-color-bst);
}

.species-col-headers .catalog-sort-btn.species-stat-head--hp.active {
  color: var(--stat-color-hp-head);
  border-color: color-mix(in srgb, var(--stat-color-hp) 55%, var(--page-accent) 25%);
  background: color-mix(in srgb, var(--stat-color-hp) 14%, var(--panel2));
}
.species-col-headers .catalog-sort-btn.species-stat-head--atk.active {
  color: var(--stat-color-atk-head);
  border-color: color-mix(in srgb, var(--stat-color-atk) 55%, var(--page-accent) 25%);
  background: color-mix(in srgb, var(--stat-color-atk) 14%, var(--panel2));
}
.species-col-headers .catalog-sort-btn.species-stat-head--def.active {
  color: var(--stat-color-def-head);
  border-color: color-mix(in srgb, var(--stat-color-def) 55%, var(--page-accent) 25%);
  background: color-mix(in srgb, var(--stat-color-def) 14%, var(--panel2));
}
.species-col-headers .catalog-sort-btn.species-stat-head--spatk.active {
  color: var(--stat-color-spatk-head);
  border-color: color-mix(in srgb, var(--stat-color-spatk) 55%, var(--page-accent) 25%);
  background: color-mix(in srgb, var(--stat-color-spatk) 14%, var(--panel2));
}
.species-col-headers .catalog-sort-btn.species-stat-head--spdef.active {
  color: var(--stat-color-spdef-head);
  border-color: color-mix(in srgb, var(--stat-color-spdef) 55%, var(--page-accent) 25%);
  background: color-mix(in srgb, var(--stat-color-spdef) 14%, var(--panel2));
}
.species-col-headers .catalog-sort-btn.species-stat-head--spe.active {
  color: var(--stat-color-spe-head);
  border-color: color-mix(in srgb, var(--stat-color-spe) 55%, var(--page-accent) 25%);
  background: color-mix(in srgb, var(--stat-color-spe) 14%, var(--panel2));
}
.species-col-headers .catalog-sort-btn.species-stat-head--bst.active {
  color: var(--stat-color-bst-head);
  border-color: color-mix(in srgb, var(--stat-color-bst) 40%, var(--page-accent) 35%);
  background: color-mix(in srgb, var(--stat-color-bst) 10%, var(--panel2));
}

.moves-row-title,
.items-row-title,
.abilities-row-title {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.items-row-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--sprite-plate-bg);
  border: 1px solid var(--border);
}

.items-desc,
.abilities-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.brand {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-right: 0.5rem;
}

.topnav-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--page-accent) 45%, var(--border));
  background: var(--btn-secondary-hover);
  color: var(--page-accent);
}

.theme-toggle-icon {
  display: block;
}

html[data-theme="dark"] .theme-toggle-icon--light {
  display: block;
}
html[data-theme="dark"] .theme-toggle-icon--dark {
  display: none;
}
html[data-theme="light"] .theme-toggle-icon--light {
  display: none;
}
html[data-theme="light"] .theme-toggle-icon--dark {
  display: block;
}

.topnav-search {
  width: min(300px, 38vw);
  flex-shrink: 1;
}

.topnav-search .search-suggest-wrap {
  width: 100%;
}

.topnav-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
}

.topnav-search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--page-accent) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.topnav-search-input::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

@media (max-width: 900px) {
  .topnav {
    padding: 0.4rem var(--page-gutter);
    gap: 0.35rem;
    align-items: flex-start;
  }

  .topnav-primary {
    flex: 1 1 100%;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
  }

  .brand-rotom-label {
    display: none;
  }

  .brand-rotom {
    flex: 0 0 auto;
    gap: 0;
  }

  /* Fixed square — matches ~2-row nav card height (no %/stretch sizing). */
  .brand-rotom-icon {
    width: 3.15rem;
    height: 3.15rem;
    max-width: none;
    max-height: none;
    border-radius: 10px;
  }

  .topnav-primary .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0.2rem;
    border-radius: 10px;
    gap: 0.1rem;
  }

  .topnav-primary .nav-link + .nav-link::before {
    display: none;
  }

  .topnav-primary .nav-link {
    flex: 1 1 calc(25% - 0.1rem);
    max-width: calc(25% - 0.1rem);
    justify-content: center;
    padding: 0.32rem 0.25rem;
    font-size: 0.76rem;
    gap: 0.25rem;
    box-sizing: border-box;
  }

  .topnav-primary .nav-link-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .topnav-primary .nav-link-icon .category-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
  }

  .topnav-end {
    width: 100%;
    margin-left: 0;
    gap: 0.4rem;
  }

  .topnav-search {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

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

.toolbar label {
  font-size: 0.8rem;
  color: var(--muted);
}

.toolbar input,
.toolbar select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}

main {
  flex: 1;
  padding: 1rem var(--page-gutter) 2rem;
  max-width: var(--content-max-width);
  width: 100%;
  margin-inline: auto;
  margin-block: 0;
}

/* Layout mains: no vertical padding; horizontal uses same gutter as catalog. */
main.catalog-list-main,
main.home-main,
main.compare-hub-main {
  padding-block: 0;
  padding-inline: var(--page-gutter);
  max-width: none;
}

.hero {
  margin-bottom: 1.25rem;
}

.hero h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.15s, transform 0.12s;
}
.card:hover {
  border-color: #3d4a63;
  transform: translateY(-1px);
}

a.card.card-block {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card .title,
a.card.card-block .title {
  font-weight: 700;
  color: var(--text);
}
a.card.card-block:hover .title {
  color: #fff;
}

.sprite {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--sprite-plate-bg);
  border-radius: 10px;
}

.types {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.type-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.stats-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.stats-mini span {
  background: var(--panel2);
  border-radius: 6px;
  padding: 0.15rem 0.25rem;
  text-align: center;
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  grid-template-areas:
    "aside main"
    "actions actions";
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}

.detail-head-left {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.detail-head-right {
  grid-area: main;
  min-width: 0;
}

.detail-head-actions-bar {
  grid-area: actions;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.detail-head-aside-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  max-width: 220px;
}

.detail-head-stats {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.detail-head-reg {
  font-size: 0.86rem;
  line-height: 1.4;
  max-width: 220px;
}

.detail-head-nature {
  width: 100%;
  max-width: none;
  margin-top: 0.65rem;
}

.detail-head-nature .calc-field--nature {
  margin: 0;
  width: 100%;
  max-width: none;
}

.detail-head-nature .calc-field--nature span {
  font-size: 0.82rem;
}

.detail-head-nature .calc-select {
  width: 100%;
}

.detail-head-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.detail-head-actions .btn {
  width: auto;
  flex: 0 0 auto;
  justify-content: center;
}

.detail-head-actions .btn {
  margin: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.detail-action-btn {
  gap: 0.38rem;
  padding-inline: 0.55rem 0.65rem;
}

.detail-action-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  color: var(--detail-action-item, var(--muted));
}

.detail-action-btn__icon .category-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.detail-action-btn__label {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
}

.detail-action-btn--calc {
  --detail-action-item: var(--nav-calc);
}
.detail-action-btn--team {
  --detail-action-item: var(--nav-team);
}
.detail-action-btn--compare {
  --detail-action-item: var(--nav-species);
}
.detail-action-btn--reset {
  --detail-action-item: var(--nav-moves);
}

.detail-action-btn:hover .detail-action-btn__icon {
  color: color-mix(in srgb, var(--detail-action-item) 88%, var(--text));
}

.mega-stone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.mega-stone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(232, 93, 44, 0.45);
  background: rgba(232, 93, 44, 0.1);
  line-height: 0;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.mega-stone-link:hover {
  border-color: var(--rotom-cyan);
  box-shadow: 0 0 0 2px rgba(110, 231, 240, 0.25);
  transform: translateY(-1px);
  text-decoration: none;
}
.mega-stone-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}
.mega-stone-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--rotom-orange);
}


.detail-head-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.65rem;
}

.detail-head-title-block {
  min-width: 0;
  flex: 1 1 12rem;
}

.detail-head-title-block .detail-title {
  margin: 0 0 0.35rem;
}

.detail-head-phys {
  flex: 0 1 auto;
  max-width: none;
  grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}

.detail-head-phys .phys-card {
  min-width: 6.5rem;
}

.detail-head-phys .phys-card-head {
  padding: 0.3rem 0.45rem;
  font-size: 0.75rem;
}

.detail-head-phys .phys-card-body {
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.detail-head-phys .gender-ratio-caption {
  font-size: 0.72rem;
}

.species-detail-extras {
  margin-bottom: 1.25rem;
}

.species-detail-extras-note {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
}

.phys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.65rem;
  max-width: 42rem;
}

.phys-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel2);
}

.phys-card-head {
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  background: color-mix(in srgb, var(--panel2) 55%, var(--border));
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.phys-card-body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.88rem;
  background: color-mix(in srgb, var(--panel) 88%, #fff 4%);
}

.phys-card-body--center {
  justify-content: center;
}

.phys-val-imperial {
  font-weight: 600;
  color: var(--text);
}

.phys-val-metric {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.gender-ratio-bar {
  display: flex;
  width: 100%;
  height: 0.65rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000 20%);
  margin-bottom: 0.45rem;
}

.gender-ratio-seg--male {
  background: #4a90d9;
}

.gender-ratio-seg--female {
  background: #e87898;
}

.gender-ratio-caption {
  margin: 0;
  font-size: 0.82rem;
  text-align: center;
}

.gender-male {
  color: #7eb8f0;
}

.gender-female {
  color: #f0a0b8;
}

.type-def-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel2);
}

.type-def-row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 11.5rem) 1fr;
  gap: 0.5rem 0.75rem;
  align-items: start;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

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

.type-def-row-label {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text);
  padding-top: 0.15rem;
}

.type-def-row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.type-def-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.45rem 0.2rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 75%, var(--page-accent) 8%);
  font-size: 0.8rem;
  line-height: 1.2;
}

.type-def-pill-main {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.type-def-pill-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.type-def-pill-mult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}

.type-def-none {
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 720px) {
  .type-def-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .detail-head {
    grid-template-columns: minmax(6.75rem, 34vw) 1fr;
    grid-template-areas:
      "art title"
      "meta title"
      "actions actions"
      "stats stats"
      "nature nature";
    gap: 0.55rem 0.85rem;
    align-items: start;
  }

  .detail-head-left,
  .detail-head-right {
    display: contents;
  }

  .detail-head-left > .species-art-card,
  .detail-head-left > .species-art-card--empty {
    grid-area: art;
    width: 100%;
    max-width: none;
    align-self: start;
  }

  .detail-head-left > .species-art-card .detail-sprite,
  .detail-head-left > .species-art-card .species-art-img.detail-sprite {
    max-width: none;
  }

  .detail-head-aside-meta {
    grid-area: meta;
    max-width: none;
    width: auto;
    align-self: end;
  }

  .detail-head-reg {
    max-width: none;
  }

  .detail-head-nature {
    grid-area: nature;
    max-width: none;
    margin-top: 0;
  }

  .detail-head-nature .calc-field--nature {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .detail-head-actions-bar {
    grid-area: actions;
  }

  .detail-head-actions {
    flex-flow: row nowrap;
    gap: 0.4rem;
  }

  .detail-head-title-row {
    grid-area: title;
    margin-bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .detail-head-right > .detail-head-stats {
    grid-area: stats;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .detail-head-right > .detail-head-nature {
    grid-area: nature;
  }

  .detail-head-title-block {
    flex: none;
  }

  .detail-head-title-block .detail-title {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .detail-head-phys {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .detail-head-phys .phys-card {
    min-width: 0;
    width: 100%;
  }

  .detail-head-phys .phys-card-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
  }

  .detail-head-phys .phys-card-body--center {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-head-stats {
    grid-area: stats;
  }
}

.species-art-card {
  position: relative;
  width: 100%;
  max-width: 220px;
  align-self: flex-start;
}

.species-art-card--empty .detail-sprite {
  min-height: 120px;
}

.species-art-card .detail-sprite,
.species-art-card .species-art-img.detail-sprite {
  display: block;
  width: 100%;
  max-width: 220px;
}

.detail-sprite {
  width: 100%;
  max-width: 220px;
  object-fit: contain;
  background: var(--sprite-plate-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 0.5rem;
}

.species-shiny-toggle {
  --shiny-toggle-bg: linear-gradient(145deg, #3d3520 0%, #1a1824 70%);
  --shiny-toggle-bg-on: linear-gradient(145deg, #5c4a12 0%, #2a2240 75%);
  --shiny-toggle-border: color-mix(in srgb, #f5d76e 55%, var(--border));
  --shiny-toggle-border-hover: #ffe566;
  --shiny-toggle-border-on: #fff0a0;
  --shiny-toggle-fg: #ffe566;
  --shiny-toggle-fg-on: #fff8c8;
  --shiny-toggle-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shiny-toggle-shadow-hover: 0 0 12px color-mix(in srgb, #ffe566 35%, transparent);
  --shiny-toggle-shadow-on: 0 0 14px color-mix(in srgb, #ffe566 45%, transparent);
  --shiny-toggle-icon-glow: drop-shadow(0 0 2px rgba(255, 230, 120, 0.55));
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: 1px solid var(--shiny-toggle-border);
  border-radius: 999px;
  background: var(--shiny-toggle-bg);
  color: var(--shiny-toggle-fg);
  cursor: pointer;
  box-shadow: var(--shiny-toggle-shadow);
  transition:
    transform 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.species-shiny-toggle:hover {
  transform: scale(1.06);
  border-color: var(--shiny-toggle-border-hover);
  box-shadow: var(--shiny-toggle-shadow-hover);
}

.species-shiny-toggle--on {
  background: var(--shiny-toggle-bg-on);
  border-color: var(--shiny-toggle-border-on);
  color: var(--shiny-toggle-fg-on);
  box-shadow: var(--shiny-toggle-shadow-on);
}

html[data-theme="light"] .species-shiny-toggle {
  --shiny-toggle-bg: linear-gradient(145deg, #fffdf5 0%, #f3ead0 100%);
  --shiny-toggle-bg-on: linear-gradient(145deg, #fff0b8 0%, #e8d070 100%);
  --shiny-toggle-border: color-mix(in srgb, #c9a227 42%, var(--border));
  --shiny-toggle-border-hover: #c9a227;
  --shiny-toggle-border-on: #a67c00;
  --shiny-toggle-fg: #b8860b;
  --shiny-toggle-fg-on: #7a5a00;
  --shiny-toggle-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
  --shiny-toggle-shadow-hover: 0 0 8px color-mix(in srgb, #e8c547 40%, transparent);
  --shiny-toggle-shadow-on: 0 0 10px color-mix(in srgb, #d4a017 35%, transparent);
  --shiny-toggle-icon-glow: drop-shadow(0 0 1px rgba(180, 130, 20, 0.35));
}

.species-shiny-toggle--unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.species-shiny-toggle__icon {
  display: block;
  width: 11px;
  height: 11px;
  filter: var(--shiny-toggle-icon-glow);
}

.compare-col .species-art-card {
  max-width: 180px;
  margin-bottom: 0.35rem;
}

.detail-title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--page-accent) 36%, var(--text));
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.detail-dex-num {
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-left: 0.15rem;
}

.stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
.stat-table th,
.stat-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.35rem;
  text-align: left;
}
.stat-table th {
  color: var(--muted);
  font-weight: 600;
  width: 120px;
}

/* Base stats: subtle per-stat tint bars (0–250 = full track width). */
.stat-table td.stat-val {
  vertical-align: middle;
  min-width: 6.5rem;
}
.stat-val__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  width: 100%;
}
.stat-val__num {
  display: block;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.stat-val--total .stat-val__num {
  padding-bottom: 0;
}
.stat-val__track {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: var(--bar-track-bg);
  overflow: hidden;
}
.stat-val__fill {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: 1px;
  opacity: 0.88;
}
.stat-val__fill--hp {
  background: var(--stat-color-hp);
}
.stat-val__fill--atk {
  background: var(--stat-color-atk);
}
.stat-val__fill--def {
  background: var(--stat-color-def);
}
.stat-val__fill--spatk {
  background: var(--stat-color-spatk);
}
.stat-val__fill--spdef {
  background: var(--stat-color-spdef);
}
.stat-val__fill--spe {
  background: var(--stat-color-spe);
}

.stat-table tr:has(.stat-val__fill--hp) th {
  color: var(--stat-color-hp-head);
}
.stat-table tr:has(.stat-val__fill--hp) .stat-val__num {
  color: var(--stat-color-hp);
}
.stat-table tr:has(.stat-val__fill--atk) th {
  color: var(--stat-color-atk-head);
}
.stat-table tr:has(.stat-val__fill--atk) .stat-val__num {
  color: var(--stat-color-atk);
}
.stat-table tr:has(.stat-val__fill--def) th {
  color: var(--stat-color-def-head);
}
.stat-table tr:has(.stat-val__fill--def) .stat-val__num {
  color: var(--stat-color-def);
}
.stat-table tr:has(.stat-val__fill--spatk) th {
  color: var(--stat-color-spatk-head);
}
.stat-table tr:has(.stat-val__fill--spatk) .stat-val__num {
  color: var(--stat-color-spatk);
}
.stat-table tr:has(.stat-val__fill--spdef) th {
  color: var(--stat-color-spdef-head);
}
.stat-table tr:has(.stat-val__fill--spdef) .stat-val__num {
  color: var(--stat-color-spdef);
}
.stat-table tr:has(.stat-val__fill--spe) th {
  color: var(--stat-color-spe-head);
}
.stat-table tr:has(.stat-val__fill--spe) .stat-val__num {
  color: var(--stat-color-spe);
}
.stat-table tr:has(.stat-val--total) th {
  color: var(--muted);
}
.stat-table tr:has(.stat-val--total) .stat-val__num {
  color: var(--stat-color-bst);
  font-weight: 700;
}

.section {
  margin-top: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.section h2 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  color: var(--muted);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.data-table th,
.data-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.35rem;
  vertical-align: middle;
}
.data-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}
.data-table thead th {
  background: var(--table-header-bg);
}
.data-table tr:hover td {
  background: var(--row-hover-bg);
}
.data-table--species-moves th {
  padding: 0.35rem 0.25rem;
  vertical-align: bottom;
}
.data-table--species-moves th .catalog-sort-btn {
  width: max-content;
  max-width: 100%;
  min-width: 2.25rem;
  white-space: nowrap;
  text-align: left;
}
.data-table--species-moves td:nth-child(4),
.data-table--species-moves td:nth-child(5),
.data-table--species-moves td:nth-child(6) {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* --- Compare two Pokémon --- */
.compare-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}
.compare-layout--multi {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (max-width: 900px) {
  .compare-layout {
    grid-template-columns: 1fr;
  }
  .compare-layout--multi {
    grid-template-columns: 1fr;
  }
}
.compare-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  min-width: 0;
}
.compare-col h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.compare-col .detail-sprite {
  max-width: 180px;
}
.compare-moves {
  margin-top: 0.75rem;
  min-width: 0;
}
.compare-moves-heading {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.compare-moves-empty {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
}
.compare-moves-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(42vh, 320px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
}
.compare-moves-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 0.82rem;
}
.compare-moves-item:last-child {
  border-bottom: none;
}
.compare-moves-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.compare-moves-link:hover .compare-moves-name {
  color: var(--page-accent, #7eb8ff);
}
.compare-moves-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-moves-meta {
  font-size: 0.75rem;
  padding-left: 1.35rem;
}
.compare-move-type {
  flex-shrink: 0;
}
.compare-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1rem 2rem;
  background: rgba(5, 7, 12, 0.65);
}
.compare-picker-dialog {
  width: min(480px, 100%);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 2.25rem 0.75rem 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  position: relative;
}
.compare-picker-close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.compare-picker-close:hover {
  color: var(--text);
}
.compare-picker-search {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font: inherit;
}
.compare-picker-list {
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  max-height: 52vh;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.compare-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  font: inherit;
}
.compare-picker-item:hover {
  background: var(--catalog-row-hover-bg);
}
.compare-picker-item:last-child {
  border-bottom: none;
}

/* Compare hub: filter sidebar + scrollable species sheet (nested scroll in .app-main) */
body[data-page-accent="compare"] .app-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.compare-hub-main {
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.compare-hub-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 900px) {
  .compare-hub-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}
.compare-filter-panel {
  margin: 0;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  padding: 0.85rem 1rem 1rem;
  overflow-y: auto;
  min-height: 0;
  max-height: none;
  background: var(--panel);
}
@media (max-width: 900px) {
  .compare-filter-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
  }
}
.compare-section-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
.compare-filter-lead {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.compare-filter-field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.75rem 0 0.35rem;
  color: var(--muted);
}
.compare-ability-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}
.compare-ability-wrap .search-suggest-wrap {
  flex: 1;
  min-width: 0;
}
.finder-ability-input,
.finder-move-input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font: inherit;
}
.finder-slot-clear {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.45rem 0.25rem;
  flex-shrink: 0;
}
.finder-slot-clear:hover {
  color: var(--text);
}
.finder-move-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}
.finder-move-slot-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  min-height: 1.75rem;
}
.finder-move-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex: 1;
}
.finder-join-spacer {
  width: 4.5rem;
  flex-shrink: 0;
}

.finder-move-tag {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--page-accent) 14%, var(--panel2));
  color: var(--muted);
}

.finder-move-tag--required {
  min-width: 4.5rem;
  text-align: center;
}
.finder-join-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.finder-join-btn {
  border: none;
  background: var(--panel2);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}
.finder-join-btn.active {
  background: color-mix(in srgb, var(--page-accent) 32%, var(--panel2));
  color: var(--text);
}
.finder-join-btn:hover:not(.active) {
  color: var(--text);
}
.compare-list-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.compare-list-column .catalog-sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.compare-list-sticky .species-hero-inline h1 {
  margin: 0;
  font-size: 1.15rem;
}

.pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.btn.secondary {
  background: var(--btn-secondary-solid);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

a.btn,
a.btn.secondary {
  display: inline-block;
  text-decoration: none;
  font-size: 0.88rem;
}
a.btn:hover,
a.btn.secondary:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.catalog-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-left: 0;
  justify-content: flex-start;
}
.catalog-controls-row > label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--muted);
}

/* Anchor for absolutely positioned `.search-suggest-dd` (lists + Calc pickers). */
.search-suggest-wrap {
  position: relative;
  width: 100%;
}

.catalog-controls-row .search-suggest-wrap {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
}

/* Species list toolbar: search only as wide as the input (don’t push checkboxes right). */
.species-toolbar.catalog-controls-row .search-suggest-wrap {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
.species-toolbar .species-toolbar-search {
  box-sizing: border-box;
  width: 16rem;
  max-width: min(16rem, 42vw);
  min-width: 10rem;
}

.compare-picker-dialog .search-suggest-wrap {
  width: 100%;
  max-width: none;
  position: relative;
}

.search-suggest-dd {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 80;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--dropdown-shadow);
  max-height: min(52vh, 380px);
  overflow-y: auto;
}

.search-suggest-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.55rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.search-suggest-row:last-child {
  border-bottom: none;
}
.search-suggest-row:hover,
.search-suggest-row--hi {
  background: color-mix(in srgb, var(--page-accent) 12%, var(--panel2));
}

.search-suggest-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--sprite-plate-bg);
  border: 1px solid var(--border);
}
.search-suggest-icon--type {
  background: var(--panel2);
}
.search-suggest-icon--empty {
  display: inline-block;
}
.search-suggest-icon--letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--page-accent);
}

.search-suggest-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}
.search-suggest-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest-id {
  font-size: 0.78rem;
}

.chip {
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-weight: 600;
}
.chip:hover {
  color: var(--text);
  border-color: #3d4a63;
}
.chip-on {
  border-color: color-mix(in srgb, var(--page-accent) 72%, #ffffff 18%);
  color: var(--accent-chip-color);
  background: color-mix(in srgb, var(--page-accent) 14%, var(--panel2));
}

.chip-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chip-type-icon {
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 4px;
}

/* --- Calc (damage preview) --- */
.calc-form {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.calc-battle {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 1.1fr) 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
}

@media (max-width: 960px) {
  .calc-battle {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 961px) {
  .calc-center {
    padding-inline: 0.75rem;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

.calc-side-title,
.calc-field-subhead {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.calc-section-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.calc-side-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--page-accent, var(--nav-calc));
}

.calc-side-title--atk {
  color: var(--calc-atk-accent, #f87171);
}

.calc-side-title--move {
  color: var(--calc-move-accent, #facc15);
}

.calc-side-title--def {
  color: var(--calc-def-accent, #5eb0ff);
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.calc-field > span {
  font-weight: 600;
}

.calc-field input[type="search"],
.calc-field input[type="text"][role="searchbox"],
.calc-field input[type="number"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  width: 100%;
}

.calc-select {
  width: 100%;
  box-sizing: border-box;
  appearance: auto;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.35;
}

.calc-select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--page-accent, var(--nav-calc)) 55%, transparent);
  outline-offset: 1px;
}

.calc-field--row.calc-field--check {
  margin-bottom: 0.4rem;
  color: var(--text);
  font-size: 0.84rem;
  gap: 0.55rem;
}

.calc-field--check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--page-accent, var(--nav-calc));
  cursor: pointer;
}

.calc-field--inline {
  flex: 1;
  min-width: 0;
}

.calc-field--row {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.calc-calc-actions {
  margin-top: 0.85rem;
}

.calc-run-wide {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--page-accent, var(--nav-calc)) 45%, var(--border));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--page-accent, var(--nav-calc)) 22%, var(--panel2)) 0%,
    var(--panel) 55%,
    var(--panel2) 100%
  );
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    filter 0.15s ease;
}

.calc-run-wide:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--page-accent, var(--nav-calc)) 65%, var(--border));
  filter: brightness(1.06);
}

.calc-run-wide:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--page-accent, var(--nav-calc)) 55%, transparent);
  outline-offset: 2px;
}

.calc-run-wide:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.calc-run-wide-icon {
  flex-shrink: 0;
  display: block;
  color: var(--page-accent, var(--nav-calc));
}

.calc-field-block {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel2) 92%, var(--bg));
}

.calc-field-subhead {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.calc-field-subhead--field {
  color: var(--calc-field-accent, #94a3b8);
}

.calc-battle-format {
  border: 0;
  margin: 0 0 0.65rem;
  padding: 0;
  min-inline-size: 0;
}

.calc-battle-format-legend {
  padding: 0;
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.calc-format-seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.calc-format-opt {
  flex: 1;
  position: relative;
  margin: 0;
  cursor: pointer;
}

.calc-format-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.calc-format-opt span {
  display: block;
  padding: 0.55rem 0.65rem;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  background: var(--panel2);
  color: var(--muted);
}

.calc-format-opt:first-child span {
  border-right: 1px solid var(--border);
}

.calc-format-opt input:checked + span {
  background: color-mix(in srgb, var(--page-accent, var(--nav-calc)) 82%, #1a0a06);
  color: #fff;
}

.calc-format-opt input:focus-visible + span {
  outline: 2px solid var(--page-accent, var(--nav-calc));
  outline-offset: -3px;
}

.calc-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.45rem;
}

@media (max-width: 520px) {
  .calc-field-grid {
    grid-template-columns: 1fr;
  }
}

.calc-eff-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.calc-eff-label {
  font-size: 0.8rem;
  margin-right: 0.25rem;
}

.calc-eff-chip {
  font-size: 0.76rem;
}

.calc-pick-card {
  min-height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel2);
  padding: 0.65rem 0.75rem;
  margin-top: 0.25rem;
  overflow: visible;
}

.calc-pick-card--typed {
  --type-border-a: #94a3b8;
  --type-border-b: #94a3b8;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel2), var(--panel2)) padding-box,
    linear-gradient(
        135deg,
        var(--type-border-a) 0%,
        var(--type-border-b) 35%,
        var(--type-border-a) 65%,
        var(--type-border-b) 100%
      )
      border-box;
}

.calc-side--atk {
  --calc-side-accent: var(--calc-atk-accent, #f87171);
}

.calc-side--def {
  --calc-side-accent: var(--calc-def-accent, #5eb0ff);
}

.calc-side--atk .calc-sp-range {
  accent-color: var(--calc-side-accent);
}

.calc-side--def .calc-sp-range {
  accent-color: var(--calc-side-accent);
}

.calc-side--atk .calc-stage-plus {
  color: var(--calc-side-accent);
  border-color: color-mix(in srgb, var(--calc-side-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--calc-side-accent) 10%, var(--panel2));
}

.calc-side--atk .calc-stage-plus:hover {
  border-color: color-mix(in srgb, var(--calc-side-accent) 65%, var(--border));
}

.calc-side--def .calc-stage-plus {
  color: var(--calc-side-accent);
  border-color: color-mix(in srgb, var(--calc-side-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--calc-side-accent) 10%, var(--panel2));
}

.calc-side--def .calc-stage-plus:hover {
  border-color: color-mix(in srgb, var(--calc-side-accent) 65%, var(--border));
}

.calc-side--atk .calc-sp-val,
.calc-side--atk .calc-sp-at-lvl {
  color: var(--calc-side-accent);
}

.calc-side--def .calc-sp-val,
.calc-side--def .calc-sp-at-lvl {
  color: var(--calc-side-accent);
}

.calc-pick-card--move {
  min-height: 100px;
  overflow: hidden;
}

.calc-pick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0.75rem;
}

.calc-pick-main {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.calc-pick-mainhead {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.calc-pick-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 90%, var(--bg));
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.calc-pick-clear:hover {
  color: #fecaca;
  border-color: #f87171;
  background: color-mix(in srgb, #f87171 12%, var(--panel));
}

.calc-pick-clear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--page-accent, var(--nav-calc)) 50%, transparent);
  outline-offset: 1px;
}

.calc-pick-clear-icon {
  display: block;
}

.calc-pick-kit {
  flex: 1 1 280px;
  min-width: min(100%, 260px);
  max-width: min(420px, 100%);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.calc-pick-kit-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.calc-pick-kit-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc-pick-kit-itemrow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.calc-pick-kit-input,
.calc-pick-kit .search-suggest-wrap input[type="search"],
.calc-pick-kit .search-suggest-wrap input[type="text"][role="searchbox"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  font-size: 0.82rem;
  font-family: inherit;
}

.calc-pick-kit-itemrow .search-suggest-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.calc-pick-kit .search-suggest-dd {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 120;
  max-height: min(48vh, 360px);
}

.calc-pick-kit .search-suggest-row {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: transparent;
}

.calc-pick-kit .search-suggest-row:last-child {
  border-bottom: none;
}

.calc-pick-kit .search-suggest-row:hover,
.calc-pick-kit .search-suggest-row--hi {
  background: color-mix(in srgb, var(--page-accent, var(--nav-calc)) 14%, var(--panel));
}

.calc-pick-kit .search-suggest-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.calc-pick-kit .search-suggest-meta {
  flex: 1 1 0;
  min-width: 0;
}

.calc-pick-kit .search-suggest-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
  text-overflow: unset;
}

.calc-pick-kit .search-suggest-id {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-pick-kit-itemrow .calc-item-sprite {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-pick-kit .calc-item-sprite-img {
  width: 24px;
  height: 24px;
}

@media (max-width: 520px) {
  .calc-pick-kit {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
}

.calc-sp-build-wrap {
  margin-top: 0.65rem;
}

.calc-sp-build {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  overflow-x: auto;
}

.calc-sp-build-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.calc-sp-row {
  display: grid;
  grid-template-columns: auto minmax(3.5rem, 4.5rem) 2.1rem 1fr 1.45rem auto minmax(2rem, 2.6rem);
  align-items: center;
  gap: 0.35rem 0.4rem;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  min-width: min(100%, 420px);
}
.calc-sp-row--no-stage {
  grid-template-columns:
    minmax(1.65rem, 2.1rem)
    minmax(1.45rem, 1.75rem)
    minmax(3.5rem, 1fr)
    minmax(1.15rem, 1.4rem)
    auto
    minmax(2.35rem, 3.1rem);
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.calc-sp-row--compact {
  font-size: 0.72rem;
  gap: 0.22rem 0.28rem;
  margin-bottom: 0.22rem;
}
/* Team slot build panel: full-width stat rows (avoid inherited min-width + bad mobile columns). */
.tb-slot-build .calc-sp-build--compact {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.tb-slot-build .calc-sp-row--no-stage {
  grid-template-columns:
    minmax(1.5rem, 1.9rem)
    minmax(1.35rem, 1.65rem)
    minmax(4.5rem, 1fr)
    minmax(1.1rem, 1.35rem)
    auto
    minmax(2.25rem, 2.85rem);
}
.calc-sp-build--compact {
  padding: 0.4rem 0.45rem;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  overflow: visible;
}
.calc-sp-build-head--compact {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
}
.calc-sp-build-head--compact strong {
  font-size: 0.78rem;
}
.calc-field--nature-compact {
  margin-top: 0.35rem;
  font-size: 0.72rem;
}
.calc-field--nature-compact .calc-select--compact {
  font-size: 0.72rem;
  padding: 0.22rem 0.3rem;
}
.calc-sp-build--compact .calc-sp-total {
  margin-top: 0.35rem;
  font-size: 0.72rem;
}
.calc-sp-build--compact .calc-sp-at-lvl {
  font-size: 0.72rem;
}

.calc-sp-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.calc-stage-plus {
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel2) 90%, var(--bg));
  color: var(--page-accent, var(--nav-calc));
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.calc-stage-plus:hover {
  border-color: color-mix(in srgb, var(--page-accent, var(--nav-calc)) 55%, var(--border));
  filter: brightness(1.08);
}

.calc-stage-disp {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 1.35rem;
}

@media (max-width: 520px) {
  .calc-sp-row:not(.calc-sp-row--no-stage) {
    grid-template-columns: auto minmax(2.6rem, 3.4rem) 1.85rem minmax(0, 1fr) 1.3rem auto minmax(1.65rem, 2.1rem);
    gap: 0.28rem 0.32rem;
    font-size: 0.76rem;
    min-width: 280px;
  }
  .calc-sp-row--no-stage {
    min-width: 0;
    width: 100%;
  }
  .tb-slot-build .calc-sp-row--no-stage {
    grid-template-columns:
      minmax(1.35rem, 1.75rem)
      minmax(1.25rem, 1.55rem)
      minmax(3.25rem, 1fr)
      minmax(1rem, 1.25rem)
      auto
      minmax(2rem, 2.65rem);
  }
  .calc-stage-plus {
    min-width: 1.4rem;
    height: 1.4rem;
    font-size: 0.88rem;
  }
}

.calc-sp-at-lvl {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--page-accent, var(--nav-calc));
  text-align: right;
  font-size: 0.82rem;
}

.calc-sp-label {
  font-weight: 600;
  color: var(--muted);
}

.calc-sp-base {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.calc-sp-range {
  width: 100%;
  accent-color: var(--page-accent, var(--nav-calc));
}

.calc-sp-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calc-sp-cap {
  font-size: 0.72rem;
}

.calc-field--nature {
  margin-top: 0.5rem;
}

.calc-sp-total {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
}

.calc-sp-total--bad {
  color: #f87171;
}

.calc-sp-err {
  margin: 0.35rem 0 0;
  color: #f87171 !important;
  font-size: 0.82rem;
}

/* Species detail: stat table + Stat Point controls */
.stat-table--build {
  --stat-build-label-w: 3.25rem;
  --stat-build-base-w: 2.35rem;
  --stat-build-values-w: 6.5rem;
  --stat-build-controls-w: 13.75rem;
  table-layout: fixed;
  margin-top: 0.35rem;
  width: 100%;
  text-align: left;
}

/* Override generic `.stat-table th { width: 120px }` for this layout */
.stat-table.stat-table--build thead th,
.stat-table.stat-table--build tbody th.stat-build-th {
  width: auto;
  max-width: none;
}

.stat-table.stat-table--build .stat-build-col--label {
  width: var(--stat-build-label-w);
}

.stat-table.stat-table--build .stat-build-col--base {
  width: var(--stat-build-base-w);
}

/* No width — absorbs remaining space between base and raw/boosted columns */

.stat-table.stat-table--build .stat-build-col--lvl {
  width: var(--stat-build-values-w);
}

.stat-table.stat-table--build .stat-build-col--sp {
  width: var(--stat-build-controls-w);
}

.stat-table--build th.stat-build-th {
  width: var(--stat-build-label-w);
  min-width: var(--stat-build-label-w);
  max-width: var(--stat-build-label-w);
  padding-right: 0.5rem;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 0.88rem;
  text-align: left;
}

.stat-table--build thead th {
  font-weight: 600;
  color: var(--muted);
  vertical-align: bottom;
  padding: 0 0.25rem 0.35rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.stat-table--build .stat-build-col-head {
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}

.stat-table--build .stat-build-col-head--bar {
  padding: 0;
}

.stat-build-sp-head-line {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-build-col-cap {
  display: block;
  font-size: 0.68rem;
  margin-top: 0.1rem;
}

.stat-table--build .stat-build-col-head--sp {
  text-align: right;
  padding-right: 0;
}

.stat-table--build .stat-build-col-head--sp .stat-build-sp-head-line,
.stat-table--build .stat-build-col-head--sp .stat-build-col-cap {
  text-align: right;
}

.stat-table--build tr.stat-build-row:has(.stat-val__fill--hp) .stat-build-th {
  color: var(--stat-color-hp-head);
}
.stat-table--build tr.stat-build-row:has(.stat-val__fill--atk) .stat-build-th {
  color: var(--stat-color-atk-head);
}
.stat-table--build tr.stat-build-row:has(.stat-val__fill--def) .stat-build-th {
  color: var(--stat-color-def-head);
}
.stat-table--build tr.stat-build-row:has(.stat-val__fill--spatk) .stat-build-th {
  color: var(--stat-color-spatk-head);
}
.stat-table--build tr.stat-build-row:has(.stat-val__fill--spdef) .stat-build-th {
  color: var(--stat-color-spdef-head);
}
.stat-table--build tr.stat-build-row:has(.stat-val__fill--spe) .stat-build-th {
  color: var(--stat-color-spe-head);
}

.stat-table--build td {
  padding: 0.4rem 0.25rem;
  vertical-align: middle;
}

.stat-build-base-td {
  text-align: left;
  padding-left: 0;
  padding-right: 0.25rem;
}

.stat-build-bar-td {
  padding-inline: 0.15rem 0.35rem;
}

.stat-build-values-td {
  text-align: left;
  font-variant-numeric: tabular-nums;
  padding-left: 0;
  padding-right: 0.25rem;
}

.stat-build-controls-td {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

.stat-build-base {
  display: inline-block;
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: left;
}

.stat-build-base--hp {
  color: var(--stat-color-hp);
}
.stat-build-base--atk {
  color: var(--stat-color-atk);
}
.stat-build-base--def {
  color: var(--stat-color-def);
}
.stat-build-base--spatk {
  color: var(--stat-color-spatk);
}
.stat-build-base--spdef {
  color: var(--stat-color-spdef);
}
.stat-build-base--spe {
  color: var(--stat-color-spe);
}
.stat-build-base--bst {
  color: var(--stat-color-bst);
}

.stat-build-track {
  position: relative;
  height: 2px;
  width: 100%;
}

.stat-build-track .stat-build-bar-seg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 100%;
  display: block;
  border-radius: 1px;
  transition: width 0.15s ease, left 0.15s ease;
  opacity: 0.88;
}

.stat-build-bar-boost {
  opacity: 1;
}

.stat-build-bar-base.stat-val__fill--hp {
  background: var(--stat-color-hp);
}
.stat-build-bar-boost.stat-val__fill--hp {
  background: color-mix(in srgb, var(--stat-color-hp) 72%, #000);
}
.stat-build-bar-base.stat-val__fill--atk {
  background: var(--stat-color-atk);
}
.stat-build-bar-boost.stat-val__fill--atk {
  background: color-mix(in srgb, var(--stat-color-atk) 72%, #000);
}
.stat-build-bar-base.stat-val__fill--def {
  background: var(--stat-color-def);
}
.stat-build-bar-boost.stat-val__fill--def {
  background: color-mix(in srgb, var(--stat-color-def) 72%, #000);
}
.stat-build-bar-base.stat-val__fill--spatk {
  background: var(--stat-color-spatk);
}
.stat-build-bar-boost.stat-val__fill--spatk {
  background: color-mix(in srgb, var(--stat-color-spatk) 72%, #000);
}
.stat-build-bar-base.stat-val__fill--spdef {
  background: var(--stat-color-spdef);
}
.stat-build-bar-boost.stat-val__fill--spdef {
  background: color-mix(in srgb, var(--stat-color-spdef) 72%, #000);
}
.stat-build-bar-base.stat-val__fill--spe {
  background: var(--stat-color-spe);
}
.stat-build-bar-boost.stat-val__fill--spe {
  background: color-mix(in srgb, var(--stat-color-spe) 72%, #000);
}

.stat-build-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
}

.stat-build-lvl-nums {
  display: block;
  font-size: 0.92rem;
}

.stat-table--build .stat-build-summary th,
.stat-table--build .stat-build-summary td {
  padding-top: 0.5rem;
  border-bottom: none;
}

.stat-table--build tr.stat-build-summary .stat-build-th--bst {
  color: var(--stat-color-bst-head);
}

.stat-build-controls-td .calc-sp-err {
  margin: 0.35rem 0 0;
  text-align: right;
}

.species-sp-clear,
.species-sp-step,
.species-sp-max {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  line-height: 1;
}

.species-sp-clear {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  color: #f87171;
  font-size: 1.1rem;
  font-weight: 700;
}

.species-sp-step {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.species-sp-max {
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--page-accent, var(--nav-species));
}

.species-sp-clear:hover,
.species-sp-step:hover,
.species-sp-max:hover {
  border-color: color-mix(in srgb, var(--page-accent, var(--nav-species)) 55%, var(--border));
}

.stat-table--build .species-sp-step[data-delta="1"] {
  color: var(--stat-color-hp);
}

.species-sp-input {
  width: 3rem;
  padding: 0.28rem 0.35rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.species-sp-input::-webkit-outer-spin-button,
.species-sp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Species detail: desktop table + mobile split cards */
.stat-build-shell {
  width: 100%;
  max-width: 100%;
}

.stat-build-mobile {
  display: none;
}

.stat-build-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.stat-build-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.stat-build-card-head--sp {
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

.stat-build-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-build-card-sub {
  font-size: 0.82rem;
}

.stat-build-m-row {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.stat-build-m-row:last-child {
  border-bottom: none;
}

.stat-build-m-row-top {
  display: flex;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.4rem;
}

.stat-build-m-row-top .stat-build-th {
  flex: 0 0 2.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.stat-build-m-base {
  flex: 0 0 auto;
}

.stat-build-m-row-top .stat-build-lvl-nums {
  margin-left: auto;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stat-build-m-bar {
  width: 100%;
}

.stat-build-m-bar .stat-build-track {
  height: 4px;
  width: 100%;
}

.stat-build-m-sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.stat-build-m-sp-row:last-child {
  border-bottom: none;
}

.stat-build-m-sp-row .stat-build-th {
  flex: 0 0 2.5rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.stat-build-m-sp-row .stat-build-controls {
  flex: 1;
  justify-content: flex-end;
}

.stat-build-card--sp .calc-sp-err {
  margin: 0.5rem 0 0;
  text-align: left;
}

@media (max-width: 900px) {
  .stat-build-desktop {
    display: none !important;
  }

  .stat-build-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
}

.calc-pick-placeholder,
.calc-pick-loading,
.calc-pick-error {
  font-size: 0.88rem;
  padding: 0.5rem 0;
}

.calc-pick-inner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.calc-pick-sprite {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--calc-sprite-plate-bg);
  flex-shrink: 0;
}

.calc-pick-sprite--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  background: var(--calc-sprite-plate-bg);
  font-size: 1.25rem;
}

.calc-pick-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.calc-pick-sub {
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.calc-pick-link {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
}

.calc-move-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.calc-move-head {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.calc-move-type-icon {
  border-radius: 8px;
  flex-shrink: 0;
}

.calc-item-sprite-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.calc-result-modnotes {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.calc-result {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--panel), var(--panel2));
  width: 100%;
  box-sizing: border-box;
}

.calc-result-inner {
  width: 100%;
  max-width: none;
}

.calc-result-head {
  display: block;
  width: 100%;
}

.calc-result-head--clean .calc-result-toprow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  width: 100%;
}

.calc-result-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 0;
}

.calc-result-head--clean .calc-result-toprow .calc-type-eff-badge {
  margin: 0;
  flex: 0 0 auto;
  align-self: flex-start;
}

.calc-result-pct-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin-top: 0.15rem;
}

.calc-result-pct-nums {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.calc-result-pctnum {
  font-size: clamp(1.45rem, 4.2vw, 2.1rem);
  font-weight: 800;
  color: color-mix(in srgb, var(--page-accent, var(--nav-calc)) 88%, #fff);
  line-height: 1.1;
}

.calc-result-sep--pct {
  font-size: 1.15rem;
  font-weight: 300;
}

.calc-result-pctsuf {
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 700;
  color: var(--muted);
  margin-left: 0.05rem;
}

.calc-result-pctmeta {
  font-size: 0.82rem;
}

.calc-result-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

@media (min-width: 640px) {
  .calc-result-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    align-items: stretch;
  }
}

.calc-result-detail-col--facts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.calc-result-detail-col--facts > * {
  margin: 0;
}

.calc-result-detail-col--ko {
  min-width: 0;
}

.calc-result-detail-col--ko .calc-ko-verdict {
  margin-top: 0;
  height: 100%;
}

.calc-result-hpunit {
  font-size: 1.05rem;
  font-weight: 600;
  margin-left: 0.35rem;
  align-self: baseline;
}

.calc-result-match,
.calc-result-fieldline,
.calc-result-stats,
.calc-result-ohko {
  font-size: 0.86rem;
  line-height: 1.45;
}

.calc-result-field-mult {
  font-weight: 600;
  color: var(--page-accent, var(--nav-calc));
}

@media (max-width: 520px) {
  .calc-result-head--clean .calc-result-toprow {
    flex-direction: column;
  }
  .calc-result-head--clean .calc-result-toprow .calc-type-eff-badge {
    align-self: flex-end;
  }
  .calc-result-hero {
    flex: 0 1 auto;
    width: 100%;
  }
}

.calc-result-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.calc-type-eff-badge {
  display: inline-block;
  margin: 0.15rem 0 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
}

.calc-type-eff-badge--4 {
  background: color-mix(in srgb, #c41e3a 35%, var(--panel2));
  color: #ffb4c0;
  border-color: color-mix(in srgb, #c41e3a 55%, var(--border));
}

.calc-type-eff-badge--2 {
  background: color-mix(in srgb, var(--page-accent, #e85) 28%, var(--panel2));
  color: var(--text);
  border-color: color-mix(in srgb, var(--page-accent, #e85) 45%, var(--border));
}

.calc-type-eff-badge--05,
.calc-type-eff-badge--025 {
  background: color-mix(in srgb, #4a8 22%, var(--panel2));
  color: #cfe8de;
}

.calc-type-eff-badge--0 {
  background: color-mix(in srgb, #888 25%, var(--panel2));
  color: var(--muted);
}

.calc-type-eff-badge--neu {
  background: var(--panel2);
  color: var(--muted);
}

.calc-result-range {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.calc-result-num {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  color: var(--page-accent, var(--nav-calc));
  font-variant-numeric: tabular-nums;
}

.calc-result-sep {
  font-size: 1.5rem;
  font-weight: 300;
}

.calc-result-sub {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
}

.calc-result-explainer {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.calc-ko-verdict {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--page-accent, var(--nav-calc)) 35%, var(--border));
  background: color-mix(in srgb, var(--page-accent, var(--nav-calc)) 8%, var(--panel2));
}

.calc-ko-verdict--compact {
  padding: 0.6rem 0.7rem;
}

.calc-ko-verdict--compact .calc-ko-verdict-title {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.88rem;
  font-weight: 700;
}

.calc-ko-verdict-title {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--page-accent, var(--nav-calc));
  margin-bottom: 0.35rem;
}

.calc-ko-verdict-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}

.calc-result-meta {
  margin-top: 0.85rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.calc-result-error {
  color: #ff9b9b;
  font-size: 0.9rem;
}

.muted {
  color: var(--muted);
  font-size: 0.88rem;
}

.error {
  color: #ff8b8b;
  padding: 0.75rem;
  border: 1px solid #5a2a2a;
  border-radius: var(--radius);
  background: #241314;
}

.site-footer {
  display: none;
}
.site-footer a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--text);
}

/* --- Rotom sidebar (Hollama-style compact chat) --- */
.rotom-sidebar {
  position: relative;
  width: min(var(--rotom-sidebar-width), 100vw);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  background: var(--rotom-sidebar-bg);
  border-right: 2px solid var(--rotom-orange-deep);
  box-shadow: var(--rotom-sidebar-shadow);
  transition: width 180ms ease, transform 180ms ease, opacity 160ms ease;
  overflow: hidden;
}

.rotom-resize-handle {
  display: none;
}

@media (min-width: 901px) {
  .rotom-resize-handle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 3;
    touch-action: none;
    background: transparent;
  }
  .rotom-resize-handle:hover {
    background: rgba(232, 93, 44, 0.22);
  }
}

.app-shell.rotom-collapsed .rotom-resize-handle {
  display: none;
  pointer-events: none;
}

.rotom-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  border: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 45;
}

.app-shell.rotom-collapsed .rotom-sidebar {
  width: 0;
  border-right-width: 0;
  opacity: 0;
}

.app-shell.rotom-collapsed .main-column {
  margin-left: 0;
}

/* Mobile overlay: must follow base `.rotom-sidebar` so `position: fixed` is not overridden */
@media (max-width: 900px) {
  .rotom-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, var(--rotom-sidebar-width));
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    flex: none;
    transform: translateX(-102%);
    z-index: 50;
    border-right: 2px solid var(--rotom-orange-deep);
    border-bottom: none;
    opacity: 1;
  }

  .app-shell.rotom-collapsed .rotom-sidebar {
    width: min(88vw, var(--rotom-sidebar-width));
    opacity: 1;
  }

  .app-shell.rotom-open .rotom-sidebar {
    transform: translateX(0);
    opacity: 1;
  }

  .app-shell.rotom-open .rotom-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .main-column {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}

.rotom-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--rotom-head-border);
  background: var(--rotom-head-bg);
}

.rotom-sidebar-head-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.rotom-sidebar-head-tools {
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.rotom-agent-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  cursor: pointer;
  user-select: none;
}

.rotom-agent-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.rotom-agent-toggle-ui {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--rotom-toggle-ui-bg);
  border: 1px solid rgba(255, 180, 120, 0.35);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.rotom-agent-toggle-ui::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rotom-toggle-knob);
  top: 2px;
  left: 3px;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.rotom-agent-toggle:focus-within .rotom-agent-toggle-ui {
  outline: 2px solid var(--rotom-orange);
  outline-offset: 2px;
}

.rotom-agent-toggle-input:checked + .rotom-agent-toggle-ui {
  background: var(--rotom-orange);
  border-color: rgba(255, 255, 255, 0.25);
}

.rotom-agent-toggle-input:checked + .rotom-agent-toggle-ui::after {
  transform: translateX(15px);
}

.rotom-agent-toggle-label {
  font-size: 0.62rem;
  color: var(--rotom-agent-label);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.rotom-logo {
  border-radius: 14px;
  border: 2px solid var(--rotom-orange);
  object-fit: cover;
  flex-shrink: 0;
}

.rotom-face-btn {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  line-height: 0;
}
.rotom-face-btn:hover .rotom-logo {
  filter: brightness(1.05);
}

.rotom-sidebar-titles {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.rotom-brand {
  color: var(--rotom-brand-color);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.rotom-sub {
  font-size: 0.75rem;
  color: var(--rotom-sub-color);
}

.rotom-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rotom-msg {
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
  max-width: 100%;
  word-break: break-word;
}

.rotom-msg--user {
  align-self: flex-end;
  background: var(--rotom-msg-user-bg);
  border: 1px solid var(--rotom-msg-user-border);
  color: var(--rotom-msg-user-color);
}

.rotom-msg--rotom {
  align-self: flex-start;
  background: var(--rotom-msg-rotom-bg);
  border: 1px solid var(--rotom-msg-rotom-border);
  color: var(--rotom-msg-rotom-color);
}

.rotom-msg--pending {
  opacity: 0.75;
  font-style: italic;
}

.rotom-msg-body {
  white-space: pre-wrap;
}

.rotom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.rotom-link {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  background: var(--rotom-link-bg);
  border: 1px solid var(--rotom-cyan-ui);
  color: var(--rotom-link-color);
  text-decoration: none;
}
.rotom-link:hover {
  background: var(--rotom-link-bg-hover);
  text-decoration: none;
}

.rotom-link--inline {
  margin: 0 0.12rem;
  vertical-align: baseline;
  font-size: 0.82em;
}

.rotom-compose {
  margin-top: auto;
  padding: 0.55rem 0.65rem 0.75rem;
  border-top: 1px solid var(--rotom-compose-border);
  background: var(--rotom-compose-bg);
}

.rotom-input {
  width: 100%;
  resize: vertical;
  min-height: 3.25rem;
  max-height: 8rem;
  background: var(--rotom-input-bg);
  color: var(--rotom-input-color);
  border: 1px solid var(--rotom-input-border);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.88rem;
}
.rotom-input::placeholder {
  color: var(--muted);
}
.rotom-input:focus {
  outline: 2px solid var(--rotom-cyan-ui);
  outline-offset: 1px;
}

.rotom-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.rotom-mic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--rotom-mic-border);
  background: var(--rotom-mic-bg);
  color: var(--rotom-cyan-ui);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rotom-mic:hover:not(:disabled) {
  background: var(--rotom-mic-hover-bg);
}
.rotom-mic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.rotom-mic--on {
  background: rgba(232, 93, 44, 0.35);
  border-color: var(--rotom-orange);
  color: #fff;
  animation: rotom-pulse 1.2s ease-in-out infinite;
}

@keyframes rotom-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 93, 44, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(232, 93, 44, 0);
  }
}

.rotom-mic-icon {
  width: 22px;
  height: 22px;
}

.rotom-send {
  flex: 1;
  min-height: 42px;
  border-radius: 10px;
  border: none;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(180deg, var(--rotom-orange), var(--rotom-orange-deep));
  color: #fff;
}
.rotom-send:hover {
  filter: brightness(1.06);
}

.rotom-speech-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--rotom-sub-color);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Home dashboard --- */
.home-main {
  max-width: var(--content-max-width);
  margin-inline: auto;
  margin-block: 0;
  padding: 1rem 1.25rem 2.5rem;
}

.home-hero.rotom-hero {
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(232, 93, 44, 0.22), rgba(15, 18, 26, 0.95));
  border: 1px solid rgba(232, 93, 44, 0.4);
}

html[data-theme="light"] .home-hero.rotom-hero {
  background: linear-gradient(135deg, rgba(232, 93, 44, 0.14), rgba(255, 255, 255, 0.95));
}

html[data-theme="light"] .home-tagline {
  color: var(--muted);
}

.home-hero-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.home-rotom {
  border-radius: 16px;
  border: 3px solid var(--rotom-orange);
  flex-shrink: 0;
}

.home-hero h1 {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
}

.home-tagline {
  margin: 0 0 0.5rem;
  color: #dfe6f2;
  line-height: 1.45;
}

.home-meta {
  margin: 0.35rem 0;
}

.home-dash {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr));
  gap: 0.75rem;
}

@media (min-width: 720px) {
  .home-dash {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  }
}

@media (min-width: 1100px) {
  .home-dash {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.dash-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.28rem;
  padding: 0.5rem 0.4rem;
  aspect-ratio: 1;
  min-height: 0;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  background: var(--panel2);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.dash-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: var(--card-hover-shadow);
}

.dash-title {
  font-weight: 800;
  font-size: clamp(0.82rem, 2.8vw, 0.98rem);
  line-height: 1.15;
  flex-shrink: 0;
  width: 100%;
  padding: 0 0.15rem;
}

.dash-icon-wrap {
  width: 66.666%;
  aspect-ratio: 1;
  max-width: 100%;
  min-width: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.category-icon {
  display: block;
  flex-shrink: 0;
}

.dash-icon-wrap .category-icon {
  width: 58%;
  height: 58%;
}

.dash-desc {
  font-size: clamp(0.58rem, 1.8vw, 0.68rem);
  line-height: 1.25;
  width: 100%;
  padding: 0 0.15rem;
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.dash-card--species .dash-icon-wrap {
  background: rgba(94, 176, 255, 0.15);
  color: var(--nav-species);
  border: 1px solid rgba(94, 176, 255, 0.45);
}
.dash-card--species {
  border-color: rgba(94, 176, 255, 0.35);
}

.dash-card--moves .dash-icon-wrap {
  background: rgba(201, 123, 255, 0.15);
  color: var(--nav-moves);
  border: 1px solid rgba(201, 123, 255, 0.45);
}
.dash-card--moves {
  border-color: rgba(201, 123, 255, 0.35);
}

.dash-card--abilities .dash-icon-wrap {
  background: rgba(159, 224, 103, 0.12);
  color: var(--nav-abilities);
  border: 1px solid rgba(159, 224, 103, 0.45);
}
.dash-card--abilities {
  border-color: rgba(159, 224, 103, 0.35);
}

.dash-card--items .dash-icon-wrap {
  background: rgba(240, 178, 74, 0.12);
  color: var(--nav-items);
  border: 1px solid rgba(240, 178, 74, 0.45);
}
.dash-card--items {
  border-color: rgba(240, 178, 74, 0.35);
}

.dash-card--calc .dash-icon-wrap {
  background: rgba(232, 93, 44, 0.2);
  color: var(--nav-calc);
  border: 1px solid rgba(232, 93, 44, 0.55);
}
.dash-card--calc {
  border-color: rgba(232, 93, 44, 0.45);
}
.dash-card--team .dash-icon-wrap {
  background: rgba(125, 211, 252, 0.15);
  color: var(--nav-team);
  border: 1px solid rgba(125, 211, 252, 0.45);
}
.dash-card--team {
  border-color: rgba(125, 211, 252, 0.4);
}

/* —— Team Builder —— */
.tb-main {
  padding-top: 0.15rem;
}
.tb-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.tb-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.tb-upper {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(240px, 35fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.tb-team-bar {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  min-width: 0;
  container-type: inline-size;
  container-name: tb-team-bar;
}
.tb-upper .tb-analysis {
  position: sticky;
  top: 0;
  align-self: start;
}
.tb-upper .tb-team-bar .tb-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 0.55rem;
  width: 100%;
  max-width: none;
  align-items: start;
}
.tb-upper .tb-slots .tb-slot--collapsed.tb-slot--filled,
.tb-upper .tb-slots .tb-slot--collapsed.tb-slot--empty {
  flex: unset;
  max-width: none;
  min-width: 0;
  width: auto;
  cursor: pointer;
}
.tb-upper .tb-slots .tb-slot--expanded {
  /* Stay in the 3×2 grid cell (no full-row span); grow with edit content. */
  grid-column: auto;
  max-width: none;
  min-width: 0;
  cursor: default;
  align-self: stretch;
  overflow: visible;
}
.tb-upper .tb-slots .tb-slot--expanded.tb-slot--filled,
.tb-upper .tb-slots .tb-slot--expanded.tb-slot--empty {
  min-height: 0;
  height: auto;
}
.tb-upper .tb-slots .tb-slot--expanded .tb-slot-edit {
  /* Grow with content; only scroll on very short viewports. */
  max-height: none;
  overflow: visible;
}
@media (max-height: 700px) {
  .tb-upper .tb-slots .tb-slot--expanded .tb-slot-edit {
    max-height: min(72vh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}
/* Team slots: fit columns to available width (sidebar shrinks main column on desktop too). */
@container tb-team-bar (max-width: 22rem) {
  .tb-upper .tb-team-bar .tb-slots {
    grid-template-columns: 1fr;
  }
}
@container tb-team-bar (min-width: 22.01rem) and (max-width: 38rem) {
  .tb-upper .tb-team-bar .tb-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .tb-upper .tb-team-bar .tb-slots {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 641px) and (max-width: 960px) {
  .tb-upper .tb-team-bar .tb-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tb-main > .tb-saved {
  margin: 0 0 1.25rem;
}
.tb-slot-summary {
  margin-top: 0.35rem;
}
.tb-slot-ability {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}
.tb-slot-nature {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  text-align: center;
}
.tb-move-list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.3rem 0;
  margin: 0.25rem 0 0.4rem;
}
.tb-move-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.15rem 0.2rem;
  min-height: calc(18px + 0.3rem);
  box-sizing: border-box;
}
.tb-move-line-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}
.tb-move-type,
.tb-move-type-placeholder {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.tb-move-type-placeholder {
  display: block;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  box-sizing: border-box;
}
.tb-move-line--empty .tb-move-line-name {
  opacity: 0.5;
}
.tb-slot-stats {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.tb-stat-row {
  display: grid;
  grid-template-columns: 2rem 1fr 2.1rem;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
}
.tb-stat-lab {
  font-weight: 700;
  font-size: 0.68rem;
}
.tb-stat-bar-track {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: var(--bar-track-bg);
  overflow: hidden;
}
.tb-stat-bar-track .stat-build-bar-seg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 100%;
  display: block;
  border-radius: 1px;
  transition: width 0.15s ease, left 0.15s ease;
  opacity: 0.88;
}
.tb-stat-bar-track .stat-build-bar-boost {
  opacity: 1;
}
.tb-stat-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.72rem;
}
.tb-slot-edit {
  margin-top: 0.35rem;
  width: 100%;
}
.tb-kit {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.tb-kit-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.tb-kit-moves-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tb-kit-moves-section > .tb-kit-label {
  margin-bottom: 0;
}
.tb-kit-moves {
  display: grid;
  gap: 0.35rem;
}
.tb-select {
  width: 100%;
  font-size: 0.78rem;
  padding: 0.28rem 0.35rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}
.tb-kit-loading {
  margin: 0;
  font-size: 0.78rem;
}
.tb-move-select-wrap {
  position: relative;
  width: 100%;
}
.tb-move-select-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.78rem;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}
.tb-move-select-field:focus-within {
  border-color: color-mix(in srgb, var(--page-accent) 45%, var(--border));
}
.tb-move-select-icon-slot {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.tb-move-select-icon-slot .search-suggest-icon {
  width: 22px;
  height: 22px;
}
.tb-move-select-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
  padding: 0.12rem 0;
  outline: none;
}
.tb-move-select-input::placeholder {
  color: var(--muted);
  opacity: 0.85;
}
.tb-move-select-dd {
  z-index: 140;
  max-height: min(50vh, 320px);
  overflow: auto;
  width: 100%;
  min-width: 100%;
}
.tb-move-select-dd .search-suggest-row {
  width: 100%;
  box-sizing: border-box;
}
.tb-move-select-opt-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-kit-move {
  display: block;
}
.tb-slot--collapsed .tb-slot-head .tb-slot-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}
.tb-slot--expanded .tb-slot-head {
  margin-bottom: 0.15rem;
}
@media (max-width: 1100px) {
  .tb-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Flatten upper grid so saved teams can sit between roster and analysis */
  .tb-upper {
    display: contents;
    margin-bottom: 0;
  }

  .tb-team-bar {
    order: 1;
  }

  .tb-main > .tb-saved {
    order: 2;
    margin: 0;
  }

  .tb-upper .tb-analysis {
    order: 3;
    position: static;
    max-height: none;
  }

  .tb-workspace {
    order: 4;
  }
}
.tb-team-bar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.tb-team-bar-head .tb-section-title {
  margin: 0;
}
.tb-active-hint {
  margin: 0;
  font-size: 0.88rem;
}
.tb-team-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.tb-share-msg {
  font-size: 0.82rem;
  min-width: 4rem;
}
.tb-workspace {
  display: grid;
  grid-template-columns: minmax(200px, 220px) minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.tb-workspace--simple {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
}
.tb-workspace--roster {
  display: block;
}
@media (max-width: 1200px) {
  .tb-workspace {
    grid-template-columns: minmax(180px, 200px) minmax(0, 1fr);
  }
  .tb-workspace--simple {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .tb-workspace {
    grid-template-columns: 1fr;
  }
}
.tb-filters {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
  position: sticky;
  top: 0;
  align-self: start;
  overflow: visible;
  z-index: 2;
}
.tb-filters .search-suggest-wrap {
  position: relative;
}
.tb-filters .search-suggest-dd {
  z-index: 120;
}
.tb-filters-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
}
.tb-filter-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}
.tb-filter-block {
  margin-bottom: 0.85rem;
}
.tb-filter-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.tb-filter-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.85rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}
.tb-filter-active {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}
.tb-filter-clear {
  margin-top: 0.35rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
}
.tb-filters-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
}
.type-chips--compact {
  gap: 0.25rem;
}
.type-chips--compact .chip {
  padding: 0.2rem;
}
.type-chips--compact .type-icon {
  width: 22px;
  height: 22px;
}
.tb-picker {
  min-width: 0;
}
.tb-picker-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}
.tb-picker-head .tb-section-title {
  margin: 0;
}
.tb-picker-mega {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  white-space: nowrap;
}
.tb-slots:not(.tb-slots--bar) .tb-slot--empty {
  min-height: 11rem;
}
.tb-slots:not(.tb-slots--bar) .tb-slot--filled {
  min-height: 0;
  height: auto;
  max-height: none;
}
.tb-slot-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  gap: 0.15rem;
  overflow: hidden;
}
.tb-slot--empty .tb-slot-main {
  justify-content: center;
}
.tb-slot-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  flex-shrink: 0;
}
.tb-slot-head .tb-slot-thumb-link {
  flex-shrink: 0;
}
.tb-slot-head .tb-slot-thumb {
  max-width: 52px;
  max-height: 44px;
  margin: 0;
}
.tb-slot-meta {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.tb-slot-meta .tb-slot-name {
  display: block;
  text-align: left;
  font-size: 0.82rem;
}
.tb-slot-meta .tb-slot-types {
  justify-content: flex-start;
  margin-top: 0.15rem;
}
.tb-slot-build {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0.15rem 0 0.1rem;
}
.tb-slot-build .calc-sp-build {
  margin: 0;
}
.tb-slots .tb-slot-search {
  margin-top: auto;
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}
.tb-slots .tb-slot-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  text-decoration: none;
  display: block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-slot-thumb-link {
  display: block;
  text-align: center;
}
.tb-slots .tb-slot-thumb {
  max-width: 80px;
  max-height: 56px;
  margin: 0 auto;
}
.tb-slots .tb-slot-thumb--empty {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
.tb-slots .tb-slot-body {
  text-align: center;
  font-size: 0.82rem;
  margin: 0;
}
.tb-picker-search {
  flex: 1 1 12rem;
  min-width: 10rem;
  font-size: 0.9rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}
.tb-picker-meta {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
}
.tb-picker-scroll {
  max-height: min(62vh, 640px);
  overflow: auto;
}
.tb-picker-pager {
  margin-top: 0.65rem;
}
.tb-picker-row {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 0.15rem 0;
}
.tb-picker-row:hover {
  background: color-mix(in srgb, var(--page-accent) 10%, var(--panel2));
}
.tb-picker-row--on-team {
  background: color-mix(in srgb, var(--page-accent) 14%, transparent);
  outline: 1px solid color-mix(in srgb, var(--page-accent) 45%, var(--border));
}
.tb-picker-badge {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--page-accent);
  vertical-align: middle;
}
.tb-picker-empty {
  padding: 1rem 0;
}
.tb-roster {
  min-width: 0;
  overflow: visible;
}
.tb-section-title {
  margin: 0 0 0.65rem;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--page-accent) 40%, var(--text));
}
.tb-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 0.75rem;
  overflow: visible;
  align-items: stretch;
}
.tb-slots--bar {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 900px) {
  .tb-slots--bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 520px) {
  .tb-slots:not(.tb-slots--bar):not(.tb-upper .tb-slots) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tb-slot {
  position: relative;
  z-index: 1;
  overflow: visible;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 168px;
}
.tb-slots--bar .tb-slot {
  height: auto;
  max-height: none;
  min-height: 0;
  padding: 0.4rem;
  min-width: 0;
}
.tb-slots--bar .tb-slot-build {
  display: none;
}
.tb-slots--bar .tb-slot--empty {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
}
.tb-slots--bar .tb-slot--filled {
  padding: 0.35rem;
  min-height: 7.5rem;
}
.tb-slots--bar .tb-slot--filled.tb-slot--expanded {
  min-height: 0;
}
.tb-slot--active {
  border-color: color-mix(in srgb, var(--page-accent) 65%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--page-accent) 28%, transparent);
}
.tb-slot-num {
  position: absolute;
  top: 0.3rem;
  left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  z-index: 2;
}
.tb-slot-add {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--muted);
  margin: 0.5rem 0;
}
.tb-slot-thumb {
  width: 100%;
  max-width: 72px;
  max-height: 64px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.tb-slot-thumb--empty {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0.85rem auto 0.25rem;
}
.tb-slot-mini {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.2rem 0.25rem;
}
.tb-slots--bar .tb-slot-types {
  justify-content: center;
  margin: 0;
}
.tb-slots--bar .tb-slot-types .type-icon {
  width: 18px;
  height: 18px;
}
.tb-slot-select {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  min-height: 100%;
}
.tb-slots--bar .tb-slot-clear {
  top: 0.2rem;
  right: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.95rem;
}
.tb-slot:focus-within {
  z-index: 50;
}
.tb-slot--empty {
  border-style: dashed;
  opacity: 0.92;
}
.tb-slot-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.tb-slot-clear {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 3;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}
.tb-slot-clear:hover {
  color: var(--text);
  border-color: var(--page-accent);
}
.tb-slot .species-art-card {
  max-width: 100%;
  margin: 0 auto;
}
.tb-slot .tb-slot-sprite,
.tb-slot .species-art-img.tb-slot-sprite {
  width: 100%;
  max-width: 120px;
  max-height: 100px;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  padding: 0.25rem;
}
.tb-slot-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  text-decoration: none;
}
.tb-slot-name:hover {
  color: var(--page-accent);
}
.tb-slot-types {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0;
}
.tb-slots .tb-slot-name {
  margin: 0;
}
.tb-slot-search {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
}
.tb-slot .search-suggest-wrap {
  position: relative;
  margin-top: auto;
  width: 100%;
}
.tb-slot-edit > .search-suggest-wrap {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
}
.tb-slot-edit > .search-suggest-wrap::before {
  content: "Replace Pokémon";
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.tb-slot-edit > .search-suggest-wrap .tb-slot-search {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--page-accent) 40%, var(--border));
  background: color-mix(in srgb, var(--panel2) 55%, var(--bg));
  font-size: 0.8rem;
  padding: 0.45rem 0.55rem;
}
.tb-slot-edit > .search-suggest-wrap .tb-slot-search:focus {
  border-style: solid;
  border-color: color-mix(in srgb, var(--page-accent) 55%, var(--border));
  background: var(--panel2);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--page-accent) 22%, transparent);
}
.tb-slot--empty.tb-slot--expanded > .search-suggest-wrap {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
}
.tb-slot--empty.tb-slot--expanded > .search-suggest-wrap::before {
  content: "Search Pokémon";
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.tb-slot--empty.tb-slot--expanded > .search-suggest-wrap .tb-slot-search {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--page-accent) 40%, var(--border));
  background: color-mix(in srgb, var(--panel2) 55%, var(--bg));
  font-size: 0.8rem;
  padding: 0.45rem 0.55rem;
}
.tb-slot .search-suggest-dd {
  z-index: 120;
  min-width: 100%;
  width: max(100%, 14rem);
  max-height: min(40vh, 320px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65);
}
.tb-slot .search-suggest-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.tb-analysis {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  min-width: 0;
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  overflow: auto;
}
.tb-analysis-loading {
  margin: 0;
  font-size: 0.88rem;
}
.tb-summary-grid {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.tb-summary-card {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
}
.tb-summary-card h3 {
  margin: 0;
  font-size: 0.95rem;
}
.tb-summary-card--warn {
  border-color: color-mix(in srgb, #e85d2c 45%, var(--border));
  background: color-mix(in srgb, #e85d2c 8%, var(--panel2));
}
.tb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.tb-chip-row .tb-type-cell {
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
}
.tb-panels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.tb-panel h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.tb-panel-desc {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
}
.tb-panel--defense {
  min-width: 0;
}
.tb-def-matrix-wrap {
  overflow-x: auto;
  margin-top: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 55%, var(--panel2));
}
.tb-def-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}
.tb-def-matrix th,
.tb-def-matrix td {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  padding: 0.18rem 0.12rem;
  text-align: center;
  vertical-align: middle;
}
.tb-def-matrix thead th {
  background: var(--table-header-bg);
}
.tb-def-corner {
  width: 1.75rem;
  min-width: 1.75rem;
}
.tb-def-type {
  width: 1.75rem;
  min-width: 1.75rem;
}
.tb-def-type-icon {
  display: block;
  margin: 0 auto;
}
.tb-def-slot-head {
  min-width: 2rem;
  padding: 0.2rem 0.1rem;
  background: var(--panel2);
}
.tb-def-slot-head img {
  display: block;
  margin: 0 auto;
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}
.tb-def-slot-empty,
.tb-def-slot-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}
.tb-def-cell {
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.tb-def-cell--empty {
  color: var(--muted);
  font-weight: 500;
  background: rgba(0, 0, 0, 0.15);
}
.tb-def-cell--weak {
  color: #ffb4a8;
  background: color-mix(in srgb, #e85d2c 28%, transparent);
}
.tb-def-cell--resist {
  color: #9ee8b8;
  background: color-mix(in srgb, #3ecf8e 22%, transparent);
}
.tb-def-cell--neutral {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  background: rgba(0, 0, 0, 0.12);
}
.tb-def-sum-head {
  min-width: 1.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--panel2);
}
.tb-def-sum-head--weak {
  color: #ff8a7a;
}
.tb-def-sum-head--resist {
  color: #8fd4a8;
}
.tb-def-sum-head--bal {
  color: #8ec8ff;
}
.tb-def-sum {
  font-weight: 800;
  font-size: 0.72rem;
}
.tb-def-sum--weak {
  color: #ff8a7a;
}
.tb-def-sum--resist {
  color: #8fd4a8;
}
.tb-def-sum--pos {
  color: #9ee8b8;
}
.tb-def-sum--neg {
  color: #ff8a7a;
}
.tb-def-row--alert .tb-def-type {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #e85d2c 75%, transparent);
}

/* Team defense matrix — readable tints on light backgrounds */
html[data-theme="light"] .tb-def-matrix-wrap {
  background: var(--panel);
}

html[data-theme="light"] .tb-def-cell--weak {
  color: #9a3412;
  background: color-mix(in srgb, #dc2626 22%, #ffffff);
}

html[data-theme="light"] .tb-def-cell--resist {
  color: #14532d;
  background: color-mix(in srgb, #16a34a 20%, #ffffff);
}

html[data-theme="light"] .tb-def-cell--neutral {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 14%, var(--panel2));
}

html[data-theme="light"] .tb-def-cell--empty {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, var(--panel2));
}

html[data-theme="light"] .tb-def-sum-head--weak,
html[data-theme="light"] .tb-def-sum--weak {
  color: #b91c1c;
}

html[data-theme="light"] .tb-def-sum-head--resist,
html[data-theme="light"] .tb-def-sum--resist {
  color: #15803d;
}

html[data-theme="light"] .tb-def-sum-head--bal {
  color: #1d4ed8;
}

html[data-theme="light"] .tb-def-sum--pos {
  color: #15803d;
}

html[data-theme="light"] .tb-def-sum--neg {
  color: #b91c1c;
}

html[data-theme="light"] .tb-def-slot-empty,
html[data-theme="light"] .tb-def-slot-fallback {
  background: var(--panel2);
  color: var(--muted);
}

html[data-theme="light"] .tb-num--weak {
  color: #b91c1c;
}

html[data-theme="light"] .tb-num--resist {
  color: #0369a1;
}

html[data-theme="light"] .tb-num--immune {
  color: #6d28d9;
}

html[data-theme="light"] .tb-chip-row .tb-type-cell {
  background: var(--panel2);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="light"] .tb-row--alert {
  background: color-mix(in srgb, #dc2626 10%, var(--panel));
}

html[data-theme="light"] .tb-def-row--alert .tb-def-type {
  box-shadow: inset 3px 0 0 #dc2626;
}

.tb-table-wrap {
  overflow-x: auto;
  margin-top: 0.35rem;
}
.tb-table {
  font-size: 0.82rem;
}
.tb-type-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: capitalize;
  white-space: nowrap;
}
.tb-type-icon {
  flex-shrink: 0;
}
.tb-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tb-num--weak {
  color: #ff8a7a;
  font-weight: 700;
}
.tb-num--resist {
  color: #8fd4ff;
}
.tb-num--immune {
  color: #b8a0ff;
}
.tb-row--alert {
  background: color-mix(in srgb, #e85d2c 10%, transparent);
}
.tb-bar {
  min-width: 88px;
}
.tb-mix-bar {
  display: flex;
  height: 1.1rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}
.tb-mix-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 0;
}
.tb-mix-seg--weak {
  background: #c94a3a;
  color: #fff;
}
.tb-mix-seg--neutral {
  background: #4a5568;
  color: #e8eaef;
}
.tb-mix-seg--resist {
  background: #3a6ea5;
  color: #fff;
}
.tb-mix-seg--immune {
  background: #6b4f9e;
  color: #fff;
}
.tb-off--super {
  background: color-mix(in srgb, #9fe067 12%, transparent);
}
.tb-off--resist {
  opacity: 0.85;
}
.tb-empty-hint {
  margin: 0;
  font-size: 0.9rem;
}
.tb-actions-row {
  margin-top: 0.75rem;
}
.tb-saved {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.tb-saved-empty {
  margin: 0;
  font-size: 0.88rem;
}
.tb-saved-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.tb-saved-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
  min-width: 0;
}
.tb-saved-slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
  align-items: end;
}
.tb-saved-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
}
.tb-saved-slot-thumb {
  width: 100%;
  max-height: 52px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  background: var(--sprite-plate-bg);
}
.tb-saved-slot--empty {
  width: 100%;
  aspect-ratio: 1;
  max-height: 52px;
  border-radius: 6px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, var(--panel2));
}
.tb-saved-reg-badge {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--warn, #c97a2a);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--warn, #c97a2a) 12%, transparent);
}
.tb-saved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.tb-saved-actions .btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

@media (max-width: 820px) {
  .rotom-messages {
    flex: 1;
    min-height: 0;
    max-height: none;
  }
}

/* Mobile gutter enforcement (after all rules; pairs with index.html ?v= cache bust) */
@media (max-width: 900px) {
  .topnav {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  #app.app-main > main,
  main.catalog-list-main,
  main.home-main,
  main.compare-hub-main {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  main.catalog-list-main > .catalog-sticky-panel,
  .catalog-list-main > .catalog-sticky-panel {
    margin-left: calc(-1 * var(--page-gutter)) !important;
    margin-right: calc(-1 * var(--page-gutter)) !important;
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }
}