/* =====================================================================
   KaBoomz — shared countdown (Batch 6) — body.countdown-live ONLY.
   The one sync. bomb -> explosion -> genuine logo sequence used by the
   projector AND the phones (src/activities/shared/bomb.js is the state
   authority; this file is its fixed visual system). Every rule below is
   scoped to body.countdown-live so nothing leaks into Batches 1-5 or
   the gameplay screens. Approved palette only - NO purple anywhere.
   ===================================================================== */

body.countdown-live {
  overflow: hidden;
}

body.countdown-live .cd-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  overflow: hidden;
  background: #FF6B4A;
  touch-action: none;
  user-select: none;
  /* The approved bomb asset (797x800) carries the body, the fuse and the
     lit spark. Measured on the asset: the black body's equator centre sits
     at x=276, y=517 - NOT at 50% of the canvas. The numeral anchors to the
     BODY (owner correction 2026-09-22); it must never be centred against
     the full canvas, whose right side is fuse and spark. */
  --cd-body-cx: 34.63%;
  --cd-body-cy: 64.62%;
}

body.countdown-live .cd-overlay[data-visible="true"] { display: block; }
body.countdown-live .cd-overlay[data-visible="false"] { display: none; }

/* ---------- environment: rays + spotlight + confetti ---------- */

/* The spotlight is a REAL first child so it paints UNDER the bomb
   (a ::after pseudo would wash the hero out). */
body.countdown-live .cd-overlay .cd-glow {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 120vmin;
  height: 120vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(255, 244, 214, 0.55) 0%,
    rgba(255, 146, 32, 0.32) 46%,
    rgba(255, 146, 32, 0.12) 62%,
    rgba(255, 146, 32, 0) 76%);
  pointer-events: none;
}

body.countdown-live .cd-overlay .cd-rays {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 140vmax;
  height: 140vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from -12deg at 50% 50%,
    rgba(255, 146, 32, 0.55) 0deg 7deg,
    rgba(255, 146, 32, 0) 7deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side,
    #000 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.45) 58%, transparent 76%);
  mask-image: radial-gradient(closest-side,
    #000 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.45) 58%, transparent 76%);
  pointer-events: none;
}

body.countdown-live .cd-overlay .cd-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
  background-image:
    radial-gradient(circle 5px at 4% 12%, #FFD43B 98%, transparent),
    radial-gradient(circle 4px at 9% 82%, #4DB7F5 98%, transparent),
    radial-gradient(circle 6px at 93% 9%, #7ED957 98%, transparent),
    radial-gradient(circle 4px at 96% 78%, #FFD43B 98%, transparent),
    radial-gradient(circle 5px at 21% 94%, #FF9220 98%, transparent),
    radial-gradient(circle 4px at 78% 95%, #FFD43B 98%, transparent),
    radial-gradient(circle 6px at 44% 3%, #FFF7ED 98%, transparent),
    radial-gradient(circle 4px at 87% 38%, #4DB7F5 98%, transparent),
    radial-gradient(circle 5px at 3% 44%, #7ED957 98%, transparent),
    radial-gradient(circle 4px at 62% 97%, #4DB7F5 98%, transparent);
}

/* ---------- the bomb ---------- */

body.countdown-live .cd-overlay .cd-bomb {
  position: absolute;
  left: 50%;
  top: 53%;
  width: clamp(210px, 40vmin, 500px);
  /* Owner correction 2026-09-30 (checker item 7): the approved asset's
     final geometry is reserved BEFORE it loads (797x800), so loading can
     never move the numeral or resize the composition. */
  aspect-ratio: 797 / 800;
  transform: translate(-50%, -50%);
  display: none; /* bomb pixels belong ONLY to the 3-2-1 state */
}

body.countdown-live .cd-overlay[data-state="count"] .cd-bomb {
  display: block; /* count ONLY: boom and logo leave zero bomb pixels */
}

/* The approved illustrated bomb (transparent derivative of the owner's
   artwork): genuine body, curling fuse and lit spark, never redrawn.
   Milestone 2 layers three motions on separate elements so they compose:
   the outer wrapper owns the entrance pop, the inner wrapper owns the
   idle bob/breathe, and the image owns the 3-2-1 beat squash. Nothing
   changes the artwork. */
body.countdown-live .cd-overlay .cd-bomb {
  animation: cd-bomb-in 440ms var(--kbm-ease-pop, cubic-bezier(0.2, 1.5, 0.42, 1)) both;
}

body.countdown-live .cd-overlay .cd-bomb-alive {
  animation: kbm-alive var(--kbm-idle, 2800ms) var(--kbm-ease-soft, ease-in-out) infinite;
  transform-origin: 50% 78%;
}

body.countdown-live .cd-overlay .cd-bomb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(150, 32, 8, 0.35));
}

/* The beat squash lives on the wrapper that contains the artwork AND the
   numeral, so the number stays glued to the body while it squashes. */
body.countdown-live .cd-overlay .cd-bomb-beat {
  transform-origin: 50% 88%;
}

body.countdown-live .cd-overlay .cd-bomb-beat.cd-beat {
  animation: cd-bomb-beat 320ms var(--kbm-ease-spring, cubic-bezier(0.34, 1.42, 0.64, 1)) both;
}

@keyframes cd-bomb-in {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(0.72); }
  62% { opacity: 1; transform: translate(-50%, -51%) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes cd-bomb-beat {
  0% { transform: scale(1); }
  38% { transform: scale(1.035, 0.955); }
  72% { transform: scale(0.99, 1.012); }
  100% { transform: scale(1); }
}

/* A small expressive pulse over the artwork's own lit spark; it is a
   decorative overlay, never a replacement for the spark. */
body.countdown-live .cd-overlay .cd-spark-glow {
  position: absolute;
  left: 70%;
  top: 26%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 247, 237, 0.85) 0%,
    rgba(255, 212, 59, 0.55) 38%,
    rgba(255, 146, 32, 0) 72%);
  opacity: 0;
  pointer-events: none;
}
body.countdown-live .cd-overlay .cd-spark-glow.cd-glow-pulse {
  animation: cd-spark-pulse 620ms ease-out both;
}
@keyframes cd-spark-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  38% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* The 3-2-1 numeral sits ON the bomb body (HTML, not SVG text). The
   wrapper owns the placement; the numeral owns the pop transform, so the
   two transforms never overwrite each other. left/top resolve against the
   bomb box (the artwork's own box) and use the measured BODY centre, so
   every digit shares one anchor and never shifts with its width. The
   translateY nudge is the measured optical offset of the digit INK inside
   its line box (probe-calibrated at 1280x720 / 1366x768 / 1920x1080:
   without it the ink sits ~3.5px above the geometric centre). */
body.countdown-live .cd-overlay .cd-number-wrap {
  position: absolute;
  left: var(--cd-body-cx, 34.63%);
  top: var(--cd-body-cy, 64.62%);
  transform: translate(-50%, -50%) translateY(3.5px);
  pointer-events: none;
}

body.countdown-live .cd-overlay .cd-number {
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(56px, 11vmin, 126px);
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 0;
  text-shadow:
    0 4px 0 rgba(22, 24, 29, 0.55),
    0 0 22px rgba(255, 255, 255, 0.35);
  transform-origin: center;
}

body.countdown-live .cd-overlay .cd-number {
  animation: cd-pop 0.28s ease-out;
  transform-origin: center;
}

@keyframes cd-pop {
  0% { transform: scale(1.28); }
  60% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* ---------- explosion (never a full-screen white flash) ---------- */

body.countdown-live .cd-overlay .cd-burst {
  position: absolute;
  left: 50%;
  top: 56%;
  width: clamp(170px, 44vmin, 520px);
  transform: translate(-50%, -50%);
  display: none;
}

/* Phase durations come from the SERVER-derived beat (--cd-boom-ms /
   --cd-logo-ms, set by the shared module from beatMs x 35%/65%); the
   fallbacks are the standard 280ms / 520ms for the 800ms beat. */
body.countdown-live .cd-overlay[data-state="boom"] .cd-burst,
body.countdown-live .cd-overlay[data-state="logo"] .cd-burst {
  display: block;
  animation: cd-boom var(--cd-boom-ms, 280ms) cubic-bezier(0.2, 0.8, 0.3, 1.1) both;
  animation-delay: var(--cd-off, 0ms);
  transform-origin: center;
}

@keyframes cd-boom {
  0% { transform: translate(-50%, -50%) scale(0.5) rotate(-4deg); opacity: 0.4; }
  55% { transform: translate(-50%, -50%) scale(1.06) rotate(1deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.12) rotate(2deg); opacity: 1; }
}

body.countdown-live .cd-overlay .cd-spike-coral { fill: #FF6B4A; opacity: 0.95; }
body.countdown-live .cd-overlay .cd-spike-orange { fill: #FF9220; opacity: 0.9; }
body.countdown-live .cd-overlay .cd-burst-yellow { fill: #FFD43B; opacity: 0.95; }
body.countdown-live .cd-overlay .cd-burst-cream { fill: #FFF7ED; opacity: 0.97; }

body.countdown-live .cd-overlay .cd-smoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%) scale(0.8);
  background:
    radial-gradient(circle 30px at 22% 30%, rgba(255, 247, 237, 0.85) 98%, transparent),
    radial-gradient(circle 24px at 72% 24%, rgba(255, 214, 82, 0.8) 98%, transparent),
    radial-gradient(circle 26px at 80% 66%, rgba(255, 247, 237, 0.7) 98%, transparent),
    radial-gradient(circle 20px at 32% 74%, rgba(255, 214, 82, 0.75) 98%, transparent);
  opacity: 0;
}

body.countdown-live .cd-overlay[data-state="boom"] .cd-smoke {
  animation: cd-smoke var(--cd-boom-ms, 280ms) ease-out both;
  animation-delay: var(--cd-off, 0ms);
}

@keyframes cd-smoke {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  45% { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.35; }
}

/* ---------- genuine logo flash (emerges from the explosion) ---------- */

body.countdown-live .cd-overlay .cd-logo {
  position: absolute;
  left: 50%;
  top: 56%;
  width: clamp(180px, 42vmin, 460px);
  transform: translate(-50%, -50%);
  display: none;
}

body.countdown-live .cd-overlay[data-state="logo"] .cd-logo {
  display: block;
  animation: cd-logo var(--cd-logo-ms, 520ms) cubic-bezier(0.2, 0.85, 0.3, 1.02) both;
  animation-delay: var(--cd-off, 0ms);
  transform-origin: center;
}

@keyframes cd-logo {
  0% { transform: translate(-50%, -50%) scale(0.58); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

body.countdown-live .cd-overlay .cd-logo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- accessibility live region ---------- */

body.countdown-live .cd-overlay .cd-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- reduced motion: same states, static compositions ---------- */

@media (prefers-reduced-motion: reduce) {
  body.countdown-live .cd-overlay .cd-number { animation: none; }
  /* Milestone 2: no bomb entrance, no idle loop, no beat squash/pulse.
     The approved artwork and the 3-2-1 timing are untouched. */
  body.countdown-live .cd-overlay .cd-bomb,
  body.countdown-live .cd-overlay .cd-bomb-alive,
  body.countdown-live .cd-overlay .cd-bomb-beat.cd-beat,
  body.countdown-live .cd-overlay .cd-spark-glow.cd-glow-pulse { animation: none; }
  body.countdown-live .cd-overlay[data-state="boom"] .cd-burst,
  body.countdown-live .cd-overlay[data-state="logo"] .cd-burst { animation: none; opacity: 1; }
  body.countdown-live .cd-overlay[data-state="boom"] .cd-smoke { display: none; }
  body.countdown-live .cd-overlay[data-state="logo"] .cd-logo { animation: none; opacity: 1; }
}

/* ---------- phone composition: bigger hero, safe-area aware ---------- */

@media (max-width: 640px) {
  body.countdown-live .cd-overlay .cd-bomb {
    top: 52%;
    width: clamp(200px, 58vmin, 430px);
  }
  body.countdown-live .cd-overlay .cd-burst {
    top: 52%;
    width: clamp(220px, 84vmin, 560px);
  }
  body.countdown-live .cd-overlay .cd-logo {
    top: 52%;
    width: clamp(230px, 90vmin, 560px);
  }
  /* Owner correction 2026-09-30: the phone numeral matches the
     projector's numeral-to-bomb proportion (11vmin : 40vmin = 0.275;
     here 16vmin : 58vmin = 0.276), so the phone and the projector read
     as the same countdown composition scaled for their screens. The
     numeral stays optically centred on the bomb body (the wrapper's
     measured body anchor is untouched). */
  body.countdown-live .cd-overlay .cd-number {
    font-size: clamp(56px, 16vmin, 118px);
  }
  body.countdown-live .cd-overlay {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

body.countdown-live .cd-overlay[data-state="wait"] {
  display: none;
}

/* 4:3 projector: keep the hero balanced (no scroll, no frame band) */
@media (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/10) {
  body.countdown-live .cd-overlay .cd-bomb {
    top: 54%;
    width: clamp(180px, 32vmin, 390px);
  }
  body.countdown-live .cd-overlay .cd-burst {
    top: 54%;
  }
  body.countdown-live .cd-overlay .cd-logo {
    top: 54%;
  }
}