/* DADI - the game page's dress, whole and in one place. Split out of index.html on 2026-08-20 so the DESIGN thread owns a file of its own: everything visual lives here, everything functional stays in the page. The contract is DESIGN_HANDOFF.md: ids are the game thread's, classes are shared, and nothing in this file may change what the game DOES - only how it looks doing it. */ /* ========================================================================== DADI — the illuminated skin. Everything you see is drawn by the browser: no image files, no icon fonts, no libraries. Parchment and stone are SVG turbulence filters, the vines and rosettes are SVG patterns defined once at the top of , gold leaf is a layered gradient, and the dice are CSS 3D cubes. Read the CSS in this order: TOKENS colours, metals, type MATERIALS parchment, gold, stone, incised edges — reusable surfaces FRAME the page as a page of a book S1 … S5 one section per screen DICE the 3D cube and the resting tiles ANIMATION the beats ========================================================================== */ /* -------------------------------------------------------------------------- TOKENS Spec §9.2 fixes the three that matter: ground #1A140F, parchment #EDE3CF, gold #C9A227. The rest are the pigments a manuscript painter had — lapis, vermilion, verdigris, iron gall — mixed to sit beside them. -------------------------------------------------------------------------- */ :root { --bg: #1A140F; /* the dark ground: tooled leather */ --parchment: #EDE3CF; --gold: #C9A227; --vellum: #e9dcb8; /* the writing surface, a shade warmer than parchment */ --vellum-dim: #cdb98d; --lapis: #24406b; /* blue for capitals and cell inlay */ --lapis-deep: #182c4b; --vermilion: #8c3b2e; /* red for rubrics and berries */ --verdigris: #4a6b4f; --ink: #2b2018; /* iron gall, for letters */ --ink-soft: #5b4a35; --leather: #2a1d13; --leather-lo: #150e08; --hairline: #6b5a3f; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; /* Gold leaf: a bright edge, a body, a dark burnish line, a bounce light. Used on every frame, rule and letter that should read as metal. */ --leaf: linear-gradient(160deg, #f6e6ae 0%, #e2c469 18%, #c9a227 42%, #8a6a14 58%, #d8ba57 78%, #f2dfa2 100%); --leaf-dim: linear-gradient(160deg, #c9b273 0%, #9a7d29 50%, #6f5512 100%); } /* -------------------------------------------------------------------------- MATERIALS Surfaces reused across every screen. Each is one class you can drop onto any element. -------------------------------------------------------------------------- */ /* Parchment: a warm base wash, two soft stains, then the grain filter layer on top in `::after`. The stains are plain radial gradients — irregular enough to read as age once the grain sits over them. */ /* The page itself. The bottom layer is a wash of real vellum, taken from the reference plates: the paper's true colour and the slow drift of its stains, blurred past any recognisable letter or leaf. Everything above it is light and age painted back on in CSS. */ .parchment { position: relative; background: /* a vignette, as if the sheet were lit from above the middle */ radial-gradient(105% 78% at 50% 34%, transparent 40%, rgba(74,48,18,.42) 100%), /* foxing: old stains, irregular enough to read as age */ radial-gradient(58% 40% at 84% 12%, rgba(126,86,38,.24), transparent 66%), radial-gradient(46% 34% at 14% 72%, rgba(126,86,38,.20), transparent 68%), radial-gradient(38% 26% at 62% 90%, rgba(108,72,30,.16), transparent 70%), /* the light falling on the page */ radial-gradient(115% 85% at 40% 8%, rgba(255,252,238,.72), rgba(255,247,224,.22) 55%, transparent 78%), /* the skin itself — warm, and its own colour, not the sample's */ linear-gradient(176deg, var(--vellum) 0%, var(--vellum-dim) 100%); } /* Over the skin, a blurred wash of the real vellum from the plates. It is here only for the slow drift of its staining, so it is kept faint and blended rather than laid on flat — at full strength its average brown swamps the page. */ .parchment::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: url("/static/art/parchment.png") center/540px auto repeat; mix-blend-mode: soft-light; opacity: .55; } .parchment::after { opacity: .55; z-index: 0; } /* then the tooth of it */ /* Everything bound into the page sits above the marginalia. `.sheet` opts out: the verdict and the two drawers position themselves against the viewport, and this rule outweighs a plain #id selector, so without the exemption it would quietly drag them back into the flow — which put the verdict below the fold on a tall board and made a finished match look as though it had simply stopped. */ #page > *:not(.edge):not(.corner):not(.beast):not(.sheet) { position: relative; z-index: 1; } .parchment::after { /* the tooth of the paper */ content: ""; position: absolute; inset: 0; pointer-events: none; filter: url(#grain); opacity: .5; mix-blend-mode: multiply; background: #fff; /* the filter paints the noise; this is only its canvas */ } /* Gold leaf on text and on rules. */ .gilt { background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(60,40,10,.45)); } .rule-gold { height: 3px; border-radius: 2px; background: var(--leaf); box-shadow: 0 1px 2px rgba(0,0,0,.45); } /* An incised edge: the illusion that a panel is cut into the page. */ .incised { box-shadow: inset 0 1px 0 rgba(255,247,225,.55), inset 0 -1px 0 rgba(60,40,15,.35), inset 0 0 0 1px rgba(120,95,55,.35); } /* -------------------------------------------------------------------------- FRAME — the app as a bound page -------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { background: radial-gradient(120% 80% at 50% 0%, #241a11 0%, var(--leather-lo) 70%), var(--bg); color: var(--ink); font-family: var(--sans); display: flex; justify-content: center; user-select: none; /* a game, not a document */ touch-action: manipulation; /* no double-tap zoom delay */ } /* #wrap is the leather board; #page is the sheet bound into it. */ #wrap { width: 100%; max-width: 430px; min-height: 100%; position: relative; display: flex; flex-direction: column; padding: 6px; background: linear-gradient(180deg, #332417 0%, var(--leather) 40%, #1d1309 100%); box-shadow: inset 0 0 0 1px rgba(201,162,39,.28), 0 0 40px rgba(0,0,0,.6); } /* The illuminated border: a gold fillet, then the vine, then the page. The vine is four real