/* El juego · estilos compartidos por la pantalla de Verónica (/juego) y los celulares (/jugar).
   Se apoya en /vf.css: mismas fuentes, colores y el trazo inclinado como gesto. */
:root{
  --op0:#E5344E; --op1:#2F4BFF; --op2:#D69400; --op3:#1B9A56;
  --bien:#1B9A56; --mal:#E5344E; --nada:#3A3E4A;
  --resorte:cubic-bezier(.34,1.56,.64,1);
  --sale:cubic-bezier(.16,1,.3,1);
}
html,body{height:100%}
body{overflow:hidden;background:var(--carbon);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none;padding:0}
input{user-select:text;-webkit-user-select:text}

/* ───── fondo vivo ───── */
.fondo{position:fixed;inset:0;overflow:hidden;z-index:0;background:var(--carbon)}
.fondo>b{position:absolute;width:90vmax;height:90vmax;border-radius:50%;filter:blur(90px);opacity:.75;will-change:transform}
.fondo>b:nth-child(1){background:var(--tinta);left:-30vmax;top:-40vmax;animation:mancha1 22s ease-in-out infinite alternate}
.fondo>b:nth-child(2){background:#5A2AD8;right:-35vmax;bottom:-45vmax;opacity:.55;animation:mancha2 26s ease-in-out infinite alternate}
@keyframes mancha1{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes mancha2{to{transform:translate(-16vmax,-10vmax) scale(.9)}}
.trazos i{position:absolute;bottom:-30vh;width:var(--w);aspect-ratio:572/520;clip-path:var(--trazo);background:rgba(255,255,255,var(--a,.06));animation:flota var(--d) linear infinite;animation-delay:var(--r);will-change:transform}
@keyframes flota{from{transform:translateY(0) rotate(0)}to{transform:translateY(-150vh) rotate(var(--giro))}}
body[data-tono="bien"] .fondo{background:#0d5a33} body[data-tono="mal"] .fondo{background:#6d1424} body[data-tono="nada"] .fondo{background:#23262e}
body[data-tono] .fondo>b{opacity:.25}
.fondo{transition:background-color .6s}

/* ───── escenario ───── */
.escenario{position:fixed;inset:0;z-index:2}
.pant{position:absolute;inset:0;display:flex;flex-direction:column;animation:pantEntra .6s var(--sale) both}
.pant.sale{animation:pantSale .35s ease-in both;pointer-events:none}
@keyframes pantEntra{from{opacity:0;transform:scale(1.04)}}
@keyframes pantSale{to{opacity:0;transform:scale(.96)}}

/* entradas escalonadas: style="--i:n" */
.a-sube{animation:sube .8s var(--sale) both;animation-delay:calc(var(--i,0) * 80ms + var(--base,0ms))}
.a-pop{animation:pop .6s var(--resorte) both;animation-delay:calc(var(--i,0) * 90ms + var(--base,0ms))}
.a-izq{animation:izq .7s var(--sale) both;animation-delay:calc(var(--i,0) * 80ms + var(--base,0ms))}
@keyframes sube{from{opacity:0;transform:translateY(48px)}}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
@keyframes izq{from{opacity:0;transform:translateX(-60px)}}
@keyframes late{50%{transform:scale(1.08)}}
@keyframes vibra{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes gira{to{transform:rotate(360deg)}}

/* palabras que entran una a una */
.pal{display:inline-block;animation:sube .7s var(--sale) both;animation-delay:calc(var(--i) * 45ms + var(--base,0ms))}

/* barrido inclinado entre pantallas */
.barrido{position:fixed;inset:0 -60vw;z-index:40;pointer-events:none;transform:translateX(-120%) skewX(-31.8deg);background:var(--tinta)}
.barrido.va{animation:barre .9s cubic-bezier(.7,0,.3,1) both}
.barrido+.barrido.va{animation-delay:.08s;background:var(--luz)}
@keyframes barre{0%{transform:translateX(-120%) skewX(-31.8deg)}100%{transform:translateX(120%) skewX(-31.8deg)}}

/* formas de las opciones */
.forma{flex:none;width:1em;height:1em;fill:currentColor}
.op0{--c:var(--op0)} .op1{--c:var(--op1)} .op2{--c:var(--op2)} .op3{--c:var(--op3)}

/* confeti */
#confeti{position:fixed;inset:0;z-index:30;pointer-events:none;width:100%;height:100%}

.oculto{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .trazos,.fondo>b{animation:none!important}
  .a-sube,.a-pop,.a-izq,.pal,.pant{animation-duration:.01s!important}
}