/* ═══════════════════════════════════════════════
   SPINTRIX BRAND VARIABLES (shared)
═══════════════════════════════════════════════ */
:root {
  --bg:        #0A0F1A;
  --grey-1:    #CACBCE;
  --grey-2:    #798591;
  --orange:    #F66804;
  --cyan:      #04F1FF;
  --black:     #000000;
  --white:     #FFFFFF;

  /* UI-specific derived tokens */
  --panel-bg:        rgba(10,15,26,0.92);
  --panel-border:    rgba(4,241,255,0.18);
  --panel-border-2:  rgba(246,104,4,0.5);
  --btn-bg:          rgba(255,255,255,0.06);
  --btn-hover:       rgba(4,241,255,0.12);
  --btn-active-c:    var(--cyan);
  --btn-active-o:    var(--orange);
  --hud-bg:          rgba(6,10,19,0.80);
  --hud-border:      rgba(246,104,4,0.5);

  /* Typography */
  --font-head: 'Anton', sans-serif;
  --font-body: 'Satoshi', sans-serif;

  /* Glow effects */
  --glow-c:  0 0 12px rgba(4,241,255,0.5), 0 0 30px rgba(4,241,255,0.2);
  --glow-o:  0 0 12px rgba(246,104,4,0.6), 0 0 30px rgba(246,104,4,0.25);
  --glow-sm: 0 0 8px rgba(4,241,255,0.35);
}

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

html, body {
  width:100%; height:100%;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--white);
  overflow: hidden;
  user-select: none;
}

/* ═══════════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════════ */
#loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  transition: opacity 0.6s ease;
}
#loading-screen.hidden { opacity: 0; pointer-events: none; }

.loading-logo {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.loading-logo-sygnet {
  width: 120px; height: 120px; object-fit: contain;
  animation: logo-pulse 3s ease-in-out infinite;
}
.loading-logo-wordmark {
  height: 36px; object-fit: contain;
  animation: logo-pulse 3s ease-in-out infinite 0.5s;
}
@keyframes logo-pulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(4,241,255,0.3)); }
  50%      { filter: brightness(1.25) drop-shadow(0 0 18px rgba(4,241,255,0.6)) drop-shadow(0 0 40px rgba(246,104,4,0.2)); }
}
.loading-bar-wrap {
  width: 220px; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
.loading-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
  border-radius: 2px;
  animation: loadbar 2.2s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes loadbar {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}
.loading-pct {
  font-size: 11px; color: var(--grey-2); letter-spacing: 2px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}