@johnmorrisdotca/kyogijo-stadiums 0.4.0 → 0.5.0

package/dist/turn.markup.js

@@ -0,0 +1,108 @@
+// The 3D view as markup: a box, and in it the floor (the flat drawing) and every plane that stands on it. Nothing is nested in 3D (no `preserve-3d`, no
+// `perspective` on a parent): every element carries its whole place on the screen in one `matrix3d`, worked out here from the way the scene is looked at, and
+// the elements are stacked far to near by `z-index`. A browser that cannot keep nested 3D layers (Safari on a phone can lose them) draws it as it is meant.
+// The same text is what a page is given from `turnMarkup` and what the mount writes; the mount then makes it turn.
+import { TURN_PRESET_NAMES, cameraMatrix, depthOf, eyeDistance, fit, matrix3d, multiply, presetOf } from "./turn.camera.js";
+import { cross, facing, fadeOf, n, size, unit } from "./turn.kit.js";
+import { buildTurn, turnWords } from "./turn.model.js";
+import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
+import { esc } from "./format.js";
+const px = (value) => `${Math.round(value * 1000) / 1000}`;
+/**
+ * The matrix that stands a plane in the scene, before the camera: its x along `u`, its y along `v`, its corner `o`, in pixels from the middle of the scene
+ * (`centre`, in feet).
+ */
+export function planeMatrix(p, scale, centre = [0, 0]) {
+    const u = unit(p.u);
+    const v = unit(p.v);
+    const w = unit(cross(u, v));
+    return [u[0], u[1], u[2], 0, v[0], v[1], v[2], 0, w[0], w[1], w[2], 0, (p.o[0] - centre[0]) * scale, (p.o[1] - centre[1]) * scale, p.o[2] * scale, 1];
+}
+/** Work a view out in a container `width` by `height` pixels. */
+export function layoutOf(model, view, width, height, lens) {
+    const distance = eyeDistance(width, height, lens);
+    const at = fit(model.box, { ...view, zoom: 1 }, width, height, distance);
+    const camera = cameraMatrix(view, at, distance);
+    const s = model.scale;
+    const centre = model.centre;
+    const floor = { id: "floor", kind: "ground", o: [model.viewBox.x, model.viewBox.y, model.uprights.lift], u: [model.viewBox.w, 0, 0], v: [0, model.viewBox.h, 0], svg: "" };
+    // A billboard faces the eye at this view.
+    const planes = model.planes.map((p) => facing(p, view.yaw));
+    const transforms = [floor, ...planes].map((p) => matrix3d(multiply(camera, planeMatrix(p, s, centre))));
+    // Far to near: a plane's depth is that of its middle. The ground of a hall is under everything, the floor next.
+    const order = planes
+        .map((p, i) => ({ i, ground: p.kind === "ground", depth: depthOf([(p.o[0] + (p.u[0] + p.v[0]) / 2 - centre[0]) * s, (p.o[1] + (p.u[1] + p.v[1]) / 2 - centre[1]) * s, (p.o[2] + (p.u[2] + p.v[2]) / 2) * s], view, at) }))
+        .filter((one) => !one.ground);
+    order.sort((a, b) => a.depth - b.depth);
+    const stack = new Array(model.planes.length + 1).fill(0);
+    stack[0] = 1;
+    order.forEach((one, rank) => {
+        stack[one.i + 1] = rank + 2;
+    });
+    const fade = [1, ...model.planes.map((p) => fadeOf(p, view.yaw, view.pitch))];
+    return { at, transforms, stack, fade };
+}
+/** One plane as an element: its box in pixels and the SVG drawn on it in feet. */
+export function planeMarkup(p, scale, transform, stack, fade = 1) {
+    const [w, h] = size(p);
+    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" style="width:${px(w * scale)}px;height:${px(h * scale)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(w)} ${n(h)}" width="${px(w * scale)}" height="${px(h * scale)}" aria-hidden="true" focusable="false">${p.svg}</svg></div>`;
+}
+/** The floor as an element: the flat drawing, in the pixels of the scene. */
+export function floorMarkup(model, transform, stack) {
+    const vb = model.viewBox;
+    return `<div class="ky-turn-floor" style="width:${px(vb.w * model.scale)}px;height:${px(vb.h * model.scale)}px;transform:${transform};z-index:${stack}">${model.floor}</div>`;
+}
+/** The floor and the planes of a model, laid out. */
+export function worldMarkup(model, layout) {
+    return floorMarkup(model, layout.transforms[0], layout.stack[0]) + model.planes.map((p, i) => planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1])).join("");
+}
+/** The buttons under the view. */
+export function controlsMarkup(model, view) {
+    const words = turnWords(model);
+    const here = presetOf(view, model.options.sport);
+    const presets = TURN_PRESET_NAMES.map((name, i) => `<button type="button" data-preset="${name}" aria-pressed="${here === name}" aria-keyshortcuts="${i + 1}">${esc(words[name])}</button>`).join("");
+    const tools = [
+        ["turn-left", "↺", words.turnLeft],
+        ["turn-right", "↻", words.turnRight],
+        ["raise", "↑", words.raise],
+        ["lower", "↓", words.lower],
+        ["zoom-in", "+", words.zoomIn],
+        ["zoom-out", "−", words.zoomOut],
+    ];
+    const buttons = tools.map(([act, glyph, label]) => `<button type="button" data-act="${act}" aria-label="${esc(label)}" title="${esc(label)}">${glyph}</button>`).join("");
+    return `<div class="ky-turn-controls"><div class="ky-turn-group" role="group" aria-label="${esc(words.group)}">${presets}</div><div class="ky-turn-group">${buttons}<button type="button" data-act="reset" aria-keyshortcuts="0 Home">${esc(words.reset)}</button></div></div>`;
+}
+/** The size, in pixels, the first view is worked out for. */
+export const sizeOf = (settings) => settings.size ?? { width: 960, height: 600 };
+/** The 3D view of a model as markup, laid out for `settings.size`; a page's script then makes it turn. */
+export function turnMarkupOf(model, settings = {}) {
+    const words = turnWords(model);
+    const { width, height } = sizeOf(settings);
+    const view = model.view;
+    const layout = layoutOf(model, view, width, height, settings.lens);
+    const keys = `${words.keys}${model.standing === "" ? "" : ` ${model.standing}`}`;
+    const sheet = model.options.style === "none" ? "" : `<style>${KYOGIJO_TURN_STYLE}</style>`;
+    const theme = model.options.theme;
+    const sport = model.options.sport;
+    return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, sport) ?? "custom"}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
+        sheet +
+        `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home"><div class="ky-turn-world">${worldMarkup(model, layout)}</div></div>` +
+        `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +
+        (settings.controls === false ? "" : controlsMarkup(model, view)) +
+        `<div class="ky-turn-live" role="status" aria-live="polite"></div>` +
+        `</div>`);
+}
+/**
+ * A surface as a 3D view, as markup: the flat drawing for a floor, what stands on it as planes, and the controls under it. Pure, so it can be made on a
+ * server; it is a still picture until `mountKyogijoTurn` (or the element) makes it turn in a page.
+ * @example
+ * ```ts
+ * import { turnMarkup } from "@johnmorrisdotca/kyogijo-stadiums/turn";
+ * const html = turnMarkup({ sport: "volleyball" }, { preset: "end" });
+ * console.log(html.includes("ky-turn"), html.includes('data-part="net"'));
+ * // true true
+ * ```
+ */
+export function turnMarkup(options, settings = {}) {
+    return turnMarkupOf(buildTurn(options, settings), settings);
+}

package/dist/turn.model.d.ts

@@ -0,0 +1,78 @@
+import { KYOGIJO_STRINGS } from "./strings.ts";
+import { type TurnPreset, type TurnView } from "./turn.camera.ts";
+import type { Plane } from "./turn.kit.ts";
+import { type UprightOptions, type Uprights } from "./uprights.ts";
+import type { Box3 } from "./turn.camera.ts";
+import type { Language, ScoreOptions, SurfaceOptions } from "./types.ts";
+/** What can be asked of a 3D view. */
+export interface TurnSettings {
+    /** The viewpoint it opens on: `overhead`, `broadcast`, `end` or `corner` (the default). */
+    preset?: TurnPreset;
+    /** An exact opening view, laid over the preset's. */
+    view?: Partial<TurnView>;
+    /** Whether the buttons under the view are drawn (a row of viewpoints, turn, raise, zoom and reset). True when left out; the keys and the pointer work either way. */
+    controls?: boolean;
+    /** What stands on the surface: `false` for the floor alone, or which kinds, whether the boards and the glass are drawn, the height of a volleyball net. True when left out. */
+    uprights?: boolean | UprightOptions;
+    /** Where the score of a score drawing goes: `board` (the default) hangs it up as a scoreboard that faces the eye (over the middle of a court or a rink, behind an end of a field, behind centre field in a ballpark) and takes the panel off the floor; `floor` leaves the panel on the floor. */
+    score?: "board" | "floor";
+    /** What a finger does on the view: `scroll` (the default) lets a vertical swipe scroll the page and a sideways one turn the view; `turn` keeps every touch for the view, which then also tips it. */
+    touch?: "scroll" | "turn";
+    /** `smooth` glides between viewpoints, `none` jumps; `auto` (the default) glides unless the reader prefers reduced motion. */
+    motion?: "auto" | "smooth" | "none";
+    /** The drawing the floor is, in place of `drawKyogijo`: a chart's `draw`, for instance. It is given the options with the view's own changes (the whole surface, lying wide). */
+    floor?: (options: SurfaceOptions | ScoreOptions) => string;
+    /** How long a lens the eye has, as a multiple of the view's longer side: 1.7 by default, and the larger it is the flatter the picture. */
+    lens?: number;
+    /** The size the first view is worked out for, in pixels, when the markup is made away from a page. 960 by 600 by default. */
+    size?: {
+        width: number;
+        height: number;
+    };
+    /** The prefix of the ids in the view, for a page with more than one. A hash of the options when missing. */
+    id?: string;
+    /** Called after the view has changed by a key, a button or the pointer, with the view and the viewpoint it is (`undefined` when it has been turned by hand). */
+    onChange?: (view: TurnView, preset: TurnPreset | undefined) => void;
+}
+/** The pixels in one foot of the scene at a zoom of 1: the floor is drawn this big, and scaled down to fit. A larger floor is sharper. */
+export declare const WORLD_PX = 1400;
+/** Everything a 3D view is made of. */
+export interface TurnModel {
+    id: string;
+    language: Language;
+    /** The options the floor is drawn from: the whole surface, lying wide. */
+    options: SurfaceOptions | ScoreOptions;
+    title: string;
+    /** What the drawing says, and then what stands on it. */
+    description: string;
+    /** The sentence about what stands on the surface, or an empty string. */
+    standing: string;
+    /** The floor: the markup of the flat drawing. */
+    floor: string;
+    /** The floor's viewBox in feet. */
+    viewBox: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    /** Pixels in a foot. */
+    scale: number;
+    uprights: Uprights;
+    planes: Plane[];
+    /** The whole scene in pixels, from its middle: the floor's rectangle, and the height of the highest thing. */
+    box: Box3;
+    /** The middle of the floor, in feet. */
+    centre: [number, number];
+    view: TurnView;
+    /** False when there is nothing to turn: a badge is a strip, not a surface. */
+    turnable: boolean;
+}
+/** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
+export declare function floorOptions(options: SurfaceOptions | ScoreOptions): SurfaceOptions | ScoreOptions;
+/** The view a set of settings opens on. */
+export declare const openingView: (settings: Pick<TurnSettings, "preset" | "view">, sport?: string) => TurnView;
+/** Work out a 3D view from the options of a drawing. */
+export declare function buildTurn(options: SurfaceOptions | ScoreOptions, settings?: TurnSettings): TurnModel;
+/** The words of the 3D view in the model's language. */
+export declare const turnWords: (model: Pick<TurnModel, "language">) => (typeof KYOGIJO_STRINGS)["en"]["turn"];

package/dist/turn.model.js

@@ -0,0 +1,91 @@
+// The 3D view as data: the flat drawing that is its floor, what stands on it, and the sizes that put them in one scene. `buildTurn` works it all out from the
+// drawing's own options, in Node or in a page; `turn.markup.ts` writes it as markup and `turn.dom.ts` makes it turn.
+import { describe, drawKyogijo } from "./draw.js";
+import { hash } from "./format.js";
+import { KYOGIJO_STRINGS } from "./strings.js";
+import { TURN_DEFAULT, clampView, presetView } from "./turn.camera.js";
+import { describeUprights, planesOf, uprightsFor } from "./uprights.js";
+/** The pixels in one foot of the scene at a zoom of 1: the floor is drawn this big, and scaled down to fit. A larger floor is sharper. */
+export const WORLD_PX = 1400;
+/** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
+export function floorOptions(options) {
+    const rest = { ...options, orientation: "landscape" };
+    delete rest.range;
+    delete rest.half;
+    delete rest.aspect;
+    return rest;
+}
+const VIEWBOX = /viewBox="(-?[\d.]+) (-?[\d.]+) ([\d.]+) ([\d.]+)"/;
+/** The view a set of settings opens on. */
+export const openingView = (settings, sport) => clampView({ ...(presetView(settings.preset, sport) ?? presetView(TURN_DEFAULT, sport)), ...settings.view });
+/** Work out a 3D view from the options of a drawing. */
+export function buildTurn(options, settings = {}) {
+    const asked = floorOptions(options);
+    const language = asked.language === "ja" ? "ja" : "en";
+    const wanted = settings.uprights;
+    const badge = asked.size === "badge";
+    const upOptions = wanted === false || wanted === true || wanted === undefined ? {} : wanted;
+    const uprights = wanted === false || badge ? { items: [], lift: 0, thin: 0.2 } : uprightsFor(asked, { ...upOptions, score: settings.score ?? upOptions.score });
+    // The score hung up as a scoreboard is not on the floor too.
+    const boarded = uprights.items.some((item) => item.kind === "scoreboard");
+    const o = boarded ? { ...asked, plate: false, size: asked.size === "compact" ? "full" : asked.size } : asked;
+    const floor = settings.floor === undefined ? drawKyogijo(o) : settings.floor(o);
+    const found = VIEWBOX.exec(floor);
+    if (found === null)
+        throw new Error("the floor of a 3D view must be an SVG with a viewBox");
+    const [vx, vy, vw, vh] = found.slice(1).map(Number);
+    const planes = planesOf(uprights);
+    const scale = WORLD_PX / Math.max(vw, vh);
+    const centre = [vx + vw / 2, vy + vh / 2];
+    // The scene's extent: the playing surface (the whole floor where it has no uprights), and whatever stands beyond it (a net behind a goal line). The ground
+    // round the surface is not counted, so that the view is fitted to what is played on and the ground runs out of the picture.
+    const area = uprights.area ?? { x0: vx, y0: vy, x1: vx + vw, y1: vy + vh };
+    let [x0, y0, x1, y1] = [area.x0, area.y0, area.x1, area.y1];
+    let top = uprights.lift;
+    for (const p of planes) {
+        // A billboard turns about its middle: whichever way it faces, it lies within a circle as wide as it is.
+        const reach = p.billboard === true ? Math.hypot(...p.u) / 2 : 0;
+        for (const [a, b] of [[0, 0], [1, 0], [0, 1], [1, 1]]) {
+            const point = [p.o[0] + a * p.u[0] + b * p.v[0], p.o[1] + a * p.u[1] + b * p.v[1], p.o[2] + a * p.u[2] + b * p.v[2]];
+            if (reach > 0) {
+                const middle = [p.o[0] + (p.u[0] + p.v[0]) / 2, p.o[1] + (p.u[1] + p.v[1]) / 2];
+                x0 = Math.min(x0, middle[0] - reach);
+                x1 = Math.max(x1, middle[0] + reach);
+                y0 = Math.min(y0, middle[1] - reach);
+                y1 = Math.max(y1, middle[1] + reach);
+                top = Math.max(top, point[2]);
+                continue;
+            }
+            if (p.kind !== "ground") {
+                x0 = Math.min(x0, point[0]);
+                x1 = Math.max(x1, point[0]);
+                y0 = Math.min(y0, point[1]);
+                y1 = Math.max(y1, point[1]);
+            }
+            top = Math.max(top, point[2]);
+        }
+    }
+    const box = { x0: (x0 - centre[0]) * scale, x1: (x1 - centre[0]) * scale, y0: (y0 - centre[1]) * scale, y1: (y1 - centre[1]) * scale, z0: 0, z1: top * scale };
+    const { title, description } = describe(o);
+    const standing = describeUprights(o, uprights, language);
+    const id = settings.id ?? (typeof options.id === "string" && options.id !== "" ? `${options.id}-turn` : `ky-turn-${hash(JSON.stringify([options, settings.uprights, settings.preset]))}`);
+    return {
+        id,
+        language,
+        options: o,
+        title,
+        description: standing === "" ? description : `${description} ${standing}`,
+        standing,
+        floor,
+        viewBox: { x: vx, y: vy, w: vw, h: vh },
+        scale,
+        uprights,
+        planes,
+        box,
+        centre,
+        view: openingView(settings, o.sport),
+        turnable: !badge,
+    };
+}
+/** The words of the 3D view in the model's language. */
+export const turnWords = (model) => KYOGIJO_STRINGS[model.language].turn;

package/dist/turn.style.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The 3D view's stylesheet: the colours of what stands on the surface, in light and dark, and the rules that lay the scene out. Like the drawing's own, the
+ * defaults are in `:where()`, which has no weight, so a page's own rule always wins; the colours are custom properties (`--ky-up-*`) a page can set.
+ */
+export declare const KYOGIJO_TURN_STYLE: string;

package/dist/turn.style.js

@@ -0,0 +1,55 @@
+/**
+ * The 3D view's stylesheet: the colours of what stands on the surface, in light and dark, and the rules that lay the scene out. Like the drawing's own, the
+ * defaults are in `:where()`, which has no weight, so a page's own rule always wins; the colours are custom properties (`--ky-up-*`) a page can set.
+ */
+export const KYOGIJO_TURN_STYLE = `
+:where(.ky-turn){--ky-up-sbframe:#1a1f1c;--ky-up-sbedge:#5b645e;--ky-up-sbline:#59615b;--ky-up-pole:#e9e7de;--ky-up-white:#f6f4ec;--ky-up-yellow:#f2c230;--ky-up-red:#c8372d;--ky-up-orange:#f26a1b;--ky-up-wood:#e3d4b4;--ky-up-leg:#474e49;--ky-up-pad:#2f6db0;--ky-up-table:#18243f;--ky-up-foot:rgba(0,0,0,.25);--ky-up-ground:#d9d5c7;--ky-up-wall:#2f4a36;--ky-up-cap:#1d2a22;--ky-up-board:#ece9df;--ky-up-glass:rgba(138,190,232,.26);--ky-up-backboard:rgba(255,255,255,.88);--ky-up-outline:#f2f0e6;--ky-up-rim:#e8591a;--ky-up-mesh:rgba(24,30,27,.7);--ky-up-netfill:rgba(255,255,255,.2);--ky-up-tape:#fbfaf4;--ky-turn-bg:transparent;--ky-turn-ink:#1f2320;--ky-turn-rule:rgba(31,35,32,.22);--ky-turn-chip:rgba(255,255,255,.86);--ky-turn-chip-on:#1f2320;--ky-turn-chip-on-ink:#fff}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .ky-turn:not([data-theme=light])){--ky-up-sbframe:#0c0f0d;--ky-up-sbedge:#7a847d;--ky-up-sbline:#8a928c;--ky-up-pole:#d6d4ca;--ky-up-white:#e8e6dc;--ky-up-wood:#a89873;--ky-up-leg:#8a928c;--ky-up-ground:#242823;--ky-up-wall:#4d6b55;--ky-up-cap:#c9d2cc;--ky-up-board:#8d928b;--ky-up-glass:rgba(150,200,240,.2);--ky-up-backboard:rgba(255,255,255,.34);--ky-up-outline:#e7e4d8;--ky-up-mesh:rgba(236,236,226,.62);--ky-up-netfill:rgba(255,255,255,.08);--ky-up-tape:#efede2;--ky-turn-ink:#ece8dc;--ky-turn-rule:rgba(236,232,220,.28);--ky-turn-chip:rgba(24,28,25,.82);--ky-turn-chip-on:#ece8dc;--ky-turn-chip-on-ink:#1f2320}}
+:where(html[data-theme=dark] .ky-turn,.ky-turn[data-theme=dark]){--ky-up-sbframe:#0c0f0d;--ky-up-sbedge:#7a847d;--ky-up-sbline:#8a928c;--ky-up-pole:#d6d4ca;--ky-up-white:#e8e6dc;--ky-up-wood:#a89873;--ky-up-leg:#8a928c;--ky-up-ground:#242823;--ky-up-wall:#4d6b55;--ky-up-cap:#c9d2cc;--ky-up-board:#8d928b;--ky-up-glass:rgba(150,200,240,.2);--ky-up-backboard:rgba(255,255,255,.34);--ky-up-outline:#e7e4d8;--ky-up-mesh:rgba(236,236,226,.62);--ky-up-netfill:rgba(255,255,255,.08);--ky-up-tape:#efede2;--ky-turn-ink:#ece8dc;--ky-turn-rule:rgba(236,232,220,.28);--ky-turn-chip:rgba(24,28,25,.82);--ky-turn-chip-on:#ece8dc;--ky-turn-chip-on-ink:#1f2320}
+.ky-turn{position:relative;display:block;width:100%;color:var(--ky-turn-ink);font-family:var(--ky-font,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif);background:var(--ky-turn-bg)}
+.ky-turn-view{position:relative;isolation:isolate;width:100%;aspect-ratio:var(--ky-turn-ratio,16/10);min-height:260px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;border-radius:12px;outline-offset:2px}
+.ky-turn[data-touch=turn] .ky-turn-view{touch-action:none}
+.ky-turn[data-dragging] .ky-turn-view{cursor:grabbing}
+.ky-turn-view:focus-visible{outline:3px solid var(--ky-turn-ink)}
+.ky-turn-world{position:absolute;left:50%;top:50%;width:0;height:0}
+.ky-turn-floor,.ky-up{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
+.ky-turn-floor>svg{display:block;width:100%;height:auto}
+.ky-up>svg{display:block;overflow:visible}
+@media (max-width:560px){.ky-turn-view{--ky-turn-ratio:5/4}.ky-turn-controls button{padding:0 10px;font-size:.85rem}}
+.ky-turn .u-sbframe{fill:var(--ky-up-sbframe);stroke:var(--ky-up-sbedge);stroke-width:.25}
+.ky-turn .u-sbline{stroke:var(--ky-up-sbline)}
+.ky-turn .u-pole{fill:var(--ky-up-pole)}
+.ky-turn .u-white{fill:var(--ky-up-white)}
+.ky-turn .u-yellow{fill:var(--ky-up-yellow)}
+.ky-turn .u-red{fill:var(--ky-up-red)}
+.ky-turn .u-orange{fill:var(--ky-up-orange)}
+.ky-turn .u-wood{fill:var(--ky-up-wood)}
+.ky-turn .u-leg{fill:var(--ky-up-leg)}
+.ky-turn .u-pad{fill:var(--ky-up-pad)}
+.ky-turn .u-table{fill:var(--ky-up-table)}
+.ky-turn .u-foot{fill:var(--ky-up-foot)}
+.ky-turn .u-ground{fill:var(--ky-up-ground)}
+.ky-turn .u-wall{fill:var(--ky-up-wall)}
+.ky-turn .u-cap{fill:var(--ky-up-cap)}
+.ky-turn .u-board{fill:var(--ky-up-board)}
+.ky-turn .u-glass{fill:var(--ky-up-glass)}
+.ky-turn .u-backboard{fill:var(--ky-up-backboard)}
+.ky-turn .u-outline{stroke:var(--ky-up-outline)}
+.ky-turn .u-rimline{stroke:var(--ky-up-rim)}
+.ky-turn .u-netfill{fill:var(--ky-up-netfill)}
+.ky-turn .u-mesh{stroke:var(--ky-up-mesh);stroke-linecap:round}
+.ky-turn .u-tape{fill:var(--ky-up-tape)}
+.ky-turn .u-tapeline{stroke:var(--ky-up-tape)}
+.ky-turn .u-flag{fill:var(--ky-up-orange)}
+.ky-turn .u-frame-white{stroke:var(--ky-up-white)}
+.ky-turn .u-frame-red{stroke:var(--ky-up-red)}
+.ky-turn-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
+.ky-turn-group{display:flex;flex-wrap:wrap;gap:6px}
+.ky-turn-controls button{font:inherit;font-size:.9rem;font-weight:600;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--ky-turn-rule);background:var(--ky-turn-chip);color:var(--ky-turn-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
+.ky-turn-controls button[aria-pressed=true]{background:var(--ky-turn-chip-on);color:var(--ky-turn-chip-on-ink);border-color:var(--ky-turn-chip-on)}
+.ky-turn-controls button[data-act]:not([data-act=reset]){font-size:1.2rem}
+.ky-turn-controls button:focus-visible{outline:3px solid var(--ky-turn-ink);outline-offset:2px}
+.ky-turn-controls button:disabled{opacity:.4;cursor:default}
+.ky-turn-help,.ky-turn-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
+.ky-turn-flat{margin:8px 0 0;font-size:.85rem}
+`.trim();