/* Duelos Troll MLBB - ruleta del sorteo (js/ui-ruleta.js). Prefijo rul.
   Dos piezas:
     .rulopc   las casillas "Sortear con ruleta" y "Con sonido", dentro de "Opciones del sorteo" (sección Héroes)
     .rul      la capa a pantalla completa con los carretes; se cuelga de <body> solo mientras dura
   Tamaños de un carrete (variables en .rul):
     --rc  alto de cada casilla de la tira     --rs  diámetro del retrato
     --rp  lo que asoman el retrato de arriba y el de abajo
   Lo único que se anima al girar es el `transform` de la tira (.rult), con una transición que pone
   el JS; la capa aparece con `opacity`. Nada de esto recalcula la página. */

/* ---------- casillas de la sección Héroes ---------- */
.rulopc{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:-4px 4px}
.rulchk{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:15px;line-height:20px;color:var(--fg);cursor:pointer;
}
.rulchk input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent-fill);cursor:pointer}
.rulchk.off{color:var(--fg2);cursor:default}
.rulchk.off input{cursor:default}
.rulnota{display:none;flex:1 1 100%;margin:0 0 6px;font-size:13px;line-height:18px;color:var(--fg2)}
@media (min-width:700px){
  .rulopc{flex:1 1 100%;margin:-6px 4px}
}
@media (min-width:1280px){
  .rulopc{flex:none;margin:-4px 4px}
}

/* ---------- capa ---------- */
.rul{
  --rc:104px;--rs:88px;--rp:30px;
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--scrim);cursor:pointer;
  touch-action:none;overscroll-behavior:contain;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  animation:rulin .16s ease-out;
}
@keyframes rulin{from{opacity:0}to{opacity:1}}
.rulcaja{
  width:min(100%,400px);max-height:100%;overflow:hidden;
  padding:20px 16px 16px;border-radius:18px;
  background:var(--sheet-bg);color:var(--fg);box-shadow:var(--shadow);text-align:center;
}
.rultit{margin:0 0 14px;font-size:20px;line-height:25px;font-weight:700}
.rulfila{display:flex;align-items:flex-start;justify-content:center;gap:6px}
.rulj{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.rulfila.uno .rulj{flex:0 1 auto}
.rulr{
  margin:0 0 8px;font-size:13px;line-height:18px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);
}
/* "VS" a media altura de las ventanas: rótulo (18 + 8) + media ventana - medio renglón */
.rulvs{
  flex:none;margin-top:calc(26px + var(--rp) + var(--rc) / 2 - 10px);
  font-size:15px;line-height:20px;font-weight:700;color:var(--fg2);
}

/* ventana del carrete: se ve un retrato entero y asoman el de arriba y el de abajo */
.rulv{
  position:relative;flex:none;overflow:hidden;contain:layout paint;
  width:calc(var(--rc) + 20px);max-width:100%;height:calc(var(--rc) + var(--rp) * 2);
  border-radius:18px;background:var(--sheet-card);
}
.rult{position:absolute;left:0;right:0;top:var(--rp);will-change:transform;backface-visibility:hidden}
.rulc{display:grid;place-items:center;height:var(--rc)}
.rulc .av{width:var(--rs);height:var(--rs);font-size:calc(var(--rs) * .45)}
/* arriba y abajo los retratos se funden con el fondo de la ventana */
.rulv::before,.rulv::after{
  content:"";position:absolute;left:0;right:0;z-index:1;height:var(--rp);pointer-events:none;
}
.rulv::before{top:0;background:linear-gradient(to bottom,var(--sheet-card),transparent)}
.rulv::after{bottom:0;background:linear-gradient(to top,var(--sheet-card),transparent)}
/* aro del centro: gris mientras gira, azul y con un latido al detenerse */
.rulm{
  position:absolute;z-index:2;left:50%;top:50%;pointer-events:none;
  width:calc(var(--rs) + 10px);height:calc(var(--rs) + 10px);
  margin:calc(var(--rs) / -2 - 5px) 0 0 calc(var(--rs) / -2 - 5px);
  border:3px solid var(--sep);border-radius:50%;
}
.rulj.ok .rulm{border-color:var(--accent);animation:rulpop .36s ease-out}
@keyframes rulpop{from{transform:scale(1.16)}to{transform:none}}

/* nombre del héroe: ocupa su sitio desde el principio (sin saltos) y se enseña al detenerse */
.ruln{margin:10px 0 0;max-width:100%;visibility:hidden;opacity:0}
.rulj.ok .ruln{visibility:visible;opacity:1;transition:opacity .2s ease-out}
.rulnn{display:block;font-size:17px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
.rulnr{display:block;font-size:13px;line-height:18px;color:var(--fg2)}

.rulsaltar{margin-top:14px;min-width:160px}

/* tablet y PC: carretes más grandes */
@media (min-width:700px){
  .rul{--rc:136px;--rs:116px;--rp:32px}
  .rulcaja{width:min(100%,500px);padding:24px 24px 20px}
  .rultit{font-size:22px;line-height:28px;margin-bottom:16px}
  .rulfila{gap:14px}
}
/* teléfono tumbado: todo más bajo para que quepa */
@media (max-height:440px){
  .rul{--rc:72px;--rs:60px;--rp:12px;padding-top:8px;padding-bottom:8px}
  .rulcaja{padding:10px 16px}
  .rultit{margin-bottom:6px;font-size:17px;line-height:22px}
  .rulr{margin-bottom:4px}
  .rulvs{margin-top:calc(22px + var(--rp) + var(--rc) / 2 - 10px)}
  .ruln{margin-top:4px}
  .rulsaltar{margin-top:6px;min-height:44px}
}

/* con "reducir movimiento" el JS no enseña la capa; esto es solo por si acaso */
@media (prefers-reduced-motion: reduce){
  .rulnota{display:block}
  .rul,.rulj.ok .rulm{animation:none}
  .rult{transition:none!important}
  .rulj.ok .ruln{transition:none}
}