/* vertrivia.php — pantalla externa (1920×1080) */
:root{ --neon:#ff2fd0; --cyan:#00e6ff; --violet:#8a5cff; --bg:#05030f; --fondo-oscuro:.5; --err:#ff5470; --ok:#25e39a; }
*{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;overflow:hidden}
.bg-layer{position:absolute;inset:0;z-index:0}
.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,#1a0140 40%,#2a0a5e 60%,#05030f)}
.stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 30%,rgba(0,230,255,.8),transparent),radial-gradient(1px 1px at 75% 15%,#fff,transparent);opacity:.5}
.grid-floor{position:absolute;left:-25%;right:-25%;bottom:-10%;height:52%;background-image:linear-gradient(rgba(0,230,255,.32) 2px,transparent 2px),linear-gradient(90deg,rgba(0,230,255,.32) 2px,transparent 2px);background-size:60px 60px;transform:perspective(320px) rotateX(68deg);transform-origin:bottom center;animation:gm 2.4s linear infinite;opacity:.6;mask-image:linear-gradient(to top,#000 30%,transparent)}
@keyframes gm{from{background-position-y:0}to{background-position-y:60px}}
.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))}
.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);opacity:.55}
.logo-top{position:absolute;top:2.6vh;left:0;right:0;z-index:11;display:flex;justify-content:center;pointer-events:none}
.logo-top img{max-height:11vh;max-width:34vw;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,230,255,.5))}
.logo-top:empty{display:none}
.counter{position:absolute;top:2.8vh;right:2.6vw;z-index:12;text-align:right}
.counter .n{font-family:'Orbitron',sans-serif;font-weight:900;font-size:4vh;color:#eafcff;text-shadow:0 0 12px var(--cyan)}
.counter .l{font-size:1.7vh;color:#bfe9ff;text-transform:uppercase;letter-spacing:.2vw}
.content{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16vh 5vw 8vh}
.view{display:none;width:100%;text-align:center}
.view.on{display:block}
.wait-msg{font-size:4vh;color:#e7f7ff;margin-bottom:3vh;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}
.qr-box{display:inline-flex;flex-direction:column;align-items:center;gap:1.2vh;background:rgba(255,255,255,.06);border:1px solid rgba(0,230,255,.35);border-radius:20px;padding:2vh 2vw}
.qr-box img{width:26vh;height:26vh;background:#fff;padding:1.2vh;border-radius:14px}
.qr-box.small img{width:18vh;height:18vh}
.qr-box .hint{font-size:2vh;letter-spacing:.2vw;text-transform:uppercase;color:#bfe9ff}
.timer{font-family:'Orbitron',sans-serif;font-weight:900;font-size:9vh;color:var(--cyan);text-shadow:0 0 24px var(--cyan)}
.timer.low{color:var(--err);text-shadow:0 0 24px var(--err);animation:pulse .6s infinite}
@keyframes pulse{50%{opacity:.5}}
.pregunta{font-family:'Orbitron',sans-serif;font-weight:800;font-size:4.6vh;margin:1.5vh auto 2.5vh;max-width:80vw}
.play-cols{display:flex;gap:3vw;align-items:center;justify-content:center}
.opts{list-style:none;display:flex;flex-direction:column;gap:1.4vh;flex:1;max-width:60vw}
.opts li{display:flex;align-items:center;gap:1.2vw;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.6vh 1.6vw;font-size:3vh;text-align:left}
.opts li .letra{width:5vh;height:5vh;flex:0 0 5vh;border-radius:50%;display:grid;place-items:center;font-family:'Orbitron',sans-serif;font-weight:800;background:linear-gradient(135deg,var(--cyan),#2a7bff);color:#04121a}
.win-label{font-family:'Orbitron',sans-serif;font-weight:900;font-size:5vh;letter-spacing:.6vw;color:#ffe08a;text-shadow:0 0 20px rgba(255,204,77,.6)}
.win-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12vh;text-transform:uppercase;color:#fff;text-shadow:0 0 16px var(--neon),0 0 44px rgba(255,47,208,.6);animation:pop .6s cubic-bezier(.2,1.4,.4,1);line-height:1}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.win-sub{font-size:3vh;color:#d9f6ff;margin-top:1.4vh}
#confetti{position:fixed;inset:0;z-index:20;pointer-events:none}
.fs-btn{position:fixed;bottom:2.4vh;right:2.6vw;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:.25}
.fs-btn:hover{opacity:1}
.conn-warn{position:fixed;bottom:2.4vh;left:2.6vw;z-index:31;background:rgba(255,84,112,.85);color:#fff;padding:.6vh 1.2vw;border-radius:10px;font-size:1.7vh;display:none}
.conn-warn.show{display:block}