.combat-page {
  --combat-gold: var(--gold, #c89b3c);
  --combat-gold-soft: rgba(200, 155, 60, 0.16);
  --combat-panel: var(--paper, #fbf5e9);
  --combat-panel-2: var(--paper-2, #f4eadb);
  --combat-line: var(--line, #d3ba97);
  --combat-text: var(--ink, #30241d);
  --combat-muted: var(--muted, #6e6055);
  --combat-danger: #c85d5d;
  --combat-success: #5fa878;
  --combat-on-deck: #6f91d5;
  --combat-on-deck-soft: rgba(111, 145, 213, 0.16);
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 64px;
  color: var(--combat-text);
}

.combat-page *,
.combat-page *::before,
.combat-page *::after {
  box-sizing: border-box;
}

.combat-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.combat-heading h1,
.combat-heading p {
  margin-top: 0;
}

.combat-heading h1 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.combat-heading > div > p:last-child {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--combat-muted);
}

.combat-eyebrow,
.combat-kicker {
  margin: 0 0 6px;
  color: var(--combat-gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.combat-public-link,
.combat-page button,
.combat-page input,
.combat-page select {
  font: inherit;
}

.combat-public-link,
.combat-page button {
  border: 1px solid var(--combat-line);
  border-radius: 10px;
  background: var(--combat-panel-2);
  color: var(--combat-text);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.combat-public-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  text-decoration: none;
}

.combat-public-link:hover,
.combat-page button:hover:not(:disabled) {
  border-color: var(--combat-gold);
  background: var(--combat-gold-soft);
}

.combat-page button:active:not(:disabled) {
  transform: translateY(1px);
}

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

.combat-page input,
.combat-page select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--combat-line);
  border-radius: 9px;
  background: var(--combat-panel-2);
  color: var(--combat-text);
  padding: 8px 10px;
}

.combat-page input:focus,
.combat-page select:focus,
.combat-page button:focus-visible,
.combat-public-link:focus-visible {
  outline: 2px solid var(--combat-gold);
  outline-offset: 2px;
}

.combat-primary {
  border-color: rgba(200, 155, 60, 0.72) !important;
  background: linear-gradient(180deg, rgba(200, 155, 60, 0.28), rgba(200, 155, 60, 0.13)) !important;
  font-weight: 800;
}

.combat-danger,
.combat-danger-link {
  border-color: rgba(200, 93, 93, 0.5) !important;
  color: #f1aaaa !important;
}

.combat-danger-link {
  background: transparent !important;
}

.combat-live-indicator,
.combat-save-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--combat-muted);
  white-space: nowrap;
}

.combat-live-indicator > span,
.combat-save-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d29b45;
  box-shadow: 0 0 0 4px rgba(210, 155, 69, 0.13);
}

.combat-live-indicator[data-status="live"] > span,
.combat-save-state[data-status="saved"] .combat-save-dot {
  background: var(--combat-success);
  box-shadow: 0 0 0 4px rgba(95, 168, 120, 0.13);
}

.combat-live-indicator[data-status="offline"] > span,
.combat-save-state[data-status="offline"] .combat-save-dot,
.combat-save-state[data-status="expired"] .combat-save-dot,
.combat-save-state[data-status="conflict"] .combat-save-dot {
  background: var(--combat-danger);
  box-shadow: 0 0 0 4px rgba(200, 93, 93, 0.14);
}

.combat-viewer,
.combat-editor-toolbar,
.combat-editor-column,
.combat-conflict {
  border: 1px solid var(--combat-line);
  border-radius: 16px;
  background: var(--combat-panel);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.combat-summary-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--combat-line);
}

.combat-summary-bar > div {
  display: grid;
  gap: 3px;
}

.combat-summary-bar > div:last-child {
  text-align: right;
}

.combat-summary-label {
  color: var(--combat-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.combat-summary-bar strong {
  font-size: 1.35rem;
}

.combat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.combat-list--viewer {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.combat-row {
  position: relative;
  border: 1px solid var(--combat-line);
  border-radius: 12px;
  background: var(--combat-panel-2);
  overflow: hidden;
}

.combat-row.is-active {
  border-color: var(--combat-gold);
  box-shadow: 0 0 0 2px var(--combat-gold-soft), 0 12px 34px rgba(0, 0, 0, 0.2);
}

.combat-row.is-active::before {
  content: "Current turn";
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 9px;
  border-radius: 0 11px 0 9px;
  background: var(--combat-gold);
  color: #17130c;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.combat-row.is-on-deck:not(.is-active) {
  border-color: var(--combat-on-deck);
  box-shadow: 0 0 0 2px var(--combat-on-deck-soft), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.combat-row.is-on-deck:not(.is-active)::before {
  content: "On deck";
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 9px;
  border-radius: 0 11px 0 9px;
  background: var(--combat-on-deck);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.combat-row.is-out {
  opacity: 0.52;
  filter: grayscale(0.45);
}

.combat-row.is-downed:not(.is-out) {
  border-color: rgba(200, 93, 93, 0.62);
}

.combat-row--viewer {
  display: grid;
  grid-template-columns: 62px minmax(180px, 1.1fr) minmax(170px, 1fr) minmax(190px, auto);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 15px 18px;
}

.combat-row-init {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.combat-row-init span {
  color: var(--combat-muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.combat-row-init strong {
  font-size: 1.8rem;
  line-height: 1;
}

.combat-row-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.combat-row-name strong {
  min-width: 0;
  overflow: hidden;
  font-size: 1.12rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-type-badge {
  display: inline-grid;
  min-width: 36px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.combat-type-badge--pc {
  background: rgba(85, 137, 198, 0.2);
  color: #9cc8ff;
}

.combat-type-badge--npc {
  background: rgba(200, 155, 60, 0.18);
  color: #e8c77f;
}

.combat-row-meta {
  margin-top: 5px;
  color: var(--combat-muted);
  font-size: 0.86rem;
}

.combat-row-conditions,
.combat-row-resources,
.combat-row-condition-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.combat-condition-pill,
.combat-resource-chip,
.combat-row-condition-summary > span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid var(--combat-line);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--combat-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.combat-resource-chip.is-ready,
.combat-resource-chip.is-concentration {
  border-color: rgba(95, 168, 120, 0.45);
  color: #9ed7b2;
}

.combat-resource-chip.is-spent {
  text-decoration: line-through;
  opacity: 0.7;
}

.combat-row-resources {
  justify-content: flex-end;
}

.combat-row-aside {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 10px;
  min-width: 190px;
}

.combat-view-appearance {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.combat-view-appearance-label {
  color: var(--combat-muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.combat-view-appearance-value {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--combat-line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.combat-view-appearance-value.is-healthy {
  border-color: rgba(77, 177, 129, 0.45);
  background: rgba(77, 177, 129, 0.14);
  color: #9fe0b8;
}

.combat-view-appearance-value.is-lightly-wounded {
  border-color: rgba(190, 167, 71, 0.42);
  background: rgba(190, 167, 71, 0.14);
  color: #e7d98c;
}

.combat-view-appearance-value.is-wounded {
  border-color: rgba(212, 147, 76, 0.45);
  background: rgba(212, 147, 76, 0.14);
  color: #efc086;
}

.combat-view-appearance-value.is-heavily-wounded {
  border-color: rgba(214, 115, 72, 0.48);
  background: rgba(214, 115, 72, 0.14);
  color: #f0a681;
}

.combat-view-appearance-value.is-critical {
  border-color: rgba(213, 87, 87, 0.55);
  background: rgba(213, 87, 87, 0.16);
  color: #f0a3a3;
}

.combat-view-pips,
.combat-view-death-saves,
.combat-view-death-group,
.combat-pips {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.combat-view-death-saves {
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 800;
}

.combat-pip {
  display: inline-block;
  width: 14px;
  height: 14px;
  min-height: 0;
  border: 1px solid var(--combat-line) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent !important;
}

.combat-pip--legendary.is-filled {
  border-color: var(--combat-gold) !important;
  background: var(--combat-gold) !important;
}

.combat-pip--success.is-filled {
  border-color: var(--combat-success) !important;
  background: var(--combat-success) !important;
}

.combat-pip--failure.is-filled {
  border-color: var(--combat-danger) !important;
  background: var(--combat-danger) !important;
}

.combat-empty,
.combat-empty-selection {
  padding: 48px 24px;
  text-align: center;
  color: var(--combat-muted);
}

.combat-empty h2,
.combat-empty-selection h2 {
  margin: 0 0 8px;
  color: var(--combat-text);
}

/* Editor */
.combat-editor {
  display: grid;
  gap: 16px;
}

.combat-editor-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: end;
  gap: 14px;
  padding: 15px;
}

.combat-encounter-name,
.combat-round-control,
.combat-add-fields label,
.combat-field-grid label,
.combat-legendary-settings label {
  display: grid;
  gap: 5px;
  color: var(--combat-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.combat-turn-controls {
  display: flex;
  align-items: end;
  gap: 8px;
}

.combat-turn-controls > button {
  min-height: 42px;
  padding: 8px 12px;
}

.combat-round-control {
  width: 78px;
}

.combat-conflict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border-color: rgba(200, 93, 93, 0.55);
}

.combat-conflict[hidden] {
  display: none;
}

.combat-conflict p {
  margin: 3px 0 0;
  color: var(--combat-muted);
}

.combat-conflict > div:last-child {
  display: flex;
  gap: 8px;
}

.combat-conflict button {
  min-height: 40px;
  padding: 8px 12px;
}

.combat-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.combat-editor-column {
  min-width: 0;
  padding: 18px;
}

.combat-editor-column--details {
  position: sticky;
  top: calc(var(--header-h, 84px) + 14px);
  max-height: calc(100vh - var(--header-h, 84px) - 28px);
  overflow: auto;
}

.combat-panel-heading,
.combat-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.combat-panel-heading h2,
.combat-detail-heading h3 {
  margin: 0;
}

.combat-count {
  color: var(--combat-muted);
  font-size: 0.78rem;
}

.combat-add-form {
  display: grid;
  gap: 12px;
  margin: 18px 0 12px;
  padding: 14px;
  border: 1px solid var(--combat-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.combat-add-fields {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) repeat(6, minmax(72px, 0.65fr));
  gap: 9px;
}

.combat-add-form > button {
  min-height: 42px;
}

.combat-inline-check {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.combat-inline-check input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
}

.combat-inline-check input[type="number"] {
  width: 70px;
}

.combat-drag-help,
.combat-muted {
  color: var(--combat-muted);
  font-size: 0.78rem;
}

.combat-list--editor {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.combat-row--editor {
  display: grid;
  grid-template-columns: 34px 66px minmax(170px, 1fr) minmax(110px, auto) 82px;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 8px;
}

.combat-row--editor.is-selected {
  box-shadow: inset 3px 0 0 var(--combat-gold);
}

.combat-drag-handle,
.combat-row-turn-button {
  min-height: 40px;
  padding: 6px;
}

.combat-drag-handle {
  color: var(--combat-muted);
  cursor: grab !important;
  letter-spacing: -4px;
}

.combat-row-init-input {
  min-height: 40px !important;
  padding: 6px !important;
  text-align: center;
  font-weight: 900;
}

.combat-row-select {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  border: 0 !important;
  background: transparent !important;
  padding: 4px 6px !important;
  text-align: left;
}

.combat-row-select-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.combat-row-select-text strong,
.combat-row-select-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-row-select-text small {
  color: var(--combat-muted);
}

.combat-row-turn-button {
  font-size: 0.72rem;
  font-weight: 800;
}

.combat-row.is-active .combat-row-turn-button {
  border-color: var(--combat-gold);
  color: var(--combat-gold);
}

.combat-detail-panel {
  display: grid;
  gap: 18px;
}

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

.combat-field-wide {
  grid-column: 1 / -1;
}

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

.combat-toggle-grid button {
  min-height: 42px;
  padding: 7px;
  font-size: 0.74rem;
  font-weight: 800;
}

.combat-toggle-grid button.is-active {
  border-color: var(--combat-success);
  background: rgba(95, 168, 120, 0.13);
  color: #a8ddb9;
}

.combat-detail-section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--combat-line);
}

.combat-condition-adder {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 70px auto;
  gap: 7px;
}

.combat-condition-adder button,
.combat-legendary-settings button,
.combat-death-actions button {
  min-height: 42px;
  padding: 7px 10px;
}

.combat-condition-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.combat-condition-editor-pill {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--combat-line);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  background: var(--combat-panel-2);
  font-size: 0.75rem;
}

.combat-condition-editor-pill button {
  width: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
}

.combat-legendary-settings {
  display: grid;
  grid-template-columns: 90px minmax(100px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.combat-pips button {
  cursor: pointer;
}

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

.combat-death-grid > div {
  display: grid;
  gap: 7px;
  color: var(--combat-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.combat-death-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Stronger contrast for the light theme. Dark-mode colours are unchanged. */
html[data-theme="light"] .combat-page {
  --combat-success: #286b45;
  --combat-on-deck: #315f9b;
  --combat-on-deck-soft: rgba(49, 95, 155, 0.14);
}

html[data-theme="light"] .combat-type-badge--pc {
  border: 1px solid rgba(31, 91, 151, 0.34);
  background: #dceafa;
  color: #1f5b97;
}

html[data-theme="light"] .combat-type-badge--npc {
  border: 1px solid rgba(124, 81, 10, 0.3);
  background: #f4e5bf;
  color: #79510d;
}

html[data-theme="light"] .combat-resource-chip.is-ready,
html[data-theme="light"] .combat-resource-chip.is-concentration {
  border-color: rgba(40, 107, 69, 0.58);
  background: #e3f1e8;
  color: #245f3d;
}

html[data-theme="light"] .combat-toggle-grid button.is-active {
  border-color: #286b45;
  background: #e3f1e8;
  color: #245f3d;
}

html[data-theme="light"] .combat-view-appearance-value.is-healthy {
  border-color: rgba(40, 107, 69, 0.58);
  background: #e3f1e8;
  color: #245f3d;
}

html[data-theme="light"] .combat-view-appearance-value.is-lightly-wounded {
  border-color: rgba(145, 117, 12, 0.48);
  background: #f8efcf;
  color: #7b6100;
}

html[data-theme="light"] .combat-view-appearance-value.is-wounded {
  border-color: rgba(165, 100, 21, 0.48);
  background: #f9e5cf;
  color: #8b4d12;
}

html[data-theme="light"] .combat-view-appearance-value.is-heavily-wounded {
  border-color: rgba(178, 86, 37, 0.5);
  background: #fae0d4;
  color: #923b13;
}

html[data-theme="light"] .combat-view-appearance-value.is-critical {
  border-color: rgba(165, 45, 45, 0.52);
  background: #f8dddd;
  color: #8a2020;
}

@media (max-width: 1180px) {
  .combat-editor-toolbar {
    grid-template-columns: minmax(200px, 1fr) auto auto;
  }

  .combat-editor-toolbar > .combat-danger-link {
    grid-column: 1 / -1;
    justify-self: end;
  }

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

  .combat-add-fields label:first-child {
    grid-column: span 2;
  }

  .combat-row--viewer {
    grid-template-columns: 58px minmax(170px, 1fr) minmax(170px, auto);
  }

  .combat-row-conditions {
    grid-column: 2 / -1;
  }

  .combat-row-aside {
    grid-column: 3;
    min-width: 160px;
  }
}

@media (max-width: 900px) {
  .combat-page {
    width: min(100% - 20px, 1500px);
    padding-top: 20px;
  }

  .combat-heading {
    align-items: flex-start;
  }

  .combat-editor-grid {
    grid-template-columns: 1fr;
  }

  .combat-editor-column--details {
    position: static;
    max-height: none;
  }

  .combat-row--viewer {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .combat-row-conditions,
  .combat-row-resources,
  .combat-row-aside {
    grid-column: 2;
    justify-content: flex-start;
    justify-items: start;
  }

  .combat-add-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .combat-page {
    width: min(100% - 14px, 1500px);
    padding-bottom: 34px;
  }

  .combat-heading {
    display: grid;
    gap: 14px;
  }

  .combat-public-link,
  .combat-live-indicator {
    justify-self: start;
  }

  .combat-editor-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .combat-turn-controls {
    display: grid;
    grid-template-columns: 1fr 76px 1fr;
  }

  .combat-save-state,
  .combat-editor-toolbar > .combat-danger-link {
    justify-self: stretch;
  }

  .combat-conflict {
    display: grid;
  }

  .combat-conflict > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .combat-editor-column {
    padding: 12px;
  }

  .combat-add-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .combat-add-fields label:first-child {
    grid-column: 1 / -1;
  }

  .combat-row--editor {
    grid-template-columns: 28px 58px minmax(0, 1fr) 72px;
  }

  .combat-row-condition-summary {
    display: none;
  }

  .combat-row--viewer {
    gap: 9px;
    padding: 14px 10px;
  }

  .combat-row.is-active::before {
    content: "Turn";
  }

  .combat-toggle-grid,
  .combat-field-grid,
  .combat-death-grid {
    grid-template-columns: 1fr;
  }

  .combat-condition-adder {
    grid-template-columns: 1fr 1fr;
  }

  .combat-condition-adder select,
  .combat-condition-adder input[data-condition-custom] {
    grid-column: 1 / -1;
  }

  .combat-legendary-settings {
    grid-template-columns: 86px 1fr;
  }

  .combat-legendary-settings button {
    grid-column: 1 / -1;
  }

  .combat-summary-bar {
    padding: 16px;
  }
}

/* Combat viewer and damage-control refinements. */
.combat-health-section {
  gap: 14px;
}

.combat-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.combat-health-grid label,
.combat-damage-field {
  display: grid;
  gap: 5px;
  color: var(--combat-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.combat-damage-control {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding-top: 2px;
}

.combat-damage-field input {
  border-color: rgba(200, 93, 93, 0.76);
  background: rgba(200, 93, 93, 0.08);
}

.combat-damage-field input:focus {
  outline-color: var(--combat-danger);
}

.combat-deal-damage {
  min-height: 42px;
  border-color: rgba(200, 93, 93, 0.76) !important;
  background: rgba(200, 93, 93, 0.13) !important;
  color: #f1aaaa !important;
  padding: 8px 14px;
  font-weight: 900;
}

.combat-deal-damage:hover {
  background: rgba(200, 93, 93, 0.23) !important;
}

.combat-page--viewer {
  width: min(1040px, calc(100% - 32px));
  padding-top: clamp(22px, 4vw, 46px);
}

.combat-page--viewer .combat-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}

.combat-page--viewer .combat-heading h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
}

.combat-page--viewer .combat-heading > div > p:last-child {
  max-width: 46rem;
}

.combat-page--viewer .combat-viewer {
  border-radius: 18px;
}

.combat-page--viewer .combat-summary-bar {
  padding: 18px 22px;
}

.combat-page--viewer .combat-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.combat-page--viewer .combat-row--viewer {
  grid-template-columns: 54px minmax(0, 1fr) minmax(142px, auto);
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}

.combat-page--viewer .combat-row--viewer.is-active::before,
.combat-page--viewer .combat-row--viewer.is-on-deck::before {
  display: none;
  content: none;
}

.combat-page--viewer .combat-row-body {
  display: grid;
  grid-column: auto;
  min-width: 0;
  gap: 8px;
}

.combat-page--viewer .combat-row-name {
  gap: 8px;
}

.combat-page--viewer .combat-row-name strong {
  font-size: 1.05rem;
}

.combat-page--viewer .combat-row-init strong {
  font-size: 1.55rem;
}

.combat-page--viewer .combat-row-init span,
.combat-page--viewer .combat-view-appearance-label {
  font-size: 0.58rem;
}

.combat-page--viewer .combat-row-conditions {
  grid-column: auto;
  justify-content: flex-start;
}

.combat-page--viewer .combat-row-aside {
  display: flex;
  grid-column: auto;
  min-width: 142px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}

.combat-page--viewer .combat-row-resources {
  grid-column: auto;
  justify-content: flex-end;
  gap: 6px;
}

.combat-page--viewer .combat-view-appearance {
  justify-items: end;
  gap: 3px;
}

.combat-turn-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.combat-turn-chip.is-current {
  background: var(--combat-gold);
  color: #17130c;
}

.combat-turn-chip.is-on-deck {
  background: var(--combat-on-deck);
  color: #ffffff;
}

.combat-condition-pill,
.combat-resource-chip,
.combat-row-condition-summary > span,
.combat-view-appearance-value {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 0.68rem;
}

.combat-view-appearance-value.is-downed,
.combat-view-appearance-value.is-unconscious {
  border-color: rgba(205, 118, 65, 0.58);
  background: rgba(205, 118, 65, 0.16);
  color: #efb189;
}

.combat-view-appearance-value.is-stable {
  border-color: rgba(82, 145, 203, 0.54);
  background: rgba(82, 145, 203, 0.14);
  color: #a8cdf1;
}

.combat-view-appearance-value.is-dead,
.combat-view-appearance-value.is-defeated {
  border-color: rgba(200, 93, 93, 0.62);
  background: rgba(200, 93, 93, 0.18);
  color: #f1aaaa;
}

html[data-theme="light"] .combat-view-appearance-value.is-downed,
html[data-theme="light"] .combat-view-appearance-value.is-unconscious {
  border-color: rgba(166, 75, 29, 0.55);
  background: #fae3d5;
  color: #8d3813;
}

html[data-theme="light"] .combat-view-appearance-value.is-stable {
  border-color: rgba(43, 91, 143, 0.52);
  background: #e1ebf7;
  color: #285887;
}

html[data-theme="light"] .combat-view-appearance-value.is-dead,
html[data-theme="light"] .combat-view-appearance-value.is-defeated {
  border-color: rgba(151, 41, 41, 0.55);
  background: #f8dddd;
  color: #842020;
}

@media (min-width: 1181px) {
  .combat-page--viewer {
    width: min(1040px, calc(100% - 56px));
  }
}

/* Keep the tablet / medium-window layout in the same three-column form as desktop. */
@media (min-width: 761px) and (max-width: 900px) {
  .combat-page--viewer {
    width: min(900px, calc(100% - 24px));
  }

  .combat-page--viewer .combat-row--viewer {
    grid-template-columns: 50px minmax(0, 1fr) minmax(138px, 154px);
    gap: 10px;
  }

  .combat-page--viewer .combat-row-body,
  .combat-page--viewer .combat-row-aside,
  .combat-page--viewer .combat-row-conditions,
  .combat-page--viewer .combat-row-resources {
    grid-column: auto;
  }

  .combat-page--viewer .combat-row-aside {
    min-width: 138px;
    align-items: flex-end;
  }

  .combat-page--viewer .combat-row-resources {
    justify-content: flex-end;
  }

  .combat-page--viewer .combat-view-appearance {
    justify-items: end;
  }
}

@media (max-width: 760px) {
  .combat-page--viewer {
    width: min(100% - 18px, 1040px);
    padding-top: 18px;
  }

  .combat-page--viewer .combat-heading {
    display: grid;
    gap: 12px;
  }

  .combat-page--viewer .combat-live-indicator {
    justify-self: start;
  }

  .combat-page--viewer .combat-summary-bar {
    padding: 14px 16px;
  }

  .combat-page--viewer .combat-list {
    gap: 9px;
    padding: 12px;
  }

  .combat-page--viewer .combat-row--viewer {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 9px 11px;
    padding: 12px;
  }

  .combat-page--viewer .combat-row-body,
  .combat-page--viewer .combat-row-aside {
    grid-column: 2;
  }

  .combat-page--viewer .combat-row-aside {
    min-width: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .combat-page--viewer .combat-row-resources {
    justify-content: flex-start;
  }

  .combat-page--viewer .combat-view-appearance {
    justify-items: start;
  }
}

@media (max-width: 680px) {
  .combat-health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .combat-page--viewer {
    width: 100%;
    padding-inline: 8px;
  }

  .combat-page--viewer .combat-heading h1 {
    font-size: 1.9rem;
  }

  .combat-page--viewer .combat-heading > div > p:last-child {
    font-size: 0.92rem;
  }

  .combat-page--viewer .combat-row--viewer {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 11px 10px;
  }

  .combat-page--viewer .combat-row-name strong {
    font-size: 1rem;
  }

  .combat-page--viewer .combat-row-init strong {
    font-size: 1.42rem;
  }

  .combat-page--viewer .combat-row-aside,
  .combat-page--viewer .combat-row-resources {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .combat-page--viewer .combat-view-appearance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .combat-health-grid,
  .combat-damage-control {
    grid-template-columns: 1fr;
  }

  .combat-deal-damage {
    width: 100%;
  }
}


/* Viewer turn-state tabs and inline appearance status. */
.combat-page--viewer .combat-row--viewer {
  }

.combat-page--viewer .combat-row--viewer.has-turn-banner {
  padding-top: 48px;
}

.combat-page--viewer .combat-turn-banner {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -1px;
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid transparent;
  border-top: 0;
  border-radius: 0 0 13px 0;
  padding: 8px 18px 7px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.combat-page--viewer .combat-turn-banner.is-current {
  border-color: var(--combat-gold);
  background: var(--combat-gold);
  color: #17130c;
}

.combat-page--viewer .combat-turn-banner.is-on-deck {
  border-color: var(--combat-on-deck);
  background: var(--combat-on-deck);
  color: #ffffff;
}

.combat-page--viewer .combat-row-name {
  align-items: center;
  flex-wrap: wrap;
}

.combat-page--viewer .combat-view-appearance-inline {
  margin-left: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

/* The former right-side bubbles are no longer rendered. */
.combat-page--viewer .combat-turn-chip {
  display: none !important;
}

@media (min-width: 761px) and (max-width: 900px) {
  .combat-page--viewer .combat-row--viewer {
    --combat-turn-tab-left: 74px;
  }
}

@media (max-width: 760px) {
  .combat-page--viewer .combat-row--viewer {
    --combat-turn-tab-left: 69px;
  }
}

@media (max-width: 460px) {
  .combat-page--viewer .combat-turn-banner {
    min-height: 30px;
    font-size: 0.64rem;
    padding: 8px 14px 7px;
  }
}


/* Combat viewer header actions: live status + DM login. */
.combat-page--viewer .combat-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.combat-page--viewer .combat-dm-login {
  min-height: 38px;
  padding: 7px 13px;
  border-color: rgba(200, 155, 60, 0.62);
  background: var(--combat-gold-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.combat-page--viewer .combat-dm-login:hover,
.combat-page--viewer .combat-dm-login:focus-visible {
  border-color: var(--combat-gold);
  background: rgba(200, 155, 60, 0.24);
}

@media (max-width: 760px) {
  .combat-page--viewer .combat-heading-actions {
    justify-content: flex-start;
  }
}