@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("./fonts/IBMPlexSans-Variable.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/BarlowCondensed-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/BarlowCondensed-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/BarlowCondensed-ExtraBold.ttf") format("truetype");
}
:root {
  color-scheme: dark;
  --ink: #e9e6d9;
  --muted: #99a49c;
  --gold: #e1c38c;
  --blue: #7bb7d5;
  --red: #df8273;
}
.startup-failed > :not(#startup-error) {
  display: none !important;
}
#startup-error {
  z-index: 120;
  background: linear-gradient(115deg, #0b161b, #253b3b);
}
#focus-status {
  position: fixed;
  z-index: 80;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 12px 18px;
  background: #14292deb;
  border: 1px solid #e1c38c70;
  color: var(--gold);
  text-align: center;
  pointer-events: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #1c2928;
  color: var(--ink);
  font:
    13px "IBM Plex Sans",
    sans-serif;
  overflow: hidden;
}
#scene {
  position: fixed;
  inset: 0;
}
canvas {
  display: block;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(#101c20ed, #101c2050, transparent);
  pointer-events: none;
}
.brand {
  font:
    800 30px "Barlow Condensed",
    sans-serif;
  letter-spacing: 5px;
  color: var(--ink);
  text-decoration: none;
}
.brand span {
  display: block;
  font:
    9px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 2px;
  margin-top: 5px;
  color: var(--muted);
}
.battle {
  display: flex;
  align-items: center;
  gap: 25px;
}
.team {
  font:
    600 13px "Barlow Condensed",
    sans-serif;
  letter-spacing: 2px;
}
.team b {
  font-size: 30px;
  letter-spacing: 0;
  margin: 0 10px;
}
.blue {
  color: var(--blue);
}
.red {
  color: var(--red);
}
.point {
  text-align: center;
  width: 190px;
}
.point small {
  font-size: 9px;
  letter-spacing: 2px;
  color: #b8bfb2;
}
.track {
  margin: 10px 0 6px;
  background: #ffffff21;
  height: 3px;
  position: relative;
}
.track:after {
  content: "";
  position: absolute;
  left: 50%;
  height: 9px;
  top: -3px;
  background: var(--ink);
  width: 1px;
}
.track i {
  display: block;
  background: var(--gold);
  width: 0;
  height: 100%;
  position: absolute;
  left: 50%;
}
.point > span {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--gold);
}
.connection {
  text-align: right;
  font-size: 9px;
  letter-spacing: 1.4px;
}
.connection small {
  display: block;
  color: var(--muted);
  margin-top: 7px;
  font-size: 9px;
  letter-spacing: 0.2px;
}
#led {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #be8566;
  border-radius: 50%;
  margin-right: 7px;
}
.mission {
  position: fixed;
  top: 140px;
  left: 30px;
  width: 246px;
  background: linear-gradient(90deg, #152024d9, #152024a0);
  padding: 22px;
  border: 1px solid #e4e2c514;

  backdrop-filter: none;
  pointer-events: none;
}
.eyebrow {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: var(--gold);
}
h1 {
  font:
    600 39px/0.98 "Barlow Condensed",
    sans-serif;
  margin: 16px 0 12px;
  letter-spacing: 0.5px;
}
.mission p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
}
.mission ol {
  list-style: none;
  margin: 25px 0;
  padding: 0;
}
.mission li {
  display: flex;
  gap: 12px;
  margin: 18px 0;
  font-size: 10px;
  line-height: 1.6;
}
.mission li > b {
  color: var(--gold);
  font:
    600 16px "Barlow Condensed",
    sans-serif;
}
.mission small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 3px;
}
.legend {
  border-top: 1px solid #ffffff15;
  padding-top: 15px;
  display: flex;
  gap: 13px;
  font-size: 8px;
  color: var(--muted);
}
.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 4px;
}
.blue-bg {
  background: var(--blue);
}
.red-bg {
  background: var(--red);
}
footer {
  position: fixed;
  bottom: 22px;
  left: 30px;
  right: 30px;
  min-height: 88px;
  border: 1px solid #d1d4bb23;
  background: #122024e8;

  backdrop-filter: none;
  display: flex;
  align-items: center;
  padding: 17px 24px;
  gap: 32px;
}
footer small {
  font-size: 8px;
  letter-spacing: 1.4px;
  color: var(--muted);
  display: block;
  margin-bottom: 7px;
}
footer strong {
  font:
    600 27px "Barlow Condensed",
    sans-serif;
}
footer em {
  font-size: 15px;
  color: #81928b;
  font-style: normal;
}
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 170px;
}
.identity strong {
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
}
.unit-icon {
  border: 1px solid #d1d4bb44;
  width: 40px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: var(--gold);
}
.vital {
  width: 115px;
  position: relative;
}
.vital strong {
  font-size: 20px;
}
.hp-track {
  background: #ffffff16;
  height: 3px;
  margin-top: 5px;
}
.hp-track i {
  display: block;
  height: 100%;
  background: #9ab497;
  width: 100%;
}
#stamina-panel {
  margin-top: 7px;
}
.stamina-heading {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.stamina-heading small,
#stamina-state,
#stamina-value {
  font-size: 8px;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.4;
}
#stamina-state {
  display: block;
  margin-top: 3px;
  color: #b9c8b1;
}
.stamina-track {
  height: 2px;
  margin-top: 3px;
  background: #ffffff16;
}
#stamina-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: #d6c48d;
}
.controls {
  margin-left: auto;
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 18px;
  font-size: 9px;
  color: var(--muted);
}
kbd {
  font:
    8px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
  border: 1px solid #ffffff26;
  padding: 3px 5px;
  margin-right: 4px;
}
.overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, #0b161beb, #0d1921a6 50%, #18242530);
  display: flex;
  align-items: flex-start;
  padding: clamp(20px, 5vh, 60px) 7vw;
  overflow-y: auto;

  backdrop-filter: none;
}
.overlay[hidden] {
  display: none;
}
.brief {
  max-width: 440px;
  width: 100%;
  margin-block: auto;
}
.brief h2 {
  font:
    600 clamp(36px, 4.3vw, 56px) / 1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 1px;
  margin: 18px 0;
}
.brief p {
  font-size: 13px;
  color: #bac2b7;
  line-height: 1.9;
  max-width: 380px;
}
.brief label {
  font-size: 9px;
  letter-spacing: 2px;
  display: block;
  margin: 28px 0 9px;
}
input {
  background: #ffffff07;
  border: 1px solid #ffffff25;
  color: var(--ink);
  padding: 13px 15px;
  font:
    13px "IBM Plex Sans",
    sans-serif;
  width: 100%;
  outline: none;
}
input:focus {
  border-color: var(--gold);
}
button {
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #ffffff26;
  color: var(--ink);
  background: #ffffff05;
}
.choose {
  display: flex;
  gap: 10px;
  margin: 13px 0;
}
.choose button {
  width: 50%;
  text-align: left;
  padding: 13px;
  font-size: 11px;
  letter-spacing: 1px;
}
.choose small {
  display: block;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 6px;
}
.choose .selected {
  border-color: var(--blue);
  background: #6aabc519;
}
.choose button[data-team="1"].selected {
  border-color: var(--red);
  background: #df827319;
}
.primary {
  width: 100%;
  padding: 17px 20px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 2px;
  background: var(--gold);
  color: #17201e;
  border: 0;
  margin: 3px 0 18px;
}
.primary span {
  float: right;
  font-size: 19px;
  line-height: 12px;
}
.primary:disabled {
  opacity: 0.5;
  cursor: wait;
}
.fine {
  font-size: 9px !important;
  line-height: 1.8;
  color: var(--muted);
}
.fine a {
  color: var(--muted);
  text-underline-offset: 3px;
}
.invite-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
  font-size: 10px;
  color: var(--muted);
}
.invite-row button {
  padding: 9px 12px;
  font-size: 10px;
}
#invite-link {
  font-size: 12px;
}
#connection-status {
  min-height: 30px;
  font-size: 11px;
  line-height: 1.6;
  color: #d6bd8d;
}
#toast {
  position: fixed;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  background: #101c22db;
  padding: 12px 20px;
  font-size: 11px;
  border-left: 2px solid var(--gold);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#crosshair {
  position: fixed;
  pointer-events: none;
  width: 2px;
  height: 2px;
  display: none;
  transform: translate(-50%, -50%);
}
#respawn {
  position: fixed;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  font:
    500 16px "Barlow Condensed",
    sans-serif;
  background: #162329dd;
  padding: 20px 35px;
  width: min(480px, calc(100vw - 36px));
  box-sizing: border-box;
  z-index: 20;
  border: 1px solid #b6b28a55;
}
#respawn h2 {
  font-size: 28px;
  margin: 10px 0 16px;
}
#respawn p {
  line-height: 1.4;
  min-height: 44px;
}
#respawn small {
  display: block;
  font-size: 12px;
  color: #c2c5b3;
  margin-top: 10px;
}
.spawn-choices {
  display: flex;
  gap: 8px;
}
.spawn-choices button {
  flex: 1;
  padding: 12px 8px;
  border: 1px solid #8c9b9070;
  background: #233638;
  color: #e5e6d5;
  cursor: pointer;
}
.spawn-choices button[aria-pressed="true"] {
  border-color: #eed6a3;
  background: #4e5745;
}
#forward-ready {
  font-size: 10px;
  color: #e4ce95;
  white-space: nowrap;
  margin-top: 5px;
}
#forward-ready.cut-off {
  color: #d79e8e;
}
#truck-panel {
  position: fixed;
  right: 30px;
  top: 160px;
  width: 250px;
  padding: 18px;
  background: #142427e8;
  border: 1px solid #d1bc8550;
  max-height: max(120px, calc(100vh - 460px));
  overflow-y: auto;
  scrollbar-width: thin;
}
#truck-panel h3 {
  font:
    600 22px "Barlow Condensed",
    sans-serif;
  margin: 10px 0;
}
#truck-condition {
  color: #c3c9b0;
  font-size: 12px;
}
#truck-action {
  color: #f0d39a;
  line-height: 1.5;
}
#truck-driving {
  font-size: 11px;
  line-height: 1.7;
  color: #aebcb8;
}
#minimap-open {
  position: fixed;
  right: 30px;
  bottom: 125px;
  width: 200px;
  padding: 5px;
  background: #102127e8;
  border: 1px solid #bec9a752;
}
#minimap-open span {
  display: block;
  font:
    600 10px "Barlow Condensed",
    sans-serif;
  letter-spacing: 1px;
  margin-bottom: 5px;
  color: #d8c796;
}
#mini-canvas {
  width: 100%;
  height: auto;
}
#tactical-map {
  position: fixed;
  inset: 24px 30px;
  z-index: 40;
  background: #102227f5;
  border: 1px solid #d5c99d75;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  backdrop-filter: none;
}
#tactical-map[hidden] {
  display: none;
}
.map-heading {
  display: flex;
  gap: 15px;
  align-items: center;
}
.map-heading h2 {
  font:
    600 26px "Barlow Condensed",
    sans-serif;
  margin: 0;
}
.map-heading span {
  margin-left: auto;
  font-size: 11px;
  color: #d6c89f;
}
.map-heading button {
  padding: 9px;
  font-size: 10px;
}
#map-supply {
  margin: 0;
  color: #c5d6b8;
  font-size: 11px;
}
.map-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 9px;
  color: #adb7a6;
}
.map-tools button {
  font-size: 10px;
  padding: 8px;
}
.map-tools button[aria-pressed="true"] {
  background: #665f3b;
  border-color: #dec795;
}
.map-viewport {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
}
#map-canvas {
  height: 100%;
  width: auto;
  max-width: 100%;
  cursor: crosshair;
}
#map-messages {
  white-space: pre-line;
  margin: 0;
  font-size: 10px;
  color: #d7cca1;
  max-height: 40px;
  overflow: auto;
}
#tactical-map small {
  font-size: 9px;
  color: #aebcaf;
}
#world-save {
  position: fixed;
  top: 84px;
  right: 30px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #c3c6af;
}
#world-save.save-error {
  color: #f0a28d;
}
#crosshair {
  --gap: 8px;
  color: #f4e4b0;
}
#crosshair i {
  position: absolute;
  background: currentColor;
  box-shadow: 0 0 2px #17211f;
}
#crosshair i:nth-child(1) {
  width: 7px;
  height: 1px;
  right: var(--gap);
  top: 0;
}
#crosshair i:nth-child(2) {
  width: 7px;
  height: 1px;
  left: var(--gap);
  top: 0;
}
#crosshair i:nth-child(3) {
  width: 1px;
  height: 7px;
  bottom: var(--gap);
  left: 0;
}
#crosshair i:nth-child(4) {
  width: 1px;
  height: 7px;
  top: var(--gap);
  left: 0;
}
#crosshair b {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  background: currentColor;
}
#crosshair.aiming {
  color: #f8f2d6;
}
#crosshair.out-of-range {
  color: #a5b0a4;
}
#hitmarker {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  color: #fff2ca;
}
#hitmarker i {
  position: absolute;
  top: 11px;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
#hitmarker i:nth-child(2) {
  transform: rotate(-45deg);
}
#hitmarker.kill {
  color: #ee8d70;
}
#damage-feedback {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 100px 25px #c84030;
  opacity: 0;
}
#suppression-feedback {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 110px 40px #343b32;
  opacity: 0;
}
#order-markers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.order-marker {
  position: fixed;
  transform: translate(-50%, -100%);
  pointer-events: none;
  text-align: center;
  color: #e8d49b;
  background: #1b2c2bd9;
  border: 1px solid currentColor;
  padding: 6px 9px;
  max-width: 160px;
  font-size: 10px;
  line-height: 1.5;
}
.order-marker-close {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #1b2c2b;
  color: inherit;
  font-size: 17px;
  line-height: 18px;
  cursor: pointer;
  pointer-events: auto;
}
.order-marker small {
  display: block;
  color: #d4dad0;
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-marker i {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  bottom: -5px;
  left: calc(50% - 4px);
  background: #1b2c2b;
}
.order-marker.danger {
  color: #e4a08d;
}
.order-marker.supply {
  color: #a8c8bf;
}
.order-marker.edge i {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 9px solid currentColor;
  background: none;
  bottom: auto;
  top: -15px;
  left: calc(50% - 5px);
  transform: rotate(var(--heading));
}
#suppression-state {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 8px 12px;
  background: #202d2bd9;
  color: #e6cf99;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
}
#damage-direction {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0;
}
#damage-direction i {
  position: absolute;
  top: 0;
  left: 80px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #ef806c;
}
#hit-status {
  position: fixed;
  bottom: 165px;
  left: 50%;
  transform: translateX(-50%);
  color: #f4dca4;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 1.4px;
  opacity: 0;
  text-shadow: 0 1px 3px #122022;
}
.damage-number {
  position: fixed;
  transform: translate(-50%, -50%);
  font:
    bold 19px "IBM Plex Sans",
    sans-serif;
  color: #ffebbd;
  pointer-events: none;
  text-shadow: 0 1px 3px #172021;
}
.damage-number.lethal {
  color: #f4a38a;
  font-size: 23px;
}
.combat-settings {
  position: fixed;
  right: 30px;
  top: 106px;
  width: 190px;
  background: #152024d9;
  border: 1px solid #e4e2c522;
  padding: 12px;
  font-size: 10px;
}
.combat-settings summary {
  cursor: pointer;
  color: var(--gold);
  letter-spacing: 1.5px;
  font-size: 9px;
}
.combat-settings[open] {
  z-index: 25;
  background: #152024;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.combat-settings button {
  width: 100%;
  padding: 8px;
  margin: 12px 0 7px;
}
.combat-settings label {
  display: block;
  margin: 8px 0;
  color: var(--muted);
}
.combat-settings select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  color: var(--ink);
  background: #152024;
  border: 1px solid #657568;
  font: inherit;
}
.combat-settings input[type="range"] {
  display: block;
  padding: 0;
  margin-top: 10px;
  accent-color: var(--gold);
}
.combat-settings .check {
  display: flex;
  align-items: center;
  gap: 7px;
}
.combat-settings input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
}
.combat-settings small {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-top: 12px;
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 180px #0b172252;
}
#build-panel {
  position: fixed;
  right: 30px;
  bottom: 150px;
  width: 290px;
  background: #122024ed;
  border: 1px solid #e1c38c55;
  padding: 18px;

  backdrop-filter: none;
}
#build-panel h3,
#fortification-info h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 10px 0;
}
/* Avoid compositing a blurred copy of the animated scene on slower devices. */
body :is(.mission, footer, .overlay, #tactical-map, #build-panel) {
  backdrop-filter: none;
}
#build-materials {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
}
#build-result {
  font-size: 11px;
  line-height: 1.6;
  min-height: 34px;
  margin: 16px 0;
}
.build-keys {
  display: flex;
  gap: 10px 12px;
  flex-wrap: wrap;
  font-size: 9px;
  color: var(--muted);
}
#fortification-info {
  position: fixed;
  right: 30px;
  top: 160px;
  width: 190px;
  background: #122024e8;
  border: 1px solid #ffffff28;
  padding: 14px;
  pointer-events: none;
}
#fortification-info small {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--gold);
}
#fortification-hp {
  font-size: 22px;
  font-weight: 500;
}
.structure-track {
  height: 4px;
  background: #ffffff20;
  margin: 10px 0;
}
.structure-track i {
  display: block;
  height: 100%;
  background: var(--gold);
}
#fortification-condition {
  font-size: 9px;
  color: var(--muted);
}
@media (max-width: 760px) {
  #build-panel {
    right: 15px;
    width: 270px;
  }
}
#supply-hint {
  position: fixed;
  bottom: 160px;
  left: 55%;
  transform: translateX(-50%);
  max-width: 60vw;
  padding: 10px 16px;
  background: #142328e8;
  border: 1px solid #dec38c55;
  color: #eeddba;
  font-size: 11px;
  text-align: center;
  pointer-events: none;
}
#supply-progress {
  border-top: 1px solid #ffffff17;
  padding-top: 12px;
  margin-bottom: 13px;
  color: var(--gold);
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 0.7px;
}
.mission li.active {
  color: #fff4d4;
}
.mission li.active > b {
  text-shadow: 0 0 12px #e1c38c;
}
.mission li.active small {
  color: #d1d2b7;
}
#toast {
  bottom: 218px;
  max-width: 60vw;
  text-align: center;
}
#reload-status {
  font-size: 8px;
  letter-spacing: 0;
  margin-top: 6px;
  margin-bottom: 0;
  color: #d7c48e;
}
#reload-track {
  height: 2px;
  margin-top: 4px;
  background: #ffffff16;
}
#reload-progress {
  display: block;
  height: 100%;
  background: #d7c48e;
}
#hit-status {
  bottom: 195px;
}
@media (max-width: 760px) {
  .mission {
    display: none;
  }
  #supply-hint {
    left: 50%;
    max-width: 90vw;
  }
  footer {
    gap: 12px;
    padding: 12px;
  }
  .identity {
    min-width: 100px;
  }
  footer strong {
    font-size: 22px;
  }
  .vital {
    width: 75px;
  }
}
@media (max-width: 1000px) {
  .mission {
    width: 200px;
    left: 18px;
    padding: 15px;
  }
  .battle {
    gap: 6px;
  }
  .point {
    width: 140px;
  }
  footer {
    left: 15px;
    right: 15px;
    gap: 18px;
    padding: 14px;
  }
  .controls {
    display: none;
  }
  .connection {
    display: none;
  }
  .identity {
    min-width: 130px;
  }
}
@media (max-height: 700px) {
  .mission {
    top: 105px;
  }
  .mission ol {
    margin: 12px 0;
  }
  .mission li {
    margin: 10px 0;
  }
  .brief h2 {
    font-size: clamp(32px, 7vw, 48px);
  }
  .brief label {
    margin-top: 15px;
  }
  .overlay {
    padding: 5vw;
  }
  .mission h1 {
    font-size: 30px;
    letter-spacing: -0.3px;
  }
}

#repair-hint {
  position: fixed;
  bottom: 156px;
  left: 30px;
  max-width: min(540px, 55vw);
  background: #15292bed;
  border: 1px solid #bfa56a;
  padding: 12px 16px;
  color: #f0daa5;
  font-size: 12px;
  z-index: 15;
}

#report-open {
  position: fixed;
  right: 30px;
  top: 158px;
  z-index: 8;
  font-size: 10px;
  padding: 9px 14px;
  background: #17282be8;
}
#operation-report {
  position: fixed;
  inset: 24px 30px;
  z-index: 65;
  background: #102428;
  border: 1px solid #c0b58666;
  overflow: auto;
  padding: 24px;
  color: #e9e4ca;
}
#operation-report header {
  position: static;
  height: auto;
  padding: 0;
  background: none;
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#operation-report h2 {
  margin: 0;
  font:
    600 30px "Barlow Condensed",
    sans-serif;
}
#report-subtitle,
#operation-report small {
  font-size: 11px;
  color: #b9c5b5;
}
.report-team {
  margin: 22px 0;
  border-top: 2px solid #789dae;
  padding-top: 8px;
}
.report-team.team-1 {
  border-color: #ba8c7f;
}
.report-team h3 {
  font-size: 14px;
  letter-spacing: 1px;
}
.report-team p {
  font-size: 12px;
  color: #d0ccb4;
}
.report-team table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.report-team th,
.report-team td {
  padding: 9px 8px;
  border-bottom: 1px solid #ffffff12;
  text-align: right;
}
.report-team th {
  font-size: 9px;
  color: #adb8a8;
}
.report-team th:first-child,
.report-team td:first-child {
  text-align: left;
}
.report-me {
  color: #f4d78a;
  background: #e8c6770d;
}
.report-dead {
  color: #8f9a90;
}
.report-team { overflow-x: auto; }
.report-team table { min-width: 900px; }
.report-team th:nth-child(2), .report-team td:nth-child(2) { text-align: left; min-width: 150px; }
.report-team th:first-child, .report-team td:first-child { width: 45px; text-align: center; }
.report-team td:last-child { font-weight: 700; color: #e7cd8d; font-size: 16px; }
.score-help { font-size: 12px; color: #b9c5b5; line-height: 1.6; }
.score-help summary { cursor: pointer; }
#victory-report {
  padding: 12px;
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  #operation-report {
    inset: 8px;
    padding: 12px;
  }
  .report-team table {
    font-size: 10px;
  }
  .report-team th,
  .report-team td {
    padding: 7px 3px;
  }
  #report-open {
    right: 16px;
    top: 145px;
  }
}

#performance-panel {
  position: fixed;
  right: 30px;
  top: 205px;
  z-index: 80;
  background: #102024f5;
  border: 1px solid #c5b88588;
  padding: 14px;
  width: 280px;
  pointer-events: none;
}
#performance-panel strong {
  font-size: 11px;
  color: #ecd294;
}
#performance-panel pre {
  font: 10px/1.7 monospace;
  margin: 12px 0;
  color: #d1d8c4;
}
#performance-panel canvas {
  width: 240px;
  height: 45px;
}

.mission {
  pointer-events: auto;
  top: 110px;
  padding: 18px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.mission-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.mission-toolbar > span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #b8c2ad;
}
#mission-toggle {
  font-size: 9px;
  padding: 8px 10px;
  white-space: nowrap;
}
.mission.collapsed {
  padding: 12px 16px;
}
.mission.collapsed .mission-toolbar {
  margin-bottom: 7px;
}
#mission-summary {
  font-size: 11px;
  line-height: 1.65;
  color: #d6d5bc;
}
.mission-reference {
  margin-top: 16px;
  border-top: 1px solid #ffffff22;
  padding-top: 12px;
}
.mission-reference summary {
  font-size: 9px;
  color: #dcc48b;
  cursor: pointer;
}
@media (max-width: 760px) {
  .mission {
    display: block;
    top: 105px;
    left: 14px;
    width: min(300px, calc(100vw - 28px));
    max-height: calc(100vh - 260px);
    padding: 14px;
  }
  .mission.collapsed {
    width: 210px;
    padding: 10px 12px;
  }
  #mission-summary {
    font-size: 10px;
  }
}

.mission h1 {
  font-size: clamp(28px, 2.4vw, 34px);
  margin: 12px 0 10px;
}
.mission ol {
  margin: 14px 0;
}
.mission li {
  margin: 11px 0;
}
#chat-open {
  position: fixed;
  top: 84px;
  left: 30px;
  z-index: 22;
  padding: 5px 9px;
  font-size: 9px;
  background: #13272bea;
}
#team-chat {
  position: fixed;
  top: 112px;
  left: 30px;
  z-index: 65;
  width: min(420px, calc(100vw - 60px));
  max-height: calc(100vh - 270px);
  padding: 16px;
  background: #102327fa;
  border: 1px solid #c8b27d;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
#team-chat[hidden] {
  display: none;
}
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 1px;
}
.chat-toolbar button {
  padding: 6px 8px;
  font-size: 9px;
}
#chat-log {
  min-height: 80px;
  height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
  overflow-wrap: anywhere;
  line-height: 1.65;
  font-size: 12px;
}
#chat-log p {
  margin: 0 0 9px;
}
#chat-log strong {
  color: #d9c38f;
}
#chat-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#chat-form label {
  width: 100%;
  font-size: 8px;
  letter-spacing: 1px;
  color: #aebcb5;
}
#chat-input {
  min-width: 0;
  flex: 1;
  font: inherit;
  font-size: 12px;
}
#chat-form button {
  padding: 9px;
  font-size: 9px;
}
#chat-status {
  font-size: 9px;
  line-height: 1.6;
  color: #bbc6b7;
}


/* Action failures must remain visible while selecting a mortar target. */
#toast { z-index: 110; font-size: 14px; max-width: min(680px, 85vw); }
.combat-settings input[type="checkbox"] { width: auto; margin-right: 8px; }

/* Reference and weapon windows occupy separate corners; gameplay HUD stays compact. */
.mission { max-height: calc(100vh - 230px); }
.mission.collapsed { width: auto; }
.mission.collapsed .mission-toolbar > span { display: none; }
#mission-content h2 { font-size: 24px; }
footer { right: auto; max-width: calc(100vw - 60px); min-height: 70px; gap: 24px; padding: 12px 18px; }
.damage-number { z-index: 111; }

body.in-lobby :is(.mission, footer, #truck-panel) { visibility: hidden; }

#workshop-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 95; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 24px; background: #13282af5; border: 1px solid #d3c38c88; color: #e4e7d6; box-shadow: 0 12px 80px #0008; pointer-events: auto; }
#workshop-panel[hidden] { display: none; }
#workshop-panel h2 { font-size: 30px; margin: 10px 0 18px; }
#workshop-panel small { display: block; color: #b7c5b8; font-size: 11px; line-height: 1.6; }
#workshop-panel p { font-size: 13px; line-height: 1.6; }
#workshop-panel button { display: block; width: 100%; margin: 8px 0; padding: 11px; font: inherit; font-size: 12px; cursor: pointer; color: #e4e7d6; background: #2d4240; border: 1px solid #819078; }
#workshop-panel button:disabled { opacity: .4; cursor: default; }
#workshop-panel #workshop-close { position: absolute; right: 10px; top: 6px; width: 30px; padding: 0; background: none; border: 0; font-size: 26px; }
.workshop-resources { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.workshop-resources strong { font-size: 32px; }
#workshop-panel #workshop-order { background: #d4bb7c; color: #172b2a; border-color: #d4bb7c; }
#workshop-progress { height: 6px; background: #69756355; margin-top: 18px; }
#workshop-progress i { display: block; width: 0; height: 100%; background: #d4bb7c; }
#workshop-limit { margin: 13px 0; }
#depot-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 95; width: min(380px,calc(100vw - 32px)); padding: 24px; background: #13282af5; border: 1px solid #d3c38c88; color: #e4e7d6; box-shadow: 0 12px 80px #0008; }
#depot-panel[hidden] { display: none; }
#depot-panel h2 { margin: 0 0 16px; font-size: 26px; }
#depot-panel p { font-size: 13px; line-height: 1.5; }
#depot-panel button { display: block; width: 100%; padding: 12px; margin-top: 10px; font: inherit; cursor: pointer; color: #e4e7d6; background: #2d4240; border: 1px solid #819078; }
#depot-panel button[hidden] { display: none; }
#depot-panel button:disabled { opacity: .4; cursor: default; }
#depot-panel #depot-close { position: absolute; top: 2px; right: 6px; width: 30px; margin: 0; padding: 0; font-size: 26px; border: 0; background: transparent; }
#cargo-action-hint { position: fixed; bottom: 150px; left: 50%; transform: translateX(-50%); max-width: min(600px,80vw); padding: 12px 40px 12px 16px; z-index: 35; background: #172b2aee; color: #e5c98a; border-left: 2px solid #d4bb7c; font-size: 13px; pointer-events: auto; }
#cargo-action-hint[hidden] { display: none; }
#cargo-action-hint button { position: absolute; top: 3px; right: 4px; width: 28px; height: 28px; border: 0; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
#structure-hint { position: fixed; right: 24px; top: 105px; z-index: 35; width: min(310px, calc(100vw - 32px)); padding: 18px 40px 16px 18px; background: #172b2aee; border-left: 3px solid #d4bb7c; box-shadow: 0 6px 24px #0003; color: #e4e7d6; pointer-events: auto; }
#structure-hint[hidden] { display: none; }
#structure-hint strong { color: #e5c98a; font-size: 15px; }
#structure-hint p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
#structure-hint button { position: absolute; right: 6px; top: 4px; width: 30px; height: 30px; color: #e4e7d6; background: transparent; border: 0; font-size: 25px; cursor: pointer; }
@media (max-width: 650px) { #structure-hint { right: 16px; top: 85px; width: min(270px, calc(100vw - 32px)); } }

#frontline-deploy {
  width:100%; padding:14px 20px; margin:0 0 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  text-align:left; color:var(--muted); background:transparent;
  border:1px solid #ffffff26; cursor:default;
}
#frontline-deploy small {font-size:9px;letter-spacing:1px;}

#frontline-deploy:not(:disabled){color:var(--gold);border-color:#cdb37877;cursor:pointer;}
#campaign-recipes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;}
#campaign-recipes button{padding:12px;text-align:left;line-height:1.5;}
#campaign-queue{font-size:12px;line-height:1.6;color:var(--muted);}
#campaign-spawn-choices{display:grid;gap:7px;}
#campaign-spawn-choices button{padding:10px;}
#campaign-spawn-map{max-width:100%;padding:7px;color:var(--text);background:#243b35;border:1px solid #879b83;}

#campaign-control{display:flex;gap:3px;justify-content:center;margin:4px 0;}
#campaign-control span{padding:3px 5px;font-size:8px;color:#142a26;letter-spacing:.5px;}
body[data-mode="frontline"] .point{width:240px;max-width:36vw;}
body[data-mode="frontline"] .point>span{display:block;letter-spacing:.5px;line-height:1.4;}
#location-notice{position:fixed;left:50%;top:145px;transform:translateX(-50%);max-width:min(430px,calc(100vw - 40px));padding:14px 40px 14px 20px;background:#142a28ed;border-left:2px solid var(--gold);z-index:12;pointer-events:auto;box-shadow:0 5px 20px #0003;}
#location-notice strong{display:block;font-size:20px;color:var(--gold);}
#location-notice span{display:block;margin-top:6px;font-size:12px;line-height:1.5;}
#location-notice button{position:absolute;right:6px;top:5px;border:0;background:transparent;color:var(--text);font-size:23px;cursor:pointer;}
.map-navigation{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#d8d5b6;font-size:12px;}
.map-navigation button{padding:8px 15px;color:#ead69c;border:1px solid #b9b38166;background:#273d37;}
#map-canvas{touch-action:none;outline:1px solid #c2bea355;box-shadow:0 8px 30px #0004;}
#map-canvas{width:auto;height:auto;max-width:100%;max-height:100%;align-self:center;}
#tactical-map{background:#162b29fa;border-color:#aaa987;}
#minimap-open{border-color:#9d9f7b80;background:#152b27f0;box-shadow:0 6px 18px #0004;}
.map-viewport{overflow:hidden;background:#142622;box-shadow:inset 0 0 35px #0003;}
body[data-mode="frontline"] #respawn{top:24%;}
body[data-mode="frontline"] #respawn>small:last-child{display:none;}
/* Respawn is a choice of destinations, without live tactical clutter. */
[hidden] { display: none !important; }
#respawn-map { position: relative; width: 100%; height: 100%; min-height: 280px; border: 1px solid #83938366; border-radius: 12px; overflow: hidden; background: #263e39; }
#respawn-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#respawn-map .spawn-site { position: absolute; transform: translate(-50%,-50%); width: max-content; max-width: 31%; min-height: 42px; padding: 10px 13px; border: 1px solid #89928766; border-radius: 8px; background: #213730ed; color: #99a397; font-size: 12px; text-transform: none; letter-spacing: 0; line-height: 1.3; opacity: .65; }
#respawn-map .spawn-site.available { color: #f3e4ba; border-color: #e2c688; background: #354c42; opacity: 1; cursor: pointer; animation: spawn-pulse 2.8s ease-in-out infinite; }
#respawn-map .spawn-site.available:hover, #respawn-map .spawn-site.available:focus-visible { background: #e1c48a; color: #1f3430; outline: 3px solid #e1c48a55; outline-offset: 4px; animation: none; }
#respawn-map .spawn-site.selected { background: #dfc187; color: #213730; box-shadow: 0 0 0 4px #e1c48a33; animation: none; }
.respawn-mode .map-navigation, .respawn-mode #map-contacts, .respawn-mode #map-messages, .respawn-mode .map-tools, .respawn-mode > small { display: none !important; }
.respawn-mode .map-heading h2 { text-transform: none; font-size: 27px; letter-spacing: 0; }
.respawn-mode #map-supply { font-size: 16px; color: #e6c994; }
@keyframes spawn-pulse { 50% { box-shadow: 0 0 0 5px #b4d5c622; border-color: var(--site-color,#f1deae); } }
@media (prefers-reduced-motion: reduce) { #respawn-map .spawn-site { animation: none !important; } }
#deploy, #frontline-deploy { font: 600 16px "IBM Plex Sans",sans-serif; letter-spacing: 0; text-transform: none; }
#connection-status:empty { display: none; }
#respawn-map { max-width: 1200px; box-shadow: 0 12px 35px #0004; }
#respawn-map .spawn-site { color: var(--site-color,#c4bc98); border-color: var(--site-color,#c4bc98); opacity: .95; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px #0004; }
#respawn-map .spawn-site[data-owner="0"] { background: #244753; }
#respawn-map .spawn-site[data-owner="1"] { background: #573b32; }
#respawn-map .spawn-site.available { color: var(--site-color); border-color: var(--site-color); }
#respawn-map .spawn-site.available:hover, #respawn-map .spawn-site.available:focus-visible { background: var(--site-color); color: #142722; outline-color: var(--site-color); }
#respawn-map .spawn-site.selected { background: var(--site-color); color: #142722; }
.respawn-mode .map-viewport { padding: 10px; border-radius: 14px; }

/* Give the tactical field the available height; keep its world proportions. */
#tactical-map{inset:8px;padding:10px;gap:6px;}
.map-heading h2{font-size:22px;}
.map-heading button,.map-tools button{padding:6px 9px;}
.map-navigation{font-size:11px;flex-shrink:0;}
.map-navigation button{padding:5px 12px;}
#map-canvas{height:100%;width:auto;max-width:100%;max-height:100%;object-fit:contain;}
#respawn,body[data-mode="frontline"] #respawn{top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));padding:22px 24px;}
#respawn h2{font-size:26px;line-height:1.15;margin:0 0 18px;text-transform:none;}
#respawn p{min-height:0;margin:14px 0 0;font-size:15px;line-height:1.35;}
#respawn .spawn-choices button{min-height:44px;padding:11px 9px;font-size:14px;}
body[data-mode="frontline"] #respawn-status{min-height:0;margin:12px 0 20px;}
#respawn-map-open{display:block;width:min(100%,320px);margin:18px auto 2px;padding:15px 24px;text-align:center;font:600 16px "Barlow Condensed",sans-serif;letter-spacing:.03em;border:1px solid #eed6a3;border-radius:4px;cursor:pointer;}
#respawn-map-open:hover{background:#edcf93;}
#respawn-map-open:focus-visible{outline:2px solid #f4e7c3;outline-offset:4px;}
.workshop-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:7px 0;}
.workshop-catalog button:last-child{grid-column:1/-1;}

#respawn .spawn-choices button{font:500 14px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:0;}
#respawn .spawn-choices button:disabled{opacity:.38;cursor:default;border-color:#8c9b9040;background:#233638;color:#c2c5b3;}

#respawn-menu{display:block;margin:16px auto 0;padding:8px 14px;font:500 14px "Barlow Condensed",sans-serif;text-transform:none;color:#ccd0c1;background:transparent;border:1px solid #8c9b9066;cursor:pointer;}
.respawn-mode .map-heading{flex-wrap:wrap;} #respawn-map-menu{text-transform:none;}