/* ====================================================
   艺星秀 - 艺术分类主题样式
   每个分类拥有独立视觉风格
   ==================================================== */

/* ========== 声乐 vocal - 音浪流淌 ========== */
.theme-vocal {
  --theme-primary: #5b4cff;
  --theme-secondary: #b388ff;
  --theme-accent: #ffd700;
  --theme-bg-grad: linear-gradient(135deg, #1a1a3e 0%, #5b4cff 50%, #b388ff 100%);
  --theme-card-grad: linear-gradient(135deg, #2d2d5e, #4a4a8e);
  --theme-text: #f0f0ff;
  --theme-border: rgba(179,136,255,0.3);
}
.theme-vocal .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
}
.theme-vocal .artist-header::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 Q50,10 100,40 T200,40 T300,40 T400,40 T500,40 T600,40 T700,40 T800,40 T900,40 T1000,40 T1100,40 T1200,40 L1200,80 L0,80 Z' fill='rgba(255,255,255,0.05)'/%3E%3Cpath d='M0,50 Q50,20 100,50 T200,50 T300,50 T400,50 T500,50 T600,50 T700,50 T800,50 T900,50 T1000,50 T1100,50 T1200,50 L1200,80 L0,80 Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
  background-size: cover;
}
.theme-vocal .floating-notes span {
  position: absolute;
  font-size: 1.5rem;
  animation: floatUp 4s ease-in-out infinite;
  opacity: 0.3;
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(15deg); }
}
.theme-vocal .sound-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}
.theme-vocal .sound-wave span {
  width: 4px;
  background: var(--theme-accent);
  border-radius: 2px;
  animation: soundWave 1.2s ease-in-out infinite;
}
.theme-vocal .sound-wave span:nth-child(1) { height: 60%; animation-delay: 0s; }
.theme-vocal .sound-wave span:nth-child(2) { height: 100%; animation-delay: 0.1s; }
.theme-vocal .sound-wave span:nth-child(3) { height: 40%; animation-delay: 0.2s; }
.theme-vocal .sound-wave span:nth-child(4) { height: 80%; animation-delay: 0.3s; }
.theme-vocal .sound-wave span:nth-child(5) { height: 50%; animation-delay: 0.4s; }
@keyframes soundWave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

/* ========== 舞蹈 dance - 律动飞旋 ========== */
.theme-dance {
  --theme-primary: #ff4081;
  --theme-secondary: #ff9100;
  --theme-accent: #ffea00;
  --theme-bg-grad: linear-gradient(135deg, #c2185b 0%, #ff4081 40%, #ff9100 100%);
  --theme-card-grad: linear-gradient(135deg, #8e1849, #c2185b);
  --theme-text: #fff5f5;
  --theme-border: rgba(255,64,129,0.3);
}
.theme-dance .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
}
.theme-dance .artist-header::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.08), transparent, rgba(255,255,255,0.08), transparent);
  animation: spin 15s linear infinite;
}
.theme-dance .dance-arc {
  position: absolute;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  animation: pulse 3s ease-in-out infinite;
}
.theme-dance .dance-arc:nth-child(1) { width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 0s; }
.theme-dance .dance-arc:nth-child(2) { width: 400px; height: 400px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 0.5s; }
.theme-dance .dance-arc:nth-child(3) { width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 1s; }
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%,-50%) scale(0.9); }
  50% { opacity: 0.6; transform: translate(-50%,-50%) scale(1.05); }
}

/* ========== 器乐 instrument - 古韵典雅 ========== */
.theme-instrument {
  --theme-primary: #8d6e63;
  --theme-secondary: #d4a574;
  --theme-accent: #c0a062;
  --theme-bg-grad: linear-gradient(135deg, #3e2723 0%, #5d4037 40%, #8d6e63 100%);
  --theme-card-grad: linear-gradient(135deg, #4e342e, #6d4c41);
  --theme-text: #f5efe6;
  --theme-border: rgba(212,165,116,0.3);
}
.theme-instrument .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
}
.theme-instrument .artist-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(212,165,116,0.05) 20px, rgba(212,165,116,0.05) 21px),
    repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(212,165,116,0.05) 20px, rgba(212,165,116,0.05) 21px);
}
.theme-instrument .string-pattern {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.theme-instrument .string-pattern span {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212,165,116,0.2), transparent);
}

/* ========== 书画 painting - 墨韵丹青 ========== */
.theme-painting {
  --theme-primary: #1a1a1a;
  --theme-secondary: #c62828;
  --theme-accent: #d4a574;
  --theme-bg-grad: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #c62828 100%);
  --theme-card-grad: linear-gradient(135deg, #1a1a1a, #333);
  --theme-text: #f5f5f5;
  --theme-border: rgba(198,40,40,0.3);
}
.theme-painting .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
}
.theme-painting .artist-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(198,40,40,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(212,165,116,0.1) 0%, transparent 50%);
}
.theme-painting .ink-splash {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
  filter: blur(20px);
}

/* ========== 书法 calligraphy - 铁画银钩 ========== */
.theme-calligraphy {
  --theme-primary: #3e2723;
  --theme-secondary: #5d4037;
  --theme-accent: #8b0000;
  --theme-bg-grad: linear-gradient(135deg, #f5f0e8 0%, #e8dcc8 40%, #d7c4a3 100%);
  --theme-card-grad: linear-gradient(135deg, #f5f0e8, #e8dcc8);
  --theme-text: #3e2723;
  --theme-border: rgba(62,39,35,0.2);
}
.theme-calligraphy .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
  color: var(--theme-text);
}
.theme-calligraphy .artist-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
.theme-calligraphy .brush-stroke {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(62,39,35,0.08), transparent);
  height: 2px;
  width: 100%;
}

/* ========== 摄影 photography - 光影定格 ========== */
.theme-photography {
  --theme-primary: #455a64;
  --theme-secondary: #90a4ae;
  --theme-accent: #e0e0e0;
  --theme-bg-grad: linear-gradient(135deg, #263238 0%, #455a64 40%, #90a4ae 100%);
  --theme-card-grad: linear-gradient(135deg, #37474f, #546e7a);
  --theme-text: #eceff1;
  --theme-border: rgba(144,164,174,0.3);
}
.theme-photography .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
}
.theme-photography .artist-header::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 300px; height: 300px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: aperture 4s ease-in-out infinite;
}
.theme-photography .artist-header::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: aperture 4s ease-in-out infinite 0.5s;
}
@keyframes aperture {
  0%, 100% { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%,-50%) scale(1.1); }
}

/* ========== 演员 actor - 聚光灯下 ========== */
.theme-actor {
  --theme-primary: #b71c1c;
  --theme-secondary: #ffc107;
  --theme-accent: #ff6f00;
  --theme-bg-grad: linear-gradient(135deg, #4a0000 0%, #b71c1c 40%, #ffc107 100%);
  --theme-card-grad: linear-gradient(135deg, #6d0000, #b71c1c);
  --theme-text: #fff8e1;
  --theme-border: rgba(255,193,7,0.3);
}
.theme-actor .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
}
.theme-actor .artist-header::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  width: 400px; height: 600px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
  transform: translateX(-50%) rotate(15deg);
  filter: blur(40px);
  animation: spotlight 4s ease-in-out infinite;
}
@keyframes spotlight {
  0%, 100% { transform: translateX(-50%) rotate(15deg); opacity: 0.3; }
  50% { transform: translateX(-30%) rotate(10deg); opacity: 0.5; }
}
.theme-actor .stage-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  background: repeating-linear-gradient(90deg, rgba(74,0,0,0.3), rgba(74,0,0,0.5) 20px, rgba(74,0,0,0.3) 40px);
}
.theme-actor .stage-curtain.left { left: 0; }
.theme-actor .stage-curtain.right { right: 0; }

/* ========== 综合 comprehensive - 星河璀璨 ========== */
.theme-comprehensive {
  --theme-primary: #7c3aed;
  --theme-secondary: #ec4899;
  --theme-accent: #06b6d4;
  --theme-bg-grad: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 40%, #ec4899 100%);
  --theme-card-grad: linear-gradient(135deg, #312e81, #5b21b6);
  --theme-text: #f5f3ff;
  --theme-border: rgba(124,58,237,0.3);
}
.theme-comprehensive .artist-header {
  background: var(--theme-bg-grad);
  position: relative;
  overflow: hidden;
}
.theme-comprehensive .starfield {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 15% 60%, rgba(255,255,255,0.6), transparent);
  background-size: 300px 300px;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ========== 通用主题组件 ========== */
.artist-header {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  text-align: center;
  padding: 40px 20px;
}
.artist-header .avatar {
  border: 4px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  margin-bottom: 16px;
  z-index: 2;
}
.artist-header .stage-name {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 8px;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.artist-header .category-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  font-size: 0.85rem;
  margin-bottom: 12px;
  z-index: 2;
  backdrop-filter: blur(10px);
}
.artist-header .charm-display {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

/* Poster Styles */
.poster-container {
  width: 375px;
  min-height: 667px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.poster-header {
  padding: 40px 24px 30px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.poster-body {
  padding: 24px;
  background: #fff;
}
.poster-footer {
  padding: 16px 24px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  gap: 16px;
}
.poster-qr {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}
.poster-site-name {
  font-size: 0.8rem;
  color: #999;
}

/* Gift Selector */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.gift-item {
  text-align: center;
  padding: 16px 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.gift-item:hover { border-color: var(--primary); transform: translateY(-2px); }
.gift-item.selected { border-color: var(--primary); background: rgba(108,92,231,0.05); }
.gift-item .emoji { font-size: 2rem; }
.gift-item .name { font-size: 0.8rem; margin-top: 4px; }
.gift-item .price { font-size: 0.85rem; font-weight: 700; color: var(--danger); }

/* PK Arena Card */
.pk-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  padding: 24px;
  transition: var(--transition);
}
.pk-card:hover { box-shadow: var(--shadow-hover); }
.pk-battle-field {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.pk-fighter {
  text-align: center;
}
.pk-vs-icon {
  font-size: 2rem;
  font-weight: 900;
  color: var(--danger);
  animation: pulseVs 1.5s ease-in-out infinite;
}
@keyframes pulseVs {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.pk-amount-bar {
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background: var(--border);
  margin-top: 12px;
}
.pk-amount-bar .left { background: var(--primary); transition: width 0.5s; }
.pk-amount-bar .right { background: var(--secondary); transition: width 0.5s; }

/* Countdown */
.countdown {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.countdown-item {
  text-align: center;
}
.countdown-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--danger);
}
.countdown-label {
  font-size: 0.7rem;
  color: var(--text-light);
}