/* Vórtice Victoria — ring interactivo con marco invisible */
.vortice-game.has-arena{
  padding:0;
  background:#020b1d;
  border-color:rgba(41,182,246,.48);
}
.vortice-game.has-arena>.vortice-game-head,
.vortice-game.has-arena>.vortice-game-question,
.vortice-game.has-arena>.vortice-game-grid{
  display:none!important;
}
.vortice-battle-stage{
  position:relative;
  width:100%;
  aspect-ratio:1586/992;
  overflow:visible;
  border-radius:15px 15px 0 0;
  background-image:var(--vortice-arena);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  isolation:isolate;
}
.vortice-battle-stage:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 56%,rgba(2,11,29,.10) 70%,rgba(2,11,29,.62) 100%);
  z-index:1;
}
.vortice-battle-fighters{
  position:absolute;
  z-index:3;
  left:1.2%;
  right:1.2%;
  top:28%;
  bottom:2.1%;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.45%;
  align-items:end;
  overflow:visible;
}
.vortice-battle-slot{
  position:relative;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  text-align:center;
  overflow:visible;
}
.vortice-battle-sprite-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
  padding:5% 9% 2%;
}
.vortice-battle-sprite{
  width:72%;
  max-width:142px;
  aspect-ratio:362/724;
  background-image:var(--vortice-sprite);
  background-size:600% 100%;
  background-repeat:no-repeat;
  background-position-x:calc(var(--damage-stage) * 20%);
  background-position-y:center;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.46));
  transform-origin:center bottom;
  will-change:transform;
  pointer-events:none;
}
.vortice-battle-impact{
  position:absolute;
  left:50%;
  top:38%;
  width:52px;
  height:52px;
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,#fff 0 10%,#40d9ff 12% 28%,rgba(41,182,246,.35) 29% 48%,transparent 70%);
}
.vortice-battle-slot.is-hit .vortice-battle-impact{animation:vorticeBattleImpact .42s ease-out}
@keyframes vorticeBattleImpact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}
}
.vortice-battle-name{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:5px 4px;
  margin:0 2px 4px;
  border:1px solid rgba(53,192,255,.72);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(4,27,66,.98),rgba(1,12,35,.98));
  box-shadow:0 0 14px rgba(24,160,255,.18);
  color:#fff;
  font-size:clamp(8px,.88vw,14px);
  line-height:1.02;
  font-weight:900;
  text-transform:uppercase;
  text-shadow:0 1px 2px #000;
}
.vortice-battle-vote{
  margin:0 3px 4px!important;
  width:calc(100% - 6px)!important;
  min-height:36px;
  border-radius:9px!important;
  border:1px solid #6beaff!important;
  background:linear-gradient(180deg,#08c7f2,#0067da)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 15px rgba(0,174,255,.30);
  color:#fff!important;
  font-size:clamp(10px,1vw,16px)!important;
  line-height:1!important;
  font-weight:900!important;
}
.vortice-battle-count{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:4px;
  min-height:28px;
  margin:0 5px;
  padding:3px 7px;
  border:1px solid rgba(41,182,246,.48);
  border-radius:8px;
  background:rgba(0,11,31,.94);
  color:#fff;
  font-size:clamp(8px,.78vw,12px);
  font-weight:900;
}
.vortice-battle-count b{color:#3ae7ff;font-size:1.12em;text-align:left}
.vortice-battle-count i{display:none;color:#8de8ff;font-style:normal}
.vortice-game.has-arena>.vortice-game-foot{
  margin:0;
  padding:9px 12px;
  border-top:1px solid rgba(41,182,246,.20);
  background:#020b1d;
}
@media(max-width:980px) and (min-width:701px){
  .vortice-battle-fighters{top:27%;left:.8%;right:.8%;gap:.25%}
  .vortice-battle-sprite-wrap{padding:7% 10% 2%}
  .vortice-battle-sprite{width:69%;max-width:126px}
  .vortice-battle-name{min-height:38px;font-size:8px}
  .vortice-battle-vote{min-height:31px;font-size:10px!important}
  .vortice-battle-count{font-size:8px;padding:2px 4px}
}
@media(max-width:700px){
  .vortice-game.has-arena{border-radius:14px}
  .vortice-battle-stage{
    aspect-ratio:auto;
    padding-top:42vw;
    background-size:100% auto;
    background-position:center top;
    background-color:#031127;
    border-radius:13px 13px 0 0;
    overflow:visible;
  }
  .vortice-battle-stage:after{
    background:linear-gradient(180deg,transparent 0 13%,rgba(2,11,29,.18) 25%,rgba(2,11,29,.96) 46%,#020b1d 100%);
  }
  .vortice-battle-fighters{
    position:relative;
    inset:auto;
    padding:0 8px 10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    align-items:start;
    overflow:visible;
  }
  .vortice-battle-slot{
    height:auto;
    padding:8px 6px 6px;
    border:1px solid rgba(41,182,246,.32);
    border-radius:12px;
    background:rgba(2,11,29,.82);
    overflow:visible;
  }
  .vortice-battle-sprite-wrap{
    flex:none;
    height:190px;
    padding:12px 18px 4px;
    overflow:visible;
  }
  .vortice-battle-sprite{width:min(70%,118px);max-width:none}
  .vortice-battle-name{min-height:39px;margin:2px 0 5px;font-size:10px}
  .vortice-battle-vote{margin:0 0 5px!important;width:100%!important;min-height:34px;font-size:11px!important}
  .vortice-battle-count{margin:0;min-height:27px;font-size:9px}
}