/* ============================================================
   STRATEGY ENGINE - MAIN STYLESHEET
   Blue Nova dark theme
   Shared dark theme tokens
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --bg-dark: #07100b;
  --bg-panel: #0d1623;
  --bg-card: #142432;
  --bg-hover: #1D232F;
  --bg-header: #20374C;
  --border: #1c3043;
  --border-bright: #223C53;
  --accent: #EAC767;           /* gold links */
  --accent-glow: #FFD700;      /* bright gold */
  --accent2: #49D6FE;          /* cyan research */
  --warn: #FFA500;             /* orange highlights */
  --danger: #FF2A26;           /* red */
  --success: #1DC235;          /* green */
  --success-dim: #169429;
  --text: #CDDCE9;            /* body text */
  --text-dim: #7a96ad;
  --text-bright: #FFFFFF;
  --link: #EAC767;            /* link gold */
  --structures: #55DA4E;       /* structure green */
  --defenses: #D97E04;         /* defense orange */
  --research: #49D6FE;         /* research cyan */
  --production: #DDD;
  --player-self: #FFFFFF;
  --player-guild: #55DA4E;
  --player-npc: #D97E04;
  --game-shell-width: 1050px;
  --font-main: verdana, arial, sans-serif;
  --font-mono: 'Courier New', courier, monospace;
}

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

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 12px;
  min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-glow); text-decoration: underline; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

/* ── AUTH PAGE ── */
#auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
  gap: 20px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 10px;
}

.auth-logo h1 {
  font-family: var(--font-main);
  font-size: 2rem;
  color: var(--accent-glow);
  text-shadow: 0 0 20px rgba(234, 199, 103, 0.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-logo p {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 4px;
}

.auth-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 28px 32px;
  width: 360px;
  box-shadow: inset 0 0 5px 5px rgba(255,255,255,0.02);
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--bg-dark);
  border-radius: 5px;
  padding: 3px;
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 7px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  font-family: var(--font-main);
}
.auth-tab.active { background: var(--bg-card); color: var(--accent); }
.auth-tab:hover:not(.active) { color: var(--text); }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: #171F2F;
  border: 1px solid #444;
  border-radius: 3px;
  color: var(--text);
  padding: 7px 10px;
  font-family: var(--font-main);
  font-size: 12px;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
}

/* ── BUTTONS (engine style) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid #444;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-main);
  font-weight: 600;
  transition: all 0.15s;
  text-decoration: none;
  text-shadow: #000 1px 1px 1px;
  box-shadow: inset 0 0 3px 1px rgba(255,255,255,0.06);
}
.btn-primary { background: #10385a; color: #fff; border-color: #223C53; }
.btn-primary:hover { background: #174a74; }
.btn-success { background: #0a3d1a; color: var(--success); border-color: #1a5a2a; }
.btn-success:hover { background: #0e5522; }
.btn-warn { background: #3d2a00; color: var(--warn); border-color: #5a4000; }
.btn-warn:hover { background: #4d3500; }
.btn-danger { background: #3d0a0a; color: var(--danger); border-color: #5a1a1a; }
.btn-danger:hover { background: #551010; }
.btn-ghost { background: #082241; color: var(--text-dim); border-color: #223C53; }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.alert { padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; font-size: 12px; }
.alert-error { background: rgba(255,42,38,0.1); border: 1px solid rgba(255,42,38,0.3); color: #ff6666; }
.alert-success { background: rgba(29,194,53,0.1); border: 1px solid rgba(29,194,53,0.3); color: var(--success); }
.alert-info { background: rgba(73,214,254,0.08); border: 1px solid rgba(73,214,254,0.25); color: var(--accent2); }
.alert-warn { background: rgba(255,165,0,0.1); border: 1px solid rgba(255,165,0,0.3); color: var(--warn); }

/* ── GAME LAYOUT ── */
#game-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── TOP HEADER (Engine: Ranks, Updates, Help, Tables, Logout + server time) ── */
#top-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 26px;
  background: linear-gradient(180deg, rgba(12,28,46,0.98) 0%, rgba(7,19,31,0.98) 100%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.top-header-shell {
  width: min(100%, var(--game-shell-width));
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
/* Header strips hold a ruleset-driven number of items — tabs, HUD stats and
   utility links all change with the active game definition. A flex item won't
   shrink below its own content by default, so without min-width:0 one extra
   tab pushes its neighbours out of the bar instead of fitting. These strips
   shrink and scroll instead; the infobox (credits, messages) stays rigid so
   the numbers a player checks constantly never slide away. */
.top-header-menu,
.main-header-nav,
.main-header-stats {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.top-header-menu::-webkit-scrollbar,
.main-header-nav::-webkit-scrollbar,
.main-header-stats::-webkit-scrollbar { display: none; }

.top-header-menu {
  display: flex;
  align-items: center;
  gap: 0;
}
.top-header-time {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* engine-style compact button (used in top header & info bar) */
.awe-btn {
  display: inline-block;
  padding: 3px 10px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-main);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
  transition: color 0.12s;
  white-space: nowrap;
  text-shadow: #000 1px 1px 1px;
}
.awe-btn:hover { color: var(--accent); text-decoration: none; }
.awe-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border);
  vertical-align: middle;
  margin: 0 2px;
}

/* ── MAIN HEADER (Engine: 2 rows) ── */
#main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 6px;
  background: transparent;
  border-bottom: none;
  flex-shrink: 0;
}

.main-header-row1 {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  min-height: 46px;
  gap: 8px;
  width: min(100%, var(--game-shell-width));
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(18,42,66,0.98) 0%, rgba(8,20,31,0.98) 100%);
  border: 1px solid var(--border);
  border-radius: 7px 7px 0 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.main-header-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
}

/* engine-style main nav button */
.awe-nav-btn {
  display: inline-block;
  padding: 5px 14px;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font-main);
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(180deg, #143352 0%, #0b2135 100%);
  border: 1px solid #355777;
  border-radius: 0;
  transition: all 0.12s;
  white-space: nowrap;
  text-shadow: #000 1px 1px 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.awe-nav-btn:hover { background: linear-gradient(180deg, #194267 0%, #0d2841 100%); color: var(--text); }
.awe-nav-btn.active { background: linear-gradient(180deg, #254e75 0%, #123351 100%); color: var(--accent); border-color: #6a8fb5; }

.main-header-logo {
  /* Shrinks ~100x faster than the tab strip beside it, so the wordmark gives up
     room first and a navigation tab is never the thing that gets cut. */
  flex: 0 100 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-glow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(234,199,103,0.3);
  padding: 0 12px;
}

.main-header-infobox {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.awe-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 32px;
  padding: 5px 12px;
  color: var(--accent) !important;
  font-weight: 600;
  position: relative;
  background: linear-gradient(180deg, rgba(18,40,63,0.98) 0%, rgba(8,20,32,0.98) 100%);
  border: 1px solid #355777;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  text-align: center;
}
.awe-info-btn:hover {
  background: linear-gradient(180deg, rgba(25,66,103,0.98) 0%, rgba(13,40,65,0.98) 100%);
  color: var(--text-bright) !important;
}
.awe-info-btn-guild {
  min-width: 70px;
}
.awe-info-btn .notif-badge {
  position: absolute;
  top: -4px; right: -2px;
}

/* Row 2: news ticker + stats */
.main-header-row2 {
  display: flex;
  align-items: center;
  padding: 2px 10px;
  min-height: 28px;
  gap: 10px;
  width: min(100%, var(--game-shell-width));
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(13,30,47,0.97) 0%, rgba(7,16,26,0.98) 100%);
  border: 1px solid var(--border);
  border-radius: 0 0 7px 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.news-ticker {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-dim);
  height: 14px;
  line-height: 14px;
}
.ticker-content {
  display: inline-block;
  animation: ticker 30s linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.main-header-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 1;
}
.hstat {
  font-size: 11px;
  white-space: nowrap;
}
.hlabel {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
}
.hval {
  color: var(--accent-glow);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 11px;
}
.hstat-user .hlabel {
  color: var(--accent);
  text-transform: none;
  font-weight: 600;
}
.hstat-mobile-time { display: none; }

/* ── MINI-NAV BAR (Engine: notes, bookmarks, notifications) ── */
.main-header-mininav {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
}
.mininav-container {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.mininav-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.12s, background 0.12s;
  position: relative;
}
.mininav-btn:hover {
  color: var(--accent);
  background: rgba(255,255,255,0.04);
}
.mininav-icon {
  font-size: 11px;
  line-height: 1;
}
.mininav-label {
  font-family: var(--font-main);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mininav-count {
  display: inline-block;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 9px;
  font-weight: bold;
  color: #FFF;
  background: var(--border-bright);
  border-radius: 7px;
  padding: 0 3px;
}
.mininav-count-active {
  background: var(--error);
  box-shadow: 0 0 4px rgba(255,50,50,0.5);
}

/* ── SLIDE PANELS (for notes/bookmarks) ── */
.slide-panel {
  position: fixed;
  top: 84px;
  right: 0;
  width: 320px;
  max-height: calc(100vh - 100px);
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-right: none;
  border-radius: 4px 0 0 4px;
  box-shadow: -4px 0 20px rgba(0,0,0,0.4);
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slide-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.slide-panel-body {
  padding: 10px 12px;
  overflow-y: auto;
  flex: 1;
}
.bookmark-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.bookmark-item:hover { background: var(--bg-hover); }
.bookmark-item .bookmark-name { color: var(--accent); cursor: pointer; }
.bookmark-item .bookmark-coords { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; }
.bookmark-item .bookmark-del { color: var(--error); cursor: pointer; font-size: 10px; margin-left: 8px; }
.bookmark-item .bookmark-del:hover { text-decoration: underline; }

/* ── TUTORIAL TAB (in-game) ── */
.tutorial-layout { display: flex; gap: 0; min-height: 420px; }
.tutorial-sidebar {
  width: 200px; min-width: 200px; background: var(--bg-dark);
  border-right: 1px solid var(--border);
  padding: 4px 0; overflow-y: auto;
}
.tut-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; font-size: 11px;
  color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.tut-nav-item:hover { background: rgba(255,255,255,0.05); }
.tut-nav-item.active { background: rgba(0,180,255,0.1); color: var(--text); font-weight: bold; }
.tut-nav-item.completed { color: var(--success); }
.tut-check { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.tut-check.done { color: var(--success); }
.tut-check.pending { color: var(--text-dim); }
.tutorial-content { flex: 1; padding: 16px 20px; overflow-y: auto; }
.tutorial-content h2 { color: var(--text); font-size: 18px; margin: 0 0 12px; }
.tut-desc {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
  padding: 12px; font-size: 12px; color: var(--text); line-height: 1.6;
  white-space: pre-line; margin-bottom: 12px;
}
.tut-mission-box {
  background: rgba(0,80,60,0.2); border: 1px solid rgba(80,200,120,0.25);
  border-radius: 4px; padding: 10px; margin-bottom: 10px;
}
.tut-mission-box h4 { color: var(--text); font-size: 12px; font-weight: bold; margin: 0 0 4px; }
.tut-mission-text { font-size: 12px; color: var(--accent); }
.tut-mission-text.completed-text { color: var(--success); }
.tut-mission-progress { font-size: 11px; color: var(--text-dim); margin-left: 6px; }
.tut-completed-tag { color: var(--success); font-size: 11px; font-style: italic; margin-left: 6px; }
.tut-requirements { margin-top: 6px; }
.tut-requirements h4 { font-size: 11px; color: var(--text); font-weight: bold; margin: 0 0 3px; }
.tut-req-item { font-size: 11px; color: var(--text-dim); padding: 2px 0 2px 14px; }
.tut-req-item::before { content: "\2022 "; }
.tut-reward-box {
  background: rgba(60,60,0,0.2); border: 1px solid rgba(200,200,80,0.25);
  border-radius: 4px; padding: 10px; margin-bottom: 10px;
}
.tut-reward-box h4 { font-size: 12px; font-weight: bold; margin: 0 0 4px; color: var(--text); }
.tut-reward-amount { font-size: 13px; color: #ffd700; font-weight: bold; }
.tut-collect-btn {
  background: var(--success); color: #000; border: none; padding: 6px 16px;
  border-radius: 3px; font-size: 12px; font-weight: bold; cursor: pointer; margin-top: 6px;
}
.tut-collect-btn:hover { filter: brightness(1.1); }
.tut-collect-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tut-start-btn {
  background: #e44; color: #fff; border: none; padding: 8px 20px;
  border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer;
}
.tut-start-btn:hover { filter: brightness(1.1); }
.tut-finish-btn {
  background: var(--accent); color: #000; border: none; padding: 8px 20px;
  border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer;
}
.tut-finish-btn:hover { filter: brightness(1.1); }
.tut-skip-link { color: var(--text-dim); font-size: 11px; cursor: pointer; }
.tut-skip-link:hover { color: var(--text); text-decoration: underline; }
.tut-actions { text-align: center; margin-top: 14px; }
@media (max-width: 700px) {
  .tutorial-layout { flex-direction: column; }
  .tutorial-sidebar { width: 100%; min-width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── EMPIRE SUB-TABS (engine style: 2 rows) ── */
.empire-subtabs {
  display: flex;
  flex-direction: column;
  padding: 4px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.awe-subtab {
  padding: 4px 12px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-main);
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.12s;
  white-space: nowrap;
}
.awe-subtab:hover { color: var(--text); }
.awe-subtab.active { color: var(--accent); font-weight: 600; }
.empire-subtab-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 0;
}
.empire-subtab-row .awe-subtab { flex: 1; text-align: center; }

.empire-structures-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.empire-structures-grid {
  width: auto;
  min-width: 100%;
  table-layout: fixed;
}

.empire-structures-grid th.empire-structures-base-head,
.empire-structures-grid td.empire-structures-base-cell {
  min-width: 120px;
  width: 120px;
  white-space: nowrap;
}

.empire-structures-grid th.empire-vertical-header {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 180px;
  padding: 0;
  text-align: center;
  vertical-align: bottom;
}

.empire-structures-grid .empire-vertical-label {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  padding: 8px 0 6px;
}

.empire-structures-grid td.empire-structures-value-cell {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  text-align: center;
  white-space: nowrap;
  padding: 4px 2px;
 }

.game-body { display: flex; flex: 1; overflow: hidden; }
.tab-panel { display: none; flex: 1; overflow: auto; padding: 16px; }
.tab-panel.active {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 14px;
  width: min(100%, var(--game-shell-width));
  max-width: var(--game-shell-width);
  margin: 0 auto;
}

/* ── PANEL / CARD (engine box style) ── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}
.panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.panel-body { padding: 12px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--border-bright); }

/* ── GRID ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* ── TABLE (engine listing style) ── */
.data-table { width: 100%; border-collapse: collapse; background: none; border: none; }
.data-table th {
  padding: 3px 7px 6px; text-align: left; font-size: 11px;
  color: #FFF; background: var(--bg-header);
  border: 1px solid var(--border-bright); border-width: 0 0 1px 0;
  font-weight: bold; cursor: pointer; height: 20px; vertical-align: bottom;
}
.data-table th a { color: #FFF; }
.data-table td {
  padding: 5px 7px;
  border: 1px solid var(--border); border-width: 0 0 1px 0;
  font-size: 12px;
  background: linear-gradient(var(--bg-card), var(--bg-panel), var(--bg-panel), var(--bg-card));
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-hover); }
.data-table td.num, .data-table td.right { text-align: right; }
.data-table td.center, .data-table th.center { text-align: center; }
/* engine sort indicators */
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--accent); }
/* engine row active state (clicked/selected) */
.data-table tr.row-active td { background: #0A1218; }

/* ── BUILDING CARD ── */
.building-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s;
}
.building-card:hover { border-color: var(--border-bright); }
.building-name { font-weight: 700; font-size: 12px; color: var(--structures); }
.building-level { font-size: 20px; font-weight: 900; color: var(--accent); font-family: var(--font-mono); }
.building-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.building-cost { font-size: 11px; color: var(--warn); }
.building-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.progress-bar { height: 3px; background: var(--bg-dark); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.progress-fill { height: 100%; background: var(--accent2); border-radius: 2px; transition: width 0.3s; }

/* ── RESEARCH CARD ── */
.tech-card, .research-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.15s;
}
.tech-card:hover, .research-card:hover { border-color: var(--border-bright); }
.research-card.locked { opacity: 0.45; }
.tech-name { font-weight: 700; font-size: 12px; color: var(--research); }
.tech-level { font-size: 18px; font-weight: 900; color: var(--accent2); font-family: var(--font-mono); }
.tech-bonus { font-size: 11px; color: var(--accent2); }
.tech-cost { font-size: 11px; color: var(--warn); }

/* ── FLEET CARD ── */
.fleet-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fleet-name { font-weight: 700; color: var(--text-bright); }
.fleet-location { font-size: 11px; color: var(--text-dim); }
.fleet-ships { display: flex; flex-wrap: wrap; gap: 6px; }
.ship-chip {
  display: flex; align-items: center; gap: 3px;
  background: rgba(73,214,254,0.06); border: 1px solid rgba(73,214,254,0.15);
  border-radius: 3px; padding: 2px 6px; font-size: 11px;
}
.ship-chip .count { font-weight: 700; color: var(--accent2); }
.ship-chip .type { color: var(--text-dim); }
.fleet-moving { color: var(--warn); font-size: 11px; font-style: italic; }
.fleet-header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── DEFENSE CHIP ── */
.defense-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
}

/* ── engine Event Type Colors ── */
.ev-structures, .events-structures { color: #D97E04; }
.ev-defenses, .events-defenses { color: #55DA4E; }
.ev-research, .events-research { color: #49D6FE; }
.ev-production, .events-production { color: #DDD; }
.ev-credits { color: #EAC767; }

/* ── engine Player Colors ── */
.player-self, .player-self a { color: #FFF; }
.player-guild, .player-guild a { color: #55DA4E; }
.player-npc, .player-npc a { color: #D97E04; }

/* ── engine Field States ── */
.fld-active, .fld-active a { color: #FFF; font-weight: bold; }
.fld-disabled, .fld-disabled a { color: #AAA; }
.fld-special, .fld-special a { color: #FFD700; font-weight: bold; }
.fld-important, .fld-important a { color: #FF2A26; font-weight: bold; }

/* ── engine Input Buttons ── */
.input-button {
  background: #082241; border: 1px outset #2693bb; color: #FFF; font-weight: bold;
  padding: 0 10px; height: 23px; cursor: pointer; font-family: var(--font-main); font-size: 12px;
}
.input-button:hover { border-color: #FFF; }
.input-button-important { background: #750202; border-color: #FB5931; color: #F0C291; }
.input-button-important:hover { border-color: #FFF; }
.input-button-accept { background: #169429; border-color: #1DC235; color: #FFF; }
.input-button-accept:hover { border-color: #FFF; }
.input-button-disabled { background: #222; border-color: #000; color: #999; cursor: not-allowed; }

/* ── engine Mini Action Links ── */
.mini-action { color: #63D0DC; font-size: 11px; cursor: pointer; }
.mini-action:hover { color: #FFF; text-shadow: 0 0 5px #FFF; }

/* ── engine Comment/Inactive Styles ── */
.comment { font-size: 90%; color: #BBB; }
.inactive { color: #999; font-weight: normal; }
.hilite { color: #FFA500; }

/* ── engine Action Button Icons ── */
.btn-action {
  display: inline-block; padding: 2px 9px; font-size: 11px;
  color: var(--text-dim); cursor: pointer; text-decoration: none;
}
.btn-action:hover { color: var(--accent); }

/* ── STAT MINI ── */
.stat-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}
.stat-mini .label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-mini .value { color: var(--text-bright); font-weight: 700; font-family: var(--font-mono); }

/* ── BATTLE CARD ── */
.battle-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 6px;
}
.battle-card:hover { border-color: var(--border-bright); }

/* ── engine Star Type Colors ── */
.star-type-blue { background: #505fa4; }
.star-type-blue-giant { background: #616a8c; }
.star-type-neutron { background: #444972; }
.star-type-orange { background: #c6be97; }
.star-type-red { background: #d5c1b4; }
.star-type-red-giant { background: #953021; }
.star-type-super-giant { background: #cc502f; }
.star-type-white { background: #fff; }
.star-type-white-dwarf { background: #eee4de; }
.star-type-yellow { background: #ece5a0; }
.star-type-worm-hole { background: #877999; }
.star-type-black-hole { background: #434344; }

/* ── engine Astro Type Colors ── */
.astro-arid { background: #b5a886; }
.astro-asteroid { background: #6b6c67; }
.astro-asteroid-belt { background: #464742; }
.astro-craters { background: #e0cfc7; }
.astro-crystalline { background: #db8550; }
.astro-earthly { background: #162688; }
.astro-gaia { background: #7863c2; }
.astro-gas-giant { background: #e6af88; }
.astro-glacial { background: #eceff6; }
.astro-magma { background: #7b4a2a; }
.astro-metallic { background: #78bfff; }
.astro-oceanic { background: #78bfff; }
.astro-radioactive { background: #e8b65f; }
.astro-rocky { background: #707588; }
.astro-toxic { background: #3f1308; }
.astro-tundra { background: #e4e3d1; }
.astro-volcanic { background: #927d63; }

/* ── GALAXY MAP ── */
.map-galaxy-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.galaxy-tabs {
  display: flex;
  gap: 3px;
}
.galaxy-tab {
  background: #082241;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  padding: 4px 12px;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-main);
  transition: all 0.15s;
}
.galaxy-tab:hover { border-color: var(--border-bright); color: var(--text-bright); }
.galaxy-tab.active { background: #10385a; color: var(--accent); border-color: var(--accent); }
.galaxy-select {
  background: #082241; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-dim); padding: 4px 8px; font-size: 11px;
  font-family: var(--font-main); cursor: pointer;
}
.galaxy-select:hover { border-color: var(--border-bright); color: var(--text-bright); }
.galaxy-select:focus { border-color: var(--accent); outline: none; }

/* Map layout: sidebar + main content */
.map-layout {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
}
.map-sidebar {
  display: block;
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 20;
  width: 210px;
}
.map-sidebar.system-mode {
  display: none;
}
.map-side-box {
  background: rgba(32, 61, 90, 0.94);
  border: 1px solid #4f7ba5;
  box-shadow: inset 0 0 0 1px rgba(140, 188, 235, 0.08), 0 6px 24px rgba(0,0,0,0.28);
  margin-bottom: 8px;
}
.map-side-header {
  padding: 8px 10px 6px;
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(122, 160, 199, 0.28);
  cursor: move;
  user-select: none;
}
.map-side-body {
  padding: 8px 10px 10px;
}
.map-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
}
.map-side-tab {
  min-height: 26px;
  border: 1px solid #7096bb;
  background: linear-gradient(180deg, rgba(34,72,108,0.95) 0%, rgba(19,42,65,0.95) 100%);
  color: var(--text-bright);
  font-size: 11px;
  cursor: pointer;
  padding: 0 6px;
  text-align: center;
}
.map-side-tab.active {
  color: var(--accent);
  border-color: #9ec1e4;
}
.map-side-tab.picker-open {
  color: var(--accent);
  border-color: #9ec1e4;
  box-shadow: inset 0 0 0 1px rgba(234, 199, 103, 0.16);
}
.map-side-tab.disabled {
  opacity: 0.45;
  cursor: default;
}
.map-side-picker {
  margin: -2px 0 6px;
  padding: 4px 6px 2px;
  background: rgba(8, 24, 39, 0.88);
  border: 1px solid rgba(94, 130, 166, 0.45);
}
.map-side-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px 0;
}
.map-side-picker-item {
  min-width: 0;
  height: 13px;
  padding: 0;
  background: none;
  border: none;
  color: #88a7bf;
  cursor: pointer;
  font-size: 11px;
  line-height: 13px;
  font-family: var(--font-mono);
  text-align: center;
}
.map-side-picker-item:hover {
  color: var(--text-bright);
}
.map-side-picker-item.active {
  color: var(--accent);
}
.map-side-picker-item.muted {
  opacity: 0.72;
}
.map-side-selects {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-side-label {
  color: var(--text-bright);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.map-side-select {
  width: 100%;
}
.map-side-region-row {
  display: flex;
  gap: 4px;
}
.map-side-region-display {
  flex: 1;
  min-width: 0;
  padding: 5px 7px;
  background: rgba(8, 24, 39, 0.9);
  border: 1px solid rgba(94, 130, 166, 0.45);
  color: #a9c4dd;
  font-size: 11px;
  font-family: var(--font-mono);
}
.map-side-back,
.map-side-go {
  width: 30px;
  border: 1px solid rgba(112, 150, 187, 0.7);
  background: linear-gradient(180deg, rgba(34,72,108,0.95) 0%, rgba(19,42,65,0.95) 100%);
  color: var(--text-bright);
  cursor: pointer;
}
.map-side-back:disabled {
  opacity: 0.45;
  cursor: default;
}
.map-side-coord-jump {
  display: flex;
  gap: 4px;
}
.map-side-coord-row {
  margin-bottom: 4px;
}
.map-side-coord-jump input {
  flex: 1;
  min-width: 0;
  padding: 5px 7px;
  background: rgba(8, 24, 39, 0.9);
  border: 1px solid rgba(94, 130, 166, 0.45);
  color: var(--text-bright);
  font-size: 11px;
}
.map-side-section-row {
  display: grid;
  grid-template-columns: 1fr 14px;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}
.map-side-section-row + .map-side-section-row,
.map-side-section-body + .map-side-section-row {
  margin-top: 2px;
}
.map-side-section-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2px 0;
  background: none;
  border: none;
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.map-side-section-link:hover,
.map-side-section-row.open .map-side-section-link {
  color: var(--accent);
}
.map-side-section-switch {
  width: 12px;
  height: 12px;
  padding: 0;
  background: rgba(11, 33, 53, 0.95);
  border: 1px solid rgba(112, 150, 187, 0.7);
  cursor: pointer;
  position: relative;
}
.map-side-section-switch::before,
.map-side-section-switch::after {
  content: "";
  position: absolute;
  background: rgba(216, 231, 245, 0.92);
  left: 2px;
  right: 2px;
  top: 5px;
  height: 1px;
}
.map-side-section-switch::after {
  top: 2px;
  bottom: 2px;
  left: 5px;
  right: auto;
  width: 1px;
  height: auto;
}
.map-side-section-switch.open::after {
  display: none;
}
.map-side-section-body {
  display: none;
  margin: 2px 0 4px;
  padding: 4px 0 2px;
  border-bottom: 1px solid rgba(122, 160, 199, 0.2);
}
.map-side-section-body.open {
  display: block;
}
.map-side-count {
  color: #d8e7f5;
  font-family: var(--font-mono);
}
.map-side-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}
.map-side-list .btn {
  justify-content: flex-start;
  width: 100%;
  min-height: 24px;
  padding: 4px 8px;
  font-size: 11px;
}
.map-main {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Drill-down map layout (single view at a time) */
.map-topbar,
.map-command-bar,
.map-subnav {
  display: none;
}
.map-breadcrumb {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 12px;
  margin-bottom: 0;
  background: none;
  border: none;
  font-size: 12px;
}
.bc-link { color: var(--accent); cursor: pointer; text-decoration: none; }
.bc-link:hover { color: var(--accent2); text-decoration: underline; }
.bc-sep { color: var(--text-dim); font-size: 12px; }
.bc-current { color: var(--text-bright); font-weight: 600; }
.bc-coords { color: var(--text-dim); font-weight: 400; margin-left: 6px; }

.map-view {
  position: relative;
  border: 1px solid #3e6489;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 45%, rgba(35, 76, 114, 0.28) 0%, rgba(13, 29, 44, 0.12) 34%, rgba(5, 11, 18, 0) 65%),
    linear-gradient(180deg, rgba(9, 22, 34, 0.96) 0%, rgba(4, 10, 16, 0.98) 100%);
  min-height: 680px;
  max-height: none;
  overflow: hidden;
  padding: 12px;
  flex: 1;
}
.map-view.system-page {
  overflow: auto;
}

.region-grid-viewport {
  position: relative;
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 49%, rgba(34, 58, 84, 0.20) 0%, rgba(20, 37, 54, 0.12) 22%, rgba(8, 17, 27, 0.04) 46%, rgba(0, 0, 0, 0) 66%),
    radial-gradient(circle at 14% 18%, rgba(236, 243, 255, 0.09) 0 0.7px, transparent 1px),
    radial-gradient(circle at 28% 73%, rgba(170, 198, 226, 0.07) 0 0.7px, transparent 1px),
    radial-gradient(circle at 63% 24%, rgba(255, 255, 255, 0.08) 0 0.65px, transparent 0.95px),
    radial-gradient(circle at 78% 68%, rgba(173, 192, 214, 0.06) 0 0.65px, transparent 0.95px),
    linear-gradient(180deg, rgba(8, 19, 30, 0.98) 0%, rgba(4, 10, 16, 0.99) 100%);
}

body.map-sidebar-dragging {
  user-select: none;
}

.map-level { display: none; }
.map-level.active { display: block; }

/* Cluster map (Level 0: universe overview) */
.cluster-map {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 16px;
}
.cluster-box {
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  min-width: 200px;
  max-width: 320px;
}
.cluster-title {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.cluster-galaxies {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.galaxy-card {
  background: #0a1e3a;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 2px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.galaxy-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}
.galaxy-card-name {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
}
.galaxy-card:hover .galaxy-card-name {
  color: var(--accent);
}

/* Starfield map (Level 2: region view — engine-style scattered star map) */
.starfield-map {
  position: relative;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, #0a0e1a 0%, #050810 60%, #020408 100%);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.starfield-map-region {
  background:
    radial-gradient(circle at 50% 48%, rgba(31, 55, 80, 0.16) 0%, rgba(17, 31, 46, 0.10) 24%, rgba(5, 10, 17, 0.03) 50%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle at 16% 22%, rgba(236, 243, 255, 0.08) 0 0.65px, transparent 0.95px),
    radial-gradient(circle at 34% 74%, rgba(170, 198, 226, 0.06) 0 0.65px, transparent 0.95px),
    radial-gradient(circle at 68% 31%, rgba(255, 255, 255, 0.07) 0 0.65px, transparent 0.95px),
    radial-gradient(circle at 81% 64%, rgba(173, 192, 214, 0.06) 0 0.6px, transparent 0.9px),
    radial-gradient(ellipse at center, #0a0e1a 0%, #050810 60%, #020408 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.starfield-bg-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}
.starfield-system {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  transition: transform 0.15s;
}
.starfield-system:hover {
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.starfield-system:hover .starfield-label {
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.8);
}
.starfield-glow {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.starfield-star {
  border-radius: 50%;
  position: relative;
  z-index: 3;
}
.starfield-star-img {
  position: relative;
  z-index: 3;
  pointer-events: none;
  image-rendering: auto;
}
.starfield-label {
  font-size: 9px;
  color: rgba(180,200,220,0.7);
  margin-top: 3px;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(0,0,0,0.9);
  pointer-events: none;
  position: relative;
  z-index: 3;
}
.starfield-map-region .starfield-label {
  font-size: 8px;
  margin-top: 2px;
}
/* Ownership ring indicators */
.star-mine .starfield-star, .star-mine .starfield-star-img { box-shadow: 0 0 6px #22cc66, 0 0 12px rgba(34,204,102,0.4) !important; }
.star-mine .starfield-label { color: #66dd88; }
.star-enemy .starfield-star, .star-enemy .starfield-star-img { box-shadow: 0 0 6px #cc4444, 0 0 12px rgba(204,68,68,0.4) !important; }
.star-enemy .starfield-label { color: #dd6666; }

/* Legacy card styles kept for potential fallback */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  padding: 4px;
}
.sys-card {
  background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 4px;
  padding: 10px; cursor: pointer; transition: all 0.15s;
}
.sys-card:hover { background: var(--bg-hover); border-color: var(--accent); }
.sys-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sys-card-info { display: flex; gap: 8px; font-size: 10px; flex-wrap: wrap; }
.sys-indicator { font-size: 12px; margin-left: auto; }
.snapshot-notice {
  padding: 8px 12px; margin-bottom: 8px;
  background: rgba(234,199,103,0.08); border: 1px solid rgba(234,199,103,0.3);
  border-radius: 4px; font-size: 11px; color: var(--text-dim);
}
.snapshot-badge { background: #5a4a20; color: #EAC767; padding: 1px 6px; border-radius: 3px; font-size: 10px; }

/* Region grid (CSS Grid with square cells — size set inline by JS) */
.region-grid {
  display: grid;
  gap: 0;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(116, 153, 189, 0.18);
  background: transparent;
}
.region-cell {
  border-right: 1px solid rgba(116, 153, 189, 0.12);
  border-bottom: 1px solid rgba(116, 153, 189, 0.12);
  padding: 0;
  cursor: pointer;
  transition: background 0.12s;
  text-align: center;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: rgba(8, 16, 25, 0.08);
}
.region-cell:hover {
  background: rgba(24, 45, 66, 0.28);
  outline: 1px solid rgba(73,214,254,0.3);
  outline-offset: -1px;
  z-index: 5;
}
.region-cell.active {
  background: rgba(120, 148, 176, 0.20);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.region-cell.empty { cursor: default; }
.region-cell.void {
  cursor: default;
}
.region-cell.void:hover { background: rgba(24, 45, 66, 0.18); }
.void-name { color: rgba(180,200,220,0.9) !important; }
.rg-name {
  font-size: 10px;
  color: rgba(200,220,240,0.9);
  font-weight: 500;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(8,16,28,0.85);
  border: 1px solid rgba(73,214,254,0.5);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  text-shadow: 0 0 3px rgba(0,0,0,0.9);
}
.region-cell:hover .rg-name {
  opacity: 1;
}
.rg-cell-label {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 3;
  font-size: 9px;
  color: rgba(202,220,236,0.78);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-shadow: 0 0 3px rgba(0,0,0,0.95);
}
.rg-cell-meta {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 3;
  font-size: 9px;
  color: rgba(150,176,198,0.66);
  text-shadow: 0 0 3px rgba(0,0,0,0.95);
}
/* Mini starfield inside each region cell */
.rg-mini-starfield {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin-top: 0;
  overflow: hidden;
}
.rg-mini-star {
  position: absolute;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.map-galaxy-highlight-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.map-galaxy-density-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.map-galaxy-density {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 16, 28, 0.34) 0%, rgba(8, 20, 33, 0.22) 36%, rgba(8, 20, 33, 0.10) 58%, rgba(0, 0, 0, 0) 78%);
  filter: blur(6px);
  opacity: 0.92;
}
.map-galaxy-highlight {
  position: absolute;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  margin-top: -6.5px;
  padding: 0;
  border: none;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}
.map-galaxy-highlight::before,
.map-galaxy-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
}
.map-galaxy-highlight-base::before {
  border: 1px solid rgba(234, 199, 103, 0.95);
  box-shadow: 0 0 0 1px rgba(47, 34, 4, 0.92), 0 0 7px rgba(234, 199, 103, 0.45);
  background: rgba(234, 199, 103, 0.08);
}
.map-galaxy-highlight-base::after {
  inset: 3px;
  border: 1px solid rgba(248, 246, 238, 0.78);
  background: rgba(8, 16, 28, 0.55);
}
.map-galaxy-highlight:hover::before {
  box-shadow: 0 0 0 1px rgba(47, 34, 4, 0.92), 0 0 10px rgba(234, 199, 103, 0.7);
}

/* (sys-table and sys-row removed — replaced by sys-grid/sys-card in drill-down layout) */
.sys-star-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
  box-shadow: 0 0 4px currentColor;
}
.text-center { text-align: center; }

/* Planet detail panel */
.planet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.planet-row:last-child { border-bottom: none; }
.planet-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.planet-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.planet-dot-lg {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.planet-name { font-size: 12px; color: var(--accent); font-weight: 700; }
.map-section-title {
  margin: 12px 0 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.map-system-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.map-system-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(9,20,34,0.96) 0%, rgba(4,10,18,0.98) 100%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
.map-system-cell:hover {
  border-color: var(--border-bright);
  background: linear-gradient(180deg, rgba(13,28,45,0.96) 0%, rgba(6,13,22,0.98) 100%);
  transform: translateY(-1px);
}
.map-system-cell.mine { border-color: rgba(60,200,90,0.4); }
.map-system-cell.enemy { border-color: rgba(220,80,80,0.35); }
.map-system-cell.empty {
  cursor: default;
  opacity: 0.35;
  transform: none;
}
.map-system-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.map-system-coord {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.map-system-star {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.map-system-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-dim);
  font-size: 9px;
}
.map-system-flags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.map-system-empty {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.map-astro-table {
  table-layout: fixed;
}
.map-astro-table th:nth-child(1) { width: 24%; }
.map-astro-table th:nth-child(2) { width: 24%; }
.map-astro-table th:nth-child(3) { width: 14%; }
.map-astro-table th:nth-child(4) { width: 10%; }
.map-astro-table th:nth-child(5) { width: 14%; }
.map-astro-table th:nth-child(6) { width: 14%; }
.map-astro-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.map-astro-sub {
  font-size: 10px;
  line-height: 1.35;
}
.map-astro-status,
.map-astro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Static system page (classic galaxy-view style) */
.map-system-page {
  padding-top: 4px;
}
.map-system-wrap {
  display: flex;
  justify-content: center;
  overflow-x: auto;
}
.map-system-box {
  position: relative;
  width: 700px;
  min-width: 700px;
  padding: 14px 18px 18px;
  border: 1px solid #4c6f93;
  background: linear-gradient(180deg, rgba(12, 26, 40, 0.98) 0%, rgba(7, 15, 24, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(124, 159, 196, 0.07);
  overflow: hidden;
}
.map-system-box::before {
  content: "";
  position: absolute;
  left: -162px;
  top: 10px;
  width: 250px;
  height: 310px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.map-system-yellow::before,
.map-system-orange::before,
.map-system-white::before,
.map-system-white-dwarf::before,
.map-system-neutron::before {
  background: radial-gradient(circle at 83% 50%, rgba(255,255,255,0.96) 0 26%, rgba(224,232,240,0.84) 30%, rgba(152,177,208,0.22) 38%, transparent 46%);
}
.map-system-blue::before,
.map-system-blue-giant::before {
  background: radial-gradient(circle at 83% 50%, rgba(214,232,255,0.94) 0 24%, rgba(166,198,255,0.78) 29%, rgba(82,126,219,0.24) 39%, transparent 47%);
}
.map-system-red::before,
.map-system-red-giant::before,
.map-system-super-giant::before {
  background: radial-gradient(circle at 83% 50%, rgba(255,222,214,0.94) 0 25%, rgba(255,182,168,0.78) 30%, rgba(202,96,84,0.24) 39%, transparent 47%);
}
.map-system-canvas {
  position: relative;
  width: 650px;
  min-width: 650px;
  height: 300px;
  margin: 0 auto;
  z-index: 1;
}
.map-system-astro {
  position: absolute;
  width: 120px;
}
.map-system-astro-small .map-system-astro-visual {
  width: 70px;
  height: 70px;
}
.map-system-astro-micro .map-system-astro-visual {
  width: 34px;
  height: 34px;
}
.map-system-astro-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.map-system-astro-visual.fogged::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 18%, rgba(7,12,20,0.18) 46%, rgba(4,8,14,0.42) 70%, rgba(0,0,0,0.62) 100%);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.7), 0 0 10px rgba(180,210,255,0.08);
}
.map-system-astro-visual.has-debris::after {
  content: '*';
  position: absolute;
  top: -4px;
  right: 6px;
  color: #ffd766;
  font-weight: 700;
  font-size: 18px;
  text-shadow: 0 0 4px rgba(0,0,0,0.9);
}
.map-system-astro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(118, 152, 188, 0.24);
}
.map-system-astro-img.fogged {
  filter: grayscale(1) brightness(0.42) contrast(1.08) saturate(0.15);
}
.bd-astro-img.fogged {
  filter: grayscale(1) brightness(0.46) contrast(1.05) saturate(0.2);
}
.map-system-astro-desc {
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
}
.map-system-owner-mine {
  color: var(--text-bright);
}
.map-system-owner-other {
  color: var(--accent);
}
.map-system-empty-label {
  color: #8f9399;
}

/* Astro orbs in orbit slots */
.astro-orb {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  position: relative;
  transition: transform 0.15s;
  overflow: hidden;
  flex-shrink: 0;
}
.astro-orb:hover { transform: scale(1.15); z-index: 1; }
.astro-orb.astro-lg { width: 40px; height: 40px; }
.astro-orb.astro-md { width: 36px; height: 36px; }
.astro-orb.astro-sm { width: 22px; height: 22px; }
.astro-orb.astro-xs { width: 14px; height: 14px; border-width: 1px; }
.astro-orb-label {
  font-size: 8px; color: rgba(0,0,0,0.7); font-weight: 700;
  text-transform: uppercase; text-shadow: 0 0 2px rgba(255,255,255,0.3);
}
/* Astro sprite image inside orbit orb */
.astro-orb-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Astro sprite in planet detail row */
.planet-sprite-lg {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
/* Astro sprite in base header */
.base-header-sprite {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid var(--border);
}
.astro-orb.astro-fog { opacity: 0.5; border-style: dashed; }
.planet-row-fog { opacity: 0.7; }
.astro-detail-list { margin-top: 4px; }

/* ── STATUS BADGES ── */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-green { background: rgba(29,194,53,0.15); color: var(--success); border: 1px solid rgba(29,194,53,0.3); }
.badge-blue { background: rgba(73,214,254,0.12); color: var(--accent2); border: 1px solid rgba(73,214,254,0.25); }
.badge-warn { background: rgba(255,165,0,0.12); color: var(--warn); border: 1px solid rgba(255,165,0,0.3); }
.badge-red { background: rgba(255,42,38,0.12); color: var(--danger); border: 1px solid rgba(255,42,38,0.3); }
.badge-info { background: rgba(100,180,255,0.12); color: #6ab4ff; border: 1px solid rgba(100,180,255,0.3); }
.badge-dim { background: rgba(150,150,150,0.12); color: #999; border: 1px solid rgba(150,150,150,0.3); }
.badge-success { background: rgba(100,255,100,0.12); color: #6f6; border: 1px solid rgba(100,255,100,0.3); }

/* ── Clickable coordinate links ── */
.coord-link {
  color: var(--accent2, #49d6fe);
  text-decoration: none;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.coord-link:hover {
  text-decoration: underline;
  color: #7de4ff;
}

/* ── ADMIN PAGE ── */
#admin-page { display: flex; flex-direction: column; min-height: 100vh; }
.admin-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-title { font-family: var(--font-main); font-size: 14px; font-weight: 700; color: var(--accent-glow); letter-spacing: 0.08em; }
.admin-body { padding: 20px; max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 20px; }
#admin-page .panel-body { overflow-x: auto; }

/* Admin tab navigation bar */
.admin-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
}
.admin-tabs .awe-nav-btn {
  flex: 1;
  text-align: center;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-tabs .awe-nav-btn:hover { background: var(--bg-hover); color: var(--text); }
.admin-tabs .awe-nav-btn.active { background: var(--bg-card); color: var(--accent); border: 1px solid var(--border-bright); }

/* Admin tab panels — hide/show */
.admin-tab-panel { display: none; flex-direction: column; gap: 20px; }
.admin-tab-panel.active { display: flex; }

.config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.config-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.config-key { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.config-desc { font-size: 10px; color: var(--text-dim); margin-top: 3px; font-style: italic; }
.config-item input, .config-item select {
  width: 100%;
  background: #171F2F;
  border: 1px solid #444;
  border-radius: 3px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.2s;
}
.config-item input:focus, .config-item select:focus { border-color: var(--accent); }

/* Balance fields hold anything from 3.5 to 500000, so a fixed pixel width
   either clips the big values or wastes a column on the small ones. They size
   to their content where the browser supports it, and fall back to a width
   that fits six digits. The native spinner is dropped: it overlapped the
   digits in the narrow columns, and these are typed, not nudged. */
.stat-input {
  background: rgba(0,0,0,0.4); color: var(--text-bright); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 5px; font-family: var(--font-mono); font-size: 11px;
  text-align: right;
  box-sizing: content-box;
  width: 7ch;
  min-width: 4ch;
  max-width: 16ch;
  field-sizing: content;
}
.stat-input:focus { border-color: var(--accent); outline: none; }
.stat-input[type="number"]::-webkit-inner-spin-button,
.stat-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stat-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── MISC ── */
.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.countdown { font-family: var(--font-mono); color: var(--warn); font-size: 11px; }
.countdown-done { color: var(--success); animation: countdown-pulse 1s ease-in-out 2; }
@keyframes countdown-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.credits-value { font-family: var(--font-mono); color: var(--accent-glow); font-weight: 700; }
.production-rate { font-size: 11px; color: var(--accent2); }

.empty-state {
  text-align: center;
  padding: 36px;
  color: var(--text-dim);
}
.empty-state .icon { font-size: 2.2rem; margin-bottom: 10px; }
.empty-state p { font-size: 12px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-right { text-align: right; }
.text-dim { color: var(--text-dim); }
.text-bright { color: var(--text-bright); }
.text-accent { color: var(--accent); }
.text-accent2 { color: var(--accent2); }
.text-warn { color: var(--warn); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--font-mono); }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-8 { margin-top: 8px; }
.w-full { width: 100%; }

/* ── MODAL (engine popup style) ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 8, 0.85);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  width: min(560px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 60px rgba(0,0,0,0.8), inset 0 0 5px 2px rgba(255,255,255,0.02);
}
.modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-header);
}
.modal-title { font-weight: 700; font-size: 13px; color: var(--accent); }
.modal-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; }
.modal-close:hover { color: var(--text-bright); }
.modal-body { padding: 16px; }
.modal-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ── SYSTEM PANEL (sidebar info) ── */
.system-info .sys-name { font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: 5px; }
.sys-planet {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer; margin-bottom: 3px;
  transition: all 0.12s;
  font-size: 11px;
}
.sys-planet:hover { background: var(--bg-hover); border-color: var(--border); }
.sys-planet.colonized { border-color: rgba(73,214,254,0.25); }
.sys-planet.mine { border-color: rgba(29,194,53,0.3); background: rgba(29,194,53,0.04); }
.planet-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── WIN BANNER ── */
.win-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(135deg, #1a4d00, #003d1a);
  border-bottom: 2px solid var(--success);
  padding: 12px 20px;
  text-align: center;
  z-index: 999;
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
  text-shadow: 0 0 8px rgba(29,194,53,0.5);
}

/* ── NOTIFICATION BELL ── */
.notif-bell {
  position: relative;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 3px 4px;
  transition: transform 0.15s;
}
.notif-bell:hover { transform: scale(1.1); }
.notif-badge {
  position: absolute;
  top: -2px; right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 6px;
  min-width: 14px;
  text-align: center;
  line-height: 12px;
}

/* ── JUMP TO BASE BAR ── */
.jump-to-base-bar {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-left: auto;
}
.map-side-list.jump-to-base-bar {
  margin-left: 0;
  flex-wrap: nowrap;
}

/* ── FOG OF WAR ── */
.region-cell.fog {
  background: rgba(0,0,0,0.5);
  opacity: 0.5;
  position: relative;
}
.region-cell.fog:hover {
  background: rgba(255,255,255,0.03);
  opacity: 0.7;
}
.region-cell.fog .rg-name {
  color: var(--text-dim);
  border-color: rgba(122,150,173,0.3);
}
.fog-label {
  color: var(--text-dim) !important;
  font-style: italic;
  font-size: 9px !important;
}

.region-cell.snapshot {
  background: rgba(73,214,254,0.04);
  position: relative;
}
.region-cell.snapshot::after {
  content: '~';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  color: var(--accent2);
  opacity: 0.5;
}
.snapshot-label { font-size: 10px; }
.snapshot-age { color: var(--warn); font-size: 9px; font-style: italic; }
.snapshot-badge {
  display: inline-block;
  background: rgba(255,165,0,0.12);
  color: var(--warn);
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 5px;
  vertical-align: middle;
}

.fog-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
  text-align: center;
  gap: 6px;
}
.fog-icon { font-size: 2rem; opacity: 0.4; }

/* ── MAP TOOLTIP ── */
.map-tooltip {
  display: none;
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-bright);
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

/* ── TRADE ROUTE CARD ── */
.trade-route-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.trade-route-card:hover { border-color: var(--border-bright); }

/* ── OCCUPATION BANNER ── */
.occupy-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 14px;
  background: rgba(255, 42, 38, 0.06);
  border-bottom: 1px solid rgba(255, 42, 38, 0.2);
  font-size: 11px;
  color: var(--danger);
  flex-wrap: wrap;
}

/* ── DEBRIS BADGE ── */
.debris-badge {
  display: inline-block;
  background: rgba(73, 214, 254, 0.08);
  border: 1px solid rgba(73, 214, 254, 0.2);
  color: var(--accent2);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-top: 2px;
}

/* ── MESSAGE LIST ── */
.msg-unread { background: rgba(234, 199, 103, 0.04); }
.msg-unread td { font-weight: 600; }

.top-badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  line-height: 13px;
  margin-left: 3px;
  vertical-align: middle;
}

/* ── ACCOUNT TAB ── */
#tab-account .data-table td:first-child {
  width: 140px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── SNACKBAR ENHANCEMENT ── */
#send-snack {
  animation: snackIn 0.3s ease-out;
}
@keyframes snackIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── BUILDING CARD LOCKED STATE ── */
.building-card.locked {
  opacity: 0.4;
  pointer-events: none;
}

/* ── FLEET STATUS COLORS ── */
.fleet-card .text-warn { font-weight: 600; }

/* ── GUILD TAB ── */
#tab-guild .data-table td:first-child { white-space: nowrap; }

/* ── EVENT LOG ── */
#empire-content .data-table tr td:first-child { white-space: nowrap; font-size: 10px; }

/* ── COUNTDOWN PULSE ── */
.countdown {
  animation: countdownPulse 2s ease-in-out infinite;
}
@keyframes countdownPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .map-layout { flex-direction: column; }
  .map-sidebar { display: none; }
  .map-sidebar-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
  .map-sidebar-cluster-title { padding: 4px 8px; }
  .map-sidebar-galaxy { display: inline-block; width: auto; padding: 3px 8px; }
  .map-view { min-height: 300px; border-radius: 0 0 5px 5px; }
  .starfield-map { max-width: 100%; max-height: 60vh; }
  .sys-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .map-breadcrumb { font-size: 11px; padding: 6px 8px; }
  .map-system-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .galaxy-layout { flex-direction: column; }
  .map-sidebar { display: none; }
  .topbar-info { display: none; }
  /* Hide tablet-non-essential columns */
  .tablet-hide { display: none !important; }
  .map-local-controls { gap: 6px; }
  .map-coord-jump input { width: 96px; }
  .map-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── BBCode Styles ── */
.bbcode-content { line-height: 1.5; word-wrap: break-word; }
.bbcode-content a { color: #49D6FE; text-decoration: underline; }
.bbcode-content a:hover { color: #EAC767; }
.bbcode-content img { border: 1px solid #1a3322; border-radius: 3px; margin: 4px 0; }
.bbcode-list { margin: 4px 0 4px 20px; padding: 0; }
.bbcode-list li { margin: 2px 0; }

/* BBCode toolbar buttons */
.bbcode-btn { min-width: 28px !important; padding: 2px 4px !important; font-size: 10px !important; text-align: center; }
.bbcode-color-swatch {
  display: inline-block; width: 14px; height: 14px; border: 1px solid #333;
  cursor: pointer; border-radius: 2px;
}
.bbcode-color-swatch:hover { border-color: #EAC767; transform: scale(1.2); }
.bbcode-toolbar { padding: 6px; background: rgba(0,0,0,0.2); border: 1px solid #1a3322; border-radius: 4px; }

/* ══════════════════════════════════════════════════════
   BASE DETAIL TAB (engine-style: selector + subtabs + 2-col)
   ══════════════════════════════════════════════════════ */

/* Base selector bar */
.base-selector-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: 5px 5px 0 0;
  flex-wrap: wrap;
}
.base-selector {
  background: #0D2232;
  border: 1px solid #29587A;
  border-radius: 4px;
  color: var(--text-bright);
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font-main);
  font-weight: 600;
  cursor: pointer;
  min-width: 200px;
}
.base-selector:focus { border-color: var(--accent); outline: none; }
.base-selector-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
.base-selector-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

/* Base sub-tabs */
.base-subtabs {
  display: flex;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
}
.base-subtab-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 0;
}
.base-subtab-row .awe-subtab {
  flex: none;
}

/* Classic-style local base shell */
.base-page-shell {
  display: flex;
  flex-direction: column;
}
.base-local-shell {
  background: linear-gradient(180deg, rgba(18,41,63,0.98) 0%, rgba(8,20,31,0.99) 100%);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.base-local-top {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(130px, 0.8fr) minmax(170px, 1fr) minmax(180px, 1fr) minmax(120px, 0.7fr);
}
.base-local-cell {
  min-height: 58px;
  padding: 8px 12px;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.base-local-cell:first-child {
  border-left: none;
}
.base-local-selector {
  display: flex;
  align-items: center;
}
.base-local-select-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.base-local-select {
  min-width: 150px;
  max-width: 100%;
  background: #0d2232;
  border: 1px solid #29587a;
  border-radius: 4px;
  color: var(--text-bright);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-main);
}
.base-local-select:focus {
  outline: none;
  border-color: var(--accent);
}
.base-local-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 4px 8px;
  border: 1px solid rgba(83, 126, 164, 0.85);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(17,38,58,0.95) 0%, rgba(9,20,31,0.98) 100%);
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.base-local-icon-link:hover {
  color: var(--accent);
  text-decoration: none;
  border-color: rgba(234,199,103,0.65);
}
.base-mini-label {
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.base-mini-value {
  display: flex;
  align-items: center;
  min-height: 18px;
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 700;
}
.base-mini-value a {
  font-weight: 700;
}
.base-mini-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
}
.base-mini-stat span {
  color: var(--text-dim);
}
.base-mini-stat strong {
  color: var(--text-bright);
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.base-mini-stat small {
  color: var(--text-dim);
  font-size: 10px;
  margin-left: 2px;
}
.base-local-menu {
  margin-bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.base-local-menu a {
  text-transform: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
}
.base-main-panel {
  min-width: 0;
}
.base-overview-shell {
  background: linear-gradient(180deg, rgba(11,24,39,0.98) 0%, rgba(7,16,26,0.99) 100%);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.base-overview-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.15fr) minmax(240px, 1fr);
  align-items: stretch;
}
.base-overview-col {
  padding: 16px;
}
.base-overview-specs,
.base-overview-info {
  background: rgba(5, 11, 20, 0.28);
}
.base-overview-specs {
  border-right: 1px solid rgba(255,255,255,0.05);
}
.base-overview-info {
  border-left: 1px solid rgba(255,255,255,0.05);
}
.base-overview-kicker {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
}
.base-overview-box-title {
  margin: 12px 0 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.base-overview-table td {
  padding: 3px 10px 3px 0;
}
.base-overview-resource-table {
  width: 100%;
  border-collapse: collapse;
}
.base-overview-resource-table td {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}
.base-overview-resource-table td:last-child {
  text-align: right;
  color: var(--text-bright);
  font-family: var(--font-mono);
}
.base-overview-planet {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background: radial-gradient(circle at center, rgba(17,33,51,0.85) 0%, rgba(6,12,20,0.95) 62%, rgba(3,7,12,1) 100%);
}
.base-overview-planet-img {
  width: min(240px, 100%);
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(110, 160, 220, 0.22));
}
.base-overview-note {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 11px;
}
.base-overview-section {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.base-overview-section-title {
  margin-bottom: 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.base-overview-line {
  font-size: 11px;
  line-height: 1.5;
}
.base-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.base-overview-mini-table {
  margin: 0;
}
.base-overview-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}
.base-overview-link {
  color: var(--accent);
  text-decoration: none;
}
.base-overview-link:hover {
  color: var(--accent-glow);
  text-decoration: underline;
}

/* Two-column layout */
.base-detail-layout {
  display: flex;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 5px 5px;
  min-height: 400px;
  background: var(--bg-panel);
}
.base-detail-left {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
}
.base-detail-right {
  width: 220px;
  min-width: 220px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}

/* Planet image in right panel */
.base-planet-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(15,22,35,0.9) 0%, rgba(5,8,12,1) 70%);
  border-bottom: 1px solid var(--border);
}
.base-planet-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(100,150,200,0.15), 0 0 40px rgba(50,80,120,0.08);
  object-fit: cover;
}

/* Stats panel in right column */
.base-stats-panel {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.base-stats-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}
.base-stats-table td {
  padding: 2px 4px;
}
.base-stats-table td:last-child {
  text-align: right;
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Construction queue panel */
.base-queue-panel {
  flex: 1;
  overflow-y: auto;
}
.base-queue-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 8px 12px 4px;
  border-bottom: 1px solid var(--border);
}
.base-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.base-queue-active {
  background: rgba(73,214,254,0.06);
}
.base-queue-pos {
  color: var(--text-dim);
  font-size: 10px;
  min-width: 14px;
}

/* Building/defense item rows (engine list style) */
.base-item-list {
  display: flex;
  flex-direction: column;
}
.base-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.base-item-row:hover {
  background: var(--bg-hover);
}
.base-item-available {
  opacity: 0.7;
}
.base-item-available:hover {
  opacity: 1;
}
.base-item-locked {
  opacity: 0.35;
  pointer-events: none;
}
.base-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.base-item-info {
  flex: 1;
  min-width: 0;
}
.base-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.base-item-desc {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
}
.base-item-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.base-list-divider {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* engine-style structures/defenses table */
.awe-struct-table th { text-align: center; font-size: 11px; padding: 4px 8px; }
.awe-struct-table td { padding: 4px 8px; vertical-align: top; }
.awe-struct-table tbody tr:hover { background: var(--bg-hover); }

/* Ship count input in production tab */
.ship-count-input {
  background: #0D2232;
  border: 1px solid #29587A;
  border-radius: 3px;
  color: var(--text-bright);
  padding: 2px 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: center;
}
.ship-count-input:focus { border-color: var(--accent); outline: none; }
.base-prod-active-row td {
  background: rgba(73, 214, 254, 0.08);
}

/* Base production panel */
.base-production-panel {
  padding: 0;
}
.base-production-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 4px;
}
.base-production-help {
  font-size: 10px;
  text-align: right;
  padding-bottom: 4px;
}
.base-build-ships {
  padding: 12px;
}
.base-build-ships .section-title {
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .base-detail-layout { flex-direction: column; }
  .base-detail-right { width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; }
  .base-planet-img-wrap { padding: 10px; }
  .base-planet-img { width: 80px; height: 80px; }
  .base-selector { min-width: 140px; }
  .base-local-top { grid-template-columns: 1fr 1fr; }
  .base-local-selector { grid-column: 1 / -1; }
  .base-local-cell:nth-child(3) { border-left: none; }
  .base-overview-top { grid-template-columns: 1fr; }
  .base-overview-specs,
  .base-overview-info {
    border: none;
  }
  .base-overview-grid { grid-template-columns: 1fr; }
}

/* Resource bars */
.res-bar-wrap { display: flex; align-items: center; gap: 6px; min-width: 160px; }
.res-label { font-size: 10px; color: #8a9a8a; min-width: 56px; text-align: right; }
.res-bar { width: 80px; height: 8px; background: rgba(0,0,0,0.4); border: 1px solid #1a3322; border-radius: 3px; overflow: hidden; }
.res-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.res-nums { font-size: 10px; color: #c0d0c0; font-family: 'Courier New', monospace; min-width: 50px; }

/* Available section collapsible */
.available-section summary { font-size: 11px; color: #8a9a8a; }
.available-section summary:hover { color: #EAC767; }
.available-section[open] summary { color: #49D6FE; }
.available-section .building-card { opacity: 0.8; border-style: dashed; }
.available-section .building-card:hover { opacity: 1; }

/* Base detail styles moved to style_base_detail.css. */

/* Account and guild styles moved to style_account_guild.css. */

/* Mobile/responsive styles moved to style_mobile.css. */

/* ── flat galaxy coordinate table (map_depth=3) ── */
.flatmap-galaxy-view { padding: 8px 4px 8px 150px; max-width: 860px; }
.flatmap-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.flatmap-nav-item { display: inline-flex; align-items: center; gap: 6px; color: #9fb6cc; font-size: 12px; }
.flatmap-nav select, .flatmap-sys-input {
  background: #0e1622; color: #cfe2f5; border: 1px solid #2a3b50; border-radius: 4px;
  padding: 3px 6px; font-size: 12px;
}
.flatmap-sys-input { width: 60px; text-align: center; }
.flatmap-step {
  background: #16263a; color: #8fd0ff; border: 1px solid #2a3b50; border-radius: 4px;
  padding: 2px 8px; cursor: pointer; font-size: 13px;
}
.flatmap-step:hover { background: #1d3550; }
.flatmap-loc { margin-left: auto; color: #eac767; font-weight: bold; font-size: 13px; }
.flatmap-galaxy-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.flatmap-galaxy-table th {
  text-align: left; color: #7a96ad; font-weight: normal; padding: 4px 8px;
  border-bottom: 1px solid #24344a;
}
.flatmap-galaxy-table td { padding: 5px 8px; border-bottom: 1px solid #16202e; }
.flatmap-row { cursor: pointer; }
.flatmap-row:hover { background: #14202f; }
.flatmap-row.mine { background: rgba(73,214,254,0.07); }
.flatmap-row.enemy { background: rgba(255,120,120,0.06); }
.flatmap-pos { color: #6f8aa3; width: 44px; }
.flatmap-astro { display: flex; align-items: center; gap: 6px; text-transform: capitalize; color: #cfe2f5; }
.flatmap-astro img { border-radius: 3px; vertical-align: middle; }
.flatmap-coord { color: #7a96ad; }