/* ═══════════════════════════════════════════════════════════════════ * 背景紋 — the page ground. * * Six traditional Japanese patterns (和柄), plus bare ground, that the * player cycles through with the ▩ button (cyclePattern() in * shared/core.js) — eight grounds in all counting the seigaiha. The * choice is an attribute on : html[data-pattern="ogi"], … * * A non-donor only ever reaches two of them (seigaiha and 無地); the * rest are a donor perk. That split is in core.js, not here — this file * has no concept of who may see what, so a ground added below is * automatically donor-only unless FREE_PATTERNS says otherwise. * * ── How this hooks up ──────────────────────────────────────────── * A block here declares nothing but three custom properties — * --pat-img / --pat-size / --pat-pos — which shared/core.css's `body` * rule consumes. No selector here names an element, so the same rules * would drive a swatch tile (attribute on a
) unchanged if the * cycle button ever grows into a picker. * * 青海波 SEIGAIHA IS DELIBERATELY ABSENT. It is the var() fallback * baked into core.css's body rule, so an unrecognised (or missing) * data-pattern lands on it automatically — including the id this file * never defines, "seigaiha" itself. Adding a block for it here would * mean maintaining that gradient string in two places. * * ── House style, if you add one ────────────────────────────────── * Ink is always rgba(var(--zen-rgb), var(--zen-a)) — the token the * seigaiha uses, so a ground follows light/dark for free and no ground * can shout louder than another. Strokes are ~1px: --zen-a is only * .05, and a 2px line at that alpha already reads twice as heavy as * the seigaiha it replaces. The per-pattern multiplier on --pat-c * (1.0–1.35) is the one dial for evening out density — a sparse ground * needs more alpha than a dense one to feel the same weight. Tile * sizes sit in the 58–120px band the seigaiha's 68px anchors. * ═══════════════════════════════════════════════════════════════════ */ /* 無地 Muji — bare ground, no pattern at all. Together with the seigaiha this is what a non-donor cycles between; everything below is part of the donor thank-you (see FREE_PATTERNS in shared/core.js). Sizes and position are declared even though they can't matter with no image, so the block overrides all three properties rather than half-inheriting the fallback. */ [data-pattern="muji"] { --pat-img: none; --pat-size: auto; --pat-pos: 0 0; } /* 扇 Ōgi — fans. Arcs springing from the tile floor rather than closed rings, on the same half-drop grid as the seigaiha. */ [data-pattern="ogi"] { --pat-c: rgba(var(--zen-rgb), calc(var(--zen-a) * 1.2)); --pat-img: radial-gradient(circle at 50% 100%, #0000 0 calc(33% - 1px), var(--pat-c) calc(33% - 1px) 33%, #0000 33% calc(66% - 1px), var(--pat-c) calc(66% - 1px) 66%, #0000 66% calc(99% - 1px), var(--pat-c) calc(99% - 1px) 99%, #0000 99%), radial-gradient(circle at 50% 100%, #0000 0 calc(33% - 1px), var(--pat-c) calc(33% - 1px) 33%, #0000 33% calc(66% - 1px), var(--pat-c) calc(66% - 1px) 66%, #0000 66% calc(99% - 1px), var(--pat-c) calc(99% - 1px) 99%, #0000 99%); --pat-size: 76px 76px; --pat-pos: 0 0, 38px 38px; } /* 七宝 Shippō — the cloisonné lattice of interlocking circles, struck from the four edge midpoints so they overlap into petals. */ [data-pattern="shippo"] { --pat-c: rgba(var(--zen-rgb), calc(var(--zen-a) * 1.15)); --pat-img: radial-gradient(circle at 50% 0, #0000 0 calc(50% - 1px), var(--pat-c) calc(50% - 1px) 50%, #0000 50%), radial-gradient(circle at 50% 100%, #0000 0 calc(50% - 1px), var(--pat-c) calc(50% - 1px) 50%, #0000 50%), radial-gradient(circle at 0 50%, #0000 0 calc(50% - 1px), var(--pat-c) calc(50% - 1px) 50%, #0000 50%), radial-gradient(circle at 100% 50%, #0000 0 calc(50% - 1px), var(--pat-c) calc(50% - 1px) 50%, #0000 50%); --pat-size: 66px 66px; --pat-pos: 0 0; } /* 菱 Hishi — a woven diamond lattice, two hairline families at ±45°. The bands are quoted as percentages of the gradient line, which at 45° across a 68px tile is 68·√2 ≈ 96px — so the 1.4% band is ~1.3px. */ [data-pattern="hishi"] { --pat-c: rgba(var(--zen-rgb), calc(var(--zen-a) * 0.85)); --pat-l: #0000 0 38.6%, var(--pat-c) 38.6% 40%, #0000 40% 60%, var(--pat-c) 60% 61.4%, #0000 61.4%; --pat-img: linear-gradient(-45deg, var(--pat-l)), linear-gradient(45deg, var(--pat-l)); --pat-size: 68px 68px; --pat-pos: 0 0; } /* 輪 Rin — free-standing double rings on a half-drop grid. The radii are pulled in far enough that neighbours never touch (spacing 59.4px vs a 49px ring diameter), which makes this the airiest ground in the set. */ [data-pattern="rin"] { --pat-c: rgba(var(--zen-rgb), calc(var(--zen-a) * 1.3)); --pat-img: radial-gradient(circle at 50% 50%, #0000 0 26%, var(--pat-c) 26% 27.4%, #0000 27.4% 41%, var(--pat-c) 41% 42.4%, #0000 42.4%), radial-gradient(circle at 50% 50%, #0000 0 26%, var(--pat-c) 26% 27.4%, #0000 27.4% 41%, var(--pat-c) 41% 42.4%, #0000 42.4%); --pat-size: 84px 84px; --pat-pos: 0 0, 42px 42px; } /* 花 Hana — four petal arcs meeting at a blossom. The arcs are elliptical (27%×29% of the tile), so their stroke is a percentage of a ~32px radius: 3% lands at ~1px. */ [data-pattern="hana"] { --pat-c: rgba(var(--zen-rgb), calc(var(--zen-a) * 1.35)); --pat-g: #0000 0 88%, var(--pat-c) 89.5% 92.5%, #0000 94%; --pat-img: radial-gradient(27% 29% at right, var(--pat-g)), radial-gradient(27% 29% at left, var(--pat-g)), radial-gradient(29% 27% at top, var(--pat-g)), radial-gradient(29% 27% at bottom, var(--pat-g)); --pat-size: 60px 60px; --pat-pos: 15px 30px, -15px 30px, 0 15px, 0 -15px; } /* 波 Nami — cresting waves: five ring families whose arcs read as swells breaking over each other. The densest ground here, so it takes the ink at full strength with no multiplier. Each band is 1% of its gradient line (≈0.85–1.25px depending on the anchor). */ [data-pattern="nami"] { --pat-c: rgba(var(--zen-rgb), calc(var(--zen-a) * 0.65)); --pat-a: #0000 0 10%, var(--pat-c) 10% 11%, #0000 11% 23%, var(--pat-c) 23% 24%, #0000 24% 30%, var(--pat-c) 30% 31%, #0000 31% 43%, var(--pat-c) 43% 44%, #0000 44% 50%, var(--pat-c) 50% 51%, #0000 51% 63%, var(--pat-c) 63% 64%, #0000 64% 71%, var(--pat-c) 71% 72%, #0000 72%; --pat-b: #0000 0 5%, var(--pat-c) 5% 6%, #0000 6% 15%, var(--pat-c) 15% 16%, #0000 16% 20%, var(--pat-c) 20% 21%, #0000 21% 30%, var(--pat-c) 30% 31%, #0000 31% 35%, var(--pat-c) 35% 36%, #0000 36% 45%, var(--pat-c) 45% 46%, #0000 46% 49%, var(--pat-c) 49% 50%, #0000 50%; --pat-d: #0000 0 24%, var(--pat-c) 24% 25%, #0000 25% 28%, var(--pat-c) 28% 29%, #0000 29% 36%, var(--pat-c) 36% 37%, #0000 37% 40%, var(--pat-c) 40% 41%, #0000 41%; --pat-img: radial-gradient(circle at 100% 150%, var(--pat-d)), radial-gradient(circle at 0 150%, var(--pat-d)), radial-gradient(circle at 50% 100%, var(--pat-a)), radial-gradient(circle at 100% 50%, var(--pat-b)), radial-gradient(circle at 0 50%, var(--pat-b)); --pat-size: 120px 60px; --pat-pos: 0 0; }