/* Container */  
.container {  
    max-width: 1500px;  
    margin: 0 auto;  
    padding: 0 20px;  
}  
  
/* Section Header */  
.games-section {  
    padding: 80px 0 180px 0;  
    background: #0a0a0a;  
    position: relative;  
}  

/* Tags Container */  
.tags-container {  
    margin-bottom: 40px;  
    display: flex;  
    justify-content: center;  
}  
  
.game-tags {  
    display: flex;  
    list-style: none;  
    flex-wrap: wrap;  
    gap: 15px;  
    justify-content: center;  
    padding: 0;  
}  
  
.tag-btn {  
    background: rgba(255, 255, 255, 0.1);  
    border: 2px solid rgba(255, 255, 255, 0.2);  
    color: #fff;  
    padding: 12px 24px;  
    border-radius: 50px;  
    cursor: pointer;  
    font-size: 14px;  
    font-weight: 600;  
    text-transform: uppercase;  
    letter-spacing: 1px;  
    transition: all 0.3s ease;  
    backdrop-filter: blur(10px);  
}  
  
.tag-btn:hover,  
.tag-btn.active {  
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  
    border-color: transparent;  
    transform: translateY(-2px);  
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);  
}  
  
/* Games Gallery */  
.games-gallery {  
    position: relative;  
    height: 800px;  
    width: 100%;  
    overflow: hidden;  
    border-radius: 20px;  
    transition: all 0.6s ease;  
}  
  
/* Game Items - Default Layout (All games visible) */  
.game-item {  
    position: absolute;  
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);  
    opacity: 1;  
    transform: scale(1);  
    z-index: 1;  
    cursor: pointer;  
}  
  
.game-item.hidden {  
    opacity: 0;  
    transform: scale(0.8);  
    z-index: 0;  
    pointer-events: none;  
}  
  
.game-item.show {  
    animation: fadeInUp 0.6s ease forwards;  
}  
  
/* Default Layout Positions */  
.game1 {  
    left: 0;  
    top: 0;  
    width: 50%;  
    height: 100%;  
    z-index: 3;  
}  
  
.game2 {  
    right: 0;  
    top: 0;  
    width: 50%;  
    height: 50%;  
    z-index: 2;  
}  
  
.game3 {  
    right: 0;  
    bottom: 0;  
    width: 50%;  
    height: 50%;  
    z-index: 2;  
}  
  
/* Single Game Centered Display */  
.game-item.centered {  
    position: absolute;  
    left: 50%;  
    top: 50%;  
    transform: translate(-50%, -50%);  
    width: 70%;  
    height: 70%;  
    z-index: 5;  
    border-radius: 15px;  
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);  
}  
  
/* Special handling for Game 1 when centered (maintain aspect ratio) */  
.game1.centered {  
    width: 60%;  
    height: 80%;  
}  
  
/* Game Link */  
.game-link {  
    display: block;  
    height: 100%;  
    width: 100%;  
    position: relative;  
    overflow: hidden;  
    border-radius: 20px;  
    text-decoration: none;  
    transition: all 0.3s ease;  
}  
  
.game-link:hover {  
    transform: translateY(-5px);  
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);  
}  
  
.game-item.centered .game-link {  
    border-radius: 15px;  
}  
  
.game-item.centered .game-link:hover {  
    transform: translateY(0) scale(1.02);  
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);  
}  
  
/* Game Image */  
.game-image {  
    position: relative;  
    width: 100%;  
    height: 100%;  
    overflow: hidden;  
}  
  
.game-img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    transition: transform 0.5s ease;  
    display: block;  
}  
  
.game-link:hover .game-img {  
    transform: scale(1.05);  
}  
  
.game-item.centered .game-link:hover .game-img {  
    transform: scale(1.02);  
}  
  
.image-overlay {  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: linear-gradient(  
        135deg,  
        rgba(0, 0, 0, 0.7) 0%,  
        rgba(0, 0, 0, 0.3) 50%,  
        transparent 100%  
    );  
    opacity: 0;  
    transition: opacity 0.3s ease;  
}  
  
.game-link:hover .image-overlay {  
    opacity: 1;  
}  
  
/* Game Content */  
.game-content {  
    position: absolute;  
    bottom: 30px;  
    left: 30px;  
    right: 30px;  
    color: #fff;  
    z-index: 2;  
    transform: translateY(20px);  
    opacity: 0;  
    transition: all 0.3s ease;  
}  
  
.game-link:hover .game-content {  
    transform: translateY(0);  
    opacity: 1;  
}  
  
.game-item.centered .game-content {  
    bottom: 40px;  
    left: 40px;  
    right: 40px;  
    transform: translateY(0);  
    opacity: 1;  
}  
  
.game-title {  
    font-size: 2.5rem;  
    font-weight: 700;  
    margin-bottom: 8px;  
    line-height: 1.2;  
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  
}  
  
.game-item.centered .game-title {  
    font-size: 3rem;  
}  
  
.game-title span {  
    display: block;  
    font-size: 1.2em;  
}  
  
.game-type,  
.game-promo {  
    font-size: 1rem;  
    margin-bottom: 5px;  
    opacity: 0.9;  
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);  
}  
  
.game-item.centered .game-type,  
.game-item.centered .game-promo {  
    font-size: 1.2rem;  
}  
  
/* Mobile Responsive */  
@media (max-width: 768px) {  
    .container {  
        padding: 0 15px;  
    }  
  
    .games-section {  
    padding: 0 0 100px 0;  
    background: #0a0a0a;  
    position: relative;  
}
  
    .game-tags {  
        gap: 10px;  
        justify-content: center;  
    }  
  
    .tag-btn {  
        padding: 10px 20px;  
        font-size: 12px;  
    }  
  
    .games-gallery {  
        height: 600px;  
        border-radius: 15px;  
    }  
  
    /* Mobile Layout - Stack Vertically */  
    .game1,  
    .game2,  
    .game3 {  
        position: relative !important;  
        left: auto !important;  
        right: auto !important;  
        top: auto !important;  
        bottom: auto !important;  
        width: 100% !important;  
        height: 33.33% !important;  
        margin-bottom: 5px;  
    }  
  
    .game3 {  
        margin-bottom: 0;  
    }  
  
    /* Mobile Centered Display */  
    .game-item.centered {  
        position: relative !important;  
        left: auto !important;  
        top: auto !important;  
        transform: none !important;  
        width: 100% !important;  
        height: 80% !important;  
        margin: 10% 0;  
        z-index: 5;  
    }  
  
    .game1.centered {  
        height: 90% !important;  
        margin: 5% 0;  
    }  
  
    .game-content {  
        bottom: 20px;  
        left: 20px;  
        right: 20px;  
    }  
  
    .game-item.centered .game-content {  
        bottom: 25px;  
        left: 25px;  
        right: 25px;  
    }  
  
    .game-title {  
        font-size: 1.8rem;  
    }  
  
    .game-item.centered .game-title {  
        font-size: 2.2rem;  
    }  
  
    .game-type,  
    .game-promo {  
        font-size: 0.9rem;  
    }  
  
    .game-item.centered .game-type,  
    .game-item.centered .game-promo {  
        font-size: 1rem;  
    }  
}  
  
@media (max-width: 480px) {  
  
    .tag-btn {  
        padding: 8px 16px;  
        font-size: 11px;  
    }  
  
    .games-gallery {  
        height: 500px;  
    }  
  
    .game-title {  
        font-size: 1.5rem;  
    }  
  
    .game-item.centered .game-title {  
        font-size: 1.8rem;  
    }  
}  
  
/* Animation for visibility changes */  
@keyframes fadeInUp {  
    from {  
        opacity: 0;  
        transform: translateY(30px) scale(0.9);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0) scale(1);  
    }  
}  
  
@keyframes centerIn {  
    from {  
        opacity: 0;  
        transform: translate(-50%, -50%) scale(0.8);  
    }  
    to {  
        opacity: 1;  
        transform: translate(-50%, -50%) scale(1);  
    }  
}  
  
.game-item.centered.show {  
    animation: centerIn 0.6s ease forwards;  
}  

.mobile-item {  
    position: relative !important;  
    left: auto !important;  
    right: auto !important;  
    top: auto !important;  
    bottom: auto !important;  
    transform: none !important;  
    z-index: 1 !important;  
    margin: 0;  
    border-radius: 15px;  
    overflow: hidden;  
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);  
}  
  
.mobile-item .game-link {  
    height: auto !important;  
    min-height: 300px;  
    display: flex;  
    flex-direction: column;  
    border-radius: 15px;  
}  
  
.mobile-item .game-link:hover {  
    transform: none;  
    box-shadow: none;  
}  
  
.mobile-item .game-image {  
    height: 250px !important;  
    flex-shrink: 0;  
    position: relative;  
    overflow: hidden;  
}  
  
.mobile-item .game-img {  
    height: 250px !important;  
    width: 100%;  
    object-fit: cover;  
    object-position: center;  
}  
  
.mobile-item .game-content {  
    position: relative !important;  
    bottom: auto !important;  
    left: 20px !important;  
    right: 20px !important;  
    padding: 20px;  
    background: rgba(0, 0, 0, 0.8);  
    border-radius: 10px;  
    margin: 10px 20px 20px;  
    transform: none !important;  
    opacity: 1 !important;  
    flex-grow: 1;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
}  
  
.mobile-item.centered .game-content {  
    position: relative !important;  
    bottom: auto !important;  
    left: 25px !important;  
    right: 25px !important;  
    padding: 25px;  
    background: rgba(0, 0, 0, 0.9);  
    border-radius: 15px;  
    margin: 15px 25px 25px;  
    transform: none !important;  
    opacity: 1 !important;  
}  
  
.mobile-item.centered {  
    width: 100% !important;  
    height: auto !important;  
    min-height: 450px;  
    margin: 0 !important;  
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);  
}  
  
.mobile-item.centered .game-image {  
    height: 350px !important;  
}  
  
.mobile-item.centered .game-img {  
    height: 350px !important;  
}  
  
@media (max-width: 768px) {  
    .mobile-item .game-title {  
        font-size: 1.8rem !important;  
        margin-bottom: 10px;  
    }  
  
    .mobile-item.centered .game-title {  
        font-size: 2.2rem !important;  
    }  
  
    .mobile-item .game-type,  
    .mobile-item .game-promo {  
        font-size: 1rem !important;  
        margin-bottom: 8px;  
    }  
  
    .mobile-item.centered .game-type,  
    .mobile-item.centered .game-promo {  
        font-size: 1.1rem !important;  
    }  
  
    .games-gallery {  
        display: block !important;  
        position: relative !important;  
        height: auto !important;  
        overflow: visible;  
    }  
  
    .games-gallery .mobile-item {  
        display: block !important;  
        width: 100% !important;  
        margin-bottom: 15px !important;  
    }  
  
    .games-gallery .mobile-item:last-child {  
        margin-bottom: 0 !important;  
    }  
  
    .games-gallery .mobile-item:not(.hidden) {  
        display: flex !important;  
        flex-direction: column;  
        min-height: 450px;  
        margin: 0 !important;  
    }  
  
    .games-gallery .mobile-item.hidden {  
        display: none !important;  
    }  
}  
  
@media (max-width: 480px) {  
    .mobile-item .game-image,  
    .mobile-item .game-img {  
        height: 200px !important;  
    }  
  
    .mobile-item.centered .game-image,  
    .mobile-item.centered .game-img {  
        height: 280px !important;  
    }  
  
    .mobile-item .game-content {  
        left: 15px !important;  
        right: 15px !important;  
        padding: 15px;  
        margin: 8px 15px 15px;  
    }  
  
    .mobile-item.centered .game-content {  
        left: 20px !important;  
        right: 20px !important;  
        padding: 20px;  
        margin: 12px 20px 20px;  
    }  
  
    .games-gallery {  
        /* min-height: 600px;   */
        /* padding: 15px 0;   */
    }  
  
    .mobile-item.centered {  
        min-height: 400px;  
    }  
}  
  
@media (max-width: 768px) {  
    .game-item {  
        display: none !important;  
    }  
      
    .game-item.show {  
        display: block !important;  
    }  
      
    .game-item.mobile-item.show {  
        display: flex !important;  
        flex-direction: column;  
    }  
}