:root {
  --ink: #101713;
  --ink-soft: #19231e;
  --panel: rgba(18, 26, 21, 0.96);
  --panel-2: rgba(28, 35, 28, 0.97);
  --paper: #eee3cb;
  --paper-soft: #c8bda5;
  --gold: #cfa75a;
  --gold-bright: #f0d486;
  --red: #913e2d;
  --red-bright: #cb6643;
  --good: #79aa83;
  --bad: #cd6655;
  --surface-base: rgba(12, 18, 14, 0.96);
  --surface-raised: linear-gradient(148deg, rgba(38, 45, 36, 0.98), rgba(17, 23, 19, 0.98));
  --surface-interactive: linear-gradient(180deg, rgba(45, 53, 43, 0.98), rgba(22, 28, 23, 0.98));
  --surface-pressed: linear-gradient(180deg, rgba(74, 60, 36, 0.98), rgba(30, 25, 18, 0.98));
  --stroke-soft: rgba(218, 187, 122, 0.2);
  --stroke: rgba(218, 187, 122, 0.4);
  --stroke-strong: rgba(240, 210, 139, 0.72);
  --shadow-panel: 0 18px 46px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.045);
  --shadow-control: 0 5px 14px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.055);
  --radius-panel: 8px;
  --radius-control: 4px;
  --touch-target: 44px;
  --font-display: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  --font-body: "Noto Serif SC", "Songti SC", "Microsoft YaHei", serif;
  --font-data: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

html {
  color-scheme: dark;
  background: #080c09;
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 50% -12%, rgba(139, 101, 45, 0.26), transparent 42%),
    linear-gradient(180deg, #111813, #070a08 70%);
}

button,
select,
input {
  border-radius: var(--radius-control);
}

button {
  min-height: var(--touch-target);
  touch-action: manipulation;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 120;
  top: 8px;
  left: 50%;
  padding: 9px 14px;
  border: 1px solid var(--gold-bright);
  color: #17130c;
  background: var(--gold-bright);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  transform: translate(-50%, -150%);
  transition: transform 0.16s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.app-shell {
  border-inline: 1px solid rgba(215, 181, 109, 0.1);
  background:
    linear-gradient(rgba(15, 21, 17, 0.93), rgba(8, 11, 9, 0.98)),
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(255, 255, 255, 0.014) 12px 13px);
}

.opening-art,
.home-screen,
.map-art,
.ruler-portrait,
.general-face,
.general-thumb > span,
.general-large-face,
.mini-face {
  filter: saturate(0.82) contrast(1.04) sepia(0.06);
}

.opening-shade {
  background:
    linear-gradient(180deg, rgba(7, 11, 8, 0.25), transparent 28%, rgba(8, 11, 9, 0.24) 54%, #090d0a 91%),
    radial-gradient(circle at 50% 35%, transparent 15%, rgba(6, 9, 7, 0.42) 90%);
}

.opening-brand h1,
.brand-block h1,
.opening-copy h2,
.section-heading h2,
.sheet-card h2,
.modal-card h2,
.tutorial-card h2,
.ending-card h2 {
  font-family: var(--font-display);
}

.campaign-card,
.select-section,
.ruler-detail,
.objective-card,
.city-command,
.sheet-card,
.modal-card,
.tutorial-card,
.ending-card,
.notice,
.general-detail-card {
  border-color: var(--stroke);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-panel);
}

.campaign-card,
.select-section,
.ruler-detail,
.objective-card,
.sheet-card,
.modal-card,
.tutorial-card,
.ending-card,
.general-detail-card {
  position: relative;
}

.campaign-card::after,
.select-section::after,
.objective-card::after,
.sheet-card::after,
.modal-card::after,
.tutorial-card::after,
.ending-card::after {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(235, 203, 134, 0.06);
  border-radius: calc(var(--radius-panel) - 3px);
  content: "";
  pointer-events: none;
}

.primary-button,
.secondary-button,
.end-turn-button,
.close-button,
.icon-button,
.inline-actions button,
.general-card button,
.recruit-choice {
  min-height: var(--touch-target);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-control);
}

.primary-button {
  border: 1px solid #e2c479;
  color: #19150d;
  background: linear-gradient(180deg, #e0c16f, #b1843d);
  text-shadow: 0 1px rgba(255, 255, 255, 0.26);
}

.primary-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #efd789, #c59648);
}

.secondary-button,
.inline-actions button,
.general-card button,
.recruit-choice {
  border: 1px solid var(--stroke);
  color: var(--paper);
  background: var(--surface-interactive);
}

.secondary-button:hover:not(:disabled),
.inline-actions button:hover:not(:disabled),
.general-card button:hover:not(:disabled),
.recruit-choice:hover:not(:disabled) {
  border-color: var(--stroke-strong);
  color: var(--gold-bright);
}

.eyebrow,
.campaign-kicker,
.section-heading span,
.opening-brand p,
.opening-copy > span,
.sheet-card header span,
.modal-card header span,
.objective-heading > span {
  color: var(--gold-bright);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.campaign-card p,
.ruler-detail p,
.sheet-intro,
.city-intel,
.notice p,
.tutorial-card > p,
.ending-card > p {
  color: var(--paper-soft);
  font-size: 12px;
  line-height: 1.65;
}

.ruler-card,
.general-thumb,
.city-list-item,
.dock-button,
.command-grid button {
  border-color: var(--stroke-soft);
  border-radius: var(--radius-control);
  background: var(--surface-interactive);
  box-shadow: var(--shadow-control);
}

.ruler-card:hover:not(:disabled),
.general-thumb:hover:not(:disabled),
.city-list-item:hover:not(:disabled),
.command-grid button:hover:not(:disabled) {
  border-color: var(--stroke);
  color: var(--gold-bright);
}

.ruler-card.selected,
.general-thumb.selected,
.city-node.selected {
  border-color: var(--gold-bright);
  background: var(--surface-pressed);
  box-shadow: 0 0 0 2px rgba(228, 190, 104, 0.16), 0 10px 22px rgba(0, 0, 0, 0.42);
}

.ruler-card strong,
.ruler-card small,
.general-thumb strong,
.general-thumb small,
.city-node strong,
.node-troops {
  text-shadow: 0 2px 5px #000;
}

.ruler-card small,
.section-heading small,
.general-thumb small,
.general-badges span,
.ability-tags span,
.general-stat-grid span,
.opening-note {
  font-size: 10px;
}

.top-hud {
  border-bottom: 1px solid var(--stroke);
  background:
    linear-gradient(90deg, rgba(141, 82, 42, 0.08), transparent 35%, rgba(129, 98, 48, 0.08)),
    rgba(14, 21, 17, 0.97);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.ruler-medallion,
.icon-button {
  min-height: var(--touch-target);
  border-color: var(--stroke);
  background: rgba(23, 31, 25, 0.92);
}

.resource-strip {
  border-bottom: 1px solid var(--stroke-soft);
  background: rgba(11, 16, 13, 0.95);
  font-family: var(--font-data);
}

.resource-strip > div {
  min-height: var(--touch-target);
  border-right: 1px solid rgba(218, 187, 122, 0.1);
}

.resource-strip > div:last-child {
  border-right: 0;
}

.resource-strip span {
  color: #aaa18f;
  font-size: 10px;
}

.resource-strip strong {
  color: #eee0bf;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.map-stage {
  border-bottom-color: var(--stroke);
  background-color: #111a14;
}

.map-art {
  opacity: 0.9;
}

.map-vignette {
  background:
    linear-gradient(180deg, rgba(7, 12, 9, 0.26), transparent 22%, transparent 70%, rgba(6, 10, 7, 0.68)),
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(5, 8, 6, 0.44) 100%);
}

.objective-card {
  backdrop-filter: blur(9px);
}

.objective-heading button,
.close-button,
.icon-button,
.notice button {
  display: grid;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  place-items: center;
}

.city-node {
  min-height: 48px;
  border-width: 1px;
  backdrop-filter: blur(3px);
}

.city-node .city-banner {
  box-shadow: inset 0 0 0 2px rgba(9, 12, 10, 0.44), 0 4px 9px rgba(0, 0, 0, 0.38);
}

.city-command {
  border-top: 1px solid var(--stroke);
  background:
    linear-gradient(90deg, rgba(167, 109, 54, 0.05), transparent 42%),
    var(--surface-base);
}

.city-command > header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke-soft);
}

.city-stats {
  gap: 8px;
}

.city-stat {
  padding: 8px;
  border: 1px solid rgba(218, 187, 122, 0.12);
  background: rgba(8, 12, 9, 0.38);
}

.city-stat span,
.city-stat strong,
.city-stat em {
  font-family: var(--font-data);
}

.command-grid {
  gap: 8px;
}

.command-grid button {
  min-height: 66px;
}

.command-grid button i,
.dock-button i {
  display: grid;
  border: 1px solid currentColor;
  border-radius: 2px;
  place-items: center;
  font-family: var(--font-display);
  font-style: normal;
  transform: rotate(-1deg);
}

.command-grid button i {
  width: 27px;
  height: 27px;
  padding: 0;
  color: var(--gold);
  background: rgba(10, 14, 11, 0.48);
}

.command-grid button span,
.dock-button span {
  font-family: var(--font-data);
  font-size: 11px;
}

.command-grid .accent-command {
  border-color: rgba(223, 116, 72, 0.78);
  background: linear-gradient(180deg, #98462f, #5f291f);
}

.command-grid .accent-command i {
  color: #f1c298;
}

.turn-console {
  border-top: 1px solid var(--stroke-soft);
  background: rgba(11, 17, 13, 0.98);
}

.action-pips i {
  border-radius: 1px;
  transform: skewX(-12deg);
}

.bottom-dock {
  border-top: 1px solid var(--stroke);
  background: rgba(11, 17, 13, 0.98);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(12px);
}

.dock-button {
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dock-button i {
  width: 25px;
  height: 25px;
  margin-inline: auto;
  padding: 0;
  color: #8f8878;
}

.dock-button.active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(211, 170, 87, 0.12), transparent);
}

.dock-button.active::before {
  position: absolute;
  top: 0;
  right: 25%;
  left: 25%;
  height: 2px;
  background: var(--gold-bright);
  content: "";
  box-shadow: 0 0 12px rgba(236, 201, 121, 0.55);
}

.sheet,
.modal,
.tutorial,
.ending {
  backdrop-filter: blur(4px);
}

.sheet-card > header,
.modal-card > header {
  border-bottom: 1px solid var(--stroke-soft);
}

.sheet-content {
  scrollbar-color: rgba(207, 167, 90, 0.55) rgba(8, 12, 9, 0.35);
  scrollbar-width: thin;
}

.modal-card label,
.range-label > span {
  color: var(--paper-soft);
  font-family: var(--font-data);
  font-size: 11px;
}

.modal-card select {
  min-height: var(--touch-target);
  border-color: var(--stroke);
  color: var(--paper);
  background: #151d18;
}

.notice {
  border-left-width: 3px;
  backdrop-filter: blur(12px);
}

.notice-mark,
.ending-seal,
.role-seal,
.faction-sigil {
  border-radius: 2px;
  font-family: var(--font-display);
}

.notice small {
  font-family: var(--font-data);
  font-size: 10px;
}

@media (hover: none) {
  .primary-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #e0c16f, #b1843d);
  }
}

@media (max-width: 380px) {
  .home-screen {
    padding-inline: 12px;
  }

  .campaign-card,
  .select-section {
    padding: 13px;
  }

  .command-grid {
    gap: 6px;
  }

  .command-grid button {
    min-height: 61px;
  }
}

@media (orientation: landscape) and (min-width: 650px) {
  .app-shell {
    border-inline-color: rgba(218, 187, 122, 0.2);
  }

  .city-command {
    border-top: 0;
    border-left: 1px solid var(--stroke);
  }

  .sheet-card {
    border-color: var(--stroke);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Complete campaign, army and progression UI */
.campaign-setup {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-panel);
}

.campaign-option-group {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}

.campaign-option-group > strong {
  color: var(--paper-soft);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .12em;
}

.campaign-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.campaign-option {
  min-width: 0;
  min-height: 52px;
  padding: 6px 5px;
  border: 1px solid var(--stroke-soft);
  color: var(--paper-soft);
  background: var(--surface-interactive);
  box-shadow: var(--shadow-control);
}

.campaign-option strong,
.campaign-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-option strong {
  color: var(--paper);
  font-size: 11px;
}

.campaign-option small {
  margin-top: 3px;
  color: #948c7c;
  font-size: 9px;
}

.campaign-option.selected {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: var(--surface-pressed);
  box-shadow: 0 0 0 2px rgba(228, 190, 104, .13), var(--shadow-control);
}

.campaign-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  align-items: center;
  margin-top: 11px;
  padding: 10px;
  border-left: 3px solid var(--gold);
  background: rgba(8, 12, 9, .46);
}

.campaign-preview > span {
  grid-row: 1 / 3;
  padding: 7px 8px;
  border: 1px solid currentColor;
  font-size: 10px;
}

.campaign-preview strong {
  color: var(--gold-bright);
  font-size: 12px;
}

.campaign-preview small {
  color: var(--paper-soft);
  font-family: var(--font-data);
  font-size: 10px;
}

.army-layer {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
}

.army-marker {
  position: absolute;
  display: grid;
  min-width: 38px;
  min-height: 38px;
  padding: 2px;
  border: 1px solid currentColor;
  color: var(--gold-bright);
  background: rgba(13, 18, 15, .94);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .48);
  transform: translate(calc(-50% + var(--army-offset) * 42px), calc(-100% - 8px));
  pointer-events: auto;
  animation: none !important;
  transition: none !important;
}

.army-marker::before,
.army-marker::after {
  display: none !important;
  content: none !important;
}


.army-marker i,
.army-marker small {
  display: block;
  font-style: normal;
  line-height: 1;
  text-align: center;
}

.army-marker i {
  font-family: var(--font-display);
  font-size: 16px;
}

.army-marker small {
  margin-top: 2px;
  font-family: var(--font-data);
  font-size: 8px;
}

.army-marker.status-marching { border-style: dashed; }
.army-marker.status-sieging { color: #ef9670; box-shadow: 0 0 0 2px rgba(239, 150, 112, .2), 0 6px 14px rgba(0, 0, 0, .48); animation: none; }
.army-marker.owner-north { color: #77a9b0; }
.army-marker.owner-river { color: #a89bd1; }

.advanced-march-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.advanced-march-fields label {
  min-width: 0;
}

.bottom-dock {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sheet-tabs {
  display: flex;
  gap: 6px;
  margin: -2px -2px 12px;
  padding: 2px 2px 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sheet-tabs button {
  min-width: 62px;
  min-height: 38px;
  flex: 1 0 auto;
  border: 1px solid var(--stroke-soft);
  color: var(--paper-soft);
  background: var(--surface-interactive);
}

.sheet-tabs button.active {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: var(--surface-pressed);
}

.strategy-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.strategy-summary-grid article {
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid var(--stroke-soft);
  background: rgba(8, 12, 9, .42);
  text-align: center;
}

.strategy-summary-grid span,
.strategy-summary-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strategy-summary-grid span {
  color: #999181;
  font-family: var(--font-data);
  font-size: 9px;
}

.strategy-summary-grid strong {
  margin-top: 4px;
  color: var(--gold-bright);
  font-size: 13px;
}

.strategy-status-list {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 2px solid var(--gold);
  background: rgba(8, 12, 9, .42);
}

.strategy-status-list p {
  margin: 4px 0;
  color: var(--paper-soft);
  font-size: 11px;
}

.army-list,
.development-list,
.system-grid,
.save-list {
  display: grid;
  gap: 9px;
}

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

.building-grid {
  display: grid;
  gap: 9px;
}

.army-card,
.development-card,
.system-card,
.save-card,
.proposal-card,
.prisoner-card,
.event-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-control);
  background: rgba(13, 19, 15, .72);
  box-shadow: var(--shadow-control);
}

.army-card.selected,
.system-card.selected {
  border-color: var(--gold-bright);
}

.army-card > header {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
}

.army-card h3,
.development-card h3,
.system-card h3,
.save-card h3,
.proposal-card h3,
.prisoner-section h3,
.event-section h3,
.event-card h3 {
  margin: 0;
  color: #eddbb5;
  font-size: 14px;
}

.army-card h4,
.general-admin-panel h4 {
  margin: 11px 0 7px;
  color: var(--gold);
  font-size: 11px;
}

.army-card p,
.development-card p,
.system-card p,
.save-card p,
.proposal-card p,
.prisoner-card p,
.event-card p {
  margin: 7px 0;
  color: var(--paper-soft);
  font-size: 11px;
  line-height: 1.55;
}

.army-card small,
.development-card small,
.system-card small,
.save-card small,
.proposal-card small {
  color: #978f7e;
  font-size: 9px;
  line-height: 1.45;
}

.system-seal {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #a96543;
  color: #e6b17c;
  background: rgba(118, 50, 34, .38);
  font-family: var(--font-display);
}

.army-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 9px;
  background: rgba(215, 181, 109, .12);
}

.army-metrics span {
  min-width: 0;
  padding: 6px 2px;
  background: #151d18;
  text-align: center;
}

.army-metrics small,
.army-metrics strong {
  display: block;
}

.army-metrics strong {
  margin-top: 2px;
  color: var(--paper);
  font-family: var(--font-data);
  font-size: 10px;
}

.army-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

.army-controls select,
.general-admin-panel select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--stroke);
  color: var(--paper);
  background: #151d18;
}

.tactic-grid,
.diplomacy-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.tactic-grid button,
.diplomacy-actions button {
  min-width: 0;
  min-height: 40px;
  padding-inline: 5px;
  font-size: 10px;
}

.system-card {
  display: flex;
  flex-direction: column;
}

.system-card > .system-seal {
  margin-bottom: 7px;
}

.system-card > small {
  display: block;
  margin-bottom: 9px;
}

.system-card > button {
  width: 100%;
  margin-top: auto;
}

.queue-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.queue-strip span {
  padding: 5px 7px;
  border: 1px solid var(--stroke-soft);
  color: var(--gold);
  font-size: 9px;
}

.general-admin-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 0 10px 12px;
  padding: 10px;
  border-top: 1px solid var(--stroke-soft);
  background: rgba(8, 12, 9, .34);
}

.general-admin-panel h4 {
  grid-column: 1 / -1;
}

.general-admin-panel button {
  min-height: 40px;
}

.prisoner-section,
.proposal-section,
.event-section {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--stroke-soft);
}

.prisoner-section > h3,
.proposal-section > h3,
.event-section > h3 {
  margin-bottom: 8px;
  color: var(--gold-bright);
}

.prisoner-card + .prisoner-card,
.proposal-card + .proposal-card,
.event-card + .event-card {
  margin-top: 7px;
}

.save-card .inline-actions,
.development-card .inline-actions,
.prisoner-card .inline-actions,
.proposal-card .inline-actions,
.event-card .inline-actions {
  margin-top: 8px;
}

.danger-button {
  border-color: rgba(205, 102, 85, .62) !important;
  color: #eaa18e !important;
  background: rgba(110, 40, 31, .38) !important;
}

.empty-state {
  padding: 22px 15px;
  border: 1px dashed var(--stroke);
  color: var(--paper-soft);
  background: rgba(8, 12, 9, .35);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

/* Portrait is a first-class layout. */
@media (orientation: portrait) {
  body.in-game {
    overflow-y: auto;
  }

  .game-screen {
    min-height: 100svh;
    overflow: visible;
  }

  .sheet-card {
    max-height: calc(100svh - 76px - env(safe-area-inset-top));
  }

  .sheet-content {
    max-height: calc(100svh - 138px - env(safe-area-inset-top));
  }
}

/* Compact phone landscape: keep map and commands side by side. */
@media (orientation: landscape) and (min-width: 500px) and (max-width: 649px) {
  body.in-game {
    overflow: hidden;
  }

  body.in-game .app-shell {
    width: 100%;
    height: 100svh;
    min-height: 0;
  }

  .game-screen {
    display: grid;
    height: 100svh;
    min-height: 0;
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 59%) minmax(220px, 41%);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .top-hud,
  .resource-strip {
    grid-column: 1 / -1;
  }

  .top-hud {
    min-height: calc(46px + env(safe-area-inset-top));
    padding: calc(3px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 3px max(8px, env(safe-area-inset-left));
  }

  .calendar-block small,
  .resource-strip span,
  .objective-card p,
  .map-legend,
  .node-troops {
    display: none;
  }

  .resource-strip > div {
    min-height: 34px;
    padding-block: 2px;
  }

  .map-stage {
    grid-row: 3 / 5;
    grid-column: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    border-right: 1px solid var(--stroke);
    border-bottom: 0;
  }

  .city-node {
    min-width: 43px;
    min-height: 34px;
    grid-template-columns: 22px auto;
    padding: 2px 4px 2px 2px;
  }

  .city-banner {
    width: 22px;
    height: 28px;
    font-size: 12px;
  }

  .city-node strong {
    font-size: 9px;
  }

  .objective-card {
    top: 6px;
    right: 6px;
    width: min(48%, 150px);
    padding: 7px;
  }

  .objective-card strong {
    font-size: 11px;
  }

  .city-command {
    grid-row: 3;
    grid-column: 2;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid var(--stroke);
  }

  .city-command > header {
    padding-bottom: 6px;
  }

  .city-command h2 {
    font-size: 17px;
  }

  .troop-total strong {
    font-size: 18px;
  }

  .city-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: 6px;
  }

  .city-stat {
    padding: 4px;
  }

  .city-intel {
    margin-block: 5px;
    font-size: 9px;
  }

  .command-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .command-grid button {
    min-height: 45px;
    padding: 3px;
  }

  .command-grid button i {
    width: 21px;
    height: 21px;
    font-size: 11px;
  }

  .command-grid button span {
    font-size: 8px;
  }

  .turn-console {
    grid-row: 4;
    grid-column: 2;
    padding: 5px 8px;
  }

  .turn-console > div {
    display: none;
  }

  .end-turn-button {
    width: 100%;
    min-height: 40px;
  }

  .bottom-dock {
    width: 100%;
    height: calc(52px + env(safe-area-inset-bottom));
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }

  .dock-button {
    min-height: 48px;
  }

  .dock-button i {
    width: 21px;
    height: 21px;
    margin-top: 2px;
    font-size: 10px;
  }

  .dock-button span {
    font-size: 8px;
  }

  .sheet {
    width: 100%;
    align-items: stretch;
    justify-items: end;
  }

  .sheet-card {
    width: min(360px, 68vw);
    height: calc(100svh - 52px - env(safe-area-inset-bottom));
    max-height: none;
    margin-bottom: calc(52px + env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--stroke);
    border-right: 0;
    border-radius: 8px 0 0 8px;
  }

  .sheet-card > header {
    min-height: 50px;
  }

  .sheet-content {
    max-height: calc(100svh - 102px - env(safe-area-inset-bottom));
  }

  .modal-card,
  .tutorial-card,
  .ending-card {
    max-height: calc(100svh - 20px);
    overflow-y: auto;
  }

  .opening-screen {
    min-height: 320px;
  }
}

@media (orientation: landscape) and (min-width: 650px) {
  body:not(.in-game) .app-shell {
    width: min(100%, 960px);
  }

  .top-hud,
  .bottom-dock {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .opening-screen {
    min-height: 360px;
  }
}

@media (max-width: 420px) {
  .campaign-option-group {
    grid-template-columns: 1fr;
  }

  .campaign-options {
    grid-template-columns: repeat(3, minmax(76px, 1fr));
    overflow-x: auto;
  }

  .system-grid,
  .building-grid {
    grid-template-columns: 1fr;
  }

  .army-controls {
    grid-template-columns: 1fr 1fr;
  }

  .army-controls select {
    grid-column: 1 / -1;
  }

  .tactic-grid,
  .diplomacy-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

.army-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 8px;
}

.army-order-row select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--stroke);
  color: var(--paper);
  background: #151d18;
}

.warning-copy {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 2px solid #c78343;
  color: #e4c9a8;
  background: rgba(83, 42, 21, .28);
  font-size: 10px;
  line-height: 1.55;
}

/* Strategic sites and full battle flow */
.region-layer,
.site-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.map-region-label {
  position: absolute;
  transform: translate(-50%, -50%) rotate(-4deg);
  color: rgba(229, 215, 178, .34);
  font-family: var(--font-display);
  font-size: clamp(13px, 3vw, 24px);
  font-weight: 800;
  letter-spacing: .18em;
  text-shadow: 0 2px 8px #060806;
  white-space: nowrap;
}

.map-site {
  position: absolute;
  display: grid;
  min-width: 36px;
  transform: translate(-50%, -50%);
  justify-items: center;
  color: #bcb39d;
  filter: drop-shadow(0 2px 3px #050605);
}

.map-site i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #796a4d;
  border-radius: 50% 50% 3px 3px;
  color: #dfc887;
  background: linear-gradient(#283129, #111713);
  font-family: var(--font-display);
  font-size: 10px;
  font-style: normal;
}

.map-site small {
  max-width: 64px;
  margin-top: 2px;
  overflow: hidden;
  color: #b9ae96;
  font-size: 7px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}

.map-site.type-ferry i { border-radius: 50%; color: #a7d0cc; }
.map-site.type-relay i {
  border-radius: 2px;
  color: #d6b86d;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.map-site.controlled { opacity: .95; }
.map-site.contested { opacity: .55; }
.route-line.type-pass { stroke-dasharray: 1.4 1.2; }
.route-line.type-ferry { stroke: rgba(125, 182, 184, .72); stroke-dasharray: 2 .8; }
.route-line.type-relay { stroke: rgba(214, 184, 109, .66); }

.in-battle .app-shell {
  width: min(100%, 1200px);
}

.battle-screen {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  background: #070a08;
}

.battle-briefing,
.battle-arena,
.battle-result {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.battle-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: saturate(.74) contrast(1.06);
}

.battle-intro-art { background-image: url('./assets/art/battle-intro-v1.webp'); }
.battle-field-art { background-image: url('./assets/art/battle-field-v1.webp'); }
.battle-result.victory .result-art { background-image: url('./assets/art/battle-victory-v1.webp'); }
.battle-result.defeat .result-art,
.battle-result.retreat .result-art { background-image: url('./assets/art/battle-defeat-v1.webp'); }

.battle-briefing::before,
.battle-arena::before,
.battle-result::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, rgba(5, 8, 6, .75), rgba(9, 13, 10, .16) 28%, rgba(7, 9, 7, .4) 58%, rgba(5, 7, 5, .95));
}

.battle-page-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
  min-height: calc(66px + env(safe-area-inset-top));
  align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(214, 184, 109, .34);
  background: linear-gradient(180deg, rgba(15, 21, 17, .96), rgba(9, 12, 10, .72));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  text-align: center;
}

.battle-page-header span {
  color: #bba66e;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: .16em;
}

.battle-page-header h1 {
  margin: 2px 0 0;
  color: #f0e1bc;
  font-family: var(--font-display);
  font-size: clamp(17px, 4vw, 24px);
  letter-spacing: .08em;
}

.battle-back-button,
.battle-auto-button {
  width: fit-content;
  min-height: var(--touch-target);
  padding: 0 12px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-control);
  color: #d7cba9;
  background: rgba(16, 22, 18, .78);
  font-family: var(--font-ui);
  font-size: 10px;
}

.battle-auto-button { justify-self: end; }
.terrain-seal {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  justify-self: end;
  border: 1px solid #9b7e44;
  border-radius: 50%;
  color: #e3c875 !important;
  background: rgba(38, 29, 15, .86);
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
}

.battle-versus {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  max-width: 850px;
  margin: clamp(18px, 7vh, 68px) auto 0;
  padding: 0 12px;
  align-items: center;
}

.briefing-side {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(214, 184, 109, .32);
  background: linear-gradient(90deg, rgba(13, 22, 17, .9), rgba(13, 18, 14, .62));
  box-shadow: var(--shadow-raised);
}

.briefing-side.defender {
  flex-direction: row-reverse;
  text-align: right;
  background: linear-gradient(-90deg, rgba(52, 19, 16, .9), rgba(29, 15, 13, .62));
}

.battle-general-face,
.combat-face {
  flex: 0 0 auto;
  border: 1px solid #9a7b43;
  border-radius: 50%;
  background-color: #121813;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  box-shadow: inset 0 0 0 2px rgba(7, 9, 7, .8), 0 3px 12px #000;
}

.battle-general-face { width: 70px; height: 70px; }
.briefing-side small { color: #aa9d80; font-size: 8px; }
.briefing-side h2 { margin: 2px 0; font: 700 18px var(--font-display); }
.briefing-side p { margin: 0; color: #c6baa0; font: 9px var(--font-data); }
.versus-seal { display: grid; justify-items: center; gap: 3px; }
.versus-seal b {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 2px solid #c89b50;
  border-radius: 50%;
  color: #f2d887;
  background: radial-gradient(circle, #753420, #24120d 70%);
  box-shadow: 0 0 0 4px rgba(8, 10, 8, .72), 0 0 24px rgba(205, 119, 49, .34);
  font: 800 25px var(--font-display);
}
.versus-seal small { color: #cfbd94; font-size: 8px; white-space: nowrap; }

.battle-forecast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
  margin: 12px auto 0;
  border: 1px solid rgba(214, 184, 109, .25);
  background: rgba(8, 12, 9, .82);
}
.battle-forecast div { padding: 8px; text-align: center; }
.battle-forecast div + div { border-left: 1px solid rgba(214, 184, 109, .2); }
.battle-forecast span,
.battle-forecast strong { display: block; }
.battle-forecast span { color: #9e9279; font: 8px var(--font-data); }
.battle-forecast strong { margin-top: 2px; color: #e3c875; font: 15px var(--font-display); }

.briefing-skill-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 680px;
  margin: 12px auto 82px;
  padding: 0 12px;
  gap: 7px;
}
.briefing-skill-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(214, 184, 109, .28);
  border-radius: var(--radius-control);
  background: rgba(10, 15, 12, .82);
}
.briefing-skill-card.passive { border-color: rgba(102, 156, 126, .5); }
.briefing-skill-card header { display: flex; align-items: center; gap: 6px; }
.briefing-skill-card i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #8e7340;
  border-radius: 50%;
  color: #e0c679;
  font: normal 13px var(--font-display);
}
.briefing-skill-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.briefing-skill-card small { margin-left: auto; color: #ba9b55; font: 8px var(--font-data); }
.briefing-skill-card p { margin: 6px 0 0; color: #aea38d; font-size: 8px; line-height: 1.45; }

.battle-briefing-actions {
  position: absolute;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 0;
  display: grid;
  grid-template-columns: minmax(120px, 240px) minmax(140px, 280px);
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}

.combatant-status {
  position: absolute;
  z-index: 4;
  top: calc(72px + env(safe-area-inset-top));
  display: grid;
  width: min(43%, 410px);
  grid-template-columns: 46px minmax(0, .7fr) minmax(120px, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(214, 184, 109, .3);
  background: linear-gradient(90deg, rgba(11, 19, 15, .94), rgba(11, 16, 13, .66));
  box-shadow: 0 5px 18px rgba(0, 0, 0, .4);
}
.attacker-status { left: max(8px, env(safe-area-inset-left)); }
.defender-status { right: max(8px, env(safe-area-inset-right)); background: linear-gradient(-90deg, rgba(53, 19, 16, .94), rgba(26, 14, 12, .68)); }
.combat-face { width: 44px; height: 44px; }
.combatant-copy { min-width: 0; }
.combatant-copy strong,
.combatant-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combatant-copy strong { font: 700 13px var(--font-display); }
.combatant-copy small { margin-top: 3px; color: #a99e87; font-size: 8px; }
.combat-meters { display: grid; gap: 3px; }
.combat-meters label { display: grid; grid-template-columns: 12px minmax(0, 1fr) 42px; align-items: center; color: #bdb095; font: 7px var(--font-data); }
.combat-meters label i { height: 5px; overflow: hidden; border-radius: 4px; background: rgba(3, 5, 4, .72); }
.combat-meters label i b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #8d3628, #d77943); transition: width .32s ease; }
.combat-meters label:nth-child(2) i b { background: linear-gradient(90deg, #94712b, #e2c36a); }
.combat-meters label:nth-child(3) i b { background: linear-gradient(90deg, #3d6e56, #82a778); }
.combat-meters em { color: #ddd0af; text-align: right; font-style: normal; }

.battle-field {
  position: absolute;
  z-index: 2;
  inset: 132px 0 116px;
  overflow: hidden;
}
.battle-unit-rank {
  position: absolute;
  top: 46%;
  display: flex;
  align-items: end;
  gap: 4px;
  transition: transform .34s ease, opacity .34s ease;
}
.attacker-rank { left: 11%; transform: perspective(300px) rotateY(10deg); }
.defender-rank { right: 11%; flex-direction: row-reverse; transform: perspective(300px) rotateY(-10deg); }
.battle-unit-rank i {
  display: block;
  width: clamp(26px, 5vw, 52px);
  height: clamp(34px, 8vw, 72px);
  clip-path: polygon(50% 0, 70% 25%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 30% 25%);
  background: linear-gradient(120deg, #25352b, #111915 65%, #a65a36);
  box-shadow: 0 5px 9px rgba(0, 0, 0, .72);
}
.defender-rank i { background: linear-gradient(-120deg, #51231d, #1a1110 65%, #b06a3b); }
.battle-unit-rank strong {
  display: grid;
  width: clamp(34px, 6vw, 58px);
  height: clamp(48px, 9vw, 82px);
  place-items: center;
  border: 1px solid #b18b48;
  color: #e9d38c;
  background: linear-gradient(#233a2c, #142019);
  font: 800 clamp(15px, 3vw, 28px) var(--font-display);
  clip-path: polygon(0 0, 100% 0, 100% 87%, 50% 100%, 0 87%);
}
.defender-rank strong { background: linear-gradient(#653026, #2d1713); }
.battle-field.strike-attacker .attacker-rank { animation: battleChargeLeft .42s ease; }
.battle-field.strike-defender .defender-rank { animation: battleChargeRight .42s ease; }
.battle-effect {
  position: absolute;
  top: 46%;
  left: 50%;
  min-width: 120px;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  color: #f3dfa4;
  font: 800 clamp(18px, 4vw, 32px) var(--font-display);
  text-align: center;
  text-shadow: 0 2px 4px #000, 0 0 18px #bd6235;
  opacity: 0;
  pointer-events: none;
}
.battle-effect.show { animation: battleEffect .72s ease; }

.battle-log {
  position: absolute;
  z-index: 5;
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(116px + env(safe-area-inset-bottom));
  width: min(38%, 340px);
  max-height: 78px;
  padding: 6px 8px;
  overflow: auto;
  border-left: 2px solid #9d7439;
  color: #d5c9aa;
  background: rgba(7, 10, 8, .75);
  font-size: 8px;
  line-height: 1.5;
}
.battle-log p { margin: 2px 0; }
.battle-log b { color: #e2c471; }

.battle-command-deck {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: calc(104px + env(safe-area-inset-bottom));
  gap: 6px;
  padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-top: 1px solid rgba(214, 184, 109, .34);
  background: linear-gradient(180deg, rgba(9, 12, 10, .86), #090c0a);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
}
.battle-skill-buttons { display: contents; }
.battle-command {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 2px 7px;
  padding: 7px;
  border: 1px solid #735b35;
  border-radius: var(--radius-control);
  color: #dfd2b3;
  background: linear-gradient(135deg, rgba(39, 52, 42, .94), rgba(15, 21, 17, .98));
  text-align: left;
}
.battle-command.guard { border-color: #456f5c; }
.battle-command.skill { border-color: #9a6a35; background: linear-gradient(135deg, rgba(83, 39, 24, .92), rgba(24, 18, 13, .98)); }
.battle-command i {
  grid-row: 1 / 3;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #a88343;
  border-radius: 50%;
  color: #ead58d;
  background: #172019;
  font: normal 18px var(--font-display);
}
.battle-command span { overflow: hidden; font: 700 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.battle-command small { color: #aa9a78; font: 8px var(--font-data); }
.battle-command em { position: absolute; top: 5px; right: 6px; color: #dfbd65; font: normal 8px var(--font-data); }
.battle-command:disabled { border-color: #46463f; filter: grayscale(.65); opacity: .55; }

.battle-result { display: grid; place-items: center; padding: 18px; }
.battle-result::before { background: radial-gradient(circle at 50% 35%, rgba(9, 13, 10, .18), rgba(5, 7, 5, .88) 74%); }
.battle-result-card {
  width: min(500px, 94vw);
  max-height: calc(100svh - 36px);
  padding: clamp(18px, 4vw, 32px);
  overflow-y: auto;
  border: 1px solid rgba(214, 184, 109, .48);
  border-radius: 8px;
  background: linear-gradient(rgba(12, 18, 14, .84), rgba(8, 11, 9, .94));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .68), inset 0 0 40px rgba(192, 141, 66, .07);
  text-align: center;
}
.battle-result-seal {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 9px;
  place-items: center;
  border: 2px solid #c39a51;
  border-radius: 50%;
  color: #f1d687;
  background: rgba(81, 32, 20, .88);
  font: 800 30px var(--font-display);
}
.battle-result.retreat .battle-result-seal,
.battle-result.defeat .battle-result-seal { border-color: #84918b; color: #c1cbc4; background: rgba(30, 39, 39, .88); }
.battle-result-card > p { margin: 5px 0; color: #b7aa8e; font-size: 10px; }
.battle-result-card > h1 { margin: 4px 0 8px; color: #ecd597; font: 800 clamp(26px, 7vw, 42px) var(--font-display); letter-spacing: .12em; }
.battle-result-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0; border: 1px solid rgba(214, 184, 109, .24); }
.battle-result-stats article { padding: 8px 4px; background: rgba(6, 9, 7, .48); }
.battle-result-stats article + article { border-left: 1px solid rgba(214, 184, 109, .18); }
.battle-result-stats span,
.battle-result-stats strong { display: block; }
.battle-result-stats span { color: #998e77; font: 8px var(--font-data); }
.battle-result-stats strong { margin-top: 3px; color: #e3c875; font: 14px var(--font-display); }
.battle-result-captures { min-height: 24px; margin-bottom: 14px; color: #cbb98e; font-size: 9px; }
.battle-result-card > button { width: 100%; }

@keyframes battleChargeLeft { 50% { transform: translateX(18%) perspective(300px) rotateY(10deg); } }
@keyframes battleChargeRight { 50% { transform: translateX(-18%) perspective(300px) rotateY(-10deg); } }
@keyframes battleEffect { 0% { opacity: 0; transform: translate(-50%, -35%) scale(.72); } 25%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1.08); } }

@media (orientation: portrait) {
  .map-site small { display: none; }
  .battle-versus { margin-top: 18px; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); padding-inline: 8px; }
  .briefing-side { display: grid; justify-items: center; padding: 8px 4px; text-align: center; }
  .briefing-side.defender { display: grid; text-align: center; }
  .battle-general-face { width: 54px; height: 54px; }
  .briefing-side h2 { font-size: 14px; }
  .briefing-side p { font-size: 7px; }
  .versus-seal b { width: 40px; height: 40px; font-size: 20px; }
  .battle-forecast { margin-inline: 8px; }
  .briefing-skill-list { grid-template-columns: 1fr; max-height: 30vh; overflow-y: auto; margin-bottom: 82px; }
  .briefing-skill-card p { margin-top: 3px; }
  .combatant-status { top: calc(68px + env(safe-area-inset-top)); width: calc(50% - 10px); grid-template-columns: 38px minmax(0, 1fr); }
  .combat-face { width: 36px; height: 36px; }
  .combat-meters { grid-column: 1 / -1; }
  .combatant-copy strong { font-size: 11px; }
  .battle-field { inset: 185px 0 190px; }
  .battle-log { right: 8px; bottom: calc(194px + env(safe-area-inset-bottom)); left: 8px; width: auto; max-height: 56px; }
  .battle-command-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(184px + env(safe-area-inset-bottom)); }
  .battle-command { min-height: 76px; }
  .battle-result-stats { grid-template-columns: repeat(2, 1fr); }
  .battle-result-stats article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(214, 184, 109, .18); }
  .battle-result-stats article:nth-child(4) { border-top: 1px solid rgba(214, 184, 109, .18); }
}

@media (orientation: landscape) and (max-height: 520px) {
  .battle-page-header { min-height: calc(52px + env(safe-area-inset-top)); padding-block: calc(4px + env(safe-area-inset-top)) 4px; }
  .battle-versus { margin-top: 9px; }
  .battle-general-face { width: 54px; height: 54px; }
  .battle-forecast { margin-top: 7px; }
  .briefing-skill-list { margin-top: 7px; margin-bottom: 64px; }
  .briefing-skill-card { padding: 6px; }
  .briefing-skill-card p { display: none; }
  .battle-briefing-actions { bottom: calc(7px + env(safe-area-inset-bottom)); }
  .combatant-status { top: calc(57px + env(safe-area-inset-top)); }
  .battle-field { inset: 110px 0 96px; }
  .battle-log { bottom: calc(98px + env(safe-area-inset-bottom)); max-height: 54px; }
  .battle-command-deck { min-height: calc(90px + env(safe-area-inset-bottom)); padding-block: 6px calc(6px + env(safe-area-inset-bottom)); }
  .battle-command { min-height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .battle-field.strike-attacker .attacker-rank,
  .battle-field.strike-defender .defender-rank,
  .battle-effect.show { animation: none; }
  .battle-effect.show { opacity: 1; }
}
.battle-entry-card,
.general-combat-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(214, 184, 109, .28);
  border-radius: var(--radius-control);
  background: rgba(8, 13, 10, .56);
}

.battle-entry-card h4,
.general-combat-panel h4 { margin: 0 0 6px; color: #dfc77d; font: 700 12px var(--font-display); }
.battle-entry-card p { margin: 0 0 8px; color: #aaa088; font-size: 9px; line-height: 1.55; }

.general-skill-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.general-skill-strip article {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 2px 6px;
  padding: 7px;
  border: 1px solid rgba(174, 129, 61, .28);
  background: rgba(18, 24, 19, .72);
}

.general-skill-strip article.passive { border-color: rgba(91, 145, 116, .48); }
.general-skill-strip i {
  grid-row: 1 / 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #866b3d;
  border-radius: 50%;
  color: #dec77e;
  font: normal 12px var(--font-display);
}
.general-skill-strip strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.general-skill-strip small { color: #a9905b; font: 7px var(--font-data); }
.general-skill-strip p { grid-column: 1 / -1; margin: 4px 0 0; color: #958c79; font-size: 7px; line-height: 1.4; }

@media (max-width: 420px) {
  .general-skill-strip { grid-template-columns: 1fr; }
}
/* Compact objective and persistent gameplay guide */
.objective-card {
  width: min(58%, 240px);
  padding: 6px 8px;
  transition: width .18s ease, padding .18s ease;
}

.objective-card.is-collapsed {
  width: min(46%, 190px);
  padding-block: 5px;
}

.objective-heading {
  align-items: center;
  gap: 6px;
}

.objective-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}

.objective-heading button {
  position: relative;
  display: grid;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  place-items: center;
  border-width: 1px;
  font: 700 9px var(--font-data);
  line-height: 1;
}

.objective-heading button::before {
  position: absolute;
  inset: -6px;
  content: "";
}

.objective-heading .objective-guide-button {
  width: auto;
  min-width: 34px;
  padding-inline: 5px;
  border-radius: 10px;
  color: #dfc77d;
}

.objective-card > strong {
  max-width: 100%;
  margin-top: 1px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.objective-details > p {
  margin: 3px 0 5px;
  color: #aba38e;
  font-size: 8px;
  line-height: 1.35;
}

.objective-details[hidden] {
  display: none;
}

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

.gameplay-lead {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  color: var(--paper-soft);
  background: rgba(8, 12, 9, .48);
  font-size: 11px;
  line-height: 1.65;
}

.gameplay-section {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-control);
  background: rgba(8, 13, 10, .56);
}

.gameplay-section header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gameplay-section h3 {
  margin: 0;
  color: #dfc77d;
  font: 700 12px var(--font-display);
}

.gameplay-section p,
.gameplay-section li {
  color: #aaa088;
  font-size: 9px;
  line-height: 1.55;
}

.gameplay-section p {
  margin: 7px 0;
}

.gameplay-section ul {
  margin: 0;
  padding-left: 17px;
}

.gameplay-guide > button {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (orientation: portrait), (max-width: 560px) {
  .objective-card,
  .objective-card.is-collapsed {
    top: 6px;
    left: 6px;
  }

  .objective-card.is-collapsed {
    width: min(52%, 176px);
  }

  .gameplay-guide {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .objective-card.is-collapsed {
    top: 5px;
    left: 5px;
    width: min(44%, 176px);
  }
}
/* Expansion systems: tactical field and grand-strategy operations */
.briefing-skill-list { margin-bottom: 8px; }
.briefing-reinforcements {
  display: flex;
  width: min(680px, calc(100% - 24px));
  min-height: 40px;
  margin: 0 auto 82px;
  gap: 7px;
  align-items: stretch;
  overflow-x: auto;
}
.briefing-reinforcements[hidden] { display: none; }
.briefing-reinforcements > strong {
  display: grid;
  min-width: 58px;
  place-items: center;
  color: var(--gold-bright);
  font: 700 10px var(--font-display);
}
.reinforcement-card {
  display: grid;
  min-width: 160px;
  min-height: 42px;
  grid-template-columns: 32px 1fr;
  gap: 2px 7px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(102, 156, 126, .55);
  color: var(--paper);
  background: rgba(11, 25, 18, .88);
  text-align: left;
}
.reinforcement-card .system-seal { grid-row: 1 / 3; }
.reinforcement-card b { font: 700 10px var(--font-display); }
.reinforcement-card small { color: #a6b7a8; font: 8px var(--font-data); }
.reinforcement-card.joined { opacity: .62; }

.battle-field.has-tactical-grid .battle-unit-rank { display: none; }
.battle-tactical-caption {
  position: absolute;
  z-index: 4;
  top: 1px;
  left: 50%;
  width: min(92%, 720px);
  overflow: hidden;
  transform: translateX(-50%);
  color: #e7d49d;
  font: 8px var(--font-data);
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}
.battle-tactical-grid {
  --battle-grid-columns: 9;
  position: absolute;
  z-index: 3;
  top: 20px;
  bottom: 3px;
  left: 50%;
  display: grid;
  width: min(86vw, 720px);
  max-width: calc((100% - 23px) * 1.5);
  aspect-ratio: 3 / 2;
  grid-template-columns: repeat(var(--battle-grid-columns), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  transform: translateX(-50%) perspective(720px) rotateX(2deg);
  border: 1px solid rgba(224, 196, 125, .5);
  background: rgba(7, 12, 9, .62);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}
.tactical-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 217, 171, .13);
  border-radius: 0;
  color: #c6b987;
  background: rgba(72, 82, 57, .62);
  box-shadow: none;
}
.tactical-cell.terrain-forest { background: rgba(39, 73, 48, .8); }
.tactical-cell.terrain-hill { background: linear-gradient(145deg, rgba(111, 92, 52, .82), rgba(60, 59, 42, .84)); }
.tactical-cell.terrain-water { color: #aad0cd; background: rgba(37, 83, 91, .78); }
.tactical-cell.terrain-shoal { color: #d4c58e; background: rgba(83, 91, 65, .78); }
.tactical-cell.terrain-wall { color: #b0aaa0; background: repeating-linear-gradient(0deg, #474943 0 4px, #343733 4px 8px); }
.tactical-cell.terrain-gate { color: #e0bd6d; background: repeating-linear-gradient(90deg, #4d2f20 0 4px, #6b452b 4px 8px); }
.tactical-cell.movable::after {
  position: absolute;
  inset: 12%;
  border: 1px solid #e8cb6f;
  content: '';
  box-shadow: inset 0 0 10px rgba(230, 190, 87, .35), 0 0 8px rgba(230, 190, 87, .28);
  animation: tacticalPulse 1.4s ease-in-out infinite;
}
.tactical-cell.selected-unit { box-shadow: inset 0 0 0 2px #f0cf72; }
.terrain-mark {
  position: absolute;
  top: 2px;
  left: 3px;
  color: currentColor;
  font: 8px var(--font-display);
  opacity: .72;
}
.tactical-unit {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: 26px;
  min-height: 26px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid #d2b568;
  border-radius: 50%;
  background: radial-gradient(circle, #34583f, #14251a 72%);
  box-shadow: 0 3px 8px #000;
}
.side-defender .tactical-unit { border-color: #d28062; background: radial-gradient(circle, #783f32, #321a16 72%); }
.tactical-unit b { color: #f2e2ad; font: 700 10px var(--font-display); line-height: 1; }
.tactical-unit em { position: absolute; top: 100%; color: #f0e5c8; font: normal 6px var(--font-data); text-shadow: 0 1px 2px #000; }

.operation-section {
  margin-top: 9px;
  padding: 11px;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-control);
  background: rgba(10, 16, 12, .58);
}
.operation-section > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-bottom: 9px;
}
.operation-section h3 { margin: 0; color: #ead7aa; font: 700 13px var(--font-display); }
.operation-section header p { margin: 3px 0 0; color: #9f9785; font-size: 9px; line-height: 1.45; }
.operation-controls,
.army-organization {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.operation-controls.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.operation-controls select,
.operation-controls input,
.army-organization select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-control);
  color: var(--paper);
  background: #151d18;
  font: 10px var(--font-data);
}
.operation-controls button,
.army-organization button { min-height: 40px; }
.operation-controls.four button { grid-column: span 2; }
.operation-status {
  display: block;
  margin-top: 8px;
  color: #b6a980;
  font: 9px var(--font-data);
  line-height: 1.5;
}
.operation-ledger { display: grid; gap: 3px; margin-top: 7px; }
.operation-ledger small { padding: 5px 7px; border-left: 2px solid #658470; color: #aeb9aa; background: rgba(4, 8, 6, .35); }
.weather-grid,
.challenge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.weather-grid span,
.challenge-grid article { padding: 7px 5px; border: 1px solid var(--stroke-soft); background: rgba(6, 10, 8, .45); text-align: center; }
.weather-grid small,
.weather-grid strong,
.challenge-grid strong,
.challenge-grid span,
.challenge-grid small { display: block; }
.weather-grid small,
.challenge-grid small { color: #918a7b; font-size: 8px; }
.weather-grid strong { margin-top: 2px; color: #d9c47c; font: 700 11px var(--font-display); }
.challenge-grid strong { color: #ddd0a8; font-size: 10px; }
.challenge-grid span { margin: 4px 0; color: var(--gold-bright); font: 10px var(--font-data); }
.challenge-grid article.completed { border-color: #648e70; background: rgba(32, 72, 46, .38); }
.army-organization { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--stroke-soft); }

.council-active-card,
.council-proposal-card,
.doctrine-grid article,
.administration-grid article,
.administration-summary {
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-control);
  background: rgba(6, 11, 8, .5);
}

.council-active-card {
  padding: 11px 12px;
  border-left: 3px solid var(--gold);
}

.council-active-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #ead7aa;
  font: 700 13px var(--font-display);
}

.council-active-heading strong { color: var(--gold-bright); font: 700 11px var(--font-data); }
.council-active-card p { margin: 7px 0; color: #aaa18d; font-size: 9px; line-height: 1.5; }
.council-active-card > small { display: block; margin-top: 6px; color: #c5b77f; font-size: 9px; }

.council-progress {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(196, 158, 82, .36);
  border-radius: 999px;
  background: rgba(2, 5, 3, .72);
}

.council-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f8959, #d5b85f);
  box-shadow: 0 0 8px rgba(215, 184, 95, .3);
  transition: width var(--motion-medium) var(--ease-out);
}

.council-proposal-grid,
.doctrine-grid,
.administration-grid {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.council-proposal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doctrine-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.administration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.council-proposal-card {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: start;
  padding: 10px;
}

.council-proposal-card .system-seal { position: absolute; top: 8px; right: 8px; opacity: .72; }
.council-proposal-card h4,
.administration-grid h4 { margin: 0 36px 3px 0; color: #e4cf96; font: 700 12px var(--font-display); }
.council-proposal-card > small,
.administration-grid > small { color: #879986; font-size: 8px; }
.council-proposal-card p,
.administration-grid p { min-height: 40px; margin: 7px 0; color: #aaa18d; font-size: 9px; line-height: 1.5; }
.council-proposal-card b { margin-bottom: 8px; color: #c9b46f; font: 700 8px var(--font-data); }
.council-proposal-card button { width: 100%; margin-top: auto; }

.administration-summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  padding: 9px 11px;
  border-left: 3px solid #708b70;
}

.administration-summary strong { color: var(--gold-bright); font: 700 14px var(--font-display); }
.administration-summary span { color: #d3c69d; font: 10px var(--font-data); }
.administration-summary small { color: #928b7c; font-size: 9px; }

.doctrine-grid article {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 8px;
}

.doctrine-grid article.selected {
  border-color: rgba(210, 177, 93, .72);
  background: linear-gradient(145deg, rgba(105, 81, 34, .28), rgba(8, 14, 10, .6));
}

.doctrine-grid strong { color: #dac47f; font: 700 11px var(--font-display); }
.doctrine-grid small { min-height: 38px; color: #918a7b; font-size: 8px; line-height: 1.45; }
.doctrine-grid button { width: 100%; margin-top: auto; }

.administration-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: start;
  padding: 9px;
}

.administration-grid article.staffed { border-color: rgba(101, 139, 111, .62); }
.administration-grid .system-seal { grid-row: 1 / span 3; width: 26px; height: 26px; font-size: 12px; }
.administration-grid h4,
.administration-grid p,
.administration-grid > small,
.department-controls { grid-column: 2; }
.administration-grid p { min-height: auto; margin: 4px 0; }
.department-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 5px; }
.department-controls select { min-width: 0; min-height: 36px; border: 1px solid var(--stroke); border-radius: var(--radius-control); color: var(--paper); background: #151d18; font: 9px var(--font-data); }
.department-controls button { min-height: 36px; white-space: nowrap; }

@media (orientation: portrait), (max-width: 560px) {
  .council-proposal-grid,
  .doctrine-grid,
  .administration-grid { grid-template-columns: 1fr; }

  .administration-summary { grid-template-columns: auto 1fr; }
  .administration-summary small { grid-column: 1 / -1; }
  .council-proposal-card p { min-height: auto; }
  .doctrine-grid small { min-height: auto; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .council-active-card,
  .council-proposal-card,
  .doctrine-grid article,
  .administration-grid article { padding: 7px; }

  .operation-section { padding: 8px; }
  .council-proposal-card p { min-height: 28px; margin: 4px 0; }
}

@keyframes tacticalPulse { 50% { opacity: .5; transform: scale(.82); } }

@media (orientation: portrait), (max-width: 560px) {
  .briefing-reinforcements { margin-bottom: 86px; }
  .battle-tactical-grid { width: min(96vw, 620px); }
  .operation-controls,
  .operation-controls.four,
  .army-organization { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operation-controls.four button { grid-column: 1 / -1; }
  .weather-grid,
  .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (orientation: landscape) and (max-height: 520px) {
  .briefing-reinforcements { margin-bottom: 64px; }
  .battle-tactical-caption { top: 0; }
  .battle-tactical-grid { top: 16px; width: min(70vw, 620px); }
  .tactical-unit { min-width: 22px; min-height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .tactical-cell.movable::after { animation: none; }
}
.general-progression {
  margin: 0 10px 10px;
  padding: 9px 10px;
  border: 1px solid var(--stroke-soft);
  background: rgba(8, 13, 10, .48);
}
.general-progression:empty { display: none; }
.general-progression h4 { margin: 0 0 7px; color: #dfc77d; font: 700 11px var(--font-display); }
.general-progression p { margin: 7px 0 3px; color: var(--paper-soft); font-size: 9px; }
.general-progression small { color: #948c7a; font-size: 8px; }
.affinity-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.affinity-strip span { padding: 5px 2px; border: 1px solid var(--stroke-soft); color: #aaa18f; background: rgba(13, 20, 16, .75); font: 700 9px var(--font-data); text-align: center; }
.affinity-strip .grade-s { border-color: #c99b4d; color: #f1d680; }
.affinity-strip .grade-a { border-color: #739878; color: #bbd0ad; }
.affinity-strip .grade-b { color: #c3b792; }.ledger-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 5px 7px; border-left: 2px solid #658470; background: rgba(4, 8, 6, .35); }
.ledger-action small { color: #aeb9aa; }
.ledger-action button { min-height: 34px; }.operation-subcontrols { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--stroke-soft); }.facing-mark { position: absolute; right: -4px; top: -5px; display: grid; width: 12px; height: 12px; place-items: center; border-radius: 50%; color: #fff0af; background: #6d4d20; font: normal 8px sans-serif; }
/* Unified overlay motion v12 */
.sheet,
.modal,
.tutorial,
.ending,
.orientation-gate {
  isolation: isolate;
}

.sheet-backdrop,
.modal-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(125, 94, 43, .14), transparent 45%),
    rgba(5, 8, 6, .78);
  box-shadow: none;
  backdrop-filter: blur(7px) saturate(.78);
}

.modal {
  background: transparent;
  backdrop-filter: none;
}

.sheet-card,
.modal-card,
.tutorial-card,
.ending-card,
.orientation-card {
  border: 1px solid var(--stroke-strong);
  background:
    linear-gradient(140deg, rgba(221, 189, 119, .055) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 50% 0, rgba(135, 97, 43, .18), transparent 42%),
    var(--surface-raised);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .68),
    inset 0 1px rgba(255, 247, 220, .08),
    inset 0 0 0 5px rgba(7, 11, 8, .38);
}

.sheet-card {
  border-top: 2px solid var(--gold);
  animation: none;
}

.modal-card,
.tutorial-card,
.ending-card,
.orientation-card {
  z-index: 1;
  border-top: 3px solid var(--gold);
}

.modal-card > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  margin: -8px -8px 8px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid var(--stroke-soft);
  background: linear-gradient(90deg, rgba(101, 72, 34, .34), rgba(15, 22, 17, .18));
}

.modal-card > header h2 {
  margin-bottom: 0;
}

.modal-card > header .close-button {
  flex: 0 0 auto;
}

.modal-card select,
.operation-controls select,
.army-organization select {
  padding-right: 34px;
  border-color: var(--stroke);
  color: var(--paper);
  background-color: #151d18;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-bright) 50%),
    linear-gradient(135deg, var(--gold-bright) 50%, transparent 50%),
    linear-gradient(90deg, transparent, rgba(218, 187, 122, .14));
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px),
    100% 0;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px, 34px 100%;
  appearance: none;
}

.modal-card select:hover,
.operation-controls select:hover,
.army-organization select:hover {
  border-color: var(--stroke-strong);
}

.modal-card select option,
.operation-controls select option,
.army-organization select option {
  color: var(--paper);
  background: #172019;
}

.battle-flow-hint {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--stroke-soft);
  border-left: 3px solid var(--red-bright);
  border-radius: var(--radius-control);
  background: linear-gradient(90deg, rgba(111, 51, 33, .2), rgba(11, 17, 13, .68));
}

.battle-flow-hint > strong {
  color: var(--gold-bright);
  font: 700 11px var(--font-display);
  letter-spacing: .12em;
}

.battle-flow-hint ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 7px 0 6px;
  padding: 0;
  list-style: none;
}

.battle-flow-hint li {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: center;
  color: var(--paper-soft);
  font: 8px var(--font-data);
  text-align: center;
}

.battle-flow-hint li:not(:last-child)::after {
  position: absolute;
  top: 10px;
  right: -5px;
  width: 9px;
  height: 1px;
  background: var(--stroke-strong);
  content: "";
}

.battle-flow-hint i {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: 50%;
  color: #1b150b;
  background: linear-gradient(#e1c476, #a97b36);
  font: normal 700 9px var(--font-display);
}

.battle-flow-hint small {
  display: block;
  color: #9e9581;
  font: 8px/1.5 var(--font-data);
}

.orientation-gate {
  padding: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(125, 94, 43, .2), transparent 42%),
    rgba(5, 8, 6, .88);
  backdrop-filter: blur(9px) saturate(.78);
}

.orientation-card {
  display: grid;
  width: min(100%, 440px);
  max-height: calc(100svh - 36px);
  padding: 24px;
  place-content: center;
  justify-items: center;
  overflow-y: auto;
  border-radius: var(--radius-panel);
  text-align: center;
}

.orientation-card > p {
  margin: 0;
  color: var(--gold-bright);
  font: 700 10px var(--font-data);
  letter-spacing: .2em;
}

.orientation-card h2 {
  margin: 7px 0;
  color: #f1dfb6;
  font: 700 25px var(--font-display);
}

.orientation-card > small {
  max-width: 360px;
  color: var(--paper-soft);
  font-size: 11px;
  line-height: 1.7;
}

.orientation-card > button {
  width: min(100%, 320px);
  margin-top: 14px;
}

.orientation-card .text-button {
  margin-top: 5px;
}

.orientation-card .device-rotate {
  margin-inline: auto;
}

.army-marker.battle-ready {
  border-color: #e3bd60;
  color: #fff0b4;
  background: linear-gradient(180deg, rgba(132, 48, 31, .98), rgba(67, 23, 18, .98));
  box-shadow: 0 0 0 2px rgba(218, 177, 86, .24), 0 0 18px rgba(211, 91, 55, .55);
  animation: none;
}

.army-marker.battle-ready small {
  color: #ffe6a0;
  font-weight: 700;
}

/* Open and close states are kept visible until their exit animation completes. */
:is(.sheet, .modal, .tutorial, .ending, .orientation-gate, .notice).is-closing {
  pointer-events: none;
}

.sheet.is-entering .sheet-backdrop,
.modal.is-entering .modal-backdrop {
  animation: overlay-veil-in .24s ease-out both;
}

.sheet.is-closing .sheet-backdrop,
.modal.is-closing .modal-backdrop {
  animation: overlay-veil-out .22s ease-in both;
}

.sheet.is-entering .sheet-card {
  animation: overlay-sheet-in .3s cubic-bezier(.2, .82, .25, 1) both;
}

.sheet.is-closing .sheet-card {
  animation: overlay-sheet-out .24s cubic-bezier(.55, 0, .9, .45) both;
}

.modal.is-entering .modal-card,
.tutorial.is-entering .tutorial-card,
.ending.is-entering .ending-card,
.orientation-gate.is-entering .orientation-card {
  animation: overlay-dialog-in .3s cubic-bezier(.2, .82, .25, 1) both;
}

.modal.is-closing .modal-card,
.tutorial.is-closing .tutorial-card,
.ending.is-closing .ending-card,
.orientation-gate.is-closing .orientation-card {
  animation: overlay-dialog-out .22s cubic-bezier(.55, 0, .9, .45) both;
}

.tutorial.is-entering,
.ending.is-entering,
.orientation-gate.is-entering {
  animation: overlay-veil-in .24s ease-out both;
}

.tutorial.is-closing,
.ending.is-closing,
.orientation-gate.is-closing {
  animation: overlay-veil-out .22s ease-in both;
}

.notice {
  animation: none;
}

.notice.is-entering {
  animation: overlay-notice-in .3s cubic-bezier(.2, .82, .25, 1) both;
}

.notice.is-closing {
  animation: overlay-notice-out .22s ease-in both;
}

@keyframes overlay-veil-in {
  from { opacity: 0; backdrop-filter: blur(0) saturate(1); }
  to { opacity: 1; }
}

@keyframes overlay-veil-out {
  from { opacity: 1; }
  to { opacity: 0; backdrop-filter: blur(0) saturate(1); }
}

@keyframes overlay-sheet-in {
  from { opacity: 0; transform: translateY(48px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlay-sheet-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(42px) scale(.985); }
}

@keyframes overlay-dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes overlay-dialog-out {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(2px); }
}

@keyframes overlay-notice-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlay-notice-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(18px) scale(.97); }
}

@keyframes battle-ready-pulse {
  50% { transform: translateY(-2px) scale(1.04); filter: brightness(1.14); }
}

@media (orientation: landscape) and (min-width: 650px) {
  .sheet.is-entering .sheet-card {
    animation-name: overlay-sheet-side-in;
  }

  .sheet.is-closing .sheet-card {
    animation-name: overlay-sheet-side-out;
  }
}

@keyframes overlay-sheet-side-in {
  from { opacity: 0; transform: translateX(54px) scale(.99); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes overlay-sheet-side-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(48px) scale(.99); }
}

@media (orientation: portrait), (max-width: 560px) {
  .march-card {
    max-height: calc(100svh - 20px);
    padding: 14px;
    overflow-y: auto;
  }

  .battle-flow-hint ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-flow-hint li:nth-child(2)::after {
    display: none;
  }

  .orientation-card {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet.is-entering .sheet-backdrop,
  .sheet.is-closing .sheet-backdrop,
  .modal.is-entering .modal-backdrop,
  .modal.is-closing .modal-backdrop,
  .sheet.is-entering .sheet-card,
  .sheet.is-closing .sheet-card,
  .modal.is-entering .modal-card,
  .modal.is-closing .modal-card,
  .tutorial.is-entering,
  .tutorial.is-closing,
  .tutorial.is-entering .tutorial-card,
  .tutorial.is-closing .tutorial-card,
  .ending.is-entering,
  .ending.is-closing,
  .ending.is-entering .ending-card,
  .ending.is-closing .ending-card,
  .orientation-gate.is-entering,
  .orientation-gate.is-closing,
  .orientation-gate.is-entering .orientation-card,
  .orientation-gate.is-closing .orientation-card,
  .notice.is-entering,
  .notice.is-closing,
  .army-marker.battle-ready {
    animation: none !important;
  }
}
/* Dialog viewport layout v13 */
.sheet-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.sheet-content {
  min-height: 0;
  overscroll-behavior: contain;
  scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom));
  scrollbar-color: rgba(218, 187, 122, .45) rgba(7, 11, 8, .42);
  scrollbar-width: thin;
}

.sheet-content > :last-child {
  margin-bottom: max(8px, env(safe-area-inset-bottom));
}

.modal,
.tutorial,
.ending,
.orientation-gate {
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

.modal-card,
.tutorial-card,
.ending-card,
.orientation-card {
  width: min(100%, 440px);
  max-height: calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 0;
  overflow: hidden;
}

.modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.tutorial-card,
.ending-card,
.orientation-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.modal-card > header {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(101, 72, 34, .38), rgba(15, 22, 17, .96));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}

.dialog-scroll-area {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(218, 187, 122, .5) rgba(7, 11, 8, .4);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.dialog-scroll-area::-webkit-scrollbar,
.sheet-content::-webkit-scrollbar {
  width: 6px;
}

.dialog-scroll-area::-webkit-scrollbar-track,
.sheet-content::-webkit-scrollbar-track {
  background: rgba(7, 11, 8, .4);
}

.dialog-scroll-area::-webkit-scrollbar-thumb,
.sheet-content::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(218, 187, 122, .42);
}

.march-form-scroll {
  padding: 2px 15px 12px;
  scroll-padding-block: 10px;
}

.march-form-scroll > label:first-child {
  margin-top: 8px;
}

.tutorial-content,
.ending-content,
.orientation-content {
  padding: 22px 20px 12px;
  text-align: center;
}

.tutorial-content > p,
.ending-content > p {
  margin: 0;
  color: var(--paper-soft);
  font-size: 12px;
  line-height: 1.75;
}

.ending-content > #ending-kicker {
  margin-top: 13px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .2em;
}

.orientation-content {
  display: grid;
  place-content: center;
  justify-items: center;
}

.orientation-content > p {
  margin: 0;
  color: var(--gold-bright);
  font: 700 10px var(--font-data);
  letter-spacing: .2em;
}

.orientation-content h2 {
  margin: 7px 0;
  color: #f1dfb6;
  font: 700 25px var(--font-display);
}

.orientation-content > small {
  max-width: 360px;
  color: var(--paper-soft);
  font-size: 11px;
  line-height: 1.7;
}

.modal-actions,
.tutorial-actions,
.ending-actions,
.orientation-actions {
  position: relative;
  z-index: 4;
  gap: 9px;
  margin: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(43, 49, 38, .98), rgba(15, 21, 17, .99));
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .34);
}

.modal-actions,
.tutorial-actions,
.ending-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.orientation-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.modal-actions button,
.tutorial-actions button,
.ending-actions button,
.orientation-actions button {
  width: 100%;
  min-height: 44px;
  margin: 0;
}

.orientation-actions .text-button {
  margin: 0;
}

@media (orientation: portrait), (max-width: 560px) {
  .modal,
  .tutorial,
  .ending,
  .orientation-gate {
    padding-inline:
      max(8px, env(safe-area-inset-left))
      max(8px, env(safe-area-inset-right));
  }

  .march-card {
    max-height: calc(100svh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 0;
    overflow: hidden;
  }

  .march-form-scroll {
    padding-inline: 12px;
  }

  .tutorial-content,
  .ending-content,
  .orientation-content {
    padding: 18px 15px 10px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .modal,
  .tutorial,
  .ending,
  .orientation-gate {
    padding:
      max(5px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(5px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .modal-card,
  .tutorial-card,
  .ending-card,
  .orientation-card {
    max-height: calc(100svh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .modal-card > header {
    min-height: 46px;
    padding-block: 6px;
  }

  .march-form-scroll {
    padding-bottom: 8px;
  }

  .tutorial-content,
  .ending-content,
  .orientation-content {
    padding: 12px 16px 7px;
  }

  .modal-actions,
  .tutorial-actions,
  .ending-actions,
  .orientation-actions {
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  }

  .modal-actions button,
  .tutorial-actions button,
  .ending-actions button,
  .orientation-actions button {
    min-height: 38px;
  }

  .device-rotate {
    transform: scale(.72);
    margin-block: -10px -5px;
  }
}

@media (max-width: 350px) {
  .ending-actions {
    grid-template-columns: 1fr;
  }

  .notice {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .notice button {
    grid-column: 1 / -1;
    min-height: 40px;
  }
}
/* Multidimensional battle briefing v14 */
.briefing-factors {
  display: grid;
  width: min(680px, calc(100% - 24px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 7px auto 0;
}

.briefing-factor-card {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--stroke-soft);
  border-left: 3px solid #719178;
  border-radius: var(--radius-control);
  background: rgba(8, 13, 10, .82);
}

.briefing-factor-card.defender {
  border-left-color: #a35b46;
}

.briefing-factor-card strong,
.briefing-factor-card p,
.briefing-factor-card small {
  display: block;
  margin: 0;
}

.briefing-factor-card strong {
  color: var(--gold-bright);
  font: 700 10px var(--font-display);
}

.briefing-factor-card p {
  margin-top: 3px;
  color: var(--paper-soft);
  font: 8px/1.4 var(--font-data);
}

.briefing-factor-card small {
  margin-top: 2px;
  overflow: hidden;
  color: #9c927d;
  font: 8px/1.4 var(--font-data);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.briefing-factor-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 5px 8px;
  border: 1px dashed rgba(218, 187, 122, .25);
  color: #b7aa8d;
  background: rgba(72, 54, 30, .18);
  font: 8px/1.45 var(--font-data);
  text-align: center;
}

.briefing-skill-list {
  margin-top: 7px;
}

@media (orientation: portrait), (max-width: 560px) {
  .briefing-factors {
    width: calc(100% - 16px);
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .briefing-factor-note {
    grid-column: auto;
  }

  .briefing-factor-card {
    padding-block: 5px;
  }

  .briefing-factor-card p {
    white-space: normal;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .briefing-factors {
    margin-top: 4px;
  }

  .briefing-factor-card {
    padding: 4px 7px;
  }

  .briefing-factor-card p,
  .briefing-factor-note {
    display: none;
  }

  .briefing-skill-list {
    margin-top: 4px;
  }
}
/* WeChat session and duel command v15 */
.top-hud {
  grid-template-columns: minmax(0, 1fr) auto 42px 42px;
}
.account-button {
  margin-left: 6px;
  border-color: rgba(198, 161, 87, 0.55);
  font-size: 12px;
}
.account-button.is-authenticated {
  border-color: #77b88a;
  color: #d6f2d8;
  background: radial-gradient(circle at 35% 28%, #406c4b, #16251b 68%);
}
.account-button.is-offline {
  color: #b7b0a0;
  filter: saturate(0.55);
}
.battle-command.duel {
  border-color: rgba(201, 139, 67, 0.7);
  background: linear-gradient(180deg, rgba(104, 54, 31, 0.96), rgba(37, 24, 18, 0.98));
}
.battle-command.duel i {
  color: #ffd08a;
}
@media (orientation: portrait), (max-width: 560px) {
  .top-hud {
    grid-template-columns: minmax(0, 1fr) auto 38px 38px;
  }
  .account-button,
  .top-hud > .icon-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
  }
}
/* Post-battle occupation policy v15 */
.battle-occupation {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.battle-occupation[hidden] {
  display: none;
}
.battle-occupation header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #bfb39d;
}
.occupation-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.occupation-choice,
.occupation-selected {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(198, 157, 83, 0.44);
  border-radius: 8px;
  color: #ead8ad;
  background: rgba(25, 30, 23, 0.9);
  text-align: left;
}
.occupation-choice strong,
.occupation-choice small,
.occupation-selected strong,
.occupation-selected p {
  display: block;
}
.occupation-choice small,
.occupation-selected p {
  margin: 4px 0 0;
  color: #aaa18f;
  font-size: 10px;
  line-height: 1.45;
}
@media (orientation: portrait), (max-width: 620px) {
  .occupation-choice-grid {
    grid-template-columns: 1fr;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .battle-occupation {
    margin-top: 5px;
  }
  .occupation-choice {
    padding: 5px 8px;
  }
  .occupation-choice small {
    display: none;
  }
}
/* Compact top HUD controls v16 */
.top-hud {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.top-hud-actions {
  display: inline-flex;
  grid-column: 3;
  align-items: center;
  justify-self: end;
  gap: 2px;
  white-space: nowrap;
}
.top-hud-actions .icon-button {
  margin-left: 0;
}
.account-button {
  position: relative;
}
.account-button::after {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 6px;
  height: 6px;
  border: 1px solid #172018;
  border-radius: 50%;
  background: #c69b52;
  content: "";
}
.account-button[data-status="wechat"]::after {
  background: #79c58d;
}
.account-button[data-status="offline"]::after {
  background: #7e827c;
}
.account-icon,
.speaker-icon {
  display: block;
  width: 19px;
  height: 19px;
}
.account-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.sound-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 8px;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
}
.sound-button:hover,
.sound-button:active {
  color: #f2d990;
  background: rgba(218, 187, 122, .1) !important;
}
.speaker-body {
  fill: currentColor;
  stroke: none;
}
.sound-wave,
.mute-mark {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
  transition: opacity .16s ease;
}
.mute-mark {
  opacity: 0;
}
.sound-button.is-muted .sound-wave {
  opacity: 0;
}
.sound-button.is-muted .mute-mark {
  opacity: 1;
}
@media (orientation: portrait), (max-width: 560px) {
  .top-hud {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .top-hud-actions {
    gap: 0;
  }
  .sound-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 6px;
  }
}
/* Matched top HUD controls v17 */
.top-hud-actions {
  grid-row: 1;
  width: auto;
  max-width: 68px;
  flex-wrap: nowrap;
}
.top-hud-actions .account-button,
.top-hud-actions .sound-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 34px;
  padding: 7px;
}
.top-hud-actions .sound-button {
  color: rgba(198, 161, 87, .55);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (orientation: portrait), (max-width: 560px) {
  .top-hud-actions {
    max-width: 64px;
  }
  .top-hud-actions .account-button,
  .top-hud-actions .sound-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    flex-basis: 32px;
    padding: 6px;
  }
}
/* Rounded switch icons and spacing v18 */
.top-hud-actions {
  max-width: none;
  gap: 6px;
  padding-inline: 4px;
}
.top-hud-actions .account-button {
  color: rgba(198, 161, 87, .72);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.top-hud-actions .account-button:hover,
.top-hud-actions .account-button:active {
  color: rgba(226, 195, 126, .9);
  background: rgba(218, 187, 122, .1) !important;
}
.top-hud-actions .sound-button {
  position: relative;
}
.sound-button .speaker-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 21px;
  height: 21px;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .16s ease, transform .16s ease;
}
.sound-icon-on rect,
.sound-icon-on > path:not(.speaker-wave),
.sound-icon-off rect,
.sound-icon-off > path:not(.speaker-slash) {
  fill: currentColor;
  stroke: none;
}
.speaker-wave,
.speaker-slash {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.sound-icon-off {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82) !important;
}
.sound-button.is-muted .sound-icon-on {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
}
.sound-button.is-muted .sound-icon-off {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) !important;
}
@media (orientation: portrait), (max-width: 560px) {
  .top-hud-actions {
    max-width: none;
    gap: 4px;
    padding-inline: 2px;
  }
  .sound-button .speaker-icon {
    width: 20px;
    height: 20px;
  }
}
/* Strict mutually exclusive HUD states v19 */
.ruler-medallion {
  background: transparent !important;
  box-shadow: none !important;
}
.top-hud-actions .account-button {
  margin-inline: 3px !important;
}
.account-button::after {
  border: 0;
}
.sound-icon-on,
.sound-icon-off {
  color: rgba(198, 161, 87, .55);
  opacity: 1;
  transition: none;
}
.sound-icon-on {
  display: block;
}
.sound-icon-off {
  display: none;
  transform: translate(-50%, -50%) scale(1) !important;
}
.sound-button.is-muted .sound-icon-on {
  display: none;
  opacity: 1;
}
.sound-button.is-muted .sound-icon-off {
  display: block;
  opacity: 1;
}
@media (orientation: portrait), (max-width: 560px) {
  .top-hud-actions .account-button {
    margin-inline: 2px !important;
  }
}
/* Account status color sync v20 */
.account-button[data-status="wechat"],
.account-button[data-status="wechat"] .account-icon {
  color: #79c58d;
  stroke: #79c58d;
}
.account-button[data-status="wechat"]:hover,
.account-button[data-status="wechat"]:active {
  color: #79c58d;
}

/* Interactive duel flow v22 */
.duel-panel {
  position: absolute;
  z-index: 8;
  top: 52%;
  left: 50%;
  width: min(720px, calc(100% - 28px));
  max-height: calc(100svh - 230px);
  padding: 12px;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(209, 170, 89, .72);
  border-radius: var(--radius-panel);
  color: var(--paper);
  background:
    linear-gradient(135deg, rgba(24, 39, 29, .97), rgba(19, 13, 11, .98)),
    url('./assets/art/paper-noise.svg');
  box-shadow: 0 18px 48px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(238, 210, 143, .08);
  animation: duelPanelIn .24s ease both;
}
.duel-panel[hidden] { display: none; }
.duel-panel > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(209, 170, 89, .25);
}
.duel-panel > header div { display: flex; align-items: baseline; gap: 10px; }
.duel-panel > header span { color: var(--gold-bright); font: 800 17px var(--font-display); letter-spacing: .12em; }
.duel-panel > header strong { color: #b9aa87; font: 9px var(--font-data); }
.duel-panel > header small { color: #9fb2a3; font: 8px var(--font-data); text-align: right; }
.duel-combatants {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 0 6px;
}
.duel-combatants article { min-width: 0; }
.duel-combatants article:last-child { text-align: right; }
.duel-combatants b,
.duel-combatants small { display: block; }
.duel-combatants b { color: #ead7a5; font: 700 14px var(--font-display); }
.duel-combatants small { margin-top: 4px; color: #b5aa91; font: 8px var(--font-data); }
.duel-combatants article > i {
  display: block;
  height: 7px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(3, 5, 4, .82);
}
.duel-combatants article > i span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6f2520, #d17645);
  transition: width .3s ease;
}
.duel-combatants article:last-child > i span { margin-left: auto; background: linear-gradient(90deg, #d17645, #6f2520); }
.duel-combatants > em {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #b68c48;
  border-radius: 50%;
  color: #f0d88c;
  background: #4b2118;
  font: normal 800 18px var(--font-display);
}
.duel-history {
  min-height: 28px;
  margin: 0 0 8px;
  padding: 6px 8px;
  color: #c9bea4;
  background: rgba(5, 8, 6, .48);
  font: 9px/1.55 var(--font-data);
  text-align: center;
}
.duel-commands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.duel-commands button {
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 1px 6px;
  padding: 6px;
  border: 1px solid rgba(177, 139, 72, .62);
  border-radius: var(--radius-control);
  color: #e1d5b8;
  background: linear-gradient(135deg, rgba(62, 39, 25, .92), rgba(17, 23, 18, .97));
  text-align: left;
}
.duel-commands button b {
  grid-row: 1 / 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(218, 184, 109, .65);
  border-radius: 50%;
  color: #e8cc7a;
  font: 800 12px var(--font-display);
}
.duel-commands button span { font: 700 10px var(--font-display); }
.duel-commands button small { overflow: hidden; color: #a99d83; font: 7px var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.duel-commands button:disabled { opacity: .38; }
.battle-field.duel-active .battle-tactical-grid { filter: blur(2px) brightness(.55); }
@keyframes duelPanelIn { from { opacity: 0; transform: translate(-50%, -44%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (orientation: portrait), (max-width: 560px) {
  .duel-panel {
    top: 45%;
    width: calc(100% - 18px);
    max-height: calc(100svh - 390px);
    padding: 9px;
  }
  .duel-panel > header { align-items: start; }
  .duel-panel > header small { max-width: 48%; }
  .duel-combatants { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 6px; }
  .duel-combatants > em { width: 32px; height: 32px; }
  .duel-commands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duel-commands button { min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .duel-panel { top: 49%; max-height: calc(100svh - 170px); padding: 8px; }
  .duel-panel > header { padding-bottom: 5px; }
  .duel-combatants { padding: 6px 0 4px; }
  .duel-history { min-height: 22px; margin-bottom: 5px; padding: 3px 6px; }
  .duel-commands button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .duel-panel { animation: none; }
}
/* Diplomacy debate, force rank, district and relationship systems v22 */
.diplomacy-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.diplomatic-debate {
  padding: 12px;
  border: 1px solid rgba(190, 148, 70, .58);
  border-radius: var(--radius-panel);
  background: linear-gradient(145deg, rgba(26, 42, 31, .96), rgba(29, 18, 14, .97));
  box-shadow: var(--shadow-raised);
  animation: sheetContentIn .24s ease both;
}
.diplomatic-debate > header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(201, 165, 88, .24);
}
.diplomatic-debate h3 { margin: 0; color: var(--gold-bright); font: 700 15px var(--font-display); }
.diplomatic-debate header small,
.diplomatic-debate header > strong { color: var(--muted); font: 8px var(--font-data); }
.debate-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.debate-meters article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px;
  border: 1px solid rgba(111, 153, 126, .35);
  background: rgba(6, 12, 8, .42);
}
.debate-meters article.defender { border-color: rgba(157, 75, 55, .45); }
.debate-meters span { color: #b9ae92; font: 8px var(--font-data); }
.debate-meters strong { color: #e5cc83; font: 13px var(--font-display); }
.debate-meters i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 5px; background: rgba(3, 5, 4, .72); }
.debate-meters i b { display: block; height: 100%; background: linear-gradient(90deg, #3f7458, #85b180); transition: width .3s ease; }
.debate-meters .defender i b { background: linear-gradient(90deg, #7d2c25, #d3774b); }
.debate-terms,
.debate-focus { color: #a99e84; font: 8px/1.5 var(--font-data); }
.debate-history {
  max-height: 84px;
  padding: 6px 8px;
  overflow: auto;
  border-left: 2px solid #9d7439;
  background: rgba(7, 10, 8, .52);
}
.debate-history p { margin: 2px 0; color: #c9bea3; font: 8px/1.5 var(--font-data); }
.debate-command-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 9px 0 6px; }
.debate-command-grid button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 2px 6px;
  padding: 6px;
  border: 1px solid rgba(176, 139, 71, .55);
  border-radius: var(--radius-control);
  color: var(--paper);
  background: rgba(12, 22, 16, .88);
  text-align: left;
}
.debate-command-grid button b {
  grid-row: 1 / 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #9e7c43;
  border-radius: 50%;
  color: var(--gold-bright);
  font: 700 12px var(--font-display);
}
.debate-command-grid button span { font: 700 10px var(--font-display); }
.debate-command-grid button small { overflow: hidden; color: var(--muted); font: 7px var(--font-data); text-overflow: ellipsis; white-space: nowrap; }

.force-rank-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(198, 157, 78, .46);
  background: linear-gradient(90deg, rgba(77, 48, 24, .68), rgba(13, 25, 18, .76));
}
.force-rank-seal {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid #bb9148;
  border-radius: 50%;
  color: #efd78c;
  background: radial-gradient(circle, #684125, #24160f);
  font: 800 14px var(--font-display);
}
.force-rank-line h4 { margin: 0 0 3px; color: var(--gold-bright); font: 700 13px var(--font-display); }
.force-rank-line small,
.force-rank-line > strong { color: var(--muted); font: 8px var(--font-data); }
.district-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.district-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 8px;
  border: 1px solid rgba(101, 148, 116, .4);
  background: rgba(9, 20, 14, .66);
}
.district-card .system-seal { grid-row: 1 / 4; }
.district-card h4,
.district-card p { margin: 0; }
.district-card h4 { color: #dfcb91; font: 700 11px var(--font-display); }
.district-card small { color: #a8ad99; font: 8px var(--font-data); }
.district-card p { color: var(--muted); font-size: 8px; line-height: 1.45; }
.district-controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 5px; }

.general-relation-panel {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid rgba(184, 143, 69, .4);
  background: rgba(41, 28, 17, .42);
}
.general-relation-panel h4,
.general-relation-panel p { margin: 0 0 5px; }
.general-relation-panel h4 { color: var(--gold-bright); font: 700 12px var(--font-display); }
.general-relation-panel p { color: #d0c19e; font-size: 9px; }
.general-relation-panel > small { color: var(--muted); font: 8px/1.5 var(--font-data); }
.relation-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }

@media (orientation: portrait), (max-width: 560px) {
  .diplomacy-terms,
  .debate-command-grid,
  .relation-action-grid { grid-template-columns: 1fr; }
  .debate-command-grid button { min-height: 46px; }
  .district-ledger { grid-template-columns: 1fr; }
  .force-rank-line { grid-template-columns: 44px minmax(0, 1fr); }
  .force-rank-seal { width: 40px; height: 40px; font-size: 12px; }
  .force-rank-line > strong { grid-column: 1 / -1; }
  .operation-controls.five { grid-template-columns: 1fr; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .diplomatic-debate { padding: 8px; }
  .debate-history { max-height: 48px; }
  .debate-command-grid button { min-height: 46px; }
}
.operation-controls.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (orientation: portrait), (max-width: 560px) {
  .operation-controls.five { grid-template-columns: 1fr; }
}
/* Unified select controls v23 */
select:not([multiple]),
select[multiple] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 38px 8px 11px;
  border: 1px solid rgba(198, 161, 87, .55);
  border-radius: var(--radius-control);
  color: var(--paper);
  background-color: #111a14;
  background-image:
    linear-gradient(45deg, transparent 50%, #d9b96f 50%),
    linear-gradient(135deg, #d9b96f 50%, transparent 50%),
    linear-gradient(90deg, rgba(198, 161, 87, .28) 0 1px, rgba(83, 57, 29, .38) 1px 100%),
    linear-gradient(180deg, rgba(30, 44, 34, .98), rgba(12, 20, 15, .98));
  background-position:
    calc(100% - 17px) calc(50% - 1px),
    calc(100% - 12px) calc(50% - 1px),
    100% 0,
    0 0;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px, 34px 100%, 100% 100%;
  box-shadow: inset 0 1px rgba(244, 220, 164, .07), 0 2px 7px rgba(0, 0, 0, .22);
  font: 600 10px/1.25 var(--font-data);
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color-scheme: dark;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease;
}

select[multiple],
select[size]:not([size="1"]) {
  min-height: 88px;
  padding-right: 11px;
  background-image: linear-gradient(180deg, rgba(30, 44, 34, .98), rgba(12, 20, 15, .98));
  background-position: 0 0;
  background-size: 100% 100%;
  white-space: normal;
}

select:not([multiple]):hover,
select[multiple]:hover {
  border-color: rgba(226, 190, 111, .9);
  box-shadow: inset 0 1px rgba(255, 232, 177, .1), 0 0 0 1px rgba(198, 161, 87, .1), 0 3px 9px rgba(0, 0, 0, .28);
  filter: brightness(1.07);
}

select:not([multiple]):focus-visible,
select[multiple]:focus-visible {
  border-color: var(--gold-bright);
  outline: 2px solid rgba(221, 184, 104, .5);
  outline-offset: 2px;
  box-shadow: inset 0 1px rgba(255, 236, 190, .12), 0 0 0 3px rgba(111, 144, 103, .18);
}

select:not([multiple]):disabled,
select[multiple]:disabled {
  border-color: rgba(132, 122, 96, .38);
  color: rgba(201, 193, 172, .55);
  cursor: not-allowed;
  filter: grayscale(.42);
  opacity: .62;
}

select option,
select optgroup {
  color: var(--paper);
  background: #172019;
  font-family: var(--font-data);
}

select option:checked {
  color: #fff1c9;
  background: #6b4c27;
}

@media (orientation: portrait), (max-width: 560px) {
  select:not([multiple]),
  select[multiple] {
    min-height: 44px;
    padding-block: 9px;
    font-size: 11px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  select:not([multiple]),
  select[multiple] {
    min-height: 36px;
    padding-block: 6px;
    font-size: 10px;
  }
}
/* Deep simulation screens v24 */
.deep-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(198, 161, 87, .46);
  border-left: 3px solid #b98b49;
  border-radius: var(--radius-control);
  background: linear-gradient(100deg, rgba(81, 52, 27, .62), rgba(12, 26, 18, .82));
}
.deep-summary strong { color: var(--gold-bright); font: 700 13px var(--font-display); }
.deep-summary small { grid-column: 1; color: #c6b990; font: 9px var(--font-data); }
.deep-summary em { grid-column: 2; grid-row: 1 / span 2; color: #88bc91; font: 700 10px var(--font-data); font-style: normal; white-space: nowrap; }
.officer-action-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.deep-action-button { display: grid; gap: 4px; min-width: 0; min-height: 58px; padding: 7px; border: 1px solid rgba(111, 151, 119, .42); color: #e0d2aa; background: linear-gradient(180deg, rgba(31, 54, 39, .92), rgba(13, 27, 19, .94)); text-align: left; }
.deep-action-button:hover { border-color: rgba(198, 161, 87, .72); transform: translateY(-1px); }
.deep-action-button strong { font: 700 11px var(--font-display); }
.deep-action-button small { color: var(--muted); font: 8px/1.4 var(--font-data); }
.family-ledger,
.district-automation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.family-card,
.district-automation-card { min-width: 0; padding: 9px; border: 1px solid rgba(198, 161, 87, .36); border-radius: var(--radius-control); background: linear-gradient(135deg, rgba(63, 42, 23, .45), rgba(8, 20, 14, .76)); }
.family-card h4,
.district-automation-card h4 { margin: 0 0 4px; color: #e1c98c; font: 700 12px var(--font-display); }
.family-card p { margin: 0 0 4px; color: #d0c3a1; font-size: 9px; }
.family-card > small,
.district-automation-card > small { display: block; min-height: 24px; margin-bottom: 7px; color: var(--muted); font: 8px/1.45 var(--font-data); }
.family-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; }
.family-controls button { min-height: 40px; white-space: nowrap; }
.district-automation-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: end; }
.district-automation-card h4,
.district-automation-card > small { grid-column: 1 / -1; }
.district-automation-card button { min-height: 40px; white-space: nowrap; }
.meeting-ledger { display: grid; gap: 4px; margin-top: 8px; }
.meeting-ledger small { padding: 6px 8px; border-left: 2px solid #829b72; color: #cfc39f; background: rgba(9, 18, 13, .66); font: 9px var(--font-data); }

@media (orientation: portrait), (max-width: 560px) {
  .deep-summary { grid-template-columns: 1fr; }
  .deep-summary small,
  .deep-summary em { grid-column: 1; grid-row: auto; white-space: normal; }
  .officer-action-grid,
  .family-ledger,
  .district-automation-list { grid-template-columns: 1fr; }
  .family-controls,
  .district-automation-card { grid-template-columns: 1fr; }
  .district-automation-card h4,
  .district-automation-card > small { grid-column: 1; }
  .family-controls button,
  .district-automation-card button { width: 100%; min-height: 44px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .deep-summary { padding: 7px 9px; }
  .officer-action-grid { grid-template-columns: repeat(5, minmax(92px, 1fr)); overflow-x: auto; padding-bottom: 3px; }
  .deep-action-button { min-height: 48px; }
  .family-card,
  .district-automation-card { padding: 7px; }
}

/* Civil and martial officer system v25 */
.officer-type-badge,
.officer-vocation-seal {
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor !important;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .08em;
}

.officer-type-badge.martial,
.officer-vocation.martial .officer-vocation-seal {
  color: #d9a060;
  background: rgba(112, 49, 25, .45);
}

.officer-type-badge.civil,
.officer-vocation.civil .officer-vocation-seal {
  color: #7dc5a0;
  background: rgba(25, 77, 61, .46);
}

.general-thumb[data-officer-type="martial"] small { color: #d0a267; }
.general-thumb[data-officer-type="civil"] small { color: #78b996; }

.officer-vocation {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid rgba(214, 184, 109, .25);
  border-radius: var(--radius-control);
  background: linear-gradient(100deg, rgba(25, 30, 24, .94), rgba(12, 17, 14, .78));
}

.officer-vocation.martial { border-left: 3px solid #a86337; }
.officer-vocation.civil { border-left: 3px solid #4f8b70; }
.officer-vocation-seal { width: 34px; height: 34px; border-radius: 50%; font-size: 15px; }
.officer-vocation strong { color: var(--gold-bright); font: 700 11px var(--font-display); }
.officer-vocation p { margin: 2px 0; color: #b5aa93; font-size: 8px; line-height: 1.45; }
.officer-vocation small { color: #8f8674; font-size: 7px; line-height: 1.45; }

.general-skill-strip article.skill-martial,
.briefing-skill-card.type-martial,
.battle-command.skill.type-martial {
  border-color: rgba(185, 105, 55, .62);
  background: linear-gradient(135deg, rgba(91, 42, 24, .91), rgba(25, 18, 13, .96));
}

.general-skill-strip article.skill-civil,
.briefing-skill-card.type-civil,
.battle-command.skill.type-civil {
  border-color: rgba(78, 143, 113, .65);
  background: linear-gradient(135deg, rgba(24, 70, 55, .9), rgba(12, 25, 20, .97));
}

.briefing-skill-card.type-martial > header > small,
.battle-command.skill.type-martial small { color: #d9a060; }
.briefing-skill-card.type-civil > header > small,
.battle-command.skill.type-civil small { color: #7dc5a0; }

@media (orientation: portrait), (max-width: 560px) {
  .officer-vocation { grid-template-columns: 34px minmax(0, 1fr); padding: 8px; }
  .officer-vocation-seal { width: 30px; height: 30px; }
  .officer-vocation small { display: block; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .officer-vocation { grid-template-columns: 30px minmax(0, 1fr); margin: 5px 0; padding: 5px 8px; }
  .officer-vocation-seal { width: 26px; height: 26px; font-size: 12px; }
  .officer-vocation p { margin: 0; line-height: 1.25; }
  .officer-vocation small { display: none; }
}
.administration-grid article.vocation-fit {
  border-color: rgba(91, 155, 121, .58);
  box-shadow: inset 3px 0 rgba(91, 155, 121, .55);
}

.administration-grid article.cross-trained {
  border-color: rgba(174, 129, 61, .42);
  box-shadow: inset 3px 0 rgba(174, 129, 61, .38);
}
/* Configurable monetization and gameplay integrity UI v26 */
.ad-policy-summary,
.ad-compliance-note,
.ad-reward-card {
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-panel);
  background: linear-gradient(145deg, rgba(39, 46, 37, 0.96), rgba(17, 23, 19, 0.98));
  box-shadow: var(--shadow-control);
}

.ad-policy-summary {
  margin-top: 12px;
  padding: 14px 16px;
}

.ad-policy-summary h3,
.ad-reward-card h3,
.ad-compliance-note strong {
  color: var(--gold-bright);
  font-family: var(--font-display);
}

.ad-policy-summary h3,
.ad-reward-card h3 {
  margin: 4px 0 6px;
}

.ad-policy-summary p,
.ad-reward-card p,
.ad-compliance-note p {
  margin: 0;
  color: var(--paper-soft);
  line-height: 1.65;
}

.ad-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.ad-reward-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
}

.ad-reward-card.is-locked {
  opacity: 0.72;
}

.ad-reward-seal {
  display: grid;
  width: 46px;
  height: 46px;
  border: 1px solid var(--stroke-strong);
  border-radius: 50%;
  color: #21190d;
  background: radial-gradient(circle at 35% 30%, #f0d486, #a97835 78%);
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: normal;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.32);
}

.ad-reward-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.ad-reward-copy > strong {
  color: var(--good);
  font-family: var(--font-data);
  font-size: 13px;
}

.ad-reward-copy > small {
  margin: 7px 0 10px;
  color: rgba(238, 227, 203, 0.66);
  font-family: var(--font-data);
  font-size: 11px;
}

.ad-reward-copy button {
  width: 100%;
  margin-top: auto;
}

.ad-compliance-note {
  margin-top: 10px;
  padding: 12px 14px;
}

.ad-compliance-note strong {
  display: block;
  margin-bottom: 4px;
}

.reward-ad-modal {
  z-index: 98;
}

.ad-modal-card {
  width: min(430px, calc(100vw - 28px));
  overflow: hidden;
}

.ad-stage {
  position: relative;
  display: grid;
  min-height: 118px;
  overflow: hidden;
  color: var(--gold-bright);
  background:
    radial-gradient(circle at 50% 45%, rgba(226, 196, 121, 0.2), transparent 42%),
    linear-gradient(135deg, #17241c, #342616 62%, #151b16);
  place-items: center;
}

.ad-stage::before,
.ad-stage::after {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(226, 196, 121, 0.18);
  border-radius: 50%;
  content: "";
}

.ad-stage::after {
  width: 94px;
  height: 94px;
}

.ad-stage span {
  z-index: 1;
  font-family: var(--font-display);
  font-size: 42px;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.48);
}

.ad-stage b {
  position: absolute;
  right: 13px;
  bottom: 9px;
  color: rgba(240, 212, 134, 0.78);
  font-family: var(--font-display);
  letter-spacing: 0.18em;
}

.ad-modal-content {
  padding: 18px 20px 14px;
  text-align: center;
}

.ad-modal-content h2 {
  margin: 3px 0 8px;
  color: var(--gold-bright);
}

.ad-modal-content p {
  margin: 0;
  color: var(--paper-soft);
  line-height: 1.65;
}

.ad-modal-content > small {
  display: block;
  margin-top: 9px;
  color: rgba(238, 227, 203, 0.56);
}

.ad-progress {
  display: block;
  margin-top: 13px;
  color: var(--good);
  font-family: var(--font-data);
}

.ad-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--stroke-soft);
  background: rgba(14, 20, 16, 0.98);
}

@media (orientation: portrait) {
  .ad-reward-grid {
    grid-template-columns: 1fr;
  }

  .ad-modal-card {
    max-height: min(88dvh, 620px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .ad-modal-card {
    display: grid;
    width: min(720px, calc(100vw - 36px));
    max-height: calc(100dvh - 20px);
    grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1.2fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .ad-stage {
    min-height: 0;
    grid-row: 1 / 3;
  }

  .ad-modal-content {
    overflow-y: auto;
    text-align: left;
  }

  .ad-modal-actions {
    grid-column: 2;
  }
}
/* Optional cloud, strategic depth and campaign programs UI v27 */
.campaign-victory-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.victory-path-group { align-items: start; }
.victory-path-group > strong { padding-top: 17px; }
.campaign-victory-options .campaign-option { min-height: 62px; }
.campaign-victory-options .campaign-option small { white-space: normal; line-height: 1.3; }

.cloud-save-summary,
.logistics-row,
.ai-plan-grid article,
.court-faction-card,
.political-risk-card,
.counter-offer-card,
.campaign-program-card {
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-control);
  background: linear-gradient(145deg, rgba(34, 43, 34, .94), rgba(12, 20, 15, .96));
  box-shadow: var(--shadow-control);
}
.cloud-save-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-left: 3px solid #718477;
}
.cloud-save-summary.ready { border-left-color: var(--good); }
.cloud-save-summary.syncing { border-left-color: var(--gold-bright); }
.cloud-save-summary.offline,
.cloud-save-summary.conflict { border-left-color: #a96543; }
.cloud-save-summary strong { color: var(--gold-bright); font: 700 13px var(--font-display); }
.cloud-save-summary p { margin: 3px 0; color: var(--paper-soft); font-size: 10px; }
.cloud-save-summary small,
.save-cloud-meta { display: block; color: var(--muted); font: 9px var(--font-data); }
.cloud-save-summary .inline-actions,
.save-card .inline-actions { flex-wrap: wrap; }

.logistics-list,
.political-risk-list,
.counter-offer-list { display: grid; gap: 7px; }
.logistics-row,
.political-risk-card,
.counter-offer-card {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
}
.logistics-row.disconnected { border-left: 3px solid #a95f43; }
.logistics-row.connected { border-left: 3px solid #5f9470; }
.logistics-row strong,
.political-risk-card strong,
.counter-offer-card strong,
.court-faction-card strong,
.ai-plan-grid strong,
.campaign-program-card strong { display: block; color: #e7d3a5; font: 700 11px var(--font-display); }
.logistics-row small,
.political-risk-card small,
.counter-offer-card small,
.court-faction-card small,
.ai-plan-grid small,
.campaign-program-card small { display: block; margin-top: 3px; color: var(--muted); font: 9px/1.45 var(--font-data); }
.logistics-row .inline-actions { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) auto; gap: 5px; }
.ai-plan-grid,
.court-faction-grid,
.campaign-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.ai-plan-grid article,
.court-faction-card,
.campaign-program-card { min-width: 0; padding: 9px 10px; }
.ai-plan-grid em { display: block; margin-top: 5px; color: #82b994; font: normal 8px var(--font-data); }

.credibility-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.credibility-strip span { padding: 7px 8px; border: 1px solid rgba(198,161,87,.28); color: #d4c49d; background: rgba(14,23,17,.74); text-align: center; font: 10px var(--font-data); }
.subsection-title { margin: 10px 0 6px; color: var(--gold); font: 700 11px var(--font-display); }
.political-risk-card { grid-template-columns: minmax(0,1fr) auto; }
.political-risk-card.level-危急 { border-left: 3px solid #b65442; }
.political-risk-card.level-不稳 { border-left: 3px solid #b58b48; }
.counter-offer-card { grid-template-columns: minmax(0,1fr) minmax(120px,auto); border-left: 3px solid var(--gold); }
.prisoner-exchange-list { display: flex; flex-wrap: wrap; gap: 6px; }
.campaign-program-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.campaign-program-card > small { grid-column: 1; }
.campaign-program-card > button { grid-column: 2; grid-row: 1 / span 3; min-width: 76px; }
.campaign-program-card.complete { border-color: rgba(104,163,119,.55); box-shadow: inset 3px 0 rgba(104,163,119,.55), var(--shadow-control); }
.campaign-program-card.live { background: linear-gradient(145deg, rgba(30,51,40,.94), rgba(13,25,19,.96)); }

.tactical-cell.terrain-rubble { color: #dbc08a; background: repeating-linear-gradient(135deg, #564936 0 5px, #302c25 5px 10px); }
.tactical-cell.control-zone::before { position: absolute; inset: 4%; z-index: 1; border: 1px dashed rgba(190,88,65,.9); content: ''; box-shadow: inset 0 0 12px rgba(158,51,36,.25); }

@media (orientation: portrait), (max-width: 680px) {
  .campaign-victory-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-victory-options .campaign-option:last-child { grid-column: 1 / -1; }
  .cloud-save-summary,
  .logistics-row,
  .political-risk-card,
  .counter-offer-card { grid-template-columns: 1fr; }
  .cloud-save-summary .inline-actions,
  .political-risk-card button { width: 100%; }
  .logistics-row .inline-actions { grid-template-columns: minmax(0,1fr) auto; }
  .ai-plan-grid,
  .court-faction-grid,
  .campaign-program-grid { grid-template-columns: 1fr; }
  .credibility-strip { grid-template-columns: 1fr; }
  .counter-offer-card .inline-actions { justify-content: stretch; }
  .counter-offer-card .inline-actions button { flex: 1; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .campaign-victory-options .campaign-option { min-height: 48px; padding: 4px; }
  .campaign-victory-options .campaign-option small { font-size: 7px; }
  .cloud-save-summary { padding: 8px 10px; }
  .logistics-row,
  .court-faction-card,
  .political-risk-card,
  .counter-offer-card,
  .campaign-program-card { padding: 7px 8px; }
  .logistics-row .inline-actions select,
  .logistics-row .inline-actions button { min-height: 34px; }
}
/* Officer defection and counter-intelligence UI v28 */
.defection-panel {
  margin-top: 9px;
  padding: 9px;
  border: 1px solid rgba(198, 161, 87, .26);
  border-radius: var(--radius-control);
  background: linear-gradient(145deg, rgba(30, 42, 32, .82), rgba(10, 17, 13, .9));
  box-shadow: inset 3px 0 rgba(105, 139, 111, .42);
}
.defection-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.defection-heading strong { color: #dfca91; font: 700 11px var(--font-display); }
.defection-heading small { color: var(--muted); font: 8px/1.45 var(--font-data); text-align: right; }
.defection-controls { grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.35fr) auto auto; }
.defection-controls button { min-width: 106px; white-space: nowrap; }
.defection-forecast {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid rgba(107, 151, 119, .42);
  border-radius: var(--radius-control);
  background: rgba(7, 13, 9, .66);
}
.defection-forecast.unavailable {
  border-color: rgba(164, 139, 91, .28);
  filter: saturate(.72);
}
.defection-portrait {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-size: 200% 200%;
  box-shadow: 0 0 0 1px rgba(206, 178, 104, .55), 0 3px 9px #000;
}
.defection-copy { min-width: 0; }
.defection-empty { grid-column: 1 / -1; min-width: 0; padding: 2px; }
.defection-empty strong, .defection-empty small { display: block; }
.defection-empty strong { color: #d5c092; font: 700 10px var(--font-display); }
.defection-empty small { margin-top: 3px; color: var(--muted); font: 8px/1.45 var(--font-data); }
.defection-copy strong,
.defection-copy small { display: block; }
.defection-copy strong { overflow: hidden; color: #ead7aa; font: 700 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.defection-copy small { margin-top: 2px; color: #a8a08f; font: 8px/1.4 var(--font-data); }
.defection-copy .defection-state { color: #83b693; }
.defection-forecast.unavailable .defection-state { color: #c2a46b; }
.defection-chance {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(213, 179, 95, .56);
  border-radius: 50%;
  color: #eed693;
  background: radial-gradient(circle, rgba(61, 94, 68, .92), rgba(18, 28, 21, .96) 70%);
  font: 700 12px var(--font-data);
}
.defection-factors {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.defection-factors span {
  padding: 3px 5px;
  border: 1px solid rgba(194, 165, 100, .18);
  border-radius: 3px;
  color: #b8ae96;
  background: rgba(18, 26, 20, .75);
  font: 7px var(--font-data);
}
.defection-factors .positive { color: #86bd96; }
.defection-factors .negative { color: #d08a74; }

@media (orientation: portrait), (max-width: 680px) {
  .defection-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .defection-heading small { text-align: left; }
  .defection-controls { grid-template-columns: 1fr 1fr; }
  .defection-controls button { min-width: 0; }
  .defection-forecast { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .defection-portrait { width: 38px; height: 38px; }
  .defection-chance { width: 40px; height: 40px; }
}
@media (orientation: portrait) and (max-width: 390px) {
  .defection-controls { grid-template-columns: 1fr; }
  .defection-controls > * { grid-column: 1; width: 100%; }
  .defection-factors { grid-column: 1 / -1; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .defection-panel { margin-top: 6px; padding: 6px 8px; }
  .defection-heading { margin-bottom: 5px; }
  .defection-controls select,
  .defection-controls button { min-height: 34px; }
  .defection-forecast { margin-top: 5px; padding: 5px 7px; }
  .defection-portrait { width: 34px; height: 34px; }
  .defection-chance { width: 36px; height: 36px; font-size: 10px; }
  .defection-factors span:nth-child(n+5) { display: none; }
}

/* Sovereignty, prisoners, strategic sites and career UI v29 */
.map-site.controlled i {
  border-color: var(--site-owner, #9d8656);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-owner, #9d8656) 22%, transparent), 0 2px 5px #050605;
}
.map-site.player-controlled i { color: #f0d889; }
.army-marker.status-engaging {
  border-color: #d47754;
  box-shadow: 0 0 0 2px rgba(212, 119, 84, .2), 0 0 14px rgba(212, 119, 84, .38);
  animation: none;
}

.prisoner-card,
.strategic-site-card,
.petition-card,
.career-progression,
.rebellion-controls {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(198, 161, 87, .25);
  border-radius: var(--radius-control);
  background: linear-gradient(145deg, rgba(27, 39, 30, .86), rgba(9, 15, 11, .92));
  box-shadow: inset 3px 0 rgba(116, 151, 116, .32);
}
.prisoner-card > strong,
.strategic-site-card > strong,
.petition-card > strong,
.career-progression > strong { display: block; color: #e8d09a; font: 700 11px var(--font-display); }
.prisoner-card > p,
.prisoner-card > small,
.strategic-site-card > small,
.petition-card > small,
.career-progression > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font: 9px/1.5 var(--font-data);
}
.prisoner-management {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 1fr) auto minmax(130px, 1fr) auto;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.prisoner-management > *,
.strategic-site-card .inline-actions > *,
.rebellion-controls > * { min-width: 0; }
.strategic-site-grid,
.petition-list,
.battle-capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.strategic-site-card.contested { border-left: 3px solid #b9674c; }
.strategic-site-card .inline-actions { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto; gap: 5px; margin-top: 7px; }
.petition-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.petition-card > small { grid-column: 1; }
.petition-card > .inline-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 0 8px; }
.career-progression { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: 8px; }
.career-progression > small { grid-column: 1; }
.career-progression > button { grid-column: 2; grid-row: 1 / span 2; margin-left: 8px; }
.rebellion-warning {
  margin: 8px 0 5px;
  padding-left: 8px;
  border-left: 2px solid #ad694e;
  color: #c5aa83;
  font: 9px/1.5 var(--font-data);
}
.rebellion-controls { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: center; }
.rebellion-forecast { color: #cbb98f; font: 9px/1.45 var(--font-data); }
.battle-capture-card { padding: 8px; border: 1px solid rgba(198, 161, 87, .25); background: rgba(10, 16, 12, .78); text-align: left; }
.battle-capture-card > strong,
.battle-capture-card > small { display: block; }
.battle-capture-card > strong { color: #e6ce94; font: 700 11px var(--font-display); }
.battle-capture-card > small { margin-top: 3px; color: var(--muted); font: 8px/1.4 var(--font-data); }

@media (orientation: portrait), (max-width: 680px) {
  .prisoner-management,
  .strategic-site-card .inline-actions,
  .rebellion-controls { grid-template-columns: 1fr; }
  .prisoner-management button,
  .strategic-site-card .inline-actions button,
  .rebellion-controls button { width: 100%; }
  .strategic-site-grid,
  .petition-list,
  .battle-capture-grid { grid-template-columns: 1fr; }
  .petition-card,
  .career-progression { grid-template-columns: 1fr; }
  .petition-card > .inline-actions,
  .career-progression > button { grid-column: 1; grid-row: auto; margin: 7px 0 0; }
  .petition-card > .inline-actions button,
  .career-progression > button { width: 100%; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .prisoner-card,
  .strategic-site-card,
  .petition-card,
  .career-progression,
  .rebellion-controls { padding: 6px 8px; }
  .prisoner-management { grid-template-columns: minmax(120px, 1.1fr) minmax(105px, 1fr) auto minmax(105px, 1fr) auto; }
  .prisoner-management select,
  .prisoner-management button,
  .strategic-site-card select,
  .strategic-site-card button,
  .rebellion-controls select,
  .rebellion-controls button { min-height: 32px; }
  .battle-result-card { padding-block: 12px; }
  .battle-capture-grid { max-height: 116px; overflow-y: auto; }
}

/* First-launch cinematic prologue v30 */
body.in-prologue {
  overflow: hidden;
  background: #050806;
}
body.in-prologue .app-shell {
  width: 100%;
  max-width: 1440px;
  height: 100svh;
  min-height: 0;
  border-inline: 0;
}
.prologue-screen {
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  background: #080d0a;
  transition: opacity .42s ease, transform .42s ease;
}
.prologue-screen.is-leaving {
  opacity: 0;
  transform: scale(1.018);
}
.prologue-backdrop {
  position: absolute;
  z-index: -3;
  inset: -2%;
  background-position: center;
  background-size: cover;
  filter: saturate(.76) contrast(1.08) brightness(.76) sepia(.08);
  transition: background-image .45s ease;
  will-change: transform;
}
.prologue-screen[data-scene="0"] .prologue-backdrop {
  background-image: url("./assets/art/prologue-realm-v1.webp");
  animation: prologue-drift-one 15s ease-out both;
}
.prologue-screen[data-scene="1"] .prologue-backdrop {
  background-image: url("./assets/art/commanders-atlas-v1.webp");
  background-position: center 42%;
  animation: prologue-drift-two 15s ease-out both;
}
.prologue-screen[data-scene="2"] .prologue-backdrop {
  background-image: url("./assets/art/battle-intro-v1.webp");
  background-position: center 46%;
  animation: prologue-drift-three 15s ease-out both;
}
.prologue-ink {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 8, 6, .82), transparent 26%, rgba(4, 7, 5, .18) 50%, rgba(4, 7, 5, .94) 91%),
    linear-gradient(90deg, rgba(5, 8, 6, .64), transparent 54%),
    radial-gradient(circle at 50% 42%, transparent 12%, rgba(3, 6, 4, .44) 100%);
}
.prologue-ink::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .34;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(231, 207, 150, .018) 4px),
    linear-gradient(90deg, rgba(198, 161, 87, .08) 1px, transparent 1px) 0 0 / 44px 100%;
  mix-blend-mode: screen;
}
.prologue-toolbar {
  position: absolute;
  z-index: 2;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  left: max(16px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prologue-mark,
.prologue-tools {
  display: flex;
  align-items: center;
}
.prologue-mark { gap: 9px; }
.prologue-mark i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(209, 115, 72, .82);
  color: #e3a274;
  background: rgba(39, 15, 12, .68);
  box-shadow: inset 0 0 0 3px rgba(7, 11, 8, .72);
  font: normal 19px/1 var(--font-display);
  transform: rotate(-3deg);
}
.prologue-mark span {
  color: #dfc994;
  font: 10px var(--font-data);
  letter-spacing: .24em;
  text-shadow: 0 2px 8px #000;
}
.prologue-tools { gap: 8px; }
.prologue-icon-button {
  position: relative;
  color: rgba(220, 189, 119, .78);
}
.prologue-tools .sound-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 7px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.prologue-skip-button {
  min-height: 36px;
  padding: 0 4px 0 12px;
  border: 0;
  border-left: 1px solid rgba(198, 161, 87, .28);
  border-radius: 0;
  color: rgba(229, 215, 184, .76);
  background: transparent;
  font: 10px var(--font-data);
  letter-spacing: .12em;
}
.prologue-skip-button:hover,
.prologue-skip-button:active { color: #f0d486; }
.prologue-narrative {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: calc(116px + env(safe-area-inset-bottom));
  left: 20px;
  min-height: 150px;
  padding: 17px 18px 17px 20px;
  border-left: 3px solid #cfa75a;
  background: linear-gradient(90deg, rgba(7, 12, 9, .92), rgba(7, 12, 9, .48) 72%, transparent);
  box-shadow: -12px 0 28px rgba(0, 0, 0, .24);
  text-shadow: 0 2px 9px #000;
  animation: prologue-copy-rise .5s ease both;
}
.prologue-kicker {
  display: block;
  min-height: 16px;
  color: #d6b064;
  font: 9px var(--font-data);
  letter-spacing: .22em;
}
.prologue-narrative h1 {
  min-height: 39px;
  margin: 5px 0 8px;
  color: #f2dfb6;
  font: 700 clamp(25px, 7vw, 38px)/1.12 var(--font-display);
  letter-spacing: .08em;
}
.prologue-narrative p {
  min-height: 48px;
  max-width: 680px;
  margin: 0;
  color: #c7bda5;
  font: 12px/1.9 var(--font-body);
  letter-spacing: .04em;
}
.prologue-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  margin-top: 3px;
  background: #e1be6f;
  box-shadow: 0 0 8px rgba(225, 190, 111, .62);
  animation: prologue-cursor-blink .8s steps(1, end) infinite;
}
.prologue-footer {
  position: absolute;
  z-index: 2;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  left: max(20px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(126px, 190px);
  align-items: end;
  gap: 20px;
}
.prologue-footer > div { min-width: 0; }
.prologue-footer small {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: rgba(204, 192, 166, .62);
  font: 9px var(--font-data);
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prologue-progress {
  display: grid;
  width: min(190px, 58vw);
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.prologue-progress i {
  height: 2px;
  overflow: hidden;
  background: rgba(219, 199, 153, .22);
}
.prologue-progress i::after {
  display: block;
  width: 0;
  height: 100%;
  content: "";
  background: #d7b264;
  transition: width .32s ease;
}
.prologue-progress i.is-complete::after,
.prologue-progress i.is-current::after { width: 100%; }
.prologue-progress i.is-current::after {
  box-shadow: 0 0 9px rgba(215, 178, 100, .7);
  animation: prologue-progress-pulse 1.8s ease-in-out infinite;
}
.prologue-footer .primary-button {
  width: 100%;
  min-height: 44px;
}
.asset-degraded .prologue-backdrop {
  background-image:
    radial-gradient(circle at 65% 24%, rgba(196, 133, 62, .35), transparent 22%),
    linear-gradient(145deg, #27362d, #0a100c 72%) !important;
}

@media (orientation: portrait), (max-width: 560px) {
  .prologue-screen { min-height: 560px; }
  .prologue-backdrop { inset: 0; }
  .prologue-screen[data-scene="0"] .prologue-backdrop { background-position: 53% center; }
  .prologue-screen[data-scene="1"] .prologue-backdrop { background-position: center 28%; }
  .prologue-screen[data-scene="2"] .prologue-backdrop { background-position: 54% center; }
  .prologue-ink {
    background:
      linear-gradient(180deg, rgba(5, 8, 6, .76), transparent 24%, rgba(4, 7, 5, .28) 48%, rgba(4, 7, 5, .98) 88%),
      radial-gradient(circle at 50% 38%, transparent 8%, rgba(3, 6, 4, .5) 100%);
  }
  .prologue-toolbar {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
  }
  .prologue-mark span { font-size: 9px; letter-spacing: .16em; }
  .prologue-tools { gap: 3px; }
  .prologue-skip-button { padding-left: 8px; font-size: 9px; }
  .prologue-narrative {
    right: 14px;
    bottom: calc(116px + env(safe-area-inset-bottom));
    left: 14px;
    min-height: 168px;
    padding: 15px 14px 14px 16px;
  }
  .prologue-narrative h1 {
    min-height: 34px;
    font-size: clamp(24px, 8.4vw, 34px);
  }
  .prologue-narrative p {
    min-height: 68px;
    font-size: 11px;
    line-height: 1.78;
  }
  .prologue-footer {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 12px;
  }
  .prologue-footer small { max-width: 190px; font-size: 8px; }
}

@media (orientation: landscape) and (min-width: 650px) {
  .prologue-narrative {
    right: auto;
    bottom: calc(104px + env(safe-area-inset-bottom));
    left: max(5%, env(safe-area-inset-left));
    width: min(58%, 720px);
    min-height: 142px;
  }
  .prologue-narrative h1 {
    min-height: 42px;
    font-size: clamp(30px, 4vw, 48px);
  }
  .prologue-footer {
    right: max(5%, env(safe-area-inset-right));
    left: max(5%, env(safe-area-inset-left));
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .prologue-screen { min-height: 320px; }
  .prologue-toolbar { top: max(8px, env(safe-area-inset-top)); }
  .prologue-mark i { width: 29px; height: 29px; font-size: 16px; }
  .prologue-tools .sound-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
  .prologue-narrative {
    bottom: calc(67px + env(safe-area-inset-bottom));
    min-height: 112px;
    padding-block: 11px;
  }
  .prologue-kicker { min-height: 13px; font-size: 8px; }
  .prologue-narrative h1 { min-height: 29px; margin: 2px 0 4px; font-size: clamp(24px, 4vw, 34px); }
  .prologue-narrative p { min-height: 32px; font-size: 10px; line-height: 1.55; }
  .prologue-footer { bottom: max(8px, env(safe-area-inset-bottom)); }
  .prologue-footer .primary-button { min-height: 38px; }
  .prologue-footer small { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .prologue-backdrop,
  .prologue-narrative,
  .prologue-progress i::after,
  .prologue-cursor { animation: none !important; }
}

@keyframes prologue-drift-one {
  from { transform: scale(1.055) translate3d(-.6%, 0, 0); }
  to { transform: scale(1.01) translate3d(0, 0, 0); }
}
@keyframes prologue-drift-two {
  from { transform: scale(1.02) translate3d(0, .5%, 0); }
  to { transform: scale(1.07) translate3d(0, -1%, 0); }
}
@keyframes prologue-drift-three {
  from { transform: scale(1.075) translate3d(.7%, 0, 0); }
  to { transform: scale(1.02) translate3d(0, 0, 0); }
}
@keyframes prologue-copy-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes prologue-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .16; }
}
@keyframes prologue-progress-pulse {
  50% { opacity: .55; }
}

/* Era-spanning officer roster v31 + discoverable officer pool v37 */
.officer-roster-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr);
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(212, 177, 105, .3);
  border-left: 3px solid #a77b3d;
  border-radius: var(--radius-control);
  background: linear-gradient(100deg, rgba(40, 45, 35, .96), rgba(13, 21, 16, .92));
  box-shadow: inset 0 1px rgba(255, 243, 210, .04);
}
.officer-roster-headline { min-width: 0; }
.officer-roster-headline strong,
.officer-roster-headline small { display: block; }
.officer-roster-headline strong { color: var(--gold-bright); font: 700 12px var(--font-display); letter-spacing: .06em; }
.officer-roster-headline small { margin-top: 3px; color: #aaa08a; font: 8px/1.45 var(--font-data); }
.officer-roster-filters { display: grid; grid-template-columns: minmax(124px, .7fr) minmax(150px, 1fr); gap: 7px; }
.officer-roster-filters input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(218, 187, 122, .4);
  border-radius: var(--radius-control);
  color: var(--paper);
  background: linear-gradient(180deg, rgba(41, 49, 39, .98), rgba(19, 26, 21, .98));
  box-shadow: var(--shadow-control);
  font: 10px var(--font-data);
}
.officer-roster-filters input::placeholder { color: #817968; }
.officer-roster-filters input:hover { border-color: var(--stroke-strong); }
.officer-roster-filters input:focus-visible { border-color: var(--gold-bright); }
.officer-debut-hint,
.officer-roster-empty,
.officer-pool-hint { grid-column: 1 / -1; color: #978d78; font: 8px/1.45 var(--font-data); }
.officer-roster-empty { color: #d0a267; }
.officer-pool-hint {
  padding-top: 6px;
  border-top: 1px solid rgba(212, 177, 105, .16);
  color: #b9ab8c;
}

.officer-recruitment-panel {
  display: grid;
  grid-template-columns: minmax(168px, .72fr) minmax(220px, 1.3fr) auto;
  gap: 8px;
  align-items: stretch;
  margin: 0 10px 12px;
  padding: 10px;
  border: 1px solid rgba(202, 159, 82, .34);
  border-radius: var(--radius-control);
  background:
    radial-gradient(circle at 8% 20%, rgba(173, 127, 59, .13), transparent 34%),
    linear-gradient(110deg, rgba(36, 43, 34, .96), rgba(13, 19, 15, .96));
  box-shadow: inset 0 1px rgba(255, 244, 214, .05);
}

.officer-recruitment-heading {
  grid-column: 1 / -1;
}

.officer-recruitment-heading strong,
.officer-recruitment-heading small {
  display: block;
}

.officer-recruitment-heading strong {
  color: var(--gold-bright);
  font: 700 12px var(--font-display);
  letter-spacing: .08em;
}

.officer-recruitment-heading small {
  margin-top: 3px;
  color: #a99d84;
  font: 8px/1.45 var(--font-data);
}

.officer-recruitment-panel > .game-select-shell {
  width: 100%;
  min-width: 0;
}

.officer-recruitment-panel > button {
  min-width: 150px;
  min-height: 42px;
}

.officer-recruitment-forecast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-content: center;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(205, 174, 111, .25);
  border-radius: var(--radius-control);
  background: rgba(7, 12, 9, .48);
}

.officer-recruitment-forecast.unavailable {
  opacity: .72;
}

.officer-recruitment-forecast > small {
  align-self: center;
  color: #c7b998;
  font: 8px/1.35 var(--font-data);
}

.officer-recruitment-chance {
  grid-row: 1 / span 2;
  align-self: center;
  color: #efd18a;
  font: 800 22px var(--font-data);
}

.officer-recruitment-factors {
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  gap: 3px;
}

.officer-recruitment-factors span {
  padding: 2px 5px;
  border: 1px solid rgba(205, 174, 111, .18);
  color: #b8ae97;
  font: 7px var(--font-data);
}

.officer-recruitment-factors .positive { color: #9ecf9d; }
.officer-recruitment-factors .negative { color: #d9a08b; }

@media (orientation: portrait), (max-width: 560px) {
  .officer-roster-overview { grid-template-columns: 1fr; padding: 8px; }
  .officer-roster-filters { grid-template-columns: 1fr; }
  .officer-roster-filters input { min-height: 44px; }
  .general-roster-strip { scroll-snap-type: x proximity; }
  .general-thumb { scroll-snap-align: start; }
  .officer-recruitment-panel { grid-template-columns: 1fr; }
  .officer-recruitment-forecast { min-height: 48px; }
  .officer-recruitment-panel > button { width: 100%; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .officer-roster-overview { grid-template-columns: minmax(0, 1fr) minmax(310px, .8fr); margin-bottom: 7px; padding: 6px 8px; }
  .officer-roster-filters input,
  .officer-roster-filters select { min-height: 36px; }
  .officer-debut-hint { display: none; }
  .general-roster-strip { margin-bottom: 7px; padding-bottom: 4px; }
  .officer-recruitment-panel { grid-template-columns: minmax(150px, .65fr) minmax(210px, 1.25fr) auto; padding: 7px; }
  .officer-recruitment-heading small { display: none; }
}

/* Game-native dropdowns and motion system v32 */
select.game-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.game-select-shell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

.inline-actions > .game-select-shell { flex: 1 1 0; }

button.game-select-trigger {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 0 0 0 11px;
  overflow: hidden;
  border: 1px solid rgba(198, 161, 87, .55);
  border-radius: var(--radius-control);
  color: var(--paper);
  background:
    linear-gradient(90deg, transparent calc(100% - 34px), rgba(198, 161, 87, .25) calc(100% - 34px) calc(100% - 33px), rgba(83, 57, 29, .38) calc(100% - 33px)),
    linear-gradient(180deg, rgba(30, 44, 34, .98), rgba(12, 20, 15, .98));
  box-shadow: inset 0 1px rgba(244, 220, 164, .07), 0 2px 7px rgba(0, 0, 0, .22);
  font: 600 10px/1.25 var(--font-data);
  letter-spacing: .035em;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease;
}

button.game-select-trigger:hover:not(:disabled) {
  border-color: rgba(226, 190, 111, .9);
  box-shadow: inset 0 1px rgba(255, 232, 177, .1), 0 0 0 1px rgba(198, 161, 87, .1), 0 4px 12px rgba(0, 0, 0, .3);
  filter: brightness(1.08);
}

button.game-select-trigger:focus-visible,
button.game-select-trigger.is-open {
  border-color: var(--gold-bright);
  outline: 2px solid rgba(221, 184, 104, .42);
  outline-offset: 2px;
  box-shadow: inset 0 1px rgba(255, 236, 190, .12), 0 0 0 3px rgba(111, 144, 103, .18);
}

button.game-select-trigger:disabled {
  border-color: rgba(132, 122, 96, .38);
  color: rgba(201, 193, 172, .55);
  cursor: not-allowed;
  filter: grayscale(.42);
  opacity: .62;
}

.game-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-select-arrow {
  position: relative;
  width: 100%;
  height: 100%;
}

.game-select-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #d9b96f;
  border-bottom: 2px solid #d9b96f;
  transform: translate(-50%, -66%) rotate(45deg);
  transition: transform .2s cubic-bezier(.2, .82, .25, 1);
}

.game-select-trigger.is-open .game-select-arrow::before {
  transform: translate(-50%, -28%) rotate(225deg);
}

.game-select-menu {
  position: fixed;
  z-index: 6200;
  display: grid;
  gap: 3px;
  box-sizing: border-box;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(218, 184, 111, .72);
  border-radius: calc(var(--radius-control) + 2px);
  color: var(--paper);
  background:
    linear-gradient(135deg, rgba(115, 82, 39, .18), transparent 38%),
    linear-gradient(180deg, rgba(27, 39, 30, .995), rgba(9, 16, 12, .995));
  box-shadow: inset 0 1px rgba(255, 238, 190, .1), 0 15px 36px rgba(0, 0, 0, .58), 0 0 0 1px rgba(10, 14, 11, .8);
  opacity: 0;
  transform: translateY(-7px) scale(.975);
  transform-origin: 50% 0;
  scrollbar-color: rgba(218, 187, 122, .5) rgba(7, 11, 8, .5);
  scrollbar-width: thin;
}

.game-select-menu[hidden] { display: none !important; }

.game-select-menu.placement-top {
  transform: translateY(7px) scale(.975);
  transform-origin: 50% 100%;
}

.game-select-menu.is-open {
  animation: game-select-menu-in .2s cubic-bezier(.2, .82, .25, 1) both;
}

.game-select-menu.placement-top.is-open {
  animation-name: game-select-menu-top-in;
}

.game-select-menu::-webkit-scrollbar { width: 6px; }
.game-select-menu::-webkit-scrollbar-track { background: rgba(7, 11, 8, .5); }
.game-select-menu::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(218, 187, 122, .48); }

button.game-select-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: max(3px, calc(var(--radius-control) - 2px));
  color: #d8ceb5;
  background: transparent;
  box-shadow: none;
  font: 600 10px/1.35 var(--font-data);
  letter-spacing: .03em;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease, transform .14s ease;
}

button.game-select-option:hover:not(:disabled),
button.game-select-option:focus-visible {
  border-color: rgba(198, 161, 87, .4);
  color: #fff0c8;
  outline: none;
  background: linear-gradient(90deg, rgba(111, 80, 38, .64), rgba(45, 61, 45, .54));
  transform: translateX(2px);
}

button.game-select-option[aria-selected="true"] {
  border-color: rgba(117, 163, 121, .45);
  color: #f7e2aa;
  background: linear-gradient(90deg, rgba(86, 113, 76, .66), rgba(73, 48, 25, .58));
}

button.game-select-option:disabled {
  color: rgba(197, 188, 163, .38);
  cursor: not-allowed;
}

.game-select-option i {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(198, 161, 87, .45);
  border-radius: 50%;
  background: rgba(4, 9, 6, .55);
}

.game-select-option[aria-selected="true"] i {
  border-color: #8bbb8c;
  background: #55795d;
  box-shadow: 0 0 8px rgba(105, 170, 119, .38);
}

.game-select-option[aria-selected="true"] i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border-right: 1.5px solid #fff2c9;
  border-bottom: 1.5px solid #fff2c9;
  transform: rotate(45deg);
}

.game-select-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.game-select-group {
  padding: 6px 8px 3px;
  color: #9f8a5d;
  font: 700 8px var(--font-display);
  letter-spacing: .14em;
}

.army-controls > .game-select-shell,
.general-admin-panel > .game-select-shell,
.appointment-controls > .game-select-shell,
.operation-controls > .game-select-shell,
.army-organization > .game-select-shell,
.department-controls > .game-select-shell,
.defection-controls > .game-select-shell,
.prisoner-management > .game-select-shell,
.rebellion-controls > .game-select-shell {
  min-width: 0;
  width: 100%;
}

.screen.is-screen-entering {
  animation: game-screen-in .48s cubic-bezier(.2, .82, .25, 1) both;
}

.screen.is-screen-entering :is(.top-hud, .resource-strip, .campaign-card, .campaign-setup, .select-section, .battle-briefing-card, .battle-result-card) {
  animation: game-screen-content-in .5s .06s cubic-bezier(.2, .82, .25, 1) both;
}

.sheet-content.is-content-entering > * {
  animation: game-sheet-section-in .3s cubic-bezier(.2, .82, .25, 1) both;
}

.sheet-content.is-content-entering > :nth-child(2) { animation-delay: .035s; }
.sheet-content.is-content-entering > :nth-child(3) { animation-delay: .07s; }
.sheet-content.is-content-entering > :nth-child(n+4) { animation-delay: .1s; }

.resource-strip strong.value-changed {
  animation: game-resource-change .4s cubic-bezier(.2, .82, .25, 1);
}

.city-node.selected {
  animation: game-city-focus .38s cubic-bezier(.2, .82, .25, 1);
}

:is(.command-button, .dock-button, .campaign-option, .strategy-tab, .battle-command, .primary-button, .secondary-button):not(:disabled) {
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease;
}

:is(.command-button, .dock-button, .campaign-option, .strategy-tab, .battle-command, .primary-button, .secondary-button):not(:disabled):active {
  transform: translateY(1px) scale(.975);
}

@keyframes game-select-menu-in {
  from { opacity: 0; transform: translateY(-7px) scale(.975); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes game-select-menu-top-in {
  from { opacity: 0; transform: translateY(7px) scale(.975); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes game-screen-in {
  from { opacity: 0; transform: scale(1.018); filter: saturate(.72) brightness(.82); }
  to { opacity: 1; transform: scale(1); filter: saturate(1) brightness(1); }
}

@keyframes game-screen-content-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes game-sheet-section-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes game-resource-change {
  0% { color: #fff1bd; transform: translateY(0) scale(1); text-shadow: 0 0 0 transparent; }
  38% { color: #f5ce72; transform: translateY(-2px) scale(1.12); text-shadow: 0 0 10px rgba(226, 178, 78, .48); }
  100% { transform: translateY(0) scale(1); text-shadow: 0 0 0 transparent; }
}

@keyframes game-city-focus {
  0% { filter: brightness(.88); transform: translate(-50%, -50%) scale(.92); }
  68% { filter: brightness(1.2); transform: translate(-50%, -50%) scale(1.045); }
  100% { filter: brightness(1); transform: translate(-50%, -50%) scale(1); }
}

@media (orientation: portrait), (max-width: 560px) {
  button.game-select-trigger { min-height: 44px; font-size: 11px; }
  button.game-select-option { min-height: 42px; font-size: 11px; }
  .game-select-menu { padding: 7px; }
  .army-controls > .game-select-shell { grid-column: 1 / -1; }
}

@media (orientation: landscape) and (max-height: 520px) {
  button.game-select-trigger { min-height: 36px; font-size: 10px; }
  button.game-select-option { min-height: 32px; padding-block: 4px; }
  .department-controls button.game-select-trigger,
  .defection-controls button.game-select-trigger,
  .prisoner-management button.game-select-trigger,
  .strategic-site-card button.game-select-trigger,
  .rebellion-controls button.game-select-trigger,
  .logistics-row .inline-actions button.game-select-trigger { min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-select-menu.is-open,
  .battle-diplomacy-panel,
  .war-conference-panel,
  .screen.is-screen-entering,
  .screen.is-screen-entering *,
  .sheet-content.is-content-entering > *,
  .resource-strip strong.value-changed,
  .city-node.selected {
    animation: none !important;
  }
  .game-select-arrow::before,
  button.game-select-trigger,
  button.game-select-option {
    transition: none !important;
  }
}

/* Multi-faction warfare, battlefield diplomacy and submission v34 */
.battle-diplomacy-panel {
  position: absolute;
  z-index: 9;
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(100% + 8px);
  width: min(430px, calc(100vw - 16px));
  max-height: min(34svh, 250px);
  padding: 9px;
  overflow: auto;
  border: 1px solid rgba(207, 166, 82, .56);
  border-radius: var(--radius-panel);
  color: var(--paper);
  background: linear-gradient(145deg, rgba(31, 43, 33, .97), rgba(18, 13, 10, .98));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .58), inset 0 0 24px rgba(202, 159, 74, .06);
  animation: sheetContentIn .22s ease both;
}
.battle-diplomacy-panel > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(207, 166, 82, .22);
}
.battle-diplomacy-panel h3,
.battle-diplomacy-panel p { margin: 0; }
.battle-diplomacy-panel h3 { color: var(--gold-bright); font: 700 12px var(--font-display); }
.battle-diplomacy-panel header small,
.battle-diplomacy-panel > small { color: var(--muted); font: 8px/1.45 var(--font-data); }
.battle-participant-ledger { display: flex; gap: 5px; margin: 7px 0; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.battle-participant-chip { flex: 0 0 auto; min-width: 98px; padding: 5px 7px; border: 1px solid rgba(104, 150, 119, .43); border-radius: var(--radius-control); background: rgba(8, 20, 13, .67); }
.battle-participant-chip.defender { border-color: rgba(164, 91, 62, .5); background: rgba(42, 17, 13, .6); }
.battle-participant-chip b,
.battle-participant-chip small { display: block; }
.battle-participant-chip b { color: #e5cf91; font: 700 9px var(--font-display); }
.battle-participant-chip small { margin-top: 2px; color: #aaa088; font: 7px var(--font-data); }
.battle-diplomacy-actions { display: grid; grid-template-columns: minmax(108px, .85fr) repeat(3, minmax(0, 1fr)); gap: 5px; }
.battle-diplomacy-actions select,
.battle-diplomacy-actions button { min-height: 34px; padding-block: 5px; font-size: 8px; }
.battle-collusion-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 6px; }
.battle-collusion-line button { min-width: 92px; }
.war-conference-panel { margin: 12px 0; padding: 10px; border: 1px solid rgba(206, 165, 79, .5); border-radius: var(--radius-panel); background: linear-gradient(145deg, rgba(47, 31, 18, .72), rgba(11, 20, 14, .78)); text-align: left; animation: sheetContentIn .24s ease both; }
.war-conference-panel h3,
.war-conference-panel p { margin: 0 0 6px; }
.war-conference-panel h3 { color: var(--gold-bright); font: 700 13px var(--font-display); }
.war-conference-panel p { color: #baaf94; font: 8px/1.5 var(--font-data); }
.war-conference-claims { display: flex; gap: 5px; margin: 7px 0; overflow-x: auto; }
.war-conference-claims span { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(114, 151, 121, .4); color: #d6c28a; background: rgba(7, 17, 11, .62); font: 8px var(--font-data); }
.war-conference-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.war-conference-actions button { min-height: 42px; }
.submission-offer-section { margin-bottom: 10px; padding: 8px; border: 1px solid rgba(204, 160, 72, .5); background: linear-gradient(90deg, rgba(74, 45, 20, .56), rgba(15, 29, 20, .58)); }
.submission-offer-section > h3 { margin: 0 0 7px; color: var(--gold-bright); font: 700 13px var(--font-display); }
.submission-offer-card { border-color: rgba(213, 173, 83, .62); }
.submission-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(204, 164, 84, .2); }
.submission-tools select { min-height: 34px; }
.submission-tools button { min-height: 34px; padding-inline: 9px; font-size: 8px; }
.submission-tools .submission-forecast { grid-column: 1 / -1; margin: 0; padding: 5px 7px; border-left: 2px solid #9b7c43; background: rgba(11, 17, 13, .52); }
@media (orientation: portrait), (max-width: 560px) {
  .battle-diplomacy-panel { right: 8px; bottom: calc(100% + 5px); left: 8px; width: auto; max-height: min(25svh, 190px); }
  .battle-diplomacy-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-diplomacy-actions select { grid-column: 1 / -1; }
  .war-conference-actions,
  .submission-tools { grid-template-columns: 1fr; }
  .battle-result-card { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .battle-diplomacy-panel { width: min(390px, 54vw); max-height: 31svh; padding: 7px; }
  .battle-participant-ledger { margin-block: 5px; }
  .war-conference-panel { padding: 8px; }
  .war-conference-actions button { min-height: 34px; }
}

.battle-diplomacy-panel > header strong,
.war-conference-panel > header strong { display: block; color: var(--gold-bright); font: 700 12px var(--font-display); }
.war-conference-panel > header { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(207, 166, 82, .22); }
.war-conference-panel > header small { display: block; color: var(--muted); font: 8px/1.45 var(--font-data); }
/* Battlefield presentation and report alerts v35 */
.report-toast {
  position: fixed;
  z-index: 84;
  top: calc(70px + env(safe-area-inset-top));
  right: max(12px, calc((100vw - 1280px) / 2 + 12px));
  display: grid;
  width: min(430px, calc(100vw - 24px));
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(211, 174, 92, .66);
  border-left: 4px solid #a76e38;
  border-radius: var(--radius-panel);
  color: var(--paper);
  background: linear-gradient(135deg, rgba(38, 27, 18, .98), rgba(10, 18, 13, .98));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .65), inset 0 0 28px rgba(197, 145, 64, .06);
  backdrop-filter: blur(12px);
}
.report-toast.tone-bad { border-left-color: var(--bad); }
.report-toast.tone-mixed { border-left-color: #c67a3f; }
.report-toast.is-entering { animation: reportToastIn .3s cubic-bezier(.2, .82, .25, 1) both; }
.report-toast.is-closing { pointer-events: none; animation: reportToastOut .22s ease-in both; }
.report-toast.has-speaker { grid-template-columns: 62px minmax(0, 1fr) auto; }
.report-toast-speaker { min-height: 66px; }
.report-toast-speaker-face { inset: 0 7px 14px 0; }
.report-toast-seal {
  display: grid;
  width: 42px;
  height: 48px;
  place-items: center;
  border: 1px solid #b28c4e;
  color: #f0d68b;
  background: linear-gradient(#6e3324, #351b15);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  font: 800 21px var(--font-display);
}
.report-toast-copy { min-width: 0; }
.report-toast-copy > small,
.report-toast-copy > strong,
.report-toast-copy > p { display: block; margin: 0; }
.report-toast-copy > small { color: #b99a58; font: 8px var(--font-data); letter-spacing: .08em; }
.report-toast-copy > strong { margin-top: 2px; color: #ead39a; font: 700 14px var(--font-display); }
.report-toast-copy > p { display: -webkit-box; margin-top: 3px; overflow: hidden; color: #bdb39d; font: 9px/1.45 var(--font-ui); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.report-toast-timer { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 6px; align-items: center; margin-top: 7px; }
.report-toast-timer > i { height: 3px; overflow: hidden; background: rgba(3, 6, 4, .8); }
.report-toast-timer > i > b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #8e4a31, #d2b05f); transition: width .2s linear; }
.report-toast-timer > span { color: #d5bd7d; font: 8px var(--font-data); text-align: right; }
.report-toast-actions { display: grid; gap: 5px; }
.report-toast-actions button {
  min-width: 42px;
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid rgba(184, 145, 75, .55);
  border-radius: var(--radius-control);
  color: #dac797;
  background: rgba(29, 37, 29, .9);
  font: 9px var(--font-ui);
}
.report-toast-actions button:last-child { min-height: 28px; color: #a89d85; font-size: 16px; }

.battle-field-art {
  background-image: url('./assets/art/battle-scenes-atlas-v1.webp');
  background-size: 200% 200%;
  transition: background-position .45s ease, filter .45s ease;
}
.battle-field-art[data-scene='plain'] { background-position: 0 0; }
.battle-field-art[data-scene='pass'] { background-position: 100% 0; }
.battle-field-art[data-scene='river'] { background-position: 0 100%; }
.battle-field-art[data-scene='siege'] { background-position: 100% 100%; }

.battle-formation-layer,
.battle-projectile-layer,
.battle-fire-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.battle-formation-layer { z-index: 1; overflow: hidden; }
.battle-formation {
  position: absolute;
  bottom: 2%;
  width: clamp(104px, 18vw, 190px);
  height: min(76%, 180px);
  background-image: url('./assets/art/battle-units-atlas-v1.webp');
  background-repeat: no-repeat;
  background-size: 500% 100%;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .75));
  opacity: .55;
  transition: left .45s ease, right .45s ease, transform .45s ease, opacity .3s ease;
}
.battle-formation.attacker { left: 7%; transform-origin: left bottom; }
.battle-formation.defender { right: 7%; transform: scaleX(-1); transform-origin: right bottom; }
.battle-formation.type-infantry,
.tactical-unit-art.type-infantry { background-position: 0 50%; }
.battle-formation.type-cavalry,
.tactical-unit-art.type-cavalry { background-position: 25% 50%; }
.battle-formation.type-archer,
.tactical-unit-art.type-archer { background-position: 50% 50%; }
.battle-formation.type-siege,
.tactical-unit-art.type-siege { background-position: 75% 50%; }
.battle-formation.type-navy,
.tactical-unit-art.type-navy {
  background-image: url('./assets/art/battle-navy-v1.webp');
  background-position: center;
  background-size: contain;
}
.battle-formation.type-navy { width: clamp(150px, 25vw, 260px); }

.battle-frontline {
  --frontline: 50%;
  position: absolute;
  z-index: 2;
  top: 14%;
  bottom: 9%;
  left: var(--frontline);
  width: 1px;
  transition: left .5s cubic-bezier(.2, .75, .25, 1);
  pointer-events: none;
}
.battle-frontline > i { position: absolute; inset: 0; background: linear-gradient(transparent, rgba(228, 200, 126, .75) 20%, rgba(228, 200, 126, .75) 80%, transparent); box-shadow: 0 0 10px rgba(221, 178, 81, .42); }
.battle-frontline > span { position: absolute; top: 0; left: 50%; min-width: 66px; padding: 3px 6px; transform: translate(-50%, -100%); border: 1px solid rgba(204, 163, 79, .45); color: #e5cf91; background: rgba(7, 12, 9, .76); font: 7px var(--font-data); text-align: center; white-space: nowrap; }

.battle-projectile-layer { z-index: 6; overflow: hidden; }
.battle-projectile-layer.is-active { display: block; }
.battle-arrow {
  --arrow-index: 0;
  position: absolute;
  top: calc(12% + var(--arrow-index) * 4.7%);
  left: calc(10% + var(--arrow-index) * .8%);
  width: 34px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, #7f5b32, #e3d3a6 72%, transparent 73%);
  transform: rotate(12deg);
  filter: drop-shadow(0 1px 1px #000);
  animation: battleArrowFlight .82s calc(var(--arrow-index) * .025s) ease-in both;
}
.battle-arrow::after { position: absolute; right: -1px; top: -3px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #d7c89f; content: ''; }
.battle-ember {
  --ember-index: 0;
  position: absolute;
  left: calc(42% + var(--ember-index) * 5%);
  bottom: 16%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f6b14e;
  box-shadow: 0 0 8px #ef6a2b;
  animation: battleEmber 1s calc(var(--ember-index) * .04s) ease-out both;
}
.battle-engineer-response {
  position: absolute;
  bottom: 2%;
  left: 10%;
  width: clamp(90px, 15vw, 150px);
  height: min(72%, 160px);
  background: url('./assets/art/battle-units-atlas-v1.webp') 100% 50% / 500% 100% no-repeat;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .72));
  animation: battleEngineerIn 1.05s ease both;
}

.battle-fire-layer { z-index: 4; overflow: hidden; }
.battle-fire-layer[hidden] { display: none; }
.battle-flame {
  position: absolute;
  width: 18px;
  height: 24px;
  transform: translate(-50%, -65%);
  filter: drop-shadow(0 0 7px rgba(238, 95, 31, .75));
}
.battle-flame::before,
.battle-flame::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 13px;
  height: 22px;
  border-radius: 62% 38% 58% 42%;
  content: '';
  background: radial-gradient(circle at 50% 78%, #ffd36a 0 24%, #ec6a2d 26% 62%, rgba(124, 28, 17, .2) 66%);
  transform: translateX(-50%) rotate(5deg);
  transform-origin: center bottom;
  animation: battleFlame .56s ease-in-out infinite alternate;
}
.battle-flame::after { width: 9px; height: 16px; transform: translateX(-20%) rotate(-14deg); animation-delay: -.25s; }
.battle-fire-layer.flare .battle-flame { animation: battleFireImpact .72s ease both; }
.battle-field.weather-rain .battle-flame { opacity: .62; filter: drop-shadow(0 0 4px rgba(238, 95, 31, .48)); }

.battle-tactical-grid { background: rgba(7, 12, 9, .48); backdrop-filter: blur(1px); }
.tactical-unit {
  width: clamp(38px, 5.7vw, 52px);
  height: clamp(30px, 4.6vw, 42px);
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(24, 54, 34, .9), rgba(8, 18, 12, .94));
}
.side-defender .tactical-unit { background: linear-gradient(145deg, rgba(92, 41, 29, .92), rgba(35, 14, 12, .96)); }
.tactical-unit-art {
  position: absolute;
  inset: -14% -8% 5%;
  background-image: url('./assets/art/battle-units-atlas-v1.webp');
  background-repeat: no-repeat;
  background-size: 500% 100%;
  filter: drop-shadow(0 2px 2px #000);
}
.side-defender .tactical-unit-art { transform: scaleX(-1); }
.tactical-general-face {
  position: absolute;
  bottom: -4px;
  left: -5px;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border: 1px solid #c5a75f;
  border-radius: 50%;
  color: #f1dfaa;
  background-color: #26382c;
  background-repeat: no-repeat;
  font: 700 8px var(--font-display);
  line-height: 16px;
  text-align: center;
}
.side-defender .tactical-general-face { left: auto; right: -5px; border-color: #c07958; }
.tactical-unit .facing-mark { top: -5px; right: -5px; }
.tactical-unit em { z-index: 3; top: auto; bottom: -10px; padding: 1px 3px; border-radius: 4px; background: rgba(4, 7, 5, .78); }
.tactical-unit.is-burning { box-shadow: 0 0 0 1px #e36d36, 0 0 13px rgba(239, 83, 28, .78); }
.tactical-unit.is-fireproof { box-shadow: 0 0 0 1px #8ebfb3, 0 0 12px rgba(97, 169, 151, .6); }
.tactical-unit.is-fireproof::after { position: absolute; top: -7px; left: 50%; content: '湿'; color: #bce0d2; font: 7px var(--font-display); transform: translateX(-50%); }

.battle-command.firebreak { border-color: #587c70; background: linear-gradient(135deg, rgba(30, 68, 58, .94), rgba(14, 26, 22, .98)); }
.battle-command.firebreak i { border-color: #79a395; color: #c9e4d8; background: #18352e; }
.battle-field.cavalry-charge .battle-formation.attacker { animation: battleCavalryCharge .72s ease; }
.battle-field.siege-impact .battle-formation.attacker { animation: battleSiegePush .8s ease; }
.battle-field.volley-active .battle-formation.attacker { animation: battleVolleyRecoil .65s ease; }
.battle-field.firebreak-active .battle-formation.attacker { opacity: .25; }

@keyframes reportToastIn { from { opacity: 0; transform: translate3d(18px, -8px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes reportToastOut { to { opacity: 0; transform: translate3d(20px, -6px, 0) scale(.98); } }
@keyframes battleArrowFlight { 0% { opacity: 0; transform: translate3d(0, -26px, 0) rotate(13deg); } 16% { opacity: 1; } 100% { opacity: 0; transform: translate3d(67vw, 18vh, 0) rotate(13deg); } }
@keyframes battleEmber { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(12px, -88px, 0) scale(1.3); } }
@keyframes battleFlame { from { transform: translateX(-50%) rotate(-7deg) scaleY(.9); } to { transform: translateX(-50%) rotate(8deg) scaleY(1.1); } }
@keyframes battleFireImpact { 45% { transform: translate(-50%, -70%) scale(1.7); } }
@keyframes battleEngineerIn { 0% { opacity: 0; transform: translateX(-26px); } 28%, 82% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(18px); } }
@keyframes battleCavalryCharge { 48% { transform: translateX(34%) scale(1.08); opacity: .9; } }
@keyframes battleSiegePush { 55% { transform: translateX(21%) scale(1.04); } }
@keyframes battleVolleyRecoil { 36% { transform: translateX(-4%) rotate(-1deg); opacity: .8; } }

@media (orientation: portrait), (max-width: 560px) {
  .report-toast { top: calc(60px + env(safe-area-inset-top)); right: 8px; width: calc(100vw - 16px); grid-template-columns: 40px minmax(0, 1fr) auto; padding: 8px; }
  .report-toast.has-speaker { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .report-toast-seal { width: 36px; height: 42px; font-size: 18px; }
  .battle-formation { width: 92px; height: 116px; opacity: .38; }
  .battle-formation.type-navy { width: 132px; }
  .battle-frontline > span { display: none; }
  .tactical-unit { width: clamp(28px, 10vw, 42px); height: clamp(25px, 8.5vw, 36px); }
  .tactical-general-face { width: 15px; height: 15px; line-height: 13px; }
  .battle-command-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(48svh + env(safe-area-inset-bottom)); overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .report-toast { top: calc(52px + env(safe-area-inset-top)); width: min(390px, 52vw); padding: 7px; }
  .report-toast-copy > p { -webkit-line-clamp: 1; }
  .battle-formation { bottom: -8%; height: 132px; }
  .battle-frontline { top: 20%; bottom: 4%; }
  .tactical-unit { width: 40px; height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .report-toast.is-entering,
  .game-select-menu.is-open,
  .report-toast.is-closing,
  .speaker-gesture,
  .battle-arrow,
  .battle-ember,
  .battle-flame::before,
  .battle-flame::after,
  .battle-engineer-response,
  .battle-field.cavalry-charge .battle-formation.attacker,
  .battle-field.siege-impact .battle-formation.attacker,
  .battle-field.volley-active .battle-formation.attacker { animation: none !important; }
  .battle-frontline,
  .battle-formation { transition: none; }
}
/* Battle confrontation and cinematic results v36-r6 */
.battle-arena {
  --battle-deck-height: min(34svh, 220px);
  --frontline: 50%;
}
.battle-field {
  inset: calc(124px + env(safe-area-inset-top)) 0 calc(var(--battle-deck-height) + env(safe-area-inset-bottom));
  isolation: isolate;
  border-block: 1px solid rgba(219, 185, 105, .2);
  box-shadow: inset 0 18px 36px rgba(2, 5, 3, .3), inset 0 -20px 38px rgba(3, 5, 4, .48);
}
.battle-field::before,
.battle-field::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
}
.battle-field::before {
  background: linear-gradient(90deg, rgba(21, 66, 41, .23), transparent 42%, transparent 58%, rgba(103, 34, 25, .24)), linear-gradient(180deg, rgba(5, 8, 6, .18), transparent 30%, rgba(4, 6, 5, .46));
}
.battle-field::after {
  background: radial-gradient(ellipse at 50% 66%, rgba(218, 170, 81, .11), transparent 30%);
}
.battle-control-zones {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.battle-control-zones > i {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width .65s cubic-bezier(.2, .76, .2, 1), left .65s cubic-bezier(.2, .76, .2, 1);
}
.battle-control-zones .attacker-control {
  left: 0;
  width: var(--frontline);
  background: linear-gradient(90deg, rgba(20, 85, 49, .2), rgba(34, 104, 60, .06));
}
.battle-control-zones .defender-control {
  left: var(--frontline);
  width: calc(100% - var(--frontline));
  background: linear-gradient(90deg, rgba(120, 42, 29, .06), rgba(111, 32, 25, .22));
}
.battle-front-overview {
  position: absolute;
  z-index: 11;
  top: 7px;
  left: 50%;
  display: grid;
  width: min(94%, 920px);
  grid-template-columns: minmax(112px, .72fr) minmax(180px, 1.7fr) minmax(112px, .72fr);
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}
.front-camp {
  min-width: 0;
  padding: 5px 9px;
  border-left: 3px solid #6d9a71;
  color: #ded1ae;
  background: linear-gradient(90deg, rgba(7, 22, 13, .9), rgba(8, 14, 10, .54));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .32);
}
.front-camp.defender {
  border-right: 3px solid #a1533d;
  border-left: 0;
  background: linear-gradient(-90deg, rgba(50, 17, 13, .9), rgba(18, 11, 9, .54));
  text-align: right;
}
.front-camp b,
.front-camp span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.front-camp b { color: #ead9ad; font: 700 10px var(--font-display); }
.front-camp span { margin-top: 2px; color: #aaa086; font: 7px var(--font-data); }
.battle-front-track {
  position: relative;
  height: 32px;
}
.battle-front-track > i {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  height: 7px;
  border: 1px solid rgba(223, 194, 122, .52);
  background: linear-gradient(90deg, #315f42 0 var(--frontline), #743526 var(--frontline) 100%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .65), 0 2px 10px rgba(0, 0, 0, .4);
}
.battle-front-track > b {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--frontline);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #d4b363;
  color: #f3df9c;
  background: linear-gradient(145deg, #7b3b25, #25160f);
  box-shadow: 0 0 0 3px rgba(6, 9, 7, .7), 0 0 14px rgba(218, 162, 61, .36);
  font: 800 12px var(--font-display);
  transition: left .65s cubic-bezier(.2, .76, .2, 1);
}
.battle-front-track > b::first-letter { transform: rotate(-45deg); }
.battle-front-track > span {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  color: #e4cf92;
  font: 8px var(--font-data);
  text-align: center;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}
.battle-frontline {
  z-index: 6;
  top: 48px;
  bottom: 2%;
  left: var(--frontline);
  width: 2px;
  opacity: .78;
}
.battle-frontline > i {
  background: linear-gradient(transparent, rgba(238, 211, 139, .88) 18%, rgba(238, 211, 139, .48) 78%, transparent);
  box-shadow: 0 0 18px rgba(221, 178, 81, .5);
}
.battle-formation-layer {
  z-index: 5;
  overflow: hidden;
  --frontline: 50%;
}
.battle-formation {
  position: absolute;
  bottom: 1%;
  width: min(31%, 310px);
  height: min(63%, 220px);
  opacity: .82;
  background: none !important;
  filter: none;
  transition: left .65s cubic-bezier(.2, .76, .2, 1), right .65s cubic-bezier(.2, .76, .2, 1), opacity .35s ease, transform .45s ease;
}
.battle-formation.attacker {
  left: clamp(1%, calc(var(--frontline) - 31%), 66%);
  transform: none;
  transform-origin: left bottom;
}
.battle-formation.defender {
  right: clamp(1%, calc(69% - var(--frontline)), 66%);
  transform: none;
  transform-origin: right bottom;
}
.battle-squad {
  position: absolute;
  bottom: 0;
  display: block;
  width: 52%;
  height: 88%;
  background-image: url('./assets/art/battle-units-atlas-v1.webp');
  background-repeat: no-repeat;
  background-size: 500% 100%;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .72));
}
.battle-formation .squad-rear { left: 0; bottom: 4%; opacity: .48; transform: scale(.76); transform-origin: left bottom; }
.battle-formation .squad-main { left: 22%; opacity: .78; transform: scale(.92); transform-origin: center bottom; }
.battle-formation .squad-vanguard { right: 0; opacity: .94; }
.battle-formation.defender .battle-squad { transform: scaleX(-1); }
.battle-formation.defender .squad-rear { right: 0; left: auto; transform: scale(-.76, .76); transform-origin: right bottom; }
.battle-formation.defender .squad-main { right: 22%; left: auto; transform: scale(-.92, .92); }
.battle-formation.defender .squad-vanguard { right: auto; left: 0; }
.battle-formation.type-infantry .battle-squad { background-position: 0 50%; }
.battle-formation.type-cavalry .battle-squad { background-position: 25% 50%; }
.battle-formation.type-archer .battle-squad { background-position: 50% 50%; }
.battle-formation.type-siege .battle-squad { background-position: 75% 50%; }
.battle-formation.type-navy .battle-squad {
  background-image: url('./assets/art/battle-navy-v1.webp');
  background-position: center;
  background-size: contain;
}
.battle-field-standard {
  position: absolute;
  z-index: 3;
  top: 2%;
  left: 12%;
  display: grid;
  width: 38px;
  height: 64px;
  place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  border: 1px solid #b9944d;
  color: #efdb96;
  background: linear-gradient(#31523b, #112419);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .62);
}
.battle-formation.defender .battle-field-standard {
  right: 12%;
  left: auto;
  background: linear-gradient(#793729, #2d1511);
}
.battle-field-standard strong { font: 800 19px var(--font-display); }
.battle-field-force {
  position: absolute;
  z-index: 4;
  bottom: 2px;
  left: 9%;
  min-width: 86px;
  padding: 4px 8px;
  border: 1px solid rgba(202, 168, 89, .45);
  color: #ead7a3;
  background: rgba(7, 14, 9, .82);
  font-style: normal;
  text-align: left;
}
.battle-formation.defender .battle-field-force {
  right: 9%;
  left: auto;
  border-color: rgba(180, 103, 74, .56);
  background: rgba(41, 15, 12, .84);
  text-align: right;
}
.battle-field-force b,
.battle-field-force small { display: block; }
.battle-field-force b { font: 700 10px var(--font-display); }
.battle-field-force small { color: #b2a68c; font: 7px var(--font-data); }
.battle-tactical-caption { z-index: 10; top: 47px; width: min(90%, 760px); }
.battle-tactical-grid {
  z-index: 4;
  top: 62px;
  bottom: 5px;
  width: min(70vw, 720px);
  border-color: rgba(224, 196, 125, .34);
  background: rgba(7, 12, 9, .28);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.tactical-cell { background-color: rgba(54, 72, 48, .42); }
.battle-projectile-layer { z-index: 12; }
.battle-fire-layer { z-index: 7; }
.battle-effect { z-index: 13; top: 48%; }
.battle-field[data-momentum='advance'] .attacker-control { background: linear-gradient(90deg, rgba(18, 94, 49, .28), rgba(51, 123, 69, .1)); }
.battle-field[data-momentum='retreat'] .defender-control { background: linear-gradient(90deg, rgba(130, 43, 27, .1), rgba(132, 35, 25, .3)); }
.battle-field.strike-attacker .battle-formation.attacker { animation: battleArmyAdvance .7s ease both; }
.battle-field.strike-defender .battle-formation.defender { animation: battleArmyCounter .7s ease both; }
.battle-command-deck {
  min-height: 0;
  height: calc(var(--battle-deck-height) + env(safe-area-inset-bottom));
  max-height: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  overflow-y: auto;
  scrollbar-width: thin;
}
.battle-command-heading {
  grid-column: 1 / -1;
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 4px 5px;
  border-bottom: 1px solid rgba(207, 169, 83, .2);
}
.battle-command-heading > div { min-width: 0; }
.battle-command-heading strong,
.battle-command-heading small { display: block; }
.battle-command-heading strong { color: #e6cf91; font: 700 11px var(--font-display); }
.battle-command-heading small { overflow: hidden; color: #9f947d; font: 7px var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.battle-core-orders,
.battle-skill-buttons { display: contents; }
.battle-command { min-height: 66px; }
.battle-log {
  z-index: 14;
  bottom: calc(var(--battle-deck-height) + env(safe-area-inset-bottom) + 5px);
  max-height: 62px;
  background: linear-gradient(90deg, rgba(7, 10, 8, .88), rgba(7, 10, 8, .62));
}

/* Battle result: opposing commanders, verdict, losses and territorial outcome */
.battle-result {
  --result-front: 50%;
  display: block;
  padding: 0;
  overflow: auto;
}
.battle-result::before {
  background: linear-gradient(180deg, rgba(5, 8, 6, .35), rgba(5, 7, 5, .76) 50%, rgba(4, 6, 5, .96));
}
.battle-result .result-art {
  filter: saturate(.82) contrast(1.08) brightness(.78);
  transform: scale(1.015);
}
.battle-result-layout {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-height: 100svh;
  grid-template-rows: minmax(290px, 58svh) minmax(0, 1fr);
  align-content: end;
}
.battle-result-showdown {
  display: grid;
  width: min(1120px, 100%);
  grid-template-columns: minmax(190px, 1fr) minmax(280px, .95fr) minmax(190px, 1fr);
  align-items: end;
  gap: clamp(10px, 2.5vw, 34px);
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 24px 18px;
}
.result-force {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(208, 174, 92, .44);
  background: linear-gradient(90deg, rgba(8, 25, 15, .9), rgba(9, 14, 10, .54));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.result-force.defender {
  flex-direction: row-reverse;
  border-color: rgba(181, 101, 72, .52);
  background: linear-gradient(-90deg, rgba(59, 20, 15, .92), rgba(21, 12, 10, .56));
  text-align: right;
}
.result-general-face {
  display: block;
  width: clamp(76px, 10vw, 128px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 2px solid #c39d54;
  border-radius: 50% 50% 7px 7px;
  background-color: #101711;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  box-shadow: inset 0 0 0 4px rgba(5, 8, 6, .72), 0 8px 24px rgba(0, 0, 0, .62);
}
.result-force.defender .result-general-face { border-color: #ad644b; }
.result-force div { min-width: 0; }
.result-force small,
.result-force h2,
.result-force p { display: block; margin: 0; }
.result-force small { color: #ae9c75; font: 8px var(--font-data); letter-spacing: .12em; }
.result-force h2 { margin-top: 3px; overflow: hidden; color: #f0dcaa; font: 800 clamp(16px, 2.4vw, 25px) var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.result-force p { margin-top: 5px; color: #c7b991; font: 9px var(--font-data); }
.battle-result-verdict { min-width: 0; text-align: center; }
.battle-result-verdict > p { margin: 5px 0; color: #c4b593; font: 9px/1.45 var(--font-ui); }
.battle-result-verdict > h1 { margin: 2px 0 7px; color: #f0d886; font: 900 clamp(28px, 5vw, 54px) var(--font-display); letter-spacing: .14em; text-shadow: 0 3px 12px #000, 0 0 22px rgba(197, 123, 48, .32); }
.battle-result-seal {
  width: clamp(58px, 7vw, 82px);
  height: clamp(58px, 7vw, 82px);
  margin-bottom: 7px;
  border-radius: 5px;
  transform: rotate(-3deg);
  font-size: clamp(28px, 4vw, 42px);
  box-shadow: 0 0 0 4px rgba(8, 9, 7, .58), 0 10px 28px rgba(0, 0, 0, .5);
}
.battle-result-front { margin-top: 12px; }
.battle-result-front > span {
  display: block;
  min-height: 28px;
  color: #dbc88f;
  font: 8px/1.45 var(--font-data);
}
.battle-result-front > i {
  position: relative;
  display: block;
  height: 7px;
  border: 1px solid rgba(221, 190, 112, .5);
  background: linear-gradient(90deg, #315f42 0 var(--result-front), #743526 var(--result-front) 100%);
  box-shadow: inset 0 0 7px #000;
}
.battle-result-front > i > b {
  position: absolute;
  top: 50%;
  left: var(--result-front);
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid #e1c36f;
  background: #5f2c1e;
  box-shadow: 0 0 9px rgba(222, 174, 76, .55);
  transition: left .7s cubic-bezier(.2, .76, .2, 1);
}
.battle-result-card {
  width: min(980px, calc(100% - 24px));
  max-height: none;
  align-self: end;
  margin: 0 auto calc(12px + env(safe-area-inset-bottom));
  padding: 12px 16px;
  overflow-y: auto;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(12, 18, 14, .9), rgba(7, 10, 8, .97));
}
.battle-result-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 10px;
}
.battle-result-stats article { min-width: 0; padding: 7px 4px; }
.battle-result-stats strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.battle-result-captures { margin-bottom: 8px; }
.battle-result-card > button { min-height: 42px; }
.battle-result[data-territory='advanced'] .result-force.attacker,
.battle-result[data-territory='occupied'] .result-force.defender { transform: translateY(-5px); filter: brightness(1.08); }
.battle-result[data-territory='advanced'] .result-force.defender,
.battle-result[data-territory='occupied'] .result-force.attacker { opacity: .7; filter: saturate(.58); }
.battle-result:not([hidden]) .result-force.attacker { animation: resultArmyLeftIn .5s ease both; }
.battle-result:not([hidden]) .result-force.defender { animation: resultArmyRightIn .5s ease both; }
.battle-result:not([hidden]) .battle-result-verdict { animation: resultVerdictIn .55s .12s ease both; }
.battle-result:not([hidden]) .battle-result-card { animation: resultDossierIn .45s .2s ease both; }

@keyframes battleArmyAdvance { 48% { transform: translateX(11%) scale(1.035); } }
@keyframes battleArmyCounter { 48% { transform: translateX(-11%) scale(1.035); } }
@keyframes resultArmyLeftIn { from { opacity: 0; transform: translateX(-36px); } }
@keyframes resultArmyRightIn { from { opacity: 0; transform: translateX(36px); } }
@keyframes resultVerdictIn { from { opacity: 0; transform: scale(.82); filter: blur(3px); } }
@keyframes resultDossierIn { from { opacity: 0; transform: translateY(24px); } }

@media (orientation: portrait), (max-width: 560px) {
  .battle-arena { --battle-deck-height: min(39svh, 330px); }
  .combatant-status { top: calc(65px + env(safe-area-inset-top)); width: calc(50% - 7px); padding: 5px; }
  .attacker-status { left: 4px; }
  .defender-status { right: 4px; }
  .battle-field { inset: calc(158px + env(safe-area-inset-top)) 0 calc(var(--battle-deck-height) + env(safe-area-inset-bottom)); }
  .battle-front-overview { top: 4px; width: calc(100% - 8px); grid-template-columns: 74px minmax(100px, 1fr) 74px; gap: 3px; }
  .front-camp { padding: 4px 5px; border-left-width: 2px; }
  .front-camp.defender { border-right-width: 2px; }
  .front-camp b { font-size: 7px; }
  .front-camp span { font-size: 6px; }
  .battle-front-track > span { display: none; }
  .battle-frontline { top: 38px; }
  .battle-tactical-caption { top: 38px; font-size: 6px; }
  .battle-tactical-grid { top: 50px; bottom: 4px; width: 96vw; }
  .battle-formation { width: 42%; height: 54%; opacity: .56; }
  .battle-formation.attacker { left: clamp(-6%, calc(var(--frontline) - 42%), 58%); }
  .battle-formation.defender { right: clamp(-6%, calc(58% - var(--frontline)), 58%); }
  .battle-field-standard { width: 27px; height: 45px; }
  .battle-field-standard strong { font-size: 14px; }
  .battle-field-force { display: none; }
  .battle-command-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-command { min-height: 62px; }
  .battle-command-heading small { display: none; }
  .battle-log { right: 5px; bottom: calc(var(--battle-deck-height) + env(safe-area-inset-bottom) + 4px); left: 5px; width: auto; max-height: 44px; }
  .battle-result-layout { grid-template-rows: minmax(310px, 50svh) minmax(0, 1fr); }
  .battle-result-showdown {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top)) 10px 8px;
  }
  .battle-result-verdict { grid-column: 1 / -1; grid-row: 1; }
  .result-force { grid-row: 2; display: grid; justify-items: center; gap: 5px; padding: 7px 4px; text-align: center; }
  .result-force.defender { text-align: center; }
  .result-general-face { width: clamp(54px, 20vw, 76px); }
  .result-force h2 { font-size: 14px; }
  .result-force p { font-size: 7px; }
  .battle-result-verdict > h1 { font-size: clamp(25px, 9vw, 38px); }
  .battle-result-verdict > p { display: -webkit-box; max-height: 38px; overflow: hidden; font-size: 8px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .battle-result-seal { width: 50px; height: 50px; margin-bottom: 2px; font-size: 25px; }
  .battle-result-front { margin-top: 5px; }
  .battle-result-front > span { min-height: 22px; font-size: 7px; }
  .battle-result-card { width: calc(100% - 12px); max-height: calc(50svh - 10px); margin-bottom: calc(6px + env(safe-area-inset-bottom)); padding: 8px; }
  .battle-result-stats { grid-template-columns: repeat(3, 1fr); }
  .battle-result-stats article:nth-child(4) { border-left: 0; }
  .battle-result-stats article:nth-child(n + 4) { border-top: 1px solid rgba(214, 184, 109, .18); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .battle-arena { --battle-deck-height: min(32svh, 168px); }
  .battle-field { inset: calc(104px + env(safe-area-inset-top)) 0 calc(var(--battle-deck-height) + env(safe-area-inset-bottom)); }
  .combatant-status { top: calc(53px + env(safe-area-inset-top)); }
  .battle-front-overview { top: 3px; }
  .battle-tactical-grid { top: 48px; width: min(67vw, 650px); }
  .battle-tactical-caption { top: 36px; }
  .battle-formation { bottom: -8%; height: 74%; }
  .battle-command-deck { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 5px; }
  .battle-command-heading { min-height: 24px; padding-bottom: 3px; }
  .battle-command { min-height: 54px; grid-template-columns: 32px minmax(0, 1fr); padding: 5px; }
  .battle-command i { width: 30px; height: 30px; font-size: 14px; }
  .battle-log { bottom: calc(var(--battle-deck-height) + env(safe-area-inset-bottom) + 3px); max-height: 42px; }
  .battle-result-layout { grid-template-rows: minmax(210px, 54svh) minmax(0, 1fr); }
  .battle-result-showdown { padding: calc(6px + env(safe-area-inset-top)) 18px 7px; }
  .result-force { padding: 7px; }
  .result-general-face { width: 68px; }
  .battle-result-seal { width: 48px; height: 48px; font-size: 25px; }
  .battle-result-verdict > h1 { margin-block: 0 3px; font-size: 28px; }
  .battle-result-verdict > p { margin: 2px 0; font-size: 7px; }
  .battle-result-front { margin-top: 4px; }
  .battle-result-front > span { min-height: 20px; font-size: 7px; }
  .battle-result-card { max-height: 44svh; margin-bottom: calc(5px + env(safe-area-inset-bottom)); padding: 7px 10px; }
  .battle-result-stats { margin-bottom: 5px; }
  .battle-result-stats article { padding: 4px 3px; }
  .battle-result-stats strong { font-size: 10px; }
  .battle-result-captures { margin-bottom: 4px; }
  .battle-result-card > button { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-select-menu.is-open,
  .battle-control-zones > i,
  .battle-front-track > b,
  .battle-result-front > i > b { transition: none; }
  .battle-field.strike-attacker .battle-formation.attacker,
  .battle-field.strike-defender .battle-formation.defender,
  .battle-result:not([hidden]) .result-force,
  .battle-result:not([hidden]) .battle-result-verdict,
  .battle-result:not([hidden]) .battle-result-card { animation: none !important; }
}

/* Battlefield cinematic effects history-r8 */
.battle-weather-layer,
.battle-impact-layer,
.battle-skill-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.battle-weather-layer { z-index: 8; }
.battle-impact-layer { z-index: 14; }
.battle-skill-layer { z-index: 16; overflow: visible; }

.battle-weather-particle {
  position: absolute;
  display: block;
  left: var(--particle-x);
  top: var(--particle-y);
  pointer-events: none;
}
.battle-weather-particle.is-rain {
  top: -20%;
  width: 1px;
  height: clamp(28px, 6vh, 54px);
  opacity: .34;
  background: linear-gradient(transparent, rgba(194, 218, 218, .86));
  transform: rotate(12deg);
  animation: battleRainFall var(--particle-duration) var(--particle-delay) linear infinite;
}
.battle-weather-particle.is-snow {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: .7;
  background: #eef3e8;
  box-shadow: 0 0 4px rgba(226, 238, 232, .78);
  animation: battleSnowFall calc(var(--particle-duration) * 3.2) var(--particle-delay) linear infinite;
}
.battle-weather-particle.is-fog {
  left: -28%;
  top: calc(4% + var(--particle-index) * 14%);
  width: 58%;
  height: 22%;
  border-radius: 50%;
  opacity: .18;
  background: radial-gradient(ellipse, rgba(218, 225, 210, .72), transparent 68%);
  filter: blur(8px);
  animation: battleFogDrift calc(7s + var(--particle-index) * .8s) var(--particle-delay) ease-in-out infinite alternate;
}
.battle-weather-particle.is-heat {
  top: 0;
  width: 14%;
  height: 100%;
  opacity: .09;
  background: linear-gradient(90deg, transparent, rgba(255, 205, 112, .65), transparent);
  filter: blur(3px);
  animation: battleHeatHaze calc(var(--particle-duration) * 2.4) var(--particle-delay) ease-in-out infinite alternate;
}
.battle-weather-particle.is-mote {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: .28;
  background: #e3c77e;
  box-shadow: 0 0 5px rgba(222, 182, 83, .66);
  animation: battleSunMote calc(var(--particle-duration) * 2.6) var(--particle-delay) ease-in-out infinite alternate;
}
.battle-field[data-weather='rain']::after { background: linear-gradient(rgba(40, 58, 57, .18), rgba(5, 9, 9, .36)); }
.battle-field[data-weather='snow']::after { background: linear-gradient(rgba(203, 213, 204, .11), rgba(20, 30, 28, .27)); }
.battle-field[data-weather='fog']::after { background: linear-gradient(90deg, rgba(212, 220, 204, .14), transparent 48%, rgba(212, 220, 204, .12)); }
.battle-field[data-weather='heat']::after { background: linear-gradient(rgba(142, 80, 26, .08), rgba(91, 34, 17, .16)); }
.battle-ambient-smoke {
  --smoke-left: calc(12% + var(--smoke-index) * 23%);
  position: absolute;
  bottom: -9%;
  left: var(--smoke-left);
  width: clamp(42px, 8vw, 86px);
  height: clamp(54px, 12vh, 108px);
  border-radius: 50%;
  opacity: .22;
  background: radial-gradient(ellipse at 50% 72%, rgba(56, 53, 45, .88), rgba(78, 75, 65, .42) 42%, transparent 70%);
  filter: blur(5px);
  animation: battleAmbientSmoke calc(5.4s + var(--smoke-index) * .8s) calc(var(--smoke-index) * -.7s) ease-in-out infinite;
}

.battle-skill-cut-in {
  --cut-in-accent: #d3b15b;
  position: absolute;
  top: calc(14% + var(--cut-in-index) * 29%);
  display: grid;
  width: min(46%, 390px);
  min-height: 86px;
  grid-template-columns: 76px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--cut-in-accent), transparent 28%);
  color: #f2e4bb;
  background: linear-gradient(100deg, rgba(5, 12, 8, .97), rgba(22, 33, 23, .93) 74%, rgba(55, 42, 19, .88));
  box-shadow: 0 12px 24px rgba(0, 0, 0, .62), inset 0 0 20px rgba(205, 168, 80, .08);
  opacity: 0;
  clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 3% 50%);
}
.battle-skill-cut-in.side-attacker {
  left: 2%;
  animation: battleSkillCutInLeft 1.55s calc(var(--cut-in-index) * .22s) cubic-bezier(.2, .75, .25, 1) both;
}
.battle-skill-cut-in.side-defender {
  right: 2%;
  grid-template-columns: 42px minmax(0, 1fr) 76px;
  border-color: rgba(190, 101, 72, .72);
  background: linear-gradient(260deg, rgba(23, 8, 7, .97), rgba(56, 22, 18, .93) 74%, rgba(70, 38, 18, .88));
  clip-path: polygon(5% 0, 100% 0, 97% 50%, 100% 100%, 5% 100%, 0 50%);
  animation: battleSkillCutInRight 1.55s calc(var(--cut-in-index) * .22s) cubic-bezier(.2, .75, .25, 1) both;
}
.battle-skill-cut-in.type-civil { --cut-in-accent: #79a796; }
.battle-skill-cut-in.side-defender .battle-skill-portrait { grid-column: 3; }
.battle-skill-cut-in.side-defender .battle-skill-copy { grid-column: 2; grid-row: 1; text-align: right; }
.battle-skill-cut-in.side-defender .battle-skill-seal { grid-column: 1; grid-row: 1; border-color: #b76850; color: #e2a083; }
.battle-skill-portrait {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 2px solid var(--cut-in-accent);
  border-radius: 50%;
  background-color: #17261c;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 3px rgba(7, 13, 9, .72), 0 0 15px color-mix(in srgb, var(--cut-in-accent), transparent 55%);
  font: 800 24px/68px var(--font-display);
  text-align: center;
}
.battle-skill-copy { display: grid; min-width: 0; gap: 2px; }
.battle-skill-copy small { color: #9f9a87; font: 7px var(--font-data); letter-spacing: .08em; }
.battle-skill-copy strong { overflow: hidden; color: #f1d583; font: 800 clamp(15px, 2vw, 22px) var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.battle-skill-copy em { display: -webkit-box; overflow: hidden; color: #c7bea5; font: 8px/1.45 var(--font-data); font-style: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.battle-skill-seal {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--cut-in-accent);
  border-radius: 50%;
  color: #f0d684;
  background: rgba(14, 20, 14, .84);
  font: 800 18px var(--font-display);
}

.battle-damage-number {
  position: absolute;
  z-index: 3;
  top: calc(36% + var(--damage-index) * 8%);
  display: grid;
  min-width: 70px;
  justify-items: center;
  color: #ffdf98;
  font: 900 clamp(18px, 3.2vw, 30px) var(--font-data);
  text-shadow: 0 2px 2px #260800, 0 0 12px rgba(241, 92, 38, .9);
  opacity: 0;
  animation: battleDamageRise 1.1s calc(var(--damage-index) * .08s) ease-out both;
}
.battle-damage-number.side-attacker { left: 24%; }
.battle-damage-number.side-defender { right: 24%; }
.battle-damage-number small { color: #ef9b65; font: 700 7px var(--font-display); letter-spacing: .08em; }
.battle-damage-number.is-critical { color: #fff1a8; font-size: clamp(24px, 4vw, 38px); }
.battle-damage-number.is-critical small { color: #ffd455; font-size: 9px; }
.battle-damage-number.healing { color: #aee7bb; text-shadow: 0 2px 2px #06210e, 0 0 12px rgba(68, 190, 104, .78); }
.battle-damage-number.healing small { color: #8ed59f; }
.battle-impact-flash {
  position: absolute;
  top: 48%;
  width: clamp(100px, 18vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 239, 165, .9), rgba(225, 95, 35, .42) 18%, transparent 64%);
  filter: blur(1px);
  animation: battleImpactFlash .46s ease-out both;
}
.battle-impact-flash.side-attacker { left: 21%; }
.battle-impact-flash.side-defender { right: 21%; }
.battle-impact-flash.is-heavy { filter: brightness(1.35); }
.battle-dust,
.battle-impact-smoke {
  position: absolute;
  bottom: 15%;
  border-radius: 50%;
  pointer-events: none;
}
.battle-dust {
  width: calc(9px + var(--dust-index) * 1px);
  height: calc(7px + var(--dust-index) * .7px);
  opacity: 0;
  background: rgba(178, 145, 93, .72);
  filter: blur(1px);
  animation: battleDustBurst .82s calc(var(--dust-index) * .025s) ease-out both;
}
.battle-dust.side-attacker,
.battle-impact-smoke.side-attacker { left: calc(29% + (var(--dust-index, var(--smoke-index)) - 4) * 7px); }
.battle-dust.side-defender,
.battle-impact-smoke.side-defender { right: calc(29% + (var(--dust-index, var(--smoke-index)) - 4) * 7px); }
.battle-impact-smoke {
  width: calc(24px + var(--smoke-index) * 3px);
  height: calc(20px + var(--smoke-index) * 4px);
  opacity: 0;
  background: radial-gradient(circle, rgba(82, 76, 65, .72), rgba(58, 52, 44, .25) 56%, transparent 72%);
  filter: blur(3px);
  animation: battleImpactSmoke 1.35s calc(var(--smoke-index) * .055s) ease-out both;
}

.battle-siege-stone {
  position: absolute;
  top: calc(62% - var(--stone-index) * 8%);
  left: calc(20% + var(--stone-index) * 3%);
  width: calc(14px + var(--stone-index) * 3px);
  height: calc(14px + var(--stone-index) * 3px);
  border-radius: 44% 56% 48% 52%;
  opacity: 0;
  background: radial-gradient(circle at 32% 28%, #88775e, #3c352c 68%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .75);
  animation: battleSiegeStone .88s calc(var(--stone-index) * .09s) cubic-bezier(.18, .66, .42, 1) both;
}
.battle-navy-bolt {
  position: absolute;
  top: calc(27% + var(--bolt-index) * 5%);
  left: calc(17% + var(--bolt-index) * 1.2%);
  width: 38px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, #8d673c, #e7d59c 78%, transparent 80%);
  box-shadow: 0 0 5px rgba(229, 175, 71, .55);
  transform: rotate(-5deg);
  animation: battleNavyBroadside .82s calc(var(--bolt-index) * .045s) ease-in both;
}

.battle-field.screen-shake { --battle-shake: 4px; animation: battleScreenShake .42s ease-out both; }
.battle-field.screen-shake.impact-heavy { --battle-shake: 8px; }
.battle-field.guard-brace .battle-formation.attacker { animation: battleGuardBrace .72s ease both; }
.battle-field.infantry-clash .battle-formation.attacker { animation: battleInfantryRush .72s cubic-bezier(.24, .72, .28, 1) both; }
.battle-field.infantry-clash .battle-formation.defender { animation: battleDefenderRecoil .72s .18s ease both; }
.battle-field.cavalry-charge .battle-formation.attacker { animation: battleCavalryChargeEnhanced .82s cubic-bezier(.2, .72, .25, 1) both; }
.battle-field.cavalry-charge .battle-formation.defender { animation: battleDefenderRecoil .82s .2s ease both; }
.battle-field.volley-active .battle-formation.attacker { animation: battleArcherRelease .74s ease both; }
.battle-field.volley-active .battle-formation.defender { animation: battleVolleyHit .74s .34s ease both; }
.battle-field.siege-impact .battle-formation.attacker { animation: battleSiegeDraw .94s ease both; }
.battle-field.siege-impact .battle-formation.defender { animation: battleSiegeHit .94s .38s ease both; }
.battle-field.navy-broadside .battle-formation.attacker { animation: battleShipBroadside .86s ease both; }
.battle-field.navy-broadside .battle-formation.defender { animation: battleVolleyHit .86s .34s ease both; }

@keyframes battleRainFall { from { transform: translate3d(-3vw, -24vh, 0) rotate(12deg); } to { transform: translate3d(12vw, 135vh, 0) rotate(12deg); } }
@keyframes battleSnowFall { from { transform: translate3d(-8px, -18vh, 0) rotate(0); } 50% { opacity: .9; } to { transform: translate3d(32px, 112vh, 0) rotate(280deg); opacity: .1; } }
@keyframes battleFogDrift { from { transform: translateX(0) scale(.9); } to { transform: translateX(185vw) scale(1.25); } }
@keyframes battleHeatHaze { from { transform: translateX(-8px) skewX(-3deg); } to { transform: translateX(11px) skewX(4deg); } }
@keyframes battleSunMote { from { transform: translate3d(-7px, 8px, 0); opacity: .12; } to { transform: translate3d(12px, -16px, 0); opacity: .52; } }
@keyframes battleAmbientSmoke { 0%, 100% { transform: translate3d(-6px, 8px, 0) scale(.82); opacity: .1; } 50% { transform: translate3d(14px, -42px, 0) scale(1.25); opacity: .28; } }
@keyframes battleSkillCutInLeft { 0% { opacity: 0; transform: translateX(-112%) skewX(-4deg); } 18%, 70% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-22%) scale(.97); } }
@keyframes battleSkillCutInRight { 0% { opacity: 0; transform: translateX(112%) skewX(4deg); } 18%, 70% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(22%) scale(.97); } }
@keyframes battleDamageRise { 0% { opacity: 0; transform: translateY(16px) scale(.72); } 18%, 64% { opacity: 1; transform: translateY(-8px) scale(1); } 100% { opacity: 0; transform: translateY(-48px) scale(1.08); } }
@keyframes battleImpactFlash { 0% { opacity: 0; transform: scale(.12); } 22% { opacity: .92; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes battleDustBurst { 0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.4); } 28% { opacity: .74; } 100% { opacity: 0; transform: translate3d(calc((var(--dust-index) - 5) * 13px), calc(-32px - var(--dust-index) * 3px), 0) scale(1.8); } }
@keyframes battleImpactSmoke { 0% { opacity: 0; transform: translateY(8px) scale(.5); } 28% { opacity: .48; } 100% { opacity: 0; transform: translate3d(calc((var(--smoke-index) - 3) * 12px), -68px, 0) scale(1.7); } }
@keyframes battleSiegeStone { 0% { opacity: 0; transform: translate3d(0, 52px, 0) rotate(0); } 15% { opacity: 1; } 55% { transform: translate3d(34vw, -18vh, 0) rotate(380deg); } 100% { opacity: .1; transform: translate3d(60vw, 3vh, 0) rotate(720deg); } }
@keyframes battleNavyBroadside { 0% { opacity: 0; transform: translate3d(0, 8px, 0) rotate(-5deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate3d(67vw, -3vh, 0) rotate(-5deg); } }
@keyframes battleScreenShake { 0%, 100% { transform: translate3d(0, 0, 0); } 18% { transform: translate3d(calc(var(--battle-shake) * -1), 1px, 0); } 34% { transform: translate3d(var(--battle-shake), -2px, 0); } 52% { transform: translate3d(calc(var(--battle-shake) * -.55), 1px, 0); } 70% { transform: translate3d(calc(var(--battle-shake) * .45), 0, 0); } }
@keyframes battleGuardBrace { 38% { transform: translateX(-3%) scale(.96); filter: brightness(1.22) drop-shadow(0 0 10px rgba(126, 178, 144, .5)); } }
@keyframes battleInfantryRush { 42% { transform: translateX(30%) scale(1.05); } 58% { transform: translateX(25%) scale(1.02); } }
@keyframes battleCavalryChargeEnhanced { 30% { transform: translateX(-5%) scale(.98); } 64% { transform: translateX(43%) scale(1.12); filter: brightness(1.18) drop-shadow(0 10px 8px rgba(0, 0, 0, .72)); } }
@keyframes battleArcherRelease { 28% { transform: translateX(-4%) rotate(-2deg); } 48% { transform: translateX(2%) rotate(1deg); filter: brightness(1.18); } }
@keyframes battleSiegeDraw { 32% { transform: translateX(-4%); } 62% { transform: translateX(18%) scale(1.04); } }
@keyframes battleShipBroadside { 30% { transform: translateY(3%) rotate(-1deg); } 54% { transform: translateY(-2%) rotate(1deg); filter: brightness(1.24); } }
@keyframes battleDefenderRecoil { 45% { transform: translateX(9%) scale(.96); filter: brightness(.76); } }
@keyframes battleVolleyHit { 55% { transform: translateX(4%) translateY(2%) rotate(1deg); filter: brightness(.78); } }
@keyframes battleSiegeHit { 54% { transform: translateX(12%) rotate(2deg) scale(.94); filter: brightness(.68); } }

@media (orientation: portrait), (max-width: 560px) {
  .battle-skill-cut-in { top: calc(17% + var(--cut-in-index) * 25%); width: 88%; min-height: 68px; grid-template-columns: 54px minmax(0, 1fr) 34px; gap: 6px; padding: 5px 7px; }
  .battle-skill-cut-in.side-attacker { left: 3%; }
  .battle-skill-cut-in.side-defender { right: 3%; grid-template-columns: 34px minmax(0, 1fr) 54px; }
  .battle-skill-portrait { width: 50px; height: 50px; border-width: 1px; font-size: 18px; line-height: 48px; }
  .battle-skill-seal { width: 30px; height: 30px; font-size: 14px; }
  .battle-skill-copy strong { font-size: 14px; }
  .battle-skill-copy em { font-size: 7px; -webkit-line-clamp: 1; }
  .battle-damage-number { top: calc(42% + var(--damage-index) * 7%); min-width: 52px; font-size: 18px; }
  .battle-damage-number.side-attacker { left: 12%; }
  .battle-damage-number.side-defender { right: 12%; }
  .battle-impact-flash.side-attacker { left: 10%; }
  .battle-impact-flash.side-defender { right: 10%; }
  .battle-weather-particle.is-rain { height: 30px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .battle-skill-cut-in { top: calc(12% + var(--cut-in-index) * 32%); min-height: 62px; grid-template-columns: 54px minmax(0, 1fr) 32px; }
  .battle-skill-cut-in.side-defender { grid-template-columns: 32px minmax(0, 1fr) 54px; }
  .battle-skill-portrait { width: 50px; height: 50px; line-height: 48px; }
  .battle-skill-copy strong { font-size: 15px; }
  .battle-skill-copy em { -webkit-line-clamp: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-weather-particle,
  .battle-ambient-smoke,
  .battle-dust,
  .battle-impact-smoke,
  .battle-impact-flash,
  .battle-siege-stone,
  .battle-navy-bolt { display: none !important; }
  .battle-skill-cut-in,
  .battle-damage-number,
  .battle-field.screen-shake,
  .battle-field.guard-brace .battle-formation.attacker,
  .battle-field.infantry-clash .battle-formation,
  .battle-field.cavalry-charge .battle-formation,
  .battle-field.volley-active .battle-formation,
  .battle-field.siege-impact .battle-formation,
  .battle-field.navy-broadside .battle-formation { animation: none !important; }
  .battle-skill-cut-in,
  .battle-damage-number { opacity: 1; transform: none; }
}

/* Compact HUD, foldable map tools and stable bottom sheets history-r6 */
.top-hud {
  min-height: calc(54px + env(safe-area-inset-top));
  padding: calc(5px + env(safe-area-inset-top)) 10px 5px;
}

.ruler-medallion .mini-face {
  width: 34px;
  height: 34px;
}

.calendar-block {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

.calendar-block strong,
.calendar-block small {
  display: inline !important;
  margin: 0;
  line-height: 1;
}

.map-stage > #objective-card {
  position: absolute !important;
  top: 10px;
  right: 10px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 10px !important;
  width: min(58%, 240px);
  height: 96px;
  max-height: 96px;
  overflow: hidden;
  transform-origin: top right;
  transition: width var(--motion-medium) var(--ease-out), height var(--motion-medium) var(--ease-out), max-height var(--motion-medium) var(--ease-out), min-height var(--motion-medium) var(--ease-out), padding var(--motion-medium) var(--ease-out), border-radius var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out);
}

.map-stage > #objective-card.is-collapsed {
  display: block;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(226, 190, 107, .78);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #66502b, #211c13 72%);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .52), inset 0 0 0 3px rgba(8, 11, 8, .42);
}

.objective-card.is-collapsed::after {
  display: none !important;
}

.objective-card .objective-heading > span,
.objective-card .objective-actions > :not(#objective-toggle),
.objective-card > #objective-title,
.objective-card .objective-details {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--motion-fast) ease, transform var(--motion-medium) var(--ease-out), visibility 0s linear 0s;
}

.objective-card.is-collapsed .objective-heading > span,
.objective-card.is-collapsed .objective-actions > :not(#objective-toggle),
.objective-card.is-collapsed > #objective-title,
.objective-card.is-collapsed .objective-details {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  pointer-events: none;
  transition-delay: 0s, 0s, var(--motion-medium);
}

.objective-card.is-collapsed .objective-heading,
.objective-card.is-collapsed .objective-actions {
  display: block;
}

.objective-card.is-collapsed #objective-toggle {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  min-width: 42px;
  height: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #f0d58c;
  background: transparent;
  font: 900 17px var(--font-display);
  text-shadow: 0 2px 5px #000;
  box-shadow: none;
}

.objective-card.is-collapsed #objective-toggle::before {
  inset: 0;
}

.map-legend {
  right: 8px;
  bottom: 8px;
  display: flex;
  width: 194px;
  max-width: 220px;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: auto;
  transition: width var(--motion-medium) var(--ease-out), max-width var(--motion-medium) var(--ease-out), min-width var(--motion-medium) var(--ease-out), border-radius var(--motion-medium) var(--ease-out), background var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out);
}

.legend-items {
  display: flex;
  flex: 0 0 auto;
  max-width: 152px;
  align-items: center;
  gap: 6px;
  padding-left: 3px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  white-space: nowrap;
  transition: max-width var(--motion-medium) var(--ease-out), opacity var(--motion-fast) ease, transform var(--motion-medium) var(--ease-out), visibility 0s linear 0s;
}

.legend-items[hidden] {
  display: flex !important;
}

.legend-toggle {
  position: relative;
  flex: 0 0 auto;
  order: -1;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(236, 205, 127, .72);
  border-radius: 50%;
  background: conic-gradient(var(--ember) 0 25%, var(--north) 25% 50%, var(--river) 50% 75%, var(--neutral) 75%);
  box-shadow: inset 0 0 0 4px rgba(8, 12, 9, .68), 0 3px 9px rgba(0, 0, 0, .5);
  transition: transform var(--motion-medium) var(--ease-out), filter var(--motion-medium) var(--ease-out);
}

.legend-toggle::before {
  position: absolute;
  inset: -5px;
  content: '';
}

.legend-toggle::after {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #e0c779;
  content: '';
}

.map-legend.is-collapsed {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(11, 16, 13, .9);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .5);
}

.map-legend.is-collapsed .legend-toggle {
  width: 24px;
  height: 24px;
}

.map-legend.is-collapsed .legend-items {
  max-width: 0;
  padding-left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  pointer-events: none;
  transition-delay: 0s, 0s, 0s, var(--motion-medium);
}

.map-legend:not(.is-collapsed) {
  width: 194px;
}

.map-legend:not(.is-collapsed) .legend-toggle {
  transform: rotate(180deg);
}

.sheet {
  --sheet-dock-space: 0px;
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  width: min(100%, 1280px);
  max-width: 1280px;
  margin: auto;
  padding: 0;
  align-items: end;
  justify-items: center;
}

.sheet-card {
  width: min(100%, 960px);
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
  margin: 0;
  border: 1px solid var(--stroke-strong);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.sheet-content {
  min-height: 0;
  max-height: none;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

@media (orientation: portrait), (max-width: 560px) {
  .map-stage > #objective-card,
  .map-stage > #objective-card.is-collapsed {
    top: 6px;
    right: 6px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 6px !important;
  }

  .objective-card.is-collapsed {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .map-legend.is-collapsed {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .objective-card.is-collapsed #objective-toggle {
    min-width: 40px;
    min-height: 40px;
  }

  .map-legend {
    display: flex;
    right: 6px;
    bottom: 6px;
  }

  .sheet-card {
    width: 100%;
  }
}

/* Fixed-height bottom sheets and split report dispatch history-r6 */
.sheet-card {
  height: 76vh;
  height: 76dvh;
  max-height: 76vh;
  max-height: 76dvh;
}

.report-toast {
  display: grid;
  width: min(520px, calc(100vw - 24px));
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px;
  align-items: end;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.report-toast.has-speaker {
  grid-template-columns: 72px minmax(0, 1fr);
}

.report-toast:not(.has-speaker) {
  grid-template-columns: minmax(0, 1fr);
}

.report-toast-speaker {
  width: 72px;
  height: 88px;
  min-height: 88px;
  align-self: end;
  justify-self: start;
  transform-origin: left bottom;
  will-change: opacity, transform;
}

.report-toast-speaker-face {
  inset: 0 auto auto 0;
  width: 68px;
  height: 68px;
  aspect-ratio: 1;
}

.report-toast-panel {
  display: grid;
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(211, 174, 92, .66);
  border-left: 4px solid #a76e38;
  border-radius: var(--radius-panel);
  color: var(--paper);
  background: linear-gradient(135deg, rgba(38, 27, 18, .98), rgba(10, 18, 13, .98));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .65), inset 0 0 28px rgba(197, 145, 64, .06);
  backdrop-filter: blur(12px);
  transform-origin: right center;
  will-change: opacity, transform;
}

.report-toast.has-speaker .report-toast-panel {
  grid-template-columns: minmax(0, 1fr) auto;
}

.report-toast.tone-bad .report-toast-panel {
  border-left-color: var(--bad);
}

.report-toast.tone-mixed .report-toast-panel {
  border-left-color: #c67a3f;
}

.report-toast.is-entering,
.report-toast.is-closing {
  animation: none;
}

.report-toast.is-entering .report-toast-speaker {
  animation: report-speaker-enter .36s cubic-bezier(.18, .82, .28, 1) both;
}

.report-toast.is-entering .report-toast-panel {
  animation: report-panel-enter .36s .06s cubic-bezier(.18, .82, .28, 1) both;
}

.report-toast.is-closing .report-toast-speaker {
  animation: report-speaker-exit .24s ease-in both;
}

.report-toast.is-closing .report-toast-panel {
  animation: report-panel-exit .24s ease-in both;
}

@keyframes report-speaker-enter {
  from { opacity: 0; transform: translate3d(-76px, 8px, 0) scale(.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes report-panel-enter {
  from { opacity: 0; transform: translate3d(76px, 0, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes report-speaker-exit {
  to { opacity: 0; transform: translate3d(-76px, 7px, 0) scale(.94); }
}

@keyframes report-panel-exit {
  to { opacity: 0; transform: translate3d(76px, 0, 0) scale(.98); }
}

@media (orientation: portrait), (max-width: 560px) {
  .report-toast,
  .report-toast.has-speaker {
    right: 8px;
    width: calc(100vw - 16px);
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px;
    padding: 0;
  }

  .report-toast:not(.has-speaker) {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-toast-speaker {
    width: 56px;
    height: 72px;
    min-height: 72px;
  }

  .report-toast-speaker-face {
    width: 52px;
    height: 52px;
  }

  .report-toast-panel {
    gap: 7px;
    padding: 8px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .report-toast,
  .report-toast.has-speaker {
    width: min(470px, calc(100vw - 16px));
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 0;
  }

  .report-toast-speaker {
    width: 58px;
    height: 68px;
    min-height: 68px;
  }

  .report-toast-speaker-face {
    width: 54px;
    height: 54px;
  }

  .report-toast-panel {
    padding: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .report-toast.is-entering .report-toast-speaker,
  .report-toast.is-entering .report-toast-panel,
  .report-toast.is-closing .report-toast-speaker,
  .report-toast.is-closing .report-toast-panel {
    animation: none !important;
  }
}

@media (orientation: landscape) and (min-width: 650px) {
  .top-hud {
    min-height: calc(44px + env(safe-area-inset-top));
    padding-top: calc(3px + env(safe-area-inset-top));
    padding-bottom: 3px;
  }

  .ruler-medallion .mini-face {
    width: 32px;
    height: 32px;
  }

  .sheet {
    --sheet-dock-space: 0px;
    align-items: end;
    justify-items: center;
  }

  .sheet-card {
    width: min(960px, calc(100% - 32px));
    height: 76vh;
    height: 76dvh;
    max-height: 76vh;
    max-height: 76dvh;
    margin: 0;
    border-right: 1px solid var(--stroke-strong);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .map-stage > #objective-card,
  .map-stage > #objective-card.is-collapsed {
    top: 5px;
    right: 5px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 5px !important;
  }

  .sheet {
    --sheet-dock-space: 0px;
  }

  .sheet-card > header {
    min-height: 48px;
    padding-block: 6px;
  }
}

.sheet.is-entering .sheet-card {
  animation-name: overlay-sheet-in;
}

.sheet.is-closing .sheet-card {
  animation-name: overlay-sheet-out;
}

.strategy-pane {
  display: grid;
  gap: 10px;
  animation: strategy-pane-swap var(--motion-fast) var(--ease-out) both;
}

@keyframes strategy-pane-swap {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .objective-card,
  .map-legend,
  .sheet-card,
  .strategy-pane,
  .legendary-progress i {
    transition: none;
    animation: none !important;
  }

  .game-select-menu.is-open,
  .sheet.is-entering .sheet-card,
  .sheet.is-closing .sheet-card {
    animation: none !important;
  }
}


/* Legendary challenge and quartermaster loop */
.legendary-hero,
.legendary-active,
.legendary-share,
.legendary-offer,
.quartermaster-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(211, 172, 88, .34);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(55, 38, 24, .94), rgba(15, 21, 17, .98));
  box-shadow: inset 0 1px rgba(255, 235, 178, .05), 0 8px 24px rgba(0, 0, 0, .24);
}
.legendary-hero { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px; }
.legendary-hero > .panel-kicker, .legendary-hero > p { grid-column: 1; }
.legendary-hero h3 { margin: 0; color: #f0d58e; font: 700 19px var(--font-display); }
.legendary-hero p, .legendary-active p, .legendary-offer p, .legendary-share p, .quartermaster-card p { margin: 5px 0; color: #c0b397; font-size: 9px; line-height: 1.55; }
.legendary-streak { grid-column: 2; grid-row: 1 / 4; display: grid; place-content: center; min-width: 82px; text-align: center; }
.legendary-streak strong { color: #e88a61; font: 800 18px var(--font-display); }
.legendary-streak small { color: #9f9279; font-size: 8px; }
.legendary-offer-grid, .quartermaster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.legendary-offer, .quartermaster-card { display: grid; grid-template-columns: 38px 1fr; gap: 3px 9px; padding: 10px; }
.legendary-seal { grid-row: 1 / 4; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #bd8b47; border-radius: 50%; color: #f0d486; background: radial-gradient(circle, #6f3524, #25150f 72%); font: normal 700 14px var(--font-display); }
.legendary-offer h3, .quartermaster-card h3 { margin: 0; color: #e7d29b; font: 700 12px var(--font-display); }
.legendary-offer > p, .legendary-offer > small, .legendary-offer > button, .quartermaster-card > p, .quartermaster-card > small, .quartermaster-actions { grid-column: 2; }
.legendary-offer > small, .quartermaster-card > small, .legendary-active > small { color: #aa915f; font: 8px var(--font-data); }
.legendary-offer > button { margin-top: 5px; }
.legendary-active { padding: 12px; }
.legendary-active.complete { border-color: rgba(232, 175, 85, .78); box-shadow: inset 0 0 28px rgba(190, 98, 41, .14), 0 9px 26px rgba(0, 0, 0, .3); }
.legendary-active header { display: flex; gap: 10px; align-items: center; }
.legendary-active header h3 { margin: 2px 0 0; color: #efcf82; font: 700 16px var(--font-display); }
.legendary-active header small { color: #c18155; font-size: 8px; }
.legendary-progress { height: 8px; margin: 9px 0 6px; border: 1px solid rgba(219, 183, 107, .2); background: rgba(4, 7, 5, .7); }
.legendary-progress i { display: block; height: 100%; background: linear-gradient(90deg, #8d3e2b, #e0b85f); transition: width .25s ease; }
.legendary-active > button { margin-top: 9px; }
.legendary-share { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; }
.legendary-share strong { color: #e5c77e; }
.legendary-share p { grid-column: 1; }
.legendary-share button { grid-column: 2; grid-row: 1 / 3; }
.quartermaster-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
@media (orientation: portrait) {
  .legendary-offer-grid, .quartermaster-grid { grid-template-columns: 1fr; }
  .legendary-hero { grid-template-columns: 1fr; }
  .legendary-streak { grid-column: 1; grid-row: auto; justify-content: start; grid-auto-flow: column; gap: 8px; }
}
/* Daily rewrite, destiny collection and battle highlights */
.daily-rewrite-card,
.destiny-collection,
.battle-highlight-card {
  position: relative;
  padding: 13px;
  border: 1px solid rgba(190, 144, 72, .32);
  background: linear-gradient(145deg, rgba(44, 26, 19, .97), rgba(10, 18, 15, .98));
  box-shadow: inset 0 1px rgba(255, 231, 162, .06), 0 10px 28px rgba(0, 0, 0, .28);
}
.daily-rewrite-card { display: grid; gap: 7px; overflow: hidden; }
.daily-rewrite-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 15%, rgba(164, 59, 38, .18), transparent 35%); }
.daily-rewrite-card header { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; }
.daily-rewrite-card header small { color: #a89a7d; font-size: 8px; letter-spacing: .06em; }
.daily-rewrite-card h3, .destiny-collection strong, .battle-highlight-card h3 { margin: 2px 0; color: #f0d58e; font: 700 15px var(--font-display); }
.daily-rewrite-card blockquote { margin: 2px 0; padding: 8px 10px; border-left: 2px solid #a94732; color: #e8d8b5; background: rgba(93, 35, 25, .16); font: 700 11px/1.55 var(--font-display); }
.daily-rewrite-card p, .battle-highlight-card li { margin: 0; color: #b9ad92; font-size: 9px; line-height: 1.55; }
.daily-score { color: #e9bc63; font: 800 14px var(--font-display); }
.daily-rewrite-card.is-complete { border-color: rgba(218, 177, 86, .62); }
.destiny-collection > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.destiny-collection > header > div { display: grid; gap: 2px; }
.destiny-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.destiny-card { min-height: 132px; display: grid; align-content: start; gap: 4px; padding: 9px; border: 1px solid rgba(173, 132, 67, .3); background: linear-gradient(160deg, rgba(69, 48, 28, .78), rgba(11, 16, 14, .96)); }
.destiny-card > i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #a94732; border-radius: 50%; color: #e8c16c; font: normal 700 12px var(--font-display); }
.destiny-card h4 { margin: 0; color: #ead49d; font: 700 12px var(--font-display); }
.destiny-card p { margin: 0; color: #afa288; font-size: 8px; line-height: 1.45; }
.destiny-card em { margin-top: auto; color: #806f56; font: normal 7px/1.3 monospace; overflow-wrap: anywhere; }
.destiny-card.is-changed { border-color: rgba(169, 71, 50, .62); background: linear-gradient(160deg, rgba(91, 36, 26, .76), rgba(12, 17, 14, .97)); }
.battle-highlight-card { display: grid; gap: 7px; }
.battle-highlight-card > strong { color: #e9bc63; }
.battle-highlight-timeline { display: grid; gap: 5px; margin: 2px 0; padding-left: 18px; }
.battle-highlight-timeline li::marker { color: #a94732; font-weight: 800; }
.battle-result-highlight { margin-top: 10px; text-align: left; }
@media (orientation: portrait), (max-width: 680px) {
  .destiny-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-rewrite-card, .destiny-collection, .battle-highlight-card { padding: 10px; }
}