/* =========================================================
   THEME TITLE: Kizi Blue Arcade
   WEBSITE: Kizi Games / CrazyGames-like
   PURPOSE: Custom theme colors loaded after all.css
   ========================================================= */

/* Main background */
html,
body {
    min-height: 100%;
    background: #071A33 !important;
    background:
        radial-gradient(circle at center top, rgba(45, 171, 255, 0.34) 0%, rgba(9, 39, 76, 0.98) 44%, #030914 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow-x: hidden;
    color: #ffffff !important;
}

/* 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, #0E3A70 0%, #08284F 100%) !important;
    border-bottom: 1px solid rgba(72, 198, 255, 0.30) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important;
}

/* Sidebar */
#sidebar-menu {
    background: linear-gradient(180deg, #0B315F 0%, #061E3D 100%) !important;
    border-right: 1px solid rgba(72, 198, 255, 0.24) !important;
    box-shadow: 8px 0 22px rgba(0, 0, 0, 0.26) !important;
}

#sidebar {
    background: transparent !important;
}

#sidebar-menu > div:first-child {
    background: linear-gradient(180deg, #0B315F 0%, #061E3D 100%) !important;
}

@media (min-width: 1024px) {
    #sidebar-menu::after {
        background: rgba(72, 198, 255, 0.26) !important;
    }
}

/* Search */
#header .search-form .txt,
#header input[type="text"],
#header input[type="search"] {
    background: rgba(14, 58, 112, 0.76) !important;
    border: 1px solid rgba(72, 198, 255, 0.42) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 18px rgba(45, 171, 255, 0.18) !important;
}

#header .search-form .txt::placeholder,
#header input[type="text"]::placeholder,
#header input[type="search"]::placeholder {
    color: #d8f4ff !important;
}

/* Sidebar links */
#sidebar-menu a {
    color: #ffffff !important;
}

#sidebar-menu a:hover {
    background: rgba(72, 198, 255, 0.16) !important;
    border-radius: 14px !important;
}

#sidebar-menu a img,
#sidebar-menu svg {
    filter: drop-shadow(0 0 6px rgba(72, 198, 255, 0.34));
}

/* 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(8, 40, 79, 0.54) !important;
    border-color: rgba(72, 198, 255, 0.22) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24) !important;
    color: #ffffff !important;
}

/* Text/footer/content blocks */
.footer-description,
.bottomtext,
.play-game-desc,
.category-section-top,
#special-page-header-desc {
    background: rgba(8, 40, 79, 0.50) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(72, 198, 255, 0.18) !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(8, 40, 79, 0.50) !important;
    border-color: rgba(72, 198, 255, 0.22) !important;
    color: #ffffff !important;
}

#ava-game_container,
#mobi-play-game,
#mobi-game-preloading,
#game-preloader,
#game-preloading {
    background-color: #071A33 !important;
}

/* Game player bottom bar */
#gameDiv .bg-\[\#212233\] {
    background: rgba(11, 49, 95, 0.90) !important;
    border: 1px solid rgba(72, 198, 255, 0.24) !important;
}

/* Game details card */
.play-game-page-container .bg-\[\#1a1b28\],
.play-game-page-container .bg-\[\#1A1B28\] {
    background: rgba(8, 40, 79, 0.58) !important;
    border: 1px solid rgba(72, 198, 255, 0.20) !important;
}

/* Old play.css boxes */
#detail-top-gamebox,
.intro-ads,
.pro-play_970x90,
.pro-info_336x280_1,
.pro-info_300x600,
.howtoplay-side-as,
#flex-howtoplay h2 {
    background: rgba(11, 49, 95, 0.90) !important;
    border: 1px solid rgba(72, 198, 255, 0.24) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
    color: #ffffff !important;
}

/* Tags */
.game-tags-grid a.bg-\[\#212233\],
.game-tags ul li a,
.game-dec .tags a {
    background: rgba(72, 198, 255, 0.13) !important;
    border: 1px solid rgba(72, 198, 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(72, 198, 255, 0.28) !important;
    border-color: rgba(20, 155, 255, 0.48) !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,
footer,
footer a,
main,
main a,
main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: #ffffff !important;
}

/* Game thumbnails */
.relategames li img,
.common-game-style li a .gameicon,
.common-game-style li a img {
    border-color: rgba(72, 198, 255, 0.34) !important;
    background: rgba(8, 40, 79, 0.52) !important;
}

.relategames li a:hover img,
.common-game-style li a:hover .gameicon,
.common-game-style li a:hover img {
    border-color: #48C6FF !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, #48C6FF 0%, #149BFF 100%) !important;
    border-color: rgba(255,255,255,0.76) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(45, 171, 255, 0.32) !important;
    font-weight: 700 !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, #78D7FF 0%, #2DABFF 100%) !important;
    color: #ffffff !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;
    }
}