:root {
  --player-color-blue:   #3a7ab8;
  --player-color-red:    #b83a3a;
  --player-color-green:  #3ab83a;
  --player-color-yellow: #b8b03a;
  --se4x-sidebar-compact:  200px;
  --se4x-sidebar-expanded: 350px;
  --se4x-game-min-width:   750px;
}

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

body {
  background: #07070f;
  color: #c0d4f0;
  font-family: 'Courier New', monospace;
  height: 100vh;
  overflow: hidden;
}

/* ─── Scale Wrapper ───────────────────────────────────────────────────────── */
/* Maps to BGA's game_interface_width (min: 750) + autoscale in gameinfos.inc.php on port */

#se4x_game_wrap {
  min-width: var(--se4x-game-min-width);
  transform-origin: top left;
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */

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

#header {
  background: #0b1520;
  border-bottom: 1px solid #1a3a5c;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #7ab8f5;
}

#active-player-turn {
  font-size: 11px;
  letter-spacing: 1px;
  transition: color 0.2s;
}

#player-select-label {
  font-size: 11px;
  color: #6a8098;
}

select {
  background: #0b1520;
  color: #7ab8f5;
  border: 1px solid #1a3a5c;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  margin-left: 6px;
}

#main { display: flex; flex: 1; overflow: hidden; }

#board-container {
  flex: 1;
  min-width: 300px;
  overflow: hidden;
  background: transparent;
  position: relative;
  user-select: none;
}

#board { display: block; position: absolute; }

#tooltip {
  position:       absolute;
  pointer-events: none;
  display:        none;
  z-index:        100;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

#sidebar {
  width: var(--se4x-sidebar-compact);
  background: #0b1520;
  border-left: 1px solid #1a3a5c;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex-shrink: 0;
  position: relative;
  transition: width 0.25s ease-in-out;
}
#sidebar.expanded {
  width: var(--se4x-sidebar-expanded);
}
@media (min-width: 1100px) {
  #sidebar.expanded {
    width: 420px;
  }
}

/* ─── Sidebar Toggle ──────────────────────────────────────────────────────── */

.sidebar-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 40px;
  background: #0d2040;
  color: #7ab8f5;
  border: 1px solid #1a3a5c;
  border-left: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  padding: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle:hover {
  background: #1a3a5c;
}

/* ─── Block System ───────────────────────────────────────────────────────── */

.hdr-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header: divider between adjacent blocks (horizontal flex → border-left) */
.hdr-block + .hdr-block {
  border-left: 1px solid #1a3a5c;
  margin-left: 8px;
  padding-left: 8px;
}

/* Sidebar: divider between adjacent blocks */
.sb-block + .sb-block {
  border-top: 1px solid #1a3a5c;
}

/* Vertically center content in non-scrolling sidebar blocks.
   Equal padding above and below ensures content sits centered
   between adjacent divider borders. */
.sb-block:not(#sb-log) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Log block fills remaining sidebar space */
#sb-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 8px;
}
#sb-log-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#player-name { font-size: 13px; color: #7ab8f5; font-weight: bold; }
#player-cp   { font-size: 22px; color: #f0c040; }

/* ─── Counter Inventory ──────────────────────────────────────────────────── */

#counter-inventory {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: baseline;
  line-height: 1.4;
  width: max-content;
}

.ci-count {
  font-variant-numeric: tabular-nums;
}

#game-phase  { font-size: 12px; color: #c0d8e8; line-height: 1.5; }
#game-phase.error { color: #ff4444; font-weight: bold; }

/* ─── Action Prompt ──────────────────────────────────────────────────────── */

.action-prompt {
  font-size: 11px;
  color: #c0d4f0;
  font-weight: 600;
  line-height: 1.5;
  padding: 6px 8px 6px 10px;
  border-left: 3px solid #f0c040;
  background: rgba(240, 192, 64, 0.06);
  letter-spacing: 0.5px;
}
.action-prompt:empty {
  display: none;
}

/* ─── Phase-ending buttons (inside sb-status) ───────────────────────────── */

.btn-end-phase {
  width: 100%;
  padding: 7px 4px;
  margin-top: 8px;
  background: #0d2040;
  color: #7ab8f5;
  border: 1px solid #1a3a5c;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
}
.btn-end-phase:hover:not(:disabled) { background: #1a3a5c; }
.btn-end-phase:disabled { opacity: 0.35; cursor: default; }

/* §Undo: destructive button variant for phase-ending buttons (same sizing, red colors) */
.btn-status-destructive {
  background: #2a0a0a;
  color: #ff6666;
  border-color: #5a2a2a;
}
.btn-status-destructive:hover:not(:disabled) {
  background: #3a1a1a;
}

#action-panel {
  border: 1px solid #1a3a5c;
  background: #0a1828;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.action-panel-title {
  font-size: 11px;
  color: #7ab8f5;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.action-hint {
  font-size: 9px;
  color: #6a8098;
  line-height: 1.4;
  border-left: 2px solid #6a8098;
  padding-left: 6px;
  margin-bottom: 4px;
}
.action-hint.exhausted { color: #7a4a4a; }
#action-panel button {
  width: 100%;
  padding: 5px 4px;
  margin-top: 4px;
  background: #0d2040;
  color: #7ab8f5;
  border: 1px solid #1a3a5c;
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
}
#action-panel button:hover:not(:disabled) { background: #1a3a5c; }
#action-panel button:disabled { opacity: 0.35; cursor: default; }

/* ─── Destructive action button (reusable) ───────────────────────────────── */

#action-panel .btn-destructive {
  background: #2a0a0a;
  color: #ff6666;
  border: 1px solid #5a2a2a;
}
#action-panel .btn-destructive:hover {
  background: #3a1a1a;
}

/* ─── Merge buttons ──────────────────────────────────────────────────────── */

/* ─── Action panel sections (shared) ─────────────────────────────────────── */

.action-divider {
  margin-top: 2px;
  margin-bottom: 2px;
  border-top: 1px solid #1a3a5c;
}

.action-section {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #1a3a5c;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-section-header {
  font-size: 9px;
  color: #6a8098;
  letter-spacing: 2px;
}

.merge-btn {
  width: 100%;
  padding: 5px 4px;
  background: #0d2040;
  color: #7ab8f5;
  border: 1px solid #1a3a5c;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-align: left;
}
.merge-btn:hover {
  background: #1a3a5c;
}

#log-header { /* styled via graphics.json logHeader */ }
#log {
  font-size: 9px;
  color: #3a6a8a;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1;
}
.log-entry { margin-bottom: 2px; }
.log-type-exploration { border-left: 2px solid #3a5a7a; padding-left: 4px; }
.log-type-exploration.log-danger { border-left-color: #b83a3a; color: #ff6666; }
.log-type-exploration.log-supernova { border-left-color: #b8a03a; color: #f0c040; }
.log-type-blackHoleRoll { border-left: 2px solid #3a5a7a; padding-left: 4px; }
.log-type-blackHoleRoll.log-danger { border-left-color: #b83a3a; color: #ff6666; }
.log-type-blackHoleRoll.log-blackhole { color: #6a8098; }

/* ─── Turn Tracker ────────────────────────────────────────────────────────── */

.turn-tracker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  user-select: none;
}

.tt-ec {
  color: #3a5a7a;
  font-size: 11px;
  letter-spacing: 2px;
}

.tt-ec-active {
  color: #f0c040;
  font-weight: bold;
}

.tt-ec-prev {
  color: #3a5a7a;
}

.tt-ec-next {
  color: #2a4a6a;
  opacity: 0.7;
}

.tt-sep {
  color: #2a4a6c;
}

.tt-dot {
  color: #2a4a6c;
}

.tt-turn {
  color: #4a6a8a;
}

.tt-turn-done {
  color: #4a6a8a;
}

.tt-turn-current {
  color: #7ab8f5;
  font-weight: bold;
}

/* ─── Home area perimeter borders ─────────────────────────────────────────── */
.home-borders { pointer-events: none; }

/* ─── Hex grid ────────────────────────────────────────────────────────────── */
/* TODO [BGA V5]: img/background.jpg is 3.3 MB — compress to under 2 MB before BGA port */

.hex {
  fill: transparent;
  cursor: pointer;
  transition: fill 0.12s;
}
.hex:hover             { fill: rgba(255,255,255,0.04); }
.hex-has-bg            { fill: transparent; }

/* Home system fills — subtle zone tinting; borders come from graphics.json */
/* Classes use color names to match JS-generated hex-home-{color} classes     */
.hex-home-blue         { fill: rgba(20,60,120,0.15); }
.hex-home-red          { fill: rgba(120,20,20,0.15); }
.hex-home-green        { fill: rgba(20,120,20,0.15); }
.hex-home-yellow       { fill: rgba(120,110,20,0.15); }

.hex-homeworld.hex-home-blue   { fill: rgba(20,60,120,0.25); }
.hex-homeworld.hex-home-red    { fill: rgba(120,20,20,0.25); }
.hex-homeworld.hex-home-green  { fill: rgba(20,120,20,0.25); }
.hex-homeworld.hex-home-yellow { fill: rgba(120,110,20,0.25); }

.hex-dead                  { stroke: #1a1a2e; fill: none; pointer-events: none; }
#se4x_game_wrap .hex-dead .hex-coord { font-style: italic; fill: #3a4a5a; }

@keyframes stroke-pulse {
  0%, 100% { stroke-opacity: 0.3; }
  50%      { stroke-opacity: 1.0; }
}

/* Valid-move overlay — drawn AFTER home borders so pulse is never covered */
#se4x_game_wrap .hex-valid-move {
  fill: none;
  stroke: var(--valid-move-stroke, #b8a050);
  stroke-width: var(--valid-move-stroke-width, 2.5);
  animation: stroke-pulse 2.5s ease-in-out infinite;
  pointer-events: none;  /* clicks pass through to hex polygon beneath */
}

/* Small coordinate label — hidden by default, toggled via COORDS button */
.hex-coord {
  font-size: 6px;
  fill: #7ab8f5;
  pointer-events: none;
  user-select: none;
  display: none;
}
.show-coords .hex-coord {
  display: block;
}

/* Debug tile type labels — hidden by default, toggled via TILES button */
.debug-tile-label {
  pointer-events: none;
  user-select: none;
  display: none;
}
.show-debug-tiles .debug-tile-label {
  display: block;
}

/* Header toggle buttons */
.header-btn {
  background: #0d2040;
  color: #5a8aaa;
  border: 1px solid #1a3a5c;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 8px;
  cursor: pointer;
}
.header-btn:hover { background: #1a3a5c; }
.header-btn.active { color: #7ab8f5; border-color: #3a6a9a; }

/* ─── Counters ────────────────────────────────────────────────────────────── */

.counter {
  cursor: pointer;
}

/* Fallback coloured rectangles when no art is loaded */
/* Classes use color names to match JS-generated counter-{color} classes */
.counter-blue   { fill: #0d2b4a; stroke: #3a7ab8; stroke-width: 1.5; }
.counter-red    { fill: #2b0d0d; stroke: #b83a3a; stroke-width: 1.5; }
.counter-green  { fill: #0d2b0d; stroke: #3ab83a; stroke-width: 1.5; }
.counter-yellow { fill: #2b2a0d; stroke: #b8b03a; stroke-width: 1.5; }

.counter-label {
  font-size: 9px;
  fill: #e0e8ff;
  pointer-events: none;
  user-select: none;
}

/* ─── Tooltip tech grid ──────────────────────────────────────────────────── */

.tt-tech {
  display: grid;
  grid-template-columns: 3ch auto 3ch auto;
  gap: 2px 8px;
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid #1a3a5c;
}
.tt-lbl { color: #8090a8; }
.tt-val { color: #c0d4f0; text-align: right; }

/* ─── Navigation buttons (link-style, lavender) ─────────────────────────── */

.header-btn-nav {
  background: #0d1530;
  color: #8a7aaa;
  border-color: #2a2a4c;
}
.header-btn-nav:hover {
  background: #1a2a4c;
  color: #a090c0;
}