/* Secret Space Society — dark space theme */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #080c14;
  --surface:  #0f1623;
  --border:   #1e2d45;
  --accent:   #38bdf8;
  --accent2:  #7c3aed;
  --text:     #e2e8f0;
  --muted:    #64748b;
  --danger:   #ef4444;
  --gold:     #f59e0b;
  --radius:   10px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
}

/* ── Site nav ─────────────────────────────────────────────── */
.site-nav {
  display: flex; flex-wrap: wrap; gap: .65rem 1.25rem;
  padding: .75rem 1.5rem; border-bottom: 1px solid var(--border);
  background: #0a0f18; align-items: center;
}
.site-nav a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; border-bottom: 2px solid transparent; padding-bottom: .1rem; }
.site-nav a:hover { color: var(--accent); }
.site-nav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Layout ───────────────────────────────────────────────── */
#app { max-width: 900px; margin: 0 auto; padding: 2rem 1rem 4rem; }

h1 { font-size: 2rem; font-weight: 700; color: var(--accent); text-align: center; margin-bottom: .25rem; }
.tagline { text-align: center; color: var(--muted); margin-bottom: 2rem; }

/* ── Screens ──────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem;
}
.card h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--accent); }
.card h3 { font-size: 1rem; margin-bottom: .75rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .65rem 1.4rem; border: none;
  border-radius: var(--radius); font-size: .95rem; font-weight: 600;
  cursor: pointer; transition: opacity .15s, transform .1s;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary   { background: var(--accent);  color: #000; }
.btn-secondary { background: var(--accent2); color: #fff; }
.btn-ghost     { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-danger    { background: var(--danger); color: #fff; }
.btn:disabled  { opacity: .4; cursor: not-allowed; transform: none; }

/* ── Inputs ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .85rem; color: var(--muted); }
.field input {
  background: #0a0f18; border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: .55rem .8rem; font-size: .95rem; outline: none;
}
.field input:focus { border-color: var(--accent); }

/* ── Landing buttons ──────────────────────────────────────── */
.landing-btns { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-top: 2rem; }
.landing-btns .btn { width: 240px; text-align: center; font-size: 1.1rem; padding: .9rem; }

/* ── Lobby ────────────────────────────────────────────────── */
.lobby-code {
  font-size: 2.5rem; font-weight: 800; letter-spacing: .3rem;
  color: var(--gold); text-align: center; margin: 1rem 0;
}
.player-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.player-list li {
  display: flex; align-items: center; gap: .75rem;
  background: #0a0f18; border-radius: 6px; padding: .55rem .9rem; font-size: .9rem;
}
.player-badge {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.player-badge.host { background: var(--gold); }

/* ── Race picker ──────────────────────────────────────────── */
.race-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.race-card {
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 1rem; text-align: center; cursor: pointer;
  transition: border-color .2s, transform .15s;
  background: #0a0f18;
}
.race-card:hover { transform: translateY(-3px); }
.race-card.selected { border-color: var(--accent); background: #0d1e30; }
.race-card.taken { opacity: .35; cursor: not-allowed; }
.race-dot {
  width: 40px; height: 40px; border-radius: 50%;
  margin: 0 auto .6rem; border: 3px solid rgba(255,255,255,.2);
}
.race-name { font-weight: 700; font-size: .9rem; }
.race-taker { font-size: .75rem; color: var(--muted); margin-top: .25rem; }

/* ── Board screen ─────────────────────────────────────────── */
#screen-board { position: relative; }
#board-wrap { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); cursor: grab; touch-action: none; height: calc(100dvh - 100px); }
#board-wrap.panning { cursor: grabbing; }
#board-svg { display: block; }
#board-wrap text { pointer-events: none; user-select: none; }
#board-card-view {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  z-index: 200;
  padding: .75rem;
}

/* ── Hex info panel ──────────────────────────────────────────────────────── */
.hex-info-panel {
  position: fixed; bottom: 0; left: 0;
  width: 220px; max-height: 60vh; overflow-y: auto;
  background: rgba(8, 12, 20, 0.95);
  border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
  padding: .6rem .75rem .75rem; z-index: 200;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: .4rem;
}
.hex-info-panel.hidden { display: none !important; }
.hex-info-header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .2rem; }
.hex-info-title { font-size: .8rem; font-weight: 700; color: var(--accent); flex: 1; }
.hex-info-close {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  color: var(--muted); font-size: .7rem; width: 1.3rem; height: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; line-height: 1;
}
.hex-info-close:hover { color: var(--text); border-color: var(--text); }
.hip-row { font-size: .75rem; color: var(--text); display: flex; align-items: center; gap: .3rem; }
.hip-muted { color: var(--muted); }
.hip-owner { color: var(--muted); font-size: .7rem; }
.hex-info-actions { display: flex; flex-direction: column; gap: .35rem; margin-top: .2rem; }
.hip-action-btn { width: 100%; text-align: left; font-size: .75rem; padding: .3rem .5rem; }

/* ── Player HUD — fixed to viewport top-left (stays put while map pans) ── */
.player-hud {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 50;
  background: rgba(8, 12, 20, 0.92);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem .75rem;
  width: 210px;
  backdrop-filter: blur(6px);
}
.hud-race-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
}
.hud-race-name {
  font-size: .95rem; font-weight: 700; flex: 1;
}
.hud-toggle-btn {
  font-size: .72rem; padding: .25rem .55rem; white-space: nowrap;
}
.hud-unrest-row {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .35rem; font-size: .85rem; color: var(--danger);
}
.hud-unrest-icon { width: 16px; height: 16px; fill: var(--danger); flex-shrink: 0; }
.hud-hint { font-size: .78rem; color: var(--muted); margin-top: .35rem; word-break: break-word; }
.hud-actions { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }

/* ── Planet on-board aura pulse ───────────────────────────────────────────── */
.planet-clickable { cursor: pointer; }
@keyframes planet-aura-pulse {
  0%, 100% { opacity: 0.20; }
  50%       { opacity: 0.42; }
}
.planet-aura-pulse { animation: planet-aura-pulse 2.6s ease-in-out infinite; }

/* ── Planet detail modal ──────────────────────────────────────────────────── */
.planet-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
}
.planet-modal-overlay.hidden { display: none !important; }
.planet-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem 1.75rem 1.75rem;
  width: min(92vw, 340px); display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem; position: relative;
}
.planet-modal-close {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 50%; width: 2rem; height: 2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem;
}
.planet-modal-close:hover { border-color: var(--accent); color: var(--accent); }
.planet-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--accent); }

/* flame display */
.planet-display {
  position: relative; width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center;
}
.planet-flame-outer {
  position: absolute; width: 180px; height: 180px; border-radius: 50%;
  background: conic-gradient(
    var(--pc) 0%, #ff8800 10%, #ffcc00 18%, transparent 28%,
    transparent 36%, var(--pc) 48%, #ff4400 58%, #ff9900 66%, transparent 76%,
    transparent 84%, var(--pc) 92%, #ffaa00 100%
  );
  filter: blur(14px);
  animation: flame-spin 12s linear infinite;
  opacity: 0.80;
}
.planet-flame-mid {
  position: absolute; width: 144px; height: 144px; border-radius: 50%;
  background: conic-gradient(
    transparent 0%, var(--pc) 12%, #ff6600 22%, #ffdd00 32%, transparent 44%,
    transparent 56%, var(--pc) 68%, #ff5500 78%, transparent 90%, transparent 100%
  );
  filter: blur(9px);
  animation: flame-spin 8s linear infinite reverse;
  opacity: 0.70;
}
.planet-body {
  position: relative; z-index: 2;
  width: 88px; height: 88px; border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.40);
}
@keyframes flame-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* stat list */
.planet-stat-list {
  width: 100%; display: flex; flex-direction: column; gap: .5rem;
}
.planet-stat-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .5rem; background: rgba(255,255,255,.04);
  border-radius: 6px;
}
.planet-stat-icon { width: 20px; height: 20px; flex-shrink: 0; }
.planet-stat-label { flex: 1; font-size: .88rem; color: var(--muted); }
.planet-stat-value { font-size: .95rem; font-weight: 700; color: var(--text); }

/* Hex types */
.hex-space      { fill: #1e4070; }
.hex-tri        { fill: #1e4070 !important; }
.hex-white      { fill: #d0d0d0; }
.hex-blue       { fill: #1a5296; }
.hex-green      { fill: #1a5c32; }
.hex-red        { fill: #7a1515; }
.hex-yellow     { fill: #7a6315; }
.hex-black_hole { fill: #000; stroke: #7c3aed !important; stroke-width: 2.5px; }
.hex-orbital    { fill: #3e8fba; }
.hex-bs_slot    { fill: #9ec8e0; }
.hex-science    { fill: #baaad8; }

.hex-poly { stroke: #1e3050; stroke-width: 0.5; cursor: pointer; transition: filter .15s; }
.hex-poly:hover { filter: brightness(1.4); }
.hex-poly.hex-placeable { stroke: #00ff55; stroke-width: 2; filter: brightness(1.3) drop-shadow(0 0 5px #00ff55); }
.hex-poly.hex-placeable:hover { filter: brightness(1.6) drop-shadow(0 0 8px #00ff55); }
.hex-poly.hex-construct-target { fill: rgba(251,191,36,0.25) !important; stroke: #fbbf24 !important; stroke-width: 1.5 !important; cursor: pointer !important; }
.hex-poly.hex-construct-target:hover { filter: brightness(1.5) drop-shadow(0 0 6px #fbbf24); }
.hex-poly.hex-science-available { stroke: #a855f7 !important; stroke-width: 1.8 !important; cursor: pointer !important; animation: sciPulse 1.8s ease-in-out infinite; }
.hex-poly.hex-science-available:hover { filter: brightness(1.5) drop-shadow(0 0 7px #a855f7); }
@keyframes sciPulse { 0%,100%{stroke-opacity:1} 50%{stroke-opacity:0.4} }
.construct-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-radius: 6px; cursor: pointer; transition: background .15s; }
.construct-row:hover:not(.disabled) { background: var(--card-hover, rgba(255,255,255,0.06)); }
.construct-row.disabled { opacity: 0.4; cursor: not-allowed; }
.construct-cost { font-size: .85rem; color: var(--gold, #f0d060); font-weight: 600; margin-left: 1rem; flex-shrink: 0; }
.construct-cost.cant-afford { color: var(--danger, #e74c3c); }
.construct-label-wrap { display: flex; flex-direction: column; gap: .1rem; }
.construct-stats { font-size: .72rem; color: var(--muted, #8899aa); }
.cp-purse { display: flex; gap: 1.2rem; align-items: center; justify-content: center; padding: .4rem 0 .6rem; border-bottom: 1px solid var(--border); margin-bottom: .4rem; }
.cp-purse-item { display: flex; align-items: center; gap: .3rem; font-size: .95rem; font-weight: 700; color: var(--text); }

/* ── Status bar ───────────────────────────────────────────── */
#status-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #0a0f18; border-top: 1px solid var(--border);
  padding: .5rem 1rem; font-size: .8rem; color: var(--muted);
  display: flex; gap: 1.5rem; align-items: center;
}
#status-bar .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); display: inline-block; margin-right: .4rem;
}
#status-bar .dot.connected { background: #22c55e; }

/* ── Utility ──────────────────────────────────────────────── */
.mt1 { margin-top: .5rem; }
.mt2 { margin-top: 1rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.hint { font-size: .8rem; color: var(--muted); }
.error-msg { color: var(--danger); font-size: .85rem; margin-top: .5rem; }
.hidden { display: none !important; }

/* ── Piece legend (board) ─────────────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; }
.legend-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.legend-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); }

/* ── Player race card (board phase) ──────────────────────── */
.player-race-card {
  display: flex; flex-direction: column; gap: .75rem;
}
.race-card-header {
  display: flex; align-items: center; gap: .65rem;
}
.race-card-badge {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); flex-shrink: 0;
}
.race-card-title { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.race-card-player { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.piece-grid {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem;
  font-size: .8rem; color: var(--muted); align-items: center;
}
.piece-grid .pc { color: var(--text); font-weight: 700; }

/* ── Watcher banner ───────────────────────────────────────── */
.watcher-banner {
  text-align: center; padding: .65rem; border-radius: var(--radius);
  background: #12172a; border: 1px solid var(--border);
  color: var(--muted); font-size: .9rem; margin-bottom: 1rem;
}

/* ── Player card resources ────────────────────────────────── */
.resource-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: .4rem;
}
.resource-item {
  display: flex; align-items: center; justify-content: flex-start; gap: .3rem;
  background: #0a0f18; border: 1px solid var(--border);
  border-radius: 6px; padding: .3rem .4rem;
}
.resource-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05rem; }
.resource-count { font-size: 1rem; font-weight: 700; color: var(--text); }

/* ── Tech tree ────────────────────────────────────────────── */
.tech-tree {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  gap: .5rem .6rem;
}
.tech-col { display: flex; flex-direction: column; gap: .35rem; }
.tech-col-header {
  font-size: .65rem; color: var(--accent); font-weight: 700;
  text-align: center; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
  min-height: 2.4rem;
  display: flex; align-items: flex-end; justify-content: center;
}
.tech-costs-col { display: flex; flex-direction: column; gap: .35rem; }
.tech-costs-header {
  min-height: 2.4rem; display: flex; align-items: flex-end;
  padding-bottom: .3rem; border-bottom: 1px solid var(--border);
}
.tech-cost {
  height: 26px; display: flex; align-items: center;
  justify-content: flex-end; gap: .18rem;
  font-size: .65rem; color: var(--muted);
  white-space: nowrap; padding-right: .25rem;
}
.icon-res   { width: 13px; height: 13px; vertical-align: middle; }
.icon-vp    { width: 12px; height: 12px; vertical-align: middle; }
.icon-food  { width: 16px; height: 16px; vertical-align: middle; }
.icon-tool  { width: 14px; height: 14px; vertical-align: middle; }
.icon-money { width: 15px; height: 15px; vertical-align: middle; }

/* ── Income / Turn — 3-column grid ────────────────────────── */
.income-section { }
.income-heading {
  font-size: .7rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06rem; margin-bottom: .4rem; font-weight: 600;
}
.income-grid-3 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .3rem .5rem;
  align-items: center;
  font-size: .78rem;
}
.income-col-hdr {
  font-size: .65rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05rem; font-weight: 600; text-align: center;
}
.income-col-hdr.cost-hdr { color: #ef444488; }
.income-res-label {
  display: flex; align-items: center; justify-content: flex-start;
  background: #0a0f18; border: 1px solid var(--border);
  border-radius: 6px; padding: .28rem .4rem;
}
.income-res-label img, .income-res-label svg { width: 16px; height: 16px; }
.income-cell {
  display: flex; align-items: center; justify-content: center;
  background: #0a0f18; border: 1px solid var(--border);
  border-radius: 6px; padding: .28rem .55rem;
  min-width: 2.6rem; text-align: center;
}
.income-count { color: #22c55e !important; font-weight: 700; }
.income-negative { color: var(--danger) !important; font-weight: 700; }
.income-zero { color: var(--muted) !important; }
.upkeep-cost { color: var(--danger); font-weight: 700; }
.tech-level {
  height: 26px; border-radius: 5px;
  background: #0a0f18; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; color: var(--muted);
  cursor: pointer; transition: border-color .15s;
}
.tech-level:hover { border-color: var(--accent); }
.tech-level .tech-name { display: none; font-size: .58rem; line-height: 1.25; color: var(--accent); text-align: center; padding: .15rem; }
.tech-level.revealed { height: auto; min-height: 26px; padding: .2rem .15rem; }
.tech-level.revealed .tech-lvl-label { display: none; }
.tech-level.revealed .tech-name { display: block; }
.tech-level.unlocked {
  background: var(--accent2); border-color: var(--accent2); color: #fff; font-weight: 600;
}

/* ── Draft phase overlay ─────────────────────────────────── */
.draft-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.draft-overlay.hidden { display: none !important; }
.draft-modal {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
}
.draft-phase-label {
  font-size: 1.3rem; font-weight: 800; color: var(--accent); letter-spacing: .04rem;
}
.draft-subtitle { font-size: .85rem; color: var(--muted); }
.draft-sections { display: flex; flex-direction: column; gap: .85rem; }
.draft-section { }
.draft-section-label {
  font-size: .65rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07rem; margin-bottom: .35rem;
}
.draft-card-row {
  display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .3rem;
}
.draft-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.draft-row:last-child { border-bottom: none; }
.draft-qty { font-size: .85rem; color: var(--muted); flex-shrink: 0; min-width: 1.8rem; }
.draft-name { font-size: .9rem; font-weight: 600; color: var(--text); flex: 1; }
.draft-tag { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06rem; color: var(--muted); background: rgba(255,255,255,.06); border-radius: 4px; padding: .1rem .35rem; }
.draft-cn { font-size: .88rem; font-weight: 600; color: var(--text); }
.draft-empire { color: var(--gold); }
.draft-effect { font-size: .75rem; color: var(--muted); width: 100%; padding-left: 2.1rem; line-height: 1.4; }
.draft-footer { }

/* ── Card viewer overlay ─────────────────────────────────── */
.card-viewer {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.card-viewer.hidden { display: none !important; }
.card-viewer-close {
  position: absolute; top: 1rem; right: 1rem;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); font-size: 1.1rem;
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.card-viewer-close:hover { border-color: var(--accent); color: var(--accent); }
.card-viewer-card {
  width: 100%; max-width: 380px; min-height: 320px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  touch-action: pan-y; user-select: none;
}
.cv-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;
}
.cv-card-title { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.cv-card-rate {
  font-size: .68rem; font-weight: 700; border-radius: 4px; padding: .18rem .5rem;
}
.act-tier1 { background: #164e63; color: #38bdf8; }
.act-tier2 { background: #450a0a; color: #f87171; }
.cv-action-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .25rem; }
.cv-action-row {
  display: flex; align-items: center; gap: .85rem;
  background: #0a0f18; border: 1px solid var(--border); border-radius: 7px;
  padding: .55rem .85rem;
}
.cv-action-icon-sm { width: 32px; height: 32px; flex-shrink: 0; }
.cv-action-label { font-size: .95rem; font-weight: 700; color: var(--text); letter-spacing: .05rem; }
.card-viewer-nav {
  display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem;
}
.card-nav-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  font-size: 1.6rem; width: 42px; height: 42px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.card-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.card-nav-dots { display: flex; gap: .5rem; align-items: center; }
.cv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .15s; }
.cv-dot.active { background: var(--accent); }

/* tech / empire card content in viewer */
.cv-card-timing {
  font-size: .68rem; font-weight: 700; border-radius: 4px; padding: .18rem .5rem;
  background: #1e3a5f; color: #93c5fd;
}
.cv-card-empire-badge {
  font-size: .68rem; font-weight: 700; border-radius: 4px; padding: .18rem .5rem;
  background: #3b2500; color: var(--gold);
}
.cv-card-effect {
  font-size: .88rem; color: var(--text); line-height: 1.6;
  padding: .75rem; background: rgba(255,255,255,.04); border-radius: 7px;
  margin-top: .25rem;
}


/* ── Tech card hand ───────────────────────────────────────── */
.tech-cards-section { }
.tech-cards-heading {
  font-size: .7rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06rem; margin-bottom: .4rem; font-weight: 600;
}
.tech-card-list { display: flex; flex-direction: column; gap: .45rem; }
.tech-card {
  background: #0a0f18; border: 1px solid var(--border);
  border-radius: 7px; padding: .55rem .75rem;
}
.tech-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .3rem;
}
.tech-card-name { font-size: .88rem; font-weight: 700; color: var(--text); }
.tech-card-timing {
  font-size: .62rem; font-weight: 700; color: #fff;
  background: var(--accent2); border-radius: 4px;
  padding: .1rem .45rem; white-space: nowrap; flex-shrink: 0;
}
.tech-card-effect { font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ── Turn actions ─────────────────────────────────────────── */
.turn-actions { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.btn-sm { font-size: .8rem !important; padding: .3rem .75rem !important; }
.flight-hint { margin-top: .75rem; }

/* ── Hex action highlights ───────────────────────────────────── */
/* selectable source: green-ish pulse — player's frigate cluster */
.hex-selectable { fill: rgba(74,222,128,0.22) !important; stroke: #4ade80 !important; stroke-width: 1.5 !important; cursor: pointer !important; }
.hex-planet-target { fill: rgba(251,146,60,0.18) !important; stroke: #fb923c !important; stroke-width: 1.5 !important; }
/* Fog of war */
.hex-fog { fill: #050810 !important; stroke: #0e1828 !important; stroke-width: 0.5 !important; opacity: 0.88 !important; cursor: default !important; pointer-events: none !important; }
.hex-fog-explore { fill: rgba(56,189,248,0.10) !important; stroke: #38bdf8 !important; stroke-width: 1.2 !important; cursor: pointer !important; opacity: 0.9 !important; }
.hex-fog-explore:hover { fill: rgba(56,189,248,0.22) !important; }
/* selected source */
.hex-selected   { fill: rgba(74,222,128,0.45) !important; stroke: #4ade80 !important; stroke-width: 2   !important; cursor: pointer !important; }
/* reachable destination */
.hex-flight-target { fill: rgba(56,189,248,0.28) !important; stroke: #38bdf8 !important; stroke-width: 1.5 !important; cursor: pointer !important; }
/* specific enemy hex targeted for attack */
.hex-attack-target { filter: drop-shadow(0 0 6px #ef4444) drop-shadow(0 0 3px #ef4444); }

/* ── Combat planet stats row ─────────────────────────────────── */
.combat-planet-stats {
  display: flex; gap: .75rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--accent); font-weight: 600;
  margin-bottom: .65rem;
}

/* ── Action picker overlay ──────────────────────────────────── */
.action-picker-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.action-picker-overlay.hidden { display: none !important; }
.action-picker-modal {
  width: 100%; max-width: 340px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; position: relative;
  display: flex; flex-direction: column; gap: 1rem;
}
.action-picker-close {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 50%; width: 2rem; height: 2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.action-picker-close:hover { border-color: var(--accent); color: var(--accent); }
.action-picker-title { font-size: 1rem; font-weight: 700; color: var(--accent); }
.action-pick-list { display: flex; flex-direction: column; gap: .45rem; }
.action-pick-row {
  display: flex; align-items: center; gap: .85rem;
  background: #0a0f18; border: 1px solid var(--border); border-radius: 7px;
  padding: .55rem .85rem; cursor: pointer; transition: border-color .15s;
}
.action-pick-row:hover { border-color: var(--accent); }
.action-pick-row.sub-action {
  margin-left: 0; border-left: 2px solid var(--border);
  border-radius: 0 7px 7px 0; font-size: .9rem; opacity: .9;
}
.action-skill-cost {
  margin-left: auto; font-size: .75rem; color: var(--muted);
  white-space: nowrap; padding-left: .5rem;
}

/* ── Combat modal ───────────────────────────────────────────── */
.combat-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,.92);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.25rem; overflow-y: auto;
}
.combat-overlay.hidden { display: none !important; }
.combat-modal {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  max-height: 88vh; overflow: hidden;
  margin: auto 0;
}
.combat-modal-body {
  overflow-y: auto; flex: 1; min-height: 0;
}
.combat-modal-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.combat-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--danger); flex: 1; }
.combat-close-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  color: var(--muted); font-size: .85rem; width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; line-height: 1;
  transition: color .15s, border-color .15s;
}
.combat-close-btn:hover { color: var(--text); border-color: var(--text); }
.combat-close-btn.hidden { display: none; }
.combat-tech-label { font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }
.combat-tech-list { display: flex; flex-direction: column; gap: .4rem; }
.combat-tech-item {
  background: #0a0f18; border: 1px solid var(--border);
  border-radius: 7px; padding: .5rem .75rem; cursor: pointer; transition: border-color .15s;
}
.combat-tech-item:hover { border-color: var(--accent); }
.combat-tech-item.selected { border-color: var(--accent2); background: rgba(124,58,237,.12); }
.combat-tech-name { font-size: .88rem; font-weight: 700; color: var(--text); }
.card-count-badge { font-size: .75rem; font-weight: 700; color: var(--accent2); opacity: .9; }
.combat-tech-effect { font-size: .75rem; color: var(--muted); display: block; line-height: 1.4; }
.combat-result-outcome {
  font-size: 1.1rem; font-weight: 700; text-align: center;
  padding: .6rem; border-radius: 7px; margin-bottom: .25rem;
}
.combat-result-outcome.win  { color: #4ade80; background: rgba(74,222,128,.1); }
.combat-result-outcome.lose { color: var(--danger); background: rgba(239,68,68,.1); }
.combat-dice-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.combat-dice-block { flex: 1; min-width: 130px; }
.combat-dice-label { font-size: .75rem; color: var(--muted); margin-bottom: .4rem; }
.combat-dice-vals { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.die {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border: 1px solid var(--border);
  border-radius: 5px; font-size: .85rem; font-weight: 700; background: #0a0f18;
}
.die-reroll { cursor: pointer; border-color: var(--accent2); color: var(--accent2); }
.die-reroll:hover { background: rgba(99,179,237,.15); filter: brightness(1.3); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }

/* ── Dice throw animation ─────────────────────────────────────── */
@keyframes dice-fly-left {
  0%   { transform: translateX(-320%) rotate(-200deg); opacity: 0; }
  70%  { transform: translateX(8%)    rotate(20deg);   opacity: 1; }
  100% { transform: translateX(0)     rotate(0deg);    opacity: 1; }
}
@keyframes dice-fly-right {
  0%   { transform: translateX(320%)  rotate(200deg);  opacity: 0; }
  70%  { transform: translateX(-8%)   rotate(-20deg);  opacity: 1; }
  100% { transform: translateX(0)     rotate(0deg);    opacity: 1; }
}
.die-throw {
  animation: dice-fly-left .55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.die-throw.from-right {
  animation-name: dice-fly-right;
}
.combat-resource-gain {
  margin-top: .75rem;
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.res-chip {
  font-size: .8rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: 999px; border: 1px solid;
}
.res-chip.food    { color: #86efac; border-color: #4ade80; background: rgba(74,222,128,.08); }
.res-chip.science { color: #93c5fd; border-color: #60a5fa; background: rgba(96,165,250,.08); }
.res-chip.tool    { color: #fcd34d; border-color: #f59e0b; background: rgba(245,158,11,.08); }
.combat-waiting-msg {
  font-size: .85rem; color: var(--muted); text-align: center;
  padding: .5rem; border: 1px dashed var(--border); border-radius: 7px;
}
.combat-rolled-preview {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .35rem;
}

/* ── End-game report modal ────────────────────────────────────────────────── */
.go-modal {
  background: #0f1623; border: 2px solid #f59e0b; border-radius: 16px;
  padding: 1.5rem 1.75rem; max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.go-title {
  font-size: 1.6rem; font-weight: 800; color: #f59e0b; text-align: center;
  margin-bottom: .25rem;
}
.go-subtitle {
  text-align: center; color: var(--muted); font-size: .9rem;
  margin-bottom: 1.25rem;
}
.go-player-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: .75rem 1rem; margin-bottom: .75rem;
}
.go-player-card.go-winner {
  border-color: #f59e0b; background: rgba(245,158,11,.05);
}
.go-player-header {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .6rem;
}
.go-color-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.go-player-name {
  font-weight: 700; font-size: 1rem; flex: 1;
}
.go-vp {
  font-size: .95rem; font-weight: 700; color: #f59e0b;
}
.go-stat-grid {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem;
  align-items: start;
}
.go-stat-label {
  font-size: .78rem; color: var(--muted); white-space: nowrap;
  padding-top: .15rem;
}
.go-stat-val {
  font-size: .82rem; display: flex; flex-wrap: wrap; gap: .3rem;
}
.go-tag {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: .15rem .5rem; font-size: .78rem;
  white-space: nowrap;
}

/* ── Breadcrumb toasts ───────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 56px; right: 12px;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .35rem;
  z-index: 500; pointer-events: none; max-width: 320px;
}
.toast-msg {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(10,15,24,.95); border: 1px solid var(--border);
  border-radius: 20px; padding: .38rem .85rem;
  font-size: .78rem; color: var(--text);
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.toast-msg.toast-visible { opacity: 1; transform: translateY(0); }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }