/* ============================================================
   TEXASHOLD WordPress Theme - Main Stylesheet
   Western Cowboy Poker Theme with Wood Texture
   ============================================================ */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Roboto', sans-serif;
    background: #2C1810;
    color: #E8D5B7;
    line-height: 1.6;
    overflow-x: hidden;
}
a { color: #FFD700; text-decoration: none; transition: all 0.3s ease; }
a:hover { color: #FFA000; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* === Container === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* === Western Text Classes === */
.western-text {
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-family: 'Alfa Slab One', serif;
}
.western-text-gold {
    color: #FFD700;
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFA000, 2px 2px 4px rgba(0,0,0,0.9);
    font-family: 'Alfa Slab One', serif;
}
.western-text-brown {
    color: #8D6E63;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-family: 'Alfa Slab One', serif;
}

/* === Wood Texture Background === */
.wood-texture-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        repeating-linear-gradient(
            90deg,
            #5D4037 0%,
            #6D4C41 5%,
            #5D4037 10%,
            #4E342E 15%,
            #5D4037 20%,
            #6D4C41 25%,
            #5D4037 30%,
            #4E342E 35%,
            #5D4037 40%
        );
    z-index: 0;
}
.wood-texture-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0,0,0,0.03) 2px,
            transparent 4px
        );
    z-index: 1;
}

/* === Cowboy Hat Decoration === */
.cowboy-hat-decoration {
    position: absolute;
    top: -30px;
    right: 10%;
    width: 120px;
    height: 60px;
    z-index: 5;
}
.cowboy-hat-decoration::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 20px;
    background: #3E2723;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.cowboy-hat-decoration::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 45px;
    background: #4E342E;
    border-radius: 30px 30px 5px 5px;
    border-bottom: 3px solid #3E2723;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
}

/* === Header === */
.site-header {
    background: linear-gradient(180deg, #3E2723 0%, #2C1810 100%);
    border-bottom: 3px solid #8D6E63;
    position: relative;
    z-index: 100;
}
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    gap: 20px;
}
.logo img {
    max-height: 50px;
    width: auto;
}
.header-time {
    color: #FFD700;
    font-size: 14px;
    font-weight: 500;
    background: rgba(0,0,0,0.3);
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #5D4037;
}
.header-btn-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.btn-login {
    padding: 8px 20px;
    border: 2px solid #FFD700;
    color: #FFD700;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s;
    background: transparent;
}
.btn-login:hover {
    background: rgba(255,215,0,0.1);
    color: #FFA000;
}
.btn-register {
    padding: 8px 20px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(255,215,0,0.3);
}
.btn-register:hover {
    background: linear-gradient(135deg, #FFA000, #FF8F00);
    color: #2C1810;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,215,0,0.5);
}
.btn-demo {
    padding: 8px 20px;
    background: linear-gradient(135deg, #1A237E, #283593);
    color: #FFD700;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s;
    border: 1px solid #3949AB;
}
.btn-demo:hover {
    background: linear-gradient(135deg, #283593, #3949AB);
    color: #FFF;
}

/* === Navigation === */
.main-navigation {
    background: rgba(0,0,0,0.3);
    border-top: 1px solid #5D4037;
    border-bottom: 1px solid #5D4037;
}
.nav-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.nav-item { position: relative; }
.nav-link {
    display: block;
    padding: 12px 15px;
    color: #E8D5B7;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}
.nav-link:hover {
    color: #FFD700;
    border-bottom-color: #FFD700;
    background: rgba(255,215,0,0.05);
}
.nav-link i { margin-right: 5px; }
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFD700;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

/* === Notification Bar === */
.notification-bar {
    background: linear-gradient(90deg, #3E2723, #5D4037, #3E2723);
    padding: 8px 0;
    overflow: hidden;
    border-top: 1px solid #8D6E63;
}
.western-notification {
    border-bottom: 2px solid #FFD700;
}
.notification-content {
    display: flex;
    gap: 50px;
    animation: scrollNotification 30s linear infinite;
    white-space: nowrap;
    font-size: 13px;
    color: #FFD700;
}
@keyframes scrollNotification {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* === Announcement Modal === */
.announcement-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.announcement-modal.active { display: flex; }
.announcement-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
}
.announcement-content {
    position: relative;
    background: linear-gradient(135deg, #3E2723, #4E342E);
    border-radius: 15px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    z-index: 1;
    border: 2px solid #8D6E63;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: modalSlideIn 0.5s ease;
}
.western-modal {
    background: linear-gradient(135deg, #3E2723 0%, #5D4037 50%, #3E2723 100%);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}
.announcement-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #FFD700;
    font-size: 28px;
    cursor: pointer;
    z-index: 2;
}
.announcement-header-icon {
    text-align: center;
    margin-bottom: 15px;
}
.announcement-header-icon i {
    font-size: 40px;
    color: #FFD700;
}
.announcement-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #5D4037;
}
.announcement-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.announcement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid #5D4037;
}
.announcement-item:hover {
    background: rgba(255,215,0,0.1);
    border-color: #FFD700;
    transform: translateX(5px);
}
.announcement-badge {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.announcement-badge.hot { background: #D32F2F; color: #fff; }
.announcement-badge.new { background: #388E3C; color: #fff; }
.announcement-badge.info { background: #1565C0; color: #fff; }
.announcement-text {
    flex: 1;
    font-size: 13px;
    color: #E8D5B7;
}
.announcement-item i {
    color: #8D6E63;
    font-size: 12px;
}
.announcement-footer { text-align: center; }
.announcement-cta {
    display: inline-block;
    padding: 12px 40px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
}
.western-cta {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
}

/* === Section Title === */
.section-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
    padding: 15px 0;
    position: relative;
}
.section-title i { margin-right: 10px; color: #FFD700; }
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

/* === Western Hero Section === */
.western-hero-section {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
    border-radius: 15px;
    margin: 20px 0;
    border: 2px solid #5D4037;
}
.western-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 40px;
}
.western-hero-left { flex: 1; }
.wanted-poster-frame {
    background: #F5E6C8;
    padding: 30px;
    border-radius: 5px;
    position: relative;
    box-shadow:
        inset 0 0 30px rgba(139,69,19,0.3),
        0 5px 20px rgba(0,0,0,0.5);
    margin-bottom: 25px;
}
.wanted-poster-frame::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 3px solid #8B4513;
    border-radius: 8px;
    pointer-events: none;
}
.wanted-poster-frame::after {
    content: 'WANTED';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Alfa Slab One', serif;
    font-size: 12px;
    color: #8B4513;
    letter-spacing: 3px;
    opacity: 0.5;
}
.western-hero-title {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 15px;
    text-align: center;
    padding-top: 15px;
}
.western-hero-desc {
    font-size: 15px;
    color: #5D4037;
    text-align: center;
    line-height: 1.7;
}
.western-hero-cta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.btn-western-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255,215,0,0.4);
    position: relative;
}
.sheriff-badge-btn {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    padding: 14px 35px;
    border-radius: 0;
}
.sheriff-badge-btn:hover {
    clip-path: none;
    border-radius: 30px;
}
.btn-western-primary:hover {
    background: linear-gradient(135deg, #FFA000, #FF8F00);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255,215,0,0.6);
    color: #2C1810;
}
.btn-western-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    background: transparent;
    color: #FFD700;
    border: 2px solid #FFD700;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s;
}
.btn-western-secondary:hover {
    background: rgba(255,215,0,0.1);
    color: #FFA000;
    border-color: #FFA000;
}
.western-hero-right { flex: 0 0 350px; }
.western-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hero-stat-item {
    background: rgba(0,0,0,0.4);
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #5D4037;
    text-align: center;
    transition: all 0.3s;
}
.hero-stat-item:hover {
    border-color: #FFD700;
    transform: translateX(-5px);
}
.hero-stat-number {
    display: block;
    font-family: 'Alfa Slab One', serif;
    font-size: 32px;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
    margin-bottom: 5px;
}
.hero-stat-label {
    font-size: 13px;
    color: #8D6E63;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === Pot Display Section === */
.pot-showcase-section {
    padding: 60px 0;
    text-align: center;
    position: relative;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
    border-radius: 15px;
    margin: 20px 0;
    border: 2px solid #5D4037;
}
.pot-display-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.pot-display-center {
    position: relative;
    padding: 40px 20px;
}
.pot-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
    animation: potGlow 3s ease-in-out infinite;
}
@keyframes potGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
.pot-amount-container {
    position: relative;
    z-index: 2;
}
.pot-label {
    display: block;
    font-family: 'Alfa Slab One', serif;
    font-size: 16px;
    color: #8D6E63;
    letter-spacing: 3px;
    margin-bottom: 10px;
}
.pot-amount {
    display: block;
    font-family: 'Alfa Slab One', serif;
    font-size: 72px;
    color: #FFD700;
    text-shadow:
        0 0 20px rgba(255,215,0,0.8),
        0 0 40px rgba(255,215,0,0.4),
        0 0 60px rgba(255,215,0,0.2);
    animation: potAmountGlow 2s ease-in-out infinite;
    line-height: 1.2;
}
@keyframes potAmountGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.4); }
    50% { text-shadow: 0 0 30px rgba(255,215,0,1), 0 0 60px rgba(255,215,0,0.6), 0 0 80px rgba(255,215,0,0.3); }
}
.pot-label-sub {
    display: block;
    font-size: 14px;
    color: #8D6E63;
    margin-top: 10px;
    letter-spacing: 1px;
}

/* Chip Stacks */
.chip-stacks {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}
.chip-stack {
    width: 40px;
    height: 60px;
    position: relative;
    animation: chipStack 2s ease-in-out infinite;
}
.chip-stack::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 8px;
    border-radius: 50%;
}
.chip-stack::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 8px;
    border-radius: 50%;
}
.chip-stack-1 { animation-delay: 0s; }
.chip-stack-1::before { background: #D32F2F; box-shadow: 0 -8px 0 #B71C1C, 0 -16px 0 #D32F2F, 0 -24px 0 #B71C1C, 0 -32px 0 #D32F2F; }
.chip-stack-1::after { background: #E53935; box-shadow: 0 -8px 0 #C62828, 0 -16px 0 #E53935, 0 -24px 0 #C62828, 0 -32px 0 #E53935; }
.chip-stack-2 { animation-delay: 0.2s; }
.chip-stack-2::before { background: #1565C0; box-shadow: 0 -8px 0 #0D47A1, 0 -16px 0 #1565C0, 0 -24px 0 #0D47A1, 0 -32px 0 #1565C0, 0 -40px 0 #1565C0; }
.chip-stack-2::after { background: #1976D2; box-shadow: 0 -8px 0 #1565C0, 0 -16px 0 #1976D2, 0 -24px 0 #1565C0, 0 -32px 0 #1976D2, 0 -40px 0 #1976D2; }
.chip-stack-3 { animation-delay: 0.4s; }
.chip-stack-3::before { background: #2E7D32; box-shadow: 0 -8px 0 #1B5E20, 0 -16px 0 #2E7D32, 0 -24px 0 #1B5E20; }
.chip-stack-3::after { background: #388E3C; box-shadow: 0 -8px 0 #2E7D32, 0 -16px 0 #388E3C, 0 -24px 0 #2E7D32; }
.chip-stack-4 { animation-delay: 0.6s; }
.chip-stack-4::before { background: #FFD700; box-shadow: 0 -8px 0 #FFA000, 0 -16px 0 #FFD700, 0 -24px 0 #FFA000, 0 -32px 0 #FFD700, 0 -40px 0 #FFA000, 0 -48px 0 #FFD700; }
.chip-stack-4::after { background: #FFC107; box-shadow: 0 -8px 0 #FFB300, 0 -16px 0 #FFC107, 0 -24px 0 #FFB300, 0 -32px 0 #FFC107, 0 -40px 0 #FFB300, 0 -48px 0 #FFC107; }
.chip-stack-5 { animation-delay: 0.8s; }
.chip-stack-5::before { background: #4A148C; box-shadow: 0 -8px 0 #311B92, 0 -16px 0 #4A148C, 0 -24px 0 #311B92; }
.chip-stack-5::after { background: #6A1B9A; box-shadow: 0 -8px 0 #4A148C, 0 -16px 0 #6A1B9A, 0 -24px 0 #4A148C; }
@keyframes chipStack {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Pot Recent Wins */
.pot-recent-wins {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.pot-win-item {
    background: rgba(0,0,0,0.4);
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #5D4037;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 180px;
}
.pot-win-name {
    color: #FFD700;
    font-weight: 700;
    font-size: 14px;
}
.pot-win-amount {
    color: #4CAF50;
    font-weight: 700;
    font-size: 18px;
}
.pot-win-time {
    color: #8D6E63;
    font-size: 12px;
}

/* === Game Tables Section === */
.western-tables-section {
    padding: 50px 0;
    margin: 20px 0;
}
.western-tables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.poker-table-card {
    background: linear-gradient(135deg, #3E2723, #4E342E);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #5D4037;
    transition: all 0.3s;
}
.poker-table-card:hover {
    transform: translateY(-5px);
    border-color: #FFD700;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.table-card-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wood-bg {
    background: repeating-linear-gradient(90deg, #5D4037 0%, #6D4C41 10%, #5D4037 20%, #4E342E 30%, #5D4037 40%);
}
.table-stakes {
    font-family: 'Alfa Slab One', serif;
    font-size: 22px;
    color: #FFD700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.table-type {
    font-size: 12px;
    color: #E8D5B7;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.table-card-body {
    padding: 15px 20px;
}
.table-players-info, .table-pot-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #E8D5B7;
}
.table-players-info i, .table-pot-info i {
    color: #8D6E63;
    width: 20px;
    text-align: center;
}
.table-speed { text-align: right; }
.table-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-normal { background: #5D4037; color: #E8D5B7; }
.badge-hot { background: #D32F2F; color: #fff; }
.badge-vip { background: linear-gradient(135deg, #FFD700, #FFA000); color: #2C1810; }
.badge-jackpot {
    background: linear-gradient(135deg, #FFD700, #FF6F00);
    color: #2C1810;
    animation: jackpotPulse 1.5s ease-in-out infinite;
}
@keyframes jackpotPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.5); }
    50% { box-shadow: 0 0 20px rgba(255,215,0,0.8); }
}
.table-join-btn {
    display: block;
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s;
}
.table-join-btn:hover {
    background: linear-gradient(135deg, #FFA000, #FF8F00);
    color: #2C1810;
}

/* === Western Features Section === */
.western-features-section {
    padding: 50px 0;
    margin: 20px 0;
}
.western-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.western-feature-card {
    background: linear-gradient(135deg, #3E2723, #4E342E);
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #5D4037;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.western-feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFD700, #FFA000, #FFD700);
    transform: scaleX(0);
    transition: transform 0.3s;
}
.western-feature-card:hover::before { transform: scaleX(1); }
.western-feature-card:hover {
    transform: translateY(-5px);
    border-color: #FFD700;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
}
.sheriff-star-icon {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.horseshoe-icon {
    background: linear-gradient(135deg, #5D4037, #8D6E63);
    color: #FFD700;
    border: 2px solid #FFD700;
}
.revolver-icon {
    background: linear-gradient(135deg, #1A237E, #283593);
    color: #FFD700;
    border: 2px solid #3949AB;
}
.wanted-poster-icon {
    background: #F5E6C8;
    color: #5D4037;
    border: 2px solid #8B4513;
}
.feature-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 16px;
    color: #FFD700;
    margin-bottom: 12px;
}
.feature-desc {
    font-size: 13px;
    color: #E8D5B7;
    line-height: 1.7;
}

/* === Leaderboard Section === */
.cowboy-leaderboard-section {
    padding: 50px 0;
    margin: 20px 0;
}
.leaderboard-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 2px solid #5D4037;
}
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}
.leaderboard-table thead {
    background: linear-gradient(135deg, #3E2723, #4E342E);
}
.leaderboard-table th {
    padding: 15px 20px;
    color: #FFD700;
    font-family: 'Alfa Slab One', serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: left;
    border-bottom: 2px solid #5D4037;
}
.leaderboard-row {
    border-bottom: 1px solid rgba(93,64,55,0.5);
    transition: all 0.3s;
}
.leaderboard-row:hover {
    background: rgba(255,215,0,0.05);
}
.leaderboard-row td {
    padding: 12px 20px;
    font-size: 14px;
}
.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 13px;
}
.rank-gold {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
}
.rank-silver {
    background: linear-gradient(135deg, #B0BEC5, #78909C);
    color: #2C1810;
}
.rank-bronze {
    background: linear-gradient(135deg, #A1887F, #795548);
    color: #fff;
}
.rank-normal {
    background: rgba(93,64,55,0.5);
    color: #E8D5B7;
}
.leaderboard-row.rank-1 { background: rgba(255,215,0,0.1); }
.leaderboard-row.rank-2 { background: rgba(176,190,197,0.05); }
.leaderboard-row.rank-3 { background: rgba(161,136,127,0.05); }
.player-name {
    color: #FFD700;
    font-weight: 700;
}
.chips-earned {
    color: #4CAF50;
    font-weight: 700;
}
.win-rate {
    color: #FFD700;
    font-weight: 600;
}

/* === Promotions Section === */
.western-promos-section {
    padding: 50px 0;
    margin: 20px 0;
}
.western-promos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.promo-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}
.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.wanted-poster {
    background: #F5E6C8;
    border: 3px solid #8B4513;
}
.wanted-poster::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at top left, rgba(139,69,19,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(139,69,19,0.15) 0%, transparent 50%);
    pointer-events: none;
}
.promo-card-inner {
    padding: 30px 20px;
    position: relative;
    z-index: 1;
}
.promo-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
}
.hot-badge { background: #D32F2F; color: #fff; }
.new-badge { background: #388E3C; color: #fff; }
.promo-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 16px;
    color: #3E2723;
    margin-bottom: 15px;
    padding-right: 50px;
}
.promo-desc {
    font-size: 13px;
    color: #5D4037;
    line-height: 1.7;
    margin-bottom: 20px;
}
.promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #5D4037, #3E2723);
    color: #FFD700;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s;
}
.promo-cta:hover {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
}

/* === Saloon CTA Section === */
.saloon-cta-section {
    padding: 20px 0;
    margin: 30px 0;
}
.saloon-cta-inner {
    position: relative;
    border-radius: 15px;
    padding: 60px 40px;
    text-align: center;
    overflow: hidden;
    border: 2px solid #8D6E63;
}
.saloon-cta-inner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}
.saloon-cta-content {
    position: relative;
    z-index: 2;
}
.saloon-cta-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 42px;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255,215,0,0.8), 2px 2px 4px rgba(0,0,0,0.9);
    margin-bottom: 20px;
}
.saloon-cta-desc {
    font-size: 16px;
    color: #E8D5B7;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.7;
}
.saloon-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.saloon-trust-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.saloon-trust-badges span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #8D6E63;
}
.saloon-trust-badges i { color: #FFD700; }


/* === Home News Section === */
.home-news-section {
    padding: 50px 0;
    margin: 20px 0;
}
.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.home-news-placeholder {
    display: contents;
}
.article-card {
    background: linear-gradient(135deg, #3E2723, #4E342E);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #5D4037;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.article-card:hover {
    transform: translateY(-5px);
    border-color: #FFD700;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.article-card-thumb {
    height: 180px;
    overflow: hidden;
    position: relative;
}
.article-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.article-card:hover .article-card-thumb img {
    transform: scale(1.1);
}
.article-card-title {
    padding: 15px 15px 5px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}
.article-card-title a, .article-card-title span {
    color: #FFD700;
}
.article-card-title a:hover { color: #FFA000; }
.article-card-meta {
    padding: 0 15px;
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #8D6E63;
    margin-bottom: 8px;
}
.article-card-meta i { margin-right: 5px; }
.article-card-excerpt {
    padding: 0 15px 15px;
    font-size: 13px;
    color: #E8D5B7;
    line-height: 1.6;
    flex: 1;
}
.article-card-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    color: #FFD700;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}
.article-card-more:hover { color: #FFA000; gap: 10px; }
.view-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s;
}
.western-view-more {
    background: transparent;
    border: 2px solid #FFD700;
    color: #FFD700;
}
.western-view-more:hover {
    background: #FFD700;
    color: #2C1810;
}

/* === Footer === */
.western-footer {
    background: linear-gradient(180deg, #2C1810 0%, #1A0F0A 100%);
    border-top: 3px solid #5D4037;
    padding: 50px 0 0;
    margin-top: 30px;
}
.footer-columns-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}
.footer-brand-logo {
    margin-bottom: 15px;
}
.footer-brand-logo img {
    max-height: 40px;
}
.footer-brand-text {
    font-size: 13px;
    color: #8D6E63;
    line-height: 1.7;
    margin-bottom: 15px;
}
.footer-18plus {
    display: inline-block;
    background: #D32F2F;
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 15px;
}
.footer-social-links {
    display: flex;
    gap: 10px;
}
.footer-social-links a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(93,64,55,0.5);
    color: #FFD700;
    transition: all 0.3s;
    font-size: 14px;
}
.footer-social-links a:hover {
    background: #FFD700;
    color: #2C1810;
    transform: translateY(-3px);
}
.footer-col h4 {
    font-family: 'Alfa Slab One', serif;
    font-size: 14px;
    color: #FFD700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #5D4037;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col ul li a {
    color: #8D6E63;
    font-size: 13px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.footer-col ul li a::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 10px;
    color: #5D4037;
}
.footer-col ul li a:hover {
    color: #FFD700;
    padding-left: 5px;
}

/* Footer License Bar */
.footer-license-bar {
    text-align: center;
    padding: 25px 0;
    border-top: 1px solid #5D4037;
    border-bottom: 1px solid #5D4037;
    margin-bottom: 20px;
}
.footer-license-bar h4 {
    font-family: 'Alfa Slab One', serif;
    font-size: 14px;
    color: #FFD700;
    margin-bottom: 15px;
    border: none;
    padding: 0;
}
.license-icons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.license-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #8D6E63;
    font-size: 12px;
}
.license-item i {
    font-size: 24px;
    color: #FFD700;
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid rgba(93,64,55,0.5);
}
.footer-copyright {
    font-size: 13px;
    color: #8D6E63;
    margin-bottom: 5px;
}
.footer-disclaimer {
    font-size: 12px;
    color: #5D4037;
}

/* === Breadcrumb === */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 0;
    font-size: 13px;
    color: #8D6E63;
    margin-bottom: 10px;
}
.breadcrumb a { color: #FFD700; }
.breadcrumb a:hover { color: #FFA000; }
.breadcrumb span { color: #8D6E63; }

/* === Category Header === */
.category-header {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    border: 1px solid #5D4037;
}
.category-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 28px;
    margin-bottom: 10px;
}
.category-desc {
    font-size: 14px;
    color: #8D6E63;
}

/* === Provider Tabs === */
.provider-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}
.provider-tab {
    padding: 8px 16px;
    background: rgba(93,64,55,0.5);
    color: #E8D5B7;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}
.provider-tab:hover {
    background: rgba(255,215,0,0.1);
    border-color: #FFD700;
}
.provider-tab.active {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    border-color: #FFD700;
}

/* === Content Area === */
.content-area {
    display: flex;
    gap: 25px;
    padding: 10px 0;
}
.main-content { flex: 1; min-width: 0; }

/* === Article Grid === */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #8D6E63;
}

/* === Pagination === */
.pagination {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.pagination .nav-links {
    display: flex;
    gap: 5px;
}
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(93,64,55,0.5);
    color: #E8D5B7;
    font-weight: 600;
    transition: all 0.3s;
    border: 1px solid #5D4037;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    border-color: #FFD700;
}

/* === Single Article === */
.single-article {
    background: linear-gradient(135deg, #3E2723, #4E342E);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #5D4037;
}
.article-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 28px;
    color: #FFD700;
    margin-bottom: 15px;
    line-height: 1.3;
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: #8D6E63;
    padding-bottom: 15px;
    border-bottom: 1px solid #5D4037;
    margin-bottom: 20px;
}
.article-meta i { margin-right: 5px; color: #FFD700; }
.article-featured-img {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.article-featured-img img {
    width: 100%;
    border-radius: 10px;
}
.article-content {
    font-size: 15px;
    line-height: 1.8;
    color: #E8D5B7;
}
.article-content p { margin-bottom: 15px; }
.article-content h2, .article-content h3 {
    color: #FFD700;
    font-family: 'Alfa Slab One', serif;
    margin: 25px 0 15px;
}
.article-content a { color: #FFD700; text-decoration: underline; }
.article-content img { border-radius: 10px; margin: 15px 0; }
.article-content blockquote {
    border-left: 4px solid #FFD700;
    padding: 15px 20px;
    margin: 20px 0;
    background: rgba(0,0,0,0.3);
    border-radius: 0 10px 10px 0;
    font-style: italic;
}
.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 15px 0;
    border-top: 1px solid #5D4037;
    margin-top: 20px;
}
.article-tags i { color: #FFD700; }
.article-tags span {
    padding: 4px 12px;
    background: rgba(93,64,55,0.5);
    border-radius: 15px;
    font-size: 12px;
    color: #E8D5B7;
}
.article-nav {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid #5D4037;
    margin-top: 20px;
}
.article-nav-prev a, .article-nav-next a {
    color: #FFD700;
    font-size: 14px;
}

/* === Related Posts === */
.related-posts {
    margin-bottom: 30px;
}
.related-posts-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #5D4037;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.related-item {
    background: linear-gradient(135deg, #3E2723, #4E342E);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #5D4037;
    transition: all 0.3s;
}
.related-item:hover {
    transform: translateY(-3px);
    border-color: #FFD700;
}
.related-item-thumb {
    height: 120px;
    overflow: hidden;
}
.related-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-item-title {
    padding: 10px;
    font-size: 13px;
    color: #FFD700;
    line-height: 1.4;
}

/* === Page Article === */
.page-article {
    background: linear-gradient(135deg, #3E2723, #4E342E);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid #5D4037;
}
.page-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 28px;
    color: #FFD700;
    margin-bottom: 20px;
}
.page-featured-img {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.page-content {
    font-size: 15px;
    line-height: 1.8;
    color: #E8D5B7;
}
.page-content p { margin-bottom: 15px; }

/* === Floating Sidebar === */
.floating-sidebar {
    position: fixed;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #3E2723, #5D4037);
    color: #FFD700;
    font-size: 18px;
    transition: all 0.3s;
    position: relative;
    border: 1px solid #5D4037;
}
.sidebar-btn:hover {
    width: 180px;
    border-radius: 25px;
    justify-content: flex-start;
    padding-left: 15px;
    gap: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    border-color: #FFD700;
}
.sidebar-btn-facebook:hover { background: linear-gradient(135deg, #1877F2, #1565C0); color: #fff; border-color: #1877F2; }
.sidebar-btn-telegram:hover { background: linear-gradient(135deg, #0088cc, #006699); color: #fff; border-color: #0088cc; }
.sidebar-label { display: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sidebar-btn:hover .sidebar-label { display: block; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #2C1810; }
::-webkit-scrollbar-thumb { background: #5D4037; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8D6E63; }

/* === Keyframe Animations === */
@keyframes woodCreak {
    0%, 100% { background-position: 0 0; }
    50% { background-position: 5px 0; }
}
@keyframes wantedPoster {
    0% { opacity: 0; transform: translateX(-30px) rotate(-3deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* === Utility Classes === */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.text-gold { color: #FFD700; }
.text-brown { color: #8D6E63; }
.bg-wood {
    background: repeating-linear-gradient(90deg, #5D4037 0%, #6D4C41 5%, #5D4037 10%, #4E342E 15%, #5D4037 20%);
}

/* === Hero Slider === */
.hero-slider {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    border: 2px solid #5D4037;
}
.hero-slider .swiper-slide img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.hero-slider .swiper-pagination-bullet {
    background: #FFD700;
    opacity: 0.5;
}
.hero-slider .swiper-pagination-bullet-active {
    opacity: 1;
}
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    color: #FFD700;
    background: rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after {
    font-size: 16px;
}

/* === Hot Games === */
.hot-games-section {
    padding: 40px 0;
}
.hot-games-swiper {
    padding-bottom: 40px;
}
.game-item {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #5D4037;
    transition: all 0.3s;
}
.game-item:hover {
    border-color: #FFD700;
    transform: scale(1.05);
}
.game-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.game-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #FFD700;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* === Poster Section === */
.poster-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px 0;
}
.poster-item {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #5D4037;
    transition: all 0.3s;
}
.poster-item:hover {
    border-color: #FFD700;
    transform: scale(1.02);
}
.poster-item img {
    width: 100%;
    height: auto;
}

/* === Download Section === */
.download-section {
    margin: 30px 0;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #5D4037;
    background: linear-gradient(135deg, #3E2723, #2C1810);
}
.download-section-inner {
    display: flex;
    align-items: center;
    padding: 40px;
    gap: 40px;
}
.download-left { flex: 1; }
.download-left h2 {
    font-family: 'Alfa Slab One', serif;
    font-size: 28px;
    color: #FFD700;
    margin-bottom: 15px;
}
.download-left p {
    color: #8D6E63;
    margin-bottom: 20px;
    line-height: 1.7;
}
.download-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.download-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #E8D5B7;
    font-size: 14px;
}
.download-feature i { color: #FFD700; }
.download-buttons {
    display: flex;
    gap: 15px;
}
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #2C1810;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s;
}
.download-btn:hover {
    background: linear-gradient(135deg, #FFA000, #FF8F00);
    color: #2C1810;
    transform: translateY(-2px);
}
.download-right { flex: 0 0 250px; }
.download-phone-mockup {
    width: 200px;
    height: 350px;
    background: #1A0F0A;
    border-radius: 25px;
    padding: 10px;
    border: 3px solid #5D4037;
    margin: 0 auto;
}
.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
}
.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === Categories Section (from reference) === */
.pixel-categories-section {
    padding: 40px 0;
}
.pixel-categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}
.pixel-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    background: linear-gradient(135deg, #3E2723, #4E342E);
    border-radius: 12px;
    border: 1px solid #5D4037;
    transition: all 0.3s;
}
.pixel-category-item:hover {
    border-color: #FFD700;
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(255,215,0,0.2);
}
.pixel-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.pixel-icon-casino { background: linear-gradient(135deg, #D32F2F, #B71C1C); color: #fff; }
.pixel-icon-slot { background: linear-gradient(135deg, #FFD700, #FFA000); color: #2C1810; }
.pixel-icon-sport { background: linear-gradient(135deg, #388E3C, #2E7D32); color: #fff; }
.pixel-icon-fish { background: linear-gradient(135deg, #1565C0, #0D47A1); color: #fff; }
.pixel-icon-card { background: linear-gradient(135deg, #7B1FA2, #4A148C); color: #fff; }
.pixel-icon-lottery { background: linear-gradient(135deg, #FF6F00, #E65100); color: #fff; }
.pixel-icon-casino::after,
.pixel-icon-slot::after,
.pixel-icon-sport::after,
.pixel-icon-fish::after,
.pixel-icon-card::after,
.pixel-icon-lottery::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.pixel-icon-casino::after { content: '\f522'; }
.pixel-icon-slot::after { content: '\f005'; }
.pixel-icon-sport::after { content: '\f1e3'; }
.pixel-icon-fish::after { content: '\f578'; }
.pixel-icon-card::after { content: '\f24d'; }
.pixel-icon-lottery::after { content: '\f3eb'; }
.pixel-category-name {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #FFD700;
}