/* BlessTop Sacred Wish Cards - Magic Styles */
/* Ported from React version with WordPress integration */

/* Five Elements CSS Variables */
:root {
  --wuxing-wood: #22c55e;
  --wuxing-fire: #ef4444;
  --wuxing-earth: #f59e0b;
  --wuxing-metal: #f3f4f6;
  --wuxing-water: #3b82f6;
  --lucky: var(--wuxing-wood);
}

/* 语言切换器容器 */
.language-switcher-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .language-switcher-container {
        top: 10px;
        right: 10px;
    }
}

/* Sparkle animations */
@keyframes sparkle {
  0%, 100% { 
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% { 
    transform: scale(1) rotate(180deg);
    opacity: 1;
  }
}

.sparkle {
  animation: sparkle 1.5s ease-in-out infinite;
}

/* Wish Page Styles */
.wish-page {
  color: #ffdfe9;
  background: 
    radial-gradient(600px 400px at 20% 10%, rgba(255, 215, 0, 0.08), transparent 50%),
    radial-gradient(800px 600px at 80% 30%, rgba(255, 182, 193, 0.12), transparent 60%),
    radial-gradient(1000px 800px at 50% 80%, rgba(255, 192, 203, 0.06), transparent 70%),
    linear-gradient(180deg, #0a0a0a 0%, #1a0f14 50%, #0a0a0a 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 120px;
  position: relative;
  overflow: hidden;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .wish-page {
    padding: 16px 12px 100px;
    min-height: 100vh;
    min-height: 100dvh; /* 动态视口高度，避免移动端地址栏影响 */
  }
}

@media (max-width: 480px) {
  .wish-page {
    padding: 12px 8px 80px;
  }
}

.wish-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(2px 2px at 20px 30px, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 182, 193, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 192, 203, 0.5), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 215, 0, 0.3), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255, 182, 193, 0.4), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: sparkle-float 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sparkle-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
  50% { transform: translateY(-10px) rotate(180deg); opacity: 1; }
}

.wish-top {
  height: 22vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.wish-title {
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: #ffe8f4;
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 0.5),
    0 0 40px rgba(255, 192, 203, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.3);
  animation: title-glow 3s ease-in-out infinite alternate;
}

/* 移动端标题优化 */
@media (max-width: 768px) {
  .wish-title {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .wish-title {
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0.2px;
    padding: 0 12px;
  }
}

@keyframes title-glow {
  0% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 192, 203, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); }
  100% { text-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 192, 203, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); }
}

.wish-subtitle {
  margin-top: 8px;
  font-size: 15px;
  color: #ffeef6;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.wish-input-area {
  height: 28vh;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* 移动端输入区域优化 */
@media (max-width: 768px) {
  .wish-input-area {
    height: 32vh;
    max-width: 100%;
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .wish-input-area {
    height: 30vh;
    padding: 0 12px;
  }
}

.wish-input {
  width: 100%;
  border-radius: 20px;
  padding: 18px 20px;
  font-size: 17px;
  line-height: 1.4;
  color: #ffe9f3;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
    rgba(20, 10, 15, 0.6);
  border: 2px solid transparent;
  background-clip: padding-box;
  outline: none;
  box-shadow: 
    0 0 0 2px rgba(255, 192, 203, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 300ms ease;
  resize: none;
  font-family: inherit;
  backdrop-filter: blur(10px);
  /* 移动端优化 */
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* 移动端输入框优化 */
@media (max-width: 768px) {
  .wish-input {
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.3;
    border-radius: 16px;
    min-height: 120px;
  }
}

@media (max-width: 480px) {
  .wish-input {
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.2;
    border-radius: 12px;
    min-height: 100px;
  }
}

.wish-input::placeholder {
  color: #ffcce0;
  opacity: 0.8;
}

.wish-input:focus {
  box-shadow: 
    0 0 0 2px rgba(255, 215, 0, 0.5),
    0 0 30px rgba(255, 192, 203, 0.4),
    0 0 60px rgba(255, 215, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.wish-input--sparkle {
  animation: wish-sparkle 1200ms ease-in-out;
}

@keyframes wish-sparkle {
  0% { 
    box-shadow: 
      0 0 0 2px rgba(255, 192, 203, 0.3),
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% { 
    box-shadow: 
      0 0 0 3px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 192, 203, 0.6),
      0 0 80px rgba(255, 215, 0, 0.3),
      0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  100% { 
    box-shadow: 
      0 0 0 2px rgba(255, 192, 203, 0.3),
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

.wish-helper {
  margin-top: 10px;
  font-size: 13px;
  color: #ffd9e8;
  opacity: 0.85;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.wish-primary {
  height: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.wish-btn {
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: all 300ms ease;
  position: relative;
  overflow: hidden;
  /* 移动端优化 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* 移动端按钮优化 */
@media (max-width: 768px) {
  .wish-btn {
    padding: 18px 32px;
    font-size: 18px;
    font-weight: 600;
    min-height: 56px;
    border-radius: 28px;
    /* 确保按钮足够大，易于触摸 */
  }
}

@media (max-width: 480px) {
  .wish-btn {
    padding: 16px 28px;
    font-size: 16px;
    min-height: 52px;
    border-radius: 26px;
  }
}

.wish-btn--primary {
  background: linear-gradient(135deg, #ff9ac4 0%, #ffb347 50%, #ffd700 100%);
  color: #2a1a1f;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 12px 32px rgba(255, 170, 203, 0.4),
    0 6px 16px rgba(255, 215, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: primary-glow 2.8s ease-in-out infinite;
}

.wish-btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 16px 40px rgba(255, 170, 203, 0.5),
    0 8px 20px rgba(255, 215, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wish-btn--primary:active {
  transform: translateY(0) scale(0.98);
}

@keyframes primary-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 8px rgba(255, 192, 203, 0.4)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.2));
  }
  50% { 
    filter: drop-shadow(0 0 16px rgba(255, 192, 203, 0.6)) drop-shadow(0 0 32px rgba(255, 215, 0, 0.4));
  }
}

.wish-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 20px;
  background: 
    linear-gradient(135deg, rgba(30, 15, 20, 0.95), rgba(20, 10, 15, 0.9)),
    rgba(0, 0, 0, 0.3);
  border: 1.5px solid rgba(255, 192, 203, 0.4);
  border-radius: 20px;
  padding: 16px;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.wish-toast__text {
  font-size: 15px;
  margin-bottom: 12px;
  color: #ffe8f4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.wish-btn--secondary {
  background: 
    linear-gradient(135deg, rgba(255, 192, 203, 0.2), rgba(255, 215, 0, 0.1)),
    rgba(255, 192, 203, 0.05);
  color: #ffd6e7;
  border: 1.5px solid rgba(255, 192, 203, 0.4);
  box-shadow: 
    0 4px 12px rgba(255, 192, 203, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wish-btn--secondary:hover {
  background: 
    linear-gradient(135deg, rgba(255, 192, 203, 0.3), rgba(255, 215, 0, 0.15)),
    rgba(255, 192, 203, 0.1);
  transform: translateY(-1px);
  box-shadow: 
    0 6px 16px rgba(255, 192, 203, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.wish-card-zone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  background: 
    /* Simplified background for mobile performance */
    linear-gradient(180deg, #0a0a0a 0%, #1a0f14 50%, #0a0a0a 100%);
  z-index: 100;
  opacity: 1 !important;
  visibility: visible !important;
  padding: max(env(safe-area-inset-top, 0px), 20px) 20px max(env(safe-area-inset-bottom, 0px), 20px) 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Mobile specific fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* 移动端卡片区域优化 */
@media (max-width: 768px) {
  .wish-card-zone {
    padding: max(env(safe-area-inset-top, 0px), 16px) 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .wish-card-zone {
    padding: max(env(safe-area-inset-top, 0px), 12px) 12px max(env(safe-area-inset-bottom, 0px), 12px) 12px;
    gap: 12px;
  }
}

.wish-card-zone[style*="display: none"] {
  display: none !important;
}

/* Card Container Styles */
#wish-card-container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 400px;
  position: relative;
  z-index: 10;
  margin: 10px 0;
}

/* React-style Wish Card - Mobile Stable */
.wish-card {
  /* Mobile stability foundation */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  
  /* Core layout */
  position: relative;
  width: min(85vw, 300px);
  height: min(85vw * 1.6, 480px);
  margin: 20px auto;
  border-radius: 24px;
  cursor: pointer;
  
  /* Visibility enforcement */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999;
  
  /* Premium shadow */
  filter: drop-shadow(0 25px 60px rgba(0, 0, 0, 0.8));
}

.wish-card__container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.wish-card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.wish-card__face--hidden {
  pointer-events: none;
}

.wish-card__back {
  transform: rotateY(180deg);
}

.wish-card__glow {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(140% 100% at 50% 0%, rgba(255, 215, 0, 0.15), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, rgba(255, 192, 203, 0.2), transparent 70%),
    linear-gradient(135deg, rgba(30, 15, 20, 0.9), rgba(15, 8, 12, 0.95));
  animation: glow-pulse-card 3s ease-in-out infinite alternate;
}

@keyframes glow-pulse-card {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

.wish-card__frame {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: 
    /* Wood grain texture */
    linear-gradient(45deg, 
      rgba(101, 67, 33, 0.95) 0%, 
      rgba(139, 90, 43, 0.98) 25%, 
      rgba(160, 108, 58, 0.95) 50%, 
      rgba(139, 90, 43, 0.98) 75%, 
      rgba(101, 67, 33, 0.95) 100%
    ),
    /* Subtle wood pattern overlay */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 4px
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 0 0 8px rgba(218, 165, 32, 0.8),
    inset 0 0 0 12px rgba(139, 90, 43, 0.6),
    inset 0 0 0 16px rgba(218, 165, 32, 0.4),
    0 25px 80px rgba(0, 0, 0, 0.8);
}

/* Basic card styling */
.wish-card--basic .wish-card__frame {
  border: 2px solid rgba(255, 192, 203, 0.4);
  box-shadow: 
    inset 0 0 0 1px rgba(255, 215, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Card Back Specific Styles */
.wish-card__level-indicator {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 14px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  color: #ffd700;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 8px;
}

.wish-card__fairy-artwork {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.wish-card__fairy-large {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: fairy-glow 3s ease-in-out infinite alternate;
}

@keyframes fairy-glow {
  0% { 
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transform: scale(1);
  }
  100% { 
    filter: drop-shadow(0 6px 12px rgba(255, 215, 0, 0.4));
    transform: scale(1.05);
  }
}

.wish-card__elemental-aura {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.aura-element {
  font-size: 16px;
  animation: element-float 4s ease-in-out infinite;
  opacity: 0.8;
}

.aura-element:nth-child(1) { animation-delay: 0s; }
.aura-element:nth-child(2) { animation-delay: 0.8s; }
.aura-element:nth-child(3) { animation-delay: 1.6s; }
.aura-element:nth-child(4) { animation-delay: 2.4s; }
.aura-element:nth-child(5) { animation-delay: 3.2s; }

@keyframes element-float {
  0%, 100% { 
    transform: translateY(0) scale(1); 
    opacity: 0.8; 
  }
  50% { 
    transform: translateY(-3px) scale(1.1); 
    opacity: 1; 
  }
}

.wish-card__guidance {
  font-family: 'Dancing Script', cursive;
  font-size: 14px;
  color: #ffb6c1;
  text-align: center;
  line-height: 1.4;
  margin: 15px 0;
  font-style: italic;
  max-width: 250px;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px;
  border-radius: 10px;
}

.wish-card__upgrade-btn {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin-top: 15px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  transition: all 0.3s ease;
}

.wish-card__upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.wish-card__max-level {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: #ffd700;
  font-weight: 700;
  text-align: center;
  margin: 15px 0;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
  border-radius: 15px;
  border: 2px solid rgba(255, 215, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Premium Card Faces */
.premium-card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  backface-visibility: hidden;
  overflow: hidden;
  
  /* Wood grain background */
  background: 
    linear-gradient(45deg, 
      rgba(101, 67, 33, 0.95) 0%, 
      rgba(139, 90, 43, 0.98) 25%, 
      rgba(160, 108, 58, 0.95) 50%, 
      rgba(139, 90, 43, 0.98) 75%, 
      rgba(101, 67, 33, 0.95) 100%
    );
}

.premium-card-back {
  transform: rotateY(180deg);
}

/* Debug: Temporary background for card back */
.wish-card-premium.flipped .premium-card-back {
  background: 
    linear-gradient(45deg, 
      rgba(101, 67, 33, 0.95) 0%, 
      rgba(139, 90, 43, 0.98) 25%, 
      rgba(160, 108, 58, 0.95) 50%, 
      rgba(139, 90, 43, 0.98) 75%, 
      rgba(101, 67, 33, 0.95) 100%
    ),
    /* Debug red border to see the area */
    linear-gradient(red, red);
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
}

/* Ensure card back content is visible */
.premium-card-back .premium-card-content {
  position: relative;
  z-index: 20;
  color: #ffd700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 15px;
  padding: 15px !important;
  margin: 10px !important;
}

.premium-card-back .premium-card-content * {
  position: relative;
  z-index: 21;
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Premium Ornate Border */
.premium-border-frame {
  position: absolute;
  inset: 4px;
  border-radius: 16px;
  border: 3px solid rgba(255, 215, 0, 0.8);
  background: linear-gradient(45deg, 
    rgba(218, 165, 32, 0.9) 0%, 
    rgba(255, 215, 0, 0.95) 25%, 
    rgba(218, 165, 32, 0.9) 50%, 
    rgba(255, 215, 0, 0.95) 75%, 
    rgba(218, 165, 32, 0.9) 100%
  );
  box-shadow: 
    inset 0 0 20px rgba(255, 215, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(255, 215, 0, 0.5);
  animation: premium-border-glow 8s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes premium-border-glow {
  0%, 100% { 
    box-shadow: 
      inset 0 0 20px rgba(255, 215, 0, 0.3),
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      0 0 30px rgba(255, 215, 0, 0.5);
  }
  50% { 
    box-shadow: 
      inset 0 0 25px rgba(255, 215, 0, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.5),
      0 0 40px rgba(255, 215, 0, 0.7);
  }
}

/* Premium Corner Stars */
.premium-corner-stars {
  position: absolute;
  inset: 20px;
  pointer-events: none;
  z-index: 2;
}

.premium-corner-star {
  position: absolute;
  width: 24px;
  height: 24px;
  background: linear-gradient(45deg, #ffd700, #ffb6c1);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0.9;
  animation: premium-star-twinkle 6s ease-in-out infinite;
}

.premium-corner-star:nth-child(1) { top: 0; left: 0; }
.premium-corner-star:nth-child(2) { top: 0; right: 0; animation-delay: 0.75s; }
.premium-corner-star:nth-child(3) { bottom: 0; left: 0; animation-delay: 1.5s; }
.premium-corner-star:nth-child(4) { bottom: 0; right: 0; animation-delay: 2.25s; }

@keyframes premium-star-twinkle {
  0%, 100% { 
    opacity: 0.7; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.1) rotate(180deg); 
  }
}

/* Premium Mystical Aura */
.premium-mystical-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(ellipse at center, 
      rgba(25, 25, 112, 0.9) 0%, 
      rgba(0, 0, 0, 0.95) 70%
    );
  border-radius: 50%;
  border: 3px solid rgba(218, 165, 32, 0.8);
  z-index: 1;
}

.premium-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: premium-star-twinkle 4s ease-in-out infinite;
}

/* Premium Golden Coins */
.premium-golden-coins {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.premium-coin {
  width: 20px;
  height: 20px;
  background: 
    radial-gradient(circle at 30% 30%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(255, 215, 0, 1) 30%, 
      rgba(218, 165, 32, 0.9) 70%, 
      rgba(184, 134, 11, 0.8) 100%
    );
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.9);
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(255, 215, 0, 0.6);
  animation: premium-coin-sparkle 4s ease-in-out infinite;
  position: relative;
}

.premium-coin::before {
  content: '¥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: bold;
  color: rgba(139, 90, 43, 0.8);
}

.premium-coin:nth-child(1) { animation-delay: 0s; }
.premium-coin:nth-child(2) { animation-delay: 0.5s; }
.premium-coin:nth-child(3) { animation-delay: 1s; }
.premium-coin:nth-child(4) { animation-delay: 1.5s; }
.premium-coin:nth-child(5) { animation-delay: 2s; }

@keyframes premium-coin-sparkle {
  0%, 100% { 
    transform: translateY(0) scale(1);
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.6),
      0 4px 8px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(255, 215, 0, 0.6);
  }
  50% { 
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.8),
      0 6px 12px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(255, 215, 0, 0.8);
  }
}

/* Premium Card Content */
.premium-card-content {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 25px 20px;
  text-align: center;
}

.premium-fairy-name {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 15px;
  text-shadow: 
    0 0 10px rgba(255, 215, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.premium-fairy-avatar {
  font-size: 64px;
  margin: 20px 0;
  filter: 
    drop-shadow(0 0 25px rgba(255, 215, 0, 0.9))
    drop-shadow(0 0 40px rgba(255, 255, 255, 0.6));
  animation: premium-fairy-glow 6s ease-in-out infinite;
}

@keyframes premium-fairy-glow {
  0%, 100% { 
    transform: scale(1);
    filter: 
      drop-shadow(0 0 25px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 40px rgba(255, 255, 255, 0.6));
  }
  50% { 
    transform: scale(1.05);
    filter: 
      drop-shadow(0 0 30px rgba(255, 215, 0, 1))
      drop-shadow(0 0 50px rgba(255, 255, 255, 0.8));
  }
}

.premium-fairy-blessing {
  font-family: 'Dancing Script', cursive;
  font-size: 14px;
  color: #ffb6c1;
  line-height: 1.4;
  margin: 15px 0;
  font-style: italic;
  max-width: 250px;
}

.premium-nft-number {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: rgba(255, 215, 0, 0.95);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 15px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Premium Card Back Styles */
.premium-power-level {
  font-size: 28px;
  margin-bottom: 15px;
  text-align: center;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
  color: #ffd700 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.premium-guardian-avatar {
  font-size: 72px;
  margin: 15px 0;
  text-align: center;
  filter: 
    drop-shadow(0 0 30px rgba(255, 215, 0, 0.8))
    drop-shadow(0 0 50px rgba(255, 255, 255, 0.6));
  animation: premium-guardian-pulse 4s ease-in-out infinite;
}

@keyframes premium-guardian-pulse {
  0%, 100% { 
    transform: scale(1);
    filter: 
      drop-shadow(0 0 30px rgba(255, 215, 0, 0.8))
      drop-shadow(0 0 50px rgba(255, 255, 255, 0.6));
  }
  50% { 
    transform: scale(1.05);
    filter: 
      drop-shadow(0 0 35px rgba(255, 215, 0, 1))
      drop-shadow(0 0 60px rgba(255, 255, 255, 0.8));
  }
}

.premium-elemental-symbols {
  display: flex !important;
  gap: 12px;
  margin: 20px 0;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 10px !important;
  border-radius: 15px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.element-symbol {
  font-size: 20px;
  animation: element-orbit 8s linear infinite;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.element-symbol:nth-child(1) { animation-delay: 0s; }
.element-symbol:nth-child(2) { animation-delay: 1.6s; }
.element-symbol:nth-child(3) { animation-delay: 3.2s; }
.element-symbol:nth-child(4) { animation-delay: 4.8s; }
.element-symbol:nth-child(5) { animation-delay: 6.4s; }

@keyframes element-orbit {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-5px) scale(1.1); opacity: 1; }
}

.premium-guardian-guidance {
  font-family: 'Dancing Script', cursive;
  font-size: 14px;
  color: #ffb6c1 !important;
  text-align: center;
  line-height: 1.4;
  margin: 15px 0;
  font-style: italic;
  max-width: 250px;
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 10px !important;
  border-radius: 10px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.premium-upgrade-btn {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin-top: 15px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  transition: all 0.3s ease;
}

.premium-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.premium-fairy-level {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #ffd700;
  font-weight: 600;
  text-align: center;
  margin: 10px 0;
  padding: 4px 12px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.premium-max-level {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #ffd700;
  font-weight: 700;
  text-align: center;
  margin: 15px 0;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
  border-radius: 20px;
  border: 2px solid rgba(255, 215, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: premium-max-level-glow 3s ease-in-out infinite;
}

@keyframes premium-max-level-glow {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.5);
  }
  50% { 
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
    border-color: rgba(255, 215, 0, 0.8);
  }
}

/* Card-focused layout adjustments */
.wish-card-zone .wish-card {
  margin: 20px 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wish-back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffd6e7;
  border: 1.5px solid rgba(255, 192, 203, 0.3);
  border-radius: 25px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  z-index: 101;
}

.wish-back-btn:hover {
  background: rgba(255, 192, 203, 0.2);
  transform: translateY(-1px);
}

.wish-card-title {
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 28px;
  font-weight: 600;
  color: #ffe8f4;
  text-shadow: 
    0 0 25px rgba(255, 215, 0, 0.6),
    0 0 50px rgba(255, 192, 203, 0.4);
  text-align: center;
  margin-bottom: 20px;
  animation: title-glow 3s ease-in-out infinite alternate;
}

.wish-card-hint {
  font-size: 14px;
  color: #ffd9e8;
  opacity: 0.8;
  text-align: center;
  margin-top: 15px;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.wish-card {
  position: relative;
  width: min(85vw, 300px);
  height: min(85vw * 1.6, 480px);
  border-radius: 20px;
  filter: drop-shadow(0 25px 80px rgba(0, 0, 0, 0.8));
  animation: premium-card-float 6s ease-in-out infinite;
  perspective: 1200px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform-style: preserve-3d;
  margin: 20px auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.3);
  min-height: 400px;
  z-index: 20;
}

@keyframes premium-card-float {
  0%, 100% { 
    transform: translateY(0px) rotateX(0deg) rotateY(0deg); 
    filter: drop-shadow(0 25px 80px rgba(0, 0, 0, 0.8)); 
  }
  50% { 
    transform: translateY(-8px) rotateX(1deg) rotateY(0.5deg); 
    filter: drop-shadow(0 30px 90px rgba(0, 0, 0, 0.9)); 
  }
}

.wish-card:hover {
  transform: scale(1.02);
}

.wish-card__container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.wish-card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
}

.wish-card__face--hidden {
  pointer-events: none;
}

.wish-card__back {
  transform: rotateY(180deg);
}

@keyframes card-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}

.wish-card__glow {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(140% 100% at 50% 0%, rgba(255, 215, 0, 0.15), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, rgba(255, 192, 203, 0.2), transparent 70%),
    linear-gradient(135deg, rgba(30, 15, 20, 0.9), rgba(15, 8, 12, 0.95));
  animation: glow-pulse-card 3s ease-in-out infinite alternate;
}

@keyframes glow-pulse-card {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Premium NFT Card Frame - Inspired by High-End Collectibles */
.wish-card__frame {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: 
    /* Wood grain texture */
    linear-gradient(45deg, 
      rgba(101, 67, 33, 0.95) 0%, 
      rgba(139, 90, 43, 0.98) 25%, 
      rgba(160, 108, 58, 0.95) 50%, 
      rgba(139, 90, 43, 0.98) 75%, 
      rgba(101, 67, 33, 0.95) 100%
    ),
    /* Subtle wood pattern overlay */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 4px
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 0 0 8px rgba(218, 165, 32, 0.8),
    inset 0 0 0 12px rgba(139, 90, 43, 0.6),
    inset 0 0 0 16px rgba(218, 165, 32, 0.4),
    0 25px 80px rgba(0, 0, 0, 0.8);
}

/* Ornate Baroque Border System */
.wish-card__frame::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 16px;
  background: 
    /* Ornate golden border pattern */
    linear-gradient(45deg, 
      rgba(218, 165, 32, 0.9) 0%, 
      rgba(255, 215, 0, 0.95) 25%, 
      rgba(218, 165, 32, 0.9) 50%, 
      rgba(255, 215, 0, 0.95) 75%, 
      rgba(218, 165, 32, 0.9) 100%
    );
  border: 3px solid rgba(255, 215, 0, 0.8);
  box-shadow: 
    inset 0 0 20px rgba(255, 215, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 215, 0, 0.5);
  z-index: 1;
  animation: ornate-border-glow 8s ease-in-out infinite;
}

@keyframes ornate-border-glow {
  0%, 100% { 
    box-shadow: 
      inset 0 0 20px rgba(255, 215, 0, 0.3),
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(0, 0, 0, 0.3),
      0 0 30px rgba(255, 215, 0, 0.5);
  }
  50% { 
    box-shadow: 
      inset 0 0 25px rgba(255, 215, 0, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 0 rgba(0, 0, 0, 0.4),
      0 0 40px rgba(255, 215, 0, 0.7);
  }
}

@keyframes premium-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Premium Ornate Frame */
.wish-card__frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(255, 215, 0, 0.7);
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
}

/* Premium Corner Stars */
.wish-card__corner-stars {
  position: absolute;
  inset: 20px;
  pointer-events: none;
  z-index: 3;
}

/* Golden Coins Effect - Inspired by Reference */
.wish-card__golden-coins {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}

.wish-card__coin {
  width: 24px;
  height: 24px;
  background: 
    radial-gradient(circle at 30% 30%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(255, 215, 0, 1) 30%, 
      rgba(218, 165, 32, 0.9) 70%, 
      rgba(184, 134, 11, 0.8) 100%
    );
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.9);
  box-shadow: 
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(255, 215, 0, 0.6);
  animation: golden-coin-sparkle 4s ease-in-out infinite;
  position: relative;
}

.wish-card__coin::before {
  content: '¥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: rgba(139, 90, 43, 0.8);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wish-card__coin:nth-child(1) { animation-delay: 0s; }
.wish-card__coin:nth-child(2) { animation-delay: 0.5s; }
.wish-card__coin:nth-child(3) { animation-delay: 1s; }
.wish-card__coin:nth-child(4) { animation-delay: 1.5s; }
.wish-card__coin:nth-child(5) { animation-delay: 2s; }

@keyframes golden-coin-sparkle {
  0%, 100% { 
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.6),
      inset 0 -2px 0 rgba(0, 0, 0, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(255, 215, 0, 0.6);
  }
  50% { 
    transform: translateY(-3px) rotate(180deg) scale(1.1);
    box-shadow: 
      inset 0 2px 0 rgba(255, 255, 255, 0.8),
      inset 0 -2px 0 rgba(0, 0, 0, 0.4),
      0 6px 12px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(255, 215, 0, 0.8);
  }
}

.wish-card__corner-star {
  position: absolute;
  width: 28px;
  height: 28px;
  background: linear-gradient(45deg, #ffd700, #ffb6c1);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0.9;
  animation: premium-star-twinkle 6s ease-in-out infinite;
}

.wish-card__corner-star:nth-child(1) { top: 0; left: 0; }
.wish-card__corner-star:nth-child(2) { top: 0; right: 0; animation-delay: 0.75s; }
.wish-card__corner-star:nth-child(3) { bottom: 0; left: 0; animation-delay: 1.5s; }
.wish-card__corner-star:nth-child(4) { bottom: 0; right: 0; animation-delay: 2.25s; }

@keyframes premium-star-twinkle {
  0%, 100% { 
    opacity: 0.7; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.1) rotate(180deg); 
  }
}

/* Premium Central Artwork Area - Inspired by Reference */
.wish-card__mystical-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 240px;
  transform: translate(-50%, -50%);
  background: 
    /* Starry night sky */
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 1px, transparent 2px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.6) 1px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
    radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.9) 1px, transparent 2px),
    /* Deep space background */
    radial-gradient(ellipse at center, 
      rgba(25, 25, 112, 0.9) 0%, 
      rgba(0, 0, 0, 0.95) 70%
    );
  border-radius: 50%;
  border: 4px solid rgba(218, 165, 32, 0.8);
  box-shadow: 
    inset 0 0 30px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(218, 165, 32, 0.6);
  animation: starry-night-twinkle 12s ease-in-out infinite;
  z-index: 2;
}

@keyframes starry-night-twinkle {
  0%, 100% { 
    opacity: 0.9;
    box-shadow: 
      inset 0 0 30px rgba(0, 0, 0, 0.8),
      0 0 40px rgba(218, 165, 32, 0.6);
  }
  50% { 
    opacity: 1;
    box-shadow: 
      inset 0 0 35px rgba(0, 0, 0, 0.9),
      0 0 50px rgba(218, 165, 32, 0.8);
  }
}

@keyframes premium-aura-breath {
  0%, 100% { 
    opacity: 0.5; 
    transform: translate(-50%, -50%) scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 0.8; 
    transform: translate(-50%, -50%) scale(1.1) rotate(180deg); 
  }
}

/* Card Rarity Levels - NFT Tarot Style */

/* Level 1: Basic Card - Simple elegance */
.wish-card--basic .wish-card__frame {
  border: 2px solid rgba(255, 192, 203, 0.5);
  box-shadow: 
    inset 0 0 0 1px rgba(255, 215, 0, 0.3),
    inset 0 0 0 3px rgba(255, 192, 203, 0.15),
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 192, 203, 0.2);
}

.wish-card--basic .wish-card__frame::after {
  content: '✦';
  color: rgba(255, 192, 203, 0.7);
}

/* Level 2: Empowered Card - Pink-gold glow */
.wish-card--empowered .wish-card__frame {
  border: 3px solid rgba(255, 215, 0, 0.7);
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 215, 0, 0.12), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255, 192, 203, 0.15), transparent 40%),
    linear-gradient(135deg, rgba(25, 12, 15, 0.95), rgba(40, 20, 25, 0.98)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="empowered" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse"><circle cx="7.5" cy="7.5" r="0.8" fill="rgba(255,215,0,0.15)"/><path d="M7.5 5l1.5 3h3l-2.5 2L10.5 13l-3-1.5L4.5 13l1-3L3 8h3l1.5-3z" fill="rgba(255,192,203,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23empowered)"/></svg>');
  box-shadow: 
    inset 0 0 0 2px rgba(255, 215, 0, 0.5),
    inset 0 0 0 4px rgba(255, 192, 203, 0.3),
    inset 0 0 0 6px rgba(255, 215, 0, 0.2),
    0 16px 40px rgba(255, 215, 0, 0.3),
    0 0 40px rgba(255, 215, 0, 0.2),
    0 0 60px rgba(255, 192, 203, 0.15);
  animation: empowered-pulse 3s ease-in-out infinite alternate;
}

.wish-card--empowered .wish-card__frame::after {
  content: '✦ ❀';
  color: rgba(255, 215, 0, 0.8);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
}

@keyframes empowered-pulse {
  0% { 
    box-shadow: 
      inset 0 0 0 2px rgba(255, 215, 0, 0.5),
      inset 0 0 0 4px rgba(255, 192, 203, 0.3),
      inset 0 0 0 6px rgba(255, 215, 0, 0.2),
      0 16px 40px rgba(255, 215, 0, 0.3),
      0 0 40px rgba(255, 215, 0, 0.2);
  }
  100% { 
    box-shadow: 
      inset 0 0 0 2px rgba(255, 215, 0, 0.7),
      inset 0 0 0 4px rgba(255, 192, 203, 0.5),
      inset 0 0 0 6px rgba(255, 215, 0, 0.3),
      0 16px 40px rgba(255, 215, 0, 0.4),
      0 0 60px rgba(255, 215, 0, 0.3);
  }
}

/* Level 3: Rare Card - Gem-embedded frame */
.wish-card--rare .wish-card__frame {
  border: 4px solid rgba(138, 43, 226, 0.8);
  background: 
    radial-gradient(circle at 25% 15%, rgba(138, 43, 226, 0.12), transparent 35%),
    radial-gradient(circle at 75% 85%, rgba(255, 215, 0, 0.15), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(255, 192, 203, 0.08), transparent 45%),
    linear-gradient(135deg, rgba(30, 12, 25, 0.98), rgba(45, 20, 35, 1)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="gems" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><polygon points="12.5,8 15,11 12.5,14 10,11" fill="rgba(138,43,226,0.15)"/><circle cx="12.5" cy="12.5" r="1.5" fill="rgba(255,215,0,0.12)"/></pattern></defs><rect width="100" height="100" fill="url(%23gems)"/></svg>');
  box-shadow: 
    inset 0 0 0 2px rgba(138, 43, 226, 0.6),
    inset 0 0 0 5px rgba(255, 215, 0, 0.4),
    inset 0 0 0 8px rgba(255, 192, 203, 0.2),
    0 20px 50px rgba(138, 43, 226, 0.4),
    0 0 60px rgba(138, 43, 226, 0.3),
    0 0 80px rgba(255, 215, 0, 0.2);
  animation: rare-gems 2.5s ease-in-out infinite alternate;
}

.wish-card--rare .wish-card__frame::after {
  content: '✦ ❀ ◆';
  color: rgba(138, 43, 226, 0.9);
  text-shadow: 
    0 0 12px rgba(138, 43, 226, 1),
    0 0 24px rgba(255, 215, 0, 0.6);
}

@keyframes rare-gems {
  0% { 
    filter: 
      drop-shadow(0 0 15px rgba(138, 43, 226, 0.5)) 
      drop-shadow(0 0 30px rgba(255, 215, 0, 0.3));
  }
  100% { 
    filter: 
      drop-shadow(0 0 25px rgba(138, 43, 226, 0.7)) 
      drop-shadow(0 0 50px rgba(255, 215, 0, 0.5));
  }
}

/* Level 4: Legendary Card - Divine mandala */
.wish-card--legendary .wish-card__frame {
  border: 5px solid rgba(255, 215, 0, 1);
  background: 
    radial-gradient(circle at 50% 20%, rgba(255, 215, 0, 0.2), transparent 30%),
    radial-gradient(circle at 20% 50%, rgba(255, 192, 203, 0.18), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.15), transparent 30%),
    linear-gradient(135deg, rgba(40, 20, 30, 1), rgba(60, 30, 40, 1)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="mandala" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="8" stroke="rgba(255,215,0,0.15)" stroke-width="1" fill="none"/><path d="M15 7l2 4 4-2-2 4 4 2-4 2 2 4-4-2-2 4-2-4-4 2 2-4-4-2 4-2-2-4 4 2z" fill="rgba(255,192,203,0.12)"/></pattern></defs><rect width="100" height="100" fill="url(%23mandala)"/></svg>');
  box-shadow: 
    inset 0 0 0 3px rgba(255, 215, 0, 0.8),
    inset 0 0 0 6px rgba(255, 192, 203, 0.4),
    inset 0 0 0 9px rgba(138, 43, 226, 0.3),
    inset 0 0 0 12px rgba(255, 215, 0, 0.2),
    0 25px 60px rgba(255, 215, 0, 0.5),
    0 0 80px rgba(255, 215, 0, 0.4),
    0 0 120px rgba(255, 192, 203, 0.3);
  animation: legendary-mandala 3s ease-in-out infinite alternate;
}

.wish-card--legendary .wish-card__frame::after {
  content: '✦ ❀ ◆ ☾ ☽';
  color: rgba(255, 215, 0, 1);
  text-shadow: 
    0 0 15px rgba(255, 215, 0, 1),
    0 0 30px rgba(255, 192, 203, 0.8),
    0 0 45px rgba(138, 43, 226, 0.6);
  animation: legendary-sparkle 2s ease-in-out infinite;
}

@keyframes legendary-mandala {
  0% { 
    filter: 
      drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)) 
      drop-shadow(0 0 40px rgba(255, 192, 203, 0.4))
      drop-shadow(0 0 60px rgba(138, 43, 226, 0.3));
  }
  100% { 
    filter: 
      drop-shadow(0 0 35px rgba(255, 215, 0, 0.8)) 
      drop-shadow(0 0 70px rgba(255, 192, 203, 0.6))
      drop-shadow(0 0 105px rgba(138, 43, 226, 0.5));
  }
}

@keyframes legendary-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
}

.wish-card__stars {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 14px;
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  z-index: 10;
  animation: star-twinkle 2s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

.wish-card__fairy { 
  font-size: 72px; 
  margin: 25px 0;
  filter: 
    drop-shadow(0 0 25px rgba(255, 215, 0, 0.9))
    drop-shadow(0 0 40px rgba(255, 255, 255, 0.6))
    drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
  animation: premium-fairy-presence 6s ease-in-out infinite;
  position: relative;
  z-index: 15;
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 255, 255, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.6);
}

@keyframes premium-fairy-presence {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    filter: 
      drop-shadow(0 0 25px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 40px rgba(255, 255, 255, 0.6))
      drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
  }
  50% { 
    transform: scale(1.05) rotate(1deg);
    filter: 
      drop-shadow(0 0 30px rgba(255, 215, 0, 1))
      drop-shadow(0 0 50px rgba(255, 255, 255, 0.8))
      drop-shadow(0 8px 20px rgba(0, 0, 0, 0.9));
  }
}

@keyframes fairy-gentle-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
}

.wish-card__title { 
  font-family: 'Cinzel', serif;
  font-size: 24px; 
  font-weight: 700;
  color: #ffd700; 
  margin: 15px 0 10px 0; 
  text-shadow: 
    0 0 10px rgba(255, 215, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 10;
  position: relative;
  background: linear-gradient(45deg, #ffd700, #ffed4a, #ffd700);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: premium-title-shine 4s ease-in-out infinite;
}

@keyframes premium-title-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  line-height: 1.2;
  z-index: 5;
  position: relative;
}

.wish-card__blessing { 
  font-size: 12px; 
  color: #ffeef6; 
  opacity: 0.92; 
  margin: 15px 0 20px 0; 
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 5;
  position: relative;
  max-height: 120px;
  overflow-y: auto;
}

.wish-card__number { 
  font-size: 10px; 
  color: #ffd9e8; 
  opacity: 0.85;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 192, 203, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 192, 203, 0.2);
  z-index: 5;
  position: relative;
}

/* Card Back Styles */
.wish-card__frame--back {
  justify-content: space-around;
  padding: 20px 16px;
}

.wish-card__level-indicator {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 14px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.wish-card__fairy-artwork {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 20px 0;
}

.wish-card__fairy-large {
  font-size: 64px;
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
  animation: fairy-divine-glow 4s ease-in-out infinite alternate;
  position: relative;
  z-index: 10;
}

@keyframes fairy-divine-glow {
  0% { 
    filter: 
      drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)) 
      drop-shadow(0 0 20px rgba(255, 215, 0, 0.4))
      drop-shadow(0 0 40px rgba(255, 192, 203, 0.2)); 
  }
  100% { 
    filter: 
      drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)) 
      drop-shadow(0 0 35px rgba(255, 215, 0, 0.7))
      drop-shadow(0 0 70px rgba(255, 192, 203, 0.4)); 
  }
}

.wish-card__elemental-aura {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  position: relative;
  width: 100%;
  height: 40px;
}

/* Create circular aura background */
.wish-card__elemental-aura::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: 
    radial-gradient(circle, rgba(255, 215, 0, 0.1), rgba(255, 192, 203, 0.08), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: aura-pulse 3s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes aura-pulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
}

.aura-element {
  font-size: 20px;
  opacity: 0.9;
  animation: element-orbit 6s linear infinite;
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.aura-element:nth-child(1) { animation-delay: 0s; }
.aura-element:nth-child(2) { animation-delay: 1.2s; }
.aura-element:nth-child(3) { animation-delay: 2.4s; }
.aura-element:nth-child(4) { animation-delay: 3.6s; }
.aura-element:nth-child(5) { animation-delay: 4.8s; }

@keyframes element-orbit {
  0% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.7; }
  25% { transform: translateY(-8px) scale(1.15) rotate(90deg); opacity: 1; }
  50% { transform: translateY(0px) scale(1) rotate(180deg); opacity: 0.8; }
  75% { transform: translateY(-6px) scale(1.1) rotate(270deg); opacity: 1; }
  100% { transform: translateY(0px) scale(1) rotate(360deg); opacity: 0.7; }
}

.wish-card__guidance {
  font-size: 13px;
  color: #ffe8f4;
  line-height: 1.4;
  text-align: center;
  margin: 16px 0;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.wish-card__upgrade-btn {
  background: linear-gradient(135deg, #ff9ac4, #ffd68a);
  color: #2a1a1f;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 4px 12px rgba(255, 170, 203, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.wish-card__upgrade-btn:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 
    0 6px 16px rgba(255, 170, 203, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.wish-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin-top: 25px;
}

/* Full screen card view adjustments */
.wish-card-zone .wish-actions {
  position: relative;
  z-index: 102;
}

.wish-btn--share { 
  background: 
    linear-gradient(135deg, rgba(255, 192, 203, 0.3), rgba(255, 182, 193, 0.2)),
    rgba(255, 192, 203, 0.1);
  color: #ffd6e7; 
  border: 1.5px solid rgba(255, 182, 193, 0.4);
  box-shadow: 
    0 6px 16px rgba(255, 192, 203, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wish-btn--share:hover {
  transform: translateY(-1px);
  background: 
    linear-gradient(135deg, rgba(255, 192, 203, 0.4), rgba(255, 182, 193, 0.3)),
    rgba(255, 192, 203, 0.15);
  box-shadow: 
    0 8px 20px rgba(255, 192, 203, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.wish-btn--gold { 
  background: linear-gradient(135deg, #ffb347, #ffd700, #ffed4e); 
  color: #2a1f0b; 
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 8px 20px rgba(255, 215, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.wish-btn--gold:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 
    0 10px 24px rgba(255, 215, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wish-btn--ghost { 
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.03);
  color: #ffdfec; 
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wish-btn--ghost:hover {
  transform: translateY(-1px);
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.05);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.wish-social {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #ffe7f1;
  font-size: 12px;
  z-index: 5;
  text-align: center;
  padding: 0 16px;
}

.wish-social__count {
  opacity: 0.8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.wish-quote {
  font-style: italic;
  opacity: 0.85;
  color: #ffd9e8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  max-width: 280px;
}

/* WordPress Specific Styles */
.wp-block-group {
  margin: 0;
}

.entry-content {
  margin: 0;
}

.site-main {
  margin: 0;
}

#primary {
  margin: 0;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .wish-title {
    font-size: 20px;
  }
  
  .wish-subtitle {
    font-size: 13px;
  }
  
  .wish-input {
    font-size: 16px;
    padding: 16px 18px;
  }
  
  .wish-card {
    width: min(95%, 320px);
  }
  
  .wish-btn {
    padding: 14px 24px;
    font-size: 16px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .wish-card__glow {
    filter: blur(0.5px);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  /* Already dark by default */
}

/* 📱 壁纸生成器入口 */
.wallpaper-entry {
    margin-top: 20px;
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 192, 203, 0.2);
    transition: all 0.3s ease;
}

.wallpaper-entry:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 192, 203, 0.4);
    transform: translateY(-2px);
}

.wallpaper-link {
    display: inline-block;
    color: var(--golden);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.wallpaper-link:hover {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    transform: scale(1.05);
}

.wallpaper-desc {
    font-size: 12px;
    color: var(--soft-pink);
    opacity: 0.8;
    margin: 0;
    line-height: 1.4;
}

/* Mobile optimizations for wallpaper entry */
@media (max-width: 480px) {
    .wallpaper-entry {
        margin-top: 15px;
        padding: 12px;
    }
    
    .wallpaper-link {
        font-size: 14px;
    }
    
    .wallpaper-desc {
        font-size: 11px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .wish-card,
  .wish-card__fairy-large,
  .aura-element,
  .wish-title {
    animation: none;
  }
  
  .wish-btn,
  .wish-input {
    transition: none;
  }
}

/* ===== 优化的卡片设计系统 ===== */

/* 塔罗牌风格卡片容器 */
.wish-card {
  /* 垂直塔罗牌比例 3:5 */
  width: min(85vw, 300px) !important;
  height: auto !important;
  aspect-ratio: 3/5 !important; /* 塔罗牌标准比例 */
  min-height: 500px !important;
  
  /* 塔罗牌神秘背景 */
  position: relative !important;
  background: 
    radial-gradient(ellipse at center, rgba(255, 192, 203, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(25, 25, 112, 0.4) 0%,
      rgba(75, 0, 130, 0.3) 25%,
      rgba(139, 69, 19, 0.2) 50%,
      rgba(25, 25, 112, 0.4) 75%,
      rgba(0, 0, 0, 0.6) 100%
    ) !important;
  
  /* 华丽的金粉色边框 */
  border: 3px solid transparent !important;
  border-radius: 16px !important;
  background-clip: padding-box !important;
  
  /* 多层边框效果 */
  box-shadow: 
    0 0 0 2px rgba(255, 215, 0, 0.6),
    0 0 0 4px rgba(255, 192, 203, 0.4),
    0 0 0 6px rgba(255, 215, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 215, 0, 0.3) !important;
  
  /* 优雅阴影系统 */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  
  /* 平滑动画基础 */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-style: preserve-3d !important;
  
  /* 防止文字选择 */
  user-select: none;
  -webkit-user-select: none;
}

.wish-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* 正面设计优化 */
.wish-card__front {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  
  /* 内容层级背景 */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border-radius: 22px;
  overflow: hidden;
}

/* 星级系统重新设计 */
.wish-card__stars {
  font-size: 28px !important;
  letter-spacing: 4px;
  margin-bottom: 16px;
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.6));
  animation: gentle-pulse 3s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.9; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 1; 
  }
}

/* 仙女表情符号优化 */
.wish-card__fairy {
  font-size: 64px !important;
  margin: 16px 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  animation: fairy-float 4s ease-in-out infinite;
}

@keyframes fairy-float {
  0%, 100% { 
    transform: translateY(0px) rotate(-2deg); 
  }
  50% { 
    transform: translateY(-8px) rotate(2deg); 
  }
}

/* 标题文字优化 */
.wish-card__title {
  font-size: 18px !important;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin: 16px 0 12px 0;
  line-height: 1.3;
  
  /* 渐变文字效果 */
  background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ff69b4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* 文字阴影 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* 祝福文字优化 */
.wish-card__blessing {
  font-size: 14px !important;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.5;
  margin: 12px 0;
  padding: 0 8px;
  
  /* 文字阴影 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 用户愿望显示 - 核心内容区域 */
.wish-card__user-wish {
  margin: 20px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  max-width: 90%;
  
  /* 温柔的内发光 */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

.wish-card__wish-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 215, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
  
  /* 标签发光效果 */
  text-shadow: 0 1px 4px rgba(255, 215, 0, 0.4);
}

.wish-card__wish-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
  text-align: center;
  font-style: italic;
  
  /* 优雅的文字阴影 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  
  /* 限制行数避免过长 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 不同等级的愿望区域样式 */
.wish-card--basic .wish-card__user-wish {
  background: rgba(135, 206, 235, 0.12);
  border-color: rgba(135, 206, 235, 0.25);
  box-shadow: 
    inset 0 1px 0 rgba(135, 206, 235, 0.15),
    0 4px 12px rgba(135, 206, 235, 0.1);
}

.wish-card--empowered .wish-card__user-wish {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 
    inset 0 1px 0 rgba(255, 215, 0, 0.2),
    0 4px 12px rgba(255, 215, 0, 0.15);
}

.wish-card--rare .wish-card__user-wish {
  background: rgba(138, 43, 226, 0.18);
  border-color: rgba(138, 43, 226, 0.35);
  box-shadow: 
    inset 0 1px 0 rgba(138, 43, 226, 0.2),
    0 4px 12px rgba(138, 43, 226, 0.2);
}

.wish-card--legendary .wish-card__user-wish {
  background: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.2) 0%, 
    rgba(138, 43, 226, 0.15) 100%
  );
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.5), 
    rgba(138, 43, 226, 0.4)
  ) 1;
  box-shadow: 
    inset 0 1px 0 rgba(255, 105, 180, 0.25),
    0 6px 20px rgba(255, 105, 180, 0.2);
  
  /* 传说级别的发光动画 */
  animation: legendary-wish-glow 4s ease-in-out infinite;
}

@keyframes legendary-wish-glow {
  0%, 100% { 
    box-shadow: 
      inset 0 1px 0 rgba(255, 105, 180, 0.25),
      0 6px 20px rgba(255, 105, 180, 0.2);
  }
  50% { 
    box-shadow: 
      inset 0 1px 0 rgba(255, 105, 180, 0.35),
      0 8px 30px rgba(255, 105, 180, 0.3);
  }
}

/* 编号显示优化 */
.wish-card__number {
  font-size: 12px !important;
  font-weight: 600;
  color: rgba(255, 215, 0, 0.9);
  text-align: center;
  margin-top: auto;
  padding: 8px 16px;
  
  /* 编号背景 */
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  
  /* 文字效果 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

/* 卡片层级差异化设计 */
.wish-card--basic {
  border-color: rgba(135, 206, 235, 0.4);
  background: linear-gradient(135deg, 
    rgba(135, 206, 235, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.wish-card--empowered {
  border-color: rgba(255, 215, 0, 0.4);
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  box-shadow: 
    0 8px 32px rgba(255, 215, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 215, 0, 0.2);
}

.wish-card--legendary {
  border-color: rgba(255, 105, 180, 0.4);
  background: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.15) 0%,
    rgba(138, 43, 226, 0.1) 30%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(0, 0, 0, 0.1) 100%
  );
  box-shadow: 
    0 12px 40px rgba(255, 105, 180, 0.3),
    0 6px 20px rgba(138, 43, 226, 0.2),
    inset 0 2px 0 rgba(255, 105, 180, 0.2);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .wish-card {
    width: min(88vw, 320px) !important;
    min-height: 380px !important;
  }
  
  .wish-card__front {
    padding: 28px 20px;
  }
  
  .wish-card__fairy {
    font-size: 56px !important;
  }
  
  .wish-card__title {
    font-size: 16px !important;
  }
  
  .wish-card__blessing {
    font-size: 13px !important;
  }
  
  /* 移动端愿望区域优化 */
  .wish-card__user-wish {
    margin: 16px 0;
    padding: 14px;
    max-width: 95%;
  }
  
  .wish-card__wish-label {
    font-size: 10px;
  }
  
  .wish-card__wish-text {
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  .wish-card {
    width: min(85vw, 300px) !important;
    min-height: 360px !important;
  }
  
  .wish-card__front {
    padding: 24px 18px;
  }
  
  .wish-card__fairy {
    font-size: 52px !important;
  }
  
  .wish-card__title {
    font-size: 15px !important;
  }
  
  .wish-card__blessing {
    font-size: 12px !important;
    line-height: 1.4;
  }
  
  .wish-card__number {
    font-size: 11px !important;
  }
  
  /* 小屏设备愿望区域优化 */
  .wish-card__user-wish {
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
  }
  
  .wish-card__wish-label {
    font-size: 9px;
    margin-bottom: 6px;
  }
  
  .wish-card__wish-text {
    font-size: 11px;
    line-height: 1.25;
    -webkit-line-clamp: 2; /* 小屏限制为2行 */
  }
}

/* ===== 流畅的翻转动画系统 ===== */

/* 卡片翻转容器 */
.wish-card__container {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
}

/* 卡片面基础样式 */
.wish-card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
}

/* 正面初始状态 */
.wish-card__front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* 背面初始状态 */
.wish-card__back {
  transform: rotateY(-180deg);
  z-index: 1;
}

/* 翻转状态 */
.wish-card__face--hidden {
  pointer-events: none;
}

/* 卡片点击反馈 */
.wish-card__container:active {
  transform: scale(0.98);
}

/* 背面设计优化 */
.wish-card__back {
  background: linear-gradient(135deg,
    rgba(138, 43, 226, 0.15) 0%,
    rgba(255, 105, 180, 0.1) 30%,
    rgba(255, 255, 255, 0.05) 70%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border: 1px solid rgba(138, 43, 226, 0.3);
}

.wish-card__frame--back {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

/* 仙女大图标 */
.wish-card__fairy-large {
  font-size: 80px;
  animation: fairy-guardian-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 16px rgba(138, 43, 226, 0.4));
}

@keyframes fairy-guardian-pulse {
  0%, 100% { 
    transform: scale(1) rotate(-1deg); 
    opacity: 0.95; 
  }
  50% { 
    transform: scale(1.08) rotate(1deg); 
    opacity: 1; 
  }
}

/* 元素光环 */
.wish-card__elemental-aura {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  animation: elemental-rotate 8s linear infinite;
}

@keyframes elemental-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.aura-element {
  font-size: 20px;
  animation: element-float 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.aura-element:nth-child(1) { animation-delay: 0s; }
.aura-element:nth-child(2) { animation-delay: 0.4s; }
.aura-element:nth-child(3) { animation-delay: 0.8s; }
.aura-element:nth-child(4) { animation-delay: 1.2s; }
.aura-element:nth-child(5) { animation-delay: 1.6s; }

@keyframes element-float {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
    opacity: 0.8; 
  }
  50% { 
    transform: translateY(-6px) scale(1.1); 
    opacity: 1; 
  }
}

/* 指导文字 */
.wish-card__guidance {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  max-width: 200px;
}

/* 升级按钮 */
.wish-card__upgrade-btn {
  background: linear-gradient(135deg, #ff6b6b, #ffd93d);
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #2a1a1f;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 16px;
  
  box-shadow: 
    0 4px 12px rgba(255, 107, 107, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.wish-card__upgrade-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 6px 20px rgba(255, 107, 107, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.wish-card__upgrade-btn:active {
  transform: translateY(0px) scale(1.02);
}

/* 最大等级指示 */
.wish-card__max-level {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #2a1a1f;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  animation: max-level-glow 3s ease-in-out infinite;
}

@keyframes max-level-glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); 
    transform: scale(1); 
  }
  50% { 
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); 
    transform: scale(1.03); 
  }
}

/* ===== 微交互效果系统 ===== */

/* 卡片入场动画 */
@keyframes card-entrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9) rotateY(-15deg);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02) rotateY(5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotateY(0deg);
  }
}

.wish-card {
  animation: card-entrance 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 按钮交互优化 */
.wish-btn {
  position: relative;
  overflow: hidden;
}

.wish-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.6s ease-out;
  transform: translate(-50%, -50%);
}

.wish-btn:active::before {
  width: 300px;
  height: 300px;
}

/* 触觉反馈优化 */
.wish-card:active,
.wish-btn:active {
  transform: scale(0.98);
  transition: transform 0.1s ease-out;
}

/* 加载状态动画 */
@keyframes loading-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.wish-card--loading {
  animation: loading-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}

/* 成功状态动画 */
@keyframes success-bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -10px, 0);
  }
  70% {
    transform: translate3d(0, -5px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

.wish-card--success {
  animation: success-bounce 1s ease-out;
}

/* 响应式动画优化 */
@media (max-width: 768px) {
  .wish-card__fairy-large {
    font-size: 70px;
  }
  
  .aura-element {
    font-size: 18px;
  }
  
  .wish-card__guidance {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .wish-card__fairy-large {
    font-size: 64px;
  }
  
  .aura-element {
    font-size: 16px;
  }
  
  .wish-card__guidance {
    font-size: 12px;
    max-width: 180px;
  }
  
  .wish-card__upgrade-btn {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* ===== 愿望能量进度条系统 ===== */

/* 愿望能量容器 */
.wish-energy-container {
  position: relative;
  width: 100%;
  height: 25px;
  background: linear-gradient(135deg, #2a1810, #4a2818);
  border-radius: 15px;
  border: 2px solid #d4af37;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 16px 0;
}

/* 能量进度条 */
.wish-energy-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, 
    #ff69b4 0%,
    #ffd700 25%,
    #ff1493 50%,
    #da70d6 75%,
    #ff69b4 100%
  );
  border-radius: inherit;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: energyPulse 3s ease-in-out infinite;
  box-shadow: 
    0 0 20px rgba(255, 105, 180, 0.6),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
}

/* 能量脉冲动画 */
@keyframes energyPulse {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(255, 105, 180, 0.6),
      inset 0 2px 8px rgba(255, 255, 255, 0.3);
  }
  50% { 
    box-shadow: 
      0 0 35px rgba(255, 105, 180, 0.9),
      0 0 50px rgba(255, 215, 0, 0.4),
      inset 0 2px 8px rgba(255, 255, 255, 0.5);
  }
}

/* 能量百分比文字 */
.wish-energy-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 255, 255, 0.5);
  z-index: 2;
  animation: textGlow 2s ease-in-out infinite alternate;
}

/* 文字发光动画 */
@keyframes textGlow {
  0% { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.5); }
  100% { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.8); }
}

/* 能量图标 */
.wish-energy-icon {
  font-size: 18px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.6));
  animation: energy-icon-float 2.5s ease-in-out infinite;
}

@keyframes energy-icon-float {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
    opacity: 0.9; 
  }
  50% { 
    transform: translateY(-4px) scale(1.05); 
    opacity: 1; 
  }
}

/* ===== 祭品系统设计 ===== */

/* 祭品容器 */
.offering-system {
  margin-top: 20px;
  padding: 16px;
  background: rgba(138, 43, 226, 0.08);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 16px;
  text-align: center;
}

/* 祭品标题 */
.offering-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 215, 0, 0.9);
  margin-bottom: 12px;
  text-shadow: 0 1px 3px rgba(255, 215, 0, 0.4);
}

/* 祭品选项网格 */
.offering-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

/* 祭品按钮 */
.offering-btn {
  background: linear-gradient(135deg, 
    rgba(255, 192, 203, 0.15) 0%, 
    rgba(255, 215, 0, 0.1) 100%
  );
  border: 1px solid rgba(255, 192, 203, 0.3);
  border-radius: 12px;
  padding: 10px 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(5px);
  
  /* 防止文字选择 */
  user-select: none;
  -webkit-user-select: none;
}

.offering-btn:hover {
  background: linear-gradient(135deg, 
    rgba(255, 192, 203, 0.25) 0%, 
    rgba(255, 215, 0, 0.2) 100%
  );
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.offering-btn:active {
  transform: translateY(0px) scale(1.02);
}

/* 祭品表情符号 */
.offering-emoji {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

/* 祭品文字 */
.offering-text {
  font-size: 9px;
  line-height: 1.2;
}

/* 祭品效果动画 */
@keyframes offeringEffect {
  0% { 
    transform: scale(1) rotate(0deg); 
    opacity: 1; 
  }
  25% { 
    transform: scale(1.2) rotate(90deg); 
    opacity: 0.8; 
  }
  50% { 
    transform: scale(1.4) rotate(180deg); 
    opacity: 0.6; 
  }
  75% { 
    transform: scale(1.2) rotate(270deg); 
    opacity: 0.4; 
  }
  100% { 
    transform: scale(1) rotate(360deg); 
    opacity: 0; 
  }
}

/* 祭品粒子效果 */
.offering-particle {
  position: absolute;
  font-size: 12px;
  pointer-events: none;
  animation: offeringEffect 2s ease-out forwards;
}

/* ===== 仙女视觉进化系统 ===== */

/* 基础级仙女 - 淡蓝色光环 */
.fairy-level-basic .wish-card__fairy,
.fairy-level-basic .wish-card__fairy-large {
  filter: drop-shadow(0 0 15px rgba(135, 206, 235, 0.7));
}

/* 强化级仙女 - 金色光环 */
.fairy-level-empowered .wish-card__fairy,
.fairy-level-empowered .wish-card__fairy-large {
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
  animation: empowered-fairy-glow 3s ease-in-out infinite;
}

@keyframes empowered-fairy-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); 
  }
  50% { 
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) 
           drop-shadow(0 0 15px rgba(255, 192, 203, 0.6)); 
  }
}

/* 稀有级仙女 - 紫色光环 */
.fairy-level-rare .wish-card__fairy,
.fairy-level-rare .wish-card__fairy-large {
  filter: drop-shadow(0 0 25px rgba(138, 43, 226, 0.9));
  animation: rare-fairy-pulse 2.5s ease-in-out infinite;
}

@keyframes rare-fairy-pulse {
  0%, 100% { 
    filter: drop-shadow(0 0 25px rgba(138, 43, 226, 0.9)); 
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 35px rgba(138, 43, 226, 1)) 
           drop-shadow(0 0 20px rgba(255, 215, 0, 0.7)); 
    transform: scale(1.03);
  }
}

/* 传说级仙女 - 彩虹光环 */
.fairy-level-legendary .wish-card__fairy,
.fairy-level-legendary .wish-card__fairy-large {
  filter: drop-shadow(0 0 30px rgba(255, 105, 180, 1));
  animation: legendary-fairy-rainbow 4s ease-in-out infinite;
}

@keyframes legendary-fairy-rainbow {
  0% { 
    filter: drop-shadow(0 0 30px rgba(255, 105, 180, 1)); 
  }
  25% { 
    filter: drop-shadow(0 0 35px rgba(255, 215, 0, 1)) 
           drop-shadow(0 0 15px rgba(255, 105, 180, 0.8)); 
  }
  50% { 
    filter: drop-shadow(0 0 40px rgba(138, 43, 226, 1)) 
           drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); 
  }
  75% { 
    filter: drop-shadow(0 0 35px rgba(0, 255, 255, 0.9)) 
           drop-shadow(0 0 15px rgba(138, 43, 226, 0.7)); 
  }
  100% { 
    filter: drop-shadow(0 0 30px rgba(255, 105, 180, 1)); 
  }
}

/* ===== 魔法粒子动画系统 ===== */

/* 粒子容器 */
.magic-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* 单个粒子 */
.magic-particle {
  position: absolute;
  font-size: 8px;
  opacity: 0;
  pointer-events: none;
}

/* 粒子动画 */
@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.5) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translateY(10px) scale(1) rotate(60deg);
  }
  80% {
    opacity: 1;
    transform: translateY(-40px) scale(0.8) rotate(300deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.3) rotate(360deg);
  }
}

/* 不同类型的粒子 */
.particle-star {
  color: rgba(255, 215, 0, 0.8);
  animation: particle-float 4s ease-out infinite;
}

.particle-heart {
  color: rgba(255, 105, 180, 0.8);
  animation: particle-float 3.5s ease-out infinite;
}

.particle-sparkle {
  color: rgba(255, 255, 255, 0.9);
  animation: particle-float 2.5s ease-out infinite;
}

/* 交错动画时间 */
.magic-particle:nth-child(1) { animation-delay: 0s; }
.magic-particle:nth-child(2) { animation-delay: 0.5s; }
.magic-particle:nth-child(3) { animation-delay: 1s; }
.magic-particle:nth-child(4) { animation-delay: 1.5s; }
.magic-particle:nth-child(5) { animation-delay: 2s; }
.magic-particle:nth-child(6) { animation-delay: 2.5s; }

/* ===== 移动端优化 ===== */

@media (max-width: 768px) {
  .wish-energy-container {
    height: 22px;
    margin: 14px 0;
  }
  
  .wish-energy-text {
    font-size: 11px;
  }
  
  .wish-energy-icon {
    font-size: 16px;
  }
  
  .offering-system {
    margin-top: 16px;
    padding: 14px;
  }
  
  .offering-btn {
    padding: 8px 6px;
    font-size: 9px;
  }
  
  .offering-emoji {
    font-size: 14px;
    margin-bottom: 3px;
  }
  
  .offering-text {
    font-size: 8px;
  }
}

@media (max-width: 480px) {
  .wish-energy-container {
    height: 20px;
    margin: 12px 0;
  }
  
  .wish-energy-text {
    font-size: 10px;
  }
  
  .wish-energy-icon {
    font-size: 15px;
  }
  
  .offering-system {
    margin-top: 14px;
    padding: 12px;
  }
  
  .offering-grid {
    gap: 6px;
  }
  
  .offering-btn {
    padding: 6px 4px;
    font-size: 8px;
  }
  
  .offering-emoji {
    font-size: 13px;
    margin-bottom: 2px;
  }
  
  .offering-text {
    font-size: 7px;
  }
  
  /* 减少粒子数量以提升性能 */
  .magic-particle:nth-child(n+4) {
    display: none;
  }
}

/* 可访问性优化 */
@media (prefers-reduced-motion: reduce) {
  .wish-card,
  .wish-card__fairy,
  .wish-card__fairy-large,
  .aura-element,
  .wish-card__stars,
  .wish-energy-bar,
  .wish-energy-text,
  .wish-energy-icon,
  .magic-particle {
    animation: none !important;
  }
  
  .wish-card__container,
  .wish-card__face,
  .wish-btn,
  .offering-btn {
    transition: none !important;
  }
}