/* Piezas reutilizables: buffs, opciones, versus, resumen, final, leaderboard, QTE, flash, tienda. */
/* buffs */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.buff{
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px;
  cursor:pointer;text-align:left;color:var(--txt);font-weight:400;box-shadow:none;
  display:flex;flex-direction:column;gap:8px;min-height:150px;transition:transform .15s ease,border-color .15s ease;
}
.buff:hover{transform:translateY(-3px)}
.buff .rar{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.buff .bname{font-size:16px;line-height:1.2}
.buff .beff{font-size:13px;color:var(--dim);margin-top:auto}
.buff.r-comun{border-color:#2c3a7a}.buff.r-comun .rar{color:#93a0cf}
.buff.r-raro{border-color:var(--rare)}.buff.r-raro .rar{color:var(--rare)}
.buff.r-epico{border-color:var(--epic);box-shadow:0 0 18px rgba(168,85,247,.25)}.buff.r-epico .rar{color:var(--epic)}
.buff.r-cabra{border-color:var(--gold);box-shadow:0 0 24px rgba(255,201,60,.35);animation:glow 1.6s ease-in-out infinite alternate}
.buff.r-cabra .rar{color:var(--gold)}
@keyframes glow{from{box-shadow:0 0 12px rgba(255,201,60,.25)}to{box-shadow:0 0 30px rgba(255,201,60,.55)}}
/* Nada de apagar animaciones por prefers-reduced-motion: Windows lo activa
   solo al desactivar los "efectos de animación" del sistema y mataba todo. */

/* eventos / opciones */
.opt{display:block;width:100%;text-align:left;margin-top:10px;background:var(--panel2);color:var(--txt);border:1px solid var(--line);box-shadow:none;font-weight:600;font-size:14px;line-height:1.35}
.opt:hover{border-color:var(--neon)}
.opt small{display:block;color:var(--dim);font-weight:400;margin-top:3px}
.result-line{margin-top:12px;padding:12px;border-radius:12px;background:#040820;border:1px solid var(--line);font-size:14px;line-height:1.5}
.casino-slots{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;align-items:center;margin:18px auto;}
.sx-reel{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:96px;height:96px;font-size:3.4rem;line-height:1;font-family:system-ui, sans-serif;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 12px rgba(0,0,0,.08);vertical-align:middle;padding:0;margin:0;}
.casino-slots .sx-reel{animation:none !important;}
.casino-card{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;border:1px solid var(--line);background:var(--panel2);font-size:18px;font-weight:800;box-shadow:inset 0 0 12px rgba(0,0,0,.12);margin:4px;}
.casino-card.sx-hidden{background:rgba(255,255,255,.08);color:var(--dim);}
.delta{font-weight:800;font-variant-numeric:tabular-nums}
.delta.up{color:var(--up)}.delta.down{color:var(--down)}

/* versus */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:14px 0}
.fighter{background:#040820;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.fighter .fname{font-size:16px}
.fighter .ftag{font-size:12px;color:var(--dim);margin-top:3px}
.vs{font-size:26px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(255,201,60,.5))}

/* resumen */
.bigline{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed #1b2660;font-size:15px}
.bigline:last-child{border-bottom:none}
.bigline b{font-size:17px;font-variant-numeric:tabular-nums}
.title-win{margin-top:12px;padding:12px;border-radius:12px;border:1px solid var(--gold);background:rgba(255,201,60,.07);color:var(--gold);font-weight:700}
.log{margin-top:10px;font-size:13px;color:var(--dim);line-height:1.6}

/* final */
.verdict{
  text-align:center;font-size:clamp(30px,8vw,54px);margin:14px 0 6px;
  background:linear-gradient(180deg,#fff,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,201,60,.4));
}
.center{text-align:center}
.dice{font-size:38px;display:inline-block;animation:roll .8s ease}
@keyframes roll{from{transform:rotate(-360deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
/* leaderboard */
.tl{position:relative;margin-top:14px;padding-left:26px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--gold),var(--neon),#1f55ff)}
.tl-item{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.tl-item::before{content:"";position:absolute;left:-22px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px rgba(232,17,45,.7)}
.tl-item.top1{border-color:var(--gold);box-shadow:0 0 16px rgba(255,204,0,.25)}
.tl-item.top1::before{background:var(--gold);box-shadow:0 0 10px rgba(255,204,0,.9)}
.tl-item.trunca{border-style:dashed;opacity:.85}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.tl-head .rank{font-size:16px}
.tl-pts{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;font-size:17px}
.tl-sub{color:var(--dim);font-size:12px;margin-top:4px;line-height:1.5}

footer{margin-top:26px;text-align:center;color:#5563a8;font-size:12px}

/* QTE de rimas */
.qte-timer{height:12px;border-radius:8px;background:#040820;border:1px solid var(--line);overflow:hidden;margin:12px 0}
.qte-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),#ff8c3c,var(--down));transition:width .1s linear}
.qte-word{
  text-align:center;font-size:clamp(30px,8vw,46px);margin:10px 0 4px;
  background:linear-gradient(180deg,#fff,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,201,60,.35));
}
.qte-sub{text-align:center;color:var(--dim);font-size:13px;margin-bottom:12px}
.qte-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qte-opt{background:var(--panel2);border:1px solid var(--line);color:var(--txt);box-shadow:none;font-size:17px;font-weight:700;padding:16px 8px}
.qte-opt.hit{background:rgba(61,220,132,.2);border-color:var(--up)}
.qte-opt.miss{background:rgba(255,90,90,.2);border-color:var(--down)}
.qte-score{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);margin-top:10px}
.qte-score b{font-variant-numeric:tabular-nums}

/* eventos flash */
.stage.danger{border-color:var(--down);box-shadow:0 0 30px rgba(255,90,90,.35);animation:danger 0.6s ease-in-out infinite alternate}
@keyframes danger{from{box-shadow:0 0 14px rgba(255,90,90,.25)}to{box-shadow:0 0 38px rgba(255,90,90,.6)}}
.stage.danger::before{background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(255,90,90,.14),transparent 65%)}
.flash-count{
  text-align:center;font-size:clamp(52px,16vw,96px);line-height:1;margin:6px 0 10px;
  color:var(--down);filter:drop-shadow(0 0 18px rgba(255,90,90,.6));
  font-variant-numeric:tabular-nums;
}
.opt.danger-opt{border-color:#5a2035}
.opt.danger-opt:hover{border-color:var(--down)}

/* tienda */
.shop-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;margin-top:10px;background:var(--panel2);color:var(--txt);border:1px solid var(--line);box-shadow:none;font-weight:600;font-size:14px}
.shop-item:hover:not(:disabled){border-color:var(--gold)}
.shop-item:disabled{opacity:.45;cursor:not-allowed}
.shop-item small{display:block;color:var(--dim);font-weight:400;margin-top:3px}
.shop-item .price{color:var(--gold);font-weight:800;white-space:nowrap}
.shop-item.owned{border-color:var(--up)}