/* =========================================================
   COSMOS — Idle Evolution
   Mobile-first design. Dark cosmic palette, smooth animations.
   ========================================================= */

:root {
  --bg-0: #050818;
  --bg-1: #0a0e27;
  --bg-2: #131838;
  --bg-card: #1a2148;
  --bg-card-2: #232a55;
  --bg-card-hi: #2d3568;

  --line: #2a3170;
  --line-hi: #4a5298;

  --text: #eef0ff;
  --text-dim: #8b93c4;
  --text-faint: #5a619a;

  --accent: #67e8f9;        /* cyan */
  --accent-hi: #a5f3fc;
  --accent-deep: #0891b2;

  --purple: #a855f7;
  --purple-hi: #c084fc;
  --purple-deep: #7c3aed;

  --gold: #fbbf24;
  --gold-hi: #fde68a;

  --green: #34d399;
  --red: #f87171;

  --grad-cyan: linear-gradient(135deg, #06b6d4 0%, #67e8f9 100%);
  --grad-purple: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
  --grad-gold: linear-gradient(135deg, #f59e0b 0%, #fde047 100%);
  --grad-card: linear-gradient(180deg, #1a2148 0%, #131838 100%);

  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-cyan: 0 0 30px rgba(103, 232, 249, 0.45);
  --shadow-glow-purple: 0 0 40px rgba(168, 85, 247, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  background: var(--bg-0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; outline: none; }

/* ============== STARFIELD ============== */
.stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 85%, rgba(124,58,237,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 85% 15%, rgba(8,145,178,0.10) 0%, transparent 65%),
    radial-gradient(ellipse at top, #1a2148 0%, #050818 70%);
}
.stars-layer {
  position: absolute; inset: 0;
  background-repeat: repeat;
  animation: drift linear infinite;
}
.stars-layer-1 {
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #a5f3fc, transparent),
    radial-gradient(1px 1px at 90% 10%, #fff, transparent),
    radial-gradient(2px 2px at 40% 90%, #c084fc, transparent),
    radial-gradient(1px 1px at 80% 50%, #fff, transparent);
  background-size: 350px 350px;
  animation-duration: 180s;
  opacity: 0.8;
}
.stars-layer-2 {
  background-image:
    radial-gradient(1px 1px at 25% 60%, #67e8f9, transparent),
    radial-gradient(1px 1px at 75% 25%, #fff, transparent),
    radial-gradient(2px 2px at 50% 80%, #fde68a, transparent),
    radial-gradient(1px 1px at 10% 40%, #a5f3fc, transparent);
  background-size: 500px 500px;
  animation-duration: 280s;
  animation-direction: reverse;
  opacity: 0.6;
}
.stars-layer-3 {
  background-image:
    radial-gradient(2px 2px at 30% 50%, #c084fc, transparent),
    radial-gradient(1px 1px at 70% 80%, #fff, transparent),
    radial-gradient(3px 3px at 90% 30%, #67e8f9, transparent);
  background-size: 800px 800px;
  animation-duration: 420s;
  opacity: 0.4;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, -100%, 0); }
}

/* ============== APP SHELL ============== */
.app {
  position: relative; z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;   /* topbar / tap-zone; tabs+panels live in a fixed bottom sheet */
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
}

/* ============== TOPBAR ============== */
.topbar {
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 8px calc(18px + env(safe-area-inset-left, 0px));
  background:
    linear-gradient(180deg, rgba(10, 14, 39, 0.97) 0%, rgba(10, 14, 39, 0.88) 70%, transparent 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.gear-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  font-size: 18px;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  transition: transform 100ms, background 150ms;
}
.gear-btn:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.12); }
.stage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid var(--purple-deep);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--purple-hi);
  letter-spacing: 0.02em;
}
.stage-pill-icon { width: 18px; height: 18px; object-fit: cover; border-radius: 4px; vertical-align: middle; }

.currency-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.currency-main { min-width: 0; overflow: hidden; }   /* mass can shrink, never shoves rate off-screen */
.currency-rate { flex: 0 0 auto; text-align: right; } /* per-sec column keeps its full width */
.currency-label {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700;
  margin-bottom: 2px;
}
.currency-value {
  font-size: 38px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #cdd5ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.rate-label {
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  text-align: right;
  white-space: nowrap;
  margin-bottom: 2px;
}
.rate-value {
  font-size: 18px; font-weight: 700;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.prestige-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.prestige-strip[hidden] { display: none; }
.prestige-icon { color: var(--gold); font-size: 14px; }
.prestige-count { color: var(--gold-hi); font-weight: 700; }
.prestige-label { font-size: 11px; }

/* ============== TAP ZONE ============== */
.tap-zone {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* bottom padding reserves room for the collapsed sheet so the atom centers above it */
  padding: 16px 16px var(--peek-h, 220px);
  overflow: hidden;
  min-height: 240px;
}
.orbit {
  position: absolute;
  /* match the atom, which is flex-centered in the content box (above the reserved peek) */
  top: calc(50% - var(--peek-h, 220px) / 2); left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(103, 232, 249, 0.18);
  pointer-events: none;
  animation: orbit-rotate linear infinite;
}
.orbit-1 { width: 200px; height: 200px; animation-duration: 30s; }
.orbit-2 { width: 260px; height: 260px; border-color: rgba(168, 85, 247, 0.15); animation-duration: 50s; animation-direction: reverse; }
.orbit-3 { width: 320px; height: 320px; border-color: rgba(251, 191, 36, 0.10); animation-duration: 70s; }
@keyframes orbit-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.atom {
  position: relative;
  width: 156px; height: 156px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 80ms ease-out;
  z-index: 2;
}
.atom:active { transform: scale(0.94); }

.atom-nucleus {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -50%) scale(var(--nscale, 1));
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fde68a 0%, #fbbf24 30%, #d97706 65%, #78350f 100%);
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.8),
    0 0 60px rgba(251, 191, 36, 0.5),
    inset 0 0 12px rgba(255, 255, 255, 0.3);
  animation: nucleus-pulse 2.5s ease-in-out infinite;
}
@keyframes nucleus-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(251,191,36,0.8), 0 0 60px rgba(251,191,36,0.5), inset 0 0 12px rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 50px rgba(251,191,36,1), 0 0 100px rgba(251,191,36,0.6), inset 0 0 12px rgba(255,255,255,0.5); }
}

.atom-glow {
  position: absolute; top: 50%; left: 50%;
  width: 156px; height: 156px;
  transform: translate(-50%, -50%) scale(var(--nscale, 1));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.30) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.atom-electron {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent);
  top: 50%; left: 50%;
}
.atom-e1 {
  animation: electron-orbit-1 4s linear infinite;
}
.atom-e2 {
  background: var(--purple-hi);
  box-shadow: 0 0 12px var(--purple-hi), 0 0 24px var(--purple-hi);
  animation: electron-orbit-2 6s linear infinite;
}
.atom-e3 {
  background: var(--gold-hi);
  box-shadow: 0 0 12px var(--gold-hi), 0 0 24px var(--gold-hi);
  animation: electron-orbit-3 8s linear infinite;
}
@keyframes electron-orbit-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(72px) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(72px) rotate(-360deg); }
}
@keyframes electron-orbit-2 {
  from { transform: translate(-50%, -50%) rotate(120deg) translateX(72px) rotate(-120deg); }
  to   { transform: translate(-50%, -50%) rotate(480deg) translateX(72px) rotate(-480deg); }
}
@keyframes electron-orbit-3 {
  from { transform: translate(-50%, -50%) rotate(240deg) translateX(72px) rotate(-240deg); }
  to   { transform: translate(-50%, -50%) rotate(600deg) translateX(72px) rotate(-600deg); }
}

.atom-burst {
  position: absolute; top: calc(50% - var(--peek-h, 220px) / 2); left: 50%;
  width: 156px; height: 156px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: burst 400ms ease-out forwards;
}
@keyframes burst {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.tap-hint {
  position: absolute; bottom: calc(8px + var(--peek-h, 220px)); left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.15em; text-transform: uppercase;
  transition: opacity 200ms;
}
.tap-hint[hidden] { display: block; opacity: 0; }

/* Floating numbers */
.floats {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.float-num {
  position: absolute;
  color: var(--accent);
  font-weight: 800; font-size: 22px;
  text-shadow: 0 0 8px rgba(103, 232, 249, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: float-up 900ms ease-out forwards;
  font-variant-numeric: tabular-nums;
}
@keyframes float-up {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  20%  { opacity: 1; transform: translate(-50%, -8px) scale(1.2); }
  100% { transform: translate(-50%, -80px) scale(1); opacity: 0; }
}

/* ============== TABS ============== */
.tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 8px 10px 6px;
  background: rgba(9, 12, 34, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex: 0 0 auto;
  touch-action: none;
  border-bottom: 1px solid rgba(103, 232, 249, 0.10);
}
.tab {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-faint);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 180ms ease;
  position: relative;
}
.tab-icon { width: 18px; height: 18px; object-fit: cover; border-radius: 5px; }
.tab:active { opacity: 0.7; }
.tab.tab-active {
  background: rgba(103, 232, 249, 0.11);
  color: var(--accent);
  border-color: rgba(103, 232, 249, 0.22);
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.12), inset 0 1px 0 rgba(103, 232, 249, 0.10);
  text-shadow: 0 0 14px rgba(103, 232, 249, 0.55);
}
.tab.tab-active::after {
  content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%;
  height: 2px; border-radius: 999px;
  background: var(--grad-cyan);
  box-shadow: 0 0 6px rgba(103, 232, 249, 0.8);
}

/* ============== BOTTOM SHEET (drawer) ============== */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 20;                                  /* above app content, below modals/toasts */
  display: flex;
  flex-direction: column;
  height: var(--sheet-max, 62vh);               /* full expanded height (set by JS) */
  transform: translateY(var(--sheet-y, 100%));  /* 0 = expanded; larger = collapsed/hidden */
  transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1), opacity 360ms ease;
  background: linear-gradient(180deg, #0d1235 0%, var(--bg-1) 60px);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(103, 232, 249, 0.28);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(103, 232, 249, 0.12);
  overscroll-behavior: contain;
}
.sheet.dragging { transition: opacity 360ms ease; } /* follow the finger 1:1 while dragging */
.sheet-grab {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: 24px;
  cursor: grab;
  touch-action: none;
}
.sheet-grab:active { cursor: grabbing; }
.sheet-grab-bar {
  width: 42px; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: background 150ms, width 150ms;
}
.sheet-grab:active .sheet-grab-bar { background: rgba(255, 255, 255, 0.5); width: 54px; }

/* ============== PANELS — swipeable pager ============== */
.panels-pager {
  position: relative;
  background: var(--bg-1);
  overflow: hidden;
  /* Three 100%-width panels laid out horizontally */
  display: flex;
  align-items: stretch;
  width: 300%;
  flex: 1 1 auto;             /* fill the sheet height below the tabs */
  min-height: 0;              /* allow internal panels to scroll */
  transform: translateX(0);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: pan-y;        /* allow vertical scroll inside panel, capture horizontal */
  will-change: transform;
}
.panels-pager.dragging { transition: none; }
.panels-pager[data-tab="generators"] { transform: translateX(0); }
.panels-pager[data-tab="upgrades"]   { transform: translateX(-33.3333%); }
.panels-pager[data-tab="prestige"]   { transform: translateX(-66.6666%); }
.panel {
  flex: 0 0 33.3333%;
  background: var(--bg-1);
  padding: 0 calc(12px + env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-right, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
}
/* Legacy class kept for non-pager spots; pager controls visibility via transform */
.panel-active { /* no-op now */ }

/* ============== BUY BAR ============== */
.buybar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 4px;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-1);
}
.buybar-label {
  font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.buybar-btn {
  flex: 1;
  padding: 8px 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 120ms;
}
.buybar-btn.buybar-active {
  background: var(--bg-card-hi);
  border-color: var(--accent);
  color: var(--accent-hi);
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.20);
}

/* ============== GENERATORS ============== */
.generators {
  display: flex; flex-direction: column; gap: 10px;
}
.gen {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 12px;
  background: var(--grad-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: all 150ms;
  position: relative;
  overflow: hidden;
}
.gen.affordable {
  border-color: var(--accent-deep);
  box-shadow: 0 0 14px rgba(103, 232, 249, 0.12), 0 2px 8px rgba(0,0,0,0.3);
}
.gen.affordable::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(105deg, transparent 35%, rgba(103,232,249,0.07) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: gen-shimmer 2.8s linear infinite;
  pointer-events: none;
}
@keyframes gen-shimmer {
  0%   { background-position: 250% center; }
  100% { background-position: -250% center; }
}
.gen.unaffordable .gen-buy { opacity: 0.6; }
.gen.locked {
  filter: grayscale(0.9) brightness(0.5);
  pointer-events: none;
}

.gen-icon-wrap {
  grid-row: 1 / 3;
  align-self: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--bg-card-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  position: relative;
  transition: box-shadow 200ms;
}
.gen-icon-wrap::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 68% 18%, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
}
.gen-icon-wrap::after {
  content: ''; position: absolute; inset: 1px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
  pointer-events: none;
}
.gen.affordable .gen-icon-wrap {
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.30), 0 0 6px rgba(103,232,249,0.15);
}

.gen-name {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.gen-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px;
}
.gen-meta-prod { color: var(--accent); font-weight: 600; }
.gen-meta-owned {
  color: var(--gold-hi);
  background: rgba(251, 191, 36, 0.10);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}

.gen-buy {
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px;
  padding: 8px 10px;
  background: var(--grad-cyan);
  border-radius: 12px;
  color: #062a30;
  font-weight: 800;
  transition: transform 80ms, box-shadow 150ms;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255,255,255,0.25);
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: hidden;
}
.gen-buy:not([disabled])::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 45%;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  pointer-events: none;
}
.gen-buy:active { transform: scale(0.94); }
.gen-buy[disabled] {
  background: var(--bg-card);
  color: var(--text-faint);
  box-shadow: none;
}
.gen-buy-label {
  font-size: 10px; opacity: 0.75;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 2px;
}
.gen-buy-cost { font-size: 14px; line-height: 1.1; }
.gen-buy-mult {
  font-size: 9px;
  opacity: 0.7;
  margin-top: 2px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============== UPGRADES ============== */
.empty-state {
  padding: 24px 12px;
  text-align: center;
}
.empty-icon { font-size: 40px; margin-bottom: 8px; }
.empty-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.empty-text { font-size: 13px; color: var(--text-dim); }

.upgrades {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.upg {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--grad-card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.upg.affordable { border-color: var(--purple-deep); box-shadow: 0 0 14px rgba(168, 85, 247, 0.18); }
.upg-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--purple-hi);
}
.upg-body { flex: 1; }
.upg-name { font-size: 14px; font-weight: 700; }
.upg-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.upg-buy {
  padding: 8px 12px;
  background: var(--grad-purple);
  color: #ffe7ff;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}
.upg.bought .upg-buy {
  background: rgba(255,255,255,0.06);
  color: var(--green);
  box-shadow: none;
}

/* ============== PRESTIGE ============== */
.prestige-card {
  margin-top: 16px;
  padding: 22px 18px 18px;
  background: var(--grad-card);
  border: 1px solid var(--gold);
  border-radius: 18px;
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.15);
  text-align: center;
}
.prestige-headline {
  font-size: 30px; font-weight: 900;
  letter-spacing: 0.12em;
  background: var(--grad-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.prestige-sub {
  font-size: 13px; color: var(--text-dim);
  margin-top: 4px;
}
.prestige-stat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 22px 0 18px;
}
.prestige-stat {
  padding: 14px 8px;
  background: var(--bg-card-2);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.prestige-stat-label {
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  margin-bottom: 6px;
}
.prestige-stat-value {
  font-size: 22px; font-weight: 800;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}
.prestige-stat-unit {
  font-size: 13px; font-weight: 700;
  margin-left: 3px;
}
.evolve-btn {
  width: 100%;
  padding: 14px;
  background: var(--grad-gold);
  border-radius: 14px;
  color: #1a0f00;
  font-size: 18px; font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.40);
  transition: transform 80ms, opacity 200ms;
}
.evolve-btn:active { transform: scale(0.97); }
.evolve-btn[disabled] {
  background: var(--bg-card);
  color: var(--text-faint);
  box-shadow: none;
  letter-spacing: 0.04em;
}
.evolve-btn-text { font-size: 18px; }
.evolve-btn-sub {
  display: block;
  font-size: 11px; opacity: 0.7;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============== MODAL ============== */
.modal-bg {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(5, 8, 24, 0.85);
  z-index: 100;
  padding: 24px;
  backdrop-filter: blur(8px);
}
.modal-bg.modal-active { display: flex; animation: modal-fade 200ms; }
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal {
  width: 100%; max-width: 360px;
  padding: 28px 22px 22px;
  background: var(--grad-card);
  border: 1px solid var(--line-hi);
  border-radius: 20px;
  text-align: center;
  animation: modal-pop 250ms ease-out;
}
@keyframes modal-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-title {
  font-size: 22px; font-weight: 800;
  background: var(--grad-cyan);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}
.modal-body { margin-bottom: 20px; }
.modal-text { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.modal-gain {
  font-size: 36px; font-weight: 900;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.4);
}
.modal-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.modal-btn {
  width: 100%;
  padding: 14px;
  background: var(--grad-cyan);
  border-radius: 12px;
  color: #062a30;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.05em;
  transition: transform 80ms;
}
.modal-btn:active { transform: scale(0.96); }
.modal-actions { display: flex; gap: 8px; }
.modal-btn-ghost {
  background: var(--bg-card);
  color: var(--text-dim);
  border: 1px solid var(--line);
}

/* Responsive — taller phones get bigger atom */
@media (min-height: 700px) {
  .tap-zone { min-height: 320px; }
  .atom { width: 196px; height: 196px; }
  .atom-nucleus { width: 88px; height: 88px; }
  .atom-glow { width: 196px; height: 196px; }
  .orbit-1 { width: 220px; height: 220px; }
  .orbit-2 { width: 290px; height: 290px; }
  .orbit-3 { width: 360px; height: 360px; }
  @keyframes electron-orbit-1 {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(88px) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(88px) rotate(-360deg); }
  }
  @keyframes electron-orbit-2 {
    from { transform: translate(-50%, -50%) rotate(120deg) translateX(88px) rotate(-120deg); }
    to   { transform: translate(-50%, -50%) rotate(480deg) translateX(88px) rotate(-480deg); }
  }
  @keyframes electron-orbit-3 {
    from { transform: translate(-50%, -50%) rotate(240deg) translateX(88px) rotate(-240deg); }
    to   { transform: translate(-50%, -50%) rotate(600deg) translateX(88px) rotate(-600deg); }
  }
}

/* Hide scrollbar but keep scrolling */
.panel::-webkit-scrollbar { display: none; }
.panel { scrollbar-width: none; }

/* ============== SPLASH SCREEN ============== */
.splash {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #1a2148 0%, #050818 80%);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  transition: opacity 600ms ease-out, visibility 600ms;
}
.splash.splash-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { text-align: center; }
.splash-atom {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto 20px;
}
.splash-nucleus {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fde68a 0%, #fbbf24 35%, #d97706 75%, #78350f 100%);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.7), inset 0 0 10px rgba(255,255,255,0.3);
  animation: nucleus-pulse 1.4s ease-in-out infinite;
}
.splash-orbit {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(103, 232, 249, 0.25);
  transform: translate(-50%, -50%);
  animation: orbit-rotate linear infinite;
}
.splash-orbit-1 { width: 110px; height: 110px; animation-duration: 3s; }
.splash-orbit-2 {
  width: 140px; height: 140px;
  border-color: rgba(168, 85, 247, 0.22);
  animation-duration: 4.5s; animation-direction: reverse;
}
.splash-orbit-3 {
  width: 170px; height: 170px;
  border-color: rgba(251, 191, 36, 0.20);
  animation-duration: 6s;
}
.splash-electron {
  position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
}
.splash-orbit-2 .splash-electron { background: var(--purple-hi); box-shadow: 0 0 10px var(--purple-hi), 0 0 20px var(--purple-hi); }
.splash-orbit-3 .splash-electron { background: var(--gold-hi); box-shadow: 0 0 10px var(--gold-hi), 0 0 20px var(--gold-hi); }
.splash-title {
  font-size: 38px; font-weight: 900;
  letter-spacing: 0.20em;
  background: var(--grad-cyan);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2px;
}
.splash-tag {
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ============== TUTORIAL ============== */
.tutorial {
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  display: none;
}
.tutorial.tutorial-active { display: block; }
.tutorial-spot {
  position: absolute;
  border-radius: 24px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55),
    0 0 0 4px var(--accent),
    0 0 24px rgba(103, 232, 249, 0.7);
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.tutorial-spot.spot-atom {
  /* default for tap zone */
  width: 220px; height: 220px;
  border-radius: 50%;
}
.tutorial-card {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 28%;
  max-width: 80%;
  padding: 14px 18px;
  background: var(--bg-card-hi);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 24px rgba(103, 232, 249, 0.25);
  pointer-events: auto;
  text-align: center;
  animation: tut-pop 300ms ease-out;
}
@keyframes tut-pop {
  from { transform: translateX(-50%) translateY(8px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.tutorial-text {
  font-size: 16px; font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.tutorial-arrow {
  font-size: 22px;
  color: var(--accent);
  animation: arrow-bob 1.2s ease-in-out infinite;
}
@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}
.tutorial-skip {
  display: block;
  margin: 8px auto 0;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ============== CONFETTI ============== */
.confetti-container {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 70;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* ============== TOAST ============== */
.toast-stack {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  z-index: 90;
  width: 90%; max-width: 360px;
}
.toast {
  padding: 12px 16px;
  background: var(--grad-card);
  border: 1px solid var(--gold);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 18px rgba(251, 191, 36, 0.25);
  text-align: center;
  animation: toast-in 320ms cubic-bezier(0.4, 0, 0.2, 1), toast-out 400ms ease-in 2400ms forwards;
}
.toast strong { color: var(--gold-hi); }
@keyframes toast-in {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-12px); opacity: 0; }
}

/* ============== SETTINGS MODAL ============== */
.modal-settings { padding: 24px 22px 18px; }
.settings-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 20px;
  text-align: left;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-card-2);
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.setting-label { color: var(--text); }
.switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 24px;
}
.switch input {
  opacity: 0; width: 0; height: 0;
}
.switch-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: background 200ms, border-color 200ms;
}
.switch-slider::before {
  content: '';
  position: absolute;
  top: 2px; left: 3px;
  width: 16px; height: 16px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: transform 200ms, background 200ms;
}
.switch input:checked + .switch-slider {
  background: rgba(6, 182, 212, 0.22);
  border-color: var(--accent);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(20px);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.modal-btn-danger {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
  border: 1px solid var(--red);
}
.modal-btn-danger:active { background: rgba(248, 113, 113, 0.25); }
.modal-footer-links {
  margin-top: 12px;
  display: flex; justify-content: center; gap: 8px;
  font-size: 11px; color: var(--text-faint);
}
.modal-footer-links a { color: var(--text-dim); text-decoration: none; }
.modal-footer-links a:hover { color: var(--accent); }
.modal-footer-links .version { color: var(--text-faint); }

/* ============== FOCUS MODE ==============
   While the player is actively tapping the atom, fade out UI chrome so the
   atom + currency take center stage. Fades back in 1.5s after the last tap.
*/
.topbar-row,
.dm-strip,
.boost-strip,
.ad-floats,
.tap-hint,
#mockBanner {
  transition: opacity 480ms ease, transform 480ms ease;
}
body.focus-mode .topbar-row,
body.focus-mode .dm-strip,
body.focus-mode .boost-strip,
body.focus-mode .ad-floats,
body.focus-mode .tap-hint,
body.focus-mode #mockBanner {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
/* The whole bottom sheet fades out while tapping — keep its own slide transform
   (driven by --sheet-y) intact, so only opacity/interactivity change here. */
body.focus-mode .sheet { opacity: 0; pointer-events: none; }
/* Move chrome out of view so it doesn't even occupy clickable layout slot */
body.focus-mode .ad-floats { transform: translateX(40px); }
body.focus-mode #mockBanner { transform: translateY(80px); }
/* Ad buttons keep pointer-events:auto via `.ad-floats > *`; in focus mode they
   fade to opacity:0 but would still be tappable — kill that so a tap landing on
   an invisible ad button never fires a rewarded ad. */
body.focus-mode .ad-floats > * { pointer-events: none; }

/* Center the atom + currency emphasis when focused */
.app,
.currency-main,
.atom {
  transition: transform 480ms ease;
}
/* Emphasize MASS only (left block) — scaling the whole row pushed PER SEC off the right edge */
body.focus-mode .currency-main {
  transform: scale(1.08);
  transform-origin: left center;
}
body.focus-mode .atom {
  transform: scale(1.08);
}
body.focus-mode .atom:active {
  transform: scale(1.04);
}
body.focus-mode .stars-layer {
  opacity: 1.0;
  filter: brightness(1.15);
  transition: filter 480ms ease, opacity 480ms ease;
}
body:not(.focus-mode) .stars-layer {
  transition: filter 480ms ease, opacity 480ms ease;
}

/* ============== AD UI ============== */

/* Top-bar boost indicator (when 2× active) */
.boost-strip {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(103,232,249,0.18), rgba(168,85,247,0.18));
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 12px;
}
.boost-strip[hidden] { display: none; }
.boost-icon { color: var(--accent-hi); font-size: 14px; }
.boost-label { color: var(--text); font-weight: 600; flex: 1; }
.boost-time { color: var(--accent-hi); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Floating ad buttons (right edge of screen, sit just above the tab bar) */
.ad-floats {
  position: absolute;
  right: calc(8px + env(safe-area-inset-right, 0px));
  top: 188px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 6;
  pointer-events: none;
}
.ad-floats > * { pointer-events: auto; }
.ad-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px;
  background: linear-gradient(135deg, #4c1d95, #0e7490);
  color: var(--text);
  border-radius: 12px;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  border: 1px solid rgba(168, 85, 247, 0.5);
  font-size: 12px;
  text-align: left;
  animation: ad-bob 2.4s ease-in-out infinite;
  position: relative;
}
.ad-btn[hidden] { display: none; }
.ad-btn::before {
  content: 'AD';
  position: absolute; top: -8px; right: -6px;
  background: rgba(0,0,0,0.7);
  color: var(--accent-hi);
  font-size: 9px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(103,232,249,0.3);
}
.ad-btn-icon {
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ad-btn-body {
  display: flex; flex-direction: column; line-height: 1.1;
}
.ad-btn-line1 { font-size: 13px; }
.ad-btn-line2 {
  font-size: 9px; opacity: 0.65;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-top: 1px;
}
.ad-btn:active { transform: scale(0.95); }
.ad-btn-chest {
  background: linear-gradient(135deg, #0e7490, #7c3aed);
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  border-color: rgba(103, 232, 249, 0.5);
}
.ad-btn-boost.cooldown {
  background: var(--bg-card-2);
  color: var(--text-faint);
  border-color: var(--line);
  box-shadow: none;
  animation: none;
}
.ad-btn-boost.cooldown::before { display: none; }
@keyframes ad-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* "AD" pill inside modal buttons */
.modal-btn-ad {
  background: linear-gradient(135deg, #4c1d95, #0e7490);
  color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative;
  margin-bottom: 8px;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.ad-pill {
  background: rgba(0,0,0,0.5);
  color: var(--accent-hi);
  font-size: 10px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(103,232,249,0.3);
}

/* ============== MOCK AD MODAL (web only) ============== */
.mock-ad-bg {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 24px;
}
.mock-ad-panel {
  width: 100%; max-width: 360px;
  padding: 32px 24px;
  background: linear-gradient(135deg, #1d4ed8, #312e81);
  border-radius: 16px;
  text-align: center;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 60px rgba(99, 102, 241, 0.5);
}
.mock-ad-tag {
  display: inline-block;
  font-size: 10px; font-weight: 900;
  padding: 3px 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  letter-spacing: 0.15em;
  margin-bottom: 18px;
}
.mock-ad-body {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
  color: rgba(255,255,255,0.85);
}
.mock-ad-timer {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.mock-ad-btn {
  width: 100%;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  border-radius: 10px;
  font-size: 15px; font-weight: 700;
}
.mock-ad-btn-ready {
  background: #fff;
  color: #312e81;
}


/* ============================================================
   MULTIVERSE FEATURE
   ============================================================ */

/* --- topbar actions + Dark Matter strip --- */
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.dm-strip {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 6px 12px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 8px;
  font-size: 12px; color: var(--text-dim);
}
.dm-strip[hidden] { display: none; }
.dm-icon { width: 16px; height: 16px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
.dm-count { color: #e9d5ff; font-weight: 800; font-variant-numeric: tabular-nums; }
.dm-label { font-size: 11px; }
.dm-rate { color: var(--purple-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-synergy { margin-left: auto; font-size: 10px; color: var(--accent); white-space: nowrap; }

/* --- Collapse panel: The Collapser --- */
.collapser-card {
  background: var(--grad-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 4px 0 12px;
  transition: border-color 400ms, box-shadow 400ms;
}
.collapser-card.bh-formed {
  border-color: rgba(124,58,237,0.6);
  box-shadow: 0 0 22px rgba(124,58,237,0.20), inset 0 0 20px rgba(0,0,0,0.25);
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(124,58,237,0.15) 0%, transparent 70%),
    var(--grad-card);
}
.collapser-head { display: flex; align-items: center; gap: 10px; }
.collapser-icon { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.collapser-title { flex: 1; min-width: 0; }
.collapser-name { font-weight: 800; color: var(--text); font-size: 15px; }
.collapser-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.collapser-sub span { color: var(--purple-hi); font-weight: 700; }
.collapser-lvl {
  font-size: 11px; font-weight: 700; color: var(--accent-hi);
  background: rgba(103, 232, 249, 0.12); border: 1px solid var(--accent-deep);
  padding: 4px 8px; border-radius: 8px; white-space: nowrap;
}
.collapser-progress { margin-top: 14px; }
.collapser-upgrade {
  width: 100%; margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid var(--purple-deep);
  border-radius: 10px;
  color: var(--text); font-weight: 700; font-size: 13px;
  transition: transform 100ms, opacity 150ms, background 150ms;
}
.collapser-upgrade:active { transform: scale(0.98); }
.collapser-upgrade:disabled { opacity: 0.45; }
.collapser-upgrade-cost { font-size: 11px; color: var(--purple-hi); font-variant-numeric: tabular-nums; }

/* --- Collapse panel: the black-hole ritual --- */
.ritual-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124,58,237,0.18) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 0%, rgba(103,232,249,0.06) 0%, transparent 50%),
    var(--grad-card);
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 0 28px rgba(124,58,237,0.10);
}
.ritual-headline {
  font-size: 22px; font-weight: 900; letter-spacing: 0.18em;
  background: var(--grad-purple); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--purple-hi);
  animation: ritual-headline-glow 3s ease-in-out infinite;
}
@keyframes ritual-headline-glow {
  0%,100% { filter: drop-shadow(0 0 8px rgba(168,85,247,0.5)); }
  50%     { filter: drop-shadow(0 0 18px rgba(192,132,252,0.85)); }
}
.ritual-sub { font-size: 11px; color: var(--text-dim); margin: 6px 2px 14px; line-height: 1.5; }
.ritual-sub span { color: var(--gold-hi); font-weight: 700; }
.ritual-step { margin: 0 0 4px; }
.ritual-progress {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.08); margin-bottom: 8px;
}
.ritual-progress-fill {
  display: block; height: 100%; width: 0%;
  background: var(--grad-cyan); border-radius: 999px;
  transition: width 240ms ease;
}
.ritual-btn {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px;
  border-radius: 12px; border: 1px solid var(--line-hi);
  background: var(--bg-card);
  transition: transform 100ms, opacity 150ms, box-shadow 200ms;
}
.ritual-btn:active { transform: scale(0.98); }
.ritual-btn:disabled { opacity: 0.4; }
.ritual-btn-icon { font-size: 18px; }
.ritual-btn-text { font-weight: 800; font-size: 14px; color: var(--text); letter-spacing: 0.03em; }
.ritual-btn-sub { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ritual-btn-collapse:not(:disabled) {
  border-color: var(--accent); box-shadow: 0 0 18px rgba(103,232,249,0.25);
}
.ritual-btn-collapse:not(:disabled) .ritual-btn-icon { color: var(--accent-hi); }
.ritual-arrow { font-size: 11px; color: var(--purple-hi); margin: 8px 0; letter-spacing: 0.06em; }
.ritual-btn-ignite.armed:not(:disabled) {
  border-color: var(--gold); box-shadow: 0 0 22px rgba(251,191,36,0.4);
  background: rgba(251,191,36,0.10);
  animation: ignite-pulse 1.6s ease-in-out infinite;
}
.ritual-btn-ignite.armed .ritual-btn-icon { color: var(--gold-hi); }
@keyframes ignite-pulse {
  0%,100% { box-shadow: 0 0 18px rgba(251,191,36,0.35); }
  50%     { box-shadow: 0 0 34px rgba(251,191,36,0.6); }
}

/* ============================================================
   VIEW MANAGEMENT (universe ↔ multiverse)
   ============================================================ */
#multiverseScreen { display: none; }
body.view-multiverse #multiverseScreen { display: flex; }
body.view-multiverse .app { opacity: 0; pointer-events: none; }
/* dive-in: the universe app scales up from small as you enter */
.app { transform-origin: center 42%; }
body.diving-in .app { animation: dive-in 460ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dive-in {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ============================================================
   MULTIVERSE SCREEN
   ============================================================ */
.multiverse {
  position: fixed; inset: 0; z-index: 15;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 30%, #16093a 0%, var(--bg-0) 70%);
  overflow: hidden;
  animation: mv-fade 360ms ease;
}
@keyframes mv-fade { from { opacity: 0; } to { opacity: 1; } }
.mv-stars {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 60%, #c084fc, transparent),
    radial-gradient(2px 2px at 40% 80%, #67e8f9, transparent),
    radial-gradient(1px 1px at 85% 20%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #fde68a, transparent);
  background-size: 360px 360px;
  opacity: 0.5; pointer-events: none;
  animation: mv-stars-drift 120s linear infinite;
}
@keyframes mv-stars-drift { to { transform: translate(-360px, -180px); } }
.mv-hud {
  position: relative; z-index: 2;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 8px;
  text-align: center;
}
.mv-title {
  font-size: 14px; font-weight: 900; letter-spacing: 0.32em;
  color: var(--purple-hi); text-transform: uppercase;
  text-shadow: 0 0 24px rgba(192, 132, 252, 0.6);
}
.mv-stats { display: flex; justify-content: center; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.mv-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  min-width: 52px;
}
.mv-stat-num { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mv-stat-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.mv-stat-icon { width: 18px; height: 18px; object-fit: cover; border-radius: 4px; margin-bottom: 2px; opacity: 0.85; }
.mv-space {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
/* central black hole */
.mv-center {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
}
.mv-bh-core {
  position: absolute; inset: 22px;
  border-radius: 50%; background: #000;
  box-shadow: 0 0 30px 6px rgba(0,0,0,0.9), 0 0 60px 16px rgba(124,58,237,0.5);
}
.mv-bh-disk {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #fde68a, #a855f7, #06b6d4, #fde68a);
  filter: blur(3px); opacity: 0.85;
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 42%, #000 60%, transparent 64%);
          mask: radial-gradient(circle, transparent 30%, #000 42%, #000 60%, transparent 64%);
  animation: mv-disk-spin 8s linear infinite;
}
@keyframes mv-disk-spin { to { transform: rotate(360deg); } }
.mv-field { position: absolute; inset: 0; }
/* universe orbs along the spiral */
.mv-orb {
  position: absolute; width: 34px; height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; cursor: pointer;
  animation: mv-orb-float 4s ease-in-out infinite;
}
@keyframes mv-orb-float {
  0%,100% { margin-top: 0; }
  50%     { margin-top: -4px; }
}
.mv-orb-core {
  position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a5f3fc, #06b6d4 60%, #0e2a52 100%);
  box-shadow: 0 0 12px rgba(103,232,249,0.6);
  transition: box-shadow 200ms, transform 120ms;
}
.mv-orb:active .mv-orb-core { transform: scale(0.9); }
.mv-orb-num {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--text-dim); font-weight: 700; white-space: nowrap;
}
.mv-orb-active .mv-orb-core {
  background: radial-gradient(circle at 35% 30%, #fff, #c084fc 60%, #4c1d95 100%);
  box-shadow: 0 0 18px rgba(192,132,252,0.8);
}
.mv-orb-ready .mv-orb-core {
  background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 60%, #7c2d12 100%);
  box-shadow: 0 0 16px 2px rgba(251,191,36,0.7);
  animation: mv-ready-pulse 1.4s ease-in-out infinite;
}
@keyframes mv-ready-pulse {
  0%,100% { box-shadow: 0 0 14px 1px rgba(251,191,36,0.6); }
  50%     { box-shadow: 0 0 24px 5px rgba(251,191,36,0.95); }
}
.mv-orb-bh .mv-orb-core {
  background: radial-gradient(circle at 50% 50%, #000 38%, #7c3aed 60%, #06b6d4 100%);
  box-shadow: 0 0 16px 3px rgba(124,58,237,0.7);
}
.mv-foot {
  position: relative; z-index: 2;
  text-align: center; font-size: 11px; color: var(--text-faint);
  padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   OPENING SCRIPT
   ============================================================ */
.script-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 45%, #0c0626 0%, #000 75%);
  padding: 40px 28px;
}
.script-overlay.active { display: flex; }
.script-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.script-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 25% 20%, #fff, transparent),
    radial-gradient(1px 1px at 75% 70%, #c084fc, transparent),
    radial-gradient(1px 1px at 50% 90%, #67e8f9, transparent),
    radial-gradient(2px 2px at 90% 35%, #fde68a, transparent);
  background-size: 300px 300px; opacity: 0.25; pointer-events: none;
}

.script-line {
  position: relative; z-index: 2;
  max-width: 520px; text-align: center;
  font-size: 19px; line-height: 1.6; color: var(--text);
  white-space: pre-line;
  opacity: 0; transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
  text-shadow: 0 2px 20px rgba(124,58,237,0.5);
}
.script-line.show { opacity: 1; transform: translateY(0); }
.script-tap-hint {
  position: relative; z-index: 2; margin-top: 28px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 500ms ease;
}
.script-tap-hint.show {
  opacity: 1;
  animation: tap-hint-pulse 2.2s ease-in-out infinite;
}
@keyframes tap-hint-pulse { 0%,100% { color: rgba(255,255,255,0.35); } 50% { color: rgba(255,255,255,0.8); } }
.script-begin {
  position: relative; z-index: 2; margin-top: 36px;
  padding: 14px 44px; border-radius: 999px; border: 1px solid var(--purple);
  background: rgba(124,58,237,0.2); color: #fff; font-weight: 800;
  font-size: 15px; letter-spacing: 0.1em;
  opacity: 0; pointer-events: none; transition: opacity 500ms;
  box-shadow: var(--shadow-glow-purple);
}
.script-begin.show { opacity: 1; pointer-events: auto; animation: ignite-pulse 2s ease-in-out infinite; }
.script-skip {
  position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 18px; z-index: 2;
  background: none; border: none; color: var(--text-faint); font-size: 12px; letter-spacing: 0.1em;
}

/* ============================================================
   RITUAL FX OVERLAYS
   ============================================================ */
.fx { position: fixed; inset: 0; z-index: 1050; pointer-events: none; display: none; }
.fx.play { display: block; }

/* Supernova — star explosion that plays before the black-hole implosion */
.fx-supernova.play {
  animation: sn-bg 1.2s ease-out forwards;
}
@keyframes sn-bg {
  0%   { background: transparent; }
  10%  { background: rgba(253,186,116,0.30); }
  50%  { background: rgba(20,10,40,0.45); }
  100% { background: transparent; }
}
/* Central burst */
.fx-supernova.play::before {
  content: '';
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  animation: sn-burst 1.2s ease-out forwards;
}
@keyframes sn-burst {
  0%   { width: 4px; height: 4px; opacity: 0;
         background: radial-gradient(circle, #fff 0%, #fde68a 35%, #f97316 65%, transparent 88%);
         box-shadow: 0 0 0 0 rgba(255,255,255,0.95); }
  7%   { width: 88vmin; height: 88vmin; opacity: 1;
         box-shadow: 0 0 100px 50px rgba(253,230,138,0.55); }
  40%  { width: 96vmin; height: 96vmin; opacity: 0.65;
         box-shadow: 0 0 50px 20px rgba(249,115,22,0.25); }
  100% { width: 70vmin; height: 70vmin; opacity: 0; box-shadow: none; }
}
/* Expanding ring shockwave */
.fx-supernova.play::after {
  content: '';
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: transparent;
  animation: sn-ring 1.2s cubic-bezier(0.05,0.85,0.35,1) forwards;
}
@keyframes sn-ring {
  0%   { width: 8px; height: 8px; opacity: 1;
         box-shadow: 0 0 0 5px rgba(253,230,138,0.9), 0 0 0 12px rgba(249,115,22,0.55); }
  30%  { opacity: 0.85;
         box-shadow: 0 0 0 3px rgba(253,230,138,0.4), 0 0 0 7px rgba(249,115,22,0.3); }
  100% { width: 220vmin; height: 220vmin; opacity: 0;
         box-shadow: 0 0 0 1px rgba(249,115,22,0); }
}
.fx-bh.play::after {
  content: ''; position: absolute; top: 42%; left: 50%;
  width: 30px; height: 30px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #000; box-shadow: 0 0 0 0 rgba(124,58,237,0.8);
  animation: bh-implode 1.3s ease-out forwards;
}
@keyframes bh-implode {
  0%   { width: 120vmax; height: 120vmax; background: rgba(124,58,237,0.0); box-shadow: 0 0 60px 30px rgba(124,58,237,0.0); }
  55%  { width: 60px; height: 60px; background: #1a0b2e; box-shadow: 0 0 80px 30px rgba(124,58,237,0.7); }
  100% { width: 26px; height: 26px; background: #000; box-shadow: 0 0 50px 16px rgba(124,58,237,0.6); }
}
.fx-bloom.play::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff, #fde68a 30%, #a855f7 60%, transparent 75%);
  animation: bloom-out 1.0s ease-out forwards;
}
@keyframes bloom-out {
  0%   { width: 10px; height: 10px; opacity: 1; }
  100% { width: 160vmax; height: 160vmax; opacity: 0; }
}

/* ============================================================
   DEV PANEL
   ============================================================ */
.dev-toggle {
  position: fixed; bottom: 80px; right: 12px; z-index: 1200;
  background: rgba(239,68,68,0.85); color: #fff;
  border: none; border-radius: 6px; padding: 5px 9px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.1em;
  cursor: pointer; backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.dev-panel {
  position: fixed; bottom: 120px; right: 12px; z-index: 1200;
  background: rgba(10,14,39,0.96); border: 1px solid rgba(239,68,68,0.4);
  border-radius: 12px; padding: 12px; width: 210px;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  display: none;
}
.dev-panel.open { display: block; }
.dev-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 14px; cursor: pointer; line-height: 1;
}
.dev-title {
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em;
  color: rgba(239,68,68,0.85); margin-bottom: 10px;
}
.dev-row { display: flex; gap: 6px; margin-bottom: 8px; }
.dev-input {
  flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px; color: #fff; font-size: 13px; padding: 6px 8px;
  outline: none; min-width: 0;
}
.dev-input:focus { border-color: rgba(239,68,68,0.5); }
.dev-btn {
  background: rgba(239,68,68,0.8); border: none; border-radius: 7px;
  color: #fff; font-size: 12px; font-weight: 700; padding: 6px 10px;
  cursor: pointer; white-space: nowrap;
}
.dev-presets { display: flex; gap: 5px; flex-wrap: wrap; }
.dev-preset {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: rgba(255,255,255,0.7);
  font-size: 11px; padding: 4px 8px; cursor: pointer; flex: 1;
}
.dev-preset:active { background: rgba(239,68,68,0.3); }
.dev-preset-dm {
  background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.3);
  border-radius: 6px; color: var(--purple-hi);
  font-size: 11px; padding: 4px 8px; cursor: pointer; flex: 1;
}
.dev-preset-dm:active { background: rgba(168,85,247,0.3); }

/* ============================================================
   STAGE BACKGROUND IMAGES
   Applied to .tap-zone; the background darkens at full opacity so
   a semi-transparent overlay keeps text readable.
   ============================================================ */
.tap-zone {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.tap-zone::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,8,24,0.50) 0%, rgba(5,8,24,0.15) 40%, rgba(5,8,24,0.65) 100%);
  pointer-events: none; z-index: 1;
}
/* Keep atom and controls above the overlay */
.tap-zone .orbit, .tap-zone .atom, .tap-zone .tap-hint, .tap-zone .floats,
.tap-zone .atom-burst, .tap-zone #atomBtn { z-index: 2; }

#tapZone[data-stage="1"]  { background-image: url('assets/stages/stage_1_atoms.png'); }
#tapZone[data-stage="2"]  { background-image: url('assets/stages/stage_2_plasma.png'); }
#tapZone[data-stage="3"]  { background-image: url('assets/stages/stage_3_gas_cloud.png'); }
#tapZone[data-stage="4"]  { background-image: url('assets/stages/stage_4_gas_cluster.png'); }
#tapZone[data-stage="5"]  { background-image: url('assets/stages/stage_5_star.png'); }
#tapZone[data-stage="6"]  { background-image: url('assets/stages/stage_6_star_system.png'); }
#tapZone[data-stage="7"]  { background-image: url('assets/stages/stage_7_super_massive_star.png'); }
#tapZone[data-stage="8"]  { background-image: url('assets/stages/stage_8_supernova.png'); }
#tapZone[data-stage="9"]  { background-image: url('assets/stages/stage_9_stellar_nursery.png'); }
#tapZone[data-stage="10"] { background-image: url('assets/stages/stage_10_galaxy.png'); }
#tapZone[data-stage="11"] { background-image: url('assets/stages/stage_11_galaxy_group.png'); }
#tapZone[data-stage="12"] { background-image: url('assets/stages/stage_12_galaxy_cluster.png'); }
#tapZone[data-stage="13"] { background-image: url('assets/stages/stage_13_matured_universe.png'); }

/* ============================================================
   UNIVERSE ORB IMAGES
   ============================================================ */
.mv-orb-core {
  background-image: url('assets/orbs/orb_normal.png');
  background-size: cover;
  background-position: center;
  background: none; /* clear gradient, replaced by img below */
  background-image: url('assets/orbs/orb_normal.png');
}
.mv-orb-active .mv-orb-core {
  background-image: url('assets/orbs/orb_normal.png');
  background-size: cover; background-position: center;
}
.mv-orb-ready .mv-orb-core {
  background-image: url('assets/orbs/orb_ready.png');
  background-size: cover; background-position: center;
}
.mv-orb-bh .mv-orb-core {
  background-image: url('assets/orbs/orb_blackhole.png');
  background-size: cover; background-position: center;
}

/* ============================================================
   STAGE-AWARE ATOM VISUALS
   #tapZone[data-stage="N"] drives every visual tier.
   Transitions make stage-ups feel like upgrades.
   ============================================================ */
.atom-nucleus { transition: width .7s ease, height .7s ease, box-shadow .7s ease; }
.atom-glow    { transition: width .7s ease, height .7s ease, background .7s ease; }
.atom-electron { transition: opacity .5s ease, width .4s ease, height .4s ease; }
.orbit         { transition: border-color .7s ease; }

/* ── Stage 1: ATOMS — blue/cyan nucleus, active electrons ── */
#tapZone[data-stage="1"] .atom-nucleus {
  background: radial-gradient(circle at 30% 30%, #e0f2fe 0%, #38bdf8 30%, #0284c7 65%, #0c4a6e 100%);
  box-shadow: 0 0 25px rgba(56,189,248,.85), 0 0 55px rgba(14,165,233,.5), inset 0 0 10px rgba(255,255,255,.4);
}
#tapZone[data-stage="1"] .atom-glow {
  background: radial-gradient(circle, rgba(56,189,248,.28) 0%, transparent 70%);
}

/* ── Stage 2: PLASMA — hot cyan-white, electrons spin fast ── */
#tapZone[data-stage="2"] .atom-nucleus {
  background: radial-gradient(circle at 30% 30%, #fff 0%, #a5f3fc 20%, #06b6d4 55%, #0e7490 100%);
  box-shadow: 0 0 35px rgba(6,182,212,.9), 0 0 80px rgba(6,182,212,.5), inset 0 0 14px rgba(255,255,255,.55);
}
#tapZone[data-stage="2"] .atom-glow {
  background: radial-gradient(circle, rgba(6,182,212,.32) 0%, transparent 70%);
}
#tapZone[data-stage="2"] .atom-e1 { animation-duration: 2s; }
#tapZone[data-stage="2"] .atom-e2 { animation-duration: 3s; }
#tapZone[data-stage="2"] .atom-e3 { animation-duration: 4.5s; }

/* ── Stages 3–4: GAS CLOUD / GAS CLUSTER — purple nebula, drifting electrons ── */
#tapZone[data-stage="3"] .atom-nucleus,
#tapZone[data-stage="4"] .atom-nucleus {
  width: 88px; height: 88px;
  background: radial-gradient(circle at 35% 35%, rgba(216,180,254,.9) 0%, rgba(167,139,250,.85) 30%, rgba(109,40,217,.9) 65%, rgba(46,16,101,1) 100%);
  box-shadow: 0 0 45px rgba(167,139,250,.7), 0 0 90px rgba(124,58,237,.4), 0 0 130px rgba(124,58,237,.2), inset 0 0 20px rgba(255,255,255,.2);
}
#tapZone[data-stage="4"] .atom-nucleus { width: 100px; height: 100px; }
#tapZone[data-stage="3"] .atom-glow,
#tapZone[data-stage="4"] .atom-glow {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(167,139,250,.22) 0%, rgba(124,58,237,.1) 40%, transparent 70%);
}
#tapZone[data-stage="3"] .atom-e1,
#tapZone[data-stage="3"] .atom-e2,
#tapZone[data-stage="3"] .atom-e3 { opacity: .3; animation-duration: 18s; }
#tapZone[data-stage="3"] .atom-e2  { animation-duration: 26s; }
#tapZone[data-stage="3"] .atom-e3  { animation-duration: 34s; }
#tapZone[data-stage="4"] .atom-e1,
#tapZone[data-stage="4"] .atom-e2,
#tapZone[data-stage="4"] .atom-e3  { opacity: .15; animation-duration: 28s; }
#tapZone[data-stage="3"] .orbit,
#tapZone[data-stage="4"] .orbit    { border-color: rgba(167,139,250,.1); }

/* ── Stages 5–6: STAR / STAR SYSTEM — solar corona rays ── */
#tapZone[data-stage="5"] .atom::before,
#tapZone[data-stage="6"] .atom::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 210px; height: 210px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(253,230,138,.7)  0deg,  transparent 16deg,
    rgba(253,230,138,.55) 45deg, transparent 61deg,
    rgba(253,230,138,.7)  90deg, transparent 106deg,
    rgba(253,230,138,.55) 135deg,transparent 151deg,
    rgba(253,230,138,.7)  180deg,transparent 196deg,
    rgba(253,230,138,.55) 225deg,transparent 241deg,
    rgba(253,230,138,.7)  270deg,transparent 286deg,
    rgba(253,230,138,.55) 315deg,transparent 331deg,
    rgba(253,230,138,.7)  360deg
  );
  -webkit-mask: radial-gradient(transparent 42px, black 44px);
  mask:         radial-gradient(transparent 42px, black 44px);
  animation: st-rays 9s linear infinite;
  pointer-events: none; z-index: 0;
}
@keyframes st-rays { to { transform: translate(-50%,-50%) rotate(360deg); } }

#tapZone[data-stage="5"] .atom-nucleus,
#tapZone[data-stage="6"] .atom-nucleus {
  width: 84px; height: 84px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fef9c3 18%, #fde68a 38%, #fbbf24 62%, #f59e0b 100%);
  box-shadow: 0 0 45px rgba(255,255,255,.9), 0 0 90px rgba(251,191,36,.7), 0 0 150px rgba(251,191,36,.4), inset 0 0 18px rgba(255,255,255,.6);
}
#tapZone[data-stage="5"] .atom-glow,
#tapZone[data-stage="6"] .atom-glow {
  width: 210px; height: 210px;
  background: radial-gradient(circle, rgba(253,230,138,.28) 0%, rgba(251,191,36,.12) 45%, transparent 70%);
}
#tapZone[data-stage="5"] .atom-e1,
#tapZone[data-stage="5"] .atom-e2,
#tapZone[data-stage="5"] .atom-e3 { opacity: 0; }
/* Stage 6: two "planet" electrons */
#tapZone[data-stage="6"] .atom-e1  { opacity: 0; }
#tapZone[data-stage="6"] .atom-e2  { width: 10px; height: 10px; background: #4ade80; box-shadow: 0 0 8px #4ade80, 0 0 18px #4ade80; opacity: .9; animation-duration: 10s; }
#tapZone[data-stage="6"] .atom-e3  { width: 8px;  height: 8px;  background: #f97316; box-shadow: 0 0 8px #f97316; opacity: .7; animation-duration: 16s; }
#tapZone[data-stage="5"] .orbit,
#tapZone[data-stage="6"] .orbit    { border-color: rgba(251,191,36,.1); }

/* ── Stage 7: SUPER MASSIVE STAR — red giant, intense pulse ── */
#tapZone[data-stage="7"] .atom::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 230px; height: 230px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(251,113,133,.85) 0deg,  transparent 14deg,
    rgba(251,113,133,.65) 45deg, transparent 59deg,
    rgba(251,113,133,.85) 90deg, transparent 104deg,
    rgba(251,113,133,.65) 135deg,transparent 149deg,
    rgba(251,113,133,.85) 180deg,transparent 194deg,
    rgba(251,113,133,.65) 225deg,transparent 239deg,
    rgba(251,113,133,.85) 270deg,transparent 284deg,
    rgba(251,113,133,.65) 315deg,transparent 329deg,
    rgba(251,113,133,.85) 360deg
  );
  -webkit-mask: radial-gradient(transparent 50px, black 52px);
  mask:         radial-gradient(transparent 50px, black 52px);
  animation: st-rays 5s linear infinite;
  pointer-events: none; z-index: 0;
}
#tapZone[data-stage="7"] .atom-nucleus {
  width: 104px; height: 104px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fecaca 14%, #fb7185 33%, #e11d48 62%, #881337 100%);
  box-shadow: 0 0 55px rgba(255,80,80,.9), 0 0 110px rgba(225,29,72,.7), 0 0 175px rgba(225,29,72,.4), inset 0 0 22px rgba(255,255,255,.5);
  animation: supergiant-pulse 1.5s ease-in-out infinite;
}
@keyframes supergiant-pulse {
  0%,100% { box-shadow: 0 0 55px rgba(255,80,80,.9),  0 0 110px rgba(225,29,72,.7), 0 0 175px rgba(225,29,72,.4), inset 0 0 22px rgba(255,255,255,.5); }
  50%     { box-shadow: 0 0 80px rgba(255,140,140,1), 0 0 160px rgba(225,29,72,.9), 0 0 240px rgba(225,29,72,.5), inset 0 0 22px rgba(255,255,255,.7); }
}
#tapZone[data-stage="7"] .atom-glow {
  width: 230px; height: 230px;
  background: radial-gradient(circle, rgba(251,113,133,.32) 0%, rgba(225,29,72,.14) 45%, transparent 70%);
}
#tapZone[data-stage="7"] .atom-e1,
#tapZone[data-stage="7"] .atom-e2,
#tapZone[data-stage="7"] .atom-e3  { opacity: 0; }
#tapZone[data-stage="7"] .orbit    { border-color: rgba(251,113,133,.12); }

/* ── Stage 8: SUPER NOVA — small dark core, expanding ring ── */
#tapZone[data-stage="8"] .atom::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 3px solid rgba(253,186,116,.55);
  box-shadow: 0 0 32px rgba(249,115,22,.6), inset 0 0 32px rgba(249,115,22,.3);
  animation: sn-ring-pulse 2s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes sn-ring-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);   opacity: .7; }
  50%     { transform: translate(-50%,-50%) scale(1.09); opacity: 1;  }
}
#tapZone[data-stage="8"] .atom-nucleus {
  width: 38px; height: 38px;
  background: radial-gradient(circle, #fff 0%, #fed7aa 28%, #f97316 58%, #7c2d12 100%);
  box-shadow: 0 0 22px rgba(249,115,22,.9), 0 0 55px rgba(249,115,22,.5);
  animation: sn-core-pulse 1.2s ease-in-out infinite;
}
@keyframes sn-core-pulse {
  0%,100% { box-shadow: 0 0 22px rgba(249,115,22,.9), 0 0 55px rgba(249,115,22,.5); }
  50%     { box-shadow: 0 0 38px rgba(255,200,100,1),  0 0 85px rgba(249,115,22,.7); }
}
#tapZone[data-stage="8"] .atom-glow { background: radial-gradient(circle, rgba(249,115,22,.15) 0%, transparent 70%); }
#tapZone[data-stage="8"] .atom-e1,
#tapZone[data-stage="8"] .atom-e2,
#tapZone[data-stage="8"] .atom-e3  { opacity: 0; }
#tapZone[data-stage="8"] .orbit    { border-color: rgba(249,115,22,.12); }

/* ── Stage 9: STELLAR NURSERY — scattered newborn stars via box-shadow ── */
#tapZone[data-stage="9"] .atom-nucleus {
  width: 46px; height: 46px;
  background: radial-gradient(circle, #fff 0%, #e0e7ff 38%, #818cf8 68%, #3730a3 100%);
  box-shadow:
    0 0 22px rgba(129,140,248,.8), 0 0 55px rgba(99,102,241,.4),
    -56px -28px 0 -6px rgba(253,230,138,.95),
     56px -28px 0 -7px rgba(167,243,208,.9),
    -34px  56px 0 -8px rgba(253,186,116,.9),
     50px  46px 0 -6px rgba(216,180,254,.9),
    -66px  18px 0 -9px rgba(147,197,253,.8),
     42px -62px 0 -7px rgba(252,211,77,.8),
      2px -68px 0 -8px rgba(167,243,208,.75),
     68px  10px 0 -9px rgba(248,180,180,.8);
}
#tapZone[data-stage="9"] .atom-glow {
  width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(129,140,248,.18) 0%, transparent 70%);
}
#tapZone[data-stage="9"] .atom-e1,
#tapZone[data-stage="9"] .atom-e2,
#tapZone[data-stage="9"] .atom-e3  { opacity: 0; }
#tapZone[data-stage="9"] .orbit    { border-color: rgba(129,140,248,.1); }

/* ── Stage 10: GALAXY — spiral arm via conic-gradient ── */
#tapZone[data-stage="10"] .atom::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 190px; height: 190px;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg,
    rgba(167,139,250,.65) 28deg, rgba(196,181,253,.3) 55deg, transparent 82deg,
    transparent 180deg,
    rgba(167,139,250,.55) 208deg, rgba(196,181,253,.25) 235deg, transparent 262deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(transparent 28px, rgba(0,0,0,.5) 30px, black 52%, rgba(0,0,0,.3) 78%, transparent 90%);
  mask:         radial-gradient(transparent 28px, rgba(0,0,0,.5) 30px, black 52%, rgba(0,0,0,.3) 78%, transparent 90%);
  animation: gx-spin 14s linear infinite;
  pointer-events: none; z-index: 0;
}
@keyframes gx-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
#tapZone[data-stage="10"] .atom-nucleus {
  width: 58px; height: 58px;
  background: radial-gradient(circle, #fff 0%, #ede9fe 28%, #8b5cf6 58%, #4c1d95 100%);
  box-shadow: 0 0 32px rgba(139,92,246,.85), 0 0 75px rgba(109,40,217,.5), 0 0 130px rgba(109,40,217,.22), inset 0 0 14px rgba(255,255,255,.5);
}
#tapZone[data-stage="10"] .atom-glow {
  width: 205px; height: 205px;
  background: radial-gradient(circle, rgba(139,92,246,.22) 0%, rgba(109,40,217,.1) 45%, transparent 70%);
}
#tapZone[data-stage="10"] .atom-e1,
#tapZone[data-stage="10"] .atom-e2,
#tapZone[data-stage="10"] .atom-e3  { opacity: 0; }
#tapZone[data-stage="10"] .orbit   { border-color: rgba(139,92,246,.12); animation-duration: 28s; }

/* ── Stages 11–13: GALAXY GROUP / CLUSTER / MATURED UNIVERSE ── */
#tapZone[data-stage="11"] .atom::before,
#tapZone[data-stage="12"] .atom::before,
#tapZone[data-stage="13"] .atom::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 210px; height: 210px;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg,
    rgba(232,121,249,.75) 22deg, rgba(250,204,254,.4) 48deg, transparent 75deg,
    transparent 180deg,
    rgba(232,121,249,.65) 202deg, rgba(250,204,254,.35) 228deg, transparent 255deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(transparent 26px, rgba(0,0,0,.45) 28px, black 54%, rgba(0,0,0,.3) 80%, transparent 92%);
  mask:         radial-gradient(transparent 26px, rgba(0,0,0,.45) 28px, black 54%, rgba(0,0,0,.3) 80%, transparent 92%);
  animation: gx-spin 11s linear infinite;
  pointer-events: none; z-index: 0;
}
#tapZone[data-stage="11"] .atom-nucleus,
#tapZone[data-stage="12"] .atom-nucleus,
#tapZone[data-stage="13"] .atom-nucleus {
  background: radial-gradient(circle, #fff 0%, #fdf4ff 18%, #e879f9 44%, #86198f 78%, #2e1065 100%);
}
#tapZone[data-stage="11"] .atom-nucleus {
  width: 60px; height: 60px;
  box-shadow: 0 0 34px rgba(232,121,249,.75), 0 0 80px rgba(168,85,247,.45), 0 0 140px rgba(88,28,135,.25), inset 0 0 14px rgba(255,255,255,.5);
}
#tapZone[data-stage="12"] .atom-nucleus {
  width: 70px; height: 70px;
  box-shadow: 0 0 40px rgba(232,121,249,.8),  0 0 95px rgba(168,85,247,.5),  0 0 165px rgba(88,28,135,.3),  inset 0 0 16px rgba(255,255,255,.55);
}
#tapZone[data-stage="13"] .atom-nucleus {
  width: 80px; height: 80px;
  animation: cosmic-pulse 2s ease-in-out infinite;
}
@keyframes cosmic-pulse {
  0%,100% { box-shadow: 0 0 48px rgba(232,121,249,.85), 0 0 110px rgba(168,85,247,.55), 0 0 190px rgba(88,28,135,.35), inset 0 0 18px rgba(255,255,255,.6); }
  50%     { box-shadow: 0 0 70px rgba(240,171,252,1),   0 0 150px rgba(192,132,252,.75), 0 0 250px rgba(88,28,135,.5),  inset 0 0 22px rgba(255,255,255,.8); }
}
#tapZone[data-stage="11"] .atom-glow,
#tapZone[data-stage="12"] .atom-glow,
#tapZone[data-stage="13"] .atom-glow {
  width: 215px; height: 215px;
  background: radial-gradient(circle, rgba(232,121,249,.2) 0%, rgba(168,85,247,.09) 45%, transparent 70%);
}
#tapZone[data-stage="11"] .atom-e1, #tapZone[data-stage="11"] .atom-e2, #tapZone[data-stage="11"] .atom-e3,
#tapZone[data-stage="12"] .atom-e1, #tapZone[data-stage="12"] .atom-e2, #tapZone[data-stage="12"] .atom-e3,
#tapZone[data-stage="13"] .atom-e1, #tapZone[data-stage="13"] .atom-e2, #tapZone[data-stage="13"] .atom-e3 { opacity: 0; }
#tapZone[data-stage="11"] .orbit,
#tapZone[data-stage="12"] .orbit,
#tapZone[data-stage="13"] .orbit { border-color: rgba(232,121,249,.1); animation-duration: 22s; }

/* ============================================================
   TAP VISUAL SYSTEM  (.tv-*)
   Each stage tier has its own child elements inside #atomBtn.
   ============================================================ */

/* ── Shared base ── */
.tv-core {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(var(--nscale,1));
  z-index: 2;
}
.tv-halo {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(var(--nscale,1));
  pointer-events: none; z-index: -1;
}
.tv-rays, .tv-arms {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none; z-index: 0;
}

/* ── ATOM (stage 1) ── */
.tv-atom-core {
  width: 68px; height: 68px;
  background: radial-gradient(circle at 30% 30%, #e0f2fe 0%, #38bdf8 30%, #0284c7 65%, #0c4a6e 100%);
  box-shadow: 0 0 22px rgba(56,189,248,.85), 0 0 50px rgba(14,165,233,.5), inset 0 0 10px rgba(255,255,255,.4);
  animation: nucleus-pulse 2.5s ease-in-out infinite;
}
.tv-halo {
  width: 156px; height: 156px;
  background: radial-gradient(circle, rgba(56,189,248,.25) 0%, transparent 70%);
}
.tv-e {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; border-radius: 50%; z-index: 3;
}
.tv-e1 { background: var(--accent);    box-shadow: 0 0 10px var(--accent),    0 0 20px var(--accent);    animation: electron-orbit-1 4s linear infinite; }
.tv-e2 { background: var(--purple-hi); box-shadow: 0 0 10px var(--purple-hi), 0 0 20px var(--purple-hi); animation: electron-orbit-2 6s linear infinite; }
.tv-e3 { background: var(--gold-hi);   box-shadow: 0 0 10px var(--gold-hi),   0 0 20px var(--gold-hi);   animation: electron-orbit-3 8s linear infinite; }

/* ── PLASMA (stage 2) ── */
.tv-plasma-core {
  width: 72px; height: 72px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #a5f3fc 20%, #06b6d4 55%, #0e7490 100%);
  box-shadow: 0 0 35px rgba(6,182,212,.9), 0 0 80px rgba(6,182,212,.5), inset 0 0 14px rgba(255,255,255,.55);
  animation: nucleus-pulse 2s ease-in-out infinite;
}
.tv-halo--plasma {
  width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(6,182,212,.28) 0%, transparent 70%);
}
.tv-e--hot.tv-e1 { animation-duration: 2s; }
.tv-e--hot.tv-e2 { animation-duration: 3s; }
.tv-e--hot.tv-e3 { animation-duration: 4.5s; }

/* ── GAS CLOUD (stage 3) ── */
.tv-gas-core {
  width: 90px; height: 90px;
  background: radial-gradient(circle at 35% 35%, rgba(216,180,254,.9) 0%, rgba(167,139,250,.8) 30%, rgba(109,40,217,.9) 65%, rgba(46,16,101,1) 100%);
  box-shadow: 0 0 45px rgba(167,139,250,.7), 0 0 90px rgba(124,58,237,.4), 0 0 130px rgba(124,58,237,.2), inset 0 0 20px rgba(255,255,255,.2);
  animation: nucleus-pulse 4s ease-in-out infinite;
}
.tv-wisp {
  position: absolute;
  border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
  pointer-events: none; z-index: 1;
}
.tv-wisp-1 {
  width: 80px; height: 50px;
  background: radial-gradient(ellipse, rgba(167,139,250,.5) 0%, transparent 70%);
  top: 12px; left: 6px;
  animation: wisp-a 10s ease-in-out infinite;
}
.tv-wisp-2 {
  width: 65px; height: 45px;
  background: radial-gradient(ellipse, rgba(94,234,212,.4) 0%, transparent 70%);
  top: 65px; left: 72px;
  animation: wisp-b 13s ease-in-out infinite;
}
.tv-wisp-3 {
  width: 70px; height: 38px;
  background: radial-gradient(ellipse, rgba(196,181,253,.45) 0%, transparent 70%);
  bottom: 16px; left: 10px;
  animation: wisp-c 9s ease-in-out infinite;
}
@keyframes wisp-a {
  0%,100% { transform: translate(0,0) rotate(0deg);  opacity: .55; }
  40%     { transform: translate(7px,-8px) rotate(5deg);  opacity: .8; }
  70%     { transform: translate(-5px,5px) rotate(-3deg); opacity: .45; }
}
@keyframes wisp-b {
  0%,100% { transform: translate(0,0); opacity: .45; }
  50%     { transform: translate(-8px,6px); opacity: .7; }
}
@keyframes wisp-c {
  0%,100% { transform: translate(0,0); opacity: .5; }
  45%     { transform: translate(6px,-6px); opacity: .78; }
}

/* ── GAS CLUSTER (stage 4) ── */
.tv-gascluster-core {
  width: 72px; height: 72px;
  background: radial-gradient(circle at 35% 35%, rgba(216,180,254,.9) 0%, rgba(167,139,250,.8) 30%, rgba(109,40,217,.9) 65%, rgba(46,16,101,1) 100%);
  box-shadow: 0 0 40px rgba(167,139,250,.7), 0 0 80px rgba(124,58,237,.4), inset 0 0 15px rgba(255,255,255,.2);
  animation: nucleus-pulse 3.5s ease-in-out infinite;
}
.tv-blob {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.5) 0%, rgba(124,58,237,.22) 50%, transparent 75%);
  pointer-events: none; z-index: 1;
  animation: blob-float 7s ease-in-out infinite;
}
.tv-blob-1 { width: 48px; height: 48px; top: calc(50% - 68px); left: calc(50% - 66px); animation-delay: 0s; }
.tv-blob-2 { width: 44px; height: 44px; top: calc(50% - 64px); left: calc(50% + 22px); animation-delay: 1.8s; }
.tv-blob-3 { width: 52px; height: 38px; top: calc(50% + 28px); left: calc(50% + 18px); animation-delay: 3.2s; }
.tv-blob-4 { width: 38px; height: 48px; top: calc(50% + 24px); left: calc(50% - 68px); animation-delay: 5s; }
@keyframes blob-float {
  0%,100% { transform: scale(1);    opacity: .65; }
  50%     { transform: scale(1.15); opacity: .9; }
}

/* ── STAR (stage 5) ── */
.tv-rays--star {
  width: 210px; height: 210px;
  background: conic-gradient(
    rgba(253,230,138,.72) 0deg,   transparent 14deg,
    rgba(253,230,138,.55) 45deg,  transparent 59deg,
    rgba(253,230,138,.72) 90deg,  transparent 104deg,
    rgba(253,230,138,.55) 135deg, transparent 149deg,
    rgba(253,230,138,.72) 180deg, transparent 194deg,
    rgba(253,230,138,.55) 225deg, transparent 239deg,
    rgba(253,230,138,.72) 270deg, transparent 284deg,
    rgba(253,230,138,.55) 315deg, transparent 329deg,
    rgba(253,230,138,.72) 360deg
  );
  -webkit-mask: radial-gradient(transparent 42px, black 44px);
  mask:         radial-gradient(transparent 42px, black 44px);
  animation: tv-rays-spin 10s linear infinite;
}
@keyframes tv-rays-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.tv-star-core {
  width: 84px; height: 84px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fef9c3 18%, #fde68a 38%, #fbbf24 62%, #f59e0b 100%);
  box-shadow: 0 0 45px rgba(255,255,255,.9), 0 0 90px rgba(251,191,36,.7), 0 0 150px rgba(251,191,36,.4), inset 0 0 18px rgba(255,255,255,.6);
  animation: nucleus-pulse 2.5s ease-in-out infinite;
}
.tv-halo--star {
  width: 210px; height: 210px;
  background: radial-gradient(circle, rgba(253,230,138,.25) 0%, rgba(251,191,36,.1) 45%, transparent 70%);
}

/* ── STAR SYSTEM (stage 6) — star + 2 orbiting planets ── */
.tv-planet {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; z-index: 3;
}
.tv-planet-1 {
  width: 10px; height: 10px;
  background: #4ade80; box-shadow: 0 0 8px #4ade80, 0 0 16px #4ade80;
  animation: electron-orbit-2 10s linear infinite;
}
.tv-planet-2 {
  width: 8px; height: 8px;
  background: #f97316; box-shadow: 0 0 6px #f97316;
  animation: electron-orbit-3 16s linear infinite;
}

/* ── SUPER MASSIVE STAR (stage 7) ── */
.tv-rays--giant {
  width: 240px; height: 240px;
  background: conic-gradient(
    rgba(251,113,133,.85) 0deg,   transparent 13deg,
    rgba(251,113,133,.65) 45deg,  transparent 58deg,
    rgba(251,113,133,.85) 90deg,  transparent 103deg,
    rgba(251,113,133,.65) 135deg, transparent 148deg,
    rgba(251,113,133,.85) 180deg, transparent 193deg,
    rgba(251,113,133,.65) 225deg, transparent 238deg,
    rgba(251,113,133,.85) 270deg, transparent 283deg,
    rgba(251,113,133,.65) 315deg, transparent 328deg,
    rgba(251,113,133,.85) 360deg
  );
  -webkit-mask: radial-gradient(transparent 52px, black 54px);
  mask:         radial-gradient(transparent 52px, black 54px);
  animation: tv-rays-spin 5s linear infinite;
}
.tv-giant-core {
  width: 104px; height: 104px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fecaca 14%, #fb7185 33%, #e11d48 62%, #881337 100%);
  box-shadow: 0 0 55px rgba(255,80,80,.9), 0 0 110px rgba(225,29,72,.7), 0 0 175px rgba(225,29,72,.4), inset 0 0 22px rgba(255,255,255,.5);
  animation: supergiant-pulse 1.5s ease-in-out infinite;
}
.tv-halo--giant {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(251,113,133,.3) 0%, rgba(225,29,72,.12) 45%, transparent 70%);
}

/* ── SUPER NOVA (stage 8) ── */
.tv-sn-core {
  width: 38px; height: 38px;
  background: radial-gradient(circle, #fff 0%, #fed7aa 28%, #f97316 58%, #7c2d12 100%);
  box-shadow: 0 0 22px rgba(249,115,22,.9), 0 0 55px rgba(249,115,22,.5);
  animation: sn-core-pulse 1.2s ease-in-out infinite;
}
.tv-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: none; z-index: 1;
}
.tv-ring-1 {
  width: 150px; height: 150px;
  border: 2px solid rgba(253,186,116,.6);
  box-shadow: 0 0 18px rgba(249,115,22,.5), inset 0 0 18px rgba(249,115,22,.25);
  animation: sn-ring-pulse 2s ease-in-out infinite;
}
.tv-ring-2 {
  width: 210px; height: 210px;
  border: 1px solid rgba(253,186,116,.3);
  box-shadow: 0 0 12px rgba(249,115,22,.3);
  animation: sn-ring-pulse 2s ease-in-out infinite 0.6s;
}
@keyframes sn-ring-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);   opacity: .7; }
  50%     { transform: translate(-50%,-50%) scale(1.07); opacity: 1; }
}

/* ── STELLAR NURSERY (stage 9) ── */
.tv-nursery-hub {
  width: 44px; height: 44px;
  background: radial-gradient(circle, #fff 0%, #e0e7ff 35%, #818cf8 68%, #3730a3 100%);
  box-shadow: 0 0 20px rgba(129,140,248,.8), 0 0 50px rgba(99,102,241,.4), inset 0 0 10px rgba(255,255,255,.5);
  animation: nucleus-pulse 2s ease-in-out infinite;
}
.tv-baby {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 3;
  animation: baby-twinkle 2.5s ease-in-out infinite;
}
.tv-b1 { width: 10px; height: 10px; top: 14px;  left: 26px;  background: #fde68a; box-shadow: 0 0 6px #fde68a, 0 0 14px #fde68a; animation-delay: 0s; }
.tv-b2 { width: 8px;  height: 8px;  top: 20px;  left: 92px;  background: #a7f3d0; box-shadow: 0 0 6px #a7f3d0, 0 0 12px #a7f3d0; animation-delay: .4s; }
.tv-b3 { width: 11px; height: 11px; top: 68px;  left: 112px; background: #fbcfe8; box-shadow: 0 0 7px #fbcfe8, 0 0 16px #fbcfe8; animation-delay: .8s; }
.tv-b4 { width: 7px;  height: 7px;  top: 108px; left: 75px;  background: #bfdbfe; box-shadow: 0 0 5px #bfdbfe, 0 0 10px #bfdbfe; animation-delay: 1.2s; }
.tv-b5 { width: 9px;  height: 9px;  top: 102px; left: 22px;  background: #fcd34d; box-shadow: 0 0 6px #fcd34d, 0 0 12px #fcd34d; animation-delay: 1.6s; }
.tv-b6 { width: 8px;  height: 8px;  top: 50px;  left: 12px;  background: #c4b5fd; box-shadow: 0 0 6px #c4b5fd, 0 0 12px #c4b5fd; animation-delay: 2s; }
@keyframes baby-twinkle {
  0%,100% { opacity: .6; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.3); }
}

/* ── GALAXY (stage 10) ── */
.tv-arms--galaxy {
  width: 200px; height: 200px;
  background: conic-gradient(
    transparent 0deg,
    rgba(167,139,250,.7) 28deg, rgba(196,181,253,.35) 55deg, transparent 82deg,
    transparent 180deg,
    rgba(167,139,250,.6) 208deg, rgba(196,181,253,.28) 235deg, transparent 262deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(transparent 28px, rgba(0,0,0,.5) 30px, black 54%, rgba(0,0,0,.3) 78%, transparent 90%);
  mask:         radial-gradient(transparent 28px, rgba(0,0,0,.5) 30px, black 54%, rgba(0,0,0,.3) 78%, transparent 90%);
  animation: gx-spin 14s linear infinite;
}
@keyframes gx-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.tv-galaxy-core {
  width: 58px; height: 58px;
  background: radial-gradient(circle, #fff 0%, #ede9fe 28%, #8b5cf6 58%, #4c1d95 100%);
  box-shadow: 0 0 32px rgba(139,92,246,.85), 0 0 75px rgba(109,40,217,.5), 0 0 130px rgba(109,40,217,.22), inset 0 0 14px rgba(255,255,255,.5);
  animation: nucleus-pulse 3s ease-in-out infinite;
}
.tv-halo--galaxy {
  width: 205px; height: 205px;
  background: radial-gradient(circle, rgba(139,92,246,.2) 0%, rgba(109,40,217,.08) 45%, transparent 70%);
}

/* ── COSMIC: GALAXY GROUP / CLUSTER / MATURED UNIVERSE (stages 11–13) ── */
.tv-arms--cosmic {
  width: 220px; height: 220px;
  background: conic-gradient(
    transparent 0deg,
    rgba(232,121,249,.75) 22deg, rgba(250,204,254,.4) 48deg, transparent 75deg,
    transparent 180deg,
    rgba(232,121,249,.65) 202deg, rgba(250,204,254,.32) 228deg, transparent 255deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(transparent 26px, rgba(0,0,0,.45) 28px, black 55%, rgba(0,0,0,.3) 80%, transparent 92%);
  mask:         radial-gradient(transparent 26px, rgba(0,0,0,.45) 28px, black 55%, rgba(0,0,0,.3) 80%, transparent 92%);
  animation: gx-spin 11s linear infinite;
}
.tv-cosmic-core {
  width: 68px; height: 68px;
  background: radial-gradient(circle, #fff 0%, #fdf4ff 18%, #e879f9 44%, #86198f 78%, #2e1065 100%);
  box-shadow: 0 0 40px rgba(232,121,249,.8), 0 0 95px rgba(168,85,247,.5), 0 0 160px rgba(88,28,135,.3), inset 0 0 16px rgba(255,255,255,.55);
  animation: cosmic-pulse 2s ease-in-out infinite;
}
/* Satellite galaxies */
.tv-sat {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 1;
  animation: sat-orbit 18s linear infinite;
}
.tv-sat-1 {
  top: 50%; left: 50%;
  width: 20px; height: 12px;
  background: radial-gradient(ellipse, rgba(196,181,253,.7) 0%, transparent 80%);
  animation: sat-orbit-1 20s linear infinite;
}
.tv-sat-2 {
  top: 50%; left: 50%;
  width: 16px; height: 10px;
  background: radial-gradient(ellipse, rgba(232,121,249,.6) 0%, transparent 80%);
  animation: sat-orbit-2 28s linear infinite;
}
@keyframes sat-orbit-1 {
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(88px) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg) translateX(88px) rotate(-360deg); }
}
@keyframes sat-orbit-2 {
  from { transform: translate(-50%,-50%) rotate(180deg) translateX(72px) rotate(-180deg); }
  to   { transform: translate(-50%,-50%) rotate(540deg) translateX(72px) rotate(-540deg); }
}