/* ============================================================
   LEY·LINES — global shell & boot veil
   The HUD has its own stylesheet (src/ui/hud.css).
   ============================================================ */

:root {
  --bg-void:        #07060d;
  --bg-deep:        #0a0712;
  --ink:            #e8e0ff;
  --ink-dim:        #9a8fc0;
  --gold:           #e9c46a;
  --gold-bright:    #ffe7a8;
  --arcane:         #7b6cf6;
  --arcane-bright:  #b3a7ff;
  --frost:          #5fd0ff;
  --storm:          #c6a6ff;
  --ember:          #ff8a4c;
  --toxin:          #8af06a;
  --danger:         #ff5470;

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body:    'Spectral', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

#ui-root {
  position: absolute;
  inset: 0;
  pointer-events: none; /* children opt back in */
  z-index: 10;
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.2rem;
  text-align: center;
  padding: 2rem;
}

/* ---------------- Boot veil ---------------- */

.boot-veil {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background:
    radial-gradient(1200px 800px at 50% 38%, #140e26 0%, var(--bg-deep) 45%, var(--bg-void) 100%);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}
.boot-veil.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-sigil { filter: drop-shadow(0 0 18px rgba(123, 108, 246, 0.55)); }
.boot-sigil svg { display: block; }
.boot-sigil .ring,
.boot-sigil .rune {
  fill: none;
  stroke: var(--arcane-bright);
  stroke-width: 1.2;
  opacity: 0.85;
}
.boot-sigil .ring-outer { animation: spin 18s linear infinite; transform-origin: 60px 60px; stroke-dasharray: 6 10; }
.boot-sigil .ring-inner { animation: spin 11s linear infinite reverse; transform-origin: 60px 60px; stroke: var(--gold); opacity: 0.6; }
.boot-sigil .rune   { stroke: var(--frost); opacity: 0.5; animation: pulse 3.2s ease-in-out infinite; transform-origin: 60px 60px; }
.boot-sigil .rune-2 { stroke: var(--gold);  opacity: 0.4; animation: spin 26s linear infinite; transform-origin: 60px 60px; }
.boot-sigil .core   { fill: var(--gold-bright); stroke: none; animation: corepulse 2.4s ease-in-out infinite; transform-origin: 60px 60px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 0.25; } 50% { opacity: 0.7; } }
@keyframes corepulse {
  0%,100% { filter: drop-shadow(0 0 4px var(--gold-bright)); transform: scale(0.85); }
  50%     { filter: drop-shadow(0 0 14px var(--gold-bright)); transform: scale(1.15); }
}

.boot-title {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(233, 196, 106, 0.5), 0 0 4px rgba(255,255,255,0.4);
}
.boot-sub {
  font-style: italic;
  color: var(--ink-dim);
  letter-spacing: 0.22em;
  font-size: clamp(0.8rem, 2vw, 1rem);
}

.boot-bar {
  margin-top: 1.6rem;
  width: min(320px, 60vw);
  height: 3px;
  background: rgba(123, 108, 246, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.boot-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--arcane), var(--gold-bright));
  box-shadow: 0 0 12px var(--arcane-bright);
  transition: width 0.4s ease;
}
.boot-status {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.boot-error {
  margin-top: 1rem;
  max-width: 36ch;
  text-align: center;
  color: var(--danger);
  font-size: 0.85rem;
  line-height: 1.5;
}