:root {
    --fondo: #14092e;
    --fondo-2: #231146;
    --panel: #2f1b5c;
    --texto: #ffffff;
    --suave: #d9cff5;
    --oro: #ffc93c;
    --verde: #12b76a;
    --rojo: #e5243b;
    --azul: #2d7ff9;
    --mio: #ffc93c;
    --chico: clamp(1.1rem, 2.4vw, 1.4rem);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    overflow-x: clip;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--chico);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body { background: radial-gradient(circle at 50% -10%, #4a1f96 0, var(--fondo-2) 35%, var(--fondo) 75%); background-attachment: fixed; min-height: 100dvh; }

h1, h2, p { margin: 0; }
h1 { font-size: clamp(2.2rem, 9vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.15; }

.marca { color: var(--oro); font-weight: 700; letter-spacing: .02em; text-shadow: 0 3px 0 #a3480e; }
.logo { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.etiqueta { color: var(--oro); font-weight: 600; letter-spacing: .08em; }
.enorme-chico { font-size: clamp(1.4rem, 5.5vw, 2rem); line-height: 1.25; }
.apagado { color: var(--suave); }
.alerta { color: var(--oro); }
.festejo { color: var(--oro); animation: salto .7s ease-in-out infinite alternate; }

@keyframes salto { to { transform: translateY(-6px) scale(1.03); } }

.centro, .pantalla-accion, .ingreso {
    min-height: 100dvh;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.centro { justify-content: center; align-items: center; text-align: center; }
.pantalla-accion { text-align: center; padding-top: 64px; }
.ingreso { justify-content: center; }

.banda { background: var(--rojo); color: #fff; padding: 10px 16px; text-align: center; font-weight: 600; }
.cortado::before {
    content: "Se cortó la conexión. Reconectando…";
    position: fixed; inset: 0 0 auto 0; z-index: 30;
    padding: 12px 16px; text-align: center; font-weight: 600;
    background: var(--rojo); color: #fff;
}

/* Botones: enormes y sin vueltas */
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }

.accion {
    width: 100%;
    min-height: 84px;
    padding: 16px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    font-weight: 700;
    box-shadow: 0 7px 0 rgba(0, 0, 0, .35);
    user-select: none;
    -webkit-user-select: none;
}
.accion:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.accion.gigante { flex: 1 1 0; min-height: 17dvh; font-size: clamp(2.4rem, 12vw, 4.4rem); }
.verde { background: #0a8f52; }
.roja { background: #cf1f35; }
.azul { background: #1f62d0; }
.amarilla { background: #ffc93c; color: #150b2e; }
.accion.bomba { background: #fff; color: #b5121b; }
.pantalla-accion .amarilla { flex: none; }
.pantalla-accion .bomba { min-height: 17dvh; }
.blanco { display: block; font-size: .6em; font-weight: 600; }
.boton-chico.prendido { background: var(--oro); border-color: var(--oro); color: #150b2e; }
.apagada { background: #51466f; box-shadow: none; }

.boton-chico { background: transparent; border: 2px solid var(--suave); color: var(--suave); border-radius: 14px; padding: 10px 16px; min-height: 48px; }

/* Ingreso */
.rotulo { font-weight: 600; margin-bottom: -10px; }
.sala-ok { color: var(--suave); }
.sala-ok strong { color: var(--oro); letter-spacing: .1em; }
.entrada {
    width: 100%; min-height: 68px; padding: 10px 16px;
    border: 3px solid var(--suave); border-radius: 16px;
    background: #fff; color: #150b2e;
    font: inherit; font-size: 1.7rem; font-weight: 600;
}
.entrada.codigo { text-transform: uppercase; text-align: center; letter-spacing: .25em; }
.edad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; }
.edad-boton { min-height: 72px; border: 0; border-radius: 16px; background: var(--panel); color: #fff; font-size: 1.5rem; font-weight: 700; }
.edad-valor { text-align: center; font-size: 2.8rem; font-weight: 700; color: var(--oro); }
.aviso-error { color: #ffb4bd; font-weight: 600; min-height: 1.2em; }

/* Avatar */
.avatar {
    display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--color, var(--mio)); color: #150b2e;
    font-size: 2rem; font-weight: 700; flex: none;
}

/* Reloj */
.cuenta { font-size: clamp(2.4rem, 10vw, 4rem); font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; min-height: 1em; }

.mis-puntos { font-size: 1.6rem; }
.mis-puntos strong { color: var(--oro); font-size: 2.2rem; }

.accion.votado { outline: 6px solid #fff; outline-offset: -6px; }
.accion.votado::before { content: "✓ "; }
.accion.no-votado { opacity: .5; }

/* La bomba */
.consigna-grande, .consigna-enorme, .consigna-mesa { text-transform: uppercase; }
body.con-bomba { background: #c1121f; animation: alarma .5s ease-in-out infinite alternate; }
@keyframes alarma { to { background: #7d0a12; } }
@keyframes latido { to { transform: scale(1.4); } }
.consigna-grande { font-size: clamp(1.9rem, 8vw, 3.2rem); font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.consigna-grande.larga { font-size: clamp(1.5rem, min(6.4vw, 4dvh), 2.6rem); }
.consigna-grande.muy-larga { font-size: clamp(1.25rem, min(5.4vw, 3.3dvh), 2.2rem); }
.consigna-enorme { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.consigna-mesa { font-size: clamp(1.2rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.tiene { flex: 1 1 auto; display: grid; place-items: center; font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 700; overflow-wrap: anywhere; }
.boom { font-size: clamp(4rem, 18vw, 9rem); color: #ff5a6e; line-height: 1; }
.explotando { background: #7d0a12; }

/* Celu que juega y hostea */
.con-panel { display: flex; flex-direction: column; }
.centro.bajo { min-height: 0; padding-top: 28px; }
.con-panel .pantalla-lista { min-height: 0; justify-content: flex-start; }
.panel-dueno { max-width: 640px; width: 100%; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; border-top: 2px solid #6e49c0; }
.panel-dueno .qr { width: min(180px, 50vw); }
.controles { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.rondas { display: grid; grid-template-columns: auto 64px 64px 64px; gap: 8px; align-items: center; justify-items: center; font-weight: 600; }
.rondas .edad-boton { width: 64px; }
.lobby-izquierda { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }

.boton-pantalla { position: fixed; right: 10px; bottom: 10px; z-index: 25; width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.5rem; }

/* Buzón de sugerencias */
.buzon-boton { position: fixed; left: 10px; bottom: 10px; z-index: 25; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 24px; background: rgba(0, 0, 0, .55); color: #fff; }
.jugando .buzon-boton { display: none; }
.buzon { width: min(92vw, 520px); border: 3px solid var(--oro); border-radius: 20px; background: var(--fondo-2); color: var(--texto); padding: 18px; }
.buzon::backdrop { background: rgba(0, 0, 0, .7); }
.buzon-form { display: flex; flex-direction: column; gap: 12px; }
.buzon-texto { font-size: 1.2rem; font-weight: 400; resize: vertical; }
.buzon-aviso { min-height: 1.2em; color: var(--oro); font-weight: 600; }

/* Cómo se juega */
.como-pagina { max-width: 1100px; margin: 0 auto; padding: 72px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 24px; min-height: 100dvh; }
.como-titulo { text-align: center; display: grid; gap: 8px; }
.como-bajada { font-size: clamp(1.25rem, 3.6vw, 1.7rem); font-weight: 600; }
.como-claves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.como-claves li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 2px solid var(--oro); border-radius: 18px; background: rgba(0, 0, 0, .25); text-align: center; line-height: 1.25; }
.como-claves span { font-size: 2.6rem; line-height: 1.1; }
.como-claves strong { color: var(--oro); font-size: 1.25em; }
.como-secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: start; }
.como-secciones section { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: rgba(0, 0, 0, .25); min-width: 0; }
.como-secciones h2 { color: var(--oro); font-size: clamp(1.5rem, 4vw, 2rem); }
.como-nota { color: var(--suave); text-align: center; }
.como-pagina > a.accion { display: block; align-self: center; width: min(100%, 480px); text-align: center; text-decoration: none; }
.como-lista { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; line-height: 1.3; }
.como-lista ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.como-lista strong { color: var(--oro); }

/* El globo de la pantalla grande: crece con el tiempo, desde host.js */
.globo {
    position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 100 / 150;
    transform: translate(-50%, -50%) scale(.3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cg transform='rotate(14 50 50)'%3E%3Cpath d='M50 3C74 3 90 22 90 45C90 69 67 90 53 95L47 95C33 90 10 69 10 45C10 22 26 3 50 3Z'/%3E%3Cpath d='M50 93L57 103L43 103Z'/%3E%3C/g%3E%3Cpath d='M38 100C30 112 46 120 38 130C32 138 40 144 36 149' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cg transform='rotate(14 50 50)'%3E%3Cpath d='M50 3C74 3 90 22 90 45C90 69 67 90 53 95L47 95C33 90 10 69 10 45C10 22 26 3 50 3Z'/%3E%3Cpath d='M50 93L57 103L43 103Z'/%3E%3C/g%3E%3Cpath d='M38 100C30 112 46 120 38 130C32 138 40 144 36 149' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    background: radial-gradient(circle at 66% 20%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 16%),
        radial-gradient(circle at 34% 50%, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, 0) 38%), var(--color);
    transition: transform .25s linear;
}
.consigna-mesa { position: relative; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .85), 0 0 2px #000; }
.aviso-volumen { text-align: center; padding: 10px 16px 0; font-weight: 700; color: var(--oro); font-size: 1.3rem; }

/* Cuentas y globos de premio */
.avatar { overflow: hidden; }
.avatar-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.globo-premio {
    display: inline-block; flex: none; width: 26px; aspect-ratio: 100 / 150; vertical-align: middle;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cg transform='rotate(14 50 50)'%3E%3Cpath d='M50 3C74 3 90 22 90 45C90 69 67 90 53 95L47 95C33 90 10 69 10 45C10 22 26 3 50 3Z'/%3E%3Cpath d='M50 93L57 103L43 103Z'/%3E%3C/g%3E%3Cpath d='M38 100C30 112 46 120 38 130C32 138 40 144 36 149' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cg transform='rotate(14 50 50)'%3E%3Cpath d='M50 3C74 3 90 22 90 45C90 69 67 90 53 95L47 95C33 90 10 69 10 45C10 22 26 3 50 3Z'/%3E%3Cpath d='M50 93L57 103L43 103Z'/%3E%3C/g%3E%3Cpath d='M38 100C30 112 46 120 38 130C32 138 40 144 36 149' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    background: radial-gradient(circle at 66% 20%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 16%),
        radial-gradient(circle at 34% 50%, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, 0) 38%), var(--color);
}
.globo-premio.oro { --color: #ffc93c; }
.globo-premio.plata { --color: #cfd6de; }
.globo-premio.bronce { --color: #cd7f32; }
.enlace-cuenta { display: block; text-align: center; text-decoration: none; }
.ingreso .boton-google, .centro .boton-google, .perfil .boton-google { align-self: center; }
.cuenta-lugar { position: fixed; top: 10px; right: 10px; z-index: 25; }
.boton-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 8px 18px 8px 50px;
    border-radius: 26px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.7 1.2 9.2 3.6l6.9-6.9C35.9 2.4 30.4 0 24 0 14.6 0 6.5 5.4 2.6 13.2l8 6.2C12.5 13.6 17.8 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.5 2.9-2.2 5.4-4.7 7l7.3 5.7c4.3-4 6.7-9.9 6.7-17.2z'/%3E%3Cpath fill='%23FBBC05' d='M10.6 28.6c-.5-1.4-.8-3-.8-4.6s.3-3.2.8-4.6l-8-6.2C.9 16.5 0 20.1 0 24s.9 7.5 2.6 10.8l8-6.2z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8L32.6 36.5c-2 1.4-4.7 2.2-8.6 2.2-6.2 0-11.5-4.1-13.4-9.9l-8 6.2C6.5 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") no-repeat 16px center / 24px 24px;
    color: #1f1f1f; font-weight: 600; text-decoration: none; text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.chip-perfil { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 16px 5px 5px; border-radius: 26px; background: var(--panel); border: 2px solid var(--oro); color: #fff; font-weight: 600; text-decoration: none; }
.chip-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chip-inicial { display: grid; place-items: center; background: var(--oro); color: #150b2e; font-weight: 700; }
.oferta-cuenta { text-align: center; }
.oferta-cuenta .buzon-form { align-items: center; }
.oferta-globos { display: flex; justify-content: center; gap: 14px; }
.oferta-globos .globo-premio { width: 44px; }
.perfil { max-width: 480px; margin: 0 auto; padding: 24px 16px; min-height: 100dvh; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.perfil .entrada { text-align: center; }
.perfil a { text-decoration: none; }
.perfil-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.perfil-inicial { display: grid; place-items: center; background: var(--panel); font-size: 3.5rem; font-weight: 700; }
.perfil-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.premios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.premio { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(0, 0, 0, .28); border-radius: 14px; padding: 10px 4px; }
.premio .globo-premio { width: 44px; }
.premio strong { font-size: 1.8rem; color: var(--oro); }
.boton-chico.peligro { border-color: #ff8a97; color: #ff8a97; }

/* Menú de todas las pantallas */
.menu-boton { position: fixed; top: 10px; left: 10px; z-index: 26; width: 48px; height: 48px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.6rem; line-height: 1; }
.menu .buzon-form { align-items: stretch; text-align: center; }
.menu-opcion { min-height: 60px; border: 0; border-radius: 14px; background: var(--panel); color: #fff; font-size: 1.3rem; font-weight: 600; }
.menu .boton-google { align-self: center; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.menu .boton-chico { align-self: center; }

/* Puntos */
.mas-puntos { font-size: clamp(3rem, 16vw, 6rem); font-weight: 700; color: #fff; line-height: 1; text-shadow: 3px 3px 0 #000; }
.tabla li { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
.tabla-mas { color: var(--verde); font-weight: 700; }

/* El show de la explosión */
.fuegos { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }
.pum { font-family: "Press Start 2P", monospace; font-weight: 400; color: #ffe14d; font-size: clamp(2rem, 11vw, 4rem); line-height: 1.25; text-shadow: 5px 5px 0 #000; animation: parpadeo .6s steps(2, jump-none) infinite; }
.foto-pixel { width: min(56vw, 240px); height: min(56vw, 240px); image-rendering: pixelated; border: 8px solid #fff; animation: temblor .22s linear infinite; }
.zafaste h1 { font-size: clamp(3rem, 16vw, 6rem); }
.zafaste .apagado { font-size: 1.2rem; }
.perdiste h2 { font-size: clamp(2rem, 9vw, 3rem); }
.explotando { animation: destello .5s steps(2, jump-none) 4; }
@keyframes parpadeo { to { opacity: .12; } }
@keyframes temblor { 25% { transform: translate(-5px, 3px) rotate(-2deg); } 50% { transform: translate(4px, -4px) rotate(2deg); } 75% { transform: translate(-3px, -2px) rotate(-1deg); } }
@keyframes destello { from { background: #e5243b; } to { background: #7d0a12; } }
@media (prefers-reduced-motion: reduce) {
    .pum, .foto-pixel, .explotando { animation: none; }
}

/* Los eventos */
.clima { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2dvh; padding: 16px; text-align: center; color: #fff; overflow: hidden; }
.clima > * { position: relative; }
.clima h1 { font-size: clamp(2.4rem, 12vw, 6rem); line-height: 1.05; text-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.clima-icono { font-size: clamp(5rem, 24vmin, 11rem); line-height: 1; }
.clima-texto { font-size: clamp(1.6rem, 7vw, 3.4rem); font-weight: 700; line-height: 1.15; }
.clima-consigna { font-size: clamp(1.4rem, 6vw, 3rem); font-weight: 700; color: #ffc93c; text-transform: uppercase; overflow-wrap: anywhere; }
.clima-resto { font-size: clamp(1rem, 3.5vw, 1.5rem); opacity: .8; }
.clima-chip { display: inline-block; margin: 0 0 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 700; font-size: 1.1rem; }
.clima-Tormenta { background: #1b2238; animation: relampago 2.4s linear infinite; }
.clima-Tormenta::before { content: ""; position: absolute; inset: -40px; background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(170, 200, 255, .28) 22px 24px); animation: lluvia .35s linear infinite; }
.clima-Tormenta .clima-icono { animation: temblor .25s linear infinite; }
.clima-Viento { background: linear-gradient(120deg, #2a6f97, #61a5c2); }
.clima-Viento .clima-icono { animation: rafaga 1.3s ease-in-out infinite; }
.clima-Calor { background: radial-gradient(circle, #ffb703, #d00000 75%); }
.clima-Calor .clima-icono { animation: pulso .7s ease-in-out infinite; }
.clima-Remolino { background: #3c2a4d; }
.clima-Remolino .clima-icono { animation: girar 1s linear infinite; }
.clima-Luna { background: radial-gradient(circle at 50% 22%, #33415c, #0b132b 65%); }
.clima-Luna .clima-icono { animation: pulso 2s ease-in-out infinite; }
@keyframes relampago { 0%, 8%, 14%, 60%, 66%, 100% { background: #1b2238; } 4%, 11%, 63% { background: #dfe9ff; } }
@keyframes lluvia { to { transform: translate(-12px, 34px); } }
@keyframes rafaga { 0%, 100% { transform: translateX(-14vw); } 50% { transform: translateX(14vw); } }
@keyframes pulso { 50% { transform: scale(1.18); } }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .clima, .clima::before, .clima-icono { animation: none !important; }
}

/* El globo que viaja por la mesa */
.globo-vuelo { position: absolute; transform: translate(-50%, -75%); font-size: clamp(2.4rem, 11dvh, 5rem); line-height: 1; z-index: 4; pointer-events: none; }
.mesa .globo { animation: bamboleo 1.5s ease-in-out infinite; }
@keyframes bamboleo { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }

/* Los minijuegos */
.mini-pantalla { background: linear-gradient(160deg, #4a1f96, #e5243b); }
.caratula { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2dvh; width: min(84vw, 70dvh); aspect-ratio: 3 / 4; max-height: 90dvh; padding: 16px; border: 6px solid #fff; border-radius: 24px; box-shadow: 0 10px 0 rgba(0, 0, 0, .35); }
.puntos-chico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; width: min(92vw, 480px); font-size: 1.05rem; text-align: left; }
.puntos-chico li { display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .28); }
.puntos-chico li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puntos-chico li.mio { background: var(--oro); color: #150b2e; }
.mini-barras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; width: min(92vw, 480px); font-size: .95rem; font-weight: 600; text-align: left; }
.mini-barra { min-width: 0; }
.mini-barra span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-barra-fondo { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.mini-barra-llena { width: 0; height: 100%; }
.mini-voto { gap: 1.5dvh; }
.mini-voto h1 { font-size: clamp(2rem, 9vw, 4rem); }
.caratulas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(94vw, 70dvh); }
.caratulas .caratula { width: 100%; aspect-ratio: auto; min-height: 28dvh; max-height: none; padding: 8px; gap: .5dvh; position: relative; color: #fff; font: inherit; font-weight: 700; font-size: clamp(1rem, 4.6vw, 2rem); touch-action: manipulation; cursor: pointer; }
.caratulas .clima-icono { font-size: clamp(3rem, 9dvh, 7rem); }
.caratula.elegida { border-color: #ffc93c; outline: 6px solid #ffc93c; }
.caratula-votos { min-height: 1.2em; font-size: 1.4em; }
.ruleta-armar { gap: 1.2dvh; justify-content: flex-start; padding-top: 2dvh; background: radial-gradient(circle at 50% 35%, #17885f, #04251a 85%); }
.ruleta-armar h1 { font-size: clamp(2rem, 9vw, 4rem); color: var(--oro); }
.ruleta-armar .clima-texto { font-size: clamp(1.3rem, 5.5vw, 2.6rem); }
.ruleta-armar .accion { flex: none; width: min(90vw, 480px); min-height: 12dvh; }
.ruleta-techo { font-size: clamp(1.1rem, 4.6vw, 2rem); font-weight: 700; color: #ffc93c; }
.ruleta-premio { font-size: clamp(1.1rem, 4.6vw, 2rem); font-weight: 700; }
.ruleta-armar .cuenta { font-size: clamp(1.2rem, 5vw, 2rem); margin: 0; }
.ruleta-mapa { position: relative; flex: none; width: min(80vw, 36dvh); aspect-ratio: 1; }
.ruleta-mapa::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid #e8c96a; border-radius: 50%; background: repeating-conic-gradient(#c1121f 0 30deg, #16101f 30deg 60deg); box-shadow: 0 2px 8px rgba(0, 0, 0, .6); pointer-events: none; }
.ruleta-celu { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid #e8c96a; border-top-width: 7px; border-radius: 6px; background: #0a1f18; font-size: clamp(.6rem, 2.4vmin, 1.1rem); font-weight: 700; overflow-wrap: anywhere; line-height: 1; }
.ruleta-celu.mio { background: #ffc93c; color: #150b2e; }
.ruleta-celu.listo { background: #0a8f52; color: #fff; }
.ruleta-juego { position: fixed; inset: 0; z-index: 15; background: #04251a; touch-action: none; user-select: none; -webkit-user-select: none; }
.ruleta-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ruleta-pie { position: absolute; left: 0; right: 0; bottom: 7dvh; display: flex; flex-direction: column; align-items: center; gap: 2dvh; padding: 0 16px; pointer-events: none; }
.ruleta-fichas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ruleta-ficha { display: grid; place-items: center; width: clamp(3rem, 15vw, 4.5rem); aspect-ratio: 1; border: 4px dashed #fff; border-radius: 50%; color: #fff; font-size: clamp(1.3rem, 6.5vw, 2rem); font-weight: 700; box-shadow: 0 0 0 3px rgba(0, 0, 0, .45), 0 4px 8px rgba(0, 0, 0, .5); }
.ruleta-ficha.roja { background: #c1121f; }
.ruleta-ficha.negra { background: #16101f; }
.ruleta-nombre { padding: 6px 24px; border: 3px solid #e8c96a; border-radius: 999px; background: linear-gradient(#2f1908, #6b3f18); color: #fff1b8; font-size: clamp(1.4rem, 8vw, 2.6rem); font-weight: 700; overflow-wrap: anywhere; text-align: center; }
.mini-numero { font-size: clamp(8rem, 50vmin, 22rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mini-globos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; width: 100%; }
.mini-jugador { display: flex; flex-direction: column; align-items: center; width: 15%; min-width: 72px; font-weight: 700; overflow-wrap: anywhere; }
.mini-lugar { width: 100%; aspect-ratio: 100 / 150; }
.mini-lugar.grande { width: min(70vw, 42dvh); }
.globo.globo-mini { position: static; width: 100%; transform: scale(.3); transform-origin: 50% 60%; transition: transform .08s linear; }
.pantalla-inflar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100dvh; padding: 16px; text-align: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.pantalla-inflar { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 45%, #7a2fd0, #2a0f5e 75%); }
.pantalla-inflar.a-punto { background: radial-gradient(circle at 50% 45%, #ff5a3c, #8e0f1e 75%); }
.inflar-titulo { color: var(--oro); font-size: clamp(2.2rem, 11vw, 4.5rem); text-shadow: 0 4px 0 rgba(0, 0, 0, .45); animation: inflar-latido .6s ease-in-out infinite alternate; }
.inflar-globo { animation: inflar-bamboleo 1.4s ease-in-out infinite alternate; }
.a-punto .inflar-globo { animation: inflar-temblor .09s linear infinite; }
.inflar-mano { position: relative; margin-top: -9dvh; z-index: 2; font-size: clamp(3.5rem, 18vw, 6rem); line-height: 1; pointer-events: none; animation: inflar-mano .5s ease-in-out infinite alternate; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
.inflar-mano[hidden] { display: none; }
.inflar-barra { width: min(84vw, 480px); height: 18px; border: 3px solid #fff; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; flex: none; }
.inflar-barra-llena { width: 0; height: 100%; background: linear-gradient(90deg, #ffc93c, #e5243b); transition: width .08s linear; }
.inflar-aire { position: fixed; z-index: 3; font-size: 2rem; pointer-events: none; transform: translate(-50%, -50%); animation: inflar-aire .5s ease-out forwards; }
@keyframes inflar-latido { to { transform: scale(1.07); } }
@keyframes inflar-bamboleo { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes inflar-temblor { 0% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -2px); } 100% { transform: translate(-2px, 2px); } }
@keyframes inflar-mano { to { transform: translateY(-14px); } }
@keyframes inflar-aire { to { transform: translate(-50%, -160%) scale(1.5); opacity: 0; } }
.pantalla-dibujar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100dvh; padding: 16px; text-align: center; }
.dibujo-pixel { width: min(46dvh, 60vw); aspect-ratio: 1; image-rendering: pixelated; border: 6px solid #fff; background: #fff; }
.dibujo-pixel.dibujable { width: min(92vw, 62dvh); touch-action: none; cursor: crosshair; }
@media (prefers-reduced-motion: reduce) {
    .globo-vuelo, .mesa .globo { animation: none; }
}

/* Lobby del jugador: elegir vecino */
.pantalla-lista { min-height: 100dvh; max-width: 640px; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; text-align: center; justify-content: center; }
.opciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.opcion { min-height: 78px; padding: 12px; border: 4px solid var(--color); border-radius: 18px; background: var(--panel); color: #fff; font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700; overflow-wrap: anywhere; }
.opciones.muchas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opciones.muchas .opcion { min-height: 64px; font-size: clamp(1.1rem, 5vw, 1.6rem); }
.opcion.marcada { background: var(--color); color: #150b2e; border-color: #fff; }

/* Portada */
.portada { min-height: 100dvh; max-width: 560px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; gap: 22px; text-align: center; }
.portada a { display: block; text-decoration: none; text-align: center; }
.portada .bajada { font-size: 1.4rem; }

/* Anfitrión */
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; min-height: 100dvh; padding: 24px; align-items: center; }
.lobby-sala { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; }
.lobby-mesa { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.qr { background: #fff; border-radius: 16px; padding: 10px; width: min(280px, 70vw); height: auto; aspect-ratio: 1; }
.enlace { color: var(--suave); overflow-wrap: anywhere; max-width: 100%; }
.codigo-sala { font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; letter-spacing: .12em; color: var(--oro); line-height: 1; }

.mesa { position: relative; width: min(100%, 70dvh); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #5b2bb0 0, #2f1b5c 65%); border: 6px solid #6e49c0; }
.mesa-centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 25%; }
.mesa-texto { font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: 700; color: var(--oro); }
.asiento { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 112px; text-align: center; transition: filter .08s; user-select: none; -webkit-user-select: none; }
.asiento-nombre { background: rgba(0, 0, 0, .55); border-radius: 10px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.asiento.arrastrado { z-index: 5; opacity: .85; cursor: grabbing; }
.asiento.caido, .tabla li.caido, .duelista.caido { opacity: .4; }
.asiento.con-bomba .avatar { background: #e5243b; box-shadow: 0 0 0 7px #fff, 0 0 44px 18px #e5243b; transform: scale(1.25); animation: latido .5s ease-in-out infinite alternate; }
.quitar { position: absolute; top: -6px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #000; color: #fff; font-size: 1.1rem; line-height: 1; }

.estudio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 20px; min-height: 100dvh; padding: 20px; align-items: stretch; }
.escenario { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-width: 0; text-align: center; }
.reactivar { grid-column: 1 / -1; }
.tabla { background: rgba(0, 0, 0, .28); border-radius: 20px; padding: 16px; min-width: 0; }
.ronda { color: var(--suave); margin-bottom: 10px; }
.tabla ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tabla li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 1.3rem; }
.tabla strong { font-size: 1.6rem; color: var(--oro); }
.tabla-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punto { width: 20px; height: 20px; border-radius: 50%; }

.titular { font-size: clamp(2.6rem, 7vw, 5rem); color: var(--oro); }
.titular-dos { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; }
.votos { font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 600; }

.final { max-width: 900px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; min-height: 100dvh; justify-content: center; }
.ranking { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; text-align: left; }
.ranking li { display: flex; gap: 14px; align-items: center; background: rgba(0, 0, 0, .28); border-radius: 16px; padding: 10px 14px; min-width: 0; }
.ranking-nombre { font-size: 1.4rem; font-weight: 600; overflow-wrap: anywhere; }
.ranking strong { color: var(--oro); }
.ranking-puesto { width: 1.4em; flex: none; text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--suave); }
.ranking-boom { margin-left: auto; flex: none; font-size: 1.3rem; }
.ranking li.mio { background: var(--oro); color: #150b2e; transform: scale(1.03); }
.ranking li.mio .ranking-puesto, .ranking li.mio strong { color: #150b2e; }

@media (max-width: 860px) {
    .lobby, .estudio { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .asiento { width: 84px; }
    .asiento .avatar { width: 48px; height: 48px; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .festejo { animation: none; }
}

/* Página de prueba: el host y los celus en una sola pestaña */
body.prueba { overflow: hidden; font-size: 1rem; }
.prueba-grilla { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; height: 100dvh; padding: 10px; }
.prueba-izquierda { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.prueba-izquierda strong { color: var(--oro); }
.prueba-eventos { display: grid; gap: 4px; }
.prueba-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prueba-fila strong { width: 5.5em; }
.prueba-boton { padding: 5px 10px; border: 2px solid #6e49c0; border-radius: 10px; background: var(--panel); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.prueba-boton:hover { border-color: var(--oro); }
.prueba-boton.prendido { background: var(--oro); border-color: var(--oro); color: #150b2e; }
.prueba-aviso { color: var(--suave); }
.prueba-izquierda iframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 2px solid #6e49c0; border-radius: 10px; }
.prueba-celus { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-width: 0; overflow-y: auto; }
.prueba-celus iframe { flex: 1 1 200px; height: 46dvh; min-width: 0; border: 2px solid #6e49c0; border-radius: 10px; }

/* Pantalla grande: siempre acostada y sin scroll. Todo se mide contra el alto y el ancho de la pantalla */
body.host { overflow: hidden; }
body.host h1 { font-size: min(8dvh, 4.5vw); }
body.host h2 { font-size: min(5dvh, 3vw); }
body.host .accion { min-height: 11dvh; padding: 1dvh 1vw; font-size: min(4.5dvh, 2.4vw); border-radius: 2dvh; }
body.host .boton-chico { min-height: 6dvh; padding: .5dvh 1vw; font-size: min(2.6dvh, 1.6vw); }
body.host .avatar { width: 11dvh; height: 11dvh; font-size: 5.5dvh; }

body.host .lobby { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2vw; height: 100dvh; min-height: 0; padding: 2dvh 2vw; }
body.host .lobby-izquierda, body.host .lobby-sala { gap: 1.5dvh; }
body.host .qr { width: min(40dvh, 22vw); }
body.host .codigo-sala { font-size: min(9dvh, 5vw); }
body.host .enlace { font-size: min(2.2dvh, 1.3vw); }
body.host .lobby-mesa { justify-content: center; height: 100%; }
body.host .lobby .mesa { width: min(92dvh, 46vw); }
body.host .controles { gap: 2dvh; }
body.host .rondas { grid-template-columns: auto 9dvh 9dvh 9dvh; font-size: min(3dvh, 1.8vw); }
body.host .rondas .edad-boton { width: 9dvh; min-height: 9dvh; font-size: 4dvh; }
body.host .rondas .edad-valor { font-size: 6dvh; }

body.host .mesa { width: min(94dvh, 68vw); }
body.host .asiento { width: 18%; }
body.host .asiento-nombre { font-size: min(2.8dvh, 1.6vw); }
body.host .quitar { width: 4.5dvh; height: 4.5dvh; font-size: 2.5dvh; top: -1dvh; right: 0; }
body.host .consigna-mesa { font-size: min(5dvh, 2.8vw); }

body.host .estudio { grid-template-columns: minmax(0, 1fr) clamp(170px, 20vw, 320px); gap: 2vw; height: 100dvh; min-height: 0; padding: 2dvh 2vw; }
body.host .escenario { gap: 2dvh; min-height: 0; overflow: hidden; }
body.host .consigna-enorme { font-size: min(11dvh, 6vw); }
body.host .titular { font-size: min(13dvh, 7vw); }
body.host .titular-dos { font-size: min(7dvh, 4vw); }
body.host .votos { font-size: min(5dvh, 3vw); }
body.host .boom { font-size: min(26dvh, 14vw); }
body.host .cuenta { font-size: min(14dvh, 8vw); }
body.host .reactivar { position: fixed; top: 2dvh; left: 70px; z-index: 5; width: auto; min-height: 0; }
body.host .tabla { min-height: 0; overflow: hidden; padding: 2dvh 1vw; }
body.host .ronda { font-size: min(3dvh, 1.8vw); }
body.host .tabla ol { gap: 1.5dvh; }
body.host .tabla li { font-size: min(3.4dvh, 1.9vw); }
body.host .tabla strong { font-size: min(3.6dvh, 2vw); }

body.host .final { max-width: none; height: 100dvh; min-height: 0; padding: 2dvh 3vw; gap: 2dvh; }
body.host .ranking { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5dvh 2vw; }
body.host .ranking li { padding: 1dvh 1vw; }
body.host .ranking-nombre { font-size: min(4dvh, 2.2vw); }
body.host .final .accion { width: min(60vw, 700px); }

/* Con más de 8 jugadores la mesa y el ranking se achican para que entren todos */
body.host .mesa.muchos .asiento { width: 13%; }
body.host .mesa.muchos .avatar { width: 7.5dvh; height: 7.5dvh; font-size: 3.8dvh; }
body.host .mesa.muchos .asiento-nombre { font-size: min(2.1dvh, 1.2vw); padding: 0 4px; }
body.host .mesa.muchos .quitar { width: 3.5dvh; height: 3.5dvh; font-size: 2dvh; }
body.host .ranking.muchos { gap: .8dvh 2vw; }
body.host .ranking.muchos li { padding: .4dvh 1vw; }
body.host .ranking.muchos .avatar { width: 6dvh; height: 6dvh; font-size: 3dvh; }
body.host .ranking .globo-premio { width: 4dvh; margin-left: auto; }
body.host .ranking.muchos .ranking-nombre { font-size: min(3dvh, 1.8vw); }
body.host .estudio .tabla ol { gap: .9dvh; }

body.host .pum { font-size: min(15dvh, 7.5vw); }
body.host .foto-pixel { width: min(46dvh, 28vw); height: min(46dvh, 28vw); }

/* Si la tablet está parada, se pide acostarla */
@media (orientation: portrait) {
    body.host::after {
        content: "↻ Acostá la pantalla";
        position: fixed; inset: 0; z-index: 40;
        display: grid; place-items: center;
        padding: 16px; text-align: center;
        background: var(--fondo); color: var(--oro);
        font-size: clamp(2rem, 9vw, 4rem); font-weight: 700;
    }
}