/* ============================================================
   DuoDuo Beautify Layer — modern motion & material polish
   Loaded LAST: refines the existing design, never breaks it.
   Techniques: aurora mesh, gradient text, glassmorphism,
   scroll-reveal, 3D tilt + glare, ripple, magnetic buttons,
   springy dock, mission shimmer, custom scrollbar, sparkles.
   ============================================================ */

/* ---------- 1. Aurora mesh background ---------- */
.sky::before,
.sky::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .52;
  will-change: transform;
  z-index: -1;
  pointer-events: none;
}
.sky::before {
  width: 56vmax;
  height: 56vmax;
  left: -20vmax;
  top: -18vmax;
  background: radial-gradient(circle at 32% 30%, rgba(255, 216, 97, .55), rgba(255, 159, 89, .2) 46%, transparent 70%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
.sky::after {
  width: 50vmax;
  height: 50vmax;
  right: -18vmax;
  bottom: -16vmax;
  background: radial-gradient(circle at 60% 40%, rgba(102, 188, 236, .48), rgba(182, 169, 239, .24) 48%, transparent 72%);
  animation: auroraDrift 34s ease-in-out infinite alternate-reverse;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vmax, -4vmax, 0) scale(1.12); }
  100% { transform: translate3d(-4vmax, 5vmax, 0) scale(.94); }
}
body {
  background:
    radial-gradient(circle at 10% 6%, rgba(255, 215, 97, .32), transparent 26rem),
    radial-gradient(circle at 95% 22%, rgba(102, 188, 236, .2), transparent 25rem),
    linear-gradient(160deg, #fffdf4 0%, #f4fbff 47%, #fff4f8 100%);
}

/* ---------- 2. Animated gradient text ---------- */
.hero h1 span {
  background: linear-gradient(100deg, #ff7285, #ff9f59 28%, #ffd861 52%, #ff9f59 74%, #ff7285);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientShift 7s linear infinite;
}
@keyframes gradientShift {
  to { background-position: 220% center; }
}
.stat b,
.cp-stat b,
.fun-game-start b,
.fun-game-end b {
  background: linear-gradient(120deg, #ff7285, #ff9f59 55%, #ffd861);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- 3. Glass + glow cards ---------- */
.panel {
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.fun-cartoon-card:hover,
.cp-card:hover,
.fun-card:hover,
.role:hover,
.fun-abc-tile:hover {
  box-shadow:
    0 24px 48px rgba(66, 76, 104, .2),
    0 0 0 1px rgba(255, 255, 255, .9),
    0 0 28px rgba(255, 159, 89, .28);
}
.fun-cartoon-card,
.cp-card,
.fun-card,
.role,
.fun-abc-tile {
  transition:
    transform .22s cubic-bezier(.2, .8, .25, 1),
    box-shadow .25s ease;
}

/* ---------- 4. 3D tilt + glare ---------- */
.fun-cartoon-grid,
.cp-grid,
.fun-game-grid {
  perspective: 1200px;
}
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 42%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}
.tilt-on .tilt-glare,
.tilt:hover .tilt-glare {
  opacity: 1;
}

/* ---------- 5. Scroll reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition:
    opacity .7s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms),
    transform .7s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
.rv.rv-in {
  opacity: 1;
  transform: none;
}
.rv-in .fun-cartoon-card,
.rv-in .fun-abc-tile,
.rv-in .fun-game-grid > *,
.rv-in .cp-grid > *,
.rv-in .role {
  animation: cardIn .55s cubic-bezier(.2, .8, .25, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 6. Buttons: ripple + press + sheen ---------- */
.primary,
.secondary,
.cp-btn,
.icon-btn,
.fun-chip,
.cp-chip,
.word-tab,
.ios-dock button {
  position: relative;
  overflow: hidden;
}
.ripple-ink {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  transform: scale(0);
  animation: rippleAnim .55s ease-out forwards;
  pointer-events: none;
  z-index: 2;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}
.primary:active,
.secondary:active,
.cp-btn:active,
.icon-btn:active {
  transform: translateY(1px) scale(.97);
}
.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .75) 50%, transparent 60%);
  transform: translateX(-130%);
  pointer-events: none;
}
.primary:hover::after {
  animation: sheen .9s ease;
}
@keyframes sheen {
  to { transform: translateX(130%); }
}

/* ---------- 7. Magnetic buttons ---------- */
.magnetic {
  translate: var(--mx, 0px) var(--my, 0px);
  transition:
    translate .22s cubic-bezier(.2, .8, .25, 1),
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}
.magnetic:active {
  transform: translateY(1px) scale(.97);
}

/* ---------- 8. Springy dock ---------- */
.ios-dock {
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
}
.ios-dock button {
  transition:
    transform .28s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .25s ease,
    background .2s ease;
}
.ios-dock button:hover {
  transform: translateY(-4px);
}
.ios-dock button:active {
  transform: translateY(0) scale(.9);
}

/* ---------- 9. Mission shimmer + reward pulse ---------- */
.mission {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .96), rgba(255, 247, 232, .94)) padding-box,
    linear-gradient(120deg, #ffd861, #ff7285, #66bcec, #77d6b1, #ffd861) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 2px solid transparent;
  animation: missionBorder 9s linear infinite;
}
@keyframes missionBorder {
  to { background-position: 0 0, 300% 0; }
}
.mission-icon {
  animation: missionPop 3.2s ease-in-out infinite;
}
@keyframes missionPop {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.14) rotate(3deg); }
}
.mission-reward {
  animation: rewardPulse 2.6s ease-in-out infinite;
}
@keyframes rewardPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(255, 216, 97, .22); }
  50%      { box-shadow: 0 9px 28px rgba(255, 216, 97, .58); }
}

/* ---------- 10. Emoji wiggle ---------- */
.fun-cartoon-emoji,
.role-emoji,
.fun-abc-emoji {
  display: inline-block;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.fun-cartoon-card:hover .fun-cartoon-emoji,
.role:hover .role-emoji,
.fun-abc-tile:hover .fun-abc-emoji {
  transform: scale(1.22) rotate(-7deg);
}

/* ---------- 11. Sparkles + tap burst ---------- */
.sparkle {
  position: absolute;
  color: var(--yellow);
  pointer-events: none;
  opacity: 0;
  animation: sparkleFloat 9s ease-in-out infinite;
}
@keyframes sparkleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) rotate(0) scale(.6); }
  22%      { opacity: .9; }
  52%      { transform: translateY(-20px) rotate(22deg) scale(1); }
  80%      { opacity: .45; }
}
.burst-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  animation: burstAnim .7s ease-out forwards;
}
@keyframes burstAnim {
  to { transform: translate(var(--bx, 0), var(--by, 0)) scale(0); opacity: 0; }
}

/* ---------- 12. Toast spring ---------- */
.toast.show {
  animation: toastIn .38s cubic-bezier(.2, .9, .3, 1.35);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 13. Custom scrollbar ---------- */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffd861, #ff9f59);
  border-radius: 99px;
  border: 3px solid #fffaf0;
}

/* ---------- 14. Safety: reduced motion & touch ---------- */
@media (prefers-reduced-motion: reduce) {
  .sky::before,
  .sky::after,
  .hero h1 span,
  .mission,
  .mission-icon,
  .mission-reward,
  .sparkle {
    animation: none !important;
  }
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
  .ripple-ink,
  .burst-dot {
    display: none;
  }
}
@media (hover: none), (pointer: coarse) {
  .tilt {
    transform: none !important;
  }
  .primary::after {
    display: none;
  }
}