/* 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;
}
.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 */
#splash .bg-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#splash .splash-text{position:absolute;top:24%;left:50%;transform:translateX(-50%);text-align:center;z-index:5}
#splash .splash-text .name{
  font-family:'Sora',sans-serif;
  font-size:5.5vw;font-weight:800;letter-spacing:3px;margin-bottom:1vw;
  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:1.8vw;letter-spacing:8px;opacity:.85;font-weight:600;
  color:#F2D811;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(22px);opacity:0}
.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:62%;
  max-width:1100px;
  background:rgba(20,8,40,.92);
  border:3px solid #F39C12;
  border-radius:22px;
  padding:1.4vw 2vw;
  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:'Sora',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:'Manrope',sans-serif;
  font-size:1.35vw;
  line-height:1.5;
  color:#fff;
  min-height:4vw;
}
.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}
#scene3 .video-placeholder{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60%;aspect-ratio:16/9;
  background:linear-gradient(180deg,#1a0d3a 0%,#2d1b5e 100%);
  border:4px solid #F39C12;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 60px rgba(243,156,18,.4);
  z-index:5;
}
#scene3 .video-placeholder .label{
  position:absolute;top:6%;left:6%;
  background:rgba(0,0,0,.6);color:rgba(255,255,255,.85);
  padding:.5vw 1vw;border-radius:.4vw;font-size:.95vw;font-family:monospace;letter-spacing:1px;
}
#scene3 .video-placeholder .icon{
  width:18%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.15);border:3px solid #F39C12;
  display:flex;align-items:center;justify-content:center;
}
#scene3 .video-placeholder .icon svg{width:50%;height:50%;fill:#F39C12;margin-left:6%}

/* 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:60%;
  background:rgba(45,27,94,.96);
  border:3px solid #F39C12;border-radius:24px;
  padding:3% 4%;text-align:center;z-index:5;
  box-shadow:0 0 80px rgba(243,156,18,.4);
}
#scene4 .game-title{font-family:'Sora',sans-serif;font-size:1.4vw;font-weight:700;color:#F2D811;letter-spacing:3px;margin-bottom:1.2vw}
#scene4 .game-name{
  font-family:'Sora',sans-serif;font-size:3.5vw;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;
  margin-bottom:2.5vw;
}
#scene4 .placeholder{font-size:1vw;opacity:.6;margin-bottom:2vw;font-family:monospace}
#scene4 .test-btns{display:flex;gap:2vw;justify-content:center}
#scene4 .test-btns button{
  padding:1vw 3vw;font-size:1.1vw;font-weight:700;
  border:2px solid #fff;border-radius:12px;cursor:pointer;
  font-family:'Sora',sans-serif;letter-spacing:1px;
}
#scene4 .test-btns .win{background:#7ED957;color:#fff;border-color:#7ED957}
#scene4 .test-btns .lose{background:#E24B4A;color:#fff;border-color:#E24B4A}
#scene4 .test-btns button:hover{filter:brightness(1.1)}
#scene4 .test-btns button:active{transform:scale(.96)}

/* 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;
  }
}