/* 朱砂 Vermilion — lacquer, gold leaf and black ink.
*
* The Chinese default, and the first file written against the token
* contract. A palace card should not look like a form; it should look
* like a sealed document somebody was not supposed to read — a cinnabar
* box in daylight, the same box by lamplight after dark.
*
* Every red in the chrome moved about ten degrees toward orange in the
* round that finished the roster, and it moved *toward* this theme's own
* reference rather than away from it: 朱砂 is cinnabar, a mercury
* sulphide that grinds to a red-**orange**, and the file had been sitting
* at four to seven degrees of hue, which is a plain red. The occasion was
* Rouge arriving — deep crimson pulled toward magenta, the one theme on
* the roster a player could confuse this one with. Two red themes at a
* glance is a shelf with a hue slider on it, so the older file with the
* more specific pigment behind it is the one that went where its pigment
* already was. The parchment column did not move: it was already a warm
* thirty-three to forty degrees and it is the calm half.
*
* One discipline outranks all of that: the reading column stays calm.
* The lacquer, the gold and the seal are the chrome *around* the prose.
* Inside it there is dark ink on warm parchment and nothing else, in both
* colour schemes, and the contrast floor is the number that says so.
*
* Everything here is a token assignment. A theme owns the palette; the
* page owns the layout, and the two never argue.
*/
html[data-theme="vermilion"] {
/* ── surface ──────────────────────────────────────────────────
朱漆 — vermilion lacquer under daylight. Not near-black: the ground
is red, and the red is what the eye names before it names anything
else. It is a red with the sun in it — fourteen to eighteen degrees
of hue rather than four — so that beside Rouge's #3a1622, which sits
at three hundred and forty, the two read as different pigments
instead of two settings of one. Corners are square because a lacquer
box has no radius and a sealed document is not a rounded card. */
--bg: #3a1c12;
--panel: #4a2516;
--rail: #2c150e;
--sunk: #2a140d;
--line: #7a4124;
--line-soft:#5a2e18;
--radius: 2px;
/* A gold top-light on every raised surface, then the box's own shadow
dropped a long way — lacquer is glossy, so the highlight is as much
of the depth as the shadow is. */
--shadow: 0 1px 0 rgba(232,180,72,.10),
0 2px 3px rgba(0,0,0,.45),
0 18px 40px -20px rgba(0,0,0,.78);
/* The washes behind the page and the palette the thirty-five scene
SVGs draw from — a sun going down behind a lacquered screen, which
is what repaints every one of them at once. */
--wash: #34180f;
--wash-2: #46210f;
--tint: #5a2e14;
--glow: rgba(232,180,72,.14);
--sky-0: #5c2b14; --sky-1: #9c4b1c;
--sun: #e8b448;
--mtn-far: #7b4120; --mtn-mid: #5a2e17; --mtn-near: #3a1b10;
/* ── ink ──────────────────────────────────────────────────────
Ivory rather than white: paper laid over lacquer, never a light
bulb. Dialogue in the chrome takes gold, where paper takes a cool
blue — the lift off the narration is the same, the direction is the
one this palette has to give. */
--ink: #f5e6c8;
--ink-2: #d3b98d;
--dim: #a08865;
--quote: #d8b25a;
/* ── accent ───────────────────────────────────────────────────
Cinnabar on lacquer, which is nearly the whole problem of this
theme: the accent has to separate from a ground that is already
red, so it goes *hotter* rather than darker — further into the
orange than the surfaces went, which is the direction a pigment
separates from its own ground in. --accent-2 lifts further still,
because on a dark ground the second accent is the *lighter* one —
the opposite of paper, and the reason the token has its own name
instead of being derived. */
--accent: #b4380c;
--accent-2: #e8854c;
--accent-soft: #4d2413;
/* Ink on a solid cinnabar fill — a button label, never the page.
Warmed ivory rather than white, so it reads as leaf on lacquer. It
used to clear the 4.5 floor by half a point in the light scheme and
by less than that in the dark, which is the margin a later batch was
told is thin; moving the accent toward orange raised its luminance
and would have taken it under, so the accent went a stop deeper at
the same time. **5.67:1 light and 5.82 dark**, both better than the
4.98 and 4.67 this file shipped with. */
--accent-ink: #fff8ef;
--warn: #f07a5a;
--good: #79a86e;
/* The rarity ladder. Content the model emits, so all ten are answered
for, and all ten are pitched to read against --panel rather than
against paper — 白 and 黑 are the two that break if a theme only
recolours: white jade has to stay bright, and 黑 cannot be black on
black, so it is pewter here. */
--r-白: #ddd2c0; --r-灰: #a89c8c; --r-绿: #7cb182; --r-蓝: #6aa8d8;
--r-紫: #b98ad8; --r-金: #e5bb52; --r-红: #ef6a56; --r-粉: #ee8fbc;
--r-黑: #9b8a7a; --r-橙: #f0973f;
/* ── type ─────────────────────────────────────────────────────
Songti on every screen title, tracked wide the way a title slip on a
scroll is spaced, and at 600 rather than 700 — Songti's heavy weights
fill in at small sizes. --tracking-display is *added* to each title's
own base, so .16em here is .16em of extra air. --font and --serif are
inherited: the stock CJK stacks are already the right ones, and
retyping eight family names to satisfy a checklist is how a theme
acquires a font bug nobody can see. */
--font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC",
"STSong", "SimSun", Georgia, serif;
--font-mono: ui-monospace, "Sarasa Mono SC", Menlo, Consolas, monospace;
--tracking-display: .16em;
--weight-display: 600;
--case-display: none;
/* ── texture and ornament ─────────────────────────────────────
Data-URI SVG and gradients only; a theme is one text file, so it
cannot half-load. The page gets a lacquer sheen, the panels get gold
leaf flecked into them, and the overlay is a silk warp — one pixel
in four, dark, and nowhere near the prose.
The warp is at .06 rather than the .10 it shipped at, and the reason
is where it lands: over the shelf's card covers. At .10 it was
invisible on the dark covers and pronounced on the pale ones, so one
treatment read as a material on some cards and as interference on
others — over artwork that is each game's identity. The pitch is
unchanged, because widening it would make the weave read more
deliberately and more visibly, and visible-over-art is the failure to
avoid. */
--tex-page: radial-gradient(ellipse at 18% -10%, rgba(232,180,72,.10), transparent 58%),
radial-gradient(ellipse at 104% 96%, rgba(180,56,12,.16), transparent 54%);
--tex-panel: url("data:image/svg+xml,");
--tex-overlay: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px,
transparent 1px 4px);
--frame-panel: 1px solid #8a5a22;
--corner: "❖";
/* ── motion ───────────────────────────────────────────────────
Four hooks, and every duration multiplied by --motion-scale so the
page's reduced-motion rule zeroes all of them at once rather than
asking this file to be polite. The idle drift and the stream loop;
the seal press and the ink bleed do not. */
--motion-scale: 1;
--anim-idle: vermilion-lantern calc(14s * var(--motion-scale)) ease-in-out infinite;
--anim-send: vermilion-seal calc(.55s * var(--motion-scale)) cubic-bezier(.2,.8,.3,1);
--anim-stream: vermilion-brush calc(1.05s * var(--motion-scale)) steps(3, end) infinite;
/* ── reading ──────────────────────────────────────────────────
Everything above this line may be as loud as it likes. This is the
part somebody looks at for an hour.
Parchment and near-black ink, 13.8:1 — the lacquer does not follow
the reader in, and the only vermilion that does is a hairline: the
column's left edge, the mark between turns, and the rule under a
scene heading. The grain is laid paper rather than paper's speckle
— a hairline every 11px, which divides the 22px speckle tile this
value now carries for itself exactly, so the lines land where they
are drawn instead of being clipped by the tile. */
--read-bg: #f0e6d2;
--read-ink: #241a12;
--read-quote: #7c3d18;
--read-font: var(--serif);
--read-measure: 660px;
--read-frame: 3px solid #a04b21;
--read-texture: repeating-linear-gradient(90deg, rgba(124,61,24,.032) 0 1px,
transparent 1px 11px),
radial-gradient(circle at 50% 50%,
rgba(124,61,24,.030) 1px, transparent 1.5px)
0 0 / 22px 22px;
--read-divider: linear-gradient(90deg, transparent, #c0a072 16%,
#a04b21 50%, #c0a072 84%, transparent);
--read-line: #d9c7a9;
--read-line-soft: #e6d8bd;
--read-panel: #e9dcc2;
/* Cut into the parchment rather than laid on it — a shade below
--read-bg where --read-panel sits a shade above it. */
--read-sunk: #e0d0b0;
--read-accent: #a04b21;
--read-accent-2: #6d3213;
/* The player's own bubble. A wash of cinnabar into the parchment, not
a tinted card: it sits inside the column, so it is paper too. */
--read-accent-soft: #f1ddc6;
--read-ink-2: #55432f;
--read-warn: #b03a12;
--read-dim: #7d6a4e;
--read-good: #456b3f;
/* The rarity ladder, rewritten for parchment. The chrome ladder above
is pitched at a #4a1c16 lacquer panel and runs bright — gold leaf,
jade, a pewter 黑. On paper every one of those is between 1.21 and
2.69:1, so the column gets its own ten, and the order inverts with
the surface: on lacquer 白 is the brightest rung and 黑 the dimmest;
on paper 白 is the palest legible ink and 黑 is nearly black. Same
ten names, same ten meanings, the two ends swapped because the
ground did. 4.42 to 9.91:1. */
--read-r-白: #6b6155; --read-r-灰: #57534c;
--read-r-绿: #3f6b3a; --read-r-蓝: #2b5f86;
--read-r-紫: #64397f; --read-r-金: #8a6210;
--read-r-红: #9c2f1e; --read-r-粉: #9c3a6b;
--read-r-黑: #3a342e; --read-r-橙: #9c5510;
/* One-shot, and it ends. A paragraph arrives the way ink arrives on
wet paper — it spreads and it settles, once. */
--read-enter: vermilion-bleed calc(.5s * var(--motion-scale)) ease-out both;
}
@media (prefers-color-scheme: dark) {
/* 黑漆描金 — black lacquer with gold tracery. The light scheme is a
cinnabar box in daylight; this is the same box by lamplight, where
the red retreats into the seams and the gold does the work. It is a
second palette rather than a dimming, because a theme whose light
scheme is already dark has nowhere to go by getting darker. */
html[data-theme="vermilion"] {
--bg: #120c09;
--panel: #1c120d;
--rail: #0c0705;
--sunk: #251711;
--line: #40261a;
--line-soft:#2b1912;
--shadow: 0 1px 0 rgba(232,180,72,.06),
0 2px 4px rgba(0,0,0,.6),
0 20px 44px -22px rgba(0,0,0,.9);
--wash: #140d0a;
--wash-2: #1e130c;
--tint: #291810;
--glow: rgba(232,180,72,.10);
--sky-0: #1d100a; --sky-1: #3d1d0f;
--sun: #c99a33;
--mtn-far: #3a2014; --mtn-mid: #26150d; --mtn-near: #170d09;
--ink: #ecdcc0;
--ink-2: #c3a97e;
--dim: #8b7860;
--quote: #cfa74e;
--accent: #b23608;
--accent-2: #e8844a;
--accent-soft: #2c1810;
--warn: #e07a4a;
--good: #6f9e6b;
--r-白: #e2d8c8; --r-灰: #ab9f8f; --r-绿: #83b98a; --r-蓝: #6fb0e0;
--r-紫: #c092de; --r-金: #e9c25c; --r-红: #f2705b; --r-粉: #f295c1;
--r-黑: #9d8c7c; --r-橙: #f39e46;
/* The sheen goes cold and the gold leaf goes quiet — the same two
layers, both pulled down, so the surfaces keep their character
instead of flattening into black. The warp is the exception and
goes the other way: this scheme's card covers and hero are darker
than the light one's, so the same black weave shows less on them,
and it keeps the 1.6× it always had over the light block's value
(.16 over .10, now .10 over .06). A weave dropped to .06 here would
be a weave nobody can see rather than a quieter one. */
--tex-page: radial-gradient(ellipse at 18% -10%, rgba(232,180,72,.06), transparent 58%),
radial-gradient(ellipse at 104% 96%, rgba(178,54,8,.12), transparent 54%);
--tex-panel: url("data:image/svg+xml,");
--tex-overlay: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px,
transparent 1px 4px);
--frame-panel: 1px solid #6a4419;
/* The parchment goes down a stop, and the ink goes down with it —
12.4:1, because a paper that darkens on its own is how a theme
loses the floor in the half nobody screenshots. */
--read-bg: #e3d5b8;
--read-ink: #1d150e;
--read-quote: #6f3514;
--read-frame: 3px solid #8e401a;
--read-texture: repeating-linear-gradient(90deg, rgba(96,48,20,.040) 0 1px,
transparent 1px 11px),
radial-gradient(circle at 50% 50%,
rgba(96,48,20,.036) 1px, transparent 1.5px)
0 0 / 22px 22px;
--read-divider: linear-gradient(90deg, transparent, #ac8c5e 16%,
#8e401a 50%, #ac8c5e 84%, transparent);
--read-line: #c9b593;
--read-line-soft: #d8c8a8;
--read-panel: #d9c9a8;
--read-sunk: #cfbc98;
--read-accent: #8e401a;
--read-accent-2: #5f2b10;
--read-accent-soft: #e5d3b4;
--read-ink-2: #4a3a28;
--read-warn: #9c3210;
--read-dim: #6f5d43;
--read-good: #3c5f37;
/* Its own ladder too, because the paper moved: #e3d5b8 is a stop
below #f0e6d2, so every rung comes down with it. 4.13 to 9.10:1. */
--read-r-白: #655c50; --read-r-灰: #514d46;
--read-r-绿: #3a6535; --read-r-蓝: #265980;
--read-r-紫: #5e3479; --read-r-金: #835c0d;
--read-r-红: #952a1a; --read-r-粉: #953565;
--read-r-黑: #352f2a; --read-r-橙: #95500c;
}
}
/* Ink meeting wet paper: it spreads, then it settles. One shot, and the
column is still by the time anyone is reading it. Nothing in here
names a token — a keyframe --read-enter can reach paints prose, so it
paints with what it brought. */
@keyframes vermilion-bleed {
from { opacity: 0; filter: blur(3px); transform: translateY(3px); }
60% { opacity: 1; filter: blur(.4px); }
to { opacity: 1; filter: none; transform: none; }
}
/* Lantern light on lacquer — the hero's idle drift. Slow enough to be a
room rather than an effect. */
@keyframes vermilion-lantern {
from { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
50% { transform: translate3d(0, -6px, 0) scale(1.015); opacity: 1; }
to { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
}
/* 落印 — the seal coming down when a turn is sent. Press, and hold. */
@keyframes vermilion-seal {
from { transform: scale(1.06) rotate(-1.5deg); opacity: .35; }
55% { transform: scale(.985) rotate(.4deg); opacity: 1; }
to { transform: none; opacity: 1; }
}
/* The brush while the model is writing: a wet tip, not a blinking box. */
@keyframes vermilion-brush {
from { opacity: .25; }
50% { opacity: 1; }
to { opacity: .25; }
}