/* ========================================================== Design Tokens — CSS custom properties (mirrors theme.js) Cocoa Arcade theme: warm-plum surfaces, palette-derived accents, flat surfaces (no shadows/bevels/glows). ========================================================== */ :root { /* * Color tokens * * Tokens that can appear inside rgba() (for translucent variants) * are defined as -rgb comma tuples and the solid form is derived * via rgb(var(--X-rgb)). Edit the -rgb tuple and both solid and * translucent uses update. */ /* Backgrounds — warm plum-dark */ --bg-primary-rgb: 30, 26, 43; /* #1E1A2B */ --bg-primary: rgb(var(--bg-primary-rgb)); --bg-board: #15121F; /* deeper plum for the game board behind the canvas */ --bg-secondary: #181421; --bg-card-rgb: 42, 37, 64; /* #2A2540 */ --bg-card: rgb(var(--bg-card-rgb)); --bg-card-soft: #342E4D; --bg-glass: rgba(255, 248, 236, 0.06); /* Accents — drawn from the party palette */ --accent-primary-rgb: 255, 107, 107; /* Slot 1 Red */ --accent-primary: rgb(var(--accent-primary-rgb)); --accent-primary-dark: #E55A5A; --accent-secondary-rgb: 255, 140, 66; /* Slot 8 Tangerine */ --accent-secondary: rgb(var(--accent-secondary-rgb)); --accent-secondary-dark: #E67A33; /* Text — warm cream */ --text-primary: #F7F1E8; --text-secondary: rgba(247, 241, 232, 0.65); --text-faint: rgba(247, 241, 232, 0.4); /* Semantic */ --danger: #ff4444; --border: rgba(255, 248, 236, 0.08); --border-strong: rgba(255, 248, 236, 0.16); /* Medal — results-row fallback when color-mix() is unsupported */ --medal-silver: rgb(192, 192, 192); /* Button text — Cocoa plum-dark. Every PARTY_PALETTE slot is bright enough that dark text out-contrasts white (and passes WCAG AA on most slots), so the host-tinted CTAs reuse this value regardless of which player is host. */ --btn-primary-text: #1E1A2B; /* Ping indicators */ --ping-good: #7BED6F; /* mint */ --ping-ok: #FFE066; /* honey */ --ping-bad: #e74856; /* Overlay */ --overlay-bg: rgba(var(--bg-primary-rgb), 0.88); /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.32); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px; } /* ========================================================== Shared Button Classes ========================================================== */ .btn { border: none; border-radius: var(--radius-md); font-family: 'Orbitron', sans-serif; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: transform var(--transition-fast), filter var(--transition-fast); } .btn-primary { background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-primary-dark) 100%); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); } /* Brighten on hover — applies to the default red gradient and to all host-tinted .btn-primary variants (via ID rules below) without needing per-color hover rules. Matches the subtle lift of .btn-secondary:hover. */ .btn-primary:hover:not(:disabled) { filter: brightness(1.1); } .btn-primary:active { transform: translateY(1px); box-shadow: none; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Player-tinted CTAs — match the lobby host (display) or the local player (controller) so the primary action visually ties to their identity color. --player-color is set on by JS; when unset, these fall back to --accent-primary (Red). Text always uses --btn-primary-text (Cocoa plum) since every PARTY_PALETTE slot reads better with dark text. The color-mix(in srgb, 82%, black) darkening mirrors the shape of --accent-primary → --accent-primary-dark. */ #start-btn:not(:disabled), #pause-continue-btn, #play-again-btn, #reconnect-btn, #reconnect-rejoin-btn, #settings-close { /* Two-declaration fallback: pre-color-mix browsers use the solid host color; modern engines use the gradient. Same pattern as #touch-pad in controller.css. */ background: var(--player-color, var(--accent-primary)); background: linear-gradient( 180deg, var(--player-color, var(--accent-primary)) 0%, color-mix(in srgb, var(--player-color, var(--accent-primary)) 82%, black) 100% ); color: var(--btn-primary-text); } .btn-secondary { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-primary); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: var(--bg-card-soft); } .btn-secondary:active { transform: translateY(1px); box-shadow: none; } .btn-ghost { background: transparent; color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } .btn-ghost:hover { background: var(--bg-card-soft); color: var(--text-primary); } .btn-ghost:active { background: var(--bg-card); } /* Focus-visible ring — accessibility, matches palette secondary */ .btn:focus-visible, .icon-btn:focus-visible, .input:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; } /* ========================================================== Shared Component Classes ========================================================== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-card-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); } .pill--accent { background: rgba(var(--accent-primary-rgb), 0.18); border-color: rgba(var(--accent-primary-rgb), 0.35); color: var(--accent-primary); } .input { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 14px 18px; font-size: 16px; color: var(--text-primary); font-family: 'Orbitron', sans-serif; font-weight: 500; outline: none; width: 100%; transition: border-color var(--transition-fast); } .input:focus { border-color: var(--accent-secondary); } .input::placeholder { color: var(--text-faint); } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px 32px; max-width: 320px; } .icon-btn { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); transition: background var(--transition-fast), transform var(--transition-fast); } .icon-btn:hover:not(:disabled) { background: var(--bg-card-soft); } .icon-btn:active { transform: translateY(1px); box-shadow: none; } .player-card { display: flex; align-items: center; border-radius: var(--radius-md); background: var(--bg-card); border: 2px solid var(--player-color, var(--border-strong)); font-family: 'Orbitron', sans-serif; font-weight: 600; letter-spacing: 0.05em; color: var(--player-color, var(--text-primary)); } /* Stop the body-level --player-color (set by applyHostTint for CTA tints) from cascading into empty slots — otherwise their fallback branch would pick up the host's color via inheritance. .empty overrides border/color explicitly today so there's no visible bug, but this keeps the reset defensive against future rules that read --player-color on empty cards. */ .player-card.empty { --player-color: initial; } /* HEX STACKER wordmark — full 8-stop sweep across the party palette in PLAYER_COLORS spectrum order (red → tangerine → honey → mint → teal → indigo → violet → magenta). Mirrored by titleGradient() in artwork/builder.html for canvas-rendered PNGs. */ .gradient-title { font-family: 'Orbitron', sans-serif; font-weight: 900; letter-spacing: 0.08em; background: linear-gradient(135deg, #FF6B6B, #FF8C42, #FFE066, #7BED6F, #4ECDC4, #5B7FFF, #A78BFA, #F178D8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; /* Firefox: supports background-clip:text but not -webkit-text-fill-color */ } .gradient-title__sub { display: block; font-size: 0.42em; font-weight: 600; letter-spacing: 0.35em; margin-top: 0.25em; text-transform: uppercase; /* Opt out of the parent's background-clip:text trick so the subtitle renders. Color matches the social-preview PARTY subtitle (artwork/builder.html). */ -webkit-text-fill-color: currentColor; color: #fff3c2; } .pause-icon { display: flex; gap: 3px; } .pause-icon::before, .pause-icon::after { content: ''; width: 4px; height: 18px; background: var(--text-primary); border-radius: 1.5px; } /* ========================================================== Shared Keyframes ========================================================== */ @keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Game overlays (pause, reconnect) — shared between display and controller. Safe-area padding mirrors .controller-shell so overlay CTAs keep the same edge breathing room as lobby/name screens on narrow viewports. */ .game-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: max(env(safe-area-inset-top), 8px) max(env(safe-area-inset-right), 12px) calc(env(safe-area-inset-bottom) + 16px) max(env(safe-area-inset-left), 12px); background: var(--overlay-bg); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn 0.3s ease both; } .game-overlay.hidden { display: none !important; } .game-overlay h1 { font-family: 'Orbitron', sans-serif; font-size: clamp(1.3rem, 6vw, 1.8rem); font-weight: 900; letter-spacing: 0.15em; color: var(--text-primary); } .game-overlay__status { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; }