/* ============================================================ SitDown – theme palettes. Each theme is a set of CSS custom properties scoped via [data-theme=""] on . Components consume the variables without knowing which theme is active. ============================================================ */ /* ---------- Fine Dining (default) ---------- */ [data-theme="fine-dining"] { --th-bg: #354E44; --th-bg-deep: #243731; --th-bg-tile: #3D5A4E; --th-panel: #2B403A; --th-panel-border: #4A6B58; --th-table: #FAF6EB; --th-table-edge: #D7CCAE; --th-table-stroke: #8D6E63; --th-runner: #7B2D36; --th-runner-trim: #C9A95C; --th-placemat: #C9A95C; --th-plate: #FAFAFA; --th-plate-inner: #F0F0F0; --th-plate-stroke: #BBBBBB; --th-chair: #8B7355; --th-chair-dark: #6D5A42; --th-accent: #C9A95C; --th-accent-strong: #E0BE6F; --th-accent-soft: rgba(201, 169, 92, 0.18); --th-text: #F4EFE0; --th-text-muted: #C9C2A9; --th-clue-bg: rgba(255, 255, 255, 0.05); --th-clue-border: rgba(201, 169, 92, 0.35); --th-violation: #E5524F; --th-violation-soft: rgba(229, 82, 79, 0.20); --th-success: #6FCF97; --th-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); --th-font-display: 'Cormorant Garamond', 'Segoe UI', Georgia, serif; --th-font-body: 'Segoe UI', system-ui, sans-serif; --th-centerpiece: "🕯"; } /* ---------- Medieval Castle ---------- */ [data-theme="medieval-castle"] { --th-bg: #2A2520; --th-bg-deep: #1A1612; --th-bg-tile: #55524C; --th-panel: #3A332B; --th-panel-border: #4A4035; --th-table: #5A3A22; --th-table-edge: #5A3A22; --th-table-stroke: #33200F; --th-runner: transparent; --th-runner-trim: transparent; --th-placemat: #C7B18C; --th-plate: #B8B8BE; --th-plate-inner: #A0A0A8; --th-plate-stroke: #606066; --th-chair: #4B301C; --th-chair-dark: #2C1B0E; --th-accent: #C29555; --th-accent-strong: #E2BB7C; --th-accent-soft: rgba(194, 149, 85, 0.15); --th-text: #ECE3D2; --th-text-muted: #B7A98C; --th-clue-bg: rgba(255, 255, 255, 0.04); --th-clue-border: rgba(194, 149, 85, 0.32); --th-violation: #E0635E; --th-violation-soft: rgba(224, 99, 94, 0.20); --th-success: #84C28D; --th-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); --th-font-display: 'Cinzel', 'Cambria', 'Constantia', Georgia, serif; --th-font-body: 'Cambria', 'Georgia', serif; --th-centerpiece: "🛡"; } /* ---------- Persian Palace ---------- */ [data-theme="persian-palace"] { --th-bg: #142D4A; --th-bg-deep: #0B1A2D; --th-bg-tile: #1E3F6E; --th-panel: #1B355A; --th-panel-border: #C9A95C; --th-table: #1E3F6E; --th-table-edge: #6E4624; --th-table-stroke: #C9A95C; --th-runner: #8B1A2A; --th-runner-trim: #C9A95C; --th-placemat: #C9A95C; --th-plate: #E3C06A; --th-plate-inner: #B89646; --th-plate-stroke: #8D6E33; --th-chair: #4A2C1A; --th-chair-dark: #2A180E; --th-accent: #C9A95C; --th-accent-strong: #FFD685; --th-accent-soft: rgba(201, 169, 92, 0.20); --th-text: #FBF1D5; --th-text-muted: #D7C2A1; --th-clue-bg: rgba(255, 255, 255, 0.06); --th-clue-border: rgba(201, 169, 92, 0.45); --th-violation: #FF6F6B; --th-violation-soft: rgba(255, 111, 107, 0.22); --th-success: #5BC096; --th-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); --th-font-display: 'Cinzel Decorative', 'Cambria', Georgia, serif; --th-font-body: 'Cambria', 'Georgia', serif; --th-centerpiece: "🪔"; } /* ---------- Western Saloon ---------- */ [data-theme="western-saloon"] { --th-bg: #3A2618; --th-bg-deep: #1F140B; --th-bg-tile: #7A5532; --th-panel: #4A3220; --th-panel-border: #66442B; --th-table: #A07040; --th-table-edge: #7A5532; --th-table-stroke: #4A2C14; --th-runner: transparent; --th-runner-trim: transparent; --th-placemat: #D2A96E; --th-plate: #CDC8BA; --th-plate-inner: #B6AF9C; --th-plate-stroke: #6B5A40; --th-chair: #9C6C40; --th-chair-dark: #6A421F; --th-accent: #D8A85A; --th-accent-strong: #F2C97D; --th-accent-soft: rgba(216, 168, 90, 0.18); --th-text: #F3E4C7; --th-text-muted: #C9B58D; --th-clue-bg: rgba(255, 255, 255, 0.05); --th-clue-border: rgba(216, 168, 90, 0.40); --th-violation: #DD5651; --th-violation-soft: rgba(221, 86, 81, 0.22); --th-success: #7AC783; --th-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); --th-font-display: 'Rye', 'Cambria', Georgia, serif; --th-font-body: 'Cambria', 'Georgia', serif; --th-centerpiece: "🥃"; } /* ---------- Picnic ---------- */ [data-theme="picnic"] { --th-bg: #6FB04F; --th-bg-deep: #4D8A32; --th-bg-tile: #65A846; --th-panel: #4D8A32; --th-panel-border: #3F772A; --th-table: #FFFFFF; --th-table-edge: #C9292A; --th-table-stroke: #B8292A; --th-runner: transparent; --th-runner-trim: transparent; --th-placemat: #E6C98A; --th-plate: #FFFFFF; --th-plate-inner: #F1F1F1; --th-plate-stroke: #C9292A; --th-chair: #C9A96A; --th-chair-dark: #8B713E; --th-accent: #C9292A; --th-accent-strong: #FFD24A; --th-accent-soft: rgba(201, 41, 42, 0.14); --th-text: #FAF6EE; --th-text-muted: #DCE8C8; --th-clue-bg: rgba(255, 255, 255, 0.92); --th-clue-border: rgba(201, 41, 42, 0.55); --th-violation: #C9292A; --th-violation-soft: rgba(201, 41, 42, 0.18); --th-success: #2F8F47; --th-shadow: 0 6px 18px rgba(35, 70, 25, 0.45); --th-font-display: 'Pacifico', 'Comic Sans MS', 'Segoe UI', sans-serif; --th-font-body: 'Segoe UI', system-ui, sans-serif; --th-centerpiece: "🌻"; } /* ============================================================ Theme-driven scenery layers (pure CSS, no images required). The .scene element sits behind the table and drives the per-theme floor pattern via repeating gradients. ============================================================ */ .scene { position: absolute; inset: 0; z-index: 0; background: var(--th-bg); pointer-events: none; overflow: hidden; } [data-theme="fine-dining"] .scene { background: radial-gradient(circle at 50% 50%, var(--th-bg-tile) 0%, var(--th-bg-deep) 70%), repeating-linear-gradient(45deg, transparent 0 20px, rgba(201, 169, 92, 0.08) 20px 21px); } [data-theme="medieval-castle"] .scene { background: var(--th-bg), repeating-conic-gradient( from 0deg at 50% 50%, var(--th-bg-tile) 0deg 90deg, var(--th-bg-deep) 90deg 180deg ); background-size: cover, 80px 80px; } [data-theme="persian-palace"] .scene { background: radial-gradient(circle at 50% 50%, rgba(201,169,92,0.15) 0 6%, transparent 40%), repeating-conic-gradient( var(--th-bg-deep) 0 22.5deg, var(--th-bg-tile) 22.5deg 45deg ); } [data-theme="western-saloon"] .scene { background: repeating-linear-gradient( 90deg, var(--th-bg-deep) 0 56px, var(--th-bg-tile) 56px 60px ), repeating-linear-gradient( 0deg, transparent 0 110px, rgba(0, 0, 0, 0.18) 110px 112px ); } [data-theme="picnic"] .scene { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.07) 0 4%, transparent 5%), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.07) 0 4%, transparent 5%), repeating-linear-gradient( 45deg, var(--th-bg-deep) 0 14px, var(--th-bg-tile) 14px 28px ); }