:root {
  --tc-ink: #0c1216;
  --tc-panel: #171f25;
  --tc-panel-hi: #1f2930;
  --tc-panel-lo: #0a0f13;
  --tc-rail: #2a3540;
  --tc-brass-hi: #e7c987;
  --tc-brass: #b48a4a;
  --tc-brass-lo: #6a4d24;
  --tc-brass-deep: #3a2a14;
  --tc-good: #7eb070;
  --tc-good-deep: #3f6b3a;
  --tc-warn: #c9a14a;
  --tc-bad: #a93535;
  --tc-bad-hi: #e08a8a;
  --tc-paper: #fbf3dd;
  --tc-paper-2: #cfd8dc;
  --tc-steel: #7a8b96;
  --tc-steel-2: #5a6770;
  --tc-faction-blue: #2d4a6b;
  --tc-faction-red: #7a1f1f;
  --tc-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --tc-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --tc-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --tc-grad-panel: linear-gradient(180deg, #232d35 0%, #141b21 100%);
  --tc-grad-panel-2: linear-gradient(180deg, #1d262d 0%, #0d1418 100%);
  --tc-grad-tab-on: linear-gradient(180deg, #2c3a44 0%, #182127 100%);
  --tc-grad-tab-off: linear-gradient(180deg, #1a232a 0%, #0d1418 100%);
  --tc-grad-brass: linear-gradient(180deg, #e7c987 0%, #b48a4a 48%, #8a6530 100%);
  --tc-shadow-panel: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.55);
  --tc-bevel: inset 0 1px 0 rgba(231,201,135,0.35), inset 0 -1px 0 rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.6);
}

* {
  box-sizing: border-box;
  scrollbar-color: rgba(180, 138, 74, 0.82) rgba(10, 15, 19, 0.95);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
}

*::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #080c0f 0%, #131a1f 100%);
  border: 1px solid #000;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tc-brass-hi) 0%, var(--tc-brass) 46%, var(--tc-brass-lo) 100%);
  border: 2px solid #080c0f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.55);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f0d99d 0%, var(--tc-brass) 58%, #7a592a 100%);
}

*::-webkit-scrollbar-corner {
  background: #080c0f;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--tc-ink);
  color: var(--tc-paper);
  font-family: var(--tc-font-body);
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

input[type="text"],
input[type="search"],
input:not([type]),
textarea,
[contenteditable] {
  cursor: url("./assets/cursors/cursor-caret.png") 16 16, text;
}

.fatal-error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--tc-ink);
  color: var(--tc-bad-hi);
  font-family: var(--tc-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tc-auth-root,
.tc-lobby-root,
.login-screen,
.lobby-screen {
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
}

.login-screen,
.lobby-screen {
  position: relative;
  overflow: hidden;
  background: #050709;
  color: var(--tc-paper);
}

.loading-screen {
  display: grid;
  place-items: center;
}

.loading-card {
  width: min(480px, calc(100vw - 48px));
}

.login-atlas {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background-image:
    linear-gradient(180deg, rgba(5,7,9,0.08), rgba(5,7,9,0.22) 44%, rgba(5,7,9,0.78) 100%),
    radial-gradient(ellipse at 50% 16%, rgba(30,46,57,0.5), transparent 48%),
    url("./assets/login/login-background.png");
  background-size: cover;
  background-position: center;
}

.login-compass {
  position: absolute;
  right: 12.4%;
  top: 15.5%;
  width: 154px;
  height: 154px;
  object-fit: contain;
  opacity: 0.42;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.72));
  pointer-events: none;
}

.login-brand {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

.login-brand h1 {
  margin: 0;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000, 0 0 30px rgba(231,201,135,0.25);
}

.login-brand p {
  margin: 6px 0 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 12px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.login-rule {
  width: 380px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--tc-brass), transparent);
}

.auth-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 480px;
  transform: translate(-50%, -44%);
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel), 0 22px 70px rgba(0,0,0,0.62);
}

.auth-card-header {
  padding: 18px 22px 12px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #2a3540, #11181d);
  border-bottom: 1px solid #000;
}

.auth-form {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tc-field {
  display: grid;
  gap: 5px;
}

.tc-field span {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tc-field input,
.new-game-form input,
.composer input {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  color: var(--tc-paper);
  background: #0a0f13;
  border: 1px solid #000;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(231,201,135,0.12);
  outline: none;
  cursor: url("./assets/cursors/cursor-caret.png") 16 16, text;
}

.tc-field input:focus,
.new-game-form input:focus,
.composer input:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), 0 0 0 1px rgba(231,201,135,0.55);
}

.auth-row,
.oauth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auth-check input {
  accent-color: var(--tc-brass-hi);
}

.text-command {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-brass);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.text-command:hover {
  color: var(--tc-brass-hi);
}

.text-command.centered {
  text-align: center;
}

.auth-submit {
  margin-top: 6px;
  padding: 12px 22px;
  text-align: center;
  font-size: 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tc-steel-2);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2a3540, transparent);
}

.auth-divider span {
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.oauth-row button {
  flex: 1;
  min-height: 38px;
  position: relative;
  color: var(--tc-steel-2);
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.oauth-row span {
  position: absolute;
  top: 3px;
  right: 5px;
  color: var(--tc-warn);
  font-family: var(--tc-font-mono);
  font-size: 7px;
}

.auth-notice,
.auth-error,
.lobby-status,
.lobby-error {
  margin: 14px 22px 0;
  padding: 9px 11px;
  border: 1px solid rgba(231,201,135,0.24);
  background: rgba(0,0,0,0.24);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.auth-error,
.lobby-error {
  border-color: rgba(224,138,138,0.38);
  color: var(--tc-bad-hi);
}

.login-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  color: var(--tc-steel-2);
  text-align: center;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.lobby-screen {
  display: flex;
  flex-direction: column;
}

.lobby-header,
.lobby-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #000;
}

.lobby-header {
  padding: 14px 32px;
  background: var(--tc-grad-panel-2);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.18), 0 2px 0 rgba(0,0,0,0.7);
}

.lobby-wordmark {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lobby-spacer {
  flex: 1;
}

.lobby-identity {
  min-width: 350px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel);
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
}

.compact-avatar {
  width: 42px;
  height: 48px;
  min-height: 0;
}

.avatar-image,
.portrait-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lobby-toolbar {
  padding: 12px 32px;
  background: linear-gradient(180deg, #131a1f, #0a0f13);
}

.lobby-filter {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.12);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lobby-filter.active {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
  box-shadow: inset 0 -2px 0 rgba(231,201,135,0.55);
}

.lobby-filter span {
  font-family: var(--tc-font-mono);
  letter-spacing: 0.05em;
}

.new-game-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.new-game-form input {
  width: 210px;
  min-height: 32px;
}

.small-command {
  min-height: 30px;
  padding: 6px 12px;
  text-align: center;
  font-size: 10px;
}

/* Admin create-game commission sheet. The server supplies the groups, defaults,
   constraints, and descriptions; these rules only provide the lobby treatment. */
.create-game-sheet {
  inset: 20px 32px;
}

.create-game-form {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.create-game-header {
  flex: 0 0 auto;
}

.create-game-field-count {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.create-game-header .sheet-close {
  margin-left: auto;
}

.create-game-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(440px, 1fr) 320px;
}

.create-game-nav {
  min-height: 0;
  padding: 14px 10px;
  overflow: auto;
  background: linear-gradient(180deg, rgba(10,15,19,0.78), rgba(10,15,19,0.35));
  border-right: 1px solid #000;
}

.create-game-nav-item {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--tc-steel);
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.create-game-nav-item:hover {
  color: var(--tc-paper);
  background: rgba(73, 88, 98, 0.22);
}

.create-game-nav-item.active {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
  border-color: #000;
  box-shadow: inset 3px 0 0 var(--tc-brass-hi), inset 0 1px 0 rgba(231,201,135,0.16);
}

.create-game-nav-item em {
  min-width: 22px;
  color: var(--tc-steel-2);
  font-family: var(--tc-font-mono);
  font-style: normal;
  font-size: 9px;
  text-align: right;
}

.create-game-nav-note {
  margin: 16px 10px 0;
  padding-top: 14px;
  color: var(--tc-steel-2);
  border-top: 1px solid rgba(231,201,135,0.12);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  line-height: 1.5;
}

.create-game-content {
  min-width: 0;
  min-height: 0;
  padding: 20px 24px 28px;
  overflow: auto;
}

.create-game-section-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(231,201,135,0.16);
}

.create-game-section-head > div {
  flex: 1;
}

.create-game-section-head span {
  color: var(--tc-steel-2);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.create-game-section-head h2 {
  margin: 4px 0;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.create-game-section-head p,
.create-game-review p {
  margin: 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  line-height: 1.5;
}

.create-game-error {
  position: static;
  margin: 14px 0 0;
  text-align: left;
}

.create-game-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.create-game-field {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  background: linear-gradient(180deg, rgba(31,42,50,0.75), rgba(15,22,27,0.72));
  border: 1px solid #050708;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.create-game-field.invalid {
  border-color: var(--tc-bad);
  box-shadow: inset 0 0 0 1px rgba(186,70,56,0.28);
}

.create-game-field-label {
  min-height: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.create-game-field-label strong,
.create-game-field-copy strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.create-game-field-label em {
  color: var(--tc-brass);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.create-game-input-wrap input {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  color: var(--tc-brass-hi);
  background: #090d10;
  border: 1px solid #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.78), inset 0 0 0 1px rgba(231,201,135,0.1);
  font-family: var(--tc-font-mono);
  font-size: 13px;
  outline: none;
}

.create-game-input-wrap input:focus {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.78), 0 0 0 1px rgba(231,201,135,0.58);
}

.create-game-field-description,
.create-game-field-copy em {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-style: normal;
  line-height: 1.45;
}

.create-game-field-error {
  color: var(--tc-bad-hi);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  line-height: 1.35;
}

.create-game-checkbox {
  grid-column: 1 / -1;
  grid-template-columns: 22px 1fr;
  align-items: center;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.create-game-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.create-game-checkmark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: #090d10;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.16);
}

.create-game-checkbox input:checked + .create-game-checkmark::after {
  content: "✓";
  color: var(--tc-brass-hi);
  font-size: 15px;
  font-weight: 700;
}

.create-game-checkbox input:focus + .create-game-checkmark {
  outline: 1px solid var(--tc-brass-hi);
  outline-offset: 2px;
}

.create-game-field-copy {
  display: grid;
  gap: 3px;
}

.create-game-review {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  overflow: auto;
  background: linear-gradient(180deg, #131a1f, #090e11);
  border-left: 1px solid #000;
}

.create-game-review-name {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
}

.create-game-change-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 7px;
  border-top: 1px solid rgba(231,201,135,0.14);
  border-bottom: 1px solid rgba(231,201,135,0.14);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.create-game-change-summary strong {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 18px;
}

.create-game-change-list {
  display: grid;
  gap: 7px;
}

.create-game-change-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.create-game-change-list strong {
  color: var(--tc-paper-2);
  font-weight: 500;
}

.create-game-review-spacer {
  flex: 1;
}

@media (max-width: 1180px) {
  .create-game-body {
    grid-template-columns: 190px minmax(380px, 1fr) 270px;
  }
  .create-game-field-grid {
    grid-template-columns: 1fr;
  }
  .create-game-checkbox {
    grid-column: auto;
  }
}

@media (max-width: 880px) {
  .create-game-sheet {
    inset: 10px;
  }
  .create-game-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(360px, 1fr) auto;
    overflow: auto;
  }
  .create-game-nav {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid #000;
  }
  .create-game-nav-item {
    width: auto;
    flex: 0 0 auto;
  }
  .create-game-nav-note {
    display: none;
  }
  .create-game-content,
  .create-game-review {
    overflow: visible;
  }
  .create-game-review {
    border-top: 1px solid #000;
    border-left: 0;
  }
}

.game-list {
  flex: 1;
  min-height: 0;
  padding: 12px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}

.game-row {
  min-height: 112px;
  display: grid;
  grid-template-columns: 320px 1fr 420px;
  align-items: stretch;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel);
}

.game-row.concluded {
  opacity: 0.75;
}

.game-row-skeleton {
  pointer-events: none;
}

.skeleton-bar {
  display: block;
  height: 10px;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(122,139,150,0.12), rgba(231,201,135,0.16), rgba(122,139,150,0.12));
  background-size: 220% 100%;
  border: 1px solid rgba(0,0,0,0.55);
  animation: tc-skeleton 1.35s ease-in-out infinite;
}

.skeleton-bar.short { width: 104px; height: 18px; }
.skeleton-bar.title { width: 220px; height: 20px; margin-top: 10px; }
.skeleton-bar.medium { width: 160px; margin-top: 10px; }
.skeleton-bar.label { width: 64px; height: 9px; }
.skeleton-bar.value { width: 44px; height: 18px; margin-top: 8px; }
.service-copy .skeleton-bar.title { width: 180px; height: 14px; }
.service-copy .skeleton-bar.medium { width: 132px; height: 10px; }
.skeleton-crest {
  border-style: solid;
  background: linear-gradient(135deg, rgba(122,139,150,0.14), rgba(231,201,135,0.12));
}

@keyframes tc-skeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.game-main,
.game-stats,
.game-service {
  padding: 14px 18px;
}

.game-main {
  background: var(--tc-grad-panel-2);
  border-right: 1px solid #000;
}

.game-main h2 {
  margin: 8px 0 0;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
}

.game-created,
.service-copy em,
.service-copy span {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.game-created {
  margin-top: 8px;
  color: var(--tc-steel-2);
  font-size: 9px;
}

.game-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: center;
}

.game-stats span {
  display: block;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.game-stats strong {
  display: block;
  margin-top: 3px;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 22px;
}

.game-service {
  display: grid;
  grid-template-columns: 56px 1fr 150px;
  gap: 14px;
  align-items: center;
  background: linear-gradient(180deg, #161e24, #0a0f13);
  border-left: 1px solid #000;
}

.service-crest,
.service-empty {
  width: 56px;
  height: 70px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12) 0 46%, rgba(0,0,0,0.18) 46% 54%, rgba(0,0,0,0.32) 54% 100%),
    var(--nation-color, #596f4f);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(251,243,221,0.16), inset 0 -10px 18px rgba(0,0,0,0.18);
}

.service-crest img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.14)) drop-shadow(0 2px 3px rgba(0,0,0,0.65));
}

.service-crest.large {
  width: 76px;
  height: 92px;
}

.service-crest.founding {
  width: 140px;
  height: 168px;
}

.service-empty {
  background: var(--tc-grad-tab-off);
  border-style: dashed;
  color: var(--tc-steel-2);
  font-family: var(--tc-font-display);
  font-size: 22px;
}

.service-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.service-copy em {
  display: block;
  margin-top: 3px;
  color: var(--tc-brass-hi);
  font-style: normal;
}

.join-sheet {
  position: absolute;
  inset: 32px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #1a232a 0%, #0c1216 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.3), 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(231,201,135,0.2);
}

.join-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--tc-grad-panel);
  border-bottom: 1px solid #000;
}

.join-stepper {
  display: flex;
  gap: 8px;
  color: var(--tc-steel-2);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.join-stepper button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 4px 8px;
  border: 1px solid #000;
  background: var(--tc-grad-tab-off);
}

.join-stepper button:hover,
.join-stepper .active {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
}

.join-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.join-nations,
.found-form {
  flex: 1;
  min-width: 0;
  padding: 18px;
  overflow: auto;
}

.join-list-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.join-list-head span {
  color: var(--tc-steel-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

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

.nation-choice {
  all: unset;
  position: relative;
  min-height: 86px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel);
}

.nation-choice.selected {
  outline: 2px solid var(--tc-brass-hi);
  outline-offset: -1px;
}

.nation-choice .service-crest {
  width: 52px;
  height: 64px;
}

.nation-choice-main strong,
.found-preview strong {
  display: block;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.nation-choice-main em {
  display: block;
  margin-top: 5px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-style: normal;
}

.nation-stamp {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  color: var(--tc-good);
  background: rgba(63,107,58,0.35);
  border: 1px solid rgba(63,107,58,0.8);
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nation-stamp.locked {
  color: var(--tc-bad-hi);
  background: rgba(122,31,31,0.4);
  border-color: rgba(122,31,31,0.85);
}

.join-dossier {
  width: 420px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  background: linear-gradient(180deg, #131a1f, #0a0f13);
  border-left: 1px solid #000;
}

.dossier-heading,
.picker-label {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.picker-label {
  margin-bottom: 6px;
  color: var(--tc-steel);
  font-size: 9px;
}

.dossier-title {
  display: flex;
  gap: 14px;
  align-items: center;
}

.dossier-title h3 {
  margin: 0;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
}

.dossier-title p {
  margin: 4px 0 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dossier-note {
  padding: 10px;
  color: var(--tc-paper-2);
  background: rgba(0,0,0,0.25);
  border: 1px solid #000;
  font-size: 12px;
  line-height: 1.55;
}

.join-role-box {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(63,107,58,0.18);
  border: 1px solid rgba(63,107,58,0.6);
}

.join-role-box > span {
  width: 8px;
  height: 8px;
  background: var(--tc-good);
  box-shadow: 0 0 6px var(--tc-good);
}

.join-role-box strong,
.join-role-box em {
  display: block;
}

.join-role-box strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.join-role-box em {
  margin-top: 2px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-style: normal;
}

.dossier-action {
  width: 100%;
  margin-top: auto;
  padding: 11px 12px;
  text-align: center;
}

.dossier-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.found-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.color-picker,
.crest-picker {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.color-picker button,
.crest-picker button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  height: 34px;
  background: var(--swatch);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.crest-picker {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.crest-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.crest-metal,
.crest-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crest-metal button,
.crest-pager button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 5px 8px;
  color: var(--tc-steel);
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crest-metal .selected,
.crest-metal button:hover,
.crest-pager button:hover:not(:disabled) {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
}

.crest-pager {
  margin-left: auto;
}

.crest-pager button:disabled {
  cursor: default;
  opacity: 0.45;
}

.crest-pager span {
  min-width: 48px;
  color: var(--tc-steel-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  text-align: center;
}

.crest-picker button {
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--tc-grad-tab-on);
}

.crest-picker img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.color-picker .selected,
.crest-picker .selected,
.enrollment-picker .selected {
  outline: 2px solid var(--tc-brass-hi);
  outline-offset: -1px;
}

.graphics-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.graphics-picker button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--tc-grad-tab-on);
  border: 1px solid #000;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.graphics-picker button.selected {
  outline: 2px solid var(--tc-brass-hi);
  outline-offset: -1px;
}

.graphics-picker img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}

.picker-sublabel {
  color: var(--tc-steel-2);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enrollment-picker {
  display: flex;
  gap: 8px;
}

.enrollment-picker button {
  all: unset;
  flex: 1;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 10px 12px;
  color: var(--tc-steel);
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.enrollment-picker .selected {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
}

.generated-code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(122,31,31,0.18);
  border: 1px solid rgba(122,31,31,0.5);
}

.generated-code strong {
  color: var(--tc-bad-hi);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.generated-code span {
  flex: 1;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.generated-code button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 3px 10px;
  color: var(--tc-steel);
  border: 1px solid #2a3540;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.found-preview {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 0;
}

.found-preview strong {
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}

.tc-shell {
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--tc-ink);
}

.resource-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 14px 8px 16px;
  background: var(--tc-grad-panel-2);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.18), 0 2px 0 rgba(0,0,0,0.7);
}

.resource-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 112px;
  max-width: 150px;
  overflow: hidden;
  container-type: inline-size;
}

.resource-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 28px;
}

.resource-image {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.16)) drop-shadow(0 1px 2px rgba(0,0,0,0.72));
}

.resource-value-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding-left: 33px;
}

.resource-value {
  font-family: var(--tc-font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--tc-paper);
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.resource-delta {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--tc-good);
  flex: 0 0 auto;
}

.resource-delta-neg,
.resource-delta.neg { color: var(--tc-bad-hi); }
.resource-delta-pos { color: var(--tc-good); }

.resource-label,
.micro-label {
  font-family: var(--tc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tc-steel);
}

.resource-label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  min-width: 0;
}

.resource-label-wrap {
  display: grid;
  grid-template-rows: auto 18px;
  min-width: 0;
  align-self: stretch;
}

.resource-flow-stack {
  display: grid;
  grid-template-rows: 9px 9px;
  align-items: start;
  min-height: 18px;
  line-height: 9px;
}

.resource-flow-stack:empty {
  display: block;
}

.resource-flow-stack .resource-delta {
  line-height: 9px;
}

/* If the item is narrow, drop the label; the icon's title attr still
   provides a tooltip and the image carries the meaning. */
@container (max-width: 72px) {
  .resource-item .resource-label { display: none; }
}

.resource-spacer { flex: 1 0 18px; }

.clock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 4px 10px;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel);
}

.clock-label {
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 600;
  color: var(--tc-steel);
  letter-spacing: 0.08em;
  text-transform: none;
}

.clock-time {
  font-family: var(--tc-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-brass-hi);
  letter-spacing: 0.05em;
}

.clock-turn {
  padding-left: 8px;
  border-left: 1px solid #000;
  font-family: var(--tc-font-mono);
  font-size: 12px;
  font-weight: 700;
}

.top-menu-button {
  all: unset;
  flex: 0 0 auto;
  padding: 6px 12px;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.16);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.top-menu-button:hover {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
}

.main-grid {
  min-height: 0;
  min-width: 0;
  display: grid;
  /* The rail column must fit its longest category name ("INTELLIGENCE") at the
     header's own font size — the rail clips horizontally, so anything narrower
     silently truncates the label instead of wrapping. */
  grid-template-columns: 80px minmax(0, 1fr) clamp(280px, 22vw, 330px);
}

.tab-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: linear-gradient(180deg, #131a1f 0%, #0a0f13 100%);
  border-right: 1px solid #000;
}

/* W-12: the rail is five named, accordion categories. The header word is
   always visible; expanding reveals that category's icons, with no per-item
   text (names surface on hover via .nav-flyout, built in app.js). Superseded
   the old .tab-separator between icon groups — the headers are structure
   enough on their own. */
.rail-category {
  display: flex;
  flex-direction: column;
}

.rail-category-header {
  all: unset;
  /* `all: unset` leaves this static, and the roll-up .badge is absolutely
     positioned — without this it would escape to the nearest positioned
     ancestor. Same trap as .wire-tab. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 2px;
  text-align: center;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: var(--tc-grad-tab-off);
  border-top: 1px solid rgba(231,201,135,0.12);
  border-bottom: 1px solid #000;
}

.rail-category.open .rail-category-header {
  background: var(--tc-grad-tab-on);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.16);
}

.rail-category-name {
  font-family: var(--tc-font-display);
  font-size: 7px;
  font-weight: 700;
  /* The rail is sized by its 48px icons, but the category names are the one
     thing that must never truncate — "INTELLIGENCE" overflowed and the rail's
     overflow-x: hidden clipped it to "NTELLIGENCE". Tight tracking plus the
     header's min-width below keeps the longest name on one line. */
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--tc-steel);
  line-height: 1.25;
}

.rail-category.open .rail-category-name,
.rail-category-header:hover .rail-category-name {
  color: var(--tc-brass-hi);
}

.rail-category-items {
  display: flex;
  flex-direction: column;
  /* Items span the category's full width so the icons line up with the header
     above them rather than sitting in a narrower column (Daniel, 2026-08-10). */
  align-items: stretch;
  gap: 2px;
  padding: 4px 0 8px;
}

/* Scoped to the rail: .nav-button is a fixed-width control elsewhere, and only
   the rail wants it to fill its category. `all: unset` drops box-sizing, so
   without border-box the 1px border would push it 2px past the header. */
.rail-category-items .nav-button {
  width: 100%;
  box-sizing: border-box;
}

.rail-category-empty {
  padding: 4px 6px 10px;
  max-width: 64px;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  line-height: 1.4;
  color: var(--tc-steel);
  text-align: center;
}

/* The hover flyout that names a rail icon. Mounted at the document body
   level (see navFlyoutEl() in app.js) and position: fixed, because .tab-rail
   clips absolutely-positioned descendants that poke out past its 72px
   column. Styled deliberately — this replaces the native `title` tooltip,
   it does not sit alongside it. */
.nav-flyout {
  position: fixed;
  z-index: 40;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: #0a0f13;
  border: 1px solid var(--tc-rail);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.nav-flyout[hidden] {
  display: none;
}

/* W-18: the resource-bar ledger flyout — where a top-bar number comes from.
   Same body-level / position:fixed treatment as .nav-flyout, and the same
   reasoning: styled and fast rather than the native `title` attribute.
   `pointer-events: none` is deliberate — this is a read-only hover surface,
   never a target itself, so it can never trap the pointer (moving off the
   resource icon always dismisses it). No new colour tokens: the ledger reuses
   --tc-good/--tc-bad-hi (already the resource-delta convention) and
   --tc-steel/--tc-brass-hi (already the muted/emphasis convention). */
.resource-flyout {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  max-width: 300px;
  padding: 8px 10px;
  background: #0a0f13;
  border: 1px solid var(--tc-rail);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.resource-flyout[hidden] {
  display: none;
}

.resource-ledger-title {
  font-family: var(--tc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  font-weight: 600;
  color: var(--tc-brass-hi);
  margin-bottom: 6px;
}

.resource-ledger-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 220px;
  overflow-y: auto;
}

.resource-ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.resource-ledger-name {
  color: var(--tc-paper-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PT-05: manpower/horses list two numbers per province — per-turn income and
   the contribution to the max pool — so those ledgers lay out as a table with
   named columns rather than a single right-aligned amount. */
.resource-ledger-row-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 78px;
  gap: 10px;
  align-items: baseline;
}

.resource-ledger-row-2col .resource-ledger-amount {
  text-align: right;
}

.resource-ledger-colhead {
  color: var(--tc-steel, #8b97a3);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.resource-ledger-head {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 3px;
}

.resource-ledger-row-summary .resource-ledger-name,
.resource-ledger-row-empty .resource-ledger-name {
  color: var(--tc-steel);
  font-style: italic;
}

.resource-ledger-amount {
  font-weight: 700;
  flex: 0 0 auto;
  color: var(--tc-paper-2);
}

.resource-ledger-pos { color: var(--tc-good); }
.resource-ledger-neg { color: var(--tc-bad-hi); }

.resource-ledger-footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--tc-rail);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.resource-ledger-footer-row .resource-ledger-name {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  color: var(--tc-steel);
}

.nav-button {
  all: unset;
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.18);
}

.nav-button.active {
  background: var(--tc-grad-tab-on);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.4), inset 0 0 0 1px rgba(231,201,135,0.18);
}

.nav-button:hover {
  filter: brightness(1.12);
}

.nav-image {
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.14)) drop-shadow(0 2px 3px rgba(0,0,0,0.65));
  transition: transform 80ms ease, filter 80ms ease, opacity 80ms ease;
}

.nav-button.active .nav-image {
  transform: translateY(-1px);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.18)) drop-shadow(0 0 7px rgba(231,201,135,0.24)) drop-shadow(0 2px 3px rgba(0,0,0,0.72));
}

.nav-button:hover .nav-image {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.18)) drop-shadow(0 0 6px rgba(231,201,135,0.2)) drop-shadow(0 2px 3px rgba(0,0,0,0.72));
}

.badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  border-radius: 9px;
  background: linear-gradient(180deg, #a93535, #4a0f0f);
  border: 1px solid #000;
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-weight: 700;
}

.viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 35% 40%, rgba(45,74,107,0.24), transparent 40%),
    radial-gradient(ellipse at 72% 54%, rgba(180,138,74,0.08), transparent 34%),
    #0a1217;
}

.terrain-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(231,201,135,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(231,201,135,0.03) 1px, transparent 1px),
    radial-gradient(circle at 50% 44%, rgba(125,138,100,0.08), transparent 36%),
    linear-gradient(180deg, #0e1c25 0%, #081116 100%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.terrain-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
}

.terrain-canvas.dragging {
  cursor: url("./assets/cursors/cursor-drag.png") 32 32, grabbing;
}

.terrain-canvas.operational-order-mode {
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, crosshair;
}

/* Hovering a 3D province structure (StructureLayer) — it is clickable. */
.terrain-canvas.structure-hover {
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
}

.map-live .terrain-placeholder {
  background: #0a1217;
}

.map-live .viewport-center {
  display: none;
}

.viewport-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.viewport-mark {
  min-width: 360px;
  padding: 18px 24px;
  text-align: center;
  background: rgba(10,15,19,0.72);
  border: 1px solid rgba(231,201,135,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 34px rgba(0,0,0,0.42);
}

.viewport-mark strong {
  display: block;
  font-family: var(--tc-font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tc-brass-hi);
}

.viewport-mark span {
  display: block;
  margin-top: 8px;
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tc-steel);
}

.overlay-chips {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overlay-chip {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 108px;
  padding: 4px 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.overlay-chip.active {
  background: var(--tc-grad-tab-on);
  color: var(--tc-brass-hi);
}

.overlay-chip.disabled {
  cursor: default;
  opacity: 0.42;
  color: var(--tc-steel-2);
}

.chip-box {
  width: 8px;
  height: 8px;
  border: 1px solid var(--tc-brass-hi);
  background: transparent;
}

.overlay-chip.active .chip-box { background: var(--tc-brass-hi); }

.strategic-map-label {
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  transform-origin: center;
  transition: opacity 180ms ease-out;
  will-change: opacity;
}

.strategic-map-label > span {
  display: block;
}

.strategic-map-label-nation > span {
  transform: scale(var(--nation-label-scale, 1));
  font-family: var(--tc-font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 232, 202, 0.92);
  text-shadow:
    -2px -2px 2px rgba(8, 12, 14, 0.92),
    2px -2px 2px rgba(8, 12, 14, 0.92),
    -2px 2px 2px rgba(8, 12, 14, 0.92),
    2px 2px 2px rgba(8, 12, 14, 0.92),
    0 3px 7px rgba(0, 0, 0, 0.88);
}

.strategic-map-label-province > span {
  font-family: var(--tc-font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(235, 226, 204, 0.9);
  text-shadow:
    -1px -1px 1px rgba(5, 8, 10, 0.95),
    1px -1px 1px rgba(5, 8, 10, 0.95),
    -1px 1px 1px rgba(5, 8, 10, 0.95),
    1px 1px 1px rgba(5, 8, 10, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

/*
 * S-25: province names over the survey chart. Province geography is never
 * fogged (S-13a), so these labels sit on vellum — sepia ink with a paper-
 * coloured halo instead of cream on a dark one, which is what a name printed
 * on a chart looks like rather than a UI label laid over it.
 */
.strategic-map-label-province.strategic-map-label-charted > span {
  color: rgba(74, 52, 32, 0.94);
  text-shadow:
    -1px -1px 1px rgba(243, 234, 214, 0.95),
    1px -1px 1px rgba(243, 234, 214, 0.95),
    -1px 1px 1px rgba(243, 234, 214, 0.95),
    1px 1px 1px rgba(243, 234, 214, 0.95),
    0 2px 4px rgba(216, 200, 170, 0.85);
}

.operational-overlay-chips {
  z-index: 6;
}

.operational-projection-control {
  display: grid;
  gap: 5px;
  min-width: 178px;
  padding: 8px 10px 9px;
  background: linear-gradient(180deg, rgba(32, 38, 40, 0.95), rgba(13, 17, 18, 0.95));
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 232, 166, 0.08);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.operational-projection-control output {
  color: var(--tc-brass-hi);
}

.operational-projection-control input[type="range"] {
  width: 100%;
  accent-color: var(--tc-brass-hi);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.operational-side-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: var(--operational-bottom-bar-inset, 0px);
  width: 320px;
  /* Navigation must remain readable while the map renderer's loading/failure
     veil (z-index 8) covers the canvas beneath it. */
  z-index: 9;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(23,31,37,0.97), rgba(10,15,19,0.97));
  border-right: 1px solid #000;
  box-shadow: 4px 0 18px rgba(0,0,0,0.5);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
}
.operational-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--tc-grad-tab-on);
  border-bottom: 1px solid #000;
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.operational-side-panel-close {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(231,201,135,0.4);
  background: rgba(0,0,0,0.4);
  color: var(--tc-paper);
  font-size: 14px;
  line-height: 1;
}
.operational-side-panel-close:hover { background: rgba(231,201,135,0.18); }
.operational-side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.operational-side-panel-empty {
  padding: 18px 12px;
  color: var(--tc-steel);
  font-style: italic;
  font-size: 11px;
}
.operational-placement-hint {
  padding: 8px 12px;
  background: rgba(231,201,135,0.12);
  border-top: 1px solid rgba(231,201,135,0.3);
  font-size: 10px;
  color: var(--tc-paper-2);
}

.operational-nav-button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(231,201,135,0.5);
  background: rgba(0,0,0,0.35);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.operational-nav-button img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.operational-nav-button:hover { background: rgba(231,201,135,0.18); }
.operational-nav-button.active {
  background: rgba(231,201,135,0.28);
  border-color: rgba(231,201,135,0.9);
}
.operational-divisions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.operational-division-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(122,139,150,0.18);
}
.operational-division-row:last-child {
  border-bottom: none;
}
.operational-division-head {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
}
.operational-division-crest {
  width: 24px;
  height: 24px;
  background: var(--nation-color, #555);
  border: 1px solid rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.operational-division-crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.operational-division-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.operational-division-name strong {
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--tc-paper);
}
.operational-division-name em {
  font-style: normal;
  font-size: 10px;
  color: var(--tc-steel);
}
.operational-division-mp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--tc-paper-2);
}
.operational-division-mp-bar {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(0,0,0,0.7);
}
.operational-division-mp-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pct, 0%);
  background: var(--nation-color, #888);
}
/* Why the supply overlay drew nothing, said where the toggle is. */
.operational-division-supply-note {
  margin-top: 4px;
  color: #c9a86a;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  line-height: 1.35;
}

.operational-division-supply {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  padding: 4px 8px;
  border: 1px solid rgba(231,201,135,0.55);
  background: rgba(0,0,0,0.35);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.operational-division-supply:hover {
  background: rgba(231,201,135,0.15);
}
.operational-division-supply.active {
  background: rgba(231,201,135,0.28);
  border-color: rgba(231,201,135,0.85);
}

.operational-disengagement-status {
  margin-top: 7px;
  color: #d8c58d;
  font-size: 11px;
  line-height: 1.35;
}

.operational-division-placement {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.operational-placement-summary {
  font-size: 10px;
  color: var(--tc-paper-2);
}
.operational-placement-summary strong { color: var(--tc-paper); }
.operational-placement-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.operational-placement-empty {
  font-size: 10px;
  color: var(--tc-steel);
  font-style: italic;
}
.operational-placement-button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  padding: 3px 7px;
  border: 1px solid rgba(122,139,150,0.5);
  background: rgba(0,0,0,0.35);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}
.operational-placement-button:hover { background: rgba(231,201,135,0.15); }
.operational-placement-button.operational-placement-target {
  background: rgba(231,201,135,0.3);
  border-color: rgba(231,201,135,0.9);
  color: var(--tc-paper);
}

.operational-unit-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.operational-unit-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}
.operational-unit-card.operational-placement-target {
  border-color: rgba(231,201,135,0.9);
  background: linear-gradient(180deg, rgba(231,201,135,0.18), rgba(0,0,0,0.35));
}
.operational-unit-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.6);
  overflow: hidden;
}
.operational-unit-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.operational-unit-card-icon.hub-icon {
  font-size: 22px;
  color: var(--tc-paper);
}
.operational-unit-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.operational-unit-card-name {
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--tc-paper);
}
.operational-unit-card-type {
  font-size: 10px;
  color: var(--tc-steel);
}
.operational-unit-card-stat {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-paper-2);
}
.operational-unit-card-button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  padding: 4px 9px;
  border: 1px solid rgba(231,201,135,0.55);
  background: rgba(0,0,0,0.4);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.operational-unit-card-button:hover { background: rgba(231,201,135,0.18); }
.operational-unit-card-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* These cards only render while the asset is still unplaced, so the label is
   unconditional — the point is that a hub and an airbase read as things you
   must deploy, not as passive division stats (playtest 2026-08-10). */
.operational-placement-hint.rejected {
  border-color: var(--tc-bad);
  background: rgba(163, 54, 54, 0.22);
  color: var(--tc-bad-hi);
}

.operational-unit-card-unplaced {
  margin-top: 2px;
  /* -hi, not --tc-bad: #a93535 is a border/fill red and unreadable at 8px on
     this panel. */
  color: var(--tc-bad-hi);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.operational-bar-warning {
  padding: 1px 6px;
  border: 1px solid var(--tc-bad);
  background: rgba(163, 54, 54, 0.22);
  color: var(--tc-bad-hi);
  font-weight: 700;
}

.operational-unit-card-clickable {
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  grid-template-columns: 48px 1fr;
}
.operational-unit-card-clickable:hover {
  border-color: rgba(231,201,135,0.7);
  background: linear-gradient(180deg, rgba(231,201,135,0.12), rgba(0,0,0,0.35));
}

.operational-context-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  z-index: 7;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  background: linear-gradient(180deg, rgba(23,31,37,0.97), rgba(10,15,19,0.97));
  border-top: 1px solid #000;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.55);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  overflow: hidden;
}
.operational-context-panel-inner {
  display: grid;
  grid-template-columns: 160px 1fr;
  width: min(960px, 100%);
  margin: 0 auto;
  height: 100%;
}
.operational-context-panel-inner.single {
  grid-template-columns: 1fr;
  width: min(800px, 100%);
}
.operational-context-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
  background: rgba(0,0,0,0.25);
  border-right: 1px solid rgba(0,0,0,0.6);
}
.operational-context-card {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.6);
  font-size: 10px;
  letter-spacing: 0.05em;
}
.operational-context-card.selected {
  border-color: rgba(231,201,135,0.9);
  background: rgba(231,201,135,0.18);
}
.operational-context-card img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
/* PT-17: the two numbers that say whether a hub is doing its job, on the card
   itself — it used to carry nothing but the words "Supply Hub". */
.operational-context-card-stats {
  margin-left: auto;
  color: var(--tc-brass-hi, #e7c987);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  line-height: 1.25;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.operational-context-detail {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  overflow: hidden;
}
.operational-context-detail-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
}
.operational-context-detail-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.operational-context-detail-title {
  font-family: var(--tc-font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-paper);
}
.operational-context-detail-subtitle {
  font-size: 10px;
  color: var(--tc-steel);
}
.operational-context-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, auto));
  gap: 8px;
  align-self: center;
}
.operational-context-detail-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.6);
}
.operational-context-detail-stats span {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-steel);
}
.operational-context-detail-stats strong {
  font-family: var(--tc-font-display);
  font-size: 12px;
  color: var(--tc-paper);
}
.operational-stat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  margin: 0;
}
.operational-stat-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  line-height: 1.5;
}
.operational-stat-list dt {
  color: var(--tc-steel);
}
.operational-stat-list dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tc-paper);
}
.operational-context-detail-actions {
  display: flex;
  gap: 8px;
  align-self: center;
}
.operational-context-action {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(231,201,135,0.55);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.operational-context-action:hover:not([disabled]) { background: rgba(231,201,135,0.2); }
.operational-context-action.active,
.operational-context-action[aria-pressed="true"] {
  background: var(--tc-grad-tab-on);
  border-color: var(--tc-brass-hi);
  color: var(--tc-brass-hi);
  box-shadow: inset 0 0 0 1px rgba(255, 225, 147, 0.22), 0 0 10px rgba(201, 161, 74, 0.22);
}
/* Fixed 5x2 grid of uniformly-sized action buttons that fills the right
   column's expanded body and scales with window width. Adding/removing actions
   never reflows the bar — empty slots are placeholders. */
.operational-context-detail-actions.grid-5x2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.operational-context-detail-actions.grid-5x2 .operational-context-action {
  padding: 4px 6px;
  justify-content: center;
  min-width: 0;
}
.operational-context-detail-actions.grid-5x2 .operational-context-action span {
  text-align: center;
  line-height: 1.2;
}
.operational-context-action[disabled] {
  cursor: default;
  opacity: 0.35;
  border-color: rgba(231,201,135,0.25);
}
.operational-context-action.placeholder {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}
.operational-context-action img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
.operational-context-close {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  align-self: start;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--tc-paper);
  background: rgba(0,0,0,0.35);
  border-left: 1px solid rgba(0,0,0,0.6);
}
.operational-context-close:hover { background: rgba(231,201,135,0.18); }

.map-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 200px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(23,31,37,0.95), rgba(10,15,19,0.95));
  border: 1px solid #000;
  box-shadow: var(--tc-shadow-panel);
}

.legend-ramp {
  height: 10px;
  margin: 6px 0 4px;
  border: 1px solid #000;
  background: linear-gradient(90deg, #7a1f1f 0%, #c9a14a 50%, #7eb070 100%);
}

.legend-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  color: var(--tc-steel);
}

.sheet {
  position: absolute;
  inset: clamp(12px, 3vw, 32px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #1a232a 0%, #0c1216 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.3), 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(231,201,135,0.2);
}

.sheet-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: var(--tc-grad-panel);
  border-bottom: 1px solid #000;
}

.ribbon {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 16px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  background: linear-gradient(180deg, #c9a14a 0%, #8a6530 60%, #3a2a14 100%);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.55);
}

.sheet-meta {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-steel);
  letter-spacing: 0.1em;
}

/* The nation's invite code, readable only by its own members (the roster
   endpoint is membership-gated) — the founder generated it once in the lobby
   and needs it back to invite the next player. */
.roster-invite-code strong {
  color: var(--tc-brass-hi);
  letter-spacing: 0.16em;
}

.sheet-close {
  all: unset;
  margin-left: auto;
  padding: 4px 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  border: 1px solid var(--tc-rail);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sheet-close:hover { color: var(--tc-brass-hi); }

.sheet-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.signup-layout,
.diplomacy-layout,
.overreach-layout {
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1fr);
}

.signup-layout {
  grid-template-columns: repeat(2, minmax(300px, 1fr));
}

.designer-layout {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.sheet-column {
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.sheet-column:first-child { border-right: 1px solid #000; }

.section-heading {
  margin-bottom: 10px;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--tc-brass-hi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cabinet-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
}

.cabinet-card > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.cabinet-card.you {
  background: linear-gradient(90deg, rgba(231,201,135,0.18), rgba(0,0,0,0.08));
}

.portrait-tile {
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(180deg, #2a3540, #11181d);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.25);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  overflow: hidden;
}

.portrait-tile.ai {
  background: repeating-linear-gradient(45deg, #2a1010 0 4px, #4a1818 4px 8px);
}

.portrait-tile.compact {
  width: 34px;
  height: 40px;
  font-size: 12px;
}

.portrait-tile.large {
  width: 64px;
  height: 78px;
  font-size: 20px;
}

.role-label {
  font-family: var(--tc-font-display);
  font-size: 9px;
  color: var(--tc-steel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.person-name {
  margin-top: 2px;
  font-family: var(--tc-font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-paper);
  letter-spacing: 0.04em;
}

.profile-link {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  box-sizing: border-box;
}

.profile-link:hover {
  color: var(--tc-brass-hi);
  text-shadow: 0 0 8px rgba(231,201,135,0.22);
}

.profile-link:focus-visible {
  outline: 1px solid var(--tc-brass-hi);
  outline-offset: 2px;
}

.officer-name {
  font-size: 11px;
  color: var(--tc-paper);
}

.status-line {
  margin-top: 3px;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.officer-table {
  display: grid;
  gap: 0;
}

.officer-row {
  display: grid;
  grid-template-columns: 100px 1.25fr 1.55fr 80px 92px;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border-left: 3px solid var(--tc-steel-2);
}

.officer-group + .officer-group {
  margin-top: 16px;
}

.section-heading-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mini-assign-button {
  all: unset;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
  padding: 4px 8px;
  color: var(--tc-steel);
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.12);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mini-assign-button:hover {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
}

.cabinet-assign {
  margin-left: auto;
  flex: 0 0 auto;
}

.officer-row-compact {
  grid-template-columns: 1.25fr 1.55fr 80px 92px;
}

.officer-row.header {
  min-height: auto;
  border-left: 0;
  border-bottom: 1px solid var(--tc-rail);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.officer-row.assigned { border-left-color: var(--tc-good); }
.officer-row:nth-child(odd):not(.header) { background: rgba(0,0,0,0.16); }

.mono {
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.division-table {
  display: grid;
  min-width: 860px;
}

.division-entry {
  border-bottom: 1px solid rgba(122,139,150,0.14);
}

.division-row {
  display: grid;
  grid-template-columns: 54px minmax(180px, 1.25fr) minmax(130px, 0.8fr) minmax(150px, 0.85fr) minmax(130px, 0.75fr) minmax(130px, 0.75fr) minmax(130px, 0.75fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
}

.division-row.header {
  min-height: 30px;
  padding-left: 10px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.division-row:nth-child(odd):not(.header) {
  background: rgba(0,0,0,0.16);
}

.division-row:not(.header):hover,
.division-entry.expanded > .division-row {
  background: linear-gradient(180deg, rgba(231,201,135,0.16), rgba(180,138,74,0.07));
  box-shadow: inset 3px 0 0 var(--tc-brass);
}

.order-icon,
.division-panel-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0 48%, rgba(0,0,0,0.24) 49% 100%),
    var(--nation-color, #667266);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: var(--tc-bevel);
}

.order-icon img,
.division-panel-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}

.metric-cell {
  min-width: 0;
}

/* W-2: entrenchment has no strategic-tier implementation yet (roadmap S-07).
   Reuses the muted treatment established at .division-panel .division-
   battalion-row span/em (steel / mono / 10px) rather than a real-looking
   0/100 meter. */
.metric-pending {
  color: var(--tc-steel);
}

.division-row-unknown {
  color: var(--tc-steel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.order-battalion-panel {
  margin: 0 10px 10px 64px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.8);
  border-left: 3px solid rgba(180,138,74,0.65);
}

.order-battalion-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.order-battalion-list {
  display: grid;
  gap: 5px;
}

.order-battalion-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.9fr) minmax(130px, 0.75fr) minmax(130px, 0.75fr);
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(122,139,150,0.12);
}

.order-battalion-row strong,
.order-battalion-row span {
  display: block;
}

.order-battalion-row strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order-battalion-row span {
  margin-top: 2px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.strength-meter {
  height: 7px;
  overflow: hidden;
  background: rgba(0,0,0,0.55);
  border: 1px solid #000;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}

.strength-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tc-good-deep), var(--tc-good));
}

.division-panel {
  height: min(156px, 30vh);
  min-height: 120px;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(300px, 1fr);
  grid-template-rows: 60px 1fr;
  background: var(--tc-grad-panel-2);
  border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.18);
  overflow: hidden;
}

.division-panel-head {
  min-height: 0;
  padding: 7px 14px 5px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(120px, auto);
  gap: 12px;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
}

.division-panel-icon {
  width: 48px;
  height: 48px;
}

.division-panel-icon img {
  width: 38px;
  height: 38px;
}

.division-panel-title strong {
  display: block;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.division-panel-title span {
  display: block;
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.division-move-status {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

/* S-23: explicit Strategic movement from both division surfaces. The picker
   occupies the tray's existing right-hand detail well; in the Order of Battle
   it spans the expanded row below the battalion summary. */
.strategic-move-controls {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.division-command-controls {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.strategic-move-picker {
  min-width: 0;
  padding: 8px 10px;
  background: rgba(8, 12, 18, 0.82);
  border: 1px solid rgba(180, 138, 74, 0.55);
  color: var(--tc-paper);
}

.division-panel > .strategic-move-picker {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 8px 12px 10px 0;
  overflow: auto;
}

.order-battalion-panel > .strategic-move-picker {
  grid-column: 1 / -1;
}

.strategic-move-picker > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.strategic-move-picker > header strong,
.strategic-move-picker > header span {
  display: block;
}

.strategic-move-picker > header strong {
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.strategic-move-picker > header span,
.strategic-move-empty {
  margin-top: 2px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.strategic-move-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

.strategic-move-destination {
  min-width: 0;
  padding: 7px 8px;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(122, 139, 150, 0.26);
  color: var(--tc-paper);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.strategic-move-destination:hover {
  border-color: rgba(207, 174, 100, 0.65);
  background: rgba(207, 174, 100, 0.11);
}

.strategic-move-destination strong,
.strategic-move-destination span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strategic-move-destination strong {
  font-family: var(--tc-font-display);
  font-size: 10px;
  white-space: nowrap;
}

.strategic-move-destination span {
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.strategic-move-destination.warn {
  border-color: rgba(194, 112, 79, 0.5);
}

.reorganization-picker .strategic-move-destinations:has(.reorganization-confirmation) {
  display: block;
}

.reorganization-confirmation {
  color: var(--tc-paper-2);
  font-family: var(--tc-font-body);
  font-size: 11px;
  line-height: 1.45;
}

.reorganization-confirmation > strong {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reorganization-confirmation p {
  margin: 6px 0 0;
}

.reorganization-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.strategic-move-destination .strategic-move-warning {
  color: #d98b68;
}

.division-metric-row {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1;
  grid-row: 2;
  padding: 2px 14px 10px;
}

.division-intelligence-warning {
  padding: 18px 24px;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.division-metric {
  min-height: 0;
  padding: 5px 7px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.9);
}

.division-metric span {
  display: block;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.division-metric strong {
  display: block;
  margin-top: 3px;
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.division-metric .strength-meter {
  width: 100%;
  margin-top: 5px;
}

/* W-2: pending-mechanic variant — no meter, no invented zero. */
.division-metric-pending {
  margin-top: 5px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.battalion-list-wrap,
.division-detail-well {
  min-width: 0;
  min-height: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 8px 12px 10px 0;
  display: flex;
  flex-direction: column;
}

.division-detail-well {
  padding: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.72);
  background: rgba(0, 0, 0, 0.08);
}

.division-detail-well > .battalion-list { padding: 6px 8px 8px; }

.division-detail-tabs {
  display: flex;
  flex: 0 0 26px;
  border-bottom: 1px solid var(--tc-panel-lo);
}

.division-detail-tabs button {
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--tc-panel-lo);
  color: var(--tc-steel);
  background: rgba(0, 0, 0, 0.18);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.division-detail-tabs button.active {
  color: var(--tc-brass-hi);
  background: rgba(180, 138, 74, 0.12);
  box-shadow: inset 0 -2px var(--tc-brass);
}

.division-detail-heading {
  flex: 0 0 26px;
  padding: 7px 10px 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tc-panel-lo);
}

.battalion-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  align-content: start;
  align-items: start;
  gap: 6px;
}

/* PT-38: was `min(390px, 56vh)` — over half the screen for one table, and the
   map above it paid for every pixel. The table already scrolls
   (`.quartermaster-table-wrap`), so the panel does not need to be tall enough
   to show all of it at once. */
.quartermaster-report-pending {
  opacity: 0.55;
}

.quartermaster-report {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 6px 8px 8px;
}

.quartermaster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.quartermaster-head p {
  margin: 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.quartermaster-head strong {
  color: var(--tc-paper);
}

.quartermaster-table-wrap {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--tc-panel-lo);
}

.quartermaster-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.quartermaster-table th,
.quartermaster-table td {
  padding: 6px 8px;
  border-right: 1px solid var(--tc-panel-lo);
  border-bottom: 1px solid var(--tc-panel-lo);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

.quartermaster-table th:first-child,
.quartermaster-table td:first-child,
.quartermaster-table th:nth-child(8),
.quartermaster-table td:nth-child(8) {
  text-align: left;
}

.quartermaster-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tc-panel);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quartermaster-table tbody th {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  letter-spacing: 0.06em;
}

.quartermaster-table td small {
  display: block;
  margin-top: 3px;
  font-size: 8px;
}

.quartermaster-supply-blocked {
  color: var(--tc-warn);
}

.quartermaster-model-mix {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.quartermaster-model {
  padding: 2px 5px;
  background: var(--tc-panel-lo);
  border: 1px solid var(--tc-steel-2);
}

.quartermaster-model.next-swap {
  border-bottom-style: dotted;
  color: var(--tc-steel);
}

.quartermaster-model.next-swap small {
  color: var(--tc-steel);
  font-style: italic;
}

/* W-8 (RULED 2026-08-01, with screenshot): portrait gallery replacing the
   old cramped battalion rows. Each tile is a native <details> — see the
   comment on battalionPortrait() in division-panel.js for why expansion is
   done this way instead of app.js click-wiring. */
.battalion-portrait {
  min-width: 0;
  padding: 4px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.9);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.battalion-portrait[open] {
  grid-column: 1 / -1;
}

.battalion-portrait-summary {
  display: grid;
  justify-items: center;
  gap: 3px;
  list-style: none;
}

.battalion-portrait-summary::-webkit-details-marker,
.battalion-portrait-summary::marker {
  display: none;
  content: "";
}

.battalion-portrait-art {
  display: block;
  width: 30px;
  height: 30px;
}

.battalion-portrait-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.battalion-portrait-name {
  max-width: 100%;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.battalion-portrait-meters {
  display: grid;
  gap: 2px;
  width: 100%;
}

.battalion-portrait-meter {
  height: 4px;
}

.battalion-portrait-detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(122,139,150,0.16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.battalion-portrait-detail-name {
  grid-column: 1 / -1;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-log-sheet .sheet-header {
  border-bottom: 1px solid #000;
}

.event-log-toolbar {
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: end;
  background: rgba(0,0,0,0.16);
  border-bottom: 1px solid #000;
}

.event-log-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 180px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.event-log-toolbar select {
  min-height: 30px;
  background: #0d1418;
  border: 1px solid #000;
  color: var(--tc-paper);
  font: 11px var(--tc-font-mono);
}

.event-log-error {
  margin: 10px 14px 0;
}

.event-log-body {
  flex: 1;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.event-turn {
  margin-bottom: 10px;
  background: rgba(0,0,0,0.16);
  border: 1px solid #000;
}

.event-turn summary {
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.event-turn-list {
  display: grid;
  gap: 1px;
}

.event-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,0.025);
  border-top: 1px solid rgba(122,139,150,0.12);
}

.event-nation-tile {
  width: 18px;
  height: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.28)),
    var(--nation-color, #667266);
  border: 1px solid #000;
}

.event-row strong {
  display: block;
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.event-row span {
  display: block;
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.province-panel {
  position: absolute;
  top: clamp(12px, 3vw, 32px);
  bottom: clamp(12px, 3vw, 32px);
  z-index: 30;
  width: clamp(320px, 40vw, 560px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: linear-gradient(180deg, #1a232a 0%, #0c1216 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.3), 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(231,201,135,0.2);
}

.province-panel-left {
  left: clamp(12px, 3vw, 32px);
}

.province-panel-right {
  right: clamp(12px, 3vw, 32px);
}

.province-panel-unknown {
  bottom: auto;
  width: clamp(320px, 34vw, 460px);
}

.province-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--tc-grad-panel);
  border-bottom: 1px solid #000;
}

.province-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.province-title {
  font-family: var(--tc-font-display);
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 700;
  color: var(--tc-paper);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.province-panel-body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.province-nation-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.nation-crest-tile.province-crest,
.province-neutral-crest {
  width: 64px;
  height: 64px;
}

.province-neutral-crest {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #303943 0 46%, #1b2228 46% 100%);
  border: 1px solid #000;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 20px;
  font-weight: 700;
}

.province-zone-orders {
  margin-bottom: 12px;
  padding: 10px;
  background: rgba(10, 15, 18, 0.72);
  border: 1px solid rgba(122, 139, 150, 0.25);
  box-shadow: inset 0 1px 0 rgba(231, 201, 135, 0.07);
}

.province-zone-orders.loading {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.province-zone-orders-heading,
.province-zone-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.province-zone-orders-heading {
  margin-bottom: 7px;
}

.province-zone-orders-heading small,
.province-zone-orders p {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.province-zone-order-row {
  min-height: 29px;
  padding: 5px 0;
  border-top: 1px solid rgba(122, 139, 150, 0.12);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.province-zone-order-toggle {
  min-width: 76px;
  padding: 4px 8px;
  border: 1px solid rgba(122, 139, 150, 0.35);
  background: rgba(42, 74, 55, 0.58);
  color: #b9d8bd;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.province-zone-order-toggle.no-go {
  border-color: rgba(160, 74, 65, 0.62);
  background: rgba(102, 38, 34, 0.68);
  color: #f0b4aa;
}

.province-zone-order-toggle:disabled {
  cursor: default;
  opacity: 0.72;
}

.province-zone-orders p {
  margin: 7px 0 0;
  line-height: 1.35;
}

.province-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.province-meta-grid div,
.province-tab-bar {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.province-tab {
  all: unset;
  flex: 1;
  text-align: center;
  padding: 6px 0;
  background: var(--tc-grad-tab-off);
  border: 1px solid rgba(122,139,150,0.2);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.province-tab.active {
  background: var(--tc-grad-tab-on);
  color: var(--tc-brass-hi);
  border-color: rgba(212,175,55,0.4);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.25);
}

.province-tab:hover:not(.active) {
  filter: brightness(1.1);
}

.province-subpanel {
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.province-division-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.province-division-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(122,139,150,0.12);
}

.province-division-crest {
  width: 24px;
  height: 24px;
  background: var(--nation-color, #888);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.province-division-crest img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.province-division-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.province-division-name-btn {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.province-division-name-btn:hover {
  text-decoration: underline;
}

.province-division-name {
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.province-division-nation {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.province-division-strength {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 10px;
  color: var(--tc-paper-2);
}

.province-division-meter {
  width: 60px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(0,0,0,0.4);
}

.province-division-meter span {
  display: block;
  height: 100%;
  background: #596f4f;
}

/* W-15: fog withholds strength server-side; say so instead of printing an
   absent field as a real-looking 0/0. */
.province-division-unknown {
  color: var(--tc-steel);
}

.province-meta-grid div {
  padding: 8px 10px;
}

.province-meta-grid span {
  display: block;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.province-meta-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 12px;
}

.province-subpanel {
  margin-top: 10px;
  padding: 12px;
}

.placeholder-list {
  display: grid;
  gap: 6px;
}

.placeholder-list div {
  padding: 7px 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(122,139,150,0.15);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.province-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
  gap: 10px;
  align-items: start;
}

.province-slot-card {
  position: relative;
  min-width: 0;
  height: 186px;
  box-sizing: border-box;
  padding: 10px;
  display: grid;
  grid-template-rows: 50px 34px 18px 24px 28px;
  justify-items: center;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(122,139,150,0.18);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.06);
  text-align: center;
}

.province-slot-card.occupied {
  border-color: rgba(180,138,74,0.45);
}

.province-slot-icon {
  all: unset;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(39,52,61,0.9), rgba(17,24,29,0.9));
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: var(--tc-bevel);
}

.province-slot-add {
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.province-slot-add:disabled {
  cursor: url("./assets/cursors/cursor-select.png") 8 3, default;
}

.province-slot-add:not(:disabled):hover,
.province-slot-add.active {
  border-color: rgba(231,201,135,0.75);
  background: linear-gradient(180deg, rgba(70,55,28,0.95), rgba(22,24,22,0.95));
}

.province-slot-target {
  border-color: rgba(180,138,74,0.5);
  background:
    radial-gradient(circle at 50% 38%, rgba(231,201,135,0.16), transparent 58%),
    linear-gradient(180deg, rgba(70,55,28,0.88), rgba(16,18,18,0.95));
}

.province-slot-target img {
  opacity: 0.66;
  filter: saturate(0.78) brightness(0.82);
}

.province-slot-target:hover:not(:disabled) {
  border-color: rgba(231,201,135,0.85);
}

.province-slot-target.unavailable,
.province-slot-target:disabled {
  opacity: 0.42;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, default;
}

.province-slot-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.province-slot-icon span {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 24px;
  line-height: 1;
}

.province-slot-card strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 34px;
  overflow: hidden;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}

.slot-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  min-height: 18px;
  box-sizing: border-box;
  padding: 2px 5px;
  border: 1px solid transparent;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  line-height: 1.2;
  text-transform: uppercase;
}

.slot-feature.has-feature {
  color: var(--tc-brass-hi);
  border-color: rgba(180,138,74,0.45);
}

.slot-production {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 24px;
  overflow: hidden;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  line-height: 1.25;
}

.province-slot-card .small-command {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0 6px;
  justify-self: stretch;
  font-size: 8px;
  letter-spacing: 0.10em;
}

.province-slot-card.constructing {
  border-color: rgba(180,138,74,0.52);
  background: linear-gradient(180deg, rgba(180,138,74,0.10), rgba(0,0,0,0.20));
}

.province-slot-construction {
  opacity: 0.88;
  filter: saturate(0.9);
}

.slot-construction-cancel {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  overflow: hidden;
  border: 1px solid rgba(180,138,74,0.62);
  background: rgba(0,0,0,0.28);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.slot-construction-cancel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--construction-progress, 0%);
  background: linear-gradient(90deg, rgba(180,138,74,0.62), rgba(231,201,135,0.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.slot-construction-cancel span {
  position: relative;
  z-index: 1;
}

.province-control-bar {
  position: relative;
  margin-bottom: 10px;
  min-height: 24px;
  overflow: hidden;
  border: 1px solid rgba(180,138,74,0.62);
  background: rgba(0,0,0,0.28);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

.province-control-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--control-progress, 0%);
  background: linear-gradient(90deg, rgba(180,138,74,0.62), rgba(231,201,135,0.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.province-control-bar span {
  position: relative;
  z-index: 1;
}

.build-picker {
  position: absolute;
  top: 72px;
  z-index: 44;
  width: min(328px, calc(100vw - 36px));
  max-height: min(520px, calc(100% - 92px));
  padding: 10px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(231,201,135,0.08), transparent 34%),
    linear-gradient(180deg, rgba(24,31,36,0.99), rgba(8,12,18,0.99));
  border: 1px solid rgba(180,138,74,0.68);
  box-shadow: 0 18px 42px rgba(0,0,0,0.72), inset 0 1px 0 rgba(231,201,135,0.16);
}

.province-panel-left .build-picker {
  left: calc(100% + 10px);
  transform-origin: left center;
  animation: province-build-picker-open-right 150ms cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

.province-panel-right .build-picker {
  right: calc(100% + 10px);
  transform-origin: right center;
  animation: province-build-picker-open-left 150ms cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

.province-panel-left .build-picker.closing {
  animation: province-build-picker-close-right 120ms ease-in both;
}

.province-panel-right .build-picker.closing {
  animation: province-build-picker-close-left 120ms ease-in both;
}

.build-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: inherit;
  overflow-y: auto;
  padding-right: 2px;
}

.build-choice {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  min-height: 48px;
  padding: 8px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.24));
  border: 1px solid rgba(180,138,74,0.35);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.build-choice:hover {
  border-color: rgba(231,201,135,0.72);
  background: linear-gradient(180deg, rgba(180,138,74,0.18), rgba(0,0,0,0.28));
}

.build-choice span,
.build-choice small {
  display: block;
}

.build-choice img {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.build-choice span {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.build-choice small {
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

@keyframes province-build-picker-open-right {
  from { opacity: 0; transform: translateX(-12px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes province-build-picker-open-left {
  from { opacity: 0; transform: translateX(12px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes province-build-picker-close-right {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(-10px) scale(0.985); }
}

@keyframes province-build-picker-close-left {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(10px) scale(0.985); }
}

.resource-feature-list {
  display: grid;
  gap: 6px;
}

.resource-feature-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(122,139,150,0.15);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.resource-feature-row strong {
  color: var(--tc-brass-hi);
}

.industry-sheet {
  width: min(1040px, calc(100vw - 430px));
}

.construction-sheet {
  width: min(920px, calc(100vw - 430px));
}

/* S-26: Agent Network ledger, province controls, and the shared coverage rule. */
.agent-network-sheet {
  width: min(980px, calc(100vw - 430px));
}

.agent-network-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(360px, 1.45fr);
}

.agent-network-layout > aside,
.agent-network-layout > main {
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.agent-network-layout > aside {
  border-right: 1px solid #000;
  background: rgba(0, 0, 0, 0.12);
}

.agent-pool-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.24);
}

.agent-pool-ledger > div {
  padding: 10px;
  border-right: 1px solid rgba(122, 139, 150, 0.16);
  border-bottom: 1px solid rgba(122, 139, 150, 0.16);
}

.agent-pool-ledger span,
.agent-pool-ledger strong {
  display: block;
}

.agent-pool-ledger span {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.agent-pool-ledger strong {
  margin-top: 3px;
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 16px;
}

.agent-pool-ledger p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.agent-dispatch-card {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #000;
  background: rgba(255, 255, 255, 0.025);
}

.agent-dispatch-card label {
  display: grid;
  gap: 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.agent-dispatch-card select {
  width: 100%;
  padding: 7px 8px;
  color: var(--tc-paper);
  background: #111a20;
  border: 1px solid rgba(180, 138, 74, 0.38);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.agent-dispatch-card p {
  margin: 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  line-height: 1.4;
}

.agent-dispatch-card .primary-button {
  border: 1px solid #090b0c;
  color: #17120b;
  background: linear-gradient(180deg, #d1ad68, #92703d);
  box-shadow: inset 0 1px rgba(255, 246, 211, 0.42), 0 1px 2px rgba(0, 0, 0, 0.62);
  font-family: var(--tc-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(255, 239, 190, 0.25);
}

.agent-dispatch-card .primary-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #e0bd76, #a27c42);
}

.agent-dispatch-card .primary-button:disabled {
  color: #74716a;
  background: linear-gradient(180deg, #353a3d, #24282a);
  box-shadow: none;
}

.agent-permission-note {
  margin-top: 10px;
  padding: 7px 9px;
  border-left: 2px solid var(--tc-steel-2);
  color: var(--tc-steel);
  background: rgba(0, 0, 0, 0.18);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.agent-permission-note.ready {
  border-left-color: var(--tc-good);
  color: #b9d8bd;
}

.agent-posting-list,
.agent-posting-missions,
.province-agent-steppers {
  display: grid;
  gap: 8px;
}

.agent-posting-card {
  padding: 12px;
  border: 1px solid #000;
  background: linear-gradient(180deg, rgba(35, 45, 52, 0.92), rgba(15, 22, 27, 0.92));
  box-shadow: inset 0 1px 0 rgba(231, 201, 135, 0.08);
}

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

.agent-posting-card > header strong {
  display: block;
  margin-top: 2px;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intelligence-gauge {
  margin: 12px 0 18px;
  padding: 10px;
  border: 1px solid rgba(180, 138, 74, 0.28);
  background: rgba(8, 12, 15, 0.58);
}

.intelligence-gauge.compact {
  margin-bottom: 15px;
}

.intelligence-gauge-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.intelligence-gauge-head strong {
  color: var(--tc-brass-hi);
  text-align: right;
}

.intelligence-rule {
  position: relative;
  height: 8px;
  margin: 13px 0 17px;
  border: 1px solid #24180a;
  background: #080d10;
  box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(231, 201, 135, 0.1);
}

.intelligence-rule-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--intelligence-fill);
  background: linear-gradient(90deg, var(--tc-brass-lo), var(--tc-brass-hi));
  box-shadow: 0 0 8px rgba(231, 201, 135, 0.24);
}

.intelligence-notch {
  position: absolute;
  top: -5px;
  left: var(--notch);
  height: 18px;
  transform: translateX(-50%);
}

.intelligence-notch i {
  display: block;
  width: 1px;
  height: 13px;
  background: var(--tc-brass-hi);
  box-shadow: 0 0 2px #000;
}

.intelligence-notch b {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 7px;
  font-weight: 400;
}

.intelligence-gauge-foot {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  line-height: 1.35;
}

.agent-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid rgba(122, 139, 150, 0.18);
  background: rgba(255, 255, 255, 0.025);
}

.agent-stepper-copy strong,
.agent-stepper-copy span {
  display: block;
}

.agent-stepper-copy strong {
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-stepper-copy span {
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 8px;
}

.agent-stepper-control {
  display: grid;
  grid-template-columns: 26px 30px 26px;
  align-items: stretch;
}

.agent-stepper-control button,
.agent-stepper-control output {
  min-height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(180, 138, 74, 0.35);
  background: #11191e;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
}

.agent-stepper-control button {
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.agent-stepper-control button:disabled {
  cursor: default;
  opacity: 0.34;
}

.province-intelligence {
  padding: 10px;
}

.province-detections {
  margin-top: 12px;
  padding: 9px;
  border-left: 2px solid var(--tc-bad);
  background: rgba(105, 30, 30, 0.12);
}

.province-detections p {
  margin: 0;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.agent-map-marker {
  position: relative;
  width: 1px;
  height: 1px;
  pointer-events: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
}

.agent-map-mission {
  position: absolute;
  left: var(--agent-x);
  top: 25px;
  width: 43px;
  height: 49px;
  padding: 2px 3px 9px;
  border: 1px solid rgba(12, 10, 7, 0.95);
  border-radius: 45% 45% 7px 7px;
  background: radial-gradient(circle at 50% 28%, rgba(183, 141, 70, 0.35), rgba(17, 17, 15, 0.9) 72%);
  box-shadow: inset 0 0 0 1px rgba(224, 190, 116, 0.18), 0 2px 5px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.agent-map-mission img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.agent-map-mission.in-transit {
  opacity: 0.46;
}

.agent-map-mission:hover,
.agent-map-mission:focus-visible { border-color: var(--tc-brass-hi); transform: translateY(-2px); }

.agent-map-count {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.agent-map-detected {
  position: absolute;
  left: -16px;
  top: -52px;
  min-width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #090b0c;
  border-radius: 50%;
  color: #fff1eb;
  background: var(--tc-bad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-family: var(--tc-font-mono);
  font-weight: 700;
  cursor: pointer;
}

.agent-map-detected b { position: absolute; left: 23px; bottom: -3px; font-size: 8px; }

@media (max-width: 920px) {
  .agent-network-layout {
    grid-template-columns: 1fr;
  }

  .agent-network-layout > aside {
    border-right: 0;
    border-bottom: 1px solid #000;
  }
}

.construction-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
  overflow: auto;
}

.construction-main {
  min-height: min-content;
}

.construction-start-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: start;
}

.construction-building-column,
.construction-sites-column {
  min-width: 0;
}

.construction-sites-column {
  min-height: 0;
}

.construction-building-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.construction-building-card {
  min-height: 86px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.construction-building-card.active {
  border-color: var(--tc-brass);
  background: rgba(60, 50, 30, 0.72);
}

.construction-building-card small {
  display: block;
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.construction-start-list,
.construction-projects {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.construction-start-list {
  max-height: min(310px, 34vh);
  overflow: auto;
  padding-right: 4px;
}

.construction-site-row {
  width: 100%;
  min-height: 48px;
  border-color: rgba(180,138,74,0.30);
  color: inherit;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.construction-site-row span span {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

@media (max-width: 820px) {
  .construction-start-columns {
    grid-template-columns: 1fr;
  }

  .construction-start-list {
    max-height: none;
  }
}

.construction-project-row {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.construction-project-row .production-line-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.construction-allocation-row {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr);
  gap: 12px;
  align-items: center;
}

.construction-progress-copy {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  text-align: right;
}

.industry-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(260px, 35fr);
  gap: 12px;
  padding: 14px;
}

.panel-error {
  margin: 10px 14px 0;
  padding: 9px 10px;
  border: 1px solid rgba(191,75,75,0.55);
  color: var(--tc-bad-hi);
  background: rgba(70,14,14,0.22);
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.industry-production,
.industry-stockpile {
  min-height: 0;
  background: rgba(0,0,0,0.2);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
  padding: 12px;
}

.industry-toolbar {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.tc-select,
.factory-input {
  min-width: 0;
  background: #0b1014;
  border: 1px solid rgba(180,138,74,0.4);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  padding: 7px 8px;
}

.tc-select {
  flex: 1 1 auto;
}

.factory-input {
  width: 72px;
}

.production-line-list,
.stockpile-list {
  display: grid;
  gap: 8px;
}

.industry-construction {
  margin-top: 16px;
}

.industry-slot-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  max-height: min(36vh, 380px);
  overflow: auto;
  padding-right: 4px;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
}

.industry-province-slots {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(122,139,150,0.16);
}

.industry-province-title {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.industry-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(122,139,150,0.14);
}

.industry-slot-row strong,
.industry-slot-row span {
  display: block;
}

.industry-slot-row strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.industry-slot-row span {
  margin-top: 2px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.industry-build-picker {
  grid-column: 1 / -1;
}

.production-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(122,139,150,0.18);
}

.production-line-main strong,
.production-line-main span {
  display: block;
}

.production-line-main strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.production-line-main span {
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.line-order-controls {
  display: flex;
  gap: 4px;
}

.icon-command {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
}

.icon-command:disabled,
.dark-button:disabled,
.tc-select:disabled,
.factory-input:disabled {
  cursor: default;
  opacity: 0.45;
  filter: grayscale(0.4);
}

.icon-command.danger {
  color: var(--tc-bad-hi);
}

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

.industry-summary div,
.stockpile-row {
  padding: 8px 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(122,139,150,0.15);
}

.industry-summary span,
.stockpile-row span {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.industry-summary strong,
.stockpile-row strong {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
}

.stockpile-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

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

.brief-block,
.dispatch-note {
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.brief-block p,
.battle-card p {
  margin: 7px 0 0;
  color: var(--tc-paper-2);
  font-size: 12px;
  line-height: 1.5;
}

.brief-title,
.battle-title,
.designer-title {
  font-family: var(--tc-font-display);
  font-weight: 700;
  color: var(--tc-paper);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brief-title,
.battle-title {
  font-size: 12px;
}

.designer-title {
  margin-top: 2px;
  font-size: 18px;
}

.battle-where {
  margin-top: 3px;
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-steel);
  letter-spacing: 0.04em;
}

.battle-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.battle-map-button {
  all: unset;
  width: 26px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  border: 1px solid rgba(231,201,135,0.28);
  background: rgba(0,0,0,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.battle-map-button:hover {
  border-color: rgba(231,201,135,0.62);
  background: rgba(231,201,135,0.09);
}

.battle-map-button img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7));
}

.battle-card {
  margin-bottom: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(31,41,48,0.84), rgba(10,15,19,0.72));
  border: 1px solid #000;
  border-left: 3px solid var(--tc-good);
  box-shadow: var(--tc-shadow-panel);
}

.battle-card.urgent {
  border-left-color: var(--tc-bad-hi);
}

.battle-topline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.battle-clock {
  margin-left: auto;
  padding: 4px 7px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--tc-rail);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
}

.battle-clock span {
  display: block;
}

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

.slot-chip,
.template-card,
.order-card,
.order-button,
.brass-button,
.dark-button,
.battalion-tile {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  box-sizing: border-box;
}

.slot-chip {
  min-height: 46px;
  padding: 7px 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
  border-left: 3px solid var(--tc-steel-2);
}

.slot-chip.open {
  border-left-color: var(--tc-brass-hi);
  background: linear-gradient(180deg, rgba(180,138,74,0.2), rgba(0,0,0,0.18));
}

.slot-chip.urgent {
  border-left-color: var(--tc-bad-hi);
}

.slot-chip span,
.slot-chip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-chip span {
  font-family: var(--tc-font-display);
  font-size: 8px;
  color: var(--tc-steel);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.slot-chip strong {
  margin-top: 4px;
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.slot-ledger {
  margin-top: 12px;
  border-top: 1px solid var(--tc-rail);
}

.slot-ledger-row {
  display: grid;
  grid-template-columns: 1.15fr 1.2fr 74px;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(122,139,150,0.18);
}

.signup-my-battles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup-state-block {
  background: rgba(0,0,0,0.18);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.signup-state-title {
  padding: 9px 10px;
  background: var(--tc-grad-tab-on);
  border-bottom: 1px solid #000;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.signup-state-toggle {
  width: 100%;
  border: none;
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  text-align: left;
}
.signup-state-toggle:hover { background: linear-gradient(180deg, rgba(231,201,135,0.12), var(--tc-grad-tab-on)); }

.signup-timing-group + .signup-timing-group {
  border-top: 1px solid rgba(122,139,150,0.16);
}

.signup-expander {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.signup-expander strong {
  font-family: var(--tc-font-mono);
  font-size: 15px;
}

.signup-battle-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.signup-battle-card {
  padding: 10px;
  background: linear-gradient(180deg, rgba(31,41,48,0.84), rgba(10,15,19,0.72));
  border: 1px solid #000;
  border-left: 3px solid var(--tc-good);
  box-shadow: var(--tc-shadow-panel);
}

.signup-battle-card.urgent {
  border-left-color: var(--tc-bad-hi);
}

.signup-battle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

/* PT-09: the commander card and its step-down, as one cell of the signup grid.
   The button sits under the card rather than beside it so the grid's column
   widths are unchanged — this is an affordance that was missing, not a new
   column of information. */
.signup-command-card-wrap {
  display: grid;
  gap: 4px;
  align-content: start;
}
.signup-step-down {
  all: unset;
  padding: 3px 8px;
  border: 1px solid rgba(141, 47, 36, 0.9);
  background: rgba(141, 47, 36, 0.16);
  color: #e0a898;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.signup-step-down:hover {
  background: rgba(141, 47, 36, 0.3);
}

.signup-command-card,
.signup-location-card,
.signup-force-card,
.signup-status-card,
.signup-fact-card {
  min-height: 50px;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.24);
  border: 1px solid #000;
  color: var(--tc-paper);
  text-align: left;
}

.signup-command-card,
.signup-location-card,
.signup-force-card,
.signup-status-card,
.signup-button-card {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.signup-command-card,
.signup-location-card,
.signup-force-card,
.signup-status-card,
.signup-fact-card,
.signup-button-card {
  min-height: 50px;
  padding: 8px;
  box-sizing: border-box;
  color: var(--tc-paper);
  text-align: left;
}

.signup-command-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(231,201,135,0.08), rgba(0,0,0,0.2));
  border: 1px solid #000;
}

.signup-command-card strong,
.signup-location-card strong,
.signup-force-card strong,
.signup-status-card strong,
.signup-fact-card strong {
  display: block;
  margin-top: 4px;
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-weight: 700;
}

.signup-command-card > span:not(.portrait-tile),
.signup-location-card span,
.signup-force-card span,
.signup-status-card span,
.signup-fact-card span {
  display: block;
}

.signup-location-card,
.signup-force-card,
.signup-status-card,
.signup-button-card {
  box-sizing: border-box;
  background: rgba(0,0,0,0.24);
  border: 1px solid #000;
}

.signup-location-card:hover,
.signup-force-card:hover,
.signup-command-card:hover {
  border-color: rgba(231,201,135,0.45);
}

.signup-button-card {
  color: var(--tc-brass-hi);
  background: linear-gradient(180deg, rgba(180,138,74,0.2), rgba(0,0,0,0.18));
}

.signup-status-card {
  display: block;
  color: var(--tc-steel);
}

.nation-force-block {
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
}

.nation-force-block summary {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.nation-force-block summary strong,
.nation-force-block summary em {
  display: block;
}

.nation-force-block summary em {
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-style: normal;
}

.battle-force-crest {
  height: 42px;
}

.signup-command-card.signup-button-card {
  display: block;
}

.signup-info-panel {
  position: absolute;
  top: clamp(48px, 8vh, 72px);
  left: 50%;
  z-index: 40;
  width: min(760px, calc(100% - 32px));
  max-height: calc(100% - clamp(72px, 16vh, 144px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #1a232a 0%, #0c1216 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.3), 0 24px 70px rgba(0,0,0,0.78), 0 0 0 1px rgba(231,201,135,0.2);
}

.signup-info-body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.assignment-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.assignment-member {
  all: unset;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
  background: rgba(0,0,0,0.24);
  border: 1px solid #000;
  color: var(--tc-paper);
}

.assignment-member:hover {
  border-color: rgba(231,201,135,0.52);
  background: linear-gradient(180deg, rgba(231,201,135,0.08), rgba(0,0,0,0.24));
}

.assignment-member:disabled,
.assignment-member-disabled {
  position: relative;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, default;
  color: var(--tc-steel);
  opacity: 0.72;
}

.assignment-member:disabled:hover,
.assignment-member-disabled:hover {
  border-color: #000;
  background: rgba(0,0,0,0.24);
}

.assignment-disabled-note {
  grid-column: 1 / -1;
  padding-top: 4px;
  color: var(--tc-warn);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.assignment-member strong,
.assignment-member em {
  display: block;
}

.assignment-member strong {
  font-family: var(--tc-font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assignment-member em {
  margin-top: 3px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-style: normal;
}

.player-profile-card,
.commander-detail-card {
  padding: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
}

.player-profile-top {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: stretch;
}

.profile-portrait {
  width: 82px;
  height: 96px;
  font-size: 22px;
  background: linear-gradient(180deg, #3f6b3a 0%, #1a2218 100%);
  overflow: hidden;
}

.player-profile-main {
  align-self: center;
  min-width: 0;
}

.profile-name {
  font-family: var(--tc-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--tc-paper);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-role {
  margin-top: 7px;
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--tc-brass-hi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.profile-merit {
  margin-top: 9px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.profile-picker-block,
.rank-ladder {
  margin-top: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #131a1f 0%, #0a0f13 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.portrait-picker {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.portrait-picker button {
  all: unset;
  height: 58px;
  overflow: hidden;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
  border: 1px solid #000;
  background: var(--tc-grad-tab-off);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.12);
}

.portrait-picker button.selected {
  outline: 2px solid var(--tc-brass-hi);
  outline-offset: -2px;
}

.portrait-picker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-ladder-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.rank-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(122,139,150,0.15);
  color: var(--tc-steel);
}

.rank-row.earned {
  color: var(--tc-paper);
  border-color: rgba(231,201,135,0.32);
  background: linear-gradient(180deg, rgba(231,201,135,0.08), rgba(0,0,0,0.24));
}

.rank-row span,
.rank-row em {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-style: normal;
}

.rank-row strong {
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Career service record: one row per tour of duty. Chrome follows .rank-row so
   the two lists on the Career page read as one family. Sample rows are dimmed
   and tagged — they are placeholders until games can actually conclude. */
.service-record {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-tour {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(231,201,135,0.22);
}

.service-tour.sample {
  border-style: dashed;
  border-color: rgba(122,139,150,0.28);
  opacity: 0.72;
}

.service-tour-crest {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--nation-color, #596f4f);
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.25);
}

.service-tour-crest img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.service-tour-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.service-tour-copy strong {
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-paper);
}

.service-tour-copy span {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-steel);
}

.service-tour-copy em {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-style: normal;
  color: var(--tc-brass-hi);
}

.service-tour-sample {
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-steel);
  border: 1px solid rgba(122,139,150,0.4);
  padding: 0 3px;
}

.service-tour-turns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--tc-font-mono);
  line-height: 1.1;
}

.service-tour-turns strong { font-size: 12px; color: var(--tc-paper); }
.service-tour-turns span { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-steel); }

.service-tour-outcome {
  min-width: 72px;
  text-align: center;
  padding: 3px 6px;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  color: var(--tc-steel);
}

.service-tour-outcome.ongoing { color: var(--tc-brass-hi); }
.service-tour-outcome.victory { color: #7fbf7f; }
.service-tour-outcome.defeat { color: #c46a63; }

.profile-nation {
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: linear-gradient(180deg, #2a3540, #11181d);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.25);
}

.empty-profile-nation {
  justify-content: center;
  text-align: center;
  color: var(--tc-steel);
}

.nation-crest-tile.profile-crest {
  flex: 1;
  min-height: 62px;
}

.nation-crest-tile.profile-crest img {
  width: 74%;
  height: 74%;
}

.service-record {
  margin-top: 14px;
}

.service-record-list {
  height: 198px;
  overflow: auto;
  border: 1px solid #000;
  background: rgba(0,0,0,0.18);
}

.service-record-row {
  display: grid;
  grid-template-columns: 1fr 96px 76px;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(122,139,150,0.14);
}

.service-record-row strong,
.service-record-row span {
  display: block;
}

.service-record-row strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-record-row span {
  margin-top: 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.record-result {
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.record-result.victory {
  color: var(--tc-good);
}

.record-result.defeat {
  color: var(--tc-bad-hi);
}

.record-date {
  color: var(--tc-steel);
  text-align: right;
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.compact-stats {
  grid-template-columns: repeat(3, 1fr);
}

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

.force-list {
  display: grid;
  gap: 8px;
}

.force-row-card,
.battalion-detail {
  padding: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
}

.force-stats {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.battalion-detail summary {
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unit-line {
  margin-top: 7px;
  padding-left: 10px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.empty-list {
  padding: 12px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.8);
}

.nation-list {
  display: grid;
  gap: 8px;
}

.nation-row {
  display: grid;
  grid-template-columns: 48px 1fr 116px;
  gap: 10px;
  align-items: center;
  padding: 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
}

.nation-crest-tile {
  position: relative;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12) 0 46%, rgba(0,0,0,0.18) 46% 54%, rgba(0,0,0,0.32) 54% 100%),
    var(--nation-color);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(251,243,221,0.16), inset 0 -10px 18px rgba(0,0,0,0.18);
}

.nation-crest-tile img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.14)) drop-shadow(0 2px 3px rgba(0,0,0,0.65));
}

.nation-crest-tile.player-crest {
  flex: 1;
  height: auto;
  min-height: 44px;
}

.nation-crest-tile.player-crest img {
  width: 74%;
  height: 74%;
}

.nation-main {
  min-width: 0;
}

.nation-side {
  text-align: right;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nation-side span {
  display: block;
  margin-top: 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.relation-track {
  height: 5px;
  margin-top: 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid #000;
}

.relation-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tc-good-deep), var(--tc-good));
}

.relation-track.negative span {
  background: linear-gradient(90deg, #4a0f0f, var(--tc-bad-hi));
}

/* S-02 Overreach sheet */

.overreach-budget {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid #000;
}

.overreach-budget-points {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 66px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--tc-rail);
}

.overreach-budget-points strong {
  font-family: var(--tc-font-mono);
  font-size: 28px;
  line-height: 1;
  color: var(--tc-brass-hi);
}

.overreach-budget-points span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tc-steel);
}

.overreach-budget-meta {
  display: grid;
  gap: 4px;
}

.overreach-budget-meta div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.overreach-budget-meta span {
  color: var(--tc-steel);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}

.overreach-budget-meta strong {
  font-family: var(--tc-font-mono);
  color: var(--tc-paper-2);
}

.overreach-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tc-steel);
}

.overreach-hint.warn {
  color: var(--tc-warn);
}

.overreach-acting {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(201,161,74,0.10);
  border: 1px solid var(--tc-warn);
}

.overreach-acting-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tc-warn);
}

.overreach-acting-role {
  margin-top: 2px;
  font-family: var(--tc-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--tc-brass-hi);
}

.overreach-acting p {
  margin: 6px 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tc-paper-2);
}

.overreach-log {
  display: grid;
  gap: 8px;
  max-height: 100%;
  overflow-y: auto;
}

.overreach-log-row {
  padding: 8px 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid #000;
  border-left: 2px solid var(--tc-warn);
}

.overreach-log-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.overreach-log-who {
  font-family: var(--tc-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--tc-paper);
}

.overreach-log-cost {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-warn);
}

.overreach-log-action {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--tc-paper);
}

.overreach-log-what {
  margin-top: 3px;
  font-size: 11px;
  color: var(--tc-paper-2);
}

.overreach-log-what strong {
  color: var(--tc-brass-hi);
}

.overreach-log-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--tc-steel);
}

.order-stack {
  display: grid;
  gap: 8px;
}

.order-card {
  padding: 12px;
  background: linear-gradient(180deg, rgba(31,41,48,0.88), rgba(10,15,19,0.7));
  border: 1px solid #000;
  border-left: 3px solid var(--tc-brass);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* `all: unset` above strips the native disabled/pressed affordances, so both
   states have to be drawn back on. */
.order-card.active {
  border-left-color: var(--tc-warn);
  color: var(--tc-brass-hi);
  background: linear-gradient(180deg, rgba(201,161,74,0.22), rgba(10,15,19,0.7));
}

.order-card:disabled {
  border-left-color: var(--tc-steel-2);
  color: var(--tc-steel);
  cursor: not-allowed;
}

.designer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.division-template-designer .designer-rail {
  min-width: 0;
  gap: 10px;
}

.designer-new {
  width: 100%;
  margin-bottom: 10px;
  padding: 9px 10px;
  text-align: center;
}

.designer-template-group {
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.12);
}

.designer-template-group summary {
  padding: 8px 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: var(--tc-grad-tab-off);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.designer-template-list {
  max-height: 30vh;
  overflow: auto;
  padding: 8px;
}

.designer-empty-line,
.designer-empty-state {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.designer-editor {
  position: relative;
  min-width: 0;
}

.designer-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.designer-division-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #27343d, #11181d);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel);
}

.designer-division-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.designer-division-icon.picker-button {
  padding: 0;
}

.designer-title-button {
  all: unset;
  display: block;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.designer-name-form input {
  width: min(420px, 100%);
  padding: 7px 9px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--tc-brass);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.designer-status-line {
  margin-top: 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.designer-slot-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.designer-slot-heading span {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.designer-error {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(122,35,28,0.25);
  border: 1px solid rgba(180,68,56,0.8);
  color: var(--tc-bad-hi);
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.designer-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  grid-auto-rows: 82px;
  gap: 8px;
  margin-top: 8px;
}

/* PT-44: the picker unfolds from inside its slot, so every cell is a
   positioning context. The cell with the picker open is lifted above its
   neighbours; the grid itself never reflows. */
.designer-slot-cell {
  position: relative;
  min-width: 0;
}

.designer-slot-cell.picking {
  z-index: 40;
}

.designer-slot {
  width: 100%;
  height: 82px;
  padding: 7px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  background: linear-gradient(180deg, #27343d, #12191e);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.14);
  color: var(--tc-paper-2);
}

.designer-slot.clickable {
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.designer-slot:disabled {
  opacity: 0.45;
}

.designer-slot img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.designer-slot strong {
  color: inherit;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.designer-slot span {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.designer-empty-slot {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* PT-44: the slot picker, anchored to the slot it belongs to. It starts flush
   with the cell's top-left and grows down and right over its neighbours; the
   `align-right` modifier is set after layout for cells too near the right edge
   to open that way (see `anchorSlotPicker` in app.js). */
.designer-slot-picker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 41;
  width: max(100%, 232px);
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-shadow-panel);
}

.designer-slot-picker.align-right {
  left: auto;
  right: 0;
}

.designer-slot-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #000;
}

.designer-slot-picker-head strong {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.designer-slot-picker-head button {
  padding: 0 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.designer-slot-picker-head button:hover {
  color: var(--tc-brass-hi);
}

/* The list is the point: one row per battalion, read top to bottom. */
.designer-slot-picker .designer-battalion-list {
  padding: 6px;
  gap: 4px;
}

.designer-slot-picker .designer-battalion-list button {
  min-height: 42px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 7px;
  font-size: 9px;
}

.designer-slot-picker .designer-battalion-list img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.designer-slot-picker .designer-clear-slot {
  margin: 0 6px 6px;
}

/* The slot you opened stays visible behind its own picker's header row. */
.designer-slot.picking {
  outline: 1px solid var(--tc-brass-hi);
}

.designer-popover {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  width: min(520px, calc(100% - 28px));
  max-height: min(520px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-shadow-panel);
}

.designer-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #000;
}

.designer-popover-head strong {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.designer-popover-head button,
.designer-clear-slot {
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.designer-popover-head button {
  padding: 6px 9px;
  background: linear-gradient(180deg, #25313a, #11171c);
  border: 1px solid rgba(0,0,0,0.9);
  color: var(--tc-paper-2);
  box-shadow: var(--tc-bevel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.designer-popover-head button:hover {
  color: var(--tc-brass-hi);
  border-color: rgba(180,138,74,0.5);
}

.designer-icon-grid {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
  overflow: auto;
}

.designer-icon-grid button,
.designer-battalion-list button {
  min-height: 54px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.24);
  border: 1px solid #000;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.designer-icon-grid button.active,
.designer-battalion-list button.active {
  outline: 2px solid var(--tc-brass-hi);
}

.designer-icon-grid img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.designer-battalion-list {
  padding: 10px;
  display: grid;
  gap: 7px;
  overflow: auto;
}

.designer-battalion-list button {
  grid-template-columns: 42px minmax(0, 1fr);
  justify-items: start;
  gap: 10px;
  padding: 7px 9px;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.designer-battalion-list img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.designer-clear-slot {
  margin: 0 10px 10px;
  padding: 8px 10px;
}

.designer-footer {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.designer-footer button {
  padding: 8px 12px;
}

.designer-dirty-marker {
  color: rgba(231, 201, 135, 0.95);
  margin-left: 4px;
}

.designer-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.designer-modal {
  background: rgba(20, 24, 32, 0.98);
  border: 1px solid rgba(209, 164, 91, 0.5);
  border-radius: 4px;
  padding: 18px 20px;
  width: min(520px, 90%);
  max-height: 80%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.designer-modal-head strong {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.designer-modal-body {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(220, 215, 200, 0.9);
  overflow-y: auto;
}

.designer-modal-body p {
  margin: 0 0 10px;
}

.designer-modal-list {
  margin: 0;
  padding-left: 18px;
  max-height: 260px;
  overflow-y: auto;
}

.designer-modal-list li {
  padding: 2px 0;
}

.designer-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.battalion-template-designer .designer-rail {
  min-width: 0;
}

.battalion-template-list {
  max-height: calc(100% - 44px);
}

.battalion-template-card {
  grid-template-columns: 46px minmax(0, 1fr);
}

.battalion-template-card.active {
  border-color: rgba(209,164,91,0.75);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.25);
}

.battalion-template-card .template-card-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.battalion-template-card img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.battalion-designer-layout {
  grid-template-columns: minmax(230px, 0.34fr) minmax(560px, 1fr);
}

.battalion-designer-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  min-height: 100%;
}

.battalion-designer-main,
.battalion-designer-summary {
  min-width: 0;
}

.battalion-designer-main {
  container-type: inline-size;
}

.battalion-sprite img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.battalion-elements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

/* The two columns hold different numbers of units, so their tile areas differ
   in height — but their "Add unit" toolboxes must still line up, or the pair
   reads as two unrelated panels rather than one choice made twice. Stretch the
   tile area and let the toolbox sit on the floor of both columns. */
.battalion-element-section {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
}

@container (max-width: 520px) {
  .battalion-elements-grid {
    grid-template-columns: 1fr;
  }
}

/* PT-45: one portrait per unit in the battalion, and a toolbox under each
   column to add from. Same idiom as the Unit Designer's toolbox + slot grid,
   which is the point — a battalion and a unit are both composed, and they
   should not be composed two different ways. */
.battalion-element-count {
  margin-left: 8px;
  padding: 1px 6px;
  background: rgba(0,0,0,0.32);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.16);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0;
}

.battalion-element-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  min-height: 92px;
  overflow: auto;
  margin-top: 8px;
  padding: 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.08);
}

.battalion-element-tile,
.battalion-toolbox-unit {
  position: relative;
  width: 74px;
  min-height: 74px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 3px;
  background: linear-gradient(180deg, rgba(39,52,61,0.78), rgba(13,18,22,0.84));
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.14);
  color: var(--tc-paper-2);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.battalion-element-tile img,
.battalion-toolbox-unit img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.battalion-element-tile span,
.battalion-toolbox-unit span {
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.battalion-toolbox-unit em {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-style: normal;
}

.battalion-element-tile:hover:not(:disabled),
.battalion-toolbox-unit:hover:not(:disabled) {
  outline: 1px solid rgba(231,201,135,0.42);
}

/* The remove affordance stays hidden until the tile is hovered: a wall of
   little crosses reads as damage, not as a control. */
.battalion-tile-remove {
  position: absolute;
  top: 2px;
  right: 3px;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  opacity: 0;
}

.battalion-element-tile:hover:not(:disabled) .battalion-tile-remove {
  opacity: 1;
}

.battalion-element-tile:disabled,
.battalion-toolbox-unit:disabled,
.battalion-toolbox-unit.disabled {
  cursor: not-allowed;
  opacity: 0.36;
  filter: grayscale(1);
}

.battalion-toolbox-heading {
  margin-top: 10px;
}

.battalion-element-toolbox {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* PT-46: the size budget, stated where you are spending it. */
.battalion-unit-budget {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.battalion-unit-budget strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 13px;
}

.battalion-unit-budget.at-cap strong {
  color: var(--tc-brass-hi);
}

.battalion-unit-budget em {
  font-style: normal;
  opacity: 0.75;
}

.battalion-cap-note {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(231,201,135,0.1);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.28);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.battalion-designer-summary {
  padding: 12px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.08);
}

.battalion-stat-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0 14px;
}

.battalion-stat-card {
  padding: 10px;
  background: linear-gradient(180deg, rgba(39,52,61,0.72), rgba(10,15,19,0.74));
  border: 1px solid #000;
}

.battalion-stat-card span,
.battalion-demand-row span {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.battalion-stat-card strong {
  display: block;
  margin-top: 4px;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 15px;
}

.battalion-demand-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.battalion-demand-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.75);
}

.battalion-demand-row img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.battalion-demand-row strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.battalion-component-grid button {
  min-height: 74px;
  gap: 4px;
  padding: 7px;
}

.battalion-component-grid span {
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.template-card {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid #000;
  border-left: 3px solid var(--tc-steel-2);
}

.template-card-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #27343d, #11181d);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: var(--tc-bevel);
}

.template-card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.template-card.active {
  background: linear-gradient(90deg, rgba(231,201,135,0.18), rgba(0,0,0,0.08));
  border-left-color: var(--tc-brass-hi);
}

.template-card span {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unit-archetype-group {
  position: relative;
  margin-bottom: 8px;
}

.unit-archetype-card {
  margin-bottom: 4px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  user-select: none;
}

.unit-archetype-card:hover,
.unit-archetype-card:focus-visible {
  background: rgba(231,201,135,0.12);
  outline: 1px solid rgba(231,201,135,0.35);
}

.unit-archetype-name {
  display: inline-block;
  max-width: 100%;
}

.unit-archetype-name[data-edit-unit-archetype-name] {
  cursor: text;
}

.unit-archetype-name-input {
  width: min(210px, 100%);
  min-height: 26px;
  padding: 4px 6px;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unit-new-template {
  min-height: 28px;
  justify-content: center;
}

.unit-expand {
  width: 100%;
  min-height: 24px;
  margin-bottom: 4px;
}

.unit-template-children {
  display: grid;
  gap: 4px;
  margin: 0 0 8px 16px;
  padding-left: 10px;
  border-left: 1px solid rgba(180,138,74,0.34);
}

.unit-template-child {
  all: unset;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.85);
  color: var(--tc-paper-2);
}

.unit-template-child.active {
  background: rgba(231,201,135,0.14);
  color: var(--tc-brass-hi);
}

.unit-template-child span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unit-template-child em,
.component-bill-row em {
  flex: 0 0 auto;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-style: normal;
}

.template-count {
  justify-self: end;
}

.unit-template-pane-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 0.55fr);
  gap: 12px;
}

.component-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.component-pick {
  min-height: 96px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.12);
  color: var(--tc-paper-2);
}

.component-pick.active,
.component-pick:hover:not([disabled]) {
  background: rgba(231,201,135,0.13);
  outline: 1px solid rgba(231,201,135,0.42);
}

.component-pick img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.component-pick span {
  text-align: center;
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.component-stepper {
  cursor: default;
}

.stepper-row {
  display: grid;
  grid-template-columns: 24px 28px 24px;
  gap: 4px;
  align-items: center;
}

.stepper-row button {
  min-height: 24px;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  color: var(--tc-brass-hi);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.stepper-row strong {
  color: var(--tc-paper);
  text-align: center;
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.component-bill-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  padding: 5px 7px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.8);
}

.component-bill-row img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.component-bill-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-list {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.metric-list div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0,0,0,0.6);
}

.metric-list span {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.metric-list strong {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.designer-name-row,
.designer-mode-row,
.vehicle-field-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.designer-name-row .tc-input {
  min-width: min(340px, 100%);
}

.option-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 9px;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.option-pill.active {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
}

.option-pill input {
  accent-color: var(--tc-brass);
}

.designer-validation {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #000;
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.designer-validation.valid {
  color: var(--tc-good);
  background: rgba(46,86,44,0.18);
}

.designer-validation.invalid {
  color: var(--tc-bad-hi);
  background: rgba(122,35,28,0.18);
}

.unit-draft-footer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.unit-draft-footer-row .designer-validation,
.unit-draft-footer-row .designer-footer {
  margin-top: 0;
}

.unit-draft-actions {
  white-space: nowrap;
}

.unit-draft-head {
  margin-bottom: 10px;
}

.unit-designer-input {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--tc-paper-2);
  background: #0a0f13;
  border: 1px solid #000;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(231,201,135,0.12);
  outline: none;
  cursor: url("./assets/cursors/cursor-caret.png") 16 16, text;
  font-family: var(--tc-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.unit-designer-input:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), 0 0 0 1px rgba(231,201,135,0.55);
}

.unit-builder-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(220px, 300px);
  gap: 12px;
  align-items: stretch;
}

.unit-builder-stack,
.unit-toolbox-stack {
  display: grid;
  gap: 10px;
}

.unit-builder-stack {
  grid-template-rows: 430px 220px;
}

.unit-toolbox-stack {
  grid-template-rows: 430px 220px;
}

.unit-assembly-zone,
.unit-toolbox {
  min-width: 0;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(38,47,53,0.72), rgba(14,18,21,0.84)),
    rgba(0,0,0,0.25);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.12), inset 0 0 0 1px rgba(122,139,150,0.08);
}

.unit-assembly-zone {
  overflow: visible;
}

.unit-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.unit-mode-buttons {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(0,0,0,0.85);
}

.unit-mode-button {
  min-height: 26px;
  padding: 4px 8px;
  background: var(--tc-grad-tab-off);
  border: 1px solid rgba(0,0,0,0.9);
  color: var(--tc-steel);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.unit-mode-button.active,
.unit-mode-button:hover {
  color: var(--tc-brass-hi);
  background: var(--tc-grad-tab-on);
}

.unit-mode-buttons.readonly .unit-mode-button {
  cursor: default;
}

.unit-mode-buttons.readonly .unit-mode-button:not(.active) {
  opacity: 0.42;
}

.soldier-cutout-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(20px, 1fr));
  gap: 4px;
  min-height: 64px;
}

.soldier-cutout {
  position: relative;
  height: 64px;
  min-height: 64px;
  padding: 0;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(0,0,0,0.9);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.soldier-cutout img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  opacity: 0.36;
  filter: grayscale(1) brightness(0.82);
}

.soldier-cutout span,
.soldier-cutout span::before,
.soldier-cutout span::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  content: "";
  background: rgba(118,128,126,0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.soldier-cutout span {
  top: 27%;
  width: 44%;
  height: 42%;
  border-radius: 42% 42% 18% 18%;
}

.soldier-cutout span::before {
  top: -42%;
  width: 58%;
  height: 34%;
  border-radius: 50%;
}

.soldier-cutout span::after {
  bottom: -42%;
  width: 72%;
  height: 34%;
  clip-path: polygon(14% 0, 38% 0, 44% 100%, 0 100%, 0 78%, 22% 78%, 28% 20%, 14% 20%, 14% 0, 62% 0, 76% 0, 76% 20%, 62% 20%, 68% 78%, 100% 78%, 100% 100%, 56% 100%, 62% 0);
}

.soldier-cutout.active {
  background: linear-gradient(180deg, rgba(179,136,73,0.38), rgba(55,42,25,0.32));
  border-color: rgba(231,201,135,0.6);
}

.soldier-cutout.active img {
  opacity: 0.96;
  filter: grayscale(1) brightness(1.18) drop-shadow(0 1px 2px rgba(0,0,0,0.65));
}

.soldier-cutout.active span,
.soldier-cutout.active span::before,
.soldier-cutout.active span::after {
  background: linear-gradient(180deg, #d8c089, #8d6733);
}

.soldier-cutout.readonly,
.unit-loadout-slot.readonly,
.unit-assembly-zone.readonly {
  cursor: default;
}

.unit-slot-row-wrap {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.soldier-row-wrap {
  margin-top: 0;
}

.unit-slot-label {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.unit-slot-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(26px, 1fr));
  gap: 4px;
  min-height: 42px;
  padding: 4px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.72);
}

.unit-loadout-slot {
  position: relative;
  min-width: 0;
  height: 46px;
  padding: 3px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(11,15,17,0.76);
  border: 1px solid rgba(122,139,150,0.28);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.08);
}

.unit-loadout-slot .placeholder-icon {
  opacity: 0.26;
  filter: grayscale(1) brightness(0.86);
}

.unit-loadout-slot.occupied {
  background: rgba(50,42,28,0.72);
  border-color: rgba(231,201,135,0.44);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.unit-loadout-slot.occupied .placeholder-icon {
  opacity: 1;
}

.unit-loadout-slot.secondary {
  opacity: 0.42;
  cursor: default;
}

.unit-loadout-slot.secondary img {
  filter: grayscale(1) brightness(0.78);
}

.unit-loadout-slot.disabled {
  opacity: 0.22;
  background: rgba(0,0,0,0.44);
}

.unit-loadout-slot img {
  width: auto;
  height: auto;
  max-width: calc(100% - 4px);
  max-height: 40px;
  object-fit: contain;
}

.unit-save-template-button:disabled,
.unit-save-template-button.is-disabled {
  opacity: 0.42;
  color: var(--tc-steel);
  background: linear-gradient(180deg, #353027, #171512);
  filter: grayscale(0.8);
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.unit-slot-remove {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  color: var(--tc-paper);
  background: rgba(8,10,11,0.78);
  border: 1px solid rgba(231,201,135,0.45);
  border-radius: 50%;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  line-height: 1;
}

.gun-cutout,
.transport-cutout,
.unit-empty-cutout,
.transport-empty-space {
  height: 158px;
  min-height: 158px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 12px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 8px, transparent 8px 16px),
    rgba(0,0,0,0.24);
  border: 1px dashed rgba(122,139,150,0.38);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.transport-empty-space {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.gun-cutout.active,
.transport-cutout.active {
  border-style: solid;
  border-color: rgba(231,201,135,0.48);
  background: linear-gradient(180deg, rgba(179,136,73,0.18), rgba(0,0,0,0.22));
}

.gun-cutout img,
.transport-cutout img {
  width: min(132px, 55%);
  height: 92px;
  object-fit: contain;
}

.gun-cutout .placeholder-icon,
.transport-cutout .placeholder-icon {
  opacity: 0.52;
  filter: grayscale(1) brightness(0.92);
}

.gun-cutout .placeholder-icon.ghost,
.transport-cutout .placeholder-icon.ghost {
  opacity: 0.34;
}

.transport-cutout .horse-transport-icon {
  width: min(132px, 55%);
  height: 92px;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.65));
}

.gun-cutout span {
  width: min(190px, 70%);
  height: 56px;
  border-radius: 45% 45% 14% 14%;
  background: rgba(118,128,126,0.28);
  box-shadow:
    0 22px 0 -16px rgba(118,128,126,0.34),
    -54px 40px 0 -24px rgba(118,128,126,0.28),
    54px 40px 0 -24px rgba(118,128,126,0.28);
}

.horse-cutout,
.tank-cutout {
  width: 132px;
  height: 58px;
  background: rgba(118,128,126,0.28);
  clip-path: polygon(4% 58%, 12% 38%, 28% 32%, 39% 18%, 68% 22%, 84% 36%, 96% 44%, 92% 61%, 80% 58%, 78% 86%, 68% 86%, 65% 60%, 35% 60%, 32% 86%, 22% 86%, 20% 60%);
}

.tank-cutout {
  height: 64px;
  clip-path: polygon(5% 58%, 15% 36%, 37% 30%, 45% 15%, 86% 15%, 86% 30%, 63% 30%, 95% 43%, 91% 62%, 82% 72%, 15% 72%);
}

.tank-cutout.ghost {
  opacity: 0.55;
}

.unit-toolbox {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.unit-template-summary {
  overflow-y: auto;
  display: block;
}

.unit-toolbox-filter {
  width: 100%;
  margin: 6px 0 8px;
}

.unit-toolbox-grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  align-content: start;
  gap: 6px;
  padding-right: 3px;
}

.unit-toolbox-grid .toolbox-component {
  min-height: 88px;
  padding: 6px;
}

.toolbox-component.disabled,
.toolbox-component:disabled {
  opacity: 0.36;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* PT-47: the toolbox search hides non-matching entries with the `hidden`
   attribute, and `.component-pick` above is `display: grid` — an explicit
   display beats the attribute's UA default, so the search silently did
   nothing. There is no global `[hidden]` rule in this stylesheet by design;
   each hide-in-place surface declares its own. */
.toolbox-component[hidden] {
  display: none;
}

.unit-toolbox-no-match {
  margin-top: 6px;
}

.unit-toolbox-empty-cta {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.toolbox-component em {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-style: normal;
}

.usage-card {
  cursor: default;
}

.research-layout {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}

.research-rail {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(220px, 0.95fr);
  gap: 14px;
  overflow: hidden;
}

.research-tree-list,
.research-allocation {
  min-height: 0;
  overflow: auto;
}

.research-category-card {
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.research-pool-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(0,0,0,0.9);
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 10px;
}

.research-pool-line strong {
  color: var(--tc-brass-hi);
}

.research-progress-shell {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(64,94,111,0.34), rgba(14,20,24,0.84)),
    rgba(0,0,0,0.22);
  border-color: rgba(231,201,135,0.42);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.16), 0 0 18px rgba(93,148,164,0.12);
}

.research-progress-shell::before,
.research-progress-shell::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
}

.research-progress-shell::before {
  opacity: 0.34;
  background-image:
    radial-gradient(circle at 42% 48%, rgba(194,232,220,0.46) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 18% 61%, rgba(231,201,135,0.31) 0 1px, transparent 2.4px),
    radial-gradient(circle at 77% 37%, rgba(194,232,220,0.28) 0 2.2px, transparent 3.6px);
  background-size: 47px 91px, 83px 137px, 131px 173px;
  background-position: 0 0, 31px 64px, 19px 22px;
  animation: research-bubbles-a 9.5s linear infinite;
}

.research-progress-shell::after {
  opacity: 0.22;
  background-image:
    radial-gradient(circle at 66% 21%, rgba(231,201,135,0.34) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 27% 74%, rgba(194,232,220,0.36) 0 1.8px, transparent 3.2px);
  background-size: 71px 119px, 149px 211px;
  background-position: 13px 83px, 61px 4px;
  animation: research-bubbles-b 13s ease-in-out infinite;
}

.research-progress-shell > * {
  position: relative;
  z-index: 1;
}

@keyframes research-bubbles-a {
  0% { background-position: 0 120px, 31px 188px, 19px 80px; }
  37% { background-position: 23px 36px, -10px 78px, 61px 6px; }
  71% { background-position: -15px -58px, 44px -40px, 9px -112px; }
  100% { background-position: 34px -116px, -24px -156px, 72px -218px; }
}

@keyframes research-bubbles-b {
  0% { background-position: 13px 146px, 61px 98px; transform: translateX(0); }
  45% { background-position: -31px 18px, 112px -56px; transform: translateX(8px); }
  100% { background-position: 46px -132px, 12px -228px; transform: translateX(-7px); }
}

.research-allocation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 9px 10px;
  border: 1px solid #000;
  border-left: 3px solid var(--tc-brass-hi);
}

.research-allocation-row strong,
.research-tech-card strong {
  display: block;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.research-allocation-row span,
.research-tech-card span {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.research-allocation-metrics {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.research-allocation-metrics em {
  color: var(--tc-steel);
  font-style: normal;
}

.research-allocation-metrics b {
  color: var(--tc-brass-hi);
}

.research-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.research-head h3 {
  margin: 0;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
}

.research-tree-viewport {
  min-height: 0;
  height: calc(100% - 48px);
  overflow: auto;
  padding: 8px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.9);
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
}

.research-tree-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.research-dependency-lines {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

.research-dependency-lines path {
  fill: none;
  stroke: rgba(122,139,150,0.55);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.9));
}

.research-tech-card {
  position: absolute;
  width: 210px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(35,45,53,0.92), rgba(10,15,19,0.92));
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.08);
}

.research-tech-card.research-progress-shell {
  background:
    linear-gradient(90deg, rgba(64,94,111,0.34), rgba(14,20,24,0.84)),
    rgba(0,0,0,0.22);
  border-color: rgba(231,201,135,0.42);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.16), 0 0 18px rgba(93,148,164,0.12);
}

.research-tech-card.unlocked {
  border-color: rgba(126,176,112,0.5);
  box-shadow: inset 0 0 0 1px rgba(126,176,112,0.22);
}

.research-tech-card.unavailable {
  opacity: 0.52;
  filter: grayscale(0.7);
}

.research-tech-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.research-tech-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #27343d, #11181d);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: var(--tc-bevel);
}

.research-tech-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.research-icon-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(231,201,135,0.18);
}

.research-tech-icon .research-icon-fallback {
  font-size: 9px;
}

/* PT-40: the blockers, named and clickable. They used to be a bare sentence
   with the names hidden in a native `title` tooltip. */
.research-missing {
  margin-top: 6px;
}

.research-missing-list {
  display: grid;
  gap: 4px;
}

.research-missing-dep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.1);
  color: var(--tc-paper-2);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  text-align: left;
}

.research-missing-dep:hover {
  background: rgba(231,201,135,0.13);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.4);
}

.research-missing-dep-name {
  overflow: hidden;
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Which tree the blocker lives in — the half of the finding that made this
   worth building, since the blocker is usually not on the tree you are on. */
.research-missing-dep em {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

/* Arriving at a technology you were sent to. A steady outline rather than a
   flash: the card may be one of thirty on screen, and the mark has to still be
   there when the player's eye finds it. */
.research-tech-card.focused {
  outline: 2px solid var(--tc-brass-hi);
  outline-offset: 2px;
}

.research-progress-track {
  height: 5px;
  margin: 8px 0;
  overflow: hidden;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(0,0,0,0.9);
}

/* PT-08: the same bar the tree card carries, as a thin rule across the foot of
   a list row — the list showed "N ticks" and no progress at all. */
.research-allocation-progress {
  grid-column: 1 / -1;
  height: 4px;
  margin: 3px 0 0;
}

/* PT-41: the same bar again, subtler still, along the foot of a tree card.
   Daniel asked for "small, narrow, subtle" — the tree card is a navigation
   control, and a full-weight meter on it would compete with the tech cards it
   leads to. */
.research-category-progress {
  height: 3px;
  margin: 5px 0 0;
  opacity: 0.85;
}

.research-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tc-brass), var(--tc-brass-hi));
}

.research-tech-flavor {
  margin: 5px 0 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-body);
  font-size: 9px;
  font-style: italic;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.research-tech-cost {
  margin: 4px 0 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.research-tech-controls {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.researcher-token {
  min-width: 0;
  height: 25px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  background: var(--tc-grad-tab-on);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.12);
}

.researcher-token img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(0.2);
}

.researcher-token span:not([aria-hidden]) {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-weight: 800;
}

.researcher-token.active {
  background: var(--tc-grad-brass);
  box-shadow: var(--tc-bevel), 0 0 10px rgba(231,201,135,0.22);
}

.researcher-token.active img {
  opacity: 1;
  filter: none;
}

.researcher-token.active span:not([aria-hidden]) {
  color: #15100a;
}

.researcher-token:disabled {
  cursor: default;
  opacity: 0.42;
  filter: grayscale(0.55);
}

.pause-token span[aria-hidden] {
  width: 13px;
  height: 15px;
  display: block;
  background:
    linear-gradient(90deg, transparent 0 2px, var(--tc-brass-hi) 2px 5px, transparent 5px 8px, var(--tc-brass-hi) 8px 11px, transparent 11px);
  filter: drop-shadow(0 1px 0 #000);
}

.pause-token.active span[aria-hidden] {
  background:
    linear-gradient(90deg, transparent 0 2px, #15100a 2px 5px, transparent 5px 8px, #15100a 8px 11px, transparent 11px);
}

.research-missing-label {
  min-height: 25px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A completed technology states its state instead of offering five disabled
   researcher buttons that still read as clickable. */
.research-done-label {
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9fd08a;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.research-done-label::before {
  content: "";
  width: 11px;
  height: 7px;
  flex: none;
  border-left: 2px solid #9fd08a;
  border-bottom: 2px solid #9fd08a;
  transform: rotate(-45deg) translate(1px, -2px);
}

.research-tech-controls .small-command {
  min-height: 26px;
  padding: 0 6px;
  font-size: 8px;
}

/* unlock list inside a tech card */
.research-unlocks-label {
  display: block;
  margin: 8px 0 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.research-unlock-row {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  margin-bottom: 3px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.18);
  border: 1px solid transparent;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  transition: background 0.1s, border-color 0.1s;
}

.research-unlock-row:hover {
  background: rgba(231,201,135,0.09);
  border-color: rgba(231,201,135,0.22);
  color: var(--tc-brass-hi);
}

.research-unlock-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: linear-gradient(180deg, #27343d, #11181d);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: var(--tc-bevel);
}

.research-unlock-kind {
  color: var(--tc-steel);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* unlock detail popup */
.research-unlock-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,12,18,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.research-unlock-popup {
  width: min(420px, 90vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #1a232a 0%, #0c1216 100%);
  border: 1px solid rgba(231,201,135,0.3);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.18), 0 24px 64px rgba(0,0,0,0.75);
}

.research-unlock-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--tc-grad-panel);
  border-bottom: 1px solid #000;
}

.research-unlock-close {
  all: unset;
  padding: 4px 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  border: 1px solid var(--tc-rail);
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.research-unlock-close:hover { color: var(--tc-brass-hi); }

.research-unlock-popup-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}

.research-unlock-detail-header {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.research-unlock-detail-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: linear-gradient(180deg, #27343d, #11181d);
  border: 1px solid rgba(0,0,0,0.9);
  box-shadow: var(--tc-bevel);
}

.research-unlock-detail-name {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.research-unlock-detail-kind {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.research-unlock-detail-flavor {
  margin: 0;
  color: var(--tc-steel);
  font-family: var(--tc-font-body);
  font-size: 10px;
  font-style: italic;
  line-height: 1.45;
}

.research-unlock-stats {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.research-unlock-stats li {
  padding: 3px 0;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.research-unlock-req-label {
  margin: 8px 0 4px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 1360px) {
  .unit-builder-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .unit-toolbox-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(210px, 1fr);
  }

  .unit-draft-footer-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .unit-draft-actions {
    justify-content: flex-start;
  }
}

.vehicle-field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
}

.battalion-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 8px;
  max-width: 640px;
}

.battalion-tile {
  aspect-ratio: 1.4 / 1;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #27343d, #12191e);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.14);
}

.battalion-tile strong {
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.battalion-tile span {
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

.battalion-tile.add {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 22px;
  font-weight: 700;
}

.resource-recipe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.resource-recipe.compact {
  margin: 8px 0 0;
}

.resource-recipe div {
  min-width: 82px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid #000;
}

.resource-recipe span {
  display: block;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.resource-recipe strong {
  display: block;
  margin-top: 2px;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 13px;
}

.battalion-table {
  display: grid;
  min-width: 760px;
}

.battalion-row {
  display: grid;
  grid-template-columns: 70px 1fr 1.2fr 100px 70px 70px;
  gap: 12px;
  align-items: center;
  min-height: 38px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(122,139,150,0.14);
}

.battalion-row.header {
  min-height: 30px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.battalion-row:nth-child(odd):not(.header) {
  background: rgba(0,0,0,0.16);
}

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

.equipment-card {
  display: grid;
  grid-template-columns: 112px 1fr 104px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid #000;
}

.equipment-art {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(231,201,135,0.18) 0 25%, transparent 25% 50%, rgba(231,201,135,0.1) 50% 75%, transparent 75%),
    linear-gradient(180deg, #283640, #10171c);
  border: 1px solid #000;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.equipment-body {
  min-width: 0;
}

.equipment-status {
  text-align: right;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brass-button,
.dark-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #000;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brass-button {
  background: var(--tc-grad-brass);
  color: #15100a;
  box-shadow: var(--tc-bevel);
}

.dark-button {
  background: var(--tc-grad-tab-on);
  color: var(--tc-brass-hi);
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.18);
}

.right-rail {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #131a1f 0%, #0a0f13 100%);
  border-left: 1px solid #000;
}

.panel {
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel);
}

/* Finding B: the card used to be `48px 1fr 48px` with the crest column
   stretching to the card's height (`.player-crest { flex:1; height:auto }`),
   so the flag grew the whole panel and the nation name had a 48px column to
   live in — anything longer than "New Rome" broke it. Now: the portrait is a
   FIXED square regardless of card height, and the nation gets its own
   full-width row where the name has room to wrap. */
.identity-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "avatar identity"
    "nation nation";
  align-items: start;
  gap: 8px;
  padding: 8px;
}

.identity-card > .avatar-block { grid-area: avatar; }
.identity-card > .identity-main { grid-area: identity; }
.identity-card > .crest-block { grid-area: nation; }

.identity-card-button {
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
}

.identity-card-button:hover {
  box-shadow: var(--tc-bevel), 0 0 0 1px rgba(231,201,135,0.28);
}

.avatar-block,
.crest-block {
  overflow: hidden;
  background: linear-gradient(180deg, #2a3540, #11181d);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.25);
}

/* Fixed square: the portrait must not grow when the card does (e.g. when the
   overreach "acting as" row appears). */
.identity-card > .avatar-block {
  width: 48px;
  height: 48px;
  min-height: 0;
}

.avatar-inner {
  height: calc(100% - 6px);
  margin: 3px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #3f6b3a 0%, #1a2218 100%);
  font-family: var(--tc-font-display);
  font-size: 18px;
  font-weight: 700;
}

.identity-name {
  font-family: var(--tc-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tc-paper);
}

.identity-role {
  margin-top: 3px;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 600;
  color: var(--tc-brass-hi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* S-02: the acting-as badge. Deliberately the loudest thing in the identity
   card — while it shows, every action the player takes spends overreach. */
.identity-acting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 5px;
  padding: 4px 6px;
  background: rgba(201,161,74,0.14);
  border: 1px solid var(--tc-warn);
}

.identity-acting-role {
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-warn);
}

.identity-acting-points {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  color: var(--tc-paper-2);
}

.identity-acting-exit {
  margin-left: auto;
  padding: 2px 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--tc-warn);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
}

.identity-acting-exit:hover {
  background: rgba(201,161,74,0.24);
}

.identity-merit {
  margin-top: 6px;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--tc-steel);
  letter-spacing: 0.08em;
}

.crest-block {
  display: flex;
  flex-direction: column;
  padding: 3px;
}

.crest-caption {
  margin-top: 3px;
  text-align: center;
  font-family: var(--tc-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The identity card's nation row: small fixed crest beside a name that has the
   whole card width and may wrap to two lines before it ellipsizes. */
.identity-card > .crest-block {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  min-width: 0;
}

.identity-card > .crest-block .nation-crest-tile.player-crest {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-height: 0;
}

.identity-card > .crest-block .crest-caption {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.wire-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wire-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.wire-tabs.wire-tabs-single { grid-template-columns: 1fr; }

.wire-tab {
  all: unset;
  position: relative;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 7px 5px;
  text-align: center;
  background: var(--tc-grad-tab-off);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
}

.wire-tab:first-child { border-right: 1px solid #000; }
.wire-tab.active {
  background: var(--tc-grad-tab-on);
  box-shadow: inset 0 -2px 0 rgba(231,201,135,0.55);
}

.wire-tab-title {
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--tc-steel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wire-tab.active .wire-tab-title { color: var(--tc-brass-hi); }

.wire-messages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 8px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.wire-load-more {
  width: calc(100% - 12px);
  margin: 4px 6px 8px;
  padding: 7px 8px;
  border: 1px solid rgba(180, 138, 74, 0.42);
  color: var(--tc-brass-hi);
  background: linear-gradient(180deg, rgba(69, 57, 37, 0.74), rgba(24, 24, 21, 0.9));
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.wire-load-more:hover { border-color: var(--tc-brass-hi); }

.message-card {
  padding: 5px 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid #000;
  border-left: 3px solid currentColor;
}

.message-card.status-entry {
  background:
    linear-gradient(90deg, rgba(203, 142, 55, 0.13), rgba(0, 0, 0, 0.32) 65%),
    rgba(0, 0, 0, 0.25);
  border-color: rgba(203, 142, 55, 0.42);
  border-left-color: currentColor;
}

/* Row 1 is exactly "name (or Status)" on the left and the time on the right;
   the role/event type gets its own row below, and the body a row after that.
   A flex row let the role and an actor chip compete with the time for width
   and squeezed the timestamp onto two lines in the narrow rail. */
.message-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px;
}

.message-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.message-status-marker {
  padding: 1px 4px;
  border: 1px solid currentColor;
  color: currentColor;
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-transform: uppercase;
}

.message-role {
  margin-top: 1px;
  font-family: var(--tc-font-mono);
  font-size: 8px;
  color: var(--tc-steel-2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.message-time {
  /* Its own column now, and never wrapped. */
  white-space: nowrap;
  font-family: var(--tc-font-mono);
  font-size: 9px;
  color: var(--tc-steel-2);
}

.message-body {
  margin-top: 2px;
  color: var(--tc-paper-2);
  font-size: 11px;
  line-height: 1.4;
}

.composer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #0a0f13, #171f25);
  border-top: 1px solid #000;
}

.composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.composer button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.selection-bar {
  display: grid;
  grid-template-columns: 128px 1fr;
  background: var(--tc-grad-panel-2);
  border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.18);
}

.stack-tile {
  margin: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #2a3540, #11181d);
  border: 1px solid #000;
}

.stack-title {
  font-family: var(--tc-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-brass-hi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stack-count {
  font-family: var(--tc-font-mono);
  font-size: 26px;
  font-weight: 700;
}

.selection-main {
  min-width: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.selection-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.selection-title {
  font-family: var(--tc-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--tc-paper);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.selection-context {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-steel);
}

.selection-hint {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--tc-rail);
  font-family: var(--tc-font-display);
  font-size: 9px;
  color: var(--tc-steel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

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

.stat-label {
  font-family: var(--tc-font-display);
  font-size: 9px;
  color: var(--tc-steel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stat-value {
  margin-top: 2px;
  font-family: var(--tc-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.composition-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.composition-pill {
  padding: 3px 10px;
  background: linear-gradient(180deg, rgba(63,107,58,0.4), rgba(63,107,58,0.15));
  border: 1px solid rgba(63,107,58,0.7);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-paper);
  letter-spacing: 0.04em;
}

.order-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.order-button {
  min-width: 76px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.order-button.active {
  background: var(--tc-grad-brass);
  color: #15100a;
}

@media (max-width: 2000px) {
  .resource-bar {
    gap: 12px;
    padding: 7px 12px 7px 14px;
  }
  .resource-item {
    min-width: 96px;
    max-width: 124px;
  }
  .resource-image {
    width: 24px;
    height: 24px;
  }
  .resource-label {
    font-size: 8px;
    letter-spacing: 0.12em;
  }
  .resource-spacer {
    flex-basis: 10px;
  }
  .clock {
    gap: 6px;
    padding: 4px 8px;
  }
  .clock-label {
    letter-spacing: 0.12em;
  }
  .clock-turn {
    padding-left: 6px;
  }
  .top-menu-button {
    padding: 5px 10px;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 1600px) {
  .resource-bar {
    gap: 10px;
  }
  .resource-item {
    min-width: 84px;
    max-width: 108px;
  }
  .clock-label {
    display: none;
  }
}

@media (max-width: 1450px) {
  .resource-bar {
    gap: 8px;
  }
  .resource-item {
    min-width: 68px;
    max-width: 84px;
  }
  .resource-image {
    width: 22px;
    height: 22px;
  }
  .resource-label {
    display: none;
  }
  .clock-time {
    font-size: 12px;
  }
  .clock-turn {
    font-size: 11px;
  }
}

@media (max-width: 1300px) {
  .resource-bar { gap: 10px; padding-left: 10px; }
  .resource-item { min-width: 64px; max-width: 80px; }
  .resource-image { width: 22px; height: 22px; }
  .main-grid { grid-template-columns: 80px minmax(0, 1fr) clamp(260px, 22vw, 310px); }
}

@media (max-width: 1080px) {
  .resource-item { min-width: 58px; max-width: 72px; }
  .resource-label { font-size: 8px; letter-spacing: 0.12em; }
  .main-grid { grid-template-columns: 78px minmax(0, 1fr) 250px; }
  .right-rail { padding: 8px; }
  .identity-card { grid-template-columns: 42px minmax(0, 1fr); }
  .identity-card > .avatar-block { width: 42px; height: 42px; }
  .division-panel {
    grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.85fr);
  }
  .battalion-designer-grid {
    grid-template-columns: 1fr;
  }
  .battalion-designer-summary {
    order: -1;
  }
}

@media (max-width: 900px) {
  .main-grid { grid-template-columns: 70px minmax(0, 1fr) 220px; }
  .right-rail { gap: 6px; padding: 6px; }
  .wire-tab-title { font-size: 9px; letter-spacing: 0.1em; }
  .identity-card { grid-template-columns: 38px minmax(0, 1fr); }
  .identity-card > .avatar-block { width: 38px; height: 38px; }
  /* Narrowest rail: the nation row is the first thing to go. */
  .identity-card > .crest-block { display: none; }
  .division-panel {
    height: min(180px, 34vh);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .division-panel-head,
  .division-metric-row,
  .battalion-list-wrap,
  .division-detail-well {
    grid-column: 1;
  }
  .division-panel-head { grid-row: 1; }
  .division-metric-row { grid-row: 2; }
  .battalion-list-wrap,
  .division-detail-well {
    grid-row: 3;
    padding: 0;
  }
}

@media (max-width: 760px) {
  .tc-shell {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .resource-bar {
    padding: 5px 8px;
  }
  .resource-item { min-width: 46px; }
  .resource-label { display: none; }
  .resource-image { width: 20px; height: 20px; }
  .resource-value { font-size: 11px; }
  .main-grid { grid-template-columns: 62px minmax(0, 1fr) 190px; }
  .nav-button { width: 40px; height: 40px; }
  /* Rail icons still fill their category at narrow widths — the 40px above is
     for .nav-button's other uses. */
  .rail-category-items .nav-button { width: 100%; }
  .nav-button img { width: 30px; height: 30px; }
  .right-rail { font-size: 11px; }
  .sheet-body,
  .signup-layout,
  .diplomacy-layout,
  .overreach-layout,
  .designer-layout {
    grid-template-columns: 1fr;
  }
  .sheet-column:first-child { border-right: 0; border-bottom: 1px solid #000; }
  .battalion-elements-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .province-panel {
    left: 16px;
    right: 16px;
    width: auto;
    min-width: 0;
  }
}

button,
[role="button"],
label,
.auth-check,
.auth-check input,
.text-command,
.brass-button,
.dark-button,
.wire-tab,
.composer button,
.join-stepper button,
.nation-choice,
.profile-link,
.nav-button,
.lobby-filter,
.order-button,
.template-card,
.slot-chip,
.assignment-member,
.portrait-picker button,
.crest-picker button,
.color-picker button,
.event-log-toolbar select,
.event-turn summary,
.overlay-chip:not(.disabled) {
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

button:disabled,
[aria-disabled="true"],
.assignment-member:disabled,
.overlay-chip.disabled {
  cursor: url("./assets/cursors/cursor-select.png") 8 3, default;
}

/* A dead control must LOOK dead. Buttons in this UI routinely start with
   `all: unset` (e.g. .battle-card-view-map), which throws away the user
   agent's disabled styling, and the rule above only changed the cursor — so
   "Play out" on a resolved battle was correctly disabled and visually
   identical to a live button (playtest 2026-08-15). Hover states are excluded
   below rather than here, because a later `:hover` rule would otherwise win
   on specificity and light the control back up under the pointer. */
button:disabled,
[aria-disabled="true"] {
  opacity: 0.4;
  filter: saturate(0.5);
}
button:disabled:hover,
[aria-disabled="true"]:hover {
  opacity: 0.4;
}

.terrain-canvas.dragging {
  cursor: url("./assets/cursors/cursor-drag.png") 32 32, grabbing;
}

html.division-dragging,
html.division-dragging body,
html.division-dragging body *,
body.division-dragging,
body.division-dragging *,
.terrain-canvas.division-moving {
  cursor: url("./assets/cursors/cursor-move.png") 31 7, grabbing !important;
}

.division-icon {
  width: 58px;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
}

.division-icon-draggable {
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
}

.division-icon-draggable:active {
  cursor: url("./assets/cursors/cursor-move.png") 31 7, grabbing;
}

.division-icon-stack {
  width: 50px;
  min-height: 58px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2) 0 48%, rgba(0,0,0,0.24) 49% 100%),
    var(--nation-color, #888);
  border: 1px solid rgba(0,0,0,0.85);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset -1px -1px 0 rgba(0,0,0,0.35), 0 2px 5px rgba(0,0,0,0.7);
  transform: translateY(calc(var(--stack-index, 0) * -16px));
}

.division-icon:hover .division-icon-stack,
.division-icon.selected .division-icon-stack {
  outline: 2px solid rgba(231,201,135,0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 2px rgba(0,0,0,0.75), 0 0 14px rgba(231,201,135,0.55);
}

.division-drag-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.04);
  opacity: 0.88;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.75));
}

.arrow-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arrow-layer path {
  fill: none;
  stroke-linecap: round;
}

.arrow-layer g {
  opacity: 0.86;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.75));
}

.division-icon-symbol {
  width: 36px;
  height: 31px;
  padding: 3px 3px 1px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.division-icon-symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.division-icon-meter {
  width: 38px;
  height: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0,0,0,0.55);
  overflow: hidden;
}

.division-icon-meter-fill {
  height: 100%;
  background: #4caf50;
}

.division-icon-label {
  font-size: 10px;
  line-height: 1.1;
  max-width: 42px;
  overflow: hidden;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.7);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* === Diplomatic Wire === */
.diplomatic-wire-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.diplomatic-wire-error {
  margin: 0 12px;
}
.diplomatic-wire-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 12px 12px;
  flex: 1;
  min-height: 0;
}
.diplomatic-wire-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.diplomatic-wire-tabs {
  display: flex;
  gap: 6px;
}
.diplomatic-wire-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(122, 139, 150, 0.2);
  color: var(--tc-paper-2);
  padding: 6px 12px;
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}
.diplomatic-wire-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--tc-brass-hi);
  border-color: rgba(212, 175, 55, 0.4);
}
.diplomatic-wire-capacity {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tc-font-mono);
  color: var(--tc-paper-2);
  font-size: 11px;
}
.diplomatic-wire-capacity-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(122, 139, 150, 0.2);
}
.diplomatic-wire-capacity-fill {
  height: 100%;
  background: var(--tc-brass-hi, #d4af37);
}
.diplomatic-wire-list {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.diplomatic-wire-row {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(122, 139, 150, 0.15);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diplomatic-wire-row-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  color: var(--tc-paper-2);
}
.diplomatic-wire-tag {
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-brass-hi);
  font-weight: 700;
  margin-right: 4px;
}
.diplomatic-wire-sender {
  flex: 1;
  font-family: var(--tc-font-mono);
}
.diplomatic-wire-time {
  font-family: var(--tc-font-mono);
  color: var(--tc-steel);
  font-size: 10px;
}
.diplomatic-wire-body {
  white-space: pre-wrap;
  font-size: 12px;
  color: var(--tc-paper, #e2dccd);
}
.diplomatic-wire-compose-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.diplomatic-wire-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diplomatic-wire-compose-scopes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.diplomatic-wire-compose-scopes label {
  position: relative;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #27343d, #11181d);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.12);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}
.diplomatic-wire-compose-scopes label.selected {
  border-color: rgba(209,164,91,0.82);
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.38), 0 0 0 1px rgba(0,0,0,0.65);
}
.diplomatic-wire-compose-scopes input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}
.diplomatic-wire-compose-scopes span {
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.diplomatic-wire-compose-scopes em {
  min-width: 26px;
  padding: 3px 5px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(231,201,135,0.18);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 10px;
  font-style: normal;
  text-align: center;
}
.diplomatic-wire-target-label,
.diplomatic-wire-continent-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.diplomatic-wire-body-input {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(122, 139, 150, 0.25);
  color: var(--tc-paper, #e2dccd);
  padding: 8px;
  font-family: var(--tc-font-mono);
  font-size: 12px;
}
.diplomatic-wire-compose-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.diplomatic-wire-charcount {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-steel);
}
.diplomatic-wire-charcount.over {
  color: var(--tc-bad-hi, #c45);
}
.diplomatic-wire-compose button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.diplomatic-wire-compose-readonly {
  min-height: 0;
}
.diplomatic-wire-compose-placeholder {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.diplomatic-wire-compose-error {
  margin-top: 6px;
}

/* === Industry panel polish (component grid + factory grid + drag reorder) === */
.industry-toolbar { display: flex; gap: 8px; margin: 6px 0 8px; }
.industry-toolbar .tc-input {
  flex: 1;
  background: rgba(20, 26, 32, 0.85);
  border: 1px solid rgba(120, 110, 90, 0.45);
  color: var(--tc-bone);
  padding: 6px 8px;
  font-family: var(--tc-font-body);
  font-size: 12px;
}
.component-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.component-grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(28, 34, 40, 0.65);
  border: 1px solid rgba(120, 110, 90, 0.4);
  color: var(--tc-bone);
  padding: 6px 4px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  font-family: var(--tc-font-body);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
}
.component-grid-cell:hover:not([disabled]) { border-color: var(--tc-brass); background: rgba(60, 50, 30, 0.6); }
.component-grid-cell[disabled] { opacity: 0.45; cursor: not-allowed; }
.component-grid-cell img { width: 36px; height: 36px; object-fit: contain; }
.component-grid-cell span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.component-grid-pager {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--tc-font-display); font-size: 10px; color: var(--tc-steel);
  letter-spacing: 0.12em; text-transform: uppercase;
}

.production-line-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(120, 110, 90, 0.35);
  background: rgba(20, 26, 32, 0.55);
  margin-bottom: 6px;
}
.production-line-row.dragging { opacity: 0.5; }
.production-line-row.drop-target { border-color: var(--tc-brass); box-shadow: 0 0 0 1px var(--tc-brass) inset; }
/* Regular arrow on hover; custom drag cursor only while actually dragging. */
.production-line-row[draggable="true"] { cursor: url("./assets/cursors/cursor-select.png") 8 3, default; }
.production-line-row.dragging { cursor: url("./assets/cursors/cursor-drag.png") 16 16, grabbing; }
.production-line-head {
  display: flex; align-items: center; gap: 8px;
}
.production-line-icon { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }
.production-line-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.production-line-main strong { font-family: var(--tc-font-display); font-size: 12px; letter-spacing: 0.1em; }
.production-line-main span { font-size: 10px; color: var(--tc-steel); }
.production-progress-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 7px;
}
.production-progress-track {
  height: 8px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  background: rgba(12, 18, 16, 0.85);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.production-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #426b3d, #8fb86c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.production-allocation-layout {
  display: grid;
  grid-template-columns: minmax(116px, 0.85fr) minmax(120px, 1.1fr) minmax(160px, 1fr);
  gap: 10px;
  align-items: start;
}
.production-line-stats,
.production-materials {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
  font-size: 10px;
  color: var(--tc-steel);
}
.production-material-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.production-material-row img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.production-material-row strong {
  color: var(--tc-bone);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.factory-grid {
  display: grid;
  grid-template-columns: repeat(5, 22px);
  grid-auto-rows: 22px;
  gap: 3px;
}
.factory-grid-cell {
  width: 22px; height: 22px;
  border: 1px solid rgba(120, 110, 90, 0.35);
  background: rgba(15, 20, 26, 0.7);
  padding: 0;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1) brightness(0.5);
  transition: filter 0.1s;
}
.factory-grid-cell.allocated {
  filter: grayscale(0.65) brightness(0.72);
  border-color: rgba(231,201,135,0.42);
  background: rgba(42, 38, 29, 0.55);
}
.factory-grid-cell.active {
  filter: none;
  border-color: var(--tc-brass);
  background: rgba(60, 50, 25, 0.6);
}
.factory-grid-cell:hover:not([disabled]) { border-color: var(--tc-brass); }
.factory-grid-cell[disabled] { opacity: 0.4; cursor: not-allowed; }
.factory-grid-cell img { width: 16px; height: 16px; object-fit: contain; }

.stockpile-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(120, 110, 90, 0.18);
  font-size: 11px;
}
.stockpile-icon { width: 22px; height: 22px; object-fit: contain; }
.stockpile-name { color: var(--tc-bone); }
.stockpile-explanation {
  margin: 6px 0 0;
  color: var(--tc-steel);
  font-size: 10px;
  line-height: 1.4;
}
.stockpile-amounts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.stockpile-amount {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 5px;
  align-items: baseline;
}
.stockpile-amount small {
  grid-column: 1 / -1;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stockpile-qty { font-family: var(--tc-font-display); letter-spacing: 0.08em; }
.stockpile-delta { font-family: var(--tc-font-body); font-size: 10px; min-width: 32px; text-align: right; }
.stockpile-delta.delta-up { color: #74c47a; }
.stockpile-delta.delta-down { color: #d77b6a; }
.stockpile-delta.delta-zero { color: transparent; }

/* === Diplomatic Wire: target nation grid + reply === */
.diplomatic-wire-target-label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.diplomatic-wire-target-label > span { font-family: var(--tc-font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-steel); }
.diplomatic-wire-target-filter {
  background: rgba(20, 26, 32, 0.85);
  border: 1px solid rgba(120, 110, 90, 0.45);
  color: var(--tc-bone);
  padding: 6px 8px;
  font-family: var(--tc-font-body);
  font-size: 12px;
}
.diplomatic-wire-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}
.diplomatic-wire-target-cell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(58px, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 6px;
  min-height: 96px;
  background: linear-gradient(180deg, #202a32, #0e1418);
  border: 1px solid rgba(120, 110, 90, 0.4);
  color: var(--tc-bone);
  padding: 8px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.08);
  font-family: var(--tc-font-display);
  text-align: center;
}
.diplomatic-wire-target-cell:hover:not([disabled]) {
  border-color: var(--tc-brass);
  background: linear-gradient(180deg, #2b3842, #11191e);
}
.diplomatic-wire-target-cell.selected {
  border-color: var(--tc-brass);
  box-shadow: inset 0 0 0 2px rgba(231,201,135,0.42), 0 0 0 1px rgba(0,0,0,0.8);
}
.diplomatic-wire-target-crest-tile,
.diplomatic-wire-continent-icon-wrap {
  width: 58px;
  height: 64px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12) 0 46%, rgba(0,0,0,0.18) 46% 54%, rgba(0,0,0,0.32) 54% 100%),
    var(--nation-color, #596f4f);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(251,243,221,0.16), inset 0 -10px 18px rgba(0,0,0,0.18);
}
.diplomatic-wire-target-crest {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.14)) drop-shadow(0 2px 3px rgba(0,0,0,0.65));
}
.diplomatic-wire-continent-icon-wrap {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1) 0 46%, rgba(0,0,0,0.18) 46% 54%, rgba(0,0,0,0.32) 54% 100%),
    linear-gradient(180deg, #27343d, #10171c);
}
.diplomatic-wire-continent-icon {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.14)) drop-shadow(0 2px 3px rgba(0,0,0,0.65));
}
.diplomatic-wire-target-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tc-paper-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.diplomatic-wire-target-pager {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-family: var(--tc-font-display); font-size: 10px; color: var(--tc-steel);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.diplomatic-wire-row-head { display: flex; align-items: center; gap: 8px; }
.diplomatic-wire-reply { margin-left: auto; }

/* ===== Operational map view ===== */
.operational-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0c1118;
  z-index: 50;
}
.operational-top-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 16px;
  background: rgba(8, 12, 18, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  letter-spacing: 0.08em;
  position: relative;
  z-index: 14;
}
.operational-title {
  flex: 0 0 auto;
  font-size: 13px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Options menu (hamburger + foldout) */
.operational-options { position: relative; flex: 0 0 auto; }
.operational-options-toggle {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #000;
  background: var(--tc-grad-tab-off);
  box-sizing: border-box;
}
.operational-options-toggle span {
  display: block;
  height: 2px;
  background: var(--tc-brass-hi, #f0d79a);
}
.operational-options.open .operational-options-toggle { background: var(--tc-grad-tab-on); }
.operational-options-foldout {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(8, 12, 18, 0.98);
  border: 1px solid rgba(231, 201, 135, 0.4);
  border-radius: 4px;
  z-index: 20;
}
.operational-options.open .operational-options-foldout { display: flex; }
.operational-options-item {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-paper);
}
.operational-options-item img { width: 20px; height: 20px; object-fit: contain; }
.operational-options-item:hover { background: rgba(231, 201, 135, 0.16); }
.operational-options-item.active { background: rgba(231, 201, 135, 0.24); color: var(--tc-brass-hi, #f0d79a); }
.operational-options-sep { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 2px; }
.operational-options-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-steel, #9aa7b4);
}

/* Consistent select styling across the op-battle UI */
.operational-select {
  background: var(--tc-grad-tab-off);
  color: var(--tc-brass-hi, #f0d79a);
  border: 1px solid #000;
  border-radius: 2px;
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}
.operational-select option { color: #111; }

/* Turn number + live next-turn countdown */
.operational-turn-clock {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  white-space: nowrap;
}
.operational-turn-clock > div { display: flex; flex-direction: column; line-height: 1.1; }
.operational-turn-clock span {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-steel, #9aa7b4);
}
.operational-turn-clock strong {
  font-size: 13px;
  color: var(--tc-paper);
  font-variant-numeric: tabular-nums;
}
.operational-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.operational-spacer { flex: 1; }
.operational-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.operational-map3d-markers,
.operational-map3d-canvas,
.operational-webgpu-canvas,
.operational-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.operational-webgpu-canvas {
  z-index: 0;
}
.operational-canvas {
  z-index: 1;
}
/* Track O: the three.js renderer is opt-in until the O-06 cutover. Exactly one
   ground renderer is visible at a time — the 3D canvas replaces both legacy
   canvases rather than compositing over them. */
.operational-map3d-canvas {
  z-index: 2;
  display: none;
  touch-action: none;
}
.operational-viewport-3d .operational-map3d-canvas,
.operational-viewport-3d .operational-map3d-markers {
  display: block;
}
/* Labels, hub/airbase icons and route ticks: billboards, so a 2D layer over
   the scene rather than a texture upload per label. Never takes the pointer —
   picking and drag-pan belong to the canvas underneath. */
.operational-map3d-markers {
  z-index: 3;
  display: none;
  pointer-events: none;
}
.operational-viewport-3d .operational-webgpu-canvas {
  display: none;
}
/* The 2D canvas stays in the stack as the POINTER SURFACE: every interaction
   handler is bound to it, and the camera rig binds there too, so hover,
   selection, order issuing and drag-pan work identically on both renderers.
   In 3D mode it paints nothing (drawMap clears and returns), so it is a
   transparent sheet over the scene. */
.operational-viewport-3d .operational-canvas {
  z-index: 4;
  background: transparent;
}
.operational-status, .operational-hint {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  background: rgba(8, 12, 18, 0.78);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.operational-error {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(120, 20, 20, 0.78);
  color: #ffd0c0;
  font-family: var(--tc-font-mono);
  font-size: 11px;
}
/* Loading overlay: covers the entire viewport while the RTT bake is
   in progress, so the user doesn't see the half-baked zoomed-out view
   (wire grid + labels + nothing else) while textures are still loading.
   Hidden once isOperationalMapReady(map) returns true. */
.operational-loading-popup {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(8, 12, 18, 0.97);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  pointer-events: none;
}
.operational-loading-popup[hidden] { display: none; }
.operational-loading-label {
  color: var(--tc-paper-1, #ffe7c0);
}
.operational-loading-bar {
  width: 280px;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(229, 199, 126, 0.30);
  overflow: hidden;
}
.operational-loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d9b96a, #f5e2a8);
  transition: width 120ms ease-out;
}
/* Operational view tooltip + inspector */
.operational-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 6px 10px;
  background: rgba(8, 12, 18, 0.92);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 5;
  max-width: 260px;
}
.op-tooltip-meta { color: var(--tc-steel); font-size: 10px; margin-top: 2px; }
.operational-inspector {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 10px 14px;
  background: rgba(8, 12, 18, 0.92);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 5;
  min-width: 220px;
}
.op-inspector-head strong { font-family: var(--tc-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.op-inspector-head span { color: var(--tc-steel); font-size: 11px; }
.op-inspector-meta { color: var(--tc-steel); font-size: 11px; margin-top: 3px; }

/* ===== Vehicle Designer ===== */
.vehicle-editor { display: flex; flex-direction: column; gap: 14px; }
.vehicle-design { display: flex; flex-direction: column; gap: 14px; }
.vehicle-design-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.vehicle-design-title {
  font-family: var(--tc-font-display); letter-spacing: 0.06em;
  font-size: 18px; margin: 4px 0 0; color: var(--tc-paper-1);
}
.vehicle-name-input { font-family: var(--tc-font-display); font-size: 16px; margin-top: 4px; }
.vehicle-design-actions { display: flex; gap: 8px; }
.vehicle-show-obsolete,
.vehicle-obsolete-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  user-select: none;
}
.vehicle-show-obsolete {
  margin-bottom: 10px;
}
.vehicle-obsolete-toggle {
  min-height: 24px;
}
.vehicle-show-obsolete input,
.vehicle-obsolete-toggle input {
  display: none;
}
.vehicle-show-obsolete::before,
.vehicle-obsolete-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--tc-brass-hi);
  background: transparent;
  flex: 0 0 auto;
}
.vehicle-show-obsolete:has(input:checked),
.vehicle-obsolete-toggle:has(input:checked) {
  background: var(--tc-grad-tab-on);
  color: var(--tc-brass-hi);
}
.vehicle-show-obsolete:has(input:checked)::before,
.vehicle-obsolete-toggle:has(input:checked)::before {
  background: var(--tc-brass-hi);
}
.vehicle-obsolete-toggle.disabled {
  opacity: 0.55;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, default;
}
.template-card.obsolete {
  opacity: 0.62;
}
.vehicle-design-canvas {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(220px, 320px) minmax(74px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: rgba(12, 16, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 330px;
  position: relative;
  overflow: visible;
}
.vehicle-icon-center {
  display: flex; align-items: center; justify-content: center;
  min-width: 220px;
  position: relative;
  z-index: 1;
}
.vehicle-live-preview {
  height: 292px;
  min-width: 300px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(170, 151, 112, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(30, 37, 43, 0.42), rgba(5, 8, 11, 0.12));
  border: 1px solid rgba(231, 201, 135, 0.1);
}
.vehicle-live-preview canvas { width: 100%; height: 100%; display: block; }
.vehicle-preview-loading,
.vehicle-preview-error {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
}
.vehicle-preview-error small { display: block; max-width: 270px; margin-top: 6px; text-transform: none; }
.vehicle-design-locked { opacity: 0.56; }
.vehicle-modular-panel {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(12, 16, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.vehicle-modular-field { display: grid; gap: 5px; min-width: 0; }
.vehicle-modular-field > span,
.vehicle-modular-field > label {
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.vehicle-modular-field strong { color: var(--tc-paper-1); font-size: 12px; }
.vehicle-structure-field { grid-template-columns: 150px minmax(180px, 1fr); align-items: center; }
.vehicle-mount-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.vehicle-module-list { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.05); }
.vehicle-module-toggle {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px;
  border: 1px solid rgba(231, 201, 135, 0.16); background: rgba(0,0,0,0.14);
}
.vehicle-module-toggle span { display: grid; gap: 2px; }
.vehicle-module-toggle strong { color: var(--tc-paper-1); font-family: var(--tc-font-display); font-size: 11px; }
.vehicle-module-toggle small { max-width: 440px; color: var(--tc-steel); font-size: 10px; }
.vehicle-module-toggle.disabled { opacity: 0.48; }
.vehicle-icon-center img {
  max-width: 240px; max-height: 240px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.vehicle-slot-picker-clickout {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: default;
}
.vehicle-slot-side {
  display: flex;
  position: relative;
  z-index: 3;
  min-width: 72px;
}
.vehicle-slot-side-left { justify-content: flex-end; }
.vehicle-slot-side-right { justify-content: flex-start; }
.vehicle-slot-column {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 64px;
}
.vehicle-slot-column-placeholder {
  width: 64px;
  min-height: 64px;
}
.vehicle-slot-wrap {
  position: relative;
  width: 64px;
  height: 64px;
}
.vehicle-slot-button {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 45% 35%, rgba(231, 201, 135, 0.10), transparent 58%),
    rgba(20, 24, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-paper-2);
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.35);
}
.vehicle-slot-button:hover,
.vehicle-slot-wrap.active .vehicle-slot-button {
  background:
    radial-gradient(circle at 45% 35%, rgba(231, 201, 135, 0.18), transparent 60%),
    rgba(28, 34, 44, 0.96);
  border-color: rgba(231,201,135,0.55);
}
.vehicle-slot-button:disabled {
  cursor: default;
}
.vehicle-slot-button img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
}
.vehicle-slot-button.vehicle-slot-empty img {
  opacity: 0.46;
  filter: grayscale(0.55) brightness(0.68) drop-shadow(0 2px 5px rgba(0,0,0,0.45));
}
.vehicle-slot-screen-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.vehicle-slot-picker {
  position: absolute;
  top: 0;
  width: 314px;
  max-height: 310px;
  display: flex;
  flex-direction: column;
  background: rgba(10, 13, 18, 0.98);
  border: 1px solid rgba(231,201,135,0.28);
  z-index: 4;
  box-shadow: 0 8px 32px rgba(0,0,0,0.60);
}
.vehicle-slot-picker-left { right: calc(100% + 10px); }
.vehicle-slot-picker-right { left: calc(100% + 10px); }
.vehicle-slot-picker-list { overflow-y: auto; }
.vehicle-mod-choice {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 10px;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  width: 100%; text-align: left; cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-paper-2);
}
.vehicle-mod-choice:hover,
.vehicle-mod-choice.active { background: rgba(231,201,135,0.10); }
.vehicle-mod-choice img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.vehicle-mod-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vehicle-mod-choice-name {
  font-family: var(--tc-font-display); letter-spacing: 0.06em;
  font-size: 12px; color: var(--tc-paper-1);
}
.vehicle-mod-choice-meta { font-family: var(--tc-font-mono); font-size: 10px; color: var(--tc-steel); }
.vehicle-mod-choice-desc { font-size: 11px; color: var(--tc-paper-2); margin-top: 2px; }
.vehicle-mod-choice-empty {
  font-family: var(--tc-font-display);
  letter-spacing: 0.08em;
  color: var(--tc-paper-1);
  text-transform: uppercase;
}
.vehicle-cost-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(231,201,135,0.28);
  background: rgba(5,9,12,0.72);
}
.vehicle-cost-metric {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(231,201,135,0.22);
  background: linear-gradient(180deg, rgba(37,45,49,0.72), rgba(11,16,19,0.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.vehicle-cost-metric img {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.75));
}
.vehicle-cost-metric span {
  overflow: hidden;
  color: var(--tc-steel);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.vehicle-cost-metric strong {
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-mono);
  font-size: 16px;
  line-height: 1;
}
/* Operational battle card on the strategic map (S-14: EU4-style strength
   marker — attacker flag+count left of the icon, defender right, further
   participants below; the whole cluster is one click target). */
.battle-card-icon {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,0.75));
}
.battle-map-marker-cluster {
  all: unset;
  display: grid;
  justify-items: center;
  row-gap: 2px;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
}
.battle-marker-main {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  align-items: center;
  column-gap: 3px;
}
.battle-marker-main .battle-marker-chip[data-role="attacker"] { justify-self: end; }
.battle-marker-main .battle-marker-chip[data-role="defender"] { justify-self: start; }
.battle-marker-extras {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.battle-marker-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.battle-marker-chip[data-empty="true"] { min-width: 18px; }
.nation-crest-tile.battle-marker-flag {
  width: 18px;
  height: 14px;
  flex: none;
}
.battle-marker-count {
  font-family: var(--tc-font-display);
  font-size: 12px;
  line-height: 1;
  color: var(--tc-paper-1, #fbf3dd);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.7);
}
/* The burst used to float on the map with nothing under it (PT-07, playtest
   2026-08-22). It now sits on a cast plaque, in the metal that matches the
   burst: gilt where you are in the battle, tin where you are only watching. */
.battle-map-marker {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: url("./assets/icons/strategic/battle_marker_plate.png") center / contain no-repeat;
}
.battle-card-icon[data-participating="false"] .battle-map-marker {
  background-image: url("./assets/icons/strategic/battle_marker_plate_tin.png");
}
.battle-map-marker img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  pointer-events: none;
}
.battle-card-icon:hover {
  filter:
    drop-shadow(0 4px 7px rgba(0,0,0,0.75))
    drop-shadow(0 0 6px rgba(231,201,135,0.45));
}
.battle-card-icon[data-state="ongoing"] {
  filter:
    drop-shadow(0 4px 7px rgba(0,0,0,0.75))
    drop-shadow(0 0 5px rgba(214,98,82,0.28));
}
.battle-card-icon[data-participating="false"]:hover {
  filter:
    drop-shadow(0 4px 7px rgba(0,0,0,0.75))
    drop-shadow(0 0 6px rgba(196,216,224,0.38));
}
.battle-info-panel {
  position: absolute;
  top: clamp(12px, 3vw, 32px);
  bottom: clamp(12px, 3vw, 32px);
  z-index: 31;
  width: 400px;
  min-width: 0;
  overflow: hidden;
}
.battle-info-panel-left {
  left: clamp(12px, 3vw, 32px);
}
.battle-info-panel-right {
  right: clamp(12px, 3vw, 32px);
}
.battle-info-frame {
  position: relative;
  width: 400px;
  height: 100%;
  box-sizing: border-box;
  padding-top: 94px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
  background-image:
    url("./assets/icons/strategic/battle_card_frame_top.png"),
    url("./assets/icons/strategic/battle_card_frame_bottom.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 400px 112px, 400px 18px;
  border: 0;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.58));
  color: var(--tc-paper);
  text-align: center;
  overflow: hidden;
}
.battle-info-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 112px;
  bottom: 18px;
  background: url("./assets/icons/strategic/battle_card_frame_middle.png") repeat-y top center / 400px 1px;
}
.battle-info-frame > * {
  position: relative;
  z-index: 1;
}
.battle-info-actions {
  position: absolute;
  top: 62px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.battle-info-action-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.battle-info-close {
  padding: 3px 6px;
  border: 1px solid rgba(231,201,135,0.45);
  background: rgba(0,0,0,0.32);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
}
.battle-info-frame .battle-card-expanded-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.battle-card-header {
  padding: 0 14px 6px;
  flex: 0 0 auto;
}
.battle-card-body {
  padding: 8px 12px 9px;
  flex: 0 0 auto;
  min-width: 0;
}
.battle-card-vp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
}
.battle-card-vp-track {
  display: flex;
  min-width: 0;
  height: 12px;
  border: 1px solid #000;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0,0,0,0.42);
}
.battle-card-vp-seg {
  min-width: 0;
  border-right: 1px solid rgba(0,0,0,0.55);
  color: #fff;
  font-family: var(--tc-font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.battle-card-vp-seg:last-child { border-right: none; }
.battle-card-vp-seg span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.battle-card-vp-countdown,
.battle-card-vp-empty {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-brass-hi);
  white-space: nowrap;
  text-align: center;
}
.battle-card-expanded-body {
  max-height: 48vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.battle-card-expanded-body .force-list {
  gap: 8px;
  min-width: 0;
}
.battle-card-expanded-body .nation-force-block {
  background: linear-gradient(180deg, rgba(231,201,135,0.08), rgba(0,0,0,0.24));
  border-color: rgba(231,201,135,0.24);
  min-width: 0;
  overflow: hidden;
}
.battle-card-expanded-body .nation-force-block summary {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  padding: 7px;
  min-width: 0;
}
.battle-card-expanded-body .nation-force-block summary::marker,
.battle-card-expanded-body .nation-force-block summary::-webkit-details-marker {
  display: none;
  content: "";
}
.battle-card-expanded-body .nation-force-name,
.battle-card-expanded-body .nation-force-commander-name {
  min-width: 0;
  text-align: left;
}
.battle-card-expanded-body .nation-force-name strong,
.battle-card-expanded-body .nation-force-name em,
.battle-card-expanded-body .nation-force-commander-name strong,
.battle-card-expanded-body .nation-force-commander-name em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-card-expanded-body .battle-force-crest {
  width: 32px;
  height: 32px;
}
.battle-card-expanded-body .nation-force-commander {
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}
.battle-card-expanded-body .nation-force-division-grid {
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 4px;
  padding: 6px;
}
.battle-card-expanded-body .nation-force-division-grid img {
  height: 36px;
}
.battle-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 7px 9px 8px;
}
.battle-card-view-map,
.battle-card-expand-button {
  all: unset;
  box-sizing: border-box;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  border: 1px solid rgba(231,201,135,0.48);
  background: linear-gradient(180deg, rgba(231,201,135,0.17), rgba(0,0,0,0.28));
  color: var(--tc-brass-hi);
  box-shadow: inset 0 1px 0 rgba(255,236,185,0.16), 0 1px 2px rgba(0,0,0,0.45);
}
.battle-card-view-map {
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.battle-card-expand-button {
  width: 34px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(255,226,160,0.62);
}
.battle-card-expand-button img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.75));
}
.battle-card-view-map:hover:not(:disabled),
.battle-card-expand-button:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(231,201,135,0.28), rgba(0,0,0,0.22));
}
.battle-card-view-map-secondary {
  color: var(--tc-paper-2);
  border-color: rgba(154,167,180,0.48);
  background: linear-gradient(180deg, rgba(154,167,180,0.14), rgba(0,0,0,0.3));
}
.battle-card-status-report {
  min-width: 0;
  width: 100%;
  margin-top: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-paper-2);
  text-align: center;
}
.battle-card-status-report-empty {
  visibility: hidden;
}
.battle-card-tactical-attention {
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(231,201,135,0.48);
  background: rgba(231,201,135,0.1);
  color: var(--tc-brass-hi);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.battle-card-nation {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(122,139,150,0.22);
}
.battle-card-nation:last-child { border-bottom: none; padding-bottom: 0; }
.battle-card-nation-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.battle-card-nation-crest {
  width: 24px;
  height: 24px;
  background: var(--nation-color, #555);
  border: 1px solid rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.battle-card-nation-crest img { width: 100%; height: 100%; object-fit: contain; }
.battle-card-nation-title {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.battle-card-nation-title strong {
  font-family: var(--tc-font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tc-paper);
}
.battle-card-nation-title em {
  font-style: normal;
  font-size: 10px;
  color: var(--tc-steel);
}
.battle-card-commander {
  display: flex;
  align-items: center;
  gap: 6px;
}
.battle-card-commander-portrait {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.battle-card-commander-name {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-paper);
}
.battle-card-commander-vacant {
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-steel);
}
.battle-card-signup-button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  padding: 3px 9px;
  border: 1px solid rgba(231,201,135,0.6);
  background: linear-gradient(180deg, rgba(231,201,135,0.18), rgba(231,201,135,0.04));
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.battle-card-signup-button:hover { background: rgba(231,201,135,0.28); }

.battle-card-division-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
}
.battle-card-division-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.battle-card-division-grid img {
  width: 100%;
  height: 38px;
  object-fit: contain;
}
.battle-card-division-grid figcaption {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  color: var(--tc-paper-2);
  text-align: center;
}
.battle-card-title {
  display: block;
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-paper);
  line-height: 1.2;
}
.battle-card-body {
  padding: 8px 12px 9px;
}
.battle-card-count {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-paper-2);
  letter-spacing: 0.04em;
}

/* Per-nation commander row in the battle info panel */
.nation-force-commander {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.nation-force-commander-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nation-force-commander-name strong { color: var(--tc-paper); }
.nation-force-commander-name em { color: var(--tc-steel); font-style: normal; font-size: 11px; }
.nation-force-commander-vacant {
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-steel);
}
/* Your own commander row doubles as the way into the battle (playtest
   2026-09-02). It keeps the row's layout exactly — portrait, name, role — and
   adds the label, so the affordance reads as "this seat is yours". */
button.nation-force-commander-play {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid rgba(231,201,135,0.45);
  background: linear-gradient(180deg, rgba(231,201,135,0.16), rgba(231,201,135,0.03));
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
}
button.nation-force-commander-play:hover {
  background: rgba(231,201,135,0.26);
  border-color: rgba(231,201,135,0.75);
}
.nation-force-commander-play-label {
  margin-left: auto;
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-brass-hi);
}

.nation-force-signup-button {
  all: unset;
  cursor: url("./assets/cursors/cursor-select.png") 8 3, pointer;
  padding: 5px 12px;
  border: 1px solid rgba(231,201,135,0.6);
  background: linear-gradient(180deg, rgba(231,201,135,0.18), rgba(231,201,135,0.04));
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: auto;
}
.nation-force-signup-button:hover { background: rgba(231,201,135,0.28); }

/* PT-64: the operational battle panel's tactical seat rows. The strategic
   panel's commander comes from a roster profile with a PortraitTile; the
   operational map only has the served portrait path, so it frames it itself
   at the same size the tile renders at. */
.nation-force-commander-portrait {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid rgba(231,201,135,0.35);
  background: rgba(0,0,0,0.3);
  overflow: hidden;
}
.nation-force-commander-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PT-64: the same "your seat is the way in" affordance on the Ongoing Battles
   card, so the two tiers read identically. */
.signup-command-card.signup-command-card-play {
  border-color: rgba(231,201,135,0.7);
  background: linear-gradient(180deg, rgba(231,201,135,0.18), rgba(231,201,135,0.04));
}
.signup-command-card.signup-command-card-play:hover {
  background: rgba(231,201,135,0.28);
}

.nation-force-division-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
  padding: 8px 0;
}
.nation-force-division-grid img {
  width: 100%;
  height: 48px;
  object-fit: contain;
}
.nation-force-division-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.signup-info-panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nation-force-division-grid figcaption {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-paper-2);
  text-align: center;
}

/* Withdrawn-battalions side panel */
.operational-withdrawn-group { margin-bottom: 14px; }
.operational-withdrawn-division {
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-brass-hi);
  margin-bottom: 4px;
}
.operational-withdrawn-list { list-style: none; margin: 0; padding: 0; }
.operational-withdrawn-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(231,201,135,0.14);
  color: var(--tc-paper);
}
.operational-withdrawn-strength { font-variant-numeric: tabular-nums; color: var(--tc-steel); }

/* Victory-progress bar in the operational top bar */
.operational-victory-bar {
  flex: 1.5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}
.operational-victory-caption {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tc-steel, #9aa7b4);
  text-align: center;
}
.operational-victory-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.operational-victory-track {
  flex: 1;
  display: flex;
  height: 16px;
  min-width: 0;
  border: 1px solid #000;
  border-radius: 2px;
  overflow: hidden;
}
.operational-victory-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.operational-victory-seg:last-child { border-right: none; }
.operational-victory-seg span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.operational-victory-status {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--tc-brass-hi, #f0d79a);
}
.operational-victory-status img { height: 16px; width: auto; }

/* Yield-VP control in the victory bar */
.operational-status-report-select,
.operational-victory-yield {
  flex: 0 0 auto;
  max-width: 160px;
  background: var(--tc-grad-tab-off);
  color: var(--tc-brass-hi, #f0d79a);
  border: 1px solid #000;
  border-radius: 2px;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}
.operational-status-report-select {
  max-width: 132px;
  color: var(--tc-paper);
  border-color: rgba(231,201,135,0.42);
}
.operational-status-report-select option,
.operational-victory-yield option { color: #111; }

/* Move replay panel + tick popup */
.operational-moves-panel {
  font-family: var(--tc-font-display);
  color: var(--tc-paper);
}
.replay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.replay-turn-nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.replay-turn-window,
.replay-turn-shuttle {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.replay-turn-shuttle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.replay-turn-nav button {
  all: unset;
  position: relative;
  min-height: 25px;
  display: grid;
  place-items: center;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: var(--tc-brass-hi, #f0d79a);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
  border: 1px solid rgba(231, 201, 135, 0.4);
  background: var(--tc-grad-tab-off);
}
.replay-turn-window button.unknown { color: #697078; border-color: rgba(111,120,128,0.3); }
.replay-turn-window button.selected {
  color: #15100a;
  background: linear-gradient(180deg, var(--tc-brass-hi), #94723f);
  box-shadow: 0 0 0 1px rgba(231,201,135,0.35);
}
.replay-turn-spinner {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(231,201,135,0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: replay-spin 0.8s linear infinite;
}
.replay-turn-nav button[disabled] { opacity: 0.3; cursor: default; }
.replay-controls { display: flex; gap: 4px; padding: 8px; }
.replay-controls button {
  all: unset;
  flex: 1;
  text-align: center;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 6px 4px;
  font-size: 11px;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  color: var(--tc-brass-hi, #f0d79a);
}
.replay-controls button[disabled] { opacity: 0.4; cursor: default; }
.replay-move-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; }
.replay-move {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.replay-move-type { display: inline-flex; width: 16px; flex: none; }
.replay-move-type img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: auto;
}
.replay-move-flag {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 2px;
}
.replay-move-flag img { width: 100%; height: 100%; object-fit: contain; }
.replay-move.done { opacity: 0.45; }
.replay-move.next { background: rgba(231, 201, 135, 0.12); }
.replay-move-seq { color: var(--tc-steel); width: 18px; }
.replay-move-name { font-weight: 600; flex: 1; }
.replay-move-dir { color: var(--tc-steel); font-variant-numeric: tabular-nums; }
.replay-empty { padding: 10px; color: var(--tc-steel); font-size: 11px; }
.replay-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px 20px;
  color: var(--tc-steel);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.replay-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(231, 201, 135, 0.22);
  border-top-color: var(--tc-brass-hi, #f0d79a);
  border-radius: 50%;
  animation: replay-spin 0.8s linear infinite;
}
@keyframes replay-spin {
  to { transform: rotate(360deg); }
}

/* PT-20 — the tick dispatch. The old box was a centred alert with two ghost
   buttons and no hierarchy: the turn number, the move count and the queue all
   read at the same weight, and the queue line appeared and disappeared, which
   resized the card under the cursor. This is a dispatch strip instead — a turn
   stamp, then what happened, then what to do about it — using the same
   stamp/kicker idiom as the tactical turn bar so the two tiers announce a
   resolved turn the same way. */
.op-tick-dispatch {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 18px;
  /* A floor width, so a second unwatched turn lengthens the sentence rather
     than resizing the card while the pointer is over its buttons. */
  min-width: 460px;
  padding: 10px 16px;
  background: rgba(24, 16, 8, 0.95);
  border: 1px solid var(--tc-brass-hi, #f0d79a);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  animation: op-tick-arrive 220ms ease-out;
}
@keyframes op-tick-arrive {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .op-tick-dispatch { animation: none; }
}
.op-tick-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-right: 16px;
  border-right: 1px solid rgba(231, 201, 135, 0.24);
}
.op-tick-kicker {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(231, 201, 135, 0.72);
}
.op-tick-stamp strong {
  font-size: 22px;
  line-height: 1;
  color: var(--tc-brass-hi, #f0d79a);
  font-variant-numeric: tabular-nums;
}
.op-tick-say {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.op-tick-headline {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--tc-paper);
}
.op-tick-sub {
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: rgba(231, 201, 135, 0.72);
  /* This line sizes the card. Letting it wrap changed the card's HEIGHT between
     the queued and unqueued states, which is the jump the redesign is about —
     and so would letting it COLLAPSE, which is what an empty span does in a
     flex column. The idle line is blank (Daniel, 2026-08-25), so the height is
     reserved here instead of being carried by words nobody needed. */
  min-height: 1.35em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-tick-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.op-tick-btn {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(231, 201, 135, 0.5);
  color: var(--tc-brass-hi, #f0d79a);
  white-space: nowrap;
}
.op-tick-btn:hover { border-color: var(--tc-brass-hi, #f0d79a); background: rgba(231, 201, 135, 0.1); }
.op-tick-btn:focus-visible { outline: 2px solid var(--tc-brass-hi, #f0d79a); outline-offset: 2px; }
/* One primary action. "Watch moves" is why the card exists; Dismiss is the way
   out, and reading as an equal made the pair feel like a question rather than
   an invitation. */
.op-tick-btn--primary {
  background: rgba(231, 201, 135, 0.16);
  border-color: var(--tc-brass-hi, #f0d79a);
  color: #f7e6bd;
}
.op-tick-btn--primary:hover { background: rgba(231, 201, 135, 0.26); }
.op-tick-btn[disabled] { opacity: 0.6; cursor: default; }

/* S-24 notices: local, per-commander facts about a plan (an order refused, an
   order that could not be carried). Not P-03 toasts — there is no national
   event behind these — so they live in the tier they happened in, stacked
   below the tick popup rather than over it. */
.operational-notice-stack {
  /* Left rail, clear of the top bar. Deliberately NOT centred under the tick
     popup: both appear on the same tick (a dropped order is news about the tick
     that dropped it), and a stack that grows upward into the popup hides the
     Watch/Dismiss buttons the popup exists for. */
  position: absolute;
  top: 80px;
  left: 20px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 40px));
  pointer-events: none;
}
.operational-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(24, 16, 8, 0.95);
  border: 1px solid rgba(226, 148, 58, 0.6);
  border-left-width: 3px;
  border-radius: 3px;
  color: var(--tc-paper);
  pointer-events: auto;
}
.operational-notice-body { display: flex; flex-direction: column; gap: 3px; }
.operational-notice-title {
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #e2943a;
}
.operational-notice-text { font-size: 11px; line-height: 1.45; color: #cfc7b4; }
.operational-notice-dismiss {
  all: unset;
  margin-left: auto;
  padding: 0 4px;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  color: #8f9aa5;
  font-size: 14px;
  line-height: 1;
}
.operational-notice-dismiss:hover { color: var(--tc-paper); }

/* S-24: an order the server carried across a turn that resolved under it. */
.operational-carried-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(226, 148, 58, 0.55);
  border-radius: 2px;
  color: #e2943a;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Terminal battle-conclusion modal (province seized). */
.operational-conclusion-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 14;
  background: rgba(18, 12, 6, 0.97);
  border: 1px solid var(--tc-brass-hi, #f0d79a);
  border-radius: 6px;
  padding: 24px 34px;
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}
.op-conclusion-body { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.op-conclusion-title {
  font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tc-brass-hi, #f0d79a);
}
.op-conclusion-result { font-size: 14px; }
.op-conclusion-flag { width: 56px; height: 56px; border-radius: 3px; }
.op-conclusion-flag img { width: 100%; height: 100%; object-fit: contain; }
.operational-conclusion-popup button {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  margin-top: 8px;
  padding: 8px 18px;
  font-size: 12px;
  border: 1px solid rgba(231, 201, 135, 0.6);
  color: var(--tc-brass-hi, #f0d79a);
  background: var(--tc-grad-tab-off);
}

/* Permanent bottom battalion bar (collapsible) */
.operational-battalion-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  background: linear-gradient(180deg, rgba(23,31,37,0.97), rgba(10,15,19,0.97));
  border-top: 1px solid #000;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.55);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
}
/* Three fixed columns sized by window width (not content): left = unit picker,
   middle = selected-unit stats, right = orders. Each column owns an
   always-visible top row and an expand-only body, so columns never reflow as
   content changes. */
.operational-bar-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(280px, 1.5fr) minmax(360px, 1.6fr);
  align-items: start;
}
.operational-bar-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid rgba(0,0,0,0.5);
}
.operational-bar-col-right { border-right: none; }
.operational-bar-col-top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 14px;
  flex: 0 0 auto;
}
.operational-bar-col-right .operational-bar-col-top { justify-content: flex-end; }
/* Collapse/expand each column's body with a quick height animation. The
   expanded body is a FIXED height so the bar never resizes with content (a
   Supply Hub with fewer stats leaves empty space rather than shrinking). */
.operational-bar-col-body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: height 0.18s ease, opacity 0.18s ease, padding 0.18s ease;
  padding: 0 14px;
  height: 0;
}
.operational-battalion-bar.collapsed .operational-bar-col-body {
  height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.operational-battalion-bar.expanded .operational-bar-col-body {
  height: 150px;
  opacity: 1;
  padding-top: 8px;
  padding-bottom: 12px;
}
.operational-bar-queue { display: flex; gap: 6px; flex: 0 0 auto; }
.operational-bar-cycle {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 3px 9px;
  font-size: 11px;
  background: var(--tc-grad-tab-off, rgba(40,52,62,0.9));
  border: 1px solid #000;
  color: var(--tc-good, #9fce8f);
}
.operational-bar-cycle:hover { background: rgba(231,201,135,0.18); }
.operational-bar-hexchip {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  padding: 3px 9px;
  font-size: 11px;
  border: 1px solid rgba(231,201,135,0.4);
  color: var(--tc-paper-2);
  flex: 0 0 auto;
  white-space: nowrap;
}
.operational-bar-hexchip:hover { background: rgba(231,201,135,0.14); }
.operational-bar-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--tc-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--tc-brass-hi, #f0d79a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.operational-bar-toggle {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  width: 30px;
  text-align: center;
  font-size: 14px;
  color: var(--tc-steel, #9aa7b4);
  flex: 0 0 auto;
}
.operational-modifiers-toggle {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  width: 24px;
  height: 22px;
  border: 1px solid rgba(231,201,135,0.38);
  color: var(--tc-steel, #9aa7b4);
  text-align: center;
  font-size: 12px;
  line-height: 22px;
  flex: 0 0 auto;
}
.operational-modifiers-toggle:hover,
.operational-modifiers-toggle.active {
  color: var(--tc-brass-hi, #f0d79a);
  border-color: rgba(231,201,135,0.75);
  background: rgba(231,201,135,0.12);
}
.operational-modifiers-foldout {
  position: absolute;
  right: 38px;
  bottom: calc(100% + 8px);
  width: 290px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(23,31,37,0.98), rgba(10,15,19,0.98));
  border: 1px solid rgba(231,201,135,0.55);
  box-shadow: 0 6px 24px rgba(0,0,0,0.62);
}
.operational-modifiers-title {
  margin-bottom: 8px;
  color: var(--tc-brass-hi, #f0d79a);
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.operational-modifier-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tc-paper-2);
  font-size: 11px;
}
.operational-modifier-light {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #28322f;
  border: 1px solid #080b0a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.operational-modifier-light.active {
  background: var(--tc-good, #75c96b);
  box-shadow: 0 0 7px rgba(117,201,107,0.8);
}
.operational-bar-counts {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--tc-steel, #9aa7b4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.operational-bar-counts strong { color: var(--tc-paper); }
/* Left column: tight, narrow vertical stack of the units sharing the hex. */
.operational-bar-unit-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Middle column body. Subtitle (short name - type) sits directly under the
   always-visible full name; the flag + icon block sits left, stats right. */
.operational-bar-subtitle {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--tc-steel, #9aa7b4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Keep it clear of (and visually above) the tall flag/icon in the stats row
     below — it was crowding the flag and reading as "obscured". */
  flex: 0 0 auto;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.operational-bar-stats-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
.operational-bar-idblock {
  display: flex;
  align-items: stretch;
  gap: 10px;
  /* The stat list is prioritized: the id block yields when the bar narrows.
     Within it the (decorative) unit icon shrinks first; the flag and elements
     button keep their size. */
  flex: 0 1 auto;
  min-width: 0;
  align-self: stretch;
}
.operational-bar-flag,
.operational-bar-elements-btn { flex: 0 0 auto; }
/* Nation flag tile: reuses the strategic profile card's .nation-crest-tile /
   .crest-caption rendering verbatim, only constrained to the bar's width. The
   tile grows to fill the available vertical space in the bar body. */
.operational-bar-flag {
  width: 64px;
  flex: 0 0 auto;
  padding: 0;
  justify-content: center;
}
.operational-bar-flag .nation-crest-tile {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.operational-bar-flag .crest-caption {
  font-size: 8px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Unit icon fills the body height alongside the flag tile. */
.operational-battalion-bar .operational-context-detail-icon {
  width: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Shrinks first when the bar narrows (it is decorative). */
  flex: 0 1 auto;
  min-width: 0;
}
/* Square-ish "Forward elements / Reserves" button next to the unit icon. */
.operational-bar-elements-btn {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  align-self: stretch;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 84px;
  padding: 6px;
  text-align: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(231,201,135,0.55);
  color: var(--tc-paper);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.operational-bar-elements-btn:hover { background: rgba(231,201,135,0.2); }
.operational-bar-elements-rule {
  width: 70%;
  height: 1px;
  background: rgba(231,201,135,0.5);
}
/* Forward / reserve element modal. */
.operational-element-modal {
  position: absolute;
  left: 50%;
  bottom: 188px;
  transform: translateX(-50%);
  z-index: 9;
  width: min(640px, 92%);
  background: linear-gradient(180deg, rgba(23,31,37,0.98), rgba(10,15,19,0.98));
  border: 1px solid #000;
  box-shadow: 0 6px 26px rgba(0,0,0,0.6);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  padding: 12px 14px 14px;
}
.operational-element-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.operational-element-title {
  font-family: var(--tc-font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-brass-hi, #f0d79a);
}
.operational-element-close {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  font-size: 14px;
  color: var(--tc-steel, #9aa7b4);
  padding: 2px 6px;
}
.operational-element-close:hover { color: var(--tc-paper); }
.operational-element-loading { padding: 24px; text-align: center; color: var(--tc-steel); }
.operational-element-hint {
  margin: -4px 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--tc-steel, #9aa7b4);
}
.operational-construct-modal {
  position: absolute;
  right: 24px;
  bottom: 188px;
  z-index: 10;
  width: 320px;
  background: linear-gradient(180deg, rgba(23,31,37,0.98), rgba(10,15,19,0.98));
  border: 1px solid #000;
  box-shadow: 0 6px 26px rgba(0,0,0,0.6);
  color: var(--tc-paper);
  font-family: var(--tc-font-mono);
  padding: 12px;
}
.operational-construct-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.operational-construct-option {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 6px 8px;
  border: 1px solid rgba(231,201,135,0.32);
  background: linear-gradient(180deg, rgba(231,201,135,0.08), rgba(0,0,0,0.34));
}
.operational-construct-option:hover {
  border-color: rgba(231,201,135,0.82);
  background: linear-gradient(180deg, rgba(231,201,135,0.18), rgba(0,0,0,0.28));
}
.operational-construct-option img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.operational-construct-option span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.operational-construct-option strong {
  font-family: var(--tc-font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tc-paper);
}
.operational-construct-option em {
  font-style: normal;
  font-size: 10px;
  color: var(--tc-steel);
}
.operational-element-field-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-steel, #9aa7b4);
  margin-bottom: 6px;
}
.operational-element-field-label span { color: var(--tc-paper); }
/* Static 10-wide grid; rows beyond the visible two scroll. */
.operational-element-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  max-height: 116px;
  overflow-y: auto;
}
.operational-element-separator {
  height: 1px;
  background: rgba(231,201,135,0.4);
  margin: 12px 0;
}
.operational-element-cell {
  all: unset;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px 2px 3px;
  min-height: 60px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.6);
}
.operational-element-cell:hover:not([disabled]):not(.blank) { border-color: rgba(231,201,135,0.9); }
.operational-element-cell img { width: 40px; height: 40px; object-fit: contain; }
.operational-element-cell-name {
  font-size: 7px;
  line-height: 1.1;
  text-align: center;
  color: var(--tc-steel, #9aa7b4);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operational-element-cell.blank { background: transparent; border-style: dashed; border-color: rgba(255,255,255,0.06); cursor: default; }
.operational-element-cell.locked { cursor: default; opacity: 0.55; }
.operational-element-lock {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 9px;
}
/* Battle panel: reuses the strategic battle-info-panel / battle-info-frame
   chrome (positioned bottom: above the battalion bar so it doesn't overlap). */
.operational-battle-modal.battle-info-panel {
  bottom: 196px;
}
/* 7-hex battle illustration. */
.op-battle-hexfig-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}
.op-hexfig { width: 200px; height: 200px; }
.op-hexfig-hex {
  fill: rgba(0,0,0,0.22);
  stroke: rgba(231,201,135,0.55);
  stroke-width: 1.5;
}
/* Engaged-unit icon grid inside each nation card. */
.op-battle-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 4px;
  padding: 6px 4px 2px;
}
.op-battle-card:hover { border-color: rgba(231,201,135,0.7); }
.op-battle-nations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.op-battle-nations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.op-battle-nation-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-brass-hi, #f0d79a);
  margin-bottom: 6px;
}
.op-battle-nation-head span:last-child { color: var(--tc-steel); }
.op-battle-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  flex: 0 0 auto;
}
.op-battle-units {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 36vh;
  overflow-y: auto;
}
.op-battle-units li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.op-battle-fc { color: var(--tc-steel); font-variant-numeric: tabular-nums; }
/* "Ongoing Battles" side panel: per-battle cards, attackers vs defenders. */
.op-battle-card-list { list-style: none; margin: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 10px; }
.op-battle-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.6);
  padding: 8px 10px;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
}
.op-battle-card:focus-visible { outline: 1px solid var(--tc-brass-hi); outline-offset: 1px; }
.op-battle-card-result {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-brass-hi, #f0d79a);
  text-align: center;
}
.op-battle-card-handoff {
  margin-top: 8px;
  padding-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.op-battle-card-phase {
  color: var(--tc-steel, #9aa7b4);
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.op-battle-card-action {
  padding: 5px 9px;
  border: 1px solid rgba(231,201,135,0.55);
  background: linear-gradient(180deg, rgba(231,201,135,0.2), rgba(0,0,0,0.3));
  color: var(--tc-brass-hi, #f0d79a);
  font-family: var(--tc-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: url("./assets/cursors/cursor-hand.png") 8 3, pointer;
  pointer-events: none;
}
.op-battle-card-action:hover,
.op-battle-card-action:focus-visible {
  border-color: var(--tc-brass-hi, #f0d79a);
  background: linear-gradient(180deg, rgba(231,201,135,0.32), rgba(0,0,0,0.24));
  outline: none;
}
/* "Resolved Battles" sub-separator inside the battle-list panel. */
.operational-side-panel-subhead {
  padding: 10px 12px 6px;
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-brass-hi, #f0d79a);
  border-top: 1px solid rgba(231,201,135,0.25);
  margin-top: 4px;
}
/* In Progress / Resolved label between the battle-panel title and bar. */
.op-battle-status {
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-steel, #9aa7b4);
  margin-bottom: 6px;
}
.op-battle-status.resolved { color: var(--tc-brass-hi, #f0d79a); }
/* Unit strength bar: green current, red losses, grey unfilled capacity. */
.op-battle-unit-card { padding-bottom: 6px; }
.op-strength-bar {
  display: flex;
  width: 86%;
  height: 4px;
  margin-top: 2px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(0,0,0,0.6);
  overflow: hidden;
}
.op-strength-cur { background: #5bbd55; height: 100%; }
.op-strength-loss { background: #c2402f; height: 100%; }
.op-battle-card-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
}
.op-battle-card-head {
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-brass-hi, #f0d79a);
  margin-bottom: 5px;
}
.op-battle-card-arrow {
  align-self: center;
  font-size: 18px;
  color: var(--tc-steel, #9aa7b4);
}
.op-battle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.op-battle-row .op-battle-flag {
  width: 22px;
  height: 16px;
  flex: 0 0 auto;
}
.op-battle-row .op-battle-flag img { width: 80%; height: 80%; }
.op-battle-row-icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.op-battle-row-name {
  font-size: 11px;
  color: var(--tc-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-battle-row-empty { font-size: 11px; color: var(--tc-steel, #9aa7b4); }
/* Stat block: pushed to the right, labels close to their numbers. */
.operational-battalion-bar .operational-stat-list {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 28px;
  row-gap: 2px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}
/* Flatten each label/value pair into the shared grid so labels line up in one
   left column and values in one right-aligned column. */
.operational-battalion-bar .operational-stat-list > div { display: contents; }
.operational-battalion-bar .operational-stat-list dt { text-align: left; }
.operational-battalion-bar .operational-stat-list dd { text-align: right; }
/* Responsive bottom bar: the unit stat list is never squashed — everything
   else scales down first (Prev/Next text collapses to arrows; the flag, unit
   icon, elements button, and counts shrink). */
@media (max-width: 1180px) {
  .operational-bar-grid {
    grid-template-columns: minmax(132px, 0.7fr) minmax(300px, 1.7fr) minmax(300px, 1.2fr);
  }
  .operational-bar-cycle .cycle-label { display: none; }
  .operational-bar-counts { font-size: 10px; gap: 8px; }
  .operational-battalion-bar .operational-stat-list { column-gap: 18px; }
}
@media (max-width: 940px) {
  .operational-bar-flag { width: 46px; }
  .operational-bar-elements-btn { width: 56px; font-size: 8px; padding: 4px; gap: 2px; }
  .operational-bar-idblock { gap: 6px; }
  .operational-bar-counts { font-size: 9px; gap: 6px; }
}
.operational-bar-empty {
  color: var(--tc-steel, #9aa7b4);
  font-size: 12px;
}

/* Tactical battle view: full-bleed 3D canvas + right-hand order panel. */
.tactical-shell { position: absolute; inset: 0; display: flex; z-index: 6; }
.tactical-canvas { flex: 1 1 auto; display: block; background: #101418; min-width: 0; }
.tactical-panel {
  width: 290px; flex: 0 0 auto; box-sizing: border-box; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(23,31,37,0.97), rgba(10,15,19,0.98));
  border-left: 1px solid #000; color: var(--tc-paper);
  font-family: var(--tc-font-mono); overflow-y: auto;
}
.tactical-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.tactical-head strong { color: var(--tc-brass-hi, #f0d79a); letter-spacing: 0.06em; font-family: var(--tc-font-display); }
.tactical-units { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.tactical-unit {
  all: unset; cursor: pointer; display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 8px; font-size: 11px; border: 1px solid rgba(231,201,135,0.25);
}
.tactical-unit.selected { border-color: var(--tc-brass-hi, #f0d79a); background: rgba(231,201,135,0.1); }
.tactical-unit-mp { color: var(--tc-steel, #9aa7b4); }
.tactical-order-current { font-size: 11px; color: var(--tc-steel, #9aa7b4); margin-bottom: 6px; }
.tactical-fire-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.tactical-btn {
  all: unset; cursor: pointer; display: block; text-align: center; padding: 7px 10px;
  font-size: 11px; border: 1px solid rgba(231,201,135,0.5); color: var(--tc-brass-hi, #f0d79a);
  background: var(--tc-grad-tab-off); margin-top: 4px;
}
.tactical-btn[disabled] { opacity: 0.4; cursor: default; }
.tactical-btn.resolve { margin-top: 12px; border-color: var(--tc-brass-hi, #f0d79a); font-weight: 700; }
.tactical-result { font-family: var(--tc-font-display); font-size: 15px; color: var(--tc-brass-hi, #f0d79a); margin-bottom: 12px; }
.map3d-overlay { position: fixed; inset: 0; z-index: 49; background: #9fb6c9; }
.tactical3d-overlay { position: fixed; inset: 0; z-index: 49; background: #9fb6c9; }
.tactical3d-shell { position: absolute; inset: 0; overflow: hidden; }
.tactical3d-error { position: fixed; inset: 0; display: grid; place-items: center; color: var(--tc-paper, #e2dccd); background: #101418; font-family: var(--tc-font-display); }
.map3d-canvas { width: 100vw; height: 100vh; display: block; cursor: url("./assets/cursors/cursor-select.png") 8 3, auto; }
.map3d-canvas.tactical3d-camera-rotate {
  cursor: url("./assets/cursors/cursor-drag.png") 32 32, grabbing;
}
.map3d-canvas.tactical3d-camera-pan {
  cursor: url("./assets/cursors/cursor-move.png") 31 7, grabbing;
}

/* tactical3d HUD placeholder scaffold START */
.tac3d-hud-root {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  color: #e7dcc4;
  font-family: var(--tc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
.tac3d-panels,
.tac3d-cards-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tac3d-panel {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(207, 170, 86, 0.34);
  background: rgba(10, 16, 22, 0.86);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
}
.tac3d-kicker {
  margin-bottom: 6px;
  color: #cfae64;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tac3d-muted {
  color: #8f9aa5;
  font-size: 11px;
}
/* Top-left ☰ menu (shared .operational-options family, finding L) */
.tac3d-options-host {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 7;
  pointer-events: auto;
}
/* Top-right overlay toggles (shared .overlay-chips family, finding E) — a
   column beside the minimap; the battalion bar is shortened to make room. */
.tac3d-overlay-chips {
  top: 12px;
  right: 268px;
  z-index: 6;
  pointer-events: auto;
}
/* No standalone supply box: it showed the T-02 entry snapshot (static all
   battle, and both sides' — INV-1) next to the live stockpile in the battalion
   bar, which is the number that actually moves. The bar reclaims most of its
   space, stopping clear of the ☰ menu button. */
.tac3d-battalions {
  left: 60px;
  /* Clears the overlay chips (right: 268px + ~166px wide) — the bar is
     shortened to make room for them rather than sliding underneath. */
  right: 452px;
  top: 12px;
  min-height: 126px;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.tac3d-battalion-tab {
  min-width: 220px;
  flex: 1 1 250px;
  padding: 12px 14px;
  border-right: 1px solid rgba(132, 148, 162, 0.18);
}
/* Off-map support slots: wide enough that the label is never clipped, and with
   room for the unit cards these will carry later. */
.tac3d-battalion-tab.empty {
  min-width: 140px;
  flex: 0 0 148px;
}
.tac3d-battalion-tab > strong,
.tac3d-battalion-tab > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac3d-battalion-tab > strong {
  color: #f0d184;
  font-size: 12px;
}
.tac3d-battalion-tab > span {
  margin-top: 4px;
  color: #8f9aa5;
  font-size: 10px;
  text-transform: uppercase;
}
.tac3d-battalion-tab.empty > strong { color: #9aa6b2; }
.tac3d-battalion-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Name and stockpile sit together at the left rather than being pushed to
   opposite ends of a tab that is several hundred pixels wide — they are one
   readout, and the space to their right is for unit cards. */
.tac3d-battalion-header {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.tac3d-battalion-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0d184;
  font-size: 12px;
}
.tac3d-battalion-supply {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8f9aa5;
  font-size: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tac3d-battalion-supply-label { letter-spacing: 0.08em; }
.tac3d-battalion-supply-bar {
  width: 92px;
  height: 7px;
  /* Flex, not stacked blocks: PT-24 puts the pending slice beside the kept one. */
  display: flex;
  background: rgba(8, 13, 18, 0.62);
  box-shadow: inset 0 0 0 1px rgba(132, 148, 162, 0.32);
  overflow: hidden;
}
.tac3d-battalion-supply-bar > i {
  display: block;
  height: 100%;
  flex: none;
  transition: width 180ms ease-out;
}
/* PT-24: what placing this unit is about to cost, pulsing so it reads as a
   pending charge against the bar rather than supply already gone. */
.tac3d-battalion-supply-bar > i.pending {
  background: #c2453a;
  animation: tac3d-supply-pending 900ms ease-in-out infinite;
}
@keyframes tac3d-supply-pending {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .tac3d-battalion-supply-bar > i.pending { animation: none; }
}
.tac3d-battalion-supply-value {
  color: #cfd7de;
  font-variant-numeric: tabular-nums;
}
.tac3d-battalion-supply-value.pending { color: #ef8a72; }
.tac3d-battalion-units {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 0 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(207, 170, 86, 0.58) rgba(8, 13, 18, 0.32);
}
.tac3d-battalion-units::-webkit-scrollbar { height: 6px; }
.tac3d-battalion-units::-webkit-scrollbar-track { background: rgba(8, 13, 18, 0.32); }
.tac3d-battalion-units::-webkit-scrollbar-thumb { background: rgba(207, 170, 86, 0.58); }
.tac3d-unit-chip {
  flex: 0 0 68px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 6px 6px 5px;
  border: 1px solid rgba(207, 170, 86, 0.24);
  background: rgba(9, 14, 20, 0.58);
  color: #dfe6ec;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.tac3d-unit-chip:hover {
  border-color: rgba(207, 170, 86, 0.52);
  background: rgba(207, 170, 86, 0.12);
}
.tac3d-unit-chip-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: auto;
}
.tac3d-unit-chip-name,
.tac3d-unit-chip-manpower {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac3d-unit-chip-name {
  color: #f1ead9;
  font-size: 10px;
  line-height: 1.1;
}
.tac3d-unit-chip-manpower {
  color: #9fb0bd;
  font-size: 9px;
  line-height: 1.1;
}
.tac3d-minimap {
  right: 12px;
  top: 12px;
  width: 244px;
  padding: 9px;
}
.tac3d-minimap-box {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(207, 170, 86, 0.28);
  background: rgba(8, 13, 18, 0.92);
  overflow: hidden;
}
.tac3d-minimap-canvas,
.tac3d-minimap-dots {
  position: absolute;
  inset: 0;
}
.tac3d-minimap-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}
.tac3d-minimap-dots {
  pointer-events: none;
}
.tac3d-minimap-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(231, 220, 196, 0.52);
  font-size: 10px;
  text-transform: uppercase;
}
.tac3d-minimap-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
}
.tac3d-minimap-dot.selected {
  width: 10px;
  height: 10px;
  border-color: #f0d184;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7), 0 0 10px rgba(240, 209, 132, 0.8);
  z-index: 2;
}
/* T-52, re-ruled 2026-08-25. The bottom HUD used to be four surfaces floating
   at four unrelated offsets — "a bunch of dialogs scattered across the screen".
   They now DOCK: each one's edge is the next one's edge, derived from these
   three numbers rather than typed four times. */
.tactical3d-shell {
  --tac3d-gutter: 12px;
  --tac3d-reserve-w: 276px;
  /* Tracks .tac3d-order-panel's own width, including its narrow-viewport clamp. */
  --tac3d-order-w: min(440px, calc(100vw - 24px));
}
.tac3d-unassigned {
  left: calc(var(--tac3d-gutter) + var(--tac3d-reserve-w));  /* docked to Reserve */
  bottom: var(--tac3d-gutter);
  width: 232px;
  max-height: 218px;
  padding: 10px;
}
/* Wider than Awaiting: it carries a third column (deploy cost) and the header
   row that names all three. */
.tac3d-reserve {
  left: var(--tac3d-gutter);
  bottom: var(--tac3d-gutter);
  width: var(--tac3d-reserve-w);
  max-height: 276px;
  padding: 10px;
}
.tac3d-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #f0d184;
  font-size: 12px;
  text-transform: uppercase;
}
.tac3d-scroll {
  max-height: 168px;
  overflow-y: auto;
}
.tac3d-reserve .tac3d-scroll {
  max-height: 196px;
}
.tac3d-reserve-group + .tac3d-reserve-group {
  margin-top: 10px;
}
.tac3d-reserve-group-title {
  margin: 2px 0 4px;
  color: #f0d184;
  font-size: 10px;
  text-transform: uppercase;
}
/* Command-turn bar (T-24 WeGo progression) */
.tac3d-turnbar-host {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  font-family: var(--tc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
/* T-52 (2026-08-25) — the dock. One bottom-anchored column pinned to the order
   panel's LEFT EDGE, carrying the transport as its top row and the clock bar as
   its bottom row. `align-items: stretch` is the whole trick: the two rows come
   out the same width without either being told a number, which is what Daniel
   asked for, and the column can never overlap the order panel because its right
   edge IS the order panel's left edge. */
.tac3d-dock {
  position: absolute;
  z-index: 5;
  font-family: var(--tc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  right: calc(var(--tac3d-gutter) + var(--tac3d-order-w));
  bottom: var(--tac3d-gutter);
  /* Sized by its CONTENT, not stretched between two floors: pinning the left
     edge as well made the column narrower than the transport's own controls and
     the speed button spilled out over the order panel. The wider row therefore
     sets the width and `align-items: stretch` gives it to the other one — which
     is what "same width" has to mean when the two rows hold different things.
     The cap keeps the dock off Reserve. It deliberately does NOT reserve room
     for Awaiting Orders: Awaiting is on screen only while playback is not, and
     the transport row — the wide one — is on screen only while playback is. */
  max-width: calc(100vw - var(--tac3d-gutter) - var(--tac3d-order-w)
                  - var(--tac3d-gutter) - var(--tac3d-reserve-w));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
}
.tac3d-dock-row {
  display: flex;
  justify-content: stretch;
  min-width: 0;
}
.tac3d-dock-row > * {
  flex: 1 1 auto;
  min-width: 0;
}
/* Inside the dock the rows are laid out by the column, not by the viewport. */
.tac3d-dock .tac3d-panel {
  position: static;
  pointer-events: auto;
}
.tac3d-turnbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  color: #e7dcc4;
}
/* T-50: the same bar after the battle is over — a stepper over the recorded
   command turns. Muted so it never reads as a live order deadline. */
.tac3d-turnbar--review {
  border-color: rgba(207, 170, 86, 0.2);
  color: #b9b09a;
}
.tac3d-turnbar--review .tac3d-turnbar-clock {
  color: #8f9aa5;
  font-size: 11px;
}
/* S-22: the Order of Battle disband arming control. Deliberately understated
   until ticked — it guards an irreversible action sitting next to read-only
   division browsing. */
/* PT-43: the house checkbox chip, not the browser's. The input is still a real
   checkbox — it is taken out of the flow rather than `display: none`, so it
   keeps focus and the keyboard, and the visible chip carries the focus ring. */
.disband-arm {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 7px 10px;
  background: var(--tc-grad-tab-off, rgba(0,0,0,0.22));
  border: 1px solid rgba(132, 148, 162, 0.24);
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-steel);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.disband-arm-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.disband-arm .chip-box {
  border-color: var(--tc-steel);
}

.disband-arm-input:focus-visible + .chip-box {
  outline: 2px solid var(--tc-brass-hi);
  outline-offset: 2px;
}

.disband-arm.armed {
  border-color: rgba(194, 112, 79, 0.55);
  color: #e7dcc4;
}

/* Armed is the dangerous state, so the chip fills in the warning colour rather
   than the ordinary brass an overlay toggle uses. */
.disband-arm.armed .chip-box {
  background: #c2704f;
  border-color: #c2704f;
}
.disband-arm em {
  grid-column: 1 / -1;
  font-family: var(--tc-font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: #7f8a95;
}
.disband-arm.armed em { color: #c2704f; }
.disband-button {
  border-color: rgba(194, 112, 79, 0.6);
  color: #d98b68;
}
.disband-button:hover { background: rgba(194, 112, 79, 0.16); }

/* T-04: the supply-carrier readout in the battalion designer. Turns warning
   when carriers outnumber the units they exist to supply. */
.battalion-stat-card.over strong { color: #c2704f; }

/* T-08 strategic fire policy, inside the Foreign Relations sheet. */
.fire-policy-note {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  color: #9aa6b2;
}
.fire-policy-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  margin-bottom: 6px;
  background: rgba(12, 17, 22, 0.6);
  border: 1px solid rgba(132, 148, 162, 0.3);
  color: #e7dcc4;
  font: inherit;
  font-size: 12px;
}
.fire-policy-search:focus { outline: none; border-color: rgba(207, 174, 100, 0.6); }
.fire-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fire-filter {
  background: rgba(18, 24, 30, 0.6);
  border: 1px solid rgba(132, 148, 162, 0.28);
  color: #9aa6b2;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  padding: 3px 8px;
}
.fire-filter:hover { color: #e7dcc4; border-color: rgba(207, 174, 100, 0.45); }
.fire-filter.active {
  color: #e7dcc4;
  border-color: rgba(207, 174, 100, 0.55);
  background: rgba(207, 174, 100, 0.16);
}
/* PT-04: identity on top, stances beneath — see FirePolicyRow. */
.fire-policy-card {
  display: grid;
  gap: 6px;
  padding: 7px 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid #000;
}

.fire-policy-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nation-crest-tile.fire-policy-crest {
  width: 26px;
  height: 26px;
  flex: none;
}

.fire-policy-card-id { min-width: 0; }

.fire-policy-card-name {
  color: var(--tc-paper, #f3ecd8);
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fire-policy-card-note {
  color: #7f8a95;
  font-family: var(--tc-font-mono);
  font-size: 9px;
}

/* A nation someone actually issued an order about is what a Head of State
   audits; it should not read the same as one sitting at the default. */
.fire-policy-card-note.ordered { color: #cfae64; }

/* Equal thirds so the active stance reads as a segmented control rather than
   three buttons of accidental widths. */
.fire-stances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.fire-stance {
  background: rgba(18, 24, 30, 0.6);
  border: 1px solid rgba(132, 148, 162, 0.28);
  color: #b9c3cd;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  padding: 4px 9px;
  text-align: center;
}
.fire-stance:hover:not(:disabled) { border-color: rgba(207, 174, 100, 0.5); color: #e7dcc4; }
.fire-stance:disabled { opacity: 0.45; cursor: not-allowed; }
.fire-stance.active {
  border-color: #cfae64;
  background: var(--tc-grad-brass);
  box-shadow: var(--tc-bevel), 0 0 8px rgba(231, 201, 135, 0.24);
  color: #15100a;
  font-weight: 700;
}
.fire-stance.active:disabled { opacity: 0.75; }
.fire-policy-empty { padding: 10px 2px; font-size: 11px; color: #7f8a95; }

/* T-08 fire-control dialog: opened from the top-left menu, but centred — who
   you are shooting at is a decision, not a menu flyout, and hanging it off the
   corner it was opened from read as one. */
.tac3d-fire-control {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  max-height: min(72vh, 620px);
  padding: 12px 16px 16px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  color: #e7dcc4;
}
/* The dialog owns its own height, so the list fills what is left of it rather
   than being clipped by the shared 168px panel-scroll cap. */
.tac3d-fire-control .tac3d-scroll {
  min-height: 0;
  max-height: none;
}
.tac3d-fc-close {
  background: transparent;
  border: 0;
  color: #b9c3cd;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
}
.tac3d-fc-close:hover { color: #cfae64; }
.tac3d-fc-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(132, 148, 162, 0.14);
}
.tac3d-fc-row:last-child { border-bottom: 0; }
.tac3d-fc-head { display: flex; align-items: center; gap: 6px; }
.tac3d-fc-swatch {
  width: 9px; height: 9px; flex: none;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.tac3d-fc-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tac3d-fc-theirs { margin-left: auto; font-size: 9px; color: #b9c3cd; white-space: nowrap; }
.tac3d-fc-stances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
/* Each stance is a button plus two marks: an underline under the STANDING order
   and a caption naming the relationship. Both cells are always in the layout —
   reserving the space keeps the row from jumping as the choice moves. */
.tac3d-fc-stance-cell { display: flex; flex-direction: column; }
.tac3d-fc-stance {
  background: rgba(18, 24, 30, 0.6);
  border: 1px solid rgba(132, 148, 162, 0.28);
  color: #b9c3cd;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 6px 0;
}
.tac3d-fc-stance:hover { border-color: rgba(207, 174, 100, 0.5); color: #e7dcc4; }
.tac3d-fc-rule {
  height: 3px;
  margin-top: 3px;
  background: transparent;
}
.tac3d-fc-caption {
  min-height: 13px;
  margin-top: 3px;
  color: #7f8a95;
  font-size: 9px;
  letter-spacing: 0.02em;
  text-align: center;
}
/* Green: the stance in force IS the standing order. */
.tac3d-fc-stance-cell.following.selected .tac3d-fc-stance {
  border-color: #6fae5a;
  background: rgba(111, 174, 90, 0.22);
  color: #e9f3e4;
}
.tac3d-fc-stance-cell.following.selected .tac3d-fc-rule { background: #6fae5a; }
.tac3d-fc-stance-cell.following.selected .tac3d-fc-caption { color: #8fc47b; }
/* Ember: a local order that departs from the standing one. */
.tac3d-fc-stance-cell.disobeying .tac3d-fc-stance {
  border-color: #c2704f;
  background: rgba(194, 112, 79, 0.24);
  color: #ffe4d5;
}
.tac3d-fc-stance-cell.disobeying .tac3d-fc-rule { background: #c2704f; }
.tac3d-fc-stance-cell.disobeying .tac3d-fc-caption { color: #d68d6b; }
/* The standing order while it is NOT in force: marked, but not highlighted —
   it is what was ordered, not what is happening. */
.tac3d-fc-stance-cell.standing.policy .tac3d-fc-rule {
  background: rgba(132, 148, 162, 0.55);
}

/* T-43: the deployment phase reads as a distinct mode, not as a turn that has
   not resolved yet. Warm accent on the bar plus a banner under the overlay
   chips saying what the player is being asked to do. */
.tac3d-turnbar.deploying {
  box-shadow: inset 0 0 0 1px rgba(207, 174, 100, 0.45);
}
.tac3d-deploy-banner {
  position: absolute;
  /* Sits directly above the turn bar rather than at top-centre, which is
     occupied by the battalions panel — the phase messaging reads as one
     group with the End deployment button that acts on it. Since the bar
     right-docked (2026-08-25) that means sharing the DOCK's right edge:
     centred, it would have floated over open map with the thing it is talking
     about parked in the corner. */
  bottom: 124px;
  right: calc(var(--tac3d-gutter) + var(--tac3d-order-w));
  width: max-content;
  max-width: 480px;
  padding: 7px 18px;
  text-align: center;
  color: #e7dcc4;
  box-shadow: inset 0 0 0 1px rgba(207, 174, 100, 0.45);
}
/* PT-23: the command banner shares the deployment banner's slot and voice —
   both answer "what is being asked of me right now" — but sits a little higher
   so the two can coexist during a deployment phase nobody has claimed. */
.tac3d-command-banner {
  position: absolute;
  bottom: 196px;
  right: calc(var(--tac3d-gutter) + var(--tac3d-order-w));
  width: max-content;
  max-width: 480px;
  padding: 7px 18px;
  text-align: center;
  color: #e7dcc4;
}
.tac3d-command-banner[data-command-state="vacant"] {
  border-color: #8d6a24;
}
.tac3d-command-claim {
  margin-top: 6px;
  padding: 4px 14px;
  border: 1px solid #a8842f;
  background: rgba(168, 132, 47, 0.18);
  color: #f0dfae;
  font-family: var(--tc-font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-command-claim:hover {
  background: rgba(168, 132, 47, 0.32);
}

.tac3d-deploy-banner-line {
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tac3d-deploy-banner-sub {
  margin-top: 3px;
  font-size: 10px;
  color: #b9c3cd;
}
.tac3d-deploy-banner-sub strong { color: #cfae64; font-weight: 600; }
.tac3d-turnbar-turn {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.tac3d-turnbar-turn .tac3d-kicker { margin-bottom: 0; }
.tac3d-turnbar-turn strong {
  color: #f0d184;
  font-size: 17px;
}
.tac3d-turnbar-clock {
  /* Takes up whatever the dock's width leaves over, so the clock bar's controls
     stay at the right edge instead of stranding empty frame beside them: the
     dock is as wide as its widest row, and that row is usually the transport. */
  flex: 1 1 auto;
  min-width: 52px;
  color: #e7dcc4;
  font-size: 14px;
  text-align: center;
}
.tac3d-turnbar-clock.resolving {
  color: #cfae64;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tac3d-turnbar-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tac3d-turnbar-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--dot-color, #8f9aa5);
  background: transparent;
  box-sizing: border-box;
}
.tac3d-turnbar-dot.ready { background: var(--dot-color, #8f9aa5); }
.tac3d-turnbar-btn {
  min-height: 26px;
  padding: 0 12px;
  border: 1px solid rgba(132, 148, 162, 0.28);
  background: rgba(16, 22, 30, 0.58);
  color: #aab5bf;
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-turnbar-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.tac3d-turnbar-btn--ready {
  border-color: rgba(207, 170, 86, 0.68);
  background: rgba(207, 170, 86, 0.16);
  color: #f0d184;
}
.tac3d-turnbar-btn--ready.done {
  border-color: rgba(111, 174, 90, 0.6);
  background: rgba(111, 174, 90, 0.14);
  color: #9fce8e;
}
.tac3d-turnbar-btn--replay { padding: 0 9px; }

/* T-52 — the playback transport. Sits directly ABOVE the clock bar rather than
   inside it: the live clock keeps ticking underneath while you review (Daniel,
   2026-08-23), and the bar re-renders its markup every second, which a range
   input being dragged cannot survive. Since 2026-08-25 it is the dock's top row
   and wears the same brass frame as every other HUD surface — its own flat
   border was most of why it read as a separate floating dialog. One shade
   quieter in its CONTENT, because it is a review instrument and not a deadline. */
.tac3d-transport {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  box-sizing: border-box;
  color: #aab5bf;
}
/* The bar keeps its own height when the transport is away, because the dock is
   bottom-anchored: an absent top row grows the column downward, never upward. */
.tac3d-transport[hidden] { display: none; }
.tac3d-transport-btn {
  min-width: 30px;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(132, 148, 162, 0.28);
  background: rgba(16, 22, 30, 0.58);
  color: #aab5bf;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.tac3d-transport-btn:disabled { opacity: 0.4; cursor: default; }
.tac3d-transport-btn--play {
  border-color: rgba(207, 170, 86, 0.5);
  color: #f0d184;
}
.tac3d-transport-btn--play.paused {
  border-color: rgba(207, 170, 86, 0.78);
  background: rgba(207, 170, 86, 0.16);
}
.tac3d-transport-btn--rate {
  font-size: 10px;
  min-width: 34px;
  letter-spacing: 0.04em;
}
.tac3d-transport-scrub {
  /* Grows into whatever the dock's width leaves over, so the clock bar being
     the wider row makes the scrub longer rather than leaving a hole. */
  flex: 1 1 158px;
  min-width: 110px;
  height: 18px;
  margin: 0;
  accent-color: #cfae64;
  cursor: pointer;
}
.tac3d-transport-clock {
  /* "0:06 / 0:08" must never wrap: the dock is bottom-anchored, so a second
     line grows the transport UPWARD and the whole assembly jumps. */
  min-width: 82px;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #8f9aa5;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* T-52 — order controls inert while the board on screen is a past state. The
   reason is stated, not merely implied by a greyed button. */
.tac3d-playback-lock {
  margin-bottom: 8px;
  padding: 6px 8px;
  border-left: 2px solid rgba(207, 170, 86, 0.7);
  background: rgba(207, 170, 86, 0.1);
  color: #e0c98d;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
/* Only the CONTROLS go dim, never the readouts. Watching strength, morale and
   ammunition move is the entire point of playback (PT-33, PT-34b), so dimming
   the equipment section would hide exactly what the clip exists to show. Line of
   sight stays live for the same reason: it is an instrument, not an order. */
.tac3d-order-panel--locked .tac3d-command-row > button:not(.tac3d-los-btn),
.tac3d-order-panel--locked [data-fire-mode],
.tac3d-order-panel--locked .tac3d-deploy-state {
  opacity: 0.45;
  pointer-events: none;
}
/* Loading screen (finding B): opaque, above everything, removed only once every
   mount stage has finished — so the player never sees a half-built field. It
   covers the canvas rather than hiding it; see tactical3d-view.js. */
.tac3d-loading {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #1b232c 0%, #0b1015 70%);
  font-family: var(--tc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  transition: opacity 0.25s ease;
}
.tac3d-loading.done { opacity: 0; pointer-events: none; }
.tac3d-loading-card {
  width: min(420px, calc(100vw - 48px));
  padding: 22px 26px;
  border: 1px solid rgba(207, 170, 86, 0.28);
  background: rgba(10, 16, 22, 0.72);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.tac3d-loading-card .tac3d-kicker { margin-bottom: 14px; font-size: 10px; }
.tac3d-loading-track {
  height: 5px;
  border: 1px solid rgba(207, 170, 86, 0.3);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.tac3d-loading-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8a6f34, #f0d184);
  transition: width 0.18s linear;
}
.tac3d-loading-stage {
  margin-top: 10px;
  min-height: 14px;
  color: #8f9aa5;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tac3d-loading.failed .tac3d-loading-stage { color: #f05f54; }
.tac3d-loading.failed .tac3d-loading-fill { background: #7a2f28; }

/* End-of-battle card (finding C) — replaces the old one-line "winner <uuid>"
   strip, and is dismissed to leave a free camera over the final field. */
.tac3d-conclusion-host {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  font-family: var(--tc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
.tac3d-conclusion-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 14, 0.55);
  pointer-events: auto;
}
.tac3d-conclusion {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 48px));
  padding: 26px 30px 24px;
  text-align: center;
  color: #e7dcc4;
}
.tac3d-conclusion-title {
  margin: 0 0 16px;
  font-family: var(--tc-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f0d184;
}
.tac3d-conclusion-winner {
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tac3d-conclusion-label {
  color: #8f9aa5;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tac3d-conclusion-winner strong {
  font-family: var(--tc-font-display);
  font-size: 19px;
  color: var(--nation-color, #e7dcc4);
}
.tac3d-conclusion-btn {
  min-height: 32px;
  padding: 0 20px;
  border: 1px solid rgba(207, 170, 86, 0.68);
  background: rgba(207, 170, 86, 0.16);
  color: #f0d184;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-conclusion-btn:hover { background: rgba(207, 170, 86, 0.26); }
/* A unit still in reserve: say what state it is in, and what the click does.
   Previously it was handed the combat Orders panel, whose Move button invited
   the one interaction that could not work (playtest 2026-08-15, finding 03). */
.tac3d-deploy-state {
  margin: 0 0 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid rgba(207, 174, 100, 0.55);
  background: rgba(207, 174, 100, 0.14);
}
.tac3d-deploy-state-kicker {
  color: #f0d184;
  font-family: var(--tc-font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tac3d-deploy-state strong {
  color: #e7dcc4;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}
.tac3d-deploy-hint {
  margin: 0 0 8px;
  color: #8f9aa5;
  font-size: 10px;
  line-height: 1.4;
}
.tac3d-deploy-error {
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid rgba(200, 92, 72, 0.6);
  background: rgba(200, 92, 72, 0.16);
  color: #f0c0b2;
  font-size: 10px;
  line-height: 1.4;
}

/* T-50 debrief: why the battle ended, and the evidence for it. */
.tac3d-conclusion { width: min(520px, calc(100vw - 48px)); }
.tac3d-conclusion-debrief {
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(207, 170, 86, 0.24);
  text-align: left;
}
.tac3d-conclusion-reason {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tac3d-conclusion-reason strong {
  font-family: var(--tc-font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #f0d184;
}
.tac3d-conclusion-race {
  color: #9aa7b4;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tac3d-debrief-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tac3d-debrief-table th,
.tac3d-debrief-table td {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid rgba(231, 220, 196, 0.1);
}
.tac3d-debrief-table thead th {
  color: #8f9aa5;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tac3d-debrief-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--nation-color, #e7dcc4);
}
.tac3d-debrief-side {
  color: #8f9aa5;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* A force that never made it onto the field is the single most useful number
   in a confusing defeat, so it is the one that is allowed to shout. */
.tac3d-debrief-warn { color: #e0a33c; font-weight: 700; }

/* T-50: the same debrief inside the operational battle panel. It borrows the
   tactical presenter's markup wholesale — one battle must not get two
   different accounts of itself — and only re-frames the padding for the
   narrower panel. */
.op-battle-debrief {
  padding: 0 14px;
}
.op-battle-debrief .tac3d-conclusion-debrief {
  margin: 0 0 12px;
  padding-top: 12px;
}
.op-battle-debrief-empty {
  padding: 12px 14px;
  color: #8f9aa5;
  font-size: 11px;
  line-height: 1.5;
}
.tac3d-unassigned-row,
.tac3d-reserve-row {
  width: 100%;
  min-height: 28px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: 0;
  border-bottom: 1px solid rgba(132, 148, 162, 0.14);
  background: transparent;
  color: #dfe6ec;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.tac3d-reserve-row.selected {
  background: rgba(207, 170, 86, 0.18);
  box-shadow: inset 0 0 0 1px rgba(207, 170, 86, 0.32);
}
.tac3d-unassigned-row span:nth-child(2),
.tac3d-reserve-row span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac3d-unassigned-row:hover,
.tac3d-reserve-row:hover { background: rgba(207, 170, 86, 0.1); }
.tac3d-unassigned-row em,
.tac3d-reserve-row em {
  color: #cfae64;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}
/* Tight Reserve/Awaiting rows: portrait icon · type name · strength · action */
.tac3d-unit-list-row {
  width: 100%;
  min-height: 26px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 0;
  border-bottom: 1px solid rgba(132, 148, 162, 0.14);
  background: transparent;
  color: #dfe6ec;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.tac3d-unit-list-row:hover { background: rgba(207, 170, 86, 0.1); }
.tac3d-unit-list-row.selected {
  background: rgba(207, 170, 86, 0.18);
  box-shadow: inset 0 0 0 1px rgba(207, 170, 86, 0.32);
}
/* T-45: a reserve unit the battalion stockpile cannot supply. Dimmed rather
   than hidden — the commander should see what is stranded and why. */
.tac3d-unit-list-row.disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.tac3d-unit-list-row.disabled:hover { background: transparent; }
.tac3d-unit-list-row.disabled .tac3d-unit-list-action { color: #c2704f; }
/* Reserve names its columns, so the header and the rows must share ONE track
   template — `auto` tracks size each grid independently and the labels would
   drift off the numbers they name. Awaiting keeps the auto tracks: its trailing
   cell is a word, not a number. */
.tac3d-reserve .tac3d-unit-list-row,
.tac3d-unit-list-head {
  grid-template-columns: 22px minmax(0, 1fr) 52px 44px;
}
.tac3d-unit-list-head {
  display: grid;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  padding: 0 6px 3px;
  border-bottom: 1px solid rgba(132, 148, 162, 0.28);
  color: #8f9aa5;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tac3d-unit-list-head span:nth-child(3),
.tac3d-unit-list-head span:nth-child(4) { text-align: right; }
.tac3d-unit-list-icon { width: 22px; height: 22px; object-fit: contain; }
.tac3d-unit-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tac3d-unit-list-strength { color: #b9c3cd; font-variant-numeric: tabular-nums; font-size: 10px; }
.tac3d-reserve .tac3d-unit-list-strength { text-align: right; }
.tac3d-unit-list-cost {
  color: #b9c3cd;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  text-align: right;
}
/* T-45: the stockpile cannot cover this deploy. The row is dimmed and disabled;
   the cost is what says why, now that the action cell is gone. */
.tac3d-unit-list-cost.unaffordable { color: #c2704f; }
.tac3d-unit-list-action { color: #cfae64; font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: 0.03em; }

.tac3d-swatch,
.tac3d-card-swatch {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, 0.55);
}
.tac3d-order-panel {
  right: 12px;
  bottom: 12px;
  width: 386px;
  max-height: 420px;
  padding: 12px;
  overflow-y: auto;
}
.tac3d-move-btn {
  width: 100%;
  min-height: 34px;
  margin-bottom: 12px;
  border: 1px solid rgba(207, 170, 86, 0.48);
  background: rgba(207, 170, 86, 0.1);
  color: #f2d487;
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-move-btn.armed {
  background: rgba(92, 152, 214, 0.24);
  border-color: rgba(92, 152, 214, 0.82);
  color: #b9d7f6;
}
.tac3d-halt-btn {
  width: 100%;
  min-height: 34px;
  margin-bottom: 12px;
  border: 1px solid rgba(180, 92, 77, 0.5);
  background: rgba(138, 42, 34, 0.13);
  color: #efb2a6;
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-halt-btn:disabled {
  opacity: 0.42;
  cursor: default;
}
.tac3d-withdraw-btn {
  width: 100%;
  min-height: 32px;
  margin-bottom: 12px;
  border: 1px solid rgba(207, 170, 86, 0.48);
  background: rgba(207, 170, 86, 0.1);
  color: #f2d487;
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-withdraw-btn.armed {
  border-color: rgba(143, 208, 160, 0.78);
  background: rgba(64, 119, 74, 0.26);
  color: #d6f0d8;
}
/* T-47: the ordered-resupply control. It reads as logistics rather than fire —
   a cooler green than the withdrawal button's, and the load is stated on the
   face of it, because "can I still deliver" is the question a player asks
   before deciding to walk a cart into range. */
.tac3d-resupply-btn {
  width: 100%;
  min-height: 32px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(120, 178, 186, 0.5);
  background: rgba(38, 92, 98, 0.16);
  color: #a9dbe2;
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-resupply-btn.armed {
  border-color: rgba(120, 178, 186, 0.88);
  background: rgba(38, 118, 126, 0.34);
  color: #d8f3f7;
}
.tac3d-resupply-btn:disabled {
  opacity: 0.42;
  cursor: default;
}
.tac3d-resupply-load {
  font-variant-numeric: tabular-nums;
  opacity: 0.82;
}
/* The hover verdict, in the panel rather than on the cursor: the answer is a
   sentence ("out of range", "that unit needs nothing"), and a sentence has
   nowhere to live on a pointer. */
.tac3d-resupply-hint {
  margin: -4px 0 8px;
  padding: 4px 6px;
  border-left: 2px solid currentColor;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tac3d-resupply-hint.in-range { color: #9fdcb2; background: rgba(64, 119, 74, 0.16); }
.tac3d-resupply-hint.out-of-range { color: #efb2a6; background: rgba(138, 42, 34, 0.16); }
.tac3d-withdraw-badge {
  margin: -2px 0 8px;
  color: #bfe6c7;
  font-size: 10px;
  text-transform: uppercase;
}
.tac3d-los-btn {
  width: 100%;
  min-height: 30px;
  margin-bottom: 12px;
  border: 1px solid rgba(132, 177, 150, 0.45);
  background: rgba(35, 82, 58, 0.16);
  color: #b9d9c4;
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}
.tac3d-los-btn.active {
  border-color: rgba(150, 219, 172, 0.82);
  background: rgba(65, 129, 86, 0.3);
  color: #ddf3df;
}
.tac3d-los-btn:disabled {
  opacity: 0.42;
  cursor: default;
}
.tac3d-order-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tac3d-equipment-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(132, 148, 162, 0.18);
  background: rgba(16, 22, 30, 0.74);
}
.tac3d-equipment-row.weapon {
  grid-template-columns: 36px minmax(0, 1fr);
}
.tac3d-equipment-row.passive { opacity: 0.78; }
.tac3d-equip-img,
.tac3d-equip-box {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(207, 170, 86, 0.34);
  background: rgba(6, 10, 14, 0.78);
  color: #cfae64;
  font-size: 10px;
  object-fit: contain;
}
.tac3d-equipment-main {
  min-width: 0;
}
.tac3d-equipment-main strong,
.tac3d-equipment-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac3d-equipment-main strong {
  color: #dfe6ec;
  font-size: 11px;
}
.tac3d-equipment-main span {
  margin-top: 3px;
  color: #8f9aa5;
  font-size: 10px;
}
.tac3d-fire-modes {
  display: grid;
  /* Four modes since T-48 (hold / will / area / unit). Indirect weapons drop
     the `will` button, so the row must survive three cells as well as four —
     auto-fit rather than a fixed count. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.tac3d-fire-modes button,
.tac3d-use-btn {
  min-height: 22px;
  border: 1px solid rgba(132, 148, 162, 0.28);
  background: #10161e;
  color: #aab5bf;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.tac3d-fire-modes button:hover,
.tac3d-use-btn:hover {
  border-color: rgba(207, 170, 86, 0.62);
  color: #f0d184;
}
.tac3d-ammo {
  height: 4px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.tac3d-ammo span {
  display: block;
  height: 100%;
  background: #d2aa4d;
}
.tac3d-unit-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 148px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(15, 20, 26, 0.88);
  background: rgba(8, 13, 18, 0.9);
  color: #eef2f6;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  transform: translate(-50%, calc(-100% - 12px));
  pointer-events: auto;
  cursor: pointer;
}
/* A label that lost its space to a more important one (finding 07). Faded, not
   hidden: the card is the DOM route to clicking a unit, so it must stay
   present and clickable — it just stops competing for attention. */
.tac3d-unit-card.crowded {
  opacity: 0.28;
  z-index: 0;
}
.tac3d-unit-card.crowded:hover {
  opacity: 1;
  z-index: 3;
}
.tac3d-unit-card span:not(.tac3d-card-swatch),
.tac3d-unit-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac3d-unit-card small {
  max-width: 54px;
  color: rgba(238, 242, 246, 0.62);
  font-size: 9px;
}
.tac3d-unit-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(8, 13, 18, 0.9);
  transform: translateX(-50%);
}
.tac3d-unit-card.selected {
  border-color: #f0d184;
  box-shadow: 0 0 12px rgba(240, 209, 132, 0.45);
  /* Finding G: the selected unit's card bobs gently so the highlight is
     findable on a busy field (the mesh itself stays grounded). */
  animation: tac3d-card-bob 1.6s ease-in-out infinite;
}
@keyframes tac3d-card-bob {
  0%, 100% { transform: translate(-50%, calc(-100% - 12px)); }
  50% { transform: translate(-50%, calc(-100% - 19px)); }
}
.tac3d-card-nolos {
  display: inline-flex;
  align-items: center;
  color: #e0a93b;
}
/* T-46: an indirect weapon with no target assigned does nothing all battle —
   say so, or it reads as a bug. */
.tac3d-weapon-nomission {
  color: #e0a93b;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tac3d-unit-card.withdrawing {
  box-shadow: 0 0 0 1px rgba(143, 208, 160, 0.42), 0 0 12px rgba(92, 177, 109, 0.28);
}
.tac3d-unit-card--hidden {
  opacity: 0.36;
  filter: grayscale(0.85) brightness(0.72);
  pointer-events: none;
}
.tac3d-unit-card--hidden::after {
  opacity: 0.5;
}
@media (max-width: 900px) {
  .tac3d-battalions { right: 12px; }
  .tac3d-minimap { top: 152px; width: 190px; }
  .tactical3d-shell { --tac3d-reserve-w: 250px; }
  .tac3d-unassigned { width: 200px; }
  .tac3d-order-panel { width: min(360px, calc(100vw - 24px)); }
}
/* --- tactical3d HUD art wiring: brass card frame + fire-mode medallions --- */
.tac3d-panel,
.tac3d-unit-card {
  border: 0;
  border-image: url("/assets/tactical/ui/unit_card.png") 26 fill / 14px / 0 stretch;
  background: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}
.tac3d-unit-card {
  border-image-width: 9px;
  padding: 6px 12px;
}
.tac3d-unit-card::after { border-top-color: #1c252f; }
.tac3d-fire-modes button {
  min-height: 42px;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  color: transparent;
  font-size: 0;
  filter: grayscale(0.2) brightness(0.9);
  transition: filter 120ms ease, transform 120ms ease;
}
.tac3d-fire-modes button[data-fire-mode="hold"] { background-image: url("/assets/tactical/ui/fire_hold.png"); }
.tac3d-fire-modes button[data-fire-mode="will"] { background-image: url("/assets/tactical/ui/fire_will.png"); }
.tac3d-fire-modes button[data-fire-mode="area"] { background-image: url("/assets/tactical/ui/fire_area.png"); }
.tac3d-fire-modes button[data-fire-mode="unit"] { background-image: url("/assets/tactical/ui/fire_unit.png"); }
.tac3d-use-btn {
  min-width: 42px;
  min-height: 42px;
  border: 0;
  background: transparent center / 34px 34px no-repeat url("/assets/tactical/ui/use.png");
  color: transparent;
  font-size: 0;
  filter: grayscale(0.2) brightness(0.9);
  transition: filter 120ms ease, transform 120ms ease;
}
.tac3d-use-btn:hover { filter: none; transform: translateY(-1px); }
.tac3d-fire-modes button:hover { filter: none; transform: translateY(-1px); }
.tac3d-fire-modes button.active,
.tac3d-fire-modes button[aria-pressed="true"] {
  background-color: rgba(240, 209, 132, 0.2);
  outline: 2px solid rgba(250, 219, 138, 0.9);
  outline-offset: -2px;
  filter: brightness(1.42) saturate(1.18) drop-shadow(0 0 8px rgba(240, 209, 132, 0.86));
  transform: translateY(-1px);
}
/* tactical3d HUD placeholder scaffold END */

/* --- tactical3d order panel: grouped equipment + morale (claude-design3 spirit) --- */
.tac3d-order-panel {
  width: 440px;
  max-height: 480px;
}
.tac3d-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(207, 170, 86, 0.22);
}
.tac3d-order-head-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tac3d-order-head-portrait {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.tac3d-order-head-text { min-width: 0; }
.tac3d-order-head-title {
  overflow: hidden;
  color: #ecd9a6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac3d-order-head-sub {
  margin-top: 2px;
  overflow: hidden;
  color: #7e8a98;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.tac3d-order-head-strength {
  color: #e9eef3;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* PT-36: destruction has to be the loudest thing in the panel. It used to read
   `STR 0/12` in the same grey as a healthy unit, so whole units were lost
   unnoticed (playtest 2026-08-22). */
.tac3d-order-head-destroyed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid #8d2f24;
  background: rgba(141, 47, 36, 0.22);
  white-space: nowrap;
}

.tac3d-order-head-destroyed > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.tac3d-destroyed-skull {
  width: 20px;
  height: 20px;
  flex: none;
  object-fit: contain;
  /* The mark belongs to the badge it sits in, not to the brass UI family it
     was struck for — tinted to the badge's red rather than left bone-white. */
  filter: sepia(0.5) saturate(2.6) hue-rotate(-28deg) brightness(0.95);
}

.tac3d-order-head-destroyed strong {
  color: #ef8a72;
  font-family: var(--tc-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.tac3d-order-head-destroyed span {
  color: #c99182;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

/* A destroyed unit's row and map card recede: still selectable so you can read
   what happened to it, but plainly no longer part of the fight. */
.tac3d-unit-list-row.destroyed {
  opacity: 0.55;
  filter: saturate(0.35);
}

.tac3d-unit-list-action.destroyed { color: #ef8a72; }

/* A destroyed unit recedes, but it must not recede past noticing: greying the
   card out alone was exactly the failure (PT-33 — Daniel read `0 / 12` on card
   after card without registering that the units were gone). So the card fades
   and desaturates, and the colour swatch becomes a skull that is brightened
   back up to carry through the fade. */
.tac3d-unit-card.destroyed {
  opacity: 0.62;
  filter: saturate(0.25) brightness(0.9);
}
.tac3d-unit-card.destroyed .tac3d-card-swatch {
  width: 15px;
  height: 15px;
  border: 0;
  background: none !important;
  background-image: url("./assets/tactical/ui/skull_destroyed.png") !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(1.7) contrast(1.15);
}

.tac3d-morale-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tac3d-morale-kicker {
  color: #9c844c;
  font-size: 9px;
  letter-spacing: 0.16em;
}
.tac3d-morale-bar {
  height: 5px;
  border: 1px solid rgba(44, 53, 67, 0.9);
  background: rgba(12, 17, 24, 0.9);
  overflow: hidden;
}
.tac3d-morale-bar span {
  display: block;
  height: 100%;
  transition: width 160ms ease;
}
.tac3d-morale-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.tac3d-command-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.tac3d-command-row .tac3d-move-btn,
.tac3d-command-row .tac3d-halt-btn,
.tac3d-command-row .tac3d-withdraw-btn,
.tac3d-command-row .tac3d-resupply-btn,
.tac3d-command-row .tac3d-los-btn {
  width: auto;
  min-height: 30px;
  margin-bottom: 0;
  font-size: 9px;
}
.tac3d-command-row .tac3d-move-btn { flex: 1.15 1 0; }
.tac3d-command-row .tac3d-halt-btn { flex: 0.9 1 0; }
.tac3d-command-row .tac3d-withdraw-btn { flex: 1.2 1 0; }
.tac3d-command-row .tac3d-resupply-btn { flex: 1.1 1 0; }
.tac3d-command-row .tac3d-los-btn { flex: 0.9 1 0; }
.tac3d-equip-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid rgba(207, 170, 86, 0.4);
  background: rgba(6, 10, 14, 0.78);
  color: #cda35a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tac3d-equip-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
.tac3d-equipment-row.weapon {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: 6px 7px;
}
.tac3d-equipment-row.active-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.tac3d-equipment-row.passive { grid-template-columns: auto minmax(0, 1fr); }
.tac3d-fire-modes--compact {
  width: 112px;
  flex: 0 0 auto;
  margin-top: 0;
  gap: 2px;
}
.tac3d-fire-modes--compact button {
  min-height: 28px;
  background-size: 24px 24px;
}
.tac3d-fire-modes--compact button[data-fire-mode="unit"] { font-size: 9px; }
.tac3d-equip-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.tac3d-equip-name-row strong {
  overflow: hidden;
  color: #dde3ea;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac3d-equip-count {
  flex: 0 0 auto;
  color: #cfae64;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tac3d-ammo-num {
  margin-top: 3px;
  color: #8f9aa5;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.tac3d-standing-orders {
  left: 12px;
  top: 128px;
  width: 132px;
  padding: 10px 12px;
}
.tac3d-standing-orders strong {
  display: block;
  margin-top: 2px;
  color: #e8ddc4;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tac3d-turnbar-objectives {
  color: #cfae64;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tac3d-ammo-dry {
  flex: 0 0 auto;
  color: #f0f0ee;
  background: #a03528;
  border-radius: 2px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* T-55 — crew strength on the weapon row. NO CREW shares DRY's voice because it
   is the same kind of news: this weapon has stopped contributing. The
   percentage is quieter — it is a number falling, not a capability gone. */
.tac3d-crew-out {
  padding: 0 4px;
  border: 1px solid rgba(214, 106, 92, 0.85);
  color: #e8907f;
  font-size: 9px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.tac3d-crew-short {
  padding: 0 4px;
  color: #cfae64;
  font-size: 9px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tac3d-weapon-summary {
  min-width: 68px;
  color: #cfae64;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .tac3d-order-panel { width: min(440px, calc(100vw - 24px)); }
}
/* tactical3d order panel redesign END */

/* --- Player settings panel (P-04) -----------------------------------------
   A left nav rail plus one content pane, so categories can grow without the
   panel turning into an endless scroll. Reuses .signup-info-panel's chrome. */

.lobby-settings-panel {
  width: min(880px, calc(100% - 32px));
}

.settings-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-identity .portrait-tile {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.settings-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}

.settings-nav {
  border-right: 1px solid rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, rgba(10, 15, 19, 0.55), rgba(10, 15, 19, 0.15));
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav-group {
  padding: 4px 10px 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231, 201, 135, 0.55);
}

.settings-nav-item {
  appearance: none;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #c9d4dd;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.settings-nav-item:hover {
  background: rgba(231, 201, 135, 0.07);
  color: var(--tc-brass-hi);
}

.settings-nav-item.active {
  background: rgba(231, 201, 135, 0.12);
  border-color: rgba(231, 201, 135, 0.35);
  color: var(--tc-brass-hi);
}

.settings-content {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
}

.settings-page-title {
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--tc-brass-hi);
  margin-bottom: 14px;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-row:first-of-type {
  border-top: none;
}

.settings-row-label span {
  display: block;
  font-size: 13px;
  color: #dbe4ec;
}

.settings-row-label em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11px;
  color: rgba(200, 214, 226, 0.5);
}

.settings-static {
  font-size: 13px;
  color: rgba(231, 201, 135, 0.9);
}

.settings-block {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-note {
  margin: 6px 0 12px;
  font-size: 12px;
  color: rgba(200, 214, 226, 0.55);
}

.settings-form {
  display: grid;
  gap: 10px;
  max-width: 380px;
}

.settings-form label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: rgba(200, 214, 226, 0.75);
}

.settings-form input,
.settings-inline-form input {
  background: #0a0f13;
  border: 1px solid var(--tc-rail);
  border-radius: 2px;
  color: #e7eef5;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
}

.settings-form input:focus,
.settings-inline-form input:focus {
  outline: none;
  border-color: rgba(231, 201, 135, 0.6);
}

.settings-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-status {
  font-size: 12px;
}

.settings-status.error { color: var(--tc-bad-hi); }
.settings-status.ok { color: var(--tc-good); }

.settings-inline-form {
  display: flex;
  gap: 8px;
}

.settings-inline-form input {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-choice {
  display: inline-flex;
  border: 1px solid var(--tc-rail);
  border-radius: 3px;
  overflow: hidden;
}

.settings-choice-item {
  appearance: none;
  background: transparent;
  border: none;
  border-right: 1px solid var(--tc-rail);
  color: #c9d4dd;
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.settings-choice-item:last-child { border-right: none; }
.settings-choice-item:hover { background: rgba(231, 201, 135, 0.08); }

.settings-choice-item.selected {
  background: rgba(231, 201, 135, 0.16);
  color: var(--tc-brass-hi);
}

.settings-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--tc-rail);
  border-radius: 3px;
  color: #c9d4dd;
  padding: 6px 12px 6px 8px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.settings-toggle span {
  width: 30px;
  height: 15px;
  border-radius: 8px;
  background: #0a0f13;
  border: 1px solid var(--tc-rail);
  position: relative;
  transition: background 120ms ease;
}

.settings-toggle span::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #6d7d8b;
  transition: transform 120ms ease, background 120ms ease;
}

.settings-toggle.on {
  color: var(--tc-brass-hi);
  border-color: rgba(231, 201, 135, 0.45);
}

.settings-toggle.on span {
  background: rgba(231, 201, 135, 0.25);
  border-color: rgba(231, 201, 135, 0.5);
}

.settings-toggle.on span::after {
  transform: translateX(15px);
  background: var(--tc-brass-hi);
}

.settings-row input[type="range"] {
  appearance: none;
  width: min(100%, 240px);
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.settings-row input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #26343e;
  border: 1px solid rgba(231, 201, 135, 0.18);
}

.settings-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border-radius: 50%;
  border: 1px solid #f4dda6;
  background: var(--tc-brass-hi);
  box-shadow: 0 0 0 3px rgba(231, 201, 135, 0.09);
}

.settings-row input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #26343e;
  border: 1px solid rgba(231, 201, 135, 0.18);
}

.settings-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #f4dda6;
  background: var(--tc-brass-hi);
  box-shadow: 0 0 0 3px rgba(231, 201, 135, 0.09);
}

@media (max-width: 720px) {
  .settings-body { grid-template-columns: minmax(0, 1fr); }
  .settings-nav {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .settings-nav-group { width: 100%; }
  .settings-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   S-20 map pins — the player-authored annotation layer.

   The markers are the struck-metal set from the crest workshop, so the chrome
   around them stays quiet: brass hairlines and panel gradients already in use,
   no new colour vocabulary.
   --------------------------------------------------------------------------- */

/* --- the marker on the map (CSS2D) --- */

.map-pin-marker {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.map-pin-button {
  /* Between a division icon (58px) and an overlay chip: the markers are struck
     metal on a busy, colourful map, so they need size to read at all — 38px
     came out as a dot next to the province labels they sit among. */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  /* The art's point is at the bottom of the frame, so the marker is anchored
     above its coordinate rather than centred on it. */
  transform: translateY(-50%);
  cursor: url("./assets/cursors/cursor-select.png") 8 3, auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.65));
  transition: transform 120ms ease, filter 120ms ease;
}

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

.map-pin-button:hover {
  transform: translateY(-54%) scale(1.08);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 5px rgba(231, 201, 135, 0.5));
}

.map-pin-marker[data-selected="true"] .map-pin-button {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 7px rgba(231, 201, 135, 0.85));
}

/* A pin two turns from being swept should be noticed before it goes. */
.map-pin-marker[data-expiring="true"] .map-pin-button {
  animation: map-pin-fade 2.4s ease-in-out infinite;
}

@keyframes map-pin-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Armed placement: the map itself becomes the control. */
.terrain-canvas.pin-placement {
  cursor: crosshair;
}

.map-pin-placement-banner {
  position: absolute;
  top: clamp(12px, 3vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  box-shadow: var(--tc-bevel);
  font-family: var(--tc-font-body);
  font-size: 12px;
  color: var(--tc-paper-2);
}

/* --- the sheet --- */

.map-pins-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  background: var(--tc-grad-panel-2);
}

.map-pins-hint {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--tc-steel);
}

.map-pins-error {
  margin: 12px 18px 0;
}

.map-pins-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
}

.map-pins-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-pin-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231, 201, 135, 0.12);
}

.map-pin-row-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

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

.map-pin-icon-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--tc-steel);
  font-family: var(--tc-font-mono);
}

.map-pin-row-body {
  min-width: 0;
}

.map-pin-row-place {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--tc-font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tc-brass-hi);
  cursor: pointer;
}

.map-pin-row-place:hover {
  color: var(--tc-paper);
  text-decoration: underline;
}

.map-pin-row-note {
  margin-top: 2px;
  font-family: var(--tc-font-body);
  font-size: 12px;
  color: var(--tc-paper-2);
  overflow-wrap: anywhere;
}

.map-pin-row-note em,
.province-pin-note em {
  color: var(--tc-steel-2);
}

.map-pin-row-meta {
  margin-top: 4px;
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--tc-steel);
}

/* --- the pin info panel --- */

.map-pin-panel,
.map-pin-composer {
  bottom: auto;
  max-height: calc(100% - 2 * clamp(12px, 3vw, 32px));
  width: clamp(300px, 30vw, 420px);
}

.map-pin-composer .province-panel-body,
.map-pin-panel .province-panel-body {
  overflow-y: auto;
}

/* The composer can be a few pixels taller than a tight viewport, especially
   while an icon's selected treatment is being repainted. Keep it scrollable
   for wheel/touch users without letting a scrollbar steal width and reflow the
   seven-column marker grid. */
.map-pin-composer .province-panel-body {
  scrollbar-width: none;
}

.map-pin-composer .province-panel-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.map-pin-detail {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.map-pin-detail-icon {
  width: 56px;
  height: 56px;
}

.map-pin-detail-note {
  margin: 4px 0 0;
  font-family: var(--tc-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tc-paper);
  overflow-wrap: anywhere;
}

.map-pin-facts {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-pin-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(231, 201, 135, 0.1);
}

.map-pin-facts dt {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-steel);
}

.map-pin-facts dd {
  margin: 0;
  font-family: var(--tc-font-body);
  font-size: 12px;
  color: var(--tc-paper-2);
}

.map-pin-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* --- the composer --- */

.map-pin-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  margin: 8px 0 16px;
}

.map-pin-icon-choice {
  aspect-ratio: 1;
  padding: 3px;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  cursor: pointer;
}

.map-pin-icon-choice img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 120ms ease;
}

.map-pin-icon-choice:hover img { opacity: 1; }

.map-pin-icon-choice.active {
  background: var(--tc-grad-tab-on);
  box-shadow: inset 0 0 0 1px var(--tc-brass), inset 0 0 6px rgba(231, 201, 135, 0.22);
}

.map-pin-icon-choice.active img { opacity: 1; }

.map-pin-note-input {
  width: 100%;
  min-height: 76px;
  margin-top: 8px;
  padding: 8px 10px;
  resize: vertical;
  background: #0b1116;
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231, 201, 135, 0.12);
  font-family: var(--tc-font-body);
  font-size: 12px;
  color: var(--tc-paper);
}

.map-pin-note-count {
  margin: 4px 0 16px;
  text-align: right;
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-steel);
}

.map-pin-lifetime {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 6px;
}

.map-pin-lifetime input[type="range"] {
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

.map-pin-lifetime input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid rgba(231, 201, 135, 0.22);
  border-radius: 0;
  background: linear-gradient(
    90deg,
    var(--tc-brass) 0%,
    var(--tc-brass) var(--map-pin-lifetime-progress),
    #26343e var(--map-pin-lifetime-progress),
    #26343e 100%
  );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75);
}

.map-pin-lifetime input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -6px;
  border: 1px solid var(--tc-brass-hi);
  border-radius: 50%;
  background: var(--tc-grad-brass);
  box-shadow: 0 1px 3px #000, 0 0 0 2px rgba(231, 201, 135, 0.08);
}

.map-pin-lifetime input[type="range"]::-moz-range-track {
  height: 3px;
  border: 1px solid rgba(231, 201, 135, 0.22);
  border-radius: 0;
  background: #26343e;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75);
}

.map-pin-lifetime input[type="range"]::-moz-range-progress {
  height: 3px;
  border: 1px solid var(--tc-brass-lo);
  border-radius: 0;
  background: var(--tc-brass);
}

.map-pin-lifetime input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 1px solid var(--tc-brass-hi);
  border-radius: 50%;
  background: var(--tc-brass);
  box-shadow: 0 1px 3px #000, 0 0 0 2px rgba(231, 201, 135, 0.08);
}

.map-pin-lifetime input[type="range"]:focus-visible {
  outline: 1px solid var(--tc-brass-hi);
  outline-offset: 2px;
}

.map-pin-lifetime .mono {
  min-width: 68px;
  text-align: right;
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-brass-hi);
}

/* --- the province panel's pin list --- */

.province-pins {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}

/* The heading and the Place-a-pin button share a row: the control has to be
   visible before the province has any pins, since it is how a player learns
   the feature exists at all. */
.province-pins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.province-pins-head .dark-button {
  padding: 4px 10px;
  font-size: 11px;
  white-space: nowrap;
}

.province-pin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.province-pins-empty {
  color: rgba(214, 202, 178, 0.5);
  font-size: 11px;
  font-style: italic;
}

.province-pin-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  text-align: left;
  background: var(--tc-grad-tab-off);
  border: 1px solid #000;
  cursor: pointer;
}

.province-pin-row:hover {
  background: var(--tc-grad-tab-on);
}

.province-pin-icon {
  width: 32px;
  height: 32px;
}

.province-pin-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.province-pin-note {
  font-family: var(--tc-font-body);
  font-size: 12px;
  color: var(--tc-paper-2);
  overflow-wrap: anywhere;
}

.province-pin-meta {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--tc-steel);
}

/* ==========================================================================
   P-03 event popups
   The stack lives at body level (see controllers/event-notifications.js), so
   it must sit above every tier's chrome and never intercept a map drag except
   on the toasts themselves.
   ========================================================================== */

/* The root is sized to its own content, NOT a full-viewport `inset: 0` sheet.
   An invisible overlay across the whole app is a blunt instrument: it sits over
   every other surface and only stays harmless for as long as nothing else needs
   to hit-test through it. */
#event-toast-root {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 400;
}

.event-toast-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
}

.event-toast {
  display: flex;
  align-items: stretch;
  background: var(--tc-grad-panel);
  border: 1px solid #000;
  border-left: 4px solid var(--nation-color, var(--tc-brass));
  box-shadow: var(--tc-bevel), 0 6px 18px rgba(0, 0, 0, 0.45);
  animation: event-toast-in 180ms ease-out;
}

@keyframes event-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.event-toast-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 4px 9px 11px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.event-toast-open:hover .event-toast-text {
  color: var(--tc-paper);
}

.event-toast-type {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-brass);
}

.event-toast-text {
  font-family: var(--tc-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tc-paper-2);
  overflow-wrap: anywhere;
}

.event-toast-meta {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--tc-steel);
}

.event-toast-dismiss {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 6px 9px;
  background: none;
  border: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--tc-steel-2);
  cursor: pointer;
}

.event-toast-dismiss:hover {
  color: var(--tc-paper-2);
}

/* T-06 fortification palette. Not a dialog like fire control — it is a tool
   tray you keep open while placing, so it sits down the left where it does not
   cover the ground being dug, and the phase banner keeps the top. */
.tac3d-fortifications {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: min(268px, 84vw);
  max-height: min(70vh, 560px);
  padding: 10px 12px 12px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
  color: #e7dcc4;
}
.tac3d-fortifications .tac3d-scroll { min-height: 0; max-height: none; }
.tac3d-fort-budget {
  font-variant-numeric: tabular-nums;
  color: #cfae64;
  font-weight: 600;
}
.tac3d-fort-hint {
  font-size: 10px;
  line-height: 1.35;
  color: #8d97a2;
  margin: 2px 0 8px;
}
.tac3d-fort-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 6px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(207, 174, 100, 0.18);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.tac3d-fort-row:hover:not(:disabled) { border-color: rgba(207, 174, 100, 0.5); }
.tac3d-fort-row.armed {
  border-color: #cfae64;
  background: rgba(207, 174, 100, 0.16);
}
.tac3d-fort-row:disabled,
.tac3d-fort-row.unaffordable { opacity: 0.38; cursor: default; }
.tac3d-fort-cost {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: #cfae64;
  text-align: center;
}
.tac3d-fort-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tac3d-fort-name { font-size: 12px; }
.tac3d-fort-facts { font-size: 10px; color: #8d97a2; }
.tac3d-fort-shape { font-size: 9px; color: #6f7a85; white-space: nowrap; }
.tac3d-fort-placed {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid rgba(207, 174, 100, 0.16);
}
.tac3d-fort-remove {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(207, 174, 100, 0.2);
  border-radius: 3px;
  color: #b9c3cd;
  cursor: pointer;
  font-size: 10px;
  padding: 3px 6px;
}
.tac3d-fort-remove:hover { border-color: #cfae64; color: #fff3d8; }

/* P-09 — a concluded campaign is an inspectable final record, never an
   apparently-live game with a stopped clock. */
.campaign-concluded-banner {
  position: fixed;
  z-index: 34;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: min(560px, calc(100vw - 32px));
  padding: 9px 20px;
  border: 1px solid rgba(207, 174, 100, 0.72);
  border-top: 0;
  background: linear-gradient(180deg, rgba(48, 38, 24, 0.98), rgba(20, 23, 24, 0.98));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.46);
  color: #f1dfb6;
  font-family: "Cinzel", serif;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.campaign-concluded-banner strong { font-size: 13px; text-transform: uppercase; }
.campaign-concluded-banner span { color: #b9ad91; font: 11px "Inter", sans-serif; text-transform: uppercase; }

.campaign-concluded-dialog {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(107, 84, 43, 0.18), transparent 36%),
    rgba(5, 8, 9, 0.82);
  backdrop-filter: blur(5px) saturate(0.55);
}
.campaign-concluded-card {
  width: min(560px, calc(100vw - 40px));
  padding: 32px 38px 30px;
  border: 1px solid rgba(207, 174, 100, 0.62);
  outline: 1px solid rgba(0, 0, 0, 0.8);
  outline-offset: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 45%),
    #171b1b;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.74);
  text-align: center;
}
.campaign-concluded-card h1 {
  margin: 18px 0 3px;
  color: #f1dfb6;
  font-family: "Cinzel", serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.campaign-concluded-turn {
  margin-bottom: 22px;
  color: #cfae64;
  font: 700 12px "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.campaign-concluded-card p {
  max-width: 440px;
  margin: 9px auto;
  color: #bdc2bd;
  font-size: 14px;
  line-height: 1.55;
}
.campaign-concluded-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 27px;
}
.campaign-is-read-only { filter: saturate(0.82); }

@media (max-width: 640px) {
  .campaign-concluded-banner { align-items: center; flex-direction: column; gap: 2px; text-align: center; }
  .campaign-concluded-card { padding: 28px 22px 24px; }
  .campaign-concluded-actions { flex-direction: column-reverse; }
}

/* PT-42: a division in a battle is the one status worth catching your eye in a
   column of "Stationary". Warning colour, not brass — brass is for things you
   chose. */
.division-status-in-battle {
  color: #d98b68;
  font-weight: 700;
}

/* PT-39 (playtest 2026-09-02): why a cabinet-gated control is dead.
   ------------------------------------------------------------------
   Every gated control asks `actsAsCabinetRole`, so a player holding no seat
   sees the whole sheet go flat at once — with a generic `not-allowed` cursor
   as the only explanation. Daniel: "everything just becomes disabled, and it
   isn't obvious why."

   The banner says it once with the live point count, which a cursor cannot
   carry; the cursor confirms it per control, which a banner cannot do. The two
   marks distinguish the two situations Daniel is actually in: a seat you could
   assume, and a seat you cannot afford. */
/* Docked directly under the sheet's header by `applyCabinetGateCursor`, so it
   sits above the controls it is explaining instead of over the header it
   would otherwise cover. */
.cabinet-gate-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 16px;
  background: rgba(231,201,135,0.08);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(231,201,135,0.18);
  color: var(--tc-paper-2);
  font-family: var(--tc-font-mono);
  font-size: 11px;
}

.cabinet-gate-banner span {
  flex: 1 1 auto;
}

.cabinet-gate-banner.cabinet-gate-exhausted {
  background: rgba(196,62,48,0.12);
  box-shadow: inset 0 0 0 1px rgba(196,62,48,0.42);
  color: #e7dcc4;
}

.cabinet-gate-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}

.cabinet-gate-exhausted .cabinet-gate-mark {
  filter: grayscale(0.5) brightness(0.85);
}

/* One rule per situation, covering every disabled control on the sheet — no
   individual control has to know it is being gated. `:disabled` is the whole
   surface Daniel was hovering: the gate renders controls disabled, it does not
   remove them. */
.sheet.cabinet-gated-assumable button:disabled,
.sheet.cabinet-gated-assumable input:disabled,
.sheet.cabinet-gated-assumable select:disabled,
.sheet.cabinet-gated-assumable .disabled {
  cursor: url("./assets/cursors/cursor-no-seat.png") 8 8, not-allowed;
}

.sheet.cabinet-gated-exhausted button:disabled,
.sheet.cabinet-gated-exhausted input:disabled,
.sheet.cabinet-gated-exhausted select:disabled,
.sheet.cabinet-gated-exhausted .disabled {
  cursor: url("./assets/cursors/cursor-no-points.png") 8 8, not-allowed;
}

/* The banner's own button is not gated — it is the way out. */
.cabinet-gate-banner button {
  flex: 0 0 auto;
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
}

/* O-12: command mode vs observer mode. The toggle sits in the operational top
   bar because it is a MODE, not an overlay — it changes what the HUD offers,
   where an overlay chip only changes what is drawn. It is rendered only for a
   viewer who actually holds a commander seat (see `OperationalModeToggle`), so
   it can never be the thing that grants capability. */
.operational-mode-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 10px;
  background: var(--tc-grad-tab-off, rgba(0,0,0,0.28));
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(231,201,135,0.12);
  color: var(--tc-steel);
  cursor: url("./assets/cursors/cursor-hand.png") 24 5, pointer;
  font-family: var(--tc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.operational-mode-toggle.commanding {
  background: var(--tc-grad-tab-on);
  color: var(--tc-brass-hi);
}

.operational-mode-toggle.commanding .chip-box {
  background: var(--tc-brass-hi);
}

.operational-mode-toggle.observing .chip-box {
  border-color: var(--tc-steel);
}

/* V-19 — the Tactical HUD is one perimeter instrument, not a collection of
   dialogs. Generated pixels own material; CSS owns geometry. The 192px frame
   is a true 3x3 source (64px slices): corners stay fixed while the deliberately
   quiet middle strips repeat every 12 CSS pixels instead of stretching wear,
   fasteners, or bevels across the viewport. */
.tactical3d-shell {
  --tac3d-edge: 8px;
  --tac3d-frame-w: 12px;
  --tac3d-reserve-w: 276px;
  --tac3d-reserve-h: 276px;
  --tac3d-awaiting-h: 164px;
  --tac3d-order-w: 440px;
  --tac3d-order-h: 430px;
  --tac3d-overlay-w: 166px;
  --tac3d-minimap-w: 236px;
  --tac3d-dock-h: 110px;
  --tac3d-status-h: 150px;
  --tac3d-dock-w: min(
    560px,
    calc(100vw - var(--tac3d-edge) - var(--tac3d-edge) - var(--tac3d-reserve-w) - var(--tac3d-order-w))
  );
}

.tac3d-chassis {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  border: 10px solid transparent;
  border-image: url("/assets/tactical/ui/hud_chassis_frame.png") 64 / 10px / 0 repeat;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.82));
}

.tac3d-panel,
.tac3d-options-host,
.tac3d-overlay-chips,
.tac3d-dock {
  box-sizing: border-box;
  border: var(--tac3d-frame-w) solid transparent;
  border-image: url("/assets/tactical/ui/hud_chassis_frame.png") 64 / var(--tac3d-frame-w) / 0 repeat;
  background-color: rgba(10, 15, 20, 0.94);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.12)),
    url("/assets/tactical/ui/hud_panel_texture.png");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 128px 128px;
  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.46),
    inset 0 0 24px rgba(0, 0, 0, 0.24);
}

/* The menu is a fixed instrument socket. Its foldout remains independently
   interactive and is allowed to escape the socket. */
.tac3d-options-host {
  left: var(--tac3d-edge);
  top: var(--tac3d-edge);
  z-index: 7;
  width: 52px;
  height: 126px;
  padding: 16px 9px;
}

.tac3d-options-host .operational-options-toggle {
  border-color: rgba(0, 0, 0, 0.82);
  background: rgba(6, 10, 14, 0.74);
  box-shadow: inset 0 0 0 1px rgba(207, 170, 86, 0.12);
}

/* Top rail: menu | elastic battalion roster | overlay instruments | minimap.
   Every edge is derived from the neighbouring fixed module, so resizing can
   only change the quiet roster span. */
.tac3d-battalions {
  left: calc(var(--tac3d-edge) + 52px);
  right: calc(var(--tac3d-edge) + var(--tac3d-overlay-w) + var(--tac3d-minimap-w));
  top: var(--tac3d-edge);
  height: 126px;
  min-height: 0;
  padding: var(--tac3d-frame-w) 0;
}

.tac3d-battalion-tab {
  padding-top: 6px;
  padding-bottom: 6px;
  background: rgba(4, 8, 12, 0.12);
}

.tac3d-overlay-chips {
  top: var(--tac3d-edge);
  right: calc(var(--tac3d-edge) + var(--tac3d-minimap-w));
  z-index: 6;
  width: var(--tac3d-overlay-w);
  height: 126px;
  gap: 3px;
  padding: 15px 12px;
}

.tac3d-overlay-chips .overlay-chip {
  width: 100%;
  height: 24px;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 7px;
  background: rgba(5, 9, 13, 0.56);
  border-color: rgba(0, 0, 0, 0.76);
  font-size: 9px;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.tac3d-minimap {
  top: var(--tac3d-edge);
  right: var(--tac3d-edge);
  width: var(--tac3d-minimap-w);
  padding: 18px;
}

.tac3d-minimap .tac3d-kicker {
  margin: -5px 0 5px;
}

/* Left tower. Awaiting Orders is always the same width as Reserve and shares
   its edge; both keep their complete footprints while their lists scroll. */
.tac3d-reserve,
.tac3d-unassigned {
  left: var(--tac3d-edge);
  width: var(--tac3d-reserve-w);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.tac3d-reserve {
  bottom: var(--tac3d-edge);
  height: var(--tac3d-reserve-h);
  max-height: none;
}

.tac3d-unassigned {
  bottom: calc(var(--tac3d-edge) + var(--tac3d-reserve-h));
  height: var(--tac3d-awaiting-h);
  max-height: none;
}

.tac3d-reserve .tac3d-scroll,
.tac3d-unassigned .tac3d-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Right tower. It is greedy by construction: selecting nothing, a reserve
   unit, or a fully equipped unit changes the contents but never its footprint. */
.tac3d-order-panel {
  right: var(--tac3d-edge);
  bottom: var(--tac3d-edge);
  width: var(--tac3d-order-w);
  height: var(--tac3d-order-h);
  max-height: none;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* The status bay reserves both readout wells at all times. Command and
   Deployment messages occupy those wells; absent messages leave a recessed
   blank rather than collapsing the panel. */
.tac3d-status-bay {
  right: calc(var(--tac3d-edge) + var(--tac3d-order-w));
  bottom: calc(var(--tac3d-edge) + var(--tac3d-dock-h));
  width: var(--tac3d-dock-w);
  height: var(--tac3d-status-h);
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 18px;
  overflow: hidden;
}

.tac3d-status-bay > .tac3d-panel,
.tac3d-status-empty {
  position: static;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 6px 12px;
  border: 0;
  border-image: none;
  background: linear-gradient(180deg, rgba(4, 8, 12, 0.72), rgba(18, 24, 30, 0.42));
  box-shadow:
    inset 0 0 0 1px rgba(132, 148, 162, 0.18),
    inset 0 8px 18px rgba(0, 0, 0, 0.24);
  text-align: center;
}

.tac3d-status-bay > .tac3d-panel + .tac3d-panel,
.tac3d-status-bay > .tac3d-panel + .tac3d-status-empty,
.tac3d-status-bay > .tac3d-status-empty + .tac3d-panel,
.tac3d-status-bay > .tac3d-status-empty + .tac3d-status-empty {
  border-top: 1px solid rgba(207, 170, 86, 0.28);
}

.tac3d-status-bay .tac3d-kicker {
  margin-bottom: 3px;
}

.tac3d-status-bay .tac3d-deploy-banner-line {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tac3d-status-bay .tac3d-deploy-banner-sub {
  overflow: hidden;
  margin-top: 2px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tac3d-status-empty {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr);
  align-items: center;
  gap: 10px;
  color: rgba(143, 154, 165, 0.42);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tac3d-status-empty i {
  height: 1px;
  background: linear-gradient(90deg, rgba(132, 148, 162, 0.22), transparent);
}

/* The playback transport and phase bar occupy one permanent two-row console.
   The empty transport row remains physically present at the live edge. */
.tac3d-dock {
  right: calc(var(--tac3d-edge) + var(--tac3d-order-w));
  bottom: var(--tac3d-edge);
  width: var(--tac3d-dock-w);
  height: var(--tac3d-dock-h);
  max-width: none;
  display: grid;
  grid-template-rows: 43px 43px;
  align-items: stretch;
  padding: 12px;
}

.tac3d-dock-row {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.tac3d-dock-row:first-child::before {
  content: "Turn playback";
  position: absolute;
  left: 9px;
  top: 50%;
  color: rgba(143, 154, 165, 0.34);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.tac3d-dock-row:first-child:has(.tac3d-transport:not([hidden]))::before {
  display: none;
}

.tac3d-dock .tac3d-panel {
  position: static;
  min-width: 0;
  height: 100%;
  padding: 5px 9px;
  border: 0;
  border-image: none;
  background: rgba(4, 8, 12, 0.5);
  box-shadow: inset 0 0 0 1px rgba(132, 148, 162, 0.16);
}

.tac3d-dock-row + .tac3d-dock-row .tac3d-panel {
  border-top: 1px solid rgba(207, 170, 86, 0.3);
}

.tac3d-dock .tac3d-transport[hidden] {
  display: none;
}

.tac3d-dock .tac3d-turnbar {
  gap: 10px;
}

.tac3d-dock .tac3d-turnbar-turn strong {
  font-size: 15px;
}

.tac3d-dock .tac3d-transport {
  gap: 7px;
}

/* A real lower bound is kinder than silently overlapping the command surface.
   The canvas remains mounted behind this message, so restoring the viewport is
   instantaneous and does not rebuild the battle. */
.tac3d-resolution-gate {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  place-items: center;
  padding: 28px;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(35, 43, 50, 0.97), rgba(7, 10, 13, 0.99) 68%),
    url("/assets/tactical/ui/hud_panel_texture.png") repeat;
  color: #e7dcc4;
  text-align: center;
}

.tac3d-resolution-gate > div {
  width: min(470px, 90vw);
  padding: 38px 42px;
  border: 16px solid transparent;
  border-image: url("/assets/tactical/ui/hud_chassis_frame.png") 64 / 16px / 0 repeat;
  background: rgba(8, 12, 16, 0.82);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.62);
}

.tac3d-resolution-gate span,
.tac3d-resolution-gate strong,
.tac3d-resolution-gate small {
  display: block;
}

.tac3d-resolution-gate span {
  color: #9aa6b2;
  font-family: var(--tc-font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tac3d-resolution-gate strong {
  margin-top: 10px;
  color: #f0d184;
  font-family: var(--tc-font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tac3d-resolution-gate small {
  margin-top: 12px;
  color: #9aa6b2;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 1279px), (max-height: 719px) {
  .tac3d-resolution-gate { display: grid; }
}