UI del Juego
/galilei-brand Un sistema, dos densidades
El juego usa los mismos tokens que todo el sistema, pero a otra escala. La herramienta administrativa es densa y precisa; el juego es táctil y dramático. Nunca mezcles las dos capas en una misma vista.
Escala táctil
Las acciones del juego miden 55px de alto con texto de 24px (la capa Admin usa 40px y 16px). Dedos, no cursores.
Urgencia semaforizada
El tiempo habla con las familias feedback completas: success al inicio, warning al medio, error al final. Fondo dark, texto light, acentos vivid.
Iconografía glow
Los recursos del juego usan íconos 3D y glow con ring tintado, nunca los Phosphor flat de la capa Admin. El ícono ES el premio.
Escenario, no pantalla
Los momentos clave (pop-ups, misiones, timers finales) toman toda la escena con washes de mood y fondos del Galiverso. El juego se vive, no se consulta.
Respuestas de misión
La opción de trivia es el botón más usado del juego: full-width, 55px, texto SG Medium 24. Default es outline sobre el escenario; la elegida o correcta se llena de lima. Radius lg (16), no pill.
Specs alto 55px · borde default 1px --neutral-05 · texto SG 500 · 24px · --white · correcta --g-brand con texto --n01 · radius --radius-lg. Clase: .gm-answer + .is-correct.
Timers y urgencia
El tiempo del juego se semaforiza con las tres familias feedback. La barra vive en la vista de misión; cuando quedan segundos, el timer toma la pantalla completa con wash de mood al 90%.
Takeover de últimos segundos
Specs del takeover wash --error-dark-a90 sobre la escena · número RCB Bold 128 · --error-light · órbitas concéntricas 2px --error-vivid con dots flotantes. La misma receta aplica en success para celebrar (confetti de dots lima).
Recursos y contadores
GaliPiezas, GaliTickets, cofres, rachas: cada recurso tiene su molécula. El ring del counter toma el color de la familia del recurso al 30%; la cantidad vive en badge n02.
x2.gm-counter 
x5
GaliPiece Pill de recurso · .gm-pill .gm-scarcity Progreso
Moléculas documentadas en Figma sin recreación CSS streak con llama (contador de racha), conversor A→B (canje de recursos), puzzle counter (piezas 4/4 en lima), tab-bar y top-bar de la app. Specs en el Galiverso · Foundations · Moléculas.
Booster cards
Un boost es un potenciador temporal que multiplica o mejora una mecánica mientras corre. La card muestra el ícono glow del boost, su efecto y su cuenta regresiva. Seis tipos canónicos.
x2Más cofres
Gana el doble mientras corre
x2GaliTickets
Doble ticket por misión
Los 6 tipos canónicos Mejores Cofres · GaliTickets · Menor Penalidad · Más Cofres · Más Misiones · GaliPiezas. Cada tipo usa su ícono glow con el ring de su familia. Clase: .gm-booster.
Pop-ups y momentos
Los momentos del juego (cofre, misión nueva, lotería, boost activado) no usan el modal de la capa Admin: toman la escena con fondo del Galiverso, título RCB Bold 36 y un solo CTA primary.
| Momento | Anatomía | CTA |
|---|---|---|
| Pop Up · Chest | Fondo gradiente de escenario · ícono 3D del cofre a 334px · título RCB 700 · 36 · lh 100% · sub SG 500 · 15 · --text-secondary | Open chest · primary |
| Pop Up · Mission | Título + "Select your boosters" · grid de counters lg (75px) con rings por familia · close ícono blanco arriba-derecha | Collect reward · primary |
| Booster Modal | Escenario full-bleed + panel inferior · título del boost + efecto + requisitos | Activar · primary |
| Raffle Modal | Premio hero + chances "(15) chances to WIN" + requisitos en lista | Participar · primary |
Siempre y nunca
Las fronteras entre la capa Game y la capa Admin son duras. Si dudas en cuál estás, pregunta quién mira la pantalla: si es un jugador, es Game.
- 01
Acciones de 55px con texto 24
La escala táctil es la firma de la capa. Nada de botones admin en el juego.
- 02
Urgencia con las familias feedback
Success → warning → error. Fondo dark, texto light, acentos vivid. Siempre las tres fases.
- 03
Íconos glow y 3D para recursos
El premio se ve valioso. Ring tintado de la familia del recurso al 30%.
- 01
Componentes admin en el juego
Ni data tables, ni dropdowns, ni formularios compactos dentro de una misión.
- 02
Rojo sin las otras dos fases
Si el timer solo existe en error, es alarma, no juego. La urgencia se gana gradualmente.
- 03
Íconos Phosphor flat como premio
Los flat son para UI utilitaria (admin, portal). Un recurso plano no motiva a nadie.