/* =============================================================
   onboarding.css — Progressive-Reveal Onboarding (v4)

   Early-game redesign (2026-06-10). Replaces the v3 cold-open /
   phase-arc styles with the body.ob-gated + body.ob-r-* reveal
   system consumed by onboardingSystem.js (v5).

   While body.ob-gated is present, every major UI surface is hidden
   until its cumulative ob-r-* class appears:
     ob-r-currency  → header (GC/CPS HUD)
     ob-r-upgrades  → right panel + mobile nav
     ob-r-stats     → left panel (stats dashboard)
     ob-r-missions  → daily missions section
     ob-r-aliens    → aliens-unlocked header + header COMPANIONS btn
     ob-r-picker    → companion picker grid
     ob-r-dna       → DNA progress bar
     ob-r-galaxy    → GALAXY tab + mobile galaxy button
     ob-r-all       → everything else (skip / completion)
   ============================================================= */

/* ── UI GATING ──────────────────────────────────────────────── */

body.ob-gated:not(.ob-r-currency) #habitat-header,
body.ob-gated:not(.ob-r-currency) #hud-separator { display: none !important; }

body.ob-gated:not(.ob-r-upgrades) #panel-right,
body.ob-gated:not(.ob-r-upgrades) #mobile-nav { display: none !important; }

body.ob-gated:not(.ob-r-stats) #panel-left { display: none !important; }

body.ob-gated:not(.ob-r-missions) #sp-daily-missions { display: none !important; }

body.ob-gated:not(.ob-r-aliens) .sp-aliens-hdr,
body.ob-gated:not(.ob-r-aliens) .hdr-left-section,
body.ob-gated:not(.ob-r-aliens) #mob-btn-aliens { display: none !important; }

body.ob-gated:not(.ob-r-picker) .sp-picker-hdr,
body.ob-gated:not(.ob-r-picker) .alien-picker-grid { display: none !important; }

body.ob-gated:not(.ob-r-dna) .hdr-dna-progress { display: none !important; }

body.ob-gated:not(.ob-r-galaxy) #panel-right-tabs .right-tab:last-child,
body.ob-gated:not(.ob-r-galaxy) #mob-btn-galaxy { display: none !important; }

/* Revealed only on completion/skip — never during the guided steps */
body.ob-gated .hdr-right-section,
body.ob-gated #hdr-bond-rank,
body.ob-gated #hdr-upgrade-badge,
body.ob-gated #combat-zone,
body.ob-gated #notif-stack,
body.ob-gated #mutation-slots,
body.ob-gated #mutation-panel,
body.ob-gated #lore-fragment,
body.ob-gated .eye-entity { display: none !important; }

/* The screen should feel clean: only alien + background during step 1 */
body.ob-gated:not(.ob-r-currency) #behavior-meters { display: none !important; }

/* The dark cutout backdrop, tutorial popup, and spotlight ring are all
   rendered by the shared framework now — see css/tutorialEngine.css and
   scripts/tutorialEngine.js (TutorialEngine.mountBlocking). */

/* ── FIRST-UPGRADE EFFECT ("+N per click!") ──────────────────── */

.ob-upg-effect {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #3dffa0;
  text-shadow: 0 0 14px rgba(61, 255, 160, 0.8);
  pointer-events: none;
  animation: ob-upg-float 1.8s ease-out forwards;
}

@keyframes ob-upg-float {
  0%   { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.8); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1.1); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-22px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.95); }
}

/* ── GALAXY BUTTON GLOW (new world discovered) ───────────────── */

.right-tab.galaxy-glow,
.mob-nav-btn.galaxy-glow {
  position: relative;
  animation: ob-galaxy-glow 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  border-radius: 8px;
}

/* Two staggered rings breathing outward behind the icon — softer and more
   premium than a single pulse, reads as "new" without ever flickering. */
.right-tab.galaxy-glow::before,
.mob-nav-btn.galaxy-glow::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 214, 122, 0.75);
  animation: ob-galaxy-ring 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}

/* .mob-nav-btn has no other ::after use, so it can carry the second
   staggered ring; .right-tab's ::after is already the active-tab
   underline, so it stays single-ring there to avoid clobbering it. */
.mob-nav-btn.galaxy-glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 11px;
  border: 1px solid rgba(255, 214, 122, 0.45);
  animation: ob-galaxy-ring 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: 1.1s;
  pointer-events: none;
}

@keyframes ob-galaxy-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 208, 96, 0.40), 0 0 2px rgba(255, 236, 190, 0.5) inset; }
  50%      { box-shadow: 0 0 18px rgba(255, 208, 96, 0.90), 0 0 34px rgba(255, 170, 60, 0.40), 0 0 5px rgba(255, 236, 190, 0.75) inset; }
}

@keyframes ob-galaxy-ring {
  0%   { transform: scale(1);    opacity: 0.85; }
  80%  { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}

/* ── WORLD DISCOVERY CARD ────────────────────────────────────── */

.gmap-discovery-card .gmap-disc-tag {
  color: #ffd060;
  letter-spacing: 0.14em;
  animation: ob-disc-tag-pulse 1.4s ease-in-out infinite;
}

@keyframes ob-disc-tag-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.gmap-disc-icon,
.gmap-disc-name { transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease; }

.gmap-disc-icon:not(.gmap-disc-revealed),
.gmap-disc-name:not(.gmap-disc-revealed) {
  filter: blur(2px);
  opacity: 0.55;
  animation: ob-disc-scan 1s ease-in-out infinite;
}

@keyframes ob-disc-scan {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}

.gmap-disc-revealed {
  filter: none;
  opacity: 1;
  animation: ob-disc-reveal 0.6s ease-out;
}

@keyframes ob-disc-reveal {
  0%   { transform: scale(0.85); filter: brightness(2.2); }
  100% { transform: scale(1);    filter: brightness(1); }
}

.gmap-disc-lore   { transition: opacity 0.6s ease; }
#gmap-disc-actions { transition: opacity 0.6s ease; }

.gmap-disc-travel-hint {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.74rem;
  color: rgba(220, 235, 255, 0.85);
  text-align: center;
  margin-bottom: 10px;
}

/* ── POWER STAT (roster / picker cards) ──────────────────────── */

.roster-power,
.picker-power {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  color: #ffd060;
  letter-spacing: 0.05em;
  margin-top: 2px;
  text-shadow: 0 0 8px rgba(255, 208, 96, 0.4);
}

/* ── SPEECH BUBBLE (major unlocks / world guidance only) ─────── */

#alien-speech {
  position: absolute;
  bottom: 62%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 20;
  max-width: 250px;
  min-width: 100px;
  background: rgba(4,8,30,0.93);
  border: 1px solid rgba(61,255,160,0.28);
  border-radius: 13px;
  padding: 11px 17px 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.38s ease, transform 0.38s ease;
  backdrop-filter: blur(6px);
  white-space: pre-wrap;
}

#alien-speech.alien-speech-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0px);
}

#alien-speech-text {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.80rem;
  font-weight: 400;
  color: rgba(210,235,255,0.88);
  letter-spacing: 0.035em;
  line-height: 1.55;
  text-align: center;
}

.alien-speech-tail {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-top:   8px solid rgba(61,255,160,0.28);
}

.alien-speech-tail::after {
  content: '';
  position: absolute;
  top: -9px; left: -7px;
  width: 0; height: 0;
  border-left:  7px solid transparent;
  border-right: 7px solid transparent;
  border-top:   7px solid rgba(4,8,30,0.93);
}