/**
 * Club Penguin Coin Reward Notification Banner (Wand CPPS)
 * Optimized for 60fps GPU acceleration and zero main-thread lag.
 * Docked strictly inside #D_F_GameSection.
 */

#wand-coin-notification {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translate3d(-50%, -170%, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  will-change: transform, opacity !important;
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease !important;
  backface-visibility: hidden !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#wand-coin-notification.visible {
  transform: translate3d(-50%, 0, 0) !important;
  opacity: 1 !important;
}

.wand-coin-banner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: linear-gradient(180deg, #ffe552 0%, #f4bf1b 100%) !important;
  border: 3.5px solid #ffffff !important;
  outline: 2.5px solid #dca310 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 2px 2px rgba(255, 255, 255, 0.7) !important;
  padding: 7px 24px 7px 16px !important;
  min-width: 270px !important;
  max-width: 90% !important;
  box-sizing: border-box !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}

.wand-coin-icon-wrapper {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 500px !important;
  flex-shrink: 0 !important;
  /* Shadow is on the static wrapper, allowing GPU layer caching */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) !important;
}

.wand-coin-icon {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  animation: wandCoinSpin 1.3s linear infinite !important;
}

@keyframes wandCoinSpin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.wand-coin-text {
  font-family: 'Burbank Small Bold', ArialRounded, 'Arial Rounded MT Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: #241e17 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
  #wand-coin-notification {
    top: 6px !important;
  }
  .wand-coin-banner {
    padding: 5px 16px 5px 10px !important;
    gap: 8px !important;
    min-width: 210px !important;
    border-width: 2.5px !important;
    outline-width: 2px !important;
  }
  .wand-coin-icon-wrapper {
    width: 32px !important;
    height: 32px !important;
  }
  .wand-coin-icon {
    width: 30px !important;
    height: 30px !important;
  }
  .wand-coin-text {
    font-size: 16px !important;
  }
}

@media (max-height: 550px) {
  #wand-coin-notification {
    top: 5px !important;
  }
  .wand-coin-banner {
    padding: 4px 14px 4px 10px !important;
    gap: 8px !important;
    min-width: 200px !important;
    border-width: 2.5px !important;
    outline-width: 2px !important;
  }
  .wand-coin-icon-wrapper {
    width: 28px !important;
    height: 28px !important;
  }
  .wand-coin-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .wand-coin-text {
    font-size: 15px !important;
  }
}