/* Pre-boot Inline Styles */
    #habitat-root {
      display: none;
      flex-direction: column;
      width: 100%; height: 100%;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    #habitat-body {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      overflow: hidden;
    }

    #panel-left {
      width: 210px;
      flex-shrink: 0;
      display: flex; flex-direction: column;
      background: rgba(4,6,28,0.97);
      border-right: 1px solid rgba(80,180,255,0.13);
      overflow: hidden;
    }

    #side-panel-content {
      flex: 1 1 0; overflow-y: auto; overflow-x: hidden;
      overscroll-behavior: contain;
      padding: 8px;
    }
    #side-panel-content::-webkit-scrollbar { width: 3px; }
    #side-panel-content::-webkit-scrollbar-thumb { background: rgba(80,180,255,0.2); border-radius:2px; }

    #mutation-slots {
      padding: 8px;
      border-top: 1px solid rgba(80,180,255,0.10);
      font-size: 0.72rem;
    }


    #panel-center {
      flex: 1 1 0;
      min-width: 0;
      display: flex; flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    #habitat-canvas-wrap {
      position: absolute; inset: 0; z-index: 0;
    }
    #habitat-canvas-wrap canvas { width:100%; height:100%; display:block; }

    /* ── Parallax nebula depth layer (S13) ─────────────────────
       Two large, soft, slowly-drifting colour clouds give the play
       area depth and life without distracting from the alien or
       hurting readability. Pure CSS transforms — GPU-composited,
       essentially free. Suppressed under Performance / Reduced-Motion. */
    #panel-center::before,
    #panel-center::after {
      content: "";
      position: absolute;
      z-index: 1;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.5;
      will-change: transform;
    }
    #panel-center::before {
      width: 60%; height: 55%;
      left: -12%; top: 4%;
      background: radial-gradient(circle, rgba(80,140,255,0.20), rgba(80,140,255,0) 70%);
      animation: nebulaDriftA 38s ease-in-out infinite alternate;
    }
    #panel-center::after {
      width: 55%; height: 50%;
      right: -10%; bottom: 2%;
      background: radial-gradient(circle, rgba(170,90,255,0.16), rgba(170,90,255,0) 70%);
      animation: nebulaDriftB 46s ease-in-out infinite alternate;
    }
    @keyframes nebulaDriftA {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(8%, 6%) scale(1.12); }
    }
    @keyframes nebulaDriftB {
      from { transform: translate(0, 0) scale(1.05); }
      to   { transform: translate(-7%, -5%) scale(1); }
    }
    body.reduced-effects #panel-center::before,
    body.reduced-effects #panel-center::after,
    body.reduced-motion  #panel-center::before,
    body.reduced-motion  #panel-center::after { display: none; }

    #alien-area {
      position: relative; z-index: 2;
      display: flex; flex-direction: column;
      align-items: center;
      flex: 1 1 0;
      justify-content: center;
      width: 100%;
    }

    #behavior-meters {
      position: relative; z-index: 2;
      width: 300px;
      max-width: calc(100% - 24px);
      margin: 0 auto;
      padding: 8px 16px;
      display: flex; flex-direction: column; gap: 4px;
      /* Contained ability-gauge widget — never stretches across the play area */
      background: rgba(8,12,34,0.55);
      border: 1px solid rgba(120,180,255,0.12);
      border-radius: 12px;
      backdrop-filter: blur(4px);
    }
    /* Collapse the panel chrome when no meter is active so it leaves no empty box */
    #behavior-meters:not(:has(.behavior-meter:not([style*="display: none"]))) {
      background: none; border-color: transparent; padding: 0;
    }

    /* Mutation panel — slides up from bottom of center panel */
    #mutation-panel {
      display: none;
      position: absolute; bottom: 0; left: 0; right: 0;
      z-index: 50;
      background: rgba(6,8,36,0.97);
      border-top: 2px solid rgba(180,80,255,0.6);
      padding: 14px 16px 12px;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    #mutation-panel.mutation-panel-visible { transform: translateY(0); }

    /* Lore fragment overlay */
    #lore-fragment {
      display: none;
      position: absolute; bottom: 0; left: 0; right: 0;
      z-index: 40;
      background: rgba(2,4,20,0.9);
      border-top: 1px solid rgba(80,180,255,0.25);
      padding: 10px 16px;
      font-size: 0.8rem;
      color: #a0c8ff;
      line-height: 1.6;
    }


    #panel-right {
      width: 300px;
      flex-shrink: 0;
      display: flex; flex-direction: column;
      background: rgba(4,6,28,0.97);
      border-left: 1px solid rgba(80,180,255,0.13);
      overflow: hidden;
    }

    #panel-right-tabs {
      display: flex;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(80,180,255,0.14);
    }
    .right-tab {
      flex: 1; padding: 8px 4px; background: none; border: none;
      color: #6090b8; font-family: 'Orbitron', sans-serif;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
      text-transform: uppercase; cursor: pointer;
      transition: color 0.18s, border-bottom 0.2s, transform 0.14s cubic-bezier(0.34,1.56,0.64,1), background 0.18s;
      border-bottom: 2px solid transparent;
    }
    .right-tab.active {
      color: var(--accent, #50c8ff);
      border-bottom: 2px solid var(--accent, #50c8ff);
    }

    #upgrade-panel-wrap,
    #prestige-panel-wrap {
      flex: 1 1 0; overflow-y: auto; overflow-x: hidden;
      overscroll-behavior: contain;
      padding: 8px 8px 16px;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    #upgrade-panel-wrap.rt-fade-out,
    #prestige-panel-wrap.rt-fade-out {
      opacity: 0;
      transform: translateY(6px);
    }
    #upgrade-panel-wrap::-webkit-scrollbar,
    #prestige-panel-wrap::-webkit-scrollbar { width: 6px; }
    #upgrade-panel-wrap::-webkit-scrollbar-thumb,
    #prestige-panel-wrap::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(80,180,255,0.45), rgba(60,140,220,0.30)); border-radius:3px; }


/* ============================================================
   SCREEN: GAME — Two-Panel Layout
   LEFT: main alien click area (flex: 1, centered)
   RIGHT: side panel, fixed width, no overlap
   ============================================================ */
#screen-game {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

/* ---- LEFT: Main game area --------------------------------- */
#game-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bg-canvas-fixed {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.orbit-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Active Potion HUD — floats above alien */
.active-potion-hud {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 15;
  pointer-events: none;
  max-width: 400px;
}

.aph-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border-radius: 20px;
  font-family: var(--font-hd);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(4,8,28,0.88);
  border: 1px solid;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  animation: aphPop 0.25s ease-out;
}

@keyframes aphPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.aph-bar-wrap {
  width: 36px; height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.aph-bar  { height: 100%; border-radius: 2px; transition: width 0.9s linear; }
.aph-time { color: rgba(255,255,255,0.6); }

/* Alien click area */
#alien-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  flex: 1;
  justify-content: center;
  padding-bottom: 16px;
  width: 100%;
}

.alien-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: clamp(160px, 36vmin, 240px);
  height: clamp(160px, 36vmin, 240px);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  animation: alienFloat 3.6s ease-in-out infinite;
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.alien-btn:focus,
.alien-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Primary float — button level (subtle) */
@keyframes alienFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Click bounce — squash press then elastic spring back */
@keyframes alienBounce {
  0%   { transform: scale(1); }
  15%  { transform: scale(0.90) translateY(3px); }
  45%  { transform: scale(1.08) translateY(-6px); }
  70%  { transform: scale(0.97) translateY(0); }
  85%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.alien-btn.alien-bounce { animation: alienBounce 0.34s cubic-bezier(0.34,1.56,0.64,1) !important; }
.alien-btn:active { transform: scale(0.88) !important; transition: transform 55ms ease-out !important; }

/* Alien image — quality enhancements */
.alien-img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* alienWorldPulse handles the filter; alienImgIdle handles transform */
  animation: alienImgIdle 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite,
             alienWorldPulse 5.0s ease-in-out infinite;
  will-change: transform, filter;
}

/* Persistent world-ambient glow pulse — breathes with the universe.
   Uses --world-glow-dim (faint) ↔ --world-glow (bright), keyed to world theme.
   Aliens keep their natural colors; world identity comes from the environment. */
@keyframes alienWorldPulse {
  0%, 100% {
    filter: drop-shadow(0 0 12px var(--alien-glow, rgba(61,255,160,0.45)))
            drop-shadow(0 0 4px rgba(255,255,255,0.08));
  }
  50% {
    filter: drop-shadow(0 0 28px var(--world-glow, rgba(61,255,160,0.95)))
            drop-shadow(0 0 9px rgba(255,255,255,0.18));
  }
}

@keyframes alienImgIdle {
  0%   { transform: scale(1.000) translateY(0px)  rotate(0deg); }
  25%  { transform: scale(1.008) translateY(-3px) rotate(0.25deg); }
  50%  { transform: scale(1.016) translateY(-5px) rotate(0deg); }
  75%  { transform: scale(1.008) translateY(-2px) rotate(-0.25deg); }
  100% { transform: scale(1.000) translateY(0px)  rotate(0deg); }
}

/* Groxian (alien index 1) — shift image upward so arm/hand area connects to body */
.alien-img[data-alien-idx="1"] {
  object-position: center 15%;
}

/* ============================================================
   HABITAT v9  —  Single-Page Three-Column Layout
   ============================================================ */

/* Header stats strip */
.hdr-stat-sub-wrap {
  display: flex;
  align-items: center;
}

.hdr-mission-badge {
  background: rgba(255,140,30,0.15);
  border: 1px solid rgba(255,140,30,0.4);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-family: var(--font-hd);
  color: #ffa040;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ── Alien area & button (additional sizing/shape props merged into first definition above) ── */
.alien-btn {
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
  width: clamp(140px, 28vw, 260px);
  height: clamp(140px, 28vw, 260px);
  border-radius: 50%;
}

.rhythm-flash {
  filter: drop-shadow(0 0 40px rgba(61,255,160,0.9)) drop-shadow(0 0 80px rgba(80,200,255,0.6)) !important;
}

.alien-label {
  font-family: var(--font-hd);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent);
  text-align: center;
  margin-top: 8px;
  text-transform: uppercase;
}

/* ── Click effects ──────────────────────────────────────────── */
.click-ripple {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  width: 60px; height: 60px;
  margin-left: -30px; margin-top: -30px;
  border: 2px solid var(--world-ripple-color, rgba(80,200,255,0.5));
  animation: ripple-out 0.5s ease-out forwards;
  z-index: 8000;
}
.rhythm-ripple {
  border-color: rgba(61,255,160,0.7);
  box-shadow: 0 0 12px rgba(61,255,160,0.3);
}
@keyframes ripple-out {
  from { transform: scale(0.3); opacity: 1; }
  to   { transform: scale(var(--ripple-end, 2.2)); opacity: 0; }
}

.click-pop {
  position: fixed;
  pointer-events: none;
  font-family: var(--font-hd);
  font-weight: 700;
  z-index: 8001;
  animation: click-pop-rise 0.72s cubic-bezier(0.08, 0.82, 0.17, 1) forwards;
}
@keyframes click-pop-rise {
  0%   { transform: translateY(0);                                     opacity: 1; }
  18%  { transform: translateY(-16px);                                 opacity: 1; }
  75%  { transform: translateY(calc(var(--pop-rise, -82px) * 0.83));  opacity: 0.7; }
  100% { transform: translateY(var(--pop-rise, -82px));                opacity: 0; }
}

@keyframes panel-shake-anim {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(calc(-1   * var(--world-shake-amp, 4px))); }
  40%     { transform: translateX(var(--world-shake-amp, 4px)); }
  60%     { transform: translateX(calc(-0.5 * var(--world-shake-amp, 4px))); }
  80%     { transform: translateX(calc( 0.5 * var(--world-shake-amp, 4px))); }
}
.panel-shake { animation: panel-shake-anim 0.32s ease-out forwards; }

/* ── Left panel: alien roster ───────────────────────────────── */
.alien-roster-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 3px;
  transition: background 0.15s;
  font-size: 0.75rem;
}
.alien-roster-item:hover { background: rgba(80,200,255,0.08); }
.alien-roster-item.active {
  background: rgba(80,200,255,0.13);
  border: 1px solid rgba(80,200,255,0.3);
}
.alien-roster-item.locked { opacity: 0.35; cursor: default; pointer-events: none; }
.alien-roster-icon { font-size: 1.2rem; }
.alien-roster-name { font-family: var(--font-hd); font-size: 0.6rem; font-weight: 700; color: var(--accent); }
.alien-roster-desc { font-size: 0.6rem; color: var(--text-dim); }

.alien-info-panel {
  background: rgba(4,8,28,0.97);
  border: 1px solid rgba(80,200,255,0.2);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.alien-info-panel .ai-name {
  font-family: var(--font-hd);
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 4px;
}

/* ── Left panel: enhancement slots ──────────────────────────── */
.mut-section-hdr {
  font-family: var(--font-hd);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  color: rgba(180,120,255,0.65);
  padding: 6px 2px 4px;
  text-transform: uppercase;
}
.mut-empty {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-align: center;
  padding: 10px 4px;
  line-height: 1.5;
}
.mutation-slot {
  background: rgba(180,80,255,0.07);
  border: 1px solid rgba(180,80,255,0.25);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 5px;
}
.ms-label {
  font-family: var(--font-hd);
  font-size: 0.68rem;
  font-weight: 700;
  color: #c080ff;
  margin-bottom: 2px;
}
.ms-effect { font-size: 0.65rem; color: rgba(200,222,255,0.5); line-height: 1.4; }

/* ── Behavior meters ────────────────────────────────────────── */
.behavior-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
}
.bm-label {
  flex-shrink: 0;
  width: 80px;
  color: var(--text-dim);
  font-size: 0.62rem;
  text-align: right;
}
.bm-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.bm-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.bm-val {
  flex-shrink: 0;
  width: 36px;
  font-family: var(--font-hd);
  font-size: 0.58rem;
  color: var(--text-dim);
  text-align: left;
}

/* Vent button */
.vent-btn {
  background: rgba(255,80,60,0.15);
  border: 1px solid rgba(255,80,60,0.5);
  border-radius: 8px;
  color: #ff6050;
  font-family: var(--font-hd);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 5px 14px;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.15s;
  letter-spacing: 1px;
}
.vent-btn:hover { background: rgba(255,80,60,0.28); }


/* AP slot buttons */
.ap-slot-btn {
  background: rgba(80,200,255,0.08);
  border: 1px solid rgba(80,200,255,0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.62rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.ap-slot-btn:hover { background: rgba(80,200,255,0.18); }
.ap-slot-btn.active {
  background: rgba(80,200,255,0.2);
  border-color: rgba(80,200,255,0.6);
  color: #a0f0ff;
}

/* ── Mutation panel ─────────────────────────────────────────── */
.mutation-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.mutation-icon { font-size: 1.4rem; }
.mutation-name {
  font-family: var(--font-hd);
  font-size: 0.85rem;
  font-weight: 700;
  color: #c080ff;
}
.mutation-subtitle {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.mutation-choices { display: flex; gap: 10px; }
.mutation-choice {
  flex: 1;
  background: rgba(180,80,255,0.1);
  border: 1px solid rgba(180,80,255,0.35);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.mutation-choice:hover {
  background: rgba(180,80,255,0.22);
  border-color: rgba(180,80,255,0.65);
}
.mc-label {
  font-family: var(--font-hd);
  font-size: 0.72rem;
  font-weight: 700;
  color: #c080ff;
  margin-bottom: 5px;
}
.mc-effect { font-size: 0.65rem; color: rgba(200,222,255,0.65); line-height: 1.45; }

/* ── Upgrade panel (right) ──────────────────────────────────── */
.upgp-section-title {
  font-family: var(--font-hd);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 10px 0 5px;
  border-bottom: 1px solid rgba(80,200,255,0.1);
  margin-bottom: 5px;
}

.upgp-path-selector {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.upgp-path-btn {
  flex: 1;
  padding: 7px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(80,200,255,0.15);
  border-radius: 7px;
  color: var(--text-dim);
  font-family: var(--font-hd);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.upgp-path-btn:hover { background: rgba(80,200,255,0.08); border-color: rgba(80,200,255,0.3); }
.upgp-path-btn.active-path {
  background: rgba(80,200,255,0.12);
  border-color: rgba(80,200,255,0.5);
  color: var(--accent);
}
.upgp-path-btn.locked-path {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
  animation: lockedIdleGlow 3.6s ease-in-out infinite;
}

.upgp-card {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 9px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  position: relative;
  overflow: hidden;
}
.upgp-card:hover { background: rgba(80,200,255,0.07); transform: translateY(-1px); }
.upgp-card:active { transform: scale(0.97); }
.upgp-card.affordable { box-shadow: inset 0 0 0 1px rgba(61,255,160,0.25); background: rgba(61,255,160,0.04); }
.upgp-card.affordable:hover { background: rgba(61,255,160,0.09); }
.upgp-card.locked-card { opacity: 0.22; cursor: default; pointer-events: none; animation: lockedIdleGlow 3.6s ease-in-out infinite; }
.upgp-card.path-locked { opacity: 0.18; cursor: not-allowed; pointer-events: none; animation: lockedIdleGlow 3.6s ease-in-out infinite; }

.upgp-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; padding-top: 1px; }
.upgp-info { flex: 1; min-width: 0; }
.upgp-name {
  font-family: var(--font-hd);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.upgp-drawback {
  font-size: 0.62rem;
  color: #ff8080;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upgp-desc { font-size: 0.66rem; color: var(--text-dim); margin-top: 1px; }
.upgp-cross { font-size: 0.62rem; color: rgba(61,255,160,0.55); margin-top: 1px; font-style: italic; }

.upgp-right { flex-shrink: 0; text-align: right; }
.upgp-price {
  font-family: var(--font-hd);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
}
.upgp-price.can { color: var(--green); text-shadow: 0 0 8px rgba(61,255,160,0.5); }
.upgp-price.no  { color: rgba(200,222,255,0.25); }
.upgp-lvl-badge {
  font-size: 0.52rem;
  font-weight: 700;
  font-family: var(--font-hd);
  color: var(--accent);
  background: rgba(80,200,255,0.12);
  border: 1px solid rgba(80,200,255,0.2);
  border-radius: 3px;
  padding: 0 3px;
  flex-shrink: 0;
}

/* AP install button inside upgrade card */
.ap-install-btn {
  font-size: 0.55rem;
  padding: 2px 7px;
  background: rgba(80,200,255,0.1);
  border: 1px solid rgba(80,200,255,0.3);
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  margin-top: 3px;
  transition: background 0.15s;
}
.ap-install-btn:hover { background: rgba(80,200,255,0.22); }
.ap-install-btn.installed { background: rgba(80,200,255,0.2); color: #a0f0ff; cursor: default; }

/* ── Prestige panel (right) ─────────────────────────────────── */
.prestige-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}
.prestige-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #ffaa00);
  border-radius: 4px;
  transition: width 0.5s ease;
}
.prestige-readiness {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-align: center;
}
.prestige-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #ffd060, #ffaa00);
  border: none;
  border-radius: 10px;
  color: #1a0e00;
  font-family: var(--font-hd);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: opacity 0.2s, transform 0.15s;
}
.prestige-btn:hover:not(:disabled) { transform: scale(1.02); }
.prestige-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.prestige-unlock-card {
  background: rgba(255,208,96,0.05);
  border: 1px solid rgba(255,208,96,0.2);
  border-radius: 9px;
  padding: 9px 11px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.prestige-unlock-card:hover { background: rgba(255,208,96,0.1); border-color: rgba(255,208,96,0.4); }
.prestige-unlock-card.maxed { opacity: 0.35; cursor: default; pointer-events: none; }
.pu-name {
  font-family: var(--font-hd);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 3px;
}
.pu-desc { font-size: 0.62rem; color: var(--text-dim); margin-bottom: 4px; }
.pu-cost { font-size: 0.6rem; font-family: var(--font-hd); color: #ffaa40; }
.pu-level { font-size: 0.55rem; color: var(--text-dim); }

/* ── Lore fragment overlay ──────────────────────────────────── */
.lore-frag-title {
  font-family: var(--font-hd);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

/* ── Flow state glow on alien image ─────────────────────────── */
@keyframes flow-pulse {
  0%,100% { filter: drop-shadow(0 0 24px rgba(80,200,255,0.5)); }
  50%      { filter: drop-shadow(0 0 48px rgba(80,200,255,0.9)) drop-shadow(0 0 80px rgba(61,255,160,0.5)); }
}
.flow-active { animation: flow-pulse 1s ease-in-out infinite; }

/* ── Toast (also alias for showGameToast) ───────────────────── */
.game-toast {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(4,8,28,0.96);
  border: 1px solid rgba(80,200,255,0.4);
  color: var(--text);
  padding: 9px 22px;
  border-radius: 30px;
  font-family: var(--font-hd);
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 24px rgba(80,200,255,0.15);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  /* Above .modal-overlay (9999) so a toast fired while a modal is open
     (e.g. a mission completing while the daily-reward modal is showing)
     fades in immediately instead of sitting hidden behind the modal and
     snapping into view the moment it closes. */
  z-index: 10100;
  white-space: nowrap;
}
.game-toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Eruption bank collect button ───────────────────────────── */
.eruption-bank-btn {
  background: rgba(255,208,96,0.12);
  border: 1px solid rgba(255,208,96,0.45);
  border-radius: 8px;
  color: var(--gold);
  font-family: var(--font-hd);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 5px 14px;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.15s;
  letter-spacing: 1px;
}
.eruption-bank-btn:hover { background: rgba(255,208,96,0.25); }

/* ── Alien Roster (left panel) ───────────────────────────────── */
.roster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.roster-card:hover { background: rgba(80,200,255,0.07); }
.roster-card.roster-active {
  background: rgba(80,200,255,0.11);
  border-color: rgba(80,200,255,0.3);
}
.roster-card.roster-locked { opacity: 0.3; cursor: default; }
.roster-img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(80,200,255,0.4)); }
.roster-name { font-family: var(--font-hd); font-size: 0.62rem; font-weight: 700; color: var(--accent); text-align: center; }
.roster-arch { font-size: 0.58rem; color: var(--text-dim); text-align: center; }
.roster-lock { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lock-icon   { font-size: 1.2rem; opacity: 0.5; }
.lock-text   { font-family: var(--font-hd); font-size: 0.55rem; color: var(--text-dim); }

/* ── Alien Info Panel (inline, below roster) ─────────────────── */
#alien-info-panel {
  background: rgba(4,8,28,0.97);
  border: 1px solid rgba(80,200,255,0.2);
  border-radius: 10px;
  padding: 10px;
  margin-top: 6px;
  font-size: 0.7rem;
}
.aip-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.aip-img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.aip-name { font-family: var(--font-hd); font-size: 0.7rem; font-weight: 700; color: var(--accent); }
.aip-arch { font-size: 0.58rem; color: var(--green); margin-bottom: 2px; }
.aip-origin { font-size: 0.58rem; color: var(--text-dim); }
.aip-mechanic { font-size: 0.65rem; color: var(--text); line-height: 1.5; margin-bottom: 6px; }
.aip-lore { font-size: 0.62rem; color: rgba(200,222,255,0.5); font-style: italic; line-height: 1.5; margin-bottom: 8px; border-left: 2px solid rgba(80,200,255,0.2); padding-left: 8px; }
.aip-close {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.62rem;
  padding: 4px 10px;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
.aip-close:hover { background: rgba(255,255,255,0.1); }

/* ── Shop / upgrade card shared helpers ──────────────────────── */
.upg-tier-header {
  font-family: var(--font-hd);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 8px 2px 4px;
  border-bottom: 1px solid rgba(80,200,255,0.08);
  margin-bottom: 5px;
}

/* ── Prestige panel helpers ───────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--green));
  border: none;
  border-radius: 10px;
  color: #020210;
  font-family: var(--font-hd);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 10px 22px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-primary:hover { transform: scale(1.03); box-shadow: 0 0 20px rgba(80,200,255,0.3); }

.btn-danger-confirm {
  background: rgba(255,60,60,0.15);
  border: 1px solid rgba(255,60,60,0.5);
  border-radius: 10px;
  color: #ff6060;
  font-family: var(--font-hd);
  font-size: 0.78rem;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger-confirm:hover { background: rgba(255,60,60,0.3); }

.btn-modal-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.78rem;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-modal-close:hover { background: rgba(255,255,255,0.12); }

/* ── Name modal ───────────────────────────────────────────────── */
.name-input, .settings-name-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(80,200,255,0.25);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s;
}
.name-input:focus, .settings-name-input:focus { border-color: var(--accent); }

/* ── Settings modal ───────────────────────────────────────────── */
.modal-name-box  { width: min(380px, 90vw); }
.modal-offline-box { width: min(380px, 90vw); text-align: center; }
.modal-confirm-box { width: min(380px, 90vw); text-align: center; }
.modal-celebrate-box { width: min(380px, 90vw); text-align: center; }
/* Settings modal — explicit pointer-events to prevent any CSS cascade blocking clicks */
.modal-settings-box,
#modal-settings .modal-box,
#modal-settings .settings-row,
#modal-settings .settings-actions,
#modal-settings input,
#modal-settings button,
#modal-settings .vol-slider,
#modal-settings label {
  pointer-events: auto !important;
}
/* All modal buttons and close controls must receive pointer events regardless of cascade */
.modal-overlay .modal-box button,
.modal-overlay .modal-close,
.modal-btn-row button,
.btn-danger-confirm,
.btn-modal-close {
  pointer-events: auto !important;
}
.modal-settings-box { width: min(420px, 94vw); }

.settings-row   { margin-bottom: 16px; }
.settings-label { font-size: 0.8rem; color: var(--text-dim); display: block; margin-bottom: 6px; }
.settings-name-row { display: flex; gap: 8px; }
.btn-settings-name-save {
  background: rgba(80,200,255,0.12);
  border: 1px solid rgba(80,200,255,0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-settings-name-save:hover { background: rgba(80,200,255,0.22); }

.volume-row { display: flex; align-items: center; gap: 10px; }
.vol-slider { flex: 1; accent-color: var(--accent); }
.vol-val    { font-family: var(--font-hd); font-size: 0.72rem; color: var(--accent); min-width: 36px; }

.settings-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.btn-settings {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.78rem;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.btn-settings:hover { background: rgba(255,255,255,0.1); }
.btn-settings.danger { border-color: rgba(255,60,60,0.3); color: #ff7060; }
.btn-settings.danger:hover { background: rgba(255,60,60,0.12); }

.settings-version { font-size: 0.6rem; color: rgba(200,222,255,0.2); text-align: center; margin-top: 16px; }

/* ── First-launch celebrate ───────────────────────────────────── */
.celebrate-emoji { font-size: 4rem; margin: 12px 0; }
.celebrate-msg   { font-size: 0.9rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 12px; }

/* ── Confirm dialog ────────────────────────────────────────────── */
.confirm-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 4px; }