/* ============================================================
   TÓMBOLA VIRTUAL — Pantalla pública (estética synthwave años 80)
   Optimizada para 1920x1080 / 16:9 / TV / proyectores.
   ============================================================ */
:root{
  --neon:#ff2fd0;
  --cyan:#00e6ff;
  --violet:#8a5cff;
  --bg:#05030f;
  --grid:rgba(0,230,255,.35);
  --fondo-oscuro:.55;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif}
#stage{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}

/* ---------- Fondos ---------- */
.bg-layer{position:absolute;inset:0;z-index:0;overflow:hidden}
.bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-overlay{position:absolute;inset:0;background:rgba(5,3,15,var(--fondo-oscuro));z-index:1}
/* Synthwave por defecto */
.bg-synth{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(138,92,255,.35), transparent 55%),
    radial-gradient(90% 60% at 50% 100%, rgba(255,47,208,.30), transparent 60%),
    linear-gradient(180deg,#12002e 0%, #1a0140 40%, #2a0a5e 60%, #05030f 100%);
}
.sun{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);width:46vh;height:46vh;border-radius:50%;
  background:linear-gradient(180deg,#ffe36b 0%,#ff8a3d 35%,#ff2fd0 70%,#8a5cff 100%);
  filter:blur(.3px);box-shadow:0 0 120px rgba(255,110,196,.6);overflow:hidden;opacity:.9}
.sun::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:repeating-linear-gradient(180deg, transparent 0 10px, rgba(26,1,64,.9) 10px 20px)}
/* Piso de rejilla */
.grid-floor{position:absolute;left:-25%;right:-25%;bottom:-10%;height:55%;
  background-image:linear-gradient(var(--grid) 2px, transparent 2px),linear-gradient(90deg,var(--grid) 2px, transparent 2px);
  background-size:60px 60px;
  transform:perspective(320px) rotateX(68deg);transform-origin:bottom center;
  animation:gridmove 2.2s linear infinite;opacity:.7;mask-image:linear-gradient(to top,#000 30%,transparent)}
@keyframes gridmove{from{background-position-y:0}to{background-position-y:60px}}
/* Sol/estrellas superiores */
.stars{position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 20% 20%,#fff,transparent),
  radial-gradient(1px 1px at 70% 15%,#fff,transparent),
  radial-gradient(2px 2px at 40% 30%,rgba(0,230,255,.8),transparent),
  radial-gradient(1px 1px at 85% 40%,#fff,transparent);opacity:.5}

/* Efecto scanline VHS */
.scanlines{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.10) 3px 4px);mix-blend-mode:overlay;opacity:.6}

/* ---------- Contenido ---------- */
.content{position:relative;z-index:10;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4vh 4vw}

/* Logo centrado en la parte superior (todos los estados) */
.logo-top{position:absolute;top:3vh;left:0;right:0;z-index:11;display:flex;justify-content:center;align-items:center;pointer-events:none}
.logo-top img{height:auto;width:auto;max-height:12vh;max-width:40vw;object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(0,230,255,.5))}
.logo-top:empty{display:none}

.neon-title{font-family:'Orbitron',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.4vw;line-height:1}
.glow-cyan{color:#eafcff;text-shadow:0 0 8px var(--cyan),0 0 22px var(--cyan),0 0 44px rgba(0,230,255,.6)}
.glow-neon{color:#ffe9fb;text-shadow:0 0 10px var(--neon),0 0 26px var(--neon),0 0 54px rgba(255,47,208,.6)}

/* Estado espera */
.waiting-msg{font-size:6vh;margin-top:2vh;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
.waiting-sub{font-size:2.4vh;color:#c9c2ff;letter-spacing:.3vw;margin-top:2vh;text-transform:uppercase}

/* Premio */
.premio-label{font-size:2.4vh;letter-spacing:.4vw;text-transform:uppercase;color:#c9f7ff}
.premio-nombre{font-family:'Orbitron',sans-serif;font-weight:800;font-size:6.5vh;margin:.4vh 0 2vh;text-transform:uppercase}
.premio-img{max-height:26vh;border-radius:16px;border:3px solid rgba(0,230,255,.5);box-shadow:0 0 40px rgba(0,230,255,.35);margin:1.5vh auto}

/* Reel (tómbola) — integrado, sin rectángulo, bordes ni líneas decorativas */
.reel-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:9vh;line-height:1.15;white-space:nowrap;
  margin:2.5vh auto;color:#fff;
  text-shadow:0 0 20px var(--cyan),0 0 44px rgba(0,230,255,.55),0 0 80px rgba(255,47,208,.35);
  transition:transform .05s linear;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.sorteando{font-size:3.2vh;letter-spacing:1vw;text-transform:uppercase;color:var(--neon);margin-top:1vh;animation:blink 1s steps(2) infinite;
  text-shadow:0 0 16px var(--neon)}
@keyframes blink{50%{opacity:.35}}

/* Ganador */
.winner-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.winner-label{font-size:5vh;letter-spacing:1.2vw}
.winner-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12vh;text-transform:uppercase;line-height:1;
  color:#fff;text-shadow:0 0 14px var(--neon),0 0 34px var(--neon),0 0 70px rgba(255,47,208,.7);animation:shine 2.5s ease-in-out infinite}
@keyframes shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.winner-extra{font-size:3vh;color:#d9f6ff;letter-spacing:.3vw;text-transform:uppercase;margin-top:.5vh}
.winner-premio{font-size:3.4vh;margin-top:1.4vh;color:#ffe9fb}
.winner-premio b{font-family:'Orbitron',sans-serif}

/* Confeti canvas */
#confetti{position:fixed;inset:0;z-index:20;pointer-events:none}

/* Controles mínimos (solo botón de pantalla completa, esquina) */
.fs-btn{position:fixed;bottom:2.4vh;right:2.4vw;z-index:30;width:6vh;height:6vh;border-radius:50%;
  border:2px solid rgba(0,230,255,.5);background:rgba(10,4,28,.6);color:#fff;font-size:2.4vh;cursor:pointer;opacity:.35;transition:.2s}
.fs-btn:hover{opacity:1;box-shadow:0 0 20px rgba(0,230,255,.5)}
body.is-fullscreen .fs-btn{opacity:.15}

/* Aviso de conexión */
.conn-warn{position:fixed;bottom:2.4vh;left:2.4vw;z-index:30;background:rgba(255,84,112,.85);color:#fff;
  padding:.6vh 1.2vw;border-radius:10px;font-size:1.8vh;display:none}
.conn-warn.show{display:block}

.hidden{display:none!important}

/* Pantallas pequeñas (vista previa en el panel) */
@media (max-width:900px){
  .winner-name{font-size:9vh}.premio-nombre{font-size:5vh}.reel-name{font-size:6vh}
}