* { box-sizing: border-box; }
:root { --fondo: #0f172a; --panel: #1e293b; --borde: #334155; --texto: #f8fafc; --suave: #94a3b8; --acento: #38bdf8; --ok: #4ade80; --mal: #fca5a5; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
body.oscuro { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 16px 56px; }
.tarjeta { width: 100%; max-width: 440px; text-align: center; }
h1 { font-size: 28px; margin: 0 0 20px; line-height: 1.2; }
h1.pregunta { font-size: 26px; }
p { font-size: 18px; }
input { width: 100%; font-size: 19px; padding: 15px; margin-bottom: 10px; border-radius: 12px; border: 2px solid var(--borde); background: var(--panel); color: var(--texto); outline: none; }
input:focus { border-color: var(--acento); }
button { width: 100%; margin-top: 4px; font-size: 20px; font-weight: 700; padding: 16px; border: 0; border-radius: 12px; background: var(--acento); color: var(--fondo); cursor: pointer; }
button:disabled { opacity: .55; }
button.opcion { background: var(--panel); color: var(--texto); border: 2px solid var(--borde); margin-top: 10px; text-align: left; font-weight: 600; }
button.opcion:active { border-color: var(--acento); }
.err { color: var(--mal); min-height: 24px; margin-top: 10px; }
.numero { font-size: 120px; font-weight: 800; line-height: 1; color: var(--acento); margin: 8px 0; font-variant-numeric: tabular-nums; }
.numero.chiquito { font-size: 48px; }
.nombre { font-size: 26px; font-weight: 600; }
.grande { font-size: 72px; }
.eleccion { font-size: 22px; font-weight: 700; color: var(--acento); }
.chico { color: var(--suave); font-size: 16px; }
.pie { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px; text-align: center; color: var(--suave); font-size: 15px; background: rgba(15, 23, 42, .92); }
button.google { background: #fff; color: #1f2937; }
a { color: var(--acento); }
/* Resultado: toda la pantalla verde (pasaste / ganaste) o roja (quedaste afuera) */
body.verde { background: #16a34a; transition: background .3s; }
body.rojo { background: #dc2626; transition: background .3s; }
body.verde .numero, body.rojo .numero { color: #fff; }
body.verde .chico, body.rojo .chico { color: rgba(255, 255, 255, .85); }
body.verde .pie, body.rojo .pie { background: rgba(0, 0, 0, .18); color: #fff; }
.cuenta { font-size: 160px; font-weight: 800; line-height: 1; color: var(--acento); margin: 12px 0; font-variant-numeric: tabular-nums; animation: latido 1s ease-in-out infinite; }
@keyframes latido { 0% { transform: scale(1.15); } 60% { transform: scale(1); } }
/* Premio y opciones de colores (los mismos colores que en la pantalla grande: A rojo, B azul, C naranja, D verde) */
.premio { font-size: 18px; font-weight: 700; color: #fde68a; margin: 0 0 8px; }
.op0 { background: #e11d48 !important; } .op1 { background: #2563eb !important; } .op2 { background: #d97706 !important; }
.op3 { background: #16a34a !important; } .op4 { background: #7c3aed !important; } .op5 { background: #0891b2 !important; }
.opciones { display: grid; gap: 10px; }
button.opcion { display: flex; align-items: center; gap: 12px; color: #fff; border: 0; min-height: 68px; font-size: 20px; margin: 0; text-align: left; }
button.opcion .letra { font-weight: 900; background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 2px 10px; }
button.opcion:active { transform: scale(.98); }
.reloj-preg { display: inline-block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 14px; border-radius: 99px; background: var(--panel); margin-bottom: 8px; }
.reloj-preg.apurado { background: #dc2626; animation: latido 1s ease-in-out infinite; }
button.whatsapp { background: #25d366; color: #fff; margin-top: 10px; }
.tel-fila { display: flex; gap: 8px; align-items: stretch; }
.tel-fila .prefijo { display: flex; align-items: center; padding: 0 12px; border-radius: 12px; background: var(--panel); border: 2px solid var(--borde); font-size: 19px; margin-bottom: 10px; color: var(--suave); }
input.codigo { text-align: center; font-size: 34px; letter-spacing: 12px; font-variant-numeric: tabular-nums; }