/* css/base.css — foundational tokens, typography, reset */

:root {
  --gold:          #f8d878;
  --gold-dim:      rgba(248, 216, 120, 0.5);
  --gold-faint:    rgba(248, 216, 120, 0.12);
  --cyan:          #5ed7ff;
  --magenta:       #ff7ad5;
  --green:         #7bff9a;
  --red:           #ff4466;
  --bg-deep:       #030107;
  --bg-void:       #0a0518;
  --bg-card:       rgba(10, 5, 24, 0.92);
  --text-bright:   #ffffff;
  --text:          #e9e4d8;
  --text-dim:      #857f70;
  --text-faint:    #4a4638;
  --border-gold:   rgba(248, 216, 120, 0.3);
  --border-soft:   rgba(248, 216, 120, 0.12);
  --font-display:  'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:     system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

.hidden { display: none !important; }

#game-root { position: fixed; inset: 0; }

#timeline-canvas, #galaxy-canvas { position: fixed; inset: 0; display: block; }
#hud-layer, #modal-layer, #toast-layer { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud-layer > *, #modal-layer > *, #toast-layer > * { pointer-events: auto; }

/* ─── Boot screen ─────────────────────────────────────────────── */
#boot-screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, var(--bg-void) 0%, var(--bg-deep) 60%, #000 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100; transition: opacity 1.2s ease-out;
}
#boot-screen.fade-out { opacity: 0; pointer-events: none; }

.boot-logo {
  font-family: var(--font-display);
  font-size: 48px; letter-spacing: 0.4em; color: var(--gold);
  text-shadow: 0 0 30px var(--gold-dim);
  margin-bottom: 8px;
  animation: pulse-glow 3s ease-in-out infinite;
}
.boot-subtitle {
  font-size: 11px; letter-spacing: 0.3em; color: var(--text-dim);
  margin-bottom: 48px;
}
.boot-progress {
  width: 320px; height: 2px; background: rgba(248, 216, 120, 0.15);
  overflow: hidden; border-radius: 2px;
}
.boot-progress-bar {
  height: 100%; width: 0%; background: var(--gold);
  box-shadow: 0 0 10px var(--gold-dim);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.boot-status {
  margin-top: 16px; font-size: 11px; letter-spacing: 0.15em; color: var(--text-dim);
  font-family: var(--font-mono);
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 30px var(--gold-dim); }
  50%      { text-shadow: 0 0 50px var(--gold-dim), 0 0 80px rgba(248, 216, 120, 0.3); }
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  background: transparent; color: var(--gold);
  border: 1px solid var(--border-gold);
  padding: 8px 18px; border-radius: 24px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: inherit; cursor: pointer; transition: all 0.2s;
}
.btn:hover { background: var(--gold-faint); border-color: var(--gold); color: var(--text-bright); }
.btn:active { transform: scale(0.98); }
.btn-magenta { color: var(--magenta); border-color: rgba(255, 122, 213, 0.4); }
.btn-magenta:hover { background: rgba(255, 122, 213, 0.15); border-color: var(--magenta); }
.btn-ghost { color: var(--text-dim); border-color: rgba(255, 255, 255, 0.08); }
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); }