/* ========================================================================== Temi — tutte le tinte passano da qui. Il tema si cambia con . Aggiungere un tema = un nuovo blocco. ========================================================================== */ :root { color-scheme: dark; --font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif; --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --header-h: 64px; /* Aree sicure del telefono (notch, barra di stato, barra dei gesti) nell'app installata */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --header-total: calc(var(--header-h) + var(--safe-top)); --tabbar-h: 0px; --ease: cubic-bezier(.2, .8, .2, 1); /* Colori semantici fissi (uguali in tutti i temi) */ --gold: #ffd166; --gold-rgb: 255, 209, 102; --win: #3dffa2; --win-rgb: 61, 255, 162; --danger: #ff5c7a; /* Tema ciano (default) */ --bg-0: #04060a; --bg-1: #08101a; --bg-2: #0e1826; --text: #eaf7ff; --text-dim: #9db2c7; --accent: #00e5ff; --accent-rgb: 0, 229, 255; --accent-2: #2f7bff; --accent-2-rgb: 47, 123, 255; --on-accent: #00161c; /* Grafici (pagina Gestore): validati per daltonismo e contrasto sul fondo scuro */ --chart-1: #0098b3; --chart-2: #c0841a; } [data-theme="purple"] { --bg-0: #07040c; --bg-1: #100819; --bg-2: #1a0f28; --text: #f4ecff; --text-dim: #b8a7cc; --accent: #c07bff; --accent-rgb: 192, 123, 255; --accent-2: #ff3ec8; --accent-2-rgb: 255, 62, 200; --on-accent: #16021f; --chart-1: #9a50e6; --chart-2: #c0841a; } /* Token derivati: si ricalcolano da soli al cambio tema */ :root { --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .07); --border: rgba(var(--accent-rgb), .22); --border-strong: rgba(var(--accent-rgb), .6); --glow-sm: 0 0 10px rgba(var(--accent-rgb), .45); --glow: 0 0 14px rgba(var(--accent-rgb), .5), 0 0 36px rgba(var(--accent-rgb), .2); } /* ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--font-ui); line-height: 1.5; color: var(--text); background-color: var(--bg-0); background-image: radial-gradient(1100px 600px at 8% -10%, rgba(var(--accent-rgb), .14), transparent 60%), radial-gradient(900px 520px at 105% 5%, rgba(var(--accent-2-rgb), .12), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-0) 70%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } /* Griglia neon di sfondo, sfuma verso il basso */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(var(--accent-rgb), .045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 75%); } h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; } h1, h2 { font-family: var(--font-display); letter-spacing: .05em; } a { color: var(--accent); } img, svg { display: block; } [hidden] { display: none !important; } button, input, select { font: inherit; } /* Numeri: cifre a larghezza fissa, così saldo e vincite non "ballano" */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } main { max-width: 1200px; margin: 0 auto; padding: calc(var(--header-total) + 24px) max(16px, env(safe-area-inset-right)) 56px max(16px, env(safe-area-inset-left)); } main:focus { outline: none; } /* Focus visibile ovunque da tastiera */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 700; transform: translateY(-150%); } .skip-link:focus { transform: none; } .noscript { padding: 120px 16px; text-align: center; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }