:root {
  --mobile-fixed-control-clearance: calc(70px + env(safe-area-inset-bottom));
}

/* v0.29: saved formation and expedition flow */
.expedition-setup {
  margin: 0 0 14px;
  border: 1px solid rgba(190, 161, 105, .25);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(20, 20, 27, .96), rgba(10, 12, 17, .96));
  overflow: hidden;
}
.expedition-setup-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 0;
}
.expedition-setup-heading p,
.expedition-setup-heading h2 {
  margin: 0;
}
.expedition-setup-heading p {
  color: #8b7b5d;
  font: 700 9px Arial, sans-serif;
  letter-spacing: .15em;
}
.expedition-setup-heading h2 {
  margin-top: 3px;
  color: var(--gold-bright);
  font-size: 16px;
}
.expedition-advanced-settings {
  min-width: 0;
  color: var(--muted);
}
.expedition-advanced-settings summary {
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(190, 161, 105, .25);
  border-radius: 7px;
  cursor: pointer;
}
.expedition-advanced-settings .expedition-destination {
  margin-top: 8px;
}
.main-formation-summary {
  padding: 0 14px 12px;
}
.main-formation-summary h3 {
  margin: 0 0 8px;
  color: #c8b37b;
  font-size: 12px;
}
.main-formation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.main-formation-slot {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #30333b;
  border-radius: 7px;
  background: rgba(7, 9, 13, .62);
}
.main-formation-slot > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.main-formation-slot span,
.main-formation-slot small {
  color: #8d8f97;
  font-size: 10px;
}
.main-formation-slot strong {
  color: #e1d8c4;
  font-size: 12px;
}
.main-formation-slot em {
  color: #e0b46b;
  font-size: 10px;
  font-style: normal;
}
.main-formation-slot.has-warning {
  border-style: dashed;
  border-color: #a8784f;
}
.expedition-preflight-message {
  min-height: 18px;
  padding: 0 14px 12px;
  color: #9fc18e;
  font-size: 11px;
}
.expedition-preflight-message.warning { color: #d9b66c; }
.expedition-preflight-message.error { color: #e39b91; }

.formation-current-unit,
.formation-current-captain {
  display: grid;
  gap: 4px;
  margin: 10px;
  padding: 12px;
  border: 1px solid rgba(190, 161, 105, .22);
  border-radius: 8px;
  background: rgba(185, 150, 85, .06);
}
.formation-current-captain {
  border-color: rgba(139, 105, 166, .30);
  background: rgba(117, 91, 148, .08);
}
.formation-current-unit > span,
.formation-current-captain > span:first-child {
  color: #8a806e;
  font-size: 9px;
  letter-spacing: .12em;
}
.formation-current-unit strong,
.formation-current-captain strong {
  color: #e5d7b8;
  font-size: 14px;
}
.formation-current-unit small,
.formation-current-captain small {
  color: #8d8f97;
  font-size: 10px;
  line-height: 1.45;
}
.formation-current-unit.empty,
.formation-current-captain.empty {
  border-style: dashed;
}
.captain-placement-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid #4a4d55;
  border-radius: 999px;
  color: #bfc1c8;
  font-size: 9px;
  overflow-wrap: anywhere;
}
.captain-placement-badge.sortie { border-color: #8c7446; color: #e0c17c; }
.captain-placement-badge.base { border-color: #5e5574; color: #c5aedc; }
.captain-placement-badge.recovery { border-color: #735252; color: #e0a5a1; }
.captain-placement-badge.pending { border-color: #79714f; color: #d9cd8a; }
.formation-change-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px;
}
.formation-change-actions button { min-height: 44px; }
.formation-choice-panel {
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid #30333b;
  border-radius: 8px;
  background: rgba(6, 8, 12, .7);
}
.formation-choice-panel h3 {
  margin: 0 0 8px;
  color: #b7a476;
  font-size: 11px;
}
.formation-captain-candidates {
  display: grid;
  gap: 7px;
}
.formation-captain-candidate {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid #292d35;
  color: #bbb8b0;
  background: #101217;
  text-align: left;
  cursor: pointer;
}
.formation-captain-candidate.selected {
  border-color: var(--gold);
  background: rgba(185, 150, 85, .10);
}
.formation-captain-candidate span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.formation-captain-candidate small {
  color: #85878e;
  font-size: 9px;
}
.formation-detail {
  margin: 10px;
  border-top: 1px solid #2c3038;
}
.formation-detail summary {
  min-height: 44px;
  padding: 13px 2px;
  box-sizing: border-box;
  color: #bca776;
  cursor: pointer;
}
.formation-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 8px;
}
.formation-detail-grid span {
  color: #90929a;
  font-size: 10px;
}
.formation-detail p {
  color: #90929a;
  font-size: 10px;
  line-height: 1.6;
}
.formation-candidate:disabled,
.formation-captain-candidate:disabled {
  cursor: default;
  opacity: 1;
}

.battle-control-bar {
  position: fixed;
  z-index: 120;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(211, 179, 109, .48);
  border-radius: 10px;
  background: rgba(9, 10, 14, .96);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
}
.battle-control-menu {
  display: flex;
  gap: 7px;
}
.battle-control-bar button { min-height: 44px; }
.battle-action-dialog {
  width: min(440px, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #887044;
  border-radius: 10px;
  color: var(--text);
  background: #11131a;
}
.battle-action-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.battle-action-dialog form { padding: 20px; }
.battle-action-dialog h2 { margin: 0 0 10px; color: var(--gold-bright); }
.battle-action-dialog p { color: #b5b3b0; line-height: 1.65; }
.battle-action-dialog .dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.battle-action-dialog .dialog-actions button { min-height: 44px; }

@media (max-width: 720px) {
  .expedition-setup-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .main-formation-grid { grid-template-columns: 1fr; }
  .main-formation-slot {
    grid-template-columns: minmax(78px, .7fr) minmax(0, 1.3fr);
    align-items: center;
  }
  .main-formation-slot em { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .formation-slots { grid-template-columns: 1fr; }
  .formation-slot { min-width: 0; }
  .formation-commander-summary {
    grid-template-columns: 1fr;
  }
  .formation-commander-summary small { text-align: left; }
  .formation-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-control-bar {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    flex-direction: column;
  }
  .battle-control-menu {
    display: grid;
    grid-template-columns: 1fr;
  }
  .battle-control-bar button { width: 100%; }
}

/* 2026-08 battle presentation: one clear source of visual hierarchy. */
.battle-status-icons {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  gap: 4px;
}

.battle-status-icon {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid var(--ui-border-subtle);
  color: var(--ui-text-subdued);
  background: var(--ui-surface-raised);
}

.battle-status-icon svg { width: 13px; height: 13px; }
.battle-status-icon.is-shield { color: #63b7c8; }
.battle-status-icon.is-shield-broken { color: #c66a66; }
.battle-status-icon.is-gestation { color: var(--ui-context-gestation); }
.battle-status-icon.is-balance,
.battle-status-icon.is-posture { color: #d0a95d; }
.battle-status-icon.is-danger,
.battle-status-icon.is-defeated { color: var(--ui-text-critical); }

.hp-row,
.shield-row { --battle-vital-fill: #5da678; }
.hp-row[data-level="warning"] { --battle-vital-fill: #c99a43; }
.hp-row[data-level="critical"],
.hp-row[data-level="empty"] { --battle-vital-fill: #b65959; }
.shield-row { --battle-vital-fill: #56aebe; }
.shield-row[data-level="empty"] { --battle-vital-fill: #5e6770; }
.hp-row .hp-fill,
.shield-row .shield-fill { background: var(--battle-vital-fill) !important; }
.hp-row .hp-track,
.shield-row .shield-track { min-height: 8px; background: #24282d; }

.battle-selector-vital i { height: 8px !important; background: #24282d; }
.battle-selector-hp[data-level="stable"] em { background: #5da678 !important; }
.battle-selector-hp[data-level="warning"] em { background: #c99a43 !important; }
.battle-selector-hp[data-level="critical"] em,
.battle-selector-hp[data-level="empty"] em { background: #b65959 !important; }
.battle-selector-shield:not(.is-empty) em { background: #56aebe !important; }
.battle-selector-shield.is-empty em { background: #5e6770 !important; }

.battle-focus-vital-track {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 5px;
  overflow: hidden;
  background: #24282d;
}
.battle-focus-vital-track > i {
  display: block;
  width: 0;
  height: 100%;
  background: #5da678;
  transition: width .18s linear;
}
.battle-focus-vital-track[data-level="warning"] > i { background: #c99a43; }
.battle-focus-vital-track[data-level="critical"] > i,
.battle-focus-vital-track[data-level="empty"] > i { background: #b65959; }
.battle-focus-vital-track.is-shield > i { background: #56aebe; }
.battle-focus-vital-track.is-shield[data-level="empty"] > i { background: #5e6770; }

.battle-focus-gestation {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border-subtle);
}
.battle-focus-gestation h3,
.battle-information-heading {
  margin: 0 0 6px;
  color: var(--ui-text-primary);
  font: 700 var(--font-size-meta, 13px)/1.35 var(--font-body);
}
.battle-focus-gestation p,
.battle-focus-gestation-list,
.battle-body-gestation-labels,
.battle-body-narrative { margin: 0; }
.battle-focus-gestation-list,
.battle-body-gestation-labels { padding-left: 1.2em; }
.battle-focus-gestation-list li,
.battle-body-gestation-labels li { margin: 3px 0; font-size: 12px; }

.battle-information {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.battle-information-item {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border-subtle);
}
.battle-body-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.battle-body-image-card { min-width: 0; margin: 0; }
.battle-body-image-card strong {
  display: block;
  margin-top: 3px;
  color: var(--ui-text-subdued);
  font-size: 12px;
  text-align: center;
}
.battle-body-image-card .body-status-card-image { min-height: 74px; }
.battle-body-narrative { margin-top: 9px; line-height: 1.6; }

@media (max-width: 600px) {
  .battle-body-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-body-image-card .body-status-card-image { min-height: 100px; }
  .battle-status-icons { margin-top: 3px; }
}

/* Explicit longhand masks prevent WebKit from dropping a shorthand after a
   cached stylesheet transition.  Labels remain visible if a mask still fails. */
.ui-icon {
  -webkit-mask-image: var(--ui-icon-source);
  mask-image: var(--ui-icon-source);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

/* 2026-08-04: mobile battle information architecture. */
.battle-information {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 8px;
}

.battle-information-item {
  min-width: 0;
  border-left: 3px solid var(--ui-border-strong);
  background: var(--ui-bg-panel);
}

.battle-information-toggle {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  color: var(--ui-text-primary);
  background: transparent;
  font: 700 14px/1.4 var(--font-body);
  text-align: left;
}

.battle-information-toggle[aria-expanded="true"] {
  color: var(--ui-text-accent);
  background: var(--ui-selection-bg);
}

.battle-information-toggle:focus-visible {
  outline: 2px solid var(--ui-focus-ring);
  outline-offset: -2px;
}

.battle-information-panel {
  padding: 12px;
  border-top: 1px solid var(--ui-border-subtle);
}

.battle-information-panel[hidden] { display: none !important; }
.battle-reaction-text,
.battle-body-normal-state,
.battle-body-status-text {
  margin: 0;
  color: var(--ui-text-secondary);
  font: 400 14px/1.65 var(--font-body);
}

.battle-body-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.battle-body-images .body-status-visual-card {
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(120px, 1fr) auto auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--ui-border-subtle);
  background: var(--ui-surface-soft);
}

.battle-body-images .body-status-card-image {
  width: 100%;
  min-height: 120px;
}

.battle-body-images .body-status-card-state {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

.battle-body-images .body-status-card-state span { display: none; }
.battle-body-status-text { font-size: 12px; }
.battle-fetal-status-card .body-status-card-image {
  display: block;
  overflow: hidden;
}
.battle-fetal-status-card img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  object-position:
    var(--gestation-thumbnail-x, 50%)
    var(--gestation-thumbnail-y, 50%);
  transform: scale(var(--gestation-thumbnail-scale, 1));
}

.unit-battle-image { display: none; }

.battle-control-status {
  align-self: center;
  color: var(--ui-text-primary);
  font: 700 14px/1.3 var(--font-body);
  text-align: center;
}

@media (max-width: 600px) {
  .battlefield {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .battle-overview,
  .battle-captain-focus,
  .battle-information {
    grid-column: 1;
  }

  .battle-overview {
    display: grid;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .battle-frontline {
    display: grid;
    padding: 0;
    grid-template-areas:
      "enemies"
      "allies"
      "caption" !important;
    gap: 10px;
  }

  .battle-frontline > .enemy-army { grid-area: enemies; }
  .battle-frontline > .player-army { grid-area: allies; }
  .battle-frontline > .battle-caption { grid-area: caption; }
  .battle-frontline > .versus { display: none; }

  .battle-frontline .army-heading {
    min-height: 44px;
    padding: 8px 10px;
  }

  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }

  .battle-captain-select {
    display: grid !important;
    width: 100%;
    min-width: 0;
    min-height: 148px !important;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr) 22px !important;
    grid-template-rows: 100px auto !important;
    gap: 4px;
  }

  .battle-captain-select-image {
    width: 100% !important;
    height: 100px !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    object-fit: cover;
  }

  .battle-captain-select-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .battle-captain-select-vitals {
    display: grid;
    min-width: 0;
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px;
  }

  .battle-selector-vital {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 4px;
  }

  .battle-selector-vital b,
  .battle-selector-vital b svg {
    display: block;
    width: 14px;
    height: 14px;
  }

  .battle-selector-vital i {
    height: 6px;
    border: 1px solid var(--ui-border-subtle);
    background: #24282d;
  }

  .battle-selector-hp em { background: var(--ui-health); }
  .battle-selector-hp[data-level="warning"] em { background: var(--ui-warning); }
  .battle-selector-hp[data-level="critical"] em { background: var(--ui-critical); }
  .battle-selector-shield em { background: var(--ui-shield); }

  .battle-captain-manpower-icon {
    width: 22px;
    height: 30px;
    grid-column: 2;
    grid-row: 2;
  }

  .battle-captain-selection-dot {
    top: 5px;
    right: 5px;
  }

  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .enemy-army .unit-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 7px;
    padding: 7px;
  }

  .enemy-army .unit-card > .unit-topline,
  .enemy-army .unit-card > .unit-name,
  .enemy-army .unit-card > .hp-row,
  .enemy-army .unit-card > .shield-row {
    grid-column: 2;
  }

  .enemy-army .unit-battle-image:not([hidden]) {
    display: block;
    width: 46px;
    height: 62px;
    grid-column: 1;
    grid-row: 1 / span 3;
    object-fit: cover;
    border: 1px solid var(--ui-border-subtle);
  }

  .enemy-army .unit-card .unit-name {
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  .enemy-army .unit-role,
  .enemy-army .unit-state,
  .enemy-army .hp-label,
  .enemy-army .shield-label,
  .enemy-army .hp-value,
  .enemy-army .shield-value {
    font-size: 12px;
  }

  .enemy-army .unit-card.defeated {
    min-height: 0;
    opacity: .48;
    filter: saturate(.35);
  }

  .enemy-unit-summary {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    text-align: left;
  }

  .battle-engagement-summary {
    margin: 8px 0 0;
  }

  .battle-captain-focus {
    border-color: var(--ui-border-subtle);
  }

  .battle-captain-focus > header {
    padding: 10px 12px;
  }

  .battle-captain-focus-body {
    grid-template-columns: minmax(118px, 44%) minmax(0, 1fr);
  }

  .battle-captain-focus-portrait { min-height: 230px; }
  .battle-captain-focus-condition,
  .battle-captain-focus-comment,
  .battle-captain-focus-state { display: none; }

  .battle-information { gap: 6px; }
  .battle-information-panel { padding: 10px; }
  .battle-body-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .battle-body-images .body-status-visual-card {
    grid-template-rows: minmax(112px, 1fr) auto auto;
  }
  .battle-body-images .body-status-card-image,
  .battle-fetal-status-card img { min-height: 112px; }

  .battle-control-bar {
    box-sizing: border-box !important;
    right: 0 !important;
    bottom: 0;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 8px max(8px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    flex-direction: column;
    gap: 8px;
  }

  body.expedition-paused .battle-control-bar > #battle-control-pause {
    display: inline-flex;
  }

  .battle-control-status { display: block; }
  .battle-control-status[hidden] { display: none !important; }

  .battle-control-pause {
    width: 100%;
    min-height: 54px;
    flex: 0 0 auto;
  }

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

  .battle-control-menu button {
    min-width: 0;
    min-height: 46px;
    padding: 6px 3px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
  }
}

@media (max-width: 359px) {
  .battlefield { padding-inline: 5px; }
  .battle-captain-select { min-height: 138px; grid-template-rows: 90px auto; }
  .battle-captain-select-image { height: 90px; }
  .enemy-army .unit-card { grid-template-columns: 40px minmax(0, 1fr); }
  .enemy-army .unit-battle-image:not([hidden]) { width: 40px; height: 56px; }
  .battle-control-menu button { font-size: 12px; }
}

/* 2026-08-04: onboarding and battle-control final quality pass. */
.captain-speech-bubble {
  display: none !important;
}

.battle-frontline {
  grid-template-areas:
    "allies versus enemies"
    "caption caption caption";
}

.battle-frontline > .player-army { grid-area: allies; }
.battle-frontline > .versus { grid-area: versus; }
.battle-frontline > .enemy-army { grid-area: enemies; }

.battle-caption {
  grid-area: caption;
  display: grid;
  min-width: 0;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border-left: 3px solid var(--ui-selection-marker);
  color: var(--ui-text-primary);
  background: var(--ui-bg-panel);
  pointer-events: none;
  opacity: 0;
}

.battle-caption[hidden] { display: none !important; }
.battle-caption strong { color: var(--ui-text-accent); font-size: 13px; }
.battle-caption p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.battle-caption.caption-important { border-left-color: var(--ui-critical); }
.battle-caption.caption-showing { animation: battle-caption-in .18s ease-out forwards; }
.battle-caption.caption-hiding { animation: battle-caption-out .18s ease-in forwards; }

@keyframes battle-caption-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes battle-caption-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.battle-captain-select {
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
}

.battle-captain-select-image { grid-row: 1 / span 2; }
.battle-captain-select-copy { grid-column: 2; grid-row: 1; }
.battle-captain-select-manpower { display: none !important; }

.battle-captain-select-vitals {
  display: grid;
  min-width: 0;
  grid-column: 2 / span 2;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.battle-selector-vital {
  display: grid;
  min-width: 0;
  grid-template-columns: max-content minmax(18px, 1fr) max-content;
  align-items: center;
  gap: 3px;
  color: var(--ui-text-secondary);
  font: 700 11px/1 var(--font-body);
}

.battle-selector-vital i {
  display: block;
  height: 4px;
  overflow: hidden;
  background: var(--ui-border-subtle);
}

.battle-selector-vital em {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ui-health);
}

.battle-selector-shield em { background: var(--ui-shield); }
.battle-selector-vital.is-empty i { opacity: .45; }
.battle-selector-vital small { font-size: 11px; font-variant-numeric: tabular-nums; }

.battle-captain-manpower-icon {
  display: grid;
  width: 24px;
  height: 28px;
  grid-column: 3;
  grid-row: 1;
  place-items: center;
  color: var(--ui-success, #79a889);
}
.battle-captain-manpower-icon svg { width: 20px; height: 20px; }
.battle-captain-manpower-icon .battle-manpower-warning-mark { display: none; }
.battle-captain-manpower-icon.is-low { color: var(--ui-warning, #d0a85e); }
.battle-captain-manpower-icon.is-danger,
.battle-captain-manpower-icon.is-unavailable { color: var(--ui-critical, #c76b6b); }
.battle-captain-manpower-icon.is-danger .battle-manpower-warning-mark,
.battle-captain-manpower-icon.is-unavailable .battle-manpower-warning-mark {
  display: block;
}
.battle-captain-manpower-icon.is-unavailable svg { opacity: .55; }

.expedition-toggle-icon,
.battle-control-toggle-icon {
  display: block;
  width: 22px;
  min-width: 22px;
  height: 22px;
}
.expedition-toggle-icon .toggle-pause-path,
.battle-control-pause.ui-icon-play .toggle-pause-path,
.battle-control-pause.ui-icon-pause .toggle-play-path { display: none; }
.expedition-toggle-icon.ui-icon-pause .toggle-play-path { display: none; }
.expedition-toggle-icon.ui-icon-pause .toggle-pause-path { display: block; }
.battle-control-pause.ui-icon-play .toggle-play-path,
.battle-control-pause.ui-icon-pause .toggle-pause-path { display: block; }

.battle-control-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.onboarding-batch-gestation-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.onboarding-captain-carousel-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.onboarding-captain-carousel-controls strong {
  font-variant-numeric: tabular-nums;
}
.onboarding-captain-carousel-controls button { min-height: 44px; }

.onboarding-batch-gestation-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: start;
  gap: 3px 9px;
}
.onboarding-batch-gestation-row img {
  width: 52px;
  height: 72px;
  grid-row: 1 / span 4;
  object-fit: cover;
  object-position: center top;
}
.onboarding-batch-gestation-row strong,
.onboarding-batch-gestation-row span,
.onboarding-batch-gestation-row small { min-width: 0; }

.event-notification-organize {
  min-width: 132px;
  border: 1px solid var(--ui-border-subtle);
  background: var(--ui-bg-panel);
}
.event-notification-organize > summary {
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ui-text-primary);
  cursor: pointer;
}
.event-notification-organize .event-notification-actions {
  display: grid;
  gap: 6px;
  padding: 0 8px 8px;
}

#onboarding-title[tabindex="-1"]:focus,
#subscreen-title[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

@media (max-width: 600px) {
  .battle-frontline {
    grid-template-areas:
      "allies"
      "caption"
      "versus"
      "enemies";
  }
  .battle-caption {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    min-height: 52px;
    padding: 6px 8px;
  }
  .battle-caption strong { font-size: 12px; }
  .battle-caption p { font-size: 13px; }
  .battle-frontline > .versus { margin-top: 0; }

  .battle-captain-select {
    min-height: 94px;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    grid-template-rows: minmax(48px, auto) auto;
  }
  .battle-captain-select-vitals {
    grid-column: 1 / -1;
    gap: 4px;
  }
  .battle-selector-vital {
    grid-template-columns: max-content minmax(12px, 1fr);
    font-size: 10px;
  }
  .battle-selector-vital small { display: none; }
  .battle-captain-manpower-icon {
    width: 18px;
    height: 24px;
  }
  .battle-captain-manpower-icon svg { width: 17px; height: 17px; }

  .onboarding-batch-gestation-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .onboarding-batch-gestation-row {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 7px;
  }
  .onboarding-batch-gestation-row img { width: 46px; height: 60px; }

  #surrender-expedition-button { display: none !important; }
}

@media (max-width: 359px) {
  .next-objective {
    min-height: 44px;
    padding: 6px 8px;
  }
  .next-objective strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .battle-captain-select-copy small { display: none; }
  .battle-captain-select-copy strong {
    overflow: visible;
    font-size: 12px;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-caption.caption-showing,
  .battle-caption.caption-hiding {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 430px) {
  .commander-status-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .commander-status-actions button {
    min-width: 0;
    min-height: 44px;
    white-space: normal;
  }
  .formation-change-actions { grid-template-columns: 1fr; }
  .expedition-route-settings { margin-inline: 10px; }
  .expedition-setup-heading,
  .main-formation-summary,
  .expedition-preflight-message {
    padding-inline: 10px;
  }
}

/* Final release UI layer: shared typography, icons and hierarchy. */
.ui-icon {
  display: inline-block;
  width: var(--icon-size-md, 22px);
  height: var(--icon-size-md, 22px);
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--ui-icon-source) center / contain no-repeat;
  mask: var(--ui-icon-source) center / contain no-repeat;
}

.ui-icon-battle { --ui-icon-source: url("assets/icons/ui/battle.svg"); }
.ui-icon-formation { --ui-icon-source: url("assets/icons/ui/formation.svg"); }
.ui-icon-army { --ui-icon-source: url("assets/icons/ui/army.svg"); }
.ui-icon-captain { --ui-icon-source: url("assets/icons/ui/captain.svg"); }
.ui-icon-report { --ui-icon-source: url("assets/icons/ui/report.svg"); }
.ui-icon-medical { --ui-icon-source: url("assets/icons/ui/medical-record.svg"); }
.ui-icon-more { --ui-icon-source: url("assets/icons/ui/more.svg"); }
.ui-icon-compass { --ui-icon-source: url("assets/icons/ui/compass.svg"); }
.ui-icon-back { --ui-icon-source: url("assets/icons/ui/back.svg"); }
.ui-icon-next {
  --ui-icon-source: url("assets/icons/ui/back.svg");
  transform: rotate(180deg);
}
.ui-icon-close { --ui-icon-source: url("assets/icons/ui/close.svg"); }
.ui-icon-expand { --ui-icon-source: url("assets/icons/ui/expand.svg"); }
.ui-icon-collapse { --ui-icon-source: url("assets/icons/ui/collapse.svg"); }
.ui-icon-play { --ui-icon-source: url("assets/icons/ui/play.svg"); }
.ui-icon-pause { --ui-icon-source: url("assets/icons/ui/pause.svg"); }
.ui-icon-bell { --ui-icon-source: url("assets/icons/ui/bell.svg"); }
.ui-icon-settings { --ui-icon-source: url("assets/icons/ui/settings.svg"); }
.ui-icon-lock { --ui-icon-source: url("assets/icons/ui/lock.svg"); }

html,
body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

button,
input,
select,
textarea,
label,
.battle-log,
.mobile-bottom-nav {
  font-family: var(--font-body);
}

h1,
h2,
h3,
.unit-name,
.battle-captain-select-copy strong,
.battle-captain-focus-copy > strong,
.commander-card h3,
.captain-event-speaker,
.event-mod-speaker {
  font-family: var(--font-display);
}

button,
select,
input,
textarea {
  font-size: var(--font-size-button);
}

button,
[role="button"],
select {
  min-height: 44px;
}

small,
.control-note,
.ui-kicker,
.capture-result {
  font-size: var(--font-size-meta);
}

#header-total-troops,
.battle-captain-select-manpower,
.battle-captain-focus-stats dd,
.hp-value,
.shield-value,
.owned-count,
.expedition-summary strong,
.onboarding-manpower-transition,
.onboarding-attrition-total {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

.onboarding-manpower-transition,
.onboarding-attrition-total,
.expedition-summary-stats strong {
  font-size: var(--font-size-value);
}

.mobile-bottom-nav button b {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  font-size: var(--font-size-meta);
  line-height: 1.2;
}

.mobile-bottom-nav button span,
.mobile-more-grid button,
.subscreen-header button {
  font-size: var(--font-size-meta);
}

.subscreen-header button,
.display-settings-close,
.mobile-sheet-heading button,
.gestation-growth-close,
.gestation-growth-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gestation-growth-arrow.previous .ui-icon { transform: rotate(90deg); }
.gestation-growth-arrow.next .ui-icon { transform: rotate(-90deg); }

.battle-overview,
.battle-captain-focus,
.army-panel,
.unit-card,
.owned-unit-card,
.commander-card,
.formation-slot {
  border-color: var(--border-subtle);
}

.battle-overview,
.battle-captain-focus {
  background: var(--surface-raised);
  box-shadow: 0 12px 28px var(--ui-shadow-panel);
}

.battle-frontline .army-panel {
  border: 0;
  background: var(--surface-base);
}

.player-army .unit-card.has-captain,
.enemy-army .unit-card {
  box-shadow: inset 3px 0 0 var(--ui-context-accent);
}

.battle-captain-focus-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: var(--surface-base);
}

.battle-captain-focus-toggle .ui-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.captain-placement-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.captain-placement-badge .ui-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.battle-captain-focus-copy > p,
.battle-captain-focus-comment,
.battle-engagement-summary {
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.battle-captain-focus-stats dt,
.battle-captain-focus-stats dd,
.battle-captain-select-copy small,
.enemy-army .unit-role,
.enemy-army .unit-state,
.enemy-army .hp-label,
.enemy-army .shield-label,
.enemy-unit-summary span {
  font-size: var(--font-size-meta);
}

.battle-captain-focus-stats dd,
.enemy-army .hp-value,
.enemy-army .shield-value,
.battle-captain-select-manpower {
  font-size: 13px;
}

.battlefield .unit-topline > span,
.battlefield .company-label,
.battlefield .captain-label,
.battlefield .troop-label,
.battlefield .battle-manpower-row span,
.battlefield .battle-manpower-value,
.battlefield .shield-row span,
.battlefield .hp-row span,
.battlefield .hp-label,
.battlefield .shield-label,
.battlefield .hp-value,
.battlefield .shield-value,
.battlefield .stats span {
  font-size: var(--font-size-meta);
}

.owned-army-heading p:last-child,
.owned-resource-summary span,
.level-up-message,
.formation-commander-summary span,
.commander-message,
.commander-card small,
.owned-unit-card small,
.expedition-summary small,
.onboarding-card small,
.display-settings-card small {
  font-size: var(--font-size-meta);
  line-height: 1.55;
}

.owned-army-screen .owned-unit-role,
.owned-army-screen .owned-unit-card h3 small,
.owned-army-screen .owned-count,
.owned-army-screen .unit-manpower-record span,
.owned-army-screen .unit-manpower-record small,
.owned-army-screen .experience-training-actions > span,
.owned-army-screen .owned-unit-card .compact-button,
.owned-army-screen .faction-heading > strong {
  font-size: var(--font-size-meta);
}

.owned-army-heading,
.formation-slot,
.owned-unit-card,
.commander-card,
.battle-report-highlight,
.battle-report-panel > section {
  border-color: var(--border-subtle);
}

.owned-army-screen,
.formation-screen,
.commander-screen,
.expedition-summary {
  width: min(100%, 1240px);
  margin-inline: auto;
  border-color: var(--border-subtle);
}

body.subscreen-active .owned-army-heading .capture-result,
body.subscreen-active .owned-army-heading h2,
body.subscreen-active .expedition-summary > .capture-result,
body.subscreen-active .expedition-summary > h2 {
  display: none;
}

body.subscreen-active .owned-army-heading {
  padding-block: 14px;
  border-bottom-color: var(--border-subtle);
}

.onboarding-attrition-details {
  margin-top: 8px;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
}

.onboarding-attrition-details > summary {
  min-height: 44px;
  padding: 10px 0;
  color: var(--text-accent);
  cursor: pointer;
}

.onboarding-attrition-details:not([open]) > ul {
  display: none;
}

@media (min-width: 1024px) {
  .owned-army-screen,
  .commander-screen,
  .formation-screen,
  .expedition-summary,
  .story-hub-screen,
  .facility-base-screen {
    max-width: 1240px;
  }

  .formation-slots {
    align-items: start;
  }

  .formation-slot,
  .commander-card,
  .owned-unit-card {
    padding: 15px;
  }

  .battle-report-highlights,
  .battle-report-overview-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .battlefield {
    gap: 8px;
    padding: 6px;
  }

  .battle-overview-heading {
    padding: 8px 10px;
  }

  .battle-overview-heading h2 {
    font-size: 17px;
  }

  .battle-frontline {
    gap: 6px;
    padding: 6px;
  }

  .battle-frontline .army-heading {
    min-height: 40px;
    padding: 6px 8px;
  }

  .battle-frontline .army-heading p {
    font-size: 11px;
  }

  .battle-frontline .army-heading h2 {
    font-size: 13px;
  }

  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
  }

  .battle-captain-select {
    min-height: 70px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }

  .battle-captain-select-image {
    width: 34px;
    height: 48px;
  }

  .battle-captain-select-copy {
    gap: 1px;
  }

  .battle-captain-select-copy strong {
    font-size: 13px;
  }

  .battle-captain-select-copy small,
  .battle-captain-select-manpower {
    font-size: 12px;
    line-height: 1.25;
  }

  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }

  .enemy-army .unit-card {
    min-width: 0;
    padding: 7px;
  }

  .enemy-army .unit-card .unit-name {
    min-height: 2.7em;
    margin-block: 3px 5px;
    font-size: 14px;
    line-height: 1.35;
  }

  .enemy-unit-summary {
    min-height: 54px;
  }

  .battle-engagement-summary {
    margin: 0 6px 6px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .battle-overview > .battle-captain-focus {
    width: auto;
    margin: 0 6px 6px;
    scroll-margin-top: calc(var(--battle-announcement-top, 108px) + 8px);
    border-inline: 0;
    box-shadow: inset 3px 0 0 var(--ui-selection-marker);
  }

  .battle-captain-focus > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
  }

  .battle-captain-focus-toggle {
    display: inline-flex;
  }

  .battle-captain-focus.is-collapsible:not(.is-expanded) .battle-captain-focus-body {
    display: none;
  }

  .battle-captain-focus-body {
    grid-template-columns: minmax(112px, 42%) minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .battle-captain-focus-portrait {
    min-height: 190px;
  }

  .battle-captain-focus-copy > p,
  .battle-captain-focus-comment {
    font-size: 14px;
  }

  .mobile-bottom-nav button span {
    font-size: 12px;
  }

  .owned-army-heading p:last-child,
  .owned-resource-summary span,
  .level-up-message,
  .formation-commander-summary span,
  .commander-message,
  .commander-card small,
  .owned-unit-card small,
  .expedition-summary small,
  .onboarding-card small,
  .display-settings-card small {
    font-size: 12px;
  }

  .onboarding-card p,
  .display-settings-card p,
  .expedition-summary p,
  .owned-army-screen p,
  .formation-screen p,
  .commander-screen p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Absolute final cascade for the A/B navigation and battle additions. */
.captain-speech-bubble { display: none !important; }
.battle-frontline {
  grid-template-areas:
    "allies versus enemies"
    "caption caption caption";
}
.battle-frontline > .player-army { grid-area: allies; }
.battle-frontline > .versus { grid-area: versus; }
.battle-frontline > .enemy-army { grid-area: enemies; }
.battle-caption { grid-area: caption; }
.battle-captain-select {
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
}
.battle-captain-select-image { grid-row: 1 / span 2; }
.battle-captain-select-copy { grid-column: 2; grid-row: 1; }
.battle-captain-select-vitals { grid-column: 2 / span 2; grid-row: 2; }
.battle-captain-manpower-icon { grid-column: 3; grid-row: 1; }

@media (min-width: 1024px) {
  /* Desktop owns a compact header navigation; the touch dock never becomes a rail. */
  body { padding: 0; }
  .mobile-bottom-nav {
    display: none !important;
  }
  main.game-shell {
    width: min(1280px, calc(100vw - 32px));
    margin-inline: auto;
  }
  .pc-primary-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--ui-border-subtle);
  }
  .pc-primary-nav button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 0;
    color: var(--ui-text-secondary);
    background: transparent;
    font: 700 13px/1 var(--font-body);
  }
  .pc-primary-nav button:hover,
  .pc-primary-nav button[aria-current="page"] {
    color: var(--ui-text-primary);
    background: var(--ui-selection-bg);
  }
  .pc-primary-nav .ui-icon { width: 18px; height: 18px; }
  .battlefield {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .9fr);
    align-items: start;
  }
  .battle-captain-focus { align-self: start; }
  .battle-captain-focus-body {
    display: block;
    padding: 14px;
  }
  .battle-captain-focus-portrait {
    width: min(100%, 280px);
    min-height: 0;
    aspect-ratio: 3 / 4;
    margin: 0 auto 14px;
  }
  .battle-captain-focus-portrait img { width: 100%; height: 100%; object-fit: cover; }
  .battle-information { grid-column: auto; }
  .battle-body-images { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .battle-body-image-card .body-status-card-image {
    min-height: 90px;
    max-height: 110px;
  }
}

@media (max-width: 600px) {
  .battle-frontline {
    grid-template-areas:
      "enemies"
      "allies"
      "caption";
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .battle-frontline > .enemy-army { grid-area: enemies; }
  .battle-frontline > .player-army { grid-area: allies; }
  .battle-frontline > .battle-caption { grid-area: caption; }
  .battle-frontline > .versus { display: none; }
  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }
  .battle-captain-select {
    display: grid;
    min-width: 0;
    min-height: 148px;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-rows: 100px auto;
    gap: 4px;
  }
  .battle-captain-select-image {
    width: 100%;
    height: 100px;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .battle-captain-select-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  .battle-captain-select-vitals {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }
  .battle-selector-vital { grid-template-columns: 14px minmax(0, 1fr); }
  .battle-captain-manpower-icon { grid-column: 2 !important; grid-row: 2 !important; }
  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .enemy-army .unit-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 7px;
  }
  .enemy-army .unit-card > .unit-topline,
  .enemy-army .unit-card > .unit-name,
  .enemy-army .unit-card > .hp-row,
  .enemy-army .unit-card > .shield-row { grid-column: 2; }
  .enemy-army .unit-battle-image:not([hidden]) {
    display: block;
    width: 46px;
    height: 62px;
    grid-column: 1;
    grid-row: 1 / span 3;
    object-fit: cover;
  }
  .enemy-unit-summary { grid-column: 1 / -1; width: 100%; }
  .battle-captain-focus-body {
    grid-template-columns: minmax(118px, 44%) minmax(0, 1fr);
  }
  .battle-captain-focus-condition,
  .battle-captain-focus-comment,
  .battle-captain-focus-state { display: none; }
  .battle-body-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.expedition-paused .battle-control-bar > #battle-control-pause {
    display: inline-flex;
  }
  .battle-control-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .battle-control-menu button {
    min-width: 0;
    padding-inline: 3px;
    font-size: 12px;
    white-space: normal;
  }
  .onboarding-batch-gestation-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final mobile-battle cascade guard. */
@media (max-width: 600px) {
  .battle-frontline {
    display: grid;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "enemies" "allies" "caption";
    gap: 10px;
  }
  .battle-frontline > .enemy-army { grid-area: enemies; }
  .battle-frontline > .player-army { grid-area: allies; }
  .battle-frontline > .battle-caption { grid-area: caption; }
  .battle-frontline > .versus { display: none; }
  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }
  .battle-captain-select {
    display: grid;
    min-width: 0;
    min-height: 148px;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-rows: 100px auto;
    gap: 4px;
  }
  .battle-captain-select-image {
    width: 100%;
    height: 100px;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .battle-captain-select-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  .battle-captain-select-vitals {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .battle-selector-vital { grid-template-columns: 14px minmax(0, 1fr); }
  .battle-captain-manpower-icon { grid-column: 2; grid-row: 2; }
  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .enemy-army .unit-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 7px;
  }
  .enemy-army .unit-card > .unit-topline,
  .enemy-army .unit-card > .unit-name,
  .enemy-army .unit-card > .hp-row,
  .enemy-army .unit-card > .shield-row { grid-column: 2; }
  .enemy-army .unit-battle-image:not([hidden]) {
    display: block;
    width: 46px;
    height: 62px;
    grid-column: 1;
    grid-row: 1 / span 3;
    object-fit: cover;
  }
  .enemy-unit-summary { grid-column: 1 / -1; width: 100%; }
  .battle-captain-focus-body {
    grid-template-columns: minmax(118px, 44%) minmax(0, 1fr);
  }
  .battle-captain-focus-condition,
  .battle-captain-focus-comment,
  .battle-captain-focus-state { display: none; }
  .battle-body-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-control-bar {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
  body.expedition-paused .battle-control-bar > #battle-control-pause {
    display: inline-flex;
  }
  .battle-control-menu {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .battle-control-menu button {
    min-width: 0;
    min-height: 46px;
    padding-inline: 3px;
    font-size: 12px;
    white-space: normal;
  }
}

/* Keep the mobile battle composition last: legacy responsive rules above are
   retained for non-battle screens but must not restore the former card order. */
@media (max-width: 600px) {
  .battlefield {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 8px;
    overflow-x: hidden;
  }
  .battle-overview,
  .battle-captain-focus,
  .battle-information { grid-column: 1; }
  .battle-overview { border: 0; background: transparent; box-shadow: none; }
  .battle-frontline {
    display: grid;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "enemies" "allies" "caption";
    gap: 10px;
  }
  .battle-frontline > .enemy-army { grid-area: enemies; }
  .battle-frontline > .player-army { grid-area: allies; }
  .battle-frontline > .battle-caption { grid-area: caption; }
  .battle-frontline > .versus { display: none; }
  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }
  .battle-captain-select {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 148px;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-rows: 100px auto;
    gap: 4px;
  }
  .battle-captain-select-image {
    width: 100%;
    height: 100px;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .battle-captain-select-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  .battle-captain-select-vitals {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .battle-selector-vital { grid-template-columns: 14px minmax(0, 1fr); gap: 4px; }
  .battle-selector-vital b,
  .battle-selector-vital b svg { display: block; width: 14px; height: 14px; }
  .battle-selector-vital i { height: 6px; background: #24282d; }
  .battle-captain-manpower-icon {
    width: 22px;
    height: 30px;
    grid-column: 2;
    grid-row: 2;
  }
  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }
  .enemy-army .unit-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 7px;
    padding: 7px;
  }
  .enemy-army .unit-card > .unit-topline,
  .enemy-army .unit-card > .unit-name,
  .enemy-army .unit-card > .hp-row,
  .enemy-army .unit-card > .shield-row { grid-column: 2; }
  .enemy-army .unit-battle-image:not([hidden]) {
    display: block;
    width: 46px;
    height: 62px;
    grid-column: 1;
    grid-row: 1 / span 3;
    object-fit: cover;
  }
  .enemy-unit-summary { grid-column: 1 / -1; width: 100%; }
  .battle-captain-focus-body {
    grid-template-columns: minmax(118px, 44%) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .battle-captain-focus-portrait { min-height: 230px; }
  .battle-captain-focus-condition,
  .battle-captain-focus-comment,
  .battle-captain-focus-state { display: none; }
  .battle-body-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-control-bar {
    box-sizing: border-box;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 8px max(8px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    flex-direction: column;
    gap: 8px;
  }
  body.expedition-paused .battle-control-bar > #battle-control-pause {
    display: inline-flex;
  }
  .battle-control-menu {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .battle-control-menu button {
    min-width: 0;
    min-height: 46px;
    padding: 6px 3px;
    font-size: 12px;
    white-space: normal;
  }
}

@media (max-width: 359px) {
  .battlefield { padding-inline: 5px; }
  .battle-captain-select { min-height: 138px; grid-template-rows: 90px auto; }
  .battle-captain-select-image { height: 90px; }
  .enemy-army .unit-card { grid-template-columns: 40px minmax(0, 1fr); }
  .enemy-army .unit-battle-image:not([hidden]) { width: 40px; height: 56px; }
}

/* Final cascade ownership for the A/B battle and navigation follow-up.
   Kept last so legacy responsive layers cannot restore overlays or a
   bottom navigation rail on desktop. */
.captain-speech-bubble { display: none !important; }
.battle-frontline {
  grid-template-areas:
    "allies versus enemies"
    "caption caption caption";
}
.battle-frontline > .player-army { grid-area: allies; }
.battle-frontline > .versus { grid-area: versus; }
.battle-frontline > .enemy-army { grid-area: enemies; }
.battle-caption { grid-area: caption; }
.battle-captain-select {
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
}
.battle-captain-select-image { grid-row: 1 / span 2; }
.battle-captain-select-copy { grid-column: 2; grid-row: 1; }
.battle-captain-select-vitals { grid-column: 2 / span 2; grid-row: 2; }
.battle-captain-manpower-icon { grid-column: 3; grid-row: 1; }

@media (max-width: 600px) {
  .battle-frontline {
    display: grid;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "enemies"
      "allies"
      "caption";
    gap: 10px;
  }
  .battle-frontline > .enemy-army { grid-area: enemies; }
  .battle-frontline > .player-army { grid-area: allies; }
  .battle-frontline > .battle-caption { grid-area: caption; }
  .battle-frontline > .versus { display: none; }
  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }
  .battle-captain-select {
    display: grid;
    min-width: 0;
    min-height: 148px;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-rows: 100px auto;
    gap: 4px;
  }
  .battle-captain-select-image {
    width: 100%;
    height: 100px;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .battle-captain-select-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  .battle-captain-select-vitals {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .battle-selector-vital { grid-template-columns: 14px minmax(0, 1fr); }
  .battle-captain-manpower-icon { grid-column: 2; grid-row: 2; }
  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .enemy-army .unit-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 7px;
  }
  .enemy-army .unit-card > .unit-topline,
  .enemy-army .unit-card > .unit-name,
  .enemy-army .unit-card > .hp-row,
  .enemy-army .unit-card > .shield-row { grid-column: 2; }
  .enemy-army .unit-battle-image:not([hidden]) {
    display: block;
    width: 46px;
    height: 62px;
    grid-column: 1;
    grid-row: 1 / span 3;
    object-fit: cover;
  }
  .enemy-unit-summary { grid-column: 1 / -1; width: 100%; }
  .battle-captain-focus-body {
    grid-template-columns: minmax(118px, 44%) minmax(0, 1fr);
  }
  .battle-captain-focus-condition,
  .battle-captain-focus-comment,
  .battle-captain-focus-state { display: none; }
  .battle-body-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.expedition-paused .battle-control-bar > #battle-control-pause {
    display: inline-flex;
  }
  .battle-control-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .battle-control-menu button {
    min-width: 0;
    min-height: 46px;
    padding-inline: 3px;
    font-size: 12px;
    white-space: normal;
  }
  .onboarding-batch-gestation-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final cascade ownership for the 2026-08-04 navigation and battle cards. */
.battle-frontline {
  grid-template-areas:
    "allies versus enemies"
    "caption caption caption";
}
.battle-frontline > .player-army { grid-area: allies; }
.battle-frontline > .versus { grid-area: versus; }
.battle-frontline > .enemy-army { grid-area: enemies; }
.battle-caption { grid-area: caption; }
.battle-reconnaissance-pending {
  min-height: 64px;
  margin: 0;
  padding: 20px 12px;
  color: var(--ui-text-secondary);
  text-align: center;
}
.battle-captain-select {
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
}
.battle-captain-select-image { grid-row: 1 / span 2; }
.battle-captain-select-copy { grid-column: 2; grid-row: 1; }
.battle-captain-select-vitals { grid-column: 2 / span 2; grid-row: 2; }
.battle-captain-manpower-icon { grid-column: 3; grid-row: 1; }
.onboarding-batch-gestation-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .battle-frontline {
    grid-template-areas:
      "enemies"
      "allies"
      "caption";
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .battle-frontline > .enemy-army { grid-area: enemies; }
  .battle-frontline > .player-army { grid-area: allies; }
  .battle-frontline > .battle-caption { grid-area: caption; }
  .battle-frontline > .versus { display: none; }
  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }
  .battle-captain-select {
    display: grid;
    min-width: 0;
    min-height: 148px;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-rows: 100px auto;
    gap: 4px;
  }
  .battle-captain-select-image {
    width: 100%;
    height: 100px;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .battle-captain-select-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  .battle-captain-select-vitals {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }
  .battle-selector-vital { grid-template-columns: 14px minmax(0, 1fr); }
  .battle-captain-manpower-icon { grid-column: 2; grid-row: 2; }
  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .enemy-army .unit-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 7px;
  }
  .enemy-army .unit-card > .unit-topline,
  .enemy-army .unit-card > .unit-name,
  .enemy-army .unit-card > .hp-row,
  .enemy-army .unit-card > .shield-row { grid-column: 2; }
  .enemy-army .unit-battle-image:not([hidden]) {
    display: block;
    width: 46px;
    height: 62px;
    grid-column: 1;
    grid-row: 1 / span 3;
    object-fit: cover;
  }
  .enemy-unit-summary { grid-column: 1 / -1; width: 100%; }
  .battle-captain-focus-body {
    grid-template-columns: minmax(118px, 44%) minmax(0, 1fr);
  }
  .battle-captain-focus-condition,
  .battle-captain-focus-comment,
  .battle-captain-focus-state { display: none; }
  .battle-body-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.expedition-paused .battle-control-bar > #battle-control-pause {
    display: inline-flex;
  }
  .battle-control-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .battle-control-menu button {
    min-width: 0;
    padding-inline: 3px;
    font-size: 12px;
    white-space: normal;
  }
  .onboarding-batch-gestation-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Accessibility floor for persistent mobile navigation and expedition
   controls. The important declarations guard against later legacy mobile
   layers that otherwise restore 9–12px labels. */
@media (max-width: 760px) {
  .mobile-expedition-summary {
    font-size: max(12px, var(--font-size-meta, 12px)) !important;
  }

  .mobile-expedition-summary strong {
    font-size: max(14px, var(--font-size-body, 14px)) !important;
  }

  .mobile-header-action,
  .expedition-toggle-button {
    font-size: max(13px, var(--font-size-button, 14px)) !important;
  }

  .mobile-bottom-nav button b {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    font-size: max(12px, var(--font-size-meta, 12px)) !important;
    line-height: 1.2;
  }
}

/* Practical management labels must not fall back to the legacy 8–11px scale. */
.owned-army-screen .owned-unit-role,
.owned-army-screen .owned-unit-card h3 small,
.owned-army-screen .owned-count,
.owned-army-screen .unit-manpower-record span,
.owned-army-screen .unit-manpower-record small,
.owned-army-screen .experience-training-actions > span,
.owned-army-screen .owned-unit-card .compact-button,
.owned-army-screen .faction-heading > strong {
  font-size: var(--font-size-meta);
}

/* Mobile battle cards: the captain portrait and current condition are the
   stable two-column hero area. Detailed condition data lives in a sheet. */
@media (max-width: 760px) {
  .player-army .unit-card.has-captain {
    min-height: 0;
    padding: 8px;
    cursor: default;
  }

  .player-army .unit-card.has-captain .captain-card-hero {
    display: grid;
        grid-template-columns: minmax(0, 46.5fr) minmax(0, 53.5fr);
    gap: 8px;
    width: 100%;
    min-height: 220px;
    margin-bottom: 8px;
  }

  .player-army .unit-card.has-captain .captain-portrait-panel {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: auto;
    min-width: 0;
    height: 220px;
  }

  .player-army .unit-card.has-captain .captain-portrait-frame {
    width: 100%;
    height: 220px;
    min-height: 220px;
    border-radius: 6px;
  }

  .player-army .unit-card.has-captain .captain-portrait-frame:focus-visible,
  .player-army .unit-card.has-captain .captain-state-open:focus-visible {
    outline: 2px solid #e2bc72;
    outline-offset: 2px;
  }

  .player-army .unit-card.has-captain .captain-portrait-name {
    width: 100%;
    margin: 0;
    padding: 30px 8px 8px;
    font-size: 11px;
  }

  .player-army .unit-card.has-captain .captain-speech-bubble {
    top: 8px;
    right: -8px;
    left: 8px;
    width: auto;
    max-width: none;
  }

  .player-army .unit-card.has-captain .captain-state-summary {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    height: 220px;
    overflow: hidden;
    flex-direction: column;
    padding: 13px 11px 11px;
    border: 1px solid rgba(154, 117, 180, .42);
    border-radius: 6px;
    background:
      linear-gradient(150deg, rgba(108, 68, 128, .2), transparent 58%),
      rgba(15, 15, 22, .92);
  }

  .captain-state-summary-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
  }

  .captain-state-summary-title {
    overflow: hidden;
    color: #ead9f2;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .captain-state-summary-count {
    flex: 0 0 auto;
    color: #b99bc9;
    font: 700 10px/1.2 Arial, sans-serif;
    font-variant-numeric: tabular-nums;
  }

  .captain-state-summary-stage {
    margin-top: 18px;
    color: #e6ddcf;
    font-size: 12px;
    line-height: 1.45;
  }

  .captain-state-summary-remaining {
    margin-top: 7px;
    color: #a8a4ae;
    font-size: 10px;
    line-height: 1.45;
  }

  .captain-state-summary-warning {
    margin-top: 8px;
    color: #edc57e;
    font-size: 10px;
    line-height: 1.3;
  }

  .captain-state-open {
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    border: 1px solid rgba(199, 165, 211, .46);
    border-radius: 4px;
    color: #eadff0;
    background: rgba(81, 53, 93, .4);
    font-size: 11px;
  }

  .player-army .unit-card.has-captain .unit-topline,
  .player-army .unit-card.has-captain .company-label,
  .player-army .unit-card.has-captain .unit-name,
  .player-army .unit-card.has-captain .troop-label,
  .player-army .unit-card.has-captain .battle-manpower-row,
  .player-army .unit-card.has-captain .shield-row,
  .player-army .unit-card.has-captain .hp-row {
    width: 100%;
    margin-left: 0;
  }

  .player-army .unit-card.has-captain .company-label {
    margin-top: 2px;
  }

  .player-army .unit-card.has-captain .unit-name {
    margin: 3px 0 4px;
    font-size: 13px;
  }

  .player-army .unit-card.has-captain .captain-label {
    display: none;
  }

  .player-army .unit-card.has-captain .troop-label,
  .player-army .unit-card.has-captain .hp-label,
  .player-army .unit-card.has-captain .shield-label,
  .player-army .unit-card.has-captain .battle-manpower-label {
    font-variant-numeric: tabular-nums;
  }

  .player-army .unit-card.has-captain .body-status-inline,
  .player-army .unit-card.has-captain.mobile-expanded .body-status-inline,
  .player-army .unit-card.has-captain .stats,
  .player-army .unit-card.has-captain .deep-trait-list {
    display: none;
  }

  .captain-state-sheet {
    padding: 0;
    align-items: end;
  }

  .captain-state-sheet-card {
    width: 100%;
    max-height: 88dvh;
    border-width: 1px 0 0;
    border-radius: 15px 15px 0 0;
  }

  .captain-state-sheet-card > header {
    padding-inline: max(14px, env(safe-area-inset-left));
  }

  .captain-state-sheet-content {
    padding:
      12px max(12px, env(safe-area-inset-right))
      max(18px, calc(env(safe-area-inset-bottom) + 10px))
      max(12px, env(safe-area-inset-left));
  }

  .captain-state-sheet-body-status {
    width: 100%;
    margin: 0;
  }
}

/* Event presentation layer: shared hierarchy for story, captain and MOD events. */
body.event-presentation-open {
  overflow: hidden;
  overscroll-behavior: none;
}
.event-presentation-kicker,
.event-presentation-context,
.event-presentation-location {
  display: block;
  margin: 0 0 5px;
}
.event-presentation-kicker {
  color: #d5ae65;
  font: 700 10px/1.3 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.event-presentation-context,
.event-presentation-location {
  color: #aaa18e;
  font-size: 12px;
}
.event-presentation-result {
  margin: 10px 8px 18px;
  padding: 18px;
  border: 1px solid rgba(196, 157, 86, .38);
  background: rgba(12, 13, 17, .82);
}
.event-presentation-result h3 {
  margin: 0 0 10px;
  color: #e5c47f;
  font-size: 18px;
}
.event-presentation-result p,
.event-presentation-result ul {
  margin: 8px 0 0;
  color: #ded7c9;
  line-height: 1.65;
}
.captain-event-panel,
.event-mod-panel {
  width: min(960px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.captain-event-panel > header,
.event-mod-panel > header {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 4vw, 46px);
}
.captain-event-portrait,
.event-mod-portrait-frame {
  width: 100%;
  height: min(48vh, 340px);
  min-height: 260px;
}
.captain-event-portrait img,
.event-mod-portrait-frame img {
  object-fit: contain;
  object-position: top center;
}
.event-mod-heading {
  display: block;
}
.event-mod-status-icon {
  margin-bottom: 10px;
}
.event-mod-panel.is-introducing > * {
  animation: event-presentation-intro .48s ease-out both;
}
.captain-event-prompt {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
}
.captain-event-prompt-portrait {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 64px;
  border: 1px solid rgba(190, 154, 89, .4);
  background: #111217;
}
.captain-event-prompt-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.captain-event-prompt-portrait span {
  display: grid;
  height: 100%;
  place-items: center;
}
.captain-event-prompt small {
  display: block;
  margin-top: 5px;
  color: #9b927e;
}
.event-cutin {
  position: fixed;
  z-index: 89;
  top: max(76px, calc(env(safe-area-inset-top) + 64px));
  right: max(14px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px 44px;
  width: min(430px, calc(100vw - 28px));
  min-height: 82px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(201, 163, 91, .58);
  background: rgba(13, 14, 18, .96);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
  animation: event-cutin-enter .2s ease-out both;
}
.event-cutin[hidden] { display: none; }
.event-cutin-portrait {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 64px;
  border: 1px solid rgba(201, 163, 91, .32);
}
.event-cutin-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.event-cutin-portrait span {
  display: grid;
  height: 100%;
  place-items: center;
  color: #d6bb7a;
}
.event-cutin-copy { min-width: 0; }
.event-cutin-copy small,
.event-cutin-copy strong,
.event-cutin-copy p { display: block; margin: 0; }
.event-cutin-copy small { color: #9d927b; font-size: 10px; }
.event-cutin-copy strong { margin-top: 3px; color: #e0c17e; }
.event-cutin-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: #ded8cc;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.event-cutin-pin,
.event-cutin-close {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(185, 150, 85, .28);
  color: #bdb4a2;
  background: rgba(255, 255, 255, .03);
}
.event-cutin-pin[aria-pressed="true"] {
  border-color: #c8a45f;
  color: #f0d58d;
}
.event-journal-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.event-timeline-group {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(188, 151, 84, .34);
}
.event-timeline-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px -23px;
}
.event-timeline-heading > span { color: #caa45d; }
.event-timeline-heading h3 { margin: 0; color: #dec48d; }
.event-timeline-heading small { margin-left: auto; color: #958b79; }
.event-timeline-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 10px;
}
.event-result-summary {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #c7b88f !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-journal-result h4 { margin: 0 0 7px; color: #d7b873; }
.event-journal-result ul { margin: 0; padding-left: 20px; }
.story-event-stage {
  position: relative;
  grid-template-columns: minmax(200px, 38%) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 40px);
}
.story-event-stage.without-portrait {
  grid-template-columns: minmax(0, 1fr);
}
.story-event-stage.without-portrait .story-event-copy {
  width: min(720px, 100%);
  margin-inline: auto;
}
.story-event-portrait {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 300px;
}
.story-event-portrait img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: contain;
  object-position: bottom center;
}
.story-event-portrait span {
  display: grid;
  height: 100%;
  place-items: center;
  color: #d1af6d;
  font-size: 42px;
}
.story-event-copy { position: relative; z-index: 2; }
@keyframes event-presentation-intro {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes event-cutin-enter {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .captain-event-modal,
  .event-mod-modal,
  .story-event-modal {
    padding: 0;
  }
  .captain-event-panel,
  .event-mod-panel,
  .story-event-panel {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    max-height: 100dvh;
    padding:
      max(14px, env(safe-area-inset-top))
      14px
      max(16px, env(safe-area-inset-bottom));
    border-inline: 0;
  }
  .story-event-panel { padding: 0; }
  .captain-event-panel > header,
  .event-mod-panel > header {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    text-align: center;
  }
  .captain-event-portrait,
  .event-mod-portrait-frame {
    width: min(70vw, 300px);
    height: min(48dvh, 340px);
    min-height: 220px;
    margin-inline: auto;
  }
  .captain-event-dialogue,
  .event-mod-dialogue {
    min-height: 92px;
    padding-block: 14px 10px;
  }
  .captain-event-choice,
  .event-mod-choice,
  .captain-event-actions button,
  .event-mod-actions button {
    min-height: 44px;
  }
  .captain-event-prompt {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .captain-event-prompt > div:last-child {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .captain-event-prompt > div:last-child button { flex: 1; min-height: 44px; }
  .event-cutin {
    top: max(70px, calc(env(safe-area-inset-top) + 58px));
    right: 8px;
    grid-template-columns: 50px minmax(0, 1fr) 44px;
    width: calc(100vw - 16px);
  }
  .event-cutin-portrait { width: 48px; height: 56px; }
  .event-cutin-pin { grid-column: 3; grid-row: 1; }
  .event-cutin-close { grid-column: 3; grid-row: 2; }
  .story-event-stage {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px 14px 14px;
  }
  .story-event-portrait {
    height: min(48dvh, 360px);
    min-height: 220px;
  }
  .story-event-copy { margin-top: -26px; }
  .event-timeline-group { padding-left: 11px; }
  .event-timeline-heading { margin-left: -18px; }
  .event-timeline-items { grid-template-columns: minmax(0, 1fr); }
}

/* Demo UX: progressive commander information and accessible display options. */
.commander-section-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 12px;
}

.commander-section-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 5px;
  border: 1px solid rgba(191, 167, 119, .28);
  border-radius: 6px;
  color: #c4b9a5;
  background: rgba(12, 13, 17, .76);
  font-weight: 700;
}

.commander-section-tabs button[aria-selected="true"] {
  border-color: #d1ad67;
  box-shadow: inset 0 -3px #d1ad67;
  color: #f4dfb3;
  background: rgba(112, 76, 28, .28);
}

.commander-section-panel[hidden] { display: none !important; }
.commander-section-panel { min-width: 0; }
.commander-section-panel.is-gestation,
.commander-section-panel.is-records,
.commander-section-panel.is-placement {
  display: grid;
  gap: 10px;
}
.commander-section-panel.is-records > button,
.commander-section-panel.is-placement > button { width: 100%; }

.event-notification-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event-notification-summary span {
  padding: 6px 9px;
  border: 1px solid rgba(191, 167, 119, .25);
  border-radius: 999px;
  color: #cbc1b1;
}
.event-notification-summary .is-decision { border-color: #d79a64; }
.event-notification-summary .is-important { border-color: #c3a25f; }
.event-notification-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.formation-learning-prompt {
  margin: 10px auto;
  padding: 14px;
  width: min(760px, calc(100% - 24px));
  border: 1px solid rgba(174, 143, 83, .48);
  border-radius: 9px;
  background: rgba(76, 58, 29, .24);
}
.formation-learning-prompt[hidden] { display: none; }
.formation-learning-prompt p { margin: 7px 0 11px; }
.formation-learning-prompt > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.formation-learning-prompt button,
#route-unlock-confirm { min-height: 44px; }

html[data-text-size="small"] { --ui-readable-scale: .92; }
html[data-text-size="standard"] { --ui-readable-scale: 1; }
html[data-text-size="large"] { --ui-readable-scale: 1.18; }

html[data-text-size="large"] .game-shell,
html[data-text-size="large"] dialog,
html[data-text-size="large"] .mobile-bottom-nav {
  font-size: 1.08rem;
}
html[data-text-size="small"] .game-shell,
html[data-text-size="small"] dialog,
html[data-text-size="small"] .mobile-bottom-nav {
  font-size: .94rem;
}

html[data-contrast="enhanced"] {
  --text-primary-accessible: #fff6e5;
  --text-secondary-accessible: #d7cfbf;
}
html[data-contrast="enhanced"] body { color: var(--text-primary-accessible); }
html[data-contrast="enhanced"] small,
html[data-contrast="enhanced"] .commander-description,
html[data-contrast="enhanced"] .event-instance-details,
html[data-contrast="enhanced"] .battle-report-empty { color: var(--text-secondary-accessible); }
html[data-contrast="enhanced"] button,
html[data-contrast="enhanced"] select,
html[data-contrast="enhanced"] details { border-color: rgba(238, 210, 155, .62); }

@media (max-width: 390px) {
  :root {
    --mobile-body-size: 14px;
    --mobile-secondary-size: 12px;
    --mobile-value-size: 15px;
    --mobile-control-size: 14px;
  }
  html[data-text-size="small"] {
    --mobile-body-size: 12px;
    --mobile-secondary-size: 12px;
    --mobile-value-size: 14px;
    --mobile-control-size: 14px;
  }
  html[data-text-size="large"] {
    --mobile-body-size: 16px;
    --mobile-secondary-size: 14px;
    --mobile-value-size: 17px;
    --mobile-control-size: 16px;
  }
  .commander-screen p,
  .owned-army-screen p,
  .battle-report-panel p,
  .event-journal-screen p,
  .gestation-records-screen p,
  .display-settings-dialog label,
  .onboarding-card p,
  .captain-event-panel p,
  .event-mod-panel p {
    font-size: var(--mobile-body-size);
    line-height: 1.45;
  }
  .commander-screen small,
  .owned-army-screen small,
  .battle-report-panel small,
  .event-journal-screen small,
  .gestation-records-screen small {
    font-size: var(--mobile-secondary-size);
  }
  .commander-screen strong,
  .battle-report-panel strong,
  .event-journal-screen strong,
  .header-route-settings strong {
    font-size: var(--mobile-value-size);
  }
  button, select, input, summary {
    font-size: var(--mobile-control-size);
  }
  .event-notification-actions { grid-template-columns: 1fr; }
  .event-notification-actions button { min-height: 44px; }
  .commander-section-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formation-learning-prompt > div { grid-template-columns: 1fr; }
}
.mobile-more-grid button small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.notification-policy-setting {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
}
.notification-policy-setting input {
  width: 20px;
  height: 20px;
  margin: 0;
}
@media (max-width: 390px) {
  .mobile-more-grid button small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .event-mod-panel.is-introducing > *,
  .event-cutin {
    animation: none !important;
  }
}

@media (max-width: 380px) {
  .player-army .unit-card.has-captain .captain-card-hero {
    grid-template-columns: minmax(135px, 45fr) minmax(0, 55fr);
    gap: 7px;
    min-height: 205px;
  }

  .player-army .unit-card.has-captain .captain-portrait-panel,
  .player-army .unit-card.has-captain .captain-portrait-frame,
  .player-army .unit-card.has-captain .captain-state-summary {
    height: 205px;
    min-height: 205px;
  }

  .player-army .unit-card.has-captain .captain-state-summary {
    padding: 11px 9px 9px;
  }

  .captain-state-summary-title {
    font-size: 13px;
  }

  .captain-state-summary-stage {
    margin-top: 14px;
    font-size: 11px;
  }

  .captain-state-summary-remaining {
    font-size: 9px;
  }
}

/* Primary view shell: auxiliary screens replace the battlefield instead of
   being appended beneath it. */
.subscreen-header,
.mobile-expedition-summary,
.mobile-header-action,
.mobile-sheet-heading,
.mobile-bottom-nav,
.mobile-more-sheet {
  display: none !important;
}

body.subscreen-active .game-header,
body.subscreen-active .expedition-bar,
body.subscreen-active .commander-status-bar,
body.subscreen-active #battlefield,
body.subscreen-active #physical-status-panel,
body.subscreen-active #command-deck {
  display: none !important;
}

body.subscreen-active .subscreen-header:not([hidden]) {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid !important;
  min-height: 58px;
  grid-template-columns: minmax(88px, auto) 1fr minmax(88px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: rgba(13, 15, 20, .97);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

/* Programmatic focus announces the new screen without drawing an input-like
   ring around the non-interactive heading. */
#subscreen-title[tabindex="-1"]:focus,
#subscreen-title[tabindex="-1"]:focus-visible {
  outline: none;
}

.subscreen-header h1 {
  margin: 0;
  color: #e7d7b3;
  font-size: 18px;
  text-align: center;
}

.subscreen-header button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(211, 179, 109, .35);
  color: #e3d4b2;
  background: rgba(42, 37, 31, .72);
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .game-shell {
    width: 100%;
    margin: 0;
    padding-inline: 6px;
  }

  .game-header {
    position: sticky;
    z-index: 24;
    top: 0;
    display: block;
    padding: 6px;
    border: 1px solid rgba(211, 179, 109, .2);
    background: rgba(10, 12, 16, .97);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .32);
  }

  .header-legion,
  .header-location,
  .game-header .display-settings-button,
  .game-header .battle-status,
  .commander-status-bar {
    display: none !important;
  }

  .header-expedition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 5px;
  }

  .mobile-expedition-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    line-height: 1.25;
  }

  .mobile-expedition-summary strong {
    overflow: hidden;
    color: #e7d5ad;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-expedition-summary span:last-child {
    color: #b9a578;
  }

  .mobile-header-action {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border: 1px solid rgba(211, 179, 109, .27);
    color: #d7c8a7;
    background: rgba(34, 31, 28, .72);
    font-size: 13px;
  }

  .expedition-toggle-button {
    min-width: 76px;
    min-height: 44px;
    padding-inline: 7px;
    font-size: 13px;
  }

  body.expedition-running .game-header .expedition-toggle-button {
    display: none;
  }

  .header-route-settings,
  .expedition-bar {
    position: fixed;
    z-index: 80;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    width: 100%;
    max-height: min(76dvh, 620px);
    overflow-y: auto;
    padding:
      14px max(14px, env(safe-area-inset-right))
      max(18px, calc(env(safe-area-inset-bottom) + 12px))
      max(14px, env(safe-area-inset-left));
    border: 1px solid rgba(211, 179, 109, .35);
    border-radius: 15px 15px 0 0;
    background: #14161c;
    box-shadow: 0 -12px 38px rgba(0, 0, 0, .58);
  }

  .header-route-settings[data-mobile-open="true"] {
    display: grid;
    grid-template-columns: 1fr;
  }

  .expedition-bar[data-mobile-open="true"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-sheet-heading {
    display: flex !important;
    min-height: 44px;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    color: #ead7ad;
  }

  .mobile-sheet-heading button {
    width: 44px;
    min-height: 44px;
    border: 0;
    color: #eee3ca;
    background: transparent;
    font-size: 24px;
  }

  .header-route-field {
    min-height: 54px;
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .header-route-field select {
    min-height: 44px;
  }

  .expedition-bar > div {
    min-width: 0;
  }

  .expedition-setup,
  #physical-status-panel {
    display: none !important;
  }

  .battlefield {
    gap: 6px;
    padding: 6px 0;
  }

  .army-panel {
    box-shadow: none;
  }

  .army-heading {
    min-height: 40px;
    gap: 7px;
    padding: 6px 10px;
  }

  .army-heading p {
    display: none;
  }

  .army-heading h2 {
    font-size: 13px;
  }

  .unit-list {
    padding: 5px;
  }

  .unit-card {
    min-height: 86px;
    margin-bottom: 5px;
    padding: 8px 9px;
  }

  .player-army .unit-card.has-captain {
    min-height: 132px;
    padding: 8px 8px 8px 104px;
    cursor: pointer;
  }

  .player-army .unit-card.has-captain:focus-visible {
    outline: 2px solid #e2bc72;
    outline-offset: 2px;
  }

  .captain-portrait-panel {
    top: 8px;
    left: 8px;
    width: 88px;
  }

  .captain-portrait-frame {
    width: 86px;
    height: 108px;
  }

  .captain-portrait-name {
    width: 94px;
    margin-top: 3px;
    margin-left: -4px;
    font-size: 8px;
  }

  .captain-speech-bubble {
    left: 91px;
    max-width: min(190px, calc(100vw - 135px));
  }

  .unit-topline {
    min-height: 18px;
  }

  .unit-role,
  .unit-state,
  .company-label,
  .captain-label,
  .troop-label {
    font-size: 8px;
  }

  .captain-label {
    display: none;
  }

  .unit-name {
    margin-block: 3px;
    font-size: 12px;
  }

  .battle-manpower-row,
  .shield-row,
  .hp-row {
    margin-top: 5px;
  }

  .player-army .unit-card.has-captain .body-status-inline,
  .player-army .unit-card.has-captain .stats,
  .player-army .unit-card.has-captain .deep-trait-list {
    display: none;
  }

  .player-army .unit-card.has-captain.mobile-expanded {
    min-height: 176px;
  }

  .player-army .unit-card.has-captain.mobile-expanded .body-status-inline {
    display: block;
    box-sizing: border-box;
    width: calc(100% + 96px);
    margin-top: 9px;
    margin-left: -96px;
  }

  .player-army .unit-card.has-captain.mobile-expanded .stats {
    display: grid;
  }

  .player-army .unit-card.has-captain.mobile-expanded
    [data-body-status-toggle="visual"],
  .player-army .unit-card.has-captain.mobile-expanded
    [data-body-status-panel="visual"],
  .player-army .unit-card.has-captain.mobile-expanded
    [data-body-status-toggle="persistent"],
  .player-army .unit-card.has-captain.mobile-expanded
    [data-body-status-panel="persistent"] {
    display: none !important;
  }

  .enemy-army .unit-card {
    min-height: 78px;
  }

  .enemy-army .stats,
  .enemy-army .deep-trait-list,
  .enemy-army .boss-skill-name {
    display: none;
  }

  .versus {
    display: none;
  }

  .command-deck {
    padding-bottom: 8px;
  }

  .command-deck > .controls {
    display: none;
  }

  .battle-log-wrap {
    margin-top: 4px;
  }

  .battle-control-bar {
    position: fixed;
    z-index: 70;
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    left: 6px;
    display: flex;
    min-height: 52px;
    padding: 5px;
    border: 1px solid rgba(211, 179, 109, .4);
    border-radius: 8px;
    background: rgba(10, 12, 16, .96);
    box-shadow: 0 -7px 24px rgba(0, 0, 0, .44);
  }

  .battle-control-bar[hidden] {
    display: none;
  }

  .battle-control-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .battle-control-menu button {
    min-width: 0;
    padding-inline: 5px;
    font-size: 10px;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 65;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid !important;
    height: calc(62px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 4px 4px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(211, 179, 109, .28);
    background: rgba(10, 12, 16, .97);
  }

  .mobile-bottom-nav[hidden] {
    display: none !important;
  }

  .mobile-bottom-nav button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    color: #afa999;
    background: transparent;
  }

  .mobile-bottom-nav button[aria-current="page"] {
    color: #efd394;
  }

  .mobile-bottom-nav button span {
    font-size: 16px;
  }

  .mobile-bottom-nav button b {
    font-size: 10px;
    font-weight: 600;
  }

  .mobile-bottom-nav button i {
    position: absolute;
    top: 3px;
    right: calc(50% - 22px);
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding-inline: 3px;
    border-radius: 9px;
    color: #160d10;
    background: #d99a69;
    font: 700 9px Arial, sans-serif;
    font-style: normal;
  }

  .faction-unit-grid {
    grid-template-columns: 1fr;
  }

  .owned-unit-card {
    min-width: 0;
  }

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

  .mobile-more-sheet {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid !important;
    align-items: end;
    background: rgba(0, 0, 0, .58);
  }

  .mobile-more-sheet[hidden] {
    display: none !important;
  }

  .mobile-more-card {
    padding:
      16px max(14px, env(safe-area-inset-right))
      max(20px, calc(env(safe-area-inset-bottom) + 12px))
      max(14px, env(safe-area-inset-left));
    border: 1px solid rgba(211, 179, 109, .32);
    border-radius: 15px 15px 0 0;
    background: #15171d;
  }

  .mobile-more-card header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-more-card h2 {
    margin: 0;
    font-size: 18px;
  }

  .mobile-more-card header button {
    width: 44px;
    min-height: 44px;
    border: 0;
    color: #eee3ca;
    background: transparent;
    font-size: 24px;
  }

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

  .mobile-more-grid button {
    min-height: 52px;
    border: 1px solid rgba(211, 179, 109, .24);
    color: #ded2b8;
    background: rgba(39, 35, 31, .65);
  }

  body.subscreen-active {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  body.subscreen-active .subscreen-header {
    margin: 0 -6px 8px;
    border-width: 0 0 1px;
  }

  body.subscreen-active .owned-army-heading {
    margin-top: 0;
  }

  .save-panel {
    margin-top: 0;
  }

  .formation-change-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .header-expedition {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .mobile-header-action {
    padding-inline: 5px;
    font-size: 9px;
  }

  .mobile-bottom-nav {
    padding-inline: 2px;
  }

  .mobile-bottom-nav button {
    padding-inline: 1px;
  }

  .mobile-bottom-nav button b {
    font-size: 9px;
  }

  .expedition-toggle-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .player-army .unit-card.has-captain {
    padding-left: 96px;
  }

  .captain-portrait-frame {
    width: 80px;
    height: 102px;
  }
}

/* Expedition report and read-only battle recollection */
.battle-report-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(900px, 100%);
  margin: 0 auto 16px;
  border: 1px solid #3c372e;
  background: rgba(7, 8, 11, .55);
}
.battle-report-tab {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-right: 1px solid #3c372e;
  color: #8d877b;
  background: transparent;
  font: 600 12px/1.3 Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  touch-action: manipulation;
}
.battle-report-tab:last-child { border-right: 0; }
.battle-report-tab:hover,
.battle-report-tab:focus-visible {
  color: #e2d2ad;
  background: rgba(185, 150, 85, .08);
  outline: 2px solid rgba(211, 179, 109, .55);
  outline-offset: -3px;
}
.battle-report-tab.is-active {
  color: #efe0b8;
  background: linear-gradient(180deg, rgba(185,150,85,.2), rgba(70,54,32,.12));
  box-shadow: inset 0 -2px #b99658;
}
.battle-report-panel {
  box-sizing: border-box;
  width: min(900px, 100%);
  min-width: 0;
  margin: 0 auto 18px;
  text-align: left;
}
.battle-report-panel[hidden] { display: none; }
.battle-report-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.battle-report-highlight {
  min-width: 0;
  padding: 12px 14px;
  border-left: 3px solid #b99658;
  background: linear-gradient(90deg, rgba(185,150,85,.13), rgba(9,10,13,.45));
}
.battle-report-highlight strong {
  color: #d9c490;
  font-size: 11px;
  letter-spacing: .08em;
}
.battle-report-highlight p {
  margin: 5px 0 0;
  color: #d0cbc0;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.route-unlock-card {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(204, 164, 88, .58);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(119, 77, 26, .28), rgba(13, 14, 19, .94) 62%),
    rgba(13, 14, 19, .96);
  box-shadow: inset 0 0 28px rgba(195, 151, 70, .08);
}
.route-unlock-card[hidden] { display: none; }
.route-unlock-card > p:first-child {
  margin: 0 0 4px;
  color: #d3ad63;
  font: 700 10px/1.3 Arial, sans-serif;
  letter-spacing: .18em;
}
.route-unlock-card h3 {
  margin: 0;
  color: #f0ddb2;
  font-size: clamp(18px, 3vw, 24px);
}
.route-unlock-card > p {
  max-width: 58ch;
  margin: 8px 0 0;
  color: #ccc3b2;
  line-height: 1.65;
}
.route-unlock-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.route-unlock-actions[hidden] { display: none; }
.route-unlock-actions button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}
.route-unlock-status {
  padding-left: 10px;
  border-left: 2px solid rgba(198, 160, 91, .65);
}
.battle-report-empty {
  margin: 8px 0;
  padding: 14px;
  color: #8f8b82;
  background: rgba(8, 9, 12, .42);
  font-size: 12px;
  text-align: center;
}
.battle-report-route {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.battle-report-route strong { color: #ddd0ae; font-size: 14px; }
.battle-report-route span { color: #888178; font-size: 11px; }
.battle-report-metrics,
.battle-report-comparison-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #36332e;
  border-left: 1px solid #36332e;
}

.battle-report-return-recovery {
  margin-top: 16px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--records-accent, #8c9aae);
  background: color-mix(in srgb, var(--surface-raised, #171a20) 92%, transparent);
}

.battle-report-return-recovery > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: max(14px, var(--font-size-body, 14px));
  font-weight: 700;
}

.battle-report-return-recovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding-block-start: 10px;
}

.battle-report-return-recovery-row {
  min-width: 0;
  padding: 10px;
  background: var(--surface-base, rgba(6, 8, 12, 0.46));
}

.battle-report-return-recovery-row p,
.battle-report-return-recovery-row small {
  display: block;
  margin: 6px 0 0;
  font-size: max(12px, var(--font-size-meta, 12px));
  line-height: 1.55;
}
.battle-report-metric {
  min-width: 0;
  padding: 10px;
  border-right: 1px solid #36332e;
  border-bottom: 1px solid #36332e;
  background: rgba(7, 8, 11, .45);
}
.battle-report-metric span {
  display: block;
  color: #7d7971;
  font-size: 12px;
}
.battle-report-metric strong {
  display: block;
  margin-top: 5px;
  color: #d8c59a;
  font: 600 13px Arial, sans-serif;
  overflow-wrap: anywhere;
}
.battle-report-comparison { margin-top: 14px; }
.battle-report-comparison h3,
.gestation-report-group > h3,
.recent-battles-heading h3 {
  margin: 0 0 8px;
  color: #a99d86;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
}
.captain-expedition-record,
.birth-report-card,
.gestation-report-row {
  min-width: 0;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid #37342f;
  background: rgba(10, 11, 14, .55);
}
.captain-expedition-record header,
.birth-report-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.captain-expedition-record h3,
.birth-report-card h4 {
  margin: 0;
  color: #dfcc9c;
  font-size: 14px;
}
.captain-expedition-record header span,
.birth-report-card header strong {
  color: #8f897d;
  font-size: 10px;
}
.captain-expedition-prose {
  margin: 10px 0;
  color: #c8c3b8;
  font-size: 12px;
  line-height: 1.75;
}
.captain-expedition-stats,
.birth-report-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 14px;
  margin: 0;
}
.captain-expedition-stats dt,
.birth-report-card dt {
  color: #7f7a71;
  font-size: 9px;
}
.captain-expedition-stats dd,
.birth-report-card dd {
  min-width: 0;
  margin: 0 0 5px;
  color: #bfb7a7;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.captain-expedition-record blockquote {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 2px solid #76613f;
  color: #cfc4aa;
  background: rgba(185,150,85,.06);
  font-size: 12px;
}
.battle-report-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.battle-report-link {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #514832;
  color: #c5b486;
  background: rgba(24, 21, 17, .8);
  font-size: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.battle-report-link:focus-visible {
  outline: 2px solid #d3b36d;
  outline-offset: 2px;
}
.gestation-report-group { margin-bottom: 16px; }
.gestation-report-row {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(120px, 1fr) minmax(130px, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
  padding: 10px 12px;
}
.gestation-report-row strong { color: #c9b787; font-size: 11px; }
.gestation-report-row span,
.gestation-report-row p {
  min-width: 0;
  margin: 0;
  color: #b6b0a5;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.recent-battles-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.recent-battles-heading > div:first-child span {
  color: #77736c;
  font-size: 10px;
}
.recent-battle-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.recent-battle-filter {
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid #45413a;
  color: #aaa399;
  background: rgba(10, 11, 14, .72);
  font: 700 9px/1 sans-serif;
  cursor: pointer;
}
.recent-battle-filter.is-active {
  border-color: #9c8250;
  color: #e1c98f;
  background: rgba(129, 94, 40, .2);
}
.recent-battle-filter:focus-visible {
  outline: 2px solid #d3b36d;
  outline-offset: 2px;
}
.recent-battle-record {
  min-width: 0;
  margin-bottom: 7px;
  border: 1px solid #34322f;
  background: rgba(8, 9, 12, .5);
}
.recent-battle-record.is-defeat {
  border-width: 1px 1px 1px 4px;
  border-color: #6f3e47;
  background:
    linear-gradient(90deg, rgba(98, 40, 50, .18), rgba(8, 9, 12, .58));
}
.recent-battle-record.is-surrender {
  border-width: 1px 1px 1px 4px;
  border-color: #80683f;
  background:
    linear-gradient(90deg, rgba(111, 79, 35, .2), rgba(8, 9, 12, .58));
}
.recent-battle-record.is-defeat > summary::before,
.recent-battle-record.is-surrender > summary::before {
  display: inline-grid;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  place-items: center;
  font: 800 11px/1 sans-serif;
}
.recent-battle-record.is-defeat > summary::before {
  content: "!";
  color: #d89aa3;
}
.recent-battle-record.is-surrender > summary::before {
  content: "◇";
  color: #d5b779;
}
.recent-battle-record > summary {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}
.recent-battle-record.is-defeat > summary,
.recent-battle-record.is-surrender > summary {
  grid-template-columns: 20px minmax(0, 1fr) auto;
}
.recent-battle-record > summary::-webkit-details-marker { display: none; }
.recent-battle-record > summary:focus-visible {
  outline: 2px solid #d3b36d;
  outline-offset: -3px;
}
.recent-battle-summary-main {
  min-width: 0;
}
.recent-battle-summary-main strong,
.recent-battle-summary-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-battle-summary-main strong { color: #c9ba95; font-size: 11px; }
.recent-battle-summary-main span { margin-top: 3px; color: #8c8880; font-size: 10px; }
.recent-battle-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.battle-result-badge,
.battle-icon-badge {
  padding: 3px 6px;
  border: 1px solid #48443d;
  color: #aaa399;
  font-size: 8px;
}
.battle-result-badge.is-victory { color: #cdbb87; border-color: #71603c; }
.battle-result-badge.is-defeat { color: #c58b92; border-color: #70414a; }
.battle-result-badge.is-surrender {
  color: #ddc182;
  border-color: #80683f;
  border-style: double;
}
.recent-battle-body {
  padding: 0 12px 12px;
  color: #aaa59d;
  font-size: 11px;
}
.recent-battle-body > p { margin: 6px 0; }
.recent-battle-changes { margin: 8px 0; padding-left: 18px; color: #c1ae82; }
.battle-outcome-narrative {
  margin: 0 0 12px;
  padding: 11px 12px;
  border-left: 3px solid #70414a;
  background: rgba(94, 38, 47, .13);
}
.battle-outcome-narrative.is-surrender {
  border-left-color: #80683f;
  background: rgba(102, 75, 35, .14);
}
.battle-outcome-narrative-label {
  display: block;
  margin-bottom: 5px;
  color: #d2b1b7;
  font-size: 10px;
  letter-spacing: .08em;
}
.battle-outcome-narrative.is-surrender .battle-outcome-narrative-label {
  color: #d4bd8b;
}
.battle-outcome-narrative p {
  margin: 0;
  color: #d2cbc0;
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-line;
}
.recent-battle-facts {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #322f2b;
}
.boss-aftermath-narrative,
.enemy-gestation-resolution {
  margin: 10px 0;
  padding: 12px 14px;
  border-left: 3px solid #9b79b7;
  background: rgba(46, 31, 58, 0.68);
}

.boss-aftermath-label {
  display: block;
  margin-bottom: 6px;
  color: #d9c1eb;
}

.boss-aftermath-narrative p,
.enemy-gestation-resolution p {
  margin: 5px 0 0;
}
@media (max-width: 720px) {
  .expedition-summary {
    box-sizing: border-box;
    padding-inline: 12px;
    overflow-x: clip;
  }
  .battle-report-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-report-tab {
    border-right: 1px solid #3c372e;
    border-bottom: 1px solid #3c372e;
  }
  .battle-report-highlights,
  .battle-report-metrics,
  .battle-report-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .route-unlock-card {
    padding: 15px 13px;
  }
  .route-unlock-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .battle-report-route,
  .captain-expedition-record header,
  .birth-report-card header {
    align-items: flex-start;
    flex-direction: column;
  }
  .captain-expedition-stats,
  .birth-report-card dl { grid-template-columns: minmax(0, 1fr); }
  .gestation-report-row { grid-template-columns: minmax(0, 1fr); }
  .recent-battles-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .recent-battle-filters { justify-content: flex-start; }
  .recent-battle-filter { min-height: 44px; }
  .recent-battle-record > summary,
  .recent-battle-record.is-victory > summary,
  .recent-battle-record.is-retreat > summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .recent-battle-record.is-defeat > summary,
  .recent-battle-record.is-surrender > summary {
    grid-template-columns: 20px minmax(0, 1fr);
  }
  .recent-battle-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .battle-report-link { min-height: 44px; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 760px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(126, 99, 58, .17), transparent 38%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 40px 40px, 40px 40px, auto;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

button { font: inherit; }
[hidden] { display: none !important; }

.game-shell {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 18px 0 42px;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.eyebrow, .army-heading p {
  margin: 0 0 7px;
  color: var(--gold);
  font: 600 10px/1.2 Arial, sans-serif;
  letter-spacing: .24em;
}

h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .09em;
}
h1 small {
  margin-left: 7px;
  color: #837d70;
  font-size: 10px;
  font-weight: 400;
}

.subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.header-expedition {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 7px;
}
.header-route-settings {
  display: grid;
  flex: 1 1 650px;
  grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(112px, .8fr));
  gap: 7px;
}
.expedition-route-recommendation {
  grid-column: 1 / -1;
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 7px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(198, 160, 91, .36);
  color: #d7c7a5;
  background: rgba(104, 70, 31, .16);
  font-size: 11px;
}
.expedition-route-recommendation[hidden] { display: none; }
.expedition-route-recommendation span {
  color: #c9a45e;
  font-size: 9px;
  letter-spacing: .1em;
}
.expedition-route-recommendation strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.header-route-settings.is-objective-highlight {
  outline: 2px solid rgba(215, 178, 103, .75);
  outline-offset: 3px;
}
.header-route-field {
  display: grid;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 1px solid var(--line);
  align-content: center;
  gap: 3px;
  background: rgba(17,19,25,.8);
}
.header-route-field > span {
  color: #8c816b;
  font-size: 9px;
}
.header-route-field strong {
  overflow: hidden;
  color: #ddd2bb;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-route-field select {
  width: 100%;
  min-width: 0;
  min-height: 24px;
  padding: 0 25px 0 0;
  border: 0;
  color: #e0d4bd;
  background: #111319;
  font-size: 11px;
  cursor: pointer;
}
.header-route-field select:disabled {
  color: #8b877f;
  cursor: default;
}
.header-location {
  display: grid;
  align-content: center;
  min-width: 178px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: rgba(17,19,25,.8);
  text-align: right;
}
.header-location span {
  color: #8c816b;
  font-size: 9px;
}
.header-location span b {
  color: #b7aa8e;
  font-weight: 500;
}
.header-location strong {
  margin-top: 2px;
  font: 600 12px Arial, sans-serif;
}
.header-location small {
  margin-top: 3px;
  color: #858890;
  font-size: 8px;
  white-space: nowrap;
}

.display-settings-button {
  display: inline-flex;
  min-width: 104px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid #4e493f;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #c8b890;
  background: rgba(17, 19, 25, .88);
  cursor: pointer;
  white-space: nowrap;
}

.display-settings-label-short { display: none; }

.display-settings-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid #766343;
  color: var(--text);
  background: #111319;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .68);
}

.display-settings-dialog::backdrop {
  background: rgba(4, 5, 8, .72);
}

.display-settings-card {
  display: grid;
  gap: 16px;
  max-height: min(86dvh, 820px);
  overflow-y: auto;
  padding: 20px;
}
.display-settings-sections {
  display: grid;
  gap: 8px;
}
.display-settings-sections > details {
  border: 1px solid #34363d;
  background: rgba(8, 9, 12, .48);
}
.display-settings-sections > details > summary {
  padding: 12px 14px;
  color: #d7c69f;
  cursor: pointer;
  font-weight: 700;
}
.display-settings-sections .submission-setting {
  margin: 0;
  border-width: 1px 0 0;
}

.display-settings-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.display-settings-card header p,
.display-settings-card header h2 {
  margin: 0;
}

.display-settings-card header p {
  color: var(--gold);
  font: 700 9px/1.2 Arial, sans-serif;
  letter-spacing: .2em;
}

.display-settings-card header h2 {
  margin-top: 4px;
  font-size: 20px;
}

.display-settings-close {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #514b40;
  color: #d6c9aa;
  background: #181a20;
  cursor: pointer;
}

.display-settings-description,
.reduced-motion-notice {
  margin: 0;
  color: #bcb7ad;
  font-size: 12px;
  line-height: 1.7;
}

.reduced-motion-notice {
  padding: 8px 10px;
  border-left: 3px solid #8d76a8;
  background: rgba(105, 75, 133, .16);
}

.language-options,
.visual-effects-options {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.language-options legend,
.visual-effects-options legend {
  margin-bottom: 8px;
  color: #d5c7a7;
  font-size: 12px;
}

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

.language-options legend {
  grid-column: 1 / -1;
}

.language-options label,
.visual-effects-options label {
  display: grid;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #3d3b38;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: rgba(22, 23, 28, .9);
  cursor: pointer;
}

.language-options label:has(input:checked),
.visual-effects-options label:has(input:checked) {
  border-color: #b3945e;
  background: rgba(81, 65, 39, .28);
  box-shadow: inset 3px 0 #c6a56d;
}

.language-options input,
.visual-effects-options input {
  width: 20px;
  height: 20px;
  accent-color: #c4a469;
}

.language-options span,
.visual-effects-options span {
  display: grid;
  gap: 3px;
}

.language-options span { color: #e1d5bd; }
.visual-effects-options strong { color: #e1d5bd; }
.visual-effects-options small { color: #8f8c85; }
.visual-effects-options em {
  padding: 3px 6px;
  color: #191710;
  background: #c9aa70;
  font: 700 9px/1 Arial, sans-serif;
  font-style: normal;
}

.display-settings-done {
  min-height: 44px;
  border: 1px solid #776344;
  color: #ead7aa;
  background: #282117;
  cursor: pointer;
}

.battle-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aaa9a5;
  border: 1px solid var(--line);
  background: rgba(17,19,25,.8);
  padding: 9px 14px;
  font-size: 12px;
  letter-spacing: .08em;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #565a61;
  box-shadow: 0 0 0 3px rgba(86,90,97,.15);
}

.battle-status.active .status-dot {
  background: var(--blood-bright);
  box-shadow: 0 0 10px var(--blood-bright);
  animation: pulse 1s infinite;
}
.battle-status.paused {
  color: #d2bd87;
  border-color: #665b42;
}
.battle-status.paused .status-dot {
  background: #d0a954;
  box-shadow: 0 0 9px rgba(208,169,84,.55);
}
.expedition-toggle-button {
  display: inline-flex;
  min-width: 118px;
  padding: 0 14px;
  border: 1px solid #706044;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gold-bright);
  background: rgba(28,25,20,.92);
  cursor: pointer;
  font: 700 12px Arial, sans-serif;
  white-space: nowrap;
}
.expedition-toggle-button > span:first-child { font-size: 15px; }
.expedition-toggle-button:hover { filter: brightness(1.2); }

.expedition-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1px;
  margin-top: 12px;
}
.expedition-bar div {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 112px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: rgba(17,19,25,.76);
}
.expedition-bar span {
  color: #6f727a;
  font-size: 9px;
  letter-spacing: .14em;
}
.expedition-bar strong {
  color: #c2bba9;
  font: 600 12px Arial, sans-serif;
}
.expedition-bar .zone-info { min-width: 205px; }
.expedition-bar .zone-info strong { color: #d1c29d; }
.expedition-bar .clear-record strong { color: #8f8b82; }
.expedition-bar .clear-record strong:not(:empty) { letter-spacing: .05em; }

.commander-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding: 10px 13px;
  border: 1px solid #343640;
  background: linear-gradient(90deg, rgba(23,25,31,.9), rgba(13,15,20,.82));
}
.commander-status-bar > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.commander-status-bar span {
  color: #777b84;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .2em;
}
.commander-status-bar strong {
  color: #d0c5a9;
  font-size: 12px;
  letter-spacing: .07em;
}
.commander-status-bar small {
  overflow: hidden;
  color: #898b91;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commander-status-bar button:disabled { opacity: .35; cursor: not-allowed; }

.battlefield {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 58px 1fr;
  gap: 18px;
  align-items: center;
  padding: 28px 18px;
  border: 1px solid #282c34;
  background: #0d1015;
  transition: background .7s ease, border-color .7s ease;
}
.battlefield > * {
  position: relative;
  z-index: 1;
}
.battle-captain-focus { align-self: start; }
.battle-captain-focus-portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
}
.battle-captain-focus-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.battlefield.paused > * { opacity: .56; }
.battlefield.paused::after {
  z-index: 2;
  opacity: .38 !important;
  background: #08090c !important;
  filter: none !important;
}
.battlefield::before,
.battlefield::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.battlefield::before { inset: 0; opacity: .52; }
.battlefield::after { inset: 0; opacity: .28; }

.battlefield.zone-catacombs {
  border-color: #35404a;
  background:
    radial-gradient(circle at 50% 110%, rgba(92,118,130,.20), transparent 48%),
    linear-gradient(145deg, #11161b, #171b20 48%, #0b0f13);
}
.battlefield.zone-catacombs::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(111,128,136,.07) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(111,128,136,.05) 93px 95px);
}
.battlefield.zone-catacombs::after {
  background:
    radial-gradient(ellipse at 22% 82%, rgba(158,181,187,.22), transparent 34%),
    radial-gradient(ellipse at 75% 72%, rgba(106,132,143,.17), transparent 38%);
  filter: blur(14px);
}

.battlefield.zone-beast-trail {
  border-color: #4a282d;
  background:
    radial-gradient(circle at 70% 30%, rgba(100,24,28,.22), transparent 36%),
    linear-gradient(140deg, #160c0e, #211013 50%, #09090b);
}
.battlefield.zone-beast-trail::before {
  inset: -20%;
  background:
    repeating-linear-gradient(112deg, transparent 0 70px, rgba(160,54,57,.10) 71px 73px, transparent 74px 93px);
  transform: rotate(-4deg);
}
.battlefield.zone-beast-trail::after {
  background:
    linear-gradient(103deg, transparent 38%, rgba(178,55,58,.16) 39% 40%, transparent 41%),
    linear-gradient(108deg, transparent 55%, rgba(178,55,58,.12) 56% 57%, transparent 58%);
}

.battlefield.zone-magic-tower {
  border-color: #493968;
  background:
    radial-gradient(circle at 50% 45%, rgba(91,56,145,.25), transparent 42%),
    linear-gradient(145deg, #0d0c1b, #17132b 52%, #080a13);
}
.battlefield.zone-magic-tower::before {
  background:
    linear-gradient(60deg, transparent 47%, rgba(142,105,206,.09) 48% 50%, transparent 51%),
    linear-gradient(-60deg, transparent 47%, rgba(88,124,187,.07) 48% 50%, transparent 51%);
  background-size: 76px 76px;
}
.battlefield.zone-magic-tower::after {
  background-image:
    radial-gradient(circle at 12% 28%, rgba(200,176,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 18%, rgba(139,181,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 78%, rgba(178,130,242,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 70%, rgba(200,176,255,.55) 0 1px, transparent 2px);
  animation: zone-particles 5s ease-in-out infinite alternate;
}

.battlefield.zone-black-ash {
  border-color: #59514d;
  background:
    radial-gradient(circle at 48% 80%, rgba(151, 102, 69, .13), transparent 44%),
    linear-gradient(145deg, #121110, #201c19 48%, #090a0b);
}
.battlefield.zone-black-ash::before {
  background:
    repeating-linear-gradient(118deg, transparent 0 58px, rgba(195, 174, 151, .06) 59px 61px),
    radial-gradient(circle at 18% 24%, rgba(191, 179, 165, .18) 0 1px, transparent 2px);
  background-size: auto, 42px 42px;
}
.battlefield.zone-black-ash::after {
  background: linear-gradient(90deg, transparent, rgba(95, 82, 72, .22), transparent);
  filter: blur(12px);
}

.battlefield.zone-royal-remains {
  border-color: #69494f;
  background:
    radial-gradient(circle at 50% 32%, rgba(128, 39, 58, .20), transparent 40%),
    linear-gradient(145deg, #100b10, #211018 52%, #08070b);
}
.battlefield.zone-royal-remains::before {
  background:
    linear-gradient(60deg, transparent 48%, rgba(190, 116, 130, .08) 49% 50%, transparent 51%),
    linear-gradient(-60deg, transparent 48%, rgba(139, 91, 162, .08) 49% 50%, transparent 51%);
  background-size: 88px 88px;
}

.battlefield.zone-deep-hive {
  background:
    radial-gradient(circle at 18% 28%, rgba(190, 142, 49, 0.16), transparent 34%),
    linear-gradient(145deg, #14130e 0%, #27200f 52%, #0c0b08 100%);
}

.battlefield.zone-verdant-abyss {
  background:
    radial-gradient(circle at 70% 22%, rgba(77, 146, 76, 0.18), transparent 38%),
    linear-gradient(145deg, #0b120d 0%, #152a19 54%, #080b09 100%);
}

.battlefield.zone-primordial-ooze {
  background:
    radial-gradient(circle at 26% 70%, rgba(93, 183, 168, 0.17), transparent 36%),
    linear-gradient(145deg, #091211 0%, #102b28 52%, #070a0a 100%);
}

.battlefield.zone-thousand-tendrils {
  background:
    radial-gradient(circle at 74% 26%, rgba(124, 67, 164, 0.20), transparent 40%),
    linear-gradient(145deg, #0e0914 0%, #21102c 55%, #08070a 100%);
}

.facility-card.locked {
  opacity: 0.62;
  border-style: dashed;
}

.deep-trait-list {
  margin: 8px 0 0;
  color: #e4bd81;
  font-size: .72rem;
  letter-spacing: .08em;
}

.troop-label.manpower-warning {
  color: #ef9b75;
  font-weight: 700;
}

.army-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(24,27,34,.96), rgba(13,15,20,.96));
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.army-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}

.army-mark { color: var(--gold); font-size: 12px; }
.enemy-army .army-mark, .enemy-army .army-heading p { color: #9b7bc9; }
.army-heading p { margin-bottom: 3px; }
.army-heading h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.army-heading > strong { color: var(--muted); font: 600 12px Arial, sans-serif; }

.unit-list { padding: 10px; }

.unit-card {
  --skill-color: 211, 179, 109;
  position: relative;
  margin-bottom: 8px;
  padding: 13px 15px 14px;
  border: 1px solid #292d35;
  border-left: 3px solid var(--gold);
  background: rgba(8,9,12,.48);
  transition: opacity .25s, transform .18s, border-color .18s;
}

.enemy-army .unit-card {
  --skill-color: 174, 135, 223;
  border-left-color: var(--enemy);
}
.unit-card:last-child { margin-bottom: 0; }
.player-army .unit-card.attacking { animation: player-attack .3s ease-out; }
.enemy-army .unit-card.attacking { animation: enemy-attack .3s ease-out; }
.unit-card.hit {
  animation: damaged .32s ease-out;
  border-color: #f35a65;
}
.unit-card.skill-activating {
  z-index: 4;
  animation: skill-card-cast .65s ease-out;
}
.unit-card.skill-hit {
  z-index: 3;
  animation: skill-damaged .6s ease-out;
}
.skill-name-burst {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  min-width: 120px;
  padding: 5px 12px;
  transform: translate(-50%, -50%);
  border-top: 1px solid rgba(var(--skill-color), .8);
  border-bottom: 1px solid rgba(var(--skill-color), .8);
  color: rgb(var(--skill-color));
  background: rgba(7,8,11,.9);
  box-shadow: 0 0 18px rgba(var(--skill-color), .3);
  font-size: 13px;
  letter-spacing: .16em;
  text-align: center;
  pointer-events: none;
  animation: skill-name-burst .8s ease-out both;
}
.unit-card.defeated { opacity: .38; filter: grayscale(.7); }
.unit-card.frontline-card { border-left-width: 4px; }
.company-label {
  margin: 7px 0 2px;
  color: #8d7e60;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .16em;
}
.captain-label,
.troop-label {
  margin: 5px 0 0;
  color: #92949b;
  font-size: 9px;
}
.captain-label { color: #c4ad7b; }
.player-army .unit-card.has-captain {
  min-height: 210px;
  padding-left: 162px;
}
.captain-portrait-panel {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  width: 132px;
  text-align: center;
}
.captain-card-hero {
  display: contents;
}
.captain-portrait-frame {
  position: relative;
  display: block;
  width: 128px;
  height: 164px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(211,179,109,.42);
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(211,179,109,.18), transparent 44%),
    linear-gradient(145deg, #25262d, #111319);
  box-shadow: 0 0 14px rgba(0,0,0,.45);
  cursor: pointer;
}
.captain-portrait {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--battle-portrait-position, 50% 18%);
  transform-origin: var(--battle-portrait-position, 50% 18%);
  transform:
    translateY(var(--battle-portrait-offset-y, 0%))
    scale(var(--battle-portrait-scale, 1));
}
.captain-portrait-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8c28f;
  font: 600 27px Georgia, serif;
  text-shadow: 0 0 14px rgba(211,179,109,.45);
}
.captain-portrait-name {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 24px 7px 7px;
  overflow: hidden;
  color: #f1e6cd;
  background: linear-gradient(transparent, rgba(4, 5, 8, .92));
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
  text-shadow: 0 1px 2px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.captain-state-summary {
  display: none;
}
.captain-speech-bubble {
  position: absolute;
  z-index: 9;
  top: -4px;
  left: 140px;
  width: max-content;
  max-width: min(240px, calc(50vw - 100px));
  padding: 9px 12px;
  border: 1px solid rgba(211,179,109,.54);
  border-radius: 4px;
  color: #e3ded2;
  background: rgba(13,14,18,.96);
  box-shadow: 0 7px 22px rgba(0,0,0,.42), 0 0 13px rgba(211,179,109,.12);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .03em;
  text-align: left;
  pointer-events: none;
}

.captain-state-sheet {
  position: fixed;
  z-index: 62;
  right: 14px;
  bottom: 14px;
  display: block;
  width: min(560px, calc(100vw - 28px));
  max-width: 100%;
  pointer-events: none;
}

.captain-state-sheet[hidden] {
  display: none;
}

.captain-state-sheet-card {
  display: grid;
  width: 100%;
  max-height: min(72dvh, 720px);
  overflow: hidden;
  border: 1px solid rgba(211, 179, 109, .55);
  border-radius: 10px;
  grid-template-rows: auto minmax(0, 1fr);
  color: #e8dfcf;
  background: #101319;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .72);
  pointer-events: auto;
}

.captain-state-sheet-card > header {
  display: grid;
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(211, 179, 109, .22);
}

.captain-state-sheet-card > header p {
  margin: 0 0 2px;
  color: #a88c5d;
  font: 700 8px/1.2 Arial, sans-serif;
  letter-spacing: .15em;
}

.captain-state-sheet-card > header h2 {
  margin: 0;
  font-size: 18px;
}

.captain-state-sheet-card > header button {
  width: 44px;
  min-height: 44px;
  border: 0;
  color: #eee3ca;
  background: transparent;
  font-size: 25px;
}

.captain-state-sheet-navigation {
  display: grid;
  grid-template-columns: 44px minmax(42px, auto) 44px;
  align-items: center;
  gap: 2px;
}

.captain-state-sheet-navigation[hidden] {
  display: none;
}

.captain-state-sheet-navigation span {
  color: #c9b58b;
  font: 700 11px/1.2 Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
}

.captain-state-sheet-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  overscroll-behavior: contain;
}

.captain-state-sheet-body-status {
  display: block;
}

.captain-state-sheet-normal {
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid rgba(211, 179, 109, .2);
  color: #cfc4ae;
  background: rgba(211, 179, 109, .06);
}

.captain-speech-bubble::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -7px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  border-bottom: 1px solid rgba(211,179,109,.54);
  border-left: 1px solid rgba(211,179,109,.54);
  background: rgba(13,14,18,.96);
}
.captain-speech-bubble.speech-showing {
  animation: captain-speech-pop .22s ease-out both;
}
.captain-speech-bubble.speech-hiding {
  animation: captain-speech-fade .18s ease-in both;
}
.captain-speech-bubble.speech-important {
  border-color: rgba(226,190,111,.82);
  color: #fff4d5;
  box-shadow: 0 7px 24px rgba(0,0,0,.46), 0 0 18px rgba(211,179,109,.25);
}
.guard-badge {
  position: static;
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(211,179,109,.45);
  color: #c9b784;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .1em;
}
.combat-reaction-label {
  position: absolute;
  z-index: 8;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  font: 800 11px Arial, sans-serif;
  letter-spacing: .12em;
  white-space: nowrap;
  pointer-events: none;
  animation: combat-reaction-label .65s ease-out both;
}
.reaction-label-critical { color: #ffd67c; text-shadow: 0 0 11px rgba(255,188,68,.95); }
.reaction-label-evade { color: #d9e9f3; text-shadow: 0 0 10px rgba(161,217,245,.75); }
.reaction-label-block,
.reaction-label-guard { color: #ead69f; text-shadow: 0 0 10px rgba(211,179,109,.8); }
.reaction-label-parry { color: #f4f7e8; text-shadow: 0 0 12px rgba(223,240,199,.9); }
.reaction-label-counter { color: #f5a46e; text-shadow: 0 0 12px rgba(236,95,45,.9); }
.reaction-label-shield-break {
  top: 7px;
  color: #9eeaff;
  font-size: 12px;
  text-shadow: 0 0 14px rgba(78,198,235,.95);
  animation-duration: .85s;
}
.reaction-label-guard {
  top: 11px;
  left: auto;
  right: 12px;
  transform: none;
  font-size: 8px;
  animation-name: guard-reaction-label;
}
.boss-unit-card .combat-reaction-label { top: 12px; font-size: 13px; }
.damage-number {
  position: absolute;
  z-index: 7;
  top: 42%;
  right: 16px;
  color: #f0a1a8;
  font: 800 13px Arial, sans-serif;
  text-shadow: 0 0 8px rgba(223,69,82,.75);
  pointer-events: none;
  animation: damage-number .65s ease-out both;
}
.damage-critical { color: #ffd27a; font-size: 17px; text-shadow: 0 0 11px rgba(255,177,45,.9); }
.damage-block { color: #c9b98d; font-size: 11px; }
.damage-normal,
.damage-critical,
.damage-block,
.damage-counter { top: 54%; }
.damage-shield {
  top: 35%;
  color: #8ce1f1;
  font-size: 10px;
  text-shadow: 0 0 9px rgba(69,190,220,.85);
}
.damage-counter { color: #ff9a67; font-size: 14px; text-shadow: 0 0 10px rgba(235,83,42,.85); }
.unit-card.reaction-critical { z-index: 6; animation: reaction-critical .65s ease-out; }
.unit-card.reaction-critical-hit { z-index: 5; animation: reaction-critical-hit .65s ease-out; }
.unit-card.reaction-evade { z-index: 6; animation: reaction-evade .65s ease-out; }
.unit-card.reaction-block { z-index: 5; animation: reaction-block .65s ease-out; }
.unit-card.reaction-guard { z-index: 4; animation: reaction-guard .65s ease-out; }
.player-army .unit-card.reaction-parry { z-index: 6; animation: reaction-parry-player .65s ease-out; }
.enemy-army .unit-card.reaction-parry { z-index: 6; animation: reaction-parry-enemy .65s ease-out; }
.unit-card.reaction-counter { z-index: 6; animation: reaction-counter .65s ease-out; }
.unit-card.reaction-shield-break {
  z-index: 7;
  animation: reaction-shield-break .85s ease-out;
}
.unit-card.reaction-shield-break::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 8px;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 45%, rgba(159,234,255,.85) 48%, transparent 51%) 20% 35% / 24px 20px no-repeat,
    linear-gradient(55deg, transparent 44%, rgba(159,234,255,.7) 48%, transparent 52%) 70% 60% / 30px 24px no-repeat,
    radial-gradient(circle, rgba(196,245,255,.9) 0 2px, transparent 3px) 82% 28% / 18px 18px no-repeat;
  animation: shield-fragments .85s ease-out both;
}
.boss-unit-card.reaction-shield-break {
  animation-name: boss-shield-break;
  box-shadow: 0 0 30px rgba(114,211,242,.4);
}
.unit-card.boss-unit-card {
  min-height: 188px;
  padding: 20px 19px;
  border: 1px solid #7953a2;
  border-left: 5px solid #a06ed0;
  background: linear-gradient(135deg, rgba(88,48,111,.24), rgba(8,9,12,.62));
  box-shadow: inset 0 0 30px rgba(120,89,168,.12), 0 0 22px rgba(120,89,168,.14);
}
.unit-card.boss-blood-moon {
  --skill-color: 206, 63, 70;
  border-color: #8d3e47;
  box-shadow: 0 0 25px rgba(144,35,45,.24), inset 0 0 20px rgba(119,28,36,.12);
}
.unit-card.boss-final {
  --skill-color: 177, 117, 238;
  border-color: #8b62ba;
  box-shadow: 0 0 32px rgba(135,82,194,.33), inset 0 0 25px rgba(91,55,145,.18);
  animation: final-boss-aura 2.8s ease-in-out infinite;
}
.boss-unit-card .unit-role { color: #c19be6; }
.boss-unit-card .unit-name { margin-top: 13px; font-size: 23px; }
.boss-skill-name {
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(174,135,223,.25);
  color: #a98acb;
  font-size: 10px;
  letter-spacing: .12em;
}

.unit-topline {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 3px 8px;
}
.unit-role {
  min-width: 0;
  flex: 1 1 92px;
  overflow-wrap: anywhere;
  color: var(--gold);
  font: 700 10px Arial, sans-serif;
  letter-spacing: .18em;
}
.unit-level {
  margin-left: auto;
  margin-right: 0;
  flex: 0 0 auto;
  color: #a8a49a;
  font: 600 10px Arial, sans-serif;
  letter-spacing: .08em;
}
.enemy-army .unit-role { color: #a589ce; }
.unit-state {
  flex: 0 1 auto;
  color: #70737b;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.unit-card.defeated .unit-state { color: var(--blood-bright); }
.unit-name { margin: 5px 0 11px; font-size: 17px; font-weight: 500; letter-spacing: .06em; }
.hp-label { display: flex; justify-content: space-between; color: #a6a5a1; font: 10px Arial, sans-serif; }
.hp-label strong { color: #c9c6be; font-size: 11px; }
.hp-track { height: 5px; margin-top: 6px; overflow: hidden; background: #282b31; }
.hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7d2029, var(--blood-bright));
  transition: width .3s ease;
}
.enemy-army .hp-fill { background: linear-gradient(90deg, #533478, #9a70cf); }
.shield-row { margin-bottom: 8px; }
.shield-label {
  display: flex;
  justify-content: space-between;
  color: #6397a3;
  font: 8px Arial, sans-serif;
  letter-spacing: .08em;
}
.shield-label strong { color: #9bcbd4; font-size: 9px; }
.shield-track {
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid rgba(95,174,194,.18);
  background: #1a262b;
}
.shield-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #35758a, #89d8e8);
  box-shadow: 0 0 8px rgba(105,214,236,.45);
  transition: width .25s ease;
}
.unit-card.shielded-card:not(.shield-broken) {
  box-shadow: inset 0 0 14px rgba(77,176,201,.06);
}
.unit-card.shield-broken .shield-label { color: #566368; }
.unit-card.shield-broken .shield-label strong { color: #68777b; }
.unit-card.shield-broken .shield-track { border-color: transparent; }
.unit-card.reaction-shield-break .shield-track {
  animation: shield-bar-break .85s ease-out;
}

.stats { display: flex; gap: 22px; margin-top: 12px; }
.stats div { display: flex; gap: 7px; align-items: baseline; }
.stats span { color: #73767e; font-size: 10px; }
.stats strong { font: 600 13px Arial, sans-serif; }

.versus { display: flex; align-items: center; gap: 8px; color: #666971; }
.versus span { flex: 1; height: 1px; background: #353840; }
.versus b { color: var(--gold); font: 500 13px Georgia, serif; }

.command-deck {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: rgba(15,17,22,.92);
}

.battle-log-wrap {
  border-top: 1px solid var(--line);
  background: rgba(11,13,17,.96);
}
.battle-log-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  padding: 9px 18px;
  color: #8e8d89;
  background: rgba(11,13,17,.96);
  font: 10px Arial, sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
}
.battle-log-toggle:hover,
.battle-log-toggle:focus-visible {
  color: #d5c49c;
  background: rgba(34,31,25,.55);
}
.battle-log-toggle b { color: var(--gold); font-size: 12px; }
.battle-record-panel {
  padding: 13px 18px;
  background: rgba(15,17,22,.97);
}
.log-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #272a31; padding-bottom: 10px; }
.log-heading h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .13em; }
.log-heading span { color: #696c73; font: 10px Arial, sans-serif; letter-spacing: .12em; }
.battle-log {
  height: 124px;
  margin: 9px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  color: #93928e;
  font-size: 11px;
  line-height: 1.8;
}
.battle-log li::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  margin: 0 9px 0 2px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.battle-log li.latest { color: #d2cec5; }
.battle-log li.skill-log {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin: 4px 0;
  padding: 5px 8px;
  border-left: 2px solid var(--gold);
  color: #e0d5bd;
  background: rgba(185,150,85,.09);
  line-height: 1.45;
}
.battle-log li.skill-log::before { content: none; }
.battle-log li.skill-log strong {
  color: var(--gold-bright);
  font-size: 10px;
}
.battle-log li.skill-log span { letter-spacing: .04em; }

.controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 18px; }
.result-text { flex: 1 1 240px; min-height: 22px; margin: 0; color: #b7b3aa; font-size: 13px; letter-spacing: .06em; }
.result-text.victory { color: var(--gold-bright); font-size: 19px; }
.result-text.defeat { color: var(--blood-bright); font-size: 19px; }

.primary-button, .secondary-button {
  width: 190px;
  border: 1px solid #cfaa63;
  padding: 12px 18px;
  cursor: pointer;
  color: #111;
  background: linear-gradient(#d2b36f, #a98646);
  letter-spacing: .16em;
  transition: filter .2s, transform .1s;
}
.secondary-button { color: #ddd7cc; background: transparent; border-color: #6b665d; }
.secondary-button.danger-button {
  color: #e3b6b0;
  border-color: #7d423d;
  background: rgba(83, 24, 20, .18);
}
.primary-button:hover, .secondary-button:hover { filter: brightness(1.15); }
.primary-button:active, .secondary-button:active { transform: translateY(1px); }
.primary-button:disabled, .secondary-button:disabled {
  cursor: default;
  filter: grayscale(.7);
  opacity: .55;
}
.control-note { margin: 10px 0 0; color: #64666c; font-size: 10px; }

.battle-log li.battle-divider {
  margin: 5px 0;
  color: #a58d60;
  letter-spacing: .08em;
  text-align: center;
}
.battle-log li.battle-divider::before { content: none; }

.expedition-summary {
  margin-top: 18px;
  padding: 28px 32px 30px;
  border: 1px solid #3c372e;
  background: linear-gradient(145deg, rgba(25,23,22,.98), rgba(12,14,18,.98));
  box-shadow: 0 20px 55px rgba(0,0,0,.3);
  text-align: center;
  animation: capture-enter .45s ease-out;
}
.expedition-summary .capture-result { margin-top: 0; }
.expedition-summary h2 {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .14em;
}
.summary-defeat-detail {
  margin: -12px 0 20px;
  color: #b77984;
  font-size: 13px;
  letter-spacing: .12em;
}
.summary-clear-detail {
  margin: 12px auto 18px;
  color: var(--gold-bright);
  text-shadow: 0 0 15px rgba(211,179,109,.4);
  font-size: 15px;
  letter-spacing: .12em;
}
.expedition-summary-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: min(900px, 100%);
  margin: 0 auto 20px;
  border: 1px solid var(--line);
}
.expedition-summary-stats div {
  padding: 14px;
  border-right: 1px solid var(--line);
}
.expedition-summary-stats div:last-child { border-right: 0; }
.expedition-summary-stats span {
  display: block;
  margin-bottom: 7px;
  color: #73767e;
  font-size: 9px;
  letter-spacing: .15em;
}
.expedition-summary-stats strong {
  color: var(--gold-bright);
  font: 600 16px Arial, sans-serif;
}
.expedition-new-contracts {
  width: min(520px, 100%);
  margin: 0 auto 22px;
  padding: 13px 16px;
  background: rgba(8,9,12,.45);
  text-align: left;
}
.expedition-new-contracts h3 {
  margin: 0 0 8px;
  color: #878278;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
}
.expedition-new-contracts ul { margin: 0; padding: 0; list-style: none; }
.expedition-new-contracts li {
  color: #c9bea5;
  font-size: 12px;
  line-height: 1.8;
}
.expedition-new-contracts li::before { content: "◆"; margin-right: 8px; color: var(--gold); font-size: 7px; }
.expedition-new-contracts li.empty { color: #686a70; }
.expedition-new-contracts li.empty::before { content: "—"; }
.post-expedition-comment {
  display: flex;
  width: min(520px, 100%);
  align-items: center;
  gap: 15px;
  margin: 0 auto 16px;
  padding: 13px 15px;
  border: 1px solid rgba(185,150,85,.26);
  background: linear-gradient(90deg, rgba(185,150,85,.08), rgba(8,9,12,.5));
  text-align: left;
}
.post-expedition-portrait,
.captain-event-portrait {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(211,179,109,.4);
  background: linear-gradient(145deg, #26272e, #101217);
}
.post-expedition-portrait {
  width: 76px;
  height: 94px;
}
.captain-event-portrait {
  width: 90px;
  height: 110px;
}
.post-expedition-portrait img,
.captain-event-portrait img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.post-expedition-portrait span,
.captain-event-portrait span {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8c28f;
  font: 600 24px Georgia, serif;
}
.post-expedition-comment > div:last-child > span {
  display: block;
  color: #746e62;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .18em;
}
.post-expedition-comment strong {
  display: block;
  margin-top: 4px;
  color: #d4c18f;
  font-size: 12px;
  font-weight: 500;
}
.post-expedition-comment p {
  margin: 7px 0 0;
  color: #c9c4b9;
  font-size: 12px;
}
.captain-event-prompt {
  display: flex;
  width: min(620px, 100%);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto 20px;
  padding: 12px 15px;
  border: 1px solid #594b37;
  background: rgba(20,18,17,.75);
  text-align: left;
}
.captain-event-prompt span {
  display: block;
  color: var(--gold);
  font: 700 8px Arial, sans-serif;
  letter-spacing: .2em;
}
.captain-event-prompt strong {
  display: block;
  margin-top: 5px;
  color: #d7caa9;
  font-size: 12px;
  font-weight: 500;
}
.captain-event-prompt > div:last-child { display: flex; gap: 7px; }
.expedition-summary-actions { display: flex; justify-content: center; gap: 9px; }
.battle-report-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 30px auto;
  padding: 28px clamp(18px, 5vw, 44px);
  border: 1px solid rgba(185, 150, 85, .3);
  background: rgba(18, 16, 14, .66);
  text-align: center;
}
.battle-report-empty-state[hidden] { display: none; }
.battle-report-empty-state h3 {
  margin: 0;
  color: #e1d3b0;
  font-size: 20px;
}
.battle-report-empty-state p {
  margin: 0;
  color: #cbbf9f;
  font-size: 14px;
}
.battle-report-empty-state small {
  color: #988f7b;
  font-size: 12px;
  line-height: 1.7;
}
.battle-report-empty-state button {
  min-width: min(100%, 220px);
  min-height: 44px;
  margin-top: 8px;
}
.expedition-summary.is-empty > :not(
  .capture-result,
  #expedition-summary-title,
  .battle-report-empty-state
) {
  display: none !important;
}

.contract-toast {
  position: fixed;
  z-index: 90;
  top: 24px;
  left: 50%;
  min-width: 270px;
  padding: 12px 20px;
  transform: translateX(-50%);
  border: 1px solid rgba(211,179,109,.62);
  color: #e3d3ad;
  background: rgba(18,16,14,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.36), 0 0 18px rgba(185,150,85,.12);
  font-size: 12px;
  letter-spacing: .11em;
  text-align: center;
  pointer-events: none;
}
.contract-toast.show { animation: top-notice-in .24s ease-out both; }
.contract-toast strong,
.contract-toast span {
  display: block;
}
.contract-toast strong {
  color: var(--gold-bright);
  font-size: 13px;
  letter-spacing: .16em;
}
.contract-toast span {
  margin-top: 5px;
  color: #d7caa9;
  font-size: 11px;
  letter-spacing: .05em;
}
.contract-toast.new-submission {
  border-color: rgba(224, 197, 122, .9);
  box-shadow: 0 12px 36px rgba(0,0,0,.48), 0 0 30px rgba(211,179,109,.25);
}

.floor-arrival {
  position: fixed;
  z-index: 80;
  top: max(
    var(--battle-announcement-top, 108px),
    calc(env(safe-area-inset-top, 0px) + 8px)
  );
  left: 50%;
  min-width: 190px;
  padding: 9px 20px;
  transform: translateX(-50%);
  border-top: 1px solid rgba(211,179,109,.48);
  border-bottom: 1px solid rgba(211,179,109,.48);
  color: #d5c59f;
  background: linear-gradient(90deg, transparent, rgba(15,14,13,.92), transparent);
  font-size: 18px;
  letter-spacing: .18em;
  text-align: center;
  pointer-events: none;
}
.floor-arrival.show { animation: top-notice-in .24s ease-out both; }
.floor-arrival.boss-arrival {
  min-width: 390px;
  border-color: rgba(174,135,223,.7);
  color: #c9a7e7;
  background: linear-gradient(90deg, transparent, rgba(44,24,55,.94), transparent);
  box-shadow: 0 0 22px rgba(120,89,168,.18);
}
.floor-arrival.zone-transition {
  border-color: #796a4c;
  color: #e1d0a9;
  background: linear-gradient(90deg, rgba(19,19,23,.96), rgba(68,52,32,.96), rgba(19,19,23,.96));
  box-shadow: 0 0 22px rgba(185,150,85,.2);
}

.capture-screen {
  width: min(620px, 100%);
  margin: 42px auto 0;
  padding: 38px 50px 42px;
  border: 1px solid #3a342b;
  background:
    linear-gradient(145deg, rgba(28,25,24,.98), rgba(12,13,17,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(211,179,109,.08);
  text-align: center;
  animation: capture-enter .55s ease-out;
}

.capture-ornament {
  color: var(--gold);
  font-size: 13px;
  text-shadow: 0 0 14px rgba(211,179,109,.5);
}

.capture-result {
  margin: 15px 0 5px;
  color: var(--gold);
  font: 600 10px Arial, sans-serif;
  letter-spacing: .32em;
}

.capture-screen h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .12em;
}

.capture-lead {
  margin: 11px 0 25px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
}

.capture-targets {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  text-align: left;
}

.capture-targets legend {
  padding: 0 10px;
  color: #817b70;
  font-size: 11px;
  letter-spacing: .15em;
}

.capture-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 11px;
  margin-bottom: 7px;
  padding: 12px 14px;
  border: 1px solid #292d35;
  background: rgba(8,9,12,.5);
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}

.capture-option:last-child { margin-bottom: 0; }
.capture-option:hover { border-color: #615542; background: rgba(185,150,85,.055); }
.capture-option:has(input:checked) {
  transform: translateX(4px);
  border-color: var(--gold);
  background: rgba(185,150,85,.11);
}
.capture-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.capture-marker {
  width: 12px;
  height: 12px;
  border: 1px solid #68645d;
  border-radius: 50%;
}
.capture-option input:checked + .capture-marker {
  border-color: var(--gold-bright);
  background: var(--gold);
  box-shadow: inset 0 0 0 3px #171719, 0 0 10px rgba(211,179,109,.45);
}
.capture-unit { display: flex; align-items: center; gap: 14px; }
.capture-unit small {
  width: 40px;
  color: #9b7bc9;
  font: 700 9px Arial, sans-serif;
  letter-spacing: .15em;
}
.capture-unit strong {
  min-width: 126px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
}
.capture-unit > span {
  color: #81758f;
  font-size: 10px;
  letter-spacing: .06em;
}
.capture-unit b {
  margin-left: auto;
  color: var(--gold-bright);
  font: 600 10px Arial, sans-serif;
  white-space: nowrap;
}

.capture-message {
  min-height: 27px;
  margin: 18px 0 11px;
  color: var(--muted);
  font-size: 14px;
}
.capture-message.success {
  color: var(--gold-bright);
  font-size: 20px;
  letter-spacing: .1em;
  animation: captured .55s ease-out;
}
.capture-message.attempting {
  color: #aaa397;
  letter-spacing: .13em;
  animation: pulse 1s infinite;
}
.capture-message.failure {
  color: #a87380;
  font-size: 18px;
  letter-spacing: .08em;
}
.capture-screen.capture-failed { animation: capture-failure .38s ease-out; }
.capture-actions {
  display: flex;
  min-height: 43px;
  justify-content: center;
  gap: 10px;
}
.wide-button { width: 210px; }

.owned-army-screen {
  margin-top: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(24,27,34,.97), rgba(12,14,18,.97));
  box-shadow: 0 22px 60px rgba(0,0,0,.3);
  animation: capture-enter .45s ease-out;
}

.formation-screen {
  margin-top: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(24,27,34,.97), rgba(12,14,18,.97));
  box-shadow: 0 22px 60px rgba(0,0,0,.3);
  animation: capture-enter .45s ease-out;
}

.owned-army-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
.owned-army-heading .capture-result { margin-top: 0; }
.owned-army-heading h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .12em;
}
.owned-army-heading p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
}
.owned-army-heading > strong {
  color: var(--gold-bright);
  font: 500 14px Arial, sans-serif;
  letter-spacing: .12em;
}
.owned-resource-summary { text-align: right; }
.owned-resource-summary > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-bright);
  font: 500 14px Arial, sans-serif;
  letter-spacing: .12em;
}
.owned-resource-summary span {
  color: #8d887e;
  font-size: 10px;
  letter-spacing: .1em;
}
.owned-resource-summary b {
  margin-left: 7px;
  color: #d5c18f;
  font: 700 14px Arial, sans-serif;
}
.level-up-message {
  min-height: 18px;
  margin: 10px 24px 0;
  color: #b7a36f;
  font-size: 11px;
  letter-spacing: .08em;
  text-align: right;
}

.owned-unit-list {
  padding: 14px;
}

.owned-army-filter {
  display: grid;
  margin: 12px 14px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.owned-army-view {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 14px 0;
}
.owned-army-view button {
  min-width: 0;
  min-height: 40px;
  border: 1px solid #34363d;
  color: #99958d;
  background: rgba(8, 9, 12, .6);
  cursor: pointer;
}
.owned-army-view-label-compact { display: none; }
.owned-army-view button[aria-pressed="true"] {
  border-color: #8d7447;
  color: #ead7a9;
  background: rgba(91, 69, 35, .26);
}
.owned-army-view button:focus-visible {
  outline: 2px solid #f0c86f;
  outline-offset: 2px;
}
.owned-unit-mode-section[hidden] {
  display: none !important;
}
.owned-unit-mode-section {
  min-width: 0;
}
.unit-attention {
  color: #e0a074;
}
.unit-combat-details {
  margin: 8px 0;
  border-top: 1px solid #34363d;
  border-bottom: 1px solid #34363d;
}
.unit-combat-details > summary {
  padding: 9px 0;
  color: #b9aa8c;
  cursor: pointer;
}
.owned-army-filter button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #3b3d44;
  color: #aaa69d;
  background: rgba(12, 13, 17, .72);
  font: 600 12px/1.2 Arial, sans-serif;
  cursor: pointer;
}
.owned-army-filter button[aria-pressed="true"] {
  border-color: #b99556;
  color: #f0dba8;
  background: rgba(105, 77, 36, .32);
}
.owned-army-filter button:focus-visible,
.faction-heading:focus-visible {
  outline: 2px solid #f0c86f;
  outline-offset: 2px;
}
.owned-army-filter-empty {
  margin: 0;
  padding: 28px 18px;
  color: #99948a;
  border: 1px solid #34363d;
  background: rgba(8, 9, 12, .42);
  text-align: center;
}

.faction-section {
  margin-bottom: 14px;
  border: 1px solid #353840;
  background: rgba(8,9,12,.28);
}
.faction-section:last-child { margin-bottom: 0; }
.faction-heading {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px;
  border: 0;
  border-bottom: 1px solid #353840;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.faction-heading small {
  display: block;
  margin-bottom: 4px;
  color: #777a81;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .2em;
}
.faction-heading h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
}
.faction-heading > strong {
  margin-left: auto;
  color: #aaa69d;
  font: 600 11px Arial, sans-serif;
  letter-spacing: .09em;
}
.faction-toggle-mark {
  margin-left: 10px;
  color: #9b927f;
  font-size: 18px;
  transform: rotate(-90deg);
  transition: transform .16s ease;
}
.faction-heading[aria-expanded="true"] .faction-toggle-mark {
  transform: rotate(0);
}
.faction-black-iron { border-color: #49453d; }
.faction-black-iron .faction-heading {
  border-color: #49453d;
  background: linear-gradient(90deg, rgba(185,150,85,.09), transparent);
}
.faction-black-iron .faction-heading h3,
.faction-black-iron .faction-heading > strong { color: #c5b58f; }
.faction-abyss { border-color: #3f3451; }
.faction-abyss .faction-heading {
  border-color: #3f3451;
  background: linear-gradient(90deg, rgba(120,89,168,.13), transparent);
}
.faction-abyss .faction-heading h3,
.faction-abyss .faction-heading > strong { color: #ad91d2; }
.faction-unit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 10px;
}
.faction-unit-grid[hidden] {
  display: none;
}

.owned-unit-card {
  position: relative;
  padding: 15px 17px;
  border: 1px solid #2b2e35;
  border-left: 3px solid #555963;
  background: rgba(8,9,12,.5);
}
.owned-unit-card.new-unit {
  border-left-color: var(--gold);
  background: linear-gradient(100deg, rgba(185,150,85,.1), rgba(8,9,12,.5) 48%);
  box-shadow: inset 0 0 20px rgba(185,150,85,.025);
}
.owned-unit-card.unowned {
  opacity: .42;
  filter: grayscale(.65);
  border-left-color: #34363c;
}
.owned-unit-card.unowned.is-compact {
  min-height: 0;
  padding: 13px 15px;
  opacity: .78;
}
.owned-unit-card.unowned.is-compact h3 {
  margin-bottom: 8px;
}
.owned-unit-card.unowned.is-compact .owned-count {
  position: static;
  margin-left: auto;
}
.unowned-unit-feature {
  margin: 8px 0 0;
  color: #aaa69d;
  font-size: 12px;
  line-height: 1.5;
}
.unit-origin {
  min-height: 30px;
  margin: 8px 0 6px;
  color: #74777f;
  font-size: 9px;
  line-height: 1.55;
}
.owned-unit-topline { display: flex; align-items: center; justify-content: space-between; }
.owned-unit-role {
  color: #9b7bc9;
  font: 700 9px Arial, sans-serif;
  letter-spacing: .17em;
}
.new-badge {
  padding: 3px 6px;
  color: #17130d;
  background: var(--gold-bright);
  font: 700 9px Arial, sans-serif;
  letter-spacing: .12em;
  box-shadow: 0 0 12px rgba(211,179,109,.25);
}
.owned-unit-card h3 {
  margin: 6px 0 9px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
}
.owned-unit-card h3 small {
  margin-left: 5px;
  color: var(--gold-bright);
  font: 600 10px Arial, sans-serif;
}
.owned-count {
  margin-bottom: 12px;
  color: #888a90;
  font-size: 10px;
  letter-spacing: .05em;
}
.owned-count strong {
  margin-left: 4px;
  color: var(--gold-bright);
  font: 700 12px Arial, sans-serif;
}
.owned-count.uncontracted { color: #787a80; letter-spacing: .12em; }

.unit-manpower-record {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(176, 151, 99, .2);
  border-radius: 4px;
  background: rgba(7, 9, 13, .48);
}

.unit-manpower-record strong {
  color: #e1d4b5;
  font: 600 12px Arial, sans-serif;
}

.unit-manpower-record span,
.unit-manpower-record small {
  color: #96938b;
  font-size: 10px;
  line-height: 1.5;
}

.unit-manpower-record .compact-button {
  justify-self: start;
}

.unit-replenishment-snapshot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 4px 0;
}

.unit-replenishment-snapshot > span {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(176, 151, 99, .13);
  background: rgba(13, 15, 20, .58);
}

.unit-replenishment-snapshot small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.unit-replenishment-snapshot b {
  color: #e1d4b5;
  font: 600 11px Arial, sans-serif;
  white-space: nowrap;
}

.unit-auto-gestation-status {
  margin: 2px 0;
  padding: 6px 8px;
  border-left: 2px solid #75627f;
  color: #c7b5d1;
  background: rgba(88, 57, 103, .14);
  font-size: 10px;
  line-height: 1.45;
}

.unit-auto-gestation-status[data-auto-gestation-status="active"],
.unit-auto-gestation-status[data-auto-gestation-status="ready"] {
  border-left-color: #a58b55;
  color: #d6c38f;
  background: rgba(165, 139, 85, .1);
}

.combat-traits {
  margin: -3px 0 11px;
  color: #999287;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .045em;
  line-height: 1.55;
}
.owned-unit-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.owned-unit-stats div { border-right: 1px solid #292c32; padding-left: 10px; }
.owned-unit-stats div:first-child { padding-left: 0; }
.owned-unit-stats div:last-child { border-right: 0; }
.owned-unit-stats span {
  display: block;
  margin-bottom: 4px;
  color: #6f7279;
  font-size: 9px;
}
.owned-unit-stats strong { font: 600 13px Arial, sans-serif; }
.growth-preview {
  display: grid;
  gap: 5px;
  padding: 9px 0;
  border-top: 1px solid #292c32;
  border-bottom: 1px solid #292c32;
}
.growth-preview div {
  display: grid;
  grid-template-columns: 48px 1fr 18px 1fr;
  align-items: center;
}
.growth-preview span { color: #74777e; font-size: 9px; }
.growth-preview strong,
.growth-preview b { font: 600 12px Arial, sans-serif; }
.growth-preview i {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 8px;
  color: #666970;
}

.growth-preview i::before {
  position: absolute;
  top: 3px;
  left: 1px;
  width: 8px;
  height: 4px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  transform: skewX(35deg);
}
.growth-preview b { color: var(--gold-bright); }
.level-cost {
  margin: 9px 0 7px;
  color: #8d887e;
  font-size: 9px;
}
.level-up-button {
  width: 100%;
  padding: 7px;
  border: 1px solid #78643f;
  color: #d6c69f;
  background: rgba(185,150,85,.08);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .1em;
}
.level-up-button:disabled {
  cursor: default;
  opacity: .35;
  filter: grayscale(.8);
}
.owned-unit-card.level-up-flash { animation: level-up-flash .8s ease-out; }

.gestation-rejection-reasons {
  margin: 7px 0;
  padding: 7px 9px 7px 24px;
  border-left: 2px solid rgba(184, 104, 93, 0.65);
  color: #d8b9ad;
  background: rgba(68, 25, 28, 0.24);
  font-size: 11px;
  line-height: 1.55;
}

.gestation-rejection-reasons li + li {
  margin-top: 3px;
}
.level-up-notice {
  position: absolute;
  z-index: 4;
  inset: 50% 8px auto;
  padding: 7px;
  transform: translateY(-50%);
  color: #17130c;
  background: var(--gold-bright);
  box-shadow: 0 0 22px rgba(211,179,109,.55);
  font: 700 10px Arial, sans-serif;
  letter-spacing: .1em;
  text-align: center;
  animation: level-up-notice .8s ease-out both;
}
.owned-army-actions {
  padding: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.formation-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.formation-slot {
  min-width: 0;
}
.formation-commander-summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 14px 14px 0;
  padding: 12px 15px;
  border: 1px solid #484236;
  background: linear-gradient(90deg, rgba(185,150,85,.10), rgba(8,9,12,.4));
}
.formation-commander-summary span {
  color: #81796a;
  font-size: 9px;
  letter-spacing: .13em;
}
.formation-commander-summary strong {
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 500;
}
.formation-commander-summary small {
  color: #8e9097;
  font-size: 9px;
  text-align: right;
}
.formation-slot {
  border: 1px solid #2c3038;
  background: rgba(8,9,12,.42);
}
.formation-slot-heading {
  padding: 14px 15px;
  border-bottom: 1px solid #2c3038;
  background: rgba(185,150,85,.045);
}
.formation-slot-heading > span {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font: 700 10px Arial, sans-serif;
  letter-spacing: .18em;
}
.formation-slot-heading strong {
  font-size: 13px;
  font-weight: 500;
}
.company-captain-summary {
  display: grid;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid #2c3038;
  background: rgba(117,91,148,.07);
  color: #8d8f97;
  font-size: 9px;
}
.company-captain-summary strong { color: #d1c2a0; font-weight: 500; }
.company-captain-summary b { color: #7f8188; }
.company-captain-summary b.compatible { color: #9fc18e; }
.company-captain-summary small { line-height: 1.65; }
.formation-candidates { padding: 11px; }
.formation-candidates > p {
  margin: 0 0 8px;
  color: #6f7279;
  font-size: 10px;
  letter-spacing: .13em;
}
.formation-candidate {
  width: 100%;
  margin-bottom: 7px;
  padding: 10px 11px;
  border: 1px solid #292d35;
  color: #bbb8b0;
  background: #101217;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, background .18s;
}
.formation-candidate:last-child { margin-bottom: 0; }
.formation-candidate:hover { border-color: #625844; }
.formation-candidate.selected {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(185,150,85,.12);
}
.formation-candidate span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
}
.formation-candidate span b {
  color: var(--gold-bright);
  font: 700 10px Arial, sans-serif;
}
.formation-candidate small {
  color: #74777e;
  font: 9px Arial, sans-serif;
}
.formation-candidate em {
  display: block;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(185,150,85,.18);
  color: #bca776;
  font: 700 8px Arial, sans-serif;
  font-style: normal;
  letter-spacing: .06em;
}
.formation-candidate em.trait-line {
  border-top-color: rgba(126,116,96,.18);
  color: #9297a2;
}

.commander-screen {
  margin-top: 28px;
  border: 1px solid #383b44;
  background: linear-gradient(145deg, rgba(20,22,28,.97), rgba(9,10,14,.98));
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}
.commander-message {
  min-height: 18px;
  margin: 10px 18px 0;
  color: #b6936f;
  font-size: 10px;
  text-align: center;
}
.commander-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}
.commander-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 19px;
  border: 1px solid #4b4e56;
  background: #101219;
  transition: border-color .2s, box-shadow .2s, transform .2s, opacity .2s;
}
.commander-card-portrait {
  position: relative;
  width: 100%;
  height: 240px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(211,179,109,.34);
  background: linear-gradient(145deg, #26272e, #101217);
}
.commander-card-portrait img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.commander-card-portrait.has-multiple-portrait {
  height: clamp(320px, 48vw, 520px);
}

.commander-card-portrait.has-multiple-portrait img {
  object-fit: contain;
  object-position: center top;
}
.commander-card-portrait span {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8c28f;
  font: 600 54px Georgia, serif;
}
.commander-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
}
.commander-card > * { position: relative; z-index: 1; }
.commander-card.selected {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
  box-shadow: 0 0 25px rgba(211,179,109,.24);
}
.commander-card.locked {
  opacity: .48;
  filter: grayscale(.58);
}
.commander-card.locked.is-compact {
  min-height: 0;
  padding-bottom: 16px;
  opacity: .68;
}
.commander-card.locked.is-compact .commander-card-portrait {
  height: 168px;
}
.commander-card.locked.is-compact .commander-description {
  min-height: 0;
  margin-bottom: 9px;
}
.commander-card.locked.is-compact .captain-compatibility {
  margin-bottom: 6px;
}
.commander-card.locked.is-compact .commander-unlock-condition {
  margin-bottom: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(185, 150, 85, .14);
}
.commander-iron {
  border-color: #62666c;
  background: linear-gradient(145deg, #202329, #0d0f13 70%);
}
.commander-iron::before {
  background: repeating-linear-gradient(120deg, transparent 0 30px, rgba(199,204,210,.05) 31px 32px);
}
.commander-fang {
  border-color: #6d343b;
  background: linear-gradient(145deg, #2b1115, #100b0d 72%);
}
.commander-fang::before {
  background: repeating-linear-gradient(110deg, transparent 0 38px, rgba(214,70,75,.08) 39px 41px);
}
.commander-abyss {
  border-color: #614886;
  background: radial-gradient(circle at 50% 12%, rgba(110,72,165,.22), transparent 38%), #100d1c;
}
.commander-abyss::before {
  background:
    linear-gradient(60deg, transparent 48%, rgba(177,129,229,.06) 49% 51%, transparent 52%);
  background-size: 54px 54px;
}
.commander-card-topline {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.commander-icon {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #c4bca8;
  font-size: 12px;
  box-shadow: 0 0 12px rgba(255,255,255,.08);
}
.commander-state {
  margin-left: auto;
  white-space: nowrap;
  color: var(--gold-bright);
  font: 700 9px Arial, sans-serif;
  letter-spacing: .16em;
}
.captain-event-new {
  margin: 0;
  padding: 3px 6px;
  border: 1px solid #a18157;
  color: #e1c477;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .12em;
}
.commander-card h3 {
  margin: 18px 0 4px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .08em;
}
.commander-title {
  margin: 0;
  color: #a79b82;
  font-size: 10px;
  letter-spacing: .06em;
}
.commander-description {
  min-height: 39px;
  margin: 13px 0;
  color: #777a82;
  font-size: 10px;
  line-height: 1.65;
}
.captain-assignment,
.captain-compatibility {
  margin: 8px 0;
  color: #999188;
  font-size: 9px;
}

.captain-gestation-duty-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid rgba(198, 164, 100, 0.28);
  background: rgba(8, 10, 13, 0.52);
}

.captain-gestation-duty-status span {
  color: var(--muted);
  font-size: 0.76rem;
}

.captain-gestation-duty-status strong {
  color: var(--text);
}

.base-gestation-management {
  display: grid;
  gap: 9px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(174, 132, 210, .34);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(49, 31, 68, .38), rgba(8, 10, 14, .62));
}

.base-gestation-heading,
.base-gestation-target-control,
.base-gestation-repeat-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.base-gestation-heading strong {
  color: #e0c8f2;
  font-size: 12px;
  letter-spacing: .08em;
}

.base-gestation-heading span,
.base-gestation-target-control span,
.base-gestation-repeat-control span {
  color: #aaa0b6;
  font-size: 10px;
}

.base-gestation-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.base-gestation-status span {
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 5px;
  color: #cbc3d2;
  background: rgba(0, 0, 0, .25);
  font-size: 9px;
  text-align: center;
}

.base-gestation-target-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: #aaa0b6;
  font-size: 10px;
}

.base-gestation-target-status strong {
  color: #eee7f3;
}

.base-gestation-target-status small {
  width: 100%;
  color: #c9a5d8;
}

.base-gestation-target-control select {
  min-width: 0;
  width: min(100%, 210px);
  padding: 7px 9px;
  border: 1px solid rgba(211, 179, 109, .3);
  border-radius: 5px;
  color: var(--text);
  background: #17131d;
}

.base-gestation-target-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
}

.base-gestation-target-actions button {
  min-width: 0;
  min-height: 36px;
  white-space: normal;
}

.base-gestation-repeat-control {
  justify-content: flex-start;
}

.base-gestation-repeat-control input {
  width: 18px;
  height: 18px;
  accent-color: #a675c4;
}

.base-gestation-slot-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.base-gestation-slot-buttons button,
.base-gestation-release {
  min-width: 0;
  min-height: 36px;
  white-space: normal;
}

.base-gestation-slot-buttons button.selected {
  border-color: #bc91d5;
  color: #f0d9ff;
  background: rgba(119, 69, 147, .32);
}

.gestation-womb-section {
  grid-column: 1 / -1;
}

.gestation-womb-section > p {
  margin: 12px 0 0;
  line-height: 1.75;
  color: var(--text);
}
.captain-assignment strong { color: var(--gold-bright); font-weight: 500; }
.captain-relationship {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid rgba(125,128,139,.2);
  background: rgba(4,5,8,.3);
}
.relationship-gauge > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #898c94;
  font-size: 8px;
}
.relationship-gauge strong {
  color: #c6bea9;
  font-weight: 500;
}
.relationship-track {
  overflow: hidden;
  height: 5px;
  margin-top: 5px;
  border: 1px solid #343740;
  background: #090b0f;
}
.relationship-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7e6840, #d3b36d);
  transition: width .35s ease;
}
.relationship-affinity .relationship-track i {
  background: linear-gradient(90deg, #633137, #c27a4c);
}
.relationship-cap-guide,
.relationship-reserve {
  display: block;
  margin-top: 4px;
  color: #777b85;
  font-size: 8px;
  line-height: 1.45;
}
.relationship-reserve {
  color: #c6a96c;
}
.relationship-unassigned {
  display: grid;
  gap: 4px;
  color: #777a82;
  font-size: 8px;
}
.relationship-unassigned strong { color: #9b9690; }
.relationship-unassigned small { color: #676a72; }
.captain-record,
.captain-conversation-record,
.future-unlock-status {
  margin: 2px 0 0;
  color: #8b8e96;
  font-size: 8px;
}
.captain-conversation-record { color: #bca979; }
.future-unlock-status { color: #a68dbe; }
.commander-effect-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.commander-effect-columns > div {
  padding: 10px;
  border: 1px solid rgba(125,128,139,.18);
  background: rgba(4,5,8,.28);
}
.commander-effect-columns span {
  color: #777b84;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .12em;
}
.commander-effect-columns ul {
  min-height: 62px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}
.commander-effect-columns li {
  margin-bottom: 5px;
  color: #b5b1a7;
  font-size: 9px;
  line-height: 1.35;
}
.commander-unlock-condition {
  margin: 12px 0;
  color: #7f7478;
  font-size: 9px;
}
.commander-card-actions {
  display: grid;
  gap: 7px;
}
.commander-card-actions button {
  width: 100%;
  min-height: 34px;
  font-size: 9px;
}
.captain-slot-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.captain-slot-buttons > span {
  grid-column: 1 / -1;
  color: #777b84;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .12em;
}
.commander-card-actions button:disabled { opacity: .38; cursor: not-allowed; }
.commander-level-flash { animation: commander-level-flash .9s ease-out; }

.commander-toast {
  position: fixed;
  z-index: 95;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  width: min(520px, calc(100vw - 28px));
  min-width: 0;
  padding: 12px 19px;
  transform: translate(-50%, -14px);
  border: 1px solid #736348;
  color: #ddd2b6;
  background: rgba(17,17,21,.96);
  box-shadow: 0 0 24px rgba(185,150,85,.25);
  opacity: 0;
  text-align: center;
  pointer-events: none;
}
.commander-toast strong,
.commander-toast span { display: block; }
.commander-toast strong {
  color: var(--gold-bright);
  font: 700 9px Arial, sans-serif;
  letter-spacing: .2em;
}
.commander-toast span { margin-top: 5px; font-size: 13px; }
.commander-toast.show { animation: commander-toast-in .24s ease-out both; }
.commander-toast.unlock { border-color: #8f6f42; }
.commander-toast.selected { border-color: #6e7280; }
.commander-toast.level-up { border-color: #8161a3; }
.commander-toast.relationship { border-color: #a18157; }
.commander-toast.event { border-color: #bd9657; }

.captain-event-modal {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5,6,9,.78);
  backdrop-filter: blur(3px);
}
.captain-event-modal[hidden],
.event-mod-modal[hidden],
.gestation-records-screen[hidden] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
.captain-event-panel {
  position: relative;
  width: min(570px, 100%);
  min-height: 360px;
  padding: 25px;
  border: 1px solid #66543b;
  background:
    radial-gradient(circle at 15% 0, rgba(185,150,85,.12), transparent 35%),
    linear-gradient(145deg, #1b1b20, #0c0e13 72%);
  box-shadow: 0 28px 80px rgba(0,0,0,.62), 0 0 28px rgba(185,150,85,.12);
}
.captain-event-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  color: #858178;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}
.captain-event-close:disabled { opacity: .25; cursor: not-allowed; }
.captain-event-panel > header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #343238;
}
.captain-event-portrait {
  width: 90px;
  height: 110px;
}
.captain-event-panel header span {
  color: #a99874;
  font-size: 10px;
}
.captain-event-panel h2 {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .1em;
}
.captain-event-dialogue {
  min-height: 105px;
  padding: 24px 8px 16px;
}
.captain-event-dialogue strong {
  display: block;
  color: #b99d63;
  font-size: 10px;
  font-weight: 500;
}
.captain-event-dialogue p {
  margin: 10px 0 0;
  color: #e1ddd3;
  font-size: 15px;
  line-height: 1.85;
}
.captain-event-choices {
  display: grid;
  gap: 8px;
  margin: 0 8px 18px;
}
.captain-event-choice {
  width: 100%;
  border: 1px solid #4a4640;
  padding: 11px 13px;
  color: #c9c3b8;
  background: rgba(19,20,25,.88);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.captain-event-choice:hover,
.captain-event-choice:focus-visible {
  border-color: var(--gold);
  color: #f0dfb5;
  background: rgba(60,49,32,.48);
}
.captain-event-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px;
}

.event-mod-modal {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 5, 8, .84);
  backdrop-filter: blur(4px);
}
.event-mod-panel {
  position: relative;
  overflow: hidden;
  width: min(650px, 100%);
  min-height: 390px;
  padding: 24px;
  border: 1px solid #75603f;
  background-color: #101218;
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .72);
}
.event-mod-close {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 12px;
  border: 0;
  color: #aaa293;
  background: transparent;
  font-size: 23px;
  cursor: pointer;
}
.event-mod-panel > header {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 112px;
  border-bottom: 1px solid rgba(190, 161, 105, .26);
}

.event-mod-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.event-mod-status-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(211, 174, 90, .65);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7b586b, #241b2b 68%);
  color: #f0dca8;
  font-size: 13px;
  box-shadow: 0 0 18px rgba(116, 72, 111, .35);
}
.event-mod-panel h2 {
  margin: 0;
  color: #ddd4c2;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .09em;
}
.event-mod-portrait-frame {
  display: grid;
  overflow: hidden;
  width: 90px;
  height: 110px;
  place-items: center;
  border: 1px solid #4e4639;
  background: #18191e;
}
.event-mod-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.event-mod-portrait-frame span {
  color: #c3a86f;
  font: 600 27px Arial, sans-serif;
}
.event-mod-cg {
  display: block;
  width: 100%;
  max-height: 330px;
  margin: 16px 0 0;
  object-fit: contain;
  background: #08090c;
}
.event-mod-cg.effect-fade {
  animation: event-mod-fade .4s ease-out both;
}
.event-mod-dialogue {
  min-height: 105px;
  padding: 22px 8px 15px;
}
.event-mod-dialogue strong {
  color: #b99d63;
  font-size: 11px;
  font-weight: 500;
}
.event-mod-dialogue p {
  margin: 10px 0 0;
  color: #e3dfd7;
  font-size: 15px;
  line-height: 1.85;
  white-space: pre-wrap;
}
.event-mod-choices {
  display: grid;
  gap: 8px;
  margin: 0 8px 18px;
}
.event-mod-choice {
  width: 100%;
  border: 1px solid #4a4640;
  padding: 11px 13px;
  color: #c9c3b8;
  background: rgba(19, 20, 25, .92);
  text-align: left;
  cursor: pointer;
}
.event-mod-choice:hover,
.event-mod-choice:focus-visible {
  border-color: var(--gold);
  color: #f0dfb5;
}
.event-mod-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px;
}

.event-browser {
  position: fixed;
  z-index: 125;
  right: 14px;
  bottom: 14px;
  width: min(760px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid #66543b;
  background: rgba(10, 11, 15, .98);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .65);
}
.event-browser > summary {
  padding: 11px 14px;
  color: #d4bd87;
  cursor: pointer;
  font: 600 11px Arial, sans-serif;
  letter-spacing: .12em;
}
.event-browser > summary span { float: right; }
.event-browser-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid #292b32;
  border-bottom: 1px solid #292b32;
}
.event-browser-toolbar p {
  margin: 0;
  color: #858894;
  font-size: 11px;
}
.event-browser-body {
  display: grid;
  grid-template-columns: minmax(190px, .75fr) minmax(0, 1.5fr);
  min-height: 330px;
}
.event-browser-body nav {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border-right: 1px solid #292b32;
}
.event-browser-entry {
  border: 1px solid #34363e;
  padding: 9px 10px;
  color: #c6c1b6;
  background: #12141a;
  white-space: pre-line;
  text-align: left;
  cursor: pointer;
}
.event-browser-body > section {
  padding: 16px;
  color: #a9a69f;
  font-size: 11px;
}
.event-browser-body h3 { margin-top: 0; color: #ddd5c4; }
.event-browser-body code { color: #b99d63; }
.event-browser-body dl {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 7px 10px;
  margin: 18px 0;
}
.event-browser-body dt { color: #81745c; }
.event-browser-body dd {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
@keyframes event-mod-fade {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

.save-panel {
  margin-top: 30px;
  padding: 17px 20px;
  border: 1px solid #292c33;
  background: rgba(12,14,18,.72);
}
.save-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.save-panel-heading p {
  margin: 0 0 4px;
  color: #777a81;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .2em;
}
.save-panel-heading h2 {
  margin: 0;
  color: #aaa69d;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
}
.last-saved { text-align: right; }
.last-saved span {
  display: block;
  margin-bottom: 4px;
  color: #666970;
  font-size: 8px;
  letter-spacing: .12em;
}
.last-saved strong {
  color: #9c998f;
  font: 600 10px Arial, sans-serif;
}
.save-message {
  min-height: 16px;
  margin: 9px 0 3px;
  color: #9d947f;
  font-size: 10px;
  letter-spacing: .05em;
  text-align: right;
}
.save-message.error { color: #b57a85; }
.save-message.success { color: #bfa96f; }
.app-save-version {
  margin: 0 0 10px;
  color: #74777e;
  font: 600 9px Arial, sans-serif;
  letter-spacing: .08em;
  text-align: right;
}
.save-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.save-transfer-actions {
  margin-bottom: 12px;
}
.save-local-actions {
  padding-top: 11px;
  border-top: 1px solid #262930;
}
.save-transfer-button,
.save-local-actions button {
  min-height: 44px;
}
.save-transfer-button {
  width: auto;
  min-width: 158px;
  padding: 10px 16px;
  font-size: 11px;
}
.compact-button {
  width: auto;
  min-width: 92px;
  padding: 7px 13px;
  font-size: 10px;
}
.quiet-danger-button {
  border: 1px solid #4d353a;
  padding: 7px 13px;
  color: #96747b;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .08em;
}
.quiet-danger-button:hover { border-color: #79505a; color: #bc8792; }
.quiet-danger-button.confirm {
  border-color: #78414c;
  color: #d29aa5;
  background: rgba(120,45,58,.12);
}
.reset-save-confirmation {
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid #4a3439;
  background: rgba(61,28,35,.18);
  text-align: right;
}
.reset-save-confirmation p {
  margin: 0 0 10px;
  color: #b28e95;
  font-size: 11px;
}
.reset-save-confirmation > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.save-import-dialog {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background: rgba(4, 5, 8, .82);
}
.save-import-dialog[hidden] {
  display: none;
}
.save-import-dialog-card {
  box-sizing: border-box;
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #75664a;
  background:
    linear-gradient(150deg, rgba(31, 29, 30, .98), rgba(13, 15, 20, .99));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}
.save-import-dialog-kicker {
  margin: 0 0 6px;
  color: #9d895e;
  font: 700 9px Arial, sans-serif;
  letter-spacing: .22em;
}
.save-import-dialog-card h2 {
  margin: 0 0 12px;
  color: #ddd5c4;
  font-size: 18px;
  font-weight: 500;
}
.save-import-dialog-card > p:not(.save-import-dialog-kicker) {
  color: #a8a39a;
  font-size: 12px;
  line-height: 1.7;
}
.save-import-summary {
  display: grid;
  gap: 1px;
  margin: 18px 0;
  border: 1px solid #30333a;
  background: #30333a;
}
.save-import-summary > div {
  display: grid;
  grid-template-columns: minmax(105px, .42fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  background: #15171c;
}
.save-import-summary dt {
  color: #777b83;
  font-size: 10px;
}
.save-import-summary dd {
  min-width: 0;
  margin: 0;
  color: #c6c0b3;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.save-import-warning {
  padding: 9px 11px;
  border-left: 2px solid #9f8148;
  background: rgba(159, 129, 72, .09);
}
.save-import-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.save-import-dialog-actions button {
  width: auto;
  min-width: 150px;
  min-height: 44px;
}
.save-panel button:focus-visible,
.save-import-dialog button:focus-visible {
  outline: 2px solid #d3b76e;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .save-panel {
    padding-inline: 14px;
  }
  .save-transfer-actions,
  .save-local-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .save-transfer-button,
  .save-local-actions button {
    box-sizing: border-box;
    width: 100%;
  }
  .save-import-dialog {
    padding: 8px;
  }
  .save-import-dialog-card {
    max-height: calc(100dvh - 16px);
    padding: 18px 15px;
  }
  .save-import-summary > div {
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .save-import-dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .save-import-dialog-actions button {
    width: 100%;
  }
}

@keyframes pulse { 50% { opacity: .45; } }
@keyframes player-attack {
  45% { transform: translateX(18px) scale(1.015); border-color: var(--gold-bright); }
}
@keyframes enemy-attack {
  45% { transform: translateX(-18px) scale(1.015); border-color: #ae87df; }
}
@keyframes damaged {
  25% {
    transform: translateX(-7px);
    background: rgba(151,32,43,.7);
    box-shadow: 0 0 20px rgba(208,75,85,.6);
  }
  55% { transform: translateX(6px); background: rgba(111,25,34,.5); }
}
@keyframes capture-enter {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes captured {
  45% { text-shadow: 0 0 24px rgba(211,179,109,.75); transform: scale(1.035); }
}
@keyframes capture-failure {
  20% { transform: translateX(-5px); border-color: #623b4b; }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}
@keyframes skill-card-cast {
  0% { transform: scale(1); }
  18% {
    transform: translateX(-7px) scale(1.035);
    border-color: rgb(var(--skill-color));
    box-shadow: 0 0 22px rgba(var(--skill-color), .6);
  }
  36% { transform: translateX(8px) scale(1.045); }
  54% { transform: translateX(-5px) scale(1.03); box-shadow: 0 0 30px rgba(var(--skill-color), .72); }
  72% { transform: translateX(4px) scale(1.018); }
  100% { transform: scale(1); }
}
@keyframes skill-name-burst {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(.88); }
  18%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.04); }
}
@keyframes skill-damaged {
  0% { transform: translateX(0); }
  18% {
    transform: translateX(-9px) scale(1.018);
    border-color: #ef6672;
    background: rgba(133,31,43,.72);
    box-shadow: 0 0 24px rgba(208,75,85,.7);
  }
  38% { transform: translateX(8px) scale(1.01); }
  58% { transform: translateX(-5px); background: rgba(91,24,34,.52); }
  78% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes contract-toast {
  0%, 100% { opacity: 0; transform: translate(-50%, -8px); }
  14%, 78% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes floor-arrival {
  0% { opacity: 0; transform: translate(-50%, -7px) scale(.96); }
  20%, 68% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 4px) scale(1.015); }
}
@keyframes level-up-flash {
  30% { border-color: var(--gold-bright); box-shadow: 0 0 24px rgba(211,179,109,.48); }
}
@keyframes level-up-notice {
  0%, 100% { opacity: 0; transform: translateY(-45%) scale(.94); }
  18%, 72% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes combat-reaction-label {
  0%, 100% { opacity: 0; transform: translate(-50%, 4px) scale(.86); }
  16%, 68% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes guard-reaction-label {
  0%, 100% { opacity: 0; transform: translateY(3px) scale(.88); }
  18%, 68% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes damage-number {
  0% { opacity: 0; transform: translateY(7px) scale(.9); }
  18%, 62% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(.96); }
}
@keyframes reaction-critical {
  0%, 100% { transform: translateX(0) scale(1); }
  18% { transform: translateX(-5px) scale(1.055); border-color: rgb(var(--skill-color)); box-shadow: 0 0 25px rgba(var(--skill-color), .8); }
  34% { transform: translateX(5px) scale(1.045); }
  50% { transform: translateX(-3px) scale(1.025); box-shadow: 0 0 16px rgba(var(--skill-color), .5); }
  68% { transform: translateX(2px) scale(1.01); }
}
@keyframes reaction-critical-hit {
  0%, 100% { transform: translateX(0); }
  16% { transform: translateX(-9px) scale(1.025); border-color: #ff6671; background: rgba(133,31,43,.68); box-shadow: 0 0 24px rgba(235,70,82,.72); }
  34% { transform: translateX(8px) scale(1.015); }
  52% { transform: translateX(-5px); }
  70% { transform: translateX(3px); }
}
@keyframes reaction-evade {
  0%, 100% { transform: translateX(0); opacity: 1; }
  22% { transform: translateX(16px) skewX(-2deg); opacity: .42; }
  48% { transform: translateX(-3px); opacity: .7; }
  70% { transform: translateX(2px); opacity: .92; }
}
@keyframes reaction-block {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) scale(.99); border-color: #e0c477; box-shadow: inset 0 0 24px rgba(211,179,109,.3), 0 0 18px rgba(211,179,109,.55); }
  38% { transform: translateX(4px); }
  58% { transform: translateX(-2px); box-shadow: inset 0 0 15px rgba(211,179,109,.18); }
}
@keyframes reaction-guard {
  0%, 100% { transform: translateX(0); }
  24% { transform: translateX(-3px); border-color: #bfa664; box-shadow: inset 0 0 14px rgba(211,179,109,.2); }
  48% { transform: translateX(2px); }
}
@keyframes reaction-parry-player {
  0%, 100% { transform: translateX(0) scale(1); }
  20% { transform: translateX(12px) scale(1.025); border-color: #e5efd1; box-shadow: 0 0 21px rgba(218,235,187,.68); }
  34% { transform: translateX(5px) scale(1.01); }
  48% { transform: translateX(9px); box-shadow: 0 0 8px rgba(218,235,187,.35); }
}
@keyframes reaction-parry-enemy {
  0%, 100% { transform: translateX(0) scale(1); }
  20% { transform: translateX(-12px) scale(1.025); border-color: #e5efd1; box-shadow: 0 0 21px rgba(218,235,187,.68); }
  34% { transform: translateX(-5px) scale(1.01); }
  48% { transform: translateX(-9px); box-shadow: 0 0 8px rgba(218,235,187,.35); }
}
@keyframes reaction-counter {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px) scale(.995); border-color: #ee8a55; background: rgba(111,38,24,.5); }
  32% { transform: translateX(5px); box-shadow: 0 0 18px rgba(226,91,43,.55); }
  48% { transform: translateX(-3px); }
  64% { transform: translateX(2px); }
}
@keyframes reaction-shield-break {
  0%, 100% { transform: scale(1); }
  14% { transform: translateX(-7px) scale(1.025); border-color: #91e8fa; box-shadow: inset 0 0 24px rgba(103,213,237,.32), 0 0 25px rgba(103,213,237,.68); }
  28% { transform: translateX(7px) scale(.99); }
  44% { transform: translateX(-4px) scale(1.012); box-shadow: 0 0 12px rgba(103,213,237,.35); }
  62% { transform: translateX(3px); }
}
@keyframes boss-shield-break {
  0%, 100% { transform: scale(1); }
  12% { transform: translateX(-10px) scale(1.035); border-color: #a9efff; box-shadow: inset 0 0 35px rgba(103,213,237,.38), 0 0 34px rgba(103,213,237,.75); }
  25% { transform: translateX(9px) scale(.985); }
  40% { transform: translateX(-6px) scale(1.02); }
  57% { transform: translateX(4px); box-shadow: 0 0 16px rgba(103,213,237,.4); }
  72% { transform: translateX(-2px); }
}
@keyframes shield-fragments {
  0% { opacity: 0; transform: scale(.72); }
  16% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(7px) scale(1.18); }
}
@keyframes shield-bar-break {
  0% { opacity: 1; border-color: rgba(142,226,245,.7); box-shadow: 0 0 9px rgba(87,207,232,.65); }
  22% { opacity: .2; }
  38% { opacity: 1; }
  56% { opacity: .15; }
  100% { opacity: 1; border-color: transparent; box-shadow: none; }
}
@keyframes zone-particles {
  from { transform: translateY(5px); opacity: .18; }
  to { transform: translateY(-7px); opacity: .38; }
}

.formation-replenish-all,
.company-manpower-panel,
.summary-manpower-report,
.replenishment-proposal {
  border: 1px solid rgba(190, 161, 105, .24);
  background: rgba(10, 12, 17, .72);
  border-radius: 10px;
}

.formation-replenish-all {
  margin: 14px 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.expedition-destination {
  margin: 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}
.expedition-route-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(190, 161, 105, .22);
  background: rgba(8, 9, 12, .35);
}
.expedition-route-settings .expedition-destination {
  align-items: stretch;
  flex-direction: column;
  margin: 0;
}
.expedition-route-settings .expedition-destination select {
  min-width: 0;
  width: 100%;
}
.expedition-route-description {
  grid-column: 1 / -1;
  margin: 0;
  color: #85878e;
  font-size: 10px;
  line-height: 1.6;
}
.expedition-destination select {
  min-width: 220px;
  border: 1px solid rgba(190, 161, 105, .32);
  border-radius: 7px;
  padding: 9px 12px;
  color: var(--text);
  background: #11151c;
}
.formation-replenish-all div {
  display: grid;
  gap: 3px;
}
.formation-replenish-all span,
.company-manpower-panel small {
  color: var(--muted);
  font-size: .75rem;
}

.company-manpower-panel {
  margin: 10px 0 14px;
  padding: 10px 12px;
}
.company-manpower-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.company-manpower-panel > div:last-child {
  justify-content: flex-start;
  margin-top: 8px;
}
.company-manpower-panel.low,
.company-manpower-panel.critical {
  border-color: rgba(223, 125, 91, .58);
}
.company-manpower-panel.destroyed {
  border-color: rgba(196, 65, 72, .72);
  background: rgba(70, 18, 23, .28);
}
.company-manpower-panel b {
  color: #e6bd77;
  font-size: .75rem;
}

.manpower-gauge,
.battle-manpower-row {
  display: grid;
  width: 100%;
  gap: 5px;
}
.manpower-gauge > div:first-child,
.battle-manpower-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #aaa59b;
  font-size: 10px;
}
.manpower-gauge strong,
.battle-manpower-label strong {
  color: #d6c7a5;
  font-weight: 600;
}
.manpower-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(157,151,135,.34);
  background: rgba(4,6,9,.8);
}
.manpower-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #776b4d, #c1a866);
  transition: width .3s ease;
}
.manpower-gauge.minor .manpower-track i,
.battle-manpower-row.minor .manpower-track i {
  background: linear-gradient(90deg, #786525, #b9943d);
}
.manpower-gauge.damaged .manpower-track i,
.battle-manpower-row.damaged .manpower-track i {
  background: linear-gradient(90deg, #884e24, #d17b3b);
}
.manpower-gauge.low .manpower-track i,
.battle-manpower-row.low .manpower-track i {
  background: linear-gradient(90deg, #68252a, #a9443d);
}
.manpower-gauge.critical .manpower-track i,
.battle-manpower-row.critical .manpower-track i,
.manpower-gauge.destroyed .manpower-track i,
.battle-manpower-row.destroyed .manpower-track i {
  background: linear-gradient(90deg, #7b171f, #d43d45);
}
.battle-manpower-row {
  justify-items: start;
  width: auto;
  margin: 6px 0 4px;
}
.battle-manpower-row .battle-manpower-value,
.battle-captain-select-manpower,
#battle-captain-focus-manpower {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border-subtle, rgba(157, 151, 135, .34));
  color: var(--text-secondary, #c4beb1);
  background: var(--surface-raised, rgba(20, 22, 27, .86));
  font-weight: 700;
  line-height: 1.2;
}
.battle-manpower-row.damaged .battle-manpower-value,
.battle-captain-select-manpower.damaged,
#battle-captain-focus-manpower.damaged {
  border-color: rgba(209, 123, 59, .66);
  color: #e2b17b;
}
.battle-manpower-row.critical .battle-manpower-value,
.battle-manpower-row.destroyed .battle-manpower-value,
.battle-captain-select-manpower.critical,
.battle-captain-select-manpower.destroyed,
#battle-captain-focus-manpower.critical,
#battle-captain-focus-manpower.destroyed {
  border-color: rgba(212, 61, 69, .72);
  color: #ef9a9f;
}
.minor-loss-note {
  color: #a99665 !important;
}

.summary-manpower-report {
  margin-top: 14px;
  padding: 14px;
}
.summary-manpower-report:empty,
.summary-experience-report:empty {
  display: none;
}
.summary-manpower-report h3 {
  margin: 0 0 8px;
}
.summary-manpower-report > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 5px 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.summary-manpower-report small {
  grid-column: 2;
  color: #bfc8d4;
}
.summary-manpower-report details {
  grid-column: 2;
  color: #aaa396;
  font-size: 10px;
}
.summary-manpower-report details summary {
  cursor: pointer;
  color: #bfae82;
}
.summary-manpower-report details small {
  display: block;
  margin-top: 3px;
}

.replenishment-proposal {
  margin-top: 14px;
  padding: 15px;
}
.replenishment-proposal > span {
  color: #d8ae66;
  font-size: .68rem;
  letter-spacing: .14em;
}
.replenishment-proposal > strong,
.replenishment-proposal > small {
  display: block;
  margin-top: 5px;
}
.replenishment-proposal .proposal-failure-message {
  padding: 6px 8px;
  border-left: 2px solid rgba(190, 91, 83, 0.72);
  color: #d7a09a;
  background: rgba(105, 35, 34, 0.16);
}
.replenishment-proposal p {
  margin: 10px 0;
}
.replenishment-proposal > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.captain-management-status {
  color: #c5b58e;
}

.event-journal-screen {
  width: min(1180px, calc(100% - 28px));
  margin: 18px auto;
  padding: 18px;
  border: 1px solid rgba(190, 143, 73, .45);
  background: linear-gradient(145deg, rgba(22, 18, 25, .98), rgba(10, 10, 14, .98));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.story-hub-screen {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(193, 157, 91, 0.48);
  background:
    radial-gradient(circle at 82% 8%, rgba(99, 62, 128, 0.18), transparent 34%),
    linear-gradient(150deg, rgba(17, 17, 20, 0.98), rgba(11, 12, 15, 0.98));
}

.story-hub-screen[hidden],
.story-event-modal[hidden] {
  display: none;
}

.story-current-objective {
  padding: 18px 20px;
  border-left: 3px solid #c39a55;
  background: rgba(199, 159, 86, 0.07);
}

.story-current-objective h3,
.story-current-objective p {
  margin: 0;
}

.story-current-objective h3 {
  color: #e5c98f;
  font-size: 21px;
}

.story-objective-conditions {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.story-objective-conditions span {
  color: #aaa49a;
}

.story-objective-conditions .met {
  color: #a7d4ac;
}

.story-hub-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.story-hub-tabs button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(193, 157, 91, 0.28);
  color: #bcb7ae;
  background: rgba(255, 255, 255, 0.025);
  white-space: nowrap;
}

.story-hub-tabs button[aria-selected="true"] {
  color: #f0d598;
  border-color: #b58b48;
  background: rgba(181, 139, 72, 0.15);
}

.story-hub-panel {
  display: grid;
  gap: 12px;
  min-height: 220px;
}

.story-hub-panel[hidden] {
  display: none;
}

.story-chapter-card,
.story-event-card,
.legion-history-entry,
.story-choice-record,
.story-branch-card {
  padding: 15px 17px;
  border: 1px solid rgba(191, 182, 166, 0.16);
  background: rgba(255, 255, 255, 0.026);
}

.story-chapter-card.current {
  border-color: rgba(208, 169, 91, 0.6);
  box-shadow: inset 3px 0 #c39a55;
}

.story-chapter-card header,
.story-event-card header,
.legion-history-entry header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.story-chapter-card h3,
.story-event-card h3,
.legion-history-entry h3 {
  margin: 0;
  color: #e7e1d6;
  font-size: 17px;
}

.story-chapter-card small,
.story-event-card small,
.legion-history-entry small {
  color: #a79068;
}

.story-event-card button,
.story-replay-button {
  margin-top: 10px;
}

.story-identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.story-identity-grid div {
  padding: 11px;
  border: 1px solid rgba(191, 182, 166, 0.13);
}

.story-identity-grid span,
.story-identity-grid strong {
  display: block;
}

.story-identity-grid span {
  color: #aaa49a;
  font-size: 12px;
}

.story-identity-grid strong {
  margin-top: 5px;
  color: #e2c784;
  font-size: 18px;
}

.story-event-modal {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 3, 6, 0.84);
  backdrop-filter: blur(5px);
}

.story-event-panel {
  position: relative;
  width: min(860px, 100%);
  max-height: min(780px, calc(100dvh - 32px));
  overflow-y: auto;
  border: 1px solid rgba(211, 175, 102, 0.72);
  background:
    linear-gradient(180deg, rgba(35, 29, 36, 0.98), rgba(12, 13, 17, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.68);
}

.story-event-panel > header,
.story-event-panel > footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(201, 169, 107, 0.22);
}

.story-event-panel > footer {
  border-top: 1px solid rgba(201, 169, 107, 0.22);
  border-bottom: 0;
}

.story-event-panel header p,
.story-event-panel header h2 {
  margin: 0;
}

.story-event-panel header p,
#story-event-scene {
  color: #a98f65;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.story-event-stage {
  min-height: 290px;
  padding: 34px clamp(22px, 6vw, 60px);
  display: grid;
  align-items: end;
  background:
    radial-gradient(circle at 50% 10%, rgba(114, 76, 138, 0.19), transparent 44%),
    linear-gradient(180deg, rgba(8, 9, 13, 0.15), rgba(8, 9, 13, 0.92));
}

.story-event-copy {
  padding: 20px 22px;
  border-left: 2px solid #b88d4b;
  background: rgba(5, 6, 9, 0.74);
}

.story-event-copy strong {
  display: block;
  min-height: 20px;
  color: #dfbd78;
}

.story-event-copy p {
  min-height: 88px;
  margin: 10px 0 0;
  color: #eee9df;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.8;
  white-space: pre-line;
}

.story-event-choices {
  display: grid;
  gap: 9px;
  padding: 16px 20px;
}

.story-event-choices:empty {
  display: none;
}

.story-event-choices button {
  min-height: 46px;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid rgba(207, 171, 101, 0.46);
  color: #e9dfcc;
  background: rgba(177, 132, 63, 0.1);
}

@media (max-width: 640px) {
  .story-hub-screen {
    padding: 14px;
  }

  .story-hub-heading {
    align-items: flex-start;
  }

  .story-event-modal {
    padding: 8px;
  }

  .story-event-panel {
    max-height: calc(100dvh - 16px);
  }

  .story-event-stage {
    min-height: 260px;
    padding: 20px 14px;
  }

  .story-event-copy {
    padding: 16px;
  }

  .story-event-panel > header,
  .story-event-panel > footer {
    padding: 12px 14px;
  }

  .story-event-copy p {
    font-size: 18px;
  }
}
.event-journal-toolbar,
.event-journal-actions,
.gestation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.event-journal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 16px 0 24px;
}
.event-instance-card {
  display: grid;
  gap: 8px;
  padding: 13px;
  color: #e9dfca;
  text-align: left;
  border: 1px solid rgba(170, 143, 93, .28);
  background: rgba(25, 23, 28, .85);
  align-content: start;
}
.event-instance-card.priority-critical {
  border-color: #a43d3d;
}
.event-instance-card.priority-important {
  border-color: #b88a42;
}
.event-instance-card span,
.event-instance-card small,
.event-instance-card footer {
  color: #a99878;
  font-size: .72rem;
}
.event-instance-card em {
  color: #d1b16e;
  font-style: normal;
}
.event-instance-disclosure {
  min-width: 0;
}
.event-instance-disclosure > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 8px;
  min-height: 0;
  cursor: pointer;
  list-style: none;
}
.event-instance-disclosure > summary::-webkit-details-marker {
  display: none;
}
.event-instance-disclosure > summary strong,
.event-birth-summary {
  grid-column: 1 / -1;
  min-width: 0;
}
.event-instance-disclosure > summary em {
  grid-column: 1 / 3;
  min-width: 0;
}
.event-instance-disclosure > summary time {
  grid-column: 3;
  min-width: 0;
  text-align: right;
}
.event-instance-disclosure > summary strong,
.event-birth-summary {
  overflow-wrap: anywhere;
}
.event-instance-disclosure > summary::after {
  content: "＋";
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  color: #c7aa70;
}
.event-instance-disclosure[open] > summary::after {
  content: "−";
}
.event-unread-label {
  justify-self: end;
  color: #f1c76e;
  font-size: .72rem;
}
.event-instance-details {
  padding-top: 10px;
  border-top: 1px solid rgba(174, 145, 92, .18);
}
.event-instance-open {
  justify-self: start;
  min-height: 44px;
}

@media (max-width: 760px) {
  .event-instance-card {
    gap: 4px;
    padding: 8px 10px;
  }
  .event-instance-disclosure > summary {
    gap: 2px 6px;
    line-height: 1.15;
  }
}

.birth-event-record {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 5px 10px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid rgba(174, 145, 92, .2);
  background: rgba(9, 9, 13, .38);
}

.birth-event-record div {
  min-width: 0;
}

.birth-event-record dt {
  color: #a89d88;
  font-size: 10px;
}

.birth-event-record dd {
  margin: 2px 0 0;
  color: #e8ddc5;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.event-replay-label {
  display: block;
  color: #caae72;
  font-size: 10px;
}
.gestation-detail {
  border-top: 1px solid rgba(170, 143, 93, .25);
  padding-top: 16px;
}
.gestation-detail-list {
  display: grid;
  gap: 12px;
}
.gestation-state-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.gestation-state-group > h3 {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #caae72;
  font-size: 12px;
  letter-spacing: .14em;
}
.gestation-card {
  padding: 15px;
  border: 1px solid rgba(124, 91, 141, .45);
  background: rgba(31, 25, 38, .75);
}
.maternal-status-card {
  border-color: rgba(151, 96, 126, .52);
}
.newborn-status-card {
  border-color: rgba(92, 126, 147, .52);
  background: rgba(23, 31, 38, .76);
}
.gestation-card header,
.gestation-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.gestation-card h4 {
  margin: 2px 0 10px;
}
.gestation-card dl {
  display: grid;
  gap: 4px;
  margin: 10px 0;
}
.gestation-card dt {
  color: #a89a82;
}
.gestation-card dd {
  margin: 0;
}
.gestation-actions button {
  padding: 7px 9px;
}
.personnel-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
  margin: 7px 0;
}
.personnel-breakdown span {
  color: #b9aa92;
}
.minimum-force-note {
  color: #e1b767 !important;
}
.empty-state {
  color: #9d927f;
}

@media (max-width: 720px) {
  .expedition-route-settings {
    grid-template-columns: 1fr;
  }
  .expedition-route-description {
    grid-column: 1;
  }
  .expedition-summary-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .formation-replenish-all {
    align-items: stretch;
    flex-direction: column;
  }
  .summary-manpower-report > div {
    grid-template-columns: 1fr;
  }
  .summary-manpower-report small {
    grid-column: 1;
  }
  .expedition-summary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .expedition-summary-actions button,
  .replenishment-proposal button,
  .captain-event-prompt button {
    width: 100%;
    min-height: 48px;
    height: auto;
    touch-action: manipulation;
  }
  .replenishment-proposal > div {
    display: grid;
    grid-template-columns: 1fr;
  }
  .event-mod-modal { padding: 10px; }
  .event-mod-panel { min-height: 350px; padding: 18px; }
  .event-browser-body { grid-template-columns: 1fr; }
  .event-browser-body nav {
    max-height: 150px;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid #292b32;
  }
}

.commander-status-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-unread-badge,
.captain-event-new {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: #161018;
  background: #e7c56b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.experience-gauge {
  margin: 10px 0;
}

.experience-gauge > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #d9d6e2;
  font-size: 12px;
}

.experience-track {
  height: 7px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid rgba(213, 186, 105, .28);
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
}

.experience-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6f55a2, #d4b55f);
  box-shadow: 0 0 10px rgba(191, 156, 255, .35);
}

.experience-training-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.experience-training-actions > span {
  flex-basis: 100%;
  color: #a9a5b3;
  font-size: 11px;
}

.summary-experience-report {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(154, 119, 211, .28);
  background: rgba(39, 29, 56, .55);
}

.summary-experience-report h3 {
  margin: 0 0 8px;
  color: #d8c8f2;
}

.summary-experience-report > div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.summary-experience-report b {
  color: #e7c56b;
}

.commander-room-screen {
  max-width: 1180px;
  margin: 18px auto;
  padding: 20px;
  border: 1px solid rgba(160, 126, 207, .34);
  background:
    linear-gradient(140deg, rgba(30, 25, 40, .97), rgba(16, 17, 24, .97));
}

.facility-base-screen {
  max-width: 1180px;
  margin: 18px auto;
  border: 1px solid rgba(178, 143, 86, .38);
  background:
    radial-gradient(circle at 50% 0, rgba(110, 72, 39, .16), transparent 42%),
    linear-gradient(145deg, rgba(27, 24, 24, .98), rgba(13, 15, 19, .98));
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
}

.submission-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 24px 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.2);
}

.submission-setting span {
  color: #d6bd7c;
  font-size: 12px;
  letter-spacing: .08em;
}

.submission-setting select {
  min-width: 250px;
  padding: 8px 10px;
  border: 1px solid #62543f;
  color: #ddd2b5;
  background: #17171b;
}

.facility-list {
  display: grid;
  gap: 14px;
  padding: 0 24px 22px;
}
.facility-group {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
}
.facility-group > summary {
  display: flex;
  min-height: 48px;
  padding: 0 14px;
  align-items: center;
  justify-content: space-between;
  color: #d8c69e;
  background: rgba(8,9,12,.58);
  cursor: pointer;
}
.facility-group > summary span {
  color: #89857d;
  font-size: 11px;
}
.facility-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}
.facility-rest-action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 24px 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.2);
}
.facility-rest-action small {
  color: #a99d99;
}

.facility-card {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(7,8,11,.42);
  transition: border-color .2s ease, opacity .2s ease;
}

.facility-card.active {
  border-color: rgba(211,179,109,.5);
  box-shadow: inset 3px 0 0 rgba(211,179,109,.54);
}

.facility-card.inactive { opacity: .74; }
.facility-card header {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 11px;
  align-items: center;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.facility-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(211,179,109,.35);
  color: #ddc17c;
  background: rgba(115,83,41,.14);
  font-size: 21px;
}
.facility-card h3 { margin: 0 0 3px; font-size: 17px; }
.facility-card header strong { color: var(--gold-bright); font-size: 12px; }
.facility-state {
  color: #c7b585;
  font-size: 10px;
  letter-spacing: .12em;
}
.facility-card.inactive .facility-state { color: #827b70; }
.facility-card section { min-height: 72px; padding-top: 11px; }
.facility-card section small { color: var(--muted); letter-spacing: .12em; }
.facility-card ul { margin: 7px 0 0; padding-left: 18px; color: #d6d0c2; font-size: 11px; }
.facility-card li + li { margin-top: 4px; }
.facility-card .facility-next {
  border-top: 1px solid rgba(255,255,255,.06);
}
.facility-next p { margin: 5px 0; color: #d9c68e; font-size: 12px; }
.facility-next span { color: #a49c8e; font-size: 10px; }
.facility-production {
  margin: 11px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}
.facility-production summary {
  min-height: 32px;
  color: #cbb57d;
  font-size: 11px;
  cursor: pointer;
}
.facility-card .facility-production ul {
  display: grid;
  gap: 8px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}
.facility-production-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.07);
  padding: 7px;
}
.facility-production-row span {
  display: grid;
  min-width: 0;
}
.facility-production-row small {
  overflow-wrap: anywhere;
  color: #aaa397;
  font-size: 9px;
}
.facility-card footer { display: flex; gap: 8px; }
.facility-war-overview,
.facility-recommendations {
  margin: 0 24px 18px;
  padding: 16px;
  border: 1px solid rgba(160,126,207,.24);
  background: rgba(18,16,25,.54);
}
.facility-war-overview h3,
.facility-recommendations h3 { margin: 0 0 11px; font-size: 14px; }
.facility-overview-list { display: grid; gap: 7px; }
.facility-overview-row {
  display: grid;
  grid-template-columns: 100px 150px 1fr;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,.035);
  font-size: 11px;
}
.facility-overview-row small { grid-column: 1 / -1; color: var(--muted); }
.facility-recommendations li,
.facility-recommendations p { color: #cfc6b4; font-size: 11px; line-height: 1.7; }

.commander-room-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.commander-room-card {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
}

.commander-room-profile {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.commander-room-portrait,
.commander-room-talk-portrait {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(224, 197, 122, .32);
  border-radius: 8px;
  background: linear-gradient(145deg, #2d2737, #15151d);
}

.commander-room-portrait {
  width: 72px;
  height: 88px;
}

.commander-room-portrait img,
.commander-room-talk-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.commander-room-portrait span,
.commander-room-talk-portrait span {
  font-size: 28px;
  color: #dbc778;
}

.room-captain-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-captain-name h3 {
  margin: 0;
}

.commander-room-facts {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  color: #bdb8c8;
  font-size: 12px;
}

.commander-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.commander-room-actions .experience-training-actions {
  flex-basis: 100%;
}

.commander-room-talk {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(226, 195, 109, .32);
  background: rgba(23, 18, 31, .96);
}

.commander-room-talk-portrait {
  width: 58px;
  height: 70px;
}

.commander-room-talk p {
  margin: 6px 0 0;
  color: #eee9f4;
}

.debug-tools {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 200;
  max-width: 420px;
  max-height: 82vh;
  overflow: auto;
  padding: 10px;
  border: 1px solid #d7b55c;
  background: rgba(12, 12, 16, .97);
  color: #eee;
  font-size: 12px;
}

.debug-tools summary {
  cursor: pointer;
  color: #e6c66e;
  font-weight: 700;
}

.mobile-tap-debug {
  position: fixed;
  z-index: 1000;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  max-width: min(360px, calc(100vw - 16px));
  padding: 7px 9px;
  border: 1px solid #c65b58;
  color: #f0ddd8;
  background: rgba(30, 10, 12, .94);
  font: 10px/1.35 monospace;
  pointer-events: none;
}

.mobile-tap-debug-target {
  outline: 3px solid #f04444 !important;
  outline-offset: -2px;
}

.debug-tools label,
.debug-tools button {
  margin: 5px 3px 0 0;
}

.debug-breeding-lab {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin-block: 12px;
  padding: 10px;
  border: 1px solid var(--border-subtle, rgba(197, 168, 118, 0.35));
}

.debug-breeding-lab label,
.debug-breeding-lab output {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* vNext breeding vault: a production-facing collection view, separate from the
   debug breeding lab and from active Company assignment. */
.breeding-vault-screen {
  width: min(1220px, 100%);
  margin: 0 auto;
  padding: 24px clamp(14px, 3vw, 34px) 120px;
  color: var(--text-primary, #eee7dc);
  font-family: var(--font-body, sans-serif);
}

.breeding-vault-heading,
.breeding-vault-bulk,
.breeding-vault-card-head,
.breeding-vault-card-actions,
.breeding-blueprint-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breeding-vault-heading {
  justify-content: space-between;
  margin-bottom: 18px;
}

.breeding-vault-heading p,
.breeding-vault-heading h2 { margin: 0; }
.breeding-vault-heading p {
  color: var(--text-muted, #a59b8e);
  font-size: 12px;
  letter-spacing: .12em;
}
.breeding-vault-heading h2 { font-family: var(--font-display, serif); }

.breeding-vault-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: thin;
}
.breeding-vault-tabs button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--border-subtle, #5b5147);
  background: var(--surface-base, #171412);
  color: var(--text-secondary, #cfc4b5);
}
.breeding-vault-tabs button[aria-selected="true"] {
  border-color: var(--border-selected, #a37b45);
  background: var(--surface-selected, #31271e);
  color: var(--text-accent, #e4bd78);
}

.breeding-vault-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--surface-raised, #211d19);
  border-left: 3px solid var(--border-subtle, #5b5147);
}
.breeding-vault-filters label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary, #cfc4b5);
  font-size: 12px;
}
.breeding-vault-filters select {
  width: 100%;
  min-height: 44px;
  font-size: 14px;
}

.breeding-vault-bulk {
  position: sticky;
  top: calc(var(--subscreen-header-height, 0px) + 8px);
  z-index: 3;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(29, 24, 20, .96);
  border: 1px solid var(--border-selected, #a37b45);
}
.breeding-vault-bulk button { min-height: 44px; }
.breeding-vault-message { min-height: 1.5em; color: var(--text-accent, #e4bd78); }
.breeding-vault-message.is-error { color: var(--text-critical, #ef8a78); }

.breeding-vault-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.breeding-vault-card {
  min-width: 0;
  padding: 16px;
  background: var(--surface-raised, #211d19);
  border-left: 3px solid var(--border-subtle, #5b5147);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}
.breeding-vault-card.is-protected { border-left-color: #6a91a3; }
.breeding-vault-card[data-rarity="rare"],
.breeding-vault-card[data-rarity="exceptional"],
.breeding-vault-card[data-rarity="aberrant"] { border-left-color: #b78b52; }
.breeding-vault-card-head { align-items: flex-start; }
.breeding-vault-card-head input { width: 20px; height: 20px; flex: 0 0 auto; }
.breeding-vault-card-head > div { min-width: 0; flex: 1; }
.breeding-vault-card h3,
.breeding-vault-card p { margin: 0; }
.breeding-vault-card h3 { font-size: 17px; overflow-wrap: anywhere; }
.breeding-vault-card-meta,
.breeding-vault-card-lineage {
  color: var(--text-secondary, #cfc4b5);
  font-size: 13px;
  line-height: 1.55;
}
.breeding-vault-badges,
.breeding-vault-traits,
.breeding-vault-recommendations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.breeding-vault-badge,
.breeding-vault-trait,
.breeding-vault-recommendation {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--border-subtle, #5b5147);
  color: var(--text-secondary, #cfc4b5);
  font-size: 12px;
}
.breeding-vault-badge.is-rarity { color: var(--text-accent, #e4bd78); }
.breeding-vault-trait.is-weakness { color: var(--text-critical, #ef8a78); }
.breeding-vault-stability { margin-top: 12px; }
.breeding-vault-stability meter { width: 100%; height: 10px; }
.breeding-vault-card-actions { flex-wrap: wrap; margin-top: 14px; }
.breeding-vault-card-actions button { min-height: 44px; flex: 1 1 90px; }
.breeding-vault-empty { grid-column: 1 / -1; padding: 42px 16px; text-align: center; }

.breeding-formalize-dialog {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  color: var(--text-primary, #eee7dc);
  background: var(--surface-raised, #211d19);
  border: 1px solid var(--border-selected, #a37b45);
}
.breeding-formalize-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.breeding-formalize-card { display: grid; gap: 14px; padding: 22px; }
.breeding-formalize-card > p,
.breeding-formalize-card > h2 { margin: 0; }
.breeding-formalize-card label { display: grid; gap: 6px; }
.breeding-formalize-card input,
.breeding-formalize-card select { min-height: 44px; font-size: 16px; }
.breeding-formalize-card > div { display: flex; gap: 10px; }
.breeding-formalize-card button { min-height: 44px; flex: 1; }

.reproduction-contract-card {
  width: min(620px, calc(100vw - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  grid-template-columns: minmax(0, 1fr);
  overflow: auto;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.reproduction-contract-card select[multiple] {
  min-height: 116px;
  padding: 6px;
}

.reproduction-contract-card label > small {
  color: var(--text-muted, #9e9587);
  font-size: var(--font-size-meta, 12px);
  line-height: 1.55;
}

.reproduction-contract-prediction {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.reproduction-contract-prediction > div {
  min-width: 0;
  padding: 9px 10px;
  border-left: 2px solid var(--border-subtle, rgba(208, 173, 111, .35));
  background: var(--surface-raised, rgba(23, 20, 18, .88));
}

.reproduction-contract-prediction dt {
  color: var(--text-muted, #9e9587);
  font-size: var(--font-size-meta, 12px);
}

.reproduction-contract-prediction dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text-primary, #e8dfd0);
}

.reproduction-contract-card label,
.reproduction-contract-card select {
  min-width: 0;
  max-width: 100%;
}

/* Phase 8 Egg Vault and Hatching Rite. The Egg silhouette is CSS-native so
   sourceType extensions and MOD Eggs never depend on a missing raster asset. */
.egg-vault-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--surface-raised, #211d19);
  border-left: 3px solid var(--border-subtle, #5b5147);
}
.egg-vault-toolbar label { display: inline-flex; align-items: center; gap: 8px; }
.egg-vault-toolbar input { width: 20px; height: 20px; }
.egg-vault-card { position: relative; overflow: hidden; }
.egg-vault-miniature {
  display: grid;
  place-items: center;
  min-height: 126px;
  margin: -16px -16px 14px;
  background: radial-gradient(circle at 50% 62%, rgba(126, 79, 49, .28), transparent 55%), #151210;
}
.egg-vault-miniature span,
.egg-hatch-visual span {
  display: block;
  width: 72px;
  aspect-ratio: .76;
  border: 2px solid rgba(198, 156, 95, .58);
  border-radius: 54% 48% 48% 52% / 62% 62% 42% 42%;
  background:
    repeating-radial-gradient(ellipse at 50% 68%, transparent 0 9px, rgba(160, 100, 55, .16) 10px 12px),
    linear-gradient(145deg, #332a22, #171310 70%);
  box-shadow: inset -10px -12px 18px rgba(0, 0, 0, .48), 0 8px 20px rgba(0, 0, 0, .45);
}
.egg-vault-miniature[data-visual-type="magic"] span,
.egg-hatch-visual[data-visual-type="magic"] span { border-color: #7869a0; box-shadow: inset 0 0 22px #35284c, 0 0 18px rgba(107, 85, 151, .32); }
.egg-vault-miniature[data-visual-type="plant"] span,
.egg-hatch-visual[data-visual-type="plant"] span { border-color: #667d4f; background-color: #20291d; }
.egg-vault-miniature[data-visual-type="slime"] span,
.egg-hatch-visual[data-visual-type="slime"] span { border-radius: 48% 52% 42% 58%; border-color: #568c82; }
.egg-vault-miniature[data-visual-type="worm"] span,
.egg-hatch-visual[data-visual-type="worm"] span { border-color: #8f6552; background-image: repeating-linear-gradient(170deg, #39271f 0 9px, #251914 10px 14px); }
.egg-vault-miniature[data-visual-type="tentacle"] span,
.egg-hatch-visual[data-visual-type="tentacle"] span { border-color: #865d76; box-shadow: inset 0 0 20px #402331, 0 0 18px rgba(133, 68, 105, .28); }

.egg-hatch-dialog {
  width: min(820px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  color: var(--text-primary, #eee7dc);
  background: #100e0d;
  border: 1px solid var(--border-selected, #a37b45);
}
.egg-hatch-dialog::backdrop { background: rgba(3, 2, 2, .88); }
.egg-hatch-card {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.1fr);
  gap: 16px 22px;
  min-width: 0;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background:
    linear-gradient(rgba(211, 169, 103, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 169, 103, .035) 1px, transparent 1px),
    radial-gradient(circle at 30% 45%, rgba(89, 48, 31, .28), transparent 42%);
  background-size: 28px 28px, 28px 28px, auto;
}
.egg-hatch-card > header { grid-column: 1 / -1; text-align: center; }
.egg-hatch-card > header p,
.egg-hatch-card > header h2 { margin: 0; }
.egg-hatch-card > header p { color: var(--text-muted, #9e9587); letter-spacing: .18em; font-size: 12px; }
.egg-hatch-card > header h2 { margin-top: 5px; font-family: var(--font-display, serif); }
.egg-hatch-visual {
  display: grid;
  place-items: center;
  min-height: 360px;
  background: radial-gradient(circle, rgba(148, 92, 48, .22), transparent 56%);
}
.egg-hatch-visual span { width: min(190px, 62vw); }
.egg-hatch-card[data-rarity="rare"] .egg-hatch-visual,
.egg-hatch-card[data-rarity="exceptional"] .egg-hatch-visual { background: radial-gradient(circle, rgba(166, 111, 55, .34), transparent 58%); }
.egg-hatch-card[data-rarity="aberrant"] .egg-hatch-visual { background: radial-gradient(circle, rgba(117, 55, 88, .42), transparent 58%); }
.egg-hatch-card.is-hatching .egg-hatch-visual span { animation: egg-hatch-pulse .8s ease-in-out infinite alternate; }
.egg-hatch-card.is-hatching .egg-hatch-visual { animation: egg-hatch-glow 1.2s ease-in-out infinite alternate; }
@keyframes egg-hatch-pulse { to { transform: scale(1.045) rotate(.6deg); filter: brightness(1.35); } }
@keyframes egg-hatch-glow { to { background-color: rgba(121, 69, 42, .15); } }
.egg-hatch-card dl {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.egg-hatch-card dl > div { min-width: 0; padding: 9px 10px; border-left: 2px solid var(--border-subtle, #5b5147); background: rgba(28, 23, 20, .82); }
.egg-hatch-card dt { color: var(--text-muted, #9e9587); font-size: 12px; }
.egg-hatch-card dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.egg-hatch-result { grid-column: 1 / -1; padding: 16px; border-left: 4px solid var(--border-selected, #a37b45); background: rgba(39, 29, 23, .94); }
.egg-hatch-result h3,
.egg-hatch-result p { margin: 0 0 7px; }
.egg-hatch-card > .breeding-vault-message,
.egg-hatch-card > footer { grid-column: 1 / -1; }
.egg-hatch-card > footer { display: flex; flex-wrap: wrap; gap: 10px; }
.egg-hatch-card > footer button { min-height: 46px; flex: 1 1 130px; }

@media (prefers-reduced-motion: reduce) {
  .egg-hatch-card.is-hatching .egg-hatch-visual,
  .egg-hatch-card.is-hatching .egg-hatch-visual span { animation: none; }
}

@media (max-width: 900px) {
  .breeding-vault-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breeding-vault-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .breeding-vault-screen { padding: 14px 10px 130px; }
  .breeding-vault-heading { align-items: flex-start; }
  .breeding-vault-filters { grid-template-columns: 1fr 1fr; padding: 10px; }
  .breeding-vault-list { grid-template-columns: 1fr; }
  .breeding-vault-bulk { top: calc(var(--subscreen-header-height, 0px) + 4px); }
  .breeding-vault-card-actions button { flex-basis: calc(50% - 6px); }
  .reproduction-contract-prediction { grid-template-columns: 1fr; }
  .egg-vault-toolbar { align-items: stretch; flex-direction: column; }
  .egg-hatch-card { grid-template-columns: minmax(0, 1fr); padding: 16px 12px max(16px, env(safe-area-inset-bottom)); }
  .egg-hatch-visual { min-height: 260px; }
  .egg-hatch-card dl { grid-template-columns: 1fr; }
  .egg-hatch-card > header,
  .egg-hatch-result,
  .egg-hatch-card > .breeding-vault-message,
  .egg-hatch-card > footer { grid-column: 1; }
}

.debug-breeding-lab output {
  grid-column: 1 / -1;
  white-space: normal;
  overflow-wrap: anywhere;
}

.physical-status-panel {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(184, 147, 88, 0.38);
  background: linear-gradient(135deg, rgba(55, 28, 42, 0.92), rgba(18, 18, 24, 0.96));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.34);
}

.physical-status-heading,
.physical-status-card-header,
.physical-status-meta,
.pregnancy-base-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.physical-status-heading p {
  margin: 0;
  color: #b99065;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.physical-status-heading h2 {
  margin: 2px 0 0;
  font-size: 17px;
}

.physical-status-heading small,
.pregnancy-base-settings small {
  color: #a99d99;
}

.physical-status-list {
  display: grid;
  gap: 10px;
  margin-top: 11px;
}

.physical-status-card {
  padding: 11px 12px;
  border-left: 3px solid #a76572;
  background: rgba(8, 8, 12, 0.55);
}

.physical-status-card.postpartum {
  border-left-color: #866fb0;
}

.physical-status-card-header strong {
  color: #f0d8c7;
  font-size: 13px;
}

.physical-status-card-header span {
  color: #d5a7ad;
  font-size: 11px;
}

.physical-status-message {
  min-height: 2.8em;
  margin: 9px 0;
  color: #e6dcda;
  line-height: 1.7;
}

.physical-status-gauge {
  overflow: hidden;
  height: 7px;
  margin: 6px 0;
  border: 1px solid rgba(215, 174, 151, 0.32);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
}

.physical-status-gauge > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #78536b, #c0838e);
  transition: width 180ms ease;
}

.physical-status-meta {
  color: #bfb1ae;
  font-size: 10px;
}

.physical-status-tags {
  color: #8f8582;
}

.rear-command-button {
  margin-top: 8px;
}

.pregnancy-effect-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}

.pregnancy-effect-icon {
  padding: 3px 6px;
  border: 1px solid rgba(192, 157, 119, 0.36);
  border-radius: 999px;
  background: rgba(20, 17, 22, 0.9);
  color: #d8c9bf;
  cursor: help;
  font: 600 8px/1.2 Arial, sans-serif;
}

.pregnancy-effect-icon.buff {
  border-color: rgba(111, 171, 175, 0.58);
  color: #a9d9d9;
}

.pregnancy-effect-icon.debuff {
  border-color: rgba(188, 105, 109, 0.58);
  color: #e1a7aa;
}

.pregnancy-effect-icon.role {
  border-color: rgba(187, 154, 84, 0.58);
  color: #e0c181;
}

.pregnancy-effect-icon.mixed {
  border-color: rgba(145, 112, 184, 0.65);
  color: #cab3e7;
}

.pregnancy-debug-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(184, 147, 88, 0.2);
  font-size: 10px;
}

.pregnancy-debug-stats div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.pregnancy-debug-stats dt {
  color: #8f8582;
}

.pregnancy-debug-stats dd {
  margin: 0;
  color: #dfd5d1;
  text-align: right;
}

.pregnancy-base-settings {
  flex-wrap: wrap;
  margin: 10px 0 16px;
  padding: 10px;
  border: 1px solid rgba(184, 147, 88, 0.25);
  background: rgba(0, 0, 0, 0.18);
}

/* 身体状態2.0：戦闘情報と同じ視線内に収めるコンパクト表示 */
.body-status-inline {
  margin: 5px 0 6px;
  padding: 5px 7px;
  border: 1px solid rgba(184, 147, 88, 0.28);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(48, 29, 42, 0.84), rgba(15, 16, 22, 0.82));
}

.gestation-slot-overview {
  display: grid;
  gap: 5px;
}

.gestation-slot-toggle {
  display: grid;
  grid-template-columns: auto auto minmax(72px, 1fr) auto auto;
  margin-top: 0;
}

.gestation-slot-overview-title {
  color: #e2d6c9;
  font: 700 12px/1.2 sans-serif;
  letter-spacing: .04em;
}

.gestation-slot-overview-count {
  color: #bca476;
  font: 700 10px/1 sans-serif;
}

.gestation-slot-progress-track {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(190, 158, 104, .32);
  border-radius: 999px;
  background: rgba(2, 3, 7, .74);
}

.gestation-slot-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #79527d, #bb8e72);
  transition: width .22s ease-out;
}

.gestation-slot-progress-stage {
  color: #d6c4b5;
  font: 700 9px/1 sans-serif;
  white-space: nowrap;
}

.gestation-slot-panel {
  margin-top: 0;
}

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

.gestation-postpartum-summary {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(188, 164, 118, .32);
  border-radius: 4px;
  color: #d6c4b5;
  background: rgba(10, 12, 17, .58);
  font: 700 11px/1.45 sans-serif;
}

.gestation-slot-summary {
  display: grid;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 7px;
  border: 1px solid rgba(188, 164, 118, .36);
  border-radius: 4px;
  background: rgba(10, 12, 17, .58);
}

.gestation-slot-summary.enemy {
  border-color: rgba(185, 139, 191, .56);
  box-shadow: inset 2px 0 rgba(151, 96, 158, .46);
}

.gestation-slot-summary[data-gestation-growth-open] {
  position: relative;
  min-height: 56px;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.gestation-slot-summary[data-gestation-growth-open]:hover {
  border-color: rgba(215, 183, 119, .72);
  background: rgba(20, 22, 29, .76);
}

.gestation-slot-summary[data-gestation-growth-open]:focus-visible {
  outline: 2px solid #d6b576;
  outline-offset: 2px;
}

.gestation-slot-summary[data-gestation-growth-open]
  .gestation-slot-summary-thumbnail::after {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid rgba(235, 216, 178, .65);
  border-radius: 50%;
  color: #f4e8d0;
  background: rgba(5, 6, 9, .82);
  content: "";
  font: 800 9px/1 sans-serif;
  pointer-events: none;
}

.gestation-slot-summary[data-gestation-growth-open]
  .gestation-slot-summary-thumbnail::before {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-top: 1px solid #f4e8d0;
  border-right: 1px solid #f4e8d0;
  content: "";
  pointer-events: none;
}

.gestation-slot-summary.empty {
  grid-template-columns: minmax(0, 1fr);
  opacity: .54;
  border-color: rgba(188, 164, 118, .22);
  background: rgba(10, 12, 17, .38);
}

.gestation-slot-summary-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
}

.gestation-slot-summary-label {
  color: #c9aa6e;
  font: 800 10px/1 sans-serif;
}

.gestation-slot-summary-unit,
.gestation-slot-summary-stage,
.gestation-slot-summary-empty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gestation-slot-summary-unit {
  color: #eee4dc;
  font: 700 10px/1.2 sans-serif;
}

.gestation-slot-summary-stage,
.gestation-slot-summary-empty {
  color: #bdb2aa;
  font: 600 9px/1.2 sans-serif;
}

.gestation-slot-summary-thumbnail {
  --gestation-thumbnail-scale: 1.55;
  --gestation-thumbnail-x: 50%;
  --gestation-thumbnail-y: 64%;
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(190, 162, 115, .25);
  border-radius: 4px;
  background: rgba(4, 5, 8, .72);
}

.gestation-slot-summary.enemy .gestation-slot-summary-thumbnail {
  border-color: rgba(185, 139, 191, .36);
}

.gestation-slot-summary-thumbnail img {
  position: absolute;
  inset: 1px;
  display: block;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  object-fit: cover;
  object-position:
    var(--gestation-thumbnail-x)
    var(--gestation-thumbnail-y);
  transform: scale(var(--gestation-thumbnail-scale));
  transform-origin:
    var(--gestation-thumbnail-x)
    var(--gestation-thumbnail-y);
}

.gestation-slot-summary-thumbnail[data-thumbnail-source-kind="unit"] img,
.gestation-slot-summary-thumbnail[data-thumbnail-source-kind="missing"] img {
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
}

.gestation-slot-summary.no-thumbnail {
  grid-template-columns: minmax(0, 1fr);
}

.gestation-slot-summary-thumbnail[hidden] {
  display: none;
}

.gestation-growth-dialog {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  height: min(880px, calc(100dvh - 32px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(197, 163, 100, .72);
  border-radius: 10px;
  color: #eee7dc;
  background: #0b0d12;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
}

.gestation-growth-dialog::backdrop {
  background: rgba(2, 3, 6, .78);
  backdrop-filter: blur(2px);
}

body.gestation-growth-dialog-open {
  overflow: hidden !important;
}

.gestation-growth-shell {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.gestation-growth-heading {
  display: grid;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 9px 16px;
  border-bottom: 1px solid rgba(197, 163, 100, .3);
  background: linear-gradient(180deg, #171822, #10121a);
}

.gestation-growth-heading > div {
  min-width: 0;
}

.gestation-growth-heading p,
.gestation-growth-heading h2,
.gestation-growth-heading span {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gestation-growth-heading p {
  color: #b9975e;
  font: 800 10px/1.2 sans-serif;
  letter-spacing: .12em;
}

.gestation-growth-heading h2 {
  margin-top: 3px;
  color: #f0e8dd;
  font: 800 18px/1.2 sans-serif;
}

.gestation-growth-heading span {
  display: block;
  margin-top: 3px;
  color: #bcb1a3;
  font: 600 11px/1.2 sans-serif;
}

.gestation-growth-close,
.gestation-growth-arrow {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(198, 167, 111, .38);
  border-radius: 6px;
  color: #eadcc4;
  background: rgba(25, 25, 32, .86);
  cursor: pointer;
}

.gestation-growth-close {
  font: 400 25px/1 sans-serif;
}

.gestation-growth-close:hover,
.gestation-growth-close:focus-visible,
.gestation-growth-arrow:hover,
.gestation-growth-arrow:focus-visible {
  border-color: #d4b374;
  outline: 2px solid rgba(212, 179, 116, .35);
  outline-offset: 1px;
}

.gestation-growth-update {
  min-height: 22px;
  padding: 5px 16px 3px;
  color: #d1b277;
  font: 700 11px/1.25 sans-serif;
  text-align: center;
}

.gestation-growth-update:empty {
  visibility: hidden;
}

.gestation-growth-viewport {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.gestation-growth-arrow {
  align-self: stretch;
  max-height: 88px;
  margin: auto 0;
  font: 400 36px/1 sans-serif;
}

.gestation-growth-arrow:disabled {
  opacity: .28;
  cursor: default;
}

.gestation-growth-image-frame {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 210px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(202, 171, 113, .28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, rgba(89, 74, 55, .25), transparent 60%),
    #050609;
}

.gestation-growth-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 65dvh;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
}

.gestation-growth-locked,
.gestation-growth-missing {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-content: center;
  place-items: center;
  gap: 8px;
  padding: 24px;
  color: #c4b8a6;
  background:
    linear-gradient(135deg, rgba(37, 39, 48, .96), rgba(12, 14, 20, .98));
  text-align: center;
}

.gestation-growth-locked[hidden],
.gestation-growth-missing[hidden],
.gestation-growth-image[hidden] {
  display: none;
}

.gestation-growth-locked > span {
  font-size: 30px;
  filter: grayscale(1);
}

.gestation-growth-locked strong {
  font: 800 17px/1.2 sans-serif;
}

.gestation-growth-locked small,
.gestation-growth-missing {
  font: 600 12px/1.4 sans-serif;
}

.gestation-growth-stage-summary {
  padding:
    10px 16px
    max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(197, 163, 100, .25);
  background: #10121a;
}

.gestation-growth-stage-summary > p {
  display: flex;
  min-height: 26px;
  margin: 0 0 8px;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gestation-growth-stage-summary strong {
  color: #f0e6d5;
  font: 800 15px/1.2 sans-serif;
}

.gestation-growth-stage-summary > p > span:not(.gestation-growth-current-badge) {
  color: #bcb1a3;
  font: 600 12px/1.2 sans-serif;
}

.gestation-growth-current-badge {
  padding: 3px 7px;
  border: 1px solid rgba(208, 173, 107, .5);
  border-radius: 999px;
  color: #ead19d;
  background: rgba(116, 82, 34, .32);
  font: 800 10px/1 sans-serif;
}

.gestation-growth-current-badge[hidden] {
  display: none;
}

.gestation-growth-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.gestation-growth-timeline::before {
  position: absolute;
  top: 17px;
  right: 6%;
  left: 6%;
  height: 1px;
  background: rgba(186, 155, 101, .35);
  content: "";
  pointer-events: none;
}

.gestation-growth-stage-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  padding: 3px 1px;
  place-items: center;
  gap: 1px;
  border: 0;
  color: #cdb88e;
  background: transparent;
  cursor: pointer;
}

.gestation-growth-stage-button > span {
  z-index: 1;
  display: grid;
  min-width: 28px;
  height: 28px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid rgba(201, 171, 112, .55);
  border-radius: 50%;
  background: #171923;
  font: 800 10px/1 sans-serif;
}

.gestation-growth-stage-button.is-current > span {
  border-color: #e1bd77;
  background: #5b421d;
  box-shadow: 0 0 0 2px rgba(225, 189, 119, .2);
}

.gestation-growth-stage-button.is-selected {
  color: #f0ddba;
}

.gestation-growth-stage-button.is-selected > span {
  outline: 2px solid #e4c584;
  outline-offset: 2px;
}

.gestation-growth-stage-button.is-locked {
  color: #77747a;
  cursor: not-allowed;
  opacity: .58;
}

.gestation-growth-stage-button.is-locked > span {
  border-color: rgba(126, 121, 128, .4);
  background: #11131a;
  font-size: 9px;
  filter: grayscale(1);
}

.gestation-growth-stage-button:focus-visible {
  outline: 2px solid #e4c584;
  outline-offset: 0;
}

.gestation-growth-swipe-hint {
  margin: 7px 0 0;
  color: #c9b17f;
  font: 700 11px/1.3 sans-serif;
  text-align: center;
}

.gestation-growth-swipe-hint[hidden],
.gestation-growth-progress[hidden] {
  display: none;
}

.gestation-growth-progress {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.gestation-growth-progress-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #bcb1a3;
  font: 600 11px/1.25 sans-serif;
}

.gestation-growth-progress-copy strong {
  color: #ead9b8;
  font-size: 12px;
}

.gestation-growth-progress-track {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(213, 181, 119, .16);
}

.gestation-growth-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b6731, #d6b573);
}

@media (max-width: 760px) {
  .gestation-growth-dialog {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }

  .gestation-growth-heading {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .gestation-growth-viewport {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 20px;
  }

  .gestation-growth-image-frame {
    min-height: 190px;
  }

  .gestation-growth-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 44px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    transform: translateY(-50%);
  }

  .gestation-growth-arrow.previous {
    left: 4px;
  }

  .gestation-growth-arrow.next {
    right: 4px;
  }

  .gestation-growth-stage-summary {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (max-width: 340px) {
  .gestation-growth-heading h2 {
    font-size: 16px;
  }

  .gestation-growth-viewport {
    padding: 0 16px;
  }

  .gestation-growth-stage-button > span {
    width: 25px;
    height: 25px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .gestation-growth-dialog {
    width: min(820px, 100vw);
    height: 100dvh;
  }

  .gestation-growth-shell {
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .gestation-growth-heading {
    grid-column: 1 / -1;
    min-height: 54px;
  }

  .gestation-growth-update {
    position: absolute;
    top: 55px;
    left: 0;
    z-index: 2;
    width: calc(100% - 220px);
    pointer-events: none;
  }

  .gestation-growth-viewport {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 4px;
    padding: 0 6px;
    min-height: 0;
  }

  .gestation-growth-arrow {
    position: static;
    width: auto;
    height: auto;
    min-height: 44px;
    margin: auto 0;
    transform: none;
  }

  .gestation-growth-image-frame {
    min-height: 0;
  }

  .gestation-growth-stage-summary {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid rgba(197, 163, 100, .25);
  }

  .gestation-growth-stage-summary > p {
    flex-wrap: wrap;
  }

  .gestation-growth-progress-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

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

  .gestation-growth-timeline::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gestation-growth-dialog *,
  .gestation-growth-dialog *::before,
  .gestation-growth-dialog *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.body-status-toggle {
  display: flex;
  width: 100%;
  min-height: 36px;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(184, 147, 88, .28);
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  color: #d7c6ab;
  background: rgba(9, 11, 16, .54);
  font: 700 11px/1.2 sans-serif;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.body-status-toggle:hover,
.body-status-toggle:focus-visible {
  border-color: rgba(221, 183, 111, .72);
  color: #f1ddb4;
  outline: 2px solid rgba(221, 183, 111, .28);
  outline-offset: 1px;
}

.body-status-toggle-panel[hidden] {
  display: none !important;
}

.body-status-inline-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.body-status-inline .body-status-stage-icon {
  display: none;
}

.body-status-inline .body-status-stage-copy {
  flex-basis: 100%;
}

.body-pictogram-section,
.body-combat-effect-section {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.body-status-row-label {
  flex: 0 0 24px;
  color: #a9948c;
  font: 700 8px/1 sans-serif;
  letter-spacing: 0.08em;
}

.body-pictogram-icons {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.body-pictogram {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 28px;
  min-height: 30px;
  align-items: center;
  gap: 3px;
  padding: 1px 4px 1px 1px;
  border: 1px solid rgba(218, 181, 121, 0.34);
  border-radius: 5px;
  color: #e9ddd4;
  background: rgba(10, 12, 17, 0.78);
  cursor: help;
}

.body-pictogram:focus-visible {
  outline: 2px solid #ddb76f;
  outline-offset: 1px;
}

.body-pictogram-glyph {
  --pictogram-accent: #e7c37e;
  --pictogram-secondary: #9c6c98;
  position: relative;
  display: inline-block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 4px;
  color: var(--pictogram-accent);
  background: rgba(27, 20, 31, 0.86);
}

.body-pictogram-glyph img {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
}

.body-pictogram-label {
  max-width: 62px;
  overflow: hidden;
  font: 700 8px/1.15 sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.body-pictogram-icons[data-text-mode="detailed"] .body-pictogram-label {
  max-width: 92px;
  white-space: normal;
}

/* 胎育：太い円と内部形状だけで種別を示す */
.body-pictogram-pregnancy .body-pictogram-glyph::before {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 50%;
  content: "";
  inset: 2px;
  margin: auto;
}

.body-pictogram-pregnancy .body-pictogram-glyph::after {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
  content: "";
  inset: 0;
  margin: auto;
}

.body-pictogram[data-pictogram-id="pregnancy_none"] .body-pictogram-glyph::after {
  display: none;
}

.body-pictogram[data-pictogram-id="pregnancy_check_pending"] .body-pictogram-glyph::after {
  width: 3px;
  height: 3px;
}

.body-pictogram[data-pictogram-id="pregnancy_confirmed"] .body-pictogram-glyph::after {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  background: transparent;
}

.body-pictogram[data-pictogram-id="pregnancy_mana"] .body-pictogram-glyph::after,
.body-pictogram[data-pictogram-id="pregnancy_core"] .body-pictogram-glyph::after {
  border-radius: 1px;
  transform: rotate(45deg);
}

.body-pictogram[data-pictogram-id="pregnancy_soul"] .body-pictogram-glyph::after {
  width: 7px;
  height: 10px;
  border-radius: 70% 15% 70% 35%;
  transform: rotate(35deg);
}

.body-pictogram[data-pictogram-id="pregnancy_egg"] .body-pictogram-glyph::after {
  width: 7px;
  height: 10px;
  border-radius: 55% 55% 48% 48%;
}

.body-pictogram[data-pictogram-id="pregnancy_seed"] .body-pictogram-glyph::after {
  width: 9px;
  height: 6px;
  border-radius: 90% 10% 90% 10%;
  transform: rotate(-35deg);
}

.body-pictogram[data-pictogram-id="pregnancy_slime"] .body-pictogram-glyph::after {
  width: 10px;
  height: 8px;
  border-radius: 55% 55% 42% 42%;
}

.body-pictogram[data-pictogram-id="pregnancy_abyssal"] .body-pictogram-glyph::after {
  width: 11px;
  height: 3px;
  border-radius: 99px;
  box-shadow: 0 -5px 0 -1px currentColor, 0 5px 0 -1px currentColor;
}

.body-pictogram[data-pictogram-id="pregnancy_multiple"] .body-pictogram-glyph::after,
.body-pictogram[data-pictogram-id="pregnancy_beast_litter"] .body-pictogram-glyph::after {
  width: 5px;
  height: 5px;
  box-shadow: -6px 3px 0 -1px currentColor, 6px 3px 0 -1px currentColor;
}

.body-pictogram[data-pictogram-id="pregnancy_birth_ready"] .body-pictogram-glyph::before {
  border-top-color: transparent;
  box-shadow: 0 0 0 2px rgba(231, 195, 126, 0.2);
}

.body-pictogram[data-pictogram-id="pregnancy_postpartum"] .body-pictogram-glyph::after {
  transform: translate(9px, -8px);
  box-shadow: -9px 8px 0 1px currentColor;
}

/* 腹部：胴体線は一定、右側の曲線だけを0〜5で拡大 */
.body-pictogram-abdomen .body-pictogram-glyph::before {
  position: absolute;
  width: 8px;
  height: 20px;
  border: 3px solid currentColor;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  content: "";
  left: 5px;
  top: 2px;
}

.body-pictogram-abdomen .body-pictogram-glyph::after {
  position: absolute;
  width: calc(3px + var(--body-level, 0) * 2px);
  height: calc(7px + var(--body-level, 0) * 2px);
  border: 3px solid currentColor;
  border-left: 0;
  border-radius: 0 90% 90% 0;
  content: "";
  left: 12px;
  top: calc(10px - var(--body-level, 0) * 1px);
}

.body-pictogram-abdomen[data-value="0"] { --body-level: 0; }
.body-pictogram-abdomen[data-value="1"] { --body-level: 1; }
.body-pictogram-abdomen[data-value="2"] { --body-level: 2; }
.body-pictogram-abdomen[data-value="3"] { --body-level: 3; }
.body-pictogram-abdomen[data-value="4"] { --body-level: 4; }
.body-pictogram-abdomen[data-value="5"] { --body-level: 5; }

/* 乳房変化：上半身輪郭と二つの弧の張りで0〜4を示す */
.body-pictogram-breast .body-pictogram-glyph::before {
  position: absolute;
  width: 18px;
  height: 20px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 5px 5px 9px 9px;
  content: "";
  left: 2px;
  top: 4px;
}

.body-pictogram-breast .body-pictogram-glyph::after {
  position: absolute;
  width: calc(3px + var(--breast-level, 0) * 1.2px);
  height: calc(3px + var(--breast-level, 0) * 1.2px);
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 90% 90%;
  content: "";
  left: calc(8px - var(--breast-level, 0) * .5px);
  top: 11px;
  box-shadow: calc(7px + var(--breast-level, 0) * .5px) 0 0 -1px rgba(0, 0, 0, 0), calc(7px + var(--breast-level, 0) * .5px) 0 0 0 currentColor;
}

.body-pictogram-breast[data-value="0"] { --breast-level: 0; }
.body-pictogram-breast[data-value="1"] { --breast-level: 1; }
.body-pictogram-breast[data-value="2"] { --breast-level: 2; }
.body-pictogram-breast[data-value="3"] { --breast-level: 3; }
.body-pictogram-breast[data-value="4"] { --breast-level: 4; }

/* 供給状態：滴の充填・数・位置で色だけに依存せず識別 */
.body-pictogram-lactation .body-pictogram-glyph::before {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid currentColor;
  border-radius: 70% 35% 70% 35%;
  content: "";
  left: 6px;
  top: 6px;
  transform: rotate(45deg);
}

.body-pictogram-lactation .body-pictogram-glyph::after {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  left: 12px;
  top: 12px;
}

.body-pictogram-lactation[data-value="none"] .body-pictogram-glyph::after {
  display: none;
}

.body-pictogram-lactation[data-value="preparing"] .body-pictogram-glyph::after {
  width: 3px;
  height: 3px;
}

.body-pictogram-lactation[data-value="signs"] .body-pictogram-glyph::after {
  box-shadow: 5px 5px 0 -1px currentColor;
}

.body-pictogram-lactation[data-value="active"] .body-pictogram-glyph::after {
  width: 7px;
  height: 7px;
}

.body-pictogram-lactation[data-value="full"] .body-pictogram-glyph::after {
  width: 11px;
  height: 11px;
  left: 9px;
  top: 9px;
}

.body-pictogram-lactation[data-value="after_feeding"] .body-pictogram-glyph::after {
  left: 17px;
  top: 19px;
  box-shadow: -10px -8px 0 -1px currentColor;
}

.body-pictogram-lactation[data-value="reducing"] .body-pictogram-glyph::after {
  width: 5px;
  height: 5px;
  opacity: 0.55;
}

.body-pictogram-special .body-pictogram-glyph::before {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid currentColor;
  content: "";
  left: 5px;
  top: 5px;
  transform: rotate(45deg);
}

.debug-pictogram-catalog {
  display: flex;
  max-height: 180px;
  flex-wrap: wrap;
  gap: 4px;
  overflow: auto;
  padding: 5px;
  border: 1px solid rgba(218, 181, 121, 0.25);
}

.debug-pictogram-catalog .body-pictogram-glyph {
  flex-basis: var(--debug-pictogram-size, 24px);
  width: var(--debug-pictogram-size, 24px);
  height: var(--debug-pictogram-size, 24px);
}

/* 身体状態ピクトグラム：丸みのある小型シルエットと単一の金属枠バー */
.body-pictogram-section {
  min-height: 32px;
  padding: 2px 5px;
  border: 1px solid rgba(177, 143, 88, 0.38);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(70, 59, 54, 0.13), rgba(5, 7, 11, 0.28)),
    rgba(11, 12, 17, 0.62);
  box-shadow: inset 0 1px rgba(238, 211, 157, 0.04);
}

.body-pictogram-section .body-status-row-label {
  padding-left: 2px;
  color: #bca476;
}

.body-pictogram-icons {
  gap: 0;
  overflow-x: auto;
}

.body-pictogram {
  position: relative;
  min-width: 0;
  min-height: 28px;
  gap: 4px;
  padding: 0 6px;
  border: 0;
  border-radius: 2px;
  color: #cdb783;
  background: transparent;
  box-shadow: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.body-pictogram + .body-pictogram::before {
  position: absolute;
  width: 1px;
  height: 15px;
  background: linear-gradient(
    transparent,
    rgba(188, 160, 105, 0.34) 25%,
    rgba(188, 160, 105, 0.34) 75%,
    transparent
  );
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.body-pictogram:hover,
.body-pictogram:focus-visible {
  color: #f0d9a2;
  background: rgba(210, 180, 122, 0.09);
}

.body-pictogram:disabled,
.body-pictogram[aria-disabled="true"] {
  opacity: 0.34;
}

.body-pictogram-glyph {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  overflow: visible;
  border-radius: 0;
  color: inherit;
  background: transparent;
  filter: none;
}

.body-pictogram-glyph::before,
.body-pictogram-glyph::after {
  display: none !important;
}

.body-pictogram-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: inherit;
}

.body-pictogram-glyph.has-mod-image .body-pictogram-svg {
  display: none;
}

.body-pictogram-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 700 8px/1 serif;
}

.body-pictogram-glyph.has-inline-svg .body-pictogram-fallback {
  display: none;
}

.body-pictogram-label {
  max-width: 54px;
  color: #d5c9b8;
  font: 500 8px/1.15 sans-serif;
  letter-spacing: .01em;
}

.body-pictogram-icons[data-text-mode="detailed"] .body-pictogram-label {
  max-width: 82px;
}

.body-pictogram-abdomen {
  color: #f2eee6;
}

.body-pictogram-breast,
.body-pictogram-breast-size {
  color: #f2eee6;
}

.body-pictogram-abdomen .body-pictogram-glyph,
.body-pictogram-breast .body-pictogram-glyph,
.body-pictogram-lactation .body-pictogram-glyph {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
}

.body-pictogram-abdomen,
.body-pictogram-breast,
.body-pictogram-lactation {
  min-height: 40px;
}

.body-pictogram-breast-condition {
  color: #f0dce1;
}

.debug-pictogram-catalog .body-pictogram-glyph {
  flex-basis: var(--debug-pictogram-size, 24px);
  width: var(--debug-pictogram-size, 24px);
  height: var(--debug-pictogram-size, 24px);
}

.body-pictogram-lactation {
  color: #f1eee6;
}

/* 身体状態4.0：鉛筆図譜をそのまま読める大型3カード */
.body-pictogram-section {
  display: block;
  padding: 8px;
}

.body-pictogram-toolbar {
  display: flex;
  min-height: 36px;
  margin-bottom: 7px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.body-pictogram-toolbar-label {
  color: #d7c6ab;
  font: 700 11px/1.2 sans-serif;
}

.body-pictogram-carousel-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.body-pictogram-carousel-controls button {
  display: inline-grid;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(184, 147, 88, .38);
  border-radius: 4px;
  place-items: center;
  color: #dec894;
  background: rgba(9, 11, 16, .72);
  font: 700 18px/1 sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.body-pictogram-carousel-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.body-pictogram-page {
  min-width: 48px;
  color: #d8c8aa;
  font: 700 11px/1 sans-serif;
  text-align: center;
}

.body-pictogram-section .body-status-row-label {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
}

.body-pictogram-icons {
  display: grid;
  grid-template-columns: repeat(3, minmax(158px, 1fr));
  align-items: stretch;
  gap: 9px;
  overflow-x: auto;
  padding: 1px 1px 6px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.body-pictogram-icons[data-carousel-restoring="true"] {
  visibility: hidden;
}

.body-status-visual-card {
  display: grid;
  min-width: 158px;
  padding: 8px;
  border: 1px solid #a49b8b;
  border-radius: 5px;
  grid-template-rows: auto auto;
  color: #2d2c2a;
  background: #f2efe8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  scroll-snap-align: start;
}

.body-status-visual-heading {
  margin-bottom: 6px;
  color: #51483c;
  font: 700 12px/1.2 sans-serif;
  letter-spacing: .04em;
}

.body-status-card-image {
  display: grid;
  width: 100%;
  max-width: 190px;
  min-width: 0;
  min-height: 145px;
  padding: 0;
  border: 1px solid #c9c2b6;
  border-radius: 2px;
  aspect-ratio: 1 / 1;
  place-items: center;
  justify-self: center;
  color: #292826;
  background: #f2efe8;
  cursor: zoom-in;
  touch-action: manipulation;
}

.body-status-card-image:hover,
.body-status-card-image:focus-visible {
  border-color: #8e7954;
  outline: 2px solid rgba(164, 125, 67, .3);
  outline-offset: 2px;
}

.body-status-card-image .body-pictogram-glyph {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  flex-basis: auto;
  overflow: hidden;
  background: #f2efe8;
  filter: none;
}

.body-status-card-image .body-pictogram-glyph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.body-status-card-state {
  display: flex;
  margin-top: 8px;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.body-status-toggle-panel.body-pictogram-section {
  margin-top: 5px;
}

.body-status-toggle-panel.persistent-body-condition,
.body-status-toggle-panel.body-battle-reaction {
  margin-top: 5px;
}

.body-battle-reaction-content[hidden] {
  display: none;
}

.body-status-toggle-panel .body-combat-effect-section {
  margin-top: 5px;
}

.body-status-card-state strong {
  color: #282725;
  font: 700 14px/1.25 sans-serif;
}

.body-status-card-state span {
  color: #655f56;
  font: 600 11px/1 sans-serif;
}

.body-status-visual-card > p {
  margin: 7px 0 9px;
  color: #57534d;
  font: 400 11px/1.55 sans-serif;
}

.body-status-card-chart-link {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #8f806a;
  border-radius: 3px;
  color: #3e372d;
  background: #e7e0d4;
  font: 700 11px/1.2 sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.enemy-gestation-body-banner {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #77618c;
  border-radius: 5px;
  color: #eee7f4;
  background: linear-gradient(115deg, #24192d, #15121c);
  box-shadow: inset 3px 0 #8d68a7;
}

.enemy-gestation-body-banner div {
  display: grid;
  padding: 7px 8px;
  border-right: 1px solid rgba(207, 184, 225, .2);
  gap: 2px;
}

.enemy-gestation-body-banner span,
.enemy-gestation-body-banner small {
  color: #b9a8c8;
  font-size: 9px;
}

.enemy-gestation-body-banner strong {
  font-size: 12px;
}

.gestation-origin-columns {
  display: grid;
  margin-bottom: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gestation-origin-columns section {
  padding: 12px;
  border: 1px solid rgba(190, 174, 139, .25);
  background: rgba(255, 255, 255, .025);
}

.gestation-origin-columns section.is-active {
  border-color: #806096;
  background: linear-gradient(135deg, rgba(82, 43, 96, .25), rgba(18, 15, 25, .8));
}

.gestation-origin-columns h4,
.gestation-origin-columns p {
  margin: 0 0 6px;
}

.gestation-slot-list {
  display: grid;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(190, 174, 139, .25);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  background: rgba(255, 255, 255, .025);
}

.gestation-slot-list h4,
.gestation-slot-list > p {
  grid-column: 1 / -1;
  margin: 0;
}

.gestation-slot-row {
  display: grid;
  min-width: 0;
  min-height: 66px;
  padding: 8px;
  border: 1px solid rgba(190, 174, 139, .3);
  color: #e6ddd1;
  background: rgba(0, 0, 0, .24);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.gestation-slot-row span {
  color: #d7b873;
  font-size: 10px;
}

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

.gestation-slot-row.is-selected {
  border-color: #d2b06d;
  box-shadow: inset 0 0 0 1px rgba(210, 176, 109, .4);
  background: rgba(117, 85, 41, .22);
}

.gestation-slot-row:disabled {
  color: #77716a;
  cursor: default;
  opacity: .72;
}

.medical-chart-aggregate-pane {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.medical-chart-aggregate-pane > small {
  color: #aaa096;
  line-height: 1.5;
}

.enemy-gestation-record-summary {
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid #765989;
  background: linear-gradient(135deg, rgba(70, 38, 82, .32), rgba(13, 12, 17, .7));
}

.enemy-gestation-record-summary header span {
  color: #b9a3ca;
  font-size: 9px;
  letter-spacing: .12em;
}

.enemy-gestation-record-summary header h4 {
  margin: 3px 0 10px;
}

.enemy-gestation-species-record {
  display: grid;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  gap: 4px;
}

.enemy-gestation-species-record li {
  display: flex;
  justify-content: space-between;
}

.human-replenishment-notice {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid rgba(202, 157, 76, .55);
  color: #e6d5b3;
  background: rgba(92, 64, 20, .18);
}

.human-replenishment-notice span {
  display: block;
  margin-top: 2px;
}

.human-replenishment-notice p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.captain-event-modal.enemy-gestation-event {
  background: radial-gradient(circle at 50% 35%, rgba(87, 42, 100, .35), rgba(3, 2, 5, .92));
}

.captain-event-modal.enemy-gestation-event .captain-event-panel {
  border-color: #9c76b5;
  box-shadow: 0 0 0 1px rgba(204, 170, 225, .18),
    0 20px 80px rgba(42, 10, 55, .75);
}

.captain-event-modal.enemy-gestation-event .captain-event-panel::before {
  content: "ENEMY GESTATION";
  display: block;
  margin-bottom: 8px;
  color: #c7a9dc;
  font: 700 10px/1 sans-serif;
  letter-spacing: .18em;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_biological"],
.body-pictogram-pregnancy[data-pictogram-id="pregnancy_beast_litter"] {
  color: #c6819c;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_mana"] {
  color: #9ca9e4;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_soul"],
.body-pictogram-pregnancy[data-pictogram-id="pregnancy_multiple"] {
  color: #b998dc;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_core"] {
  color: #aab8c8;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_egg"] {
  color: #cfb77d;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_seed"] {
  color: #9bb37b;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_slime"] {
  color: #88b8b0;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_abyssal"] {
  color: #9f80bd;
}

.body-pictogram-pregnancy[data-pictogram-id="pregnancy_birth_ready"] {
  color: #eee2b7;
}

.body-pictogram-lactation[data-pregnancy-type="mana_fetus"] {
  color: #a8c8e7;
}

.body-pictogram-lactation[data-pregnancy-type="soul_fetus"] {
  color: #c0a6e1;
}

.body-pictogram-lactation[data-pregnancy-type="core_fetus"],
.body-pictogram-lactation[data-pregnancy-type="seed_gestation"] {
  color: #d8c99c;
}

/* 軍医記録・胎育日誌・育成記録 */
.body-record-shortcuts {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.body-record-shortcuts button {
  padding: 3px 8px;
  border: 1px solid rgba(218, 181, 121, .42);
  border-radius: 3px;
  color: #d9c8ab;
  background: rgba(17, 18, 23, .8);
  font: 600 9px/1.2 sans-serif;
  cursor: pointer;
}

.gestation-records-screen {
  position: fixed;
  z-index: 150;
  display: grid;
  padding: 24px;
  inset: 0;
  place-items: center;
  background: rgba(3, 5, 9, .86);
  backdrop-filter: blur(3px);
}

.gestation-records-screen[hidden] {
  display: none;
}

.gestation-records-shell {
  display: grid;
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(199, 157, 88, .72);
  border-radius: 8px;
  grid-template-rows: auto auto minmax(0, 1fr);
  color: #e8e0d2;
  background:
    linear-gradient(135deg, rgba(65, 42, 53, .22), transparent 42%),
    #0d1016;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72);
}

.gestation-records-heading {
  display: flex;
  padding: 18px 22px 14px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(198, 164, 104, .25);
}

.gestation-records-heading p {
  margin: 0 0 4px;
  color: #b99559;
  font: 700 10px/1.2 sans-serif;
  letter-spacing: .15em;
}

.gestation-records-heading h2 {
  margin: 0;
  color: #f0d7a4;
  font-size: 24px;
}

.gestation-records-heading span {
  display: block;
  margin-top: 5px;
  color: #bcb3a6;
  font-size: 12px;
}

.gestation-record-tabs {
  display: flex;
  padding: 0 20px;
  gap: 2px;
  border-bottom: 1px solid rgba(198, 164, 104, .25);
  background: rgba(0, 0, 0, .2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.gestation-record-tabs button {
  padding: 11px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #a9a095;
  background: transparent;
  cursor: pointer;
}

.gestation-record-tabs button[aria-selected="true"] {
  border-bottom-color: #d0a960;
  color: #f0d7a4;
  background: rgba(208, 169, 96, .08);
}

.gestation-record-panel {
  min-height: 0;
  padding: 18px 22px 26px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.gestation-chart-hero {
  display: grid;
  padding: 16px;
  border: 1px solid rgba(212, 181, 124, .28);
  border-radius: 6px;
  grid-template-columns: minmax(180px, .75fr) minmax(280px, 1.6fr);
  gap: 18px;
  background: rgba(255, 255, 255, .025);
}

.gestation-chart-hero h3,
.gestation-record-section h3 {
  margin: 0 0 9px;
  color: #e7c98f;
  font-size: 15px;
}

.gestation-chart-current-message {
  margin: 0;
  color: #f0e7dc;
  font: 500 18px/1.65 serif;
  white-space: pre-line;
}

.gestation-record-grid,
.gestation-symptom-grid,
.gestation-effect-grid,
.gestation-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.gestation-record-section {
  margin-top: 16px;
}

.gestation-record-item,
.gestation-effect-card,
.gestation-stat-item {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  background: rgba(0, 0, 0, .18);
}

.gestation-record-item span,
.gestation-stat-item span {
  display: block;
  color: #9e958a;
  font-size: 10px;
}

.gestation-record-item strong,
.gestation-stat-item strong {
  display: block;
  margin-top: 3px;
  color: #e9dfd2;
  font-size: 13px;
}

.gestation-effect-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gestation-effect-card.buff {
  border-color: rgba(119, 171, 145, .35);
}

.gestation-effect-card.debuff {
  border-color: rgba(186, 121, 126, .35);
}

.gestation-effect-card h4 {
  margin: 0 0 7px;
  font-size: 13px;
}

.gestation-effect-card ul {
  margin: 0;
  padding-left: 18px;
  color: #d6cec2;
  font-size: 12px;
  line-height: 1.6;
}

.gestation-journal-toolbar {
  position: sticky;
  z-index: 2;
  top: -18px;
  padding: 8px 0 12px;
  background: #0d1016;
}

.gestation-journal-toolbar label {
  color: #bdb3a6;
  font-size: 12px;
}

.gestation-journal-toolbar select {
  margin-left: 8px;
}

.gestation-journal-timeline {
  position: relative;
  display: grid;
  padding-left: 28px;
  gap: 12px;
}

.gestation-journal-timeline::before {
  position: absolute;
  width: 1px;
  content: "";
  inset: 5px auto 5px 10px;
  background: linear-gradient(#d0a960, rgba(208, 169, 96, .1));
}

.gestation-journal-entry {
  position: relative;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 5px;
  background: rgba(255, 255, 255, .025);
}

.gestation-journal-entry::before {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #d0a960;
  border-radius: 50%;
  content: "";
  left: -23px;
  top: 17px;
  background: #0d1016;
}

.gestation-journal-entry.major {
  border-color: rgba(208, 169, 96, .45);
  background: rgba(208, 169, 96, .06);
}

.gestation-journal-entry header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.gestation-journal-entry h3 {
  margin: 0;
  color: #ead2a3;
  font-size: 15px;
}

.gestation-journal-entry time,
.gestation-journal-entry small {
  color: #8f8980;
  font-size: 10px;
}

.gestation-journal-entry p {
  margin: 9px 0 0;
  color: #ddd5ca;
  font: 400 14px/1.7 serif;
  white-space: pre-line;
}

.gestation-history-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(208, 169, 96, .24);
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
}

.gestation-history-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.gestation-history-card h3 {
  margin: 0;
  color: #e6c98f;
}

.gestation-history-card footer {
  display: flex;
  margin-top: 10px;
  gap: 6px;
}

.gestation-empty {
  padding: 28px;
  color: #999188;
  text-align: center;
}

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

.gestation-chart-section,
.gestation-current-condition,
.gestation-all-symptoms,
.gestation-history-list > article {
  padding: 14px;
  border: 1px solid rgba(208, 169, 96, .2);
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
}

.gestation-chart-section h4,
.gestation-current-condition h4,
.gestation-effect-columns h4,
.gestation-history-list h4 {
  margin: 0 0 10px;
  color: #e6c98f;
}

.gestation-fact-grid,
.gestation-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 7px;
}

.gestation-fact-grid > div,
.gestation-stat-grid > div {
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .16);
}

.gestation-fact-grid span,
.gestation-stat-grid span {
  display: block;
  color: #999188;
  font-size: 10px;
}

.gestation-fact-grid strong,
.gestation-stat-grid strong {
  display: block;
  margin-top: 3px;
  color: #e9dfd2;
  font-size: 12px;
}

.gestation-current-condition,
.gestation-all-symptoms {
  margin-top: 14px;
}

.gestation-current-condition p {
  margin: 0;
  color: #f0e7dc;
  font: 500 18px/1.65 serif;
  white-space: pre-line;
}

.gestation-effect-columns {
  display: grid;
  margin-top: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gestation-effect-columns > section {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 5px;
}

.gestation-effect-columns ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.65;
}

.gestation-journal-entry.is-major {
  border-color: rgba(208, 169, 96, .45);
  background: rgba(208, 169, 96, .06);
}

.gestation-journal-entry.is-enemy {
  border-left: 4px solid #8e62ad;
  background: rgba(91, 55, 112, 0.16);
}

.gestation-journal-enemy-label {
  display: inline-block;
  margin: 4px 0;
  padding: 2px 8px;
  border: 1px solid #a77bc4;
  border-radius: 999px;
  color: #eadcf3;
  background: rgba(92, 55, 112, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
}

.gestation-journal-summary {
  margin-bottom: 12px;
}

.gestation-journal-count {
  color: #cbbbd5;
  font-size: 0.86rem;
}

.gestation-journal-entry > div:first-child {
  display: flex;
  justify-content: space-between;
  color: #918980;
  font-size: 10px;
}

.gestation-journal-entry h4 {
  margin: 6px 0;
  color: #ead2a3;
}

.gestation-journal-entry .journal-summary {
  color: #bcb2a4;
  font-family: sans-serif;
  font-size: 12px;
}

.gestation-history-list {
  display: grid;
  margin-top: 14px;
  gap: 10px;
}

.gestation-history-list button {
  margin-top: 9px;
  margin-right: 5px;
}

.gestation-record-empty {
  padding: 28px;
  color: #999188;
  text-align: center;
}

.medical-chart-three-pane {
  display: grid;
  margin-top: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.medical-chart-three-pane.is-specimen-only {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.medical-chart-three-pane.is-specimen-only .medical-chart-image-button,
.medical-atlas-stage-card .medical-chart-image-button {
  aspect-ratio: 3 / 4;
}

.medical-chart-pane {
  display: grid;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(208, 169, 96, .25);
  border-radius: 7px;
  grid-template-rows: auto auto auto 1fr;
  background:
    linear-gradient(180deg, rgba(222, 205, 174, .035), transparent 42%),
    rgba(0, 0, 0, .2);
}

.medical-chart-pane > header {
  display: flex;
  min-height: 32px;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.medical-chart-pane > header span {
  color: #e8cf9d;
  font-size: 14px;
  font-weight: 700;
}

.medical-chart-pane > header strong {
  color: #aaa096;
  font-size: 11px;
}

.medical-chart-image-button {
  display: grid;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 5px;
  aspect-ratio: 1 / 1;
  place-items: center;
  background: #f2efe8;
  cursor: zoom-in;
  touch-action: manipulation;
}

.medical-chart-image-button:hover,
.medical-chart-image-button:focus-visible {
  border-color: rgba(229, 193, 126, .58);
  background-color: #eeeae2;
}

.medical-chart-image-button:disabled {
  cursor: default;
}

.medical-chart-image-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.medical-chart-empty {
  color: #9d968d;
  font: 600 14px/1.5 sans-serif;
  text-align: center;
}

.medical-chart-image-missing::after {
  color: #b7aea2;
  content: "画像なし";
}

.medical-chart-pane > p {
  min-height: 3.2em;
  margin: 9px 2px 0;
  color: #bbb2a7;
  font-size: 11px;
  line-height: 1.6;
}

.medical-chart-pane-facts {
  display: grid;
  margin: 10px 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.medical-chart-pane-facts div {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, .065);
}

.medical-chart-pane-facts dt {
  color: #8f8982;
  font-size: 9px;
}

.medical-chart-pane-facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: #ded5c9;
  font-size: 11px;
}

.medical-chart-modal {
  position: fixed;
  z-index: 180;
  display: grid;
  padding: max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  inset: 0;
  place-items: center;
  background: rgba(1, 3, 6, .92);
  backdrop-filter: blur(5px);
}

.medical-chart-modal[hidden] {
  display: none;
}

.medical-chart-modal-shell {
  display: grid;
  width: min(720px, 96vw);
  max-height: 94dvh;
  padding: 16px;
  border: 1px solid rgba(210, 169, 94, .68);
  border-radius: 8px;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: #0d1016;
  box-shadow: 0 22px 80px rgba(0, 0, 0, .8);
}

.medical-chart-modal-shell > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.medical-chart-modal-shell header p {
  margin: 0;
  color: #ac8952;
  font-size: 9px;
  letter-spacing: .15em;
}

.medical-chart-modal-shell h2 {
  margin: 3px 0;
  color: #efd5a1;
  font-size: 20px;
}

.medical-chart-modal-shell header span {
  color: #aaa197;
  font-size: 11px;
}

.medical-chart-modal-image-wrap {
  display: grid;
  min-height: 0;
  margin-top: 12px;
  aspect-ratio: 1 / 1;
  place-items: center;
  background: #f2efe8;
}

.medical-chart-modal-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.medical-chart-modal.is-body-atlas .medical-chart-modal-shell {
  width: min(760px, 96vw);
}

.medical-chart-modal.is-body-atlas .medical-chart-modal-image-wrap {
  min-width: min(512px, 82vw);
  min-height: min(512px, 82vw);
}

.is-chart-focus {
  border-color: rgba(234, 191, 108, .85) !important;
  box-shadow: 0 0 0 3px rgba(205, 158, 79, .16);
}

.medical-chart-modal-shell > p {
  margin: 10px 0;
  color: #c8beb2;
  font-size: 13px;
  line-height: 1.6;
}

.medical-chart-modal-shell > footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.medical-chart-modal-shell button {
  min-height: 44px;
  touch-action: manipulation;
}

@media (max-width: 1000px) and (min-width: 721px) {
  .medical-chart-three-pane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .medical-chart-pane[data-medical-pane="fetus"] {
    grid-column: 1 / -1;
    width: calc(50% - 6px);
    justify-self: center;
  }

  .medical-chart-three-pane.is-specimen-only
    .medical-chart-pane[data-medical-pane="fetus"] {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .gestation-records-screen {
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }

  .gestation-records-shell {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 5px;
  }

  .gestation-records-heading {
    padding: 12px 12px 10px;
  }

  .gestation-records-heading h2 {
    font-size: 20px;
  }

  .gestation-records-heading button,
  .gestation-record-tabs button,
  .gestation-history-list button,
  .body-record-shortcuts button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .gestation-record-tabs {
    padding-inline: 4px;
  }

  .gestation-chart-hero,
  .gestation-chart-grid,
  .gestation-effect-columns,
  .medical-chart-three-pane {
    grid-template-columns: 1fr;
  }

  .medical-chart-pane[data-medical-pane="fetus"] {
    width: auto;
    grid-column: auto;
  }

  .medical-chart-pane {
    padding: 10px;
  }

  .body-pictogram-icons {
    display: flex;
    gap: 12px;
    overflow-x: auto;
  }

  .body-status-visual-card {
    flex: 0 0 min(68vw, 190px);
    min-width: 158px;
  }

  .body-status-card-image {
    min-width: 150px;
    min-height: 150px;
  }

  .enemy-gestation-body-banner {
    flex: 0 0 min(88vw, 360px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gestation-origin-columns {
    grid-template-columns: 1fr;
  }

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

  .medical-chart-image-button {
    max-height: min(82vw, 420px);
  }

  .medical-chart-modal {
    padding: max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }

  .medical-chart-modal-shell {
    width: 100%;
    max-height: calc(100dvh - 12px);
    padding: 10px;
  }

  .gestation-record-tabs button {
    min-width: 96px;
    flex: 1 0 96px;
    padding-inline: 6px;
  }

  .gestation-record-panel {
    padding: 12px 10px 22px;
  }

  .gestation-chart-hero {
    padding: 12px;
  }

  .gestation-current-condition p {
    font-size: 16px;
  }

  .gestation-journal-toolbar {
    top: -12px;
  }

  .gestation-journal-toolbar select {
    min-height: 44px;
    max-width: calc(100vw - 120px);
  }
}

.body-combat-effect-section {
  padding-inline: 5px;
}

.body-combat-effect-section .pregnancy-effect-icon {
  padding: 2px 5px;
  border-width: 1px;
  font-size: 7px;
}

.debug-pictogram-catalog {
  display: grid;
  max-height: 330px;
  gap: 8px;
  background: #111319;
}

.debug-pictogram-catalog[data-theme="light"] {
  background: #e7e1d4;
}

.debug-pictogram-catalog[data-theme="light"] .body-pictogram {
  color: #54452e;
}

.debug-pictogram-group {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.debug-pictogram-group > strong {
  color: #bda876;
  font-size: 9px;
}

.debug-pictogram-row {
  display: flex;
  min-width: max-content;
  gap: 1px;
}

.debug-pictogram-catalog .body-pictogram {
  flex-direction: column;
  padding: 2px 4px;
}

.debug-pictogram-catalog .body-pictogram-label {
  max-width: 76px;
  font-size: 6px;
  text-align: center;
}

.debug-pictogram-catalog[data-state="hover"] .body-pictogram {
  color: #f2dca6;
  background: rgba(210, 180, 122, 0.12);
}

.debug-pictogram-catalog[data-state="disabled"] .body-pictogram {
  opacity: .32;
  filter: grayscale(.75);
}

.debug-pictogram-catalog[data-state="abnormal"] .body-pictogram {
  color: #d76f70;
}

.debug-breast-combinations {
  flex-basis: 100%;
}

.debug-breast-combination {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px;
  padding: 3px 5px;
  border: 1px solid rgba(203, 169, 112, 0.2);
}

.debug-breast-combination .body-pictogram {
  padding: 0 1px;
}

.debug-breast-combination small {
  grid-column: 1 / -1;
  max-width: calc(var(--debug-pictogram-size, 24px) * 2.6);
  color: #bdb2a2;
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
}

.body-status-stage-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(218, 181, 121, 0.52);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 72, 103, 0.92), rgba(23, 20, 29, 0.98));
}

.body-status-stage-icon.compact {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

.body-status-stage-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.body-status-stage-icon i {
  padding: 2px;
  color: #f0d6b4;
  font: 700 7px/1.1 sans-serif;
  text-align: center;
}

.body-status-stage-copy {
  display: grid;
  flex: 0 1 104px;
  min-width: 76px;
  gap: 1px;
}

.body-status-stage-copy strong {
  color: #f0d8c7;
  font-size: 10px;
}

.body-status-stage-copy small {
  overflow: hidden;
  color: #bbaaa5;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.body-status-stage-gauge {
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.62);
}

.body-status-stage-gauge i,
.physical-status-gauge > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #75506a, #cf98a3);
  transition: width 180ms ease;
}

.body-status-inline .pregnancy-effect-icons {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.body-status-inline-message {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 0;
  color: #d9cfcc;
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 身体状態3.0：継続状態と戦闘反応を別レイヤーで表示する */
.persistent-body-condition {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 7px 9px 8px;
  border-top: 1px solid rgba(211, 180, 125, .24);
  background: linear-gradient(90deg, rgba(49, 35, 43, .38), transparent);
}

.body-status-message-heading,
.body-reaction-heading {
  color: #c7a86d;
  font: 600 11px/1.2 sans-serif;
  letter-spacing: .08em;
}

.body-status-inline-message.body-status-persistent-message {
  display: block;
  min-height: 3.1em;
  overflow: visible;
  margin: 0;
  color: #eee4df;
  font: 500 clamp(13px, 1.15vw, 18px)/1.55 serif;
  white-space: normal;
  -webkit-line-clamp: unset;
}

.body-battle-reaction {
  display: grid;
  gap: 4px;
  min-height: 4.5em;
  margin-top: 7px;
  padding: 8px 10px 9px;
  border: 1px solid rgba(190, 135, 157, .42);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(75, 39, 57, .72), rgba(18, 15, 23, .78));
  box-shadow:
    inset 3px 0 rgba(205, 142, 164, .58),
    0 4px 15px rgba(0, 0, 0, .2);
}

.body-battle-reaction[hidden] {
  display: none;
}

.body-reaction-heading {
  font-size: 12px;
}

.body-reaction-trigger {
  color: #f2c2cd;
  font: 700 clamp(13px, 1vw, 16px)/1.25 sans-serif;
}

.body-reaction-message {
  min-height: 3em;
  margin: 0;
  color: #fff5f1;
  font: 500 clamp(13px, 1.15vw, 18px)/1.55 serif;
  white-space: normal;
}

.battle-reaction-history b {
  color: #e5a9b8;
}

.physical-status-panel {
  margin: 7px 0;
  padding: 7px 9px;
}

.physical-status-heading {
  min-height: 20px;
}

.physical-status-heading h2 {
  font-size: 12px;
}

.physical-status-heading > small {
  font-size: 9px;
}

.physical-status-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.physical-status-card {
  min-height: 0;
  padding: 6px 8px;
}

.physical-status-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(54px, 0.7fr);
  gap: 7px;
}

.physical-status-card-header > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.physical-status-card-header small {
  overflow: hidden;
  color: #b7979e;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.physical-status-message {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  margin: 5px 0;
  font-size: 9px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.physical-status-gauge {
  width: 100%;
  height: 5px;
  margin: 0;
}

.physical-status-meta {
  font-size: 8px;
}

.body-status-message-history {
  margin: 3px 0;
  color: #9f918e;
  font-size: 8px;
}

.body-status-message-history summary {
  width: max-content;
  cursor: pointer;
  color: #c7aaa5;
}

.body-status-message-history ol {
  display: grid;
  gap: 3px;
  max-height: 7.5em;
  overflow: auto;
  margin: 4px 0 0;
  padding-left: 18px;
}

.body-status-message-history b {
  color: #c89ba4;
}

@media (max-width: 900px) {
  .commander-room-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .base-gestation-management {
    padding: 10px;
  }
  .base-gestation-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .base-gestation-target-control {
    align-items: stretch;
    flex-direction: column;
  }
  .base-gestation-target-control select {
    width: 100%;
    min-height: 42px;
  }
  .base-gestation-slot-buttons {
    grid-template-columns: 1fr;
  }
  .base-gestation-slot-buttons button,
  .base-gestation-target-actions button,
  .base-gestation-release {
    min-height: 44px;
  }
  .physical-status-heading,
  .physical-status-card-header,
  .physical-status-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .physical-status-panel {
    margin-inline: 0;
    padding: 11px;
  }
  .pregnancy-debug-stats {
    grid-template-columns: 1fr;
  }
  .commander-status-actions {
    gap: 4px;
  }
  .commander-room-screen {
    padding: 12px;
  }
  .commander-room-talk {
    grid-template-columns: 48px 1fr;
  }
  .commander-room-talk > button {
    grid-column: 1 / -1;
  }

  .physical-status-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .physical-status-card-header .physical-status-gauge {
    grid-column: 1 / -1;
  }

  .body-status-inline-main {
    flex-wrap: wrap;
  }

  .body-status-inline .pregnancy-effect-icons {
    flex-basis: calc(100% - 120px);
  }
}
@media (max-width: 760px) {
  .gestation-slot-toggle {
    grid-template-columns: auto auto minmax(54px, 1fr) auto;
  }

  .gestation-slot-toggle .gestation-slot-progress-stage {
    grid-column: 3;
    grid-row: 2;
    margin-top: -4px;
  }

  .gestation-slot-toggle .gestation-slot-overview-count {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .body-status-toggle {
    min-height: 44px;
  }
}

.defeat-interlude {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 72%, rgba(93, 57, 83, .18), transparent 42%),
    rgba(3, 4, 7, .88);
}

.defeat-interlude[hidden] {
  display: none;
}

.defeat-interlude-card {
  width: min(520px, 100%);
  padding: 30px 28px 26px;
  border: 1px solid rgba(152, 118, 133, .56);
  background: linear-gradient(180deg, rgba(25, 20, 27, .98), rgba(9, 10, 14, .98));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .58);
  text-align: center;
}

.defeat-interlude-kicker {
  color: #9d7d8f;
  font: 700 9px/1 sans-serif;
  letter-spacing: .24em;
}

.defeat-interlude-card h2 {
  margin: 12px 0 8px;
  color: #d5c3c7;
  font-size: 22px;
}

.defeat-interlude-enemy {
  margin: 0 0 18px;
  color: #b795a8;
  font-size: 13px;
}

.defeat-interlude-text {
  margin: 0 auto 22px;
  max-width: 410px;
  color: #d8d1ce;
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-line;
}

.defeat-interlude-card button {
  min-height: 44px;
  touch-action: manipulation;
}

@media (max-width: 360px) {
  .gestation-slot-summary {
    gap: 4px;
    padding-left: 5px;
  }
}

@keyframes final-boss-aura {
  50% {
    transform: scale(1.008);
    border-color: #b085df;
    box-shadow: 0 0 39px rgba(154,96,214,.42), inset 0 0 28px rgba(91,55,145,.24);
  }
}
@keyframes commander-toast {
  0% { opacity: 0; transform: translate(-50%, -14px) scale(.96); }
  15%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -7px) scale(.98); }
}
@keyframes commander-toast-in {
  from { opacity: 0; transform: translate(-50%, -14px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes top-notice-in {
  from { opacity: 0; transform: translate(-50%, -8px) scale(.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes commander-level-flash {
  0%, 100% { box-shadow: none; }
  35% {
    transform: translateY(-4px) scale(1.012);
    border-color: var(--gold-bright);
    box-shadow: 0 0 32px rgba(211,179,109,.45);
  }
}

@keyframes captain-speech-pop {
  from { opacity: 0; transform: translate(-5px, 4px) scale(.94); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes captain-speech-fade {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

/* 表示品質は描画だけを変更し、戦闘ロジック・時計には接続しない。 */
html[data-effective-effects-level="light"] .unit-card.effect-edge-attack {
  border-right-color: #b89559;
  background-image: linear-gradient(
    to left,
    rgba(184, 149, 89, .22),
    rgba(184, 149, 89, .07) 18%,
    transparent 36%
  );
}

html[data-effective-effects-level="light"] .unit-card.effect-edge-hit {
  border-right-color: #a04f58;
  background-image: linear-gradient(
    to left,
    rgba(160, 79, 88, .24),
    rgba(160, 79, 88, .07) 18%,
    transparent 36%
  );
}

html[data-effective-effects-level="light"] .unit-card.effect-edge-skill {
  border-right-color: rgb(var(--skill-color, 180, 145, 90));
  background-image: linear-gradient(
    to left,
    rgba(var(--skill-color, 180, 145, 90), .22),
    rgba(var(--skill-color, 180, 145, 90), .06) 18%,
    transparent 36%
  );
}

html[data-effective-effects-level="light"] .unit-card.effect-edge-critical {
  border-right-color: #f0c96f;
  background-image: linear-gradient(
    to left,
    rgba(240, 201, 111, .28),
    rgba(240, 201, 111, .08) 18%,
    transparent 36%
  );
}

html[data-effective-effects-level="light"] .unit-card.effect-edge-shield-break {
  border-right-color: #83d7ec;
  background-image: linear-gradient(
    to left,
    rgba(131, 215, 236, .25),
    rgba(131, 215, 236, .07) 18%,
    transparent 36%
  );
}

html[data-effective-effects-level="medium"] .battlefield::before,
html[data-effective-effects-level="medium"] .battlefield::after,
html[data-effective-effects-level="medium"] .boss-unit-card.boss-final {
  animation: none !important;
}

html[data-effective-effects-level="medium"] .unit-card,
html[data-effective-effects-level="medium"] .captain-portrait-frame,
html[data-effective-effects-level="medium"] .commander-toast {
  box-shadow: none;
}

html[data-effective-effects-level="medium"] .captain-event-modal,
html[data-effective-effects-level="medium"] .event-mod-modal,
html[data-effective-effects-level="medium"] .story-event-modal {
  backdrop-filter: none;
}

html[data-effective-effects-level="light"] *,
html[data-effective-effects-level="light"] *::before,
html[data-effective-effects-level="light"] *::after {
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
}

html[data-effective-effects-level="light"] .unit-card,
html[data-effective-effects-level="light"] .captain-portrait-frame,
html[data-effective-effects-level="light"] .commander-toast,
html[data-effective-effects-level="light"] .boss-unit-card {
  box-shadow: none !important;
  filter: none !important;
}

html[data-effective-effects-level="light"] .battlefield::before,
html[data-effective-effects-level="light"] .battlefield::after,
html[data-effective-effects-level="light"] .boss-unit-card::before,
html[data-effective-effects-level="light"] .boss-unit-card::after {
  filter: none !important;
}

html[data-effective-effects-level="light"]
  .unit-card.reaction-shield-break .shield-track {
  animation: none !important;
}

html[data-effective-effects-level="light"] .commander-toast.show,
html[data-effective-effects-level="light"] .floor-arrival.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

@media (max-width: 1080px) {
  .game-shell { width: calc(100% - 32px); }
  .commander-list { grid-template-columns: 1fr; }
  .commander-card { min-height: 0; }
  .commander-status-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .commander-status-bar > .commander-status-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .commander-status-actions button {
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 900px) {
  .game-header {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }
  .header-expedition { justify-content: stretch; }
  .header-route-settings { flex-basis: 100%; }
  .header-location { flex: 1; text-align: left; }
  .expedition-bar .zone-info,
  .expedition-bar .clear-record { display: none; }
  .commander-status-bar small { display: none; }
  .captain-speech-bubble {
    max-width: 170px;
  }
}

@media (max-width: 600px) {
  .header-expedition {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
  }
  .header-route-settings {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .expedition-route-recommendation {
    align-items: flex-start;
    flex-direction: column;
  }
  .expedition-route-recommendation strong {
    text-align: left;
  }
  .header-route-field {
    min-height: 44px;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    align-content: initial;
  }
  .header-route-field select {
    min-height: 32px;
    font-size: 12px;
  }
  .header-location {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .battle-status {
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
    font-size: 11px;
  }
  .expedition-toggle-button {
    min-width: 100px;
    min-height: 44px;
    padding-inline: 8px;
  }
  .display-settings-label-full { display: none; }
  .display-settings-label-short { display: inline; }
  .display-settings-button {
    min-width: 72px;
    min-height: 44px;
  }
  .display-settings-dialog {
    width: 100%;
    max-height: min(82dvh, 700px);
    margin: auto 0 0;
    border-width: 1px 0 0;
  }
  .display-settings-card {
    max-height: min(82dvh, 700px);
    overflow-y: auto;
    padding: 18px max(16px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
}

.gestation-library-render {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f2efe8;
}

.gestation-library-chamber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gestation-library-clip {
  position: absolute;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.gestation-library-clip > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gestation-library-modifiers {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(116, 84, 148, .12);
  pointer-events: none;
}

.gestation-library-clip.has-tint .gestation-library-modifiers {
  background: rgba(112, 86, 139, .12);
}

.gestation-library-clip.has-glow .gestation-library-modifiers {
  box-shadow:
    inset 0 0 24px rgba(175, 150, 205, .28),
    0 0 18px rgba(146, 119, 180, .2);
}

.gestation-library-clip.has-particles .gestation-library-modifiers {
  background-image:
    radial-gradient(circle at 25% 34%, rgba(112, 86, 139, .38) 0 2px, transparent 3px),
    radial-gradient(circle at 67% 27%, rgba(112, 86, 139, .3) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 69%, rgba(112, 86, 139, .34) 0 2px, transparent 3px);
}

.gestation-library-clip.has-corruption .gestation-library-modifiers {
  background:
    radial-gradient(ellipse at 18% 78%, rgba(80, 38, 72, .2), transparent 48%),
    radial-gradient(ellipse at 82% 22%, rgba(64, 42, 84, .16), transparent 42%);
}

.gestation-library-clip.has-status .gestation-library-modifiers {
  outline: 2px solid rgba(130, 115, 175, .22);
  outline-offset: -3px;
}

.gestation-library-pane[data-gestation-asset-id="asset10"]
  .gestation-library-modifiers {
  box-shadow:
    inset 0 0 20px rgba(130, 115, 175, .22),
    0 0 14px rgba(130, 115, 175, .12);
}

.enemy-observation-list { margin: 16px 0; }
.enemy-gestation-observation {
  display: grid;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(128, 88, 149, .6);
  border-radius: 7px;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 10px 14px;
  background: rgba(45, 27, 54, .25);
}
.enemy-gestation-observation > header,
.enemy-gestation-observation > footer {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.medical-atlas-heading {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.medical-atlas-heading h3 { margin: 2px 0 0; }
.medical-atlas-heading > div > span {
  color: #cba967;
  font-size: 10px;
  letter-spacing: .14em;
}
.medical-atlas-heading > button img { display: none; }
.medical-atlas-heading > .medical-chart-image-button {
  display: inline-flex;
  width: auto;
  min-height: 36px;
  padding: 7px 10px;
  aspect-ratio: auto;
  cursor: zoom-in;
}
.medical-atlas-categories,
.medical-atlas-bosses {
  display: flex;
  margin-bottom: 10px;
  gap: 6px;
  overflow-x: auto;
}
.medical-atlas-categories button,
.medical-atlas-bosses button {
  min-width: max-content;
  padding: 7px 10px;
  border: 1px solid rgba(208, 169, 96, .24);
  border-radius: 4px;
  color: #c9c1b6;
  background: rgba(0, 0, 0, .2);
}
.medical-atlas-categories button[aria-selected="true"],
.medical-atlas-bosses button[aria-selected="true"] {
  border-color: #d6ae69;
  color: #f1d7a4;
}
.medical-atlas-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}
.medical-atlas-stage-card {
  padding: 8px;
  border: 1px solid rgba(208, 169, 96, .2);
  border-radius: 6px;
  background: rgba(0, 0, 0, .18);
}
.medical-atlas-stage-card h4 { margin: 7px 0 2px; }
.medical-atlas-stage-card p {
  margin: 0;
  color: #aaa096;
  font-size: 11px;
}

@media (max-width: 760px) {
  .medical-atlas-stage-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
  .enemy-gestation-observation {
    grid-template-columns: 1fr;
  }
  .enemy-gestation-observation > header,
  .enemy-gestation-observation > footer {
    grid-column: auto;
  }
  body {
    min-width: 0;
    overflow-x: hidden;
  }
  .game-shell {
    width: calc(100% - 12px);
    margin-block: 6px;
  }
  .battlefield {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px 6px;
    /* Rotated zone backgrounds must not widen the mobile document. */
    overflow: hidden;
  }
  .versus {
    min-height: 24px;
  }
  .commander-status-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .commander-status-bar > .commander-status-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .commander-status-actions button {
    width: 100%;
  }
  .event-mod-modal,
  .captain-event-modal {
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }
  .event-mod-panel,
  .captain-event-panel {
    width: 100%;
    max-height: calc(100dvh - 12px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .event-mod-actions button,
  .event-mod-choice,
  .captain-event-actions button,
  .captain-event-choice,
  .commander-status-actions button {
    min-height: 44px;
    touch-action: manipulation;
  }
  .event-mod-close,
  .captain-event-close {
    min-width: 44px;
    min-height: 44px;
  }
  .body-pictogram-glyph {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }
  .body-pictogram {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .body-pictogram-label {
    max-width: 48px;
    font-size: 7px;
  }
  .facility-list { grid-template-columns: 1fr; padding-inline: 12px; }
  .facility-group-grid { grid-template-columns: 1fr; padding: 10px; }
  .facility-rest-action {
    align-items: stretch;
    flex-direction: column;
    margin-inline: 12px;
  }
  .facility-production-row {
    grid-template-columns: 1fr 1fr;
  }
  .facility-production-row > span {
    grid-column: 1 / -1;
  }
  .facility-production-row button {
    min-height: 44px;
  }
  .submission-setting {
    align-items: stretch;
    flex-direction: column;
    margin-inline: 12px;
  }
  .submission-setting select { min-width: 0; width: 100%; }
  .facility-war-overview,
  .facility-recommendations { margin-inline: 12px; }
  .facility-overview-row { grid-template-columns: 1fr 1fr; }
  .player-army .unit-card.has-captain {
    min-height: 176px;
    padding-left: 120px;
  }
  .player-army .unit-card.has-captain .body-status-inline {
    box-sizing: border-box;
    width: calc(100% + 105px);
    margin-left: -105px;
  }
  .body-pictogram-toolbar {
    min-height: 44px;
  }
  .body-pictogram-carousel-controls button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .body-pictogram-icons {
    width: 100%;
    scroll-padding-inline: 1px;
  }
  .body-status-visual-card {
    flex: 0 0 100%;
    min-width: 0;
  }
  .body-status-card-image {
    width: 100%;
    max-width: 230px;
  }
  .captain-portrait-panel {
    top: 12px;
    left: 11px;
    width: 100px;
  }
  .captain-portrait-frame {
    width: 96px;
    height: 124px;
  }
  .captain-portrait-name {
    width: 108px;
    margin-left: -6px;
    font-size: 9px;
  }
  .captain-speech-bubble {
    top: -5px;
    left: 104px;
    max-width: min(190px, calc(100vw - 160px));
  }
  .controls {
    align-items: stretch;
  }
  .controls .primary-button,
  .controls .secondary-button {
    width: auto;
  }
  .captain-event-prompt {
    align-items: stretch;
    flex-direction: column;
  }
  .captain-event-prompt > div:last-child {
    justify-content: flex-end;
  }
  .captain-event-modal {
    padding: 12px;
  }
  .captain-event-panel {
    min-height: 330px;
    padding: 18px;
  }
  .captain-event-dialogue {
    min-height: 90px;
    padding: 18px 3px 12px;
  }
  .captain-event-dialogue p {
    font-size: 13px;
  }
}

/* Final responsive override for the saved-formation layout. */
@media (max-width: 600px) {
  .formation-slots {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 10px;
  }
  .formation-slot,
  .formation-current-unit,
  .formation-current-captain,
  .formation-choice-panel,
  .formation-detail {
    min-width: 0;
  }
  .formation-commander-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .formation-commander-summary small {
    text-align: left;
  }
}

@media (max-width: 430px) {
  .expedition-route-settings {
    grid-template-columns: minmax(0, 1fr);
  }
  .expedition-destination,
  .expedition-advanced-settings {
    min-width: 0;
  }
  .expedition-destination select,
  .expedition-advanced-settings select {
    width: 100%;
    min-height: 44px;
  }
  .formation-change-actions,
  .formation-detail-grid,
  .battle-action-dialog .dialog-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final mobile battle-card sizing. Keep this after legacy responsive rules. */
@media (max-width: 760px) {
  .player-army .unit-card.has-captain {
    min-height: 0;
    padding: 8px;
    cursor: default;
  }
  .player-army .unit-card.has-captain .captain-card-hero {
    display: grid;
    grid-template-columns: minmax(0, 46.5fr) minmax(0, 53.5fr);
    gap: 8px;
    width: 100%;
    min-height: 220px;
    margin-bottom: 8px;
  }
  .player-army .unit-card.has-captain .captain-portrait-panel {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: auto;
    min-width: 0;
    height: 220px;
  }
  .player-army .unit-card.has-captain .captain-portrait-frame {
    width: 100%;
    height: 220px;
    min-height: 220px;
    border-radius: 6px;
  }
  .player-army .unit-card.has-captain .captain-portrait-name {
    width: 100%;
    margin: 0;
    padding: 30px 8px 8px;
    font-size: 11px;
  }
  .player-army .unit-card.has-captain .captain-speech-bubble {
    top: 8px;
    right: -8px;
    left: 8px;
    width: auto;
    max-width: none;
  }
  .player-army .unit-card.has-captain .captain-state-summary {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    height: 220px;
    overflow: hidden;
    flex-direction: column;
    padding: 13px 11px 11px;
    border: 1px solid rgba(154, 117, 180, .42);
    border-radius: 6px;
    background:
      linear-gradient(150deg, rgba(108, 68, 128, .2), transparent 58%),
      rgba(15, 15, 22, .92);
  }
  .player-army .unit-card.has-captain .captain-label {
    display: none;
  }
  .player-army .unit-card.has-captain .body-status-inline,
  .player-army .unit-card.has-captain.mobile-expanded .body-status-inline,
  .player-army .unit-card.has-captain .stats,
  .player-army .unit-card.has-captain .deep-trait-list {
    display: none;
  }
  .captain-state-sheet {
    padding: 0;
    align-items: end;
  }
  .captain-state-sheet-card {
    width: 100%;
    max-height: 88dvh;
    border-width: 1px 0 0;
    border-radius: 15px 15px 0 0;
  }
}

@media (max-width: 380px) {
  .player-army .unit-card.has-captain .captain-card-hero {
    grid-template-columns: minmax(135px, 45fr) minmax(0, 55fr);
    gap: 7px;
    min-height: 205px;
  }
  .player-army .unit-card.has-captain .captain-portrait-panel,
  .player-army .unit-card.has-captain .captain-portrait-frame,
  .player-army .unit-card.has-captain .captain-state-summary {
    height: 205px;
    min-height: 205px;
  }
  .player-army .unit-card.has-captain .captain-state-summary {
    padding: 11px 9px 9px;
  }
}

/* Final mobile shell visibility. Keep this after desktop/base display rules. */
@media (max-width: 760px) {
  .mobile-expedition-summary {
    display: flex !important;
  }

  .mobile-header-action {
    display: inline-flex !important;
  }

  .header-route-settings,
  .expedition-bar {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  .header-route-settings[data-mobile-open="true"] {
    display: grid !important;
    visibility: visible;
    pointer-events: auto;
  }

  .expedition-bar[data-mobile-open="true"] {
    display: grid !important;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-bottom-nav {
    display: grid !important;
  }

  .mobile-bottom-nav[hidden],
  body.expedition-running .mobile-bottom-nav {
    display: none !important;
  }

  .battle-control-bar[hidden] {
    display: none !important;
  }

  body.expedition-running .battle-control-bar:not([hidden]) {
    display: flex !important;
  }

  body.subscreen-active .mobile-expedition-summary,
  body.subscreen-active .mobile-header-action,
  body.subscreen-active .header-route-settings,
  body.subscreen-active .expedition-bar {
    display: none !important;
  }

  .faction-unit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faction-heading {
    min-height: 64px;
    padding: 11px 12px;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .faction-heading > div {
    min-width: 0;
    flex: 1 1 150px;
  }

  .faction-heading > strong {
    margin-left: 0;
    font-size: 10px;
  }

  .owned-army-filter {
    position: sticky;
    z-index: 2;
    top: 0;
    margin-inline: 10px;
    padding-block: 6px;
    background: rgba(14, 15, 19, .96);
  }

  .owned-army-view {
    position: sticky;
    z-index: 2;
    top: 56px;
    margin-inline: 10px;
    padding-bottom: 6px;
    background: rgba(14, 15, 19, .96);
  }

  .owned-army-view button {
    min-height: 44px;
  }

  .owned-unit-card {
    min-width: 0;
  }

  .owned-army-screen .experience-training-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owned-army-screen .experience-training-actions > span {
    grid-column: 1 / -1;
  }

  .owned-army-screen .experience-training-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-block: 9px;
    touch-action: manipulation;
  }

  body.mobile-expedition-sheet-open .game-header {
    z-index: 72;
  }

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

  .expedition-toggle-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .header-route-settings,
  .expedition-bar {
    bottom: var(--mobile-fixed-control-clearance);
    max-height: calc(100dvh - var(--mobile-fixed-control-clearance) - 8px);
    padding-bottom: 14px;
    border-radius: 15px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .captain-state-sheet {
    z-index: 62;
    right: 6px;
    bottom: var(--mobile-fixed-control-clearance);
    left: 6px;
    width: auto;
    padding: 0;
    pointer-events: none;
  }

  .captain-state-sheet-card {
    width: 100%;
    max-height: min(44dvh, 390px);
    border-width: 1px;
    border-radius: 12px;
    pointer-events: auto;
  }

  .captain-state-sheet-card > header {
    min-height: 56px;
    padding: 6px max(8px, env(safe-area-inset-left));
    touch-action: pan-y pinch-zoom;
  }

  .captain-state-sheet-content {
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }

  body.captain-state-sheet-open {
    overflow-y: auto;
    padding-bottom:
      calc(min(44dvh, 390px) + var(--mobile-fixed-control-clearance) + 12px);
  }
}

@media (max-width: 430px) {
  .owned-army-view button {
    overflow: hidden;
    padding-inline: 6px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .owned-army-view button {
    padding-inline: 5px;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }

  .owned-army-view-label-full { display: none; }
  .owned-army-view-label-compact { display: inline; }
}

/* Landscape phones keep the desktop comparison layout. The card already
   contains body status, so suspend the duplicate floating observer without
   discarding its selected captain or expansion state. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .game-shell {
    width: auto;
    max-width: none;
    margin-inline:
      max(8px, env(safe-area-inset-left))
      max(8px, env(safe-area-inset-right));
  }

  .header-expedition {
    min-width: 0;
    flex-wrap: wrap;
  }

  .header-route-settings,
  .expedition-bar {
    max-width: 100vw;
  }

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

  .commander-status-actions button {
    min-width: 0;
    min-height: 44px;
    white-space: normal;
  }

  .captain-state-sheet[data-landscape-suspended="true"] {
    display: none !important;
  }
}

/* PC primary shell -------------------------------------------------------
   Reuse the mobile header controls, navigation and captain observer so the
   desktop and phone layouts share one state owner and one set of handlers. */
@media (min-width: 761px) {
  :root {
    --pc-control-bar-height: 64px;
    --pc-primary-nav-height: 64px;
    --pc-primary-nav-clearance: 98px;
  }

  body {
    padding-bottom: var(--pc-primary-nav-clearance);
  }

  .game-shell {
    width: min(1280px, calc(100% - 32px));
    padding-top: calc(var(--pc-control-bar-height) + 12px);
    padding-bottom: 24px;
  }

  body.subscreen-active .game-shell {
    padding-top: 0;
  }

  .game-header {
    position: fixed;
    z-index: 40;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    width: 100%;
    min-height: var(--pc-control-bar-height);
    padding:
      8px max(16px, calc((100vw - 1280px) / 2));
    border: 0;
    border-bottom: 1px solid rgba(211, 179, 109, .28);
    align-items: center;
    background: rgba(9, 11, 15, .97);
    box-shadow: 0 7px 24px rgba(0, 0, 0, .42);
  }

  .header-legion {
    display: none;
  }

  .header-expedition {
    position: relative;
    display: flex;
    width: min(1280px, 100%);
    margin-inline: auto;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .mobile-expedition-summary {
    display: grid !important;
    min-width: 0;
    margin-right: auto;
    grid-template-columns: minmax(180px, 1.35fr) auto auto;
    align-items: center;
    gap: 10px;
    color: #c7c0b2;
    font: 13px/1.25 Arial, sans-serif;
  }

  .mobile-expedition-summary strong {
    overflow: hidden;
    color: #e4d5b5;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-expedition-summary span {
    padding-left: 10px;
    border-left: 1px solid rgba(211, 179, 109, .2);
    white-space: nowrap;
  }

  .mobile-expedition-summary span:last-child {
    color: #bca66f;
    font-weight: 700;
  }

  .mobile-header-action {
    display: inline-flex !important;
    min-width: 94px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid rgba(211, 179, 109, .32);
    align-items: center;
    justify-content: center;
    color: #d7c8a7;
    background: rgba(27, 28, 34, .92);
    font-size: 13px;
    cursor: pointer;
  }

  .mobile-header-action[aria-expanded="true"] {
    border-color: #b99456;
    color: #f0d79d;
    background: rgba(87, 66, 34, .34);
  }

  .game-header .display-settings-button,
  .game-header .battle-status,
  .game-header .header-location {
    display: none;
  }

  .expedition-toggle-button {
    min-width: 148px;
    min-height: 48px;
    padding: 8px 18px;
    border-color: #b18c4d;
    color: #fff0c6;
    background:
      linear-gradient(145deg, rgba(113, 77, 29, .72), rgba(50, 38, 22, .96));
    box-shadow: inset 0 0 0 1px rgba(255, 224, 158, .08);
    font-size: 15px;
  }

  body.expedition-running:not(.expedition-paused)
    .expedition-toggle-button {
    border-color: #a75b62;
    background:
      linear-gradient(145deg, rgba(113, 43, 52, .72), rgba(52, 27, 31, .96));
  }

  body.expedition-paused .expedition-toggle-button {
    border-color: #c09b53;
    background:
      linear-gradient(145deg, rgba(133, 94, 33, .8), rgba(57, 42, 23, .96));
  }

  .header-route-settings,
  .expedition-bar {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  .header-route-settings[data-mobile-open="true"] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: grid !important;
    width: min(650px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid rgba(211, 179, 109, .38);
    border-radius: 8px;
    grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(125px, .8fr));
    gap: 8px;
    visibility: visible;
    background: rgba(14, 16, 21, .99);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .62);
    pointer-events: auto;
  }

  .expedition-bar[data-mobile-open="true"] {
    position: fixed;
    z-index: 39;
    top: calc(var(--pc-control-bar-height) + 8px);
    right: max(16px, calc((100vw - 1280px) / 2));
    display: grid !important;
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100dvh - 160px);
    margin: 0;
    padding: 14px;
    overflow-y: auto;
    border: 1px solid rgba(211, 179, 109, .34);
    border-radius: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    visibility: visible;
    background: rgba(14, 16, 21, .99);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .62);
    pointer-events: auto;
  }

  .mobile-sheet-heading {
    display: flex !important;
    min-height: 44px;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-sheet-heading button {
    width: 44px;
    min-height: 44px;
    border: 0;
    color: #eee3ca;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
  }

  .expedition-bar > div {
    min-width: 0;
  }

  .commander-status-bar {
    display: none;
  }

  .battlefield {
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
  }

  .battlefield > *,
  .army-panel,
  .unit-list,
  .unit-card,
  .captain-card-hero {
    min-width: 0;
  }

  .army-panel {
    align-self: start;
  }

  .army-heading {
    min-height: 50px;
    padding: 9px 12px;
  }

  .army-heading p {
    margin-bottom: 2px;
    font-size: 8px;
  }

  .army-heading h2 {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .unit-list {
    padding: 7px;
  }

  .unit-card {
    min-height: 98px;
    margin-bottom: 6px;
    padding: 9px 10px;
  }

  .player-army .unit-card.has-captain {
    min-height: 134px;
    padding: 9px 148px 9px 102px;
  }

  .player-army .unit-card.has-captain .captain-card-hero {
    display: contents;
  }

  .player-army .unit-card.has-captain .captain-portrait-panel {
    top: 9px;
    left: 9px;
    width: 82px;
  }

  .player-army .unit-card.has-captain .captain-portrait-frame {
    width: 82px;
    height: 112px;
  }

  .player-army .unit-card.has-captain .captain-portrait-name {
    padding: 24px 6px 6px;
    font-size: 11px;
  }

  .player-army .unit-card.has-captain .captain-state-summary {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    width: 130px;
    height: 112px;
    min-width: 0;
    padding: 7px;
    overflow: hidden;
    border: 1px solid rgba(154, 117, 180, .34);
    border-radius: 5px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: rgba(39, 26, 46, .48);
  }

  .captain-state-summary-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
  }

  .captain-state-summary-title {
    overflow: hidden;
    color: #ead9f2;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .captain-state-summary-count {
    color: #b99bc9;
    font: 700 10px/1.2 Arial, sans-serif;
    white-space: nowrap;
  }

  .captain-state-summary-stage {
    overflow: hidden;
    margin-top: 4px;
    color: #d9d1c5;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .captain-state-summary-remaining {
    overflow: hidden;
    margin-top: 2px;
    color: #98959d;
    font-size: 11px;
    line-height: 1.3;
  }

  .captain-state-summary-warning {
    display: none;
  }

  .captain-state-open {
    min-height: 44px;
    margin-top: 3px;
    border: 1px solid rgba(199, 165, 211, .42);
    border-radius: 3px;
    color: #eadff0;
    background: rgba(81, 53, 93, .34);
    font-size: 11px;
    cursor: pointer;
  }

  .player-army .unit-card.has-captain .captain-label {
    display: none;
  }

  .player-army .unit-card.has-captain .unit-topline {
    line-height: 1.2;
  }

  .player-army .unit-card.has-captain .company-label {
    margin: 2px 0 0;
    line-height: 1.2;
  }

  .player-army .unit-card.has-captain .unit-name {
    margin: 1px 0 2px;
    line-height: 1.2;
  }

  .player-army .unit-card.has-captain .troop-label {
    margin-top: 1px;
    line-height: 1.2;
  }

  .player-army .unit-card.has-captain .battle-manpower-row {
    margin: 2px 0;
    gap: 1px;
  }

  .player-army .unit-card.has-captain .manpower-track {
    height: 4px;
  }

  .player-army .unit-card.has-captain .shield-row,
  .player-army .unit-card.has-captain .hp-row {
    margin: 2px 0;
  }

  .player-army .unit-card.has-captain .shield-track,
  .player-army .unit-card.has-captain .hp-track {
    margin-top: 2px;
  }

  .unit-topline,
  .hp-label,
  .shield-label,
  .battle-manpower-label {
    font-size: 11px;
  }

  .unit-role,
  .unit-level,
  .unit-state {
    font-size: 11px;
  }

  .company-label {
    margin-top: 5px;
    font-size: 11px;
  }

  .unit-name {
    margin: 3px 0 6px;
    font-size: 14px;
  }

  .captain-label,
  .troop-label {
    margin-top: 3px;
    font-size: 11px;
  }

  .player-army .unit-card .body-status-inline,
  .player-army .unit-card .stats,
  .enemy-army .unit-card .stats,
  .player-army .unit-card .deep-trait-list {
    display: none !important;
  }

  #physical-status-panel {
    display: none !important;
  }

  #expedition-setup,
  #pre-formation-button,
  #stop-expedition-button,
  #retreat-expedition-button {
    display: none !important;
  }

  .versus {
    align-self: start;
    margin-top: 64px;
  }

  .versus span {
    width: 1px;
    height: 30px;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 55;
    right: 50%;
    bottom: 10px;
    display: grid !important;
    width: min(820px, calc(100vw - 32px));
    min-height: var(--pc-primary-nav-height);
    padding: 6px;
    border: 1px solid rgba(211, 179, 109, .38);
    border-radius: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
    background: rgba(10, 12, 16, .97);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
    transform: translateX(50%);
  }

  .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    right: -1px;
    bottom: 100%;
    left: -1px;
    height: 24px;
    background: linear-gradient(to top, rgba(8, 10, 14, .78), transparent);
    pointer-events: none;
  }

  .mobile-bottom-nav[hidden] {
    display: none !important;
  }

  .mobile-bottom-nav button {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 50px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    place-content: center;
    grid-template-columns: auto auto;
    gap: 7px;
    color: #9c9ba0;
    background: transparent;
    cursor: pointer;
  }

  .mobile-bottom-nav button span {
    font-size: 15px;
  }

  .mobile-bottom-nav button b {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-nav button[aria-current="page"] {
    border-color: rgba(211, 179, 109, .4);
    color: #f0ddae;
    background: rgba(116, 86, 39, .28);
  }

  .mobile-bottom-nav button:focus-visible,
  .mobile-header-action:focus-visible,
  .expedition-toggle-button:focus-visible,
  .captain-state-open:focus-visible {
    outline: 2px solid #f0c86f;
    outline-offset: 2px;
  }

  .mobile-more-sheet {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid !important;
    padding-bottom: var(--pc-primary-nav-clearance);
    place-items: end center;
    background: rgba(0, 0, 0, .58);
  }

  .mobile-more-sheet[hidden] {
    display: none !important;
  }

  .mobile-more-card {
    width: min(600px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(211, 179, 109, .38);
    border-radius: 12px;
    background: #15171d;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .65);
  }

  .mobile-more-card header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-more-card h2 {
    margin: 0;
    font-size: 18px;
  }

  .mobile-more-card header button {
    width: 44px;
    min-height: 44px;
    border: 0;
    color: #eee3ca;
    background: transparent;
    font-size: 24px;
  }

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

  .mobile-more-grid button {
    min-height: 52px;
    border: 1px solid rgba(211, 179, 109, .24);
    color: #ded2b8;
    background: rgba(39, 35, 31, .65);
  }

  .battle-control-bar {
    z-index: 54;
    right: max(16px, calc((100vw - min(820px, calc(100vw - 32px))) / 2));
    bottom: calc(var(--pc-primary-nav-clearance) + 4px);
  }

  body.expedition-running:not(.expedition-paused) .battle-control-bar {
    display: none !important;
  }

  body.expedition-paused .battle-control-bar:not([hidden]) {
    display: flex;
  }

  body.expedition-paused .battle-control-bar > #battle-control-pause {
    display: none;
  }

  .captain-state-sheet {
    z-index: 52;
    top: calc(var(--pc-control-bar-height) + 12px);
    right: 14px;
    bottom: var(--pc-primary-nav-clearance);
    width: 370px;
  }

  .captain-state-sheet-card {
    height: 100%;
    max-height: none;
    border-radius: 8px;
  }

  .captain-state-sheet-card > header h2 {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .captain-state-sheet-content {
    padding: 12px;
  }

  body.captain-state-sheet-open {
    padding-bottom: var(--pc-primary-nav-clearance);
  }

  body.captain-state-sheet-open
    .player-army
    .unit-card.has-captain {
    padding-right: 10px;
  }

  body.captain-state-sheet-open
    .player-army
    .unit-card.has-captain
    .captain-state-summary {
    display: none;
  }
}

@media (min-width: 1360px) {
  body.captain-state-sheet-open .game-shell {
    width: min(1280px, calc(100% - 420px));
    margin-right: 400px;
    margin-left: 20px;
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  body.captain-state-sheet-open .game-shell {
    width: calc(100% - 408px);
    margin-right: 392px;
    margin-left: 16px;
  }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .mobile-expedition-summary {
    grid-template-columns: minmax(150px, 1fr) auto;
  }

  .mobile-expedition-summary span:last-child {
    display: none;
  }

  .mobile-header-action {
    min-width: 82px;
    padding-inline: 8px;
  }

  .expedition-toggle-button {
    min-width: 128px;
  }

  .captain-state-sheet {
    top: auto;
    right: 12px;
    bottom: var(--pc-primary-nav-clearance);
    left: 12px;
    width: auto;
    max-width: none;
  }

  .captain-state-sheet-card {
    max-height: min(46dvh, 430px);
  }

  body.captain-state-sheet-open .game-shell {
    padding-bottom:
      calc(min(46dvh, 430px) + var(--pc-primary-nav-clearance) + 16px);
  }
}
/* New-game onboarding is a single-purpose shell; gameplay state remains in script.js. */
.onboarding-screen {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 18%, rgba(112, 72, 145, 0.2), transparent 38%),
    rgba(5, 6, 9, 0.96);
}

.onboarding-screen[hidden] {
  display: none !important;
}

.onboarding-card {
  width: min(100%, 620px);
  max-height: min(92dvh, 760px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
  border: 1px solid rgba(203, 174, 112, 0.55);
  border-radius: 14px;
  padding: clamp(20px, 4vw, 36px);
  background: linear-gradient(160deg, #17171e, #0d0d12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  overflow: hidden;
}

.onboarding-progress {
  min-height: 1.4em;
  margin: 0 0 10px;
  color: #ad9bc5;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.onboarding-card h1 {
  margin: 0;
  color: #ead9a4;
  font-size: clamp(25px, 5vw, 38px);
}

.onboarding-body {
  margin: 20px 0;
  color: #e2ded5;
  font-size: 15px;
  line-height: 1.85;
  white-space: pre-line;
}

.onboarding-fields {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.onboarding-attrition-list,
.onboarding-batch-gestation-list {
  display: grid;
  gap: 8px;
}

.onboarding-attrition-row,
.onboarding-batch-gestation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(203, 174, 112, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.onboarding-attrition-row details,
.onboarding-batch-gestation-row small {
  grid-column: 1 / -1;
}

.onboarding-attrition-row details ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.onboarding-manpower-transition {
  color: #f0dfaa;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.onboarding-attrition-total {
  margin: 0;
  color: #f0c88d;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.onboarding-first-return-comment {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #9570b5;
  color: #e2ded5;
  background: rgba(104, 70, 127, 0.13);
}

.onboarding-batch-gestation-row {
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.3fr);
}

.onboarding-feature-unlock {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(149, 112, 181, 0.5);
  border-radius: 8px;
  color: #dbc7ed;
}

.onboarding-fields label,
.onboarding-choice-grid label {
  display: grid;
  gap: 6px;
  color: #d7c9a3;
  font-size: 13px;
}

.onboarding-fields input,
.onboarding-fields select {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  font: inherit;
}

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

.onboarding-language-choice {
  min-height: 52px;
  padding: 12px;
  border: 1px solid rgba(203, 174, 112, 0.35);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

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

.onboarding-captain-list article {
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid rgba(203, 174, 112, 0.24);
  border-radius: 8px;
  text-align: center;
}

.onboarding-captain-list img {
  width: 100%;
  max-width: 120px;
  height: 112px;
  margin: 0 auto 8px;
  border-radius: 6px;
  object-fit: cover;
  object-position: 50% 18%;
}

.onboarding-captain-list p,
.onboarding-captain-list blockquote {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.onboarding-captain-list blockquote {
  color: #d9c28f;
}

.onboarding-captain-list strong,
.onboarding-captain-list span {
  display: block;
}

.onboarding-captain-list span {
  margin-top: 4px;
  color: #aaa3b5;
  font-size: 12px;
}

.onboarding-error {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: #e19aa0;
  font-size: 13px;
}

.onboarding-actions {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.onboarding-actions button {
  min-height: 48px;
}

.onboarding-completion-summary {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.onboarding-completion-summary > img {
  width: 128px;
  height: 164px;
  border-radius: 8px;
  object-fit: cover;
  object-position: 50% 18%;
}

.onboarding-completion-summary dl,
.onboarding-glossary dl {
  display: grid;
  margin: 0;
  gap: 5px;
}

.onboarding-completion-summary dl div,
.onboarding-glossary dl div {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: 8px;
}

.onboarding-completion-summary dt,
.onboarding-glossary dt {
  color: #aaa3b5;
}

.onboarding-completion-summary dd,
.onboarding-glossary dd {
  margin: 0;
}

.onboarding-completion-summary blockquote {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #e0c88e;
}

.onboarding-next-goal {
  padding: 10px 12px;
  border-left: 3px solid #c6a05b;
  background: rgba(198, 160, 91, .1);
}

.onboarding-glossary {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(203, 174, 112, .25);
  border-radius: 7px;
}

.onboarding-glossary summary {
  min-height: 32px;
  cursor: pointer;
}

.next-objective {
  display: flex;
  width: min(760px, calc(100% - 32px));
  min-height: 48px;
  margin: 12px auto;
  padding: 10px 16px;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(205, 168, 96, .56);
  border-radius: 8px;
  color: #ecd8ad;
  background: linear-gradient(90deg, rgba(117, 78, 33, .32), rgba(21, 21, 27, .92));
  text-align: left;
  white-space: pre-line;
  cursor: pointer;
}

.next-objective[hidden] {
  display: none;
}

.next-objective.is-compact {
  min-height: 42px;
  font-size: 12px;
}

.commander-captain-selector {
  position: sticky;
  top: var(--subscreen-header-height, 0px);
  z-index: 4;
  grid-column: 1 / -1;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 12px;
  background: linear-gradient(
    180deg,
    rgba(12, 13, 17, .98) 80%,
    rgba(12, 13, 17, 0)
  );
}

.commander-captain-selector button {
  display: grid;
  min-width: 0;
  min-height: 52px;
  padding: 5px 8px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(191, 167, 119, .3);
  border-radius: 7px;
  color: #c9c0b4;
  background: rgba(14, 15, 20, .88);
  cursor: pointer;
}

.commander-captain-selector button[aria-pressed="true"] {
  border-color: #c9a55f;
  color: #f2dfb5;
  background: rgba(109, 76, 31, .28);
}

.commander-captain-selector img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}

.commander-progressive-details {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(191, 167, 119, .25);
}

.commander-progressive-details > summary {
  min-height: 36px;
  color: #d8bf8d;
  cursor: pointer;
}

.relationship-cap-guide {
  display: grid;
  gap: 2px;
}

.relationship-cap-guide strong {
  color: #bba579;
}

.mobile-more-grid button {
  position: relative;
}

.mobile-more-grid button > i {
  position: absolute;
  top: 5px;
  right: 6px;
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #16110a;
  background: #e2bd72;
  font-style: normal;
  font-size: 10px;
}

.onboarding-return-card {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(178, 137, 213, 0.58);
  border-left: 4px solid #9570b5;
  border-radius: 10px;
  background: rgba(104, 70, 127, 0.13);
}

.onboarding-return-card > p {
  margin: 0;
  color: #bca4d2;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.onboarding-return-card h3 {
  margin: 5px 0 10px;
}

.onboarding-return-card button {
  min-height: 48px;
  margin-top: 12px;
}

.base-gestation-management.is-onboarding-locked {
  opacity: 0.72;
}

body.onboarding-active {
  overflow: hidden;
}

/* The first formation review is a real subscreen, not an onboarding modal.
   Keep the document as its only scroll owner even if Safari retains the
   overlay class for one frame during the transition. */
body.onboarding-formation-review,
body.onboarding-active.onboarding-formation-review {
  position: static !important;
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.onboarding-formation-review .game-shell,
body.onboarding-active.onboarding-formation-review .game-shell,
body.onboarding-formation-review .formation-screen {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
  touch-action: pan-y pinch-zoom;
}

body.onboarding-formation-review .formation-screen {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

body.onboarding-formation-review .formation-screen > .owned-army-actions {
  position: fixed;
  z-index: 70;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  width: auto;
  padding: 8px;
  border: 1px solid rgba(211, 179, 109, .42);
  background: rgba(10, 12, 16, .97);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .46);
}

body.onboarding-formation-review .formation-screen > .owned-army-actions #deploy-button {
  width: min(100%, 520px);
  min-height: 48px;
}

body.onboarding-formation-review .mobile-bottom-nav {
  display: none !important;
}

/* Battle focus layout. Color values live in ui-theme-tokens.css. */
.battlefield {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
  /* The focus column must not inherit the varying height of the enemy grid. */
  align-items: start;
  gap: 14px;
  color: var(--ui-text-primary);
  border-color: var(--ui-border-subtle);
  background: var(--ui-bg-canvas);
}

.battle-captain-focus-anchor {
  display: none !important;
}

.battle-overview,
.battle-captain-focus {
  min-width: 0;
  border: 1px solid var(--ui-border-subtle);
  background: var(--ui-surface-translucent);
  box-shadow: 0 14px 32px var(--ui-shadow-panel);
}

.battle-overview-heading,
.battle-captain-focus > header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ui-border-subtle);
  box-shadow: inset 3px 0 0 var(--ui-context-accent);
}

.battle-overview-heading p,
.battle-overview-heading h2,
.battle-captain-focus > header p,
.battle-captain-focus > header h2 {
  margin: 0;
}

.battle-overview-heading p,
.battle-captain-focus > header p {
  color: var(--ui-text-subdued);
  font: 700 12px/1.2 Arial, sans-serif;
  letter-spacing: .14em;
}

.battle-overview-heading h2,
.battle-captain-focus > header h2 {
  margin-top: 3px;
  color: var(--ui-text-primary);
  font-size: 18px;
}

.battle-frontline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 10px;
}

.battle-frontline .army-panel {
  min-width: 0;
  box-shadow: none;
  background: var(--ui-bg-panel);
}

.battle-frontline .army-heading {
  gap: 8px;
  padding: 10px;
}

.battle-frontline .army-heading p {
  font-size: 12px;
}

.battle-frontline .army-heading h2 {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-frontline .unit-list {
  display: grid;
  gap: 7px;
  padding: 7px;
}

.player-army .unit-card.has-captain {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  background: transparent;
}

.player-army .unit-card.has-captain > .unit-topline,
.player-army .unit-card.has-captain > .company-label,
.player-army .unit-card.has-captain > .unit-name,
.player-army .unit-card.has-captain > .captain-label,
.player-army .unit-card.has-captain > .troop-label,
.player-army .unit-card.has-captain > .body-status-inline,
.player-army .unit-card.has-captain > .battle-manpower-row,
.player-army .unit-card.has-captain > .shield-row,
.player-army .unit-card.has-captain > .hp-row,
.player-army .unit-card.has-captain > .stats,
.player-army .unit-card.has-captain > .deep-trait-list {
  display: none !important;
}

/* Keep the existing battle-speech node alive: the battle engine writes into it. */
.player-army .unit-card.has-captain > .captain-card-hero {
  display: contents;
}

.player-army .unit-card.has-captain .captain-portrait-panel {
  position: static;
  width: 0;
  min-width: 0;
  height: 0;
  min-height: 0;
  overflow: visible;
}

.player-army .unit-card.has-captain .captain-portrait-frame,
.player-army .unit-card.has-captain .captain-state-summary {
  display: none !important;
}

.player-army .unit-card.has-captain .captain-speech-bubble {
  position: absolute;
  z-index: 4;
  top: 6px;
  left: 6px;
  width: min(220px, calc(100% - 12px));
  max-width: none;
  pointer-events: none;
}

.battle-captain-select {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid transparent;
  color: var(--ui-unselected-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.battle-captain-select[hidden] { display: none; }

.battle-captain-select::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

.battle-captain-select[aria-selected="true"] {
  color: var(--ui-selection-text);
  border-color: var(--ui-selection-border);
  background: var(--ui-selection-bg);
}

.battle-captain-select[aria-selected="true"]::before {
  background: var(--ui-selection-marker);
}

.battle-captain-selection-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--ui-selection-marker);
  font-size: 10px;
  opacity: 0;
}

.battle-captain-select[aria-selected="true"] .battle-captain-selection-dot {
  opacity: 1;
}

.battle-captain-select:focus-visible {
  outline: 2px solid var(--ui-focus-ring);
  outline-offset: 2px;
}

.battle-captain-select-image {
  width: 48px;
  height: 60px;
  object-fit: cover;
  object-position: var(--battle-portrait-position, center top);
  transform-origin: center top;
  transform:
    translateY(var(--battle-portrait-offset-y, 0%))
    scale(var(--battle-portrait-scale, 1));
  opacity: .74;
  filter: saturate(.72);
}

.battle-captain-select[aria-selected="true"] .battle-captain-select-image {
  opacity: 1;
  filter: saturate(1);
}

.battle-captain-select-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.battle-captain-select-copy strong,
.battle-captain-select-copy small,
.battle-captain-select-manpower {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-captain-select-copy strong { font-size: 14px; }
.battle-captain-select-copy small,
.battle-captain-select-manpower { font-size: 12px; }
.battle-captain-select-copy small { color: var(--ui-text-secondary); }

.battle-captain-select-track,
.enemy-summary-track {
  display: block;
  height: 4px;
  overflow: hidden;
  background: var(--ui-border-subtle);
}

.battle-captain-select-fill,
.enemy-summary-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ui-manpower);
  transition: width .25s ease;
}

.enemy-army .unit-card {
  min-height: 0;
  margin: 0;
  padding: 9px 10px;
  border-color: var(--ui-border-subtle);
  border-left-color: var(--ui-enemy);
  background: var(--ui-surface-soft);
}

.enemy-army .unit-card .stats,
.enemy-army .unit-card .deep-trait-list,
.enemy-army .unit-card .boss-skill-name {
  display: none;
}

.enemy-army .unit-card .unit-name {
  margin: 4px 0 7px;
  font-size: 14px;
}

.enemy-army .unit-card.boss-unit-card {
  min-height: 0;
  border-color: var(--ui-accent-mystic-strong);
  border-left-width: 5px;
  background: var(--ui-bg-elevated);
  box-shadow: inset 3px 0 0 var(--ui-accent-mystic);
  animation: none;
}

.enemy-army .unit-card.battle-overflow-unit {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.enemy-unit-summary {
  display: grid;
  gap: 5px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px dashed var(--ui-border-strong);
  color: var(--ui-text-secondary);
  background: var(--ui-bg-panel);
}

.enemy-unit-summary strong { color: var(--ui-text-primary); font-size: 13px; }
.enemy-unit-summary span { font-size: 12px; }
.enemy-summary-fill { background: var(--ui-enemy); }

.battle-engagement-summary {
  min-height: 20px;
  margin: 0 10px 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--ui-context-accent);
  color: var(--ui-text-secondary);
  background: var(--ui-bg-panel);
  font-size: 13px;
}

.battle-target-indicator {
  color: var(--ui-text-primary);
}

.battle-captain-focus {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.battle-captain-focus-body {
  display: grid;
  grid-template-columns: minmax(150px, 44%) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.battle-captain-focus-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-bg-elevated);
}

.battle-captain-focus-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--battle-portrait-position, center top);
  transform-origin: center top;
  transform:
    translateY(var(--battle-portrait-offset-y, 0%))
    scale(var(--battle-portrait-scale, 1));
}

.battle-captain-focus-portrait span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ui-text-primary);
  font-size: 32px;
}

.battle-captain-focus-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.battle-captain-focus-copy > p,
.battle-captain-focus-copy > strong { margin: 0; }
.battle-captain-focus-copy > p { color: var(--ui-text-secondary); font-size: 14px; }
.battle-captain-focus-copy > strong { font-size: 16px; }

.battle-captain-focus-stats {
  display: grid;
  gap: 6px;
  margin: 2px 0;
}

.battle-captain-focus-stats div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ui-border-subtle);
}

.battle-captain-focus-stats dt,
.battle-captain-focus-stats dd { margin: 0; font-size: 12px; }
.battle-captain-focus-stats dt { color: var(--ui-text-secondary); }
.battle-captain-focus-stats dd { color: var(--ui-text-primary); }

.battle-captain-focus-condition {
  padding: 7px 8px;
  border-left: 3px solid var(--ui-accent-mystic);
  background: var(--ui-bg-elevated);
}

.battle-captain-focus-comment { font-size: 14px; font-style: italic; }
.battle-captain-focus-state { min-height: 44px; margin-top: auto; }

[data-ui-context="gestation"] {
  border-color: var(--ui-border-subtle);
}

[data-ui-context="archive"] {
  --ui-context-accent: var(--ui-accent-archive);
}

@media (max-width: 960px) {
  .battlefield {
    grid-template-columns: minmax(0, 1fr);
  }

  .battle-captain-focus-body {
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
  }

  .battle-captain-focus-portrait { min-height: 230px; }
}

@media (max-width: 600px) {
  .floor-arrival {
    width: min(92vw, 430px);
    min-width: 0;
    padding-inline: 14px;
    font-size: 15px;
  }

  .floor-arrival.boss-arrival {
    min-width: 0;
  }

  .battlefield {
    gap: 10px;
    padding: 8px;
    overflow-x: hidden;
  }

  .battle-frontline {
    grid-template-columns: minmax(0, 1fr);
  }

  .battle-frontline > .versus {
    min-height: 22px;
  }

  .battle-frontline > .battle-captain-focus {
    width: 100%;
    scroll-margin-top: calc(
      var(--battle-announcement-top, 108px) + 8px
    );
  }

  .battle-frontline > .versus span { max-width: 72px; }

  .battle-captain-focus-body {
    grid-template-columns: minmax(116px, 45%) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .battle-captain-focus-portrait { min-height: 210px; }
  .battle-captain-focus-copy > p { font-size: 14px; }
  .battle-captain-focus-copy > strong { font-size: 14px; }
  .battle-engagement-summary { font-size: 12px; }
}

/* Formation cards keep their three-column PC layout while assigning more of
   each card to readable labels rather than ornamental spacing. */
.formation-slot-heading > span,
.formation-current-unit > span,
.formation-current-captain > span:first-child,
.formation-current-unit small,
.formation-current-captain small,
.company-captain-summary,
.company-captain-summary small,
.formation-commander-summary span,
.formation-commander-summary small,
.captain-placement-badge,
.formation-candidate small,
.formation-candidate em,
.formation-captain-candidate small,
.formation-detail-grid span,
.formation-detail p {
  font-size: 12px;
}

.formation-slot-heading strong,
.formation-current-unit strong,
.formation-current-captain strong,
.formation-commander-summary strong,
.formation-candidate > span,
.formation-captain-candidate > span {
  font-size: 15px;
}

.formation-slot-heading,
.formation-current-unit,
.formation-current-captain {
  padding-block: 11px;
}

@media (max-width: 760px) {
  .enemy-army .unit-card .unit-name {
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .enemy-army .unit-role,
  .enemy-army .unit-state,
  .enemy-army .hp-label,
  .enemy-army .shield-label {
    font-size: 12px;
    line-height: 1.35;
  }

  .enemy-army .hp-value,
  .enemy-army .shield-value {
    min-width: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .enemy-unit-summary strong { font-size: 13px; }
  .enemy-unit-summary span,
  .battle-engagement-summary { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .battle-captain-select-fill,
  .enemy-summary-fill { transition: none; }
}

/* Mobile releases run inside an itch.io iframe whose outer document may have
   scrolling disabled. The game shell must therefore own vertical scrolling;
   relying on the iframe document/body makes every tall screen immovable on
   iOS Safari even though fixed controls remain clickable. */
@media (max-width: 760px),
  (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body,
  body.subscreen-active,
  body.captain-state-sheet-open {
    padding-bottom: 0;
  }

  .game-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding-bottom:
      calc(42px + var(--mobile-fixed-control-clearance));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  body.subscreen-active .subscreen-header {
    width: 100%;
    margin-inline: 0;
  }

  body.captain-state-sheet-open .game-shell {
    padding-bottom:
      calc(min(44dvh, 390px) + var(--mobile-fixed-control-clearance) + 12px);
  }

  body.onboarding-formation-review,
  body.onboarding-active.onboarding-formation-review {
    height: 100% !important;
    min-height: 0;
    overflow: hidden !important;
    touch-action: auto;
  }

  body.onboarding-formation-review .game-shell,
  body.onboarding-active.onboarding-formation-review .game-shell {
    height: 100% !important;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
}

.onboarding-scroll-hint {
  position: relative;
  margin: 6px 0 0;
  padding-top: 14px;
  color: #d9c28f;
  font-size: 12px;
  text-align: center;
}

.onboarding-scroll-hint::before {
  content: "";
  position: absolute;
  inset: -18px 0 auto;
  height: 28px;
  background: linear-gradient(to bottom, transparent, #111118);
  pointer-events: none;
}

@media (max-width: 600px) {
  .onboarding-screen {
    align-items: start;
  }

  .onboarding-card {
    margin: auto 0;
    padding: 20px 16px;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  }

  .onboarding-choice-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-captain-list {
    grid-template-columns: 1fr;
  }

  .onboarding-captain-list article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    text-align: left;
  }

  .onboarding-captain-list img {
    width: 72px;
    height: 96px;
    margin: 0;
  }

  .onboarding-completion-summary {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .onboarding-completion-summary > img {
    width: 88px;
    height: 116px;
  }

  .commander-captain-selector button {
    min-height: 48px;
    padding: 4px;
    grid-template-columns: 30px minmax(0, 1fr);
    font-size: 11px;
  }

  .commander-captain-selector img {
    width: 30px;
    height: 30px;
  }

  .onboarding-actions {
    grid-template-columns: 1fr;
  }

  .onboarding-actions button {
    width: 100%;
  }

  .onboarding-attrition-row,
  .onboarding-batch-gestation-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .onboarding-attrition-row > b,
  .onboarding-attrition-row details,
  .onboarding-batch-gestation-row small {
    grid-column: 1 / -1;
  }
}

/* UI/UX quality regressions: keep mobile controls tappable without enlarging
   their desktop counterparts. */
@media (max-width: 760px) {
  :root {
    --subscreen-header-height: 62px;
  }

  .commander-screen button,
  .commander-screen select,
  .commander-screen summary,
  .header-route-settings select,
  .expedition-bar select,
  .display-settings-dialog select,
  .display-settings-dialog summary {
    min-height: 44px;
  }

  .display-settings-dialog label,
  .base-gestation-repeat-control {
    min-height: 44px;
  }

  .commander-card-actions button,
  .body-record-shortcuts button,
  .base-gestation-slot-buttons button,
  .base-gestation-target-actions button,
  .base-gestation-release {
    min-height: 44px;
  }

  .header-route-field select,
  .commander-captain-selector button,
  .commander-section-tabs button,
  .display-settings-dialog select,
  .display-settings-dialog summary {
    font-size: var(--mobile-control-size, 14px);
  }
}

@media (max-width: 360px) {
  .base-gestation-target-actions {
    grid-template-columns: 1fr;
  }

  .mobile-expedition-summary strong {
    display: -webkit-box;
    overflow: hidden;
    max-height: 2.35em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  body.captain-state-sheet-open .battlefield {
    grid-template-columns: minmax(0, 1fr);
  }

  body.captain-state-sheet-open .battlefield > .versus {
    display: flex;
    min-height: 34px;
    margin: 0;
    align-items: center;
    justify-content: center;
  }

  body.captain-state-sheet-open .battlefield > .versus span {
    width: 34px;
    height: 1px;
  }
}

/* Final event-presentation sizing overrides. These follow the legacy modal
   rules so the shared presentation model wins without changing MOD hooks. */
.captain-event-panel,
.event-mod-panel {
  width: min(960px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.captain-event-panel > header,
.event-mod-panel > header {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 4vw, 46px);
}

.captain-event-portrait,
.event-mod-portrait-frame {
  width: 100%;
  height: min(48vh, 340px);
  min-height: 260px;
}

.captain-event-portrait img,
.event-mod-portrait-frame img {
  object-fit: contain;
  object-position: top center;
}

@media (max-width: 640px) {
  .captain-event-modal,
  .event-mod-modal,
  .story-event-modal {
    padding: 0;
  }

  .captain-event-panel,
  .event-mod-panel,
  .story-event-panel {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    max-height: 100dvh;
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    border-inline: 0;
  }

  .story-event-panel {
    padding: 0;
  }

  .captain-event-panel > header,
  .event-mod-panel > header {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    text-align: center;
  }

  .captain-event-portrait,
  .event-mod-portrait-frame {
    width: min(70vw, 300px);
    height: min(48dvh, 340px);
    min-height: 220px;
    margin-inline: auto;
  }
}
/* 体験版クリア後も周回・育成へ安全に戻れる専用結果画面 */
.demo-clear-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: stretch center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  background: rgba(4, 5, 10, 0.94);
  overflow: hidden;
}

.demo-clear-screen[hidden] { display: none; }

.demo-clear-panel {
  width: min(760px, 100%);
  height: fit-content;
  max-height: 100%;
  margin-block: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid rgba(221, 181, 91, 0.72);
  background: #11131c;
  color: #f4f0e5;
}

.demo-clear-kicker { color: #d8b96e; letter-spacing: 0.16em; }
.demo-clear-statistics { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; }
.demo-clear-statistics div { display: contents; }
.demo-clear-statistics dd { margin: 0; font-weight: 700; }
.demo-clear-actions { display: grid; gap: 10px; margin-top: 24px; }
.demo-clear-actions > * { min-height: 44px; }

@media (max-width: 430px) {
  .demo-clear-panel {
    padding: 18px 14px;
  }

  .demo-clear-statistics {
    gap: 7px 10px;
    font-size: 13px;
  }

  .demo-clear-actions > * {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* Final cascade guard: this block intentionally follows every legacy layer. */
.battlefield .unit-topline > span,
.battlefield .company-label,
.battlefield .captain-label,
.battlefield .troop-label,
.battlefield .battle-manpower-row span,
.battlefield .battle-manpower-value,
.battlefield .shield-row span,
.battlefield .hp-row span,
.battlefield .hp-label,
.battlefield .shield-label,
.battlefield .hp-value,
.battlefield .shield-value,
.battlefield .stats span {
  font-size: var(--font-size-meta);
}

html,
body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

button,
input,
select,
textarea,
label,
.battle-log,
.mobile-bottom-nav {
  font-family: var(--font-body);
}

h1,
h2,
h3,
.unit-name,
.battle-captain-select-copy strong,
.battle-captain-focus-copy > strong,
.commander-card h3 {
  font-family: var(--font-display);
}

button,
select,
input,
textarea {
  font-size: var(--font-size-button);
}

button,
[role="button"],
select {
  min-height: 44px;
}

small,
.control-note,
.mobile-bottom-nav button span,
.mobile-more-grid button,
.subscreen-header button {
  font-size: var(--font-size-meta);
}

.battle-captain-select-manpower,
.battle-captain-focus-stats dd,
.hp-value,
.shield-value,
.owned-count,
.onboarding-manpower-transition,
.onboarding-attrition-total {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

.battle-captain-focus-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: var(--surface-base);
}

.battle-captain-focus-copy > p,
.battle-captain-focus-comment,
.battle-engagement-summary {
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.battle-captain-focus-stats dt,
.battle-captain-focus-stats dd,
.battle-captain-select-copy small,
.enemy-army .unit-role,
.enemy-army .unit-state,
.enemy-army .hp-label,
.enemy-army .shield-label,
.enemy-unit-summary span {
  font-size: var(--font-size-meta);
}

.battle-captain-focus-stats dd,
.enemy-army .hp-value,
.enemy-army .shield-value,
.battle-captain-select-manpower {
  font-size: 13px;
}

.owned-army-heading p:last-child,
.owned-resource-summary span,
.level-up-message,
.formation-commander-summary span,
.commander-message,
.commander-card small,
.owned-unit-card small,
.expedition-summary small,
.onboarding-card small,
.display-settings-card small {
  font-size: var(--font-size-meta);
  line-height: 1.55;
}

body.subscreen-active .owned-army-heading .capture-result,
body.subscreen-active .owned-army-heading h2,
body.subscreen-active .expedition-summary > .capture-result,
body.subscreen-active .expedition-summary > h2 {
  display: none;
}

.onboarding-attrition-details {
  margin-top: 8px;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
}

.onboarding-attrition-details > summary {
  min-height: 44px;
  padding: 10px 0;
  color: var(--text-accent);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .owned-army-screen,
  .commander-screen,
  .formation-screen,
  .expedition-summary,
  .story-hub-screen,
  .facility-base-screen {
    width: min(100%, 1240px);
    max-width: 1240px;
    margin-inline: auto;
  }

  .battle-report-highlights,
  .battle-report-overview-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .battlefield {
    gap: 8px;
    padding: 6px;
  }

  .battle-overview-heading {
    padding: 8px 10px;
  }

  .battle-frontline {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }

  .battle-frontline .army-heading {
    min-height: 40px;
    padding: 6px 8px;
  }

  .battle-frontline .army-heading h2 {
    font-size: 14px;
  }

  .player-army .unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
  }

  .battle-captain-select {
    min-height: 70px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }

  .battle-captain-select-image {
    width: 34px;
    height: 48px;
  }

  .battle-captain-select-copy strong {
    font-size: 13px;
  }

  .battle-captain-select-copy small,
  .battle-captain-select-manpower {
    font-size: 12px;
    line-height: 1.25;
  }

  .enemy-army .unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }

  .enemy-army .unit-card {
    min-width: 0;
    padding: 7px;
  }

  .enemy-army .unit-card .unit-name {
    min-height: 2.7em;
    margin-block: 3px 5px;
    font-size: 14px;
    line-height: 1.35;
  }

  .battlefield .unit-topline > span,
  .battlefield .company-label,
  .battlefield .troop-label,
  .battlefield .battle-manpower-row span,
  .battlefield .battle-manpower-value,
  .battlefield .shield-row span,
  .battlefield .hp-row span,
  .battlefield .hp-value,
  .battlefield .shield-value,
  .enemy-army .unit-role,
  .enemy-army .unit-state {
    font-size: 12px;
  }

  .battlefield .stats span {
    font-size: 12px;
  }

  .player-army .unit-card:not(.has-captain) {
    min-height: 82px;
    padding: 6px;
    overflow: hidden;
  }

  .player-army .unit-card:not(.has-captain) > .body-status-inline,
  .player-army .unit-card:not(.has-captain) > .battle-manpower-row,
  .player-army .unit-card:not(.has-captain) > .shield-row,
  .player-army .unit-card:not(.has-captain) > .hp-row,
  .player-army .unit-card:not(.has-captain) > .stats,
  .player-army .unit-card:not(.has-captain) > .deep-trait-list {
    display: none;
  }

  .player-army .unit-card:not(.has-captain) .unit-name,
  .player-army .unit-card:not(.has-captain) .captain-label,
  .player-army .unit-card:not(.has-captain) .troop-label {
    margin-block: 3px;
    font-size: 12px;
    line-height: 1.3;
  }

  .battle-engagement-summary {
    margin: 0 6px 6px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .battle-overview > .battle-captain-focus {
    width: auto;
    margin: 0 6px 6px;
    scroll-margin-top: calc(var(--battle-announcement-top, 108px) + 8px);
    border-inline: 0;
    box-shadow: inset 3px 0 0 var(--ui-selection-marker);
  }

  .battle-captain-focus > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
  }

  .battle-captain-focus-toggle {
    display: inline-flex;
  }

  .battle-captain-focus.is-collapsible:not(.is-expanded) .battle-captain-focus-body {
    display: none;
  }

  .battle-captain-focus-body {
    grid-template-columns: minmax(112px, 42%) minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .battle-captain-focus-portrait {
    min-height: 190px;
  }

  .onboarding-card p,
  .display-settings-card p,
  .expedition-summary p,
  .owned-army-screen p,
  .formation-screen p,
  .commander-screen p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Battle layout ownership -------------------------------------------------
   The legacy rail rules above predate the header navigation.  Desktop and
   touch navigation are deliberately separated here, without moving either
   element at runtime. */
.pc-primary-nav { display: none; }

.battle-status-icons {
  display: none !important;
}

.battle-captain-select .battle-status-icons {
  display: none !important;
}

.battle-captain-select .battle-captain-selection-dot { right: 8px; }

.battle-engagement-summary {
  display: none !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.battle-reaction-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.battle-reaction-statuses[hidden] { display: none; }

.battle-reaction-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--ui-border-subtle);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-raised);
  font: 700 12px/1.35 var(--font-body);
}

.battle-reaction-status .battle-status-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 0;
  background: transparent;
}

.battle-reaction-status.is-defeated,
.battle-reaction-status.is-shield-broken,
.battle-reaction-status.is-danger,
.battle-reaction-status.is-manpower {
  color: var(--ui-text-critical);
  border-color: var(--border-critical);
}

.battle-reaction-status.is-balance,
.battle-reaction-status.is-posture {
  color: var(--ui-text-accent);
}

.battle-reaction-status.is-gestation {
  color: var(--ui-context-gestation);
}

.battle-frontline .army-heading {
  position: static;
}

.battle-frontline .unit-list {
  position: relative;
  z-index: 0;
}

button.battle-captain-focus-portrait {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border-subtle);
  border-radius: 0;
  color: inherit;
  background: var(--ui-bg-elevated);
  cursor: zoom-in;
}

button.battle-captain-focus-portrait:focus-visible,
.battle-body-image-frame:focus-visible {
  outline: 2px solid var(--ui-focus-ring);
  outline-offset: 2px;
}

.battle-body-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.battle-body-image-card {
  display: grid;
  min-width: 0;
  grid-template-rows: 102px auto auto;
  gap: 5px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ui-border-subtle);
  background: var(--ui-bg-panel);
}

.battle-body-image-frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: 102px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--ui-bg-elevated);
  cursor: zoom-in;
  touch-action: manipulation;
}

.battle-body-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.battle-body-image-card strong {
  color: var(--ui-text-secondary);
  font: 700 12px/1.35 var(--font-body);
  text-align: center;
}

.battle-body-image-card small {
  display: block;
  min-height: 2.7em;
  color: var(--ui-text-muted);
  font: 600 12px/1.35 var(--font-body);
  text-align: center;
  overflow-wrap: anywhere;
}

.medical-chart-modal.is-captain-portrait .medical-chart-modal-image-wrap {
  aspect-ratio: 3 / 4;
  background: #080a0e;
}

@media (max-width: 760px),
  (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .game-shell,
  .battlefield,
  .battle-information {
    touch-action: auto;
  }
}

@media (min-width: 1024px) {
  body { padding-left: 0; }

  .mobile-bottom-nav { display: none !important; }

  .pc-primary-nav {
    display: flex;
    width: min(100%, 740px);
    margin-top: 6px;
    margin-right: auto;
    gap: 4px;
    align-items: center;
  }

  .pc-primary-nav button {
    display: inline-flex;
    min-height: 38px;
    padding: 7px 9px;
    border: 0;
    gap: 5px;
    align-items: center;
    color: var(--ui-text-secondary);
    background: transparent;
    font: 700 13px/1 var(--font-body);
  }

  .pc-primary-nav button:hover,
  .pc-primary-nav button[aria-current="page"] {
    color: var(--ui-text-primary);
    background: var(--ui-selection-bg);
  }

  .pc-primary-nav .ui-icon { width: 18px; height: 18px; }
  .battlefield { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .9fr); align-items: start; }
  .battle-captain-focus { align-self: start; }
  .battle-captain-focus-body { display: block; padding: 14px; }
  .battle-captain-focus-portrait {
    width: min(100%, 280px);
    min-height: 0;
    aspect-ratio: 3 / 4;
    margin: 0 auto 14px;
  }
  .battle-captain-focus-portrait img { width: 100%; height: 100%; object-fit: cover; }
}

@media (max-width: 600px) {
  .battle-frontline {
    display: grid;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "enemies" "allies" "caption";
    gap: 10px;
  }
  .battle-frontline > .enemy-army { grid-area: enemies; }
  .battle-frontline > .player-army { grid-area: allies; }
  .battle-frontline > .battle-caption { grid-area: caption; }
  .battle-frontline > .versus { display: none; }
  .player-army .unit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; }
  .battle-captain-select { min-height: 148px; grid-template-columns: minmax(0, 1fr) 22px; grid-template-rows: 100px auto; gap: 4px; }
  .battle-captain-select-image { width: 100%; height: 100px; grid-column: 1 / -1; grid-row: 1; }
  .battle-captain-select-copy { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
  .battle-captain-select-vitals { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .battle-selector-vital { grid-template-columns: 14px minmax(0, 1fr); }
  .battle-captain-manpower-icon { grid-column: 2; grid-row: 2; }
  .battle-captain-select .battle-captain-selection-dot { right: 6px; }
  .battle-body-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-body-image-card { grid-template-rows: 90px auto auto; }
  .battle-body-image-frame { height: 90px; }
}