/* ============================================================================
   wipe.css — la cortina de los cambios de pantalla grandes (ui/wipe.js).
   Tres franjas diagonales (dorado, azul, noche) cruzan la pantalla, la estrella
   aparece con todo tapado, y siguen de largo. Nació en PERSONALIZAR.
   ============================================================================ */
.wipe{ position:fixed; inset:0; z-index:45; pointer-events:all; overflow:hidden; }
.wipe i{
  position:absolute; top:-10%; bottom:-10%; left:-45%; width:190%;
  transform:translateX(100%) skewX(-16deg);
  animation:wipeIn .42s cubic-bezier(.75,0,.25,1) forwards;
}
.wipe i:nth-child(1){ background:var(--gold); box-shadow:0 0 60px rgba(255,211,77,.5); }
.wipe i:nth-child(2){ background:#2749c8; animation-delay:.07s; }
.wipe i:nth-child(3){ background:var(--void0); animation-delay:.14s; }
@keyframes wipeIn{ to{ transform:translateX(0) skewX(-16deg); } }
.wipe.out i{ transform:translateX(0) skewX(-16deg); animation:wipeOut .42s cubic-bezier(.75,0,.25,1) forwards; }
.wipe.out i:nth-child(3){ animation-delay:0s; }
.wipe.out i:nth-child(2){ animation-delay:.06s; }
.wipe.out i:nth-child(1){ animation-delay:.12s; }
@keyframes wipeOut{ to{ transform:translateX(-100%) skewX(-16deg); } }
.wipe-mark{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  animation:wipeMarkIn .42s .3s cubic-bezier(.2,1.5,.3,1) both;
}
.wipe-mark svg{
  width:clamp(54px,8vw,92px); height:clamp(54px,8vw,92px); fill:var(--gold);
  filter:drop-shadow(0 0 26px rgba(255,211,77,.65)) drop-shadow(5px 5px 0 rgba(0,0,0,.7));
  animation:wipeStar .9s .3s cubic-bezier(.2,1.2,.3,1) both;
}
.wipe-mark span{
  font-size:clamp(20px,3.2vw,38px); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text); text-shadow:var(--shadow);
}
.wipe.out .wipe-mark{ animation:wipeMarkOut .16s ease-in forwards; }
@keyframes wipeMarkIn{ from{ opacity:0; transform:scale(.6); } }
@keyframes wipeMarkOut{ to{ opacity:0; transform:scale(1.2); } }
@keyframes wipeStar{ from{ transform:rotate(-200deg) scale(.2); } }

/* Lo que queda debajo (#overlay: menú, lobby, final) se va y vuelve con la cortina. */
body.wipe-leaving #overlay > :not(.scrim){ animation:wipeLeave .32s ease-in forwards; }
@keyframes wipeLeave{ to{ opacity:0; transform:scale(.94) translateY(10px); } }
body.wipe-return #overlay > :not(.scrim){ animation:wipeReturn .55s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes wipeReturn{ from{ opacity:0; transform:scale(.94) translateY(18px); } }