/* ================================================
   UNIFIED STYLES - GeometryLitePC.io Clone
   Production-Ready Consolidated Stylesheet
   Version: 2.0 — Full Redesign
   ================================================ */

/* ========== CSS VARIABLES ========== */
:root {
    /* Colors — Light Theme */
    --bg-color: #f5f5ff;
    --surface: #ffffff;
    --card-bg: #ffffff;
    --primary: #5D5FEF;
    --primary-hover: #4b4dd4;
    --primary-light: #e0e7ff;
    --hot-gradient: linear-gradient(135deg, #ff6b35, #f43f5e);
    --new-gradient: linear-gradient(135deg, #a855f7, #6366f1);
    --hot-color: #ef4444;
    --new-color: #a855f7;
    --text-primary: #1f2937;
    --text-secondary: #4b5563; /* A11Y FIX: was #6b7280 (4.0:1), now 7.1:1 on white */
    --text-muted: #6b7280; /* A11Y FIX: was #9ca3af (2.8:1), now 4.6:1 on white */
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --nav-bg: #ffffff;
    --header-bg: #ffffff;

    /* Additional variables used by widgets */
    --bg-secondary: #f8fafc;
    --bg-primary: #ffffff;
    --border-color: #e5e7eb;
    --text-dark: #1f2937;

    /* Zone Widths */
    --nav-width: 130px;

    /* Spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 150ms var(--ease);
    --t-base: 250ms var(--ease);
    --t-slow: 400ms var(--ease);

    /* Header */
    --header-height: 80px;
}

/* ========== DARK MODE ========== */
body.dark-mode {
    --bg-color: #090d18;
    --surface: #141925;
    --card-bg: #1A2030;
    --text-primary: #f0f2f8;
    --text-secondary: #b0bec5;
    --text-muted: #7e8ea0;
    --border: #252d3d;
    --border-light: #1A2030;
    --nav-bg: #10141e;
    --header-bg: #10141e;
    --primary-light: rgba(93, 95, 239, 0.15);

    /* Additional variables used by widgets */
    --bg-secondary: #0B0E14;
    --bg-primary: #141925;
    --border-color: #252d3d;
    --text-dark: #f0f2f8;
}

/* ========== GLOBAL RESET ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* NOTE: overflow-x: hidden was removed from html because it breaks
       position: sticky for ALL child elements. The body element already
       has overflow-x: hidden which is sufficient to prevent horizontal scroll. */
}

body {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-color);
    background-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(93, 95, 239, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
    background-attachment: scroll;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    /* Use 100% instead of 100vw — 100vw ignores scrollbar width and
       clips content when zooming in. 100% respects actual viewport. */
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--t-fast);
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ========== HEADER ========== */
.site-header {
    background: var(--header-bg);
    /* Use min-height instead of fixed height — allows header to flex
       gracefully when zoomed in rather than clipping content */
    min-height: var(--header-height);
    height: auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 1100;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    gap: 16px;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Logo */
.logo {
    font-family: 'Lexend', sans-serif;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.logo img {
    height: var(--logo-height, 40px);
    width: auto;
    max-width: 320px;
    object-fit: contain;
    /* No border-radius — allows transparent PNG text logos to display cleanly */
}

.logo i {
    font-size: 40px;
}

/* Search — centered in header (geometrylitepc.io style) */
.search-box {
    display: flex;
    align-items: center;
    background: var(--bg-color);
    border-radius: var(--radius-full);
    padding: 10px 20px;
    flex: 1;
    max-width: 500px;
    min-width: 160px;
    margin: 0 auto;
    border: 1px solid var(--border);
    transition: all var(--t-base);
    position: relative;
}

.search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(93, 95, 239, 0.12);
    background: var(--surface);
}

.search-box input {
    background: none;
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: var(--text-primary);
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-box i {
    color: var(--text-muted);
    margin-right: 10px;
    font-size: 14px;
}

/* Mobile search toggle button — hidden on desktop */
.mobile-search-btn {
    display: none !important;
}

/* ===== Mobile Search Overlay (geometrylitepc.io style) ===== */
.mobile-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface, #fff);
    z-index: 2000;
    flex-direction: column;
    animation: searchSlideDown 0.25s ease;
}

.mobile-search-overlay.active {
    display: flex;
}

@keyframes searchSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.mobile-search-header {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.mobile-search-close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mobile-search-close:hover {
    background: var(--bg-color);
}

.mobile-search-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.mobile-search-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-full, 999px);
    padding: 12px 20px;
    gap: 10px;
}

.mobile-search-input-wrap i {
    color: var(--text-muted);
    font-size: 16px;
    flex-shrink: 0;
}

.mobile-search-input-wrap input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    font-size: 16px;
    color: var(--text-primary);
}

.mobile-search-input-wrap input::placeholder {
    color: var(--text-muted);
}

.mobile-search-results {
    margin-top: 16px;
}

.mobile-search-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mobile-search-grid .search-game-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform 0.2s;
}

.mobile-search-grid .search-game-card:active {
    transform: scale(0.97);
}

.mobile-search-grid .search-game-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.mobile-search-grid .search-game-card span {
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Sidebar Backdrop Overlay ===== */
/* NOTE: No backdrop-filter here — iOS Safari creates a new stacking context
   that renders the backdrop ABOVE the sidebar, blocking all clicks. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar-backdrop.active {
    display: block;
    opacity: 1;
}

/* Theme Toggle */
.header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.theme-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 15px;
    transition: all var(--t-fast);
}

.theme-btn:hover {
    background: var(--bg-color);
    color: var(--text-primary);
}

.theme-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Header Navigation — centered, evenly spaced */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
}

.header-nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
}

.header-nav-inner::-webkit-scrollbar {
    display: none;
}

.header-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: all var(--t-fast);
    text-decoration: none;
}

.header-nav-link:hover {
    color: var(--primary);
}

.header-nav-link i {
    font-size: 13px;
}

body.dark-mode .header-nav-link:hover {
    color: var(--primary);
}

/* Mobile menu toggle */
.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 18px;
    align-items: center;
    justify-content: center;
}

/* ========== 4-ZONE LAYOUT — 9-Column Proportional Grid ==========
/* Nav is fixed, content area is divided into 9 equal units: left=1, center=6, right=2 */
/* This ensures all game cards are IDENTICAL in size across all zones */
.main-layout {
    display: grid;
    /* Desktop: nav | spacer | left | spacer | center | spacer | right */
    grid-template-columns: var(--nav-width) 12px 1fr 3px 6fr 3px 2fr;
    gap: 0;
    min-height: calc(100vh - var(--header-height));
    align-items: stretch;
    /* All columns same height — bottom edges aligned */
    position: relative;
    padding-right: 12px;
    /* Smooth transition when zooming/resizing crosses breakpoints */
    transition: grid-template-columns 0.2s ease;
}

/* ========== ZONE 1: NAV SIDEBAR ========== */
.nav-sidebar {
    background: var(--nav-bg);
    padding: 12px 12px 12px 10px;
    overflow-y: auto;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--nav-width);
    height: calc(100vh - var(--header-height));
    grid-column: 1;
}

/* Thin scrollbar */
.nav-sidebar::-webkit-scrollbar,
.left-column::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar {
    width: 5px;
}

.nav-sidebar::-webkit-scrollbar-thumb,
.left-column::-webkit-scrollbar-thumb,
.right-sidebar::-webkit-scrollbar-thumb {
    background: var(--primary);
    opacity: 0.4;
    border-radius: 3px;
}

.nav-sidebar::-webkit-scrollbar-track,
.left-column::-webkit-scrollbar-track,
.right-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* Nav items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: all var(--t-fast);
}

.nav-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    position: relative;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(to bottom, var(--primary), var(--primary-hover, var(--primary)));
}

.nav-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.nav-item.hot i {
    color: var(--hot-color);
}

.nav-item.new i {
    color: var(--new-color);
}

/* Nav divider */
.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 4px;
}

.nav-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 14px 4px;
    letter-spacing: 0.8px;
}

/* Category items — same style as nav-item (geometrylitepc.io) */
.cat-tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--t-fast);
}

.cat-tag-pill i {
    display: none;
    /* Hide icon to center text perfectly */
}

.nav-category {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    margin-bottom: 2px;
    transition: all var(--t-fast);
}

.nav-category:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.cat-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.cat-img,
.nav-category img {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
}

/* ========== ZONE 2: LEFT COLUMN ========== */
/* No sticky — page scrolls as one unit like geometrylitepc.io */
.left-column {
    background: transparent;
    padding: 8px;
    overflow: visible;
    grid-column: 3;
}

/* ========== ZONE 3: CENTER CONTENT ========== */
.center-content {
    padding: 8px 14px;
    background: var(--bg-color);
    min-width: 0;
    /* prevent grid blowout */
    grid-column: 5;
}

/* ========== ZONE 4: RIGHT SIDEBAR ========== */
/* No sticky — page scrolls as one unit like geometrylitepc.io */
.right-sidebar {
    background: transparent;
    padding: 8px;
    overflow: visible;
    grid-column: 7;
}

/* ========== WIDGETS ========== */
.widget-section {
    margin-bottom: 20px;
}

.widget-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-title i {
    color: var(--primary);
    font-size: 14px;
}

/* ========== GAME GRID ========== */
.games-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    /* Prevent grid items from overflowing container on zoom */
    max-width: 100%;
    overflow: hidden;
}

.games-grid.cols-1 {
    grid-template-columns: 1fr;
}

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

.games-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

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

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

.games-grid.cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ========== GAME CARD — GeometryLite Style ========== */
.game-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.35s ease,
        z-index 0s;
    cursor: pointer;
    display: block;
    z-index: 1;
    border: none !important;
    padding: 0 !important;
}

.game-card:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15),
        0 0 20px var(--glow-color, rgba(93, 95, 239, 0.25)) !important;
    z-index: 10;
}

.game-card .card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.game-card .card-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-color);
    transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

/* Blur-up placeholder effect (CrazyGames trick) */
.game-card .card-thumb img.lazy {
    filter: blur(10px);
    opacity: 0.7;
}

.game-card .card-thumb img.lazy.loaded {
    filter: blur(0);
    opacity: 1;
}

.game-card:hover .card-thumb img {
    transform: scale(1.05) rotate(1.5deg);
}

/* Overlay — HIDDEN by default, shown on HOVER (geometrylitepc.io style) */
.game-card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 8px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card:hover .card-overlay {
    opacity: 1;
}

.game-card .card-overlay .overlay-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.game-card .card-overlay .overlay-cats {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card .card-overlay .overlay-rating {
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
    margin-top: 2px;
}

/* Hide the text below cards — we use overlay instead */
.game-card-title {
    display: none;
}

/* Legacy: cards without .card-thumb wrapper (backward compat) */
.game-card>img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-color);
    transition: transform 0.4s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

/* ========== GAME BADGES ========== */
.game-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 3px;
    color: white;
    letter-spacing: 0.5px;
    z-index: 3;
    pointer-events: none;
}

.game-badge.hot {
    background: var(--hot-gradient);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    animation: badgePulse 2.5s ease-in-out infinite;
}

.game-badge.new {
    background: var(--new-gradient);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
    animation: badgePulse 3s ease-in-out 0.5s infinite;
}

.game-badge.trending {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.35);
    animation: badgePulse 2.8s ease-in-out 0.3s infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.game-badge i {
    font-size: 8px;
}

/* ========== SIDEBAR GAME WIDGETS ========== */
.sidebar-games-widget {
    margin-bottom: 12px;
}

.sidebar-games-grid {
    display: grid;
    gap: 8px;
}

.sidebar-games-grid.columns-1 {
    grid-template-columns: 1fr;
}

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

.sidebar-games-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sidebar-game-card {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: var(--shadow-xs);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        z-index 0s;
    z-index: 1;
    border: 2px solid transparent;
}

.sidebar-game-card:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 10;
    border-color: rgba(255, 255, 255, 0.6);
}

.sidebar-game-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-color);
    transition: transform 0.4s ease;

}

.sidebar-game-card:hover img {
    transform: scale(1.05) rotate(1.5deg);
}

/* Sidebar card overlay — HIDDEN by default, shown on HOVER */
.sidebar-game-card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 6px 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-game-card:hover .card-overlay {
    opacity: 1;
}

.sidebar-game-card .card-overlay .overlay-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.sidebar-game-card .card-overlay .overlay-rating {
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.sidebar-game-card .game-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 3;
}

/* Dark mode sidebar cards */
body.dark-mode .sidebar-game-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ========== SEAMLESS GAME GRIDS IN SIDEBAR ZONES ========== */
/* Force complete transparency on ALL game grid containers within
   left-column (Zone 2) and right-sidebar (Zone 4) ONLY.
   Does NOT affect center-content widgets (Comments, Description, etc.)
   Matches geometrylitepc.io: cards float directly on main background. */

/* Zone containers (belt-and-suspenders with the transparent set above) */
.left-column,
.right-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Widget wrappers inside sidebar zones */
.left-column .sidebar-games-widget,
.left-column .new-games-widget,
.left-column .hot-games-widget,
.left-column .widget-section,
.right-sidebar .sidebar-games-widget,
.right-sidebar .new-games-widget,
.right-sidebar .hot-games-widget,
.right-sidebar .widget-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Game grid containers inside sidebar zones */
.left-column .sidebar-games-grid,
.left-column .games-grid,
.right-sidebar .sidebar-games-grid,
.right-sidebar .games-grid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Individual game cards inside sidebar zones (all modes) */
.left-column .game-card,
.left-column .sidebar-game-card,
.right-sidebar .game-card,
.right-sidebar .sidebar-game-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ========== GAME PLAYER ========== */
.game-iframe-container {
    position: relative;
    width: 100%;
    /* Height ≈ 5 sidebar thumbnail rows (each 4:3).
       Math: 5×(1fr×0.75)+gaps ≈ 68% of center(6fr) width */
    padding-bottom: 68%;
    background: #111;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 0;
}

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

/* Play overlay (Click to Play) */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(93, 95, 239, 0.85), rgba(99, 102, 241, 0.85));
    cursor: pointer;
    z-index: 5;
    transition: opacity var(--t-base);
}

.play-overlay:hover {
    background: linear-gradient(135deg, rgba(93, 95, 239, 0.95), rgba(99, 102, 241, 0.95));
}

.play-overlay .play-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    backdrop-filter: blur(4px);
    transition: transform var(--t-base);
}

.play-overlay:hover .play-icon {
    transform: scale(1.1);
}

/* ========== PLAYER CONTROLS BAR ========== */
.player-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 16px;
}

.player-controls .ctrl-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
}

.player-controls .ctrl-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.player-controls .ctrl-btn i {
    font-size: 14px;
}

/* Theater mode */
body.theater-mode .main-layout {
    grid-template-columns: 1fr;
}

body.theater-mode .nav-sidebar,
body.theater-mode .left-column,
body.theater-mode .right-sidebar {
    display: none;
}

body.theater-mode .game-iframe-container {
    border-radius: 0;
}

/* #5: Disable glassmorphism in Theater Mode to prevent GPU overload */
body.theater-mode .site-header,
body.theater-mode .play-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ========== SHARE MODAL ========== */
.share-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.share-modal-overlay.active {
    display: flex;
}

.share-modal {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 28px;
    width: 90%;
    max-width: 440px;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.share-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-color);
    color: var(--text-secondary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--t-fast);
}

.share-modal-close:hover {
    background: var(--hot-color);
    color: white;
}

.share-modal h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.share-url-box {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.share-url-box input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-color);
    outline: none;
}

.share-url-box button {
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast);
    white-space: nowrap;
}

.share-url-box button:hover {
    background: var(--primary-hover);
}

.share-social-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.share-social-icons a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    transition: transform var(--t-fast);
}

.share-social-icons a:hover {
    transform: scale(1.15);
}

.share-social-icons .share-facebook {
    background: #1877F2;
}

.share-social-icons .share-twitter {
    background: #000000;
}

.share-social-icons .share-whatsapp {
    background: #25D366;
}

.share-social-icons .share-linkedin {
    background: #0A66C2;
}

.share-social-icons .share-reddit {
    background: #FF4500;
}

/* ========== GAME DESCRIPTION ========== */
.game-description {
    background: var(--card-bg);
    padding: 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    line-height: 1.8;
    box-shadow: var(--shadow-xs);
}

.game-description h2 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700;
}

.game-description h3 {
    color: var(--text-primary);
    margin: 16px 0 8px;
    font-size: 18px;
    font-weight: 600;
}

.game-description p {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 15px;
}

.game-description ul,
.game-description ol {
    color: var(--text-secondary);
    padding-left: 20px;
    margin-bottom: 12px;
}

.game-description li {
    margin-bottom: 6px;
}

/* ========== TAGS ========== */
.game-tags {
    background: var(--card-bg);
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}

.game-tags h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 6px 14px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    transition: all var(--t-fast);
}

.tag:hover {
    background: var(--primary);
    color: white;
}

/* ========== BREADCRUMBS ========== */
.breadcrumbs {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding: 12px 0;
}

.breadcrumbs .breadcrumb-item {
    color: var(--primary);
    transition: color var(--t-fast);
}

.breadcrumbs .breadcrumb-item:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.breadcrumbs .breadcrumb-item.current {
    color: var(--text-primary);
    font-weight: 600;
}

.breadcrumbs .separator {
    margin: 0 8px;
    color: var(--text-muted);
}

/* ========== GAME HEADER (TITLE + RATING) ========== */
.game-header {
    margin-bottom: 16px;
    padding: 12px 0;
}

.game-header .game-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.2;
}

.game-header .game-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.game-header .stars {
    color: #fbbf24;
    font-size: 18px;
    letter-spacing: 1px;
}

.game-header .rating-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.game-header .review-count {
    font-size: 13px;
    color: var(--text-muted);
}

/* ========== COMMENTS SECTION ========== */
.comments-section {
    background: var(--card-bg);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.comments-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.comment-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comment-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.comment-form input,
.comment-form textarea {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-color);
    outline: none;
    font-family: inherit;
    transition: border-color var(--t-fast);
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(93, 95, 239, 0.1);
}

.comment-form textarea {
    min-height: 100px;
    resize: vertical;
}

.comment-form .terms-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.comment-form .terms-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.comment-form .terms-check a {
    color: var(--primary);
}

.comment-form .submit-btn {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast);
}

.comment-form .submit-btn:hover {
    background: var(--primary-hover);
}

/* Comment list */
.comment-list {
    margin-top: 24px;
}

.comment-item {
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
}

.comment-item:first-child {
    border-top: none;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.comment-author {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.comment-date {
    font-size: 12px;
    color: var(--text-muted);
}

.comment-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: 46px;
}

/* ========== PAGINATION ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    padding-bottom: 16px;
}

.pagination a,
.pagination span {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--t-fast);
}

.pagination a:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.pagination span.active,
.pagination .active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-weight: 700;
}

.pagination .disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== FLAG PAGE (Hot/New Games) ========== */
.flag-page-header {
    text-align: center;
    padding: 40px 20px;
    border-radius: var(--radius-lg);
    color: white;
    margin-bottom: 24px;
}

.flag-page-header h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.flag-page-header h1 i {
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

.flag-page-header p {
    font-size: 15px;
    opacity: 0.9;
    max-width: 560px;
    margin: 0 auto;
}

.flag-page-stats {
    margin-top: 12px;
    font-size: 14px;
    opacity: 0.85;
}

/* Game section (flag/category pages) */
.game-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* WIDGET CONTAINER OVERRIDES FOR TRANSPARENCY */
.widget-container,
.section-container,
.related-games-container,
.section {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.no-results {
    text-align: center;
    padding: 80px 20px;
    grid-column: 1 / -1;
}

.no-results-icon {
    font-size: 72px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-results-text {
    font-size: 16px;
    color: var(--text-muted);
}

/* ========== SEARCH RESULTS DROPDOWN ========== */
.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-height: 480px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
}

.search-results.active {
    display: block;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px;
}

.search-game-card {
    text-align: center;
    transition: transform var(--t-fast);
}

.search-game-card:hover {
    transform: scale(1.05);
}

.search-game-card img {
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    aspect-ratio: 1;
    object-fit: cover;
}

.search-game-card span {
    display: block;
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ========== FOOTER ========== */
.site-footer {
    background: var(--surface);
    border-top: none;
    padding: 32px 0 40px;
    margin-top: 40px;
    position: relative;
    max-width: 100%;
    /* Never exceed viewport */
    box-sizing: border-box;
    overflow: hidden;
    /* Prevent any child from causing horizontal scroll */
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--primary-hover, var(--primary)), transparent);
    opacity: 0.4;
    border-radius: 2px;
}

.footer-content {
    padding: 0 24px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ===== DESKTOP: 4-column single row (geometrylitepc.io exact layout) ===== */
/* Logo+Disclaimer LEFT | Developers | Information | Support */
.footer-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0 32px;
    margin-bottom: 24px;
    align-items: start;
}

/* Brand uses display:contents — logo+disclaimer become grid items in column 1 */
.footer-brand {
    display: contents;
}

.footer-brand .footer-logo {
    grid-column: 1;
    grid-row: 1;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.footer-brand .footer-logo img,
.footer-brand .footer-logo .footer-logo-img {
    max-width: 280px;
    max-height: 80px;
    height: auto;
    object-fit: contain;
}

.footer-brand .footer-disclaimer {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    /* A11Y FIX: removed opacity:0.8 — it reduced contrast below WCAG threshold */
}

/* 3 link columns span both rows */
.footer-columns-row {
    display: contents;
}

.footer-col {
    grid-row: 1 / -1;
    min-width: 0;
}

/* ===== TABLET + PHONE (≤768px): footer responsive ===== */
/* Disclaimer full-width on top (no logo), 3 link columns below */
@media (max-width: 768px) {

    .site-footer {
        padding: 20px 0 24px;
        margin-top: 20px;
    }

    .footer-content {
        padding: 0 16px;
    }

    .footer-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    /* Brand: disclaimer full-width, centered, logo hidden */
    .footer-brand {
        display: block;
        width: 100%;
        flex: 0 0 100%;
        text-align: center;
        padding: 0 0 16px 0;
        margin-bottom: 16px;
    }

    .footer-brand .footer-logo {
        display: none;
    }

    .footer-brand .footer-disclaimer {
        font-size: 13px;
        line-height: 1.6;
        color: var(--text-secondary);
        opacity: 1;
    }

    /* 3 link columns — always side-by-side on one row */
    .footer-columns-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
        justify-content: space-between;
    }

    .footer-col {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        grid-row: auto;
        padding: 0;
        text-align: left;
    }

    .footer-col h4 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .footer-col a {
        font-size: 12px;
        padding: 6px 0; /* A11Y FIX: was 3px — touch target too small for mobile */
    }

    .footer-bottom {
        margin-top: 20px;
        text-align: center;
    }
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.footer-col a {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 8px 0;
    transition: color var(--t-fast);
}

.footer-col a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    text-align: center;
}

.copyright {
    font-size: 13px;
    color: var(--text-muted);
}

/* Legacy .footer-links fallback */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 13px;
    transition: color var(--t-fast);
}

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

/* Footer logo link — block display for proper alignment */
.footer-logo a {
    display: inline-block;
}

/* ========== FOOTER — MOBILE RESPONSIVE ========== */
/* (Merged into the single ≤768px block above — no duplicate needed) */

/* Dark mode: footer brand paragraph */
body.dark-mode .footer-brand .footer-disclaimer {
    color: var(--text-secondary);
}

/* ========== ALERT / INFO BOXES ========== */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
}

.alert-info {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid rgba(93, 95, 239, 0.2);
}

.alert-warning {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.alert-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ========== DARK MODE SPECIFICS ========== */
body.dark-mode .site-header {
    background: var(--header-bg);
    border-bottom-color: var(--border);
}

body.dark-mode .search-box {
    background: var(--bg-color);
    border-color: var(--border);
}

body.dark-mode .search-box input {
    color: var(--text-primary);
}

body.dark-mode .theme-btn {
    background: var(--bg-color);
    border-color: var(--border);
}

body.dark-mode .game-card {
    background: var(--card-bg);
}

body.dark-mode .game-card-title {
    background: var(--card-bg);
}

body.dark-mode .center-content {
    background: var(--bg-color);
}

body.dark-mode .left-column {
    background: var(--surface);
}

body.dark-mode .right-sidebar {
    background: var(--surface);
}

body.dark-mode .nav-sidebar {
    background: var(--nav-bg);
}

body.dark-mode .site-header {
    background: rgba(16, 20, 30, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

body.dark-mode .game-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 24px var(--glow-color, rgba(93, 95, 239, 0.35)) !important;
}

body.dark-mode .comment-form input,
body.dark-mode .comment-form textarea {
    background: var(--bg-color);
    border-color: var(--border);
    color: var(--text-primary);
}

body.dark-mode .share-url-box input {
    background: var(--bg-color);
    color: var(--text-primary);
    border-color: var(--border);
}

body.dark-mode .search-results {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .pagination a,
body.dark-mode .pagination span {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .alert-info {
    background: rgba(93, 95, 239, 0.1);
}

body.dark-mode .alert-warning {
    background: rgba(194, 65, 12, 0.1);
    border-color: rgba(194, 65, 12, 0.2);
}

body.dark-mode .site-footer {
    background: var(--surface);
    border-top-color: var(--border);
}

/* ========== DARK MODE TEXT CONTRAST FIXES ========== */
/* Ensure all text is readable on dark backgrounds */

/* Widget titles */
body.dark-mode .widget-title,
body.dark-mode .widget-section h3,
body.dark-mode .widget-section h4 {
    color: var(--text-primary);
}

/* Sidebar game card overlay text - always white on gradient */
body.dark-mode .sidebar-game-card .card-overlay .overlay-name,
body.dark-mode .game-card .card-overlay .overlay-name {
    color: #fff;
}

/* Game description section */
body.dark-mode .game-description {
    color: var(--text-primary);
}

body.dark-mode .game-description h2,
body.dark-mode .game-description h3 {
    color: var(--text-primary);
}

body.dark-mode .game-description p {
    color: var(--text-secondary);
}

body.dark-mode .game-description ul,
body.dark-mode .game-description ol,
body.dark-mode .game-description li {
    color: var(--text-secondary);
}

/* Comments section */
body.dark-mode .comments-section {
    color: var(--text-primary);
}

body.dark-mode .comments-section h3,
body.dark-mode .comment-author {
    color: var(--text-primary);
}

body.dark-mode .comment-text {
    color: var(--text-secondary);
}

body.dark-mode .comment-date {
    color: var(--text-muted);
}

/* Sort dropdown in comments */
body.dark-mode .comments-section select,
body.dark-mode select {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}

/* Game header */
body.dark-mode .game-header .game-title {
    color: var(--text-primary);
}

body.dark-mode .game-header .rating-value {
    color: var(--text-secondary);
}

body.dark-mode .game-header .review-count {
    color: var(--text-muted);
}

/* Tags section */
body.dark-mode .game-tags h3 {
    color: var(--text-primary);
}

/* Breadcrumbs */
body.dark-mode .breadcrumbs {
    color: var(--text-muted);
}

body.dark-mode .breadcrumbs .breadcrumb-item.current {
    color: var(--text-primary);
}

/* Categories & Tags section */
body.dark-mode .categories-tags-section,
body.dark-mode .categories-tags-section h3 {
    color: var(--text-primary);
}

/* Generic text fallbacks for dark mode — minimum contrast floor */
/* Uses !important to override TinyMCE inline styles from database content */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary, #f0f2f8) !important;
}

body.dark-mode p,
body.dark-mode li {
    color: var(--text-secondary, #cbd5e1) !important;
}

body.dark-mode label {
    color: var(--text-primary, #f0f2f8);
}

body.dark-mode small,
body.dark-mode .text-muted {
    color: var(--text-muted, #7e8ea0) !important;
}

/* Catch-all: ensure all text inside content areas is readable in dark mode */
body.dark-mode .center-content,
body.dark-mode .center-content p,
body.dark-mode .center-content li,
body.dark-mode .center-content span:not(.badge):not(.tag),
body.dark-mode .center-content td {
    color: var(--text-secondary, #cbd5e1) !important;
}

body.dark-mode .center-content h1,
body.dark-mode .center-content h2,
body.dark-mode .center-content h3,
body.dark-mode .center-content h4,
body.dark-mode .center-content strong {
    color: var(--text-primary, #f0f2f8) !important;
}

/* Ensure links are visible in dark mode — exclude pills/cards/nav */
body.dark-mode a:not(.nav-item):not(.nav-category):not(.game-card):not(.sidebar-game-card):not(.tag):not(.breadcrumb-item):not(.cat-tag-pill) {
    color: var(--primary, #818cf8);
}

/* Reply/vote buttons in comments */
body.dark-mode .comment-actions button,
body.dark-mode .comment-actions a {
    color: var(--text-muted);
}

body.dark-mode .comment-actions button:hover,
body.dark-mode .comment-actions a:hover {
    color: var(--primary);
}

/* Player controls */
body.dark-mode .player-controls .ctrl-btn {
    color: var(--text-secondary);
    background: var(--surface);
    border-color: var(--border);
}

/* --- Carousel container must be positioned for absolute arrows --- */
.most-played-carousel {
    position: relative;
    margin-bottom: 16px;
    overflow: visible;
}

/* --- Floating overlay arrow buttons --- */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}

.carousel-arrow:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px rgba(93, 95, 239, 0.4);
}

.carousel-arrow.carousel-prev {
    left: 8px;
}

.carousel-arrow.carousel-next {
    right: 8px;
}

.carousel-arrow.hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}

/* Dark mode arrow buttons */
body.dark-mode .carousel-arrow {
    background: rgba(30, 41, 59, 0.9);
    color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .carousel-arrow:hover {
    background: var(--primary);
    color: #fff;
}

/* --- Scrollable track --- */
.most-played-carousel .carousel-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.most-played-carousel .carousel-track::-webkit-scrollbar {
    display: none;
}

/* --- Fluid card width: exactly 6 visible on desktop --- */
/* Formula: (100% - (N-1) * gap) / N  where N=6, gap=10px */
.most-played-carousel .game-card {
    flex: 0 0 calc((100% - 50px) / 6);
    width: calc((100% - 50px) / 6);
    min-width: calc((100% - 50px) / 6);
}

/* Enforce 4:3 aspect ratio, prevent stretch/squash */
.most-played-carousel .game-card .card-thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
}

.most-played-carousel .game-card .card-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--t-base);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    display: block;
}

/* --- Responsive: Tablet ≤1024px → 4 cards --- */
@media (max-width: 1024px) {
    .most-played-carousel .game-card {
        flex: 0 0 calc((100% - 30px) / 4);
        width: calc((100% - 30px) / 4);
        min-width: calc((100% - 30px) / 4);
    }
}

/* --- Responsive: Mobile ≤768px → 2.5 cards (peek effect) --- */
@media (max-width: 768px) {
    .most-played-carousel .game-card {
        flex: 0 0 calc((100% - 15px) / 2.5);
        width: calc((100% - 15px) / 2.5);
        min-width: calc((100% - 15px) / 2.5);
    }

    /* Bigger arrows for touch targets on mobile */
    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
        z-index: 20;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        opacity: 0.9;
    }

    .carousel-arrow.carousel-prev {
        left: 4px;
    }

    .carousel-arrow.carousel-next {
        right: 4px;
    }
}

/* --- Responsive: Small mobile ≤480px → 2.5 cards tighter --- */
@media (max-width: 480px) {
    .most-played-carousel .game-card {
        flex: 0 0 calc((100% - 10px) / 2.3);
        width: calc((100% - 10px) / 2.3);
        min-width: calc((100% - 10px) / 2.3);
    }

    .carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* ========== RESPONSIVE ========== */

/* --- Large Desktop: ≤1400px --- */
/* --- Desktop: ≤1200px --- */
@media (max-width: 1200px) {
    :root {
        --nav-width: 110px;
    }
}

/* --- Tablet: ≤1024px — Sidebar becomes drawer, show hamburger + mobile search --- */
/* custom-layout.css hides sidebar at this breakpoint, so we MUST show mobile controls */
@media (max-width: 1024px) {
    .mobile-menu-btn {
        display: flex;
    }

    .mobile-search-btn {
        display: flex !important;
    }

    /* Hide inline search on tablet, use overlay instead */
    .search-box {
        display: none !important;
    }

    /* Header nav scrollable */
    .header-nav {
        overflow-x: auto;
    }

    .header-nav-inner {
        min-width: max-content;
    }

    /* ===== Center grid: 5 columns at ≤1024px =====
       At exactly 1024px (e.g. iPad Pro 12.9" portrait), ≤992px doesn't match,
       so center would stay at base 6 cols while right sidebar is 5. Fix: set 5 here. */
    .games-grid.cols-6 {
        grid-template-columns: repeat(5, 1fr);
    }

    /* ===== MASTER RULE: Right sidebar below center INHERITS center columns =====
       When right sidebar flows below center (≤1024px), it must ALWAYS use the
       same grid-template-columns as the center .games-grid above it.
       Each specific breakpoint below overrides the exact column count,
       but this ensures the STRUCTURE is ready to inherit. */
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-2,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        /* Default: 5 columns at 1024px (same as center) */
        grid-template-columns: repeat(5, 1fr);
    }
}

/* --- Laptop / Small Desktop: ≤1400px — Hide left column content, keep space, 2-col right sidebar --- */
@media (max-width: 1400px) {
    .main-layout {
        grid-template-columns: var(--nav-width) 12px 140px 3px 6fr 3px 3.5fr;
        padding-right: 12px;
    }

    .left-column {
        visibility: hidden;
    }

    .center-content {
        grid-column: 5;
    }

    .right-sidebar {
        grid-column: 7;
    }

    /* Center content grids — 5 columns (geometrylitepc.io pattern) */
    .games-grid.cols-6 {
        grid-template-columns: repeat(5, 1fr);
    }

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

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

    /* Right sidebar goes to 2 columns because it is now wider */
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-2,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px; /* Slightly more gap for 2-col layout */
    }

    /* Footer: 3 columns always inline (geometrylitepc.io) — no grid changes needed */
    .footer-content {
        padding: 0 24px;
    }

    /* Right sidebar: keep its own column layout (2 cols) — it's still a sidebar at this size */
}

/* --- Mobile: ≤768px — Single-column, sidebar drawer --- */
@media (max-width: 768px) {

    /* Prevent horizontal overflow on mobile but allow scrolling generally */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-layout {
        grid-template-columns: 100%;
        padding: 0;
        width: 100%;
        display: block;
        /* Switch to block layout to prevent grid blowouts on mobile */
    }

    /* Sidebar drawer: top:0 fills full height, header z-index sits above */
    .nav-sidebar {
        grid-column: auto;
        position: fixed !important;
        left: 0;
        top: 0 !important;
        bottom: 0 !important;
        width: 280px;
        height: auto !important;
        z-index: 1002;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        background: var(--sidebar-bg, var(--surface));
        padding-top: var(--header-height, 56px) !important;
        padding-bottom: 24px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .nav-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    .left-column {
        display: none;
    }

    /* Center content takes full width */
    .center-content {
        grid-column: auto;
        padding: 12px;
    }

    /* Right sidebar flows below content */
    .right-sidebar {
        grid-column: auto;
        position: static;
        height: auto;
        overflow-y: visible;
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 16px 12px;
    }

    /* Game grids — 4 columns on tablet (geometrylitepc.io iPad portrait) */
    .games-grid.cols-6,
    .games-grid.cols-5 {
        grid-template-columns: repeat(4, 1fr);
    }

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

    /* Right sidebar games flowing below center — ALWAYS match center columns */
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Show hamburger menu + mobile search icon */
    .mobile-menu-btn {
        display: flex;
    }

    .mobile-search-btn {
        display: flex !important;
    }

    /* Hide inline search on mobile, use overlay instead */
    .search-box {
        display: none !important;
    }

    /* Header nav bar → relative so it doesn't stack on fixed header */
    .header-nav {
        position: relative;
        top: auto;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 12px;
    }

    .header-nav-inner {
        min-width: max-content;
    }

    /* Footer — reset sidebar offset */
    .site-footer {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Footer: reduce padding on tablet */
    .footer-content {
        padding: 0 16px;
    }

    /* Hide the full-page sidebar column (backup for custom-layout.css) */
    body::before,
    body::after {
        display: none !important;
    }

    /* Search results dropdown */
    .search-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Mobile: ≤768px — Compact layout (geometrylitepc.io pattern) --- */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
    }

    .site-header {
        padding: 0 10px;
        gap: 8px;
        min-height: 56px;
    }

    /* Search: flex-grow to fill available space, not fixed max-width */
    .search-box {
        max-width: none;
        flex: 1;
        min-width: 0;
        padding: 8px 14px;
    }

    .search-box input {
        font-size: 13px;
    }

    /* All grids → 4 columns (geometrylitepc.io tablet portrait / phone landscape) */
    .games-grid.cols-6,
    .games-grid.cols-5,
    .games-grid.cols-4,
    .games-grid.cols-3 {
        grid-template-columns: repeat(4, 1fr);
    }

    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

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

    /* Right sidebar below center — ALWAYS match center columns (4) */
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Footer — compact padding */
    .footer-content {
        padding: 0 12px;
    }

    /* Page titles */
    .flag-page-header h1 {
        font-size: 24px;
        word-break: break-word;
    }

    .game-header .game-title {
        font-size: 20px;
        word-break: break-word;
    }

    /* Comment form stacks */
    .comment-form .form-row {
        grid-template-columns: 1fr;
    }

    /* Player controls wrap */
    .player-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* Ad spaces — ensure proper mobile display */
    .ad-widget,
    .ad-container,
    .ad-dynamic-widget {
        max-width: 100%;
        overflow: hidden;
    }

    .ad-widget iframe,
    .ad-container iframe {
        max-width: 100% !important;
    }

    /* Tighter content padding */
    .center-content {
        padding: 8px;
    }

    .right-sidebar {
        padding: 12px 8px;
    }

    /* Header nav links smaller */
    .header-nav-link {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* --- Small Phone/Large Phone Portrait: ≤520px (geometrylitepc.io breakpoint) --- */
@media (max-width: 520px) {

    /* Game grids — 3 columns on medium phones (geometrylitepc.io) */
    .games-grid.cols-6,
    .games-grid.cols-5,
    .games-grid.cols-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .games-grid.cols-3,
    .games-grid.cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Right sidebar below center — match center columns (3) */
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    /* Header nav links hidden — use mobile menu instead */
    .header-nav {
        display: none;
    }
}

/* --- Small Mobile: ≤480px --- */
@media (max-width: 480px) {

    /* Hide logo text, only show icon/image */
    .logo span {
        display: none;
    }

    .search-box {
        flex: 1;
        min-width: 0;
        max-width: none;
        padding: 6px 10px;
    }

    .search-box input {
        font-size: 12px;
    }

    /* Game grids — 2 columns on small mobile (geometrylitepc.io portrait) */
    .games-grid.cols-2,
    .games-grid.cols-3,
    .games-grid.cols-4,
    .games-grid.cols-5,
    .games-grid.cols-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Right sidebar below center — ALWAYS match center columns (2) */
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-2,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Game card overlay text smaller */
    .game-card .card-overlay .overlay-name {
        font-size: 11px;
    }

    /* Smaller header */
    .site-header {
        padding: 0 8px;
        gap: 4px;
    }

    /* Logo image smaller on tiny screens */
    .logo img {
        max-height: 30px;
    }

    /* Footer — stack columns vertically on small phones */
    .site-footer {
        padding: 16px 0 20px;
        margin-top: 16px;
    }

    .footer-content {
        padding: 0 14px;
    }

    .footer-columns-row {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
        justify-content: space-between;
    }

    .footer-col {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        width: auto;
        text-align: left;
    }

    .footer-col h4 {
        font-size: 12px;
        margin-bottom: 8px;
        white-space: nowrap;
    }

    .footer-col a {
        font-size: 11px;
        padding: 3px 0;
    }

    .footer-brand .footer-disclaimer {
        font-size: 12px;
        line-height: 1.5;
    }

    .footer-bottom {
        margin-top: 16px;
        padding-top: 12px;
    }

    .copyright {
        font-size: 12px;
    }

    /* Player control buttons — smaller, wrap on tiny phones */
    .player-controls {
        gap: 6px;
    }

    .player-controls .ctrl-btn {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .player-controls .ctrl-btn i {
        font-size: 12px;
    }

    /* Carousel card titles — prevent overflow */
    .most-played-carousel .card-overlay .overlay-name {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ========== AD SLOT CLS PREVENTION (Core Web Vitals) ========== */
/* Reserve exact dimensions for each ad format to prevent page jumps */
.ad-slot {
    text-align: center;
    overflow: hidden;
    margin: 8px 0;
}

.ad-slot:empty {
    display: none;
}

/* Standard ad format dimensions */
.ad-slot[data-size="rectangle"],
.ad-slot-sidebar {
    width: 300px;
    min-height: 250px;
    max-width: 100%;
}

.ad-slot[data-size="leaderboard"],
.ad-slot-leaderboard {
    width: 728px;
    min-height: 90px;
    max-width: 100%;
}

.ad-slot[data-size="banner"],
.ad-slot-banner {
    width: 468px;
    min-height: 60px;
    max-width: 100%;
}

.ad-slot[data-size="mobile-banner"],
.ad-slot-mobile {
    width: 320px;
    min-height: 50px;
    max-width: 100%;
}

/* Ad widget containers — prevent overflow on any screen */
.ad-widget,
.ad-container,
.ad-dynamic-widget {
    overflow: hidden;
    max-width: 100%;
}

/* Responsive ad slots */
@media (max-width: 768px) {

    .ad-slot[data-size="leaderboard"],
    .ad-slot-leaderboard {
        width: 320px;
        min-height: 50px;
    }

    .ad-slot[data-size="rectangle"],
    .ad-slot-sidebar {
        width: 300px;
        min-height: 250px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========== UTILITY CLASSES ========== */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--sp-2);
}

.gap-3 {
    gap: var(--sp-3);
}

.gap-4 {
    gap: var(--sp-4);
}

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-muted);
}

.font-bold {
    font-weight: 700;
}

.rounded {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.shadow {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========== HOMEPAGE TITLE (Visible H1 for SEO) ========== */
.homepage-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.3px;
}

body.dark-mode .homepage-title {
    color: var(--text-primary, #f0f2f8) !important;
}

@media (max-width: 768px) {
    .homepage-title {
        font-size: 1.2rem;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
}

/* ========== CATEGORY DESCRIPTION (SEO Text) ========== */
.cat-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 20px;
    max-width: 800px;
}

body.dark-mode .cat-description {
    color: var(--text-secondary, #b0bec5) !important;
}

@media (max-width: 768px) {
    .cat-description {
        font-size: 0.85rem;
        margin-bottom: 16px;
    }
}

/* ========== GAME CARD: TOUCH/MOBILE FIX ========== */
/* On touch devices (mobile), browser fires fake hover on tap.
   This causes .card-overlay to appear permanently after first tap.
   Fix: only enable hover-based opacity on real pointer hover devices (desktop). */

/* Desktop with real hover: overlay hidden by default, show on hover */
@media (hover: hover) and (pointer: fine) {
    .game-card .card-overlay {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .game-card:hover .card-overlay {
        opacity: 1;
    }

    .sidebar-game-card .card-overlay {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar-game-card:hover .card-overlay {
        opacity: 1;
    }
}

/* Touch devices (mobile/tablet): always show name at bottom, no hover effect */
@media (hover: none) {
    .game-card .card-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%) !important;
    }

    .sidebar-game-card .card-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%) !important;
    }

    /* Disable scale effect on touch (avoid jumpy feel) */
    .game-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Keep scale for actual click feedback */
    .game-card:active {
        transform: scale(0.97) !important;
    }
}

/* Brand logo in game overlay — always hidden (site name is already in header) */
.game-player-widget .brand-logo {
    display: none !important;
}

/* Ensure game badges always appear above the overlay gradient */
.card-thumb .game-badge {
    z-index: 4 !important;
}

/* =====================================================
   CHANGE 3: AD PLACEHOLDER CLS PREVENTION
   Reserves exact space per slot BEFORE the ad script
   loads, so the page does not shift (Core Web Vitals).
   ===================================================== */

/* Base widget: isolate layout, prevent collapse-before-load */
.ad-widget {
    /* contain: layout prevents the ad iframe from triggering
       full-page reflows during resize */
    contain: layout;
    overflow: hidden;
}

/* Per-slot minimum height reservations */
.ad-zone-ad-game-top {
    min-height: 90px;
    width: 100%;
    max-width: 970px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-zone-ad-game-bottom {
    min-height: 90px;
    width: 100%;
    max-width: 970px;
    margin: 16px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-zone-ad-sidebar {
    min-height: 250px;
    max-width: 300px;
    width: 100%;
    margin: 0 auto 16px;
}

/* Responsive AdSense ins tags: never exceed container */
.ad-widget ins.adsbygoogle,
.ad-widget>ins {
    display: block;
    max-width: 100% !important;
}

/* On mobile: hide sidebar ad (300×250 is too wide for 1-col layout),
   shrink banner reservations to mobile sizes */
@media (max-width: 768px) {
    .ad-zone-ad-sidebar {
        display: none !important;
        /* sidebar zone not rendered on mobile */
    }

    .ad-zone-ad-game-top {
        min-height: 50px;
        margin-bottom: 8px;
    }

    .ad-zone-ad-game-bottom {
        min-height: 50px;
        margin-top: 8px;
    }
}

/* =====================================================
   CHANGE 4: RIGHT SIDEBAR STICKY AD
   Ad unit sticks as user scrolls, maximizing viewability.
   Only active on desktop (≥1025px).
   ===================================================== */

@media (min-width: 1025px) {
    .right-sidebar .ad-widget.ad-dynamic {
        position: sticky;
        top: calc(var(--header-height, 80px) + 16px);
        z-index: 10;
        /* Prevent sticky from overlapping footer */
        align-self: start;
    }
}

/* =====================================================
   CHANGE 5: MOBILE STICKY ANCHOR AD BAR
   Fixed bar at bottom of viewport on mobile.
   Critically: includes close button (AdSense policy req.)
   and compensates footer/body so content isn't hidden.
   ===================================================== */

/* Hidden on desktop and tablet — mobile only */
.ad-sticky-anchor {
    display: none;
}

@media (max-width: 768px) {

    /* The anchor bar itself */
    .ad-sticky-anchor {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
        background: var(--surface, #fff);
        border-top: 1px solid var(--border, #e5e7eb);
        align-items: center;
        justify-content: center;
        padding: 4px 24px 4px 4px;
        /* right padding makes room for close btn */
        /* Minimum height matches the smallest mobile ad unit */
        min-height: 54px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Dark mode anchor */
    body.dark-mode .ad-sticky-anchor {
        background: var(--surface, #141925);
        border-top-color: var(--border, #252d3d);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
    }

    /* Close (dismiss) button — required by AdSense policy */
    .ad-sticky-anchor-close {
        position: absolute;
        top: 4px;
        right: 6px;
        width: 22px;
        height: 22px;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        border: none;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 501;
        line-height: 1;
        transition: background 0.15s;
        font-family: inherit;
    }

    .ad-sticky-anchor-close:hover,
    .ad-sticky-anchor-close:focus {
        background: rgba(0, 0, 0, 0.5);
        outline: none;
    }

    /* Ad content inside anchor */
    .ad-sticky-anchor ins.adsbygoogle,
    .ad-sticky-anchor>ins,
    .ad-sticky-anchor .ad-content {
        display: block;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* Push footer above the anchor bar so no content is hidden underneath.
       60px = anchor min-height (54px) + 6px breathing room */
    .site-footer {
        padding-bottom: 60px;
    }

    /* Also ensure the page body has room when anchor is open */
    body.has-anchor-ad {
        padding-bottom: 60px;
    }
}

/* NOTE: Body centering removed — see custom-layout.css for sidebar layout.
   Body must remain full-width at all breakpoints to avoid blank voids. */

/* =====================================================
   RESPONSIVE: PHONE LANDSCAPE
   =====================================================
   Problem: Phone landscape has width > 768px (e.g. iPhone 844×390,
   Android 740×360) so it bypasses the mobile breakpoint.
   Result: desktop grid with sidebar, everything squished.
   
   Fix: Use (max-height:500px AND landscape) to detect phone landscape
   regardless of width, and force mobile-like single-column layout
   but with MORE grid columns since we have horizontal space.
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* --- Header: Ultra-compact to maximize game/content area --- */
    .site-header {
        padding: 2px 8px;
        min-height: 40px;
        height: 40px;
        --header-height: 40px;
        gap: 8px;
    }

    .logo {
        font-size: 14px;
    }

    .logo img {
        height: 24px;
        max-height: 24px;
    }

    /* Hide logo text in landscape to save space */
    .logo span {
        display: none;
    }

    .theme-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .mobile-menu-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* --- Force mobile layout: hide sidebar, single flow --- */
    body::before,
    body::after {
        display: none !important;
    }

    .main-layout {
        display: block !important;
        padding: 0 !important;
    }

    .nav-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        width: 280px !important;
        z-index: 1002 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        padding-top: var(--header-height, 40px) !important;
        padding-bottom: 24px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .nav-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: var(--shadow-xl);
    }

    .left-column {
        display: none !important;
    }

    .center-content {
        grid-column: auto;
        padding: 8px 12px;
    }

    .right-sidebar {
        grid-column: auto;
        position: static;
        height: auto;
        overflow-y: visible;
        padding: 8px 12px;
    }

    /* Show hamburger + mobile search */
    .mobile-menu-btn {
        display: flex;
    }

    .mobile-search-btn {
        display: flex !important;
    }

    .search-box {
        display: none !important;
    }

    .header-nav {
        display: none;
    }

    /* --- Game grids: 3 columns on phone landscape (geometrylitepc.io) --- */
    .games-grid.cols-6,
    .games-grid.cols-5,
    .games-grid.cols-4,
    .games-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* RIGHT SIDEBAR below center — MUST match center columns (3) */
    .sidebar-games-grid.columns-3,
    .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-2,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- Game player: constrain height to fit screen --- */
    .game-iframe-container,
    .player-wrapper {
        max-height: 70vh;
        overflow: hidden;
    }

    .game-iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Play overlay icon smaller */
    .play-overlay .play-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    /* --- Footer: reset offset, compact, proper columns --- */
    .site-footer {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px 0 20px;
        padding-bottom: 0;
    }

    .footer-brand {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0 0 12px;
        margin-bottom: 12px;
    }

    .footer-brand .footer-logo {
        display: none;
    }

    .footer-brand .footer-disclaimer {
        font-size: 12px;
        line-height: 1.5;
        opacity: 1;
    }

    .footer-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    .footer-columns-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 20px;
        width: 100%;
        justify-content: center;
    }

    .footer-col {
        flex: 1 1 auto;
        min-width: 110px;
        max-width: 180px;
    }

    .footer-col h4 {
        font-size: 12px;
        white-space: nowrap;
    }

    .footer-col a {
        font-size: 11px;
    }

    body.has-anchor-ad {
        padding-bottom: 0;
    }

    /* --- Ads: hide sticky anchor, wastes vertical space --- */
    .ad-sticky-anchor {
        display: none !important;
    }

    .floating-ad {
        display: none !important;
    }

    /* --- Game card title overlay: always visible on touch devices --- */
    .game-card .card-overlay {
        opacity: 1;
        padding: 16px 6px 6px;
    }

    .game-card .card-overlay .overlay-name {
        font-size: 11px;
    }

    /* --- Category/Tag page grids --- */
    .cat-page-grid,
    .tag-page-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* --- Carousel: 2.5 cards visible (peek effect) --- */
    .most-played-carousel .game-card {
        flex: 0 0 calc((100% - 15px) / 2.5);
        width: calc((100% - 15px) / 2.5);
        min-width: calc((100% - 15px) / 2.5);
    }

    /* --- Widget/section titles: smaller for space --- */
    .widget-title {
        font-size: 13px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    /* --- Description sections: scrollable, capped height --- */
    .game-description-content,
    .game-faq-section {
        max-height: 40vh;
        overflow-y: auto;
    }
}

/* =====================================================
   RESPONSIVE: TABLET PORTRAIT  (600-768px width, portrait)
   =====================================================
   Ensures proper 3-column grids and readable text sizing
   for tablets held vertically (e.g., iPad mini 768×1024).
   ===================================================== */
@media (min-width: 600px) and (max-width: 768px) and (orientation: portrait) {

    /* Tablet portrait: 4 columns (geometrylitepc.io iPad portrait) */
    .games-grid.cols-6,
    .games-grid.cols-5,
    .games-grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .games-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* RIGHT SIDEBAR below center — MUST match center columns (4) */
    .sidebar-games-grid.columns-3,
    .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-2,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(4, 1fr);
    }

    .cat-page-grid,
    .tag-page-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Carousel: 3 cards visible */
    .most-played-carousel .game-card {
        flex: 0 0 calc((100% - 20px) / 3);
        width: calc((100% - 20px) / 3);
        min-width: calc((100% - 20px) / 3);
    }

    /* Card overlay always visible on touch */
    .game-card .card-overlay {
        opacity: 1;
    }
}

/* =====================================================
   RESPONSIVE: TABLET LANDSCAPE (768-1024px width, landscape)
   =====================================================
   Tablets rotated landscape have ~1024px width but only ~768px height.
   Show 4-5 grid columns and ensure layout doesn't squish.
   ===================================================== */
@media (min-width: 769px) and (max-width: 1200px) and (orientation: landscape) {

    .games-grid.cols-6,
    .games-grid.cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

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

    /* RIGHT SIDEBAR below center — MUST match center columns (5) */
    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid,
    .right-sidebar .games-grid.cols-2,
    .right-sidebar .games-grid.cols-3,
    .right-sidebar .games-grid.cols-4,
    .right-sidebar .games-grid.cols-5,
    .right-sidebar .games-grid.cols-6 {
        grid-template-columns: repeat(5, 1fr);
    }

    .cat-page-grid,
    .tag-page-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Carousel: 5 cards visible */
    .most-played-carousel .game-card {
        flex: 0 0 calc((100% - 40px) / 5);
        width: calc((100% - 40px) / 5);
        min-width: calc((100% - 40px) / 5);
    }

    /* Game player: cap height for landscape tablets too */
    .game-iframe-container,
    .player-wrapper {
        max-height: 75vh;
    }
}

/* =====================================================
   RESPONSIVE: SMALL PHONE PORTRAIT (max-width: 480px)
   Already handled above, but ensure overlay is always visible
   on very small touch screens.
   ===================================================== */
@media (max-width: 480px) {

    /* Card overlay always visible — no hover on touch */
    .game-card .card-overlay {
        opacity: 1;
        padding: 16px 6px 6px;
    }

    .game-card .card-overlay .overlay-name {
        font-size: 11px;
    }

    .game-card .card-overlay .overlay-cats {
        display: none;
    }

    /* Smaller card radius for compact screens */
    .game-card {
        border-radius: 8px;
    }
}

/* =====================================================
   TOUCH DEVICE: Always show card overlay
   On devices without hover (phones, tablets), the overlay
   with game name must be always visible since hover doesn't exist.
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    .game-card .card-overlay {
        opacity: 1;
    }

    .sidebar-game-card .card-overlay {
        opacity: 1;
    }

    /* Disable hover scale on touch — prevents jank */
    .game-card:hover {
        transform: none;
        box-shadow: none !important;
    }

    .sidebar-game-card:hover {
        transform: none;
    }

    .game-card:hover .card-thumb img {
        transform: none;
    }

    .sidebar-game-card:hover img {
        transform: none;
    }

    /* Active state for touch feedback */
    .game-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    .sidebar-game-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }
}

/* =====================================================
   RESPONSIVE: VERY SMALL PHONE (≤391px)
   =====================================================
   geometrylitepc.io fine-tuned breakpoint for ultra-narrow
   phones (iPhone SE, Galaxy S series in portrait).
   ===================================================== */
@media (max-width: 391px) {

    /* Game grids: 2 columns on very small phones */
    .games-grid.cols-2,
    .games-grid.cols-3,
    .games-grid.cols-4,
    .games-grid.cols-5,
    .games-grid.cols-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .right-sidebar .sidebar-games-grid,
    .right-sidebar .sidebar-games-grid.columns-1,
    .right-sidebar .sidebar-games-grid.columns-2,
    .right-sidebar .sidebar-games-grid.columns-3,
    .right-sidebar .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    /* Header ultra-compact */
    .site-header {
        padding: 0 6px;
        gap: 4px;
        min-height: 48px;
    }

    .logo img {
        max-height: 26px;
    }

    .logo span {
        display: none;
    }

    .theme-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .mobile-menu-btn {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    /* Footer: 3 columns stay inline but ultra-tight */
    .footer-columns-row {
        gap: 2px;
    }

    .footer-col {
        padding: 0;
    }

    .footer-col h4 {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .footer-col a {
        font-size: 10px;
        padding: 2px 0;
    }

    .footer-brand .footer-disclaimer {
        font-size: 10px;
        padding: 0 4px;
    }

    .copyright {
        font-size: 10px;
    }

    /* Card overlay text ultra-small */
    .game-card .card-overlay .overlay-name {
        font-size: 10px;
    }

    .game-card {
        border-radius: 6px;
    }

    /* Carousel: 2 cards visible */
    .most-played-carousel .game-card {
        flex: 0 0 calc((100% - 8px) / 2);
        width: calc((100% - 8px) / 2);
        min-width: calc((100% - 8px) / 2);
    }
}