/* styles.css — Space Vector v4 */

:root {
  --bg-dark:       #040914;
  --bg-panel:      #0b1422;
  --bg-card:       #0e1a2e;
  --bg-cell:       #09101a;
  --bg-cell-alt:   #0d1623;
  --border:        #193050;
  --border-dim:    #0e1e30;
  --text:          #ccdaf8;
  --text-dim:      #5a7a9a;
  --text-muted:    #2a3e56;
  --accent:        #00d0ff;
  --p1:            #4a9eff;
  --p1-bg:         rgba(74,158,255,0.13);
  --p2:            #ff6644;
  --p2-bg:         rgba(255,102,68,0.13);
  --asteroid:      #7e8794;
  --hl-move:       rgba(0,204,255,0.18);
  --hl-range:      rgba(255,50,50,0.12);
  --hl-attack:     rgba(255,55,55,0.38);
  --hl-attack-dim: rgba(255,140,0,0.11);
  --hl-deploy:     rgba(80,255,130,0.13);
  --hl-dest:       rgba(255,210,40,0.22);
  --selected-glow: #ffcc00;
  --green:         #44ee88;
  --red:           #ff4455;
  --yellow:        #ffcc44;
  --purple:        #cc88ff;
  --orange:        #ff9944;
  --cp-color:      #33ffcc;
  --wreck-color:   #d5b28a;
  --wreck-accent:  rgba(120, 234, 255, 0.92);
  --btn-bg:        #0e1e30;
  --btn-hover:     #162a42;
  --btn-active:    #1a3858;
  --btn-danger:    #280e0e;
  --btn-success:   #0c2518;
  --btn-confirm:   #0c2033;
  --board-cell-size: 56px;
  --ship-marker-size: 48px;
  --ship-neon-core: rgba(245, 252, 255, 0.98);
  --ship-backplate: rgba(4, 10, 18, 0.78);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.4;
  background:
    radial-gradient(circle at 18% 16%, rgba(76, 110, 255, 0.12), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(255, 112, 92, 0.1), transparent 26%),
    radial-gradient(circle at 54% 72%, rgba(84, 224, 205, 0.08), transparent 24%),
    linear-gradient(180deg, #040914 0%, #050a15 48%, #03070f 100%);
}

/* ════════════════════════════════════════
   SCREEN SYSTEM
════════════════════════════════════════ */
.screen {
  display: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(76, 110, 255, 0.1), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(255, 112, 92, 0.09), transparent 26%),
    radial-gradient(circle at 54% 72%, rgba(84, 224, 205, 0.07), transparent 24%),
    linear-gradient(180deg, #040914 0%, #050a15 48%, #03070f 100%);
  color: var(--text);
  min-height: 100vh;
}
.screen.active { display: block; }

/* ════════════════════════════════════════
   HOME SCREEN
════════════════════════════════════════ */
#screen-home {
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

#screen-home.active { display: flex; }

.home-wrap {
  max-width: 1080px;
  width: min(92%, 1080px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

.home-header { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.home-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-title {
  font-size: 42px;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 6px;
}

.logo-star { color: var(--accent); font-size: 24px; opacity: 0.6; }

.logo-sub {
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.home-intro { max-width: 760px; }
.home-intro p { color: var(--text-dim); font-size: 14px; line-height: 1.7; margin-bottom: 20px; }

.home-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}

.feature-item {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.fi-icon { color: var(--accent); flex-shrink: 0; }

.home-showcase {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}

.home-showcase-card {
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 82% 16%, rgba(0, 208, 255, 0.08), transparent 20%),
    radial-gradient(circle at 18% 82%, rgba(255, 116, 84, 0.07), transparent 20%),
    linear-gradient(180deg, rgba(12, 21, 36, 0.95), rgba(7, 14, 24, 0.98));
  border-radius: 10px;
  padding: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.hero-card-label {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-board-grid {
  position: relative;
  min-height: 240px;
  border: 1px solid rgba(34, 58, 88, 0.6);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 24%, rgba(88, 126, 255, 0.16), transparent 20%),
    radial-gradient(circle at 78% 76%, rgba(255, 120, 84, 0.14), transparent 22%),
    linear-gradient(180deg, rgba(6, 12, 22, 0.96), rgba(4, 9, 16, 0.98));
}

.hero-board-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 48, 78, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 48, 78, 0.45) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.35;
}

.hero-orbit {
  position: absolute;
  border: 1px solid rgba(0, 208, 255, 0.28);
  border-radius: 999px;
}

.orbit-a {
  inset: 26px 62px 34px 58px;
}

.orbit-b {
  inset: 58px 110px 72px 108px;
  border-color: rgba(255, 196, 68, 0.24);
}

.hero-token,
.hero-node {
  position: absolute;
  border-radius: 999px;
}

.hero-token {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.05),
    0 0 18px rgba(0,0,0,0.22);
}

.hero-token::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid currentColor;
  border-radius: 14px 14px 18px 18px;
  opacity: 0.85;
}

.hero-token-p1 {
  color: var(--accent);
  background: rgba(0, 208, 255, 0.08);
}

.hero-token-p2 {
  color: #ff8f72;
  background: rgba(255, 110, 90, 0.08);
}

.token-frigate { left: 72px; top: 56px; }
.token-interceptor { left: 150px; bottom: 42px; width: 36px; height: 36px; }
.token-dread { right: 86px; top: 44px; width: 56px; height: 56px; }
.token-carrier { right: 140px; bottom: 48px; width: 48px; height: 48px; }

.hero-node {
  box-shadow: 0 0 18px currentColor;
}

.hero-node-relay {
  left: 46%;
  top: 41%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--yellow);
  color: rgba(255, 204, 68, 0.65);
}

.hero-node-mine {
  left: 26%;
  bottom: 30px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--green);
  color: rgba(68, 238, 136, 0.55);
}

.hero-node-nebula {
  right: 28%;
  top: 34%;
  width: 52px;
  height: 52px;
  border-radius: 40% 60% 54% 46%;
  background: radial-gradient(circle at 32% 36%, rgba(188, 126, 255, 0.42), rgba(74, 214, 255, 0.1) 66%, transparent 74%);
  box-shadow: none;
}

.hero-brief-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
}

.hero-brief-title {
  color: var(--accent);
  font-size: 24px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.hero-brief-body {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
}

.hero-brief-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.hero-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 208, 255, 0.2);
  background: rgba(0, 208, 255, 0.06);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.home-cta { display: flex; gap: 14px; }

.cta-primary {
  background: var(--accent);
  color: var(--bg-dark);
  border: none;
  padding: 12px 36px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 1px;
  transition: opacity 0.15s;
  display: inline-block;
  width: auto;
  text-align: center;
}
.cta-primary:hover { opacity: 0.85; }

.cta-secondary {
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 24px;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  display: inline-block;
  width: auto;
  text-align: center;
}
.cta-secondary:hover { background: var(--btn-hover); }
.cta-secondary.sm { padding: 6px 14px; font-size: 11px; }

.home-footer { color: var(--text-muted); font-size: 10px; }

@media (max-width: 860px) {
  .home-wrap {
    width: 94%;
    gap: 28px;
  }

  .home-showcase,
  .home-feature-list {
    grid-template-columns: 1fr;
  }

  .hero-board-grid {
    min-height: 210px;
  }
}

/* ════════════════════════════════════════
   HOW TO PLAY SCREEN
════════════════════════════════════════ */
#screen-howto { overflow-y: auto; }

.howto-wrap { max-width: 820px; margin: 0 auto; padding: 30px 24px 60px; }

.howto-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.howto-title { font-size: 22px; color: var(--accent); letter-spacing: 3px; }

.howto-body { display: flex; flex-direction: column; gap: 28px; }

.howto-tabbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-dim);
  background:
    linear-gradient(180deg, rgba(11,20,34,0.94), rgba(8,15,26,0.94));
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.howto-tab {
  background: rgba(10, 22, 36, 0.88);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.howto-tab:hover {
  background: rgba(16, 33, 52, 0.94);
  color: var(--text);
}

.howto-tab.active {
  color: var(--accent);
  border-color: rgba(0, 208, 255, 0.35);
  background:
    linear-gradient(180deg, rgba(0, 208, 255, 0.14), rgba(8, 24, 38, 0.94));
  box-shadow:
    0 0 0 1px rgba(0, 208, 255, 0.08),
    inset 0 0 18px rgba(0, 208, 255, 0.08);
}

.howto-panels {
  display: flex;
  flex-direction: column;
}

.howto-panel {
  display: none;
  gap: 28px;
  padding: 18px;
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  background:
    radial-gradient(circle at 86% 14%, rgba(0, 208, 255, 0.05), transparent 18%),
    radial-gradient(circle at 14% 84%, rgba(255, 120, 90, 0.04), transparent 18%),
    linear-gradient(180deg, rgba(10,18,31,0.94), rgba(7,13,24,0.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
}

.howto-panel.active {
  display: flex;
  flex-direction: column;
}

.howto-section h2 {
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-dim);
}

.howto-section h3 { font-size: 12px; }

.howto-section p { color: var(--text-dim); font-size: 12px; line-height: 1.7; }

.howto-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.howto-table th {
  background: var(--bg-card);
  color: var(--text-dim);
  padding: 6px 10px;
  text-align: left;
  border: 1px solid var(--border-dim);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.howto-table td {
  padding: 6px 10px;
  border: 1px solid var(--border-dim);
  color: var(--text);
  vertical-align: top;
}

.howto-table tr:nth-child(even) td { background: var(--bg-card); }

@media (max-width: 760px) {
  .howto-wrap {
    padding: 20px 14px 42px;
  }

  .howto-topbar {
    margin-bottom: 18px;
  }

  .howto-tabbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
  }

  .howto-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .howto-panel {
    padding: 14px;
  }
}

/* ════════════════════════════════════════
   LOBBY SCREEN
════════════════════════════════════════ */
#screen-lobby { overflow-y: auto; }

.lobby-wrap { max-width: 760px; margin: 0 auto; padding: 30px 24px 60px; }

.lobby-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.lobby-title { font-size: 22px; color: var(--accent); letter-spacing: 3px; }

.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.lobby-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby-card-full { grid-column: 1 / -1; }

.lobby-card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.lobby-card-title.p1 { color: var(--p1); }
.lobby-card-title.p2 { color: var(--p2); }

.coming-soon-badge {
  background: #2a1a00;
  color: var(--yellow);
  border: 1px solid #4a3000;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
}

.lobby-label { font-size: 10px; color: var(--text-dim); margin-bottom: 2px; }

.lobby-input {
  background: #06101e;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 2px;
  width: 100%;
}

.lobby-input:focus { outline: none; border-color: var(--accent); }
.lobby-input:disabled { opacity: 0.4; }

.opponent-toggle { display: flex; flex-direction: column; gap: 6px; }

.toggle-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
}

.toggle-opt input[type="radio"] { accent-color: var(--accent); }

.diff-group { display: flex; gap: 6px; }
.ai-style-group { flex-wrap: wrap; }
.ai-style-group .diff-btn { flex: 1 1 calc(20% - 6px); min-width: 92px; }

.diff-btn {
  flex: 1;
  text-align: center;
  padding: 6px;
  font-size: 11px;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  border-radius: 2px;
  display: inline-block;
  width: auto;
  transition: background 0.12s;
}

.diff-btn:hover { background: var(--btn-hover); color: var(--text); }
.diff-btn.active { background: var(--btn-active); border-color: var(--accent); color: var(--accent); }

.diff-descriptions { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

.room-section {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.room-half { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.room-divider {
  padding-top: 28px;
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.room-btn {
  background: var(--btn-bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  border-radius: 2px;
  display: inline-block;
  width: auto;
}

.room-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.room-join-row { display: flex; gap: 6px; }

.room-code-display {
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 3px;
  min-height: 24px;
}

.room-code-input {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lobby-room-error {
  border: 1px solid rgba(255, 110, 90, 0.35);
  background: rgba(255, 90, 60, 0.08);
  color: #ffb4a7;
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 11px;
}

.waiting-room-panel {
  border: 1px solid var(--border);
  background: rgba(6,16,30,0.75);
  border-radius: 4px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.waiting-room-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.waiting-room-title {
  color: var(--accent);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
}

.waiting-room-status {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.waiting-room-code-wrap {
  text-align: right;
  min-width: 140px;
}

.waiting-room-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.waiting-slot {
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.waiting-slot.host { box-shadow: inset 0 0 0 1px rgba(74,158,255,0.12); }
.waiting-slot.guest { box-shadow: inset 0 0 0 1px rgba(255,102,68,0.12); }

.waiting-slot-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.waiting-slot-name {
  font-size: 15px;
  font-weight: bold;
  color: var(--text);
}

.waiting-slot-connection {
  font-size: 11px;
  color: var(--text-dim);
}

.waiting-slot-connection.connected {
  color: var(--green);
}

.waiting-slot-connection.disconnected {
  color: #ff8b6f;
}

.waiting-slot-ready {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.waiting-slot-ready.ready {
  color: var(--green);
  border-color: rgba(68, 238, 136, 0.45);
  background: rgba(68, 238, 136, 0.08);
}

.waiting-slot-ready.not-ready {
  color: var(--yellow);
  border-color: rgba(255, 204, 68, 0.35);
  background: rgba(255, 204, 68, 0.07);
}

.waiting-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.waiting-action-btn {
  min-width: 132px;
}

.waiting-room-feedback {
  min-height: 16px;
  font-size: 11px;
  color: var(--text-dim);
}

.waiting-room-feedback.error {
  color: #ffb4a7;
}

.waiting-room-feedback.success {
  color: var(--green);
}

.waiting-room-handoff {
  border: 1px solid rgba(0, 208, 255, 0.28);
  background: rgba(0, 208, 255, 0.06);
  border-radius: 4px;
  padding: 12px;
}

.waiting-room-handoff-title {
  color: var(--accent);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.waiting-room-handoff-body {
  font-size: 11px;
  color: var(--text);
  line-height: 1.6;
}

.lobby-note { font-size: 10px; color: var(--text-muted); margin-top: 6px; }

.lobby-actions { display: flex; justify-content: center; padding-top: 10px; }

.mission-preview-card {
  gap: 8px;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 208, 255, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(10,18,31,0.94), rgba(7,13,24,0.98));
}

.mission-preview-title {
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 1px;
}

.mission-preview-meta {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.mission-preview-body {
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
}

.mission-preview-notes {
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .room-section,
  .waiting-room-header {
    flex-direction: column;
  }

  .waiting-room-code-wrap {
    text-align: left;
    min-width: 0;
  }

  .waiting-room-slots {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════
   GAME SCREEN
════════════════════════════════════════ */
#screen-game {
  overflow: hidden;
}

#screen-game.active { display: block; height: 100vh; }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ════════════════════════════════════════
   TOP BAR
════════════════════════════════════════ */
#top-bar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  min-height: 36px;
}

#game-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent);
  letter-spacing: 3px;
  white-space: nowrap;
}

#game-status { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }

.status-badge {
  background: #04101e;
  border: 1px solid var(--border-dim);
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  white-space: nowrap;
}

.status-badge.p1 { border-color: var(--p1); color: var(--p1); }
.status-badge.p2 { border-color: var(--p2); color: var(--p2); }

#top-controls { display: flex; gap: 5px; flex-shrink: 0; }
#top-controls button { display: inline-block; width: auto; padding: 3px 8px; font-size: 10px; }
#btn-forfeit { color: var(--red, #ff4444); border-color: var(--red, #ff4444); opacity: 0.85; }
#btn-forfeit:hover { opacity: 1; background: rgba(255,68,68,0.15); }

/* ════════════════════════════════════════
   MAIN LAYOUT
════════════════════════════════════════ */
#main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ════════════════════════════════════════
   LEFT PANEL — fixed-top + scrollable-middle + fixed-bottom
════════════════════════════════════════ */
#left-panel {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  width: 210px;
  min-width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Fixed top: credits + resource row */
#left-panel-top {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

#credits-section {
  padding: 7px 8px 5px;
}

#credits-display {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 5px;
}

/* Compact resource chips row */
#resource-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}

.resource-chip {
  background: #06101e;
  border: 1px solid var(--border-dim);
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}

.cp-chip {
  border-color: rgba(51,255,204,0.3);
  color: var(--cp-color);
}

/* Scrollable middle */
#left-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#left-panel-content > * {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

#sub-panel-area {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#sub-panel-area > * {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-dim);
}

/* Fixed bottom */
#end-turn-section {
  padding: 7px 8px;
  border-top: 2px solid var(--border);
  flex-shrink: 0;
}

#turn-status-line { font-size: 10px; color: var(--yellow); margin-bottom: 5px; min-height: 14px; }

/* ════════════════════════════════════════
   RIGHT PANEL
════════════════════════════════════════ */
#right-panel {
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  padding: 8px;
  width: 195px;
  min-width: 195px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════════════
   SHARED GAME UI ELEMENTS
════════════════════════════════════════ */
.section-title {
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--border-dim);
  padding-bottom: 3px;
  margin-bottom: 5px;
}

.hint-text { font-size: 10px; color: var(--text-dim); line-height: 1.5; margin-bottom: 4px; }

/* ════════════════════════════════════════
   BUTTONS (in-game)
════════════════════════════════════════ */
button {
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 5px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  display: block;
  width: 100%;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}

button:hover:not(:disabled) { background: var(--btn-hover); }
button:active:not(:disabled) { background: var(--btn-active); }
button:disabled { opacity: 0.35; cursor: not-allowed; }

button.active { background: var(--btn-active); border-color: var(--accent); color: var(--accent); }

button.btn-end-turn {
  background: var(--btn-success);
  border-color: #1a5030;
  color: var(--green);
  text-align: center;
  font-size: 12px;
  padding: 7px;
}
button.btn-end-turn:hover { background: #182e1e; }

button.btn-cancel {
  background: var(--btn-danger);
  border-color: #4a1515;
  color: #ff8888;
  text-align: center;
}

button.btn-confirm {
  background: var(--btn-confirm);
  border-color: #193858;
  color: var(--accent);
  text-align: center;
}
button.btn-confirm:hover { background: #152a44; }

/* Action button rows (3 small buttons per row) */
.action-btn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}

.action-btn {
  font-size: 10px;
  padding: 4px 3px;
  text-align: center;
}

.action-btn-special {
  border-color: rgba(204,136,255,0.4);
  color: var(--purple);
}
.action-btn-special:hover:not(:disabled) { background: rgba(204,136,255,0.08); }

.action-btn-sentry {
  border-color: rgba(68,255,180,0.4);
  color: var(--green);
  font-size: 10px;
}
.action-btn-sentry:hover { background: rgba(68,255,180,0.08); }
.action-btn-sentry.sentry-active {
  border-color: var(--green);
  background: rgba(68,255,180,0.15);
  color: var(--green);
  font-weight: 700;
}

.action-btn-mining {
  border-color: rgba(255,200,50,0.45);
  color: rgba(255,200,50,0.9);
  font-size: 10px;
}
.action-btn-mining:hover:not(:disabled) { background: rgba(255,200,50,0.1); }
.action-btn-mining.converting-active {
  border-color: rgba(255,200,50,0.8);
  background: rgba(255,200,50,0.12);
  font-weight: 700;
}

.action-btn-base {
  border-color: rgba(255,204,68,0.4);
  color: var(--yellow);
}
.action-btn-base:hover:not(:disabled) { background: rgba(255,204,68,0.06); }

.action-btn-cp {
  border-color: rgba(51,255,204,0.4);
  color: var(--cp-color);
  text-align: center;
  font-size: 10px;
}
.action-btn-cp:hover:not(:disabled) { background: rgba(51,255,204,0.06); }

.action-btn-drone {
  border-color: rgba(80,200,255,0.4);
  color: rgba(80,200,255,0.9);
  font-size: 10px;
}
.action-btn-drone:hover:not(:disabled) { background: rgba(80,200,255,0.08); }

.action-btn-auto {
  border-color: rgba(255,160,80,0.4);
  color: rgba(255,160,80,0.9);
  font-size: 10px;
}
.action-btn-auto:hover { background: rgba(255,160,80,0.08); }
.action-btn-auto.auto-active {
  border-color: rgba(255,160,80,0.9);
  background: rgba(255,160,80,0.15);
  color: rgba(255,200,80,1);
  font-weight: 700;
}

/* Stance buttons */
.stance-btn {
  text-align: center;
  padding: 6px 4px;
  margin-bottom: 4px;
  font-size: 10px;
  line-height: 1.5;
}
.stance-btn span { font-size: 9px; color: var(--text-dim); }

.assault-btn { border-color: rgba(255,100,68,0.5); color: var(--p2); }
.assault-btn:hover:not(:disabled) { background: rgba(255,100,68,0.08); }

.defense-btn { border-color: rgba(74,158,255,0.5); color: var(--p1); }
.defense-btn:hover:not(:disabled) { background: rgba(74,158,255,0.08); }

/* ════════════════════════════════════════
   CREDITS / ECONOMY
════════════════════════════════════════ */
.credit-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 6px;
  border-radius: 2px;
  border: 1px solid var(--border-dim);
  font-size: 11px;
}

.credit-row.active-player { border-color: var(--selected-glow); background: rgba(255,204,0,0.05); }
.credit-row.p1 { color: var(--p1); }
.credit-row.p2 { color: var(--p2); }

#economy-breakdown {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.7;
  background: #04101e;
  border: 1px solid var(--border-dim);
  padding: 5px 7px;
  border-radius: 2px;
}

.eco-row { display: flex; justify-content: space-between; }
.eco-row.total { color: var(--green); font-weight: bold; border-top: 1px solid var(--border-dim); margin-top: 2px; padding-top: 2px; }

/* ════════════════════════════════════════
   SHIP DETAILS
════════════════════════════════════════ */
/* Keep the left panel to a single scrollbar. The outer panel content already scrolls,
   so the details blocks should grow naturally instead of creating a second inner rail. */
#ship-details { max-height: none; overflow: visible; }

#ship-name { font-size: 12px; font-weight: bold; margin-bottom: 5px; }
#ship-name.p1 { color: var(--p1); }
#ship-name.p2 { color: var(--p2); }
#ship-name.inspect { color: var(--orange); }

.stat-row { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 2px; }
.stat-label { color: var(--text-dim); }
.stat-val   { color: var(--text); }

.bar-container { height: 5px; background: #040a14; border-radius: 2px; overflow: hidden; margin: 2px 0 4px; }
.bar-fill-hp     { background: var(--green); height: 100%; transition: width 0.2s; }
.bar-fill-shield { background: var(--p1);    height: 100%; transition: width 0.2s; }
.bar-fill-shield.p2 { background: var(--p2); }

.weapon-label { color: var(--text-dim); font-size: 10px; margin-bottom: 2px; }
.weapon-entry { padding: 1px 0; color: var(--yellow); font-size: 10px; }
.weapon-entry.empty { color: var(--text-muted); }

.sys-dmg-entry { font-size: 10px; color: var(--yellow); padding: 1px 0; }

/* ════════════════════════════════════════
   BASE DETAILS
════════════════════════════════════════ */
#base-details { max-height: none; overflow: visible; }

#base-name.p1 { color: var(--p1); }
#base-name.p2 { color: var(--p2); }

/* ════════════════════════════════════════
   ACTION PANEL
════════════════════════════════════════ */
#action-panel { }

#action-buttons { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }

#cp-action-row { margin-top: 3px; }
#action-btn-base { margin-top: 3px; }

.action-banner-text {
  font-size: 10px;
  color: var(--accent);
  background: rgba(0,200,255,0.06);
  border: 1px solid rgba(0,200,255,0.2);
  padding: 5px 7px;
  border-radius: 2px;
  margin-bottom: 4px;
  line-height: 1.5;
}

/* ════════════════════════════════════════
   DEPLOY PANEL
════════════════════════════════════════ */
.deploy-option {
  background: #06101e;
  border: 1px solid var(--border-dim);
  padding: 5px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 3px;
  transition: background 0.1s;
}

.deploy-option:hover { background: var(--btn-hover); }
.deploy-option.selected { border-color: var(--selected-glow); background: rgba(255,204,0,0.06); }

/* ════════════════════════════════════════
   FACING / WEAPON / REPAIR / UPGRADE
════════════════════════════════════════ */
#facing-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.facing-btn { text-align: center; font-size: 13px; padding: 5px; }
.facing-btn.selected { border-color: var(--selected-glow); color: var(--selected-glow); }

.upgrade-option {
  background: #06101e;
  border: 1px solid var(--border-dim);
  padding: 5px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  margin-bottom: 3px;
  transition: background 0.1s;
}

.upgrade-option:hover:not(.cant-afford):not(.unavailable):not(.owned) { background: var(--btn-hover); }
.upgrade-option.cant-afford { opacity: 0.4; cursor: not-allowed; }
.upgrade-option.unavailable { opacity: 0.25; cursor: not-allowed; }
.upgrade-option.owned { opacity: 0.3; cursor: not-allowed; }
.upgrade-name { color: var(--text); font-weight: bold; }
.upgrade-cost { color: var(--yellow); }
.upgrade-desc { color: var(--text-dim); margin-top: 2px; }

/* ════════════════════════════════════════
   PRODUCTION PANEL
════════════════════════════════════════ */
.production-option {
  background: #06101e;
  border: 1px solid var(--border-dim);
  padding: 5px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  margin-bottom: 3px;
  transition: background 0.1s;
}

.production-option:hover:not(.cant-afford):not(.cap-full) { background: var(--btn-hover); }
.production-option.cant-afford { opacity: 0.4; cursor: not-allowed; }
.production-option.cap-full { opacity: 0.3; cursor: not-allowed; }
.prod-name { color: var(--text); font-weight: bold; }
.prod-cost { color: var(--yellow); }
.prod-cap  { color: var(--text-dim); }
.prod-desc { color: var(--text-dim); margin-top: 2px; }

/* ════════════════════════════════════════
   COMMAND PANEL
════════════════════════════════════════ */
.command-option {
  background: #06101e;
  border: 1px solid rgba(51,255,204,0.2);
  padding: 5px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  margin-bottom: 3px;
  transition: background 0.1s;
  color: var(--cp-color);
}

.command-option:hover:not(.cant-afford) { background: rgba(51,255,204,0.06); }
.command-option.cant-afford { opacity: 0.35; cursor: not-allowed; }
.command-option.selected { border-color: var(--cp-color); background: rgba(51,255,204,0.1); }
.cmd-name { font-weight: bold; }
.cmd-cost { color: var(--yellow); }
.cmd-desc { color: var(--text-dim); margin-top: 2px; font-size: 9px; }

/* ════════════════════════════════════════
   BOARD AREA
════════════════════════════════════════ */
#board-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

#zoom-controls {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-dim);
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.zoom-btn { display: inline-block; width: auto; padding: 2px 8px; font-size: 14px; font-weight: bold; text-align: center; }

#zoom-label { font-size: 10px; color: var(--text-dim); min-width: 36px; text-align: center; }

.map-seed-display { font-size: 9px; color: var(--text-muted); margin-left: 10px; }

#match-briefing-strip {
  border-bottom: 1px solid var(--border-dim);
  background:
    linear-gradient(180deg, rgba(10,18,31,0.92), rgba(6,12,22,0.95));
  padding: 6px 12px;
}

.match-briefing-title {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.match-briefing-body {
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

#board-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
  cursor: grab;
  background:
    /* Bright stars */
    radial-gradient(circle at 6%  12%, rgba(255,255,255,0.9),   transparent 0.38%),
    radial-gradient(circle at 19% 57%, rgba(255,248,218,0.82),  transparent 0.44%),
    radial-gradient(circle at 38%  8%, rgba(200,226,255,0.78),  transparent 0.4%),
    radial-gradient(circle at 62% 33%, rgba(255,255,255,0.86),  transparent 0.38%),
    radial-gradient(circle at 79% 68%, rgba(255,248,218,0.8),   transparent 0.42%),
    radial-gradient(circle at 93% 22%, rgba(200,226,255,0.76),  transparent 0.38%),
    radial-gradient(circle at 47% 85%, rgba(255,255,255,0.78),  transparent 0.4%),
    radial-gradient(circle at 12% 92%, rgba(255,245,195,0.72),  transparent 0.46%),
    /* Medium stars */
    radial-gradient(circle at 11% 42%, rgba(200,226,255,0.58),  transparent 0.28%),
    radial-gradient(circle at 28% 71%, rgba(255,255,255,0.54),  transparent 0.26%),
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.52),  transparent 0.24%),
    radial-gradient(circle at 54% 14%, rgba(200,226,255,0.55),  transparent 0.27%),
    radial-gradient(circle at 67% 82%, rgba(255,255,255,0.52),  transparent 0.26%),
    radial-gradient(circle at 76% 44%, rgba(255,248,218,0.54),  transparent 0.28%),
    radial-gradient(circle at 85% 17%, rgba(200,226,255,0.5),   transparent 0.27%),
    radial-gradient(circle at 43% 62%, rgba(255,255,255,0.48),  transparent 0.25%),
    radial-gradient(circle at 22% 33%, rgba(255,255,255,0.5),   transparent 0.24%),
    radial-gradient(circle at 88% 76%, rgba(255,248,218,0.48),  transparent 0.27%),
    radial-gradient(circle at 16% 18%, rgba(200,226,255,0.46),  transparent 0.24%),
    radial-gradient(circle at 71%  9%, rgba(255,255,255,0.48),  transparent 0.26%),
    radial-gradient(circle at 57% 50%, rgba(255,255,255,0.44),  transparent 0.24%),
    radial-gradient(circle at  4% 66%, rgba(255,248,218,0.42),  transparent 0.24%),
    /* Small stars */
    radial-gradient(circle at  7% 36%, rgba(255,255,255,0.38),  transparent 0.2%),
    radial-gradient(circle at 24% 84%, rgba(200,226,255,0.36),  transparent 0.19%),
    radial-gradient(circle at 41% 50%, rgba(255,255,255,0.34),  transparent 0.19%),
    radial-gradient(circle at 58% 73%, rgba(255,255,255,0.36),  transparent 0.2%),
    radial-gradient(circle at 78% 30%, rgba(255,248,218,0.34),  transparent 0.19%),
    radial-gradient(circle at 91% 54%, rgba(255,255,255,0.34),  transparent 0.19%),
    radial-gradient(circle at 32% 16%, rgba(200,226,255,0.32),  transparent 0.19%),
    radial-gradient(circle at 63% 48%, rgba(255,255,255,0.32),  transparent 0.19%),
    radial-gradient(circle at 48% 27%, rgba(255,255,255,0.34),  transparent 0.2%),
    radial-gradient(circle at 15% 65%, rgba(255,248,218,0.32),  transparent 0.2%),
    radial-gradient(circle at 83%  5%, rgba(200,226,255,0.3),   transparent 0.19%),
    radial-gradient(circle at 52% 96%, rgba(255,255,255,0.3),   transparent 0.19%),
    /* Nebula color washes */
    radial-gradient(circle at 18% 18%, rgba(75,110,255,0.1),   transparent 24%),
    radial-gradient(circle at 81% 20%, rgba(255,126,89,0.07),  transparent 22%),
    radial-gradient(circle at 52% 76%, rgba(93,218,206,0.07),  transparent 20%),
    linear-gradient(180deg, rgba(8,13,24,0.9), rgba(6,10,18,0.94));
}

#board-scroll.dragging {
  cursor: grabbing;
}

#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--board-cols, 30), var(--board-cell-size));
  grid-template-rows:    repeat(var(--board-rows, 30), var(--board-cell-size));
  flex-shrink: 0;
  transform-origin: top center;
  transition: zoom 0.15s ease;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

#board::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at  3%  8%, rgba(255,255,255,0.55),  transparent 0.26%),
    radial-gradient(circle at  7% 29%, rgba(180,220,255,0.5),   transparent 0.24%),
    radial-gradient(circle at 12% 71%, rgba(255,255,255,0.52),  transparent 0.26%),
    radial-gradient(circle at 15% 47%, rgba(255,230,194,0.48),  transparent 0.28%),
    radial-gradient(circle at 19% 11%, rgba(255,255,255,0.55),  transparent 0.26%),
    radial-gradient(circle at 23% 63%, rgba(182,218,255,0.46),  transparent 0.24%),
    radial-gradient(circle at 27% 35%, rgba(255,255,255,0.48),  transparent 0.24%),
    radial-gradient(circle at 31% 86%, rgba(255,255,255,0.5),   transparent 0.26%),
    radial-gradient(circle at 36% 18%, rgba(255,255,255,0.5),   transparent 0.26%),
    radial-gradient(circle at 40% 56%, rgba(176,214,255,0.46),  transparent 0.24%),
    radial-gradient(circle at 44% 27%, rgba(255,255,255,0.5),   transparent 0.26%),
    radial-gradient(circle at 49% 76%, rgba(255,255,255,0.48),  transparent 0.26%),
    radial-gradient(circle at 53%  9%, rgba(255,228,190,0.46),  transparent 0.28%),
    radial-gradient(circle at 57% 44%, rgba(255,255,255,0.5),   transparent 0.26%),
    radial-gradient(circle at 61% 68%, rgba(180,220,255,0.46),  transparent 0.24%),
    radial-gradient(circle at 66% 23%, rgba(255,255,255,0.5),   transparent 0.26%),
    radial-gradient(circle at 71% 82%, rgba(255,255,255,0.46),  transparent 0.26%),
    radial-gradient(circle at 76% 12%, rgba(255,255,255,0.48),  transparent 0.26%),
    radial-gradient(circle at 81% 49%, rgba(176,214,255,0.46),  transparent 0.24%),
    radial-gradient(circle at 86% 31%, rgba(255,255,255,0.5),   transparent 0.26%),
    radial-gradient(circle at 91% 72%, rgba(255,225,188,0.46),  transparent 0.28%),
    radial-gradient(circle at 96% 21%, rgba(255,255,255,0.48),  transparent 0.26%),
    radial-gradient(circle at  9% 55%, rgba(255,255,255,0.42),  transparent 0.22%),
    radial-gradient(circle at 18% 38%, rgba(200,226,255,0.4),   transparent 0.22%),
    radial-gradient(circle at 33% 60%, rgba(255,255,255,0.4),   transparent 0.22%),
    radial-gradient(circle at 48% 92%, rgba(255,248,218,0.4),   transparent 0.24%),
    radial-gradient(circle at 60% 14%, rgba(255,255,255,0.42),  transparent 0.22%),
    radial-gradient(circle at 74% 36%, rgba(200,226,255,0.38),  transparent 0.22%),
    radial-gradient(circle at 88% 58%, rgba(255,255,255,0.4),   transparent 0.22%),
    radial-gradient(circle at  2% 82%, rgba(255,248,218,0.38),  transparent 0.24%);
}

/* ════════════════════════════════════════
   GRID CELLS
════════════════════════════════════════ */
.cell {
  width: var(--board-cell-size);
  height: var(--board-cell-size);
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,0.045), transparent 5%),
    radial-gradient(circle at 72% 66%, rgba(120, 180, 255, 0.04), transparent 6%),
    radial-gradient(circle at 61% 25%, rgba(255, 126, 89, 0.035), transparent 10%),
    linear-gradient(180deg, rgba(13, 22, 35, 0.28), rgba(9, 16, 26, 0.22));
  cursor: pointer;
  position: relative;
  z-index: 1;
  user-select: none;
  transition: background 0.08s, box-shadow 0.08s;
}

.cell:hover {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,0.065), transparent 5%),
    radial-gradient(circle at 72% 66%, rgba(120, 180, 255, 0.06), transparent 6%),
    radial-gradient(circle at 61% 25%, rgba(255, 126, 89, 0.045), transparent 10%),
    linear-gradient(180deg, rgba(18, 29, 45, 0.3), rgba(12, 20, 31, 0.24));
}

.cell.void-cell {
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
  pointer-events: none;
}

.cell.nebula {
  background: transparent;
  box-shadow: none;
}

.cell.nebula::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 48% 52% 55% 45% / 43% 57% 45% 55%;
  border: 1px solid rgba(196, 164, 255, 0.22);
  box-shadow: 0 0 10px rgba(160, 124, 255, 0.12);
  opacity: 0.85;
  pointer-events: none;
}

.cell.nebula::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 59% 41% 47% 53% / 51% 49% 56% 44%;
  border: 1px solid rgba(122, 236, 228, 0.16);
  opacity: 0.7;
  pointer-events: none;
}

.cell.asteroid {
  cursor: default;
  background: transparent;
  box-shadow: none;
}

/* Asteroid SVG (injected per cell, unique rocky shape) */
.asteroid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.asteroid-svg .asteroid-body {
  fill: rgba(58, 68, 84, 0.92);
  stroke: rgba(155, 178, 214, 0.65);
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(100, 135, 195, 0.18));
}

.asteroid-svg .asteroid-crack {
  fill: none;
  stroke: rgba(185, 210, 245, 0.32);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.asteroid-svg .asteroid-highlight {
  fill: rgba(225, 240, 255, 0.72);
  filter: drop-shadow(0 0 3px rgba(200,225,255,0.5));
}

.cell.gravity-well {
  background: transparent;
}

.cell.gravity-well::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(154, 126, 255, 0.22);
  box-shadow:
    0 0 12px rgba(154, 126, 255, 0.16),
    inset 0 0 12px rgba(96, 86, 180, 0.2);
  pointer-events: none;
}

.cell.gravity-well::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(12, 8, 30, 0.92) 0 28%, rgba(52, 36, 96, 0.45) 48%, transparent 72%);
  box-shadow: 0 0 16px rgba(124, 98, 255, 0.22);
  pointer-events: none;
}

/* ════════════════════════════════════════
   MINE SPOTS
════════════════════════════════════════ */
.cell.mine-spot-cell { background: rgba(255,200,50,0.04); }

.mine-spot-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px dashed rgba(255,200,50,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255,200,50,0.7);
  pointer-events: none;
  position: absolute;
  top: calc((var(--board-cell-size) - 34px) / 2);
  left: calc((var(--board-cell-size) - 34px) / 2);
  z-index: 1;
}

.cell.mine-spot-cell.mine-active { background: rgba(255,200,50,0.08); }

/* ════════════════════════════════════════
   MINING SHIP & MINING BASE
════════════════════════════════════════ */

/* Converting ship countdown overlay */
.converting-indicator {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  pointer-events: none;
}
.converting-badge {
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,200,50,0.8);
  border-radius: 3px;
  color: rgba(255,200,50,1);
  font-size: 9px;
  font-weight: bold;
  padding: 1px 3px;
  animation: convert-pulse 1s ease-in-out infinite;
}
@keyframes convert-pulse {
  0%,100% { box-shadow: 0 0 4px rgba(255,200,50,0.4); }
  50%      { box-shadow: 0 0 8px rgba(255,200,50,0.8); }
}

/* Mining base tile */
.ship-marker.mining-base-marker {
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.08), transparent 20%),
    linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(5, 11, 20, 0.98));
  box-shadow:
    0 0 18px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.mining-base-income {
  font-size: 7px;
  color: rgba(255,200,50,0.9);
  font-weight: bold;
}

.cell.deploy-zone-1 { background: linear-gradient(180deg, rgba(74,158,255,0.08), rgba(74,158,255,0.03)); }
.cell.deploy-zone-2 { background: linear-gradient(180deg, rgba(255,102,68,0.08), rgba(255,102,68,0.03)); }

/* Highlights */
.cell.hl-move       { background: linear-gradient(180deg, rgba(0,204,255,0.24), rgba(0,204,255,0.12)); box-shadow: inset 0 0 0 1px rgba(0,214,255,0.42), inset 0 0 10px rgba(0,214,255,0.12); cursor: crosshair; }
.cell.hl-range      { background: linear-gradient(180deg, rgba(255,50,50,0.16), rgba(255,50,50,0.08)); box-shadow: inset 0 0 0 1px rgba(255,88,88,0.28); }
.cell.hl-attack     { background: linear-gradient(180deg, rgba(255,55,55,0.38), rgba(255,55,55,0.2)); box-shadow: inset 0 0 0 1px rgba(255,114,114,0.48), inset 0 0 12px rgba(255,88,88,0.16); cursor: crosshair; }
.cell.hl-attack-dim { background: linear-gradient(180deg, rgba(255,140,0,0.13), rgba(255,140,0,0.06)); box-shadow: inset 0 0 0 1px rgba(255,170,72,0.22); cursor: not-allowed; }
.cell.hl-deploy     { background: linear-gradient(180deg, rgba(80,255,130,0.18), rgba(80,255,130,0.08)); box-shadow: inset 0 0 0 1px rgba(120,255,162,0.28); cursor: crosshair; }
.cell.hl-resource   { background: linear-gradient(180deg, rgba(0,220,255,0.14), rgba(255,210,40,0.08)); box-shadow: inset 0 0 0 1px rgba(90,235,255,0.34), inset 0 0 12px rgba(255,210,80,0.08); }
.cell.hl-dest       { background: linear-gradient(180deg, rgba(255,210,40,0.22), rgba(255,210,40,0.1)); box-shadow: inset 0 0 0 1px rgba(255,225,110,0.3); }

/* ════════════════════════════════════════
   CONTROL POINTS
════════════════════════════════════════ */
.control-point {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px dashed var(--cp-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--cp-color);
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: calc((var(--board-cell-size) - 34px) / 2);
  left: calc((var(--board-cell-size) - 34px) / 2);
}

.cell.cp-cell { background: rgba(51,255,204,0.04); }
.cell.cp-cell:hover { background: rgba(51,255,204,0.08); }

.cell.cp-owned-1 .control-point { border-color: var(--p1); color: var(--p1); opacity: 0.7; }
.cell.cp-owned-2 .control-point { border-color: var(--p2); color: var(--p2); opacity: 0.7; }

/* ════════════════════════════════════════
   STARBASE TILES
════════════════════════════════════════ */
.base-marker {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  --starbase-accent: rgba(218, 230, 255, 0.78);
  --starbase-accent-soft: rgba(218, 230, 255, 0.16);
  --starbase-core: rgba(255, 255, 255, 0.86);
}

.base-marker.p1,
.base-body.p1 {
  --starbase-accent: #44d8ff;
  --starbase-accent-soft: rgba(68, 216, 255, 0.18);
  --starbase-core: rgba(212, 245, 255, 0.92);
  background: transparent;
}
.base-marker.p2,
.base-body.p2 {
  --starbase-accent: #ff5a5a;
  --starbase-accent-soft: rgba(255, 90, 90, 0.14);
  --starbase-core: rgba(255, 208, 208, 0.78);
  background: transparent;
}

.base-marker.selected {
  box-shadow: none;
  filter: none;
  z-index: 3;
}

.base-symbol {
  font-size: 13px;
  line-height: 1;
}

.base-marker.p1 .base-symbol { color: var(--p1); }
.base-marker.p2 .base-symbol { color: var(--p2); }

/* Base body cells (non-head cells of a 2×2 base) */
.base-body {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.base-body.p1 {
  background: transparent;
  border: none;
  box-shadow: none;
}
.base-body.p2 {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Inner structural corner marker for base body cells */
.base-struct {
  position: absolute;
  inset: 5px;
  border-radius: 1px;
}
.base-body.p1 .base-struct { border: 1px solid rgba(74,158,255,0.22); box-shadow: inset 0 0 10px rgba(74,158,255,0.1); }
.base-body.p2 .base-struct { border: 1px solid rgba(255,102,68,0.22); box-shadow: inset 0 0 10px rgba(255,102,68,0.1); }

.base-hp-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #060e18;
}

.base-hp-bar-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.2s;
}

/* ════════════════════════════════════════
   SHIP TILES — v4
════════════════════════════════════════ */
.ship-marker {
  width: var(--ship-marker-size);
  height: var(--ship-marker-size);
  border-radius: 8px;
  border: none;
  position: absolute;
  top: 4px;
  left: 4px;
  cursor: pointer;
  transition: box-shadow 0.1s, opacity 0.1s;
  z-index: 2;
  overflow: hidden;
}

.ship-marker.p1 { background: linear-gradient(180deg, rgba(8, 18, 34, 0.92), rgba(5, 12, 22, 0.96)); }
.ship-marker.p2 { background: linear-gradient(180deg, rgba(24, 10, 10, 0.92), rgba(16, 7, 7, 0.96)); }

.ship-marker.selected { box-shadow: 0 0 12px var(--selected-glow), 0 0 22px rgba(255, 204, 0, 0.28); z-index: 3; }
.ship-marker.inspected { box-shadow: 0 0 9px var(--orange), 0 0 18px rgba(255, 153, 68, 0.22); }
.ship-marker.no-actions { opacity: 0.42; }
.ship-marker.ghost { opacity: 0.38; pointer-events: none; z-index: 1; }

/* Dreadnought body cells */
.dread-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.dread-body.p1 { background: linear-gradient(180deg, rgba(8, 18, 34, 0.84), rgba(5, 12, 22, 0.94)); border: 1px solid rgba(74,158,255,0.24); }
.dread-body.p2 { background: linear-gradient(180deg, rgba(24, 10, 10, 0.84), rgba(16, 7, 7, 0.94)); border: 1px solid rgba(255,102,68,0.24); }
.dread-body.selected { border-width: 2px; }
.dread-body.ghost    { opacity: 0.5; }

.carrier-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.72), rgba(5, 12, 22, 0.88));
}
.carrier-body.p1 { background: linear-gradient(180deg, rgba(8, 18, 34, 0.72), rgba(5, 12, 22, 0.88)); }
.carrier-body.p2 { background: linear-gradient(180deg, rgba(24, 10, 10, 0.72), rgba(16, 7, 7, 0.88)); }
.carrier-body.selected { box-shadow: inset 0 0 0 2px rgba(255, 204, 0, 0.5); }
.carrier-body.ghost { opacity: 0.5; }

/* SVG color inheritance for carrier body cells */
.carrier-body.p1 .ship-svg { color: var(--p1); }
.carrier-body.p2 .ship-svg { color: var(--p2); }
.carrier-body.ghost .ship-svg { filter: saturate(0.8); }

/* Hull segment bar running along the ship's axis */
.dread-hull-seg {
  position: absolute;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.dread-hull-seg.horiz {
  top: 50%; left: 8%; right: 8%;
  height: 5px;
  transform: translateY(-50%);
}
.dread-hull-seg.vert {
  left: 50%; top: 8%; bottom: 8%;
  width: 5px;
  transform: translateX(-50%);
}
.dread-body.p1 .dread-hull-seg { background: rgba(74,158,255,0.38); }
.dread-body.p2 .dread-hull-seg { background: rgba(255,102,68,0.38); }

.ship-inner.dread-head-inner {
  overflow: hidden;
}

.dread-head-overlay,
.dread-mid-core,
.dread-mid-band,
.dread-mid-plate,
.dread-engine-core,
.dread-engine-glow,
.dread-engine-vents {
  position: absolute;
  pointer-events: none;
}

.dread-head-overlay {
  inset: 2px;
  border-radius: 5px;
  z-index: 1;
}

.dread-head-inner .ship-symbol,
.dread-head-inner .ship-facing {
  position: relative;
  z-index: 3;
  text-shadow: 0 0 4px rgba(0,0,0,0.45);
}

.dread-head-spine {
  position: absolute;
  background: rgba(230, 237, 245, 0.36);
  border-radius: 999px;
  box-shadow: 0 0 4px rgba(255,255,255,0.08);
}

.dread-head-bridge {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: rgba(235, 245, 255, 0.22);
  border: 1px solid rgba(240, 248, 255, 0.35);
  box-shadow: inset 0 0 3px rgba(255,255,255,0.08);
}

.dread-head-prongs {
  position: absolute;
  inset: 0;
}

.dread-head-prongs span {
  position: absolute;
  width: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(220, 232, 245, 0.42);
  box-shadow: 0 0 4px rgba(255,255,255,0.05);
}

.dread-head-overlay.facing-up .dread-head-spine,
.dread-head-overlay.facing-down .dread-head-spine {
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
}

.dread-head-overlay.facing-up .dread-head-spine {
  top: 3px;
  bottom: 8px;
}

.dread-head-overlay.facing-down .dread-head-spine {
  top: 8px;
  bottom: 3px;
}

.dread-head-overlay.facing-left .dread-head-spine,
.dread-head-overlay.facing-right .dread-head-spine {
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
}

.dread-head-overlay.facing-left .dread-head-spine {
  left: 3px;
  right: 8px;
}

.dread-head-overlay.facing-right .dread-head-spine {
  left: 8px;
  right: 3px;
}

.dread-head-overlay.facing-up .dread-head-bridge {
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
}

.dread-head-overlay.facing-down .dread-head-bridge {
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
}

.dread-head-overlay.facing-left .dread-head-bridge {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.dread-head-overlay.facing-right .dread-head-bridge {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.dread-head-overlay.facing-up .dread-head-prongs span:first-child,
.dread-head-overlay.facing-down .dread-head-prongs span:first-child {
  left: 7px;
}

.dread-head-overlay.facing-up .dread-head-prongs span:last-child,
.dread-head-overlay.facing-down .dread-head-prongs span:last-child {
  right: 7px;
}

.dread-head-overlay.facing-up .dread-head-prongs span {
  top: 4px;
}

.dread-head-overlay.facing-down .dread-head-prongs span {
  bottom: 4px;
}

.dread-head-overlay.facing-left .dread-head-prongs span,
.dread-head-overlay.facing-right .dread-head-prongs span {
  width: 3px;
  height: 8px;
}

.dread-head-overlay.facing-left .dread-head-prongs span:first-child,
.dread-head-overlay.facing-right .dread-head-prongs span:first-child {
  top: 7px;
}

.dread-head-overlay.facing-left .dread-head-prongs span:last-child,
.dread-head-overlay.facing-right .dread-head-prongs span:last-child {
  bottom: 7px;
}

.dread-head-overlay.facing-left .dread-head-prongs span {
  left: 4px;
}

.dread-head-overlay.facing-right .dread-head-prongs span {
  right: 4px;
}

.dread-mid-core,
.dread-engine-core {
  border-radius: 3px;
  z-index: 1;
}

.dread-mid-core.horiz,
.dread-engine-core.horiz {
  top: 8px;
  bottom: 8px;
  left: 5px;
  right: 5px;
}

.dread-mid-core.vert,
.dread-engine-core.vert {
  left: 8px;
  right: 8px;
  top: 5px;
  bottom: 5px;
}

.dread-mid-band,
.dread-engine-glow {
  z-index: 0;
}

.dread-mid-band.horiz {
  top: 12px;
  bottom: 12px;
  left: 2px;
  right: 2px;
  border-radius: 999px;
}

.dread-mid-band.vert {
  left: 12px;
  right: 12px;
  top: 2px;
  bottom: 2px;
  border-radius: 999px;
}

.dread-mid-plate {
  border: 1px solid rgba(235,245,255,0.22);
  box-shadow: inset 0 0 3px rgba(255,255,255,0.08);
  z-index: 3;
}

.dread-mid-plate.horiz {
  top: 6px;
  bottom: 6px;
  left: 9px;
  right: 9px;
  border-radius: 3px;
}

.dread-mid-plate.vert {
  left: 6px;
  right: 6px;
  top: 9px;
  bottom: 9px;
  border-radius: 3px;
}

.dread-engine-glow.horiz {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  border-radius: 999px;
  filter: blur(2px);
}

.dread-engine-glow.vert {
  left: 10px;
  right: 10px;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  filter: blur(2px);
}

.dread-engine-vents {
  inset: 0;
  z-index: 3;
}

.dread-engine-vents span {
  position: absolute;
  background: rgba(245, 250, 255, 0.45);
  border-radius: 999px;
}

.dread-engine-vents.horiz span {
  width: 3px;
  height: 12px;
  top: 9px;
}

.dread-engine-vents.vert span {
  width: 12px;
  height: 3px;
  left: 9px;
}

.dread-engine-vents.horiz span:first-child,
.dread-engine-vents.vert span:first-child {
  left: 9px;
  top: 9px;
}

.dread-engine-vents.horiz span:last-child {
  right: 9px;
}

.dread-engine-vents.vert span:last-child {
  bottom: 9px;
}

.dread-body.p1 .dread-mid-core {
  background: linear-gradient(135deg, rgba(74,158,255,0.24), rgba(74,158,255,0.12));
}

.dread-body.p2 .dread-mid-core {
  background: linear-gradient(135deg, rgba(255,102,68,0.24), rgba(255,102,68,0.12));
}

.dread-body.p1 .dread-mid-band {
  background: rgba(74,158,255,0.18);
}

.dread-body.p2 .dread-mid-band {
  background: rgba(255,102,68,0.18);
}

.dread-body.p1 .dread-engine-core {
  background: linear-gradient(135deg, rgba(74,158,255,0.24), rgba(120,220,255,0.18));
}

.dread-body.p2 .dread-engine-core {
  background: linear-gradient(135deg, rgba(255,102,68,0.24), rgba(255,180,120,0.18));
}

.dread-body.p1 .dread-engine-glow {
  background: rgba(110, 220, 255, 0.24);
}

.dread-body.p2 .dread-engine-glow {
  background: rgba(255, 190, 110, 0.24);
}

/* Sensor lock indicator */
.sensor-lock-indicator {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1px solid #886600;
  z-index: 5;
  animation: lock-pulse 1.5s ease-in-out infinite;
}

@keyframes lock-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Stance icon on ship tile */
.stance-icon {
  position: absolute;
  bottom: 3px;
  right: 2px;
  font-size: 7px;
  line-height: 1;
  z-index: 3;
}

/* Frozen indicator — gravity well */
.frozen-indicator {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #88ddff;
  border: 1px solid #4499bb;
  z-index: 5;
  animation: frozen-pulse 1s ease-in-out infinite;
}

@keyframes frozen-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.3); }
}

/* Sentry mode indicator */
.sentry-indicator {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  border: 1px solid #28cc88;
  z-index: 5;
  animation: sentry-pulse 1.5s ease-in-out infinite;
}

@keyframes sentry-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.2); }
}

/* Fog of War */
.cell.fogged {
  position: relative;
}
.cell.fogged::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 14, 0.58);
  z-index: 4;           /* above terrain/CPs, below ship markers (z-index 5+) */
  pointer-events: none;
  border-radius: inherit;
}
/* Dim terrain features in fog (asteroids, wrecks still faintly visible) */
.cell.fogged .asteroid-marker,
.cell.fogged .asteroid-svg,
.cell.fogged .wreck-marker,
.cell.fogged .control-point {
  opacity: 0.2;
}

/* Ship rank indicator (shown on tile) */
.rank-icon {
  position: absolute;
  bottom: -2px;
  right: 1px;
  font-size: 7px;
  line-height: 1;
  z-index: 6;
  pointer-events: none;
}
.rank-icon.rank-veteran {
  color: #88ccff;
  text-shadow: 0 0 4px #88ccff;
}
.rank-icon.rank-elite {
  color: var(--yellow);
  text-shadow: 0 0 5px var(--yellow);
}

/* Base weapon slot display */
.base-weapon-slot {
  font-size: 10px;
  padding: 2px 4px;
  margin-bottom: 2px;
  border-left: 2px solid var(--accent);
  color: var(--text);
  background: var(--bg-card);
}
.base-weapon-slot.empty-slot {
  border-color: var(--text-muted);
  color: var(--text-muted);
}
.base-weapon-label {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  margin-bottom: 2px;
  font-weight: bold;
}
.base-upgrade-entry {
  font-size: 10px;
  color: var(--purple);
  padding: 1px 0;
}

/* Ship tile interior layout */
.ship-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2px;
}

.ship-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  flex-shrink: 0;
}

.ship-symbol  { font-size: 14px; font-weight: bold; color: inherit; line-height: 1; }
.ship-facing  { font-size: 10px; color: inherit; opacity: 0.8; line-height: 1; }

.ship-id-tag {
  position: absolute;
  bottom: 7px;
  left: 5px;
  font-size: 8px;
  color: inherit;
  opacity: 0.72;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(0,0,0,0.75);
}

.ship-hp-bar {
  position: absolute;
  bottom: 3px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: #060e18;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(150, 195, 255, 0.08);
}

.ship-hp-bar-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.2s;
}

.ship-shields {
  display: flex;
  gap: 2px;
  position: absolute;
  top: 4px;
  left: 5px;
}

.sh-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5588ff;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(85, 136, 255, 0.45);
}

.sh-pip.lost { background: #1a1a2e; }

.ship-status-row {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.s-icon {
  font-size: 7px;
  font-weight: bold;
  padding: 1px 2px;
  border-radius: 2px;
  line-height: 1;
}

.s-icon.woff  { background: #300e00; color: var(--orange); }
.s-icon.eng   { background: #280d00; color: #ff8844; }
.s-icon.shld  { background: #00152a; color: #44aaff; }
.s-icon.fc    { background: #261500; color: #ffaa44; }

.ship-backplate {
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 42%, rgba(18, 32, 52, 0.52), var(--ship-backplate));
  box-shadow:
    inset 0 0 0 1px rgba(140, 188, 255, 0.08),
    0 0 18px rgba(0, 0, 0, 0.24);
}

.ship-art {
  position: absolute;
  inset: 6px 5px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.interceptor-neon-inner .ship-shields,
.interceptor-neon-inner .ship-status-row,
.interceptor-neon-inner .ship-id-tag,
.interceptor-neon-inner .ship-hp-bar,
.interceptor-neon-inner .stance-icon,
.interceptor-neon-inner .rank-icon,
.fighter-neon-inner .ship-shields,
.fighter-neon-inner .ship-status-row,
.fighter-neon-inner .ship-id-tag,
.fighter-neon-inner .ship-hp-bar,
.fighter-neon-inner .stance-icon,
.fighter-neon-inner .rank-icon,
.frigate-neon-inner .ship-shields,
.frigate-neon-inner .ship-status-row,
.frigate-neon-inner .ship-id-tag,
.frigate-neon-inner .ship-hp-bar,
.frigate-neon-inner .stance-icon,
.frigate-neon-inner .rank-icon,
.carrier-neon-inner .ship-shields,
.carrier-neon-inner .ship-status-row,
.carrier-neon-inner .ship-id-tag,
.carrier-neon-inner .ship-hp-bar,
.carrier-neon-inner .stance-icon,
.carrier-neon-inner .rank-icon,
.mining-ship-neon-inner .ship-shields,
.mining-ship-neon-inner .ship-status-row,
.mining-ship-neon-inner .ship-id-tag,
.mining-ship-neon-inner .ship-hp-bar,
.mining-base-neon-inner .ship-hp-bar,
.dread-neon-inner .ship-shields,
.dread-neon-inner .ship-status-row,
.dread-neon-inner .ship-id-tag,
.dread-neon-inner .ship-hp-bar,
.dread-neon-inner .stance-icon,
.dread-neon-inner .rank-icon,
.engineer-drone-neon-inner .ship-shields,
.engineer-drone-neon-inner .ship-status-row,
.engineer-drone-neon-inner .ship-id-tag,
.engineer-drone-neon-inner .ship-hp-bar,
.engineer-drone-neon-inner .stance-icon,
.engineer-drone-neon-inner .rank-icon,
.starbase-neon-inner .ship-shields,
.starbase-neon-inner .ship-hp-bar {
  z-index: 3;
}

.interceptor-neon-inner .ship-id-tag {
  font-size: 7px;
  letter-spacing: 0.04em;
}

.interceptor-neon-inner .stance-icon,
.interceptor-neon-inner .rank-icon,
.fighter-neon-inner .stance-icon,
.fighter-neon-inner .rank-icon,
.frigate-neon-inner .stance-icon,
.frigate-neon-inner .rank-icon,
.carrier-neon-inner .stance-icon,
.carrier-neon-inner .rank-icon,
.dread-neon-inner .stance-icon,
.dread-neon-inner .rank-icon,
.engineer-drone-neon-inner .stance-icon,
.engineer-drone-neon-inner .rank-icon {
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.interceptor-ship-art {
  inset: 7px 6px 9px;
}

.fighter-ship-art {
  inset: 10px 9px 11px;
}

.frigate-ship-art {
  inset: 4px 3px 7px;
}

.carrier-ship-art {
  inset: 5px 4px 8px;
}

.mining-ship-art {
  inset: 6px 6px 9px;
}

.mining-base-ship-art {
  inset: 7px 7px 10px;
}

.dread-head-ship-art {
  inset: 4px 4px 7px;
}

.starbase-ship-art {
  inset: 4px 4px 7px;
}

.engineer-drone-ship-art {
  inset: 5px 5px 8px;
}

.mining-base-neon-inner .mining-base-income {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  text-shadow: 0 0 6px rgba(0,0,0,0.75);
}

.mining-base-backplate {
  inset: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.1), transparent 18%),
    radial-gradient(circle at 65% 72%, rgba(0,0,0,0.18), transparent 24%),
    linear-gradient(160deg, rgba(16, 31, 52, 0.68), rgba(6, 12, 22, 0.86));
}

.ship-svg {
  width: 100%;
  height: 100%;
  color: var(--p1);
  overflow: visible;
  transform: rotate(var(--ship-rotation, 0deg));
  transform-origin: 50% 50%;
}

.ship-marker.p2 .ship-svg {
  color: var(--p2);
}

.ship-marker.ghost .ship-svg {
  filter: saturate(0.8);
}

.ship-svg .outer-stroke,
.ship-svg .inner-stroke,
.ship-svg .detail-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.interceptor-svg .outer-stroke {
  stroke: currentColor;
  stroke-width: 5;
  opacity: 0.18;
  filter: drop-shadow(0 0 12px currentColor);
}

.interceptor-svg .inner-stroke {
  stroke: currentColor;
  stroke-width: 2.2;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 2px var(--ship-neon-core));
}

.interceptor-svg .detail-stroke {
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
}

.interceptor-svg .pod-shell,
.fighter-svg .pod-shell {
  fill: none;
}

.frigate-svg .outer-stroke {
  stroke: currentColor;
  stroke-width: 5.2;
  opacity: 0.18;
  filter: drop-shadow(0 0 12px currentColor);
}

.frigate-svg .inner-stroke {
  stroke: currentColor;
  stroke-width: 2.4;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 2px var(--ship-neon-core));
}

.frigate-svg .detail-stroke {
  stroke: currentColor;
  stroke-width: 1.55;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.16));
}

.carrier-svg .outer-stroke {
  stroke: currentColor;
  stroke-width: 5.2;
  opacity: 0.18;
  filter: drop-shadow(0 0 12px currentColor);
}

.carrier-svg .inner-stroke {
  stroke: currentColor;
  stroke-width: 2.4;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 2px var(--ship-neon-core));
}

.carrier-svg .detail-stroke {
  stroke: currentColor;
  stroke-width: 1.55;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.16));
}

.fighter-svg .outer-stroke {
  stroke: currentColor;
  stroke-width: 4.5;
  opacity: 0.16;
  filter: drop-shadow(0 0 10px currentColor);
}

.fighter-svg .inner-stroke {
  stroke: currentColor;
  stroke-width: 1.8;
  filter:
    drop-shadow(0 0 7px currentColor)
    drop-shadow(0 0 2px var(--ship-neon-core));
}

.fighter-svg .detail-stroke {
  stroke: currentColor;
  stroke-width: 1.3;
  opacity: 0.90;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.14));
}

.engineer-drone-svg .outer-stroke {
  stroke: currentColor;
  stroke-width: 5.2;
  opacity: 0.18;
  filter: drop-shadow(0 0 12px currentColor);
}

.engineer-drone-svg .inner-stroke {
  stroke: currentColor;
  stroke-width: 2.2;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 2px var(--ship-neon-core));
}

.engineer-drone-svg .detail-stroke {
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.16));
}

.mining-ship-svg .outer-stroke,
.mining-base-svg .outer-stroke,
.dread-head-svg .outer-stroke,
.starbase-svg .outer-stroke {
  stroke: currentColor;
  opacity: 0.18;
  filter: drop-shadow(0 0 12px currentColor);
}

.mining-ship-svg .outer-stroke { stroke-width: 5; }
.mining-base-svg .outer-stroke { stroke-width: 4.8; }
.dread-head-svg .outer-stroke { stroke-width: 5.3; }
.starbase-svg .outer-stroke { stroke-width: 5.1; }

.mining-ship-svg .inner-stroke,
.mining-base-svg .inner-stroke,
.dread-head-svg .inner-stroke,
.starbase-svg .inner-stroke {
  stroke: currentColor;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 2px var(--ship-neon-core));
}

.mining-ship-svg .inner-stroke { stroke-width: 2.1; }
.mining-base-svg .inner-stroke { stroke-width: 2; }
.dread-head-svg .inner-stroke { stroke-width: 2.45; }
.starbase-svg .inner-stroke { stroke-width: 2.3; }

.mining-ship-svg .detail-stroke,
.mining-base-svg .detail-stroke,
.dread-head-svg .detail-stroke,
.starbase-svg .detail-stroke {
  stroke: currentColor;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.16));
}

.mining-ship-svg .detail-stroke { stroke-width: 1.45; }
.mining-base-svg .detail-stroke { stroke-width: 1.35; }
.dread-head-svg .detail-stroke { stroke-width: 1.6; }
.starbase-svg .detail-stroke { stroke-width: 1.5; }

.starbase-upgrade-badges {
  position: absolute;
  right: 4px;
  bottom: 8px;
  display: flex;
  gap: 3px;
  z-index: 4;
}

.starbase-frame-border {
  display: none;
}

.starbase-upgrade-badge {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

.starbase-upgrade-badge.beam { color: #66d9ff; background: currentColor; }
.starbase-upgrade-badge.missile { color: #ffb35a; background: currentColor; }
.starbase-upgrade-badge.torpedo { color: #ff7b7b; background: currentColor; }
.starbase-upgrade-badge.dock {
  width: 7px;
  border-radius: 2px;
  color: #8dffcb;
  background: currentColor;
}

.base-body {
  overflow: visible; /* Allows starbase-tile-svg filter glow to render past tile edge */
}

/* ════════════════════════════════════════
   STARBASE TILE SVG (neon 4-tile station design)
════════════════════════════════════════ */
.starbase-tile-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Command (TL) tile — no special sizing needed; base-marker already fills the
   full 56px cell (top:0, left:0, width:100%, height:100%), so the SVG uses the
   same inset:0 as the three body tiles. */

.starbase-tile-svg path {
  fill: none;
}

.starbase-tile-svg .outer-stroke {
  stroke: var(--starbase-accent);
  stroke-width: 5.4;
  opacity: 0.18;
  filter: drop-shadow(0 0 14px var(--starbase-accent));
}

.starbase-tile-svg .inner-stroke {
  stroke: var(--starbase-accent);
  stroke-width: 2.2;
  filter:
    drop-shadow(0 0 8px var(--starbase-accent))
    drop-shadow(0 0 2px var(--starbase-core));
}

.starbase-tile-svg .detail-stroke {
  stroke: var(--starbase-accent);
  stroke-width: 1.4;
  opacity: 0.85;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.14));
}

.starbase-quarter,
.dread-segment {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.starbase-link,
.dread-link,
.dread-head-link {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.starbase-quarter-shell,
.starbase-ring,
.starbase-hardpoint,
.starbase-dock-ring,
.starbase-dock-arm,
.starbase-reactor-node,
.starbase-reactor-band,
.starbase-reactor-feed,
.starbase-module-glyph,
.starbase-node,
.starbase-doodad,
.dread-segment-core,
.dread-segment-spine,
.dread-segment-armor,
.dread-mid-collar,
.dread-mid-ribs,
.dread-engine-block,
.dread-engine-flare,
.dread-engine-nozzles,
.dread-engine-tail {
  position: absolute;
}

.starbase-link {
  display: none;
}

.starbase-quarter {
  overflow: hidden;
}

.starbase-quarter-shell {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: none;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--starbase-accent) 10%, white 8%), transparent 46%),
    radial-gradient(circle at 50% 50%, rgba(18, 34, 52, 0.26) 0%, rgba(7, 13, 23, 0.04) 68%, transparent 72%);
  box-shadow: none;
}

.starbase-ring {
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--starbase-accent) 46%, white 18%);
  box-shadow: 0 0 10px var(--starbase-accent-soft);
}

.starbase-ring.outer {
  width: 88px;
  height: 88px;
}

.starbase-ring.inner {
  width: 56px;
  height: 56px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--starbase-accent) 34%, white 14%);
}

.starbase-quarter.q-tl .starbase-ring.outer { right: -44px; bottom: -44px; }
.starbase-quarter.q-tr .starbase-ring.outer { left: -44px; bottom: -44px; }
.starbase-quarter.q-bl .starbase-ring.outer { right: -44px; top: -44px; }
.starbase-quarter.q-br .starbase-ring.outer { left: -44px; top: -44px; }

.starbase-quarter.q-tl .starbase-quarter-shell { right: -46px; bottom: -46px; }
.starbase-quarter.q-tr .starbase-quarter-shell { left: -46px; bottom: -46px; }
.starbase-quarter.q-bl .starbase-quarter-shell { right: -46px; top: -46px; }
.starbase-quarter.q-br .starbase-quarter-shell { left: -46px; top: -46px; }

.starbase-quarter.q-tl .starbase-ring.inner { right: -28px; bottom: -28px; }
.starbase-quarter.q-tr .starbase-ring.inner { left: -28px; bottom: -28px; }
.starbase-quarter.q-bl .starbase-ring.inner { right: -28px; top: -28px; }
.starbase-quarter.q-br .starbase-ring.inner { left: -28px; top: -28px; }

.starbase-node.command {
  right: 8px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--starbase-core), color-mix(in srgb, var(--starbase-accent) 28%, transparent) 70%);
  box-shadow: 0 0 10px var(--starbase-accent-soft);
}

.starbase-doodad.command-spine {
  right: 14px;
  bottom: 0;
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--starbase-accent) 44%, white 10%);
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-hardpoint {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 44%, white 14%);
  background: radial-gradient(circle, var(--starbase-core), color-mix(in srgb, var(--starbase-accent) 24%, transparent) 75%);
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-hardpoint.hardpoint-top { bottom: 13px; left: 11px; }
.starbase-hardpoint.hardpoint-side { bottom: 19px; left: 17px; }

.starbase-doodad.bastion-brace {
  left: 11px;
  bottom: 10px;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--starbase-accent) 40%, white 8%);
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-module-glyph {
  box-shadow: 0 0 8px currentColor;
}

.starbase-module-glyph.beam {
  bottom: 15px;
  left: 10px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  color: #66d9ff;
  background: currentColor;
}

.starbase-module-glyph.missile {
  bottom: 15px;
  left: 12px;
  width: 12px;
  height: 3px;
  border-radius: 999px;
  color: #ffb35a;
  background: currentColor;
}

.starbase-module-glyph.torpedo {
  bottom: 11px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: #ff7b7b;
  background:
    radial-gradient(circle at 50% 45%, currentColor 0 38%, transparent 42%),
    radial-gradient(circle at 50% 82%, rgba(255,255,255,0.32) 0 18%, transparent 22%);
}

.starbase-dock-ring {
  right: 9px;
  top: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 40%, white 16%);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--starbase-accent) 12%, transparent),
    0 0 10px var(--starbase-accent-soft);
}

.starbase-dock.upgraded .starbase-dock-ring {
  width: 18px;
  height: 18px;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.08),
    0 0 10px rgba(141,255,203,0.16);
}

.starbase-dock-arm {
  width: 3px;
  height: 10px;
  border-radius: 999px;
  background: rgba(141,255,203,0.85);
  box-shadow: 0 0 8px rgba(141,255,203,0.5);
}

.starbase-dock-arm.dock-1 { top: 12px; right: 4px; width: 8px; height: 2px; }
.starbase-dock-arm.dock-2 { top: 4px; right: 13px; width: 2px; height: 8px; }
.starbase-dock-arm.dock-3 { top: 22px; right: 16px; width: 8px; height: 2px; }

.starbase-reactor-node {
  left: 10px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--starbase-core), color-mix(in srgb, var(--starbase-accent) 28%, transparent) 70%);
  box-shadow: 0 0 12px var(--starbase-accent-soft);
}

.starbase-reactor-band {
  left: 5px;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 34%, white 12%);
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-reactor-feed {
  left: 8px;
  width: 16px;
  top: 17px;
  height: 2px;
  background: color-mix(in srgb, var(--starbase-accent) 42%, white 8%);
  border-radius: 999px;
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-shell,
.starbase-rim,
.starbase-midring,
.starbase-core-ring,
.starbase-core-fill,
.starbase-spoke,
.starbase-sector-block,
.starbase-panel-band,
.starbase-command-node,
.starbase-weapon-node,
.starbase-bastion-rail,
.starbase-dock-bay,
.starbase-reactor-ring {
  position: absolute;
}

.starbase-shell,
.starbase-rim,
.starbase-midring,
.starbase-core-ring,
.starbase-core-fill {
  border-radius: 50%;
}

.starbase-shell {
  width: 92px;
  height: 92px;
  background: none;
}

.starbase-rim {
  width: 90px;
  height: 90px;
  border: 2px solid color-mix(in srgb, var(--starbase-accent) 58%, white 16%);
  box-shadow: 0 0 12px var(--starbase-accent-soft);
}

.starbase-midring {
  width: 68px;
  height: 68px;
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 36%, white 10%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--starbase-accent) 18%, transparent);
}

.starbase-core-ring {
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 30%, white 10%);
}

.starbase-core-fill {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, var(--starbase-core), color-mix(in srgb, var(--starbase-accent) 26%, transparent) 74%);
  box-shadow: 0 0 10px var(--starbase-accent-soft);
}

.starbase-quarter.q-tl .starbase-shell,
.starbase-quarter.q-tl .starbase-rim { right: -45px; bottom: -45px; }
.starbase-quarter.q-tr .starbase-shell,
.starbase-quarter.q-tr .starbase-rim { left: -45px; bottom: -45px; }
.starbase-quarter.q-bl .starbase-shell,
.starbase-quarter.q-bl .starbase-rim { right: -45px; top: -45px; }
.starbase-quarter.q-br .starbase-shell,
.starbase-quarter.q-br .starbase-rim { left: -45px; top: -45px; }

.starbase-quarter.q-tl .starbase-midring { right: -34px; bottom: -34px; }
.starbase-quarter.q-tr .starbase-midring { left: -34px; bottom: -34px; }
.starbase-quarter.q-bl .starbase-midring { right: -34px; top: -34px; }
.starbase-quarter.q-br .starbase-midring { left: -34px; top: -34px; }

.starbase-quarter.q-tl .starbase-core-ring { right: -22px; bottom: -22px; }
.starbase-quarter.q-tr .starbase-core-ring { left: -22px; bottom: -22px; }
.starbase-quarter.q-bl .starbase-core-ring { right: -22px; top: -22px; }
.starbase-quarter.q-br .starbase-core-ring { left: -22px; top: -22px; }

.starbase-quarter.q-tl .starbase-core-fill { right: -13px; bottom: -13px; }
.starbase-quarter.q-tr .starbase-core-fill { left: -13px; bottom: -13px; }
.starbase-quarter.q-bl .starbase-core-fill { right: -13px; top: -13px; }
.starbase-quarter.q-br .starbase-core-fill { left: -13px; top: -13px; }

.starbase-spoke {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--starbase-core) 80%, var(--starbase-accent) 20%), color-mix(in srgb, var(--starbase-accent) 36%, white 8%));
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-quarter.q-tl .starbase-spoke { right: 5px; bottom: 9px; transform: rotate(-36deg); transform-origin: right center; }
.starbase-quarter.q-tr .starbase-spoke { left: 5px; bottom: 9px; transform: rotate(36deg); transform-origin: left center; }
.starbase-quarter.q-bl .starbase-spoke { right: 5px; top: 9px; transform: rotate(36deg); transform-origin: right center; }
.starbase-quarter.q-br .starbase-spoke { left: 5px; top: 9px; transform: rotate(-36deg); transform-origin: left center; }

.starbase-sector-block {
  width: 22px;
  height: 12px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--starbase-accent) 34%, white 12%), color-mix(in srgb, var(--starbase-accent) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 40%, white 10%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 8px color-mix(in srgb, var(--starbase-accent) 14%, transparent);
}

.starbase-quarter.q-tl .starbase-sector-block { right: 2px; bottom: 26px; transform: rotate(-28deg); transform-origin: right center; }
.starbase-quarter.q-tr .starbase-sector-block { left: 2px; bottom: 26px; transform: rotate(28deg); transform-origin: left center; }
.starbase-quarter.q-bl .starbase-sector-block { right: 2px; top: 26px; transform: rotate(28deg); transform-origin: right center; }
.starbase-quarter.q-br .starbase-sector-block { left: 2px; top: 26px; transform: rotate(-28deg); transform-origin: left center; }

.starbase-panel-band {
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--starbase-accent) 26%, white 6%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--starbase-accent) 16%, transparent);
}

.starbase-quarter.q-tl .starbase-panel-band.band-a { width: 14px; right: 11px; bottom: 22px; transform: rotate(-26deg); }
.starbase-quarter.q-tl .starbase-panel-band.band-b { width: 10px; right: 17px; bottom: 30px; transform: rotate(-16deg); }
.starbase-quarter.q-tr .starbase-panel-band.band-a { width: 14px; left: 11px; bottom: 22px; transform: rotate(26deg); }
.starbase-quarter.q-tr .starbase-panel-band.band-b { width: 10px; left: 17px; bottom: 30px; transform: rotate(16deg); }
.starbase-quarter.q-bl .starbase-panel-band.band-a { width: 14px; right: 11px; top: 22px; transform: rotate(26deg); }
.starbase-quarter.q-bl .starbase-panel-band.band-b { width: 10px; right: 17px; top: 30px; transform: rotate(16deg); }
.starbase-quarter.q-br .starbase-panel-band.band-a { width: 14px; left: 11px; top: 22px; transform: rotate(-26deg); }
.starbase-quarter.q-br .starbase-panel-band.band-b { width: 10px; left: 17px; top: 30px; transform: rotate(-16deg); }

.starbase-command-node {
  width: 8px;
  height: 8px;
  right: 12px;
  bottom: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--starbase-core), color-mix(in srgb, var(--starbase-accent) 18%, transparent) 72%);
  box-shadow: 0 0 6px var(--starbase-accent-soft);
}

.starbase-quarter.q-tl .starbase-sector-block,
.starbase-quarter.q-tl .starbase-panel-band {
  display: none;
}

.starbase-neon-inner {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.starbase-weapon-node {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--starbase-core), color-mix(in srgb, var(--starbase-accent) 24%, transparent) 74%);
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-weapon-node.node-a { left: 12px; bottom: 11px; }
.starbase-weapon-node.node-b { left: 19px; bottom: 18px; width: 6px; height: 6px; }

.starbase-bastion-rail {
  left: 11px;
  bottom: 23px;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--starbase-accent) 38%, white 8%);
  box-shadow: 0 0 8px var(--starbase-accent-soft);
}

.starbase-module-glyph.beam { bottom: 14px; left: 11px; width: 14px; }
.starbase-module-glyph.missile { bottom: 14px; left: 12px; width: 12px; height: 2px; }
.starbase-module-glyph.torpedo { bottom: 12px; left: 12px; width: 10px; height: 10px; }

.starbase-dock-bay {
  right: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 34%, white 10%);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--starbase-accent) 10%, transparent),
    0 0 10px var(--starbase-accent-soft);
}

.starbase-dock-arm.dock-1 { top: 12px; right: 5px; width: 8px; height: 2px; }
.starbase-dock-arm.dock-2 { top: 5px; right: 13px; width: 2px; height: 8px; }
.starbase-dock-arm.dock-3 { top: 21px; right: 15px; width: 8px; height: 2px; }

.starbase-quarter .ship-hp-bar,
.base-body .ship-hp-bar {
  z-index: 3;
}

.starbase-reactor-ring {
  left: 8px;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--starbase-accent) 36%, white 10%);
  box-shadow: 0 0 10px var(--starbase-accent-soft);
}

.starbase-reactor-node {
  left: 13px;
  top: 13px;
  width: 10px;
  height: 10px;
}

.starbase-reactor-feed {
  left: 10px;
  width: 16px;
  top: 18px;
}

.dread-segment-core {
  inset: 7px;
  border-radius: 8px;
}

.dread-head-link {
  background: rgba(235,245,255,0.22);
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
  border-radius: 999px;
  z-index: 2;
}

.dread-head-link.facing-right,
.dread-head-link.facing-left {
  top: 50%;
  width: 16px;
  height: 5px;
  transform: translateY(-50%);
}

.dread-head-link.facing-right { right: -7px; }
.dread-head-link.facing-left { left: -7px; }

.dread-head-link.facing-up,
.dread-head-link.facing-down {
  left: 50%;
  width: 5px;
  height: 16px;
  transform: translateX(-50%);
}

.dread-head-link.facing-up { top: -7px; }
.dread-head-link.facing-down { bottom: -7px; }

.carrier-head-link {
  background: rgba(235,245,255,0.18);
  box-shadow: 0 0 8px rgba(255,255,255,0.08);
  border-radius: 999px;
  z-index: 2;
}
.carrier-head-link.facing-right,
.carrier-head-link.facing-left {
  top: 50%;
  width: 12px;
  height: 4px;
  transform: translateY(-50%);
}
.carrier-head-link.facing-right { right: -5px; }
.carrier-head-link.facing-left { left: -5px; }
.carrier-head-link.facing-up,
.carrier-head-link.facing-down {
  left: 50%;
  width: 4px;
  height: 12px;
  transform: translateX(-50%);
}
.carrier-head-link.facing-up { top: -5px; }
.carrier-head-link.facing-down { bottom: -5px; }

.dread-link {
  background: rgba(235,245,255,0.16);
  box-shadow: 0 0 8px rgba(255,255,255,0.08);
  border-radius: 999px;
}

.dread-link.horiz {
  top: 50%;
  width: 14px;
  height: 5px;
  transform: translateY(-50%);
}

.dread-link.vert {
  left: 50%;
  width: 5px;
  height: 14px;
  transform: translateX(-50%);
}

.dread-link.horiz.facing-right.dread-link-back { left: -6px; }
.dread-link.horiz.facing-right.dread-link-forward { right: -6px; }
.dread-link.horiz.facing-left.dread-link-back { right: -6px; }
.dread-link.horiz.facing-left.dread-link-forward { left: -6px; }
.dread-link.vert.facing-down.dread-link-back { top: -6px; }
.dread-link.vert.facing-down.dread-link-forward { bottom: -6px; }
.dread-link.vert.facing-up.dread-link-back { bottom: -6px; }
.dread-link.vert.facing-up.dread-link-forward { top: -6px; }

.carrier-link {
  background: rgba(235,245,255,0.14);
  box-shadow: 0 0 7px rgba(255,255,255,0.06);
  border-radius: 999px;
}
.carrier-link.horiz {
  top: 50%;
  width: 10px;
  height: 4px;
  transform: translateY(-50%);
}
.carrier-link.vert {
  left: 50%;
  width: 4px;
  height: 10px;
  transform: translateX(-50%);
}
.carrier-link.horiz.facing-right { left: -4px; }
.carrier-link.horiz.facing-left { right: -4px; }
.carrier-link.vert.facing-down { top: -4px; }
.carrier-link.vert.facing-up { bottom: -4px; }

.dread-body.p1 .dread-segment-core {
  background: linear-gradient(180deg, rgba(74,158,255,0.18), rgba(74,158,255,0.08));
  box-shadow: inset 0 0 0 1px rgba(74,158,255,0.12);
}

.dread-body.p2 .dread-segment-core {
  background: linear-gradient(180deg, rgba(255,102,68,0.18), rgba(255,102,68,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,102,68,0.12);
}

/* carrier-segment-core color rules removed — body cell now uses SVG */

.dread-segment-spine.horiz,
.dread-mid-collar.horiz,
.dread-engine-block.horiz,
.dread-engine-flare.horiz,
.dread-engine-tail.horiz {
  top: 50%;
  transform: translateY(-50%);
}

.dread-segment-spine.vert,
.dread-mid-collar.vert,
.dread-engine-block.vert,
.dread-engine-flare.vert,
.dread-engine-tail.vert {
  left: 50%;
  transform: translateX(-50%);
}

.dread-segment-spine.horiz {
  left: 6px;
  right: 6px;
  height: 5px;
  border-radius: 999px;
}

.dread-segment-spine.vert {
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 999px;
}

.dread-body.p1 .dread-segment-spine { background: rgba(74,158,255,0.46); box-shadow: 0 0 10px rgba(74,158,255,0.22); }
.dread-body.p2 .dread-segment-spine { background: rgba(255,102,68,0.46); box-shadow: 0 0 10px rgba(255,102,68,0.22); }

/* carrier-segment-spine removed — body cell now uses SVG */

/* carrier-segment-core / bay / engine removed — body cell now uses SVG */

.dread-segment-armor {
  border: 1px solid rgba(240,248,255,0.18);
  border-radius: 7px;
}

.dread-segment-mid.horiz .armor-top { left: 10px; right: 10px; top: 6px; height: 10px; }
.dread-segment-mid.horiz .armor-bottom { left: 10px; right: 10px; bottom: 6px; height: 10px; }
.dread-segment-mid.vert .armor-top { top: 10px; bottom: 10px; left: 6px; width: 10px; }
.dread-segment-mid.vert .armor-bottom { top: 10px; bottom: 10px; right: 6px; width: 10px; }

.dread-segment-rear.horiz .armor-top { left: 7px; width: 13px; top: 7px; bottom: 7px; }
.dread-segment-rear.horiz .armor-bottom { right: 7px; width: 10px; top: 9px; bottom: 9px; }
.dread-segment-rear.vert .armor-top { top: 7px; height: 13px; left: 7px; right: 7px; }
.dread-segment-rear.vert .armor-bottom { bottom: 7px; height: 10px; left: 9px; right: 9px; }

.dread-mid-collar.horiz {
  left: 3px;
  right: 3px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(240,248,255,0.12);
}

.dread-mid-collar.vert {
  top: 3px;
  bottom: 3px;
  width: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(240,248,255,0.12);
}

.dread-mid-ribs span {
  position: absolute;
  background: rgba(240,248,255,0.22);
  border-radius: 999px;
}

.dread-segment-mid.horiz .dread-mid-ribs span {
  width: 3px;
  top: 9px;
  bottom: 9px;
}

.dread-segment-mid.horiz .dread-mid-ribs span:first-child { left: 12px; }
.dread-segment-mid.horiz .dread-mid-ribs span:last-child { right: 12px; }

.dread-segment-mid.vert .dread-mid-ribs span {
  height: 3px;
  left: 9px;
  right: 9px;
}

.dread-segment-mid.vert .dread-mid-ribs span:first-child { top: 12px; }
.dread-segment-mid.vert .dread-mid-ribs span:last-child { bottom: 12px; }

.dread-segment-rear.facing-right .dread-engine-block.horiz {
  right: 7px;
  width: 13px;
  height: 18px;
  border-radius: 8px;
}

.dread-segment-rear.facing-left .dread-engine-block.horiz {
  left: 7px;
  width: 13px;
  height: 18px;
  border-radius: 8px;
}

.dread-segment-rear.facing-down .dread-engine-block.vert {
  bottom: 7px;
  height: 13px;
  width: 18px;
  border-radius: 8px;
}

.dread-segment-rear.facing-up .dread-engine-block.vert {
  top: 7px;
  height: 13px;
  width: 18px;
  border-radius: 8px;
}

.dread-body.p1 .dread-engine-block { background: rgba(120,220,255,0.18); box-shadow: inset 0 0 0 1px rgba(120,220,255,0.18); }
.dread-body.p2 .dread-engine-block { background: rgba(255,180,120,0.18); box-shadow: inset 0 0 0 1px rgba(255,180,120,0.18); }

.dread-segment-rear.facing-right .dread-engine-flare.horiz {
  right: 0;
  width: 14px;
  height: 24px;
  border-radius: 999px;
  filter: blur(2px);
}

.dread-segment-rear.facing-left .dread-engine-flare.horiz {
  left: 0;
  width: 14px;
  height: 24px;
  border-radius: 999px;
  filter: blur(2px);
}

.dread-segment-rear.facing-down .dread-engine-flare.vert {
  bottom: 0;
  height: 14px;
  width: 24px;
  border-radius: 999px;
  filter: blur(2px);
}

.dread-segment-rear.facing-up .dread-engine-flare.vert {
  top: 0;
  height: 14px;
  width: 24px;
  border-radius: 999px;
  filter: blur(2px);
}

.dread-body.p1 .dread-engine-flare { background: rgba(110, 220, 255, 0.22); }
.dread-body.p2 .dread-engine-flare { background: rgba(255, 190, 110, 0.22); }

.dread-engine-nozzles span {
  position: absolute;
  background: rgba(245,250,255,0.45);
  border-radius: 999px;
}

.dread-segment-rear.horiz .dread-engine-nozzles span {
  width: 3px;
  height: 10px;
  top: 10px;
}

.dread-segment-rear.facing-right .dread-engine-nozzles span:first-child { right: 10px; }
.dread-segment-rear.facing-right .dread-engine-nozzles span:last-child { right: 5px; }
.dread-segment-rear.facing-left .dread-engine-nozzles span:first-child { left: 10px; }
.dread-segment-rear.facing-left .dread-engine-nozzles span:last-child { left: 5px; }

.dread-segment-rear.vert .dread-engine-nozzles span {
  width: 10px;
  height: 3px;
  left: 10px;
}

.dread-segment-rear.facing-down .dread-engine-nozzles span:first-child { bottom: 10px; }
.dread-segment-rear.facing-down .dread-engine-nozzles span:last-child { bottom: 5px; }
.dread-segment-rear.facing-up .dread-engine-nozzles span:first-child { top: 10px; }
.dread-segment-rear.facing-up .dread-engine-nozzles span:last-child { top: 5px; }

.dread-segment-rear.facing-right .dread-engine-tail.horiz {
  right: 4px;
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.dread-segment-rear.facing-left .dread-engine-tail.horiz {
  left: 4px;
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.dread-segment-rear.facing-down .dread-engine-tail.vert {
  bottom: 4px;
  height: 4px;
  width: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.dread-segment-rear.facing-up .dread-engine-tail.vert {
  top: 4px;
  height: 4px;
  width: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

/* Torpedo pending pulse */
.torpedo-pending {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
  border: 1px solid #880088;
  z-index: 5;
  animation: torp-pulse 1.2s ease-in-out infinite;
}

@keyframes torp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.65); }
}

/* ════════════════════════════════════════
   WRECKS
════════════════════════════════════════ */
.wreck-marker {
  width: 34px;
  height: 34px;
  position: absolute;
  top: calc((var(--board-cell-size) - 34px) / 2);
  left: calc((var(--board-cell-size) - 34px) / 2);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background: transparent;
  overflow: visible;
}

.wreck-marker::before,
.wreck-marker::after {
  content: '';
  position: absolute;
  inset: 0;
}

.wreck-marker::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 29% 29%, rgba(120, 234, 255, 0.9) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 50% 50%, rgba(12, 24, 36, 0.12) 0 55%, transparent 56%),
    radial-gradient(circle at 50% 50%, transparent 0 72%, rgba(213, 178, 138, 0.7) 73% 76%, transparent 77%);
  box-shadow:
    0 0 8px rgba(213, 178, 138, 0.18),
    inset 0 0 10px rgba(120, 234, 255, 0.06);
}

.wreck-marker::after {
  inset: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 0 6px rgba(213, 178, 138, 0.28))
    drop-shadow(0 0 2px rgba(120, 234, 255, 0.14));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 16.3L11.2 5.8 16.9 8.6 13.2 14.9 19.1 18.5' stroke='%23f4e3cf' stroke-width='1.9'/%3E%3Cpath d='M7.4 16.1l3-2.8m2.1-1.8l1.4-1.2m-0.9 5.1l2.9 2.5' stroke='%23fffaf1' stroke-width='1'/%3E%3Cpath d='M2.9 13.7l3.4-3.2 1.4 2.1-3 3.8z' stroke='%23d9b38f' stroke-width='1.35'/%3E%3Cpath d='M14.9 17.2l4-2.1 1.6 2.6-4.1 2.6z' stroke='%23d9b38f' stroke-width='1.35'/%3E%3Cpath d='M4.6 4.7h2.3M5.75 3.55v2.3' stroke='%2378eaff' stroke-width='1.15'/%3E%3C/g%3E%3C/svg%3E");
}

.wreck-marker[data-owner="1"]::before {
  background:
    radial-gradient(circle at 29% 29%, rgba(120, 234, 255, 0.96) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 50% 50%, rgba(12, 24, 36, 0.12) 0 55%, transparent 56%),
    radial-gradient(circle at 50% 50%, transparent 0 72%, rgba(96, 182, 255, 0.78) 73% 76%, transparent 77%);
  box-shadow:
    0 0 8px rgba(74, 158, 255, 0.22),
    inset 0 0 10px rgba(120, 234, 255, 0.08);
}

.wreck-marker[data-owner="2"]::before {
  background:
    radial-gradient(circle at 29% 29%, rgba(120, 234, 255, 0.88) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 50% 50%, rgba(18, 22, 28, 0.14) 0 55%, transparent 56%),
    radial-gradient(circle at 50% 50%, transparent 0 72%, rgba(255, 122, 96, 0.8) 73% 76%, transparent 77%);
  box-shadow:
    0 0 8px rgba(255, 102, 68, 0.2),
    inset 0 0 10px rgba(120, 234, 255, 0.06);
}

.wreck-marker[data-owner="1"]::after {
  filter:
    drop-shadow(0 0 6px rgba(74, 158, 255, 0.22))
    drop-shadow(0 0 2px rgba(120, 234, 255, 0.16));
}

.wreck-marker[data-owner="2"]::after {
  filter:
    drop-shadow(0 0 6px rgba(255, 102, 68, 0.22))
    drop-shadow(0 0 2px rgba(255, 186, 160, 0.12));
}

.wreck-neon,
.wreck-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wreck-hull {
  filter:
    drop-shadow(0 0 7px rgba(213, 178, 138, 0.22))
    drop-shadow(0 0 2px rgba(120, 234, 255, 0.12));
}

.wreck-ring,
.wreck-core,
.wreck-fracture,
.wreck-shard,
.wreck-salvage {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wreck-ring {
  stroke: color-mix(in srgb, var(--wreck-color) 74%, #ffffff 26%);
  stroke-width: 1.75;
  opacity: 0.72;
}

.wreck-core {
  stroke: color-mix(in srgb, var(--wreck-color) 64%, #f6fbff 36%);
  stroke-width: 2.4;
  opacity: 0.95;
}

.wreck-fracture {
  stroke: rgba(245, 250, 255, 0.74);
  stroke-width: 1.15;
}

.wreck-shard {
  stroke: color-mix(in srgb, var(--wreck-color) 52%, #f4fbff 48%);
  stroke-width: 1.7;
  opacity: 0.88;
}

.wreck-salvage {
  stroke: var(--wreck-accent);
  stroke-width: 1.45;
  opacity: 0.96;
}

.wreck-neon.p1 .wreck-core,
.wreck-neon.p1 .wreck-shard {
  stroke: color-mix(in srgb, var(--p1) 40%, var(--wreck-color) 60%);
}

.wreck-neon.p2 .wreck-core,
.wreck-neon.p2 .wreck-shard {
  stroke: color-mix(in srgb, var(--p2) 40%, var(--wreck-color) 60%);
}

/* ════════════════════════════════════════
   COMBAT LOG
════════════════════════════════════════ */
#combat-log { flex: 1; overflow-y: auto; font-size: 10px; line-height: 1.6; margin-bottom: 4px; }

.log-entry { padding: 2px 3px; border-bottom: 1px solid #04101e; color: var(--text-dim); }
.log-entry.turn      { color: var(--accent); font-weight: bold; }
.log-entry.hit       { color: #ff9977; }
.log-entry.miss      { color: #5a7a9a; }
.log-entry.no-target { color: var(--orange); font-weight: bold; }
.log-entry.system    { color: var(--yellow); }
.log-entry.move      { color: #6688bb; }
.log-entry.repair    { color: var(--green); }
.log-entry.torpedo   { color: var(--purple); }
.log-entry.destroyed { color: var(--red); font-weight: bold; }
.log-entry.economy   { color: #44bb77; }
.log-entry.upgrade   { color: var(--yellow); }
.log-entry.ion       { color: #44ccff; }
.log-entry.shield    { color: #7799ff; }
.log-entry.cp        { color: var(--cp-color); }
.log-entry.produce   { color: var(--yellow); }
.log-entry.salvage   { color: var(--orange); }
.log-entry.base      { color: var(--red); font-weight: bold; }

#torpedo-section { margin-top: 4px; }
#torpedo-list { font-size: 10px; color: var(--purple); }
.torpedo-entry { padding: 2px 0; }

/* ════════════════════════════════════════
   MODALS
════════════════════════════════════════ */
#import-dialog, #end-turn-modal, #leave-game-modal, #self-destruct-modal, #forfeit-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#import-dialog-inner, #end-turn-modal-inner, #leave-game-modal-inner, #self-destruct-modal-inner, #forfeit-modal-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  width: 90vw;
}

.modal-title { font-size: 14px; color: var(--yellow); font-weight: bold; }
.modal-title-danger { color: rgba(255,100,80,0.95); }
.modal-body  { font-size: 11px; color: var(--text-dim); line-height: 1.6; }
.modal-buttons { display: flex; gap: 8px; }
.modal-buttons button { flex: 1; text-align: center; }

#import-text {
  background: #05101e;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px;
  font-family: inherit;
  font-size: 10px;
  resize: vertical;
  width: 100%;
  min-height: 120px;
}

.dialog-buttons { display: flex; gap: 8px; }
.dialog-buttons button { flex: 1; text-align: center; }

/* ════════════════════════════════════════
   WIN SCREEN
════════════════════════════════════════ */
#win-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  z-index: 999;
  padding: 20px;
}

#win-screen.visible { display: flex; }

#win-screen-inner {
  width: min(920px, 100%);
  max-height: min(82vh, 900px);
  overflow: auto;
  background: linear-gradient(180deg, rgba(14,24,40,0.98), rgba(8,14,26,0.98));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  padding: 22px;
}

#win-message { font-size: 28px; font-weight: bold; letter-spacing: 4px; text-align: center; }
#win-message.p1 { color: var(--p1); }
#win-message.p2 { color: var(--p2); }
#win-sub { color: var(--text-dim); font-size: 13px; text-align: center; margin-top: 6px; }

#win-summary {
  margin-top: 14px;
  margin-bottom: 14px;
  text-align: center;
  color: var(--text);
  font-size: 13px;
}

.postgame-rounds strong {
  color: var(--accent);
  font-size: 15px;
}

#postgame-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.postgame-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
}

.postgame-card.p1 { box-shadow: inset 0 0 0 1px rgba(74,158,255,0.12); }
.postgame-card.p2 { box-shadow: inset 0 0 0 1px rgba(255,102,68,0.12); }

.postgame-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.postgame-side-name {
  font-size: 16px;
  font-weight: bold;
}

.postgame-side-result {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.postgame-stat {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.postgame-stat span {
  color: var(--text-dim);
  font-size: 11px;
}

.postgame-stat strong {
  color: var(--text);
  font-size: 15px;
}

.win-buttons { display: flex; gap: 14px; }
.win-buttons button { font-size: 13px; padding: 9px 24px; text-align: center; width: auto; display: inline-block; }

@media (max-width: 760px) {
  #postgame-stats {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ════════════════════════════════════════
   SELF-DESTRUCT BUTTON
════════════════════════════════════════ */
.action-btn-destruct {
  border-color: rgba(255,68,55,0.5);
  color: rgba(255,100,80,0.9);
  font-size: 10px;
}
.action-btn-destruct:hover:not(:disabled) {
  background: rgba(255,68,55,0.15);
  border-color: rgba(255,68,55,0.8);
}

/* ════════════════════════════════════════
   HOTSEAT BOARD FLIP
════════════════════════════════════════ */
#board.board-flipped {
  transform: rotate(180deg);
}
/* Counter-rotate all content that should appear upright */
#board.board-flipped .ship-marker,
#board.board-flipped .wreck-marker,
#board.board-flipped .control-point,
#board.board-flipped .mine-spot-marker,
#board.board-flipped .base-marker,
#board.board-flipped .base-body,
#board.board-flipped .dread-body {
  transform: rotate(180deg);
}

/* ════════════════════════════════════════
   HOTSEAT HANDOFF OVERLAY
════════════════════════════════════════ */
#hotseat-handoff {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
#hotseat-handoff-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px 40px;
  max-width: 380px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#btn-hotseat-ready {
  font-size: 14px;
  padding: 10px 28px;
  background: var(--btn-success);
  border-color: var(--green);
  color: var(--green);
  width: auto;
  display: inline-block;
  letter-spacing: 1px;
}
#btn-hotseat-ready:hover { background: rgba(68,238,136,0.12); }

/* ════════════════════════════════════════
   MOBILE & RESPONSIVE LAYOUT
════════════════════════════════════════ */

/* Panel toggle buttons (mobile) */
.panel-toggle-btn {
  display: none;
  position: fixed;
  z-index: 200;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 9px;
  font-size: 13px;
  cursor: pointer;
  color: var(--accent);
  line-height: 1;
}
.panel-toggle-btn:hover { background: var(--btn-hover); }

#toggle-left-panel  { top: 48px; left: 4px; }
#toggle-right-panel { top: 48px; right: 4px; }

@media (max-width: 900px) {
  /* Show toggle buttons */
  .panel-toggle-btn { display: block; }

  /* Left panel: off-screen by default, slides in */
  #left-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 199;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    width: 230px;
    min-width: 230px;
    box-shadow: 4px 0 20px rgba(0,0,0,0.6);
  }
  #left-panel.panel-open {
    transform: translateX(0);
  }

  /* Right panel: off-screen by default, slides in from right */
  #right-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 199;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    width: 220px;
    min-width: 220px;
    box-shadow: -4px 0 20px rgba(0,0,0,0.6);
  }
  #right-panel.panel-open {
    transform: translateX(0);
  }

  /* Board takes full width */
  #board-container { width: 100%; }

  /* Tap-away overlay when a panel is open */
  #panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 198;
    background: rgba(0,0,0,0.35);
  }
  #panel-overlay.active { display: block; }
}

@media (max-width: 600px) {
  /* Smaller cell size on small phones */
  #board {
    grid-template-columns: repeat(var(--board-cols, 30), 24px);
    grid-template-rows:    repeat(var(--board-rows, 30), 24px);
  }
  .cell { width: 24px; height: 24px; }
  .ship-marker { width: 22px; height: 22px; top: 1px; left: 1px; border-radius: 4px; font-size: 10px; }
  .ship-symbol { font-size: 10px; }
  .asteroid { font-size: 8px; }
}

/* ===== Layout cleanup patch ===== */
#screen-game.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

#top-bar {
  position: sticky;
  top: 0;
  z-index: 150;
  flex-wrap: wrap;
  row-gap: 6px;
}

#top-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#main-layout,
#board-container,
#board-scroll {
  min-height: 0;
}

#board-container {
  position: relative;
}

#zoom-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(11,20,34,0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
}

#board-scroll {
  padding-top: 56px;
}

#left-panel,
#right-panel {
  min-height: 0;
}

@media (min-width: 901px) {
  .panel-toggle-btn {
    display: none !important;
  }
}

@media (max-width: 900px) {
  #top-bar {
    padding: 4px 40px 4px 40px;
    gap: 4px;
    align-items: stretch;
    min-height: 0;
  }

  #game-title {
    display: none;
  }

  #game-status,
  #top-controls {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #game-status::-webkit-scrollbar,
  #top-controls::-webkit-scrollbar {
    display: none;
  }

  #game-status {
    order: 1;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 0;
  }

  #top-controls {
    order: 2;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    padding-bottom: 0;
  }

  #top-controls button,
  .status-badge {
    flex: 0 0 auto;
  }

  .status-badge {
    padding: 2px 6px;
    font-size: 10px;
  }

  #top-controls button {
    padding: 3px 6px;
    font-size: 9px;
  }

  #toggle-left-panel,
  #toggle-right-panel {
    top: 8px;
  }

  #toggle-left-panel { left: 8px; }
  #toggle-right-panel { right: 8px; }

  /* On smaller screens, keep a forced-width tabletop layout instead of
     collapsing the side panels into bottom sheets. */
  #screen-game.active,
  #app {
    overflow-x: auto;
    overflow-y: hidden;
  }

  #app,
  #main-layout {
    min-width: 980px;
  }

  #toggle-left-panel {
    display: none !important;
  }

  #left-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 240px;
    min-width: 240px;
    height: auto;
    max-height: none;
    transform: none !important;
    border-top: none;
    border-left: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  #right-panel {
    position: fixed;
    top: 48px;
    right: 0;
    left: auto;
    bottom: 0;
    width: 260px;
    min-width: 260px;
    height: auto;
    max-height: none;
    border-top: none;
    border-left: 1px solid var(--border);
    border-right: none;
    border-radius: 0;
    box-shadow: -10px 0 28px rgba(0,0,0,0.42);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    overflow: hidden;
  }

  #right-panel.panel-open {
    transform: translateX(0);
  }

  #board-container {
    width: auto;
    min-width: 0;
  }

  #board-scroll {
    padding: 8px 8px 56px;
  }

  #zoom-controls {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 6px;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  #game-status {
    gap: 3px;
  }

  #top-controls {
    justify-content: flex-end;
  }

  #btn-save,
  #btn-load,
  #btn-export,
  #btn-import {
    display: none;
  }

  #top-controls button {
    padding: 3px 6px;
    font-size: 9px;
  }

  #left-panel,
  #right-panel {
    height: min(78dvh, 640px);
    max-height: min(78dvh, 640px);
  }
}

@media (max-width: 600px) {
  #board {
    grid-template-columns: repeat(var(--board-cols, 30), 28px);
    grid-template-rows:    repeat(var(--board-rows, 30), 28px);
  }

  .cell {
    width: 28px;
    height: 28px;
  }

  .ship-marker {
    width: 26px;
    height: 26px;
    top: 1px;
    left: 1px;
  }

  .mine-spot-marker,
  .control-point {
    width: 20px;
    height: 20px;
    top: 3px;
    left: 3px;
    border-width: 2px;
    font-size: 8px;
  }

  #top-bar {
    padding-left: 36px;
    padding-right: 36px;
  }

  #board-scroll {
    padding: 4px 4px 56px;
  }

  #zoom-controls {
    gap: 3px;
    padding: 3px 6px;
  }

  #zoom-label,
  .map-seed-display {
    font-size: 8px;
  }

  .status-badge {
    font-size: 9px;
    padding: 2px 5px;
  }

  .ship-id-tag,
  .ship-status-row,
  .stance-icon,
  .rank-icon {
    display: none !important;
  }

  .ship-shields {
    top: 2px;
    left: 3px;
    gap: 1px;
  }

  .ship-hp-bar {
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 3px;
  }

  #left-panel,
  #right-panel {
    height: min(82dvh, 700px);
    max-height: min(82dvh, 700px);
  }
}

@media (max-width: 1100px) {
  #screen-game.active,
  #app {
    overflow-x: auto;
    overflow-y: hidden;
  }

  #app {
    min-width: 980px;
  }

  #main-layout {
    min-width: 980px;
  }

  #toggle-left-panel {
    display: none !important;
  }

  #left-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 240px;
    min-width: 240px;
    height: auto;
    max-height: none;
    transform: none !important;
    border-top: none;
    border-left: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }

  #board-container {
    width: auto;
    min-width: 0;
  }

  #board-scroll {
    padding: 8px 8px 56px;
  }

  #right-panel {
    position: fixed;
    top: 48px;
    right: 0;
    left: auto;
    bottom: 0;
    width: 260px;
    min-width: 260px;
    height: auto;
    max-height: none;
    border-top: none;
    border-left: 1px solid var(--border);
    border-right: none;
    border-radius: 0;
    box-shadow: -10px 0 28px rgba(0,0,0,0.42);
    transform: translateX(100%);
  }

  #right-panel.panel-open {
    transform: translateX(0);
  }
}

/* ════════════════════════════════════════
   DEFENSE TURRET MARKER
════════════════════════════════════════ */
.ship-marker.turret-marker {
  border-radius: 4px;
  border-style: dashed;
}

.turret-neon-inner {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.turret-ship-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turret-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.turret-hull {
  filter: drop-shadow(0 0 5px currentColor);
}

.turret-svg .outer-stroke {
  stroke: currentColor;
  stroke-width: 4.8;
  opacity: 0.22;
  filter: drop-shadow(0 0 8px currentColor);
}

.turret-svg .inner-stroke {
  stroke: currentColor;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px currentColor);
}

.turret-svg .detail-stroke {
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.12));
}

/* ════════════════════════════════════════
   COMMANDER PING MARKERS
════════════════════════════════════════ */
.commander-ping-marker {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.hunt-ping-marker {
  border: 2px dashed;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  position: absolute;
  top: calc((var(--board-cell-size) - 28px) / 2);
  left: calc((var(--board-cell-size) - 28px) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: bold;
  pointer-events: none;
  z-index: 3;
}

.hunt-ping-marker.p1 {
  border-color: var(--p1);
  color: var(--p1);
  box-shadow: 0 0 8px rgba(74,158,255,0.35);
  animation: ping-pulse 1.8s ease-in-out infinite;
}

.hunt-ping-marker.p2 {
  border-color: var(--p2);
  color: var(--p2);
  box-shadow: 0 0 8px rgba(255,102,68,0.35);
  animation: ping-pulse 1.8s ease-in-out infinite;
}

.defend-ping-marker {
  border: 2px solid;
  border-radius: 3px;
  width: 28px;
  height: 28px;
  position: absolute;
  top: calc((var(--board-cell-size) - 28px) / 2);
  left: calc((var(--board-cell-size) - 28px) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: bold;
  pointer-events: none;
  z-index: 3;
}

.defend-ping-marker.p1 {
  border-color: var(--p1);
  color: var(--p1);
  box-shadow: 0 0 8px rgba(74,158,255,0.35);
  animation: ping-pulse 1.8s ease-in-out infinite;
}

.defend-ping-marker.p2 {
  border-color: var(--p2);
  color: var(--p2);
  box-shadow: 0 0 8px rgba(255,102,68,0.35);
  animation: ping-pulse 1.8s ease-in-out infinite;
}

@keyframes ping-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ════════════════════════════════════════
   PING ACTION BUTTONS
════════════════════════════════════════ */
#ping-controls {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.action-btn-ping {
  font-size: 10px;
  flex: 1;
  border-color: rgba(100,180,255,0.3);
  color: rgba(140,200,255,0.8);
}

.action-btn-ping:hover:not(:disabled) {
  background: rgba(74,158,255,0.1);
  border-color: rgba(74,158,255,0.6);
}

.action-btn-ping.ping-active {
  background: rgba(74,158,255,0.12);
  border-color: var(--p1);
  color: var(--p1);
  box-shadow: 0 0 6px rgba(74,158,255,0.22);
}

.action-btn-ping.ping-placing {
  background: rgba(255,204,0,0.1);
  border-color: var(--yellow);
  color: var(--yellow);
  animation: ping-btn-blink 0.8s ease-in-out infinite;
}

@keyframes ping-btn-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}