/* 
   ==========================================================================
   DYNAMICS CSS - Điều hướng & Hiển thị nội dung khối bên phải
   ========================================================================== 
*/

/* --- Thanh Top Menu (Tầng 4a) --- */

.nav-menu {
    display: flex;
    width: 100%;
    /* Dàn kịch chiều ngang khung, xoá gap để flex 1 tự phân bổ tỷ lệ */
    height: 100%;
}

.nav-link {
    display: flex;
    flex: 1;
    /* Mỗi nút nhận diện tích ngăn sông cấm chợ đều nhau vắt ngang màn hình */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Căn giữa Center chữ của từng Block riêng rẽ */
    height: 100%;
    /* Bỏ viền gạch chân cứng nhắc, thay bằng ánh sáng tự liên kết mềm dẻo */
    white-space: nowrap;
    /* Định đoạt lệnh không bẻ từ */
    padding: 0;
    position: relative;
}

/* Vạch kẻ ảo ảnh phân cách ranh giới các Block Menu ngang */
.nav-link:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    /* Kéo dài vạch kẻ thêm một chút */
    bottom: 25%;
    width: 2px;
    /* Tăng độ dày lên gấp đôi để dễ nhìn hơn */
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.8), transparent);
    /* Tăng độ đậm của vàng kim ở vùng trung tâm */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    /* Tăng vòng hào quang để vạch thoát ảo ảnh mờ */
}

.nav-link .nav-title {
    font-family: var(--font-cinzel), 'Cormorant Garamond', 'Cinzel', serif;
    font-size: 16px;
    font-weight: 400;
    /* Font mỏng sắc nhọn */
    letter-spacing: 4px;
    /* Dãn khoảng cách chữ cái, tăng trang trọng */
    color: #e6dac3;
    /* Vàng lụa nhạt hoàng gia */
    text-transform: uppercase;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-link .nav-sub {
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-sans), 'Roboto', sans-serif;
    transition: color 0.3s ease;
}

.footer-bottom {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE TWEAKS 
   ========================================================================== */
@media screen and (max-width: 1200px) {

    /* Thu gọn Menu ở màn hình bé (Tablet, Điện thoại) */
    .nav-link {
        padding: 0 2px;
        /* Dành chỗ tối đa */
    }

    .nav-link .nav-title {
        font-size: 12px;
        /* Chữ nhỏ lại để tránh dính */
        letter-spacing: 1px;
        /* Rút gọn khoảng cách chữ cái */
    }

    .nav-link .nav-sub {
        font-size: 8px;
        /* Tối giản chú thích */
        letter-spacing: 0px;
    }
}

@media screen and (max-width: 768px) {

    /* Ép sát hơn nữa đối với Điện Thoại cực hẹp (iPhone) */
    .nav-link .nav-title {
        font-size: 11px;
        letter-spacing: 0px;
        white-space: normal;
        /* Cho phép xuống dòng nếu chữ quá dài */
        text-align: center;
        line-height: 1.2;
    }

    .nav-link .nav-sub {
        display: none;
        /* Ẩn hẳn dòng sub để tập trung vào chữ chính trên Mobile */
    }

    /* Thu nhỏ cột ngăn ở Mobile */
    .nav-link:not(:last-child)::after {
        top: 35%;
        bottom: 35%;
    }
}

/* Hover Menu */
.nav-link:hover .nav-title {
    color: var(--gold-bright);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    /* Sáng Glow ma mị */
}

/* Active State (Trang Ä‘ang xem) */
.nav-link.active .nav-title {
    color: var(--gold-bright);
    font-weight: 600;
    /* Nặng hơn đôi chút để làm nổi bật dòng đang xem */
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 5px rgba(212, 175, 55, 0.4);
}

.nav-link.active .nav-sub {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Khung Nội dung Đồng (Tầng 4b) --- */

/* Các Layout chuẩn cho Page Fragments sẽ load vào đây */

/* Grid News trên Home Page - Không dùng Card, để trần trên nền Kính Mờ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* Các bản tin sử dụng Kính mờ không viền sắc cạnh */
.news-card {
    display: flex;
    flex-direction: column;
    /* Layout thẻ đứng thay vì thẻ ngang */
    background: rgba(0, 0, 0, 0.85);
    /* Tăng độ đen một chút */
    /* Nền đen trong suốt dày để chữ nổi bật trên cánh cung Elf */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 5px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 8px 20px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* Bo góc mượt mà */
    cursor: pointer;
}

.news-card:hover {
    transform: translateY(-5px);
    /* Trồi lên khi hover thay vì đẩy ngang */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 15px 25px rgba(0, 0, 0, 0.9);
}

.news-img {
    width: 100%;
    /* Căng ngang toàn card */
    height: 160px;
    /* Ảnh to và rõ nét hơn */
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    /* Chỉ vàng chạy dưới viền ảnh */
    border-radius: 5px 5px 0 0;
    /* Bo 2 góc trên cùng ôm khít khung News Card */
    /* Không dùng viền sáng làm đứt đoạn dark fantasy */
}

.news-body {
    flex: 1;
    padding: 15px 20px 25px 20px;
    /* Tăng lề dưới và hông để mượt mắt hơn với khối dọc */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-title {
    font-size: 16px;
    margin-bottom: 5px;
    color: #fff;
}

.news-date {
    font-size: 11px;
    color: var(--gold-muted);
    margin-bottom: 15px;
}

.news-excerpt {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 15px;
    /* Giới hạn 4 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bảng xếp hạng bên dưới (Rankings) */
.rankings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.rank-card {
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    /* Phủ mờ để chia tách văn bản xếp hạng khỏi nhân vật phía sau */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 4px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.5);
}

.rank-title {
    font-family: var(--font-cinzel);
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rank-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(10, 10, 15, 0.6);
    /* Tối hơn 1 nấc trên lớp rank-card để dồn trọng tâm mắt thay vì bóng lưng Elf */
    border-radius: 2px;
}

.rank-item:nth-child(1) {
    border-left: 2px solid #FFD700;
}

.rank-item:nth-child(2) {
    border-left: 2px solid #C0C0C0;
}

/* ==========================================================================
   EVENT SUB-MENU TABS LOGIC
   ========================================================================== */
.event-tab-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--text-muted);
    padding: 12px 25px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
}

.event-tab-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold-bright);
    border-color: rgba(212, 175, 55, 0.6);
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.event-tab-btn.active {
    background: linear-gradient(to bottom, rgba(212, 175, 55, 0.25), transparent);
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Animation mượt mà khi switch Content Thẻ dọc */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.event-tab-content {
    animation: fadeInUp 0.4s ease forwards;
}

/* Khu vực danh sách Sự kiện 3 cột */
.event-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: stretch;
}

/* Khu vực danh sách Sự kiện tự động dàn đều (Flex Layout) */
.event-grid-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    align-items: stretch;
}

.event-grid-3>.event-card {
    flex: 1 1 calc(33.333% - 25px);
    /* Cơ bản chiếm 1/3 */
    max-width: 480px;
    /* Giới hạn để ko quá to nếu chỉ có 1 thẻ */
    min-width: 300px;
    /* Không cho rụt quá nhỏ */
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE TWEAKS CỦA RIÊNG EVENT GRID
   ========================================================================== */
@media screen and (max-width: 990px) {
    .event-grid-3>.event-card {
        flex: 1 1 calc(50% - 25px);
    }
}

@media screen and (max-width: 650px) {
    .event-grid-3>.event-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   CSS CHO MODULE ĐẾM NGƯỢC THỜI GIAN SỰ KIỆN (COUNTDOWN)
   ========================================================================== */
.event-countdown {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 12px;
}

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.status-badge.upcoming {
    background: #b8860b;
    color: #fff;
}

/* Sắp diễn ra - Vàng Sậm */
.status-badge.ending {
    background: #d35400;
    color: #fff;
}

/* Sắp kết thúc - Cam Đỏ cháy */
.status-badge.ongoing {
    background: #28a745;
    color: #fff;
}

/* Đang diễn ra - Xanh lá */
.status-badge.ended {
    background: #888;
    color: #fff;
}

/* Đã kết thúc - Xám bạc */

.time-remaining {
    font-size: 15px;
    color: #FFD700;
    font-family: var(--font-mono);
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.rank-item:nth-child(2) {
    border-left: 2px solid #C0C0C0;
}

.rank-item:nth-child(3) {
    border-left: 2px solid #CD7F32;
}

/* Các Rate Server dưới Ranking */
.rates-bar {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: var(--neon-green-bright);
}

/* Logo Game ở vị trí tiêu điểm giữa màn */
.server-logo {
    width: 450px;
    max-width: 80%;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.8));
    transition: transform 0.3s ease;
}

.server-logo:hover {
    transform: scale(1.05);
}

/* --- CẤU TRÚC: TRANG TIN TỨC & BÀI VIẾT (Articles Grid) --- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    padding: 10px;
}

.article-card {
    background: rgba(15, 15, 25, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
}

.ac-thumbnail {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid rgba(212, 175, 55, 0.5);
    position: relative;
    overflow: hidden;
}

/* Pseudo element tạo bóng mờ góc ảnh */
.ac-thumbnail::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(15, 15, 25, 1), transparent);
}

.ac-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(212, 175, 55, 0.9);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}

.ac-hot {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    animation: pulse-hot 2s infinite;
    z-index: 2;
}

@keyframes pulse-hot {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.ac-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ac-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    font-family: monospace;
}

.ac-title {
    font-size: 18px;
    font-weight: 700;
    color: #eee;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s;
}

.article-card:hover .ac-title {
    color: #D4AF37;
    /* Đổi vàng khi hover */
}

.ac-summary {
    font-size: 14px;
    color: #aaa;
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Giới hạn 3 dòng */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nút Chuyên Mục Filter */
.cat-filter-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

.cat-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cat-filter-btn.active {
    background: rgba(212, 175, 55, 0.2);
    border-color: #D4AF37;
    color: #D4AF37;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

/* Cấu Trúc Nội dung Bài Viết (.post-html-body) */
.post-html-body h2,
.post-html-body h3 {
    color: #D4AF37;
    margin-top: 25px;
    margin-bottom: 15px;
}

.post-html-body img {
    max-width: 100%;
    height: auto !important;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 15px 0;
}

.post-html-body a {
    color: #4CAF50;
    text-decoration: none;
}

.post-html-body a:hover {
    text-decoration: underline;
}

.post-html-body ul,
.post-html-body ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.post-html-body li {
    margin-bottom: 8px;
}

/* --- HiÇu èng Nút B¥m 
Ùng (Button Effects) --- */ @keyframes effect-pulse  {
         0%  {
         transform:  scale(1);
         
    }

         50%  {
         transform:  scale(1.05);
         
    }

         100%  {
         transform:  scale(1);
         
    }

     
}

 .btn-effect-pulse  {
         animation:  effect-pulse 2s infinite ease-in-out;
     
}

  @keyframes effect-shake  {

         0%,
     100%  {
         transform:  translateX(0);
         
    }

         10%,
     30%,
     50%,
     70%,
     90%  {
         transform:  translateX(-3px);
         
    }

         20%,
     40%,
     60%,
     80%  {
         transform:  translateX(3px);
         
    }

     
}

 .btn-effect-shake  {
         animation:  effect-shake 3s infinite;
     
}

  @keyframes effect-glow  {
         0%  {
         filter:  drop-shadow(0 0 5px rgba(212,  175,  55,  0.5));
         
    }

         50%  {
         filter:  drop-shadow(0 0 20px rgba(212,  175,  55,  1));
         
    }

         100%  {
         filter:  drop-shadow(0 0 5px rgba(212,  175,  55,  0.5));
         
    }

     
}

 .btn-effect-glow  {
         animation:  effect-glow 2s infinite;
     
}

  @keyframes effect-float  {
         0%  {
         transform:  translateY(0);
         
    }

         50%  {
         transform:  translateY(-8px);
         
    }

         100%  {
         transform:  translateY(0);
         
    }

     
}

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

   
/* --- Button Effects --- */
/* All effects use drop-shadow with --btn-effect-color so color picker works */

.btn-effect-pulse {
    animation: effect-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes effect-pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 16px var(--btn-effect-color, #D4AF37));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37));
    }
}

.btn-effect-shake {
    animation: effect-shake 2s infinite ease-in-out;
}

@keyframes effect-shake {

    0%,
    100% {
        transform: translateX(0);
        filter: drop-shadow(0 0 6px var(--btn-effect-color, #D4AF37));
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
        filter: drop-shadow(0 0 10px var(--btn-effect-color, #D4AF37));
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
        filter: drop-shadow(0 0 10px var(--btn-effect-color, #D4AF37));
    }
}

.btn-effect-glow {
    animation: effect-glow 2s infinite alternate ease-in-out;
}

@keyframes effect-glow {
    0% {
        filter: drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37));
    }

    100% {
        filter: drop-shadow(0 0 20px var(--btn-effect-color, #D4AF37));
    }
}

.btn-effect-float {
    animation: effect-float 2s infinite ease-in-out;
}

@keyframes effect-float {

    0%,
    100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37));
    }

    50% {
        transform: translateY(-10px);
        filter: drop-shadow(0 10px 12px var(--btn-effect-color, #D4AF37));
    }
}

.btn-effect-bounce {
    animation: effect-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes effect-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 6px var(--btn-effect-color, #D4AF37));
    }

    40% {
        transform: translateY(-15px);
        filter: drop-shadow(0 8px 14px var(--btn-effect-color, #D4AF37));
    }

    60% {
        transform: translateY(-7px);
        filter: drop-shadow(0 4px 10px var(--btn-effect-color, #D4AF37));
    }
}

.btn-effect-jelly {
    animation: effect-jelly 2s infinite;
}

@keyframes effect-jelly {

    0%,
    100% {
        transform: scale(1, 1);
        filter: drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37));
    }

    25% {
        transform: scale(1.05, 0.95);
        filter: drop-shadow(0 0 12px var(--btn-effect-color, #D4AF37));
    }

    50% {
        transform: scale(0.95, 1.05);
        filter: drop-shadow(0 0 8px var(--btn-effect-color, #D4AF37));
    }

    75% {
        transform: scale(1.05, 0.95);
        filter: drop-shadow(0 0 12px var(--btn-effect-color, #D4AF37));
    }
}

.btn-effect-flash {
    animation: effect-flash 2s infinite;
}

@keyframes effect-flash {

    0%,
    50%,
    100% {
        filter: drop-shadow(0 0 2px var(--btn-effect-color, #D4AF37));
    }

    25%,
    75% {
        filter: drop-shadow(0 0 18px var(--btn-effect-color, #D4AF37)) drop-shadow(0 0 6px var(--btn-effect-color, #D4AF37));
    }
}

/* === Color Effects (drop-shadow follows PNG shape) === */

.btn-color-rainbow {
    animation: color-rainbow 3s linear infinite;
}

@keyframes color-rainbow {
    0% {
        filter: drop-shadow(0 0 12px #ff0000) drop-shadow(0 0 4px #ff0000);
    }

    14% {
        filter: drop-shadow(0 0 12px #ff8800) drop-shadow(0 0 4px #ff8800);
    }

    28% {
        filter: drop-shadow(0 0 12px #ffff00) drop-shadow(0 0 4px #ffff00);
    }

    42% {
        filter: drop-shadow(0 0 12px #00ff00) drop-shadow(0 0 4px #00ff00);
    }

    57% {
        filter: drop-shadow(0 0 12px #00bbff) drop-shadow(0 0 4px #00bbff);
    }

    71% {
        filter: drop-shadow(0 0 12px #8800ff) drop-shadow(0 0 4px #8800ff);
    }

    85% {
        filter: drop-shadow(0 0 12px #ff00ff) drop-shadow(0 0 4px #ff00ff);
    }

    100% {
        filter: drop-shadow(0 0 12px #ff0000) drop-shadow(0 0 4px #ff0000);
    }
}

.btn-color-neon {
    animation: color-neon 3s ease-in-out infinite;
}

@keyframes color-neon {

    0%,
    100% {
        filter: drop-shadow(0 0 6px var(--btn-effect-color, #D4AF37)) drop-shadow(0 0 18px var(--btn-effect-color, #D4AF37));
    }

    33% {
        filter: drop-shadow(0 0 6px #ff00ff) drop-shadow(0 0 18px #ff00ff);
    }

    66% {
        filter: drop-shadow(0 0 6px #00ffff) drop-shadow(0 0 18px #00ffff);
    }
}

.btn-color-gradient-shift {
    animation: color-gradient-shift 3s ease infinite;
}

@keyframes color-gradient-shift {
    0% {
        filter: drop-shadow(0 0 10px var(--btn-effect-color, #D4AF37)) drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37));
    }

    25% {
        filter: drop-shadow(0 0 10px #ff6b6b) drop-shadow(0 0 4px #ff6b6b);
    }

    50% {
        filter: drop-shadow(0 0 10px #4ecdc4) drop-shadow(0 0 4px #4ecdc4);
    }

    75% {
        filter: drop-shadow(0 0 10px #45b7d1) drop-shadow(0 0 4px #45b7d1);
    }

    100% {
        filter: drop-shadow(0 0 10px var(--btn-effect-color, #D4AF37)) drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37));
    }
}

.btn-color-shadow-color {
    animation: color-shadow 3s ease-in-out infinite alternate;
}

@keyframes color-shadow {
    0% {
        filter: drop-shadow(0 0 4px var(--btn-effect-color, #D4AF37)) drop-shadow(0 0 8px var(--btn-effect-color, #D4AF37));
    }

    100% {
        filter: drop-shadow(0 0 12px var(--btn-effect-color, #D4AF37)) drop-shadow(0 0 25px var(--btn-effect-color, #D4AF37));
    }
}