/* ════════════════════════════════════════════════════════════ SHADOW SALOON - Main Stylesheet Western-Noir Theme ════════════════════════════════════════════════════════════ */ :root { /* ── Raw palette: theme-INDEPENDENT constants. Never switch with the theme. Used by the deliberately fixed-dark artwork surfaces (spotlight banner, intro windows, dice/action cinemas, card backs, chat paper) and by fixed gold gradients (buttons, avatars). ── */ --raw-ink: #0d0a07; --raw-gold: #c8922a; --raw-gold-light: #e8b84b; --raw-amber: #d4620a; --raw-parchment: #e8d5b0; --raw-smoke: #a89784; --raw-old-paper: #c9b48a; --raw-cream: #fff8ec; /* text on fills that stay dark in BOTH themes (red/amber/felt buttons) */ --raw-border: rgba(200, 146, 42, .22); /* Currently unreferenced (the dark --surface-1-strong is now a literal "raised" value, not this alias). Kept as a raw-palette reference; --raw-surface-1 was removed once --surface-1 became an opaque literal per theme. */ --raw-surface-1-strong: rgba(8, 5, 2, .88); --raw-surface-2: rgba(200, 146, 42, .08); --raw-scrim: rgba(8, 5, 2, .85); /* ── Semantic, theme-aware tokens (dark = default; light overrides below). Components reference ONLY these (or the raw ones on dark islands). ── */ --surface-0-a: #2b1c0c; /* page gradient start (lifted one step out of near-black) */ --surface-0-b: #1e1409; --surface-0-c: #171008; --surface-1: #34271a; /* card ON the panel: one step lighter than the panel (raised, not sunken) */ /* V2 (2026-07-05): lifted from the near-black raw value to a real "raised" step above --surface-1 (dropdowns/toasts/footer bar sit clearly above the panel). */ --surface-1-strong: #3c2e1e; --surface-2: var(--raw-surface-2); /* subtle inset chip */ --surface-hover: rgba(200, 146, 42, .14); --heading: #dcae52; /* readable heading/emphasis text (slightly desaturated: ~7.7:1 on the panel) */ --text-main: #dccbaa; /* ~10:1 on the panel — deliberately below the former ~14:1 */ --text-dim: #ad9b85; /* >= 4.6:1 on --surface-1-strong (table heads), ~5.2:1 on the card */ --text-invert: #241708; /* text on accent-filled surfaces */ --accent-strong: #e8b84b; /* theme accent, strong variant */ --accent-amber: #d4620a; --border-soft: rgba(200, 146, 42, .18); --border-strong: rgba(200, 146, 42, .45); /* V2: opaque edge for cards nested on the lighter --pf-board panel — 3.2:1 vs the panel, 3.8:1 vs .db-section (WCAG 1.4.11). Deliberately NOT a --border-soft bump: that would relight the game-frame/stage borders (--board-border / --border-soft outside .pf-board), which must stay dark. */ --card-edge: rgba(200, 146, 42, .20); --shadow-color: rgba(0, 0, 0, .5); --scrim: rgba(8, 5, 2, .85); /* V2: sticky app chrome (header/footer) one visible step above the page. --scrim stays the darker veil for overlays/backdrops — do not conflate. */ --chrome: rgba(42, 29, 14, .94); /* Elevation: depth is carried by shadows, not by opaque edge lines. --elev-1 = card/chip/chrome, --elev-2 = panel/modal/dropdown/toast. */ --elev-1: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .32); --elev-2: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .45); /* Status inks shared with admin.css (formerly hex literals there). */ --warn-ink: #f0b070; --info-ink: #8fb8e8; --row-line: rgba(200, 146, 42, .10); /* Strength of the saloon scene (.saloon-bg). Content sits on opaque panels, so the scene only shows in the side bands. Its colours are --scene-ink / --scene-glow, set per design; without them the rule falls back to the amber of this design. */ --silhouette-opacity: .85; --danger: #e88; --danger-strong: #c85a6a; --success: #88d088; /* Near-opaque card/panel gradient + form-input surface (the translucent --surface-1 is too see-through for text-heavy panels over the saloon bg). */ /* V2: panel elevation — lifted so cards/panels read as a step above the page. */ --card-grad-a: #2c2013; --card-grad-b: #251b0f; --input-bg: #1f160c; --modal-grad-a: #352614; --modal-grad-b: #1e140a; /* Theme-aware game-surface tokens (dark = the former hardcoded island values). Light values live in the [data-scheme="light"] block. */ /* V2: game-frame FILL lifted to match the panel elevation. --board-border stays .28 (unchanged) — the game-frame/stage EDGE must not get lighter. */ --board-grad-a: #2c2013; --board-grad-b: #251b0f; --board-border: rgba(200, 146, 42, .28); /* Maximized game board atmosphere (rule in the maximized block below). Dark schemes: only a faint centre light — the weakest accent inks on accent chips sit just above 4.5:1, so the light stays at their limit (3 %); the stage effect comes mostly from darker edges, which only raise contrast for the light text. --board-wash = share of the mode accent seeping in from the header / bottom edge. */ --board-spot: rgba(255, 240, 210, .03); --board-edge: rgba(0, 0, 0, .50); --board-wash: 14%; --board-shadow: var(--elev-2), inset 0 1px 0 rgba(200, 146, 42, .09); --felt-base-a: #1d3b2a; --felt-base-b: #122418; --felt-base-c: #0b160e; --felt-rim: #3a2410; --felt-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 14px 34px rgba(0, 0, 0, .45); --stage-back-a: #16100a; --stage-back-b: #0e0905; --stage-floor-a: #3a2412; --stage-floor-b: #311d0d; /* Light-theme stage 2: small-scale game-surface tokens (wells/chips inset on boards, neutral hairlines). Dark = the former hardcoded values. */ --well: rgba(8, 5, 2, .45); --well-strong: rgba(8, 5, 2, .62); --edge: rgba(255, 255, 255, .07); --edge-strong: rgba(255, 255, 255, .14); --border-faint: rgba(200, 146, 42, .10); /* ── Legacy palette names: kept as aliases of the semantic tokens so the existing rules follow the theme. Fixed gradients keep using --gold/ --gold-light (raw constants, see below) on purpose. ── */ --ink: #0d0a07; --dark-wood: #1a1208; --mid-wood: #2e1f0e; --warm-wood: #4a2f14; --gold: #c8922a; --gold-light: #e8b84b; --amber: #d4620a; /* --smoke: warm sandy beige for secondary text (labels, hints, counters). Lightened from #8a7a6a to #a89784 so the contrast on the dark saloon background is comfortably AA-compliant (~6:1 instead of 4.5:1). Atmosphere stays warm/muted. */ --smoke: var(--text-dim); --parchment: var(--text-main); --old-paper: #c9b48a; --blood-red: #8b1a1a; --red-light: #c0352a; /* Red as TEXT: --red-light reaches only ~2.7-2.9:1 on the dark boards. --red-ink follows the scheme (blood red in light); --raw-red-ink is for fixed-dark islands (intros, cinemas, toasts, felt) that stay dark in every theme. Fills, rings and bars keep --red-light. */ --raw-red-ink: #f96b5a; --red-ink: var(--raw-red-ink); --green-felt: #1a3d2b; --green-ok: #2d7a4a; --shadow: #0a0806; /* Generic border tone (muted gold). WAS UNDEFINED EVERYWHERE - every `border: 1px solid var(--border)` (admin shell, toolbar dividers, filter fields, pager, podium/report box) was an invalid declaration and rendered NO border at all - that is why the outer frame of the variant-B shell was missing. */ --border: var(--border-soft); --btn-radius: 6px; /* Button standard: uniform corner radius (soft) for all real action buttons */ /* Per-mode accent: defaults to gold, overridden in .mode-* classes. */ --accent: var(--gold); --accent-light: var(--gold-light); /* Body font: Inter for UI readability + tabular numbers, loaded via Google Fonts in App.razor. System stack as fallback. Headings use Rye (see h1/h2/h3 + .card-title/.lobby-code/etc. with explicit font-family: 'Rye'). Special Elite was removed entirely. */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ── Light theme ("Wanted Poster bei Tageslicht"): same color family, inverted lightness. Values match the approved mockup (sitewide-layout-final.html). Selected via html[data-scheme="light"] — the SCHEME (dark|light) drives every component rule below; html[data-theme=""] only adds a theme's own token block on top (seasonal themes). Both are written by theme-boot.js / ssTheme, persisted in localStorage (ssTheme = theme key). This block is the BASE of every light theme; Light Saloon itself carries its own [data-theme="light"] block further down. Tokens are declared on html only — a second selector on .modal-overlay-v2 (island era) re-pinned these base values on every modal and overrode the theme blocks there, so modals in the other light themes showed Light Saloon sand. ── */ [data-scheme="light"] { --surface-0-a: #f3e6c9; --surface-0-b: #eadab3; --surface-0-c: #e2cfa2; --surface-1: #fbf5e6; /* card: lightest surface, but cream — never white */ --surface-1-strong: #fdf9ee; --surface-2: rgba(156, 106, 26, .08); --surface-hover: rgba(156, 106, 26, .13); --heading: #7a4a12; --text-main: #4a3520; /* ~10:1 on the panel — deliberately below the former ~13:1 */ /* Warm mid-brown: ~7:1 on the cream card, ~4.9:1 on the page canvas (#e2cfa2). The former #4f4335 was tuned for the old darker sand stops. */ --text-dim: #62503c; --text-invert: #fff8ec; --accent-strong: #7a4a12; /* Light-theme stage 2: darkened from #b5540a — fell below 3:1 on sand cards. */ --accent-amber: #7d3b07; --border-soft: rgba(120, 80, 20, .20); --border-strong: rgba(120, 80, 20, .5); /* V2 light counterparts: light panel/card already contrast well, so card-edge reuses the stronger brown border; chrome mirrors the light scrim. */ --card-edge: rgba(120, 80, 20, .28); --shadow-color: rgba(80, 60, 30, .18); --scrim: rgba(255, 250, 240, .9); --chrome: rgba(244, 232, 206, .92); --elev-1: 0 1px 2px rgba(80, 55, 20, .10), 0 4px 14px rgba(80, 55, 20, .10); --elev-2: 0 2px 4px rgba(80, 55, 20, .12), 0 14px 36px rgba(80, 55, 20, .16); --warn-ink: #8a4c04; --info-ink: #1f4f86; --row-line: rgba(120, 80, 20, .12); --scene-ink: #4a3420; --scene-glow: #c08a22; --silhouette-opacity: .80; --danger: #a3324a; --danger-strong: #7a2338; --red-ink: #8b1a1a; --success: #17663a; /* dark enough for 4.5:1 even on the darker modal-gradient end (#f2e3c4) */ --card-grad-a: #f7eed9; --card-grad-b: #f2e6cb; --input-bg: #fdf9ee; --modal-grad-a: #fbf5e6; --modal-grad-b: #efe2c6; /* Light variants of the game-surface tokens — "wanted poster in daylight": cream boards, daylight felt, bright stage backdrop. */ --board-grad-a: #f7eed9; --board-grad-b: #f2e6cb; --board-border: rgba(120, 80, 20, .35); /* Light schemes: the centre light only brightens (raises contrast); no darkened edges — the light panel has no headroom (heading on the panel is already ~6:1). */ --board-spot: rgba(255, 255, 255, .28); --board-edge: transparent; --board-wash: 10%; --board-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, .6); --felt-base-a: #446e55; --felt-base-b: #3a6049; --felt-base-c: #30523e; --felt-mix-a: 7%; --felt-mix-b: 12%; --felt-mix-c: 15%; --felt-rim: #8a6a3c; --felt-shadow: inset 0 0 60px rgba(40, 70, 52, .35), 0 14px 34px rgba(80, 60, 30, .28); --stage-back-a: #e9d4a9; --stage-back-b: #d8bc88; --stage-floor-a: #b8934f; --stage-floor-b: #aa8441; --well: rgba(156, 106, 26, .10); --well-strong: rgba(156, 106, 26, .16); --edge: rgba(120, 80, 20, .16); --edge-strong: rgba(120, 80, 20, .30); --border-faint: rgba(120, 80, 20, .16); /* Legacy names that were used directly as colors (not via the aliases above). */ /* Light-theme stage 2: darkened from #6a5642 (see --text-dim). */ --old-paper: #4a3b28; --accent: #9c6a1a; /* gold-mode accent readable on light; .mode-* still override */ } /* ── Themes on the DARK scheme (html[data-theme=""] on top of data-scheme="dark"). Only tokens — the component rules come from the scheme. Everything a theme does not set falls through to the :root (dark) values. Mockup + rationale: docs/mockups/ss0464-saisonale-themes.html. Game accents (.mode-*) are theme- independent by design; only the DEFAULT accent (gold) and the surfaces change. Aliases resolve where they are declared, so --accent/--accent-ink/--gold-ink are re-declared here to pick up the theme's gold (alias trap, see A11). ── */ /* Halloween — pumpkin on violet-black */ [data-theme="halloween"] { --surface-0-a: #2a1533; --surface-0-b: #1d0f24; --surface-0-c: #150a1a; --chrome: rgba(40, 22, 48, .94); --scrim: rgba(21, 10, 26, .85); --card-grad-a: #2c1a37; --card-grad-b: #24142e; --board-grad-a: #2c1a37; --board-grad-b: #24142e; --surface-1: #36223f; --surface-1-strong: #3f2a4a; --input-bg: #1f1226; --modal-grad-a: #372440; --modal-grad-b: #1f1226; --text-main: #e8dccb; --text-dim: #b39fb0; --old-paper: #cdb6b0; --heading: #f0932b; --accent-strong: #f0932b; --accent-amber: #c4501a; --gold: #e07b1a; --gold-light: #ffa640; --amber: #c4501a; --btn-gold-start: #d6571c; /* lighter pumpkin: dark ink stays >= 4.5:1 along the whole button */ --accent: #f0932b; --accent-light: #ffb054; --accent-ink: var(--accent-light); --border-soft: rgba(240, 147, 43, .20); --border-strong: rgba(240, 147, 43, .45); --card-edge: rgba(240, 147, 43, .22); --board-border: rgba(240, 147, 43, .30); --row-line: rgba(240, 147, 43, .12); --border-faint: rgba(240, 147, 43, .10); --surface-2: rgba(240, 147, 43, .08); --surface-hover: rgba(240, 147, 43, .14); --elev-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .38); --elev-2: 0 2px 4px rgba(0, 0, 0, .55), 0 14px 36px rgba(0, 0, 0, .5); --warn-ink: #ffb86b; --info-ink: #9fb8f0; --deco-image: url("/img/saloon-deco-halloween.svg"); --deco-opacity: .85; --scene-ink: #b184cf; --scene-glow: #f0932b; --deco-flake: #eadfc6; } /* Christmas — fir green, gold, red */ [data-theme="christmas"] { --surface-0-a: #142a1c; --surface-0-b: #0e1e14; --surface-0-c: #0a160f; --chrome: rgba(18, 38, 26, .94); --scrim: rgba(10, 22, 15, .85); --card-grad-a: #172c20; --card-grad-b: #12241a; --board-grad-a: #172c20; --board-grad-b: #12241a; --surface-1: #1e3628; --surface-1-strong: #244030; --input-bg: #10201a; --modal-grad-a: #1c3427; --modal-grad-b: #0e1e14; --text-main: #eadfc6; --text-dim: #a9b8a4; --old-paper: #c8c9a8; --heading: #e8b84b; --accent-amber: #b3372f; --amber: #b3372f; --btn-gold-start: #d1564f; /* lighter red: #b3372f gave the dark button ink only 3.3:1 */ --accent: #b3372f; --accent-light: #e0574a; --accent-ink: var(--accent-light); --border-soft: rgba(232, 184, 75, .20); --card-edge: rgba(232, 184, 75, .22); --board-border: rgba(232, 184, 75, .30); /* No centre light: the inks have no headroom on this green board; edges only. */ --board-spot: transparent; --board-edge: rgba(0, 0, 0, .60); --row-line: rgba(232, 184, 75, .12); --elev-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .36); --elev-2: 0 2px 4px rgba(0, 0, 0, .55), 0 14px 36px rgba(0, 0, 0, .48); --deco-image: url("/img/saloon-deco-christmas.svg"); --deco-opacity: .85; --scene-ink: #86b892; --scene-glow: #e8b84b; --deco-flake: #f4f1e6; } /* Vivid — cool ink, saturated accents */ [data-theme="vivid"] { --surface-0-a: #1a1d2e; --surface-0-b: #13162a; --surface-0-c: #0e1020; --chrome: rgba(28, 31, 48, .94); --scrim: rgba(14, 16, 32, .85); --card-grad-a: #1f2338; --card-grad-b: #191c2e; --board-grad-a: #1f2338; --board-grad-b: #191c2e; --surface-1: #282d47; --surface-1-strong: #303655; --input-bg: #151829; --modal-grad-a: #262b44; --modal-grad-b: #13162a; --text-main: #e9e6f2; --text-dim: #aaa6c0; --old-paper: #c9c4d8; --text-invert: #1a1d2e; --heading: #ffd166; --accent-strong: #ffd166; --accent-amber: #ef476f; --gold: #f4a261; --gold-light: #ffd166; --amber: #ef476f; --accent: #ef476f; --accent-light: #ff7a9c; --accent-ink: var(--accent-light); --success: #06d6a0; --danger: #ff7a9c; --danger-strong: #ef476f; --border-soft: rgba(255, 209, 102, .22); --border-strong: rgba(255, 209, 102, .45); --card-edge: rgba(255, 209, 102, .24); --board-border: rgba(255, 209, 102, .30); --board-wash: 18%; --board-spot: rgba(235, 235, 255, .02); --row-line: rgba(255, 209, 102, .12); --border-faint: rgba(255, 209, 102, .10); --surface-2: rgba(255, 209, 102, .08); --surface-hover: rgba(255, 209, 102, .14); --elev-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .36); --elev-2: 0 2px 4px rgba(0, 0, 0, .55), 0 14px 36px rgba(0, 0, 0, .48); --warn-ink: #ffb86b; --info-ink: #4cc9f0; --scene-ink: #8f97dc; --scene-glow: #ffd166; } /* Hoher Kontrast ("contrast", HK-1 "Schwarz & Gold") — text >= 7:1 (AAA), opaque surfaces and edges >= 3:1, no shadows, no silhouette. Only the tokens live here; the outlined chips, accent stripes and heavier edges hang on html[data-contrast="more"] (block at the end of this file). Mockup with the measured pairs: docs/mockups/ss0498-hoher-kontrast.html. */ [data-theme="contrast"] { --surface-0-a: #0b0906; --surface-0-b: #0b0906; --surface-0-c: #0b0906; --chrome: #000000; --scrim: rgba(0, 0, 0, .88); --shadow-color: rgba(0, 0, 0, 0); --card-grad-a: #14100b; --card-grad-b: #14100b; --board-grad-a: #14100b; --board-grad-b: #14100b; --surface-1: #1d1710; --surface-1-strong: #231c13; --surface-2: #2c2418; --surface-hover: #2e2517; --input-bg: #000000; --modal-grad-a: #14100b; --modal-grad-b: #14100b; --text-main: #fff6e6; --text-dim: #e3d6bf; --old-paper: #f0e6d4; --text-invert: #000000; --heading: #ffd166; --accent-strong: #ffd166; --accent-amber: #ffb86b; --focus-ring: #6fd3ff; /* ice blue: must stand apart from the gold of headings and buttons */ --gold: #ffd166; --gold-light: #ffe08a; --amber: #ffd166; --accent: #ffd166; --accent-light: #ffe08a; --btn-gold-start: #ffd166; --btn-gold-end: #ffd166; --btn-gold-ink: #000000; --btn-gold-glow: 0 0 0 rgba(0, 0, 0, 0); --ghost-line: #ffd166; --ghost-ink: #ffd166; --tab-on: #ffd166; --tab-line: #ffd166; --toggle-on: #8ef0a8; --toggle-on-edge: #8ef0a8; --success: #8ef0a8; --danger: #ff9d8f; --danger-strong: #ff9d8f; --red-ink: #ff9d8f; --red-fill-a: #ff9d8f; --red-fill-b: #ff9d8f; --ghost-red-ink: #ff9d8f; --ghost-red-line: #ff9d8f; --ghost-red-hover: #ffc2b8; --warn-ink: #ffd27a; --info-ink: #9dd2ff; --border-soft: #9c8658; --border-strong: #cfb27a; --card-edge: #9c8658; --board-border: #cfb27a; --row-line: #5e5038; --border-faint: #5e5038; --edge: #5e5038; --edge-strong: #9c8658; --well: #000000; --well-strong: #000000; --elev-1: 0 0 0 rgba(0, 0, 0, 0); --elev-2: 0 0 0 rgba(0, 0, 0, 0); --board-shadow: 0 0 0 rgba(0, 0, 0, 0); --board-spot: transparent; --board-edge: transparent; --board-wash: 0%; --felt-base-a: #123524; --felt-base-b: #0d2a1c; --felt-base-c: #08170f; --felt-rim: #cfb27a; --silhouette-opacity: 0; } /* ── Themes on the LIGHT scheme (html[data-theme] on top of data-scheme="light"). The light block above declares the light inks and surfaces; these blocks come later in the file and therefore win — so they must ALSO re-declare the light inks (--text-*, --old-paper, --heading, --gold-ink, --accent-amber, --scrim, --input-bg, --modal-grad-*), otherwise sand-brown inks stay on cool or green paper. ── */ /* Vivid (light) — cool paper, saturated accents */ [data-theme="vividlight"] { --surface-0-a: #eef0fa; --surface-0-b: #e2e6f4; --surface-0-c: #d6dcef; --chrome: rgba(240, 243, 252, .92); --scrim: rgba(238, 240, 250, .9); --shadow-color: rgba(40, 50, 90, .18); --card-grad-a: #f6f7fd; --card-grad-b: #eef1fa; --board-grad-a: #f6f7fd; --board-grad-b: #eef1fa; --surface-1: #f8f9fe; --surface-1-strong: #fdfdff; --input-bg: #fdfdff; --modal-grad-a: #f8f9fe; --modal-grad-b: #e6eaf6; --surface-2: rgba(60, 70, 120, .08); --surface-hover: rgba(60, 70, 120, .13); --text-main: #3a3e55; --text-dim: #4d536b; /* was #5a6079: 4.1 to 4.4 : 1 on tinted cards and the game grounds */ --old-paper: #4a4f6a; --heading: #9c1f60; --accent-strong: #9c1f60; --accent-amber: #b3226b; --gold: #d97a1e; --gold-light: #f4b942; --amber: #e63e6d; --accent: #d4386f; --accent-light: #ff7aa2; --success: #0a654a; --danger: #a31250; --danger-strong: #8e1244; --border-soft: rgba(60, 70, 120, .22); --border-strong: rgba(60, 70, 120, .5); --card-edge: rgba(60, 70, 120, .26); --board-border: rgba(60, 70, 120, .35); --row-line: rgba(60, 70, 120, .12); --border-faint: rgba(60, 70, 120, .12); --elev-1: 0 1px 2px rgba(40, 50, 90, .10), 0 4px 14px rgba(40, 50, 90, .10); --elev-2: 0 2px 4px rgba(40, 50, 90, .12), 0 14px 36px rgba(40, 50, 90, .16); --warn-ink: #9a4b00; --info-ink: #1f5fa8; --scene-ink: #3c4678; --scene-glow: #e08a1e; } /* Easter — spring green paper, lilac, egg-yolk gold */ [data-theme="easter"] { --surface-0-a: #f3f7e8; --surface-0-b: #e9f1d9; --surface-0-c: #dce9c8; --chrome: rgba(244, 248, 232, .92); --scrim: rgba(243, 247, 232, .9); --shadow-color: rgba(60, 80, 30, .18); --card-grad-a: #f8fbef; --card-grad-b: #f1f6e3; --board-grad-a: #f8fbef; --board-grad-b: #f1f6e3; --surface-1: #fcfdf5; --surface-1-strong: #fefff8; --input-bg: #fefff8; --modal-grad-a: #fcfdf5; --modal-grad-b: #ecf3dc; --surface-2: rgba(90, 110, 60, .08); --surface-hover: rgba(90, 110, 60, .13); --text-main: #3a3d2a; --text-dim: #535842; /* was #61664f: 4.1 to 4.4 : 1 on tinted cards and the game grounds */ --old-paper: #4e5140; --heading: #6f478f; --accent-strong: #6f478f; --accent-amber: #8f5a00; --gold: #c9a227; --gold-light: #ecd35c; --amber: #e08a3c; --accent: #6f478f; --accent-light: #b48ad6; --success: #2a7a4b; --border-soft: rgba(90, 110, 60, .22); --border-strong: rgba(90, 110, 60, .5); --card-edge: rgba(90, 110, 60, .26); --board-border: rgba(90, 110, 60, .35); --row-line: rgba(90, 110, 60, .12); --border-faint: rgba(90, 110, 60, .12); --elev-1: 0 1px 2px rgba(60, 80, 30, .10), 0 4px 14px rgba(60, 80, 30, .10); --elev-2: 0 2px 4px rgba(60, 80, 30, .12), 0 14px 36px rgba(60, 80, 30, .16); --warn-ink: #8f5a00; --info-ink: #2b6cb0; --deco-image: url("/img/saloon-deco-easter.svg"); --deco-opacity: .85; --scene-ink: #4f6236; --scene-glow: #c9a227; --deco-flake: #f4a6c0; } /* Light Saloon — "Mittagssonne": sun-bleached linen instead of sand, the header, footer, page head and game head as a walnut sign (chrome inks, see the Chrome inks block), brass lines, a terracotta primary button, brick instead of raspberry. Mockup with the measured pairs: docs/mockups/light-saloon-redesign.html (variant A). */ [data-theme="light"] { --surface-0-a: #f2ede4; --surface-0-b: #e8e0d2; --surface-0-c: #ddd2c1; --scrim: rgba(250, 247, 240, .9); --shadow-color: rgba(58, 40, 24, .16); --card-grad-a: #f9f6f0; --card-grad-b: #f2ede3; --board-grad-a: #f9f6f0; --board-grad-b: #f2ede3; --surface-1: #fdfbf7; --surface-1-strong: #fffefb; --input-bg: #fffefb; --modal-grad-a: #fbf9f4; --modal-grad-b: #efe9dd; --surface-2: rgba(74, 52, 32, .05); --surface-hover: rgba(184, 134, 43, .10); --text-main: #45382c; /* ~9.7:1 on the panel (DESIGN_GUIDE §2: 8-10:1 by intent, not 14:1) */ --text-dim: #62564a; --old-paper: #54473a; --heading: #633a17; --accent-strong: #7b5214; --accent-amber: #8a4312; --gold: #b8862b; --gold-light: #dcae52; --accent: #b8862b; --accent-light: #dcae52; --btn-gold-start: #cf7a35; --btn-gold-end: #d9a44a; --btn-gold-ink: #1e140b; --btn-gold-glow: 0 3px 12px rgba(191, 106, 40, .26); --ghost-line: rgba(99, 58, 23, .34); --ghost-ink: #4a321c; --success: #2c6a3f; --danger: #a3392a; --danger-strong: #82291c; --red-ink: #93301f; --red-fill-a: #a3392a; --red-fill-b: #7f2a1e; --ghost-red-ink: #8e2f20; --ghost-red-line: rgba(142, 47, 32, .40); --ghost-red-hover: #6f2418; --toggle-on: #2c6a3f; --toggle-on-edge: #24573a; --warn-ink: #8a5108; --info-ink: #2a5b86; --border-soft: rgba(74, 52, 32, .16); --border-strong: rgba(74, 52, 32, .42); --card-edge: rgba(74, 52, 32, .18); --board-border: rgba(74, 52, 32, .35); /* same strength as before: the game frame must not get lighter */ --row-line: rgba(74, 52, 32, .10); --border-faint: rgba(74, 52, 32, .12); --edge: rgba(74, 52, 32, .14); --edge-strong: rgba(74, 52, 32, .28); --well: rgba(74, 52, 32, .07); --well-strong: rgba(74, 52, 32, .12); --elev-1: 0 1px 2px rgba(58, 40, 24, .10), 0 4px 14px rgba(58, 40, 24, .07); --elev-2: 0 2px 4px rgba(58, 40, 24, .12), 0 18px 40px rgba(58, 40, 24, .14); --felt-base-a: #406c54; --felt-base-b: #365d48; --felt-base-c: #2d4f3d; --felt-rim: #5b4330; --stage-back-a: #eadfcb; --stage-back-b: #dac9ac; --stage-floor-a: #a88457; --stage-floor-b: #9a774b; --accent-ink-mix: 50%; /* --chip-tint (20 %) and --gold-ink follow further down (same-specificity rules) */ /* Lobby panels + the game head (walnut sign with the accent along its lower edge). */ --lobby-card-a: #f9f6f0; --lobby-card-b: #f1ebdf; --band-a: #47341f; --band-b: #3b2b1b; --band-mix-a: 14%; --band-mix-b: 10%; --band-rule: 3px; --plaque: #3b2b1b; --plaque-edge: #f1dcb2; --plaque-ico-mix: 38%; --plaque-ink-mix: 20%; --panel-veil: #f4efe6; /* Walnut chrome: header, footer, page head, game head. */ --chrome: #3a2a1d; --chrome-heading: #f0cd84; --chrome-text: #eadcc4; --chrome-dim: #c9b79b; --chrome-old-paper: #d8c7a8; --chrome-focus: #f0cd84; --chrome-control: rgba(255, 240, 215, .08); --chrome-raised: #4a3726; --chrome-hover: rgba(240, 205, 132, .12); --chrome-line: rgba(230, 187, 108, .30); --chrome-line-strong: rgba(230, 187, 108, .55); --chrome-red: #f59a86; --chrome-red-line: rgba(245, 154, 134, .50); --chrome-red-hover: #ffc2b4; --chrome-ann-info: #cfe3f5; --chrome-ann-warn: #f0dca0; --chrome-ann-warn-bg: rgba(212, 160, 30, .14); --chrome-ann-error: #f0c0b8; --logo-light-display: none; --logo-dark-display: inline-block; --logo-filter: drop-shadow(0 0 6px rgba(200, 146, 42, .4)); } /* Desert Sky ("desert") — daylight taken literally: sky blue at the top of the page, adobe sand at the bottom, terracotta leads (headings, primary button with light ink), turquoise is the counter colour (tabs, links, switches, focus, info, secondary button), poster heads in the full enamel accent. Mockup: docs/mockups/light-saloon-redesign.html (C). */ [data-theme="desert"] { --surface-0-a: #d6e5ea; --surface-0-b: #ebe6dc; --surface-0-c: #e4d4bd; --chrome: rgba(251, 250, 246, .92); --scrim: rgba(251, 249, 244, .9); --shadow-color: rgba(70, 50, 35, .16); --card-grad-a: #fcfaf6; --card-grad-b: #f6f1e9; --board-grad-a: #fcfaf6; --board-grad-b: #f6f1e9; --surface-1: #fffdf9; --surface-1-strong: #fffefc; --input-bg: #fffefc; --modal-grad-a: #fdfbf8; --modal-grad-b: #f3ece2; --surface-2: rgba(23, 112, 107, .05); --surface-hover: rgba(23, 112, 107, .08); --text-main: #463a31; /* ~9.7:1 on the panel (DESIGN_GUIDE §2: 8-10:1 by intent, not 14:1) */ --text-dim: #5f554c; --old-paper: #53483e; --heading: #8f3b1b; --accent-strong: #17706b; --accent-amber: #8c3a14; --gold: #c98a2e; --gold-light: #e3b05a; --accent: #a8401e; --accent-light: #c9602f; --btn-gold-start: #a8401e; --btn-gold-end: #b24e27; --btn-gold-ink: #fff8ec; --btn-gold-glow: 0 4px 14px rgba(168, 64, 30, .26); --ghost-line: rgba(23, 112, 107, .45); --ghost-ink: #0f5a56; /* was #17706b: 2.8 to 3.6 : 1 at the worst stop of the game grounds */ --tab-on: #12605c; /* one step darker than the turquoise: the page head carries a terracotta tint */ --tab-line: #17706b; --toggle-on: #17706b; --toggle-on-edge: #125a56; --success: #2a6b45; --danger: #a3302a; --danger-strong: #7f241f; --red-ink: #a3302a; --red-fill-a: #a3302a; --red-fill-b: #7f241f; --ghost-red-ink: #9a2d26; --ghost-red-line: rgba(163, 48, 42, .42); --ghost-red-hover: #7a221c; --warn-ink: #8c5000; --info-ink: #17706b; --border-soft: rgba(60, 50, 40, .13); --border-strong: rgba(60, 50, 40, .38); --card-edge: rgba(60, 50, 40, .14); --board-border: rgba(80, 60, 40, .35); --row-line: rgba(60, 50, 40, .08); --border-faint: rgba(60, 50, 40, .10); --edge: rgba(60, 50, 40, .12); --edge-strong: rgba(60, 50, 40, .26); --well: rgba(23, 112, 107, .06); --well-strong: rgba(23, 112, 107, .10); --elev-1: 0 1px 2px rgba(70, 50, 35, .08), 0 6px 16px rgba(70, 50, 35, .07); --elev-2: 0 2px 6px rgba(70, 50, 35, .10), 0 20px 44px rgba(70, 50, 35, .14); --felt-base-a: #2f6c5c; --felt-base-b: #285d4f; --felt-base-c: #214e42; --felt-rim: #8c5a3a; --stage-back-a: #dfe9ea; --stage-back-b: #cfdadb; --stage-floor-a: #b07a52; --stage-floor-b: #a06c46; --scene-ink: #5a3a22; --scene-glow: #d0892a; --accent-ink-mix: 48%; /* --chip-tint (18 %) and --gold-ink follow further down (same-specificity rules) */ --lobby-card-a: #fcfaf6; --lobby-card-b: #f4eee4; --band-a: #f7f3ec; --band-b: #efe8dc; --band-mix-a: 10%; --band-mix-b: 16%; } /* ── §8 "Always dark islands" — DISMANTLED in light-theme stage 2. The former dark re-pin block for .screen-game/.screen-break/.screen-voting/ .screen-result/.card-board was removed outright: every game surface now runs on the theme-aware tokens (dark values = the old island values). Deliberately kept FIXED DARK are only standalone artwork/cinema surfaces (intro windows .gintro-*, dice/action cinemas, roll/shuffle prompts, kick toasts, card backs, Seeschlacht water, chat telegram paper, header hero .lobby-hero) — their text inks hang off the raw palette (--raw-*), never off theme tokens. ── */ /* Per-game accent colors: applied via mode-* classes on the game screen root, the lobby wrapper, and mode pills in profile/statistics. */ .mode-schattenspiel { --accent: #5a2f4a; --accent-light: #9a5a8a; } .mode-hangman { --accent: #7a3a1a; --accent-light: #b8693a; } .mode-tabu { --accent: #a8553a; --accent-light: #d68a72; } .mode-musikquiz { --accent: #a3324a; --accent-light: #d65c78; } /* Wissensquiz: teal/blue-green - intentionally the only COOL accent, clearly distinct from the four warm tones. */ .mode-wissensquiz { --accent: #1f6f6a; --accent-light: #3fa89f; } /* Memory: jade/card-table green */ .mode-memory { --accent: #1f8a6d; --accent-light: #37b894; } /* Durak: tsarist purple */ .mode-durak { --accent: #4a2f6e; --accent-light: #7d5bc0; } /* Skat: oak-leaf green (card table mode) */ .mode-skat { --accent: #3f6b32; --accent-light: #7faa55; } /* Doppelkopf: cognac/amber (card table mode) */ .mode-doppelkopf { --accent: #9a5a1e; --accent-light: #d18a3e; } /* Poker: garnet red (card table mode) */ .mode-poker { --accent: #8e2c3b; --accent-light: #c85a6a; } /* Seeschlacht: navy/steel blue */ .mode-seeschlacht { --accent: #2b4f74; --accent-light: #4d7eab; } /* Schnellschuss: cactus teal (Stammtisch shedding game) */ .mode-schnellschuss { --accent: #1f9aae; --accent-light: #4fc4d6; } /* Rausschmeisser: colt steel / gunmetal (dice race game) */ .mode-rausschmeisser { --accent: #4a5d6b; --accent-light: #7d97a8; } /* Mahjong: bone-white taupe (stone/porcelain, layered pair puzzle) */ .mode-mahjong { --accent: #8a7a63; --accent-light: #b8a888; } /* Boomtown: prairie/denim blue (frontier build-and-trade board game) */ .mode-boomtown { --accent: #2f6aa6; --accent-light: #5fa0da; } /* Ultimate TicTacToe: rosewood/mauve (meta tic-tac-toe board game). --x-color/--o-color are the readable X/O glyph tints (per theme, ≥7:1) — --accent-light must never be text. */ .mode-uttt { --accent: #82355c; --accent-light: #c76194; --x-color: #d98cb2; --o-color: #9db2c7; } [data-scheme="light"] .mode-uttt { --x-color: #7a2a4e; --o-color: #3f5468; } /* Quizmaster: brass (host-moderated quiz show; reserved in DESIGN_GUIDE §3, measured against every neighbour — copper and bronze were too close to Tabu and Doppelkopf). */ .mode-quizmaster { --accent: #76702a; --accent-light: #b3aa50; } /* Klapperschlange: chartreuse, venom green (snake; reserved in DESIGN_GUIDE §3 for the solo arcade games, measured against every neighbour). */ .mode-klapperschlange { --accent: #6f8f22; --accent-light: #a8c455; } /* Spukstollen: mint, a will-o'-the-wisp in the mine (maze chase; reserved in DESIGN_GUIDE §3 for the solo arcade games, measured against every neighbour). */ .mode-spukstollen { --accent: #3aa88a; --accent-light: #6fd0b4; } /* Frachtgut: lavender (falling freight; reserved in DESIGN_GUIDE §3 for the solo arcade games, chosen for its distance to every neighbour — it tells nothing about the game on purpose). */ .mode-frachtgut { --accent: #6a5fa8; --accent-light: #a79ae0; } /* Mühle: dove blue (board duel; reserved in DESIGN_GUIDE §3 for the board games, nearest neighbour Boomtown 12.8). Its --accent-light passes as dark ink on every board (min 4.67). */ .mode-muehle { --accent: #566b8c; --accent-light: #93a9cc; } /* Schach: ebony and ivory, the colours of the pieces (board duel; reserved in DESIGN_GUIDE §3, nearest neighbour Mahjong 18.8). Its --accent-light passes as dark ink on every board. */ .mode-schach { --accent: #5c5446; --accent-light: #c4b89c; } /* Backgammon: rose quartz (board duel; reserved in DESIGN_GUIDE §3, nearest neighbour Tabu 13.3). */ .mode-backgammon { --accent: #a0546a; --accent-light: #d68aa0; } /* Sudoku: indigo, cool and clear (number puzzle; reserved in DESIGN_GUIDE §3, measured against every neighbour). */ .mode-sudoku { --accent: #40409a; --accent-light: #8184dc; } /* Bonanza: bone ivory, the colour of the dice (nearest neighbour Mahjong 13.0). Its --accent-light passes as ink on every dark board (10.96 on the panel) and needs no darker-scheme ink. */ .mode-bonanza { --accent: #8c8060; --accent-light: #d8ccae; } /* Light-theme stage 2: accent-tinted TEXT ink. Dark keeps the vivid --accent-light look (pixel-identical), light switches to a readable accent/text mix — --accent-light must never be used as a text color directly. --gold-ink is the same idea for the fixed gold accent (--gold as text). The per-mode rule re-declares the ink ON the mode root so it picks up the mode accent (custom properties resolve where they are declared, not where they are used). */ :root { --accent-ink: var(--accent-light); --gold-ink: #c8922a; } [data-scheme="light"] { --gold-ink: #7a4a12; } /* Christmas default accent: its red reaches only ~4:1 as text on the green board, so the ink is lighter than --accent-light. Must follow the :root line above (same specificity). */ [data-theme="christmas"] { --accent-ink: #f4695a; } /* Light Saloon's and Desert Sky's gold inks. Must follow the two lines above for the same reason. */ [data-theme="light"] { --gold-ink: #7b5214; } [data-theme="desert"] { --gold-ink: #7d5212; } [data-theme="contrast"] { --gold-ink: #ffd166; --accent-ink: #ffd166; } /* The same trap silently dropped these four theme inks until 2026-09-28 (they sat inside the theme blocks, above the :root/scheme lines). Halloween and Vivid (light) were lifted one step in the same hue once they applied: the old values reached only 4.28 and 4.24 on the card. */ [data-theme="halloween"] { --gold-ink: #e4882e; } [data-theme="vivid"] { --gold-ink: #f4a261; } [data-theme="vividlight"] { --gold-ink: #a5520d; } [data-theme="easter"] { --gold-ink: #7a6210; } .mode-schattenspiel, .mode-hangman, .mode-tabu, .mode-musikquiz, .mode-wissensquiz, .mode-memory, .mode-durak, .mode-skat, .mode-doppelkopf, .mode-poker, .mode-seeschlacht, .mode-schnellschuss, .mode-rausschmeisser, .mode-mahjong, .mode-boomtown, .mode-uttt, .mode-quizmaster, .mode-klapperschlange, .mode-spukstollen, .mode-frachtgut, .mode-muehle, .mode-schach, .mode-backgammon, .mode-sudoku, .mode-bonanza { --accent-ink: var(--accent-light); } /* Dark-scheme ink for the darker accents: their --accent-light stays below 4.5:1 as text on the dark boards (worst: Christmas). Same OKLCH hue, lighter; the accent pair itself is unchanged (DESIGN_GUIDE §3). The light rule below is more specific and still wins. */ .mode-schattenspiel { --accent-ink: #c480b2; } .mode-hangman { --accent-ink: #d88657; } .mode-musikquiz { --accent-ink: #f27590; } .mode-poker { --accent-ink: #e77684; } .mode-seeschlacht { --accent-ink: #6fa1d0; } .mode-durak { --accent-ink: #a988f1; } .mode-rausschmeisser { --accent-ink: #8ba5b6; } .mode-uttt { --accent-ink: #e178ab; } .mode-backgammon { --accent-ink: #db8fa5; } .mode-sudoku { --accent-ink: #8e92eb; } /* Hoher Kontrast: every mode gets the lighter sibling of its --accent-light (mixed with white until >= 7:1 on the card #1d1710, AAA) — computed in docs/mockups/ss0498-hoher-kontrast.html. The accent pair itself stays unchanged. Two attribute+class selectors beat the one-class rules above. */ [data-theme="contrast"] .mode-backgammon { --accent-ink: #d88fa4; } [data-theme="contrast"] .mode-bonanza { --accent-ink: #d8ccae; } [data-theme="contrast"] .mode-boomtown { --accent-ink: #6faade; } [data-theme="contrast"] .mode-doppelkopf { --accent-ink: #d79855; } [data-theme="contrast"] .mode-durak { --accent-ink: #b19dd9; } [data-theme="contrast"] .mode-frachtgut { --accent-ink: #b0a4e3; } [data-theme="contrast"] .mode-hangman { --accent-ink: #cf9979; } [data-theme="contrast"] .mode-klapperschlange { --accent-ink: #a8c455; } [data-theme="contrast"] .mode-mahjong { --accent-ink: #b8a888; } [data-theme="contrast"] .mode-memory { --accent-ink: #37b894; } [data-theme="contrast"] .mode-muehle { --accent-ink: #93a9cc; } [data-theme="contrast"] .mode-schach { --accent-ink: #c4b89c; } [data-theme="contrast"] .mode-musikquiz { --accent-ink: #e28da1; } [data-theme="contrast"] .mode-quizmaster { --accent-ink: #b3aa50; } [data-theme="contrast"] .mode-rausschmeisser { --accent-ink: #92a8b6; } [data-theme="contrast"] .mode-schattenspiel { --accent-ink: #c099b6; } [data-theme="contrast"] .mode-schnellschuss { --accent-ink: #4fc4d6; } [data-theme="contrast"] .mode-seeschlacht { --accent-ink: #8aaac8; } [data-theme="contrast"] .mode-skat { --accent-ink: #89b163; } [data-theme="contrast"] .mode-spukstollen { --accent-ink: #6fd0b4; } [data-theme="contrast"] .mode-sudoku { --accent-ink: #9a9de3; } [data-theme="contrast"] .mode-tabu { --accent-ink: #d9937d; } [data-theme="contrast"] .mode-poker { --accent-ink: #db929d; } [data-theme="contrast"] .mode-uttt { --accent-ink: #d890b4; } [data-theme="contrast"] .mode-wissensquiz { --accent-ink: #5ab4ac; } /* Accent share of the tinted chip ground behind accent-ink text (selected chips, role and difficulty badges). Above ~14 % the tint lifts the dark ground so far that the lighter inks drop below 4.5:1; the light scheme has headroom and keeps a stronger tint. A percentage, not a colour alias, so each rule still mixes its own mode accent. */ :root { --chip-tint: 14%; } [data-scheme="light"] { --chip-tint: 26%; } /* Light Saloon mixes a stronger accent into its inks (--accent-ink-mix 50 %), so its chips stay lighter to keep the inks at >= 4.5:1. Follows the scheme line (same specificity). */ [data-theme="light"] { --chip-tint: 20%; } [data-theme="desert"] { --chip-tint: 18%; } /* Hoher Kontrast: chips carry no tint at all — they are outlined ([data-contrast="more"] block). */ [data-theme="contrast"] { --chip-tint: 0%; } [data-scheme="light"], [data-scheme="light"] :is(.mode-schattenspiel, .mode-hangman, .mode-tabu, .mode-musikquiz, .mode-wissensquiz, .mode-memory, .mode-durak, .mode-skat, .mode-doppelkopf, .mode-poker, .mode-seeschlacht, .mode-schnellschuss, .mode-rausschmeisser, .mode-mahjong, .mode-boomtown, .mode-uttt, .mode-quizmaster, .mode-klapperschlange, .mode-spukstollen, .mode-frachtgut, .mode-muehle, .mode-schach, .mode-backgammon, .mode-sudoku, .mode-bonanza) { --accent-ink: color-mix(in srgb, var(--accent) var(--accent-ink-mix, 30%), var(--text-main)); } /* Mint is the lightest accent: at Light Saloon's 50 % and Desert Sky's 48 % its ink reached only 4.25 and 4.45 : 1 on the cards, and less on the mint-tinted top band of the board. 32 % keeps it at >= 4.84 there (worst case over every gradient stop). */ [data-theme="light"] .mode-spukstollen, [data-theme="desert"] .mode-spukstollen { --accent-ink-mix: 32%; } /* ── Chrome inks. Header, footer, page head (.pf-pageuh) and game head (.lobby-header-card) may sit on a darker band than the page (Light Saloon: walnut). Inside them the semantic tokens point to --chrome-* values; a theme that sets none of those keeps the page values (pixel-identical). --page-* snapshots the page tokens on html (they resolve there, after every theme block), so the popovers inside the chrome can hand the page values back. --ann-*: announcement banner inks in the header (light-scheme rule falls back to its own). ── */ :root { --page-heading: var(--heading); --page-text-main: var(--text-main); --page-text-dim: var(--text-dim); --page-old-paper: var(--old-paper); --page-gold-ink: var(--gold-ink); --page-accent-strong: var(--accent-strong); --page-input-bg: var(--input-bg); --page-surface-1: var(--surface-1); --page-surface-1-strong: var(--surface-1-strong); --page-surface-2: var(--surface-2); --page-surface-hover: var(--surface-hover); --page-border-soft: var(--border-soft); --page-border-strong: var(--border-strong); --page-red-ink: var(--red-ink); --page-ghost-line: var(--ghost-line); --page-ghost-ink: var(--ghost-ink); --page-ghost-red-ink: var(--ghost-red-ink); --page-ghost-red-line: var(--ghost-red-line); --page-ghost-red-hover: var(--ghost-red-hover); } :is(.app-header, .app-footer, .pf-pageuh, .lobby-header-card) { --heading: var(--chrome-heading, var(--page-heading)); --text-main: var(--chrome-text, var(--page-text-main)); --parchment: var(--chrome-text, var(--page-text-main)); --text-dim: var(--chrome-dim, var(--page-text-dim)); --smoke: var(--chrome-dim, var(--page-text-dim)); --old-paper: var(--chrome-old-paper, var(--page-old-paper)); --gold-ink: var(--chrome-heading, var(--page-gold-ink)); --accent-strong: var(--chrome-focus, var(--page-accent-strong)); --input-bg: var(--chrome-control, var(--page-input-bg)); --surface-1: var(--chrome-raised, var(--page-surface-1)); --surface-1-strong: var(--chrome-raised, var(--page-surface-1-strong)); --surface-2: var(--chrome-control, var(--page-surface-2)); --surface-hover: var(--chrome-hover, var(--page-surface-hover)); --border-soft: var(--chrome-line, var(--page-border-soft)); --border-strong: var(--chrome-line-strong, var(--page-border-strong)); --red-ink: var(--chrome-red, var(--page-red-ink)); --ghost-line: var(--chrome-line-strong, var(--page-ghost-line)); /* unset in a theme: invalid → the button's own fallback */ --ghost-ink: var(--chrome-old-paper, var(--page-ghost-ink)); --ghost-red-ink: var(--chrome-red, var(--page-ghost-red-ink)); --ghost-red-line: var(--chrome-red-line, var(--page-ghost-red-line)); --ghost-red-hover: var(--chrome-red-hover, var(--page-ghost-red-hover)); --ann-info-ink: var(--chrome-ann-info); --ann-warn-ink: var(--chrome-ann-warn); --ann-warn-bg: var(--chrome-ann-warn-bg); --ann-error-ink: var(--chrome-ann-error); } :is(.app-header, .app-footer, .pf-pageuh, .lobby-header-card) :is(.profile-dropdown, .volume-pop, .lang-dd-menu, .ann-pop, .modal-overlay-v2) { --heading: var(--page-heading); --text-main: var(--page-text-main); --parchment: var(--page-text-main); --text-dim: var(--page-text-dim); --smoke: var(--page-text-dim); --old-paper: var(--page-old-paper); --gold-ink: var(--page-gold-ink); --accent-strong: var(--page-accent-strong); --input-bg: var(--page-input-bg); --surface-1: var(--page-surface-1); --surface-1-strong: var(--page-surface-1-strong); --surface-2: var(--page-surface-2); --surface-hover: var(--page-surface-hover); --border-soft: var(--page-border-soft); --border-strong: var(--page-border-strong); --red-ink: var(--page-red-ink); --ghost-line: var(--page-ghost-line); --ghost-ink: var(--page-ghost-ink); --ghost-red-ink: var(--page-ghost-red-ink); --ghost-red-line: var(--page-ghost-red-line); --ghost-red-hover: var(--page-ghost-red-hover); --ann-info-ink: initial; --ann-warn-ink: initial; --ann-warn-bg: initial; --ann-error-ink: initial; } .uttt-local.illegal-dim { opacity: .4; filter: saturate(.6); } .uttt-local.won-x { background: color-mix(in srgb, var(--x-color) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--x-color) 55%, transparent); } .uttt-local.won-o { background: color-mix(in srgb, var(--o-color) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--o-color) 55%, transparent); } .uttt-local.won-x::after, .uttt-local.won-o::after, .uttt-local.drawn::after { content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Rye', cursive; pointer-events: none; font-size: clamp(26px, 7vw, 52px); } .uttt-local.won-x::after { content: '✕'; color: var(--x-color); opacity: .92; } .uttt-local.won-o::after { content: '○'; color: var(--o-color); opacity: .92; } .uttt-cell.is-x { color: var(--x-color); } .uttt-cell.is-o { color: var(--o-color); } @keyframes utti-pop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: none; } } /* 5 cards must fit a 375px viewport: tighten gap + shrink the row's cards. */ /* Base .btn is display:block + width:100%. In card action bars the buttons should be inline + content-width + compact (otherwise full-width "slabs"). */ .card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; align-items: center; } .card-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; flex: 0 0 auto; min-width: 104px; padding: 9px 18px; font-size: 13px; letter-spacing: .06em; border-radius: var(--btn-radius, 6px); } /* Card tables more compact - sections denser, smaller center, more compact "End game" (scoped to .card-board so Durak/Seeschlacht remain untouched). */ /* The entire game sits in ONE framed panel (like the header "card"): accent-colored border + dark gradient, so nothing floats loosely on the background. */ .card-board { gap: 0.5rem; position: relative; background: linear-gradient(135deg, var(--board-grad-a), var(--board-grad-b)); border: 1px solid var(--board-border); border-radius: 0 0 4px 4px; padding: 1rem 1.125rem; box-shadow: var(--board-shadow); } /* Docked directly below the header card (like .lobby-actions): header open at bottom, board square at top, shared 1px divider, no gap. */ .lobby-redesign .lobby-header + .card-board { border-radius: 0 0 4px 4px; } .card-board .durak-seats { gap: 8px; } .card-board .durak-table { padding: 12px 16px; } .card-board .durak-hand-head { margin-bottom: 4px; } .card-board .durak-hand { padding-top: 6px; } /* Shared anchored footer (lobby = game): strip at the bottom edge of the board panel, status info on the left (cab-status), context action on the right (start button or game actions). Nothing floats freely; the inner .card-actions row keeps its compact dimensions. */ .card-board .card-actions-bar { margin: 0.625rem -1.125rem -1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.875rem; flex-wrap: wrap; padding: 0.75rem 1.125rem; /* Saloon gold like the panel border (.card-board), not the mode accent - the footer visually belongs to the panel border. */ border-top: 1px solid var(--board-border); background: var(--surface-2); border-radius: 0 0 4px 4px; } .card-board .card-actions-bar:empty { display: none; } .card-board .card-actions-bar .cab-status { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 220px; min-width: 0; font-size: 0.78125rem; color: var(--old-paper); line-height: 1.3; } .card-board .card-actions-bar .cab-status b { color: var(--parchment); font-weight: 600; } /* May shrink, so its own flex-wrap takes effect on a narrow screen: with flex 0 0 auto the row kept both buttons side by side and pushed the page 40 px wide on a 375 px phone. */ .card-board .card-actions-bar .card-actions { margin: 0; flex: 0 1 auto; min-width: 0; } /* ════ Unified shell - mock-only rules made real. Applies to ALL games in the shared GameShell (Lobby + Game). ════ */ /* Width cap: board flush with the 880px header (.lobby-header) - width:100%, otherwise the panel shrinks to content width in the centered screen-game flex (grid collapses). */ .card-board { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; } /* Nested (unframed) card panel fills the shell without its own cap. */ .card-board .card-board { max-width: none; } /* No double border: remove frame from inner .card / profile inside the accent panel. */ .card-board .card { background: none; border-color: transparent; box-shadow: none; } .card-board .card::before, .card-board .card::after { display: none; } .card-board .stat-box.wanted-poster { background: none; border-color: transparent; box-shadow: none; } /* Fit inner game containers into the shell. */ .card-board .screen-voting { background: none; min-height: 0; padding: 0; } .card-board .hangman-layout, .card-board .see-wrap, .card-board .mq-card, .card-board .hangman-word-card, .card-board .memory-board-card { margin: 0; } /* Seeschlacht: "Your Fleet" + "Target Waters" side by side (otherwise they wrap in the narrower panel). */ .card-board .see-main { flex-wrap: nowrap; justify-content: center; gap: 14px; padding: 12px; align-self: stretch; } .card-board .see-main > div { min-width: 0; } .card-board .see-targets { justify-content: center; } /* Break/podium/result screens: height/centering + deframing (own borders/ornaments removed). */ .card-board .screen-result { min-height: 0; padding: 4px 0; } .card-board .break-stage { min-height: 0; margin: 0 auto; } .card-board .break-stage, .card-board .card-break { background: none; border: none; box-shadow: none; } .card-board .break-stage::before, .card-board .break-stage::after { display: none; } /* In-game: game components render their own screen-game/screen-break wrapper INSIDE the shared GameShell card-board - neutralize (no second saloon background/panel). */ .card-board .screen-game, .card-board .screen-break { background: none; min-height: 0; padding: 0; } /* Card games bring their own "durak-board card-board" - unfame the nested panel so only the outer GameShell draws the accent border (no double border). */ .card-board .card-board { border: none; background: none; box-shadow: none; padding: 0; margin: 0; } /* ════════════════════════════════════════════════════════════ Modal v2 - unified base component Used via the component in Components/Shared/Modal.razor. The old modal wrapper classes (.modal-overlay, .modal-backdrop, .modal-content*, .modal-header/body/footer/close, .tdm-modal/-head/-close/-body, .history-modal*, .player-profile-modal, .mode-info-modal, .rules-modal, .matchmaking-modal, .help-modal/-body, .mini-dialog, .create-lobby-modal) were removed in May 2026 (~308 lines). Body/content classes like .tdm-hero, .player-profile-info, .join-dialog-* etc. remain and are used directly in the BodyContent slot. ═══════════════════════════════════════════════════════════════ */ .modal-overlay-v2 { position: fixed; inset: 0; background: rgba(0,0,0,.72); /* backdrop-filter removed: caused GPU repaint on every animation frame (perf measurement: presentation delay dominates, blur is unnecessarily expensive) */ z-index: 1000; /* align-items:flex-start + overflow-y:auto + margin:auto on child instead of align-items:center. Fixes the iOS Safari portrait problem (fixed + backdrop- filter + flex-centering caused the modal to jump to the bottom right) and scrolls cleanly for very tall modals without clipping the top. On desktop unchanged, centered (margin:auto). */ display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 1.25rem; animation: modalV2FadeIn .05s ease-out; } @keyframes modalV2FadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-v2 { /* Theme-aware modal surface: outside game pages it follows light/dark; inside the always-dark islands the token re-pin keeps it dark. */ background: linear-gradient(to bottom, var(--modal-grad-a) 0%, var(--modal-grad-b) 100%); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--elev-2); display: flex; flex-direction: column; /* overflow:visible (was hidden): the game-switch dropdown in the modal header must be able to extend BELOW short modals (few settings). Corner clipping is handled by radii on the first/last child instead. */ overflow: visible; width: 100%; max-height: calc(100vh - 40px); margin: auto; /* centers vertically when there is space, otherwise the overlay scrolls */ } .modal-v2 > :first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } .modal-v2 > :last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .modal-v2-sm { max-width: 440px; } .modal-v2-md { max-width: 580px; } .modal-v2-lg { max-width: 760px; } .modal-v2-xl { max-width: 920px; } /* Lobby settings: room for the filter pill row + chips */ .modal-v2-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); flex-shrink: 0; /* Wrap on mobile: when the header content (e.g. title + HeaderContent + close) does not fit on one line, elements may wrap to the next line instead of overflowing or overlapping. No effect on desktop since the content fits comfortably. */ flex-wrap: wrap; } .modal-v2-title { font-family: 'Rye', cursive; font-size: 1.0625rem; color: var(--heading); letter-spacing: .5px; flex: 1; display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .modal-v2-title-icon { font-size: 1.375rem; flex-shrink: 0; line-height: 1; /* Emoji/glyph vertical alignment: emoji glyphs sit visually high in their line box (more space below than above), while the Rye title caps sit low in the line box (cap height near baseline). flex align-items:center aligns the line-box centers, not the visual glyph centers - so without correction the icon appears about 2px above the title. translateY corrects this. line-height:1 additionally tightens the icon box so the nudge remains consistent. */ transform: translateY(2px); } /* Element variant (IconContent, e.g. an avatar): a rendered box already sits centred in the line box, so it gets neither the emoji nudge nor the glyph font-size. */ .modal-v2-title-icon-el { flex-shrink: 0; display: flex; align-items: center; } .modal-v2-title-text-wrap { display: flex; flex-direction: column; min-width: 0; } .modal-v2-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Small technical addition after the title (e.g. record id). Body font on purpose: the Rye display face makes digits hard to read at this size. */ .modal-v2-title-suffix { flex-shrink: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; color: var(--smoke); letter-spacing: 0; } .modal-v2-subtitle { font-size: 0.75rem; color: var(--smoke); font-style: italic; letter-spacing: 0; margin-top: 0.125rem; } .modal-v2-close { background: transparent; border: 1px solid var(--border-soft); color: var(--text-dim); width: 28px; height: 28px; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.875rem; font-family: inherit; flex-shrink: 0; transition: all .15s; padding: 0; } @media (hover: hover) { .modal-v2-close:hover { color: var(--heading); border-color: var(--gold); background: var(--surface-hover); } } .modal-v2-body { padding: 1.125rem 1.25rem; overflow-y: auto; flex: 1; min-height: 0; } .modal-v2-footer { display: flex; gap: 0.625rem; padding: 0.75rem 1.125rem; border-top: 1px solid var(--border-soft); background: var(--surface-2); justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; } .modal-v2-footer-vertical { flex-direction: column; align-items: stretch; } .modal-v2-footer-vertical .btn { width: 100%; } /* ── Confirm-Switch - info card for the existing lobby ────────── */ .switch-lobby-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; margin: 0.25rem 0 0.875rem; } .switch-lobby-code { font-family: 'Rye', cursive; font-size: 1.125rem; letter-spacing: .22em; color: var(--heading); background: var(--surface-1-strong); border: 1px solid var(--gold); padding: 0.3125rem 0.75rem; border-radius: 3px; white-space: nowrap; } .switch-lobby-meta { min-width: 0; } .switch-lobby-game { color: var(--parchment); font-weight: 600; } .switch-lobby-sub { color: var(--smoke); font-size: 0.75rem; margin-top: 0.125rem; } .switch-role-chip { display: inline-block; font-size: 0.75rem; letter-spacing: .04em; padding: 0.0625rem 0.4375rem; border-radius: 10px; margin-left: 0.125rem; border: 1px solid rgba(200,146,42,.4); color: var(--heading); } .switch-host-note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.78125rem; color: var(--old-paper); background: rgba(139,26,26,.12); border-left: 2px solid var(--amber); padding: 0.5rem 0.6875rem; border-radius: 0 3px 3px 0; } .switch-host-note span:first-child { flex-shrink: 0; } .hangman-word-card > *, .tabu-word-display > *, .tabu-reveal-word-card > *, .mq-card > * { position: relative; z-index: 1; } .stage-corner { position: absolute; font-size: 0.875rem; color: var(--accent-ink); font-family: 'Times New Roman', serif; line-height: 1; opacity: .8; pointer-events: none; z-index: 2; } .stage-corner-tl { top: 6px; left: 8px; } .stage-corner-tr { top: 6px; right: 8px; } .stage-corner-bl { bottom: 6px; left: 8px; } .stage-corner-br { bottom: 6px; right: 8px; } /* ─── Western avatar (procedural, deterministic from name hash) ────── Used by the Avatar.razor component. Three hat variants, three mustache variants, two eye styles - 18 combinations. Four sizes Sm/Md/Lg/Xl. */ .avatar { position: relative; display: inline-block; flex-shrink: 0; --av-size: 28px; --hat-color: #1a0f06; width: var(--av-size); height: var(--av-size); /* Clip to circle - procedural portrait is a clean circle like the photo; the hat corners of the square box no longer stick out of the ring. */ border-radius: 50%; overflow: hidden; } .avatar-sm { --av-size: 20px; } .avatar-md { --av-size: 28px; } .avatar-lg { --av-size: 44px; } .avatar-xl { --av-size: 60px; } .avatar-xxl { --av-size: 104px; } /* Uploaded portrait - sits above the procedural one (same size), round & opaque. onerror removes the on 404 - procedural remains. */ .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0,0,0,.5); background: #2a1a0c; /* Hidden until onload confirms the file exists; on 404 onerror keeps it hidden - procedural portrait remains visible. */ visibility: hidden; } /* Team logo (rounded square; placeholder shield + optional image on top). */ .team-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #5a3a1f, #241608); border: 1px solid rgba(200,146,42,.4); } .team-logo-sm { width: 40px; height: 40px; font-size: 1.25rem; border-radius: 8px; } .team-logo-md { width: 64px; height: 64px; font-size: 1.875rem; } .team-logo-lg { width: 88px; height: 88px; font-size: 2.75rem; } /* Sits on the fixed dark .team-logo gradient — must stay raw/light in both themes. */ .team-logo-ph { color: var(--raw-smoke); line-height: 1; } .team-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; } /* Teams overview (/Teams) */ .teams-toolbar { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.875rem; } .teams-search { flex: 1; min-width: 180px; max-width: 320px; } .teams-create-btn { margin-left: auto; } /* Base .btn is display:block + width:100% + no background. In the team UI the buttons should be inline + content-width + more compact. */ .teams-toolbar .btn, .team-row .btn, .team-hero-actions .btn, .team-admin-actions .btn, .team-back { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; width: auto; flex: 0 0 auto; padding: 0.5625rem 1rem; font-size: 0.8125rem; letter-spacing: .06em; } /* Buttons WITHOUT a color modifier (search, view, change logo, promote, back) would otherwise inherit the backgroundless base .btn - white */ .settings-toggle-btn { width: 46px; height: 24px; border-radius: 12px; position: relative; padding: 0; border: none; cursor: pointer; background: rgba(139, 26, 26,.6); /* off = red */ transition: background .18s; flex-shrink: 0; } .settings-toggle-btn.on { background: var(--toggle-on, var(--green-ok)); } /* Profile: account theme preference row (select + hint). */ .profile-theme-row { flex-wrap: wrap; row-gap: 0.25rem; } .profile-theme-select { width: auto; min-width: 200px; max-width: 100%; } .profile-theme-hint { flex-basis: 100%; font-size: 0.75rem; color: var(--text-dim); } /* on = green */ .settings-toggle-btn .toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #e8d5b0; color: #1a1208; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.5); } .settings-toggle-btn.on .toggle-knob { left: 24px; } @media (hover: hover) { .settings-toggle-btn:hover { filter: brightness(1.12); } } /* ── Settings Section Label ────────────────────────────────────────────── Subtle separator heading between lobby and game settings in the new-lobby dialog. Two horizontal lines (pseudo-elements) flank the label text. .first = no top margin (first section directly at the start of the modal body). Applies to all game modes. */ .settings-section-label { display: flex; align-items: center; gap: 0.5rem; margin: 0.875rem 0 0.25rem; color: var(--smoke); font-size: 0.75rem; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; } .settings-section-label::before, .settings-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(200,146,42,.15); } .settings-section-label.first { margin-top: 0; } /* ── Game Variant Block ─────────────────────────────────────────────────── Visually highlighted block for the rapid-fire mode in the music-quiz lobby dialog — replaces the previous settings-toggle-row. Shows mode name, short description text and the toggle button. .active = rapid-fire enabled (golden border + light background). */ .spielvariante-block { border: 1px solid rgba(200,146,42,.2); border-radius: 5px; background: var(--surface-2); margin: 0.125rem 0 0.375rem; transition: border-color .18s, background .18s; } .spielvariante-block.active { border-color: rgba(200,146,42,.45); background: rgba(200,146,42,.07); } .spielvariante-header { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; } .spielvariante-info { flex: 1; min-width: 0; } .spielvariante-name { font-size: 0.8125rem; font-weight: 600; color: var(--parchment); display: flex; align-items: center; gap: 0.375rem; transition: color .18s; } /* --heading, not --gold-light: identical in the dark theme, readable dark gold in the light one (--gold-light as text fell to near-invisible on the light surfaces). */ .spielvariante-block.active .spielvariante-name { color: var(--heading); } .spielvariante-desc { font-size: 0.75rem; color: var(--smoke); margin-top: 0.1875rem; line-height: 1.5; } /* ── Advanced Settings Collapsible ───────────────────────────────────────── Collapses fine-tuning options (answer delay, stop-on-first). Uses native
— no JS state needed. Deliberately mirrors the filter-collapsible look (bordered box, rotating ▸ triangle) so it stands as an equal block next to the filters and has a clear click target — instead of floating centered text. */ .settings-advanced-collapsible { border: 1px solid rgba(255,255,255,.06); border-radius: 4px; background: var(--surface-2); margin-top: 0.375rem; } .settings-advanced-collapsible > .settings-advanced-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; user-select: none; border-radius: 4px; transition: background .15s ease; } .settings-advanced-collapsible > .settings-advanced-summary::-webkit-details-marker { display: none; } @media (hover: hover) { .settings-advanced-collapsible > .settings-advanced-summary:hover { background: rgba(255,255,255,.03); } } .settings-advanced-collapsible > .settings-advanced-summary::before { content: '▸'; font-size: 1.125rem; font-weight: 700; color: var(--gold, #c8922a); transition: transform .2s ease; display: inline-block; margin-right: 0.5rem; } .settings-advanced-collapsible[open] > .settings-advanced-summary::before { transform: rotate(90deg); } /* ── Card table rules (Skat, Doppelkopf) ─────────────────────────────────── The rules dialog: preset cards, the line that says what deviates from the rulebook, and the collapsed single rules. Tokens only, so every design carries it. */ .rule-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; margin: 0.25rem 0 0; } .rule-preset { display: flex; flex-direction: column; gap: 0.125rem; min-height: 3.5rem; padding: 0.5625rem 0.75rem; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-2); color: var(--text-main); font: inherit; text-align: left; cursor: pointer; } .rule-preset-name { font-size: 0.875rem; font-weight: 600; } .rule-preset-sub { font-size: 0.78125rem; color: var(--old-paper); } .rule-preset.selected { border-color: var(--heading); box-shadow: inset 0 0 0 1px var(--heading); } .rule-preset.selected .rule-preset-name { color: var(--heading); } .rule-preset:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; } .rule-summary { margin: 0.625rem 0 0.25rem; font-size: 0.8125rem; line-height: 1.45; color: var(--text-main); } .rule-summary b { color: var(--heading); } .rule-summary.plain { color: var(--old-paper); } .rule-adjust > .settings-advanced-summary { min-height: 2.75rem; font-size: 0.875rem; font-weight: 600; color: var(--heading); } .rule-adjust-count { margin-left: auto; font-size: 0.78125rem; font-weight: 400; color: var(--old-paper); } .rule-adjust-body { padding: 0 0.875rem 0.5rem; } /* Three long option names do not fit one line of a phone: the group may wrap, the page never scrolls sideways. */ .settings-pills-row.rule-choice { flex-wrap: wrap; } .settings-pills-row.rule-choice .quiz-mode-pills { flex-wrap: wrap; flex-shrink: 1; justify-content: flex-end; } /* The reason a chosen option cannot be saved, under its row. */ .settings-note.rule-error { color: var(--red-ink); font-weight: 600; } /* Read-only settings view: the line above the rules that deviate from the rulebook. */ .settings-rule-divider { margin: 0.375rem 0 0.125rem; padding-top: 0.375rem; border-top: 1px solid var(--border-soft); font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.8; color: var(--old-paper); } /* ── Lobby Sidebar: Quick-Access Buttons at Top ──────────────────────────── */ .lobby-sidebar-top-btns { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .btn-sm-action { flex: 1; font-size: 0.75rem !important; padding: 0.375rem 0.625rem !important; white-space: nowrap; } /* ── Stat Box (Game Sidebar) ─────────────────────────────────────────────── */ .stat-box { background: var(--surface-1-strong); border: 1px solid var(--border-soft); padding: 0.875rem 1rem; border-radius: 1px; } .stat-box h4 { font-family: 'Rye', cursive; font-size: 1rem; color: var(--accent); margin-bottom: 0.625rem; letter-spacing: .08em; } [data-scheme="light"] .stat-box h4 { color: var(--accent-ink); } /* the gold accent drops below 4.5:1 on parchment */ .stat-box-center { text-align: center; } /* Gold background for Explainer role reveal */ .bg-gold { background: radial-gradient(ellipse at 50% 30%, rgba(200,146,42,.12) 0%, transparent 70%), var(--dark); } /* ── History: Session Header as Collapsible Button ───────────────────── */ .history-session-header { /* button reset because we use