/* ===================================================== Game Engine 2.0 — Game-Specific Themes Theme overrides applied via data-theme attribute on ===================================================== */ /* ---------- Default Theme (Generic) ---------- */ /* Uses :root variables from main.css — no overrides needed */ /* ---------- Cards Against Humanity Theme ---------- */ [data-theme="cah"] { /* Dark, edgy palette — black/white with red accents */ --color-primary: #1a1a1a; --color-primary-dark: #000000; --color-primary-gradient: linear-gradient(135deg, #2d2d2d 0%, #0a0a0a 100%); --color-accent: #e74c3c; --color-accent-dark: #c0392b; --color-card-bg: #ffffff; --color-card-text: #1a1a1a; --color-card-border: #e0e0e0; --color-table-bg: rgba(0, 0, 0, 0.15); --color-drop-zone-bg: rgba(231, 76, 60, 0.1); --color-drop-zone-border: #e74c3c; } [data-theme="cah"] body { background: var(--color-primary-gradient); } [data-theme="cah"] .navbar { background: rgba(0, 0, 0, 0.3); } [data-theme="cah"] .section { background: #1e1e1e; color: #e0e0e0; border: 1px solid #333; } [data-theme="cah"] .section h2, [data-theme="cah"] .section h3 { color: #ffffff; } [data-theme="cah"] .card { background: var(--color-card-bg); color: var(--color-card-text); border: 2px solid var(--color-card-border); border-radius: var(--radius-base); } [data-theme="cah"] .btn-primary { background: var(--color-accent); color: #fff; } [data-theme="cah"] .phase-banner { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); } /* ---------- Exploding Kittens Theme ---------- */ [data-theme="exploding_kittens"] { /* Playful, colorful palette — pinks, purples, oranges */ --color-primary: #ff6b9d; --color-primary-dark: #c44569; --color-primary-gradient: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #f8b500 100%); --color-accent: #f8b500; --color-accent-dark: #e17055; --color-card-bg: #fff5f7; --color-card-text: #2d3436; --color-card-border: #ffb8d0; --color-table-bg: rgba(255, 107, 157, 0.1); --color-drop-zone-bg: rgba(248, 181, 0, 0.1); --color-drop-zone-border: #f8b500; } [data-theme="exploding_kittens"] body { background: var(--color-primary-gradient); } [data-theme="exploding_kittens"] .navbar { background: rgba(255, 255, 255, 0.15); } [data-theme="exploding_kittens"] .section { background: #fff5f7; border: 2px solid #ffb8d0; } [data-theme="exploding_kittens"] .card { background: var(--color-card-bg); color: var(--color-card-text); border: 2px solid var(--color-card-border); border-radius: var(--radius-lg); box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2); } [data-theme="exploding_kittens"] .btn-primary { background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%); color: #fff; } [data-theme="exploding_kittens"] .phase-banner { background: linear-gradient(135deg, #ff6b9d 0%, #f8b500 100%); } /* ---------- Gin Rummy Theme ---------- */ [data-theme="gin_rummy"] { /* Classic, elegant palette — green felt, gold accents */ --color-primary: #27ae60; --color-primary-dark: #1e8449; --color-primary-gradient: linear-gradient(135deg, #27ae60 0%, #1e8449 100%); --color-accent: #f1c40f; --color-accent-dark: #d4ac0d; --color-card-bg: #ffffff; --color-card-text: #2d3436; --color-card-border: #bdc3c7; --color-table-bg: rgba(39, 174, 96, 0.15); --color-drop-zone-bg: rgba(241, 196, 15, 0.1); --color-drop-zone-border: #f1c40f; } [data-theme="gin_rummy"] body { background: var(--color-primary-gradient); } [data-theme="gin_rummy"] .navbar { background: rgba(0, 0, 0, 0.2); } [data-theme="gin_rummy"] .section { background: #f0f7f4; border: 2px solid #a9dfbf; } [data-theme="gin_rummy"] .card { background: var(--color-card-bg); color: var(--color-card-text); border: 2px solid var(--color-card-border); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(39, 174, 96, 0.15); } [data-theme="gin_rummy"] .btn-primary { background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%); color: #fff; } [data-theme="gin_rummy"] .phase-banner { background: linear-gradient(135deg, #27ae60 0%, #f1c40f 100%); } /* ---------- Theme Transition ---------- */ body { transition: background var(--transition-slow) ease; } .navbar, .section, .card, .btn-primary { transition: background var(--transition-slow) ease, border-color var(--transition-slow) ease, color var(--transition-slow) ease; }