/* ================================================ */
/* ROOT TOKENS                                      */
/* ================================================ */

:root {
  --bg-main:           #08101b;
  --text-primary:      #f5f2eb;
  --text-secondary:    #aeb6c6;
  --text-muted:        #7f899c;

  --accent-gold:        #c9a24d;
  --accent-gold-soft:   rgba(201,162,77,.14);
  --accent-gold-border: rgba(201,162,77,.30);

  --state-green:        #6fa56e;
  --state-green-border: rgba(111,165,110,.36);
  --state-green-glow:   rgba(111,165,110,.32);

  --state-amber:        #c9a24d;
  --state-amber-border: rgba(201,162,77,.42);
  --state-amber-glow:   rgba(201,162,77,.38);

  --state-red:          #ba655b;
  --state-red-border:   rgba(186,101,91,.44);
  --state-red-glow:     rgba(186,101,91,.42);

  --border:        rgba(214,220,232,.10);
  --border-strong: rgba(214,220,232,.18);

  --shadow-card: 0 12px 30px rgba(0,0,0,.22);
  --radius-md:   .95rem;
  --radius-lg:   1.15rem;

  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ================================================ */
/* RESET & BASE                                     */
/* ================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; min-height: 100%;
  font-family: "Jost", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(201,162,77,.16), transparent 28%),
    radial-gradient(circle at 50%   0%, rgba(67,89,137,.14),  transparent 36%),
    linear-gradient(180deg, #0b1322 0%, #08101b 35%, #060c15 100%);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at top center, rgba(201,162,77,.09), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 18%);
  z-index: 0;
}

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: url('/icons/anchor-shield.png') center center / min(68vw, 22rem) no-repeat;
  opacity: .04; filter: saturate(.9);
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,162,77,.22); border-radius: 2px; }

/* ================================================ */
/* BOOT LOADER                                      */
/* ================================================ */

#bootLoader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #08101b;
  transition: opacity .4s ease;
}

#bootLoader.hidden { opacity: 0; pointer-events: none; }

.boot-shield {
  width: 5rem; height: 5rem; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(201,162,77,.55)) drop-shadow(0 0 28px rgba(201,162,77,.28));
  animation: bootPulse 1.8s ease-in-out infinite;
}

@keyframes bootPulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(201,162,77,.55)) drop-shadow(0 0 28px rgba(201,162,77,.28)); }
  50%       { filter: drop-shadow(0 0 20px rgba(201,162,77,.80)) drop-shadow(0 0 48px rgba(201,162,77,.40)); }
}

.boot-wordmark {
  font-family: "Mr De Haviland", "Times New Roman", serif;
  font-size: 3.2rem; font-weight: 400; line-height: .82;
  color: #f6f2e9; text-shadow: 0 0 28px rgba(201,162,77,.18);
  margin-top: .85rem;
}

@keyframes loadingPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }