@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* 稱號容器基礎樣式 */
.player-title {
  display: inline-block;
  padding: 8px 20px;
  margin: 8px 0;
  border-radius: 25px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1em;
  text-align: center;
  border: 2px solid;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  cursor: default;
}

/* ========================================
   稱號樣式 - default (預設：青藍色)
======================================== */
.player-title.style-default {
  background: linear-gradient(135deg, rgba(0, 191, 255, 0.3) 0%, rgba(0, 150, 255, 0.2) 100%);
  border-color: #00bfff;
  color: #87ceeb;
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.8),
               0 0 20px rgba(0, 191, 255, 0.5);
  box-shadow: 0 4px 15px rgba(0, 191, 255, 0.4);
}

.player-title.style-default:hover {
  box-shadow: 0 6px 25px rgba(0, 191, 255, 0.6);
  transform: translateY(-2px);
}

/* ========================================
   稱號樣式 - rare (稀有：藍紫色)
======================================== */
.player-title.style-rare {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(75, 0, 130, 0.2) 100%);
  border-color: #8a2be2;
  color: #da70d6;
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.8),
               0 0 20px rgba(138, 43, 226, 0.5),
               0 0 30px rgba(138, 43, 226, 0.3);
  box-shadow: 0 4px 15px rgba(138, 43, 226, 0.5);
  animation: rarePulse 2s ease-in-out infinite;
}

@keyframes rarePulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.5);
  }
  50% {
    box-shadow: 0 6px 25px rgba(138, 43, 226, 0.8);
  }
}

.player-title.style-rare:hover {
  transform: translateY(-2px);
}

/* ========================================
   稱號樣式 - epic (史詩:金黃色)
======================================== */
.player-title.style-epic {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.4) 0%, rgba(255, 165, 0, 0.3) 100%);
  border-color: #ffd700;
  color: #fff5cc;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1),
               0 0 30px rgba(255, 215, 0, 0.7),
               0 0 45px rgba(255, 215, 0, 0.4);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6);
  animation: epicShine 3s ease-in-out infinite;
}

@keyframes epicShine {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6);
    border-color: #ffd700;
  }
  50% {
    box-shadow: 0 8px 35px rgba(255, 215, 0, 1);
    border-color: #ffed4e;
  }
}

.player-title.style-epic:hover {
  transform: translateY(-2px) scale(1.05);
}

/* ========================================
   稱號樣式 - legend (傳說：綠色發光)
======================================== */
.player-title.style-legend {
  background: linear-gradient(135deg, rgba(0, 255, 127, 0.4) 0%, rgba(0, 200, 100, 0.3) 100%);
  border-color: #00ff7f;
  color: #ccffee;
  text-shadow: 0 0 15px rgba(0, 255, 127, 1),
               0 0 30px rgba(0, 255, 127, 0.8),
               0 0 45px rgba(0, 255, 127, 0.5);
  box-shadow: 0 4px 20px rgba(0, 255, 127, 0.7);
  animation: legendGlow 2.5s ease-in-out infinite;
}

@keyframes legendGlow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 255, 127, 0.7),
                0 0 40px rgba(0, 255, 127, 0.4);
  }
  50% {
    box-shadow: 0 8px 40px rgba(0, 255, 127, 1),
                0 0 60px rgba(0, 255, 127, 0.7);
  }
}

.player-title.style-legend:hover {
  transform: translateY(-2px) scale(1.05);
}

/* ========================================
   稱號樣式 - event (活動限定：粉紅色)
======================================== */
.player-title.style-event {
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.4) 0%, rgba(255, 20, 147, 0.3) 100%);
  border-color: #ff69b4;
  color: #ffe4f3;
  text-shadow: 0 0 15px rgba(255, 105, 180, 1),
               0 0 30px rgba(255, 105, 180, 0.7);
  box-shadow: 0 4px 20px rgba(255, 105, 180, 0.6);
  animation: eventBlink 1.5s ease-in-out infinite;
}

@keyframes eventBlink {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 4px 20px rgba(255, 105, 180, 0.6);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 6px 30px rgba(255, 105, 180, 0.9);
  }
}

.player-title.style-event:hover {
  transform: translateY(-2px);
}

/* ========================================
   稱號樣式 - special (特殊：彩虹漸變)
======================================== */
.player-title.style-special {
  background: linear-gradient(135deg,
    rgba(255, 0, 0, 0.3) 0%,
    rgba(255, 127, 0, 0.3) 16%,
    rgba(255, 255, 0, 0.3) 32%,
    rgba(0, 255, 0, 0.3) 48%,
    rgba(0, 127, 255, 0.3) 64%,
    rgba(139, 0, 255, 0.3) 80%,
    rgba(255, 0, 255, 0.3) 100%);
  background-size: 200% 200%;
  border: 2px solid;
  border-image: linear-gradient(135deg,
    #ff0000 0%,
    #ff7f00 16%,
    #ffff00 32%,
    #00ff00 48%,
    #007fff 64%,
    #8b00ff 80%,
    #ff00ff 100%) 1;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
               0 0 20px rgba(255, 0, 255, 0.6),
               0 0 30px rgba(0, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(255, 0, 255, 0.5),
              0 0 40px rgba(0, 255, 255, 0.3);
  animation: rainbowShift 4s linear infinite, specialPulse 2s ease-in-out infinite;
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes specialPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 0, 255, 0.5),
                0 0 40px rgba(0, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 8px 35px rgba(255, 0, 255, 0.8),
                0 0 60px rgba(0, 255, 255, 0.6);
  }
}

.player-title.style-special:hover {
  transform: translateY(-2px) scale(1.08);
}

/* ========================================
   稱號卡片樣式 (用於 title.html 選擇頁面)
======================================== */
.title-card {
  background: linear-gradient(135deg, rgba(15, 15, 35, 0.9) 0%, rgba(25, 25, 55, 0.7) 100%);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 15px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.title-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.05) 50%, transparent 70%);
  animation: cardShine 4s ease-in-out infinite;
  pointer-events: none;
}

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

.title-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.4);
  border-color: rgba(0, 255, 255, 0.5);
}

.title-card.selected {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 150, 255, 0.15) 100%);
  border-color: #00ffff;
  border-width: 3px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

.title-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.title-card.locked:hover {
  transform: none;
  box-shadow: none;
}

.title-card-name {
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.title-card-info {
  color: #b8e6ff;
  font-size: 0.85em;
  line-height: 1.6;
  margin-top: 10px;
  font-family: 'Noto Sans TC', sans-serif;
  position: relative;
  z-index: 1;
}

.title-card.locked .title-card-info::after {
  content: ' 🔒';
  color: #ff6b6b;
}

/* ========================================
   響應式設計
======================================== */
@media (max-width: 768px) {
  .player-title {
    font-size: 0.9em;
    padding: 6px 16px;
  }

  .title-card {
    padding: 15px;
  }

  .title-card-name .player-title {
    font-size: 0.85em;
    padding: 6px 14px;
  }

  .title-card-info {
    font-size: 0.8em;
  }
}

@media (max-width: 480px) {
  .player-title {
    font-size: 0.85em;
    padding: 5px 14px;
  }

  .title-card {
    padding: 12px;
  }
}

/* ========================================
   稱號樣式 - golden (黃金般閃爍螢光)
======================================== */
.player-title.style-golden {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.5) 0%, rgba(255, 185, 0, 0.4) 50%, rgba(255, 215, 0, 0.5) 100%);
  background-size: 200% 200%;
  border-color: #ffd700;
  color: #fffacd;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1),
               0 0 30px rgba(255, 215, 0, 0.8),
               0 0 45px rgba(255, 215, 0, 0.5),
               0 2px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.7),
              0 0 40px rgba(255, 215, 0, 0.4);
  animation: goldenSparkle 2s ease-in-out infinite, goldenFlow 3s linear infinite;
  border-radius: 0px;
}

@keyframes goldenSparkle {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.7),
                0 0 40px rgba(255, 215, 0, 0.4);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 8px 40px rgba(255, 215, 0, 1),
                0 0 60px rgba(255, 215, 0, 0.8),
                inset 0 0 20px rgba(255, 255, 255, 0.3);
    filter: brightness(1.3);
  }
}

@keyframes goldenFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.player-title.style-golden:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.4);
}

/* ========================================
   稱號樣式 - purple-magic (充滿紫色魔力的氛圍)
======================================== */
.player-title.style-purple-magic {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.4) 0%, rgba(75, 0, 130, 0.3) 50%, rgba(148, 0, 211, 0.4) 100%);
  border-color: #9370db;
  color: #e6e6fa;
  text-shadow: 0 0 15px rgba(138, 43, 226, 1),
               0 0 30px rgba(138, 43, 226, 0.8),
               0 0 45px rgba(148, 0, 211, 0.6);
  box-shadow: 0 4px 20px rgba(138, 43, 226, 0.6),
              0 0 40px rgba(148, 0, 211, 0.4);
  animation: purpleMagic 2.5s ease-in-out infinite;
  position: relative;
  /* overflow: visible 已移除，避免超出框框 */
}

.player-title.style-purple-magic::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(138, 43, 226, 0.5), transparent);
  border-radius: 25px;
  animation: purpleMagicOrbit 3s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes purpleMagic {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.6),
                0 0 40px rgba(148, 0, 211, 0.4);
  }
  50% {
    box-shadow: 0 8px 35px rgba(138, 43, 226, 0.9),
                0 0 60px rgba(148, 0, 211, 0.7),
                inset 0 0 15px rgba(148, 0, 211, 0.4);
  }
}

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

.player-title.style-purple-magic:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(138, 43, 226, 1),
              0 0 80px rgba(148, 0, 211, 0.8);
}

/* ========================================
   稱號樣式 - crimson-magic (充滿深桃紅色的魔力氛圍)
======================================== */
.player-title.style-crimson-magic {
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.4) 0%, rgba(199, 21, 133, 0.3) 50%, rgba(255, 20, 147, 0.4) 100%);
  border-color: #dc143c;
  color: #ffe4e1;
  text-shadow: 0 0 15px rgba(220, 20, 60, 1),
               0 0 30px rgba(220, 20, 60, 0.8),
               0 0 45px rgba(255, 20, 147, 0.6);
  box-shadow: 0 4px 20px rgba(220, 20, 60, 0.7),
              0 0 40px rgba(255, 20, 147, 0.5);
  animation: crimsonPulse 2s ease-in-out infinite, crimsonWave 3s ease-in-out infinite;
}

@keyframes crimsonPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(220, 20, 60, 0.7),
                0 0 40px rgba(255, 20, 147, 0.5);
    border-color: #dc143c;
  }
  50% {
    box-shadow: 0 8px 40px rgba(220, 20, 60, 1),
                0 0 70px rgba(255, 20, 147, 0.9),
                inset 0 0 20px rgba(255, 105, 180, 0.5);
    border-color: #ff1493;
  }
}

@keyframes crimsonWave {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(-10deg) brightness(1.2); }
}

.player-title.style-crimson-magic:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 50px rgba(220, 20, 60, 1),
              0 0 90px rgba(255, 20, 147, 1);
}

/* ========================================
   稱號樣式 - frost (雪地紛飛的感覺)
======================================== */
.player-title.style-frost {
  background: linear-gradient(135deg, rgba(176, 224, 230, 0.4) 0%, rgba(240, 248, 255, 0.3) 50%, rgba(224, 255, 255, 0.4) 100%);
  border-color: #b0e0e6;
  color: #f0ffff;
  text-shadow: 0 0 15px rgba(176, 224, 230, 1),
               0 0 30px rgba(176, 224, 230, 0.8),
               0 0 45px rgba(240, 248, 255, 0.6),
               1px 1px 3px rgba(135, 206, 250, 0.5);
  box-shadow: 0 4px 20px rgba(176, 224, 230, 0.6),
              0 0 40px rgba(240, 248, 255, 0.4);
  animation: frostShimmer 2s ease-in-out infinite;
  position: relative;
}

.player-title.style-frost::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 1%);
  background-size: 10% 10%;
  animation: snowfall 4s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes frostShimmer {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(176, 224, 230, 0.6),
                0 0 40px rgba(240, 248, 255, 0.4);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 6px 30px rgba(176, 224, 230, 0.9),
                0 0 60px rgba(240, 248, 255, 0.7),
                inset 0 0 15px rgba(255, 255, 255, 0.3);
    filter: brightness(1.3);
  }
}

@keyframes snowfall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: translateY(100%) rotate(360deg);
    opacity: 0;
  }
}

.player-title.style-frost:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 35px rgba(176, 224, 230, 1),
              0 0 70px rgba(240, 248, 255, 0.9);
}

/* ========================================
   稱號樣式 - death (充滿死亡氛圍的感覺)
======================================== */
.player-title.style-death {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.6) 50%, rgba(60, 0, 60, 0.7) 100%);
  border-color: #4a0e4e;
  color: #8b008b;
  text-shadow: 0 0 15px rgba(128, 0, 128, 1),
               0 0 30px rgba(128, 0, 128, 0.8),
               0 0 45px rgba(75, 0, 130, 0.6),
               0 2px 10px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 20px rgba(75, 0, 130, 0.7),
              0 0 40px rgba(128, 0, 128, 0.5),
              inset 0 0 20px rgba(0, 0, 0, 0.8);
  animation: deathAura 3s ease-in-out infinite;
  position: relative;
}

.player-title.style-death::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, transparent 30%, rgba(75, 0, 130, 0.3) 70%, transparent 100%);
  animation: deathPulse 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes deathAura {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(75, 0, 130, 0.7),
                0 0 40px rgba(128, 0, 128, 0.5),
                inset 0 0 20px rgba(0, 0, 0, 0.8);
    border-color: #4a0e4e;
  }
  50% {
    box-shadow: 0 8px 40px rgba(75, 0, 130, 1),
                0 0 70px rgba(128, 0, 128, 0.9),
                inset 0 0 30px rgba(75, 0, 130, 0.5);
    border-color: #800080;
  }
}

@keyframes deathPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.8;
  }
}

.player-title.style-death:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 50px rgba(75, 0, 130, 1),
              0 0 90px rgba(128, 0, 128, 1);
  color: #9370db;
}

/* ========================================
   無稱號狀態
======================================== */
.player-title.no-title {
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.2) 0%, rgba(50, 50, 50, 0.1) 100%);
  border-color: #666;
  color: #999;
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-style: italic;
  cursor: pointer;
}

.player-title.no-title:hover {
  border-color: #00bfff;
  color: #87ceeb;
  box-shadow: 0 4px 15px rgba(0, 191, 255, 0.4);
}

/* ========================================
   稱號樣式 - poop (拉了一坨大的)
======================================== */
.player-title.style-poop {
  background: linear-gradient(135deg, rgba(101, 67, 33, 0.6) 0%, rgba(139, 90, 43, 0.5) 50%, rgba(101, 67, 33, 0.6) 100%);
  border: 3px solid #8b5a2b;
  color: #d2b48c;
  text-shadow: 0 0 10px rgba(139, 90, 43, 0.8),
               0 2px 5px rgba(0, 0, 0, 0.8);
  box-shadow: 0 6px 20px rgba(101, 67, 33, 0.7),
              inset 0 0 20px rgba(139, 90, 43, 0.4);
  animation: poopStink 3s ease-in-out infinite;
  position: relative;
  border-radius: 40% 30% 35% 45% / 30% 45% 35% 40%;
}

.player-title.style-poop::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(139, 90, 43, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  animation: poopSmell 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes poopStink {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(101, 67, 33, 0.7),
                inset 0 0 20px rgba(139, 90, 43, 0.4);
  }
  50% {
    box-shadow: 0 8px 30px rgba(101, 67, 33, 0.9),
                inset 0 0 30px rgba(139, 90, 43, 0.6);
  }
}

@keyframes poopSmell {
  0% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(-15px) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-25px) scale(2);
  }
}

.player-title.style-poop:hover {
  transform: translateY(-2px) rotate(-2deg);
}

/* ========================================
   稱號樣式 - royal-academy (皇家學院)
======================================== */
.player-title.style-royal-academy {
  background:
    repeating-linear-gradient(90deg, rgba(255, 140, 0, 0.1) 0px, rgba(255, 140, 0, 0.1) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(0deg, rgba(255, 140, 0, 0.1) 0px, rgba(255, 140, 0, 0.1) 10px, transparent 10px, transparent 20px),
    linear-gradient(135deg, rgba(255, 140, 0, 0.5) 0%, rgba(218, 165, 32, 0.4) 50%, rgba(255, 140, 0, 0.5) 100%);
  border: 3px solid #ff8c00;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.9),
               0 0 25px rgba(255, 140, 0, 0.7),
               0 2px 5px rgba(139, 69, 19, 0.8);
  box-shadow: 0 4px 20px rgba(255, 140, 0, 0.8),
              0 0 40px rgba(218, 165, 32, 0.5),
              inset 0 0 20px rgba(255, 215, 0, 0.3);
  animation: royalGlow 3s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  font-family: 'Georgia', serif;
}

.player-title.style-royal-academy::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 3px;
  pointer-events: none;
}

.player-title.style-royal-academy::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
  animation: royalShine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes royalGlow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.8),
                0 0 40px rgba(218, 165, 32, 0.5),
                inset 0 0 20px rgba(255, 215, 0, 0.3);
    border-color: #ff8c00;
  }
  50% {
    box-shadow: 0 6px 30px rgba(255, 140, 0, 1),
                0 0 60px rgba(218, 165, 32, 0.8),
                inset 0 0 30px rgba(255, 215, 0, 0.5);
    border-color: #ffd700;
  }
}

@keyframes royalShine {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

.player-title.style-royal-academy:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - hunter (追擊者)
======================================== */
.player-title.style-hunter {
  background: linear-gradient(135deg, rgba(0, 80, 0, 0.8) 0%, rgba(0, 100, 0, 0.7) 25%, rgba(0, 60, 0, 0.9) 50%, rgba(0, 100, 0, 0.7) 75%, rgba(0, 80, 0, 0.8) 100%);
  border: 3px solid #00ff00;
  color: #7fff00;
  text-shadow: 0 0 20px rgba(0, 255, 0, 1),
               0 0 40px rgba(0, 255, 0, 0.8),
               0 2px 10px rgba(0, 0, 0, 1),
               0 0 5px rgba(127, 255, 0, 0.9);
  box-shadow: 0 4px 25px rgba(0, 255, 0, 0.9),
              0 0 50px rgba(0, 150, 0, 0.7),
              inset 0 0 25px rgba(0, 255, 0, 0.4),
              inset 0 0 40px rgba(0, 100, 0, 0.6);
  animation: hunterIntensePulse 1.5s ease-in-out infinite;
  position: relative;
  border-radius: 8px;
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%);
  font-weight: 900;
  letter-spacing: 1px;
}

.player-title.style-hunter::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.9), rgba(127, 255, 0, 0.7), transparent);
  animation: hunterBlitz 2s ease-in-out infinite;
  pointer-events: none;
  filter: blur(2px);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
}

.player-title.style-hunter::after {
  content: '⚡';
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  color: #7fff00;
  font-size: 1.8em;
  opacity: 0;
  animation: hunterBolt 2s ease-in-out infinite;
  text-shadow: 0 0 15px rgba(0, 255, 0, 1), 0 0 30px rgba(127, 255, 0, 0.8);
}

@keyframes hunterIntensePulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(0, 255, 0, 0.9),
                0 0 50px rgba(0, 150, 0, 0.7),
                inset 0 0 25px rgba(0, 255, 0, 0.4),
                inset 0 0 40px rgba(0, 100, 0, 0.6);
    border-color: #00ff00;
  }
  50% {
    box-shadow: 0 6px 40px rgba(0, 255, 0, 1),
                0 0 80px rgba(0, 255, 0, 1),
                0 0 120px rgba(127, 255, 0, 0.8),
                inset 0 0 35px rgba(127, 255, 0, 0.7),
                inset 0 0 50px rgba(0, 255, 0, 0.8);
    border-color: #7fff00;
  }
}

@keyframes hunterBlitz {
  0%, 20% {
    left: -100%;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  45% {
    left: 150%;
    opacity: 1;
  }
  50%, 100% {
    left: 150%;
    opacity: 0;
  }
}

@keyframes hunterBolt {
  0%, 40% {
    right: -35px;
    opacity: 0;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
  45% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2) rotate(15deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(-15deg);
  }
  55% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1) rotate(10deg);
  }
  65% {
    right: -45px;
    opacity: 0;
    transform: translateY(-50%) scale(0.8) rotate(0deg);
  }
  100% {
    right: -45px;
    opacity: 0;
  }
}

.player-title.style-hunter:hover {
  transform: translateY(-3px) scale(1.02);
  animation: hunterIntensePulse 0.3s ease-in-out infinite;
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - jester (嗤笑道化)
======================================== */
.player-title.style-jester {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.8) 25%,
    rgba(255, 255, 255, 0.8) 25%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.8) 75%,
    rgba(255, 255, 255, 0.8) 75%,
    rgba(255, 255, 255, 0.8) 100%);
  background-size: 40px 100%;
  border: 3px solid;
  border-image: linear-gradient(45deg, #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75%) 1;
  color: #ff0000;
  text-shadow: -2px -2px 0 #000,
               2px 2px 0 #000,
               0 0 20px rgba(255, 0, 0, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
              inset 0 0 30px rgba(255, 255, 255, 0.3);
  animation: jesterLaugh 3s ease-in-out infinite, jesterShift 5s linear infinite;
  position: relative;
  border-radius: 20px;
  font-weight: 900;
}

.player-title.style-jester::before {
  content: '😈';
  position: absolute;
  top: -25px;
  left: -15px;
  font-size: 1.8em;
  animation: jesterFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));
}

.player-title.style-jester::after {
  content: '🃏';
  position: absolute;
  bottom: -25px;
  right: -15px;
  font-size: 1.8em;
  animation: jesterFloat 2s ease-in-out infinite reverse;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

@keyframes jesterLaugh {
  0%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-3deg);
  }
  20% {
    transform: rotate(3deg);
  }
  30% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(0deg);
  }
}

@keyframes jesterShift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

@keyframes jesterFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(15deg);
  }
}

.player-title.style-jester:hover {
  animation: jesterLaugh 0.5s ease-in-out infinite, jesterShift 1s linear infinite;
  transform: scale(1.05);
}

/* ========================================
   稱號樣式 - silent-cosmos (寂靜深宇)
======================================== */
.player-title.style-silent-cosmos {
  background: radial-gradient(circle at 30% 40%, rgba(25, 0, 51, 0.9) 0%, rgba(10, 0, 30, 0.95) 50%, rgba(0, 0, 15, 1) 100%);
  border: 2px solid rgba(75, 0, 130, 0.6);
  color: #b19cd9;
  text-shadow: 0 0 20px rgba(138, 43, 226, 0.9),
               0 0 40px rgba(75, 0, 130, 0.7),
               0 0 60px rgba(138, 43, 226, 0.5);
  box-shadow: 0 4px 25px rgba(75, 0, 130, 0.8),
              0 0 50px rgba(25, 0, 51, 0.6),
              inset 0 0 30px rgba(138, 43, 226, 0.3);
  animation: cosmosBreath 5s ease-in-out infinite;
  position: relative;
  border-radius: 50px;
}

.player-title.style-silent-cosmos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(3px 3px at 15% 20%, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 45% 30%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 70% 50%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(3px 3px at 30% 70%, rgba(138, 43, 226, 1), transparent),
    radial-gradient(2px 2px at 85% 40%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 60% 80%, rgba(75, 0, 130, 1), transparent),
    radial-gradient(2px 2px at 20% 60%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(3px 3px at 90% 75%, rgba(138, 43, 226, 0.9), transparent),
    radial-gradient(2px 2px at 25% 35%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 55% 15%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 75% 65%, rgba(138, 43, 226, 0.8), transparent),
    radial-gradient(3px 3px at 10% 85%, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 40% 55%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 65% 25%, rgba(138, 43, 226, 0.9), transparent),
    radial-gradient(2px 2px at 80% 90%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(3px 3px at 50% 45%, rgba(255, 255, 255, 1), transparent);
  animation: cosmosStars 20s linear infinite;
  pointer-events: none;
  border-radius: 50px;
}

.player-title.style-silent-cosmos::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, transparent 30%, rgba(138, 43, 226, 0.2) 50%, transparent 70%);
  animation: cosmosAura 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes cosmosBreath {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(75, 0, 130, 0.8),
                0 0 50px rgba(25, 0, 51, 0.6),
                inset 0 0 30px rgba(138, 43, 226, 0.3);
    border-color: rgba(75, 0, 130, 0.6);
  }
  50% {
    box-shadow: 0 6px 40px rgba(75, 0, 130, 1),
                0 0 80px rgba(138, 43, 226, 0.9),
                inset 0 0 50px rgba(138, 43, 226, 0.5);
    border-color: rgba(138, 43, 226, 0.8);
  }
}

@keyframes cosmosStars {
  0%, 100% {
    opacity: 0.8;
    transform: rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: rotate(180deg);
  }
}

@keyframes cosmosAura {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.6;
  }
}

.player-title.style-silent-cosmos:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 50px rgba(75, 0, 130, 1),
              0 0 100px rgba(138, 43, 226, 1);
}

/* ========================================
   稱號樣式 - deep-ocean (深海霸主)
======================================== */
.player-title.style-deep-ocean {
  background: linear-gradient(135deg, rgba(0, 51, 102, 0.8) 0%, rgba(0, 0, 128, 0.7) 50%, rgba(0, 51, 102, 0.8) 100%);
  border: 3px solid #006994;
  color: #87ceeb;
  text-shadow: 0 0 15px rgba(0, 105, 148, 1),
               0 0 30px rgba(0, 105, 148, 0.8),
               0 0 45px rgba(0, 191, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0, 105, 148, 0.8),
              0 0 40px rgba(0, 51, 102, 0.6),
              inset 0 0 20px rgba(0, 191, 255, 0.3);
  animation: oceanWave 4s ease-in-out infinite;
  position: relative;
  border-radius: 50% 45% 48% 52% / 45% 50% 50% 55%;
}

.player-title.style-deep-ocean::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 191, 255, 0.2) 30%,
    transparent 60%,
    rgba(0, 191, 255, 0.1) 80%,
    transparent 100%);
  animation: oceanFlow 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: 50% 45% 48% 52% / 45% 50% 50% 55%;
}

@keyframes oceanWave {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 105, 148, 0.8),
                0 0 40px rgba(0, 51, 102, 0.6),
                inset 0 0 20px rgba(0, 191, 255, 0.3);
    border-radius: 50% 45% 48% 52% / 45% 50% 50% 55%;
  }
  50% {
    box-shadow: 0 6px 30px rgba(0, 105, 148, 1),
                0 0 60px rgba(0, 191, 255, 0.9),
                inset 0 0 30px rgba(0, 191, 255, 0.5);
    border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
  }
}

@keyframes oceanFlow {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0.8;
  }
}

.player-title.style-deep-ocean:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0, 105, 148, 1),
              0 0 80px rgba(0, 191, 255, 1);
}

/* ========================================
   稱號樣式 - sakura (櫻花飄零)
======================================== */
.player-title.style-sakura {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.5) 0%, rgba(255, 192, 203, 0.4) 50%, rgba(255, 182, 193, 0.5) 100%);
  border: 2px solid #ffb6c1;
  color: #fff0f5;
  text-shadow: 0 0 15px rgba(255, 182, 193, 1),
               0 0 30px rgba(255, 192, 203, 0.8),
               0 2px 8px rgba(219, 112, 147, 0.6);
  box-shadow: 0 4px 20px rgba(255, 182, 193, 0.7),
              0 0 40px rgba(255, 192, 203, 0.5);
  animation: sakuraFloat 4s ease-in-out infinite;
  position: relative;
  border-radius: 20px 50% 20px 50%;
}

.player-title.style-sakura::before {
  content: '🌸';
  position: absolute;
  top: -15px;
  left: 10%;
  font-size: 1.2em;
  animation: petalFall1 4s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.8));
}

.player-title.style-sakura::after {
  content: '🌸';
  position: absolute;
  top: -10px;
  right: 15%;
  font-size: 1em;
  animation: petalFall2 5s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.8));
}

@keyframes sakuraFloat {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 182, 193, 0.7),
                0 0 40px rgba(255, 192, 203, 0.5);
  }
  50% {
    box-shadow: 0 6px 30px rgba(255, 182, 193, 1),
                0 0 60px rgba(255, 192, 203, 0.8);
  }
}

@keyframes petalFall1 {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes petalFall2 {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(120px) rotate(-360deg);
    opacity: 0;
  }
}

.player-title.style-sakura:hover {
  transform: translateY(-2px) rotate(2deg);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - shadow-assassin (暗影刺客)
======================================== */
.player-title.style-shadow-assassin {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(40, 40, 60, 0.8) 50%, rgba(20, 20, 20, 0.9) 100%);
  border: 2px solid rgba(120, 120, 180, 0.7);
  color: #b8b8e6;
  text-shadow: 0 0 15px rgba(120, 120, 180, 1),
               0 0 30px rgba(140, 140, 200, 0.9),
               0 2px 10px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9),
              0 0 40px rgba(120, 120, 180, 0.6),
              inset 0 0 30px rgba(0, 0, 0, 0.8);
  animation: shadowFade 3s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 5%);
}

.player-title.style-shadow-assassin::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(140, 140, 200, 0.8), transparent);
  animation: shadowStrike 8s ease-in-out infinite;
  pointer-events: none;
}

.player-title.style-shadow-assassin::after {
  content: '⚔';
  position: absolute;
  right: 120%;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  color: #b8b8e6;
  font-size: 1.3em;
  opacity: 0;
  animation: bladeSlash 8s ease-in-out infinite;
  text-shadow: 0 0 15px rgba(120, 120, 180, 1), 0 0 25px rgba(140, 140, 200, 0.8);
}

@keyframes shadowFade {
  0%, 100% {
    opacity: 0.8;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9),
                0 0 40px rgba(120, 120, 180, 0.6),
                inset 0 0 30px rgba(0, 0, 0, 0.8);
  }
  50% {
    opacity: 1;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 1),
                0 0 60px rgba(120, 120, 180, 0.9),
                inset 0 0 40px rgba(120, 120, 180, 0.6);
  }
}

@keyframes shadowStrike {
  0%, 60% {
    left: -100%;
    opacity: 0;
  }
  65% {
    opacity: 0.8;
  }
  85% {
    left: 100%;
    opacity: 0.8;
  }
  90%, 100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes bladeSlash {
  0%, 60% {
    right: 120%;
    opacity: 0;
    transform: translateY(-50%) rotate(-45deg);
  }
  65% {
    opacity: 1;
  }
  85% {
    right: -120%;
    opacity: 1;
    transform: translateY(-50%) rotate(-135deg);
  }
  90%, 100% {
    right: -120%;
    opacity: 0;
    transform: translateY(-50%) rotate(-135deg);
  }
}

.player-title.style-shadow-assassin:hover {
  transform: translateY(-2px);
  opacity: 1;
  animation: shadowFade 1s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - holy-light (聖光使者)
======================================== */
.player-title.style-holy-light {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 250, 205, 0.5) 50%, rgba(255, 255, 255, 0.6) 100%);
  border: 3px solid #fffacd;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.9),
               0 0 40px rgba(255, 215, 0, 0.7),
               0 2px 8px rgba(255, 215, 0, 0.8);
  box-shadow: 0 4px 25px rgba(255, 215, 0, 0.9),
              0 0 50px rgba(255, 255, 255, 0.8),
              inset 0 0 30px rgba(255, 255, 255, 0.5);
  animation: holyRadiance 3s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
}

.player-title.style-holy-light::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.3) 45deg,
      transparent 90deg,
      transparent 90deg,
      rgba(255, 215, 0, 0.3) 135deg,
      transparent 180deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.3) 225deg,
      transparent 270deg,
      transparent 270deg,
      rgba(255, 215, 0, 0.3) 315deg,
      transparent 360deg);
  animation: holyRotate 8s linear infinite;
  pointer-events: none;
  z-index: -1;
}

.player-title.style-holy-light::after {
  content: '✨';
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: holySparkle 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1));
}

@keyframes holyRadiance {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 215, 0, 0.9),
                0 0 50px rgba(255, 255, 255, 0.8),
                inset 0 0 30px rgba(255, 255, 255, 0.5);
    filter: brightness(1.2);
  }
  50% {
    box-shadow: 0 8px 50px rgba(255, 215, 0, 1),
                0 0 100px rgba(255, 255, 255, 1),
                inset 0 0 50px rgba(255, 215, 0, 0.7);
    filter: brightness(1.5);
  }
}

@keyframes holyRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes holySparkle {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.3) rotate(180deg);
  }
}

.player-title.style-holy-light:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.6);
}

/* ========================================
   稱號樣式 - mech-core (機械核心)
======================================== */
.player-title.style-mech-core {
  background:
    linear-gradient(45deg, rgba(192, 192, 192, 0.1) 25%, transparent 25%, transparent 75%, rgba(192, 192, 192, 0.1) 75%),
    linear-gradient(45deg, rgba(192, 192, 192, 0.1) 25%, transparent 25%, transparent 75%, rgba(192, 192, 192, 0.1) 75%),
    linear-gradient(135deg, rgba(169, 169, 169, 0.6) 0%, rgba(128, 128, 128, 0.5) 50%, rgba(169, 169, 169, 0.6) 100%);
  background-size: 10px 10px, 10px 10px, 100% 100%;
  background-position: 0 0, 5px 5px, 0 0;
  border: 3px solid #c0c0c0;
  color: #e0e0e0;
  text-shadow: 0 0 15px rgba(0, 255, 255, 1),
               0 0 30px rgba(0, 191, 255, 0.8),
               0 2px 5px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 20px rgba(128, 128, 128, 0.8),
              0 0 40px rgba(0, 255, 255, 0.6),
              inset 0 0 20px rgba(192, 192, 192, 0.4);
  animation: mechPulse 2s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  font-family: 'Courier New', monospace;
}

.player-title.style-mech-core::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 3px;
  animation: mechScan 3s linear infinite;
  pointer-events: none;
}

.player-title.style-mech-core::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
  animation: mechScanLine 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mechPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(128, 128, 128, 0.8),
                0 0 40px rgba(0, 255, 255, 0.6),
                inset 0 0 20px rgba(192, 192, 192, 0.4);
    border-color: #c0c0c0;
  }
  50% {
    box-shadow: 0 6px 30px rgba(128, 128, 128, 1),
                0 0 60px rgba(0, 255, 255, 0.9),
                inset 0 0 30px rgba(0, 255, 255, 0.5);
    border-color: #00ffff;
  }
}

@keyframes mechScan {
  0%, 100% {
    border-color: rgba(0, 255, 255, 0.5);
  }
  50% {
    border-color: rgba(0, 255, 255, 1);
  }
}

@keyframes mechScanLine {
  0% {
    top: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.player-title.style-mech-core:hover {
  transform: translateY(-2px);
  animation: mechPulse 0.5s ease-in-out infinite;
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - neon-electric (霓虹電光)
======================================== */
.player-title.style-neon-electric {
  background: linear-gradient(135deg, rgba(0, 191, 255, 0.5) 0%, rgba(0, 123, 255, 0.4) 50%, rgba(138, 43, 226, 0.5) 100%);
  border: 3px solid;
  border-color: #00d9ff;
  color: #e0f7ff;
  text-shadow: 0 0 20px rgba(0, 217, 255, 1),
               0 0 40px rgba(0, 217, 255, 0.8),
               0 0 60px rgba(0, 191, 255, 0.6),
               0 0 80px rgba(138, 43, 226, 0.4);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.8),
              0 0 30px rgba(0, 191, 255, 0.6),
              inset 0 0 15px rgba(0, 217, 255, 0.3);
  animation: neonFlicker 0.15s infinite alternate, neonPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 8px;
}

@keyframes neonFlicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1.2);
  }
  50% {
    opacity: 0.95;
    filter: brightness(1);
  }
}

@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.8),
                0 0 30px rgba(0, 191, 255, 0.6),
                inset 0 0 15px rgba(0, 217, 255, 0.3);
    border-color: #00d9ff;
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 217, 255, 1),
                0 0 50px rgba(0, 191, 255, 0.9),
                0 0 75px rgba(138, 43, 226, 0.6),
                inset 0 0 25px rgba(0, 217, 255, 0.5);
    border-color: #00ffff;
  }
}

.player-title.style-neon-electric:hover {
  transform: translateY(-3px);
  filter: brightness(1.4);
}

/* ========================================
   稱號樣式 - inferno (烈焰地獄)
======================================== */
.player-title.style-inferno {
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.5) 0%, rgba(255, 140, 0, 0.4) 25%, rgba(255, 69, 0, 0.5) 50%, rgba(139, 0, 0, 0.6) 100%);
  background-size: 200% 200%;
  border-color: #ff4500;
  color: #fffacd;
  text-shadow: 0 0 15px rgba(255, 69, 0, 1),
               0 0 30px rgba(255, 140, 0, 0.9),
               0 0 45px rgba(255, 69, 0, 0.7),
               0 2px 10px rgba(139, 0, 0, 0.8);
  box-shadow: 0 4px 20px rgba(255, 69, 0, 0.8),
              0 0 40px rgba(255, 140, 0, 0.6),
              inset 0 0 20px rgba(255, 69, 0, 0.4);
  animation: infernoFlame 2s ease-in-out infinite, infernoFlow 3s linear infinite;
  position: relative;
  border-radius: 15px;
}

.player-title.style-inferno::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 10%;
  right: 10%;
  height: 15px;
  background: linear-gradient(to top, transparent, rgba(255, 69, 0, 0.6));
  filter: blur(8px);
  animation: flameWave 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes infernoFlame {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 69, 0, 0.8),
                0 0 40px rgba(255, 140, 0, 0.6),
                inset 0 0 20px rgba(255, 69, 0, 0.4);
  }
  50% {
    box-shadow: 0 8px 40px rgba(255, 69, 0, 1),
                0 0 70px rgba(255, 140, 0, 0.9),
                0 0 100px rgba(139, 0, 0, 0.7),
                inset 0 0 30px rgba(255, 140, 0, 0.6);
  }
}

@keyframes infernoFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes flameWave {
  0%, 100% {
    transform: scaleY(1) scaleX(1);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1.3) scaleX(0.95);
    opacity: 0.9;
  }
}

.player-title.style-inferno:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - toxic (劇毒腐蝕)
======================================== */
.player-title.style-toxic {
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.4) 0%, rgba(50, 205, 50, 0.3) 33%, rgba(124, 252, 0, 0.4) 66%, rgba(0, 128, 0, 0.5) 100%);
  background-size: 300% 300%;
  border: 2px solid #00ff00;
  color: #ccffcc;
  text-shadow: 0 0 15px rgba(0, 255, 0, 1),
               0 0 30px rgba(0, 255, 0, 0.8),
               0 0 45px rgba(50, 205, 50, 0.6);
  box-shadow: 0 4px 20px rgba(0, 255, 0, 0.7),
              0 0 40px rgba(50, 205, 50, 0.5),
              inset 0 0 15px rgba(0, 255, 0, 0.3);
  animation: toxicBubble 3s ease-in-out infinite, toxicFlow 4s linear infinite;
  position: relative;
  border-radius: 20px;
  filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.5));
}

.player-title.style-toxic::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, transparent 40%, rgba(0, 255, 0, 0.2) 60%, transparent 80%);
  animation: toxicPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes toxicBubble {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 255, 0, 0.7),
                0 0 40px rgba(50, 205, 50, 0.5),
                inset 0 0 15px rgba(0, 255, 0, 0.3);
    border-color: #00ff00;
  }
  33% {
    box-shadow: 0 6px 30px rgba(50, 205, 50, 0.9),
                0 0 60px rgba(124, 252, 0, 0.7),
                inset 0 0 25px rgba(50, 205, 50, 0.5);
    border-color: #32cd32;
  }
  66% {
    box-shadow: 0 8px 40px rgba(124, 252, 0, 1),
                0 0 80px rgba(0, 255, 0, 0.8),
                inset 0 0 30px rgba(124, 252, 0, 0.6);
    border-color: #7cfc00;
  }
}

@keyframes toxicFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes toxicPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
}

.player-title.style-toxic:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.9)) brightness(1.2);
}

/* ========================================
   稱號樣式 - starfield (星空)
======================================== */
.player-title.style-starfield {
  background: linear-gradient(135deg, rgba(25, 25, 112, 0.8) 0%, rgba(0, 0, 64, 0.9) 50%, rgba(72, 61, 139, 0.8) 100%);
  border: 2px solid #4169e1;
  color: #f0f8ff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9),
               0 0 30px rgba(135, 206, 250, 0.7),
               0 0 45px rgba(65, 105, 225, 0.5);
  box-shadow: 0 4px 20px rgba(65, 105, 225, 0.6),
              0 0 40px rgba(25, 25, 112, 0.4);
  animation: starfieldGlow 4s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
}

.player-title.style-starfield::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(2px 2px at 80% 10%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(1px 1px at 15% 55%, rgba(255, 255, 255, 0.6), transparent);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: starsTwinkle 8s linear infinite;
  pointer-events: none;
  border-radius: 30px;
}

@keyframes starfieldGlow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(65, 105, 225, 0.6),
                0 0 40px rgba(25, 25, 112, 0.4);
  }
  50% {
    box-shadow: 0 6px 35px rgba(65, 105, 225, 0.9),
                0 0 60px rgba(135, 206, 250, 0.7),
                inset 0 0 20px rgba(65, 105, 225, 0.3);
  }
}

@keyframes starsTwinkle {
  0% {
    opacity: 0.7;
    background-position: 0% 0%;
  }
  50% {
    opacity: 1;
    background-position: 100% 100%;
  }
  100% {
    opacity: 0.7;
    background-position: 200% 200%;
  }
}

.player-title.style-starfield:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 40px rgba(65, 105, 225, 1),
              0 0 80px rgba(135, 206, 250, 0.9);
}

/* ========================================
   稱號樣式 - cyberpunk (賽博朋克)
======================================== */
.player-title.style-cyberpunk {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0%, rgba(255, 0, 255, 0.3) 100%);
  border: 3px solid;
  border-image: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff) 1;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 1),
               2px 2px 0px rgba(255, 0, 255, 0.5),
               -2px -2px 0px rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6),
              0 0 40px rgba(255, 0, 255, 0.4),
              inset 0 0 20px rgba(0, 255, 255, 0.2);
  animation: cyberpunkGlitch 3s ease-in-out infinite;
  position: relative;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}

.player-title.style-cyberpunk::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 255, 0.3) 50%, transparent 100%);
  animation: cyberpunkScan 2s linear infinite;
  pointer-events: none;
}

.player-title.style-cyberpunk::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg,
    rgba(0, 255, 255, 0.5) 0%,
    transparent 30%,
    rgba(255, 0, 255, 0.5) 60%,
    transparent 100%);
  z-index: -1;
  animation: cyberpunkBorder 4s linear infinite;
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}

@keyframes cyberpunkGlitch {
  0%, 90%, 100% {
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
  92% {
    transform: translate(-2px, 1px);
    filter: hue-rotate(90deg);
  }
  94% {
    transform: translate(2px, -1px);
    filter: hue-rotate(-90deg);
  }
  96% {
    transform: translate(-1px, -1px);
    filter: hue-rotate(0deg);
  }
}

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

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

.player-title.style-cyberpunk:hover {
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 1),
               2px 2px 0px rgba(0, 255, 255, 0.5),
               -2px -2px 0px rgba(255, 0, 255, 0.5);
  transform: translateY(-2px);
}

/* ========================================
   稱號樣式 - blood-moon (血月)
======================================== */
.player-title.style-blood-moon {
  background: linear-gradient(90deg,
    rgba(139, 0, 0, 0) 0%,
    rgba(139, 0, 0, 0.3) 40%,
    rgba(139, 0, 0, 0.5) 60%,
    rgba(139, 0, 0, 0.4) 100%);
  border: 2px solid #8b0000;
  color: #ffcccc;
  text-shadow: 0 0 15px rgba(139, 0, 0, 1),
               0 0 30px rgba(178, 34, 34, 0.8),
               0 0 45px rgba(220, 20, 60, 0.6);
  box-shadow: 0 4px 20px rgba(139, 0, 0, 0.8),
              0 0 40px rgba(178, 34, 34, 0.6),
              inset 0 0 30px rgba(139, 0, 0, 0.5);
  animation: bloodMoonRise 4s ease-in-out infinite;
  position: relative;
  border-radius: 25px;
  padding: 8px 20px 8px 30px;
  overflow: visible;
}

.player-title.style-blood-moon::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 60% 50%,
    rgba(139, 0, 0, 0) 0%,
    rgba(139, 0, 0, 0) 48%,
    rgba(139, 0, 0, 1) 50%,
    rgba(178, 34, 34, 0.9) 60%,
    rgba(220, 20, 60, 0.7) 80%,
    transparent 100%);
  border-radius: 50%;
  animation: bloodMoonGlow 4s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 15px rgba(139, 0, 0, 1));
}

.player-title.style-blood-moon::after {
  content: '';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 50%,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.8) 50%,
    transparent 52%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

@keyframes bloodMoonRise {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(139, 0, 0, 0.8),
                0 0 40px rgba(178, 34, 34, 0.6),
                inset 0 0 30px rgba(139, 0, 0, 0.5);
    border-color: #8b0000;
  }
  50% {
    box-shadow: 0 8px 40px rgba(139, 0, 0, 1),
                0 0 70px rgba(178, 34, 34, 0.9),
                0 0 100px rgba(220, 20, 60, 0.7),
                inset 0 0 40px rgba(178, 34, 34, 0.7);
    border-color: #dc143c;
  }
}

@keyframes bloodMoonGlow {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(139, 0, 0, 1));
    opacity: 0.9;
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(220, 20, 60, 1));
    opacity: 1;
  }
}

.player-title.style-blood-moon:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(139, 0, 0, 1),
              0 0 100px rgba(220, 20, 60, 1);
}

/* ========================================
   稱號樣式 - thunder (雷霆)
======================================== */
.player-title.style-thunder {
  background: linear-gradient(135deg, rgba(255, 255, 0, 0.4) 0%, rgba(255, 215, 0, 0.3) 50%, rgba(255, 255, 255, 0.2) 100%);
  border: 2px solid #ffff00;
  color: #ffffcc;
  text-shadow: 0 0 15px rgba(255, 255, 0, 1),
               0 0 30px rgba(255, 215, 0, 0.8),
               0 0 45px rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(255, 255, 0, 0.7),
              0 0 40px rgba(255, 215, 0, 0.5);
  animation: thunderStrike 2.5s ease-in-out infinite;
  position: relative;
  border-radius: 10px;
  clip-path: polygon(0% 15%, 5% 0%, 100% 0%, 100% 85%, 95% 100%, 0% 100%);
}

.player-title.style-thunder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 0, 0.5) 50%,
    transparent 100%);
  opacity: 0;
  animation: thunderBolt 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes thunderStrike {
  0%, 90%, 100% {
    box-shadow: 0 4px 20px rgba(255, 255, 0, 0.7),
                0 0 40px rgba(255, 215, 0, 0.5);
    filter: brightness(1);
  }
  92%, 96% {
    box-shadow: 0 8px 50px rgba(255, 255, 0, 1),
                0 0 80px rgba(255, 255, 255, 0.9),
                0 0 120px rgba(255, 215, 0, 0.8);
    filter: brightness(2);
  }
  94%, 98% {
    box-shadow: 0 4px 20px rgba(255, 255, 0, 0.7),
                0 0 40px rgba(255, 215, 0, 0.5);
    filter: brightness(0.8);
  }
}

@keyframes thunderBolt {
  0%, 90%, 100% {
    opacity: 0;
  }
  92%, 96% {
    opacity: 1;
  }
  94%, 98% {
    opacity: 0;
  }
}

.player-title.style-thunder:hover {
  transform: translateY(-2px);
  animation: thunderStrike 0.5s ease-in-out infinite;
  filter: brightness(1.5);
}

/* ========================================
   稱號樣式 - phantom (幽靈)
======================================== */
.player-title.style-phantom {
  background: linear-gradient(90deg,
    rgba(230, 230, 250, 0.4) 0%,
    rgba(230, 230, 250, 0.4) 25%,
    rgba(216, 191, 216, 0.4) 25%,
    rgba(216, 191, 216, 0.4) 50%,
    rgba(230, 230, 250, 0.4) 50%,
    rgba(230, 230, 250, 0.4) 75%,
    rgba(216, 191, 216, 0.4) 75%,
    rgba(216, 191, 216, 0.4) 100%);
  background-size: 40px 100%;
  border: 2px solid rgba(221, 160, 221, 0.6);
  color: #f0e6ff;
  text-shadow: 0 0 20px rgba(221, 160, 221, 0.9),
               0 0 40px rgba(216, 191, 216, 0.7),
               0 0 60px rgba(230, 230, 250, 0.5);
  box-shadow: 0 4px 20px rgba(221, 160, 221, 0.5),
              0 0 40px rgba(216, 191, 216, 0.3);
  animation: phantomFade 3s ease-in-out infinite, phantomShift 5s linear infinite;
  position: relative;
  border-radius: 25px;
  filter: blur(0.3px);
}

.player-title.style-phantom::before {
  content: '👻';
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  font-size: 1.5em;
  animation: ghostFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(221, 160, 221, 0.8));
  opacity: 0;
}

.player-title.style-phantom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(221, 160, 221, 0.3) 0%, transparent 70%);
  animation: phantomPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  filter: blur(10px);
}

@keyframes phantomFade {
  0%, 100% {
    opacity: 0.7;
    box-shadow: 0 4px 20px rgba(221, 160, 221, 0.5),
                0 0 40px rgba(216, 191, 216, 0.3);
  }
  50% {
    opacity: 0.95;
    box-shadow: 0 6px 30px rgba(221, 160, 221, 0.8),
                0 0 60px rgba(216, 191, 216, 0.6),
                0 0 90px rgba(230, 230, 250, 0.4);
  }
}

@keyframes phantomShift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

@keyframes ghostFloat {
  0%, 10% {
    left: -50px;
    opacity: 0;
    transform: translateY(-50%) rotate(0deg);
  }
  20% {
    opacity: 0.8;
  }
  30%, 40% {
    transform: translateY(-50%) rotate(-5deg);
  }
  50%, 60% {
    transform: translateY(-50%) rotate(5deg);
  }
  70%, 80% {
    transform: translateY(-50%) rotate(-3deg);
    opacity: 0.8;
  }
  90% {
    opacity: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
    transform: translateY(-50%) rotate(0deg);
  }
}

@keyframes phantomPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.7;
  }
}

.player-title.style-phantom:hover {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(221, 160, 221, 0.9),
              0 0 80px rgba(216, 191, 216, 0.8);
}
/* ========================================
   稱號樣式 - royal-crown (皇家之冠) - 全新設計
======================================== */
.player-title.style-royal-crown {
  background:
    repeating-linear-gradient(45deg, rgba(255, 215, 0, 0.15) 0px, rgba(255, 215, 0, 0.15) 15px, transparent 15px, transparent 30px),
    repeating-linear-gradient(-45deg, rgba(255, 140, 0, 0.1) 0px, rgba(255, 140, 0, 0.1) 15px, transparent 15px, transparent 30px),
    linear-gradient(135deg, rgba(255, 215, 0, 0.6) 0%, rgba(255, 185, 0, 0.5) 50%, rgba(255, 215, 0, 0.6) 100%);
  border: 4px solid #ffd700;
  color: #fffacd;
  text-shadow: 0 0 20px rgba(255, 215, 0, 1),
               0 0 40px rgba(255, 215, 0, 0.8),
               0 2px 10px rgba(255, 140, 0, 0.9),
               2px 2px 5px rgba(139, 69, 19, 0.8);
  box-shadow: 0 4px 30px rgba(255, 215, 0, 1),
              0 0 60px rgba(255, 185, 0, 0.8),
              inset 0 0 30px rgba(255, 215, 0, 0.4),
              inset 0 0 50px rgba(255, 140, 0, 0.2);
  animation: royalCrownGlow 3s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  font-family: 'Georgia', serif;
}

.player-title.style-royal-crown::before {
  content: '♛';
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 1),
               0 0 40px rgba(255, 215, 0, 0.8);
  animation: crownFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
}

.player-title.style-royal-crown::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid rgba(255, 215, 0, 0.6);
  border-radius: 15px;
  animation: royalBorderPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes royalCrownGlow {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(255, 215, 0, 1),
                0 0 60px rgba(255, 185, 0, 0.8),
                inset 0 0 30px rgba(255, 215, 0, 0.4),
                inset 0 0 50px rgba(255, 140, 0, 0.2);
    filter: brightness(1.3);
  }
  50% {
    box-shadow: 0 8px 50px rgba(255, 215, 0, 1),
                0 0 100px rgba(255, 185, 0, 1),
                0 0 150px rgba(255, 140, 0, 0.8),
                inset 0 0 50px rgba(255, 215, 0, 0.7),
                inset 0 0 70px rgba(255, 140, 0, 0.4);
    filter: brightness(1.6);
  }
}

@keyframes crownFloat {
  0%, 100% {
    transform: translateY(-50%) rotate(-5deg);
  }
  50% {
    transform: translateY(-55%) rotate(5deg);
  }
}

@keyframes royalBorderPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

.player-title.style-royal-crown:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.8);
}

/* ========================================
   稱號樣式 - rainbow-dream (彩虹夢境)
======================================== */
.player-title.style-rainbow-dream {
  background: linear-gradient(90deg,
    rgba(255, 0, 127, 0.5) 0%,
    rgba(255, 127, 0, 0.5) 20%,
    rgba(255, 255, 0, 0.5) 40%,
    rgba(0, 255, 127, 0.5) 60%,
    rgba(0, 127, 255, 0.5) 80%,
    rgba(127, 0, 255, 0.5) 100%);
  background-size: 400% 100%;
  border: 4px solid transparent;
  background-clip: padding-box;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 1),
               0 0 40px rgba(255, 0, 255, 0.8),
               0 0 60px rgba(0, 255, 255, 0.8),
               2px 2px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 25px rgba(255, 0, 255, 0.8),
              0 0 50px rgba(0, 255, 255, 0.6),
              inset 0 0 30px rgba(255, 255, 255, 0.3);
  animation: rainbowFlow 8s linear infinite, rainbowPulse 2s ease-in-out infinite;
  position: relative;
  border-radius: 0;
  font-weight: 900;
}

.player-title.style-rainbow-dream::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(90deg,
    #ff007f 0%,
    #ff7f00 16.66%,
    #ffff00 33.33%,
    #00ff7f 50%,
    #007fff 66.66%,
    #7f00ff 83.33%,
    #ff007f 100%);
  background-size: 400% 100%;
  animation: rainbowBorderFlow 8s linear infinite;
  z-index: -1;
  border-radius: 0;
}

.player-title.style-rainbow-dream::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%);
  animation: rainbowShine 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: 0;
}

@keyframes rainbowFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes rainbowBorderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes rainbowPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 0, 255, 0.8),
                0 0 50px rgba(0, 255, 255, 0.6),
                inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 8px 40px rgba(255, 0, 255, 1),
                0 0 80px rgba(0, 255, 255, 0.9),
                inset 0 0 50px rgba(255, 255, 255, 0.5);
  }
}

@keyframes rainbowShine {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

.player-title.style-rainbow-dream:hover {
  transform: translateY(-3px) scale(1.05);
  animation: rainbowFlow 2s linear infinite, rainbowPulse 0.5s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - time-rift (時空裂痕)
======================================== */
.player-title.style-time-rift {
  background: linear-gradient(135deg,
    rgba(138, 43, 226, 0.6) 0%,
    rgba(75, 0, 130, 0.8) 25%,
    rgba(0, 0, 0, 0.9) 50%,
    rgba(75, 0, 130, 0.8) 75%,
    rgba(138, 43, 226, 0.6) 100%);
  border: 2px solid #8a2be2;
  color: #e0d0ff;
  text-shadow: 0 0 20px rgba(138, 43, 226, 1),
               0 0 40px rgba(138, 43, 226, 0.9),
               0 2px 10px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 25px rgba(138, 43, 226, 0.9),
              0 0 50px rgba(75, 0, 130, 0.7),
              inset 0 0 30px rgba(138, 43, 226, 0.4);
  animation: timeRiftPulse 4s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  clip-path: polygon(0% 10%, 5% 0%, 95% 0%, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0% 90%);
  overflow: visible;
}

.player-title.style-time-rift::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 120%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(138, 43, 226, 0.8) 20%,
    rgba(255, 255, 255, 1) 50%,
    rgba(138, 43, 226, 0.8) 80%,
    transparent 100%);
  animation: riftCrack 3s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(138, 43, 226, 1)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

.player-title.style-time-rift::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(138, 43, 226, 0.3) 45deg,
    transparent 90deg,
    transparent 90deg,
    rgba(138, 43, 226, 0.3) 135deg,
    transparent 180deg,
    transparent 180deg,
    rgba(138, 43, 226, 0.3) 225deg,
    transparent 270deg,
    transparent 270deg,
    rgba(138, 43, 226, 0.3) 315deg,
    transparent 360deg);
  animation: timeRiftRotate 10s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes timeRiftPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(138, 43, 226, 0.9),
                0 0 50px rgba(75, 0, 130, 0.7),
                inset 0 0 30px rgba(138, 43, 226, 0.4);
  }
  50% {
    box-shadow: 0 8px 45px rgba(138, 43, 226, 1),
                0 0 90px rgba(75, 0, 130, 1),
                inset 0 0 50px rgba(138, 43, 226, 0.7);
  }
}

@keyframes riftCrack {
  0%, 100% {
    opacity: 0.6;
    height: 120%;
  }
  50% {
    opacity: 1;
    height: 140%;
  }
}

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

.player-title.style-time-rift:hover {
  transform: translateY(-3px);
  animation: timeRiftPulse 1s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - violet-dream (紫羅蘭之夢)
======================================== */
.player-title.style-violet-dream {
  background: linear-gradient(135deg,
    rgba(148, 0, 211, 0.5) 0%,
    rgba(186, 85, 211, 0.4) 50%,
    rgba(221, 160, 221, 0.5) 100%);
  border: 2px solid #da70d6;
  color: #f5e6ff;
  text-shadow: 0 0 15px rgba(186, 85, 211, 1),
               0 0 30px rgba(148, 0, 211, 0.8),
               0 0 45px rgba(221, 160, 221, 0.6);
  box-shadow: 0 4px 20px rgba(148, 0, 211, 0.7),
              0 0 40px rgba(186, 85, 211, 0.5);
  animation: violetBreath 4s ease-in-out infinite;
  position: relative;
  border-radius: 40px;
}

.player-title.style-violet-dream::before {
  content: '💜';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3em;
  animation: heartFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(186, 85, 211, 1));
}

.player-title.style-violet-dream::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 120%,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 50%);
  border-radius: 40px;
  pointer-events: none;
}

@keyframes violetBreath {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(148, 0, 211, 0.7),
                0 0 40px rgba(186, 85, 211, 0.5);
  }
  50% {
    box-shadow: 0 6px 30px rgba(148, 0, 211, 1),
                0 0 60px rgba(186, 85, 211, 0.8),
                0 0 90px rgba(221, 160, 221, 0.6);
  }
}

@keyframes heartFloat {
  0%, 100% {
    top: -18px;
    opacity: 0.8;
  }
  50% {
    top: -25px;
    opacity: 1;
  }
}

.player-title.style-violet-dream:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - lava-fury (熔岩之怒)
======================================== */
.player-title.style-lava-fury {
  background: linear-gradient(135deg,
    rgba(255, 69, 0, 0.7) 0%,
    rgba(139, 0, 0, 0.9) 25%,
    rgba(255, 140, 0, 0.7) 50%,
    rgba(139, 0, 0, 0.9) 75%,
    rgba(255, 69, 0, 0.7) 100%);
  background-size: 200% 200%;
  border: 3px solid #ff4500;
  color: #ffffe0;
  text-shadow: 0 0 20px rgba(255, 69, 0, 1),
               0 0 40px rgba(255, 140, 0, 1),
               0 2px 10px rgba(139, 0, 0, 1),
               0 0 5px rgba(255, 255, 0, 0.8);
  box-shadow: 0 4px 30px rgba(255, 69, 0, 1),
              0 0 60px rgba(255, 140, 0, 0.8),
              inset 0 0 30px rgba(255, 69, 0, 0.5);
  animation: lavaFlow 3s linear infinite, lavaFury 2s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  font-weight: 900;
}

.player-title.style-lava-fury::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top,
    transparent 0%,
    rgba(255, 69, 0, 0.6) 50%,
    transparent 100%);
  filter: blur(10px);
  animation: lavaHeat 1.5s ease-in-out infinite;
  pointer-events: none;
}

.player-title.style-lava-fury::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0px,
    rgba(255, 255, 0, 0.1) 10px,
    transparent 20px);
  animation: crackles 0.1s linear infinite;
  pointer-events: none;
  border-radius: 20px;
}

@keyframes lavaFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes lavaFury {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(255, 69, 0, 1),
                0 0 60px rgba(255, 140, 0, 0.8),
                inset 0 0 30px rgba(255, 69, 0, 0.5);
    filter: brightness(1.2);
  }
  50% {
    box-shadow: 0 8px 50px rgba(255, 69, 0, 1),
                0 0 100px rgba(255, 140, 0, 1),
                0 0 150px rgba(255, 255, 0, 0.6),
                inset 0 0 50px rgba(255, 140, 0, 0.8);
    filter: brightness(1.5);
  }
}

@keyframes lavaHeat {
  0%, 100% {
    opacity: 0.5;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.9;
    transform: scaleY(1.3);
  }
}

@keyframes crackles {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.1; }
}

.player-title.style-lava-fury:hover {
  transform: translateY(-3px);
  animation: lavaFlow 1s linear infinite, lavaFury 0.5s ease-in-out infinite;
  filter: brightness(1.6);
}

/* ========================================
   稱號樣式 - crystal-ice (水晶寒冰)
======================================== */
.player-title.style-crystal-ice {
  background: linear-gradient(135deg,
    rgba(173, 216, 230, 0.6) 0%,
    rgba(135, 206, 250, 0.5) 50%,
    rgba(176, 224, 230, 0.6) 100%);
  border: 3px solid #87cefa;
  color: #f0ffff;
  text-shadow: 0 0 20px rgba(135, 206, 250, 1),
               0 0 40px rgba(173, 216, 230, 0.9),
               0 0 60px rgba(176, 224, 230, 0.7),
               1px 1px 3px rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 25px rgba(135, 206, 250, 0.9),
              0 0 50px rgba(173, 216, 230, 0.7),
              inset 0 0 30px rgba(255, 255, 255, 0.5);
  animation: crystalShine 3s ease-in-out infinite;
  position: relative;
  border-radius: 10px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%);
}

.player-title.style-crystal-ice::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -10%;
  width: 120%;
  height: 300%;
  background: repeating-linear-gradient(45deg,
    transparent 0px,
    rgba(255, 255, 255, 0.3) 1px,
    transparent 2px,
    transparent 20px);
  animation: crystalRefract 5s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

.player-title.style-crystal-ice::after {
  content: '❄';
  position: absolute;
  top: -20px;
  right: -15px;
  font-size: 1.8em;
  color: #87cefa;
  animation: snowflakeRotate 6s linear infinite;
  filter: drop-shadow(0 0 10px rgba(135, 206, 250, 1));
  text-shadow: 0 0 15px rgba(255, 255, 255, 1);
}

@keyframes crystalShine {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(135, 206, 250, 0.9),
                0 0 50px rgba(173, 216, 230, 0.7),
                inset 0 0 30px rgba(255, 255, 255, 0.5);
    filter: brightness(1.2);
  }
  50% {
    box-shadow: 0 8px 45px rgba(135, 206, 250, 1),
                0 0 90px rgba(173, 216, 230, 1),
                inset 0 0 50px rgba(255, 255, 255, 0.8);
    filter: brightness(1.5);
  }
}

@keyframes crystalRefract {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(100%) rotate(10deg);
  }
}

@keyframes snowflakeRotate {
  0% {
    transform: rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.player-title.style-crystal-ice:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.6);
}

/* ========================================
   稱號樣式 - crimson-thunder (深桃魔雷)
======================================== */
.player-title.style-crimson-thunder {
  background: linear-gradient(135deg,
    rgba(220, 20, 60, 0.7) 0%,
    rgba(199, 21, 133, 0.8) 50%,
    rgba(220, 20, 60, 0.7) 100%);
  border: 3px solid #dc143c;
  color: #ffe4e1;
  text-shadow: 0 0 20px rgba(220, 20, 60, 1),
               0 0 40px rgba(199, 21, 133, 0.9),
               0 0 60px rgba(255, 20, 147, 0.7),
               0 2px 10px rgba(139, 0, 0, 1);
  box-shadow: 0 4px 30px rgba(220, 20, 60, 1),
              0 0 60px rgba(199, 21, 133, 0.8),
              inset 0 0 30px rgba(220, 20, 60, 0.5);
  animation: crimsonPulse 2s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  font-weight: 900;
}

.player-title.style-crimson-thunder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 20, 147, 0.6) 20%,
    transparent 40%);
  opacity: 0;
  animation: lightningStrike 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: 15px;
}

.player-title.style-crimson-thunder::after {
  content: '⚡';
  position: absolute;
  top: -20px;
  right: -10px;
  font-size: 1.5em;
  color: #fff;
  opacity: 0;
  animation: thunderBolt 4s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(255, 255, 255, 1),
               0 0 40px rgba(220, 20, 60, 1);
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1));
}

@keyframes crimsonPulse {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(220, 20, 60, 1),
                0 0 60px rgba(199, 21, 133, 0.8),
                inset 0 0 30px rgba(220, 20, 60, 0.5);
    filter: brightness(1.2);
  }
  50% {
    box-shadow: 0 8px 50px rgba(220, 20, 60, 1),
                0 0 100px rgba(199, 21, 133, 1),
                inset 0 0 50px rgba(220, 20, 60, 0.8);
    filter: brightness(1.5);
  }
}

@keyframes lightningStrike {
  0%, 88%, 100% {
    opacity: 0;
  }
  90% {
    opacity: 1;
    --x: 30%;
    --y: 40%;
  }
  92% {
    opacity: 0;
  }
  94% {
    opacity: 1;
    --x: 70%;
    --y: 60%;
  }
  96% {
    opacity: 0;
  }
  98% {
    opacity: 0.8;
    --x: 50%;
    --y: 50%;
  }
}

@keyframes thunderBolt {
  0%, 88%, 100% {
    opacity: 0;
    top: -20px;
  }
  90%, 94%, 98% {
    opacity: 1;
  }
  92%, 96% {
    opacity: 0.3;
  }
  91%, 95%, 99% {
    top: -25px;
  }
}

.player-title.style-crimson-thunder:hover {
  transform: translateY(-3px);
  animation: crimsonPulse 0.5s ease-in-out infinite;
  filter: brightness(1.6);
}

/* ========================================
   稱號樣式 - sky-cloud (天空之雲)
======================================== */
.player-title.style-sky-cloud {
  background: linear-gradient(to bottom,
    rgba(135, 206, 250, 0.6) 0%,
    rgba(176, 224, 230, 0.5) 50%,
    rgba(135, 206, 235, 0.6) 100%);
  border: 2px solid #87ceeb;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(135, 206, 250, 1),
               0 0 30px rgba(176, 224, 230, 0.8),
               0 2px 8px rgba(70, 130, 180, 0.6);
  box-shadow: 0 4px 25px rgba(135, 206, 250, 0.8),
              0 0 50px rgba(176, 224, 230, 0.6),
              inset 0 0 30px rgba(255, 255, 255, 0.4);
  animation: skyBreath 5s ease-in-out infinite;
  position: relative;
  border-radius: 40px;
}

.player-title.style-sky-cloud::before {
  content: '☁';
  position: absolute;
  top: 50%;
  left: -150%;
  transform: translateY(-50%);
  font-size: 2.5em;
  color: rgba(255, 255, 255, 0.9);
  animation: cloudDrift 15s linear infinite;
  filter: drop-shadow(0 0 10px rgba(135, 206, 250, 0.8));
  z-index: 10;
}

@keyframes skyBreath {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(135, 206, 250, 0.8),
                0 0 50px rgba(176, 224, 230, 0.6),
                inset 0 0 30px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 6px 35px rgba(135, 206, 250, 1),
                0 0 70px rgba(176, 224, 230, 0.9),
                inset 0 0 50px rgba(255, 255, 255, 0.6);
  }
}

@keyframes cloudDrift {
  0% {
    left: -150%;
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

.player-title.style-sky-cloud:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 45px rgba(135, 206, 250, 1),
              0 0 90px rgba(176, 224, 230, 1);
}

/* ========================================
   稱號樣式 - serene-sky (寧靜蒼穹)
======================================== */
.player-title.style-serene-sky {
  background: linear-gradient(120deg,
    rgba(210, 235, 245, 0.3) 0%,
    rgba(190, 225, 240, 0.4) 30%,
    rgba(200, 230, 245, 0.35) 60%,
    rgba(210, 235, 245, 0.3) 100%);
  border: 2px solid rgba(176, 216, 230, 0.5);
  color: #e0f4ff;
  text-shadow: 0 0 12px rgba(200, 230, 245, 0.6),
               0 1px 3px rgba(150, 200, 220, 0.4);
  box-shadow: 0 3px 15px rgba(176, 216, 230, 0.4),
              0 0 30px rgba(190, 225, 240, 0.3),
              inset 0 0 25px rgba(255, 255, 255, 0.2);
  animation: sereneShimmer 6s ease-in-out infinite;
  position: relative;
  border-radius: 35px;
  backdrop-filter: blur(5px);
}

.player-title.style-serene-sky::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg,
    rgba(176, 216, 230, 0.4) 0%,
    transparent 25%,
    transparent 75%,
    rgba(176, 216, 230, 0.4) 100%);
  border-radius: 35px;
  animation: sereneBorderFlow 10s linear infinite;
  z-index: -1;
}

.player-title.style-serene-sky::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 10%;
  width: 30%;
  height: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 70%);
  animation: sereneGentleGlow 8s ease-in-out infinite;
  pointer-events: none;
  border-radius: 50%;
}

@keyframes sereneShimmer {
  0%, 100% {
    box-shadow: 0 3px 15px rgba(176, 216, 230, 0.4),
                0 0 30px rgba(190, 225, 240, 0.3),
                inset 0 0 25px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 4px 20px rgba(176, 216, 230, 0.6),
                0 0 40px rgba(190, 225, 240, 0.5),
                inset 0 0 35px rgba(255, 255, 255, 0.35);
  }
}

@keyframes sereneBorderFlow {
  0% {
    background: linear-gradient(45deg,
      rgba(176, 216, 230, 0.4) 0%,
      transparent 25%,
      transparent 75%,
      rgba(176, 216, 230, 0.4) 100%);
  }
  50% {
    background: linear-gradient(45deg,
      transparent 0%,
      rgba(176, 216, 230, 0.4) 25%,
      rgba(176, 216, 230, 0.4) 75%,
      transparent 100%);
  }
  100% {
    background: linear-gradient(45deg,
      rgba(176, 216, 230, 0.4) 0%,
      transparent 25%,
      transparent 75%,
      rgba(176, 216, 230, 0.4) 100%);
  }
}

@keyframes sereneGentleGlow {
  0%, 100% {
    opacity: 0.4;
    left: 10%;
  }
  50% {
    opacity: 0.6;
    left: 15%;
  }
}

.player-title.style-serene-sky:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(176, 216, 230, 0.6),
              0 0 40px rgba(190, 225, 240, 0.5);
}

/* ========================================
   稱號樣式 - royal-elegant (優雅皇室)
======================================== */
.player-title.style-royal-elegant {
  background: linear-gradient(135deg,
    rgba(218, 165, 32, 0.25) 0%,
    rgba(255, 215, 0, 0.2) 20%,
    rgba(255, 140, 0, 0.15) 40%,
    rgba(255, 215, 0, 0.2) 60%,
    rgba(218, 165, 32, 0.25) 100%);
  border: 3px solid rgba(218, 165, 32, 0.6);
  color: #ffe8b3;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5),
               0 2px 5px rgba(218, 165, 32, 0.4);
  box-shadow: 0 4px 20px rgba(218, 165, 32, 0.4),
              0 0 35px rgba(255, 140, 0, 0.3),
              inset 0 0 20px rgba(255, 215, 0, 0.15);
  animation: royalElegantGlow 4s ease-in-out infinite;
  position: relative;
  border-radius: 25px;
  backdrop-filter: blur(3px);
}

.player-title.style-royal-elegant::before {
  content: '👑';
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
  animation: royalElegantPulse 3s ease-in-out infinite;
}

.player-title.style-royal-elegant::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.2) 50%,
    transparent 100%);
  border-radius: 25px;
  animation: royalElegantShine 8s linear infinite;
  z-index: -1;
}

@keyframes royalElegantGlow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(218, 165, 32, 0.4),
                0 0 35px rgba(255, 140, 0, 0.3),
                inset 0 0 20px rgba(255, 215, 0, 0.15);
  }
  50% {
    box-shadow: 0 5px 25px rgba(218, 165, 32, 0.6),
                0 0 45px rgba(255, 140, 0, 0.5),
                inset 0 0 30px rgba(255, 215, 0, 0.25);
  }
}

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

@keyframes royalElegantShine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.player-title.style-royal-elegant:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(218, 165, 32, 0.6),
              0 0 50px rgba(255, 140, 0, 0.5);
}

/* ========================================
   稱號樣式 - spring-leaves (春意盎然)
======================================== */
.player-title.style-spring-leaves {
  background: linear-gradient(135deg,
    rgba(144, 238, 144, 0.3) 0%,
    rgba(152, 251, 152, 0.25) 30%,
    rgba(173, 255, 47, 0.2) 60%,
    rgba(144, 238, 144, 0.3) 100%);
  border: 2px solid rgba(34, 139, 34, 0.5);
  color: #e8ffe8;
  text-shadow: 0 0 15px rgba(144, 238, 144, 0.8),
               0 0 25px rgba(152, 251, 152, 0.5),
               0 2px 5px rgba(34, 139, 34, 0.4);
  box-shadow: 0 4px 20px rgba(144, 238, 144, 0.5),
              0 0 40px rgba(152, 251, 152, 0.4),
              inset 0 0 25px rgba(173, 255, 47, 0.2);
  animation: springBreeze 5s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}

.player-title.style-spring-leaves::before,
.player-title.style-spring-leaves::after {
  content: '🍃';
  position: absolute;
  font-size: 1.2em;
  filter: drop-shadow(0 0 8px rgba(144, 238, 144, 0.8));
  pointer-events: none;
}

.player-title.style-spring-leaves::before {
  top: 0;
  left: 20%;
  animation: leafFall1 4s ease-in infinite;
}

.player-title.style-spring-leaves::after {
  top: 0;
  right: 25%;
  animation: leafFall2 5s ease-in infinite 1.5s;
}

@keyframes springBreeze {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(144, 238, 144, 0.5),
                0 0 40px rgba(152, 251, 152, 0.4),
                inset 0 0 25px rgba(173, 255, 47, 0.2);
  }
  50% {
    box-shadow: 0 6px 30px rgba(144, 238, 144, 0.7),
                0 0 50px rgba(152, 251, 152, 0.6),
                inset 0 0 35px rgba(173, 255, 47, 0.3);
  }
}

@keyframes leafFall1 {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg) translateX(0);
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    top: calc(100% - 20px);
    opacity: 0;
    transform: rotate(360deg) translateX(20px);
  }
}

@keyframes leafFall2 {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg) translateX(0);
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    top: calc(100% - 20px);
    opacity: 0;
    transform: rotate(-360deg) translateX(-20px);
  }
}

.player-title.style-spring-leaves:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(144, 238, 144, 0.7),
              0 0 50px rgba(152, 251, 152, 0.6);
}

/* ========================================
   稱號樣式 - dragon (龍威)
======================================== */
.player-title.style-dragon {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
    linear-gradient(135deg,
      rgba(139, 0, 0, 0.5) 0%,
      rgba(178, 34, 34, 0.4) 25%,
      rgba(220, 20, 60, 0.45) 50%,
      rgba(178, 34, 34, 0.4) 75%,
      rgba(139, 0, 0, 0.5) 100%);
  border: 3px solid rgba(218, 165, 32, 0.8);
  border-image: linear-gradient(45deg,
    rgba(218, 165, 32, 0.9),
    rgba(255, 215, 0, 0.7),
    rgba(218, 165, 32, 0.9)) 1;
  color: #ffe4b5;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.9),
               0 0 35px rgba(255, 140, 0, 0.7),
               0 2px 8px rgba(139, 0, 0, 0.8);
  box-shadow: 0 4px 30px rgba(220, 20, 60, 0.6),
              0 0 60px rgba(255, 140, 0, 0.4),
              inset 0 0 40px rgba(139, 0, 0, 0.3);
  animation: dragonMajesty 4s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.player-title.style-dragon::before {
  content: '龍';
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 1.8em;
  font-weight: bold;
  color: rgba(255, 215, 0, 0.4);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  animation: dragonSymbol 3s ease-in-out infinite;
  pointer-events: none;
}

.player-title.style-dragon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 215, 0, 0.05) 0deg,
    transparent 10deg,
    transparent 20deg,
    rgba(255, 215, 0, 0.05) 30deg
  );
  animation: dragonAura 20s linear infinite;
  pointer-events: none;
}

@keyframes dragonMajesty {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(220, 20, 60, 0.6),
                0 0 60px rgba(255, 140, 0, 0.4),
                inset 0 0 40px rgba(139, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 6px 40px rgba(220, 20, 60, 0.8),
                0 0 80px rgba(255, 140, 0, 0.6),
                inset 0 0 60px rgba(139, 0, 0, 0.5);
  }
}

@keyframes dragonSymbol {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1.1);
  }
}

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

.player-title.style-dragon:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 45px rgba(220, 20, 60, 0.9),
              0 0 90px rgba(255, 140, 0, 0.7);
}

/* ========================================
   稱號樣式 - horse (駿馬奔騰)
======================================== */
.player-title.style-horse {
  background: linear-gradient(135deg,
    rgba(139, 90, 43, 0.35) 0%,
    rgba(160, 82, 45, 0.3) 25%,
    rgba(205, 133, 63, 0.25) 50%,
    rgba(160, 82, 45, 0.3) 75%,
    rgba(139, 90, 43, 0.35) 100%);
  border: 3px solid rgba(160, 82, 45, 0.7);
  color: #ffecd1;
  text-shadow: 0 0 18px rgba(205, 133, 63, 0.9),
               0 0 30px rgba(160, 82, 45, 0.7),
               0 2px 6px rgba(101, 67, 33, 0.5);
  box-shadow: 0 4px 25px rgba(160, 82, 45, 0.6),
              0 0 45px rgba(205, 133, 63, 0.5),
              inset 0 0 30px rgba(222, 184, 135, 0.3);
  animation: horseGallop 2.5s ease-in-out infinite;
  position: relative;
  border-radius: 25px;
}

.player-title.style-horse::before {
  content: '🐎';
  position: absolute;
  top: 50%;
  left: -200%;
  transform: translateY(-50%);
  font-size: 2.2em;
  animation: horseRun 6s linear infinite;
  filter: drop-shadow(0 0 12px rgba(205, 133, 63, 0.9));
  z-index: -1;
}

.player-title.style-horse::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg,
    rgba(160, 82, 45, 0.8) 0px,
    rgba(160, 82, 45, 0.8) 10px,
    transparent 10px,
    transparent 20px);
  animation: hoofprints 1s linear infinite;
}

@keyframes horseGallop {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(160, 82, 45, 0.6),
                0 0 45px rgba(205, 133, 63, 0.5),
                inset 0 0 30px rgba(222, 184, 135, 0.3);
  }
  50% {
    box-shadow: 0 5px 30px rgba(160, 82, 45, 0.8),
                0 0 55px rgba(205, 133, 63, 0.7),
                inset 0 0 40px rgba(222, 184, 135, 0.4);
  }
}

@keyframes horseRun {
  0% {
    left: -200%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
  45% {
    left: 50%;
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    left: 250%;
    opacity: 0;
  }
}

@keyframes hoofprints {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

.player-title.style-horse:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 35px rgba(160, 82, 45, 0.8),
              0 0 60px rgba(205, 133, 63, 0.7);
}

/* ========================================
   稱號樣式 - cat-lover (貓貓至上)
======================================== */
.player-title.style-cat-lover {
  background: linear-gradient(135deg,
    rgba(255, 192, 203, 0.3) 0%,
    rgba(255, 182, 193, 0.35) 25%,
    rgba(255, 218, 185, 0.3) 50%,
    rgba(255, 182, 193, 0.35) 75%,
    rgba(255, 192, 203, 0.3) 100%);
  border: 3px solid rgba(255, 105, 180, 0.6);
  color: #fff0f5;
  text-shadow: 0 0 15px rgba(255, 182, 193, 0.9),
               0 0 25px rgba(255, 105, 180, 0.6),
               0 2px 5px rgba(219, 112, 147, 0.5);
  box-shadow: 0 4px 25px rgba(255, 105, 180, 0.5),
              0 0 45px rgba(255, 182, 193, 0.4),
              inset 0 0 30px rgba(255, 218, 185, 0.3);
  animation: catPurr 3s ease-in-out infinite;
  position: relative;
  border-radius: 40px;
  overflow: hidden;
}

/* 稱號左側的動物掌印 */
.player-title.style-cat-lover::before {
  content: '🐾';
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 1.5em;
  opacity: 0.6;
  animation: pawPrint 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 182, 193, 0.8));
}

/* 文字底下玩耍的貓咪 */
.player-title.style-cat-lover::after {
  content: '🐱';
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translateY(-50%);
  font-size: 2em;
  opacity: 0.3;
  animation: catPlay 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.9));
  pointer-events: none;
  z-index: 0;
}

@keyframes catPurr {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 105, 180, 0.5),
                0 0 45px rgba(255, 182, 193, 0.4),
                inset 0 0 30px rgba(255, 218, 185, 0.3);
  }
  50% {
    box-shadow: 0 5px 30px rgba(255, 105, 180, 0.7),
                0 0 55px rgba(255, 182, 193, 0.6),
                inset 0 0 40px rgba(255, 218, 185, 0.4);
  }
}

@keyframes pawPrint {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.1);
  }
}

@keyframes catPlay {
  0%, 100% {
    transform: translateY(-50%) translateX(0px);
  }
  25% {
    transform: translateY(-70%) translateX(10px);
  }
  50% {
    transform: translateY(-50%) translateX(20px);
  }
  75% {
    transform: translateY(-70%) translateX(10px);
  }
}

.player-title.style-cat-lover:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 35px rgba(255, 105, 180, 0.7),
              0 0 60px rgba(255, 182, 193, 0.6);
}

/* ========================================
   稱號樣式 - avalon (阿瓦隆：三劍聖域)
   三把劍依序插入 ＼｜／、文字發光、劍飛走
   使用純CSS繪製劍，不依賴emoji
======================================== */
.player-title.style-avalon {
  background: linear-gradient(135deg,
    rgba(192, 192, 192, 0.3) 0%,
    rgba(255, 215, 0, 0.2) 25%,
    rgba(192, 192, 192, 0.4) 50%,
    rgba(255, 215, 0, 0.2) 75%,
    rgba(192, 192, 192, 0.3) 100%);
  background-size: 200% 200%;
  border: 2px solid rgba(255, 215, 0, 0.6);
  color: #f0f0f0;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
               0 0 20px rgba(192, 192, 192, 0.6),
               0 2px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5),
              0 0 30px rgba(192, 192, 192, 0.4),
              inset 0 0 20px rgba(255, 255, 255, 0.1);
  animation: avalonTextBreath 6s ease-in-out infinite, avalonFlow 4s linear infinite;
  position: relative;
  z-index: 1;
  border-radius: 4px;
  padding: 10px 35px;
  font-weight: 700;
  letter-spacing: 2px;
  overflow: hidden;
}

/* 左劍 ↘ */
.player-title.style-avalon::before {
  content: '🗡';
  position: absolute;
  left: 30%;
  top: 50%;
  font-size: 1.4em;
  z-index: -1;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
  transform: translate(-50%, -50%) rotate(90deg);
  animation: avalonSword1 6s ease-in-out infinite;
  pointer-events: none;
}

/* 右劍 ↙ */
.player-title.style-avalon::after {
  content: '🗡';
  position: absolute;
  left: 70%;
  top: 50%;
  font-size: 1.4em;
  z-index: -1;
  filter: drop-shadow(0 0 8px rgba(192, 192, 192, 0.8));
  transform: translate(-50%, -50%) rotate(180deg);
  animation: avalonSword3 6s ease-in-out infinite;
  pointer-events: none;
}

/* 中劍 (需HTML元素) */
.player-title.style-avalon .avalon-sword {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 1.4em;
  z-index: -1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
  animation: avalonSword2 6s ease-in-out infinite;
  pointer-events: none;
}

/* 左劍動畫 ↘ (90deg) */
@keyframes avalonSword1 {
  0%, 5% {
    transform: translate(-50%, -50%) translate(-30px, -40px) rotate(90deg) scale(0.5);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) translate(-30px, -40px) rotate(90deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg) scale(1);
    opacity: 1;
  }
  30%, 65% {
    transform: translate(-50%, -50%) rotate(90deg) scale(1);
    opacity: 0.9;
  }
  75% {
    transform: translate(-50%, -50%) translate(-25px, -30px) rotate(90deg) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) translate(-25px, -30px) rotate(90deg) scale(0.5);
    opacity: 0;
  }
}

/* 中劍動畫 ｜ - 從上方飛入，0度角（垂直） */
@keyframes avalonSword2 {
  0%, 16% {
    transform: translate(-50%, -50%) translateY(-50px) rotate(0deg) scale(0.3);
    opacity: 0;
  }
  24% {
    transform: translate(-50%, -50%) translateY(-50px) rotate(0deg) scale(1);
    opacity: 1;
  }
  32% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
    box-shadow: 0 0 25px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 215, 0, 0.8);
  }
  40%, 65% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 0.95;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 215, 0, 0.6);
  }
  78% {
    transform: translate(-50%, -50%) translateY(-40px) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) translateY(-40px) rotate(0deg) scale(0.3);
    opacity: 0;
  }
}

/* 右劍動畫 ↙ (180deg) */
@keyframes avalonSword3 {
  0%, 20% {
    transform: translate(-50%, -50%) translate(30px, -40px) rotate(180deg) scale(0.5);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) translate(30px, -40px) rotate(180deg) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1);
    opacity: 1;
  }
  45%, 65% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1);
    opacity: 0.9;
  }
  78% {
    transform: translate(-50%, -50%) translate(25px, -30px) rotate(180deg) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) translate(25px, -30px) rotate(180deg) scale(0.5);
    opacity: 0;
  }
}

/* 文字發光 */
@keyframes avalonTextBreath {
  0%, 50% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
                 0 0 20px rgba(192, 192, 192, 0.6),
                 0 2px 4px rgba(0, 0, 0, 0.8);
  }
  55%, 62% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 1),
                 0 0 40px rgba(255, 255, 255, 0.9),
                 0 0 60px rgba(255, 215, 0, 0.7),
                 0 2px 4px rgba(0, 0, 0, 0.8);
  }
  70%, 100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
                 0 0 20px rgba(192, 192, 192, 0.6),
                 0 2px 4px rgba(0, 0, 0, 0.8);
  }
}

@keyframes avalonFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.player-title.style-avalon:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 40px rgba(255, 215, 0, 0.9),
              0 0 60px rgba(192, 192, 192, 0.8);
}

/* ========================================
   稱號樣式 - abyss-gazer (深淵凝視者)
   凝視深淵，深淵也在凝視你
======================================== */
.player-title.style-abyss-gazer {
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(20, 0, 40, 0.9) 40%,
    rgba(40, 0, 60, 0.85) 70%,
    rgba(60, 0, 80, 0.8) 100%);
  border: 2px solid rgba(100, 0, 150, 0.8);
  color: #d8bfd8;
  text-shadow: 0 0 15px rgba(148, 0, 211, 1),
               0 0 30px rgba(75, 0, 130, 0.9),
               0 0 45px rgba(138, 43, 226, 0.7);
  box-shadow: 0 4px 25px rgba(75, 0, 130, 0.9),
              0 0 50px rgba(0, 0, 0, 0.8),
              inset 0 0 40px rgba(0, 0, 0, 0.9);
  animation: abyssGaze 4s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
  padding: 10px 30px;
  overflow: visible;
}

.player-title.style-abyss-gazer::before {
  content: '👁️';
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  font-size: 1.6em;
  animation: eyeOpen 4s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(148, 0, 211, 1)) hue-rotate(280deg);
}

.player-title.style-abyss-gazer::after {
  content: '';
  position: absolute;
  inset: -5px;
  background: radial-gradient(circle at center, transparent 40%, rgba(75, 0, 130, 0.3) 100%);
  border-radius: 35px;
  pointer-events: none;
  animation: abyssPulse 3s ease-in-out infinite;
}

@keyframes abyssGaze {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(75, 0, 130, 0.9),
                0 0 50px rgba(0, 0, 0, 0.8),
                inset 0 0 40px rgba(0, 0, 0, 0.9);
  }
  50% {
    box-shadow: 0 6px 40px rgba(148, 0, 211, 1),
                0 0 80px rgba(75, 0, 130, 0.9),
                inset 0 0 60px rgba(40, 0, 60, 0.95);
  }
}

@keyframes eyeOpen {
  0%, 40%, 60%, 100% {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
  }
  45%, 55% {
    transform: translateX(-50%) scaleY(0.1);
    opacity: 0.5;
  }
}

@keyframes abyssPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.player-title.style-abyss-gazer:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(148, 0, 211, 1),
              0 0 100px rgba(75, 0, 130, 0.9);
}

/* ========================================
   稱號樣式 - scarlet-weaver (緋紅編織者)
   編織命運之絲線
======================================== */
.player-title.style-scarlet-weaver {
  background: linear-gradient(45deg,
    rgba(139, 0, 0, 0.7) 0%,
    rgba(178, 34, 34, 0.6) 25%,
    rgba(220, 20, 60, 0.5) 50%,
    rgba(178, 34, 34, 0.6) 75%,
    rgba(139, 0, 0, 0.7) 100%);
  background-size: 400% 400%;
  border: 2px solid #dc143c;
  color: #ffc0cb;
  text-shadow: 0 0 10px rgba(220, 20, 60, 1),
               0 0 20px rgba(139, 0, 0, 0.8),
               0 2px 4px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 20px rgba(220, 20, 60, 0.7),
              0 0 40px rgba(139, 0, 0, 0.5);
  animation: weaverThread 6s linear infinite, weaverPulse 2s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  padding: 10px 25px;
  overflow: visible;
}

.player-title.style-scarlet-weaver::before,
.player-title.style-scarlet-weaver::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dc143c, transparent);
  animation: threadWave 2s ease-in-out infinite;
}

.player-title.style-scarlet-weaver::before {
  top: -8px;
  left: 20%;
  transform: rotate(-15deg);
}

.player-title.style-scarlet-weaver::after {
  bottom: -8px;
  right: 20%;
  transform: rotate(15deg);
  animation-delay: 1s;
}

@keyframes weaverThread {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes weaverPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(220, 20, 60, 0.7),
                0 0 40px rgba(139, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 6px 30px rgba(220, 20, 60, 0.9),
                0 0 60px rgba(178, 34, 34, 0.7);
  }
}

@keyframes threadWave {
  0%, 100% {
    width: 30px;
    opacity: 0.6;
  }
  50% {
    width: 50px;
    opacity: 1;
  }
}

.player-title.style-scarlet-weaver:hover {
  transform: translateY(-2px) scale(1.05);
  animation: weaverThread 3s linear infinite, weaverPulse 1s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - eclipse-judge (星蝕審判者)
   日蝕與月蝕的審判之力
======================================== */
.player-title.style-eclipse-judge {
  background: radial-gradient(circle at 30% 50%,
    rgba(255, 200, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.95) 30%,
    rgba(0, 0, 0, 1) 50%,
    rgba(100, 100, 100, 0.3) 100%);
  border: 2px solid;
  border-image: linear-gradient(90deg, #ffd700 0%, #000 50%, #c0c0c0 100%) 1;
  color: #fff;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
               0 0 30px rgba(192, 192, 192, 0.6),
               0 2px 4px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9),
              0 0 40px rgba(255, 215, 0, 0.3),
              0 0 40px rgba(192, 192, 192, 0.3);
  animation: eclipseRotate 8s linear infinite;
  position: relative;
  border-radius: 0;
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  padding: 12px 30px;
  font-weight: 700;
}

.player-title.style-eclipse-judge::before {
  content: '☀️';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1));
  animation: sunPulse 4s ease-in-out infinite;
}

.player-title.style-eclipse-judge::after {
  content: '🌙';
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  filter: drop-shadow(0 0 10px rgba(192, 192, 192, 1));
  animation: moonPulse 4s ease-in-out infinite 2s;
}

@keyframes eclipseRotate {
  0% {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9),
                -20px 0 40px rgba(255, 215, 0, 0.4),
                20px 0 40px rgba(192, 192, 192, 0.2);
  }
  50% {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9),
                -20px 0 40px rgba(192, 192, 192, 0.2),
                20px 0 40px rgba(255, 215, 0, 0.4);
  }
  100% {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9),
                -20px 0 40px rgba(255, 215, 0, 0.4),
                20px 0 40px rgba(192, 192, 192, 0.2);
  }
}

@keyframes sunPulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.6; transform: translateY(-50%) scale(0.9); }
}

@keyframes moonPulse {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(0.9); }
  50% { opacity: 1; transform: translateY(-50%) scale(1); }
}

.player-title.style-eclipse-judge:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 1),
              -30px 0 60px rgba(255, 215, 0, 0.6),
              30px 0 60px rgba(192, 192, 192, 0.6);
}

/* ========================================
   稱號樣式 - void-walker (虛無行者)
   穿行於虛空之間的旅者
======================================== */
.player-title.style-void-walker {
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 20, 0.95) 0%, rgba(10, 0, 30, 0.98) 100%);
  border: 1px solid rgba(100, 200, 255, 0.5);
  color: #e0ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(255, 0, 255, 0.5),
               0 0 30px rgba(100, 200, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9),
              0 0 30px rgba(0, 255, 255, 0.3),
              0 0 30px rgba(255, 0, 255, 0.2),
              inset 0 0 30px rgba(0, 0, 0, 0.8);
  animation: voidFlicker 0.1s ease-in-out infinite, voidPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 3px;
  padding: 10px 25px;
  overflow: visible;
}

.player-title.style-void-walker::before {
  content: '◇';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: rgba(0, 255, 255, 0.8);
  animation: voidSymbol 2s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(0, 255, 255, 1);
}

.player-title.style-void-walker::after {
  content: '◇';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: rgba(255, 0, 255, 0.8);
  animation: voidSymbol 2s ease-in-out infinite 1s;
  text-shadow: 0 0 10px rgba(255, 0, 255, 1);
}

@keyframes voidFlicker {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.8; }
}

@keyframes voidPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9),
                0 0 30px rgba(0, 255, 255, 0.3),
                0 0 30px rgba(255, 0, 255, 0.2);
  }
  50% {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.95),
                0 0 50px rgba(0, 255, 255, 0.5),
                0 0 50px rgba(255, 0, 255, 0.4);
  }
}

@keyframes voidSymbol {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
  }
}

.player-title.style-void-walker:hover {
  transform: translateY(-2px) scale(1.05);
  animation: voidFlicker 0.05s ease-in-out infinite, voidPulse 1.5s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - soul-reaper (魂噬者)
   吞噬靈魂的收割者
======================================== */
.player-title.style-soul-reaper {
  background: linear-gradient(135deg,
    rgba(30, 30, 30, 0.95) 0%,
    rgba(50, 20, 50, 0.9) 50%,
    rgba(30, 30, 30, 0.95) 100%);
  border: 2px solid rgba(100, 255, 100, 0.6);
  color: #90ee90;
  text-shadow: 0 0 15px rgba(100, 255, 100, 1),
               0 0 30px rgba(50, 205, 50, 0.8),
               0 0 45px rgba(0, 128, 0, 0.6);
  box-shadow: 0 4px 25px rgba(0, 100, 0, 0.8),
              0 0 40px rgba(100, 255, 100, 0.4),
              inset 0 0 30px rgba(0, 50, 0, 0.6);
  animation: soulDrain 3s ease-in-out infinite;
  position: relative;
  border-radius: 0;
  clip-path: polygon(0 20%, 10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%);
  padding: 12px 30px;
  font-weight: 700;
}

.player-title.style-soul-reaper::before {
  content: '💀';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 10px rgba(100, 255, 100, 1)) brightness(1.1);
  animation: skullFloat 2s ease-in-out infinite;
}

.player-title.style-soul-reaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(100, 255, 100, 0.1) 0%,
    transparent 50%,
    rgba(100, 255, 100, 0.1) 100%);
  animation: soulWave 2s linear infinite;
  pointer-events: none;
  clip-path: inherit;
}

@keyframes soulDrain {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(0, 100, 0, 0.8),
                0 0 40px rgba(100, 255, 100, 0.4);
    border-color: rgba(100, 255, 100, 0.6);
  }
  50% {
    box-shadow: 0 6px 40px rgba(50, 205, 50, 1),
                0 0 70px rgba(100, 255, 100, 0.7);
    border-color: rgba(150, 255, 150, 0.9);
  }
}

@keyframes skullFloat {
  0%, 100% {
    transform: translateY(-50%) rotate(-5deg);
  }
  50% {
    transform: translateY(-60%) rotate(5deg);
  }
}

@keyframes soulWave {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

.player-title.style-soul-reaper:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(50, 205, 50, 1),
              0 0 100px rgba(100, 255, 100, 0.8);
}

/* ========================================
   稱號樣式 - beast-claw (獸爪狂襲)
   野性爪痕、撕裂效果、狂暴獸性
======================================== */
.player-title.style-beast-claw {
  background: linear-gradient(135deg,
    rgba(139, 69, 19, 0.7) 0%,
    rgba(160, 82, 45, 0.6) 30%,
    rgba(210, 105, 30, 0.5) 60%,
    rgba(139, 69, 19, 0.7) 100%);
  background-size: 200% 200%;
  border: 3px solid rgba(255, 100, 50, 0.8);
  color: #ffddcc;
  text-shadow: 0 0 10px rgba(255, 100, 50, 0.9),
               0 0 20px rgba(200, 50, 0, 0.7),
               2px 2px 4px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 20px rgba(139, 69, 19, 0.8),
              0 0 30px rgba(255, 100, 50, 0.5),
              inset 0 0 20px rgba(100, 50, 0, 0.4);
  animation: beastRage 2s ease-in-out infinite, beastFlow 3s linear infinite;
  position: relative;
  border-radius: 5px;
  padding: 10px 30px;
  font-weight: 900;
  letter-spacing: 1px;
  overflow: visible;
  clip-path: polygon(
    0% 10%, 5% 0%, 15% 8%, 25% 0%, 35% 5%, 50% 0%, 65% 5%, 75% 0%, 85% 8%, 95% 0%, 100% 10%,
    100% 90%, 95% 100%, 85% 92%, 75% 100%, 65% 95%, 50% 100%, 35% 95%, 25% 100%, 15% 92%, 5% 100%, 0% 90%
  );
}

/* 左側爪痕 */
.player-title.style-beast-claw::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 40px;
  background:
    linear-gradient(160deg, transparent 40%, rgba(200, 0, 0, 0.8) 40%, rgba(200, 0, 0, 0.8) 45%, transparent 45%),
    linear-gradient(160deg, transparent 50%, rgba(200, 0, 0, 0.9) 50%, rgba(200, 0, 0, 0.9) 55%, transparent 55%),
    linear-gradient(160deg, transparent 60%, rgba(200, 0, 0, 0.8) 60%, rgba(200, 0, 0, 0.8) 65%, transparent 65%);
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
  animation: clawSlash 3s ease-in-out infinite;
}

/* 右側爪痕 */
.player-title.style-beast-claw::after {
  content: '';
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 30px;
  height: 40px;
  background:
    linear-gradient(160deg, transparent 40%, rgba(200, 0, 0, 0.8) 40%, rgba(200, 0, 0, 0.8) 45%, transparent 45%),
    linear-gradient(160deg, transparent 50%, rgba(200, 0, 0, 0.9) 50%, rgba(200, 0, 0, 0.9) 55%, transparent 55%),
    linear-gradient(160deg, transparent 60%, rgba(200, 0, 0, 0.8) 60%, rgba(200, 0, 0, 0.8) 65%, transparent 65%);
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
  animation: clawSlash 3s ease-in-out infinite 0.5s;
}

@keyframes beastRage {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(139, 69, 19, 0.8),
                0 0 30px rgba(255, 100, 50, 0.5);
    transform: scale(1);
  }
  25% {
    transform: scale(1.02) rotate(-1deg);
  }
  50% {
    box-shadow: 0 6px 35px rgba(200, 50, 0, 1),
                0 0 50px rgba(255, 100, 50, 0.8),
                0 0 70px rgba(255, 50, 0, 0.4);
    transform: scale(1.03);
  }
  75% {
    transform: scale(1.02) rotate(1deg);
  }
}

@keyframes beastFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes clawSlash {
  0%, 70%, 100% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1));
  }
  90% {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.1);
  }
}

.player-title.style-beast-claw:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 50px rgba(200, 50, 0, 1),
              0 0 80px rgba(255, 100, 50, 0.9);
  animation: beastRage 0.5s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - hellfire (烈焰焚天)
   沉穩的烈火燃燒效果、規律的火焰
======================================== */
.player-title.style-hellfire {
  background: linear-gradient(0deg,
    rgba(139, 0, 0, 0.9) 0%,
    rgba(178, 34, 34, 0.85) 25%,
    rgba(205, 92, 0, 0.8) 50%,
    rgba(178, 34, 34, 0.85) 75%,
    rgba(139, 0, 0, 0.9) 100%);
  background-size: 100% 200%;
  border: 2px solid rgba(255, 100, 0, 0.7);
  color: #ffd4a3;
  text-shadow: 0 0 8px rgba(255, 150, 50, 0.8),
               0 0 15px rgba(255, 100, 0, 0.6),
               0 2px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 15px rgba(200, 50, 0, 0.6),
              0 0 30px rgba(150, 30, 0, 0.4),
              inset 0 0 20px rgba(100, 20, 0, 0.5);
  animation: hellfireBurn 3s ease-in-out infinite, hellfireRise 4s linear infinite;
  position: relative;
  border-radius: 10px;
  padding: 12px 35px;
  font-weight: 900;
  letter-spacing: 3px;
  overflow: visible;
}

/* 頂部火焰 - 規律擺動 */
.player-title.style-hellfire::before {
  content: '🔥';
  position: absolute;
  top: -15px;
  left: 25%;
  font-size: 1.2em;
  animation: fireFlicker1 2s ease-in-out infinite;
  filter: brightness(0.9) saturate(0.8);
  opacity: 0.8;
}

/* 右上火焰 - 規律擺動 */
.player-title.style-hellfire::after {
  content: '🔥';
  position: absolute;
  top: -12px;
  right: 25%;
  font-size: 1em;
  animation: fireFlicker2 2.5s ease-in-out infinite;
  filter: brightness(0.85) saturate(0.8);
  opacity: 0.75;
}

@keyframes hellfireBurn {
  0%, 100% {
    box-shadow: 0 0 15px rgba(200, 50, 0, 0.6),
                0 0 30px rgba(150, 30, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(220, 80, 0, 0.7),
                0 0 40px rgba(180, 50, 0, 0.5),
                0 -5px 20px rgba(200, 100, 0, 0.3);
  }
}

@keyframes hellfireRise {
  0% { background-position: 100% 100%; }
  100% { background-position: 100% 0%; }
}

@keyframes fireFlicker1 {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(-3deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-5px) scale(1.05) rotate(3deg);
    opacity: 0.85;
  }
}

@keyframes fireFlicker2 {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(2deg);
    opacity: 0.65;
  }
  50% {
    transform: translateY(-4px) scale(1.03) rotate(-2deg);
    opacity: 0.8;
  }
}

.player-title.style-hellfire:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(220, 80, 0, 0.8),
              0 0 50px rgba(180, 50, 0, 0.6);
}

/* ========================================
   稱號樣式 - chaos-carnival (混沌嘉年華)
   柔和的多彩效果、狂歡氛圍
======================================== */
.player-title.style-chaos-carnival {
  background: linear-gradient(45deg,
    rgba(200, 50, 100, 0.5) 0%,
    rgba(200, 150, 50, 0.5) 16%,
    rgba(50, 180, 100, 0.5) 33%,
    rgba(50, 150, 200, 0.5) 50%,
    rgba(130, 50, 180, 0.5) 66%,
    rgba(200, 100, 50, 0.5) 83%,
    rgba(200, 50, 100, 0.5) 100%);
  background-size: 300% 300%;
  border: 2px dashed rgba(200, 150, 100, 0.6);
  color: #ffffff;
  text-shadow: 1px 1px 0 rgba(200, 50, 100, 0.6),
               -1px -1px 0 rgba(50, 150, 200, 0.6),
               0 0 10px rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(150, 100, 150, 0.4),
              inset 0 0 15px rgba(255, 255, 255, 0.1);
  animation: carnivalFlow 6s linear infinite;
  position: relative;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 900;
  overflow: visible;
}

/* 左側裝飾 */
.player-title.style-chaos-carnival::before {
  content: '🎪';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: carnivalBounce 2s ease-in-out infinite;
  opacity: 0.85;
}

/* 右側裝飾 */
.player-title.style-chaos-carnival::after {
  content: '🎭';
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: carnivalBounce 2s ease-in-out infinite 1s;
  opacity: 0.85;
}

@keyframes carnivalFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes carnivalBounce {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-55%) rotate(-8deg) scale(1.05);
  }
  50% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-55%) rotate(8deg) scale(1.05);
  }
}

.player-title.style-chaos-carnival:hover {
  transform: scale(1.05) rotate(3deg);
  box-shadow: 0 6px 30px rgba(150, 100, 150, 0.6);
}

/* ========================================
   稱號樣式 - pixel-glitch (像素錯亂)
   復古像素風、故障藝術、賽博龐克
======================================== */
.player-title.style-pixel-glitch {
  background: linear-gradient(90deg,
    rgba(0, 255, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.3) 50%,
    rgba(0, 255, 255, 0.3) 100%);
  border: 3px solid #00ffff;
  color: #ffffff;
  text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff,
               0 0 10px rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6),
              0 0 40px rgba(255, 0, 255, 0.4),
              inset 0 0 20px rgba(0, 0, 0, 0.5);
  animation: pixelGlitch 3s steps(1) infinite;
  position: relative;
  border-radius: 0;
  padding: 10px 25px;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 3px;
  image-rendering: pixelated;
}

.player-title.style-pixel-glitch::before {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 0;
  width: 100%;
  height: 100%;
  color: #ff00ff;
  background: transparent;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitchTop 2s steps(1) infinite;
}

.player-title.style-pixel-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  top: 0;
  width: 100%;
  height: 100%;
  color: #00ffff;
  background: transparent;
  overflow: hidden;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitchBottom 2.5s steps(1) infinite;
}

@keyframes pixelGlitch {
  0%, 90%, 100% {
    transform: translate(0);
    filter: none;
  }
  91% {
    transform: translate(-2px, 1px);
    filter: hue-rotate(90deg);
  }
  92% {
    transform: translate(2px, -1px);
    filter: hue-rotate(180deg);
  }
  93% {
    transform: translate(-1px, 2px);
    filter: hue-rotate(270deg);
  }
  94% {
    transform: translate(0);
    filter: none;
  }
}

@keyframes glitchTop {
  0%, 85%, 100% { transform: translate(0); }
  86% { transform: translate(-5px, 0); }
  87% { transform: translate(5px, 0); }
  88% { transform: translate(0); }
}

@keyframes glitchBottom {
  0%, 80%, 100% { transform: translate(0); }
  81% { transform: translate(3px, 0); }
  82% { transform: translate(-3px, 0); }
  83% { transform: translate(0); }
}

.player-title.style-pixel-glitch:hover {
  animation: pixelGlitch 0.5s steps(1) infinite;
  transform: scale(1.05);
}

/* ========================================
   稱號樣式 - blood-oath (血誓契約)
   血紅色、神秘符文、暗黑契約
======================================== */
.player-title.style-blood-oath {
  background: radial-gradient(ellipse at center,
    rgba(80, 0, 0, 0.95) 0%,
    rgba(50, 0, 0, 0.9) 50%,
    rgba(30, 0, 0, 0.95) 100%);
  border: 2px solid;
  border-image: linear-gradient(45deg, #8b0000, #ff0000, #8b0000) 1;
  color: #ff6666;
  text-shadow: 0 0 10px rgba(255, 0, 0, 1),
               0 0 20px rgba(139, 0, 0, 0.8),
               0 0 30px rgba(255, 0, 0, 0.6);
  box-shadow: 0 4px 25px rgba(139, 0, 0, 0.9),
              0 0 50px rgba(255, 0, 0, 0.4),
              inset 0 0 30px rgba(100, 0, 0, 0.8);
  animation: bloodPulse 2s ease-in-out infinite;
  position: relative;
  border-radius: 0;
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  padding: 12px 35px;
  font-weight: 700;
  overflow: visible;
}

/* 血滴效果 */
.player-title.style-blood-oath::before {
  content: '🩸';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  animation: bloodDrip 2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
}

/* 契約符文 */
.player-title.style-blood-oath::after {
  content: '⛧';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  color: #ff0000;
  animation: runeGlow 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 1));
}

@keyframes bloodPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(139, 0, 0, 0.9),
                0 0 50px rgba(255, 0, 0, 0.4);
    border-image: linear-gradient(45deg, #8b0000, #ff0000, #8b0000) 1;
  }
  50% {
    box-shadow: 0 6px 40px rgba(200, 0, 0, 1),
                0 0 80px rgba(255, 0, 0, 0.7);
    border-image: linear-gradient(45deg, #ff0000, #ff4444, #ff0000) 1;
  }
}

@keyframes bloodDrip {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-30%) translateX(-3px);
    opacity: 0.7;
  }
}

@keyframes runeGlow {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 1));
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 100, 100, 1)) drop-shadow(0 0 40px rgba(255, 0, 0, 0.8));
    transform: translateY(-50%) rotate(180deg);
  }
}

.player-title.style-blood-oath:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 50px rgba(200, 0, 0, 1),
              0 0 100px rgba(255, 0, 0, 0.8);
}

/* ========================================
   稱號樣式 - ancient-rune (遠古符文)
   神秘符文、古老石刻、時光印記
======================================== */
.player-title.style-ancient-rune {
  background: linear-gradient(135deg,
    rgba(70, 70, 60, 0.95) 0%,
    rgba(100, 90, 70, 0.9) 30%,
    rgba(80, 75, 60, 0.95) 60%,
    rgba(60, 55, 45, 0.95) 100%);
  border: 3px solid rgba(180, 160, 120, 0.8);
  color: #e8dcc8;
  text-shadow: 0 0 10px rgba(200, 180, 140, 0.8),
               0 0 20px rgba(255, 220, 150, 0.5),
               2px 2px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 20px rgba(100, 80, 50, 0.8),
              0 0 30px rgba(180, 160, 120, 0.4),
              inset 0 0 25px rgba(0, 0, 0, 0.5);
  animation: runeAwaken 4s ease-in-out infinite;
  position: relative;
  border-radius: 8px;
  padding: 12px 35px;
  font-weight: 700;
  letter-spacing: 4px;
  overflow: visible;
}

/* 左側符文 */
.player-title.style-ancient-rune::before {
  content: 'ᚠ';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8em;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1);
  animation: runeFlicker 3s ease-in-out infinite;
}

/* 右側符文 */
.player-title.style-ancient-rune::after {
  content: 'ᚨ';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8em;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1);
  animation: runeFlicker 3s ease-in-out infinite 1.5s;
}

@keyframes runeAwaken {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(100, 80, 50, 0.8),
                0 0 30px rgba(180, 160, 120, 0.4);
  }
  50% {
    box-shadow: 0 6px 35px rgba(150, 120, 70, 1),
                0 0 50px rgba(255, 215, 0, 0.5),
                0 0 80px rgba(200, 180, 140, 0.3);
  }
}

@keyframes runeFlicker {
  0%, 40%, 60%, 100% {
    opacity: 0.6;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  }
  45%, 55% {
    opacity: 1;
    text-shadow: 0 0 20px rgba(255, 215, 0, 1),
                 0 0 40px rgba(255, 200, 100, 0.8);
  }
}

.player-title.style-ancient-rune:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 40px rgba(180, 160, 120, 1),
              0 0 70px rgba(255, 215, 0, 0.6);
}

/* ========================================
   稱號樣式 - guild-leader-knight (團長 - 紅白騎士盾)
   參考：刀劍神域血盟騎士團團長 - 紅白相間的盾牌騎士風格
======================================== */
.player-title.style-guild-leader-knight {
  background: linear-gradient(135deg,
    rgba(220, 20, 60, 0.6) 0%,
    rgba(255, 255, 255, 0.5) 25%,
    rgba(220, 20, 60, 0.6) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    rgba(220, 20, 60, 0.6) 100%);
  background-size: 200% 200%;
  border: 4px solid;
  border-image: linear-gradient(135deg, #dc143c 0%, #ffffff 50%, #dc143c 100%) 1;
  color: #fffafa;
  text-shadow: 0 0 15px rgba(220, 20, 60, 1),
               0 0 30px rgba(255, 255, 255, 0.9),
               0 2px 8px rgba(139, 0, 0, 0.9);
  box-shadow: 0 4px 25px rgba(220, 20, 60, 0.9),
              0 0 50px rgba(255, 255, 255, 0.5),
              inset 0 0 25px rgba(220, 20, 60, 0.3);
  animation: knightFlow 4s linear infinite, knightGlow 3s ease-in-out infinite;
  position: relative;
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: 2px;
}

.player-title.style-guild-leader-knight::before {
  content: '🛡️';
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8em;
  animation: shieldPulse 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(220, 20, 60, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.7));
}

.player-title.style-guild-leader-knight::after {
  content: '⚔️';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: swordSpin 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.8));
}

@keyframes knightFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes knightGlow {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(220, 20, 60, 0.9),
                0 0 50px rgba(255, 255, 255, 0.5),
                inset 0 0 25px rgba(220, 20, 60, 0.3);
  }
  50% {
    box-shadow: 0 8px 40px rgba(220, 20, 60, 1),
                0 0 80px rgba(255, 255, 255, 0.8),
                0 0 120px rgba(220, 20, 60, 0.6),
                inset 0 0 40px rgba(255, 255, 255, 0.4);
  }
}

@keyframes shieldPulse {
  0%, 100% {
    transform: translateY(-50%) scale(1) rotate(-5deg);
  }
  50% {
    transform: translateY(-50%) scale(1.15) rotate(5deg);
  }
}

@keyframes swordSpin {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  25% {
    transform: translateY(-50%) rotate(15deg);
  }
  75% {
    transform: translateY(-50%) rotate(-15deg);
  }
}

.player-title.style-guild-leader-knight:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - guild-leader-royal (團長 - 皇家金紅)
   參考：血盟騎士團團長 - 更華麗的金紅皇室版本
======================================== */
.player-title.style-guild-leader-royal {
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 215, 0, 0.15) 0px,
      rgba(255, 215, 0, 0.15) 10px,
      transparent 10px,
      transparent 20px),
    linear-gradient(135deg,
      rgba(178, 34, 34, 0.7) 0%,
      rgba(255, 215, 0, 0.6) 30%,
      rgba(178, 34, 34, 0.7) 50%,
      rgba(255, 215, 0, 0.6) 70%,
      rgba(178, 34, 34, 0.7) 100%);
  background-size: 100% 100%, 300% 300%;
  border: 4px double #ffd700;
  color: #fffacd;
  text-shadow: 0 0 20px rgba(255, 215, 0, 1),
               0 0 40px rgba(178, 34, 34, 0.9),
               0 2px 10px rgba(139, 0, 0, 1);
  box-shadow: 0 4px 30px rgba(255, 215, 0, 0.9),
              0 0 60px rgba(178, 34, 34, 0.7),
              inset 0 0 30px rgba(255, 215, 0, 0.3);
  animation: royalKnightShift 5s linear infinite, royalKnightPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  font-weight: 900;
  font-family: 'Georgia', serif;
  letter-spacing: 3px;
}

.player-title.style-guild-leader-royal::before {
  content: '♚';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 30px rgba(178, 34, 34, 0.8);
  animation: crownBob 2s ease-in-out infinite;
}

.player-title.style-guild-leader-royal::after {
  content: '🏰';
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: castleGlow 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9));
}

@keyframes royalKnightShift {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 300% 50%; }
}

@keyframes royalKnightPulse {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(255, 215, 0, 0.9),
                0 0 60px rgba(178, 34, 34, 0.7),
                inset 0 0 30px rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
  }
  50% {
    box-shadow: 0 8px 50px rgba(255, 215, 0, 1),
                0 0 100px rgba(178, 34, 34, 1),
                0 0 150px rgba(255, 215, 0, 0.7),
                inset 0 0 50px rgba(255, 215, 0, 0.5);
    border-color: #ffed4e;
  }
}

@keyframes crownBob {
  0%, 100% { transform: translateY(-50%) rotate(-3deg); }
  50% { transform: translateY(-55%) rotate(3deg); }
}

@keyframes castleGlow {
  0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)); }
  50% { opacity: 1; filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)); }
}

.player-title.style-guild-leader-royal:hover {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.4);
}

/* ========================================
   稱號樣式 - beater-blacksword (封閉者 - 黑之劍士)
   參考：刀劍神域桐人 - 黑之劍士雙刀流風格
======================================== */
.player-title.style-beater-blacksword {
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(30, 30, 50, 0.9) 30%,
    rgba(0, 0, 0, 0.95) 50%,
    rgba(50, 50, 80, 0.9) 70%,
    rgba(0, 0, 0, 0.95) 100%);
  border: 3px solid #1a1a2e;
  color: #e8e8ff;
  text-shadow: 0 0 15px rgba(100, 149, 237, 1),
               0 0 30px rgba(65, 105, 225, 0.9),
               0 0 45px rgba(0, 0, 0, 1),
               0 2px 10px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.95),
              0 0 50px rgba(65, 105, 225, 0.6),
              inset 0 0 30px rgba(100, 149, 237, 0.2);
  animation: blackSwordPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 3px;
  font-weight: 900;
  letter-spacing: 1px;
  clip-path: polygon(3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%, 0% 50%);
}

.player-title.style-beater-blacksword::before {
  content: '⚔';
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  font-size: 1.8em;
  color: #4169e1;
  text-shadow: 0 0 20px rgba(65, 105, 225, 1), 0 0 40px rgba(100, 149, 237, 0.8);
  animation: dualBladeLeft 2.5s ease-in-out infinite;
}

.player-title.style-beater-blacksword::after {
  content: '⚔';
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  font-size: 1.8em;
  color: #4169e1;
  text-shadow: 0 0 20px rgba(65, 105, 225, 1), 0 0 40px rgba(100, 149, 237, 0.8);
  animation: dualBladeRight 2.5s ease-in-out infinite;
}

@keyframes blackSwordPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.95),
                0 0 50px rgba(65, 105, 225, 0.6),
                inset 0 0 30px rgba(100, 149, 237, 0.2);
    border-color: #1a1a2e;
  }
  50% {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 1),
                0 0 80px rgba(65, 105, 225, 0.9),
                0 0 120px rgba(100, 149, 237, 0.5),
                inset 0 0 50px rgba(100, 149, 237, 0.4);
    border-color: #4169e1;
  }
}

@keyframes dualBladeLeft {
  0%, 100% { transform: translateY(-50%) rotate(-45deg) scale(1); }
  50% { transform: translateY(-50%) rotate(-30deg) scale(1.1); }
}

@keyframes dualBladeRight {
  0%, 100% { transform: translateY(-50%) rotate(45deg) scale(1); }
  50% { transform: translateY(-50%) rotate(30deg) scale(1.1); }
}

.player-title.style-beater-blacksword:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 1),
              0 0 100px rgba(65, 105, 225, 1);
}

/* ========================================
   稱號樣式 - beater-dualblade (封閉者 - 暗影雙刀)
   參考：桐人覺醒後的二刀流 - 更神秘的暗影版本
======================================== */
.player-title.style-beater-dualblade {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(75, 0, 130, 0.3) 20%,
      rgba(0, 0, 0, 0.95) 50%,
      rgba(75, 0, 130, 0.3) 80%,
      transparent 100%),
    linear-gradient(135deg,
      rgba(25, 25, 112, 0.8) 0%,
      rgba(0, 0, 30, 0.95) 50%,
      rgba(25, 25, 112, 0.8) 100%);
  border: 2px solid rgba(138, 43, 226, 0.8);
  color: #b8b8ff;
  text-shadow: 0 0 20px rgba(138, 43, 226, 1),
               0 0 40px rgba(75, 0, 130, 0.9),
               0 0 60px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 30px rgba(75, 0, 130, 0.9),
              0 0 60px rgba(138, 43, 226, 0.6),
              inset 0 0 40px rgba(0, 0, 0, 0.8);
  animation: dualBladeShadow 4s ease-in-out infinite;
  position: relative;
  border-radius: 0;
  font-weight: 900;
  clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}

.player-title.style-beater-dualblade::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(138, 43, 226, 0.8), transparent);
  animation: bladeSlash1 3s ease-in-out infinite;
  pointer-events: none;
}

.player-title.style-beater-dualblade::after {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(75, 0, 130, 0.8), transparent);
  animation: bladeSlash2 3s ease-in-out infinite 1.5s;
  pointer-events: none;
}

@keyframes dualBladeShadow {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(75, 0, 130, 0.9),
                0 0 60px rgba(138, 43, 226, 0.6),
                inset 0 0 40px rgba(0, 0, 0, 0.8);
    border-color: rgba(138, 43, 226, 0.8);
  }
  50% {
    box-shadow: 0 8px 50px rgba(75, 0, 130, 1),
                0 0 100px rgba(138, 43, 226, 0.9),
                0 0 150px rgba(75, 0, 130, 0.6),
                inset 0 0 60px rgba(138, 43, 226, 0.5);
    border-color: rgba(186, 85, 211, 1);
  }
}

@keyframes bladeSlash1 {
  0%, 30% { left: -100%; opacity: 0; }
  35% { opacity: 1; }
  65% { left: 200%; opacity: 1; }
  70%, 100% { left: 200%; opacity: 0; }
}

@keyframes bladeSlash2 {
  0%, 30% { right: -100%; opacity: 0; }
  35% { opacity: 1; }
  65% { right: 200%; opacity: 1; }
  70%, 100% { right: 200%; opacity: 0; }
}

.player-title.style-beater-dualblade:hover {
  transform: translateY(-3px) scale(1.05);
  animation: dualBladeShadow 1s ease-in-out infinite;
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - raid-vanguard (攻略組 - 前鋒隊)
   自創設計：戰鬥前鋒風格，橙色火焰
======================================== */
.player-title.style-raid-vanguard {
  background: linear-gradient(135deg,
    rgba(255, 140, 0, 0.6) 0%,
    rgba(255, 69, 0, 0.7) 30%,
    rgba(255, 140, 0, 0.6) 50%,
    rgba(255, 69, 0, 0.7) 70%,
    rgba(255, 140, 0, 0.6) 100%);
  background-size: 200% 200%;
  border: 3px solid #ff8c00;
  color: #fffaf0;
  text-shadow: 0 0 15px rgba(255, 140, 0, 1),
               0 0 30px rgba(255, 69, 0, 0.9),
               0 2px 8px rgba(139, 69, 19, 0.9);
  box-shadow: 0 4px 25px rgba(255, 140, 0, 0.9),
              0 0 50px rgba(255, 69, 0, 0.6),
              inset 0 0 25px rgba(255, 140, 0, 0.3);
  animation: vanguardBlaze 3s linear infinite, vanguardPulse 2.5s ease-in-out infinite;
  position: relative;
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  clip-path: polygon(0% 10%, 10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%);
}

.player-title.style-raid-vanguard::before {
  content: '⚔';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  color: #ff4500;
  text-shadow: 0 0 15px rgba(255, 69, 0, 1);
  animation: vanguardSword 2s ease-in-out infinite;
}

.player-title.style-raid-vanguard::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 15%;
  right: 15%;
  height: 12px;
  background: linear-gradient(to top, transparent, rgba(255, 69, 0, 0.8));
  filter: blur(6px);
  animation: flameBottom 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vanguardBlaze {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes vanguardPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 140, 0, 0.9),
                0 0 50px rgba(255, 69, 0, 0.6),
                inset 0 0 25px rgba(255, 140, 0, 0.3);
  }
  50% {
    box-shadow: 0 8px 40px rgba(255, 140, 0, 1),
                0 0 80px rgba(255, 69, 0, 0.9),
                0 0 120px rgba(255, 140, 0, 0.5),
                inset 0 0 40px rgba(255, 69, 0, 0.5);
  }
}

@keyframes vanguardSword {
  0%, 100% { transform: translateY(-50%) rotate(-10deg); }
  50% { transform: translateY(-50%) rotate(10deg); }
}

@keyframes flameBottom {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50% { transform: scaleY(1.4); opacity: 1; }
}

.player-title.style-raid-vanguard:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - raid-elite (攻略組 - 菁英隊)
   自創設計：菁英小隊風格，藍金科技感
======================================== */
.player-title.style-raid-elite {
  background:
    linear-gradient(45deg,
      rgba(0, 191, 255, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 191, 255, 0.1) 75%),
    linear-gradient(45deg,
      rgba(0, 191, 255, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 191, 255, 0.1) 75%),
    linear-gradient(135deg,
      rgba(25, 25, 112, 0.8) 0%,
      rgba(0, 51, 102, 0.9) 50%,
      rgba(25, 25, 112, 0.8) 100%);
  background-size: 8px 8px, 8px 8px, 100% 100%;
  background-position: 0 0, 4px 4px, 0 0;
  border: 3px solid;
  border-image: linear-gradient(90deg, #00bfff, #ffd700, #00bfff) 1;
  color: #e0f7ff;
  text-shadow: 0 0 15px rgba(0, 191, 255, 1),
               0 0 30px rgba(255, 215, 0, 0.7),
               0 2px 8px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 25px rgba(0, 191, 255, 0.8),
              0 0 50px rgba(255, 215, 0, 0.4),
              inset 0 0 25px rgba(0, 191, 255, 0.2);
  animation: eliteScan 4s linear infinite, eliteGlow 3s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
}

.player-title.style-raid-elite::before {
  content: '★';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1);
  animation: eliteStar 2s ease-in-out infinite;
}

.player-title.style-raid-elite::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 1), transparent);
  animation: eliteScanLine 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes eliteScan {
  0%, 100% { background-position: 0 0, 4px 4px, 0 0; }
  50% { background-position: 8px 8px, 12px 12px, 0 0; }
}

@keyframes eliteGlow {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(0, 191, 255, 0.8),
                0 0 50px rgba(255, 215, 0, 0.4),
                inset 0 0 25px rgba(0, 191, 255, 0.2);
  }
  50% {
    box-shadow: 0 8px 40px rgba(0, 191, 255, 1),
                0 0 80px rgba(255, 215, 0, 0.7),
                0 0 100px rgba(0, 191, 255, 0.5),
                inset 0 0 40px rgba(0, 191, 255, 0.4);
  }
}

@keyframes eliteStar {
  0%, 100% { transform: translateY(-50%) rotate(0deg) scale(1); }
  50% { transform: translateY(-50%) rotate(180deg) scale(1.2); }
}

@keyframes eliteScanLine {
  0% { top: 0; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.player-title.style-raid-elite:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - shrimp-rice-cute (蝦仁飯 - 可愛蝦蝦)
   搞笑風格：可愛蝦子版，粉橘色調
======================================== */
.player-title.style-shrimp-rice-cute {
  background: linear-gradient(135deg,
    rgba(255, 182, 193, 0.6) 0%,
    rgba(255, 160, 122, 0.5) 30%,
    rgba(255, 218, 185, 0.5) 50%,
    rgba(255, 160, 122, 0.5) 70%,
    rgba(255, 182, 193, 0.6) 100%);
  border: 3px dashed #ff7f50;
  color: #fff5ee;
  text-shadow: 0 0 10px rgba(255, 127, 80, 0.9),
               0 0 20px rgba(255, 160, 122, 0.7),
               0 2px 5px rgba(210, 105, 30, 0.8);
  box-shadow: 0 4px 20px rgba(255, 127, 80, 0.7),
              0 0 40px rgba(255, 182, 193, 0.5),
              inset 0 0 20px rgba(255, 218, 185, 0.4);
  animation: shrimpBounce 2s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
  font-weight: 700;
}

.player-title.style-shrimp-rice-cute::before {
  content: '🦐';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  animation: shrimpWiggle 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 127, 80, 0.8));
}

.player-title.style-shrimp-rice-cute::after {
  content: '🍚';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: riceBob 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 218, 185, 0.8));
}

@keyframes shrimpBounce {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(255, 127, 80, 0.7),
                0 0 40px rgba(255, 182, 193, 0.5),
                inset 0 0 20px rgba(255, 218, 185, 0.4);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(255, 127, 80, 0.9),
                0 0 60px rgba(255, 182, 193, 0.7),
                inset 0 0 30px rgba(255, 218, 185, 0.6);
  }
}

@keyframes shrimpWiggle {
  0%, 100% { transform: translateY(-50%) rotate(-10deg); }
  25% { transform: translateY(-50%) rotate(5deg); }
  50% { transform: translateY(-50%) rotate(-5deg); }
  75% { transform: translateY(-50%) rotate(10deg); }
}

@keyframes riceBob {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-55%) scale(1.1); }
}

.player-title.style-shrimp-rice-cute:hover {
  transform: translateY(-3px) rotate(2deg);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - shrimp-rice-golden (蝦仁飯 - 金黃炒飯)
   搞笑風格：金黃炒飯版，更閃亮
======================================== */
.player-title.style-shrimp-rice-golden {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 3%),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 2%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 3%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 2%),
    linear-gradient(135deg,
      rgba(255, 215, 0, 0.6) 0%,
      rgba(255, 165, 0, 0.7) 30%,
      rgba(255, 200, 100, 0.6) 50%,
      rgba(255, 165, 0, 0.7) 70%,
      rgba(255, 215, 0, 0.6) 100%);
  border: 3px solid #ffa500;
  color: #fffacd;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1),
               0 0 30px rgba(255, 165, 0, 0.9),
               0 2px 8px rgba(139, 69, 19, 0.9);
  box-shadow: 0 4px 25px rgba(255, 215, 0, 0.9),
              0 0 50px rgba(255, 165, 0, 0.6),
              inset 0 0 25px rgba(255, 200, 100, 0.4);
  animation: friedRiceSizzle 0.5s ease-in-out infinite, goldenGlow 3s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  font-weight: 900;
}

.player-title.style-shrimp-rice-golden::before {
  content: '🍳';
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8em;
  animation: panFlip 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.9));
}

.player-title.style-shrimp-rice-golden::after {
  content: '✨';
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  animation: sparkleRotate 2s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 1));
}

@keyframes friedRiceSizzle {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-1px) translateX(1px); }
  50% { transform: translateY(1px); }
  75% { transform: translateY(-1px) translateX(-1px); }
}

@keyframes goldenGlow {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 215, 0, 0.9),
                0 0 50px rgba(255, 165, 0, 0.6),
                inset 0 0 25px rgba(255, 200, 100, 0.4);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 8px 40px rgba(255, 215, 0, 1),
                0 0 80px rgba(255, 165, 0, 0.9),
                0 0 100px rgba(255, 200, 100, 0.5),
                inset 0 0 40px rgba(255, 215, 0, 0.6);
    filter: brightness(1.3);
  }
}

@keyframes panFlip {
  0%, 80%, 100% { transform: translateY(-50%) rotate(0deg); }
  85% { transform: translateY(-60%) rotate(-15deg); }
  90% { transform: translateY(-55%) rotate(10deg); }
  95% { transform: translateY(-52%) rotate(-5deg); }
}

@keyframes sparkleRotate {
  0% { transform: translateY(-50%) rotate(0deg) scale(1); }
  50% { transform: translateY(-50%) rotate(180deg) scale(1.3); }
  100% { transform: translateY(-50%) rotate(360deg) scale(1); }
}

.player-title.style-shrimp-rice-golden:hover {
  transform: translateY(-3px) scale(1.05);
  animation: friedRiceSizzle 0.2s ease-in-out infinite, goldenGlow 1s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - liberation-camo (SFL解放軍 - 軍事迷彩)
   軍事風格：綠色迷彩版
======================================== */
.player-title.style-liberation-camo {
  background:
    repeating-linear-gradient(45deg,
      rgba(34, 139, 34, 0.7) 0px,
      rgba(34, 139, 34, 0.7) 10px,
      rgba(85, 107, 47, 0.7) 10px,
      rgba(85, 107, 47, 0.7) 20px,
      rgba(46, 79, 46, 0.7) 20px,
      rgba(46, 79, 46, 0.7) 30px),
    linear-gradient(135deg,
      rgba(34, 139, 34, 0.8) 0%,
      rgba(85, 107, 47, 0.8) 50%,
      rgba(46, 79, 46, 0.8) 100%);
  border: 4px solid #556b2f;
  color: #f0fff0;
  text-shadow: 0 0 10px rgba(34, 139, 34, 0.9),
               0 0 20px rgba(0, 100, 0, 0.7),
               0 2px 8px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 20px rgba(34, 139, 34, 0.8),
              0 0 40px rgba(85, 107, 47, 0.5),
              inset 0 0 20px rgba(46, 79, 46, 0.6);
  animation: camoPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  font-weight: 900;
  font-family: 'Impact', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.player-title.style-liberation-camo::before {
  content: '★';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  color: #9acd32;
  text-shadow: 0 0 8px rgba(154, 205, 50, 0.8);
  animation: militaryStar 2.5s ease-in-out infinite;
}

.player-title.style-liberation-camo::after {
  content: '★';
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  color: #9acd32;
  text-shadow: 0 0 8px rgba(154, 205, 50, 0.8);
  animation: medalSwing 3s ease-in-out infinite;
}

@keyframes camoPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(34, 139, 34, 0.8),
                0 0 40px rgba(85, 107, 47, 0.5),
                inset 0 0 20px rgba(46, 79, 46, 0.6);
    border-color: #556b2f;
  }
  50% {
    box-shadow: 0 6px 30px rgba(34, 139, 34, 1),
                0 0 60px rgba(85, 107, 47, 0.8),
                0 0 80px rgba(154, 205, 50, 0.4),
                inset 0 0 30px rgba(34, 139, 34, 0.7);
    border-color: #9acd32;
  }
}

@keyframes militaryStar {
  0%, 100% { transform: translateY(-50%) rotate(0deg); opacity: 0.8; }
  50% { transform: translateY(-50%) rotate(360deg); opacity: 1; }
}

@keyframes medalSwing {
  0%, 100% { transform: translateY(-50%) rotate(-5deg); }
  50% { transform: translateY(-50%) rotate(5deg); }
}

.player-title.style-liberation-camo:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - liberation-revolution (SFL解放軍 - 革命紅星)
   革命風格：紅色旗幟版
======================================== */
.player-title.style-liberation-revolution {
  background: linear-gradient(135deg,
    rgba(139, 0, 0, 0.8) 0%,
    rgba(178, 34, 34, 0.7) 30%,
    rgba(220, 20, 60, 0.8) 50%,
    rgba(178, 34, 34, 0.7) 70%,
    rgba(139, 0, 0, 0.8) 100%);
  background-size: 200% 200%;
  border: 4px solid #8b0000;
  color: #fff0f0;
  text-shadow: 0 0 8px rgba(220, 20, 60, 0.9),
               0 2px 5px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 15px rgba(178, 34, 34, 0.7),
              0 0 25px rgba(220, 20, 60, 0.4),
              inset 0 0 15px rgba(139, 0, 0, 0.4);
  animation: revolutionWave 4s linear infinite, revolutionPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 3px;
  font-weight: 900;
  font-family: 'Impact', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.player-title.style-liberation-revolution::before {
  content: '☆';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  animation: starGlow 2s ease-in-out infinite;
}

.player-title.style-liberation-revolution::after {
  content: '🚩';
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  animation: flagWave 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(220, 20, 60, 0.6));
}

@keyframes revolutionWave {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes revolutionPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(178, 34, 34, 0.7),
                0 0 25px rgba(220, 20, 60, 0.4),
                inset 0 0 15px rgba(139, 0, 0, 0.4);
    border-color: #8b0000;
  }
  50% {
    box-shadow: 0 6px 25px rgba(178, 34, 34, 0.9),
                0 0 40px rgba(220, 20, 60, 0.6),
                inset 0 0 20px rgba(220, 20, 60, 0.4);
    border-color: #dc143c;
  }
}

@keyframes starGlow {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  }
  50% {
    transform: translateY(-50%) scale(1.15);
    text-shadow: 0 0 15px rgba(255, 215, 0, 1);
  }
}

@keyframes flagWave {
  0%, 100% { transform: translateY(-50%) rotate(-5deg) scaleX(1); }
  25% { transform: translateY(-50%) rotate(0deg) scaleX(0.95); }
  50% { transform: translateY(-50%) rotate(5deg) scaleX(1); }
  75% { transform: translateY(-50%) rotate(0deg) scaleX(1.05); }
}

.player-title.style-liberation-revolution:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.15);
}

/* ========================================
   稱號樣式 - guild-leader-glory (團長 - 血盟榮耀)
   終極版：紅白金三色榮光，劍盾雙輝
======================================== */
.player-title.style-guild-leader-glory {
  background:
    linear-gradient(135deg,
      rgba(139, 0, 0, 0.9) 0%,
      rgba(220, 20, 60, 0.8) 20%,
      rgba(255, 255, 255, 0.85) 40%,
      rgba(220, 20, 60, 0.8) 60%,
      rgba(139, 0, 0, 0.9) 80%,
      rgba(220, 20, 60, 0.8) 100%);
  background-size: 300% 300%;
  border: 4px solid;
  border-image: linear-gradient(90deg,
    #dc143c 0%,
    #ffffff 50%,
    #dc143c 100%) 1;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(220, 20, 60, 1),
    0 0 15px rgba(220, 20, 60, 0.8),
    0 2px 4px rgba(139, 0, 0, 1);
  box-shadow:
    0 0 15px rgba(220, 20, 60, 0.8),
    0 0 30px rgba(220, 20, 60, 0.5),
    inset 0 0 20px rgba(220, 20, 60, 0.3);
  animation:
    gloryFlow 6s linear infinite,
    gloryPulse 2.5s ease-in-out infinite;
  position: relative;
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 10px 25px;
  overflow: visible;
}

/* 左側盾牌 */
.player-title.style-guild-leader-glory::before {
  content: '🛡️';
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.2em;
  animation: gloryShieldLeft 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(220, 20, 60, 0.8));
  z-index: 2;
}

/* 右側雙劍交叉 */
.player-title.style-guild-leader-glory::after {
  content: '⚔️';
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.2em;
  animation: glorySwordRight 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(220, 20, 60, 0.8));
  z-index: 2;
}

@keyframes gloryFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes gloryPulse {
  0%, 100% {
    box-shadow:
      0 0 15px rgba(220, 20, 60, 0.8),
      0 0 30px rgba(220, 20, 60, 0.5),
      inset 0 0 20px rgba(220, 20, 60, 0.3);
  }
  50% {
    box-shadow:
      0 0 25px rgba(220, 20, 60, 1),
      0 0 50px rgba(220, 20, 60, 0.7),
      inset 0 0 30px rgba(220, 20, 60, 0.4);
  }
}

@keyframes gloryShieldLeft {
  0%, 100% {
    transform: translateY(-50%) rotate(-10deg) scale(1);
  }
  50% {
    transform: translateY(-50%) rotate(5deg) scale(1.1);
  }
}

@keyframes glorySwordRight {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-50%) rotate(-10deg) scale(1.1);
  }
}

.player-title.style-guild-leader-glory:hover {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - stinky-cheese (臭臭起司)
   黃橘色系，仿血月見證者風格，左側起司emoji
======================================== */
.player-title.style-stinky-cheese {
  background: linear-gradient(90deg,
    rgba(255, 165, 0, 0) 0%,
    rgba(255, 165, 0, 0.3) 40%,
    rgba(255, 200, 0, 0.5) 60%,
    rgba(255, 180, 0, 0.4) 100%);
  border: 2px solid #ffa500;
  color: #fff8dc;
  text-shadow: 0 0 8px rgba(255, 165, 0, 0.8),
               0 0 15px rgba(255, 200, 0, 0.5);
  box-shadow: 0 3px 12px rgba(255, 165, 0, 0.5),
              0 0 20px rgba(255, 200, 0, 0.3),
              inset 0 0 15px rgba(255, 165, 0, 0.3);
  animation: cheeseGlow 4s ease-in-out infinite;
  position: relative;
  border-radius: 25px;
  padding: 8px 20px;
  overflow: visible;
}

.player-title.style-stinky-cheese::before {
  content: '🧀';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8em;
  animation: cheeseWobble 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.7));
}

@keyframes cheeseGlow {
  0%, 100% {
    box-shadow: 0 3px 12px rgba(255, 165, 0, 0.5),
                0 0 20px rgba(255, 200, 0, 0.3),
                inset 0 0 15px rgba(255, 165, 0, 0.3);
    border-color: #ffa500;
  }
  50% {
    box-shadow: 0 5px 20px rgba(255, 165, 0, 0.7),
                0 0 35px rgba(255, 200, 0, 0.5),
                inset 0 0 20px rgba(255, 200, 0, 0.4);
    border-color: #ffd700;
  }
}

@keyframes cheeseWobble {
  0%, 100% {
    transform: translateY(-50%) rotate(-5deg) scale(1);
  }
  25% {
    transform: translateY(-50%) rotate(5deg) scale(1.1);
  }
  50% {
    transform: translateY(-50%) rotate(-3deg) scale(1.05);
  }
  75% {
    transform: translateY(-50%) rotate(3deg) scale(1.1);
  }
}

.player-title.style-stinky-cheese:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 25px rgba(255, 165, 0, 0.7),
              0 0 40px rgba(255, 200, 0, 0.5);
}

/* ========================================
   稱號樣式 - stinky-spider (臭蜘蛛臭蜘蛛)
   紫黑色系，帶有蜘蛛網和蜘蛛emoji
======================================== */
.player-title.style-stinky-spider {
  background: linear-gradient(135deg,
    rgba(75, 0, 130, 0.7) 0%,
    rgba(48, 25, 52, 0.8) 50%,
    rgba(25, 25, 25, 0.9) 100%);
  border: 2px solid #8b008b;
  color: #dda0dd;
  text-shadow: 0 0 15px rgba(186, 85, 211, 1),
               0 0 30px rgba(148, 0, 211, 0.8),
               0 2px 8px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 25px rgba(75, 0, 130, 0.8),
              0 0 40px rgba(148, 0, 211, 0.5),
              inset 0 0 25px rgba(75, 0, 130, 0.6);
  animation: spiderCrawl 4s ease-in-out infinite;
  position: relative;
  border-radius: 10px;
  padding: 10px 20px;
  overflow: visible;
}

.player-title.style-stinky-spider::before {
  content: '🕸️';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  animation: webSway 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(186, 85, 211, 0.8));
}

.player-title.style-stinky-spider::after {
  content: '🕷️';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: spiderDangle 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(148, 0, 211, 0.9));
}

@keyframes spiderCrawl {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(75, 0, 130, 0.8),
                0 0 40px rgba(148, 0, 211, 0.5),
                inset 0 0 25px rgba(75, 0, 130, 0.6);
  }
  50% {
    box-shadow: 0 6px 35px rgba(75, 0, 130, 1),
                0 0 60px rgba(148, 0, 211, 0.8),
                0 0 80px rgba(186, 85, 211, 0.5),
                inset 0 0 35px rgba(148, 0, 211, 0.7);
  }
}

@keyframes webSway {
  0%, 100% {
    transform: translateY(-50%) rotate(-10deg);
  }
  50% {
    transform: translateY(-50%) rotate(10deg);
  }
}

@keyframes spiderDangle {
  0%, 100% {
    transform: translateY(-50%) translateY(0);
  }
  25% {
    transform: translateY(-50%) translateY(8px);
  }
  75% {
    transform: translateY(-50%) translateY(-5px);
  }
}

.player-title.style-stinky-spider:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 45px rgba(148, 0, 211, 1),
              0 0 80px rgba(186, 85, 211, 0.9);
}

/* ========================================
   稱號樣式 - metal-noodles (鋼鐵燴麵)
   黑色金屬重工業風格，諧音梗「毀滅」
======================================== */
.player-title.style-metal-noodles {
  background:
    linear-gradient(45deg, rgba(30, 30, 30, 0.1) 25%, transparent 25%, transparent 75%, rgba(30, 30, 30, 0.1) 75%),
    linear-gradient(45deg, rgba(30, 30, 30, 0.1) 25%, transparent 25%, transparent 75%, rgba(30, 30, 30, 0.1) 75%),
    linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(20, 20, 20, 0.95) 100%);
  background-size: 8px 8px, 8px 8px, 100% 100%;
  background-position: 0 0, 4px 4px, 0 0;
  border: 3px solid #444;
  color: #ff4444;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8),
               0 0 20px rgba(255, 68, 68, 0.5),
               0 2px 5px rgba(0, 0, 0, 0.9);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.8),
              0 0 20px rgba(255, 68, 68, 0.25),
              inset 0 0 15px rgba(50, 50, 50, 0.6);
  animation: metalPulse 3s ease-in-out infinite, metalSpark 0.1s infinite;
  position: relative;
  border-radius: 5px;
  padding: 10px 20px;
  font-weight: 900;
  letter-spacing: 3px;
  overflow: visible;
}

.player-title.style-metal-noodles::before {
  content: '🍜';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8em;
  animation: noodleSteam 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.6));
}

@keyframes metalPulse {
  0%, 100% {
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.8),
                0 0 20px rgba(255, 68, 68, 0.25),
                inset 0 0 15px rgba(50, 50, 50, 0.6);
    border-color: #444;
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9),
                0 0 30px rgba(255, 68, 68, 0.4),
                inset 0 0 20px rgba(80, 80, 80, 0.7);
    border-color: #555;
  }
}

@keyframes metalSpark {
  0%, 95% {
    filter: brightness(1);
  }
  97% {
    filter: brightness(1.3);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes noodleSteam {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-60%) scale(1.1);
  }
}

.player-title.style-metal-noodles:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.9),
              0 0 40px rgba(255, 68, 68, 0.5);
  border-color: #666;
}

/* ========================================
   稱號樣式 - pink-bunny (粉兔點餐)
   可愛粉紅色系，兔子主題
======================================== */
.player-title.style-pink-bunny {
  background: linear-gradient(135deg,
    rgba(255, 182, 193, 0.5) 0%,
    rgba(255, 105, 180, 0.4) 50%,
    rgba(255, 182, 193, 0.5) 100%);
  border: 3px solid #ff69b4;
  color: #fff0f5;
  text-shadow: 0 0 8px rgba(255, 105, 180, 0.7),
               0 0 15px rgba(255, 182, 193, 0.5);
  box-shadow: 0 3px 15px rgba(255, 105, 180, 0.4),
              0 0 25px rgba(255, 182, 193, 0.3),
              inset 0 0 15px rgba(255, 192, 203, 0.25);
  animation: bunnyHop 2s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
  padding: 10px 20px 10px 35px;
  overflow: hidden;
}

.player-title.style-pink-bunny::before {
  content: '🐰';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: bunnyBounce 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.5));
  z-index: 1;
}

.player-title.style-pink-bunny::after {
  content: '🥕';
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  animation: carrotWiggle 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 140, 0, 0.5));
  z-index: 1;
}

@keyframes bunnyHop {
  0%, 100% {
    box-shadow: 0 3px 15px rgba(255, 105, 180, 0.4),
                0 0 25px rgba(255, 182, 193, 0.3),
                inset 0 0 15px rgba(255, 192, 203, 0.25);
  }
  50% {
    box-shadow: 0 5px 20px rgba(255, 105, 180, 0.6),
                0 0 35px rgba(255, 182, 193, 0.45),
                inset 0 0 20px rgba(255, 192, 203, 0.35);
  }
}

@keyframes bunnyBounce {
  0%, 100% {
    transform: translateY(-50%) translateY(0) scale(1);
  }
  25% {
    transform: translateY(-50%) translateY(-10px) scale(1.1);
  }
  50% {
    transform: translateY(-50%) translateY(0) scale(1);
  }
  75% {
    transform: translateY(-50%) translateY(-5px) scale(1.05);
  }
}

@keyframes carrotWiggle {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  25% {
    transform: translateY(-50%) rotate(15deg);
  }
  75% {
    transform: translateY(-50%) rotate(-15deg);
  }
}

.player-title.style-pink-bunny:hover {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 6px 25px rgba(255, 105, 180, 0.6),
              0 0 40px rgba(255, 182, 193, 0.5);
}

/* ========================================
   稱號樣式 - chaos-nyan (混沌喵喵)
   RGB彩虹貓咪風格，迷幻混亂效果
======================================== */
.player-title.style-chaos-nyan {
  background: linear-gradient(90deg,
    rgba(255, 0, 0, 0.5) 0%,
    rgba(255, 127, 0, 0.5) 16%,
    rgba(255, 255, 0, 0.5) 33%,
    rgba(0, 255, 0, 0.5) 50%,
    rgba(0, 127, 255, 0.5) 66%,
    rgba(139, 0, 255, 0.5) 83%,
    rgba(255, 0, 0, 0.5) 100%);
  background-size: 300% 100%;
  border: 3px solid;
  border-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #007fff, #8b00ff, #ff0000) 1;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1),
               0 0 20px rgba(255, 0, 255, 0.9),
               0 0 30px rgba(0, 255, 255, 0.8),
               2px 2px 0 rgba(255, 0, 0, 0.8),
               -2px -2px 0 rgba(0, 255, 255, 0.8);
  box-shadow: 0 4px 25px rgba(255, 0, 255, 0.6),
              0 0 50px rgba(0, 255, 255, 0.5),
              inset 0 0 30px rgba(255, 255, 0, 0.3);
  animation: rainbowFlow 3s linear infinite, nyanBounce 0.5s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  padding: 10px 20px 10px 35px;
  overflow: hidden;
}

.player-title.style-chaos-nyan::before {
  content: '🌈';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: rainbowSpin 2s linear infinite;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1));
  z-index: 0;
  opacity: 0.6;
}

.player-title.style-chaos-nyan::after {
  content: '😺';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: nyanFace 1s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.9));
  z-index: 0;
  opacity: 0.6;
}

@keyframes rainbowFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

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

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

@keyframes nyanFace {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.2);
  }
}

.player-title.style-chaos-nyan:hover {
  transform: translateY(-5px) scale(1.1);
  animation: rainbowFlow 1s linear infinite, nyanBounce 0.3s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - corporate-slave (社畜煉獄)
   辦公室地獄風格，疲憊灰暗色調
======================================== */
.player-title.style-corporate-slave {
  background: linear-gradient(135deg,
    rgba(50, 50, 50, 0.9) 0%,
    rgba(70, 70, 70, 0.8) 50%,
    rgba(40, 40, 40, 0.9) 100%);
  border: 2px solid #555;
  color: #b0b0b0;
  text-shadow: 0 0 10px rgba(100, 100, 100, 0.8),
               0 2px 5px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
              inset 0 0 25px rgba(60, 60, 60, 0.5);
  animation: exhaustedPulse 4s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-corporate-slave::before {
  content: '💼';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: briefcaseShake 3s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(100, 100, 100, 0.6));
  z-index: 0;
  opacity: 0.5;
}

.player-title.style-corporate-slave::after {
  content: '☕';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  animation: coffeeSteam 2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(139, 90, 43, 0.7));
  z-index: 0;
  opacity: 0.5;
}

@keyframes exhaustedPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                inset 0 0 25px rgba(60, 60, 60, 0.5);
    filter: brightness(0.9);
  }
  50% {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.9),
                inset 0 0 30px rgba(50, 50, 50, 0.6);
    filter: brightness(1.1);
  }
}

@keyframes briefcaseShake {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  10% {
    transform: translateY(-50%) rotate(-5deg);
  }
  20% {
    transform: translateY(-50%) rotate(5deg);
  }
  30% {
    transform: translateY(-50%) rotate(0deg);
  }
}

@keyframes coffeeSteam {
  0%, 100% {
    transform: translateY(-50%);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-60%);
    opacity: 1;
  }
}

.player-title.style-corporate-slave:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.9);
  color: #d0d0d0;
}

/* ========================================
   稱號樣式 - galaxy-brain (銀河大腦)
   宇宙星空思考風格
======================================== */
.player-title.style-galaxy-brain {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 2%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 2%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 1%),
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 1.5%),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 1.5%),
    linear-gradient(135deg,
      rgba(25, 25, 112, 0.9) 0%,
      rgba(75, 0, 130, 0.8) 50%,
      rgba(0, 0, 50, 0.95) 100%);
  border: 2px solid #4169e1;
  color: #e0e0ff;
  text-shadow: 0 0 20px rgba(100, 149, 237, 1),
               0 0 40px rgba(138, 43, 226, 0.8),
               0 0 60px rgba(75, 0, 130, 0.6);
  box-shadow: 0 4px 30px rgba(75, 0, 130, 0.8),
              0 0 50px rgba(100, 149, 237, 0.5),
              inset 0 0 40px rgba(25, 25, 112, 0.6);
  animation: galaxyPulse 5s ease-in-out infinite, starTwinkle 2s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-galaxy-brain::before {
  content: '🧠';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: brainExpand 3s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.9))
          drop-shadow(0 0 25px rgba(138, 43, 226, 0.7));
  z-index: 1;
}

.player-title.style-galaxy-brain::after {
  content: '✨';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: sparkleFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 100, 0.9));
  z-index: 1;
}

@keyframes galaxyPulse {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(75, 0, 130, 0.8),
                0 0 50px rgba(100, 149, 237, 0.5),
                inset 0 0 40px rgba(25, 25, 112, 0.6);
  }
  50% {
    box-shadow: 0 6px 40px rgba(75, 0, 130, 1),
                0 0 80px rgba(100, 149, 237, 0.8),
                0 0 100px rgba(138, 43, 226, 0.5),
                inset 0 0 50px rgba(75, 0, 130, 0.7);
  }
}

@keyframes starTwinkle {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes brainExpand {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.15);
  }
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-70%) rotate(180deg);
    opacity: 1;
  }
}

.player-title.style-galaxy-brain:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 60px rgba(138, 43, 226, 1),
              0 0 120px rgba(100, 149, 237, 0.9);
}

/* ========================================
   稱號樣式 - touching-tentacle (觸手可及)
   深海章魚風格，神秘詭異
======================================== */
.player-title.style-touching-tentacle {
  background: linear-gradient(135deg,
    rgba(0, 50, 80, 0.9) 0%,
    rgba(0, 80, 100, 0.8) 50%,
    rgba(0, 40, 60, 0.9) 100%);
  border: 2px solid #20b2aa;
  color: #afeeee;
  text-shadow: 0 0 15px rgba(32, 178, 170, 1),
               0 0 30px rgba(72, 209, 204, 0.8),
               0 2px 8px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 25px rgba(0, 80, 100, 0.8),
              0 0 40px rgba(32, 178, 170, 0.5),
              inset 0 0 30px rgba(0, 50, 80, 0.7);
  animation: tentacleWave 4s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-touching-tentacle::before {
  content: '🐙';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  animation: octopusWiggle 2s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(32, 178, 170, 0.9));
  z-index: 1;
}

.player-title.style-touching-tentacle::after {
  content: '🌊';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  animation: waveFlow 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(72, 209, 204, 0.8));
  z-index: 1;
}

@keyframes tentacleWave {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(0, 80, 100, 0.8),
                0 0 40px rgba(32, 178, 170, 0.5),
                inset 0 0 30px rgba(0, 50, 80, 0.7);
    border-radius: 15px;
  }
  25% {
    border-radius: 20px 10px 20px 10px;
  }
  50% {
    box-shadow: 0 6px 35px rgba(0, 80, 100, 1),
                0 0 60px rgba(32, 178, 170, 0.8),
                inset 0 0 40px rgba(0, 80, 100, 0.8);
    border-radius: 10px 20px 10px 20px;
  }
  75% {
    border-radius: 15px 15px 20px 10px;
  }
}

@keyframes octopusWiggle {
  0%, 100% {
    transform: translateY(-50%) rotate(-5deg);
  }
  25% {
    transform: translateY(-50%) rotate(5deg) scale(1.1);
  }
  50% {
    transform: translateY(-50%) rotate(-3deg);
  }
  75% {
    transform: translateY(-50%) rotate(3deg) scale(1.05);
  }
}

@keyframes waveFlow {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(5px);
  }
}

.player-title.style-touching-tentacle:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(32, 178, 170, 1),
              0 0 80px rgba(72, 209, 204, 0.9);
}

/* ========================================
   稱號樣式 - liver-emperor (肝帝)
   熬夜爆肝風格，黑暗疲憊但堅持
======================================== */
.player-title.style-liver-emperor {
  background: linear-gradient(135deg,
    rgba(25, 25, 35, 0.95) 0%,
    rgba(45, 30, 50, 0.9) 50%,
    rgba(20, 20, 30, 0.95) 100%);
  border: 2px solid #8b4513;
  color: #dda0dd;
  text-shadow: 0 0 15px rgba(186, 85, 211, 0.9),
               0 0 30px rgba(75, 0, 130, 0.7),
               0 2px 5px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 25px rgba(75, 0, 130, 0.7),
              0 0 40px rgba(139, 69, 19, 0.5),
              inset 0 0 30px rgba(25, 25, 35, 0.8);
  animation: liverPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 8px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-liver-emperor::before {
  content: '🌙';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: moonGlow 4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 150, 0.8));
  z-index: 1;
}

.player-title.style-liver-emperor::after {
  content: '⚔️';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  animation: swordSlash 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(186, 85, 211, 0.8));
  z-index: 1;
}

@keyframes liverPulse {
  0%, 100% {
    filter: brightness(0.8);
    box-shadow: 0 4px 25px rgba(75, 0, 130, 0.7),
                0 0 40px rgba(139, 69, 19, 0.5);
  }
  50% {
    filter: brightness(1.1);
    box-shadow: 0 6px 35px rgba(75, 0, 130, 0.9),
                0 0 60px rgba(186, 85, 211, 0.6);
  }
}

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

@keyframes swordSlash {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  25% {
    transform: translateY(-50%) rotate(-15deg);
  }
  75% {
    transform: translateY(-50%) rotate(15deg);
  }
}

.player-title.style-liver-emperor:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(186, 85, 211, 0.9),
              0 0 60px rgba(75, 0, 130, 0.8);
}

/* ========================================
   稱號樣式 - luck-emperor (歐皇降臨)
   金光閃閃的幸運之星風格
======================================== */
.player-title.style-luck-emperor {
  background: linear-gradient(135deg,
    rgba(255, 215, 0, 0.3) 0%,
    rgba(255, 255, 150, 0.4) 25%,
    rgba(255, 215, 0, 0.3) 50%,
    rgba(255, 255, 200, 0.4) 75%,
    rgba(255, 215, 0, 0.3) 100%);
  border: 3px solid #ffd700;
  color: #8b6914;
  text-shadow: 0 0 10px rgba(255, 215, 0, 1),
               0 0 20px rgba(255, 255, 150, 0.9),
               0 0 30px rgba(255, 215, 0, 0.7);
  box-shadow: 0 4px 30px rgba(255, 215, 0, 0.8),
              0 0 50px rgba(255, 255, 150, 0.6),
              inset 0 0 40px rgba(255, 215, 0, 0.3);
  animation: luckyShine 2s ease-in-out infinite, goldenSparkle 1s linear infinite;
  position: relative;
  border-radius: 20px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-luck-emperor::before {
  content: '🍀';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  animation: cloverSpin 3s linear infinite;
  filter: drop-shadow(0 0 10px rgba(50, 205, 50, 0.9));
  z-index: 1;
}

.player-title.style-luck-emperor::after {
  content: '✨';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  animation: starBurst 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
  z-index: 1;
}

@keyframes luckyShine {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(255, 215, 0, 0.8),
                0 0 50px rgba(255, 255, 150, 0.6);
  }
  50% {
    box-shadow: 0 6px 50px rgba(255, 215, 0, 1),
                0 0 80px rgba(255, 255, 150, 0.9);
  }
}

@keyframes goldenSparkle {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

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

@keyframes starBurst {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-50%) scale(1.3);
    opacity: 1;
  }
}

.player-title.style-luck-emperor:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 60px rgba(255, 215, 0, 1),
              0 0 100px rgba(255, 255, 150, 1);
}

/* ========================================
   稱號樣式 - bad-luck (非酋體質)
   黑雲壓頂的倒楣風格
======================================== */
.player-title.style-bad-luck {
  background: linear-gradient(135deg,
    rgba(30, 30, 30, 0.95) 0%,
    rgba(50, 50, 50, 0.9) 50%,
    rgba(20, 20, 20, 0.95) 100%);
  border: 2px solid #4a4a4a;
  border-style: dashed;
  color: #888888;
  text-shadow: 0 0 10px rgba(100, 100, 100, 0.6),
               0 2px 5px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9),
              inset 0 0 30px rgba(50, 50, 50, 0.5);
  animation: badLuckFlicker 5s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-bad-luck::before {
  content: '🦴';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: boneRattle 2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.5));
  z-index: 1;
  opacity: 0.7;
}

.player-title.style-bad-luck::after {
  content: '💀';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  animation: skullShake 3s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(100, 100, 100, 0.6));
  z-index: 1;
  opacity: 0.6;
}

@keyframes badLuckFlicker {
  0%, 90%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  92%, 94%, 96% {
    opacity: 0.7;
    filter: brightness(0.7);
  }
  93%, 95% {
    opacity: 1;
    filter: brightness(1.1);
  }
}

@keyframes boneRattle {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  20% {
    transform: translateY(-50%) rotate(-10deg);
  }
  40% {
    transform: translateY(-50%) rotate(10deg);
  }
  60% {
    transform: translateY(-50%) rotate(-5deg);
  }
  80% {
    transform: translateY(-50%) rotate(5deg);
  }
}

@keyframes skullShake {
  0%, 100% {
    transform: translateY(-50%);
  }
  10%, 30%, 50% {
    transform: translateY(-55%);
  }
  20%, 40% {
    transform: translateY(-45%);
  }
}

.player-title.style-bad-luck:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.95);
  color: #aaaaaa;
}

/* ========================================
   稱號樣式 - keyboard-warrior (鍵盤戰神)
   電競RGB風格，炫彩奪目
======================================== */
.player-title.style-keyboard-warrior {
  background: linear-gradient(135deg,
    rgba(20, 20, 30, 0.95) 0%,
    rgba(30, 30, 45, 0.9) 50%,
    rgba(20, 20, 30, 0.95) 100%);
  border: 2px solid;
  border-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) 1;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.6),
               0 0 30px rgba(255, 0, 255, 0.4);
  box-shadow: 0 4px 25px rgba(0, 255, 255, 0.5),
              0 0 40px rgba(255, 0, 255, 0.3),
              inset 0 0 30px rgba(0, 0, 50, 0.8);
  animation: rgbGlow 3s linear infinite;
  position: relative;
  border-radius: 3px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-keyboard-warrior::before {
  content: '⌨️';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: keyboardType 0.5s steps(2) infinite;
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.9));
  z-index: 1;
}

.player-title.style-keyboard-warrior::after {
  content: '🔥';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  animation: fireFlicker 0.3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.9));
  z-index: 1;
}

@keyframes rgbGlow {
  0% {
    box-shadow: 0 4px 25px rgba(255, 0, 0, 0.6),
                0 0 40px rgba(255, 0, 0, 0.3);
  }
  33% {
    box-shadow: 0 4px 25px rgba(0, 255, 0, 0.6),
                0 0 40px rgba(0, 255, 0, 0.3);
  }
  66% {
    box-shadow: 0 4px 25px rgba(0, 0, 255, 0.6),
                0 0 40px rgba(0, 0, 255, 0.3);
  }
  100% {
    box-shadow: 0 4px 25px rgba(255, 0, 0, 0.6),
                0 0 40px rgba(255, 0, 0, 0.3);
  }
}

@keyframes keyboardType {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-48%) scale(0.95);
  }
}

@keyframes fireFlicker {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-52%) scale(1.1);
    opacity: 0.8;
  }
}

.player-title.style-keyboard-warrior:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0, 255, 255, 0.8),
              0 0 60px rgba(255, 0, 255, 0.6);
}

/* ========================================
   稱號樣式 - edge-player (邊緣系玩家)
   黑暗孤獨風格，冷酷神秘
======================================== */
.player-title.style-edge-player {
  background: linear-gradient(135deg,
    rgba(10, 10, 15, 0.98) 0%,
    rgba(25, 25, 35, 0.95) 50%,
    rgba(10, 10, 15, 0.98) 100%);
  border: 1px solid #333;
  color: #666;
  text-shadow: 0 0 5px rgba(50, 50, 50, 0.8),
               0 1px 3px rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.9),
              inset 0 0 20px rgba(20, 20, 20, 0.8);
  animation: edgeFade 6s ease-in-out infinite;
  position: relative;
  border-radius: 2px;
  padding: 10px 35px;
  overflow: hidden;
}

.player-title.style-edge-player::before {
  content: '🌑';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  animation: moonPhase 8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(50, 50, 80, 0.6));
  z-index: 1;
  opacity: 0.6;
}

.player-title.style-edge-player::after {
  content: '🖤';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  animation: heartBeat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(30, 30, 30, 0.8));
  z-index: 1;
  opacity: 0.5;
}

@keyframes edgeFade {
  0%, 100% {
    opacity: 0.85;
    filter: brightness(0.9);
  }
  50% {
    opacity: 1;
    filter: brightness(1.05);
  }
}

@keyframes moonPhase {
  0%, 100% {
    opacity: 0.4;
    transform: translateY(-50%) scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes heartBeat {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  14% {
    transform: translateY(-50%) scale(1.1);
  }
  28% {
    transform: translateY(-50%) scale(1);
  }
  42% {
    transform: translateY(-50%) scale(1.1);
  }
  56% {
    transform: translateY(-50%) scale(1);
  }
}

.player-title.style-edge-player:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.95);
  color: #888;
  border-color: #444;
}

/* ========================================
   稱號樣式 - void-fracture (虛空裂痕)
   純視覺效果，無emoji，黑暗裂痕主題
======================================== */
.player-title.style-void-fracture {
  background:
    linear-gradient(45deg, transparent 45%, rgba(138, 43, 226, 0.3) 47%, rgba(138, 43, 226, 0.3) 53%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(75, 0, 130, 0.3) 47%, rgba(75, 0, 130, 0.3) 53%, transparent 55%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(15, 0, 25, 0.95) 50%, rgba(0, 0, 0, 0.98) 100%);
  border: 2px solid rgba(138, 43, 226, 0.4);
  color: #d8bfff;
  text-shadow: 0 0 20px rgba(138, 43, 226, 1),
               0 0 40px rgba(75, 0, 130, 0.8),
               0 0 60px rgba(148, 0, 211, 0.5);
  box-shadow: 0 4px 30px rgba(75, 0, 130, 0.9),
              0 0 60px rgba(0, 0, 0, 0.9),
              inset 0 0 50px rgba(20, 0, 30, 0.9);
  animation: voidCrack 4s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.player-title.style-void-fracture::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) rotate(0deg);
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(138, 43, 226, 0.2) 30deg,
      transparent 60deg,
      rgba(148, 0, 211, 0.15) 120deg,
      transparent 150deg,
      rgba(75, 0, 130, 0.2) 210deg,
      transparent 240deg,
      rgba(138, 43, 226, 0.15) 300deg,
      transparent 330deg);
  animation: voidRotate 20s linear infinite;
  pointer-events: none;
}

.player-title.style-void-fracture::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(138, 43, 226, 0.4) 25%,
    transparent 50%);
  animation: fractureGlitch 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes voidCrack {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(75, 0, 130, 0.9),
                0 0 60px rgba(0, 0, 0, 0.9),
                inset 0 0 50px rgba(20, 0, 30, 0.9);
    filter: brightness(1);
  }
  25% {
    box-shadow: 0 6px 40px rgba(138, 43, 226, 1),
                0 0 80px rgba(75, 0, 130, 0.8),
                inset 0 0 60px rgba(40, 0, 60, 0.95);
  }
  50% {
    box-shadow: 0 4px 35px rgba(148, 0, 211, 0.95),
                0 0 90px rgba(138, 43, 226, 0.7),
                inset 0 0 70px rgba(25, 0, 40, 0.9);
    filter: brightness(1.2);
  }
  75% {
    box-shadow: 0 6px 45px rgba(75, 0, 130, 1),
                0 0 70px rgba(148, 0, 211, 0.6),
                inset 0 0 55px rgba(30, 0, 50, 0.95);
  }
}

@keyframes voidRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fractureGlitch {
  0%, 85%, 100% {
    opacity: 0;
    transform: translateX(-100%);
  }
  88%, 92% {
    opacity: 1;
    transform: translateX(0%);
  }
  95% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.player-title.style-void-fracture:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 50px rgba(138, 43, 226, 1),
              0 0 100px rgba(148, 0, 211, 0.9);
  border-color: rgba(148, 0, 211, 0.8);
}

/* ========================================
   稱號樣式 - stellar-wake (星霜軌跡)
   純視覺效果，無emoji，宇宙流星軌跡
======================================== */
.player-title.style-stellar-wake {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(200, 200, 255, 0.8), transparent),
    radial-gradient(1px 1px at 30% 50%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 70% 90%, rgba(200, 200, 255, 0.8), transparent),
    linear-gradient(135deg, rgba(10, 10, 35, 0.98) 0%, rgba(25, 25, 60, 0.95) 50%, rgba(15, 15, 45, 0.98) 100%);
  border: 2px solid rgba(150, 180, 255, 0.5);
  color: #e8f0ff;
  text-shadow: 0 0 15px rgba(150, 180, 255, 1),
               0 0 30px rgba(100, 140, 255, 0.8),
               0 0 50px rgba(200, 220, 255, 0.5);
  box-shadow: 0 4px 25px rgba(100, 140, 255, 0.6),
              0 0 50px rgba(50, 80, 150, 0.5),
              inset 0 0 30px rgba(100, 140, 255, 0.2);
  animation: stellarPulse 5s ease-in-out infinite;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
}

.player-title.style-stellar-wake::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    rgba(200, 220, 255, 0.6),
    rgba(255, 255, 255, 0.4),
    transparent);
  animation: cometTrail 4s ease-in-out infinite;
  pointer-events: none;
}

.player-title.style-stellar-wake::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, rgba(150, 180, 255, 0.3), transparent, rgba(150, 180, 255, 0.3));
  border-radius: 50px;
  animation: stellarBorder 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes stellarPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(100, 140, 255, 0.6),
                0 0 50px rgba(50, 80, 150, 0.5),
                inset 0 0 30px rgba(100, 140, 255, 0.2);
  }
  50% {
    box-shadow: 0 6px 35px rgba(150, 180, 255, 0.8),
                0 0 70px rgba(100, 140, 255, 0.7),
                inset 0 0 40px rgba(150, 180, 255, 0.3);
  }
}

@keyframes cometTrail {
  0% {
    left: -100%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 200%;
    opacity: 0;
  }
}

@keyframes stellarBorder {
  0%, 100% {
    opacity: 0.5;
    filter: blur(2px);
  }
  50% {
    opacity: 0.8;
    filter: blur(4px);
  }
}

.player-title.style-stellar-wake:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 45px rgba(150, 180, 255, 1),
              0 0 90px rgba(100, 140, 255, 0.9);
}

/* ========================================
   稱號樣式 - crimson-dawn (緋色黎明)
   純視覺效果，無emoji，日出暖光主題
======================================== */
.player-title.style-crimson-dawn {
  background:
    linear-gradient(180deg,
      rgba(255, 100, 50, 0.3) 0%,
      rgba(255, 150, 80, 0.4) 30%,
      rgba(255, 200, 100, 0.5) 60%,
      rgba(255, 220, 150, 0.4) 100%);
  border: 2px solid rgba(255, 150, 80, 0.6);
  color: #fff5e6;
  text-shadow: 0 0 20px rgba(255, 150, 80, 1),
               0 0 40px rgba(255, 100, 50, 0.8),
               0 2px 10px rgba(200, 80, 40, 0.9);
  box-shadow: 0 4px 30px rgba(255, 150, 80, 0.7),
              0 0 60px rgba(255, 100, 50, 0.5),
              inset 0 0 40px rgba(255, 200, 100, 0.3);
  animation: dawnRise 6s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.player-title.style-crimson-dawn::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: 50%;
  width: 150%;
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 200, 100, 0.6) 0%,
    rgba(255, 150, 80, 0.4) 30%,
    rgba(255, 100, 50, 0.2) 60%,
    transparent 80%);
  animation: sunGlow 6s ease-in-out infinite;
  pointer-events: none;
}

.player-title.style-crimson-dawn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(255, 255, 200, 0.2) 50%,
    transparent 100%);
  animation: dawnRay 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dawnRise {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(255, 150, 80, 0.7),
                0 0 60px rgba(255, 100, 50, 0.5),
                inset 0 0 40px rgba(255, 200, 100, 0.3);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 6px 45px rgba(255, 180, 100, 0.9),
                0 0 80px rgba(255, 150, 80, 0.7),
                inset 0 0 50px rgba(255, 220, 150, 0.4);
    filter: brightness(1.15);
  }
}

@keyframes sunGlow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateX(-50%) scale(1.1);
    opacity: 1;
  }
}

@keyframes dawnRay {
  0%, 100% {
    opacity: 0.3;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.6;
    transform: scaleY(1.1);
  }
}

.player-title.style-crimson-dawn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 50px rgba(255, 180, 100, 1),
              0 0 100px rgba(255, 150, 80, 0.9);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - abyssal-eye (深淵凝視)
   單一靜態emoji 👁️，深淵之眼主題
======================================== */
.player-title.style-abyssal-eye {
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 20, 0.95) 0%,
    rgba(20, 0, 40, 0.9) 40%,
    rgba(40, 0, 60, 0.85) 70%,
    rgba(60, 0, 80, 0.8) 100%);
  border: 2px solid rgba(120, 0, 180, 0.6);
  color: #e0d0ff;
  text-shadow: 0 0 20px rgba(180, 100, 255, 1),
               0 0 40px rgba(120, 0, 180, 0.8),
               0 0 60px rgba(80, 0, 120, 0.6);
  box-shadow: 0 4px 30px rgba(80, 0, 120, 0.9),
              0 0 60px rgba(0, 0, 0, 0.9),
              inset 0 0 50px rgba(40, 0, 60, 0.8);
  animation: abyssalWatch 4s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
  padding-left: 45px;
}

.player-title.style-abyssal-eye::before {
  content: '👁️';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 15px rgba(180, 100, 255, 1))
          drop-shadow(0 0 30px rgba(120, 0, 180, 0.8));
}

.player-title.style-abyssal-eye::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    transparent 20%,
    rgba(120, 0, 180, 0.1) 40%,
    transparent 60%);
  pointer-events: none;
  animation: abyssalRipple 5s ease-in-out infinite;
}

@keyframes abyssalWatch {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(80, 0, 120, 0.9),
                0 0 60px rgba(0, 0, 0, 0.9),
                inset 0 0 50px rgba(40, 0, 60, 0.8);
  }
  50% {
    box-shadow: 0 6px 45px rgba(120, 0, 180, 1),
                0 0 90px rgba(80, 0, 120, 0.8),
                inset 0 0 70px rgba(60, 0, 90, 0.9);
  }
}

@keyframes abyssalRipple {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.6;
  }
}

.player-title.style-abyssal-eye:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 60px rgba(120, 0, 180, 1),
              0 0 120px rgba(180, 100, 255, 0.8);
}

/* ========================================
   稱號樣式 - glass-phantasm (琉璃幻夜)
   單一靜態emoji 🌙，夢幻琉璃月光主題
======================================== */
.player-title.style-glass-phantasm {
  background:
    linear-gradient(135deg,
      rgba(200, 200, 230, 0.15) 0%,
      rgba(180, 180, 220, 0.2) 25%,
      rgba(160, 160, 200, 0.25) 50%,
      rgba(180, 180, 220, 0.2) 75%,
      rgba(200, 200, 230, 0.15) 100%);
  border: 2px solid rgba(200, 200, 240, 0.4);
  color: #f0f0ff;
  text-shadow: 0 0 15px rgba(200, 200, 255, 1),
               0 0 30px rgba(180, 180, 240, 0.7),
               0 0 45px rgba(160, 160, 220, 0.5);
  box-shadow: 0 4px 25px rgba(180, 180, 230, 0.5),
              0 0 50px rgba(160, 160, 210, 0.3),
              inset 0 0 30px rgba(200, 200, 255, 0.2);
  animation: glassShimmer 5s ease-in-out infinite;
  position: relative;
  border-radius: 40px;
  backdrop-filter: blur(5px);
  padding-left: 45px;
}

.player-title.style-glass-phantasm::before {
  content: '🌙';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 10px rgba(200, 200, 255, 1))
          drop-shadow(0 0 20px rgba(180, 180, 240, 0.8));
}

.player-title.style-glass-phantasm::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.2) 100%);
  border-radius: 40px;
  pointer-events: none;
}

@keyframes glassShimmer {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(180, 180, 230, 0.5),
                0 0 50px rgba(160, 160, 210, 0.3),
                inset 0 0 30px rgba(200, 200, 255, 0.2);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 6px 35px rgba(200, 200, 255, 0.7),
                0 0 70px rgba(180, 180, 240, 0.5),
                inset 0 0 40px rgba(220, 220, 255, 0.3);
    filter: brightness(1.1);
  }
}

.player-title.style-glass-phantasm:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 45px rgba(200, 200, 255, 0.9),
              0 0 90px rgba(180, 180, 240, 0.7);
  filter: brightness(1.15);
}

/* ========================================
   稱號樣式 - blazing-path (灼炎行者)
   單一靜態emoji 🔥，熾熱火焰主題
======================================== */
.player-title.style-blazing-path {
  background:
    linear-gradient(180deg,
      rgba(255, 100, 0, 0.6) 0%,
      rgba(255, 150, 0, 0.5) 30%,
      rgba(255, 80, 0, 0.6) 60%,
      rgba(200, 50, 0, 0.7) 100%);
  border: 3px solid rgba(255, 120, 0, 0.8);
  color: #fff8e0;
  text-shadow: 0 0 20px rgba(255, 150, 0, 1),
               0 0 40px rgba(255, 100, 0, 0.9),
               0 2px 15px rgba(200, 50, 0, 1);
  box-shadow: 0 4px 35px rgba(255, 100, 0, 0.9),
              0 0 70px rgba(255, 150, 0, 0.6),
              inset 0 0 40px rgba(255, 80, 0, 0.4);
  animation: blazeFlicker 0.5s ease-in-out infinite alternate;
  position: relative;
  border-radius: 10px;
  padding-left: 45px;
}

.player-title.style-blazing-path::before {
  content: '🔥';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 15px rgba(255, 150, 0, 1))
          drop-shadow(0 0 30px rgba(255, 100, 0, 0.8));
}

.player-title.style-blazing-path::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 200, 50, 0.3) 50%,
    transparent 100%);
  animation: heatWave 1s ease-in-out infinite;
  pointer-events: none;
  filter: blur(3px);
}

@keyframes blazeFlicker {
  0% {
    box-shadow: 0 4px 35px rgba(255, 100, 0, 0.9),
                0 0 70px rgba(255, 150, 0, 0.6),
                inset 0 0 40px rgba(255, 80, 0, 0.4);
    filter: brightness(1);
  }
  100% {
    box-shadow: 0 6px 45px rgba(255, 150, 0, 1),
                0 0 90px rgba(255, 100, 0, 0.8),
                inset 0 0 50px rgba(255, 120, 0, 0.5);
    filter: brightness(1.1);
  }
}

@keyframes heatWave {
  0%, 100% {
    transform: translateY(0) scaleX(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-5px) scaleX(1.1);
    opacity: 0.7;
  }
}

.player-title.style-blazing-path:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 60px rgba(255, 150, 0, 1),
              0 0 120px rgba(255, 100, 0, 0.9);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - skull-sovereign (蝕骨冥王)
   單一動態emoji 💀，骷髏脈動效果
======================================== */
.player-title.style-skull-sovereign {
  background:
    linear-gradient(135deg,
      rgba(30, 30, 35, 0.98) 0%,
      rgba(50, 45, 55, 0.95) 50%,
      rgba(30, 30, 35, 0.98) 100%);
  border: 3px solid rgba(150, 130, 160, 0.5);
  color: #e8e0f0;
  text-shadow: 0 0 20px rgba(200, 180, 220, 0.9),
               0 0 40px rgba(150, 130, 160, 0.7),
               0 2px 10px rgba(100, 80, 120, 0.9);
  box-shadow: 0 4px 30px rgba(80, 60, 100, 0.8),
              0 0 60px rgba(50, 40, 60, 0.7),
              inset 0 0 40px rgba(40, 30, 50, 0.6);
  animation: sovereignPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  padding-left: 50px;
}

.player-title.style-skull-sovereign::before {
  content: '💀';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  filter: drop-shadow(0 0 15px rgba(200, 180, 220, 1))
          drop-shadow(0 0 30px rgba(150, 130, 160, 0.8));
  animation: skullPulse 2s ease-in-out infinite;
}

.player-title.style-skull-sovereign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  background: radial-gradient(circle,
    rgba(200, 180, 220, 0.4) 0%,
    transparent 70%);
  animation: skullAura 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sovereignPulse {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(80, 60, 100, 0.8),
                0 0 60px rgba(50, 40, 60, 0.7),
                inset 0 0 40px rgba(40, 30, 50, 0.6);
  }
  50% {
    box-shadow: 0 6px 45px rgba(120, 100, 140, 0.9),
                0 0 90px rgba(80, 60, 100, 0.8),
                inset 0 0 60px rgba(60, 50, 70, 0.7);
  }
}

@keyframes skullPulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    filter: drop-shadow(0 0 15px rgba(200, 180, 220, 1))
            drop-shadow(0 0 30px rgba(150, 130, 160, 0.8));
  }
  50% {
    transform: translateY(-50%) scale(1.15);
    filter: drop-shadow(0 0 25px rgba(220, 200, 240, 1))
            drop-shadow(0 0 50px rgba(180, 160, 200, 1));
  }
}

@keyframes skullAura {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-50%) scale(1.5);
    opacity: 0.9;
  }
}

.player-title.style-skull-sovereign:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 60px rgba(120, 100, 140, 1),
              0 0 120px rgba(150, 130, 160, 0.9);
}

/* ========================================
   稱號樣式 - divine-thunder (天譴雷霆)
   單一動態emoji ⚡，雷擊閃電效果
======================================== */
.player-title.style-divine-thunder {
  background:
    linear-gradient(180deg,
      rgba(20, 20, 40, 0.95) 0%,
      rgba(40, 40, 80, 0.9) 50%,
      rgba(20, 20, 50, 0.95) 100%);
  border: 3px solid rgba(255, 255, 100, 0.6);
  color: #ffffcc;
  text-shadow: 0 0 20px rgba(255, 255, 150, 1),
               0 0 40px rgba(200, 200, 100, 0.8),
               0 0 60px rgba(255, 255, 200, 0.6);
  box-shadow: 0 4px 35px rgba(255, 255, 100, 0.7),
              0 0 70px rgba(200, 200, 50, 0.5),
              inset 0 0 40px rgba(100, 100, 50, 0.3);
  animation: divineRumble 4s ease-in-out infinite;
  position: relative;
  border-radius: 8px;
  padding-left: 50px;
}

.player-title.style-divine-thunder::before {
  content: '⚡';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  filter: drop-shadow(0 0 20px rgba(255, 255, 150, 1))
          drop-shadow(0 0 40px rgba(255, 255, 100, 0.9));
  animation: divineStrike 3s ease-in-out infinite;
}

.player-title.style-divine-thunder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 200, 0.5) 50%,
    transparent 100%);
  opacity: 0;
  animation: divineFlash 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: 8px;
}

@keyframes divineRumble {
  0%, 85%, 100% {
    box-shadow: 0 4px 35px rgba(255, 255, 100, 0.7),
                0 0 70px rgba(200, 200, 50, 0.5),
                inset 0 0 40px rgba(100, 100, 50, 0.3);
    filter: brightness(1);
  }
  87%, 91%, 95% {
    box-shadow: 0 6px 50px rgba(255, 255, 200, 1),
                0 0 100px rgba(255, 255, 150, 0.9),
                inset 0 0 60px rgba(200, 200, 100, 0.5);
    filter: brightness(1.5);
  }
  89%, 93%, 97% {
    box-shadow: 0 4px 35px rgba(255, 255, 100, 0.7),
                0 0 70px rgba(200, 200, 50, 0.5),
                inset 0 0 40px rgba(100, 100, 50, 0.3);
    filter: brightness(0.9);
  }
}

@keyframes divineStrike {
  0%, 85%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.8;
  }
  87%, 91%, 95% {
    transform: translateY(-50%) scale(1.3);
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1))
            drop-shadow(0 0 60px rgba(255, 255, 150, 1));
  }
  89%, 93%, 97% {
    transform: translateY(-50%) scale(0.9);
    opacity: 0.6;
  }
}

@keyframes divineFlash {
  0%, 85%, 100% {
    opacity: 0;
  }
  87%, 91%, 95% {
    opacity: 0.8;
  }
  89%, 93%, 97% {
    opacity: 0;
  }
}

.player-title.style-divine-thunder:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 70px rgba(255, 255, 200, 1),
              0 0 150px rgba(255, 255, 150, 0.9);
  animation: divineRumble 1s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - phantom-butterfly (幻蝶夜舞)
   單一動態emoji 🦋，翩翩飛舞效果
======================================== */
.player-title.style-phantom-butterfly {
  background:
    linear-gradient(135deg,
      rgba(180, 130, 200, 0.3) 0%,
      rgba(200, 150, 220, 0.25) 30%,
      rgba(160, 120, 190, 0.3) 60%,
      rgba(180, 130, 200, 0.35) 100%);
  border: 2px solid rgba(200, 150, 220, 0.5);
  color: #f5e8ff;
  text-shadow: 0 0 15px rgba(200, 150, 220, 1),
               0 0 30px rgba(180, 130, 200, 0.8),
               0 0 45px rgba(160, 120, 190, 0.6);
  box-shadow: 0 4px 25px rgba(180, 130, 200, 0.6),
              0 0 50px rgba(160, 120, 190, 0.4),
              inset 0 0 30px rgba(200, 150, 220, 0.2);
  animation: butterflyGlow 4s ease-in-out infinite;
  position: relative;
  border-radius: 35px;
  padding-left: 50px;
  overflow: visible;
}

.player-title.style-phantom-butterfly::before {
  content: '🦋';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 12px rgba(200, 150, 220, 1))
          drop-shadow(0 0 25px rgba(180, 130, 200, 0.8));
  animation: butterflyFly 4s ease-in-out infinite;
}

.player-title.style-phantom-butterfly::after {
  content: '✨';
  position: absolute;
  left: 25px;
  top: 30%;
  font-size: 0.8em;
  opacity: 0;
  animation: sparkleTrail 4s ease-in-out infinite 0.5s;
  pointer-events: none;
}

@keyframes butterflyGlow {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(180, 130, 200, 0.6),
                0 0 50px rgba(160, 120, 190, 0.4),
                inset 0 0 30px rgba(200, 150, 220, 0.2);
  }
  50% {
    box-shadow: 0 6px 35px rgba(200, 150, 220, 0.8),
                0 0 70px rgba(180, 130, 200, 0.6),
                inset 0 0 40px rgba(220, 170, 240, 0.3);
  }
}

@keyframes butterflyFly {
  0%, 100% {
    transform: translateY(-50%) translateX(0) rotate(-5deg);
  }
  25% {
    transform: translateY(-70%) translateX(5px) rotate(5deg);
  }
  50% {
    transform: translateY(-50%) translateX(8px) rotate(-5deg);
  }
  75% {
    transform: translateY(-30%) translateX(3px) rotate(5deg);
  }
}

@keyframes sparkleTrail {
  0%, 20% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  30%, 70% {
    opacity: 0.8;
    transform: translateY(-10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.5);
  }
}

.player-title.style-phantom-butterfly:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 45px rgba(200, 150, 220, 0.9),
              0 0 90px rgba(180, 130, 200, 0.7);
}

/* ========================================
   稱號樣式 - egg-carving (蛋雕)
   精緻蛋殼裂紋，金色光澤
======================================== */
.player-title.style-egg-carving {
  background:
    radial-gradient(ellipse 120% 150% at 50% 50%,
      rgba(255, 248, 220, 0.6) 0%,
      rgba(245, 222, 179, 0.5) 40%,
      rgba(222, 184, 135, 0.6) 80%,
      rgba(210, 170, 110, 0.7) 100%);
  border: 3px solid rgba(218, 165, 32, 0.7);
  color: #fff8dc;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.9),
               0 0 30px rgba(218, 165, 32, 0.7),
               0 2px 8px rgba(184, 134, 11, 0.8);
  box-shadow: 0 4px 25px rgba(218, 165, 32, 0.6),
              0 0 50px rgba(255, 223, 100, 0.3),
              inset 0 0 30px rgba(255, 248, 220, 0.3);
  animation: eggShimmer 4s ease-in-out infinite;
  position: relative;
  border-radius: 50% / 60%;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-egg-carving::before {
  content: '🥚';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9))
          drop-shadow(0 0 25px rgba(218, 165, 32, 0.6));
  animation: eggWobble 3s ease-in-out infinite;
}

.player-title.style-egg-carving::after {
  content: '✨';
  position: absolute;
  right: 8px;
  top: 20%;
  font-size: 0.7em;
  animation: eggSparkle 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes eggShimmer {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(218, 165, 32, 0.6),
                0 0 50px rgba(255, 223, 100, 0.3),
                inset 0 0 30px rgba(255, 248, 220, 0.3);
    border-color: rgba(218, 165, 32, 0.7);
  }
  50% {
    box-shadow: 0 6px 35px rgba(255, 215, 0, 0.8),
                0 0 70px rgba(255, 223, 100, 0.5),
                inset 0 0 40px rgba(255, 248, 220, 0.5);
    border-color: rgba(255, 215, 0, 0.9);
  }
}

@keyframes eggWobble {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  25% {
    transform: translateY(-50%) rotate(8deg);
  }
  75% {
    transform: translateY(-50%) rotate(-8deg);
  }
}

@keyframes eggSparkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

.player-title.style-egg-carving:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(255, 215, 0, 1),
              0 0 100px rgba(218, 165, 32, 0.8);
}

/* ========================================
   稱號樣式 - question-doubt (尊嘟假嘟)
   問號迷幻，真假難辨的閃爍效果
======================================== */
.player-title.style-question-doubt {
  background:
    linear-gradient(135deg,
      rgba(0, 200, 255, 0.3) 0%,
      rgba(130, 80, 220, 0.35) 50%,
      rgba(0, 200, 255, 0.3) 100%);
  border: 3px solid rgba(100, 180, 255, 0.6);
  color: #e0f0ff;
  text-shadow: 0 0 15px rgba(100, 180, 255, 1),
               0 0 30px rgba(130, 80, 220, 0.8),
               0 0 50px rgba(0, 200, 255, 0.5);
  box-shadow: 0 4px 25px rgba(100, 180, 255, 0.6),
              0 0 50px rgba(130, 80, 220, 0.4),
              inset 0 0 25px rgba(0, 200, 255, 0.2);
  animation: doubtFlicker 3s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-question-doubt::before {
  content: '❓';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 10px rgba(100, 180, 255, 1))
          drop-shadow(0 0 20px rgba(130, 80, 220, 0.8));
  animation: doubtSpin 4s ease-in-out infinite;
}

.player-title.style-question-doubt::after {
  content: '?';
  position: absolute;
  right: 12px;
  top: 15%;
  font-size: 0.9em;
  color: rgba(100, 180, 255, 0.6);
  animation: doubtFade 2s ease-in-out infinite;
  pointer-events: none;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(130, 80, 220, 0.8);
}

@keyframes doubtFlicker {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(100, 180, 255, 0.6),
                0 0 50px rgba(130, 80, 220, 0.4),
                inset 0 0 25px rgba(0, 200, 255, 0.2);
    opacity: 1;
  }
  30% {
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 6px 35px rgba(130, 80, 220, 0.8),
                0 0 70px rgba(100, 180, 255, 0.6),
                inset 0 0 35px rgba(0, 200, 255, 0.3);
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
}

@keyframes doubtSpin {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-50%) rotate(15deg) scale(1.1);
  }
  50% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-50%) rotate(-15deg) scale(1.1);
  }
}

@keyframes doubtFade {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px);
  }
}

.player-title.style-question-doubt:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(130, 80, 220, 1),
              0 0 100px rgba(100, 180, 255, 0.8);
}

/* ========================================
   稱號樣式 - duck-chill (Duck不必)
   可愛鴨子，橘黃暖色系
======================================== */
.player-title.style-duck-chill {
  background:
    linear-gradient(135deg,
      rgba(255, 200, 50, 0.4) 0%,
      rgba(255, 165, 0, 0.35) 50%,
      rgba(255, 200, 50, 0.4) 100%);
  border: 3px solid rgba(255, 180, 0, 0.7);
  color: #fff5e0;
  text-shadow: 0 0 15px rgba(255, 200, 50, 0.9),
               0 0 30px rgba(255, 165, 0, 0.7),
               0 2px 8px rgba(200, 130, 0, 0.6);
  box-shadow: 0 4px 25px rgba(255, 180, 0, 0.6),
              0 0 40px rgba(255, 200, 50, 0.4),
              inset 0 0 25px rgba(255, 220, 100, 0.2);
  animation: duckBob 2.5s ease-in-out infinite;
  position: relative;
  border-radius: 30px;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-duck-chill::before {
  content: '🦆';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 10px rgba(255, 200, 50, 0.8))
          drop-shadow(0 0 20px rgba(255, 165, 0, 0.6));
  animation: duckWaddle 3s ease-in-out infinite;
}

.player-title.style-duck-chill::after {
  content: '~';
  position: absolute;
  right: 10px;
  bottom: 2px;
  font-size: 1.1em;
  color: rgba(255, 200, 100, 0.5);
  animation: duckWave 2s ease-in-out infinite;
  pointer-events: none;
  font-weight: 900;
  letter-spacing: 2px;
}

@keyframes duckBob {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 180, 0, 0.6),
                0 0 40px rgba(255, 200, 50, 0.4),
                inset 0 0 25px rgba(255, 220, 100, 0.2);
  }
  50% {
    box-shadow: 0 6px 35px rgba(255, 200, 50, 0.8),
                0 0 60px rgba(255, 165, 0, 0.6),
                inset 0 0 30px rgba(255, 220, 100, 0.3);
    transform: translateY(-2px);
  }
}

@keyframes duckWaddle {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  20% {
    transform: translateY(-50%) rotate(-10deg) translateX(-2px);
  }
  40% {
    transform: translateY(-50%) rotate(10deg) translateX(2px);
  }
  60% {
    transform: translateY(-50%) rotate(-10deg) translateX(-2px);
  }
  80% {
    transform: translateY(-50%) rotate(10deg) translateX(2px);
  }
}

@keyframes duckWave {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.4;
  }
  50% {
    transform: translateX(3px);
    opacity: 0.7;
  }
}

.player-title.style-duck-chill:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(255, 200, 50, 1),
              0 0 90px rgba(255, 165, 0, 0.8);
}

/* ========================================
   稱號樣式 - nope-cross (不是這樣喔)
   叉叉紅光，否定的力量
======================================== */
.player-title.style-nope-cross {
  background:
    linear-gradient(135deg,
      rgba(180, 30, 30, 0.4) 0%,
      rgba(120, 20, 40, 0.5) 50%,
      rgba(180, 30, 30, 0.4) 100%);
  border: 3px solid rgba(255, 60, 60, 0.6);
  color: #ffcccc;
  text-shadow: 0 0 15px rgba(255, 60, 60, 1),
               0 0 30px rgba(200, 30, 30, 0.8),
               0 2px 8px rgba(150, 0, 0, 0.7);
  box-shadow: 0 4px 25px rgba(255, 60, 60, 0.6),
              0 0 50px rgba(200, 30, 30, 0.4),
              inset 0 0 30px rgba(180, 30, 30, 0.3);
  animation: crossPulse 2.5s ease-in-out infinite;
  position: relative;
  border-radius: 12px;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-nope-cross::before {
  content: '❌';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 12px rgba(255, 60, 60, 1))
          drop-shadow(0 0 25px rgba(200, 30, 30, 0.8));
  animation: crossShake 2s ease-in-out infinite;
}

.player-title.style-nope-cross::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 60, 60, 0.15) 0%, transparent 70%);
  animation: crossAura 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes crossPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 60, 60, 0.6),
                0 0 50px rgba(200, 30, 30, 0.4),
                inset 0 0 30px rgba(180, 30, 30, 0.3);
  }
  50% {
    box-shadow: 0 6px 40px rgba(255, 60, 60, 0.9),
                0 0 80px rgba(200, 30, 30, 0.7),
                inset 0 0 40px rgba(180, 30, 30, 0.4);
  }
}

@keyframes crossShake {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  10% {
    transform: translateY(-50%) rotate(-15deg);
  }
  20% {
    transform: translateY(-50%) rotate(15deg);
  }
  30% {
    transform: translateY(-50%) rotate(-10deg);
  }
  40% {
    transform: translateY(-50%) rotate(10deg);
  }
  50% {
    transform: translateY(-50%) rotate(0deg);
  }
}

@keyframes crossAura {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.6;
  }
}

.player-title.style-nope-cross:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 55px rgba(255, 60, 60, 1),
              0 0 110px rgba(200, 30, 30, 0.9);
}

/* ========================================
   稱號樣式 - fish-blade (游刃有餘)
   魚在水中悠遊，藍綠水波光效
======================================== */
.player-title.style-fish-blade {
  background:
    linear-gradient(180deg,
      rgba(0, 80, 120, 0.5) 0%,
      rgba(0, 140, 180, 0.4) 40%,
      rgba(0, 180, 200, 0.35) 70%,
      rgba(0, 120, 160, 0.5) 100%);
  border: 2px solid rgba(0, 200, 220, 0.6);
  color: #e0ffff;
  text-shadow: 0 0 15px rgba(0, 200, 220, 1),
               0 0 30px rgba(0, 150, 180, 0.8),
               0 0 50px rgba(0, 200, 255, 0.5);
  box-shadow: 0 4px 25px rgba(0, 180, 200, 0.6),
              0 0 50px rgba(0, 150, 180, 0.4),
              inset 0 0 30px rgba(0, 200, 220, 0.15);
  animation: fishWater 4s ease-in-out infinite;
  position: relative;
  border-radius: 25px;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-fish-blade::before {
  content: '🐟';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 10px rgba(0, 200, 220, 0.9))
          drop-shadow(0 0 20px rgba(0, 150, 180, 0.6));
  animation: fishSwim 3.5s ease-in-out infinite;
}

.player-title.style-fish-blade::after {
  content: '💧';
  position: absolute;
  right: 10px;
  top: 15%;
  font-size: 0.7em;
  animation: fishBubble 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fishWater {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(0, 180, 200, 0.6),
                0 0 50px rgba(0, 150, 180, 0.4),
                inset 0 0 30px rgba(0, 200, 220, 0.15);
    background-position: 0% 50%;
  }
  50% {
    box-shadow: 0 6px 35px rgba(0, 200, 220, 0.8),
                0 0 70px rgba(0, 180, 200, 0.6),
                inset 0 0 40px rgba(0, 200, 220, 0.25);
    background-position: 100% 50%;
  }
}

@keyframes fishSwim {
  0%, 100% {
    transform: translateY(-50%) translateX(0) scaleX(1);
  }
  30% {
    transform: translateY(-60%) translateX(5px) scaleX(1);
  }
  50% {
    transform: translateY(-50%) translateX(8px) scaleX(-1);
  }
  80% {
    transform: translateY(-40%) translateX(3px) scaleX(-1);
  }
  90% {
    transform: translateY(-45%) translateX(0) scaleX(1);
  }
}

@keyframes fishBubble {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.5);
  }
  30% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1);
  }
  60% {
    opacity: 0.5;
    transform: translateY(-15px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-25px) scale(0.3);
  }
}

.player-title.style-fish-blade:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(0, 200, 220, 1),
              0 0 100px rgba(0, 180, 200, 0.8);
}

/* ========================================
   稱號樣式 - answer-me (回答我)
   驚嘆號怒吼，熾熱橙紅
======================================== */
.player-title.style-answer-me {
  background:
    linear-gradient(135deg,
      rgba(255, 100, 0, 0.4) 0%,
      rgba(255, 60, 0, 0.5) 50%,
      rgba(255, 100, 0, 0.4) 100%);
  border: 3px solid rgba(255, 120, 0, 0.7);
  color: #fff0e0;
  text-shadow: 0 0 15px rgba(255, 120, 0, 1),
               0 0 30px rgba(255, 60, 0, 0.8),
               0 2px 8px rgba(200, 50, 0, 0.7);
  box-shadow: 0 4px 30px rgba(255, 100, 0, 0.7),
              0 0 60px rgba(255, 60, 0, 0.5),
              inset 0 0 30px rgba(255, 120, 0, 0.2);
  animation: answerUrgent 2s ease-in-out infinite;
  position: relative;
  border-radius: 10px;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-answer-me::before {
  content: '❗';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 12px rgba(255, 120, 0, 1))
          drop-shadow(0 0 25px rgba(255, 60, 0, 0.8));
  animation: answerBounce 1.5s ease-in-out infinite;
}

.player-title.style-answer-me::after {
  content: '!';
  position: absolute;
  right: 12px;
  top: 20%;
  font-size: 0.8em;
  color: rgba(255, 150, 50, 0.5);
  animation: answerFade 1.8s ease-in-out infinite;
  pointer-events: none;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 100, 0, 0.8);
}

@keyframes answerUrgent {
  0%, 100% {
    box-shadow: 0 4px 30px rgba(255, 100, 0, 0.7),
                0 0 60px rgba(255, 60, 0, 0.5),
                inset 0 0 30px rgba(255, 120, 0, 0.2);
  }
  50% {
    box-shadow: 0 6px 45px rgba(255, 120, 0, 1),
                0 0 90px rgba(255, 80, 0, 0.8),
                inset 0 0 40px rgba(255, 140, 0, 0.3);
  }
}

@keyframes answerBounce {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  30% {
    transform: translateY(-65%) scale(1.2);
  }
  60% {
    transform: translateY(-45%) scale(0.95);
  }
}

@keyframes answerFade {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-8px);
  }
}

.player-title.style-answer-me:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 55px rgba(255, 120, 0, 1),
              0 0 110px rgba(255, 80, 0, 0.9);
  animation: answerUrgent 0.8s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - aba-aba (阿巴阿巴)
   彩虹混沌，錯亂閃爍
======================================== */
.player-title.style-aba-aba {
  background:
    linear-gradient(90deg,
      rgba(255, 100, 100, 0.4) 0%,
      rgba(255, 200, 50, 0.4) 20%,
      rgba(100, 255, 100, 0.4) 40%,
      rgba(50, 200, 255, 0.4) 60%,
      rgba(180, 100, 255, 0.4) 80%,
      rgba(255, 100, 150, 0.4) 100%);
  background-size: 200% 100%;
  border: 3px solid rgba(255, 180, 100, 0.6);
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
               0 0 20px rgba(255, 200, 100, 0.7),
               0 0 40px rgba(255, 150, 200, 0.5);
  box-shadow: 0 4px 25px rgba(255, 180, 100, 0.5),
              0 0 40px rgba(180, 100, 255, 0.3),
              inset 0 0 20px rgba(255, 255, 255, 0.15);
  animation: abaRainbow 4s linear infinite, abaJitter 0.5s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-aba-aba::before {
  content: '🫠';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.8));
  animation: abaFloat 2s ease-in-out infinite;
}

.player-title.style-aba-aba::after {
  content: '~';
  position: absolute;
  right: 10px;
  top: 30%;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.4);
  animation: abaWiggle 1.5s ease-in-out infinite;
  pointer-events: none;
  font-weight: 900;
}

@keyframes abaRainbow {
  0% {
    background-position: 0% 50%;
    border-color: rgba(255, 100, 100, 0.6);
  }
  25% {
    border-color: rgba(100, 255, 100, 0.6);
  }
  50% {
    background-position: 100% 50%;
    border-color: rgba(50, 200, 255, 0.6);
  }
  75% {
    border-color: rgba(180, 100, 255, 0.6);
  }
  100% {
    background-position: 200% 50%;
    border-color: rgba(255, 100, 100, 0.6);
  }
}

@keyframes abaJitter {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 0.5px);
  }
  75% {
    transform: translate(0.5px, 1px);
  }
}

@keyframes abaFloat {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  33% {
    transform: translateY(-55%) rotate(10deg);
  }
  66% {
    transform: translateY(-45%) rotate(-10deg);
  }
}

@keyframes abaWiggle {
  0%, 100% {
    transform: rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: rotate(15deg);
    opacity: 0.6;
  }
}

.player-title.style-aba-aba:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 50px rgba(255, 200, 100, 0.8),
              0 0 90px rgba(180, 100, 255, 0.6);
  animation: abaRainbow 2s linear infinite, abaJitter 0.2s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - shield-break (這就破防了嗎)
   碎裂盾牌效果，冰藍裂痕
======================================== */
.player-title.style-shield-break {
  background:
    linear-gradient(135deg,
      rgba(60, 80, 120, 0.6) 0%,
      rgba(80, 120, 180, 0.4) 40%,
      rgba(40, 60, 100, 0.6) 70%,
      rgba(60, 80, 120, 0.6) 100%);
  border: 3px solid rgba(100, 160, 255, 0.5);
  color: #d0e8ff;
  text-shadow: 0 0 15px rgba(100, 160, 255, 1),
               0 0 30px rgba(80, 120, 200, 0.8),
               0 2px 8px rgba(60, 80, 150, 0.7);
  box-shadow: 0 4px 25px rgba(100, 160, 255, 0.5),
              0 0 50px rgba(80, 120, 200, 0.4),
              inset 0 0 30px rgba(60, 80, 120, 0.4);
  animation: shieldCrack 3s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  padding-left: 48px;
  overflow: visible;
}

.player-title.style-shield-break::before {
  content: '🛡️';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 12px rgba(100, 160, 255, 1))
          drop-shadow(0 0 25px rgba(80, 120, 200, 0.7));
  animation: shieldShatter 3s ease-in-out infinite;
}

.player-title.style-shield-break::after {
  content: '💥';
  position: absolute;
  left: 30px;
  top: 15%;
  font-size: 0.7em;
  opacity: 0;
  animation: shieldImpact 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shieldCrack {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(100, 160, 255, 0.5),
                0 0 50px rgba(80, 120, 200, 0.4),
                inset 0 0 30px rgba(60, 80, 120, 0.4);
    border-color: rgba(100, 160, 255, 0.5);
  }
  40% {
    box-shadow: 0 4px 25px rgba(100, 160, 255, 0.5),
                0 0 50px rgba(80, 120, 200, 0.4),
                inset 0 0 30px rgba(60, 80, 120, 0.4);
  }
  50% {
    box-shadow: 0 6px 40px rgba(255, 100, 50, 0.8),
                0 0 80px rgba(255, 80, 30, 0.6),
                inset 0 0 40px rgba(255, 60, 20, 0.3);
    border-color: rgba(255, 100, 50, 0.8);
  }
  60% {
    box-shadow: 0 4px 25px rgba(100, 160, 255, 0.5),
                0 0 50px rgba(80, 120, 200, 0.4),
                inset 0 0 30px rgba(60, 80, 120, 0.4);
    border-color: rgba(100, 160, 255, 0.5);
  }
}

@keyframes shieldShatter {
  0%, 40%, 60%, 100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
  45% {
    transform: translateY(-50%) scale(0.85) rotate(-5deg);
  }
  50% {
    transform: translateY(-50%) scale(1.15) rotate(5deg);
  }
  55% {
    transform: translateY(-50%) scale(0.9) rotate(-3deg);
  }
}

@keyframes shieldImpact {
  0%, 40%, 60%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  48%, 52% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.player-title.style-shield-break:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(100, 160, 255, 0.9),
              0 0 100px rgba(80, 120, 200, 0.7);
}

/* ========================================
   稱號樣式 - oiiai-cat (OIIAI 旋轉貓)
   迷因旋轉貓節奏，O-I-I-A-I 拉伸變形
======================================== */
.player-title.style-oiiai-cat {
  background:
    linear-gradient(135deg,
      rgba(80, 80, 80, 0.6) 0%,
      rgba(60, 60, 70, 0.7) 50%,
      rgba(80, 80, 80, 0.6) 100%);
  border: 3px solid rgba(255, 180, 100, 0.6);
  color: #ffe8d0;
  text-shadow: 0 0 12px rgba(255, 180, 100, 0.9),
               0 0 25px rgba(255, 140, 60, 0.7),
               0 2px 6px rgba(200, 120, 40, 0.6);
  box-shadow: 0 4px 25px rgba(255, 180, 100, 0.5),
              0 0 40px rgba(200, 120, 40, 0.3),
              inset 0 0 20px rgba(255, 200, 150, 0.15);
  animation: oiiaiPulse 6s ease-in-out infinite;
  position: relative;
  border-radius: 20px;
  padding-left: 52px;
  overflow: visible;
}

.player-title.style-oiiai-cat::before {
  content: '🐱';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  filter: drop-shadow(0 0 8px rgba(255, 180, 100, 0.8));
  /* 6s循環：前3s靜止，後3s左右翻轉 */
  animation: oiiaiFlip 6s ease-in-out infinite;
}

.player-title.style-oiiai-cat::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 22px;
  width: 25px;
  height: 25px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255, 180, 100, 0.3) 0%, transparent 70%);
  animation: oiiaiGlow 6s ease-in-out infinite;
  pointer-events: none;
}

/* OIIAI：前50%(3s)靜止，後50%(3s)左右水平翻轉來回 */
@keyframes oiiaiFlip {
  /* 0%~50% = 前3秒靜止 */
  0%, 50% {
    transform: translateY(-50%) scaleX(1);
  }
  /* 後3秒開始左右翻轉 */
  57% {
    transform: translateY(-50%) scaleX(-1);
  }
  64% {
    transform: translateY(-50%) scaleX(1);
  }
  71% {
    transform: translateY(-50%) scaleX(-1);
  }
  78% {
    transform: translateY(-50%) scaleX(1);
  }
  85% {
    transform: translateY(-50%) scaleX(-1);
  }
  92% {
    transform: translateY(-50%) scaleX(1);
  }
  100% {
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes oiiaiPulse {
  0%, 50% {
    box-shadow: 0 4px 25px rgba(255, 180, 100, 0.5),
                0 0 40px rgba(200, 120, 40, 0.3),
                inset 0 0 20px rgba(255, 200, 150, 0.15);
  }
  75% {
    box-shadow: 0 6px 35px rgba(255, 180, 100, 0.7),
                0 0 60px rgba(200, 120, 40, 0.5),
                inset 0 0 30px rgba(255, 200, 150, 0.25);
  }
  100% {
    box-shadow: 0 4px 25px rgba(255, 180, 100, 0.5),
                0 0 40px rgba(200, 120, 40, 0.3),
                inset 0 0 20px rgba(255, 200, 150, 0.15);
  }
}

@keyframes oiiaiGlow {
  0%, 50% {
    transform: translateY(-50%) scale(1);
    opacity: 0.3;
  }
  75% {
    transform: translateY(-50%) scale(1.5);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-50%) scale(1);
    opacity: 0.3;
  }
}

.player-title.style-oiiai-cat:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 50px rgba(255, 180, 100, 0.9),
              0 0 90px rgba(200, 120, 40, 0.7);
}

/* ========================================
   稱號樣式 - samsara-cycle (輪迴永劫)
   紫青色輪迴光環，生死循環的永恆感
======================================== */
.player-title.style-samsara-cycle {
  background: linear-gradient(270deg,
    rgba(120, 0, 200, 0.5) 0%,
    rgba(0, 180, 200, 0.5) 25%,
    rgba(200, 0, 150, 0.5) 50%,
    rgba(0, 200, 180, 0.5) 75%,
    rgba(120, 0, 200, 0.5) 100%);
  background-size: 400% 100%;
  border: 2px solid rgba(180, 100, 255, 0.7);
  color: #e8d0ff;
  text-shadow: 0 0 12px rgba(180, 100, 255, 1),
               0 0 25px rgba(0, 200, 200, 0.8),
               0 0 40px rgba(150, 0, 200, 0.5);
  box-shadow: 0 4px 20px rgba(120, 0, 200, 0.6),
              0 0 40px rgba(0, 200, 200, 0.3),
              inset 0 0 20px rgba(180, 100, 255, 0.15);
  animation: samsaraFlow 6s linear infinite, samsaraPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
}

.player-title.style-samsara-cycle::before {
  content: '☯';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  animation: samsaraSpin 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(180, 100, 255, 0.9));
  opacity: 0.7;
  pointer-events: none;
}

.player-title.style-samsara-cycle::after {
  content: '∞';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  color: rgba(0, 220, 220, 0.9);
  animation: samsaraFade 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(0, 200, 200, 0.9));
  pointer-events: none;
}

@keyframes samsaraFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes samsaraPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(120, 0, 200, 0.6),
                0 0 40px rgba(0, 200, 200, 0.3),
                inset 0 0 20px rgba(180, 100, 255, 0.15);
    border-color: rgba(180, 100, 255, 0.7);
  }
  50% {
    box-shadow: 0 6px 30px rgba(0, 200, 200, 0.7),
                0 0 60px rgba(120, 0, 200, 0.5),
                inset 0 0 30px rgba(0, 200, 200, 0.2);
    border-color: rgba(0, 220, 220, 0.8);
  }
}

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

@keyframes samsaraFade {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

.player-title.style-samsara-cycle:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.2) hue-rotate(30deg);
}

/* ========================================
   稱號樣式 - circuit-board (電路超載)
   PCB電路板紋路，霓虹綠掃描線，高科技感
======================================== */
.player-title.style-circuit-board {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0, 255, 100, 0.06) 8px, rgba(0, 255, 100, 0.06) 9px),
    repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0, 255, 100, 0.06) 8px, rgba(0, 255, 100, 0.06) 9px),
    linear-gradient(135deg, rgba(0, 20, 10, 0.95) 0%, rgba(0, 40, 20, 0.9) 50%, rgba(0, 20, 10, 0.95) 100%);
  border: 2px solid rgba(0, 255, 100, 0.6);
  color: #00ff64;
  text-shadow: 0 0 10px rgba(0, 255, 100, 1),
               0 0 25px rgba(0, 255, 100, 0.7),
               0 0 40px rgba(0, 200, 80, 0.4);
  box-shadow: 0 4px 20px rgba(0, 255, 100, 0.4),
              0 0 40px rgba(0, 200, 80, 0.2),
              inset 0 0 15px rgba(0, 255, 100, 0.1);
  animation: circuitPulse 2s ease-in-out infinite;
  position: relative;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
  overflow: hidden;
}

/* 掃描線效果 */
.player-title.style-circuit-board::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 100, 0.15), rgba(0, 255, 100, 0.3), rgba(0, 255, 100, 0.15), transparent);
  animation: circuitScan 2.5s linear infinite;
  pointer-events: none;
}

/* 電路節點裝飾 */
.player-title.style-circuit-board::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid rgba(0, 255, 100, 0.25);
  border-radius: 2px;
  pointer-events: none;
  animation: circuitInnerFlicker 4s ease-in-out infinite;
}

@keyframes circuitPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 255, 100, 0.4),
                0 0 40px rgba(0, 200, 80, 0.2),
                inset 0 0 15px rgba(0, 255, 100, 0.1);
    border-color: rgba(0, 255, 100, 0.6);
  }
  50% {
    box-shadow: 0 6px 30px rgba(0, 255, 100, 0.7),
                0 0 60px rgba(0, 200, 80, 0.4),
                inset 0 0 25px rgba(0, 255, 100, 0.2);
    border-color: rgba(0, 255, 100, 0.9);
  }
}

@keyframes circuitScan {
  0% { left: -50%; }
  100% { left: 150%; }
}

@keyframes circuitInnerFlicker {
  0%, 100% { border-color: rgba(0, 255, 100, 0.25); }
  25% { border-color: rgba(0, 255, 100, 0.5); }
  50% { border-color: rgba(0, 255, 100, 0.15); }
  75% { border-color: rgba(0, 255, 100, 0.6); }
}

.player-title.style-circuit-board:hover {
  transform: translateY(-2px);
  text-shadow: 0 0 15px rgba(0, 255, 100, 1),
               0 0 30px rgba(0, 255, 100, 0.9),
               0 0 50px rgba(0, 200, 80, 0.7);
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - trash-can (垃圾桶蓋)
   凹凸金屬垃圾桶，搞笑風格
======================================== */
.player-title.style-trash-can {
  background: linear-gradient(180deg,
    rgba(160, 160, 160, 0.7) 0%,
    rgba(120, 120, 120, 0.8) 20%,
    rgba(90, 90, 90, 0.9) 50%,
    rgba(110, 110, 110, 0.8) 80%,
    rgba(80, 80, 80, 0.9) 100%);
  border: 3px solid #888;
  border-top: 4px solid #aaa;
  border-bottom: 4px solid #666;
  color: #d0d0d0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8),
               0 0 8px rgba(150, 150, 150, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5),
              inset 0 2px 4px rgba(200, 200, 200, 0.3),
              inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  animation: trashWobble 4s ease-in-out infinite;
  position: relative;
  border-radius: 8px 8px 12px 12px;
  overflow: visible;
  font-family: 'Orbitron', sans-serif;
}

.player-title.style-trash-can::before {
  content: '🪰';
  position: absolute;
  top: -18px;
  right: 5%;
  font-size: 1em;
  animation: flyBuzz 2s ease-in-out infinite;
  opacity: 0.8;
}

.player-title.style-trash-can::after {
  content: '🗑️';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  animation: trashLidBounce 3s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes trashWobble {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(1.5deg); }
  30% { transform: rotate(-1deg); }
  45% { transform: rotate(0.5deg); }
  60% { transform: rotate(0deg); }
}

@keyframes flyBuzz {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(8px, -5px) rotate(15deg); }
  50% { transform: translate(-3px, -8px) rotate(-10deg); }
  75% { transform: translate(5px, -2px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes trashLidBounce {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50% { transform: translateY(-55%) rotate(-8deg); }
}

.player-title.style-trash-can:hover {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6),
              inset 0 2px 6px rgba(200, 200, 200, 0.4);
}

/* ========================================
   稱號樣式 - wuxia-sword (劍氣縱橫)
   水墨武俠風，筆刷質感，竹影劍氣
======================================== */
.player-title.style-wuxia-sword {
  background: linear-gradient(135deg,
    rgba(245, 240, 230, 0.12) 0%,
    rgba(200, 180, 150, 0.15) 30%,
    rgba(180, 160, 130, 0.18) 50%,
    rgba(200, 180, 150, 0.15) 70%,
    rgba(245, 240, 230, 0.12) 100%);
  border: 2px solid rgba(180, 160, 130, 0.6);
  border-left: 3px solid rgba(200, 180, 150, 0.8);
  border-right: 3px solid rgba(200, 180, 150, 0.8);
  color: #f0e8d8;
  text-shadow: 0 0 8px rgba(200, 180, 140, 0.8),
               0 0 20px rgba(180, 160, 120, 0.5),
               0 1px 3px rgba(0, 0, 0, 0.7);
  box-shadow: 0 4px 20px rgba(100, 80, 50, 0.4),
              0 0 30px rgba(200, 180, 140, 0.15),
              inset 0 0 20px rgba(200, 180, 140, 0.08);
  animation: swordQiPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  font-weight: 900;
  letter-spacing: 4px;
}

/* 左側劍氣 */
.player-title.style-wuxia-sword::before {
  content: '⚔';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  opacity: 0.6;
  filter: drop-shadow(0 0 6px rgba(200, 180, 140, 0.8))
          grayscale(0.5) sepia(0.3);
  animation: swordSlash 4s ease-in-out infinite;
  pointer-events: none;
}

/* 右側竹葉裝飾 */
.player-title.style-wuxia-sword::after {
  content: '🎋';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  opacity: 0.5;
  filter: drop-shadow(0 0 5px rgba(100, 140, 80, 0.6))
          sepia(0.4);
  animation: bambooSway 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes swordQiPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(100, 80, 50, 0.4),
                0 0 30px rgba(200, 180, 140, 0.15),
                inset 0 0 20px rgba(200, 180, 140, 0.08);
    border-color: rgba(180, 160, 130, 0.6);
  }
  50% {
    box-shadow: 0 6px 25px rgba(100, 80, 50, 0.5),
                0 0 45px rgba(200, 180, 140, 0.3),
                inset 0 0 30px rgba(200, 180, 140, 0.12);
    border-color: rgba(220, 200, 170, 0.8);
  }
}

@keyframes swordSlash {
  0%, 85%, 100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  90% {
    transform: translateY(-50%) rotate(-30deg) scale(1.2);
    opacity: 1;
  }
  95% {
    transform: translateY(-50%) rotate(10deg) scale(1);
    opacity: 0.8;
  }
}

@keyframes bambooSway {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  25% { transform: translateY(-50%) rotate(3deg); }
  75% { transform: translateY(-50%) rotate(-3deg); }
}

.player-title.style-wuxia-sword:hover {
  transform: translateY(-2px);
  text-shadow: 0 0 12px rgba(200, 180, 140, 1),
               0 0 30px rgba(180, 160, 120, 0.8),
               0 1px 3px rgba(0, 0, 0, 0.7);
  filter: brightness(1.15);
}

/* ========================================
   稱號樣式 - tech-samsara (迴圈迭代者)
   科技風輪迴 — 量子迴路×靈魂重啟
   深黑底+青紫電路紋+輪迴環形掃描
======================================== */
.player-title.style-tech-samsara {
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(0, 255, 255, 0.04) 0deg,
      transparent 15deg,
      rgba(180, 0, 255, 0.04) 30deg,
      transparent 45deg
    ),
    repeating-linear-gradient(0deg, transparent, transparent 6px, rgba(0, 255, 255, 0.05) 6px, rgba(0, 255, 255, 0.05) 7px),
    repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(180, 0, 255, 0.05) 6px, rgba(180, 0, 255, 0.05) 7px),
    linear-gradient(135deg, rgba(5, 5, 15, 0.95) 0%, rgba(10, 5, 25, 0.95) 50%, rgba(5, 10, 20, 0.95) 100%);
  border: 2px solid rgba(0, 255, 255, 0.5);
  color: #b0ffff;
  text-shadow: 0 0 8px rgba(0, 255, 255, 1),
               0 0 20px rgba(0, 200, 255, 0.7),
               0 0 35px rgba(160, 0, 255, 0.4),
               2px 2px 0px rgba(180, 0, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3),
              0 0 40px rgba(120, 0, 200, 0.2),
              inset 0 0 25px rgba(0, 255, 255, 0.08),
              inset 0 0 50px rgba(120, 0, 200, 0.05);
  animation: techSamsaraBorder 4s linear infinite, techSamsaraPulse 3s ease-in-out infinite;
  position: relative;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  overflow: hidden;
}

/* 環形掃描光 — 模擬輪迴循環 */
.player-title.style-tech-samsara::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(0, 255, 255, 0.15) 30deg,
    rgba(180, 0, 255, 0.1) 60deg,
    transparent 120deg,
    transparent 360deg
  );
  animation: techSamsaraRotate 4s linear infinite;
  pointer-events: none;
}

/* 水平數據流掃描線 */
.player-title.style-tech-samsara::after {
  content: '◁ CYCLE ▷';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 14px;
  font-size: 7px;
  line-height: 14px;
  text-align: center;
  letter-spacing: 4px;
  color: rgba(0, 255, 255, 0.4);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.08) 20%,
    rgba(180, 0, 255, 0.08) 50%,
    rgba(0, 255, 255, 0.08) 80%,
    transparent 100%);
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  pointer-events: none;
  animation: techSamsaraDataFlow 3s linear infinite;
}

/* 邊框青紫交替 */
@keyframes techSamsaraBorder {
  0%, 100% {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3),
                0 0 40px rgba(120, 0, 200, 0.2),
                inset 0 0 25px rgba(0, 255, 255, 0.08);
  }
  50% {
    border-color: rgba(180, 0, 255, 0.5);
    box-shadow: 0 4px 20px rgba(180, 0, 255, 0.3),
                0 0 40px rgba(0, 255, 255, 0.2),
                inset 0 0 25px rgba(180, 0, 255, 0.08);
  }
}

/* 整體呼吸脈動 */
@keyframes techSamsaraPulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(0, 255, 255, 1),
                 0 0 20px rgba(0, 200, 255, 0.7),
                 0 0 35px rgba(160, 0, 255, 0.4),
                 2px 2px 0px rgba(180, 0, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 12px rgba(180, 0, 255, 1),
                 0 0 25px rgba(180, 0, 255, 0.8),
                 0 0 40px rgba(0, 255, 255, 0.5),
                 -2px -2px 0px rgba(0, 255, 255, 0.3);
  }
}

/* 環形掃描旋轉 */
@keyframes techSamsaraRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 底部數據流 */
@keyframes techSamsaraDataFlow {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

.player-title.style-tech-samsara:hover {
  transform: translateY(-2px) scale(1.03);
  color: #d0ffff;
  border-color: rgba(0, 255, 255, 0.8);
  box-shadow: 0 6px 30px rgba(0, 255, 255, 0.5),
              0 0 60px rgba(180, 0, 255, 0.4),
              inset 0 0 30px rgba(0, 255, 255, 0.12);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - quantum-entangle (量子糾纏)
   雙粒子共振，藍紅疊加態，觀測時坍縮閃爍
======================================== */
.player-title.style-quantum-entangle {
  background: linear-gradient(90deg,
    rgba(0, 100, 255, 0.4) 0%,
    rgba(10, 10, 30, 0.95) 35%,
    rgba(10, 10, 30, 0.95) 65%,
    rgba(255, 50, 80, 0.4) 100%);
  border: 2px solid rgba(100, 140, 255, 0.6);
  color: #d0e0ff;
  text-shadow: 0 0 10px rgba(100, 150, 255, 1),
               0 0 20px rgba(100, 150, 255, 0.6),
               0 0 35px rgba(255, 80, 120, 0.3);
  box-shadow: 0 4px 20px rgba(50, 100, 255, 0.3),
              0 0 40px rgba(255, 50, 80, 0.15),
              inset 0 0 20px rgba(100, 150, 255, 0.08);
  animation: quantumShimmer 3s ease-in-out infinite;
  position: relative;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  overflow: hidden;
}

/* 左側藍色粒子 */
.player-title.style-quantum-entangle::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80, 160, 255, 1) 0%, rgba(80, 160, 255, 0) 70%);
  box-shadow: 0 0 12px rgba(80, 160, 255, 0.9),
              0 0 25px rgba(80, 160, 255, 0.5);
  animation: quantumParticleLeft 2s ease-in-out infinite;
  pointer-events: none;
}

/* 右側紅色粒子 */
.player-title.style-quantum-entangle::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 80, 120, 1) 0%, rgba(255, 80, 120, 0) 70%);
  box-shadow: 0 0 12px rgba(255, 80, 120, 0.9),
              0 0 25px rgba(255, 80, 120, 0.5);
  animation: quantumParticleRight 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes quantumShimmer {
  0%, 100% {
    border-color: rgba(100, 140, 255, 0.6);
    box-shadow: 0 4px 20px rgba(50, 100, 255, 0.3),
                0 0 40px rgba(255, 50, 80, 0.15),
                inset 0 0 20px rgba(100, 150, 255, 0.08);
  }
  50% {
    border-color: rgba(255, 80, 120, 0.6);
    box-shadow: 0 4px 20px rgba(255, 50, 80, 0.3),
                0 0 40px rgba(50, 100, 255, 0.15),
                inset 0 0 20px rgba(255, 80, 120, 0.08);
  }
}

@keyframes quantumParticleLeft {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 12px rgba(80, 160, 255, 0.9),
                0 0 25px rgba(80, 160, 255, 0.5);
  }
  50% {
    transform: translateY(-50%) scale(1.8);
    box-shadow: 0 0 20px rgba(80, 160, 255, 1),
                0 0 40px rgba(80, 160, 255, 0.8);
  }
}

@keyframes quantumParticleRight {
  0%, 100% {
    transform: translateY(-50%) scale(1.8);
    box-shadow: 0 0 20px rgba(255, 80, 120, 1),
                0 0 40px rgba(255, 80, 120, 0.8);
  }
  50% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 12px rgba(255, 80, 120, 0.9),
                0 0 25px rgba(255, 80, 120, 0.5);
  }
}

.player-title.style-quantum-entangle:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
  animation: quantumShimmer 0.3s ease-in-out infinite;
}

/* ========================================
   稱號樣式 - buffer-overflow (記憶體溢位)
   資料損毀故障風，文字抖動扭曲，紅色警告
======================================== */
.player-title.style-buffer-overflow {
  background: linear-gradient(180deg,
    rgba(30, 0, 0, 0.95) 0%,
    rgba(15, 5, 5, 0.95) 40%,
    rgba(40, 0, 0, 0.9) 60%,
    rgba(15, 5, 5, 0.95) 100%);
  border: 2px solid rgba(255, 60, 60, 0.5);
  color: #ff4444;
  text-shadow: 0 0 8px rgba(255, 50, 50, 1),
               0 0 20px rgba(255, 0, 0, 0.6),
               3px 0 0 rgba(0, 255, 0, 0.15),
               -2px 0 0 rgba(0, 100, 255, 0.15);
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3),
              inset 0 0 30px rgba(255, 0, 0, 0.05);
  animation: bufferGlitch 4s ease-in-out infinite;
  position: relative;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  overflow: hidden;
}

/* 損毀掃描線 */
.player-title.style-buffer-overflow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg,
    transparent 0px,
    transparent 3px,
    rgba(255, 0, 0, 0.03) 3px,
    rgba(255, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  animation: bufferScanDrift 8s linear infinite;
}

/* 錯誤碎片閃爍 */
.player-title.style-buffer-overflow::after {
  content: 'ERR';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55em;
  color: rgba(255, 60, 60, 0.6);
  letter-spacing: 2px;
  animation: bufferErrBlink 1.5s step-end infinite;
  pointer-events: none;
}

@keyframes bufferGlitch {
  0%, 85%, 100% {
    transform: translate(0);
    filter: none;
  }
  86% {
    transform: translate(-3px, 1px) skewX(-2deg);
    filter: hue-rotate(90deg) brightness(1.5);
  }
  88% {
    transform: translate(2px, -1px) skewX(1deg);
    filter: hue-rotate(-60deg);
  }
  90% {
    transform: translate(-1px, 0) skewX(0deg);
    filter: none;
  }
  92% {
    transform: translate(4px, 1px) skewX(-3deg);
    filter: hue-rotate(180deg) brightness(2);
  }
  94% {
    transform: translate(0);
    filter: none;
  }
}

@keyframes bufferScanDrift {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

@keyframes bufferErrBlink {
  0%, 60% { opacity: 0.6; }
  61%, 80% { opacity: 0; }
  81%, 100% { opacity: 0.6; }
}

.player-title.style-buffer-overflow:hover {
  transform: translate(-1px, -2px) skewX(-1deg);
  text-shadow: 0 0 12px rgba(255, 50, 50, 1),
               0 0 30px rgba(255, 0, 0, 0.9),
               5px 0 0 rgba(0, 255, 0, 0.3),
               -3px 0 0 rgba(0, 100, 255, 0.3);
  filter: brightness(1.3);
}

/* ========================================
   稱號樣式 - zero-day (零日漏洞)
   駭客終端機風，深綠螢幕，掃描入侵感
======================================== */
.player-title.style-zero-day {
  background: linear-gradient(135deg,
    rgba(0, 10, 0, 0.95) 0%,
    rgba(0, 20, 5, 0.95) 50%,
    rgba(0, 10, 0, 0.95) 100%);
  border: 1px solid rgba(0, 200, 0, 0.4);
  color: #00dd00;
  text-shadow: 0 0 6px rgba(0, 220, 0, 1),
               0 0 15px rgba(0, 200, 0, 0.6);
  box-shadow: 0 4px 15px rgba(0, 180, 0, 0.2),
              inset 0 0 40px rgba(0, 100, 0, 0.1);
  animation: zeroFlicker 0.1s infinite alternate;
  position: relative;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  overflow: hidden;
}

/* CRT 掃描線 */
.player-title.style-zero-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
}

/* 入侵游標閃爍 */
.player-title.style-zero-day::after {
  content: '>';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  color: rgba(0, 220, 0, 0.8);
  animation: zeroCursor 1s step-end infinite;
  pointer-events: none;
}

@keyframes zeroFlicker {
  0% { opacity: 1; filter: brightness(1); }
  100% { opacity: 0.97; filter: brightness(1.02); }
}

@keyframes zeroCursor {
  0%, 50% { opacity: 0.8; }
  51%, 100% { opacity: 0; }
}

.player-title.style-zero-day:hover {
  transform: translateY(-2px);
  color: #00ff00;
  text-shadow: 0 0 10px rgba(0, 255, 0, 1),
               0 0 25px rgba(0, 255, 0, 0.8),
               0 0 40px rgba(0, 200, 0, 0.5);
  box-shadow: 0 6px 25px rgba(0, 200, 0, 0.4),
              inset 0 0 50px rgba(0, 150, 0, 0.15);
}

/* ========================================
   稱號樣式 - black-box (黑盒觀測者)
   神秘AI監控感，深邃黑底，白色極簡數據流
======================================== */
.player-title.style-black-box {
  background: linear-gradient(180deg,
    rgba(8, 8, 12, 0.98) 0%,
    rgba(5, 5, 8, 0.99) 50%,
    rgba(8, 8, 12, 0.98) 100%);
  border: 1px solid rgba(150, 150, 170, 0.3);
  color: rgba(200, 200, 220, 0.9);
  text-shadow: 0 0 8px rgba(180, 180, 200, 0.6),
               0 0 20px rgba(150, 150, 180, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(80, 80, 100, 0.08),
              inset 0 0 40px rgba(0, 0, 0, 0.5);
  animation: blackBoxWatch 5s ease-in-out infinite;
  position: relative;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  overflow: hidden;
}

/* 微光掃描線 — 像在被觀測 */
.player-title.style-black-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 200, 220, 0.4) 40%,
    rgba(200, 200, 220, 0.6) 50%,
    rgba(200, 200, 220, 0.4) 60%,
    transparent 100%);
  animation: blackBoxScan 3s ease-in-out infinite;
  pointer-events: none;
}

/* 觀測之眼 */
.player-title.style-black-box::after {
  content: '◉';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: rgba(150, 150, 180, 0.3);
  animation: blackBoxEye 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes blackBoxWatch {
  0%, 100% {
    border-color: rgba(150, 150, 170, 0.3);
  }
  40%, 60% {
    border-color: rgba(180, 180, 200, 0.5);
  }
}

@keyframes blackBoxScan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 2px); opacity: 0; }
}

@keyframes blackBoxEye {
  0%, 40%, 60%, 100% {
    color: rgba(150, 150, 180, 0.3);
    text-shadow: none;
  }
  50% {
    color: rgba(200, 200, 255, 0.7);
    text-shadow: 0 0 8px rgba(200, 200, 255, 0.5);
  }
}

.player-title.style-black-box:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 200, 220, 0.5);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7),
              0 0 50px rgba(100, 100, 130, 0.12),
              inset 0 0 40px rgba(0, 0, 0, 0.5);
}

/* ========================================
   稱號樣式 - overclock (超頻覺醒)
   超頻過熱，橘紅漸變脈動，熱力警告感
======================================== */
.player-title.style-overclock {
  background: linear-gradient(135deg,
    rgba(40, 10, 0, 0.95) 0%,
    rgba(60, 15, 0, 0.9) 30%,
    rgba(80, 20, 0, 0.85) 50%,
    rgba(60, 15, 0, 0.9) 70%,
    rgba(40, 10, 0, 0.95) 100%);
  border: 2px solid rgba(255, 120, 0, 0.6);
  color: #ffaa33;
  text-shadow: 0 0 10px rgba(255, 150, 0, 1),
               0 0 20px rgba(255, 100, 0, 0.7),
               0 0 40px rgba(255, 50, 0, 0.4);
  box-shadow: 0 4px 20px rgba(255, 100, 0, 0.4),
              0 0 40px rgba(255, 50, 0, 0.2),
              inset 0 0 30px rgba(255, 80, 0, 0.1);
  animation: overclockHeat 2s ease-in-out infinite, overclockFlicker 0.08s infinite alternate;
  position: relative;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  overflow: hidden;
}

/* 過熱波紋 — 從底部往上的熱氣 */
.player-title.style-overclock::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,
    rgba(255, 60, 0, 0.15) 0%,
    rgba(255, 100, 0, 0.08) 30%,
    transparent 60%);
  animation: overclockHeatWave 1.5s ease-in-out infinite;
  pointer-events: none;
}

/* 溫度指示條 */
.player-title.style-overclock::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 200, 0, 0.8) 0%,
    rgba(255, 120, 0, 0.9) 50%,
    rgba(255, 30, 0, 1) 100%);
  border-radius: 1px;
  animation: overclockBar 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes overclockHeat {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 100, 0, 0.4),
                0 0 40px rgba(255, 50, 0, 0.2),
                inset 0 0 30px rgba(255, 80, 0, 0.1);
    border-color: rgba(255, 120, 0, 0.6);
  }
  50% {
    box-shadow: 0 6px 30px rgba(255, 60, 0, 0.6),
                0 0 60px rgba(255, 30, 0, 0.4),
                inset 0 0 40px rgba(255, 50, 0, 0.2);
    border-color: rgba(255, 60, 0, 0.9);
  }
}

@keyframes overclockFlicker {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.05); }
}

@keyframes overclockHeatWave {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes overclockBar {
  0%, 100% { width: 60%; opacity: 0.7; }
  50% { width: 85%; opacity: 1; }
}

.player-title.style-overclock:hover {
  transform: translateY(-2px);
  color: #ffcc00;
  text-shadow: 0 0 15px rgba(255, 200, 0, 1),
               0 0 30px rgba(255, 120, 0, 0.9),
               0 0 50px rgba(255, 50, 0, 0.7);
  filter: brightness(1.2);
}

/* ========================================
   稱號樣式 - sleepy-dream (再睡五分鐘)
   枕頭形圓角＋左側月亮搖晃＋右側 zzZ 浮動＋整體呼吸起伏
======================================== */
.player-title.style-sleepy-dream {
  background: linear-gradient(135deg,
    rgba(72, 61, 139, 0.4) 0%,
    rgba(106, 90, 205, 0.35) 50%,
    rgba(72, 61, 139, 0.4) 100%);
  border: 3px solid rgba(147, 112, 219, 0.5);
  color: #d8c8f8;
  text-shadow: 0 0 12px rgba(147, 112, 219, 0.9),
               0 0 25px rgba(106, 90, 205, 0.6),
               0 2px 5px rgba(30, 20, 80, 0.8);
  box-shadow: 0 4px 20px rgba(106, 90, 205, 0.4),
              0 0 40px rgba(147, 112, 219, 0.25),
              inset 0 0 20px rgba(72, 61, 139, 0.3);
  animation: sleepyBreath 4s ease-in-out infinite;
  position: relative;
  border-radius: 40px;
  padding: 10px 20px 10px 48px;
  overflow: visible;
}

.player-title.style-sleepy-dream::before {
  content: '🌙';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 8px rgba(147, 112, 219, 0.8));
  animation: sleepyMoonRock 3s ease-in-out infinite;
}

.player-title.style-sleepy-dream::after {
  content: 'ᶻᶻᶻ';
  position: absolute;
  right: 8px;
  top: -2px;
  font-size: 0.8em;
  color: rgba(200, 180, 255, 0.7);
  font-family: serif;
  letter-spacing: 1px;
  animation: sleepyZzz 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sleepyBreath {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(106, 90, 205, 0.4),
                0 0 40px rgba(147, 112, 219, 0.25),
                inset 0 0 20px rgba(72, 61, 139, 0.3);
    transform: scale(1);
    filter: brightness(0.9);
  }
  50% {
    box-shadow: 0 6px 30px rgba(106, 90, 205, 0.6),
                0 0 55px rgba(147, 112, 219, 0.4),
                inset 0 0 25px rgba(72, 61, 139, 0.4);
    transform: scale(1.02);
    filter: brightness(1.05);
  }
}

@keyframes sleepyMoonRock {
  0%, 100% { transform: translateY(-50%) rotate(-8deg); }
  50% { transform: translateY(-50%) rotate(8deg); }
}

@keyframes sleepyZzz {
  0% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-8px); }
  100% { opacity: 0.3; transform: translateY(0); }
}

.player-title.style-sleepy-dream:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 40px rgba(147, 112, 219, 0.7),
              0 0 70px rgba(106, 90, 205, 0.5);
  filter: brightness(1.1);
}

/* ========================================
   稱號樣式 - seen-no-reply (已讀不回)
   手機訊息氣泡造型＋左側雙藍勾＋打字中三點動畫
======================================== */
.player-title.style-seen-no-reply {
  background: linear-gradient(180deg,
    rgba(0, 90, 60, 0.5) 0%,
    rgba(0, 70, 50, 0.6) 100%);
  border: 2px solid rgba(37, 211, 102, 0.5);
  color: #d0f0e0;
  text-shadow: 0 0 10px rgba(37, 211, 102, 0.6),
               0 1px 3px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 20px rgba(0, 60, 40, 0.6),
              inset 0 0 15px rgba(37, 211, 102, 0.1);
  animation: seenPulse 4s ease-in-out infinite;
  position: relative;
  border-radius: 20px 20px 20px 5px;
  padding: 10px 50px 10px 42px;
  overflow: visible;
}

.player-title.style-seen-no-reply::before {
  content: '✓✓';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: rgba(52, 183, 241, 0.9);
  font-weight: 900;
  letter-spacing: -3px;
  filter: drop-shadow(0 0 6px rgba(52, 183, 241, 0.8));
  animation: seenCheckBlink 5s ease-in-out infinite;
}

.player-title.style-seen-no-reply::after {
  content: '...';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: rgba(150, 150, 150, 0.6);
  letter-spacing: 2px;
  animation: seenTyping 1.5s step-end infinite;
  pointer-events: none;
}

@keyframes seenPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 60, 40, 0.6),
                inset 0 0 15px rgba(37, 211, 102, 0.1);
  }
  50% {
    box-shadow: 0 5px 25px rgba(0, 60, 40, 0.7),
                inset 0 0 20px rgba(37, 211, 102, 0.15);
  }
}

@keyframes seenCheckBlink {
  0%, 80%, 100% { opacity: 0.9; }
  85% { opacity: 0.3; }
  90% { opacity: 0.9; }
}

@keyframes seenTyping {
  0% { content: '.'; }
  33% { content: '..'; }
  66% { content: '...'; }
}

.player-title.style-seen-no-reply:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 211, 102, 0.8);
  box-shadow: 0 8px 35px rgba(37, 211, 102, 0.4),
              0 0 50px rgba(0, 60, 40, 0.5);
}

/* ========================================
   稱號樣式 - error-404 (404 Not Found)
   終端機造型＋左側警告符號旋轉＋掃描線＋glitch 抖動
======================================== */
.player-title.style-error-404 {
  background: linear-gradient(180deg,
    rgba(20, 20, 20, 0.9) 0%,
    rgba(30, 10, 10, 0.85) 100%);
  border: 2px solid rgba(255, 50, 50, 0.6);
  border-left: 4px solid rgba(255, 50, 50, 0.8);
  color: #ff4444;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(255, 50, 50, 0.9),
               0 0 20px rgba(255, 0, 0, 0.6),
               2px 2px 0px rgba(0, 255, 255, 0.3),
               -2px -2px 0px rgba(255, 0, 255, 0.3);
  box-shadow: 0 4px 15px rgba(255, 50, 50, 0.4),
              0 0 30px rgba(255, 0, 0, 0.2),
              inset 0 0 30px rgba(255, 0, 0, 0.05);
  animation: error404Glitch 3s infinite;
  position: relative;
  border-radius: 3px;
  padding: 10px 20px 10px 42px;
  overflow: hidden;
}

.player-title.style-error-404::before {
  content: '⚠';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 8px rgba(255, 50, 50, 0.9));
  animation: error404Warn 2s ease-in-out infinite;
}

/* 掃描線效果 */
.player-title.style-error-404::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 50, 50, 0.4);
  animation: error404Scan 2s linear infinite;
  pointer-events: none;
}

@keyframes error404Glitch {
  0%, 92%, 100% {
    transform: translate(0);
    text-shadow: 0 0 10px rgba(255, 50, 50, 0.9),
                 0 0 20px rgba(255, 0, 0, 0.6),
                 2px 2px 0px rgba(0, 255, 255, 0.3),
                 -2px -2px 0px rgba(255, 0, 255, 0.3);
  }
  93% {
    transform: translate(-3px, 1px);
    text-shadow: 3px 0 rgba(0, 255, 255, 0.7), -3px 0 rgba(255, 0, 255, 0.7);
  }
  95% {
    transform: translate(2px, -1px);
    text-shadow: -2px 0 rgba(0, 255, 255, 0.7), 2px 0 rgba(255, 0, 255, 0.7);
  }
  97% {
    transform: translate(-1px, 2px);
    text-shadow: 1px 0 rgba(0, 255, 255, 0.7), -1px 0 rgba(255, 0, 255, 0.7);
  }
}

@keyframes error404Warn {
  0%, 100% { opacity: 0.9; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.4; transform: translateY(-50%) scale(0.9); }
}

@keyframes error404Scan {
  0% { top: -3px; }
  100% { top: 100%; }
}

.player-title.style-error-404:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 50, 50, 0.7),
              0 0 50px rgba(255, 0, 0, 0.4);
  animation: error404Glitch 0.5s infinite;
}

/* ========================================
   稱號樣式 - zhexiang (真香)
   碗的造型＋左側冒著蒸氣的碗＋溫暖橘紅漸層＋熱氣上飄
======================================== */
.player-title.style-zhexiang {
  background: linear-gradient(135deg,
    rgba(255, 160, 50, 0.45) 0%,
    rgba(255, 100, 20, 0.4) 50%,
    rgba(255, 160, 50, 0.45) 100%);
  border: 3px solid rgba(255, 140, 40, 0.6);
  color: #fff2d6;
  text-shadow: 0 0 12px rgba(255, 160, 50, 0.9),
               0 0 25px rgba(255, 120, 30, 0.6),
               0 2px 5px rgba(139, 60, 0, 0.7);
  box-shadow: 0 4px 20px rgba(255, 140, 40, 0.5),
              0 0 35px rgba(255, 100, 20, 0.3),
              inset 0 0 20px rgba(255, 180, 80, 0.15);
  animation: zhexiangWarm 3s ease-in-out infinite;
  position: relative;
  border-radius: 8px 8px 25px 25px;
  padding: 10px 20px 10px 48px;
  overflow: visible;
}

.player-title.style-zhexiang::before {
  content: '🍜';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 8px rgba(255, 160, 50, 0.8));
  animation: zhexiangBowlBob 2s ease-in-out infinite;
}

/* 熱氣上飄 */
.player-title.style-zhexiang::after {
  content: '~';
  position: absolute;
  left: 18px;
  top: -8px;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 900;
  animation: zhexiangSteam 2s ease-out infinite;
  pointer-events: none;
}

@keyframes zhexiangWarm {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 140, 40, 0.5),
                0 0 35px rgba(255, 100, 20, 0.3),
                inset 0 0 20px rgba(255, 180, 80, 0.15);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 8px 35px rgba(255, 140, 40, 0.8),
                0 0 55px rgba(255, 100, 20, 0.5),
                inset 0 0 25px rgba(255, 200, 100, 0.25);
    filter: brightness(1.15);
  }
}

@keyframes zhexiangBowlBob {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  25% { transform: translateY(-50%) rotate(-5deg); }
  75% { transform: translateY(-50%) rotate(5deg); }
}

@keyframes zhexiangSteam {
  0% { opacity: 0.5; transform: translateY(0) scaleX(1); }
  50% { opacity: 0.3; transform: translateY(-10px) scaleX(1.5); }
  100% { opacity: 0; transform: translateY(-18px) scaleX(2); }
}

.player-title.style-zhexiang:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.2);
  box-shadow: 0 10px 45px rgba(255, 140, 40, 0.9),
              0 0 70px rgba(255, 100, 20, 0.6);
}

/* ========================================
   稱號樣式 - monday-syndrome (週一症候群)
   灰暗壓抑＋左側鬧鐘抖動＋右側咖啡＋整體低飽和慢慢失去生命力
======================================== */
.player-title.style-monday-syndrome {
  background: linear-gradient(135deg,
    rgba(50, 50, 55, 0.8) 0%,
    rgba(40, 40, 45, 0.9) 50%,
    rgba(50, 50, 55, 0.8) 100%);
  border: 2px solid rgba(100, 100, 110, 0.5);
  color: #a0a0a8;
  text-shadow: 0 0 8px rgba(100, 100, 110, 0.5),
               0 2px 4px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6),
              inset 0 0 25px rgba(40, 40, 45, 0.5);
  animation: mondayDrain 5s ease-in-out infinite;
  position: relative;
  border-radius: 5px;
  padding: 10px 42px 10px 48px;
  overflow: visible;
  filter: saturate(0.6);
}

.player-title.style-monday-syndrome::before {
  content: '⏰';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  filter: saturate(0.3) drop-shadow(0 0 4px rgba(100, 100, 100, 0.5));
  animation: mondayAlarmShake 4s ease-in-out infinite;
}

.player-title.style-monday-syndrome::after {
  content: '☕';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  filter: saturate(0.3);
  opacity: 0.5;
  animation: mondayCoffeeSlump 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mondayDrain {
  0%, 100% {
    filter: saturate(0.6) brightness(0.85);
    transform: translateY(0);
  }
  50% {
    filter: saturate(0.4) brightness(0.75);
    transform: translateY(2px);
  }
}

@keyframes mondayAlarmShake {
  0%, 70%, 100% { transform: translateY(-50%) rotate(0deg); }
  72% { transform: translateY(-50%) rotate(-12deg); }
  74% { transform: translateY(-50%) rotate(12deg); }
  76% { transform: translateY(-50%) rotate(-10deg); }
  78% { transform: translateY(-50%) rotate(10deg); }
  80% { transform: translateY(-50%) rotate(-5deg); }
  82% { transform: translateY(-50%) rotate(0deg); }
}

@keyframes mondayCoffeeSlump {
  0%, 100% { transform: translateY(-50%) rotate(0deg); opacity: 0.5; }
  50% { transform: translateY(-45%) rotate(-15deg); opacity: 0.3; }
}

.player-title.style-monday-syndrome:hover {
  transform: translateY(-3px);
  filter: saturate(0.8) brightness(1);
  color: #c0c0c8;
  box-shadow: 0 8px 30px rgba(80, 80, 90, 0.5);
}

/* ========================================
   稱號樣式 - want-all (我全都要)
   貪婪抓取手勢＋多色搶奪閃光＋左右兩隻手抓抓抓
======================================== */
.player-title.style-want-all {
  background: linear-gradient(135deg,
    rgba(255, 215, 0, 0.4) 0%,
    rgba(255, 50, 50, 0.35) 25%,
    rgba(0, 200, 255, 0.35) 50%,
    rgba(50, 255, 50, 0.35) 75%,
    rgba(255, 215, 0, 0.4) 100%);
  background-size: 400% 100%;
  border: 3px solid rgba(255, 215, 0, 0.7);
  color: #fff8dc;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.9),
               0 0 25px rgba(255, 165, 0, 0.7),
               0 2px 5px rgba(180, 120, 0, 0.7);
  box-shadow: 0 4px 25px rgba(255, 215, 0, 0.5),
              0 0 40px rgba(255, 165, 0, 0.3),
              inset 0 0 20px rgba(255, 220, 100, 0.15);
  animation: wantAllShift 3s linear infinite, wantAllPulse 2s ease-in-out infinite;
  position: relative;
  border-radius: 15px;
  padding: 10px 48px 10px 48px;
  overflow: visible;
}

.player-title.style-want-all::before {
  content: '👋';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
  animation: wantAllGrabLeft 1.5s ease-in-out infinite;
}

.player-title.style-want-all::after {
  content: '✨';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9));
  animation: wantAllSparkle 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes wantAllShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes wantAllPulse {
  0%, 100% {
    box-shadow: 0 4px 25px rgba(255, 215, 0, 0.5),
                0 0 40px rgba(255, 165, 0, 0.3),
                inset 0 0 20px rgba(255, 220, 100, 0.15);
    border-color: rgba(255, 215, 0, 0.7);
  }
  50% {
    box-shadow: 0 8px 40px rgba(255, 215, 0, 0.9),
                0 0 60px rgba(255, 165, 0, 0.5),
                inset 0 0 25px rgba(255, 220, 100, 0.25);
    border-color: rgba(255, 235, 50, 1);
  }
}

@keyframes wantAllGrabLeft {
  0%, 100% { transform: translateY(-50%) rotate(0deg) scale(1); }
  25% { transform: translateY(-50%) rotate(15deg) scale(1.15); }
  50% { transform: translateY(-50%) rotate(0deg) scale(1); }
  75% { transform: translateY(-50%) rotate(-10deg) scale(1.1); }
}

@keyframes wantAllSparkle {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.8; }
  50% { transform: translateY(-50%) scale(1.3) rotate(15deg); opacity: 1; }
}

.player-title.style-want-all:hover {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.2);
  box-shadow: 0 12px 50px rgba(255, 215, 0, 1),
              0 0 80px rgba(255, 165, 0, 0.8);
}