cascading-reel 1.0.2 → 2.0.0

package/dist/index.cjs

@@ -0,0 +1,1512 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/constants.ts
+const ROW_COMPACT_OFFSETS_RATIO = [
+	.04,
+	0,
+	-.04
+];
+const DEFAULT_MOTION_PROFILE = {
+	columnStaggerMs: 76,
+	fallMs: 800,
+	outroOverlapMs: 620,
+	outroRowGapMs: 14,
+	rowBaseSpacingRatio: .05,
+	incomingAlphaRampMs: 34,
+	fixedStepMs: 1e3 / 120,
+	maxCatchUpStepsPerFrame: 6
+};
+const FLOW_OUTRO_ROW_GAP_MS = DEFAULT_MOTION_PROFILE.outroRowGapMs;
+const FLOW_ROW_BASE_SPACING_RATIO = DEFAULT_MOTION_PROFILE.rowBaseSpacingRatio;
+const FLOW_WIN_PULSE_PERIOD_MS = 1800;
+const FLOW_WIN_PULSE_AMPLITUDE = .15;
+const DEFAULT_PARTICLE_COLOR_RGB = [
+	255,
+	235,
+	110
+];
+const FLOW_COLUMN_STAGGER_MS = DEFAULT_MOTION_PROFILE.columnStaggerMs;
+const FLOW_FALL_MS = DEFAULT_MOTION_PROFILE.fallMs;
+const FLOW_OUTRO_OVERLAP_MS = DEFAULT_MOTION_PROFILE.outroOverlapMs;
+
+//#endregion
+//#region src/utils/math.ts
+function clamp(value, min, max) {
+	if (value < min) return min;
+	if (value > max) return max;
+	return value;
+}
+function randomInt(maxExclusive) {
+	return Math.floor(Math.random() * maxExclusive);
+}
+function normalizeSegment(segment, elementsCount) {
+	return (segment % elementsCount + elementsCount) % elementsCount;
+}
+function normalizeRgbChannel(value) {
+	return clamp(Math.round(value), 0, 255);
+}
+
+//#endregion
+//#region src/core/grid.ts
+function createRandomGrid(spriteElementsCount) {
+	const grid = [];
+	for (let col = 0; col < 3; col += 1) {
+		const column = [];
+		for (let row = 0; row < 3; row += 1) column.push(randomInt(spriteElementsCount));
+		grid.push(column);
+	}
+	return grid;
+}
+function findMostFrequentCells(grid) {
+	const counts = /* @__PURE__ */ new Map();
+	for (let col = 0; col < 3; col += 1) for (let row = 0; row < 3; row += 1) {
+		const symbol = grid[col][row];
+		counts.set(symbol, (counts.get(symbol) ?? 0) + 1);
+	}
+	let selectedSymbol = grid[0][0];
+	let maxCount = -1;
+	for (const [symbol, count] of counts.entries()) if (count > maxCount) {
+		maxCount = count;
+		selectedSymbol = symbol;
+	}
+	const cells = [];
+	for (let col = 0; col < 3; col += 1) for (let row = 0; row < 3; row += 1) if (grid[col][row] === selectedSymbol) cells.push({
+		col,
+		row
+	});
+	return cells;
+}
+function createZeroOffsets() {
+	return Array.from({ length: 3 }, () => Array.from({ length: 3 }, () => 0));
+}
+function fillOffsets(offsets, value) {
+	for (let col = 0; col < 3; col += 1) for (let row = 0; row < 3; row += 1) offsets[col][row] = value;
+}
+
+//#endregion
+//#region src/core/loop.ts
+var RafLoop = class {
+	rafId = null;
+	step = null;
+	start(step) {
+		if (this.rafId !== null) return;
+		this.step = step;
+		this.rafId = requestAnimationFrame(this.tick);
+	}
+	stop() {
+		if (this.rafId !== null) {
+			cancelAnimationFrame(this.rafId);
+			this.rafId = null;
+		}
+		this.step = null;
+	}
+	isRunning() {
+		return this.rafId !== null;
+	}
+	tick = (now) => {
+		if (!this.step) {
+			this.stop();
+			return;
+		}
+		if (this.step(now) === false) {
+			this.stop();
+			return;
+		}
+		if (this.rafId === null) return;
+		this.rafId = requestAnimationFrame(this.tick);
+	};
+};
+
+//#endregion
+//#region src/core/motionTimeline.ts
+function smootherStep(t) {
+	const x = clamp(t, 0, 1);
+	return x * x * x * (x * (x * 6 - 15) + 10);
+}
+function sampleSegment(segment, nowMs) {
+	if (segment.endMs <= segment.startMs) return {
+		value: segment.to,
+		t: 1,
+		done: true
+	};
+	const t = clamp((nowMs - segment.startMs) / (segment.endMs - segment.startMs), 0, 1);
+	const eased = smootherStep(t);
+	return {
+		value: segment.from + (segment.to - segment.from) * eased,
+		t,
+		done: t >= 1
+	};
+}
+
+//#endregion
+//#region src/core/outro.ts
+function buildSequentialRowStartDelays(fromRowOffsets, durationMs, gapMs, rowBaseSpacingRatio) {
+	const delays = [
+		0,
+		0,
+		0
+	];
+	let nextDelay = 0;
+	for (let row = 3 - 1; row >= 0; row -= 1) {
+		if (fromRowOffsets[row] === 0) {
+			delays[row] = 0;
+			continue;
+		}
+		delays[row] = nextDelay;
+		const baseSpacing = Math.floor(durationMs * rowBaseSpacingRatio);
+		nextDelay += baseSpacing + gapMs;
+	}
+	return delays;
+}
+function buildOutroMotionPlan(params) {
+	const outgoingDistance = params.height - params.boardY + params.cellH + 2;
+	const outgoingOffsetsForOrder = [
+		outgoingDistance,
+		outgoingDistance,
+		outgoingDistance
+	];
+	return {
+		columnStaggerMs: params.motionProfile.columnStaggerMs,
+		fallMs: params.motionProfile.fallMs,
+		incomingAlphaRampMs: params.motionProfile.incomingAlphaRampMs,
+		outgoingDistance,
+		incomingFromOffsets: [
+			-params.cellH,
+			-params.cellH * 2,
+			-params.cellH * 3
+		],
+		rowStartDelays: buildSequentialRowStartDelays(outgoingOffsetsForOrder, params.motionProfile.fallMs, params.motionProfile.outroRowGapMs, params.motionProfile.rowBaseSpacingRatio),
+		incomingStartShift: Math.max(0, params.motionProfile.fallMs - params.motionProfile.outroOverlapMs)
+	};
+}
+function updateOutroOffsets(params) {
+	let allOutgoingDone = true;
+	let allIncomingDone = true;
+	for (let col = 0; col < params.scriptedOutgoingOffsets.length; col += 1) {
+		const columnElapsed = params.elapsedMs - col * params.motionPlan.columnStaggerMs;
+		for (let row = 0; row < 3; row += 1) {
+			const rowElapsed = columnElapsed - params.motionPlan.rowStartDelays[row];
+			if (rowElapsed <= 0) {
+				params.scriptedOutgoingOffsets[col][row] = 0;
+				params.scriptedIncomingOffsets[col][row] = params.motionPlan.incomingFromOffsets[row];
+				params.scriptedIncomingAlpha[col][row] = 0;
+				params.scriptedIncomingVisibility[col][row] = "hidden";
+				allOutgoingDone = false;
+				allIncomingDone = false;
+				continue;
+			}
+			const outgoing = sampleSegment({
+				startMs: 0,
+				endMs: params.motionPlan.fallMs,
+				from: 0,
+				to: params.motionPlan.outgoingDistance
+			}, rowElapsed);
+			params.scriptedOutgoingOffsets[col][row] = outgoing.value;
+			params.scriptedIncomingVisibility[col][row] = outgoing.done ? "entering" : "exiting";
+			if (!outgoing.done) allOutgoingDone = false;
+			const incomingElapsed = rowElapsed - params.motionPlan.incomingStartShift;
+			if (incomingElapsed <= 0) {
+				params.scriptedIncomingOffsets[col][row] = params.motionPlan.incomingFromOffsets[row];
+				params.scriptedIncomingAlpha[col][row] = 0;
+				params.scriptedIncomingVisibility[col][row] = "hidden";
+				allIncomingDone = false;
+				continue;
+			}
+			const incoming = sampleSegment({
+				startMs: 0,
+				endMs: params.motionPlan.fallMs,
+				from: params.motionPlan.incomingFromOffsets[row],
+				to: 0
+			}, incomingElapsed);
+			params.scriptedIncomingOffsets[col][row] = incoming.value;
+			params.scriptedIncomingAlpha[col][row] = clamp(incomingElapsed / Math.max(1, params.motionPlan.incomingAlphaRampMs), 0, 1);
+			params.scriptedIncomingVisibility[col][row] = incoming.done ? "active" : "entering";
+			if (!incoming.done) allIncomingDone = false;
+		}
+	}
+	return {
+		allOutgoingDone,
+		allIncomingDone
+	};
+}
+
+//#endregion
+//#region src/normalize.ts
+function normalizeParticleColor(color) {
+	if (color === "rainbow") return {
+		mode: "rainbow",
+		rgb: DEFAULT_PARTICLE_COLOR_RGB
+	};
+	const rgb = color ?? DEFAULT_PARTICLE_COLOR_RGB;
+	return {
+		mode: "solid",
+		rgb: [
+			normalizeRgbChannel(rgb[0]),
+			normalizeRgbChannel(rgb[1]),
+			normalizeRgbChannel(rgb[2])
+		]
+	};
+}
+function normalizeSymbolScale(value, fallback) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+	return clamp(value, .5, 1.2);
+}
+function rowsToStopGrid(rows) {
+	if (rows.length !== 3) throw new Error(`rows must contain ${3} rows`);
+	for (let row = 0; row < 3; row += 1) if (!Array.isArray(rows[row]) || rows[row].length !== 3) throw new Error(`rows[${row}] must contain ${3} columns`);
+	return [
+		[
+			rows[0][0],
+			rows[1][0],
+			rows[2][0]
+		],
+		[
+			rows[0][1],
+			rows[1][1],
+			rows[2][1]
+		],
+		[
+			rows[0][2],
+			rows[1][2],
+			rows[2][2]
+		]
+	];
+}
+function normalizeStopGrid(stopGrid, elementsCount) {
+	if (stopGrid.length !== 3) throw new Error(`stopGrid must contain ${3} columns`);
+	const next = [];
+	for (let col = 0; col < 3; col += 1) {
+		const column = stopGrid[col];
+		if (!Array.isArray(column) || column.length !== 3) throw new Error(`stopGrid[${col}] must contain ${3} rows`);
+		next[col] = [
+			normalizeSegment(column[0], elementsCount),
+			normalizeSegment(column[1], elementsCount),
+			normalizeSegment(column[2], elementsCount)
+		];
+	}
+	return next;
+}
+function normalizeInitialSegments(initialSegments, elementsCount) {
+	return normalizeStopGrid(rowsToStopGrid(initialSegments), elementsCount);
+}
+function cloneSpinState(state) {
+	return {
+		stopGrid: state.stopGrid?.map((column) => [...column]),
+		stopRows: state.stopRows?.map((row) => [...row]),
+		finaleSequence: state.finaleSequence?.map((grid) => grid.map((column) => [...column])),
+		finaleSequenceRows: state.finaleSequenceRows?.map((grid) => grid.map((row) => [...row])),
+		highlightWin: state.highlightWin,
+		callback: state.callback
+	};
+}
+
+//#endregion
+//#region src/core/spinQueue.ts
+var SpinQueueController = class {
+	queue;
+	constructor(initialQueue) {
+		this.queue = (initialQueue ?? []).map((entry) => cloneSpinState(entry));
+	}
+	hasPending() {
+		return this.queue.length > 0;
+	}
+	consume() {
+		if (this.queue.length === 0) return null;
+		return this.queue.shift() ?? null;
+	}
+};
+
+//#endregion
+//#region src/core/state.ts
+function createRuntimeState() {
+	return {
+		isSpinning: false,
+		hasStartedFirstSpin: false,
+		queueFinished: false,
+		shouldHighlightCurrentSpin: false,
+		activeSpinState: null,
+		phase: "idle",
+		winFlashStartedAt: 0,
+		outroStartedAt: 0,
+		idleStartedAt: 0,
+		preSpinStartedAt: 0,
+		winEffectsEnvelope: 1
+	};
+}
+function beginSpin(state, params) {
+	state.hasStartedFirstSpin = true;
+	state.isSpinning = true;
+	state.phase = "outro";
+	state.outroStartedAt = params.startedAt;
+	state.activeSpinState = params.activeSpinState;
+	state.shouldHighlightCurrentSpin = params.shouldHighlightCurrentSpin;
+}
+function finishSpin(state, hasPendingInQueue, now) {
+	state.phase = "idle";
+	state.idleStartedAt = now;
+	state.isSpinning = false;
+	state.shouldHighlightCurrentSpin = false;
+	state.queueFinished = !hasPendingInQueue;
+	state.activeSpinState = null;
+}
+function startWinFlash(state, startedAt) {
+	state.winFlashStartedAt = startedAt;
+	state.phase = "winFlash";
+}
+function destroyState(state) {
+	state.isSpinning = false;
+	state.queueFinished = true;
+}
+
+//#endregion
+//#region src/render/webglRenderer.ts
+const VERTEX_SHADER_SOURCE = `
+attribute vec2 a_pos;
+uniform vec2 u_resolution;
+uniform mediump vec4 u_destRect;
+varying vec2 v_uv;
+
+void main() {
+  vec2 local = a_pos;
+  vec2 pixel = vec2(
+    u_destRect.x + local.x * u_destRect.z,
+    u_destRect.y + local.y * u_destRect.w
+  );
+
+  vec2 zeroToOne = pixel / u_resolution;
+  vec2 clip = vec2(
+    zeroToOne.x * 2.0 - 1.0,
+    1.0 - zeroToOne.y * 2.0
+  );
+
+  gl_Position = vec4(clip, 0.0, 1.0);
+  v_uv = local;
+}
+`;
+const FRAGMENT_SHADER_SOURCE = `
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform mediump vec4 u_destRect;
+uniform vec4 u_srcRect;
+uniform vec4 u_color;
+uniform float u_useTexture;
+uniform float u_shapeMode;
+uniform float u_time;
+uniform float u_borderPx;
+uniform float u_borderInsetPx;
+uniform float u_cornerRadiusPx;
+uniform float u_noiseAmp;
+uniform float u_pulseStrength;
+varying vec2 v_uv;
+
+float hash1(float n) {
+  return fract(sin(n) * 43758.5453);
+}
+
+void main() {
+  if (u_shapeMode > 1.5) {
+    vec2 sizePx = max(vec2(1.0), u_destRect.zw);
+    vec2 px = v_uv * sizePx;
+    float cornerRadius = clamp(u_cornerRadiusPx, 0.0, max(0.0, min(sizePx.x, sizePx.y) * 0.5 - 0.01));
+
+    vec2 halfSize = sizePx * 0.5;
+    vec2 p = px - halfSize;
+    vec2 q = abs(p) - (halfSize - vec2(cornerRadius));
+    float outside = length(max(q, vec2(0.0)));
+    float inside = min(max(q.x, q.y), 0.0);
+    float d = -(outside + inside - cornerRadius);
+
+    float left = px.x;
+    float right = sizePx.x - px.x;
+    float top = px.y;
+    float bottom = sizePx.y - px.y;
+
+    float side = 0.0;
+    float s = 0.0;
+    float perimeter = max(1.0, (sizePx.x + sizePx.y) * 2.0);
+    if (top <= left && top <= right && top <= bottom) {
+      side = 0.0;
+      s = px.x;
+    } else if (right <= left && right <= top && right <= bottom) {
+      side = 1.0;
+      s = sizePx.x + px.y;
+    } else if (bottom <= left && bottom <= right && bottom <= top) {
+      side = 2.0;
+      s = sizePx.x + sizePx.y + (sizePx.x - px.x);
+    } else {
+      side = 3.0;
+      s = sizePx.x + sizePx.y + sizePx.x + (sizePx.y - px.y);
+    }
+
+    float sideSeed = hash1(side * 17.31 + sizePx.x * 0.013 + sizePx.y * 0.007);
+    float phase = s * (0.12 + sideSeed * 0.06) + u_time * (6.0 + sideSeed * 4.0);
+    float n1 = sin(phase);
+    float n2 = sin(phase * 1.87 + 1.6 + sideSeed * 5.1);
+    float n3 = sin(phase * 2.53 + 0.73);
+    float waviness = (n1 * 0.58 + n2 * 0.3 + n3 * 0.12) * u_noiseAmp;
+
+    float borderCenter = max(0.5, u_borderInsetPx + waviness);
+    float borderDist = d - borderCenter;
+    float core = exp(-pow(borderDist / max(1.0, u_borderPx * 0.72), 2.0));
+    float glow = exp(-pow(borderDist / max(1.0, u_borderPx * 2.1), 2.0)) * 0.55;
+
+    float pulseA = fract(u_time * 0.11 + 0.07);
+    float pulseB = fract(u_time * 0.11 + 0.41);
+    float pulseC = fract(u_time * 0.11 + 0.78);
+    float posA = pulseA * perimeter;
+    float posB = pulseB * perimeter;
+    float posC = pulseC * perimeter;
+    float dsA = min(abs(s - posA), perimeter - abs(s - posA));
+    float dsB = min(abs(s - posB), perimeter - abs(s - posB));
+    float dsC = min(abs(s - posC), perimeter - abs(s - posC));
+    float pulseBand = exp(-pow(dsA / 18.0, 2.0)) + exp(-pow(dsB / 22.0, 2.0)) + exp(-pow(dsC / 16.0, 2.0));
+    pulseBand *= exp(-pow(borderDist / max(1.0, u_borderPx * 1.25), 2.0));
+    float outerFade = smoothstep(0.0, max(0.75, u_borderInsetPx * 0.95), d);
+
+    float flicker = 0.84 + 0.16 * sin(u_time * 21.0 + s * 0.2 + side * 3.1);
+    float alpha = (core + glow + pulseBand * u_pulseStrength) * u_color.a * flicker * outerFade;
+    if (alpha <= 0.003) {
+      discard;
+    }
+    gl_FragColor = vec4(u_color.rgb * (0.9 + pulseBand * 0.24), alpha);
+  } else if (u_shapeMode > 0.5) {
+    vec2 centered = v_uv - vec2(0.5, 0.5);
+    float dist = length(centered) * 2.0;
+    if (dist > 1.0) {
+      discard;
+    }
+    float feather = smoothstep(1.0, 0.72, dist);
+    gl_FragColor = vec4(u_color.rgb, u_color.a * feather);
+  } else if (u_useTexture > 0.5) {
+    vec2 uv = vec2(
+      mix(u_srcRect.x, u_srcRect.z, v_uv.x),
+      mix(u_srcRect.y, u_srcRect.w, v_uv.y)
+    );
+    vec4 tex = texture2D(u_texture, uv);
+    gl_FragColor = tex * u_color;
+  } else {
+    gl_FragColor = u_color;
+  }
+}
+`;
+var WebGLRenderer = class {
+	canvas;
+	spriteImage;
+	spriteElementsCount;
+	gl;
+	program;
+	uniforms;
+	quadBuffer;
+	texture;
+	viewportW = 1;
+	viewportH = 1;
+	spriteWidth;
+	spriteHeight;
+	spriteSegmentHeight;
+	constructor(params) {
+		this.canvas = params.canvas;
+		this.spriteImage = params.spriteImage;
+		this.spriteElementsCount = Math.max(1, params.spriteElementsCount);
+		this.spriteWidth = this.spriteImage.width;
+		this.spriteHeight = this.spriteImage.height;
+		this.spriteSegmentHeight = this.spriteHeight / this.spriteElementsCount;
+		const gl = this.canvas.getContext("webgl2", {
+			alpha: true,
+			antialias: false
+		}) ?? this.canvas.getContext("webgl", {
+			alpha: true,
+			antialias: false
+		});
+		if (!gl) throw new Error("WebGL context is not available");
+		this.gl = gl;
+		const vertexShader = this.createShader(this.gl.VERTEX_SHADER, VERTEX_SHADER_SOURCE);
+		const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, FRAGMENT_SHADER_SOURCE);
+		this.program = this.createProgram(vertexShader, fragmentShader);
+		this.gl.deleteShader(vertexShader);
+		this.gl.deleteShader(fragmentShader);
+		const quadBuffer = this.gl.createBuffer();
+		if (!quadBuffer) throw new Error("Failed to create WebGL quad buffer");
+		this.quadBuffer = quadBuffer;
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.quadBuffer);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
+			0,
+			0,
+			1,
+			0,
+			0,
+			1,
+			0,
+			1,
+			1,
+			0,
+			1,
+			1
+		]), this.gl.STATIC_DRAW);
+		const texture = this.gl.createTexture();
+		if (!texture) throw new Error("Failed to create WebGL texture");
+		this.texture = texture;
+		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+		this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, 0);
+		this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
+		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.spriteImage);
+		this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+		this.gl.useProgram(this.program);
+		const posLocation = this.gl.getAttribLocation(this.program, "a_pos");
+		this.gl.enableVertexAttribArray(posLocation);
+		this.gl.vertexAttribPointer(posLocation, 2, this.gl.FLOAT, false, 8, 0);
+		this.uniforms = {
+			resolution: this.gl.getUniformLocation(this.program, "u_resolution"),
+			destRect: this.gl.getUniformLocation(this.program, "u_destRect"),
+			srcRect: this.gl.getUniformLocation(this.program, "u_srcRect"),
+			color: this.gl.getUniformLocation(this.program, "u_color"),
+			useTexture: this.gl.getUniformLocation(this.program, "u_useTexture"),
+			shapeMode: this.gl.getUniformLocation(this.program, "u_shapeMode"),
+			texture: this.gl.getUniformLocation(this.program, "u_texture"),
+			time: this.gl.getUniformLocation(this.program, "u_time"),
+			borderPx: this.gl.getUniformLocation(this.program, "u_borderPx"),
+			borderInsetPx: this.gl.getUniformLocation(this.program, "u_borderInsetPx"),
+			cornerRadiusPx: this.gl.getUniformLocation(this.program, "u_cornerRadiusPx"),
+			noiseAmp: this.gl.getUniformLocation(this.program, "u_noiseAmp"),
+			pulseStrength: this.gl.getUniformLocation(this.program, "u_pulseStrength")
+		};
+		this.gl.uniform1i(this.uniforms.texture, 0);
+		this.gl.uniform1f(this.uniforms.time, 0);
+		this.gl.uniform1f(this.uniforms.borderPx, 1);
+		this.gl.uniform1f(this.uniforms.borderInsetPx, 0);
+		this.gl.uniform1f(this.uniforms.cornerRadiusPx, 0);
+		this.gl.uniform1f(this.uniforms.noiseAmp, 0);
+		this.gl.uniform1f(this.uniforms.pulseStrength, 0);
+		this.gl.clearColor(0, 0, 0, 0);
+		this.gl.enable(this.gl.BLEND);
+		this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+	}
+	resize(width, height) {
+		this.viewportW = Math.max(1, Math.floor(width));
+		this.viewportH = Math.max(1, Math.floor(height));
+		this.gl.viewport(0, 0, this.viewportW, this.viewportH);
+	}
+	beginFrame() {
+		this.gl.useProgram(this.program);
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.quadBuffer);
+		this.gl.activeTexture(this.gl.TEXTURE0);
+		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+		this.gl.uniform2f(this.uniforms.resolution, this.viewportW, this.viewportH);
+		this.gl.uniform1f(this.uniforms.shapeMode, 0);
+		this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+	}
+	drawSprite(symbolId, x, y, width, height, alpha = 1) {
+		const srcTop = normalizeSegment(symbolId, this.spriteElementsCount) * this.spriteSegmentHeight;
+		const srcBottom = srcTop + this.spriteSegmentHeight;
+		const inset = .5;
+		const u0 = inset / this.spriteWidth;
+		const u1 = 1 - inset / this.spriteWidth;
+		const v0 = 1 - (srcBottom - inset) / this.spriteHeight;
+		const v1 = 1 - (srcTop + inset) / this.spriteHeight;
+		this.gl.uniform4f(this.uniforms.destRect, x, y, width, height);
+		this.gl.uniform4f(this.uniforms.srcRect, u0, v0, u1, v1);
+		this.gl.uniform4f(this.uniforms.color, 1, 1, 1, alpha);
+		this.gl.uniform1f(this.uniforms.shapeMode, 0);
+		this.gl.uniform1f(this.uniforms.useTexture, 1);
+		this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+	}
+	drawSolidRect(x, y, width, height, rgba) {
+		this.gl.uniform4f(this.uniforms.destRect, x, y, width, height);
+		this.gl.uniform4f(this.uniforms.srcRect, 0, 0, 1, 1);
+		this.gl.uniform4f(this.uniforms.color, rgba[0], rgba[1], rgba[2], rgba[3]);
+		this.gl.uniform1f(this.uniforms.shapeMode, 0);
+		this.gl.uniform1f(this.uniforms.useTexture, 0);
+		this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+	}
+	drawSoftCircle(centerX, centerY, radius, rgba) {
+		const diameter = radius * 2;
+		this.gl.uniform4f(this.uniforms.destRect, centerX - radius, centerY - radius, diameter, diameter);
+		this.gl.uniform4f(this.uniforms.srcRect, 0, 0, 1, 1);
+		this.gl.uniform4f(this.uniforms.color, rgba[0], rgba[1], rgba[2], rgba[3]);
+		this.gl.uniform1f(this.uniforms.useTexture, 0);
+		this.gl.uniform1f(this.uniforms.shapeMode, 1);
+		this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+		this.gl.uniform1f(this.uniforms.shapeMode, 0);
+	}
+	drawElectricBorder(params) {
+		this.gl.uniform4f(this.uniforms.destRect, params.x, params.y, params.width, params.height);
+		this.gl.uniform4f(this.uniforms.srcRect, 0, 0, 1, 1);
+		this.gl.uniform4f(this.uniforms.color, params.rgba[0], params.rgba[1], params.rgba[2], params.rgba[3]);
+		this.gl.uniform1f(this.uniforms.useTexture, 0);
+		this.gl.uniform1f(this.uniforms.shapeMode, 2);
+		this.gl.uniform1f(this.uniforms.time, params.timeMs * .001);
+		this.gl.uniform1f(this.uniforms.borderPx, Math.max(.5, params.borderThicknessPx));
+		this.gl.uniform1f(this.uniforms.borderInsetPx, Math.max(0, params.borderInsetPx));
+		this.gl.uniform1f(this.uniforms.cornerRadiusPx, Math.max(0, params.cornerRadiusPx));
+		this.gl.uniform1f(this.uniforms.noiseAmp, Math.max(0, params.noiseAmplitudePx));
+		this.gl.uniform1f(this.uniforms.pulseStrength, Math.max(0, params.pulseStrength));
+		this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+		this.gl.uniform1f(this.uniforms.shapeMode, 0);
+	}
+	beginAdditiveBlend() {
+		this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
+	}
+	endAdditiveBlend() {
+		this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+	}
+	dispose() {
+		this.gl.deleteTexture(this.texture);
+		this.gl.deleteBuffer(this.quadBuffer);
+		this.gl.deleteProgram(this.program);
+	}
+	createShader(type, source) {
+		const shader = this.gl.createShader(type);
+		if (!shader) throw new Error("Failed to create WebGL shader");
+		this.gl.shaderSource(shader, source);
+		this.gl.compileShader(shader);
+		if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+			const message = this.gl.getShaderInfoLog(shader) ?? "unknown error";
+			this.gl.deleteShader(shader);
+			throw new Error(`WebGL shader compile failed: ${message}`);
+		}
+		return shader;
+	}
+	createProgram(vertexShader, fragmentShader) {
+		const program = this.gl.createProgram();
+		if (!program) throw new Error("Failed to create WebGL program");
+		this.gl.attachShader(program, vertexShader);
+		this.gl.attachShader(program, fragmentShader);
+		this.gl.linkProgram(program);
+		if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+			const message = this.gl.getProgramInfoLog(program) ?? "unknown error";
+			this.gl.deleteProgram(program);
+			throw new Error(`WebGL program link failed: ${message}`);
+		}
+		return program;
+	}
+};
+
+//#endregion
+//#region src/CascadingReel.ts
+var CascadingReel = class CascadingReel {
+	static RAINBOW_HUE_BUCKETS = 24;
+	static PARTICLE_GLOBAL_ALPHA = .9;
+	static PARTICLE_MAX_DISTANCE = .72;
+	static PARTICLE_BASE_RADIUS = .028;
+	static DEFAULT_SYMBOL_SCALE = .9;
+	canvas;
+	container;
+	button;
+	spinQueueController;
+	spriteSource;
+	spriteCrossOrigin;
+	spriteElementsCount;
+	highlightInitialWinningCells;
+	particleColorRgb;
+	particleColorMode;
+	symbolScale;
+	motionProfile;
+	isCoarsePointerDevice;
+	spriteImage = null;
+	spriteLoadError = null;
+	webglRenderer = null;
+	rafLoop = new RafLoop();
+	runtime = createRuntimeState();
+	width = 0;
+	height = 0;
+	cellW = 0;
+	cellH = 0;
+	boardX = 0;
+	boardY = 0;
+	scriptedCascadeQueue = [];
+	scriptedOutgoingGrid = null;
+	scriptedPendingGrid = null;
+	scriptedOutroStartedAt = 0;
+	scriptedOutroElapsedMs = 0;
+	outroMotionPlan = null;
+	scriptedOutgoingOffsets = createZeroOffsets();
+	scriptedOutgoingOffsetsPrev = createZeroOffsets();
+	scriptedIncomingOffsets = createZeroOffsets();
+	scriptedIncomingOffsetsPrev = createZeroOffsets();
+	scriptedIncomingAlpha = createZeroOffsets();
+	scriptedIncomingAlphaPrev = createZeroOffsets();
+	scriptedIncomingVisibility = CascadingReel.createVisibilityGrid("hidden");
+	scriptedIncomingVisibilityPrev = CascadingReel.createVisibilityGrid("hidden");
+	winningCells = [];
+	winningCellKeys = /* @__PURE__ */ new Set();
+	grid;
+	particlesPerCell = 34;
+	lastRafTime = 0;
+	initialHighlightRequestedAt = 0;
+	simulationLastNow = 0;
+	simulationAccumulatorMs = 0;
+	outroInterpolationAlpha = 1;
+	isOutroPipelineWarmedUp = false;
+	isGpuPipelineWarmedUp = false;
+	perfWindowStartedAt = 0;
+	perfFrameCount = 0;
+	perfOver20MsCount = 0;
+	perfDtSamples = [];
+	mobileDprCap = 2;
+	mobilePerfGoodWindows = 0;
+	mobilePerfBadWindows = 0;
+	static PERF_WINDOW_MS = 1500;
+	static PERF_BAD_P95_DT_MS = 19;
+	static PERF_GOOD_P95_DT_MS = 17.5;
+	static PERF_BAD_SLOW_RATIO = .03;
+	static MOBILE_BAD_WINDOWS_TO_DECREASE_DPR = 2;
+	static MOBILE_GOOD_WINDOWS_TO_INCREASE_DPR = 4;
+	static MOBILE_DPR_CAP_MIN = 1.25;
+	static MOBILE_DPR_CAP_MAX = 1.5;
+	static MOBILE_DPR_STEP_DOWN = .1;
+	static MOBILE_DPR_STEP_UP = .05;
+	static DPR_QUANT_STEP = .25;
+	static MAX_CANVAS_AREA_PX_COARSE = 900 * 900;
+	static MAX_CANVAS_AREA_PX_FINE = 1400 * 1400;
+	static PRE_SPIN_MS = 150;
+	static WIN_EFFECTS_ENVELOPE_TAU_MS = 120;
+	static MAX_FRAME_DELTA_MS = 100;
+	static WIN_BORDER_ALPHA = .72;
+	static WIN_BORDER_INSET_RATIO = .08;
+	static particleSeedsCache = /* @__PURE__ */ new Map();
+	constructor(config) {
+		this.canvas = config.canvas;
+		this.container = config.container;
+		this.button = config.button;
+		this.spriteSource = config.sprite;
+		this.spriteCrossOrigin = config.spriteCrossOrigin ?? "anonymous";
+		this.spriteElementsCount = Math.max(1, config.spriteElementsCount ?? 6);
+		this.highlightInitialWinningCells = config.highlightInitialWinningCells !== false;
+		this.spinQueueController = new SpinQueueController(config.queuedSpinStates);
+		const particleColor = normalizeParticleColor(config.particleColor);
+		this.particleColorRgb = particleColor.rgb;
+		this.particleColorMode = particleColor.mode;
+		this.symbolScale = normalizeSymbolScale(config.symbolScale, CascadingReel.DEFAULT_SYMBOL_SCALE);
+		this.motionProfile = DEFAULT_MOTION_PROFILE;
+		this.isCoarsePointerDevice = CascadingReel.detectCoarsePointerDevice();
+		this.mobileDprCap = this.isCoarsePointerDevice ? CascadingReel.MOBILE_DPR_CAP_MAX : 2;
+		this.grid = config.initialSegments ? normalizeInitialSegments(config.initialSegments, this.spriteElementsCount) : createRandomGrid(this.spriteElementsCount);
+	}
+	async init() {
+		this.bindEvents();
+		this.resize();
+		await this.loadSpriteIfProvided();
+		if (!this.spriteImage) {
+			const reason = this.spriteLoadError ? ` (${this.spriteLoadError})` : "";
+			throw new Error(`sprite is required for WebGL renderer${reason}`);
+		}
+		this.webglRenderer = new WebGLRenderer({
+			canvas: this.canvas,
+			spriteImage: this.spriteImage,
+			spriteElementsCount: this.spriteElementsCount
+		});
+		this.webglRenderer.resize(this.width, this.height);
+		this.warmUpOutroPipeline();
+		this.warmUpGpuPipeline();
+		this.applyInitialHighlightIfNeeded();
+		requestAnimationFrame((warmNow) => {
+			this.render(warmNow);
+			this.startLoop();
+		});
+	}
+	destroy() {
+		this.unbindEvents();
+		this.rafLoop.stop();
+		this.simulationLastNow = 0;
+		this.simulationAccumulatorMs = 0;
+		destroyState(this.runtime);
+		this.webglRenderer?.dispose();
+		this.webglRenderer = null;
+		this.clearWinningCells();
+	}
+	spin() {
+		this.dismissHighlightIfActive();
+		if (this.runtime.isSpinning) return;
+		if (this.runtime.queueFinished) return;
+		if (!this.spinQueueController.hasPending()) {
+			this.runtime.queueFinished = true;
+			if (this.button) this.button.disabled = true;
+			return;
+		}
+		const activeSpinState = this.spinQueueController.consume();
+		const shouldHighlightCurrentSpin = activeSpinState?.highlightWin === true;
+		this.runtime.isSpinning = true;
+		this.runtime.phase = "preSpin";
+		this.runtime.preSpinStartedAt = performance.now();
+		this.runtime.activeSpinState = activeSpinState;
+		this.runtime.shouldHighlightCurrentSpin = shouldHighlightCurrentSpin;
+		this.runtime.hasStartedFirstSpin = true;
+		this.simulationLastNow = 0;
+		this.simulationAccumulatorMs = 0;
+		if (this.button) this.button.disabled = true;
+		this.startLoop();
+	}
+	bindEvents() {
+		window.addEventListener("resize", this.resize);
+		document.addEventListener("visibilitychange", this.onVisibilityChange);
+		this.button?.addEventListener("click", this.onSpinClick);
+	}
+	unbindEvents() {
+		window.removeEventListener("resize", this.resize);
+		document.removeEventListener("visibilitychange", this.onVisibilityChange);
+		this.button?.removeEventListener("click", this.onSpinClick);
+	}
+	onVisibilityChange = () => {
+		this.lastRafTime = 0;
+		this.simulationLastNow = 0;
+		this.simulationAccumulatorMs = 0;
+		this.resetPerfWindow();
+	};
+	onSpinClick = () => {
+		if (this.runtime.isSpinning && this.runtime.phase !== "winFlash") return;
+		this.spin();
+	};
+	getNextGrid(stopGrid) {
+		if (!stopGrid) return createRandomGrid(this.spriteElementsCount);
+		return normalizeStopGrid(stopGrid, this.spriteElementsCount);
+	}
+	update(now) {
+		if (!this.runtime.isSpinning) return;
+		if (this.runtime.phase === "preSpin") {
+			if (now - this.runtime.preSpinStartedAt < CascadingReel.PRE_SPIN_MS) return;
+			beginSpin(this.runtime, {
+				activeSpinState: this.runtime.activeSpinState,
+				shouldHighlightCurrentSpin: this.runtime.shouldHighlightCurrentSpin,
+				startedAt: now
+			});
+			this.runtime.preSpinStartedAt = 0;
+			const scriptedSource = this.runtime.activeSpinState?.finaleSequenceRows ? this.runtime.activeSpinState.finaleSequenceRows.map((rows) => rowsToStopGrid(rows)) : this.runtime.activeSpinState?.finaleSequence ?? [];
+			this.scriptedCascadeQueue = scriptedSource.map((grid) => grid.map((column) => [...column]));
+			this.clearWinningCells();
+			const stopGridSource = this.runtime.activeSpinState?.stopRows ? rowsToStopGrid(this.runtime.activeSpinState.stopRows) : this.runtime.activeSpinState?.stopGrid;
+			const nextGrid = this.getNextGrid(stopGridSource);
+			this.startOutroTransition(nextGrid, now);
+		}
+		if (this.runtime.phase === "outro") return;
+	}
+	stepScriptedOutro(stepMs) {
+		if (!this.scriptedOutgoingGrid || !this.scriptedPendingGrid) {
+			this.finishSpinWithUi();
+			return;
+		}
+		if (!this.outroMotionPlan) this.outroMotionPlan = this.createOutroMotionPlan();
+		this.scriptedOutroElapsedMs += stepMs;
+		const { allOutgoingDone, allIncomingDone } = updateOutroOffsets({
+			elapsedMs: this.scriptedOutroElapsedMs,
+			scriptedOutgoingOffsets: this.scriptedOutgoingOffsets,
+			scriptedIncomingOffsets: this.scriptedIncomingOffsets,
+			scriptedIncomingAlpha: this.scriptedIncomingAlpha,
+			scriptedIncomingVisibility: this.scriptedIncomingVisibility,
+			motionPlan: this.outroMotionPlan
+		});
+		if (!allOutgoingDone || !allIncomingDone) return;
+		this.grid = this.scriptedPendingGrid;
+		this.scriptedOutgoingGrid = null;
+		this.scriptedPendingGrid = null;
+		this.outroMotionPlan = null;
+		this.clearWinningCells();
+		this.resetOutroBuffers(1, "active");
+		if (this.tryStartScriptedCascade(this.scriptedOutroStartedAt + this.scriptedOutroElapsedMs)) return;
+		if (!this.runtime.shouldHighlightCurrentSpin) {
+			this.finishSpinWithUi();
+			return;
+		}
+		this.setWinningCells(findMostFrequentCells(this.grid));
+		startWinFlash(this.runtime, this.scriptedOutroStartedAt + this.scriptedOutroElapsedMs);
+		this.runtime.activeSpinState?.callback?.();
+		if (this.button && this.runtime.shouldHighlightCurrentSpin && this.spinQueueController.hasPending()) this.button.disabled = false;
+	}
+	tryStartScriptedCascade(now) {
+		if (this.scriptedCascadeQueue.length === 0) return false;
+		const nextGrid = this.scriptedCascadeQueue.shift();
+		if (!nextGrid) return false;
+		this.startOutroTransition(normalizeStopGrid(nextGrid, this.spriteElementsCount), now);
+		return true;
+	}
+	startOutroTransition(nextGrid, now) {
+		this.scriptedOutgoingGrid = this.grid.map((column) => [...column]);
+		this.scriptedPendingGrid = nextGrid.map((column) => [...column]);
+		this.outroMotionPlan = this.createOutroMotionPlan();
+		this.resetOutroBuffers(0, "hidden");
+		this.clearWinningCells();
+		this.runtime.phase = "outro";
+		this.scriptedOutroStartedAt = now;
+		this.scriptedOutroElapsedMs = 0;
+		this.outroInterpolationAlpha = 1;
+	}
+	finishSpinWithUi(skipCallback = false) {
+		const finishedSpinState = this.runtime.activeSpinState;
+		const callback = skipCallback ? void 0 : finishedSpinState?.callback;
+		const hasPending = this.spinQueueController.hasPending();
+		finishSpin(this.runtime, hasPending, performance.now());
+		if (this.button) this.button.disabled = this.runtime.queueFinished;
+		callback?.();
+	}
+	dismissHighlightIfActive() {
+		if (this.runtime.phase !== "winFlash") return;
+		this.finishSpinWithUi(true);
+	}
+	applyInitialHighlightIfNeeded() {
+		if (!this.highlightInitialWinningCells) return;
+		this.setWinningCells(findMostFrequentCells(this.grid));
+		this.initialHighlightRequestedAt = performance.now();
+	}
+	warmUpOutroPipeline() {
+		if (this.isOutroPipelineWarmedUp) return;
+		const motionPlan = this.createOutroMotionPlan();
+		const outgoingOffsets = createZeroOffsets();
+		const incomingOffsets = createZeroOffsets();
+		const incomingAlpha = createZeroOffsets();
+		const incomingVisibility = CascadingReel.createVisibilityGrid("hidden");
+		const maxRowDelay = Math.max(...motionPlan.rowStartDelays);
+		const maxColumnDelay = (3 - 1) * motionPlan.columnStaggerMs;
+		const warmupMoments = [
+			0,
+			this.motionProfile.fixedStepMs,
+			motionPlan.incomingStartShift + this.motionProfile.fixedStepMs,
+			motionPlan.fallMs + maxRowDelay + maxColumnDelay + this.motionProfile.fixedStepMs
+		];
+		for (const elapsedMs of warmupMoments) updateOutroOffsets({
+			elapsedMs,
+			scriptedOutgoingOffsets: outgoingOffsets,
+			scriptedIncomingOffsets: incomingOffsets,
+			scriptedIncomingAlpha: incomingAlpha,
+			scriptedIncomingVisibility: incomingVisibility,
+			motionPlan
+		});
+		this.isOutroPipelineWarmedUp = true;
+	}
+	createOutroMotionPlan() {
+		const plan = buildOutroMotionPlan({
+			height: this.height,
+			boardY: this.boardY,
+			cellH: this.cellH,
+			motionProfile: this.motionProfile
+		});
+		if (!this.isCoarsePointerDevice) return plan;
+		const frameMs = 1e3 / 60;
+		return {
+			...plan,
+			columnStaggerMs: this.quantizeMs(plan.columnStaggerMs, frameMs),
+			incomingStartShift: this.quantizeMs(plan.incomingStartShift, frameMs),
+			rowStartDelays: [
+				this.quantizeMs(plan.rowStartDelays[0], frameMs),
+				this.quantizeMs(plan.rowStartDelays[1], frameMs),
+				this.quantizeMs(plan.rowStartDelays[2], frameMs)
+			]
+		};
+	}
+	quantizeMs(valueMs, frameMs) {
+		if (valueMs <= 0) return 0;
+		return Math.max(1, Math.round(valueMs / frameMs)) * frameMs;
+	}
+	warmUpGpuPipeline() {
+		if (this.isGpuPipelineWarmedUp) return;
+		const renderer = this.webglRenderer;
+		if (!renderer) return;
+		const warmW = Math.max(8, this.cellW * .2);
+		const warmH = Math.max(8, this.cellH * .2);
+		const warmX = this.boardX + 2;
+		const warmY = this.boardY + 2;
+		renderer.beginFrame();
+		renderer.drawSprite(0, warmX, warmY, warmW, warmH, 1);
+		renderer.drawSolidRect(warmX + warmW + 2, warmY, warmW, warmH, [
+			1,
+			1,
+			1,
+			.35
+		]);
+		renderer.beginAdditiveBlend();
+		renderer.drawSoftCircle(warmX + warmW * .5, warmY + warmH * .5, Math.max(2, warmW * .25), [
+			1,
+			.9,
+			.4,
+			.4
+		]);
+		renderer.endAdditiveBlend();
+		this.isGpuPipelineWarmedUp = true;
+	}
+	trackOutroPerf(dt, now) {
+		if (this.runtime.phase !== "outro") {
+			this.resetPerfWindow();
+			return;
+		}
+		if (this.perfWindowStartedAt <= 0) this.perfWindowStartedAt = now;
+		this.perfFrameCount += 1;
+		if (dt > 20) this.perfOver20MsCount += 1;
+		this.perfDtSamples.push(dt);
+		if (now - this.perfWindowStartedAt < CascadingReel.PERF_WINDOW_MS) return;
+		this.flushPerfWindow();
+		this.perfWindowStartedAt = now;
+	}
+	resetPerfWindow() {
+		this.perfWindowStartedAt = 0;
+		this.perfFrameCount = 0;
+		this.perfOver20MsCount = 0;
+		this.perfDtSamples.length = 0;
+	}
+	flushPerfWindow() {
+		if (this.perfFrameCount === 0) return;
+		const sorted = [...this.perfDtSamples].sort((a, b) => a - b);
+		const p95Dt = sorted[Math.max(0, Math.min(sorted.length - 1, Math.floor(sorted.length * .95)))];
+		this.adjustMobileDprCap(p95Dt, this.perfOver20MsCount, this.perfFrameCount);
+		this.perfFrameCount = 0;
+		this.perfOver20MsCount = 0;
+		this.perfDtSamples.length = 0;
+	}
+	adjustMobileDprCap(p95Dt, slowFrames, totalFrames) {
+		if (!this.isCoarsePointerDevice) return;
+		if (totalFrames <= 0) return;
+		const slowRatio = slowFrames / totalFrames;
+		const isBadWindow = p95Dt > CascadingReel.PERF_BAD_P95_DT_MS || slowRatio > CascadingReel.PERF_BAD_SLOW_RATIO;
+		const isGoodWindow = p95Dt <= CascadingReel.PERF_GOOD_P95_DT_MS && slowFrames === 0;
+		let nextCap = this.mobileDprCap;
+		if (isBadWindow) {
+			this.mobilePerfBadWindows += 1;
+			this.mobilePerfGoodWindows = 0;
+			if (this.mobilePerfBadWindows >= CascadingReel.MOBILE_BAD_WINDOWS_TO_DECREASE_DPR) {
+				nextCap = Math.max(CascadingReel.MOBILE_DPR_CAP_MIN, this.mobileDprCap - CascadingReel.MOBILE_DPR_STEP_DOWN);
+				this.mobilePerfBadWindows = 0;
+			}
+		} else if (isGoodWindow) {
+			this.mobilePerfGoodWindows += 1;
+			this.mobilePerfBadWindows = 0;
+			if (this.mobilePerfGoodWindows >= CascadingReel.MOBILE_GOOD_WINDOWS_TO_INCREASE_DPR) {
+				nextCap = Math.min(CascadingReel.MOBILE_DPR_CAP_MAX, this.mobileDprCap + CascadingReel.MOBILE_DPR_STEP_UP);
+				this.mobilePerfGoodWindows = 0;
+			}
+		} else {
+			this.mobilePerfGoodWindows = 0;
+			this.mobilePerfBadWindows = 0;
+		}
+		if (Math.abs(nextCap - this.mobileDprCap) < .001) return;
+		this.mobileDprCap = nextCap;
+		this.resize();
+	}
+	render(now) {
+		if (!this.webglRenderer) return;
+		if (this.initialHighlightRequestedAt > 0 && now - this.initialHighlightRequestedAt >= 200) {
+			startWinFlash(this.runtime, this.initialHighlightRequestedAt);
+			this.runtime.winEffectsEnvelope = 1;
+			this.initialHighlightRequestedAt = 0;
+			if (this.button) this.button.disabled = false;
+		}
+		const winEffectsTarget = this.runtime.phase === "preSpin" ? 0 : this.runtime.phase === "winFlash" ? 1 : 0;
+		if (this.lastRafTime > 0) {
+			const dt = Math.min(now - this.lastRafTime, 50);
+			this.trackOutroPerf(dt, now);
+			const kWin = 1 - Math.exp(-dt / CascadingReel.WIN_EFFECTS_ENVELOPE_TAU_MS);
+			this.runtime.winEffectsEnvelope += (winEffectsTarget - this.runtime.winEffectsEnvelope) * kWin;
+		} else this.resetPerfWindow();
+		this.lastRafTime = now;
+		this.webglRenderer.beginFrame();
+		const skipWinningCells = this.runtime.phase === "winFlash" || this.runtime.phase === "preSpin" || this.initialHighlightRequestedAt > 0 && this.winningCells.length > 0;
+		if (this.runtime.phase === "outro" && this.scriptedOutgoingGrid && this.scriptedPendingGrid) {
+			this.drawGridInterpolated(this.scriptedOutgoingGrid, this.scriptedOutgoingOffsetsPrev, this.scriptedOutgoingOffsets, this.outroInterpolationAlpha, skipWinningCells);
+			this.drawGridInterpolated(this.scriptedPendingGrid, this.scriptedIncomingOffsetsPrev, this.scriptedIncomingOffsets, this.outroInterpolationAlpha, skipWinningCells, this.scriptedIncomingAlphaPrev, this.scriptedIncomingAlpha, this.scriptedIncomingVisibility);
+		} else this.drawGrid(this.grid, null, skipWinningCells);
+		const winPhase = this.initialHighlightRequestedAt > 0 ? "winFlash" : this.runtime.phase;
+		const winFlashStartedAt = this.initialHighlightRequestedAt > 0 ? this.initialHighlightRequestedAt : this.runtime.winFlashStartedAt;
+		const winEffectsEnvelope = this.initialHighlightRequestedAt > 0 ? 1 : this.runtime.winEffectsEnvelope;
+		this.drawWinningEffects({
+			now,
+			phase: winPhase,
+			winFlashStartedAt,
+			winEffectsEnvelope
+		});
+	}
+	isWinningCell = (col, row) => {
+		return this.winningCellKeys.has(`${col}:${row}`);
+	};
+	getRowCompactOffset(row) {
+		return (ROW_COMPACT_OFFSETS_RATIO[row] ?? 0) * this.cellH;
+	}
+	applyPixelSnapY(y) {
+		if (this.isCoarsePointerDevice) return Math.round(y * 2) / 2;
+		return y;
+	}
+	drawGrid(grid, offsets, skipWinningCells) {
+		this.drawGridWithSampler({
+			grid,
+			skipWinningCells,
+			sampleOffsetY: (col, row) => offsets ? offsets[col][row] : 0,
+			sampleAlpha: () => 1,
+			isVisible: () => true
+		});
+	}
+	drawGridInterpolated(grid, prevOffsets, currOffsets, alpha, skipWinningCells, prevOpacity, currOpacity, visibility) {
+		this.drawGridWithSampler({
+			grid,
+			skipWinningCells,
+			sampleOffsetY: (col, row) => prevOffsets[col][row] + (currOffsets[col][row] - prevOffsets[col][row]) * alpha,
+			sampleAlpha: (col, row) => prevOpacity && currOpacity ? prevOpacity[col][row] + (currOpacity[col][row] - prevOpacity[col][row]) * alpha : 1,
+			isVisible: (col, row) => !visibility || visibility[col][row] !== "hidden"
+		});
+	}
+	drawGridWithSampler(sampler) {
+		const renderer = this.webglRenderer;
+		if (!renderer) return;
+		for (let col = 0; col < 3; col += 1) {
+			const x = this.boardX + col * this.cellW;
+			for (let row = 0; row < 3; row += 1) {
+				if (sampler.skipWinningCells && this.isWinningCell(col, row)) continue;
+				if (!sampler.isVisible(col, row)) continue;
+				const offsetY = sampler.sampleOffsetY(col, row);
+				const y = this.applyPixelSnapY(this.boardY + row * this.cellH + offsetY + this.getRowCompactOffset(row));
+				if (y > this.height || y + this.cellH < 0) continue;
+				const spriteAlpha = sampler.sampleAlpha(col, row);
+				if (spriteAlpha <= 0) continue;
+				const symbolW = this.cellW * this.symbolScale;
+				const symbolH = this.cellH * this.symbolScale;
+				const symbolOffsetX = (this.cellW - symbolW) * .5;
+				const symbolOffsetY = (this.cellH - symbolH) * .5;
+				renderer.drawSprite(sampler.grid[col][row], x + symbolOffsetX, y + symbolOffsetY, symbolW, symbolH, spriteAlpha);
+			}
+		}
+	}
+	drawWinningEffects(params) {
+		const renderer = this.webglRenderer;
+		if (!renderer) return;
+		if (this.winningCells.length === 0) return;
+		if (params.phase !== "winFlash" && params.phase !== "preSpin") return;
+		const envelope = Math.max(0, Math.min(1, params.winEffectsEnvelope));
+		const elapsed = Math.max(0, params.now - params.winFlashStartedAt);
+		const pulseProgress = elapsed % FLOW_WIN_PULSE_PERIOD_MS / FLOW_WIN_PULSE_PERIOD_MS;
+		const pulse = 1 + Math.sin(pulseProgress * Math.PI * 2) * FLOW_WIN_PULSE_AMPLITUDE * envelope;
+		const borderInset = Math.max(1, this.cellW * CascadingReel.WIN_BORDER_INSET_RATIO);
+		const borderThickness = Math.max(1, this.cellW * .022);
+		const particleModeActive = this.runtime.phase === "winFlash" && this.runtime.shouldHighlightCurrentSpin && this.runtime.hasStartedFirstSpin;
+		for (const cell of this.winningCells) {
+			const baseX = this.boardX + cell.col * this.cellW;
+			const baseY = this.boardY + cell.row * this.cellH + this.getRowCompactOffset(cell.row);
+			const symbol = this.grid[cell.col][cell.row];
+			const alpha = CascadingReel.WIN_BORDER_ALPHA * envelope;
+			const borderColor = this.particleColorMode === "rainbow" ? CascadingReel.hslToRgb01((elapsed * .2 + cell.col * 36 + cell.row * 22) % 360, .96, .64) : [
+				this.particleColorRgb[0] / 255,
+				this.particleColorRgb[1] / 255,
+				this.particleColorRgb[2] / 255
+			];
+			const scaledW = this.cellW * this.symbolScale * pulse;
+			const scaledH = this.cellH * this.symbolScale * pulse;
+			const offsetX = (this.cellW - scaledW) * .5;
+			const offsetY = (this.cellH - scaledH) * .5;
+			renderer.drawSprite(symbol, baseX + offsetX, baseY + offsetY, scaledW, scaledH, 1);
+			const innerX = baseX + borderInset;
+			const innerY = baseY + borderInset;
+			const innerW = this.cellW - borderInset * 2;
+			const innerH = this.cellH - borderInset * 2;
+			if (innerW <= borderThickness * 2 || innerH <= borderThickness * 2) continue;
+			this.drawElectricBorder({
+				renderer,
+				cell,
+				x: innerX,
+				y: innerY,
+				w: innerW,
+				h: innerH,
+				borderThickness,
+				borderColor,
+				alpha,
+				elapsed,
+				envelope
+			});
+			if (particleModeActive) this.drawCellParticleBurst({
+				renderer,
+				cell,
+				centerX: baseX + this.cellW * .5,
+				centerY: baseY + this.cellH * .5,
+				elapsed,
+				envelope
+			});
+		}
+	}
+	drawCellParticleBurst(params) {
+		const maxDistance = Math.min(this.cellW, this.cellH) * CascadingReel.PARTICLE_MAX_DISTANCE;
+		const baseRadius = Math.min(this.cellW, this.cellH) * CascadingReel.PARTICLE_BASE_RADIUS;
+		const seedsList = CascadingReel.getParticleSeeds(params.cell.col, params.cell.row);
+		const solidColor = [
+			this.particleColorRgb[0] / 255,
+			this.particleColorRgb[1] / 255,
+			this.particleColorRgb[2] / 255
+		];
+		params.renderer.beginAdditiveBlend();
+		for (let i = 0; i < this.particlesPerCell; i += 1) {
+			const s = seedsList[i];
+			const startTime = s.phaseOffset * 720;
+			const age = params.elapsed - startTime;
+			if (age < 0) continue;
+			const particleT = age % 720 / 720;
+			const direction = s.seedA * Math.PI * 2;
+			const distance = maxDistance * particleT * (.35 + s.seedB * .65);
+			const px = params.centerX + Math.cos(direction) * distance;
+			const py = params.centerY + Math.sin(direction) * distance;
+			const twinkle = .7 + .9 * Math.max(0, Math.sin((params.elapsed * .012 + s.twinkleSeed * 2) * Math.PI * 2));
+			const radius = Math.max(1, baseRadius * (.55 + s.seedC * .6) * (1 - particleT * .5));
+			const alpha = Math.max(0, Math.min(1, (.9 + twinkle * .2) * CascadingReel.PARTICLE_GLOBAL_ALPHA * params.envelope));
+			if (alpha <= 0) continue;
+			const rgb = this.particleColorMode === "rainbow" ? CascadingReel.getRainbowParticleColor(params.elapsed, params.cell.col, params.cell.row, s.seedA) : solidColor;
+			params.renderer.drawSoftCircle(px, py, radius, [
+				rgb[0],
+				rgb[1],
+				rgb[2],
+				alpha
+			]);
+		}
+		params.renderer.endAdditiveBlend();
+	}
+	drawElectricBorder(params) {
+		const baseA = Math.max(0, Math.min(1, params.alpha * params.envelope));
+		const expand = params.borderThickness * 1.8;
+		const seedTime = params.elapsed + params.cell.col * 170 + params.cell.row * 290;
+		params.renderer.beginAdditiveBlend();
+		params.renderer.drawElectricBorder({
+			x: params.x - expand,
+			y: params.y - expand,
+			width: params.w + expand * 2,
+			height: params.h + expand * 2,
+			rgba: [
+				params.borderColor[0],
+				params.borderColor[1],
+				params.borderColor[2],
+				baseA * .55
+			],
+			timeMs: seedTime,
+			borderThicknessPx: Math.max(.8, params.borderThickness * 1.1),
+			borderInsetPx: expand * .85,
+			cornerRadiusPx: Math.max(2, params.borderThickness * 2.5),
+			noiseAmplitudePx: Math.max(.15, params.borderThickness * .6),
+			pulseStrength: .9
+		});
+		params.renderer.drawElectricBorder({
+			x: params.x - expand * .5,
+			y: params.y - expand * .5,
+			width: params.w + expand,
+			height: params.h + expand,
+			rgba: [
+				params.borderColor[0],
+				params.borderColor[1],
+				params.borderColor[2],
+				baseA * .9
+			],
+			timeMs: seedTime * 1.03,
+			borderThicknessPx: Math.max(.7, params.borderThickness * .8),
+			borderInsetPx: expand * .5,
+			cornerRadiusPx: Math.max(1.5, params.borderThickness * 1.7),
+			noiseAmplitudePx: Math.max(.12, params.borderThickness * .42),
+			pulseStrength: 1.25
+		});
+		params.renderer.endAdditiveBlend();
+	}
+	static hslToRgb01(hueDeg, saturation, lightness) {
+		const h = (hueDeg % 360 + 360) % 360;
+		const s = Math.max(0, Math.min(1, saturation));
+		const l = Math.max(0, Math.min(1, lightness));
+		const c = (1 - Math.abs(2 * l - 1)) * s;
+		const hp = h / 60;
+		const x = c * (1 - Math.abs(hp % 2 - 1));
+		let r = 0;
+		let g = 0;
+		let b = 0;
+		if (hp >= 0 && hp < 1) {
+			r = c;
+			g = x;
+		} else if (hp < 2) {
+			r = x;
+			g = c;
+		} else if (hp < 3) {
+			g = c;
+			b = x;
+		} else if (hp < 4) {
+			g = x;
+			b = c;
+		} else if (hp < 5) {
+			r = x;
+			b = c;
+		} else {
+			r = c;
+			b = x;
+		}
+		const m = l - c * .5;
+		return [
+			r + m,
+			g + m,
+			b + m
+		];
+	}
+	static getRainbowParticleColor(elapsed, col, row, seedA) {
+		const hueRaw = (seedA * 360 + elapsed * .24 + col * 38 + row * 22) % 360;
+		const bucket = 360 / CascadingReel.RAINBOW_HUE_BUCKETS;
+		const hue = Math.floor(hueRaw / bucket) * bucket;
+		return CascadingReel.hslToRgb01(hue, .98, .64);
+	}
+	static detectCoarsePointerDevice() {
+		if (typeof window === "undefined") return false;
+		const coarseMatch = typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+		const touchPoints = typeof navigator !== "undefined" && typeof navigator.maxTouchPoints === "number" ? navigator.maxTouchPoints : 0;
+		return coarseMatch || touchPoints > 0;
+	}
+	quantizeDprCap(value) {
+		const step = CascadingReel.DPR_QUANT_STEP;
+		return Math.max(1, Math.round(value / step) * step);
+	}
+	static hash01(a, b, c, d) {
+		const value = Math.sin(a * 127.1 + b * 311.7 + c * 74.7 + d * 19.3) * 43758.5453;
+		return value - Math.floor(value);
+	}
+	static getParticleSeeds(col, row) {
+		const key = `${col},${row}`;
+		const cached = CascadingReel.particleSeedsCache.get(key);
+		if (cached) return cached;
+		const generated = [];
+		for (let i = 0; i < 34; i += 1) generated.push({
+			seedA: CascadingReel.hash01(col, row, i, 1),
+			seedB: CascadingReel.hash01(col, row, i, 2),
+			seedC: CascadingReel.hash01(col, row, i, 3),
+			phaseOffset: CascadingReel.hash01(col, row, i, 4),
+			twinkleSeed: CascadingReel.hash01(col, row, i, 5)
+		});
+		CascadingReel.particleSeedsCache.set(key, generated);
+		return generated;
+	}
+	clearWinningCells() {
+		this.winningCells = [];
+		this.winningCellKeys.clear();
+	}
+	setWinningCells(cells) {
+		this.winningCells = cells;
+		this.winningCellKeys.clear();
+		for (const cell of cells) this.winningCellKeys.add(`${cell.col}:${cell.row}`);
+	}
+	resize = () => {
+		const bounds = this.container.getBoundingClientRect();
+		const cssSide = Math.max(300, Math.floor(bounds.width));
+		const cssArea = Math.max(1, cssSide * cssSide);
+		const maxCanvasArea = this.isCoarsePointerDevice ? CascadingReel.MAX_CANVAS_AREA_PX_COARSE : CascadingReel.MAX_CANVAS_AREA_PX_FINE;
+		const dprAreaCap = Math.max(1, Math.sqrt(maxCanvasArea / cssArea));
+		const requestedCap = this.isCoarsePointerDevice ? this.mobileDprCap : 2;
+		const dprCap = this.quantizeDprCap(Math.min(requestedCap, dprAreaCap));
+		const dpr = Math.max(1, Math.min(window.devicePixelRatio || 1, dprCap));
+		const side = Math.max(300, Math.floor(cssSide * dpr));
+		this.width = side;
+		this.height = side;
+		const squareSize = Math.floor(Math.min(this.width / 3, this.height / 3));
+		this.cellW = squareSize;
+		this.cellH = squareSize;
+		this.boardX = Math.floor((this.width - this.cellW * 3) / 2);
+		this.boardY = Math.floor((this.height - this.cellH * 3) / 2);
+		this.canvas.width = this.width;
+		this.canvas.height = this.height;
+		this.webglRenderer?.resize(this.width, this.height);
+	};
+	async loadSpriteIfProvided() {
+		if (!this.spriteSource) {
+			this.spriteImage = null;
+			this.spriteLoadError = null;
+			return;
+		}
+		if (typeof this.spriteSource !== "string") {
+			try {
+				await this.decodeSpriteImage(this.spriteSource);
+				this.spriteImage = this.spriteSource;
+				this.spriteLoadError = null;
+			} catch (error) {
+				this.spriteImage = null;
+				this.spriteLoadError = this.toSpriteLoadErrorMessage(error, "[HTMLImageElement]");
+			}
+			return;
+		}
+		const image = new Image();
+		image.decoding = "async";
+		image.crossOrigin = this.spriteCrossOrigin;
+		image.src = this.spriteSource;
+		try {
+			await this.decodeSpriteImage(image);
+			this.spriteImage = image;
+			this.spriteLoadError = null;
+		} catch (error) {
+			this.spriteImage = null;
+			this.spriteLoadError = this.toSpriteLoadErrorMessage(error, this.spriteSource);
+		}
+	}
+	async decodeSpriteImage(image) {
+		if (image.complete && image.naturalWidth > 0 && image.naturalHeight > 0) return;
+		await image.decode();
+	}
+	toSpriteLoadErrorMessage(error, spriteSourceLabel) {
+		return `failed to load sprite "${spriteSourceLabel}" - ${error instanceof Error ? `${error.name}: ${error.message}` : String(error)}`;
+	}
+	advanceSimulation(now) {
+		if (this.simulationLastNow <= 0) {
+			this.simulationLastNow = now;
+			this.update(now);
+			return;
+		}
+		const frameDt = Math.max(0, Math.min(now - this.simulationLastNow, CascadingReel.MAX_FRAME_DELTA_MS));
+		this.simulationLastNow = now;
+		this.update(now);
+		if (this.runtime.phase !== "outro") {
+			this.outroInterpolationAlpha = 1;
+			return;
+		}
+		this.advanceOutroFixedStep(frameDt);
+	}
+	advanceOutroFixedStep(frameDt) {
+		this.simulationAccumulatorMs += frameDt;
+		const stepMs = this.motionProfile.fixedStepMs;
+		let steps = 0;
+		while (this.simulationAccumulatorMs >= stepMs && steps < this.motionProfile.maxCatchUpStepsPerFrame && this.runtime.phase === "outro") {
+			this.snapshotOutroState();
+			this.stepScriptedOutro(stepMs);
+			this.simulationAccumulatorMs -= stepMs;
+			steps += 1;
+		}
+		if (this.runtime.phase !== "outro") {
+			this.outroInterpolationAlpha = 1;
+			return;
+		}
+		this.outroInterpolationAlpha = Math.max(0, Math.min(1, this.simulationAccumulatorMs / stepMs));
+	}
+	snapshotOutroState() {
+		this.copyOffsets(this.scriptedOutgoingOffsetsPrev, this.scriptedOutgoingOffsets);
+		this.copyOffsets(this.scriptedIncomingOffsetsPrev, this.scriptedIncomingOffsets);
+		this.copyOffsets(this.scriptedIncomingAlphaPrev, this.scriptedIncomingAlpha);
+		this.copyVisibility(this.scriptedIncomingVisibilityPrev, this.scriptedIncomingVisibility);
+	}
+	copyOffsets(target, source) {
+		for (let col = 0; col < 3; col += 1) for (let row = 0; row < 3; row += 1) target[col][row] = source[col][row];
+	}
+	copyVisibility(target, source) {
+		for (let col = 0; col < 3; col += 1) for (let row = 0; row < 3; row += 1) target[col][row] = source[col][row];
+	}
+	resetOutroBuffers(incomingAlpha, incomingVisibility) {
+		fillOffsets(this.scriptedOutgoingOffsets, 0);
+		fillOffsets(this.scriptedIncomingOffsets, 0);
+		fillOffsets(this.scriptedOutgoingOffsetsPrev, 0);
+		fillOffsets(this.scriptedIncomingOffsetsPrev, 0);
+		fillOffsets(this.scriptedIncomingAlpha, incomingAlpha);
+		fillOffsets(this.scriptedIncomingAlphaPrev, incomingAlpha);
+		this.fillVisibilityGrid(this.scriptedIncomingVisibility, incomingVisibility);
+		this.fillVisibilityGrid(this.scriptedIncomingVisibilityPrev, incomingVisibility);
+	}
+	static createVisibilityGrid(value) {
+		return Array.from({ length: 3 }, () => Array.from({ length: 3 }, () => value));
+	}
+	fillVisibilityGrid(grid, value) {
+		for (let col = 0; col < 3; col += 1) for (let row = 0; row < 3; row += 1) grid[col][row] = value;
+	}
+	startLoop() {
+		if (this.rafLoop.isRunning()) return;
+		this.rafLoop.start((time) => {
+			this.advanceSimulation(time);
+			this.render(time);
+			return this.shouldKeepAnimating();
+		});
+	}
+	shouldKeepAnimating() {
+		if (this.runtime.isSpinning) return true;
+		if (this.initialHighlightRequestedAt > 0) return true;
+		return this.runtime.winEffectsEnvelope > .001;
+	}
+};
+
+//#endregion
+exports.CascadingReel = CascadingReel;
+//# sourceMappingURL=index.cjs.map