/* * Design tokens — shared color system for all game templates. * * Each game applies a theme via data-theme="..." on . * All game CSS should reference these custom properties instead of * hardcoding hex values. */ /* Display face — warm inked serif for headings / titles. Paired with Inter (the body face, imported per-template). */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap'); :root { /* Base dark green theme (soccer, sportsbar default) */ --bg-primary: #0a0e0a; --bg-surface: #0e120e; --bg-input: #141a14; --bg-header-from: #141a14; --bg-header-to: #0e130e; --border: #1a2a1a; --border-light: #2a3a2a; --text: #b0b8b0; --text-body: #c0c8c0; --text-muted: #556; --text-dim: #334; --accent: #5a5; --accent-hover: #6c6; --accent-secondary: #5a5; --scrollbar: #1a2a1a; /* Neutrals — gray scale (non-theme, used everywhere) */ --gray-muted: #99a; /* muted UI text */ --gray-faint: #778; /* faint label / chat body */ --gray-dimmer: #889; /* mid-dim label */ /* Gold family — brand accent used in headers, popups, active states */ --gold: #d4a843; --gold-bright: #ffdd88; --gold-dim: #a09880; --gold-pale: #c0b090; --gold-rim: #3a3020; --gold-surface: #2a2418; --gold-deep-bg: #1a1810; /* Links */ --link-blue: #4a8adf; /* Brand tagline ("Beta · Season 0 · The Foundation") */ --brand-tagline: #5a6658; --brand-tagline-bright: #7a8278; /* Typography */ --font-body: 'Inter', sans-serif; --font-display: 'Cormorant Garamond', 'EB Garamond', 'Iowan Old Style', serif; /* Chat colors (derived from theme) */ --chat-bg: var(--bg-surface); --chat-border: var(--border); --chat-msg: #778; --chat-msg-bold: #9a9; --chat-input-bg: var(--bg-input); --chat-input-border: var(--border-light); --chat-btn-bg: #1a2a1a; --chat-btn-color: var(--accent); --chat-btn-border: var(--border-light); /* Player setup */ --setup-text: #667; --setup-input-bg: var(--bg-input); --setup-input-border: var(--border-light); --setup-btn-bg: #1a3a1a; --setup-btn-color: var(--accent); --setup-btn-border: #2a5a2a; /* Header */ --header-title: var(--accent); } /* ── Hearts (red) ── */ [data-theme="hearts"] { --bg-primary: #0a0808; --bg-surface: #0e0c0c; --bg-input: #141010; --bg-header-from: #1a1214; --bg-header-to: #120e10; --border: #2a1a1a; --border-light: #3a2a2a; --text: #c0b8b0; --text-body: #c0b8b0; --text-muted: #554; --text-dim: #334; --accent: #cc4444; --accent-hover: #dd5555; --accent-secondary: #a55; --scrollbar: #1a1414; --chat-msg: #887; --chat-msg-bold: #a99; --chat-input-bg: #141010; --chat-input-border: #2a2020; --chat-btn-bg: #1a1010; --chat-btn-color: #a55; --chat-btn-border: #2a1a1a; --setup-text: #776; --setup-input-bg: #141010; --setup-input-border: #2a2020; --setup-btn-bg: #2a1a1a; --setup-btn-color: #c66; --setup-btn-border: #4a2a2a; --header-title: #cc4444; } /* ── Hold'em (purple) ── */ [data-theme="holdem"] { --bg-primary: #0a080a; --bg-surface: #0e0a0e; --bg-input: #141014; --bg-header-from: #14101a; --bg-header-to: #0e0a12; --border: #2a1a2a; --border-light: #3a2a3a; --text: #c0b8c0; --text-body: #c0b8c0; --text-muted: #556; --text-dim: #334; --accent: #aa88cc; --accent-hover: #bb99dd; --accent-secondary: #a8a; --scrollbar: #1a141a; --chat-msg: #887; --chat-msg-bold: #a9a; --chat-input-bg: #141014; --chat-input-border: #2a202a; --chat-btn-bg: #1a101a; --chat-btn-color: #a8a; --chat-btn-border: #2a1a2a; --setup-text: #776; --setup-input-bg: #141014; --setup-input-border: #2a202a; --setup-btn-bg: #2a1a2a; --setup-btn-color: #c8c; --setup-btn-border: #4a2a4a; --header-title: #aa88cc; } /* ── Soccer (green — same as default) ── */ [data-theme="soccer"] { /* Inherits :root defaults */ } /* ── Debate (gold) ── */ [data-theme="debate"] { --bg-primary: #0a0a08; --bg-surface: #0c0c0a; --bg-input: #141410; --bg-header-from: #161410; --bg-header-to: #100e0a; --border: #2a2618; --border-light: #3a3628; --text: #c0b8a8; --text-body: #c0b8a8; --text-muted: #554; --text-dim: #334; --accent: #d4a843; --accent-hover: #e4b853; --accent-secondary: #d4a843; --scrollbar: #1a1a14; --chat-msg: #887; --chat-msg-bold: #a99; --chat-input-bg: #141410; --chat-input-border: #2a2620; --chat-btn-bg: #1a1810; --chat-btn-color: #d4a843; --chat-btn-border: #3a3020; --setup-text: #776; --setup-input-bg: #141410; --setup-input-border: #2a2620; --setup-btn-bg: #1a2a18; --setup-btn-color: #6a6; --setup-btn-border: #2a4a2a; --header-title: #d4a843; } /* ── Sports Bar (green — same as default) ── */ [data-theme="sportsbar"] { --bg-primary: #080a08; --bg-surface: #0a0e0a; --bg-input: #0e140e; --bg-header-from: #111411; --bg-header-to: #0c0e0c; --border: #1a2a1a; --border-light: #2a3a2a; --text: #b0b8b0; --text-body: #b0b8b0; --scrollbar: #1a2a1a; } /* * Logout button — small gold-rim icon-only button used in the header. * Styled to sit next to other header chrome (avatar, status dot) without * shouting. Subtle red tint on hover signals the destructive action. */ .logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; background: rgba(20,18,14,0.7); border: 1px solid var(--gold-rim); border-radius: 6px; color: var(--gold-dim); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; line-height: 1; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.12s; } .logout-btn:hover { color: #e88a7a; border-color: #6a3a30; background: rgba(40,20,16,0.75); transform: translateY(-1px); } .logout-btn:active { transform: translateY(0); } .logout-btn svg { width: 14px; height: 14px; display: block; flex-shrink: 0; } /* * Global chat-message wrapping. * * Historical bug: long messages (URLs, debate posts pasted without * spaces, code snippets) could overflow the chat panel horizontally * because the per-page `.chat-msg` rules don't declare overflow * behavior. Declaring it once here avoids five near-identical copies * in world.html / room.html / base_game.html / lobby.html / debate.html. */ .chat-msg, .chat-list .chat-msg, #chat-area .msg, .thread-msg .msg-text, .lobby-chat-msg { overflow-wrap: anywhere; word-break: break-word; }