-
-
-
0
-
Days Elapsed
+
Parody build for personal authorized use.
+
+
+
+
+
+
+
+
0
+
Classic
+
+ 🔇
+ Ⅱ
+
+
+
+
parody v4
+
+
+
+
Doodle Jump Parody V4
+
Bounce, wrap, shoot upward, and climb with a feel tuned closer to the original — or jump into the Star Wars version and unlock a flappy transition at 1K.
+
Move: A / D / ← / → · Shoot/Flap: Space · Pause: P
+
+ Loading…
+ Star Wars Version
+
+
Loading sprites and sounds…
+
+
+
+
+
Portal Unlocked
+
Land on the black line, enter the door, and switch into the Star Wars flappy gauntlet.
+
Enter Door
+
+
+
+
+
Paused
+
Resume when you are ready to keep climbing.
+
Resume
+
+
+
+
+
Game Over
+
+
Play Again
+
-
0%
-
Progress
+
+
+ ←
+ ●
+ →
-
- It is possible that we will have superintelligence in a few thousand days (!); it may take longer, but I'm confident we'll get there.
-
- — Sam Altman, "The Intelligence Age" (September 23, 2024)
-
+
+
+
Run locally with python -m http.server 8000 or python3 -m http.server 8000, then open http://localhost:8000.
+
-
+
diff --git a/smoke-test.mjs b/smoke-test.mjs
new file mode 100644
index 0000000..9d4d4df
--- /dev/null
+++ b/smoke-test.mjs
@@ -0,0 +1,520 @@
+import { writeFile } from "node:fs/promises";
+import { setTimeout as delay } from "node:timers/promises";
+
+const CDP_URL = "http://127.0.0.1:9222";
+
+async function waitForDebugger() {
+ for (let attempt = 0; attempt < 40; attempt += 1) {
+ try {
+ const response = await fetch(`${CDP_URL}/json/version`);
+ if (response.ok) {
+ return;
+ }
+ } catch (_error) {
+ // Retry.
+ }
+ await delay(250);
+ }
+ throw new Error("Chrome remote debugger did not become available.");
+}
+
+class CdpClient {
+ constructor(socketUrl) {
+ this.socket = new WebSocket(socketUrl);
+ this.nextId = 1;
+ this.pending = new Map();
+ this.events = new Map();
+ }
+
+ async connect() {
+ await new Promise((resolve, reject) => {
+ this.socket.addEventListener("open", resolve, { once: true });
+ this.socket.addEventListener("error", reject, { once: true });
+ });
+
+ this.socket.addEventListener("message", (event) => {
+ const message = JSON.parse(event.data);
+ if (message.id) {
+ const pending = this.pending.get(message.id);
+ if (!pending) {
+ return;
+ }
+ this.pending.delete(message.id);
+ if (message.error) {
+ pending.reject(new Error(message.error.message));
+ } else {
+ pending.resolve(message.result);
+ }
+ return;
+ }
+
+ const listeners = this.events.get(message.method) || [];
+ for (const listener of listeners) {
+ listener(message.params);
+ }
+ });
+ }
+
+ send(method, params = {}) {
+ const id = this.nextId++;
+ this.socket.send(JSON.stringify({ id, method, params }));
+ return new Promise((resolve, reject) => {
+ this.pending.set(id, { resolve, reject });
+ });
+ }
+
+ once(method) {
+ return new Promise((resolve) => {
+ const handler = (params) => {
+ const listeners = this.events.get(method) || [];
+ this.events.set(method, listeners.filter((listener) => listener !== handler));
+ resolve(params);
+ };
+ this.on(method, handler);
+ });
+ }
+
+ on(method, listener) {
+ const listeners = this.events.get(method) || [];
+ listeners.push(listener);
+ this.events.set(method, listeners);
+ }
+
+ async evaluate(expression) {
+ const result = await this.send("Runtime.evaluate", {
+ expression,
+ awaitPromise: true,
+ returnByValue: true,
+ });
+ return result.result?.value;
+ }
+
+ async screenshot(path) {
+ const response = await this.send("Page.captureScreenshot", { format: "png" });
+ await writeFile(path, Buffer.from(response.data, "base64"));
+ }
+}
+
+async function main() {
+ await waitForDebugger();
+ const targets = await fetch(`${CDP_URL}/json/list`).then((response) => response.json());
+ const pageTarget = targets.find((target) => target.type === "page");
+ if (!pageTarget) {
+ throw new Error("No page target available.");
+ }
+
+ const client = new CdpClient(pageTarget.webSocketDebuggerUrl);
+ await client.connect();
+
+ const consoleMessages = [];
+ const pageErrors = [];
+
+ await client.send("Page.enable");
+ await client.send("Runtime.enable");
+ await client.send("Log.enable");
+
+ client.on("Runtime.consoleAPICalled", (params) => {
+ consoleMessages.push(params.args?.map((arg) => arg.value).filter(Boolean).join(" ") || params.type);
+ });
+ client.on("Runtime.exceptionThrown", (params) => {
+ pageErrors.push(params.exceptionDetails?.text || "Runtime exception");
+ });
+ client.on("Log.entryAdded", (params) => {
+ if (params.entry.level === "error") {
+ pageErrors.push(params.entry.text);
+ }
+ });
+
+ const loadPromise = client.once("Page.loadEventFired");
+ await client.send("Page.navigate", { url: "http://127.0.0.1:8000" });
+ await loadPromise;
+
+ await client.evaluate(`
+ new Promise((resolve) => {
+ const check = () => {
+ const button = document.getElementById("startButton");
+ const game = window.doodleJumpParody;
+ if (button && !button.disabled && game && game.state === "start") {
+ resolve(true);
+ return;
+ }
+ setTimeout(check, 100);
+ };
+ check();
+ })
+ `);
+
+ const initial = await client.evaluate(`(() => ({
+ title: document.querySelector("h1")?.textContent ?? null,
+ startVisible: !document.getElementById("startScreen")?.classList.contains("is-hidden"),
+ scoreTopLeft: (() => {
+ const scoreRect = document.getElementById("hudScore")?.getBoundingClientRect();
+ const canvasRect = document.getElementById("gameCanvas")?.getBoundingClientRect();
+ if (!scoreRect || !canvasRect) return false;
+ return scoreRect.left < canvasRect.left + 48 && scoreRect.top < canvasRect.top + 40;
+ })(),
+ soundToggle: document.getElementById("soundToggle")?.textContent ?? null,
+ buttonText: document.getElementById("startButton")?.textContent ?? null,
+ starButtonText: document.getElementById("startStarButton")?.textContent ?? null,
+ assetCount: Object.values(window.doodleJumpParody.assets).filter(Boolean).length
+ }))()`);
+
+ await client.screenshot("/workspace/doodle-parody-start-01.png");
+
+ await client.evaluate(`document.getElementById("startButton").click()`);
+ await delay(500);
+
+ await client.evaluate(`window.dispatchEvent(new KeyboardEvent("keydown", { key: "p" }))`);
+ await delay(200);
+ const pausedState = await client.evaluate(`window.doodleJumpParody.state`);
+
+ await client.evaluate(`window.dispatchEvent(new KeyboardEvent("keydown", { key: "p" }))`);
+ await delay(200);
+ const resumedState = await client.evaluate(`window.doodleJumpParody.state`);
+
+ const brownPlatformTest = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ game.resetWorld();
+ game.state = "playing";
+ game.platforms = [{
+ x: 216,
+ y: 220,
+ width: 82,
+ type: "brown",
+ active: true,
+ vx: 0,
+ brokenTimer: 0,
+ vanishTimer: 0,
+ pickup: null
+ }];
+ game.monsters = [];
+ game.player.x = 216;
+ game.player.prevY = 250;
+ game.player.y = 210;
+ game.player.vy = -180;
+ game.player.boostTimer = 0;
+ game.handlePlatformCollisions();
+ const afterImpactVy = game.player.vy;
+ const breakTimer = game.platforms[0]?.brokenTimer ?? 0;
+ game.updatePlatforms(0.3);
+ game.cleanupWorld();
+ return {
+ afterImpactVy,
+ platformActiveAfterImpact: game.platforms[0]?.active ?? false,
+ breakTimerStarted: breakTimer > 0,
+ removedAfterCleanup: game.platforms.length === 0
+ };
+ })()`);
+
+ const monsterStompTest = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ game.resetWorld();
+ game.state = "playing";
+ game.monsters = [{
+ x: 216,
+ y: 240,
+ width: 62,
+ height: 42,
+ vx: 0,
+ dead: false
+ }];
+ game.player.x = 216;
+ game.player.prevY = 282;
+ game.player.y = 274;
+ game.player.vy = -160;
+ game.handleMonsterCollisions();
+ return {
+ state: game.state,
+ playerVy: game.player.vy,
+ monsterCount: game.monsters.length
+ };
+ })()`);
+
+ const whitePlatformTest = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ game.resetWorld();
+ game.state = "playing";
+ game.platforms = [{
+ x: 216,
+ y: 220,
+ width: 82,
+ type: "white",
+ active: true,
+ vx: 0,
+ brokenTimer: 0,
+ vanishTimer: 0,
+ pickup: null
+ }];
+ game.monsters = [];
+ game.player.x = 216;
+ game.player.prevY = 250;
+ game.player.y = 210;
+ game.player.vy = -180;
+ game.player.boostTimer = 0;
+ game.handlePlatformCollisions();
+ const afterBounceVy = game.player.vy;
+ const vanishTimer = game.platforms[0]?.vanishTimer ?? 0;
+ game.updatePlatforms(0.1);
+ game.cleanupWorld();
+ return {
+ afterBounceVy,
+ platformActiveAfterBounce: game.platforms[0]?.active ?? false,
+ vanishTimerStarted: vanishTimer > 0,
+ removedAfterCleanup: game.platforms.length === 0
+ };
+ })()`);
+
+ const boostProtectionTest = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ game.resetWorld();
+ game.state = "playing";
+ game.monsters = [{
+ x: 216,
+ y: 250,
+ width: 62,
+ height: 42,
+ vx: 0,
+ dead: false
+ }];
+ game.player.x = 216;
+ game.player.y = 230;
+ game.player.prevY = 228;
+ game.player.vy = 980;
+ game.player.boostType = "jetpack";
+ game.player.boostTimer = 1.1;
+ game.player.boostInvulnerableTimer = 1.5;
+ game.handleMonsterCollisions();
+ return {
+ state: game.state,
+ monsterCount: game.monsters.length,
+ playerBoostTimer: game.player.boostTimer,
+ playerBoostInvulnerableTimer: game.player.boostInvulnerableTimer
+ };
+ })()`);
+
+ const supportSpacingTest = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ game.resetWorld();
+ game.platforms = [];
+ game.monsters = [];
+ game.highestPlatformY = 1400;
+ game.spawnAnchorX = 216;
+ const hazards = [];
+ let hazardConflictCount = 0;
+ for (let i = 0; i < 120; i += 1) {
+ game.platforms = [];
+ game.monsters = [];
+ game.spawnNextPlatform(false);
+ const hazard = game.platforms.find((platform) => platform.type === "brown" || platform.type === "white");
+ if (!hazard) continue;
+ hazards.push(hazard.type);
+ hazardConflictCount += game.platforms.filter((platform) =>
+ platform !== hazard &&
+ platform.type === "green" &&
+ Math.abs(platform.x - hazard.x) < 72 &&
+ Math.abs(platform.y - hazard.y) < 64,
+ ).length;
+ }
+ return { hazardCount: hazards.length, hazardConflictCount };
+ })()`);
+
+ const starWarsTransitionTest = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ game.startRun('starwars');
+ game.spawnPortalLine();
+ const portal = game.platforms.find((platform) => platform.type === 'portalLine');
+ if (!portal) {
+ return { hasPortal: false };
+ }
+ game.player.x = portal.x;
+ game.player.prevY = portal.y + 30;
+ game.player.y = portal.y - 2;
+ game.player.vy = -120;
+ game.handlePlatformCollisions();
+ const stateAfterLand = game.state;
+ const doorActive = Boolean(game.portalDoor?.active);
+ game.enterStarDoor();
+ return {
+ hasPortal: true,
+ stateAfterLand,
+ doorActive,
+ stateAfterEnter: game.state,
+ hudMode: document.getElementById('hudMode')?.textContent ?? null
+ };
+ })()`);
+
+ await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ game.resetWorld();
+ game.state = "playing";
+ game.platforms = [
+ { x: 170, y: 240, width: 82, type: "green", active: true, vx: 0, brokenTimer: 0, vanishTimer: 0, pickup: { type: "propeller", x: 170, used: false } },
+ { x: 280, y: 360, width: 82, type: "green", active: true, vx: 0, brokenTimer: 0, vanishTimer: 0, pickup: { type: "jetpack", x: 280, used: false } }
+ ];
+ game.monsters = [];
+ game.player.x = 220;
+ game.player.y = 150;
+ game.player.prevY = 150;
+ game.player.vy = 0;
+ game.cameraY = 0;
+ })()`);
+ await delay(200);
+ await client.screenshot("/workspace/doodle-parody-pickups-01.png");
+
+ await client.evaluate(`window.doodleJumpParody.resetWorld()`);
+
+ await client.evaluate(`
+ (() => {
+ const shortestDx = (from, to, width) => {
+ const direct = to - from;
+ const wrappedPositive = direct + width;
+ const wrappedNegative = direct - width;
+ return [direct, wrappedPositive, wrappedNegative].sort((a, b) => Math.abs(a) - Math.abs(b))[0];
+ };
+
+ window.__doodlePilot = setInterval(() => {
+ const game = window.doodleJumpParody;
+ if (!game || game.state !== "playing") {
+ return;
+ }
+
+ const player = game.player;
+ const candidates = game.platforms
+ .filter((platform) => platform.active && platform.y > player.y + 6 && platform.y < player.y + 220)
+ .sort((a, b) => {
+ const rank = (platform) => {
+ let bonus = 0;
+ if (platform.pickup?.type === "spring") bonus += 60;
+ if (platform.pickup?.type === "propeller") bonus += 130;
+ if (platform.pickup?.type === "jetpack") bonus += 180;
+ if (platform.type === "green") bonus += 40;
+ if (platform.type === "blue") bonus += 30;
+ if (platform.type === "brown") bonus -= 15;
+ if (platform.type === "white") bonus -= 20;
+ return bonus + (platform.y - player.y) * 1.8 - Math.abs(platform.x - player.x) * 0.9;
+ };
+ return rank(b) - rank(a);
+ });
+
+ const target = candidates[0];
+ const targetX = target ? target.x : game.canvas.width / 2;
+ const dx = shortestDx(player.x, targetX, game.canvas.width);
+ game.input.left = dx < -10;
+ game.input.right = dx > 10;
+
+ const monsterAhead = game.monsters.find((monster) => {
+ const vertical = monster.y > player.y + 40 && monster.y < player.y + 340;
+ const aligned = Math.abs(monster.x - player.x) < 22;
+ return vertical && aligned;
+ });
+ game.input.shoot = Boolean(monsterAhead);
+ }, 24);
+ })()
+ `);
+
+ await delay(3500);
+ await client.screenshot("/workspace/doodle-parody-live-01.png");
+ const midRun = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ const typeCounts = game.platforms.reduce((acc, platform) => {
+ acc[platform.type] = (acc[platform.type] || 0) + 1;
+ return acc;
+ }, {});
+ return {
+ state: game.state,
+ score: game.score,
+ cameraY: Math.floor(game.cameraY),
+ monsters: game.monsters.length,
+ bullets: game.bullets.length,
+ pickups: game.platforms.filter((platform) => platform.pickup && !platform.pickup.used).map((platform) => platform.pickup.type),
+ typeCounts
+ };
+ })()`);
+
+ await delay(15000);
+ await client.screenshot("/workspace/doodle-parody-play-01.png");
+ const runtime = await client.evaluate(`(() => {
+ const game = window.doodleJumpParody;
+ const typeCounts = game.platforms.reduce((acc, platform) => {
+ acc[platform.type] = (acc[platform.type] || 0) + 1;
+ return acc;
+ }, {});
+ return {
+ state: game.state,
+ score: game.score,
+ bestScore: game.bestScore,
+ monstersVisible: game.monsters.length,
+ bulletsVisible: game.bullets.length,
+ pickupsVisible: game.platforms.filter((platform) => platform.pickup && !platform.pickup.used).length,
+ typeCounts
+ };
+ })()`);
+
+ await client.evaluate(`
+ (() => {
+ clearInterval(window.__doodlePilot);
+ const game = window.doodleJumpParody;
+ game.input.left = false;
+ game.input.right = false;
+ game.input.shoot = false;
+ game.gameOver();
+ })()
+ `);
+ await delay(400);
+ await client.screenshot("/workspace/doodle-parody-gameover-01.png");
+
+ const gameOverSummary = await client.evaluate(`(() => ({
+ state: window.doodleJumpParody.state,
+ finalScore: document.getElementById("finalScore")?.textContent ?? null,
+ finalBest: document.getElementById("finalBest")?.textContent ?? null
+ }))()`);
+
+ const reloadPromise = client.once("Page.loadEventFired");
+ await client.send("Page.reload");
+ await reloadPromise;
+ await client.evaluate(`
+ new Promise((resolve) => {
+ const check = () => {
+ const button = document.getElementById("startButton");
+ const game = window.doodleJumpParody;
+ if (button && !button.disabled && game && game.state === "start") {
+ resolve(true);
+ return;
+ }
+ setTimeout(check, 100);
+ };
+ check();
+ })
+ `);
+
+ const persisted = await client.evaluate(`(() => ({
+ bestScore: window.doodleJumpParody.bestScore,
+ soundToggle: document.getElementById("soundToggle")?.textContent ?? null,
+ startVisible: !document.getElementById("startScreen")?.classList.contains("is-hidden")
+ }))()`);
+
+ console.log(JSON.stringify({
+ initial,
+ pausedState,
+ resumedState,
+ brownPlatformTest,
+ monsterStompTest,
+ whitePlatformTest,
+ boostProtectionTest,
+ supportSpacingTest,
+ starWarsTransitionTest,
+ midRun,
+ runtime,
+ gameOverSummary,
+ persisted,
+ consoleMessages,
+ pageErrors
+ }, null, 2));
+
+ client.socket.close();
+}
+
+main().catch((error) => {
+ console.error(error);
+ process.exitCode = 1;
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..e854f4a
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,372 @@
+:root {
+ --ink: #1f1b17;
+ --paper: #f7f2e8;
+ --grid-a: rgba(217, 175, 141, 0.3);
+ --grid-b: rgba(217, 175, 141, 0.16);
+ --accent: #f68d3e;
+ --accent-dark: #d96f23;
+ --panel: rgba(255, 253, 247, 0.94);
+ --shadow: 0 24px 60px rgba(50, 34, 18, 0.16);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ min-height: 100%;
+}
+
+body {
+ font-family: "Inter", sans-serif;
+ color: var(--ink);
+ background:
+ linear-gradient(var(--grid-b) 1px, transparent 1px),
+ linear-gradient(90deg, var(--grid-b) 1px, transparent 1px),
+ linear-gradient(var(--grid-a) 1px, transparent 1px),
+ linear-gradient(90deg, var(--grid-a) 1px, transparent 1px),
+ var(--paper);
+ background-size: 18px 18px, 18px 18px, 90px 90px, 90px 90px, auto;
+}
+
+.page-shell {
+ min-height: 100vh;
+ display: grid;
+ place-items: center;
+ gap: 18px;
+ padding: 20px 16px 24px;
+}
+
+.masthead {
+ width: min(100%, 460px);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ gap: 18px;
+}
+
+.kicker {
+ margin: 0 0 4px;
+ font-size: 0.72rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ opacity: 0.7;
+}
+
+.masthead h1 {
+ margin: 0;
+ font-family: "Bangers", cursive;
+ font-size: clamp(2.5rem, 8vw, 3.8rem);
+ letter-spacing: 0.04em;
+ color: #f4cf33;
+ -webkit-text-stroke: 3px #1f1b17;
+ text-shadow: 3px 3px 0 #fe7347;
+}
+
+.masthead h1 span {
+ display: block;
+ font-size: 1.1rem;
+ letter-spacing: 0.18em;
+ color: #fff;
+ -webkit-text-stroke: 1px #1f1b17;
+ text-shadow: none;
+ margin-top: -2px;
+}
+
+.subcopy,
+.parody-note,
+.run-note {
+ margin: 0;
+ line-height: 1.4;
+ opacity: 0.82;
+}
+
+.parody-note {
+ max-width: 120px;
+ text-align: right;
+ font-size: 0.88rem;
+}
+
+.game-stage {
+ width: min(100%, 460px);
+}
+
+.game-frame {
+ position: relative;
+ width: 100%;
+ padding: 12px;
+ border-radius: 28px;
+ background: rgba(255, 255, 255, 0.74);
+ border: 2px solid rgba(31, 27, 23, 0.18);
+ box-shadow: var(--shadow);
+}
+
+#gameCanvas {
+ display: block;
+ width: 100%;
+ height: auto;
+ border-radius: 20px;
+ border: 2px solid rgba(31, 27, 23, 0.18);
+ background: #f7f2e8;
+}
+
+.top-ui {
+ position: absolute;
+ top: 14px;
+ left: 18px;
+ right: 18px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ pointer-events: none;
+}
+
+.hud-score {
+ min-width: 110px;
+ font-family: "Patrick Hand SC", cursive;
+ font-size: clamp(2rem, 5vw, 2.8rem);
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ color: #1f1b17;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
+}
+
+.hud-mode {
+ position: absolute;
+ left: 50%;
+ top: 4px;
+ transform: translateX(-50%);
+ padding: 4px 10px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.8);
+ border: 1px solid rgba(31, 27, 23, 0.16);
+ font-size: 0.78rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+
+.hud-buttons {
+ display: flex;
+ gap: 8px;
+ pointer-events: auto;
+}
+
+.hud-button,
+.main-button,
+.touch-button {
+ appearance: none;
+ border: 2px solid rgba(31, 27, 23, 0.28);
+ background: rgba(255, 255, 255, 0.86);
+ color: var(--ink);
+ cursor: pointer;
+ font: inherit;
+ transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+ box-shadow: 0 8px 20px rgba(50, 34, 18, 0.12);
+}
+
+.hud-button:hover,
+.main-button:hover,
+.touch-button:hover {
+ transform: translateY(-1px);
+}
+
+.hud-button {
+ width: 42px;
+ height: 42px;
+ border-radius: 14px;
+ font-size: 1rem;
+ font-weight: 700;
+}
+
+.canvas-badge {
+ position: absolute;
+ right: 20px;
+ bottom: 18px;
+ padding: 4px 10px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.78);
+ border: 1px solid rgba(31, 27, 23, 0.18);
+ font-size: 0.72rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ opacity: 0.75;
+}
+
+.overlay-screen {
+ position: absolute;
+ inset: 12px;
+ display: grid;
+ place-items: center;
+ background: rgba(247, 242, 232, 0.75);
+ border-radius: 20px;
+ transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.overlay-screen.is-hidden {
+ opacity: 0;
+ pointer-events: none;
+ transform: scale(0.985);
+}
+
+.overlay-card {
+ width: min(84%, 300px);
+ padding: 22px 18px 18px;
+ border-radius: 24px;
+ background: var(--panel);
+ border: 2px solid rgba(31, 27, 23, 0.14);
+ text-align: center;
+ box-shadow: 0 12px 30px rgba(50, 34, 18, 0.12);
+}
+
+.overlay-card h2 {
+ margin: 0 0 10px;
+ font-family: "Patrick Hand SC", cursive;
+ font-size: 2rem;
+}
+
+.overlay-card p {
+ margin: 0;
+ line-height: 1.5;
+}
+
+.control-line,
+.loading-label {
+ margin-top: 10px !important;
+ font-size: 0.92rem;
+ opacity: 0.74;
+}
+
+.main-button {
+ margin-top: 16px;
+ padding: 12px 18px;
+ border-radius: 14px;
+ background: linear-gradient(180deg, var(--accent), var(--accent-dark));
+ color: #fffdf6;
+ font-weight: 700;
+}
+
+.main-button:disabled {
+ cursor: wait;
+ opacity: 0.7;
+}
+
+.main-button-alt {
+ background: linear-gradient(180deg, #3c3b56, #1f2033);
+}
+
+.main-button-dark {
+ background: linear-gradient(180deg, #232326, #101013);
+}
+
+.mode-choice-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+ margin-top: 14px;
+}
+
+.mode-choice-row .main-button {
+ margin-top: 0;
+}
+
+.result-stack {
+ display: grid;
+ gap: 10px;
+ margin-top: 10px;
+}
+
+.result-stack div {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ padding: 10px 12px;
+ border-radius: 14px;
+ background: rgba(0, 0, 0, 0.04);
+}
+
+.result-stack span {
+ font-size: 0.82rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ opacity: 0.7;
+}
+
+.result-stack strong {
+ font-family: "Patrick Hand SC", cursive;
+ font-size: 1.5rem;
+}
+
+.touch-controls {
+ display: none;
+ gap: 12px;
+ justify-content: center;
+ margin-top: 14px;
+}
+
+.touch-button {
+ width: 96px;
+ height: 60px;
+ border-radius: 18px;
+ font-size: 1.8rem;
+ font-weight: 700;
+}
+
+.touch-button-shoot {
+ font-size: 1.35rem;
+ letter-spacing: 0.08em;
+}
+
+.touch-button.is-active {
+ transform: translateY(1px) scale(0.98);
+ background: rgba(245, 207, 51, 0.35);
+}
+
+.run-note {
+ width: min(100%, 460px);
+ text-align: center;
+ font-size: 0.94rem;
+}
+
+code {
+ padding: 1px 7px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 560px) {
+ .masthead {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .parody-note {
+ max-width: none;
+ text-align: left;
+ }
+}
+
+@media (max-width: 700px), (pointer: coarse) {
+ .touch-controls {
+ display: flex;
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 12px;
+ z-index: 20;
+ }
+
+ .page-shell {
+ padding-bottom: 96px;
+ }
+
+ .run-note {
+ display: none;
+ }
+
+ .mode-choice-row {
+ grid-template-columns: 1fr;
+ }
+}