/* ============================================================
   NAUSTALGIAOS SITE THEME v1.2
   Character Bible color correction + nav override + scrollbar
   Drop-in after vanta-presence.css in index.html
   Does NOT touch terminal, audio, ghost, or game systems.
============================================================ */

/* ============================================================
   GLOBAL SCROLLBAR -- thick, stylized, CB palette
============================================================ */
:root {
  --sb-thumb:  #ff2a6d;
  --sb-track:  #0a0a0f;
  --sb-thumb-h:#f9f002;
  --sb-w: 10px;
}

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: var(--sb-w);
  height: var(--sb-w);
}
::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-left: 1px solid rgba(255,42,109,0.12);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255,42,109,0.9) 0%,
    rgba(123,44,191,0.8) 50%,
    rgba(255,42,109,0.9) 100%
  );
  border-radius: 2px;
  border: 1px solid rgba(249,240,2,0.15);
  box-shadow: 0 0 8px rgba(255,42,109,0.4), inset 0 0 4px rgba(0,0,0,0.4);
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(249,240,2,0.9) 0%,
    rgba(255,42,109,0.8) 50%,
    rgba(249,240,2,0.9) 100%
  );
  box-shadow: 0 0 14px rgba(249,240,2,0.5), inset 0 0 4px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-corner {
  background: var(--sb-track);
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* Keep terminal scroll hidden (override above for #term) */
#term,
#term .term-inner {
  scrollbar-width: none !important;
}
#term::-webkit-scrollbar,
#term .term-inner::-webkit-scrollbar {
  display: none !important;
}


/* ============================================================
   CB COLOR CORRECTIONS -- boot overlay
   Fixes fuchsia (#ff2a6d) -> CB magenta (#ff2a6d)
============================================================ */

/* Logo box corners */
#bootLogo::before,
#bootLogo::after {
  border-color: rgba(255,42,109,0.6) !important;
  box-shadow:
    0 0 20px rgba(255,42,109,0.3),
    inset 0 0 8px rgba(255,42,109,0.1) !important;
  animation: cornerPulseCB 4s ease-in-out infinite !important;
}

@keyframes cornerPulseCB {
  0%,100% { border-color: rgba(255,42,109,0.5); box-shadow: 0 0 15px rgba(255,42,109,0.2); }
  50%      { border-color: rgba(255,42,109,0.9); box-shadow: 0 0 35px rgba(255,42,109,0.5); }
}

/* Corner accents (yellow -- these are fine, just reinforce) */
.corner-accent.top-right,
.corner-accent.bottom-left {
  border-color: rgba(249,240,2,0.45) !important;
  box-shadow: 0 0 18px rgba(249,240,2,0.25) !important;
}

/* Logo title -- CB yellow */
#logoTitle {
  color: #f9f002 !important;
  text-shadow:
    0 0 2px #f9f002,
    0 0 10px #f9f002,
    0 0 30px #f9f002,
    0 0 60px rgba(249,240,2,0.7),
    0 0 100px rgba(249,240,2,0.4),
    0 0 150px rgba(249,240,2,0.2) !important;
  filter: drop-shadow(0 0 18px rgba(249,240,2,0.4)) !important;
  animation: titleBreathCB 5s ease-in-out infinite !important;
}

@keyframes titleBreathCB {
  0%,100% {
    text-shadow:
      0 0 2px #f9f002, 0 0 10px #f9f002,
      0 0 30px #f9f002, 0 0 60px rgba(249,240,2,0.6),
      0 0 100px rgba(249,240,2,0.3);
  }
  50% {
    text-shadow:
      0 0 5px #f9f002, 0 0 18px #f9f002,
      0 0 45px #f9f002, 0 0 90px rgba(249,240,2,0.8),
      0 0 130px rgba(249,240,2,0.4),
      0 0 180px rgba(255,42,109,0.2);
  }
}

/* OS suffix -- CB magenta */
#logoTitle .os-suffix {
  color: #ff2a6d !important;
  text-shadow:
    0 0 2px #ff2a6d,
    0 0 12px #ff2a6d,
    0 0 35px #ff2a6d,
    0 0 70px rgba(255,42,109,0.6) !important;
  filter: drop-shadow(0 0 12px rgba(255,42,109,0.5)) !important;
}

/* Version line */
#logoVersion {
  color: rgba(255,42,109,0.55) !important;
  text-shadow: 0 0 18px rgba(255,42,109,0.3) !important;
  border-top-color: rgba(255,42,109,0.2) !important;
}

/* Boot prompt */
#bootPrompt {
  color: rgba(249,240,2,0.75) !important;
  text-shadow:
    0 0 10px rgba(249,240,2,0.5),
    0 0 30px rgba(249,240,2,0.3) !important;
}

/* Power button */
#startBtn {
  filter:
    drop-shadow(0 0 15px #f9f002)
    drop-shadow(0 0 35px rgba(249,240,2,0.6))
    drop-shadow(0 0 70px rgba(249,240,2,0.3))
    drop-shadow(0 0 110px rgba(255,42,109,0.2)) !important;
}
#startBtn:hover {
  filter:
    drop-shadow(0 0 22px #f9f002)
    drop-shadow(0 0 55px rgba(249,240,2,0.8))
    drop-shadow(0 0 110px rgba(249,240,2,0.4))
    drop-shadow(0 0 160px rgba(255,42,109,0.3)) !important;
}

/* Orbital rings */
#bootAction::before {
  border-color: rgba(249,240,2,0.28) !important;
  box-shadow: 0 0 20px rgba(249,240,2,0.15), inset 0 0 20px rgba(249,240,2,0.05) !important;
}
#bootAction::after {
  border-color: rgba(255,42,109,0.22) !important;
  box-shadow: 0 0 15px rgba(255,42,109,0.12), inset 0 0 15px rgba(255,42,109,0.03) !important;
}

/* Edge lines */
#startOverlay .edge-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,42,109,0.12) 20%,
    rgba(255,42,109,0.35) 50%,
    rgba(255,42,109,0.12) 80%,
    transparent 100%) !important;
  box-shadow: 0 0 18px rgba(255,42,109,0.3) !important;
}

/* Grid */
#startOverlay .grid-layer {
  background-image:
    linear-gradient(rgba(255,42,109,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,42,109,0.04) 1px, transparent 1px) !important;
}

/* Corner data */
#startOverlay .corner-data {
  color: rgba(5,217,232,0.4) !important;
  text-shadow: 0 0 10px rgba(5,217,232,0.25) !important;
}

/* Footer */
#bootFooter {
  color: rgba(255,42,109,0.45) !important;
  text-shadow: 0 0 12px rgba(255,42,109,0.25) !important;
}
#bootFooter .separator {
  color: rgba(255,42,109,0.3) !important;
}

/* Glyphs */
#logoGlyphs {
  text-shadow:
    0 0 10px rgba(255,42,109,0.8),
    0 0 30px rgba(255,42,109,0.5),
    0 0 60px rgba(255,42,109,0.3) !important;
}

/* Photosensitivity warning */
#photosensitivityWarning {
  border-left-color: rgba(249,160,0,0.45) !important;
}
.warning-header {
  color: rgba(249,160,0,0.9) !important;
  text-shadow: 0 0 14px rgba(249,160,0,0.4) !important;
}


/* ============================================================
   NAV BUTTONS -- CB-colored, compact
   Palette: magenta base, yellow CTA, purple auth
   Cyan reserved for CRASH terminal text + audio viz only
============================================================ */
#linkBar .link-btn {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  gap: 6px !important;
  border-color: rgba(255,42,109,0.3) !important;
  color: rgba(255,42,109,0.75) !important;
  text-shadow: 0 0 8px rgba(255,42,109,0.3) !important;
  box-shadow: 0 0 6px rgba(255,42,109,0.08), inset 0 0 20px rgba(0,0,0,0.4) !important;
}
#linkBar .link-btn:hover {
  border-color: rgba(255,42,109,0.85) !important;
  color: #ffffff !important;
  background: rgba(255,42,109,0.12) !important;
  text-shadow: 0 0 14px rgba(255,42,109,0.9), 0 0 28px rgba(249,240,2,0.2) !important;
  box-shadow: 0 0 18px rgba(255,42,109,0.3), inset 0 0 20px rgba(255,42,109,0.06) !important;
}

/* TUNE IN -- bright magenta, featured */
#linkBar .link-btn.listen {
  border-color: rgba(255,42,109,0.6) !important;
  color: #ff2a6d !important;
  text-shadow: 0 0 10px rgba(255,42,109,0.5) !important;
}
#linkBar .link-btn.listen:hover {
  border-color: rgba(255,42,109,0.95) !important;
  background: rgba(255,42,109,0.18) !important;
  color: #ffffff !important;
}

/* REGISTER -- yellow primary CTA */
#linkBar .link-btn.register {
  border-color: rgba(249,240,2,0.5) !important;
  color: #f9f002 !important;
  text-shadow: 0 0 10px rgba(249,240,2,0.4) !important;
  box-shadow: 0 0 8px rgba(249,240,2,0.1), inset 0 0 20px rgba(0,0,0,0.4) !important;
}
#linkBar .link-btn.register:hover {
  border-color: rgba(249,240,2,0.95) !important;
  background: rgba(249,240,2,0.1) !important;
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(249,240,2,1), 0 0 32px rgba(249,240,2,0.4) !important;
  box-shadow: 0 0 24px rgba(249,240,2,0.3), inset 0 0 20px rgba(249,240,2,0.06) !important;
}

/* AUTH / LOGIN -- purple (Discord-adjacent) */
#linkBar .link-btn.auth {
  border-color: rgba(123,44,191,0.4) !important;
  color: rgba(155,93,229,0.8) !important;
  text-shadow: 0 0 8px rgba(123,44,191,0.4) !important;
}
#linkBar .link-btn.auth:hover {
  border-color: rgba(123,44,191,0.9) !important;
  background: rgba(123,44,191,0.12) !important;
  color: #ffffff !important;
}

/* DISCORD -- same purple family */
#linkBar .link-btn.discord {
  border-color: rgba(123,44,191,0.4) !important;
  color: rgba(155,93,229,0.8) !important;
  text-shadow: 0 0 8px rgba(123,44,191,0.4) !important;
}
#linkBar .link-btn.discord:hover {
  border-color: rgba(123,44,191,0.9) !important;
  background: rgba(123,44,191,0.12) !important;
  color: #ffffff !important;
}


/* ============================================================
   SLOT BADGE on SERVICES nav button
============================================================ */
.slot-badge {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  line-height: 1.4;
  font-family: 'Share Tech Mono', monospace;
  pointer-events: none;
}
.slot-badge.open {
  color: #0a0a0f;
  background: #00ff88;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
  animation: badgePulse 2.5s ease-in-out infinite;
}
.slot-badge.closed {
  color: #0a0a0f;
  background: #ff2a6d;
  box-shadow: 0 0 6px rgba(255, 42, 109, 0.5);
  animation: badgePulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}


/* ============================================================
   CUSTOM CURSOR — handled by glitch-cursor.js (canvas-based)
   Static SVG reticle removed in favor of animated glitch cluster.
   The JS file hides native cursor and renders a living pixel cluster.
============================================================ */

/* Fallback: if JS hasn't loaded yet, use a simple crosshair */
*, *::before, *::after {
  cursor: crosshair;
}

/* Text inputs keep standard text cursor */
input[type="text"], input:not([type]), textarea,
.gb-name-input, .gb-msg-input, .gb-search,
#termInput, #term input {
  cursor: text !important;
}

/* Kill the blue dot -- never shown */
#cursorGhost {
  display: none !important;
  pointer-events: none !important;
}



/* ============================================================
   PHASE ENVIRONMENT -- body[data-phase] progressive shifts
   Each phase *adds* to the previous -- nothing is removed.
   Transitions are slow (2-3s) so they feel like the site grew.
============================================================ */

/* -- STATIC (default) -- */
body[data-phase="STATIC"] #term {
  border: none !important;
  box-shadow: none !important;
}

/* -- SIGNAL -- first warmth (dim magenta warms slightly) */
body[data-phase="SIGNAL"] #term {
  border: none !important;
  box-shadow: none !important;
}
body[data-phase="SIGNAL"] #linkBar .link-btn {
  border-color: rgba(255, 42, 109, 0.2) !important;
}
body[data-phase="SIGNAL"] .corner-data,
body[data-phase="SIGNAL"] [class*="corner"] {
  color: rgba(255, 42, 109, 0.25) !important;
  transition: color 3s ease;
}

/* -- RESONANCE -- magenta intensifies */
body[data-phase="RESONANCE"] #term {
  border: none !important;
  box-shadow: none !important;
}
body[data-phase="RESONANCE"] #linkBar .link-btn {
  border-color: rgba(255, 42, 109, 0.35) !important;
  transition: border-color 3s ease;
}
body[data-phase="RESONANCE"] #term input[type="text"],
body[data-phase="RESONANCE"] #term input:not([type]) {
  caret-color: #ff2a6d !important;
}
body[data-phase="RESONANCE"] .corner-data,
body[data-phase="RESONANCE"] [class*="corner"] {
  color: rgba(255, 42, 109, 0.38) !important;
  transition: color 3s ease;
}

/* -- ANCHOR -- full presence */
body[data-phase="ANCHOR"] #term {
  border: none !important;
  box-shadow: none !important;
}
body[data-phase="ANCHOR"] #linkBar .link-btn {
  border-color: rgba(255, 42, 109, 0.35) !important;
  transition: border-color 3s ease;
}
body[data-phase="ANCHOR"] #linkBar .link-btn:hover {
  box-shadow: 0 0 20px rgba(255, 42, 109, 0.3) !important;
}
body[data-phase="ANCHOR"] .corner-data,
body[data-phase="ANCHOR"] [class*="corner"] {
  color: rgba(255, 42, 109, 0.45) !important;
}
/* Scrollbar goes full magenta at ANCHOR */
body[data-phase="ANCHOR"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff2a6d 0%, #b8194d 100%) !important;
}
body[data-phase="ANCHOR"] ::-webkit-scrollbar-thumb:hover {
  background: #ff2a6d !important;
}