:root {
  --main-panel-width: 960px;
  --team-slot-width: 175px;
  --team-tile-compact-height: 8rem;
  --team-tile-height: 288px;
  --surface-muted: color-mix(in srgb, CanvasText 5%, Canvas);
  --surface-raised: color-mix(in srgb, CanvasText 10%, Canvas);
  --trait-status-implemented-bg: color-mix(in srgb, CanvasText 15%, Canvas);
  --trait-status-implemented-border: color-mix(in srgb, CanvasText 22%, transparent);
  --trait-status-not-simmed-bg: color-mix(in srgb, CanvasText 10%, Canvas);
  --trait-status-not-simmed-border: color-mix(in srgb, CanvasText 15%, transparent);
  --trait-status-not-simmed-color: color-mix(in srgb, CanvasText 25%, transparent);
  --trait-status-not-implemented-bg: color-mix(in srgb, #ef4444 12%, Canvas);
  --trait-status-not-implemented-border: color-mix(in srgb, #dc2626 36%, transparent);
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}

body {
  margin: 0 auto;
  max-width: var(--main-panel-width);
  padding: 1.5rem;
  line-height: 1.2;
  background: Canvas;
  color: color-mix(in srgb, CanvasText 85%, Canvas);
}

body.is-modal-open {
  overflow: hidden;
}

header {
  margin-bottom: 1.25rem;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.page-topbar {
  background: color-mix(in srgb, Canvas);
  align-items: center;
  display: flex;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin-bottom: 0.85rem;
  justify-content: flex-end;
}

.app-brand {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
  min-width: 0;
}

.app-brand-icon {
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;
  height: 2rem;
  width: 2rem;
}

.topbar-info-button {
  align-items: center;
  appearance: none;
  background: color-mix(in srgb, Canvas 94%, CanvasText 6%);  
  color: color-mix(in srgb, CanvasText 50%, Canvas 50%);
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 999px;
  display: inline-flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 800;
  height: 2rem;
  justify-content: center;
  justify-self: center;
  line-height: 1;
  padding: 0;
  width: 2rem;
}

.topbar-info-button:hover {
  background: color-mix(in srgb, Canvas 88%, CanvasText 12%);
  border-color: color-mix(in srgb, CanvasText 10%, transparent);
}

.app-header {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  min-height: 2.35rem;
}

.account-loading {
  min-height: 2.35rem;
}

.account-indicator {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  justify-content: flex-end;
  margin-left: auto;
}

.page-topbar .account-indicator {
  justify-self: end;
  max-width: 100%;
}

.account-name {
  color: color-mix(in srgb, CanvasText 76%, transparent);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-button {
  align-items: center;
  appearance: none;
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  border-radius: 999px;
  box-sizing: border-box;
  color: CanvasText;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  padding: 0;
  width: 2rem;
}

.account-button:hover {
  background: color-mix(in srgb, CanvasText 6%, Canvas);
  border-color: color-mix(in srgb, CanvasText 36%, transparent);
}

.account-icon {
  display: block;
  fill: none;
  height: 1.15rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.15rem;
}

section,
.setup-section {
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 8px;
  margin: 1rem 0;
  padding: 1rem;
}

button {
  cursor: pointer;
  font: inherit;
  padding: 0.6rem 1rem;
}

.section-heading {
  align-items: center;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.section-heading .simulation-round-summary {
  color: color-mix(in srgb, CanvasText 30%, transparent);
}

.section-heading h2 {
  justify-self: start;
  margin: 0;
  text-align: left;
}

.setup-section {
  display: block;
}

.setup-section[open] .section-heading {
  margin-bottom: 0.75rem;
}

.setup-section > summary {
  cursor: pointer;
}

.setup-section > summary::-webkit-details-marker {
  display: none;
}

.setup-section > summary::before {
  color: color-mix(in srgb, CanvasText 58%, transparent);
  content: ">";
  font-weight: 700;
  justify-self: start;
  transform: rotate(0deg);
}

.setup-section[open] > summary::before {
  transform: rotate(90deg);
}

.section-summary {
  color: color-mix(in srgb, CanvasText 68%, transparent);
  font-size: 0.95rem;
  text-align: right;
}

.scenario-controls {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 0.7rem;
}

.scenario-target {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-list {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: 0.7rem;
}

.scenario-card {
  background:  Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.65rem;
  position: relative;
}

.scenario-card:hover {
  border-color: color-mix(in srgb, CanvasText 32%, transparent);
}

.scenario-card.is-selected {
  background: var(--surface-muted);
  border-color: color-mix(in srgb, #facc15 34%, CanvasText 22%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #facc15 14%, transparent);
  color: color-mix(in srgb, CanvasText 85%, Canvas);
  opacity: 1;
}

.scenario-card:not(.is-selected) {
  opacity: 0.8;
}

.scenario-card input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.scenario-card-main {
  align-items: start;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.scenario-card-title {
  font-weight: 800;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-card-meta {
  color: color-mix(in srgb, CanvasText 64%, transparent);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.scenario-trait-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  min-width: 0;
}

.scenario-ability-row {
  align-items: center;
  display: flex;
  gap: 0.35rem;
}

.scenario-ability-group {
  display: inline-flex;
  gap: 0.22rem;
}

.scenario-armor-editor {
  align-items: center;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: auto minmax(4.4rem, 6rem) 2.55rem;
}

.scenario-armor-label {
  color: color-mix(in srgb, CanvasText 68%, transparent);
  display: inline;
  font-size: 0.8rem;
  font-weight: 650;
  margin: 0;
}

.scenario-armor-input {
  appearance: textfield;
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
  border-radius: 6px;
  box-sizing: border-box;
  color: CanvasText;
  font: inherit;
  font-variant-numeric: tabular-nums;
  min-height: 2.55rem;
  min-width: 0;
  padding: 0.48rem 0.65rem;
  text-align: right;
  width: 100%;
}

.scenario-armor-input[readonly] {
  cursor: default;
}

.scenario-armor-input::-webkit-outer-spin-button,
.scenario-armor-input::-webkit-inner-spin-button {
  margin: 0;
}

.character-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.team-picker {
  display: grid;
  gap: 1rem;
}

.team-inputs {
  display: none;
}

.selected-team-grid {
  align-items: stretch;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.machine-of-war-support {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: calc(var(--team-slot-width) + 6rem);
}

.machine-of-war-support-heading {
  align-items: center;
  color: color-mix(in srgb, CanvasText 58%, transparent);
  display: flex;
  font-size: 0.68rem;
  font-weight: 700;
  gap: 0.45rem;
  line-height: 1;
  margin: 0 0 0.3rem;
}

.machine-of-war-support-heading::after {
  background: color-mix(in srgb, CanvasText 12%, transparent);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.machine-of-war-support .machine-of-war-selected {
  align-content: center;
  align-items: center;
  display: grid;
  grid-template-columns: 8rem minmax(0, 8rem);
  grid-template-rows: auto auto;
  height: var(--team-tile-compact-height);
  justify-content: center;
  max-height: var(--team-tile-compact-height);
  min-height: var(--team-tile-compact-height);
  padding: 0.65rem;
  width: 100%;
}

.machine-of-war-support .machine-of-war-selected .machine-of-war-card-body {
  display: contents;
}

.machine-of-war-support .machine-of-war-selected .character-title-row {
  grid-column: 1 / -1;
}

.machine-of-war-support .machine-of-war-selected .character-name {
  display: block;
  height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.machine-of-war-support .machine-of-war-selected .character-portrait {
  align-self: center;
  grid-column: 1;
  grid-row: 2;
  width: 5rem;
}

.machine-of-war-support .machine-of-war-selected .character-details {
  align-self: center;
  grid-column: 2;
  grid-row: 2;
}

.machine-of-war-support .machine-of-war-selected.is-empty {
  border-style: dashed;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
}

.machine-of-war-empty {
  color: color-mix(in srgb, CanvasText 58%, Canvas);
  font-weight: 700;
}

.machine-of-war-card-body {
  display: grid;
  gap: 0.45rem;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
}

.machine-of-war-choice .machine-of-war-portrait {
  width: 68%;
}

.machine-of-war-choice .machine-of-war-details {
  justify-items: stretch;
  min-width: 0;
  width: 100%;
}

.machine-of-war-ability-summary {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  width: 100%;
}

.machine-of-war-ability-stat {
  align-items: center;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.machine-of-war-ability-stat > span {
  color: color-mix(in srgb, CanvasText 78%, transparent);
  font-size: 0.76rem;
}

.machine-of-war-picker-actions {
  border-top: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  display: flex;
  justify-content: center;
  padding-top: 0.55rem;
}

.machine-of-war-choice {
  background: transparent;
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 8px;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 184px;
  min-width: 0;
  padding: 0.55rem;
  text-align: inherit;
  user-select: none;
}

.machine-of-war-none-choice {
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  min-height: 2rem;
  padding: 0.32rem 0.8rem;
  width: auto;
}

.machine-of-war-none-choice:hover,
.machine-of-war-none-choice:focus-visible {
  background: color-mix(in srgb, CanvasText 6%, Canvas);
  border-color: color-mix(in srgb, CanvasText 36%, transparent);
}

.machine-of-war-none-choice.is-selected {
  background: color-mix(in srgb, #facc15 8%, Canvas);
  border-color: color-mix(in srgb, #facc15 34%, CanvasText 18%);
}

.machine-of-war-choice:hover,
.machine-of-war-choice:focus-visible {
  border-color: color-mix(in srgb, CanvasText 42%, transparent);
}

/* Modal scope needed to win over .selected-character-tile.is-selected below. */
.machine-of-war-modal .machine-of-war-choice.is-selected {
  background: color-mix(in srgb, #facc15 7%, Canvas);
  border-color: color-mix(in srgb, #facc15 62%, CanvasText 16%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #facc15 30%, transparent);
}

.machine-of-war-choice.is-not-implemented .character-portrait img {
  filter: grayscale(1) brightness(0.66);
}

.machine-of-war-featured-card .machine-of-war-ability-summary {
  width: min(100%, 11rem);
}

.machine-of-war-round input {
  min-height: 0;
  width: auto;
}

.machine-of-war-rounds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  grid-column: 1 / -1;
  padding-top: 0.15rem;
}

.machine-of-war-rounds-label {
  color: var(--muted-text);
  flex: 0 0 100%;
  font-size: 0.6rem;
  font-weight: 700;
}

.machine-of-war-round {
  align-items: center;
  display: inline-flex !important;
  font-size: 0.68rem;
  gap: 0.18rem !important;
}

.selected-character {
  align-self: stretch;
  box-sizing: border-box;
  display: grid;
  flex: 0 0 var(--team-slot-width);
  grid-template-rows: var(--team-tile-height);
  min-width: 0;
  width: var(--team-slot-width);
}

.selected-character-tile {
  box-sizing: border-box;
  cursor: pointer;
  height: var(--team-tile-height);
  max-height: var(--team-tile-height);
  min-height: var(--team-tile-height);
  width: var(--team-slot-width);
}

.selected-character-tile.is-selected {
  background: color-mix(in srgb, CanvasText 4%, Canvas);
}

.selected-character-tile:focus-visible {
  border-color: color-mix(in srgb, CanvasText 54%, transparent);
  outline: 2px solid color-mix(in srgb, CanvasText 34%, transparent);
  outline-offset: 2px;
}

.team-save-bar {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  display: flex;
  gap: 0.6rem;
  justify-content: flex-start;
  padding-top: 0.75rem;
}

.saved-team-buttons {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-start;
  min-width: 0;
}

.saved-team-button {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.saved-team-button[hidden] {
  display: none;
}

.saved-team-button.is-selected {
  background: color-mix(in srgb, CanvasText 12%, Canvas);
  border-color: color-mix(in srgb, CanvasText 48%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, CanvasText 22%, transparent);
}

.save-team-button {
  flex: 0 0 auto;
  min-height: 2.55rem;
  white-space: nowrap;
}

.delete-team-button {
  flex: 0 0 auto;
}

.delete-team-button:not(:disabled):not(.is-disabled):hover {
  background: color-mix(in srgb, CanvasText 6%, Canvas);
  border-color: color-mix(in srgb, #dc2626 58%, transparent);
  color: color-mix(in srgb, #b91c1c 76%, CanvasText);
}

.delete-team-button:disabled,
.delete-team-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.save-team-button:hover,
.save-simulation-result-button:not(:disabled):hover,
.scenario-armor-editor.is-editing .scenario-armor-edit-button:hover {
  background: color-mix(in srgb, CanvasText 6%, Canvas);
  border-color: color-mix(in srgb, #15803d 58%, transparent);
  color: color-mix(in srgb, #166534 76%, CanvasText);
}

.save-team-modal-backdrop {
  background: color-mix(in srgb, Canvas 70%, transparent);
  display: grid;
  inset: 0;
  padding: 1rem;
  place-items: center;
  position: fixed;
  z-index: 45;
}

.save-team-modal-backdrop[hidden] {
  display: none;
}

.save-team-modal {
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  border-radius: 8px;
  box-shadow: 0 1rem 2rem color-mix(in srgb, CanvasText 18%, transparent);
  box-sizing: border-box;
  display: grid;
  gap: 0.85rem;
  max-width: min(26rem, 100%);
  padding: 0.85rem;
  width: 100%;
}

.save-team-modal-header {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.save-team-modal-header h3 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.save-team-modal p {
  color: color-mix(in srgb, CanvasText 72%, transparent);
  margin: 0;
}

.save-team-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.save-team-modal-actions button {
  min-height: 2.35rem;
}

.danger-button {
  background: color-mix(in srgb, #dc2626 86%, CanvasText);
  border-color: color-mix(in srgb, #dc2626 72%, transparent);
  color: white;
}

.danger-button:hover {
  background: color-mix(in srgb, #b91c1c 88%, CanvasText);
}

.empty-character-tile {
  align-content: center;
  border-style: dashed;
  color: color-mix(in srgb, CanvasText 62%, transparent);
}

.character-tile {
  background: transparent;
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 8px;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 0.55rem;
  grid-template-rows: auto auto 1fr;
  min-height: 196px;
  min-width: 0;
  overflow: hidden;
  padding: 0.65rem;
  position: relative;
  text-align: inherit;
  user-select: none;
}

.character-tile:hover {
  border-color: color-mix(in srgb, CanvasText 42%, transparent);
}

.character-tile.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.character-tile.is-not-implemented .character-portrait img {
  filter: grayscale(1) brightness(0.66);
}

.character-tile.is-not-implemented .character-portrait::before {
  background: color-mix(in srgb, Canvas 38%, transparent);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.character-card-body {
  display: contents;
}

.empty-slot-content {
  align-items: center;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  min-height: 100%;
  text-align: center;
}

.empty-slot-title {
  font-weight: 700;
}

.empty-slot-note {
  font-size: 0.78rem;
}

.character-tile input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.character-portrait {
  align-items: center;
  aspect-ratio: 1;
  background: color-mix(in srgb, CanvasText 8%, Canvas);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  justify-self: center;
  overflow: hidden;
  position: relative;
  width: 80%;
}

.character-portrait img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.character-details {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}

.character-name {
  display: -webkit-box;
  font-weight: 700;
  height: 2.4em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  word-break: auto-phrase;
  overflow: clip;
}

.character-title-row {
  align-items: start;
  display: inline-flex;
  gap: 0.28rem;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.character-implementation-warning {
  align-items: center;
  background: color-mix(in srgb, #dc2626 10%, Canvas);
  border: 1px solid color-mix(in srgb, #dc2626 64%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, #b91c1c 76%, CanvasText);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 900;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  margin-top: 0.08rem;
  width: 1rem;
}

.selected-character .character-name {
  display: block;
  height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.character-damage-row {
  align-items: center;
  color: color-mix(in srgb, CanvasText 78%, transparent);
  display: inline-flex;
  font-size: 0.76rem;
  gap: 0.3rem;
  justify-content: center;
  line-height: 1;
}

.character-damage-row strong {
  font-variant-numeric: tabular-nums;
}

.character-crit-row {
  align-items: center;
  border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  border-radius: 999px;
  box-sizing: border-box;
  color: color-mix(in srgb, CanvasText 70%, transparent);
  display: grid;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  gap: 0.25rem;
  grid-template-columns: auto auto auto;
  justify-content: center;
  line-height: 1;
  max-width: 100%;
  min-height: 1.65rem;
  overflow: hidden;
  padding: 0.12rem 0.45rem;
  white-space: nowrap;
  width: 100%;
}

.character-crit-row strong {
  color: color-mix(in srgb, CanvasText 86%, transparent);
}

.character-crit-row em {
  font-style: normal;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-crit-row.is-empty {
  color: color-mix(in srgb, CanvasText 48%, transparent);
}

.ability-tooltip-icon {
  align-items: center;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 999px;
  box-sizing: border-box;
  color: color-mix(in srgb, CanvasText 70%, transparent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 800;
  height: 1.05rem;
  justify-content: center;
  line-height: 1;
  width: 1.05rem;
}

.ability-tooltip-icon-active {
  background: color-mix(in srgb, #38bdf8 14%, Canvas);
  border-color: color-mix(in srgb, #38bdf8 48%, transparent);
}

.ability-tooltip-icon-passive {
  background: color-mix(in srgb, #facc15 14%, Canvas);
  border-color: color-mix(in srgb, #facc15 48%, transparent);
}

.ability-tooltip-icon.has-icon {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  height: 1.35rem;
  width: 1.35rem;
}

.ability-tooltip-icon-image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.ability-tooltip-icon.is-empty {
  background: color-mix(in srgb, CanvasText 4%, Canvas);
  border-style: dashed;
  color: color-mix(in srgb, CanvasText 42%, transparent);
}

.ability-tooltip-icon.is-implemented {
  background: color-mix(in srgb, #22c55e 20%, Canvas);
  border-color: color-mix(in srgb, #16a34a 58%, transparent);
  color: color-mix(in srgb, #166534 88%, CanvasText);
}

/* Same grey as a not-simmed trait, from the shared status variables, so the
   two read as one status rather than two. */
.ability-tooltip-icon.is-not-simmed {
  background: var(--trait-status-not-simmed-bg);
  border-color: var(--trait-status-not-simmed-border);
  color: var(--trait-status-not-simmed-color);
}

.ability-tooltip-icon.is-unimplemented {
  background: color-mix(in srgb, #ef4444 16%, Canvas);
  border-color: color-mix(in srgb, #dc2626 58%, transparent);
  color: color-mix(in srgb, #991b1b 88%, CanvasText);
}

.ability-tooltip-icon[data-instant-tooltip]:focus-visible,
.character-trait[data-instant-tooltip]:focus-visible,
.relic-info-button[data-instant-tooltip]:focus-visible {
  outline: 2px solid color-mix(in srgb, CanvasText 38%, transparent);
  outline-offset: 2px;
}

.instant-tooltip {
  background: color-mix(in srgb, Canvas 35%, CanvasText);
  border: 1px solid color-mix(in srgb, Canvas 18%, transparent);
  border-radius: 6px;
  box-shadow: 0 0.65rem 1.4rem color-mix(in srgb, CanvasText 22%, transparent);
  box-sizing: border-box;
  color: Canvas;
  font-size: 0.78rem;
  line-height: 1.35;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.45rem 0.55rem;
  pointer-events: none;
  position: fixed;
  z-index: 70;
}

.instant-tooltip[hidden] {
  display: none;
}

.character-attacks {
  display: grid;
  gap: 0.35rem;
  justify-items: stretch;
  max-width: 100%;
  min-width: 0;
  width: fit-content;
}

.character-traits {
  display: none;
}

.character-traits-title {
  color: color-mix(in srgb, CanvasText 64%, transparent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.character-trait-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.character-trait {
  align-items: center;
  border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 0.55rem;
  gap: 0.28rem;
  line-height: 1.1;
  min-height: 1.55rem;
  min-width: 0;
  padding: 0.18rem 0.46rem 0.18rem 0.28rem;
}

.character-trait.is-implemented {
  background: var(--trait-status-implemented-bg);
  border-color: var(--trait-status-implemented-border);
}

.character-trait.is-not-simmed {
  background: var(--trait-status-not-simmed-bg);
  border-color: var(--trait-status-not-simmed-border);
  color: var(--trait-status-not-simmed-color);

}

.character-trait.is-not-implemented {
  background: var(--trait-status-not-implemented-bg);
  border-color: var(--trait-status-not-implemented-border);
}

.character-trait.is-empty {
  color: color-mix(in srgb, CanvasText 52%, transparent);
  font-style: italic;
}

.character-trait-icon,
.character-trait-fallback {
  flex: 0 0 auto;
  height: 1rem;
  width: 1rem;
}

.character-trait-icon {
  display: block;
  object-fit: contain;
}

.character-trait-fallback {
  align-items: center;
  background: color-mix(in srgb, CanvasText 10%, Canvas);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.58rem;
  font-weight: 850;
  justify-content: center;
}

.attack-badge {
  align-items: center;
  border: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
  border-radius: 999px;
  box-sizing: border-box;
  display: grid;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  gap: 0.22rem;
  grid-template-columns:
    1.15rem
    1.15rem
    minmax(calc(1rem + 0.16rem + 3ch), 1fr)
    minmax(calc(1rem + 0.16rem + 4ch), 1fr);
  max-width: 100%;
  min-height: 1.65rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.12rem 0.4rem 0.12rem 0.32rem;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

.attack-badge-missing {
  color: color-mix(in srgb, CanvasText 35%, transparent);
  grid-template-columns: 1.15rem minmax(0, 1fr);
}

.attack-missing-text {
  display: inline-block;
  font-size: 0.7rem;
  grid-column: 2 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attack-icon {
  display: block;
  flex: 0 0 auto;
  height: 1rem;
  object-fit: contain;
  width: 1rem;
}

.attack-type-icon {
  height: 1.15rem;
  width: 1.15rem;
}

.attack-damage-type-icon {
  height: 1.18rem;
  width: 1.18rem;
}

.attack-damage-type-fallback {
  align-items: center;
  border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.56rem;
  font-weight: 800;
  height: 1.18rem;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  min-width: 1.18rem;
  padding-inline: 0.16rem;
}

.attack-stat {
  align-items: center;
  display: inline-flex;
  gap: 0.16rem;
  justify-content: center;
  min-width: max-content;
  overflow: visible;
}

.attack-stat span {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.secondary-button {
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 6px;
  background: Canvas;
  color: CanvasText;
}

.primary-button {
  border: 1px solid color-mix(in srgb, CanvasText 72%, transparent);
  border-radius: 6px;
  background: CanvasText;
  color: Canvas;
  font-weight: 700;
}

.primary-button:hover {
  background: color-mix(in srgb, white 50%);
}

.replacement-modal-backdrop {
  background: color-mix(in srgb, Canvas 70%, transparent);
  inset: 0;
  overflow: auto;
  padding: 2rem;
  position: fixed;
  scroll-behavior: smooth;
  z-index: 40;
}

@media (prefers-reduced-motion: reduce) {
  .replacement-modal-backdrop {
    scroll-behavior: auto;
  }
}

.replacement-modal-backdrop[hidden] {
  display: none;
}

.replacement-modal {
  --replacement-modal-inline-padding: 1rem;
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 1rem 2rem color-mix(in srgb, CanvasText 18%, transparent);
  display: grid;
  gap: 0.75rem;
  margin: 0 auto;
  max-width: none;
  min-height: min(46rem, calc(100vh - 4rem));
  padding: 0 var(--replacement-modal-inline-padding) 1rem;
  position: relative;
  width: min(var(--main-panel-width), calc(100vw - 4rem));
}

.app-news-modal-header {
  align-items: center;
  background: Canvas;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 2;
  max-height: fit-content;
}

.app-news-modal-header h3 {
  min-height: fit-content;
  font-size: 1rem;
  margin: 0;
}

.app-news-modal {
  grid-auto-rows: max-content;
}

.app-news-body {
  display: block;
  line-height: 1.5;
  padding: 0.55rem 0.8rem;
}

.app-news-body :where(h1, h2, h3, p, ul, ol) {
  margin: 0;
}

.app-news-body :where(h1, h2, h3, p, ul, ol) + :where(h1, h2, h3, p, ul, ol) {
  margin-top: 0.75rem;
}

.app-news-body h2 {
  font-size: 1.25rem;
  line-height: 1.2;
}

.app-news-body h3 {
  color: color-mix(in srgb, CanvasText 72%, transparent);
  font-size: 0.95rem;
  line-height: 1.25;
  margin-top: 1rem;
}

.app-news-body p {
  color: color-mix(in srgb, CanvasText 78%, transparent);
}

.app-news-body ul,
.app-news-body ol {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.25rem;
}

.app-news-body li {
  line-height: 1.45;
}

.modal-close-button {
  align-items: center;
  appearance: none;
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 999px;
  color: CanvasText;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.15rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 2.15rem;
}

.modal-close-button:hover {
  background: color-mix(in srgb, CanvasText 6%, Canvas);
  border-color: color-mix(in srgb, CanvasText 34%, transparent);
}

.replacement-featured {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 8px;
  margin-top: 0;
  padding: 0.75rem 3.5rem 0.75rem 0.75rem;
  position: sticky;
  top: 0;
  z-index: 2;
}

.selected-character-tile.is-selected,
.replacement-featured {
  border-color: color-mix(in srgb, #facc15 16%, CanvasText 18%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #facc15 7%, transparent);
}

/* The featured card is sticky over the scrolling roster, so a shadow above and
   below mutes whatever passes behind it. The negative spread pulls the shadow
   in from the left and right so it only reads vertically. Plain black rather
   than the CanvasText mix used elsewhere in this file: CanvasText is near-white
   in dark mode, which would make this a light halo instead of a shadow. The
   first declaration is the fallback for browsers without light-dark(). */
.replacement-featured {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #facc15 7%, transparent),
    0 14px 18px -8px rgb(0 0 0 / 0.28),
    0 -14px 18px -8px rgb(0 0 0 / 0.28);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #facc15 7%, transparent),
    0 14px 18px -8px light-dark(rgb(0 0 0 / 0.28), rgb(0 0 0 / 0.5)),
    0 -14px 18px -8px light-dark(rgb(0 0 0 / 0.28), rgb(0 0 0 / 0.5));
}

.replacement-close-rail {
  align-items: flex-start;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.replacement-featured-close {
  margin-right: calc(var(--replacement-modal-inline-padding) + 0.65rem + 1px);
  margin-top: calc(0.65rem + 1px);
  pointer-events: auto;
  position: sticky;
  top: calc(0.65rem + 1px);
}

.replacement-featured-card-body {
  align-items: start;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(7rem, 11rem) minmax(11rem, 16rem) minmax(12rem, 1fr);
}

.replacement-featured-card-body .character-title-row {
  grid-column: 2;
}

.replacement-featured-card-body .character-name {
  font-size: 1.25rem;
  height: auto;
  text-align: center;
  white-space: normal;
}

.replacement-featured-card-body .character-portrait {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: min(100%, 11rem);
}

.replacement-featured-card-body .character-details {
  align-items: center;
  grid-column: 2;
  grid-row: 2;
  justify-items: center;
  width: 100%;
}

.replacement-featured-card-body .character-attacks {
  justify-content: stretch;
  justify-items: stretch;
  width: min(100%, 11rem);
}

.replacement-featured-card-body .character-crit-row {
  box-sizing: border-box;
  justify-self: stretch;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.replacement-featured-card-body .character-traits {
  align-items: start;
  display: grid;
  gap: 0.38rem;
  grid-column: 3;
  grid-row: 1 / span 3;
  justify-items: start;
  min-width: 0;
  width: 100%;
}

.replacement-featured-card-body .character-trait {
  font-size: 0.68rem;
  min-height: 1.35rem;
  padding: 0.12rem 0.38rem 0.12rem 0.22rem;
}

.replacement-featured-card-body .character-trait-icon,
.replacement-featured-card-body .character-trait-fallback {
  height: 0.82rem;
  width: 0.82rem;
}

.character-loadout {
  display: none;
}

.replacement-featured-card-body .character-loadout {
  border-top: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: stretch;
  padding-top: 0.42rem;
  width: 100%;
}

.character-loadout-section {
  background: color-mix(in srgb, CanvasText 4%, Canvas);
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 6px;
  box-sizing: border-box;
  display: grid;
  gap: 0.2rem;
  grid-template-columns: 1fr;
  margin: 0;
  min-width: 0;
  padding: 0.36rem;
}

.character-loadout-section legend {
  color: var(--muted-text);
  font-size: 0.62rem;
  font-weight: 700;
  padding-inline: 0.18rem;
}

.character-loadout-section label {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.character-loadout-section label span {
  color: var(--muted-text);
  font-size: 0.6rem;
  font-weight: 700;
}

.character-loadout-section:disabled {
  background: color-mix(in srgb, CanvasText 2%, Canvas);
  border-color: color-mix(in srgb, CanvasText 8%, transparent);
}

.character-loadout-section:disabled label span,
.character-loadout-section:disabled .character-loadout-empty {
  opacity: 0.65;
}

.character-loadout-progression {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Rarity and Stars pair up on the first row. Rank, where the unit has one,
   falls to the row below; Machines of War have no Rank, so their second row is
   the ability levels instead. */

.character-loadout-ability-levels {
  display: grid;
  gap: 0.3rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.character-loadout-section select,
.character-loadout-section input {
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 6px;
  box-sizing: border-box;
  color: CanvasText;
  font: inherit;
  font-size: 0.68rem;
  min-height: 1.52rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.16rem 0.24rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Relic and crit item names run long, so keep the closed control's text clear
   of the dropdown arrow and let it end in an ellipsis rather than sliding
   underneath. */
.character-loadout-section select {
  padding-right: 1.15rem;
}

.character-loadout-section option[data-relic-id] {
  background: color-mix(in srgb, #facc15 15%, Canvas);
}

.character-loadout-item-control {
  display: grid;
  gap: 0.22rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.relic-info-button {
  align-items: center;
  background: color-mix(in srgb, #facc15 22%, Canvas);
  border: 1px solid color-mix(in srgb, #ca8a04 52%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, #854d0e 88%, CanvasText);
  display: inline-flex;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  height: 1.52rem;
  justify-content: center;
  padding: 0;
  width: 1.52rem;
}

.relic-info-button[hidden] {
  display: none;
}

.character-loadout-section select:disabled,
.character-loadout-section input:disabled {
  background: color-mix(in srgb, CanvasText 3%, Canvas);
  border-color: color-mix(in srgb, CanvasText 10%, transparent);
  color: var(--muted-text);
  cursor: not-allowed;
  opacity: 0.65;
}

.character-loadout-equipment {
  grid-template-columns: 1fr;
}

.character-loadout-empty {
  color: var(--muted-text);
  font-size: 0.82rem;
  margin: 0;
}

.replacement-roster-layout {
  position: relative;
}

.roster-faction-jump-bar {
  align-content: start;
  background: color-mix(in srgb, CanvasText 5%, Canvas);
  border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
  border-radius: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 0.28rem;
  justify-items: center;
  max-height: var(--roster-faction-rail-max-height, calc(100vh - 8.5rem));
  -ms-overflow-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.28rem;
  position: fixed;
  scrollbar-width: none;
  top: var(--roster-faction-rail-top, 5.5rem);
  width: 2.35rem;
  z-index: 2;
}

.roster-faction-jump-bar[data-roster-faction-bar="left"] {
  left: var(--roster-faction-rail-left, 0.5rem);
}

.roster-faction-jump-bar[data-roster-faction-bar="right"] {
  right: var(--roster-faction-rail-right, 0.5rem);
}

.roster-faction-jump-bar::-webkit-scrollbar {
  display: none;
}

.roster-faction-jump {
  align-items: center;
  aspect-ratio: 1;
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  border-radius: 6px;
  box-sizing: border-box;
  color: CanvasText;
  display: inline-flex;
  justify-content: center;
  justify-self: center;
  min-width: 0;
  overflow: hidden;
  padding: 0.18rem;
  text-decoration: none;
  width: 100%;
}

.roster-faction-jump:hover,
.roster-faction-jump:focus-visible {
  background: color-mix(in srgb, CanvasText 9%, Canvas);
  border-color: color-mix(in srgb, CanvasText 32%, transparent);
}

.roster-faction-jump.is-active {
  background: color-mix(in srgb, Highlight 65%, Canvas);
  border-color: color-mix(in srgb, Highlight 80%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, Highlight 45%, transparent),
    0 0 0.42rem color-mix(in srgb, Highlight 25%, transparent);
}

.roster-faction-jump img {
  display: block;
  height: 1.35rem;
  width: 1.35rem;
}

.roster-faction-jump.is-active img {
  filter: brightness(1.45) saturate(1.18);
}

.replacement-roster {
  display: grid;
  gap: 0.55rem;
  /* An explicit shrinkable column rather than the default `auto` track: `auto`
     is sized from the items' max-content width, which lets one wide child drag
     the whole picker past the viewport on small screens. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.roster-faction-group {
  border: 1px solid transparent;
  border-radius: 8px;
  /* Only a couple of faction groups are on screen at once, so let the browser
     skip layout and paint for the rest. The intrinsic size keeps the scrollbar
     stable; `auto` means the real height is remembered once a group has been
     rendered, so scrolling back does not re-estimate.
     Height only, deliberately: a skipped group is still a grid item, so an
     intrinsic *width* would size the roster's auto column to that width and
     push the whole picker wider than a narrow viewport. */
  contain-intrinsic-height: auto 480px;
  content-visibility: auto;
  display: grid;
  gap: 0.42rem;
  padding: 0.65rem;
  scroll-margin-top: 4.6rem;
}

.roster-faction-group.is-shaded {
  background: rgba(127, 127, 127, 0.12);
  background: color-mix(in srgb, CanvasText 10%, Canvas);
  border-color: color-mix(in srgb, CanvasText 12%, transparent);
}

.roster-faction-group:not(.is-shaded) {
  background: rgba(127, 127, 127, 0.06);
  background: color-mix(in srgb, CanvasText 5%, Canvas);
  border-color: color-mix(in srgb, CanvasText 8%, transparent);
}

.roster-faction-heading {
  border-bottom: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  color: color-mix(in srgb, CanvasText 72%, transparent);
  font-size: 0.78rem;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  padding-bottom: 0.22rem;
  text-transform: uppercase;
}

.roster-faction-heading-icon {
  display: inline-block;
  height: 1rem;
  margin-left: 0.35rem;
  vertical-align: -0.22rem;
  width: 1rem;
}

.replacement-grid {
  gap: 0.45rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.roster-character-tile {
  font: inherit;
  min-height: 184px;
  padding: 0.55rem;
}

.roster-character-tile .character-portrait {
  width: 68%;
}

.roster-character-tile .character-details {
  gap: 0.3rem;
}

.roster-character-tile .attack-badge,
.selected-character-tile .attack-badge {
  font-size: 0.68rem;
  gap: 0.12rem;
  grid-template-columns:
    1rem
    1rem
    minmax(calc(1rem + 0.16rem + 3ch), 1fr)
    minmax(calc(1rem + 0.16rem + 4ch), 1fr);
  min-height: 1.45rem;
  padding: 0.1rem 0.24rem 0.1rem 0.22rem;
}

.roster-character-tile .attack-badge-missing,
.selected-character-tile .attack-badge-missing {
  grid-template-columns: 1rem minmax(0, 1fr);
}

.roster-character-tile .character-crit-row {
  display: none;
  font-size: 0.64rem;
  min-height: 1.28rem;
  padding: 0.08rem 0.34rem;
}

.roster-character-tile:disabled {
  pointer-events: none;
}

.roster-character-tile.is-disabled {
  background: color-mix(in srgb, #facc15 7%, Canvas);
  border-color: color-mix(in srgb, #facc15 62%, CanvasText 16%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #facc15 30%, transparent);
  opacity: 1;
}

.roster-character-tile.is-disabled .character-portrait img {
  filter: grayscale(0.15) brightness(0.78);
}

.roster-character-tile.is-disabled .character-portrait::after {
  align-items: center;
  background: color-mix(in srgb, Canvas 78%, transparent);
  color: color-mix(in srgb, CanvasText 58%, transparent);
  content: "Selected";
  display: flex;
  font-size: 0.72rem;
  font-weight: 750;
  inset: 50% 0 auto;
  justify-content: center;
  letter-spacing: 0;
  padding-block: 0.22rem;
  position: absolute;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.simulation-controls {
  align-items: center;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.simulation-character-settings {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 8px;
  margin: 0;
  padding: 0;
}

.simulation-character-settings[open] {
  padding-bottom: 0.4rem;
}

.simulation-settings-heading {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  list-style: none;
  padding: 0.38rem 0.6rem;
}

.simulation-settings-heading::-webkit-details-marker {
  display: none;
}

.simulation-settings-heading::before {
  color: color-mix(in srgb, CanvasText 58%, transparent);
  content: ">";
  font-size: 0.76rem;
  font-weight: 700;
  transform: rotate(0deg);
}

.simulation-character-settings[open] > .simulation-settings-heading::before {
  transform: rotate(90deg);
}

.simulation-settings-heading h3 {
  color: color-mix(in srgb, CanvasText 72%, transparent);
  font-size: 0.82rem;
  line-height: 1.1;
  margin: 0;
}

.simulation-settings-heading span {
  color: color-mix(in srgb, CanvasText 54%, transparent);
  font-size: 0.74rem;
  text-align: right;
}

.simulation-settings-grid {
  display: grid;
  gap: 0.40rem;
  padding: 0.2rem;
}

.simulation-character-row {
  align-items: center;
  background: color-mix(in srgb, CanvasText 2%, Canvas);
  border: 1px solid color-mix(in srgb, CanvasText 8%, transparent);
  border-radius: 6px;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(8rem, 11.5rem) minmax(7.8rem, 8.5rem) max-content max-content minmax(10rem, 14.5rem);
  padding: 0.30rem;
  padding-left: 0.5rem;
}

/* Starts at the melee/ranged column so the name column stays clear. */
.character-high-ground-rounds {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  grid-column: 2 / -1;
  padding-top: 0.15rem;
}

.simulation-character-row.is-empty .character-high-ground-rounds {
  display: none;
}

/* Matches .round-setting span so the strip reads as one of the row's settings. */
.character-high-ground-label {
  color: color-mix(in srgb, CanvasText 30%, transparent);
  font-size: 0.7rem;
  font-weight: 650;
}

.character-high-ground-round {
  align-items: center;
  color: color-mix(in srgb, CanvasText 30%, transparent);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 650;
  gap: 0.18rem;
}

.character-high-ground-all {
  margin-left: 0.3rem;
}

.machine-of-war-simulation-row {
  grid-template-columns: minmax(8rem, 11.5rem) minmax(0, 1fr);
}

.machine-of-war-simulation-row[hidden] {
  display: none;
}

.machine-of-war-simulation-controls {
  align-items: center;
  display: grid;
  gap: 0.45rem 0.9rem;
  grid-column: 2;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  min-width: 0;
}

.machine-of-war-simulation-controls .round-setting {
  grid-template-columns: max-content minmax(8rem, 11rem);
  width: max-content;
}

.machine-of-war-simulation-controls .machine-of-war-target-setting {
  grid-template-columns: 6.5rem 11rem;
}

.round-setting.simulation-compact-toggle {
  background: color-mix(in srgb, CanvasText 3%, Canvas);
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 999px;
  box-sizing: border-box;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) 1rem;
  padding: 0.22rem 0.42rem 0.22rem 0.55rem;
  min-width: 11rem;
}

.round-setting.simulation-compact-toggle:has(input:checked) {
  background: color-mix(in srgb, CanvasText 5%, Canvas);
  border-color: color-mix(in srgb, CanvasText 15%, Canvas);
}

.machine-of-war-simulation-controls .machine-of-war-rounds {
  grid-column: 1 / -1;
}

.simulation-character-row.is-empty {
  color: color-mix(in srgb, CanvasText 48%, transparent);
}

.simulation-character-name {
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-setting {
  align-items: center;
  display: grid;
  gap: 0.22rem;
  grid-template-columns: max-content 3rem;
  margin: 0;
  min-width: 0;
  width: max-content;
}

.round-setting-character[hidden] {
  display: none;
}
.round-setting-character:has(input:disabled) {
  display: none;
}

.default-attack-setting {
  align-items: center;
  border: 0;
  gap: 0.35rem;
  grid-column: 2;
  grid-template-columns: minmax(0, 2.55rem) minmax(4.85rem, 1fr);
  margin: 0;
  min-width: 0;
  padding: 0;
}

.round-setting-character {
  grid-column: 5;
  grid-template-columns: max-content minmax(3rem, 1fr);
  width: 100%;
}

.round-setting-enter {
  grid-column: 3;
}

.round-setting-active {
  grid-column: 4;
}

.round-setting.is-disabled {
  opacity: 0.45;
}

.round-setting.is-disabled input {
  cursor: not-allowed;
  pointer-events: none;
}

.default-attack-setting[hidden] {
  display: none;
}

.default-attack-setting legend {
  color: color-mix(in srgb, CanvasText 66%, transparent);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-setting span {
  color: color-mix(in srgb, CanvasText 30%, transparent);
  font-size: 0.7rem;
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-setting span[data-character-setting-label] {
  align-items: center;
  display: inline-flex;
  gap: 0.24rem;
}

.character-setting-icon {
  flex: 0 0 auto;
  height: 1rem;
  width: 1rem;
}

.default-attack-toggle {
  background: color-mix(in srgb, CanvasText 7%, Canvas);
  border: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, CanvasText 30%, transparent);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 1.35rem;
  overflow: hidden;
  padding: 2px;
  position: relative;
}

.default-attack-toggle::before {
  background: Canvas;
  border-radius: inherit;
  box-shadow: 0 1px 3px color-mix(in srgb, CanvasText 18%, transparent);
  content: "";
  inset: 2px auto 2px 2px;
  position: absolute;
  transition: transform 160ms ease;
  width: calc(50% - 2px);
}

.default-attack-toggle:has(input[value="ranged"]:checked)::before {
  transform: translateX(100%);
}

.default-attack-option {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  line-height: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.default-attack-option + .default-attack-option {
  border-left: 0;
}

.default-attack-option input {
  appearance: none;
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.default-attack-option span {
  align-items: center;
  display: inline-flex;
  height: 100%;
  overflow: hidden;
  padding: 0.22rem 0.28rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.default-attack-option:has(input:checked) {
  color: color-mix(in srgb, CanvasText 70%, transparent);
}

.default-attack-option input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.default-attack-option.is-unavailable {
  color: color-mix(in srgb, CanvasText 0%, transparent);
  cursor: not-allowed;
}

.round-setting input,
.round-setting select {
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 6px;
  box-sizing: border-box;
  color: CanvasText;
  font: inherit;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  min-height: 1.8rem;
  overflow: hidden;
  padding: 0.18rem 0.35rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Target pickers hold character names, so they need the same arrow clearance
   and ellipsis as the loadout controls. */
.round-setting select {
  padding-right: 1.25rem;
  text-align: left;
}

.round-setting select:disabled {
  background: color-mix(in srgb, CanvasText 3%, Canvas);
  border-color: color-mix(in srgb, CanvasText 10%, transparent);
  color: var(--muted-text);
  cursor: not-allowed;
  opacity: 0.65;
}

.round-setting-checkbox {
  grid-template-columns: minmax(0, 1fr) 1.6rem;
}

.round-setting-checkbox input[type="checkbox"] {
  accent-color: var(--accent);
  justify-self: end;
  min-height: 1rem;
  width: 1rem;
}

.icon-button {
  align-items: center;
  appearance: none;
  background: Canvas;
  border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 6px;
  color: CanvasText;
  display: inline-flex;
  height: 2.55rem;
  justify-content: center;
  padding: 0;
  width: 2.55rem;
}

.icon-button:hover {
  background: color-mix(in srgb, CanvasText 6%, Canvas);
  border-color: color-mix(in srgb, CanvasText 34%, transparent);
}

.button-icon {
  display: block;
  fill: none;
  height: 1.05rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.05rem;
}

.scenario-armor-editor:not(.is-editing) .scenario-armor-save-icon {
  display: none;
}

.scenario-armor-editor.is-editing .scenario-armor-edit-icon {
  display: none;
}

.scenario-armor-editor.is-editing .scenario-armor-save-icon {
  display: block;
}

.run-sim-button {
  justify-self: start;
  padding-inline: 1.2rem;
  background: color-mix(in srgb, #b1721f 82%, Canvas 18%);
  color: color-mix(in srgb, #000000 80%, Canvas 20%);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 80ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .run-sim-button:hover {
    background: color-mix(in srgb, #ffffff 82%, Canvas 18%);
    border-color: color-mix(in srgb, #000000 72%, CanvasText 28%);
  }
}

.run-sim-button:focus-visible {
  outline: 2px solid color-mix(in srgb, CanvasText 32%, transparent);
  outline-offset: 2px;
}

.run-sim-button:active {
  transform: translateY(1px);
}

.save-simulation-result-button {
  justify-self: end;
  padding-inline: 1.2rem;
}

.save-simulation-result-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.saved-simulation-summary {
  align-items: center;
  color: color-mix(in srgb, CanvasText 70%, transparent);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 0.35rem 0.85rem;
  grid-column: 1 / -1;
  justify-self: end;
}

.saved-simulation-summary[hidden] {
  display: none;
}

.saved-simulation-total {
  align-items: baseline;
  display: flex;
  gap: 0.3rem;
}

.saved-simulation-total strong,
.saved-simulation-delta {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.saved-simulation-delta.is-positive {
  color: color-mix(in srgb, #16813b 88%, CanvasText 12%);
}

.saved-simulation-delta.is-negative {
  color: color-mix(in srgb, #c43d3d 88%, CanvasText 12%);
}

.simulation-results {
  border-top: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  margin-top: 1rem;
  padding-top: 0.85rem;
}

.simulation-results > .muted {
  margin: 0;
}

.results-shell {
  display: grid;
  gap: 0.85rem;
}

.results-heading {
  display: grid;
  gap: 0.15rem;
}

.results-heading h2,
.results-heading h3 {
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
}

.result-metrics {
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.7rem;
}

.result-metric {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.result-metric span {
  color: color-mix(in srgb, CanvasText 64%, transparent);
  font-size: 0.78rem;
}

.result-metric strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.mobile-results-viewer {
  display: none;
}

.damage-matrix-wrap {
  display: grid;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.1rem 0.05rem 0.25rem;
}

.damage-matrix-section {
  background: var(--surface-raised);
  border: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
  border-radius: 8px;
  box-shadow: 0 1px 2px color-mix(in srgb, CanvasText 6%, transparent);
  min-width: 560px;
  overflow: hidden;
}

.damage-matrix-section + .damage-matrix-section {
  margin-top: 0.35rem;
}

.damage-matrix {
  background: transparent;
  border: 0;
  border-collapse: separate;
  border-radius: 0;
  border-spacing: 0;
  font-size: 0.84rem;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.damage-matrix + .damage-matrix {
  margin-top: 0;
}

.damage-matrix-label-col {
  width: 34%;
}

.damage-matrix-total-col {
  width: 14%;
}

.damage-matrix th,
.damage-matrix td {
  border-bottom: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
  padding: 0.42rem 0.5rem;
  text-align: right;
  white-space: nowrap;
}

.damage-matrix th:first-child,
.damage-matrix td:first-child {
  text-align: left;
}

.damage-matrix thead th {
  color: color-mix(in srgb, CanvasText 64%, transparent);
  font-size: 0.76rem;
  font-weight: 650;
}

.damage-matrix tbody th {
  font-weight: 650;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-total-matrix tbody tr {
  color: color-mix(in srgb, #b1721f 99%, Canvas 1%);
}

.damage-matrix tbody tr:last-child > th,
.damage-matrix tbody tr:last-child > td {
  border-bottom: 0;
}

.damage-number {
  font-variant-numeric: tabular-nums;
}

.damage-total {
  font-weight: 700;
}

.round-results {
  display: grid;
  gap: 0.65rem;
}

.simulation-debug-log {
  background: color-mix(in srgb, CanvasText 3%, Canvas);
  border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
}

.simulation-debug-log h3 {
  font-size: 0.95rem;
  margin: 0;
}

.simulation-debug-log ol {
  display: grid;
  gap: 0.28rem;
  list-style: none;
  margin: 0;
  max-height: 28rem;
  overflow: auto;
  padding-left: 0;
}

.simulation-debug-log li {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  line-height: 1.45;
}

.simulation-log-index {
  color: color-mix(in srgb, CanvasText 58%, transparent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.simulation-log-content {
  min-width: 0;
}

.simulation-hit-subline {
  margin-left: 1rem;
}

.round-result {
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 8px;
  margin-top: 0;
  overflow: hidden;
  padding: 0;
}

.round-result:nth-child(odd) {
  background: var(--surface-muted);
}

.round-result:nth-child(even) {
  background: var(--surface-raised);
}

.round-result > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}

.round-result > summary strong {
  font-variant-numeric: tabular-nums;
}

.round-result[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
}

.round-summary-title {
  font-weight: 700;
}

.round-detail-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  padding: 0.75rem 0.85rem 0.9rem;
}

.round-breakdown {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.round-breakdown h3 {
  color: color-mix(in srgb, CanvasText 70%, transparent);
  font-size: 0.82rem;
  margin: 0;
}

.character-round-list {
  display: grid;
  gap: 0.38rem;
}

.character-round-detail {
  border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
  border-radius: 6px;
  margin: 0;
  overflow: hidden;
}

.character-round-detail:nth-child(odd) {
  background: color-mix(in srgb, CanvasText 3%, Canvas);
}

.character-round-detail:nth-child(even) {
  background: color-mix(in srgb, CanvasText 7%, Canvas);
}

.character-round-detail > summary {
  cursor: pointer;
  display: grid;
  gap: 0.22rem;
  list-style: none;
  padding: 0.42rem 0.55rem;
}

.character-round-detail > summary::-webkit-details-marker {
  display: none;
}

.character-round-main {
  align-items: center;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  min-width: 0;
}

.character-round-toggle {
  border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  border-radius: 999px;
  display: inline-grid;
  height: 1rem;
  place-items: center;
  position: relative;
  width: 1rem;
}

.character-round-toggle::before,
.character-round-toggle::after {
  background: currentColor;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.48rem;
}

.character-round-toggle::after {
  height: 0.48rem;
  width: 1px;
}

.character-round-detail[open] .character-round-toggle::after {
  display: none;
}

.character-round-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-round-damage {
  font-variant-numeric: tabular-nums;
}

.character-round-track {
  background: color-mix(in srgb, CanvasText 8%, Canvas);
  border-radius: 999px;
  height: 0.18rem;
  overflow: hidden;
}

.character-round-fill {
  background: color-mix(in srgb, CanvasText 58%, Canvas);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--damage-share);
}

.character-round-stats {
  border-top: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(auto-fit, minmax(6.1rem, 1fr));
  margin: 0;
  padding: 0.5rem 0.6rem 0.45rem 2rem;
}

.character-round-stats div {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.character-round-stats dt {
  color: color-mix(in srgb, CanvasText 58%, transparent);
  font-size: 0.68rem;
  font-weight: 650;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-round-stats dd {
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  margin: 0;
}

.output-modifier-list {
  border-top: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  display: grid;
  gap: 0.24rem;
  padding: 0.45rem 0.6rem 0.45rem 2rem;
}

.output-modifier-list h4 {
  color: color-mix(in srgb, CanvasText 64%, transparent);
  font-size: 0.72rem;
  line-height: 1;
  margin: 0 0 0.1rem;
}

.output-modifier-list > span {
  color: color-mix(in srgb, CanvasText 56%, transparent);
  font-size: 0.76rem;
}

.output-modifier-row {
  align-items: center;
  color: color-mix(in srgb, CanvasText 76%, transparent);
  display: grid;
  font-size: 0.78rem;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.output-modifier-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.output-modifier-row strong,
.output-modifier-row em {
  color: CanvasText;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.attack-damage-list {
  border-top: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  display: grid;
  gap: 0.42rem;
  padding: 0.45rem 0.6rem 0.45rem 2rem;
}

.attack-damage-list h4 {
  color: color-mix(in srgb, CanvasText 64%, transparent);
  font-size: 0.72rem;
  line-height: 1;
  margin: 0 0 0.1rem;
}

.attack-damage-list > span {
  color: color-mix(in srgb, CanvasText 56%, transparent);
  font-size: 0.76rem;
}

.attack-damage-detail {
  background: color-mix(in srgb, CanvasText 3%, Canvas);
  border: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
  border-radius: 7px;
  overflow: hidden;
}

.attack-damage-detail > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  list-style: none;
  padding: 0.46rem 0.55rem;
}

.attack-damage-detail > summary::-webkit-details-marker {
  display: none;
}

.attack-damage-heading {
  align-items: baseline;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.attack-damage-name {
  font-size: 0.82rem;
  font-weight: 750;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attack-damage-heading em {
  color: color-mix(in srgb, CanvasText 56%, transparent);
  font-size: 0.7rem;
  font-style: normal;
  white-space: nowrap;
}

.attack-damage-detail > summary strong,
.attack-damage-fallback strong {
  font-variant-numeric: tabular-nums;
}

.attack-hit-list {
  background: color-mix(in srgb, CanvasText 2%, Canvas);
  border-top: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  display: grid;
  gap: 0.3rem;
  padding: 0.42rem;
}

.attack-damage-fallback {
  align-items: center;
  border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  border-radius: 7px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.46rem 0.55rem;
}

.hit-damage-detail {
  border: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
  border-radius: 6px;
  overflow: hidden;
}

.hit-damage-detail > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  list-style: none;
  padding: 0.35rem 0.45rem;
}

.hit-damage-detail > summary::-webkit-details-marker {
  display: none;
}

.hit-damage-heading {
  align-items: center;
  display: flex;
  gap: 0.38rem;
  min-width: 0;
}

.hit-damage-name {
  font-size: 0.76rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit-damage-detail > summary em {
  color: color-mix(in srgb, CanvasText 58%, transparent);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.hit-damage-detail > summary .hit-source-unit,
.hit-damage-detail > summary .hit-extra-source {
  background: color-mix(in srgb, CanvasText 7%, Canvas);
  border-radius: 999px;
  color: color-mix(in srgb, CanvasText 70%, transparent);
  font-size: 0.66rem;
  padding: 0.12rem 0.35rem;
}

.hit-damage-detail-removed {
  background: color-mix(in srgb, CanvasText 3%, Canvas);
  border-style: dashed;
}

.hit-damage-detail > summary .hit-removed-source {
  background: color-mix(in srgb, #b45309 14%, Canvas);
  border-radius: 999px;
  color: color-mix(in srgb, #b45309 82%, CanvasText);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.12rem 0.35rem;
}

.hit-removed-detail {
  border-top: 1px solid color-mix(in srgb, CanvasText 9%, transparent);
  color: color-mix(in srgb, CanvasText 64%, transparent);
  font-size: 0.72rem;
  padding: 0.38rem 0.45rem;
}

.hit-damage-detail > summary strong {
  font-variant-numeric: tabular-nums;
}

.hit-damage-stats {
  border-top: 1px solid color-mix(in srgb, CanvasText 9%, transparent);
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
  margin: 0;
  padding: 0.38rem 0.45rem;
}

.hit-damage-stats div {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
}

.hit-damage-stats dt {
  color: color-mix(in srgb, CanvasText 58%, transparent);
  font-size: 0.66rem;
  font-weight: 650;
  margin: 0;
}

.hit-damage-stats dd {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  margin: 0;
}

.hit-modifier-list {
  border-top: 1px solid color-mix(in srgb, CanvasText 9%, transparent);
  display: grid;
  gap: 0.22rem;
  padding: 0.35rem 0.45rem;
}

.hit-modifier-empty {
  color: color-mix(in srgb, CanvasText 54%, transparent);
  font-size: 0.72rem;
}

.hit-modifier-row {
  align-items: center;
  color: color-mix(in srgb, CanvasText 74%, transparent);
  display: grid;
  font-size: 0.74rem;
  gap: 0.4rem;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
}

.hit-modifier-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit-modifier-row strong,
.hit-modifier-row em {
  color: CanvasText;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 1040px) {
  body {
    padding: 1rem;
  }

  .machine-of-war-support {
    max-width: none;
  }

  .replacement-grid:has(.roster-character-tile) {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    justify-content: center;
  }

  .replacement-grid:has(.roster-character-tile) .roster-character-tile {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 8rem minmax(0, 8rem);
    height: auto;
    justify-content: center;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    padding: 0.65rem;
    width: 100%;
  }

  .replacement-grid:has(.roster-character-tile) .character-title-row {
    grid-column: 1 / -1;
  }

  .replacement-grid:has(.roster-character-tile) .character-name {
    height: auto;
    white-space: nowrap;
  }

  .replacement-grid:has(.roster-character-tile) .character-portrait {
    width: 5rem;
  }

  .machine-of-war-choice {
    min-height: 0;
    padding: 0.65rem;
    width: 100%;
  }

  .machine-of-war-choice .machine-of-war-card-body {
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: 8rem minmax(0, 8rem);
    grid-template-rows: auto 1fr;
    justify-content: center;
  }

  .machine-of-war-choice .character-title-row {
    grid-column: 1 / -1;
  }

  .machine-of-war-choice .character-portrait {
    grid-column: 1;
    grid-row: 2;
    width: 5rem;
  }

  .machine-of-war-choice .character-details {
    grid-column: 2;
    grid-row: 2;
  }

  .selected-team-grid {
    align-items: stretch;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    justify-content: center;
    overflow-x: visible;
    padding-bottom: 0.15rem;
  }

  .selected-character {
    align-self: stretch;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: var(--team-tile-compact-height);
    min-width: 0;
    width: 100%;
  }
  
  .selected-character-tile {
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    grid-template-columns: 8rem minmax(0, 8rem);
    height: var(--team-tile-compact-height);
    justify-content: center;
    max-height: var(--team-tile-compact-height);
    max-width: none;
    min-height: var(--team-tile-compact-height);
    min-width: 0;
    width: 100%;
  }

  .selected-character-tile .character-title-row {
    grid-column: 1 / -1;
  }

  .selected-character-tile .character-name {
    height: auto;
    white-space: nowrap;
  }

  .selected-character-tile .character-portrait {
    width: 5rem;
  }

  .section-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .section-summary {
    grid-column: 2;
    font-size: 0.78rem;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-topbar {
    gap: 0.5rem;
  }

  .page-topbar .account-name {
    display: none;
  }

  .replacement-modal-backdrop {
    --mobile-modal-edge: 0.75rem;
    padding: var(--mobile-modal-edge);
  }

  .replacement-modal {
    --replacement-modal-inline-padding: 0.75rem;
    padding-inline: var(--replacement-modal-inline-padding);
    width: auto;
    --mobile-roster-rail-top: var(--mobile-modal-edge);
  }

  .app-news-modal-header {
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 60;
  }

  .replacement-featured {
    position: static;
  }

  .replacement-featured-close {
    top: calc(var(--mobile-modal-edge) + 0.65rem + 2px);
  }

  .scenario-controls {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .replacement-featured-card-body {
    align-items: start;
    display: grid;
    gap: 0.75rem 1rem;
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 16rem);
    justify-content: center;
    justify-items: stretch;
  }

  .replacement-featured-card-body .character-title-row {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .replacement-featured-card-body .character-name {
    height: auto;
    text-align: center;
    white-space: nowrap;
  }

  .replacement-featured-card-body .character-portrait {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: 8rem;
  }

  .replacement-featured-card-body .character-details {
    align-self: center;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  .replacement-featured-card-body .character-traits {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-items: center;
    text-align: center;
    width: 100%;
  }

  .replacement-featured-card-body .character-trait-list {
    justify-content: center;
  }

  .replacement-featured-card-body .character-loadout {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: 1fr;
    justify-self: stretch;
    width: 100%;
  }

  .character-loadout-section {
    grid-template-columns: 1fr;
  }

  .character-loadout-progression {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .replacement-roster-layout {
    column-gap: 0.4rem;
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
  }

  .roster-faction-jump-bar {
    width: 100%;
    align-self: start;
    max-height: calc(100dvh - var(--mobile-roster-rail-top) - 0.75rem);
    position: sticky;
    top: var(--mobile-roster-rail-top);
    z-index: 40;
  }

  .roster-faction-jump-bar[data-roster-faction-bar="left"] {
    grid-column: 1;
    left: auto;
  }

  .roster-faction-jump-bar[data-roster-faction-bar="right"] {
    grid-column: 3;
    right: auto;
  }

  .replacement-roster {
    grid-column: 2;
    grid-row: 1;
  }

  .roster-faction-jump img {
    height: 1.18rem;
    width: 1.18rem;
  }

  .simulation-controls {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .simulation-character-row {
    grid-template-columns: 1fr;
  }

  /* Character rows only, not the Machine of War row: the name gets a slim line
     of its own, then the settings pair up two per line. Melee/ranged and high
     ground lead so the two round pickers land together on the line below.
     DOM order still puts high ground last, so these are reordered visually. */
  .simulation-character-row[data-sim-settings-row] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simulation-character-row[data-sim-settings-row] .simulation-character-name {
    grid-column: 1 / -1;
    order: 1;
  }

  .simulation-character-row[data-sim-settings-row] .default-attack-setting {
    order: 2;
  }

  .simulation-character-row[data-sim-settings-row] .character-high-ground-rounds {
    grid-column: auto;
    order: 3;
    padding-top: 0;
  }

  .simulation-character-row[data-sim-settings-row] .round-setting-enter {
    order: 4;
  }

  .simulation-character-row[data-sim-settings-row] .round-setting-active {
    order: 5;
  }

  .simulation-character-row[data-sim-settings-row] .round-setting-character {
    order: 6;
  }

  .machine-of-war-simulation-controls {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .machine-of-war-simulation-controls .round-setting:not(.simulation-compact-toggle) {
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem);
    width: min(100%, 22rem);
  }

  .machine-of-war-simulation-controls .machine-of-war-rounds {
    grid-column: auto;
  }

  .default-attack-setting,
  .round-setting-character,
  .round-setting-enter,
  .round-setting-active {
    grid-column: auto;
  }

  .round-setting {
    grid-template-columns: minmax(0, 1fr) 3.25rem;
    width: 100%;
  }


  .saved-team-buttons {
    justify-content: flex-start;
  }

  .save-team-modal-actions {
    display: grid;
  }

  .result-metrics {
    grid-template-columns: 1fr;
  }

  .mobile-results-viewer {
    display: grid;
    gap: 0.75rem;
  }

  .results-damage-matrix-wrap,
  .round-results {
    display: none;
  }

  .mobile-result-metrics {
    display: grid;
    gap: 0.55rem;
  }

  .mobile-result-metric {
    background: var(--surface-raised);
    border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
    border-radius: 8px;
    display: grid;
    gap: 0.18rem;
    padding: 0.7rem 0.8rem;
  }

  .mobile-result-metric span,
  .mobile-result-metric em {
    color: color-mix(in srgb, CanvasText 62%, transparent);
    font-size: 0.76rem;
    font-style: normal;
  }

  .mobile-result-metric strong {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .mobile-round-selector {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .mobile-round-chip-row {
    display: flex;
    order: -1;
    padding-bottom: 0.1rem;
    gap: clamp(0.15rem, 1vw, 0.4rem);
    overflow-x: visible;
    scrollbar-width: none;
  }

  .mobile-round-chip,
  .mobile-round-nav {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
    border-radius: 999px;
    color: CanvasText;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.48rem 0.72rem;
    white-space: nowrap;
  }

  .mobile-round-chip {
    box-sizing: border-box;
    flex: 1 1 0;
    font-size: clamp(0.58rem, 2.7vw, 0.82rem);
    min-height: clamp(1.85rem, 7vw, 2.45rem);
    min-width: 0;
    overflow: hidden;
    padding-block: clamp(0.28rem, 1.6vw, 0.48rem);
    padding-inline: clamp(0.18rem, 2vw, 0.72rem);
    text-overflow: ellipsis;
  }

  .mobile-round-chip.is-active,
  .mobile-round-chip[aria-pressed="true"] {
    background: color-mix(in srgb, CanvasText 14%, Canvas);
    border-color: color-mix(in srgb, CanvasText 34%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, CanvasText 18%, transparent);
  }

  .mobile-round-nav:disabled {
    cursor: default;
    opacity: 0.45;
  }

  .mobile-round-panels {
    display: grid;
  }

  .mobile-round-panel {
    background: var(--surface-raised);
    border: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
    border-radius: 8px;
    display: grid;
    gap: 0.7rem;
    padding: 0.75rem;
  }

  .mobile-round-panel[hidden] {
    display: none;
  }

  .mobile-selected-round-heading {
    display: grid;
    gap: 0.18rem;
  }

  .mobile-selected-round-heading span {
    color: color-mix(in srgb, CanvasText 64%, transparent);
    font-size: 0.78rem;
    font-weight: 650;
  }

  .mobile-selected-round-heading strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
  }

  .mobile-character-total-list {
    display: grid;
    gap: 0.38rem;
  }

  .mobile-character-total-row {
    background: color-mix(in srgb, CanvasText 4%, Canvas);
    border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
    border-radius: 6px;
    display: grid;
    gap: 0.28rem;
    padding: 0.48rem 0.55rem;
  }

  .mobile-character-total-main {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    min-width: 0;
  }

  .mobile-character-total-main span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-character-total-main strong {
    font-variant-numeric: tabular-nums;
  }

  .mobile-round-panel .character-round-detail > summary {
    min-height: 2.65rem;
  }

  .round-detail-grid {
    grid-template-columns: 1fr;
  }

  .attack-damage-list {
    padding-left: 0.6rem;
  }

  .attack-damage-heading,
  .hit-damage-heading {
    flex-wrap: wrap;
  }

  .output-modifier-row {
    align-items: start;
    grid-template-columns: 1fr;
  }
}