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; al fallar, el countdown de error toma la pantalla completa durante 5 segundos con wash error al 90%.
Countdown de error · overlay 5 s
Cuándo. El jugador falla la respuesta → el overlay toma la pantalla completa y cuenta 5 → 1, un número por segundo, antes de devolver el control. Cinco segundos fijos: suficiente para respirar, no tanto como para castigar (canon Figma Timer/N, 2026-07-03).
Anatomía. Es la familia error completa en una sola pantalla: wash --error-dark al 90% (el juego se intuye detrás) · número RCB Bold 128 · --error-light · universo orbital en --error-vivid: 3 anillos concéntricos al 18% (85 / 156 / 236% del ancho) con dots llenos orbitando.
Clases. .gm-timer-overlay + .gm-orbit-field (anillos y dots, orbitan lento solo con transform) + .gm-timer-overlay-num. La misma receta en success celebra (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 |
Las dos plantillas madre
Casi toda pantalla del juego es una de estas dos. Documentarlas evita que cada flujo reinvente el layout.
| Plantilla | Anatomía (de arriba a abajo) | Se usa en |
|---|---|---|
| Result / Celebración | Takeover dark sin top-bar ni tab-bar · título display two-tone centrado (blanco + keyword en el color del resultado: lima éxito, coral pérdida, cian tickets) · héroe central (objeto 3D, Gali o ícono glow, con partículas del recurso desenfocadas de fondo y badge xN) · payload (stats con glow, contador, mensaje) · CTA pill blanco o lima | Recompensas de cofre, misión completada, objetivo fallido, racha recuperada/perdida, requisito de lotería |
| Detalle de premio | Foto full-bleed arriba (top-bar + back circular flotando) · sheet oscura radius 24 que sube: título + puzzle counter a la derecha · urgencia coral inline · "(N) Repeated GaliPieces" · descripción con highlights · CTA lima "Redeem" con ícono regalo · tab-bar | Catálogo de recompensas, detalle de lotería, canje de GaliPiezas |
Escenografía orbital los anillos concéntricos con dots y satélites (piezas, tickets, rayos) son EL motivo de anticipación: dots blancos en contexto neutro (cofre esperando), coral en countdown/alerta. La card de catálogo es foto full-bleed + overlay + título (borde cian 2px solo como estado seleccionado en selectores de módulo).
Requisitos y transacciones
El progreso hacia una lotería o canje se muestra en filas de requisito; los términos de una transacción (costo/objetivo) usan la misma fila en modo paramétrico.
Rachas y ligas
Dos sistemas de progresión con lenguaje propio, extraídos de las pantallas pero PENDIENTES de spec fina en Figma.
Llama activa · llama rota · calendario
La llama coral con contador marca la racha viva. La llama rota (grieta + glow rojizo) es el estado de racha perdida y abre el flujo Recover Streak (Decision Stack: pagar e intentar vs perder). El calendario semanal Lu-Do muestra: llama coral = cumplido, llama gris = fallado, círculo vacío = pendiente, pill blanca = hoy.
Bronce · Plata · Oro
Barra de métrica con carets de umbral y pills de liga (activa con emblema 3D). Decisión Mari 2026-07-01: los tokens de liga (teal de Plata, dorado de Oro) se definen PRIMERO como molécula en Figma; mientras tanto la liga activa usa la familia info. El teal y el dorado de las pantallas actuales son deuda hasta entonces.
Highlight semántico inline la regla tipográfica transversal del juego: dentro de títulos y mensajes, la keyword se colorea por significado: lima = premio/positivo · coral = pérdida/urgencia · cian = GaliTickets. Clases: .hl-reward / .hl-risk / .hl-ticket.
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.
- 04
Gradiente amarillo→cian en progress
Es legacy (Mari 2026-07-01). Todo progress del juego va en lima plano sobre track n03 (el meter).
- 05
Naranja como acento
No tiene rol. Donde aparezca, se reemplaza por el token más cercano: la familia alert (--alert-vivid).
Lista de opciones
Filas navegables con ícono + título + subtítulo + chevron. El caso que la originó: un centro de ayuda siempre a la mano que destraba la claridad del juego (cada fila es una duda real, y al tocarla abre el paso a paso). El mismo patrón sirve para tienda de canje, boosters o cualquier menú de selección. Clases: .opt-list > .opt-row.
Preguntas frecuentes
Anatomía card .opt-list (n01, radius xl, borde white-a05) · head con título display + .opt-list-close · filas .opt-row (ícono 44px + body título/subtítulo + chevron), separadas por hairline. La fila .is-active o hover = well. En el juego el ícono es glow/3D (cada color carga significado: un recurso, un tema); nunca arcoíris decorativo. En admin sería flat.