/* ════════════════════════════════════════════ GameVault Dashboard — Global Styles ════════════════════════════════════════════ These styles affect things outside Lit shadow DOMs: , the page background, and any global typography. Component-specific styles live inside each Lit component's static styles. ════════════════════════════════════════════ */ /* ── Page reset ── */ html, body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: #ededed; color: #1a2b42; min-height: 100vh; } /* ── Custom scrollbar ── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.5); } /* ── Headings ── */ h1, h2, h3, h4 { font-family: 'Rajdhani', 'Inter', sans-serif; margin: 0; } h1 { font-size: 32px; font-weight: 700; color: #1a2b42; margin: 20px 0; } /* ── Links ── */ a { color: #7c3aed; text-decoration: none; } a:hover { text-decoration: underline; } /* ── Page-level layout helpers ── */ .center { text-align: center; } /* ── Animations available globally ── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ── Shared loader spinner (for any non-shadow contexts) ── */ .loader { display: inline-block; width: 18px; height: 18px; border: 2px solid #7c3aed; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } /* NOTE: Lit components (game-search, mood-widget, higher-lower etc.) use Shadow DOM, which means CSS in this file does NOT bleed into their internal markup. To style them, edit their static styles block inside their JS file. */