/* ===== Lapisan efek ===== */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }
.fx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 69; opacity: 0; }

.float-text {
  position: fixed; z-index: 71; pointer-events: none;
  font-family: var(--display); font-size: clamp(2.2rem, 10vw, 3.6rem); line-height: 1;
  color: #fff;
  -webkit-text-stroke: 4px #0b0726; paint-order: stroke fill;
  text-shadow: 0 4px 0 #0b0726;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.float-text.gold { color: var(--gold); }
.float-text.combo-float { font-size: clamp(1rem, 4.4vw, 1.4rem); color: var(--cyan); -webkit-text-stroke-width: 3px; }
.float-text.xp { color: var(--lime); font-size: 1.6rem; }

/* Banner milestone / rekor */
.fx-banner {
  position: fixed; inset: 0; z-index: 68; pointer-events: none;
  display: grid; place-items: center;
}
.fx-banner-rays {
  position: absolute; width: 180vmax; height: 180vmax; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 122, 0.22) 0 7deg, transparent 7deg 16deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 40%);
  mask-image: radial-gradient(circle, #000 0%, transparent 40%);
  animation: banner-rays 1.7s ease-out both;
}
@keyframes banner-rays { from { transform: translate(-50%, -50%) rotate(0) scale(0.4); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-50%, -50%) rotate(40deg) scale(1); opacity: 0.8; } }
.fx-banner-plate {
  position: relative; display: grid; justify-items: center;
  padding: 14px 40px 18px;
  background: linear-gradient(180deg, var(--red-hi), var(--red));
  border: 4px solid var(--red-deep);
  border-radius: 18px;
  box-shadow: 0 8px 0 var(--red-deep), 0 0 60px rgba(236, 42, 63, 0.7);
  transform: rotate(-4deg);
  animation: banner-in 0.6s var(--ease-back) both;
}
.fx-banner strong {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 15vw, 6rem); line-height: 1;
  color: var(--gold);
  -webkit-text-stroke: 4px #2a1100; paint-order: stroke fill;
  text-shadow: 0 6px 0 #2a1100;
}
.fx-banner span { font-family: var(--display); font-size: clamp(1.2rem, 5vw, 1.8rem); color: #fff; text-shadow: 0 3px 0 var(--red-deep); letter-spacing: 0.06em; }
.fx-banner.m2 .fx-banner-plate { background: linear-gradient(180deg, #5fd0ff, #0a8ea8); border-color: #034a5a; box-shadow: 0 8px 0 #034a5a, 0 0 60px rgba(46, 232, 255, 0.8); }
.fx-banner.m3 .fx-banner-plate, .fx-banner.m4 .fx-banner-plate, .fx-banner.record .fx-banner-plate { background: linear-gradient(180deg, var(--fire-hi), var(--fire)); border-color: #8a2a00; box-shadow: 0 8px 0 #8a2a00, 0 0 80px rgba(255, 122, 26, 0.9); }
.fx-banner.out { animation: banner-out 0.4s ease-in forwards; }
@keyframes banner-in { 0% { transform: rotate(-4deg) scale(3); opacity: 0; } 60% { transform: rotate(-4deg) scale(0.9); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); } }
@keyframes banner-out { to { opacity: 0; transform: scale(1.3); } }

/* Transisi layar: wipe diagonal tiga lapis */
.wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.wipe i {
  position: absolute; top: -20%; bottom: -20%; left: -10%; width: 140%;
  transform: translateX(-130%) skewX(-18deg);
}
.wipe i:nth-child(1) { background: var(--gold); }
.wipe i:nth-child(2) { background: var(--red); }
.wipe i:nth-child(3) { background: var(--night-2); }
.wipe.go i { animation: wipe 0.62s var(--ease-snap) both; }
.wipe.go i:nth-child(2) { animation-delay: 0.04s; }
.wipe.go i:nth-child(3) { animation-delay: 0.08s; }
@keyframes wipe { 0% { transform: translateX(-10%) skewX(-18deg); } 100% { transform: translateX(130%) skewX(-18deg); } }

/* ===== Maskot pelatih ===== */
.coach { position: relative; display: grid; justify-items: center; user-select: none; -webkit-user-select: none; }
.coach-body { position: relative; width: 100%; }
.coach-rig { position: relative; transform-origin: 50% 100%; animation: breathe 2.6s ease-in-out infinite; }
.coach-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5)); pointer-events: none; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1) rotate(0); } 50% { transform: scale(1.025, 0.975) rotate(-1deg); } }
.coach[data-pose='pushup'] .coach-rig { animation: mascot-pushup 1.4s ease-in-out infinite; }
.coach-shadow {
  position: absolute; left: 15%; right: 15%; bottom: -2%; height: 10%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  z-index: -1; animation: shadow-breathe 2.6s ease-in-out infinite;
}
@keyframes shadow-breathe { 50% { transform: scaleX(0.92); opacity: 0.8; } }
.coach-aura {
  position: absolute; inset: 8% 10% 4%; border-radius: 50%; z-index: -1; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 197, 49, 0.55), transparent);
  transition: opacity 0.3s;
}
.coach[data-mood='hype'] .coach-aura { opacity: 1; background: radial-gradient(closest-side, rgba(255, 122, 26, 0.8), rgba(236, 42, 63, 0.3) 60%, transparent); animation: aura 0.3s ease-in-out infinite alternate; }
.coach[data-mood='celebrate'] .coach-aura { opacity: 1; animation: aura 0.5s ease-in-out infinite alternate; }
.coach[data-mood='worried'] .coach-aura { opacity: 0.8; background: radial-gradient(closest-side, rgba(46, 232, 255, 0.4), transparent); }
@keyframes aura { from { transform: scale(0.95); } to { transform: scale(1.1); } }

/* Gerak reaksi (squash & stretch) */
.coach-rig.a-jump { animation: c-jump 0.6s var(--ease-out); }
.coach-rig.a-jump-big { animation: c-jump-big 0.9s var(--ease-out) 2; }
.coach-rig.a-bounce { animation: c-bounce 0.5s var(--ease-back) 2; }
.coach-rig.a-wobble { animation: c-wobble 0.7s ease-in-out; }
.coach-rig.a-tilt { animation: c-tilt 1s ease-in-out; }
.coach-rig.a-squash { animation: c-squash 0.32s var(--ease-back); }
@keyframes c-jump { 0% { transform: scale(1, 1); } 15% { transform: scale(1.15, 0.85); } 45% { transform: translateY(-22%) scale(0.92, 1.1); } 75% { transform: translateY(0) scale(1.1, 0.9); } 100% { transform: scale(1, 1); } }
@keyframes c-jump-big { 0% { transform: scale(1, 1); } 15% { transform: scale(1.2, 0.8); } 45% { transform: translateY(-35%) scale(0.9, 1.12) rotate(-8deg); } 60% { transform: translateY(-35%) rotate(8deg); } 80% { transform: translateY(0) scale(1.12, 0.88); } 100% { transform: scale(1, 1); } }
@keyframes c-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10%) scale(1.04, 0.97); } }
@keyframes c-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
@keyframes c-tilt { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-6deg) translateX(-3%); } }
@keyframes c-squash { 0% { transform: scale(1, 1); } 40% { transform: scale(1.12, 0.86); } 100% { transform: scale(1, 1); } }

/* Overlay efek di sekitar maskot */
.coach-fx { position: absolute; inset: 0; pointer-events: none; }
.cfx { position: absolute; width: 20%; height: auto; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4)); }
.cfx.sweat { width: 11%; animation: sweat 0.9s ease-in infinite; }
.cfx.sweat:nth-child(1) { top: 10%; right: 18%; }
.cfx.sweat:nth-child(2) { top: 22%; left: 16%; animation-delay: 0.45s; width: 8%; }
@keyframes sweat { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 30% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(60%) scale(0.8); opacity: 0; } }
.cfx.star { width: 15%; animation: twinkle 0.8s ease-in-out infinite alternate; }
.cfx.star:nth-of-type(1) { top: 2%; left: 4%; }
.cfx.star:nth-of-type(2) { top: 6%; right: 2%; animation-delay: 0.25s; width: 11%; }
.cfx.star:nth-of-type(3) { top: 40%; right: -4%; animation-delay: 0.5s; width: 12%; }
@keyframes twinkle { from { transform: scale(0.6) rotate(-20deg); opacity: 0.6; } to { transform: scale(1.15) rotate(20deg); opacity: 1; } }
.cfx.flame { width: 18%; bottom: 4%; animation: flame 0.35s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.cfx.flame:nth-of-type(1) { left: 0; }
.cfx.flame:nth-of-type(2) { right: 0; animation-delay: 0.15s; }
@keyframes flame { from { transform: scale(0.9, 0.9) rotate(-5deg); } to { transform: scale(1.1, 1.25) rotate(5deg); } }
.cfx.bolt { width: 13%; animation: bolt 0.5s steps(2) infinite; }
.cfx.bolt:nth-of-type(1) { top: 4%; left: 8%; }
.cfx.bolt:nth-of-type(2) { top: 12%; right: 6%; animation-delay: 0.25s; }
@keyframes bolt { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.2) rotate(10deg); } }
.cfx.medal { width: 22%; top: 34%; left: 39%; animation: medal-in 0.6s var(--ease-back) both, medal-swing 1.2s ease-in-out 0.6s infinite alternate; transform-origin: 50% 0; }
@keyframes medal-in { from { transform: translateY(-80%) scale(0); } to { transform: none; } }
@keyframes medal-swing { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.cfx.dumbbell { width: 30%; top: -4%; left: 35%; animation: lift 0.8s ease-in-out infinite alternate; }
@keyframes lift { from { transform: translateY(0); } to { transform: translateY(-30%); } }

/* Speech bubble */
.coach-bubble {
  position: absolute; bottom: 92%; left: 50%; z-index: 3;
  min-width: 140px; max-width: 220px;
  padding: 8px 12px;
  border-radius: 16px;
  background: #fff; color: #1b1040;
  border: 3px solid #0b0726;
  box-shadow: 0 4px 0 #0b0726;
  font-weight: 800; font-size: 0.92rem; line-height: 1.25; text-align: center;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 0.3s var(--ease-back), opacity 0.2s;
  pointer-events: none;
}
.coach-bubble::after {
  content: ''; position: absolute; bottom: -12px; left: 50%; width: 18px; height: 14px; margin-left: -9px;
  background: #fff; border: 3px solid #0b0726; border-top: 0; border-left: 0;
  transform: skewX(30deg) rotate(30deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.coach-bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }
.hud-coach .coach-bubble { transform: scale(0); }
.hud-coach .coach-bubble.show { transform: scale(1); }
.coach-bubble.warn { background: #fff3c2; }

/* ===== Gerak dikurangi ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .world .mote, .world .beam, .float-orn, .count-rays, .splash-rays, .result-rays { display: none; }
  .wipe { display: none; }
  /* yang tetap perlu terlihat setelah animasi masuk */
  .star-slot.lit .orn.full { opacity: 1; transform: none; }
}