/* Site theme base layer ----------------------------------------------------
   Verbatim copy of the vendor <style> block that every crawled page carries
   inline (sha1 df57315ab140..., 16,328 bytes; byte-identical on all sampled
   pages: the 20 character pages, /sprunki-characters, a game page, /games and a
   blog post). The shell header/footer markup in templates/partials is bare -
   this is the stylesheet that gives it its layout, and templates/chrome.css
   overrides its colours by specificity. Authored pages have no crawled <head>,
   so they link this copy instead of repeating the block inline. Keep it
   byte-identical to the crawl so crawled and authored pages render alike.
   ------------------------------------------------------------------------- */


    /* 游戏模块 */
    .custom-thumbnail-container{
        display: none !important;
    }
    .gamePlayerBg{
        display: none !important;
    }
    #customGameIframeContainer{
        display: block !important;
    }

    /* Main Content Styles */
    .content-area-1 {
        max-width: 1598px;
        width: 100%;
        margin: 0 auto;
        padding: 20px 29px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .to-top{
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 22px;
        font-size: 16px;
        cursor: pointer;
        z-index: 50;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        display: none;
    }
    
    .left-sidebar {

        width: 149px;
    }

    .main-content {
        flex: 6;
        min-width: 300px;
        max-width: 990px;
    }

    .right-sidebar {
        flex: 3.3;
        width: 34%;
        min-width: 270px;
    }

    .ad-container {
        /*background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));*/
        /*color: white;*/
        /*padding: 15px;*/
        border-radius: 8px;
        margin-bottom: 20px;
        text-align: center;
        min-height: 100px;
        /*display: flex;*/
        align-items: center;
        /*justify-content: center;*/
    }

    .game-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
        margin-bottom: 20px;
    }

    .game-card:hover {
        transform: translateY(-5px);
    }

    .game-card img {
        width: 100%;
        height: 94px;
        object-fit: cover;
    }

    .game-card h3 {
        font-size: 14px;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .game-iframe-container {
        width: 100%;
        /*height: 79vh;*/
        background: white;
        border-radius: 48px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .game-iframe-container iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    .comments-section {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .game-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(149px, 1fr));
        gap: 12px;
        margin-bottom: 15px;
        max-height: 1410px;
        overflow:hidden;
    }

    .load-more {
        margin: 30px auto 0 ;
        display: block;
        width: 100%;
        max-width:160px;
        padding: 10px;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 5px;
        font-weight: 600;
        cursor: pointer;
        max-height:42px;
        transition: background 0.3s;
        text-align: center;
    }

    .load-more:hover {
        background: var(--secondary-color);
    }

    /* Content Area 2 */
    .content-area-2 {
        width: 100%;
        
        max-width: 1598px;
        margin: 0 auto;
        padding: 40px 29px;
        background: white;
    }

    .about-section {
        margin: 0 auto;
        text-align: center;
    }

    .about-section h2 {
        font-size: 32px;
        margin-bottom: 20px;
        color: var(--primary-color);
    }

    /* Footer Styles */
    footer {
        background: var(--dark-color);
        color: white;
        padding: 30px 29px;
    }

    .footer-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .footer-links {
        display: flex;
        gap: 20px;
    }

    .footer-links a {
        transition: color 0.3s;
    }

    .footer-links a:hover {
        color: var(--secondary-color);
    }

    .language-selector {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .language-card {
        background: rgba(255, 255, 255, 0.1);
        padding: 5px 10px;
        border-radius: 20px;
        transition: background 0.3s;
        cursor: pointer;
    }

    .language-card:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Responsive Styles */
    @media (max-width: 1360px) {
        .left-sidebar {
            display: none;
        }
        header,.games-container {
            padding: 10px 20px;
        }
        .content-area-2 {
            padding: 40px 20px;
        }
        .content-area-1 {
            padding: 40px 20px;
        }
        .main-content {
            flex: 8;
        }

        .right-sidebar {
            flex: 4;
        }
    }

    @media (max-width: 1024px) {
        header {
            flex-direction: column;
            padding: 10px;
        }

        .logo {
            margin-bottom: 15px;
            margin-left:;
        }

        nav ul {
            flex-wrap: wrap;
            justify-content: center;
        }

        nav ul li {
            margin: 0 10px 10px;
        }
        
        header,.games-container {
            padding: 20px 15px;
        }
        
        .content-area-2 {
            padding: 20px 15px;
        }
        
        .content-area-1 {
            padding: 20px 15px;
        }
        
        .search-box {
            margin: 15px 0 0;
            width: 100%;
        }

        .search-box input {
            width: 90%;
        }

        .right-sidebar {
            flex: 100%;
            margin-top: 20px;
        }

        .game-grid {
            grid-template-columns: repeat(auto-fill, minmax(120px, 2fr));
        }

        .footer-top {
            flex-direction: column;
            text-align: center;
        }

        .footer-links {
            margin-top: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .to-top{
            display: block;
        }
        nav ul li {
            margin: 0 5px 10px;
            font-size: 14px;
        }

        .game-card img {
            height: 100px;
        }
        
        header,.games-container {
            padding: 10px 10px;
        }
        
        .content-area-2 {
            padding: 10px 10px;
        }
        
        .content-area-1 {
            padding: 10px 10px;
        }
        .game-iframe-container {
            /*height: 50vh;*/
        }
    }
    /* 中部3 */
    .about-section {
        display: flex;
        margin: 30px 0;
    }

    .about-left, .about-right {
        width: 50%;
        padding: 0 15px;
    }

    .about-left {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
    }

    .about-right {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
    }

    .rating-stars {
        color: #ffc107;
        margin-bottom: 10px;
    }

    .rating-bar {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .rating-label {
        width: 80px;
    }

    .rating-progress {
        flex-grow: 1;
        height: 10px;
        background-color: #e9e9e9;
        border-radius: 5px;
        margin: 0 10px;
        overflow: hidden;
    }

    .rating-progress-fill {
        height: 100%;
        background-color: #ffc107;
    }

    .rating-count {
        width: 30px;
        text-align: right;
    }

    .comments-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    .footer-links {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: -16%;
    }

    .footer-link {
        margin: 0 15px;
        color: #aaa;
        font-size: 14px;
    }

    .footer-link:hover {
        color: white;
    }
    @media (max-width: 768px) {
        .about-section {
            flex-direction: column;
        }

        .about-left,
        .about-right {
            width: 100%;
            margin-bottom: 20px;
        }

        /* 确保 about-left 在 about-right 上面 */
        /*.about-left {*/
        /*    order: 2;*/
        /*}*/

        /*.about-right {*/
        /*    order: 1;*/
        /*}*/
    }
    :root {
        --primary-color: #6c5ce7;
        --secondary-color: #00cec9;
        --accent-color: #fd79a8;
        --dark-color: #2d3436;
        --light-color: #f5f6fa;
        --text-color: #2d3436;
        --text-light: #636e72;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        background-color: var(--light-color);
        color: var(--text-color);
        line-height: 1.6;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    /* Header Styles */
    header {
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 15px 29px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 0;
        z-index: 100;
    }

    .logo {
        font-size: 28px;
        font-weight: 700;
        color: var(--primary-color);
        display: flex;
        align-items: center;
    }

    .logo span {
        color: var(--accent-color);
    }

    nav ul {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    nav ul li {
        margin-left: 25px;
    }

    nav ul li a {
        font-weight: 600;
        transition: color 0.3s;
        color:white;
    }

    nav ul li a:hover {
        color: white;
    }

    .search-box {
        margin: 5px;
        position: relative;
        margin-right: 20px;
        text-align: center;
    }
    
    .search-box form {
        display: flex;
        align-items: center;
    }

    .search-box button {
        transform: translateY(0%);
        background: none;
        border: none;
        margin-left: -30px;
        color: var(--text-light);
        cursor: pointer;
    }
    /* 全局样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        background-image: url(/themes/game9mb/public/image/body-bg.webp);
        background-size: 100% 100%;
        background-color: #f5f5f5;
        color: #333;
        line-height: 1.6;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    .container {
        width: 100%;
        margin: 0 auto;
        padding: 0 15px;
    }

    /* 头部导航 */
    header {
        background-color: #1a1a2e;
        padding: 15px 0;
        /*position: sticky;*/
        top: 0;
        z-index: 100;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #242331;
    }

    .logo {
        font-size: 24px;
        font-weight: bold;
        color: white;
        margin-left: 70px;
    }
    
    .logo-footer{
        margin-right: 30px;
    }

    .logo span {
        color: #4cc9f0;
    }

    .search-container {
        display: flex;
        align-items: center;
    }

    .search-box {
        margin:5px;
        position: relative;
        margin-right: 20px;
    }

    .search-box input {
        padding: 2px 15px;
        border-radius: 20px;
        border: 1px solid #ddd;
        min-width: 400px;
        width: 80%;
        height:40px;
        line-height: 40px;
        outline: none;
    }

    .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #777;
    }

    .nav-links {
        display: flex;
    }

    header nav li {
        padding: 8px 15px;
        margin-left: 5px;
        border-radius: 5px;
        font-weight: bold;
        color: white;
        border-radius: 90px 90px 90px 90px;
        text-transform: uppercase;
        font-size: 14px;
        line-height:31px;
    }
    header nav li:nth-child(1) { background-color: #FFCA37; }
    header nav li:nth-child(2) { background-color: #9089F2; }
    header nav li:nth-child(3) { background-color: #A6D776; }
    header nav li:nth-child(4) { background-color: #FF9437; }
    header nav li:nth-child(5) { background-color: #C18BE5; }
    header nav li:nth-child(6) { background-color: #8E83D2; }
    header nav li:nth-child(7) { background-color: #25d366; }
    header nav li:nth-child(8) { background-color: #C1d366; }
    header nav li:nth-child(9) { background-color: #FF9366; }
    header nav li:nth-child(10) { background-color: #FF93ff; }
    header nav li:nth-child(11) { background-color: rgb(117,247,251); }
    .section-title {
        display: flex;
        align-items: center;
        margin: 0px 0 15px;
        font-size: 18px;
        font-weight: bold;
    }

    .section-title i {
        margin-right: 10px;
        color: #4cc9f0;
    }
    .media-links {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        margin-bottom: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        margin-top: 29px;
    }
    .ad-banner {
        width: 100%;
        height: 300px;
        background-color: #e9e9e9;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-bottom: 20px;
        color: #777;
        font-style: italic;
    }

    /* 中部2 */
    .categories {
        width: 100%;
        background-color: white;
        padding: 20px 0;
    }
    
    .category-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    
    .category-item {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 12px;
        height: 89px;
        font-weight: bold;
        text-align: right;
    }
    
    .category-item i {
        margin-right: 0;
        margin-left: 30px;
        order: 1;
    }
    
    /* 分类项背景图片和颜色 */
    .category-item:nth-child(1) {
        background-image: url(/themes/game9mb/public/image/8.png);
        width: 264px;
        color: #5e548e;
    }
    .category-item:nth-child(2) {
        background-image: url(/themes/game9mb/public/image/7.png);
        width: 264px;
        color: #3a0ca3;
    }
    .category-item:nth-child(3) {
        background-image: url(/themes/game9mb/public/image/9.png);
        width: 264px;
        color: #240046;
    }
    .category-item:nth-child(4) {
        background-image: url(/themes/game9mb/public/image/1.png);
        width: 264px;
        color: #14213d;
    }
    .category-item:nth-child(5) {
        background-image: url(/themes/game9mb/public/image/2.png);
        width: 264px;
        color: #1b263b;
    }
    @media (max-width: 1586px) {
    /* 重新排列header布局 */
    header {
        flex-direction: column;
        padding: 15px 20px;
    }
    
    /* 将logo移动到顶部 */
    .logo {
        order: -1; /* 使logo成为第一个元素 */
        margin-bottom: 15px;
        margin-left:0;
        
    }
    .logo-footer {
        margin-right: 20px;
    }
    
    /* 搜索框保持在中间 */
    .search-box {
        order: 0;
        margin: 0 auto 15px; /* 居中并添加底部间距 */
        width: 100%;
        max-width: 600px; /* 限制搜索框最大宽度 */
    }
    
    /* 导航菜单移动到搜索框下方 */
    nav {
        order: 1;
        width: 100%;
    }
    
    /* 导航菜单项居中显示 */
    nav ul {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* 调整导航菜单项间距 */
    nav ul li {
        margin: 5px 10px;
    }
}

/* 对于更小的屏幕进一步调整 */
@media (max-width: 768px) {
    .search-box input {
        min-width: unset; /* 移除最小宽度限制 */
        width: 90%;
    }
    
    nav ul li {
        font-size: 14px;
        padding: 5px 10px;
    }
}


/* #main-nav offset - the vendor's own extra 130-byte block on /sprunki-characters. */
    #main-nav {
      top:70px;
    }
    @media (max-width:1590px){
        #main-nav{
            top:170px;
        }
    }