/* Prueba 2 · La Ruleta pupi (v3, sobre cobalto). Sigue pareciendo La ruleta de la suerte por la forma, no por copiar sus colores:
   panel de casillas en su marco con bombillas, rueda de gajos con Quiebra y Pierde turno, flecha que tropieza con los clavos y los
   atriles con el dinero. Todo en la paleta del sistema: gajos tomate, girasol, chicle, lima y menta; tinta para el panel y la
   Quiebra; leche para las letras y Pierde turno. */

.ruleta{
  flex:1;display:flex;flex-direction:column;gap:10px;
  padding-bottom:var(--kb,0px); /* hueco extra cuando el teclado del iPhone tapa la parte de abajo (lo pone el juego) */
  -webkit-user-select:none;user-select:none;
}
.ruleta [hidden]{display:none !important}

/* atriles: «Este panel» en tomate y «Acumulado» en girasol, letra tinta (5,5:1 y 10,8:1); con Quiebra se vuelve tinta */
.ruleta-score{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ruleta-cell{
  --c:var(--tomate);
  display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:2px 16px 0;border-radius:18px;
  background:var(--c);color:var(--tinta);transition:background-color .25s,color .25s;
}
.ruleta-cell.is-bank{--c:var(--girasol)}
.ruleta-cell small{display:block;font:700 13px/1 var(--ui);color:var(--tinta)}
.ruleta-num{display:block;font:400 30px/.9 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;transform-origin:left center}
.ruleta-num.pop{animation:ruleta-pop .5s ease-out}
@keyframes ruleta-pop{35%{transform:scale(1.16)}}
.ruleta-cell.is-bust{--c:var(--tinta)}
.ruleta-cell.is-bust small,.ruleta-cell.is-bust .ruleta-num{color:#fff}

/* la pista: hundida en el cobalto, con su etiqueta girasol */
.ruleta-clue{
  margin:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:6px 14px;border-radius:16px;
  background:var(--cobalto-d);box-shadow:inset 0 4px 0 var(--cobalto-dd);
}
.ruleta-clue small{flex:none;font:700 13px/1 var(--ui);color:var(--girasol)}
.ruleta-clue b{text-align:center;text-wrap:balance;font:800 clamp(15px,4.4vw,17px)/1.2 var(--ui);color:#fff}

/* el panel: marco de tinta con bombillas (girasol y apagadas, alternas) y las casillas: cobalto vacías, leche con letra */
.ruleta-panel-wrap{position:relative;margin:2px -8px 0}
.ruleta-panel{position:relative}
.ruleta-frame{position:relative;padding:12px;border-radius:28px;background:var(--tinta)}
.ruleta-frame{--dot:radial-gradient(circle,var(--girasol) 0 2.4px,transparent 3px)}
.ruleta-frame::before,.ruleta-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.ruleta-frame::before{
  background:var(--dot) 0 0/25px 12px repeat-x,var(--dot) 0 100%/25px 12px repeat-x,var(--dot) 0 0/12px 25px repeat-y,var(--dot) 100% 0/12px 25px repeat-y;
  animation:ruleta-bulbs 2.4s steps(1) infinite;
}
.ruleta-frame::after{
  background:var(--dot) 12.5px 0/25px 12px repeat-x,var(--dot) 12.5px 100%/25px 12px repeat-x,var(--dot) 0 12.5px/12px 25px repeat-y,var(--dot) 100% 12.5px/12px 25px repeat-y;
  animation:ruleta-bulbs 2.4s steps(1) -1.2s infinite;
}
@keyframes ruleta-bulbs{0%{opacity:1}50%{opacity:.22}}
.ruleta-board{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;padding:2px;border-radius:8px;overflow:hidden;
  background:var(--tinta);container-type:inline-size;
}
.ruleta-line{display:grid;grid-template-columns:repeat(var(--cols,12),minmax(0,1fr));gap:3px}
.ruleta-tile{position:relative;display:grid;place-items:center;aspect-ratio:5/6;border-radius:5px;overflow:hidden}
.ruleta-tile.is-void{visibility:hidden}
.ruleta-tile.is-blank,.ruleta-tile.is-space{background:var(--cobalto)}
.ruleta-tile.is-letter,.ruleta-tile.is-punct{background:var(--leche)}
.ruleta-ch{
  position:relative;z-index:1;padding-top:.12em;
  font:400 clamp(14px,5vw,22px)/1 var(--display);font-size:calc(100cqw / var(--cols,12) * .7);color:var(--tinta);
}
/* letra que aparece: la casilla se enciende en girasol (todas a la vez) y se vuelve leche con la letra en su turno (--turn) */
.ruleta-tile.is-letter::before,.ruleta-tile.is-letter::after{content:"";position:absolute;inset:0;opacity:0}
.ruleta-tile.is-letter::after{background:var(--girasol);box-shadow:inset 0 0 0 2px #FFE7A3}
.ruleta-tile.is-reveal{animation:ruleta-touch .32s var(--turn,0ms) ease-out}
.ruleta-tile.is-reveal::after{animation:ruleta-lit-on .14s ease-out both,ruleta-lit-off .32s var(--turn,0ms) ease-in forwards}
.ruleta-tile.is-reveal .ruleta-ch{animation:ruleta-ch .35s var(--turn,0ms) cubic-bezier(.2,1.5,.4,1) both}
@keyframes ruleta-touch{40%{transform:scale(1.08)}}
@keyframes ruleta-lit-on{from{opacity:0}to{opacity:1}}
@keyframes ruleta-lit-off{from{opacity:1}to{opacity:0}}
@keyframes ruleta-ch{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
/* panel resuelto: bombillas a toda prisa, las letras se encienden una a una y saltan chispas girasol */
.ruleta-panel.is-solved .ruleta-frame::before,.ruleta-panel.is-solved .ruleta-frame::after{animation-duration:.26s;animation-iteration-count:12}
.ruleta-tile.is-letter::before{background:#FFE07A}
.ruleta-panel.is-solved .ruleta-tile.is-letter::before{animation:ruleta-flash .8s ease-out both}
@keyframes ruleta-flash{0%,100%{opacity:0}22%{opacity:1}}
.ruleta-sparks{position:absolute;inset:-18px 0;z-index:3;overflow:hidden;pointer-events:none}
.ruleta-spark{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:var(--girasol);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  opacity:0;animation:ruleta-spark .9s var(--d,0ms) ease-out both;
}
@keyframes ruleta-spark{0%{opacity:0;transform:scale(.1) rotate(0)}30%{opacity:1;transform:scale(1) rotate(40deg)}100%{opacity:0;transform:scale(.3) rotate(110deg)}}

/* la ruleta: el disco gira sobre su canto de tinta; el centro y la flecha (la chincheta girasol) no giran */
.ruleta-stage{display:flex;justify-content:center;padding:30px 0 8px}
.ruleta-wheel{position:relative;width:min(100%,250px);aspect-ratio:1;touch-action:none;cursor:pointer;-webkit-touch-callout:none}
.ruleta-wheel::before{content:"";position:absolute;inset:1.6%;border-radius:50%;background:var(--tinta);transform:translateY(8px);pointer-events:none}
.ruleta-disc,.ruleta-cap{position:absolute;inset:0;border-radius:50%}
.ruleta-disc{will-change:transform}
.ruleta-cap{pointer-events:none}
.ruleta-svg{display:block;width:100%;height:100%}
.ruleta-seg,.ruleta-hub{font-family:var(--display);font-weight:400}
.ruleta-hl.is-on{animation:ruleta-hl .62s ease-out}
@keyframes ruleta-hl{0%{opacity:0}22%{opacity:.62}50%{opacity:.08}74%{opacity:.5}100%{opacity:0}}
.ruleta-pointer{position:absolute;left:50%;top:-32px;z-index:2;width:44px;margin-left:-22px;pointer-events:none}
.ruleta-pointer svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 38.5%;will-change:transform}

/* lo que pasa: una tarjeta de leche; tinta si es malo, lima si hay letra */
.ruleta-msg{
  margin:0;padding:11px 16px;border-radius:16px;text-align:center;text-wrap:balance;
  font:700 15.5px/1.3 var(--ui);color:var(--tinta);background:var(--leche);
}
.ruleta-msg:empty{display:none}
.ruleta-msg.is-bad{color:#fff;background:var(--tinta)}
.ruleta-msg.is-ok{color:var(--tinta);background:var(--lima)}
.ruleta-msg.is-in{animation:pop .36s cubic-bezier(.2,1.4,.4,1)}

/* botones: girasol para girar y avanzar (el principal sobre cobalto), leche blandito para lo demás */
.ruleta-controls{display:flex;flex-direction:column;gap:6px}
.ruleta-scene .ruleta-go{min-height:64px;font-size:22px}
.ruleta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ruleta-scene .ruleta-row .btn{min-height:56px;padding:0 8px;font-size:clamp(15px,4.4vw,17px);white-space:nowrap}

/* letras para pedir: teclas de leche sobre una bandeja de tinta; las ya pedidas se quedan hundidas en cobalto */
.ruleta-keys{display:grid;grid-template-columns:repeat(6,1fr);gap:7px 6px;padding:10px 10px 13px;border-radius:var(--r-tesela);background:var(--tinta)}
.ruleta-keys.is-vowels{grid-template-columns:repeat(5,1fr)}
.ruleta-key{
  min-height:48px;margin-bottom:4px;padding-top:4px;border-radius:12px;background:var(--leche);color:var(--tinta);
  font:400 27px/1 var(--display);box-shadow:0 4px 0 var(--leche-d);transition:transform .08s,box-shadow .08s,background-color .1s;
}
.ruleta-key:active:not(:disabled){background:var(--girasol);transform:translateY(4px);box-shadow:0 0 0 var(--leche-d)}
.ruleta-key.is-used{cursor:default;color:rgba(255,255,255,.4);background:var(--cobalto);transform:translateY(4px);box-shadow:none}
.ruleta-key:focus-visible{outline:3px solid var(--girasol);outline-offset:2px}

/* resolver: una tira de leche hundida para escribir la frase (16 px o más para que el iPhone no haga zoom al enfocar) */
.ruleta-solve,.ruleta-bote{display:flex;flex-direction:column;gap:12px}
.ruleta-input{
  width:100%;min-height:62px;padding:6px 14px 0;border:0;border-radius:var(--r-tesela);
  background:var(--leche);color:var(--tinta);box-shadow:inset 0 5px 0 var(--leche-d);
  font:400 28px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;text-align:center;
  -webkit-user-select:text;user-select:text;
}
.ruleta-input::placeholder{font:600 17px/1 var(--ui);text-transform:none;color:#6A6390}
.ruleta-input:focus-visible,.ruleta-digit:focus-visible{outline:3px solid var(--girasol);outline-offset:3px}

/* panel resuelto: la pegatina «¡Panel resuelto!» girasol, troquelada, y lo que había detrás */
.ruleta-solved{
  align-self:center;margin:10px 0 20px;padding:11px 24px 7px;border-radius:var(--r-pill);text-align:center;rotate:-4deg;
  font:400 clamp(28px,8.4vw,33px)/1 var(--display);color:var(--tinta);background:var(--girasol);
  box-shadow:0 0 0 4px #fff,0 9px 0 4px var(--girasol-d);
  animation:ruleta-banner .6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes ruleta-banner{0%{transform:scale(.4) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.ruleta-after{margin:0;text-align:center;text-wrap:balance;font:800 20px/1.3 var(--ui);color:#fff}
.ruleta-chat{-webkit-user-select:text;user-select:text}

/* el bote de las 22:22: un reloj de tinta con las cifras girasol en casillas hundidas */
.ruleta-bote-q{margin:0;text-align:center;font:400 var(--t-m)/1 var(--display);color:#fff}
.ruleta-clock{
  --ring:var(--girasol-d);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--r-hoja);
  background:var(--tinta);box-shadow:0 0 0 4px var(--ring);
}
.ruleta-digit{
  width:min(34vw,128px);min-width:0;height:96px;padding:10px 0 0;border:0;border-radius:var(--r-tesela);
  background:var(--tinta-d);box-shadow:inset 0 5px 0 #05030F;
  text-align:center;font:400 74px/1 var(--display);color:var(--girasol);caret-color:var(--girasol);
  -webkit-user-select:text;user-select:text;
}
.ruleta-digit::placeholder{color:var(--tinta-3)}
.ruleta-colon{font:400 64px/1 var(--display);color:var(--girasol);padding-bottom:6px;animation:blink 1s steps(1) infinite}
.ruleta-clock.is-real{padding:16px 12px 12px}
.ruleta-digits{font:400 86px/1 var(--display);letter-spacing:.02em;color:var(--girasol)}
.ruleta-clock.is-right{--ring:var(--lima)}
.ruleta-clock.is-right .ruleta-digits{color:var(--lima)}
.ruleta-clock.is-wrong{--ring:var(--tomate)}

/* la entrada: ruleta pequeña girando despacio, el título y las normas en tarjetas de leche con su ficha */
.ruleta-intro{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;text-align:center}
.ruleta-wheel.is-intro{width:min(46vw,184px);margin:24px auto 0;cursor:default;animation:rise .7s ease-out both}
.ruleta-wheel.is-intro .ruleta-disc{animation:ruleta-idle 48s linear infinite}
@keyframes ruleta-idle{to{transform:rotate(360deg)}}
.ruleta-intro-title{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:400}
.ruleta-intro-kicker{
  display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);background:#fff;color:var(--cobalto);
  font:700 14px/1 var(--ui);animation:rise .6s .15s ease-out both;
}
.ruleta-logo{
  display:inline-flex;flex-direction:column;align-items:center;font:400 clamp(44px,13vw,52px)/.86 var(--display);color:#fff;
  animation:ruleta-banner .6s .2s cubic-bezier(.2,1.4,.4,1) both;
}
.ruleta-logo .is-pupi{font-size:1.5em;line-height:.9;color:var(--girasol)}
.ruleta-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.ruleta-rules li{
  display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:var(--r-tesela);
  background:var(--leche);color:var(--tinta);animation:rise .5s ease-out both;
}
.ruleta-rules li:nth-child(1){animation-delay:.35s}
.ruleta-rules li:nth-child(2){animation-delay:.45s}
.ruleta-rules li:nth-child(3){animation-delay:.55s}
.ruleta-rules li:nth-child(4){animation-delay:.65s}
.ruleta-rules p{margin:0;min-width:0;font:600 15.5px/1.35 var(--ui);color:var(--tinta);text-wrap:pretty}
.ruleta-chip{flex:none;display:grid;place-items:center;width:56px;height:42px;border-radius:12px;font-style:normal}
.ruleta-chip.is-money{background:var(--lima);font:400 22px/1 var(--display);color:var(--tinta);padding-top:3px}
.ruleta-chip.is-vowel{width:36px;margin:0 10px;border-radius:8px;background:var(--leche);box-shadow:inset 0 0 0 2.5px var(--tinta);font:400 26px/1 var(--display);color:var(--tinta);padding-top:3px}
.ruleta-chip.is-bankrupt{background:var(--tinta);font:400 13px/1 var(--display);letter-spacing:.02em;color:#fff;padding-top:2px}
.ruleta-chip.is-tiles{display:flex;justify-content:center;gap:2px;background:var(--tinta)}
.ruleta-chip.is-tiles b{width:14px;height:18px;border-radius:3px;background:var(--leche)}
.ruleta-chip.is-tiles b:nth-child(2){background:var(--cobalto)}
.ruleta-scene.ruleta-intro .btn{animation:rise .5s .75s ease-out backwards} /* backwards: luego no pisa el «hundido» del botón */

@media (max-width:359px){
  .ruleta-panel-wrap{margin-left:-6px;margin-right:-6px}
  .ruleta-num{font-size:26px}
  .ruleta-keys{gap:6px 4px;padding:8px 8px 11px}
  .ruleta-key{min-height:44px;font-size:23px}
  .ruleta-digit{height:84px;font-size:62px}
  .ruleta-rules li{gap:10px;padding:8px 10px 8px 8px}
  .ruleta-rules p{font-size:14.5px}
  .ruleta-chip{width:46px;height:36px}
  .ruleta-chip.is-money{font-size:18px}
  .ruleta-chip.is-vowel{width:30px;margin:0 8px;font-size:22px}
  .ruleta-chip.is-bankrupt{font-size:11px}
  .ruleta-chip.is-tiles b{width:12px;height:16px}
}
@media (max-height:640px){
  .ruleta-wheel.is-intro{width:120px;margin-top:18px}
  .ruleta-intro{gap:14px}
}
/* pantallas bajas: las cuatro normas no caben con el botón, así que «¡A girar!» se queda pegado abajo mientras se leen */
@media (max-height:700px){
  .ruleta-intro > .btn{position:sticky;bottom:calc(12px + var(--sab));z-index:5}
}
/* sin movimiento: nada de bombillas, giros de adorno, luces de casilla ni chispas (los resultados salen directos) */
@media (prefers-reduced-motion:reduce){
  .ruleta-frame::before,.ruleta-frame::after,.ruleta-wheel.is-intro,.ruleta-wheel.is-intro .ruleta-disc,
  .ruleta-tile,.ruleta-tile::before,.ruleta-tile::after,.ruleta-ch,.ruleta-hl,
  .ruleta-msg,.ruleta-solved,.ruleta-logo,.ruleta-intro-kicker,.ruleta-rules li,.ruleta-scene .btn{animation:none !important}
  .ruleta-sparks{display:none}
}

/* ---------- panel final (28-10-2026): los huecos de las letras elegidas, el reloj y «¡Correcto!» ---------- */
.ruleta-picks{display:flex;justify-content:center;gap:7px;padding:4px 0 6px}
.ruleta-pick{
  display:grid;place-items:center;width:44px;height:52px;padding-top:4px;border-radius:12px;
  border:2px dashed rgba(255,255,255,.55);font:400 30px/1 var(--display);color:var(--tinta);
}
.ruleta-pick.is-vowel{border-color:var(--girasol)}
.ruleta-pick.is-vowel:first-of-type,.ruleta-pick:not(.is-vowel) + .ruleta-pick.is-vowel{margin-left:12px}
.ruleta-pick.is-on{border:0;background:var(--leche);box-shadow:0 4px 0 var(--leche-d);animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
.ruleta-pick.is-vowel.is-on{background:var(--girasol);box-shadow:0 4px 0 var(--girasol-d)}
.ruleta-timer{flex-direction:column;gap:10px;padding:14px 16px 16px}
.ruleta-timer .ruleta-digits{font-variant-numeric:tabular-nums}
.ruleta-timer-track{display:block;width:100%;height:12px;border-radius:var(--r-pill);overflow:hidden;background:var(--tinta-d)}
.ruleta-timer-bar{display:block;height:100%;background:var(--girasol);transform-origin:left center;transition:transform .1s linear} /* la mueve el reloj (wheel.js) */
.ruleta-timer.is-hurry{--ring:var(--tomate)}
.ruleta-timer.is-hurry .ruleta-digits{color:var(--tomate);animation:final-beat .5s ease-in-out infinite alternate}
.ruleta-timer.is-hurry .ruleta-timer-bar{background:var(--tomate)}
@keyframes final-beat{to{transform:scale(1.14)}}
.ruleta-final-say{margin:4px 0 2px;text-align:center;text-wrap:balance;font:700 16px/1.3 var(--ui);color:#fff}
.ruleta-solved.is-time{background:var(--tomate);box-shadow:0 0 0 4px #fff,0 9px 0 4px var(--tomate-d)}
/* con el reloj en marcha: panel, reloj y «¡Correcto!» a la vez (sin los atriles ni el aviso), y el botón del presentador pegado abajo */
.ruleta.is-final-clock .ruleta-score,.ruleta.is-final-clock .ruleta-msg{display:none}
.ruleta.is-final-clock .ruleta-go{position:sticky;bottom:calc(10px + var(--sab));z-index:5}
@media (max-height:600px){ /* el SE con barras: el reloj algo más bajo para que quepa también la pista */
  .ruleta-timer{gap:8px;padding:10px 14px 12px}
  .ruleta-timer .ruleta-digits{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  .ruleta-pick.is-on,.ruleta-timer.is-hurry .ruleta-digits{animation:none}
  .ruleta-timer-bar{transition:none}
}
/* el vídeo de la cocina tras el panel final (games/wheel.js) */
.ruleta-rec{width:min(72%,calc(50vh * 9 / 16));margin:4px auto 0}