/* ============================================================
   PER-ALIEN IDENTITY FILTERS — base appearance per alien (W1 default)
   World-variant rules below override via higher specificity (body[data-world]).
   ============================================================ */
.alien-img[data-alien-idx="0"] { filter: drop-shadow(0 0 14px rgba(61,255,160,0.50)); }
.alien-img[data-alien-idx="1"] { filter: drop-shadow(0 0 12px rgba(112,208,96,0.48)) brightness(0.93) saturate(1.12); }
.alien-img[data-alien-idx="2"] { filter: drop-shadow(0 0 14px rgba(80,160,64,0.50)) brightness(1.06); }
.alien-img[data-alien-idx="3"] { filter: drop-shadow(0 0 16px rgba(96,255,64,0.55)) brightness(1.08); }
.alien-img[data-alien-idx="4"] { filter: drop-shadow(0 0 14px rgba(64,232,144,0.52)) hue-rotate(8deg); }
.alien-img[data-alien-idx="5"] { filter: drop-shadow(0 0 16px rgba(144,208,64,0.52)) hue-rotate(22deg) saturate(1.18); }
.alien-img[data-alien-idx="6"] { filter: drop-shadow(0 0 18px rgba(192,255,96,0.55)) brightness(1.10); }
.alien-img[data-alien-idx="7"] { filter: drop-shadow(0 0 18px rgba(128,255,144,0.55)) saturate(1.14) brightness(1.06); }
.alien-img[data-alien-idx="8"] { filter: drop-shadow(0 0 20px rgba(192,64,255,0.60)) saturate(1.20); }
.alien-img[data-alien-idx="9"] { filter: drop-shadow(0 0 22px rgba(255,224,96,0.65)) brightness(1.08) saturate(1.12); }

/* ============================================================
   PORTRAIT FILTERS — each alien's side panel portrait shows its
   native world color scheme, matching the main game display.
   Mirrors the perf-mode static fallbacks from worlds.css.
   ============================================================ */
/* Alien 0 — Zblorp (W1 — natural green) */
.portrait-img[data-alien-idx="0"] { filter: drop-shadow(0 0 10px rgba(61,255,160,0.55)); }
/* Alien 1 — Groxian (W2 — electric cyan-green) */
.portrait-img[data-alien-idx="1"] { filter: saturate(1.28) brightness(1.06) drop-shadow(0 0 10px rgba(80,200,255,0.52)); }
/* Alien 2 — Squurp (W3 — golden amber) */
.portrait-img[data-alien-idx="2"] { filter: hue-rotate(50deg) saturate(1.32) brightness(1.10) drop-shadow(0 0 10px rgba(255,180,60,0.55)); }
/* Alien 3 — Mechzoid (W4 — deep indigo purple) */
.portrait-img[data-alien-idx="3"] { filter: hue-rotate(258deg) saturate(1.45) brightness(0.94) drop-shadow(0 0 12px rgba(180,80,255,0.58)); }
/* Alien 4 — Hydralien (W5 — vivid magenta-pink) */
.portrait-img[data-alien-idx="4"] { filter: hue-rotate(308deg) saturate(1.55) brightness(1.00) drop-shadow(0 0 12px rgba(255,80,160,0.60)); }
/* Alien 5 — Magmork (W6 — blood red volcanic) */
.portrait-img[data-alien-idx="5"] { filter: hue-rotate(328deg) saturate(1.62) brightness(0.87) drop-shadow(0 0 12px rgba(255,40,60,0.58)); }
/* Alien 6 — Stellux (W7 — ethereal gold) */
.portrait-img[data-alien-idx="6"] { filter: hue-rotate(20deg) saturate(0.88) brightness(1.26) drop-shadow(0 0 14px rgba(255,240,160,0.62)); }
/* Alien 7 — Crystalion (W8 — icy cyan) */
.portrait-img[data-alien-idx="7"] { filter: hue-rotate(186deg) saturate(0.52) brightness(0.80) contrast(1.18) drop-shadow(0 0 14px rgba(80,120,220,0.52)); }

/* ── Companion Dialogue Bubble ──────────────────────────────────
   Positioned in the flex-column #alien-area, directly below #alien-btn.
   Max 260px wide, semi-transparent dark panel, thin alien-color glow border.
   companionDialogue.js controls display, opacity, and border color at runtime.
   ──────────────────────────────────────────────────────────────────────────── */
.companion-bubble {
  position: relative;
  max-width: 260px;
  width: max-content;
  background: rgba(4, 8, 30, 0.82);
  border: 1px solid var(--dlg-color, #3dffa0);
  border-radius: 7px;
  padding: 6px 12px;
  margin-top: 4px;
  pointer-events: none;
  z-index: 5;
  /* triangle pointing up toward the alien */
}
.companion-bubble::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--dlg-color, #3dffa0);
  opacity: 0.65;
}
.companion-bubble-text {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.71rem;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 1.45;
  letter-spacing: 0.25px;
  white-space: normal;
}

/* Alien button: subtle glow pulse while a dialogue line is visible.
   Duration matches VISIBLE_MS (3.5s) so glow fades with the message. */
.alien-btn.companion-glow {
  animation: companion-glow-pulse 3.5s ease-out forwards;
}
@keyframes companion-glow-pulse {
  0%   { filter: brightness(1); }
  12%  { filter: brightness(1.18) drop-shadow(0 0 16px var(--alien-glow, rgba(61,255,160,0.6))); }
  60%  { filter: brightness(1.08) drop-shadow(0 0 8px var(--alien-glow, rgba(61,255,160,0.35))); }
  100% { filter: brightness(1); }
}

/* Panel shake */
#screen-game.panel-shake { animation: panelShake 0.28s ease-out; }
@keyframes panelShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}

/* Click ripple */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  border: 2px solid var(--world-ripple-color, rgba(80,200,255,0.6));
  pointer-events: none;
  z-index: 60;
  animation: clickRipple 0.5s ease-out forwards;
}
@keyframes clickRipple {
  from { width: 10px; height: 10px; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to   { width: 80px; height: 80px; opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

/* Click pop text */
.click-pop {
  position: fixed;
  font-family: var(--font-hd);
  font-weight: 900;
  pointer-events: none;
  z-index: 65;
  animation: clickPop 0.82s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 1px;
}
@keyframes clickPop {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.08); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-58px) scale(0.85); }
}

/* ============================================================
   FALLING EYES
   ============================================================ */
.falling-eye {
  position: fixed;
  z-index: 55;
  pointer-events: all;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
  transition: none;
}

.eye-visual {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.eye-val-badge {
  position: absolute;
  bottom: -7px; right: -7px;
  background: var(--green);
  color: #020210;
  font-family: var(--font-hd);
  font-size: 0.6rem;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 6px;
  min-width: 20px;
  text-align: center;
  pointer-events: none;
}
.golden-eye .eye-val-badge { background: var(--gold); }

.eye-praise {
  position: fixed;
  z-index: 210;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-hd);
  font-size: 0.9rem;
  font-weight: 900;
  transform: translateX(-50%);
  animation: praisePop 1s ease-out forwards;
}
@keyframes praisePop {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  30%  { transform: translateX(-50%) translateY(-12px) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.9); }
}

/* ============================================================
   SPECTACLE SYSTEM — spectacleSystem.js visual layer
   All elements are fixed-position, pointer-events:none,
   self-removing via animationend + JS timeout fallback.
   ============================================================ */

/* ── Prestige: loading screen override ───────────────────────── */
#loading-screen.prestige-mode {
  background: radial-gradient(ellipse at 50% 40%,
    #1a003a 0%, #0a001e 55%, #000008 100%) !important;
}
#loading-screen.prestige-mode .ls-title {
  color: #c070ff;
  text-shadow: 0 0 30px rgba(192,112,255,0.9), 0 0 60px rgba(192,112,255,0.5);
}
#loading-screen.prestige-mode .ls-sub {
  color: rgba(192,112,255,0.65);
  letter-spacing: 4px;
}

/* ── Prestige: expanding cosmic rings ────────────────────────── */
.prestige-ring {
  position: fixed;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  margin-left: -40px; margin-top: -40px;
  border-radius: 50%;
  border: 2px solid rgba(192,112,255,0.85);
  box-shadow: 0 0 18px rgba(192,112,255,0.4),
              inset 0 0 18px rgba(192,112,255,0.15);
  pointer-events: none;
  z-index: 9998;
  animation: prestigeRingExpand var(--pr-dur,1.4s)
             cubic-bezier(0.10,0.80,0.20,1) forwards;
}
@keyframes prestigeRingExpand {
  0%   { transform: scale(0.08); opacity: 1; }
  55%  { opacity: 0.7; }
  100% { transform: scale(var(--pr-end,8)); opacity: 0; }
}

/* ── Prestige: full-screen colour flash ──────────────────────── */
.prestige-flash {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(220,180,255,0.70) 0%,
    rgba(192,112,255,0.32) 42%,
    transparent 70%);
  animation: prestigeFlashFade 1.0s ease-out forwards;
}
@keyframes prestigeFlashFade {
  0%   { opacity: 0; }
  7%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Post-prestige ascension reveal overlay ──────────────────── */
.prestige-reveal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(192,112,255,0.10) 0%, transparent 65%);
  animation: prestigeRevealFade 4.0s ease-out forwards;
}
@keyframes prestigeRevealFade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}
.prestige-reveal-inner {
  text-align: center;
  animation: prestigeRevealPop 4.0s ease-out forwards;
}
@keyframes prestigeRevealPop {
  0%   { transform: scale(0.62); }
  12%  { transform: scale(1.05); }
  22%  { transform: scale(1.00); }
  65%  { transform: scale(1.00); }
  100% { transform: scale(1.04); }
}
.prestige-reveal-tag {
  font-family: var(--font-hd);
  font-size: clamp(0.6rem,1.6vw,0.85rem);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(192,112,255,0.65);
  margin-bottom: 0.3rem;
}
.prestige-reveal-label {
  font-family: var(--font-hd);
  font-size: clamp(1.8rem,5vw,3.6rem);
  color: #c070ff;
  text-shadow: 0 0 40px rgba(192,112,255,0.9),
               0 0 80px rgba(192,112,255,0.50),
               0 0 120px rgba(192,112,255,0.22);
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1.1;
}
.prestige-reveal-mult {
  font-family: var(--font-hd);
  font-size: clamp(1.1rem,2.8vw,2.1rem);
  color: #ffd060;
  text-shadow: 0 0 24px rgba(255,208,96,0.8);
  letter-spacing: 3px;
  margin-top: 0.6rem;
}
.prestige-reveal-sub {
  font-size: clamp(0.7rem,1.8vw,0.95rem);
  color: rgba(200,180,255,0.55);
  letter-spacing: 2px;
  margin-top: 0.35rem;
}

/* ── World unlock: radial background bloom ───────────────────── */
.world-unlock-bg {
  position: fixed; inset: 0; z-index: 9960;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    var(--wu-color,#50c8ff) 0%, transparent 55%);
  animation: wuBgPulse 3.5s ease-out forwards;
}
@keyframes wuBgPulse {
  0%   { opacity: 0; }
  8%   { opacity: 0.14; }
  28%  { opacity: 0.07; }
  100% { opacity: 0; }
}

/* ── World unlock: centre banner ─────────────────────────────── */
.world-unlock-banner {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 9970;
  pointer-events: none;
  text-align: center;
  animation: wuBannerReveal 3.5s ease-out forwards;
}
@keyframes wuBannerReveal {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.70); }
  14%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  24%  {             transform: translate(-50%,-50%) scale(1.00); }
  72%  { opacity: 1; transform: translate(-50%,-50%) scale(1.00); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.02); }
}
.wu-label {
  font-family: var(--font-hd);
  font-size: clamp(0.58rem,1.5vw,0.82rem);
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--wu-color,#50c8ff);
  opacity: 0.85;
  margin-bottom: 0.35rem;
}
.wu-icon {
  font-size: clamp(3rem,8vw,5rem);
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 0 14px var(--wu-color,#50c8ff))
          drop-shadow(0 0 28px var(--wu-color,#50c8ff));
  animation: wuIconPop 0.42s cubic-bezier(0.2,0.8,0.3,1.35) 0.14s both;
}
@keyframes wuIconPop {
  0%   { transform: scale(0); }
  65%  { transform: scale(1.18); }
  100% { transform: scale(1.00); }
}
.wu-name {
  font-family: var(--font-hd);
  font-size: clamp(1.4rem,3.8vw,2.4rem);
  color: #fff;
  text-shadow: 0 0 28px var(--wu-color,#50c8ff),
               0 0 56px var(--wu-color,#50c8ff);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── World entry: brief colour flash ─────────────────────────── */
.world-entry-flash {
  position: fixed; inset: 0; z-index: 9600;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    var(--wef-color,rgba(80,200,255,0.18)) 0%, transparent 65%);
  animation: worldEntryFlashFade var(--wef-dur,0.9s) ease-out forwards;
}
@keyframes worldEntryFlashFade {
  0%   { opacity: 0; }
  11%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Milestone: coloured screen flash ────────────────────────── */
.milestone-flash {
  position: fixed; inset: 0; z-index: 9500;
  pointer-events: none;
  animation: msFade var(--ms-dur,0.7s) ease-out forwards;
}
@keyframes msFade {
  0%   { opacity: 0; }
  11%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Legendary milestone: full overlay text ──────────────────── */
.ms-legendary-overlay {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,208,96,0.07) 0%, transparent 60%);
  animation: legendaryFade 3.2s ease-out forwards;
}
@keyframes legendaryFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  68%  { opacity: 1; }
  100% { opacity: 0; }
}
.ms-legendary-text {
  font-family: var(--font-hd);
  font-size: clamp(2.2rem,6vw,4.5rem);
  color: #ffd060;
  text-shadow: 0 0 40px rgba(255,208,96,0.95),
               0 0 80px rgba(255,208,96,0.55),
               0 0 120px rgba(255,160,60,0.28);
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: legendaryTextIn 3.2s ease-out forwards;
}
@keyframes legendaryTextIn {
  0%   { transform: scale(0.50); opacity: 0; letter-spacing: 14px; }
  14%  { transform: scale(1.08); opacity: 1; letter-spacing:  3px; }
  24%  { transform: scale(1.00); opacity: 1; }
  68%  { transform: scale(1.00); opacity: 1; }
  100% { transform: scale(1.02); opacity: 0; }
}

/* ── Eye System — Interactive alien eye rewards ──────────────── */
.eye-entity {
  position: absolute;
  z-index: 99999;  /* JS sets position:fixed + the same z-index inline; kept in sync here so the value is never wrong before JS attaches it */
  width: 56px; height: 35px;   /* Slightly smaller normal eye; golden stays larger */
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  /* Organic alien eye — layered iris depth */
  background:
    radial-gradient(ellipse at 38% 32%, #8fffbe 0%, #00d870 28%, #00883a 60%, #002a14 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 18px rgba(61,255,160,1.0), 0 0 44px rgba(61,255,160,0.5),
              inset 0 2px 5px rgba(255,255,255,0.26);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  animation: eyeEntityGlow 2.2s ease-in-out infinite;
  transition: filter 0.15s;
  will-change: filter;
}
/* Iris reflection highlight */
.eye-entity::before {
  content: '';
  position: absolute;
  width: 10px; height: 5px;
  background: rgba(255,255,255,0.72);
  border-radius: 50%;
  top: 18%; left: 16%;
  pointer-events: none;
}
/* Vertical slit pupil */
.eye-entity::after {
  content: '';
  width: 5px; height: 72%;
  background: #001408;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.9);
}
/* Hover — eye brightens; no transform to keep hitbox stable */
.eye-entity:hover {
  filter: brightness(1.55) drop-shadow(0 0 18px rgba(61,255,160,0.9));
}
/* Golden eye variant — larger, more dramatic, unmissable */
.eye-entity.eye-golden {
  background:
    radial-gradient(ellipse at 38% 32%, #fff0a0 0%, #ffc020 30%, #c07000 62%, #3a1800 100%);
  box-shadow: 0 0 28px rgba(255,208,96,1.0), 0 0 72px rgba(255,160,0,0.75),
              0 0 110px rgba(255,200,0,0.35), inset 0 2px 6px rgba(255,255,200,0.4);
  width: 88px; height: 54px;   /* Golden eyes are notably larger */
  animation: eyeEntityGlow 2.2s ease-in-out infinite,
             eyeGoldenPulse 0.75s ease-in-out infinite alternate;
}
.eye-entity.eye-golden::before {
  background: rgba(255,255,200,0.85);
  width: 17px; height: 9px;
}
.eye-entity.eye-golden::after {
  background: #1a0800;
  width: 9px;
  box-shadow: 0 0 10px rgba(0,0,0,0.95);
}
/* Entry pop-in (spawned) */
.eye-entity.eye-entering {
  animation: eyeEnter 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
/* Click burst pop */
.eye-entity.eye-popping {
  animation: eyeClickPop 0.32s ease-out forwards !important;
  pointer-events: none !important;
}
/* ── Eye keyframes ───────────────────────────────────────────── */
@keyframes eyeEntityGlow {
  0%,100% { box-shadow: 0 0 18px rgba(61,255,160,0.85), 0 0 44px rgba(61,255,160,0.40),
                        inset 0 2px 6px rgba(255,255,255,0.25); }
  50%     { box-shadow: 0 0 28px rgba(61,255,160,1.00), 0 0 64px rgba(61,255,160,0.60),
                        inset 0 2px 6px rgba(255,255,255,0.38); }
}
@keyframes eyeGoldenPulse {
  from { box-shadow: 0 0 22px rgba(255,208,96,0.85), 0 0 54px rgba(255,160,0,0.5),  0 0 90px rgba(255,200,0,0.25); }
  to   { box-shadow: 0 0 44px rgba(255,224,96,1.00), 0 0 90px rgba(255,180,0,0.95), 0 0 140px rgba(255,200,0,0.50); }
}
@keyframes eyeEnter {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(4deg); opacity: 1; }
  80%  { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes eyeClickPop {
  0%   { transform: scale(1);    opacity: 1; filter: brightness(1); }
  40%  { transform: scale(1.7);  opacity: 1; filter: brightness(1.3); }
  100% { transform: scale(0.1);  opacity: 0; filter: brightness(1); }
}

.eye-reward-pop {
  position: absolute;
  z-index: 7;
  font-family: var(--font-hd);
  font-size: 1.4rem;
  font-weight: 700;
  color: #6fffb0;
  text-shadow: 0 0 18px rgba(61,255,160,0.95), 0 0 36px rgba(61,255,160,0.55);
  pointer-events: none;
  animation: eyeRewardFloat 1.5s ease-out forwards;
  white-space: nowrap;
  transform: translateX(-50%);
}
@keyframes eyeRewardFloat {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-75px) scale(0.85); }
}

/* ── Galaxy Map / Locked World Card ─────────────────────────── */
.galaxy-map-section {
  margin-top: 14px;
  border-top: 1px solid rgba(80,200,255,0.1);
  padding-top: 12px;
}
.galaxy-map-title {
  font-family: var(--font-hd);
  font-size: 0.58rem;
  letter-spacing: 3px;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(80,200,255,0.5);
  margin-bottom: 9px;
  padding: 0 4px;
}
.world-locked-card {
  background: rgba(4,6,28,0.95);
  border: 1px solid rgba(80,100,160,0.2);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  animation: lockedCardPulse 3s ease-in-out infinite;
}
@keyframes lockedCardPulse {
  0%,100% { border-color: rgba(80,100,160,0.2); }
  50%     { border-color: rgba(100,120,200,0.42); }
}
.world-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  opacity: 0.13;
  pointer-events: none;
}
.world-locked-galaxy {
  font-size: 2.8rem;
  filter: grayscale(100%);
  display: block;
  margin-bottom: 7px;
  animation: galaxySpinAnim 24s linear infinite;
}
@keyframes galaxySpinAnim { to { transform: rotate(360deg); } }
.world-locked-name {
  font-family: var(--font-hd);
  font-size: 1.15rem;
  color: rgba(80,100,160,0.55);
  letter-spacing: 7px;
  margin-bottom: 6px;
}
.world-locked-req { font-size: 0.70rem; color: var(--text-dim); line-height: 1.5; }
.world-locked-req strong { color: var(--gold); }

/* ── Alien Roster Card Enhanced ──────────────────────────────── */
.roster-card {
  border: 1px solid rgba(80,200,255,0.1);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, background 0.2s;
}
.roster-card:hover {
  border-color: rgba(80,200,255,0.4);
  box-shadow: 0 0 12px rgba(80,200,255,0.12);
  transform: translateX(3px);
  background: rgba(8,14,40,0.8);
}
.roster-card.roster-active {
  border-color: rgba(61,255,160,0.5) !important;
  box-shadow: 0 0 16px rgba(61,255,160,0.2), inset 0 0 20px rgba(61,255,160,0.04);
  background: rgba(4,20,12,0.7);
}
.roster-card.roster-locked {
  opacity: 0.3;
  cursor: default;
  transform: none !important;
  pointer-events: none;
}

/* ── Header Number Animations ────────────────────────────────── */
@keyframes gcPop {
  0%   { color: var(--gold); transform: scale(1); }
  30%  { color: #fff; transform: scale(1.09); text-shadow: 0 0 16px var(--gold); }
  100% { color: var(--gold); transform: scale(1); }
}
.hdr-stat-val.gc-updated { animation: gcPop 0.4s ease-out; }

.hdr-stat-sub.income-rising {
  color: #3dffa0;
  text-shadow: 0 0 10px rgba(61,255,160,0.6);
  transition: color 0.5s, text-shadow 0.5s;
}

/* ── Lore Button (Coming Soon) ───────────────────────────────── */
.hdr-lore-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(80,200,255,0.04);
  border: 1px solid rgba(80,200,255,0.12);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: not-allowed;
  opacity: 0.55;
  position: relative;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.hdr-lore-btn:hover { opacity: 0.78; }
.hdr-lore-btn:hover::after {
  content: 'Coming Soon…';
  position: absolute;
  bottom: -30px; left: 50%;
  transform: translateX(-50%);
  background: rgba(4,8,28,0.97);
  border: 1px solid rgba(80,200,255,0.2);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.66rem;
  color: var(--text-dim);
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--font-ui);
}
.hdr-lore-lock  { font-size: 0.85rem; }
.hdr-lore-label {
  font-family: var(--font-hd);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
}

/* ── Combat UI Guard (no permanent combat) ───────────────────── */
.combat-overlay { display: none; }
.combat-overlay.combat-active { display: flex; }

/* ============================================================
   COMBAT JAR — inside combat-zone container
   ============================================================ */
.combat-jar {
  width: 72px; height: 200px;
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  pointer-events: none;
}

/* ── Combat safe zone ──────────────────────────────────────────
   The combat jar sits absolute bottom-left (occupies ~14-86px from
   the panel's left edge). While combat is active, keep companion
   bubbles, behavior meters, guidance hints, and lore fragments
   clear of that footprint so the jar never covers readable text. */
body.combat-active .companion-bubble {
  margin-left: 80px;
  max-width: 200px;
}
body.combat-active #alien-speech {
  left: calc(50% + 40px);
  max-width: 200px;
}
body.combat-active #behavior-meters {
  padding-left: 88px;
}
body.combat-active #ob-guidance {
  padding-left: 88px;
}
body.combat-active #lore-fragment {
  padding-left: 88px;
}
.cj-vessel {
  flex: 1; width: 100%;
  position: relative;
  border-radius: 10px 10px 28px 28px;
  background: rgba(255,100,30,0.05);
  border: 1.5px solid rgba(255,130,50,0.35);
  box-shadow: 0 0 12px rgba(255,100,30,0.18), inset 0 0 10px rgba(0,0,0,0.45),
              inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  transition: box-shadow 0.4s;
}
.cj-track {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 9px 9px 27px 27px;
}
.cj-fill {
  width: 100%;
  background: linear-gradient(0deg, #c82000 0%, #ff5018 40%, #ff9840 75%, #ffdd80 100%);
  /* No transition on height — controlled by JS every RAF frame for real-time fill */
  position: relative;
  animation: fillGlowBreathe 2.1s ease-in-out infinite;
}
@keyframes fillGlowBreathe {
  0%,100% { box-shadow: 0 0 18px rgba(255,90,20,0.60); }
  50%     { box-shadow: 0 0 32px rgba(255,140,40,0.92); }
}
.cj-wave {
  position: absolute;
  top: -4px; left: -20%;
  width: 140%;
  height: 10px;
  background: rgba(255,160,60,0.45);
  border-radius: 50%;
  animation: waveSlosh 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes waveSlosh {
  0%,100% { transform: translateX(0) scaleY(1); }
  50%     { transform: translateX(8px) scaleY(1.4); }
}
.cj-label {
  font-size: 0.62rem; line-height: 1;
  letter-spacing: 1px;
  font-family: var(--font-hd);
  color: rgba(255,160,80,0.7);
}
.cj-active-badge {
  font-family: var(--font-hd);
  font-size: 0.65rem; font-weight: 900;
  color: #ffcc60;
  text-shadow: 0 0 12px rgba(255,190,40,0.95);
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.2s;
  line-height: 1;
}
.combat-jar.combat-full .cj-active-badge { opacity: 1; }
.combat-jar.combat-full .cj-vessel {
  border-color: rgba(255,160,40,0.75);
  box-shadow: 0 0 28px rgba(255,120,30,0.85), 0 0 55px rgba(255,70,10,0.35),
              inset 0 0 8px rgba(0,0,0,0.3);
  animation: jarPulse 0.75s ease-in-out infinite;
}
@keyframes jarPulse {
  0%,100% { box-shadow: 0 0 28px rgba(255,120,30,0.85), 0 0 55px rgba(255,70,10,0.35); }
  50%     { box-shadow: 0 0 44px rgba(255,160,40,1.0),  0 0 80px rgba(255,80,10,0.5); }
}
/* Jar impulse — fires on each click when jar is visible (<150ms) */
@keyframes jarImpulse {
  0%   { transform: scale(1);     filter: brightness(1); }
  35%  { transform: scale(1.03);  filter: brightness(1.1); }
  100% { transform: scale(1);     filter: brightness(1); }
}
.cj-vessel.jar-impulse {
  animation: jarImpulse 0.13s ease-out forwards;
}

/* ============================================================
   SIDE PANEL — shared section header + companion picker
   ============================================================ */
.sp-section-hdr {
  font-family: var(--font-hd);
  font-size: 0.54rem;
  letter-spacing: 2.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 8px 2px 5px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  margin-top: 4px;
}
/* Modifier: first header at top has no top margin */
.sp-aliens-hdr { margin-top: 0; }

.sp-aliens-count {
  font-family: var(--font-hd);
  font-size: 0.60rem;
  color: var(--accent);
  background: rgba(80,200,255,0.08);
  border: 1px solid rgba(80,200,255,0.20);
  border-radius: 20px;
  padding: 1px 7px;
}

/* ── Companion Picker Grid ─────────────────────────────────── */
.alien-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  contain: layout style;
  padding-bottom: 6px;
}
.alien-picker-card {
  background: linear-gradient(140deg, rgba(8,14,42,0.88), rgba(4,8,28,0.94));
  border: 1.5px solid rgba(80,200,255,0.13);
  border-radius: 10px;
  padding: 9px 5px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
  /* Pre-promote to GPU layer to prevent flicker when scale is applied on hover */
  will-change: transform;
  transform: translateZ(0);
  isolation: isolate;
}
.alien-picker-card:hover {
  border-color: var(--alien-color, var(--accent));
  box-shadow: 0 0 14px var(--alien-glow, rgba(80,200,255,0.22));
  transform: translateZ(0) scale(1.04);
}
.alien-picker-card:active { transform: translateZ(0) scale(0.96); }
.alien-picker-card.picker-active {
  border-color: var(--alien-color, var(--green));
  box-shadow: 0 0 18px var(--alien-glow, rgba(61,255,160,0.28));
  background: linear-gradient(140deg, rgba(10,20,54,0.94), rgba(6,14,40,0.98));
}
.alien-picker-card.picker-locked-card {
  opacity: 0.32;
  filter: grayscale(0.85);
  cursor: default;
  pointer-events: none;
  animation: lockedIdleGlow 3.6s ease-in-out infinite;
}
/* picker-img inherits portrait-img glow effects via shared class */
.picker-img {
  width: 62px; height: 62px;
  object-fit: contain;
}
.portrait-img {
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.picker-name {
  font-family: var(--font-hd);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.picker-name-locked { opacity: 0.35; }

/* ── Power comparison row + bar ─────────────────────────────── */
.picker-meta-row {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  max-width: 100%;
}
.picker-lv {
  font-family: var(--font-hd);
  font-size: 0.56rem;
  font-weight: 700;
  color: rgba(140,210,255,0.85);
  letter-spacing: 0.4px;
}
.picker-power-bar {
  width: 82%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,208,96,0.12);
  overflow: hidden;
}
.picker-power-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffd060, #ff9820);
  box-shadow: 0 0 6px rgba(255,208,96,0.5);
  transition: width 0.3s ease;
}

/* ── Aliens Unlocked progress bar (gives the header real content) ── */
.sp-aliens-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(80,200,255,0.10);
  overflow: hidden;
  margin: 0 2px 8px;
}
.sp-aliens-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent, #50c8ff), #3dffa0);
  transition: width 0.4s ease;
}
/* ── Role label + Evolution status (Prompt 6, Phases 2 & 6) ────── */
.picker-role-row {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-top: 3px; max-width: 100%;
}
.picker-role {
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.2px;
  text-transform: uppercase;
  color: rgba(160,210,255,0.65);
  background: rgba(80,180,255,0.08);
  border: 1px solid rgba(80,180,255,0.18);
  border-radius: 5px; padding: 1px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.picker-evo-icon {
  font-size: 0.62rem; line-height: 1; flex-shrink: 0;
}
.picker-evo-ready { animation: goalReadyPulse 1.4s ease-in-out infinite; }
.picker-active-badge {
  font-family: var(--font-hd);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #06140a;
  background: linear-gradient(90deg, var(--green, #3dffa0), #28d488);
  border-radius: 8px;
  padding: 2px 8px;
  margin-top: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(61,255,160,0.45);
}
.picker-lock-icon {
  font-size: 1.0rem;
  opacity: 0.45;
  margin: 6px 0 2px;
}
.picker-req {
  font-size: 0.56rem;
  color: rgba(255,120,80,0.65);
  text-align: center;
  line-height: 1.2;
}

/* Locked-companion unlock progress (retention pass 5.5, Phase 3 —
   "Alien Unlock Progress"): shows how close allTimeGC is to the gate. */
.picker-lock-bar {
  width: 70%;
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.picker-lock-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: rgba(80,200,255,0.55);
}

/* ── Daily Missions — left panel (enlarged for readability) ─── */
.sp-daily-hdr { color: rgba(61,220,140,0.90); font-size: 0.64rem; letter-spacing: 1.8px; }
.sp-daily-list { padding-bottom: 4px; }
.sp-daily-card {
  background: rgba(61,255,160,0.06);
  border: 1px solid rgba(61,255,160,0.20);
  border-radius: 8px;
  padding: 9px 10px 8px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.sp-daily-card:hover { border-color: rgba(61,255,160,0.35); }
.sp-daily-card.sp-daily-done {
  opacity: 0.58;
  border-color: rgba(61,255,160,0.22);
  background: rgba(61,255,160,0.03);
}
.sp-daily-label {
  font-family: var(--font-hd);
  font-size: 0.64rem;
  font-weight: 700;
  color: rgba(210,248,230,0.92);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-daily-desc {
  font-size: 0.60rem;
  color: rgba(160,210,190,0.65);
  line-height: 1.35;
  margin-bottom: 5px;
}
.sp-daily-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.sp-daily-fill {
  height: 100%;
  background: linear-gradient(90deg, #3dffa0, #50c8ff);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.sp-daily-fill-done { background: linear-gradient(90deg, #3dffa0, #60ffa0); }
.sp-daily-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.sp-daily-prog {
  font-size: 0.62rem;
  color: rgba(180,220,200,0.70);
  white-space: nowrap;
}
.sp-daily-rew {
  font-size: 0.64rem;
  color: #ffd060;
  font-weight: 700;
  white-space: nowrap;
}
.sp-daily-timer {
  font-family: var(--font-hd);
  font-size: 0.56rem;
  color: rgba(200,222,255,0.32);
  text-align: center;
  margin: 2px 0 4px;
  letter-spacing: 0.3px;
}

/* Ready-to-claim daily mission card (Section 5: manual claim) */
.sp-daily-card.sp-daily-ready {
  border-color: rgba(255,208,96,0.55);
  background: rgba(255,208,96,0.08);
  box-shadow: 0 0 10px rgba(255,208,96,0.18);
}
.sp-daily-claim-btn {
  width: 100%;
  padding: 6px 8px;
  background: linear-gradient(135deg,#ffd060,#ff9d40);
  border: 1px solid rgba(255,208,96,0.6);
  border-radius: 6px;
  font-family: var(--font-hd);
  font-size: 0.60rem;
  font-weight: 800;
  color: #1a1306;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: filter 0.15s, transform 0.1s;
}
.sp-daily-claim-btn:hover { filter: brightness(1.1); }
.sp-daily-claim-btn:active { transform: scale(0.97); }

/* Legacy portrait classes — kept for any remaining references */
.alien-portrait-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  contain: layout style;
}
.alien-portrait-card {
  background: linear-gradient(140deg, rgba(8,14,42,0.90), rgba(4,8,28,0.95));
  border: 1px solid rgba(80,200,255,0.16);
  border-radius: 10px;
  padding: 8px 6px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}
.portrait-prog {
  font-size: 0.50rem;
  color: rgba(80,200,255,0.55);
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.3;
}
.portrait-prestige-stars { font-size: 0.50rem; color: var(--gold); letter-spacing: 1px; }
.portrait-locked-req { font-size: 0.48rem; color: rgba(255,80,80,0.55); text-align: center; }
.portrait-lock-icon { font-size: 1.2rem; opacity: 0.5; margin: 8px 0 4px; }
.portrait-active-dot {
  position: absolute; bottom: 5px; right: 6px;
  font-size: 0.45rem; color: var(--green);
  text-shadow: 0 0 6px var(--green);
}

/* .combat-indicator removed — replaced by .combat-jar */

/* body.combat-active — full atmosphere shift */
body.combat-active #panel-center {
  box-shadow: inset 0 0 60px rgba(255,80,20,0.08);
  transition: box-shadow 1s;
}
body.combat-active .bg-canvas-fixed,
body.combat-active #bg-canvas-game {
  filter: hue-rotate(20deg) brightness(1.08);
  transition: filter 1s;
}

/* ============================================================
   ALIEN UNLOCK CELEBRATION OVERLAY
   ============================================================ */
.unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  /* background and backdrop-filter are deferred to the visible state —
     applying backdrop-filter at opacity:0 blurs all content behind the overlay
     even when the overlay is invisible, causing the "blurry UI" symptom. */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.unlock-overlay.unlock-visible,
.unlock-overlay.unlock-overlay-visible {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0,0,8,0.82);
  backdrop-filter: blur(10px);
}
.unlock-card {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: unlockCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes unlockCardIn {
  from { transform: translateY(30px) scale(0.88); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.unlock-subtitle {
  font-family: var(--font-hd);
  font-size: 0.72rem;
  letter-spacing: 5px;
  color: var(--green);
  text-shadow: 0 0 16px rgba(61,255,160,0.7);
  text-transform: uppercase;
}
.unlock-alien-img {
  /* Part 5 — the alien IS the reward: a much larger portrait than the old
     140px version, scaling with viewport so it stays inside the card on
     phones while filling the modal on desktop. */
  width: clamp(180px, 42vw, 260px);
  height: clamp(180px, 42vw, 260px);
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 30px rgba(255,208,96,0.7)) drop-shadow(0 0 60px rgba(61,255,160,0.4));
  animation: unlockAlienBounce 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes unlockAlienBounce {
  from { transform: scale(0.5) rotate(-10deg); }
  to   { transform: scale(1) rotate(0deg); }
}
.unlock-alien-name {
  font-family: var(--font-hd);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 6px;
  color: #fff;
  text-shadow: 0 0 30px var(--gold), 0 0 60px rgba(255,208,96,0.4);
}
.unlock-world-badge {
  font-family: var(--font-hd);
  font-size: 0.72rem;
  letter-spacing: 3px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(80,200,255,0.5);
  text-transform: uppercase;
}
.unlock-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.unlock-select-btn {
  padding: 10px 22px;
  background: rgba(80,200,255,0.12);
  border: 1px solid rgba(80,200,255,0.42);
  border-radius: 10px;
  color: var(--accent);
  font-family: var(--font-hd);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.unlock-select-btn:hover {
  background: rgba(80,200,255,0.22);
  box-shadow: 0 0 16px rgba(80,200,255,0.3);
  transform: scale(1.04);
}
.unlock-select-btn:active { transform: scale(0.95); }

.unlock-close-btn {
  margin-top: 0;
  padding: 10px 28px;
  background: rgba(61,255,160,0.12);
  border: 1px solid rgba(61,255,160,0.4);
  border-radius: 10px;
  color: var(--green);
  font-family: var(--font-hd);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.unlock-close-btn:hover {
  background: rgba(61,255,160,0.22);
  box-shadow: 0 0 16px rgba(61,255,160,0.3);
}

/* Unlock celebration — Power headline block (Part 5) */
.unlock-power-block {
  margin: 6px auto 4px;
  padding: 10px 16px;
  background: rgba(255,208,96,0.08);
  border: 1px solid rgba(255,208,96,0.34);
  border-radius: 12px;
  text-align: center;
  max-width: 300px;
}
.unlock-power-value {
  font-family: var(--font-hd);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffd060;
  text-shadow: 0 0 14px rgba(255,208,96,0.5);
}
.unlock-power-compare {
  margin-top: 3px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.4px;
}
.unlock-use-btn {
  padding: 10px 26px;
  background: linear-gradient(135deg, rgba(255,208,96,0.22), rgba(255,160,60,0.2));
  border: 1px solid rgba(255,208,96,0.6);
  border-radius: 10px;
  color: #ffe08a;
  font-family: var(--font-hd);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.unlock-use-btn:hover {
  background: linear-gradient(135deg, rgba(255,208,96,0.34), rgba(255,160,60,0.3));
  box-shadow: 0 0 18px rgba(255,208,96,0.4);
  transform: scale(1.05);
}
.unlock-use-btn:active { transform: scale(0.95); }

/* Side-panel picker — STRONGEST / NEW badges (Part 12) */
.picker-badge-col {
  position: absolute;
  top: 4px; right: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
}
.picker-strongest-badge {
  padding: 1px 5px;
  background: rgba(255,208,96,0.92);
  color: #1a1206;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 5px;
  white-space: nowrap;
}
.picker-new-badge {
  padding: 1px 5px;
  background: rgba(61,255,160,0.92);
  color: #04140c;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  border-radius: 5px;
}

/* alien-celebrate on #alien-btn */
@keyframes alienCelebrate {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  15%  { transform: translateY(-14px) rotate(-5deg) scale(1.12); }
  30%  { transform: translateY(-8px) rotate(5deg) scale(1.08); }
  45%  { transform: translateY(-16px) rotate(-3deg) scale(1.14); }
  60%  { transform: translateY(-4px) rotate(2deg) scale(1.06); }
  75%  { transform: translateY(-10px) rotate(-2deg) scale(1.10); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
.alien-btn.alien-celebrate { animation: alienCelebrate 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

/* ============================================================
   COMBAT-ACTIVE — stronger center panel glow
   ============================================================ */
body.combat-active #panel-center {
  box-shadow: inset 0 0 80px rgba(255,80,20,0.14),
              inset 0 0 160px rgba(255,60,10,0.06) !important;
}
body.combat-active .alien-btn {
  filter: drop-shadow(0 0 28px rgba(255,120,30,0.7))
          drop-shadow(0 0 60px rgba(255,80,20,0.4));
}

/* ============================================================
   AMBIENT SYSTEM — Environmental Power Escalation v1.0
   Tier-gated effects that make the universe feel transformed
   by the player's growing empire. All animations use only
   opacity/box-shadow — GPU composited, safe for long sessions.
   ============================================================ */

/* ── Header power resonance ──────────────────────────────────
   The header border glow breathes with the empire's power level.
   Tier 1: static whisper | Tier 2-4: living animated energy   */

#habitat-header.amb-tier-1 {
  box-shadow: 0 2px 18px rgba(80,180,255,0.10);
  transition: box-shadow 3s ease;
}

#habitat-header.amb-tier-2 {
  animation: ambHdrBreath-t2 8s ease-in-out infinite;
}
@keyframes ambHdrBreath-t2 {
  0%, 100% { box-shadow: 0 2px 12px rgba(80,180,255,0.08); }
  50%       { box-shadow: 0 2px 30px rgba(80,180,255,0.25), 0 4px 14px rgba(80,180,255,0.10); }
}

#habitat-header.amb-tier-3 {
  animation: ambHdrBreath-t3 5s ease-in-out infinite;
}
@keyframes ambHdrBreath-t3 {
  0%, 100% { box-shadow: 0 2px 16px rgba(80,180,255,0.14); }
  50%       { box-shadow: 0 2px 40px rgba(80,180,255,0.34), 0 4px 20px rgba(120,70,255,0.18); }
}

#habitat-header.amb-tier-4 {
  animation: ambHdrBreath-t4 3s ease-in-out infinite;
}
@keyframes ambHdrBreath-t4 {
  0%, 100% { box-shadow: 0 2px 20px rgba(80,180,255,0.18); }
  50%       { box-shadow: 0 2px 52px rgba(80,180,255,0.44), 0 4px 26px rgba(128,70,255,0.28), 0 6px 10px rgba(80,200,255,0.12); }
}

/* ── CPS display power pulse ─────────────────────────────────
   The GC/s number pulses with the passive income frequency.
   Applied at tier 3+ — the display IS the passive empire.     */
@keyframes ambCpsPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(61,255,160,0.60); }
  50%       { text-shadow: 0 0 22px rgba(61,255,160,0.98), 0 0 46px rgba(61,255,160,0.32); }
}
.hud-cps-val.hud-cps-pulsing {
  animation: ambCpsPulse var(--cps-pulse-dur, 4.2s) ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   EMOTIONAL REDESIGN — Prestige collapse, world warp, arrival
   ══════════════════════════════════════════════════════════════ */

/* ── Prestige: inward collapse rings (pre-ascension) ────────────
   Rings shrink from large scale to zero — "vortex pull" effect.
   z-index 10001 keeps them visible OVER the loading screen.     */
.prestige-ring-collapse {
  position: fixed;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 2px solid rgba(192,112,255,0.8);
  box-shadow: 0 0 18px rgba(192,112,255,0.45),
              inset 0 0 18px rgba(192,112,255,0.22);
  animation: prestigeRingCollapse var(--prc-dur, 0.55s) cubic-bezier(0.4,0,0.8,0.3) forwards;
  pointer-events: none;
  z-index: 10001;
}
@keyframes prestigeRingCollapse {
  0%   { transform: scale(var(--prc-start, 4)); opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { transform: scale(0.05); opacity: 0; }
}

/* ── Prestige loading screen: cosmic context styling ─────────── */
#loading-screen.prestige-mode .ls-title {
  color: #c070ff;
  text-shadow: 0 0 30px rgba(192,112,255,0.9),
               0 0 60px rgba(192,112,255,0.45);
  animation: presLoadTitleBreath 1.2s ease-in-out infinite alternate;
}
@keyframes presLoadTitleBreath {
  from { letter-spacing: 4px; opacity: 0.8; }
  to   { letter-spacing: 9px; opacity: 1.0; }
}
#loading-screen.prestige-mode .ls-sub {
  color: rgba(192,112,255,0.7);
  letter-spacing: 7px;
  text-shadow: 0 0 18px rgba(192,112,255,0.45);
}
#loading-screen.prestige-mode #ls-hint {
  color: rgba(210,170,255,0.6);
}

/* ── World warp: hide default loading content ────────────────── */
#loading-screen.world-warp-mode .ls-inner {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

/* ── World warp: speed-line streaks using SVG data URI ────────── */
#loading-screen.world-warp-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 200% 200% at 50% 50%,
      transparent 0%,
      transparent 14%,
      var(--warp-color, rgba(80,200,255,0.06)) 14.1%,
      transparent 15%
    ),
    radial-gradient(ellipse 200% 200% at 50% 50%,
      transparent 0%,
      transparent 22%,
      var(--warp-color, rgba(80,200,255,0.05)) 22.1%,
      transparent 23%
    ),
    radial-gradient(ellipse 200% 200% at 50% 50%,
      transparent 0%,
      transparent 33%,
      var(--warp-color, rgba(80,200,255,0.04)) 33.1%,
      transparent 34%
    ),
    radial-gradient(ellipse 200% 200% at 50% 50%,
      transparent 0%,
      transparent 48%,
      var(--warp-color, rgba(80,200,255,0.04)) 48.1%,
      transparent 49%
    ),
    radial-gradient(ellipse 200% 200% at 50% 50%,
      transparent 0%,
      transparent 62%,
      var(--warp-color, rgba(80,200,255,0.03)) 62.1%,
      transparent 63%
    );
  animation: warpRingsExpand 0.9s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes warpRingsExpand {
  0%   { transform: scale(0.7); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── World warp: destination display ────────────────────────── */
.ls-world-dest {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  animation: lsDestFadeIn 0.45s ease-out forwards;
  pointer-events: none;
}
@keyframes lsDestFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ls-dest-num {
  font-family: var(--font-hd, 'Orbitron', monospace);
  font-size: 0.68rem;
  letter-spacing: 8px;
  color: var(--warp-color, #50c8ff);
  opacity: 0.65;
  text-transform: uppercase;
}
.ls-dest-icon {
  font-size: 4rem;
  animation: lsDestIconPulse 1.8s ease-in-out infinite;
}
@keyframes lsDestIconPulse {
  0%, 100% {
    filter: drop-shadow(0 0 16px var(--warp-color, #50c8ff));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 36px var(--warp-color, #50c8ff));
    transform: scale(1.05);
  }
}
.ls-dest-name {
  font-family: var(--font-hd, 'Orbitron', monospace);
  font-size: clamp(1.1rem, 3.5vw, 2rem);
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 30px var(--warp-color, #50c8ff),
               0 0 60px rgba(80,200,255,0.22);
  text-transform: uppercase;
}
.ls-dest-sub {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: rgba(200,230,255,0.42);
  text-transform: uppercase;
}

/* ── World arrival: cinematic name reveal (post-entry) ───────── */
.world-arrival-banner {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 9600;
  animation: wabReveal 3.6s ease-out forwards;
}
@keyframes wabReveal {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
  14%  { opacity: 1; transform: translate(-50%, -50%); }
  72%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); }
}
.wab-num {
  font-family: var(--font-hd, 'Orbitron', monospace);
  font-size: 0.62rem;
  letter-spacing: 8px;
  color: var(--wab-color, #50c8ff);
  opacity: 0.62;
  text-transform: uppercase;
}
.wab-icon {
  font-size: 2.8rem;
  filter: drop-shadow(0 0 20px var(--wab-color, #50c8ff));
  animation: wabIconGlow 1.4s ease-in-out infinite alternate;
}
@keyframes wabIconGlow {
  from { filter: drop-shadow(0 0 14px var(--wab-color, #50c8ff)); }
  to   { filter: drop-shadow(0 0 34px var(--wab-color, #50c8ff)); }
}
.wab-name {
  font-family: var(--font-hd, 'Orbitron', monospace);
  font-size: clamp(1rem, 3.2vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 28px var(--wab-color, #50c8ff),
               0 0 56px rgba(80,200,255,0.18);
  text-transform: uppercase;
}
.wab-enter {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 5px;
  color: rgba(200,230,255,0.38);
  text-transform: uppercase;
}

/* ============================================================
   ALIEN ORBITAL ENVIRONMENT
   CSS-animated orbital wisps around the alien button.
   Zero JS overhead after DOM injection in initBackground().
   The "parent-rotate, child-offset" orbit technique uses only
   the GPU compositor — no layout, no paint on each frame.
   World-specific color comes from --world-accent (set by
   worldThemeSystem.js). Intensity gates per body[data-world].
   ============================================================ */

#alien-orbital-env {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* Rotating wrapper — child offset creates orbital radius */
.ao-wrap {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}

/* Each wrapper uses its own speed and direction */
.ao-wrap-1 { animation: aoOrbit 11.5s linear infinite; }
.ao-wrap-2 { animation: aoOrbit 16.8s linear infinite reverse; }
.ao-wrap-3 { animation: aoOrbit 22.4s linear infinite; animation-delay: -7s; }
.ao-wrap-4 { animation: aoOrbit 30.0s linear infinite reverse; animation-delay: -14s; }

@keyframes aoOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The visible wisp dot — offset from wrapper center = orbital radius */
.ao-wisp {
  position: absolute;
  border-radius: 50%;
  background: var(--world-accent, #50c8ff);
  pointer-events: none;
  /* Center the dot on the wrapper's pivot point, then shift out by radius */
  top: -2px; left: -2px;
  animation: aoWispFade 3.5s ease-in-out infinite;
}

/* Individual radii, sizes, and stagger */
.ao-w1 {
  width: 5px; height: 5px;
  transform: translateX(88px);
  animation-duration: 3.1s;
}
.ao-w2 {
  width: 4px; height: 4px;
  transform: translateX(112px) translateY(12px);
  animation-duration: 4.4s;
  animation-delay: -1.6s;
}
.ao-w3 {
  width: 3px; height: 3px;
  transform: translateX(72px) translateY(-18px);
  animation-duration: 5.8s;
  animation-delay: -3.2s;
}
.ao-w4 {
  width: 6px; height: 6px;
  transform: translateX(138px) translateY(8px);
  animation-duration: 2.7s;
  animation-delay: -0.9s;
}

/* Opacity pulsation — base level varies by world */
@keyframes aoWispFade {
  0%, 100% { opacity: var(--ao-min, 0.10); }
  50%       { opacity: var(--ao-max, 0.38); }
}

/* ── World-specific orbital intensity ─────────────────────── */
/* W1: lonely space — only 2 wisps, very faint */
body[data-world="1"] .ao-wrap-3,
body[data-world="1"] .ao-wrap-4 { display: none; }
body[data-world="1"] .ao-wisp { --ao-min: 0.05; --ao-max: 0.16; }

/* W2: orbital emergence — 3 wisps */
body[data-world="2"] .ao-wrap-4 { display: none; }
body[data-world="2"] .ao-wisp { --ao-min: 0.07; --ao-max: 0.24; }

/* W3: solar reach — warm energy */
body[data-world="3"] .ao-wisp { --ao-min: 0.09; --ao-max: 0.30; }

/* W4: warp corridor — slightly faster orbits */
body[data-world="4"] .ao-wrap-1 { animation-duration: 8.5s; }
body[data-world="4"] .ao-wrap-2 { animation-duration: 12.2s; }
body[data-world="4"] .ao-wisp { --ao-min: 0.10; --ao-max: 0.33; }

/* W5: galaxy core — dense orbital activity */
body[data-world="5"] .ao-wisp { --ao-min: 0.12; --ao-max: 0.42; }

/* W6: dark matter rift — erratic presence */
body[data-world="6"] .ao-wrap-1 { animation-duration: 7.5s; }
body[data-world="6"] .ao-wrap-2 { animation-duration: 10.5s; }
body[data-world="6"] .ao-wisp { --ao-min: 0.10; --ao-max: 0.38; }

/* W7: singularity edge — brilliant fast wisps */
body[data-world="7"] .ao-wrap-1 { animation-duration: 6.8s; }
body[data-world="7"] .ao-wrap-2 { animation-duration: 9.8s; }
body[data-world="7"] .ao-wrap-3 { animation-duration: 13.5s; }
body[data-world="7"] .ao-wrap-4 { animation-duration: 19.0s; }
body[data-world="7"] .ao-wisp { --ao-min: 0.14; --ao-max: 0.50; }
body[data-world="7"] .ao-w1 { width: 6px; height: 6px; }
body[data-world="7"] .ao-w4 { width: 7px; height: 7px; }

/* W8: void beyond — slow large void particles */
body[data-world="8"] .ao-wrap-1 { animation-duration: 14.0s; }
body[data-world="8"] .ao-wrap-2 { animation-duration: 20.5s; }
body[data-world="8"] .ao-w1 { width: 7px; height: 7px; transform: translateX(100px); }
body[data-world="8"] .ao-w4 { width: 8px; height: 8px; transform: translateX(150px); }
body[data-world="8"] .ao-wisp { --ao-min: 0.12; --ao-max: 0.44; }

/* W9: void nexus — multi-orbit presence */
body[data-world="9"] .ao-wrap-1 { animation-duration: 9.0s; }
body[data-world="9"] .ao-wrap-2 { animation-duration: 13.0s; }
body[data-world="9"] .ao-wrap-3 { animation-duration: 17.5s; }
body[data-world="9"] .ao-wrap-4 { animation-duration: 24.0s; }
body[data-world="9"] .ao-wisp { --ao-min: 0.15; --ao-max: 0.52; }

/* W10: omega genesis — maximum transcendent presence */
body[data-world="10"] .ao-wrap-1 { animation-duration: 7.0s; }
body[data-world="10"] .ao-wrap-2 { animation-duration: 10.0s; }
body[data-world="10"] .ao-wrap-3 { animation-duration: 14.0s; }
body[data-world="10"] .ao-wrap-4 { animation-duration: 19.5s; }
body[data-world="10"] .ao-w1 { width: 7px; height: 7px; transform: translateX(95px); }
body[data-world="10"] .ao-w2 { width: 5px; height: 5px; transform: translateX(118px); }
body[data-world="10"] .ao-w3 { width: 4px; height: 4px; transform: translateX(78px) translateY(-22px); }
body[data-world="10"] .ao-w4 { width: 8px; height: 8px; transform: translateX(145px); }
body[data-world="10"] .ao-wisp { --ao-min: 0.18; --ao-max: 0.60; }

/* ── Ambient header tier effects ──────────────────────────── */
/* The header border glow deepens with ambient tier. */
/* These enhance the existing amb-tier-N class applied by ambientSystem. */
#habitat-header.amb-tier-1 { border-bottom-color: rgba(80,180,255,0.20); }
#habitat-header.amb-tier-2 { border-bottom-color: rgba(80,180,255,0.30); box-shadow: 0 1px 12px rgba(80,180,255,0.10); }
#habitat-header.amb-tier-3 { border-bottom-color: var(--world-accent, #50c8ff); box-shadow: 0 1px 20px rgba(80,180,255,0.18); }
#habitat-header.amb-tier-4 { border-bottom-color: var(--world-accent, #50c8ff); box-shadow: 0 2px 28px rgba(80,180,255,0.26), 0 0 60px rgba(80,180,255,0.08); }

/* ── World atmosphere on panel-center ────────────────────── */
/* Subtle inner glow on the center panel deepens by world. */
/* Low-cost: single box-shadow transition, no animation. */
#panel-center {
  transition: box-shadow 2.0s ease;
}
body[data-world="5"]  #panel-center { box-shadow: inset 0 0 80px rgba(255,80,160,0.04); }
body[data-world="6"]  #panel-center { box-shadow: inset 0 0 80px rgba(255,40,60,0.05); }
body[data-world="7"]  #panel-center { box-shadow: inset 0 0 100px rgba(255,240,160,0.06); }
body[data-world="8"]  #panel-center { box-shadow: inset 0 0 100px rgba(180,160,255,0.07); }
body[data-world="9"]  #panel-center { box-shadow: inset 0 0 120px rgba(255,64,192,0.08); }

/* ============================================================
   ACCESSIBILITY — Reduced Motion & Reduced Effects
   body.reduced-motion: suppresses spectacle flashes, screen shakes,
     prestige/world unlock banners, and other non-essential motion.
   body.reduced-effects: suppresses particles, confetti, impact bursts.
   Both also respect system prefers-reduced-motion.
   ============================================================ */

/* Spectacle elements that vanish entirely in reduced-motion mode */
body.reduced-motion .prestige-flash,
body.reduced-motion .prestige-ring,
body.reduced-motion .prestige-ring-collapse,
body.reduced-motion .world-unlock-bg,
body.reduced-motion .world-entry-flash,
body.reduced-motion .milestone-flash,
body.reduced-motion .ms-legendary-overlay { display: none !important; }

/* Banners and reveals stay visible but skip the motion */
body.reduced-motion .world-unlock-banner,
body.reduced-motion .prestige-reveal,
body.reduced-motion .world-arrival-banner {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Suppress all particle / confetti elements */
body.reduced-effects .unlock-particle,
body.reduced-effects .impact-burst,
body.reduced-effects .spec-confetti,
body.reduced-effects .dna-particle,
body.reduced-effects .spec-particle { display: none !important; }

/* Respect system preference too */
@media (prefers-reduced-motion: reduce) {
  .prestige-flash,
  .prestige-ring,
  .prestige-ring-collapse,
  .world-unlock-bg,
  .world-entry-flash,
  .milestone-flash { display: none !important; }

  .world-unlock-banner,
  .prestige-reveal { animation-duration: 0.01ms !important; }
}

.unlock-rarity-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-family: 'Orbitron', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============================================================
   WORLD UNLOCK BANNER — enhanced info row
   ============================================================ */
.wu-world-desc {
  font-size: 0.72rem;
  color: rgba(210,230,255,0.72);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.3px;
  line-height: 1.45;
}
.wu-difficulty {
  font-size: 0.60rem;
  font-family: 'Orbitron', monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.75;
}
.wu-whats-new {
  font-family: 'Orbitron', monospace;
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0.9;
}
.wu-whats-new-text {
  font-size: 0.68rem;
  color: rgba(220,240,255,0.82);
  text-align: center;
  margin-top: 3px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

/* ============================================================
   PHASE COMPLETE CELEBRATION — premium milestone moment
   ============================================================ */
.pc-overlay {
  position: fixed; inset: 0;
  z-index: 9600;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,30,80,0.55) 0%, rgba(2,4,16,0.88) 75%);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.32s ease;
  padding: 18px;
}
.pc-overlay.pc-in { opacity: 1; }
.pc-card {
  position: relative;
  max-width: 420px; width: 100%;
  text-align: center;
  background: linear-gradient(160deg, rgba(12,20,58,0.97), rgba(5,9,32,0.99));
  border: 1px solid rgba(255,208,96,0.35);
  border-radius: 20px;
  padding: 34px 26px 26px;
  box-shadow: 0 0 60px rgba(255,208,96,0.18), 0 24px 60px rgba(0,0,0,0.6);
  transform: scale(0.86) translateY(14px);
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
.pc-overlay.pc-in .pc-card { transform: scale(1) translateY(0); }
.pc-burst {
  position: absolute; top: 52px; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.pc-ray {
  position: absolute; top: 0; left: 0;
  width: 3px; height: 64px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, rgba(255,208,96,0.85), transparent);
  border-radius: 2px;
  transform-origin: top center;
  animation: pcRayPulse 2.2s ease-in-out infinite;
  opacity: 0.55;
}
.pc-ray:nth-child(1) { transform: rotate(0deg); }
.pc-ray:nth-child(2) { transform: rotate(60deg);  animation-delay: 0.2s; }
.pc-ray:nth-child(3) { transform: rotate(120deg); animation-delay: 0.4s; }
.pc-ray:nth-child(4) { transform: rotate(180deg); animation-delay: 0.6s; }
.pc-ray:nth-child(5) { transform: rotate(240deg); animation-delay: 0.8s; }
.pc-ray:nth-child(6) { transform: rotate(300deg); animation-delay: 1.0s; }
@keyframes pcRayPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.75; }
}
.pc-star {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 18px rgba(255,208,96,0.75));
  animation: pcStarPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pcStarPop {
  0%   { transform: scale(0) rotate(-30deg); }
  100% { transform: scale(1) rotate(0); }
}
.pc-eyebrow {
  font-family: var(--font-hd);
  font-size: 0.56rem; letter-spacing: 4px;
  color: rgba(255,208,96,0.75);
  margin-bottom: 6px;
}
.pc-title {
  font-family: var(--font-hd);
  font-size: 1.45rem; font-weight: 900; letter-spacing: 2px;
  color: #ffd060;
  text-shadow: 0 0 24px rgba(255,208,96,0.55);
  margin-bottom: 8px;
}
/* Phase progress — 4 dots, filled up to the current phase. Replaces the
   "Phase X next / Final phase" sentence entirely. */
.pc-phase-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 14px;
}
.pc-phase-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,208,96,0.12);
  border: 1px solid rgba(255,208,96,0.30);
}
.pc-phase-dot-filled {
  background: #ffd060;
  box-shadow: 0 0 10px rgba(255,208,96,0.65);
}

/* What just unlocked — short icon chips, not a sentence */
.pc-unlock-chips {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.pc-unlock-chip {
  font-size: 0.70rem; font-weight: 700;
  color: #3dffa0;
  background: rgba(61,255,160,0.08);
  border: 1px solid rgba(61,255,160,0.28);
  border-radius: 10px;
  padding: 5px 12px;
}

.pc-btn {
  font-family: var(--font-hd);
  font-size: 0.78rem; letter-spacing: 2px;
  padding: 11px 36px;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, #ffd060, #ff9820);
  border: none;
  color: #1a0e00;
  font-weight: 900;
  box-shadow: 0 4px 22px rgba(255,160,40,0.4);
  transition: transform 0.12s, box-shadow 0.2s;
}
.pc-btn:hover  { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 28px rgba(255,160,40,0.55); }
.pc-btn:active { transform: scale(0.96); }
body.reduced-motion .pc-ray  { animation: none; }
body.reduced-motion .pc-star { animation: none; }

/* ════════════════════════════════════════════════════════════
   WORLD COMPLETE — bigger, louder reward moment. Reuses the
   pc-overlay/pc-card skeleton; --wc-color tints it per world.
   ════════════════════════════════════════════════════════════ */
.wc-overlay {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--wc-color, #ffd060) 22%, rgba(2,4,16,0.9)) 0%, rgba(2,4,16,0.92) 75%);
}
.wc-card {
  max-width: 460px;
  border-color: color-mix(in srgb, var(--wc-color, #ffd060) 55%, transparent);
  box-shadow: 0 0 90px color-mix(in srgb, var(--wc-color, #ffd060) 35%, transparent), 0 24px 70px rgba(0,0,0,0.65);
  padding: 42px 28px 30px;
}
.wc-burst .pc-ray { background: linear-gradient(180deg, var(--wc-color, #ffd060), transparent); }
.wc-icon {
  font-size: 6.6rem;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 40px var(--wc-color, #ffd060));
  animation: wcIconPop 0.8s cubic-bezier(0.34,1.56,0.64,1), wcIconGlow 2.4s ease-in-out 0.8s infinite;
}
@keyframes wcIconPop {
  0%   { transform: scale(0) rotate(-20deg); }
  60%  { transform: scale(1.18) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes wcIconGlow {
  0%, 100% { filter: drop-shadow(0 0 34px var(--wc-color, #ffd060)); }
  50%      { filter: drop-shadow(0 0 54px var(--wc-color, #ffd060)); }
}
.wc-title {
  font-size: 1.9rem;
  color: var(--wc-color, #ffd060);
  text-shadow: 0 0 30px color-mix(in srgb, var(--wc-color, #ffd060) 70%, transparent);
}
body.reduced-motion .wc-icon { animation: none; }

/* ============================================================
   COMBAT ZONE — dedicated visual area
   ============================================================ */
/* Jar only — no box, no border, no header label. Raised clear of the
   toast line / mobile nav so nothing can overlap the combat meter. */
.combat-zone {
  position: absolute;
  bottom: 110px; left: 12px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  z-index: 20;
  pointer-events: none;
}
.czone-header {
  font-family: 'Orbitron', monospace;
  font-size: 0.50rem;
  letter-spacing: 2px;
  color: rgba(255,140,60,0.8);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2px;
}
/* Combat jar no longer needs position:absolute when inside combat-zone */
.combat-zone .combat-jar {
  position: static;
  bottom: auto; left: auto;
}

/* ============================================================
   MILESTONE OVERLAY — appears at companion levels 5/10/25/50
   ============================================================ */
.ac-milestone-overlay {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 9990;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(4,8,28,0.97);
  border: 2px solid rgba(255,208,96,0.7);
  border-radius: 20px;
  padding: 28px 36px 24px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255,208,96,0.25), 0 20px 60px rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.ac-milestone-overlay.acmo-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.acmo-icon {
  font-size: 2.8rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 16px rgba(255,208,96,0.7));
}
.acmo-alien {
  font-family: 'Orbitron', monospace;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: rgba(255,208,96,0.7);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.acmo-level {
  font-family: 'Orbitron', monospace;
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffd060;
  text-shadow: 0 0 24px rgba(255,208,96,0.8);
  margin-bottom: 8px;
}
.acmo-text {
  font-family: 'Orbitron', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #e8f4ff;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.acmo-sub {
  font-size: 0.70rem;
  color: rgba(180,220,255,0.65);
  line-height: 1.5;
}
/* Milestone banner glow variant */
.ac-levelup-banner.alb-milestone {
  border-color: rgba(255,208,96,0.6);
  box-shadow: 0 0 30px rgba(255,208,96,0.3);
}
.ac-levelup-banner.alb-milestone .alb-level {
  color: #ffd060;
  text-shadow: 0 0 16px rgba(255,208,96,0.8);
}
/* Alien milestone power aura */
@keyframes milestonePulse {
  0%   { filter: drop-shadow(0 0 20px rgba(255,208,96,0.9)) drop-shadow(0 0 50px rgba(255,180,40,0.5)); }
  50%  { filter: drop-shadow(0 0 40px rgba(255,208,96,1.0)) drop-shadow(0 0 80px rgba(255,180,40,0.7)); }
  100% { filter: drop-shadow(0 0 20px rgba(255,208,96,0.9)) drop-shadow(0 0 50px rgba(255,180,40,0.5)); }
}
.alien-milestone-aura {
  animation: milestonePulse 0.8s ease-in-out 4;
}
/* Milestone portrait burst — stronger than regular level-up */
@keyframes milestoneBurst {
  0%   { box-shadow: 0 0 0   rgba(255,208,96,0); transform: scale(1); }
  25%  { box-shadow: 0 0 50px rgba(255,208,96,0.9); transform: scale(1.08); }
  60%  { box-shadow: 0 0 30px rgba(255,208,96,0.5); transform: scale(1.02); }
  100% { box-shadow: 0 0 0   rgba(255,208,96,0); transform: scale(1); }
}
.acd-milestone-burst {
  animation: milestoneBurst 0.7s ease-out forwards;
}

/* ============================================================
   PHASE COMPLETION BLOCK — clear state + next step CTA
   ============================================================ */
.upg-phase-complete {
  padding: 20px 18px 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(61,255,160,0.08), rgba(80,200,255,0.05));
  border: 1px solid rgba(61,255,160,0.28);
  box-shadow: 0 0 28px rgba(61,255,160,0.08) inset;
  text-align: center;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.upg-complete-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(61,255,160,0.38);
  background: rgba(61,255,160,0.10);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #3dffa0;
  text-transform: uppercase;
}
.upg-complete-title {
  font-family: var(--font-hd);
  font-size: 0.88rem;
  font-weight: 800;
  color: #e0fff0;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.upg-complete-sub {
  font-size: 0.76rem;
  color: rgba(180,220,255,0.75);
  line-height: 1.55;
  max-width: 280px;
}
.upg-complete-sub strong { color: rgba(255,255,255,0.90); }
.upg-complete-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border: 1px solid rgba(80,200,255,0.45);
  border-radius: 10px;
  font-size: 0.76rem;
  font-family: var(--font-ui);
  font-weight: 700;
  color: #80c8ff;
  cursor: pointer;
  background: rgba(80,200,255,0.10);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  margin-top: 4px;
}
.upg-complete-action:hover {
  background: rgba(80,200,255,0.20);
  box-shadow: 0 4px 16px rgba(80,200,255,0.22);
  transform: translateY(-1px);
}

/* ── Cosmetics header button locked state ─────────────────── */
.hdr-cosmetics-btn.hdr-cosmetics-locked {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.hdr-cosmetics-btn.hdr-cosmetics-locked:hover {
  opacity: 0.75;
  filter: grayscale(0.2);
}

/* ── Mission widget: rule hint + rule tag ─────────────────── */
.mw-rule-hint {
  font-size: 0.58rem;
  color: rgba(255,200,140,0.6);
  line-height: 1.45;
  margin-bottom: 8px;
  padding: 6px 8px;
  border-left: 2px solid rgba(255,140,30,0.3);
  background: rgba(255,140,30,0.04);
  border-radius: 0 6px 6px 0;
}
.mc-rule-tag {
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,60,60,0.15);
  border: 1px solid rgba(255,60,60,0.3);
  color: #ff9090;
  margin-bottom: 4px;
}
.mc-reward-inline {
  color: #ffd0a0;
  font-weight: 700;
}