/* ════════════════════════════════════════════════════════════════════ livegames-base.css — LiveGames Design System · SHARED foundation Inherited by EVERY game (LiveRoll, LiveCrash, future). Locks the things that must never diverge: layout, typography, spacing, card system. Each game layers its OWN personality on top via a thin theme file: • color accents (LiveRoll gold/amber · LiveCrash cyan/green/pink) • motion (LiveRoll slow/weighty · LiveCrash fast/explosive) • audio Shared DNA, different personalities — Battle.net, not WoW. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces (shared dark base) ─────────────────────────────────── */ --lg-bg: #050709; --lg-surface-0: #0a0d10; --lg-surface-1: #0e1418; --lg-surface-2: #14191e; --lg-surface-3: #181d22; /* ── Ink (shared) ────────────────────────────────────────────────── */ --lg-ink: #f0f0ec; --lg-ink-dim: rgba(240,240,236,0.55); --lg-ink-faint: rgba(240,240,236,0.32); /* ── Edges (shared) ──────────────────────────────────────────────── */ --lg-edge: rgba(255,255,255,0.06); --lg-edge-2: rgba(255,255,255,0.10); /* ── Semantic (shared) ───────────────────────────────────────────── */ --lg-win: #6dba80; --lg-loss: #e57373; /* ── Typography — ONE stack, ONE scale. NEVER change per game. ───── */ --lg-font-display: 'Barlow Condensed', system-ui, sans-serif; /* UI / display, uppercase eyebrows */ --lg-font-mono: 'JetBrains Mono', monospace; /* ALL numbers / money / metrics */ --lg-fs-label: 10px; /* eyebrow labels */ --lg-fs-meta: 12px; /* metadata */ --lg-fs-body: 14px; /* body */ --lg-fs-metric: 18px; /* metric */ --lg-fs-hero: 32px; /* hero number */ /* ── Spacing (shared) ────────────────────────────────────────────── */ --lg-sp-1: 4px; --lg-sp-2: 8px; --lg-sp-3: 12px; --lg-sp-4: 16px; --lg-sp-5: 24px; --lg-sp-6: 32px; /* ── Card system — IDENTICAL across games ────────────────────────── */ --lg-card-radius: 10px; --lg-chip-radius: 7px; --lg-card-shadow: 0 6px 18px rgba(0,0,0,0.40); --lg-elev-1: 0 2px 8px rgba(0,0,0,0.30); --lg-elev-2: 0 8px 22px rgba(0,0,0,0.55); /* ── Layout — the shell every game shares ────────────────────────── */ --lg-shell-max: 480px; /* phone shell, centered on desktop */ --lg-shell-max-desktop: 460px; --lg-topbar-h: 48px; /* logo · budget · profile */ --lg-strip-h: 46px; /* contest strip (active contests · quick switch) */ --lg-rail-h: 96px; /* bottom betting/play area */ /* ── Per-game ACCENT — each game sets --lg-game-* in its theme ───── */ --lg-accent: var(--lg-game-accent, #d4a843); /* default = LiveRoll gold */ --lg-accent-soft: var(--lg-game-accent-soft, #e8c875); --lg-accent-dim: var(--lg-game-accent-dim, rgba(212,168,67,0.18)); --lg-pulse: var(--lg-game-pulse, oklch(0.78 0.12 80)); } /* ── Shared shell skeleton (structure only — no color personality) ──── */ .lg-shell { max-width: var(--lg-shell-max); margin: 0 auto; background: var(--lg-bg); color: var(--lg-ink); min-height: 100dvh; } .lg-topbar { position: sticky; top: 0; z-index: 60; height: var(--lg-topbar-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--lg-sp-3); padding: 0 var(--lg-sp-3); border-bottom: 1px solid var(--lg-edge); background: var(--lg-surface-0); } .lg-strip { min-height: var(--lg-strip-h); border-bottom: 1px solid var(--lg-edge); background: var(--lg-surface-1); } .lg-rail { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--lg-shell-max); min-height: var(--lg-rail-h); border-top: 1px solid var(--lg-edge); background: var(--lg-surface-0); } .lg-card { background: var(--lg-surface-2); border: 1px solid var(--lg-edge); border-radius: var(--lg-card-radius); box-shadow: var(--lg-elev-1); } .lg-num { font-family: var(--lg-font-mono); font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════════════ LIVEGAMES — Shared Motion Base (flagship-pass · DH #239 · 2026-06-07) Byte-identical motion physics across LiveRoll + LiveCrash. Accent-agnostic: reads --lg-accent / --lg-accent-soft / --lg-accent-rgb. Each game feeds the accent via --lg-game-accent* (LiveRoll gold / LiveCrash teal). Ships UNFORKED. Source: livecrash/flagship-pass/v1 · MOTION_SYSTEM.md §1–2. ════════════════════════════════════════════════════════════════════ */ :root { --lg-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutCubic — no bounce */ --lg-ease-snap: cubic-bezier(0.16, 1, 0.30, 1); /* taps/flashes */ --lg-ease-fall: cubic-bezier(0.55, 0, 1, 0.45); /* terminal fall (crash) */ --lg-micro: 90ms; --lg-std: 160ms; --lg-reveal: 320ms; --lg-celebrate: 480ms; --lg-breathe: 1.4s; --lg-glow-inner-w: 1.5px; --lg-glow-outer-blur: 14px; --lg-glow-outer-alpha: 0.35; /* rgb triple feeder for the shared glow; each game sets --lg-game-accent-rgb. gold default keeps LiveRoll correct if a theme omits it. */ --lg-accent-rgb: var(--lg-game-accent-rgb, 212, 168, 67); } .lg-glow { box-shadow: 0 0 0 var(--lg-glow-inner-w) var(--lg-accent-soft), 0 0 var(--lg-glow-outer-blur) rgba(var(--lg-accent-rgb), var(--lg-glow-outer-alpha)); } .lg-glow--breathe { animation: lg-breathe var(--lg-breathe) var(--lg-ease-out) infinite; } @keyframes lg-breathe { 0%, 100% { box-shadow: 0 0 0 var(--lg-glow-inner-w) rgba(var(--lg-accent-rgb), 0.55), 0 0 calc(var(--lg-glow-outer-blur) * 0.7) rgba(var(--lg-accent-rgb), calc(var(--lg-glow-outer-alpha) * 0.7)); } 50% { box-shadow: 0 0 0 var(--lg-glow-inner-w) var(--lg-accent-soft), 0 0 calc(var(--lg-glow-outer-blur) * 1.25) rgba(var(--lg-accent-rgb), calc(var(--lg-glow-outer-alpha) * 1.15)); } } .lg-fx-press { animation: lg-press var(--lg-micro) var(--lg-ease-snap); } .lg-fx-win { animation: lg-win var(--lg-celebrate) var(--lg-ease-out); } .lg-fx-loss { animation: lg-loss var(--lg-celebrate) var(--lg-ease-fall); } .lg-fx-rankup { animation: lg-rankup var(--lg-reveal) var(--lg-ease-out); } .lg-fx-grow { animation: lg-grow var(--lg-reveal) var(--lg-ease-out); } .lg-fx-tick { animation: lg-tick 120ms var(--lg-ease-out); } @keyframes lg-press { 0% { transform: scale(1); } 45% { transform: scale(0.96); } 100% { transform: scale(1); } } @keyframes lg-win { 0% { box-shadow: 0 0 0 0 rgba(var(--lg-accent-rgb), 0.55); } 100% { box-shadow: 0 0 0 26px rgba(var(--lg-accent-rgb), 0); } } @keyframes lg-loss { 0% { transform: translateY(0); } 100% { transform: translateY(6px); } } @keyframes lg-rankup { 0% { transform: translateY(60%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes lg-grow { 0% { text-shadow: 0 0 0 rgba(var(--lg-accent-rgb), 0); } 40% { text-shadow: 0 0 12px rgba(var(--lg-accent-rgb), 0.8); } 100% { text-shadow: 0 0 0 rgba(var(--lg-accent-rgb), 0); } } @keyframes lg-tick { 0% { filter: brightness(1.9); } 100% { filter: brightness(1); } } .lg-fx-sweep { position: relative; overflow: hidden; } .lg-fx-sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(var(--lg-accent-rgb), 0.22) 50%, transparent 70%); transform: translateX(-120%); animation: lg-sweep var(--lg-celebrate) var(--lg-ease-out); pointer-events: none; } @keyframes lg-sweep { to { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .lg-glow--breathe, .lg-fx-win, .lg-fx-loss, .lg-fx-rankup, .lg-fx-grow, .lg-fx-sweep::after, .lg-fx-tick, .lg-fx-press { animation: none !important; } }