npm - @rydr/game-sdk - Versions diffs - 3.9.0 → 3.11.0 - Mend

@rydr/game-sdk 3.9.0 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/README.md +64 -0
package/dist/client/PlatformClient.d.ts +6 -0
package/dist/client/PlatformClient.d.ts.map +1 -1
package/dist/client/PlatformClient.js +18 -0
package/dist/client/PlatformClient.js.map +1 -1
package/dist/conversations/index.d.ts +76 -38
package/dist/conversations/index.d.ts.map +1 -1
package/dist/conversations/index.js +136 -58
package/dist/conversations/index.js.map +1 -1
package/dist/conversations/voice-samples.d.ts +45 -0
package/dist/conversations/voice-samples.d.ts.map +1 -0
package/dist/conversations/voice-samples.js +63 -0
package/dist/conversations/voice-samples.js.map +1 -0
package/dist/conversations/voices.d.ts +33 -5
package/dist/conversations/voices.d.ts.map +1 -1
package/dist/conversations/voices.js +59 -31
package/dist/conversations/voices.js.map +1 -1
package/dist/protocol/conversations.d.ts +12 -7
package/dist/protocol/conversations.d.ts.map +1 -1
package/dist/protocol/conversations.js.map +1 -1
package/dist/protocol/version.d.ts +1 -1
package/dist/protocol/version.d.ts.map +1 -1
package/dist/protocol/version.js +1 -1
package/dist/protocol/version.js.map +1 -1
package/dist/ui/README.md +2 -0
package/dist/ui/index.d.ts +2 -0
package/dist/ui/index.d.ts.map +1 -1
package/dist/ui/index.js +2 -0
package/dist/ui/index.js.map +1 -1
package/dist/ui/power-race.d.ts +125 -0
package/dist/ui/power-race.d.ts.map +1 -0
package/dist/ui/power-race.js +726 -0
package/dist/ui/power-race.js.map +1 -0
package/dist/ui/showcase/index.d.ts.map +1 -1
package/dist/ui/showcase/index.js +45 -1
package/dist/ui/showcase/index.js.map +1 -1
package/dist/ui/styles.js +13 -0
package/dist/ui/styles.js.map +1 -1
package/dist/ui/subtitle.d.ts +27 -0
package/dist/ui/subtitle.d.ts.map +1 -0
package/dist/ui/subtitle.js +77 -0
package/dist/ui/subtitle.js.map +1 -0
package/dist/voice-gallery/index.d.ts +31 -0
package/dist/voice-gallery/index.d.ts.map +1 -0
package/dist/voice-gallery/index.js +276 -0
package/dist/voice-gallery/index.js.map +1 -0
package/dist/voiceover-editor/index.d.ts +8 -5
package/dist/voiceover-editor/index.d.ts.map +1 -1
package/dist/voiceover-editor/index.js +158 -76
package/dist/voiceover-editor/index.js.map +1 -1
package/package.json +5 -1

package/dist/ui/power-race.js ADDED Viewed

@@ -0,0 +1,726 @@
+/**
+ * `createPowerRace` — a timed power-race HUD: two bars race each other.
+ *
+ *   · deadline bar — fills at a constant rate over `durationS` (the clock closing in).
+ *   · charge bar   — fills from accumulated effort (∫ power dt) toward
+ *                    `requiredJoules = targetFtpPct × ftp × durationS`.
+ *
+ * If the charge bar reaches 100% before the deadline bar does, the rider **wins**; otherwise the
+ * clock **wins** (the rider loses). Pacing is free — only total work matters. This is the canonical
+ * "push NOW or lose it" beat: a surge you must out-pedal before a timer runs out. It began as
+ * Tower-Defense's nuke-intercept mini-game and VIVAX's Vivapierre charge; both are the same widget.
+ *
+ * Pass `mode: "charge"` for the **no-rival** variant — a solo "charge this up" with no deadline bar and
+ * no clock that can beat you (it only resolves `won`, on fill). Same visuals, calmer framing.
+ *
+ * Self-contained DOM/CSS (no three.js), like the rest of `@rydr/game-sdk/ui`: it injects its own
+ * scoped `.rpr-*` stylesheet once into `<head>`. It takes **power values**, not a `session` — the
+ * game owns its loop and feeds watts in. FTP-relative by construction (`ftp` sets the bar to clear),
+ * so a 150 W and a 350 W rider face the same challenge — never hard-code a raw-watt threshold.
+ *
+ * ── Sizing contract (same as the rest of the kit) ──────────────────────────────────────────────
+ * Tuned for a trainer screen viewed from a few feet away while pedaling. Don't restyle the `.rpr-*`
+ * type sizes / dimensions or wrap it in `transform: scale()`. Recolour it with the `theme` option and
+ * relabel it with `text` — those are the customization surface; the layout is fixed.
+ * ────────────────────────────────────────────────────────────────────────────────────────────────
+ *
+ * Driving it: `start()`, then pump `setPower(w)` + `tick(dt)` every frame. The HUD self-resolves to
+ * `won` / `lost` when either bar crosses 100%; poll `getPhase()` or pass `onResolve`. Drive external
+ * VFX (a glow, a light) off `getProgress().charge`.
+ */
+const STYLE_ID = "rydr-power-race-styles";
+const VARIANTS = ["twin-stacked", "twin-towers", "single-track"];
+const SCORE_VARIANTS = ["tip", "impact", "above", "infill"];
+/** Grade tiers by precision %, highest first — drives the % colour. A fixed semantic palette, not themed. */
+const GRADES = [
+    { min: 95, label: "PERFECT", color: "#ffd23f" },
+    { min: 80, label: "GREAT", color: "#22c55e" },
+    { min: 65, label: "GOOD", color: "#22d3ee" },
+    { min: 0, label: "CLEAN", color: "#9aa7c7" },
+];
+const gradeForPct = (pct) => GRADES.find((g) => pct >= g.min);
+/** Intro sub-phase durations (seconds). The race begins after their sum (3.5 s). */
+const PRIMING_WARNING_S = 0.5;
+const PRIMING_PROMPT_S = 1.0;
+const PRIMING_BARS_S = 0.5;
+/** Total intro duration in seconds. */
+export const INTRO_TOTAL_S = PRIMING_WARNING_S + PRIMING_PROMPT_S + PRIMING_BARS_S; // 3.5
+/** The built-in "alert" skin — the proven Tower-Defense look. Default when no `theme` is passed. */
+export const DEFAULT_POWER_RACE_THEME = {
+    deadline: "#ef4444",
+    deadlineDeep: "#7f1d1d",
+    charge: "#22d3ee",
+    chargeDeep: "#0e7490",
+    win: "#22c55e",
+    winDeep: "#166534",
+};
+const DEFAULT_TEXT = {
+    heading: "INCOMING MISSILE",
+    prompt: "PUSH TO INTERCEPT",
+    deadlineLabel: "NUKE",
+    chargeLabel: "INTERCEPTOR",
+    win: "INTERCEPTED",
+    lose: "MISSED",
+};
+export function createPowerRace(opts = {}) {
+    const ftp = opts.ftp ?? 250;
+    const durationS = opts.durationS ?? 5;
+    const targetFtpPct = opts.targetFtpPct ?? 1.1;
+    let variant = opts.variant ?? "twin-stacked";
+    let scoreVariant = opts.scoreVariant ?? null;
+    const text = { ...DEFAULT_TEXT, ...(opts.text ?? {}) };
+    const theme = { ...DEFAULT_POWER_RACE_THEME, ...(opts.theme ?? {}) };
+    const onResolve = opts.onResolve;
+    const mode = opts.mode === "charge" ? "charge" : "race";
+    ensureStyles();
+    if (!VARIANTS.includes(variant))
+        variant = "twin-stacked";
+    if (scoreVariant && !SCORE_VARIANTS.includes(scoreVariant))
+        scoreVariant = null;
+    const requiredJoules = targetFtpPct * ftp * durationS;
+    const root = document.createElement("div");
+    root.className = `rpr v-${variant} mode-${mode}${scoreVariant ? ` has-score place-${scoreVariant}` : ""}`;
+    root.innerHTML = innerForVariant(variant);
+    // per-instance palette → CSS custom properties (cascades to every descendant)
+    root.style.setProperty("--rpr-deadline", theme.deadline);
+    root.style.setProperty("--rpr-deadline-deep", theme.deadlineDeep);
+    root.style.setProperty("--rpr-charge", theme.charge);
+    root.style.setProperty("--rpr-charge-deep", theme.chargeDeep);
+    root.style.setProperty("--rpr-win", theme.win);
+    root.style.setProperty("--rpr-win-deep", theme.winDeep);
+    const headingEl = root.querySelector(".rpr-heading");
+    const promptEl = root.querySelector(".rpr-prompt");
+    const deadlineFillEl = root.querySelector(".rpr-deadline-fill");
+    const chargeBarEl = root.querySelector(".rpr-charge-bar");
+    const stampEl = root.querySelector(".rpr-stamp");
+    // apply the (possibly overridden) bar labels — twin-stacked uses `.rpr-row-label`.
+    const deadlineLabelEl = root.querySelector(".rpr-deadline-bar .rpr-row-label, .rpr-deadline-bar .rpr-tower-label");
+    const chargeLabelEl = root.querySelector(".rpr-charge-bar .rpr-row-label, .rpr-charge-bar .rpr-tower-label");
+    if (deadlineLabelEl)
+        deadlineLabelEl.textContent = text.deadlineLabel;
+    if (chargeLabelEl)
+        chargeLabelEl.textContent = text.chargeLabel;
+    let livePctEl = null;
+    if (scoreVariant) {
+        const liveEl = document.createElement("div");
+        liveEl.className = "rpr-live";
+        liveEl.innerHTML = '<span class="rl-pct">0%</span>';
+        const deadlineTrack = deadlineFillEl?.parentElement || root;
+        deadlineTrack.appendChild(liveEl);
+        livePctEl = liveEl.querySelector(".rl-pct");
+    }
+    let phase = "idle";
+    let elapsedS = 0;
+    let accumulatedJoules = 0;
+    let lastPowerW = 0;
+    let lastStage = "idle";
+    let resolutionTimer = 0;
+    let stampRevealTimer = 0;
+    let hideTimer = 0;
+    let primingS = 0;
+    function setStage(stage) {
+        if (stage === lastStage)
+            return;
+        chargeBarEl.classList.remove("stage-warn", "stage-crit", "stage-danger");
+        if (stage !== "idle")
+            chargeBarEl.classList.add(`stage-${stage}`);
+        lastStage = stage;
+    }
+    function setPrimingClass(name) {
+        root.classList.remove("priming-warning", "priming-prompt", "priming-bars");
+        if (name)
+            root.classList.add(`priming-${name}`);
+    }
+    function stageFromGap(gap) {
+        if (gap <= 0)
+            return "idle";
+        if (gap < 0.1)
+            return "warn";
+        if (gap < 0.22)
+            return "crit";
+        return "danger";
+    }
+    function paint() {
+        const deadlineProgress = Math.min(1, elapsedS / durationS);
+        const chargeProgress = Math.min(1, accumulatedJoules / requiredJoules);
+        root.style.setProperty("--deadline", deadlineProgress.toFixed(3));
+        root.style.setProperty("--deadline-pct", `${(deadlineProgress * 100).toFixed(1)}%`);
+        root.style.setProperty("--charge", chargeProgress.toFixed(3));
+        root.style.setProperty("--charge-pct", `${(chargeProgress * 100).toFixed(1)}%`);
+        if (mode === "race" && phase === "racing") {
+            const gap = deadlineProgress - chargeProgress;
+            const stage = stageFromGap(gap);
+            setStage(stage);
+            root.classList.toggle("behind", stage !== "idle");
+        }
+        if (phase !== "won" && phase !== "lost") {
+            // race: precision = how close to the wire; charge: how full the bar is.
+            paintScore((mode === "charge" ? chargeProgress : deadlineProgress) * 100, null);
+        }
+    }
+    function paintScore(precision, result) {
+        if (!livePctEl)
+            return;
+        const pct = Math.max(0, Math.min(100, Math.round(precision)));
+        if (!result) {
+            livePctEl.textContent = `${pct}%`;
+            root.classList.remove("score-resolved", "score-miss");
+            return;
+        }
+        const isMiss = result === "miss";
+        livePctEl.textContent = isMiss ? "FAILED" : `${pct}%`;
+        root.style.setProperty("--score-color", isMiss ? theme.deadline : gradeForPct(pct).color);
+        root.classList.add("score-resolved");
+        root.classList.toggle("score-miss", isMiss);
+    }
+    function applyOutcome(outcome) {
+        phase = outcome;
+        root.classList.remove("racing", "won", "lost", "behind");
+        root.classList.add(outcome);
+        if (outcome === "won")
+            paintScore(mode === "charge" ? 100 : Math.min(1, elapsedS / durationS) * 100, "hit");
+        else
+            paintScore(100, "miss");
+        setStage("idle");
+        headingEl.textContent = "";
+        promptEl.textContent = "";
+        stampEl.innerHTML = "";
+        root.classList.remove("stamp-revealed");
+        window.clearTimeout(stampRevealTimer);
+        window.clearTimeout(hideTimer);
+        stampRevealTimer = window.setTimeout(() => {
+            stampEl.innerHTML = `<span class="text">${outcome === "won" ? text.win : text.lose}</span>`;
+            root.classList.add("stamp-revealed");
+            stampRevealTimer = 0;
+        }, 250);
+        hideTimer = window.setTimeout(() => {
+            root.classList.remove("show");
+            hideTimer = 0;
+        }, 1250);
+        onResolve?.(outcome);
+    }
+    return {
+        element: root,
+        start() {
+            window.clearTimeout(resolutionTimer);
+            resolutionTimer = 0;
+            window.clearTimeout(stampRevealTimer);
+            stampRevealTimer = 0;
+            window.clearTimeout(hideTimer);
+            hideTimer = 0;
+            phase = "priming-warning";
+            primingS = 0;
+            elapsedS = 0;
+            accumulatedJoules = 0;
+            lastPowerW = 0;
+            root.classList.remove("racing", "won", "lost", "behind", "stamp-revealed", "bars-open");
+            root.classList.add("show");
+            setPrimingClass("warning");
+            headingEl.textContent = text.heading;
+            promptEl.textContent = text.prompt;
+            stampEl.textContent = "";
+            paint();
+        },
+        setPower(w) {
+            lastPowerW = Math.max(0, Number(w) || 0);
+        },
+        getPhase() {
+            return phase;
+        },
+        getProgress() {
+            return {
+                deadline: Math.min(1, elapsedS / durationS),
+                charge: Math.min(1, accumulatedJoules / requiredJoules),
+            };
+        },
+        tick(dt) {
+            if (phase === "priming-warning" || phase === "priming-prompt" || phase === "priming-bars") {
+                primingS += dt;
+                if (phase === "priming-warning" && primingS >= PRIMING_WARNING_S) {
+                    phase = "priming-prompt";
+                    setPrimingClass("prompt");
+                }
+                if (phase === "priming-prompt" && primingS >= PRIMING_WARNING_S + PRIMING_PROMPT_S) {
+                    phase = "priming-bars";
+                    setPrimingClass("bars");
+                    root.classList.add("bars-open");
+                }
+                if (phase === "priming-bars" && primingS >= INTRO_TOTAL_S) {
+                    phase = "racing";
+                    setPrimingClass(null);
+                    root.classList.add("racing");
+                }
+                return phase;
+            }
+            if (phase !== "racing")
+                return phase;
+            elapsedS += dt;
+            accumulatedJoules += lastPowerW * dt;
+            const deadlineProgress = elapsedS / durationS;
+            const chargeProgress = accumulatedJoules / requiredJoules;
+            if (chargeProgress >= 1) {
+                elapsedS = Math.min(elapsedS, durationS);
+                accumulatedJoules = requiredJoules;
+                paint();
+                applyOutcome("won");
+                return phase;
+            }
+            if (mode === "race" && deadlineProgress >= 1) {
+                elapsedS = durationS;
+                paint();
+                applyOutcome("lost");
+                return phase;
+            }
+            paint();
+            return phase;
+        },
+        showResolution(outcome, opts2 = {}) {
+            if (outcome !== "won" && outcome !== "lost")
+                return;
+            applyOutcome(outcome);
+            paint();
+            if (resolutionTimer) {
+                window.clearTimeout(resolutionTimer);
+                resolutionTimer = 0;
+            }
+            if (opts2.durationS != null && opts2.durationS > 0) {
+                resolutionTimer = window.setTimeout(() => {
+                    root.classList.remove("show");
+                    resolutionTimer = 0;
+                }, opts2.durationS * 1000);
+            }
+        },
+        reset() {
+            if (resolutionTimer) {
+                window.clearTimeout(resolutionTimer);
+                resolutionTimer = 0;
+            }
+            if (stampRevealTimer) {
+                window.clearTimeout(stampRevealTimer);
+                stampRevealTimer = 0;
+            }
+            if (hideTimer) {
+                window.clearTimeout(hideTimer);
+                hideTimer = 0;
+            }
+            phase = "idle";
+            primingS = 0;
+            elapsedS = 0;
+            accumulatedJoules = 0;
+            lastPowerW = 0;
+            root.classList.remove("show", "racing", "won", "lost", "behind", "stamp-revealed", "bars-open");
+            setPrimingClass(null);
+            setStage("idle");
+            paint();
+        },
+        dispose() {
+            if (resolutionTimer)
+                window.clearTimeout(resolutionTimer);
+            if (stampRevealTimer)
+                window.clearTimeout(stampRevealTimer);
+            if (hideTimer)
+                window.clearTimeout(hideTimer);
+            root.remove();
+        },
+    };
+}
+/** Variant DOM. All three expose the same class hooks the factory drives. */
+function innerForVariant(variant) {
+    if (variant === "twin-towers") {
+        return `
+      <div class="rpr-heading">INCOMING MISSILE</div>
+      <div class="rpr-towers">
+        <div class="rpr-tower rpr-deadline-bar">
+          <div class="rpr-tower-label">NUKE</div>
+          <div class="rpr-tower-track">
+            <div class="rpr-deadline-fill"></div>
+            <div class="rpr-tower-crest"></div>
+          </div>
+        </div>
+        <div class="rpr-tower rpr-charge-bar">
+          <div class="rpr-tower-label">INTERCEPTOR</div>
+          <div class="rpr-tower-track">
+            <div class="rpr-charge-fill"></div>
+            <div class="rpr-tower-crest"></div>
+          </div>
+        </div>
+      </div>
+      <div class="rpr-prompt">PUSH TO INTERCEPT</div>
+      <div class="rpr-stamp"></div>`;
+    }
+    if (variant === "single-track") {
+        return `
+      <div class="rpr-heading">INCOMING MISSILE</div>
+      <div class="rpr-race">
+        <div class="rpr-race-rail rpr-charge-bar">
+          <div class="rpr-rail-finish"></div>
+          <div class="rpr-deadline-chip rpr-deadline-fill"><span>NUKE</span></div>
+          <div class="rpr-charge-chip rpr-charge-fill"><span>INTERCEPTOR</span></div>
+        </div>
+      </div>
+      <div class="rpr-prompt">PUSH TO INTERCEPT</div>
+      <div class="rpr-stamp"></div>`;
+    }
+    // 'twin-stacked' default.
+    return `
+    <div class="rpr-heading">INCOMING MISSILE</div>
+    <div class="rpr-stack">
+      <div class="rpr-row rpr-deadline-bar">
+        <div class="rpr-row-label">NUKE</div>
+        <div class="rpr-row-track"><div class="rpr-deadline-fill"></div></div>
+      </div>
+      <div class="rpr-row rpr-charge-bar">
+        <div class="rpr-row-label">INTERCEPTOR</div>
+        <div class="rpr-row-track"><div class="rpr-charge-fill"></div></div>
+      </div>
+    </div>
+    <div class="rpr-prompt">PUSH TO INTERCEPT</div>
+    <div class="rpr-stamp"></div>`;
+}
+function ensureStyles() {
+    let s = document.getElementById(STYLE_ID);
+    if (!s) {
+        const fontLink = document.createElement("link");
+        fontLink.rel = "stylesheet";
+        fontLink.href = "https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap";
+        document.head.appendChild(fontLink);
+        s = document.createElement("style");
+        s.id = STYLE_ID;
+        document.head.appendChild(s);
+    }
+    s.textContent = CSS;
+}
+/**
+ * `color-mix` gives the theme colours their translucent glows: `mix(C N%, transparent)` == `C` at
+ * alpha N/100 with RGB unchanged, so the original rgba glow alphas are preserved while the hue follows
+ * the theme. Near-white sheen insets (highlights) stay literal — they're hue-neutral.
+ */
+const CSS = `
+.rpr {
+  position: fixed; inset: 0; pointer-events: none; z-index: 50;
+  opacity: 0; transition: opacity 220ms ease;
+  font-family: 'Rajdhani', 'SF Mono', Menlo, sans-serif;
+  color: #fff;
+  --deadline: 0; --deadline-pct: 0%;
+  --charge: 0; --charge-pct: 0%;
+  --rpr-deadline: #ef4444; --rpr-deadline-deep: #7f1d1d;
+  --rpr-charge: #22d3ee; --rpr-charge-deep: #0e7490;
+  --rpr-win: #22c55e; --rpr-win-deep: #166534;
+}
+.rpr.show { opacity: 1; }
+.rpr::before {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  background: radial-gradient(ellipse at center,
+    rgba(8,10,22,0.78) 0%, rgba(8,10,22,0.55) 38%, rgba(8,10,22,0) 72%);
+}
+.rpr > * { position: relative; }
+.rpr-heading {
+  position: absolute; left: 50%; transform: translate(-50%, -100%);
+  font-weight: 700; font-size: 36px; letter-spacing: 8px;
+  text-transform: uppercase; white-space: nowrap;
+  color: #fff;
+  text-shadow: 0 0 16px var(--rpr-deadline), 0 0 4px #000;
+  animation: rpr-flash 0.42s steps(2) infinite;
+}
+.rpr.won .rpr-heading,
+.rpr.lost .rpr-heading { display: none; }
+.rpr-prompt {
+  position: absolute; left: 50%; transform: translateX(-50%);
+  font-weight: 700; font-size: 22px; letter-spacing: 4px;
+  text-transform: uppercase; white-space: nowrap;
+  color: var(--rpr-deadline);
+  text-shadow: 0 0 14px var(--rpr-deadline), 0 0 4px #000;
+  animation: rpr-flash 0.28s steps(2) infinite;
+}
+.rpr.won .rpr-prompt,
+.rpr.lost .rpr-prompt { display: none; }
+.rpr-stamp {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  display: none;
+  align-items: center; gap: 18px;
+  font-weight: 900; font-size: 64px; letter-spacing: 10px;
+  text-transform: uppercase; white-space: nowrap;
+  padding: 18px 36px; border-radius: 10px;
+  text-shadow: 0 0 18px rgba(0,0,0,0.8);
+}
+.rpr.won .rpr-stamp,
+.rpr.lost .rpr-stamp { display: flex; }
+.rpr.won .rpr-stamp {
+  background: color-mix(in srgb, var(--rpr-win) 18%, transparent); color: #fff;
+  border: 3px solid var(--rpr-win);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--rpr-win) 60%, transparent),
+              inset 0 0 24px color-mix(in srgb, var(--rpr-win) 40%, transparent);
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+.rpr.won.stamp-revealed .rpr-stamp { opacity: 1; }
+.rpr.lost .rpr-stamp {
+  background: color-mix(in srgb, var(--rpr-deadline) 18%, transparent); color: #fff;
+  border: 3px solid var(--rpr-deadline);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--rpr-deadline) 70%, transparent),
+              inset 0 0 24px color-mix(in srgb, var(--rpr-deadline) 50%, transparent);
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+.rpr.lost.stamp-revealed .rpr-stamp { opacity: 1; }
+.rpr-stamp .icon { font-size: 80px; line-height: 1; }
+@keyframes rpr-flash {
+  0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.45; }
+}
+.rpr-charge-bar.stage-warn   { animation: rpr-pulse 1.0s ease-in-out infinite; }
+.rpr-charge-bar.stage-crit   { animation: rpr-pulse 0.42s ease-in-out infinite; }
+.rpr-charge-bar.stage-danger { animation: rpr-pulse 0.2s  ease-in-out infinite; }
+@keyframes rpr-pulse {
+  0%, 100% { filter: brightness(1); }
+  50%      { filter: brightness(1.45) drop-shadow(0 0 14px var(--rpr-deadline)); }
+}
+.rpr.v-twin-stacked.bars-open .rpr-heading { top: calc(50% - 60px); }
+.rpr.v-twin-stacked.bars-open .rpr-prompt  { top: calc(50% + 55px); }
+.rpr.v-twin-stacked .rpr-stack {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: 56vw; max-width: 920px; min-width: 480px;
+  display: flex; flex-direction: column; gap: 18px;
+}
+.rpr.v-twin-stacked .rpr-row {
+  display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 14px;
+}
+.rpr.v-twin-stacked .rpr-row-label {
+  font-weight: 700; font-size: 18px; letter-spacing: 4px; text-align: right;
+  text-transform: uppercase;
+}
+.rpr.v-twin-stacked .rpr-deadline-bar .rpr-row-label { color: var(--rpr-deadline); text-shadow: 0 0 10px var(--rpr-deadline); }
+.rpr.v-twin-stacked .rpr-charge-bar .rpr-row-label   { color: var(--rpr-charge);   text-shadow: 0 0 10px var(--rpr-charge); }
+.rpr.v-twin-stacked .rpr-row-track {
+  position: relative; height: 36px; background: #14141a;
+  border: 1px solid #2a2a32; border-radius: 6px; overflow: hidden;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.4);
+}
+.rpr.v-twin-stacked .rpr-deadline-fill {
+  position: absolute; inset: 0; width: var(--deadline-pct);
+  background: linear-gradient(90deg, var(--rpr-deadline-deep) 0%, var(--rpr-deadline) 100%);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--rpr-deadline) 65%, transparent), inset 0 0 12px rgba(255,200,200,0.25);
+  transition: width 0.10s linear;
+}
+.rpr.v-twin-stacked .rpr-charge-fill {
+  position: absolute; inset: 0; width: var(--charge-pct);
+  background: linear-gradient(90deg, var(--rpr-charge-deep) 0%, var(--rpr-charge) 100%);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--rpr-charge) 60%, transparent), inset 0 0 12px rgba(180,240,255,0.25);
+  transition: width 0.10s linear;
+}
+.rpr.v-twin-stacked.won .rpr-charge-fill {
+  background: linear-gradient(90deg, var(--rpr-win-deep) 0%, var(--rpr-win) 100%);
+  box-shadow: 0 0 30px var(--rpr-win), inset 0 0 16px rgba(220,255,200,0.4);
+}
+.rpr.v-twin-stacked .rpr-deadline-bar,
+.rpr.v-twin-stacked .rpr-charge-bar {
+  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rpr.v-twin-stacked.won .rpr-deadline-bar {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.96);
+  pointer-events: none;
+}
+.rpr.v-twin-stacked.won .rpr-charge-bar {
+  transform: translateY(-27px);
+}
+.rpr.v-twin-stacked.lost .rpr-charge-bar {
+  opacity: 0;
+  transform: translateY(10px) scale(0.96);
+  pointer-events: none;
+}
+.rpr.v-twin-stacked.lost .rpr-deadline-bar {
+  transform: translateY(27px);
+}
+.rpr.v-twin-towers.bars-open .rpr-heading { top: calc(50% - 22vh - 12px); }
+.rpr.v-twin-towers.bars-open .rpr-prompt  { top: calc(50% + 22vh + 12px); }
+.rpr.v-twin-towers .rpr-towers {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  display: flex; gap: 56px; align-items: flex-end;
+}
+.rpr.v-twin-towers .rpr-tower {
+  display: flex; flex-direction: column; align-items: center; gap: 12px;
+}
+.rpr.v-twin-towers .rpr-tower-label {
+  font-weight: 700; font-size: 16px; letter-spacing: 4px; text-transform: uppercase;
+}
+.rpr.v-twin-towers .rpr-deadline-bar .rpr-tower-label { color: var(--rpr-deadline); text-shadow: 0 0 10px var(--rpr-deadline); }
+.rpr.v-twin-towers .rpr-charge-bar .rpr-tower-label   { color: var(--rpr-charge);   text-shadow: 0 0 10px var(--rpr-charge); }
+.rpr.v-twin-towers .rpr-tower-track {
+  position: relative; width: 72px; height: 44vh; min-height: 280px; max-height: 460px;
+  background: #14141a; border: 1px solid #2a2a32; border-radius: 8px; overflow: hidden;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 -2px 0 rgba(0,0,0,0.4);
+}
+.rpr.v-twin-towers .rpr-deadline-fill {
+  position: absolute; left: 0; right: 0; bottom: 0; height: var(--deadline-pct);
+  background: linear-gradient(0deg, var(--rpr-deadline-deep) 0%, var(--rpr-deadline) 100%);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--rpr-deadline) 70%, transparent), inset 0 0 12px rgba(255,200,200,0.25);
+  transition: height 0.10s linear;
+}
+.rpr.v-twin-towers .rpr-charge-fill {
+  position: absolute; left: 0; right: 0; bottom: 0; height: var(--charge-pct);
+  background: linear-gradient(0deg, var(--rpr-charge-deep) 0%, var(--rpr-charge) 100%);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--rpr-charge) 65%, transparent), inset 0 0 12px rgba(180,240,255,0.25);
+  transition: height 0.10s linear;
+}
+.rpr.v-twin-towers .rpr-tower-crest {
+  position: absolute; left: -4px; right: -4px; top: 0; height: 3px;
+  background: rgba(255,255,255,0.7);
+  box-shadow: 0 0 8px rgba(255,255,255,0.7);
+}
+.rpr.v-twin-towers.won .rpr-charge-fill {
+  background: linear-gradient(0deg, var(--rpr-win-deep) 0%, var(--rpr-win) 100%);
+  box-shadow: 0 0 30px var(--rpr-win), inset 0 0 16px rgba(220,255,200,0.4);
+}
+.rpr.v-single-track.bars-open .rpr-heading { top: calc(50% - 44px); }
+.rpr.v-single-track.bars-open .rpr-prompt  { top: calc(50% + 44px); }
+.rpr.v-single-track .rpr-race {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: 60vw; max-width: 980px; min-width: 520px;
+}
+.rpr.v-single-track .rpr-race-rail {
+  position: relative; height: 64px;
+  background: linear-gradient(180deg, #0c0c12 0%, #14141a 100%);
+  border: 1px solid #2a2a32; border-radius: 32px; overflow: hidden;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.45);
+}
+.rpr.v-single-track .rpr-rail-finish {
+  position: absolute; right: 0; top: 0; bottom: 0; width: 8px;
+  background: repeating-linear-gradient(0deg, #fff 0 8px, #111 8px 16px);
+  box-shadow: 0 0 14px rgba(255,255,255,0.6);
+}
+.rpr.v-single-track .rpr-deadline-chip,
+.rpr.v-single-track .rpr-charge-chip {
+  position: absolute; top: 6px; bottom: 6px;
+  width: 14%;
+  border-radius: 24px;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 14px; letter-spacing: 3px; color: #fff;
+  text-transform: uppercase; text-shadow: 0 0 6px #000;
+  transition: left 0.10s linear;
+}
+.rpr.v-single-track .rpr-deadline-chip {
+  left: calc(var(--deadline) * (100% - 14%));
+  background: linear-gradient(180deg, var(--rpr-deadline) 0%, var(--rpr-deadline-deep) 100%);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--rpr-deadline) 65%, transparent), inset 0 0 12px rgba(255,200,200,0.25);
+}
+.rpr.v-single-track .rpr-charge-chip {
+  left: calc(var(--charge) * (100% - 14%));
+  background: linear-gradient(180deg, var(--rpr-charge) 0%, var(--rpr-charge-deep) 100%);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--rpr-charge) 60%, transparent), inset 0 0 12px rgba(180,240,255,0.25);
+}
+.rpr.v-single-track.won .rpr-charge-chip {
+  background: linear-gradient(180deg, var(--rpr-win) 0%, var(--rpr-win-deep) 100%);
+  box-shadow: 0 0 30px var(--rpr-win), inset 0 0 16px rgba(220,255,200,0.4);
+}
+.rpr.v-single-track.behind .rpr-race-rail {
+  background: linear-gradient(180deg, #2a0e0e 0%, #14141a 100%);
+}
+.rpr-heading { top: calc(50% - 5px); }
+.rpr-prompt  { top: calc(50% + 5px); }
+.rpr-heading,
+.rpr-prompt {
+  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.3s ease;
+}
+.rpr.priming-warning .rpr-prompt { opacity: 0; pointer-events: none; }
+.rpr .rpr-stack,
+.rpr .rpr-towers,
+.rpr .rpr-race {
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+.rpr.priming-bars .rpr-stack,
+.rpr.priming-bars .rpr-towers,
+.rpr.priming-bars .rpr-race,
+.rpr.racing       .rpr-stack,
+.rpr.racing       .rpr-towers,
+.rpr.racing       .rpr-race,
+.rpr.won          .rpr-stack,
+.rpr.won          .rpr-towers,
+.rpr.won          .rpr-race,
+.rpr.lost         .rpr-stack,
+.rpr.lost         .rpr-towers,
+.rpr.lost         .rpr-race {
+  opacity: 1;
+}
+.rpr.priming-warning::after,
+.rpr.priming-prompt::after,
+.rpr.priming-bars::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  border: 8px solid var(--rpr-deadline);
+  box-shadow: inset 0 0 60px color-mix(in srgb, var(--rpr-deadline) 55%, transparent);
+  animation: rpr-klaxon-strobe 0.4s steps(2) infinite;
+  z-index: 1;
+}
+@keyframes rpr-klaxon-strobe {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0.35; }
+}
+.rpr .rpr-heading {
+  animation: rpr-flash 0.42s steps(2) infinite,
+             rpr-klaxon-shake 0.08s steps(2) infinite;
+}
+@keyframes rpr-klaxon-shake {
+  0%, 100% { transform: translate(-50%, -100%); }
+  50%      { transform: translate(calc(-50% + 1px), -100%); }
+}
+.rpr.has-score .rpr-deadline-bar .rpr-row-track { overflow: visible; }
+.rpr-live {
+  position: absolute; pointer-events: none; white-space: nowrap; z-index: 3;
+  display: flex; flex-direction: column; line-height: 1;
+  font-family: 'Share Tech Mono', 'SF Mono', monospace; font-weight: 700;
+  opacity: 0; transition: opacity 0.3s ease;
+}
+.rpr.priming-bars  .rpr-live,
+.rpr.racing        .rpr-live,
+.rpr.score-resolved .rpr-live { opacity: 1; }
+.rpr-live .rl-pct { color: #ffd9d0; text-shadow: 0 0 8px var(--rpr-deadline), 0 1px 3px #000; }
+.rpr.place-tip .rpr-live {
+  top: 50%; left: var(--deadline-pct, 0%); align-items: center;
+  transform: translate(-50%, -50%); font-size: 20px;
+}
+.rpr.place-infill .rpr-live {
+  top: 50%; left: var(--deadline-pct, 0%); align-items: flex-end;
+  transform: translate(-108%, -50%); font-size: 18px;
+}
+.rpr.place-impact .rpr-live {
+  top: 50%; right: 10px; align-items: flex-end;
+  transform: translateY(-50%); font-size: 20px;
+}
+.rpr.place-above .rpr-live {
+  bottom: calc(100% + 12px); left: var(--deadline-pct, 0%); align-items: center;
+  transform: translateX(-50%); font-size: 38px;
+}
+.rpr.place-above .rpr-live::after {
+  content: '▼'; position: absolute; left: 50%; transform: translateX(-50%);
+  bottom: -14px; font-size: 13px; color: #fff; opacity: 0.85;
+}
+.rpr.has-score.v-twin-stacked.won .rpr-deadline-bar,
+.rpr.has-score.v-twin-stacked.lost .rpr-deadline-bar,
+.rpr.has-score.v-twin-stacked.won .rpr-charge-bar,
+.rpr.has-score.v-twin-stacked.lost .rpr-charge-bar {
+  opacity: 1 !important; transform: none !important;
+}
+.rpr.score-resolved .rpr-live .rl-pct {
+  color: var(--score-color, #fff);
+  text-shadow: 0 0 16px var(--score-color), 0 2px 4px #000;
+}
+.rpr.place-impact.score-resolved .rpr-live {
+  animation: rpr-pct-bounce 0.55s cubic-bezier(0.2, 1.5, 0.35, 1) both;
+}
+@keyframes rpr-pct-bounce {
+  0%   { transform: translateY(-50%) scale(1); }
+  32%  { transform: translateY(-50%) scale(1.6); }
+  58%  { transform: translateY(-50%) scale(0.92); }
+  100% { transform: translateY(-50%) scale(1.28); }
+}
+/* charge mode — no rival: hide the deadline bar and calm the alarm framing. The single charge bar
+   stays centred by the flex/align layout it already lives in; only the effort bar remains. */
+.rpr.mode-charge .rpr-deadline-bar,
+.rpr.mode-charge .rpr-deadline-chip { display: none; }
+.rpr.mode-charge.priming-warning::after,
+.rpr.mode-charge.priming-prompt::after,
+.rpr.mode-charge.priming-bars::after { display: none; }
+.rpr.mode-charge .rpr-heading { animation: rpr-flash 0.42s steps(2) infinite; }
+`;
+//# sourceMappingURL=power-race.js.map