@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;
}

:root {
  color-scheme: light;
  --font-ui: "Galmuri11", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-emphasis: "Galmuri11", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Galmuri14", "Galmuri11", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "GalmuriMono11", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --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: 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: "GalmuriMono11", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --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);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  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),
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-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;
  padding: 20px;
}

.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;
}

.home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  min-height: calc(100vh - 120px);
  align-content: center;
}

.home-action {
  display: grid;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 28px;
  text-align: left;
}

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

.home-action strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
}

.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 {
  background: var(--hover-bg);
  color: var(--ink);
}

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

.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;
}

.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));
}

.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 {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 8px;
}

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

.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-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: var(--line);
}

.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.max {
  top: 2px;
  bottom: 2px;
  z-index: 2;
  border-radius: 999px;
  background: var(--damage-soft);
}

.hp-damage-preview.mode {
  top: 2px;
  bottom: 2px;
  z-index: 3;
  width: 3px;
  border-radius: 999px;
  background: var(--damage-strong);
  transform: translateX(-50%);
}

.hp-damage-preview.min {
  top: 4px;
  bottom: 4px;
  z-index: 4;
  width: 1px;
  background: var(--damage-line);
  opacity: 0.78;
  transform: translateX(-50%);
}

.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-row[data-hp-side="my"] .hp-view {
  min-width: 142px;
}

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

.hp-input {
  width: 72px;
  min-height: 34px;
  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-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;
}

.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-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) {
  .home,
  .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);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 88px;
  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: var(--space-3);
  min-height: 88px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-primary);
  padding: 0 var(--space-8);
  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: 52px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 0;
  background: url("/static/logo.svg") center / contain no-repeat;
  box-shadow: none;
}

.brand-mark::before {
  content: "";
  display: none;
}

.brand-button strong {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 760;
  line-height: 1.1;
}

.brand-button small {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  min-width: 0;
  padding: 0 var(--space-8);
}

.page-title {
  min-width: 0;
}

.page-title h1 {
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-2xl);
  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: 132px;
  white-space: nowrap;
}

.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;
}

.app-content {
  width: min(1860px, 100%);
  margin: 0 auto;
}

.home-content {
  width: min(1180px, 100%);
}

.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);
}

.home {
  min-height: calc(100vh - 190px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.home-action {
  min-height: 190px;
  border-color: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}

.home-action strong {
  font-family: var(--font-ui);
  font-size: var(--font-size-2xl);
  font-weight: 780;
}

@media (max-width: 1180px) {
  .app-topbar {
    grid-template-columns: 1fr;
  }

  .brand-button {
    min-height: 72px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 var(--space-5);
  }

  .page-header {
    min-height: 72px;
    padding: var(--space-3) var(--space-5);
  }

  .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-main {
    padding: var(--space-3) var(--space-3) 92px;
  }

  .page-header,
  .selection-toolbar.panel,
  .bottom-action-bar {
    grid-template-columns: 1fr;
  }

  .page-actions,
  .bottom-action-buttons {
    justify-content: stretch;
  }

  .page-actions > button,
  .bottom-action-buttons > button,
  .action-button {
    width: 100%;
    min-width: 0;
  }

  .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,
  .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-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 30px 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-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-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 {
  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-cell > span {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.roster-ev-cell > strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
}

.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-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-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-overview-grid {
  display: grid;
  grid-template-columns: minmax(360px, 4fr) minmax(560px, 6fr);
  grid-template-areas:
    "team opponent"
    "speed .";
  gap: var(--space-4);
  align-items: start;
}

.battle-setup-overview-grid > .panel {
  margin-top: 0;
}

.setup-my-team-overview {
  grid-area: team;
}

.setup-opponent-overview {
  grid-area: opponent;
}

.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: 64px;
}

.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-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(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.setup-team-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  row-gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 152px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: 12px;
  padding-right: 40px;
  text-align: left;
}

.setup-team-card-wrap {
  position: relative;
  min-width: 0;
}

.setup-team-card-wrap .setup-team-card {
  width: 100%;
  height: 100%;
}

.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: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.setup-team-art img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}

.setup-team-copy {
  display: grid;
  gap: 5px;
  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: var(--font-size-sm);
  font-weight: 800;
}

.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 {
  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-edit-button,
.setup-roster-fill-toggle {
  min-width: 0;
  white-space: nowrap;
}

.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: flex;
  flex-wrap: nowrap;
  gap: 5px;
  grid-column: 1 / -1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
  scroll-snap-type: x proximity;
}

.setup-roster-fill-strip.is-expanded .setup-roster-fill-list {
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.setup-roster-fill-chip {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 4px;
  flex: 0 0 calc((100% - 20px) / 4.4);
  align-items: center;
  min-width: 92px;
  min-height: 38px;
  padding: 4px 6px;
  scroll-snap-align: start;
}

.setup-roster-fill-strip.is-expanded .setup-roster-fill-chip {
  grid-template-columns: 32px minmax(0, 1fr) 22px;
  gap: var(--space-2);
  flex: 0 1 156px;
  min-width: 156px;
  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: 720;
  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: 900;
}

.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-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: 28px minmax(0, 1fr);
  align-content: center;
  min-height: 152px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-muted);
}

.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));
  }
}

@media (max-width: 1100px) {
  .setup-opponent-suggestion-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .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-chip {
    flex-basis: calc((100% - 10px) / 2.35);
  }

  .setup-roster-fill-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .setup-overview-head {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .setup-overview-head .inline-actions {
    justify-content: flex-start;
    padding-top: 0;
  }
}

.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-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 {
    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 {
  position: sticky;
  top: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

.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,
.battle-dashboard-bottom-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-items: stretch;
}

.battle-dashboard-top-grid > .battle-my-active-panel,
.battle-dashboard-top-grid > .battle-opponent-analysis-panel {
  height: 100%;
}

.battle-dashboard-bottom-grid > * {
  height: 100%;
}

.battle-action-recommendation-slot {
  min-width: 0;
  min-height: 1px;
  visibility: hidden;
}

.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-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-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-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: not-allowed;
}

.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(--danger) 24%, var(--border));
  background: color-mix(in srgb, var(--surface-muted) 72%, #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-status-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;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.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);
}

.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) {
  .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: 4px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.battle-active-moves-panel .battle-subhead {
  min-height: 22px;
}

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

.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: 4px;
  align-content: space-between;
  align-items: stretch;
  min-height: 78px;
  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: pointer;
  font: inherit;
  padding: 5px 6px;
  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: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: 5px;
  min-height: 20px;
  min-width: 0;
  width: 100%;
}

.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-tools {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: 0;
}

.battle-move-stat-apply {
  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-stat-apply: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: 3px 5px;
}

.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-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 {
  min-height: 32px;
  padding: 5px 10px 5px 7px;
}

.battle-my-active-panel .mega-button-icon {
  width: 20px;
  height: 20px;
}

.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 {
  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-rank-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-rank-reset-inline {
  position: absolute;
  top: 50%;
  right: 34px;
  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-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: var(--space-2);
}

.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-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.battle-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.34);
  padding: 0;
}

.battle-detail-backdrop:hover {
  border: 0;
  background: rgba(15, 23, 42, 0.40);
}

.battle-detail-sheet {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
}

.battle-detail-sheet .battle-action-detail-panel {
  max-height: min(760px, calc(100vh - 48px));
  overflow-y: auto;
}

.battle-detail-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
}

.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 {
    position: static;
  }

  .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;
  }

  .battle-action-recommendation-slot {
    display: none;
  }

  .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-sidebar-card {
    min-height: 0;
  }

  .battle-risk-summary {
    grid-template-columns: 1fr;
  }

}

/* Home dashboard redesign */
.home-dashboard-content {
  width: min(1320px, 100%);
}

.home-dashboard {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: var(--space-5);
  align-items: stretch;
  overflow: hidden;
  padding: var(--space-3) 0 var(--space-1);
}

.home-hero-copy {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6) 0;
}

.home-hero-copy h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 44px;
  font-weight: 850;
  line-height: 1.05;
}

.home-hero-copy p {
  margin: 0;
  color: var(--accent-strong);
  font-size: var(--font-size-xl);
  font-weight: 780;
}

.home-hero-description {
  max-width: 680px;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.6;
}

.home-hero-visual {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(64, 88, 232, 0.12), rgba(39, 168, 102, 0.12) 48%, rgba(245, 158, 11, 0.14)),
    linear-gradient(180deg, #FFFFFF, var(--surface-muted));
  box-shadow: var(--shadow-card);
}

.home-hero-visual::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 30px;
  height: 34px;
  border: 1px solid rgba(83, 96, 121, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.64);
}

.home-hero-sprite {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(24, 33, 54, 0.18));
  user-select: none;
}

.home-hero-sprite-main {
  right: -14px;
  bottom: 28px;
  width: min(230px, 78%);
}

.home-hero-sprite-side {
  left: 0;
  bottom: 34px;
  width: min(160px, 54%);
}

.home-hero-sprite-front {
  left: 50%;
  bottom: 14px;
  width: min(124px, 42%);
  transform: translateX(-48%);
}

.home-hero-status {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface-muted), #FFFFFF);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.home-hero-status-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}

.home-hero-status-head strong {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
}

.home-hero-status > p,
.home-quick-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.home-progress-grid,
.home-recent-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.home-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3);
}

.home-metric span,
.home-metric small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.home-metric strong {
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.home-menu-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.home-menu-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  min-height: 86px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: var(--space-4);
  text-align: left;
  box-shadow: var(--shadow-card);
}

.home-menu-button:hover,
.home-menu-button:focus-visible {
  border-color: var(--accent);
  background: var(--selection-soft);
  color: var(--text-primary);
}

.home-menu-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--selection-soft);
  color: var(--accent-strong);
  font-size: var(--font-size-lg);
  font-weight: 800;
}

.home-menu-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-menu-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-menu-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-support-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 0.62fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.home-support-grid > .panel {
  margin-top: 0;
}

.home-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.38fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.home-feature-panel,
.home-quick-panel,
.home-recent-panel,
.home-workflow-panel {
  min-width: 0;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-feature-card {
  appearance: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
  min-height: 168px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: var(--space-4);
  text-align: left;
}

.home-feature-card:hover,
.home-feature-card:focus-visible {
  border-color: var(--selection);
  box-shadow: 0 0 0 3px var(--selection-ring);
}

.home-feature-index {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--selection-soft);
  color: var(--accent-strong);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.home-feature-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.home-feature-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.home-feature-title h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
}

.home-feature-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.home-side-stack {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.home-quick-list {
  display: grid;
  gap: var(--space-2);
}

.home-quick-action {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  min-height: 74px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
  padding: var(--space-3);
  text-align: left;
}

.home-quick-action:hover {
  border-color: var(--accent);
  background: var(--selection-soft);
}

.home-quick-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--accent-strong);
  font-weight: 800;
}

.home-quick-action span:not(.home-quick-icon) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-quick-action strong,
.home-quick-action small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-quick-action strong {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.home-quick-action small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.home-quick-action em {
  color: var(--accent-strong);
  font-style: normal;
  font-weight: 800;
}

.home-recent-summary {
  margin-bottom: var(--space-3);
}

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

.home-team-token {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-primary);
  padding: var(--space-2);
  text-align: left;
}

.home-team-token img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.home-team-token span {
  overflow: hidden;
  font-size: var(--font-size-xs);
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-workflow-step {
  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-4);
}

.home-workflow-step span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #E9EDF7;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.home-workflow-step.done {
  border-color: color-mix(in srgb, var(--success) 28%, #fff);
  background: #F1FBF5;
}

.home-workflow-step.done span {
  background: var(--success);
  color: #fff;
}

.home-workflow-step strong {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 800;
}

.home-workflow-step small {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

/* 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-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-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;
}

@media (max-width: 1180px) {
  .home-hero,
  .home-main-grid,
  .home-support-grid,
  .inquiry-columns {
    grid-template-columns: 1fr;
  }

  .home-menu-strip,
  .home-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .home-hero {
    padding: 0;
  }

  .home-hero-copy {
    padding: var(--space-3) 0 0;
  }

  .home-hero-copy h2 {
    font-size: 34px;
  }

  .home-hero-visual {
    min-height: 220px;
  }

  .home-menu-button {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 0;
  }

  .home-menu-icon {
    width: 34px;
    height: 34px;
  }

  .home-feature-grid,
  .home-menu-strip,
  .inquiry-intro,
  .inquiry-form-grid,
  .home-progress-grid,
  .home-recent-summary,
  .home-team-preview,
  .home-workflow-grid {
    grid-template-columns: 1fr;
  }

  .home-feature-card {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 0;
  }

  .home-feature-index {
    width: 34px;
    height: 34px;
  }

}

/* 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;
  }
}