@font-face {
  font-family: "Orbit";
  src: url("/static/fonts/Orbit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galmuri11";
  src: url("/static/fonts/galmuri11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galmuri14";
  src: url("/static/fonts/Galmuri14.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GalmuriMono11";
  src: url("/static/fonts/GalmuriMono11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cafe24PROUP";
  src: url("/static/fonts/Cafe24PROUP.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PixelMplus12";
  src: url("/static/fonts/PixelMplus12-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PixelMplus12";
  src: url("/static/fonts/PixelMplus12-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-ui: "Orbit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-emphasis: var(--font-ui);
  --font-display: var(--font-ui);
  --font-mono: var(--font-ui);
  --lugia-body: #F3F2F9;
  --lugia-body-shadow: #E2E3ED;
  --lugia-belly: #A8B3CE;
  --lugia-belly-deep: #6880B8;
  --lugia-navy: #364371;
  --lugia-navy-deep: #202942;
  --brand-red: var(--lugia-navy);
  --brand-blush: var(--lugia-body);
  --brand-mint: var(--lugia-belly);
  --brand-teal: var(--lugia-navy);
  --warm-black: #151925;
  --bg: var(--brand-blush);
  --surface: #ffffff;
  --surface-alt: #EEF0F7;
  --ink: var(--warm-black);
  --muted: rgba(21, 25, 37, 0.64);
  --line: rgba(54, 67, 113, 0.18);
  --blue: var(--brand-teal);
  --blue-soft: #E8ECF6;
  --red-50: var(--brand-blush);
  --red-100: #E8ECF6;
  --red-200: #D6DDEB;
  --red-300: var(--lugia-belly);
  --red-400: var(--lugia-belly-deep);
  --red-500: var(--lugia-navy);
  --red-600: #2F3A63;
  --red-700: #263050;
  --red-800: var(--lugia-navy-deep);
  --red-900: #171D33;
  --red-950: #101421;
  --red: var(--brand-red);
  --red-strong: #2F3A63;
  --red-pressed: var(--lugia-navy-deep);
  --red-soft: #E8ECF6;
  --red-ring: rgba(54, 67, 113, 0.18);
  --green: var(--brand-mint);
  --yellow: var(--lugia-body-shadow);
  --hp-fill: #6DA99C;
  --hp-fill-soft: #86BBB2;
  --hp-green: var(--hp-fill);
  --hp-orange: var(--hp-fill);
  --hp-red: var(--hp-fill);
  --damage-soft: rgba(190, 45, 60, 0.22);
  --damage-line: #B92D3D;
  --damage-strong: #83202D;
  --damage-ink: #5C1720;
  --damage-red: var(--damage-line);
  --damage-red-deep: var(--damage-ink);
  --damage-min: var(--damage-line);
  --damage-marker: var(--damage-strong);
  --purple: var(--brand-teal);
  --focus: var(--red-600);
  --selection: var(--red-600);
  --selection-soft: rgba(168, 179, 206, 0.32);
  --selection-ring: rgba(54, 67, 113, 0.18);
  --hover-bg: rgba(168, 179, 206, 0.22);
  --hover-border: rgba(104, 128, 184, 0.42);
  --hover-ink: var(--ink);
  --control-height: 44px;
  --control-radius: 8px;
  --control-padding-x: 12px;
  --control-line-height: 1.2;
}

:root {
  --font-ui: "Orbit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-emphasis: var(--font-ui);
  --font-display: var(--font-ui);
  --font-mono: var(--font-ui);

  --background: #F5F7FB;
  --surface: #FFFFFF;
  --surface-muted: #F8FAFF;
  --border: #DDE3F0;
  --border-strong: #B9C4DA;
  --text-primary: #182136;
  --text-secondary: #536079;
  --text-muted: #7B8498;
  --accent: #4058E8;
  --accent-strong: #27349D;
  --success: #27A866;
  --warning: #F59E0B;
  --danger: #EF4444;

  --type-normal-bg: #F0F2F5;
  --type-normal-text: #596171;
  --type-normal-border: #D8DDE6;
  --type-fire-bg: #FFF0EA;
  --type-fire-text: #C74420;
  --type-fire-border: #FFC6B3;
  --type-water-bg: #EAF3FF;
  --type-water-text: #2E6CCC;
  --type-water-border: #B9D7FF;
  --type-electric-bg: #FFF8D7;
  --type-electric-text: #9A6B00;
  --type-electric-border: #F8D879;
  --type-grass-bg: #EAF8EF;
  --type-grass-text: #287A42;
  --type-grass-border: #BDE8CA;
  --type-ice-bg: #EAFBFF;
  --type-ice-text: #2583A0;
  --type-ice-border: #B9ECF6;
  --type-fighting-bg: #FFF1E6;
  --type-fighting-text: #B85C11;
  --type-fighting-border: #F6C99C;
  --type-poison-bg: #F5ECFF;
  --type-poison-text: #7E3FB7;
  --type-poison-border: #DBC2F4;
  --type-ground-bg: #FFF3E8;
  --type-ground-text: #946135;
  --type-ground-border: #E8C8AA;
  --type-flying-bg: #EEF6FF;
  --type-flying-text: #477DB4;
  --type-flying-border: #C9DFF6;
  --type-psychic-bg: #FFF0F6;
  --type-psychic-text: #C74377;
  --type-psychic-border: #F6C1D7;
  --type-bug-bg: #F3F8E6;
  --type-bug-text: #667B14;
  --type-bug-border: #D7E8A8;
  --type-rock-bg: #F5F1E5;
  --type-rock-text: #73684A;
  --type-rock-border: #DDD2B0;
  --type-ghost-bg: #F2EEF7;
  --type-ghost-text: #664F83;
  --type-ghost-border: #D3C4E5;
  --type-dragon-bg: #EEF1FF;
  --type-dragon-text: #4656C9;
  --type-dragon-border: #C4CBF6;
  --type-dark-bg: #F0EEF0;
  --type-dark-text: #51464D;
  --type-dark-border: #D1CBD0;
  --type-steel-bg: #EEF6F8;
  --type-steel-text: #417182;
  --type-steel-border: #C4DEE7;
  --type-fairy-bg: #FFF0FF;
  --type-fairy-text: #B84EB8;
  --type-fairy-border: #F1C3F1;
  --type-unknown-bg: #EFF7F4;
  --type-unknown-text: #4C7B70;
  --type-unknown-border: #C8E2DB;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 1px 2px rgba(18, 30, 60, 0.04), 0 10px 28px rgba(35, 48, 85, 0.06);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  --bg: var(--background);
  --surface-alt: var(--surface-muted);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --blue: var(--accent);
  --blue-soft: #EEF2FF;
  --red: var(--accent);
  --red-100: #EEF2FF;
  --red-600: var(--accent);
  --red-700: var(--accent-strong);
  --red-pressed: #1F2879;
  --red-ring: rgba(64, 88, 232, 0.16);
  --selection: var(--accent);
  --selection-soft: #F0F4FF;
  --selection-ring: rgba(64, 88, 232, 0.18);
  --hover-bg: #F3F6FF;
  --hover-border: #9EAEF7;
  --hover-ink: var(--text-primary);
  --hp-fill: #38B96A;
  --hp-fill-soft: #DFF7E8;
  --hp-green: var(--hp-fill);
  --hp-orange: var(--warning);
  --hp-red: var(--danger);
  --damage-line: var(--danger);
  --damage-strong: #B91C1C;
  --damage-ink: #991B1B;
  --damage-soft: rgba(239, 68, 68, 0.12);
  --focus: var(--accent);
  --control-height: 42px;
  --control-radius: var(--radius-md);
}

html[lang="ja"] {
  --font-ui: "Orbit", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Meiryo", "Apple SD Gothic Neo", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-emphasis: var(--font-ui);
  --font-display: var(--font-ui);
  --font-mono: var(--font-ui);
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-size: inherit;
  line-height: var(--control-line-height);
}

button {
  min-height: 42px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
}

button:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--hover-ink);
}

button:active {
  border-color: var(--red-pressed);
  background: var(--red-pressed);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
  outline: none;
}

input:not([type="range"]):not(.hp-input):not(.hp-percent-input),
select {
  height: var(--control-height);
  min-height: var(--control-height);
  min-width: 0;
  overflow: hidden;
  padding: 0 var(--control-padding-x);
  outline: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-ring);
}

input[type="range"] {
  --range-progress: 0%;
  min-height: 30px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]:focus {
  box-shadow: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border: 1px solid rgba(44, 104, 123, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--brand-teal) 0 var(--range-progress), transparent var(--range-progress) 100%),
    var(--selection-soft);
}

input[type="range"]::-moz-range-track {
  height: 10px;
  border: 1px solid rgba(44, 104, 123, 0.22);
  border-radius: 999px;
  background: var(--selection-soft);
}

input[type="range"]::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--brand-teal);
}

input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23fff' stroke='%23241819' stroke-width='2'/%3E%3Cpath d='M2 16a14 14 0 0 1 28 0H2Z' fill='%23DB1A1A'/%3E%3Cpath d='M2 16h28' stroke='%23241819' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='5.5' fill='%23fff' stroke='%23241819' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%238CC7C4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 3px rgba(36, 24, 25, 0.18));
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23fff' stroke='%23241819' stroke-width='2'/%3E%3Cpath d='M2 16a14 14 0 0 1 28 0H2Z' fill='%23DB1A1A'/%3E%3Cpath d='M2 16h28' stroke='%23241819' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='5.5' fill='%23fff' stroke='%23241819' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%238CC7C4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 3px rgba(36, 24, 25, 0.18));
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.08);
}

input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.08);
}

input[type="range"]:disabled {
  opacity: 0.5;
  padding: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

strong,
b {
  font-weight: 400;
}

code,
.hp-view strong,
.hp-input,
.hp-percent-input,
.hp-readout,
.hp-damage-label strong,
.turn-speed-card strong,
.stat-box strong,
.stat-stage-value,
.opponent-damage-summary strong,
.damage-summary-main strong,
.damage-summary-grid strong,
.speed-metric strong,
.speed-formula-current code,
.speed-mode-card code,
.speed-boost-card code,
.speed-mode-card b,
.speed-row b,
.speed-boost-head span,
.speed-card-foot strong,
.speed-matrix th span,
.speed-matrix td,
.setup-speed-value,
.setup-speed-chip b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.toolbar h2,
.panel-head h2,
.selection-head h2,
.slot strong,
.select-card strong,
.dropdown-value strong,
.result-text strong,
.turn-speed-result,
.speed-formula-current strong,
.speed-mode-card strong,
.speed-row strong,
.opponent-move-title strong {
  font-family: var(--font-emphasis);
  font-weight: 400;
}

.app-shell {
  width: min(1800px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: clip;
  padding: 20px;
}

.static-home-fallback {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0;
  color: var(--text-primary);
}

.static-home-fallback h1 {
  font-size: 34px;
  line-height: 1.2;
}

.static-home-fallback p {
  margin-top: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.static-home-fallback nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.static-home-fallback a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.brand h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
}

.brand p,
.hint,
.muted,
.empty,
.field small {
  color: var(--muted);
  font-size: 15px;
}

.toolbar,
.panel-head,
.selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toolbar {
  margin-bottom: 14px;
}

.member-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.panel + .panel {
  margin-top: 14px;
}

.grid {
  display: grid;
  gap: 14px;
}

.team-layout {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.team-slots,
.result-list {
  display: grid;
  gap: 8px;
}

.team-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.roster-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.slot {
  position: relative;
  display: grid;
  grid-template-rows: minmax(72px, 1fr) auto;
  gap: 8px;
  align-items: end;
  justify-items: center;
  width: 100%;
  min-height: 158px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 240, 247, 0.9)),
    var(--surface);
  color: var(--ink);
  text-align: center;
  box-shadow:
    0 2px 0 rgba(54, 67, 113, 0.12),
    0 10px 22px rgba(21, 25, 37, 0.08);
  overflow: hidden;
}

.slot.selected {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.roster-status {
  position: absolute;
  left: 8px;
  top: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted);
  font-size: 12px;
  padding: 2px 6px;
}

.slot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(54, 67, 113, 0.14);
  border-radius: 6px;
  pointer-events: none;
}

.slot.empty-slot {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
}

.slot-plus {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
}

.slot-plus::before,
.slot-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: var(--lugia-belly-deep);
  transform: translate(-50%, -50%);
}

.slot-plus::before {
  width: 34px;
  height: 5px;
}

.slot-plus::after {
  width: 5px;
  height: 34px;
}

.slot.active {
  border-color: var(--selection);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(168, 179, 206, 0.28)),
    var(--surface);
  box-shadow:
    0 0 0 3px var(--selection-ring),
    0 4px 0 rgba(54, 67, 113, 0.18),
    0 16px 30px rgba(21, 25, 37, 0.12);
  transform: translateY(-2px);
}

.slot > span:not(.avatar):not(.order-badge):not(.slot-plus),
.select-card > span:not(.order-badge) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.slot strong,
.select-card strong {
  display: block;
  line-height: 1.25;
}

.slot .muted,
.select-card .muted {
  display: block;
  line-height: 1.3;
}

.slot .order-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.avatar {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  object-fit: contain;
}

.slot .avatar {
  width: 78px;
  height: 78px;
  align-self: center;
  border: 0;
  background: transparent;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.form-grid.single-field {
  grid-template-columns: minmax(0, 1fr);
}

.field {
  display: grid;
  gap: 6px;
}

.field > span,
.slider-row span:first-child {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
}

.search-box {
  position: relative;
}

.pokemon-input-wrap,
.item-input-wrap {
  position: relative;
  display: block;
}

.pokemon-input-wrap.has-thumb input {
  padding-left: 52px;
}

.item-input-wrap.has-thumb input {
  padding-left: 44px;
}

.selected-pokemon-thumb {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translateY(-50%);
}

.selected-item-thumb {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translateY(-50%);
}

.popular-pokemon-picker {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  margin-top: 2px;
}

.popular-pokemon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.popular-pokemon-button {
  position: relative;
  display: grid;
  grid-template-rows: 42px minmax(28px, auto);
  align-items: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 6px 6px;
  text-align: center;
}

.popular-pokemon-button:hover,
.popular-pokemon-button:focus {
  border-color: var(--red);
  background: var(--hover-bg);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--red-ring);
}

.popular-pokemon-button img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.popular-pokemon-button strong {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popular-rank {
  position: absolute;
  top: 5px;
  right: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.opponent-roster-editor {
  display: grid;
  gap: 14px;
}

.opponent-editor-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.opponent-editor-hero h2 {
  margin: 0;
}

.opponent-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.opponent-editor-layout {
  display: grid;
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.opponent-slot-panel,
.opponent-detail-panel,
.opponent-search-panel {
  min-width: 0;
}

.opponent-slot-panel .panel-head,
.opponent-search-panel .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.opponent-slot-panel .panel-head > .chip,
.opponent-search-panel .panel-head > .chip {
  min-width: max-content;
  white-space: nowrap;
}

.opponent-slot-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.opponent-slot-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px 10px 42px;
  text-align: left;
}

.opponent-slot-card:hover,
.opponent-slot-card:focus {
  border-color: var(--selection);
  background: var(--hover-bg);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.opponent-slot-card.active {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.opponent-slot-card.empty {
  grid-template-columns: 34px minmax(0, 1fr);
  border-style: dashed;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 240, 247, 0.72)),
    var(--surface);
}

.opponent-slot-card.empty .slot-plus {
  width: 28px;
  height: 28px;
}

.opponent-slot-card.empty .slot-plus::before {
  width: 28px;
  height: 4px;
}

.opponent-slot-card.empty .slot-plus::after {
  width: 4px;
  height: 28px;
}

.opponent-slot-number {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.opponent-slot-card.active .opponent-slot-number {
  background: var(--selection);
  color: #fff;
}

.opponent-slot-card .avatar {
  width: 52px;
  height: 52px;
}

.opponent-slot-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.opponent-slot-copy strong,
.opponent-slot-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-slot-copy small,
.opponent-slot-card.empty small {
  color: var(--muted);
}

.opponent-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.opponent-detail-identity {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.opponent-detail-identity h2 {
  margin: 0 0 6px;
}

.opponent-detail-sprite,
.opponent-detail-placeholder {
  width: 82px;
  height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
}

.opponent-detail-sprite {
  object-fit: contain;
}

.opponent-detail-placeholder {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 28px;
}

.opponent-detail-section,
.opponent-optional-toggle,
.opponent-optional-fields,
.opponent-suggested-panel {
  margin-top: 14px;
}

.opponent-optional-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 12px;
}

.opponent-optional-toggle strong {
  display: block;
  margin-bottom: 2px;
}

.opponent-section-head {
  margin-bottom: 12px;
}

.field > span small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.opponent-empty-detail {
  margin-top: 14px;
}

.opponent-add-search {
  margin-top: 12px;
}

.opponent-search-panel .popular-pokemon-picker {
  margin-top: 14px;
}

.opponent-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.opponent-suggested-chip {
  display: inline-grid;
  grid-template-columns: 26px auto;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 4px 10px 4px 6px;
}

.opponent-suggested-chip:hover,
.opponent-suggested-chip:focus {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.opponent-suggested-chip img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.opponent-suggested-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-optional-panel {
  margin-top: 14px;
}

.opponent-optional-panel .moves-grid {
  margin-top: 12px;
}

.custom-dropdown-field,
.custom-dropdown {
  position: relative;
}

.dropdown-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
  padding: 0 var(--control-padding-x);
  text-align: left;
}

.dropdown-trigger:hover,
.dropdown-trigger:focus {
  border-color: var(--red);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--red-ring);
}

.dropdown-trigger:disabled {
  border-color: var(--line);
  background: #f4f0e9;
  box-shadow: none;
}

.dropdown-value {
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.dropdown-value strong,
.result-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-arrow {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.lead-search {
  margin-top: 14px;
}

.opponent-lead-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.opponent-roster-select-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.opponent-roster-search-panel,
.opponent-selected-panel,
.opponent-selected-card,
.opponent-insight-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.opponent-roster-search-field {
  margin: 0;
}

.opponent-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opponent-filter-chip {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 6px 12px;
}

.opponent-filter-chip.active,
.opponent-filter-chip:hover,
.opponent-filter-chip:focus {
  border-color: var(--selection);
  background: var(--selection-soft);
  color: var(--selection);
}

.opponent-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}

.opponent-candidate-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.opponent-candidate-card:hover,
.opponent-candidate-card:focus {
  border-color: var(--selection);
  background: var(--hover-bg);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.opponent-candidate-card.selected {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.opponent-candidate-card:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.opponent-candidate-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}

.opponent-candidate-check {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
}

.opponent-candidate-card.selected .opponent-candidate-check {
  border-color: var(--selection);
  background: var(--selection);
  color: #fff;
}

.opponent-candidate-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.opponent-candidate-copy strong,
.opponent-candidate-tags small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-candidate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.opponent-candidate-tags small {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 2px 7px;
  font-size: 12px;
}

.opponent-selected-card,
.opponent-insight-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 12px;
}

.opponent-selected-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.opponent-selected-head > div,
.opponent-selected-head > span {
  min-width: 0;
}

.opponent-selected-head .chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

.opponent-selected-head strong {
  display: block;
  font-family: var(--font-emphasis);
  font-size: 18px;
  font-weight: 400;
}

.opponent-selected-head small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.opponent-selected-card .setup-opponent-selected-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-top: 0;
}

.opponent-reset-button {
  justify-self: start;
}

.opponent-insight-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.opponent-insight-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
}

.opponent-insight-row:last-child {
  border-bottom: 0;
}

.opponent-insight-row strong,
.opponent-insight-row small {
  display: block;
  min-width: 0;
  line-height: 1.25;
}

.opponent-insight-row small {
  color: var(--muted);
  font-size: 13px;
}

.opponent-insight-row b,
.opponent-insight-icon {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.opponent-insight-row.high b,
.opponent-insight-row.medium b,
.opponent-insight-row.active b {
  background: var(--selection-soft);
  color: var(--selection);
}

.compact-danger {
  min-height: 32px;
  border-color: rgba(213, 77, 77, 0.36);
  color: var(--brand-red);
  padding: 6px 10px;
}

.compact-danger:hover {
  border-color: var(--brand-red);
  background: rgba(213, 77, 77, 0.1);
  color: var(--brand-red);
}

.search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(23, 32, 31, 0.12);
}

.search-results button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  padding: 9px 12px;
  line-height: var(--control-line-height);
  text-align: left;
}

.search-results button:hover,
.search-results button:focus-visible,
.search-results button.keyboard-active {
  background: var(--hover-bg);
  color: var(--ink);
}

.search-results button.selected,
.search-results button.keyboard-active.selected {
  background: var(--selection-soft);
  color: var(--selection);
}

.search-results button:focus-visible,
.search-results button.keyboard-active {
  outline: 2px solid var(--selection);
  outline-offset: -2px;
}

.result-button:not(.has-thumb) {
  grid-template-columns: minmax(0, 1fr);
}

.custom-dropdown-menu button {
  grid-template-columns: minmax(0, 1fr);
}

.custom-dropdown-menu .muted {
  display: block;
}

.result-thumb {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}

.result-text {
  display: grid;
  min-width: 0;
}

.search-message {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 15px;
}

.team-image-parser-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.team-parser-head,
.team-parser-result-head,
.team-parser-upload-row,
.team-parser-status-row,
.team-parser-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-parser-upload-row,
.team-parser-status-row {
  flex-wrap: wrap;
}

.team-parser-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 2px solid var(--team-frame-dark, var(--border));
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--team-ink, var(--accent-strong));
  padding: 0 12px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1;
  cursor: pointer;
}

.team-parser-upload:hover {
  background: #F4F4F4;
}

.team-parser-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.team-parser-actions {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.team-parser-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.team-parser-order-warning {
  margin: 0;
  color: var(--team-navy, var(--accent-strong));
  font-size: 13px;
  font-weight: 700;
}

.team-parser-progress {
  position: relative;
  width: min(260px, 100%);
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
}

.team-parser-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-teal);
}

.team-parser-warning-list,
.team-parser-error {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 8%, #fff);
  color: var(--ink);
  padding: 9px 11px;
  font-size: 14px;
}

.team-parser-error {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, #fff);
}

.team-parser-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-parser-preview-card {
  display: grid;
  gap: 6px;
  margin: 0;
}

.team-parser-preview-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111;
}

.team-parser-preview-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.team-parser-preview-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.team-parser-preview-card figcaption > span:first-child {
  display: grid;
  min-width: 0;
}

.team-parser-preview-card figcaption small {
  color: var(--muted);
  font-size: 12px;
}

.team-parser-preview-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.team-parser-preview-actions button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.team-image-help-card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--team-yellow, #FFE48F));
  padding: var(--space-3);
}

.team-image-help-copy {
  display: grid;
  gap: 8px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}

.team-image-help-copy h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.team-image-help-copy p {
  margin: 0;
}

.team-image-help-copy a {
  color: var(--accent-strong);
  font-weight: 800;
}

.team-image-help-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.team-image-help-example {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.team-image-help-example img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111827;
}

.team-image-help-example figcaption {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.team-parser-debug-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.team-parser-debug-rect {
  position: absolute;
  border: 1px solid rgba(20, 184, 166, 0.9);
  background: rgba(20, 184, 166, 0.12);
}

.team-parser-debug-rect.card {
  border-color: rgba(245, 158, 11, 0.9);
  background: rgba(245, 158, 11, 0.1);
}

.team-parser-result-panel {
  display: grid;
  gap: 12px;
}

.team-parser-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-parser-slot-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.team-parser-field {
  position: relative;
  display: grid;
  gap: 5px;
}

.team-parser-field small {
  color: var(--muted);
  font-size: 12px;
}

.team-parser-field.needs-review input,
.team-parser-stat-field.needs-review input {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
  background: color-mix(in srgb, var(--warning) 7%, #fff);
}

.team-parser-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.team-parser-candidates button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.team-parser-move-grid,
.team-parser-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.team-parser-stat-field {
  display: grid;
  grid-template-columns: minmax(48px, 0.7fr) minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 6px;
}

.team-parser-stat-field span {
  color: var(--muted);
  font-size: 13px;
}

.team-parser-stat-field input {
  min-width: 0;
  text-align: right;
}

.team-parser-json-view {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.team-parser-json-view summary {
  cursor: pointer;
}

.team-parser-json-view textarea {
  width: 100%;
  margin-top: 10px;
  min-height: 260px;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre;
}

.team-image-review-content {
  display: grid;
  gap: 14px;
}

.team-image-review-screen,
.team-image-review-loading,
.team-image-review-empty,
.team-image-review-complete {
  display: grid;
  gap: 14px;
}

.team-image-review-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.team-image-review-stepper button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 7px 10px;
  text-align: left;
}

.team-image-review-stepper button.active {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.team-image-review-stepper button.saved {
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  background: color-mix(in srgb, var(--success) 8%, #fff);
}

.team-image-review-stepper button.ignored {
  opacity: 0.56;
}

.team-image-review-stepper button strong {
  display: inline-grid;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  place-items: center;
}

.team-image-review-stepper button span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-image-review-status {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 10px 12px;
  font-size: 14px;
}

.team-image-review-status strong {
  color: var(--ink);
  font-size: 14px;
}

.team-image-review-loading-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 160px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.team-image-review-loading-copy {
  display: grid;
  gap: 3px;
}

.team-image-review-loading-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.2;
}

.team-image-review-loading-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.team-image-review-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid color-mix(in srgb, var(--team-navy, var(--accent-strong)) 18%, transparent);
  border-top-color: var(--team-navy, var(--accent-strong));
  border-radius: 999px;
  animation: team-image-review-spin 0.8s linear infinite;
}

@keyframes team-image-review-spin {
  to {
    transform: rotate(360deg);
  }
}

.team-image-review-layout {
  display: grid;
  grid-template-columns: minmax(300px, 344px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.team-image-review-left,
.team-image-review-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.team-image-review-crops,
.team-image-review-summary {
  display: grid;
  gap: 10px;
}

.team-image-review-crop-grid {
  display: grid;
  gap: 10px;
}

.team-image-review-crop-card {
  display: grid;
  gap: 6px;
  margin: 0;
}

.team-image-review-crop-card > div {
  display: grid;
  min-height: 96px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101827;
  place-items: center;
}

.team-image-review-crop-card img {
  display: block;
  width: 100%;
  height: auto;
}

.team-image-review-crop-card figcaption {
  color: var(--muted);
  font-size: 12px;
}

.team-image-review-summary dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.team-image-review-summary dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.team-image-review-summary dt {
  color: var(--muted);
  font-size: 12px;
}

.team-image-review-summary dd {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.team-image-review-summary dd strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.team-image-review-summary dd small {
  color: var(--muted);
  font-size: 12px;
}

.team-image-review-stat-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.team-image-review-stat-summary span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 6px 8px;
  font-size: 12px;
}

.team-image-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.team-parser-form-choices {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.team-parser-form-choices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--team-navy, var(--ink));
  font-size: 13px;
  font-weight: 820;
}

.team-parser-form-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.team-parser-form-choice {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  border: 2px solid var(--team-border, var(--line));
  border-radius: 6px;
  background: #fff;
  color: var(--team-ink, var(--ink));
  padding: 8px 10px;
  text-align: left;
}

.team-parser-form-choice.active,
.team-parser-form-choice[aria-pressed="true"] {
  border-color: var(--team-blue, var(--accent));
  background: color-mix(in srgb, var(--team-blue, var(--accent)) 8%, #fff);
}

.team-parser-form-choice-art {
  display: grid;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--surface-alt);
  place-items: center;
}

.team-parser-form-choice-art img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.team-parser-form-choice-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.team-parser-form-choice-copy strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-parser-form-choice-copy .type-list {
  gap: 4px;
}

@media (max-width: 900px) {
  .team-image-review-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .team-image-review-layout {
    grid-template-columns: 1fr;
  }
}

.type-list,
.chip-list,
.status-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.type,
.chip,
.order-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink);
  padding: 3px 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
}

.type {
  border-color: color-mix(in srgb, var(--type-main, var(--line)) 58%, #fff);
  background: color-mix(in srgb, var(--type-light, var(--surface-alt)) 28%, #fff);
  color: var(--type-dark, var(--ink));
  white-space: nowrap;
}

.chip.active {
  border-color: var(--selection);
  background: var(--selection-soft);
  color: var(--selection);
}

.chip.medium {
  border-color: rgba(185, 45, 61, 0.32);
  background: rgba(185, 45, 61, 0.08);
  color: var(--damage-ink);
}

.battle-folder-tabs {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 4px;
}

.battle-folder-tab-list {
  display: flex;
  align-items: end;
  min-width: 0;
  overflow-x: auto;
  padding: 3px 2px 0;
  scrollbar-width: thin;
}

.battle-folder-tab {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-width: 86px;
  max-width: 150px;
  min-height: 34px;
  margin-right: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #fff);
  border-bottom-color: color-mix(in srgb, var(--line) 62%, #fff);
  border-radius: 8px 8px 0 0;
  background: var(--surface-alt);
  color: var(--ink);
  padding: 6px 10px 5px 9px;
  text-align: left;
}

.battle-folder-tab.active {
  z-index: 3;
  min-height: 40px;
  border-color: var(--selection);
  border-bottom-color: transparent;
  background: #fff;
  color: var(--selection);
  box-shadow: 0 -2px 0 var(--selection) inset, 0 5px 12px rgba(35, 58, 148, 0.08);
}

.battle-folder-index {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, #fff);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.battle-folder-tab.active .battle-folder-index {
  background: var(--selection);
  color: #fff;
}

.battle-folder-caption {
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding-top: 4px;
  font-size: 12px;
  font-weight: 400;
}

.bench-chip-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bench-damage-badge {
  position: absolute;
  right: 8px;
  top: -10px;
  z-index: 5;
  border: 1px solid color-mix(in srgb, var(--damage-line) 32%, #fff);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--damage-ink);
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.party-switcher {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.party-switcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.party-switcher-head strong {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--selection-soft);
  color: var(--selection);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
}

.party-chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: 8px;
  min-width: 0;
}

.party-chip {
  display: grid;
  grid-template-columns: auto 40px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 62px;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  padding: 7px 8px;
  text-align: left;
}

.party-chip.active {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--selection) 18%, transparent);
}

.party-chip-order {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.party-chip.active .party-chip-order {
  background: var(--selection);
  color: #fff;
}

.party-chip-sprite {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.party-chip-sprite img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

.party-chip-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.party-chip-text strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.party-chip-text span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-candidate-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.switch-candidate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.switch-candidate-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.switch-candidate-head strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.switch-candidate-head small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-candidate-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.switch-candidate-card {
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 82px;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  padding: 9px;
  text-align: left;
}

.switch-candidate-card.recommended {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.switch-candidate-card.danger {
  border-color: color-mix(in srgb, var(--damage-line) 34%, #fff);
  background: rgba(185, 45, 61, 0.06);
}

.switch-candidate-score {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.switch-candidate-card.recommended .switch-candidate-score {
  background: var(--selection);
  color: #fff;
}

.switch-candidate-card.danger .switch-candidate-score {
  background: rgba(185, 45, 61, 0.12);
  color: var(--damage-ink);
}

.switch-candidate-sprite,
.switch-candidate-sprite img {
  width: 48px;
  height: 48px;
}

.switch-candidate-sprite {
  display: inline-grid;
  place-items: center;
}

.switch-candidate-sprite img {
  object-fit: contain;
  image-rendering: pixelated;
}

.switch-candidate-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.switch-candidate-title,
.switch-candidate-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.switch-candidate-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-candidate-title em {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--selection);
  font-size: 12px;
  font-style: normal;
  line-height: 1.15;
  padding: 3px 7px;
}

.switch-candidate-meta small {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  padding: 2px 6px;
}

.switch-candidate-meta small.risk {
  border-color: color-mix(in srgb, var(--damage-line) 32%, #fff);
  background: rgba(185, 45, 61, 0.08);
  color: var(--damage-ink);
}

.switch-candidate-reason {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-candidate-card .type-list {
  gap: 3px;
}

.switch-candidate-card .type-badge {
  padding: 2px 6px;
  font-size: 11px;
}

.battle-secondary-rail {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.type.normal,
.type[data-type="normal"] { --type-light: #C1C2C1; --type-main: #9FA19F; --type-dark: #676967; }
.type.fire,
.type[data-type="fire"] { --type-light: #EF7374; --type-main: #E62829; --type-dark: #961A1B; }
.type.water,
.type[data-type="water"] { --type-light: #74ACF5; --type-main: #2980EF; --type-dark: #1B539B; }
.type.electric,
.type[data-type="electric"] { --type-light: #FCD659; --type-main: #FAC000; --type-dark: #A37D00; }
.type.grass,
.type[data-type="grass"] { --type-light: #82C274; --type-main: #3FA129; --type-dark: #29691B; }
.type.ice,
.type[data-type="ice"] { --type-light: #81DFF7; --type-main: #3DCEF3; --type-dark: #28869E; }
.type.fighting,
.type[data-type="fighting"] { --type-light: #FFAC59; --type-main: #FF8000; --type-dark: #A65300; }
.type.poison,
.type[data-type="poison"] { --type-light: #B884DD; --type-main: #9141CB; --type-dark: #5E2A84; }
.type.ground,
.type[data-type="ground"] { --type-light: #B88E6F; --type-main: #915121; --type-dark: #5E3515; }
.type.flying,
.type[data-type="flying"] { --type-light: #ADD2F5; --type-main: #81B9EF; --type-dark: #54789B; }
.type.psychic,
.type[data-type="psychic"] { --type-light: #F584A8; --type-main: #EF4179; --type-dark: #9B2A4F; }
.type.bug,
.type[data-type="bug"] { --type-light: #B8C26A; --type-main: #91A119; --type-dark: #5E6910; }
.type.rock,
.type[data-type="rock"] { --type-light: #CBC7AD; --type-main: #AFA981; --type-dark: #726E54; }
.type.ghost,
.type[data-type="ghost"] { --type-light: #A284A2; --type-main: #704170; --type-dark: #492A49; }
.type.dragon,
.type[data-type="dragon"] { --type-light: #8D98EC; --type-main: #5060E1; --type-dark: #343E92; }
.type.dark,
.type[data-type="dark"] { --type-light: #998B8C; --type-main: #624D4E; --type-dark: #403233; }
.type.steel,
.type[data-type="steel"] { --type-light: #98C2D1; --type-main: #60A1B8; --type-dark: #3E6978; }
.type.fairy,
.type[data-type="fairy"] { --type-light: #F5A2F5; --type-main: #EF70EF; --type-dark: #9B499B; }
.type.unknown,
.type[data-type="unknown"] { --type-light: #9DC1B7; --type-main: #68A090; --type-dark: #44685E; }

.slider-grid,
.stats-preview,
.moves-grid {
  display: grid;
  gap: 8px;
}

.inline-actions,
.optional-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.optional-entry {
  justify-content: space-between;
}

.slider-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
}

.stats-preview {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.stat-box {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 8px;
}

.stat-box > .muted,
.roster-ev-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.stat-box strong {
  display: block;
  font-size: 18px;
}

.nature-stat-badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.nature-stat-badge.up {
  background: #EAF8F0;
  color: #167348;
}

.nature-stat-badge.down {
  background: #FFF0F0;
  color: #B91C1C;
}

.stat-nature-detail {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.25;
}

.stat-box.nature-up,
.roster-ev-cell.nature-up {
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
  background: color-mix(in srgb, var(--success) 7%, var(--surface-alt));
}

.stat-box.nature-down,
.roster-ev-cell.nature-down {
  border-color: color-mix(in srgb, var(--danger) 26%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface-alt));
}

.moves-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.move-editor-panel {
  padding-top: 14px;
}

.move-field-meta {
  min-height: 24px;
  overflow: visible;
  flex-wrap: wrap;
}

.move-field-meta > span:not(.type) {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.move-field-meta.is-empty {
  visibility: hidden;
}

.ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.ghost:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--ink);
}

.compact-button {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 13px;
}

.compact-segmented button {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 13px;
}

.danger {
  border-color: var(--red);
  background: var(--red);
}

.primary {
  border-color: var(--red);
  background: var(--red);
}

.primary:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--ink);
}

.selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.battle-setup-page {
  display: grid;
  gap: 14px;
}

.battle-setup-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(360px, 1.4fr) auto;
  gap: 14px;
  align-items: center;
}

.battle-setup-hero-copy h2 {
  margin: 0;
}

.battle-setup-top-actions,
.setup-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.battle-setup-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.setup-section-head {
  align-items: start;
}

.setup-status-panel,
.setup-current-action {
  display: none;
  gap: 12px;
}

.setup-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.setup-stepper-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.setup-stepper-item span {
  display: inline-grid;
  grid-row: span 2;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
}

.setup-stepper-item strong,
.setup-stepper-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-stepper-item strong {
  line-height: 1.2;
  white-space: normal;
}

.setup-stepper-item small {
  color: var(--muted);
  font-size: 13px;
}

.setup-stepper-item.active,
.setup-stepper-item.done {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.setup-stepper-item.active span,
.setup-stepper-item.done span {
  background: var(--selection);
  color: #fff;
}

.setup-current-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.setup-step-toggle,
.battle-mobile-recommendations,
.mobile-damage-tabs,
.damage-tab-switch-panel,
.damage-tab-risk-panel {
  display: none;
}

.roster-candidate-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.setup-candidate-grid,
.setup-final-candidate-grid,
.setup-opponent-selected-grid,
.setup-lead-slots {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.setup-candidate-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.setup-final-candidate-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.setup-opponent-selected-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.setup-lead-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-candidate-card,
.setup-opponent-card,
.setup-final-card,
.setup-lead-slot {
  position: relative;
  display: grid;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.setup-candidate-card {
  grid-template-columns: 32px 54px minmax(0, 1fr) auto;
}

.setup-opponent-card.selected {
  grid-template-columns: 32px 54px minmax(0, 1fr);
  padding-right: 46px;
}

.setup-final-card,
.setup-lead-slot.selected {
  grid-template-columns: 32px 54px minmax(0, 1fr);
}

.setup-candidate-card:hover,
.setup-candidate-card:focus,
.setup-opponent-card.selected:hover,
.setup-opponent-card.selected:focus,
.setup-final-card:hover,
.setup-final-card:focus {
  border-color: var(--selection);
  background: var(--hover-bg);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.setup-candidate-card.selected,
.setup-opponent-card.selected,
.setup-final-card.selected,
.setup-lead-slot.selected {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.setup-candidate-card:disabled,
.setup-final-card:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.setup-card-order {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
}

.selected > .setup-card-order,
.setup-candidate-card.selected .setup-card-order,
.setup-final-card.selected .setup-card-order {
  background: var(--selection);
  color: #fff;
}

.setup-card-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.setup-card-copy strong,
.setup-card-copy small,
.setup-card-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-card-meta,
.setup-card-copy small {
  color: var(--muted);
  font-size: 13px;
}

.setup-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.setup-card-foot small {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 2px 7px;
}

.setup-card-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 7px;
  white-space: nowrap;
}

.setup-card-status.complete {
  border-color: var(--selection);
  background: var(--selection-soft);
  color: var(--selection);
}

.setup-remove-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.setup-opponent-card.empty,
.setup-lead-slot.empty {
  min-height: 92px;
  justify-items: center;
  border-style: dashed;
  background: var(--surface-alt);
  color: var(--muted);
  text-align: center;
}

.setup-opponent-card.empty .slot-plus {
  width: 24px;
  height: 24px;
}

.setup-opponent-card.empty .slot-plus::before {
  width: 24px;
  height: 4px;
}

.setup-opponent-card.empty .slot-plus::after {
  width: 4px;
  height: 24px;
}

.setup-lead-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.final-selection-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(420px, 1.45fr) minmax(280px, 0.9fr);
  gap: 14px;
  align-items: start;
  margin-top: 12px;
}

.final-team-panel,
.final-slots-panel,
.final-strategy-panel,
.selection-explanation-panel,
.selection-matchup-summary-panel,
.selection-strategy-card,
.selection-recommendation-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.final-team-panel,
.final-slots-panel,
.final-strategy-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 12px;
}

.final-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.final-panel-head.compact {
  align-items: center;
}

.final-panel-head h3 {
  margin: 0;
  font-family: var(--font-emphasis);
  font-size: 20px;
  font-weight: 400;
}

.final-panel-head .hint {
  margin: 2px 0 0;
}

.final-panel-head .chip,
.final-panel-head button {
  flex: 0 0 auto;
}

.final-team-panel .setup-final-candidate-grid {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.final-team-panel .setup-final-card {
  min-height: 88px;
}

.final-lead-slots {
  margin-top: 0;
}

.final-slots-panel .setup-lead-slot.selected {
  align-content: start;
  min-height: 172px;
  padding: 14px;
}

.final-slots-panel .setup-lead-slot.empty {
  min-height: 172px;
}

.final-slots-panel .setup-lead-slot .avatar {
  width: 72px;
  height: 72px;
}

.selection-explanation-list,
.selection-matchup-list,
.selection-recommendation-list {
  display: grid;
  gap: 8px;
}

.selection-explanation-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.selection-explanation-card,
.selection-matchup-row,
.selection-recommendation-option {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.selection-explanation-card {
  display: grid;
  gap: 8px;
}

.selection-explanation-card strong,
.selection-recommendation-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-explanation-card p,
.selection-recommendation-foot p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.selection-explanation-card .chip {
  justify-self: start;
}

.selection-matchup-list {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.selection-matchup-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.selection-matchup-row img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.selection-matchup-row strong,
.selection-matchup-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-matchup-row small {
  color: var(--muted);
  font-size: 12px;
}

.selection-matchup-row b {
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.selection-matchup-row.good b {
  background: rgba(69, 177, 99, 0.14);
  color: #236b36;
}

.selection-matchup-row.cover b {
  background: rgba(107, 72, 208, 0.14);
  color: #5234a1;
}

.selection-matchup-row.caution b {
  background: rgba(226, 132, 49, 0.14);
  color: #9a571b;
}

.selection-insight-list {
  max-height: none;
}

.selection-recommendation-option {
  display: grid;
  gap: 10px;
}

.selection-recommendation-head,
.selection-recommendation-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.selection-recommendation-members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.selection-recommendation-members span {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 6px;
}

.selection-recommendation-members img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.selection-recommendation-members small {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-recommendation-foot p {
  grid-column: 1 / -1;
}

.select-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.select-card.selected {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.setup-speed-panel {
  display: grid;
  gap: 12px;
}

.setup-speed-warning {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--damage-line) 26%, #fff);
  border-radius: 8px;
  background: rgba(185, 45, 61, 0.07);
  color: var(--damage-ink);
  padding: 10px 12px;
}

.setup-speed-warning strong {
  font-family: var(--font-emphasis);
}

.setup-speed-warning span {
  min-width: 0;
}

.setup-speed-warning small {
  grid-column: 2;
  color: color-mix(in srgb, var(--damage-ink) 82%, var(--muted));
}

.setup-speed-head {
  align-items: start;
}

.setup-speed-head .hint {
  margin-top: 4px;
}

.setup-speed-ladder {
  display: grid;
  gap: 7px;
}

.setup-speed-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 12px;
}

.setup-speed-row {
  display: grid;
  grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.setup-speed-my {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.setup-speed-my img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

.setup-speed-my span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.setup-speed-my strong,
.setup-speed-my small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-speed-my small {
  color: var(--muted);
  font-size: 12px;
}

.setup-speed-value {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 30px;
  border-radius: 8px;
  background: var(--red-100);
  color: var(--red-700);
  padding: 4px 7px;
}

.setup-speed-opponents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  border: 1px dashed color-mix(in srgb, var(--line) 84%, #fff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-alt) 55%, #fff);
  padding: 7px;
}

.setup-speed-opponents.empty-slot {
  border-color: transparent;
  background: transparent;
}

.setup-speed-opponents.is-tie {
  border-style: solid;
  border-color: color-mix(in srgb, var(--selection) 28%, #fff);
  background: var(--selection-soft);
}

.setup-speed-anchor {
  display: grid;
  align-items: center;
  justify-items: end;
  min-height: 42px;
  color: var(--muted);
  font-size: 13px;
  padding-right: 4px;
}

.setup-speed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.15;
}

.setup-speed-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-speed-chip b {
  color: var(--red-700);
}

.setup-speed-chip.mode {
  border-color: color-mix(in srgb, var(--damage-line) 34%, #fff);
  background: rgba(185, 45, 61, 0.08);
  color: var(--damage-ink);
}

.setup-speed-chip.neutral {
  border-color: color-mix(in srgb, var(--selection) 30%, #fff);
}

.setup-speed-chip.positive {
  border-color: color-mix(in srgb, var(--hp-fill) 48%, #fff);
  background: color-mix(in srgb, var(--hp-fill-soft) 18%, #fff);
}

.battle-screen {
  display: grid;
  grid-template-rows: auto auto minmax(160px, auto) auto minmax(220px, auto);
  gap: 10px;
  border-radius: 8px;
  background: var(--battle-field-bg, transparent);
  padding: 10px;
  transition: background-color 160ms ease, background 160ms ease;
}

.battle-screen.field-grass {
  --battle-field-bg: #EAF7E8;
}

.battle-screen.field-misty {
  --battle-field-bg: #F6EAF8;
}

.battle-screen.field-psychic {
  --battle-field-bg: #FCEAF2;
}

.battle-screen.field-electric {
  --battle-field-bg: #FFF7D8;
}

.battle-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, auto) auto;
  gap: 12px;
  align-items: center;
}

.turn-title {
  font-family: var(--font-emphasis);
  font-size: 28px;
  font-weight: 400;
}

.battle-turn-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.battle-top-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.battle-top-pill {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 170px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  padding: 5px 9px;
}

.battle-top-pill small {
  color: var(--muted);
  font-size: 11px;
}

.battle-top-pill strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-top-pill.tone-empty {
  background: var(--surface-alt);
}

.battle-top-pill.tone-room,
.battle-top-pill.tone-active,
.battle-top-pill.tone-mine,
.battle-top-pill.tone-tie,
.battle-top-pill[class*="tone-field-"],
.battle-top-pill[class*="tone-weather-"] {
  border-color: var(--selection-ring);
  background: var(--selection-soft);
}

.battle-top-pill.tone-opponent {
  border-color: rgba(185, 45, 61, 0.28);
  background: rgba(185, 45, 61, 0.08);
}

.battle-context-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
}

.battle-context-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.battle-context-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.battle-context-head strong {
  font-family: var(--font-emphasis);
  font-size: 18px;
  font-weight: 400;
}

.battle-context-head small,
.battle-context-detail {
  color: var(--muted);
  font-size: 12px;
}

.battle-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px;
}

.battle-context-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 8px 9px;
}

.battle-context-item.active {
  border-color: var(--selection-ring);
  background: #fff;
}

.battle-context-label {
  color: var(--muted);
  font-size: 11px;
}

.battle-context-value {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-context-item.tone-weather-sand {
  border-color: rgba(168, 121, 61, 0.35);
  background: rgba(168, 121, 61, 0.12);
}

.battle-context-item.tone-weather-rain {
  border-color: rgba(55, 121, 200, 0.35);
  background: rgba(55, 121, 200, 0.10);
}

.battle-context-item.tone-weather-snow,
.battle-context-item.tone-weather-hail {
  border-color: rgba(79, 143, 184, 0.35);
  background: rgba(129, 223, 247, 0.14);
}

.battle-context-item.tone-weather-sun {
  border-color: rgba(216, 154, 0, 0.35);
  background: rgba(252, 214, 89, 0.18);
}

.battle-context-item.tone-field-grass {
  border-color: rgba(63, 161, 41, 0.30);
  background: #EAF7E8;
}

.battle-context-item.tone-field-misty {
  border-color: rgba(155, 91, 168, 0.30);
  background: #F6EAF8;
}

.battle-context-item.tone-field-psychic {
  border-color: rgba(201, 76, 120, 0.30);
  background: #FCEAF2;
}

.battle-context-item.tone-field-electric {
  border-color: rgba(163, 125, 0, 0.30);
  background: #FFF7D8;
}

.battle-context-item.tone-room,
.battle-context-item.tone-mine,
.battle-context-item.tone-tie {
  border-color: var(--selection-ring);
  background: var(--selection-soft);
}

.battle-context-item.tone-opponent {
  border-color: rgba(185, 45, 61, 0.30);
  background: rgba(185, 45, 61, 0.08);
}

.battle-context-item.tone-loading,
.battle-context-item.tone-empty {
  opacity: 0.82;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 4px;
}

.segmented button,
.icon-button {
  min-width: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 8px;
}

.segmented button.active {
  background: var(--selection-soft);
  color: var(--selection);
}

.weather-group {
  --weather-color: var(--selection);
  --weather-soft: var(--selection-soft);
}

.weather-button {
  color: var(--weather-color);
}

.weather-button svg {
  display: block;
  width: 24px;
  height: 24px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.weather-button svg circle {
  fill: currentColor;
  stroke: currentColor;
}

.weather-button[data-weather-kind="sand"] {
  --weather-color: #A8793D;
  --weather-soft: rgba(168, 121, 61, 0.18);
}

.weather-button[data-weather-kind="rain"] {
  --weather-color: #3779C8;
  --weather-soft: rgba(55, 121, 200, 0.18);
}

.weather-button[data-weather-kind="snow"],
.weather-button[data-weather-kind="hail"] {
  --weather-color: #4F8FB8;
  --weather-soft: rgba(129, 223, 247, 0.24);
}

.weather-button[data-weather-kind="sun"] {
  --weather-color: #D89A00;
  --weather-soft: rgba(252, 214, 89, 0.28);
}

.segmented .weather-button.active {
  background: var(--weather-soft);
  color: var(--weather-color);
  box-shadow: inset 0 0 0 1px currentColor;
}

.field-group button {
  --field-color: var(--selection);
  --field-soft: var(--selection-soft);
}

.field-group button[data-field-kind="grass"] {
  --field-color: #3FA129;
  --field-soft: #EAF7E8;
}

.field-group button[data-field-kind="misty"] {
  --field-color: #9B5BA8;
  --field-soft: #F6EAF8;
}

.field-group button[data-field-kind="psychic"] {
  --field-color: #C94C78;
  --field-soft: #FCEAF2;
}

.field-group button[data-field-kind="electric"] {
  --field-color: #A37D00;
  --field-soft: #FFF7D8;
}

.segmented.field-group button.active {
  background: var(--field-soft);
  color: var(--field-color);
  box-shadow: inset 0 0 0 1px currentColor;
}

.pokemon-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.pokemon-stage.top-stage {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.pokemon-identity-cluster {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.pokemon-stage-tabs {
  grid-column: 1 / -1;
  min-width: 0;
}

.pokemon-stage.top-stage .stage-img {
  width: 142px;
  height: 142px;
  justify-self: center;
}

.pokemon-stage.top-stage .pokemon-info {
  min-width: 0;
}

.pokemon-stage.top-stage .battle-opponent-editor,
.pokemon-stage.top-stage .hp-row,
.pokemon-stage.top-stage .hp-damage-readout {
  max-width: 625px;
}

.pokemon-stage.top-stage .opponent-top-moves-preview {
  max-width: none;
}

.pokemon-stage.top-stage .battle-opponent-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pokemon-stage.top-stage .opponent-top-moves-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.top-stage-analysis-row {
  display: grid;
  grid-template-columns: minmax(0, 625px) minmax(440px, 500px);
  gap: 12px;
  align-items: start;
  justify-content: start;
  min-width: 0;
}

.top-stage-analysis-row.no-moves {
  grid-template-columns: minmax(440px, 500px);
}

.top-stage-moves-slot {
  min-width: 0;
}

.pokemon-stage-side {
  align-self: start;
  min-width: 0;
}

.pokemon-stage-side .turn-speed-panel {
  background: var(--surface-alt);
  margin-top: 10px;
}

.battle-action-recommendation-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 0;
  background: #fff;
}

.battle-action-head {
  gap: 8px;
}

.battle-action-head .hint {
  margin: 2px 0 0;
}

.battle-action-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 4px;
}

.battle-action-tabs button {
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 6px 8px;
}

.battle-action-tabs button.active {
  background: #fff;
  color: var(--selection);
  box-shadow: 0 0 0 1px var(--selection-ring);
}

.battle-action-list {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.battle-action-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
  min-height: 0;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.battle-action-card.top-ranked,
.battle-action-card.active {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.battle-action-card:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
}

.battle-action-rank {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.battle-action-card.top-ranked .battle-action-rank,
.battle-action-card.active .battle-action-rank {
  background: var(--selection);
  color: #fff;
}

.battle-action-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.battle-action-title-row,
.battle-action-meta-row,
.battle-action-tags,
.battle-action-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.battle-action-title-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-action-title-row em {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  padding: 2px 6px;
}

.battle-action-title-row em.safe {
  border-color: color-mix(in srgb, var(--hp-fill) 42%, #fff);
  background: color-mix(in srgb, var(--hp-fill-soft) 18%, #fff);
  color: #28675c;
}

.battle-action-title-row em.read {
  border-color: color-mix(in srgb, var(--selection) 32%, #fff);
  background: var(--selection-soft);
  color: var(--selection);
}

.battle-action-title-row em.long {
  border-color: color-mix(in srgb, #A37D00 36%, #fff);
  background: rgba(252, 214, 89, 0.24);
  color: #7A5B00;
}

.battle-action-title-row em.risk {
  border-color: color-mix(in srgb, var(--damage-line) 36%, #fff);
  background: rgba(185, 45, 61, 0.08);
  color: var(--damage-ink);
}

.battle-action-meta-row span,
.battle-action-tags small,
.battle-action-reasons small {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  padding: 2px 6px;
}

.battle-action-worst {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.battle-action-reasons {
  align-items: stretch;
}

.battle-action-reasons small {
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  white-space: normal;
}

.battle-action-score {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  border-radius: 8px;
  background: var(--red-100);
  color: var(--red-700);
  font-family: var(--font-mono);
  font-size: 12px;
}

.pokemon-stage.mine {
  grid-template-columns: 160px minmax(0, 1fr) minmax(280px, 420px);
}

.pokemon-stage.offense {
  grid-template-columns: minmax(320px, 0.72fr) minmax(560px, 1.48fr);
  align-items: start;
  min-height: 0;
}

.offense-side-panel {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.offense-side-panel .stage-img {
  width: 108px;
  height: 108px;
  align-self: start;
  justify-self: start;
}

.offense-side-panel .pokemon-info {
  min-width: 0;
}

.offense-move-zone {
  min-width: 0;
}

.pokemon-info {
  display: grid;
  gap: 8px;
}

.pokemon-name {
  font-family: var(--font-emphasis);
  font-size: 24px;
  font-weight: 400;
}

.battle-opponent-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 210px));
  gap: 8px;
  align-items: start;
  max-width: 430px;
}

.battle-opponent-editor .field > span {
  font-size: 12px;
}

.battle-opponent-editor input,
.battle-opponent-editor .dropdown-trigger {
  min-height: 36px;
  padding: 7px 10px;
}

.battle-opponent-editor .dropdown-value .muted {
  display: none;
}

.opponent-top-moves-preview {
  display: grid;
  gap: 6px;
  max-width: 430px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.opponent-top-moves-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.opponent-top-moves-head strong {
  color: var(--selection);
  font-family: var(--font-emphasis);
  font-size: 12px;
  font-weight: 400;
}

.opponent-top-moves-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.opponent-top-move-chip {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 6px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 6px;
}

.opponent-top-move-rank {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.opponent-top-move-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.opponent-top-move-name strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-top-move-name .type-badge {
  flex: 0 0 auto;
}

.opponent-top-move-name .move-name-with-pp {
  flex: 1 1 auto;
}

.opponent-top-move-name .move-pp-badge {
  min-height: 15px;
  padding-inline: 4px;
  font-size: 9px;
}

.opponent-top-move-damage {
  grid-column: 2;
  overflow: hidden;
  color: var(--damage-ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-stage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.stat-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  padding: 4px 7px;
}

.stat-stage-badge-remove {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  min-height: 16px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.stat-stage-badge-remove:hover,
.stat-stage-badge-remove:focus {
  background: color-mix(in srgb, currentColor 22%, transparent);
}

.stat-stage-badge.positive {
  border-color: rgba(62, 150, 96, 0.35);
  background: rgba(62, 150, 96, 0.12);
  color: var(--green);
}

.stat-stage-badge.negative {
  border-color: rgba(213, 77, 77, 0.35);
  background: rgba(213, 77, 77, 0.12);
  color: var(--brand-red);
}

.mega-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  min-height: 32px;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    linear-gradient(135deg, rgba(242, 99, 178, 0.14), rgba(28, 189, 212, 0.14) 46%, rgba(128, 214, 67, 0.13)),
    var(--surface);
  color: var(--text-primary);
  font-weight: 850;
  padding: 5px 10px 5px 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.mega-button-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-image: url("/static/mega-evolution.webp");
  background-position: center;
  background-size: cover;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.84),
    0 1px 5px rgba(54, 72, 106, 0.2);
}

.mega-button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background:
    linear-gradient(135deg, rgba(242, 99, 178, 0.2), rgba(28, 189, 212, 0.2) 46%, rgba(128, 214, 67, 0.18)),
    #FFFFFF;
  color: var(--accent-strong);
}

.mega-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.45);
}

.mega-button:disabled:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    linear-gradient(135deg, rgba(242, 99, 178, 0.14), rgba(28, 189, 212, 0.14) 46%, rgba(128, 214, 67, 0.13)),
    var(--surface);
  color: var(--text-primary);
}

.stage-img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.hp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.hp-meter {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.hp-damage-labels {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-height: 25px;
  overflow-x: auto;
  overflow-y: hidden;
}

.hp-damage-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  padding: 4px 7px;
  white-space: nowrap;
}

.hp-damage-label b {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
}

.hp-damage-label strong {
  color: var(--damage-ink);
  font-size: 12px;
}

.hp-damage-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--damage-line);
}

.hp-damage-label.mode .hp-damage-dot {
  background: var(--damage-strong);
}

.hp-damage-label.max .hp-damage-dot {
  background: var(--damage-soft);
  box-shadow: inset 0 0 0 1px var(--damage-line);
}

.hp-damage-label.survive .hp-damage-dot {
  background: #5B8062;
}

.hp-damage-readout {
  align-items: center;
}

.hp-bar {
  position: relative;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  box-shadow: inset 0 1px 2px rgba(21, 25, 37, 0.14);
}

.pokemon-stage:not(.mine) .hp-row,
.pokemon-stage:not(.mine) .hp-damage-readout {
  max-width: 420px;
}

.hp-fill {
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: linear-gradient(90deg, var(--hp-fill), var(--hp-fill-soft));
  transition: width 160ms ease, background-color 160ms ease;
}

.hp-fill.hp-healthy {
  background: linear-gradient(90deg, var(--hp-fill), var(--hp-fill-soft));
}

.hp-fill.hp-warning {
  background: linear-gradient(90deg, var(--hp-fill), var(--hp-fill-soft));
}

.hp-fill.hp-danger {
  background: linear-gradient(90deg, var(--hp-fill), var(--hp-fill-soft));
}

.battle-active-pokemon-layout .hp-fill,
.battle-active-pokemon-layout .hp-fill.hp-healthy,
.battle-active-pokemon-layout .hp-fill.hp-warning,
.battle-active-pokemon-layout .hp-fill.hp-danger {
  background: var(--hp-fill);
}

.hp-damage-preview {
  position: absolute;
  right: auto;
  pointer-events: none;
}

.hp-damage-preview.possible {
  top: 2px;
  bottom: 2px;
  z-index: 2;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--damage-strong) 34%, transparent) 0 5px,
      color-mix(in srgb, var(--damage-strong) 16%, transparent) 5px 10px
    ),
    var(--damage-soft);
}

.hp-view,
.hp-editor {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 112px;
}

.hp-view strong {
  min-width: 56px;
  text-align: right;
  white-space: nowrap;
}

.hp-readout {
  min-width: 24px;
  color: var(--muted);
  white-space: nowrap;
}

.hp-row[data-hp-side="my"] .hp-view,
.hp-row[data-hp-side="my"] .hp-editor {
  min-width: 224px;
}

.hp-row[data-hp-side="my"] .hp-view strong,
.hp-row[data-hp-side="my"] .hp-readout {
  min-width: 92px;
}

.hp-input {
  width: 72px;
  min-height: 34px;
  padding: 6px 8px;
  text-align: right;
}

.hp-percent-control {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  white-space: nowrap;
}

.hp-percent-input {
  width: 58px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
  padding: 6px 8px;
  text-align: right;
}

.hp-icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-color: var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--selection);
  padding: 0;
  font-family: var(--font-emphasis);
  font-size: 17px;
  font-weight: 400;
}

.hp-icon-button:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--ink);
}

.battle-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  overflow: visible;
}

.battle-center-spacer {
  min-width: 0;
}

.battle-bottom-row {
  position: relative;
  min-width: 0;
}

.battle-party-rail {
  min-width: 0;
  margin-bottom: 12px;
}

.battle-party-rail .party-switcher {
  align-content: start;
  padding: 0;
}

.battle-party-rail .party-chip-list {
  grid-template-columns: 1fr;
}

.battle-party-rail .party-chip {
  min-height: 56px;
}

@media (min-width: 2280px) {
  .battle-bottom-row .battle-party-rail {
    position: absolute;
    top: 0;
    right: calc(100% + 12px);
    width: clamp(220px, calc((100vw - min(1800px, 100vw)) / 2 - 16px), 420px);
    margin-bottom: 0;
  }
}

.switch-button {
  display: inline-grid;
  justify-self: center;
  place-items: center;
  width: 64px;
  height: 44px;
  min-height: 44px;
  border-radius: 8px;
  border-color: var(--selection);
  background: #fff;
  color: var(--selection);
  padding: 0;
  box-shadow: 0 3px 0 rgba(54, 67, 113, 0.16);
}

.switch-button:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--ink);
}

.switch-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(54, 67, 113, 0.16);
}

.switch-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.previous-turn-button,
.next-turn-button {
  position: fixed;
  top: 50%;
  z-index: 80;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  min-height: 58px;
  border-color: var(--red);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  padding: 0;
  box-shadow: 0 14px 32px rgba(230, 40, 41, 0.28);
  transform: translateY(-50%);
}

.previous-turn-button {
  left: 18px;
}

.next-turn-button {
  right: 18px;
}

.previous-turn-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  box-shadow: none;
}

.previous-turn-button:not(:disabled):hover,
.next-turn-button:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--hover-ink);
}

.previous-turn-button:active,
.next-turn-button:active {
  transform: translateY(calc(-50% + 1px));
}

.next-turn-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.turn-speed-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.turn-speed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.turn-speed-result {
  font-size: 18px;
  line-height: 1.1;
}

.turn-speed-result.mine {
  color: var(--green);
}

.turn-speed-result.opponent {
  color: var(--brand-red);
}

.turn-speed-result.tie {
  color: var(--selection);
}

.turn-speed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
  align-items: start;
}

.turn-speed-card {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 7px 8px;
}

.turn-speed-card.warning {
  border-color: var(--brand-red);
  background: #FFF3F3;
}

.turn-speed-card span,
.turn-speed-card small {
  color: var(--muted);
  font-size: 11px;
}

.turn-speed-card strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
}

.turn-speed-card .assumptions {
  margin-top: 4px;
  font-size: 12px;
}

.battle-settings-slot {
  position: relative;
  justify-self: end;
  min-width: 0;
  z-index: 10;
}

.battle-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  padding: 7px 10px;
}

.battle-settings-toggle.active {
  border-color: var(--selection);
  background: var(--selection-soft);
  color: var(--selection);
}

.battle-settings-toggle .cube {
  width: 18px;
  height: 18px;
}

.battle-settings-toggle strong {
  max-width: 150px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 12px;
  width: min(680px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(23, 32, 31, 0.16);
}

.battle-settings-panel section {
  display: grid;
  gap: 6px;
}

.battle-settings-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.battle-settings-panel .segmented {
  display: flex;
  flex-wrap: wrap;
  border-radius: 8px;
}

.battle-settings-panel .segmented button {
  min-width: auto;
  border-radius: 8px;
  padding: 8px 10px;
}

.stat-stage-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stat-stage-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 10px;
}

.stat-stage-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-family: var(--font-emphasis);
  font-size: 13px;
  font-weight: 400;
}

.stat-stage-reset-all {
  min-height: 28px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  padding: 5px 8px;
}

.stat-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
}

.stat-stage-control {
  display: grid;
  grid-template-columns: 26px minmax(30px, 1fr) 26px;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.stat-stage-name {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.stat-stage-step,
.stat-stage-value {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  min-height: 30px;
  border-radius: 6px;
  padding: 0;
}

.stat-stage-step {
  color: var(--muted);
  font-family: var(--font-emphasis);
  font-weight: 400;
}

.stat-stage-value {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
}

.stat-stage-control.positive .stat-stage-value {
  border-color: rgba(62, 150, 96, 0.35);
  background: rgba(62, 150, 96, 0.12);
  color: var(--green);
}

.stat-stage-control.negative .stat-stage-value {
  border-color: rgba(213, 77, 77, 0.35);
  background: rgba(213, 77, 77, 0.12);
  color: var(--brand-red);
}

.cube {
  width: 30px;
  height: 30px;
  transform: rotateX(55deg) rotateZ(38deg);
  border: 2px solid var(--purple);
  background: var(--brand-mint);
}

.move-list {
  display: grid;
  gap: 8px;
}

.opponent-move-board {
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.my-attack-board {
  gap: 10px;
  min-width: 0;
}

.my-attack-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.72fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  min-height: 0;
  max-height: min(42vh, 430px);
}

.my-move-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.my-move-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  min-width: 0;
  min-height: 132px;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.my-move-button.active {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--selection) 18%, transparent);
}

.my-move-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.my-move-head .move-name-with-pp {
  flex: 1 1 auto;
}

.my-move-index {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.my-move-button.active .my-move-index {
  background: var(--selection);
  color: #fff;
}

.my-move-head strong {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.my-move-head .type {
  flex: 0 0 auto;
}

.my-move-category {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.my-move-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-self: stretch;
  width: 100%;
}

.my-move-summary > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 7px 6px;
  text-align: center;
}

.my-move-summary strong {
  overflow: hidden;
  width: 100%;
  color: var(--damage-ink);
  font-size: 14px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: keep-all;
}

.my-move-summary.muted {
  display: block;
  align-self: center;
  color: var(--muted);
  font-size: 13px;
}

.opponent-move-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.65fr);
  gap: 10px;
  align-items: start;
  min-height: 0;
  max-height: min(42vh, 430px);
}

.opponent-move-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  max-height: min(42vh, 430px);
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.opponent-move-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  padding: 4px 2px 0;
}

.opponent-move-tools {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(160px, 1fr) minmax(0, auto);
  gap: 8px;
  align-items: center;
  padding-right: 2px;
}

.opponent-move-tools input {
  width: 100%;
  min-height: 34px;
}

.opponent-move-sort-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.opponent-move-sort-controls > span {
  white-space: nowrap;
}

.move-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.move-button.active {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.move-button .move-meta {
  grid-column: 1 / -1;
}

.move-name-with-pp,
.move-heading-with-pp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.move-name-with-pp > strong,
.move-heading-with-pp > span:first-child {
  min-width: 0;
}

.move-heading-with-pp {
  max-width: 100%;
}

.move-heading-with-pp > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-pp-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 1px 5px;
  white-space: nowrap;
}

.rage-fist-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  border: 1px solid color-mix(in srgb, #7c3aed 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #7c3aed 9%, transparent);
  color: #5b21b6;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  padding: 1px 5px;
  white-space: nowrap;
}

.opponent-move-button {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  min-height: 112px;
  padding: 9px 10px;
}

.opponent-move-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.opponent-move-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-move-title .move-name-with-pp {
  flex: 1 1 auto;
}

.opponent-move-title .type {
  flex: 0 0 auto;
}

.opponent-damage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-self: stretch;
  width: 100%;
}

.opponent-damage-summary.has-critical {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opponent-damage-summary > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 7px 6px;
  text-align: center;
}

.opponent-damage-summary-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

.opponent-damage-summary strong {
  overflow: hidden;
  color: var(--damage-ink);
  width: 100%;
  font-size: 13px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: keep-all;
}

.opponent-damage-summary.muted {
  display: block;
  font-size: 13px;
}

.opponent-damage-tab {
  position: static;
  display: grid;
  gap: 10px;
  max-height: min(42vh, 430px);
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.opponent-damage-tab.empty {
  place-items: center;
  min-height: 168px;
  color: var(--muted);
  text-align: center;
}

.opponent-damage-tab .mobile-damage-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 4px;
}

.opponent-damage-tab .mobile-damage-tabs button {
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 6px;
  font-size: 13px;
}

.opponent-damage-tab .mobile-damage-tabs button.active {
  background: #fff;
  color: var(--selection);
  box-shadow: 0 0 0 1px var(--selection-ring);
}

.opponent-damage-tab .damage-tab-panel {
  display: none;
}

.opponent-damage-tab.mobile-tab-current .damage-tab-current-panel,
.opponent-damage-tab.mobile-tab-switch .damage-tab-switch-panel,
.opponent-damage-tab.mobile-tab-risk .damage-tab-risk-panel {
  display: grid;
  gap: 10px;
}

.move-meta.compact {
  margin-top: -2px;
}

.opponent-damage-legend {
  grid-template-columns: 1fr;
}

.move-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.move-meta .type {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 12px;
}

.damage-panel {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

.damage-summary-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.damage-summary-main {
  display: grid;
  gap: 2px;
}

.damage-summary-main strong {
  color: var(--damage-ink);
  font-size: 30px;
  line-height: 1.1;
}

.damage-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.damage-summary-grid.has-critical {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.damage-summary-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 8px;
  font-size: 14px;
  font-weight: 400;
}

.damage-summary-grid strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
}

.opponent-damage-tab .damage-summary-card {
  gap: 10px;
  padding: 10px;
}

.opponent-damage-tab .damage-summary-main strong {
  font-size: 26px;
}

.opponent-damage-tab .damage-summary-grid {
  grid-template-columns: 1fr;
}

.opponent-damage-tab .damage-summary-grid strong {
  white-space: normal;
}

.move-decision-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.move-decision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.move-decision-head strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
}

.roster-impact-list,
.switch-in-candidate-list,
.revenge-candidate-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.roster-impact-card,
.revenge-candidate-card,
.move-decision-callout {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.roster-impact-card.selected {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.roster-impact-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.roster-impact-title > span {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.roster-impact-card.selected .roster-impact-title > span {
  background: var(--selection);
  color: #fff;
}

.roster-impact-title strong,
.switch-in-copy strong,
.revenge-candidate-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-impact-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.roster-impact-metrics span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 6px;
  font-size: 11px;
}

.roster-impact-metrics strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-impact-tags,
.revenge-candidate-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.roster-impact-tags small,
.revenge-candidate-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  padding: 2px 6px;
}

.roster-impact-card p,
.revenge-candidate-card p,
.move-decision-note,
.move-decision-callout span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.switch-in-candidate-card {
  display: grid;
  grid-template-columns: 24px 42px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.switch-in-candidate-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.switch-in-rank,
.switch-in-score {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.switch-in-rank {
  width: 24px;
  height: 24px;
  background: var(--surface-alt);
  color: var(--muted);
}

.switch-in-score {
  min-width: 32px;
  height: 28px;
  background: var(--red-100);
  color: var(--red-700);
}

.switch-in-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.switch-in-copy .type-list {
  gap: 3px;
}

.switch-in-copy .type-badge {
  padding: 2px 6px;
  font-size: 11px;
}

.switch-in-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revenge-candidate-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.revenge-candidate-head span,
.move-decision-callout strong {
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  padding: 3px 7px;
  white-space: nowrap;
}

.revenge-candidate-card.danger-high,
.move-decision-callout.danger-high {
  border-color: color-mix(in srgb, var(--damage-line) 42%, #fff);
  background: rgba(185, 45, 61, 0.07);
}

.revenge-candidate-card.danger-mid,
.move-decision-callout.danger-mid {
  border-color: color-mix(in srgb, #A37D00 36%, #fff);
  background: rgba(252, 214, 89, 0.16);
}

.revenge-candidate-card.danger-low,
.move-decision-callout.danger-low {
  border-color: color-mix(in srgb, var(--hp-fill) 38%, #fff);
  background: color-mix(in srgb, var(--hp-fill-soft) 12%, #fff);
}

.damage-status {
  color: var(--damage-ink) !important;
}

.critical-damage {
  border-color: rgba(185, 45, 61, 0.42) !important;
  background: rgba(190, 45, 60, 0.08) !important;
  color: var(--damage-ink) !important;
}

.damage-status.survive {
  color: var(--ink) !important;
}

.damage-status.possible {
  border-color: rgba(185, 45, 61, 0.42);
  background: rgba(190, 45, 60, 0.08);
}

.damage-status.guaranteed {
  border-color: rgba(185, 45, 61, 0.58);
  background: rgba(190, 45, 60, 0.15);
}

.damage-assumptions {
  margin-top: 0;
}

.damage-assumptions ul {
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 64px));
}

.damage-assumption-row {
  display: grid;
  gap: 3px;
}

.damage-assumption-row strong {
  color: var(--ink);
}

.damage-assumption-row small {
  color: var(--muted);
}

.damage-panel-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.damage-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.damage-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.damage-legend-item .assumptions {
  grid-column: 1 / -1;
  margin-top: 0;
}

.damage-swatch {
  width: 12px;
  height: 28px;
  border-radius: 999px;
  background: var(--damage-min);
}

.damage-legend-item.mode .damage-swatch {
  background: var(--damage-marker);
}

.damage-legend-item.max .damage-swatch {
  background: var(--damage-red);
}

.damage-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.assumption-toggle {
  min-width: 24px;
  min-height: 24px;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0 6px;
}

.assumptions {
  display: block;
  position: relative;
  min-width: 0;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  z-index: 1;
}

.assumptions[open] {
  z-index: 30;
}

.assumptions summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.1;
  list-style: none;
  padding: 5px 8px;
}

.assumptions summary::-webkit-details-marker {
  display: none;
}

.assumptions summary::before {
  content: "›";
  display: inline-block;
  color: var(--selection);
  font-size: 16px;
  line-height: 1;
  transform: rotate(0deg);
}

.assumptions[open] summary::before {
  transform: rotate(90deg);
}

.assumptions ul {
  display: grid;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  gap: 6px;
  width: max-content;
  min-width: min(260px, calc(100vw - 64px));
  max-width: min(360px, calc(100vw - 64px));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px 8px 26px;
  box-shadow: 0 12px 28px rgba(54, 67, 113, 0.18);
}

.turn-speed-card:nth-child(3n) .assumptions ul,
.damage-legend-item:nth-child(3n) .assumptions ul {
  right: 0;
  left: auto;
}

.assumptions li {
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.damage-assumptions ul {
  gap: 8px;
  width: min(420px, calc(100vw - 64px));
  max-width: min(420px, calc(100vw - 64px));
  padding: 8px 10px;
}

.damage-assumption-row {
  list-style: none;
}

.speed-layout {
  display: grid;
  gap: 14px;
}

.speed-control-panel .form-grid {
  grid-template-columns: repeat(2, minmax(220px, 1.4fr)) repeat(2, minmax(160px, 1fr));
}

.speed-control-panel .panel-head {
  margin-bottom: 12px;
}

.speed-summary,
.speed-duel-summary,
.speed-grid,
.speed-boost-grid {
  display: grid;
  gap: 12px;
}

.speed-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.speed-duel-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.speed-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  align-items: start;
}

.speed-boost-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.speed-metric,
.speed-boost-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.speed-metric span,
.speed-card-foot span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.speed-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  line-height: 1.1;
}

.speed-metric em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.speed-metric.is-primary {
  grid-column: span 2;
  border-color: rgba(54, 67, 113, 0.34);
  background: var(--red-soft);
}

.speed-metric.is-primary strong {
  font-size: 34px;
}

.speed-formula-panel .panel-head {
  margin-bottom: 12px;
}

.speed-formula-current {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.speed-formula-current span,
.speed-mode-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.speed-formula-current strong {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  line-height: 1.2;
}

.speed-formula-current code,
.speed-mode-card code,
.speed-boost-card code {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--red-800);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.35;
  padding: 8px 10px;
  white-space: normal;
  word-break: break-word;
}

.speed-mode-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.speed-mode-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.speed-mode-card strong {
  display: block;
  margin-bottom: 2px;
}

.speed-mode-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.speed-mode-tags em {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--red-800);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  padding: 3px 6px;
}

.speed-mode-card b {
  color: var(--red-800);
  font-size: 22px;
  line-height: 1;
}

.speed-mode-card code {
  grid-column: 1 / -1;
}

.speed-mode-card.is-mine {
  border-color: rgba(63, 161, 41, 0.42);
  background: rgba(63, 161, 41, 0.06);
}

.speed-mode-card.is-opponent {
  box-shadow: inset 0 0 0 2px rgba(230, 40, 41, 0.08);
}

.speed-mode-card.is-mine.is-opponent {
  border-color: rgba(80, 96, 225, 0.34);
  background: rgba(80, 96, 225, 0.06);
}

.speed-relation.mine {
  border-color: rgba(63, 161, 41, 0.42);
  background: rgba(63, 161, 41, 0.08);
}

.speed-relation.opponent {
  border-color: rgba(230, 40, 41, 0.32);
  background: rgba(230, 40, 41, 0.06);
}

.speed-relation.tie {
  border-color: rgba(80, 96, 225, 0.32);
  background: rgba(80, 96, 225, 0.06);
}

.speed-list {
  display: grid;
  gap: 6px;
  max-height: 520px;
  margin-top: 12px;
  overflow: auto;
  padding-right: 4px;
}

.speed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.speed-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speed-row span {
  color: var(--muted);
  font-size: 14px;
}

.speed-row b {
  justify-self: end;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red-800);
  font-size: 14px;
  line-height: 1.2;
  padding: 5px 8px;
}

.speed-boost-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.speed-chip-group {
  display: grid;
  gap: 6px;
}

.speed-chip-group > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.speed-boost-head,
.speed-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.speed-boost-head span,
.speed-card-foot strong {
  font-size: 24px;
  line-height: 1;
}

.speed-still-faster-list {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.speed-duel-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.speed-duel-notes > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.speed-duel-notes span {
  color: var(--muted);
  font-size: 14px;
}

.speed-matrix-wrap {
  margin-top: 12px;
  overflow: auto;
}

.speed-matrix {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.speed-matrix th,
.speed-matrix td {
  border: 1px solid var(--line);
  padding: 9px 10px;
  text-align: center;
}

.speed-matrix th {
  background: var(--surface-alt);
}

.speed-matrix th span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.speed-matrix td.mine {
  background: rgba(63, 161, 41, 0.1);
  color: #29691B;
}

.speed-matrix td.opponent {
  background: rgba(230, 40, 41, 0.08);
  color: #961A1B;
}

.speed-matrix td.tie {
  background: rgba(80, 96, 225, 0.08);
  color: #343E92;
}

.selection-page {
  display: grid;
  gap: 14px;
}

.selection-toolbar,
.selection-readiness,
.selection-matchup-grid,
.selection-detail-grid,
.selection-score-grid {
  display: grid;
  gap: 14px;
}

.selection-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.selection-readiness,
.selection-detail-grid,
.selection-score-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.selection-matchup-card {
  display: grid;
  gap: 14px;
}

.selection-matchup-grid {
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: stretch;
}

.selection-matchup-arrow {
  align-self: center;
  justify-self: center;
  color: var(--muted);
  font-family: var(--font-emphasis);
  font-size: 24px;
  line-height: 1;
}

.selection-team-panel {
  min-width: 0;
}

.selection-team-list,
.selection-pick-list,
.selection-plan-list,
.selection-risk-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.selection-team-member,
.selection-pick,
.selection-plan-row,
.selection-risk-row,
.selection-scenario-row {
  display: grid;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.selection-team-member {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.selection-team-member strong,
.selection-pick strong,
.selection-lead strong,
.selection-scenario-row strong,
.selection-plan-row strong,
.selection-risk-row strong {
  font-family: var(--font-emphasis);
  font-weight: 400;
}

.selection-team-member strong,
.selection-team-member .muted,
.selection-scenario-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-loading,
.selection-error {
  display: grid;
  gap: 6px;
}

.selection-error {
  border-color: rgba(185, 45, 61, 0.4);
  background: rgba(185, 45, 61, 0.08);
  color: var(--damage-ink);
}

.selection-recommendation-card {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
}

.selection-response-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.selection-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid var(--selection-ring);
  border-radius: 8px;
  background: var(--selection-soft);
  padding: 12px;
}

.selection-lead span {
  color: var(--muted);
}

.selection-pick {
  grid-template-columns: 28px minmax(0, 1fr);
}

.selection-pick span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  font-family: var(--font-mono);
}

.selection-pick.lead {
  border-color: var(--selection);
  background: var(--selection-soft);
}

.selection-sublist {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.selection-sublist h3,
.selection-scenario-panel h3 {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
}

.selection-sublist p {
  color: var(--muted);
  font-size: 15px;
}

.selection-reasoning ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.selection-reasoning li {
  color: var(--ink);
  line-height: 1.45;
}

.selection-scenario-ref-list {
  display: grid;
  gap: 8px;
}

.selection-scenario-ref {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.selection-scenario-ref-head {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selection-scenario-ref-head > span,
.selection-scenario-ref-head > b {
  font-family: var(--font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.selection-scenario-ref-head > strong {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-emphasis);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-scenario-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.selection-scenario-pick {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 7px 8px;
  text-align: center;
  overflow-wrap: anywhere;
}

.selection-scenario-pick.lead {
  border-color: var(--selection);
  background: var(--selection-soft);
  color: var(--ink);
}

.selection-plan-row {
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
}

.selection-plan-row p,
.selection-risk-row p {
  color: var(--muted);
}

.selection-plan-row p {
  grid-column: 1 / -1;
}

.selection-risk-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.selection-risk-row p {
  grid-column: 1 / -1;
}

.selection-context-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.selection-context-list > span {
  color: var(--muted);
  font-size: 13px;
}

.selection-risk-row.high {
  border-color: rgba(185, 45, 61, 0.38);
  background: rgba(185, 45, 61, 0.08);
}

.selection-risk-row.medium {
  border-color: rgba(216, 154, 0, 0.38);
  background: rgba(252, 214, 89, 0.18);
}

.selection-dossier-summary {
  display: grid;
  gap: 14px;
}

.selection-scenario-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.selection-scenario-row {
  grid-template-columns: 1fr;
}

.selection-warnings {
  width: max-content;
  max-width: 100%;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(23, 32, 31, 0.16);
}

.hidden {
  display: none;
}

@media (max-width: 1180px) {
  .opponent-editor-layout {
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  }

  .opponent-search-panel {
    grid-column: 1 / -1;
  }

  .opponent-search-panel .popular-pokemon-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

@media (max-width: 980px) {
  .team-layout,
  .opponent-editor-layout,
  .battle-setup-hero,
  .battle-setup-main-grid,
  .final-selection-layout,
  .selection-grid,
  .selection-toolbar,
  .selection-readiness,
  .selection-detail-grid,
  .selection-score-grid,
  .damage-panel,
  .speed-control-panel .form-grid,
  .speed-grid,
  .speed-mode-guide,
  .speed-boost-grid,
  .roster-candidate-list,
  .setup-speed-row,
  .pokemon-stage.mine {
    grid-template-columns: 1fr;
  }

  .setup-speed-anchor {
    justify-items: start;
    min-height: 0;
    padding: 0;
  }

  .selection-matchup-grid {
    grid-template-columns: 1fr;
  }

  .selection-matchup-arrow {
    transform: rotate(90deg);
  }

  .battle-top,
  .battle-center {
    grid-template-columns: 1fr;
  }

  .pokemon-stage.offense,
  .pokemon-stage.top-stage,
  .battle-opponent-editor,
  .opponent-top-moves-grid,
  .top-stage-analysis-row,
  .my-attack-layout,
  .opponent-move-layout,
  .opponent-move-options {
    grid-template-columns: 1fr;
  }

  .pokemon-stage.offense .stage-img,
  .pokemon-stage.offense .pokemon-info,
  .pokemon-stage-side,
  .battle-party-rail,
  .offense-side-panel,
  .offense-move-zone {
    grid-column: auto;
    grid-row: auto;
  }

  .pokemon-stage.top-stage .battle-opponent-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .turn-speed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-preview,
  .moves-grid,
  .damage-bars,
  .damage-legend,
  .damage-summary-grid,
  .damage-summary-grid.has-critical,
  .speed-summary,
  .speed-formula-current,
  .speed-duel-summary,
  .speed-duel-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opponent-damage-legend {
    grid-template-columns: 1fr;
  }

  .turn-speed-card:nth-child(3n) .assumptions ul,
  .damage-legend-item:nth-child(3n) .assumptions ul {
    right: auto;
    left: 0;
  }

  .turn-speed-card:nth-child(even) .assumptions ul,
  .damage-legend-item:nth-child(even) .assumptions ul {
    right: 0;
    left: auto;
  }
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell {
    width: 100%;
    padding-bottom: 88px;
    overflow-x: hidden;
  }

  .opponent-roster-editor {
    gap: 10px;
  }

  .opponent-editor-hero {
    display: grid;
    align-items: start;
  }

  .opponent-editor-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .opponent-editor-actions button:last-child {
    grid-column: 1 / -1;
  }

  .opponent-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opponent-slot-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 104px;
    padding: 10px;
    padding-top: 34px;
  }

  .opponent-slot-card.empty {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .opponent-slot-card .avatar {
    width: 42px;
    height: 42px;
  }

  .opponent-slot-copy .type-list {
    gap: 3px;
  }

  .opponent-slot-copy .type-badge {
    padding: 2px 6px;
    font-size: 12px;
  }

  .opponent-detail-head {
    grid-template-columns: 1fr;
  }

  .opponent-detail-head .inline-actions {
    justify-content: stretch;
  }

  .opponent-detail-head .inline-actions > * {
    flex: 1;
  }

  .opponent-detail-identity {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .opponent-detail-sprite,
  .opponent-detail-placeholder {
    width: 64px;
    height: 64px;
  }

  .opponent-optional-toggle {
    display: grid;
  }

  .opponent-optional-toggle button,
  .opponent-optional-toggle .chip {
    justify-self: stretch;
    text-align: center;
  }

  .opponent-chip-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opponent-suggested-chip {
    border-radius: 8px;
  }

  .battle-setup-page,
  .battle-screen {
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
  }

  .battle-setup-hero {
    align-items: stretch;
    padding: 12px;
  }

  .battle-setup-top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .battle-setup-top-actions .primary {
    grid-column: 1 / -1;
  }

  .battle-setup-main-grid,
  .final-selection-layout,
  .setup-candidate-grid,
  .setup-final-candidate-grid,
  .setup-opponent-selected-grid,
  .setup-lead-slots {
    grid-template-columns: 1fr;
  }

  .setup-status-panel {
    display: grid;
    order: 1;
    padding: 12px;
  }

  .setup-current-action {
    display: grid;
    order: 2;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .setup-candidates-section {
    order: 3;
  }

  .battle-setup-selection-grid {
    display: contents;
  }

  .setup-opponent-section {
    order: 4;
  }

  .setup-final-section {
    order: 5;
  }

  .setup-insights-section {
    order: 6;
  }

  .setup-step-section {
    padding: 0;
    overflow: hidden;
  }

  .setup-step-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    padding: 12px 14px;
    text-align: left;
  }

  .setup-step-toggle strong {
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--muted);
    padding: 4px 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .setup-step-section.is-current .setup-step-toggle strong {
    background: var(--selection-soft);
    color: var(--selection);
  }

  .setup-step-body {
    padding: 12px;
  }

  .setup-step-section.is-collapsed .setup-step-body {
    display: none;
  }

  .setup-stepper {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .setup-stepper-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 48px;
    padding: 8px 10px;
  }

  .setup-stepper-item span {
    grid-row: auto;
    width: 28px;
    height: 28px;
  }

  .setup-stepper-item small {
    justify-self: end;
  }

  .roster-candidate-list,
  .result-list {
    grid-template-columns: 1fr;
  }

  .opponent-roster-select-shell,
  .opponent-candidate-grid {
    grid-template-columns: 1fr;
  }

  .opponent-candidate-grid {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .final-team-panel,
  .final-slots-panel,
  .final-strategy-panel {
    padding: 10px;
  }

  .selection-explanation-list,
  .selection-matchup-list {
    grid-template-columns: 1fr;
  }

  .final-slots-panel .setup-lead-slot.selected,
  .final-slots-panel .setup-lead-slot.empty {
    min-height: 0;
  }

  .final-slots-panel .setup-lead-slot .avatar {
    width: 44px;
    height: 44px;
  }

  .setup-candidate-card {
    grid-template-columns: 28px 44px minmax(0, 1fr) auto;
  }

  .setup-opponent-card.selected {
    grid-template-columns: 28px 44px minmax(0, 1fr);
    padding-right: 42px;
  }

  .setup-final-card,
  .setup-lead-slot.selected {
    grid-template-columns: 28px 44px minmax(0, 1fr);
  }

  .setup-candidate-card .avatar,
  .setup-opponent-card .avatar,
  .setup-final-card .avatar,
  .setup-lead-slot .avatar {
    width: 44px;
    height: 44px;
  }

  .setup-card-status,
  .setup-card-foot {
    grid-column: 1 / -1;
  }

  .select-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 62px;
    padding: 8px;
  }

  .select-card .avatar {
    width: 44px;
    height: 44px;
  }

  .setup-speed-warning {
    grid-template-columns: 1fr;
  }

  .setup-speed-warning small {
    grid-column: 1;
  }

  .setup-speed-row,
  .setup-speed-my {
    grid-template-columns: 1fr;
  }

  .setup-speed-my {
    justify-items: start;
  }

  .setup-speed-value {
    justify-self: stretch;
  }

  .setup-speed-opponents {
    min-height: 0;
  }

  .setup-footer-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .battle-screen {
    grid-template-rows: none;
    padding: 0;
    background: transparent;
  }

  .battle-top {
    position: sticky;
    top: 0;
    z-index: 60;
    order: 1;
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    padding: 10px;
  }

  .battle-top .inline-actions,
  .battle-top .weather-group,
  .battle-top-pills {
    justify-self: stretch;
  }

  .battle-top .inline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .battle-turn-cluster {
    justify-content: space-between;
    gap: 8px;
  }

  .battle-top-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .battle-top-pill {
    max-width: none;
    grid-template-columns: 1fr;
    gap: 1px;
    border-radius: 8px;
    text-align: center;
  }

  .battle-top-pill strong {
    white-space: normal;
  }

  .weather-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 8px;
  }

  .battle-mobile-recommendations {
    display: grid;
    order: 3;
    gap: 10px;
  }

  .battle-mobile-action-list {
    display: grid;
    gap: 8px;
  }

  .battle-mobile-action {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
    text-align: left;
  }

  .battle-mobile-action.primary-action {
    border-color: var(--selection);
    background: var(--selection-soft);
  }

  .battle-mobile-action span {
    display: inline-grid;
    grid-row: span 2;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--selection);
    color: #fff;
    font-family: var(--font-mono);
  }

  .battle-mobile-action strong,
  .battle-mobile-action small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .battle-mobile-action small {
    color: var(--muted);
    font-size: 13px;
  }

  .battle-context-card {
    order: 2;
  }

  .battle-context-head {
    align-items: start;
  }

  .battle-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-screen > .pokemon-stage.top-stage {
    order: 3;
  }

  .battle-action-recommendation-panel {
    margin-top: 10px;
  }

  .battle-action-card {
    grid-template-columns: 28px minmax(0, 1fr) 34px;
  }

  .battle-action-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .battle-action-score {
    grid-column: auto;
    justify-self: end;
    height: 26px;
  }

  .battle-center {
    order: 7;
  }

  .battle-bottom-row {
    display: contents;
  }

  .battle-bottom-row > .pokemon-stage {
    order: 4;
  }

  .battle-party-rail {
    order: 6;
    margin-bottom: 0;
  }

  .pokemon-stage,
  .pokemon-stage.offense,
  .pokemon-stage.mine,
  .pokemon-stage.top-stage,
  .pokemon-identity-cluster,
  .offense-side-panel {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .pokemon-stage {
    padding: 10px;
  }

  .pokemon-stage.top-stage .battle-opponent-editor,
  .pokemon-stage.top-stage .opponent-top-moves-grid,
  .battle-opponent-editor {
    grid-template-columns: 1fr;
  }

  .pokemon-stage.top-stage .stage-img {
    width: 96px;
    height: 96px;
  }

  .offense-move-zone {
    order: 1;
  }

  .offense-side-panel {
    order: 2;
    grid-template-columns: 64px minmax(0, 1fr);
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }

  .offense-side-panel .stage-img {
    width: 64px;
    height: 64px;
    justify-self: start;
  }

  .my-attack-layout,
  .opponent-move-layout,
  .opponent-move-options,
  .my-move-grid {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
  }

  .my-move-button,
  .opponent-move-button {
    min-height: 0;
  }

  .my-move-summary,
  .opponent-damage-summary,
  .opponent-damage-summary.has-critical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opponent-damage-tab {
    order: 5;
    max-height: none;
    overflow: visible;
  }

  .mobile-damage-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-alt);
    padding: 4px;
  }

  .mobile-damage-tabs button {
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    padding: 6px;
    font-size: 13px;
  }

  .mobile-damage-tabs button.active {
    background: #fff;
    color: var(--selection);
    box-shadow: 0 0 0 1px var(--selection-ring);
  }

  .damage-tab-panel {
    display: none;
  }

  .mobile-tab-current .damage-tab-current-panel,
  .mobile-tab-switch .damage-tab-switch-panel,
  .mobile-tab-risk .damage-tab-risk-panel {
    display: grid;
    gap: 10px;
  }

  .mobile-switch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .mobile-risk-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
  }

  .battle-party-rail .party-chip-list,
  .party-chip-list,
  .switch-candidate-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .party-chip {
    grid-template-columns: auto 34px minmax(0, 1fr);
    min-height: 54px;
    padding: 6px;
  }

  .party-chip-sprite,
  .party-chip-sprite img {
    width: 34px;
    height: 34px;
  }

  .switch-candidate-card {
    grid-template-columns: 30px 40px minmax(0, 1fr);
    min-height: 76px;
    padding: 8px;
  }

  .switch-candidate-score {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .switch-candidate-sprite,
  .switch-candidate-sprite img {
    width: 40px;
    height: 40px;
  }

  .battle-center {
    align-items: stretch;
  }

  .battle-center-spacer {
    display: none;
  }

  .switch-button,
  .battle-settings-slot,
  .battle-settings-toggle {
    width: 100%;
    justify-self: stretch;
  }

  .battle-settings-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }

  .stat-stage-columns,
  .damage-panel,
  .damage-summary-grid,
  .damage-summary-grid.has-critical {
    grid-template-columns: 1fr;
  }

  .hp-row {
    grid-template-columns: 1fr;
  }

  .hp-view,
  .hp-editor {
    justify-content: flex-start;
    min-width: 0;
  }

  .hp-damage-labels {
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .app-shell {
    padding: 12px;
  }

  .previous-turn-button,
  .next-turn-button {
    right: 10px;
    width: 50px;
    height: 50px;
    min-height: 50px;
  }

  .previous-turn-button {
    right: auto;
    left: 10px;
  }

  .next-turn-icon {
    width: 26px;
    height: 26px;
  }

  .topbar,
  .toolbar,
  .panel-head,
  .selection-head {
    align-items: start;
    flex-direction: column;
  }

  .form-grid,
  .stats-preview,
  .moves-grid,
  .setup-speed-warning,
  .setup-speed-row,
  .damage-bars,
  .damage-legend,
  .damage-summary-grid,
  .damage-summary-grid.has-critical,
  .speed-summary,
  .speed-formula-current,
  .speed-duel-summary,
  .speed-duel-notes {
    grid-template-columns: 1fr;
  }

  .setup-speed-warning small {
    grid-column: 1;
  }

  .speed-metric.is-primary {
    grid-column: auto;
  }

  .turn-speed-card:nth-child(even) .assumptions ul,
  .damage-legend-item:nth-child(even) .assumptions ul,
  .turn-speed-card:nth-child(3n) .assumptions ul,
  .damage-legend-item:nth-child(3n) .assumptions ul {
    right: auto;
    left: 0;
  }

  .speed-row {
    grid-template-columns: 1fr;
  }

  .speed-matrix {
    min-width: 0;
    table-layout: fixed;
  }

  .speed-matrix th,
  .speed-matrix td {
    padding: 6px 4px;
    font-size: 12px;
    word-break: keep-all;
  }

  .speed-matrix th span {
    font-size: 11px;
  }

  .opponent-damage-summary,
  .opponent-damage-summary.has-critical,
  .my-move-grid,
  .my-move-summary,
  .opponent-move-tools,
  .turn-speed-grid,
  .selection-plan-row,
  .selection-scenario-ref-head,
  .selection-team-member {
    grid-template-columns: 1fr;
  }

  .selection-scenario-picks {
    grid-template-columns: 1fr;
  }

  .opponent-move-sort-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .battle-folder-tab-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    padding: 3px 0 0;
  }

  .battle-folder-tab {
    min-width: 0;
    max-width: none;
    min-height: 38px;
    margin-right: 0;
    border-radius: 8px;
    border-bottom-color: var(--line);
    padding: 6px 7px;
  }

  .battle-folder-tab.active {
    min-height: 38px;
    border-bottom-color: var(--selection);
  }

  .bench-chip-label {
    white-space: normal;
  }

  .battle-action-title-row {
    align-items: flex-start;
  }

  .battle-action-title-row strong {
    white-space: nowrap;
  }

  .battle-action-meta-row span,
  .battle-action-tags small,
  .battle-action-reasons small {
    font-size: 11px;
  }

  .roster-impact-metrics {
    grid-template-columns: 1fr;
  }

  .switch-in-candidate-card {
    grid-template-columns: 24px 36px minmax(0, 1fr);
  }

  .switch-in-candidate-card img {
    width: 36px;
    height: 36px;
  }

  .switch-in-score {
    grid-column: 3;
    justify-self: start;
    height: 24px;
  }

  .popular-pokemon-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  .opponent-slot-copy strong,
  .opponent-slot-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .stat-stage-columns {
    grid-template-columns: 1fr;
  }

  .battle-party-rail .party-switcher {
    height: auto;
  }

  .switch-candidate-list {
    grid-template-columns: 1fr;
  }

  .switch-candidate-card {
    grid-template-columns: 30px 44px minmax(0, 1fr);
  }

  .switch-candidate-sprite,
  .switch-candidate-sprite img {
    width: 44px;
    height: 44px;
  }

  .offense-side-panel,
  .pokemon-identity-cluster,
  .pokemon-stage {
    grid-template-columns: 1fr;
  }

  .stage-img {
    width: 120px;
    height: 120px;
  }

  .offense-side-panel .stage-img {
    justify-self: center;
    width: 120px;
    height: 120px;
  }

  .pokemon-stage.top-stage .stage-img {
    width: 120px;
    height: 120px;
  }

  .pokemon-stage.top-stage .battle-opponent-editor,
  .pokemon-stage.top-stage .opponent-top-moves-grid {
    grid-template-columns: 1fr;
  }
}

/* geumddu global design system and AppShell */
body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-lg);
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

button {
  min-height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: 9px 14px;
  box-shadow: none;
}

button:hover {
  border-color: var(--hover-border);
  background: var(--hover-bg);
  color: var(--text-primary);
}

button:active {
  border-color: var(--accent-strong);
  background: #E9EEFF;
}

button.primary,
.action-button.primary {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

button.primary:hover,
.action-button.primary:hover {
  border-color: #1F2879;
  background: #1F2879;
  color: #fff;
}

button.ghost,
.action-button.ghost {
  border-color: var(--border);
  background: var(--surface);
  color: var(--accent-strong);
}

button.compact-danger,
.compact-danger {
  color: var(--danger);
}

input,
select,
textarea,
.dropdown-trigger {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus,
.dropdown-trigger:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.app-frame {
  min-height: 100vh;
  background: var(--background);
}

.legal-body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
}

.legal-frame {
  min-height: 100vh;
}

.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  text-decoration: none;
}

.legal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent-strong);
  text-decoration: none;
  font-size: 13px;
  font-weight: 760;
}

.legal-nav a[aria-current="page"] {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

.legal-main {
  width: min(940px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
}

.legal-document {
  display: grid;
  gap: 28px;
  color: var(--text-primary);
}

.legal-document-head {
  display: grid;
  gap: 10px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

.legal-document-head p {
  color: var(--accent-strong);
  font-weight: 800;
}

.legal-document-head h1 {
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: 0;
}

.legal-document-head time {
  color: var(--text-muted);
  font-size: 14px;
}

.legal-section {
  display: grid;
  gap: 12px;
}

.legal-section h2 {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
}

.legal-section p,
.legal-section li {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
}

.legal-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}

.legal-source-links a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-source-links a:hover {
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .legal-topbar {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 16px;
  }

  .legal-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .legal-nav a {
    flex: 1 1 150px;
    justify-content: center;
  }

  .legal-main {
    width: min(100% - 28px, 940px);
    padding: 32px 0 56px;
  }

  .legal-document-head h1 {
    font-size: 28px;
  }
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 210px minmax(300px, 0.62fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 50px;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.brand-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 50px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-primary);
  padding: 0 14px;
  text-align: left;
}

.brand-button:hover {
  background: var(--surface-muted);
  border-color: var(--border);
}

.brand-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 0;
  background: url("/static/site-logo.png") center / contain no-repeat;
  box-shadow: none;
}

.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: "Cafe24PROUP", var(--font-ui);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand-name-gold {
  color: #FFCA1A;
}

.brand-name-blue {
  color: #74ACF5;
}

.brand-mark::before {
  content: "";
  display: none;
}

.brand-button strong {
  display: block;
  font-size: var(--font-size-md);
  font-weight: 760;
  line-height: 1.1;
}

.brand-button small {
  display: none;
  margin-top: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.app-data-notice {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: #F7F7F7;
  color: var(--text-secondary);
  padding: 0 14px;
  font-size: var(--font-size-xs);
  font-weight: 720;
  line-height: 1.28;
}

.app-data-notice span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-data-notice .notice-short {
  display: none;
}

.page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: var(--space-2) var(--space-4);
}

.page-title {
  min-width: 0;
}

.page-title h1 {
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-lg);
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-title p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.page-actions,
.section-card-actions,
.bottom-action-buttons,
.setup-footer-actions,
.inline-actions,
.battle-setup-top-actions,
.opponent-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 112px;
  white-space: nowrap;
}

.app-topbar .action-button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: var(--font-size-sm);
}

.language-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(34px, 1fr));
  align-items: center;
  overflow: hidden;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.language-toggle button {
  min-width: 34px;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  font-weight: 760;
  line-height: 1;
}

.language-toggle button + button {
  border-left: 1px solid var(--border);
}

.language-toggle button.active {
  background: var(--accent-strong);
  color: #fff;
}

.auth-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 760;
}

.auth-user-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-user-pill small {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.app-topbar .auth-action {
  min-width: auto;
}

.button-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
}

.stepper.setup-stepper,
.stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  width: min(1160px, 100%);
  margin: 0 auto;
}

.stepper-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(100% + 2px);
  width: calc(var(--space-8) - 4px);
  height: 1px;
  background: var(--border-strong);
}

.stepper-index {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #E9EDF7;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
}

.stepper-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stepper-copy strong {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stepper-copy small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stepper-item.active .stepper-index,
.stepper-item.done .stepper-index {
  background: var(--accent);
  color: #fff;
}

.stepper-item.active .stepper-copy strong,
.stepper-item.done .stepper-copy strong {
  color: var(--accent-strong);
}

.app-main {
  padding: var(--space-4) var(--space-6) 96px;
}

.site-disclaimer {
  display: grid;
  gap: 4px;
  width: min(1860px, 100%);
  margin: 0 auto;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  padding: 12px var(--space-6) 28px;
  font-size: var(--font-size-xs);
  font-weight: 650;
  line-height: 1.45;
}

.site-disclaimer p {
  margin: 0;
}

.site-disclaimer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.site-disclaimer a:hover {
  color: var(--text-secondary);
}

.app-content {
  width: min(1860px, 100%);
  margin: 0 auto;
}

.panel,
.section-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.panel + .panel,
.section-card + .section-card {
  margin-top: var(--space-4);
}

.section-card-head,
.panel-head,
.selection-head,
.final-panel-head,
.opponent-selected-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.section-card-head {
  margin-bottom: var(--space-4);
}

.section-card-head h2,
.panel-head h2,
.selection-head h2,
.final-panel-head h3 {
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: 760;
  line-height: 1.25;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: var(--font-size-xs);
  font-weight: 760;
}

.hint,
.muted,
.empty,
.field small,
.brand p {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.chip,
.status-pill,
.type,
.type-pill,
.order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  padding: 3px 8px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.chip.active,
.status-pill.active {
  border-color: color-mix(in srgb, var(--accent) 34%, #fff);
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.status-pill.success,
.chip.success {
  border-color: color-mix(in srgb, var(--success) 32%, #fff);
  background: #EAF8F0;
  color: #167348;
}

.status-pill.warning,
.chip.warning,
.chip.medium {
  border-color: color-mix(in srgb, var(--warning) 34%, #fff);
  background: #FFF7E6;
  color: #9A6200;
}

.status-pill.danger,
.chip.danger {
  border-color: color-mix(in srgb, var(--danger) 34%, #fff);
  background: #FFF0F0;
  color: #B91C1C;
}

.type {
  border-color: var(--type-border, var(--border));
  background: var(--type-bg, var(--surface-muted));
  color: var(--type-text, var(--text-secondary));
}

.type[data-type="normal"] { --type-bg: var(--type-normal-bg); --type-text: var(--type-normal-text); --type-border: var(--type-normal-border); }
.type[data-type="fire"] { --type-bg: var(--type-fire-bg); --type-text: var(--type-fire-text); --type-border: var(--type-fire-border); }
.type[data-type="water"] { --type-bg: var(--type-water-bg); --type-text: var(--type-water-text); --type-border: var(--type-water-border); }
.type[data-type="electric"] { --type-bg: var(--type-electric-bg); --type-text: var(--type-electric-text); --type-border: var(--type-electric-border); }
.type[data-type="grass"] { --type-bg: var(--type-grass-bg); --type-text: var(--type-grass-text); --type-border: var(--type-grass-border); }
.type[data-type="ice"] { --type-bg: var(--type-ice-bg); --type-text: var(--type-ice-text); --type-border: var(--type-ice-border); }
.type[data-type="fighting"] { --type-bg: var(--type-fighting-bg); --type-text: var(--type-fighting-text); --type-border: var(--type-fighting-border); }
.type[data-type="poison"] { --type-bg: var(--type-poison-bg); --type-text: var(--type-poison-text); --type-border: var(--type-poison-border); }
.type[data-type="ground"] { --type-bg: var(--type-ground-bg); --type-text: var(--type-ground-text); --type-border: var(--type-ground-border); }
.type[data-type="flying"] { --type-bg: var(--type-flying-bg); --type-text: var(--type-flying-text); --type-border: var(--type-flying-border); }
.type[data-type="psychic"] { --type-bg: var(--type-psychic-bg); --type-text: var(--type-psychic-text); --type-border: var(--type-psychic-border); }
.type[data-type="bug"] { --type-bg: var(--type-bug-bg); --type-text: var(--type-bug-text); --type-border: var(--type-bug-border); }
.type[data-type="rock"] { --type-bg: var(--type-rock-bg); --type-text: var(--type-rock-text); --type-border: var(--type-rock-border); }
.type[data-type="ghost"] { --type-bg: var(--type-ghost-bg); --type-text: var(--type-ghost-text); --type-border: var(--type-ghost-border); }
.type[data-type="dragon"] { --type-bg: var(--type-dragon-bg); --type-text: var(--type-dragon-text); --type-border: var(--type-dragon-border); }
.type[data-type="dark"] { --type-bg: var(--type-dark-bg); --type-text: var(--type-dark-text); --type-border: var(--type-dark-border); }
.type[data-type="steel"] { --type-bg: var(--type-steel-bg); --type-text: var(--type-steel-text); --type-border: var(--type-steel-border); }
.type[data-type="fairy"] { --type-bg: var(--type-fairy-bg); --type-text: var(--type-fairy-text); --type-border: var(--type-fairy-border); }
.type[data-type="unknown"] { --type-bg: var(--type-unknown-bg); --type-text: var(--type-unknown-text); --type-border: var(--type-unknown-border); }

.avatar,
.pokemon-card-image {
  border-radius: var(--radius-md);
  background: transparent;
  object-fit: contain;
}

.battle-setup-page,
.opponent-roster-editor,
.selection-page {
  display: grid;
  gap: var(--space-4);
}

.battle-setup-main-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, 0.92fr);
  gap: var(--space-4);
}

.setup-step-section {
  padding: var(--space-4);
}

.setup-step-section.is-current {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.setup-step-body {
  min-width: 0;
}

.setup-section-head {
  margin-bottom: var(--space-4);
}

.roster-candidate-list,
.setup-candidate-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-top: 0;
}

.pokemon-card,
.setup-candidate-card,
.setup-opponent-card,
.setup-final-card,
.setup-lead-slot {
  border-radius: var(--radius-md);
  border-color: var(--border);
  background: var(--surface);
}

.setup-candidate-card {
  grid-template-columns: 32px 60px minmax(0, 1fr) auto;
  min-height: 112px;
  padding: var(--space-3);
}

.setup-candidate-card.selected,
.setup-opponent-card.selected,
.setup-final-card.selected,
.setup-lead-slot.selected,
.opponent-candidate-card.selected,
.select-card.selected,
.slot.selected,
.slot.active,
.opponent-slot-card.active {
  border-color: var(--accent);
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px rgba(64, 88, 232, 0.22);
}

.setup-card-order,
.pokemon-card-order,
.opponent-candidate-card .setup-card-order {
  background: #EEF2FF;
  color: var(--accent-strong);
  font-weight: 800;
}

.selected > .setup-card-order,
.setup-candidate-card.selected .setup-card-order,
.setup-final-card.selected .setup-card-order,
.opponent-candidate-card.selected .setup-card-order {
  background: var(--accent);
  color: #fff;
}

.setup-card-copy strong,
.pokemon-card-copy strong {
  color: var(--text-primary);
  font-weight: 760;
}

.setup-card-meta,
.setup-card-copy small {
  color: var(--text-secondary);
}

.member-species-note {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-card-status.complete {
  border-color: color-mix(in srgb, var(--success) 36%, #fff);
  background: #EAF8F0;
  color: #167348;
}

.opponent-roster-select-shell {
  grid-template-columns: minmax(0, 1.3fr) minmax(420px, 0.7fr);
  gap: var(--space-5);
  margin-top: 0;
}

.opponent-filter-chip {
  min-height: 38px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 7px 14px;
}

.opponent-filter-chip.active {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.opponent-candidate-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3);
  max-height: none;
}

.opponent-candidate-card {
  grid-template-columns: 30px 58px minmax(0, 1fr);
  min-height: 110px;
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.opponent-candidate-card .avatar {
  width: 58px;
  height: 58px;
}

.opponent-candidate-tags small {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.opponent-selected-card,
.opponent-insight-panel,
.final-team-panel,
.final-slots-panel,
.final-strategy-panel {
  border-color: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  padding: var(--space-4);
}

.opponent-selected-card .setup-opponent-selected-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-opponent-card.selected {
  grid-template-columns: 30px 54px minmax(0, 1fr);
  min-height: 96px;
}

.empty-slot-card,
.setup-opponent-card.empty,
.setup-lead-slot.empty {
  display: grid;
  gap: var(--space-2);
  place-items: center;
  min-height: 108px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.62);
  color: var(--text-muted);
  text-align: center;
}

.empty-slot-card small {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.slot-plus::before,
.slot-plus::after {
  background: var(--accent);
}

.opponent-insight-list {
  border-color: var(--border);
  border-radius: var(--radius-md);
}

.insight-row,
.opponent-insight-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
}

.insight-row:last-child,
.opponent-insight-row:last-child {
  border-bottom: 0;
}

.insight-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent-strong);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.insight-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.insight-copy strong,
.insight-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-copy strong {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 760;
}

.insight-copy small {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.insight-row.high .insight-icon,
.insight-row.danger .insight-icon {
  background: #FFF0F0;
  color: #B91C1C;
}

.insight-row.medium .insight-icon,
.insight-row.warning .insight-icon {
  background: #FFF7E6;
  color: #9A6200;
}

.insight-row.active .insight-icon,
.insight-row.success .insight-icon {
  background: #EAF8F0;
  color: #167348;
}

.final-selection-layout {
  grid-template-columns: minmax(260px, 0.75fr) minmax(520px, 1.35fr) minmax(340px, 0.9fr);
  gap: var(--space-4);
}

.setup-lead-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-speed-warning {
  border-color: color-mix(in srgb, var(--danger) 26%, #fff);
  border-radius: var(--radius-md);
  background: #FFF5F5;
  color: #991B1B;
}

.setup-speed-my,
.setup-speed-opponents,
.setup-speed-chip {
  border-color: var(--border);
  border-radius: var(--radius-md);
}

.bottom-action-bar {
  position: sticky;
  bottom: var(--space-4);
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.96);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 -8px 30px rgba(35, 48, 85, 0.10);
  backdrop-filter: blur(14px);
}

.bottom-action-message {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.bottom-action-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent);
  font-size: var(--font-size-sm);
}

.selection-toolbar.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.selection-readiness {
  gap: var(--space-4);
}

.selection-team-list,
.selection-pick-list,
.selection-plan-list,
.selection-risk-list {
  gap: var(--space-2);
}

.battle-screen {
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.battle-top {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.pokemon-stage,
.battle-context-card,
.battle-action-recommendation-panel {
  border-color: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.battle-action-tabs {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.battle-action-tabs button.active,
.segmented button.active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (max-width: 1180px) {
  .app-topbar {
    grid-template-columns: 194px minmax(250px, 0.6fr) minmax(0, 1fr);
  }

  .brand-button {
    min-height: 48px;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    padding: 0 var(--space-4);
  }

  .page-header {
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
  }

  .app-data-notice {
    min-height: 48px;
    padding-inline: 12px;
  }

  .battle-setup-main-grid,
  .opponent-roster-select-shell,
  .final-selection-layout,
  .opponent-editor-layout,
  .team-layout {
    grid-template-columns: 1fr;
  }

  .stepper.setup-stepper,
  .stepper {
    gap: var(--space-4);
  }

  .stepper-item:not(:last-child)::after {
    width: calc(var(--space-4) - 4px);
  }
}

@media (max-width: 720px) {
  body {
    font-size: var(--font-size-md);
  }

  .app-topbar {
    grid-template-columns: 148px minmax(0, 1fr) auto;
  }

  .brand-button {
    min-height: 44px;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    gap: 6px;
    padding: 0 10px;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
  }

  .brand-name {
    font-size: 20px;
  }

  .page-header {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  .app-data-notice {
    min-height: 44px;
    padding: 0 8px;
    font-size: 10px;
  }

  .app-data-notice .notice-full {
    display: none;
  }

  .app-data-notice .notice-short {
    display: inline;
  }

  .app-topbar .page-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-title h1 {
    font-size: var(--font-size-md);
  }

  .app-main {
    padding: var(--space-3) var(--space-3) 92px;
  }

  .site-disclaimer {
    padding: 10px var(--space-3) 24px;
    font-size: 10px;
  }

  .page-header,
  .selection-toolbar.panel,
  .bottom-action-bar {
    grid-template-columns: 1fr;
  }

  .app-topbar .page-header {
    grid-template-columns: auto;
    justify-content: end;
  }

  .app-topbar .page-title {
    display: none;
  }

  .page-actions,
  .bottom-action-buttons {
    justify-content: stretch;
  }

  .app-topbar .page-actions {
    justify-content: flex-end;
  }

  .page-actions > button,
  .bottom-action-buttons > button,
  .action-button {
    width: 100%;
    min-width: 0;
  }

  .app-topbar .page-actions > button,
  .app-topbar .action-button {
    width: auto;
    min-width: 0;
    min-height: 30px;
    padding: 4px 7px;
    font-size: var(--font-size-xs);
  }

  .stepper.setup-stepper,
  .stepper {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .stepper-item:not(:last-child)::after {
    display: none;
  }

  .roster-candidate-list,
  .setup-candidate-grid,
  .setup-saved-team-list,
  .roster-team-member-picker,
  .opponent-candidate-grid,
  .opponent-selected-card .setup-opponent-selected-grid,
  .setup-lead-slots {
    grid-template-columns: 1fr;
  }

  .setup-candidate-card,
  .opponent-candidate-card,
  .setup-opponent-card.selected,
  .setup-final-card,
  .setup-lead-slot.selected {
    grid-template-columns: 30px 52px minmax(0, 1fr);
  }
}

.battle-shell-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--accent-strong);
  padding: 0;
}

.icon-button:hover {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.setup-remove-mark.icon-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
}

.setup-remove-mark.icon-button:hover {
  border-color: var(--danger);
  background: #FFF5F5;
  color: #B91C1C;
}

button.danger,
.action-button.danger {
  border-color: color-mix(in srgb, var(--danger) 28%, #fff);
  background: #FFF5F5;
  color: #B91C1C;
}

button.danger:hover,
.action-button.danger:hover {
  border-color: var(--danger);
  background: #FFECEC;
  color: #991B1B;
}

/* Roster editor redesign */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.roster-editor-content {
  width: min(1860px, 100%);
}

.roster-editor-screen {
  display: grid;
  gap: 0;
}

.roster-editor-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(680px, 1.28fr);
  gap: var(--space-4);
  align-items: start;
}

.roster-editor-left,
.roster-editor-main-panel {
  min-width: 0;
}

.roster-editor-layout > .panel {
  margin-top: 0;
}

.roster-editor-left {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.roster-editor-left > .panel {
  margin-top: 0;
}

.roster-slot-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.roster-team-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.roster-team-list,
.roster-team-member-picker {
  display: grid;
  gap: var(--space-2);
}

.roster-team-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 8px;
}

.roster-team-main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.roster-team-main:hover,
.roster-team-main:focus-visible {
  background: transparent;
}

.roster-team-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.roster-team-title strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-team-title small {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 760;
}

.roster-team-sprites,
.setup-saved-team-sprites {
  display: flex;
  min-width: 0;
}

.roster-team-sprites img,
.setup-saved-team-sprites img {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  object-fit: contain;
}

.roster-team-sprites img + img,
.setup-saved-team-sprites img + img {
  margin-left: -7px;
}

.roster-team-draft {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--selection-ring);
  border-radius: var(--radius-md);
  background: var(--selection-soft);
  padding: var(--space-3);
}

.roster-team-draft-head,
.roster-team-draft-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.roster-team-member-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roster-team-member-toggle {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 6px;
  text-align: left;
}

.roster-team-member-toggle.selected {
  border-color: var(--selection);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--selection-ring);
}

.roster-team-member-toggle:disabled {
  opacity: 0.5;
}

.roster-team-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent-strong);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

.roster-team-member-toggle.selected .roster-team-check {
  background: var(--selection);
  color: #fff;
}

.roster-team-member-toggle .avatar {
  width: 34px;
  height: 34px;
}

.roster-team-member-toggle span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.roster-team-member-toggle strong,
.roster-team-member-toggle small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-team-member-toggle small {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.roster-panel-head,
.roster-side-head,
.roster-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.roster-panel-head h2,
.roster-side-head h2,
.roster-subsection-head h2,
.roster-subsection-head h3 {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 780;
  line-height: 1.25;
}

.roster-slot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.roster-slot-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: 6px;
}

button.roster-slot-row {
  grid-template-columns: 22px 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 8px;
  text-align: left;
}

.roster-slot-row.active {
  border-color: var(--accent);
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px rgba(64, 88, 232, 0.22);
}

.roster-add-slot {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-muted) 72%, #fff);
  color: var(--text-secondary);
}

.roster-add-slot:hover,
.roster-add-slot:focus-visible {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--text-primary);
}

.roster-add-slot.active {
  border-style: solid;
  color: var(--text-primary);
}

.roster-slot-main {
  display: grid;
  grid-template-columns: 22px 42px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.roster-slot-main:hover {
  background: transparent;
}

.roster-slot-index {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.roster-slot-row.active .roster-slot-index {
  background: var(--accent);
  color: #fff;
}

.roster-slot-main .avatar {
  width: 42px;
  height: 42px;
}

.roster-slot-add-art {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.roster-add-slot.active .roster-slot-add-art,
.roster-add-slot:hover .roster-slot-add-art,
.roster-add-slot:focus-visible .roster-slot-add-art {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: #fff;
}

.roster-slot-add-art .slot-plus {
  width: 18px;
  height: 18px;
}

.roster-slot-add-art .slot-plus::before {
  width: 18px;
  height: 2px;
}

.roster-slot-add-art .slot-plus::after {
  width: 2px;
  height: 18px;
}

.roster-slot-copy,
.roster-slot-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.roster-slot-title {
  align-items: center;
}

.roster-slot-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-hp-bar {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #E9EEF7;
}

.roster-hp-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

.roster-slot-more {
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
  color: var(--danger);
  padding: 0;
}

.roster-slot-more:hover,
.roster-slot-more:focus-visible {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, #fff);
  color: var(--danger);
}

.roster-editor-main-panel {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  overflow: hidden;
}

.roster-editor-main-panel.is-empty {
  min-height: 520px;
  padding: var(--space-6);
  place-items: center;
}

.roster-editor-empty {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}

.roster-empty-picker {
  width: min(900px, 100%);
}

.roster-empty-search {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
}

.roster-editor-identity {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: var(--space-5);
  border-bottom: 1px solid var(--border);
  padding: var(--space-6);
}

.roster-editor-art {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.roster-editor-art > img {
  width: 220px;
  height: 220px;
  justify-self: center;
  object-fit: contain;
  image-rendering: pixelated;
}

.roster-editor-fields {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.roster-editor-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
}

.roster-editor-pokemon-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.roster-editor-name-row h2 {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 820;
  line-height: 1.15;
}

.roster-editor-species-name {
  margin-top: calc(var(--space-1) * -0.5);
  margin-bottom: var(--space-1);
}

.roster-editor-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.roster-name-field {
  grid-column: 1 / -1;
}

.readonly-select {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0 var(--space-3);
}

.shield-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent);
}

.roster-editor-subsection {
  display: grid;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-6) var(--space-5);
}

.roster-move-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  overflow: visible;
}

.roster-move-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(64px, auto) 30px;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
}

.roster-move-row:last-child {
  border-bottom: 1px solid var(--border);
}

.move-index {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.roster-move-row input {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.roster-move-row input:focus {
  box-shadow: none;
}

.move-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  min-width: 0;
}

.move-clear-ui {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border: 0;
  color: var(--text-muted);
}

.roster-ev-table {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.roster-ev-cell {
  position: relative;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-3);
  text-align: center;
}

.roster-ev-cell:nth-child(6n) {
  border-right: 0;
}

.roster-ev-label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 780;
}

.roster-ev-cell > strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
}

.roster-ev-meter {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #E9EEF7;
}

.roster-ev-meter > span {
  display: block;
  width: var(--ev-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
}

.roster-ev-stepper {
  display: grid;
  grid-template-columns: 28px minmax(34px, 1fr) 28px;
  gap: 4px;
}

.roster-ev-stepper button {
  min-width: 28px;
  min-height: 28px;
  border-radius: var(--radius-sm);
  padding: 0;
}

.roster-ev-stepper input {
  height: 28px;
  min-height: 28px;
  padding: 0 4px;
  text-align: center;
}

.roster-ev-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.roster-ev-quick-actions button {
  min-width: 0;
  min-height: 24px;
  border-radius: var(--radius-sm);
  padding: 0 4px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

.roster-ev-cell small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.roster-popular-search {
  display: grid;
  gap: var(--space-2);
}

.roster-popular-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.roster-popular-chip-list button {
  min-height: 28px;
  border-radius: 999px;
  background: var(--selection-soft);
  color: var(--accent-strong);
  padding: 4px 10px;
  font-size: var(--font-size-xs);
}

.roster-add-search {
  width: 100%;
  text-align: left;
}

.roster-search-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border-radius: var(--radius-sm);
}

.roster-search-mode button {
  min-width: 0;
  min-height: 32px;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: var(--font-size-xs);
  font-weight: 850;
  white-space: nowrap;
}

.roster-popular-grid {
  max-height: 360px;
}

.roster-set-list {
  display: grid;
}

.roster-set-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 62px;
  gap: var(--space-3);
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
}

.roster-set-row:last-child {
  border-bottom: 0;
}

.set-rank {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.roster-set-row strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-weight: 780;
}

.roster-set-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.set-usage {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.set-usage small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.set-usage b {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
}

.roster-subsection-head small {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

@media (max-width: 1320px) {
  .roster-editor-layout {
    grid-template-columns: minmax(280px, 0.72fr) minmax(560px, 1.28fr);
  }
}

@media (max-width: 980px) {
  .roster-editor-layout,
  .roster-editor-identity,
  .roster-editor-form-grid,
  .roster-move-list {
    grid-template-columns: 1fr;
  }

  .roster-slot-list {
    grid-template-columns: 1fr;
  }

  .roster-ev-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-ev-cell {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

}

/* Battle setup overview redesign */
.battle-setup-overview-content {
  width: min(1920px, 100%);
}

.battle-setup-overview {
  gap: var(--space-4);
}

.battle-setup-compact-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 8px 6px 10px;
}

.battle-setup-compact-menu .app-data-notice {
  flex: 1 1 auto;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #F7F7F7;
}

.battle-setup-menu-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  cursor: pointer;
}

.battle-setup-menu-title:hover {
  opacity: 0.88;
}

.battle-setup-menu-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.battle-setup-menu-copy strong,
.battle-setup-menu-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-setup-menu-copy strong {
  font-size: var(--font-size-md);
  font-weight: 850;
  line-height: 1.1;
}

.battle-setup-menu-copy small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 760;
  line-height: 1.1;
}

.battle-setup-menu-mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  background: url("/static/site-logo.png") center / contain no-repeat;
}

.battle-setup-menu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.battle-setup-menu-actions .action-button,
.battle-setup-menu-actions .compact-button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: var(--font-size-sm);
}

.battle-setup-menu-actions .action-button {
  min-width: 112px;
}

.battle-setup-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "team opponent"
    "speed .";
  gap: var(--space-4);
  align-items: start;
}

.battle-setup-overview-grid > .panel {
  margin-top: 0;
  min-width: 0;
}

.setup-my-team-overview {
  grid-area: team;
  min-width: 0;
}

.setup-saved-team-strip {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-muted) 58%, #fff);
  padding: var(--space-3);
}

.setup-saved-team-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.setup-saved-team-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  min-height: 50px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 8px 10px;
  text-align: left;
}

.setup-saved-team-button.active {
  border-color: var(--selection);
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px var(--selection-ring);
}

.setup-saved-team-button > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.setup-saved-team-button strong,
.setup-saved-team-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-saved-team-button small {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 760;
}

.setup-opponent-overview {
  grid-area: opponent;
  min-width: 0;
}

.setup-speed-overview {
  grid-area: speed;
  align-self: start;
}

.battle-setup-speed-compare {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.battle-setup-speed-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.battle-setup-speed-compare-head > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.battle-setup-speed-compare-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.battle-setup-speed-compare-head small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 650;
}

.battle-setup-speed-compare-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.battle-setup-speed-grid-head,
.battle-setup-speed-row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-2);
  align-items: stretch;
  min-width: 0;
}

.battle-setup-speed-grid-head {
  align-items: center;
  min-height: 24px;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 760;
}

.battle-setup-speed-grid-head span:last-child {
  padding-left: 2px;
}

.battle-setup-speed-column {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.battle-setup-speed-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 32px;
}

.battle-setup-speed-column-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.battle-setup-speed-column-head span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 760;
}

.battle-setup-speed-list,
.battle-setup-speed-opponent-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.battle-setup-speed-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 5px 6px;
}

.battle-setup-speed-card.my-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.battle-setup-speed-card.my-card:hover,
.battle-setup-speed-card.my-card:focus-visible,
.battle-setup-speed-card.my-card.is-focused {
  border-color: color-mix(in srgb, var(--accent) 42%, #fff);
  background: var(--selection-soft);
}

.battle-setup-speed-identity {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.battle-setup-speed-identity img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
}

.battle-setup-speed-identity > span {
  display: block;
  min-width: 0;
}

.battle-setup-speed-name-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.battle-setup-speed-identity strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-setup-speed-identity small {
  flex: 0 1 auto;
  max-width: 58px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-setup-speed-number,
.battle-setup-speed-opponent-name span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 22px;
  border-radius: var(--radius-sm);
  background: var(--red-100);
  color: var(--red-700);
  font-size: var(--font-size-xs);
  font-weight: 820;
}

.battle-setup-speed-card.opponent-card {
  display: grid;
  gap: 8px;
}

.battle-setup-speed-spacer {
  min-width: 0;
  min-height: 0;
}

.battle-setup-speed-opponent-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.battle-setup-speed-opponent-name strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-setup-speed-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.battle-setup-speed-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, #fff);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-alt) 62%, #fff);
  padding: 5px 6px;
}

.battle-setup-speed-band.tie-band {
  border-color: color-mix(in srgb, var(--accent) 26%, #fff);
  background: var(--selection-soft);
}

.battle-setup-speed-band.empty-band {
  border-color: transparent;
  background: transparent;
}

.battle-setup-speed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 92px;
  min-height: 25px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-primary);
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.1;
}

.battle-setup-speed-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-setup-speed-badge b {
  color: var(--red-700);
}

.battle-setup-speed-badge.mode {
  border-color: color-mix(in srgb, var(--damage-line) 34%, #fff);
  background: rgba(185, 45, 61, 0.08);
  color: var(--damage-ink);
}

.battle-setup-speed-badge.neutral {
  border-color: color-mix(in srgb, var(--selection) 30%, #fff);
}

.battle-setup-speed-badge.positive {
  border-color: color-mix(in srgb, var(--hp-fill) 48%, #fff);
  background: color-mix(in srgb, var(--hp-fill-soft) 18%, #fff);
}

.battle-setup-speed-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: var(--space-3);
}

.setup-overview-card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  padding: var(--space-4);
}

.setup-overview-head,
.setup-subhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.setup-overview-card > .setup-overview-head {
  min-height: 68px;
}

.setup-overview-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setup-overview-head .inline-actions {
  flex: 0 0 auto;
  align-items: flex-start;
  padding-top: 1px;
}

.setup-overview-actions {
  max-width: min(430px, 58%);
}

.setup-roster-threat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 136px;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 4px 7px;
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.setup-roster-threat-toggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-roster-threat-toggle b {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
}

.setup-roster-threat-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 42%, #fff);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--accent-strong);
}

.setup-roster-threat-toggle.active b {
  color: var(--accent-strong);
}

.setup-overview-head .compact-button {
  white-space: nowrap;
}

.setup-overview-head h2 {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1.2;
}

.setup-overview-head .hint {
  font-size: var(--font-size-sm);
}

.setup-subhead strong {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 780;
}

.setup-subhead small {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.setup-team-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.setup-team-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 46px auto;
  column-gap: 7px;
  row-gap: 6px;
  align-content: start;
  align-items: center;
  min-width: 0;
  min-height: 136px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: 10px;
  padding-right: 34px;
  text-align: left;
}

.setup-team-card-wrap {
  position: relative;
  min-width: 0;
}

.setup-team-card-wrap .setup-team-card {
  width: 100%;
  height: 100%;
}

.pokemon-form-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 4px;
  font-size: var(--font-size-xs);
  font-weight: 760;
}

.pokemon-form-toggle > span:first-child {
  flex: 0 0 auto;
  padding-inline: 4px;
  white-space: nowrap;
}

.pokemon-form-toggle-buttons {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.pokemon-form-toggle button {
  min-width: 0;
  min-height: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 820;
  line-height: 1;
  padding: 4px 7px;
  white-space: nowrap;
}

.pokemon-form-toggle button.active,
.pokemon-form-toggle button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.pokemon-form-toggle button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.pokemon-form-toggle.setup {
  width: 100%;
  margin-top: 5px;
}

.pokemon-form-toggle.battle,
.pokemon-form-toggle.battle-stage {
  width: fit-content;
  max-width: 100%;
}

.setup-my-team-overview.is-threats-hidden .setup-team-card {
  grid-template-rows: 46px;
  min-height: 76px;
}

.setup-team-remove {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--danger);
  padding: 0;
  z-index: 2;
}

.setup-team-remove:hover,
.setup-team-remove:focus-visible {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, #fff);
  color: var(--danger);
}

.setup-team-card:hover,
.setup-opponent-suggestion-card:hover {
  border-color: var(--accent);
  background: var(--hover-bg);
}

.setup-team-card.selected {
  border-color: var(--accent);
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px rgba(64, 88, 232, 0.22);
}

.setup-team-card:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.setup-team-card > .setup-card-order {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.setup-team-art {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.setup-team-art img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.setup-team-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setup-team-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-team-copy strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
}

.setup-sample-note {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}

.setup-sample-note:hover,
.setup-sample-note:focus-visible {
  color: var(--accent-strong);
  outline: none;
}

.setup-team-pill-row,
.setup-team-summary-grid div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.setup-team-card.empty {
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: center;
  min-height: 152px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-muted);
  cursor: default;
}

.setup-roster-empty-card.empty {
  grid-template-columns: 1fr;
  place-items: center;
  padding-right: 12px;
  text-align: center;
}

.setup-roster-empty-card.empty > span {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.setup-team-card.empty:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.58);
}

.setup-team-card.empty strong,
.setup-selected-opponent-card.empty strong {
  color: var(--text-secondary);
}

.setup-team-card.empty small,
.setup-selected-opponent-card.empty small {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.setup-team-summary-grid {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
}

.setup-team-summary-grid > span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.setup-roster-fill-strip {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-items: start;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: var(--space-3);
}

.setup-roster-fill-strip.is-empty {
  grid-template-columns: minmax(0, 1fr) auto;
}

.setup-roster-fill-strip strong,
.setup-roster-fill-strip small {
  display: block;
}

.setup-roster-fill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.setup-roster-fill-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.setup-roster-fill-title-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.setup-roster-edit-button,
.setup-saved-team-open-button,
.setup-roster-fill-toggle {
  min-width: 0;
  white-space: nowrap;
}

.setup-saved-team-open-button.active {
  border-color: var(--selection);
  background: var(--selection-soft);
  color: var(--text-primary);
}

.setup-saved-team-popover {
  position: absolute;
  z-index: 30;
  right: var(--space-3);
  bottom: calc(100% - var(--space-2));
  display: grid;
  gap: var(--space-3);
  width: min(420px, calc(100vw - 32px));
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
}

.setup-saved-team-popover-head,
.setup-saved-team-popover-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.setup-saved-team-popover-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-saved-team-close {
  min-width: 0;
  white-space: nowrap;
}

.setup-saved-team-popover .setup-saved-team-list {
  grid-template-columns: 1fr;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.setup-roster-fill-toggle {
  padding-inline: 10px;
}

.setup-roster-fill-strip small,
.setup-roster-fill-strip > span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.setup-roster-fill-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr));
  gap: 5px;
  grid-column: 1 / -1;
  min-width: 0;
  overflow: visible;
}

.setup-roster-fill-chip {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 4px;
  align-items: center;
  min-width: 92px;
  min-height: 38px;
  padding: 4px 6px;
}

.setup-roster-fill-strip.is-expanded .setup-roster-fill-chip {
  grid-template-columns: 32px minmax(0, 1fr) 22px;
  gap: var(--space-2);
  min-height: 42px;
  padding: 5px 8px;
}

.setup-roster-fill-chip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.setup-roster-fill-strip.is-expanded .setup-roster-fill-chip img {
  width: 32px;
  height: 32px;
}

.setup-roster-fill-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.setup-roster-fill-copy strong,
.setup-roster-fill-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-roster-fill-copy strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 760;
}

.setup-roster-fill-copy small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.setup-roster-fill-chip.selected {
  border-color: var(--accent);
  background: var(--selection-soft);
}

.setup-roster-fill-chip:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.setup-roster-fill-chip b,
.setup-opponent-suggestion-card b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent-strong);
}

.setup-roster-fill-chip b {
  width: 18px;
  height: 18px;
}

.setup-roster-fill-strip.is-expanded .setup-roster-fill-chip b {
  width: 22px;
  height: 22px;
}

.setup-roster-fill-chip.selected b {
  background: var(--accent);
  color: #fff;
}

.setup-opponent-search {
  position: relative;
  display: block;
}

.setup-opponent-search input {
  width: 100%;
  padding-right: 44px;
}

.setup-search-icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  color: var(--accent-strong);
  transform: translateY(-50%);
}

.setup-selected-opponent-strip,
.setup-opponent-suggestions {
  display: grid;
  gap: var(--space-3);
}

.setup-selected-opponent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.setup-selected-opponent-card-wrap {
  position: relative;
  min-width: 0;
}

.setup-selected-opponent-card-wrap .setup-selected-opponent-card {
  width: 100%;
  height: 100%;
}

.setup-card-matchups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.setup-team-card .setup-card-matchups {
  grid-column: 1 / -1;
  width: calc(100% + 32px);
  max-width: calc(100% + 32px);
}

.setup-selected-opponent-card .setup-card-matchups {
  grid-column: 1 / -1;
}

.setup-card-matchup-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 3px;
  align-items: start;
  min-width: 0;
}

.setup-card-matchup-label {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 760;
  line-height: 15px;
}

.setup-card-matchup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  min-width: 0;
}

.setup-matchup-separator {
  display: inline-flex;
  align-items: center;
  min-height: 15px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  margin: 0 1px;
}

.setup-matchup-chip,
.setup-matchup-empty {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 15px;
  min-width: 0;
  border: 1px solid var(--matchup-border, var(--border));
  border-radius: 999px;
  background: var(--matchup-bg, var(--surface-muted));
  color: var(--matchup-text, var(--text-secondary));
  padding: 0 3px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.setup-matchup-empty {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.setup-matchup-chip.is-strong {
  font-weight: 400;
}

.setup-matchup-chip[data-type="normal"] { --matchup-bg: var(--type-normal-bg); --matchup-text: var(--type-normal-text); --matchup-border: var(--type-normal-border); }
.setup-matchup-chip[data-type="fire"] { --matchup-bg: var(--type-fire-bg); --matchup-text: var(--type-fire-text); --matchup-border: var(--type-fire-border); }
.setup-matchup-chip[data-type="water"] { --matchup-bg: var(--type-water-bg); --matchup-text: var(--type-water-text); --matchup-border: var(--type-water-border); }
.setup-matchup-chip[data-type="electric"] { --matchup-bg: var(--type-electric-bg); --matchup-text: var(--type-electric-text); --matchup-border: var(--type-electric-border); }
.setup-matchup-chip[data-type="grass"] { --matchup-bg: var(--type-grass-bg); --matchup-text: var(--type-grass-text); --matchup-border: var(--type-grass-border); }
.setup-matchup-chip[data-type="ice"] { --matchup-bg: var(--type-ice-bg); --matchup-text: var(--type-ice-text); --matchup-border: var(--type-ice-border); }
.setup-matchup-chip[data-type="fighting"] { --matchup-bg: var(--type-fighting-bg); --matchup-text: var(--type-fighting-text); --matchup-border: var(--type-fighting-border); }
.setup-matchup-chip[data-type="poison"] { --matchup-bg: var(--type-poison-bg); --matchup-text: var(--type-poison-text); --matchup-border: var(--type-poison-border); }
.setup-matchup-chip[data-type="ground"] { --matchup-bg: var(--type-ground-bg); --matchup-text: var(--type-ground-text); --matchup-border: var(--type-ground-border); }
.setup-matchup-chip[data-type="flying"] { --matchup-bg: var(--type-flying-bg); --matchup-text: var(--type-flying-text); --matchup-border: var(--type-flying-border); }
.setup-matchup-chip[data-type="psychic"] { --matchup-bg: var(--type-psychic-bg); --matchup-text: var(--type-psychic-text); --matchup-border: var(--type-psychic-border); }
.setup-matchup-chip[data-type="bug"] { --matchup-bg: var(--type-bug-bg); --matchup-text: var(--type-bug-text); --matchup-border: var(--type-bug-border); }
.setup-matchup-chip[data-type="rock"] { --matchup-bg: var(--type-rock-bg); --matchup-text: var(--type-rock-text); --matchup-border: var(--type-rock-border); }
.setup-matchup-chip[data-type="ghost"] { --matchup-bg: var(--type-ghost-bg); --matchup-text: var(--type-ghost-text); --matchup-border: var(--type-ghost-border); }
.setup-matchup-chip[data-type="dragon"] { --matchup-bg: var(--type-dragon-bg); --matchup-text: var(--type-dragon-text); --matchup-border: var(--type-dragon-border); }
.setup-matchup-chip[data-type="dark"] { --matchup-bg: var(--type-dark-bg); --matchup-text: var(--type-dark-text); --matchup-border: var(--type-dark-border); }
.setup-matchup-chip[data-type="steel"] { --matchup-bg: var(--type-steel-bg); --matchup-text: var(--type-steel-text); --matchup-border: var(--type-steel-border); }
.setup-matchup-chip[data-type="fairy"] { --matchup-bg: var(--type-fairy-bg); --matchup-text: var(--type-fairy-text); --matchup-border: var(--type-fairy-border); }
.setup-matchup-chip[data-type="unknown"] { --matchup-bg: var(--type-unknown-bg); --matchup-text: var(--type-unknown-text); --matchup-border: var(--type-unknown-border); }

.setup-selected-opponent-card {
  align-content: start;
  min-height: 176px;
}

.setup-counter-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.setup-counter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.setup-counter-head > span:first-child {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.setup-matchup-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-secondary);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  cursor: help;
}

.setup-matchup-help::after,
.setup-sample-note::after,
.setup-counter-ko::after,
.setup-counter-guard::after,
.setup-counter-speed::after,
.setup-counter-more::after {
  position: absolute;
  z-index: 30;
  display: block;
  width: max-content;
  max-width: min(260px, calc(100vw - 48px));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 10px 24px rgba(24, 33, 54, 0.14);
  color: var(--text-primary);
  content: attr(data-tooltip);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 680;
  line-height: 1.45;
  opacity: 0;
  padding: 8px 9px;
  pointer-events: none;
  text-align: left;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  visibility: hidden;
  white-space: pre-line;
}

.setup-matchup-help::after {
  right: 0;
  top: calc(100% + 6px);
  transform: translateY(-2px);
}

.setup-sample-note::after {
  left: 0;
  top: calc(100% + 6px);
  transform: translateY(-2px);
}

.setup-counter-ko::after,
.setup-counter-guard::after,
.setup-counter-speed::after,
.setup-counter-more::after {
  right: 0;
  bottom: calc(100% + 6px);
  transform: translateY(2px);
}

.setup-matchup-help:hover::after,
.setup-matchup-help:focus-visible::after,
.setup-sample-note:hover::after,
.setup-sample-note:focus-visible::after,
.setup-counter-ko:hover::after,
.setup-counter-guard:hover::after,
.setup-counter-speed:hover::after,
.setup-counter-more:hover::after {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.is-floating-tooltip-active::after {
  display: none !important;
}

.setup-floating-tooltip {
  position: fixed;
  z-index: 10000;
  display: block;
  width: max-content;
  max-width: min(280px, calc(100vw - 20px));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 10px 24px rgba(24, 33, 54, 0.16);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 680;
  line-height: 1.45;
  opacity: 0;
  overflow-wrap: anywhere;
  padding: 8px 9px;
  pointer-events: none;
  text-align: left;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
  visibility: hidden;
  white-space: pre-line;
}

.setup-floating-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.setup-matchup-help:hover,
.setup-matchup-help:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
  outline: none;
}

.setup-counter-list {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setup-counter-card {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  min-width: 0;
  min-height: 33px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-muted) 62%, #fff);
  padding: 3px;
}

.setup-counter-card img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
}

.setup-counter-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.setup-counter-copy strong,
.setup-counter-move-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-counter-copy strong {
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.setup-counter-move-text {
  color: var(--text-secondary);
  font-size: 10px;
}

.setup-counter-badges {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 0;
}

.setup-counter-micro-row {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
}

.setup-counter-effect {
  max-width: 64px;
  padding-inline: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-counter-speed {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.1;
}

.setup-counter-ko {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 15px;
  border: 1px solid color-mix(in srgb, var(--danger) 36%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 9%, #fff);
  color: var(--damage-strong);
  padding: 0 4px;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.1;
}

.setup-counter-guard {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  color: var(--accent-strong);
  padding: 0 4px;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.1;
}

.setup-counter-speed.faster {
  border-color: color-mix(in srgb, var(--success) 44%, #fff);
  background: color-mix(in srgb, var(--success) 10%, #fff);
  color: #147A49;
}

.setup-counter-speed.slower {
  border-color: color-mix(in srgb, var(--danger) 36%, #fff);
  background: color-mix(in srgb, var(--danger) 8%, #fff);
  color: var(--damage-strong);
}

.setup-counter-speed.opponent-first {
  min-width: 44px;
  border-color: color-mix(in srgb, var(--danger) 42%, #fff);
  background: color-mix(in srgb, var(--danger) 10%, #fff);
  color: var(--damage-strong);
}

.setup-counter-speed.tie {
  border-color: color-mix(in srgb, var(--warning) 40%, #fff);
  background: color-mix(in srgb, var(--warning) 12%, #fff);
  color: #93620A;
}

.setup-counter-more,
.setup-counter-empty {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-secondary);
  padding: 5px 7px;
  font-size: var(--font-size-xs);
  font-weight: 760;
}

.setup-counter-more {
  position: relative;
  justify-content: center;
  border-style: solid;
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.setup-selected-opponent-remove {
  top: var(--space-3);
  right: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--danger);
}

.setup-selected-opponent-card.empty {
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 152px;
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-muted) 72%, #fff);
  color: var(--text-secondary);
  padding-right: 12px;
}

.setup-selected-opponent-card.empty:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-muted) 72%, #fff);
}

.setup-selected-opponent-empty-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.setup-opponent-suggestion-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.setup-opponent-suggestion-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 6px;
  text-align: left;
  justify-items: stretch;
}

.setup-opponent-suggestion-card img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.setup-opponent-suggestion-card > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setup-opponent-suggestion-card strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-strategy-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.setup-strategy-list .insight-row {
  min-height: 62px;
}

@media (min-width: 1181px) {
  .battle-setup-overview-grid {
    align-items: stretch;
  }

  .setup-my-team-overview,
  .setup-opponent-overview {
    height: 100%;
  }
}

@media (max-width: 1180px) {
  .battle-setup-overview-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "team"
      "opponent"
      "speed";
  }

  .setup-selected-opponent-grid,
  .setup-team-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-team-card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 152px;
    padding: 12px;
    padding-right: 40px;
  }

  .setup-team-art {
    width: 52px;
    height: 52px;
  }

  .setup-team-art img {
    width: 48px;
    height: 48px;
  }

  .setup-team-copy strong {
    font-size: var(--font-size-sm);
  }

  .setup-overview-actions {
    max-width: min(360px, 48%);
  }
}

@media (max-width: 1100px) {
  .setup-opponent-suggestion-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .setup-overview-head {
    flex-direction: column;
  }

  .setup-overview-actions {
    justify-content: space-between;
    width: 100%;
    max-width: none;
  }

  .setup-roster-threat-toggle {
    flex: 1 1 auto;
  }

  .battle-setup-speed-compare-grid,
  .battle-setup-speed-grid-head,
  .battle-setup-speed-row {
    grid-template-columns: 1fr;
  }

  .battle-setup-speed-grid-head span:last-child {
    display: none;
  }

  .battle-setup-speed-spacer {
    display: none;
  }

  .setup-team-card-grid {
    grid-template-columns: 1fr;
  }

  .setup-team-card {
    min-height: 142px;
  }

  .setup-opponent-suggestion-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-selected-opponent-grid {
    grid-template-columns: 1fr;
  }

  .setup-roster-fill-strip {
    grid-template-columns: 1fr;
  }

  .setup-roster-fill-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-roster-fill-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .setup-roster-fill-title-actions {
    width: 100%;
  }

  .setup-roster-fill-title-actions > button {
    flex: 1 1 auto;
  }

  .setup-saved-team-popover {
    right: 10px;
    left: 10px;
    bottom: auto;
    width: auto;
  }

  .setup-overview-head {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .setup-overview-head .inline-actions {
    justify-content: flex-start;
    padding-top: 0;
  }
}

@media (max-width: 360px) {
  .setup-roster-fill-list {
    grid-template-columns: 1fr;
  }
}

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

.opponent-select-content {
  max-width: 1720px;
}

.opponent-select-screen {
  display: grid;
  gap: var(--space-4);
}

.opponent-select-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(420px, 0.78fr);
  gap: var(--space-4);
  align-items: start;
}

.opponent-candidate-panel {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
}

.opponent-select-panel-head {
  display: flex;
  gap: var(--space-4);
  align-items: start;
  justify-content: space-between;
  min-width: 0;
}

.opponent-select-panel-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.opponent-select-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.opponent-sort-select {
  display: grid;
  grid-template-columns: auto minmax(118px, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.opponent-sort-select span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.opponent-select-search input {
  min-height: 54px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  padding-left: var(--space-5);
}

.opponent-search-toolbar,
.setup-opponent-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

.opponent-type-search-trigger {
  min-height: 42px;
  white-space: nowrap;
}

.opponent-select-screen .opponent-type-search-trigger {
  min-height: 54px;
  border-radius: var(--radius-md);
}

.battle-opponent-add-search .opponent-type-search-trigger {
  justify-self: start;
}

.opponent-select-screen .opponent-filter-row {
  gap: var(--space-2);
}

.opponent-select-screen .opponent-filter-chip {
  min-height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 700;
}

.opponent-select-screen .opponent-filter-chip.active,
.opponent-select-screen .opponent-filter-chip:hover,
.opponent-select-screen .opponent-filter-chip:focus {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.opponent-select-screen .opponent-candidate-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
  max-height: none;
  overflow: visible;
  padding: 0;
}

.opponent-select-screen .opponent-candidate-card {
  grid-template-columns: 34px 72px minmax(0, 1fr);
  min-height: 150px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}

.opponent-select-screen .opponent-candidate-card .avatar {
  width: 72px;
  height: 72px;
}

.opponent-select-screen .opponent-candidate-card.selected {
  border-color: var(--accent);
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px rgba(64, 88, 232, 0.22);
}

.opponent-select-screen .opponent-candidate-tags {
  grid-column: 1 / -1;
}

.opponent-select-screen .opponent-candidate-tags small {
  background: var(--surface-muted);
  color: var(--accent-strong);
  font-weight: 700;
}

.opponent-select-screen .opponent-selected-panel {
  display: grid;
  gap: var(--space-4);
}

.opponent-roster-summary-card,
.opponent-select-insight-panel,
.opponent-companion-panel,
.opponent-detail-drawer {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.opponent-roster-selected-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.opponent-roster-selected-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 118px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--selection-soft);
  padding: var(--space-3);
  text-align: center;
}

.opponent-roster-selected-card .avatar {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}

.opponent-roster-selected-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-selected-check {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}

.opponent-selected-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  width: 100%;
}

button.ghost.mini {
  min-height: 30px;
  padding: 5px 10px;
  font-size: var(--font-size-xs);
}

.opponent-roster-selected-card.empty {
  place-content: center;
  border-color: var(--border-strong);
  border-style: dashed;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-muted);
}

.opponent-roster-selected-card.empty .slot-plus {
  width: 30px;
  height: 30px;
}

.opponent-roster-selected-card.empty strong,
.opponent-roster-selected-card.empty small {
  color: var(--text-muted);
}

.opponent-companion-panel {
  display: grid;
  gap: var(--space-3);
}

.text-link {
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  padding: 0;
  font-weight: 800;
}

.text-link:hover,
.text-link:focus {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.opponent-companion-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.opponent-companion-chip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-height: 52px;
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--text-primary);
  padding: var(--space-2);
  text-align: left;
}

.opponent-companion-chip img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}

.opponent-companion-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-select-action-bar {
  margin-top: 0;
}

.opponent-detail-drawer {
  display: grid;
  gap: var(--space-3);
}

.opponent-detail-drawer .opponent-detail-head {
  padding-top: 0;
}

@media (max-width: 1280px) {
  .opponent-select-layout {
    grid-template-columns: 1fr;
  }

  .opponent-roster-selected-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .opponent-candidate-panel,
  .opponent-roster-summary-card,
  .opponent-select-insight-panel,
  .opponent-companion-panel,
  .opponent-detail-drawer {
    padding: var(--space-3);
  }

  .opponent-select-panel-head,
  .opponent-select-tools,
  .opponent-sort-select,
  .opponent-search-toolbar,
  .setup-opponent-search-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .opponent-select-screen .opponent-candidate-grid,
  .opponent-roster-selected-grid,
  .opponent-companion-list {
    grid-template-columns: 1fr;
  }

  .opponent-select-screen .opponent-candidate-card {
    grid-template-columns: 32px 60px minmax(0, 1fr);
    min-height: 118px;
  }

  .opponent-select-screen .opponent-candidate-card .avatar {
    width: 60px;
    height: 60px;
  }

  .opponent-select-action-bar {
    grid-template-columns: 1fr;
  }
}

.lead-selection-content {
  max-width: 1720px;
}

.lead-selection-page {
  display: grid;
  gap: var(--space-4);
}

.lead-selection-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.74fr) minmax(560px, 1.34fr) minmax(360px, 0.82fr);
  gap: var(--space-4);
  align-items: start;
}

.lead-team-panel,
.lead-slot-panel,
.lead-selection-main > .selection-explanation-panel,
.lead-selection-main > .selection-matchup-summary-panel,
.lead-selection-side > .selection-strategy-card,
.lead-selection-side > .lead-alt-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.lead-selection-main,
.lead-selection-side {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.lead-panel-head {
  display: flex;
  gap: var(--space-3);
  align-items: start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.lead-panel-head h2,
.lead-panel-head h3,
.lead-alt-panel h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.lead-team-list {
  display: grid;
  gap: var(--space-2);
}

.lead-team-row {
  display: grid;
  grid-template-columns: 30px 26px 64px minmax(0, 1fr) 22px;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.lead-team-row:hover,
.lead-team-row:focus,
.lead-team-row.selected {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(64, 88, 232, 0.22);
}

.lead-team-order,
.lead-team-state {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--accent-strong);
  font-weight: 800;
}

.lead-team-row.selected .lead-team-order,
.lead-team-row.selected .lead-team-state {
  background: var(--accent);
  color: #fff;
}

.lead-team-row .avatar {
  width: 64px;
  height: 64px;
}

.lead-team-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.lead-team-title,
.lead-team-hp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.lead-team-title strong {
  color: var(--text-primary);
  font-weight: 820;
}

.lead-team-hp {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.lead-team-menu {
  color: var(--text-muted);
  font-weight: 800;
}

.lead-team-summary {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: var(--space-3);
}

.lead-team-summary summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 800;
}

.lead-team-summary .setup-team-summary-grid {
  margin-top: var(--space-3);
}

.lead-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.lead-slot-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 238px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-4);
  text-align: center;
}

.lead-slot-card.selected {
  border-color: var(--accent);
  background: var(--selection-soft);
}

.lead-slot-card.empty {
  place-content: center;
  border-style: dashed;
  color: var(--text-muted);
}

.lead-slot-card .setup-card-order {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--accent);
  color: #fff;
}

.lead-slot-drag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  color: var(--text-muted);
  letter-spacing: 0;
}

.lead-slot-card .avatar {
  width: 112px;
  height: 92px;
  object-fit: contain;
  image-rendering: pixelated;
}

.lead-slot-card > strong {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-primary);
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-slot-card .setup-lead-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  width: 100%;
}

.lead-slot-card .setup-lead-controls button {
  min-height: 32px;
  padding: 5px 10px;
}

.lead-selection-main .selection-explanation-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lead-selection-main .selection-explanation-card {
  min-height: 138px;
}

.lead-selection-main .selection-matchup-list {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.lead-selection-main .selection-matchup-row {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 74px;
}

.lead-selection-main .selection-matchup-row b {
  grid-column: 1 / -1;
  justify-self: start;
}

.lead-alt-panel {
  display: grid;
  gap: var(--space-3);
}

.lead-alt-panel .final-panel-head {
  align-items: start;
}

.lead-alt-panel .selection-recommendation-list {
  gap: var(--space-3);
}

.lead-alt-panel .selection-recommendation-option {
  border-color: var(--border);
  background: var(--surface);
}

.lead-llm-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: var(--space-3);
}

.lead-llm-card strong {
  color: var(--text-primary);
  font-weight: 800;
}

.lead-llm-card span,
.lead-llm-card small {
  color: var(--text-secondary);
}

.lead-llm-card.warning {
  border-color: color-mix(in srgb, var(--warning) 42%, #fff);
  background: #FFF7E6;
}

.lead-selection-action-bar {
  margin-top: 0;
}

@media (max-width: 1380px) {
  .lead-selection-layout {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  }

  .lead-selection-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .lead-selection-layout,
  .lead-selection-side,
  .lead-slot-grid,
  .lead-selection-main .selection-explanation-list {
    grid-template-columns: 1fr;
  }

  .lead-selection-side {
    grid-column: auto;
  }

  .lead-team-row {
    grid-template-columns: 28px 24px 52px minmax(0, 1fr);
  }

  .lead-team-menu {
    display: none;
  }

  .lead-team-row .avatar {
    width: 52px;
    height: 52px;
  }

  .lead-team-hp {
    grid-template-columns: 1fr;
  }

  .lead-slot-card {
    min-height: 0;
  }

  .lead-selection-action-bar {
    grid-template-columns: 1fr;
  }
}

/* Battle analysis dashboard */
.battle-dashboard-content {
  width: min(1860px, 100%);
}

.page-header-battle {
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
}

.page-header-battle .page-title {
  min-width: 96px;
  padding-top: 2px;
}

.page-header-battle .page-title p {
  white-space: nowrap;
}

.battle-context-topbar {
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(21, 32, 64, 0.06);
  padding: var(--space-2) var(--space-6);
}

.battle-dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  width: min(1860px, 100%);
  margin: 0 auto;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

.battle-control-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}

.battle-control-label {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  color: var(--text-secondary);
  padding: 0;
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.battle-dashboard-controls .segmented {
  min-height: 40px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 4px;
}

.battle-dashboard-controls .segmented button {
  min-width: 38px;
  height: 30px;
  min-height: 30px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 4px 8px;
}

.battle-dashboard-controls .weather-button {
  min-width: 34px;
  width: 34px;
  padding: 4px;
}

.battle-dashboard-controls .weather-button svg {
  width: 20px;
  height: 20px;
}

.battle-dashboard-controls .battle-reset-button {
  min-width: 86px;
  min-height: 32px;
  gap: 5px;
  padding: 5px 9px;
  font-size: var(--font-size-xs);
}

.battle-dashboard-controls .battle-reset-button .button-icon {
  width: 14px;
  height: 14px;
  padding: 0;
  font-size: 13px;
}

.battle-topbar-attacker-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 850;
  padding: 7px 11px;
  white-space: nowrap;
}

.battle-topbar-attacker-toggle.is-opponent-turn {
  border-color: color-mix(in srgb, var(--danger) 72%, #fff);
  background: color-mix(in srgb, var(--danger) 92%, #fff);
}

.battle-topbar-attacker-toggle .switch-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.battle-dashboard {
  display: grid;
  grid-template-columns: minmax(230px, 250px) minmax(0, 1fr) minmax(360px, 400px);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.battle-dashboard.field-grass {
  --battle-field-tint: #EAF7E8;
}

.battle-dashboard.field-misty {
  --battle-field-tint: #F6EAF8;
}

.battle-dashboard.field-psychic {
  --battle-field-tint: #FCEAF2;
}

.battle-dashboard.field-electric {
  --battle-field-tint: #FFF7D8;
}

.battle-dashboard-sidebar,
.battle-dashboard-opponent-sidebar,
.battle-dashboard-main {
  min-width: 0;
}

.battle-dashboard-sidebar,
.battle-dashboard-opponent-sidebar {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

.battle-dashboard-sidebar {
  align-self: stretch;
  overflow: visible;
}

.battle-dashboard-opponent-sidebar {
  position: sticky;
  top: calc(var(--topbar-height, 52px) + var(--space-3));
  max-height: calc(100vh - var(--topbar-height, 52px) - var(--space-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.battle-switch-sidebar-panel {
  position: sticky;
  top: calc(var(--topbar-height, 52px) + var(--space-3));
  align-self: start;
  z-index: 1;
}

.battle-dashboard-main {
  display: grid;
  gap: var(--space-4);
}

.battle-dashboard-top-grid,
.battle-dashboard-bottom-grid,
.battle-dashboard-log-grid {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.battle-dashboard-top-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-items: stretch;
}

.battle-dashboard-bottom-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-items: start;
}

.battle-dashboard-top-grid > .battle-my-active-panel,
.battle-dashboard-top-grid > .battle-opponent-analysis-panel {
  height: 100%;
}

.battle-dashboard-bottom-grid > * {
  height: auto;
}

.battle-action-recommendation-slot {
  min-width: 0;
  min-height: 1px;
  visibility: hidden;
}

.battle-dashboard-bottom-grid > .battle-my-extra-moves-panel {
  grid-column: 1;
}

.battle-dashboard-bottom-grid > .battle-opponent-extra-moves-panel {
  grid-column: 2;
}

.battle-dashboard-log-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.battle-dashboard-panel {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--battle-field-tint, #fff) 18%, var(--surface));
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.battle-dashboard-panel-head,
.battle-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.battle-dashboard-panel-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.battle-dashboard-panel-head > .battle-panel-head-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.battle-panel-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.battle-dashboard-panel-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
  line-height: 1.25;
}

.battle-my-active-panel .battle-dashboard-panel-head h2,
.battle-opponent-analysis-panel .battle-dashboard-panel-head h2 {
  white-space: nowrap;
}

.battle-dashboard-panel-head p,
.battle-subhead span {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.battle-subhead strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.battle-help-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.battle-damage-help {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #E5E7EB;
  color: var(--text-secondary);
  cursor: help;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.battle-damage-help:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.battle-damage-help-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 120;
  display: none;
  width: min(360px, 72vw);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.55;
  padding: var(--space-3);
}

.battle-damage-help:hover .battle-damage-help-tooltip,
.battle-damage-help:focus .battle-damage-help-tooltip,
.battle-damage-help:focus-within .battle-damage-help-tooltip {
  display: block;
}

.battle-damage-help-tooltip > span {
  display: block;
}

.battle-damage-help-tooltip > span + span {
  margin-top: 6px;
}

.battle-sidebar-list,
.battle-opponent-switch-list {
  display: grid;
  gap: var(--space-2);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 2px;
}

.battle-dashboard-opponent-sidebar .battle-dashboard-panel {
  gap: var(--space-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.battle-dashboard-opponent-sidebar .battle-dashboard-panel-head {
  gap: var(--space-2);
}

.battle-dashboard-opponent-sidebar .battle-dashboard-panel-head h2 {
  font-size: var(--font-size-md);
}

.battle-dashboard-opponent-sidebar .battle-opponent-switch-list {
  max-height: none;
  overflow: visible;
}

.battle-dashboard-opponent-sidebar .battle-sidebar-card {
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 92px;
  padding: 7px var(--space-2);
}

.battle-dashboard-opponent-sidebar .battle-sidebar-card img {
  width: 54px;
  height: 54px;
}

.battle-dashboard-opponent-sidebar .battle-sidebar-pill {
  top: 6px;
  left: 6px;
  font-size: 10px;
  padding: 3px 6px;
}

.battle-dashboard-opponent-sidebar .battle-sidebar-copy {
  gap: 4px;
}

.battle-dashboard-opponent-sidebar .battle-sidebar-copy small {
  font-size: 11px;
  line-height: 1.3;
}

.battle-dashboard-opponent-sidebar .battle-compact-hp {
  gap: 6px;
}

.battle-dashboard-opponent-sidebar .battle-speed-relation {
  font-size: 10px;
  padding: 4px 6px;
}

.battle-switch-sidebar-panel {
  gap: 8px;
  border-radius: 4px;
  padding: 9px;
}

.battle-switch-sidebar-panel .battle-dashboard-panel-head h2 {
  font-size: 18px;
}

.battle-switch-sidebar-panel .battle-sidebar-list {
  max-height: none;
  overflow: visible;
}

.battle-switch-sidebar-panel .battle-sidebar-card {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 7px;
  min-height: 76px;
  padding: 6px;
}

.battle-switch-sidebar-panel .battle-sidebar-card img {
  width: 50px;
  height: 50px;
}

.battle-switch-sidebar-panel .battle-sidebar-pill {
  top: 5px;
  left: 5px;
  min-height: 20px;
  padding: 2px 6px;
  font-size: 10px;
}

.battle-switch-sidebar-panel .battle-sidebar-copy {
  gap: 3px;
}

.battle-switch-sidebar-panel .battle-sidebar-copy small:not(.battle-sidebar-damage-line) {
  display: block;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-switch-sidebar-panel .battle-sidebar-card.is-current-my {
  border-width: 2px;
  border-color: var(--battle-frame-dark);
  background: color-mix(in srgb, var(--battle-gold-soft) 72%, #FFFFFF);
}

.battle-switch-sidebar-panel .battle-sidebar-current-label {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--battle-frame);
  border-radius: 3px;
  background: var(--battle-frame-dark);
  color: #FFFFFF;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-dashboard-sidebar:has(.battle-switch-sidebar-panel.is-damage-preview) > .battle-speed-panel {
  display: none;
}

.battle-opponent-add-search {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--selection-soft) 54%, var(--surface));
  padding: var(--space-3);
}

.battle-opponent-add-search.large {
  gap: var(--space-3);
}

.battle-dashboard .battle-opponent-add-search .search-results {
  position: static;
  max-height: min(260px, 42vh);
  margin-top: 4px;
}

.battle-opponent-add-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.battle-opponent-add-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 850;
}

.battle-opponent-add-head small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.battle-opponent-add-field {
  display: grid;
  gap: 5px;
}

.battle-opponent-add-field > span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
}

.battle-opponent-empty-panel .popular-pokemon-picker {
  max-height: 320px;
  overflow-y: auto;
}

.battle-opponent-empty-panel .popular-pokemon-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

.battle-popular-opponent-picker {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.battle-popular-opponent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.battle-popular-opponent-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 850;
}

.battle-popular-opponent-head small {
  color: var(--text-secondary);
  font-size: 11px;
}

.battle-popular-opponent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-2);
  max-height: 430px;
  overflow-y: auto;
  padding-right: 2px;
}

.battle-popular-opponent-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  position: relative;
  min-height: 76px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: 18px var(--space-2) var(--space-2);
  text-align: left;
}

.battle-popular-opponent-card:hover,
.battle-popular-opponent-card:focus {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--text-primary);
}

.battle-popular-opponent-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.battle-popular-opponent-card > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.battle-popular-opponent-card strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-popular-rank {
  position: absolute;
  top: 6px;
  left: 8px;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.battle-opponent-remove-button {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-height: 22px;
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--danger);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.battle-opponent-remove-button:hover,
.battle-opponent-remove-button:focus {
  border-color: var(--danger);
  background: #FFF1F1;
  color: var(--danger);
}

.battle-opponent-active-remove-button {
  min-height: 32px;
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--danger);
  font-size: var(--font-size-xs);
  font-weight: 850;
  line-height: 1;
  padding: 6px 9px;
  white-space: nowrap;
}

.battle-opponent-active-remove-button:hover,
.battle-opponent-active-remove-button:focus {
  border-color: var(--danger);
  background: #FFF1F1;
  color: var(--danger);
}

.battle-sidebar-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  position: relative;
  min-width: 0;
  min-height: 126px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: var(--space-3);
  text-align: left;
}

.battle-sidebar-card:hover,
.battle-sidebar-card.active,
.battle-sidebar-card.recommended {
  border-color: var(--accent);
  background: var(--selection-soft);
}

.battle-opponent-candidate[role="button"] {
  cursor: pointer;
}

.battle-sidebar-card.danger {
  border-color: color-mix(in srgb, var(--danger) 36%, #fff);
  background: #FFF7F7;
}

.battle-candidate-card.is-fainted,
.battle-opponent-candidate.is-fainted,
.battle-sidebar-card.is-fainted,
.switch-in-candidate-card.is-fainted {
  opacity: 0.58;
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
  background: color-mix(in srgb, var(--surface-muted) 72%, #fff);
  cursor: pointer;
}

.battle-candidate-card.is-fainted:hover,
.battle-opponent-candidate.is-fainted:hover,
.battle-sidebar-card.is-fainted:hover,
.switch-in-candidate-card.is-fainted:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--danger));
  background: color-mix(in srgb, var(--selection-soft) 62%, #fff);
}

.battle-opponent-candidate.is-fainted .battle-opponent-remove-button {
  cursor: pointer;
  opacity: 1;
}

.battle-candidate-card.is-fainted img,
.battle-opponent-candidate.is-fainted img,
.battle-sidebar-card.is-fainted img,
.switch-in-candidate-card.is-fainted img,
.battle-opponent-analysis-panel.is-fainted img,
.battle-my-active-panel.is-fainted img {
  filter: grayscale(1);
  opacity: 0.62;
}

.battle-fainted-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--danger) 34%, #fff);
  border-radius: 999px;
  background: #FFF1F1;
  color: var(--danger);
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}

.battle-sidebar-card img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.battle-sidebar-pill {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
}

.battle-sidebar-copy,
.battle-sidebar-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.battle-sidebar-title {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.battle-sidebar-title-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.battle-sidebar-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-sidebar-name-types {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.battle-sidebar-name-types .type-list {
  flex: 0 0 auto;
}

.battle-sidebar-title em {
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-style: normal;
  font-size: 11px;
  padding: 2px 6px;
}

.battle-sidebar-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.battle-opponent-speed-line {
  display: block;
  -webkit-line-clamp: 1;
}

.battle-sidebar-damage-line {
  -webkit-line-clamp: 1;
}

.battle-title-speed-relation {
  display: none;
}

.battle-speed-relation {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 4px 7px;
}

.battle-speed-relation.faster {
  border-color: color-mix(in srgb, var(--danger) 30%, #fff);
  background: #FFF1F1;
  color: var(--danger);
}

.battle-speed-relation.tie {
  border-color: color-mix(in srgb, var(--warning) 34%, #fff);
  background: #FFF8E4;
  color: #8A5A00;
}

.battle-speed-relation.slower {
  border-color: color-mix(in srgb, var(--hp-fill) 32%, #fff);
  background: color-mix(in srgb, var(--hp-fill-soft) 20%, #fff);
  color: color-mix(in srgb, var(--hp-fill) 68%, #1E3A2F);
}

.battle-speed-relation.loading,
.battle-speed-relation.empty {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.battle-opponent-current-speed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius-md);
  background: var(--selection-soft);
  padding: 9px 10px;
}

.battle-opponent-current-speed > span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.battle-opponent-current-speed strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-compact-hp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.battle-compact-hp > span {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #E7ECF5;
}

.battle-compact-hp b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

.battle-compact-hp small {
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.battle-pokemon-heading,
.battle-active-pokemon-layout {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.battle-pokemon-heading h3 {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-opponent-analysis-panel .battle-pokemon-heading h3 {
  font-size: var(--font-size-lg);
}

.battle-identity-grid,
.battle-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.battle-identity-field,
.battle-detail-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: var(--space-2);
}

.battle-identity-field > span,
.battle-detail-grid small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.battle-identity-field input,
.battle-identity-field .dropdown-trigger {
  height: 34px;
  min-height: 34px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.battle-identity-field .dropdown-trigger {
  background: #fff;
}

.battle-identity-field .dropdown-trigger:disabled {
  opacity: 1;
}

.battle-identity-field .search-results {
  font-size: var(--font-size-sm);
}

.battle-identity-field .search-results button {
  min-height: 36px;
  padding: 7px 10px;
}

.battle-current-stat-editor {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.battle-current-stat-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  position: relative;
  min-width: 0;
}

.battle-current-stat-toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 5px 34px 5px var(--space-2);
  text-align: left;
}

.battle-current-stat-toggle.has-reset {
  padding-right: 94px;
}

.battle-current-setting-help {
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--accent) 12%, #E5E7EB);
}

.battle-current-stat-reset-inline {
  position: absolute;
  top: 50%;
  right: 73px;
  z-index: 1;
  transform: translateY(-50%);
  min-height: 22px;
  border-color: transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}

.battle-current-stat-reset-inline:not(:disabled):hover,
.battle-current-stat-reset-inline:not(:disabled):focus {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--surface);
  color: var(--accent-strong);
}

.battle-current-stat-reset-inline:disabled {
  opacity: 0.45;
}

.battle-current-setting-help .battle-damage-help-tooltip {
  right: 0;
  left: auto;
  width: min(340px, 78vw);
}

.battle-current-stat-toggle span,
.battle-current-stat-toggle strong {
  overflow: hidden;
  font-size: var(--font-size-xs);
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-current-stat-toggle span {
  color: var(--text-secondary);
}

.battle-current-stat-toggle strong {
  color: var(--text-primary);
  text-align: left;
}

.battle-current-stat-summary {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}

.battle-current-stat-summary span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.battle-current-stat-summary-compact {
  display: none;
}

@media (max-width: 720px) {
  .battle-current-stat-summary-full {
    display: none;
  }

  .battle-current-stat-summary-compact {
    display: inline;
  }
}

.battle-current-stat-editor.open .battle-current-stat-toggle {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: var(--selection-soft);
}

.battle-current-stat-editor.open .battle-current-stat-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.battle-current-stat-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.battle-current-stat-strip span {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 3px 2px;
}

.battle-current-stat-strip small,
.battle-current-stat-strip em {
  color: var(--text-secondary);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
}

.battle-current-stat-strip strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
}

.battle-current-stat-strip.unknown strong,
.battle-current-stat-strip.unknown em {
  color: var(--text-muted);
}

.battle-current-stat-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-2);
}

.battle-current-nature-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.battle-current-nature-field > span {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 850;
}

.battle-current-nature-field .dropdown-trigger {
  min-height: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.battle-current-point-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.battle-current-point-row {
  display: grid;
  grid-template-columns: 34px minmax(72px, 1fr) 52px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-muted) 65%, #fff);
  padding: 3px 5px;
}

.battle-current-point-row span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 850;
}

.battle-current-point-row input[type="range"] {
  width: 100%;
  min-width: 0;
}

.battle-current-point-row .battle-current-point-number {
  box-sizing: border-box;
  width: 52px;
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  padding: 0 6px;
  -moz-appearance: textfield;
}

.battle-current-point-row .battle-current-point-number::-webkit-outer-spin-button,
.battle-current-point-row .battle-current-point-number::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.battle-current-point-row .battle-current-point-number:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.battle-current-point-row strong {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.battle-current-stat-unknown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.battle-current-stat-unknown span,
.battle-current-stat-note {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.battle-current-stat-unknown-button {
  justify-self: end;
}

.battle-status-row,
.battle-type-override-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 6px 8px;
}

.battle-status-label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 850;
  white-space: nowrap;
}

.battle-status-options {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.battle-status-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.battle-type-override-options {
  min-width: 0;
}

.battle-type-override-options .dropdown-trigger {
  min-height: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.battle-pokemon-heading .battle-type-override-row {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.battle-pokemon-heading .battle-type-override-options .dropdown-trigger {
  min-height: 24px;
  height: 24px;
  padding-inline: 10px;
}

.battle-status-options button {
  min-width: 0;
  min-height: 26px;
  border-color: var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 4px 3px;
  white-space: nowrap;
}

.battle-status-options button.active {
  border-color: color-mix(in srgb, var(--accent) 34%, #fff);
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.battle-status-options button.poison.active {
  border-color: var(--type-poison-border);
  background: var(--type-poison-bg);
  color: var(--type-poison-text);
}

.battle-status-options button.paralysis.active {
  border-color: var(--type-electric-border);
  background: var(--type-electric-bg);
  color: var(--type-electric-text);
}

.battle-status-options button.burn.active {
  border-color: var(--type-fire-border);
  background: var(--type-fire-bg);
  color: var(--type-fire-text);
}

.battle-status-options button.freeze.active {
  border-color: var(--type-ice-border);
  background: var(--type-ice-bg);
  color: var(--type-ice-text);
}

.battle-status-options button.sleep.active {
  border-color: var(--type-psychic-border);
  background: var(--type-psychic-bg);
  color: var(--type-psychic-text);
}

.battle-detail-grid strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-speed-card {
  display: grid;
  gap: var(--space-2);
  align-self: stretch;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3);
}

.battle-opponent-analysis-panel .battle-speed-card {
  padding: var(--space-2);
}

.battle-speed-card > span,
.battle-speed-card small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.battle-speed-card > strong {
  color: var(--accent-strong);
  font-size: var(--font-size-xl);
  font-weight: 850;
}

.battle-speed-table-toggle {
  min-height: 24px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.1;
  padding: 3px 7px;
  white-space: nowrap;
}

.battle-speed-sample-detail {
  line-height: 1.35;
}

.battle-speed-card.opponent > strong,
.battle-speed-card.warning > strong {
  color: var(--damage-ink);
}

.battle-speed-card.tie > strong {
  color: var(--warning);
}

.battle-speed-bars {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
}

.battle-speed-bars span {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.battle-speed-bars i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #E6EAF3;
}

.battle-speed-bars i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.battle-full-speed-panel {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.battle-full-speed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.battle-full-speed-head > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.battle-full-speed-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.battle-full-speed-head small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.battle-full-speed-ladder {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}

.battle-full-speed-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
}

.battle-full-speed-my {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 7px 8px;
}

.battle-full-speed-my span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.battle-full-speed-my strong,
.battle-full-speed-my small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-full-speed-my strong {
  font-size: var(--font-size-xs);
}

.battle-full-speed-my small {
  color: var(--text-secondary);
  font-size: 11px;
}

.battle-full-speed-my b {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 26px;
  border-radius: var(--radius-sm);
  background: var(--red-100);
  color: var(--red-700);
  font-size: var(--font-size-xs);
}

.battle-full-speed-opponents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 42px;
  border: 1px dashed color-mix(in srgb, var(--border) 84%, #fff);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-alt) 62%, #fff);
  padding: 6px;
}

.battle-full-speed-opponents.empty-slot {
  display: none;
}

.battle-full-speed-opponents.is-tie {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 28%, #fff);
  background: var(--selection-soft);
}

.battle-full-speed-anchor {
  display: grid;
  align-items: center;
  justify-items: start;
  min-height: 0;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 2px 0 0;
}

.battle-full-speed-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.15;
}

.battle-full-speed-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-full-speed-chip b {
  color: var(--red-700);
}

.battle-full-speed-chip.mode {
  border-color: color-mix(in srgb, var(--damage-line) 34%, #fff);
  background: rgba(185, 45, 61, 0.08);
  color: var(--damage-ink);
}

.battle-full-speed-chip.neutral {
  border-color: color-mix(in srgb, var(--selection) 30%, #fff);
}

.battle-full-speed-chip.positive {
  border-color: color-mix(in srgb, var(--hp-fill) 48%, #fff);
  background: color-mix(in srgb, var(--hp-fill-soft) 18%, #fff);
}

.battle-full-speed-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: var(--space-3);
}

.opponent-type-search-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: start center;
  padding: 84px var(--space-4) var(--space-4);
}

.opponent-type-search-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  min-height: 100%;
  border: 0;
  background: rgba(27, 35, 48, 0.22);
  cursor: default;
}

.opponent-type-search-dialog {
  display: grid;
  gap: var(--space-3);
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 112px));
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.opponent-type-search-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.opponent-type-search-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
}

.opponent-type-search-close {
  width: 28px;
  height: 28px;
  min-height: 28px;
  font-size: 18px;
  line-height: 1;
}

.opponent-type-button-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}

.opponent-type-button {
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-md);
  font-weight: 800;
}

.opponent-type-button.active {
  border-color: var(--type-main, var(--accent));
  background: color-mix(in srgb, var(--type-main, var(--accent)) 22%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-main, var(--accent)) 70%, #fff);
}

.opponent-type-search-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-height: 32px;
}

.opponent-type-result-panel {
  min-height: 96px;
}

.opponent-type-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
}

.opponent-type-result-card {
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 104px;
  padding-left: 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.opponent-type-result-card .pokemon-card-order {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 27px;
  height: 27px;
  border: 1px solid #9C7D1E;
  border-radius: 4px;
  background: #FFCA1A;
  color: #2C2300;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 2px 0 rgba(44, 35, 0, 0.12);
  z-index: 1;
}

.opponent-type-result-card .avatar {
  width: 58px;
  height: 58px;
}

.opponent-type-result-card.selected {
  border-color: #9C7D1E;
  background: #FBF7E6;
  box-shadow: inset 0 0 0 1px rgba(156, 125, 30, 0.22);
}

.battle-speed-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding: 84px var(--space-4) var(--space-4);
}

.battle-speed-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  min-height: 100%;
  border: 0;
  background: rgba(27, 35, 48, 0.22);
  cursor: default;
}

.battle-speed-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 112px));
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.battle-speed-dialog .battle-full-speed-ladder {
  max-height: min(560px, calc(100vh - 220px));
}

.battle-speed-dialog .battle-full-speed-row {
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  gap: 8px;
}

.battle-speed-dialog .battle-full-speed-opponents.empty-slot {
  display: flex;
}

.battle-speed-dialog .battle-full-speed-anchor {
  justify-items: end;
  min-height: 38px;
  padding-right: 2px;
}

.battle-speed-dialog .battle-full-speed-chip {
  width: auto;
  border-radius: 999px;
}

.battle-speed-dialog-close {
  width: 28px;
  height: 28px;
  min-height: 28px;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 760px) {
  .opponent-type-search-dialog-layer {
    padding: 64px var(--space-2) var(--space-2);
  }

  .opponent-type-search-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    padding: var(--space-3);
  }

  .opponent-type-button-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .opponent-type-result-grid {
    grid-template-columns: 1fr;
  }

  .battle-speed-dialog-layer {
    padding: 64px var(--space-2) var(--space-2);
  }

  .battle-speed-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    padding: var(--space-3);
  }

  .battle-speed-dialog .battle-full-speed-row {
    grid-template-columns: 1fr;
  }

  .battle-speed-dialog .battle-full-speed-anchor {
    justify-items: start;
    min-height: 0;
  }

  .battle-speed-dialog .battle-full-speed-chip {
    width: 100%;
    border-radius: var(--radius-sm);
  }
}

.battle-active-moves-panel {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--border);
  padding-top: 5px;
}

.battle-active-moves-panel .battle-subhead {
  min-height: 22px;
}

.battle-opponent-move-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.battle-move-card {
  --move-card-bg: var(--type-unknown-bg);
  --move-card-border: var(--type-unknown-border);
  --move-card-ink: var(--type-unknown-text);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  align-content: space-between;
  align-items: stretch;
  min-height: 72px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--move-card-border);
  border-radius: var(--radius-md);
  background: var(--move-card-bg);
  color: var(--text-primary);
  cursor: default;
  font: inherit;
  padding: 4px 5px;
  text-align: left;
}

.battle-move-card[data-type="normal"] { --move-card-bg: var(--type-normal-bg); --move-card-border: var(--type-normal-border); --move-card-ink: var(--type-normal-text); }
.battle-move-card[data-type="fire"] { --move-card-bg: var(--type-fire-bg); --move-card-border: var(--type-fire-border); --move-card-ink: var(--type-fire-text); }
.battle-move-card[data-type="water"] { --move-card-bg: var(--type-water-bg); --move-card-border: var(--type-water-border); --move-card-ink: var(--type-water-text); }
.battle-move-card[data-type="electric"] { --move-card-bg: var(--type-electric-bg); --move-card-border: var(--type-electric-border); --move-card-ink: var(--type-electric-text); }
.battle-move-card[data-type="grass"] { --move-card-bg: var(--type-grass-bg); --move-card-border: var(--type-grass-border); --move-card-ink: var(--type-grass-text); }
.battle-move-card[data-type="ice"] { --move-card-bg: var(--type-ice-bg); --move-card-border: var(--type-ice-border); --move-card-ink: var(--type-ice-text); }
.battle-move-card[data-type="fighting"] { --move-card-bg: var(--type-fighting-bg); --move-card-border: var(--type-fighting-border); --move-card-ink: var(--type-fighting-text); }
.battle-move-card[data-type="poison"] { --move-card-bg: var(--type-poison-bg); --move-card-border: var(--type-poison-border); --move-card-ink: var(--type-poison-text); }
.battle-move-card[data-type="ground"] { --move-card-bg: var(--type-ground-bg); --move-card-border: var(--type-ground-border); --move-card-ink: var(--type-ground-text); }
.battle-move-card[data-type="flying"] { --move-card-bg: var(--type-flying-bg); --move-card-border: var(--type-flying-border); --move-card-ink: var(--type-flying-text); }
.battle-move-card[data-type="psychic"] { --move-card-bg: var(--type-psychic-bg); --move-card-border: var(--type-psychic-border); --move-card-ink: var(--type-psychic-text); }
.battle-move-card[data-type="bug"] { --move-card-bg: var(--type-bug-bg); --move-card-border: var(--type-bug-border); --move-card-ink: var(--type-bug-text); }
.battle-move-card[data-type="rock"] { --move-card-bg: var(--type-rock-bg); --move-card-border: var(--type-rock-border); --move-card-ink: var(--type-rock-text); }
.battle-move-card[data-type="ghost"] { --move-card-bg: var(--type-ghost-bg); --move-card-border: var(--type-ghost-border); --move-card-ink: var(--type-ghost-text); }
.battle-move-card[data-type="dragon"] { --move-card-bg: var(--type-dragon-bg); --move-card-border: var(--type-dragon-border); --move-card-ink: var(--type-dragon-text); }
.battle-move-card[data-type="dark"] { --move-card-bg: var(--type-dark-bg); --move-card-border: var(--type-dark-border); --move-card-ink: var(--type-dark-text); }
.battle-move-card[data-type="steel"] { --move-card-bg: var(--type-steel-bg); --move-card-border: var(--type-steel-border); --move-card-ink: var(--type-steel-text); }
.battle-move-card[data-type="fairy"] { --move-card-bg: var(--type-fairy-bg); --move-card-border: var(--type-fairy-border); --move-card-ink: var(--type-fairy-text); }

.battle-move-card:hover,
.battle-move-card.active,
.battle-move-card.previewing {
  border-color: var(--move-card-ink);
  background: var(--move-card-bg);
}

.battle-move-card.is-pinned {
  border-width: 2px;
  border-color: var(--move-card-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--move-card-ink) 55%, transparent), 0 0 0 2px color-mix(in srgb, var(--move-card-ink) 18%, transparent);
}

.battle-move-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--move-card-ink) 48%, #fff);
  outline-offset: 2px;
}

.battle-move-card-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  min-width: 0;
  width: 100%;
}

.battle-move-card-head .move-name-with-pp {
  flex: 1 1 auto;
}

.battle-move-card-head > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--move-card-bg) 72%, #fff);
  color: var(--move-card-ink);
  font-size: 10px;
  font-weight: 850;
}

.battle-move-card.active .battle-move-card-head > span:first-child,
.battle-move-card.previewing .battle-move-card-head > span:first-child {
  background: var(--move-card-ink);
  color: #fff;
}

.battle-move-card-head strong {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--move-card-ink);
  font-size: var(--font-size-xs);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-move-card-head .move-pp-badge {
  min-height: 15px;
  background: color-mix(in srgb, var(--move-card-bg) 54%, #fff);
  color: var(--move-card-ink);
  font-size: 9px;
  padding-inline: 4px;
}

.battle-move-card-head .rage-fist-badge {
  min-height: 15px;
  background: color-mix(in srgb, #7c3aed 12%, #fff);
  color: color-mix(in srgb, #5b21b6 86%, var(--move-card-ink));
  font-size: 9px;
  padding-inline: 4px;
}

.battle-move-card-tools {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  justify-content: flex-end;
  min-width: 0;
}

.battle-move-stat-apply,
.battle-move-rage-fist-step {
  min-height: 19px;
  border-color: color-mix(in srgb, var(--move-card-ink) 28%, var(--move-card-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--move-card-bg) 38%, #fff);
  color: var(--move-card-ink);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  padding: 2px 6px;
  white-space: nowrap;
}

.battle-move-rage-fist-controls {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
}

.battle-move-rage-fist-step {
  min-width: 20px;
  padding: 2px 0;
}

.battle-move-stat-apply:hover,
.battle-move-rage-fist-step:hover {
  border-color: var(--move-card-ink);
  background: #fff;
}

.battle-move-current-damage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--move-card-border) 72%, #fff);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--move-card-bg) 42%, #fff);
  overflow: hidden;
}

.battle-move-current-damage[data-empty="true"] {
  grid-template-columns: 1fr;
  padding: 4px 5px;
}

.battle-move-damage-cell {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 0;
  padding: 2px 4px;
}

.battle-move-damage-cell + .battle-move-damage-cell {
  border-left: 1px solid color-mix(in srgb, var(--move-card-border) 58%, #fff);
}

.battle-move-current-damage small {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.battle-move-current-damage strong {
  color: var(--move-card-ink);
  font-size: 10px;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: keep-all;
}

.battle-move-target-pill {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 6px 8px;
}

.battle-move-target-pill.active {
  border-color: color-mix(in srgb, var(--accent) 34%, #fff);
  background: var(--selection-soft);
}

.battle-move-target-pill small,
.battle-move-target-pill strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-move-target-pill small {
  color: var(--text-secondary);
  font-size: 11px;
}

.battle-move-target-pill strong {
  color: var(--text-primary);
  font-size: var(--font-size-xs);
}

.battle-risk-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, #fff);
  border-radius: var(--radius-md);
  background: #FFF7F7;
  padding: var(--space-3);
}

.battle-risk-summary strong {
  color: var(--damage-ink);
}

.battle-risk-summary div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.battle-risk-summary span {
  border-radius: 999px;
  background: var(--surface);
  color: var(--damage-ink);
  font-size: var(--font-size-xs);
  padding: 4px 8px;
}

.battle-recent-event-list {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: var(--space-3);
}

.battle-faint-record-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--danger);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 5px 8px;
}

.battle-faint-record-button:hover {
  background: #FFF1F1;
}

.battle-faint-record-button.is-fainted {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-secondary);
}

.battle-recent-events-panel {
  padding-block: var(--space-3);
}

.battle-recent-event-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
}

.battle-recent-event-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.battle-recent-event-row strong {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11px;
}

.battle-recent-event-row span {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-action-recommendation-panel.battle-action-recommendation-panel {
  margin: 0;
  padding: var(--space-4);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.battle-action-recommendation-panel .panel-head {
  padding: 0;
}

.battle-action-recommendation-panel .battle-action-list {
  max-height: none;
}

.battle-more-recommendations {
  justify-self: stretch;
  width: 100%;
}

.battle-opponent-switch-list {
  min-width: 0;
}

.battle-active-pokemon-layout > img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  justify-self: center;
}

.battle-my-active-panel .battle-pokemon-heading h3 {
  font-size: var(--font-size-lg);
}

@media (min-width: 1181px) {
  .battle-active-pokemon-layout .battle-pokemon-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .battle-active-pokemon-layout .battle-pokemon-heading h3 {
    flex: 0 1 auto;
    min-width: 0;
  }

  .battle-active-pokemon-layout .battle-pokemon-heading .type-list,
  .battle-opponent-switch-panel .battle-sidebar-name-types .type-list {
    flex: 0 0 auto;
  }

  .battle-active-pokemon-layout .battle-pokemon-heading .battle-type-override-row {
    flex: 1 1 240px;
  }

  .battle-opponent-switch-panel .battle-sidebar-name-types {
    flex-wrap: nowrap;
  }

  .battle-opponent-switch-panel .battle-title-speed-relation {
    display: inline-flex;
  }

  .battle-opponent-switch-panel .battle-opponent-speed-line {
    display: none;
  }
}

.battle-my-active-panel .mega-button,
.battle-opponent-analysis-panel .mega-button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  gap: 0;
  padding: 5px;
}

.battle-my-active-panel .mega-button-icon,
.battle-opponent-analysis-panel .mega-button-icon {
  width: 20px;
  height: 20px;
}

.battle-my-active-panel .mega-button span:not(.mega-button-icon),
.battle-opponent-analysis-panel .mega-button span:not(.mega-button-icon) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.battle-rank-editor {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.battle-rank-toolbar {
  position: relative;
  min-width: 0;
}

.battle-rank-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 34px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 6px 94px 6px var(--space-2);
  text-align: left;
}

.battle-rank-toggle span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-rank-arrow,
.battle-current-stat-arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  font-style: normal;
  transform: translateY(-50%);
  transition: transform 140ms ease;
}

.battle-current-stat-arrow {
  right: 18px;
}

.battle-rank-arrow::before,
.battle-current-stat-arrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

.battle-rank-editor.open .battle-rank-toggle {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: var(--selection-soft);
}

.battle-rank-editor.open .battle-rank-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.battle-current-stat-editor.open .battle-current-stat-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.battle-rank-reset-inline {
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  min-height: 22px;
  border-color: transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 4px 8px;
}

.battle-rank-reset-inline:not(:disabled):hover,
.battle-rank-reset-inline:not(:disabled):focus {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--surface);
  color: var(--accent-strong);
}

.battle-rank-reset-inline:disabled {
  opacity: 0.45;
}

.battle-rank-badges {
  min-width: 0;
}

@media (min-width: 1181px) {
  .battle-rank-badges {
    min-height: 24px;
  }
}

.battle-current-stat-reset-inline {
  min-height: 24px;
  border: 1px solid var(--battle-line);
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--battle-muted);
  padding: 4px 7px;
  font-size: 11px;
}

.battle-current-stat-reset-inline:not(:disabled):hover,
.battle-current-stat-reset-inline:not(:disabled):focus {
  border-color: var(--battle-frame-dark);
  background: var(--battle-gold-soft);
  color: var(--battle-ink);
}

.battle-rank-editor .stat-stage-group {
  border-color: var(--border);
  background: var(--surface);
  padding: var(--space-2);
}

.battle-rank-editor .stat-stage-title {
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 850;
}

.battle-rank-editor .stat-stage-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.battle-rank-editor .stat-stage-control {
  grid-template-columns: 24px minmax(26px, 1fr) 24px;
}

.battle-rank-editor .stat-stage-step,
.battle-rank-editor .stat-stage-value {
  min-height: 28px;
}

.battle-my-move-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.battle-my-active-panel .battle-my-move-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.battle-move-panel-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.battle-move-panel-head small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.battle-action-detail-panel {
  align-content: start;
  max-height: min(720px, calc(100vh - 128px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.battle-detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 4px;
}

.battle-detail-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 6px 8px;
}

.battle-detail-tabs button:hover {
  border: 0;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-primary);
}

.battle-detail-tabs .active {
  background: var(--accent);
  color: #fff;
}

.battle-detail-tabs .active:hover {
  background: var(--accent);
  color: #fff;
}

.battle-detail-grid {
  grid-template-columns: 1fr;
}

.battle-detail-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.battle-detail-section {
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.battle-detail-section strong {
  color: var(--text-primary);
}

.battle-detail-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.battle-detail-section li,
.battle-detail-section p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.battle-detail-section li {
  position: relative;
  padding-left: 18px;
}

.battle-detail-section li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success);
}

.empty-detail {
  min-height: 280px;
}

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

  .battle-dashboard-sidebar,
  .battle-dashboard-opponent-sidebar,
  .battle-switch-sidebar-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .battle-sidebar-list,
  .battle-opponent-switch-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }

  .battle-dashboard-top-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }

  .battle-dashboard-bottom-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
  }

  .battle-action-detail-panel {
    grid-column: auto;
  }
}

@media (max-width: 1180px) {
  .battle-dashboard-top-grid,
  .battle-dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }

  .move-pp-badge {
    display: none;
  }

  .battle-action-recommendation-slot {
    display: none;
  }

  .battle-dashboard-bottom-grid > .battle-my-extra-moves-panel,
  .battle-dashboard-bottom-grid > .battle-opponent-extra-moves-panel {
    grid-column: auto;
  }

  .battle-opponent-move-grid,
  .battle-sidebar-list,
  .battle-opponent-switch-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-recent-event-list {
    grid-template-columns: 1fr;
  }

  .battle-action-detail-panel,
  .battle-recent-events-panel {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .page-header-battle {
    grid-template-columns: 1fr;
  }

  .page-header-battle .page-title {
    min-width: 0;
    padding-top: 0;
  }

  .battle-dashboard-controls {
    justify-content: flex-end;
  }

  .battle-dashboard-controls > .action-button,
  .battle-control-group {
    width: auto;
  }

  .battle-control-group {
    justify-content: flex-end;
  }

  .battle-control-group .segmented {
    flex: 0 0 auto;
    justify-content: center;
  }

  .battle-sidebar-list,
  .battle-opponent-move-grid,
  .battle-opponent-switch-list,
  .battle-my-active-panel .battle-my-move-grid,
  .battle-my-move-grid,
  .battle-detail-target-grid,
  .battle-identity-grid {
    grid-template-columns: 1fr;
  }

  .battle-current-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .battle-current-point-grid {
    grid-template-columns: 1fr;
  }

  .battle-sidebar-card {
    min-height: 0;
  }

  .battle-risk-summary {
    grid-template-columns: 1fr;
  }

}

/* Inquiry board */
.inquiry-board-content {
  width: min(1180px, 100%);
}

.inquiry-board {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.inquiry-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: 0;
  background:
    linear-gradient(135deg, rgba(64, 88, 232, 0.08), rgba(39, 168, 102, 0.07)),
    var(--surface);
}

.inquiry-intro-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.inquiry-intro-copy h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: 820;
  line-height: 1.25;
}

.inquiry-intro-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.6;
}

.inquiry-intro-copy a {
  color: var(--accent-strong);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.inquiry-mail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--accent-strong);
  padding: 9px 14px;
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.inquiry-mail-link:hover,
.inquiry-mail-link:focus-visible {
  border-color: var(--accent-strong);
  background: var(--selection-soft);
  outline: none;
}

.inquiry-columns {
  display: grid;
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 0.58fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.inquiry-columns > .panel,
.inquiry-composer,
.inquiry-list-panel {
  margin-top: 0;
}

.inquiry-panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  min-width: 0;
}

.inquiry-panel-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.inquiry-panel-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1.25;
}

.inquiry-panel-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.inquiry-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: var(--space-3);
  min-width: 0;
}

.inquiry-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.inquiry-field > span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 760;
}

.inquiry-field-full {
  grid-column: 1 / -1;
}

.inquiry-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry-field textarea {
  min-height: 180px;
  padding: var(--space-3);
  line-height: 1.55;
  resize: vertical;
}

.inquiry-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
}

.inquiry-submit-row > span {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.inquiry-submit-row .action-button {
  min-width: 118px;
}

.inquiry-message {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.inquiry-message.error {
  color: var(--danger);
}

.inquiry-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-secondary);
  padding: var(--space-6);
  text-align: center;
}

.inquiry-list {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.inquiry-item {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-4);
}

.inquiry-item.is-resolved {
  border-color: rgba(39, 168, 102, 0.38);
  background: linear-gradient(180deg, rgba(39, 168, 102, 0.06), rgba(39, 168, 102, 0.02)), var(--surface);
}

.inquiry-item-head {
  min-width: 0;
}

.inquiry-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.inquiry-item h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 800;
  line-height: 1.35;
}

.inquiry-item-meta span,
.inquiry-item-meta time {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.inquiry-item-meta span {
  overflow: hidden;
  max-width: 60%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-item p {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}

.inquiry-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.inquiry-resolved-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(39, 168, 102, 0.36);
  border-radius: var(--radius-sm);
  background: rgba(39, 168, 102, 0.1);
  color: var(--success-strong, #16794a);
  padding: 5px 9px;
  font-size: var(--font-size-xs);
  font-weight: 820;
  line-height: 1;
}

.inquiry-comments {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.inquiry-comments-list {
  display: grid;
  gap: var(--space-2);
}

.inquiry-comment {
  display: grid;
  gap: var(--space-1);
  border-left: 3px solid var(--accent);
  background: var(--surface-muted);
  padding: var(--space-3);
}

.inquiry-comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.inquiry-comment-meta strong,
.inquiry-comment-meta time {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.inquiry-comment p {
  margin: 0;
}

.inquiry-comment-composer {
  display: grid;
  gap: var(--space-2);
}

.inquiry-comment-composer textarea {
  min-height: 84px;
  padding: var(--space-3);
  line-height: 1.5;
  resize: vertical;
}

.inquiry-comment-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.inquiry-comment-submit-row span {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

@media (max-width: 1180px) {
  .inquiry-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .inquiry-intro,
  .inquiry-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Speed chart redesign */
.speed-dashboard-content {
  width: min(1560px, 100%);
}

.speed-dashboard {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.speed-top-grid,
.speed-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  min-width: 0;
}

.speed-top-grid > .panel,
.speed-bottom-grid > .panel {
  margin-top: 0;
}

.speed-panel-head {
  align-items: flex-start;
  margin-bottom: 0;
}

.speed-panel-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.speed-panel-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.speed-panel-head .hint {
  margin: 0;
  font-size: var(--font-size-sm);
}

.speed-input-panel,
.speed-matrix-panel,
.speed-faster-panel,
.speed-boost-panel {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.speed-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.speed-input-grid .field {
  min-width: 0;
}

.speed-metric,
.speed-list-card,
.speed-boost-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.speed-metric span,
.speed-metric em {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-style: normal;
}

.speed-metric strong {
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speed-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--space-3);
}

.speed-metric.is-primary {
  grid-column: auto;
  border-color: color-mix(in srgb, var(--accent) 32%, #fff);
  background: var(--selection-soft);
}

.speed-metric.is-primary strong {
  color: var(--accent-strong);
  font-size: var(--font-size-xl);
}

.speed-matrix-wrap {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
}

.speed-matrix {
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
}

.speed-matrix th,
.speed-matrix td {
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3);
}

.speed-matrix tr:last-child th,
.speed-matrix tr:last-child td {
  border-bottom: 0;
}

.speed-matrix th:last-child,
.speed-matrix td:last-child {
  border-right: 0;
}

.speed-matrix th {
  background: var(--surface-muted);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.speed-matrix th.active-axis {
  background: var(--selection-soft);
  color: var(--accent-strong);
}

.speed-matrix th span {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.speed-matrix td {
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.speed-matrix td.mine {
  background: #EAF8F0;
  color: #167348;
}

.speed-matrix td.opponent {
  background: #FFF3F3;
  color: var(--damage-ink);
}

.speed-matrix td.tie {
  background: #FFF7E6;
  color: #9A6200;
}

.speed-matrix td.selected-cell {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.speed-faster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.speed-list-card {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
}

.speed-list-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
}

.speed-list-card-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 800;
}

.speed-list {
  gap: var(--space-2);
  max-height: 440px;
  margin-top: 0;
}

.speed-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  border-color: var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  padding: var(--space-2);
}

.speed-row strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.speed-row span {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.speed-row b {
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-strong);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  padding: 4px 8px;
}

.speed-boost-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.speed-boost-card {
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
}

.speed-boost-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
}

.speed-boost-head span {
  color: var(--accent-strong);
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: 850;
}

.speed-boost-card p {
  margin: 0;
  min-height: 38px;
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.speed-boost-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.speed-boost-stats span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  padding: var(--space-2);
}

.speed-boost-stats small,
.speed-chip-group > span {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.speed-boost-stats strong {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 850;
}

.speed-chip-group {
  gap: var(--space-2);
}

.speed-still-faster-list {
  border-color: var(--border);
}

@media (max-width: 1280px) {
  .speed-boost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .speed-top-grid,
  .speed-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .speed-input-grid,
  .speed-faster-grid,
  .speed-boost-grid {
    grid-template-columns: 1fr;
  }
}

/* Flat Pokemon game-inspired skin for the My Team editor */
.app-frame:has(.roster-editor-screen) {
  --team-navy: #173D7A;
  --team-blue: #2F7FE4;
  --team-blue-soft: #E4F2FF;
  --team-blue-pale: #F3FAFF;
  --team-yellow: #FFCA1A;
  --team-red: #E85D67;
  --team-green: #36A86A;
  --team-frame: #4C5C6A;
  --team-frame-dark: #263744;
  --team-border: #B9D3F0;
  --team-border-strong: #72A7E8;
  --team-ink: #172235;
  --team-muted: #61728A;
  color: var(--team-ink);
  background: #EEF6FF;
}

.app-frame:has(.roster-editor-screen) .app-topbar {
  min-height: 58px;
  border-bottom: 1px solid var(--team-border);
  background: #FFFFFF;
  box-shadow: none;
  backdrop-filter: none;
}

.app-frame:has(.roster-editor-screen) .brand-button {
  min-height: 58px;
  border: 0;
  border-right: 1px solid #1D62B7;
  border-radius: 0;
  background: var(--team-blue);
  color: #FFFFFF;
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) .brand-button:hover {
  background: #2474D4;
  color: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .brand-button strong {
  color: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .brand-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) .page-title h1 {
  color: var(--team-navy);
  font-size: 18px;
}

.app-frame:has(.roster-editor-screen) .app-main {
  padding-top: 18px;
}

.app-frame:has(.roster-editor-screen) button,
.app-frame:has(.roster-editor-screen) .action-button,
.app-frame:has(.roster-editor-screen) .icon-button,
.app-frame:has(.roster-editor-screen) input:not([type="range"]),
.app-frame:has(.roster-editor-screen) select,
.app-frame:has(.roster-editor-screen) textarea,
.app-frame:has(.roster-editor-screen) .dropdown-trigger {
  border: 1px solid var(--team-border);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--team-ink);
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) button:hover,
.app-frame:has(.roster-editor-screen) .action-button:hover,
.app-frame:has(.roster-editor-screen) .icon-button:hover,
.app-frame:has(.roster-editor-screen) .dropdown-trigger:hover {
  border-color: var(--team-blue);
  background: var(--team-blue-pale);
  color: var(--team-navy);
}

.app-frame:has(.roster-editor-screen) .action-button.primary,
.app-frame:has(.roster-editor-screen) button.primary {
  border-color: #1F61B8;
  background: var(--team-blue);
  color: #FFFFFF;
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) .action-button.primary:hover,
.app-frame:has(.roster-editor-screen) button.primary:hover {
  background: #2474D4;
  color: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .compact-danger {
  border-color: #F0B6BA;
  background: #FFF7F8;
  color: #B93641;
}

.app-frame:has(.roster-editor-screen) input:focus,
.app-frame:has(.roster-editor-screen) select:focus,
.app-frame:has(.roster-editor-screen) textarea:focus,
.app-frame:has(.roster-editor-screen) .dropdown-trigger:focus {
  border-color: var(--team-blue);
  box-shadow: none;
  outline: 2px solid var(--team-yellow);
  outline-offset: 1px;
}

.app-frame:has(.roster-editor-screen) .chip,
.app-frame:has(.roster-editor-screen) .status-pill,
.app-frame:has(.roster-editor-screen) .order-badge {
  border-color: var(--team-border);
  background: var(--team-blue-pale);
  color: var(--team-muted);
}

.app-frame:has(.roster-editor-screen) .status-pill.active,
.app-frame:has(.roster-editor-screen) .chip.active {
  border-color: var(--team-border-strong);
  background: var(--team-blue-soft);
  color: var(--team-navy);
}

.app-frame:has(.roster-editor-screen) .type,
.app-frame:has(.roster-editor-screen) .type-pill {
  min-height: 22px;
  border: 2px solid var(--type-dark, var(--team-frame));
  border-radius: 3px;
  background: var(--type-main, var(--team-blue));
  color: #FFFFFF;
  font-size: 11px;
  text-shadow: none;
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) .type[data-type="electric"] {
  color: #4F3700;
}

.roster-editor-content {
  width: min(1780px, 100%);
}

.roster-editor-layout {
  gap: 18px;
}

.roster-slot-panel,
.roster-team-panel,
.roster-editor-main-panel {
  border: 2px solid var(--team-frame);
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
}

.roster-slot-panel,
.roster-team-panel {
  overflow: hidden;
  padding: 0;
}

.roster-team-list {
  padding: 14px;
}

.roster-team-draft {
  margin: 14px 14px 0;
}

.roster-team-empty-row {
  grid-template-columns: 22px 42px minmax(0, 1fr);
  min-height: 64px;
}

.roster-mode-tabs {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.roster-mode-tabs button {
  min-height: 28px;
  border: 2px solid #FFFFFF;
  border-radius: 4px;
  background: transparent;
  color: #FFFFFF;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 780;
}

.roster-mode-tabs button.active {
  background: #FFFFFF;
  color: var(--team-ink);
}

.roster-team-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border: 2px solid #B7B7B7;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
}

.roster-team-card::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 4px;
  background: #B4B7BC;
}

.roster-team-card.active {
  border-color: var(--team-frame);
  background: #F8FCFF;
}

.roster-team-card.active::before {
  background: var(--team-yellow);
}

.roster-team-main {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
}

.roster-team-title {
  display: grid;
  justify-content: stretch;
  gap: 2px;
}

.roster-team-title strong {
  color: var(--team-ink);
  font-size: 16px;
}

.roster-team-title small {
  color: var(--team-muted);
}

.roster-team-sprites {
  justify-content: flex-end;
}

.roster-team-editor-main,
.roster-team-detail-main,
.roster-team-empty-main {
  min-height: 592px;
}

.roster-team-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 2px solid var(--team-frame);
  background: #FFFFFF;
  padding: 24px 28px 18px;
}

.roster-team-editor-head h2 {
  margin: 8px 0 0;
  color: var(--team-ink);
  font-size: 30px;
  line-height: 1.08;
}

.roster-team-detail-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
}

.roster-team-detail-heading h2 {
  margin: 0;
}

.roster-team-editor-body,
.roster-team-detail-list {
  display: grid;
  gap: 16px;
  padding: 20px 28px 28px;
}

.roster-team-member-section {
  display: grid;
  gap: 12px;
}

.roster-team-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.roster-team-editor-member {
  display: grid;
  grid-template-columns: 28px 52px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 92px;
  border: 2px solid #B7B7B7;
  border-radius: 4px;
  background: #FFFFFF;
  padding: 9px;
  text-align: left;
}

.roster-team-editor-member.selected {
  border-color: var(--team-frame);
  background: #F8FCFF;
}

.roster-team-editor-member:disabled {
  opacity: 0.45;
}

.roster-team-check {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #777777;
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--team-ink);
  font-size: 14px;
  font-weight: 900;
}

.roster-team-member-toggle.selected .roster-team-check,
.roster-team-editor-member.selected .roster-team-check {
  border-color: #9C7D1E;
  background: var(--team-yellow);
  color: #523900;
}

.roster-team-editor-member .avatar,
.roster-team-detail-member .avatar {
  width: 52px;
  height: 52px;
}

.roster-team-editor-member-copy,
.roster-team-detail-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.roster-team-editor-member-copy strong,
.roster-team-editor-member-copy small,
.roster-team-detail-copy strong,
.roster-team-detail-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-team-detail-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roster-team-detail-member {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--team-type-top, #8B8F95) 34%, #D8DDE6) 0 50%,
      color-mix(in srgb, var(--team-type-bottom, var(--team-type-top, #8B8F95)) 34%, #D8DDE6) 50% 100%
    ) border-box;
  padding: 10px;
}

.roster-team-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.roster-team-detail-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  color: var(--team-muted);
  font-size: 11px;
  line-height: 1.15;
}

.roster-team-detail-fact b {
  color: #8B8F95;
  font-size: 10px;
  font-weight: 820;
}

.roster-team-detail-fact > span {
  color: var(--team-ink);
  font-weight: 760;
}

.roster-team-detail-nature {
  gap: 5px;
}

.roster-team-detail-nature-badges {
  display: inline-flex;
  gap: 3px;
  min-width: 0;
}

.roster-team-detail-nature-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.roster-team-detail-nature-badge.up {
  border-color: #A8DDBE;
  background: #EAF8F0;
  color: #167348;
}

.roster-team-detail-nature-badge.down {
  border-color: #F3B5B5;
  background: #FFF0F0;
  color: #B91C1C;
}

.roster-team-detail-moves {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.roster-team-detail-move {
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 29px;
  border: 1px solid #D8DDE6;
  border-left: 5px solid var(--move-accent, #8B8F95);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--team-ink);
  padding: 4px 7px 4px 8px;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.18;
}

.roster-team-detail-move > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.roster-panel-head {
  min-height: 54px;
  padding: 12px 14px;
  border-bottom: 2px solid var(--team-frame);
  background: var(--team-blue);
  color: #FFFFFF;
}

.roster-panel-head h2 {
  color: #FFFFFF;
  font-size: 18px;
}

.roster-panel-head .status-pill {
  border: 2px solid #FFFFFF;
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--team-navy);
}

.roster-image-import-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.roster-image-import-button {
  min-height: 34px;
  border: 2px solid var(--team-frame);
  border-radius: 4px;
  background: var(--team-yellow);
  color: #22324D;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
}

.roster-image-import-button:hover {
  background: #FFE48F;
}

.roster-slot-list {
  gap: 8px;
  padding: 12px;
  background: #F4FAFF;
}

.roster-slot-row {
  min-height: 62px;
  border: 2px solid #AFCBEA;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
}

.roster-slot-row::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 4px;
  border-radius: 0;
  background: #B4D3F6;
}

.roster-slot-row.active {
  border-color: var(--team-frame);
  background: var(--team-blue-soft);
  box-shadow: none;
}

.roster-slot-row.active::before {
  background: var(--team-yellow);
}

.roster-add-slot {
  border-style: dashed;
  background: #F8FCFF;
}

.roster-slot-main {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.roster-slot-main:hover {
  background: transparent;
}

.roster-slot-index,
.move-index {
  border: 2px solid var(--team-frame);
  border-radius: 4px;
  background: var(--team-blue);
  color: #FFFFFF;
  text-shadow: none;
}

.roster-slot-row.active .roster-slot-index {
  border-color: #D3A223;
  background: var(--team-yellow);
  color: #523900;
}

.roster-slot-main .avatar,
.roster-slot-add-art {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 3px;
  background: var(--team-blue-pale);
  image-rendering: pixelated;
}

.roster-slot-main .avatar {
  padding: 2px;
  object-fit: contain;
}

.roster-slot-title strong {
  color: var(--team-ink);
}

.roster-slot-copy small {
  color: var(--team-muted);
}

.roster-slot-more {
  border-color: #F0C4C8;
  background: #FFFFFF;
  color: #D1454F;
}

.roster-editor-main-panel {
  position: relative;
  overflow: hidden;
  container: roster-editor-main / inline-size;
}

.roster-editor-main-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: var(--team-blue);
}

.roster-editor-main-panel.is-empty::before {
  display: none;
}

.roster-editor-identity {
  position: relative;
  grid-template-columns: minmax(270px, 0.46fr) minmax(0, 1fr);
  gap: 0;
  border-bottom: 2px solid var(--team-frame);
  background: #FFFFFF;
  padding: 0;
}

.roster-editor-art {
  position: relative;
  min-height: 318px;
  justify-content: center;
  overflow: hidden;
  border-right: 2px solid var(--team-frame);
  background-color: #EAF5FF;
  padding: 30px 26px;
}

.roster-editor-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 52px;
  left: 50%;
  width: min(240px, 74%);
  height: 28px;
  border: 2px solid #AFCBEA;
  border-radius: 50%;
  background: #CFE0F0;
  transform: translateX(-50%);
}

.roster-editor-art > img {
  position: relative;
  z-index: 1;
  width: 250px;
  height: 250px;
  filter: none;
}

.roster-editor-fields {
  padding: 28px 30px 26px;
}

.roster-editor-name-row {
  gap: 16px;
  align-items: start;
}

.roster-editor-name-row h2 {
  margin: 8px 0 7px;
  color: var(--team-navy);
  font-size: 34px;
  line-height: 1.05;
}

.roster-editor-pokemon-actions .compact-button {
  min-height: 34px;
  font-size: 12px;
}

.roster-editor-pokemon-actions .compact-danger {
  color: #B93641;
}

.roster-editor-form-grid {
  gap: 12px;
  margin-top: 8px;
}

.roster-editor-form-grid .field {
  gap: 7px;
}

.roster-editor-form-grid .field > span {
  color: var(--team-navy);
  font-size: 12px;
  font-weight: 760;
}

.roster-editor-form-grid input:not([type="range"]),
.roster-editor-form-grid .dropdown-trigger {
  min-height: 46px;
  border: 2px solid var(--team-border);
  border-radius: 4px;
  background: #FFFFFF;
}

.roster-editor-form-grid .dropdown-value strong {
  color: var(--team-ink);
}

.roster-editor-form-grid .field.team-parser-invalid input:not([type="range"]),
.roster-editor-form-grid .field.team-parser-invalid .dropdown-trigger,
.roster-move-row.team-parser-invalid {
  border-color: var(--danger);
  background: #FFF5F5;
}

.roster-editor-form-grid .field.team-parser-invalid > span,
.roster-move-row.team-parser-invalid input {
  color: #B91C1C;
}

.roster-editor-subsection {
  gap: 12px;
  border-bottom: 2px solid #C7DDF5;
  background: #FFFFFF;
  padding-top: 20px;
}

.roster-subsection-head {
  min-height: 36px;
  border-left: 6px solid var(--team-blue);
  padding-left: 10px;
}

.roster-subsection-head h3 {
  color: var(--team-navy);
  font-size: 19px;
}

.roster-move-list {
  gap: 10px;
}

.roster-move-row {
  --move-accent: var(--team-blue);
  --move-tint: #F5FAFF;
  min-height: 58px;
  border: 2px solid color-mix(in srgb, var(--move-accent) 34%, #B9C7D6);
  border-radius: 4px;
  background: var(--move-tint);
  padding: 9px 10px;
  box-shadow: none;
}

.roster-move-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  border-radius: 0;
  background: var(--move-accent);
}

.roster-move-row[data-type="normal"] { --move-accent: #9FA19F; --move-tint: #F3F4F4; }
.roster-move-row[data-type="fire"] { --move-accent: #E62829; --move-tint: #FFF2F0; }
.roster-move-row[data-type="water"] { --move-accent: #2980EF; --move-tint: #F1F8FF; }
.roster-move-row[data-type="electric"] { --move-accent: #FAC000; --move-tint: #FFF9E1; }
.roster-move-row[data-type="grass"] { --move-accent: #3FA129; --move-tint: #F1FAEF; }
.roster-move-row[data-type="ice"] { --move-accent: #3DCEF3; --move-tint: #EFFBFF; }
.roster-move-row[data-type="fighting"] { --move-accent: #FF8000; --move-tint: #FFF3E8; }
.roster-move-row[data-type="poison"] { --move-accent: #9141CB; --move-tint: #F7F0FF; }
.roster-move-row[data-type="ground"] { --move-accent: #915121; --move-tint: #FFF3E8; }
.roster-move-row[data-type="flying"] { --move-accent: #81B9EF; --move-tint: #F1F8FF; }
.roster-move-row[data-type="psychic"] { --move-accent: #EF4179; --move-tint: #FFF0F6; }
.roster-move-row[data-type="bug"] { --move-accent: #91A119; --move-tint: #F7FAEA; }
.roster-move-row[data-type="rock"] { --move-accent: #AFA981; --move-tint: #F8F6EA; }
.roster-move-row[data-type="ghost"] { --move-accent: #704170; --move-tint: #F5EFF8; }
.roster-move-row[data-type="dragon"] { --move-accent: #5060E1; --move-tint: #F0F2FF; }
.roster-move-row[data-type="dark"] { --move-accent: #624D4E; --move-tint: #F4F1F2; }
.roster-move-row[data-type="steel"] { --move-accent: #60A1B8; --move-tint: #EFF8FA; }
.roster-move-row[data-type="fairy"] { --move-accent: #EF70EF; --move-tint: #FFF0FF; }

.app-frame:has(.roster-editor-screen) .roster-move-row input:not([type="range"]) {
  height: auto;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--team-ink);
  font-weight: 760;
  box-shadow: none;
  padding: 0;
}

.app-frame:has(.roster-editor-screen) .roster-move-row input:not([type="range"]):focus {
  background: #FFFFFF;
  box-shadow: none;
}

.move-index {
  border-color: color-mix(in srgb, var(--move-accent) 48%, #FFFFFF);
  background: var(--move-accent);
}

.move-clear-ui {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #789;
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) .roster-move-row .move-clear-ui:hover {
  background: #FFFFFF;
  color: #C5404A;
}

.roster-ev-table {
  gap: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roster-ev-cell {
  border: 2px solid #C7DDF5;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
}

.roster-ev-cell:nth-child(6n) {
  border-right: 1px solid #C7DDF5;
}

.roster-ev-label {
  color: var(--team-navy);
}

.roster-ev-cell > strong {
  color: var(--team-ink);
  font-size: 20px;
}

.roster-ev-meter {
  height: 8px;
  border: 1px solid #AFCBEA;
  border-radius: 2px;
  background: #E5EEF8;
}

.roster-ev-meter > span {
  background: var(--team-green);
}

.roster-ev-stepper button,
.roster-ev-quick-actions button {
  border-color: var(--team-border);
  background: #F7FBFF;
  color: var(--team-navy);
}

.roster-ev-stepper input {
  border-color: #D1E1F2;
  background: #FFFFFF;
}

.roster-editor-main-panel.is-empty {
  border-color: var(--team-border);
  background: #FFFFFF;
}

.roster-team-empty-main.is-empty {
  min-height: 520px;
  padding: 32px;
}

.roster-team-empty-main .roster-editor-empty {
  width: min(420px, 100%);
}

.app-frame:has(.roster-editor-screen) .roster-team-empty-main .compact-button {
  width: auto;
  min-width: 112px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  line-height: 1;
}

.roster-add-search,
.roster-empty-picker .battle-opponent-add-search {
  border: 1px solid var(--team-border);
  border-radius: 8px;
  background: #FFFFFF;
}

/* Compact pass for the My Team editor */
.app-frame:has(.roster-editor-screen) {
  font-size: 14px;
  line-height: 1.28;
}

.app-frame:has(.roster-editor-screen) .app-topbar {
  min-height: 50px;
}

.app-frame:has(.roster-editor-screen) .brand-button {
  min-height: 50px;
}

.app-frame:has(.roster-editor-screen) .brand-button strong {
  font-size: 14px;
}

.app-frame:has(.roster-editor-screen) .brand-mark {
  width: 32px;
  height: 32px;
}

.app-frame:has(.roster-editor-screen) .page-header {
  min-height: 50px;
  padding: 8px 16px;
}

.app-frame:has(.roster-editor-screen) .page-title h1 {
  font-size: 17px;
}

.app-frame:has(.roster-editor-screen) .page-actions {
  gap: 7px;
}

.app-frame:has(.roster-editor-screen) .app-main {
  padding: 14px 20px 52px;
}

.roster-editor-content {
  width: min(1660px, 100%);
}

.roster-editor-layout {
  grid-template-columns: minmax(300px, 344px) minmax(0, 1fr);
  gap: 16px;
}

.app-frame:has(.roster-editor-screen) .action-button {
  min-width: 0;
  min-height: 34px;
  gap: 8px;
  border: 2px solid var(--team-frame-dark);
  border-radius: 4px;
  background: #F5FAFF;
  color: var(--team-navy);
  padding: 0 11px 0 5px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1;
}

.app-frame:has(.roster-editor-screen) .action-button .button-icon {
  display: inline-grid;
  position: static;
  width: 22px;
  height: 22px;
  overflow: visible;
  clip: auto;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 3px;
  background: #FFFFFF;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: normal;
}

.app-frame:has(.roster-editor-screen) .action-button:hover {
  border-color: var(--team-frame-dark);
  background: #E4F2FF;
}

.app-frame:has(.roster-editor-screen) .action-button.primary {
  border-color: var(--team-frame-dark);
  background: var(--team-blue);
  color: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .action-button.primary .button-icon {
  background: var(--team-yellow);
  color: #523900;
}

.app-frame:has(.roster-editor-screen) .action-button.primary:hover {
  background: #2474D4;
}

.roster-panel-head {
  min-height: 46px;
  padding: 9px 12px;
}

.roster-panel-head h2,
.roster-subsection-head h3 {
  font-size: 17px;
}

.roster-slot-list {
  gap: 6px;
  padding: 10px;
}

.roster-slot-row {
  min-height: 52px;
  gap: 6px;
  padding: 5px;
}

button.roster-slot-row {
  min-height: 52px;
  padding: 6px;
}

.roster-slot-main {
  grid-template-columns: 22px 36px minmax(0, 1fr);
  gap: 6px;
}

button.roster-slot-row {
  grid-template-columns: 22px 36px minmax(0, 1fr);
  gap: 6px;
}

.roster-slot-main .avatar,
.roster-slot-add-art {
  width: 36px;
  height: 36px;
}

.roster-slot-title strong,
.roster-add-slot strong {
  font-size: 13px;
}

.roster-slot-copy small,
.roster-add-slot small {
  font-size: 11px;
}

.roster-slot-more {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  font-size: 14px;
}

.roster-editor-main-panel {
  gap: 0;
}

.roster-editor-main-panel::before {
  height: 8px;
}

.roster-editor-identity {
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 220px;
}

.roster-editor-art {
  min-height: 220px;
  padding: 16px 18px 18px;
}

.roster-editor-art > img {
  width: 182px;
  height: 182px;
}

.roster-editor-art::after {
  bottom: 26px;
  width: min(172px, 76%);
  height: 18px;
}

.roster-editor-fields {
  gap: 8px;
  padding: 16px 20px 13px;
}

.roster-editor-name-row {
  gap: 12px;
}

.roster-editor-name-row h2 {
  margin: 5px 0 4px;
  font-size: 25px;
  line-height: 1.04;
}

.roster-editor-pokemon-actions {
  gap: 6px;
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions button {
  min-height: 27px;
  gap: 5px;
  border: 2px solid var(--team-frame);
  border-radius: 4px;
  background: #F8FCFF;
  color: var(--team-navy);
  padding: 0 8px 0 5px;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions button::before {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
  background: #FFFFFF;
  font-size: 11px;
  line-height: 1;
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions button[data-action="reset-roster-fields"]::before {
  content: "R";
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions button[data-action="apply-roster-sample"]::before {
  content: "S";
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions button[data-action="clear-member"]::before {
  content: "X";
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions .compact-danger {
  border-color: #8F3D45;
  background: #FFF7F8;
  color: #B93641;
}

.roster-editor-form-grid {
  gap: 7px 10px;
  margin-top: 3px;
}

.roster-editor-form-grid .field {
  gap: 5px;
}

.roster-editor-form-grid .field > span {
  font-size: 11px;
}

.roster-editor-form-grid input:not([type="range"]),
.roster-editor-form-grid .dropdown-trigger {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.roster-editor-subsection {
  gap: 9px;
  padding: 12px 20px 13px;
}

.roster-subsection-head {
  min-height: 30px;
  border-left-width: 5px;
  padding-left: 9px;
}

.roster-move-list {
  gap: 6px;
}

.roster-move-row {
  min-height: 42px;
  grid-template-columns: 22px minmax(0, 1fr) minmax(50px, auto) 26px;
  gap: 7px;
  padding: 5px 8px;
}

.move-index {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.app-frame:has(.roster-editor-screen) .roster-move-row input:not([type="range"]) {
  min-height: 24px;
  font-size: 13px;
}

.move-row-tags .type,
.move-row-tags .type-pill {
  min-height: 20px;
  padding: 1px 7px;
  font-size: 10px;
}

.move-clear-ui {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  font-size: 14px;
}

.roster-ev-table {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.roster-ev-cell {
  gap: 4px;
  padding: 6px;
}

.roster-ev-label,
.roster-ev-cell small {
  font-size: 11px;
}

.roster-ev-cell > strong {
  font-size: 16px;
  line-height: 1.05;
}

.roster-ev-stepper {
  grid-template-columns: 19px minmax(36px, 1fr) 19px;
  gap: 3px;
}

.roster-ev-stepper button {
  min-width: 19px;
  min-height: 22px;
  font-size: 12px;
  padding: 0;
}

.roster-ev-stepper input {
  height: 22px;
  min-height: 22px;
  font-size: 12px;
  padding: 0 2px;
  text-overflow: clip;
}

.roster-ev-quick-actions {
  gap: 3px;
}

.roster-ev-quick-actions button {
  min-height: 18px;
  font-size: 10px;
}

@container roster-editor-main (max-width: 1140px) {
  .roster-ev-table {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container roster-editor-main (max-width: 680px) {
  .roster-ev-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container roster-editor-main (max-width: 430px) {
  .roster-ev-table {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .roster-editor-identity {
    grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1fr);
  }

  .roster-editor-art > img {
    width: 220px;
    height: 220px;
  }
}

@media (max-width: 820px) {
  .roster-editor-layout {
    grid-template-columns: 1fr;
  }

  .app-frame:has(.roster-editor-screen) .app-topbar {
    background: #FFFFFF;
  }

  .app-frame:has(.roster-editor-screen) .brand-button {
    min-height: 54px;
  }

  .roster-editor-identity {
    grid-template-columns: 1fr;
  }

  .roster-editor-art {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid #C7DDF5;
  }

  .roster-editor-art > img {
    width: 190px;
    height: 190px;
  }

  .roster-editor-fields {
    padding: 22px;
  }

  .roster-editor-name-row {
    grid-template-columns: 1fr;
  }

  .roster-editor-pokemon-actions {
    justify-content: flex-start;
  }

  .roster-move-list {
    grid-template-columns: 1fr;
  }

  .roster-ev-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* My Team neutral compact refinements */
.app-frame:has(.roster-editor-screen) {
  --team-navy: #151515;
  --team-blue: #3C3F44;
  --team-blue-soft: #F0F0F0;
  --team-blue-pale: #F7F7F7;
  --team-yellow: #FFCA1A;
  --team-red: #B84242;
  --team-green: #557B5F;
  --team-frame: #3D3D3D;
  --team-frame-dark: #141414;
  --team-border: #C7C7C7;
  --team-border-strong: #777777;
  --team-ink: #111111;
  --team-muted: #5C5C5C;
  background: #ECEFF2;
}

.roster-panel-head,
.roster-editor-main-panel::before {
  background: #303338;
}

.app-frame:has(.roster-editor-screen) .brand-button {
  border-right-color: var(--team-border);
  background: #FFFFFF;
  color: var(--team-ink);
}

.app-frame:has(.roster-editor-screen) .brand-button:hover {
  background: #F7F7F7;
}

.app-frame:has(.roster-editor-screen) .page-title h1,
.roster-editor-name-row h2,
.roster-editor-form-grid .field > span,
.roster-subsection-head h3,
.roster-ev-label {
  color: var(--team-ink);
}

.app-frame:has(.roster-editor-screen) button:hover,
.app-frame:has(.roster-editor-screen) .action-button:hover,
.app-frame:has(.roster-editor-screen) .icon-button:hover,
.app-frame:has(.roster-editor-screen) .dropdown-trigger:hover {
  border-color: var(--team-frame-dark);
  background: #F4F4F4;
  color: var(--team-ink);
}

.app-frame:has(.roster-editor-screen) .action-button {
  border-color: var(--team-frame-dark);
  background: #FFFFFF;
  color: var(--team-ink);
}

.app-frame:has(.roster-editor-screen) .action-button.primary,
.app-frame:has(.roster-editor-screen) button.primary {
  border-color: var(--team-frame-dark);
  background: #303338;
  color: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .action-button.primary:hover,
.app-frame:has(.roster-editor-screen) button.primary:hover {
  background: #24262A;
}

.app-frame:has(.roster-editor-screen) .action-button.primary .button-icon {
  background: var(--team-yellow);
  color: #2C2300;
}

.roster-editor-content {
  width: min(1200px, 100%);
  margin-inline: auto;
}

.roster-editor-layout {
  grid-template-columns: minmax(360px, 390px) minmax(0, 1fr);
}

.roster-slot-list {
  grid-template-columns: 1fr;
  gap: 5px;
  background: #F2F3F4;
}

.roster-team-list {
  gap: 5px;
  padding: 10px;
  background: #F2F3F4;
}

.roster-team-draft {
  margin: 10px 10px 0;
}

.roster-slot-row {
  grid-template-columns: minmax(0, 1fr) 22px;
  min-height: 43px;
  border-color: #AFAFAF;
  background: #FFFFFF;
  padding: 4px 10px 4px 12px;
}

.app-frame:has(.roster-editor-screen) button.roster-slot-row {
  padding: 6px 10px 6px 12px;
}

.roster-slot-row::before {
  background: #8B8F95;
}

.roster-slot-row.active {
  border-color: var(--team-frame-dark);
  background: #FBF7E6;
}

.roster-slot-row.active::before {
  background: var(--team-yellow);
}

.app-frame:has(.roster-editor-screen) .roster-slot-main {
  grid-template-columns: 24px 38px minmax(0, 1fr);
  gap: 8px;
  min-height: 35px;
  border: 0;
  background: transparent;
  color: var(--team-ink);
  padding: 0;
}

.app-frame:has(.roster-editor-screen) .roster-slot-main:hover,
.app-frame:has(.roster-editor-screen) .roster-slot-main:focus-visible {
  background: transparent;
}

.roster-slot-main .avatar,
.roster-slot-add-art {
  width: 38px;
  height: 38px;
  background: transparent;
}

.roster-slot-main .avatar {
  padding: 0;
}

.roster-slot-title strong,
.roster-add-slot strong {
  font-size: 14px;
  line-height: 1.15;
}

.roster-slot-copy,
.roster-slot-title {
  gap: 1px;
}

.roster-slot-index,
.move-index {
  border-color: var(--team-frame);
  background: #6A6E75;
}

.roster-slot-row.active .roster-slot-index {
  border-color: #9C7D1E;
  background: var(--team-yellow);
}

.roster-slot-more {
  border-color: #BBBBBB;
  color: #222222;
}

.roster-editor-identity {
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 176px;
}

.roster-editor-art {
  min-height: 176px;
  background-color: #F0F1F2;
  padding: 12px 14px 14px;
}

.roster-editor-art > img {
  width: 142px;
  height: 142px;
}

.roster-editor-art::after {
  bottom: 20px;
  width: min(138px, 74%);
  height: 16px;
  border-color: #C5C7CA;
  background: #DADCE0;
}

.roster-editor-fields {
  padding: 12px 18px 10px;
}

.roster-editor-name-row {
  align-items: start;
}

.roster-editor-name-row h2 {
  font-size: 23px;
  margin-bottom: 7px;
}

.roster-editor-name-row .type-list {
  margin-top: 2px;
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions button::before {
  content: none !important;
  display: none !important;
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions button {
  min-height: 30px;
  border-color: var(--team-frame);
  background: #FFFFFF;
  color: var(--team-ink);
  padding: 0 9px;
  font-size: 12px;
}

.app-frame:has(.roster-editor-screen) .roster-editor-pokemon-actions .compact-danger {
  border-color: #7B3030;
  background: #FFFFFF;
  color: #9B2F2F;
}

.roster-editor-form-grid {
  grid-template-columns: minmax(140px, 1.15fr) minmax(128px, 0.95fr) minmax(128px, 0.95fr) minmax(128px, 0.95fr);
  gap: 7px 8px;
}

.roster-name-field {
  grid-column: auto;
}

.roster-editor-form-grid input:not([type="range"]),
.roster-editor-form-grid .dropdown-trigger {
  height: 36px;
  min-height: 34px;
  border-color: #BBBBBB;
}

.app-frame:has(.roster-editor-screen) .roster-editor-form-grid .item-input-wrap.has-thumb input {
  padding-left: 42px;
}

.app-frame:has(.roster-editor-screen) .roster-editor-form-grid .selected-item-thumb {
  left: 10px;
  width: 22px;
  height: 22px;
}

.roster-subsection-head {
  border-left-color: #6A6E75;
}

.roster-move-row {
  --move-tint: #FFFFFF;
  border-color: #B7B7B7;
  padding-left: 14px;
}

.roster-move-row[data-type="normal"],
.roster-move-row[data-type="fire"],
.roster-move-row[data-type="water"],
.roster-move-row[data-type="electric"],
.roster-move-row[data-type="grass"],
.roster-move-row[data-type="ice"],
.roster-move-row[data-type="fighting"],
.roster-move-row[data-type="poison"],
.roster-move-row[data-type="ground"],
.roster-move-row[data-type="flying"],
.roster-move-row[data-type="psychic"],
.roster-move-row[data-type="bug"],
.roster-move-row[data-type="rock"],
.roster-move-row[data-type="ghost"],
.roster-move-row[data-type="dragon"],
.roster-move-row[data-type="dark"],
.roster-move-row[data-type="steel"],
.roster-move-row[data-type="fairy"] {
  --move-tint: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .roster-editor-form-grid .field.team-parser-invalid input:not([type="range"]),
.app-frame:has(.roster-editor-screen) .roster-editor-form-grid .field.team-parser-invalid .dropdown-trigger,
.app-frame:has(.roster-editor-screen) .roster-move-row.team-parser-invalid {
  border-color: var(--danger);
  background: #FFF5F5;
}

.roster-ev-cell {
  border-color: #BBBBBB;
}

.app-frame:has(.roster-editor-screen) .roster-ev-cell.nature-up {
  border-color: #BDA550;
  background: #FBF8EA;
}

.app-frame:has(.roster-editor-screen) .roster-ev-cell.nature-down {
  border-color: #AFAFAF;
  background: #F6F6F6;
}

.roster-ev-meter {
  border-color: #B8B8B8;
  background: #EEEEEE;
}

.roster-ev-meter > span {
  background: #5B8062;
}

.roster-ev-stepper button,
.roster-ev-quick-actions button {
  border-color: #BBBBBB;
  background: #FFFFFF;
  color: var(--team-ink);
}

.roster-ev-stepper input {
  border-color: #BBBBBB;
}

.roster-popular-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}

.roster-popular-card {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px;
  min-height: 82px;
  border-color: #B8B8B8;
  background: #FFFFFF;
  padding: 20px 8px 8px;
}

.roster-popular-card:hover,
.roster-popular-card:focus {
  border-color: var(--team-frame-dark);
  background: #FBF7E6;
}

.roster-popular-card img {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
}

.roster-popular-card > span:last-child {
  gap: 5px;
}

.roster-popular-card strong {
  font-size: 13px;
}

.roster-popular-card .type-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(48px, max-content));
  gap: 4px;
  align-items: center;
  justify-content: start;
}

.roster-popular-card .type,
.roster-popular-card .type-pill {
  min-width: 48px;
  min-height: 21px;
  justify-content: center;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}

.roster-popular-card .battle-popular-rank {
  top: 5px;
  left: 7px;
  border: 1px solid #B8B8B8;
  border-radius: 3px;
  background: #F3F3F3;
  color: #333333;
  padding: 2px 5px;
  font-size: 10px;
}

.roster-popular-card:first-child .battle-popular-rank {
  border-color: #9C7D1E;
  background: #FBF2D2;
  color: #2C2300;
}

@media (max-width: 1180px) {
  .roster-editor-layout {
    grid-template-columns: minmax(330px, 360px) minmax(0, 1fr);
  }

  .roster-editor-identity {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .roster-editor-art > img {
    width: 140px;
    height: 140px;
  }

  .roster-editor-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .roster-editor-art {
    align-content: end;
  }
}

@media (max-width: 820px) {
  .roster-editor-layout,
  .roster-editor-identity {
    grid-template-columns: 1fr;
  }

  .roster-editor-form-grid {
    grid-template-columns: 1fr;
  }

  .roster-editor-art {
    border-right: 0;
    border-bottom: 2px solid var(--team-frame);
  }
}

.roster-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
}

.roster-panel-head > div:first-child {
  min-width: 0;
}

.roster-panel-head h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-mode-tabs {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin-left: 0;
}

.app-frame:has(.roster-editor-screen) .roster-mode-tabs button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  border: 2px solid var(--team-frame-dark);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--team-ink);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.1;
  text-align: left;
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) .roster-mode-tabs button.active {
  border-color: var(--team-frame-dark);
  background: #FBF7E6;
  color: var(--team-ink);
  box-shadow: inset 0 -4px 0 var(--team-yellow);
}

.app-frame:has(.roster-editor-screen) .roster-mode-tabs button:hover {
  border-color: var(--team-frame-dark);
  background: #F4F4F4;
  color: var(--team-ink);
}

.app-frame:has(.roster-editor-screen) .roster-mode-tabs button.active:hover {
  background: #FBF7E6;
}

.roster-mode-label,
.roster-mode-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-mode-label {
  font-weight: 880;
}

.roster-mode-meta {
  justify-self: end;
  color: var(--team-muted);
  font-size: 11px;
  font-weight: 760;
}

.roster-mode-tabs button.active .roster-mode-meta {
  color: #523900;
}

.roster-team-editor-main,
.roster-team-detail-main {
  align-content: start;
}

.roster-team-editor-head {
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 16px;
}

.roster-team-editor-head .inline-actions {
  justify-content: flex-end;
  gap: 6px;
}

.roster-team-editor-head h2 {
  font-size: 28px;
}

.app-frame:has(.roster-editor-screen) .roster-team-editor-head .compact-button,
.app-frame:has(.roster-editor-screen) .roster-team-editor-head .compact-danger,
.app-frame:has(.roster-editor-screen) .roster-team-draft-actions .compact-button {
  min-height: 30px;
  border: 2px solid var(--team-frame);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--team-ink);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  box-shadow: none;
}

.app-frame:has(.roster-editor-screen) .roster-team-editor-head button.primary,
.app-frame:has(.roster-editor-screen) .roster-team-draft-actions button.primary {
  border-color: var(--team-frame-dark);
  background: #303338;
  color: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .roster-team-editor-head button.primary:hover,
.app-frame:has(.roster-editor-screen) .roster-team-draft-actions button.primary:hover {
  background: #24262A;
  color: #FFFFFF;
}

.app-frame:has(.roster-editor-screen) .roster-team-editor-head .compact-danger {
  border-color: #7B3030;
  background: #FFFFFF;
  color: #9B2F2F;
}

.app-frame:has(.roster-editor-screen) .roster-team-editor-head .compact-danger:hover {
  background: #FFF7F8;
  color: #9B2F2F;
}

.app-frame:has(.roster-editor-screen) .roster-team-editor-head .compact-button:hover,
.app-frame:has(.roster-editor-screen) .roster-team-draft-actions .compact-button:hover {
  border-color: var(--team-frame-dark);
  background: #F4F4F4;
  color: var(--team-ink);
}

.roster-team-card {
  border-color: #AFAFAF;
  padding: 8px;
}

.roster-team-card.active {
  border-color: var(--team-frame-dark);
  background: #FBF7E6;
}

.roster-team-editor-member,
.roster-team-detail-member {
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.roster-team-editor-member {
  border-color: #B7B7B7;
}

.roster-team-editor-member {
  padding: 10px 10px 10px 16px;
}

.roster-team-detail-member {
  min-height: 118px;
  padding: 10px 12px 10px 16px;
}

.roster-team-editor-member::before,
.roster-team-detail-member::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #8B8F95;
}

.roster-team-detail-member::before {
  background: linear-gradient(
    to bottom,
    var(--team-type-top, #8B8F95) 0 50%,
    var(--team-type-bottom, var(--team-type-top, #8B8F95)) 50% 100%
  );
}

.roster-team-editor-member.selected {
  border-color: var(--team-frame-dark);
  background: #FBF7E6;
}

.roster-team-editor-member.selected::before {
  background: var(--team-yellow);
}

.roster-team-detail-copy strong {
  color: var(--team-ink);
  font-size: 16px;
}

@media (max-width: 1180px) {
  .roster-team-detail-list {
    grid-template-columns: 1fr;
  }

  .roster-team-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .roster-team-editor-head {
    display: grid;
  }

  .roster-team-editor-head .inline-actions {
    justify-content: flex-start;
  }

  .roster-team-editor-grid {
    grid-template-columns: 1fr;
  }
}

/* Battle Setup neutral compact refinements */
.app-frame:has(.battle-setup-overview) {
  --setup-frame: #3D3D3D;
  --setup-frame-dark: #141414;
  --setup-line: #B8B8B8;
  --setup-line-soft: #D3D3D3;
  --setup-panel: #FAFAFA;
  --setup-muted-panel: #F1F2F3;
  --setup-ink: #111111;
  --setup-muted: #5C5C5C;
  --setup-gold: #FFCA1A;
  --setup-gold-soft: #FBF7E6;
  --accent: var(--setup-frame);
  --accent-strong: var(--setup-frame-dark);
  --selection: var(--setup-frame);
  --selection-soft: var(--setup-gold-soft);
  --selection-ring: rgba(20, 20, 20, 0.14);
  --hover-bg: #F4F4F4;
  --hover-border: var(--setup-frame-dark);
  background: #ECEFF2;
}

.app-frame:has(.battle-setup-overview) .app-main {
  padding: 10px 12px 80px;
}

.battle-setup-overview-content {
  width: min(1840px, 100%);
  margin-inline: auto;
}

.battle-setup-overview {
  gap: 10px;
}

.battle-setup-compact-menu {
  min-height: 52px;
  border: 2px solid var(--setup-frame-dark);
  border-radius: 4px;
  background: #F7F7F7;
  padding: 6px 8px 6px 12px;
  box-shadow: none;
}

.battle-setup-compact-menu .app-data-notice {
  min-height: 36px;
  border-color: var(--setup-line);
  border-radius: 3px;
  color: var(--setup-muted);
  padding-inline: 12px;
}

.battle-setup-menu-title {
  gap: 7px;
  color: var(--setup-ink);
}

.battle-setup-menu-mark {
  width: 38px;
  height: 38px;
}

.battle-setup-menu-copy strong {
  font-size: 20px;
  font-weight: 800;
}

.battle-setup-menu-copy small {
  color: var(--setup-muted);
  font-size: 14px;
  font-weight: 700;
}

.app-frame:has(.battle-setup-overview) button,
.app-frame:has(.battle-setup-overview) .action-button,
.app-frame:has(.battle-setup-overview) .compact-button {
  border-color: var(--setup-frame);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-ink);
  box-shadow: none;
}

.app-frame:has(.battle-setup-overview) button:hover,
.app-frame:has(.battle-setup-overview) .action-button:hover,
.app-frame:has(.battle-setup-overview) .compact-button:hover {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  color: var(--setup-ink);
}

.app-frame:has(.battle-setup-overview) .battle-setup-menu-title,
.app-frame:has(.battle-setup-overview) .battle-setup-menu-title:hover {
  border-color: transparent;
  background: #F7F7F7;
  color: var(--setup-ink);
}

.app-frame:has(.battle-setup-overview) button:focus-visible,
.app-frame:has(.battle-setup-overview) .action-button:focus-visible,
.app-frame:has(.battle-setup-overview) .compact-button:focus-visible,
.app-frame:has(.battle-setup-overview) input:focus {
  outline: 2px solid var(--setup-gold);
  outline-offset: 1px;
  box-shadow: none;
}

.app-frame:has(.battle-setup-overview) button.primary,
.app-frame:has(.battle-setup-overview) .action-button.primary {
  border-color: var(--setup-frame-dark);
  background: #303338;
  color: #FFFFFF;
}

.app-frame:has(.battle-setup-overview) button.primary:hover,
.app-frame:has(.battle-setup-overview) .action-button.primary:hover {
  background: #24262A;
  color: #FFFFFF;
}

.app-frame:has(.battle-setup-overview) .action-button.primary .button-icon {
  width: 23px;
  height: 23px;
  border: 1px solid #9C7D1E;
  border-radius: 3px;
  background: var(--setup-gold);
  color: #2C2300;
  font-size: 14px;
}

.battle-setup-menu-actions .action-button,
.battle-setup-menu-actions .compact-button {
  min-height: 38px;
  padding: 5px 12px;
  font-size: 17px;
}

.battle-setup-overview-grid {
  grid-template-areas:
    "team opponent"
    "speed speed";
  gap: 12px;
}

.setup-overview-card {
  gap: 12px;
  border: 2px solid var(--setup-frame);
  border-radius: 4px;
  background: var(--setup-panel);
  padding: 12px;
  box-shadow: none;
}

.setup-overview-card > .setup-overview-head {
  min-height: 78px;
}

.setup-overview-head,
.setup-subhead {
  gap: 8px;
}

.setup-overview-head h2 {
  color: var(--setup-ink);
  font-size: 26px;
  font-weight: 800;
}

.setup-overview-head .hint {
  color: var(--setup-muted);
  font-size: 16px;
  line-height: 1.35;
}

.setup-overview-actions {
  max-width: min(430px, 58%);
}

.setup-roster-threat-toggle {
  flex: 1 1 136px;
  min-height: 38px;
  border: 1px solid var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-muted);
  padding: 5px 9px;
  font-size: 14px;
  box-shadow: none;
}

.setup-roster-threat-toggle.active {
  border-color: #9C7D1E;
  background: var(--setup-gold-soft);
  color: var(--setup-frame-dark);
}

.app-frame:has(.battle-setup-overview) .setup-roster-threat-toggle.active {
  border-color: #9C7D1E;
  background: var(--setup-gold-soft);
  color: var(--setup-frame-dark);
}

.setup-roster-threat-toggle b,
.setup-roster-threat-toggle.active b {
  color: var(--setup-frame-dark);
  font-size: 13px;
}

.app-frame:has(.battle-setup-overview) .status-pill {
  min-height: 31px;
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-muted);
  padding: 3px 9px;
  font-size: 16px;
}

.setup-team-card-grid,
.setup-selected-opponent-grid {
  gap: 8px;
  align-items: start;
}

.setup-team-card {
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: 50px auto;
  column-gap: 9px;
  row-gap: 7px;
  min-height: 146px;
  border: 1px solid var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 10px;
  padding-right: 36px;
  box-shadow: none;
}

.setup-team-card-wrap .setup-team-card {
  height: auto;
  min-height: 100%;
}

.setup-team-card:hover,
.setup-opponent-suggestion-card:hover {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  box-shadow: none;
}

.setup-team-card.selected {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  box-shadow: none;
}

.app-frame:has(.battle-setup-overview) .setup-team-card.selected {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  color: var(--setup-ink);
}

.setup-team-card > .setup-card-order {
  top: 6px;
  left: 6px;
}

.setup-card-order {
  width: 31px;
  height: 31px;
  border: 1px solid var(--setup-frame);
  border-radius: 4px;
  background: #6A6E75;
  color: #FFFFFF;
  font-size: 16px;
}

.selected > .setup-card-order,
.setup-candidate-card.selected .setup-card-order,
.setup-final-card.selected .setup-card-order {
  border-color: #9C7D1E;
  background: var(--setup-gold);
  color: #2C2300;
}

.setup-team-art {
  width: 50px;
  height: 50px;
  border-radius: 0;
  background: transparent;
}

.setup-team-art img {
  width: 48px;
  height: 48px;
}

.setup-team-copy {
  gap: 2px;
}

.setup-team-copy strong {
  color: var(--setup-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.app-frame:has(.battle-setup-overview) .setup-team-copy strong,
.app-frame:has(.battle-setup-overview) .setup-opponent-suggestion-card strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.setup-team-remove {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: #8B2D2D;
  font-size: 17px;
}

.setup-team-remove:hover,
.setup-team-remove:focus-visible {
  border-color: #7B3030;
  background: #FFF6F6;
  color: #7B3030;
}

.setup-team-card.empty,
.setup-selected-opponent-card.empty {
  min-height: 146px;
  border-color: var(--setup-line);
  border-style: dashed;
  border-radius: 4px;
  background: var(--setup-muted-panel);
  color: var(--setup-muted);
}

.setup-team-card.empty:hover,
.setup-selected-opponent-card.empty:hover {
  border-color: var(--setup-line);
  background: var(--setup-muted-panel);
}

.setup-roster-fill-strip {
  gap: 10px;
  border-color: var(--setup-line);
  border-radius: 4px;
  background: var(--setup-muted-panel);
  padding: 10px;
}

.setup-saved-team-open-button.active,
.app-frame:has(.battle-setup-overview) .setup-saved-team-open-button.active {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  color: var(--setup-ink);
}

.setup-saved-team-popover {
  right: 10px;
  bottom: calc(100% - 8px);
  border-color: var(--setup-frame);
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 16px 34px rgba(20, 20, 20, 0.16);
}

.setup-saved-team-popover-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--setup-line);
}

.setup-saved-team-popover-head strong {
  color: var(--setup-ink);
  font-size: 16px;
  font-weight: 820;
}

.setup-saved-team-popover-foot {
  justify-content: flex-end;
  padding-top: 2px;
}

.setup-saved-team-popover .setup-saved-team-button {
  min-height: 54px;
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
}

.setup-saved-team-popover .setup-saved-team-button.active {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.08);
}

.setup-roster-fill-strip.is-empty {
  align-items: center;
}

.setup-roster-fill-chip {
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  justify-content: stretch;
  column-gap: 8px;
  min-width: 176px;
  min-height: 44px;
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 4px 8px 4px 7px;
  font-size: 14px;
}

.setup-roster-fill-chip.selected {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
}

.app-frame:has(.battle-setup-overview) .setup-roster-fill-chip.selected {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  color: var(--setup-ink);
}

.setup-roster-fill-chip b,
.setup-opponent-suggestion-card b {
  width: 26px;
  height: 26px;
  border: 1px solid var(--setup-line);
  border-radius: 4px;
  background: #F3F3F3;
  color: var(--setup-ink);
}

.setup-roster-fill-chip b {
  justify-self: end;
}

.setup-roster-fill-chip img {
  width: 36px;
  height: 36px;
}

.setup-roster-fill-chip.selected b {
  border-color: #9C7D1E;
  background: var(--setup-gold);
  color: #2C2300;
}

.setup-opponent-search input {
  height: 52px;
  border: 1px solid var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-ink);
  padding-right: 46px;
  font-size: 18px;
}

.setup-opponent-search .search-results {
  max-height: 260px;
  border: 2px solid var(--setup-frame);
  border-radius: 4px;
  box-shadow: none;
}

.setup-opponent-search .search-results button {
  min-height: 48px;
  border-bottom: 1px solid var(--setup-line-soft);
  border-radius: 0;
  padding: 7px 10px;
  font-size: 15px;
}

.setup-opponent-search .search-results button:last-child {
  border-bottom: 0;
}

.setup-opponent-search .search-results .result-thumb {
  width: 32px;
  height: 32px;
}

.setup-search-icon {
  right: 12px;
  color: var(--setup-frame);
}

.setup-selected-opponent-strip,
.setup-opponent-suggestions {
  gap: 8px;
}

.setup-opponent-overview {
  gap: 8px;
}

.setup-opponent-overview > .setup-overview-head {
  min-height: 42px;
}

.setup-subhead strong {
  color: var(--setup-ink);
  font-size: 18px;
  font-weight: 800;
}

.setup-subhead small {
  color: var(--setup-muted);
  font-size: 16px;
}

.setup-selected-opponent-card {
  min-height: 177px;
}

.app-frame:has(.battle-setup-overview) .pokemon-form-toggle.setup {
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-muted);
}

.app-frame:has(.battle-setup-overview) .pokemon-form-toggle.setup > span:first-child {
  color: var(--setup-muted);
  font-size: 12px;
}

.app-frame:has(.battle-setup-overview) .pokemon-form-toggle.setup button {
  min-height: 25px;
  border-radius: 3px;
  background: #F3F3F3;
  color: var(--setup-ink);
}

.app-frame:has(.battle-setup-overview) .pokemon-form-toggle.setup button.active,
.app-frame:has(.battle-setup-overview) .pokemon-form-toggle.setup button[aria-pressed="true"] {
  border-color: #9C7D1E;
  background: var(--setup-gold-soft);
  color: #332800;
}

.setup-sample-note {
  color: var(--setup-muted);
  font-size: 13px;
  text-decoration-thickness: 1px;
}

.setup-sample-note:hover,
.setup-sample-note:focus-visible {
  color: var(--setup-frame-dark);
}

.setup-counter-panel {
  gap: 5px;
}

.setup-team-card .setup-counter-panel {
  width: calc(100% + 26px);
  max-width: calc(100% + 26px);
}

.setup-counter-head {
  gap: 5px;
}

.setup-counter-head > span:first-child {
  color: var(--setup-muted);
  font-size: 14px;
}

.setup-matchup-help {
  min-height: 23px;
  border-color: var(--setup-line);
  border-radius: 3px;
  background: #F5F5F5;
  color: var(--setup-muted);
  padding: 1px 6px;
  font-size: 13px;
}

.setup-matchup-help:hover,
.setup-matchup-help:focus-visible {
  border-color: var(--setup-frame-dark);
  color: var(--setup-frame-dark);
}

.setup-matchup-help::after,
.setup-sample-note::after,
.setup-counter-ko::after,
.setup-counter-guard::after,
.setup-counter-speed::after,
.setup-counter-more::after {
  border-color: var(--setup-frame);
  border-radius: 4px;
  box-shadow: none;
}

.setup-counter-list {
  gap: 4px;
}

.setup-counter-card {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px;
  min-height: 36px;
  border-color: var(--setup-line-soft);
  border-radius: 4px;
  background: #F7F7F7;
  padding: 3px;
}

.setup-counter-card img {
  width: 30px;
  height: 30px;
}

.setup-counter-copy {
  gap: 0;
}

.setup-counter-copy strong {
  font-size: 13px;
  line-height: 1.15;
}

.setup-counter-move-text {
  font-size: 12px;
  line-height: 1.15;
}

.app-frame:has(.battle-setup-overview) .setup-counter-copy strong,
.app-frame:has(.battle-setup-overview) .setup-counter-move-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.setup-counter-badges,
.setup-counter-micro-row {
  gap: 2px;
}

.setup-counter-badges {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-items: start;
}

.setup-counter-micro-row {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.setup-counter-effect {
  max-width: none;
  min-height: 18px;
  padding-inline: 4px;
  font-size: 11px;
}

.battle-setup-overview .setup-matchup-chip,
.battle-setup-overview .setup-matchup-empty,
.battle-setup-overview .setup-counter-effect,
.battle-setup-overview .setup-counter-speed,
.battle-setup-overview .setup-counter-ko,
.battle-setup-overview .setup-counter-guard {
  border-radius: 3px;
}

.setup-counter-speed,
.setup-counter-ko,
.setup-counter-guard {
  min-height: 18px;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 11px;
}

.setup-counter-micro-row .setup-counter-speed {
  margin-left: 7px;
}

.setup-counter-micro-row .setup-counter-speed:first-child {
  margin-left: 0;
}

.setup-counter-guard {
  border-color: #BBA050;
  background: #FBF7E6;
  color: #3A2E00;
}

.setup-counter-more,
.setup-counter-empty {
  min-height: 31px;
  border-radius: 4px;
  background: #F5F5F5;
  color: var(--setup-muted);
  padding: 5px 8px;
  font-size: 14px;
}

.setup-counter-more {
  border-color: #BBA050;
  background: var(--setup-gold-soft);
  color: #3A2E00;
}

.setup-opponent-suggestion-list {
  gap: 9px;
}

html[lang="en"] .setup-opponent-suggestion-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-opponent-suggestion-card {
  grid-template-columns: 36px minmax(0, 1fr) 26px;
  min-height: 62px;
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 6px;
}

.setup-opponent-suggestion-card strong {
  color: var(--setup-ink);
  font-size: 14px;
}

html[lang="en"] .app-frame:has(.battle-setup-overview) .setup-opponent-suggestion-card strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.15;
}

.setup-opponent-suggestion-card img {
  width: 36px;
  height: 36px;
}

.battle-setup-speed-compare {
  gap: 8px;
}

.battle-setup-speed-compare-head strong {
  color: var(--setup-ink);
  font-size: 18px;
}

.battle-setup-speed-compare-head small,
.battle-setup-speed-grid-head {
  color: var(--setup-muted);
  font-size: 14px;
}

.battle-setup-speed-card,
.battle-setup-speed-band,
.battle-setup-speed-empty {
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
}

.battle-setup-speed-card.my-card {
  min-height: 40px;
  padding: 5px 7px;
}

.battle-setup-speed-identity {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
}

.battle-setup-speed-identity img {
  width: 22px;
  height: 22px;
}

.battle-setup-speed-identity strong {
  font-size: 14px;
}

.battle-setup-speed-identity small {
  max-width: 86px;
  font-size: 12px;
}

.battle-setup-speed-card.my-card:hover,
.battle-setup-speed-card.my-card:focus-visible,
.battle-setup-speed-card.my-card.is-focused {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
}

.battle-setup-speed-band {
  min-height: 40px;
  background: #F7F7F7;
  padding: 5px 7px;
}

.battle-setup-speed-band.tie-band {
  border-color: #BBA050;
  background: var(--setup-gold-soft);
}

.battle-setup-speed-badge {
  min-height: 29px;
  min-width: 112px;
  border-color: var(--setup-line);
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 13px;
}

.battle-setup-speed-number,
.battle-setup-speed-opponent-name span {
  min-width: 34px;
  min-height: 26px;
  border: 1px solid var(--setup-line);
  border-radius: 4px;
  background: #F1F1F1;
  color: var(--setup-frame-dark);
  font-size: 14px;
}

.battle-setup-speed-badge b {
  color: var(--setup-frame-dark);
}

.battle-setup-speed-badge.neutral {
  border-color: var(--setup-line);
}

.battle-setup-speed-badge.positive {
  border-color: #BBA050;
  background: var(--setup-gold-soft);
}

@media (min-width: 1181px) {
  .setup-my-team-overview,
  .setup-opponent-overview {
    height: 100%;
  }
}

@media (max-width: 1180px) {
  .battle-setup-overview-content {
    width: min(980px, 100%);
  }

  .battle-setup-overview-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "team"
      "opponent"
      "speed";
  }

  .setup-team-card {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: 44px auto;
    min-height: 118px;
  }

  .setup-team-art,
  .setup-team-art img {
    width: 44px;
    height: 44px;
  }

  .setup-overview-actions {
    max-width: min(430px, 62%);
  }
}

@media (max-width: 900px) {
  html[lang="en"] .setup-opponent-suggestion-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  html[lang="en"] .setup-opponent-suggestion-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .battle-setup-overview-content {
    width: 100%;
  }

  .setup-overview-card {
    padding: 9px;
  }

  .setup-overview-card > .setup-overview-head {
    min-height: 0;
  }

  .setup-overview-actions {
    max-width: none;
  }

  .setup-team-card {
    min-height: 106px;
  }

  .app-frame:has(.battle-setup-overview) .setup-roster-fill-chip {
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    min-width: 0;
  }

  .battle-setup-compact-menu {
    align-items: stretch;
  }
}

/* Inquiry board neutral compact refinements */
.app-frame:has(.inquiry-board) {
  --setup-frame: #3D3D3D;
  --setup-frame-dark: #141414;
  --setup-line: #B8B8B8;
  --setup-line-soft: #D3D3D3;
  --setup-panel: #FAFAFA;
  --setup-muted-panel: #F1F2F3;
  --setup-ink: #111111;
  --setup-muted: #5C5C5C;
  --setup-gold: #FFCA1A;
  --setup-gold-soft: #FBF7E6;
  --accent: var(--setup-frame);
  --accent-strong: var(--setup-frame-dark);
  --selection: var(--setup-frame);
  --selection-soft: var(--setup-gold-soft);
  --selection-ring: rgba(20, 20, 20, 0.14);
  --hover-bg: #F4F4F4;
  --hover-border: var(--setup-frame-dark);
  background: #ECEFF2;
}

.app-frame:has(.inquiry-board) .app-main {
  padding: 10px 12px 80px;
}

.app-frame:has(.inquiry-board) button,
.app-frame:has(.inquiry-board) .action-button,
.app-frame:has(.inquiry-board) .compact-button,
.app-frame:has(.inquiry-board) .inquiry-mail-link {
  border-color: var(--setup-frame);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-ink);
  box-shadow: none;
}

.app-frame:has(.inquiry-board) button:hover,
.app-frame:has(.inquiry-board) .action-button:hover,
.app-frame:has(.inquiry-board) .compact-button:hover,
.app-frame:has(.inquiry-board) .inquiry-mail-link:hover,
.app-frame:has(.inquiry-board) .inquiry-mail-link:focus-visible {
  border-color: var(--setup-frame-dark);
  background: var(--setup-gold-soft);
  color: var(--setup-ink);
}

.app-frame:has(.inquiry-board) button.primary,
.app-frame:has(.inquiry-board) .action-button.primary {
  border-color: var(--setup-frame-dark);
  background: #303338;
  color: #FFFFFF;
}

.app-frame:has(.inquiry-board) button.primary:hover,
.app-frame:has(.inquiry-board) .action-button.primary:hover {
  background: #24262A;
  color: #FFFFFF;
}

.app-frame:has(.inquiry-board) button:focus-visible,
.app-frame:has(.inquiry-board) .action-button:focus-visible,
.app-frame:has(.inquiry-board) .compact-button:focus-visible,
.app-frame:has(.inquiry-board) .inquiry-mail-link:focus-visible,
.app-frame:has(.inquiry-board) input:focus,
.app-frame:has(.inquiry-board) textarea:focus {
  outline: 2px solid var(--setup-gold);
  outline-offset: 1px;
  box-shadow: none;
}

.app-frame:has(.inquiry-board) .inquiry-board-content {
  width: min(1840px, 100%);
  margin-inline: auto;
}

.app-frame:has(.inquiry-board) .inquiry-board {
  gap: 12px;
}

.app-frame:has(.inquiry-board) .inquiry-intro,
.app-frame:has(.inquiry-board) .inquiry-composer,
.app-frame:has(.inquiry-board) .inquiry-list-panel {
  border: 2px solid var(--setup-frame);
  border-radius: 4px;
  background: var(--setup-panel);
  padding: 12px;
  box-shadow: none;
}

.inquiry-intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.app-frame:has(.inquiry-board) .inquiry-home-link,
.app-frame:has(.inquiry-board) .inquiry-mail-link {
  min-height: 38px;
  min-width: 108px;
  padding: 5px 12px;
  font-size: 17px;
  font-weight: 800;
}

.app-frame:has(.inquiry-board) .inquiry-intro-copy h2,
.app-frame:has(.inquiry-board) .inquiry-panel-head h2 {
  color: var(--setup-ink);
  font-size: 26px;
  font-weight: 800;
}

.app-frame:has(.inquiry-board) .inquiry-intro-copy p,
.app-frame:has(.inquiry-board) .inquiry-panel-head p,
.app-frame:has(.inquiry-board) .inquiry-field > span {
  color: var(--setup-muted);
}

.app-frame:has(.inquiry-board) .inquiry-columns {
  gap: 12px;
}

.app-frame:has(.inquiry-board) .inquiry-field input,
.app-frame:has(.inquiry-board) .inquiry-field textarea,
.app-frame:has(.inquiry-board) .inquiry-comment-composer textarea {
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-ink);
}

.app-frame:has(.inquiry-board) .inquiry-empty {
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--setup-muted);
}

.app-frame:has(.inquiry-board) .inquiry-item {
  border-color: var(--setup-line);
  border-radius: 4px;
  background: #FFFFFF;
}

.app-frame:has(.inquiry-board) .inquiry-comments {
  border-top-color: var(--setup-line-soft);
}

.app-frame:has(.inquiry-board) .inquiry-comment {
  border-left-color: var(--setup-frame);
  border-radius: 4px;
  background: var(--setup-muted-panel);
}

.app-frame:has(.inquiry-board) .inquiry-item h3 {
  color: var(--setup-ink);
}

.app-frame:has(.inquiry-board) .inquiry-item p,
.app-frame:has(.inquiry-board) .inquiry-item-meta span,
.app-frame:has(.inquiry-board) .inquiry-item-meta time,
.app-frame:has(.inquiry-board) .inquiry-comment-meta strong,
.app-frame:has(.inquiry-board) .inquiry-comment-meta time,
.app-frame:has(.inquiry-board) .inquiry-submit-row > span,
.app-frame:has(.inquiry-board) .inquiry-comment-submit-row span {
  color: var(--setup-muted);
}

@media (max-width: 900px) {
  .app-frame:has(.inquiry-board) .inquiry-board-content {
    width: 100%;
  }

  .app-frame:has(.inquiry-board) .inquiry-intro,
  .app-frame:has(.inquiry-board) .inquiry-composer,
  .app-frame:has(.inquiry-board) .inquiry-list-panel {
    padding: 9px;
  }

  .inquiry-intro-actions {
    justify-content: stretch;
  }

  .app-frame:has(.inquiry-board) .inquiry-home-link,
  .app-frame:has(.inquiry-board) .inquiry-mail-link {
    flex: 1 1 150px;
  }
}

/* Battle analysis neutral compact refinements */
.app-frame:has(.battle-dashboard) {
  --battle-frame: #3D3D3D;
  --battle-frame-dark: #141414;
  --battle-line: #B8B8B8;
  --battle-line-soft: #D3D3D3;
  --battle-panel: #FAFAFA;
  --battle-muted-panel: #F1F2F3;
  --battle-ink: #111111;
  --battle-muted: #5C5C5C;
  --battle-gold: #FFCA1A;
  --battle-gold-soft: #FBF7E6;
  --accent: var(--battle-frame);
  --accent-strong: var(--battle-frame-dark);
  --selection: var(--battle-frame);
  --selection-soft: var(--battle-gold-soft);
  --selection-ring: rgba(20, 20, 20, 0.14);
  --hover-bg: #F4F4F4;
  --hover-border: var(--battle-frame-dark);
  background: #ECEFF2;
}

.app-frame:has(.battle-dashboard) .app-main {
  padding: 10px 12px 0;
}

.app-frame:has(.battle-dashboard) .page-title h1 {
  color: var(--battle-ink);
  font-size: 21px;
}

.app-frame:has(.battle-dashboard) .page-actions .action-button,
.app-frame:has(.battle-dashboard) .battle-dashboard-controls button,
.app-frame:has(.battle-dashboard) .battle-dashboard button,
.app-frame:has(.battle-dashboard) .battle-dashboard input,
.app-frame:has(.battle-dashboard) .battle-dashboard .dropdown-trigger {
  border-color: var(--battle-frame);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--battle-ink);
  box-shadow: none;
}

.app-frame:has(.battle-dashboard) .page-actions .action-button:hover,
.app-frame:has(.battle-dashboard) .battle-dashboard-controls button:hover,
.app-frame:has(.battle-dashboard) .battle-dashboard button:hover,
.app-frame:has(.battle-dashboard) .battle-dashboard .dropdown-trigger:hover {
  border-color: var(--battle-frame-dark);
  background: var(--battle-gold-soft);
  color: var(--battle-ink);
}

.app-frame:has(.battle-dashboard) .page-actions .action-button:focus-visible,
.app-frame:has(.battle-dashboard) .battle-dashboard-controls button:focus-visible,
.app-frame:has(.battle-dashboard) .battle-dashboard button:focus-visible,
.app-frame:has(.battle-dashboard) .battle-dashboard input:focus,
.app-frame:has(.battle-dashboard) .battle-dashboard .dropdown-trigger:focus-visible {
  outline: 2px solid var(--battle-gold);
  outline-offset: 1px;
  box-shadow: none;
}

.app-frame:has(.battle-dashboard) .page-actions .action-button {
  min-height: 34px;
  padding: 5px 12px;
  font-size: 14px;
}

.app-frame:has(.battle-dashboard) .page-actions .button-icon {
  width: 22px;
  height: 22px;
  border: 1px solid #B8B8B8;
  border-radius: 3px;
  background: #F3F3F3;
  color: var(--battle-frame-dark);
  font-size: 13px;
}

.battle-dashboard-content {
  width: min(1880px, 100%);
  margin-inline: auto;
}

.battle-context-topbar {
  border-bottom: 2px solid #303338;
  background: #F7F7F7;
  box-shadow: none;
  padding: 7px 12px;
}

.battle-dashboard-controls {
  width: min(1880px, 100%);
  gap: 12px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
}

.battle-control-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 38px;
}

.battle-control-label {
  color: var(--battle-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.battle-dashboard-controls .segmented {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid var(--battle-line);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 3px;
  box-shadow: none;
}

.battle-dashboard-controls .segmented button {
  white-space: nowrap;
  height: 30px;
  min-height: 30px;
  border-radius: 3px;
  font-size: 13px;
  padding: 4px 9px;
}

.battle-dashboard-controls .segmented button.active,
.battle-dashboard-controls .segmented button[aria-pressed="true"] {
  border-color: var(--battle-frame-dark);
  background: #303338;
  color: #FFFFFF;
}

.battle-dashboard-controls .weather-button {
  width: 36px;
  min-width: 36px;
  padding: 4px;
}

.battle-dashboard-controls .weather-button svg {
  width: 21px;
  height: 21px;
}

.battle-dashboard-controls .battle-reset-button {
  min-height: 34px;
  min-width: 92px;
  padding: 5px 10px;
  font-size: 14px;
  margin-bottom: 0;
}

.battle-dashboard-controls .battle-reset-button .button-icon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #F1F1F1;
  color: var(--battle-frame-dark);
}

.battle-dashboard {
  grid-template-columns: minmax(206px, 220px) minmax(0, 1fr) minmax(310px, 340px);
  gap: 10px;
  padding-bottom: calc(var(--topbar-height, 52px) + 28px);
}

.battle-dashboard-sidebar,
.battle-dashboard-opponent-sidebar {
  gap: 10px;
}

.battle-dashboard-opponent-sidebar {
  top: calc(var(--topbar-height, 52px) + 10px);
  max-height: calc(100vh - var(--topbar-height, 52px) - 20px);
}

.battle-switch-sidebar-panel {
  top: calc(var(--topbar-height, 52px) + 10px);
}

.battle-switch-sidebar-panel.is-damage-preview {
  top: calc(var(--topbar-height, 52px) + 28px);
}

.battle-dashboard-main,
.battle-dashboard-top-grid,
.battle-dashboard-bottom-grid,
.battle-dashboard-log-grid {
  gap: 10px;
}

.battle-dashboard-top-grid,
.battle-dashboard-bottom-grid {
  grid-template-columns: repeat(2, minmax(270px, 1fr));
}

.battle-dashboard-panel {
  gap: 10px;
  border: 2px solid var(--battle-frame);
  border-radius: 4px;
  background: var(--battle-panel);
  box-shadow: none;
  padding: 10px;
}

.battle-dashboard-panel-head,
.battle-subhead {
  gap: 8px;
}

.battle-dashboard-panel-head > div {
  gap: 2px;
}

.battle-panel-title-row {
  gap: 7px;
}

.battle-dashboard-panel-head h2,
.battle-my-active-panel .battle-dashboard-panel-head h2,
.battle-opponent-analysis-panel .battle-dashboard-panel-head h2 {
  color: var(--battle-ink);
  font-size: 18px;
  font-weight: 800;
}

.battle-dashboard-panel-head p,
.battle-subhead span,
.battle-subhead small,
.battle-move-panel-head small {
  color: var(--battle-muted);
  font-size: 13px;
}

.battle-subhead strong {
  color: var(--battle-ink);
  font-size: 15px;
}

.app-frame:has(.battle-dashboard) .chip,
.app-frame:has(.battle-dashboard) .type,
.app-frame:has(.battle-dashboard) .type-pill,
.battle-fainted-badge,
.battle-sidebar-pill,
.battle-speed-relation {
  border-radius: 3px;
}

.app-frame:has(.battle-dashboard) .chip {
  min-height: 24px;
  border: 1px solid var(--battle-line);
  background: #F3F3F3;
  color: var(--battle-ink);
  padding: 2px 7px;
  font-size: 12px;
}

.app-frame:has(.battle-dashboard) .type-list {
  gap: 5px;
}

.app-frame:has(.battle-dashboard) .type,
.app-frame:has(.battle-dashboard) .type-pill {
  min-width: 34px;
  min-height: 21px;
  justify-content: center;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.1;
}

html[lang="ja"] .app-frame:has(.battle-dashboard) .type,
html[lang="ja"] .app-frame:has(.battle-dashboard) .type-pill {
  min-height: 24px;
  padding: 3px 7px 2px;
  line-height: 1.25;
}

.battle-damage-help {
  width: 20px;
  height: 20px;
  border: 1px solid var(--battle-line);
  border-radius: 3px;
  background: #F3F3F3;
  color: var(--battle-ink);
  font-size: 12px;
}

.battle-damage-help-tooltip {
  border: 2px solid var(--battle-frame);
  border-radius: 4px;
  box-shadow: none;
}

.battle-sidebar-list,
.battle-opponent-switch-list {
  gap: 6px;
}

.battle-dashboard-opponent-sidebar .battle-dashboard-panel {
  gap: 8px;
  border-radius: 4px;
  padding: 9px;
}

.battle-dashboard-opponent-sidebar .battle-dashboard-panel-head h2 {
  font-size: 18px;
}

.battle-sidebar-card,
.battle-dashboard-opponent-sidebar .battle-sidebar-card {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  min-height: 84px;
  border: 1px solid var(--battle-line);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 7px;
  box-shadow: none;
}

.battle-sidebar-card:hover,
.battle-sidebar-card.active,
.battle-sidebar-card.recommended {
  border-color: var(--battle-frame-dark);
  background: var(--battle-gold-soft);
  box-shadow: none;
}

.battle-sidebar-card.danger,
.battle-candidate-card.is-fainted,
.battle-opponent-candidate.is-fainted,
.battle-sidebar-card.is-fainted,
.switch-in-candidate-card.is-fainted {
  background: #F1F2F3;
}

.battle-sidebar-card img,
.battle-dashboard-opponent-sidebar .battle-sidebar-card img {
  width: 54px;
  height: 54px;
  image-rendering: pixelated;
}

.battle-sidebar-pill,
.battle-dashboard-opponent-sidebar .battle-sidebar-pill {
  top: 6px;
  left: 6px;
  min-width: 24px;
  min-height: 22px;
  border: 1px solid var(--battle-line);
  background: #F3F3F3;
  color: var(--battle-ink);
  padding: 3px 6px;
  font-size: 11px;
}

.battle-sidebar-copy,
.battle-sidebar-title {
  gap: 4px;
}

.battle-sidebar-title strong {
  color: var(--battle-ink);
  font-size: 15px;
}

.battle-opponent-switch-panel .battle-sidebar-title {
  align-items: start;
}

.battle-opponent-switch-panel .battle-sidebar-name-types {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  align-items: start;
}

.battle-opponent-switch-panel .battle-sidebar-title strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: normal;
  line-height: 1.15;
}

.battle-opponent-switch-panel .battle-sidebar-name-types .type-list {
  flex-wrap: wrap;
}

.battle-dashboard-opponent-sidebar .battle-sidebar-copy small,
.battle-sidebar-copy small {
  color: var(--battle-muted);
  font-size: 12px;
  line-height: 1.3;
}

.battle-speed-relation,
.battle-dashboard-opponent-sidebar .battle-speed-relation {
  border-color: var(--battle-line);
  background: #F3F3F3;
  color: var(--battle-muted);
  padding: 4px 7px;
  font-size: 11px;
}

.battle-speed-relation.tie {
  border-color: #9C7D1E;
  background: var(--battle-gold-soft);
  color: #3A2E00;
}

.battle-speed-relation.faster,
.battle-dashboard-opponent-sidebar .battle-speed-relation.faster {
  border-color: #D59A9A;
  background: #FFF1F1;
  color: #8B2D2D;
}

.battle-speed-relation.slower,
.battle-dashboard-opponent-sidebar .battle-speed-relation.slower {
  border-color: #93BFA0;
  background: #EAF7EF;
  color: #2F6B3E;
}

.battle-switch-sidebar-panel .battle-sidebar-list.is-damage-preview {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card {
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  gap: 6px;
  padding: 5px 7px;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .battle-sidebar-pill {
  display: none;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .battle-sidebar-copy {
  gap: 3px;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .battle-sidebar-title {
  grid-template-columns: minmax(0, 1fr);
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .battle-sidebar-name-types {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .battle-sidebar-name-types strong {
  flex: 0 1 auto;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .type-list {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .type,
.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .type-pill {
  min-width: 28px;
  min-height: 18px;
  padding: 1px 4px;
  font-size: 10px;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .battle-compact-hp {
  gap: 4px;
}

.battle-switch-sidebar-panel .battle-sidebar-damage-preview-card .battle-sidebar-damage-line {
  display: block;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-opponent-switch-panel .battle-opponent-switch-list.is-damage-preview {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  gap: 7px;
  padding: 6px 8px;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .battle-sidebar-pill {
  display: none;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .battle-sidebar-copy {
  gap: 3px;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .battle-sidebar-title {
  grid-template-columns: minmax(0, 1fr);
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .battle-sidebar-name-types {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .battle-sidebar-name-types strong {
  flex: 0 1 auto;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .type-list {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .type,
.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .type-pill {
  min-width: 30px;
  min-height: 19px;
  padding: 1px 5px;
  font-size: 10px;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .battle-compact-hp {
  gap: 5px;
}

.battle-opponent-switch-panel .battle-sidebar-damage-preview-card .battle-sidebar-damage-line {
  font-size: 11px;
  line-height: 1.2;
}

.battle-opponent-current-speed {
  border-color: var(--battle-line);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 7px 8px;
}

.battle-compact-hp > span,
.battle-speed-bars i {
  height: 8px;
  border-radius: 0;
  background: #E2E3E5;
}

.battle-compact-hp b,
.battle-speed-bars i b {
  border-radius: 0;
  background: #5B8062;
}

.app-frame:has(.battle-dashboard) .hp-bar {
  border-color: var(--battle-line);
  border-radius: 0;
  background: #E2E3E5;
  box-shadow: none;
}

.app-frame:has(.battle-dashboard) .hp-fill,
.app-frame:has(.battle-dashboard) .hp-fill.hp-healthy,
.app-frame:has(.battle-dashboard) .hp-fill.hp-warning,
.app-frame:has(.battle-dashboard) .hp-fill.hp-danger,
.app-frame:has(.battle-dashboard) .hp-damage-preview {
  border-radius: 0;
  background: #5B8062;
}

.battle-pokemon-heading,
.battle-active-pokemon-layout {
  gap: 8px;
}

.battle-pokemon-title-types {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.battle-pokemon-heading.has-opponent-form-toggle,
.battle-pokemon-heading.has-inline-form-toggle {
  position: relative;
  display: block;
  padding-right: min(340px, 48%);
}

.battle-pokemon-heading.has-opponent-form-toggle .pokemon-form-toggle.battle,
.battle-pokemon-heading.has-inline-form-toggle .pokemon-form-toggle.battle {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-right: 8px;
  z-index: 1;
}

@media (max-width: 640px) {
  .battle-pokemon-heading.has-opponent-form-toggle,
  .battle-pokemon-heading.has-inline-form-toggle {
    display: grid;
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .battle-pokemon-heading.has-opponent-form-toggle .pokemon-form-toggle.battle,
  .battle-pokemon-heading.has-inline-form-toggle .pokemon-form-toggle.battle {
    position: static;
    justify-self: end;
  }
}

.battle-pokemon-heading h3,
.battle-my-active-panel .battle-pokemon-heading h3,
.battle-opponent-analysis-panel .battle-pokemon-heading h3 {
  color: var(--battle-ink);
  font-size: 20px;
  font-weight: 800;
}

.battle-active-pokemon-layout > img {
  width: 88px;
  height: 88px;
  image-rendering: pixelated;
}

.battle-identity-grid,
.battle-detail-grid {
  gap: 7px;
}

.battle-identity-field,
.battle-detail-grid span {
  gap: 4px;
  border-color: var(--battle-line);
  border-radius: 4px;
  background: #F4F4F4;
  padding: 7px;
}

.battle-identity-field > span,
.battle-detail-grid small {
  color: var(--battle-muted);
  font-size: 13px;
}

.battle-identity-field input,
.battle-identity-field .dropdown-trigger {
  height: 37px;
  min-height: 37px;
  border-color: var(--battle-line);
  border-radius: 4px;
  font-size: 14px;
}

.app-frame:has(.battle-dashboard) .battle-identity-field .item-input-wrap.has-thumb input {
  padding-left: 42px;
  text-overflow: ellipsis;
}

.app-frame:has(.battle-dashboard) .battle-identity-field .selected-item-thumb {
  left: 10px;
  width: 22px;
  height: 22px;
}

.battle-current-stat-toggle,
.battle-rank-toggle,
.battle-current-stat-body,
.battle-status-row,
.battle-type-override-row,
.battle-speed-card,
.battle-full-speed-my,
.battle-full-speed-opponents,
.battle-full-speed-chip,
.battle-full-speed-empty,
.battle-recent-event-list {
  border-color: var(--battle-line);
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
}

.battle-current-stat-toggle {
  min-height: 36px;
  padding: 6px 34px 6px 8px;
}

.battle-current-stat-toggle span,
.battle-current-stat-toggle strong,
.battle-rank-toggle span {
  font-size: 13px;
}

.battle-current-stat-strip {
  gap: 4px;
}

.battle-current-stat-strip span {
  border-color: var(--battle-line);
  border-radius: 3px;
  background: #FFFFFF;
  padding: 4px 3px;
}

.battle-current-stat-strip small,
.battle-current-stat-strip em {
  font-size: 10px;
}

.battle-current-stat-strip strong {
  font-size: 13px;
}

.battle-current-point-row {
  border-color: var(--battle-line);
  border-radius: 3px;
  background: #F6F6F6;
}

.battle-status-row,
.battle-type-override-row {
  padding: 6px 7px;
}

.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle,
.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle-stage {
  border-color: var(--battle-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--battle-muted);
}

.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle > span:first-child,
.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle-stage > span:first-child {
  color: var(--battle-muted);
  font-size: 12px;
}

.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle button,
.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle-stage button {
  min-height: 28px;
  border-color: var(--battle-line);
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--battle-ink);
}

.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle button.active,
.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle button[aria-pressed="true"],
.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle-stage button.active,
.app-frame:has(.battle-dashboard) .pokemon-form-toggle.battle-stage button[aria-pressed="true"] {
  border-color: #9C7D1E;
  background: var(--battle-gold-soft);
  color: #3A2E00;
}

.battle-status-label {
  color: var(--battle-muted);
  font-size: 13px;
}

.battle-status-options button {
  min-height: 28px;
  border-color: var(--battle-line);
  border-radius: 3px;
  background: #FFFFFF;
  font-size: 12px;
}

.battle-type-override-options .dropdown-trigger {
  min-height: 28px;
  border-color: var(--battle-line);
  border-radius: 3px;
  background: #FFFFFF;
  font-size: 12px;
}

.battle-pokemon-heading .battle-type-override-row {
  border: 0;
  background: transparent;
  padding: 0;
}

.battle-pokemon-heading .battle-type-override-options .dropdown-trigger {
  min-height: 24px;
  height: 24px;
}

.battle-status-options button.active {
  border-color: #9C7D1E;
  background: var(--battle-gold-soft);
  color: #3A2E00;
}

.battle-status-options button.none.active,
.battle-status-options button.none.active:hover,
.battle-status-options button.none.active:focus-visible {
  border-color: var(--battle-frame-dark);
  background: #303338;
  color: #FFFFFF;
}

.battle-status-options button.poison.active,
.battle-status-options button.poison.active:hover,
.battle-status-options button.poison.active:focus-visible {
  border-color: var(--type-poison-border);
  background: var(--type-poison-bg);
  color: var(--type-poison-text);
}

.battle-status-options button.paralysis.active,
.battle-status-options button.paralysis.active:hover,
.battle-status-options button.paralysis.active:focus-visible {
  border-color: var(--type-electric-border);
  background: var(--type-electric-bg);
  color: var(--type-electric-text);
}

.battle-status-options button.burn.active,
.battle-status-options button.burn.active:hover,
.battle-status-options button.burn.active:focus-visible {
  border-color: var(--type-fire-border);
  background: var(--type-fire-bg);
  color: var(--type-fire-text);
}

.battle-status-options button.freeze.active,
.battle-status-options button.freeze.active:hover,
.battle-status-options button.freeze.active:focus-visible {
  border-color: var(--type-ice-border);
  background: var(--type-ice-bg);
  color: var(--type-ice-text);
}

.battle-status-options button.sleep.active,
.battle-status-options button.sleep.active:hover,
.battle-status-options button.sleep.active:focus-visible {
  border-color: var(--type-psychic-border);
  background: var(--type-psychic-bg);
  color: var(--type-psychic-text);
}

.battle-rank-toggle {
  min-height: 36px;
  padding-block: 6px;
}

.app-frame:has(.battle-dashboard) .battle-rank-arrow {
  right: 17px;
}

.battle-rank-editor.open .battle-rank-toggle,
.battle-current-stat-editor.open .battle-current-stat-toggle {
  border-color: var(--battle-frame-dark);
  background: var(--battle-gold-soft);
}

.battle-rank-reset-inline {
  min-height: 24px;
  border: 1px solid var(--battle-line);
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--battle-muted);
  padding: 4px 7px;
  font-size: 11px;
}

.battle-rank-reset-inline:not(:disabled):hover,
.battle-rank-reset-inline:not(:disabled):focus {
  border-color: var(--battle-frame-dark);
  background: var(--battle-gold-soft);
  color: var(--battle-ink);
}

.battle-rank-editor .stat-stage-group {
  border-color: var(--battle-line);
  border-radius: 4px;
}

.battle-rank-editor .stat-stage-control {
  grid-template-columns: 26px minmax(28px, 1fr) 26px;
}

.battle-active-moves-panel {
  gap: 6px;
  border-top-color: var(--battle-line);
  padding-top: 7px;
}

.battle-my-active-panel .battle-my-move-grid,
.battle-opponent-move-grid {
  gap: 7px;
}

.battle-move-card {
  min-height: 82px;
  border-width: 1px;
  border-radius: 4px;
  padding: 6px;
  box-shadow: none;
}

.battle-move-card:hover,
.battle-move-card.active,
.battle-move-card.previewing {
  border-color: var(--move-card-ink);
  box-shadow: none;
}

.battle-move-card.is-pinned {
  border-width: 2px;
  border-color: var(--move-card-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--move-card-ink) 55%, transparent), 0 0 0 2px color-mix(in srgb, var(--move-card-ink) 18%, transparent);
}

.battle-move-card-head {
  gap: 6px;
  min-height: 23px;
}

.battle-move-card-head > span:first-child {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--move-card-ink) 38%, #fff);
  border-radius: 3px;
  background: color-mix(in srgb, var(--move-card-bg) 58%, #fff);
  font-size: 12px;
}

.battle-move-card.active .battle-move-card-head > span:first-child,
.battle-move-card.previewing .battle-move-card-head > span:first-child {
  border-color: var(--move-card-ink);
  background: var(--move-card-ink);
  color: #FFFFFF;
}

.battle-move-card-head strong {
  font-size: 13px;
}

.battle-move-stat-apply,
.battle-move-rage-fist-step {
  min-height: 21px;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 10px;
}

.battle-move-current-damage {
  border-radius: 3px;
}

.battle-move-current-damage small {
  font-size: 11px;
}

.battle-move-current-damage strong {
  font-size: 11px;
}

.battle-move-damage-cell {
  padding: 3px 5px;
}

.battle-speed-card {
  gap: 8px;
  padding: 10px;
}

.battle-speed-card > span,
.battle-speed-card small {
  color: var(--battle-muted);
  font-size: 13px;
}

.battle-speed-card > strong {
  color: var(--battle-frame-dark);
  font-size: 24px;
}

.battle-speed-table-toggle {
  min-height: 27px;
  border-radius: 3px;
  font-size: 12px;
}

.battle-recent-events-panel {
  padding-block: 10px;
}

.battle-recent-event-list {
  gap: 7px;
  padding: 9px;
}

.battle-recent-event-row strong {
  border-radius: 3px;
  background: #F3F3F3;
  color: var(--battle-muted);
}

.battle-recent-event-row span {
  font-size: 14px;
}

.battle-opponent-add-search {
  border-color: var(--battle-line);
  border-radius: 4px;
  background: #F4F4F4;
  padding: 9px;
}

.battle-popular-opponent-card {
  border-color: var(--battle-line);
  border-radius: 4px;
}

.battle-popular-rank {
  border: 1px solid var(--battle-line);
  border-radius: 3px;
  background: #F3F3F3;
  color: var(--battle-ink);
  padding: 2px 5px;
}

.battle-popular-opponent-card:first-child .battle-popular-rank {
  border-color: #9C7D1E;
  background: var(--battle-gold-soft);
  color: #2C2300;
}

.battle-opponent-remove-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-color: var(--battle-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: #8B2D2D;
}

.battle-opponent-active-remove-button,
.battle-faint-record-button {
  min-height: 30px;
  border-color: var(--battle-line);
  border-radius: 4px;
  background: #FFFFFF;
  color: #8B2D2D;
  font-size: 12px;
}

.battle-fainted-badge {
  border-color: #AFAFAF;
  background: #F1F2F3;
  color: #7B3030;
}

.battle-speed-dialog,
.battle-action-detail-panel.battle-dashboard-panel {
  border: 2px solid var(--battle-frame);
  border-radius: 4px;
  box-shadow: none;
}

@media (min-width: 1181px) {
  .battle-active-pokemon-layout .battle-pokemon-title-types {
    display: flex;
    align-items: center;
  }

  .battle-active-pokemon-layout .battle-pokemon-heading,
  .battle-active-pokemon-layout .battle-pokemon-title-types {
    flex-wrap: wrap;
    gap: 6px 9px;
  }
}

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

  .battle-dashboard-sidebar,
  .battle-dashboard-opponent-sidebar,
  .battle-switch-sidebar-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .battle-sidebar-list,
  .battle-opponent-switch-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }

  .battle-dashboard-top-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }

  .battle-dashboard-bottom-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
  }
}

@media (max-width: 1180px) {
  .battle-dashboard-top-grid,
  .battle-dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }

  .battle-dashboard-panel {
    padding: 10px;
  }

  .battle-dashboard-bottom-grid > .battle-my-extra-moves-panel,
  .battle-dashboard-bottom-grid > .battle-opponent-extra-moves-panel {
    grid-column: auto;
  }

  .battle-sidebar-list,
  .battle-opponent-move-grid,
  .battle-opponent-switch-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .team-parser-preview-grid,
  .team-image-help-examples,
  .team-parser-slot-grid,
  .team-parser-move-grid,
  .team-parser-stats-grid {
    grid-template-columns: 1fr;
  }

  .team-parser-head,
  .team-parser-result-head,
  .team-parser-upload-row,
  .team-parser-status-row {
    align-items: stretch;
    flex-direction: column;
  }

  .team-parser-actions,
  .team-parser-head .inline-actions,
  .team-parser-result-head .inline-actions {
    align-items: stretch;
    width: 100%;
  }

  .team-parser-action-buttons {
    width: 100%;
  }

  .team-parser-action-buttons > button {
    flex: 1 1 160px;
    min-height: 44px;
  }

  .team-parser-head .inline-actions > *,
  .team-parser-result-head .inline-actions > * {
    flex: 1 1 150px;
  }

  .app-frame:has(.battle-dashboard) .app-main {
    padding: 8px 8px 72px;
  }

  .battle-context-topbar {
    padding: 6px 8px;
  }

  .battle-dashboard-controls {
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .battle-control-group {
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
  }

  .battle-sidebar-list,
  .battle-opponent-switch-list,
  .battle-opponent-move-grid,
  .battle-my-active-panel .battle-my-move-grid,
  .battle-my-move-grid,
  .battle-detail-target-grid,
  .battle-identity-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .battle-dashboard-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .battle-compact-core,
  .battle-compact-detail-main {
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  .battle-compact-core {
    order: 1;
  }

  .battle-compact-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    min-width: 0;
  }

  .battle-compact-left-column {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
  }

  .battle-compact-detail-main {
    order: 2;
  }

  .battle-dashboard-compact > .battle-dashboard-sidebar {
    order: 3;
  }

  .battle-dashboard-compact > .battle-dashboard-opponent-sidebar {
    order: 4;
  }

  .battle-compact-core > .battle-speed-panel,
  .battle-compact-top-grid > .battle-speed-panel {
    padding: 10px;
  }

  .battle-compact-switch-panel {
    width: 100%;
  }

  .battle-compact-switch-panel .battle-opponent-switch-list {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
  }

  .battle-compact-switch-panel .battle-sidebar-card {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 72px;
    padding: 6px;
  }

  .battle-compact-switch-panel .battle-sidebar-card img {
    width: 44px;
    height: 44px;
  }

  .battle-compact-switch-panel .battle-sidebar-pill {
    top: 5px;
    left: 5px;
  }

  .battle-compact-switch-panel .battle-sidebar-copy small {
    -webkit-line-clamp: 1;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-opponent-switch-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-sidebar-card {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 68px;
    gap: 6px;
    padding: 5px;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-sidebar-card img {
    width: 36px;
    height: 36px;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-sidebar-pill {
    top: 4px;
    left: 4px;
    font-size: 9px;
    padding: 2px 5px;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-sidebar-copy,
  .battle-compact-top-grid .battle-compact-switch-panel .battle-sidebar-title {
    gap: 3px;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-sidebar-copy small {
    font-size: 10px;
    line-height: 1.2;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-opponent-speed-line {
    display: none;
  }

  .battle-compact-top-grid .battle-compact-switch-panel .battle-speed-relation:not(.battle-compact-card-speed) {
    display: none;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-opponent-switch-list,
  .battle-compact-top-grid .battle-compact-roster-panel .battle-sidebar-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-compact-roster-card {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    border-radius: 5px;
    padding: 6px;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-compact-roster-card.is-current-my,
  .battle-compact-top-grid .battle-compact-roster-panel .battle-compact-roster-card.is-current-opponent {
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--selection-soft) 46%, var(--surface));
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-compact-roster-card img {
    width: 36px;
    height: 36px;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-sidebar-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-sidebar-title strong {
    display: block;
    font-size: 14px;
    line-height: 1.15;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-sidebar-copy {
    gap: 5px;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-sidebar-pill,
  .battle-compact-top-grid .battle-compact-roster-panel .type-list,
  .battle-compact-top-grid .battle-compact-roster-panel .battle-sidebar-title-tools,
  .battle-compact-top-grid .battle-compact-roster-panel .battle-opponent-remove-button {
    display: none;
  }

  .battle-compact-top-grid .battle-compact-roster-panel .battle-compact-card-speed {
    display: inline-flex;
    max-width: 86px;
    justify-content: center;
    overflow: hidden;
    padding: 3px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .battle-compact-speed-mini-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    align-content: center;
    min-height: 54px;
    min-width: 0;
    border: 2px solid var(--battle-frame);
    border-radius: 4px;
    background: var(--battle-panel);
    color: var(--battle-ink);
    padding: 6px 8px;
    text-align: left;
  }

  .battle-compact-speed-mini-card:hover,
  .battle-compact-speed-mini-card:focus {
    border-color: var(--battle-frame-dark);
    background: var(--battle-gold-soft);
  }

  .battle-compact-speed-mini-card > span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .battle-compact-speed-mini-card strong,
  .battle-compact-speed-mini-card b {
    color: var(--battle-ink);
    font-size: 14px;
    line-height: 1.1;
  }

  .battle-compact-speed-mini-card b {
    align-self: start;
    border: 1px solid var(--battle-line);
    border-radius: 3px;
    background: #F3F3F3;
    padding: 3px 5px;
    font-weight: 850;
    white-space: nowrap;
  }

  .battle-compact-speed-mini-card.opponent b,
  .battle-compact-speed-mini-card.warning b {
    border-color: #D59A9A;
    background: #FFF1F1;
    color: #8B2D2D;
  }

  .battle-compact-speed-mini-card.mine b {
    border-color: #93BFA0;
    background: #EAF7EF;
    color: #2F6B3E;
  }

  .battle-compact-speed-mini-card.tie b {
    border-color: #9C7D1E;
    background: var(--battle-gold-soft);
    color: #3A2E00;
  }

  .battle-compact-speed-mini-card small {
    overflow: hidden;
    color: var(--battle-muted);
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .battle-compact-speed-mini-card > small {
    grid-column: 1 / -1;
  }

  .battle-compact-hp-summary {
    display: none;
  }

  .battle-compact-damage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
  }

  .battle-compact-damage-grid > .battle-active-moves-panel {
    gap: 7px;
    min-width: 0;
    border: 2px solid var(--battle-frame);
    border-radius: 4px;
    background: var(--battle-panel);
    padding: 10px;
  }

  .battle-compact-detail-main .battle-dashboard-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-compact-detail-main .battle-dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .battle-dashboard-compact {
    gap: 8px;
  }

  .battle-compact-core,
  .battle-compact-detail-main {
    gap: 8px;
  }

  .battle-compact-core > .battle-speed-panel {
    gap: 8px;
    padding: 8px;
  }

  .battle-compact-core .battle-dashboard-panel-head h2 {
    font-size: 17px;
  }

  .battle-compact-core .battle-speed-card {
    gap: 6px;
    padding: 8px;
  }

  .battle-compact-core .battle-speed-card > strong {
    font-size: 20px;
  }

  .battle-compact-core .battle-speed-card > span,
  .battle-compact-core .battle-speed-card small {
    font-size: 12px;
  }

  .battle-compact-hp-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
  }

  .battle-compact-hp-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid var(--battle-line);
    border-radius: 4px;
    background: #FFFFFF;
    padding: 7px;
  }

  .battle-compact-hp-card > span {
    color: var(--battle-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  .battle-compact-hp-card > strong {
    overflow: hidden;
    color: var(--battle-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .battle-compact-damage-grid,
  .battle-compact-detail-main .battle-dashboard-top-grid {
    grid-template-columns: 1fr;
  }

  .battle-compact-damage-grid > .battle-active-moves-panel {
    gap: 6px;
    padding: 8px;
  }

  .battle-compact-damage-grid .battle-my-move-grid,
  .battle-compact-damage-grid .battle-opponent-move-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .battle-compact-damage-grid .battle-move-card {
    min-height: 70px;
    padding: 5px;
  }

  .battle-compact-damage-grid .battle-move-card-head {
    gap: 4px;
    min-height: 20px;
  }

  .battle-compact-damage-grid .battle-move-card-head > span:first-child {
    width: 21px;
    height: 21px;
    font-size: 11px;
  }

  .battle-compact-damage-grid .battle-move-card-head strong {
    font-size: 12px;
  }

  .battle-compact-damage-grid .battle-move-stat-apply {
    max-width: 56px;
    overflow: hidden;
    padding-inline: 4px;
    text-overflow: ellipsis;
  }

  .battle-compact-damage-grid .battle-move-current-damage small,
  .battle-compact-damage-grid .battle-move-current-damage strong {
    font-size: 10px;
  }

  .battle-compact-damage-grid .battle-move-damage-cell {
    padding: 2px 3px;
  }

  .battle-compact-move-detail {
    gap: 8px;
    padding: 8px;
  }

  .battle-compact-detail-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  .battle-compact-detail-metrics span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid var(--battle-line);
    border-radius: 4px;
    background: #FFFFFF;
    padding: 6px;
  }

  .battle-compact-detail-metrics small {
    color: var(--battle-muted);
    font-size: 11px;
    font-weight: 800;
  }

  .battle-compact-detail-metrics strong {
    overflow: hidden;
    color: var(--battle-ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.guide-battle-frame {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(238, 240, 247, 0.96)),
    var(--bg);
}

.guide-battle-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(21, 25, 37, 0.22);
}

.guide-battle-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(100%, 440px);
  padding: 10px;
  border: 2px solid var(--battle-frame);
  background: var(--battle-panel);
  box-shadow: 0 16px 40px rgba(21, 25, 37, 0.22);
}

.guide-battle-loading-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(21, 25, 37, 0.24);
}

.guide-battle-loading-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 280px);
  padding: 18px 16px;
  border: 2px solid var(--battle-frame);
  background: var(--battle-panel);
  color: var(--battle-ink);
  text-align: center;
  box-shadow: 0 16px 40px rgba(21, 25, 37, 0.22);
}

.guide-battle-loading-panel strong {
  font-size: var(--font-size-md);
  font-weight: 900;
}

.guide-battle-loading-panel small {
  color: var(--battle-muted);
  font-size: var(--font-size-xs);
  font-weight: 750;
}

.guide-battle-loading-spinner {
  width: 34px;
  height: 34px;
  border: 4px solid rgba(92, 122, 186, 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: guide-battle-spin 0.75s linear infinite;
}

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

.guide-battle-prompt .action-button,
.guide-battle-start-shortcut .action-button {
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  font-size: var(--font-size-sm);
  font-weight: 850;
  line-height: 1;
}

.guide-battle-start-shortcut {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 55;
  display: flex;
  padding: 6px;
  border: 2px solid var(--battle-frame);
  background: var(--battle-panel);
  box-shadow: 0 12px 28px rgba(21, 25, 37, 0.20);
}

@media (max-width: 720px) {
  .guide-battle-prompt {
    width: min(100%, 360px);
    flex-direction: column;
    align-items: stretch;
  }

  .guide-battle-prompt .action-button,
  .guide-battle-start-shortcut .action-button {
    width: 100%;
    justify-content: center;
  }

  .guide-battle-start-shortcut {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }
}

/* Unified topbar surface */
.app-frame .app-topbar {
  border-bottom: 1px solid #D3D3D3;
  background: #F7F7F7;
  box-shadow: none;
  backdrop-filter: none;
}

.app-frame .brand-button,
.app-frame .brand-button:hover,
.app-frame:has(.battle-setup-overview) .brand-button,
.app-frame:has(.battle-setup-overview) .brand-button:hover,
.app-frame:has(.roster-editor-screen) .brand-button,
.app-frame:has(.roster-editor-screen) .brand-button:hover {
  border-right: 1px solid #D3D3D3;
  background: #F7F7F7;
  color: #111111;
  box-shadow: none;
}

.app-frame .app-data-notice,
.app-frame:has(.battle-setup-overview) .app-data-notice,
.app-frame:has(.roster-editor-screen) .app-data-notice {
  border-right: 1px solid #D3D3D3;
  background: #F7F7F7;
  color: #5C5C5C;
}

.app-frame .page-header,
.app-frame:has(.battle-setup-overview) .page-header,
.app-frame:has(.roster-editor-screen) .page-header {
  background: #F7F7F7;
}

/* Keep the AppShell topbar rhythm identical across the main screens. */
.app-frame {
  --topbar-height: 52px;
  --topbar-control-height: 34px;
  --topbar-control-font-size: 13px;
  --topbar-control-font-weight: 760;
  --topbar-icon-size: 18px;
}

.app-frame .app-topbar,
.app-frame:has(.battle-setup-overview) .app-topbar,
.app-frame:has(.roster-editor-screen) .app-topbar,
.app-frame:has(.battle-dashboard) .app-topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  max-height: var(--topbar-height);
  overflow: hidden;
  font-size: var(--font-size-lg);
  line-height: 1.5;
}

.app-frame .brand-button,
.app-frame .app-data-notice,
.app-frame .page-header,
.app-frame:has(.battle-setup-overview) .brand-button,
.app-frame:has(.battle-setup-overview) .app-data-notice,
.app-frame:has(.battle-setup-overview) .page-header,
.app-frame:has(.roster-editor-screen) .brand-button,
.app-frame:has(.roster-editor-screen) .app-data-notice,
.app-frame:has(.roster-editor-screen) .page-header,
.app-frame:has(.battle-dashboard) .brand-button,
.app-frame:has(.battle-dashboard) .app-data-notice,
.app-frame:has(.battle-dashboard) .page-header {
  height: 100%;
  min-height: 0;
}

.app-frame .app-topbar .page-actions,
.app-frame:has(.battle-setup-overview) .app-topbar .page-actions,
.app-frame:has(.roster-editor-screen) .app-topbar .page-actions,
.app-frame:has(.battle-dashboard) .app-topbar .page-actions {
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.app-frame .app-topbar .page-actions::-webkit-scrollbar {
  display: none;
}

.app-frame .app-topbar .action-button,
.app-frame:has(.battle-setup-overview) .app-topbar .action-button,
.app-frame:has(.roster-editor-screen) .app-topbar .action-button,
.app-frame:has(.battle-dashboard) .app-topbar .page-actions .action-button {
  flex: 0 0 auto;
  min-width: 112px;
  min-height: var(--topbar-control-height);
  height: var(--topbar-control-height);
  gap: 7px;
  padding: 0 10px;
  font-size: var(--topbar-control-font-size);
  font-weight: var(--topbar-control-font-weight);
  line-height: 1;
}

.app-frame .app-topbar .action-button .button-icon,
.app-frame:has(.battle-setup-overview) .app-topbar .action-button .button-icon,
.app-frame:has(.roster-editor-screen) .app-topbar .action-button .button-icon,
.app-frame:has(.battle-dashboard) .app-topbar .page-actions .action-button .button-icon {
  position: static;
  display: inline-grid;
  width: var(--topbar-icon-size);
  height: var(--topbar-icon-size);
  overflow: visible;
  place-items: center;
  clip: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  white-space: normal;
}

.app-frame .app-topbar .theme-toggle,
.app-frame:has(.battle-setup-overview) .app-topbar .theme-toggle,
.app-frame:has(.roster-editor-screen) .app-topbar .theme-toggle,
.app-frame:has(.battle-dashboard) .app-topbar .page-actions .theme-toggle {
  flex: 0 0 auto;
  width: var(--topbar-control-height);
  min-width: var(--topbar-control-height);
  height: var(--topbar-control-height);
  min-height: var(--topbar-control-height);
  padding: 0;
  border-radius: var(--control-radius);
  font-size: 16px;
  line-height: 1;
}

.app-frame .app-topbar .language-toggle,
.app-frame:has(.battle-setup-overview) .app-topbar .language-toggle,
.app-frame:has(.roster-editor-screen) .app-topbar .language-toggle,
.app-frame:has(.battle-dashboard) .app-topbar .language-toggle {
  flex: 0 0 auto;
  min-height: var(--topbar-control-height);
  height: var(--topbar-control-height);
}

.app-frame .app-topbar .language-toggle button,
.app-frame:has(.battle-setup-overview) .app-topbar .language-toggle button,
.app-frame:has(.roster-editor-screen) .app-topbar .language-toggle button,
.app-frame:has(.battle-dashboard) .app-topbar .language-toggle button {
  min-height: calc(var(--topbar-control-height) - 2px);
  height: calc(var(--topbar-control-height) - 2px);
  padding: 0 8px;
  font-size: var(--topbar-control-font-size);
  font-weight: var(--topbar-control-font-weight);
  line-height: 1;
}

@media (max-width: 1180px) {
  .app-frame .app-topbar,
  .app-frame:has(.battle-setup-overview) .app-topbar,
  .app-frame:has(.roster-editor-screen) .app-topbar,
  .app-frame:has(.battle-dashboard) .app-topbar {
    grid-template-columns: 194px minmax(0, 1fr);
  }

  .app-frame .app-topbar > .app-data-notice,
  .app-frame:has(.battle-setup-overview) .app-topbar > .app-data-notice,
  .app-frame:has(.roster-editor-screen) .app-topbar > .app-data-notice,
  .app-frame:has(.battle-dashboard) .app-topbar > .app-data-notice {
    display: none;
  }
}

@media (max-width: 720px) {
  .app-frame {
    --topbar-height: 46px;
    --topbar-control-height: 30px;
    --topbar-control-font-size: 12px;
    --topbar-icon-size: 16px;
  }

  .app-frame .app-topbar .action-button,
  .app-frame:has(.battle-setup-overview) .app-topbar .action-button,
  .app-frame:has(.roster-editor-screen) .app-topbar .action-button,
  .app-frame:has(.battle-dashboard) .app-topbar .page-actions .action-button {
    min-width: 0;
    padding: 0 8px;
  }

  .app-frame .app-topbar .page-actions,
  .app-frame:has(.battle-setup-overview) .app-topbar .page-actions,
  .app-frame:has(.roster-editor-screen) .app-topbar .page-actions,
  .app-frame:has(.battle-dashboard) .app-topbar .page-actions {
    justify-content: flex-start;
  }

  .app-frame .app-topbar,
  .app-frame:has(.battle-setup-overview) .app-topbar,
  .app-frame:has(.roster-editor-screen) .app-topbar,
  .app-frame:has(.battle-dashboard) .app-topbar {
    grid-template-columns: 148px minmax(0, 1fr);
  }
}

.team-image-review-compact-thumb {
  display: none;
}

@media (max-width: 720px) {
  .team-image-review-content,
  .team-image-review-screen {
    gap: 8px;
  }

  .team-image-review-stepper {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  .team-image-review-stepper button {
    justify-content: center;
    min-height: 34px;
    padding: 4px 2px;
  }

  .team-image-review-stepper button strong {
    width: 24px;
    height: 24px;
  }

  .team-image-review-stepper button span {
    display: none;
  }

  .team-image-review-layout {
    gap: 8px;
  }

  .team-image-review-editor {
    order: 1;
    gap: 8px;
  }

  .team-image-review-left {
    order: 2;
    gap: 8px;
  }

  .team-parser-form-choices {
    gap: 8px;
    padding: 8px;
  }

  .team-parser-form-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .team-parser-form-choice {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px;
    min-height: 54px;
    padding: 6px;
  }

  .team-parser-form-choice-art {
    width: 38px;
    height: 38px;
  }

  .team-parser-form-choice-art img {
    width: 34px;
    height: 34px;
  }

  .team-parser-form-choice-copy strong {
    font-size: 12px;
  }

  .team-image-review-crops {
    gap: 6px;
    padding: 8px;
  }

  .team-image-review-crop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .team-image-review-crop-card {
    gap: 4px;
  }

  .team-image-review-crop-card > div {
    min-height: 54px;
    max-height: 78px;
  }

  .team-image-review-crop-card figcaption {
    font-size: 11px;
  }

  .team-image-review-compact-editor .team-image-review-compact-identity {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .team-image-review-compact-editor .roster-editor-art {
    display: none;
  }

  .team-image-review-compact-heading {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .team-image-review-compact-thumb {
    display: block;
    width: 48px;
    height: 48px;
    border: 1px solid var(--team-border, var(--border));
    border-radius: 6px;
    background: #F0F1F2;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .team-image-review-compact-heading-copy {
    min-width: 0;
  }

  .team-image-review-compact-editor .roster-editor-fields {
    gap: 8px;
    padding: 10px;
  }

  .team-image-review-compact-editor .roster-editor-name-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .team-image-review-compact-editor .roster-editor-name-row h2 {
    margin: 4px 0;
    font-size: 20px;
    line-height: 1.1;
  }

  .team-image-review-compact-editor .roster-editor-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .team-image-review-compact-editor .roster-name-field {
    grid-column: 1 / -1;
  }

  .team-image-review-compact-editor .roster-editor-form-grid .field > span {
    font-size: 11px;
  }

  .team-image-review-compact-editor .roster-editor-form-grid input:not([type="range"]),
  .team-image-review-compact-editor .roster-editor-form-grid .dropdown-trigger {
    height: 34px;
    min-height: 34px;
    font-size: 13px;
  }

  .team-image-review-compact-moves {
    gap: 7px;
    padding: 8px 10px;
  }

  .team-image-review-compact-moves .roster-move-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .team-image-review-compact-moves .roster-move-row {
    grid-template-columns: 20px minmax(0, 1fr) 24px;
    gap: 5px;
    min-height: 36px;
    padding: 4px 6px;
  }

  .team-image-review-compact-moves .move-row-tags {
    display: none;
  }

  .team-image-review-compact-moves .move-clear-ui {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
  }

  .team-image-review-compact-ev {
    gap: 7px;
    padding: 8px 10px 10px;
  }

  .team-image-review-compact-ev .roster-subsection-head {
    min-height: 0;
    gap: 6px;
    padding-left: 7px;
  }

  .team-image-review-compact-ev .roster-subsection-head h3 {
    font-size: 15px;
  }

  .team-image-review-compact-ev .inline-actions {
    gap: 6px;
  }

  .team-image-review-compact-ev .status-pill {
    padding: 2px 6px;
    font-size: 11px;
  }

  .team-image-review-compact-ev .roster-ev-reset-button {
    display: none;
  }

  .team-image-review-compact-ev .roster-ev-table {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    border: 0;
  }

  .team-image-review-compact-ev .roster-ev-cell {
    gap: 3px;
    min-height: 0;
    border-width: 1px;
    padding: 6px;
  }

  .team-image-review-compact-ev .roster-ev-label {
    font-size: 11px;
  }

  .team-image-review-compact-ev .roster-ev-cell > strong {
    font-size: 15px;
    line-height: 1.05;
  }

  .team-image-review-compact-ev .stat-nature-detail,
  .team-image-review-compact-ev .roster-ev-meter,
  .team-image-review-compact-ev .roster-ev-quick-actions,
  .team-image-review-compact-ev .roster-ev-cell > small {
    display: none;
  }

  .team-image-review-compact-ev .roster-ev-stepper {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .team-image-review-compact-ev .roster-ev-stepper button {
    display: none;
  }

  .team-image-review-compact-ev .roster-ev-stepper input {
    width: 100%;
    height: 32px;
    min-height: 32px;
    font-size: 16px;
    text-align: center;
  }

  .team-image-review-actions {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid var(--team-border, var(--border));
    border-radius: 6px;
    background: #FFFFFF;
    padding: 6px;
    z-index: 2;
  }

  .team-image-review-actions .compact-button,
  .team-image-review-actions .compact-danger {
    width: 100%;
    min-height: 38px;
  }
}

.opponent-type-search-dialog-backdrop,
.opponent-type-search-dialog-backdrop:hover,
.opponent-type-search-dialog-backdrop:focus,
.opponent-type-search-dialog-backdrop:focus-visible,
.battle-speed-dialog-backdrop,
.battle-speed-dialog-backdrop:hover,
.battle-speed-dialog-backdrop:focus,
.battle-speed-dialog-backdrop:focus-visible {
  border: 0;
  background: rgba(27, 35, 48, 0.22) !important;
  box-shadow: none;
  color: transparent;
  outline: 0;
}

img[src*="/static/sprites-dot/"] {
  image-rendering: auto;
}

img[src*="/static/sprites/"][src*="-mega"] {
  image-rendering: auto;
}

html[lang="ja"] {
  font-synthesis-weight: none;
}

html[lang="ja"] :is(
  p,
  small,
  label,
  input,
  select,
  textarea,
  button,
  .app-data-notice span,
  .site-disclaimer,
  .site-disclaimer *,
  .field > span,
  .roster-field-label,
  .roster-slot-card,
  .roster-slot-card *,
  .roster-move-row,
  .roster-move-row *,
  .point-card,
  .point-card *,
  .stat-card,
  .stat-card *,
  .battle-move-card,
  .battle-move-card *,
  .battle-sidebar-card,
  .battle-sidebar-card *,
  .switch-in-candidate-card,
  .switch-in-candidate-card *,
  .speed-row,
  .speed-row *
) {
  font-weight: 400;
}

html[lang="ja"] :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  b,
  strong,
  .brand-name,
  .panel-head h2,
  .roster-slot-panel h2,
  .roster-editor-heading h2,
  .roster-subsection-head h3,
  .battle-dashboard-panel-head h2,
  .battle-subhead strong,
  .move-editor-panel h3,
  .setup-section-title,
  .speed-panel h2
) {
  font-weight: 400;
}

html[lang="ja"] :is(
  .type,
  .type-pill,
  .chip.active,
  .order-badge,
  .move-index,
  .language-toggle button.active,
  .battle-sidebar-pill,
  .battle-fainted-badge,
  .battle-speed-relation
) {
  font-weight: 400;
}

html[lang="ja"] .app-frame :is(.action-button, .compact-button, .icon-button),
html[lang="ja"] .app-frame .app-topbar :is(.action-button, .auth-action, .topbar-inquiry-action),
html[lang="ja"] .app-frame:has(.roster-editor-screen) :is(
  input:not([type="range"]),
  select,
  .dropdown-value strong,
  .roster-slot-title strong,
  .roster-ev-label,
  .roster-mode-meta,
  .roster-move-row input:not([type="range"]),
  .roster-editor-form-grid input:not([type="range"]),
  .roster-editor-form-grid .dropdown-value strong,
  .roster-editor-pokemon-actions button,
  .compact-button
) {
  font-weight: 400;
}

html[lang="ja"] .app-frame:has(.roster-editor-screen) .roster-mode-tabs button {
  font-weight: 400;
}

html[lang="ja"] .app-frame:has(.roster-editor-screen) .roster-mode-label {
  font-weight: 400;
}

html[lang="ja"] .app-frame:has(.roster-editor-screen) .roster-mode-tabs button.active .roster-mode-label,
html[lang="ja"] .app-frame:has(.roster-editor-screen) .roster-mode-tabs button[aria-pressed="true"] .roster-mode-label {
  font-weight: 400;
}

html[lang="ja"],
html[lang="ja"] body,
html[lang="ja"] body *,
html[lang="ja"] body *::before,
html[lang="ja"] body *::after {
  font-weight: 400 !important;
}