/* Simulator layout */
.sim-team-block { margin-bottom: 1rem; }
.sim-team-header { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 12px; border-radius: var(--radius-md); margin-bottom: 8px; display: inline-block; }
.team-a-header { background: #E6F1FB; color: #185FA5; }
.team-b-header { background: #FAECE7; color: #993C1D; }
.sim-active-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }

/* ───────────────────────────────────────────────────────────── */
/* Combat Simulator — side-by-side Team A | Team B layout         */
/* Desktop (≥1280px): teams sit horizontally, 4 active slots in   */
/* a single row across the screen. Mobile (<1280px): falls back   */
/* to the original vertical stacked layout.                       */
/* ───────────────────────────────────────────────────────────── */

/* Sim teams row breaks out of the 720px .app container at desktop sizes.
   Uses 100vw + calc() centering trick to span the full viewport (capped at 1280px)
   while the rest of the app (header, tabs) stays at 720px centered. */
/* Break-out trick: .sim-teams-row expands beyond its 720px .app parent using negative
   horizontal margins. Each side gets -280px so the block is effectively 720+560 = 1280px wide,
   centered (since .app is centered, the negative margins pull symmetrically). */
.sim-teams-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
  margin-left: -280px;
  margin-right: -280px;
}
/* Field-conditions card breaks out to the same ~1280px width as the teams row. */
.sim-field-card {
  margin-left: -280px;
  margin-right: -280px;
}
.sim-teams-row > .sim-team-block { min-width: 0; }

/* Active slots inside each team — 2 columns side by side */
.sim-teams-row .sim-active-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Compress SP sliders to a 3-col grid in narrower team columns */
.sim-teams-row .sim-slot .sp-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Team field-condition pills wrap to half-width per pill */

/* ─── Wider Pokémon dropdown in Combat Simulator ───────────────────────
   The Pokémon search dropdown is normally constrained to the search input width
   (~280px per slot). We widen it to spread across both active slots in its team,
   and direction depends on slot position:
     - aa1 (Team A Active 1): opens rightward, covering aa2's area too
     - aa2 (Team A Active 2): opens leftward, covering aa1's area too
     - ab1 (Team B Active 1): opens rightward, covering ab2's area too
     - ab2 (Team B Active 2): opens leftward, covering ab1's area too */

/* Active 1 of each team: Pokémon dropdown extends to the right */
#sim-aa1-pokemon-list,
#sim-ab1-pokemon-list {
  left: 0;
  right: auto;
  width: calc(200% + 12px);  /* covers own slot + sibling slot + the 10-12px gap */
  max-width: none;
  max-height: 360px;
  z-index: 200;
}

/* Active 2 of each team: Pokémon dropdown extends to the left */
#sim-aa2-pokemon-list,
#sim-ab2-pokemon-list {
  left: auto;
  right: 0;
  width: calc(200% + 12px);
  max-width: none;
  max-height: 360px;
  z-index: 200;
}

.sim-teams-row .team-cond-toggle {
  flex: 1 1 calc(33% - 6px);
  min-width: 100px;
}

/* ─── Damage Calculator 3-column breakout ──────────────────────────────
   Attacker | Weather&Terrain (narrow) | Defender, spanning up to 1280px
   using the same negative-margin trick as the simulator. Collapses to a
   single stacked column below 1099px. */
/* ─── Damage Calculator 2-column breakout ──────────────────────────────
   Pokémon A | Pokémon B, spanning up to 1280px using the same negative-margin
   trick as the simulator. Weather & terrain now live in their own card above.
   Collapses to a single stacked column below 1099px. */
.calc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-left: -280px;
  margin-right: -280px;
  margin-bottom: 20px;
}
.calc-cols > .card { margin: 0; min-width: 0; }

/* Weather & terrain card (full width, above the two columns) */
.weather-terrain-card {
  margin-left: -280px;
  margin-right: -280px;
}
.weather-terrain-card { position: relative; }
.wt-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-right: 48px; /* room for the absolutely-positioned reset button */
}
.wt-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  justify-content: center;
}
.wt-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.wt-divider {
  display: none;
}
.wt-bar .calc-reset-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); flex-shrink: 0; }
.wt-bar .calc-reset-btn:hover { transform: translateY(-50%) rotate(-90deg); }
.wt-bar .calc-reset-btn:active { transform: translateY(-50%) rotate(-180deg) scale(0.95); }
.calc-reset-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.calc-reset-btn:hover { background: var(--bg-secondary); color: var(--text); transform: rotate(-90deg); }
.calc-reset-btn:active { transform: rotate(-180deg) scale(0.95); }

/* Below 1280px: no room to break out — full width at 720px, columns stack. */
@media (max-width: 1099px) {
  .calc-cols {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
  .weather-terrain-card {
    margin-left: 0;
    margin-right: 0;
  }
  .battle-bar {
    margin-left: 0;
    margin-right: 0;
  }
  .wt-divider { display: none; }
  .wt-group { flex: 1 1 100%; }
}

/* Mobile fallback: revert to single-column stacked layout */
/* Below 1280px viewport: no room to break out, teams stack vertically at 720px width */
@media (max-width: 1099px) {
  .sim-teams-row {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
  .sim-field-card {
    margin-left: 0;
    margin-right: 0;
  }
  .sim-teams-row .sim-active-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .sim-teams-row .sim-active-row {
    grid-template-columns: 1fr;
  }
}

/* ─── Combat Simulator centering ──────────────────────────────────── */

/* Center the team header row (TEAM A label + Fetch from Team Builder button) */
.sim-teams-row .sim-team-header-row {
  justify-content: center;
}

/* Center the Global Field Conditions card and Simulate button within the wider parent. */
/* Speed card breaks out beyond .app's 720px using symmetric negative margins (same trick
   as the Combat Sim teams row), giving the 4 slots more breathing room on desktop. Capped
   to the viewport so it never overflows, and collapsed back to 720px below 1100px. */
body.tab-speed-active #tab-speed > .card {
  width: calc(720px + 240px);   /* ~960px: 120px extra on each side */
  max-width: calc(100vw - 2.5rem);
  margin-left: -120px;
  margin-right: -120px;
}
@media (max-width: 1099px) {
  body.tab-speed-active #tab-speed > .card {
    width: auto;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}
body.tab-speed-active #tab-speed > .calc-btn {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
body.tab-speed-active #tab-speed > #speed-result {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.sim-slot { background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; min-width: 0; }
.sim-slot.team-a { border-left: 2px solid #378ADD; }
.sim-slot.team-b { border-left: 2px solid #D85A30; }
.sim-slot-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Gender chip slot inside sim slot titles. Compact ♂/♀ buttons sit to the right of the
   "Active 1" / "Bench 1" label. Smaller than the Team Builder header chips since the
   sim slots are tight. */
.sim-slot-gender {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
/* Mega toggle inline in the sim slot title row (matches the damage-calc pattern: capsule sits
   next to the type badges, adding no vertical height to the card body). */
.mega-toggle-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.mega-toggle-inline .mega-option { margin: 0; }
.sim-slot-gender .tb-gender {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 14px;
}
.bench-toggle-btn { width: 100%; padding: 8px; background: transparent; border: 0.5px dashed var(--border); border-radius: var(--radius-md); font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; font-family: inherit; margin-bottom: 8px; }
.bench-toggle-btn:hover { background: var(--bg-secondary); color: var(--text); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --bg-secondary: #f7f7f5;
  --bg-tertiary: #f0efec;
  --text: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-tertiary: #a0a0a0;
  --border: rgba(0,0,0,0.1);
  --border-strong: rgba(0,0,0,0.2);
  --radius-md: 8px;
  --radius-lg: 12px;
  --team-a: #378ADD;
  --team-b: #D85A30;
  --danger-bg: #FCEBEB;
  --danger-text: #A32D2D;
  --warning-bg: #FAEEDA;
  --warning-text: #854F0B;
  --success-bg: #EAF3DE;
  --success-text: #3B6D11;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2e2e2e;
    --text: #f0f0f0;
    --text-secondary: #a0a0a0;
    --text-tertiary: #666;
    --border: rgba(255,255,255,0.1);
    --border-strong: rgba(255,255,255,0.2);
    --danger-bg: #3a1515;
    --danger-text: #f09595;
    --warning-bg: #3a2a0a;
    --warning-text: #FAC775;
    --success-bg: #1a2e0a;
    --success-text: #97C459;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-tertiary);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}


.header { margin-bottom: 1.5rem; }
.header h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; color: var(--text); }
.header p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.tabs {
  display: flex;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
  width: fit-content;
  background: var(--bg);
}
.tab {
  padding: 8px 20px;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  transition: all 0.15s;
  font-family: inherit;
}
.tab.active { background: var(--bg-secondary); color: var(--text); font-weight: 500; }
.tab:hover:not(.active) { color: var(--text); background: var(--bg-secondary); }

/* Combat Simulation tab — dimmed while the feature is a work in progress. Still hoverable so
   the WIP toast can fire on click, but visually signalled as not-yet-available. */
.tab-wip { opacity: 0.5; cursor: not-allowed; }
.tab-wip:hover { opacity: 0.65; }
.tab-wip-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  margin-left: 5px;
  border-radius: 8px;
  background: var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
/* WIP toast notice — slides in when the disabled Combat Simulation tab is clicked. */
.wip-notice {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.wip-notice.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wip-notice-icon { font-size: 22px; }
.wip-notice-title { font-size: 13px; font-weight: 600; color: var(--text); }
.wip-notice-sub { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

.section { display: none; }
.section.active { display: block; }

.card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.card-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.card-title-note {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary);
  font-weight: 400;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; align-items: start; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--text-secondary); }
/* Speed calc — "Pokémon" label row with a live current-speed value right-aligned.
   Same font-size as the label; the number is slightly brighter so it reads as data. */
.sc-poke-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sc-spe-inline {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.sc-spe-inline:empty { display: none; }

select, input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
select:focus, input:focus { outline: none; border-color: var(--border-strong); }

.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-item { display: flex; flex-direction: column; gap: 4px; }
.sp-item label { font-size: 11px; color: var(--text-secondary); }
.sp-item span { font-size: 11px; color: var(--text); font-weight: 500; text-align: right; }
input[type="range"] { width: 100%; accent-color: var(--text); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 13px; }
.toggle { position: relative; width: 32px; height: 18px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 9px; cursor: pointer; transition: 0.2s; }
.toggle-slider:before { content: ''; position: absolute; height: 12px; width: 12px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
input:checked + .toggle-slider { background: var(--text); }
input:checked + .toggle-slider:before { transform: translateX(14px); }

.calc-btn {
  width: 100%;
  padding: 11px;
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.calc-btn:hover { background: var(--bg-secondary); }
.calc-btn:active { transform: scale(0.99); }

.result-box {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-top: 1rem;
  display: none;
}
.result-box.visible { display: block; }

/* ─── Battle status bar (A vs B, facing each other) ─────────────────── */
.battle-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 18px;
  margin-bottom: 16px;
  margin-left: -280px;
  margin-right: -280px;
}
.battle-side { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.battle-side-a { flex-direction: row; }
.battle-side-b { flex-direction: row; }
.battle-side-b .battle-info { text-align: right; }
.battle-sprite {
  width: 72px; height: 72px; object-fit: contain; flex-shrink: 0;
  image-rendering: pixelated;
  align-self: center;
}
.battle-side-b .battle-sprite { transform: scaleX(-1); }
.battle-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.battle-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-hp { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.battle-hp-track {
  position: relative;
  height: 12px;
  background: #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
}
.battle-hp-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, #4cc964, #6fdc82);
  border-radius: 6px;
  transition: width 0.45s ease;
}
.battle-hp-fill.low  { background: linear-gradient(90deg, #e8b53c, #f0c95a); }
.battle-hp-fill.crit { background: linear-gradient(90deg, #e54848, #f06a6a); }
.battle-hp-band {
  position: absolute; top: 0; height: 100%;
  background: rgba(229,72,72,0.45);
  transition: width 0.45s ease, left 0.45s ease;
}
/* Multi-hit segment dividers — thin vertical ticks marking each strike boundary. */
.battle-hp-segs { position: absolute; inset: 0; pointer-events: none; }
.battle-hp-seg {
  position: absolute; top: 0; height: 100%; width: 2px;
  background: rgba(0,0,0,0.55);
  transform: translateX(-1px);
  transition: left 0.45s ease;
}
/* Projection ticks (hits beyond the selected count) — lighter / dashed, sit on the green. */
.battle-hp-seg-proj {
  width: 0; background: transparent;
  border-left: 2px dashed rgba(255,255,255,0.7);
}
/* Pokémon B faces left, so mirror its whole HP track: the fill still uses plain
   left:0 logic but visually drains from the right toward center. */
.battle-side-b .battle-hp-track { transform: scaleX(-1); }
.battle-hp-nums {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.battle-side-b .battle-hp-nums { flex-direction: row-reverse; }
.battle-center { display: flex; align-items: center; justify-content: center; }
.battle-vs { font-size: 13px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 1px; }

/* Per-side attack summary (under each HP bar). */
.battle-summary {
  position: relative;
  margin-top: 6px;
  font-size: 12px;
  min-height: 20px;
  display: flex;
  align-items: center;
  overflow: visible;
}
.battle-summary-b { justify-content: flex-end; }
.battle-summary-empty { color: var(--text-tertiary); font-size: 11px; }
.battle-summary-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: default;
}
.battle-summary-b .battle-summary-main { justify-content: flex-end; }
.bs-move { font-weight: 600; color: var(--text); }
.bs-dmg  { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bs-pct  { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.bs-status { color: var(--text-tertiary); font-style: italic; }
.bs-ko { font-size: 11px; padding: 2px 8px; }
.battle-summary.has-tip .battle-summary-main::after {
  content: 'ⓘ';
  font-size: 10px;
  color: var(--text-tertiary);
  cursor: help;
}
/* Hover tooltip with the modifier math. */
.battle-summary-tip {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 70;
  min-width: 220px;
  max-width: 320px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 10px 12px;
  font-size: 12px;
}
.battle-summary-b .battle-summary-tip { left: auto; right: 0; }
.battle-summary.has-tip:hover .battle-summary-tip { display: block; }
.bs-tip-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); margin-bottom: 6px; }
.battle-summary-tip .mod-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }

@media (max-width: 700px) {
  .battle-sprite { width: 52px; height: 52px; }
  .battle-name { font-size: 13px; }
}
.result-main { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.result-pct { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.result-rolls { font-size: 11px; color: var(--text-tertiary); font-family: monospace; line-height: 1.8; word-break: break-all; }
.rolls-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; margin: 8px 0; overflow: hidden; }
.rolls-bar-fill { height: 100%; border-radius: 2px; background: var(--text-secondary); transition: width 0.4s; }
.ko-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; margin-top: 8px; }
.ko-1 { background: var(--danger-bg); color: var(--danger-text); }
.ko-2 { background: var(--warning-bg); color: var(--warning-text); }
.ko-safe { background: var(--success-bg); color: var(--success-text); }

/* Field conditions: two-column layout */
.field-cond-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
/* Simulator variant: Weather | Terrain on row 1, Speed modifiers full-width on row 2. */
.field-cond-grid-3 {
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 18px;
}
.field-cond-grid-3 .field-cond-col-speed {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 0.5px solid var(--border);
}
@media (max-width: 560px) {
  .field-cond-grid { grid-template-columns: 1fr; gap: 14px; }
  .field-cond-grid-3 { grid-template-columns: 1fr; }
}
.field-cond-col { display: flex; flex-direction: column; }
.field-cond-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.cond-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cond-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-secondary);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.cond-radio input { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; margin: 0; cursor: pointer; }
.cond-radio input:checked { border-color: var(--text); background: var(--text); box-shadow: inset 0 0 0 2px var(--bg); }
.cond-radio:has(input:checked) { color: var(--text); background: var(--bg); border-color: var(--border-strong); font-weight: 500; }

/* Sturdy / Focus Sash — defender survived at 1 HP. Distinct from ko-safe
   to signal "would have died, but didn't" rather than "wasn't close". */
.ko-survive {
  position: relative;
  background: #EAF3FA;
  color: #185FA5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (prefers-color-scheme: dark) {
  .ko-survive { background: #142a3d; color: #9ec9ea; }
}

/* Type-change abilities (Pixilate/Aerilate/Liquid Voice/etc.) — purple to signal "transformed". */
.ko-typechange {
  position: relative;
  background: #F1EAFA;
  color: #5A2A9A;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}
@media (prefers-color-scheme: dark) {
  .ko-typechange { background: #2a1b3d; color: #c7a8ea; }
}

/* Move failed / blocked — neutral grey, signals "no calculation, didn't happen". */
.ko-blocked {
  position: relative;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ko-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(24, 95, 165, 0.18);
  color: inherit;
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  font-family: Georgia, serif;
  cursor: help;
  line-height: 1;
}
.ko-survive[data-tip]:hover::after,
.ko-survive[data-tip]:focus-within::after,
.ko-typechange[data-tip]:hover::after,
.ko-typechange[data-tip]:focus-within::after,
.ko-blocked[data-tip]:hover::after,
.ko-blocked[data-tip]:focus-within::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  max-width: 320px;
  width: max-content;
  padding: 8px 10px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  pointer-events: none;
}
.ko-survive[data-tip]:hover::before,
.ko-survive[data-tip]:focus-within::before,
.ko-typechange[data-tip]:hover::before,
.ko-typechange[data-tip]:focus-within::before,
.ko-blocked[data-tip]:hover::before,
.ko-blocked[data-tip]:focus-within::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 14px;
  z-index: 11;
  border: 5px solid transparent;
  border-bottom-color: var(--text);
  pointer-events: none;
}

/* Speed checker */
.speed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1rem; }
.speed-slot {
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--bg);
}
.speed-slot.team-a { border-left: 2px solid var(--team-a); }
.speed-slot.team-b { border-left: 2px solid var(--team-b); }
.speed-slot-title { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.slot-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.slot-field label { font-size: 11px; color: var(--text-secondary); }
.sp-val { font-size: 11px; color: var(--text-secondary); }
.slot-checks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.slot-check { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.slot-check input { width: 13px; height: 13px; cursor: pointer; accent-color: var(--text); }

.speed-result { margin-top: 1rem; display: none; }
.speed-result.visible { display: block; }
.result-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.turn-order { display: flex; flex-direction: column; gap: 6px; }
.turn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border);
  background: var(--bg);
}
.turn-pos { font-size: 18px; font-weight: 500; color: var(--text-tertiary); min-width: 24px; }
.turn-name { font-size: 14px; font-weight: 500; flex: 1; }
.turn-speed { font-size: 12px; color: var(--text-secondary); font-family: monospace; white-space: nowrap; }
.turn-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 500; }
.tag-a { background: #E6F1FB; color: #185FA5; }
.tag-b { background: #FAECE7; color: #993C1D; }
.tag-priority { background: var(--warning-bg); color: var(--warning-text); }
.tag-tr { background: #E6F1FB; color: #185FA5; }
.tag-tw { background: var(--success-bg); color: var(--success-text); }
.tag-ability { background: #E8DFFA; color: #5C2D91; }
.tag-para { background: var(--danger-bg); color: var(--danger-text); }
.tag-sleep { background: #C7D2FE; color: #3730A3; }
/* Burn — warm orange/red. Halves physical Atk. */
.tag-burn { background: #FED7AA; color: #9A3412; }
/* Regular poison — purple. */
.tag-poison { background: #E9D5FF; color: #6B21A8; }
/* Toxic / badly poisoned — darker, more saturated purple to convey severity. */
.tag-toxic { background: #C084FC; color: #4C1D95; }
/* Freeze — ice blue. */
.tag-freeze { background: #BAE6FD; color: #075985; }
.tag-quash { background: #D4D4D8; color: #3F3F46; }
.tag-silenced { background: #475569; color: #E2E8F0; }
.tag-unburden { background: #DBEAFE; color: #1E40AF; }
.tag-corrosion { background: #E9D5FF; color: #6B21A8; }
.tag-magicbounce { background: #FCE7F3; color: #9D174D; }
.tag-scrappy { background: #FED7AA; color: #9A3412; }
/* Quick Feet — Speed ×1.5 while statused. Lime green to convey rapid movement,
   visually distinct from Unburden (blue) which is also a speed-boost passive. */
.tag-quickfeet { background: #BBF7D0; color: #166534; }
/* Weather-speed abilities — Chlorophyll/Swift Swim/Sand Rush/Slush Rush. Amber/gold tone
   distinct from Quick Feet (lime) and Unburden (blue). Same color regardless of which
   weather since they're conceptually the same family of "speed doubled in conditions". */
.tag-weatherspe { background: #FEF3C7; color: #92400E; }
/* Stalwart / Propeller Tail — bypassed redirection. Cool steel/silver tone conveying
   the "piercing through redirection" theme. Distinct from other ability badges. */
.tag-bypass-redir { background: #CBD5E1; color: #334155; }
/* Powder-immunity bypass — Grass-type / Overcoat / Safety Goggles ignored Rage Powder
   redirection. Warm goldenrod tone, distinct from Stalwart's cool steel-gray. */
.tag-bypass-powder { background: #FDE68A; color: #78350F; }
/* Soundproof — passive immunity to sound moves. Muted teal/cyan, suggests dampening. */
.tag-soundproof { background: #CCFBF1; color: #115E59; }
/* Bulletproof — passive immunity to ball/bomb moves. Steel-blue defensive feel. */
.tag-bulletproof { background: #DBEAFE; color: #1E3A8A; }
/* Absorb abilities — Water/Volt Absorb, Flash Fire, Motor Drive, Lightning Rod,
   Storm Drain, Sap Sipper. Soft green to evoke "absorbed energy / heal / boost". */
.tag-absorb { background: #DCFCE7; color: #14532D; }
/* Flash Fire when the ×1.5 Fire boost is currently active on this slot — deeper
   green + bold to signal an active runtime effect (vs the passive base badge). */
.tag-absorb-active { background: #16A34A; color: #FFFFFF; font-weight: 600; }
/* Sturdy / Focus Sash — passive 1-HP survival from full HP. Defensive amber tone,
   shown next to the defender's HP label on damage event cards so the user knows
   this Pokémon has the safety net (even when this specific hit didn't trigger it). */
.tag-sturdy { background: #FEF3C7; color: #78350F; }
/* Purifying Salt — total status immunity + ×0.5 Ghost damage. Crystalline lilac
   to evoke "salt / cleansing" feel; distinct from absorb-green. */
.tag-purifyingsalt { background: #EDE9FE; color: #5B21B6; }
/* Disguise — Mimikyu's "first-hit absorber". Intact: bright pink (the disguise's
   colour). Broken: muted gray to signal the safety net is spent. */
.tag-disguise { background: #FBCFE8; color: #831843; }
.tag-disguise-broken { background: #E5E7EB; color: #4B5563; }
/* Stat changes — surfaces active stat stages on the slot (drops or boosts). Muted
   orange to signal "altered state" without competing with status/ability badges. */
.tag-statdrops { background: #FFEDD5; color: #9A3412; }
.tag-levitate { background: #E0F2FE; color: #0369A1; }
.sim-event-immune { color: var(--text-secondary); }
.sim-event-protect { color: var(--text-secondary); }
.priority-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 10px;
  padding: 8px 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  line-height: 1.6;
}

/* AI trainer */
.quick-prompts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.quick-btn {
  padding: 5px 12px;
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
  font-family: inherit;
}
.quick-btn:hover { color: var(--text); background: var(--bg-secondary); border-color: var(--border-strong); }

.chat-messages {
  min-height: 300px;
  max-height: 420px;
  overflow-y: auto;
  padding: 1rem;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.ai { align-self: flex-start; }
.msg-bubble {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  border: 0.5px solid var(--border);
}
.msg.user .msg-bubble { background: var(--bg-secondary); }
.msg-label { font-size: 11px; color: var(--text-tertiary); padding: 0 4px; }

.rate-info { font-size: 11px; color: var(--text-tertiary); margin-bottom: 6px; text-align: right; }

.chat-input-row { display: flex; gap: 8px; }
.chat-input { flex: 1; padding: 9px 12px; }
.chat-send {
  padding: 9px 18px;
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.chat-send:hover { background: var(--bg-secondary); }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.typing { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); animation: bounce 1.2s infinite; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

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

/* Searchable dropdown */
.search-wrap { position: relative; }

/* Calc Pokémon row: search bar + gender chip side by side. */
.poke-search-row { display: flex; align-items: center; gap: 8px; }
.poke-search-row .search-wrap { flex: 1; min-width: 0; }
.calc-gender { flex-shrink: 0; display: flex; align-items: center; min-height: 32px; }
.calc-gender:empty { display: none; }
.search-input { width: 100%; padding: 7px 10px; font-size: 13px; background: var(--bg-secondary); border: 0.5px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-family: inherit; }
.search-input:focus { outline: none; border-color: var(--border-strong); }
.dropdown-list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: var(--radius-md); max-height: 220px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.dropdown-list.open { display: block; }

/* Item dropdowns need more vertical room because each row has icon + two-line content
   (name + category-and-effect). Match the wider rendered width so cramped descriptions can breathe. */
#atk-item-list, #def-item-list,
[id$="-item-list"][id^="sim-"] {
  max-height: 380px;
  min-width: 320px;
}
@media (max-width: 560px) {
  #atk-item-list, #def-item-list,
  [id$="-item-list"][id^="sim-"] { min-width: 0; }
}
#atk-item-list .di-desc, #def-item-list .di-desc,
[id$="-item-list"][id^="sim-"] .di-desc { white-space: normal; line-height: 1.4; }
.dropdown-item { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dropdown-item:hover, .dropdown-item.active { background: var(--bg-secondary); }
.dropdown-item .move-meta { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.type-badge { font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 500; white-space: nowrap; }
.base-stats { margin-top: 8px; min-height: 16px; }
.base-stats:empty { margin-top: 0; }

/* Type pills above the stat bars */
.poke-types { display: flex; gap: 5px; margin-bottom: 8px; }
.poke-types .type-badge { font-size: 11px; padding: 2px 9px; letter-spacing: 0.2px; }
/* Mega toggle + type badges share one row; types sit to the right of the pills. */
.poke-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 10px;
  min-height: 36px; /* reserve space so the Mega toggle capsule doesn't push A's stats below B's */
}
.poke-meta-row .mega-toggle { margin: 0; }
.poke-meta-row .poke-types { margin: 0; }
.poke-meta-row .poke-types:empty { display: none; }

/* Horizontal stat bars */
.stat-grid { display: flex; flex-direction: column; gap: 4px; }
.stat-row {
  display: grid;
  grid-template-columns: 32px 32px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.stat-label { color: var(--text-secondary); font-weight: 500; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 3px; }
.stat-arrow { font-size: 9px; line-height: 1; cursor: help; }
.stat-arrow.up   { color: #e54848; } /* Champions-style: red up arrow for nature boost */
.stat-arrow.down { color: #3a8ad6; } /* Champions-style: blue down arrow for nature drop */
.stat-value { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.stat-track {
  position: relative;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.stat-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  transition: width 0.2s ease;
}

/* ─── Damage Calculator interactive stat rows ──────────────────────────
   Each stat row carries: label | +/- nature buttons | final value | bar |
   inline SP slider | SP number — mirroring the Team Builder layout. */
.calc-stat-grid { gap: 7px; }
.calc-stat-row {
  display: grid;
  /* label | +/- buttons | value | bar | slider | sp num */
  grid-template-columns: 44px 46px 40px 1fr 150px 28px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.calc-stat-row .stat-value { font-size: 13px; }
.calc-stat-row .stat-track { height: 8px; border-radius: 4px; display: block; width: 100%; position: relative; overflow: hidden; }
.calc-stat-row .stat-fill { display: block; position: static; height: 100%; inset: auto; border-radius: 4px; }
.calc-nat-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.calc-nat-btn {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.12s ease;
}
.calc-nat-btn:hover { border-color: var(--text-secondary); color: var(--text-secondary); }
.calc-nat-btn.calc-nat-plus.active  { background: #e54848; border-color: #e54848; color: #fff; }
.calc-nat-btn.calc-nat-minus.active { background: #3a8ad6; border-color: #3a8ad6; color: #fff; }
.calc-nat-spacer { display: inline-block; width: 39px; height: 18px; }
.calc-sp-slider { width: 100%; height: 14px; cursor: pointer; }
.calc-sp-num {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ─── Calc card header with Fetch from Team Builder ──────────────────── */
.calc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Per-card action icons (save / revert / clear). */
.calc-card-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.calc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; color: var(--text-secondary);
  border: 0.5px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.calc-icon-btn:hover { background: var(--bg-tertiary); color: var(--text); border-color: var(--border-strong); }
#calc-save-atk:hover, #calc-save-def:hover { color: #4caf50; border-color: #4caf50; }
#calc-clear-atk:hover, #calc-clear-def:hover { color: #e57373; border-color: #e57373; }

/* Yes/No confirm modal. */
.calc-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5); align-items: center; justify-content: center;
}
.calc-confirm-overlay.open { display: flex; }
.calc-confirm-box {
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 22px; max-width: 380px; width: calc(100% - 40px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.calc-confirm-msg { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 18px; }
.calc-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.calc-confirm-btn {
  padding: 8px 18px; font-size: 13px; font-weight: 500; border-radius: 8px; cursor: pointer;
  border: 0.5px solid var(--border); transition: background 0.12s ease;
}
.calc-confirm-no { background: var(--bg-secondary); color: var(--text); }
.calc-confirm-no:hover { background: var(--bg-tertiary); }
.calc-confirm-yes { background: var(--team-a); color: #fff; border-color: transparent; }
.calc-confirm-yes:hover { filter: brightness(1.08); }
.calc-fetch-wrap { position: relative; }
.calc-fetch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2b2f3a;
  border: 1px solid #4a90e2;
  color: #e8eef7;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.calc-fetch-btn:hover { background: #333845; border-color: #6aa8ee; }
.calc-fetch-btn-caret { font-size: 10px; color: #9bbef0; }
/* B card warm accent to match Pokémon B. */
#calc-fetch-wrap-def .calc-fetch-btn { background: #3a2b2b; border-color: #c8744f; color: #f7ece8; }
#calc-fetch-wrap-def .calc-fetch-btn:hover { background: #453333; border-color: #e0905f; }
#calc-fetch-wrap-def .calc-fetch-btn-caret { color: #e0a07f; }

.calc-fetch-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 300px;
  max-width: 360px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid #3a3a3a;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 6px;
}
.calc-fetch-panel.open { display: block; }
.calc-fetch-team { padding: 6px 6px 10px; }
.calc-fetch-team + .calc-fetch-team { border-top: 0.5px solid #2d2d2d; }
.calc-fetch-team-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 4px 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-fetch-team-count {
  font-size: 10px;
  font-weight: 500;
  color: #888;
  background: #2d2d2d;
  padding: 1px 6px;
  border-radius: 8px;
}
.calc-fetch-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}
.calc-fetch-mon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s ease;
}
.calc-fetch-mon:hover { background: var(--bg-tertiary); }
.calc-fetch-sprite { width: 32px; height: 32px; object-fit: contain; }
.calc-fetch-sprite-fallback {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--text-tertiary); background: #2a2a2a; border-radius: 6px;
}
.calc-fetch-mon-name { display: none; }
.calc-fetch-empty { padding: 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; }

/* ─── Moves section (4 slots with per-move % to Pokémon B) ───────────── */
.calc-col-side .moves-section + .field-row-3 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
}
.moves-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.moves-section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.move-slot {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.move-slot:hover { border-color: var(--border-strong); background: var(--bg-secondary); }
.move-slot.active {
  border-color: var(--text-secondary);
  background: var(--bg-secondary);
}
.move-slot.move-slot-dup {
  border-color: #c84444 !important;
  background: #2a1818 !important;
  animation: moveSlotDupFlash 0.8s ease;
}
@keyframes moveSlotDupFlash {
  0%, 100% { border-color: var(--border); }
  20%, 60% { border-color: #c84444; }
}
.move-slot-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
}
.move-slot.active .move-slot-num { color: var(--text); }
.move-slot-search-wrap { position: relative; min-width: 0; }
.move-slot-input {
  padding: 5px 8px;
  font-size: 13px;
}
.move-slot-dmg {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 56px;
  text-align: right;
}
.move-slot-dmg.chunk    { color: #e89a3c; }
.move-slot-dmg.maybe-ko { color: #e8743c; }
.move-slot-dmg.ko       { color: #e54848; }
.move-slot-dmg.status   { color: var(--text-tertiary); }
.move-slot-dmg.immune   { color: var(--text-tertiary); }

/* On very narrow viewports the long stat row would overflow — drop the bar
   to free space for the slider + nature controls. */
@media (max-width: 480px) {
  .calc-stat-row { grid-template-columns: 40px 46px 36px 1fr 26px; gap: 8px; }
  .calc-stat-row .stat-track { display: none; }
}
.bst-line {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.bst-value { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 4px; }
.bst-note { color: var(--text-secondary); font-size: 10px; font-style: italic; margin-left: 4px; opacity: 0.7; }

/* Format selector: prominent segmented control above the calc cards. */
.format-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}
.format-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.format-toggle {
  display: inline-flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.format-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.2;
}
.format-btn:hover { color: var(--text); }
.format-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.format-btn-note {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 4px;
}
@media (max-width: 480px) {
  .format-bar { flex-wrap: wrap; gap: 8px; }
  .format-btn { padding: 6px 12px; font-size: 12px; }
  .format-btn-note { display: none; }
}

/* Advanced settings: collapsible section tucking less-used controls below the main fields.
   Used on both attacker and defender cards. Marker is sized to be obviously interactive. */
.adv-details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
}
.adv-details summary {
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.adv-details summary:hover { color: var(--text); }
.adv-details summary::-webkit-details-marker { display: none; }
.adv-details summary::before {
  content: '▸';
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  width: 14px;
  text-align: center;
  transition: transform 0.15s;
  color: var(--text-secondary);
}
.adv-details[open] summary::before { transform: rotate(90deg); }
.adv-details[open] summary { color: var(--text); }
.adv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 560px) {
  .adv-grid { grid-template-columns: 1fr; }
}
.adv-details .crit-toggle-row { margin-top: 12px; }

/* HP% slider field inside Advanced settings — slider + percentage label inline. */
.hp-pct-field .hp-pct-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.hp-pct-field input[type=range] {
  flex: 1;
  min-width: 0;
}
.hp-pct-value {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 38px;
  text-align: right;
}

/* Team-sided field conditions panel (one per team in Combat Simulation).
   Six pill toggles, wrap to multiple rows on narrow screens, with hover tooltips. */
.team-cond-panel {
  margin: 10px 0 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}
.team-cond-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.team-cond-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team-cond-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
  user-select: none;
}
.team-cond-toggle input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  margin: 0;
  cursor: pointer;
  position: relative;
}
.team-cond-toggle input[type=checkbox]:checked {
  border-color: var(--text);
  background: var(--text);
}
.team-cond-toggle input[type=checkbox]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
}
.team-cond-toggle:has(input:checked) {
  color: var(--text);
  border-color: var(--border-strong);
  font-weight: 500;
}
.cond-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 9px;
  font-style: italic;
  font-weight: 600;
  font-family: Georgia, serif;
  line-height: 1;
}
.team-cond-toggle[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  max-width: 280px;
  width: max-content;
  padding: 8px 10px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  pointer-events: none;
}
.team-cond-toggle[data-tip]:hover::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 14px;
  z-index: 11;
  border: 5px solid transparent;
  border-bottom-color: var(--text);
  pointer-events: none;
}

.move-info { font-size: 11px; color: var(--text-secondary); margin-top: 5px; min-height: 16px; }

/* Ability description shown under the ability dropdown */
.ability-desc,
.item-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 6px;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.ability-desc:empty,
.item-desc:empty { margin-top: 0; }
/* In the calc cards, reserve a consistent height for the item/ability description blocks so
   the Item/Ability/Nature row (and Advanced Settings below) lines up across Pokémon A and B,
   regardless of how long each ability/item description is. */
#atk-item-desc, #def-item-desc,
#atk-ability-desc, #def-ability-desc {
  height: 72px;
  align-content: flex-start;
  overflow: hidden;
}
.ability-desc-text { flex: 1; min-width: 0; }
.ability-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: help;
}
.ability-tag-on  { background: var(--success-bg); color: var(--success-text); }
.ability-tag-off { background: var(--bg-tertiary); color: var(--text-secondary); }

/* Type badge colours */
.type-Normal{background:#A8A878;color:#fff} .type-Fire{background:#F08030;color:#fff} .type-Water{background:#6890F0;color:#fff}
.type-Electric{background:#F8D030;color:#333} .type-Grass{background:#78C850;color:#fff} .type-Ice{background:#98D8D8;color:#333}
.type-Fighting{background:#C03028;color:#fff} .type-Poison{background:#A040A0;color:#fff} .type-Ground{background:#E0C068;color:#333}
.type-Flying{background:#A890F0;color:#fff} .type-Psychic{background:#F85888;color:#fff} .type-Bug{background:#A8B820;color:#fff}
.type-Rock{background:#B8A038;color:#fff} .type-Ghost{background:#705898;color:#fff} .type-Dragon{background:#7038F8;color:#fff}
.type-Dark{background:#705848;color:#fff} .type-Steel{background:#B8B8D0;color:#333} .type-Fairy{background:#EE99AC;color:#333}

/* Updated dropdown item with description */
.di-main { display: flex; align-items: center; gap: 6px; }
.di-name { font-size: 13px; color: var(--text); font-weight: 500; }
.di-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.dropdown-item { padding: 7px 12px; flex-direction: row; align-items: center; gap: 10px; }
.di-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.di-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; }
.di-sprite { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; background: #262626; border-radius: 5px; }
.di-item-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; align-self: center; margin-right: 2px; }

/* Inline item icon next to the search input. Sits absolutely-positioned at left;
   input gets left padding ONLY when an icon is visible so empty state aligns with other inputs. */
.item-search-wrap { position: relative; }
.item-icon-inline {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
}
/* Pad input only when sibling icon is visible (not display:none). */
.item-search-wrap:has(.item-icon-inline:not([style*="display: none"]):not([style*="display:none"])) .search-input {
  padding-left: 36px;
}

/* Move detail display */
.move-detail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.move-detail-stats { font-size: 11px; color: var(--text-secondary); }
.move-detail-desc { font-size: 12px; color: var(--text); line-height: 1.5; padding: 4px 0; }
/* In the calc cards, lock the description block to a fixed height so the Item / Ability /
   Nature row (and everything below) starts at the same Y on both Pokémon A and B, no matter
   how long each move's description is. Longer text scrolls within the block. */
#atk-move-info .move-detail-desc, #def-move-info .move-detail-desc {
  height: 40px;
  overflow-y: auto;
  margin-bottom: 2px;
}
.move-info { min-height: 36px; }

/* Calc cards: move-info (badge + tags + description) now sits BELOW the move slots,
   so the slots stay aligned across both cards regardless of description height. */
#atk-move-info, #def-move-info {
  min-height: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
}
#atk-move-info:empty, #def-move-info:empty {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Mega toggle */
.mega-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.mega-option { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.mega-option input[type="checkbox"],
.mega-option input[type="radio"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--text); }
.mega-label { font-size: 12px; font-weight: 500; color: var(--text); padding: 3px 10px; border: 0.5px solid var(--border-strong); border-radius: 20px; cursor: pointer; transition: all 0.15s; }
.mega-option input:checked + .mega-label { background: var(--text); color: var(--bg); }
.mega-option:hover .mega-label { background: var(--bg-secondary); }

/* Locked item slot for Mega */
select:disabled { opacity: 0.6; cursor: not-allowed; border-style: dashed; }

/* Dual HP bars */
.result-section { margin-bottom: 16px; }
.result-section + .result-section { padding-top: 14px; border-top: 0.5px solid var(--border); }
.result-label-sm { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.result-main.recoil { color: var(--danger-text); }
.result-main.confusion { color: var(--warning-text); }
.hp-bar-wrap { margin: 8px 0 4px; }
.hp-bar { height: 10px; background: var(--bg-tertiary); border-radius: 5px; overflow: hidden; position: relative; display: flex; }
.hp-bar-fill { height: 100%; background: var(--success-text); border-radius: 5px; transition: width 0.4s; }
.hp-bar-fill.warning { background: var(--warning-text); }
.hp-bar-fill.danger { background: var(--danger-text); }
.hp-bar-dmg { position: absolute; height: 100%; background: rgba(76,140,43,0.55); transition: width 0.4s; cursor: help; }
/* Multi-hit damage segments — alternating shades + 1px black separator. Each segment is
   absolutely positioned inside the parent .hp-bar-dmg band (which already accounts for
   start-HP positioning via its right offset). */
.hp-bar-dmg-seg {
  position: absolute;
  top: 0; height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #000;
}
.hp-bar-dmg-seg:last-child {
  border-right: none;
}
.hp-bar-dmg-light { background: rgba(76, 140, 43, 0.40); }
.hp-bar-dmg-dark  { background: rgba(54, 100, 30, 0.65); }
.hp-bar-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.recoil-fill { background: #E07020; }
.recoil-section { }
.confusion-section { }
.confusion-fill { background: #B8860B; }

/* Turn simulator */
.sim-row { border: 0.5px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); margin-bottom: 8px; overflow: hidden; }
.sim-header { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.sim-order { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; margin-top: 2px; }
.sim-order.team-a { background: #E6F1FB; color: #185FA5; }
.sim-order.team-b { background: #FAECE7; color: #993C1D; }
.sim-info { flex: 1; }
.sim-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sim-name { font-size: 14px; font-weight: 500; color: var(--text); }
.sim-move { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.sim-spe { font-size: 12px; color: var(--text-tertiary); font-family: monospace; margin-left: auto; }
.sim-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.sim-events { border-top: 0.5px solid var(--border); padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 5px; }
/* Current field conditions summary block — sits between the PRE header and the event list.
   Vertical layout: row 1 is global (weather/terrain/TR), rows 2+ are per-team sided conditions. */
.field-sum {
  padding: 8px 14px 10px;
  border-top: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  background: var(--bg-secondary);
}
.field-sum-line {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.field-sum-row { display: inline-flex; align-items: center; gap: 6px; }
.field-sum-key {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field-sum-val { font-weight: 500; color: var(--text); }
.field-sum-val.field-sum-none { color: var(--text-secondary); font-weight: 400; }
.sim-event { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.sim-icon { font-size: 12px; margin-top: 2px; flex-shrink: 0; }
.sim-event-damage { color: var(--danger-text); }
.sim-event-recoil { color: var(--warning-text); }
.sim-event-buff { color: var(--success-text); }
.sim-event-immune { color: var(--text-tertiary); }
.sim-event-status { color: var(--text-secondary); }

/* Simulator results */
.sim-order-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; margin-bottom: 8px; }
.sim-order-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.sim-order-pill { font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
.sim-order-pill.team-a { background: #E6F1FB; color: #185FA5; }
.sim-order-pill.team-b { background: #FAECE7; color: #993C1D; }
.sim-badge { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.sim-badge.team-a { background: #E6F1FB; color: #185FA5; }
.sim-badge.team-b { background: #FAECE7; color: #993C1D; }
.sim-badge-pre { background: var(--bg-secondary); color: var(--text-secondary); font-size: 10px; }
.sim-phase-label { font-size: 12px; color: var(--text-secondary); font-style: italic; }
.sim-row { border: 0.5px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); margin-bottom: 8px; overflow: hidden; }
.sim-header { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.sim-info { flex: 1; }
.sim-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sim-name { font-size: 14px; font-weight: 500; color: var(--text); }
.sim-move { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.sim-spe { font-size: 12px; color: var(--text-tertiary); font-family: monospace; margin-left: auto; }
.sim-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.sim-events { border-top: 0.5px solid var(--border); padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 5px; }
.sim-event { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.sim-icon { font-size: 12px; margin-top: 2px; flex-shrink: 0; min-width: 14px; }
.sim-event-damage { color: var(--danger-text); }
.sim-event-recoil { color: var(--warning-text); }
.sim-event-buff { color: var(--success-text); }
.sim-event-immune { color: var(--text-tertiary); }
.sim-event-status { color: var(--text-secondary); }
.sim-event-weather { color: #185FA5; }
.sim-event-switch { color: var(--success-text); }
.sim-event-field { color: #7038F8; }

@media (max-width: 600px) {
  .sim-teams { grid-template-columns: 1fr; }
}

/* SP total bar */
.sp-total-bar { font-size: 11px; color: var(--text-secondary); text-align: right; margin-bottom: 6px; padding: 3px 8px; border-radius: var(--radius-md); background: var(--bg-secondary); }
/* In the calc cards the SP bar sits right under the stats, separating them from
   the rest of the form. Extra room above + a divider line below. */
.calc-col-side .sp-total-bar {
  margin: 12px 0 0;
}
.calc-col-side .sp-total-bar + * {
  margin-top: 0;
}
.calc-col-side .base-stats + .sp-total-bar {
  margin-top: 12px;
}
.calc-col-side .sp-total-bar + .moves-section {
  margin-top: 14px;
}
.sp-total-bar .sp-used { font-weight: 500; color: var(--text); }
.sp-total-bar.sp-full .sp-used { color: var(--success-text); }
.sp-total-bar.sp-over { background: var(--danger-bg); }
.sp-total-bar.sp-over .sp-used { color: var(--danger-text); }

/* Vertical team layout */
.sim-teams-vertical { display: flex; flex-direction: column; gap: 1.5rem; }
.sim-teams-vertical .sim-team { width: 100%; }
.sim-active-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.sim-slot-wrap { min-width: 0; }

/* Locked target dropdown */
select:disabled { opacity: 0.7; cursor: not-allowed; font-style: italic; }

/* Field condition descriptions */
.field-note { font-size: 10px; color: var(--text-tertiary); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-label-row { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 10px 0 6px; }
.field-toggle-label { flex: 1; }
.field-desc-box { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.field-desc-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--bg-secondary); border: 0.5px solid var(--border); }
.field-desc-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.field-desc-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.weather-label { color: #4A90D9; }
.terrain-label { color: #5A8A3A; }
.speed-label { color: #9060C8; }

/* Team header with tailwind checkbox */
.sim-team-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 16px; flex-wrap: wrap; }
.sim-team-header-row .sim-team-header { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; }

/* Inline wrapper — keeps "Team A" pill and the fetch dropdown tight together. */
.sim-team-header-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Custom "Fetch from Team Builder" dropdown — a prominent pill-style button next to the
   Team A/B label, opening a panel that shows each team's name + Pokémon sprites. */
.sim-fetch-wrap {
  position: relative;
  display: inline-block;
}
.sim-fetch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #2b2f3a;
  border: 1px solid #4a90e2;
  color: #e8eef7;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sim-fetch-btn:hover { background: #333845; border-color: #6aa8ee; }
.sim-fetch-btn-label.has-team { color: #fff; font-weight: 700; }
.sim-fetch-btn-caret { font-size: 11px; color: #9bbef0; }

/* Team B variant — warm red/pink accent to match the team-b-header theme. */
#sim-fetch-wrap-b .sim-fetch-btn {
  background: #3a2b2b;
  border-color: #c8744f;
  color: #f7ece8;
}
#sim-fetch-wrap-b .sim-fetch-btn:hover { background: #453333; border-color: #e0905f; }
#sim-fetch-wrap-b .sim-fetch-btn-caret { color: #e0a07f; }

/* Dropdown panel — absolutely positioned below the button. */
.sim-fetch-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 280px;
  max-width: 360px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid #3a3a3a;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 4px;
}
.sim-fetch-panel.open { display: block; }

.sim-fetch-opt {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.sim-fetch-opt:hover { background: var(--bg-tertiary); }
.sim-fetch-opt.active { background: #1d3a2c; }
.sim-fetch-opt-none {
  font-size: 12px;
  color: #999;
  border-bottom: 1px solid #2d2d2d;
  border-radius: 6px 6px 0 0;
  margin-bottom: 2px;
}
.sim-fetch-opt-name {
  font-size: 13px;
  font-weight: 600;
  color: #e5e5e5;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sim-fetch-opt-count {
  font-size: 10px;
  font-weight: 500;
  color: #888;
  background: #2d2d2d;
  padding: 1px 6px;
  border-radius: 8px;
}
.sim-fetch-sprites {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.sim-fetch-sprite {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #262626;
  border-radius: 5px;
}
.sim-fetch-empty {
  padding: 12px 10px;
  font-size: 12px;
  color: #777;
  text-align: center;
}
.tailwind-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tailwind-check input { width: 14px; height: 14px; accent-color: var(--text); cursor: pointer; }
.tailwind-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 3px 10px; border: 0.5px solid var(--border); border-radius: 20px; transition: all 0.15s; }
.tailwind-check input:checked + .tailwind-label { background: #E6F1FB; color: #185FA5; border-color: #378ADD; }
.sim-event-ko { color: var(--danger-text); font-weight: 500; }

/* Bench row side by side */
.bench-row { margin-top: 8px; }
.bench-row .sim-slot { border-style: dashed; opacity: 0.9; }

/* Force all mega toggles to use circular inputs */
.mega-toggle input[type="radio"],
.mega-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.mega-toggle input[type="radio"]:checked,
.mega-toggle input[type="checkbox"]:checked {
  background: var(--text);
  border-color: var(--text);
  box-shadow: inset 0 0 0 3px var(--bg);
}

/* Modifier breakdown */
.modifier-breakdown { margin-top: 12px; border-top: 0.5px solid var(--border); padding-top: 10px; }
.mod-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 3px 0; color: var(--text-secondary); }
.mod-base { color: var(--text-secondary); font-style: italic; border-bottom: 0.5px solid var(--border); padding-bottom: 5px; margin-bottom: 3px; }
.mod-boost { color: var(--success-text); }
.mod-reduce { color: var(--danger-text); }
.mod-mult { font-weight: 500; font-family: monospace; min-width: 45px; text-align: right; }

/* Critical hit toggle */
.crit-toggle-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 8px 0 4px; border-top: 0.5px solid var(--border); margin-top: 4px; }
.crit-toggle-row input[type="checkbox"] { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; accent-color: var(--warning-text); cursor: pointer; }
.crit-label { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.crit-note { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.crit-toggle-row input:checked ~ .crit-label { color: var(--warning-text); }
.mod-note { color: var(--text-tertiary); font-style: italic; }
.mod-title { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }

/* Move tags */
.move-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
/* In the calc cards, the tags row always reserves height (even with no capsules) so the
   description and everything below stays aligned across Pokémon A and B. */
#atk-move-info .move-tags, #def-move-info .move-tags { min-height: 20px; }
.move-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.tag-contact { background: #3A3A3A; color: #CCC; }
.tag-punch   { background: #7B3F00; color: #F4A460; }
.tag-bite    { background: #3D1A1A; color: #FF8C8C; }
.tag-slicing   { background: #1A3D2B; color: #7CFC00; }
.tag-sound   { background: #1A2A4A; color: #87CEEB; }
.tag-pulse   { background: #2A1A4A; color: #DA70D6; }
.tag-wind    { background: #1A3A3A; color: #AFEEEE; }
.tag-bullet  { background: #1E3A8A; color: #BFDBFE; }

/* Mega conflict tooltip — appears when trying to mega-evolve a 2nd Pokémon on the same team. */
.mega-conflict-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 0.5px solid var(--danger-text);
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  animation: fadeInTooltip 0.2s ease-out;
}
@keyframes fadeInTooltip {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Simulator rich damage block ──────────────────────────────────────────── */
/* Replaces the single-line damage event when modifier data is available.
   Layout: action line on top, multiplier rows in the middle, HP bar at bottom. */
.sim-rich-damage {
  padding: 8px 12px 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sim-rich-a { border-left: 3px solid var(--team-a-color, #185FA5); }
.sim-rich-b { border-left: 3px solid var(--team-b-color, #993C1D); }

.sim-mod-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 24px;
  border-left: 1px dashed var(--border);
  margin-left: 8px;
}
.sim-mod-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sim-mod-label { color: var(--text-secondary); }
.sim-mod-mult { font-family: monospace; font-weight: 500; color: var(--text); }
/* Survival-source row — highlights when Focus Sash / Sturdy kept the defender alive at
   1 HP. Distinct from regular damage multipliers since it's a binary event, not a math op. */
.sim-mod-survival {
  color: #16A34A;  /* success green */
  font-style: italic;
}
.sim-mod-survival .sim-mod-label { color: inherit; }

.sim-roll-range { color: var(--text-tertiary); font-size: 11px; font-family: monospace; }

/* HP bar in damage events. Mirrors the look of the damage calculator's bar so the simulator
   feels visually consistent. The bar shows the defender's HP AFTER this hit; the "dmg" overlay
   shows the segment that was just shaved off, so the user can see damage taken in context. */
.sim-hp-row {
  display: grid;
  grid-template-columns: 100px 1fr 90px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.sim-hp-label { color: var(--text-secondary); font-size: 11px; text-align: right; padding-right: 4px; }
.sim-hp-bar {
  position: relative;
  height: 10px;
  background: var(--bg-secondary);
  border-radius: 5px;
  overflow: hidden;
  border: 0.5px solid var(--border);
}
.sim-hp-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  transition: width 0.3s ease;
}
.sim-hp-fill.hp-high { background: #4CAF50; }
.sim-hp-fill.hp-mid  { background: #FF9800; }
.sim-hp-fill.hp-low  { background: #F44336; }
.sim-hp-dmg {
  position: absolute;
  top: 0; height: 100%;
  background: rgba(244, 67, 54, 0.35);
}
/* Heal band — overlays the HP bar from the pre-heal point to the post-heal point.
   Used by Sitrus/Oran berry consumption events to show how much HP was restored. */
.sim-hp-heal {
  position: absolute;
  top: 0; height: 100%;
  background: rgba(76, 175, 80, 0.5);
}
/* Multi-hit damage segments — alternating shades + black separator lines so the user
   can visually count each strike (e.g. Dual Wingbeat = 2 segments, Triple Axel = 3). */
.sim-hp-dmg-seg {
  position: absolute;
  top: 0; height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #000;
}
/* The last segment doesn't need a separator on its right edge. Use :last-of-type to
   target it among siblings of the same class family. */
.sim-hp-dmg-seg:last-of-type {
  border-right: none;
}
.sim-hp-dmg-light { background: rgba(244, 67, 54, 0.32); }
.sim-hp-dmg-dark  { background: rgba(180, 30, 30, 0.55); }
.sim-hp-text {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM BUILDER
   The Team Builder tab has two views — an overview grid of 6 team boxes, and
   an editor that opens when a team is clicked. Auto-saved to localStorage.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overview grid — 6 team boxes laid out as 3×2 on desktop, collapses on mobile. */
.teams-header { margin-bottom: 16px; }
.teams-header h2 { margin: 0 0 4px 0; font-size: 22px; }
.teams-sub { color: #888; font-size: 13px; margin: 0; }
.teams-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .teams-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .teams-grid { grid-template-columns: 1fr; }
}
/* Each team box — clickable card. Hover lifts and highlights to signal interactivity. */
.team-box {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}
.team-box:hover {
  transform: translateY(-2px);
  border-color: #4a90e2;
  background: #232323;
}
.team-box-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  color: #e5e5e5;
}
/* Slot preview — 2×3 grid of sprite tiles. Reads like a Pokémon party box. */
.team-box-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
}
.team-box-slot {
  background: #2a2a2a;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 60px;
  overflow: hidden;
}
.team-box-slot img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
}
.team-box-slot.empty {
  background: #1a1a1a;
  border: 1px dashed #333;
}

/* Editor view — header with back button + team name input. */
.teams-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  /* Match the .tb-editor-shell's left-shift so Back+Team-name align over the slot nav,
     not over the editor box. Same value as in .tb-editor-shell (nav width 110 + gap 14). */
  margin-left: -124px;
}
@media (max-width: 900px) {
  .teams-editor-header {
    /* On narrow screens, snap back inside the container. */
    margin-left: 0;
  }
}
.back-btn {
  background: #2a2a2a;
  color: #ccc;
  border: 1px solid #333;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s ease;
  /* Match the slot-tab width so the Back button sits exactly above the slot nav column. */
  width: 110px;
  flex-shrink: 0;
  text-align: center;
  box-sizing: border-box;
}
.back-btn:hover { background: #333; }
.team-name-input {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  color: #e5e5e5;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  max-width: 400px;
}
.team-name-input:focus {
  outline: none;
  border-color: #4a90e2;
}

/* Horizontal Pokémon slot cards — scrolls horizontally if needed. */
.team-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 1200px) {
  .team-slots { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .team-slots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .team-slots { grid-template-columns: 1fr; }
}

.team-slot-card {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-slot-card h4 {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.team-slot-card .field { display: flex; flex-direction: column; gap: 3px; }
.team-slot-card .field label {
  font-size: 11px;
  color: #999;
  font-weight: 500;
}
/* Tighter SP sliders for compact cards. */
.tb-sp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.tb-sp-field { display: flex; flex-direction: column; gap: 2px; }
.tb-sp-field label {
  font-size: 10px;
  color: #888;
  display: flex;
  justify-content: space-between;
}
.tb-sp-field input[type="range"] { width: 100%; }
.tb-sp-total {
  font-size: 11px;
  color: #888;
  text-align: right;
  padding: 4px 0;
}
.tb-sp-total.over { color: #f44; font-weight: 600; }

/* Mega evolution toggle — sits below the stats panel when the selected Pokémon has at
   least one mega form. Left-aligned to sit under the stats grid. */
.tb-mega-toggle-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.tb-mega-toggle {
  background: #1e1e1e;
  color: #c7a8e8;
  border: 1px solid #4a3a6a;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.tb-mega-toggle:hover {
  background: #2a1f3a;
  border-color: #7b5ca8;
  color: #e0c8ff;
}

/* Mega ability info — shown next to the toggle when the user is currently viewing the
   mega's stats. Tells them what ability they'll get on mega evolution + its effect. */
.tb-mega-ability {
  font-size: 12px;
  color: #aaa;
  line-height: 1.4;
  padding: 6px 10px;
  background: #1a1820;
  border-left: 3px solid #7b5ca8;
  border-radius: 3px;
  max-width: 100%;
}
.tb-mega-ability-label {
  color: #888;
  margin-right: 4px;
}
.tb-mega-ability-name {
  color: #e0c8ff;
  font-weight: 600;
}
.tb-mega-ability-desc {
  color: #999;
  margin-left: 4px;
}

/* Export buttons — sit in the team-editor header next to "Back" + team name input.
   Teal accent. Two variants: per-slot export, whole-team export. */
.tb-export-btn {
  background: #1e1e1e;
  color: #8adcc4;
  border: 1px solid #3a6a5a;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.tb-export-btn:hover {
  background: #1f2a26;
  border-color: #5ca888;
  color: #b4e8d4;
}
.tb-export-btn.tb-export-success {
  background: #1d3a2c;
  border-color: #5ca888;
  color: #b4e8d4;
}
.tb-export-btn.tb-export-fail {
  background: #3a1d1d;
  border-color: #c84444;
  color: #ff9090;
}
.tb-moves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM BUILDER v2 — single-Pokémon view
   The Team Builder is wider than the other tabs (which are constrained to 720px).
   We use a negative-margin trick on #tab-teams to extend beyond the .app width
   without changing the other tabs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Team Builder layout — keep the editor aligned with the tabs (inside .app's 720px),
   but let the slot nav extend to the LEFT of the container so the screen feels balanced. */
#tab-teams.section.active {
  /* No breakout — editor sits inside .app's centered 720px just like the other tabs. */
  position: relative;
}

/* Outer shell — flex row, slot nav on left, editor takes remainder. The shell stretches
   BEYOND the .app container's 720px on both sides — left for the slot nav, right to give
   the editor enough room for the 2×2 moves grid + stats column. */
.tb-editor-shell {
  display: flex;
  gap: 14px;
  align-items: stretch;
  /* Width = 110 nav + 14 gap + ~840 editor = ~964px total. Capped by viewport via
     min/max calc below so it doesn't overflow on small screens. */
  width: calc(720px + 124px + 220px);  /* tabs row + left shift + right extension */
  margin-left: -124px;                  /* extend left for slot nav */
  max-width: calc(100vw - 2.5rem);      /* respect .app's horizontal padding (1.25rem each side) */
}
@media (max-width: 900px) {
  .tb-editor-shell {
    margin-left: 0;
    width: 100%;
  }
}
.tb-slot-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 110px;
  flex-shrink: 0;
}
.tb-nav-tab {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  color: #ccc;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transition: background 0.12s ease, border-color 0.12s ease;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 70px;
}
.tb-nav-sprite {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.tb-nav-label {
  font-size: 11px;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-nav-tab:hover { background: #262626; border-color: #3a3a3a; }
.tb-nav-tab.active {
  background: #2d4a73;
  border-color: #4a90e2;
  color: #fff;
}
.tb-nav-tab.tb-nav-empty { color: #666; font-style: italic; }
.tb-nav-tab.active.tb-nav-empty { color: #b0c4de; font-style: normal; }

/* Editor — fills remaining horizontal space next to slot nav. */
.tb-slot-editor {
  background: #181818;
  border-radius: 8px;
  padding: 22px;
  flex: 1 1 auto;
  min-width: 0;
}
.tb-slot-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.tb-header-sprite {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.tb-slot-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tb-slot-name {
  font-size: 26px;
  font-weight: 600;
  color: #f0f0f0;
}

/* Gender picker — small ♂/♀ chips next to the Pokémon name + types. Locked species
   show one fixed chip; unlocked species show clickable buttons. */
.tb-gender-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.tb-gender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  color: #666;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
}
.tb-gender:hover {
  background: #262626;
  border-color: #3a3a3a;
}
.tb-gender.active.tb-gender-m {
  background: #1e3045;
  border-color: #4a90e2;
  color: #6cb0ff;
}
.tb-gender.active.tb-gender-f {
  background: #3a1f33;
  border-color: #d965a8;
  color: #ff9bd0;
}
/* Locked = single icon, no button hover, still colored to indicate gender. */
.tb-gender-locked {
  cursor: default;
}
.tb-gender-locked.tb-gender-m {
  background: #1e3045;
  border-color: #4a90e2;
  color: #6cb0ff;
}
.tb-gender-locked.tb-gender-f {
  background: #3a1f33;
  border-color: #d965a8;
  color: #ff9bd0;
}
.tb-gender-locked:hover {
  background: inherit;
  border-color: inherit;
}
/* Genderless chip — wider, no icon glyph, neutral color. */
.tb-gender-none {
  font-size: 11px;
  font-weight: 500;
  padding: 0 10px;
  color: #888;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  cursor: default;
}

/* Pokémon dropdown row — sprite on the left, name, type badges on the right. */
.tb-poke-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.tb-dd-sprite {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.tb-dd-sprite-placeholder {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.tb-poke-item .tb-dd-name {
  flex: 1;
  min-width: 0;
}

/* Top row layout — 2 columns: basics (left) and 4 moves in 2x2 (right). Moves get more
   width so each move card is readable. */
.tb-row-2col {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(440px, 1.8fr);
  gap: 24px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .tb-row-2col { grid-template-columns: 1fr; }
}
.tb-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tb-col .field { display: flex; flex-direction: column; gap: 4px; }
.tb-col .field label {
  font-size: 12px;
  color: #aaa;
  font-weight: 500;
  display: block;
}
.tb-col select {
  width: 100%;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  color: #e5e5e5;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Moves: 2×2 grid on the right side of the top row. */
.tb-moves-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .tb-moves-grid-2x2 { grid-template-columns: 1fr; }
}

/* Stats row at the bottom — full editor width, display-only bars. */
.tb-stats-row {
  border-top: 1px solid #2a2a2a;
  padding-top: 16px;
}
.tb-stats-empty {
  padding: 14px;
  background: #161616;
  border-radius: 6px;
  color: #666;
  font-style: italic;
  text-align: center;
}

/* Section label */
.tb-section-label {
  font-size: 12px;
  color: #aaa;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: block;
}

.tb-inline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) {
  .tb-inline-row { grid-template-columns: 1fr; }
}

/* Stat bars — match the damage calc's compact stat-row spacing. */
.tb-stats-bars {
  background: #161616;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tb-stat-bar-row {
  display: grid;
  /* label | +/- buttons | final value | bar | slider | sp num */
  grid-template-columns: 40px 48px 36px 1fr 140px 28px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  padding: 1px 0;
}
.tb-nat-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  justify-content: flex-start;
}
.tb-nat-btn {
  width: 18px;
  height: 18px;
  border: 1px solid #333;
  background: transparent;
  color: #555;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.tb-nat-btn:hover {
  border-color: #555;
  color: #aaa;
}
.tb-nat-btn.tb-nat-plus.active {
  background: #e54848;
  border-color: #e54848;
  color: #fff;
}
.tb-nat-btn.tb-nat-minus.active {
  background: #3a8ad6;
  border-color: #3a8ad6;
  color: #fff;
}
.tb-nat-btn-spacer {
  display: inline-block;
  width: 39px;  /* matches two 18px buttons + 3px gap */
  height: 18px;
}

/* Nature dropdown — error state when only + or only - is picked (partial nature). */
.tb-nature-error {
  border-color: #c84444 !important;
  background: #2a1818 !important;
  color: #ff9090 !important;
}
.tb-nature-warn {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #c84444;
  color: #fff;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: help;
  text-transform: none;
}
.tb-bar-label {
  color: #aaa;
  font-weight: 500;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tb-bar-nat { font-size: 9px; line-height: 1; }
.tb-bar-nat.up { color: #e54848; }
.tb-bar-nat.down { color: #3a8ad6; }
.tb-bar-val {
  color: #e5e5e5;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tb-bar-track {
  position: relative;
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
  overflow: hidden;
}
.tb-bar-fill {
  height: 100%;
  background: #e89c4a;
  border-radius: 3px;
  transition: width 0.18s ease;
}
.tb-bar-fill-max { background: #4fc3a1; }

/* SP slider per stat row — inline. */
.tb-sp-slider {
  width: 100%;
  height: 14px;
  cursor: pointer;
}
.tb-sp-num {
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* SP total summary under the stats block. */
.tb-sp-total {
  margin-top: 8px;
  font-size: 12px;
  color: #888;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tb-sp-total.over {
  color: #f44;
  font-weight: 600;
}

/* Searchable picker — input + popup list. Used for Pokémon, item, moves. */
.tb-search-wrap {
  position: relative;
}
.tb-search-input {
  width: 100%;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  color: #e5e5e5;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}
.tb-search-input:focus {
  outline: none;
  border-color: #4a90e2;
}
.tb-search-input:disabled {
  background: #161616;
  color: #555;
  cursor: not-allowed;
}
.tb-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #1a1a1a;
  border: 1px solid #2d2d2d;
  border-radius: 6px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  /* Wider than the input field so move/item details have breathing room. The dropdown
     can spill beyond the input's right edge. min-width matches typical column width;
     content can push wider via the entries themselves. */
  min-width: 100%;
  width: max-content;
  max-width: 420px;
}
.tb-dropdown.open { display: block; }

/* Move dropdown item — two-row layout: row 1 name + type + cat + BP; row 2 flags. */
.tb-move-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
}
.tb-move-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.tb-move-row1 .tb-dd-name { flex: 1; min-width: 0; text-align: left; }
.tb-move-cat {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.tb-cat-phys { background: #5a3a2a; color: #f4c4a8; }
.tb-cat-spec { background: #2a3a5a; color: #a8c4f4; }
.tb-cat-stat { background: #3a3a3a; color: #ccc; }
.tb-move-bp {
  font-size: 11px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.tb-move-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  justify-content: flex-start;
}
.tb-move-flag {
  font-size: 9px;
  padding: 2px 6px;
  background: #2a2a2a;
  color: #999;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Selected-move detail block — shown below each move input once a move is picked. */
.tb-move-detail {
  margin-top: 6px;
  padding: 8px 10px;
  background: #161616;
  border-radius: 6px;
  border: 1px solid #232323;
}
.tb-move-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.tb-move-detail-row:last-child { margin-bottom: 0; }
.tb-move-detail .tb-move-flags {
  margin-bottom: 6px;
}
.tb-move-desc {
  font-size: 12px;
  color: #aaa;
  line-height: 1.4;
}

/* Item dropdown — sim-style layout with icon + name + category·effect description. */
.tb-item-item {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
}
.tb-item-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.tb-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tb-item-name {
  color: #e5e5e5;
  font-weight: 600;
  font-size: 13px;
}
.tb-item-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.35;
}

/* Selected item — inline icon left of the input, effect description below. */
.tb-item-search-wrap {
  display: flex;
  align-items: center;
}
.tb-item-icon-inline {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.tb-item-search-wrap .tb-search-input {
  /* When the inline icon is shown, leave room for it on the left. */
  padding-left: 38px;
}
.tb-item-search-wrap:has(.tb-item-icon-inline[style*="display:none"]) .tb-search-input,
.tb-item-search-wrap:has(.tb-item-icon-inline[style*="display: none"]) .tb-search-input {
  padding-left: 10px;
}
.tb-item-effect {
  font-size: 12px;
  color: #888;
  line-height: 1.4;
  margin-top: 6px;
  min-height: 0;
}
.tb-item-effect:empty { display: none; }
.tb-dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #222;
  font-size: 13px;
}
.tb-dropdown-item:last-child { border-bottom: none; }
.tb-dropdown-item:hover { background: var(--bg-tertiary); }
.tb-dd-name {
  flex: 1;
  color: #e5e5e5;
}
.tb-dd-clear { font-style: italic; color: #888; }
.tb-dropdown-empty {
  padding: 12px 10px;
  color: #666;
  font-style: italic;
  font-size: 13px;
}

/* Stat bars — horizontal bar layout matching the user's reference screenshot. */
/* (Older duplicate block removed — see the canonical .tb-stats-bars / .tb-bar-track
   definitions earlier in this file for the active draggable-bar styling.) */

/* ───────────────────────────────────────────────────────────── */
/* Speed Calculator                                                */
/* ───────────────────────────────────────────────────────────── */
.speedcalc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 1100px) {
  .speedcalc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .speedcalc-grid { grid-template-columns: 1fr; }
}

/* Speed Calc — sprite ranking row */
.speedcalc-ranking {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
}
.sc-ranking-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
/* Ranking row uses the SAME grid as the top selection grid — 4 equal columns. */
.sc-ranking-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 100px;
}
@media (max-width: 1100px) {
  .sc-ranking-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sc-ranking-row { grid-template-columns: 1fr; }
}
.sc-rank-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  min-width: 0;
}
/* Ranking card border color matches the SOURCE slot (not the rank position) */
/* Empty placeholder card in the ranking row */
.sc-rank-card.sc-rank-empty-card {
  background: transparent;
  border: 1px dashed var(--border);
  border-left-width: 1px;
  align-items: center;
  justify-content: center;
}
.sc-rank-placeholder {
  color: var(--text-tertiary);
  font-size: 24px;
  opacity: 0.4;
}

.sc-rank-card.sc-from-1 { border-color: #EC407A; }
.sc-rank-card.sc-from-2 { border-color: #42A5F5; }
.sc-rank-card.sc-from-3 { border-color: #66BB6A; }
.sc-rank-card.sc-from-4 { border-color: #AB47BC; }
.sc-rank-position {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
/* Position badge: uniform dark style across all ranks. */
.sc-rank-card.sc-pos-1 .sc-rank-position,
.sc-rank-card.sc-pos-2 .sc-rank-position,
.sc-rank-card.sc-pos-3 .sc-rank-position,
.sc-rank-card.sc-pos-4 .sc-rank-position {
  background: var(--bg-tertiary);
  color: var(--text);
  border-color: var(--border);
}
.sc-rank-sprite {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  margin-top: 4px;
}
.sc-rank-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sc-rank-speed {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}


.speedcalc-slot {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  min-width: 0;
  /* Mega capsule now sits below the Pokémon name (not bottom-pinned), and the per-card
     speed box was removed, so slots no longer need a tall fixed height. min-height keeps
     the 4 cards visually aligned while letting them size to content. */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Per-slot identity colors — fixed assignment, not based on speed rank.
   This way you can recognize which sprite in the ranking row came from which slot. */
.speedcalc-slot.sc-slot-1 { border-left-color: #EC407A; }  /* pink */
.speedcalc-slot.sc-slot-2 { border-left-color: #42A5F5; }  /* blue */
.speedcalc-slot.sc-slot-3 { border-left-color: #66BB6A; }  /* green */
.speedcalc-slot.sc-slot-4 { border-left-color: #AB47BC; }  /* purple */

/* Speedcalc title gets the slot identity color too — helps users keep track. */
.speedcalc-slot.sc-slot-1 .speedcalc-title { color: #EC407A; }
.speedcalc-slot.sc-slot-2 .speedcalc-title { color: #42A5F5; }
.speedcalc-slot.sc-slot-3 .speedcalc-title { color: #66BB6A; }
.speedcalc-slot.sc-slot-4 .speedcalc-title { color: #AB47BC; }

.speedcalc-title {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.speedcalc-toggles {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 0.5px dashed var(--border);
  flex-wrap: wrap;
}
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  border: 0.5px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.toggle-pill input { margin: 0; cursor: pointer; }
.toggle-pill:has(input:checked) {
  background: var(--accent-bg, rgba(55, 138, 221, 0.15));
  border-color: var(--accent);
  color: var(--accent);
}

/* Speed Calc — mega-toggle area at the bottom of every slot.
   Always-visible fixed-height container so all 4 slots have identical layout regardless
   of how many mega forms the selected Pokemon has. Empty when no megas. */
/* Speed Calc — dropdown opens wider than the narrow slot to show sprites clearly.
   Slots 1/2 expand to the right; slots 3/4 expand to the left so it doesn't overflow off-screen. */
.speedcalc-slot.sc-slot-1 .dropdown-list,
.speedcalc-slot.sc-slot-2 .dropdown-list {
  left: 0;
  right: auto;
  width: 320px;
  max-width: 320px;
  max-height: 360px;
}
.speedcalc-slot.sc-slot-3 .dropdown-list,
.speedcalc-slot.sc-slot-4 .dropdown-list {
  left: auto;
  right: 0;
  width: 320px;
  max-width: 320px;
  max-height: 360px;
}

.speedcalc-mega-bottom {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;  /* pin the area to bottom of slot */
  padding-top: 8px;
  border-top: 0.5px dashed var(--border);
  align-items: flex-start;
  justify-content: flex-start;
  /* Reserve worst-case height (3 stacked mega options ~90px) so single-Mega lines up at the
     same Y as the top option of a 3-mega slot. */
  min-height: 110px;
}
/* Mega capsule positioned directly below the Pokémon name (damage-calc style). Fixed height
   + bottom divider so the section lines up across all 4 cards whether or not the Pokémon has
   a Mega (single Mega, X/Y split, or none all reserve the same vertical space). */
.speedcalc-mega-top {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  align-content: flex-start;
  min-height: 76px;          /* fits up to 2 rows of mega pills (X/Y or Mega/Mega Z) */
  margin-top: 2px;
  padding-bottom: 10px;
  border-bottom: 0.5px dashed var(--border);
}
.mega-none {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.6;
  font-style: italic;
}
.speedcalc-slot .mega-option { font-size: 12px; }

/* Per-card speed result box removed — speeds now shown only in the ranking row below. */
.sc-speed-detail {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}


/* Helping Hand — donate button styling */
.donate-btn {
  background: #FFDD55 !important;
  color: #1a1a1a !important;
  border-color: #FFDD55 !important;
  font-weight: 600;
}
.donate-btn:hover {
  background: #FFD133 !important;
  border-color: #FFD133 !important;
}

/* ── Item Clause warnings (duplicate items across a team) ────────────────── */
.team-box-slot-conflict { outline: 2px solid #e53935; outline-offset: -2px; border-radius: 8px; }
.team-box-warn { color: #e53935; font-size: 13px; cursor: help; }
.tb-nav-conflict { border-color: #e53935 !important; box-shadow: inset 0 0 0 1px #e53935; }
.tb-item-clause-bad { border: 1px solid #e53935 !important; border-radius: 8px; }
.tb-item-clause-flag { color: #e53935; font-size: 11px; font-weight: 600; margin-left: 6px; }
.tb-item-clause-msg { color: #e57373; font-size: 11px; margin-top: 4px; line-height: 1.4; }

/* ── Status condition buttons (Burn / Status) ────────────────────────────── */
.status-btn-group { display: flex; gap: 8px; }
.status-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; font-size: 13px; font-weight: 500;
  background: var(--bg-secondary); color: var(--text);
  border: 0.5px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.status-btn:hover { background: var(--bg-tertiary); }
.status-btn.active { background: var(--warning-bg); border-color: var(--warning-text); color: var(--warning-text); }
.status-btn[data-status="status"].active { background: var(--accent-soft, rgba(139,127,214,0.18)); border-color: #8b7fd6; color: #7a6fc0; }
.status-btn-note { font-size: 10px; color: var(--text-tertiary); font-weight: 400; }
.status-btn.active .status-btn-note { color: inherit; opacity: 0.85; }
.status-btn-disabled { opacity: 0.4; cursor: not-allowed; }
.status-btn-disabled:hover { background: var(--bg-secondary); }

/* ── Team Builder: Showdown import panel ─────────────────────────────────── */
.tb-import-btn { background: var(--bg-secondary); }
.tb-import-panel {
  margin: 12px 0 4px; padding: 14px;
  background: var(--bg-secondary); border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}
.tb-import-label { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.tb-import-textarea {
  width: 100%; min-height: 120px; resize: vertical;
  background: var(--bg); color: var(--text);
  border: 0.5px solid var(--border-strong); border-radius: 8px;
  padding: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5;
  box-sizing: border-box;
}
.tb-import-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.tb-import-go-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--team-a); color: #fff; border: none; border-radius: 8px;
  transition: filter 0.12s ease;
}
.tb-import-go-btn:hover { filter: brightness(1.08); }
.tb-import-status { font-size: 12px; line-height: 1.4; }
.tb-import-status-ok { color: var(--success-text); }
.tb-import-status-warn { color: var(--warning-text); }

/* Disabled Import button — greyed but still hoverable so the tooltip shows. */
.tb-btn-disabled { opacity: 0.45; cursor: not-allowed; }
.tb-btn-disabled:hover { filter: none; background: var(--bg-secondary); }

/* Team Builder: delete-Pokémon button in the slot editor header (matches calc clear icon). */
.tb-slot-delete {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; color: var(--text-secondary);
  border: 0.5px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tb-slot-delete:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-text); }

/* Delete Team button — danger-styled. */
.tb-delete-team-btn { color: var(--danger-text); border-color: var(--danger-text) !important; }
.tb-delete-team-btn:hover { background: var(--danger-bg); }

/* Multi-hit count dropdown in the battle summary. */
.bs-hits-select {
  font-size: 11px; padding: 1px 4px; margin: 0 2px;
  width: auto; max-width: 80px; flex: 0 0 auto; display: inline-block;
  background: var(--bg-secondary); color: var(--text);
  border: 0.5px solid var(--border); border-radius: 6px; cursor: pointer;
  vertical-align: middle;
}