/* static/css/points/level_effects.css */

/* ===== 粉絲等級框框效果 ===== */

/* 粉絲徽章基礎樣式 */
.fan-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    background: #f0f0f0;
    color: #666;
}

/* ===== 學徒 - 弟子 ===== */
.fan-badge[data-level="1"],
.fan-badge[data-level="2"] {
    background: linear-gradient(135deg, #8b5a2b, #6b4a2b);
    color: #f0e6d2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ===== 執事 - 舵主  ===== */
.fan-badge[data-level="3"],
.fan-badge[data-level="4"]{
    background: linear-gradient(135deg, #cd7f32, #ad6f22);
    color: #fff;
    box-shadow: 0 1px 3px rgba(205,127,50,0.3);
}


/* ===== 堂主 - 護法  ===== */
.fan-badge[data-level="6"],
.fan-badge[data-level="5"] {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #2c3e50;
    box-shadow: 0 1px 4px rgba(192,192,192,0.4);
    text-shadow: none;
}


/* ===== 長老 - 掌門 ===== */
.fan-badge[data-level="7"]{
    background: linear-gradient(135deg, #b8a170, #8e7b54);
    color: #2c3e50;
    box-shadow: 0 1px 4px rgba(184, 161, 112, 0.4);
    text-shadow: none;
}
.fan-badge[data-level="8"]{
    background: linear-gradient(135deg, #e60000, #8b0000);
    color: #2c3e50;
    box-shadow: 0 2px 6px rgba(230, 0, 0, 0.5);
    text-shadow: none;
}

/* ===== 宗師 - 盟主 ===== */
.fan-badge[data-level="9"]{
    background: linear-gradient(135deg, #aaddff 0%, #ffffff 50%, #88ccff 100%);
	color: #2c3e50;
	box-shadow: 0 4px 15px rgba(136, 204, 255, 0.6);
	font-weight: bold;
	animation: gentleGlow 2s ease-in-out infinite;
}

.fan-badge[data-level="10"] {
    background: linear-gradient(135deg, #e0e0e0, #ffffff, #b19cd9, #87ceeb, #e0e0e0);
    background-size: 200% 200%;
    color: #2c3e50; 
    font-weight: bold;
    text-shadow: 0 0 1px rgba(255,255,255,0.8);
    box-shadow: 0 2px 10px rgba(177, 156, 217, 0.4);
    animation: silverShine 3s linear infinite;
    position: relative;
}

.fan-badge[data-level="10"]::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #ffffff, #b19cd9, #87ceeb);
    background-size: 200% 200%;
    border-radius: 22px;
    z-index: -1;
    opacity: 0.6;
    animation: silverBorderGlow 3s linear infinite;
}

/* ===== 黃金盟主 - 金光閃閃 ===== */
.fan-badge[data-level="11"] {
   background: linear-gradient(135deg, #ffd700, #fff5b1, #ff8c00, #ffffff, #ffd700);
    background-size: 200% 200%;
    color: #5c4033; /* 深棕色字體，比純黑更像在黃金上鐫刻 */
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.5);
    animation: goldShine 3s linear infinite;
    position: relative;
}

/* 黃金盟主外框特效（加強） */
.fan-badge[data-level="11"]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: radial-gradient(circle, #ffd700, #ffaa00, #ffcc44);
    background-size: 200% 200%;
    border-radius: 24px;
    z-index: -2;
    opacity: 0.8;
    animation: goldBorderGlowStrong 0.8s ease-in-out infinite;
}

/* 黃金盟主內層光暈 */
.fan-badge[data-level="11"]::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-radius: 21px;
    z-index: -1;
    opacity: 0.5;
    animation: goldInnerGlow 0.8s ease-in-out infinite;
}

/* ===== 至尊盟主 - 七彩閃耀 ===== */
.fan-badge[data-level="12"] {
    background: linear-gradient(135deg, #ff0000, #ff00ff, #0000ff, #00ff00, #ffff00, #ff0000);
    background-size: 300% 300%;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 15px rgba(255,0,0,0.3);
    animation: rainbowShine 2s ease infinite, rainbowBorder 2s ease infinite;
    position: relative;
}

/* 至尊盟主外框特效 */
.fan-badge[data-level="12"]::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #ff0000, #ff00ff, #0000ff, #00ff00, #ffff00, #ff0000);
    background-size: 300% 300%;
    border-radius: 22px;
    z-index: -1;
    opacity: 0.8;
    animation: rainbowBorderGlow 2s ease infinite;
}

/* 粉絲值數字緊湊樣式 */
.fan-value {
    font-weight: bold;
    font-size: 11px;
    color: #dc3545;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 45px;
    text-align: right;
}

/* ===== 讀者等級樣式 ===== */

/* 讀者等級徽章基礎樣式 */
.reader-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* 讀者等級 - 初閱者 (1級) */
.reader-badge[data-level="1"] {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

/* 讀者等級 - 愛書人 (2級) */
.reader-badge[data-level="2"] {
    background: linear-gradient(135deg, #8b5a2b, #6b4a2b);
    color: #f0e6d2;
}

/* 讀者等級 - 藏書家 (3級) */
.reader-badge[data-level="3"] {
    background: linear-gradient(135deg, #cd7f32, #ad6f22);
    color: #fff;
    box-shadow: 0 1px 3px rgba(205,127,50,0.3);
}

/* 讀者等級 - 中堅書友 (4級) */
.reader-badge[data-level="4"] {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #2c3e50;
    box-shadow: 0 1px 4px rgba(192,192,192,0.4);
}

/* 讀者等級 - 資深書友 (5級) */
.reader-badge[data-level="5"] {
	background: linear-gradient(135deg, #20c997, #12b886);
    color: white;
    box-shadow: 0 2px 10px rgba(32,201,151,0.3);
    text-shadow: 0 0 2px rgba(0,0,0,0.2);
}

/* 讀者等級 - 黃金讀者 (6級) */
.reader-badge[data-level="6"] {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #2c3e50;
    box-shadow: 0 2px 10px rgba(255,215,0,0.4);
}

/* 讀者等級 - 鑽石讀者 (7級) - 使用鑽石圖片背景 */
.reader-badge[data-level="7"] {
    background: url('/media/background/DiamondReader.png') center/cover no-repeat;
    color: #1a2a3a;
    font-weight: bold;
    text-shadow: 0 0 2px rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(192,192,192,0.6), 0 0 8px rgba(255,255,255,0.5);
    animation: diamondGlow 1.5s ease-in-out infinite, diamondPulse 2s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: brightness(1.1);
}

/* 鑽石外框光暈 */
.reader-badge[data-level="7"]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(192,192,192,0.3), transparent);
    border-radius: 33px;
    z-index: -1;
    opacity: 0.6;
    animation: diamondRing 1.5s ease-in-out infinite;
}


/* 鑽石光暈動畫 */
@keyframes diamondGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(192,192,192,0.5), 0 0 5px rgba(255,255,255,0.6);
        text-shadow: 0 0 2px rgba(255,255,255,0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 15px rgba(135,206,235,0.7);
        text-shadow: 0 0 5px rgba(255,255,255,1);
    }
}

/* 鑽石脈動 */
@keyframes diamondPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* 鑽石外框 */
@keyframes diamondRing {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}



/* 讀者等級 - 傳奇讀者 (8級) - 使用圖片背景 + 神秘特效 */
.reader-badge[data-level="8"] {
    background: url('/media/background/LegendaryReader.png') center/cover no-repeat;
    color: #f0e6d2;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 3px rgba(128,0,128,0.8);
    box-shadow: 0 0 15px rgba(128,0,128,0.5), 0 0 25px rgba(75,0,130,0.3);
    animation: mysticGlow 2s ease-in-out infinite, mistFloat 3s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(255,215,0,0.5);
    backdrop-filter: brightness(1.05) contrast(1.1);
}

/* 神秘外圈光暈 */
.reader-badge[data-level="8"]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(128,0,128,0.5), rgba(75,0,130,0.3), transparent);
    border-radius: 34px;
    z-index: -2;
    opacity: 0.7;
    animation: mysticRing 2s ease-in-out infinite;
}



/* 額外神秘光點（使用多個偽元素實現） */
.reader-badge[data-level="8"] .mystic-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255,215,0,0.8), rgba(128,0,128,0.5));
    border-radius: 50%;
    animation: dotGlow 1.5s ease-in-out infinite;
}

/* 神秘光暈動畫 */
@keyframes mysticGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(128,0,128,0.4), 0 0 15px rgba(75,0,130,0.3);
        text-shadow: 0 0 3px rgba(0,0,0,0.5), 0 0 5px rgba(128,0,128,0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(138,43,226,0.7), 0 0 30px rgba(75,0,130,0.5);
        text-shadow: 0 0 5px rgba(0,0,0,0.6), 0 0 10px rgba(128,0,128,0.9);
    }
}

/* 神秘光環脈動 */
@keyframes mysticRing {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.08);
    }
}

/* 神秘漂浮效果 */
@keyframes mistFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* 符文漂浮 */
@keyframes runeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-4px) rotate(10deg);
        opacity: 1;
    }
}

/* 光點閃爍 */
@keyframes dotGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* 讀者等級 - 國際讀者 (9級) - 圖片背景 + 天藍色繁華特效 */
.reader-badge[data-level="9"] {
    background: url('/media/background/InternationalReader.png') center/cover no-repeat;
    color: #e8f0ff;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,0.4), 0 0 5px rgba(135,206,235,0.6);
    box-shadow: 0 0 15px rgba(135,206,235,0.5), 0 0 25px rgba(100,149,237,0.3);
    animation: skyGlow 2s ease-in-out infinite, subtleFloat 3s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(135,206,235,0.6);
    backdrop-filter: brightness(1.05);
}

/* 天藍色光暈外圈 */
.reader-badge[data-level="9"]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(135,206,235,0.5), rgba(100,149,237,0.3), rgba(135,206,235,0.1));
    border-radius: 34px;
    z-index: -2;
    opacity: 0.6;
    animation: skyRing 2s ease-in-out infinite;
}

/* 繁華光點效果（天藍色） */
.reader-badge[data-level="9"]::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: radial-gradient(circle at 20% 30%, rgba(135,206,235,0.4) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(100,149,237,0.4) 0%, transparent 30%),
                radial-gradient(circle at 50% 90%, rgba(135,206,235,0.3) 0%, transparent 40%),
                radial-gradient(circle at 10% 80%, rgba(100,149,237,0.3) 0%, transparent 40%),
                radial-gradient(circle at 90% 20%, rgba(135,206,235,0.3) 0%, transparent 40%);
    border-radius: 34px;
    z-index: -1;
    opacity: 0.5;
    animation: skySparkle 2s ease-in-out infinite;
    pointer-events: none;
}

/* 天藍色光暈動畫 */
@keyframes skyGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(135,206,235,0.4), 0 0 15px rgba(100,149,237,0.3);
        text-shadow: 0 0 2px rgba(0,0,0,0.4), 0 0 4px rgba(135,206,235,0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(135,206,235,0.7), 0 0 30px rgba(100,149,237,0.5);
        text-shadow: 0 0 4px rgba(0,0,0,0.5), 0 0 8px rgba(135,206,235,0.9);
    }
}

/* 天藍色光環脈動 */
@keyframes skyRing {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.06);
    }
}

/* 天藍色光點閃爍 */
@keyframes skySparkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

/* 輕微漂浮 */
@keyframes subtleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-1px);
    }
}

/* 讀者等級 - 書魔 (10級) - 圖片背景 + 紫色魔光特效 */
.reader-badge[data-level="10"] {
    background: url('/media/background/BookDemon.png') center/cover no-repeat;
    color: #f0e6ff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 8px rgba(128,0,128,0.8);
    box-shadow: 0 0 15px rgba(128,0,128,0.6), 0 0 25px rgba(75,0,130,0.4);
    animation: demonGlow 1.8s ease-in-out infinite, demonPulse 2s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(156,0,156,0.7);
    backdrop-filter: brightness(1.05) contrast(1.1);
}

/* 紫色魔光外圈 */
.reader-badge[data-level="10"]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(128,0,128,0.6), rgba(75,0,130,0.4), rgba(156,0,156,0.2));
    border-radius: 34px;
    z-index: -2;
    opacity: 0.7;
    animation: demonRing 1.8s ease-in-out infinite;
}

/* 魔光光點效果（紫色） */
.reader-badge[data-level="10"]::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: radial-gradient(circle at 25% 35%, rgba(128,0,128,0.5) 0%, transparent 30%),
                radial-gradient(circle at 75% 65%, rgba(156,0,156,0.5) 0%, transparent 30%),
                radial-gradient(circle at 45% 85%, rgba(128,0,128,0.4) 0%, transparent 40%),
                radial-gradient(circle at 15% 75%, rgba(156,0,156,0.4) 0%, transparent 40%),
                radial-gradient(circle at 85% 25%, rgba(128,0,128,0.4) 0%, transparent 40%);
    border-radius: 34px;
    z-index: -1;
    opacity: 0.6;
    animation: demonSparkle 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* 紫色魔光動畫 */
@keyframes demonGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(128,0,128,0.5), 0 0 20px rgba(75,0,130,0.4);
        text-shadow: 0 0 4px rgba(0,0,0,0.5), 0 0 6px rgba(128,0,128,0.7);
    }
    50% {
        box-shadow: 0 0 25px rgba(156,0,156,0.8), 0 0 35px rgba(128,0,128,0.6);
        text-shadow: 0 0 6px rgba(0,0,0,0.6), 0 0 12px rgba(156,0,156,1);
    }
}

/* 魔光脈動 */
@keyframes demonPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* 魔光光環 */
@keyframes demonRing {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.08);
    }
}

/* 魔光光點閃爍 */
@keyframes demonSparkle {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* 讀者等級 - 書神 (11級) - 圖片背景 + 耀眼金白色神光 */
.reader-badge[data-level="11"] {
    background: url('/media/background/BookGod.png') center/cover no-repeat;
    color: #fff9e6;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 15px rgba(255,215,0,0.8), 0 0 20px rgba(255,255,200,0.6);
    box-shadow: 0 0 20px rgba(255,215,0,0.7), 0 0 35px rgba(255,255,200,0.5), 0 0 50px rgba(255,215,0,0.3);
    animation: godGlow 1.5s ease-in-out infinite, godPulse 1.2s ease-in-out infinite;
    position: relative;
    border: 2px solid rgba(255,215,0,0.8);
    backdrop-filter: brightness(1.08) contrast(1.15);
    z-index: 1;
}

/* 神光外圈 - 多層光暈 */
.reader-badge[data-level="11"]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: radial-gradient(circle, rgba(255,215,0,0.7), rgba(255,255,200,0.5), rgba(255,215,0,0.3), transparent);
    border-radius: 36px;
    z-index: -2;
    opacity: 0.8;
    animation: godRing 1.2s ease-in-out infinite;
}

/* 第二層外圈 - 更耀眼 */
.reader-badge[data-level="11"] {
    box-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 50px rgba(255,255,200,0.6), 0 0 70px rgba(255,215,0,0.4);
}

/* 神光光點效果（金白色） */
.reader-badge[data-level="11"]::after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: radial-gradient(circle at 20% 25%, rgba(255,255,200,0.7) 0%, transparent 25%),
                radial-gradient(circle at 80% 75%, rgba(255,215,0,0.7) 0%, transparent 25%),
                radial-gradient(circle at 45% 15%, rgba(255,255,200,0.6) 0%, transparent 30%),
                radial-gradient(circle at 15% 80%, rgba(255,215,0,0.6) 0%, transparent 30%),
                radial-gradient(circle at 85% 35%, rgba(255,255,200,0.6) 0%, transparent 30%),
                radial-gradient(circle at 55% 90%, rgba(255,215,0,0.5) 0%, transparent 35%);
    border-radius: 34px;
    z-index: -1;
    opacity: 0.7;
    animation: godSparkle 1s ease-in-out infinite;
    pointer-events: none;
}

/* 神光核心光暈 */
@keyframes godGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255,215,0,0.6), 0 0 35px rgba(255,255,200,0.5), 0 0 50px rgba(255,215,0,0.3);
        text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 12px rgba(255,215,0,0.7), 0 0 18px rgba(255,255,200,0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(255,215,0,0.9), 0 0 55px rgba(255,255,200,0.8), 0 0 80px rgba(255,215,0,0.6);
        text-shadow: 0 0 8px rgba(0,0,0,0.6), 0 0 18px rgba(255,215,0,1), 0 0 25px rgba(255,255,200,0.9);
    }
}

/* 神光脈動 */
@keyframes godPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* 神光光環脈動 */
@keyframes godRing {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* 神光光點閃爍 */
@keyframes godSparkle {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* ===== 讀者等級動畫 ===== */

/* 鑽石閃爍 */
@keyframes diamondShine {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 2px 12px rgba(135,206,235,0.4);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 4px 20px rgba(135,206,235,0.8);
    }
}

/* 溫柔脈動 */
@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 15px rgba(102,126,234,0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 25px rgba(102,126,234,0.7);
    }
}

/* 魔法光暈 */
@keyframes magicGlow {
    0%, 100% {
        background-position: 0% 50%;
        text-shadow: 0 0 3px rgba(0,0,0,0.3);
    }
    50% {
        background-position: 100% 50%;
        text-shadow: 0 0 8px rgba(255,0,204,0.8);
    }
}

/* 七彩閃耀（書神專用） */
@keyframes rainbowShine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes rainbowBorderGlow {
    0%, 100% {
        opacity: 0.4;
        box-shadow: 0 0 5px #ff0000;
    }
    25% {
        opacity: 0.7;
        box-shadow: 0 0 10px #ff00ff;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 15px #0000ff;
    }
    75% {
        opacity: 0.7;
        box-shadow: 0 0 10px #00ff00;
    }
}

/* ===== 讀者卡片內等級顯示 ===== */
.reader-level-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
}

/* 讀者等級標籤樣式映射 */
.reader-level-badge.level-1 { background: linear-gradient(135deg, #6c757d, #495057); color: white; }
.reader-level-badge.level-2 { background: linear-gradient(135deg, #8b5a2b, #6b4a2b); color: #f0e6d2; }
.reader-level-badge.level-3 { background: linear-gradient(135deg, #cd7f32, #ad6f22); color: #fff; }
.reader-level-badge.level-4 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #2c3e50; }
.reader-level-badge.level-5 { background: linear-gradient(135deg, #ffc107, #ff9800); color: #2c3e50; }
.reader-level-badge.level-6 { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #2c3e50; }
.reader-level-badge.level-7 { background: linear-gradient(135deg, #e0e0e0, #b0b0b0, #87ceeb); background-size: 200% 200%; color: #2c3e50; animation: diamondShine 3s ease infinite; }
.reader-level-badge.level-8 { background: linear-gradient(135deg, #ff6b6b, #ff4757); color: white; animation: gentlePulse 2s ease-in-out infinite; }
.reader-level-badge.level-9 { background: linear-gradient(135deg, #667eea, #764ba2); color: white; animation: gentlePulse 2s ease-in-out infinite; }
.reader-level-badge.level-10 { background: linear-gradient(135deg, #ff00cc, #333399); background-size: 200% 200%; color: white; animation: magicGlow 2s ease infinite; }
.reader-level-badge.level-11 { background: linear-gradient(135deg, #ff0000, #ff00ff, #0000ff, #00ff00, #ffff00, #ff0000); background-size: 400% 400%; color: white; animation: rainbowShine 2s ease infinite; position: relative; }

/* 讀者等級標籤的動畫（與粉絲榜共用） */
@keyframes diamondShine {
    0%, 100% { background-position: 0% 50%; box-shadow: 0 2px 12px rgba(135,206,235,0.4); }
    50% { background-position: 100% 50%; box-shadow: 0 4px 20px rgba(135,206,235,0.8); }
}

@keyframes gentlePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 15px rgba(102,126,234,0.4); }
    50% { transform: scale(1.02); box-shadow: 0 4px 25px rgba(102,126,234,0.7); }
}

@keyframes magicGlow {
    0%, 100% { background-position: 0% 50%; text-shadow: 0 0 3px rgba(0,0,0,0.3); }
    50% { background-position: 100% 50%; text-shadow: 0 0 8px rgba(255,0,204,0.8); }
}

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

/* ===== 動畫定義 ===== */

/* 溫和發光 */
@keyframes gentleGlow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(255,215,0,0.3);
    }
    50% {
        box-shadow: 0 4px 15px rgba(255,215,0,0.7);
    }
}

/* ===== 銀色動畫 ===== */
@keyframes silverShine {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 2px 10px rgba(177, 156, 217, 0.4);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 4px 20px rgba(177, 156, 217, 0.8);
    }
}

@keyframes silverGlow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(136, 204, 255, 0.4);
    }
    50% {
        box-shadow: 0 4px 15px rgba(136, 204, 255, 0.8);
    }
}

@keyframes silverBorderGlow {
    0%, 100% {
        opacity: 0.4;
        box-shadow: 0 0 5px #b19cd9;
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 12px #87ceeb;
    }
}

@keyframes silverBorder {
    0%, 100% {
        border-color: #b19cd9;
    }
    50% {
        border-color: #87ceeb;
    }
}

/* ===== 金色動畫 ===== */
@keyframes goldShine {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.3);
        text-shadow: 0 0 2px #ffd700;
    }
    25% {
        box-shadow: 0 0 18px rgba(255,215,0,0.9), 0 0 30px rgba(255,215,0,0.5);
        text-shadow: 0 0 5px #ffd700, 0 0 8px #ffaa00;
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 25px #ffd700, 0 0 40px rgba(255,215,0,0.7);
        text-shadow: 0 0 8px #ffd700, 0 0 12px #ffaa00;
    }
    75% {
        box-shadow: 0 0 18px rgba(255,215,0,0.9), 0 0 30px rgba(255,215,0,0.5);
        text-shadow: 0 0 5px #ffd700, 0 0 8px #ffaa00;
    }
}

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

@keyframes goldBorderGlowStrong {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 5px #ffd700, 0 0 10px #ffaa00;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 15px #ffd700, 0 0 25px #ffaa00, 0 0 35px #ffcc44;
    }
}

@keyframes goldInnerGlow {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* 七彩閃耀 */
@keyframes rainbowShine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 七彩外框 */
@keyframes rainbowBorderGlow {
    0% {
        opacity: 0.5;
        box-shadow: 0 0 5px #ff0000;
    }
    25% {
        opacity: 0.8;
        box-shadow: 0 0 10px #ff00ff;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 15px #0000ff;
    }
    75% {
        opacity: 0.8;
        box-shadow: 0 0 10px #00ff00;
    }
    100% {
        opacity: 0.5;
        box-shadow: 0 0 5px #ffff00;
    }
}

/* 金色邊框 */
@keyframes goldBorder {
    0%, 100% {
        border-color: #ffd700;
    }
    50% {
        border-color: #ffaa00;
    }
}

/* 七彩邊框 */
@keyframes rainbowBorder {
    0% {
        border-color: #ff0000;
    }
    20% {
        border-color: #ff00ff;
    }
    40% {
        border-color: #0000ff;
    }
    60% {
        border-color: #00ff00;
    }
    80% {
        border-color: #ffff00;
    }
    100% {
        border-color: #ff0000;
    }
}

/* ===== 作者等級樣式 ===== */

/* 作者等級徽章基礎樣式 */
.author-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* 作者等級 - 初級作者 (1級) */
.author-badge[data-level="1"] {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

/* 作者等級 - 潛力新人 (2級) */
.author-badge[data-level="2"] {
    background: linear-gradient(135deg, #8b5a2b, #6b4a2b);
    color: #f0e6d2;
}

/* 作者等級 - 中堅作家 (3級) */
.author-badge[data-level="3"] {
    background: linear-gradient(135deg, #cd7f32, #ad6f22);
    color: #fff;
    box-shadow: 0 1px 3px rgba(205,127,50,0.3);
}

/* 作者等級 - 暢銷作家 (4級) */
.author-badge[data-level="4"] {
    background: linear-gradient(135deg, #3a86ff, #2c6ecc);
    color: white;
    box-shadow: none;
}

/* 作者等級 - 平台明星 (5級) */
.author-badge[data-level="5"] {
    background: linear-gradient(135deg, #ff99cc, #ff66b5);
    color: white;
    box-shadow: 0 2px 12px rgba(255,102,181,0.4);
    text-shadow: 0 0 2px rgba(0,0,0,0.2);
    animation: peachGlow 2s ease-in-out infinite;
}

/* 桃色光暈動畫 */
@keyframes peachGlow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(255,102,181,0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255,102,181,0.7);
    }
}

/* 作者等級 - 白金作家 (6級) - 白金色 */
.author-badge[data-level="6"] {
    background: linear-gradient(135deg, #e8e8e8, #c0c0c0, #e0e0e0);
    background-size: 200% 200%;
    color: #2c3e50;
    font-weight: bold;
    text-shadow: 0 0 2px rgba(255,255,255,0.8);
    box-shadow: 0 2px 15px rgba(192,192,192,0.5), 0 0 8px rgba(255,255,255,0.6);
    animation: platinumShine 2s ease-in-out infinite, platinumPulse 2s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
}

/* 白金光暈外圈 */
.author-badge[data-level="6"]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(192,192,192,0.4), transparent);
    border-radius: 33px;
    z-index: -1;
    opacity: 0.5;
    animation: platinumRing 1.5s ease-in-out infinite;
}

/* 白金光暈動畫 */
@keyframes platinumShine {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 2px 12px rgba(192,192,192,0.4), 0 0 10px rgba(255,255,255,0.5);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 4px 20px rgba(255,255,255,0.8), 0 0 18px rgba(192,192,192,0.7);
    }
}

/* 白金脈動 */
@keyframes platinumPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* 白金外框 */
@keyframes platinumRing {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* 作者等級 - 大神作者 (7級) - 金色 */
.author-badge[data-level="7"] {
    background: linear-gradient(135deg, #ffd700, #ffaa00, #ffcc44, #ffaa00, #ffd700);
    background-size: 300% 300%;
    color: #2c1e00;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255,215,0,0.8), 0 0 8px rgba(255,255,200,0.6);
    box-shadow: 0 0 15px rgba(255,215,0,0.6), 0 0 20px rgba(255,215,0,0.4);
    animation: authorGoldShine 1s ease-in-out infinite, authorGoldPulse 1.2s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(255,215,0,0.8);
}

/* 金色外圈光暈 */
.author-badge[data-level="7"]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: radial-gradient(circle, rgba(255,215,0,0.6), rgba(255,200,0,0.3), transparent);
    border-radius: 33px;
    z-index: -1;
    opacity: 0.7;
    animation: authorGoldRing 1s ease-in-out infinite;
}

/* 金色光暈動畫（更強） */
@keyframes authorGoldShine {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 0 12px rgba(255,215,0,0.5), 0 0 18px rgba(255,215,0,0.3);
        text-shadow: 0 0 3px rgba(255,215,0,0.6);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 25px #ffd700, 0 0 35px rgba(255,215,0,0.8);
        text-shadow: 0 0 8px #ffd700, 0 0 12px #ffaa00;
    }
}

/* 金色脈動 */
@keyframes authorGoldPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* 金色外圈脈動 */
@keyframes authorGoldRing {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}
/* 作者等級 - 傳奇作者 (8級) */
.author-badge[data-level="8"] {
    background: url('/media/background/LegendaryReader.png') center/cover no-repeat;
    color: #f0e6d2;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 3px rgba(128,0,128,0.8);
    box-shadow: 0 0 15px rgba(128,0,128,0.5), 0 0 25px rgba(75,0,130,0.3);
    animation: mysticGlow 2s ease-in-out infinite, mistFloat 3s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(255,215,0,0.5);
    backdrop-filter: brightness(1.05) contrast(1.1);
}

/* 神秘外圈光暈 */
.author-badge[data-level="8"]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(128,0,128,0.5), rgba(75,0,130,0.3), transparent);
    border-radius: 34px;
    z-index: -2;
    opacity: 0.7;
    animation: mysticRing 2s ease-in-out infinite;
}


/* 作者等級 - 國寶作者 (9級) */
/* 作者等級 - 國寶作者 (9級) - 圖片背景 + 寶光特效 */
.author-badge[data-level="9"] {
    background: url('/media/background/NationalTreasure.png') center/cover no-repeat;
    color: #f5e6d3;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 8px rgba(255,215,0,0.6);
    box-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 30px rgba(255,140,0,0.3);
    animation: treasureGlow 2s ease-in-out infinite, treasureFloat 3s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(255,215,0,0.7);
    backdrop-filter: brightness(1.05);
}

/* 寶光外圈 */
.author-badge[data-level="9"]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(255,215,0,0.5), rgba(255,140,0,0.3), rgba(255,215,0,0.1));
    border-radius: 34px;
    z-index: -2;
    opacity: 0.6;
    animation: treasureRing 2s ease-in-out infinite;
}

/* 寶光光點效果 */
.author-badge[data-level="9"]::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: radial-gradient(circle at 20% 30%, rgba(255,215,0,0.4) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(255,140,0,0.4) 0%, transparent 30%),
                radial-gradient(circle at 45% 85%, rgba(255,215,0,0.3) 0%, transparent 40%),
                radial-gradient(circle at 15% 75%, rgba(255,140,0,0.3) 0%, transparent 40%),
                radial-gradient(circle at 85% 25%, rgba(255,215,0,0.3) 0%, transparent 40%);
    border-radius: 34px;
    z-index: -1;
    opacity: 0.5;
    animation: treasureSparkle 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* 寶光動畫 */
@keyframes treasureGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255,215,0,0.4), 0 0 20px rgba(255,140,0,0.3);
        text-shadow: 0 0 3px rgba(0,0,0,0.5), 0 0 6px rgba(255,215,0,0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(255,215,0,0.8), 0 0 35px rgba(255,140,0,0.6);
        text-shadow: 0 0 5px rgba(0,0,0,0.6), 0 0 10px rgba(255,215,0,0.9);
    }
}

/* 寶光光環 */
@keyframes treasureRing {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.06);
    }
}

/* 寶光光點閃爍 */
@keyframes treasureSparkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

/* 輕微漂浮 */
@keyframes treasureFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-1px);
    }
}

/* 作者等級 - 神話作者 (10級) - 圖片背景 + 天藍光特效 */
.author-badge[data-level="10"] {
    background: url('/media/background/MythicalAuthor.png') center/cover no-repeat;
    color: #e8f0ff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.4), 0 0 8px rgba(135,206,235,0.8);
    box-shadow: 0 0 20px rgba(135,206,235,0.6), 0 0 30px rgba(100,149,237,0.4);
    animation: mythicalSkyGlow 2s ease-in-out infinite, mythicalFloat 3s ease-in-out infinite;
    position: relative;
    border: 1px solid rgba(135,206,235,0.7);
    backdrop-filter: brightness(1.05);
}

/* 天藍光暈外圈 */
.author-badge[data-level="10"]::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(135,206,235,0.6), rgba(100,149,237,0.4), rgba(135,206,235,0.2));
    border-radius: 34px;
    z-index: -2;
    opacity: 0.6;
    animation: mythicalSkyRing 2s ease-in-out infinite;
}

/* 天藍光點效果 */
.author-badge[data-level="10"]::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: radial-gradient(circle at 20% 30%, rgba(135,206,235,0.5) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(100,149,237,0.5) 0%, transparent 30%),
                radial-gradient(circle at 45% 85%, rgba(135,206,235,0.4) 0%, transparent 40%),
                radial-gradient(circle at 15% 75%, rgba(100,149,237,0.4) 0%, transparent 40%),
                radial-gradient(circle at 85% 25%, rgba(135,206,235,0.4) 0%, transparent 40%);
    border-radius: 34px;
    z-index: -1;
    opacity: 0.5;
    animation: mythicalSkySparkle 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* 天藍光動畫 */
@keyframes mythicalSkyGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(135,206,235,0.5), 0 0 25px rgba(100,149,237,0.4);
        text-shadow: 0 0 4px rgba(0,0,0,0.4), 0 0 8px rgba(135,206,235,0.7);
    }
    50% {
        box-shadow: 0 0 30px rgba(135,206,235,0.9), 0 0 45px rgba(100,149,237,0.7);
        text-shadow: 0 0 6px rgba(0,0,0,0.5), 0 0 12px rgba(135,206,235,1);
    }
}

/* 天藍光光環 */
@keyframes mythicalSkyRing {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.08);
    }
}

/* 天藍光點閃爍 */
@keyframes mythicalSkySparkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

/* 輕微漂浮 */
@keyframes mythicalFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* 作者等級 - 絕對神 (11級) - 圖片背景 + 七彩光芒特效 */
.author-badge[data-level="11"] {
    background: url('/media/background/AbsoluteGod.png') center/cover no-repeat;
    color: #fff9e6;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0,0,0,0.6), 0 0 15px rgba(255,255,255,0.8), 0 0 20px rgba(255,215,0,0.6);
    box-shadow: 0 0 25px rgba(255,0,0,0.4), 0 0 35px rgba(255,0,255,0.3), 0 0 45px rgba(0,0,255,0.2);
    animation: absoluteGodGlow 2s ease-in-out infinite, absoluteGodFloat 3s ease-in-out infinite;
    position: relative;
    border: 2px solid rgba(255,255,255,0.6);
    backdrop-filter: brightness(1.08) contrast(1.12);
    z-index: 1;
}

/* 七彩光暈外圈 - 多層彩色光 */
.author-badge[data-level="11"]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: radial-gradient(circle, rgba(255,0,0,0.5), rgba(255,0,255,0.4), rgba(0,0,255,0.3), rgba(0,255,0,0.2), rgba(255,255,0,0.2));
    border-radius: 38px;
    z-index: -2;
    opacity: 0.7;
    animation: absoluteGodRing 1.8s ease-in-out infinite;
}

/* 七彩光點效果 */
.author-badge[data-level="11"]::after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: radial-gradient(circle at 15% 25%, rgba(255,0,0,0.6) 0%, transparent 25%),
                radial-gradient(circle at 85% 75%, rgba(255,0,255,0.6) 0%, transparent 25%),
                radial-gradient(circle at 45% 15%, rgba(0,0,255,0.5) 0%, transparent 30%),
                radial-gradient(circle at 20% 80%, rgba(0,255,0,0.5) 0%, transparent 30%),
                radial-gradient(circle at 80% 35%, rgba(255,255,0,0.5) 0%, transparent 30%),
                radial-gradient(circle at 55% 90%, rgba(255,0,0,0.4) 0%, transparent 35%);
    border-radius: 36px;
    z-index: -1;
    opacity: 0.6;
    animation: absoluteGodSparkle 1.2s ease-in-out infinite;
    pointer-events: none;
}

/* 七彩光芒動畫 */
@keyframes absoluteGodGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255,0,0,0.5), 0 0 30px rgba(255,0,255,0.4), 0 0 40px rgba(0,0,255,0.3);
        text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 10px rgba(255,255,255,0.6), 0 0 15px rgba(255,215,0,0.5);
    }
    25% {
        box-shadow: 0 0 25px rgba(255,0,255,0.6), 0 0 35px rgba(0,0,255,0.5), 0 0 45px rgba(0,255,0,0.4);
        text-shadow: 0 0 6px rgba(0,0,0,0.6), 0 0 12px rgba(255,255,255,0.8), 0 0 18px rgba(255,215,0,0.7);
    }
    50% {
        box-shadow: 0 0 35px rgba(0,0,255,0.7), 0 0 45px rgba(0,255,0,0.6), 0 0 55px rgba(255,255,0,0.5);
        text-shadow: 0 0 8px rgba(0,0,0,0.7), 0 0 15px rgba(255,255,255,1), 0 0 22px rgba(255,215,0,0.9);
    }
    75% {
        box-shadow: 0 0 25px rgba(0,255,0,0.6), 0 0 35px rgba(255,255,0,0.5), 0 0 45px rgba(255,0,0,0.4);
        text-shadow: 0 0 6px rgba(0,0,0,0.6), 0 0 12px rgba(255,255,255,0.8), 0 0 18px rgba(255,215,0,0.7);
    }
}

/* 七彩光環脈動 */
@keyframes absoluteGodRing {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

/* 七彩光點閃爍 */
@keyframes absoluteGodSparkle {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.9;
    }
}

/* 神聖漂浮 */
@keyframes absoluteGodFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* 作者等級動畫 */
@keyframes authorGoldGlow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(255,215,0,0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255,215,0,0.8);
    }
}

@keyframes authorDiamondShine {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 2px 12px rgba(135,206,235,0.4);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 4px 20px rgba(135,206,235,0.8);
    }
}

@keyframes authorLegendPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 15px rgba(102,126,234,0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 25px rgba(102,126,234,0.7);
    }
}

@keyframes authorMythicGlow {
    0%, 100% {
        background-position: 0% 50%;
        text-shadow: 0 0 3px rgba(0,0,0,0.3);
    }
    50% {
        background-position: 100% 50%;
        text-shadow: 0 0 8px rgba(255,0,204,0.8);
    }
}

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

@keyframes authorRainbowBorder {
    0%, 100% {
        opacity: 0.4;
        box-shadow: 0 0 5px #ff0000;
    }
    25% {
        opacity: 0.7;
        box-shadow: 0 0 10px #ff00ff;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 15px #0000ff;
    }
    75% {
        opacity: 0.7;
        box-shadow: 0 0 10px #00ff00;
    }
}

/* ===== 排名前三特效 ===== */
.fan-rank-item.rank-1 .fan-name {
    font-weight: bold;
    position: relative;
}



/* 響應式調整 */
@media (max-width: 768px) {
    .fan-badge {
        padding: 2px 6px;
        font-size: 9px;
    }
    
    .fan-rank-item.rank-1 .fan-name::before,
    .fan-rank-item.rank-2 .fan-name::before,
    .fan-rank-item.rank-3 .fan-name::before {
        left: -14px;
        font-size: 10px;
    }
}