/* Pop: misma estructura que 301 (styles.css) con paleta fría.
   Como la diana de 301: un globo grande y centrado sobre fondo liso, con su halo y el cronómetro LED encima.
   El globo se infla con el tiempo y estalla al acabarse; el cronómetro va a su lado. */
body.pop{
  --wall:#2d353f; --panel:rgba(16,20,26,.9); --edge:#5b6675; --edge-hi:#8793a3;
  --cream:#eef1f4; --dim:#b6c0cc; --blue:#3b6fe0; --blue-dk:#22408f; --inf:.42;
}
/* Fondo: un laboratorio en pixel art (laboratorio.svg), oscurecido para que el globo y su halo sigan mandando */
body.pop #bg{background:
  radial-gradient(circle at var(--bx) var(--by),rgba(140,180,255,.24) 0,rgba(140,180,255,.08) calc(var(--rs) * var(--inf) * .9),rgba(140,180,255,0) calc(var(--rs) * var(--inf) * 1.5)),
  url("laboratorio.svg") center/cover no-repeat,#2d353f}
body.pop #bg::after{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,rgba(0,0,0,0) 1px 3px),
  radial-gradient(ellipse at var(--bx) var(--by),rgba(10,13,18,.15) 0,rgba(10,13,18,.5) 100%),
  linear-gradient(to bottom,rgba(10,13,18,.55) 0,rgba(10,13,18,0) 22%,rgba(10,13,18,0) 70%,rgba(10,13,18,.65) 100%)}
body.pop .logo{color:#5b8cff;text-shadow:3px 3px 0 #000,0 0 14px rgba(91,140,255,.6)}
body.pop .btn{background:var(--blue)}
body.pop .btn.alt{background:var(--brass);color:var(--ink)}

/* Pregunta: altura fija para que la escena no salte al cambiar de pregunta */
.qpanel h2{min-height:2.1em;display:flex;align-items:center;justify-content:center}

/* Globo: crece desde la boquilla, como al inflarlo, hasta llenar la silueta de su tamaño máximo */
.globo{position:fixed;z-index:1;transform-origin:50% 94%;pointer-events:none}
.globo-max{position:fixed;z-index:1;pointer-events:none}
.globo-max img{display:block;width:100%;height:100%;image-rendering:pixelated;filter:brightness(0) invert(1);opacity:.09}
.gin{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.gin img{display:block;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 0 18px rgba(80,130,255,.35))}
.hilo{position:absolute;left:44%;top:98.4%;width:12%;height:36%;overflow:visible}
.globo.live .gin{animation:wob 1.8s ease-in-out infinite}
.globo.live.hurry .gin{animation-duration:.45s}
@keyframes wob{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}

/* Estallido */
.burst{position:fixed;z-index:5;width:0;height:0;pointer-events:none}
.burst i{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);background:var(--c);opacity:0;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.burst.show i{animation:shard .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes shard{0%{opacity:1;transform:translate(-50%,-50%)}65%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) rotate(var(--rot))}}
body.pop .stamp{top:var(--by);background:var(--blue)}

/* Cronómetro LED a un lado del globo (posición y tamaño en escena(), pop.js) */
.led.timer{z-index:4;left:var(--tx);top:var(--ty);width:var(--tw);padding:6px 8px 8px;gap:4px}
.led.timer svg.seg{height:var(--segh)}

/* Selector de nivel (solo antes de empezar) */
.niveles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nivel{font:13px/1 var(--f-pixel);text-transform:uppercase;color:var(--cream);background:#000;border:0;box-shadow:inset 0 0 0 2px var(--edge);
  padding:10px 4px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.nivel small{font:24px/1 var(--f-term);color:var(--dim);text-transform:none}
.nivel[aria-checked="true"]{background:var(--blue);box-shadow:inset 0 0 0 2px var(--cream)}
.nivel[aria-checked="true"] small{color:var(--cream)}
.nivel:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
@media (max-width:440px){.nivel{font-size:10px}}
.led.hurry .seg{animation:hurry .5s steps(1) infinite}
@keyframes hurry{50%{opacity:.35}}

/* Preguntas */
.slot.ok .pt{color:var(--green)}
.slot.cur{box-shadow:inset 0 0 0 2px var(--brass)}
.slot.cur .pt{color:var(--brass)}
.slot .pt.long{font-size:21px;line-height:1.05}

/* Intentos: la cota más cercana por debajo (▲) y por arriba (▼), con la respuesta en medio */
.guesses{display:flex;gap:12px;justify-content:center;align-items:center;min-height:38px}
.gchip{background:#000;box-shadow:0 0 0 2px var(--edge);padding:2px 12px;font-size:28px;line-height:1.1;min-width:84px;text-align:center}
.gchip b{font-weight:400}
.gchip.lo{color:#8fb6ff;box-shadow:0 0 0 2px #3b6fe0}
.gchip.hi{color:#ff8f7a;box-shadow:0 0 0 2px #c0473a}
.gchip.empty{color:#6c7684}
.gmid{color:var(--dim);font-size:21px;text-transform:uppercase;letter-spacing:.08em}
.msg.ok{color:var(--green)}
.msg.hi{color:#ff8f7a}
.msg.lo{color:#8fb6ff}
.btn.big{width:100%;min-height:48px;font-size:16px}
#guess.shake{animation:shake .22s steps(2)}
.final .cap.left{text-align:left}
/* Resumen: segundo en que se completó cada pregunta */
td.seg{color:var(--brass)}
td .popt{font:11px/1 var(--f-pixel);color:#fff;background:var(--blue);padding:4px 5px 3px;box-shadow:0 0 0 2px #000;vertical-align:2px}
@media (max-width:440px){body.pop table{font-size:20px}body.pop th{font-size:16px;letter-spacing:.04em}body.pop td,body.pop th{padding-left:4px;padding-right:4px}}

/* Pregunta repetida junto a la casilla: solo con el teclado del móvil abierto, que tapa el panel de arriba */
.qmini{display:none;margin:0;font-size:24px;line-height:1.1;color:var(--cream);text-align:center;scroll-margin-top:8px}
body.kb .qmini{display:block}

/* Explosión: hinchado brusco, reventón, onda expansiva y temblor */
.globo.swell{animation:swell .38s cubic-bezier(.5,0,1,.5) forwards}
@keyframes swell{
  0%{transform:scale(var(--inf))}
  30%{transform:scale(calc(var(--inf) * 1.06)) translateX(-1%)}
  60%{transform:scale(calc(var(--inf) * 1.1)) translateX(1%)}
  100%{transform:scale(calc(var(--inf) * 1.16))}}
.globo.popping{animation:popg .16s ease-out forwards}
@keyframes popg{from{transform:scale(calc(var(--inf) * 1.16))}to{transform:scale(calc(var(--inf) * 1.4));opacity:0}}
.burst .ring{position:absolute;left:0;top:0;width:var(--ring);height:var(--ring);border:6px solid rgba(240,245,255,.9);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}
.burst.show .ring{animation:ring .5s ease-out forwards}
@keyframes ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
body.pop .stamp{font-size:clamp(22px,calc(var(--rs) * .16),40px);padding:14px 18px}
body.pop .stamp.still{opacity:1}
.app.shake{animation:shake .3s steps(3)}