/* showdown-roll.css */
/* CLASSROOM SHOWDOWN — the Power Roll card (showdown-roll.js): a slot
   machine in the middle of the board. Its reel slots are 92px tall — the
   same ITEM_H the script scrolls by. Themed like the board's cards: white,
   a cyan rim, Fredoka titles, the winning team's colour on the chip. */
.rl-wrap{
  position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  background:rgba(23,24,78,.62);backdrop-filter:blur(4px);animation:rl-in .18s ease-out;
}
.rl-card{
  position:relative;width:min(640px,92vw);padding:26px 30px 28px;text-align:center;
  background:#fff;border:5px solid var(--cyan,#50E8FF);border-radius:34px;
  box-shadow:0 0 0 8px rgba(80,232,255,.25),0 34px 80px rgba(23,24,78,.5);
  animation:rl-pop .34s cubic-bezier(.2,.9,.3,1.2);
}
.rl-kicker{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.16em;color:var(--royal,#2F63D8)}
.rl-team{display:inline-flex;align-items:center;gap:12px;margin:10px 0 16px;padding:6px 18px 6px 8px;border-radius:999px;border:3px solid var(--tc,#7E858F);background:#fff}
.rl-team-name{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink,#171B55);text-transform:uppercase}
.rl-window{
  position:relative;height:276px;overflow:hidden;border-radius:24px;border:4px solid #DCEFFF;
  background:linear-gradient(180deg,#EAF6FF,#fff 30%,#fff 70%,#EAF6FF);
}
.rl-window::before{
  content:"";position:absolute;left:0;right:0;top:92px;height:92px;pointer-events:none;
  background:rgba(255,197,46,.22);border-top:3px solid var(--yellow,#FFC52E);border-bottom:3px solid var(--yellow,#FFC52E);
}
.rl-strip{will-change:transform}
.rl-item{
  height:92px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:44px;font-weight:700;color:var(--ink,#171B55);letter-spacing:.01em;
}
.rl-pointer{position:absolute;top:50%;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;transform:translateY(-50%);pointer-events:none}
.rl-pointer-l{left:-4px;border-left:24px solid var(--yellow,#FFC52E)}
.rl-pointer-r{right:-4px;border-right:24px solid var(--yellow,#FFC52E)}
.rl-result{min-height:40px;margin-top:18px;font-family:var(--display);font-size:32px;font-weight:700;color:var(--ink,#171B55)}
.rl-tag{min-height:26px;margin-top:4px;font-size:19px;font-weight:700;color:var(--grey,#5F6B8A)}
.rl-hit .rl-window::before{background:rgba(255,197,46,.45);animation:rl-flash .5s ease-out 3}
.rl-hit .rl-result{animation:rl-pop .4s cubic-bezier(.2,.9,.3,1.2)}
.rl-fail .rl-window{filter:grayscale(1);opacity:.6}
.rl-fail .rl-result{color:#C2321B}
.rl-close{margin-top:14px;padding:10px 26px;border:3px solid var(--line,#9DD6FF);border-radius:999px;background:#fff;color:var(--royal,#2F63D8);font-family:var(--display);font-size:22px;font-weight:700;cursor:pointer}
@keyframes rl-in{from{opacity:0}to{opacity:1}}
@keyframes rl-pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes rl-flash{0%{background:rgba(255,197,46,.85)}100%{background:rgba(255,197,46,.45)}}
@media (prefers-reduced-motion:reduce){.rl-wrap,.rl-card,.rl-hit .rl-result,.rl-hit .rl-window::before{animation:none}}