/*

Custom style

You can override the default class or style here

This file will not be overwritten by the updater

*/

/* Reduce top margins for game tabs and sections */
.game-container {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}

.item-title {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    font-size: 1.1rem !important;
    padding: 8px 15px !important;
}

.content-wrapper {
    margin-top: 10px !important;
}

.grid-wrapper {
    margin-bottom: 0px !important;
}

#continue-playing-section .grid-wrapper {
    margin-bottom: 0px !important;
}

/* Further reduce spacing */
.bottom-container {
    margin: 15px 0 !important;
}

#continue-playing-section {
    margin: 5px 0 10px 0 !important;
}

#continue-playing-section .grid-wrapper {
    margin-bottom: 10px !important;
}

#continue-playing-section .item-title {
    margin: 0 0 5px 0 !important;
}

/* Override original style.css with ultra-specific selectors */
body .container .game-container #continue-playing-section {
    margin: 5px 0 10px 0 !important;
}

body .container .game-container #continue-playing-section[style*="display: block"] {
    margin: 5px 0 10px 0 !important;
}

body .container .game-container #continue-playing-section .grid-wrapper {
    margin-bottom: 10px !important;
}

body .container .game-container #continue-playing-section .item-title {
    margin: 0 0 5px 0 !important;
}

/* Force override all possible selectors */
#continue-playing-section {
    margin: 5px 0 10px 0 !important;
}

#continue-playing-section .grid-wrapper {
    margin-bottom: 10px !important;
}

#continue-playing-section .item-title {
    margin: 0 0 5px 0 !important;
}

/* Override the next section title margin */
#continue-playing-section + h3.item-title {
    margin-top: 5px !important;
}

/* Round images in GameList widget */
.wgt-list-thumbnail img.small-thumb,
.wgt-list-game img.small-thumb {
    border-radius: 8px;
    overflow: hidden;
}

/* Fix fire icon positioning - rectangular badge */
.list-thumbnail .new-badge,
.wgt-list-thumbnail .new-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 54px !important;
    height: 32px !important;
    background-color: #29254f !important;
    border-radius: 0 10px 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    z-index: 10 !important;
}

.widget .new-badge {
    width: 28px !important;
    height: 18px !important;
    font-size: 12px !important;
    top: 0 !important;
    right: 0 !important;
    background-color: #29254f !important;
    border-radius: 0 6px 0 6px !important;
    z-index: 10 !important;
}

@media (max-width: 768px) {
    .list-thumbnail .new-badge,
    .wgt-list-thumbnail .new-badge {
        width: 46px !important;
        height: 26px !important;
        font-size: 20px !important;
        border-radius: 0 8px 0 8px !important;
        top: 0 !important;
        right: 0 !important;
    }
    
    .widget .new-badge {
        width: 24px !important;
        height: 16px !important;
        font-size: 11px !important;
        border-radius: 0 5px 0 5px !important;
        top: 0 !important;
        right: 0 !important;
    }
}

/* Video hover styles for desktop */
@media (hover: hover) and (pointer: fine) {
    .list-thumbnail {
        position: relative;
        overflow: hidden;
        border-radius: 5px;
    }
    
    .list-thumbnail img {
        transition: opacity 0.3s ease;
        position: relative;
        z-index: 1;
    }
    
    .list-thumbnail video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        z-index: 2;
    }
    
    /* Hide fire icon on hover */
    .list-thumbnail:hover .new-badge {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    /* Make title background more transparent and move lower */
    .list-title {
        background: rgba(0, 0, 0, 0.3) !important;
        bottom: 5px !important;
        transition: all 0.3s ease;
    }
    
    /* Ensure UI elements stay on top of video */
    .list-thumbnail .new-game-badge,
    .list-thumbnail .game-badge,
    .list-title {
        position: relative;
        z-index: 5;
    }
    
    .list-game {
        position: relative;
    }
    
    /* Remove dimming effect on hover */
    .list-thumbnail:hover img {
        opacity: 1 !important;
    }
}