/* Display + technical-mono webfonts. Chakra Petch reads as a purpose-built
   sci-fi console face for headings/labels/HUD; Share Tech Mono is the technical
   readout mono. Loaded from the same CDN pattern as DSEG7 below. @import must be
   the first statement in the sheet, before any @font-face/style rules. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── DSEG7 Classic — 7-segment LCD display font ──────────────────────────── */
@font-face {
  font-family: 'DSEG7 Classic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff') format('woff');
}

@font-face {
  font-family: 'DSEG7 Classic';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
    url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Italic.woff') format('woff');
}

@font-face {
  font-family: 'DSEG7 Classic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff') format('woff');
}

:root {
  /* Typography tokens. Display face for headings/labels/HUD chrome, mono for
     technical readouts. System fonts remain the fallback so the UI degrades
     gracefully if the webfont fails to load. */
  --font-display: 'Chakra Petch', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'Share Tech Mono', 'Courier New', 'Lucida Console', monospace;
  /* Deep-sea palette. Retuned from the previous khaki/military green so the UI
     chrome reads in the same bioluminescent teal/cyan world the 3D scene lives
     in. Amber is retained as the warning/primary-action accent. */
  --bg-top: #0e2029;
  --bg-bottom: #060f15;
  --controller-role-bar-height: 0px;
  --panel: rgba(13, 28, 38, 0.88);
  --panel-border: rgba(96, 168, 186, 0.24);
  --text: #e7f1f4;
  --muted: #94b4c0;
  --accent: #3fb6cc;
  --accent-strong: #7fe4f2;
  --warning: #e0a53a;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
  --radius: 22px;
  --ctrl-zone-ratio: 0.7fr 3fr 0.7fr;
  --ctrl-zone-gap: 0.75rem;
  /* On large landscape screens (tablet/desktop) the mission console is
     constrained to this box and centred, so the middle zone does not stretch
     into a sparse expanse with dead space above/below. Tune here. */
  --ctrl-console-max-width: 1180px;
  --ctrl-console-max-height: 660px;
  /* Unified button language. Radius + push/allstop/active colours are defined
     lower down with the other --ctrl-btn-* tokens; these add the shared height
     scale plus a "primary action" amber tier the system was missing (danger
     and active already exist as --ctrl-btn-allstop-* / --ctrl-btn-active-*). */
  --ctrl-btn-h-sm: 38px;
  --ctrl-btn-h-md: 44px;
  --ctrl-btn-h-lg: 50px;
  --ctrl-btn-primary-bg: linear-gradient(180deg, rgba(232, 160, 32, 0.26) 0%, rgba(96, 64, 10, 0.36) 100%);
  --ctrl-btn-primary-border: rgba(232, 160, 32, 0.58);
  --ctrl-btn-primary-text: #f4c877;
  --ctrl-right-header-height: 50%;
  --ctrl-bar-height: 10px;
  --ctrl-bar-radius: 6px;
  --ctrl-bar-bg: rgba(255, 255, 255, 0.08);
  --ctrl-bar-fill-ok: #4ade80;
  --ctrl-bar-fill-warn: #fbbf24;
  --ctrl-bar-fill-crit: #ff6b6b;
  --ctrl-seg-font: 'DSEG7 Classic', 'Segment7', 'Digital-7 Mono', 'DS-Digital', 'Consolas', monospace;
  --ctrl-seg-color-amber: #e8a020;
  --ctrl-seg-color-cyan: #20d0c0;
  --ctrl-seg-color-red: #d03030;
  --ctrl-btn-radius: 8px;
  --ctrl-btn-push-bg: rgba(24, 52, 62, 0.9);
  --ctrl-btn-push-border: rgba(96, 168, 186, 0.35);
  --ctrl-btn-allstop-bg: #8b1a1a;
  --ctrl-btn-allstop-border: #d03030;
  --ctrl-btn-allstop-text: #ff6b6b;
  --ctrl-btn-active-bg: #2a4a20;
  --ctrl-btn-active-border: #4ade80;
  --ctrl-btn-active-text: #4ade80;
  --ctrl-bevel-light: rgba(161, 181, 108, 0.24);
  --ctrl-bevel-dark: rgba(3, 5, 2, 0.86);
}

.frost-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  /* background-image set by JS (generateFrostTexture canvas data URL) */
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Subtle frosted-glass effect — kept light so the panel remains readable.
     Blur scales with --frost-growth (0→1) via JS so it only gets noticeable
     at high frost levels, not the moment the overlay appears.              */
  mix-blend-mode: screen;
  transition: opacity 1.2s ease-in-out, backdrop-filter 2.5s ease-in-out, -webkit-backdrop-filter 2.5s ease-in-out;
}

.frost-overlay.frost-active {
  opacity: 1;
}

#castFrostOverlay {
  z-index: 18;
}

#controllerFrostOverlay {
  z-index: 29;
}

@property --heat-clear-radius {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.heat-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    transparent var(--heat-clear-radius),
    rgba(255, 100, 20, 0.22) calc(var(--heat-clear-radius) + 6%),
    rgba(255, 60, 0, 0.48) calc(var(--heat-clear-radius) + 14%),
    rgba(220, 30, 0, 0.72) 100%
  );
  transition: --heat-clear-radius 3s ease-out, opacity 2s ease-in-out;
}

.heat-overlay.heat-active {
  opacity: 1;
  animation: heat-shimmer 2.5s ease-in-out infinite;
}

@keyframes heat-shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}

#castHeatOverlay {
  z-index: 18;
}

#controllerHeatOverlay {
  z-index: 29;
}

.controller-flood-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.controller-flood-overlay.flood-visible {
  opacity: 1;
}

.controller-flood-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--flood-fill-height, 0%);
  background: linear-gradient(
    to top,
    rgba(0, 60, 120, 0.55) 0%,
    rgba(0, 100, 180, 0.30) 60%,
    rgba(0, 140, 200, 0.10) 100%
  );
  transition: height 0.8s ease-out, background 1s ease-in-out;
}

.controller-flood-fill.flood-critical {
  background: linear-gradient(
    to top,
    rgba(120, 10, 10, 0.60) 0%,
    rgba(180, 30, 20, 0.35) 60%,
    rgba(200, 60, 30, 0.12) 100%
  );
}

.controller-flood-waterline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: rgba(100, 200, 255, 0.55);
  animation: flood-shimmer 2s ease-in-out infinite;
}

.controller-flood-fill.flood-critical .controller-flood-waterline {
  background: rgba(255, 100, 80, 0.55);
}

@keyframes flood-shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

.hidden { display: none !important; }

body {
  margin: 0;
  height: 100%;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-display);
  background:
    radial-gradient(circle at top, rgba(63, 182, 204, 0.22), transparent 40%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

body.ind-controller {
  overscroll-behavior-y: none;
  touch-action: manipulation;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  border: 0 solid rgba(139, 238, 255, 0.82);
  box-shadow: inset 0 0 0 rgba(139, 238, 255, 0), inset 0 0 0 rgba(139, 238, 255, 0);
  opacity: 0;
  transition: opacity 240ms ease;
  z-index: 999;
}

body.device-pulse-glow::before {
  animation: pulse-device-edge 1.25s ease-out;
}

button,
input,
select {
  font: inherit;
  touch-action: manipulation;
  pointer-events: auto;
}

button {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

button.primary,
.button-link.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #03202b;
  border-color: transparent;
  font-weight: 700;
}

input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
}

h1,
h2,
p {
  margin-top: 0;
}

.landing-shell,
.screen-shell {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
  height: 100%;
}

.landing-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.landing-card,
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.landing-card {
  width: min(760px, 100%);
  padding: 2rem;
}

.landing-how {
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-how h2 {
  margin: 0 0 0.8rem;
}

.landing-how p {
  margin: 0 0 1.15rem;
  color: var(--muted);
  line-height: 1.7;
}

.landing-how h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--text);
}

.landing-how ol {
  margin: 0 0 1.4rem 1.35rem;
  color: var(--muted);
  line-height: 1.7;
}

.how-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.how-button {
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--text);
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.how-button:hover,
.how-button:focus {
  background: rgba(123, 224, 191, 0.1);
  border-color: var(--accent);
  color: var(--text);
}

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(2, 9, 18, 0.88);
  padding: 1.5rem;
}

.stage-viewport > .popup-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.popup-panel {
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
  position: relative;
}

.popup-panel h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  text-align: center;
}

.popup-panel h3 {
  margin: 0 0 0.75rem;
}

.popup-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.popup-close:hover {
  color: var(--text);
}

.popup-overlay[hidden] {
  display: none;
}

.hero-panel {
  margin-bottom: 1.25rem;
}

.host-stage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
  gap: 1.25rem;
}

.stage-panel,
.sidebar-panel {
  height: 100%;
}

.host-sidebar {
  display: grid;
  gap: 1.25rem;
}

.stage-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.stage-badges {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-badge {
  border: 1px solid rgba(123, 224, 191, 0.28);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  background: rgba(123, 224, 191, 0.08);
  min-width: 110px;
  text-align: center;
}

.status-badge.subtle {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.stage-canvas {
  aspect-ratio: 16 / 9;
  min-height: 500px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 50% 15%, rgba(150, 236, 255, 0.1), transparent 35%),
    linear-gradient(180deg, rgba(8, 32, 52, 0.95), rgba(2, 9, 18, 0.98));
}

.stage-viewport {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

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

.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 18%, transparent 82%, rgba(255, 255, 255, 0.03) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.26;
  z-index: 1;
}

.stage-caption {
  margin: 0.9rem 0 0;
  color: var(--muted);
}

.host-header-row,
.ready-row,
.hero-actions,
.landing-actions {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}

.room-code-box {
  margin-left: auto;
  min-width: 150px;
  text-align: right;
}

.room-code-box strong {
  display: block;
  font-size: 2rem;
  letter-spacing: 0.3rem;
}

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16rem;
  font-size: 0.78rem;
}

.muted,
.status-text {
  color: var(--muted);
}

.session-banner {
  margin-bottom: 0.9rem;
  border: 1px solid rgba(123, 224, 191, 0.28);
  background: rgba(123, 224, 191, 0.08);
  color: var(--accent-strong);
  border-radius: 14px;
  padding: 0.75rem 0.95rem;
}

.power-failure-banner {
  margin-bottom: 0.9rem;
  border: 2px solid #ff4444;
  background: rgba(255, 50, 50, 0.15);
  color: #ff6666;
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  letter-spacing: 0.05em;
  animation: powerFailureFlash 1.2s ease-in-out infinite;
}

@keyframes powerFailureFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Low/critical resource banner — populated from the shared alert model
   (src/shared/alerts.ts). Warning-tier alerts show only on the owning
   role's phone; critical-tier alerts show on every phone. */
.resource-alert-banner {
  margin-bottom: 0.9rem;
  border: 2px solid #d8a828;
  background: rgba(216, 168, 40, 0.12);
  color: #ffd23e;
  border-radius: 10px;
  padding: 0.6rem 0.95rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.05em;
}

.resource-alert-banner.is-critical {
  border-color: #ff4444;
  background: rgba(255, 50, 50, 0.15);
  color: #ff6666;
  animation: powerFailureFlash 1.2s ease-in-out infinite;
}

/* Battery room: charge-target + runtime panel (left sidebar) */
.battery-target-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.battery-target-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.battery-target-value,
.battery-runtime-value {
  font-size: clamp(0.95rem, 2vw, 1.4rem);
  text-align: center;
}

@keyframes powerFailureFlicker {
  0%   { opacity: 0; }
  4%   { opacity: 0.85; }
  8%   { opacity: 0.1; }
  14%  { opacity: 0.9; }
  18%  { opacity: 0; }
  26%  { opacity: 0.8; }
  30%  { opacity: 0.05; }
  38%  { opacity: 0.75; }
  44%  { opacity: 0.2; }
  52%  { opacity: 0.9; }
  58%  { opacity: 0.3; }
  65%  { opacity: 0.85; }
  72%  { opacity: 0.5; }
  80%  { opacity: 0.9; }
  88%  { opacity: 0.7; }
  94%  { opacity: 0.95; }
  100% { opacity: 0; }
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.player-list,
.controls-grid,
.role-grid,
.meter-grid,
.join-form {
  display: grid;
  gap: 0.8rem;
}

.control-intro {
  margin-bottom: 0.9rem;
}

.player-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.player-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.03);
}

.kick-player-button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.kick-player-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

.kick-player-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.meter-row {
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.55rem;
}

.meter-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.controller-shell {
  max-width: 640px;
}

/* Enhanced layout for desktop/laptop screens */
@media (min-width: 768px) {
  .controller-shell {
    max-width: 1200px;
  }
  
  .mission-controls-panel {
    padding: 1.5rem;
  }
  
  .controls-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
  }
}

@media (min-width: 1024px) {
  .controller-shell {
    max-width: 1400px;
  }
  
  .controls-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
  }
  
  .mission-controls-panel {
    padding: 2rem;
  }
}

body.ind-controller .controller-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  padding: 0;
}

body.ind-controller .screen-shell {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 900px) {
  /* On phones, keep the mission surface flush to the top edge. */
  body.ind-controller .controller-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.ind-controller #controllerMissionScreen .controller-panel {
    padding: 0 !important;
  }

  body.ind-controller #controllerMissionScreen .ctrl-mission-layout {
    padding: 0 0.45rem 0.45rem;
  }
}

body.ind-controller {
  overflow: hidden;
}

/* Hard-disable any leftover top role bar from previous layouts. */
body.ind-controller .role-bar,
body.ind-controller #roleBar,
body.ind-controller .role-bar-mission-section,
body.ind-controller .role-bar-lobby-section {
  display: none !important;
}

/* Keep reconnect notifications from creating a top strip in normal layout flow. */
body.ind-controller #controllerReconnectBanner {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  width: min(92vw, 560px);
  margin: 0;
}

body.ind-controller .controller-host-offline-banner {
  border-color: rgba(255, 160, 0, 0.55);
  background: rgba(80, 40, 0, 0.35);
  color: #ffcc66;
}

/* Controller panel language: square corners + beveled industrial edges. */
body.ind-controller .panel,
body.ind-controller .control-card,
body.ind-controller .ctrl-room-header,
body.ind-controller .ctrl-room-aux-card,
body.ind-controller .ctrl-room-main-card,
body.ind-controller .ctrl-room-bottom-card,
body.ind-controller .controller-settings-card,
body.ind-controller .controller-event-log-card,
body.ind-controller .controller-room-map-card,
body.ind-controller .controller-tech-tree-card {
  border-radius: 2px !important;
  box-shadow:
    inset 1px 1px 0 var(--ctrl-bevel-light),
    inset -1px -1px 0 var(--ctrl-bevel-dark),
    0 10px 26px rgba(0, 0, 0, 0.34);
}

.controller-screen {
  display: none;
  gap: 0.6rem;
  min-height: 100%;
  height: 100%;
}

.controller-screen.controller-screen-active {
  display: grid;
  height: 100%;
}

.controller-panel {
  margin-bottom: 0.5rem;
  padding: 0.9rem;
}

#controllerMissionScreen .controller-panel {
  margin: 0;
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.controller-screen > .controller-panel:last-child {
  margin-bottom: 0;
}

.controller-hero-panel,
.controller-mission-panel {
  display: grid;
  gap: 0.5rem;
}

.mission-compact-panel {
  gap: 0.45rem;
}

.mission-controls-panel {
  min-height: 0;
  position: relative;
  height: 100%;
}

.ctrl-mission-layout {
  display: grid;
  grid-template-columns: var(--ctrl-zone-ratio);
  grid-template-rows: 1fr;
  grid-template-areas: 'left middle right';
  gap: var(--ctrl-zone-gap);
  height: 100%;
  min-height: 0;
  padding: 0.75rem;
  overflow: hidden;
}

.ctrl-zone {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 0;
  height: 100%;
  overflow: hidden;
}

.ctrl-zone-middle {
  grid-area: middle;
  position: relative;
  z-index: 1;
}

.ctrl-zone-right {
  grid-area: right;
}

.ctrl-zone-left,
.ctrl-zone-right {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

body.ind-controller #controllerMissionScreen,
body.ind-controller #controllerMissionScreen .controller-panel,
body.ind-controller #controllerMissionScreen .mission-controls-panel,
body.ind-controller #controllerMissionScreen .ctrl-zone,
body.ind-controller #controllerMissionScreen #controls {
  min-height: 0;
  height: 100%;
}

body.ind-controller #controllerMissionScreen .mission-controls-panel {
  padding: 0 !important;
}

body.ind-controller #controllerMissionScreen .ctrl-mission-layout {
  padding-top: 0 !important;
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
}

body.ind-controller #controllerMissionScreen .controls-grid {
  max-height: none;
  height: 100%;
  overflow: hidden;
  align-content: center;
}

/* Facility (base) rooms — upgrades, shop, repair, missions — generate variable-length
   lists. Let the middle zone scroll and stack content from the top instead of clipping
   a fixed-height, vertically-centred grid. */
body.ind-controller #controllerMissionScreen .controls-grid.facility-role-layout {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.25rem;
}

body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.35rem;
}

body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout .ctrl-room-main-card {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout .pilot-throttle-gauges-grid {
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-items: stretch;
}

/* Let the throttle dials grow to fill the middle zone instead of sitting small
   and centred with wide empty margins. Each dial fills the smaller of its column
   width / available height (aspect-ratio keeps it circular). */
body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout .pilot-throttle-gauge-card {
  min-height: 0;
  align-items: center;
}

body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout .pilot-throttle-dial {
  max-width: min(100%, 340px);
  max-height: 100%;
}

body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout .ctrl-room-bottom-card {
  min-height: 0;
}

body.ind-controller #controllerMissionScreen .controls-grid.sonar-controls-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.35rem;
}

body.ind-controller #controllerMissionScreen .controls-grid.sonar-controls-layout .sonar-control-card {
  min-height: 0;
  height: 100%;
}

/* Storage/Processing role: the item browser (.tech-room) sizes its screens with
   position:absolute, so it has no intrinsic height. Without an explicit full-height
   row the default centred grid collapses it to zero and the whole middle zone reads
   as empty. Stretch the single row so the browser fills the middle zone. */
body.ind-controller #controllerMissionScreen .controls-grid.storage-role-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 0.35rem;
}

body.ind-controller #controllerMissionScreen .controls-grid.storage-role-layout .tech-room {
  min-height: 0;
  height: 100%;
}

/* Sonar role: wider middle zone for viewport */
body.ind-controller #controllerMissionScreen.sonar-role .ctrl-mission-layout {
  grid-template-columns: 0.85fr 3.8fr 0.85fr;
}

/* Periscope role: wider middle zone for camera view */
body.ind-controller #controllerMissionScreen.periscope-role .ctrl-mission-layout {
  grid-template-columns: 0.85fr 3.8fr 0.85fr;
}

/* Docking role: wider middle zone for camera view */
body.ind-controller #controllerMissionScreen.docking-role .ctrl-mission-layout {
  grid-template-columns: 0.85fr 3.8fr 0.85fr;
}

/* Docking role: float mission objectives as a top-center overlay */
body.ind-controller #controllerMissionScreen.docking-role #controllerMissionObjectives {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(380px, 60%);
  background: rgba(8, 12, 5, 0.88);
  border: 1px solid rgba(154, 162, 110, 0.28);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 1px 1px 0 var(--ctrl-bevel-light),
    inset -1px -1px 0 var(--ctrl-bevel-dark),
    0 4px 18px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

/* ── Camera role layout (Harpoon, Periscope, Docking) ────────────────────── */
body.ind-controller #controllerMissionScreen .controls-grid.camera-role-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.35rem;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

body.ind-controller #controllerMissionScreen .controls-grid.camera-role-layout .ctrl-room-main-card,
body.ind-controller #controllerMissionScreen .controls-grid.camera-role-layout .control-card.ctrl-room-main-card {
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
}

body.ind-controller #controllerMissionScreen .controls-grid.camera-role-layout .ctrl-room-bottom-card {
  min-height: 0;
}

body.ind-controller #controllerMissionScreen .controls-grid.camera-role-layout .role-camera-viewport {
  min-height: 0;
  height: 100%;
  flex: 1 1 0;
}

/* ── Navigation role layout ──────────────────────────────────────────────── */
body.ind-controller #controllerMissionScreen .controls-grid.navigation-role-layout {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

body.ind-controller #controllerMissionScreen .controls-grid.navigation-role-layout .ctrl-room-main-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.ind-controller #controllerMissionScreen .controls-grid.navigation-role-layout .captain-navigation-viewport {
  flex: 1;
  min-height: 0;
}

/* ── Captain role layout (scrollable cards) ──────────────────────────────── */
body.ind-controller #controllerMissionScreen .controls-grid.captain-role-layout {
  overflow-y: auto;
  /* Centre the (usually sparse) captain cards so they don't sit against the top
     with a large empty band below; "safe" keeps them top-aligned and fully
     scrollable when the content is taller than the zone. */
  align-content: safe center;
  gap: 0.5rem;
}

/* ── Shared camera viewport ──────────────────────────────────────────────── */
.role-camera-viewport {
  position: relative;
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  flex: 1 1 0;
  overflow: hidden;
  touch-action: none;
}

.periscope-camera-viewport,
.harpoon-camera-viewport,
.docking-hull-camera-viewport {
  max-width: 100%;
  max-height: 100%;
}

/* ── Angle readout row (Yaw / Pitch labels in harpoon & periscope) ────────── */
.role-angle-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(154, 162, 110, 0.14);
  margin-bottom: 0.5rem;
}

.role-angle-label {
  flex: 1;
  font-family: var(--ctrl-seg-font, monospace);
  color: rgba(102, 242, 224, 0.82);
  font-size: 0.88rem;
}

.role-angle-label:last-child {
  text-align: right;
}

/* ── Action button row (FIRE/SCAN, etc.) ─────────────────────────────────── */
.role-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 0.75rem;
}

/* ── Toggle row (single full-width button) ───────────────────────────────── */
.role-toggle-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* ── Reload progress bar ─────────────────────────────────────────────────── */
.role-reload-status {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}

.role-reload-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.4rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.role-reload-bar-fill {
  height: 100%;
  width: 0%;
  background: rgba(102, 242, 224, 0.9);
  transition: width 0.1s linear;
  border-radius: 2px;
}

/* ── Captain EMP button ──────────────────────────────────────────────────── */
.captain-emp-btn {
  display: block;
  width: 100%;
  padding: 0.85rem 0.5rem;
  font-family: var(--ctrl-seg-font, monospace);
  font-size: clamp(0.82rem, 1.8vh, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background:
    radial-gradient(circle at 4px 4px, rgba(242, 116, 142, 0.55) 0 2px, rgba(80, 10, 20, 0.80) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 4px) 4px, rgba(242, 116, 142, 0.55) 0 2px, rgba(80, 10, 20, 0.80) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at 4px calc(100% - 4px), rgba(242, 116, 142, 0.55) 0 2px, rgba(80, 10, 20, 0.80) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), rgba(242, 116, 142, 0.55) 0 2px, rgba(80, 10, 20, 0.80) 2.5px 5px, transparent 5.4px),
    linear-gradient(160deg, rgba(180, 20, 48, 0.88), rgba(100, 8, 24, 0.94));
  border: 1px solid rgba(220, 50, 80, 0.4);
  border-radius: 2px;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(242, 116, 142, 0.28),
    inset -1px -1px 0 rgba(30, 0, 8, 0.86),
    0 4px 14px rgba(180, 20, 48, 0.32);
  transition: opacity 0.15s, box-shadow 0.15s;
}

.captain-emp-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.captain-emp-btn:not(:disabled):active {
  box-shadow:
    inset 1px 1px 0 rgba(30, 0, 8, 0.86),
    inset -1px -1px 0 rgba(242, 116, 142, 0.28),
    0 1px 4px rgba(180, 20, 48, 0.22);
}

.ctrl-zone-left-top,
.ctrl-zone-left-bottom,
.ctrl-zone-right-aux {
  display: grid;
  gap: 0.6rem;
}

.ctrl-zone-right-aux,
.ctrl-zone-left-bottom {
  pointer-events: auto;
  touch-action: manipulation;
}

.ctrl-zone-right-aux {
  min-height: 5rem;
  padding: 0.4rem 0;
}

.ctrl-zone-left-bottom,
.ctrl-zone-right-aux {
  margin-top: auto;
}

.ctrl-zone-right-aux .ctrl-room-aux-card {
  width: 100%;
  display: grid;
}

.ctrl-zone-right-aux .ctrl-room-aux-card button.primary {
  width: 100%;
  min-height: 48px;
}

#ctrlZoneRight {
  display: flex;
  flex-direction: column;
}

.controller-mission-objectives {
  display: grid;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.75rem;
  color: #d9e3ef;
}

.controller-mission-objectives-header {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #a5b8d7;
}

.controller-mission-objectives-list {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.2rem;
  margin: 0;
}

.controller-mission-objective-item {
  line-height: 1.3;
}

.controller-mission-objective-description {
  margin-top: 0.25rem;
  color: #9dacbe;
  font-size: 0.82rem;
  line-height: 1.35;
}

.controller-mission-objectives-empty {
  color: #9dacbe;
  font-size: 0.92rem;
}

#ctrlZoneRight .ctrl-room-aux-card {
  width: 100%;
}

#ctrlZoneRight .ctrl-room-aux-card button.primary {
  width: 100%;
}

.ctrl-room-header {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  min-height: var(--ctrl-right-header-height);
  padding: 1rem;
  border: 1px solid rgba(154, 162, 110, 0.32);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(18, 24, 11, 0.96), rgba(11, 16, 7, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(167, 181, 122, 0.2), transparent 55%);
}

.ctrl-room-header-top {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ctrl-room-header-actions {
  position: relative;
  width: 100%;
}

.ctrl-btn-menu-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  position: relative;
}

.ctrl-header-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 9999;
  min-width: 160px;
  background: var(--ctrl-btn-push-bg);
  border: 1px solid var(--ctrl-btn-push-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ctrl-header-menu[hidden] {
  display: none;
}

.ctrl-btn-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  box-shadow: none;
}

.ctrl-btn-menu-item:last-child {
  border-bottom: none;
}

.ctrl-btn-menu-item:hover,
.ctrl-btn-menu-item:active {
  background: rgba(255,255,255,0.07);
}

.ctrl-btn-menu-item.has-unread .ctrl-btn-menu-label::after {
  content: ' •';
  color: var(--accent-strong);
}

.ctrl-btn-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
}

.ctrl-btn-menu-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ctrl-btn-menu-label {
  flex: 1;
}

#controllerEventLogButton {
  flex: 1 1 0;
  min-width: 0;
}

.ctrl-btn-settings {
  flex: 0 0 44px;
  width: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
}

.ctrl-btn-help {
  flex: 0 0 44px;
  width: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
}

#roomMenuButton {
  width: 100%;
  min-width: 0;
  min-height: calc(44px * 1.2);
}

.ctrl-room-title {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  font-size: 1.15rem;
  color: var(--accent-strong);
}

.ctrl-room-integrity {
  display: grid;
  gap: 0.45rem;
}

.ctrl-room-integrity-label {
  font-size: 0.78rem;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: var(--muted);
}

.ctrl-room-health {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ctrl-room-health .ctrl-bar-track {
  flex: 1;
  min-width: 0;
}

.ctrl-room-health-value {
  font-family: var(--ctrl-seg-font);
  letter-spacing: 0.1rem;
  color: var(--ctrl-seg-color-cyan);
  font-size: 1rem;
  min-width: 3.2rem;
  text-align: right;
}

.ctrl-bar-track {
  width: 100%;
  height: var(--ctrl-bar-height);
  border-radius: var(--ctrl-bar-radius);
  background: var(--ctrl-bar-bg);
  overflow: hidden;
}

.ctrl-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--ctrl-bar-fill-ok);
  transition: width 180ms ease-out, background-color 180ms ease-out;
}

.ctrl-btn-icon,
.ctrl-btn-push,
.ctrl-btn-repair,
.ctrl-btn-toggle,
.ctrl-btn-allstop {
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 0 var(--ctrl-bevel-light),
    inset -1px -1px 0 var(--ctrl-bevel-dark);
}

.ctrl-btn-icon,
.ctrl-btn-repair {
  border: 1px solid var(--ctrl-btn-push-border);
  background: var(--ctrl-btn-push-bg);
  color: var(--text);
  font-weight: 700;
}

.ctrl-btn-repair {
  width: 100%;
  min-height: 44px;
  padding: 0.9rem 1rem;
  border-color: rgba(122, 192, 100, 0.55);
  background: rgba(46, 83, 24, 0.95);
  color: #b9e18b;
  display: none !important;
}

.ctrl-btn-repair:disabled {
  opacity: 0.55;
}

.ctrl-btn-events {
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ctrl-btn-events:hover,
.ctrl-btn-events.has-unread {
  filter: brightness(1.1);
}

.ctrl-btn-events.flash {
  animation: eventLogFlash 1.1s ease-in-out;
}

.ctrl-btn-fullscreen {
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ctrl-btn-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ctrl-seg-display {
  position: relative;
  font-family: var(--ctrl-seg-font);
  letter-spacing: 0.12rem;
  color: var(--ctrl-seg-color-amber);
  font-size: clamp(1.05rem, 2.2vw, 1.72rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 4px rgba(232, 160, 32, 0.34),
    0 0 10px rgba(232, 160, 32, 0.18);
}

.ctrl-seg-display::before {
  content: '888';
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: end;
  box-sizing: border-box;
  padding: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-variant-numeric: inherit;
  text-align: inherit;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  color: rgba(232, 160, 32, 0.09);
  text-shadow: none;
  line-height: 1;
}

.ctrl-seg-display.cyan {
  color: var(--ctrl-seg-color-cyan);
}

.ctrl-seg-display.cyan::before {
  color: rgba(32, 208, 192, 0.09);
}

.ctrl-seg-display.red {
  color: var(--ctrl-seg-color-red);
}

.ctrl-seg-display.red::before {
  color: rgba(208, 48, 48, 0.09);
}

/* Warning tier of the shared alert model (src/shared/alerts.ts) — brighter
   than the resting amber, pulses gently. Critical uses .red. */
.ctrl-seg-display.yellow {
  color: #ffd23e;
  animation: ctrlSegWarningPulse 1.6s ease-in-out infinite;
}

.ctrl-seg-display.yellow::before {
  color: rgba(255, 210, 62, 0.09);
}

@keyframes ctrlSegWarningPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.ctrl-readout-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(52px, 0.9fr) minmax(68px, 1.1fr);
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  border: 1px solid rgba(110, 145, 70, 0.34);
  border-radius: 2px;
  padding: 0.2rem 0.35rem;
  background:
    radial-gradient(circle at 45% 8px, rgba(98, 108, 66, 0.88) 0 2px, rgba(29, 34, 20, 0.95) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at 45% calc(100% - 8px), rgba(98, 108, 66, 0.88) 0 2px, rgba(29, 34, 20, 0.95) 2.5px 5px, transparent 5.4px),
    linear-gradient(180deg, rgba(20, 28, 12, 0.95), rgba(9, 14, 6, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(141, 161, 95, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 1px 8px rgba(0, 0, 0, 0.32);
}

.ctrl-readout-row-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: #d5dcc2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.52);
  padding-left: 0.3rem;
}

.ctrl-readout-row-label-wrap {
  display: grid;
  align-content: center;
  gap: 0.22rem;
}

.ctrl-readout-row-unit {
  display: block;
  font-size: 0.34rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: rgba(150, 168, 108, 0.92);
  padding-left: 0.3rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.ctrl-readout-row > .ctrl-seg-display {
  justify-self: end;
  min-width: 3ch;
  width: fit-content;
  text-align: right;
  font-size: clamp(0.82rem, 1.7vw, 1.32rem);
  padding: 0.15rem 0.18rem;
  border: 1px solid rgba(125, 138, 86, 0.28);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(3, 8, 3, 0.92), rgba(1, 4, 1, 0.98));
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(128, 144, 82, 0.14);
}

.ctrl-camera-viewport {
  width: 100%;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(154, 162, 110, 0.22);
}

.ctrl-input-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.ctrl-room-main-card {
  border-color: rgba(154, 162, 110, 0.26);
  background: rgba(8, 12, 5, 0.62);
}

.ctrl-room-bottom-card {
  border-color: rgba(130, 108, 58, 0.32);
  background: rgba(10, 9, 4, 0.72);
}

.ctrl-room-bottom-controls {
  margin-top: auto;
}

.ctrl-room-aux-card {
  border-color: rgba(154, 162, 110, 0.28);
  background: rgba(8, 11, 5, 0.72);
}

.ctrl-engine-status-grid {
  margin-bottom: 0 !important;
}

.ctrl-engine-status-box {
  border: 1px solid rgba(154, 162, 110, 0.2);
  background: rgba(18, 24, 11, 0.7) !important;
}

.room-console-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: linear-gradient(180deg, rgba(7, 12, 12, 0.98), rgba(4, 8, 8, 0.98));
  border: 1px solid rgba(92, 176, 166, 0.35);
  box-shadow: inset 0 0 0 1px rgba(22, 70, 64, 0.45);
}

.engine-console-alert {
  min-height: 1.2rem;
  text-align: center;
  font-weight: 700;
  color: #ef4444;
}

.room-console-output,
.engine-console-output {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(92, 176, 166, 0.22);
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.92) 0px,
    rgba(0, 0, 0, 0.92) 2px,
    rgba(0, 14, 14, 0.92) 3px,
    rgba(0, 14, 14, 0.92) 4px
  );
  color: #8cf2e3;
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 2.2vw, 0.9rem);
  line-height: 1.45;
  white-space: pre;
  overflow-x: hidden;
  text-shadow: 0 0 4px rgba(140, 242, 227, 0.35);
}

.engine-history-chart {
  width: 100%;
  flex: 0 0 25vh;
  min-height: 80px;
  max-height: 25vh;
  border-radius: 10px;
  border: 1px solid rgba(92, 176, 166, 0.22);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(2, 12, 2, 0.95));
  overflow: hidden;
  position: relative;
}

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

/* Taller graph used now that the engine console text has been removed. */
.engine-history-chart-tall {
  /* Fills the space left after the legend. A small min-height lets it shrink on
     short (mobile) zones so the legend below is never clipped, while it grows to
     fill tall zones on wider screens. */
  flex: 1 1 0;
  min-height: 70px;
}

/* Engine middle zone fills its slot; the card is a flex column so the graph
   shrinks/grows and the drains legend below it always stays visible. */
body.ind-controller #controllerMissionScreen .controls-grid.engine-controls-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
body.ind-controller #controllerMissionScreen .controls-grid.engine-controls-layout .ctrl-room-main-card {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  /* Scroll as a fallback on very short (mobile) zones so the drains legend is
     always reachable; on taller zones the graph fills and nothing scrolls. */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Pie chart of current power drains, below the engine history graph. */
.engine-pie-wrap {
  flex: 0 0 auto;
  margin-top: 0.4rem;
}
.engine-pie-title {
  font: 600 0.72rem/1 'OCR A Std', 'Lucida Console', monospace;
  color: rgba(180, 220, 190, 0.85);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.engine-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font: 0.7rem/1.25 'OCR A Std', 'Lucida Console', monospace;
  color: rgba(220, 235, 225, 0.9);
}
/* Two-column layout for the drains legend (pie chart removed). Scrolls if the
   zone is too short to show every consumer at once. */
.engine-pie-legend.engine-pie-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.9rem;
  row-gap: 0.18rem;
}
.engine-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.engine-pie-legend-text,
.engine-pie-legend-empty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.engine-pie-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 10px;
}

.room-console-cursor {
  color: #8cf2e3;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1;
  justify-self: end;
  margin-right: 0.95rem;
  margin-top: -0.25rem;
  animation: oxygenConsoleCursorBlink 0.95s steps(1, end) infinite;
}

.engine-zone-card {
  display: grid;
  gap: 0.55rem;
}

.engine-output-value {
  text-align: center;
  font-family: var(--ctrl-seg-font, monospace);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ctrl-seg-color-amber);
}

.engine-output-button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.engine-output-step-button {
  min-height: 50px;
  border-radius: 0.75rem;
  border: 1px solid rgba(149, 194, 187, 0.38);
  background: linear-gradient(180deg, rgba(26, 40, 38, 0.92), rgba(17, 25, 24, 0.92));
  color: #dcfff8;
  font-size: 1.45rem;
  font-weight: 700;
  cursor: pointer;
}

.engine-output-step-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.engine-readout-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  align-items: baseline;
}

.engine-readout-label {
  color: var(--muted);
  font-size: 0.78rem;
}

.engine-readout-value {
  margin: 0;
  font-size: 0.92rem;
  color: #f8fffd;
  font-family: var(--ctrl-seg-font, monospace);
}

.engine-fuel-gauge {
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.engine-fuel-gauge-level {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.15s ease-out;
}

.engine-reset-progress {
  height: 0.5rem;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.engine-reset-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.2s ease-out;
}

.engine-fuel-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(1, 5, 8, 0.7);
  backdrop-filter: blur(3px);
}

.engine-fuel-dialog {
  width: min(30rem, 92vw);
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(126, 190, 181, 0.45);
  background: linear-gradient(180deg, rgba(7, 14, 15, 0.97), rgba(5, 9, 10, 0.97));
}

.engine-fuel-dialog h3,
.engine-fuel-dialog p {
  margin: 0;
}

.engine-fuel-dialog-list {
  display: grid;
  gap: 0.45rem;
}

.engine-fuel-progress-dialog .engine-reset-progress {
  height: 0.85rem;
  margin-top: 0.25rem;
}

.engine-fuel-choice {
  display: grid;
  gap: 0.15rem;
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(126, 190, 181, 0.35);
  background: rgba(17, 35, 35, 0.65);
  color: #dffaf6;
}

.engine-fuel-choice span {
  color: var(--muted);
  font-size: 0.84rem;
}

.engine-fuel-choice:disabled {
  opacity: 0.45;
}

@keyframes oxygenConsoleCursorBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.oxygen-generator-control-card {
  display: grid;
  gap: 0.35rem;
}

.oxygen-generator-level-readout {
  text-align: center;
  font-family: var(--ctrl-seg-font, monospace);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--ctrl-seg-color-cyan);
}

.oxygen-generator-button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.oxygen-generator-step-button {
  min-height: 36px;
  font-size: 1rem;
  font-weight: 700;
}

.life-support-heater-button {
  width: 100%;
  min-height: 48px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.life-support-heater-button.is-active {
  box-shadow: inset 0 0 0 2px var(--ctrl-seg-color-cyan, #7eb8f7);
}

.life-support-heater-button.is-heating {
  box-shadow: inset 0 0 0 2px var(--ctrl-seg-color-amber, #f7a27e);
  color: var(--ctrl-seg-color-amber, #f7a27e);
}

/* ── Life support: oxygen + thermal stacked vertically ─────────────── */
.life-support-oxy-thermal-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
}

.life-support-tab-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}

.life-support-tab-bar {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.life-support-tab-btn {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #d6ddb8;
  background: #0b1408;
  border: 1px solid #233520;
  border-radius: 9px;
  padding: 10px 14px;
  cursor: pointer;
}

.life-support-tab-btn:hover {
  border-color: #9dc464;
  color: #d6edc0;
}

.life-support-tab-btn.on {
  background: #1e3a12;
  border-color: #9dc464;
  color: #d6edc0;
}

.life-support-tab-panel {
  display: none;
  flex: 1;
  min-height: 0;
}

.life-support-tab-panel.active {
  display: flex;
  flex-direction: column;
}

.life-support-oxygen-panel,
.life-support-thermal-card {
  position: relative;
  background: linear-gradient(160deg, rgba(14, 22, 9, 0.95), rgba(6, 10, 3, 0.98));
  border: 1px solid rgba(78, 108, 40, 0.55);
  border-top-color: rgba(110, 150, 60, 0.65);
  border-radius: 4px;
  box-shadow:
    inset 1px 1px 0 var(--ctrl-bevel-light),
    inset -1px -1px 0 var(--ctrl-bevel-dark),
    0 6px 18px rgba(0, 0, 0, 0.4);
  padding: 0.75rem;
}

/* Screw corner decorations */
.panel-screw {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  background: radial-gradient(circle at 38% 35%, rgba(185, 205, 120, 0.95), rgba(90, 110, 45, 0.8));
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1px 1px 2px rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.5);
}

/* Position 4 screws via nth-child */
.panel-screw:nth-child(1) { top: 0.5rem; left: 0.5rem; }
.panel-screw:nth-child(2) { top: 0.5rem; right: 0.5rem; }
.panel-screw:nth-child(3) { bottom: 0.5rem; left: 0.5rem; }
.panel-screw:nth-child(4) { bottom: 0.5rem; right: 0.5rem; }

/* Add a slot line across each screw */
.panel-screw::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  transform: translateY(-50%) rotate(45deg);
}

/* ── Thermometer widget ─────────────────────────────────────────────── */
.therm-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.25rem 0.5rem;
}

.therm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
}

.therm-title {
  font-size: 0.65rem;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: rgba(140, 162, 80, 0.9);
  font-weight: 600;
}

.therm-tube {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.15rem;
  height: 120px;
}

.therm-scale {
  position: relative;
  height: 100%;
  width: 1.6rem;
}

.therm-tick {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  transform: translateY(50%);
}

.therm-tick span {
  font-size: 0.55rem;
  color: rgba(140, 160, 80, 0.7);
  font-family: monospace;
  line-height: 1;
  white-space: nowrap;
}

.therm-tick::after {
  content: '';
  display: block;
  width: 4px;
  height: 1px;
  background: rgba(140, 160, 80, 0.45);
}

.therm-track {
  width: 0.7rem;
  height: 100%;
  background: rgba(8, 12, 5, 0.85);
  border: 1px solid rgba(80, 110, 40, 0.55);
  border-radius: 4px 4px 0 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6), inset 1px 1px 0 rgba(255,255,255,0.04);
}

.therm-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, #20d0c0, #4ade80);
  border-radius: 2px 2px 0 0;
  transition: height 0.5s ease;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.35);
}

.therm-fill.therm-fill-cold {
  background: linear-gradient(0deg, #5ba4f5, #20c0e0);
  box-shadow: 0 0 6px rgba(91, 164, 245, 0.4);
}

.therm-fill.therm-fill-hot {
  background: linear-gradient(0deg, #d03030, #f59e0b);
  box-shadow: 0 0 6px rgba(208, 48, 48, 0.4);
}

.therm-bulb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #4ade80, #1a8040);
  border: 1px solid rgba(80, 110, 40, 0.7);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.4), inset 0 1px 2px rgba(255,255,255,0.12);
  margin-bottom: -0.2rem;
  position: relative;
}

.therm-value {
  font-family: var(--ctrl-seg-font, monospace);
  font-size: 0.85rem;
  color: var(--ctrl-seg-color-cyan);
  letter-spacing: 0.06em;
  text-align: center;
}

@media (orientation: portrait) {
  .ctrl-mission-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      'right-head'
      'right-bottom'
      'left-top'
      'middle'
      'left-bottom';
    gap: 0.45rem;
  }

  .ctrl-zone-left,
  .ctrl-zone-right {
    display: contents;
  }

  .ctrl-zone {
    min-height: 0;
    width: 100%;
  }

  .ctrl-room-header {
    grid-area: right-head;
    min-height: 0;
    position: relative;
    z-index: 10;
  }

  .ctrl-zone-left-top {
    grid-area: left-top;
  }

  .ctrl-zone-left-bottom {
    grid-area: left-bottom;
  }

  .ctrl-zone-middle {
    grid-area: middle;
    margin-top: 0;
    justify-content: flex-start;
  }

  .ctrl-zone-right-aux {
    grid-area: right-bottom;
  }

  .ctrl-zone-left-bottom,
  .ctrl-zone-right-aux {
    margin-top: 0;
  }

  .ctrl-zone-right-aux:empty {
    display: none;
  }

  .ctrl-room-header {
    min-height: 0;
  }

  .ctrl-zone-left-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    align-content: start;
  }
}

@media (orientation: landscape) {
  body.ind-controller #controllerMissionScreen .ctrl-zone-left,
  body.ind-controller #controllerMissionScreen .ctrl-zone-right {
    min-width: 154px;
    max-width: 210px;
  }
}

/* Large landscape screens (tablet/desktop): keep the mission console at
   comfortable landscape proportions and centre it in the viewport instead of
   stretching the middle zone edge-to-edge. This removes the "squashed into the
   corner + big empty areas" effect on wide/tall screens. Phone landscape
   (below the breakpoint) keeps its full-bleed layout. */
@media (orientation: landscape) and (min-width: 1024px) {
  body.ind-controller #controllerMissionScreen .ctrl-mission-layout {
    width: 100%;
    height: 100%;
    max-width: var(--ctrl-console-max-width);
    max-height: min(100%, var(--ctrl-console-max-height));
    margin: auto;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  body.ind-controller #controllerMissionScreen {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.ind-controller #controllerMissionScreen .controller-panel {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.ind-controller #controllerMissionScreen .mission-controls-panel {
    overflow-y: auto;
  }

  body.ind-controller #controllerMissionScreen .ctrl-mission-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      'right-head'
      'left-top'
      'middle'
      'left-bottom'
      'right-bottom';
    gap: 0.35rem;
    height: auto;
    min-height: 100dvh;
    padding-top: 0 !important;
    overflow: visible;
  }

  body.ind-controller #controllerMissionScreen .ctrl-zone-left,
  body.ind-controller #controllerMissionScreen .ctrl-zone-right,
  body.ind-controller #controllerMissionScreen .ctrl-zone-middle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    grid-column: 1 / -1;
  }

  body.ind-controller #controllerMissionScreen .ctrl-zone-right {
    grid-row: 1;
    position: relative;
    z-index: 10;
  }

  body.ind-controller #controllerMissionScreen .ctrl-zone-left {
    grid-row: 2;
  }

  body.ind-controller #controllerMissionScreen .ctrl-zone-middle {
    grid-row: 3;
    margin-top: 0;
    justify-content: flex-start;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-header,
  body.ind-controller #controllerMissionScreen .ctrl-zone-left-top,
  body.ind-controller #controllerMissionScreen .ctrl-zone-left-bottom,
  body.ind-controller #controllerMissionScreen .ctrl-zone-right-aux {
    width: 100%;
    margin-top: 0;
  }

  body.ind-controller #controllerMissionScreen .ctrl-zone-left-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  body.ind-controller #controllerMissionScreen .ctrl-zone-right-aux:empty {
    display: none;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'title actions'
      'location actions'
      'integrity repair';
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.35rem;
    min-height: 0;
    padding: 0.45rem 0.5rem;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-header-top {
    grid-area: title;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-header-actions {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-header-actions button {
    min-height: 38px;
    padding: 0.45rem 0.65rem;
  }

  body.ind-controller #controllerMissionScreen button,
  body.ind-controller #controllerMissionScreen .ctrl-btn-icon,
  body.ind-controller #controllerMissionScreen .ctrl-btn-events,
  body.ind-controller #controllerMissionScreen .ctrl-btn-repair {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
  }

  body.ind-controller #controllerMissionScreen .ctrl-btn-settings,
  body.ind-controller #controllerMissionScreen .ctrl-btn-help {
    flex: 0 0 40px;
    width: 40px;
  }

  body.ind-controller #controllerMissionScreen #controllerEventLogButton {
    flex: 0 0 40px;
    width: 40px;
    min-width: 0;
  }

  body.ind-controller #controllerMissionScreen #roomMenuButton {
    display: inline-flex;
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    min-height: 38px;
    white-space: nowrap;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-location {
    grid-area: location;
    font-size: 0.74rem;
    letter-spacing: 0.1rem;
    color: var(--muted);
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-title {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.92rem;
    letter-spacing: 0.08rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-integrity {
    grid-area: integrity;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-health {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-health .ctrl-bar-track {
    flex: 1;
  }

  body.ind-controller #controllerMissionScreen .ctrl-room-health-value {
    font-size: 0.88rem;
    letter-spacing: 0.08rem;
  }

  body.ind-controller #controllerMissionScreen #controllerRoomRepairButton {
    grid-area: repair;
    width: auto;
    min-width: 0;
    margin-top: 0;
    justify-self: end;
  }

  body.ind-controller #controllerMissionScreen .ctrl-zone-middle {
    order: 3;
    margin-top: auto;
    justify-content: flex-end;
  }

  body.ind-controller #controllerMissionScreen .controls-grid {
    height: auto;
    min-height: 0;
    overflow: visible;
    margin-top: auto;
  }
}

.controller-page-room-repair-button {
  top: 1rem;
  right: 1rem;
}

.mission-info-bar {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.2;
  padding: 0.2rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.controller-panel-heading,
.controller-mission-topline,
.lobby-ready-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.controller-mission-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.3rem;
  text-align: left;
}

.controller-mission-meta strong,
.controller-mission-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.compact-join-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  max-width: 420px;
}

.compact-join-form button {
  grid-column: 1 / -1;
}

@media (orientation: landscape) and (max-height: 500px) {
  #controllerLobbyScreen .controller-hero-panel {
    padding: 0.5rem 0.9rem;
    gap: 0.3rem;
  }

  #controllerLobbyScreen h1 {
    display: none;
  }

  .compact-join-form {
    grid-template-columns: 1fr 1fr auto;
    max-width: none;
  }

  .compact-join-form button {
    grid-column: auto;
    align-self: end;
  }
}

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

.role-grid-lobby {
  gap: 0.5rem;
}

.role-card-button,
.role-tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.role-card-button {
  width: 100%;
  min-height: 56px;
  border-radius: 12px;
  justify-content: center;
  flex-direction: column;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
}

.role-card-button.active,
.role-tab-button.active {
  border-color: rgba(123, 224, 191, 0.55);
  background: rgba(123, 224, 191, 0.14);
  color: var(--accent-strong);
}

.role-tab-button.taken {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(238, 246, 251, 0.72);
  background: rgba(255, 255, 255, 0.035);
}

.role-copy {
  display: grid;
  gap: 0.2rem;
}

.role-copy strong,
.role-copy small {
  display: block;
}

.role-copy small {
  color: var(--muted);
}

.role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
}

.role-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.role-tab-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
}

.captain-map-canvas {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(123, 224, 191, 0.28);
  background: linear-gradient(180deg, rgba(7, 20, 30, 0.95), rgba(2, 8, 14, 0.98));
  display: block;
}

/* Enhanced captain map for larger screens */
@media (min-width: 768px) {
  .captain-map-canvas {
    max-width: 560px;
    cursor: grab;
  }
  
  .captain-map-canvas:hover {
    border-color: rgba(123, 224, 191, 0.4);
  }
  
  .captain-map-canvas:active {
    cursor: grabbing;
  }
}

@media (min-width: 1024px) {
  .captain-map-canvas {
    max-width: 700px;
  }
}

.captain-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.captain-checklist li {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.36rem 0.52rem;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.captain-checklist li.complete {
  border-color: rgba(123, 224, 191, 0.5);
  color: var(--accent-strong);
  background: rgba(123, 224, 191, 0.1);
}

.captain-role-assignments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.captain-role-assignment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.48rem 0.62rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.captain-role-assignment-row .kick-player-button {
  min-width: 5rem;
}

.captain-role-assignment-label {
  font-size: 0.68rem;
}

.captain-role-assignment-value {
  font-size: 0.70rem;
}

/* ── Captain tabbed console ──────────────────────────────────────────────── */
.captain-tab-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.captain-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #d6ddb8;
  background: #0b1408;
  border: 1px solid #233520;
  border-radius: 9px;
  padding: 12px 14px;
  cursor: pointer;
}

.captain-tab-btn:hover {
  border-color: #9dc464;
  color: #d6edc0;
}

.captain-tab-btn.on {
  background: #1e3a12;
  border-color: #9dc464;
  color: #d6edc0;
}

.captain-tab-panel {
  display: none;
}

.captain-tab-panel.active {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.captain-readout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.captain-emp-description {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}

.captain-save-btn {
  width: 100%;
  margin-top: 0.2rem;
}

.captain-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.captain-kick-btn {
  flex-shrink: 0;
  min-width: 4.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ctrl-seg-color-red, #d03030);
  background: rgba(208, 48, 48, 0.08);
  border: 1px solid rgba(208, 48, 48, 0.5);
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.captain-kick-btn:hover {
  border-color: rgba(208, 48, 48, 0.85);
  background: rgba(208, 48, 48, 0.16);
}

.captain-kick-btn.armed {
  color: #fff;
  background: rgba(208, 48, 48, 0.9);
  border-color: rgba(255, 120, 120, 0.9);
}

.captain-gauges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.pilot-gauges-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pilot-throttle-gauges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.pilot-throttle-gauge-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.35rem;
  min-height: 0;
}

.pilot-throttle-dial {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: clamp(190px, 41vh, 460px);
  min-height: 0;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(65, 88, 40, 0.7);
  background:
    radial-gradient(circle at 50% 45%, rgba(30, 50, 20, 0.42), rgba(7, 10, 4, 0.98) 62%),
    linear-gradient(180deg, rgba(24, 35, 14, 0.7), rgba(7, 10, 4, 0.95));
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.82),
    inset 0 2px 0 rgba(132, 154, 84, 0.12),
    0 0 0 1px rgba(18, 24, 10, 0.72),
    0 9px 24px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.pilot-throttle-scale {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid rgba(80, 104, 46, 0.48);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 9, 0.8);
}

.pilot-throttle-needle {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 42%;
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: transform 220ms ease-out;
}

.ballast-gauge-needle {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 42%;
  height: 3px;
  transform-origin: 100% 50%;
}

.ballast-gauge-needle::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.pilot-throttle-needle::after {
  content: none;
}

.pilot-throttle-needle.actual {
  background: linear-gradient(180deg, rgba(93, 246, 220, 0.92), rgba(32, 126, 114, 0.9));
  box-shadow: 0 0 8px rgba(56, 245, 212, 0.35);
}

.pilot-throttle-needle.actual::after {
  border-bottom: 15px solid rgba(93, 246, 220, 0.94);
  filter: drop-shadow(0 0 4px rgba(56, 245, 212, 0.4));
}

.pilot-throttle-needle.target {
  background: linear-gradient(180deg, rgba(232, 178, 78, 0.95), rgba(147, 97, 20, 0.92));
  box-shadow: 0 0 6px rgba(240, 188, 88, 0.3);
  height: 38%;
}

.pilot-throttle-needle.target::after {
  border-bottom: 13px solid rgba(232, 178, 78, 0.95);
}

.pilot-throttle-needle.ballast-gauge-needle.target,
.pilot-throttle-needle.ballast-gauge-needle.actual {
  width: 42%;
  height: 3px;
}

.pilot-throttle-needle.ballast-gauge-needle.actual::after,
.pilot-throttle-needle.ballast-gauge-needle.target::after {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
}

.pilot-throttle-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(84, 106, 53, 0.72);
  background: radial-gradient(circle at 35% 35%, rgba(95, 118, 60, 0.5), rgba(13, 18, 7, 0.95));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.76);
}

.pilot-throttle-dial-label {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translateX(-50%);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: 0.22rem;
  font-weight: 700;
  color: #e7ead8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.ballast-gauge-row .pilot-throttle-dial-label {
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  letter-spacing: 0.18rem;
}

.pilot-throttle-dial-subtitle {
  position: absolute;
  left: 50%;
  bottom: 18.5%;
  transform: translateX(-50%);
  font-size: 0.82rem;
  letter-spacing: 0.15rem;
  text-transform: lowercase;
  color: #8f9c65;
}

.pilot-throttle-digital-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  align-self: start;
}

.pilot-throttle-digital-cell {
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  border: 1px solid rgba(78, 98, 44, 0.45);
  border-radius: 2px;
  padding: 0.35rem 0.45rem 0.42rem;
  height: 4rem;
  min-height: 4rem;
  background: linear-gradient(180deg, rgba(17, 23, 9, 0.94), rgba(6, 8, 4, 0.98));
}

.pilot-throttle-digital-label {
  font-size: 0.56rem;
  letter-spacing: 0.16rem;
  color: #6d7a4a;
}

.pilot-throttle-digital-value {
  position: relative;
  display: block;
  font-family: var(--ctrl-seg-font);
  font-size: clamp(1.25rem, 2.2vh, 2.15rem);
  line-height: 1;
  letter-spacing: 0.15rem;
}

.pilot-throttle-digital-value::before {
  content: '88';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-variant-numeric: inherit;
  text-align: inherit;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: none;
  line-height: 1;
}

.pilot-throttle-digital-cell.actual .pilot-throttle-digital-value {
  color: #e9bc54;
  text-shadow: 0 0 10px rgba(233, 188, 84, 0.25);
}

.pilot-throttle-digital-cell.actual .pilot-throttle-digital-value::before {
  color: rgba(233, 188, 84, 0.09);
}

.pilot-throttle-digital-cell.target .pilot-throttle-digital-value {
  color: #66f2e0;
  text-shadow: 0 0 10px rgba(102, 242, 224, 0.25);
}

.pilot-throttle-digital-cell.target .pilot-throttle-digital-value::before {
  color: rgba(102, 242, 224, 0.09);
}

.pilot-fullwidth-card {
  grid-column: 1 / -1;
}

.pilot-battery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.7rem;
  margin-top: 0.3rem;
  border: 1px solid rgba(78, 98, 44, 0.45);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(17, 23, 9, 0.94), rgba(6, 8, 4, 0.98));
}

.pilot-battery-label {
  font-size: 0.6rem;
  letter-spacing: 0.14rem;
  color: #6d7a4a;
}

.pilot-battery-value {
  font-family: var(--ctrl-seg-font);
  font-size: clamp(1rem, 1.8vh, 1.6rem);
  color: #e9bc54;
  text-shadow: 0 0 10px rgba(233, 188, 84, 0.25);
  letter-spacing: 0.1rem;
}

.captain-gauge-wrap {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.captain-gauge {
  --captain-gauge-fill: 0deg;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0 56%, transparent 57%),
    conic-gradient(from 225deg, rgba(123, 224, 191, 0.9) 0deg, rgba(123, 224, 191, 0.9) var(--captain-gauge-fill), rgba(255, 255, 255, 0.09) var(--captain-gauge-fill), rgba(255, 255, 255, 0.09) 270deg, rgba(255, 255, 255, 0.03) 270deg);
  box-shadow: inset 0 0 20px rgba(123, 224, 191, 0.15);
}

.captain-gauge-inner {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.08rem;
  background: linear-gradient(180deg, rgba(6, 21, 30, 0.95), rgba(3, 11, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.captain-gauge-inner strong {
  font-size: 0.8rem;
}

.captain-gauge-inner span {
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
}

.captain-gauge-caption {
  margin: 0;
  font-size: 0.66rem;
  text-align: center;
}

.role-tab-button {
  min-height: 38px;
  border-radius: 10px;
  padding: 0.3rem 0.25rem;
  font-size: 0.65rem;
}

.sonar-scan-viewport {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-height: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(123, 224, 191, 0.32);
  background:
    radial-gradient(circle at 50% 50%, rgba(123, 224, 191, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(7, 22, 33, 0.96), rgba(2, 9, 16, 0.98));
  box-shadow: inset 0 0 30px rgba(34, 243, 184, 0.08);
  touch-action: none;
}

.sonar-battery-warning {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 3;
  max-width: min(90%, 24rem);
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 119, 119, 0.58);
  border-radius: 999px;
  background: rgba(56, 10, 10, 0.88);
  color: #ffd2d2;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 84, 84, 0.2);
  transition: opacity 160ms ease-out;
}

.sonar-battery-warning.visible {
  opacity: 1;
  animation: sonarBatteryWarningPulse 0.95s ease-in-out infinite;
}

@keyframes sonarBatteryWarningPulse {
  0%, 100% {
    opacity: 0.72;
    box-shadow: 0 0 10px rgba(255, 84, 84, 0.18);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 22px rgba(255, 84, 84, 0.48);
  }
}

/* Enhanced sonar viewport for larger screens */
@media (min-width: 768px) {
  
  .sonar-scan-viewport:hover {
    border-color: rgba(123, 224, 191, 0.45);
  }
  
  .sonar-scan-viewport:active,
  .sonar-scan-viewport:has(canvas:active) {
    cursor: grabbing;
  }
}

.sonar-fade-caption {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  text-align: center;
}

.sonar-mode-desc {
  margin: 0.7rem 0 0;
  padding: 0.4rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(180, 220, 255, 0.7);
  border-left: 2px solid rgba(139, 247, 255, 0.3);
  background: rgba(139, 247, 255, 0.04);
}

.sonar-control-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 0.25rem;
  min-height: 0;
  overflow: hidden;
}

body.ind-controller .sonar-control-card .sonar-scan-viewport {
  align-self: center;
  justify-self: center;
}

.sonar-dial-wrap {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.sonar-depth-dial {
  --dial-fill: 0deg;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0 54%, transparent 55%),
    conic-gradient(from 225deg, rgba(255, 79, 79, 0.2) 0deg, rgba(255, 79, 79, 0.2) 24deg, rgba(66, 217, 181, 0.92) 24deg, rgba(66, 217, 181, 0.92) var(--dial-fill), rgba(255, 255, 255, 0.08) var(--dial-fill), rgba(255, 255, 255, 0.08) 270deg, rgba(255, 255, 255, 0.04) 270deg);
  box-shadow: inset 0 0 22px rgba(66, 217, 181, 0.18);
}

.sonar-depth-dial-inner {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  background: linear-gradient(180deg, rgba(6, 21, 30, 0.96), rgba(3, 11, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sonar-depth-dial-inner strong {
  font-size: 1rem;
}

.sonar-depth-dial-inner span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: var(--muted);
}

.sonar-depth-caption {
  font-size: 0.78rem;
  text-align: center;
  max-width: 130px;
}

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

.sonar-bottom-readout {
  position: absolute;
  left: 50%;
  top: var(--sonar-depth-label-top, 62%);
  transform: translate(-50%, -50%);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(2, 9, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d8fff2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 360ms linear;
}

.sonar-ping-button {
  width: min(100%, 190px);
  min-width: 100px;
  min-height: 38px;
  padding: 0.52rem 0.74rem;
  border-radius: 14px;
  letter-spacing: 0.18rem;
  font-size: 0.82rem;
}

.sonar-bottom-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 0.75rem;
}

.sonar-range-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
}

.sonar-ping-controls {
  display: inline-flex;
  justify-content: flex-end;
}

.sonar-range-label {
  min-width: 92px;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #9bb08f;
}

.sonar-range-button {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0;
}

/* Zone-rendered sonar controls */
.sonar-zone-range-controls {
  display: flex;
  gap: 0.65rem;
  justify-content: flex-start;
  align-items: center;
}

.sonar-scan-type-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.sonar-scan-type-btn {
  flex: 1;
  padding: 0.35rem 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  border-radius: 6px;
  opacity: 0.55;
  transition: opacity 120ms ease, background 120ms ease;
}

.sonar-scan-type-btn.active {
  opacity: 1;
  background: rgba(139, 247, 255, 0.15);
  border-color: rgba(139, 247, 255, 0.6);
}


.sonar-zone-ping-button {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15rem;
  pointer-events: auto;
  touch-action: manipulation;
}

.sonar-zone-button {
  pointer-events: auto;
  touch-action: manipulation;
}

.periscope-zone-lights-button {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  white-space: pre-wrap;
}

.periscope-zone-focus-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.periscope-zone-button {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.periscope-zone-button:active {
  transform: translateY(1px);
}

.ctrl-zone-left-bottom {
  overflow: auto;
}

.sonar-ping-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.arm-camera-viewport {
  position: relative;
  min-height: 120px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(123, 224, 191, 0.24);
  background: linear-gradient(180deg, rgba(8, 24, 35, 0.94), rgba(1, 8, 13, 0.98));
}

.arm-camera-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(0.52) contrast(1.14) brightness(0.88);
  image-rendering: pixelated;
}

.arm-camera-crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  /* strong vignette */
  background: radial-gradient(ellipse at center, rgba(255, 210, 128, 0.06) 0%, rgba(0, 0, 0, 0.52) 68%, rgba(0, 0, 0, 0.82) 100%);
}

.arm-camera-crt-scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.0) 0px,
    rgba(0, 0, 0, 0.0) 1px,
    rgba(0, 0, 0, 0.46) 2px,
    rgba(0, 0, 0, 0.46) 3px
  );
  opacity: 0.82;
  mix-blend-mode: multiply;
  animation: arm-crt-flicker 110ms steps(3, end) infinite;
}

.arm-camera-crt-noise {
  position: absolute;
  inset: -32%;
  background-image:
    radial-gradient(circle at 12% 23%, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 70% 58%, rgba(255, 247, 220, 0.22) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 36% 78%, rgba(255, 255, 255, 0.20) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 240, 0.18) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 52% 42%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 100%);
  background-size: 48px 48px, 56px 56px, 44px 44px, 60px 60px, 52px 52px;
  opacity: 0.46;
  mix-blend-mode: screen;
  animation: arm-crt-noise-drift 520ms steps(7, end) infinite;
}

@keyframes arm-crt-flicker {
  0%   { opacity: 0.76; }
  33%  { opacity: 0.88; }
  66%  { opacity: 0.78; }
  100% { opacity: 0.84; }
}

@keyframes arm-crt-noise-drift {
  0%   { transform: translate3d(-6%, -3%, 0); }
  25%  { transform: translate3d(4%, 1%, 0); }
  50%  { transform: translate3d(-2%, 5%, 0); }
  75%  { transform: translate3d(5%, -4%, 0); }
  100% { transform: translate3d(-4%, 2%, 0); }
}

.arm-camera-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.arm-camera-hud-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(123, 224, 191, 0.22);
  background: rgba(0, 0, 0, 0.22);
}

.arm-camera-hud-label {
  font-size: 0.7rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: var(--muted);
}

.arm-camera-hud-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #b8fbff;
}

.arm-clamp-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

@keyframes pulse-device-edge {
  0% {
    opacity: 0;
    border-width: 0;
    box-shadow: inset 0 0 0 rgba(139, 238, 255, 0), inset 0 0 0 rgba(139, 238, 255, 0);
  }

  12% {
    opacity: 1;
    border-width: 2px;
    box-shadow: inset 0 0 24px rgba(139, 238, 255, 0.55), inset 0 0 64px rgba(139, 238, 255, 0.24);
  }

  100% {
    opacity: 0;
    border-width: 0;
    box-shadow: inset 0 0 0 rgba(139, 238, 255, 0), inset 0 0 0 rgba(139, 238, 255, 0);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.control-button {
  width: 100%;
}

.controls-grid {
  gap: 0.55rem;
  max-height: calc(100vh - 190px);
  overflow: auto;
}

body.ind-controller .controls-grid {
  max-height: calc(100dvh - var(--controller-role-bar-height) - 5.5rem);
}

.control-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

body.ind-controller #controllerMissionScreen .controls-grid.camera-role-layout .control-card.ctrl-room-main-card {
  display: flex;
  flex-direction: column;
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (max-width: 720px) {
  .storage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.storage-slot {
  min-height: 86px;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #e6e6e6;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 0.2rem;
  cursor: pointer;
}

.storage-slot.filled {
  background: rgba(112, 150, 220, 0.12);
}

.storage-slot.selected {
  border-color: rgba(110, 210, 130, 0.8);
  box-shadow: 0 0 0 1px rgba(110, 210, 130, 0.45);
}

.storage-slot-item {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.storage-slot-quantity {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.storage-slot-empty {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.storage-card {
  display: grid;
  gap: 0.75rem;
}

.storage-tab-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.storage-tab-button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #e6e6e6;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
}

.storage-tab-button.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(110, 210, 130, 0.65);
  color: #ffffff;
}

.storage-details {
  display: grid;
  gap: 0.55rem;
}

.storage-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.storage-process-note {
  font-size: 0.92rem;
  color: rgba(165, 213, 92, 0.95);
}

.storage-slot-popup-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
}

.storage-slot-popup {
  width: min(480px, 100%);
  background: rgba(10, 16, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.25rem;
  display: grid;
  gap: 0.85rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
}

.storage-slot-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.storage-slot-popup-close {
  appearance: none;
  border: none;
  background: transparent;
  color: #e6e6e6;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

/* ── Storage & Processing — shared ── */
.storage-inventory-pane {
  display: grid;
  gap: 0.75rem;
}

.storage-empty-state {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

/* ── Storage: section label bar ── */
.storage-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.85rem;
  background: rgba(154, 162, 110, 0.07);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

.storage-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
}

.storage-section-count {
  font-size: 0.68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Storage: type group panels ── */
.storage-group-panel {
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  overflow: hidden;
  /* colored top accent set inline per group */
  border-top-width: 3px;
}

.storage-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.85rem 0.45rem;
  border-bottom: 1px solid var(--panel-border);
}

.storage-group-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  /* color set inline to match the group accent */
}

.storage-group-count {
  font-size: 0.65rem;
  color: var(--muted);
}

.storage-group-list {
  display: grid;
}

.storage-item-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--panel-border);
  transition: background 0.12s;
}

.storage-group-list > :last-child .storage-item-row,
.storage-group-list > div:last-child .storage-item-row {
  border-bottom: none;
}

.storage-item-row:hover {
  background: rgba(154, 162, 110, 0.06);
}

/* ── Storage: type badge ── */
.storage-type-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
  font-family: var(--ctrl-seg-font);
}

.storage-badge-raw {
  background: rgba(232, 160, 32, 0.15);
  color: var(--ctrl-seg-color-amber);
  border: 1px solid rgba(232, 160, 32, 0.35);
}

.storage-badge-refined {
  background: rgba(167, 181, 122, 0.12);
  color: var(--accent);
  border: 1px solid rgba(167, 181, 122, 0.3);
}

.storage-badge-fuel {
  background: rgba(74, 222, 128, 0.1);
  color: var(--ctrl-bar-fill-ok);
  border: 1px solid rgba(74, 222, 128, 0.28);
}

.storage-item-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Storage: quantity bar ── */
.storage-quantity-bar {
  height: 5px;
  background: rgba(154, 162, 110, 0.15);
  border-radius: 3px;
  min-width: 60px;
  overflow: hidden;
  border: 1px solid rgba(154, 162, 110, 0.1);
}

.storage-quantity-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
  /* color set inline to match group accent */
}

.storage-quantity-label {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Storage: action menu button ── */
.storage-menu-btn {
  appearance: none;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.storage-menu-btn:hover,
.storage-menu-btn.active {
  background: rgba(154, 162, 110, 0.12);
  border-color: var(--accent);
  color: var(--text);
}

/* ── Storage: inline action panel ── */
.storage-item-actions {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid var(--panel-border);
}

.storage-item-desc {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Processor queue ── */
.queue-strip {
  display: grid;
  gap: 0;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.queue-job-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  row-gap: 0.35rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--panel-border);
}

.queue-job-row:last-child {
  border-bottom: none;
}

/* Active job has a green left accent */
.queue-job-row.queue-job-active {
  border-left: 3px solid var(--ctrl-bar-fill-ok);
  padding-left: calc(0.85rem - 2px);
  background: rgba(74, 222, 128, 0.04);
}

.queue-job-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  font-size: 0.86rem;
  color: var(--text);
  min-width: 0;
}

.queue-status-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(154, 162, 110, 0.1);
  color: var(--muted);
  border: 1px solid var(--panel-border);
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
}

.queue-status-active {
  background: rgba(74, 222, 128, 0.12);
  color: var(--ctrl-bar-fill-ok);
  border-color: rgba(74, 222, 128, 0.35);
}

.queue-job-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.queue-time-label {
  font-size: 0.78rem;
  color: var(--ctrl-bar-fill-ok);
  font-variant-numeric: tabular-nums;
}

.queue-progress-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(154, 162, 110, 0.12);
  border-radius: 2px;
  overflow: hidden;
  flex-basis: 100%;
  border: 1px solid rgba(154, 162, 110, 0.08);
}

.queue-progress-fill {
  height: 100%;
  background: var(--ctrl-bar-fill-ok);
  border-radius: 2px;
  width: 100%;
  opacity: 0.7;
}

.queue-progress-active {
  animation: queue-progress-pulse 2s ease-in-out infinite;
}

@keyframes queue-progress-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.queue-paused-notice {
  font-size: 0.83rem;
  color: var(--warning);
  font-weight: 600;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--panel-border);
  background: rgba(209, 162, 63, 0.07);
}

/* ── Recipe browser: tier sections ── */
.recipe-tier-section {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

/* Coloured top edge per tier */
.recipe-section-available  { border-top: 3px solid var(--ctrl-bar-fill-ok); }
.recipe-section-partial    { border-top: 3px solid var(--warning); }
.recipe-section-unavailable { border-top: 3px solid rgba(154, 162, 110, 0.3); }

.recipe-tier-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.45rem;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.recipe-section-available  .recipe-tier-header { color: var(--ctrl-bar-fill-ok); }
.recipe-section-partial    .recipe-tier-header { color: var(--warning); }
.recipe-section-unavailable .recipe-tier-header { color: var(--muted); }

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0;
}

/* Recipe cards are cells in the grid, separated by panel-border lines */
.recipe-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem;
  border-right: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  transition: background 0.12s;
}

.recipe-card:hover {
  background: rgba(154, 162, 110, 0.05);
}

/* Remove redundant right/bottom borders at edges — handled by the outer container */
.recipe-available  { background: rgba(74, 222, 128, 0.03); }
.recipe-partial    { background: rgba(209, 162, 63, 0.03); }
.recipe-unavailable { opacity: 0.45; }

.recipe-inputs {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.recipe-arrow {
  font-size: 0.72rem;
  color: rgba(154, 162, 110, 0.4);
}

.recipe-outputs {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
}

.recipe-queue-btn {
  font-size: 0.74rem;
  padding: 0.3rem 0.65rem;
  margin-top: 0.3rem;
  justify-self: start;
  min-width: auto;
}

.recipe-missing-hint {
  font-size: 0.72rem;
  color: var(--warning);
  margin-top: 0.2rem;
  line-height: 1.4;
  opacity: 0.8;
}

.control-card h3,
.control-card p {
  margin: 0;
}

.control-surface {
  position: relative;
  min-height: 220px;
  border-radius: 20px;
  overflow: hidden;
  touch-action: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at center, rgba(123, 224, 191, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(17, 52, 77, 0.7), rgba(2, 11, 19, 0.96));
}

.control-surface.radar-surface {
  background:
    radial-gradient(circle at center, rgba(215, 255, 110, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(12, 42, 56, 0.82), rgba(1, 10, 17, 0.98));
}

.surface-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 25% 25%;
}

.surface-grid.radar-grid {
  background-image:
    radial-gradient(circle at center, transparent 34%, rgba(255, 255, 255, 0.1) 35%, transparent 36%),
    radial-gradient(circle at center, transparent 58%, rgba(255, 255, 255, 0.08) 59%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 25% 25%, 25% 25%;
}

.surface-label {
  position: absolute;
  left: 0.9rem;
  top: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
}

.surface-knob {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: radial-gradient(circle at 30% 30%, #f6fffb, rgba(123, 224, 191, 0.55));
  box-shadow: 0 0 18px rgba(123, 224, 191, 0.3);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.radar-ping {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(215, 255, 110, 0.9);
  background: rgba(215, 255, 110, 0.18);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.slider-stack {
  display: grid;
  gap: 0.8rem;
}

.arm-joint-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.arm-joint-tab {
  min-height: 42px;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: 0.76rem;
}

.arm-joint-tab.active {
  background: linear-gradient(135deg, rgba(123, 224, 191, 0.9), rgba(92, 181, 255, 0.72));
  color: #021019;
  border-color: rgba(195, 255, 245, 0.72);
}

.arm-slider-stack {
  margin-top: 0.35rem;
}

.pilot-dial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.pilot-vertical-slider-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: end;
}

.pilot-ballast-row {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.ballast-water-indicator {
  display: grid;
  gap: 0.75rem;
  align-items: center;
  justify-items: center;
}

.ballast-water-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
}

.ballast-control-grid {
  display: grid;
  align-items: stretch;
  justify-items: center;
  width: 100%;
  height: 100%;
}

/* Dual-tank layout: two gauges side by side */
.ballast-dual-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Neutral buoyancy line: amber tick mark on the dial arc */
.ballast-neutral-line {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 42%;
  height: 2px;
  transform-origin: 100% 50%;
  pointer-events: none;
  background: rgba(251, 191, 36, 0.7); /* amber, semi-transparent */
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
  transition: transform 400ms ease-out;
}

.ballast-neutral-line::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 10px;
  background: rgba(251, 191, 36, 0.8);
  border-radius: 1px;
}

.ballast-gauge-card {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.ballast-gauge-card .pilot-throttle-gauge-card {
  min-height: 0;
}

.ballast-gauge-card .pilot-throttle-dial {
  width: min(100%, clamp(190px, 41vh, 340px));
  height: auto;
  min-height: 0;
  margin-inline: auto;
}

.ballast-button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.ballast-button-row button {
  width: auto;
  flex: 0 0 auto;
}

/* ── Ballast tank zone panels (left/right sidebar) ─────────────────── */
.ballast-tank-value-label {
  display: none;
}

.ballast-tank-btn-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  width: 100%;
}

.controller-plusminus-button.ballast-tank-dive-btn,
.controller-plusminus-button.ballast-tank-rise-btn {
  width: 100%;
  height: clamp(52px, 10vh, 100px);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  padding: 0;
}

/* ── Pitch / trim silhouette (centre controls zone) ─────────────────── */
.ballast-pitch-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  height: 100%;
}

.ballast-pitch-indicator-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0.5rem;
}

.ballast-pitch-title {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-dim, rgba(255,255,255,0.45));
}

.ballast-pitch-svg {
  width: min(100%, clamp(80px, 18vw, 130px));
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  display: block;
}

/* Round dial face + bezel ring */
.ballast-pitch-face {
  fill: var(--bg-bottom, #0c1208);
  stroke: var(--accent, #a7b57a);
  stroke-width: 3;
}

.ballast-pitch-bezel {
  fill: none;
  stroke: var(--panel-border, rgba(154, 162, 110, 0.22));
  stroke-width: 1.5;
}

/* Etched degree scale */
.ballast-pitch-tick {
  stroke: var(--muted, #b4b78f);
  stroke-width: 1;
  opacity: 0.5;
}

.ballast-pitch-tick-major {
  stroke: var(--accent-strong, #d8d294);
  stroke-width: 2;
}

.ballast-pitch-tick-label {
  fill: var(--muted, #b4b78f);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Submarine silhouette (the needle) – filled */
.ballast-pitch-sub {
  fill: var(--accent-strong, #d8d294);
  stroke: var(--bg-bottom, #0c1208);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* Fixed horizon reference (0° level) */
.ballast-pitch-horizon {
  stroke: var(--accent, #a7b57a);
  stroke-width: 1;
  opacity: 0.25;
  stroke-dasharray: 5 5;
}

/* Central pivot hub */
.ballast-pitch-hub {
  fill: var(--accent, #a7b57a);
  stroke: var(--bg-bottom, #0c1208);
  stroke-width: 2;
}

.ballast-pitch-value {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong, #d8d294);
  letter-spacing: 0.08em;
  min-width: 4ch;
  text-align: center;
}

/* ── Ballast role: stack gauges above pitch indicator ────────────────────── */
body.ind-controller #controllerMissionScreen .controls-grid.ballast-role-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  height: 100%;
}

body.ind-controller #controllerMissionScreen .controls-grid.ballast-role-layout .ballast-gauge-row {
  margin-top: -0.5rem;
}

body.ind-controller #controllerMissionScreen .controls-grid.ballast-role-layout .ballast-indicators-row {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

body.ind-controller #controllerMissionScreen .controls-grid.ballast-role-layout .ballast-pitch-card {
  flex: 1 1 0;
  min-height: 0;
}

/* ── Indicators row: pitch + roll side by side ───────────────────────────── */
.ballast-indicators-row {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  width: 100%;
}

/* Gauge row in the middle controls zone */
.ballast-gauge-row {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}

.ballast-gauge-row .pilot-throttle-gauge-card {
  flex: 1 1 0;
  min-width: 0;
}

.ballast-gauge-row .pilot-throttle-dial {
  width: min(100%, clamp(120px, 25vw, 200px));
  height: auto;
  margin-inline: auto;
}

/* Button-only panels in left/right sidebar */
.ballast-tank-btn-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  width: 100%;
}

.ballast-tank-btn-panel-title {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--color-cyan, #22d3ee);
  opacity: 0.7;
  text-transform: uppercase;
}

/* Left/right sidebar gauge sizing when used standalone (not inside .ballast-gauge-card) */
.ctrl-zone-left-bottom .pilot-throttle-gauge-card,
.ctrl-zone-right-aux .pilot-throttle-gauge-card {
  width: 100%;
}

.ctrl-zone-left-bottom .pilot-throttle-dial,
.ctrl-zone-right-aux .pilot-throttle-dial {
  width: min(100%, clamp(160px, 36vh, 280px));
  height: auto;
  margin-inline: auto;
}

.ballast-velocity-status {
  color: #0e3b6c;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 0.92rem;
  min-width: 8rem;
}

.ballast-water-viewport {
  width: 100%;
  max-width: 180px;
  min-width: 140px;
  min-height: 220px;
  aspect-ratio: 0.75;
  padding: 0.5rem;
  box-sizing: border-box;
}

.ballast-water-tank {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(50, 115, 190, 0.95);
  border-radius: 1.25rem;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #e8f2ff 100%);
  box-shadow: inset 0 0 0 1px rgba(30, 78, 142, 0.12);
}

.ballast-water-neutral-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  border-top: 2px dotted rgba(255, 80, 80, 0.9);
  z-index: 2;
  pointer-events: none;
}

.ballast-water-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  border-radius: 0 0 1.1rem 1.1rem;
  background: linear-gradient(180deg, rgba(68, 151, 255, 0.96), rgba(22, 83, 186, 0.98));
  box-shadow: inset 0 20px 40px rgba(12, 68, 154, 0.18);
  transition: height 0.25s ease;
}

.pilot-helm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.pilot-helm-panel {
  display: grid;
  gap: 0.45rem;
}

.pilot-vertical-slider {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
}

.pilot-thruster-surface {
  min-height: 170px;
}

.pilot-joystick-knob {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(123, 224, 191, 0.95);
  box-shadow: 0 0 0 10px rgba(123, 224, 191, 0.12);
  pointer-events: none;
}

/* Kept for backwards compat; active layout now uses pilot-throttle-assembly */
.pilot-command-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* ── Pilot throttle assembly (single unified brass housing) ───────── */
.pilot-throttle-assembly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background:
    linear-gradient(180deg, #251606 0%, #130c03 60%, #0b0602 100%);
  border: 2px solid #5a3c0c;
  border-top-color: rgba(185, 138, 38, 0.5);
  border-radius: 8px;
  padding: 0.8rem 0.25rem;
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(185, 138, 38, 0.1),
    0 4px 18px rgba(0, 0, 0, 0.5);
  position: relative;
}

.pilot-throttle-assembly::after {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(120, 88, 18, 0.45) 25%,
    rgba(120, 88, 18, 0.45) 75%,
    transparent
  );
  transform: translateX(-50%);
  pointer-events: none;
}

.pilot-side-controls {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
}

.pilot-throttle-vertical-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0 0.35rem;
  min-height: 0;
}

.pilot-throttle-vertical-wrap header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  padding: 0 0.25rem;
  gap: 0.3rem;
  margin-bottom: auto;
}

.pilot-throttle-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  width: fit-content;
}

.pilot-throttle-controls-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 1rem;
  margin-top: auto;
}

.pilot-throttle-controls-bottom .pilot-all-stop-housing {
  margin-top: 0;
  align-self: flex-end;
}

.pilot-throttle-card {
  position: relative;
  display: grid;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(88, 106, 56, 0.45);
  border-top-color: rgba(120, 140, 76, 0.58);
  border-radius: 2px;
  background:
    radial-gradient(circle at 8px 8px,          rgba(98, 108, 66, 0.88) 0 2px, rgba(24, 31, 14, 0.96) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 8px) 8px,          rgba(98, 108, 66, 0.88) 0 2px, rgba(24, 31, 14, 0.96) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at 8px calc(100% - 8px),          rgba(98, 108, 66, 0.88) 0 2px, rgba(24, 31, 14, 0.96) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), rgba(98, 108, 66, 0.88) 0 2px, rgba(24, 31, 14, 0.96) 2.5px 5px, transparent 5.4px),
    linear-gradient(180deg, rgba(21, 28, 12, 0.92), rgba(8, 10, 5, 0.98));
  box-shadow:
    inset 1px 1px 0 var(--ctrl-bevel-light),
    inset -1px -1px 0 var(--ctrl-bevel-dark),
    0 4px 12px rgba(0, 0, 0, 0.42);
}

.pilot-throttle-corner-left {
  margin-right: auto;
}

.pilot-throttle-corner-right {
  margin-left: auto;
}

.pilot-throttle-button-row-only {
  width: fit-content;
}

.pilot-throttle-corner-left .pilot-throttle-button-row {
  align-self: flex-start;
}

.pilot-throttle-corner-right .pilot-throttle-button-row {
  align-self: flex-end;
}

/* Left & right engine throttles fill their respective side zones identically. */
.pilot-throttle-corner-left,
.pilot-throttle-corner-right {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  grid-template-columns: minmax(0, 1fr);
}

.pilot-throttle-card .controller-plusminus-control {
  width: 100%;
  margin: 0;
}

.pilot-throttle-card .pilot-throttle-button-row,
.pilot-throttle-card .pilot-throttle-button-row-only {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ctrl-zone-left .pilot-throttle-card .controller-plusminus-button,
.ctrl-zone-right .pilot-throttle-card .controller-plusminus-button {
  width: 100%;
  height: clamp(48px, 6vh, 68px);
}

.controller-plusminus-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  margin: 0 auto;
}

.controller-plusminus-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  text-align: center;
}

.controller-plusminus-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 0.65rem;
  width: fit-content;
}

.controller-plusminus-button,
.pilot-throttle-button,
.sonar-zone-button {
  width: clamp(56px, 7vh, 80px);
  height: clamp(56px, 7vh, 80px);
  padding: 0;
  border: 1px solid rgba(128, 146, 86, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 18%, rgba(124, 166, 88, 0.18), transparent 40%),
    radial-gradient(circle at 82% 18%, rgba(154, 204, 120, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(34, 44, 22, 0.96), rgba(12, 16, 9, 0.99));
  color: #c5e3a5;
  font-size: clamp(1.35rem, 2.4vh, 2rem);
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-shadow: 0 0 10px rgba(197, 228, 164, 0.26);
  box-shadow:
    inset 1px 1px 0 rgba(181, 212, 133, 0.18),
    inset -1px -2px 0 rgba(0, 0, 0, 0.72),
    0 6px 18px rgba(0, 0, 0, 0.50);
  transition: filter 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
  flex-shrink: 0;
  pointer-events: auto;
  touch-action: manipulation;
}

.controller-plusminus-button:hover,
.pilot-throttle-button:hover,
.sonar-zone-button:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow:
    inset 1px 1px 0 rgba(204, 232, 172, 0.24),
    inset -1px -2px 0 rgba(0, 0, 0, 0.78),
    0 8px 22px rgba(0, 0, 0, 0.56);
}

.controller-plusminus-button:active,
.pilot-throttle-button:active,
.sonar-zone-button:active {
  filter: brightness(0.9);
  transform: translateY(0);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(204, 232, 172, 0.12);
}

.pilot-throttle-control-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f9e7b4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ── ALL STOP: brass housing + enlarged danger button ─────────────── */
.pilot-all-stop-housing {
  margin-top: 0.3rem;
  display: flex;
  justify-content: stretch;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(132, 52, 24, 0.54);
  border-top-color: rgba(185, 72, 38, 0.52);
  border-radius: 2px;
  background:
    radial-gradient(circle at 8px 8px,          rgba(128, 58, 30, 0.82) 0 2px, rgba(26, 12, 7, 0.96) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 8px) 8px,          rgba(128, 58, 30, 0.82) 0 2px, rgba(26, 12, 7, 0.96) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at 8px calc(100% - 8px),          rgba(128, 58, 30, 0.82) 0 2px, rgba(26, 12, 7, 0.96) 2.5px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), rgba(128, 58, 30, 0.82) 0 2px, rgba(26, 12, 7, 0.96) 2.5px 5px, transparent 5.4px),
    linear-gradient(180deg, rgba(26, 18, 10, 0.96), rgba(11, 7, 4, 0.98));
  box-shadow:
    inset 1px 1px 0 rgba(177, 80, 38, 0.18),
    inset -1px -2px 0 rgba(0, 0, 0, 0.8),
    0 4px 14px rgba(0, 0, 0, 0.52);
}

.pilot-all-stop-btn {
  width: auto;
  min-width: 100px;
  min-height: clamp(56px, 7vh, 80px);
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg,
    rgba(84, 22, 13, 0.62) 0%,
    rgba(34, 8, 6, 0.92) 100%
  );
  border: 1px solid rgba(167, 52, 34, 0.62);
  border-top-color: rgba(203, 76, 56, 0.52);
  color: #d25d4d;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.08rem, 2.2vh, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 0 10px rgba(203, 71, 52, 0.38);
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(228, 100, 72, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.68),
    0 5px 14px rgba(0, 0, 0, 0.48);
  transition: filter 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pilot-all-stop-btn:hover {
  filter: brightness(1.12);
  border-color: rgba(215, 92, 70, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(228, 110, 84, 0.22),
    0 0 18px rgba(175, 48, 32, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.56);
}

.pilot-all-stop-btn:active {
  filter: brightness(0.94);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.64),
    inset 0 1px 0 rgba(228, 110, 84, 0.1);
}

/* ══ Unified controller button language ═══════════════════════════════════
   A `body.ind-controller button` base already gives every button an olive
   panel look; these rules (a) pull the few outliers onto the shared radius +
   height scale (sonar PING was 14px, storage tabs 9px, ± pads 16px), and
   (b) layer a small accent hierarchy — amber = the screen's primary action,
   cyan = an engaged toggle, red = destructive — reusing the 7-seg palette so
   each screen finally has one focal control instead of a field of olive.
   The round ± pads stay a separate, deliberate "hardware knob" family. */
body.ind-controller .ctrl-button,
body.ind-controller .sonar-ping-button,
body.ind-controller .tech-nav-btn,
body.ind-controller .life-support-heater-button,
body.ind-controller .pilot-all-stop-btn {
  border-radius: var(--ctrl-btn-radius);
  min-height: var(--ctrl-btn-h-md);
  letter-spacing: 0.14em;
}

/* Amber = the primary call-to-action on a screen (PING, SET WAYPOINT …). */
body.ind-controller .ctrl-button,
body.ind-controller .sonar-ping-button {
  background: var(--ctrl-btn-primary-bg);
  border: 1px solid var(--ctrl-btn-primary-border);
  border-top-color: rgba(255, 196, 92, 0.55);
  color: var(--ctrl-btn-primary-text);
  text-shadow: 0 0 10px rgba(232, 160, 32, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 206, 110, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

body.ind-controller .ctrl-button:hover,
body.ind-controller .sonar-ping-button:hover {
  filter: brightness(1.1);
  border-color: rgba(255, 196, 92, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 206, 110, 0.24),
    0 0 16px rgba(232, 160, 32, 0.28),
    0 5px 16px rgba(0, 0, 0, 0.5);
}

body.ind-controller .ctrl-button:active,
body.ind-controller .sonar-ping-button:active {
  filter: brightness(0.94);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Red = destructive (ALL STOP). Its own rule is out-specified by the olive
   base, so restore the danger colours (existing tokens) at matching specificity. */
body.ind-controller .pilot-all-stop-btn {
  background: linear-gradient(180deg, rgba(139, 26, 26, 0.55) 0%, rgba(50, 10, 10, 0.72) 100%);
  border: 1px solid var(--ctrl-btn-allstop-border);
  border-top-color: rgba(255, 107, 107, 0.5);
  color: var(--ctrl-btn-allstop-text);
  text-shadow: 0 0 10px rgba(208, 48, 48, 0.32);
}

body.ind-controller .pilot-all-stop-btn:hover {
  filter: brightness(1.12);
  box-shadow:
    0 0 16px rgba(208, 48, 48, 0.32),
    0 5px 16px rgba(0, 0, 0, 0.5);
}

/* Green = an engaged / active toggle (existing --ctrl-btn-active-* tokens). */
body.ind-controller .tech-nav-btn.on,
body.ind-controller .life-support-heater-button.is-active {
  background: var(--ctrl-btn-active-bg);
  border-color: var(--ctrl-btn-active-border);
  color: var(--ctrl-btn-active-text);
  box-shadow:
    inset 0 0 12px rgba(74, 222, 128, 0.16),
    0 0 10px rgba(74, 222, 128, 0.18);
}

/* Soften the ± "hardware knob" family from a bubbly 16px toward the sharp
   panel language, so the two button families read as related, not random. */
body.ind-controller .controller-plusminus-button,
body.ind-controller .pilot-throttle-button,
body.ind-controller .sonar-zone-button {
  border-radius: 12px;
}

.pilot-momentary-button {
  min-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pilot-toggle-button {
  min-height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pilot-toggle-button.active,
.pilot-toggle-button:hover {
  background: rgba(123, 224, 191, 0.14);
  border-color: rgba(123, 224, 191, 0.4);
}

.pilot-control-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.pilot-dial-wrap {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.pilot-dial,
.pilot-wheel {
  position: relative;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  border: 1px solid rgba(123, 224, 191, 0.32);
  background:
    radial-gradient(circle at 45% 35%, rgba(123, 224, 191, 0.25), rgba(8, 22, 33, 0.85) 55%),
    linear-gradient(180deg, rgba(12, 33, 49, 0.85), rgba(2, 10, 18, 0.95));
  box-shadow: inset 0 0 24px rgba(123, 224, 191, 0.15);
}

.pilot-dial-needle,
.pilot-wheel-needle {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 2px;
  height: calc(50% - 12px);
  background: linear-gradient(180deg, rgba(215, 255, 110, 0.96), rgba(123, 224, 191, 0.55));
  transform-origin: 50% calc(100% - 6px);
  transform: translateX(-50%) rotate(0deg);
}

.pilot-wheel {
  width: 122px;
  height: 122px;
  margin: 0 auto;
}

.nautical-wheel {
  border-color: rgba(212, 165, 103, 0.38);
  background:
    radial-gradient(circle at 45% 35%, rgba(213, 159, 88, 0.2), rgba(9, 20, 28, 0.9) 58%),
    linear-gradient(180deg, rgba(32, 24, 16, 0.9), rgba(8, 10, 14, 0.98));
  box-shadow: inset 0 0 22px rgba(181, 121, 63, 0.18);
}

.nautical-wheel-inner {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 2px solid rgba(211, 167, 104, 0.55);
}

.nautical-wheel-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(223, 185, 125, 0.95), rgba(132, 85, 42, 0.75));
  transform-origin: 50% calc(100% + 14px);
}

.nautical-wheel-spoke-top {
  transform: translate(-50%, -100%) rotate(0deg);
}

.nautical-wheel-spoke-right {
  transform: translate(-50%, -100%) rotate(90deg);
}

.nautical-wheel-spoke-bottom {
  transform: translate(-50%, -100%) rotate(180deg);
}

.nautical-wheel-spoke-left {
  transform: translate(-50%, -100%) rotate(270deg);
}

.slider-card {
  display: grid;
  gap: 0.45rem;
}

.slider-card header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}

.slider-card input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.action-pad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.hold-button {
  min-height: 88px;
  border-radius: 22px;
  font-size: 1rem;
  font-weight: 700;
}

.hold-button.active {
  background: linear-gradient(135deg, rgba(255, 141, 109, 0.95), rgba(255, 95, 95, 0.85));
  border-color: transparent;
}

.telemetry-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.button-link {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  border-radius: 999px;
  padding: 0.9rem 1.2rem;
}

@media (max-width: 900px) {
  .grid-two {
    grid-template-columns: 1fr;
  }

  .compact-join-form {
    grid-template-columns: 1fr;
  }

  .host-stage-layout {
    grid-template-columns: 1fr;
  }

  .room-code-box {
    margin-left: 0;
    text-align: left;
  }

  .stage-canvas {
    min-height: 300px;
  }

  .controller-panel-heading,
  .controller-mission-topline,
  .lobby-ready-row {
    flex-direction: column;
    align-items: stretch;
  }

  .controller-mission-meta {
    justify-items: stretch;
    text-align: left;
  }

  .action-pad,
  .role-grid {
    grid-template-columns: 1fr;
  }

  .role-tab-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .captain-gauges-grid {
    grid-template-columns: 1fr;
  }
}





.host-lobby-config-row {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.host-select-control {
  display: grid;
  gap: 0.35rem;
  min-width: 180px;
  color: var(--muted);
}

.host-select-control span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.host-select-control select {
  width: 100%;
}

.host-join-sidebar-panel {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.host-join-qr {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #fff;
  padding: 0.35rem;
  width: 120px;
  height: 120px;
}




.howto-section {
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.9rem;
}

.howto-section h2 {
  margin-bottom: 0.7rem;
}

.howto-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.howto-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.65rem 0.75rem;
}

.howto-card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.mini-list {
  margin: 0.5rem 0 0.1rem 1rem;
  padding: 0;
  color: var(--muted);
  display: grid;
  gap: 0.3rem;
}

.host-howto-section {
  margin-top: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════
   INDUSTRIAL THEME  —  host page  (body.ind-host)
   ═══════════════════════════════════════════════════════════════════ */

body.ind-host {
  background:
    radial-gradient(circle at 18% -12%, rgba(124, 141, 81, 0.2), transparent 44%),
    radial-gradient(circle at 90% 8%, rgba(96, 107, 58, 0.15), transparent 42%),
    linear-gradient(180deg, #101408 0%, #080b04 100%);
  color: #d5d3b3;
  font-family: var(--font-mono);
}

body.ind-host::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 12%, transparent 88%, rgba(255, 255, 255, 0.02) 100%),
    repeating-linear-gradient(180deg, rgba(183, 196, 138, 0.03) 0 1px, transparent 1px 4px);
  opacity: 0.18;
}

body.ind-host .screen-shell {
  position: relative;
  z-index: 1;
}

body.ind-host h1,
body.ind-host h2,
body.ind-host h3 {
  color: #cad09a;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

body.ind-host .eyebrow {
  color: #9aa27b;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.ind-host p,
body.ind-host .muted,
body.ind-host .status-text {
  color: #a5aa82;
}

body.ind-host .panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(110, 123, 68, 0.42);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(22, 26, 14, 0.96) 0%, rgba(11, 13, 8, 0.96) 100%),
    linear-gradient(135deg, rgba(164, 176, 108, 0.04), rgba(0, 0, 0, 0));
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(189, 203, 138, 0.06);
}

body.ind-host .panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.08), transparent 14%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  opacity: 0.06;
}

body.ind-host input,
body.ind-host select {
  background: rgba(24, 20, 12, 0.9);
  border: 1px solid rgba(108, 113, 60, 0.5);
  color: #c7c5a2;
}

body.ind-host input:focus,
body.ind-host select:focus {
  outline: none;
  border-color: rgba(167, 175, 101, 0.88);
  box-shadow: 0 0 0 2px rgba(167, 175, 101, 0.26);
}

body.ind-host button,
body.ind-host .button-link {
  border-color: rgba(97, 98, 50, 0.56);
  background: linear-gradient(180deg, rgba(21, 22, 13, 0.93) 0%, rgba(13, 14, 8, 0.95) 100%);
  color: #c6c4a3;
  letter-spacing: 0.08rem;
}

body.ind-host button.primary {
  border-color: rgba(110, 120, 64, 0.82);
  color: #121604;
  background: linear-gradient(180deg, #8f9b66 0%, #5a673e 100%);
}

body.ind-host .button-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
}

body.ind-host .session-banner {
  border: 1px solid rgba(86, 97, 42, 0.65);
  background: rgba(20, 18, 10, 0.7);
  color: #b6b78f;
}

body.ind-host .room-code-box span {
  color: #9d9f6f;
}

body.ind-host .room-code-box strong {
  color: #bcc392;
  text-shadow: 0 0 16px rgba(143, 151, 98, 0.32);
}

body.ind-host .status-badge {
  border-color: rgba(92, 94, 36, 0.55);
  color: #b7b98f;
  background: rgba(30, 24, 11, 0.65);
}

body.ind-host .status-badge.subtle {
  color: #acb07c;
  border-color: rgba(85, 87, 35, 0.5);
  background: rgba(18, 15, 9, 0.8);
}

body.ind-host .stage-canvas {
  border-color: rgba(91, 94, 37, 0.45);
  background:
    radial-gradient(circle at 50% 15%, rgba(150, 160, 96, 0.11), transparent 35%),
    linear-gradient(180deg, rgba(24, 21, 12, 0.96), rgba(10, 9, 6, 0.98));
}

body.ind-host .player-list li,
body.ind-host .meter-row {
  border-color: rgba(84, 86, 33, 0.35);
  color: #abb07c;
}

body.ind-host .host-steps-bar {
  background: linear-gradient(180deg, rgba(23, 31, 13, 0.96), rgba(12, 15, 9, 0.98));
  border: 1px solid rgba(122, 141, 75, 0.45);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.ind-host .host-step-badge {
  border: 1px solid rgba(122, 141, 75, 0.5);
  background: rgba(122, 141, 75, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.ind-host .host-step-body strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #e5e8c5;
  margin-bottom: 0.2rem;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

body.ind-host .host-qr-panel {
  width: 190px;
  background: linear-gradient(180deg, rgba(18, 28, 14, 0.94), rgba(10, 14, 8, 0.96));
  border: 1px solid rgba(122, 141, 75, 0.55);
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45);
}

body.ind-host .host-room-code-label {
  font-family: var(--font-mono);
  letter-spacing: 0.36em;
}

body.ind-host .host-room-code {
  color: #eef0cc;
  letter-spacing: 0.38em;
  text-shadow: 0 0 10px rgba(233, 235, 199, 0.18);
}

body.ind-host .host-entry-inner {
  background: rgba(12, 14, 8, 0.86);
  border: 1px dashed rgba(135, 155, 80, 0.5);
  border-radius: 16px;
  padding: 1.6rem;
}

body.ind-host .host-crew-panel {
  background: rgba(16, 22, 10, 0.78);
  border: 1px solid rgba(120, 138, 74, 0.35);
  border-radius: 16px;
  padding: 1.2rem;
}

body.ind-host .host-crew-panel h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #b7c48a;
  margin: 0;
  opacity: 0.9;
}

.host-cast-link {
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   INDUSTRIAL THEME  —  controller pages  (body.ind-controller)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base & background ────────────────────────────────────────────── */
body.ind-controller {
  background:
    radial-gradient(ellipse at 30% 0%, #141b0e 0%, #0f130b 55%, #080a06 100%);
  font-family: var(--font-mono);
}

/* Subtle scanline metal texture */
body.ind-controller::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 3px,
      rgba(0, 0, 0, 0.055) 3px, rgba(0, 0, 0, 0.055) 4px
    );
}

/* ── Typography ───────────────────────────────────────────────────── */
body.ind-controller h1,
body.ind-controller h2,
body.ind-controller h3 {
  color: #d0d0a2;
  text-transform: uppercase;
  letter-spacing: 0.18rem;
  margin-top: 0;
  margin-bottom: 0.45rem;
}

body.ind-controller h1 { font-size: 1.25rem; }
body.ind-controller h2 { font-size: 0.92rem; }

body.ind-controller .eyebrow {
  color: #9ead79;
  letter-spacing: 0.24rem;
  font-size: 0.66rem;
}

body.ind-controller p,
body.ind-controller .muted,
body.ind-controller .status-text {
  color: #8f9a6d;
  font-size: 0.8rem;
}

/* ── Panels ───────────────────────────────────────────────────────── */
body.ind-controller .panel {
  position: relative;
  background:
    linear-gradient(180deg, #181f11 0%, #11170d 48%, #0d1109 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  border: 1px solid rgba(78, 95, 39, 0.42);
  border-top-color: rgba(120, 138, 82, 0.58);
  border-radius: 8px;
  backdrop-filter: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(162, 173, 113, 0.055),
    0 10px 26px rgba(0, 0, 0, 0.58);
}

body.ind-controller .panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  opacity: 0.08;
}

/* ── Inputs ───────────────────────────────────────────────────────── */
body.ind-controller input {
  background: #090b06;
  border: 1px solid rgba(80, 90, 53, 0.5);
  color: #9ca681;
  border-radius: 3px;
  letter-spacing: 0.06rem;
  font-family: inherit;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

body.ind-controller input::placeholder {
  color: rgba(120, 130, 83, 0.38);
}

body.ind-controller input:focus {
  outline: none;
  border-color: rgba(145, 155, 102, 0.75);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(135, 146, 91, 0.14);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
body.ind-controller button {
  background: linear-gradient(180deg, #232a16 0%, #161c10 100%);
  border: 1px solid rgba(80, 90, 53, 0.48);
  border-top-color: rgba(105, 123, 68, 0.68);
  color: #a9b996;
  border-radius: var(--ctrl-btn-radius);
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-family: inherit;
  padding: 0.45rem 0.8rem;
  line-height: 1.2;
  box-shadow:
    inset 0 1px 0 rgba(145, 163, 103, 0.055),
    0 3px 8px rgba(0, 0, 0, 0.55);
  transition: filter 80ms, box-shadow 80ms;
}

body.ind-controller button:active {
  filter: brightness(0.82);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.55);
}

body.ind-controller button.primary {
  background: linear-gradient(180deg, #15320d 0%, #0e2209 100%);
  border-color: rgba(64, 120, 53, 0.58);
  border-top-color: rgba(90, 165, 75, 0.78);
  color: #cee5a5;
  box-shadow:
    inset 0 1px 0 rgba(140, 190, 100, 0.07),
    0 3px 8px rgba(0, 0, 0, 0.55);
}

body.ind-controller button.hold-button {
  background: linear-gradient(180deg, #171f0c 0%, #111907 100%);
  border-color: rgba(88, 105, 50, 0.48);
  border-top-color: rgba(120, 150, 70, 0.68);
  color: #b2c48f;
  font-size: 0.9rem;
  min-height: 52px;
  border-radius: 5px;
}

body.ind-controller button.hold-button.active {
  background: linear-gradient(180deg, #2a3b13 0%, #18290c 100%);
  border-color: rgba(125, 170, 72, 0.8);
  color: #d1ddac;
  box-shadow: inset 0 0 18px rgba(80, 120, 40, 0.2), 0 0 14px rgba(90, 130, 45, 0.28);
}

/* ── Labels ───────────────────────────────────────────────────────── */
body.ind-controller label {
  color: #8f9a6d;
  font-size: 0.78rem;
  letter-spacing: 0.06rem;
}

/* ── Session banner ───────────────────────────────────────────────── */
body.ind-controller .session-banner {
  background: rgba(18, 36, 14, 0.55);
  border-color: rgba(45, 90, 42, 0.5);
  color: #cde2a7;
  border-radius: 4px;
}

/* ── Mission info bar ─────────────────────────────────────────────── */
body.ind-controller .mission-info-bar {
  background: rgba(6, 5, 2, 0.8);
  border-color: rgba(77, 95, 45, 0.32);
  color: #8f9a6d;
  border-radius: 3px;
}

/* ── Mission meta badges ──────────────────────────────────────────── */
body.ind-controller .controller-mission-meta strong,
body.ind-controller .controller-mission-meta span {
  background: rgba(8, 6, 2, 0.85);
  border-color: rgba(77, 95, 45, 0.42);
  color: #a3b488;
  border-radius: 3px;
  letter-spacing: 0.1rem;
  font-size: 0.78rem;
}

/* ── Control cards ────────────────────────────────────────────────── */
body.ind-controller .control-card {
  background: linear-gradient(180deg, rgba(16, 18, 11, 0.92), rgba(8, 10, 5, 0.97));
  border: 1px solid rgba(78, 98, 40, 0.42);
  border-top-color: rgba(110, 140, 70, 0.55);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.ind-controller .control-card h3 {
  color: #a7b07c;
  font-size: 0.8rem;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
}

body.ind-controller .control-card > p {
  color: rgba(110, 118, 72, 0.75);
}

/* ── Control surface ──────────────────────────────────────────────── */
body.ind-controller .control-surface {
  position: relative;
  background:
    radial-gradient(circle at center, rgba(28, 34, 16, 0.55), transparent 35%),
    linear-gradient(180deg, rgba(16, 14, 8, 0.92), rgba(6, 5, 2, 0.98));
  border-color: rgba(70, 90, 42, 0.38);
  border-radius: 4px;
}

body.ind-controller .control-surface::before,
body.ind-controller .control-surface::after {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(185, 205, 120, 0.92);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.ind-controller .control-surface::before {
  top: 0.75rem;
  left: 0.75rem;
}

body.ind-controller .control-surface::after {
  bottom: 0.75rem;
  right: 0.75rem;
}

body.ind-controller .control-surface.radar-surface {
  background:
    radial-gradient(circle at center, rgba(65, 95, 28, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(10, 14, 5, 0.92), rgba(4, 6, 2, 0.98));
}

body.ind-controller .surface-grid {
  background-image:
    linear-gradient(rgba(110, 139, 66, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 139, 66, 0.07) 1px, transparent 1px);
}

body.ind-controller .surface-grid.radar-grid {
  background-image:
    radial-gradient(circle at center, transparent 34%, rgba(110, 139, 66, 0.1) 35%, transparent 36%),
    radial-gradient(circle at center, transparent 58%, rgba(110, 139, 66, 0.08) 59%, transparent 60%),
    linear-gradient(rgba(110, 139, 66, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 139, 66, 0.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 25% 25%, 25% 25%;
}

body.ind-controller .surface-label {
  color: rgba(130, 142, 92, 0.95);
  font-size: 0.72rem;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  background: rgba(16, 24, 12, 0.82);
  border: 1px solid rgba(90, 110, 45, 0.45);
  border-radius: 4px;
  padding: 0.16rem 0.35rem;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.ind-controller .surface-knob {
  background: radial-gradient(circle at 32% 28%, #9da86b, rgba(80, 90, 40, 0.85));
  border-color: rgba(110, 140, 72, 0.8);
  box-shadow: 0 0 14px rgba(90, 120, 60, 0.28);
}

body.ind-controller .radar-ping {
  border-color: rgba(110, 139, 66, 0.88);
  background: rgba(110, 139, 66, 0.14);
}

/* ── Role buttons (lobby drawer) ──────────────────────────────────── */
body.ind-controller .role-card-button {
  background: linear-gradient(180deg, #1d2913 0%, #151d0e 100%);
  border: 1px solid rgba(80, 95, 42, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  color: #9aa673;
  font-size: 0.66rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

body.ind-controller .role-card-button.active {
  background: linear-gradient(180deg, #17280e 0%, #111b0a 100%);
  border-color: rgba(60, 120, 35, 0.65);
  color: #8cc35a;
}

body.ind-controller .role-card-button.taken {
  background: rgba(10, 8, 4, 0.5);
  border-color: rgba(60, 70, 30, 0.28);
  color: rgba(100, 115, 65, 0.42);
}

/* ── Role tabs (mission drawer) ───────────────────────────────────── */
body.ind-controller .role-tab-button {
  background: linear-gradient(180deg, #1f2715 0%, #161d11 100%);
  border: 1px solid rgba(80, 95, 42, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  color: #7e8b63;
  font-size: 0.6rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

body.ind-controller .role-tab-button.active {
  background: linear-gradient(180deg, #1d3310 0%, #13220c 100%);
  border-color: rgba(46, 110, 30, 0.68);
  color: #60c025;
}

body.ind-controller .role-tab-button.taken {
  border-color: rgba(52, 60, 27, 0.28);
  color: rgba(95, 109, 55, 0.45);
}

/* ── Captain gauges ───────────────────────────────────────────────── */
body.ind-controller .captain-gauge {
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 6, 2, 0.96) 0 56%, transparent 57%),
    conic-gradient(from 225deg,
      rgba(95, 150, 55, 0.85) 0deg, rgba(95, 150, 55, 0.85) 24deg,
      rgba(70, 205, 110, 0.88) 24deg, rgba(70, 205, 110, 0.88) var(--captain-gauge-fill),
      rgba(255, 255, 255, 0.07) var(--captain-gauge-fill), rgba(255, 255, 255, 0.07) 270deg,
      rgba(255, 255, 255, 0.03) 270deg);
  border: 2px solid rgba(62, 90, 40, 0.5);
  box-shadow:
    inset 0 0 32px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(30, 42, 20, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.65);
}

body.ind-controller .captain-gauge-inner {
  background: #060402;
  border: none;
  box-shadow: inset 0 3px 16px rgba(0, 0, 0, 0.88);
}

body.ind-controller .captain-gauge-inner strong {
  color: #b4be89;
  font-size: 0.88rem;
}

body.ind-controller .captain-gauge-inner span {
  color: #8f9c65;
  font-size: 0.52rem;
  letter-spacing: 0.1rem;
}

body.ind-controller .captain-gauge-caption {
  color: #9c9f72;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  font-size: 0.56rem;
}

/* ── Pilot dials ──────────────────────────────────────────────────── */
body.ind-controller .pilot-dial,
body.ind-controller .pilot-wheel {
  background:
    radial-gradient(circle at 40% 30%, rgba(95, 120, 55, 0.1), rgba(6, 5, 2, 0.92) 60%),
    linear-gradient(180deg, rgba(18, 14, 6, 0.92), rgba(6, 5, 2, 0.98));
  border-color: rgba(62, 90, 40, 0.44);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.72), 0 4px 12px rgba(0, 0, 0, 0.58);
}

body.ind-controller .pilot-dial-needle,
body.ind-controller .pilot-wheel-needle {
  background: linear-gradient(180deg, rgba(150, 180, 90, 0.96), rgba(90, 105, 50, 0.58));
}

body.ind-controller .nautical-wheel {
  border-color: rgba(70, 95, 40, 0.44);
  background:
    radial-gradient(circle at 42% 32%, rgba(120, 145, 65, 0.16), rgba(9, 8, 4, 0.92) 58%),
    linear-gradient(180deg, rgba(28, 22, 12, 0.92), rgba(8, 7, 3, 0.98));
  box-shadow: inset 0 0 24px rgba(75, 98, 42, 0.12);
}

body.ind-controller .nautical-wheel-inner {
  border-color: rgba(120, 145, 68, 0.48);
}

body.ind-controller .nautical-wheel-spoke {
  background: linear-gradient(180deg, rgba(120, 145, 68, 0.92), rgba(70, 80, 40, 0.72));
}

body.ind-controller .slider-card header {
  color: #8f9c65;
}

body.ind-controller .arm-joint-tab.active {
  background: linear-gradient(135deg, rgba(120, 145, 68, 0.88), rgba(90, 110, 45, 0.8));
  color: #d5dda5;
  border-color: rgba(120, 145, 68, 0.58);
}

/* ── Sonar ────────────────────────────────────────────────────────── */
body.ind-controller .sonar-scan-viewport {
  border-color: rgba(45, 185, 110, 0.26);
  background:
    radial-gradient(circle at 50% 50%, rgba(20, 70, 35, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(5, 12, 7, 0.97), rgba(2, 5, 3, 0.99));
  box-shadow: inset 0 0 38px rgba(15, 70, 28, 0.09);
}

body.ind-controller .sonar-ping-button {
  letter-spacing: 0.2rem;
  border-radius: 3px;
}


@media (max-height: 760px) {
  body.ind-controller .controls-grid {
    max-height: calc(100dvh - var(--controller-role-bar-height) - 4.2rem);
  }

  body.ind-controller .sonar-control-card {
    gap: 0.3rem;
  }


  body.ind-controller #controllerMissionScreen .ctrl-mission-layout {
    padding: 0.45rem;
    gap: 0.5rem;
  }

  body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout {
    gap: 0.3rem;
  }

  body.ind-controller #controllerMissionScreen .controls-grid.pilot-controls-layout .control-card {
    padding: 0.6rem;
    gap: 0.35rem;
  }

  body.ind-controller #controllerMissionScreen .pilot-throttle-dial {
    width: min(100%, clamp(176px, 37vh, 300px));
  }

}

body.ind-controller .sonar-depth-dial-inner {
  background: #060402;
  border: none;
  box-shadow: inset 0 3px 16px rgba(0, 0, 0, 0.88);
}

body.ind-controller .sonar-depth-dial-inner strong { color: #b4be89; }
body.ind-controller .sonar-depth-dial-inner span   { color: #8f9c65; letter-spacing: 0.08rem; }
body.ind-controller .sonar-depth-caption           { color: #8f9c65; letter-spacing: 0.07rem; }

/* ── Arm camera ───────────────────────────────────────────────────── */
body.ind-controller .arm-camera-viewport {
  border-color: rgba(62, 90, 40, 0.28);
  background: linear-gradient(180deg, rgba(6, 5, 2, 0.96), rgba(3, 2, 1, 0.99));
  border-radius: 4px;
}

body.ind-controller .arm-camera-canvas {
  filter: saturate(0.28) contrast(1.22) brightness(0.80) sepia(0.56);
  image-rendering: pixelated;
}

body.ind-controller .arm-camera-crt-overlay {
  background: radial-gradient(ellipse at center, rgba(170, 180, 100, 0.10) 0%, rgba(26, 13, 4, 0.62) 66%, rgba(0, 0, 0, 0.88) 100%);
}

body.ind-controller .arm-camera-crt-scanlines {
  opacity: 0.92;
}

body.ind-controller .arm-camera-crt-noise {
  opacity: 0.52;
}

body.ind-controller .arm-camera-hud-item {
  border-color: rgba(70, 95, 38, 0.32);
  background: rgba(5, 4, 2, 0.5);
}

body.ind-controller .arm-camera-hud-value {
  color: #b4be89;
}

/* ── Captain map & checklist ──────────────────────────────────────── */
body.ind-controller .captain-map-canvas {
  border-color: rgba(45, 185, 110, 0.2);
  background: linear-gradient(180deg, rgba(3, 8, 5, 0.97), rgba(1, 4, 2, 0.99));
}

body.ind-controller .docking-hull-camera-viewport {
  position: relative;
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(123, 224, 191, 0.24);
  background: linear-gradient(180deg, rgba(8, 24, 35, 0.94), rgba(1, 8, 13, 0.98));
  box-shadow: inset 0 0 30px rgba(20, 90, 95, 0.12);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.ind-controller .docking-hull-camera-viewport.docking-range-ok {
  border-color: rgba(255, 94, 94, 0.9);
  box-shadow: inset 0 0 30px rgba(255, 80, 80, 0.25), 0 0 18px rgba(255, 94, 94, 0.55);
}

body.ind-controller .docking-hull-camera-viewport canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   Drone cards
   ══════════════════════════════════════════════════════════════════ */
.drone-card {
  background: linear-gradient(180deg, #171f12 0%, #0f140c 100%);
  border: 2px solid rgba(78, 95, 42, 0.55);
  border-top-color: rgba(110, 132, 62, 0.48);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    0 3px 12px rgba(0, 0, 0, 0.45);
}

/* Header bar */
.drone-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.42rem 0.75rem;
  background: linear-gradient(180deg, rgba(36, 46, 26, 0.88) 0%, rgba(18, 24, 14, 0.72) 100%);
  border-bottom: 1px solid rgba(90, 110, 52, 0.38);
}

.drone-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #b8c588;
  text-shadow: 0 0 6px rgba(100, 145, 65, 0.35);
}

.drone-card-status {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #9aa673;
  text-transform: uppercase;
  background: rgba(10, 7, 2, 0.5);
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  border: 1px solid rgba(80, 95, 42, 0.3);
}

/* Stats row */
.drone-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(65, 85, 35, 0.35);
}

.drone-stat {
  display: grid;
  justify-items: start;
  padding: 0.55rem 0.65rem;
  gap: 0.18rem;
  border-right: 1px solid rgba(65, 85, 35, 0.28);
}

.drone-stat:last-child {
  border-right: none;
}

.drone-stat-value {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 1.0rem;
  font-weight: 700;
  color: #d6e0a2;
  line-height: 1;
}

.drone-stat-label {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8d9b6a;
}

/* Battery icon using CSS */
.drone-stat-icon {
  display: block;
  width: 20px;
  height: 10px;
  position: relative;
  margin-bottom: 0.1rem;
}

.drone-stat-icon-battery {
  background: linear-gradient(90deg, #8b9d3f 0%, #b5d06c 100%);
  border-radius: 2px;
  border: 1px solid rgba(145, 180, 85, 0.6);
}

.drone-stat-icon-battery::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 5px;
  background: rgba(135, 165, 78, 0.7);
  border-radius: 0 1px 1px 0;
}

/* Cargo crate icon using SVG mask */
.drone-stat-icon-cargo {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='6' width='16' height='12' rx='1' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3Cline x1='2' y1='10' x2='18' y2='10' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='10' y1='6' x2='10' y2='18' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M7 3 L13 3 L14 6 L6 6 Z' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='6' width='16' height='12' rx='1' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3Cline x1='2' y1='10' x2='18' y2='10' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='10' y1='6' x2='10' y2='18' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M7 3 L13 3 L14 6 L6 6 Z' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #8c9f52;
  width: 18px;
  height: 18px;
}

/* Battery bar */
.drone-battery-bar {
  width: 100%;
  height: 4px;
  background: rgba(10, 7, 2, 0.7);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(75, 90, 38, 0.4);
}

.drone-battery-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6e8340 0%, #acd36d 60%, #d5e098 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Mode value — capitalize it */
.drone-stat-mode-value {
  font-size: 0.88rem;
  text-transform: capitalize;
  color: #9cb17b;
}

/* Action buttons */
.drone-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.6rem 0.65rem;
  background: rgba(8, 5, 2, 0.35);
}

.drone-action-btn {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.55rem 0.25rem;
  color: #b7c588;
  background: linear-gradient(180deg, rgba(26, 35, 20, 0.9) 0%, rgba(18, 22, 12, 0.95) 100%);
  border: 1px solid rgba(105, 130, 60, 0.5);
  border-top-color: rgba(120, 155, 70, 0.55);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(120, 155, 70, 0.08), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.drone-action-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(38, 50, 24, 0.92) 0%, rgba(26, 33, 18, 0.98) 100%);
  border-color: rgba(120, 155, 70, 0.72);
  color: #d3df9a;
}

.drone-action-btn:active:not(:disabled) {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
  filter: brightness(0.9);
}

.drone-action-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

body.ind-controller .captain-checklist li {
  border-color: rgba(70, 95, 38, 0.32);
  color: #8f9c65;
  background: rgba(5, 4, 2, 0.5);
}

body.ind-controller .captain-checklist li.complete {
  border-color: rgba(45, 135, 25, 0.58);
  color: #8cc35a;
  background: rgba(20, 50, 8, 0.2);
}

body.ind-controller .captain-role-assignment-row {
  border-color: rgba(70, 95, 38, 0.32);
  color: #8f9c65;
  background: rgba(5, 4, 2, 0.5);
}

body.ind-controller .captain-role-assignment-value {
  color: #b2c488;
}

/* ── Telemetry row ────────────────────────────────────────────────── */
body.ind-controller .telemetry-row {
  color: #8f9c65;
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════
  ROLE BAR — fixed compact icon strip + settings access
  ═══════════════════════════════════════════════════════════════════ */

.role-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
}

/* ── Always-visible icon strip ─────────────────────────────────── */
.role-bar-slots {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(70, 95, 40, 0.42);
}

body.ind-controller .role-bar-slots {
  background: linear-gradient(180deg, #15210d 0%, #10170b 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.role-bar-icons {
  display: flex;
  flex: 1;
  justify-content: center;
}

.role-bar-settings-button {
  width: 52px;
  min-height: 52px;
  border: none !important;
  border-left: 1px solid rgba(75, 95, 45, 0.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.role-bar-room-button {
  min-height: 30px;
  min-width: 180px;
  padding: 0 1.4rem;
  border: 1px solid rgba(110, 145, 70, 0.28) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(60, 80, 35, 0.18) 0%, rgba(30, 45, 22, 0.16) 100%);
  color: #edf1d2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  font-size: 0.95rem;
}

.role-bar-room-button:hover {
  filter: brightness(1.1);
}

.role-bar-event-log-button {
  min-height: 30px;
  min-width: 130px;
  margin: 0 0.5rem;
  padding: 0 1rem;
  border: 1px solid rgba(110, 145, 70, 0.28) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(35, 45, 22, 0.16) 0%, rgba(20, 30, 14, 0.18) 100%);
  color: #edf1d2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: 0.85rem;
  position: relative;
}

.role-bar-event-log-button:hover,
.role-bar-event-log-button.has-unread {
  filter: brightness(1.1);
}

.role-bar-event-log-button.flash {
  animation: eventLogFlash 1.1s ease-in-out;
}

.event-log-badge {
  min-width: 0.875rem;
  height: 0.875rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  transform: translate(25%, -25%);
  background: #9bad54;
  color: #0f1208;
  font-size: 0.375rem;
  font-weight: 700;
  padding: 0 0.175rem;
}

@keyframes eventLogFlash {
  0%, 100% { transform: scale(1); }
  25%, 75% { transform: scale(1.05); }
}

.role-bar-settings-button svg {
  width: 1.26rem;
  height: 1.26rem;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ind-controller .role-bar-settings-button {
  background: transparent;
  color: #99ac4e;
}

body.ind-controller .role-bar-settings-button:active {
  filter: brightness(1.25);
}

/* Per-screen visibility */
body:has(#controllerMissionScreen[hidden]) .role-bar-mission-section {
  display: none;
}

body:has(#controllerLobbyScreen[hidden]) .role-bar-lobby-section {
  display: none;
}

/* ── Individual role slot button ───────────────────────────────── */
.role-slot-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  min-height: 52px;
  padding: 0.35rem 0.2rem;
  border: none !important;
  border-right: 1px solid rgba(75, 95, 45, 0.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 80ms;
}

body.ind-controller .role-slot-button {
  background: linear-gradient(180deg, rgba(20, 26, 10, 0.08), rgba(13, 18, 9, 0.1));
  color: rgba(140, 165, 85, 0.58);
  border-right: 1px solid rgba(75, 95, 45, 0.28) !important;
}

body.ind-controller .role-slot-button:last-child {
  border-right: none !important;
}

body.ind-controller .role-slot-button .role-icon {
  width: 1.4rem;
  height: 1.4rem;
}

body.ind-controller .role-slot-button .role-slot-label {
  font-size: 0.5rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

body.ind-controller .role-slot-button.active {
  background: rgba(50, 100, 14, 0.16);
  color: #6acc28;
}

body.ind-controller .role-slot-button.taken {
  color: rgba(75, 95, 45, 0.3);
}

body.ind-controller .role-slot-button:active {
  filter: brightness(1.25);
}

.controller-settings-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 5, 2, 0.78);
}

.controller-event-log-panel {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 5, 2, 0.85);
  padding: 1rem;
}

.ctrl-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 5, 2, 0.85);
  padding: 1rem;
}

.ctrl-confirm-dialog[hidden] {
  display: none;
}

.ctrl-confirm-card {
  width: min(100%, 320px);
  background: rgba(18, 14, 8, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ctrl-confirm-message {
  margin: 0;
  color: #d1c5a4;
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
}

.ctrl-confirm-actions {
  display: flex;
  gap: 0.75rem;
}

.ctrl-confirm-btn {
  flex: 1;
  padding: 0.65rem 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: #d1c5a4;
}

.ctrl-confirm-btn-ok {
  background: rgba(180, 60, 40, 0.5);
  border-color: rgba(180, 60, 40, 0.7);
  color: #f0d8c0;
}

.controller-room-help-panel {
  position: fixed;
  inset: 0;
  z-index: 575;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 5, 2, 0.85);
  padding: 1rem;
}

.controller-room-help-panel:not([hidden]) {
  display: flex;
}

.controller-room-help-card {
  width: min(100%, 540px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  background: rgba(18, 14, 8, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.controller-room-help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.controller-room-help-header h2 {
  margin: 0;
}

.controller-room-help-header button {
  border: none;
  background: transparent;
  color: #d1c5a4;
  font-size: 1.5rem;
  cursor: pointer;
}

.controller-room-help-body {
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}

.controller-room-help-body p {
  margin: 0 0 0.75em;
  color: #d1c5a4;
  line-height: 1.65;
}

.controller-room-help-body p:last-child {
  margin-bottom: 0;
}

.controller-event-log-panel:not([hidden]) {
  display: flex;
}

.controller-event-log-card {
  width: min(100%, 720px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  background: rgba(18, 14, 8, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.controller-event-log-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.controller-event-log-header h2 {
  margin: 0;
}

.controller-event-log-body {
  max-height: calc(100vh - 164px);
  overflow: hidden;
}

.controller-event-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.5rem;
}

.controller-event-log-list li {
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  font-size: 0.87rem;
  line-height: 1.4;
  color: #f2e8d3;
}

.controller-event-log-card button {
  min-width: auto;
}

/* ── Tech Tree panel ─────────────────────────────────────── */
.controller-tech-tree-panel {
  position: fixed;
  inset: 52px 0 0;
  z-index: 575;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 5, 2, 0.85);
  padding: 1rem;
}

.controller-tech-tree-panel:not([hidden]) {
  display: flex;
}

.controller-tech-tree-card {
  width: min(100%, 720px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(10, 8, 4, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.controller-tech-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.controller-tech-tree-header h2 {
  margin: 0;
}

.controller-tech-tree-header button {
  min-width: auto;
}

.controller-tech-tree-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 0.25rem;
}

/* Section heading inside tech tree */
.ttr-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 1.1rem 0 0.45rem;
}

.ttr-section-title:first-child {
  margin-top: 0;
}

/* Raw material rarity pills */
.ttr-rarity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.ttr-raw {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.6rem;
  flex: 1 1 calc(50% - 0.4rem);
  min-width: 140px;
}

.ttr-raw.common   { border-left: 3px solid #66bb6a; }
.ttr-raw.uncommon { border-left: 3px solid #4fc3f7; }
.ttr-raw.rare     { border-left: 3px solid #ba68c8; }

.ttr-sym {
  font-family: "SF Mono", Monaco, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #4fc3f7;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ttr-raw-info {
  min-width: 0;
}

.ttr-raw-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e8dece;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttr-raw-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
  margin-top: 1px;
}

/* Refinement chains */
.ttr-chain {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
}

.ttr-chain-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 0.5rem;
}

.ttr-step {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
  line-height: 1.5;
}

.ttr-step:first-of-type {
  border-top: none;
}

.ttr-arrow {
  color: #4fc3f7;
  font-weight: 700;
  margin: 0 0.15rem;
}

.ttr-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.ttr-pill.raw      { background: rgba(26, 51, 40, 0.9); color: #aae0b8; }
.ttr-pill.refined  { background: rgba(42, 42, 74, 0.9); color: #c0c8f0; }
.ttr-pill.product  { background: rgba(58, 42, 16, 0.9); color: #ffd580; }
.ttr-pill.catalyst { background: rgba(60, 30, 0, 0.7);  color: #ffb74d; }

.ttr-plus {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: 0.75rem;
}

/* Loading / error state */
.ttr-loading {
  padding: 2rem 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.85rem;
}

.controller-room-map-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 8%, rgba(166, 202, 140, 0.22), transparent 36%),
    radial-gradient(circle at 82% 90%, rgba(40, 64, 40, 0.26), transparent 36%),
    linear-gradient(180deg, rgba(49, 68, 47, 0.9), rgba(70, 98, 62, 0.86));
  padding: 0.9rem;
  box-sizing: border-box;
}

.controller-room-map-panel:not([hidden]) {
  display: block;
}

.controller-room-map-card {
  --room-wire: rgba(205, 234, 180, 0.28);
  --room-wire-strong: rgba(235, 255, 201, 0.72);
  --room-bg: rgba(43, 63, 41, 0.92);
  --room-border-ok: rgba(136, 234, 143, 0.75);
  --room-border-warn: rgba(245, 189, 83, 0.82);
  --room-border-crit: rgba(242, 86, 74, 0.86);
  width: 100%;
  max-width: min(96vw, 1520px);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background:
    radial-gradient(circle at 50% -20%, rgba(219, 248, 185, 0.16), transparent 42%),
    repeating-linear-gradient(0deg, rgba(207, 235, 187, 0.1), rgba(207, 235, 187, 0.1) 1px, transparent 1px, transparent 7px),
    linear-gradient(180deg, rgba(51, 70, 43, 0.94), rgba(37, 54, 33, 0.95));
  border: 1px solid rgba(210, 241, 186, 0.36);
  border-radius: 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(239, 255, 227, 0.1), 0 20px 50px rgba(0, 0, 0, 0.42);
  padding: 0.8rem;
}

.controller-room-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 36px;
}

.controller-room-map-header h2 {
  margin: 0;
  font-size: 0.94rem;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
  color: #e2f2cf;
  font-family: 'OCR A Std', 'Lucida Console', 'Courier New', monospace;
}

.controller-room-map-header button {
  border: 1px solid rgba(212, 245, 190, 0.35);
  background: rgba(42, 62, 38, 0.9);
  color: #e6f7d5;
  padding: 0.35rem 0.6rem;
  border-radius: 0.55rem;
  font-family: 'OCR A Std', 'Lucida Console', 'Courier New', monospace;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Hosts the shared submarine cutaway SVG (.sub-map — styles injected by the
   submarineMapView component). Sizing/frame only. */
.controller-room-map-grid {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(10, 24, 32, 0.92), rgba(7, 18, 25, 0.95));
  box-shadow: inset 0 0 0 1px rgba(120, 180, 205, 0.14);
  overflow: hidden;
}

.controller-room-map-grid .sub-map {
  /* The cutaway's label/stroke proportions are tuned for phone + TV (cast)
     scale. On a desktop browser the card can grow to ~1520px, magnifying the
     map ~1.5×+ so text and hull lines read as chunky/"low-res". Cap the
     rendered width so it stays at a crisp, appropriately-sized scale.
     Phones (<640px) render well under this, so they're unaffected. */
  width: 100%;
  max-width: 920px;
  max-height: 100%;
}

@media screen and (max-width: 640px) {
  .controller-room-map-card {
    max-height: 100%;
    padding: 0.6rem;
    gap: 0.5rem;
  }

  .controller-room-map-header button {
    padding: 0.33rem 0.56rem;
  }

}

@media screen and (max-height: 700px) {
  .controller-room-map-panel {
    padding: 0.45rem;
  }

  .controller-room-map-card {
    gap: 0.45rem;
  }

  .controller-room-map-status {
    min-height: 1rem;
    font-size: 0.82rem;
  }
}

.controller-room-map-status {
  min-height: 1rem;
  color: #def5c9;
  font-size: 0.82rem;
  font-family: 'OCR A Std', 'Lucida Console', 'Courier New', monospace;
  letter-spacing: 0.04rem;
  text-transform: none;
  padding: 0.36rem 0.52rem;
  background: rgba(24, 35, 22, 0.62);
  border: 1px solid rgba(207, 235, 187, 0.2);
  border-radius: 0.48rem;
}

.controller-settings-card {
  border: 1px solid rgba(112, 80, 18, 0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, #1b150b 0%, #100d08 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.56);
  padding: 0.8rem;
}

.controller-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

body.ind-controller .controller-settings-header h2 {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: #d9a33b;
}

body.ind-controller .controller-settings-header button {
  min-height: 32px;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.1rem;
}

.controller-settings-grid {
  display: grid;
  gap: 0.45rem;
}

.controller-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid rgba(110, 76, 18, 0.26);
  border-radius: 7px;
  background: rgba(22, 16, 8, 0.55);
}

/* ── Graphics settings: device tabs + quality presets + advanced ── */
.controller-settings-graphics {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(110, 76, 18, 0.26);
  border-radius: 7px;
  background: rgba(22, 16, 8, 0.55);
}

.settings-graphics-label {
  color: #7f6422;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.settings-device-tabs {
  display: flex;
  gap: 0;
  border: 1px solid rgba(200, 163, 85, 0.3);
  border-radius: 7px;
  overflow: hidden;
}

.settings-device-tabs button {
  flex: 1;
  padding: 0.45rem 0.3rem;
  background: rgba(22, 16, 8, 0.4);
  border: none;
  border-right: 1px solid rgba(200, 163, 85, 0.2);
  color: #7f6422;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.settings-device-tabs button:last-child { border-right: none; }
.settings-device-tabs button.active {
  background: rgba(217, 163, 59, 0.22);
  color: #d8a136;
}

.settings-quality-row {
  display: flex;
  gap: 0.35rem;
}

.settings-quality-row button {
  flex: 1;
  padding: 0.4rem 0.2rem;
  background: rgba(22, 16, 8, 0.4);
  border: 1px solid rgba(110, 76, 18, 0.35);
  border-radius: 6px;
  color: #7f6422;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.settings-quality-row button.active {
  border-color: #d8a136;
  background: rgba(217, 163, 59, 0.22);
  color: #d8a136;
}

.settings-advanced summary {
  color: #7f6422;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  cursor: pointer;
  padding: 0.15rem 0;
}
.settings-advanced .controller-settings-row {
  margin-top: 0.4rem;
}

body.ind-controller .controller-settings-row span {
  color: #7f6422;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

body.ind-controller .controller-settings-row strong {
  color: #d8a136;
  font-size: 0.74rem;
  letter-spacing: 0.08rem;
}

.controller-cast-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 5, 2, 0.78);
  padding: 1.2rem;
}

.controller-cast-panel:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Scroll when the card (e.g. advanced settings expanded) is taller than the
     viewport. overflow + margin:auto on the card keeps it centered when short
     while staying fully reachable when tall. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.controller-cast-card {
  border: 1px solid rgba(112, 80, 18, 0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, #1b150b 0%, #100d08 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.56);
  padding: 1rem;
  min-width: 300px;
  max-width: 420px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.controller-cast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #d9a33b;
  font-size: 0.88rem;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
}

.controller-cast-header button {
  min-height: 32px;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.1rem;
}

/* Generic buttons used in cast panels (controller and app) */
.ctrl-btn {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  text-align: center;
  transition: filter 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ctrl-btn:active { filter: brightness(0.85); }
.ctrl-btn:disabled { opacity: 0.45; cursor: default; }

.ctrl-btn-primary {
  background: linear-gradient(160deg, #d9a33b 0%, #a06b10 100%);
  color: #1a0f00;
  box-shadow: 0 2px 8px rgba(217,163,59,0.25);
}

.ctrl-btn-secondary {
  background: rgba(30, 20, 8, 0.7);
  color: #c8a355;
  border: 1px solid rgba(200, 163, 85, 0.3) !important;
}

.cast-back-btn {
  background: none;
  border: none;
  color: #7f6422;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.1rem 0;
  letter-spacing: 0.04em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cast-back-btn:active { color: #c8a355; }

.controller-cast-status {
  font-size: 0.74rem;
  color: #7f9a5e;
  min-height: 1.2em;
  text-align: center;
}

.controller-quick-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 620;
  min-width: 148px;
  max-width: calc(100% - 1.4rem);
  text-align: center;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(166, 62, 24, 0.46);
  background: rgba(50, 14, 6, 0.92);
  color: #f2b08e;
  letter-spacing: 0.08rem;
  font-size: 0.66rem;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}

.controller-quick-toast.controller-quick-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.controller-mission-summary {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.controller-mission-summary[hidden] {
  display: none;
}

.controller-mission-summary-card {
  width: min(22rem, calc(100% - 2rem));
  padding: 1.2rem 1.25rem 1rem;
  background: rgba(8, 14, 22, 0.96);
  border: 1px solid rgba(123, 224, 191, 0.18);
  border-radius: 1rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.controller-mission-summary-reason {
  font-size: 0.95rem;
  font-weight: 700;
  color: #eef6fb;
}

.controller-mission-summary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #b0c8d8;
}

.controller-mission-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.controller-mission-summary-row strong {
  color: #eef6fb;
}

.controller-mission-summary-restart {
  margin-top: 0.25rem;
}

.controller-mission-summary-dismiss {
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
}

/* ── Mission summary chart ────────────────────────────────────────────── */
.controller-summary-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.controller-summary-chart {
  width: 100%;
  height: 120px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  display: block;
}

.controller-summary-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  font-size: 0.72rem;
}

.controller-summary-chart-legend span::before {
  content: '— ';
  font-weight: 700;
}

.cslegend-distance::before { color: #7be0bf; }
.cslegend-oxygen::before   { color: #7eb8f7; }
.cslegend-battery::before  { color: #f7d97e; }
.cslegend-fuel::before     { color: #f7a27e; }
.cslegend-temp::before     { color: #f77eb8; }

.cslegend-distance { color: #b0c8d8; }
.cslegend-oxygen   { color: #b0c8d8; }
.cslegend-battery  { color: #b0c8d8; }
.cslegend-fuel     { color: #b0c8d8; }
.cslegend-temp     { color: #b0c8d8; }

.controller-summary-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-size: 0.78rem;
  color: rgba(176, 200, 216, 0.45);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
}

.controller-fullscreen-prompt {
  position: fixed;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  z-index: 690;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100% - 1rem);
  padding: 0.42rem 0.5rem 0.42rem 0.7rem;
  border: 1px solid rgba(108, 142, 66, 0.44);
  border-radius: 8px;
  background: rgba(9, 16, 7, 0.94);
  color: #dce6b4;
  letter-spacing: 0.06rem;
  font-size: 0.66rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
}

body.ind-controller .controller-fullscreen-prompt button {
  min-height: 34px;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.64rem;
  letter-spacing: 0.08rem;
}

@media (orientation: portrait) and (max-width: 900px) {
  .controller-fullscreen-prompt {
    bottom: 0.4rem;
  }
}

.controller-hull-cracks {
  position: fixed;
  inset: 0;
  z-index: 650;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  background:
    linear-gradient(162deg, transparent 12%, rgba(255, 236, 210, 0.22) 12.6%, transparent 13.2%) 8% 14% / 34% 34% no-repeat,
    linear-gradient(186deg, transparent 18%, rgba(255, 230, 186, 0.2) 18.7%, transparent 19.3%) 12% 18% / 42% 42% no-repeat,
    linear-gradient(132deg, transparent 38%, rgba(255, 210, 160, 0.18) 38.7%, transparent 39.3%) 72% 12% / 28% 28% no-repeat,
    linear-gradient(118deg, transparent 26%, rgba(255, 215, 160, 0.18) 26.6%, transparent 27.2%) 75% 70% / 32% 32% no-repeat,
    radial-gradient(circle at 6% 10%, rgba(255, 120, 95, 0.25), transparent 26%),
    radial-gradient(circle at 94% 86%, rgba(255, 130, 90, 0.22), transparent 28%);
  mix-blend-mode: screen;
}

.controller-hull-cracks.critical {
  animation: controller-crack-flicker 900ms ease-in-out infinite;
}

@keyframes controller-crack-flicker {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

/* ── Lobby ready strip ─────────────────────────────────────────── */
.lobby-ready-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0;
}

body.ind-controller .lobby-ready-strip .muted {
  font-size: 0.78rem;
}

body.ind-admin .admin-shell {
  max-width: 1080px;
  gap: 1rem;
}

body.ind-admin .admin-header-panel,
body.ind-admin .admin-panel {
  width: 100%;
}

body.ind-admin .admin-controls-grid {
  display: grid;
  gap: 0.65rem;
}

body.ind-admin .admin-control-section-title {
  margin: 0.6rem 0 0.2rem;
  color: #f8cf58;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.ind-admin .admin-preview-viewport {
  width: 100%;
  height: 380px;
  max-height: 50vh;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(109, 181, 212, 0.3);
  background: radial-gradient(circle at 50% 35%, rgba(14, 57, 83, 0.78), rgba(4, 13, 23, 0.95));
  cursor: grab;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

body.ind-admin .admin-preview-canvas {
  flex: 1;
  display: block !important;
}

body.ind-admin .admin-preview-viewport:active {
  cursor: grabbing;
}

body.ind-dungeonmaster {
  font-size: 0.92rem;
}

body.ind-dungeonmaster .dungeonmaster-shell {
  max-width: 1240px;
  gap: 1rem;
}

body.ind-dungeonmaster .dungeonmaster-view-panel {
  position: relative;
  overflow: hidden;
  min-height: 68vh;
}

body.ind-dungeonmaster .dungeonmaster-viewport {
  width: 100%;
  height: min(74vh, 760px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(109, 181, 212, 0.25);
  background: radial-gradient(circle at 50% 20%, rgba(14, 57, 83, 0.78), rgba(4, 13, 23, 0.96));
  cursor: grab;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

body.ind-dungeonmaster .dungeonmaster-viewport:active {
  cursor: grabbing;
}

body.ind-dungeonmaster .dungeonmaster-metrics {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: min(360px, calc(100% - 2rem));
  display: grid;
  gap: 0.7rem;
  z-index: 20;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(109, 181, 212, 0.22);
  background: rgba(5, 18, 33, 0.88);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25);
}

body.ind-dungeonmaster .dungeonmaster-metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

body.ind-dungeonmaster .dungeonmaster-metrics-header button {
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem;
  min-width: 95px;
}

body.ind-dungeonmaster .dungeonmaster-metrics.collapsed .dungeonmaster-metrics-body {
  display: none;
}

body.ind-dungeonmaster .dungeonmaster-metrics h2 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b7f8ff;
}

body.ind-dungeonmaster .dungeonmaster-metrics .metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgba(8, 32, 52, 0.68);
  border: 1px solid rgba(109, 181, 212, 0.12);
}

body.ind-dungeonmaster .dungeonmaster-metrics .metric span:first-child {
  color: rgba(213, 237, 248, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.ind-dungeonmaster .dungeonmaster-metrics .metric span:last-child {
  color: #f4fbff;
  font-size: 1rem;
  font-weight: 700;
}

body.ind-dungeonmaster .dungeonmaster-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

body.ind-dungeonmaster .dungeonmaster-control-row input {
  min-width: 180px;
  flex: 1;
  max-width: 240px;
}

body.ind-dungeonmaster .dungeonmaster-controls-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

body.ind-dungeonmaster .dungeonmaster-setup {
  max-width: 720px;
}

body.ind-admin .admin-control-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 2fr) 72px;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(109, 181, 212, 0.22);
  background: rgba(5, 20, 33, 0.56);
}

body.ind-admin .admin-control-row span {
  color: rgba(203, 238, 255, 0.92);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

body.ind-admin .admin-control-row strong {
  justify-self: end;
  color: #7fd8ff;
  font-variant-numeric: tabular-nums;
}

body.ind-admin .admin-control-row input[type='range'] {
  width: 100%;
}

body.ind-admin .admin-control-row.toggle-row {
  grid-template-columns: minmax(220px, 1fr) auto;
}

body.ind-admin .admin-control-row input[type='checkbox'] {
  width: 1.1rem;
  height: 1.1rem;
  justify-self: end;
  accent-color: #7fd8ff;
}

body.ind-admin .admin-json-textarea {
  width: 100%;
  min-height: 280px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(109, 181, 212, 0.28);
  background: rgba(4, 13, 21, 0.74);
  color: #d8f4ff;
  padding: 0.8rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

body.ind-admin .admin-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.6rem;
}

body.ind-admin .admin-activity-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(109, 181, 212, 0.28);
  background: linear-gradient(180deg, rgba(8, 32, 52, 0.85), rgba(4, 14, 24, 0.85));
  box-shadow: inset 0 0 0 1px rgba(109, 181, 212, 0.05);
}

body.ind-admin .admin-activity-card header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(109, 181, 212, 0.18);
}

body.ind-admin .admin-activity-card header h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b7f8ff;
}

body.ind-admin .admin-activity-card header p {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.ind-admin .admin-metric-list {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

body.ind-admin .admin-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(5, 20, 33, 0.55);
  border: 1px solid rgba(109, 181, 212, 0.12);
}

body.ind-admin .admin-metric dt {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(203, 238, 255, 0.86);
}

body.ind-admin .admin-metric dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f4fbff;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 4ch;
}

body.ind-admin .admin-metric dd:empty::before,
body.ind-admin .admin-metric dd[data-empty='true']::before {
  content: '—';
  color: rgba(213, 237, 248, 0.45);
}

body.ind-admin .admin-shell code {
  font-size: 0.85em;
  padding: 0.05rem 0.3rem;
  border-radius: 6px;
  background: rgba(109, 181, 212, 0.12);
  color: #b7f8ff;
}

body.ind-admin #adminStatus[data-error='true'] {
  color: #ffad9a;
}

@media (max-width: 1080px) {
  body.ind-admin .admin-activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.ind-admin .admin-preview-viewport {
    height: 260px;
  }

  body.ind-admin .admin-control-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  body.ind-admin .admin-control-row strong {
    justify-self: start;
  }

  body.ind-admin .admin-control-row.toggle-row input[type='checkbox'] {
    justify-self: start;
  }

  body.ind-admin .admin-activity-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   HOST LOBBY / SETUP SCREEN — military sci-fi styles
   ================================================================ */

/* The setup screen panel overrides — full-width column layout */
#hostSetupScreen.panel {
  padding: 0;
  overflow: visible;
}

/* host-steps-bar background image strip */
.host-steps-bar {
  background-image: url('/media/images/sub%20in%20sice%20caves.png');
  background-size: cover;
  background-position: center 55%;
}
.host-steps-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 16, 0.88);
  z-index: 0;
}
.host-steps-bar {
  position: sticky;
  top: 0;
  z-index: 50;
}
.host-step,
.host-step-body {
  position: relative;
  z-index: 1;
}

/* Entry screen centered */
#hostEntryScreen.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 3rem 2rem;
}
.host-entry-inner {
  text-align: center;
  max-width: 480px;
}
.host-entry-inner h1 {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Left/right zone size reduction (30% smaller content) ── */
.ctrl-zone-left .ctrl-room-title,
.ctrl-zone-right .ctrl-room-title {
  font-size: 0.8rem;
}

.ctrl-zone-left .ctrl-room-integrity-label,
.ctrl-zone-right .ctrl-room-integrity-label {
  font-size: 0.54rem;
}

.ctrl-zone-left .ctrl-room-health-value,
.ctrl-zone-right .ctrl-room-health-value {
  font-size: 0.7rem;
  min-width: 2.2rem;
}

.ctrl-zone-left .ctrl-room-header,
.ctrl-zone-right .ctrl-room-header {
  padding: 0.7rem;
  gap: 0.55rem;
}

.ctrl-zone-left .ctrl-room-header-top,
.ctrl-zone-right .ctrl-room-header-top {
  gap: 0.5rem;
}

.ctrl-zone-left .ctrl-room-header-actions button,
.ctrl-zone-right .ctrl-room-header-actions button {
  min-height: 30px;
  font-size: 0.66rem;
  padding: 0.3rem 0.5rem;
}

.ctrl-zone-left .ctrl-btn-settings,
.ctrl-zone-right .ctrl-btn-settings,
.ctrl-zone-left .ctrl-btn-help,
.ctrl-zone-right .ctrl-btn-help {
  flex: 0 0 30px;
  width: 30px;
  font-size: 0.75rem;
}

.ctrl-zone-left .ctrl-room-header-actions,
.ctrl-zone-right .ctrl-room-header-actions {
  gap: 0.3rem;
}

.ctrl-zone-left .role-icon,
.ctrl-zone-right .role-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.ctrl-zone-left .ctrl-zone-left-top .control-card,
.ctrl-zone-left .ctrl-zone-left-top .ctrl-room-aux-card {
  font-size: 0.75rem;
}

.ctrl-zone-left .ctrl-zone-left-top,
.ctrl-zone-left .ctrl-zone-left-bottom {
  gap: 0.42rem;
}

.ctrl-zone-right .ctrl-zone-right-aux {
  gap: 0.42rem;
  padding: 0.28rem 0;
}

.ctrl-zone-right .ctrl-zone-right-aux .ctrl-room-aux-card button.primary {
  min-height: 34px;
  font-size: 0.72rem;
}

.ctrl-zone-right .ctrl-zone-right-aux .ballast-tank-btn-row button {
  font-size: 1.05rem;
  padding: 0;
  min-height: 52px;
  width: 100%;
  height: clamp(52px, 10vh, 100px);
}

.ctrl-zone-right .ctrl-zone-right-aux .ballast-tank-btn-panel-title {
  font-size: 0.7rem;
}

.ctrl-zone-right .controller-plusminus-label {
  font-size: 0.6rem;
}

.ctrl-zone-right .controller-plusminus-button {
  width: clamp(36px, 4.5vh, 52px);
  height: clamp(36px, 4.5vh, 52px);
  font-size: 1.4rem;
}

.ctrl-zone-right .controller-plusminus-button-row {
  gap: 0.4rem;
}

/* ── Middle zone: use the freed space ── */
.ctrl-zone-middle .control-card {
  padding: 1rem;
}

.ctrl-zone-middle .control-card .ctrl-room-card-title,
.ctrl-zone-middle .control-card h3 {
  font-size: 0.85rem;
}

/* ===========================================================================
   Engineer hull view — 3D hull, pump status panel, zone bottom-sheet popup
   =========================================================================== */

.engineer-hull-section {
  margin-top: 0.5rem;
}

/* --- Pump-assignment popup (separate overlay) --- */
.engineer-pump-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 12, 0.6);
}

.engineer-pump-popup {
  width: min(360px, 100%);
  padding: 1rem 1.1rem 1.2rem;
  border: 1px solid rgba(79, 195, 247, 0.28);
  border-radius: 14px;
  background: #0d1422;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.engineer-pump-popup-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e6f3ff;
  margin-bottom: 0.9rem;
}

.engineer-pump-popup-choices {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.engineer-pump-pick {
  padding: 0.6rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #e6e6e6;
  cursor: pointer;
  text-align: left;
}

.engineer-pump-pick-active {
  border-color: #4fc3f7;
  background: #1e3a5f;
  color: #cfe8ff;
}

.engineer-pump-pick-clear {
  margin-top: 0.2rem;
  text-align: center;
}

.engineer-pump-pick-clear:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.engineer-hull-popup-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(207, 232, 255, 0.8);
}

/* --- Pump status panel --- */
.engineer-pump-section {
  margin-top: 1rem;
}

.engineer-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(207, 232, 255, 0.55);
  margin-bottom: 0.5rem;
}

.engineer-pump-body {
  display: grid;
  gap: 0.5rem;
}

.pump-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.pump-unassign {
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: 1px solid rgba(239, 83, 80, 0.5);
  background: rgba(239, 83, 80, 0.12);
  color: #ef9a9a;
  cursor: pointer;
}

.pump-unassign:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pump-row-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #cfe8ff;
}

.pump-row-assigned {
  font-size: 0.78rem;
  color: var(--text, #e6e6e6);
}

.pump-row-unassigned {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.pump-drain-bar {
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.pump-drain-fill {
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: rgba(79, 195, 247, 0.25);
}

.pump-drain-active .pump-drain-fill {
  background: #4fc3f7;
  animation: pump-drain-pulse 1s ease-in-out infinite;
}

@keyframes pump-drain-pulse {
  0%   { width: 15%; opacity: 0.6; }
  50%  { width: 95%; opacity: 1; }
  100% { width: 15%; opacity: 0.6; }
}

.pump-toggle {
  min-width: 3rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.pump-toggle-active {
  background: #1e3a5f;
  border-color: #4fc3f7;
  color: #cfe8ff;
}

/* Storage patch badge (hull patch inventory group) */
.storage-badge-patch {
  background: rgba(79, 195, 247, 0.18);
  color: #4fc3f7;
}

.recipe-cost {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.2rem 0 0.4rem;
}

/* ============================================================
   Storage & Processing room — Tech & Build Directory
   (ported from tech_tree_v17.html, scoped under .tech-room)
   ============================================================ */
.tech-room {
  --abyss:#070d05; --panel:#0e1a0a; --panel2:#141f0e; --panel3:#0b1408; --line:#233520;
  --ink:#d6ddb8; --muted:#8a9470; --cyan:#9dc464; --cyandim:#1e3a12; --box:#3a6022;
  --common:#66bb6a; --uncommon:#4fc3f7; --rare:#ba68c8; --refined:#c0c8f0; --product:#ffd580;
  --good:#66bb6a; --bad:#ef5350; --heat:#ffb74d;
  --tr-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  display:flex; flex-direction:column; height:100%; min-height:0;
  font-size:12.5px; color:var(--ink); background:var(--abyss); overflow:hidden;
}
.tech-room *{box-sizing:border-box;}
.tech-room ::-webkit-scrollbar{width:8px;height:8px}
.tech-room ::-webkit-scrollbar-thumb{background:#1c2e14;border-radius:4px}

.tech-room .top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(180deg,#0e1a0a,#0a110a);border-bottom:1px solid var(--line);z-index:2;flex-shrink:0}
.tech-room .gauge{min-width:180px}
.tech-room .gauge .lab{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin-bottom:3px}
.tech-room .gauge .lab b{color:var(--ink);font-family:var(--tr-mono);font-weight:700}
.tech-room .bar{height:8px;background:#090f07;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.tech-room .bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3a6e28,var(--cyan));transition:width .25s}
.tech-room .bar.full>i{background:linear-gradient(90deg,#7a3030,var(--bad))}
.tech-room .sp{flex:1}
.tech-room .tbtn{font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--ink);background:var(--panel3);border:1px solid var(--line);border-radius:8px;padding:10px 15px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tech-room .tbtn:hover{border-color:var(--cyan);color:#d6edc0}
.tech-room .tbtn.on{background:var(--cyandim);border-color:var(--cyan);color:#d6edc0}
.tech-room .tbtn .cnt{font-family:var(--tr-mono);background:var(--cyan);color:var(--abyss);font-weight:800;border-radius:20px;padding:1px 7px;font-size:11px}

.tech-room .stage{flex:1;position:relative;overflow:hidden;min-height:0}
.tech-room .screen{position:absolute;inset:0;display:none}
.tech-room .screen.active{display:flex}
.tech-room .flist.tech-single{flex:1;width:100%}
.tech-room [data-screen-panel="detail"].active{display:block;height:100%}
.tech-room [data-screen-panel="crafting"].active{display:block;overflow-y:auto}

.tech-room .frail{width:230px;flex-shrink:0;border-right:1px solid var(--line);background:#0a110a;overflow-y:auto;padding:12px}
.tech-room .search{position:relative;margin-bottom:10px}
.tech-room .search input{width:100%;font-size:13px;color:var(--ink);background:#090f07;border:1px solid var(--line);border-radius:8px;padding:10px 10px 10px 32px;font-family:inherit}
.tech-room .search input:focus{outline:none;border-color:var(--cyan)}
.tech-room .search .ic{position:absolute;left:10px;top:10px;color:var(--muted);font-size:14px}
.tech-room .fsec{font-size:8.5px;font-weight:800;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase;margin:12px 4px 5px}
.tech-room .fbtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-size:12px;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:7px;padding:8px 9px;cursor:pointer;margin-bottom:2px}
.tech-room .fbtn:hover{background:var(--panel2)}
.tech-room .fbtn.on{background:var(--cyandim);border-color:var(--cyan);color:#d6edc0}
.tech-room .fbtn .cdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tech-room .fbtn .fc{margin-left:auto;font-family:var(--tr-mono);font-size:10px;color:var(--muted)}
.tech-room .flist{flex:1;overflow-y:auto;padding:14px 16px 30px}
.tech-room .listhead{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.tech-room .listhead h2{font-size:15px;font-weight:800}
.tech-room .listhead .n{font-family:var(--tr-mono);font-size:11px;color:var(--muted)}
.tech-room .emptymsg{font-size:12px;color:var(--muted);font-style:italic;padding:18px 4px}

.tech-room .panes{display:grid;grid-template-columns:20% 60% 20%;height:100%}
.tech-room .pane{overflow-y:auto;overflow-x:hidden;height:100%;padding:14px}
.tech-room .pane.left{border-right:1px solid var(--line);background:#0a110a}
.tech-room .pane.right{border-left:1px solid var(--line);background:#0a110a}
.tech-room .pane.center{padding:16px 20px 40px}
.tech-room .pane.detail-single{overflow-y:auto;overflow-x:hidden;height:100%;padding:16px 20px 40px;width:100%}
.tech-room .hint{font-size:11.5px;color:var(--muted);font-style:italic;line-height:1.5;padding:10px 4px}

.tech-room .entrow{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.tech-room .eqx{font-family:var(--tr-mono);color:var(--cyan);font-weight:700;min-width:30px;text-align:right;font-size:12.5px;flex-shrink:0}
.tech-room .ent{flex:1;min-width:0;display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;background:var(--panel2);border:1px solid var(--box);border-radius:9px;cursor:pointer;color:var(--ink);font-size:12.5px}
.tech-room .ent:hover{border-color:var(--cyan);background:#162710}
.tech-room .ent.empty{border-color:#263a1e;background:#0e1a0a}
.tech-room .ent.empty .enm{color:#9aaa80}
.tech-room .ent.empty .emeta{color:#5a6a48}
.tech-room .ent.short{border-color:var(--heat)}
.tech-room .ent.owned{border-color:var(--good)}
.tech-room .ent .edot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tech-room .ent .etext{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tech-room .ent>.enm{flex:1;min-width:0}
.tech-room .ent .enm{font-weight:700;line-height:1.25;overflow-wrap:break-word}
.tech-room .ent .emeta{font-size:9.5px;color:var(--muted);overflow-wrap:break-word}
.tech-room .ent .ect{font-family:var(--tr-mono);font-size:10px;color:var(--heat);white-space:nowrap}
.tech-room .ecargo{font-family:var(--tr-mono);font-weight:800;font-size:11px;padding:3px 8px;border-radius:7px;min-width:24px;text-align:center;flex-shrink:0}
.tech-room .ecargo.have{background:var(--cyan);color:var(--abyss)}
.tech-room .ecargo.short{background:var(--heat);color:var(--abyss)}
.tech-room .ecargo.ok{background:var(--good);color:var(--abyss)}
.tech-room .ent.title{border-width:2px;border-color:var(--cyan);padding:14px;cursor:default;margin-bottom:10px}
.tech-room .ent.title .edot{width:16px;height:16px}
.tech-room .ent.title .enm{font-size:21px;font-weight:800}
.tech-room .ent.title .ecargo{font-size:14px;padding:4px 11px;min-width:34px}

.tech-room .sec{font-size:9px;font-weight:800;letter-spacing:1.4px;color:var(--cyan);text-transform:uppercase;margin:16px 0 8px}
.tech-room .arow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;max-width:520px}
.tech-room .cbtn{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 8px;border:1px solid var(--box);border-radius:9px;background:var(--panel2);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.3px;cursor:pointer}
.tech-room .cbtn .ico{flex-shrink:0;display:block}
.tech-room .cbtn:hover{border-color:var(--cyan);background:#162710}
.tech-room .cbtn.primary{background:var(--cyan);color:var(--abyss);border-color:var(--cyan)}
.tech-room .cbtn.primary:hover{filter:brightness(1.08);background:var(--cyan)}
.tech-room .cbtn.auto.on{background:#10301f;border-color:var(--good);color:#bdf0cb}
.tech-room .cbtn.wares.on{background:#2e2410;border-color:var(--heat);color:var(--heat)}
.tech-room .cbar{display:flex;align-items:center;gap:11px;background:var(--panel2);border:1px solid var(--cyan);border-radius:9px;padding:9px 11px;margin-bottom:12px;max-width:520px}
.tech-room .cbar-main{flex:1;min-width:0}
.tech-room .cbar-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.tech-room .cbar-lbl{font-size:10.5px;color:var(--muted);letter-spacing:.4px}
.tech-room .cbar-time{font-family:var(--tr-mono);font-size:13px;font-weight:800;color:var(--cyan)}
.tech-room .cbar-x{flex-shrink:0;display:flex;background:none;border:1px solid #5a3030;border-radius:7px;padding:7px 9px;cursor:pointer}
.tech-room .cbar-x:hover{background:#2a1414}

.tech-room .dl{border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:560px}
.tech-room .dl .row{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid var(--line)}
.tech-room .dl .row:last-child{border-bottom:none}
.tech-room .dl .k{color:var(--muted);min-width:104px;flex-shrink:0;font-size:11.5px}
.tech-room .dl .v{color:var(--ink);flex:1;font-size:12px;line-height:1.4}

.tech-room .craftwrap{max-width:780px;margin:0 auto;padding:18px 20px 40px}
.tech-room .qsec{font-size:9px;font-weight:800;letter-spacing:1.4px;color:var(--cyan);text-transform:uppercase;margin:8px 0 10px}
.tech-room .qjob{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
.tech-room .qjob:hover{border-color:var(--cyan)}
.tech-room .qjob.active{border-color:var(--cyan)}
.tech-room .qbody{flex:1;min-width:0}
.tech-room .qn{font-weight:700;font-size:13px}
.tech-room .qmeta{font-size:9.5px;color:var(--muted);margin-top:2px}
.tech-room .qprog{height:5px;background:#090f07;border-radius:3px;overflow:hidden;margin-top:7px}
.tech-room .qprog>i{display:block;height:100%;background:var(--cyan);width:0}
.tech-room .qright{display:flex;align-items:center;gap:11px;flex-shrink:0}
.tech-room .qtime{font-family:var(--tr-mono);font-size:14px;color:var(--cyan);font-weight:800}
.tech-room .qx{font-size:13px;color:var(--bad);background:none;border:1px solid #5a3030;border-radius:6px;padding:4px 9px;cursor:pointer}
.tech-room .qx:hover{background:#2a1414}

/* Filter rail (lower-left zone) + nav buttons (lower-right zone). These live in
   the controller chrome OUTSIDE .tech-room, so they are not scoped under it. */
.tech-rail{display:flex;flex-direction:column;gap:3px}
.tech-rail-sec{font-size:8.5px;font-weight:800;letter-spacing:1.3px;color:#8a9470;text-transform:uppercase;margin:8px 2px 3px}
.tech-rail-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-size:12px;color:#d6ddb8;background:transparent;border:1px solid transparent;border-radius:7px;padding:8px 9px;cursor:pointer}
.tech-rail-btn>span:first-child{flex:1}
.tech-rail-btn:hover{background:#141f0e}
.tech-rail-btn.on{background:#1e3a12;border-color:#9dc464;color:#d6edc0}
.tech-rail-count{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:#8a9470}
.tech-rail-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;border:1px solid #3a5028;background:#141f0e;transition:background .15s,border-color .15s}
.tech-rail-overlay-row{display:flex;flex-direction:column;gap:6px}
.tech-rail-overlay{width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;flex-shrink:0;flex-direction:column;justify-content:center;padding:0;gap:3px}
.tech-rail-overlay>span:last-child{font-size:8px;line-height:1;text-align:center;white-space:normal;flex:unset}
.tech-rail-overlay.on .tech-rail-dot{background:#66bb6a;border-color:#66bb6a}

.tech-nav{display:flex;flex-direction:column;gap:8px}
.tech-nav-btn{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:.4px;color:#d6ddb8;background:#0b1408;border:1px solid #233520;border-radius:9px;padding:12px 14px;cursor:pointer}
.tech-nav-btn:hover{border-color:#9dc464;color:#d6edc0}
.tech-nav-btn.on{background:#1e3a12;border-color:#9dc464;color:#d6edc0}
.tech-nav-count{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;background:#9dc464;color:#070d05;font-weight:800;border-radius:20px;padding:1px 8px;font-size:11px}

/* transient toast shown at the top of the controller screen on craft actions */
.tech-toast{position:fixed;top:18px;left:50%;transform:translate(-50%,-14px);z-index:100000;pointer-events:none;font-size:13px;font-weight:800;letter-spacing:.4px;color:#d6edc0;background:rgba(11,20,8,.94);border:1px solid #9dc464;border-radius:10px;padding:10px 18px;box-shadow:0 6px 22px rgba(0,0,0,.45);opacity:0;transition:opacity .18s ease-out,transform .18s ease-out}
.tech-toast.show{opacity:1;transform:translate(-50%,0)}
.tech-toast.warn{color:#ffd2cc;border-color:#ef5350}

/* phone: keep the triptych horizontal (game is landscape), just scale down */
@media (max-width:900px){
  .tech-room{font-size:12px}
  .tech-room .panes{grid-template-columns:24% 52% 24%}
  .tech-room .pane{padding:10px}
  .tech-room .pane.center{padding:12px 14px 28px}
  .tech-room .ent{padding:8px 9px;gap:7px}
  .tech-room .eqx{min-width:20px;font-size:11.5px}
  .tech-room .ent.title{padding:11px}
  .tech-room .ent.title .enm{font-size:18px}
  .tech-room .ent.title .edot{width:14px;height:14px}
  .tech-room .ecargo{min-width:22px;padding:2px 6px}
  .tech-room .sec{margin:12px 0 7px}
  .tech-room .arow{gap:7px}
  .tech-room .cbtn{padding:10px 5px;font-size:10.5px;gap:5px}
  .tech-room .frail{width:200px}
}

/* ---------------------------------------------------------------------------
   Power overhaul: engine LOX boost, battery room power list, power-off overlay
   --------------------------------------------------------------------------- */
.engine-lox-readout {
  font-family: 'OCR A Std', 'Lucida Console', monospace;
  font-size: 0.8rem;
  color: rgba(124, 255, 118, 0.85);
  margin-top: 0.4rem;
}
.engine-lox-boost-button.is-active {
  background: linear-gradient(135deg, #1f9d55, #7cff76);
  color: #04140a;
  font-weight: 700;
}

.battery-readout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.battery-net-positive { color: #38ff8e; }
.battery-net-negative { color: #ff7a5b; }

/* Battery room fills the middle zone: card stretches, list scrolls within it. */
body.ind-controller #controllerMissionScreen .controls-grid.battery-controls-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
body.ind-controller #controllerMissionScreen .controls-grid.battery-controls-layout .ctrl-room-main-card {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.battery-room-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.battery-room-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  /* Don't let the scroll container shrink rows — otherwise an expanded row's
     controls get clipped. The list (middle section) scrolls instead. */
  flex: 0 0 auto;
}
.battery-room-row.is-expanded {
  border-color: rgba(120, 233, 150, 0.3);
  background: rgba(255, 255, 255, 0.05);
}
.battery-room-row-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.battery-room-expand-icon {
  font-family: 'OCR A Std', 'Lucida Console', monospace;
  font-weight: 700;
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
  color: rgba(120, 233, 150, 0.9);
}
.battery-room-row-name { flex: 1; font-weight: 600; }
.battery-room-row-mw {
  font-family: 'OCR A Std', 'Lucida Console', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 4.5rem;
  text-align: right;
}
.battery-room-row-mw.battery-room-mw-off { color: #ff7a5b; font-weight: 700; }

.battery-room-row-body {
  padding: 0 0.6rem 0.6rem;
}
.battery-room-components {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.1rem 0 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  font-family: 'OCR A Std', 'Lucida Console', monospace;
  font-size: 0.74rem;
}
.battery-room-component {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.battery-room-component-label { color: rgba(220, 235, 225, 0.85); }
.battery-room-component-mw { color: rgba(150, 220, 170, 0.95); }
.battery-room-component-idle { color: var(--muted); justify-content: flex-start; }
.battery-room-power-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.battery-room-power-label { flex: 1; font-size: 0.85rem; color: rgba(220, 235, 225, 0.85); }
.battery-room-power-toggle {
  min-width: 3.2rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.battery-room-power-toggle.battery-room-on { background: #1f9d55; color: #04140a; }
.battery-room-power-toggle.battery-room-off { background: #b3402f; color: #fff; }
.battery-room-auto-toggle { margin-top: 0.45rem; width: 100%; }
.battery-room-auto-toggle.is-active {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #02121f;
}
.battery-room-thresholds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.room-power-off-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(58, 6, 6, 0.82), rgba(20, 2, 2, 0.9));
  backdrop-filter: blur(2px);
}
.room-power-off-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: 'OCR A Std', 'Lucida Console', monospace;
  text-align: center;
}
.room-power-off-overlay-title {
  font-size: 2.2rem;
  letter-spacing: 0.3rem;
  color: #ff5b50;
  animation: engineAlertFlash 1.4s ease-in-out infinite;
}
.room-power-off-overlay-sub {
  font-size: 0.95rem;
  letter-spacing: 0.1rem;
  color: rgba(255, 200, 195, 0.85);
}
body.ind-controller .room-power-off-overlay-back {
  margin-top: 1.1rem;
  padding: 0.7rem 1.6rem;
  font-family: 'OCR A Std', 'Lucida Console', monospace;
  font-size: 1rem;
  letter-spacing: 0.12rem;
  color: #ffe6e2;
  background: rgba(255, 91, 80, 0.16);
  border: 1px solid rgba(255, 91, 80, 0.7);
  border-radius: 10px;
  cursor: pointer;
}
body.ind-controller .room-power-off-overlay-back:active {
  background: rgba(255, 91, 80, 0.32);
}

/* ── Room map view toggle (submarine / base) ─────────────────────────────── */
.room-map-view-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
}

.room-map-view-tabs[hidden] {
  display: none;
}

.room-map-view-tab {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-align: center;
  color: #d6ddb8;
  background: #0b1408;
  border: 1px solid #233520;
  border-radius: 8px;
  cursor: pointer;
}

.room-map-view-tab:hover {
  border-color: #9dc464;
  color: #d6edc0;
}

.room-map-view-tab.active {
  background: #1e3a12;
  border-color: #9dc464;
  color: #d6edc0;
}

/* ── Facility room panels ────────────────────────────────────────────────── */
.facility-room-header {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #d6edc0;
  margin-bottom: 8px;
}

.facility-credit-bar {
  font-size: 13px;
  font-weight: 700;
  color: #9dc464;
  background: #0d1a0a;
  border: 1px solid #233520;
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.facility-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 40px 24px;
  color: #7a8870;
}

.facility-placeholder-icon {
  font-size: 2.4rem;
  opacity: 0.5;
}

.facility-placeholder-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aab88;
}

.facility-placeholder-body {
  font-size: 12px;
  line-height: 1.6;
  max-width: 220px;
  color: #6a7860;
}

/* ── Upgrade list ────────────────────────────────────────────────────────── */
.facility-upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.facility-category-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #7a9c6a;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 2px;
}

.facility-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #0d1a0a;
  border: 1px solid #1c2e18;
  border-radius: 8px;
  padding: 10px 12px;
}

.facility-item-row.owned {
  opacity: 0.55;
}

.facility-item-info {
  flex: 1;
  min-width: 0;
}

.facility-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #d6ddb8;
}

.facility-item-desc {
  font-size: 11px;
  color: #7a8870;
  margin-top: 2px;
}

.facility-item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.facility-price {
  font-size: 11px;
  font-weight: 700;
  color: #9dc464;
}

.facility-price.unaffordable {
  color: #a05050;
}

.facility-owned-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #5a8a4a;
}

.facility-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  background: #1c2e18;
  color: #7a9c6a;
}

.facility-tier-badge.tier-2 {
  background: #1a2d40;
  color: #6aa0cc;
}

.facility-tier-badge.tier-3 {
  background: #2d1a40;
  color: #aa6acc;
}

/* ── Shop ────────────────────────────────────────────────────────────────── */
.facility-shop-section {
  margin-bottom: 12px;
}

.facility-section-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #7a9c6a;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.facility-shop-row {
  gap: 8px;
}

.facility-buy-btn,
.facility-sell-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid;
}

.facility-buy-btn {
  background: #1a3a12;
  border-color: #5a8a3a;
  color: #c0e0a0;
}

.facility-buy-btn:disabled,
.facility-sell-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.facility-sell-btn {
  background: #1a2d40;
  border-color: #3a6a90;
  color: #90c0e0;
}

.facility-qty-btn {
  font-size: 14px;
  font-weight: 700;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid #2e4a2a;
  background: #0d1a0a;
  color: #d6ddb8;
  cursor: pointer;
  line-height: 1;
}

.facility-qty-display {
  font-size: 13px;
  font-weight: 700;
  color: #d6ddb8;
  min-width: 20px;
  text-align: center;
}

/* ── Repair room ─────────────────────────────────────────────────────────── */
.facility-repair-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.facility-repair-divider {
  height: 1px;
  background: #1c2e18;
  margin: 6px 0;
}

.facility-hull-bar-wrap {
  width: 100%;
  height: 6px;
  background: #0b1408;
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}

.facility-hull-bar {
  height: 100%;
  background: #5a9c3a;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.facility-hull-bar.damaged {
  background: #c0a020;
}

.facility-hull-bar.critical {
  background: #c04020;
}