/* =========================================================
   THEME TITLE: Purple Arcade Gradient
   WEBSITE: CrazyGamesX / CrazyGames-like
   PURPOSE: Custom theme colors loaded after all.css
   ========================================================= */

/* Main background */
html,
body {
    min-height: 100%;
    background: #100817 !important;
    background:
        radial-gradient(circle at center top, rgba(55, 30, 82, 0.92) 0%, rgba(24, 13, 35, 0.98) 48%, #08040d 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow-x: hidden;
}

/* Remove old diamond background */
.bg-diamonds {
    display: none !important;
    background: none !important;
    animation: none !important;
}

/* Keep layout above background */
main,
#header,
.sidebar,
.wrapper,
footer {
    position: relative;
    z-index: 1;
}

/* Header */
#header,
#header > div {
    background: linear-gradient(180deg, #30234b 0%, #21162f 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 255, 0.25) !important;
    box-shadow: 0 8px 24px rgba(8, 4, 16, 0.32) !important;
}

/* Sidebar */
#sidebar-menu {
    background: linear-gradient(180deg, #211632 0%, #1a1028 100%) !important;
    border-right: 1px solid rgba(139, 92, 255, 0.22) !important;
    box-shadow: 8px 0 22px rgba(8, 4, 16, 0.28) !important;
}

#sidebar {
    background: transparent !important;
}

#sidebar-menu > div:first-child {
    background: linear-gradient(180deg, #211632 0%, #1a1028 100%) !important;
}

@media (min-width: 1024px) {
    #sidebar-menu::after {
        background: rgba(139, 92, 255, 0.22) !important;
    }
}

/* Search */
#header .search-form .txt,
#header input[type="text"],
#header input[type="search"] {
    background: rgba(105, 91, 150, 0.72) !important;
    border: 1px solid rgba(167, 126, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 18px rgba(139, 92, 255, 0.20) !important;
}

#header .search-form .txt::placeholder,
#header input[type="text"]::placeholder,
#header input[type="search"]::placeholder {
    color: #d9d0ff !important;
}

/* Sidebar hover */
#sidebar-menu a:hover {
    background: rgba(139, 92, 255, 0.16) !important;
    border-radius: 14px !important;
}

#sidebar-menu a img,
#sidebar-menu svg {
    filter: drop-shadow(0 0 6px rgba(139, 92, 255, 0.35));
}

/* Common dark panels */
main .bg-\[\#1F1F30\],
main .bg-\[\#1f1f30\],
main .bg-\[\#1a1b28\],
main .bg-\[\#1A1B28\],
main .bg-\[\#212233\],
main .bg-\[\#181925\],
main .bg-\[\#0C0D14\],
main .bg-\[\#0c0d14\],
main .border-\[\#28293D\] {
    background: rgba(31, 22, 48, 0.46) !important;
    border-color: rgba(167, 126, 255, 0.22) !important;
    box-shadow: 0 14px 40px rgba(8, 4, 16, 0.22) !important;
}

/* Text/footer/content blocks */
.footer-description,
.bottomtext,
.play-game-desc,
.category-section-top,
#special-page-header-desc {
    background: rgba(31, 22, 48, 0.42) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(139, 92, 255, 0.14) !important;
    color: #ffffff !important;
}

/* Game page wrappers */
#game-containers,
#game-containers .bgs,
.game-info,
.page-col,
#Gameinner,
#detail-infobox,
#flex-howtoplay,
.howtoplay-init,
.play-game-bottom,
#mobi-desc-container,
.mobi-desc-content,
#mobi-desc-gamelist,
.game-tags {
    background: rgba(31, 22, 48, 0.42) !important;
    border-color: rgba(167, 126, 255, 0.20) !important;
    color: #ffffff !important;
}

#ava-game_container,
#mobi-play-game,
#mobi-game-preloading,
#game-preloader,
#game-preloading {
    background-color: #100817 !important;
}

/* Game player bottom bar */
#gameDiv .bg-\[\#212233\] {
    background: rgba(48, 35, 75, 0.88) !important;
    border: 1px solid rgba(167, 126, 255, 0.22) !important;
}

/* Game details card */
.play-game-page-container .bg-\[\#1a1b28\],
.play-game-page-container .bg-\[\#1A1B28\] {
    background: rgba(31, 22, 48, 0.50) !important;
    border: 1px solid rgba(167, 126, 255, 0.18) !important;
}

/* Old play.css blue boxes */
#detail-top-gamebox,
.intro-ads,
.pro-play_970x90,
.pro-info_336x280_1,
.pro-info_300x600,
.howtoplay-side-as,
#flex-howtoplay h2 {
    background: rgba(48, 35, 75, 0.88) !important;
    border: 1px solid rgba(167, 126, 255, 0.22) !important;
    box-shadow: 0 10px 28px rgba(8, 4, 16, 0.22) !important;
    color: #ffffff !important;
}

/* Tags */
.game-tags-grid a.bg-\[\#212233\],
.game-tags ul li a,
.game-dec .tags a {
    background: rgba(139, 92, 255, 0.16) !important;
    border: 1px solid rgba(167, 126, 255, 0.28) !important;
    color: #ffffff !important;
}

.game-tags-grid a.bg-\[\#212233\]:hover,
.game-tags ul li a:hover,
.game-dec .tags a:hover {
    background: rgba(139, 92, 255, 0.34) !important;
    border-color: rgba(255, 99, 216, 0.45) !important;
    color: #ffffff !important;
}

/* Game text */
.relategames,
.relategames li a,
.detail-infobox-detail,
.detail-infobox-detail h1,
.detail-infobox-detail h2,
.detail-infobox-detail p,
.play-game-bottom p,
.game-dec,
.game-dec .description,
.flex-side-desc,
.flex-side-desc .pl {
    color: #ffffff !important;
}

/* Game thumbnails */
.relategames li img,
.common-game-style li a .gameicon,
.common-game-style li a img {
    border-color: rgba(167, 126, 255, 0.35) !important;
    background: rgba(31, 22, 48, 0.45) !important;
}

.relategames li a:hover img,
.common-game-style li a:hover .gameicon,
.common-game-style li a:hover img {
    border-color: #ff63d8 !important;
}

/* Buttons */
.detail-infobox-btn,
.mobi-desc-play a,
.mobi-desc-more a,
.mobi-desc-walkbtn a,
.gamePlay-button,
.mobi-gamePlay-button,
.play-now-button {
    background: linear-gradient(180deg, #8b5cff 0%, #6f3dff 100%) !important;
    border-color: rgba(255,255,255,0.75) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(139, 92, 255, 0.32) !important;
}

.detail-infobox-btn:hover,
.mobi-desc-play a:hover,
.mobi-desc-more a:hover,
.mobi-desc-walkbtn a:hover,
.gamePlay-button:hover,
.mobi-gamePlay-button:hover,
.play-now-button:hover {
    background: linear-gradient(180deg, #ff63d8 0%, #8b5cff 100%) !important;
}

/* Fix homepage top spacing */
body:not(.game-page) main,
body:not(.game-page) main > div,
#top-section,
#home-top-section,
.recently-played,
.recently-played-section,
.home-recently-played {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
}

/* Remove sidebar top close/header block on desktop */
@media (min-width: 1024px) {
    #sidebar-menu > div:first-child {
        display: none !important;
    }

    #sidebar {
        padding-top: 12px !important;
    }
}