/* polish.css — Space Vector UI Redesign
   Layers on top of styles.css — all board/ship/cell rendering untouched.
   Improves: typography, home, lobby, howto, HUD, buttons, modals, win screen.
*/

/* ════════════════════════════════════════
   FONT OVERRIDES
════════════════════════════════════════ */
:root {
  --font-ui:   'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Slightly refined color palette */
  --bg-dark:       #03080f;
  --bg-panel:      #080f1c;
  --bg-card:       #0b1325;
  --border:        #1b3050;
  --border-dim:    #0f1d30;
  --border-glow:   rgba(0, 208, 255, 0.22);
  --text:          #d4e8ff;
  --text-dim:      #527090;
  --text-muted:    #253a52;
  --accent:        #00d4ff;
  --accent-glow:   rgba(0, 212, 255, 0.35);
  --p1:            #4aa8ff;
  --p2:            #ff6644;
  --green:         #3df080;
  --yellow:        #ffc940;
  --red:           #ff3d55;
  --purple:        #cc88ff;
  --cp-color:      #00ffcc;
  --shadow-panel:  0 8px 32px rgba(0,0,0,0.55);
}

html, body {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Keep monospace for game data */
#combat-log,
#ship-stats,
#ship-weapons,
#ship-system-damage,
#ship-upgrades,
#base-stats,
#base-weapons,
#base-upgrades-list,
#base-production-info,
#resource-row,
#credits-display,
.howto-table,
.stat-row,
.eco-row,
.weapon-entry,
.sys-dmg-entry,
.log-entry,
.torpedo-entry,
.map-seed-display,
#zoom-label {
  font-family: var(--font-mono);
}

/* ════════════════════════════════════════
   ANIMATED STAR FIELD (home + screens)
════════════════════════════════════════ */
@keyframes star-drift {
  0%   { transform: translateY(0);    opacity: 0.7; }
  50%  { opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0.7; }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}
@keyframes logo-pulse {
  0%, 100% { text-shadow: 0 0 18px rgba(0,212,255,0.55), 0 0 40px rgba(0,212,255,0.18); }
  50%       { text-shadow: 0 0 28px rgba(0,212,255,0.80), 0 0 60px rgba(0,212,255,0.28), 0 0 90px rgba(0,212,255,0.10); }
}
@keyframes scan-line {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glow-pulse-btn {
  0%, 100% { box-shadow: 0 0 12px rgba(0,212,255,0.35); }
  50%       { box-shadow: 0 0 22px rgba(0,212,255,0.55), 0 0 40px rgba(0,212,255,0.15); }
}
@keyframes end-turn-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(61,240,128,0.3); }
  50%       { box-shadow: 0 0 18px rgba(61,240,128,0.55), 0 0 32px rgba(61,240,128,0.2); }
}
@keyframes damage-flash {
  0%, 100% { opacity: 1; }
  20%       { opacity: 0.3; }
}

/* ════════════════════════════════════════
   SCREEN BASE
════════════════════════════════════════ */
.screen {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(60,100,255,0.09), transparent 30%),
    radial-gradient(ellipse at 80% 8%,  rgba(255,90,60,0.07),  transparent 28%),
    radial-gradient(ellipse at 55% 75%, rgba(70,200,185,0.06), transparent 26%),
    linear-gradient(180deg, #03080f 0%, #040a16 60%, #030710 100%);
}

/* ════════════════════════════════════════
   HOME SCREEN — complete overhaul
════════════════════════════════════════ */
#screen-home.active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  overflow-y: auto;
  position: relative;
}

/* Animated star particles via pseudo-element */
#screen-home::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8%  12%,  rgba(255,255,255,0.90), transparent),
    radial-gradient(1px   1px   at 23% 47%,  rgba(200,230,255,0.75), transparent),
    radial-gradient(1.5px 1.5px at 39% 7%,   rgba(255,255,255,0.80), transparent),
    radial-gradient(1px   1px   at 64% 29%,  rgba(255,255,255,0.70), transparent),
    radial-gradient(2px   2px   at 78% 63%,  rgba(255,248,210,0.85), transparent),
    radial-gradient(1px   1px   at 91% 18%,  rgba(200,226,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 46% 84%,  rgba(255,255,255,0.76), transparent),
    radial-gradient(1px   1px   at 14% 91%,  rgba(255,245,190,0.68), transparent),
    radial-gradient(1px   1px   at 57% 53%,  rgba(255,255,255,0.55), transparent),
    radial-gradient(1px   1px   at 33% 72%,  rgba(200,226,255,0.50), transparent),
    radial-gradient(1px   1px   at 71% 39%,  rgba(255,255,255,0.52), transparent),
    radial-gradient(1px   1px   at 85% 82%,  rgba(255,248,210,0.48), transparent),
    radial-gradient(1px   1px   at 4%  56%,  rgba(200,226,255,0.45), transparent),
    radial-gradient(1px   1px   at 50% 21%,  rgba(255,255,255,0.48), transparent),
    radial-gradient(0.8px 0.8px at 17% 33%,  rgba(255,255,255,0.38), transparent),
    radial-gradient(0.8px 0.8px at 42% 61%,  rgba(200,226,255,0.35), transparent),
    radial-gradient(0.8px 0.8px at 68% 14%,  rgba(255,255,255,0.36), transparent),
    radial-gradient(0.8px 0.8px at 89% 48%,  rgba(255,248,210,0.34), transparent),
    radial-gradient(0.8px 0.8px at 29% 88%,  rgba(255,255,255,0.32), transparent),
    radial-gradient(0.8px 0.8px at 76% 75%,  rgba(200,226,255,0.30), transparent),
    /* nebula washes */
    radial-gradient(ellipse at 15% 15%, rgba(60,100,255,0.08), transparent 25%),
    radial-gradient(ellipse at 82% 12%, rgba(255,90,60,0.06),  transparent 22%),
    radial-gradient(ellipse at 52% 78%, rgba(70,200,185,0.06), transparent 20%);
  animation: star-twinkle 6s ease-in-out infinite alternate;
}

.home-wrap {
  max-width: 1100px;
  width: min(94%, 1100px);
  padding: 64px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
  position: relative;
  z-index: 1;
  animation: fade-in-up 0.7s ease both;
}

/* LOGO */
.home-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

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

.logo-title {
  font-family: var(--font-ui);
  font-size: clamp(36px, 6vw, 58px);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: clamp(6px, 1.5vw, 12px);
  animation: logo-pulse 3.5s ease-in-out infinite;
  line-height: 1;
}

.logo-star {
  color: var(--accent);
  font-size: clamp(18px, 3vw, 28px);
  opacity: 0.5;
  animation: star-twinkle 2.8s ease-in-out infinite alternate;
}
.logo-star:last-child { animation-delay: 1.4s; }

.logo-sub {
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.5vw, 13px);
  font-weight: 500;
  letter-spacing: clamp(3px, 0.6vw, 5px);
  text-transform: uppercase;
  opacity: 0.75;
}

/* INTRO */
.home-intro {
  max-width: 780px;
}

.home-intro p {
  color: var(--text-dim);
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.75;
  margin-bottom: 24px;
  font-weight: 400;
}

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

.feature-item {
  background: linear-gradient(135deg, rgba(14,24,40,0.92), rgba(9,16,28,0.95));
  border: 1px solid var(--border-dim);
  border-left: 2px solid rgba(0,212,255,0.3);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(180,210,240,0.75);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: border-color 0.2s, background 0.2s;
}

.feature-item:hover {
  border-left-color: var(--accent);
  background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(9,16,28,0.95));
  color: var(--text);
}

.fi-icon {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

/* SHOWCASE */
.home-showcase {
  width: 100%;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

.home-showcase-card {
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(10,20,36,0.97), rgba(6,12,22,0.98));
  border-radius: 14px;
  padding: 22px;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.03) inset,
    0 24px 48px rgba(0,0,0,0.45);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.home-showcase-card:hover {
  border-color: rgba(0,212,255,0.25);
  box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset, 0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,212,255,0.08);
}

.hero-card-label {
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
}

.hero-brief-title {
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.hero-brief-body {
  color: rgba(180,210,240,0.7);
  font-size: 13px;
  line-height: 1.75;
  font-weight: 400;
}

.hero-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,212,255,0.2);
  background: rgba(0,212,255,0.05);
  color: rgba(150,200,230,0.8);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.hero-chip:hover {
  border-color: rgba(0,212,255,0.4);
  background: rgba(0,212,255,0.1);
  color: var(--accent);
}

/* HOME CTAs */
.home-cta {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cta-primary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 14px 42px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s, transform 0.15s;
  animation: glow-pulse-btn 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.cta-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,212,255,0.0));
  opacity: 0;
  transition: opacity 0.2s;
}
.cta-primary:hover {
  background: rgba(0,212,255,0.1);
  box-shadow: 0 0 28px rgba(0,212,255,0.4), 0 0 60px rgba(0,212,255,0.15);
  transform: translateY(-1px);
}
.cta-primary:hover::before { opacity: 1; }
.cta-primary:active { transform: translateY(0); }

.cta-secondary {
  background: rgba(12,22,38,0.8);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 14px 28px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.cta-secondary:hover {
  background: rgba(18,32,52,0.9);
  border-color: rgba(80,130,180,0.5);
  color: var(--text);
  transform: translateY(-1px);
}
.cta-secondary.sm {
  padding: 7px 16px;
  font-size: 11px;
  letter-spacing: 0.3px;
  transform: none;
}
.cta-secondary.sm:hover { transform: none; }

/* ════════════════════════════════════════
   HOW TO PLAY — improved
════════════════════════════════════════ */
.howto-wrap { max-width: 860px; }

.howto-title {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.howto-topbar {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 28px;
}

.howto-tabbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(8,14,26,0.9);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset;
}

.howto-tab {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  width: auto;
  display: inline-block;
  text-align: center;
}
.howto-tab:hover {
  background: rgba(0,212,255,0.06);
  color: var(--text);
  border-color: rgba(0,212,255,0.15);
}
.howto-tab.active {
  color: var(--accent);
  border-color: rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.08);
  box-shadow: 0 0 14px rgba(0,212,255,0.08) inset;
}

.howto-panel {
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 22px;
  background: linear-gradient(160deg, rgba(9,16,30,0.96), rgba(6,12,22,0.98));
  box-shadow: 0 2px 0 rgba(255,255,255,0.015) inset;
}

.howto-section h2 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-dim);
}

.howto-section h3 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
}

.howto-section p {
  color: rgba(180,210,240,0.72);
  font-size: 12.5px;
  line-height: 1.8;
  font-family: var(--font-ui);
}

.howto-table { font-family: var(--font-mono); }

.howto-table th {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(8,16,28,0.95);
  border: 1px solid var(--border-dim);
  padding: 8px 12px;
}

.howto-table td {
  font-size: 11px;
  padding: 7px 12px;
  border: 1px solid var(--border-dim);
  color: var(--text);
  line-height: 1.5;
}

.howto-table tr:nth-child(even) td {
  background: rgba(10,18,32,0.6);
}

/* ════════════════════════════════════════
   LOBBY — improved
════════════════════════════════════════ */
.lobby-title {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
}

.lobby-topbar {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.lobby-card {
  background: linear-gradient(160deg, rgba(10,18,34,0.97), rgba(7,13,24,0.98));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  gap: 12px;
  box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset, 0 8px 24px rgba(0,0,0,0.35);
  transition: border-color 0.2s;
}
.lobby-card:hover {
  border-color: rgba(27,48,80,0.9);
}

.lobby-card-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-dim);
}
.lobby-card-title.p1 { color: var(--p1); }
.lobby-card-title.p2 { color: var(--p2); }

.lobby-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

.lobby-input {
  background: rgba(4,10,20,0.9);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lobby-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.12);
}

.toggle-opt {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  gap: 10px;
  cursor: pointer;
  transition: color 0.15s;
}
.toggle-opt:hover { color: var(--text); }
.toggle-opt input[type="radio"] { accent-color: var(--accent); }

.diff-btn {
  flex: 1;
  text-align: center;
  padding: 7px 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  background: rgba(8,16,28,0.9);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: inline-block;
  width: auto;
  letter-spacing: 0.3px;
}
.diff-btn:hover { background: rgba(16,28,48,0.95); color: var(--text); border-color: rgba(50,90,140,0.7); }
.diff-btn.active {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.45);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 10px rgba(0,212,255,0.1) inset;
}

.diff-descriptions {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-top: 4px;
}

.coming-soon-badge {
  background: rgba(40,26,0,0.85);
  color: var(--yellow);
  border: 1px solid rgba(80,52,0,0.8);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
}

.room-btn {
  background: rgba(10,18,32,0.9);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  display: inline-block;
  width: auto;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.room-btn:hover:not(:disabled) {
  background: rgba(16,28,48,0.95);
  color: var(--text);
  border-color: rgba(50,90,140,0.6);
}

.room-code-display {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
}

.mission-preview-title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.mission-preview-meta {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.8;
}

.mission-preview-body {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
}

.mission-preview-notes {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.65;
}

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

.lobby-note {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--text-muted);
}

.lobby-actions { padding-top: 12px; }

/* ════════════════════════════════════════
   GAME SCREEN — TOP BAR
════════════════════════════════════════ */
#top-bar {
  background: rgba(6,12,22,0.97);
  border-bottom: 1px solid var(--border);
  padding: 6px 16px;
  min-height: 42px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  gap: 16px;
}

#game-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0,212,255,0.4);
  transition: text-shadow 0.2s;
  white-space: nowrap;
}
#game-title:hover {
  text-shadow: 0 0 20px rgba(0,212,255,0.65);
}

.status-badge {
  background: rgba(4,10,20,0.9);
  border: 1px solid var(--border-dim);
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: border-color 0.15s, background 0.15s;
}

.status-badge.p1 {
  border-color: rgba(74,168,255,0.45);
  color: var(--p1);
  background: rgba(74,168,255,0.07);
}
.status-badge.p2 {
  border-color: rgba(255,100,68,0.45);
  color: var(--p2);
  background: rgba(255,100,68,0.07);
}

#top-controls button {
  display: inline-block;
  width: auto;
  padding: 4px 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#top-controls button:hover:not(:disabled) {
  background: rgba(18,32,52,0.95);
  border-color: rgba(50,90,140,0.5);
  color: var(--text);
}

#btn-forfeit {
  color: rgba(255,70,60,0.85) !important;
  border-color: rgba(255,70,60,0.4) !important;
}
#btn-forfeit:hover {
  background: rgba(255,60,50,0.1) !important;
  color: var(--red) !important;
}

/* ════════════════════════════════════════
   LEFT PANEL
════════════════════════════════════════ */
#left-panel {
  background: rgba(7,12,22,0.98);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 16px rgba(0,0,0,0.45);
}

#left-panel-top {
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(0,212,255,0.7);
  border-bottom: 1px solid var(--border-dim);
  padding-bottom: 5px;
  margin-bottom: 7px;
}

.hint-text {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 6px;
}

/* Credits display */
#credits-section { padding: 8px 10px 6px; }

.credit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--border-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  transition: border-color 0.15s, background 0.15s;
}
.credit-row.active-player {
  border-color: rgba(255,200,0,0.45);
  background: rgba(255,200,0,0.04);
}
.credit-row.p1 { color: var(--p1); }
.credit-row.p2 { color: var(--p2); }

.resource-chip {
  background: rgba(4,10,20,0.9);
  border: 1px solid var(--border-dim);
  padding: 3px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}
.cp-chip {
  border-color: rgba(0,255,200,0.28);
  color: var(--cp-color);
}

/* Ship details text */
#ship-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
#ship-name.p1 { color: var(--p1); }
#ship-name.p2 { color: var(--p2); }
#ship-name.inspect { color: var(--orange); }

.stat-label { color: var(--text-dim); font-size: 10px; }
.stat-val   { color: var(--text);     font-size: 10px; font-weight: 600; }

.weapon-label {
  color: var(--text-dim);
  font-size: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.weapon-entry { color: var(--yellow); font-size: 10px; }
.weapon-entry.empty { color: var(--text-muted); }
.sys-dmg-entry { color: var(--yellow); font-size: 10px; }

/* ════════════════════════════════════════
   BUTTONS — universal overhaul
════════════════════════════════════════ */
button {
  background: rgba(10,18,32,0.92);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  display: block;
  width: 100%;
  text-align: left;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
  letter-spacing: 0.2px;
}

button:hover:not(:disabled) {
  background: rgba(16,28,48,0.98);
  border-color: rgba(50,90,140,0.55);
  color: var(--text);
}
button:active:not(:disabled) {
  background: rgba(18,32,54,1);
  border-color: rgba(60,110,170,0.6);
}
button:disabled { opacity: 0.3; cursor: not-allowed; }
button.active {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.45);
  color: var(--accent);
}

/* End turn */
button.btn-end-turn {
  background: rgba(20,55,32,0.9);
  border: 1.5px solid rgba(50,180,90,0.55);
  color: var(--green);
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  padding: 9px;
  letter-spacing: 0.5px;
  border-radius: 6px;
  animation: end-turn-pulse 2.8s ease-in-out infinite;
  transition: background 0.15s, box-shadow 0.15s;
}
button.btn-end-turn:hover {
  background: rgba(28,68,40,0.95);
  box-shadow: 0 0 22px rgba(61,240,128,0.3);
}

/* Cancel */
button.btn-cancel {
  background: rgba(38,10,10,0.9);
  border: 1px solid rgba(80,22,22,0.8);
  color: rgba(255,140,140,0.85);
  text-align: center;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button.btn-cancel:hover:not(:disabled) {
  background: rgba(55,15,15,0.95);
  border-color: rgba(120,30,30,0.9);
  color: rgba(255,160,160,1);
}

/* Confirm */
button.btn-confirm {
  background: rgba(0,30,52,0.9);
  border: 1px solid rgba(0,100,160,0.5);
  color: var(--accent);
  text-align: center;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-weight: 600;
  transition: background 0.15s, box-shadow 0.15s;
}
button.btn-confirm:hover:not(:disabled) {
  background: rgba(0,40,70,0.95);
  box-shadow: 0 0 12px rgba(0,212,255,0.2);
}

/* Generic confirm/finish */
#btn-finish-deploy, #btn-confirm-move {
  background: rgba(0,30,52,0.9);
  border: 1px solid rgba(0,100,160,0.5);
  color: var(--accent);
  text-align: center;
  font-weight: 600;
}

/* Action buttons */
.action-btn {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 4px;
  text-align: center;
  border-radius: 4px;
  letter-spacing: 0.2px;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
}
.action-btn:hover:not(:disabled) {
  background: rgba(20,34,58,0.98);
  border-color: rgba(60,100,160,0.55);
}

.action-btn-special {
  border-color: rgba(192,120,255,0.38);
  color: var(--purple);
}
.action-btn-special:hover:not(:disabled) {
  background: rgba(160,80,255,0.08);
  border-color: rgba(192,120,255,0.6);
  box-shadow: 0 0 8px rgba(192,120,255,0.12);
}

.action-btn-sentry {
  border-color: rgba(61,240,128,0.38);
  color: var(--green);
}
.action-btn-sentry:hover { background: rgba(61,240,128,0.06); border-color: rgba(61,240,128,0.55); }
.action-btn-sentry.sentry-active {
  border-color: var(--green);
  background: rgba(61,240,128,0.12);
  color: var(--green);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(61,240,128,0.15) inset;
}

.action-btn-mining {
  border-color: rgba(255,200,50,0.4);
  color: rgba(255,200,50,0.9);
}
.action-btn-mining:hover:not(:disabled) {
  background: rgba(255,200,50,0.07);
  border-color: rgba(255,200,50,0.6);
}
.action-btn-mining.converting-active {
  border-color: rgba(255,200,50,0.8);
  background: rgba(255,200,50,0.1);
  font-weight: 700;
}

.action-btn-base {
  border-color: rgba(255,200,64,0.38);
  color: var(--yellow);
}
.action-btn-base:hover:not(:disabled) {
  background: rgba(255,200,64,0.06);
  border-color: rgba(255,200,64,0.55);
}

.action-btn-cp {
  border-color: rgba(0,255,200,0.38);
  color: var(--cp-color);
  text-align: center;
}
.action-btn-cp:hover:not(:disabled) {
  background: rgba(0,255,200,0.06);
  border-color: rgba(0,255,200,0.55);
  box-shadow: 0 0 10px rgba(0,255,200,0.1);
}

.action-btn-drone {
  border-color: rgba(80,200,255,0.38);
  color: rgba(80,200,255,0.9);
}
.action-btn-drone:hover:not(:disabled) {
  background: rgba(80,200,255,0.06);
  border-color: rgba(80,200,255,0.55);
}

.action-btn-auto {
  border-color: rgba(255,160,80,0.38);
  color: rgba(255,160,80,0.9);
}
.action-btn-auto:hover {
  background: rgba(255,160,80,0.06);
  border-color: rgba(255,160,80,0.55);
}
.action-btn-auto.auto-active {
  border-color: rgba(255,160,80,0.8);
  background: rgba(255,160,80,0.12);
  color: rgba(255,200,80,1);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255,160,80,0.12) inset;
}

.action-btn-destruct {
  border-color: rgba(255,60,50,0.48);
  color: rgba(255,100,80,0.9);
}
.action-btn-destruct:hover:not(:disabled) {
  background: rgba(255,60,50,0.12);
  border-color: rgba(255,60,50,0.75);
  box-shadow: 0 0 10px rgba(255,60,50,0.15);
}

.action-btn-ping {
  border-color: rgba(255,220,80,0.35);
  color: rgba(255,220,80,0.85);
  font-size: 10px;
}
.action-btn-ping:hover { background: rgba(255,220,80,0.06); border-color: rgba(255,220,80,0.55); }
.action-btn-ping.ping-active {
  background: rgba(255,220,80,0.12);
  border-color: rgba(255,220,80,0.75);
  font-weight: 700;
}

/* Stance buttons */
.stance-btn {
  text-align: center;
  padding: 8px 6px;
  margin-bottom: 5px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  line-height: 1.4;
}
.stance-btn span { font-size: 10px; color: var(--text-dim); font-weight: 400; }
.assault-btn { border-color: rgba(255,100,68,0.48); color: var(--p2); }
.assault-btn:hover:not(:disabled) { background: rgba(255,100,68,0.08); border-color: rgba(255,100,68,0.7); }
.defense-btn { border-color: rgba(74,168,255,0.48); color: var(--p1); }
.defense-btn:hover:not(:disabled) { background: rgba(74,168,255,0.08); border-color: rgba(74,168,255,0.7); }

/* Facing buttons */
.facing-btn { text-align: center; font-size: 13px; padding: 6px; font-family: var(--font-ui); }
.facing-btn.selected {
  border-color: rgba(255,200,0,0.7);
  color: var(--yellow);
  background: rgba(255,200,0,0.07);
}

/* Deploy options */
.deploy-option {
  background: rgba(4,10,20,0.9);
  border: 1px solid var(--border-dim);
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.deploy-option:hover { background: rgba(12,22,40,0.95); border-color: rgba(40,80,130,0.55); }
.deploy-option.selected {
  border-color: rgba(255,200,0,0.6);
  background: rgba(255,200,0,0.05);
}

/* Upgrade options */
.upgrade-option, .production-option {
  background: rgba(4,10,20,0.9);
  border: 1px solid var(--border-dim);
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  margin-bottom: 4px;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.5;
}
.upgrade-option:hover:not(.cant-afford):not(.unavailable):not(.owned),
.production-option:hover:not(.cant-afford):not(.cap-full) {
  background: rgba(12,22,40,0.95);
  border-color: rgba(40,80,130,0.5);
}
.upgrade-name, .prod-name { color: var(--text); font-weight: 600; }
.upgrade-cost, .prod-cost { color: var(--yellow); }
.upgrade-desc, .prod-desc { color: var(--text-dim); margin-top: 2px; }

/* Command options */
.command-option {
  background: rgba(0,26,20,0.88);
  border: 1px solid rgba(0,255,200,0.18);
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10px;
  margin-bottom: 4px;
  transition: background 0.12s, border-color 0.12s;
  color: var(--cp-color);
}
.command-option:hover:not(.cant-afford) {
  background: rgba(0,255,200,0.05);
  border-color: rgba(0,255,200,0.3);
}
.command-option.selected {
  border-color: var(--cp-color);
  background: rgba(0,255,200,0.08);
}
.cmd-name { font-weight: 600; }
.cmd-cost { color: var(--yellow); }
.cmd-desc { color: var(--text-dim); margin-top: 2px; font-size: 9px; }

/* Action mode banner */
.action-banner-text {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--accent);
  background: rgba(0,200,255,0.05);
  border: 1px solid rgba(0,200,255,0.2);
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 5px;
  line-height: 1.5;
}

/* Turn status line */
#turn-status-line {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--yellow);
  margin-bottom: 6px;
  min-height: 15px;
  font-weight: 500;
}

/* ════════════════════════════════════════
   RIGHT PANEL — combat log
════════════════════════════════════════ */
#right-panel {
  background: rgba(7,12,22,0.98);
  border-left: 1px solid var(--border);
  box-shadow: -2px 0 16px rgba(0,0,0,0.4);
}

#combat-log {
  flex: 1;
  overflow-y: auto;
  font-size: 10.5px;
  line-height: 1.65;
}

.log-entry {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(4,10,20,0.7);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  transition: background 0.1s;
}
.log-entry:hover { background: rgba(255,255,255,0.02); }
.log-entry.turn     { color: var(--accent);   font-weight: 700; letter-spacing: 0.3px; }
.log-entry.hit      { color: #ff9977; }
.log-entry.miss     { color: #4a6a8a; }
.log-entry.system   { color: var(--yellow); }
.log-entry.move     { color: #5577aa; }
.log-entry.repair   { color: var(--green); }
.log-entry.torpedo  { color: var(--purple); }
.log-entry.destroyed { color: var(--red); font-weight: 700; }
.log-entry.economy  { color: #33aa66; }
.log-entry.upgrade  { color: var(--yellow); }
.log-entry.ion      { color: #44ccff; }
.log-entry.shield   { color: #6688ff; }
.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: 700; }
.log-entry.no-target { color: var(--orange); font-weight: 700; }

#torpedo-list {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--purple);
}

/* ════════════════════════════════════════
   ZOOM CONTROLS
════════════════════════════════════════ */
#zoom-controls {
  background: rgba(6,12,22,0.94);
  border: 1px solid var(--border);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  padding: 5px 12px;
  gap: 8px;
}

.zoom-btn {
  display: inline-block;
  width: auto;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* Match briefing strip */
#match-briefing-strip {
  border-bottom: 1px solid var(--border-dim);
  background: rgba(8,14,26,0.95);
  padding: 8px 14px;
}
.match-briefing-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.match-briefing-body {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ════════════════════════════════════════
   MODALS — polished
════════════════════════════════════════ */
#import-dialog,
#end-turn-modal,
#leave-game-modal,
#self-destruct-modal,
#forfeit-modal {
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
}

#import-dialog-inner,
#end-turn-modal-inner,
#leave-game-modal-inner,
#self-destruct-modal-inner,
#forfeit-modal-inner {
  background: linear-gradient(160deg, rgba(10,18,32,0.99), rgba(7,13,24,0.99));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  gap: 16px;
  max-width: 440px;
  width: 90vw;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03);
}

.modal-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.5px;
}
.modal-title-danger { color: rgba(255,80,60,0.95); }

.modal-body {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
}

.modal-buttons {
  display: flex;
  gap: 10px;
}
.modal-buttons button {
  flex: 1;
  text-align: center;
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

#import-text {
  background: rgba(3,8,18,0.95);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  resize: vertical;
  width: 100%;
  min-height: 120px;
  transition: border-color 0.2s;
}
#import-text:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.1);
}

/* ════════════════════════════════════════
   HOTSEAT HANDOFF OVERLAY
════════════════════════════════════════ */
#hotseat-handoff {
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(12px);
}

#hotseat-handoff-inner {
  background: linear-gradient(160deg, rgba(10,18,32,0.99), rgba(7,13,24,0.99));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 48px;
  max-width: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
}

#hotseat-handoff-inner .modal-title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0,212,255,0.5);
}

#hotseat-handoff-inner .modal-body {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
}

#btn-hotseat-ready {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 32px;
  background: rgba(20,55,32,0.9);
  border: 1.5px solid rgba(50,180,90,0.55);
  color: var(--green);
  width: auto;
  display: inline-block;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 8px;
  animation: end-turn-pulse 2.5s ease-in-out infinite;
  text-align: center;
}
#btn-hotseat-ready:hover {
  background: rgba(28,68,40,0.95);
  box-shadow: 0 0 22px rgba(61,240,128,0.3);
}

/* ════════════════════════════════════════
   WIN SCREEN — dramatic overhaul
════════════════════════════════════════ */
@keyframes victory-glow {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}
@keyframes victory-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#win-screen {
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(16px);
  z-index: 999;
  padding: 24px;
  /* Star field overlay */
  background-image:
    radial-gradient(1.5px 1.5px at 8%  12%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1px   1px   at 23% 47%,  rgba(200,230,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 39% 7%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(1px   1px   at 64% 29%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(2px   2px   at 78% 63%,  rgba(255,248,210,0.7), transparent),
    radial-gradient(1px   1px   at 91% 18%,  rgba(200,226,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 46% 84%,  rgba(255,255,255,0.62), transparent),
    radial-gradient(1px   1px   at 14% 91%,  rgba(255,245,190,0.55), transparent),
    radial-gradient(ellipse at 15% 15%, rgba(60,100,255,0.06), transparent 30%),
    radial-gradient(ellipse at 85% 10%, rgba(255,90,60,0.05),  transparent 28%),
    rgba(0,0,0,0.92);
}

#win-screen-inner {
  width: min(960px, 100%);
  max-height: min(84vh, 920px);
  overflow: auto;
  background: linear-gradient(160deg, rgba(11,20,36,0.99), rgba(7,13,24,0.99));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 60px rgba(0,0,0,0.5);
  padding: 32px 28px;
  animation: victory-rise 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

#win-message {
  font-family: var(--font-ui);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: clamp(3px, 1vw, 6px);
  text-align: center;
  text-transform: uppercase;
  animation: victory-glow 2.5s ease-in-out infinite;
}
#win-message.p1 { color: var(--p1); text-shadow: 0 0 30px rgba(74,168,255,0.5); }
#win-message.p2 { color: var(--p2); text-shadow: 0 0 30px rgba(255,100,68,0.5); }

#win-sub {
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

#win-summary {
  margin-top: 18px;
  margin-bottom: 18px;
  text-align: center;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.7;
}

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

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

.postgame-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.025);
  transition: border-color 0.2s;
}
.postgame-card.p1 {
  box-shadow: inset 0 0 0 1px rgba(74,168,255,0.1);
  border-color: rgba(74,168,255,0.2);
}
.postgame-card.p2 {
  box-shadow: inset 0 0 0 1px rgba(255,100,68,0.1);
  border-color: rgba(255,100,68,0.2);
}

.postgame-side-name {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
}

.postgame-side-result {
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
}

.postgame-stat {
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.postgame-stat span {
  font-family: var(--font-ui);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.postgame-stat strong {
  font-family: var(--font-mono);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.win-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 4px;
}
.win-buttons button {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 28px;
  text-align: center;
  width: auto;
  display: inline-block;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
.win-buttons #btn-play-again {
  background: rgba(0,212,255,0.08);
  border: 1.5px solid rgba(0,212,255,0.45);
  color: var(--accent);
}
.win-buttons #btn-play-again:hover {
  background: rgba(0,212,255,0.14);
  box-shadow: 0 0 18px rgba(0,212,255,0.25);
}
.win-buttons .cta-secondary {
  padding: 11px 28px;
}

/* ════════════════════════════════════════
   SCROLLBAR — refined
════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: rgba(3,8,18,0.6); }
::-webkit-scrollbar-thumb { background: rgba(27,48,80,0.8); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(40,72,120,0.9); }

/* ════════════════════════════════════════
   PANEL TOGGLE BUTTONS — mobile
════════════════════════════════════════ */
.panel-toggle-btn {
  background: rgba(7,14,26,0.95);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--accent);
  font-size: 13px;
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s;
}
.panel-toggle-btn:hover { background: rgba(12,22,40,0.98); border-color: rgba(0,212,255,0.3); }

/* ════════════════════════════════════════
   ECONOMY BREAKDOWN
════════════════════════════════════════ */
#economy-breakdown {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.75;
  background: rgba(3,8,18,0.88);
  border: 1px solid var(--border-dim);
  padding: 6px 8px;
  border-radius: 5px;
}
.eco-row.total {
  color: var(--green);
  font-weight: 700;
  border-top: 1px solid var(--border-dim);
  margin-top: 3px;
  padding-top: 3px;
}

/* ════════════════════════════════════════
   WAITING ROOM
════════════════════════════════════════ */
.waiting-room-panel {
  border: 1px solid var(--border);
  background: rgba(5,12,24,0.8);
  border-radius: 8px;
  padding: 16px;
}

.waiting-slot {
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
}
.waiting-slot.host { box-shadow: inset 0 0 0 1px rgba(74,168,255,0.1); }
.waiting-slot.guest { box-shadow: inset 0 0 0 1px rgba(255,100,68,0.1); }

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

.waiting-slot-ready {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.waiting-slot-ready.ready {
  color: var(--green);
  border-color: rgba(61,240,128,0.45);
  background: rgba(61,240,128,0.07);
}
.waiting-slot-ready.not-ready {
  color: var(--yellow);
  border-color: rgba(255,200,64,0.35);
  background: rgba(255,200,64,0.06);
}

/* ════════════════════════════════════════
   LOBBY ROOM ERROR
════════════════════════════════════════ */
.lobby-room-error {
  border: 1px solid rgba(255,100,80,0.35);
  background: rgba(255,80,60,0.07);
  color: rgba(255,180,160,0.9);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.55;
}

/* ════════════════════════════════════════
   MISC GAME UI REFINEMENTS
════════════════════════════════════════ */

/* HP / shield bars — slightly taller and more visible */
.bar-container {
  height: 5px;
  background: rgba(3,8,18,0.8);
  border-radius: 3px;
  overflow: hidden;
  margin: 2px 0 5px;
}
.bar-fill-hp     { background: linear-gradient(90deg, #28cc64, var(--green)); }
.bar-fill-shield { background: linear-gradient(90deg, #3388dd, var(--p1)); }
.bar-fill-shield.p2 { background: linear-gradient(90deg, #dd5533, var(--p2)); }

/* Base upgrade / weapon entries */
.base-weapon-slot {
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 3px 6px;
  margin-bottom: 3px;
  border-left: 2px solid var(--accent);
  color: var(--text);
  background: rgba(4,10,20,0.8);
  border-radius: 0 3px 3px 0;
}
.base-weapon-slot.empty-slot { border-color: var(--text-muted); color: var(--text-muted); }

.base-upgrade-entry {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--purple);
  padding: 1px 0;
  font-weight: 500;
}

/* Enemy inspect note */
#enemy-inspect-note {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--orange);
  margin-top: 5px;
}

/* End turn section */
#end-turn-section {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

/* Lobby actions */
.lobby-actions {
  display: flex;
  justify-content: center;
}
.lobby-actions .cta-primary {
  min-width: 200px;
  text-align: center;
}

/* Waiting room feedback */
.waiting-room-feedback {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
}
.waiting-room-feedback.error   { color: rgba(255,160,140,0.9); }
.waiting-room-feedback.success { color: var(--green); }

/* Waiting handoff block */
.waiting-room-handoff {
  border: 1px solid rgba(0,212,255,0.25);
  background: rgba(0,212,255,0.05);
  border-radius: 7px;
  padding: 14px;
}
.waiting-room-handoff-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.waiting-room-handoff-body {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text);
  line-height: 1.65;
}

/* Torpedo entries */
.torpedo-entry {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 0;
  color: var(--purple);
}

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

/* ════════════════════════════════════════
   MOBILE RESPONSIVE PATCHES
════════════════════════════════════════ */
@media (max-width: 860px) {
  .home-showcase,
  .home-feature-list {
    grid-template-columns: 1fr;
  }
  .home-wrap { gap: 36px; padding: 48px 20px 60px; }
}

@media (max-width: 600px) {
  .logo-title { font-size: 32px; letter-spacing: 5px; }
  #postgame-stats { grid-template-columns: 1fr; }
  .win-buttons { flex-direction: column; align-items: center; }
  #win-screen-inner { padding: 22px 18px; }
}

/* ════════════════════════════════════════
   TUTORIAL OVERLAY
════════════════════════════════════════ */
#tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 800;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 52px 12px 12px 12px;
}

#tutorial-panel {
  pointer-events: all;
  background: linear-gradient(160deg, rgba(8,16,30,0.98), rgba(5,10,22,0.99));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 18px 20px;
  width: 280px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.08),
    0 16px 48px rgba(0,0,0,0.7),
    0 0 32px rgba(0,212,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fade-in-up 0.3s ease both;
}

.tut-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tut-step-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  opacity: 0.7;
  letter-spacing: 1px;
}

.tut-skip-btn {
  display: inline-block;
  width: auto;
  padding: 3px 9px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  border-color: var(--border-dim);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}
.tut-skip-btn:hover { color: rgba(255,140,140,0.85); border-color: rgba(80,22,22,0.6); }

.tut-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.tut-body {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(180,210,240,0.8);
  line-height: 1.75;
}
.tut-body strong { color: var(--text); }
.tut-body em { color: var(--text-dim); font-style: normal; }
.tut-p1 { color: var(--p1); font-weight: 600; }
.tut-p2 { color: var(--p2); font-weight: 600; }
.tut-yellow { color: var(--yellow); font-weight: 600; }

.tut-highlight-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.22);
  border-radius: 6px;
  padding: 7px 10px;
  letter-spacing: 0.2px;
  animation: glow-pulse-btn 2.5s ease-in-out infinite;
}

.tut-next-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,212,255,0.07);
  border: 1.5px solid rgba(0,212,255,0.4);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.tut-next-btn:hover {
  background: rgba(0,212,255,0.12);
  box-shadow: 0 0 16px rgba(0,212,255,0.25);
  transform: translateY(-1px);
}

/* CTA adjustments for 3-button home row */
.home-cta {
  flex-wrap: wrap;
  justify-content: center;
}