/**
 * MaxiGames Custom Theme Customization
 * Custom CSS for modern gaming portal design
 * 
 * Color Palette:
 * - Primary Background: #0b0e11
 * - Secondary Background: #1a1d23
 * - Card Background: rgba(255,255,255,0.05)
 * - Purple Accent: #8b5cf6
 * - Green Accent: #22c55e
 * - Text Primary: #ffffff
 * - Text Secondary: #9ca3af
 */

/* Google Fonts - Inter for modern typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. BASE & ROOT VARIABLES
   ========================================================================== */

:root {
    --pg-bg-primary: #070708;
    /* Matches Sidebar */
    --pg-bg-secondary: #1a1d23;
    --pg-bg-card: rgba(255, 255, 255, 0.05);
    --pg-bg-card-hover: rgba(255, 255, 255, 0.1);
    --pg-purple: #9747FF;
    --pg-purple-dark: #7c3aed;
    --pg-purple-light: #a78bfa;
    --pg-green: #22c55e;
    --pg-green-light: #4ade80;
    --pg-red: #ef4444;
    --pg-orange: #f97316;
    --pg-text-primary: #ffffff;
    --pg-text-secondary: #9ca3af;
    --pg-text-muted: #6b7280;
    --pg-border: rgba(255, 255, 255, 0.1);
    --pg-radius-sm: 8px;
    --pg-radius-md: 12px;
    --pg-radius-lg: 16px;
    --pg-radius-xl: 20px;
    --pg-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --pg-transition: all 0.3s ease;
}

/* ==========================================================================
   2. GLOBAL STYLES
   ========================================================================== */

html,
body {
    background: var(--pg-bg-primary) !important;
    color: var(--pg-text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body {
    background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        var(--pg-bg-primary) !important;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: var(--pg-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--pg-purple);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pg-purple-light);
}

/* Links */
a {
    color: var(--pg-text-primary) !important;
    transition: var(--pg-transition);
}

a:hover {
    color: var(--pg-purple-light) !important;
}

/* ==========================================================================
   3. HEADER STYLES
   ========================================================================== */

.hdcn,
.hdcn-1,
.hdcn-2,
.hdcn-3,
.hdcn-4,
.hdcn-5,
header.hdcn {
    background: var(--pg-bg-secondary) !important;
    border-bottom: 1px solid var(--pg-border) !important;
}

#header_horizontal {
    background: linear-gradient(180deg, var(--pg-bg-secondary) 0%, var(--pg-bg-primary) 100%) !important;
    padding: 10px 0;
}

#header_horizontal .cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo img {
    max-height: 40px;
    filter: brightness(1.1);
}

/* Search Bar Styling */
#modl-srch .modal-content input,
.searchform input[type="text"],
.search-field {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid transparent !important;
    border-radius: var(--pg-radius-xl) !important;
    color: var(--pg-text-primary) !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    transition: var(--pg-transition);
}

#modl-srch .modal-content input:focus,
.searchform input[type="text"]:focus,
.search-field:focus {
    border-color: var(--pg-purple) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3) !important;
}

#modl-srch .modal-content input::placeholder {
    color: var(--pg-text-muted) !important;
}

/* Navigation Menu */
nav.menu,
.nav_menu {
    background: transparent !important;
}

nav.menu>ul>li>a,
.nav_menu>li>a {
    color: var(--pg-text-primary) !important;
    font-weight: 600;
    padding: 10px 16px !important;
    border-radius: var(--pg-radius-md);
    transition: var(--pg-transition);
}

nav.menu>ul>li>a:hover,
.nav_menu>li>a:hover {
    background: var(--pg-bg-card-hover) !important;
    color: var(--pg-purple-light) !important;
}

/* User Panel / Login Button */
.user_panel a,
.menu-botn {
    background: var(--pg-purple) !important;
    color: white !important;
    border-radius: var(--pg-radius-md) !important;
    padding: 8px 16px !important;
    font-weight: 600;
    transition: var(--pg-transition);
}

.user_panel a:hover,
.menu-botn:hover {
    background: var(--pg-purple-dark) !important;
    transform: translateY(-2px);
}

/* Mobile Menu Button */
.menu-botn {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-md) !important;
}

/* ==========================================================================
   4. BODY CONTENT
   ========================================================================== */

.bdcn {
    background: var(--pg-bg-primary) !important;
    padding: 20px 0 !important;
}

.cont {
    max-width: 1400px;
}

/* ==========================================================================
   5. SECTION TITLES
   ========================================================================== */

.titl {
    color: var(--pg-text-primary) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    border-bottom: none !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.titl::before {
    content: '';
    display: none;
}

.titl div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Section Icon */
.titl [class*="fa-"]::before {
    color: var(--pg-purple) !important;
    font-size: 20px;
}

/* "Show All" Link */
.titl a,
a.botn-mrgm {
    background: var(--pg-purple) !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: var(--pg-radius-xl) !important;
    text-transform: none !important;
    transition: var(--pg-transition);
}

.titl a:hover,
a.botn-mrgm:hover {
    background: var(--pg-purple-dark) !important;
    transform: translateY(-2px);
}

/* Sorting Dropdown */
.game_sorting .mt-slct-cn,
.game_sorting select {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-md) !important;
    color: var(--pg-text-primary) !important;
    border: 1px solid var(--pg-border) !important;
}

/* Music (Fix) */
aside.sdbr-cn a[href*="/category/music"]::before,
aside.sdbr-cn a[href*="/music"]::before {
    content: '\f001' !important;
}

/* Music Note */

/* ==========================================================================
   HOMEPAGE WIDGET GRID DESIGN
   ========================================================================== */

/* 1. Main Widget Container - Clean Slate */
.blk-cn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
    /* Space between sections */
}

/* 2. Section Header - Remove "Pill" Styling */
.blk-cn .titl {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    line-height: 1.2 !important;
}

/* Section Title - Big Bold White Text */
.blk-cn .titl a,
.blk-cn .titl a:first-child {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    /* Rounded Bold */
    color: #ffffff !important;
    text-transform: none !important;
    text-decoration: none !important;
}

/* "View All" Link - Subtle Muted Text */
.blk-cn .titl .botn-mrgm {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.56) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
}

.blk-cn .titl .botn-mrgm:hover {
    color: #ffffff !important;
    background: transparent !important;
}

/* Ensure icon behaves */
.blk-cn .titl .botn-mrgm::before {
    display: none !important;
    /* Remove icon if unwanted, or style it */
}

/* 3. GRID LAYOUT ENGINE (Critical Fix) */
ul.lst-gmct-cntcls-n6 {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    /* Force 6 Columns */
    gap: 20px 14px !important;
    /* Row Gap 20px, Col Gap 14px */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

ul.lst-gmct-cntcls-n6 li {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    display: block !important;
}

/* 4. Game Card Styling */
.gmcn-larg {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Image Container */
.gmcn-larg .gm-imag {
    border-radius: 17px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    background: #1a1a1a !important;
    /* Placeholder bg */
    aspect-ratio: 16/9 !important;
    /* Enforce Ratio */
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}

/* Image Hover - Scale Effect */
.gmcn-larg:hover .gm-imag img {
    transform: scale(1.05) !important;
}

.gmcn-larg .gm-imag img {
    border-radius: 17px !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

/* Game Title */
.gmcn-larg .gm-titl {
    height: auto !important;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: left !important;
    width: 100% !important;
}

.gmcn-larg .gm-titl a {
    font-size: 15px !important;
    /* Refined size */
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    line-height: 1.4 !important;
}

.gmcn-larg:hover .gm-titl a {
    color: #ffffff !important;
}

/* Hide Unwanted Meta Data */
.gmcn-larg .gm-desc,
.gmcn-larg .gm-vpcn,
/* Ratings */
.gmcn-larg .gm-view,
.gmcn-larg .fa-gamepad,
.gmcn-larg .fa-plus {
    display: none !important;
}

/* 5. Responsive Adjustments */
@media (max-width: 1200px) {
    ul.lst-gmct-cntcls-n6 {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

@media (max-width: 992px) {
    ul.lst-gmct-cntcls-n6 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    ul.lst-gmct-cntcls-n6 {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 Cols on Phone */
        gap: 15px 10px !important;
    }

    .blk-cn .titl a {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   WIDGET DESIGN VARIANTS (Grid vs Row)
   ========================================================================== */

/* Variant: Horizontal Row (Selectable in Widget) */
.blk-cn.design-row ul.lst-gmct-cntcls-n6 {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
    /* Remove legacy padding */
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    /* Hide Firefox Scrollbar */
    -ms-overflow-style: none !important;
    /* Hide IE Scrollbar */
}

/* Hide Webkit Scrollbar */
.blk-cn.design-row ul.lst-gmct-cntcls-n6::-webkit-scrollbar {
    display: none !important;
}

.blk-cn.design-row ul.lst-gmct-cntcls-n6 li {
    min-width: 180px !important;
    width: 180px !important;
    flex: 0 0 auto !important;
}

/* Icons in Title: Bigger & White & Force FontAwesome */
.blk-cn .titl a {
    display: inline-flex !important;
    align-items: center !important;
}

.blk-cn .titl i.fa,
.blk-cn .titl i.fas,
.blk-cn .titl i.far,
.blk-cn .titl i.fab {
    font-family: "Font Awesome 5 Free", FontAwesome, sans-serif !important;
    font-weight: 900 !important;
    /* Solid icons need weight 900 */
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;

    font-size: 26px !important;
    /* Match Title Size */
    margin-right: 12px !important;
    color: #ffffff !important;
    /* Force White */
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Game List Container */
[class*="lst-gams"],
.lst-gams,
.lst-gams-friv,
.lst-gams-sidebar-friv {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

[class*="lst-gams"]>li {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Game Card - Small */
[class*="gmcn-smal"],
[class*="gmcn-midl"],
[class*="gmcn-larg"] {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-lg) !important;
    overflow: hidden !important;
    transition: var(--pg-transition);
    position: relative;
    height: auto !important;
    padding: 0 !important;
}

[class*="gmcn-smal"]:hover,
[class*="gmcn-midl"]:hover,
[class*="gmcn-larg"]:hover {
    background: var(--pg-bg-card-hover) !important;
    transform: translateY(-4px);
    box-shadow: var(--pg-shadow);
}

/* Game Image Container */
.gm-imag {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    overflow: hidden !important;
    border-radius: var(--pg-radius-lg) !important;
    aspect-ratio: 16/10;
}

[class*="gmcn-smal"] .gm-imag,
[class*="gmcn-smal"] .gm-imag img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10;
}

.gm-imag img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--pg-radius-lg) !important;
    transition: var(--pg-transition);
}

.gm-imag:hover img {
    transform: scale(1.08) !important;
    opacity: 1 !important;
}

/* Play Overlay */
.gm-imag a>span,
.gm-play {
    background: var(--pg-purple) !important;
    border-radius: var(--pg-radius-md) !important;
    opacity: 0;
    transition: var(--pg-transition);
}

[class*="gmcn-"]:hover .gm-imag a>span,
[class*="gmcn-"]:hover .gm-play {
    opacity: 1;
}

/* Game Title */
.gm-titl {
    padding: 10px 12px !important;
    text-align: center;
}

.gm-titl a {
    color: var(--pg-text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-titl a:hover {
    color: var(--pg-purple-light) !important;
}

/* Game text container */
.gm-text {
    background: transparent !important;
    position: relative !important;
}

/* Rating & Views */
.gm-vpcn,
.gm-vote,
.gm-play {
    font-size: 11px !important;
    color: var(--pg-text-secondary) !important;
}

/* ==========================================================================
   7. GAME BADGES (HOT, TOP, NEW)
   ========================================================================== */

/* Badge Container - Add via CSS pseudo-elements or JS */
.game-badge,
.gm-cate a {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* HOT Badge (Red) */
.badge-hot,
.gm-cate a[href*="hot"],
.gm-cate a[href*="trending"] {
    background: var(--pg-red) !important;
    color: white !important;
}

/* TOP Badge (Orange/Yellow) */
.badge-top,
.gm-cate a[href*="top"],
.gm-cate a[href*="popular"] {
    background: var(--pg-orange) !important;
    color: white !important;
}

/* NEW Badge (Green) */
.badge-new,
.gm-cate a[href*="new"] {
    background: var(--pg-green) !important;
    color: white !important;
}

/* Category Badges General */
.gm-cate {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10;
}

.gm-cate a {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    background: var(--pg-purple) !important;
    margin-right: 4px !important;
    margin-bottom: 4px !important;
}

/* ==========================================================================
   8. SIDEBAR STYLES
   ========================================================================== */

.sdbr-cn,
.sidebar,
aside {
    background: var(--pg-bg-secondary) !important;
    border-radius: var(--pg-radius-lg) !important;
    padding: 20px !important;
}

/* Sidebar Widgets */
.blk-cn,
.widget {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-md) !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

.blk-cn .titl,
.widget .titl {
    font-size: 16px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--pg-border) !important;
}

/* Sidebar game cards */
.sdbr-cn [class*="gmcn-smal"] {
    background: var(--pg-bg-card) !important;
    margin-bottom: 10px !important;
}

/* Tag Cloud */
.tagcloud a {
    background: var(--pg-bg-card) !important;
    color: var(--pg-text-primary) !important;
    border-radius: var(--pg-radius-sm) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    margin: 3px !important;
    border: 1px solid var(--pg-border);
    transition: var(--pg-transition);
}

.tagcloud a:hover {
    background: var(--pg-purple) !important;
    border-color: var(--pg-purple);
}

/* ==========================================================================
   9. CATEGORY SIDEBAR (MaxiGames-style)
   ========================================================================== */

/* Category List */
.lst-menu>li>a,
.menu-cate a,
.widget_categories a,
.widget_nav_menu a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    margin-bottom: 4px;
    border-radius: var(--pg-radius-md) !important;
    background: transparent !important;
    color: var(--pg-text-primary) !important;
    font-weight: 500;
    transition: var(--pg-transition);
}

.lst-menu>li>a:hover,
.menu-cate a:hover,
.widget_categories a:hover,
.widget_nav_menu a:hover {
    background: var(--pg-bg-card-hover) !important;
    color: var(--pg-purple-light) !important;
}

.lst-menu>li>a::before,
.widget_categories a::before {
    content: '' !important;
    width: 32px;
    height: 32px;
    background: var(--pg-bg-card);
    border-radius: var(--pg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   10. FOOTER STYLES
   ========================================================================== */

.ftcn,
.ftcn-1,
.ftcn-2,
footer.ftcn {
    color: var(--pg-text-primary) !important;
}

footer.ftcn {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--pg-border) !important;
}

.ftcn-1 {
    padding: 44px 0 30px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ftcn .cntcls {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ftcn .cntcls>* {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

.ftcn-2 {
    background: #090b11 !important;
    padding: 16px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: left;
}

.ftcn-2 .cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ftcn-2 p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
}

.ftcn .titl {
    color: var(--pg-text-primary) !important;
    font-size: 14px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ftcn p,
.ftcn li,
.ftcn span {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}

.ftcn a {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.2s ease;
}

.ftcn a:hover {
    color: #c7abff !important;
}

/* Footer Widgets */
.ftcn .ftblk,
.ftcn .widget,
.ftcn .blk-cn {
    padding: 16px !important;
    backdrop-filter: blur(4px);
}

.ftcn-lang {
    padding: 12px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ftcn-lang-widget {
    width: 100%;
}

.ftcn-lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ftcn-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(6, 9, 16, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f4f6ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ftcn-lang-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(199, 171, 255, 0.75);
    background: rgba(16, 21, 33, 0.95);
    color: #ffffff !important;
}

.ftcn-lang-pill.is-active {
    cursor: default;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(18, 22, 33, 0.96);
    color: #ffffff !important;
}

.ftcn-lang-pill.is-active:hover {
    transform: none;
}

.ftcn-lang-flag {
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
}

.ftcn-lang-flag-img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
}

@media screen and (min-width: 993px) {
    .ftcn .cntcls {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ftcn .cont {
        padding-left: calc(20px + 70px) !important;
    }
}

@media screen and (max-width: 992px) {
    .ftcn-1 {
        padding: 28px 0 20px !important;
    }

    .ftcn-lang {
        padding: 10px 0 14px;
    }

    .ftcn-lang-list {
        gap: 8px;
    }

    .ftcn-lang-pill {
        padding: 8px 12px;
        font-size: 12px !important;
    }

    .ftcn .cont {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Random Game Button */
a.rndgame,
.botn-gtop {
    background: var(--pg-purple) !important;
    color: white !important;
    border-radius: var(--pg-radius-xl) !important;
    padding: 12px 24px !important;
    font-weight: 600;
    transition: var(--pg-transition);
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

a.rndgame:hover,
.botn-gtop:hover {
    background: var(--pg-purple-dark) !important;
    transform: translateY(-2px);
}

/* Back to Top */
.botn-gtop {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    z-index: 1000;
}

/* ==========================================================================
   11. BUTTONS & FORMS
   ========================================================================== */

/* Primary Buttons */
[class*="botn"],
button,
input[type="submit"],
input[type="button"],
.button,
a.read-more {
    background: var(--pg-purple) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--pg-radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: var(--pg-transition);
}

[class*="botn"]:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
a.read-more:hover {
    background: var(--pg-purple-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: var(--pg-bg-card) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    color: var(--pg-text-primary) !important;
    padding: 12px 16px !important;
    transition: var(--pg-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--pg-purple) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2) !important;
    outline: none !important;
}

/* ==========================================================================
   12. MODAL STYLES
   ========================================================================== */

.modal-content {
    background: var(--pg-bg-secondary) !important;
    border-radius: var(--pg-radius-lg) !important;
    border: 1px solid var(--pg-border) !important;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.8) !important;
}

.modl-titl {
    color: var(--pg-text-primary) !important;
}

.clos-modl {
    color: var(--pg-text-secondary) !important;
}

.clos-modl:hover {
    color: var(--pg-text-primary) !important;
}

/* ==========================================================================
   13. PAGINATION
   ========================================================================== */

.wp-pagenavi a,
.wp-pagenavi span {
    background: var(--pg-bg-card) !important;
    color: var(--pg-text-primary) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: var(--pg-radius-md) !important;
    padding: 8px 14px !important;
    margin: 2px !important;
    transition: var(--pg-transition);
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    background: var(--pg-purple) !important;
    border-color: var(--pg-purple) !important;
    color: white !important;
}

/* ==========================================================================
   14. GAME PLAY PAGE
   ========================================================================== */

.game-cn {
    background: var(--pg-bg-secondary) !important;
    border-radius: var(--pg-radius-lg) !important;
    padding: 20px !important;
}

.game-ctrl {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-md) !important;
    padding: 15px !important;
}

.game_opts>li>a::before,
.game_opts>li>span>a::before {
    background: var(--pg-bg-card) !important;
    border-radius: 50% !important;
}

.game_opts>li:hover>a::before,
.game_opts>li:hover>span>a::before {
    background: var(--pg-purple) !important;
}

/* Game Description */
.game_tags a {
    background: var(--pg-bg-card) !important;
    color: var(--pg-text-primary) !important;
    border-radius: var(--pg-radius-sm) !important;
    padding: 6px 12px !important;
    border: 1px solid var(--pg-border);
    transition: var(--pg-transition);
}

.game_tags a:hover {
    background: var(--pg-purple) !important;
    border-color: var(--pg-purple);
}

/* ==========================================================================
   15. SLIDER / CAROUSEL
   ========================================================================== */

.lstgms {
    border-bottom-color: var(--pg-purple) !important;
}

.lstgms .bx-controls-direction a,
.bx-prev,
.bx-next {
    background: var(--pg-bg-card) !important;
    color: var(--pg-text-primary) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    transition: var(--pg-transition);
}

.lstgms .bx-controls-direction a:hover,
.bx-prev:hover,
.bx-next:hover {
    background: var(--pg-purple) !important;
}

/* ==========================================================================
   16. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media screen and (max-width: 1200px) {
    [class*="lst-gams"] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
}

@media screen and (max-width: 992px) {
    [class*="lst-gams"] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }

    .sdbr-cn {
        margin-top: 30px;
    }
}

@media screen and (max-width: 767px) {
    [class*="lst-gams"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .gm-titl {
        padding: 8px !important;
    }

    .gm-titl a {
        font-size: 11px !important;
    }

    .titl {
        font-size: 18px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #header_horizontal .cont {
        flex-wrap: wrap;
        gap: 10px;
    }

    .botn-gtop {
        width: 45px !important;
        height: 45px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

@media screen and (max-width: 480px) {
    [class*="lst-gams"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cont {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================================================
   17. LOADING & ANIMATIONS
   ========================================================================== */

.bx-loading::before,
#loadingpromotedgames::before,
#loading::before,
.mt-bx-loading::before {
    color: var(--pg-purple) !important;
}

/* Progress Bar */
#progressbar {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-sm) !important;
    overflow: hidden;
}

#progressbarloadbg {
    background: linear-gradient(90deg, var(--pg-purple), var(--pg-purple-light)) !important;
}

/* Fade-in Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[class*="gmcn-"] {
    animation: fadeInUp 0.4s ease forwards;
}

/* ==========================================================================
   18. MISCELLANEOUS OVERRIDES
   ========================================================================== */

/* Remove box shadow from default theme */
.boxed-cont {
    box-shadow: none !important;
    background: transparent !important;
}

/* Hall of Fame */
#hall_of_fame {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-lg) !important;
    padding: 20px !important;
}

#hall_of_fame .avatar img {
    border-color: var(--pg-purple) !important;
    background: var(--pg-bg-secondary) !important;
}

/* Comments */
.cmnt-cn>div {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-md) !important;
}

.cmnt-cn>div::before {
    border-top-color: var(--pg-bg-card) !important;
}

.cmnt-cn figure {
    background: var(--pg-bg-secondary) !important;
}

/* Messages */
div#message.info {
    background: var(--pg-bg-card) !important;
    border-color: var(--pg-purple) !important;
    color: var(--pg-text-primary) !important;
}

/* Calendar Widget */
#wp-calendar thead th {
    background: var(--pg-bg-card) !important;
}

/* Avatar */
img.avatar {
    border-color: var(--pg-purple) !important;
    background: var(--pg-bg-secondary) !important;
}

/* Related Games YARPP */
.yarpp-related>div {
    background: var(--pg-bg-card) !important;
    border-radius: var(--pg-radius-lg) !important;
}

/* Breadcrumb */
.navtop {
    color: var(--pg-text-secondary) !important;
}

.navtop a {
    color: var(--pg-text-secondary) !important;
}

.navtop a:hover {
    color: var(--pg-purple-light) !important;
}

/* Print - maintain dark theme basics */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
}

/* ==========================================================================
   19. FULL-WIDTH HOMEPAGE LAYOUT
   ========================================================================== */

/* Remove boxed layout constraints */
.boxed .wrapper,
.wrapper,
.cont {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
}

/* For larger screens, add some padding */
@media screen and (min-width: 1200px) {
    .cont {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Remove boxed shadow and constraints */
.boxed-cont {
    box-shadow: none !important;
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Body content full width */
.bdcn {
    max-width: 100% !important;
}

/* ==========================================================================
   20. HOMEPAGE WITH LEFT SIDEBAR LAYOUT
   ========================================================================== */

/* Main container for homepage with sidebar */
/* body.home .wrapper,
body.home .bdcn .cont {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px;
} */

/* Left Category Sidebar */
body.home .sdbr-cn {
    position: sticky;
    top: 80px;
    flex: 0 0 220px;
    width: 220px !important;
    max-width: 220px !important;
    height: fit-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: var(--pg-bg-secondary) !important;
    border-radius: var(--pg-radius-lg) !important;
    padding: 15px !important;
    order: -1;
    /* Move sidebar to left */
}

/* Main content area */
body.home .mncn {
    flex: 1;
    min-width: 0;
}

/* Category sidebar items */
.sdbr-cn .widget_categories ul,
.sdbr-cn .widget_nav_menu ul,
.sdbr-cn .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sdbr-cn .widget_categories li,
.sdbr-cn .widget_nav_menu li,
.sdbr-cn .menu li {
    margin-bottom: 2px;
}

.sdbr-cn .widget_categories a,
.sdbr-cn .widget_nav_menu a,
.sdbr-cn .menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    border-radius: var(--pg-radius-md) !important;
    color: var(--pg-text-primary) !important;
    font-size: 14px;
    font-weight: 500;
    transition: var(--pg-transition);
    text-decoration: none !important;
}

.sdbr-cn .widget_categories a:hover,
.sdbr-cn .widget_nav_menu a:hover,
.sdbr-cn .menu a:hover {
    background: var(--pg-bg-card-hover) !important;
    color: var(--pg-purple-light) !important;
}

/* Hide widget titles in category sidebar for cleaner look */
.sdbr-cn .widget .titl,
.sdbr-cn .blk-cn .titl {
    display: none !important;
}

/* Make category sidebar widgets seamless */
.sdbr-cn .widget,
.sdbr-cn .blk-cn {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 5px !important;
}

/* ==========================================================================
   21. HIDE CATEGORY BADGES & RATINGS ON GAME CARDS
   ========================================================================== */

/* Hide category badges on game cards */
.gm-cate,
[class*="gmcn-"] .gm-cate,
.lst-gams .gm-cate,
.lst-gams-friv .gm-cate {
    display: none !important;
}

/* Hide rating stars on game cards */
.gm-vote,
.gm-vpcn,
.post-ratings,
[class*="gmcn-"] .gm-vote,
[class*="gmcn-"] .gm-vpcn,
[class*="gmcn-"] .post-ratings,
.lst-gams .gm-vote,
.lst-gams .gm-vpcn {
    display: none !important;
}

/* Hide play count on game cards */
.gm-play,
[class*="gmcn-"] .gm-play {
    display: none !important;
}

/* Hide game description on cards */
.gm-desc,
[class*="gmcn-"] .gm-desc {
    display: none !important;
}

/* Clean game card - just image and title */
[class*="gmcn-"] {
    display: flex !important;
    flex-direction: column !important;
}

[class*="gmcn-"] .gm-text {
    padding: 0 !important;
    margin: 0 !important;
}

/* Game title styling for cleaner cards */
.gm-titl {
    padding: 8px 10px !important;
    text-align: center !important;
    background: transparent !important;
}

.gm-titl a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--pg-text-primary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ==========================================================================
   22. HOMEPAGE SECTIONS STYLING
   ========================================================================== */

/* Section containers */
.box,
.box-cn,
.blk-cn {
    margin-bottom: 40px !important;
    background: transparent !important;
}

/* Section titles - Trending, New Games, etc */
.box .titl,
.box-cn .titl,
.blk-cn .titl,
.titl {
    color: var(--pg-text-primary) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Section icons */
.titl .fa-fire,
.titl .fa-star,
.titl .fa-clock,
.titl .fa-gamepad,
.titl [class*="fa-"]::before {
    color: var(--pg-purple) !important;
    margin-right: 10px;
}

/* "Show All" / "More Games" button */
.titl a.botn-mrgm,
.botn-mrgm,
a.botn-mrgm {
    background: var(--pg-purple) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: var(--pg-radius-xl) !important;
    text-transform: none !important;
}

.titl a.botn-mrgm:hover,
a.botn-mrgm:hover {
    background: var(--pg-purple-dark) !important;
}

/* ==========================================================================
   23. GAME GRID IMPROVEMENTS
   ========================================================================== */

/* Tighter grid for more games */
[class*="lst-gams"],
.lst-gams,
.lst-gams-friv {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 15px !important;
}

/* Even tighter on larger screens */
@media screen and (min-width: 1400px) {

    [class*="lst-gams"],
    .lst-gams,
    .lst-gams-friv {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 12px !important;
    }
}

/* Game cards in grid */
[class*="lst-gams"]>li,
.lst-gams>li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* ==========================================================================
   24. RESPONSIVE ADJUSTMENTS FOR HOMEPAGE
   ========================================================================== */

/* Tablet - hide sidebar, stack layout */
@media screen and (max-width: 992px) {

    body.home .wrapper,
    body.home .bdcn .cont {
        flex-direction: column !important;
    }

    body.home .sdbr-cn {
        position: relative;
        top: 0;
        flex: none;
        width: 100% !important;
        max-width: 100% !important;
        order: 1;
        /* Move below content on mobile */
        margin-top: 30px;
    }

    /* Horizontal scrolling categories on mobile */
    .sdbr-cn .widget_categories ul,
    .sdbr-cn .widget_nav_menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sdbr-cn .widget_categories li,
    .sdbr-cn .widget_nav_menu li {
        flex: 0 0 auto;
    }

    .sdbr-cn .widget_categories a,
    .sdbr-cn .widget_nav_menu a {
        padding: 8px 12px !important;
        font-size: 13px;
    }
}

/* Mobile phones */
@media screen and (max-width: 767px) {
    .cont {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    [class*="lst-gams"],
    .lst-gams {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .gm-titl {
        padding: 6px !important;
    }

    .gm-titl a {
        font-size: 10px !important;
    }

    .titl {
        font-size: 16px !important;
    }
}

/* Small phones */
@media screen and (max-width: 480px) {

    [class*="lst-gams"],
    .lst-gams {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   25. PROMOTED GAMES / FRIV STYLE IMPROVEMENTS
   ========================================================================== */

/* Promoted games section */
#promoted-games,
.promoted-games,
.lst-gams-friv {
    background: transparent !important;
}

/* Remove extra spacing in promoted section */
#promoted-games .lst-gams-friv {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
/* ==========================================================================
   26. COLLAPSIBLE SIDEBAR - MAXIGAMES STYLE
   ========================================================================== */

/* Sidebar Container - Collapsed State */
.sidebar_left aside.sdbr-cn,
aside.sdbr-cn.cols-n3 {
    position: fixed !important;
    left: 0 !important;
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    width: 60px !important;
    z-index: 1000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 10px 5px !important;
    background: #070708 !important;
    /* MaxiGames Dark BG */
    border-radius: 0 var(--pg-radius-lg) var(--pg-radius-lg) 0 !important;
    border-right: 1px solid var(--pg-border) !important;
    transition: width 0.3s ease, padding 0.3s ease !important;
    scrollbar-width: none;
}

aside.sdbr-cn::-webkit-scrollbar {
    display: none;
}

/* Sidebar - Expanded on Hover */
.sidebar_left aside.sdbr-cn:hover,
aside.sdbr-cn.cols-n3:hover {
    width: 240px !important;
    padding: 15px !important;
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* Adjust main content when sidebar collapses */
.sidebar_left .main-cn.cols-n9 {
    margin-left: 70px !important;
    width: calc(100% - 80px) !important;
    transition: margin-left 0.3s ease, width 0.3s ease !important;
}

/* Widget styling in sidebar */
aside.sdbr-cn .blk-cn,
aside.sdbr-cn .widget {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide widget title */
aside.sdbr-cn .blk-cn>.titl,
aside.sdbr-cn .widget>h2,
aside.sdbr-cn .widget-title {
    display: none !important;
}

/* Menu Container */
aside.sdbr-cn .menu-sidebar-menu-container,
aside.sdbr-cn #menu-sidebar-menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Menu Item Links */
aside.sdbr-cn ul.menu li.menu-item a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px !important;
    margin-bottom: 4px !important;
    border-radius: var(--pg-radius-md) !important;
    background: transparent !important;
    color: #c7abff !important;
    /* MaxiGames Icon Color */
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

aside.sdbr-cn ul.menu li.menu-item a:hover {
    background: #9747ff !important;
    /* MaxiGames Hover Purple */
    color: #ffffff !important;
}

/* Icon container - replaced Emojis with FontAwesome */
aside.sdbr-cn li a::before {
    font-family: FontAwesome !important;
    /* FA4 */
    font-weight: normal;
    font-style: normal;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    /* Bigger container */
    height: 40px !important;
    font-size: 22px !important;
    /* Bigger Icon */
    flex-shrink: 0 !important;
    color: #c7abff !important;
    /* Low contrast icon */
    content: '\f11b';
    /* Default Gamepad */
    transition: all 0.2s ease;
}

aside.sdbr-cn li a:hover::before {
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Hide text in collapsed state */
.sidebar_left aside.sdbr-cn:not(:hover) ul.menu li.menu-item a {
    padding: 8px !important;
}

.sidebar_left aside.sdbr-cn:not(:hover) ul.menu li.menu-item a span {
    opacity: 0;
}


/* ==========================================================================
   CATEGORY ICONS - FontAwesome Mapping
   ========================================================================== */

/* Top/Home/MaxiGames */
aside.sdbr-cn a[href*="/top"]::before,
aside.sdbr-cn a[href*="maxigames"]::before {
    content: '\f091' !important;
}

/* Trophy */

/* Trending */
aside.sdbr-cn a[href*="trending"]::before {
    content: '\f06d' !important;
}

/* Fire */

/* New */
aside.sdbr-cn a[href*="/new"]::before {
    content: '\f005' !important;
}

/* Star */

/* Arcade */
aside.sdbr-cn a[href*="/category/arcade"]::before {
    content: '\f11b' !important;
}

/* Gamepad */

/* Action */
aside.sdbr-cn a[href*="/category/action"]::before {
    content: '\f135' !important;
}

/* Rocket */

/* Puzzle */
aside.sdbr-cn a[href*="/category/puzzle"]::before {
    content: '\f12e' !important;
}

/* Puzzle */

/* Racing / Car / Truck */
aside.sdbr-cn a[href*="/category/racing"]::before,
aside.sdbr-cn a[href*="/category/truck"]::before,
aside.sdbr-cn a[href*="/category/brand"]::before,
aside.sdbr-cn a[href*="/category/driving"]::before {
    content: '\f1b9' !important;
}

/* Car */

/* Car (Specific & Robust) */
aside.sdbr-cn a[href*="/category/car/"]::before,
aside.sdbr-cn a[href*="/category/cars"]::before,
aside.sdbr-cn a[href*="/car-games"]::before {
    content: '\f1b9' !important;
}

/* Car */

/* Adventure */
aside.sdbr-cn a[href*="/category/adventure"]::before {
    content: '\f0ac' !important;
}

/* Globe */

/* Sports / Soccer */
aside.sdbr-cn a[href*="/category/sports"]::before,
aside.sdbr-cn a[href*="/category/soccer"]::before,
aside.sdbr-cn a[href*="/category/football"]::before {
    content: '\f1e3' !important;
}

/* Soccer */

/* Strategy */
aside.sdbr-cn a[href*="/category/strategy"]::before {
    content: '\f0eb' !important;
}

/* Bulb */

/* Girls / Dress up / Makeover */
aside.sdbr-cn a[href*="/category/for-girls"]::before,
aside.sdbr-cn a[href*="/category/girls"]::before,
aside.sdbr-cn a[href*="/category/dress"]::before,
aside.sdbr-cn a[href*="/category/makeover"]::before {
    content: '\f182' !important;
}

/* Female */

/* Boys */
aside.sdbr-cn a[href*="/category/for-boys"]::before,
aside.sdbr-cn a[href*="/category/boys"]::before {
    content: '\f183' !important;
}

/* Male */

/* Kids */
aside.sdbr-cn a[href*="/category/kids"]::before {
    content: '\f1ae' !important;
}

/* Child */

/* Funny */
aside.sdbr-cn a[href*="/category/funny"]::before {
    content: '\f118' !important;
}

/* Smile */

/* Quiz */
aside.sdbr-cn a[href*="/category/quiz"]::before {
    content: '\f128' !important;
}

/* Question */

/* Flash */
aside.sdbr-cn a[href*="/category/flash"]::before {
    content: '\f0e7' !important;
}

/* Bolt */

/* 3D */
aside.sdbr-cn a[href*="/category/3d"]::before,
aside.sdbr-cn a[href*="/category/minecraft"]::before {
    content: '\f1b2' !important;
}

/* Cube */

/* Simulation */
aside.sdbr-cn a[href*="/category/simulation"]::before {
    content: '\f108' !important;
}

/* Desktop */

/* Multiplayer / 2 Player / IO */
aside.sdbr-cn a[href*="/category/multiplayer"]::before,
aside.sdbr-cn a[href*="/category/2-player"]::before,
aside.sdbr-cn a[href*="/category/io/"]::before,
aside.sdbr-cn a[href*="-io"]::before {
    content: '\f0c0' !important;
}

/* Users */

/* Card / Solitaire / Casino */
aside.sdbr-cn a[href*="/category/card"]::before,
aside.sdbr-cn a[href*="/category/solitaire"]::before {
    content: '\f24b' !important;
}

/* Cards */

/* Shooting / Sniper */
aside.sdbr-cn a[href*="/category/shooting"]::before,
aside.sdbr-cn a[href*="/category/sniper"]::before {
    content: '\f05b' !important;
}

/* Crosshairs */

/* Zombie / Horror */
aside.sdbr-cn a[href*="/category/zombie"]::before,
aside.sdbr-cn a[href*="/category/horror"]::before {
    content: '\f21e' !important;
}

/* Heartbeat */

/* Stickman */
aside.sdbr-cn a[href*="/category/stickman"]::before {
    content: '\f183' !important;
}

/* Male */

/* Fighting */
aside.sdbr-cn a[href*="/category/fighting"]::before {
    content: '\f255' !important;
}

/* Hand Rock */

/* Clicker / Idle */
aside.sdbr-cn a[href*="/category/clicker"]::before,
aside.sdbr-cn a[href*="/category/idle"]::before {
    content: '\f25a' !important;
}

/* Hand Pointer */

/* Board */
aside.sdbr-cn a[href*="/category/board"]::before {
    content: '\f009' !important;
}

/* Grid */

/* Platform */
aside.sdbr-cn a[href*="/category/platform"]::before {
    content: '\f0c8' !important;
}

/* Square */

/* Activity/Heartbeat (Thriller) */

/* ==========================================================================
   FINAL ICON ADJUSTMENTS (User Requested)
   ========================================================================== */

/* .io - Global/Online */
aside.sdbr-cn a[href*="/category/io/"]::before,
aside.sdbr-cn a[href*="-io"]::before {
    content: '\f0ac' !important;
}

/* Globe */

/* 2 Player - Versus */
aside.sdbr-cn a[href*="/category/2-player"]::before,
aside.sdbr-cn a[href*="/category/two-player"]::before {
    content: '\f0c0' !important;
}

/* Users */

/* Clicker - Interaction */
aside.sdbr-cn a[href*="/category/clicker"]::before {
    content: '\f25a' !important;
}

/* Hand Pointer */

/* Platform - Levels */
aside.sdbr-cn a[href*="/category/platform"]::before {
    content: '\f0c9' !important;
}

/* Bars/Platforms */

/* Minecraft - Block */
aside.sdbr-cn a[href*="/category/minecraft"]::before {
    content: '\f1b2' !important;
}

/* Cube */

/* Stickman - Character */
aside.sdbr-cn a[href*="/category/stickman"]::before {
    content: '\f183' !important;
}

/* Male */

/* Fighting - Combat */
aside.sdbr-cn a[href*="/category/fighting"]::before {
    content: '\f255' !important;
}

/* Hand Rock/Fist */

/* Board - Table/Grid */
aside.sdbr-cn a[href*="/category/board"]::before {
    content: '\f0ce' !important;
}

/* Table */

/* All Categories */
aside.sdbr-cn a[href*="/all-categories"]::before,
aside.sdbr-cn a[href*="all-categories"]::before {
    content: '\f00a' !important;
}

/* Th-Grid (All) */

/* ==========================================================================
   RESPONSIVE - COLLAPSIBLE SIDEBAR
   ========================================================================== */

/* Match 3 (Fix Conflict) */
aside.sdbr-cn a[href*="/category/match"]::before {
    content: '\f009' !important;
}

/* Th-Large */

/* 2 Player (Fix Conflict) */
aside.sdbr-cn a[href*="/category/2-player"]::before,
aside.sdbr-cn a[href*="/category/two-player"]::before {
    content: '\f2b5' !important;
}

/* Handshake */

/* Music (Fix) */
aside.sdbr-cn a[href*="/category/music"]::before,
aside.sdbr-cn a[href*="/music"]::before {
    content: '\f001' !important;
}

/* Music Note */

/* ==========================================================================
   RESPONSIVE - COLLAPSIBLE SIDEBAR
   ========================================================================== */

@media screen and (max-width: 992px) {

    /* Sidebar hidden by default on tablet/mobile */
    .sidebar_left aside.sdbr-cn,
    aside.sdbr-cn.cols-n3 {
        transform: translateX(-100%);
        width: 240px !important;
    }

    .sidebar_left aside.sdbr-cn:hover,
    aside.sdbr-cn.cols-n3:hover {
        transform: translateX(0);
    }

    /* Main content full width on mobile */
    .sidebar_left .main-cn.cols-n9 {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* =========================================
   GRID ONE - Custom CSS
   ========================================= */

/* Main Wrapper */
.pg-widget-grid-one {
    margin-bottom: 40px;
    position: relative;
    width: 100%;
}

/* --- Header --- */
.pg-widget-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.pg-header-link {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none !important;
    color: #fff !important;
}

.pg-header-link:hover {
    opacity: 0.9;
}

.pg-header-icon-box {
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.pg-header-icon-box i {
    font-size: 40px;
    color: #fff;
    margin: 0 !important;
}

.pg-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pg-header-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.2;
}

.pg-header-more {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}

.pg-header-link:hover .pg-header-more {
    color: #c7abff;
}

/* --- Grid Container --- */
.pg-grid-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* Desktop: 8 Cols */
    grid-auto-flow: dense;
    gap: 20px;
    width: 100%;
    align-items: start;
}

/* --- Game Card --- */
.pg-game-card {
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none !important;
    transition: transform 0.2s ease;
    min-width: 0;
}

.pg-game-card .pg-card-image-wrap {
    position: relative;
}

/* DESKTOP (Default > 1200px) 
   Row 1: 4 Big (Span 2x2) -> 4 items * 2 cols = 8 cols.
   Row 2: 8 Small -> 8 items.
   Row 3: 7 Small + 1 Card -> 8 items.
   Total Items: 20. Match Playgama.
   Hide Item 21+.
*/
.pg-game-card:nth-child(-n+4) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Hide Generic Overflow (game cards + end card) */
/* The Loop outputs 30 items. We want to hide item 20 onwards IF it is a game card, 
   but we want the End Card (effectively item 31) to be visible as the LAST item.
   Simplest approach: Hide all children > 20, but exempt the specific .pg-card-all-games 
   and rely on the fact that if we hide the games in between, the card flows up.
*/
.pg-game-card:not(.pg-card-all-games):nth-child(n+20) {
    display: none;
}

/* LAPTOP / SMALL DESKTOP (Max 1024px) 
   Row 1: 3 Big (Span 2) = 6 Cols.
   Row 2: 6 Small. Row 3: 6 Small. Row 4: 5 Small + Card.
   Total Items: 20.
*/
@media (max-width: 1024px) {
    .pg-grid-container {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Reset spans */
    .pg-game-card:nth-child(-n+4) {
        grid-column: auto;
        grid-row: auto;
    }

    /* First 3 Big */
    .pg-game-card:nth-child(-n+3) {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Hide Game 21+ */
    .pg-game-card:not(.pg-card-all-games):nth-child(n+21) {
        display: none;
    }

    /* Unhide Game 20 */
    .pg-game-card:not(.pg-card-all-games):nth-child(20) {
        display: block;
    }
}

/* TABLET (Max 767px)
   Row 1: 2 Big (Span 2) = 4 Cols.
   Rows 2-4: 4 items (12). Row 5: 3 Items + Card.
   Total Items: 2+12+3 = 17 items.
*/
@media (max-width: 767px) {
    .pg-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Reset Spans */
    .pg-game-card:nth-child(-n+3) {
        grid-column: auto;
        grid-row: auto;
    }

    /* First 2 Big */
    .pg-game-card:nth-child(-n+2) {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Hide Game 18+ */
    .pg-game-card:not(.pg-card-all-games):nth-child(n+18) {
        display: none;
    }
}

/* MOBILE (Max 480px) 
   Row 1: 1 Big (Span 2) = 2 Cols.
   Rows 2-5: 2 items (8). Row 6: 1 item + Card.
   Total Items: 1+8+1 = 10 items. (+1 card = 11 visual blocks)
*/
@media (max-width: 480px) {
    .pg-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Reset Spans */
    .pg-game-card:nth-child(-n+2) {
        grid-column: auto;
        grid-row: auto;
    }

    /* First 1 Big */
    .pg-game-card:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Hide Game 11+ */
    .pg-game-card:not(.pg-card-all-games):nth-child(n+11) {
        display: none;
    }
}

.pg-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 378 / 252;
    /* 16:9 Ratio */
    border-radius: 16px;
    overflow: hidden;
    background: #2a2a2a;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pg-game-card:hover {
    transform: scale(1.03);
}

.pg-game-card:hover .pg-card-image-wrap {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pg-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Title */
.pg-card-title {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transition: color 0.2s ease;
}

.pg-game-card:hover .pg-card-title {
    color: #c7abff;
}

/* Badges - Playgama Style (Image-based, positioned on banner) */
.pg-card-badge {
    position: absolute;
    top: -6px;
    left: -8px;
    width: auto;
    height: 42px;
    z-index: 2;
    pointer-events: none;
}

.pg-card-badge img {
    height: 100%;
    width: auto;
    display: block;
}

/* --- Collage Card (All Games) --- */
.pg-card-all-games .pg-collage-container {
    position: relative;
    width: 100%;
    aspect-ratio: 378 / 252;
    /* Match game cards */
    border-radius: 16px;
    overflow: hidden;
    background: #222;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

/* Individual mini-images layout */
.pg-collage-item {
    position: relative;
    width: 100%;
    height: 100%;
    background: #2a2a2a;
}

.pg-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4th Item: Icon Box (Bottom Right) */
.pg-collage-icon-box {
    background: #9747ff;
    /* Purple */
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-collage-icon-box i {
    font-size: 24px;
    color: #fff;
    transition: transform 0.2s ease;
}

.pg-card-all-games:hover .pg-collage-icon-box i {
    transform: translateX(4px);
}

/* =========================================
   GRID TWO - 2 Rows, 6 Cards Each
   ========================================= */

/* Main Wrapper */
.pg-widget-grid-two {
    margin-bottom: 40px;
    position: relative;
    width: 100%;
}

/* Grid Container - Desktop: 2 rows × 6 cards */
.pg-grid-two-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    align-items: start;
}

/* Grid Two Card */
.pg-grid-two-card {
    position: relative;
    text-decoration: none !important;
    transition: transform 0.2s ease;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pg-grid-two-card:hover {
    transform: scale(1.03);
}

/* Image Wrap */
.pg-grid-two-card .pg-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 378 / 252;
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a;
    transition: box-shadow 0.2s ease;
}

.pg-grid-two-card:hover .pg-card-image-wrap {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pg-grid-two-card .pg-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge for Grid Two */
.pg-grid-two-card .pg-card-badge {
    position: absolute;
    top: -6px;
    left: -8px;
    width: auto;
    height: 36px;
    z-index: 2;
    pointer-events: none;
}

/* Title for Grid Two */
.pg-grid-two-card .pg-card-title {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transition: color 0.2s ease;
}

.pg-grid-two-card:hover .pg-card-title {
    color: #c7abff;
}

/* All Games Collage for Grid Two */
.pg-grid-two-card.pg-card-all-games .pg-collage-container {
    aspect-ratio: 378 / 252;
    border-radius: 12px;
}

/* ===========================================
   GRID TWO - 3 Fixed Responsive Breakpoints
   =========================================== */

/* Tablet: 3 rows × 4 cards = 12 cards (768px - 1024px) */
@media (max-width: 1024px) {
    .pg-grid-two-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile: 3 rows (1 large + 2 + 2) = 5 cards (≤767px) */
@media (max-width: 767px) {
    .pg-grid-two-container {
        grid-template-columns: 1fr 1fr;
    }

    /* First card spans full width (large) */
    .pg-grid-two-card:first-child {
        grid-column: span 2;
    }

    /* Hide cards after the 4th (show only 4 + All Games = 5) - DEFAULT WIDGET */
    .pg-grid-two-card:nth-child(n+5):not(.pg-card-all-games) {
        display: none;
    }

    /* OVERRIDE for Gameplay Page Related Games: Show 9 items (1 large + 8 small) */
    .pg-related-games .pg-grid-two-card:nth-child(n+5):nth-child(-n+9) {
        display: flex;
    }

    .pg-grid-two-card .pg-card-badge {
        height: 28px;
    }
}

/* =========================================
   GRID THREE - Single Row with Square Thumbnails
   ========================================= */

/* Main Wrapper */
.pg-widget-grid-three {
    margin-bottom: 40px;
    position: relative;
    width: 100%;
}

/* Grid Container - Desktop: Single row that fits screen */
.pg-grid-three-container {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 12px;
    align-items: start;
}

/* Grid Three Card */
.pg-grid-three-card {
    position: relative;
    text-decoration: none !important;
    transition: transform 0.2s ease;
    min-width: 0;
}

.pg-grid-three-card:hover {
    transform: scale(1.05);
}

/* Square Thumbnail Wrap */
.pg-card-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a;
    transition: box-shadow 0.2s ease;
}

.pg-grid-three-card:hover .pg-card-thumb-wrap {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pg-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "New" Badge for Grid Three */
.pg-card-badge-new {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: auto;
    height: 24px;
    z-index: 2;
    pointer-events: none;
}

/* All Games Collage (Square) for Grid Three */
.pg-collage-square {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
}

.pg-collage-square-item {
    position: relative;
    overflow: hidden;
    background: #2a2a2a;
}

.pg-collage-square-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-collage-square .pg-collage-icon-box {
    background: #9747ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-collage-square .pg-collage-icon-box i {
    font-size: 20px;
    color: #fff;
    transition: transform 0.2s ease;
}

.pg-card-all-games-square:hover .pg-collage-icon-box i {
    transform: translateX(4px);
}

/* ===========================================
   GRID THREE - Responsive Breakpoints
   =========================================== */

/* Hide extra cards on desktop - show 15 + All Games = 16 */
.pg-grid-three-card:nth-child(n+16):not(.pg-card-all-games-square) {
    display: none;
}

/* Large Desktop (>1400px): 16 columns */
@media (max-width: 1400px) {
    .pg-grid-three-container {
        grid-template-columns: repeat(12, 1fr);
    }

    .pg-grid-three-card:nth-child(n+12):not(.pg-card-all-games-square) {
        display: none;
    }
}

/* Desktop (≤1200px): 10 columns */
@media (max-width: 1200px) {
    .pg-grid-three-container {
        grid-template-columns: repeat(10, 1fr);
    }

    .pg-grid-three-card:nth-child(n+10):not(.pg-card-all-games-square) {
        display: none;
    }
}

/* Laptop (≤1024px): 8 columns */
@media (max-width: 1024px) {
    .pg-grid-three-container {
        grid-template-columns: repeat(8, 1fr);
    }

    .pg-grid-three-card:nth-child(n+8):not(.pg-card-all-games-square) {
        display: none;
    }
}

/* Tablet (≤767px): 6 columns */
@media (max-width: 767px) {
    .pg-grid-three-container {
        grid-template-columns: repeat(6, 1fr);
    }

    .pg-grid-three-card:nth-child(n+6):not(.pg-card-all-games-square) {
        display: none;
    }

    .pg-card-badge-new {
        height: 18px;
        bottom: 6px;
        right: 6px;
    }
}

/* Mobile (≤480px): 4 columns */
@media (max-width: 480px) {
    .pg-grid-three-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .pg-grid-three-card:nth-child(n+4):not(.pg-card-all-games-square) {
        display: none;
    }
}

/* =========================================
   MAXIGAMES CATEGORIES WIDGET
   ========================================= */

/* Main Wrapper */
.pg-categories-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 0;
    margin-bottom: 40px;
}

/* Header Section */
.pg-categories-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pg-categories-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    font-style: italic;
}

.pg-categories-description {
    font-size: 14px;
    font-weight: 400;
    color: #626266;
    line-height: 1.5;
    max-width: 100%;
}

/* Categories List */
.pg-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Category Item - Playgama Style with Border */
.pg-category-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #1d1d21;
    border-radius: 24px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 2px solid #29292e;
}

.pg-category-item:hover {
    background: #29292e;
    border-color: var(--candy-color, #9747ff);
}

/* Category Icon - White/Light */
.pg-category-icon {
    font-size: 18px;
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.pg-category-item:hover .pg-category-icon {
    opacity: 1;
}

/* Category Name */
.pg-category-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

/* All Categories Link - Purple Background */
.pg-category-all {
    background: #9747ff;
    border-color: #9747ff;
}

.pg-category-all .pg-category-icon {
    color: #fff;
    opacity: 1;
}

.pg-category-all:hover {
    background: #aa76ff;
    border-color: #aa76ff;
}

/* Responsive */
@media (max-width: 767px) {
    .pg-categories-widget {
        padding: 20px 0;
        gap: 16px;
    }

    .pg-categories-title {
        font-size: 22px;
    }

    .pg-categories-description {
        font-size: 13px;
    }

    .pg-categories-list {
        gap: 8px;
    }

    .pg-category-item {
        padding: 8px 14px;
        gap: 8px;
    }

    .pg-category-icon {
        font-size: 16px;
    }

    .pg-category-name {
        font-size: 13px;
    }
}

/* =========================================
   MAXIGAMES HEADER
   ========================================= */

/* Desktop Header */
.pg-header-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
    background: var(--pg-bg-primary);
    margin: 0;
    padding: 32px 12px;
}

.pg-header-mobile {
    display: none;
    background: var(--pg-bg-primary);
}

.pg-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pg-maxigames-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--pg-purple);
    border-radius: 50%;
    flex-shrink: 0;
    padding-left: 5px;
}

.pg-maxigames-icon img {
    width: 24px;
    height: 24px;
}

.pg-header-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pg-purple);
    border-radius: 24px;
    padding: 10px 18px;
    height: 50px;
}

.pg-header-logo img,
.pg-header-logo .pg-logo-svg {
    height: 24px;
    width: auto;
}

.pg-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search Bar */
.pg-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1d1d21;
    border: 1px solid #29292e;
    border-radius: 24px;
    padding: 0 16px;
    min-width: 200px;
    height: 50px;
    transition: border-color 0.2s ease;
}

.pg-search-wrapper:focus-within {
    border-color: #9747ff;
}

.pg-search-icon {
    color: #626266;
    flex-shrink: 0;
}

.pg-search-wrapper form {
    flex: 1;
    display: flex;
}

.pg-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    width: 100%;
    padding: 0;
}

.pg-search-input::placeholder {
    color: #626266;
}

/* Buttons */
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    height: 50px;
    border: none;
    border-radius: 24px !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    height: 44px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pg-btn-icon {
    padding: 8px;
    border-radius: 50%;
}

/* No Ads Button */
.pg-btn-no-ads {
    background: #1d1d21;
    border: 1px solid #29292e;
    color: #fff;
}

.pg-btn-no-ads:hover {
    border-color: #ffc850;
    background: rgba(255, 200, 80, 0.1);
}

.pg-no-ad-icon {
    width: 20px;
    height: 20px;
}

/* Login Button */
.pg-btn-login {
    background: #9747ff;
    color: #fff;
}

.pg-btn-login:hover {
    background: #aa76ff;
}

/* User Menu (Logged In) */
.pg-user-menu {
    position: relative;
}

.pg-btn-user {
    background: #1d1d21;
    border: 1px solid #29292e;
    color: #fff;
    padding: 6px 12px 6px 6px;
}

.pg-btn-user:hover {
    border-color: #9747ff;
}

.pg-btn-user img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.pg-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1d1d21;
    border: 1px solid #29292e;
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.pg-user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pg-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.pg-dropdown-item:hover {
    background: #29292e;
    color: #fff;
}

.pg-dropdown-item i {
    color: #626266;
    width: 16px;
}

/* Mobile Header */
@media (max-width: 767px) {
    .pg-header-desktop {
        display: none;
    }

    .pg-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        height: 56px;
    }

    .pg-mobile-left,
    .pg-mobile-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pg-header-logo-mobile {
        flex: 1;
        display: inline;
        background: var(--pg-purple);
        padding: 10px 18px;
        border-radius: 24px;
    }

    .pg-header-logo-mobile img {
        height: 28px;
        width: auto;
    }

    .pg-btn-icon {
        background: transparent;
        border: none;
        color: #fff;
        padding: 8px;
    }

    .pg-btn-icon svg {
        display: block;
    }

    .pg-btn-no-ads-mobile {
        background: transparent;
        border: none;
        padding: 6px;
    }

    .pg-btn-no-ads-mobile img {
        width: 24px;
        height: 24px;
    }

    .pg-btn-login-mobile {
        background: #9747ff;
        color: #fff;
        padding: 8px 14px;
        font-size: 13px;
    }

    .pg-btn-user-mobile {
        background: transparent;
        border: none;
        padding: 4px;
    }

    .pg-btn-user-mobile img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }
}

/* Mobile Search Overlay */
.pg-mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.pg-mobile-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.pg-mobile-search-container {
    padding: 16px;
    padding-top: env(safe-area-inset-top, 16px);
}

.pg-mobile-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1d1d21;
    border: 1px solid #29292e;
    border-radius: 24px;
    padding: 12px 16px;
}

.pg-mobile-search-form .pg-search-icon {
    color: #626266;
    flex-shrink: 0;
}

.pg-mobile-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    padding: 0;
}

.pg-mobile-search-input::placeholder {
    color: #626266;
}

.pg-mobile-search-close {
    background: transparent;
    border: none;
    color: #626266;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-mobile-search-close:hover {
    color: #fff;
}

/* =========================================
   PLAYGAMA GAME PAGE STYLES
   ========================================= */

.pg-game-wrapper {
    background: #070708;
    margin-left: 60px;
    width: calc(100% - 60px);
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.pg-game-wrapper .cont {
    max-width: 100%;
    padding: 0 20px;
}

.pg-styled {
    padding: 0;
}

.pg-styled .game-cn {
    margin-bottom: 0;
}

/* When sidebar is hovered/expanded, adjust game wrapper */
.sidebar_left:has(aside.sdbr-cn:hover) .pg-game-wrapper {
    margin-left: 240px;
    width: calc(100% - 240px);
}

/* Responsive - hide sidebar offset on mobile */
@media (max-width: 960px) {
    .pg-game-wrapper {
        margin-left: 0;
        width: 100%;
    }
}

/* Player Section */
.pg-player-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pg-player-wrapper {
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Game Container / Iframe */
.pg-game-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pg-game-container iframe,
.pg-game-container embed,
.pg-game-container object,
.pg-game-container canvas {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

.pg-player-wrapper .game-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pg-player-wrapper .game-play iframe,
.pg-player-wrapper .game-play embed,
.pg-player-wrapper .game-play object {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* =========================================
   STEP 1: Initial Preview State
   ========================================= */
.pg-preview-state {
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgb(99, 50, 161) 10%, rgb(7, 7, 8) 100%);
}

.pg-preview-banner {
    flex: 1;
    display: flex;
    align-items: normal;
    justify-content: center;
    padding-top: 10px;
    overflow: hidden;
}

.pg-preview-banner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.pg-play-now-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 12px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pg-play-now-btn:hover {
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}

.pg-play-now-btn span {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pg-preview-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 20px;
}

/* =========================================
   STEP 2: Fullscreen Overlay
   ========================================= */
.pg-fullscreen-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.95);
    overflow-x: hidden;
    overflow-y: auto;
}

.pg-fullscreen-overlay.active {
    display: block;
}

.pg-fullscreen-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.pg-fullscreen-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(30px) brightness(0.3);
    transform: scale(1.2);
}

.pg-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 10;
}

.pg-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pg-back-btn i {
    font-size: 12px;
}

.pg-fullscreen-content {
    max-width: 700px;
    margin: 80px auto 100px;
    padding: 0 20px;
}

.pg-fullscreen-header {
    text-align: center;
    margin-bottom: 20px;
}

.pg-fullscreen-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.pg-fullscreen-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.pg-fullscreen-banner {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.pg-fullscreen-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.pg-lets-play-btn {
    display: block;
    width: 100%;
    padding: 20px 40px;
    background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.pg-lets-play-btn:hover {
    background: linear-gradient(135deg, #a3e635 0%, #84cc16 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(132, 204, 22, 0.4);
}

.pg-lets-play-btn span {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pg-fullscreen-info {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 24px;
}

.pg-info-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
}

.pg-info-description {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.pg-info-description h4 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 20px 0 10px;
}

.pg-info-description p {
    margin: 0 0 12px;
}

/* Fullscreen Footer / Action Bar */
.pg-fullscreen-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: rgba(20, 20, 25, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.pg-footer-left {
    display: flex;
    align-items: center;
}

.pg-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================================
   BOX A: Main Container (goes fullscreen)
   ========================================= */
.pg-box-a {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    background: #1D1C26;
    /* Playgama Dark Blue */
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

/* Element B: Dynamic Content Area */
.pg-element-b {
    flex: 1;
    position: relative;
    min-height: 0;
    aspect-ratio: 16/9;
    /* Playgama Gradient */
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* Box A in fullscreen mode */
.pg-box-a:fullscreen,
.pg-box-a:-webkit-full-screen,
.pg-box-a:-moz-full-screen,
.pg-box-a:-ms-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

/* Element B fills remaining space in fullscreen */
.pg-box-a:fullscreen .pg-element-b,
.pg-box-a:-webkit-full-screen .pg-element-b,
.pg-box-a:-moz-full-screen .pg-element-b,
.pg-box-a:-ms-fullscreen .pg-element-b {
    flex: 1;
    aspect-ratio: unset;
}

/* Action Bar inside Box A - always visible at bottom */
.pg-box-a .pg-action-bar {
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    margin-top: 0;
}

/* States inside Element B need to fill it */
.pg-element-b .pg-preview-state,
.pg-element-b .pg-game-state {
    position: absolute;
    inset: 0;
}

/* Fullscreen overlay inside Element B */
.pg-element-b .pg-fullscreen-overlay {
    position: absolute;
    inset: 0;
}

/* =========================================
   STEP 3: Game Playing State
   ========================================= */
.pg-game-state {
    display: none;
    position: absolute;
    inset: 0;
    background: #000;
}

.pg-game-state.active {
    display: block !important;
}

/* Hide preview when game is active */
.pg-preview-state.pg-hidden {
    display: none !important;
}

/* =========================================
   Loading Animation
   ========================================= */
.pg-game-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 100;
    background: linear-gradient(135deg, #0a0a12 0%, #0d1020 100%);
    align-items: center;
    justify-content: center;
}

.pg-game-loading.active {
    display: flex !important;
}

.pg-loading-content {
    text-align: center;
    min-width: min(80vw, 420px);
}

.pg-loading-logo {
    position: relative;
    display: inline-block;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 16px;
    line-height: 1.1;
}

.pg-loading-logo::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 52%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    animation: pg-word-progress 3s linear infinite;
}

.pg-loading-logo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

@keyframes pg-word-progress {
    0% {
        width: 0%;
    }

    85% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

.pg-loading-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Game state fills Element B - Box A handles fullscreen */
.pg-game-state .pg-game-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pg-game-state #playframe {
    width: 100%;
    height: 100%;
}

/* Game footer removed - using single Action Bar inside Box A */

.pg-exit-game-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.pg-exit-game-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pg-exit-game-btn i {
    font-size: 12px;
}

/* Legacy Play Overlay - kept for compatibility */
.pg-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-overlay-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.pg-overlay-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px) brightness(0.5);
    transform: scale(1.1);
}

.pg-overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

/* Overlay Top */
.pg-overlay-top {
    display: flex;
    justify-content: flex-start;
}

.pg-game-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 8px 16px 8px 8px;
    border-radius: 12px;
}

.pg-game-badge img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.pg-badge-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pg-badge-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.pg-badge-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #c0ff47;
    background: rgba(192, 255, 71, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
}

/* Play Button */
.pg-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(#9747ff 0%, #620fab 100%);
    border: none;
    padding: 4px;
    border-radius: 1000px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(151, 71, 255, 0.5);
}

.pg-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 60px rgba(151, 71, 255, 0.7);
}

.pg-play-btn-text {
    display: block;
    background: rgba(255, 255, 255, 0.1);
    padding: 16px 48px;
    border-radius: 1000px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Overlay Bottom */
.pg-overlay-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pg-players-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 1000px;
}

.pg-avatar-stack {
    display: flex;
}

.pg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid #000;
    margin-left: -8px;
}

.pg-avatar:first-child {
    margin-left: 0;
}

.pg-players-text {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.pg-overlay-actions {
    display: flex;
    gap: 8px;
}

.pg-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.pg-action-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Share dropdown */
.pg-action-icon.pst-shr .lst-social {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #1d1d21;
    border: 1px solid #29292e;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 8px;
    z-index: 100;
    min-width: 150px;
}

.pg-action-icon.pst-shr:hover .lst-social {
    display: block;
}

.pg-action-icon.pst-shr .lst-social li {
    list-style: none;
}

.pg-action-icon.pst-shr .lst-social a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
}

.pg-action-icon.pst-shr .lst-social a:hover {
    background: #29292e;
}

/* Game Container */
.pg-game-container {
    width: 100%;
    height: 100%;
}

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

/* Player Actions */
.pg-player-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.pg-actions-left,
.pg-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pg-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #1d1d21;
    border: 1px solid #29292e;
    border-radius: 1000px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pg-btn-secondary:hover {
    background: #29292e;
    border-color: #9747ff;
}

.pg-btn-secondary i {
    font-size: 16px;
}

/* Game Info Section */
.pg-game-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    /* Added for Playgama Style */
    background-color: #1D1D21;
    border-radius: 12px;
}

/* Breadcrumbs */
.pg-breadcrumbs {
    font-size: 14px;
    color: #c7abff;
}

.pg-breadcrumbs a {
    color: #c7abff;
    text-decoration: none;
}

.pg-breadcrumbs a:hover {
    color: #9747ff;
}

/* Game Title */
.pg-game-title {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

/* Tags */
.pg-game-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pg-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #1d1d21;
    border: 1px solid transparent;
    border-radius: 1000px;
    color: #a2a2a8;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pg-tag:hover {
    background: #29292e;
    color: #fff;
    border-color: #9747ff;
}

.pg-tag-count {
    font-size: 12px;
    color: #626266;
}

/* Description */
.pg-game-description {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

.pg-game-description p {
    margin-bottom: 16px;
}

.pg-instructions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #29292e;
}

.pg-instructions h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

/* Meta Info */
.pg-game-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.pg-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #a2a2a8;
}

.pg-meta-item i {
    color: #aa76ff;
}

.pg-meta-item a {
    color: #aa76ff;
    text-decoration: none;
}

.pg-meta-item a:hover {
    color: #9747ff;
}

.pg-meta-item.pg-rating .post-ratings {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================
   PLAYGAMA LAYOUT - Matching Screenshot
   ========================================= */

/* Main Layout: Content + Promo Sidebar */
/* pg-promo-column has FIXED width (300px) until hidden at 1024px */
.pg-main-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}

/* Main Content Area */
.pg-content-area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Row 1: Player + Small Games Grid (like Playgama BMOpU) */
/* BOTH columns use fr units so they resize PROPORTIONALLY together */
/* Height is explicitly calculated to match player aspect ratio (16:9) + action bar */
/* This forces the row to a fixed height so the games column scrolls */
.pg-player-row {
    display: grid;
    grid-template-columns: 10fr 1fr;
    gap: 12px;
    align-items: stretch;
    /* Height is now determined by the player content */
    min-height: 380px;
}

.pg-player-column {
    min-width: 0;
    display: flex;
}

.pg-player-column .pg-player-wrapper {
    flex: 1;
}

.pg-player-column .pg-action-bar {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Small Games Grid Column (right of player) - 2x6 Banner style */
/* Hidden by default on small screens, shown at 993px+ */
/* Uses 1fr in grid so it resizes proportionally with pg-player-column */
/* Height comes from grid align-items: stretch on pg-player-row */
.pg-player-row .pg-games-grid-column {
    display: none;
    flex-direction: column;
    min-width: 100px;
    height: 0;
    min-height: 100%;
    position: relative !important;
    overflow: hidden !important;
}

@media (min-width: 993px) {
    .pg-player-row .pg-games-grid-column {
        display: flex;
    }
}

.pg-games-grid-column::-webkit-scrollbar {
    width: 4px;
}

.pg-games-grid-column::-webkit-scrollbar-thumb {
    background: #29292e;
    border-radius: 4px;
}

/* Inner scrollable grid */
.pg-small-games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    background: transparent;
    /* Clean transparent background */
    padding: 0;
    /* Remove padding */
    align-content: start;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100% !important;
    overflow-y: auto !important;
    min-height: 0;
    min-height: 0;
    grid-auto-rows: min-content;
    /* Force rows to take natural height */
    scrollbar-width: none;
    /* Firefox: Hide scrollbar */
}

.pg-small-games-grid::-webkit-scrollbar {
    display: none;
    /* WebKit: Hide scrollbar */
}

/* Banner-style game cards in grid - smaller cards */
.pg-grid-game {
    display: block;
    position: relative;
    border-radius: 12px;
    /* Increased radius */
    overflow: hidden;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    min-height: 60px;
    /* Force minimum height to prevent squashing */
    box-shadow: none;
    /* Remove default shadow */
}

.pg-grid-game:hover {
    transform: scale(1.05);
    /* Pop effect */
    z-index: 2;
}

.pg-grid-thumb {
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
}

.pg-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Game name - hidden by default, show on hover */
.pg-grid-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 8px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pg-grid-game:hover .pg-grid-name {
    opacity: 1;
}

/* Promo Sidebar Column - Full page height, sticky */
.pg-promo-column {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.pg-promo-card {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 280px;
}

.pg-promo-thumb {
    position: absolute;
    inset: 0;
}

.pg-promo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-promo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    gap: 10px;
}

.pg-promo-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.pg-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--pg-purple, #9747ff);
    border-radius: 1000px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    width: fit-content;
    transition: all 0.2s ease;
}

.pg-promo-card:hover .pg-promo-btn {
    background: #7c3aed;
    transform: scale(1.05);
}

.pg-promo-widget {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Ad Banner Row */
.pg-ad-row {
    margin-top: 8px;
}

.pg-ad-banner {
    background: var(--pg-carbon-200, #0d0d0f);
    border-radius: 12px;
    padding: 20px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-ad-placeholder {
    border: 2px dashed var(--pg-carbon-400, #29292e);
}

.pg-ad-placeholder span {
    color: var(--pg-carbon-500, #52525b);
    font-size: 14px;
}

/* Row 2: Action Bar - Playgama Style */
.pg-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    /* Transparent, relies on pg-box-a background */
    backdrop-filter: none;
    border-radius: 0 0 12px 12px;
    /* Bottom corners rounded */
    padding: 10px 20px;
    gap: 4px;
    /* Tighter gap */
    border-top: none;
    height: 56px;
}

.pg-action-bar-left {
    display: flex;
    align-items: center;
}

.pg-game-badge-small {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pg-game-badge-small img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

.pg-badge-info-small {
    display: flex;
    flex-direction: column;
}

.pg-badge-title-small {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.pg-badge-label-small {
    font-size: 11px;
    color: #a2a2a8;
}

.pg-action-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pg-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.pg-action-btn i {
    font-size: 14px;
    opacity: 0.9;
}

/* Icon-only buttons */
.pg-action-btn.pg-icon-only {
    padding: 10px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
}

.pg-action-btn.pg-icon-only span {
    display: none;
}

.pg-action-btn.pst-shr .lst-social {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #1d1d21;
    border: 1px solid #29292e;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 8px;
    z-index: 100;
    min-width: 150px;
}

.pg-action-btn.pst-shr:hover .lst-social {
    display: block;
}

.pg-action-btn.pst-shr .lst-social li {
    list-style: none;
}

.pg-action-btn.pst-shr .lst-social a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
}

.pg-action-btn.pst-shr .lst-social a:hover {
    background: #29292e;
}

/* Row 3: Ad Banners */
.pg-ad-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.pg-ad-banner {
    flex: 1;
    max-width: 728px;
}

/* Row 4: Related Games Section */
.pg-related-section {
    margin-top: 16px;
}

.pg-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
}

.pg-related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.pg-related-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pg-carbon-300, #1d1d21);
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.pg-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pg-related-thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.pg-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pg-related-card:hover .pg-related-thumb img {
    transform: scale(1.05);
}

.pg-related-name {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   RESPONSIVE - PLAYGAMA LAYOUT
   ========================================= */

/* Show games grid column at 993px+ (same breakpoint as pg-player-row) */
@media (min-width: 993px) {
    .pg-games-grid-column {
        display: flex;
        overflow-y: auto !important;
    }
}

/* At 1920px+, games grid shows 2 columns; below that, 1 column */
@media (min-width: 1921px) {
    .pg-player-row {
        grid-template-columns: 4fr 1fr;
        /* Playgama Ultra-Wide Split */
    }

    .pg-small-games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (min-width: 1201px) and (max-width: 1920px) {
    .pg-player-row {
        grid-template-columns: 7fr 1fr;
        /* Playgama Wide Desktop Split */
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .pg-player-row {
        grid-template-columns: 8fr 1fr;
        /* Playgama Desktop Split */
    }
}

@media (max-width: 1400px) {
    .pg-main-layout {
        grid-template-columns: 1fr 300px;
    }
}

@media (max-width: 1200px) {
    .pg-main-layout {
        grid-template-columns: 1fr 300px;
    }

    .pg-related-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1024px) {
    .pg-main-layout {
        grid-template-columns: 1fr;
    }

    .pg-promo-column {
        display: none;
    }

    .pg-player-row {
        grid-template-columns: 10fr 1fr;
        height: auto;
    }
}

@media (max-width: 992px) {
    .pg-player-row {
        grid-template-columns: 1fr;
    }

    /* Games grid column hidden at <=992px (same as player-row single column) */
    .pg-games-grid-column {
        display: none;
    }

    .pg-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .pg-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .pg-grid-game {
        width: 100%;
    }

    .pg-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pg-action-btn span {
        display: none;
    }

    .pg-action-btn {
        padding: 10px 12px;
    }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
    .pg-player-wrapper {
        border-radius: 0;
        margin: 0 -15px;
    }

    .pg-overlay-content {
        padding: 16px;
    }

    .pg-game-badge {
        padding: 6px 12px 6px 6px;
    }

    .pg-game-badge img {
        width: 36px;
        height: 36px;
    }

    .pg-badge-title {
        font-size: 14px;
    }

    .pg-play-btn-text {
        padding: 12px 32px;
        font-size: 16px;
    }

    .pg-players-info {
        display: none;
    }

    .pg-game-title {
        font-size: 22px;
    }

    .pg-player-actions {
        flex-direction: column;
        gap: 12px;
    }

    .pg-actions-left,
    .pg-actions-right {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   Phase 8: Full Page Cleanup (Clean Wrappers)
   ========================================= */

/* Replaces .post-sngl .post-game etc. */
.pg-page-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
    /* Fix for height collapse if children float */
    display: flow-root;
}

/* Replaces .game-cn but retains Flex layout for Sidebar support */
.pg-game-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Removed legacy 10px padding */
    background: transparent;
    /* Removed legacy dark blue bg */
    position: relative;
    z-index: 5;
}

/* Ensure the main wrapper establishes a stacking context and layout block */
.pg-game-wrapper {
    display: flow-root;
    position: relative;
    z-index: 5;
    /* Ensure opaque background */
}

/* Mobile responsive behavior for container */
/* =========================================
   Phase 10: Extensive Refinements (Playgama Polish)
   ========================================= */

/* 1. Play Now Button Resize & Position */
.pg-play-now-btn.pg-btn-small {
    width: auto !important;
    padding: 10px 24px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.pg-play-now-btn.pg-btn-small:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
}

/* 2. Breadcrumbs & Title */
.pg-game-info .pg-breadcrumbs a {
    color: #8E8EA8;
    font-weight: 500;
    text-decoration: none;
}

.pg-game-info .pg-breadcrumbs i {
    color: #555;
    margin: 0 6px;
    font-size: 12px;
}

.pg-game-title {
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 24px;
    color: #fff;
}

/* 3. Hardcoded Info Section (NBVoz) */
/* 3. Game Info Bar (NBVoz - Vertical List) */
.pg-game-stats-bar.NBVoz {
    /* Scoped Variables from Playgama Snippet */
    --white: #fff;
    --white-08: rgba(255, 255, 255, 0.08);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-20: rgba(255, 255, 255, 0.2);
    --carbon-300: #1d1d21;
    --purple-400: #9747ff;
    --radius-12: 12px;

    display: flex;
    flex-direction: column;
    /* Vertical Stack */
    gap: 8px;
    /* Spacing between rows */
    padding: 0;
    margin-bottom: 24px;
    background: var(--carbon-300);
    /* Background on Container */
    border: 1px solid var(--white-12);
    /* Single Border on Container */
    border-radius: var(--radius-12);
    width: 100%;
    overflow: hidden;
    /* Clip children */
}

/* Stat Chips (Rows) */
.pg-stat-chip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align Left */
    /* Limit label left, value right */
    gap: 12px;
    padding: 12px 16px;
    /* Increased padding for row feel */
    background: transparent;
    /* Remove background */
    border: none;
    /* Remove border */
    border-radius: 0;
    /* Remove radius */
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    min-height: 48px;
    border-bottom: none;
    /* Removed Separator */
}

/* Icon Style */
.pg-stat-chip i {
    color: #9ca3af;
    /* Match label color */
    font-size: 14px;
    width: 20px;
    /* Fixed width for alignment */
    text-align: center;
    flex-shrink: 0;
}

/* Removed Hover Effect */
/* .pg-stat-chip:hover {
    background: var(--white-08);
} */

.pg-stat-label {
    color: #9ca3af;
    /* Secondary text */
    flex-shrink: 0;
}

.pg-stat-value {
    color: #fff;
    font-weight: 600;
    text-align: left;
    word-break: break-word;
    /* Prevent overflow */
}

.pg-stat-chip.rating .post-ratings {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    /* Align left */
}

.pg-stat-chip.rating img {
    height: 18px;
    width: auto;
}

/* Categories in Chip */
.pg-stat-chip.categories {
    /* reuse standard chip styles */
    gap: 12px;
}

/* Tags in Chip (if used elsewhere, keep, but for categories we use text now) */
.pg-stat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    width: 100%;
}

.pg-stat-link {
    color: var(--purple-400);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    background: rgba(151, 71, 255, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.pg-stat-link:hover {
    color: #c084fc;
    background: rgba(151, 71, 255, 0.2);
}

/* 4. Tags with New Style */
.pg-game-tags {
    margin-bottom: 24px;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
}

.pg-game-tags .pg-tag {
    background: #2C2C35;
    /* Darker than before */
    color: #DDD;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid #333;
    transition: all 0.2s;
}

.pg-game-tags .pg-tag:hover {
    background: #6C5DD3;
    border-color: #6C5DD3;
    color: #fff !important;
    /* Force white text */
}

/* 5. Youtube Video */
.pg-video-section {
    margin-top: 32px;
    margin-bottom: 32px;
}

.pg-section-heading {
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px;
    border-left: 3px solid #6C5DD3;
    padding-left: 12px;
}

.pg-video-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 6. Large Random Game Button (Keep, as it's new) */
.pg-random-button-wrapper {
    margin: 40px 0;
    text-align: center;
}

.pg-random-large-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(45deg, #6C5DD3, #8E44AD);
    color: #fff;
    padding: 16px 48px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(108, 93, 211, 0.4);
    transition: all 0.3s;
}

.pg-random-large-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(108, 93, 211, 0.6);
    filter: brightness(1.1);
}

.pg-random-large-btn i {
    font-size: 20px;
}

/* Responsive Adjustments (Specific to NBvoz) */
@media (max-width: 768px) {
    .pg-game-stats-bar.NBVoz {
        flex-wrap: wrap;
    }
}

/* 7. Isolated Random Games Grid (8 Columns) */
.pg-game-page-random-grid .pg-grid-three-container {
    grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 1600px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1200px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 900px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Ensure 16th item is visible by default (Desktop > 1600px) */
.pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(n+16) {
    display: block !important;
}

/* Responsive Visibility Logic */

/* 1600px+: 16 items (8 cols x 2 rows) - Default */

/* 1400px - 1600px: 12 items (6 cols x 2 rows) */
/* 1400px - 1600px: 12 items (6 cols x 2 rows) */
@media (max-width: 1600px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(6, 1fr);
    }

    .pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(-n+12) {
        display: block !important;
    }

    .pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(n+13) {
        display: none !important;
    }
}

/* 1400px - 1600px: 12 items (6 cols x 2 rows) */
@media (max-width: 1600px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(6, 1fr);
    }

    .pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(-n+12) {
        display: block !important;
    }

    .pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(n+13) {
        display: none !important;
    }
}

/* 1200px - 1400px: 15 items (5 cols x 3 rows) */
@media (max-width: 1400px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(5, 1fr);
    }

    .pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(-n+15) {
        display: block !important;
    }

    .pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(n+16) {
        display: none !important;
    }
}

/* 900px - 1200px: 15 items (5 cols x 3 rows) - Inherited from above, just ensuring cols */
@media (max-width: 1200px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Items 1-15 are already visible from <1400px rule cascade */
}

/* Under 900px: 12 items (4 cols x 3 rows) */
@media (max-width: 900px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .pg-game-page-random-grid .pg-grid-three-container .pg-grid-three-card:nth-child(n+13) {
        display: none !important;
    }
}

/* Under 600px: 12 items (3 cols x 4 rows) */
@media (max-width: 600px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Keep showing 12 items matches 3x4 nicely */
}


/* Lite Youtube Player */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 12px;
}

lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

lite-youtube>.lty-playbtn {
    display: block;
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

lite-youtube:hover>.lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

lite-youtube.lyt-activated {
    cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated>.lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (max-width: 600px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 400px) {
    .pg-game-page-random-grid .pg-grid-three-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Lite YouTube Embed (From Gamevoda-Two - Adjusted for MaxiGames Wrapper) */
lite-youtube {
    background-color: #000;
    position: absolute;
    /* Changed from relative to absolute */
    top: 0;
    left: 0;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe (Not strictly needed with absolute positioning but harmless) */
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}

lite-youtube>iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube>.lty-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>') !important;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: none !important;
    border-radius: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
}

lite-youtube:hover>.lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated>.lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* =========================================
   ACTION BAR - Playgama Redesign (Phase 29 Retry)
   ========================================= */

/* Scoped variables for the action bar to prevent global conflicts */
.pg-action-bar {
    --radius-12: 12px;
    --radius-16: 16px;
    --white: #fff;
    --label: #ffffff99;
    --white-08: rgba(255, 255, 255, .08);
    --white-12: rgba(255, 255, 255, .12);
    --white-20: rgba(255, 255, 255, .2);
    --purple-400: #9747ff;
    --purple-500: #aa76ff;
    --carbon-300: #1d1d21;
    --carbon-400: #29292e;
    --font-weight-semibold: 600;

    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: transparent;
    border-radius: 0 0 var(--radius-12) var(--radius-12);
    position: relative;
    z-index: 10;
}

/* LEFT: Game Badge */
.pg-action-left {
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Ensure container respects limits */
}

.pg-badge-info-small {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    overflow: hidden;
    /* Needed for child ellipsis */
}

.pg-badge-title-small {
    font-size: 13px;
    /* Smaller as requested */
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    /* Force truncation */
    line-height: 1.2;
}

.pg-badge-label-small {
    font-size: 11px;
    color: var(--label);
}

/* RIGHT: Action Buttons */
.pg-action-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Base Action Button */
.pg-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    background: var(--white-08);
    border: 1px solid var(--white-12);
    border-radius: var(--radius-12);
    color: var(--white);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 8px;
    background: #29292E !important;
}

.pg-action-btn:hover {
    background: var(--white-20);
    transform: translateY(-1px);
    background: #39393E !important;
    box-shadow: none;
}

.pg-action-btn i {
    font-size: 16px;
    color: var(--white);
    opacity: 0.9;
}

/* Button Text */
.pg-btn-text {
    display: none;
    white-space: nowrap;
}

/* Install Button */
.pg-install-btn {
    background: var(--purple-400);
    border-color: var(--purple-400);
}

.pg-install-btn:hover {
    background: var(--purple-500);
    border-color: var(--purple-500);
    box-shadow: none;
}

/* Like/Dislike Group */
.pg-like-group {
    display: flex;
    align-items: center;
    background: var(--white-08);
    border: 1px solid var(--white-12);
    border-radius: var(--radius-12);
    overflow: hidden;
    height: 40px;
}

.pg-like-group .pg-action-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    height: 100%;
    padding: 0 12px;
    border-radius: 0px !important;
}

.pg-like-group .pg-action-btn:hover {
    background: var(--white-12);
    transform: none;
}

.pg-like-btn {
    border-right: 1px solid var(--white-12) !important;
}

.pg-like-count {
    font-size: 12px;
    color: #4ade80;
    /* Greenish */
    margin-left: 4px;
}

/* Share Hover Card Wrapper */
.pg-share-wrap {
    position: relative;
    /* Ensure it doesn't get squashed */
    flex-shrink: 0;
}

/* Share Card */
.pg-share-card {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 300px;
    background: #18181b;
    /* Darker bg */
    border: 1px solid var(--white-12);
    border-radius: var(--radius-16);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 100;
}

.pg-share-wrap:hover .pg-share-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pg-share-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pg-share-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.pg-share-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-share-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.pg-share-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.pg-share-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white-08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transition: all 0.2s;
    text-decoration: none !important;
}

.pg-share-icon:hover {
    transform: scale(1.1);
    background: var(--white-20);
}

.pg-share-icon.facebook {
    color: #1877f2;
}

.pg-share-icon.twitter {
    color: #1da1f2;
}

.pg-share-icon.reddit {
    color: #ff4500;
}

.pg-share-link-row {
    display: flex;
    gap: 8px;
    background: #000;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--white-12);
}

.pg-share-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #aeaeae;
    font-size: 13px;
    padding: 0 8px;
    outline: none;
}

.pg-copy-btn {
    border-radius: 6px;
    background: var(--white-12);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #29292E !important;
}

.pg-copy-btn:hover {
    background: #39393E !important;
    box-shadow: none;
}

/* =========================================
   RESPONSIVE RULES (Action Bar)
   ========================================= */

/* Large Screens (> 1400px): Show Text Labels */
@media (min-width: 1401px) {
    .pg-btn-text {
        display: inline-block;
    }
}

/* Mobile (< 480px) */
@media (max-width: 480px) {
    .pg-action-left {
        display: none;
    }

    /* Like Group: Visible, flex 1 to match share/install */
    .pg-like-group {
        display: flex;
        flex: 1;
    }

    .pg-action-bar {
        padding: 0 12px;
        justify-content: normal;
        /* Reset justify-content: space-between */
    }

    .pg-action-right {
        width: 100%;
        display: flex;
        justify-content: space-between;
        /* Spread items */
        gap: 8px;
    }

    .pg-install-btn {
        margin-right: 0;
        flex: 1;
        /* Fixed width, or flex: 1 if desired? But usually install is icon only */
    }

    /* Share matches Like group size */
    .pg-share-wrap {
        flex: 1;
    }

    .pg-share-trigger {
        width: 100%;
    }

    /* Hide fullscreen */
    .pg-fullscreen-btn {
        display: none;
    }
}

/* Tablet & Mobile (< 1025px): Hide Share Hover Card to force Native Share interaction */
@media (max-width: 1024px) {
    .pg-share-card {
        display: none !important;
    }
}

/* =========================================
   TOP 3 PLAYERS (Banner)
   ========================================= */

.pg-top-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* --gap-12 */
    margin-top: 16px;
    margin-bottom: 16px;
}

.pg-avatars {
    display: flex;
    align-items: center;
    margin-right: -10px;
    /* Overlap effect if needed, Playgama uses specific spacing */
}

.pg-avatar-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #29292e;
    /* Matches bg color to look like cut-out */
    overflow: hidden;
    margin-left: -10px;
    /* Overlap */
    position: relative;
    z-index: 1;
}

.pg-avatar-item:first-child {
    margin-left: 0;
    z-index: 3;
}

.pg-avatar-item:nth-child(2) {
    z-index: 2;
}

.pg-avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-top-label {
    font-size: 14px;
    color: #fff;
    /* --white */
    font-weight: 500;
}

@media (max-width: 1199px) {
    .pg-top-players {
        display: none !important;
    }
}

/* =========================================
   ARCHIVE PAGE - HOMEPAGE STYLE PARITY
   ========================================= */

body.archive .pg-archive-widget,
body.category .pg-archive-widget,
body.tag .pg-archive-widget {
    margin-bottom: 24px;
}

body.archive .pg-archive-head,
body.category .pg-archive-head,
body.tag .pg-archive-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

body.archive .pg-archive-title,
body.category .pg-archive-title,
body.tag .pg-archive-title {
    margin: 0;
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

body.archive .pg-archive-breadcrumbs,
body.category .pg-archive-breadcrumbs,
body.tag .pg-archive-breadcrumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #29292e;
    background: #1d1d21;
    color: #8e8ea8;
    font-size: 13px;
    font-weight: 500;
}

body.archive .pg-archive-breadcrumbs a,
body.category .pg-archive-breadcrumbs a,
body.tag .pg-archive-breadcrumbs a {
    color: #8e8ea8;
    text-decoration: none;
}

body.archive .pg-archive-breadcrumbs a:hover,
body.category .pg-archive-breadcrumbs a:hover,
body.tag .pg-archive-breadcrumbs a:hover {
    color: #c7abff;
}

body.archive .pg-archive-breadcrumbs i,
body.category .pg-archive-breadcrumbs i,
body.tag .pg-archive-breadcrumbs i {
    color: #5d6075;
    font-size: 11px;
}

body.archive .pg-archive-breadcrumbs .pg-breadcrumb-current,
body.category .pg-archive-breadcrumbs .pg-breadcrumb-current,
body.tag .pg-archive-breadcrumbs .pg-breadcrumb-current {
    color: #fff;
    font-weight: 600;
}

body.archive .pg-header-link-static,
body.category .pg-header-link-static,
body.tag .pg-header-link-static {
    width: auto;
}

body.archive .pg-archive-controls,
body.category .pg-archive-controls,
body.tag .pg-archive-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.archive .pg-archive-controls .mt-slct-cn,
body.category .pg-archive-controls .mt-slct-cn,
body.tag .pg-archive-controls .mt-slct-cn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.archive .pg-archive-controls label,
body.category .pg-archive-controls label,
body.tag .pg-archive-controls label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.archive .pg-archive-controls .selecter,
body.archive .pg-archive-controls select,
body.category .pg-archive-controls .selecter,
body.category .pg-archive-controls select,
body.tag .pg-archive-controls .selecter,
body.tag .pg-archive-controls select {
    min-width: 170px;
}

body.archive .pg-archive-controls .selecter-selected,
body.category .pg-archive-controls .selecter-selected,
body.tag .pg-archive-controls .selecter-selected {
    background: #1d1d21 !important;
    border: 1px solid #29292e !important;
    border-radius: 10px !important;
    color: #fff !important;
    height: 38px;
    line-height: 38px;
    padding: 0 34px 0 12px !important;
}

body.archive .pg-archive-description,
body.category .pg-archive-description,
body.tag .pg-archive-description {
    margin: 22px 0 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
}

body.archive ul.pg-archive-grid,
body.category ul.pg-archive-grid,
body.tag ul.pg-archive-grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.archive ul.pg-archive-grid.lst-gmct,
body.archive ul.pg-archive-grid.lst-gmct-cntcls-n6,
body.archive ul.pg-archive-grid.lst-gams,
body.category ul.pg-archive-grid.lst-gmct,
body.category ul.pg-archive-grid.lst-gmct-cntcls-n6,
body.category ul.pg-archive-grid.lst-gams,
body.tag ul.pg-archive-grid.lst-gmct,
body.tag ul.pg-archive-grid.lst-gmct-cntcls-n6,
body.tag ul.pg-archive-grid.lst-gams {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.archive ul.pg-archive-grid>li,
body.category ul.pg-archive-grid>li,
body.tag ul.pg-archive-grid>li {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.archive .pg-archive-card,
body.category .pg-archive-card,
body.tag .pg-archive-card {
    position: relative;
    text-decoration: none !important;
    transition: transform 0.2s ease;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.archive .pg-archive-card:hover,
body.category .pg-archive-card:hover,
body.tag .pg-archive-card:hover {
    transform: scale(1.03);
}

body.archive .pg-archive-card .pg-card-image-wrap,
body.category .pg-archive-card .pg-card-image-wrap,
body.tag .pg-archive-card .pg-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 378 / 252;
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a;
    transition: box-shadow 0.2s ease;
}

body.archive .pg-archive-card:hover .pg-card-image-wrap,
body.category .pg-archive-card:hover .pg-card-image-wrap,
body.tag .pg-archive-card:hover .pg-card-image-wrap {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.archive .pg-archive-card .pg-card-image-wrap img,
body.category .pg-archive-card .pg-card-image-wrap img,
body.tag .pg-archive-card .pg-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.archive .pg-archive-card .pg-card-badge,
body.category .pg-archive-card .pg-card-badge,
body.tag .pg-archive-card .pg-card-badge {
    position: absolute;
    top: -6px;
    left: -8px;
    width: auto;
    height: 36px;
    z-index: 2;
    pointer-events: none;
}

body.archive .pg-archive-card .pg-card-title,
body.category .pg-archive-card .pg-card-title,
body.tag .pg-archive-card .pg-card-title {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transition: color 0.2s ease;
}

body.archive .pg-archive-card:hover .pg-card-title,
body.category .pg-archive-card:hover .pg-card-title,
body.tag .pg-archive-card:hover .pg-card-title {
    color: #c7abff;
}

body.archive .wp-pagenavi,
body.category .wp-pagenavi,
body.tag .wp-pagenavi {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

body.archive .wp-pagenavi .pages,
body.category .wp-pagenavi .pages,
body.tag .wp-pagenavi .pages {
    display: none !important;
}

body.archive .wp-pagenavi a,
body.archive .wp-pagenavi span,
body.category .wp-pagenavi a,
body.category .wp-pagenavi span,
body.tag .wp-pagenavi a,
body.tag .wp-pagenavi span {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 1 !important;
    border: 0 !important;
    background: #20222e !important;
    color: #fff !important;
}

body.archive .wp-pagenavi span.current,
body.category .wp-pagenavi span.current,
body.tag .wp-pagenavi span.current {
    background: #8b5cf6 !important;
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.35);
}

body.archive .wp-pagenavi a:hover,
body.category .wp-pagenavi a:hover,
body.tag .wp-pagenavi a:hover {
    background: #2a2c3a !important;
    transform: translateY(-2px);
}

body.archive .wp-pagenavi a.nextpostslink,
body.archive .wp-pagenavi a.previouspostslink,
body.archive .wp-pagenavi a.next,
body.archive .wp-pagenavi a.prev,
body.category .wp-pagenavi a.nextpostslink,
body.category .wp-pagenavi a.previouspostslink,
body.category .wp-pagenavi a.next,
body.category .wp-pagenavi a.prev,
body.tag .wp-pagenavi a.nextpostslink,
body.tag .wp-pagenavi a.previouspostslink,
body.tag .wp-pagenavi a.next,
body.tag .wp-pagenavi a.prev {
    font-size: 0;
}

body.archive .wp-pagenavi a.nextpostslink:before,
body.archive .wp-pagenavi a.previouspostslink:before,
body.archive .wp-pagenavi a.next:before,
body.archive .wp-pagenavi a.prev:before,
body.category .wp-pagenavi a.nextpostslink:before,
body.category .wp-pagenavi a.previouspostslink:before,
body.category .wp-pagenavi a.next:before,
body.category .wp-pagenavi a.prev:before,
body.tag .wp-pagenavi a.nextpostslink:before,
body.tag .wp-pagenavi a.previouspostslink:before,
body.tag .wp-pagenavi a.next:before,
body.tag .wp-pagenavi a.prev:before {
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 767px) {

    body.archive .wp-pagenavi a,
    body.archive .wp-pagenavi span,
    body.category .wp-pagenavi a,
    body.category .wp-pagenavi span,
    body.tag .wp-pagenavi a,
    body.tag .wp-pagenavi span {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 24px;
    }

    body.archive .wp-pagenavi a.nextpostslink:before,
    body.archive .wp-pagenavi a.previouspostslink:before,
    body.archive .wp-pagenavi a.next:before,
    body.archive .wp-pagenavi a.prev:before,
    body.category .wp-pagenavi a.nextpostslink:before,
    body.category .wp-pagenavi a.previouspostslink:before,
    body.category .wp-pagenavi a.next:before,
    body.category .wp-pagenavi a.prev:before,
    body.tag .wp-pagenavi a.nextpostslink:before,
    body.tag .wp-pagenavi a.previouspostslink:before,
    body.tag .wp-pagenavi a.next:before,
    body.tag .wp-pagenavi a.prev:before {
        font-size: 18px;
    }
}

@media (max-width: 1200px) {

    body.archive ul.pg-archive-grid.lst-gmct,
    body.archive ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.archive ul.pg-archive-grid.lst-gams,
    body.category ul.pg-archive-grid.lst-gmct,
    body.category ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.category ul.pg-archive-grid.lst-gams,
    body.tag ul.pg-archive-grid.lst-gmct,
    body.tag ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.tag ul.pg-archive-grid.lst-gams {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {

    body.archive ul.pg-archive-grid.lst-gmct,
    body.archive ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.archive ul.pg-archive-grid.lst-gams,
    body.category ul.pg-archive-grid.lst-gmct,
    body.category ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.category ul.pg-archive-grid.lst-gams,
    body.tag ul.pg-archive-grid.lst-gmct,
    body.tag ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.tag ul.pg-archive-grid.lst-gams {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {

    body.archive .pg-archive-controls,
    body.category .pg-archive-controls,
    body.tag .pg-archive-controls {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    body.archive .pg-archive-controls .mt-slct-cn,
    body.category .pg-archive-controls .mt-slct-cn,
    body.tag .pg-archive-controls .mt-slct-cn {
        width: 100%;
    }

    body.archive .pg-archive-controls .selecter,
    body.archive .pg-archive-controls select,
    body.category .pg-archive-controls .selecter,
    body.category .pg-archive-controls select,
    body.tag .pg-archive-controls .selecter,
    body.tag .pg-archive-controls select {
        width: 100%;
        min-width: 0;
    }

    body.archive ul.pg-archive-grid.lst-gmct,
    body.archive ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.archive ul.pg-archive-grid.lst-gams,
    body.category ul.pg-archive-grid.lst-gmct,
    body.category ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.category ul.pg-archive-grid.lst-gams,
    body.tag ul.pg-archive-grid.lst-gmct,
    body.tag ul.pg-archive-grid.lst-gmct-cntcls-n6,
    body.tag ul.pg-archive-grid.lst-gams {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================
   WORDPRESS PAGES - PLAYGAMA STYLE PARITY
   ========================================= */

body.page .main-cn.pg-content-area {
    gap: 0;
}

body.page .pg-page-breadcrumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #29292e;
    background: #1d1d21;
    color: #8e8ea8;
    font-size: 13px;
    font-weight: 500;
}

body.page .pg-page-breadcrumbs a {
    color: #8e8ea8;
    text-decoration: none;
}

body.page .pg-page-breadcrumbs a:hover {
    color: #c7abff;
}

body.page .pg-page-breadcrumbs i {
    color: #5d6075;
    font-size: 11px;
}

body.page .pg-page-breadcrumbs .pg-breadcrumb-current {
    color: #fff;
    font-weight: 600;
}

body.page .pg-page-article {
    margin: 0;
}

body.page .pg-page-content {
    background: #1d1d21;
    border: 1px solid #29292e;
    border-radius: 12px;
    padding: 24px;
    margin: 0 0 24px;
}

body.page .pg-page-title {
    margin: 0 0 16px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
}

body.page .pg-page-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.75;
}

body.page .pg-page-description p {
    margin: 0 0 16px;
}

body.page .pg-page-description h2,
body.page .pg-page-description h3,
body.page .pg-page-description h4 {
    color: #fff;
    margin: 24px 0 10px;
    line-height: 1.25;
}

body.page .pg-page-description a {
    color: #c7abff;
    text-decoration: none;
}

body.page .pg-page-description a:hover {
    color: #fff;
}

body.page .pg-page-description ul,
body.page .pg-page-description ol {
    margin: 0 0 16px 20px;
}

body.page .pg-page-description li {
    margin-bottom: 8px;
}

@media (max-width: 767px) {

    body.page .pg-page-content {
        padding: 16px;
    }

    body.page .pg-page-title {
        font-size: clamp(22px, 7vw, 28px);
    }
}

/* =========================================
   LAYOUT ADJUSTMENTS - LARGE SCREENS
   ========================================= */

@media (min-width: 993px) {
    [class*="cntcls"] {
        margin-left: -30px;
    }
}