/* --------------------------------------------------------- FUENTES — auto-alojadas, no desde Google Fonts. Servirlas desde el mismo origen ahorra una resolucion DNS y un handshake TLS a otro dominio, que en una conexion movil pesa mas que los propios 67 KB de fuente. Inter va como fuente VARIABLE: un solo archivo cubre el 400 y el 600, asi que son dos peticiones en total en vez de tres. font-display:swap es deliberado: el texto se pinta desde el primer frame con la fuente del sistema y cambia cuando llega la buena. La alternativa (block) deja huecos en blanco, y en un casino eso parece que la pagina esta rota. unicode-range latino: si algun dia entra texto cirilico o griego, el navegador simplemente no descarga estos archivos en vez de intentar dibujarlo mal. --------------------------------------------------------- */ @font-face{ font-family:'Anton'; src:url('assets/fonts/anton-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter'; src:url('assets/fonts/inter-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ========================================================= BFF — SISTEMA DE DISEÑO Fuente única de verdad del color, la tipografía, la forma y el ritmo. Se carga ANTES que styles/royale/platform para que todo lo demás herede de aquí. POR QUÉ ESTE ARCHIVO EXISTE, Y POR QUÉ ES UN MAPEO El proyecto ya tenía ~55 variables usadas 989 veces. Reescribir 1393 reglas para cambiarles el nombre habría sido un riesgo enorme a cambio de nada: los nombres viejos son perfectamente descriptivos. Así que los tokens NUEVOS son la verdad, y los viejos quedan como ALIAS que apuntan a ellos. Resultado: cambiar un valor aquí recolorea el casino entero, y ninguna regla existente se rompe por el camino. REGLA DE USO — no es decorativa, es lo que da coherencia: DORADO = acción y premio. Botones principales, saldo, jackpot, ganancias, multiplicadores cobrados. MORADO = identidad y estructura. Bordes activos, badges, acentos, fondos de tarjeta, estados de selección. Si algo no es ni acción ni identidad, es neutro. No se mezclan al azar: en cuanto el morado empieza a marcar acciones, el dorado deja de significar "esto te da dinero". ========================================================= */ :root{ /* ---------- FONDOS ---------- Casi negro con tinte morado, no gris. Es lo que permite que el morado eléctrico y el dorado convivan sin que ninguno parezca pegado encima. */ --bg-deep: #07050B; /* fondo general: negro profundo */ --bg-surface: #0A0710; /* paneles y tarjetas */ --bg-elevated: #0D0913; /* hover, cabeceras, pestañas activas */ --bg-input: #120C1A; /* campos y montos de apuesta */ /* Bordes MUY sutiles: en la referencia casi no se ven, solo separan. Un borde que se nota convierte una tarjeta premium en una caja. */ --border: #1E1428; --border-soft2:#150E1D; /* ---------- MARCA: el morado es ACENTO, no fondo ---------- */ --purple: #A82CFF; --purple-glow: #C52DFF; --purple-deep: #7B20C8; /* ---------- ACCIÓN Y PREMIO ---------- */ --gold: #F5C54E; --gold-deep: #D99516; --gold-light2: #FFD978; /* ---------- TEXTO ---------- */ --text-primary:#FFFFFF; --text-muted: #D9D0E0; --text-dim: #8F839A; /* ---------- RESULTADO ---------- */ --win: #22c55e; --danger: #ef4444; /* ======================================================= ALIAS DE COMPATIBILIDAD Cada nombre antiguo apunta al token nuevo que le corresponde. Esto es lo que recolorea las 989 llamadas a var() que ya existen sin tocar una sola regla. ======================================================= */ /* fondos */ --bg-0: var(--bg-deep); --bg-1: var(--bg-surface); --bg-2: var(--bg-surface); --bg-3: var(--bg-elevated); --bg-card: var(--bg-surface); --surface: var(--bg-surface); --surface-2: var(--bg-elevated); /* hairlines */ --border-soft: var(--border-soft2); --border-gold: rgba(245,197,78,0.24); /* texto: el tono medio se aclara porque sobre morado oscuro el gris cálido anterior perdía contraste */ --text-0: var(--text-primary); --text-1: var(--text-muted); --text-2: var(--text-dim); /* dorado */ --gold-light: var(--gold-light2); --gold-glow: rgba(245,197,78,0.28); /* Tres paradas, no dos: con dos el degradado lee como plástico. La cuarta parada clara al final es el reflejo del canto. */ --gold-metal: linear-gradient(135deg, var(--gold-light2) 0%, var(--gold) 45%, var(--gold-deep) 100%); /* morado */ --purple-2: var(--purple-deep); --purple-light:var(--purple-glow); --purple-glow-a: rgba(168,44,255,0.30); /* metal secundario */ --silver: var(--text-dim); --silver-light:#c9c0d8; /* semántica de resultado, con sus variantes */ --emerald: var(--win); --emerald-light:#4ade80; --emerald-glow:rgba(34,197,94,0.24); --green: var(--win); --green-dim: #16a34a; --green-glow: rgba(34,197,94,0.24); --red: var(--danger); --wine: var(--danger); --wine-light: #f87171; --wine-glow: rgba(239,68,68,0.28); /* ======================================================= TIPOGRAFÍA Dos familias, ni una más. Anton para lo que tiene que gritar (jackpot, multiplicadores, nombres de juego) e Inter para todo lo que hay que leer. ======================================================= */ --font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ======================================================= FORMA ======================================================= */ --r-ctl: 6px; /* inputs y botones */ --r-card: 12px; /* tarjetas */ --r-panel:16px; /* banners y modales */ --radius: var(--r-card); --radius-sm: var(--r-ctl); /* ======================================================= RITMO — múltiplos de 4 ======================================================= */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 36px; --sp-6: 56px; /* ======================================================= MOVIMIENTO 150ms ease-out, y SOLO sobre transform y opacity. Cualquier otra propiedad en una transición cuesta layout o pintado, y eso es exactamente lo que acabamos de quitar del proyecto. ======================================================= */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 150ms; --t-mid: 200ms; --t-slow: 260ms; /* ======================================================= ELEVACIÓN UNA sombra por elemento, como máximo. Los "glows" se hacen con borde de color más una sombra pequeña — nunca con un blur grande, y jamás animado en bucle: eso es justo lo que hacía que el lobby fuese a tirones. ======================================================= */ --shadow-card: 0 10px 30px -14px rgba(0,0,0,0.95); --shadow-panel: 0 20px 50px -24px rgba(0,0,0,0.98); /* "Glow sutil, NO exceso de efectos": el resplandor es un borde de color mas una sombra corta y de poca opacidad. Nada de blur grande, y nunca animado en bucle. */ --glow-purple: 0 0 0 1px var(--purple), 0 10px 28px -14px rgba(168,44,255,0.55); --glow-gold: 0 0 0 1px var(--gold), 0 10px 28px -14px rgba(245,197,78,0.45); } /* Todo número que cambie delante del jugador —saldo, multiplicador, jackpot— con cifras de ancho fijo. Sin esto el importe "baila" horizontalmente en cada tick y parece un fallo de la interfaz. */ .jackpot-amount, .balance-amount, [data-balance-display], .multiplier-tag, .crash-multiplier, .dice-readout, .rl-res-mult, .mn-mult, .cr-tag, .pm-mult, .pk-mult, .rp-mult, .lb-amount, .feed-amt, output, .tabular{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================= APLICACION DE LA TIPOGRAFIA Anton solo donde tiene que gritar. Es una condensada de un solo peso: usarla para texto corrido seria ilegible. ========================================================= */ body{ font-family:var(--font-ui); } h1, h2, h3, .jackpot-amount, .hero h2, .gc-name, .gh-name, .crash-multiplier, .rl-res-mult, .dice-modal-title h2, .section-title, .lb-title, .brand-name{ font-family:var(--font-display); font-weight:400; /* Anton solo tiene un peso; pedir 700 lo falsea */ letter-spacing:0.01em; /* condensada muy apretada: respira un poco */ }