/**
 * ============================================
 * wordit.art 游戏通用组件
 * 版本: v2.5
 * 更新: 2026-04-08
 * ============================================
 */

/* ============================================
   1. 超级按钮 (Super Button)
   大号、有触感、适合儿童点击
   ============================================ */

.super-btn {
  /* 基础样式 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: var(--btn-min-size);
  padding: var(--space-4) var(--space-6);
  
  /* 外观 */
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-inverse);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  
  /* 背景和边框 */
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  border: none;
  border-radius: var(--radius-xl);
  
  /* 3D效果和阴影 */
  box-shadow: 
    0 8px 0 var(--primary-700),
    0 12px 20px rgba(0, 0, 0, 0.2);
  
  /* 动画 */
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  
  /* 硬件加速 */
  transform: translateZ(0);
}

.super-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 10px 0 var(--primary-700),
    0 16px 24px rgba(0, 0, 0, 0.25);
}

.super-btn:active {
  transform: translateY(4px);
  box-shadow: 
    0 4px 0 var(--primary-700),
    0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 颜色变体 */
.super-btn--success {
  background: linear-gradient(135deg, var(--green-400), var(--green-600));
  box-shadow: 0 8px 0 #166534, 0 12px 20px rgba(0, 0, 0, 0.2);
}
.super-btn--success:hover {
  box-shadow: 0 10px 0 #166534, 0 16px 24px rgba(0, 0, 0, 0.25);
}
.super-btn--success:active {
  box-shadow: 0 4px 0 #166534, 0 6px 12px rgba(0, 0, 0, 0.15);
}

.super-btn--warning {
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  box-shadow: 0 8px 0 #C2410C, 0 12px 20px rgba(0, 0, 0, 0.2);
}

.super-btn--danger {
  background: linear-gradient(135deg, var(--error), #DC2626);
  box-shadow: 0 8px 0 #991B1B, 0 12px 20px rgba(0, 0, 0, 0.2);
}

.super-btn--gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: #78350F;
  text-shadow: none;
  box-shadow: 0 8px 0 #A16207, 0 12px 20px rgba(0, 0, 0, 0.2);
}

/* 禁用状态 */
.super-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 0 var(--primary-700);
}

/* ============================================
   2. 游戏卡片 (Game Card)
   ============================================ */

.game-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.4));
  opacity: 0;
  transition: opacity var(--duration-normal);
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.game-card:hover::before {
  opacity: 1;
}

.game-card:active {
  transform: scale(0.98);
  transition-duration: var(--duration-fast);
}

/* 卡片图标容器 */
.game-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

/* ============================================
   3. 选项按钮 (Option Button)
   游戏答题选项专用
   ============================================ */

.option-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.option-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.option-btn--selected {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.option-btn--correct {
  border-color: var(--success);
  background: #F0FDF4;
}

.option-btn--wrong {
  border-color: var(--error);
  background: #FEF2F2;
}

/* 选项字母标记 */
.option-btn__marker {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.option-btn--selected .option-btn__marker {
  background: var(--primary-500);
  color: white;
}

.option-btn--correct .option-btn__marker {
  background: var(--success);
  color: white;
}

.option-btn--wrong .option-btn__marker {
  background: var(--error);
  color: white;
}

/* ============================================
   4. 得分弹窗 (Score Popup)
   ============================================ */

.score-popup {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  
  font-family: var(--font-number);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--gold-500);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  animation: scorePopup 1s var(--ease-out) forwards;
}

@keyframes scorePopup {
  0% {
    transform: scale(0) translateY(20px);
    opacity: 0;
  }
  30% {
    transform: scale(1.3) translateY(-10px);
    opacity: 1;
  }
  70% {
    transform: scale(1) translateY(-30px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(-50px);
    opacity: 0;
  }
}

/* ============================================
   5. 进度条组件 (Progress Bar)
   ============================================ */

.progress-bar {
  width: 100%;
  height: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s var(--ease-out);
  position: relative;
}

.progress-bar__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShine 2s infinite;
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================
   6. 徽章/标签 (Badge)
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.badge--hot {
  background: #FEF3C7;
  color: #D97706;
}

.badge--new {
  background: #DBEAFE;
  color: #2563EB;
}

.badge--limited {
  background: #FEE2E2;
  color: #DC2626;
}

.badge--rare {
  background: #F3E8FF;
  color: #9333EA;
}

/* ============================================
   7. 等级徽章 (Level Badge)
   ============================================ */

.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: var(--space-1) var(--space-3);
  
  font-family: var(--font-number);
  font-size: var(--text-sm);
  font-weight: 700;
  color: white;
  
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* ============================================
   8. 浮动动画 (Float Animation)
   ============================================ */

.float {
  animation: float 3s ease-in-out infinite;
}

.float-delay-1 { animation-delay: 0.5s; }
.float-delay-2 { animation-delay: 1s; }
.float-delay-3 { animation-delay: 1.5s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============================================
   9. 脉冲发光 (Pulse Glow)
   ============================================ */

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
  }
  50% { 
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.8);
  }
}

/* ============================================
   10. 震动反馈 (Shake)
   ============================================ */

.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ============================================
   11. 弹入动画 (Bounce In)
   ============================================ */

.bounce-in {
  animation: bounceIn 0.6s var(--ease-bounce);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   12. 翻转卡片 (Flip Card)
   ============================================ */

.flip-card {
  perspective: 1000px;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

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