body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #e9ecef;
  color: #182124;
}

.testEnvironmentBanner {
  background: #8b0000;
  box-sizing: border-box;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  left: 0;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  position: fixed;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  z-index: 10000;
}

html[data-test-environment="true"] body {
  padding-top: 27px;
}

label {
  margin-right: 16px;
}

input,
select {
  font-size: 16px;
}

[hidden] {
  display: none !important;
}

button {
  background: #f7f9fa;
  border: 1px solid #9ba8ad;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  padding: 6px 10px;
}

button,
[role="button"],
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(26, 165, 184, 0.3);
}

button:hover {
  background: #e7eff1;
}

.dangerButton {
  border-color: #b95d5d;
  color: #8d1f1f;
  margin-left: 18px;
}

.dangerButton:hover {
  background: #fff1f1;
}

.builderHeader {
  align-items: start;
  background: #ffffff;
  border-bottom: 1px solid #b9c5ca;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 6px 14px;
  grid-template-columns: minmax(540px, 680px) minmax(330px, 1fr);
  grid-template-rows: auto auto;
  padding: 8px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.rosterTitleBlock {
  align-items: start;
  display: grid;
  gap: 4px 8px;
  grid-column: 1;
  grid-row: 1 / 3;
  grid-template-columns: 94px minmax(220px, 420px) auto;
  grid-template-rows: auto auto auto auto;
  min-width: 0;
}

.appBrand {
  color: #4d5f63;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  grid-column: 1 / -1;
  grid-row: 1;
}

.rosterTitleRow {
  display: contents;
}

.headerFactionMark {
  align-items: center;
  background: #e7edf0;
  border: 1px solid #aab7bc;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  align-self: stretch;
  grid-column: 1;
  grid-row: 2 / 5;
  height: auto;
  justify-content: center;
  min-height: 98px;
  padding: 9px;
  width: 94px;
}

.headerFactionMark[data-allegiance="Imperium"] { background: #eee4ca; border-color: #c8ae74; }
.headerFactionMark[data-allegiance="Chaos"] { background: #ecd8d4; border-color: #c48c82; }
.headerFactionMark[data-allegiance="Xenos"] { background: #d4e8e3; border-color: #83afa5; }

.headerFactionMark img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.rosterNameInput {
  border: 1px solid #8ea0a6;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 700;
  min-width: 220px;
  padding: 5px 9px;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
}

.rosterPoints {
  background: #e6f5e9;
  border: 1px solid #80ac86;
  border-radius: 4px;
  color: #176024;
  font-weight: 700;
  grid-column: 3;
  grid-row: 2;
  padding: 5px 10px;
  white-space: nowrap;
}

.headerFileActions {
  display: grid;
  gap: 6px;
  grid-column: 2;
  grid-row: 3;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.headerFileActions > div {
  display: contents;
}

.headerFileActions > div > button,
.headerFileActions > div > .exportMenu > button {
  box-sizing: border-box;
  font-size: 14px;
  margin-left: 0;
  min-height: 32px;
  padding-block: 4px;
  width: 100%;
}

.builderSettings {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.builderSettings label {
  display: grid;
  gap: 4px;
  margin-right: 0;
}

.builderSettings input,
.builderSettings select {
  box-sizing: border-box;
  max-width: 280px;
}

.headerRosterSelect {
  box-sizing: border-box;
  grid-column: 2;
  grid-row: 4;
  margin-left: 0;
  margin-top: 0;
  max-width: none;
  width: 100%;
}

.headerViewActions {
  align-items: start;
  display: flex;
  gap: 10px;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.desktopPlayButton,
.savedRosterActions .startPlayRoster {
  background: #bd8426 !important;
  border-color: #e5aa35 !important;
  color: #151a1e !important;
  font-weight: 800 !important;
}

.desktopPlayButton {
  align-self: stretch;
  font-size: 15px;
  min-width: 118px;
}

.desktopPlayButton:hover,
.savedRosterActions .startPlayRoster:hover {
  background: #dca23a !important;
}

.headerDeleteRoster {
  align-self: end;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;
}

@media (min-width: 861px) and (max-width: 1250px) {
  .builderHeader { grid-template-columns: minmax(520px, 1fr) auto; }
  .rosterTitleBlock { grid-column: 1; grid-row: 1 / 4; }
  .headerViewActions { grid-column: 2; grid-row: 1; }
  .headerDeleteRoster { grid-column: 2; grid-row: 3; }
}

.readonlyField {
  background: #eef3f5;
  border: 1px solid #aebbc0;
  border-radius: 4px;
  box-sizing: border-box;
  color: #26363b;
  display: inline-block;
  min-width: 180px;
  padding: 7px 9px;
}

.exportMenu {
  position: relative;
}

.exportMenuPanel {
  background: white;
  border: 1px solid #9ba8ad;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
}

.exportMenuPanel[hidden] {
  display: none;
}

.exportMenuPanel button {
  margin-left: 0;
  text-align: left;
  width: 100%;
}

.exportMenuToggle {
  align-items: center;
  border-top: 1px solid #d8e0e3;
  display: flex;
  gap: 6px;
  padding: 6px 2px 4px;
  white-space: nowrap;
}

.rosterLayoutToggle {
  border: 1px solid #9ba8ad;
  border-radius: 4px;
  display: inline-flex;
  overflow: hidden;
}

.rosterLayoutToggle button {
  border: 0;
  border-radius: 0;
  margin-left: 0;
}

.rosterLayoutToggle button + button {
  border-left: 1px solid #9ba8ad;
}

.rosterLayoutToggle button.active {
  background: #006070;
  color: white;
}

.displayControls {
  align-items: stretch;
  display: grid;
  gap: 5px;
}

.segmentedControl {
  border: 1px solid #9ba8ad;
  border-radius: 4px;
  display: inline-flex;
  overflow: hidden;
}

.segmentedControl button {
  border: 0;
  border-radius: 0;
  flex: 1 1 0;
  margin-left: 0;
}

.segmentedControl button + button {
  border-left: 1px solid #9ba8ad;
}

.segmentedControl button.active {
  background: #006070;
  color: white;
}

.themeToggle button {
  font-size: 12px;
  padding: 4px 9px;
}

#catalogueOptions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

#catalogueOptions label { white-space: nowrap; }

.layout {
  display: grid;
  grid-template-columns: minmax(300px, 32vw) minmax(420px, 32vw) minmax(360px, 1fr);
  gap: 16px;
  padding: 16px;
  transition: grid-template-columns 180ms ease;
}

@media (min-width: 861px) and (max-width: 1199px) {
  html[data-mobile-ui="false"] .layout {
    gap: 8px;
    grid-template-columns: minmax(250px, 30vw) minmax(350px, 34vw) minmax(280px, 1fr);
    padding: 8px;
  }
}

.layout.availableUnitsCollapsed {
  align-items: stretch;
  grid-template-columns: 64px minmax(420px, 32vw) minmax(360px, 1fr);
}

.layout > section {
  background: white;
  border: 1px solid #bac5ca;
  border-radius: 6px;
  padding: 12px;
  min-height: 360px;
  max-height: calc(100vh - 160px);
  overflow: auto;
}

.availablePanel {
  min-width: 0;
  transition: padding 180ms ease;
}

.sectionTitleRow {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sectionTitleRow h2 {
  flex: 0 0 auto;
  margin: 0;
}

.sectionTitleRow input {
  box-sizing: border-box;
  min-width: 160px;
  width: min(260px, 48%);
}

.panelCollapseButton {
  align-items: center;
  background: #e5f5f7;
  border-color: #006f80;
  color: #006070;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  line-height: 1;
  margin-left: 0;
  padding: 0;
  width: 34px;
}

.panelCollapseButton:hover {
  background: #cfedf1;
}

.layout.availableUnitsCollapsed .availablePanel {
  align-items: stretch;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 7px 6px;
}

.layout.availableUnitsCollapsed .availablePanel:focus {
  outline: 2px solid #00a4bb;
  outline-offset: 2px;
}

.layout.availableUnitsCollapsed .availablePanel .sectionTitleRow {
  align-items: center;
  display: grid;
  gap: 6px;
  justify-items: center;
  margin-bottom: 0;
}

.layout.availableUnitsCollapsed .availablePanel h2 {
  font-size: 24px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.layout.availableUnitsCollapsed .availablePanel #unitSearch,
.layout.availableUnitsCollapsed .availablePanel #availableUnitsBody {
  display: none;
}

.layout.availableUnitsCollapsed .panelCollapseButton {
  background: #0090a5;
  border-color: #00b4cc;
  color: #ffffff;
  width: 40px;
}

.layout.availableUnitsCollapsed .availablePanel::after {
  align-self: stretch;
  background: #108b97;
  content: "";
  display: block;
  height: 100%;
  margin: 8px auto 0;
  width: calc(100% - 8px);
}

.unit {
  border: 1px solid #999;
  padding: 8px;
  margin-bottom: 6px;
  background: #f8f8f8;
  cursor: pointer;
}

.unit:hover {
  background: #ddd;
}

.unit.selected,
.rosterConfiguration.selected {
  border-color: #006070;
  box-shadow: inset 4px 0 #006070;
}

.unit small {
  color: #596164;
  display: block;
  margin-top: 3px;
}

.rosterUnitLabel {
  display: inline-block;
  min-width: min(220px, 55%);
  vertical-align: middle;
}

.unitNickname {
  color: #315f67;
  font-weight: 700;
}

.unitActions {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  white-space: nowrap;
}

.unitActions button {
  margin-left: 0;
}

.unit.dragging {
  opacity: 0.55;
}

.customRosterControls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.customRosterControls button {
  margin-left: 0;
}

.rosterSection.dragOver > summary,
.unitSectionContents.dragOver,
.unit.dragOver {
  outline: 2px solid #008090;
  outline-offset: 2px;
}

.rosterSectionName {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  box-sizing: border-box;
  color: white;
  font: inherit;
  padding: 2px 4px;
  width: min(220px, 70%);
}

.rosterSectionName:focus {
  background: white;
  color: #182124;
  outline: 2px solid #bdeaf0;
}

.customRosterSection .unitSectionContents:empty {
  border: 1px dashed #8aa1a7;
  min-height: 36px;
}

.attachedUnit {
  background: #eef7f8;
  border-color: #57858c;
}

.attachedLeaderReference {
  background: #f8f2df;
  border-color: #aa8840;
}

.attachmentReference {
  color: #8a681f !important;
  font-weight: 700;
}

.modifiedCharacteristic {
  color: #8a681f;
  font-weight: 800;
}

.rosterConfiguration {
  border: 1px solid #777;
  background: #e8f2f3;
  cursor: pointer;
  margin-bottom: 12px;
  padding: 10px;
}

.rosterConfiguration:hover { background: #d5e9eb; }
.rosterConfiguration small { display: block; margin-top: 4px; }
.warningBadge { color: #8a4b00; float: right; }

.unitSection {
  margin-bottom: 8px;
}

.unitSection > summary {
  background: #006070;
  border: 1px solid #003840;
  color: white;
  cursor: pointer;
  font-weight: 700;
  padding: 8px;
  user-select: none;
}

.unitSection > summary:hover { background: #008090; }
.unitSection > summary span { float: right; font-weight: 400; }
.unitSectionContents { padding-top: 6px; }

.startScreen {
  border: 1px solid #bac5ca;
  display: flex;
  flex-direction: column;
  margin: 16px;
  max-height: none;
  min-height: 45vh;
}

html[data-mobile-ui="false"] .startScreen {
  box-sizing: border-box;
  height: calc(100vh - 32px);
  min-height: 0;
  overflow: hidden;
}

.startupPanel {
  align-items: center;
  display: grid;
  justify-items: center;
  margin: 12vh auto;
  max-width: 520px;
  text-align: center;
}

.startupPanel h1 {
  font-size: 34px;
  margin: 0 0 8px;
}

.startupPanel p {
  color: #4d5f63;
  margin: 0 0 18px;
}

.startupBar {
  background: #d8e2e5;
  border: 1px solid #aebbc0;
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
  width: min(320px, 80vw);
}

.startupBar span {
  animation: startupSlide 1.1s ease-in-out infinite;
  background: #327a5f;
  display: block;
  height: 100%;
  width: 42%;
}

@keyframes startupSlide {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(80%); }
  100% { transform: translateX(260%); }
}

.startHeader {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.startHeaderLead {
  min-width: 0;
}

.startBrand {
  color: #4d5f63;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.startBrandRow {
  min-width: 0;
}

.startSupportLink {
  color: #66777d;
  font-size: 12px;
  text-decoration: none;
}

.startSupportLink:hover,
.startSupportLink:focus-visible {
  color: #9a6418;
  text-decoration: underline;
}

.startHeaderActions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.startHeaderActions button {
  margin-left: 0;
}

.updatePanel progress {
  width: 100%;
}

.updateButtonNarrow {
  display: none;
}

.startIntro {
  margin-top: 18px;
}

.startIntro h2 {
  margin: 0 0 6px;
}

.startIntro p {
  margin: 0;
}

.startIntroTitleRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.startIntroTitleRow h2 { margin: 0; }

.startLibraryTabs {
  border-bottom: 1px solid #aebbc0;
  display: flex;
  gap: 4px;
  margin-top: 16px;
}

.startLibraryTabs button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #59676c;
  font-size: 16px;
  font-weight: 800;
  padding: 9px 18px;
}

.startLibraryTabs button.active { border-bottom-color: #087f91; color: #075f6c; }
.startLibraryTabs button span { background: #dfe8eb; border-radius: 999px; font-size: 11px; margin-left: 4px; padding: 2px 7px; }
.gameHistorySummary { color: #59676c; margin: 8px 0 0; }

.gameHistoryCards { display: grid; gap: 9px; margin-top: 14px; overflow-y: auto; padding-right: 4px; }
html[data-mobile-ui="false"] .gameHistoryCards { flex: 1 1 auto; min-height: 0; }
.gameHistoryCard { align-items: center; background: #f8f8f8; border: 1px solid #999; cursor: pointer; display: grid; gap: 14px; grid-template-columns: 112px minmax(0, 1fr) auto; padding: 12px 14px; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }
.gameHistoryCard:hover,.gameHistoryCard:focus-visible { background: #eef6f7; border-color: #07899b; outline: none; transform: translateY(-1px); }
.gameHistoryOutcome { border-left: 4px solid #718087; display: grid; padding-left: 10px; }
.gameHistoryOutcome.victory { border-left-color: #2a8b5e; }.gameHistoryOutcome.defeat { border-left-color: #b65555; }.gameHistoryOutcome.draw { border-left-color: #b17c24; }
.gameHistoryOutcome span { color: #66777d; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gameHistoryOutcome strong { font-size: 27px; }.gameHistoryOutcome i { color: #8c989d; font-style: normal; padding: 0 5px; }
.gameHistoryDetails { display: grid; gap: 3px; min-width: 0; }.gameHistoryDetails b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.gameHistoryDetails b span { color: #77858a; font-size: 11px; text-transform: uppercase; }.gameHistoryDetails small { color: #59676c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gameHistoryDelete { min-width: 72px; }
.gameHistoryEmpty { border: 1px dashed #aebbc0; margin-top: 14px; padding: 36px 20px; text-align: center; }.gameHistoryEmpty p { color: #66777d; margin-bottom: 0; }
.playLedgerActions.final { grid-template-columns: 1fr; }
.syncDataPanel { box-sizing: border-box; max-height: min(90vh, 900px); overflow-y: auto; padding: 0 20px 20px; width: min(760px, calc(100vw - 28px)); }
.syncDataPanel > header { align-items: center; background: inherit; border-bottom: 1px solid #aebbc0; display: flex; justify-content: space-between; margin: 0 -20px 14px; padding: 16px 20px; position: sticky; top: 0; z-index: 2; }
.syncDataPanel > header h2 { margin: 2px 0 0; }.syncDataPanel > header small { color: #087f91; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.syncDataPanel > p { color: #59676c; line-height: 1.45; }.syncDataPanel section { background: transparent; border: 0; padding: 0; }.syncDataPanel section > h3 { border-bottom: 1px solid #aebbc0; display: flex; justify-content: space-between; padding-bottom: 7px; }.syncDataPanel section > h3 span { color: #66777d; font-size: 13px; }
.syncDataRows { display: grid; gap: 7px; }.syncDataRows > div { align-items: center; border: 1px solid #bac5ca; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }.syncDataRows > div > span { display: grid; min-width: 0; }.syncDataRows small { color: #66777d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.syncDeletionMarkers { display: grid; gap: 5px; }.syncDeletionMarkers span { color: #7d5555; font-size: 12px; }
.syncDataAccountActions { border-top: 1px solid #aebbc0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 14px; }

.primaryAction {
  background: #087f91;
  border-color: #05606e;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 9px 16px;
}

.primaryAction:hover { background: #0a98ad; }

.startRosterFilterPanel {
  border: 1px solid #aebbc0;
  margin-top: 14px;
  max-width: 1120px;
}

.startRosterFilterPanel > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  gap: 12px;
  padding: 8px 10px;
}

.startRosterFilterPanel > summary span { font-weight: 400; }

.startRosterFilters {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 460px) minmax(180px, 240px) minmax(180px, 220px) auto;
  padding: 0 10px 10px;
}

.startRosterFilters label { margin: 0; }
.startRosterFilters label span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.startRosterFilters input, .startRosterFilters select { box-sizing: border-box; width: 100%; }
.startRosterGroupToggle { align-items: center; display: flex; gap: 6px; padding-bottom: 8px; white-space: nowrap; }
.startRosterGroupToggle input { width: auto; }

.savedRosterCards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: min(60vh, 720px);
  margin-top: 12px;
  overflow-y: auto;
  padding-right: 4px;
}

html[data-mobile-ui="false"] .savedRosterCards {
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.savedRosterCard {
  align-items: center;
  background: #f8f8f8;
  border: 1px solid #999;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.savedRosterCard:hover,
.savedRosterCard:focus-visible {
  background: #eef6f7;
  border-color: #07899b;
  outline: none;
  transform: translateY(-1px);
}

.savedRosterIdentity {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-width: 0;
}

.savedRosterFactionMark {
  align-items: center;
  background: #e7edf0;
  border: 1px solid #aab7bc;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  height: 58px;
  justify-content: center;
  padding: 7px;
  width: 58px;
}

.savedRosterFactionMark[data-allegiance="Imperium"] { background: #eee4ca; border-color: #c8ae74; }
.savedRosterFactionMark[data-allegiance="Chaos"] { background: #ecd8d4; border-color: #c48c82; }
.savedRosterFactionMark[data-allegiance="Xenos"] { background: #d4e8e3; border-color: #83afa5; }

.savedRosterFactionMark img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.savedRosterText {
  min-width: 0;
}

.savedRosterText b {
  display: block;
  line-height: 1.2;
}

.savedRosterCard small {
  color: #596164;
  display: block;
  margin-top: 4px;
}

.savedRosterCard .savedRosterEdited { color: #356352; font-weight: 700; }

.savedRosterActions {
  align-items: center;
  align-self: center;
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.savedRosterActions .startPlayRoster { min-width: 96px; }

.iconButton {
  font-size: 16px;
  line-height: 1;
  min-height: 34px;
  min-width: 36px;
  padding: 5px;
}

.savedRosterFactionGroup { grid-column: 1 / -1; }

.savedRosterFactionGroup > h3 {
  border-bottom: 2px solid #0b8394;
  margin: 5px 0 8px;
  padding: 5px 2px;
}

.savedRosterFactionGroup > h3 span {
  color: #66777d;
  font-size: 13px;
  font-weight: 400;
}

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

@media (min-width: 1800px) {
  .savedRosterCards,
  .savedRosterFactionCards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .startRosterFilters { grid-template-columns: 1fr; }
  .startRosterGroupToggle { padding-bottom: 0; }
}

@media (max-width: 520px) {
  .savedRosterCard { gap: 10px; grid-template-columns: 1fr; padding: 10px; }
  .savedRosterIdentity { gap: 10px; grid-template-columns: 50px minmax(0, 1fr); }
  .savedRosterFactionMark { height: 50px; padding: 6px; width: 50px; }
  .savedRosterActions { padding-left: 60px; }
  .gameHistoryCard { grid-template-columns: 92px minmax(0, 1fr); }
  .gameHistoryCard > button { grid-column: 1 / -1; justify-self: end; }
  .gameHistoryOutcome strong { font-size: 23px; }
}

.modalBackdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}

.modalBackdrop[hidden] {
  display: none;
}

.modalPanel {
  background: white;
  border: 1px solid #26363b;
  border-radius: 6px;
  box-sizing: border-box;
  max-height: 90vh;
  overflow: auto;
  padding: 16px;
  width: min(1040px, 100%);
}

.confirmPanel {
  max-width: 420px;
}

.confirmPanel p {
  line-height: 1.4;
  margin: 0 0 16px;
}

.modalTitleRow {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modalTitleRow h2 {
  margin: 0;
}

.discordExportPanel {
  width: min(980px, 100%);
}

.discordExportLayout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr);
}

.discordOptionsPanel,
.discordPreviewPanel {
  background: #f7f9fa;
  border: 1px solid #b8c5ca;
  border-radius: 6px;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  align-content: start;
  grid-auto-rows: max-content;
  margin: 0;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding: 12px;
}

.discordOptionsPanel h3,
.discordPreviewPanel h3 {
  margin: 0;
}

.discordOptionsPanel label {
  display: grid;
  gap: 5px;
  margin-right: 0;
}

.discordOptionsPanel select {
  box-sizing: border-box;
  width: 100%;
}

.discordOptionsPanel .exportFormatSelectLabel {
  display: none;
}

.discordOptionsPanel [hidden] {
  display: none !important;
}

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

.exportFormatButtons button {
  background: #eef7f8;
  border: 1px solid #93aab1;
  color: #203034;
  font-weight: 800;
  margin-left: 0;
  min-height: 38px;
}

.exportFormatButtons button.selected {
  background: #006070;
  border-color: #0ca3b8;
  color: #ffffff;
}

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

.discordColorOptions {
  border: 1px solid #b8c5ca;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
  padding: 8px 10px;
}

.discordColorOptions label {
  align-items: center;
  display: flex;
  gap: 5px;
}

.discordCustomColors {
  border-top: 1px solid #c9d3d7;
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  padding-top: 8px;
  width: 100%;
}

.discordCustomColors[hidden] {
  display: none;
}

.discordCustomColors label {
  align-items: stretch;
  display: grid;
}

.discordExportPreview {
  background: #20242a;
  border: 1px solid #4a5560;
  border-radius: 4px;
  box-sizing: border-box;
  color: #f4f4f5;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  min-height: 360px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.discordExportPreview .ansiBold {
  font-weight: 700;
}

.discordExportPreview .ansi30 { color: #9ca3af; }
.discordExportPreview .ansi31 { color: #f87171; }
.discordExportPreview .ansi32 { color: #86efac; }
.discordExportPreview .ansi33 { color: #facc15; }
.discordExportPreview .ansi34 { color: #60a5fa; }
.discordExportPreview .ansi35 { color: #e879f9; }
.discordExportPreview .ansi36 { color: #67e8f9; }
.discordExportPreview .ansi37 { color: #f9fafb; }

.newRosterLayout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 0.75fr) minmax(340px, 1.25fr);
}

.newRosterSetup,
.newRosterPreview {
  min-width: 0;
}

.formRow {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.battleSizeChoices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detachmentChoiceList {
  border: 1px solid #9aa;
  max-height: 280px;
  overflow: auto;
}

.detachmentChoiceGroup h3 {
  background: #e4eeee;
  border-bottom: 1px solid #9aa;
  border-top: 1px solid #9aa;
  font-size: 14px;
  margin: 0;
  padding: 6px 8px;
}

.detachmentChoiceGroup:first-child h3 {
  border-top: 0;
}

.modalActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.previewMaster,
.previewDetachment,
.previewSection,
.previewItem {
  border: 1px solid #9aa;
  margin-bottom: 8px;
}

.previewMaster > summary,
.previewDetachment > summary,
.previewSection > summary,
.previewItem > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 7px 8px;
}

.previewMaster > summary {
  background: #006070;
  color: white;
}

.previewMaster > summary small {
  color: #d8eef0;
  float: right;
  font-weight: 400;
}

.previewContents,
.previewDetachmentBody {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.previewDetachment > summary {
  align-items: center;
  background: #e4eeee;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.previewDetachment > summary small,
.previewSection > summary small,
.previewItem > summary small {
  color: #465c60;
  font-weight: 400;
}

.previewSection > summary {
  background: #f2f6f6;
}

.previewItem {
  background: #fbfbfb;
  margin: 6px 8px;
}

.previewItem > summary {
  font-weight: 600;
}

.previewItem p,
.previewItem small {
  display: block;
  line-height: 1.35;
  padding: 0 8px 8px;
}

.forceDispositionGrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 8px;
}

.forceDispositionCard {
  align-items: start;
  background: linear-gradient(180deg, #fbfbf7, #eef5f2);
  border: 1px solid #8aa;
  display: grid;
  gap: 10px;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 10px;
}

.forceDispositionMark {
  align-items: center;
  background: #006070;
  border-radius: 999px;
  color: white;
  display: flex;
  font-weight: 800;
  height: 48px;
  justify-content: center;
  letter-spacing: 0.04em;
  width: 48px;
}

.forceDispositionCard p {
  margin: 4px 0 0;
  padding: 0;
}

.forceMissionMap {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.forceMissionMap li {
  align-items: baseline;
  border-top: 1px solid rgba(0, 96, 112, 0.18);
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 5px;
}

.forceMissionMap span {
  font-weight: 600;
}

.forceMissionMap small {
  color: #465c60;
  white-space: nowrap;
}

.previewDispositionNote {
  align-items: center;
  background: #f2f6f6;
  border: 1px solid #c7d5d7;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 8px;
}

.previewDispositionNote span {
  color: #465c60;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.missionPicker {
  display: grid;
  gap: 10px;
}

.missionPickerBlock {
  background: #111a1d;
  border: 1px solid #34565d;
  display: grid;
  gap: 7px;
  padding: 10px;
}

.missionPickerBlock small {
  color: #adc3c9;
}

.forceDispositionChoices {
  display: grid;
  gap: 7px;
}

.forceDispositionChoice {
  align-items: center;
  background: #152529;
  border: 1px solid #40636b;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 34px minmax(0, 1fr);
  padding: 8px;
}

.forceDispositionChoice.selected {
  border-color: #f2c14e;
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.45);
}

.forceDispositionChoice .forceDispositionMark {
  height: 34px;
  width: 34px;
}

.missionPickerBlock select {
  width: 100%;
}

.primaryMissionCard {
  display: grid;
  justify-items: start;
}

.missionCardImageShell {
  background: transparent;
  border: 0;
  display: grid;
  justify-self: start;
  justify-items: center;
  max-width: 100%;
  overflow: visible;
  position: relative;
  width: min(100%, 360px);
}

.missionCardSide {
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.missionCardSide[hidden] {
  display: none;
}

.missionCardToggle {
  background: #070b0d;
  border: 1px solid #1f6aa6;
  border-radius: 10px 0 0 0;
  bottom: 0;
  color: white;
  cursor: pointer;
  font-weight: 800;
  padding: 6px 9px;
  position: absolute;
  right: 0;
  z-index: 1;
}

.mobileShell,
.mobileSheetClose {
  display: none;
}

.shareCodePanel {
  width: min(620px, calc(100vw - 32px));
}

.qrSharePanel {
  width: min(520px, calc(100vw - 32px));
  text-align: center;
}

.qrRosterName {
  color: var(--muted);
  font-weight: 700;
}

.qrShareImage {
  width: min(72vw, 390px);
  margin: 16px auto;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  line-height: 0;
}

.qrShareImage svg {
  display: block;
  width: 100%;
  height: auto;
}

.qrShareHelp {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--muted);
}

.shareCodeInput {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.mobileUnitAddList {
  display: none;
}

@media (max-width: 860px), (display-mode: standalone) {
  body {
    background: #0b1118;
    color: #eef4f6;
    min-height: 100dvh;
  }

  button,
  input,
  select {
    font-size: 16px;
  }

  .builderHeader {
    display: none;
  }

  #builderShell {
    min-height: 100vh;
  }

  .layout {
    display: block;
    padding: 0;
  }

  .rosterPanel {
    display: none;
  }

  .mobileShell {
    background: #0b1118;
    box-sizing: border-box;
    color: #e9f1f3;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100dvh;
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }

  .mobileRosterHeader {
    align-items: center;
    background: #102027;
    border-bottom: 1px solid #25434b;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .mobileIconButton,
  .mobileActionBar button,
  .mobileSectionAdd,
  .mobileUnitActions button,
  .mobileConfigCard {
    margin-left: 0;
  }

  .mobileIconButton {
    background: #162b33;
    border-color: #31545d;
    color: #d9e7eb;
    min-height: 38px;
    padding: 6px 9px;
  }

  .mobileRosterTitleBlock {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .mobileRosterName {
    background: transparent;
    border: 0;
    color: #f5fbfc;
    font-size: 18px;
    font-weight: 800;
    min-width: 0;
    padding: 0;
    width: 100%;
  }

  .mobileRosterMeta {
    color: #9eb1b7;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    text-transform: uppercase;
  }

  .mobileRosterMeta span:last-child {
    color: #69f29d;
  }

  .mobileHeaderActions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
  }

  .mobileHeaderActions button {
    background: #162b33;
    border-color: #31545d;
    color: #d9e7eb;
    font-size: 13px;
    font-weight: 800;
    margin-left: 0;
    min-height: 30px;
    padding: 4px 8px;
  }

  .mobileRosterList {
    align-content: start;
    display: grid;
    gap: 8px;
    grid-auto-rows: max-content;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .mobileConfigCard,
  .mobileEmptyRoster,
  .mobileRosterSection {
    background: #111b26;
    border: 1px solid #263847;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .mobileConfigCard {
    align-items: center;
    color: #e9f1f3;
    display: flex;
    justify-content: space-between;
    min-height: 0;
    padding: 9px 10px;
    text-align: left;
    width: 100%;
  }

  .mobileConfigCard small,
  .mobileRosterSection small,
  .mobileUnitTopline,
  .mobileLoadout,
  .mobileAttachedBreakdown span {
    color: #9aaab2;
  }

  .mobileConfigCard.selected {
    border-color: #1aa5b8;
  }

  .mobileRosterSection {
    overflow: hidden;
  }

  .mobileRosterSection > header {
    align-items: center;
    background: #006070;
    color: #f7fcfd;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
  }

  .mobileRosterSection > header b {
    align-items: center;
    display: flex;
    font-size: 16px;
    letter-spacing: 0;
    min-width: 0;
    white-space: nowrap;
  }

  .mobileRosterSection > header b span {
    display: inline-block;
    font-weight: 900;
    margin-right: 6px;
    width: 10px;
  }

  .mobileRosterSectionLabel {
    align-items: baseline;
    display: flex;
    min-width: 0;
  }

  .mobileRosterSectionLabel small {
    font-size: 13px;
    margin-left: 5px;
    white-space: nowrap;
  }

  .mobileRosterSectionHeader {
    cursor: pointer;
  }

  .mobileRosterSectionContents[hidden] {
    display: none;
  }

  .mobileSectionAdd {
    background: #f7fbfc;
    color: #006070;
    font-weight: 800;
    flex: 0 0 auto;
    font-size: 14px;
    min-height: 34px;
    padding: 5px 9px;
  }

  .mobileRosterUnit {
    background: #0d141d;
    border-top: 1px solid #263847;
    cursor: pointer;
    display: grid;
    gap: 8px;
    padding: 12px;
  }

  .mobileRosterUnit.selected {
    box-shadow: inset 3px 0 0 #1aa5b8;
  }

  .mobileRosterUnit.attached {
    box-shadow: inset 3px 0 0 #d3a817;
  }

  .mobileUnitTopline {
    align-items: center;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: space-between;
    text-transform: uppercase;
  }

  .mobileUnitKind {
    color: #8bdbe5;
  }

  .mobileRosterUnit h3 {
    color: #f5fbfc;
    font-size: 20px;
    margin: 0;
  }

  .mobileRosterUnit h3 small {
    color: #d3a817;
    display: block;
    font-size: 13px;
    margin-top: 3px;
  }

  .mobileLoadout {
    display: grid;
    gap: 3px;
    list-style: disc;
    margin: 0;
    padding-left: 20px;
  }

  .mobileAttachedBreakdown {
    display: grid;
    gap: 7px;
  }

  .mobileAttachedBreakdown div {
    border-left: 2px solid #405766;
    display: grid;
    gap: 3px;
    padding-left: 8px;
  }

  .mobileWarning {
    background: #3b2b10;
    border: 1px solid #a87317;
    color: #ffd38a;
    padding: 8px;
  }

  .mobileUnitActions {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 48px auto;
  }

  .mobileUnitActions button {
    background: #16232e;
    border-color: #354c5b;
    color: #dce8eb;
    min-height: 40px;
  }

  .mobileUnitActions .mobileUnitPrimaryAction {
    font-weight: 800;
  }

  .mobileUnitActions .mobileUnitIconAction {
    font-size: 22px;
    font-weight: 800;
    min-width: 48px;
    padding: 6px;
  }

  .mobileUnitActions .mobileUnitIconAction.danger {
    border-color: #874754;
    color: #ffadb8;
  }

  .mobileUnitActions .mobileUnitIconAction.split {
    font-size: 14px;
    min-width: 58px;
  }

  .mobileEmptyRoster {
    color: #dce8eb;
    padding: 18px;
  }

  .mobileActionBar {
    background: #111b26;
    border-top: 1px solid #263847;
    bottom: 0;
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr;
    left: 0;
    padding: 6px 10px;
    position: fixed;
    right: 0;
    z-index: 50;
  }

  body.mobileAddOpen .mobileActionBar {
    z-index: 90;
  }

  .mobileActionBar button {
    background: #16232e;
    border-color: #354c5b;
    color: #dce8eb;
    font-size: 16px;
    font-weight: 800;
    min-height: 42px;
    padding: 5px 6px;
  }

  .mobileActionBar #mobileAddUnit {
    background: #006070;
    border-color: #0ca3b8;
    color: white;
  }

  body.mobileAddOpen .mobileActionBar #mobileAddUnit {
    background: #22313d;
    border-color: #5e7484;
    color: #f1f7f9;
  }

  .layout > .availablePanel,
  .layout > .detailsPanel {
    background: #111b26;
    border: 1px solid #314655;
    border-radius: 16px 16px 0 0;
    bottom: 0;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    color: #e9f1f3;
    display: none;
    left: 0;
    max-height: min(86vh, calc(100dvh - env(safe-area-inset-top, 0px)));
    overflow: auto;
    padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    position: fixed;
    right: 0;
    z-index: 70;
  }

  body.mobileAddOpen .availablePanel {
    border-radius: 0;
    bottom: calc(55px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: none;
    overflow: hidden;
    padding: 0;
    top: 0;
  }

  body.mobileAddOpen .availablePanel .sectionTitleRow {
    background: #111b26;
    border-bottom: 1px solid #405665;
    box-shadow: 0 6px 12px rgba(4, 10, 16, 0.38);
    padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
    position: relative;
    z-index: 3;
  }

  body.mobileAddOpen .availablePanel #availableUnitsBody {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px max(14px, env(safe-area-inset-right, 0px)) 18px max(14px, env(safe-area-inset-left, 0px));
  }

  body.mobileAddOpen .availablePanel,
  body.mobileDetailsOpen .detailsPanel {
    display: block;
  }

  body.mobileAddOpen .availablePanel {
    display: grid;
  }

  body.mobileAddOpen::before {
    background: rgba(0, 0, 0, 0.52);
    content: "";
    inset: 0;
    position: fixed;
    z-index: 60;
  }

  .mobileSheetBackdrop {
    background: rgba(0, 0, 0, 0.52);
    border: 0;
    border-radius: 0;
    inset: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 60;
  }

  .mobileSheetBackdrop[hidden] {
    display: none;
  }

  .mobileSheetClose {
    display: inline-flex;
    margin-left: 0;
  }

  .detailsPanelTitleRow {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .detailsPanelTitleRow h2 {
    margin: 0;
  }

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

  .availablePanel .sectionTitleRow h2 {
    margin: 0;
  }

  .availablePanel #unitSearch {
    background: #0d141d;
    border: 1px solid #354c5b;
    box-sizing: border-box;
    color: #eef4f6;
    grid-column: 1 / -1;
    margin: 0;
    min-height: 44px;
    width: 100%;
  }

  #unitList {
    display: none;
  }

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

  .mobileAddFilters {
    display: flex;
    gap: 8px;
    margin: 2px 0 0;
    overflow-x: auto;
    padding: 0 0 6px;
    scrollbar-width: thin;
  }

  .mobileAddFilters button {
    background: #121c27;
    border-color: #354c5b;
    color: #c7d3d8;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 800;
    margin-left: 0;
    min-height: 34px;
    padding: 6px 10px;
  }

  .mobileAddFilters button.selected {
    background: #0f6a78;
    border-color: #16b0c5;
    color: #ffffff;
  }

  .mobileAddFilters span {
    color: #9eb1b7;
    margin-left: 3px;
  }

  .mobileAddSection {
    display: grid;
    gap: 8px;
  }

  .mobileAddSectionHeader {
    align-items: center;
    background: #006070;
    border: 1px solid #25808c;
    border-radius: 8px;
    color: #8bdbe5;
    display: grid;
    font-size: 13px;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    letter-spacing: 0.08em;
    margin-left: 0;
    min-height: 42px;
    padding: 9px 10px;
    text-align: left;
    text-transform: uppercase;
  }

  .mobileAddSectionHeader b {
    color: #f7fcfd;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobileAddSectionHeader small {
    color: #c7eef4;
  }

  .mobileAddSectionContents {
    display: grid;
    gap: 8px;
  }

  .mobileAddSectionContents[hidden] {
    display: none;
  }

  .mobileAddUnitRow {
    align-items: center;
    background: #0d141d;
    border: 1px solid #263847;
    border-radius: 8px;
    display: grid;
    gap: 9px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 10px;
  }

  .mobileAddUnitRow b,
  .mobileAddUnitRow small {
    display: block;
  }

  .mobileAddUnitRow small {
    color: #8f9ea7;
    margin-top: 3px;
  }

  .mobileAddUnitRow > span {
    color: #e8f4f7;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobileAddPreview,
  .mobileAddUnitButton {
    margin-left: 0;
    min-height: 40px;
  }

  .mobileAddPreview {
    background: #16232e;
    border-color: #354c5b;
    color: #dce8eb;
  }

  .mobileAddUnitButton {
    background: #006070;
    border-color: #0ca3b8;
    color: white;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    min-width: 42px;
    padding: 4px 10px;
  }

  .panelCollapseButton {
    display: none;
  }

  .newRosterLayout {
    grid-template-columns: 1fr;
  }

  .modalBackdrop {
    align-items: stretch;
    justify-items: stretch;
    min-height: 100dvh;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  }

  .modalPanel,
  .discordExportPanel {
    background: #111b26;
    border-color: #31545d;
    color: #eef4f6;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, env(safe-area-inset-bottom, 0px)));
    width: 100%;
  }

  .modalPanel select,
  .modalPanel input[type="text"],
  .modalPanel input[type="number"],
  .discordExportPanel select,
  .discordExportPanel input[type="text"],
  .discordExportPanel input[type="number"] {
    background: #0b1118;
    border-color: #49616b;
    color: #f4f8fa;
  }

  .modalPanel button,
  .discordExportPanel button {
    background: #1b303a;
    border-color: #49616b;
    color: #f4f8fa;
  }

  .modalPanel button:hover,
  .modalPanel button:focus-visible,
  .discordExportPanel button:hover,
  .discordExportPanel button:focus-visible {
    background: #24505b;
  }

  .modalPanel button:disabled,
  .discordExportPanel button:disabled {
    background: #18232a;
    color: #74858c;
  }

  .detachmentChoiceList,
  .previewMaster,
  .previewDetachment,
  .previewSection,
  .previewItem {
    background: #0d1720;
    border-color: #49616b;
  }

  .detachmentChoiceGroup h3,
  .previewDetachment > summary,
  .previewSection > summary {
    background: #1a2a33;
    border-color: #49616b;
    color: #eef4f6;
  }

  .previewItem,
  .forceDispositionCard {
    background: #121f28;
    color: #eef4f6;
  }

  .previewDispositionNote {
    background: #16242c;
    border-color: #49616b;
    color: #eef4f6;
  }

  .previewDispositionNote span {
    color: #a9bbc2;
  }

  .previewDetachment > summary small,
  .previewSection > summary small,
  .previewItem > summary small,
  .modalPanel .muted,
  .modalPanel small {
    color: #a9bbc2;
  }

  .modalPanel .warning {
    color: #ffbd66;
  }

  .discordExportLayout {
    grid-template-columns: 1fr;
  }

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

  .discordOptionsPanel,
  .discordPreviewPanel {
    padding: 10px;
  }

  .discordExportPreview {
    min-height: 260px;
  }

  .modalActions {
    bottom: 0;
    background: inherit;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: 10px;
    position: sticky;
  }

  .detailsPanel table,
  .sheet table {
    font-size: 12px;
  }

  .detailsPanel th,
  .detailsPanel td,
  .sheet th,
  .sheet td {
    padding: 4px;
  }

  body .appTransientMessage {
    background: #075d4d;
    border-color: #35d3ad;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    color: #ffffff;
    font-size: 16px;
    padding: 12px 16px;
    text-align: center;
    width: max-content;
    z-index: 110;
  }

  .weaponTable .weaponCountColumn,
  .weaponTable .weaponNameColumn {
    display: none;
  }

  .weaponTable .mobileWeaponNameRow {
    display: table-row;
  }

  .weaponTable .mobileWeaponNameRow td {
    background: rgba(200, 220, 224, 0.16);
    border-bottom: 0;
    color: #dbe7ea;
    font-size: 15px;
    font-weight: 800;
    padding: 7px 6px 4px;
    white-space: normal;
  }

  .weaponTable .weaponStatsRow td {
    font-size: 14px;
    font-weight: 700;
  }

  .weaponTable .weaponKeywordRow td {
    white-space: normal;
  }

  .weaponTable .ruleToken {
    font-size: 12px;
    padding: 2px 4px;
  }

  .weaponPreviewToken {
    color: #dbe7ea;
    cursor: pointer;
    font-weight: 800;
  }

  .weaponPreviewWrap {
    position: relative;
  }

  .weaponPreviewWrap:hover .weaponPreviewPopover,
  .weaponPreviewWrap:focus-within .weaponPreviewPopover {
    display: none;
  }

  .weaponPreviewWrap.active .weaponPreviewPopover {
    background: #0d141d;
    border-color: #5e7484;
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
    color: #e9f1f3;
    display: block;
    left: 0;
    max-height: min(70vh, 620px);
    max-width: calc(100vw - 24px);
    min-width: 0;
    overflow: auto;
    padding: 12px;
    position: fixed;
    right: auto;
    top: 0;
    width: min(560px, calc(100vw - 24px));
    z-index: 120;
  }

  .weaponPreviewClose {
    background: #22313d;
    border: 1px solid #5e7484;
    color: #f1f7f9;
    display: block;
    font-weight: 800;
    margin: 0 0 10px auto;
    min-height: 36px;
  }
}

.leader {
  font-weight: bold;
}

.valid {
  color: green;
  font-weight: bold;
  margin-bottom: 4px;
}

.invalid,
.warning {
  color: #8a4b00;
  font-weight: bold;
  margin-bottom: 4px;
}

.warningSummary {
  border: 2px solid #c97800;
  background: #fff4dd;
  padding: 8px;
  margin-bottom: 8px;
}

.modelSummary {
  margin: 10px 0;
}

.modelRows {
  display: grid;
  gap: 6px;
  padding: 8px 0 2px;
}

.modelRow {
  border-bottom: 1px solid #d6e2e4;
  display: grid;
  gap: 3px;
  padding: 0 0 7px;
}

.modelRow:last-child {
  border-bottom: 0;
}

.modelRow small {
  color: #4d5f63;
  line-height: 1.35;
}

.optionRow {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.loadoutHeading { margin: 14px 0 8px; }
.optionGroup { border: 1px solid #9aa; margin-bottom: 7px; background: #fafafa; }
.optionGroup > summary { align-items: center; background: #e4eeee; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; }
.optionGroup > summary small { color: #465c60; white-space: nowrap; }
.optionGroupRows { padding: 2px 8px; }
.nestedOptionGroups { border-left: 2px solid #b7c8cb; margin: 0 0 4px 10px; padding-left: 8px; }
.nestedOptionGroups .optionGroup { margin: 4px 0 6px; }
.optionGroupDepth1 > summary { background: #edf4f4; color: #22383c; padding: 6px 8px; }
.optionGroupDepth2 > summary { background: #f5f8f8; color: #22383c; padding: 6px 8px; }
.requiredBadge { color: #8a4b00; font-size: 11px; text-transform: uppercase; }
.compactOptionRow { align-items: center; border-bottom: 1px solid #ddd; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; margin: 0; padding: 6px 0; }
.compactOptionRow:last-child { border-bottom: 0; }
.compactOptionRow input[type="number"] { box-sizing: border-box; font-size: 14px; width: 54px; }
.compactOptionRow input[type="checkbox"] { justify-self: end; margin: 0; }
.loadoutStepper { align-items: center; display: grid; gap: 4px; grid-template-columns: 44px 50px 44px; }
.loadoutStepper .loadoutInput { font-size: 16px; height: 44px; margin: 0; padding: 4px; text-align: center; width: 50px; }
.loadoutStepper .loadoutStep { font-size: 24px; font-weight: 800; line-height: 1; margin: 0; min-height: 44px; padding: 0; width: 44px; }
.loadoutStepper .loadoutStep:disabled { cursor: default; opacity: 0.38; }
.optionName { min-width: 0; }
.optionPoints { color: #315f68; font-size: 12px; font-weight: 700; white-space: nowrap; }
.optionLimits { color: #617074; font-size: 11px; white-space: nowrap; }
.lockedOption { color: #596164; }

.weaponPreviewWrap {
  display: inline-block;
  position: relative;
}

.weaponPreviewToken {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: help;
  font: inherit;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.weaponPreviewToken:focus {
  outline: 2px solid #9fd1d8;
  outline-offset: 2px;
}

.weaponPreviewPopover {
  background: #f8fbfc;
  border: 1px solid #26363b;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: #182124;
  display: none;
  left: 0;
  line-height: 1.25;
  min-width: 400px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 12px;
  position: absolute;
  top: calc(100% + 6px);
  white-space: normal;
  z-index: 90;
}

.weaponPreviewWrap:hover .weaponPreviewPopover,
.weaponPreviewWrap:focus-within .weaponPreviewPopover,
.weaponPreviewWrap.active .weaponPreviewPopover {
  display: block;
}

@media (max-width: 860px), (display-mode: standalone) {
  .startScreen {
    margin: 12px;
    min-height: calc(100vh - 24px);
  }

  .startHeader {
    display: grid;
    gap: 12px;
    justify-content: stretch;
    justify-items: stretch;
    width: 100%;
  }

  .savedRosterCards,
  .savedRosterFactionCards {
    grid-template-columns: 1fr;
  }

  .startHeaderLead {
    display: grid;
    gap: 12px;
  }

  .startBrandRow {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    width: 100%;
  }

  .startBrand {
    display: grid;
    font-size: 13px;
    line-height: 1.05;
    margin: 0;
    white-space: normal;
  }

  .startBrand span {
    display: block;
  }

  .startSupportLink {
    font-size: 12px;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
  }

  .startHeaderActions {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .startHeaderActions .startNewRoster {
    grid-column: 1 / -1;
  }

  .startHeaderActions button {
    font-size: 13px;
    margin-left: 0;
    min-height: 40px;
    overflow: hidden;
    padding: 7px 4px;
    text-overflow: ellipsis;
    width: 100%;
  }

  .startNewRoster {
    box-sizing: border-box;
    font-size: 15px;
    margin-left: 0;
    min-height: 40px;
    padding: 7px 12px;
    width: 100%;
  }

  .startIntro h2 {
    font-size: 24px;
    margin: 0 0 6px;
    white-space: nowrap;
  }

  .startIntro {
    margin-top: 0;
  }

  .startIntro p {
    font-size: 15px;
    margin: 0;
    white-space: nowrap;
  }

  .weaponPreviewWrap:hover .weaponPreviewPopover,
  .weaponPreviewWrap:focus-within .weaponPreviewPopover {
    display: none;
  }

  .weaponPreviewWrap.active .weaponPreviewPopover {
    display: block;
  }
}

@media (max-width: 520px) {
  .startHeaderActions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .updateButtonWide {
    display: none;
  }

  .updateButtonNarrow {
    display: inline;
  }
}

.weaponPreviewClose {
  display: none;
}

.weaponPreviewProfile,
.weaponPreviewProfile strong,
.weaponPreviewProfile small,
.weaponPreviewProfile em {
  display: block;
}

.weaponPreviewProfile + .weaponPreviewProfile {
  border-top: 1px solid #cbdadd;
  margin-top: 8px;
  padding-top: 8px;
}

.weaponPreviewProfile small {
  color: #4d5f63;
  margin-top: 2px;
}

.weaponPreviewProfile em {
  color: #315f67;
  font-style: normal;
  margin-top: 7px;
}

.optionRulePreview > span {
  display: block;
  line-height: 1.4;
  margin-top: 7px;
}

.optionDetailsPopover {
  min-width: min(280px, calc(100vw - 32px));
  width: min(280px, calc(100vw - 32px));
}

.weaponPreviewStats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.weaponPreviewStats span {
  border: 1px solid #ccdadd;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 42px;
  padding: 5px 6px;
  white-space: nowrap;
}

.weaponPreviewStats b {
  display: block;
  font-size: 10px;
  color: #52676c;
}

.assignmentRow, .assignmentSelect { align-items: center; border-bottom: 1px solid #ddd; display: grid; gap: 8px; margin: 0; padding: 7px 0; }
.assignmentRow { grid-template-columns: minmax(0, 1fr) auto; }
.assignmentSelect { grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr); }
.assignmentRow small, .assignmentSelect small { color: #697578; display: block; font-size: 11px; }
.assignmentSelect select { font-size: 14px; min-width: 0; width: 100%; }
.enhancementAssignments { margin-top: 10px; }
.assignmentDisclosure { min-width: 0; }
.assignmentDisclosure > summary { cursor: pointer; }
.assignmentDisclosure small { display: inline; }
.compactMessage { margin: 9px 0 0; }

.appTransientMessage {
  background: #102f36;
  border: 1px solid #2c6f7a;
  border-radius: 4px;
  bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  color: #f7fbfc;
  font-size: 14px;
  font-weight: 700;
  left: 50%;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 14px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 80;
}

.attachedMembers {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.attachedMember {
  align-items: center;
  background: #f7fbfb;
  border: 1px solid #9aa;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px;
}

.attachedMember small {
  color: #596164;
  display: block;
  margin-top: 3px;
}

.sidebarBack {
  margin: 0 0 10px;
}

.sidebarNicknameControl {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(70px, max-content) minmax(160px, 260px);
  margin: -4px 0 8px;
}

.sidebarNicknameControl span {
  color: #596164;
  font-size: 12px;
  font-weight: 700;
}

.sidebarNicknameControl input {
  box-sizing: border-box;
  font-size: 14px;
  width: 100%;
}

.sidebarSelect,
.unitSizeControl {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}

.unitSizeControl {
  background: #eef7f8;
  border: 1px solid #8aa;
  padding: 10px;
}

.unitSizeControl input { width: 90px; }

.unitSizePresets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.unitSizePresets button {
  margin-left: 0;
}

.sidebarGroup {
  border: 1px solid #777;
  margin-bottom: 8px;
}

.sidebarGroup > summary {
  background: #006070;
  color: white;
  cursor: pointer;
  font-weight: bold;
  padding: 8px;
}

.sidebarGroup > div { padding: 9px; }
.sidebarCard p { line-height: 1.35; }

.stratagemsGroup > summary {
  background: #374151;
}

.stratagemList {
  margin-bottom: 12px;
}

.stratagemList h4 {
  margin: 8px 0 6px;
}

.stratagemList h4 small {
  color: #596164;
  font-weight: 400;
}

.stratagemItem {
  border: 1px solid #bbb;
  margin-bottom: 6px;
  padding: 0;
}

.stratagemItem summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  font-weight: bold;
  padding: 7px 8px;
}

.stratagemMeta {
  align-items: center;
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.stratagemMeta b {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.16);
  padding: 1px 4px;
}

.stratagemMeta small {
  color: #2f3b41;
  font-weight: 400;
}

.stratagemBody {
  background: rgba(255,255,255,0.72);
  border-top: 1px solid rgba(0,0,0,0.12);
  line-height: 1.35;
  padding: 8px;
}

.stratagemLegend {
  color: #4d5558;
  font-style: italic;
}

.stratagemCore {
  background: #f7e7a6;
  border-color: #b58b16;
}

.stratagemTone0 {
  background: #dbeafe;
  border-color: #6b8fc6;
}

.stratagemTone1 {
  background: #dcfce7;
  border-color: #68a97e;
}

.stratagemTone2 {
  background: #fae8ff;
  border-color: #b177bd;
}

.stratagemTone3 {
  background: #ffedd5;
  border-color: #c98a4b;
}

.kwb {
  font-weight: 700;
  text-transform: uppercase;
}

pre {
  white-space: pre-wrap;
  background: #f4f4f4;
  border: 1px solid #ccc;
  padding: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 14px;
}

.weaponTable {
  table-layout: auto;
}

.weaponTable th:first-child,
.weaponTable td:first-child,
.weaponTable th:nth-child(n+3),
.weaponTable td:nth-child(n+3) {
  white-space: nowrap;
}

.weaponKeywordRow td {
  background: rgba(220, 238, 242, 0.35);
  border-top: 0;
  font-size: 12px;
  padding-top: 3px;
}

.weaponKeywordChips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.weaponKeywordChips span {
  background: #eef7f8;
  border: 1px solid #517b83;
  border-radius: 4px;
  color: #064f5a;
  display: inline-block;
  padding: 3px 5px;
}

.mobileWeaponNameRow {
  display: none;
}

th,
td {
  border: 1px solid #999;
  padding: 5px;
  text-align: left;
}

th {
  background: #ddd;
}

.card {
  border: 1px solid #999;
  background: #f4f4f4;
  padding: 8px;
  margin-bottom: 8px;
}

.card p {
  margin-bottom: 0;
}

.chips span {
  display: inline-block;
  border: 1px solid #999;
  background: #eee;
  padding: 4px 6px;
  margin: 2px;
}

.ruleTokenWrap {
  display: inline-block;
  margin: 2px;
}

.chips .ruleTokenWrap {
  background: transparent;
  border: 0;
  margin: 2px;
  padding: 0;
}

.ruleToken {
  background: #eef7f8;
  border: 1px solid #517b83;
  border-radius: 4px;
  color: #064f5a;
  cursor: help;
  font: inherit;
  margin: 0;
  padding: 4px 6px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.ruleToken:hover,
.ruleToken:focus {
  background: #dceff2;
  outline: 2px solid #9fd1d8;
}

.ruleTokenCompact {
  font-size: 12px;
  padding: 2px 4px;
}

.rulePopover {
  border: 1px solid #26363b;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  line-height: 1.35;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
}

.rulePopover strong,
.rulePopover small {
  display: block;
}

.rulePopover small {
  color: #4d5f63;
  margin-top: 2px;
}

.rulePopover p {
  margin: 8px 0 0;
}

.pts {
  font-size: 16px;
  color: green;
}

.categoryHeader {
  background: #006070;
  color: white;
  padding: 8px;
  margin: 12px 0 6px 0;
  border: 1px solid #003840;
  cursor: pointer;
  user-select: none;
}

.categoryHeader:hover {
  background: #008090;
}

html[data-theme="dark"] body {
  background: #101417;
  color: #c1ccd0;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #11181c;
  border-color: #42535a;
  color: #c1ccd0;
}

html[data-theme="dark"] button {
  background: #1e272c;
  border-color: #42535a;
  color: #c1ccd0;
}

html[data-theme="dark"] button:hover {
  background: #2a373d;
}

html[data-theme="dark"] .panelCollapseButton {
  background: #132d33;
  border-color: #3b8790;
  color: #9ee8f0;
}

html[data-theme="dark"] .panelCollapseButton:hover {
  background: #1d424a;
}

html[data-theme="dark"] .builderHeader,
html[data-theme="dark"] section,
html[data-theme="dark"] .modalPanel,
html[data-theme="dark"] .exportMenuPanel {
  background: #171d21;
  border-color: #34454c;
}

html[data-theme="dark"] .builderHeader {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .appBrand,
html[data-theme="dark"] .startBrand,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .unit small,
html[data-theme="dark"] .savedRosterCard small,
html[data-theme="dark"] .attachedMember small,
html[data-theme="dark"] .modelRow small,
html[data-theme="dark"] .optionLimits,
html[data-theme="dark"] .lockedOption,
html[data-theme="dark"] .assignmentRow small,
html[data-theme="dark"] .assignmentSelect small,
html[data-theme="dark"] .stratagemLegend,
html[data-theme="dark"] .rulePopover small {
  color: #89969b;
}

html[data-theme="dark"] .optionPoints {
  color: #f6c873;
}

html[data-theme="dark"] .readonlyField,
html[data-theme="dark"] .rosterConfiguration,
html[data-theme="dark"] .unitSizeControl,
html[data-theme="dark"] .discordOptionsPanel,
html[data-theme="dark"] .discordPreviewPanel {
  background: #1f2a2f;
  border-color: #42535a;
  color: #c1ccd0;
}

html[data-theme="dark"] .unit,
html[data-theme="dark"] .savedRosterCard,
html[data-theme="dark"] .attachedMember,
html[data-theme="dark"] .card,
html[data-theme="dark"] pre,
html[data-theme="dark"] .optionGroup,
html[data-theme="dark"] .previewItem,
html[data-theme="dark"] .stratagemItem {
  background: #20282d;
  border-color: #51646c;
}

html[data-theme="dark"] .unit:hover,
html[data-theme="dark"] .rosterConfiguration:hover {
  background: #2d3a40;
}

html[data-theme="dark"] .unit.selected,
html[data-theme="dark"] .rosterConfiguration.selected {
  border-color: #26b8c5;
  box-shadow: inset 4px 0 #0f8290;
}

html[data-theme="dark"] .attachedLeaderReference {
  background: #2d2718;
  border-color: #aa8840;
}

html[data-theme="dark"] .attachmentReference {
  color: #f6c873 !important;
}

html[data-theme="dark"] .modifiedCharacteristic {
  color: #f6c873;
}

html[data-theme="dark"] .displayControls .segmentedControl,
html[data-theme="dark"] .rosterLayoutToggle,
html[data-theme="dark"] .discordColorOptions,
html[data-theme="dark"] .discordCustomColors {
  border-color: #42535a;
}

html[data-theme="dark"] .segmentedControl button + button,
html[data-theme="dark"] .rosterLayoutToggle button + button {
  border-left-color: #42535a;
}

html[data-theme="dark"] .segmentedControl button.active,
html[data-theme="dark"] .rosterLayoutToggle button.active,
html[data-theme="dark"] .layout.availableUnitsCollapsed .panelCollapseButton,
html[data-theme="dark"] .unitSection > summary,
html[data-theme="dark"] .sidebarGroup > summary,
html[data-theme="dark"] .previewMaster > summary,
html[data-theme="dark"] .categoryHeader {
  background: #0f8290;
  border-color: #26b8c5;
  color: #d0dcdf;
}

html[data-theme="dark"] .unitSection > summary:hover,
html[data-theme="dark"] .categoryHeader:hover {
  background: #11a0ad;
}

html[data-theme="dark"] .layout.availableUnitsCollapsed .availablePanel::after {
  background: #0f8290;
}

html[data-theme="dark"] .stratagemsGroup > summary {
  background: #374151;
}

html[data-theme="dark"] .rosterPoints,
html[data-theme="dark"] .valid,
html[data-theme="dark"] .pts {
  color: #87e4a2;
}

html[data-theme="dark"] .rosterPoints {
  background: #12301e;
  border-color: #2d7a48;
}

html[data-theme="dark"] .dangerButton {
  border-color: #b45353;
  color: #ff9b9b;
}

html[data-theme="dark"] .dangerButton:hover {
  background: #3a1d20;
}

html[data-theme="dark"] .warning,
html[data-theme="dark"] .invalid,
html[data-theme="dark"] .warningBadge,
html[data-theme="dark"] .requiredBadge {
  color: #f6c873;
}

html[data-theme="dark"] .warningSummary {
  background: #392914;
  border-color: #b88328;
}

html[data-theme="dark"] .startScreen {
  border-color: #34454c;
}

html[data-theme="dark"] .startLibraryTabs { border-bottom-color: #42535a; }
html[data-theme="dark"] .startLibraryTabs button { color: #89969b; }
html[data-theme="dark"] .startLibraryTabs button.active { border-bottom-color: #26b8c5; color: #9ee8f0; }
html[data-theme="dark"] .startLibraryTabs button span { background: #263238; }
html[data-theme="dark"] .gameHistoryCard { background: #20282d; border-color: #51646c; }
html[data-theme="dark"] .gameHistoryCard:hover,html[data-theme="dark"] .gameHistoryCard:focus-visible { background: #27363c; border-color: #22a8ba; }
html[data-theme="dark"] .gameHistoryDetails small,html[data-theme="dark"] .gameHistoryOutcome span,html[data-theme="dark"] .gameHistorySummary { color: #9ba8ad; }
html[data-theme="dark"] .gameHistoryEmpty { border-color: #42535a; }
html[data-theme="dark"] .syncDataPanel > header,html[data-theme="dark"] .syncDataPanel section > h3 { border-color: #42535a; }
html[data-theme="dark"] .syncDataPanel > p,html[data-theme="dark"] .syncDataRows small { color: #9ba8ad; }
html[data-theme="dark"] .syncDataRows > div { border-color: #42535a; }
html[data-theme="dark"] .syncDeletionMarkers span { color: #e3a2a2; }

html[data-theme="dark"] .startSupportLink {
  color: #809198;
}

html[data-theme="dark"] .startSupportLink:hover,
html[data-theme="dark"] .startSupportLink:focus-visible {
  color: #e2b66f;
}

html[data-theme="dark"] .startupPanel p {
  color: #a8b8be;
}

html[data-theme="dark"] .startupBar {
  background: #1f2a2f;
  border-color: #42535a;
}

html[data-theme="dark"] .startupBar span {
  background: #87e4a2;
}

html[data-theme="dark"] .modalBackdrop {
  background: rgba(0, 0, 0, 0.68);
}

html[data-theme="dark"] .exportMenuToggle,
html[data-theme="dark"] .compactOptionRow,
html[data-theme="dark"] .assignmentRow,
html[data-theme="dark"] .assignmentSelect,
html[data-theme="dark"] .modelRow,
html[data-theme="dark"] .stratagemBody {
  border-color: #34454c;
}

html[data-theme="dark"] .stratagemBody {
  background: rgba(17, 24, 28, 0.72);
}

html[data-theme="dark"] .detachmentChoiceList,
html[data-theme="dark"] .previewMaster,
html[data-theme="dark"] .previewDetachment,
html[data-theme="dark"] .previewSection,
html[data-theme="dark"] .previewItem,
html[data-theme="dark"] .sidebarGroup,
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: #51646c;
}

html[data-theme="dark"] th,
html[data-theme="dark"] .detachmentChoiceGroup h3,
html[data-theme="dark"] .optionGroup > summary,
html[data-theme="dark"] .previewDetachment > summary {
  background: #263238;
}

html[data-theme="dark"] .previewSection > summary,
html[data-theme="dark"] .optionGroupDepth1 > summary {
  background: #202b30;
  color: #c1ccd0;
}

html[data-theme="dark"] .optionGroupDepth2 > summary {
  background: #1b2428;
  color: #c1ccd0;
}

html[data-theme="dark"] .chips span {
  background: #202b30;
  border-color: #51646c;
}

html[data-theme="dark"] .ruleToken {
  background: #132d33;
  border-color: #3b8790;
  color: #9ee8f0;
}

html[data-theme="dark"] .ruleToken:hover,
html[data-theme="dark"] .ruleToken:focus {
  background: #1d424a;
}

html[data-theme="dark"] .rulePopover {
  background: #171d21;
  border-color: #51646c;
  color: #c1ccd0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"] .weaponPreviewPopover {
  background: #171d21;
  border-color: #51646c;
  color: #c1ccd0;
}

html[data-theme="dark"] .weaponPreviewProfile + .weaponPreviewProfile,
html[data-theme="dark"] .weaponPreviewStats span {
  border-color: #34454c;
}

html[data-theme="dark"] .weaponPreviewProfile small,
html[data-theme="dark"] .weaponPreviewStats b {
  color: #9caeb4;
}

html[data-theme="dark"] .weaponPreviewProfile em {
  color: #8ed2dc;
}

html[data-theme="dark"] .stratagemMeta b {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .stratagemMeta small,
html[data-theme="dark"] .previewDetachment > summary small,
html[data-theme="dark"] .previewSection > summary small,
html[data-theme="dark"] .previewItem > summary small,
html[data-theme="dark"] .optionGroup > summary small {
  color: #98a6ab;
}

html[data-theme="dark"] .stratagemCore {
  background: #3b341c;
  border-color: #9b7a2d;
}

html[data-theme="dark"] .stratagemTone0 {
  background: #1b2e49;
  border-color: #5478aa;
}

html[data-theme="dark"] .stratagemTone1 {
  background: #173422;
  border-color: #4f9668;
}

html[data-theme="dark"] .stratagemTone2 {
  background: #351c3b;
  border-color: #8c5d98;
}

html[data-theme="dark"] .stratagemTone3 {
  background: #3b2617;
  border-color: #a46e3d;
}

html[data-theme="dark"] .rosterSectionName:focus {
  background: #11181c;
  color: #c1ccd0;
}

html[data-theme="dark"] .rosterSectionName {
  border-color: rgba(184, 196, 200, 0.45);
  color: #d0dcdf;
}

html[data-theme="dark"] .unitNickname {
  color: #8ed2dc;
}

html[data-theme="dark"] .sidebarNicknameControl span {
  color: #9caeb4;
}

html[data-theme="dark"] .discordExportPreview {
  color: #c1ccd0;
}

html[data-theme="dark"] .discordExportPreview .ansi37 {
  color: #c1ccd0;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] b,
html[data-theme="dark"] strong,
html[data-theme="dark"] .unit,
html[data-theme="dark"] .savedRosterCard {
  color: #cbd5d9;
}

html[data-theme="dark"] .savedRosterCard .savedRosterEdited {
  color: #a9cfbd;
}

html[data-theme="dark"] .startRosterFilterPanel {
  border-color: #42535a;
}

html[data-theme="dark"] .savedRosterCard:hover,
html[data-theme="dark"] .savedRosterCard:focus-visible {
  background: #27363c;
  border-color: #22a8ba;
}

html[data-theme="dark"] .savedRosterFactionGroup > h3 span {
  color: #89969b;
}

html[data-theme="dark"] .desktopPlayButton,
html[data-theme="dark"] .savedRosterActions .startPlayRoster {
  color: #17130a;
}

html[data-theme="dark"] .unitActions button,
html[data-theme="dark"] .savedRosterActions button,
html[data-theme="dark"] .configureMember,
html[data-theme="dark"] .removeMember,
html[data-theme="dark"] .visibilityButton {
  color: #b8c4c8;
}

html[data-theme="dark"] svg {
  color: #b8c4c8;
  stroke: currentColor;
}

.offlinePanel {
  align-items: center;
  background: #102027;
  border: 1px solid #31545d;
  border-radius: 12px;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  box-sizing: border-box;
  color: #e9f1f3;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  left: max(12px, env(safe-area-inset-left, 0px));
  max-width: 620px;
  padding: 12px;
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 120;
}

.offlinePanel[hidden] {
  display: none;
}

.offlineStatusText {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.offlineStatusText strong {
  color: #f2f8fa;
  font-size: 14px;
}

.offlineStatusText span {
  color: #aebfc5;
  font-size: 12px;
  line-height: 1.35;
}

.offlineStatusText progress {
  accent-color: #0ca3b8;
  height: 8px;
  margin-top: 4px;
  width: 100%;
}

.offlinePanel button {
  background: #006070;
  border-color: #0ca3b8;
  color: white;
  font-weight: 800;
  margin: 0;
  min-height: 42px;
  white-space: nowrap;
}

.offlinePanel[data-state="ready"] {
  border-color: #34785d;
}

.offlinePanel[data-state="ready"] button {
  background: #173a31;
  border-color: #34785d;
}

.offlinePanel[data-state="error"] {
  border-color: #a95252;
}

@media (max-width: 620px) {
  .offlinePanel {
    grid-template-columns: 1fr;
  }

  .offlinePanel button {
    width: 100%;
  }
}

@media (max-width: 860px), (display-mode: standalone) {
  .mobileRosterHeader {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-top: max(8px, env(safe-area-inset-top, 0px));
  }

  .mobileRosterList {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .mobileActionBar {
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 861px) and (display-mode: standalone) {
  body {
    background: #070c11;
  }

  .mobileShell {
    border-left: 1px solid #20343d;
    border-right: 1px solid #20343d;
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.45);
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
  }

  .mobileRosterList {
    padding: 18px 22px 104px;
  }

  .mobileActionBar {
    left: 50%;
    max-width: 860px;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
  }

  .layout > .availablePanel,
  .layout > .detailsPanel {
    left: 50%;
    max-width: 860px;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
  }

  .startScreen {
    margin-left: auto;
    margin-right: auto;
    max-width: 836px;
  }

  .offlinePanel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(620px, calc(100vw - 32px));
  }
}
/* Mobile Play Mode */
.playModeShell{position:fixed;inset:0;z-index:4000;display:grid;grid-template-rows:auto 1fr auto;background:#0d141a;color:#f5f1e8;font-family:Inter,ui-sans-serif,system-ui,sans-serif}.playModeShell[hidden]{display:none}.playModeHeader{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 12px;background:#141d24;border-bottom:1px solid #2b3740}.playModeHeader>div{display:grid}.playModeHeader strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playModeEyebrow{font-size:11px;letter-spacing:.18em;color:#e5aa35;font-weight:800}.playModeHeader button,.playModeNav button,.playModeContent button,.playModeModal button{min-height:44px;border:1px solid #394650;border-radius:10px;background:#202c35;color:#f5f1e8;font-weight:700}.playModeBack{padding:0 12px}.playModeEndButton{color:#f1b4b4!important}.playModeContent{overflow:auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% -20%,#22313c 0,#0d141a 42%)}.playModeNav{display:grid;grid-template-columns:repeat(4,1fr);padding:8px 10px max(8px,env(safe-area-inset-bottom));background:#141d24;border-top:1px solid #2b3740}.playModeNav button{border:0;background:transparent;color:#8f9ba3;font-size:12px}.playModeNav button.active{background:#263642;color:#fff;box-shadow:inset 0 -3px #e5aa35}.playBattleHero{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;gap:10px;padding:15px;border:1px solid #394650;border-radius:16px;background:linear-gradient(135deg,#1c2b35,#172027)}.playRoundControl{display:grid;text-align:center}.playRoundControl small{font-size:8px;letter-spacing:.08em;color:#9ba6ae}.playRoundControl select{height:50px;border:0;background:transparent;color:#fff;font-size:36px;font-weight:800;text-align:center}.playPhaseTitle{text-align:center;display:grid;gap:3px}.playPhaseTitle span{font-size:11px;letter-spacing:.12em;color:#e5aa35;font-weight:800}.playPhaseTitle strong{font-size:20px}.playNextButton{background:#e5aa35!important;color:#172027!important;border:0!important}.playStateSelectors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.playStateSelectors label,.playSetupGrid label,.playScorePanel label,.playPickerPanel label{display:grid;gap:5px;font-size:11px;letter-spacing:.08em;color:#9ba6ae}.playStateSelectors select,.playSetupGrid input,.playSetupGrid select,.playScorePanel input,.playScorePanel select,.playPickerPanel input{height:45px;padding:0 11px;border:1px solid #394650;border-radius:10px;background:#182129;color:#fff;font-size:15px}.playScoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:18px 0;padding:18px 10px;border-radius:16px;background:#151f26;border:1px solid #2d3b45}.playPlayerScore{display:grid;text-align:center;justify-items:center}.playPlayerScore>small{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aab3b9}.playPlayerScore>strong{font-size:56px;line-height:1}.playPlayerScore>span{font-size:10px;letter-spacing:.18em;color:#e5aa35}.playScoreDivider{padding:7px;color:#737f87;font-size:9px;writing-mode:vertical-rl;letter-spacing:.1em}.playCpControl{display:grid;grid-template-columns:38px auto 38px;align-items:center;gap:5px;margin-top:12px}.playCpControl button{min-height:36px!important;height:36px}.playCpControl b{font-size:12px}.playRoundCaps{display:grid;gap:8px}.playRoundCaps>div{padding:12px;border-radius:12px;background:#151f26;border:1px solid #2d3b45}.playRoundCaps b{font-size:12px}.playRoundCaps span{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.playRoundCaps em{position:relative;overflow:hidden;padding:8px;border-radius:7px;background:#26323b;font-size:11px;font-style:normal;isolation:isolate}.playRoundCaps em:before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--fill)*100%);background:#b78026;z-index:-1}.playPrimaryStrip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.playPrimaryMission{padding:12px;border-radius:12px;background:#18242c;border:1px solid #34434e;display:grid;gap:7px}.playPrimaryMission small{color:#e5aa35;font-size:9px}.playPrimaryMission b{min-height:39px;font-size:14px}.playPrimaryMission button{min-height:38px!important}.playTextButton{border:0!important;background:transparent!important;color:#aab4bb!important}.playScoreShortcut{width:100%;margin-top:12px;background:#e5aa35!important;color:#172027!important;border:0!important}.playPlayerTabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:#172129}.playPlayerTabs button{border:0!important;background:transparent!important}.playPlayerTabs button.active{background:#33434e!important}.playDeckControls{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin:16px 0}.playDeck{min-height:150px!important;background:linear-gradient(145deg,#176347,#22835d)!important;border:4px double #d8d0b8!important;display:grid;align-content:center;justify-items:center}.playDeck span{font-size:40px}.playDeck small,.playDeckControls>div small{color:#aab3b9}.playDeckControls>div{display:grid;gap:8px}.playActiveHand header,.playSectionHeading{display:flex;align-items:end;justify-content:space-between;margin:16px 0}.playActiveHand header h2,.playSectionHeading h2{margin:3px 0}.playActiveHand header small,.playSectionHeading small{color:#e5aa35;letter-spacing:.12em}.playActiveHand header>b{font-size:12px;color:#aab3b9}.playEmptyHand{padding:40px 22px;text-align:center;border:1px dashed #45535d;border-radius:14px;color:#9ba5ac}.playMissionCard{display:grid;grid-template-columns:42% 1fr;gap:14px;margin:12px 0;padding:10px;border:1px solid #34434e;border-radius:15px;background:#182229;overflow:hidden}.playMissionImage{width:100%;height:190px;object-fit:cover;object-position:top;border-radius:9px}.playMissionCard>div{display:grid;align-content:start;gap:8px}.playMissionCard h3{margin:0;font-size:18px}.playMissionCard small{color:#79c39f}.playCardScores{display:flex;flex-wrap:wrap;gap:6px}.playCardScores button{min-height:40px!important;padding:0 10px;background:#e5aa35!important;color:#172027!important;border:0!important}.playDiscardButton{margin-top:4px;color:#f1b4b4!important}.playArmyList{display:grid;gap:10px}.playArmyUnit{width:100%;min-height:92px!important;padding:14px!important;display:grid;grid-template-columns:1fr auto;text-align:left;align-items:center}.playArmyUnit>span{display:grid;gap:3px}.playArmyUnit small{font-size:9px;letter-spacing:.1em;color:#e5aa35}.playArmyUnit b{font-size:17px}.playArmyUnit em{font-size:12px;color:#9aa5ad;font-style:normal}.playArmyUnit>strong{font-size:24px;text-align:right}.playArmyUnit>strong small{display:block}.playArmyUnit.destroyed{opacity:.48;filter:grayscale(1)}.playLedgerRound{margin:12px 0;border:1px solid #34434e;border-radius:13px;overflow:hidden;background:#151f26}.playLedgerRound>header{display:flex;justify-content:space-between;padding:13px;background:#202c35}.playLedgerRound>div{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px;padding:10px 13px;border-top:1px solid #2c3841}.playLedgerRound>div span{display:grid}.playLedgerRound small{color:#8f9aa2;text-transform:uppercase;font-size:9px}.playLedgerRound>div button{min-height:34px!important;font-size:10px}.playLedgerRound p{padding:0 13px;color:#87939b}.playLedgerActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.playPrimaryButton{background:#e5aa35!important;color:#172027!important;border:0!important}.playModeModal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;background:rgba(4,8,11,.82);backdrop-filter:blur(5px)}.playModeModal[hidden]{display:none}.playSetupPanel,.playPickerPanel,.playScorePanel,.playFinalPanel,.playUnitPanel,.playImagePanel{width:min(100%,560px);max-height:94vh;overflow:auto;padding:20px;border:1px solid #3e4c57;border-radius:18px;background:#131c23;color:#f5f1e8;box-shadow:0 24px 80px #000}.playSetupPanel h2,.playScorePanel h2{margin:5px 0}.playSetupPanel p,.playScorePanel p{color:#9fa9b0}.playSetupGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.playSetupFirst{grid-column:1/-1}.playSetupMissions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.playSetupMissions>div{display:grid;gap:3px;padding:12px;border-radius:10px;background:#1d2932}.playSetupMissions small{color:#e5aa35}.playModalActions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.playCardPickerList{display:grid;gap:7px;margin-top:12px}.playCardPickerList button{display:flex;justify-content:space-between;padding:0 13px}.playCardPickerList small{color:#e5aa35}.playScoreChoices{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.playScoreChoices button{width:68px;height:68px;font-size:24px;background:#e5aa35!important;color:#172027!important;border:0!important}.playScoreChoices button small{display:block;font-size:9px}.playScoreChoices button:disabled{opacity:.25}.playUnitPanel{width:min(100%,700px);padding:0}.playUnitPanel>header,.playFinalPanel>header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px;background:#131c23;border-bottom:1px solid #34414b}.playUnitPanel>header h2,.playFinalPanel>header h2{margin:3px 0}.playUnitPanel>section{padding:0 16px 16px}.playModelTracker{display:grid;gap:8px}.playModel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:10px;border-radius:10px;background:#1c2831}.playModel>div:first-child{display:grid}.playModel small{color:#9da8af}.playModel.dead{opacity:.46;filter:grayscale(1)}.playWounds{display:grid!important;grid-template-columns:40px 62px 40px;gap:4px}.playWounds button{min-height:40px!important}.playWoundValue{display:grid;align-content:center}.playWoundValue small{font-size:8px}.playWeapons{display:grid;gap:8px}.playWeapon{border:1px solid #35434e;border-radius:10px;overflow:hidden}.playWeapon header{display:flex;justify-content:space-between;padding:9px;background:#202c35}.playWeapon header em{font-size:9px;color:#ef9a9a}.playWeapon>div{display:flex;flex-wrap:wrap;padding:8px;gap:12px}.playWeapon>div span{display:grid}.playWeapon.dead{opacity:.35;filter:grayscale(1)}.playStratagem{margin:8px 0;border:1px solid #34434e;border-radius:10px;background:#1a252d}.playStratagem summary{display:flex;justify-content:space-between;align-items:center;padding:12px}.playStratagem summary span{display:grid}.playStratagem small{color:#9da7ae}.playStratagem p{padding:0 12px 12px;color:#c8ced2;white-space:pre-line}.playImagePanel{position:relative;padding:8px}.playImagePanel button{position:sticky;top:8px;z-index:2;float:right}.playImagePanel img{width:100%;display:block;border-radius:12px}.playFinalPanel{padding:0}.playScorecardPreview{padding:12px;background:#090e12}.playScorecardPreview canvas{display:block;width:100%;height:auto;border-radius:10px}.playFinalPanel>.playModalActions{padding:0 16px 16px}.mobilePlayButton,.startPlayRoster{background:#bd8426!important;color:#151a1e!important;border-color:#e5aa35!important;font-weight:800!important}
@media(max-width:420px){.playSetupGrid{grid-template-columns:1fr}.playSetupFirst{grid-column:auto}.playBattleHero{grid-template-columns:62px 1fr 62px}.playPhaseTitle strong{font-size:17px}.playPlayerScore>strong{font-size:46px}.playPrimaryStrip{grid-template-columns:1fr}.playMissionCard{grid-template-columns:36% 1fr}.playMissionImage{height:165px}}
.playFixedSetup{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:12px;border:1px solid #855f27;border-radius:12px;background:#201d17}.playFixedSetup[hidden]{display:none}.playFixedSetup legend{padding:0 7px;color:#e5aa35;font-size:11px;font-weight:800;letter-spacing:.08em}.playMissionModeBadge{display:grid;gap:2px;margin:14px 0 4px;padding:11px 13px;border-radius:10px;border-left:4px solid #307c9f;background:#162632}.playMissionModeBadge.fixed{border-left-color:#d14b2a;background:#2b1d19}.playMissionModeBadge b{font-size:12px;letter-spacing:.12em}.playMissionModeBadge span{font-size:11px;color:#aeb7bd}.playMissionCard.fixed{border-color:#8b4938}.playMissionCard.fixed small{color:#ef977d}.playFixedActive{padding:8px;border-radius:7px;background:#39241f;color:#f0b6a7;font-size:11px;font-weight:700}.playScoreToast{position:fixed;z-index:6000;left:50%;top:max(78px,calc(env(safe-area-inset-top) + 66px));width:min(420px,calc(100vw - 28px));display:grid;grid-template-columns:46px 1fr;align-items:center;gap:10px;padding:14px 16px;border:1px solid #5ac28b;border-radius:14px;background:#123323;color:#fff;box-shadow:0 18px 60px #000b;opacity:0;transform:translate(-50%,-18px) scale(.97);transition:opacity .18s,transform .18s;pointer-events:none}.playScoreToast.visible{opacity:1;transform:translate(-50%,0) scale(1)}.playScoreToast>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#37a66f;font-size:25px;font-weight:900}.playScoreToast>div{display:grid;gap:2px}.playScoreToast strong{font-size:18px;color:#8ef0ba}.playScoreToast b{font-size:13px}.playScoreToast small{color:#c0d7ca}@media(max-width:420px){.playFixedSetup{grid-template-columns:1fr}.playScoreToast{top:max(72px,calc(env(safe-area-inset-top) + 60px))}}
.playStratagemAction{display:grid;gap:5px;padding:0 12px 12px}.playStratagemAction button{background:#e5aa35!important;color:#172027!important;border:0!important}.playStratagemAction button:disabled{background:#303b43!important;color:#9ba5ab!important;opacity:1}.playStratagemAction small{color:#9da7ae}.playStratagem.used{border-color:#458766;background:#172a22}.playStratagem.used summary strong{color:#81d5a8}.playStratagemToast{border-color:#dca43b;background:#322610}.playStratagemToast>span{background:#c58a22}.playStratagemToast strong{color:#f3c765}
.playRoundCaps{grid-template-columns:1fr 1fr;gap:10px}.playRoundCaps>div{min-width:0}.playRoundCaps>div>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:9px;border-bottom:1px solid #303c45}.playRoundCaps>div>header b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playRoundCaps>div>header small{flex:0 0 auto;color:#8f9ba3;font-size:8px;letter-spacing:.1em}.playRoundCaps span{grid-template-columns:1fr;gap:7px}.playRoundCaps em{display:flex;justify-content:space-between;gap:8px}.playRoundCaps em b{font-size:10px}.playRoundCaps em strong{font-size:11px}.playRoundCapPlayer.you{border-top:2px solid #d79c31}.playRoundCapPlayer.opponent{border-top:2px solid #72818c}
.playCpControl{grid-template-columns:46px auto 46px;gap:8px;margin-top:14px}.playCpControl button{min-height:44px!important;height:44px;font-size:19px}.playCpControl b{min-width:68px;padding:8px 10px;border-radius:999px;background:#25333d;font-size:16px;white-space:nowrap}.playPrimaryScorePanel{width:min(100%,680px)}.playPrimaryScorePanel>header{display:grid;grid-template-columns:1fr 150px;align-items:start;gap:16px}.playPrimaryScorePanel>header img{width:150px;height:190px;object-fit:cover;object-position:top;border:1px solid #46545e;border-radius:10px;cursor:pointer}.playPrimaryScoreHistory{display:grid;gap:6px;margin:12px 0;padding:12px;border-radius:10px;background:#1b2730}.playPrimaryScoreHistory>span{display:flex;justify-content:space-between;gap:12px;color:#aeb7bd}.playPrimaryScoreHistory strong{color:#f1c35b}.playFinalActions{display:grid;grid-template-columns:auto auto 1fr}.playFinalActions [data-return-lists]{justify-self:stretch}@media(max-width:520px){.playPrimaryScorePanel>header{grid-template-columns:1fr 105px}.playPrimaryScorePanel>header img{width:105px;height:140px}.playFinalActions{grid-template-columns:1fr 1fr}.playFinalActions [data-return-lists]{grid-column:1/-1}}
.playSetupYou{grid-column:1}.playSetupOpponent{grid-column:2}.playStratagemText{display:grid;gap:12px;padding:4px 12px 16px;color:#c8ced2}.playStratagemText section{display:grid;gap:4px}.playStratagemText section b{display:block;color:#f5f1e8;font-size:12px;letter-spacing:.12em}.playStratagemText section span{display:block;line-height:1.45}.playPrimaryScorePanel{width:min(94vw,900px)}.playPrimaryScorePanel>header{position:sticky;z-index:3;top:-20px;display:grid;grid-template-columns:1fr auto;align-items:center;margin:-20px -20px 14px;padding:18px 20px 14px;background:#131c23;border-bottom:1px solid #34414b}.playPrimaryScorePanel>header p{margin:4px 0}.playPrimaryScoreHint{margin:0 auto 12px;max-width:760px;text-align:center}.playPrimaryCardScorer,.playPrimaryCardBack{position:relative;width:min(100%,760px);margin:0 auto 16px}.playPrimaryCardScorer>img,.playPrimaryCardBack>img{display:block;width:100%;height:auto;border-radius:12px}.playPrimaryCardBack{display:grid;gap:6px}.playPrimaryCardBack>small{color:#e5aa35;font-size:10px;letter-spacing:.14em}.playPrimaryScoreHotspot{position:absolute!important;z-index:2;top:var(--hotspot-top);right:6.5%;width:16.5%;height:7%;min-height:0!important;padding:0!important;border:0!important;border-radius:5px!important;background:transparent!important}.playPrimaryScoreHotspot:hover,.playPrimaryScoreHotspot:focus-visible{outline:4px solid #f4bc39;outline-offset:2px;box-shadow:0 0 0 7px #0b0f14aa}.playPrimaryScoreHotspot.scored{outline:4px solid #4fe09a;outline-offset:2px}.playPrimaryScoreCount{position:absolute;top:-12px;left:-12px;display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border:2px solid #e9fff3;border-radius:999px;background:#15945a;color:#fff;font-size:12px;font-weight:900;box-shadow:0 3px 12px #000}.playPrimaryScoreHistory{max-width:760px;margin:12px auto}.playPrimaryScorePanel>label,.playPrimaryScorePanel>.playModalActions{max-width:760px;margin-left:auto;margin-right:auto}@media(max-width:520px){.playSetupYou,.playSetupOpponent{grid-column:auto}.playPrimaryScorePanel{width:100%;padding:12px}.playPrimaryScorePanel>header{top:-12px;margin:-12px -12px 10px;padding:12px}.playPrimaryScorePanel>header h2{font-size:20px}.playPrimaryScorePanel>header p{font-size:11px}.playPrimaryScoreHint{font-size:12px}.playPrimaryScoreHotspot{right:5.5%;width:18%}.playFinalActions{grid-template-columns:1fr 1fr}.playFinalActions [data-return-lists]{grid-column:1/-1}}

/* Custom palette: five user-owned channels drive the shared UI surfaces. */
.customThemePanel {
  max-width: 560px;
}

.customThemePanel p {
  line-height: 1.45;
  margin: 6px 0 0;
}

.customThemePreview {
  background: var(--custom-canvas, #101417);
  border: 1px solid var(--custom-border, #42535a);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  margin: 18px 0;
  padding: 10px;
}

.customThemePreview span {
  align-items: center;
  border: 1px solid var(--custom-border, #42535a);
  border-radius: 6px;
  color: var(--custom-text, #cbd5d9);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 56px;
}

.customThemePreview [data-custom-preview="canvas"] { background: var(--custom-canvas, #101417); }
.customThemePreview [data-custom-preview="surface"] { background: var(--custom-surface, #171d21); }
.customThemePreview [data-custom-preview="raised"] { background: var(--custom-raised, #20282d); }
.customThemePreview [data-custom-preview="accent"] {
  background: var(--custom-accent, #0f8290);
  color: var(--custom-accent-ink, #ffffff);
}

.customThemeGrid {
  display: grid;
  gap: 10px 18px;
  grid-template-columns: 1fr 1fr;
}

.customThemeGrid label {
  align-items: center;
  border-bottom: 1px solid var(--custom-border, #d8e0e3);
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  margin: 0;
  padding: 6px 0;
}

.customThemeGrid input[type="color"] {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 38px;
  padding: 0;
  width: 58px;
}

html[data-theme="dark"][data-custom-theme="true"] {
  --custom-border: color-mix(in srgb, var(--custom-text) 30%, var(--custom-surface));
  --custom-muted: color-mix(in srgb, var(--custom-text) 68%, var(--custom-surface));
  --custom-hover: color-mix(in srgb, var(--custom-accent) 18%, var(--custom-raised));
}

html[data-theme="dark"][data-custom-theme="true"] body {
  background: var(--custom-canvas);
  color: var(--custom-text);
}

html[data-theme="dark"][data-custom-theme="true"] .builderHeader,
html[data-theme="dark"][data-custom-theme="true"] section,
html[data-theme="dark"][data-custom-theme="true"] .modalPanel,
html[data-theme="dark"][data-custom-theme="true"] .exportMenuPanel,
html[data-theme="dark"][data-custom-theme="true"] .rulePopover,
html[data-theme="dark"][data-custom-theme="true"] .weaponPreviewPopover {
  background: var(--custom-surface);
  border-color: var(--custom-border);
  color: var(--custom-text);
}

html[data-theme="dark"][data-custom-theme="true"] input,
html[data-theme="dark"][data-custom-theme="true"] select,
html[data-theme="dark"][data-custom-theme="true"] textarea,
html[data-theme="dark"][data-custom-theme="true"] button,
html[data-theme="dark"][data-custom-theme="true"] .readonlyField,
html[data-theme="dark"][data-custom-theme="true"] .rosterConfiguration,
html[data-theme="dark"][data-custom-theme="true"] .unitSizeControl,
html[data-theme="dark"][data-custom-theme="true"] .discordOptionsPanel,
html[data-theme="dark"][data-custom-theme="true"] .discordPreviewPanel,
html[data-theme="dark"][data-custom-theme="true"] .unit,
html[data-theme="dark"][data-custom-theme="true"] .savedRosterCard,
html[data-theme="dark"][data-custom-theme="true"] .gameHistoryCard,
html[data-theme="dark"][data-custom-theme="true"] .attachedMember,
html[data-theme="dark"][data-custom-theme="true"] .card,
html[data-theme="dark"][data-custom-theme="true"] pre,
html[data-theme="dark"][data-custom-theme="true"] .optionGroup,
html[data-theme="dark"][data-custom-theme="true"] .previewItem,
html[data-theme="dark"][data-custom-theme="true"] .stratagemItem,
html[data-theme="dark"][data-custom-theme="true"] .chips span {
  background: var(--custom-raised);
  border-color: var(--custom-border);
  color: var(--custom-text);
}

html[data-theme="dark"][data-custom-theme="true"] .appBrand,
html[data-theme="dark"][data-custom-theme="true"] .startBrand,
html[data-theme="dark"][data-custom-theme="true"] .muted,
html[data-theme="dark"][data-custom-theme="true"] .unit small,
html[data-theme="dark"][data-custom-theme="true"] .savedRosterCard small,
html[data-theme="dark"][data-custom-theme="true"] .attachedMember small,
html[data-theme="dark"][data-custom-theme="true"] .modelRow small,
html[data-theme="dark"][data-custom-theme="true"] .optionLimits,
html[data-theme="dark"][data-custom-theme="true"] .lockedOption,
html[data-theme="dark"][data-custom-theme="true"] .assignmentRow small,
html[data-theme="dark"][data-custom-theme="true"] .assignmentSelect small,
html[data-theme="dark"][data-custom-theme="true"] .stratagemLegend,
html[data-theme="dark"][data-custom-theme="true"] .rulePopover small,
html[data-theme="dark"][data-custom-theme="true"] .savedRosterFactionGroup > h3 span {
  color: var(--custom-muted);
}

html[data-theme="dark"][data-custom-theme="true"] h1,
html[data-theme="dark"][data-custom-theme="true"] h2,
html[data-theme="dark"][data-custom-theme="true"] h3,
html[data-theme="dark"][data-custom-theme="true"] h4,
html[data-theme="dark"][data-custom-theme="true"] b,
html[data-theme="dark"][data-custom-theme="true"] strong,
html[data-theme="dark"][data-custom-theme="true"] svg {
  color: var(--custom-text);
}

html[data-theme="dark"][data-custom-theme="true"] .segmentedControl,
html[data-theme="dark"][data-custom-theme="true"] .rosterLayoutToggle,
html[data-theme="dark"][data-custom-theme="true"] .discordColorOptions,
html[data-theme="dark"][data-custom-theme="true"] .discordCustomColors,
html[data-theme="dark"][data-custom-theme="true"] table,
html[data-theme="dark"][data-custom-theme="true"] th,
html[data-theme="dark"][data-custom-theme="true"] td,
html[data-theme="dark"][data-custom-theme="true"] .previewMaster,
html[data-theme="dark"][data-custom-theme="true"] .previewDetachment,
html[data-theme="dark"][data-custom-theme="true"] .previewSection,
html[data-theme="dark"][data-custom-theme="true"] .sidebarGroup {
  border-color: var(--custom-border);
}

html[data-theme="dark"][data-custom-theme="true"] .segmentedControl button + button,
html[data-theme="dark"][data-custom-theme="true"] .rosterLayoutToggle button + button {
  border-left-color: var(--custom-border);
}

html[data-theme="dark"][data-custom-theme="true"] button:hover,
html[data-theme="dark"][data-custom-theme="true"] .unit:hover,
html[data-theme="dark"][data-custom-theme="true"] .rosterConfiguration:hover,
html[data-theme="dark"][data-custom-theme="true"] .savedRosterCard:hover,
html[data-theme="dark"][data-custom-theme="true"] .savedRosterCard:focus-visible,
html[data-theme="dark"][data-custom-theme="true"] .gameHistoryCard:hover,
html[data-theme="dark"][data-custom-theme="true"] .gameHistoryCard:focus-visible {
  background: var(--custom-hover);
  border-color: var(--custom-accent);
}

html[data-theme="dark"][data-custom-theme="true"] .segmentedControl button.active,
html[data-theme="dark"][data-custom-theme="true"] .rosterLayoutToggle button.active,
html[data-theme="dark"][data-custom-theme="true"] .layout.availableUnitsCollapsed .panelCollapseButton,
html[data-theme="dark"][data-custom-theme="true"] .unitSection > summary,
html[data-theme="dark"][data-custom-theme="true"] .sidebarGroup > summary,
html[data-theme="dark"][data-custom-theme="true"] .previewMaster > summary,
html[data-theme="dark"][data-custom-theme="true"] .categoryHeader,
html[data-theme="dark"][data-custom-theme="true"] .layout.availableUnitsCollapsed .availablePanel::after {
  background: var(--custom-accent);
  border-color: var(--custom-accent);
  color: var(--custom-accent-ink);
}

html[data-theme="dark"][data-custom-theme="true"] .unit.selected,
html[data-theme="dark"][data-custom-theme="true"] .rosterConfiguration.selected {
  border-color: var(--custom-accent);
  box-shadow: inset 4px 0 var(--custom-accent);
}

html[data-theme="dark"][data-custom-theme="true"] .panelCollapseButton,
html[data-theme="dark"][data-custom-theme="true"] .ruleToken {
  background: color-mix(in srgb, var(--custom-accent) 18%, var(--custom-surface));
  border-color: var(--custom-accent);
  color: color-mix(in srgb, var(--custom-accent) 55%, var(--custom-text));
}

@media (max-width: 520px) {
  .customThemePreview { grid-template-columns: 1fr 1fr; }
  .customThemeGrid { grid-template-columns: 1fr; }
}

.playPrimaryScorePanel{width:min(94vw,640px)}.playPrimaryScorePanel>header{grid-template-columns:1fr}.playPrimaryScoreHint{max-width:544px}.playPrimaryCardScorer{width:min(100%,544px)}.playPrimaryFlip{position:absolute!important;z-index:4;top:auto!important;right:0!important;bottom:0;width:18%;height:7%;min-height:44px!important;padding:0!important;border:0!important;border-radius:18px 0 10px 0!important;background:transparent!important;color:transparent!important;font-size:0!important;box-shadow:none!important}.playPrimaryFlip:hover,.playPrimaryFlip:focus-visible{outline:4px solid #f4bc39;outline-offset:-5px;background:#f4bc3922!important}.playPrimaryCardScorer.showingBack .playPrimaryScoreHotspot{display:none}.playPrimaryScoreHotspot.pending{outline:4px solid #f4bc39;outline-offset:2px}.playPrimaryScoreHotspot.pending .playPrimaryScoreCount{background:#c78818}.playPrimaryPending{display:grid;gap:3px;max-width:544px;margin:10px auto;padding:11px 13px;border-radius:10px;background:#202c35}.playPrimaryPending b{color:#f2c45d}.playPrimaryPending span{color:#aeb8be;font-size:12px}.playPrimaryScoreHistory,.playPrimaryScorePanel>label,.playPrimaryScorePanel>.playModalActions{max-width:544px}.playPrimaryConfirmActions{position:sticky;z-index:5;bottom:-20px;display:grid;grid-template-columns:1fr 1.4fr;margin-bottom:-20px!important;padding:14px 0 20px;background:linear-gradient(180deg,#131c2300,#131c23 18%)}@media(max-width:520px){.playPrimaryCardScorer{width:100%}.playPrimaryConfirmActions{bottom:-12px;margin-bottom:-12px!important;padding-bottom:12px}}
.playUnitRules{display:grid;gap:8px}.playUnitRule{border:1px solid #35434e;border-radius:10px;background:#19242c;overflow:hidden}.playUnitRule>summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px;cursor:pointer}.playUnitRule>summary span{display:grid;gap:2px}.playUnitRule>summary small{color:#94a0a8}.playUnitRule>summary strong{max-width:150px;color:#e5aa35;font-size:10px;text-align:right}.playUnitRuleBody{display:grid;gap:10px;padding:0 12px 12px;border-top:1px solid #303d46}.playUnitRuleBody p{margin:12px 0 0;color:#c8ced2;line-height:1.5}.playUnitRule.exhausted{border-color:#4d6f60;background:#182720}.playUnitRule.exhausted>summary strong{color:#7fd2a4}.playAbilityActions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.playAbilityActions button:disabled{background:#315040!important;color:#a8d7bd!important;opacity:1}.playAbilityToast{border-color:#67b98d;background:#173627}.playAbilityToast>span{background:#3f9e6b}.playAbilityToast strong{color:#8be5b5}.playStratagemButtons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.playDiscountStratagem{border-color:#d8a43e!important;background:#3a2d17!important;color:#f2c863!important}.playDiscountStratagem:disabled{border-color:#35424b!important;background:#303b43!important;color:#9ba5ab!important}.playStratagemUsedFlag{display:grid;place-items:center;min-height:52px;border:1px solid #5ca67c;border-radius:10px;background:#244b38;color:#a7efc5;font-size:15px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}@media(max-width:520px){.playUnitRule>summary{grid-template-columns:1fr}.playUnitRule>summary strong{text-align:left}.playStratagemButtons{grid-template-columns:1fr}}
.playArmyUnit{min-height:108px!important;grid-template-columns:minmax(170px,1fr) minmax(300px,1.45fr) auto!important;gap:16px;padding:13px 14px!important}.playArmyIdentity{display:grid!important;gap:3px!important;min-width:0}.playArmyIdentity>small,.playArmyPoints>small{color:#e5aa35!important;font-size:9px!important;letter-spacing:.1em}.playArmyIdentity>b{overflow:hidden;text-overflow:ellipsis;font-size:17px}.playArmyIdentity>em{color:#9aa5ad;font-size:12px;font-style:normal}.playArmyReference{display:grid!important;gap:7px!important;min-width:0}.playArmyStatProfile{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:8px!important}.playArmyStatProfile>i{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aab4ba;font-size:10px;font-style:normal}.playArmyStats{display:grid!important;grid-template-columns:repeat(4,minmax(42px,1fr));gap:0!important;overflow:hidden;border:1px solid #3a4852;border-radius:8px;background:#141d24}.playArmyStats>span{display:grid!important;grid-template-columns:auto auto;justify-content:center;align-items:baseline;gap:5px!important;padding:7px 6px;border-left:1px solid #303d46}.playArmyStats>span:first-child{border-left:0}.playArmyStats small{color:#93a0a8!important;font-size:9px!important;font-weight:800;letter-spacing:.08em}.playArmyStats b{color:#f5f1e8;font-size:15px;white-space:nowrap}.playArmyWounds{display:flex!important;align-items:baseline;gap:7px!important;min-width:0;padding:0 3px}.playArmyWounds small{flex:0 0 auto;color:#e5aa35!important;font-size:10px!important;font-weight:900}.playArmyWounds b{overflow:hidden;text-overflow:ellipsis;color:#c9d0d4;font-size:12px;white-space:nowrap}.playArmyPoints{font-size:24px!important;text-align:right}.playArmyPoints small{display:block}@media(max-width:700px){.playArmyUnit{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important}.playArmyIdentity{grid-column:1}.playArmyPoints{grid-column:2;grid-row:1}.playArmyReference{grid-column:1/-1}.playArmyStatProfile{grid-template-columns:1fr}.playArmyStatProfile>i{max-width:none}.playArmyWounds b{white-space:normal}}
.playModeModal,.playSetupPanel,.playPickerPanel,.playScorePanel,.playFinalPanel,.playUnitPanel,.playImagePanel{box-sizing:border-box}.playSetupPanel,.playPickerPanel,.playScorePanel,.playFinalPanel,.playUnitPanel,.playImagePanel{max-width:100%}.playSetupPanel{padding-bottom:max(34px,calc(env(safe-area-inset-bottom,0px) + 24px))}.playPrimaryScorePanel{max-width:min(calc(100vw - 24px),640px);overflow-x:hidden;padding-bottom:max(26px,calc(env(safe-area-inset-bottom,0px) + 18px))}.playPrimaryCardScorer,.playPrimaryCardBack,.playPrimaryCardScorer>img,.playPrimaryCardBack>img{box-sizing:border-box;max-width:100%}.playPrimaryConfirmActions{bottom:0!important;margin-bottom:0!important;padding-bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 12px))!important}.playFinalActions{grid-template-columns:1fr 1fr!important}.playFinalActions [data-return-lists]{grid-column:auto!important}@media(max-width:520px){.playModeModal{padding:12px}.playPrimaryScorePanel{width:100%;max-width:100%}.playSetupPanel{padding-bottom:max(40px,calc(env(safe-area-inset-bottom,0px) + 28px))}.playPrimaryConfirmActions{gap:10px}.playFinalActions{grid-template-columns:1fr 1fr!important}.playFinalActions [data-return-lists]{grid-column:auto!important}}
.playPrimaryConfirmActions{position:static!important;bottom:auto!important;margin:14px auto 0!important;padding:0 0 max(18px,env(safe-area-inset-bottom,0px))!important;background:none!important}.playFinalActions{grid-template-columns:1fr!important}.playFinalActions [data-return-lists]{grid-column:1!important}@media(max-width:520px){.playPrimaryConfirmActions{position:static!important;margin:14px auto 0!important;padding-bottom:max(20px,env(safe-area-inset-bottom,0px))!important}.playFinalActions{grid-template-columns:1fr!important}}
.playArmyUnit{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:0!important;overflow:hidden;border:1px solid #394650;border-radius:10px;background:#202c35}.playArmyUnitOpen{width:100%;min-height:108px!important;display:grid!important;grid-template-columns:minmax(170px,1fr) minmax(340px,1.55fr) auto!important;align-items:center;gap:16px;padding:13px 14px!important;border:0!important;border-radius:0!important;background:transparent!important;text-align:left}.playArmyStats{grid-template-columns:repeat(5,minmax(42px,1fr))!important}.playArmyQuickWounds{display:grid;grid-template-columns:44px 70px 44px;justify-content:end;gap:6px;padding:9px 14px;border-top:1px solid #34414b;background:#18242c}.playArmyQuickWounds button{min-height:42px!important}.playArmyQuickWounds .playWoundValue{font-size:16px}.playArmyQuickWounds small{font-size:8px}.playUnitStatlines{overflow-x:auto}.playUnitStatlineTable{min-width:600px;overflow:hidden;border:1px solid #35434e;border-radius:10px;background:#18242c}.playUnitStatlineHeader,.playUnitStatlineRow{display:grid;grid-template-columns:minmax(170px,1fr) repeat(7,minmax(48px,64px));align-items:center}.playUnitStatlineHeader{background:#24313a;color:#9da8af;font-size:10px;font-weight:800;letter-spacing:.08em}.playUnitStatlineHeader span,.playUnitStatlineRow>span{padding:9px 6px;border-left:1px solid #35434e;text-align:center}.playUnitStatlineHeader span:first-child{border-left:0;text-align:left}.playUnitStatlineRow{border-top:1px solid #35434e}.playUnitStatlineRow>b{padding:10px 9px;font-size:12px}.playUnitStatlineRow>span{color:#f5f1e8;font-size:14px;font-weight:700}.playGalleryHint{margin:0;padding:12px 16px;color:#aeb8be;font-size:12px;text-align:center}.playFinalActions [data-save-gallery]{border-color:#e5aa35!important;color:#f1c35b!important}@media(max-width:700px){.playArmyUnitOpen{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important}.playArmyUnitOpen .playArmyIdentity{grid-column:1}.playArmyUnitOpen .playArmyPoints{grid-column:2;grid-row:1}.playArmyUnitOpen .playArmyReference{grid-column:1/-1}.playArmyQuickWounds{justify-content:center}.playArmyStats{grid-template-columns:repeat(5,minmax(38px,1fr))!important}}
.playArmyUnit.halfStrength{border-color:#d8972f;background:#302516;box-shadow:0 0 0 1px #d8972f55,0 0 22px #d8972f18}.playArmyUnit.halfStrength .playArmyUnitOpen{background:linear-gradient(90deg,#4a3318aa,#202c3500 52%)!important}.playArmyUnit.halfStrength .playArmyQuickWounds{border-top-color:#805d25;background:#2d251a}.playStrengthFlag{width:max-content;margin-top:3px;padding:3px 6px;border:1px solid #d8972f;border-radius:999px;background:#4b3419;color:#ffd37a;font-size:8px;font-weight:900;letter-spacing:.08em}.playBattleShockReminder{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;margin:10px 0 14px;padding:10px 13px;border:1px solid #c9882a;border-left:4px solid #e5aa35;border-radius:11px;background:#302515;color:#f5f1e8}.playBattleShockReminder>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#d8972f;color:#1b1710;font-size:21px;font-weight:1000}.playBattleShockReminder>div{display:grid;gap:2px}.playBattleShockReminder small{color:#efb84f;font-size:9px;font-weight:900;letter-spacing:.14em}.playBattleShockReminder b{font-size:13px}.playBattleShockReminder p{margin:0;color:#cfc3ad;font-size:11px;line-height:1.35}
.playArmyStatusBar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid #34414b;background:#18242c}.playArmyStatusBar .playArmyQuickWounds{padding:0;border:0;background:transparent}.playBattleShockToggle{display:flex!important;align-items:center;gap:6px;min-height:36px!important;padding:0 11px!important;border-color:#69537e!important;background:#261f30!important;color:#cdb6e3!important;font-size:10px!important;letter-spacing:.04em}.playBattleShockToggle>span{font-size:17px}.playBattleShockToggle.active{border-color:#c16cff!important;background:#54266f!important;color:#fff!important;box-shadow:0 0 16px #b64cff66}.playBattleShockFlag{display:flex;align-items:center;gap:4px;width:max-content;margin-top:3px;padding:3px 7px;border:1px solid #bb62ee;border-radius:999px;background:#4a225e;color:#f0c9ff;font-size:8px;font-weight:900;letter-spacing:.09em}.playBattleShockFlag i{color:#df8dff;font-size:13px;font-style:normal;line-height:.7}.playArmyUnit.battleShocked{position:relative;border-color:#b65bea;background:#25192d;box-shadow:0 0 0 1px #b65bea66,0 0 25px #a43de733}.playArmyUnit.battleShocked::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.28;background:linear-gradient(117deg,transparent 0 28%,#dc91ff 28.2% 28.45%,transparent 28.7% 100%),linear-gradient(63deg,transparent 0 62%,#a84bd8 62.2% 62.45%,transparent 62.7% 100%),linear-gradient(146deg,transparent 0 76%,#e0a2ff 76.2% 76.4%,transparent 76.65% 100%);background-size:210px 120px,260px 170px,320px 190px}.playArmyUnit.battleShocked .playArmyUnitOpen{position:relative;z-index:2;background:linear-gradient(90deg,#4a205c99,#202c3500 60%)!important}.playArmyUnit.battleShocked .playArmyStatusBar{border-top-color:#654075;background:#241b2d}.playArmyUnit.halfStrength.battleShocked{box-shadow:inset 4px 0 #dc9b31,0 0 0 1px #b65bea66,0 0 25px #a43de733}.playUnitBattleShockNotice{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;margin:14px 16px 0;padding:10px 12px;border:1px solid #a855d4;border-radius:10px;background:#321d3e}.playUnitBattleShockNotice>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#71378c;color:#f3d6ff;font-size:22px}.playUnitBattleShockNotice>div{display:grid;gap:2px}.playUnitBattleShockNotice b{color:#edc5ff;font-size:12px;letter-spacing:.12em}.playUnitBattleShockNotice small{color:#c9b8d2}.playStratagem.blocked{border-color:#74478b;background:#221a29}.playStratagemBlockedFlag{display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;border:1px solid #a958d0;border-radius:10px;background:#482358;color:#efceff;font-size:13px;font-weight:900;letter-spacing:.03em}.playStratagemBlockedFlag>span{font-size:20px}@media(max-width:520px){.playArmyStatusBar{align-items:stretch;flex-direction:column}.playBattleShockToggle{justify-content:center}.playArmyStatusBar .playArmyQuickWounds{align-self:center}}
.playBattleShockToggle:not(.active){width:38px;padding:0!important;justify-content:center}.playBattleShockToggle.active b{font-size:9px;letter-spacing:.1em}.playArmyUnit.halfStrength .playArmyStatusBar .playArmyQuickWounds,.playArmyUnit.battleShocked .playArmyStatusBar .playArmyQuickWounds{background:transparent}

/* Keep secondary hands visually distinct regardless of the active turn or round. */
.playModeContent.playOpponentHand{background:radial-gradient(circle at 50% -20%,#492d32 0,#1a1014 42%)}
.playOpponentHand .playPlayerTabs{background:#27191d}
.playOpponentHand .playPlayerTabs button.active{background:#67343b!important}
.playOpponentHand .playMissionModeBadge{background:#2b1c20;border-left-color:#b95860}
.playOpponentHand .playDeckControls>div button,.playOpponentHand .playEmptyHand,.playOpponentHand .playMissionCard{border-color:#654047;background-color:#281a1e}

/* The Android wrapper already applies system-bar insets around the WebView. */
html[data-native-shell="android"] .mobileRosterHeader{padding-top:8px}
html[data-native-shell="android"] .playModeHeader{padding-top:12px}
.playModeHeader{grid-template-columns:auto minmax(0,1fr) auto auto}
.playModeUndoButton{color:#f3cf7c!important;padding:0 10px}.playModeUndoButton:disabled{color:#77838b!important;opacity:.55}

.playWeaponGroup{display:grid;gap:8px;padding:11px;border:1px solid #35434e;border-left-width:4px;border-radius:11px;background:#172129}
.playWeaponGroup>h4{margin:0;padding-bottom:9px;border-bottom:1px solid #35434e;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.playWeaponGroup>p{margin:2px 0;color:#919da5}
.playWeaponGroup.ranged{border-left-color:#13a1b6;background:#12252c}
.playWeaponGroup.ranged>h4{color:#7dd9e6}
.playWeaponGroup.melee{border-left-color:#d39a31;background:#282115}
.playWeaponGroup.melee>h4{color:#f1c35b}

@media(max-width:520px){
  .playScoreboard{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:2px;padding:14px 6px;overflow:hidden}
  .playPlayerScore{min-width:0}
  .playScoreDivider{padding:3px}
  .playCpControl{box-sizing:border-box;grid-template-columns:36px minmax(0,1fr) 36px;gap:4px;width:100%}
  .playCpControl button{box-sizing:border-box;min-width:0;width:36px;padding:0}
  .playCpControl b{box-sizing:border-box;min-width:0;width:100%;padding:8px 3px;font-size:13px}
}