:root {
  color-scheme: dark;
  --panel-bg: rgba(20, 20, 24, 0.82);
  --panel-line: rgba(180, 180, 185, 0.35);
  --gold: #d6aa3a;
  --orange: #ffb326;
  --lime: #69f070;
  --pink: #ff5a9f;
  --team-red: #de4036;
  --team-blue: #4c6fff;

  /* HUD accent colors — red team defaults */
  --hud-chat-bg:      rgba(74, 28, 0, 0.9);
  --hud-chat-border:  rgba(112, 74, 20, 0.88);
  --hud-chat-text:    #d08a2c;
  --hud-chat-caret:   #d08a2c;
  --hud-input-bg:     rgba(30, 12, 0, 0.95);
  --hud-input-border: rgba(112, 74, 20, 0.88);
  --hud-alt-bg:       rgba(45, 8, 6, 0.82);
  --hud-alt-border:   rgba(126, 30, 24, 0.82);
  --hud-title-border: rgba(112, 74, 20, 0.7);
  --hud-title-bg:     rgba(40, 16, 0, 0.92);
  --hud-title-text:   #c08020;

  /* Status bar */
  --hud-sb-bg1:         rgba(60, 18, 4, 0.78);
  --hud-sb-bg2:         rgba(32, 10, 2, 0.92);
  --hud-sb-border:      rgba(107, 74, 24, 0.88);
  --hud-sb-text:        #d59631;
  --hud-sb-elem-bg:     rgba(58, 32, 8, 0.92);
  --hud-sb-elem-border: #7a5020;
  --hud-sb-elem-text:   #e0a030;

  /* Tracks (throttle / ping) */
  --hud-track-bg:       rgba(24, 12, 6, 0.95);
  --hud-track-border:   #5a3a10;
  --hud-track-stripe:   rgba(224, 164, 74, 0.3);

  /* Spawn / team screens */
  --spawn-bg:           rgba(74, 28, 0, 0.88);
  --spawn-text:         #b76522;
  --roster-text:        #ff4848;

  /* Map overlay */
  --map-text:           #d8a92c;
  --map-btn-text:       #f6dea1;
  --map-btn-border:     rgba(120, 100, 34, 0.95);
  --map-btn-bg1:        #9a7a1c;
  --map-btn-bg2:        #5b4510;
  --map-uplink-border:  rgba(100, 80, 20, 0.5);
}

/* Blue team HUD theme overrides */
body.team-blue {
  --hud-chat-bg:      rgba(0, 20, 56, 0.9);
  --hud-chat-border:  rgba(40, 80, 160, 0.88);
  --hud-chat-text:    #7aacf0;
  --hud-chat-caret:   #7aacf0;
  --hud-input-bg:     rgba(0, 10, 32, 0.95);
  --hud-input-border: rgba(40, 80, 160, 0.88);
  --hud-alt-bg:       rgba(6, 18, 45, 0.82);
  --hud-alt-border:   rgba(24, 60, 140, 0.82);
  --hud-title-border: rgba(40, 80, 160, 0.7);
  --hud-title-bg:     rgba(0, 14, 40, 0.92);
  --hud-title-text:   #5a90e0;

  /* Status bar */
  --hud-sb-bg1:         rgba(4, 18, 50, 0.78);
  --hud-sb-bg2:         rgba(2, 10, 36, 0.92);
  --hud-sb-border:      rgba(24, 74, 140, 0.88);
  --hud-sb-text:        #6a9ed0;
  --hud-sb-elem-bg:     rgba(8, 24, 58, 0.92);
  --hud-sb-elem-border: #20507a;
  --hud-sb-elem-text:   #30a0e0;

  /* Tracks (throttle / ping) */
  --hud-track-bg:       rgba(6, 12, 28, 0.95);
  --hud-track-border:   #103a5a;
  --hud-track-stripe:   rgba(74, 164, 224, 0.3);

  /* Spawn / team screens */
  --spawn-bg:           rgba(0, 20, 64, 0.88);
  --spawn-text:         #5086c8;
  --roster-text:        #4890e0;

  /* Map overlay */
  --map-text:           #6aacf0;
  --map-btn-text:       #d0e8ff;
  --map-btn-border:     rgba(34, 70, 140, 0.95);
  --map-btn-bg1:        #1c4a9a;
  --map-btn-bg2:        #10305b;
  --map-uplink-border:  rgba(20, 80, 130, 0.5);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.18), transparent 20%),
    radial-gradient(circle at 68% 22%, rgba(255, 255, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #c7c7c7 0%, #9d9d9d 38%, #7d7d7d 60%, #6b6b6b 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(0, 0, 0, 0.22), transparent 20%),
    radial-gradient(circle at 82% 80%, rgba(0, 0, 0, 0.18), transparent 20%);
  opacity: 0.85;
  pointer-events: none;
}

body.auth-open #hud {
  opacity: 0;
}

#game {
  width: 100vw;
  height: 100vh;
  display: block;
}

.hidden {
  display: none !important;
}

.screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
}

#auth-screen {
  z-index: 20;
}

#team-screen,
#spawn-screen {
  z-index: 30;
}

.auth-backdrop-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #040506;
  opacity: 0.94;
}

.auth-drone-tooltip {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(180, 180, 180, 0.45);
  font-size: clamp(9px, 0.7vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* When disconnected, fully cover the game world */
body.disconnected .auth-backdrop-art {
  opacity: 1;
}
body.disconnected .auth-error {
  color: #ff4848 !important;
  font-weight: bold;
  font-size: 1.1em;
}

#auth-live-map,
.auth-live-map-vignette,
.auth-live-map-scanlines,
.auth-live-map-noise {
  position: absolute;
  inset: 0;
}

#auth-live-map {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.9;
  filter: grayscale(1) contrast(1.24) brightness(0.68) saturate(0.1) blur(0.8px);
  transform: scale(1.03);
  animation: auth-monitor-flicker 8s steps(1, end) infinite;
}

.auth-live-map-vignette {
  background:
    linear-gradient(180deg, rgba(180, 210, 220, 0.08), transparent 16%),
    linear-gradient(90deg, rgba(170, 205, 220, 0.03), transparent 20%, transparent 80%, rgba(170, 205, 220, 0.03)),
    radial-gradient(circle at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.12) 44%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(180deg, rgba(4, 8, 8, 0.08), rgba(4, 8, 8, 0.34));
  pointer-events: none;
}

.auth-live-map-scanlines {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0.06) 4px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 8%, transparent 92%, rgba(255, 255, 255, 0.03));
  opacity: 0.24;
  mix-blend-mode: screen;
  pointer-events: none;
}

.auth-live-map-noise {
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.11) 0 0.6%, transparent 1.4%),
    radial-gradient(circle at 72% 64%, rgba(255, 255, 255, 0.08) 0 0.5%, transparent 1.3%),
    radial-gradient(circle at 44% 82%, rgba(255, 255, 255, 0.07) 0 0.45%, transparent 1.2%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0px,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 2px,
      transparent 4px
    );
  opacity: 0.11;
  mix-blend-mode: screen;
  animation: auth-monitor-noise 0.22s steps(2, end) infinite;
  pointer-events: none;
}

@keyframes auth-monitor-noise {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(-0.6%, 0.3%, 0);
  }
  50% {
    transform: translate3d(0.4%, -0.2%, 0);
  }
  75% {
    transform: translate3d(-0.3%, 0.4%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes auth-monitor-flicker {
  0%, 96%, 100% {
    opacity: 0.9;
  }
  97% {
    opacity: 0.86;
  }
  98% {
    opacity: 0.92;
  }
  99% {
    opacity: 0.88;
  }
}

.auth-shell,
.team-shell,
.spawn-shell {
  position: relative;
  width: min(1100px, calc(100vw - 64px));
  margin: 26px auto;
}

/* Make the spawn/entry map panel responsive on short screens */
.spawn-shell {
  max-height: calc(100vh - 48px);
  overflow: auto;
  width: min(1100px, calc(100vw - 64px));
}

.auth-logo {
  position: absolute;
  top: 12px;
  right: 24px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
}

.auth-logo-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.auth-logo-mainline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.auth-logo-word {
  font-size: clamp(28px, 4.2vw, 60px);
  letter-spacing: 0.14em;
  color: #867557;
  font-weight: 700;
}

.auth-logo-mark {
  font-size: clamp(68px, 9vw, 136px);
  line-height: 0.8;
  font-weight: 900;
  color: #bf9142;
}

.auth-logo-subtitle {
  margin-right: 8px;
  font-size: clamp(12px, 1.05vw, 18px);
  letter-spacing: 0.46em;
  color: rgba(220, 207, 168, 0.88);
  text-transform: uppercase;
}

.auth-monitor-hud,
.auth-live-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-monitor-label {
  position: absolute;
  color: rgba(169, 220, 194, 0.82);
  text-shadow: 0 0 8px rgba(104, 208, 154, 0.22);
  font-size: clamp(10px, 0.8vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(6, 14, 12, 0.24);
  border: 1px solid rgba(125, 180, 151, 0.14);
  padding: 8px 10px;
}

.auth-monitor-label-top-left {
  top: 22px;
  left: 22px;
  line-height: 1.6;
}

.auth-monitor-maps {
  margin-top: 6px;
  font-size: clamp(9px, 0.65vw, 11px);
  opacity: 0.7;
}

.auth-monitor-map-list {
  font-size: clamp(8px, 0.55vw, 10px);
  color: rgba(169, 220, 194, 0.45);
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.auth-monitor-label-top-right {
  top: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.auth-server-info {
  line-height: 1.5;
}

.auth-server-info-title {
  font-size: clamp(7px, 0.52vw, 9px);
  opacity: 0.5;
  margin-bottom: 4px;
  letter-spacing: 0.2em;
}

.auth-server-info-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  font-size: clamp(9px, 0.68vw, 11px);
}

.server-status-badge {
  font-size: clamp(7px, 0.52vw, 9px);
  font-weight: bold;
  letter-spacing: 0.12em;
  padding: 1px 6px;
  border-radius: 2px;
  background: #333;
  color: #888;
  border: 1px solid #444;
  flex-shrink: 0;
  transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.server-status-badge.badge-online {
  background: #0a2e1a;
  color: #4db88a;
  border-color: #1f6a40;
  box-shadow: 0 0 6px rgba(60, 200, 130, 0.35);
}

.server-status-badge.badge-offline {
  background: #2e0a0a;
  color: #c46060;
  border-color: #6a1f1f;
  box-shadow: 0 0 6px rgba(200, 60, 60, 0.3);
}

.auth-monitor-label-bottom-left {
  left: 22px;
  bottom: 18px;
}

.auth-monitor-label-bottom-right {
  right: 22px;
  bottom: 18px;
}

.auth-live-marker {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  box-shadow: 0 0 12px currentColor;
  transform: translateZ(0);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1px 7px no-repeat;
}

.auth-live-marker::before,
.auth-live-marker::after {
  display: none;
}

.auth-live-marker-label {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(220, 230, 226, 0.88);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

.auth-live-marker-red {
  color: rgba(255, 94, 94, 0.92);
  background: rgba(255, 72, 72, 0.28);
}

.auth-live-marker-blue {
  color: rgba(102, 143, 255, 0.92);
  background: rgba(76, 111, 255, 0.24);
}

.auth-live-marker-neutral {
  color: rgba(214, 214, 214, 0.86);
  background: rgba(214, 214, 214, 0.14);
}

.auth-frame {
  position: absolute;
  left: 50%;
  top: 25vh;
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 120px));
  min-height: 440px;
  padding: 36px 34px 28px;
  background: rgba(100, 100, 100, 0.24);
  border: 2px solid rgba(40, 40, 40, 0.6);
  box-shadow: inset 0 0 0 2px rgba(220, 220, 220, 0.14);
}

/* Small indicator shown when overlay UI is auto-scaled to fit */
.overlay-scale-indicator {
  position: absolute;
  right: 12px;
  top: 12px;
  background: rgba(12,12,12,0.7);
  color: #ffd77a;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(200,160,80,0.14);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  display: none;
  z-index: 9999;
}

.auth-message,
.team-console,
.team-header {
  background: rgba(22, 22, 22, 0.78);
  border: 2px solid rgba(76, 76, 76, 0.75);
  box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.12);
}

.auth-message {
  min-height: 112px;
  color: var(--lime);
  font-size: clamp(18px, 1.55vw, 28px);
  line-height: 1.42;
  padding: 24px 18px;
  margin-bottom: 32px;
}

.auth-form {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(270px, 1fr);
  gap: 18px 28px;
  align-items: start;
}

.auth-input-card,
.auth-sidecard {
  background: rgba(42, 42, 42, 0.82);
  border: 2px solid rgba(80, 80, 80, 0.82);
  box-shadow: inset 0 0 0 1px rgba(170, 170, 170, 0.14);
}

.auth-input-card {
  padding: 12px 14px 16px;
  min-height: 134px;
}

.auth-input-card label,
.auth-stage-copy {
  display: block;
  color: #ececec;
  font-size: clamp(18px, 1.2vw, 22px);
  margin-bottom: 10px;
}

.auth-stage-copy {
  grid-column: 1 / -1;
  color: var(--lime);
  margin-bottom: -2px;
}

.auth-warning {
  grid-column: 1 / -1;
  color: #ffd54d;
  font-size: clamp(16px, 1vw, 20px);
  margin-bottom: -6px;
}

.auth-input-card input {
  width: 100%;
  border: 0;
  outline: none;
  background: rgba(122, 88, 0, 0.68);
  color: #f5f5f5;
  padding: 16px 12px;
  font: inherit;
  font-size: clamp(24px, 2vw, 34px);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 86, 0.26);
}

.auth-input-card input::selection {
  background: rgba(255, 215, 77, 0.34);
}

.auth-sidecard-stack {
  display: grid;
  gap: 18px;
}

.auth-sidecard {
  padding: 16px 18px;
  font-size: clamp(20px, 1.35vw, 26px);
  color: #e8dc86;
}

.auth-sidecard span {
  color: var(--pink);
  margin-right: 12px;
}

.auth-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  gap: 14px;
}

.auth-actions-with-links {
  justify-content: space-between;
  align-items: flex-end;
}

.auth-actions-split {
  justify-content: space-between;
}

.auth-button {
  border: 2px solid rgba(89, 74, 26, 0.95);
  background: linear-gradient(180deg, #9a7a1c, #5b4510);
  color: #f6dea1;
  font: inherit;
  font-size: clamp(18px, 1vw, 20px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
}

.auth-button:hover,
.team-card:hover {
  filter: brightness(1.08);
}

.auth-button-secondary {
  background: linear-gradient(180deg, #585858, #292929);
  border-color: rgba(120, 120, 120, 0.9);
}

.auth-original-link {
  margin-top: 10px;
  font-size: clamp(11px, 0.75vw, 14px);
  color: #9aa0aa;
  text-align: center;
}

.auth-original-link a {
  color: #7eb4ff;
  text-decoration: underline;
}

.auth-original-link a:hover {
  color: #b0d0ff;
}

.auth-player-count {
  font-size: clamp(13px, 1vw, 16px);
  color: #b8a060;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 4px 0 10px;
  min-height: 22px;
}

.auth-info-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.auth-info-link {
  font-size: clamp(11px, 0.75vw, 13px);
  color: #6a7080;
  margin: 0;
}

.auth-info-link a {
  color: #7eb4ff;
  text-decoration: underline;
}

.auth-info-link a:hover {
  color: #b0d0ff;
}

.auth-error {
  min-height: 28px;
  margin-top: 14px;
  color: #ff7676;
  font-size: clamp(16px, 1vw, 19px);
}

.team-shell {
  padding-top: 18px;
  /* Keep the team panel from overflowing the viewport on short screens */
  max-height: calc(100vh - 48px);
  overflow: auto;
  /* allow some breathing room when very wide */
  width: min(1100px, calc(100vw - 64px));
}

.team-header {
  color: #f0f0f0;
  padding: 16px 20px;
  font-size: clamp(18px, 1.5vw, 30px);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

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

.team-card {
  position: relative;
  text-align: left;
  /* responsive height so the card can shrink on short screens */
  min-height: clamp(280px, 48vh, 450px);
  padding: 0;
  border: 2px solid rgba(112, 112, 112, 0.85);
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(5, 5, 5, 0.98));
  color: #dedede;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(220, 220, 220, 0.08);
}

.team-card-title,
.team-card-count {
  padding: 18px 22px 10px;
}

.team-card-red .team-card-title,
.team-card-red .team-card-count {
  padding-left: 118px;
}

.team-card-blue .team-card-title,
.team-card-blue .team-card-count {
  padding-right: 118px;
  text-align: right;
}

.team-card-emblem {
  position: absolute;
  top: 14px;
  width: 92px;
  height: 92px;
  border: 2px solid rgba(120, 120, 120, 0.9);
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.96), rgba(10, 10, 10, 0.98));
  box-shadow: inset 0 0 0 1px rgba(230, 230, 230, 0.08);
  overflow: hidden;
}

.team-card-emblem-red {
  left: 14px;
}

.team-card-emblem-blue {
  right: 14px;
}

.team-card-emblem-red::before {
  content: "";
  position: absolute;
  inset: 12px 10px 10px 10px;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 176, 92, 0.55), transparent 22%),
    linear-gradient(90deg, transparent 0 54%, rgba(255, 88, 72, 0.92) 54% 60%, transparent 60%),
    linear-gradient(90deg, transparent 0 67%, rgba(190, 60, 42, 0.84) 67% 72%, transparent 72%),
    linear-gradient(90deg, transparent 0 80%, rgba(160, 45, 35, 0.8) 80% 85%, transparent 85%);
}

.team-card-emblem-red::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 24px;
  bottom: 10px;
  top: 22px;
  background: linear-gradient(180deg, rgba(150, 80, 44, 0.9), rgba(100, 38, 18, 0.96));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 0 16px rgba(180, 70, 42, 0.4);
}

.team-card-emblem-blue::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 40%, rgba(255,255,255,0.88) 0 8%, transparent 9%),
    radial-gradient(circle at 35% 50%, rgba(130, 170, 255, 0.85) 0 45%, rgba(38, 66, 156, 0.96) 70%, rgba(16, 24, 58, 0.98) 100%);
  box-shadow: 0 0 18px rgba(89, 144, 255, 0.26);
}

.team-card-emblem-blue::after {
  content: "";
  position: absolute;
  inset: 12px 10px 12px 10px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.9) 0 6%, transparent 7%),
    radial-gradient(circle at 32% 14%, rgba(255,255,255,0.9) 0 5%, transparent 6%),
    radial-gradient(circle at 24% 32%, rgba(255,255,255,0.85) 0 4%, transparent 5%),
    linear-gradient(180deg, transparent 0 14%, rgba(64, 88, 255, 0.98) 14% 26%, transparent 26% 38%, rgba(64, 88, 255, 0.98) 38% 50%, transparent 50% 62%, rgba(64, 88, 255, 0.98) 62% 74%, transparent 74%);
}

.team-card-title {
  font-size: clamp(22px, 1.65vw, 34px);
  letter-spacing: 0.08em;
}

.team-card-count {
  font-size: clamp(16px, 1vw, 18px);
  opacity: 0.84;
}

.team-card-red .team-card-title,
.team-card-red .team-player-list {
  color: var(--team-red);
}

.team-card-blue .team-card-title,
.team-card-blue .team-player-list {
  color: var(--team-blue);
}

.team-card-current.team-card-red {
  background: linear-gradient(180deg, rgba(74, 11, 11, 0.94), rgba(28, 0, 0, 0.98));
}

.team-card-current.team-card-blue {
  background: linear-gradient(180deg, rgba(8, 18, 74, 0.94), rgba(0, 0, 22, 0.98));
}

.team-player-list {
  margin: 12px 18px 18px;
  /* allow player list to shrink when viewport height is limited */
  min-height: clamp(120px, 30vh, 310px);
  padding: 20px;
  border: 2px solid rgba(88, 88, 88, 0.85);
  background: #020202;
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.6;
  display: grid;
  align-content: start;
  gap: 6px;
}

.team-player-entry {
  display: block;
  letter-spacing: 0.03em;
}

.team-player-entry-current {
  text-shadow: 0 0 10px currentColor;
  font-weight: 700;
}

.team-player-entry-red {
  color: var(--team-red);
}

.team-player-entry-blue {
  color: var(--team-blue);
}

.team-player-empty {
  opacity: 0.9;
}

.team-console {
  margin-top: 18px;
  /* shrink the console area on short viewports */
  min-height: clamp(84px, 12vh, 164px);
  padding: 18px 20px;
  color: #9d9d9d;
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.5;
}

.front-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.front-nav-button {
  min-height: 38px;
  border: 2px solid rgba(120, 100, 34, 0.95);
  background: linear-gradient(180deg, #575757, #2d2d2d 44%, #1a1a1a 45%, #4d3b07 100%);
  color: #d8a92c;
  font: inherit;
  font-size: clamp(11px, 0.82vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

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

/* ── Team Stats Screen ───────────────────────────────────────────────────── */
#team-stats-screen {
  z-index: 30;
}

.ts-shell {
  position: relative;
  width: min(1100px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  margin: 20px auto;
  padding-top: 4px;
}

.ts-header {
  background: rgba(22, 22, 22, 0.88);
  border: 2px solid rgba(76, 76, 76, 0.75);
  box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.12);
  padding: 14px 22px 12px;
  font-size: clamp(20px, 1.8vw, 32px);
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin-bottom: 14px;
  color: #f0f0f0;
}

.ts-header-sub {
  font-size: clamp(14px, 1.1vw, 22px);
  letter-spacing: 0.22em;
  color: #c8a045;
}

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

/* Left column */
.ts-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ts-emblem-wrap {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}

.ts-emblem {
  width: 110px;
  height: 110px;
  border: 2px solid rgba(120, 120, 120, 0.9);
  background: linear-gradient(180deg, rgba(34,34,34,0.96), rgba(10,10,10,0.98));
  box-shadow: inset 0 0 0 1px rgba(230,230,230,0.08);
  overflow: hidden;
  position: relative;
}

/* Reuse team emblem visuals by adding the same pseudo-elements via modifier classes */
.ts-emblem.ts-emblem-red::before {
  content: "";
  position: absolute;
  inset: 14px 12px 12px 12px;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 176, 92, 0.55), transparent 22%),
    linear-gradient(90deg, transparent 0 54%, rgba(255, 88, 72, 0.92) 54% 60%, transparent 60%),
    linear-gradient(90deg, transparent 0 67%, rgba(190, 60, 42, 0.84) 67% 72%, transparent 72%),
    linear-gradient(90deg, transparent 0 80%, rgba(160, 45, 35, 0.8) 80% 85%, transparent 85%);
}
.ts-emblem.ts-emblem-red::after {
  content: "";
  position: absolute;
  left: 16px; right: 28px; bottom: 12px; top: 26px;
  background: linear-gradient(180deg, rgba(150,80,44,0.9), rgba(100,38,18,0.96));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 0 16px rgba(180,70,42,0.4);
}

.ts-emblem.ts-emblem-blue::before {
  content: "";
  position: absolute;
  right: 12px; top: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 40%, rgba(255,255,255,0.88) 0 8%, transparent 9%),
    radial-gradient(circle at 35% 50%, rgba(130,170,255,0.85) 0 45%, rgba(38,66,156,0.96) 70%, rgba(16,24,58,0.98) 100%);
  box-shadow: 0 0 18px rgba(89,144,255,0.26);
}
.ts-emblem.ts-emblem-blue::after {
  content: "";
  position: absolute;
  inset: 14px 12px 14px 12px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.9) 0 6%, transparent 7%),
    radial-gradient(circle at 32% 14%, rgba(255,255,255,0.9) 0 5%, transparent 6%),
    radial-gradient(circle at 24% 32%, rgba(255,255,255,0.85) 0 4%, transparent 5%),
    linear-gradient(180deg, transparent 0 14%, rgba(64,88,255,0.98) 14% 26%, transparent 26% 38%, rgba(64,88,255,0.98) 38% 50%, transparent 50% 62%, rgba(64,88,255,0.98) 62% 74%, transparent 74%);
}

.ts-summary-card {
  background: rgba(14, 14, 14, 0.9);
  border: 2px solid rgba(70, 70, 70, 0.8);
  padding: 0 0 6px;
}

.ts-summary-title {
  background: rgba(36, 28, 8, 0.92);
  border-bottom: 1px solid rgba(90, 70, 18, 0.6);
  color: #c8a045;
  font-size: clamp(13px, 0.9vw, 16px);
  letter-spacing: 0.12em;
  padding: 8px 12px;
  margin-bottom: 4px;
}

.ts-summary-team {
  margin: 6px 8px 4px;
  padding: 7px 10px 8px;
  border: 2px solid rgba(70, 70, 70, 0.5);
  background: rgba(8, 8, 8, 0.6);
}

.ts-summary-team.ts-active-red,
.ts-sum-red.ts-active {
  border-color: rgba(210, 55, 45, 0.85);
  background: rgba(55, 10, 8, 0.55);
}

.ts-summary-team.ts-active-blue,
.ts-sum-blue.ts-active {
  border-color: rgba(64, 100, 255, 0.85);
  background: rgba(10, 16, 55, 0.55);
}

.ts-sum-name {
  font-size: clamp(11px, 0.75vw, 13px);
  letter-spacing: 0.08em;
  color: #aaa;
  margin-bottom: 4px;
}

.ts-sum-red .ts-sum-name  { color: #e06060; }
.ts-sum-blue .ts-sum-name { color: #7090ff; }

.ts-sum-row {
  display: flex;
  justify-content: space-between;
  font-size: clamp(12px, 0.82vw, 14px);
  line-height: 1.6;
}

.ts-sum-key {
  color: #888;
  letter-spacing: 0.06em;
}

.ts-sum-val {
  color: #d4b860;
  font-weight: 700;
}

/* Right column — table */
.ts-right {
  background: rgba(10, 10, 10, 0.88);
  border: 2px solid rgba(60, 60, 60, 0.8);
  overflow-x: auto;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12px, 0.9vw, 16px);
  letter-spacing: 0.06em;
}

.ts-table thead tr {
  background: rgba(36, 28, 8, 0.95);
  border-bottom: 2px solid rgba(100, 78, 20, 0.7);
}

.ts-table th {
  color: #b89428;
  font-weight: 700;
  padding: 8px 14px 7px;
  text-align: right;
  letter-spacing: 0.1em;
  font-size: clamp(11px, 0.78vw, 13px);
  white-space: nowrap;
}

.ts-col-name { text-align: left !important; }

.ts-table tbody tr {
  border-bottom: 1px solid rgba(50, 50, 50, 0.6);
}

.ts-table tbody tr:nth-child(even) {
  background: rgba(22, 22, 22, 0.5);
}

.ts-table td {
  padding: 5px 14px;
  color: #c8a040;
  text-align: right;
}

.ts-table td.ts-col-name {
  color: #e0c870;
  text-align: left;
}

.ts-table td.ts-td-zero {
  color: rgba(160, 130, 50, 0.45);
}

.ts-nav-active {
  filter: brightness(1.35);
  border-color: rgba(200, 160, 40, 0.9) !important;
}

.spawn-shell {
  padding-top: 10px;
}

.spawn-top-grid {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 14px;
}

.spawn-left-column,
.spawn-right-column {
  display: grid;
  gap: 12px;
}

.spawn-panel,
.spawn-console {
  background: rgba(28, 28, 28, 0.88);
  border: 2px solid rgba(88, 88, 88, 0.84);
  box-shadow: inset 0 0 0 1px rgba(190, 190, 190, 0.12);
}

.spawn-instructions {
  min-height: 116px;
  padding: 18px 20px;
  color: #efefef;
  font-size: clamp(17px, 1.45vw, 28px);
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.spawn-wait-msg {
  color: #efefef;
}

.spawn-countdown-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.92);
  color: #ff2222;
  font-size: clamp(18px, 1.6vw, 30px);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  padding: 12px;
}

.spawn-countdown-display .cd-label {
  font-size: clamp(14px, 1.1vw, 22px);
  color: #ff6600;
  margin-bottom: 6px;
}

.spawn-countdown-display .cd-number {
  font-size: clamp(36px, 3vw, 58px);
  color: #ff2222;
}

.spawn-unit-card {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 10px;
  min-height: 164px;
  padding: 12px;
}

.spawn-preview-wrap {
  position: relative;
  min-height: 138px;
  background:
    linear-gradient(90deg, rgba(140, 140, 140, 0.25) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(140, 140, 140, 0.2) 0 1px, transparent 1px 18px),
    #0a0a0a;
  border: 2px solid rgba(110, 110, 110, 0.9);
  overflow: hidden;
}

#spawn-preview {
  width: 100%;
  height: 100%;
  display: block;
}

.spawn-unit-meta {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  color: #ff8f18;
}

.spawn-class-name {
  font-size: clamp(24px, 1.8vw, 34px);
  letter-spacing: 0.08em;
}

.spawn-class-stats {
  white-space: pre-line;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.4;
}

.spawn-select-button {
  justify-self: end;
  min-width: 112px;
  border: 2px solid rgba(120, 100, 34, 0.95);
  background: linear-gradient(180deg, #9a7a1c, #5b4510);
  color: #f6dea1;
  font: inherit;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
}

.spawn-roster-panel {
  min-height: 246px;
  padding: 10px 12px 12px;
}

.spawn-roster-head {
  display: grid;
  grid-template-columns: 0.6fr 1.2fr 0.6fr 0.5fr 0.8fr;
  gap: 12px;
  color: #d8d8d8;
  font-size: clamp(15px, 0.95vw, 18px);
  margin-bottom: 8px;
}

.spawn-roster-list {
  min-height: 184px;
  max-height: 220px;
  overflow: auto;
  color: var(--roster-text);
  font-size: clamp(15px, 0.98vw, 18px);
}

.spawn-roster-row {
  display: grid;
  grid-template-columns: 0.6fr 1.2fr 0.6fr 0.5fr 0.8fr;
  gap: 12px;
  padding: 4px 0;
}

.spawn-map {
  position: relative;
  /* allow the entry map to shrink on short viewports but cap at original size */
  min-height: clamp(240px, 56vh, 520px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)),
    url('/generated/crossroads_texture.png') center / cover no-repeat;
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(108, 108, 108, 0.92);
  box-shadow: inset 0 0 0 1px rgba(210, 210, 210, 0.12);
  overflow: hidden;
}

.spawn-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 0 32%, rgba(0,0,0,0.08) 72%, rgba(0,0,0,0.24) 100%);
  z-index: 1;
  pointer-events: none;
}

.spawn-map-flags {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.spawn-flag {
  position: absolute;
  display: block;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  margin-top: -34px;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.spawn-flag::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  width: 2px;
  height: 36px;
  background: rgba(32, 32, 32, 0.92);
}

.spawn-flag::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 2px;
  width: 14px;
  height: 11px;
  clip-path: polygon(0 0, 100% 18%, 0 100%);
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.spawn-flag-red {
  color: #ff4242;
}

.spawn-flag-blue {
  color: #4f79ff;
}

.spawn-flag-unpowered {
  color: #f2f2f2;
  opacity: 0.88;
}

.spawn-flag-disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.spawn-flag-selected {
  filter: drop-shadow(0 0 8px rgba(255, 219, 117, 0.85));
}

.spawn-console {
  margin-top: 12px;
  min-height: 164px;
  padding: 16px 18px;
  color: var(--spawn-text);
  background: var(--spawn-bg);
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.45;
}

/* ── In-game HUD ─────────────────────────────────────────────────────────── */
#hud-offscreen-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.18s ease;
  font-family: "Consolas", "Lucida Console", "Courier New", monospace;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.hud-targeting {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9));
}

.hud-crosshair-arm {
  position: absolute;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}

.hud-crosshair-top,
.hud-crosshair-bottom {
  left: 50%;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
}

.hud-crosshair-left,
.hud-crosshair-right {
  top: 50%;
  width: 10px;
  height: 2px;
  transform: translateY(-50%);
}

.hud-crosshair-top { top: 0; }
.hud-crosshair-bottom { bottom: 0; }
.hud-crosshair-left { left: 0; }
.hud-crosshair-right { right: 0; }

.hud-crosshair-friendly {
  color: #64ef72;
}

.hud-crosshair-enemy {
  color: #ff5348;
}

.hud-target-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
}

.hud-target-box.enemy {
  color: #ff5f54;
}

.hud-target-box.friendly {
  color: #6aef76;
}

.hud-target-box.neutral {
  color: #f0d377;
}

.hud-target-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: currentColor;
  border-style: solid;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.88));
}

.hud-target-corner-tl {
  left: 0;
  top: 0;
  border-width: 2px 0 0 2px;
}

.hud-target-corner-tr {
  right: 0;
  top: 0;
  border-width: 2px 2px 0 0;
}

.hud-target-corner-bl {
  left: 0;
  bottom: 0;
  border-width: 0 0 2px 2px;
}

.hud-target-corner-br {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

.hud-target-hpbar {
  position: absolute;
  top: 4px;
  left: -10px;
  width: 5px;
  height: calc(100% - 8px);
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.hud-target-hpfill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #64ef72;
  box-shadow: 0 0 6px currentColor;
}

.hud-target-hpfill.hp-good {
  background: #64ef72;
  color: #64ef72;
}

.hud-target-hpfill.hp-warn {
  background: #ffd84c;
  color: #ffd84c;
}

.hud-target-hpfill.hp-mid {
  background: #ff9c33;
  color: #ff9c33;
}

.hud-target-hpfill.hp-low {
  background: #ff5448;
  color: #ff5448;
}

.hud-target-label {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 132px;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.15;
  text-transform: uppercase;
}

.hud-target-label-name {
  color: #ffffff;
}

.hud-target-label-type {
  display: block;
  margin-top: 1px;
}

.hud-target-label-type.enemy {
  color: #ff5f54;
}

.hud-target-label-type.friendly {
  color: #6aef76;
}

.hud-target-label-type.neutral {
  color: #f0d377;
}

.hud-target-label-meta {
  display: block;
  margin-top: 1px;
}

.hud-target-label-meta.hp-good {
  color: #64ef72;
}

.hud-target-label-meta.hp-warn {
  color: #ffd84c;
}

.hud-target-label-meta.hp-mid {
  color: #ff9c33;
}

.hud-target-label-meta.hp-low {
  color: #ff5448;
}

/* Top bar */
#hud-wip-warning {
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: #39e84e;
  letter-spacing: 0.03em;
  padding: 1px 0 2px;
  pointer-events: none;
  user-select: none;
}
.hud-wip-warn {
  color: #ff3333;
  font-weight: bold;
}

#hud-top {
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#hud-top-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 12px;
}
#hud-hp-group,
#hud-en-group {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
#hud-en-group {
  justify-content: flex-end;
}
#hud-top-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 10px;
  font-weight: bold;
  color: #f0cb68;
  text-align: center;
  min-width: 110px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
.hud-team-count {
  position: relative;
  min-width: 18px;
  padding-left: 12px;
  line-height: 1;
}
.hud-team-count::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  background: center / contain no-repeat;
  opacity: 0.92;
}
.hud-team-blue::before { background-image: url('./generated/ui/team_blue_crest.png'); }
.hud-team-red::before { background-image: url('./generated/ui/team_red_crest.png'); }
.hud-team-blue { color: #5a86ff; }
.hud-team-red { color: #ff6a54; }
.hud-bar-track {
  flex: 1;
  height: 5px;
  background: transparent;
  border: 1px solid rgba(80, 80, 80, 0.4);
  border-radius: 2px;
  overflow: hidden;
  min-width: 180px;
  max-width: none;
  position: relative;
}
/* Dim tinted background = "empty" portion of the bar */
.hud-bar-track.hud-bar-track-green { background: rgba(8, 40, 12, 0.82); border-color: rgba(20, 80, 30, 0.55); }
.hud-bar-track.hud-bar-track-gold  { background: rgba(40, 28, 4, 0.82); border-color: rgba(90, 60, 10, 0.55); }
.hud-bar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.12s ease;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
.hud-bar-green { background: linear-gradient(180deg, #34e85b, #11862f); }
.hud-bar-gold  { background: linear-gradient(180deg, #f0c94d, #8d5e06); }
.hud-val {
  display: none;
}

/* Bottom panel */
#hud-bottom {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  height: 272px;
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 0 10px 0 18px;
  background: transparent;
  border: 0;
}
#hud-left-stack {
  position: relative;
  width: 164px;
  flex-shrink: 0;
  height: 272px;
}
#hud-chat-shell {
  height: 164px;
}
#hud-left-bars {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 100px;
  width: 164px;
}
#hud-altitude {
  width: 8px;
  height: 100px;
  display: block;
  background: var(--hud-alt-bg);
  border: 1px solid var(--hud-alt-border);
}
#hud-throttle-stack {
  width: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#hud-radar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 164px;
  height: 164px;
  display: block;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 58%, rgba(35, 20, 6, 0.86) 72%, rgba(12, 7, 2, 0.98) 100%),
    center / 182px 182px no-repeat url('./generated/ui/Msentry3G.png');
  box-shadow:
    0 0 0 1px rgba(96, 68, 18, 0.85),
    0 0 0 3px rgba(14, 8, 2, 0.94),
    inset 0 0 18px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
}
#chat {
  flex: 1;
  overflow: hidden;
  min-height: 110px;
  height: 110px;
  margin-bottom: 0;
  padding: 8px 14px 8px;
  color: var(--hud-chat-text);
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--hud-chat-bg);
  border: 2px solid var(--hud-chat-border);
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(32, 16, 3, 0.95),
    inset 0 1px 0 rgba(255, 221, 166, 0.08);
}
#hud-chat-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}
#hud-console-title {
  height: 18px;
  padding: 2px 12px 0;
  color: #8a7e67;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(18, 16, 14, 0.9), rgba(40, 40, 40, 0.72));
  border: 2px solid rgba(104, 94, 82, 0.66);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
#chat div {
  opacity: 0.95;
}
.chat-line-red    { color: #e05030; }
.chat-line-blue   { color: #5080e0; }
.chat-line-system { color: #a89060; }
.chat-line-error  { color: #e05030; }
.chat-line-self   { color: #e0c050; }
.chat-name-red    { color: #e05030; }
.chat-name-blue   { color: #5080e0; }
.chat-name-neutral { color: #d08a2c; }
.chat-pm-text     { color: #e0c050; }
#chat-input-row {
  display: flex;
  align-items: center;
  background: var(--hud-input-bg);
  border: 2px solid var(--hud-input-border);
  border-top: 1px solid var(--hud-title-border);
  padding: 3px 8px;
}
#chat-input-row.hidden { display: none; }
#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--hud-chat-text);
  font-family: inherit;
  font-size: 12px;
  caret-color: var(--hud-chat-caret);
}
#hud-tacmap-shell {
  width: 164px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

#hud-rank-panel {
  width: 164px;
  padding: 0 6px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#hud-rank-name {
  font-size: 10px;
  color: #d4b87c;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hud-rank-kg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.04em;
}

#hud-rank-kudos { color: #c8baa4; }
#hud-rank-grants { color: #c8baa4; }
#hud-tacmap {
  width: 164px;
  height: 164px;
  display: block;
  border: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.55)),
    center / 147px 147px no-repeat url('./generated/ui/Msentry2.png');
  box-shadow:
    0 0 0 1px rgba(96, 68, 18, 0.85),
    0 0 0 3px rgba(14, 8, 2, 0.94),
    inset 0 0 18px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
}

/* Status strip */
#hud-statusbar {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, var(--hud-sb-bg1), var(--hud-sb-bg2)),
    center / 147px 147px repeat-x url('./generated/ui/Msentry4_frntbttm.png');
  border: 1px solid var(--hud-sb-border);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  color: var(--hud-sb-text);
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 223, 164, 0.04);
}
.hud-sb-e {
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 10px;
  height: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hud-sb-elem-bg);
  border: 1px solid var(--hud-sb-elem-border);
  padding: 0;
  border-radius: 2px;
  color: var(--hud-sb-elem-text);
  font-weight: bold;
  font-size: 8px;
  cursor: default;
}
.hud-power-off {
  color: #6f624f;
  border-color: #4d3e28;
}
.hud-power-red {
  color: #ff6c62;
  border-color: #c24c42;
  box-shadow: 0 0 6px rgba(255, 88, 72, 0.55);
}
.hud-power-blue {
  color: #7ca2ff;
  border-color: #4d78d8;
  box-shadow: 0 0 6px rgba(92, 138, 255, 0.55);
}
.hud-throttle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 180px;
  margin-left: auto;
}
.hud-throttle-track {
  width: 92px;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, var(--hud-track-stripe) 0 1px, transparent 1px 10px),
    var(--hud-track-bg);
  border: 1px solid var(--hud-track-border);
  box-shadow: inset 0 1px 0 rgba(255, 223, 164, 0.08), 0 0 6px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
#hud-throttle-val {
  display: inline;
  min-width: 30px;
}
#hud-throttle-fill {
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #2bb242 0%, #d0a12b 58%, #d95a28 100%);
}
.hud-ping-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.hud-cpu-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
  border-right: 1px solid var(--hud-track-border);
}
.hud-cpu {
  min-width: 36px;
  text-align: right;
  font-weight: 700;
  color: #64d86c;
}
.hud-cpu-warn { color: #e4bc49; }
.hud-cpu-bad  { color: #ea755f; }
#hud-sb-cpu-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #2bb242 0%, #d0a12b 60%, #d95a28 100%);
}
.hud-ping-track {
  width: 96px;
  height: 7px;
  background: var(--hud-track-bg);
  border: 1px solid var(--hud-track-border);
  box-shadow: inset 0 1px 0 rgba(255, 223, 164, 0.08);
  overflow: hidden;
}
#hud-sb-ping-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #2bb242 0%, #d0a12b 55%, #d95a28 100%);
}
.hud-ping {
  min-width: 52px;
  text-align: right;
  font-weight: 700;
}
.hud-sb-kills-wrap {
  min-width: 54px;
}
#hud-sb-drone-viewers {
  color: rgba(160, 160, 160, 0.72);
  font-size: 0.82em;
  white-space: nowrap;
}
#hud-sb-drone-viewers b {
  color: rgba(200, 200, 200, 0.85);
  font-weight: 700;
}
#hud-sb-phase {
  min-width: 112px;
}
#hud-sb-sector {
  min-width: 20px;
  margin-left: 2px;
  text-align: right;
}
.hud-ping-unknown {
  color: #b69052;
}
.hud-ping-good {
  color: #64d86c;
}
.hud-ping-warn {
  color: #e4bc49;
}
.hud-ping-bad {
  color: #ea755f;
}

#map-overlay {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 190px;
  gap: 14px;
  padding: 22px 22px 18px;
  background: rgba(0, 0, 0, 0.94);
  color: var(--map-text);
  font-family: "Consolas", "Lucida Console", "Courier New", monospace;
}

#map-overlay.hidden {
  display: none;
}

#map-overlay-left {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* Uplink commander panel lives inside map-overlay-left */
#map-uplink-left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--map-uplink-border);
  background: rgba(10, 12, 8, 0.6);
}
#map-uplink-left-panel.hidden { display: none; }
#map-map-left-panel { display: flex; flex-direction: column; gap: 12px; flex: 1; }
#map-map-left-panel.hidden { display: none; }

.map-overlay-tab-row,
.map-overlay-button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.map-overlay-tab,
.map-overlay-btn,
.map-overlay-menu-item {
  border: 2px solid var(--map-btn-border);
  background: linear-gradient(180deg, var(--map-btn-bg1), var(--map-btn-bg2));
  color: var(--map-btn-text);
  font: inherit;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: center;
}

.map-overlay-tab.active,
.map-overlay-menu-accent {
  filter: brightness(1.1);
}

.map-overlay-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#map-overlay-center {
  min-width: 0;
}

#map-overlay-center {
  min-width: 0;
}

/* Uplink status panel — 3D model + info, shown inside the STATUS tab when not equipped */
#map-uplink-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 8px;
  width: 100%;
  font-family: 'Consolas', 'Courier New', monospace;
}
#map-uplink-panel.hidden { display: none; }
#map-uplink-canvas {
  border: 2px solid rgba(80,160,80,0.6);
  background: #050e05;
  display: block;
  width: 160px;
  height: 120px;
}
#map-uplink-team {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #80ff80;
  text-transform: uppercase;
  font-weight: bold;
}
#map-uplink-status {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #b8d880;
  text-transform: uppercase;
}
#map-uplink-commander {
  font-size: 11px;
  color: #8aaa70;
  letter-spacing: 0.08em;
}
#map-uplink-selfdestruct {
  font-size: 13px;
  color: #ff7040;
  letter-spacing: 0.1em;
  font-weight: bold;
  animation: blink 1s step-end infinite;
}
#map-uplink-selfdestruct.hidden { display: none; }
@keyframes blink { 50% { opacity: 0.2; } }

#map-overlay-canvas {
  width: min(72vw, calc(100vh - 260px));
  height: min(72vw, calc(100vh - 260px));
  max-width: 100%;
  border: 2px solid #d8a92c;
  background: #000;
  display: block;
}

#map-overlay-bottom {
  grid-column: 2;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

#map-overlay-mini {
  width: 160px;
  height: 160px;
  border: 2px solid #6d6d6d;
  background: #000;
}

#map-overlay-log {
  padding: 14px 18px;
  background: rgba(74, 28, 0, 0.88);
  border: 2px solid rgba(112, 74, 20, 0.88);
  color: #c97e2a;
  white-space: pre-line;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .auth-frame {
    width: calc(100vw - 36px);
    padding: 22px 18px 20px;
    top: 18vh;
  }

  .auth-form,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .spawn-top-grid,
  .front-nav,
  .spawn-unit-card {
    grid-template-columns: 1fr;
  }

  .team-card {
    min-height: 320px;
  }

  .team-player-list {
    min-height: 180px;
  }

  .spawn-map {
    min-height: 340px;
  }
}

/* ─── Pause Menu ─────────────────────────────────────────── */
#pause-menu {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}
#pause-menu:not(.hidden) {
  pointer-events: all;
}
#pause-main-list {
  position: absolute;
  left: 5%;
  bottom: 28%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pause-item {
  display: flex;
  align-items: center;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: clamp(18px, 2.2vw, 30px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c8c8a8;
  cursor: pointer;
  user-select: none;
  text-shadow: 1px 2px 6px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.7);
  padding: 3px 0;
}
.pause-item:hover { color: #e8e8c0; }
.pause-sel {
  color: #ffaa00;
  margin-right: 14px;
  font-size: 0.65em;
  visibility: hidden;
  flex-shrink: 0;
}
.pause-item.selected .pause-sel { visibility: visible; }

.pause-panel {
  position: absolute;
  right: 5%;
  top: 12%;
  width: min(42%, 520px);
  max-width: calc(100vw - 10%);
  color: #c8c8a8;
  font-family: 'Courier New', 'Consolas', monospace;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.95);
}
.pause-panel-title {
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffaa00;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,170,0,0.35);
  padding-bottom: 6px;
}
.pause-panel-content {
  font-size: clamp(11px, 1.0vw, 13px);
  white-space: pre-wrap;
  max-height: 58vh;
  overflow-y: auto;
  line-height: 1.75;
  margin: 0 0 14px 0;
}
.pause-back {
  background: none;
  border: 1px solid rgba(200,200,170,0.4);
  color: #c8c8a8;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: clamp(10px, 1.0vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 5px 16px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pause-back:hover {
  background: rgba(255,170,0,0.12);
  border-color: #ffaa00;
  color: #ffaa00;
}
.pause-option-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: clamp(11px, 1.0vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pause-option-row input[type=range] {
  flex: 1;
  max-width: 160px;
  accent-color: #ffaa00;
}
.pause-option-row span { min-width: 2ch; color: #ffaa00; }
#pause-quit-msg {
  font-size: clamp(14px, 1.4vw, 20px);
  color: #ff5555;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.95);
}

/* ── Loading screen ─────────────────────────────────────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000 url('./loading-bg.jpg') center center / cover no-repeat;
  image-rendering: pixelated;
  transition: opacity 0.6s ease;
}
#loading-screen.loading-done {
  opacity: 0;
  pointer-events: none;
}
/* Dark gradient strip at bottom for readability */
#loading-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 0 0 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.82) 40%, rgba(0,0,0,0.95) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  user-select: none;
}
#loading-label {
  font-family: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
  font-size: clamp(13px, 1.5vw, 16px);
  color: #e8c090;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(220,140,60,0.5);
  min-height: 1.4em;
}
.loading-bar-wrap {
  width: 100%;
  height: 10px;
  background: rgba(80,20,10,0.6);
  overflow: hidden;
}
#loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8b0000, #cc2200, #ff4400, #ff6622);
  transition: width 0.3s ease-out;
  box-shadow: 0 0 12px rgba(255,80,0,0.7);
}

/* Phase 2 background loader — small banner at the bottom of the auth screen */
#phase2-loader {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  background: rgba(8, 14, 26, 0.92);
  border-top: 1px solid rgba(74, 158, 255, 0.2);
  padding: 6px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
}
#phase2-loader.hidden {
  display: none;
}
#phase2-loader.phase2-done {
  opacity: 0;
  pointer-events: none;
}
#phase2-bar-fill {
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #2a6aaa, #4a9eff);
  border-radius: 2px;
  transition: width 0.3s ease-out;
}
#phase2-label {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  color: #3a5a7a;
  letter-spacing: 0.08em;
}

/* ── Uplink / Map Overlay ────────────────────────────────────────────────── */
#uplink-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(6, 10, 6, 0.88);
  display: flex;
  align-items: stretch;
  font-family: 'Consolas', 'Courier New', monospace;
  pointer-events: all;
}
#uplink-overlay.hidden { display: none; }

#uplink-left {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(10, 12, 8, 0.96);
  border-right: 2px solid rgba(100, 80, 20, 0.72);
  overflow: hidden;
}

#uplink-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080c06;
}

#ul-bigmap {
  display: block;
  width: min(100%, calc(100vh - 60px));
  height: min(100%, calc(100vh - 60px));
  aspect-ratio: 1;
  border: 1px solid rgba(100, 80, 20, 0.5);
  image-rendering: pixelated;
}

/* Tabs */
#uplink-tabs {
  display: flex;
  border-bottom: 2px solid rgba(100, 80, 20, 0.7);
}
.ul-tab {
  flex: 1;
  padding: 8px 4px;
  background: rgba(20, 18, 8, 0.9);
  border: none;
  border-right: 1px solid rgba(100, 80, 20, 0.5);
  color: #8a7a52;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ul-tab:last-child { border-right: none; }
.ul-tab:hover { background: rgba(60, 50, 14, 0.8); color: #c8a858; }
.ul-tab-active { background: rgba(80, 64, 16, 0.9); color: #f0d070; }

/* Ship info block */
#ul-ship-info {
  padding: 8px 10px;
  background: rgba(14, 18, 10, 0.9);
  border: 1px solid rgba(60, 80, 20, 0.5);
  margin: 8px;
  border-radius: 2px;
}
.ul-ship-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  line-height: 1.6;
}
.ul-lbl { color: #6a8a52; letter-spacing: 0.05em; }
.ul-val { color: #c8d8b8; }

/* Cargo queue list */
#ul-queue-all-label {
  padding: 4px 10px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #6a7a5a;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(80, 80, 40, 0.4);
  margin: 0 8px;
}
#ul-cargo-queue,
#ul-cargo-queue-manage {
  list-style: none;
  margin: 6px 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ul-queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  font-size: 10px;
  color: #b0c898;
  background: rgba(20, 28, 14, 0.7);
  border: 1px solid rgba(60, 80, 30, 0.4);
  cursor: pointer;
  user-select: none;
}
.ul-queue-item:hover   { background: rgba(40, 58, 20, 0.8); border-color: rgba(100, 130, 50, 0.6); }
.ul-queue-item.selected { background: rgba(60, 90, 24, 0.9); border-color: rgba(140, 180, 60, 0.8); color: #d8f0b0; }
.ul-queue-idx   { color: #6a7a5a; margin-right: 4px; }
.ul-queue-name  { flex: 1; }
.ul-queue-timer { color: #8aaa70; letter-spacing: 0.04em; }
.ul-queue-building { color: #f0d870; }

/* Buttons */
.ul-btn {
  background: linear-gradient(180deg, rgba(60, 52, 14, 0.95), rgba(36, 30, 6, 0.95));
  border: 2px solid rgba(120, 100, 30, 0.85);
  color: #e0c870;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 8px;
  cursor: pointer;
  text-align: center;
  transition: filter 0.1s;
}
.ul-btn:hover:not(:disabled) { filter: brightness(1.18); }
.ul-btn:disabled { opacity: 0.4; cursor: default; }
.ul-btn-wide { width: calc(100% - 16px); display: block; margin: 4px 8px; }
.ul-btn-dim  { background: rgba(20, 18, 6, 0.7); color: #8a7a52; }
.ul-btn-red  { border-color: rgba(160, 40, 30, 0.85); color: #ff8070; background: linear-gradient(180deg, rgba(80, 20, 12, 0.95), rgba(40, 10, 6, 0.95)); }
.ul-btn-row {
  display: flex;
  gap: 6px;
  padding: 4px 8px;
}
.ul-btn-row .ul-btn { flex: 1; }

/* Panels */
#ul-map-panel,
#ul-uplink-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}

#ul-bottom-btns {
  padding: 6px 0 8px;
  border-top: 1px solid rgba(80, 70, 20, 0.5);
  margin-top: auto;
}

/* Request sub-panel */
#ul-request-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
}
#ul-req-preview-wrap {
  width: 160px;
  height: 120px;
  border: 1px solid rgba(80, 100, 30, 0.5);
  background: #060c04;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ul-req-canvas { display: block; }
#ul-req-name {
  font-size: 11px;
  color: #d8c878;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
#ul-req-time {
  font-size: 10px;
  color: #8aaa70;
  text-align: center;
}

#ul-queue-manage { flex: 1; overflow-y: auto; }

/* ── Carried cargo HUD (center-top) ──────────────────────────────────────── */
/* ── Mouse-not-captured banner ───────────────────────────────────── */
#hud-mouse-uncaptured {
  position: fixed;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', 'Consolas', 'Courier New', monospace;
  font-size: 17px;
  letter-spacing: 0.18em;
  color: #ffe680;
  text-shadow: 0 0 10px rgba(255, 200, 0, 0.7), 0 1px 3px rgba(0,0,0,0.9);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 21;
  animation: hud-mouse-blink 1.4s ease-in-out infinite;
}
#hud-mouse-uncaptured.hidden { display: none; }
.hud-mouse-uncaptured-icon { margin-right: 6px; font-size: 13px; }

@keyframes hud-mouse-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── Status Recording Has Begun (one-shot per session) ───────────── */
#hud-status-recording {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', 'Consolas', 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 0.22em;
  color: #80ff80;
  text-shadow: 0 0 8px rgba(80, 255, 80, 0.7), 0 1px 3px rgba(0,0,0,0.9);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
#hud-status-recording.fade-out { opacity: 0; }
#hud-status-recording.hidden   { display: none; }

/* ── Ranks / Squads Screen ───────────────────────────────────────────────── */
#ranks-screen { z-index: 30; background: #040506; }

.sq-shell {
  position: relative;
  width: min(1100px, calc(100vw - 64px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 26px auto;
  padding-top: 18px;
  font-family: 'VT323', 'Consolas', 'Courier New', monospace;
}

.sq-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0;
  min-height: 460px;
  margin-bottom: 4px;
}

/* Sidebar */
.sq-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #2a2a2a;
  padding: 6px;
  gap: 4px;
}

.sq-nav-btn {
  background: #1c1c1c;
  border: 1px solid #444;
  color: #bbb;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.sq-nav-btn:hover:not(.sq-nav-disabled) { background: #2a2a2a; color: #eee; }
.sq-nav-btn.sq-nav-active { background: #1a7a1a; color: #fff; border-color: #2ea02e; }
.sq-nav-btn.sq-nav-disabled { color: #444; cursor: default; border-color: #2a2a2a; }

/* Content area */
.sq-content {
  padding: 20px 24px;
  position: relative;
}

.sq-panel-title {
  font-size: 17px;
  letter-spacing: 0.15em;
  color: #e0e0e0;
  margin-bottom: 20px;
  text-align: center;
}

.sq-panel { display: flex; flex-direction: column; }
.sq-panel.hidden { display: none !important; }

/* Form grid */
.sq-form-grid {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
  margin-bottom: 18px;
}

.sq-label {
  font-size: 14px;
  color: #aaa;
  padding-top: 6px;
  letter-spacing: 0.06em;
}

.sq-input, .sq-textarea {
  background: #111;
  border: 1px solid #444;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 14px;
  padding: 5px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.sq-input:focus, .sq-textarea:focus { border-color: #4a9; }
.sq-input-short { max-width: 220px; }
.sq-textarea { resize: vertical; min-height: 60px; }

.sq-form-actions { display: flex; gap: 12px; margin-top: 4px; }

.sq-btn {
  background: #2a2a2a;
  border: 1px solid #555;
  color: #ccc;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 6px 20px;
  cursor: pointer;
}
.sq-btn:hover { background: #3a3a3a; color: #fff; }
.sq-btn-ok { border-color: #4a9; color: #6ec; }
.sq-btn-ok:hover { background: #0d2218; }
.sq-btn-danger { border-color: #c44; color: #f88; }
.sq-btn-danger:hover { background: #2a0a0a; }

/* Invitations list */
.sq-invite-list { display: flex; flex-direction: column; gap: 10px; }

.sq-invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #4a9;
  padding: 10px 14px;
  gap: 12px;
}
.sq-invite-card-info { flex: 1; }
.sq-invite-squad-name { color: #e0e0e0; font-size: 15px; letter-spacing: 0.08em; }
.sq-invite-from { color: #888; font-size: 12px; margin-top: 2px; }
.sq-invite-actions { display: flex; gap: 8px; }

/* Member list (Oust / Roster) */
.sq-member-list { display: flex; flex-direction: column; gap: 6px; }

.sq-member-row {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  align-items: center;
  gap: 10px;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  padding: 8px 12px;
}
.sq-member-handle { color: #e0e0e0; font-size: 14px; }
.sq-member-title-input {
  background: #111;
  border: 1px solid #333;
  color: #aaa;
  font-family: inherit;
  font-size: 13px;
  padding: 3px 6px;
  width: 100%;
}
.sq-member-title-input:focus { border-color: #4a9; outline: none; }
.sq-member-leader-badge { color: #d8a92c; font-size: 11px; letter-spacing: 0.1em; }
.sq-member-title-display { color: #888; font-size: 13px; }

/* Confirm text */
.sq-confirm-text {
  color: #e07070;
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 1.5;
  max-width: 540px;
}

/* Empty state */
.sq-empty-msg {
  color: #e07030;
  font-size: 14px;
  padding: 10px 0;
}

/* Error/notice bar */
.sq-error {
  position: absolute;
  bottom: 8px;
  left: 24px;
  right: 24px;
  background: #2a0a0a;
  border: 1px solid #c44;
  color: #f88;
  font-size: 13px;
  padding: 6px 12px;
}
.sq-error.sq-notice-ok { background: #0a2a0a; border-color: #4a9; color: #6ec; }
.sq-error.hidden { display: none; }

/* Checkbox label */
.sq-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 13px;
  padding-top: 4px;
}
.sq-checkbox-label input[type="checkbox"] {
  accent-color: #4a9;
  width: 14px;
  height: 14px;
}

/* Browse squads list */
.sq-browse-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sq-browse-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #59a;
  padding: 10px 14px;
  gap: 12px;
}
.sq-browse-card-info { flex: 1; }
.sq-browse-squad-name { color: #e0e0e0; font-size: 15px; letter-spacing: 0.08em; }
.sq-browse-squad-tag { color: #59a; font-size: 12px; letter-spacing: 0.1em; margin-left: 6px; }
.sq-browse-squad-meta { color: #666; font-size: 12px; margin-top: 2px; }
.sq-browse-squad-desc { color: #888; font-size: 12px; margin-top: 3px; max-width: 460px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Squad / team chat areas */
.team-chat-area,
.sq-chat-area {
  margin-bottom: 4px;
}
.team-chat-area.hidden,
.sq-chat-area.hidden { display: none; }

.team-chat,
.sq-chat {
  max-height: 90px;
  overflow-y: auto;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.team-chat-input-row {
  display: flex;
  margin-top: 4px;
}
.team-chat-input-row input {
  flex: 1;
  background: #0a0a0a;
  border: 1px solid #333;
  border-top: 1px solid #1a7a1a;
  color: #c0e0c0;
  font-family: 'VT323', 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  padding: 4px 8px;
  outline: none;
}
.team-chat-input-row input:focus { border-color: #4a9; }
.team-chat-input-row input::placeholder { color: #3a5a3a; }

/* ── Uplink pickup toast (center-screen) ──────────────────────────── */
#hud-uplink-pickup {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(6, 12, 4, 0.88);
  border: 1px solid rgba(80, 200, 80, 0.75);
  padding: 10px 22px 10px;
  z-index: 13;
  pointer-events: none;
  font-family: 'Consolas', 'Courier New', monospace;
  transition: opacity 0.4s;
}
#hud-uplink-pickup.hidden { display: none; }
#hud-uplink-pickup-icon {
  font-size: 26px;
  color: #80ff80;
  line-height: 1;
}
#hud-uplink-pickup-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #c0ffb0;
  text-transform: uppercase;
  font-weight: bold;
}
#hud-uplink-pickup-hint {
  font-size: 9px;
  color: #6a9050;
  letter-spacing: 0.08em;
}

/* ── Uplink corner indicator (top-right, when equipped) ───────────── */
#hud-equipment {
  position: fixed;
  top: 28px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  z-index: 11;
  pointer-events: none;
  font-family: 'VT323', 'Consolas', 'Courier New', monospace;
}
#hud-equipment.hidden { display: none; }
#hud-equipment-title {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(180, 170, 110, 0.65);
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 2px;
}
#hud-equipment-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.hud-equip-row {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.15;
}
.hud-equip-key {
  font-size: 9px;
  color: rgba(220, 210, 150, 0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,190,120,0.25);
  padding: 0 3px;
  border-radius: 2px;
  min-width: 18px;
  text-align: center;
  letter-spacing: 0.05em;
}
.hud-equip-name {
  font-size: 12px;
  color: rgba(220, 210, 160, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

#hud-uplink-corner {
  position: fixed;
  top: 56px;
  right: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  background: rgba(6, 12, 4, 0.82);
  border: 1px solid rgba(80, 200, 80, 0.7);
  padding: 5px 12px 5px 8px;
  z-index: 12;
  pointer-events: none;
  font-family: 'Consolas', 'Courier New', monospace;
}
#hud-uplink-corner.hidden { display: none; }
#hud-uplink-corner-icon {
  font-size: 22px;
  color: #80ff80;
  line-height: 1;
}
#hud-uplink-corner-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #6a9050;
  text-transform: uppercase;
}
#hud-uplink-corner-status {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #c0ffb0;
  text-transform: uppercase;
  font-weight: bold;
}

#hud-cargo-held {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(6, 12, 4, 0.82);
  border: 1px solid rgba(80, 140, 40, 0.7);
  padding: 5px 14px 6px;
  z-index: 12;
  pointer-events: none;
  font-family: 'Consolas', 'Courier New', monospace;
}
#hud-cargo-held.hidden { display: none; }
#hud-cargo-canvas { display: block; image-rendering: pixelated; }
#hud-cargo-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #b8d880;
  text-transform: uppercase;
  text-align: center;
}
#hud-cargo-hint {
  font-size: 9px;
  color: #6a9050;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ── Units Info Screen ───────────────────────────────────────────────────── */
#units-screen { z-index: 30; background: #040506; }

.units-shell {
  position: relative;
  width: min(1200px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top bar: category tabs + briefing title */
.units-top-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: rgba(10, 8, 2, 0.97);
  border: 2px solid rgba(180, 120, 0, 0.55);
  border-bottom: none;
  padding: 10px 14px 0;
  flex-shrink: 0;
}

.units-cat-row {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}

.units-cat-btn {
  background: rgba(18, 12, 0, 0.85);
  border: 2px solid rgba(140, 90, 0, 0.5);
  border-bottom: none;
  color: rgba(150, 100, 20, 0.8);
  font-family: 'VT323', monospace;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: 0.1em;
  padding: 6px 16px 8px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s;
}

.units-cat-btn:hover {
  background: rgba(80, 50, 0, 0.6);
  color: #d89020;
}

.units-cat-btn.units-cat-active {
  background: rgba(70, 44, 0, 0.95);
  color: #f0c040;
  border-color: rgba(200, 140, 0, 0.85);
}

.units-briefing-title {
  color: #c8960e;
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: 0.25em;
  padding-bottom: 10px;
  text-transform: uppercase;
}

/* Viewport row: PREV, left canvas, right canvas, NEXT */
.units-viewport-row {
  display: flex;
  align-items: stretch;
  background: rgba(6, 5, 2, 0.98);
  border-left: 2px solid rgba(180, 120, 0, 0.55);
  border-right: 2px solid rgba(180, 120, 0, 0.55);
  padding: 10px 6px;
  gap: 6px;
  flex-shrink: 0;
}

.units-nav-btn {
  flex-shrink: 0;
  width: 76px;
  background: rgba(14, 10, 0, 0.9);
  border: 2px solid rgba(140, 90, 0, 0.55);
  color: #8a6010;
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.06em;
  cursor: pointer;
  align-self: center;
  padding: 10px 4px;
  transition: background 0.12s, color 0.12s;
  line-height: 1.3;
}

.units-nav-btn:hover {
  background: rgba(80, 50, 0, 0.7);
  color: #e09020;
}

.units-nav-btn:disabled {
  color: #3a2800;
  cursor: default;
  border-color: rgba(80, 50, 0, 0.3);
}

.units-vp-box {
  flex: 1;
  position: relative;
  height: 260px;
  border: 2px solid rgba(100, 80, 10, 0.6);
  background: #040a06;
  background-image:
    linear-gradient(rgba(0, 110, 50, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 110, 50, 0.11) 1px, transparent 1px);
  background-size: 28px 28px;
  overflow: hidden;
}

.units-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.units-vp-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.22em;
  padding: 3px 0 4px;
  background: rgba(0, 0, 0, 0.65);
  text-transform: uppercase;
}

.units-vp-label-blue { color: rgba(100, 170, 255, 0.85); }
.units-vp-label-red  { color: rgba(255, 110, 90, 0.85); }

/* Info panel */
.units-info-panel {
  background: rgba(8, 6, 2, 0.97);
  border: 2px solid rgba(180, 120, 0, 0.55);
  border-top: none;
  padding: 14px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 150px;
  overflow: hidden;
}

.units-unit-name {
  font-family: 'VT323', monospace;
  font-size: clamp(34px, 4vw, 58px);
  color: #e8a820;
  letter-spacing: 0.15em;
  line-height: 1;
  flex-shrink: 0;
}

.units-unit-desc {
  font-family: 'VT323', monospace;
  font-size: clamp(15px, 1.3vw, 19px);
  color: #a87830;
  line-height: 1.45;
  flex: 1;
  overflow: hidden;
}

.units-unit-desc p {
  margin: 0 0 6px;
}

.units-unit-desc p:last-child {
  margin: 0;
}

.units-unit-footer {
  display: flex;
  gap: 36px;
  font-family: 'VT323', monospace;
  font-size: clamp(14px, 1.2vw, 18px);
  color: #7a5818;
  letter-spacing: 0.12em;
  flex-shrink: 0;
}

/* Active indicator in front-nav for units screen */
.units-nav-active {
  color: #f0c040 !important;
  border-color: rgba(200, 140, 0, 0.8) !important;
}