/*

Custom style

You can override the default class or style here

This file will not be overwritten by the updater

*/

/* Main Layout - Unified Black Background */
body {
    background-color: #0a0a0a !important;
    /* Solid black background */
    margin: 0;
    padding: 0;
}

/* Sidebar - Fixed Left, Thin Border */
.sidebar-container {
    position: fixed !important;
    top: 60px;
    /* Start below header */
    left: 0;
    width: 200px !important;
    height: calc(100vh - 60px);
    background-color: #0a0a0a !important;
    z-index: 1000;
    border-right: 1px solid #222 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 5px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Allow vertical scrolling */
}

/* Custom scrollbar for sidebar */
.sidebar-container::-webkit-scrollbar {
    width: 6px;
}
.sidebar-container::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}
.sidebar-container::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Header - Fixed Top, Light Blue */
.navbar {
    position: fixed !important;
    top: 0;
    left: 0 !important;
    /* Full width header */
    width: 100% !important;
    height: 60px !important;
    background-color: #1a2a3a !important;
    /* Dark blue tone */
    z-index: 1001;
    /* Above sidebar */
    padding: 0 20px !important;
    border-bottom: 1px solid #2a4a6a;
    box-shadow: none;
}

/* Logo and Site Name Styling */
.site-logo-container {
    display: flex !important;
    align-items: center;
    text-decoration: none;
    margin-left: 10px !important;
    /* Push logo to left */
}

.site-logo-icon {
    height: 28px !important;
    width: auto !important;
    margin-right: 10px;
    display: block !important;
}

.site-logo-text {
    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.text-noads {
    color: #00bfff !important;
    /* Light blue / Cyan */
}

.text-games {
    color: #ffffff !important;
    /* White */
}

/* Main Wrapper - Offset for Fixed Elements */
.main-wrapper {
    margin-left: 200px !important;
    padding-top: 60px !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #0a0a0a !important;
    /* Same black as body */
    width: auto !important;
}

.content-wrapper {
    padding: 20px 40px !important;
    width: 100%;
    max-width: 100% !important;
    margin: 0;
    box-sizing: border-box;
    background-color: #0a0a0a !important;
}

/* Container and Game Container - Full Width */
.container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.site-container {
    max-width: 100% !important;
    width: 100% !important;
}

.game-container {
    width: 100% !important;
    max-width: 100% !important;
}

.grid-wrapper {
    width: 100% !important;
}

/* Unified Black - All Elements */
.footer,
footer {
    background-color: #0a0a0a !important;
    border-top: 1px solid #222 !important;
}

.copyright {
    background-color: #0a0a0a !important;
}

.site-content {
    background-color: #0a0a0a !important;
}

.sidebar {
    background-color: #0a0a0a !important;
    border-right: 1px solid #222 !important;
}

/* Sidebar Items - Full Width with Text */
.sidebar-menu,
.categories-menu,
.list-categories,
ul.sidebar-menu,
ul.categories-menu,
ul.list-categories,
ul.links {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.sidebar-menu li,
.categories-menu li,
.list-categories li {
    display: block !important;
    width: auto !important;
    background: transparent !important;
}

.sidebar-menu a,
.categories-menu a,
.list-categories a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    width: auto !important;
    /* Use auto width */
    height: auto;
    margin: 2px 8px !important;
    /* Smaller margins */
    border-radius: 8px;
    gap: 12px;
    box-sizing: border-box;
    color: #b8b8c2 !important;
}

.sidebar-menu span,
.categories-menu span {
    display: inline !important;
    /* Show text labels */
}

.sidebar-menu i,
.categories-menu i,
.list-categories i {
    margin: 0 !important;
    margin-right: 8px !important;
    font-size: 16px !important;
    color: #b8b8c2;
    width: 20px;
    text-align: center;
}

.sidebar-menu a:hover i,
.sidebar-menu a.active i,
.categories-menu a:hover i,
.list-categories a:hover i {
    color: #fff !important;
}

/* Hide Logo in Sidebar if Header has it, or adjust */
.sidebar-container .site-logo-container {
    display: none;
    /* Assumption: Logo is in header now? Or we keep icon. */
}

/* If logo is in header, ensure it shows */

/* Game Control Bar */
.game-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a1a;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 0 0 10px 10px;
    border: 1px solid #2a2a2a;
    border-top: none;
}

.gc-left .site-logo-text {
    font-size: 20px;
}

.gc-right {
    display: flex;
    gap: 15px;
}

.gc-icon {
    cursor: pointer;
    font-size: 18px;
    color: #aaa;
    transition: color 0.2s, transform 0.2s;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    border-radius: 5px;
}

.gc-icon:hover {
    color: #fff;
    background: #444;
    transform: translateY(-2px);
}

.gc-icon .fa-thumbs-up:hover {
    color: #4CAF50;
}

.gc-icon .fa-thumbs-down:hover {
    color: #F44336;
}

/* Fix spacing for game cards - Centered Grid */
.grid-layout {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    grid-gap: 15px !important;
    /* Clean spacing */
    grid-auto-flow: dense;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure margins on cards don't interfere and add cute rounded corners */
.grid-item {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px;
    /* Cuter rounded corners */
    overflow: hidden;
    /* clean edges */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(108, 66, 245, 0.3);
    /* Purple accent glow */
}

/* Header and Sidebar styling moved to top of file */

.sidebar-menu a {
    color: #b8b8c2 !important;
    /* Soft grey text */
    padding: 10px 16px !important;
    border-radius: 10px;
    /* Soft rounded buttons */
    margin: 4px 12px !important;
    /* Equal margin on left and right */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-weight: 600 !important;
    font-size: 14px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background-color: #00bfff !important;
    /* Light Blue */
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4);
    transform: none;
    /* No shift - keep button centered */
}

.sidebar-menu i {
    width: 24px !important;
    text-align: center;
    margin-right: 12px;
    font-size: 16px !important;
    color: #7b7b8a;
    /* Muted icon color by default */
}

.sidebar-menu a:hover i,
.sidebar-menu a.active i {
    color: #fff !important;
}


/* Fix spacing for game cards */
/* Ensure the last item in a row doesn't have extra margin if using flex, but grid handles it differently.
   If using grid-gap, checking why it fails.
   The screenshot shows them stuck. Maybe they are not in a grid-layout container?
   Let's ensure .list-game has padding too.
*/
.list-game {
    margin: 0;
    width: 100%;
    height: 100%;
    background: transparent;

    /* Increased inner margin for visual separation */
    position: relative;
    /* Context for absolute video */
    overflow: hidden;
    /* Contain the video */
    transition: border-color 0.3s ease;
    border: 2px solid transparent;
    /* Prepare for border change */
    border-radius: 10px;
    /* Match existing radius */
}

/* Hover Effect: Border Color */
.list-game:hover {
    border-color: #00E5FF;
    /* Cyan border on hover */
    /* Remove default transform/opacity if they conflict, though custom.css is loaded after */
}

/* Video Preview Styling */
.list-game video.hover-video {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
    /* Above thumbnail */
}

/* Show video on hover */
.list-game:hover video.hover-video {
    display: block;
}

/* Disable existing hover effects if they interfere */
.grid-layout .list-game:hover>.list-title {
    /* Keep title visible or hide it? User didn't specify, but typically video covers everything. */
    /* If video covers, title might be obscured. Let's keep it simple first. */
    opacity: 0;
    /* Hide title on hover so video is clear */
}

.list-thumbnail:hover {
    opacity: 1 !important;
    /* Prevent default opacity change */
}

/* Sidebar Styling - Increase Font Size */
.sidebar-menu a,
.categories-menu a {
    font-size: 15px !important;
    /* Increased from 14px */
    font-weight: 700 !important;
    height: 40px !important;
    /* Increased height for better touch targets */
}

.sidebar-menu i,
.sidebar-menu img,
.sidebar-icon {
    width: 24px !important;
    /* Slightly larger icons */
    font-size: 20px !important;
}

/* ============================================
   SECTION HEADERS - CrazyGames Style
   ============================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0 5px 0;
    margin-top: 5px;
    border-top: none;
}

.section-header:first-of-type {
    margin-top: 0;
    padding-top: 5px;
}

.section-header i {
    font-size: 18px;
    color: #00bfff;
    /* Light blue accent */
}

.section-header span {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.section-view-all {
    margin-left: auto;
    font-size: 13px;
    color: #00bfff;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.section-view-all:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ============================================
   GAME GRID - Increased Spacing
   ============================================ */
.grid-layout {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    /* Reduced gap to 12px */
    padding: 0 !important;
    margin-bottom: 0 !important;
    grid-auto-rows: auto !important;
    /* Allow rows to size naturally */
}

.grid-item,
.item-grid {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    /* Let aspect ratio determine height */
    aspect-ratio: 5 / 3 !important;
    /* Enforce aspect ratio */
}

/* Game Card Styling */
/* Game Card Styling */
.list-game {
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.list-title {
    display: none !important;
}

.list-game:hover {
    /* transform: translateY(-4px); REMOVED */
    box-shadow: 0 8px 20px rgba(0, 191, 255, 0.2);
}

/* Footer Cleanup */
footer.footer {
    display: none !important;
}

.copyright {
    padding: 8px 0 !important;
    margin: 0 !important;
    background: #0a0a0a;
    font-size: 12px;
}

/* Remove Content Wrapper Margins */
.content-wrapper {
    padding: 15px !important;
    margin: 0 !important;
}

.content-wrapper .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.game-container {
    padding: 5px !important;
    margin: 0 !important;
}

/* Header Logo - Move to Left */
.navbar-brand.site-logo-container {
    margin-left: 5px !important;
    margin-right: auto !important;
}

.text-games {
    margin-left: 3px;
}

.top-nav .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.top-nav,
#mainNav {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Game Iframe Constraints */
.game-iframe-container {
    position: relative !important;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 fallback, JS overrides this */
    background: #000;
    overflow: hidden;
}

.game-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* ============================================
   GOOGLE SIGN-IN BUTTON - Header Styling
   ============================================ */
.nav-item .g_id_signin {
    display: flex !important;
    align-items: center !important;
}

/* Adjust Google button container in navbar */
.nav-item.d-flex {
    margin-left: 10px;
}

/* Override Google button iframe size for header */
.nav-item .g_id_signin iframe {
    max-height: 40px !important;
}

/* Sidebar overlay - hidden by default */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 999;
}
.sidebar-overlay.active {
    display: block;
}

/* Sidebar toggle button - hidden on desktop */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #b8b8c2;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.sidebar-toggle:hover {
    background: rgba(0,191,255,0.15);
    color: #00bfff;
}
.sidebar-toggle.active {
    background: rgba(0,191,255,0.15);
    color: #00bfff;
}

/* ============================================
   MOBILE RESPONSIVE - max-width: 768px
   ============================================ */
@media (max-width: 768px) {
    /* Hide sidebar on mobile */
    .sidebar-container {
        transform: translateX(-100%) !important;
        width: 200px !important;
        transition: transform 0.3s ease;
    }
    .sidebar-container.active,
    .sidebar-container.show {
        transform: translateX(0) !important;
    }

    /* Remove sidebar margin from main content */
    .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Reduce padding */
    .content-wrapper {
        padding: 10px 8px !important;
    }
    .container {
        padding: 0 5px !important;
    }
    .game-container {
        padding: 2px !important;
    }

    /* Smaller game grid for mobile */
    .grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 8px !important;
    }

    /* Show sidebar toggle on mobile */
    .sidebar-toggle {
        display: flex !important;
    }

    /* Navbar adjustments */
    .navbar {
        padding: 0 8px !important;
        height: 50px !important;
    }
    .navbar .container-fluid {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px;
    }

    .main-wrapper {
        padding-top: 50px !important;
    }

    /* Force #navb to stay inline, not collapse */
    #navb {
        display: flex !important;
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        height: auto !important;
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Hide nav menu items on mobile, but keep lang-switcher visible */
    #navb .navbar-nav {
        display: flex !important;
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    #navb .navbar-nav > .nav-item:not(.nav-lang-switcher) {
        display: none !important;
    }
    /* Search bar inline */
    #navb .search-bar {
        flex: 1;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    #navb .search-bar .input-group {
        height: 34px;
    }
    #navb .search-bar input.search {
        font-size: 13px !important;
        padding: 4px 10px !important;
        height: 34px !important;
        border-radius: 8px 0 0 8px !important;
    }
    #navb .search-bar .btn-search {
        height: 34px !important;
        padding: 4px 10px !important;
        border-radius: 0 8px 8px 0 !important;
    }

    /* Logo smaller on mobile */
    .site-logo-text {
        font-size: 16px;
        white-space: nowrap;
    }
    .site-logo-icon {
        height: 20px !important;
        margin-right: 6px !important;
    }

    /* Hide Google sign-in on mobile */
    .nav-item .g_id_signin,
    .nav-item.d-flex {
        display: none !important;
    }

    /* Section headers smaller */
    .section-header span {
        font-size: 15px;
    }
    .section-header i {
        font-size: 15px;
    }

    /* Game page: iframe full width */
    .game-iframe-container {
        width: 100% !important;
    }

    /* Game page: single game layout */
    .single-game .row {
        flex-direction: column !important;
    }
    .single-game .col-md-9,
    .single-game .game-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }
    .single-game .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin-top: 15px;
    }

    /* Game bar: logo left, like/dislike right */
    .game-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding: 8px 10px !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .game-bar-left {
        flex-shrink: 0 !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }
    .game-bar-left .game-bar-logo {
        height: 24px !important;
        vertical-align: middle !important;
    }
    .game-bar-left a {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-decoration: none !important;
    }
    .game-bar-left a::after {
        content: "noads" "games";
        font-family: 'Nunito', sans-serif;
        font-size: 14px;
        font-weight: 800;
    }
    /* Color the text with spans-like effect via gradient */
    .game-bar-left a::after {
        background: linear-gradient(90deg, #b8c6db 0%, #b8c6db 45%, #00bfff 45%, #00bfff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    /* Hide title from game-bar */
    .game-bar .single-title {
        display: none !important;
    }
    .game-bar-right {
        display: flex !important;
        height: auto !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        width: auto !important;
    }
    .game-bar-right .stats-vote,
    .game-bar-right .vote-icons {
        height: auto !important;
    }

    /* Hide fullscreen button on mobile */
    .game-actions .btn-game-action[onclick="open_fullscreen()"] {
        display: none !important;
    }

    /* Game-bar tight under overlay */
    .single-info-container {
        margin-top: -2px !important;
    }

    /* Game info section: smaller title and text on mobile */
    .info-the-game {
        padding: 0 12px !important;
    }
    .info-the-game .main-game-title {
        font-size: 18px !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }
    .info-the-game b {
        font-size: 14px !important;
    }
    .info-the-game .single-description {
        font-size: 13px !important;
    }

    /* Game control bar */
    .game-control-bar {
        padding: 6px 10px;
    }
    .gc-icon {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
}

/* ============================================
   SMALL MOBILE - max-width: 480px
   ============================================ */
@media (max-width: 480px) {
    .grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .content-wrapper {
        padding: 6px 4px !important;
    }

    /* Compact logo on small mobile */
    .site-logo-text {
        font-size: 12px !important;
    }
    .site-logo-icon {
        height: 16px !important;
        margin-right: 4px !important;
    }
}

/* ============================================
   MOBILE FULLSCREEN GAME VIEW
   ============================================ */
/* Overlay with Play Now button - hidden by default, shown via JS on mobile */
.mobile-game-overlay {
    display: none;
    align-items: center;
    justify-content: center;
    width: calc(100% - 16px);
    aspect-ratio: 4/3;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin: 0 8px;
}
.mobile-game-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.mobile-game-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.mobile-play-btn-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
}
.mobile-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 26px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: #fff;
    background: linear-gradient(135deg, #00bfff, #0080ff);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,128,255,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.mobile-play-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(0,128,255,0.3);
}
.mobile-play-btn i {
    font-size: 20px;
}
.mobile-game-title {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80vw;
}

/* ==============================================
   MOBILE FULLSCREEN GAME CONTAINER
   Uses 100dvh (dynamic viewport height) which adapts automatically
   as iOS Safari address bar shows/hides. On Android/iPad the
   Fullscreen API works natively via :fullscreen override.
   ============================================== */
.mobile-fullscreen-game {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport: adapts to Safari bar */
    z-index: 10000;
    background: #000;
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Prevent accidental gestures during gameplay */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    touch-action: none;
}
.mobile-fullscreen-game.active {
    display: flex;
}
/* Native fullscreen override (Android/iPad) */
.mobile-fullscreen-game:fullscreen {
    position: static;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
}
.mobile-fullscreen-game:-webkit-full-screen {
    position: static;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
}
/* In native fullscreen (Android/iPad), override dvh-based heights with flex */
.mobile-fullscreen-game:fullscreen .mobile-fs-topbar,
.mobile-fullscreen-game:-webkit-full-screen .mobile-fs-topbar {
    flex-shrink: 0;
}
.mobile-fullscreen-game:fullscreen .mobile-fs-iframe,
.mobile-fullscreen-game:-webkit-full-screen .mobile-fs-iframe {
    flex: 1;
    width: 100%;
    height: auto !important;
}
/* Lock body scroll when game is active */
body.game-active {
    overflow: hidden !important;
}
html.game-active {
    overflow: hidden !important;
}
.mobile-fs-topbar {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 10001;
    flex-shrink: 0;
}
.mobile-fs-exit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 4px;
    border: none;
    border-radius: 8px;
    background: #dc3545;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-fs-exit:active {
    background: #a71d2a;
}
.mobile-fs-iframe {
    flex: 1;
    border: none;
    width: 100%;
}

/* Portrait: bar on top */
@media (orientation: portrait) {
    .mobile-fullscreen-game {
        flex-direction: column;
    }
    .mobile-fs-topbar {
        width: 100%;
        height: 36px;
        min-height: 36px;
        padding: 0 8px;
    }
    .mobile-fs-iframe {
        width: 100%;
        height: calc(100vh - 36px);
        height: calc(100dvh - 36px - env(safe-area-inset-bottom, 0px));
    }
}

/* Landscape: fullscreen game bar on left side */
@media (orientation: landscape) {
    .mobile-fullscreen-game {
        flex-direction: row;
    }
    .mobile-fs-topbar {
        width: 36px;
        min-width: 36px;
        height: 100%;
        flex-direction: column;
        padding: 8px 0;
    }
    .mobile-fs-iframe {
        width: calc(100vw - 36px);
        height: 100%;
    }
}

/* ==============================================
   FORCE PORTRAIT VIEW ON PHONES IN LANDSCAPE
   When the phone is rotated to landscape, rotate the entire page
   back to portrait so the site always looks correct.
   Only the fullscreen game container (body.game-active) is excluded,
   allowing landscape gameplay while keeping the site in portrait.
   ============================================== */
@media (orientation: landscape) and (max-height: 500px) {
    body:not(.game-active) {
        position: fixed;
        transform: rotate(-90deg);
        transform-origin: top left;
        width: 100vh;  /* short side = portrait width */
        height: 100vw; /* long side = portrait height */
        top: 100%;
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==============================================
   AUTO-ROTATION FOR LANDSCAPE GAMES
   When device is portrait but game is landscape (ratio >= 1.5),
   automatically rotate the game 90deg via CSS transform.
   The user sees the game in landscape and naturally rotates the phone.
   ============================================== */
@media (orientation: portrait) and (max-width: 768px) {
    .mobile-fullscreen-game.active.landscape-game {
        /* Rotate the entire container 90deg clockwise */
        transform: rotate(90deg);
        transform-origin: top left;
        /* Swap dimensions: width becomes viewport height, height becomes viewport width */
        width: 100vh;
        width: 100dvh;
        height: 100vw;
        /* Position: after rotation, top-left corner is at original position,
           but content goes right. Move down by viewport width to compensate. */
        top: 0;
        left: 100vw;
    }
    .mobile-fullscreen-game.active.landscape-game .mobile-fs-topbar {
        /* In rotated view, topbar is on the "top" (which is physically the right side) */
        width: 100%;
        height: 36px;
        min-height: 36px;
        padding: 0 8px;
        flex-direction: row;
    }
    .mobile-fullscreen-game.active.landscape-game .mobile-fs-iframe {
        width: 100%;
        height: calc(100vh - 36px) !important;
        height: calc(100dvh - 36px) !important;
    }
}

/* Platform icon on grid cards */
.list-thumbnail {
    position: relative;
}
.grid-platform-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.7);
    color: #ccc;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1;
}
.grid-platform-mobile {
    color: #4fc3f7;
}

/* Platform badges on game detail page */
.game-platform-badges {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #1a2a3a;
    color: #aac;
}
.platform-badge.platform-mobile {
    background: #1a3a2a;
    color: #8dc;
}

/* Report Modal */
.report-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.report-modal-overlay.active {
    display: flex;
}
.report-modal {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 10px;
    width: 90%;
    max-width: 420px;
    color: #eee;
}
.report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #333;
}
.report-modal-header h3 {
    margin: 0;
    font-size: 16px;
}
.report-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
}
.report-modal-close:hover { color: #fff; }
.report-modal-body {
    padding: 14px 18px;
}
.report-modal-body label {
    display: block;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 4px;
    margin-top: 10px;
}
.report-modal-body label:first-child { margin-top: 0; }
.report-select, .report-textarea {
    width: 100%;
    background: #0f0f1e;
    border: 1px solid #333;
    color: #eee;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
}
.report-textarea {
    height: 70px;
    resize: vertical;
}
.report-select:focus, .report-textarea:focus {
    outline: none;
    border-color: #5588cc;
}
.report-msg {
    margin-top: 8px;
    font-size: 13px;
    min-height: 18px;
}
.report-msg-ok { color: #2ecc71; }
.report-msg-err { color: #e74c3c; }
.report-modal-footer {
    padding: 10px 18px 14px;
}
.report-btn-submit {
    width: 100%;
    padding: 8px;
    background: #e67e22;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.report-btn-submit:hover { background: #d35400; }
.report-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Admin Blacklist Button & Modal */
.btn-admin-blacklist {
    background: #8b0000 !important;
    color: #fff !important;
}
.btn-admin-blacklist:hover {
    background: #a00 !important;
}
.blacklist-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.blacklist-modal-overlay.active {
    display: flex;
}
.blacklist-modal {
    background: #1a1a2e;
    border: 2px solid #8b0000;
    border-radius: 10px;
    width: 90%;
    max-width: 420px;
    color: #eee;
}
.blacklist-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #8b0000;
    background: #2a1a1a;
    border-radius: 8px 8px 0 0;
}
.blacklist-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: #ff6b6b;
}
.blacklist-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
}
.blacklist-modal-close:hover { color: #fff; }
.blacklist-modal-body {
    padding: 14px 18px;
}
.blacklist-modal-body p {
    margin: 6px 0;
    font-size: 14px;
}
.blacklist-warning {
    background: #3a2020;
    border: 1px solid #8b0000;
    border-radius: 6px;
    padding: 10px;
    margin: 12px 0 !important;
    color: #ff9999;
}
.blacklist-modal-body label {
    display: block;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 4px;
    margin-top: 10px;
}
.blacklist-input {
    width: 100%;
    background: #0f0f1e;
    border: 1px solid #333;
    color: #eee;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
}
.blacklist-input:focus {
    outline: none;
    border-color: #8b0000;
}
.blacklist-msg {
    margin-top: 8px;
    font-size: 13px;
    min-height: 18px;
}
.blacklist-msg-ok { color: #2ecc71; }
.blacklist-msg-err { color: #e74c3c; }
.blacklist-modal-footer {
    padding: 10px 18px 14px;
    display: flex;
    gap: 10px;
}
.blacklist-btn-cancel {
    flex: 1;
    padding: 8px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.blacklist-btn-cancel:hover { background: #444; }
.blacklist-btn-confirm {
    flex: 1;
    padding: 8px;
    background: #8b0000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.blacklist-btn-confirm:hover { background: #a00; }
.blacklist-btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* Live Search Dropdown */
.search-wrapper {
    position: relative;
}
.live-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border: 1px solid #333;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.live-search-results.active {
    display: block;
}
.search-section {
    padding: 8px 0;
    border-bottom: 1px solid #333;
}
.search-section:last-child {
    border-bottom: none;
}
.search-section-title {
    padding: 4px 12px;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #eee;
    text-decoration: none;
    transition: background 0.15s;
    gap: 10px;
}
.search-result-item:hover {
    background: #2a2a4e;
    color: #fff;
    text-decoration: none;
}
.search-result-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: #333;
    flex-shrink: 0;
}
.search-result-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 16px;
}
.search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 16px;
    flex-shrink: 0;
}
.search-result-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
.search-no-results {
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .live-search-results {
        position: fixed;
        top: 60px;
        left: 10px;
        right: 10px;
        border-radius: 8px;
        border: 1px solid #333;
    }
}

/* Language Switcher */
.lang-switcher {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    flex-shrink: 0;
}
.lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}
.lang-switcher-btn:hover {
    background: rgba(255,255,255,0.15);
}
.lang-flag {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    object-fit: cover;
}
.lang-code {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.lang-arrow {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s;
}
.lang-switcher.open .lang-arrow {
    transform: rotate(180deg);
}
.lang-dropdown {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #1a1533;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 6px;
    min-width: 170px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 9999;
}
.lang-switcher.open .lang-dropdown {
    display: block !important;
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.lang-option:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
}
.lang-option.active {
    background: rgba(99,102,241,0.15);
    color: #818cf8;
}
@media (max-width: 768px) {
    .lang-code { display: none; }
    .lang-switcher-btn { padding: 6px 8px; }
    .lang-dropdown { right: -40px; }
}

/* Login Page - Dark Theme Fix */
.login-body {
    background-color: #0a0a0a !important;
}
.login-form {
    background-color: #1a1a2e !important;
    border: 1px solid #333;
}
.login-form .form-control {
    background-color: #0f0f1a !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}
.login-form .form-control::placeholder {
    color: #888 !important;
}
.login-form label,
.login-form .form-check-label {
    color: #ccc !important;
}
.login-form .btn-primary {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}
.login-form a {
    color: #818cf8 !important;
}
.login-form .alert {
    background-color: #2a1a1a !important;
    color: #ff8888 !important;
    border-color: #553333 !important;
}

/* Admin Delete Button */
.btn-game-delete {
    color: #dc3545 !important;
}
.btn-game-delete:hover {
    background: rgba(220, 53, 69, 0.2) !important;
}

/* ============================================
   SEO FOOTER SECTION (subtle, for crawlers)
   ============================================ */
.seo-footer {
    padding: 20px 16px 12px;
    border-top: 1px solid #151520;
    margin-top: 16px;
    text-align: center;
}
.seo-footer h1 {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin: 0 0 6px;
}
.seo-footer p {
    font-size: 11px;
    color: #333;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}