/* Base Styles */
:where([class^="ri-"])::before {
    content: "\f3c2";
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.dice-pattern {
    background-image: url("assets/One more game 4.png");
    background-color: white;
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
    background-attachment: fixed;
    position: relative;
}

.dark .dice-pattern {
    background-image: url("assets/One more game 4.png");
    background-color: black;
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
    background-attachment: fixed;
    opacity: 0.95;
}

.dark .dice-pattern::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgb(3 1 0 / 51%), rgb(0 0 0));
    pointer-events: none;
    z-index: -1;
}



/* ===== SECTION DIVIDERS ===== */

/* Simple section divider */
.section-divider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px 0;
    height: 2px;
}

.section-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 51, 0, 0.4), rgba(255, 158, 0, 0.4), rgba(255, 51, 0, 0.4), transparent);
    opacity: 0.7;
}

.dark .section-divider::before {
    background: linear-gradient(90deg, transparent, rgba(255, 51, 0, 0.6), rgba(255, 158, 0, 0.6), rgba(255, 51, 0, 0.6), transparent);
}

@media (max-width: 768px) {
    .section-divider {
        margin: 40px 0;
    }
}

/* ===== HERO SECTION ===== */
.hero-section {
    /* min-height: 100vh; */
    position: relative;
}

.hero-section h1 {
    color: #000000 !important;
}

.hero-section h2 {
    color: #000000 !important;
}

.dark .hero-section h1 {
    color: #ffffff !important;
}

.dark .hero-section h2 {
    color: #d1d5db !important;
}

.logo-container img {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.gradient-text {
    background-size: 200% 200%;
    animation: gradientShift 3s ease-in-out infinite;
}

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

/* Section Headings */
.leaderboard-section h2,
.blog-section h2 {
    color: #000000 !important;
}

.leaderboard-section > div > div:nth-child(1) > p,
.blog-section > div > div:nth-child(1) > p {
    color: #4b5563 !important;
}

.dark .leaderboard-section h2,
.dark .blog-section h2 {
    color: #ffffff !important;
}

.dark .leaderboard-section > div > div:nth-child(1) > p,
.dark .blog-section > div > div:nth-child(1) > p {
    color: #d1d5db !important;
}

/* ===== HERO ACTION BUTTONS ===== */
.hero-action-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #FF3300, #FF9E00);
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 51, 0, 0.3);
    border: 2px solid transparent;
}

.hero-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(255, 51, 0, 0.4);
    gap: 14px;
}

.hero-cta-btn i {
    font-size: 20px;
}

.hero-cta-secondary {
    background: transparent;
    border: 2px solid #FF3300;
    color: #FF3300;
    box-shadow: none;
}

.dark .hero-cta-secondary {
    border-color: #FF9E00;
    color: white;
}

.hero-cta-secondary:hover {
    background: rgba(255, 51, 0, 0.1);
    box-shadow: 0 8px 20px rgba(255, 51, 0, 0.2);
}

.dark .hero-cta-secondary:hover {
    background: rgba(255, 158, 0, 0.1);
    box-shadow: 0 8px 20px rgba(255, 158, 0, 0.2);
}

@media (max-width: 768px) {
    .hero-action-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hero-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
    }
}

/* ===== MEDIA GALLERY ===== */
.media-gallery-desktop,
.media-gallery-mobile {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 3 / 2;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    background: white;
}
/* Desktop gallery - larger size */
@media (min-width: 1024px) {
    .media-gallery-desktop {
        max-width: 900px;
        aspect-ratio: 3 / 2;
    }
}

.media-gallery-mobile {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 16px;
}

.dark .media-gallery-desktop,
.dark .media-gallery-mobile {
    box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);
}

.gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-slide.active {
    opacity: 1;
    z-index: 1;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 24px;
    color: #000;
}

.dark .gallery-nav {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
}

.gallery-nav:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.gallery-prev {
    left: 16px;
}

.gallery-next {
    right: 16px;
}

.gallery-dots-desktop {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-dot.active {
    background: #FF3300;
    width: 30px;
    border-radius: 5px;
}

.dark .gallery-dot {
    background: rgba(255, 255, 255, 0.3);
}

.dark .gallery-dot.active {
    background: #FF9E00;
}

/* Mobile Gallery Controls */
.gallery-controls-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.gallery-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
    color: #000;
}

.dark .gallery-btn {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
}

.gallery-btn:hover {
    transform: scale(1.1);
}

#galleryDotsMobile {
    display: flex;
    gap: 6px;
}

/* ===== LEADERBOARD SECTION ===== */
.leaderboard-section {
    background: transparent;
    position: relative;
}

.leaderboard-section > .container {
    position: relative;
}

.leaderboard-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Podium Cards */
.podium-container {
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 40px;
}

.podium-card {
    background: white;
    border-radius: 24px;
    padding: 28px 20px;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.podium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

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

.dark .podium-card {
    background: rgba(17, 24, 39, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.podium-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.dark .podium-card:hover {
    box-shadow: 0 20px 60px rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.podium-first {
    background: linear-gradient(135deg, #fff9e6, #ffffff);
    border: 2px solid rgba(255, 215, 0, 0.3);
    padding: 36px 20px;
    order: 2;
}

.podium-first::before {
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.dark .podium-first {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(17, 24, 39, 0.9));
    border-color: rgba(255, 215, 0, 0.4);
}

.podium-second {
    background: linear-gradient(135deg, #f5f5f5, #ffffff);
    border: 2px solid rgba(192, 192, 192, 0.3);
    order: 1;
}

.podium-second::before {
    background: linear-gradient(90deg, transparent, #C0C0C0, transparent);
}

.dark .podium-second {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(17, 24, 39, 0.9));
    border-color: rgba(192, 192, 192, 0.4);
}

.podium-third {
    background: linear-gradient(135deg, #faf5f0, #ffffff);
    border: 2px solid rgba(205, 127, 50, 0.3);
    order: 3;
}

.podium-third::before {
    background: linear-gradient(90deg, transparent, #CD7F32, transparent);
}

.dark .podium-third {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(17, 24, 39, 0.9));
    border-color: rgba(205, 127, 50, 0.4);
}

.rank-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    color: #6b7280;
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.dark .rank-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.podium-first .rank-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #111827;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.podium-second .rank-badge {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    color: #111827;
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
}

.podium-third .rank-badge {
    background: linear-gradient(135deg, #CD7F32, #B87333);
    color: white;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
}

.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #111827;
}

.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    color: #111827;
}

.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #B87333);
    color: white;
}

.trophy-icon {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
    transition: transform 0.3s ease;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.podium-first .trophy-icon {
    color: #FFD700;
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));
}

.podium-second .trophy-icon {
    color: #C0C0C0;
    filter: drop-shadow(0 4px 8px rgba(192, 192, 192, 0.3));
}

.podium-third .trophy-icon {
    color: #CD7F32;
    filter: drop-shadow(0 4px 8px rgba(205, 127, 50, 0.3));
}

.podium-card:hover .trophy-icon {
    transform: scale(1.1) rotate(5deg);
}

.player-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF3300, #FF9E00);
    color: white;
    font-weight: 800;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 3px solid white;
    box-shadow: 0 8px 24px rgba(255, 51, 0, 0.2);
    transition: all 0.3s ease;
}

.podium-card:hover .player-avatar {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(255, 51, 0, 0.3);
}

.dark .player-avatar {
    border-color: rgba(255, 255, 255, 0.15);
}

.player-name {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.dark .player-name {
    color: #f9fafb;
}

.player-region {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
    font-weight: 500;
}

.dark .player-region {
    color: #9ca3af;
}

.player-score {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.03em;
}

.podium-first .player-score {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.podium-second .player-score {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.podium-third .player-score {
    background: linear-gradient(135deg, #CD7F32, #B87333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .player-score {
    color: #f9fafb;
}

/* Leaderboard Table */
.leaderboard-table {
    background: white;
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.dark .leaderboard-table {
    background: rgba(17, 24, 39, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 50px 1fr 100px 120px;
    gap: 20px;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px;
    margin: 4px;
}

.dark .leaderboard-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row:hover {
    background: linear-gradient(90deg, rgba(255, 51, 0, 0.04), rgba(255, 158, 0, 0.04));
    transform: translateX(8px);
    box-shadow: 0 4px 16px rgba(255, 51, 0, 0.1);
}

.dark .leaderboard-row:hover {
    background: linear-gradient(90deg, rgba(255, 51, 0, 0.12), rgba(255, 158, 0, 0.12));
    box-shadow: 0 4px 16px rgba(255, 158, 0, 0.15);
}

.leaderboard-row .rank {
    font-weight: 700;
    font-size: 20px;
    color: #9ca3af;
    text-align: center;
    min-width: 40px;
}

.dark .leaderboard-row .rank {
    color: #6b7280;
}

.leaderboard-row:hover .rank {
    color: #FF3300;
}

.dark .leaderboard-row:hover .rank {
    color: #FF9E00;
}

.leaderboard-row .player {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    letter-spacing: -0.01em;
}

.dark .leaderboard-row .player {
    color: #f9fafb;
}

.leaderboard-row .region {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

.dark .leaderboard-row .region {
    color: #9ca3af;
}

.leaderboard-row .score {
    font-weight: 700;
    font-size: 18px;
    color: #FF3300;
    text-align: right;
    letter-spacing: -0.02em;
}

.dark .leaderboard-row .score {
    color: #FF9E00;
}

@media (max-width: 768px) {
    .podium-container {
        gap: 12px;
    }
    
    .podium-card {
        padding: 20px 12px;
        padding-top: 50px;
    }
    
    .podium-first {
        padding: 28px 12px;
        padding-top: 58px;
    }
    
    .rank-badge {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .trophy-icon {
        font-size: 40px;
        margin-top: 0;
        margin-bottom: 12px;
    }
    
    .player-avatar {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
    
    .player-name {
        font-size: 16px;
    }
    
    .player-score {
        font-size: 24px;
    }
}

@media (max-width: 640px) {
    .leaderboard-row {
        grid-template-columns: 40px 1fr 90px;
        gap: 12px;
        padding: 14px 16px;
    }

    .leaderboard-row .region {
        display: none;
    }
    
    .leaderboard-row .rank {
        font-size: 16px;
    }
    
    .leaderboard-row .player {
        font-size: 14px;
    }
    
    .leaderboard-row .score {
        font-size: 16px;
    }
}

/* ===== BLOG SECTION ===== */
.blog-section {
    background: white;
}

.dark .blog-section {
    background: transparent;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .blog-card {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.dark .blog-card:hover {
    box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);
}

.blog-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cat-announcement {
    background: linear-gradient(135deg, #FF3300, #FF9E00);
    color: white;
}

.cat-news {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    color: white;
}

.cat-testimonial {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
}

.cat-competition {
    background: linear-gradient(135deg, #FF3300, #FF9E00);
    color: white;
}

.blog-content {
    padding: 24px;
}

.blog-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.blog-date {
    font-size: 14px;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dark .blog-date {
    color: #9ca3af;
}

.blog-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.3;
}

.dark .blog-title {
    color: #f9fafb;
}

.blog-excerpt {
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 16px;
}

.dark .blog-excerpt {
    color: #9ca3af;
}

.blog-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FF3300;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dark .blog-link {
    color: #FF9E00;
}

.blog-link:hover {
    gap: 12px;
}

/* Blog Post Page Styles */
.blog-post-image {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 16px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .blog-post-image {
        max-width: 100%;
    }
}

/* Fix text colors in light mode for blog post pages */
.prose p,
.prose li,
.prose blockquote p {
    color: #111827 !important;
}

.dark .prose p,
.dark .prose li,
.dark .prose blockquote p {
    color: #d1d5db !important;
}

/* Force blog post headers to be visible in light mode */
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article header h1 {
    color: #111827 !important;
}

.dark article h1,
.dark article h2,
.dark article h3,
.dark article h4,
.dark article h5,
.dark article h6,
.dark article header h1 {
    color: #f9fafb !important;
}

/* Ensure all text in blog posts is visible in light mode */
article .prose h1,
article .prose h2,
article .prose h3,
article .prose h4,
article .prose h5,
article .prose h6 {
    color: #111827 !important;
}

.dark article .prose h1,
.dark article .prose h2,
.dark article .prose h3,
.dark article .prose h4,
.dark article .prose h5,
.dark article .prose h6 {
    color: #f9fafb !important;
}

/* Override any Tailwind or prose classes that might interfere */
article h1.text-black,
article h2.text-black,
article h3.text-black {
    color: #111827 !important;
}

.dark article h1.text-white,
.dark article h2.text-white,
.dark article h3.text-white {
    color: #f9fafb !important;
}

/* Fix all text elements in blog posts to be visible in light mode */
article strong,
article .prose strong,
article span,
article .prose span,
article li,
article .prose li,
article p strong,
article p span,
article ul strong,
article ul span,
article ol strong,
article ol span,
article div strong,
article div span,
article ul li div,
article ul li div strong,
article ul li div span {
    color: #111827 !important;
}

.dark article strong,
.dark article .prose strong,
.dark article span,
.dark article .prose span,
.dark article li,
.dark article .prose li,
.dark article p strong,
.dark article p span,
.dark article ul strong,
.dark article ul span,
.dark article ol strong,
.dark article ol span,
.dark article div strong,
.dark article div span,
.dark article ul li div,
.dark article ul li div strong,
.dark article ul li div span {
    color: #d1d5db !important;
}

/* Ensure list items and their content are visible */
article ul li,
article ol li,
article ul li strong,
article ul li span,
article ol li strong,
article ol li span,
article ul li div strong,
article ul li div span {
    color: #111827 !important;
}

.dark article ul li,
.dark article ol li,
.dark article ul li strong,
.dark article ul li span,
.dark article ol li strong,
.dark article ol li span,
.dark article ul li div strong,
.dark article ul li div span {
    color: #d1d5db !important;
}

/* Override Tailwind text color classes in light mode */
article .text-black,
article strong.text-black,
article span.text-black {
    color: #111827 !important;
}

article .text-gray-300,
article strong.text-gray-300,
article span.text-gray-300 {
    color: #111827 !important;
}

.dark article .text-white,
.dark article strong.text-white,
.dark article span.text-white {
    color: #f9fafb !important;
}

.dark article .text-gray-300,
.dark article strong.text-gray-300,
.dark article span.text-gray-300 {
    color: #d1d5db !important;
}

/* ===== DOWNLOAD SECTION ===== */
.download-section {
    background: linear-gradient(135deg, #FF3300, #FF9E00);
    position: relative;
    overflow: hidden;
}

.download-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.download-container {
    position: relative;
    z-index: 1;
}

.download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    color: #111827;
    padding: 16px 32px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    min-width: 200px;
}

.dark .download-btn {
    background: rgba(0, 0, 0, 0.8);
    color: #f9fafb;
}

.download-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.download-btn i {
    color: #FF3300;
}

.download-btn div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.download-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dark .download-label {
    color: #9ca3af;
}

.download-platform {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.dark .download-platform {
    color: #f9fafb;
}

/* ===== PHYSICAL GAME SECTION ===== */
.physical-game-section {
    background: linear-gradient(135deg, rgba(255, 51, 0, 0.03), rgba(255, 158, 0, 0.03));
}

.dark .physical-game-section {
    background: linear-gradient(135deg, rgba(255, 51, 0, 0.08), rgba(255, 158, 0, 0.08));
}

.physical-game-card {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.dark .physical-game-card {
    background: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(20px);
}

@media (max-width: 768px) {
    .physical-game-card {
        grid-template-columns: 1fr;
    }
}

.game-image {
    position: relative;
    overflow: hidden;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.physical-game-card:hover .game-image img {
    transform: scale(1.05);
}

.game-info {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .game-info {
        padding: 32px 24px;
    }
}

.game-title {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
    line-height: 1.2;
}

.dark .game-title {
    color: #f9fafb;
}

.game-description {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 24px;
}

.dark .game-description {
    color: #9ca3af;
}

.game-features {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.dark .feature {
    color: #f9fafb;
}

.feature i {
    font-size: 20px;
    color: #FF3300;
}

.game-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #FF3300, #FF9E00);
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    align-self: flex-start;
    box-shadow: 0 8px 20px rgba(255, 51, 0, 0.3);
}

.game-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 51, 0, 0.4);
    gap: 16px;
}

/* ===== FOOTER ===== */
footer {
    background-color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
}

footer.dark,
.dark footer {
    background-color: #000000 !important;
}

footer p,
footer span {
    color: #374151;
}

footer a {
    color: #1f2937;
}

footer a:hover {
    color: #FF3300 !important;
}

footer i {
    color: #1f2937;
}

footer i:hover {
    color: #FF3300 !important;
}

.dark footer p,
.dark footer span {
    color: #d1d5db !important;
}

.dark footer a {
    color: #d1d5db !important;
}

.dark footer i {
    color: #d1d5db !important;
}

/* Desktop Footer */
footer.hidden.lg\:block {
    padding: 32px 8px !important;
}
.social-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon:hover {
    opacity: 0.7;
    transform: scale(1.1) rotate(5deg);
}

/* ===== DARK MODE TOGGLE ===== */
#darkModeToggle {
    backdrop-filter: blur(10px);
}

#darkModeToggle:hover {
    transform: scale(1.1) rotate(5deg);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        padding: 40px 0;
    }

    .podium-card {
        padding: 16px 8px;
    }

    .podium-first {
        padding: 24px 8px;
    }

    .player-avatar {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .player-name {
        font-size: 14px;
    }

    .player-score {
        font-size: 20px;
    }

    .trophy-icon {
        font-size: 32px;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popOut {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(40px);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes particle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
    }
}

.animate-pop-out {
    animation: popOut 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-particle {
    --tx: calc(rand() * 100px - 50px);
    --ty: calc(rand() * -100px - 50px);
    animation: particle 0.8s ease-out forwards;
}

.blog-card,
.leaderboard-row,
.podium-card {
    animation: fadeInUp 0.6s ease-out;
}

/* ===== MASCOT ===== */
.mascot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(100px) scale(0.5);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    max-width: 200px;
    max-height: 200px;
}

.mascot-container.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.mascot-container.hide {
    opacity: 0;
    transform: translateY(100px) scale(0.5);
    pointer-events: none;
}

.mascot-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.mascot-container.show .mascot-image-wrapper:hover {
    transform: scale(1.1) rotate(5deg);
}

.mascot-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: mascotBounce 2s ease-in-out infinite;
}

.mascot-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF3300, #FF9E00);
    border: 2px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0);
    z-index: 1001;
}

.mascot-container.show .mascot-close {
    opacity: 1;
    transform: scale(1);
}

.mascot-close:hover {
    transform: scale(1.2);
    background: linear-gradient(135deg, #FF9E00, #FF3300);
}

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

@keyframes mascotPopIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(100px) rotate(-180deg);
    }
    60% {
        transform: scale(1.15) translateY(-20px) rotate(10deg);
    }
    80% {
        transform: scale(0.95) translateY(5px) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
    }
}

.mascot-container.pop-in {
    animation: mascotPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (max-width: 768px) {
    .mascot-container {
        bottom: 15px;
        right: 15px;
        max-width: 150px;
        max-height: 150px;
    }
    
    .mascot-close {
        width: 24px;
        height: 24px;
        font-size: 14px;
        top: -6px;
        right: -6px;
    }
}