/* Palette and surfaces: aged paper, saloon felt, brass and dried blood. Every colour the page paints with is a token here, so night mode is a swap of this list rather than a pile of overrides. The theme is resolved to an explicit day/night on , including when it follows the system setting. */ :root { --paper: #e8dcc0; --paper-deep: #d8c8a4; --paper-edge: #c3ae83; --ink: #2b2118; --ink-soft: #6b5942; --blood: #8b2c1f; --blood-bright: #a83828; --brass: #b08d57; --felt: #1e4034; --felt-top: #24493c; --felt-edge: #0f241d; --felt-ink: #f0e6cf; --gold: #d8b96a; --win: #4a7c4e; --tie: #b08d57; --lose: #8b2c1f; --verdict-call: #3d6b41; /* surfaces */ --scrim: rgba(232, 220, 192, 0.82); --panel-top: rgba(255, 250, 235, 0.88); --panel-bottom: rgba(216, 200, 164, 0.66); --panel-solid-top: #f6ecd4; --raised-top: #f3e9d0; --raised-bottom: #d8c8a4; --raised-top-hot: #fff6e2; --raised-bottom-hot: #e2d3ae; --sunken: rgba(43, 33, 24, 0.06); --sunken-strong: rgba(43, 33, 24, 0.09); --seat-bg: rgba(255, 250, 235, 0.7); --input-bg: rgba(255, 250, 235, 0.88); --sheen: rgba(255, 246, 224, 0.75); --vignette: rgba(43, 33, 24, 0.22); --grain-warm: rgba(139, 44, 31, 0.025); --grain-cool: rgba(43, 33, 24, 0.022); /* playing cards keep their own ink: the faces stay pale in both themes */ --face-top: #fffdf6; --face-bottom: #efe6d2; --face-edge: #b9a67f; --face-ink: #2b2118; --face-red: #a83828; /* Set from the settings sheet; the inline bootstrap applies them before paint. */ --card-scale: 1; --picker-scale: 1; --radius: 4px; --shadow: 0 2px 0 rgba(43, 33, 24, 0.18), 0 6px 18px rgba(43, 33, 24, 0.14); --display: 'Rye', 'Georgia', 'Times New Roman', serif; --body: 'Spectral', 'Georgia', 'Times New Roman', serif; color-scheme: light; } /* Night: lamplight on dark leather. */ :root[data-theme='night'] { --paper: #1d1813; --paper-deep: #2a231b; --paper-edge: #4a3c2c; --ink: #ecdcbc; --ink-soft: #a18d6e; --blood: #cd5b42; --blood-bright: #e07a63; --brass: #a3814e; --felt: #142b23; --felt-top: #1b3a30; --felt-edge: #0a1a14; --felt-ink: #ecdfc4; --gold: #d8b96a; --verdict-call: #8fd19e; --scrim: rgba(14, 11, 8, 0.52); --panel-top: rgba(52, 42, 32, 0.84); --panel-bottom: rgba(28, 23, 18, 0.76); --panel-solid-top: #3a2f24; --raised-top: #3d3226; --raised-bottom: #2b231b; --raised-top-hot: #4d4030; --raised-bottom-hot: #372d22; --sunken: rgba(0, 0, 0, 0.26); --sunken-strong: rgba(0, 0, 0, 0.36); --seat-bg: rgba(60, 49, 37, 0.6); --input-bg: rgba(16, 13, 10, 0.68); --sheen: rgba(108, 86, 60, 0.3); --vignette: rgba(0, 0, 0, 0.5); --grain-warm: rgba(205, 91, 66, 0.03); --grain-cool: rgba(0, 0, 0, 0.06); --face-top: #ece2ca; --face-bottom: #d6caac; --face-edge: #8a7856; --shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* Cards dealt from a darker deck. Last of the palette blocks on purpose: it overrides the face tokens whichever theme set them. */ :root[data-cards='dark'] { --face-top: #2f2419; --face-bottom: #1b1410; --face-edge: #5d4a35; --face-ink: #f0e4c8; --face-red: #e5806a; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--body); color: var(--ink); background-color: var(--paper); /* Faint grain and a vignette, so the page reads as worn paper. */ background-image: radial-gradient(ellipse at 50% 0%, var(--sheen), transparent 60%), radial-gradient(ellipse at 50% 120%, var(--vignette), transparent 55%), repeating-linear-gradient(115deg, var(--grain-warm) 0 2px, transparent 2px 5px), repeating-linear-gradient(15deg, var(--grain-cool) 0 3px, transparent 3px 7px); background-attachment: fixed; line-height: 1.5; } /* The saloon, behind everything, with a veil the theme tints. Its own fixed layer rather than another entry in body's background list, which would mean keeping four parallel size/position lists in step. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--scrim), var(--scrim)), url('../img/rdp_background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; margin: 0; } /* --- banner --- */ .banner { position: relative; text-align: center; padding: 28px 16px 12px; } .banner h1 { font-size: clamp(2rem, 7vw, 3.4rem); color: var(--blood); text-shadow: 1px 1px 0 var(--paper-deep), 2px 3px 0 rgba(43, 33, 24, 0.18); line-height: 1.1; } .banner__rule, .banner__sub { margin: 0; color: var(--ink-soft); letter-spacing: 0.35em; text-transform: uppercase; font-size: 0.7rem; } .banner__rule { letter-spacing: 0.2em; color: var(--brass); } .banner__sub { margin-top: 6px; } /* --- the settings wheel --- */ .wheel { position: absolute; top: 18px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--brass); cursor: pointer; transition: color 0.15s ease, transform 0.4s ease; } .wheel:hover { color: var(--blood); transform: rotate(45deg); } .wheel svg { width: 30px; height: 30px; } /* --- panels --- */ .panel { background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); border: 1px solid var(--paper-edge); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: relative; } .panel h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blood); border-bottom: 2px solid var(--brass); padding-bottom: 8px; margin-bottom: 14px; } .panel--felt { background: radial-gradient(ellipse at 50% -20%, rgba(94, 148, 120, 0.35), transparent 70%), linear-gradient(180deg, var(--felt-top), var(--felt)); border-color: var(--felt-edge); color: var(--felt-ink); } .panel--felt h2 { color: var(--gold); border-bottom-color: rgba(216, 185, 106, 0.5); } .hint { margin: 0 0 12px; font-size: 0.85rem; font-style: italic; color: var(--ink-soft); } .colophon { text-align: center; padding: 18px 16px 34px; color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.08em; } .colophon p { margin: 0; } /* --- buttons --- */ .btn { font-family: var(--body); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--brass); background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); color: var(--ink); cursor: pointer; transition: transform 0.06s ease, background 0.15s ease; } .btn:hover { background: linear-gradient(180deg, var(--raised-top-hot), var(--raised-bottom-hot)); } .btn:active { transform: translateY(1px); } .btn--ghost { background: transparent; } .btn--ghost:hover { background: rgba(176, 141, 87, 0.18); } :focus-visible { outline: 2px solid var(--blood); outline-offset: 2px; } /* --- cards --- */ .card { display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 7; border-radius: 5px; border: 1px solid var(--face-edge); background: linear-gradient(160deg, var(--face-top), var(--face-bottom)); box-shadow: 0 1px 0 rgba(43, 33, 24, 0.25), 0 4px 10px rgba(43, 33, 24, 0.22); color: var(--face-ink); font-family: var(--body); cursor: pointer; padding: 2px; line-height: 1; container-type: inline-size; } /* Sized against the card, not the viewport, so a card of any size reads right. */ .card__rank { font-size: 48cqw; font-weight: 600; } /* "10" is two glyphs where every other rank is one. */ .card__rank--wide { font-size: 40cqw; letter-spacing: -0.03em; } .card__suit { font-size: 41cqw; } .card--red { color: var(--face-red); } .card--empty { background: var(--sunken); border: 1px dashed var(--brass); box-shadow: none; color: var(--ink-soft); } .card--empty .card__rank { font-size: 36cqw; opacity: 0.55; } .panel--felt .card--empty { background: rgba(0, 0, 0, 0.18); border-color: rgba(216, 185, 106, 0.55); color: rgba(240, 230, 207, 0.7); } .card[disabled] { cursor: not-allowed; opacity: 0.4; } .card--used { opacity: 0.22; cursor: not-allowed; }