/* Play button bottom-right */
.play-btn{
  position:absolute;
  right:2.5%;
  bottom:5%;
  width:7vw;
  min-width:90px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
}
.play-btn img{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}
.play-btn.show{
  opacity:1;
  pointer-events:auto;
  animation:
    play-in .5s cubic-bezier(.4, 1.6, .55, 1) forwards,
    play-pulse 1.6s ease-in-out .55s infinite;
}
@media (hover:hover) and (pointer:fine){.play-btn:hover{filter:brightness(1.12)}}

@keyframes play-in{
  0%   {transform:scale(.3) rotate(-15deg)}
  60%  {transform:scale(1.18) rotate(4deg)}
  100% {transform:scale(1) rotate(0)}
}
@keyframes play-pulse{
  0%,100%{
    transform:scale(1) rotate(0);
    filter:drop-shadow(0 0 0 rgba(243,156,18,0));
  }
  50%{
    transform:scale(1.08) rotate(-2deg);
    filter:drop-shadow(0 0 22px rgba(243,156,18,.75));
  }
}

/* Internal scenes */
.lvl-scene{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.lvl-scene.active{opacity:1;pointer-events:auto}

/* SCENE 1: SPLASH — 3-layer bg + moon + up */
#splash .splash-bg,
#splash .splash-up,
#splash .splash-moon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#splash .splash-bg{z-index:1;object-fit:cover}
#splash .splash-moon{z-index:2;pointer-events:none}
#splash .splash-up{z-index:3;object-fit:cover;pointer-events:none}

#splash .splash-text{position:absolute;top:24%;left:50%;transform:translateX(-50%);text-align:center;z-index:5}
#splash .splash-text .name{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:7vw;font-weight:900;letter-spacing:5px;margin-bottom:.3vw;
  color:#fff;
  -webkit-text-stroke:.26vw #fff;
  paint-order:stroke fill;
  background:linear-gradient(90deg, #E24B4A, #FF6B6B, #ff8a00, #E24B4A, #FF6B6B);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradientShift 4s ease infinite;
}
#splash .splash-text .label{
  font-size:2.6vw;letter-spacing:8px;font-weight:700;
  color:#F2D811;
  -webkit-text-stroke:.16vw #fff;
  paint-order:stroke fill;
  text-shadow:3px 3px 0 #2A1145, 0 0 30px rgba(255,200,50,.6);
}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

#splash .splash-btn-wrap{
  position:absolute;
  bottom:12%;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
}

/* SCENE 2: HUB with monster */
#scene2 .bg-layer-svg,
#scene2 .up-layer-svg{position:absolute;inset:0;width:100%;height:100%}
#scene2 .bg-layer-svg{z-index:1}
#scene2 .up-layer-svg{z-index:5;pointer-events:none}

.hero{
  position:absolute;
  width:28%;height:auto;
  left:50%;bottom:20%;
  transform-origin:50% 100%;
  animation:hero-breathe 3.4s ease-in-out infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes hero-breathe{
  0%,100%{transform:translateX(-50%) scale(1,1)}
  50%   {transform:translateX(-50%) scale(1.018,1.035)}
}

.fog{position:absolute;pointer-events:none;filter:blur(18px);opacity:0;max-width:25%;max-height:15%}
.fog.behind{z-index:2}
.fog.front{z-index:4}
@keyframes fog-drift{
  0%{left:-55%;opacity:0}
  10%{opacity:1}
  88%{opacity:1}
  100%{left:115%;opacity:0}
}

.fog.wolf-breath{
  position:absolute;
  pointer-events:none;
  filter:blur(14px);
  z-index:3;
  width:10%;
  height:9%;
  background:radial-gradient(ellipse 60% 70% at 50% 50%, rgba(180,255,200,.92), transparent 70%);
  opacity:0;
}
.fog.wolf-breath.wb1{animation:wolf-breath-a 5.5s ease-out infinite}
.fog.wolf-breath.wb2{animation:wolf-breath-b 6.5s ease-out infinite;animation-delay:-2s}
.fog.wolf-breath.wb3{animation:wolf-breath-c 5s   ease-out infinite;animation-delay:-3.5s}
.fog.wolf-breath.wb4{animation:wolf-breath-d 7s   ease-out infinite;animation-delay:-1s}
@keyframes wolf-breath-a{
  0%   {left:46%;bottom:15%;opacity:0;transform:scale(.35)}
  20%  {opacity:1}
  100% {left:34%;bottom:38%;opacity:0;transform:scale(1.5)}
}
@keyframes wolf-breath-b{
  0%   {left:51%;bottom:14%;opacity:0;transform:scale(.4)}
  20%  {opacity:1}
  100% {left:64%;bottom:40%;opacity:0;transform:scale(1.6)}
}
@keyframes wolf-breath-c{
  0%   {left:48%;bottom:17%;opacity:0;transform:scale(.4)}
  18%  {opacity:.95}
  100% {left:41%;bottom:44%;opacity:0;transform:scale(1.4)}
}
@keyframes wolf-breath-d{
  0%   {left:52%;bottom:16%;opacity:0;transform:scale(.45)}
  18%  {opacity:.95}
  100% {left:58%;bottom:42%;opacity:0;transform:scale(1.5)}
}

/* MONSTER SPEECH BUBBLE */
.speech-bubble{
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  width:40vw;
  background:rgba(20,8,40,.92);
  border:3px solid #F39C12;
  border-radius:1.15vw;
  padding:1.2vw 1.6vw;
  z-index:50;
  opacity:0;
  transition:opacity .4s,transform .4s;
  pointer-events:none;
  box-shadow:0 0 60px rgba(243,156,18,.3);
}
.speech-bubble.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.speech-bubble::after{
  content:"";
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  border:14px solid transparent;
  border-bottom-color:#F39C12;
  border-top:0;
}
.speech-bubble .who{
  display:block;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:.95vw;
  font-weight:700;
  color:#7ED957;
  letter-spacing:2.5px;
  margin-bottom:.5vw;
  text-transform:uppercase;
}
.speech-bubble .text{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:1.25vw;
  line-height:1.5;
  color:#fff;
  min-height:3vw;
}
.speech-bubble .cursor{
  display:inline-block;
  width:.5vw;height:1.2vw;
  background:#F2D811;
  margin-left:3px;
  vertical-align:middle;
  animation:caret-blink .8s steps(2) infinite;
}
@keyframes caret-blink{50%{opacity:0}}

/* SCENE 3: TEACHER VIDEO */
#scene3 .bg-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Занимаем область НИЖЕ шапки: иначе на низких экранах ролик уезжает под неё.
   justify-content центрирует связку «экран + кнопки» по видимой части сцены. */
.video-group{
  /* высота панели кнопок + «Повторить» + два зазора */
  --vg-gap: clamp(8px, 1.4vw, 22px);
  --vg-ctrl: calc(clamp(46px, 4vw, 64px) + 44px + 2 * var(--vg-gap));
  position:absolute;
  top:8%;              /* высота #header-bar */
  bottom:2%;
  left:0;right:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--vg-gap);
  z-index:5;
}
.video-wrap{
  position:relative;
  flex:0 0 auto;
  /* Сцена сама 16:9, поэтому «90% её высоты» = 50.625% её ширины.
     Отнимаем место под кнопки и переводим обратно в ширину 16:9 —
     так пропорция ролика не ломается даже на низких экранах. */
  width:min(65%, calc((50.625% - var(--vg-ctrl)) * 16 / 9));
  aspect-ratio:16/9;
  background:#000;
  border:3px solid #F39C12;border-radius:1vw;
  overflow:hidden;
  box-shadow:0 0 60px rgba(243,156,18,.4);
}
.teacher-video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.video-play-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.35);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s;
}
.video-play-overlay img{
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 0 20px rgba(243,156,18,.6));
  transition:transform .2s;
}
@media (hover:hover) and (pointer:fine){.video-play-overlay:hover img{transform:scale(1.05)}}
.video-play-overlay.hidden{opacity:0;pointer-events:none}

/* панель управления роликом */
.video-controls{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px, 1.2vw, 20px);
  flex:0 0 auto;
}
.vc-btn{
  position:relative;
  width:clamp(38px, 3.2vw, 52px);
  height:clamp(38px, 3.2vw, 52px);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(93,46,143,.7);
  color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .1s cubic-bezier(0.23, 1, 0.32, 1);
}
.vc-btn::before{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.vc-btn svg{width:58%;height:58%;fill:#fff;pointer-events:none}
.vc-btn.vc-main{
  width:clamp(46px, 4vw, 64px);
  height:clamp(46px, 4vw, 64px);
  border-color:#F39C12;
  background:rgba(243,156,18,.28);
}
.vc-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .vc-btn:hover{background:rgba(255,255,255,.2)}
}
.vc-main .ico-play{display:none}
.vc-main.is-paused .ico-pause{display:none}
.vc-main.is-paused .ico-play{display:block}
@media (prefers-reduced-motion:reduce){
  .vc-btn{transition:background .2s ease}
  .vc-btn:active{transform:none}
}

/* кнопка «Повторить» под роликом */
.video-replay{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:44px;min-width:44px;
  padding:.55em 1.6em;
  font-size:clamp(12px, 1.15vw, 20px);
  font-weight:700;
  letter-spacing:.06em;
  color:#fff;
  background:rgba(93,46,143,.7);
  border:2px solid rgba(255,255,255,.35);
  border-radius:999px;
  cursor:pointer;
  opacity:0;
  transform:translateY(8px) scale(.96);
  pointer-events:none;
  transition:
    opacity .25s cubic-bezier(0.23, 1, 0.32, 1),
    transform .1s cubic-bezier(0.23, 1, 0.32, 1),
    background .2s ease;
}
.video-replay svg{width:1.35em;height:1.35em;fill:currentColor;flex-shrink:0}
.video-replay.show{
  opacity:1;
  transform:none;
  pointer-events:auto;
  animation:replay-pulse 2s ease-in-out .3s infinite;
}
.video-replay.show:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .video-replay.show:hover{background:rgba(255,255,255,.2)}
}
@media (prefers-reduced-motion:reduce){
  .video-replay{transform:none;transition:opacity .25s ease,background .2s ease}
  .video-replay.show{animation:none}
  .video-replay.show:active{transform:none}
}

/* SCENE 4: GAME */
#scene4 .bg-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65)}
#scene4 .game-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72%;
  background:rgba(45,27,94,.96);
  border:3px solid #F39C12;border-radius:1.25vw;
  padding:1.4% 2.5%;text-align:center;z-index:5;
  box-shadow:0 0 80px rgba(243,156,18,.4);
}
.game-header{
  display:flex;align-items:center;gap:1.2vw;
  margin-bottom:.8vw;
}
.game-header-text{display:flex;flex-direction:column;align-items:flex-start}
#scene4 .game-title{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.1vw;font-weight:700;
  color:#F2D811;letter-spacing:2px;
}
#scene4 .game-name{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:2vw;font-weight:800;
  background:linear-gradient(90deg,#E24B4A,#FF6B6B,#ff8a00,#E24B4A);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradientShift 4s ease infinite;
}

/* GAME 1: КАРТИНКИ */
.round-progress{
  margin-left:auto;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.2vw;font-weight:700;
  color:rgba(255,255,255,.6);letter-spacing:2px;white-space:nowrap;
}
.g1-replay{
  width:3.2vw;height:3.2vw;min-width:34px;min-height:34px;
  border-radius:50%;flex-shrink:0;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(93,46,143,.7);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .15s;
  animation:replay-pulse 2s ease-in-out infinite;
;min-width:44px;min-height:44px}
.g1-replay svg{width:55%;height:55%;fill:#fff}
@media (hover:hover) and (pointer:fine){.g1-replay:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}}
@keyframes replay-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(243,156,18,.5)}
  50%{box-shadow:0 0 0 8px rgba(243,156,18,0)}
}
.g1-options{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2vw}
.g1-option{
  background:linear-gradient(180deg,rgba(45,27,94,.9),rgba(30,15,65,.95));
  border:3px solid rgba(255,255,255,.3);
  border-radius:1vw;
  cursor:pointer;
  text-align:center;
  padding:.6vw;
  transition:filter .15s,transform .15s,border-color .2s;
  display:flex;flex-direction:column;align-items:center;gap:.4vw;
}
@media (hover:hover) and (pointer:fine){.g1-option:hover{filter:brightness(1.1);transform:scale(1.04);border-color:rgba(255,255,255,.6)}}
.g1-option:active{transform:scale(.97)}
.g1-opt-img{
  width:100%;aspect-ratio:1;
  object-fit:cover;border-radius:.6vw;
  background:rgba(255,255,255,.08);
  display:block;
}
.g1-opt-char{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:800;font-size:1.8vw;
  color:#F2D811;
  text-shadow:1px 1px 0 #2A1145;
  padding-bottom:.2vw;
}
.g1-option.correct{
  border-color:#7ED957;
  background:linear-gradient(180deg,rgba(126,217,87,.3),rgba(91,174,61,.4));
  animation:pulse-correct .5s ease;
}
.g1-option.correct .g1-opt-img{box-shadow:0 0 20px rgba(126,217,87,.6)}
.g1-option.wrong{
  border-color:#E24B4A;
  background:linear-gradient(180deg,rgba(226,75,74,.3),rgba(178,56,56,.4));
  animation:shake-wrong .5s ease;
}
.g1-option.wrong .g1-opt-img{box-shadow:0 0 20px rgba(226,75,74,.6)}
@keyframes pulse-correct{
  0%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.08);filter:brightness(1.2)}
  100%{transform:scale(1);filter:brightness(1)}
}
@keyframes shake-wrong{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* RESULT OVERLAY */
.result-overlay{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4vw 2vw;
  min-height:18vw;
}
.result-title{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:3.5vw;font-weight:900;
  background:linear-gradient(90deg,#F2D811,#ff8a00,#F2D811);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradientShift 4s ease infinite;
  margin-bottom:1vw;
}
.result-subtitle{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:1.5vw;font-weight:600;
  color:rgba(255,255,255,.85);
  margin-bottom:2.5vw;
}
.result-btn{--btn-delay:.3s}

/* GAME 2: ПАРОЧКИ */
.g2-meta{
  margin-left:auto;
  display:flex;gap:1.5vw;
}
.g2-stat{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1vw;font-weight:700;
  color:rgba(255,255,255,.7);white-space:nowrap;
}
.g2-stat-label{color:rgba(255,255,255,.45)}
.g2-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.7vw;
  perspective:800px;
}
.match-card{
  aspect-ratio:4/3;
  cursor:pointer;
  position:relative;
}
.match-card-inner{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .5s ease;
  border-radius:.8vw;
}
.match-card.flipped .match-card-inner{transform:rotateY(180deg)}
.face-back,.face-front{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:.8vw;
  display:flex;align-items:center;justify-content:center;
  border:3px solid rgba(255,255,255,.3);
  overflow:hidden;
}
.face-back{
  background:linear-gradient(180deg,#1a0d3a,#2d1b5e);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:2vw;font-weight:800;
  color:rgba(255,255,255,.25);
  z-index:2;
}
.face-front{
  background:linear-gradient(180deg,rgba(45,27,94,.95),rgba(30,15,65,.98));
  transform:rotateY(180deg);
  z-index:1;
}
.match-card-img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.match-card-char{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:2.4vw;font-weight:800;
  color:#F2D811;
  text-shadow:2px 2px 0 #2A1145;
}
.match-card.matched .face-front{
  border-color:#F39C12;
  box-shadow:0 0 20px rgba(243,156,18,.5);
}
.match-card.matched{pointer-events:none;animation:match-glow .6s ease}
@keyframes match-glow{
  0%{filter:brightness(1)}
  50%{filter:brightness(1.3)}
  100%{filter:brightness(1)}
}

/* GAME 3: ПУЗЫРЬКИ */
.game-host{position:absolute;inset:0;z-index:5}
.ci-hud{
  position:absolute;
  top:10%;left:50%;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:1vw;
  background:rgba(45,27,94,.9);
  border:2px solid #F39C12;
  border-radius:.8vw;
  padding:.5vw 1.5vw;
  z-index:10;
  white-space:nowrap;
}
.ci-hud .game-title{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.1vw;font-weight:700;
  color:#F2D811;letter-spacing:2px;
}
.ci-hud .game-name{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.6vw;font-weight:800;
  background:linear-gradient(90deg,#E24B4A,#FF6B6B,#ff8a00,#E24B4A);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradientShift 4s ease infinite;
}
.ci-hud-sep{color:rgba(255,255,255,.3);font-size:1.2vw}
.ci-arena{position:absolute;inset:0;overflow:hidden}
.ci-bubble-wrap{
  position:absolute;
  width:14vw;height:14vw;
  left:0;
  will-change:transform;
  z-index:5;
  animation:ci-float 6s linear forwards;
}
.ci-bubble{
  width:100%;height:100%;
  border-radius:50%;
  background:#fff;
  border:4px solid #F39C12;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s;
}
.ci-bubble-inner{
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;
  animation:ci-bob 2.2s ease-in-out infinite;
}
.ci-bubble-img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.ci-bubble.ci-burst{
  animation:ci-burst-anim .5s ease forwards;
  pointer-events:none;
}
.ci-bubble.ci-wrong{
  border-color:#E24B4A;
  box-shadow:0 0 15px rgba(226,75,74,.5);
  animation:ci-shake .4s ease;
}
@keyframes ci-float{
  0%{transform:translateX(100vw)}
  100%{transform:translateX(-16vw)}
}
@keyframes ci-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes ci-burst-anim{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(1.5);opacity:0}
}
@keyframes ci-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* CONFETTI */
#confetti-container{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:500;
  overflow:visible;
}
.confetti{
  position:absolute;
  width:var(--w,11px);
  height:var(--h,7px);
  background:var(--c,#F2D811);
  border-radius:var(--r,1px);
  pointer-events:none;
  animation:confetti-pop-fall var(--dur,4s) forwards;
  will-change:translate,rotate,opacity;
}
.confetti.left {left:0%;top:55%}
.confetti.right{right:0%;top:55%}
@keyframes confetti-pop-fall{
  0%{
    animation-timing-function:cubic-bezier(.15,.7,.3,1);
    translate:0 0;
    rotate:0deg;
    opacity:1;
  }
  18%{
    animation-timing-function:linear;
    translate:var(--peakX) var(--peakY);
    rotate:calc(var(--rot) * 0.25);
  }
  95%{
    translate:var(--finalX) calc(var(--finalY) - 5vh);
    opacity:1;
  }
  100%{
    translate:var(--finalX) var(--finalY);
    rotate:var(--rot);
    opacity:0;
  }
}