/* Base layout */
#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000 center center / cover no-repeat;
  overflow: hidden;
}

/* Idle loop video (fills reasonably but keeps aspect) */
#anim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 88vw;
  max-height: 88vh;
  display: none; /* hidden until overlay.js calls showIdle(true) */
  z-index: 20;
}

/* Layer for temporary buy/milestone videos */
#animLayer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

/* Blackout overlay for milestone transition */
#blackout {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  display: none;
  transition: opacity 220ms ease;
  z-index: 40;
}
#blackout.show {
  display: block;
  opacity: 0.85;
}

/* Milestone banner */
#milestoneBanner {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
  background: rgba(0,0,0,.55);
  padding: 10px 16px;
  border-radius: 14px;
  display: none;
  z-index: 50;
}
#milestoneBanner.show { display: block; }

/* Market cap ticker */
#mcTicker {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
  background: rgba(0,0,0,.45);
  padding: 8px 12px;
  border-radius: 12px;
  z-index: 60;
}

/* Debug text (optional) */
#debugBox {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: #b7ffc1;
  background: rgba(0,0,0,.4);
  padding: 6px 8px;
  border-radius: 8px;
  z-index: 70;
}

/* Thank-you popup class from overlay.js (if used there) */
.thankyou {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  font-weight: 800;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  padding: 10px 16px;
  border-radius: 14px;
  z-index: 80;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

#buyLegend {
  position: fixed;
  top: 2vh;
  left: 2vw;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  font-family: 'Arial', sans-serif; /* match your market cap font */
  font-size: 14px; /* smaller than market cap */
  font-weight: 300; /* lighter weight */
  z-index: 9999;
  white-space: nowrap;
}