/* Reset and Base Styles - Updated 2026-01-06 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f8f9fa;
    overflow: visible;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

body.auth-page-gm {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Homepage and catalog page specific background */
body.homepage,
body.page-with-gm-bg {
    background:
        radial-gradient(circle 50vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 50vw at 20% 25vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e, #502cba 25vw, #05122b 50vw);
    background-attachment: scroll;
    min-height: 100vh;
    position: relative;
}

body.homepage {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

/* Animated stars background - GameMonetize exact stars */
body.homepage::before,
body.page-with-gm-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000'%3E%3Cg transform='translate(150,120) rotate(338 18 14)'%3E%3Cpath fill='%23fff' d='M17.388 2.731c.318-.975.906-.975 1.224 0l2.049 6.38c.318.975 1.253 1.91 2.228 2.228l6.38 2.049c.975.318.975.906 0 1.224l-6.38 2.049c-.975.318-1.91 1.253-2.228 2.228l-2.049 6.38c-.318.975-.906.975-1.224 0l-2.049-6.38c-.318-.975-1.253-1.91-2.228-2.228l-6.38-2.049c-.975-.318-.975-.906 0-1.224l6.38-2.049c.975-.318 1.91-1.253 2.228-2.228z'/%3E%3Cpath stroke='%23fff' d='M10 14H8m1-1v2m17-1h-2m1-1v2M18 6h-2m1-1v2m0 14h-2m1-1v2'/%3E%3C/g%3E%3Cg transform='translate(220,180)'%3E%3Ccircle r='3.5' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='10' cy='5' r='3' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='20' cy='10' r='2.5' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='28' cy='14' r='2' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='35' cy='17' r='1.5' fill='%23fff' opacity='.15'/%3E%3C/g%3E%3Cg transform='translate(1600,350) rotate(338 18 14)'%3E%3Cpath fill='%23fff' d='M17.388 2.731c.318-.975.906-.975 1.224 0l2.049 6.38c.318.975 1.253 1.91 2.228 2.228l6.38 2.049c.975.318.975.906 0 1.224l-6.38 2.049c-.975.318-1.91 1.253-2.228 2.228l-2.049 6.38c-.318.975-.906.975-1.224 0l-2.049-6.38c-.318-.975-1.253-1.91-2.228-2.228l-6.38-2.049c-.975-.318-.975-.906 0-1.224l6.38-2.049c.975-.318 1.91-1.253 2.228-2.228z'/%3E%3Cpath stroke='%23fff' d='M10 14H8m1-1v2m17-1h-2m1-1v2M18 6h-2m1-1v2m0 14h-2m1-1v2'/%3E%3C/g%3E%3Cg transform='translate(1520,410)'%3E%3Ccircle r='3.5' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='10' cy='5' r='3' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='20' cy='10' r='2.5' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='28' cy='14' r='2' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='35' cy='17' r='1.5' fill='%23fff' opacity='.15'/%3E%3C/g%3E%3Ccircle cx='450' cy='280' r='1.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='820' cy='520' r='1.5' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='1200' cy='750' r='1.5' fill='%23fff' opacity='.6'/%3E%3C/svg%3E");
    background-size: 2000px 2000px;
    background-position: 0 0;
    animation: starsFloat 120s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

body.homepage::after,
body.page-with-gm-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000'%3E%3Cg transform='translate(680,850) rotate(338 18 14)'%3E%3Cpath fill='%23fff' d='M17.388 2.731c.318-.975.906-.975 1.224 0l2.049 6.38c.318.975 1.253 1.91 2.228 2.228l6.38 2.049c.975.318.975.906 0 1.224l-6.38 2.049c-.975.318-1.91 1.253-2.228 2.228l-2.049 6.38c-.318.975-.906.975-1.224 0l-2.049-6.38c-.318-.975-1.253-1.91-2.228-2.228l-6.38-2.049c-.975-.318-.975-.906 0-1.224l6.38-2.049c.975-.318 1.91-1.253 2.228-2.228z'/%3E%3Cpath stroke='%23fff' d='M10 14H8m1-1v2m17-1h-2m1-1v2M18 6h-2m1-1v2m0 14h-2m1-1v2'/%3E%3C/g%3E%3Cg transform='translate(750,910)'%3E%3Ccircle r='3.5' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='10' cy='5' r='3' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='20' cy='10' r='2.5' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='28' cy='14' r='2' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='35' cy='17' r='1.5' fill='%23fff' opacity='.15'/%3E%3C/g%3E%3Ccircle cx='380' cy='640' r='1.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='1350' cy='1180' r='1.5' fill='%23fff' opacity='.4'/%3E%3C/svg%3E");
    background-size: 2000px 2000px;
    background-position: -400px -300px;
    animation: starsFloat 140s linear infinite reverse;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

@keyframes starsFloat {
    0% {
        transform: rotate(0deg);
        opacity: 0.5;
    }
    25% {
        opacity: 0.7;
    }
    50% {
        transform: rotate(180deg);
        opacity: 0.6;
    }
    75% {
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.5;
    }
}


body.homepage > *:not(.sticky-header-wrapper):not(.report-modal-gm),
body.page-with-gm-bg > *:not(.sticky-header-wrapper):not(.report-modal-gm),
body.privacy-page > *:not(.sticky-header-wrapper):not(.report-modal-gm) {
    position: relative;
    z-index: 1;
}

/* Developers page specific gradient - orange to purple top, dark blue bottom */
body.developers-page {
    background:
        radial-gradient(circle 25vw at 100% 0, #ff6b35, transparent),
        radial-gradient(circle 25vw at 0% 10vw, #764ba2, transparent),
        linear-gradient(180deg, #ff8c42 0%, #764ba2 20vh, #1a237e 40vh, #0a1929 60vh);
    background-color: #0a1929;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

/* Privacy page - same gradient as developers page */
body.privacy-page {
    background:
        radial-gradient(circle 25vw at 100% 0, #ff6b35, transparent),
        radial-gradient(circle 25vw at 0% 10vw, #764ba2, transparent),
        linear-gradient(180deg, #ff8c42 0%, #764ba2 20vh, #1a237e 40vh, #0a1929 60vh);
    background-color: #0a1929;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

/* Catalog page - same gradient as publishers page */
body.catalog-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

body.catalog-page > *:not(.sticky-header-wrapper) {
    position: relative;
    z-index: 1;
}

/* Publishers page - same gradient as home page */
body.publishers-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

body.publishers-page > *:not(.sticky-header-wrapper) {
    position: relative;
    z-index: 1;
}

/* Blog page - same gradient as home page */
body.blog-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

/* Recently Played page - same gradient as publishers page */
body.recently-played-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

body.recently-played-page > *:not(.sticky-header-wrapper) {
    position: relative;
    z-index: 1;
}

body.blog-page > *:not(.sticky-header-wrapper) {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: visible;
}

/* Wider container for catalog page */
.main-content-gm .container {
    max-width: 1400px;
}

/* Homepage container — narrower to keep category sections from stretching too wide */
.homepage .main-content-gm .container {
    max-width: 1200px;
}

/* Recently played page container — match homepage width and padding */
.recently-played-page .main-content-gm .container {
    max-width: 1200px;
    padding: 0 20px;
}

/* Even wider container for game details in widescreen mode */
.main-content-gm .container.widescreen-container {
    max-width: 95%;
    padding: 0 5px;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
.header {
    background: linear-gradient(to bottom, #fff 0%, #cbe0ff 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 1.2rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    background: linear-gradient(135deg, #1e2c5d, #0c1945);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
}

.nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav a {
    color: #1e2c5d;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.nav a:hover {
    background: rgba(30, 44, 93, 0.1);
    color: #0c1945;
}

/* Hero Banner */
.hero-banner {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    padding: 4rem 0;
    margin-bottom: 3rem;
}

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

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

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

.stat-item strong {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.stat-item span {
    font-size: 1rem;
    opacity: 0.9;
}

/* Main Content */
.main {
    min-height: calc(100vh - 200px);
    padding: 2rem 0;
}

.section {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.game-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.game-card a {
    text-decoration: none;
    color: inherit;
}

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

.game-placeholder {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.game-info {
    padding: 1rem;
}

.game-info h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.game-category {
    color: #667eea;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.game-plays {
    color: #888;
    font-size: 0.85rem;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.category-card {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.category-card:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    transform: scale(1.05);
}

/* Play Page */
.play-container {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.game-frame-wrapper {
    text-align: center;
    margin: 2rem 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.game-frame-wrapper iframe {
    max-width: 100%;
    width: 600px !important;
    height: 450px !important;
    max-height: 450px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.game-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.game-details {
    margin-top: 2rem;
}

.game-meta {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
    color: #666;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #667eea;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}

.btn:hover {
    background: #5568d3;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.2rem;
}

/* Footer */
.footer {
    background: #05122b;
    color: rgba(255, 255, 255, 0.8);
    padding: 2rem 0 4rem 0;
    text-align: center;
    margin-top: 0;
    border-top: none;
    border-bottom: none;
    box-shadow: 0 100vh 0 100vh #05122b;
}

/* New Footer Styles */
.footer-gm {
    background: #0a1628;
    color: rgba(255, 255, 255, 0.7);
    padding: 3rem 0 3rem 0;
    margin-top: 0;
    box-shadow: 0 100vh 0 100vh #0a1628;
    position: relative;
}

.footer-content-gm {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 4rem;
}

.footer-left-gm {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
    min-width: 280px;
}

.footer-copyright-gm {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-rights-gm {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-email-gm {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    transition: color 0.3s;
}

.footer-email-gm:hover {
    color: #fff;
}

.footer-disclaimer-gm {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: 0.5rem 0;
}

.footer-policy-links-gm {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.footer-privacy-gm {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    font-size: 0.75rem;
    transition: color 0.3s;
}

.footer-privacy-gm:hover {
    color: #fff;
}

.footer-center-gm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    flex: 1;
    max-width: 340px;
}

.footer-links-gm {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-link-btn-gm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all 0.3s;
    min-width: 100px;
    white-space: nowrap;
}

.footer-link-btn-gm:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.footer-link-icon-gm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.footer-right-gm {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
    flex-shrink: 0;
    min-width: 280px;
}

.footer-join-btn-gm {
    display: inline-block;
    padding: 0.375rem 1rem;
    background: #9D4EDD;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    border: none;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 15px rgba(157,78,221,0.5)) drop-shadow(0 0 25px rgba(157,78,221,0.3));
    transition: filter 0.3s ease, background 0.3s ease;
}

.footer-join-btn-gm:hover {
    background: #7B2CBF;
    filter: drop-shadow(0 0 25px rgba(123,44,191,0.7)) drop-shadow(0 0 40px rgba(123,44,191,0.4));
}

.footer-brand-gm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-brand-icon-gm {
    font-size: 1.2rem;
    color: #7B2CBF;
}

.footer-brand-text-gm {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.footer-social-gm {
    display: flex;
    gap: 0.65rem;
}

.footer-social-link-gm {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s;
    text-decoration: none;
}

.footer-social-link-gm:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-2px);
}

.footer-social-link-gm svg {
    width: 16px;
    height: 16px;
}

.footer-age-rating-gm {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

.age-label-gm {
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.age-icon-gm {
    font-size: 1rem;
    font-weight: 700;
    color: #7B2CBF;
    padding: 0 0.4rem;
}

@media (max-width: 1200px) {
    .footer-content-gm {
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        text-align: center;
    }

    .footer-left-gm {
        align-items: center;
        min-width: auto;
    }

    .footer-center-gm {
        max-width: 100%;
    }

    .footer-right-gm {
        align-items: center;
        min-width: auto;
    }

    .footer-links-gm {
        width: 100%;
    }

    .footer-link-btn-gm {
        justify-content: center;
    }

    .footer-policy-links-gm {
        justify-content: center;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .footer-policy-links-gm {
        gap: 0.5rem;
    }

    .footer-privacy-gm {
        font-size: 0.7rem;
    }
}

/* Game Detail Page */
.game-detail {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.game-preview img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.game-placeholder-large {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    margin-bottom: 1rem;
}

/* Search */
.search-container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.search-form {
    display: flex;
    gap: 1rem;
}

.search-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.no-results, .no-games {
    text-align: center;
    padding: 2rem;
    color: #888;
}

/* Error Pages */
.error-page {
    text-align: center;
    padding: 4rem 2rem;
}

/* GameMonetize-style Sections */
.main-content {
    background: #f8f9fa;
    padding-bottom: 3rem;
}

.section-heading {
    font-size: 2rem;
    color: #1e2c5d;
    margin-bottom: 2rem;
    font-weight: 700;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.view-all {
    color: #4facfe;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.view-all:hover {
    color: #0c1945;
}

/* Categories Grid */
.categories-section {
    padding: 3rem 0;
    background: #fff;
}

.categories-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.category-card-large {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    color: #1e2c5d;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.category-card-large:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(79, 172, 254, 0.3);
    border-color: #4facfe;
}

.category-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.category-card-large h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #0c1945;
}

.category-count {
    color: #666;
    font-size: 0.95rem;
}

/* Games Sections */
.games-section {
    padding: 3rem 0;
}

.featured-section {
    background: #fff;
}

.new-games-section {
    background: #f8f9fa;
}

/* Featured Games Grid */
.games-grid-featured {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.game-card-large {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.game-card-large:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Standard Games Grid */
.games-grid-standard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.game-card-standard {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s;
}

.game-card-standard:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.game-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.game-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    overflow: hidden;
    background: #e3f2fd;
}

.game-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.game-card-large:hover .game-thumbnail img,
.game-card-standard:hover .game-thumbnail img {
    transform: scale(1.1);
}

.game-placeholder-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.game-icon {
    font-size: 4rem;
}

.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 25, 69, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

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

.play-button {
    background: #4facfe;
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.1rem;
}

.game-card-info {
    padding: 1rem;
}

.game-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #1e2c5d;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.game-category-tag {
    background: #e3f2fd;
    color: #1e2c5d;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 500;
}

.game-plays-count {
    color: #666;
}

/* Info Section */
.info-section {
    padding: 4rem 0;
    background: #fff;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.info-card {
    text-align: center;
    padding: 2rem;
}

.info-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.info-card h3 {
    font-size: 1.5rem;
    color: #1e2c5d;
    margin-bottom: 1rem;
}

.info-card p {
    color: #666;
    line-height: 1.8;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    padding: 4rem 0;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.btn-cta {
    background: #fff;
    color: #4facfe;
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-cta:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Sticky Header Wrapper */
.sticky-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    box-shadow: none;
    transition: all 0.3s ease;
}

.sticky-header-wrapper.scrolled {
    background: linear-gradient(180deg, #3f007e, #502cba);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Privacy page sticky header - orange to purple gradient */
body.privacy-page .sticky-header-wrapper {
    background: transparent;
}

body.privacy-page .sticky-header-wrapper.scrolled {
    background: linear-gradient(180deg, #ff8c42, #764ba2);
}

/* GameMonetize Header */
.header-gm {
    background: transparent;
    box-shadow: none;
    padding: 0.5rem 0;
    position: relative;
    z-index: 1000;
}

.header-content-gm {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-gm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.logo-icon {
    color: #fff;
    font-size: 2rem;
}

.logo-text {
    color: #fff;
}

.nav-gm {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.mobile-menu-toggle-gm {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
}

.mobile-menu-toggle-gm svg {
    display: block;
}

.nav-link-gm {
    color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    white-space: nowrap;
    position: relative;
    padding-bottom: 0.25rem;
}

.nav-link-gm::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
}

.nav-link-gm:hover {
    color: rgba(255,255,255,0.8);
}

.nav-link-gm:hover::after {
    left: 0;
    right: 0;
}

.nav-link-gm.active {
    color: #fff;
}

.nav-link-gm.active::after {
    left: 0;
    right: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-header {
    padding: 0.15rem 0.6rem;
    border-radius: 18px;
    text-decoration: none;
    font-weight: normal;
    font-size: 0.75rem;
    transition: all 0.3s;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.btn-login {
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    transition: all 0.3s;
}

.btn-login:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 20px rgba(255,255,255,0.4), 0 0 30px rgba(255,255,255,0.2);
}

.btn-signup {
    background: #9D4EDD;
    color: #fff;
    border: 2px solid transparent;
    box-shadow: 0 0 15px rgba(157,78,221,0.5), 0 0 25px rgba(157,78,221,0.3);
    transition: all 0.3s;
}

.btn-signup:hover {
    background: #7B2CBF;
    box-shadow: 0 0 25px rgba(123,44,191,0.7), 0 0 40px rgba(123,44,191,0.4);
}

/* User Menu Dropdown */
.user-menu-gm {
    position: relative;
}

.user-menu-btn-gm {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 18px;
    color: #fff;
    font-weight: normal;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    letter-spacing: 0.3px;
}

.user-menu-btn-gm:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.user-menu-btn-gm svg {
    flex-shrink: 0;
}

.user-avatar-gm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(157, 78, 221, 0.6);
    flex-shrink: 0;
}

.user-name-gm {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.chevron-gm {
    transition: transform 0.3s ease;
}

.user-menu-btn-gm[aria-expanded="true"] .chevron-gm {
    transform: rotate(180deg);
}

.user-dropdown-gm {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: rgba(20, 20, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    text-transform: none !important;
}

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

.dropdown-item-gm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    text-transform: none !important;
}

.dropdown-item-gm:hover {
    background: rgba(157, 78, 221, 0.2);
}

.dropdown-item-gm svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.dropdown-divider-gm {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* GameMonetize Hero */
.hero-banner-gm {
    background: transparent;
    padding: 0 0 2rem 0;
    position: relative;
    overflow: hidden;
}

/* Keyframe animations for stars */
@keyframes floatLeft {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.15;
    }
    50% {
        transform: translate(-20px, -30px) scale(1.1);
        opacity: 0.25;
    }
}

@keyframes floatRight {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.15;
    }
    50% {
        transform: translate(20px, -30px) scale(1.1);
        opacity: 0.25;
    }
}

.hero-stars-left,
.hero-stars-right {
    position: absolute;
    width: 300px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
    pointer-events: none;
}

.hero-stars-left {
    top: 0;
    left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3Cg stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none'%3E%3Cpath d='M150 50 L180 120 L250 120 L195 165 L220 235 L150 190 L80 235 L105 165 L50 120 L120 120 Z'/%3E%3Cpath d='M100 200 L115 240 L155 240 L123 265 L138 305 L100 280 L62 305 L77 265 L45 240 L85 240 Z'/%3E%3Cpolyline points='50,100 150,200 100,300'/%3E%3Cpolyline points='200,80 180,180 250,250'/%3E%3C/g%3E%3C/svg%3E");
    animation: floatLeft 8s ease-in-out infinite;
}

.hero-stars-right {
    top: 0;
    right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3Cg stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none'%3E%3Cpath d='M150 50 L180 120 L250 120 L195 165 L220 235 L150 190 L80 235 L105 165 L50 120 L120 120 Z'/%3E%3Cpath d='M200 200 L215 240 L255 240 L223 265 L238 305 L200 280 L162 305 L177 265 L145 240 L185 240 Z'/%3E%3Cpolyline points='250,100 150,200 200,300'/%3E%3Cpolyline points='100,80 120,180 50,250'/%3E%3C/g%3E%3C/svg%3E");
    animation: floatRight 8s ease-in-out infinite;
}

.hero-content-gm {
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-title-gm {
    font-size: 5rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 1rem;
    text-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 0 40px rgba(255,255,255,0.3);
    letter-spacing: 10px;
    -webkit-text-stroke: 3px rgba(255,255,255,0.8);
    text-stroke: 3px rgba(255,255,255,0.8);
}

.hero-description-gm {
    font-size: 1.3rem;
    color: #fff;
    padding-top: 3rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.hero-stats-text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.95);
    margin-bottom: 2rem;
}

.hero-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 1rem;
}

.hero-tab {
    padding: 0.5rem 1.5rem;
    background: rgba(255,255,255,0.25);
    color: #fff;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border-right: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
    text-decoration: none;
    display: inline-block;
}

.hero-tab:first-child {
    border-radius: 8px 0 0 8px;
}

.hero-tab:last-child {
    border-radius: 0 8px 8px 0;
    border-right: none;
}

.hero-tab.active {
    background: #E91E63;
    box-shadow: 0 0 20px rgba(233,30,99,0.6), 0 0 35px rgba(233,30,99,0.3);
}

.hero-tab:hover {
    background: rgba(255,255,255,0.35);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}

.hero-tab.active:hover {
    background: #C2185B;
    box-shadow: 0 0 25px rgba(194,24,91,0.7), 0 0 40px rgba(194,24,91,0.4);
}

/* GameMonetize Main Content */
.main-content-gm {
    background: transparent;
    min-height: 50vh;
    padding: 0.5rem 0 2rem 0;
    overflow: visible;
}

.games-grid-gm {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.category-section-gm {
    margin-bottom: 1.5rem;
    overflow: visible;
}

.games-scroll-wrapper-gm {
    position: relative;
    padding: 0 1rem;
    overflow: visible;
    margin-top: 0;
}

.category-section-gm .games-grid-gm {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2.5rem) / 6);
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 10px;
}

.recently-played-section .games-grid-gm {
    grid-template-rows: auto;
}

.category-section-gm .games-grid-gm::-webkit-scrollbar {
    display: none;
}

.scroll-btn-gm {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1;
    padding: 0;
    transition: all 0.2s ease;
    opacity: 0.85;
    backdrop-filter: blur(4px);
}

.scroll-btn-gm:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
}

.scroll-btn-gm:active {
    transform: translateY(-50%) scale(0.95);
    background: rgba(255, 255, 255, 0.1);
}

.scroll-btn-prev-gm {
    left: -28px;
}

.scroll-btn-next-gm {
    right: -28px;
}

.scroll-btn-gm.hidden {
    display: none;
}

.category-header-wrapper-gm {
    position: relative;
    margin-bottom: 0;
    padding: 0 1rem;
}

.category-decor-gm {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 150px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        rgba(123, 44, 191, 0.15) 0%,
        rgba(0, 180, 216, 0.15) 50%,
        rgba(123, 44, 191, 0.15) 100%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}

.category-title-gm {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.category-title-gm > a:first-child {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 15px rgba(150, 150, 150, 0.5),
                 0 0 30px rgba(120, 120, 120, 0.3);
}

.category-title-gm > a:first-child span {
    transition: color 0.3s;
    position: relative;
    z-index: 2;
    text-shadow:
        /* Outline effect using multiple shadows */
        -2px -2px 0 rgba(100, 100, 100, 0.4),
        2px -2px 0 rgba(100, 100, 100, 0.4),
        -2px 2px 0 rgba(100, 100, 100, 0.4),
        2px 2px 0 rgba(100, 100, 100, 0.4),
        -3px 0 0 rgba(100, 100, 100, 0.3),
        3px 0 0 rgba(100, 100, 100, 0.3),
        0 -3px 0 rgba(100, 100, 100, 0.3),
        0 3px 0 rgba(100, 100, 100, 0.3),
        /* Glow effect */
        0 0 15px rgba(150, 150, 150, 0.5),
        0 0 30px rgba(120, 120, 120, 0.3);
}

.category-title-gm > a:first-child span::before {
    content: attr(data-text);
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: -1;
    color: rgba(150, 150, 150, 0.3);
    text-shadow: none;
    filter: blur(4px);
}

.category-title-gm > a:last-child {
    color: rgba(255,255,255,0.95);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.category-title-gm a:hover {
    color: #e0e0e0;
}

/* Recently Played Section */
.recently-played-section {
    margin-top: 3rem;
    background: linear-gradient(135deg, rgba(13, 13, 26, 0.95) 0%, rgba(26, 26, 52, 0.9) 100%);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(0, 180, 216, 0.2);
    box-shadow:
        0 4px 20px rgba(0, 180, 216, 0.15),
        0 0 40px rgba(123, 44, 191, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: visible;
}

.recently-played-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 180, 216, 0.5) 20%,
        rgba(123, 44, 191, 0.5) 80%,
        transparent 100%);
}

.recently-played-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.recently-played-icon {
    color: #00B4D8;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px rgba(0, 180, 216, 0.6));
}

.recently-played-title span {
    transition: color 0.3s;
    position: relative;
    z-index: 2;
    text-shadow:
        -2px -2px 0 rgba(0, 180, 216, 0.7),
        2px -2px 0 rgba(0, 180, 216, 0.7),
        -2px 2px 0 rgba(0, 180, 216, 0.7),
        2px 2px 0 rgba(0, 180, 216, 0.7),
        -3px 0 0 rgba(0, 180, 216, 0.6),
        3px 0 0 rgba(0, 180, 216, 0.6),
        0 -3px 0 rgba(0, 180, 216, 0.6),
        0 3px 0 rgba(0, 180, 216, 0.6),
        0 0 15px rgba(0, 180, 216, 0.9),
        0 0 30px rgba(0, 180, 216, 0.7),
        0 0 45px rgba(123, 44, 191, 0.6),
        0 0 60px rgba(123, 44, 191, 0.4);
}

.recently-played-title span::before {
    content: attr(data-text);
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: -1;
    color: rgba(0, 180, 216, 0.4);
    text-shadow: none;
    filter: blur(4px);
}

.game-card-gm {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: transparent;
}

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

.game-card-gm:hover .game-thumb-gm {
    box-shadow: none;
}

.game-video-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    will-change: opacity;
    transform: translateZ(0);
}

.game-video-preview[style*="display: block"] {
    opacity: 1;
}

.game-thumb-gm picture,
.game-thumb-gm .game-thumb-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    transform: translateZ(0);
}

.game-thumb-gm img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
    max-height: none !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.game-link-gm {
    text-decoration: none;
    display: block;
    background: transparent;
}

.game-thumb-gm {
    width: 100%;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    margin-bottom: 0.5rem;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 4 / 3) {
    .game-thumb-gm {
        height: 0;
        padding-bottom: 75%; /* 4:3 aspect ratio = 3/4 = 75% */
    }
}

.game-card-gm:hover .game-thumb-gm img {
    transform: scale(1.1) translateZ(0);
}

.game-placeholder-gm {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #7B2CBF, #00B4D8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.game-title-gm {
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem 0.5rem 0.5rem;
    background: transparent;
}

/* Smaller hero banner for internal pages */
.hero-banner-gm-small {
    background: transparent;
    padding: 0.5rem 0;
    position: relative;
    overflow: hidden;
}

/* Category page header */
.category-header-gm {
    text-align: center;
    color: #fff;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.category-header-gm h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.category-header-gm p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Search container and form */
.search-container-gm {
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.search-container-gm h1 {
    color: #fff;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.search-form-gm {
    display: flex;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.search-input-gm {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.875rem;
    transition: all 0.3s;
}

.search-input-gm::placeholder {
    color: rgba(255,255,255,0.6);
}

.search-input-gm:focus {
    outline: none;
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 15px rgba(255,255,255,0.2);
}

.btn-search-gm {
    padding: 0.75rem 2rem;
    background: #E91E63;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(233,30,99,0.5);
}

.btn-search-gm:hover {
    background: #C2185B;
    box-shadow: 0 0 25px rgba(233,30,99,0.7), 0 0 35px rgba(233,30,99,0.4);
    transform: translateY(-2px);
}

.search-results-title {
    color: #fff;
    font-size: 1.5rem;
    margin: 2rem 0 1.5rem 0;
    font-weight: 600;
}

.no-games-gm,
.no-results-gm {
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    padding: 3rem;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    margin: 2rem 0;
}

/* Page with GameMonetize background */
.page-with-gm-bg {
    background: linear-gradient(180deg, #1a0b2e 0%, #0f0624 50%, #0a0419 100%);
    min-height: 100vh;
}

/* Game Detail Page */
.game-header-gm {
    margin-bottom: 2rem;
}

.game-detail-title-gm {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
}

.game-meta-gm {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.meta-item-gm {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
}

.meta-item-gm strong {
    color: rgba(255,255,255,0.6);
}

.meta-item-gm a {
    color: #00B4D8;
    text-decoration: none;
    transition: color 0.3s;
}

.meta-item-gm a:hover {
    color: #fff;
}

/* Game Detail Layout */
.game-detail-layout-gm {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-left-column-gm {
    flex: 1;
    max-width: 960px;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-width;
}

.game-right-sidebar-gm {
    width: 360px;
    flex-shrink: 0;
}

/* Game Player */
.game-player-container-gm {
    position: relative;
    width: 100%;
    background: #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.game-iframe-gm {
    display: block;
    width: 100%;
    height: 600px;
    border: none;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
}

.game-placeholder-large-gm {
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.1) 0%, rgba(114, 9, 183, 0.08) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
}

.game-placeholder-large-gm > * {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Widescreen Mode - Expand game area */
.game-detail-layout-gm.widescreen-mode-active .game-iframe-gm {
    height: 750px;
}

.game-detail-layout-gm.widescreen-mode-active .game-placeholder-large-gm {
    height: 750px;
}

.game-placeholder-large-gm > span {
    font-size: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-placeholder-large-gm p {
    font-size: 0.875rem;
    margin-top: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fullscreen mode styles */
.game-iframe-gm:fullscreen,
.game-iframe-gm:-webkit-full-screen,
.game-iframe-gm:-moz-full-screen,
.game-iframe-gm:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
}

.game-placeholder-large-gm:fullscreen,
.game-placeholder-large-gm:-webkit-full-screen,
.game-placeholder-large-gm:-moz-full-screen,
.game-placeholder-large-gm:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.15) 0%, rgba(114, 9, 183, 0.12) 100%);
}

/* Game Actions Bar */
.game-actions-bar-gm {
    display: flex;
    gap: 0;
    padding: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: #808080;
}

.btn-like-gm,
.btn-fullscreen-gm,
.btn-share-gm,
.btn-widescreen-gm {
    padding: 0.75rem 1rem;
    background: transparent;
    color: #fff;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    font-weight: 400;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.btn-report-gm {
    border-right: none;
}

.btn-like-gm:hover,
.btn-fullscreen-gm:hover,
.btn-share-gm:hover,
.btn-widescreen-gm:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-widescreen-gm.active {
    background: rgba(157, 78, 221, 0.3);
}

.btn-like-gm svg,
.btn-fullscreen-gm svg,
.btn-share-gm svg,
.btn-widescreen-gm svg,
.btn-report-gm svg {
    flex-shrink: 0;
}

.dropdown-arrow-gm {
    opacity: 0.7;
    margin-left: auto;
}

/* Share button dropdown */
.share-menu-gm {
    position: relative;
    display: flex;
    align-items: stretch;
}

.share-menu-gm .btn-share-gm {
    height: 100%;
}

.share-dropdown-gm {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: rgba(20, 20, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.share-menu-gm.active .share-dropdown-gm {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-option-gm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    background: transparent;
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.share-option-gm:hover {
    background: rgba(157, 78, 221, 0.2);
}

.share-option-gm svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Report button dropdown */
.btn-report-wrapper-gm {
    position: relative;
    display: flex;
    align-items: stretch;
}

.btn-report-gm {
    padding: 0.75rem 1rem;
    background: transparent;
    color: #fff;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    font-weight: 400;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.btn-report-gm:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-report-gm svg {
    flex-shrink: 0;
}

.report-dropdown-gm {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: rgba(20, 20, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.report-dropdown-gm.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.report-option-gm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    background: transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    cursor: pointer;
}

.report-option-gm:hover {
    background: rgba(255, 78, 78, 0.2);
}

.report-option-gm svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Report Modal */
.report-modal-gm {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(58, 58, 58, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.report-modal-gm.show {
    display: flex;
}

.report-modal-content-gm {
    background: #3a3a3a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.report-modal-header-gm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-modal-header-gm h3 {
    margin: 0;
    color: #ff4e4e;
    font-size: 1.1rem;
    font-weight: 600;
}

.report-modal-close-gm {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.report-modal-close-gm:hover {
    background: rgba(255, 78, 78, 0.2);
    color: #ff4e4e;
}

.report-modal-body-gm {
    padding: 1rem;
}

.report-reason-text-gm {
    color: #fff;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 78, 78, 0.1);
    border-left: 3px solid #ff4e4e;
    border-radius: 4px;
}

.report-modal-body-gm label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.report-description-input-gm {
    width: 100%;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 0.75rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all 0.3s ease;
}

.report-description-input-gm:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: #ff4e4e;
    box-shadow: 0 0 0 3px rgba(255, 78, 78, 0.1);
}

.report-description-input-gm::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.report-error-message-gm {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 78, 78, 0.15);
    border: 1px solid rgba(255, 78, 78, 0.3);
    border-radius: 6px;
    color: #ff8888;
    font-size: 0.75rem;
    line-height: 1.5;
}

.report-modal-footer-gm {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-report-submit-gm,
.btn-report-cancel-gm {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-report-submit-gm {
    background: #ff4e4e;
    color: #fff;
}

.btn-report-submit-gm:hover {
    background: #ff3333;
    box-shadow: 0 4px 20px rgba(255, 78, 78, 0.4);
    transform: translateY(-2px);
}

.btn-report-cancel-gm {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-report-cancel-gm:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Game Controls Visual Display */
.game-controls-grid-gm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 1.2rem 1rem;
    max-width: 100%;
    align-items: end;
    margin-top: 1rem;
}

.game-control-item-gm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.33rem;
    text-align: center;
}

.game-control-key-gm {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    padding: 0.15rem 0.25rem;
    min-width: 20px;
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.48rem;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.game-control-key-gm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.game-control-key-gm.mouse-icon {
    min-width: 24px;
    min-height: 24px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.game-control-key-gm.mouse-icon:hover {
    transform: none;
    box-shadow: none;
}

.game-control-key-gm.mouse-icon svg {
    width: 24px;
    height: 24px;
}

.game-control-key-gm.multi-key {
    font-size: 0.42rem;
    padding: 0.15rem 0.2rem;
}

.game-control-keys-group {
    display: flex;
    gap: 0.18rem;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}

.game-control-keys-group .game-control-key-gm {
    min-width: 18px;
    min-height: 18px;
}

/* Arrow keys navigation layout (cross pattern) */
.game-control-keys-group.arrow-layout {
    display: grid;
    grid-template-columns: repeat(3, 14px);
    grid-template-rows: repeat(2, 14px);
    gap: 0.12rem;
    justify-content: center;
}

.game-control-keys-group.arrow-layout .game-control-key-gm {
    min-width: 14px;
    min-height: 14px;
    font-size: 0.42rem;
    padding: 0.1rem 0.15rem;
}

.game-control-keys-group.arrow-layout .game-control-key-gm:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
}

.game-control-keys-group.arrow-layout .game-control-key-gm:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.game-control-keys-group.arrow-layout .game-control-key-gm:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.game-control-keys-group.arrow-layout .game-control-key-gm:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

/* WASD navigation layout */
.game-control-keys-group.wasd-layout {
    display: grid;
    grid-template-columns: repeat(3, 14px);
    grid-template-rows: repeat(2, 14px);
    gap: 0.12rem;
    justify-content: center;
}

.game-control-keys-group.wasd-layout .game-control-key-gm {
    min-width: 14px;
    min-height: 14px;
    font-size: 0.42rem;
    padding: 0.1rem 0.15rem;
}

.game-control-keys-group.wasd-layout .game-control-key-gm:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
}

.game-control-keys-group.wasd-layout .game-control-key-gm:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.game-control-keys-group.wasd-layout .game-control-key-gm:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.game-control-keys-group.wasd-layout .game-control-key-gm:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

.game-control-label-gm {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .game-controls-grid-gm {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 0.4rem;
    }

    .game-control-key-gm {
        min-width: 23px;
        min-height: 20px;
        padding: 0.27rem 0.37rem;
        font-size: 0.5rem;
    }

    .game-control-label-gm {
        font-size: 0.47rem;
    }

    .game-control-keys-group.arrow-layout,
    .game-control-keys-group.wasd-layout {
        grid-template-columns: repeat(3, 23px);
        grid-template-rows: repeat(2, 23px);
    }
}

/* Controls Builder (Admin) */
.controls-builder {
    background: rgba(20, 20, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

.controls-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 40px;
}

.control-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.control-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.control-item-key {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
}

.control-item-action {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.control-item-remove {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #ff4e4e;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    font-size: 1.2rem;
    line-height: 1;
}

.control-item-remove:hover {
    opacity: 1;
}

.controls-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.control-key-input-wrapper {
    flex: 0 0 150px;
    position: relative;
    display: flex;
}

.control-key-input {
    flex: 1;
    background: rgba(20, 20, 30, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px 0 0 6px;
    padding: 0.625rem 1rem;
    padding-right: 2.5rem;
    color: #fff;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-mouse-control {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(157, 78, 221, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 0 0.75rem;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-mouse-control:hover {
    background: rgba(157, 78, 221, 0.4);
}

.mouse-control-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: rgba(20, 20, 30, 0.95);
    border: 2px solid rgba(157, 78, 221, 0.4);
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 150px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.mouse-control-option {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mouse-control-option:hover {
    background: rgba(157, 78, 221, 0.3);
    color: #fff;
}

.control-action-input {
    flex: 1;
    background: rgba(20, 20, 30, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 0.625rem 1rem;
    color: #fff;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.control-key-input:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.8);
    background: rgba(20, 20, 30, 0.9);
    box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.2), inset 0 0 20px rgba(157, 78, 221, 0.1);
    animation: keyCapturePulse 2s ease-in-out infinite;
}

.control-action-input:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
    background: rgba(20, 20, 30, 0.8);
}

.control-key-input.error,
.control-action-input.error {
    border-color: #ff4e4e !important;
    background: rgba(255, 78, 78, 0.1);
}

.control-action-input-wrapper {
    flex: 1;
    position: relative;
}

.control-action-error {
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    color: #ff4e4e;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.control-action-error svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@keyframes keyCapturePulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.2), inset 0 0 20px rgba(157, 78, 221, 0.1);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.4), inset 0 0 20px rgba(157, 78, 221, 0.2);
    }
}

.control-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(157, 78, 221, 0.2), rgba(123, 44, 191, 0.1));
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-width: fit-content;
}

.control-key.single {
    padding: 0.5rem 0.8rem;
}

.control-key.mouse-icon {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.2rem;
}

.key-char {
    color: #fff;
    font-weight: 600;
}

.control-action {
    flex: 1;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-remove-control {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #ff4e4e;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    opacity: 0.7;
    transition: all 0.2s ease;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 400;
}

.btn-remove-control:hover {
    opacity: 1;
    background: rgba(255, 78, 78, 0.1);
    border-radius: 4px;
}

.btn-add-control {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #9D4EDD 0%, #7B2CBF 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.688rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(157, 78, 221, 0.3);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-add-control:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.4);
}

.btn-add-control:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.controls-list:empty::before {
    content: 'No controls added yet. Add controls using the form below.';
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* Game Info Tabs */
.game-info-tabs-gm {
    margin-bottom: 3rem;
}

.game-section-gm {
    margin-bottom: 2rem;
    background: rgba(255,255,255,0.05);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(157,78,221,0.2);
}

.game-section-gm h2 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.game-section-gm p {
    color: rgba(255,255,255,0.9);
    line-height: 1.8;
}

/* Game Description Collapse/Expand */
.game-description-container-gm {
    position: relative;
}

.game-description-text-gm {
    color: rgba(255,255,255,0.9);
    font-size: 0.875rem;
    line-height: 1.8;
    margin: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.game-description-text-gm.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-description-toggle-gm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.game-description-toggle-gm:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.game-description-toggle-gm .toggle-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rating System */
.rating-display-gm {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.stars-display-gm {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.star-icon-gm {
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.star-icon-gm.filled {
    fill: #FFD700;
    color: #FFD700;
}

.star-icon-gm.half-filled {
    fill: url(#half-fill);
    color: #FFD700;
}

.rating-text-gm {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.25rem;
}

/* Interactive Rating */
.rating-interactive-gm {
    text-align: center;
    padding: 0.25rem 0;
}

.rating-prompt-gm {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

.stars-interactive-gm {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.star-interactive-gm {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
    width: 24px;
    height: 24px;
}

.star-interactive-gm:hover,
.star-interactive-gm.hover {
    color: #FFD700;
    transform: scale(1.1);
}

.star-interactive-gm.selected {
    fill: #FFD700;
    color: #FFD700;
}

.rating-feedback-gm {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    min-height: 1rem;
}

.related-games-section-gm {
    margin-top: 3rem;
}

/* Related Games Grid Section (below comments) */
.related-games-grid-section-gm {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.related-games-grid-section-gm h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.related-games-pagination-gm {
    margin-top: 2rem;
}

/* Sidebar Similar Games */
.game-right-sidebar-gm {
    height: 720px !important;
    max-height: 720px !important;
    display: flex;
    flex-direction: column;
}

/* Game Ads Sidebar */
.game-ads-sidebar-gm {
    height: auto !important;
    max-height: none !important;
    gap: 1.5rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.game-ads-sidebar-gm::-webkit-scrollbar {
    width: 6px;
}

.game-ads-sidebar-gm::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.game-ads-sidebar-gm::-webkit-scrollbar-thumb {
    background: rgba(157,78,221,0.5);
    border-radius: 3px;
}

.game-ads-sidebar-gm::-webkit-scrollbar-thumb:hover {
    background: rgba(157,78,221,0.7);
}

.sidebar-title-gm {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-title-icon-gm {
    display: none;
    color: #fff;
}

.sidebar-title-text-gm {
    display: inline;
}

.sidebar-games-list-gm {
    flex: 1;
    min-height: 0;
    overflow-y: scroll !important;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

.sidebar-games-list-gm > .sidebar-game-card-gm {
    margin-bottom: 0.75rem;
}

.sidebar-games-list-gm > .sidebar-game-card-gm:last-child {
    margin-bottom: 0;
}

.sidebar-games-list-gm::-webkit-scrollbar {
    width: 6px;
}

.sidebar-games-list-gm::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.sidebar-games-list-gm::-webkit-scrollbar-thumb {
    background: rgba(157,78,221,0.5);
    border-radius: 3px;
}

.sidebar-games-list-gm::-webkit-scrollbar-thumb:hover {
    background: rgba(157,78,221,0.7);
}

.sidebar-game-card-gm {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
    transition: all 0.3s ease;
    position: relative;
}

.sidebar-game-card-gm:hover {
    background: transparent;
    transform: translateX(5px);
}

.sidebar-game-link-gm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    text-decoration: none;
    color: #fff;
    position: relative;
}

.sidebar-game-thumb-gm {
    width: 130px;
    height: 98px;
    min-width: 130px;
    min-height: 98px;
    max-width: 130px;
    max-height: 98px;
    flex-shrink: 0;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    overflow: hidden;
    background: transparent;
    position: relative;
    display: block;
}

.sidebar-game-thumb-gm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
}

.sidebar-game-title-gm {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Widescreen Mode */
.game-right-sidebar-gm {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

.game-right-sidebar-gm.widescreen-mode {
    width: 360px !important;
}

.game-ads-sidebar-gm.widescreen-mode {
    width: 360px !important;
}

/* Ad Slots */
.ad-slot-gm {
    width: 100%;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.2);
}

.ad-slot-vertical-large-gm {
    height: 600px;
}

.ad-slot-horizontal-small-gm {
    height: 100px;
}

.ad-placeholder-gm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.05) 0%, rgba(114, 9, 183, 0.05) 100%);
}

.ad-label-gm {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.ad-size-gm {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: monospace;
}

/* Mobile Ad Slots */
.mobile-ad-slot-gm {
    display: none;
    width: 100%;
    margin: 1.5rem 0;
}

.mobile-ad-horizontal-gm {
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.2);
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-card-gm {
    background: transparent !important;
    border-radius: 0;
    margin-bottom: 0.5rem;
    width: 110px;
    height: 82px;
    overflow: visible;
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-card-gm:hover {
    transform: none;
    background: transparent !important;
}

.game-right-sidebar-gm.widescreen-mode .sidebar-title-icon-gm {
    display: block;
}

.game-right-sidebar-gm.widescreen-mode .sidebar-title-text-gm {
    display: none;
}

.sidebar-game-link-gm {
    transition: flex-direction 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-link-gm {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    position: relative;
    display: flex;
    width: 110px;
    height: 82px;
}

.sidebar-game-thumb-gm {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-thumb-gm {
    width: 110px;
    height: 82px;
    min-width: 110px;
    min-height: 82px;
    max-width: 110px;
    max-height: 82px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    display: block;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.sidebar-game-title-gm {
    opacity: 1;
    max-height: 100px;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-title-gm {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-thumb-gm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    pointer-events: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-card-gm:hover .sidebar-game-thumb-gm::before {
    opacity: 1;
}

.game-right-sidebar-gm.widescreen-mode .sidebar-game-card-gm:hover .sidebar-game-title-gm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    opacity: 1;
    max-height: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    font-size: 0.7rem;
    line-height: 1.2;
    padding: 0.5rem;
    width: 110px;
    height: 82px;
}

.game-left-column-gm {
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-detail-layout-gm .game-left-column-gm {
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-detail-layout-gm.widescreen-mode-active .game-left-column-gm {
    max-width: calc(100% - 380px);
}

/* Comments Section */
.comments-section-gm {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.comment-form-container-gm {
    margin-bottom: 2rem;
}

.comment-form-gm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-textarea-wrapper-gm {
    position: relative;
}

.comment-textarea-gm {
    width: 100%;
    padding: 1rem;
    padding-right: 3.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(157,78,221,0.3);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 100px;
}

.comment-textarea-gm:focus {
    outline: none;
    border-color: rgba(157,78,221,0.6);
    background: rgba(255,255,255,0.08);
}

.comment-textarea-gm.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

.comment-textarea-gm.error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.emoji-picker-btn-gm {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(157,78,221,0.2);
    border: 1px solid rgba(157,78,221,0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.emoji-picker-btn-gm:hover {
    background: rgba(157,78,221,0.3);
    border-color: rgba(157,78,221,0.5);
    transform: scale(1.05);
}

.emoji-picker-gm {
    position: absolute;
    top: 3.5rem;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: rgba(20,20,40,0.98);
    border: 1px solid rgba(157,78,221,0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.emoji-picker-gm.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.emoji-picker-header-gm {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-size: 0.9rem;
}

.emoji-grid-gm {
    padding: 0.75rem;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.25rem;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

.emoji-grid-gm::-webkit-scrollbar {
    width: 6px;
}

.emoji-grid-gm::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.emoji-grid-gm::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.emoji-grid-gm::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.emoji-btn-gm {
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn-gm:hover {
    background: rgba(157,78,221,0.2);
    transform: scale(1.15);
}

.comment-form-footer-gm {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-count-gm {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

.btn-submit-comment-gm {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #9D4EDD 0%, #7B2CBF 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(157, 78, 221, 0.3));
}

.btn-submit-comment-gm:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 20px rgba(157, 78, 221, 0.5));
}

.btn-submit-comment-gm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.login-prompt-gm {
    padding: 2rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(157,78,221,0.2);
    border-radius: 8px;
    text-align: center;
    margin-bottom: 2rem;
}

.login-prompt-gm p {
    margin: 0;
    color: rgba(255,255,255,0.8);
}

.login-prompt-gm a {
    color: #9D4EDD;
    text-decoration: none;
    font-weight: 600;
}

.login-prompt-gm a:hover {
    color: #C77DFF;
    text-decoration: underline;
}

.comments-list-gm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.comment-item-gm {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(157,78,221,0.2);
    border-radius: 6px;
    padding: 0.65rem;
}

.comment-user-section-gm {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.comment-avatar-gm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(157,78,221,0.3);
}

.comment-avatar-placeholder-gm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(157,78,221,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(157,78,221,0.3);
    color: rgba(255,255,255,0.6);
}

.comment-avatar-placeholder-gm svg {
    width: 18px;
    height: 18px;
}

.comment-info-gm {
    flex: 1;
    min-width: 0;
}

.comment-header-gm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.comment-author-gm {
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
}

.comment-date-gm {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
}

.comment-text-gm {
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
    margin: 0;
    font-size: 0.8rem;
}

.comments-pagination-gm {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.comments-empty-gm {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.875rem;
}

/* Responsive Game Detail */
@media (max-width: 1100px) {
    .game-detail-layout-gm {
        flex-direction: column;
    }

    .game-left-column-gm {
        max-width: 100%;
        width: 100%;
    }

    .game-right-sidebar-gm {
        width: 100% !important;
        display: none;
    }

    .game-ads-sidebar-gm {
        display: none;
    }

    /* Show mobile ads on medium screens and below */
    .mobile-ad-slot-gm {
        display: block;
    }

    /* Disable widescreen mode on smaller screens */
    .btn-widescreen-gm {
        display: none !important;
    }

    .game-right-sidebar-gm.widescreen-mode {
        width: 100% !important;
    }

    .game-right-sidebar-gm.widescreen-mode .sidebar-title-icon-gm {
        display: none;
    }

    .game-right-sidebar-gm.widescreen-mode .sidebar-title-text-gm {
        display: inline;
    }

    .game-right-sidebar-gm.widescreen-mode .sidebar-game-link-gm {
        flex-direction: row;
        gap: 0.75rem;
        padding: 0;
    }

    .game-right-sidebar-gm.widescreen-mode .sidebar-game-thumb-gm {
        width: 110px;
        height: 82px;
        min-width: 110px;
        min-height: 82px;
        max-width: 110px;
        max-height: 82px;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        display: block;
        position: relative;
        overflow: hidden;
        background: transparent;
    }

    .game-right-sidebar-gm.widescreen-mode .sidebar-game-title-gm {
        display: -webkit-box;
    }

    .game-player-container-gm {
        position: relative;
    }

    .game-iframe-gm,
    .game-placeholder-large-gm {
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }

    .game-iframe-gm {
        padding-bottom: 0;
        height: calc(100vw * 0.5625); /* 16:9 ratio */
    }

    .game-placeholder-large-gm {
        padding-bottom: 0;
        height: calc(100vw * 0.5625); /* 16:9 ratio */
        position: relative;
    }

    .game-placeholder-large-gm > span,
    .game-placeholder-large-gm > p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .game-placeholder-large-gm > p {
        top: 60%;
        width: 80%;
        text-align: center;
    }

    .game-placeholder-large-gm {
        font-size: 3.5rem;
    }

    .game-placeholder-large-gm p {
        font-size: 0.8rem;
    }

    .game-right-sidebar-gm {
        width: 100%;
        max-height: 500px;
        position: static;
        height: auto !important;
    }

    .sidebar-games-list-gm {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .main-content-gm .container.widescreen-container {
        padding: 0 15px;
    }

    .game-actions-bar-gm {
        flex-wrap: nowrap;
    }

    .game-detail-title-gm {
        font-size: 1.4rem;
    }

    .game-meta-gm {
        flex-direction: column;
        gap: 0.5rem;
    }

    .game-iframe-gm {
        height: calc(100vw * 0.75); /* 4:3 aspect ratio for mobile */
    }

    .game-placeholder-large-gm {
        padding-bottom: 0;
        height: calc(100vw * 0.75); /* 4:3 aspect ratio for mobile */
        font-size: 3rem;
    }

    .game-placeholder-large-gm p {
        font-size: 0.75rem;
    }

    .game-description-text-gm.collapsed {
        -webkit-line-clamp: 3;
    }

    .comments-list-gm {
        grid-template-columns: 1fr;
    }

    .sidebar-games-list-gm {
        height: 300px;
    }

    .game-right-sidebar-gm {
        max-height: 400px;
    }

    .game-ads-sidebar-gm {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .ad-slot-vertical-large-gm {
        height: 400px;
    }

    /* Show mobile ads on tablet/mobile */
    .mobile-ad-slot-gm {
        display: block;
    }

    /* Hide sidebar ads on tablet/mobile */
    .game-right-sidebar-gm {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }

    .main-content-gm .container.widescreen-container {
        padding: 0 10px;
    }

    .game-player-container-gm {
        border-radius: 8px;
    }

    .btn-like-gm,
    .btn-fullscreen-gm,
    .btn-share-gm,
    .btn-widescreen-gm,
    .btn-report-gm {
        padding: 0.65rem 0.65rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }

    .btn-submit-comment-gm {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }

    .comment-avatar-gm,
    .comment-avatar-placeholder-gm {
        width: 32px;
        height: 32px;
    }

    .comment-user-section-gm {
        gap: 0.75rem;
    }

    .comments-list-gm {
        grid-template-columns: 1fr;
    }

    /* Adjust mobile ads for small screens */
    .mobile-ad-horizontal-gm {
        height: 80px;
    }

    .ad-label-gm {
        font-size: 0.65rem;
    }

    .ad-size-gm {
        font-size: 0.75rem;
    }

    /* Smaller placeholder icon for small screens */
    .game-placeholder-large-gm {
        font-size: 2.5rem;
    }

    .game-placeholder-large-gm p {
        font-size: 0.7rem;
    }
}

    .sidebar-games-list-gm {
        height: 250px;
    }

    .sidebar-game-thumb-gm {
        width: 110px;
        height: 82px;
        border-radius: 12px 12px 12px 12px;
        -webkit-border-radius: 12px 12px 12px 12px;
    }

    .sidebar-game-title-gm {
        font-size: 0.75rem;
    }
}

/* Error Page (404, 500, etc.) */
.error-page-gm {
    text-align: center;
    padding: 4rem 2rem;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-title-gm {
    color: #fff;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.error-description-gm {
    color: rgba(255,255,255,0.8);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.error-page-gm .btn-play-now-gm,
.no-games-gm .btn-play-now-gm {
    display: inline-flex;
    max-width: 200px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 1.5rem;
    flex: none;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.btn-play-now-gm {
    flex: 1;
    min-width: 150px;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #E91E63, #C2185B);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    box-shadow: 0 0 20px rgba(233,30,99,0.5);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
}

.btn-play-now-gm:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(233,30,99,0.7), 0 0 40px rgba(233,30,99,0.4);
}

/* Auth Pages (Login/Register) */
.auth-page-gm {
    background: linear-gradient(135deg, #7B2CBF 0%, #9D4EDD 35%, #00B4D8 70%, #0096C7 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2rem 0;
    margin: 0;
}

.auth-page-gm::before,
.auth-page-gm::after {
    display: none !important;
}

.auth-stars-left,
.auth-stars-right {
    position: fixed;
    width: 300px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
    pointer-events: none;
}

.auth-stars-left {
    top: 10%;
    left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3Cg stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none'%3E%3Cpath d='M150 50 L180 120 L250 120 L195 165 L220 235 L150 190 L80 235 L105 165 L50 120 L120 120 Z'/%3E%3Cpath d='M100 200 L115 240 L155 240 L123 265 L138 305 L100 280 L62 305 L77 265 L45 240 L85 240 Z'/%3E%3Cpolyline points='50,100 150,200 100,300'/%3E%3Cpolyline points='200,80 180,180 250,250'/%3E%3C/g%3E%3C/svg%3E");
    animation: floatLeft 8s ease-in-out infinite;
}

.auth-stars-right {
    top: 10%;
    right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3Cg stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none'%3E%3Cpath d='M150 50 L180 120 L250 120 L195 165 L220 235 L150 190 L80 235 L105 165 L50 120 L120 120 Z'/%3E%3Cpath d='M200 200 L215 240 L255 240 L223 265 L238 305 L200 280 L162 305 L177 265 L145 240 L185 240 Z'/%3E%3Cpolyline points='250,100 150,200 200,300'/%3E%3Cpolyline points='100,80 120,180 50,250'/%3E%3C/g%3E%3C/svg%3E");
    animation: floatRight 8s ease-in-out infinite;
}

.auth-container-gm {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 450px;
    padding: 0 1rem;
    overflow: visible;
}

.auth-box-gm {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 80px rgba(157,78,221,0.2);
    overflow: visible;
    height: auto;
    max-height: none;
}

.auth-logo-gm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.auth-logo-gm:hover {
    opacity: 0.85;
}

.auth-logo-gm .logo-icon {
    background: linear-gradient(135deg, #7B2CBF, #00B4D8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.5rem;
}

.auth-logo-gm .logo-text {
    background: linear-gradient(135deg, #7B2CBF, #00B4D8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-title-gm {
    text-align: center;
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.auth-form-gm {
    margin-bottom: 1.5rem;
}

.form-group-gm {
    margin-bottom: 1.5rem;
}

.form-group-gm label {
    display: block;
    color: #555;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.input-gm {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s;
    background: #fff;
    color: #333;
}

.input-gm:focus {
    outline: none;
    border-color: #9D4EDD;
    box-shadow: 0 0 0 3px rgba(157,78,221,0.1);
}

.btn-auth-gm {
    width: 100%;
    padding: 0.625rem;
    background: linear-gradient(135deg, #7B2CBF 0%, #9D4EDD 50%, #00B4D8 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(157,78,221,0.4);
}

.btn-auth-gm:hover {
    box-shadow: 0 6px 25px rgba(157,78,221,0.6), 0 0 40px rgba(157,78,221,0.3);
}

.auth-divider-gm {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 1.5rem 0;
}

.btn-google-auth-gm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem;
    background: #fff;
    color: #3c4043;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-sizing: border-box;
    line-height: 1;
}

.btn-google-auth-gm:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}

.btn-google-auth-gm svg {
    flex-shrink: 0;
}

.auth-footer-gm {
    text-align: center;
    margin-top: 1.5rem;
}

.auth-footer-gm p {
    color: #666;
    font-size: 0.9rem;
}

.auth-footer-gm a {
    color: #7B2CBF;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.auth-footer-gm a:hover {
    color: #00B4D8;
    text-decoration: underline;
}

.alert-gm {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.alert-error-gm {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
}

.alert-success-gm {
    background: #f0fff4;
    color: #2f855a;
    border: 1px solid #9ae6b4;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .games-grid-featured {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
    }

    .games-grid-standard {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .categories-grid-large {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .game-detail {
        grid-template-columns: 1fr;
    }

    .nav {
        gap: 0.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }

    /* GameMonetize Responsive */
    .header-gm .container {
        padding: 0 0.75rem;
    }

    .header-content-gm {
        flex-wrap: nowrap;
        gap: 0.5rem;
        position: relative;
        justify-content: flex-start;
    }

    .mobile-menu-toggle-gm {
        display: block;
        margin-right: 0;
        margin-left: -0.5rem;
    }

    .logo-gm {
        margin-right: auto;
    }

    .header-actions {
        margin-left: auto;
    }

    .nav-gm {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 10, 30, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 1rem;
        gap: 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
    }

    .nav-gm.active {
        display: flex;
    }

    .nav-link-gm {
        width: 100%;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-link-gm:last-child {
        border-bottom: none;
    }

    .nav-link-gm::after {
        display: none;
    }

    .hero-title-gm {
        font-size: 3rem;
        letter-spacing: 5px;
    }

    .hero-tabs {
        flex-direction: column;
        max-width: 300px;
        margin: 2rem auto 0;
    }

    .hero-tab {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        border-radius: 0 !important;
    }

    .hero-tab:first-child {
        border-radius: 8px 8px 0 0 !important;
    }

    .hero-tab:last-child {
        border-radius: 0 0 8px 8px !important;
        border-bottom: none;
    }

    .games-grid-gm {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .games-scroll-wrapper-gm {
        padding: 0 0.75rem;
        overflow: visible;
        margin-top: 0;
    }

    .category-section-gm .games-grid-gm {
        grid-auto-columns: calc((100% - 1rem) / 3);
    }

    .category-header-wrapper-gm {
        padding: 0 0.75rem;
    }
}

@media (max-width: 480px) {
    .games-grid-gm {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .games-scroll-wrapper-gm {
        padding: 0 0.5rem;
        overflow: visible;
        margin-top: 0;
    }

    .category-section-gm .games-grid-gm {
        grid-auto-columns: calc((100% - 0.5rem) / 2);
    }

    .category-header-wrapper-gm {
        padding: 0 0.5rem;
    }

    .scroll-btn-gm {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 940px) {
    .games-grid-gm {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .category-section-gm .games-grid-gm {
        grid-auto-columns: calc((100% - 1.5rem) / 4);
    }

    .game-title-gm {
        font-size: 0.75rem;
    }
}

@media (min-width: 941px) and (max-width: 1024px) {
    .games-grid-gm {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.5rem;
    }

    .category-section-gm .games-grid-gm {
        grid-auto-columns: calc((100% - 2rem) / 5);
    }

    .game-title-gm {
        font-size: 0.75rem;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .games-grid-gm {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.5rem;
    }
}

@media (min-width: 1281px) {
    .games-grid-gm {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.5rem;
    }
}

    /* Auth pages responsive */
    .auth-box-gm {
        padding: 2rem 1.5rem;
    }

    .auth-title-gm {
        font-size: 1.5rem;
    }

    .auth-stars-left,
    .auth-stars-right {
        width: 200px;
        height: 300px;
    }
}

/* Catalog Page Styles */
.catalog-header-gm {
    text-align: center;
    color: #fff;
    padding-top: 1rem;
    padding-bottom: 6rem !important;
    margin-bottom: 3rem !important;
}

.catalog-header-gm h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: #fff;
}

.catalog-header-gm p {
    font-size: 0.875rem;
    opacity: 0.9;
    color: #fff;
}

/* Catalog Layout */
.catalog-layout-gm {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

/* Left Sidebar */
.catalog-sidebar-gm {
    align-self: start;
}

.sidebar-section-gm {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.1);
}

.sidebar-title-gm {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.filter-group-gm {
    margin-bottom: 0.5rem;
}

.filter-group-gm:last-child {
    margin-bottom: 0;
}

.filter-header-gm {
    width: 100%;
    background: rgba(51, 65, 85, 0.8);
    border: none;
    padding: 0.75rem 1rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    margin-bottom: 0.5rem;
}

.filter-header-gm:hover {
    background: rgba(71, 85, 105, 0.8);
}

.filter-header-gm:not(.active) + .filter-list-gm {
    display: none;
}

.filter-arrow-gm {
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.filter-header-gm:not(.active) .filter-arrow-gm {
    transform: rotate(-90deg);
}

.filter-list-gm {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.filter-item-gm {
    padding: 0.5rem 0.75rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    transition: all 0.3s;
    cursor: pointer;
}

.filter-item-content-gm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-icon-gm {
    font-size: 1rem;
    opacity: 0.8;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    text-align: center;
}

.filter-item-gm:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.filter-item-gm:hover .filter-icon-gm {
    opacity: 1;
    transform: scale(1.1);
}

.filter-item-gm.active {
    background: rgba(157,78,221,0.2);
    color: #fff;
    font-weight: 600;
}

.filter-item-gm.active .filter-icon-gm {
    opacity: 1;
}

.filter-remove-gm {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 400;
    transition: all 0.2s;
    opacity: 0.7;
    text-decoration: none;
    padding: 0 0.5rem;
    margin-left: 0.5rem;
    border-radius: 4px;
}

.filter-remove-gm:hover {
    opacity: 1;
    color: #E91E63;
    background: rgba(233, 30, 99, 0.1);
}

.filter-count-gm {
    background: rgba(255,255,255,0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

/* Catalog Content */
.catalog-content-gm {
    min-width: 0;
}

.results-title-gm {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(157,78,221,0.5);
}

.results-count-gm {
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
    font-weight: 400;
}

.game-meta-small-gm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}

.game-category-small-gm {
    background: rgba(157,78,221,0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.game-plays-small-gm {
    font-weight: 500;
    display: none;
}

.games-grid-catalog-gm {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    row-gap: 0.5rem;
}

.games-grid-catalog-gm > .game-card-gm {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Ensure uniform thumbnail sizing in catalog - Modern approach */
.games-grid-catalog-gm .game-thumb-gm {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 0 0.5rem 0 !important;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 4 / 3) {
    .games-grid-catalog-gm .game-thumb-gm {
        height: 0 !important;
        padding-bottom: 75% !important;
    }
}

.games-grid-catalog-gm .game-thumb-gm picture,
.games-grid-catalog-gm .game-thumb-gm img,
.games-grid-catalog-gm .game-thumb-gm .game-placeholder-gm,
.games-grid-catalog-gm .game-thumb-gm .game-video-preview {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide description in grid view by default */
.game-description-list {
    display: none;
}

/* List view layout */
.games-grid-catalog-gm.list-view {
    grid-template-columns: 1fr;
    gap: 0;
}

.games-grid-catalog-gm.list-view .game-card-gm {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.games-grid-catalog-gm.list-view .game-card-gm:hover {
    background: transparent;
}

.games-grid-catalog-gm.list-view .game-link-gm {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
}

.games-grid-catalog-gm.list-view .game-thumb-gm {
    flex-shrink: 0;
    width: 160px !important;
    height: 0 !important;
    padding-bottom: 120px !important; /* 160px * 0.75 = 120px for 4:3 ratio */
    margin: 0;
}

.games-grid-catalog-gm.list-view .game-info-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.games-grid-catalog-gm.list-view .game-title-gm {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
    text-align: left;
    padding: 0;
    white-space: normal;
}

.games-grid-catalog-gm.list-view .game-description-list {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    text-align: left;
}

.games-grid-catalog-gm.list-view .game-meta-small-gm {
    margin-top: 0;
    justify-content: flex-start;
}

/* Quick Filters Bar */
.catalog-quick-filters-gm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(20, 20, 30, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(157, 78, 221, 0.2);
}

.quick-filter-buttons-gm {
    display: flex;
    gap: 0.5rem;
}

.quick-filter-btn-gm {
    width: 42px;
    height: 42px;
    background: rgba(157, 78, 221, 0.15);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-filter-btn-gm:hover {
    background: rgba(157, 78, 221, 0.3);
    border-color: rgba(157, 78, 221, 0.5);
    box-shadow: 0 0 12px rgba(157, 78, 221, 0.4);
}

.quick-filter-btn-gm.active {
    background: rgba(157, 78, 221, 0.4);
    border-color: rgba(157, 78, 221, 0.7);
    box-shadow: 0 0 16px rgba(157, 78, 221, 0.6), inset 0 0 8px rgba(157, 78, 221, 0.3);
}

.filter-icon-large-gm {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
}

.quick-search-gm {
    flex: 1;
    max-width: 400px;
}

.quick-search-input-gm {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(10, 10, 15, 0.5);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.3s;
}

.quick-search-input-gm::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.quick-search-input-gm:focus {
    border-color: rgba(157, 78, 221, 0.6);
    background: rgba(10, 10, 15, 0.7);
}

/* Pagination Styles */
.pagination-wrapper-gm {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.pagination-controls-gm {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-btn-gm,
.pagination-number-gm {
    min-width: 32px;
    height: 32px;
    padding: 0.375rem 0.5rem;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-btn-gm:hover:not(:disabled):not(.disabled),
.pagination-number-gm:hover {
    background: rgba(157, 78, 221, 0.2);
    border-color: rgba(157, 78, 221, 0.5);
    box-shadow: 0 0 12px rgba(157, 78, 221, 0.4);
}

.pagination-number-gm.active {
    background: linear-gradient(135deg, #9D4EDD 0%, #C77DFF 100%);
    border-color: #9D4EDD;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.4);
}

.pagination-btn-gm.disabled,
.pagination-btn-gm:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-btn-gm span {
    font-size: 0.875rem;
}

.pagination-info-gm {
    padding: 0 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

/* Responsive Catalog */
@media (max-width: 1024px) {
    .catalog-layout-gm {
        grid-template-columns: 220px 1fr;
        gap: 1.5rem;
    }

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

@media (max-width: 768px) {
    .catalog-header-gm h1 {
        font-size: 1.8rem;
    }

    .catalog-layout-gm {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .catalog-sidebar-gm {
        position: static;
    }

    .sidebar-section-gm {
        padding: 1rem;
    }

    .sidebar-title-gm {
        font-size: 1.2rem;
    }

    .games-grid-catalog-gm {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .results-title-gm {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .games-grid-catalog-gm {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Home Page Search Section */
.home-search-section-gm {
    padding: 1.5rem 0;
    background: transparent;
}

.home-search-container-gm {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.search-wrapper-gm {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.home-search-input-gm {
    padding-right: 3.5rem;
}

.home-search-btn-inside-gm {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #9D4EDD 0%, #E91E63 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 2rem;
    cursor: pointer;
    transition: box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 0.5rem);
}

.home-search-btn-inside-gm:hover {
    box-shadow: 0 5px 20px rgba(157, 78, 221, 0.4);
}

@media (max-width: 768px) {
    .home-search-section-gm {
        padding: 1rem 0;
    }

    .home-search-container-gm {
        max-width: 90%;
    }
}

/* ============================================
   DEVELOPERS PAGE STYLES
   ============================================ */

/* Hero Section */
.developers-hero-gm {
    background: transparent;
    padding: 6rem 0 4rem;
    color: #fff;
    text-align: center;
}

.developers-hero-content-gm {
    max-width: 800px;
    margin: 0 auto;
}

.developers-hero-title-gm {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.developers-hero-subtitle-gm {
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.developers-cta-btn-gm {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: #fff;
    color: #667eea;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    transition: filter 0.3s ease;
    filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
}

.developers-cta-btn-gm:hover {
    filter: drop-shadow(0 6px 30px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.3));
}

/* Steps Section */
.developers-steps-section-gm {
    padding: 5rem 0;
    background: transparent;
}

.developers-section-title-gm {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #fff;
}

.developers-steps-grid-gm {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.developers-step-card-gm {
    background: rgba(26, 35, 126, 0.4);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex: 0 0 calc(50% - 1rem);
    max-width: 350px;
}

.developers-step-card-gm:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 140, 66, 0.3);
    background: rgba(26, 35, 126, 0.6);
    border-color: rgba(255, 140, 66, 0.3);
}

.developers-step-number-gm {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ff8c42 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(255, 140, 66, 0.5);
}

.developers-step-title-gm {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
}

.developers-step-desc-gm {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.developers-step-features-gm {
    list-style: none;
    padding: 0;
    margin: 0;
}

.developers-step-features-gm li {
    padding: 0.5rem 0;
    color: #ff8c42;
    font-weight: 500;
    font-size: 0.85rem;
}

.developers-step-features-gm li::before {
    content: '✓ ';
    margin-right: 0.5rem;
}

/* Benefits Section */
.developers-benefits-section-gm {
    padding: 5rem 0;
    background: transparent;
}

.developers-benefits-grid-gm {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
}

.developers-benefit-card-gm {
    background: rgba(26, 35, 126, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    flex: 0 0 calc(33.333% - 1.5rem);
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    transition: all 0.3s ease;
}

.developers-benefit-card-gm:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 140, 66, 0.3);
    background: rgba(26, 35, 126, 0.6);
    border-color: rgba(255, 140, 66, 0.3);
}

.developers-benefit-icon-gm {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.developers-benefit-title-gm {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
}

.developers-benefit-desc-gm {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-size: 0.85rem;
}

/* CTA Section */
.developers-cta-section-gm {
    padding: 5rem 0;
    background: transparent;
    color: #fff;
    text-align: center;
}

.developers-cta-content-gm {
    max-width: 700px;
    margin: 0 auto;
}

.developers-cta-title-gm {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.developers-cta-desc-gm {
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.developers-cta-btn-large-gm {
    display: inline-block;
    padding: 0.5rem 2rem;
    background: #fff;
    color: #667eea;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
}

.developers-cta-btn-large-gm:hover {
    box-shadow: 0 6px 30px rgba(255, 255, 255, 0.4), 0 0 50px rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .developers-hero-title-gm {
        font-size: 2rem;
    }

    .developers-hero-subtitle-gm {
        font-size: 1rem;
    }

    .developers-section-title-gm {
        font-size: 1.8rem;
    }

    .developers-steps-grid-gm {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .developers-benefits-grid-gm {
        gap: 1.5rem;
    }

    .developers-benefit-card-gm {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .developers-cta-title-gm {
        font-size: 1.8rem;
    }

    .developers-cta-desc-gm {
        font-size: 1rem;
    }
}

/* Developers page footer - transparent to blend with background */
body.developers-page .footer {
    background: transparent;
    box-shadow: none;
}

/* Publishers page footer - transparent to blend with background */
body.publishers-page .footer {
    background: transparent;
    box-shadow: none;
}

/* Blog page footer - transparent to blend with background */
body.blog-page .footer {
    background: transparent;
    box-shadow: none;
}

/* Recently Played page footer - transparent to blend with background */
body.recently-played-page .footer {
    background: transparent;
    box-shadow: none;
}

/* ========================================
   Blog Page Styles
   ======================================== */

/* Blog Hero Section */
.blog-hero-gm {
    background: transparent;
    padding: 4rem 0 3rem;
    color: #fff;
    text-align: center;
}

.blog-hero-content-gm {
    max-width: 800px;
    margin: 0 auto;
}

.blog-hero-title-gm {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.blog-hero-subtitle-gm {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Blog Content Section */
.blog-content-section-gm {
    padding: 2rem 0 4rem;
}

/* Blog Tags */
.blog-tags-gm {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.blog-tag-gm {
    padding: 0.35rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.blog-tag-gm:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 30px rgba(118, 75, 162, 0.3);
}

.blog-tag-gm.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    box-shadow: 0 0 25px rgba(102, 126, 234, 0.6), 0 0 40px rgba(118, 75, 162, 0.4);
}

/* Blog Posts Grid */
.blog-posts-grid-gm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Blog Post Card */
.blog-post-card-gm {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.blog-post-card-gm:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 126, 234, 0.2);
}

.blog-post-date-gm {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.75rem;
}

.blog-post-title-gm {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.blog-post-title-gm a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-title-gm a:hover {
    color: #667eea;
}

.blog-post-excerpt-gm {
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.25rem;
}

.blog-post-read-more-gm {
    display: inline-block;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.blog-post-read-more-gm:hover {
    color: #764ba2;
    transform: translateX(4px);
}

/* Blog Pagination */
.blog-pagination-gm {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    margin-top: 2rem;
}

.blog-page-link-gm {
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
}

.blog-page-link-gm:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.4), 0 0 25px rgba(118, 75, 162, 0.2);
}

.blog-page-link-gm.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 35px rgba(118, 75, 162, 0.3);
}

.blog-page-dots {
    color: rgba(255, 255, 255, 0.5);
    padding: 0 0.5rem;
}

.no-posts-gm {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-hero-title-gm {
        font-size: 2rem;
    }

    .blog-hero-subtitle-gm {
        font-size: 1rem;
    }

    .blog-posts-grid-gm {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-tags-gm {
        gap: 0.5rem;
    }

    .blog-tag-gm {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }
}

/* ========================================
   Blog Detail Page Styles
   ======================================== */

/* Blog Detail Page Background */
body.blog-detail-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

body.blog-detail-page > *:not(.sticky-header-wrapper) {
    position: relative;
    z-index: 1;
}

body.blog-detail-page .footer {
    background: transparent;
    box-shadow: none;
}

.blog-detail-section-gm {
    padding: 4rem 0;
    min-height: 70vh;
}

.blog-detail-container-gm {
    max-width: 900px;
    margin: 0 auto;
}

/* Breadcrumb */
.blog-breadcrumb-gm {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.blog-breadcrumb-gm a {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-breadcrumb-gm a:hover {
    color: #764ba2;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb-current {
    color: rgba(255, 255, 255, 0.9);
}

/* Article */
.blog-article-gm {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 3rem;
    margin-bottom: 3rem;
}

.blog-article-header-gm {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-article-title-gm {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.blog-article-meta-gm {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.blog-article-separator {
    color: rgba(255, 255, 255, 0.4);
}

.blog-article-date-gm,
.blog-article-author-gm {
    color: rgba(255, 255, 255, 0.7);
}

.blog-article-tags-gm {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-article-tag-gm {
    padding: 0.35rem 1.25rem;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 25px;
    color: #667eea;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.blog-article-tag-gm:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
}

.blog-article-content-gm {
    color: rgba(255, 255, 255, 0.9);
}

.blog-article-excerpt-gm {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.blog-article-body-gm {
    font-size: 1.05rem;
    line-height: 1.8;
}

.blog-article-body-gm p {
    margin-bottom: 1.5rem;
}

.blog-article-body-gm h2 {
    font-size: 1.8rem;
    margin: 2.5rem 0 1.5rem;
    color: #fff;
}

.blog-article-body-gm h3 {
    font-size: 1.4rem;
    margin: 2rem 0 1rem;
    color: #fff;
}

.blog-article-body-gm ul,
.blog-article-body-gm ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.blog-article-body-gm li {
    margin-bottom: 0.5rem;
}

.blog-article-body-gm a {
    color: #667eea;
    text-decoration: underline;
}

.blog-article-body-gm a:hover {
    color: #764ba2;
}

/* Back Button */
.blog-back-section-gm {
    margin-bottom: 3rem;
}

.blog-back-btn-gm {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: filter 0.3s ease;
    filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
}

.blog-back-btn-gm:hover {
    filter: drop-shadow(0 6px 30px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.3));
}

/* Related Posts */
.blog-related-section-gm {
    margin-top: 4rem;
}

.blog-related-title-gm {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    text-align: center;
}

.blog-related-grid-gm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-article-gm {
        padding: 2rem 1.5rem;
    }

    .blog-article-title-gm {
        font-size: 1.8rem;
    }

    .blog-article-excerpt-gm {
        font-size: 1.05rem;
        padding: 1rem;
    }

    .blog-article-body-gm {
        font-size: 1rem;
    }

    .blog-related-grid-gm {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   SDK PAGE STYLES
   =================================== */

/* SDK Page Background */
body.sdk-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

/* Platform SDKs Section */
.sdk-platforms-section-gm {
    padding: 5rem 0;
}

.sdk-platforms-grid-gm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.sdk-platform-card-gm {
    background: rgba(26, 35, 126, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sdk-platform-card-gm:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 140, 66, 0.3);
    background: rgba(26, 35, 126, 0.6);
    border-color: rgba(255, 140, 66, 0.3);
}

.sdk-platform-icon-gm {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    color: #ff8c42;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sdk-platform-title-gm {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.sdk-platform-desc-gm {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    font-size: 0.85rem;
}

.sdk-platform-buttons-gm {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.sdk-btn-primary-gm,
.sdk-btn-secondary-gm {
    padding: 0.35rem 1rem;
    border-radius: 25px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: filter 0.3s ease, background 0.3s ease;
    display: inline-block;
}

.sdk-btn-primary-gm {
    background: linear-gradient(135deg, #ff8c42 0%, #ff5722 100%);
    color: #fff;
    filter: drop-shadow(0 4px 10px rgba(255, 140, 66, 0.3));
}

.sdk-btn-primary-gm:hover {
    filter: drop-shadow(0 6px 15px rgba(255, 140, 66, 0.5)) drop-shadow(0 0 20px rgba(255, 140, 66, 0.3));
}

.sdk-btn-secondary-gm {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.1));
}

.sdk-btn-secondary-gm:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    filter: drop-shadow(0 6px 15px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
}

/* Integration Steps Section */
.sdk-steps-section-gm {
    padding: 5rem 0;
    background: rgba(5, 18, 43, 0.5);
}

/* Benefits Section */
.sdk-benefits-section-gm {
    padding: 5rem 0;
}

/* CTA Buttons */
.sdk-cta-buttons-gm {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.sdk-cta-btn-primary-gm,
.sdk-cta-btn-secondary-gm {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 25px;
    text-decoration: none;
    transition: filter 0.3s ease, background 0.3s ease;
    display: inline-block;
}

.sdk-cta-btn-primary-gm {
    background: linear-gradient(135deg, #ff8c42 0%, #ff5722 100%);
    color: #fff;
    filter: drop-shadow(0 0 10px rgba(255, 140, 66, 0.3)) drop-shadow(0 0 20px rgba(255, 140, 66, 0.2));
}

.sdk-cta-btn-primary-gm:hover {
    filter: drop-shadow(0 0 20px rgba(255, 140, 66, 0.6)) drop-shadow(0 0 35px rgba(255, 140, 66, 0.4));
}

.sdk-cta-btn-secondary-gm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    filter: drop-shadow(0 4px 10px rgba(102, 126, 234, 0.3));
}

.sdk-cta-btn-secondary-gm:hover {
    filter: drop-shadow(0 6px 15px rgba(102, 126, 234, 0.5)) drop-shadow(0 0 20px rgba(102, 126, 234, 0.3));
}

/* Responsive Design */
@media (max-width: 768px) {
    .sdk-platforms-grid-gm {
        grid-template-columns: 1fr;
    }

    .sdk-platform-buttons-gm {
        flex-direction: column;
    }

    .sdk-btn-primary-gm,
    .sdk-btn-secondary-gm {
        width: 100%;
        text-align: center;
    }

    .sdk-cta-buttons-gm {
        flex-direction: column;
        align-items: stretch;
    }

    .sdk-cta-btn-primary-gm,
    .sdk-cta-btn-secondary-gm {
        width: 100%;
        text-align: center;
    }
}

/* FAQ Page */
body.faq-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

.faq-content-section-gm {
    padding: 4rem 0;
}

.faq-container-gm {
    max-width: 900px;
    margin: 0 auto;
}

.faq-category-gm {
    margin-bottom: 3rem;
}

.faq-category-title-gm {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(255, 140, 66, 0.3);
}

.faq-item-gm {
    background: rgba(26, 35, 126, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item-gm:hover {
    border-color: rgba(255, 140, 66, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.faq-item-gm.active {
    border-color: rgba(255, 140, 66, 0.5);
    box-shadow: 0 4px 24px rgba(255, 140, 66, 0.2);
}

.faq-question-gm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    user-select: none;
}

.faq-question-gm h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    flex: 1;
}

.faq-toggle-gm {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff8c42;
    margin-left: 1rem;
    transition: transform 0.3s ease;
}

.faq-item-gm.active .faq-toggle-gm {
    transform: rotate(45deg);
}

.faq-answer-gm {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer-gm p {
    padding: 0 1.5rem 1.25rem 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    font-size: 0.85rem;
}

.faq-answer-gm a {
    color: #ff8c42;
    text-decoration: none;
    transition: color 0.3s ease;
}

.faq-answer-gm a:hover {
    color: #ffa366;
    text-decoration: underline;
}

/* Contact Form */
.faq-contact-form-gm {
    margin-top: 4rem;
    padding: 3rem 2.5rem;
    background: rgba(26, 35, 126, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-contact-form-gm h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    text-align: center;
}

.faq-contact-form-gm > p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    text-align: center;
}

.contact-form-gm {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    visibility: visible !important;
    display: block !important;
}

.form-row-gm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
}

.form-group-gm {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

.contact-form-gm .form-group-gm label {
    color: #fff !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    display: block !important;
}

.contact-form-gm .form-group-gm input,
.contact-form-gm .form-group-gm textarea {
    padding: 0.625rem 1rem;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 0.85rem;
    font-family: inherit;
    transition: all 0.3s ease;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    position: relative;
    z-index: 10;
    visibility: visible !important;
    box-sizing: border-box !important;
}

.contact-form-gm .form-group-gm input:-webkit-autofill,
.contact-form-gm .form-group-gm input:-webkit-autofill:hover,
.contact-form-gm .form-group-gm input:-webkit-autofill:focus,
.contact-form-gm .form-group-gm textarea:-webkit-autofill,
.contact-form-gm .form-group-gm textarea:-webkit-autofill:hover,
.contact-form-gm .form-group-gm textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

.contact-form-gm .form-group-gm input::placeholder,
.contact-form-gm .form-group-gm textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

.contact-form-gm .form-group-gm input:focus,
.contact-form-gm .form-group-gm textarea:focus {
    outline: none;
    border-color: #ff8c42 !important;
    border: 2px solid #ff8c42 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 140, 66, 0.4), 0 0 40px rgba(255, 140, 66, 0.2) !important;
    -webkit-text-fill-color: #fff !important;
}

.contact-form-gm .form-group-gm textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form-gm button[type="submit"] {
    margin-top: 1rem;
    width: 100%;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.contact-form-gm button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 140, 66, 0.6), 0 0 50px rgba(255, 140, 66, 0.3);
}

.contact-form-gm button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.form-message-gm {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    display: none;
}

.form-message-gm.success {
    display: block;
    background: rgba(46, 213, 115, 0.15);
    border: 1px solid rgba(46, 213, 115, 0.5);
    color: #2ed573;
}

.form-message-gm.success-large {
    display: block !important;
    background: rgba(46, 213, 115, 0.2) !important;
    border: 2px solid rgba(46, 213, 115, 0.8) !important;
    color: #fff !important;
    padding: 3rem 2rem;
    margin-top: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.form-message-gm.success-large h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1rem 0 0.75rem 0;
    color: #fff !important;
    text-shadow: 0 0 20px rgba(46, 213, 115, 0.8);
}

.form-message-gm.success-large p {
    font-size: 0.875rem;
    font-weight: 400;
    color: #fff !important;
    margin: 0;
    opacity: 0.95 !important;
}

.success-icon-gm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2ed573 0%, #26d07c 100%);
    border-radius: 50%;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 10px 40px rgba(46, 213, 115, 0.4);
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.form-message-gm.error {
    display: block;
    background: rgba(255, 71, 87, 0.15);
    border: 1px solid rgba(255, 71, 87, 0.5);
    color: #ff4757;
}

@media (max-width: 768px) {
    .faq-category-title-gm {
        font-size: 1.5rem;
    }

    .faq-question-gm h3 {
        font-size: 1rem;
    }

    .faq-question-gm {
        padding: 1rem 1.25rem;
    }

    .faq-answer-gm p {
        padding: 0 1.25rem 1rem 1.25rem;
        font-size: 0.95rem;
    }

    .faq-contact-form-gm {
        padding: 2rem 1.5rem;
    }

    .faq-contact-form-gm h2 {
        font-size: 1.5rem;
    }

    .faq-contact-form-gm > p {
        font-size: 1rem;
    }

    .form-row-gm {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }
}

/* Contact Page */
body.contact-page {
    background:
        radial-gradient(circle 30vw at 100% 0, #00fefe, transparent),
        radial-gradient(circle 30vw at 20% 15vw, #9b00cc, transparent),
        linear-gradient(180deg, #3f007e 0%, #502cba 20vh, #05122b 40vh);
    background-color: #05122b;
    background-repeat: no-repeat;
    background-size: 100% 100vh, 100% 100vh, 100% 100%;
}

.contact-content-section-gm {
    padding: 4rem 0;
}

.contact-form-container-gm {
    max-width: 700px;
    margin: 0 auto 4rem auto;
    padding: 3rem 2.5rem;
    background: rgba(26, 35, 126, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 100;
    visibility: visible !important;
    display: block !important;
}

.contact-info-section-gm {
    max-width: 900px;
    margin: 0 auto;
}

.contact-info-section-gm h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 2.5rem;
}

.contact-info-grid-gm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.contact-info-card-gm {
    background: rgba(26, 35, 126, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.contact-info-card-gm:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 140, 66, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.contact-info-icon-gm {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.contact-info-card-gm h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
}

.contact-info-card-gm p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.contact-info-card-gm a {
    color: #ff8c42;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-card-gm a:hover {
    color: #ffa366;
    text-decoration: underline;
}

.faq-cta-gm {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem 2rem;
    background: rgba(26, 35, 126, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-cta-gm h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.faq-cta-gm p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .contact-form-container-gm {
        padding: 2rem 1.5rem;
    }

    .contact-info-section-gm h2 {
        font-size: 1.5rem;
    }

    .contact-info-grid-gm {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .faq-cta-gm {
        padding: 2rem 1.5rem;
    }

    .faq-cta-gm h2 {
        font-size: 1.5rem;
    }

    .faq-cta-gm p {
        font-size: 1rem;
    }
}

/* Privacy Policy Page Styles */
.privacy-page-gm {
    min-height: 100vh;
    padding: 6rem 0 4rem;
}

.privacy-header-gm {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.privacy-header-gm h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
}

.privacy-meta-gm {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.privacy-meta-gm p {
    color: #fff;
    font-size: 0.85rem;
}

.privacy-content-gm {
    max-width: 900px;
    margin: 0 auto;
}

.privacy-section-gm {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s;
}

.privacy-section-gm:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.privacy-section-gm h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(123, 44, 191, 0.3);
}

.privacy-section-gm h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.privacy-section-gm p {
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.privacy-section-gm p:last-child {
    margin-bottom: 0;
}

.privacy-section-gm ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.privacy-section-gm ul li {
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.8;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.privacy-section-gm ul li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: #7B2CBF;
    font-size: 0.8rem;
}

.privacy-section-gm strong {
    color: #fff;
    font-weight: 600;
}

.privacy-section-gm a {
    color: #00B4D8;
    text-decoration: none;
    transition: color 0.3s;
}

.privacy-section-gm a:hover {
    color: #7B2CBF;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .privacy-page-gm {
        padding: 5rem 0 3rem;
    }

    .privacy-header-gm h1 {
        font-size: 1.625rem;
    }

    .privacy-meta-gm {
        flex-direction: column;
        gap: 0.5rem;
    }

    .privacy-section-gm {
        padding: 1.5rem;
    }

    .privacy-section-gm h2 {
        font-size: 1.25rem;
    }
}

/* ============================================
   Admin Dashboard Styles (with main layout)
   ============================================ */

/* Admin Body */
.admin-body-gm {
    background: #0a0a14;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    padding-top: 60px;
    font-size: 0.8125rem;
}

/* Admin Header */
.admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(31, 31, 44, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(157, 78, 221, 0.15);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    padding: 0.75rem 1.5rem;
}

.admin-header-content {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
    margin-left: 0;
    position: relative;
    z-index: 1002;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:active {
    background: rgba(157, 78, 221, 0.2);
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    pointer-events: auto;
}

.sidebar-overlay.active {
    display: block;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-logo h1 {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

.admin-nav-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    height: 36px;
}

.admin-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.admin-nav-btn.btn-primary,
.admin-user-btn.btn-primary {
    background: rgba(157, 78, 221, 0.2) !important;
    border-color: rgba(157, 78, 221, 0.4) !important;
    color: white !important;
    font-weight: 600 !important;
}

.admin-nav-btn.btn-primary:hover,
.admin-user-btn.btn-primary:hover {
    background: rgba(157, 78, 221, 0.3) !important;
    border-color: rgba(157, 78, 221, 0.6) !important;
}

.admin-nav-btn svg {
    width: 16px;
    height: 16px;
}

.admin-user-email {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    padding: 0 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 0.5rem;
    padding-left: 1rem;
}

.admin-main-gm {
    padding: 2rem 0;
    position: relative;
    z-index: auto;
}

.admin-main-gm .container {
    max-width: none;
    padding: 0;
}

.admin-dashboard-layout-gm {
    display: block;
    margin-top: 0;
    min-height: calc(100vh - 60px);
    margin-left: 240px;
    max-width: none;
}

.admin-sidebar-gm {
    background: rgba(45, 45, 55, 0.95);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    overflow-y: auto;
    border-radius: 0;
    padding-top: 60px;
    z-index: 999;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
}

/* Admin sidebar scrollbar styling */
.admin-sidebar-gm::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar-gm::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.admin-sidebar-gm::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.admin-sidebar-gm::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Hide mobile-only nav items on desktop */
.mobile-only-nav {
    display: none;
}

/* Sidebar logo - hidden by default, shown on mobile */
.sidebar-logo-mobile {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}

.sidebar-logo-mobile svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.sidebar-logo-mobile h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.admin-nav-gm {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0;
}

.admin-nav-link-gm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
    font-weight: 500;
    position: relative;
}

.admin-nav-link-gm:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.admin-nav-link-gm.active {
    background: rgba(157, 78, 221, 0.15);
    color: #C77DFF;
}

.admin-nav-link-gm .nav-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.admin-nav-link-gm .nav-text {
    flex: 1;
}

/* Hierarchical Navigation */
.nav-icon-svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.admin-nav-section {
    margin: 0;
}

.admin-nav-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.admin-nav-section-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.admin-nav-section-toggle.active {
    color: rgba(255, 255, 255, 0.95);
}

.admin-nav-section-toggle .nav-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.admin-nav-section-toggle.active .nav-arrow {
    transform: rotate(180deg);
}

.admin-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
}

.admin-nav-sublink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem 0.625rem 3rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 400;
    transition: all 0.2s ease;
}

.admin-nav-sublink:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.admin-nav-sublink.active {
    background: rgba(157, 78, 221, 0.12);
    color: #C77DFF;
}

.nav-status-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    margin-left: auto;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.admin-content-gm {
    background: transparent;
    padding: 2rem;
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
}

.admin-content-gm h1 {
    font-size: 1.375rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* Revenue Cards */
.revenue-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

.revenue-card {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.revenue-card h3 {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    margin: 0;
    background: rgba(50, 50, 60, 0.9);
    padding: 0.75rem 1rem;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.revenue-amount {
    font-size: 1.625rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
    background: rgba(20, 20, 30, 0.4);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Revenue Chart Section */
.revenue-chart-section {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.25rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title .highlight {
    color: #e63946;
    font-weight: 700;
}

.chart-container {
    height: 250px;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 8px;
}

/* Revenue Summary Table */
.revenue-summary-section {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0;
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.revenue-summary-section .section-title {
    padding: 1rem 1.5rem;
    margin: 0;
    background: rgba(20, 20, 30, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.revenue-summary-table {
    width: 100%;
    border-collapse: collapse;
}

.revenue-summary-table thead th {
    background: rgba(50, 50, 60, 0.9);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    padding: 0.875rem 1.5rem;
    text-align: left;
    font-size: 0.7rem;
    border: none;
}

.revenue-summary-table tbody td {
    padding: 0.875rem 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(20, 20, 30, 0.3);
    border: none;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    margin: 0;
}

/* Admin Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    min-height: 40px;
    background: rgba(157, 78, 221, 0.2);
    color: #C77DFF;
    border: 1px solid rgba(157, 78, 221, 0.4);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8375rem;
    font-weight: 600;
    line-height: 1;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn:hover {
    background: rgba(157, 78, 221, 0.3);
    border-color: rgba(157, 78, 221, 0.6);
    text-decoration: none;
}

.btn-primary {
    background: rgba(157, 78, 221, 0.4);
    border-color: rgba(157, 78, 221, 0.6);
}

.btn-primary:hover {
    background: rgba(157, 78, 221, 0.6);
    border-color: #9D4EDD;
    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3);
}

.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    min-height: 32px;
    line-height: 1;
}

.btn-danger {
    background: rgba(220, 38, 38, 0.2);
    color: #EF4444;
    border-color: rgba(220, 38, 38, 0.4);
}

.btn-danger:hover {
    background: rgba(220, 38, 38, 0.3);
    border-color: rgba(220, 38, 38, 0.6);
}

/* Pagination */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
}

.pagination a {
    padding: 0.5rem 1rem;
    background: rgba(157, 78, 221, 0.2);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination a:hover {
    background: rgba(157, 78, 221, 0.3);
    color: #C77DFF;
}

.pagination a.active {
    background: rgba(157, 78, 221, 0.4);
    color: #C77DFF;
    border-color: rgba(157, 78, 221, 0.6);
}

/* Admin Form */
.admin-form {
    max-width: 800px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.8125rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 1rem;
    background: rgba(20, 20, 30, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    transition: all 0.2s ease;
    line-height: 1.5;
    box-sizing: border-box;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select {
    height: auto;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
    background: rgba(20, 20, 40, 0.8);
    box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.1);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.alert-error {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #FCA5A5;
}

.actions {
    display: flex;
    gap: 0.5rem;
}

.actions form {
    display: inline;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stat-card:hover {
    background: rgba(157, 78, 221, 0.15);
    border-color: rgba(157, 78, 221, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(157, 78, 221, 0.3);
}

.stat-card h3 {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-number {
    font-size: 2.5rem;
    color: #C77DFF;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 8px rgba(157, 78, 221, 0.5);
}

.recent-games {
    margin-top: 2rem;
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.recent-games .section-title {
    padding: 1rem 1.5rem;
    margin: 0;
    background: rgba(20, 20, 30, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-table {
    width: 100%;
    min-width: 700px;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead {
    background: rgba(50, 50, 60, 0.9);
}

.admin-table th {
    padding: 0.875rem 1.5rem;
    text-align: left;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    border: none;
}

.admin-table td {
    padding: 0.875rem 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(20, 20, 30, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sticky first column for all screen sizes */
.admin-table thead th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: rgba(50, 50, 60, 0.9) !important;
    z-index: 10;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

.admin-table tbody td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: rgba(20, 20, 30, 0.3) !important;
    z-index: 5;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

.admin-table tbody tr {
    transition: all 0.2s ease;
}

.admin-table tbody tr:hover {
    background: rgba(157, 78, 221, 0.1);
}

.admin-table tbody tr:hover td:first-child {
    background: rgba(157, 78, 221, 0.15) !important;
}

.admin-table a {
    color: #9D4EDD;
    text-decoration: none;
    transition: color 0.2s ease;
}

.admin-table a:hover:not(.btn) {
    color: #C77DFF;
    text-decoration: underline;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem;
    min-height: 32px;
    border-radius: 16px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.status-published {
    background: rgba(46, 213, 115, 0.2);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.3);
}

.status-pending {
    background: rgba(255, 159, 67, 0.2);
    color: #ff9f43;
    border: 1px solid rgba(255, 159, 67, 0.3);
}

.status-draft {
    background: rgba(99, 110, 114, 0.2);
    color: #636e72;
    border: 1px solid rgba(99, 110, 114, 0.3);
}

/* Upload Form Styles */
.page-breadcrumb {
    font-size: 1.375rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-weight: 400;
}

.breadcrumb-highlight {
    color: #e63946;
    font-weight: 600;
}

.upload-step {
    width: 100%;
}

.upload-form-card {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 3rem;
    width: 100%;
}

.form-control-lg {
    width: 100%;
    padding: 1rem;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

.form-control-lg:focus {
    outline: none;
    border-color: #9d4edd;
}

.btn-add-game {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #d64545;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-add-game:hover {
    background: #c23838;
}

.upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.upload-form-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
}

.upload-left-column {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
}

.upload-right-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-control {
    width: 100%;
    padding: 0.625rem 1rem;
    background: rgba(20, 20, 30, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    line-height: 1.5;
    box-sizing: border-box;
    height: auto;
}

.form-control:focus {
    outline: none;
    border-color: #9d4edd;
}

.form-control:read-only {
    background: rgba(20, 20, 30, 0.4);
    color: rgba(255, 255, 255, 0.6);
}

textarea.form-control {
    font-family: inherit;
    resize: vertical;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8125rem;
    font-weight: 500;
}

.min-label, .max-label {
    color: #e63946;
    font-weight: 400;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.file-upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    background: rgba(20, 20, 30, 0.4);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-upload-zone:hover {
    border-color: #9d4edd;
}

.file-upload-zone.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05);
}

.file-upload-zone svg {
    margin-bottom: 1rem;
}

.file-upload-zone p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    margin: 0;
}

.input-with-button {
    position: relative !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
}

.input-with-button > div {
    position: relative !important;
    flex: 1 !important;
}

.input-with-button > .form-control {
    position: relative !important;
    flex: 1 !important;
    width: 100% !important;
    padding-right: 44px !important;
}

.input-with-button > div > .form-control {
    padding-right: 44px !important;
}

.input-with-button > div .btn-icon {
    position: absolute !important;
    top: 1px !important;
    bottom: 1px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    z-index: 10 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.input-with-button > div .btn-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.input-with-button > div .btn-icon:hover {
    background: rgba(40, 40, 50, 0.5) !important;
    border-left-color: #9d4edd !important;
    color: #fff !important;
    transform: none !important;
}

/* Single icon button or last icon button */
.input-with-button > div .btn-icon:only-of-type,
.input-with-button > div .btn-icon:last-of-type {
    right: 4px !important;
}

/* First icon button when there are multiple */
.input-with-button > div .btn-icon:first-of-type:not(:last-of-type) {
    right: 40px !important;
}

/* For OLD structure - buttons as direct children of .input-with-button */
.input-with-button > .btn-icon {
    position: absolute !important;
    top: 1px !important;
    bottom: 1px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    z-index: 10 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.input-with-button > .btn-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.input-with-button > .btn-icon:hover {
    background: rgba(40, 40, 50, 0.5) !important;
    border-left-color: #9d4edd !important;
    color: #fff !important;
    transform: none !important;
}

/* Single icon button or last icon button */
.input-with-button > .btn-icon:only-of-type,
.input-with-button > .btn-icon:last-of-type {
    right: 4px !important;
}

/* First icon button when there are multiple */
.input-with-button > .btn-icon:first-of-type:not(:last-of-type) {
    right: 40px !important;
}

.input-with-button .btn-verify {
    flex-shrink: 0 !important;
    margin: 0 !important;
    height: 36px !important;
    padding: 0 1rem !important;
}

.btn-icon {
    padding: 0.75rem;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(30, 30, 40, 0.8);
    border-color: #9d4edd;
}

.btn-icon-sm {
    padding: 0.375rem;
}

.btn-verify {
    padding: 0.75rem 1rem;
    background: #a855f7;
    color: white;
    border: 1px solid #a855f7;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
}

.btn-verify:hover {
    background: #9333ea;
}

/* Number Input with Up/Down Controls */
.number-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

.number-input-wrapper .form-control {
    flex: 1;
    padding-right: 2.5rem !important;
    -moz-appearance: textfield;
}

.number-input-wrapper .form-control::-webkit-outer-spin-button,
.number-input-wrapper .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-controls {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    display: flex;
    flex-direction: column;
    width: 2.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.number-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
}

.number-btn:hover {
    background: rgba(157, 78, 221, 0.2);
    color: #9d4edd;
}

.number-btn:active {
    background: rgba(157, 78, 221, 0.3);
}

.number-btn-up {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.number-btn svg {
    pointer-events: none;
}

.toggle-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100, 100, 110, 0.5);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #9d4edd;
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #d64545;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
    height: 34px;
    box-sizing: border-box;
}

.btn-save:hover {
    background: #c23838;
}

.btn-save svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: #a855f7;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
    height: 34px;
    box-sizing: border-box;
}

.btn-secondary:hover {
    background: #9333ea;
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    height: 34px;
    box-sizing: border-box;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.image-upload-group {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

.image-upload-group label {
    display: block;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8125rem;
    font-weight: 600;
}

.image-upload-zone,
.upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    background: rgba(20, 20, 30, 0.4);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-upload-zone:hover,
.upload-zone:hover {
    border-color: #9d4edd;
}

.image-upload-zone.error,
.upload-zone.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05);
}

.image-upload-zone p,
.upload-zone p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    margin: 0.5rem 0 0 0;
}

.image-upload-zone img,
.upload-zone img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

.file-upload-zone img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

.activation-rules {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
}

.activation-rules h3 {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.rule-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}

.rule-item svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    opacity: 0.7;
}

.rule-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    line-height: 1.5;
}

.rule-item.warning svg {
    color: #f59e0b;
}

.link-purple {
    color: #a855f7;
    text-decoration: none;
}

.link-purple:hover {
    text-decoration: underline;
}

.game-id-box {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-id-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-weight: 600;
}

.game-id-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-family: monospace;
}

.cache-box {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.cache-label {
    background: rgba(100, 100, 110, 0.4);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cache-url {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-family: monospace;
    word-break: break-all;
}

.sdk-buttons {
    display: flex;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem 0;
}

.btn-purple-outline {
    padding: 0.4rem 0.65rem;
    background: transparent;
    border: 1px solid #a855f7;
    color: #a855f7;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-purple-outline:hover {
    background: rgba(168, 85, 247, 0.1);
}

.sdk-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.btn-sdk {
    padding: 0.5rem 0.75rem;
    background: #d64545;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-sdk:hover {
    background: #c23838;
}

/* Multi-select dropdown */
.multi-select-wrapper {
    position: relative;
}

.multi-select-input {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.625rem 1rem;
    min-height: auto;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    box-sizing: border-box;
}

.selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #9d4edd;
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
}

.selected-tag .remove-tag {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    margin-left: 0.25rem;
}

.category-search {
    flex: 1;
    min-width: 120px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    outline: none;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background: rgba(30, 30, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    max-height: 300px;
    overflow: hidden;
    z-index: 1000;
}

.dropdown-search {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-search input {
    width: 100%;
    padding: 0.5rem;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

.dropdown-options {
    max-height: 240px;
    overflow-y: auto;
}

.dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dropdown-option:hover {
    background: rgba(157, 78, 221, 0.15);
}

.dropdown-option input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #9d4edd;
    border-radius: 4px;
}

.dropdown-option span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

/* Tags input */
.tags-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tags-input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    outline: none;
}

.tags-input:focus {
    border-color: rgba(157, 78, 221, 0.6);
    background: rgba(20, 20, 40, 0.8);
    box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.1);
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 28px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: #7b2cbf;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

.tag-chip .remove-tag {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1;
    padding: 0;
    margin: 0 0 0 0.25rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 1em;
}

.tag-chip .remove-tag:hover {
    opacity: 1;
}

/* Custom Modal */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: rgba(30, 30, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
}

.modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 2rem;
    text-align: center;
}

.modal-icon {
    margin-bottom: 1.5rem;
}

.modal-body p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    margin: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
}

.modal-footer .btn {
    min-width: 100px;
}

.clickable-box {
    cursor: pointer;
    transition: background 0.2s ease;
}

.clickable-box:hover {
    background: rgba(30, 30, 40, 0.8) !important;
}

/* Error message styles */
.error-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.8125rem;
}

.error-message svg {
    flex-shrink: 0;
}

.form-control-lg.error,
.form-control.error,
.tags-input.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05);
}

.form-control-lg.error:focus,
.form-control.error:focus,
.tags-input.error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Field error messages */
.field-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.875rem;
}

.field-error svg {
    flex-shrink: 0;
}

/* Simplified category dropdown display */
.multi-select-display {
    background: rgba(20, 20, 30, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px;
    padding: 0.625rem 1rem;
    height: auto;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.multi-select-display:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.multi-select-display.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05);
}

.placeholder-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.placeholder-text.has-value {
    color: rgba(255, 255, 255, 0.9);
}

.dropdown-arrow {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.multi-select-wrapper.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Toast notification */
.toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(74, 222, 128, 0.95);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    transition: bottom 0.3s ease;
}

.toast.warning {
    background: rgba(251, 146, 60, 0.95);
}

.toast.show {
    bottom: 30px;
}

.toast svg {
    flex-shrink: 0;
}

/* Make all buttons smaller */
.btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.btn-add-game {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}


/* Verify Game button - match text input height */
/* Duplicate rules removed - see lines 6046-6065 and 6020-6031 for btn-verify and btn-icon */


/* Textarea with emoji picker */
.textarea-with-emoji {
    position: relative;
}

.emoji-picker-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(157, 78, 221, 0.2);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.625rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
}

.emoji-picker-btn:hover {
    background: rgba(157, 78, 221, 0.3);
    border-color: rgba(157, 78, 221, 0.5);
}

.emoji-picker {
    position: absolute;
    top: 3rem;
    right: 0;
    background: rgba(30, 30, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 320px;
}

.emoji-picker-header {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}

.emoji-picker-header span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 600;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.emoji-grid::-webkit-scrollbar {
    width: 6px;
}

.emoji-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.emoji-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.emoji-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.emoji-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    padding: 0.375rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
    line-height: 1;
}

.emoji-btn:hover {
    background: rgba(157, 78, 221, 0.2);
}

/* Responsive Dashboard */
@media (max-width: 1024px) {
    .admin-dashboard-layout-gm {
        margin-left: 0;
        padding: 1rem;
    }

    .admin-sidebar-gm {
        width: 200px;
    }

    .admin-content-gm {
        margin-left: 200px;
    }

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

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

    .admin-header {
        padding: 0.75rem 1.5rem;
    }

    .admin-header-content {
        padding: 0;
    }

    .admin-header h1 {
        font-size: 1.3rem;
    }

    /* Upload form responsive */
    .upload-form-layout {
        grid-template-columns: 1fr 350px;
        gap: 1.5rem;
    }

    .upload-left-column,
    .upload-right-column {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .admin-body-gm {
        font-size: 0.75rem;
    }

    .admin-header {
        padding: 0.75rem 1rem;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-left: 0;
        padding: 0.5rem;
        margin-right: 0;
    }

    .hide-mobile {
        display: none !important;
    }

    /* Extra specific rule to hide Walkthroughs button */
    .admin-nav-buttons a.admin-nav-btn.hide-mobile {
        display: none !important;
    }

    .admin-header-content {
        padding: 0;
        flex-direction: row;
        gap: 0.5rem;
    }

    .admin-logo h1 {
        font-size: 0.8375rem;
    }

    .admin-logo svg {
        width: 26px;
        height: 26px;
    }

    .admin-nav-buttons {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }

    .admin-user-email {
        font-size: 0.7rem;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-nav-btn {
        padding: 0.5rem 0.75rem;
        gap: 0.35rem;
    }

    .admin-nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .admin-dashboard-layout-gm {
        margin-left: 0;
        padding: 0.5rem;
    }

    .admin-sidebar-gm {
        position: fixed;
        left: -280px;
        width: 280px;
        transition: left 0.3s ease;
        z-index: 1050;
        pointer-events: auto;
    }

    .admin-sidebar-gm.active {
        left: 0;
    }

    /* Show mobile-only nav items on mobile */
    .mobile-only-nav {
        display: flex !important;
    }

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

    .admin-content-gm {
        margin-left: 0;
        padding: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .revenue-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .admin-content-gm h1 {
        font-size: 1.3rem;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: thin;
        scrollbar-color: rgba(157, 78, 221, 0.3) transparent;
    }

    /* Webkit scrollbar styling */
    .table-responsive::-webkit-scrollbar {
        height: 6px;
    }

    .table-responsive::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(157, 78, 221, 0.3);
        border-radius: 3px;
    }

    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: rgba(157, 78, 221, 0.5);
    }

    .admin-table {
        font-size: 0.65rem;
        min-width: 600px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.625rem 0.5rem;
        white-space: nowrap;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .admin-table thead th:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        background: rgba(50, 50, 60, 0.9) !important;
        z-index: 10;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    }

    .admin-table tbody td:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        background: rgba(30, 30, 40, 0.95) !important;
        z-index: 5;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    }

    /* Recent Games section */
    .recent-games {
        margin-left: 0;
        margin-right: 0;
        border-radius: 8px;
        overflow: hidden;
    }

    .recent-games .section-title {
        font-size: 1.025rem;
        padding: 0.875rem 1rem;
    }

    .recent-games .table-responsive {
        padding: 0 1rem 1rem 1rem;
    }

    /* Upload form responsive */
    .upload-form-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        display: flex;
        flex-direction: column;
    }

    .upload-left-column {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        order: 2;
    }

    .upload-right-column {
        padding: 1rem;
        order: 1;
    }

    .form-actions {
        order: 3;
    }

    .upload-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .page-breadcrumb {
        font-size: 1.3rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: row;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .form-actions .btn {
        flex: 1;
        min-width: 140px;
    }

    .input-with-button {
        flex-wrap: wrap;
    }

    .btn-verify {
        width: 100%;
        margin-top: 0.5rem;
    }

    .emoji-picker {
        right: auto;
        left: 0;
        max-width: 280px;
    }

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

@media (max-width: 480px) {
    .admin-body-gm {
        font-size: 0.75rem;
    }

    .admin-header {
        padding: 0.75rem 0.75rem;
    }

    .admin-header-content {
        padding: 0;
    }

    .admin-logo h1 {
        font-size: 0.8375rem;
    }

    .admin-logo svg {
        width: 20px;
        height: 20px;
    }

    .mobile-menu-btn {
        padding: 0.5rem;
        margin-right: 0;
        margin-left: 0;
    }

    .mobile-menu-btn svg {
        width: 20px;
        height: 20px;
    }

    .admin-user-email {
        font-size: 0.7rem;
        max-width: 60px;
    }

    .admin-nav-btn {
        padding: 0.375rem;
    }

    .admin-nav-btn svg {
        width: 18px;
        height: 18px;
    }

    .admin-content-gm {
        padding: 0.75rem;
    }

    .admin-content-gm h1 {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.025rem;
    }

    .page-breadcrumb {
        font-size: 1.1rem;
    }

    .stat-card,
    .revenue-card {
        padding: 1rem;
    }

    .stat-number,
    .revenue-amount {
        font-size: 1.375rem;
    }

    .upload-left-column,
    .upload-right-column {
        padding: 0.75rem;
    }

    .form-control,
    .tags-input,
    textarea {
        font-size: 0.875rem;
    }

    .btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.75rem;
    }

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

    .chart-container {
        height: 200px;
    }

    .admin-table {
        font-size: 0.65rem;
    }

    .revenue-summary-table {
        font-size: 0.65rem;
    }
}
/* Admin Layout */
.admin-login-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.login-box {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.login-box h1 {
    text-align: center;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.login-box h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #333;
}

.login-form {
    margin-top: 2rem;
}

.login-hint {
    text-align: center;
    margin-top: 1rem;
    color: #888;
    font-size: 0.9rem;
}

/* Admin Header */
.admin-header {
    background: #2c3e50;
    color: #fff;
    padding: 0.75rem 1.5rem;
}

.admin-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.admin-logo svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.admin-header h1 {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    font-weight: 600;
}

.admin-nav-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.admin-nav-buttons > * {
    margin: 0 !important;
    align-self: center !important;
}

.admin-nav-btn,
.admin-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.375rem 0.75rem !important;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    transition: background 0.2s ease;
    white-space: nowrap;
    line-height: 1 !important;
    height: 30px !important;
    box-sizing: border-box !important;
    cursor: pointer;
    vertical-align: middle !important;
    transform: none !important;
}

.admin-nav-btn.btn-primary {
    background: rgba(157, 78, 221, 0.2);
    border-color: rgba(157, 78, 221, 0.4);
}

.admin-nav-btn.btn-primary:hover {
    background: rgba(157, 78, 221, 0.3);
    border-color: rgba(157, 78, 221, 0.6);
    transform: none !important;
}

.admin-nav-btn svg,
.admin-user-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Admin Container */
.admin-container {
    display: flex;
    min-height: calc(100vh - 70px);
}

/* Admin Sidebar */
.admin-sidebar {
    width: 250px;
    background: #34495e;
    color: #fff;
    padding: 2rem 0;
}

.admin-nav {
    display: flex;
    flex-direction: column;
}

.admin-nav a {
    color: #fff;
    text-decoration: none;
    padding: 1rem 2rem;
    transition: background 0.3s;
}

.admin-nav a:hover {
    background: #2c3e50;
}

/* Admin Main Content */
.admin-main {
    flex: 1;
    background: #ecf0f1;
}

.admin-content {
    padding: 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header .btn {
    padding: 0 1rem !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 0.85rem;
    line-height: 1;
    box-sizing: border-box;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.3);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(157, 78, 221, 0.15);
    border-color: rgba(157, 78, 221, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(157, 78, 221, 0.3);
}

.stat-card h3 {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-number {
    font-size: 2.75rem;
    font-weight: 700;
    color: #C77DFF;
    text-shadow: 0 2px 8px rgba(157, 78, 221, 0.5);
}

/* Admin Table */
.admin-table {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-table thead {
    background: #34495e;
    color: #fff;
}

.admin-table th,
.admin-table td {
    padding: 1rem;
    text-align: left;
}

.admin-table tbody tr {
    border-bottom: 1px solid #ecf0f1;
}

.admin-table tbody tr:hover {
    background: #f8f9fa;
}

.admin-table .actions {
    display: flex;
    gap: 0.5rem;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-published {
    background: #2ecc71;
    color: #fff;
}

.status-pending {
    background: #f39c12;
    color: #fff;
}

.status-rejected {
    background: #e74c3c;
    color: #fff;
}

/* Forms */
.admin-form {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(20, 20, 30, 0.4);
    color: #fff;
    font-size: 0.8125rem;
    font-family: inherit;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group input[type="password"]::placeholder,
.form-group input[type="url"]::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="url"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
    background: rgba(20, 20, 30, 0.6);
    box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.1);
}

.form-group input[readonly] {
    background: rgba(20, 20, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    opacity: 0.7;
}

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

.form-group input[type="file"] {
    width: 100%;
    padding: 0.5rem 0;
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    line-height: 1.4;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: space-between;
    align-items: center;
}

.form-actions .btn-cancel {
    margin-left: auto;
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.alert-error {
    background: #fee;
    color: #c33;
    border: 1px solid #fcc;
}

.alert-success {
    background: #efe;
    color: #3c3;
    border: 1px solid #cfc;
}

/* Buttons */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-sm.btn-icon {
    padding: 0 !important;
    font-size: inherit;
}

.btn-danger {
    background: #e74c3c;
}

.btn-danger:hover {
    background: #c0392b;
}

.btn-block {
    width: 100%;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
}

.pagination a {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination a:hover,
.pagination a.active {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}

/* Recent Games Table */
.recent-games {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.recent-games h2 {
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-container {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        padding: 1rem 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Settings Page Styles */
.settings-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.settings-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-section h2 {
    margin-top: 0;
    margin-bottom: 24px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.settings-section h3 {
    margin-top: 32px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.avatar-upload {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-preview svg {
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.4);
}

.social-links-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .settings-container {
        padding: 12px;
    }

    .settings-section {
        padding: 20px;
    }
}

/* Admin Header User Dropdown */
.admin-user-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.admin-user-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.admin-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.admin-user-btn svg:first-child {
    opacity: 0.9;
    width: 16px;
    height: 16px;
}

.admin-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(157, 78, 221, 0.6);
}

.admin-user-name {
    font-weight: 500;
}

.admin-user-btn .dropdown-arrow {
    transition: transform 0.2s;
    opacity: 0.7;
    width: 14px;
    height: 14px;
}

.admin-user-dropdown.active .admin-user-btn .dropdown-arrow {
    transform: rotate(180deg);
}

.admin-user-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: rgba(20, 20, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

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

.admin-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.admin-user-menu-item:hover {
    background: rgba(157, 78, 221, 0.2);
}

.admin-user-menu-section {
    position: relative;
}

.admin-user-menu-toggle {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    justify-content: space-between;
}

.admin-user-menu-toggle .submenu-arrow {
    transition: transform 0.2s ease;
    opacity: 0.7;
    margin-left: auto;
}

.admin-user-menu-toggle.active .submenu-arrow {
    transform: rotate(90deg);
}

.admin-user-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-left: 1.5rem;
    margin-top: 0.25rem;
}

.admin-user-submenu.active {
    max-height: 200px;
}

.admin-user-submenu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.admin-user-submenu-item:hover {
    background: rgba(157, 78, 221, 0.15);
    color: #fff;
    transform: translateX(4px);
}

.admin-user-submenu-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.admin-user-menu-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Custom File Upload Component */
.custom-file-upload {
    position: relative;
}

.file-upload-area {
    border: 2px dashed rgba(157, 78, 221, 0.4);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(20, 20, 30, 0.3);
}

.file-upload-area:hover,
.file-upload-area.drag-over {
    border-color: rgba(157, 78, 221, 0.8);
    background: rgba(157, 78, 221, 0.1);
    transform: translateY(-2px);
}

.file-upload-area.has-file {
    border-color: rgba(46, 204, 113, 0.6);
    background: rgba(46, 204, 113, 0.05);
}

.file-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: rgba(157, 78, 221, 0.7);
}

.file-upload-area.has-file .file-upload-icon {
    color: rgba(46, 204, 113, 0.7);
}

.file-upload-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.file-upload-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.file-upload-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.file-name-display {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(157, 78, 221, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.file-name-display svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.remove-file-btn {
    background: rgba(239, 68, 68, 0.2);
    border: none;
    color: #ef4444;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-file-btn:hover {
    background: rgba(239, 68, 68, 0.3);
}

.remove-file-btn svg {
    width: 16px;
    height: 16px;
}

/* Settings Page Improvements */
.settings-container h1 {
    color: #fff;
    font-size: 1.375rem;
    margin-bottom: 2rem;
    font-weight: 600;
}

.settings-section .btn {
    background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%);
    color: #fff;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.settings-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(157, 78, 221, 0.3);
}

/* Form Validation Styles */
.field-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.875rem;
    animation: slideDown 0.3s ease;
}

.field-error svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error,
.custom-file-upload .file-upload-area.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

.form-group input.error:focus,
.form-group textarea.error:focus,
.form-group select.error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Games Table Improvements */
.games-table {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.3);
    overflow: visible;
}

.games-table tbody {
    overflow: visible;
}

.games-table thead {
    background: rgba(20, 20, 30, 0.8);
}

.games-table th {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #C77DFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.games-table th:nth-child(1) {
    width: 10%;
}

.games-table th:nth-child(2) {
    width: 35%;
}

.games-table th:nth-child(3) {
    width: 15%;
}

.games-table th:nth-child(4) {
    width: 15%;
}

.games-table th:nth-child(5) {
    width: 25%;
}

.games-table td {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    vertical-align: middle;
    position: relative;
    overflow: visible;
}

.games-table tbody tr {
    border-bottom: 1px solid rgba(157, 78, 221, 0.1);
    transition: background 0.2s ease;
}

.games-table tbody tr:hover {
    background: rgba(157, 78, 221, 0.08);
}

.game-id {
    font-family: monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: all 0.2s ease;
}

.game-id:hover {
    color: rgba(157, 78, 221, 0.8);
    background: rgba(157, 78, 221, 0.1);
    border-radius: 4px;
}

.game-id-text {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.game-id-copied {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #4caf50;
    font-weight: 600;
    font-size: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.game-id.copied .game-id-text {
    opacity: 0;
}

.game-id.copied .game-id-copied {
    opacity: 1;
}

.game-title-link {
    color: #C77DFF;
    text-decoration: none;
    font-weight: 500;
}

.game-title-link:hover {
    text-decoration: underline;
}

/* Status Badge Updates */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.75rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    height: 28px;
    min-width: 80px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.status-pending {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: #fff;
    border-color: rgba(243, 156, 18, 0.4);
}

.status-active {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #fff;
    border-color: rgba(46, 204, 113, 0.4);
}

.status-rejected {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    border-color: rgba(231, 76, 60, 0.4);
}

.status-inactive {
    background: rgba(149, 165, 166, 0.8);
    color: #fff;
    border-color: rgba(149, 165, 166, 0.5);
}

.status-draft {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: #fff;
    border-color: rgba(149, 165, 166, 0.4);
}

/* Source Badge */
.source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.75rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    height: 28px;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    border: 1px solid;
}

.source-approved {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.4);
}

.source-pending {
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    border-color: rgba(243, 156, 18, 0.4);
}

.source-draft {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
    border-color: rgba(149, 165, 166, 0.4);
}

.source-deleted {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.4);
}

/* Action Buttons */
.games-table .actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Action buttons in tables (Edit, Delete, Approve) */
.actions .btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    justify-content: center !important;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transform: none !important;
}

.actions .btn-icon:focus {
    outline: none;
    box-shadow: none;
}

.actions .btn-icon svg {
    flex-shrink: 0;
    transition: all 0.3s ease;
    margin: 0 auto;
    pointer-events: none;
    width: 18px !important;
    height: 18px !important;
}

.actions .btn-icon .btn-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0;
    pointer-events: none;
    white-space: nowrap;
}

.actions .btn-icon:hover {
    gap: 0.5rem !important;
    padding: 0 0.875rem !important;
    width: auto !important;
    min-width: 36px !important;
}

.actions .btn-icon:hover .btn-text {
    max-width: 150px;
    opacity: 1;
    pointer-events: auto;
}

.btn-edit {
    background: rgba(157, 78, 221, 0.2);
    color: #C77DFF;
    border: 1px solid rgba(157, 78, 221, 0.4);
    box-shadow: none;
    outline: none;
}

.btn-edit:hover {
    background: rgba(157, 78, 221, 0.3);
    border-color: rgba(157, 78, 221, 0.6);
    box-shadow: none;
    outline: none;
}

.btn-delete {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.4);
    box-shadow: none;
    outline: none;
}

.btn-delete:hover {
    background: rgba(231, 76, 60, 0.3);
    border-color: rgba(231, 76, 60, 0.6);
    box-shadow: none;
    outline: none;
}

.btn-success {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    box-shadow: none;
    outline: none;
}

.btn-success:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: rgba(46, 204, 113, 0.6);
    box-shadow: none;
    outline: none;
}

.btn-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

.btn-review {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    justify-content: center !important;
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.4);
    box-shadow: none;
    outline: none;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    transform: none !important;
}

.btn-review:hover {
    background: rgba(243, 156, 18, 0.3);
    border-color: rgba(243, 156, 18, 0.6);
    box-shadow: none;
    outline: none;
    transform: none !important;
}

.text-muted {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    font-style: italic;
}

/* Device Type Options */
.device-type-options {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    height: 44px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.device-type-options input[type="radio"] {
    margin: 0;
    padding: 0;
}

.device-type-box {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 !important;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
    min-width: 0;
    outline: none;
    box-shadow: none;
    flex-wrap: nowrap;
    line-height: 44px;
}

.device-type-box:last-child {
    border-right: none;
}

.device-type-box:hover {
    background: rgba(255, 255, 255, 0.08);
}

.device-type-box:focus {
    outline: none;
    box-shadow: none;
}

.device-type-box svg {
    opacity: 0.7;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-self: center;
}

.device-type-box span {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
    margin-left: 0.25rem;
}

input[type="radio"]:checked + .device-type-box {
    background: rgba(157, 78, 221, 0.2);
    color: #C77DFF;
}

input[type="radio"]:checked + .device-type-box svg {
    opacity: 1;
    stroke: #C77DFF;
}

@media (max-width: 768px) {
    .device-type-options {
        flex-direction: column;
        height: auto;
    }

    .device-type-box {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0.75rem 1rem;
    }

    .device-type-box:last-child {
        border-bottom: none;
    }
}

/* Confirmation Dialog */
.confirm-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.confirm-dialog-overlay.active {
    display: flex;
    opacity: 1;
}

.confirm-dialog {
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.98) 0%, rgba(20, 20, 30, 0.98) 100%);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.confirm-dialog-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.confirm-dialog-header svg {
    color: #e74c3c;
}

.confirm-dialog-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #fff;
}

.confirm-dialog-body {
    text-align: center;
    margin-bottom: 2rem;
}

.confirm-dialog-body p {
    margin: 0 0 0.5rem 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.confirm-dialog-body strong {
    color: #C77DFF;
}

.confirm-warning {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.9rem !important;
}

.confirm-dialog-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirm-dialog-actions .btn {
    flex: 1;
    max-width: 150px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Category Display */
.category-display {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: help;
}

.category-main {
    color: #ecf0f1;
}

.category-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    background: rgba(157, 78, 221, 0.2);
    border: 1px solid rgba(157, 78, 221, 0.4);
    border-radius: 10px;
    color: #9D4EDD;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.category-display:hover .category-more {
    background: rgba(157, 78, 221, 0.3);
    border-color: rgba(157, 78, 221, 0.6);
}

/* Category Tooltip */
.category-tooltip {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    padding: 0.5rem 0;
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.98) 0%, rgba(20, 20, 30, 0.98) 100%);
    border: 1px solid rgba(157, 78, 221, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 10000;
    min-width: 180px;
    max-width: 300px;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.category-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(157, 78, 221, 0.4);
}

.category-tooltip::after {
    content: '';
    position: absolute;
    bottom: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(30, 30, 40, 0.98);
}

.category-display:hover .category-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.category-tooltip-item {
    padding: 0.6rem 1rem;
    color: #ecf0f1;
    font-size: 0.875rem;
    line-height: 1.4;
    border-bottom: 1px solid rgba(157, 78, 221, 0.15);
    transition: background 0.15s ease;
}

.category-tooltip-item:first-child {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.category-tooltip-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.category-tooltip-item:hover {
    background: rgba(157, 78, 221, 0.15);
}

/* Button states for confirmation dialog and request review */
.confirm-dialog-actions .btn:disabled,
.btn.request-review-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.confirm-dialog-actions .btn.loading svg.spinner,
.btn.request-review-btn.loading svg.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.confirm-dialog-actions .btn.success,
.btn.request-review-btn.success {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    border-color: #2ecc71;
}

.confirm-dialog-actions .btn.loading,
.confirm-dialog-actions .btn.success,
.btn.request-review-btn.loading,
.btn.request-review-btn.success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.confirm-dialog-actions .btn.loading svg,
.confirm-dialog-actions .btn.success svg,
.btn.request-review-btn.loading svg,
.btn.request-review-btn.success svg {
    flex-shrink: 0;
}

/* Responsive Design for Games Table */
@media (max-width: 768px) {
    /* Reduce content padding on mobile */
    .admin-content-gm {
        padding: 0.5rem !important;
    }

    /* Hide table header */
    .games-table thead {
        display: none;
    }

    /* Convert table to card layout */
    .games-table,
    .games-table tbody {
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

    .games-table tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 0.75rem;
        border: 1px solid rgba(157, 78, 221, 0.3);
        border-radius: 8px;
        padding: 0.5rem;
        background: rgba(30, 30, 40, 0.6);
        box-sizing: border-box;
    }

    .games-table td {
        padding: 0;
        border: none;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Hide ID column */
    .games-table td:first-child {
        display: none;
    }

    /* First row: Title (left) and Category (right) - must add up to 100% */
    .games-table td:nth-child(2) {
        order: 1;
        flex: 0 0 60%;
        min-width: 0;
        overflow: hidden;
        padding-right: 0.5rem;
    }

    .games-table td:nth-child(2) .game-title-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .games-table td:nth-child(3) {
        order: 2;
        flex: 0 0 40%;
        text-align: right;
    }

    /* Second row: Status (left) and Actions (right) */
    .games-table td:nth-child(4) {
        order: 3;
        flex: 0 0 auto;
        margin-top: 0.5rem;
    }

    .games-table td:nth-child(5) {
        order: 4;
        flex: 0 0 auto;
        margin-left: auto;
        margin-top: 0.5rem;
    }

    /* Action buttons styling */
    .games-table .actions {
        flex-direction: row;
        gap: 0.25rem;
        flex-wrap: nowrap;
    }

    .btn-icon {
        min-width: 28px;
        flex-shrink: 0;
    }

    /* Hide button text on mobile */
    .btn-icon .btn-text {
        display: none;
    }

    .btn-icon:hover .btn-text {
        display: none;
    }

    /* Adjust page header for mobile */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-header .btn {
        width: 100%;
    }

    /* Make category tooltip more readable on mobile */
    .category-tooltip {
        left: 0;
        transform: translateX(0) translateY(-5px);
    }

    .category-display:hover .category-tooltip {
        transform: translateX(0) translateY(0);
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .pagination-controls-gm {
        gap: 0.25rem;
    }

    .pagination-btn-gm,
    .pagination-number-gm {
        min-width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
}

/* ===========================
   REPORTS PAGE STYLES
   =========================== */

.reports-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.reports-header .section-title {
    font-size: 1.375rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.reports-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reports-controls label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
}

.reports-select {
    background: rgba(30, 30, 40, 0.6);
    color: #fff;
    border: 1px solid rgba(157, 78, 221, 0.3);
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 150px;
}

.reports-select:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
}

.reports-select-small {
    background: rgba(30, 30, 40, 0.8);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(157, 78, 221, 0.3);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reports-select-small:hover {
    border-color: rgba(157, 78, 221, 0.5);
    background: rgba(30, 30, 40, 0.9);
}

.reports-select-small:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
    box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.1);
}

/* Data Section */
.reports-data-section {
    margin-top: 2rem;
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.reports-table-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Reports Table */
.reports-table {
    background: transparent !important;
}

.reports-table thead {
    background: rgba(157, 78, 221, 0.1) !important;
    border-bottom: 2px solid rgba(157, 78, 221, 0.3);
}

.reports-table th {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    padding: 1rem !important;
    text-align: left;
}

.reports-table th .sort-icon {
    margin-left: 0.25rem;
    opacity: 0.5;
}

.reports-table th:hover .sort-icon {
    opacity: 1;
}

.reports-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.reports-table tbody tr:hover {
    background: rgba(157, 78, 221, 0.05);
}

.reports-table td {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 1rem !important;
}

.reports-no-data {
    text-align: center;
    padding: 3rem !important;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Table Footer */
.reports-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.reports-showing {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.reports-pagination {
    display: flex;
    gap: 0.5rem;
}

.reports-pagination-btn {
    background: rgba(157, 78, 221, 0.1);
    color: rgba(157, 78, 221, 0.8);
    border: 1px solid rgba(157, 78, 221, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.reports-pagination-btn:hover:not(:disabled) {
    background: rgba(157, 78, 221, 0.2);
    border-color: rgba(157, 78, 221, 0.5);
}

.reports-pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .reports-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .reports-header .section-title {
        font-size: 1.3rem;
    }

    .reports-table th,
    .reports-table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* ===================================
   Payment Settings Styles
   =================================== */

.payment-method-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.15);
    border-radius: 10px;
    padding: 0.375rem;
    position: relative;
}

.payment-method-tab {
    flex: 1;
    cursor: pointer;
    position: relative;
}

.payment-method-tab:first-child {
    margin-right: 0.375rem;
}

.payment-method-tab:last-child {
    margin-left: 0.375rem;
}

.payment-method-tab:first-child::after {
    content: '';
    position: absolute;
    right: -0.375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: rgba(157, 78, 221, 0.2);
}

.payment-method-tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-method-tab .tab-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.25s ease;
    cursor: pointer;
}

.payment-method-tab .tab-label svg {
    width: 18px;
    height: 18px;
    opacity: 0.6;
    transition: all 0.25s ease;
}

.payment-method-tab input[type="radio"]:checked + .tab-label {
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.2) 0%, rgba(123, 44, 191, 0.15) 100%);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(157, 78, 221, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.payment-method-tab input[type="radio"]:checked + .tab-label svg {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(157, 78, 221, 0.5));
}

.payment-method-tab:hover .tab-label {
    background: rgba(157, 78, 221, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.payment-method-tab input[type="radio"]:checked:hover + .tab-label {
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.25) 0%, rgba(123, 44, 191, 0.18) 100%);
}

/* Mobile responsive styling for payment method tabs */
@media (max-width: 768px) {
    .payment-method-tabs {
        flex-direction: column;
        padding: 0.375rem;
    }

    .payment-method-tab:first-child {
        margin-right: 0;
        margin-bottom: 0.375rem;
    }

    .payment-method-tab:last-child {
        margin-left: 0;
        margin-top: 0.375rem;
    }

    .payment-method-tab:first-child::after {
        right: auto;
        top: auto;
        bottom: -0.375rem;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 1px;
    }

    .payment-method-tab .tab-label {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
}

.payment-form {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.payment-form.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group label .required {
    color: #ff6b6b;
    margin-left: 0.25rem;
}

/* Help text for form fields */
.form-group .help-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Form Control class for common components */
.form-control {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(20, 20, 30, 0.4);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-control:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
    background: rgba(20, 20, 30, 0.6);
    box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.1);
}

.form-control:disabled,
.form-control[readonly] {
    background: rgba(20, 20, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select wrapper for custom arrow */
.select-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* Select dropdown specific styling */
select.form-control {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding-right: 2.5rem;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    line-height: 1.5 !important;
}

select.form-control:hover {
    border-color: rgba(157, 78, 221, 0.4);
}

select.form-control option {
    background: rgba(20, 20, 30, 0.95);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
}

select.form-control option:hover {
    background: rgba(157, 78, 221, 0.15);
}

/* Custom select arrow */
.select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.9);
    width: 14px;
    height: 14px;
}

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

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    font-family: inherit;
}

/* Checkbox Styles */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    position: relative;
    padding: 0.5rem 0;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(157, 78, 221, 0.4);
    border-radius: 4px;
    background: rgba(20, 20, 30, 0.4);
    transition: all 0.3s;
    position: relative;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: rgba(157, 78, 221, 0.6);
    border-color: rgba(157, 78, 221, 0.8);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

/* Radio Button Styles */
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    position: relative;
    padding: 0.5rem 0;
}

.radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(157, 78, 221, 0.4);
    border-radius: 50%;
    background: rgba(20, 20, 30, 0.4);
    transition: all 0.3s;
    position: relative;
    flex-shrink: 0;
}

.radio-label input[type="radio"]:checked + .radio-custom {
    border-color: rgba(157, 78, 221, 0.8);
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(157, 78, 221, 0.8);
}

.radio-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.settings-container h1 .highlight {
    color: #e74c3c;
}

/* Alert messages */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.alert-error {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

/* Responsive payment settings */
@media (max-width: 768px) {
    .payment-method-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .payment-method-tab .tab-label {
        border-radius: 8px;
    }

    .btn-save {
        width: 100%;
        justify-content: center;
    }
}

/* Admin Filter Modal Styles */
.filter-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.filter-modal-content {
    background: rgba(20, 20, 35, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* Multiselect Dropdown Styles */
.filter-multiselect-group {
    margin-bottom: 1.5rem;
}

.filter-label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.multiselect-dropdown {
    position: relative;
}

.multiselect-button {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(30, 30, 50, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
}

.multiselect-button:hover {
    border-color: rgba(157, 78, 221, 0.5);
    background: rgba(30, 30, 50, 0.8);
}

.multiselect-text {
    flex: 1;
    text-align: left;
}

.multiselect-text.has-selection {
    color: rgba(255, 255, 255, 0.95);
}

.multiselect-button svg {
    margin-left: 0.5rem;
    opacity: 0.6;
}

.multiselect-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: rgba(20, 20, 35, 0.98);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    max-height: 300px;
    overflow: hidden;
}

.multiselect-menu.show {
    display: flex;
    flex-direction: column;
}

.multiselect-search {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(157, 78, 221, 0.2);
}

.multiselect-search-input {
    width: 100%;
    padding: 0.5rem;
    background: rgba(30, 30, 50, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
}

.multiselect-search-input:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
}

.multiselect-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.multiselect-options {
    overflow-y: auto;
    max-height: 240px;
}

.multiselect-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.multiselect-option:hover {
    background: rgba(157, 78, 221, 0.1);
}

.multiselect-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: #9d4edd;
}

.multiselect-option span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Filter Actions */
.filter-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(157, 78, 221, 0.2);
}

.filter-actions .btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(157, 78, 221, 0.2);
}

.filter-sidebar-header h3 {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.25rem;
    margin: 0;
}

.btn-close-filter {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.btn-close-filter:hover {
    color: rgba(255, 255, 255, 1);
}

.btn-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Admin Search and Filter Bar */
.admin-search-filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.search-wrapper-admin {
    flex: 1;
    position: relative;
}

.search-input-admin {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    background: rgba(30, 30, 50, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    transition: all 0.2s;
}

.search-input-admin:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.6);
    background: rgba(30, 30, 50, 0.8);
}

.search-input-admin::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-btn-admin {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(157, 78, 221, 0.8);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.search-btn-admin:hover {
    color: rgba(157, 78, 221, 1);
}

.btn-clear-filters {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Page header flex layout */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header > div:first-child {
    flex: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .admin-search-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .filter-modal-content {
        max-width: 95%;
        padding: 1.5rem;
    }

    .recently-played-section {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
        border-radius: 12px;
    }

    .recently-played-title {
        font-size: 1.5rem;
    }
}

/* ==========================================
   LIGHT THEME STYLES
   ========================================== */

/* Base Light Theme */
body.light-theme {
    background: #f5f5f5;
    color: #1a1a2e;
}

/* Override background gradients */
body.light-theme.homepage,
body.light-theme.page-with-gm-bg {
    background: #f5f5f5 !important;
    min-height: 100vh;
}

/* Remove stars animation in light theme */
body.light-theme.homepage::before,
body.light-theme.page-with-gm-bg::before {
    display: none !important;
}

body.light-theme.homepage::after,
body.light-theme.page-with-gm-bg::after {
    display: none !important;
}

/* Header */
body.light-theme .sticky-header-wrapper {
    background: transparent !important;
    box-shadow: none !important;
}

body.light-theme .header-gm {
    background: transparent !important;
    box-shadow: none !important;
}

body.light-theme .sticky-header-wrapper.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

body.light-theme .logo-icon {
    color: #9d4edd;
}

body.light-theme .logo-text {
    color: #1a1a2e;
}

body.light-theme .nav-link-gm {
    color: #1a1a2e;
}

body.light-theme .nav-link-gm::after {
    background: #9d4edd;
}

body.light-theme .nav-link-gm.active {
    color: #9d4edd;
}

body.light-theme .btn-header {
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .btn-login {
    background: rgba(157, 78, 221, 0.1);
}

body.light-theme .btn-signup {
    background: linear-gradient(135deg, #9d4edd, #7209b7);
    color: #ffffff;
}

/* Main Content */
body.light-theme .main-content-gm {
    color: #1a1a2e;
}

/* Game Cards */
body.light-theme .game-card-gm {
    background: transparent;
}

body.light-theme .game-link-gm {
    background: transparent;
}

body.light-theme .game-thumb-gm {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

body.light-theme .game-card-gm:hover .game-thumb-gm {
    box-shadow: none;
}

body.light-theme .game-title-gm {
    color: #1a1a2e;
    background: transparent;
}

body.light-theme .game-category-gm {
    color: #666;
}

body.light-theme .game-plays-gm {
    color: #666;
}

/* Game Detail Page */
body.light-theme .game-detail-title-gm {
    color: #1a1a2e;
}

body.light-theme .game-description-text-gm {
    color: #333;
}

body.light-theme .meta-item-gm {
    color: #333;
}

body.light-theme .meta-item-gm strong {
    color: #666;
}

body.light-theme .meta-item-gm a {
    color: #9d4edd;
}

body.light-theme .game-player-container-gm {
    background: #e8e8e8;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

body.light-theme .game-actions-bar-gm {
    background: #d8d8d8;
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Ad Slots */
body.light-theme .ad-slot-gm {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .ad-placeholder-gm {
    background: #e8e8e8;
}

body.light-theme .ad-label-gm {
    color: rgba(0, 0, 0, 0.35);
}

body.light-theme .ad-size-gm {
    color: rgba(0, 0, 0, 0.25);
}

body.light-theme .btn-like-gm,
body.light-theme .btn-fullscreen-gm,
body.light-theme .btn-share-gm,
body.light-theme .btn-widescreen-gm,
body.light-theme .btn-report-gm {
    color: #1a1a2e;
    background: #d8d8d8;
}

body.light-theme .btn-like-gm:hover,
body.light-theme .btn-fullscreen-gm:hover,
body.light-theme .btn-share-gm:hover,
body.light-theme .btn-widescreen-gm:hover,
body.light-theme .btn-report-gm:hover {
    background: rgba(157, 78, 221, 0.1);
    color: #9d4edd;
}

/* Game Detail Columns */
body.light-theme .game-left-column-gm {
    background: transparent;
}

/* Sidebar */
body.light-theme .game-right-sidebar-gm {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .sidebar-title-gm {
    color: #1a1a2e;
}

body.light-theme .sidebar-game-item-gm {
    background: #ffffff;
}

body.light-theme .sidebar-game-item-gm:hover {
    background: rgba(157, 78, 221, 0.05);
}

body.light-theme .sidebar-game-title-gm {
    color: #1a1a2e;
}

body.light-theme .sidebar-game-category-gm {
    color: #666;
}

/* Comments Section */
body.light-theme .game-comments-section-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .comments-title-gm {
    color: #1a1a2e;
}

body.light-theme .comment-item-gm {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .comment-author-gm {
    color: #1a1a2e;
}

body.light-theme .comment-text-gm {
    color: #333;
}

body.light-theme .comment-textarea-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .comment-textarea-gm::placeholder {
    color: #999;
}

body.light-theme .char-count-gm {
    color: #666;
}

body.light-theme .comments-empty-gm {
    color: #666;
}

body.light-theme .btn-submit-comment-gm {
    background: linear-gradient(135deg, #9d4edd, #7209b7);
    color: #ffffff;
}

/* Category Titles (Homepage sections) */
body.light-theme .category-title-gm {
    color: #555;
}

body.light-theme .category-title-gm > a:first-child {
    color: #555;
    text-shadow: none;
}

body.light-theme .category-title-gm > a:first-child span {
    text-shadow: none;
}

body.light-theme .category-title-gm > a:first-child span::before {
    display: none;
}

body.light-theme .category-title-gm > a:last-child {
    color: #555;
    opacity: 1;
}

body.light-theme .category-title-gm a:hover {
    color: #9d4edd;
}

/* Category Navigation Buttons */
body.light-theme .scroll-btn-gm {
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-theme .scroll-btn-gm:hover {
    background: rgba(157, 78, 221, 0.15);
    color: #1a1a2e;
    border-color: rgba(157, 78, 221, 0.4);
}

body.light-theme .scroll-btn-gm:active {
    background: rgba(157, 78, 221, 0.25);
}

/* Category Page */
body.light-theme .category-header-gm {
    color: #1a1a2e;
}

body.light-theme .category-header-gm h1,
body.light-theme .category-header-gm p {
    color: #1a1a2e;
}

body.light-theme .search-container-gm {
    background: rgba(0, 0, 0, 0.03);
}

body.light-theme .search-container-gm h1 {
    color: #1a1a2e;
}

body.light-theme .search-input-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .search-input-gm::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

body.light-theme .btn-search-gm {
    background: linear-gradient(135deg, #9d4edd, #7209b7);
    color: #ffffff;
}

/* Footer */
body.light-theme .footer-gm {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
    color: #1a1a2e;
}

body.light-theme .footer-copyright-gm,
body.light-theme .footer-rights-gm,
body.light-theme .footer-email-gm,
body.light-theme .footer-disclaimer-gm {
    color: #333;
}

body.light-theme .footer-email-gm:hover {
    color: #9d4edd;
}

body.light-theme .footer-privacy-gm {
    color: #666;
}

body.light-theme .footer-privacy-gm:hover {
    color: #9d4edd;
}

body.light-theme .footer-link-btn-gm {
    background: #f5f5f5;
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-theme .footer-link-btn-gm:hover {
    background: #e8e8e8;
    color: #9d4edd;
    border-color: rgba(157, 78, 221, 0.4);
}

body.light-theme .footer-join-btn-gm {
    background: linear-gradient(135deg, #9d4edd, #7209b7);
    color: #ffffff;
    border: none;
}

body.light-theme .footer-join-btn-gm:hover {
    color: #ffffff;
}

body.light-theme .footer-brand-icon-gm {
    color: #9d4edd;
}

body.light-theme .footer-brand-text-gm {
    color: #1a1a2e;
}

body.light-theme .footer-social-link-gm {
    color: #666;
}

body.light-theme .footer-social-link-gm:hover {
    color: #9d4edd;
}

body.light-theme .age-label-gm {
    color: #666;
}

body.light-theme .age-icon-gm {
    background: linear-gradient(135deg, #9d4edd, #7209b7);
    color: #ffffff;
}

body.light-theme .footer-age-rating-gm {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-theme .footer-age-rating-gm:hover {
    background: #e8e8e8;
    border-color: rgba(157, 78, 221, 0.4);
}

/* Recently Played Section */
body.light-theme .recently-played-section {
    background: rgba(200, 200, 200, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .recently-played-section::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(157, 78, 221, 0.3) 20%,
        rgba(157, 78, 221, 0.3) 80%,
        transparent 100%);
}

body.light-theme .recently-played-title {
    color: #555;
}

body.light-theme .recently-played-title span {
    text-shadow: none;
}

body.light-theme .recently-played-title span::before {
    display: none;
}

body.light-theme .recently-played-icon {
    color: #9d4edd;
    filter: none;
}

/* Catalog/Browse Page */
body.light-theme .catalog-header-gm h1,
body.light-theme .catalog-header-gm p {
    color: #1a1a2e;
}

body.light-theme .catalog-sidebar-gm {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .sidebar-section-gm {
    background: #f0f0f0;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .filter-section-gm {
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .filter-header-gm {
    background: rgba(0, 0, 0, 0.03);
    color: #1a1a2e;
}

body.light-theme .filter-header-gm:hover {
    background: rgba(157, 78, 221, 0.1);
}

body.light-theme .filter-item-gm {
    color: #333;
}

body.light-theme .filter-item-gm:hover {
    background: rgba(157, 78, 221, 0.05);
    color: #9d4edd;
}

body.light-theme .filter-item-gm.active {
    background: rgba(157, 78, 221, 0.1);
    color: #9d4edd;
}

body.light-theme .sidebar-title-gm {
    color: #1a1a2e;
}

body.light-theme .filter-arrow-gm {
    color: #666;
}

body.light-theme .filter-icon-gm {
    color: #666;
}

body.light-theme .filter-remove-gm {
    color: #999;
}

body.light-theme .filter-remove-gm:hover {
    color: #e63946;
}

/* Quick Filters Bar */
body.light-theme .catalog-quick-filters-gm {
    background: #f0f0f0;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .quick-filter-btn-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-theme .quick-filter-btn-gm:hover {
    background: rgba(157, 78, 221, 0.1);
    border-color: rgba(157, 78, 221, 0.4);
    box-shadow: 0 0 12px rgba(157, 78, 221, 0.2);
}

body.light-theme .quick-filter-btn-gm.active {
    background: rgba(157, 78, 221, 0.2);
    border-color: rgba(157, 78, 221, 0.5);
    box-shadow: 0 0 16px rgba(157, 78, 221, 0.3);
}

body.light-theme .filter-icon-large-gm {
    color: #1a1a2e;
}

body.light-theme .quick-search-input-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .quick-search-input-gm::placeholder {
    color: #999;
}

body.light-theme .quick-search-input-gm:focus {
    border-color: rgba(157, 78, 221, 0.5);
    background: #ffffff;
}

body.light-theme .results-title-gm {
    color: #1a1a2e;
}

body.light-theme .results-count-gm {
    color: #666;
}

/* Pagination */
body.light-theme .pagination-btn-gm,
body.light-theme .pagination-number-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .pagination-btn-gm:hover,
body.light-theme .pagination-number-gm:hover {
    background: rgba(157, 78, 221, 0.1);
    border-color: rgba(157, 78, 221, 0.4);
    color: #9d4edd;
    box-shadow: 0 0 12px rgba(157, 78, 221, 0.2);
}

body.light-theme .pagination-number-gm.active {
    background: rgba(157, 78, 221, 0.2);
    border-color: rgba(157, 78, 221, 0.5);
    color: #9d4edd;
    box-shadow: 0 0 16px rgba(157, 78, 221, 0.3);
}

body.light-theme .pagination-btn-gm.disabled {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.1);
    color: #999;
}

body.light-theme .pagination-info-gm {
    color: #1a1a2e;
}

body.light-theme .game-description-list {
    color: #666 !important;
}

body.light-theme .games-grid-catalog-gm.list-view .game-description-list {
    color: #666 !important;
}

body.light-theme .no-games-gm {
    color: #666;
}

body.light-theme .btn-play-now-gm {
    color: #fff !important;
}

/* Hero Section */
body.light-theme .hero-banner-gm-small {
    background: transparent;
}

/* Mobile Menu */
body.light-theme .nav-gm.mobile-active {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .mobile-menu-toggle-gm {
    color: #1a1a2e;
}

/* User Menu */
body.light-theme .user-menu-btn-gm {
    color: #1a1a2e;
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .user-menu-btn-gm:hover {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

body.light-theme .user-name-gm {
    color: #1a1a2e;
}

body.light-theme .user-dropdown-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light-theme .dropdown-item-gm {
    color: #1a1a2e;
}

body.light-theme .dropdown-item-gm:hover {
    background: rgba(157, 78, 221, 0.1);
    color: #9d4edd;
}

body.light-theme .dropdown-divider-gm {
    background: rgba(0, 0, 0, 0.1);
}

/* Login/Signup Buttons */
body.light-theme .btn-login {
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .btn-login:hover {
    border-color: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

body.light-theme .btn-signup {
    background: #9d4edd;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.5);
}

body.light-theme .btn-signup:hover {
    background: #7209b7;
    box-shadow: 0 0 25px rgba(114, 9, 183, 0.7);
}

/* Nav Link Hover States */
body.light-theme .nav-link-gm:hover {
    color: #666;
}

body.light-theme .nav-link-gm.active {
    color: #9d4edd;
}

/* Game Info Sections */
body.light-theme .game-section-gm {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .game-section-gm h2 {
    color: #1a1a2e;
}

body.light-theme .game-section-gm p {
    color: #333;
}

/* Game Description */
body.light-theme .game-description-toggle-gm {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #333;
}

body.light-theme .game-description-toggle-gm:hover {
    background: rgba(157, 78, 221, 0.1);
    border-color: rgba(157, 78, 221, 0.3);
    color: #1a1a2e;
}

/* Rating System */
body.light-theme .rating-text-gm {
    color: #666;
}

body.light-theme .rating-prompt-gm {
    color: #333;
}

body.light-theme .rating-feedback-gm {
    color: #666;
}

/* Related Games Section */
body.light-theme .related-games-section-gm h2,
body.light-theme .related-games-grid-section-gm h2 {
    color: #1a1a2e;
}

/* Sidebar Elements */
body.light-theme .sidebar-title-icon-gm {
    color: #1a1a2e;
}

body.light-theme .sidebar-game-link-gm {
    color: #1a1a2e;
}

body.light-theme .sidebar-game-card-gm {
    background: transparent;
}

body.light-theme .sidebar-game-card-gm:hover {
    background: rgba(157, 78, 221, 0.05);
}

body.light-theme .sidebar-game-title-gm {
    color: #1a1a2e;
}

body.light-theme .sidebar-game-info-gm {
    color: #666;
}

body.light-theme .sidebar-game-plays-gm {
    color: #666;
}

/* Pagination */
body.light-theme .pagination-gm {
    color: #1a1a2e;
}

body.light-theme .page-link-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .page-link-gm:hover {
    background: rgba(157, 78, 221, 0.1);
    color: #9d4edd;
}

body.light-theme .page-link-gm.active {
    background: linear-gradient(135deg, #9d4edd, #7209b7);
    color: #ffffff;
}

/* Hero Banner */
body.light-theme .hero-banner-gm h1,
body.light-theme .hero-banner-gm-small h1 {
    color: #1a1a2e;
}

body.light-theme .hero-banner-gm p,
body.light-theme .hero-banner-gm-small p {
    color: #333;
}

body.light-theme .hero-title-gm {
    color: #1a1a2e;
    -webkit-text-stroke: 3px rgba(157, 78, 221, 0.3);
    text-stroke: 3px rgba(157, 78, 221, 0.3);
    text-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 0 40px rgba(157, 78, 221, 0.2);
}

body.light-theme .hero-description-gm {
    color: #1a1a2e;
}

body.light-theme .hero-stats-text {
    color: #333;
}

body.light-theme .hero-tab {
    background: rgba(0, 0, 0, 0.1);
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

body.light-theme .hero-tab:hover {
    background: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .hero-tab.active {
    background: #E91E63;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(233,30,99,0.6);
}

body.light-theme .hero-cta-gm {
    background: linear-gradient(135deg, #9d4edd, #7209b7);
    color: #ffffff;
}

/* Game Controls Section */
body.light-theme .game-controls-section-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .controls-header-gm h3 {
    color: #1a1a2e;
}

body.light-theme .control-item-gm {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .control-key-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .control-action-gm {
    color: #333;
}

body.light-theme .control-key-input,
body.light-theme .control-action-input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .control-key-input:focus,
body.light-theme .control-action-input:focus {
    background: #ffffff;
    border-color: rgba(157, 78, 221, 0.6);
}

body.light-theme .mouse-control-menu {
    background: #ffffff;
    border-color: rgba(157, 78, 221, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.light-theme .mouse-control-option {
    color: #333;
}

body.light-theme .mouse-control-option:hover {
    background: rgba(157, 78, 221, 0.1);
    color: #9d4edd;
}

body.light-theme .controls-list:empty::before {
    color: #999;
}

/* Category Tags */
body.light-theme .category-tag-gm {
    background: rgba(157, 78, 221, 0.1);
    color: #7209b7;
}

body.light-theme .category-tag-gm:hover {
    background: rgba(157, 78, 221, 0.2);
    color: #5a1a8f;
}

/* Breadcrumbs */
body.light-theme .breadcrumb-gm {
    color: #666;
}

body.light-theme .breadcrumb-link-gm {
    color: #9d4edd;
}

body.light-theme .breadcrumb-link-gm:hover {
    color: #7209b7;
}

/* Empty States */
body.light-theme .empty-state-gm {
    color: #666;
}

body.light-theme .empty-state-icon-gm {
    color: #999;
}

/* Loading States */
body.light-theme .loading-text-gm {
    color: #666;
}

/* Tags */
body.light-theme .tag-gm {
    background: rgba(157, 78, 221, 0.1);
    color: #7209b7;
}

body.light-theme .tag-gm:hover {
    background: rgba(157, 78, 221, 0.2);
}

/* Instructions */
body.light-theme .game-instructions-gm {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Share Modal */
body.light-theme .modal-gm {
    background: #ffffff;
    color: #1a1a2e;
}

body.light-theme .modal-title-gm {
    color: #1a1a2e;
}

body.light-theme .modal-close-gm {
    color: #666;
}

body.light-theme .modal-close-gm:hover {
    color: #1a1a2e;
}

body.light-theme .share-dropdown-gm {
    background: rgba(20, 20, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

body.light-theme .share-option-gm {
    background: transparent;
    color: #ffffff;
}

body.light-theme .share-option-gm:hover {
    background: rgba(157, 78, 221, 0.2);
    color: #ffffff;
}

/* Tooltips */
body.light-theme .tooltip-gm {
    background: #1a1a2e;
    color: #ffffff;
}

/* Button Elements */
body.light-theme .btn {
    background: #9d4edd;
    color: #ffffff;
}

body.light-theme .btn:hover {
    background: #7209b7;
}

body.light-theme .btn-primary {
    background: linear-gradient(135deg, #9d4edd 0%, #7209b7 100%);
    color: #ffffff;
}

/* Footer (old style - if still used) */
body.light-theme .footer {
    background: #f8f9fa;
    color: #333;
}

/* Report Modal Buttons */
body.light-theme .btn-report-submit-gm {
    background: #ff4e4e;
    color: #ffffff;
}

body.light-theme .btn-report-cancel-gm {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-theme .btn-report-cancel-gm:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.3);
}

/* Game Controls Visual Display */
body.light-theme .game-control-key-gm {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.03));
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.light-theme .game-control-label-gm {
    color: #666;
}

/* Controls Builder */
body.light-theme .controls-builder {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Report Modal */
body.light-theme .report-modal-gm {
    background: rgba(0, 0, 0, 0.5);
}

body.light-theme .report-modal-content-gm {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .report-modal-header-gm {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .report-modal-header-gm h3 {
    color: #ff4e4e;
}

body.light-theme .report-title-gm {
    color: #1a1a2e;
}

body.light-theme .report-label-gm {
    color: #333;
}

body.light-theme .report-textarea-gm,
body.light-theme .report-select-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .report-textarea-gm:focus,
body.light-theme .report-select-gm:focus {
    border-color: rgba(157, 78, 221, 0.6);
    background: #ffffff;
}

body.light-theme .report-modal-close-gm {
    color: rgba(0, 0, 0, 0.6);
}

body.light-theme .report-modal-close-gm:hover {
    background: rgba(255, 78, 78, 0.2);
    color: #ff4e4e;
}

body.light-theme .report-modal-body-gm label {
    color: #333;
}

body.light-theme .report-reason-text-gm {
    color: #721c24;
    background: rgba(255, 78, 78, 0.15);
    border-left-color: #ff4e4e;
}

body.light-theme .report-description-input-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .report-description-input-gm:focus {
    background: #ffffff;
    border-color: #ff4e4e;
    box-shadow: 0 0 0 3px rgba(255, 78, 78, 0.1);
}

body.light-theme .report-description-input-gm::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

body.light-theme .report-error-message-gm {
    background: rgba(255, 78, 78, 0.15);
    border-color: rgba(255, 78, 78, 0.3);
    color: #721c24;
}

body.light-theme .report-success-gm {
    background: rgba(78, 255, 78, 0.15) !important;
    border-color: rgba(78, 255, 78, 0.3) !important;
    color: #155724 !important;
}

body.light-theme .report-modal-footer-gm {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Star Icons */
body.light-theme .star-icon-gm {
    color: rgba(0, 0, 0, 0.2);
}

body.light-theme .star-interactive-gm {
    color: rgba(0, 0, 0, 0.2);
}

/* Category Header (if not already covered) */
body.light-theme .category-header-gm {
    color: #1a1a2e;
}

/* Sidebar Game Info Elements */
body.light-theme .sidebar-game-meta-gm {
    color: #666;
}

body.light-theme .sidebar-game-rating-gm {
    color: #666;
}

/* Game Placeholder Loading */
body.light-theme .game-placeholder-large-gm {
    background: #c8c8c8;
    border-color: rgba(0, 0, 0, 0.1);
    color: #555;
}

body.light-theme .game-placeholder-text-gm {
    color: #666;
}

/* Old Footer Elements (if present) */
body.light-theme .footer p {
    color: #333;
}

body.light-theme .footer a {
    color: #9d4edd;
}

body.light-theme .footer a:hover {
    color: #7209b7;
}

/* Additional Text Elements */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: #1a1a2e;
}

body.light-theme p {
    color: #333;
}

body.light-theme a {
    color: #9d4edd;
}

body.light-theme a:hover {
    color: #7209b7;
}

/* Scrollbar Styling for Light Theme */
body.light-theme ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: rgba(157, 78, 221, 0.5);
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 78, 221, 0.7);
}

/* Developers Page */
body.light-theme .developers-step-card-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .developers-step-card-gm:hover {
    background: #f0f0f0;
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 30px rgba(157, 78, 221, 0.15);
}

body.light-theme .developers-benefit-card-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .developers-benefit-card-gm:hover {
    background: #f0f0f0;
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 30px rgba(157, 78, 221, 0.15);
}

body.light-theme .developers-benefit-icon-gm {
    background: linear-gradient(135deg, #ff8c42 0%, #ff5722 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme .developers-cta-btn-gm {
    background: #e8e8e8;
    color: #1a1a2e;
}

body.light-theme .developers-cta-btn-gm:hover {
    background: #d8d8d8;
}

body.light-theme .developers-cta-btn-large-gm {
    background: #e8e8e8;
    color: #1a1a2e;
}

body.light-theme .developers-cta-btn-large-gm:hover {
    background: #d8d8d8;
}

/* Blog Page */
body.light-theme .blog-tag-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .blog-tag-gm:hover {
    background: #f0f0f0;
    border-color: rgba(157, 78, 221, 0.4);
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.2), 0 0 30px rgba(157, 78, 221, 0.1);
}

body.light-theme .blog-tag-gm.active {
    background: rgba(157, 78, 221, 0.15);
    border-color: rgba(157, 78, 221, 0.4);
    color: #7209b7;
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.2), 0 0 30px rgba(157, 78, 221, 0.15);
}

body.light-theme .blog-post-card-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .blog-post-card-gm:hover {
    background: #f0f0f0;
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 20px rgba(157, 78, 221, 0.15);
}

body.light-theme .blog-page-link-gm {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .blog-page-link-gm:hover {
    background: #f0f0f0;
    border-color: rgba(157, 78, 221, 0.4);
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.2), 0 0 25px rgba(157, 78, 221, 0.15);
}

body.light-theme .blog-page-link-gm.active {
    background: rgba(157, 78, 221, 0.15);
    border-color: rgba(157, 78, 221, 0.4);
    color: #7209b7;
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.2), 0 0 30px rgba(157, 78, 221, 0.15);
}

body.light-theme .blog-post-date-gm {
    color: #666;
}

body.light-theme .blog-post-title-gm a {
    color: #1a1a2e;
}

body.light-theme .blog-post-title-gm a:hover {
    color: #9d4edd;
}

body.light-theme .blog-post-excerpt-gm {
    color: #555;
}

body.light-theme .blog-post-read-more-gm {
    color: #9d4edd;
}

body.light-theme .blog-post-read-more-gm:hover {
    color: #7209b7;
}

body.light-theme .no-posts-gm {
    color: #666;
}

body.light-theme .blog-hero-title-gm {
    color: #1a1a2e;
}

body.light-theme .blog-hero-subtitle-gm {
    color: #555;
}

body.light-theme .blog-page-dots {
    color: #999;
}

/* Blog Detail Page */
body.light-theme .blog-breadcrumb-gm {
    color: #666;
}

body.light-theme .blog-breadcrumb-gm a {
    color: #9d4edd;
}

body.light-theme .blog-breadcrumb-gm a:hover {
    color: #7209b7;
}

body.light-theme .breadcrumb-separator {
    color: #999;
}

body.light-theme .breadcrumb-current {
    color: #1a1a2e;
}

body.light-theme .blog-article-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .blog-article-header-gm {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .blog-article-title-gm {
    color: #1a1a2e;
}

body.light-theme .blog-article-meta-gm {
    color: #666;
}

body.light-theme .blog-article-separator {
    color: #999;
}

body.light-theme .blog-article-date-gm,
body.light-theme .blog-article-author-gm {
    color: #666;
}

body.light-theme .blog-article-tag-gm {
    background: rgba(157, 78, 221, 0.15);
    border-color: rgba(157, 78, 221, 0.4);
    color: #7209b7;
}

body.light-theme .blog-article-tag-gm:hover {
    background: rgba(157, 78, 221, 0.25);
    border-color: rgba(157, 78, 221, 0.5);
}

body.light-theme .blog-article-content-gm {
    color: #333;
}

body.light-theme .blog-article-excerpt-gm {
    color: #555;
}

body.light-theme .blog-article-body-gm {
    color: #333;
}

body.light-theme .blog-article-body-gm h2,
body.light-theme .blog-article-body-gm h3 {
    color: #1a1a2e;
}

body.light-theme .blog-article-body-gm a {
    color: #9d4edd;
}

body.light-theme .blog-article-body-gm a:hover {
    color: #7209b7;
}

body.light-theme .blog-back-btn-gm {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a2e;
}

body.light-theme .blog-back-btn-gm:hover {
    background: #e8e8e8;
}

body.light-theme .blog-related-title-gm {
    color: #1a1a2e;
}

/* SDK Page */
body.light-theme .sdk-platform-card-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .sdk-platform-card-gm:hover {
    background: #f0f0f0;
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 30px rgba(157, 78, 221, 0.15);
}

body.light-theme .sdk-platform-icon-gm {
    background: linear-gradient(135deg, #9d4edd 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme .sdk-platform-title-gm {
    color: #1a1a2e;
}

body.light-theme .sdk-platform-desc-gm {
    color: #555;
}

body.light-theme .sdk-btn-primary-gm {
    background: #9d4edd;
    color: #fff;
    filter: drop-shadow(0 4px 10px rgba(157, 78, 221, 0.3));
}

body.light-theme .sdk-btn-primary-gm:hover {
    background: #7209b7;
    color: #fff;
    filter: drop-shadow(0 6px 15px rgba(157, 78, 221, 0.5)) drop-shadow(0 0 20px rgba(157, 78, 221, 0.3));
}

body.light-theme .sdk-btn-secondary-gm {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}

body.light-theme .sdk-btn-secondary-gm:hover {
    background: #e8e8e8;
    border-color: rgba(157, 78, 221, 0.4);
}

body.light-theme .sdk-cta-btn-primary-gm {
    background: #9d4edd;
    color: #fff;
    filter: drop-shadow(0 0 10px rgba(157, 78, 221, 0.3)) drop-shadow(0 0 20px rgba(157, 78, 221, 0.2));
}

body.light-theme .sdk-cta-btn-primary-gm:hover {
    background: #7209b7;
    color: #fff;
    filter: drop-shadow(0 0 20px rgba(157, 78, 221, 0.6)) drop-shadow(0 0 35px rgba(157, 78, 221, 0.4));
}

body.light-theme .sdk-cta-btn-secondary-gm {
    background: #e8e8e8;
    color: #1a1a2e;
}

body.light-theme .sdk-cta-btn-secondary-gm:hover {
    background: #d8d8d8;
}

body.light-theme .sdk-steps-section-gm {
    background: transparent;
}

body.light-theme .developers-step-number-gm {
    background: linear-gradient(135deg, #9d4edd 0%, #7209b7 100%);
    box-shadow: 0 4px 20px rgba(157, 78, 221, 0.3);
}

body.light-theme .developers-step-title-gm {
    color: #1a1a2e;
}

body.light-theme .developers-step-desc-gm {
    color: #555;
}

body.light-theme .developers-step-features-gm li {
    color: #9d4edd;
}

body.light-theme .developers-benefit-title-gm {
    color: #1a1a2e;
}

body.light-theme .developers-benefit-desc-gm {
    color: #555;
}

body.light-theme .developers-section-title-gm {
    color: #1a1a2e;
}

body.light-theme .developers-hero-title-gm {
    color: #1a1a2e;
}

body.light-theme .developers-hero-subtitle-gm {
    color: #555;
}

body.light-theme .developers-cta-title-gm {
    color: #1a1a2e;
}

body.light-theme .developers-cta-desc-gm {
    color: #555;
}

/* FAQ Page */
body.light-theme .faq-category-title-gm {
    color: #1a1a2e;
    border-bottom-color: rgba(157, 78, 221, 0.3);
}

body.light-theme .faq-item-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-theme .faq-item-gm:hover {
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.light-theme .faq-item-gm.active {
    border-color: rgba(157, 78, 221, 0.5);
    box-shadow: 0 4px 20px rgba(157, 78, 221, 0.15);
}

body.light-theme .faq-question-gm h3 {
    color: #1a1a2e;
}

body.light-theme .faq-toggle-gm {
    color: #9d4edd;
}

body.light-theme .faq-answer-gm p {
    color: #555;
}

body.light-theme .faq-answer-gm a {
    color: #9d4edd;
}

body.light-theme .faq-answer-gm a:hover {
    color: #7209b7;
}

body.light-theme .faq-cta-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .faq-cta-gm h2 {
    color: #1a1a2e;
}

body.light-theme .faq-cta-gm p {
    color: #555;
}

/* Contact Page */
body.light-theme .contact-form-container-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .contact-form-gm .form-group-gm label {
    color: #1a1a2e !important;
}

body.light-theme .contact-form-gm .form-group-gm input,
body.light-theme .contact-form-gm .form-group-gm textarea {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

body.light-theme .contact-form-gm .form-group-gm input::placeholder,
body.light-theme .contact-form-gm .form-group-gm textarea::placeholder {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
}

body.light-theme .contact-form-gm .form-group-gm input:focus,
body.light-theme .contact-form-gm .form-group-gm textarea:focus {
    border-color: #9d4edd !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.3), 0 0 40px rgba(157, 78, 221, 0.15) !important;
}

body.light-theme .contact-form-gm .form-group-gm input:-webkit-autofill,
body.light-theme .contact-form-gm .form-group-gm input:-webkit-autofill:hover,
body.light-theme .contact-form-gm .form-group-gm input:-webkit-autofill:focus,
body.light-theme .contact-form-gm .form-group-gm textarea:-webkit-autofill,
body.light-theme .contact-form-gm .form-group-gm textarea:-webkit-autofill:hover,
body.light-theme .contact-form-gm .form-group-gm textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #000 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #000 !important;
}

body.light-theme .contact-info-card-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .contact-info-card-gm:hover {
    border-color: rgba(157, 78, 221, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 20px rgba(157, 78, 221, 0.15);
}

body.light-theme .contact-info-icon-gm {
    background: linear-gradient(135deg, #ff8c42 0%, #ff5722 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-theme .contact-info-card-gm h3 {
    color: #1a1a2e;
}

body.light-theme .contact-info-card-gm p {
    color: #555;
}

body.light-theme .contact-info-card-gm a {
    color: #9d4edd;
}

body.light-theme .contact-info-card-gm a:hover {
    color: #7209b7;
}

body.light-theme .faq-contact-form-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.light-theme .faq-contact-form-gm h2 {
    color: #1a1a2e;
}

body.light-theme .faq-contact-form-gm > p {
    color: #555;
}

body.light-theme .form-message-gm.success-large h3 {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

body.light-theme .form-message-gm.success-large p {
    color: #1a1a2e !important;
}

/* Privacy/Terms/Cookies/About Pages */
body.light-theme .privacy-header-gm {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .privacy-header-gm h1 {
    color: #1a1a2e;
}

body.light-theme .privacy-meta-gm p {
    color: #666;
}

body.light-theme .privacy-section-gm {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-theme .privacy-section-gm:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-theme .privacy-section-gm h2 {
    color: #1a1a2e;
    border-bottom-color: rgba(157, 78, 221, 0.3);
}

body.light-theme .privacy-section-gm h3 {
    color: #1a1a2e;
}

body.light-theme .privacy-section-gm p {
    color: #333;
}

body.light-theme .privacy-section-gm ul li {
    color: #333;
}

body.light-theme .privacy-section-gm ul li::before {
    color: #9d4edd;
}

body.light-theme .privacy-section-gm strong {
    color: #1a1a2e;
}

body.light-theme .privacy-section-gm a {
    color: #9d4edd;
}

body.light-theme .privacy-section-gm a:hover {
    color: #7209b7;
}

/* Smooth transitions for theme switching */
body,
.header-gm,
.footer-gm,
.main-content-gm,
.game-card-gm,
.game-player-container-gm,
.nav-link-gm,
.btn-header,
.footer-lang-btn,
.footer-theme-btn {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========== Review Games Page Styles ========== */

.review-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-card {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 35, 0.95));
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.15), rgba(123, 44, 191, 0.1));
    border-bottom: 1px solid rgba(157, 78, 221, 0.2);
}

.review-card-header .header-main h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.375rem 0;
}

.review-card-header .uploader-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.review-card-header .uploader-info .separator {
    color: rgba(255, 255, 255, 0.4);
}

.review-card-header .header-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-featured {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.15));
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-pending {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 112, 67, 0.15));
    border: 1px solid rgba(255, 152, 0, 0.4);
    color: #ff9800;
}

.publisher-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(157, 78, 221, 0.05);
    border-bottom: 1px solid rgba(157, 78, 221, 0.15);
}

.publisher-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(157, 78, 221, 0.4);
}

.publisher-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #9d4edd, #7b2cbf);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

.publisher-info {
    flex: 1;
}

.publisher-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.publisher-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.publisher-meta .stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

.stat-success {
    color: #4ade80 !important;
}

.stat-danger {
    color: #f87171 !important;
}

.review-card-body {
    padding: 1rem;
    background: rgba(20, 20, 35, 0.5);
}

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

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

.column-left,
.column-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-section {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.6), rgba(20, 20, 35, 0.6));
    border: 1px solid rgba(157, 78, 221, 0.2);
    border-radius: 8px;
    padding: 0.875rem;
}

.section-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.section-title .hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-row.full-width {
    grid-column: 1 / -1;
}

.info-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
}

.info-value {
    color: #fff;
    font-size: 0.8rem;
}

.info-value code,
code.info-value {
    background: rgba(157, 78, 221, 0.15);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #e0b0ff;
}

.game-url {
    word-break: break-all;
    font-size: 0.7rem !important;
}

.status-extracted {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #4ade80 !important;
    font-weight: 500;
}

.status-not-extracted {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #f87171 !important;
    font-weight: 500;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tag-category {
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.2), rgba(123, 44, 191, 0.15));
    border: 1px solid rgba(157, 78, 221, 0.4);
    color: #c77dff;
}

.tag-normal {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 197, 94, 0.15));
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #86efac;
}

.thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.thumbnail-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(157, 78, 221, 0.3);
    background: rgba(0, 0, 0, 0.3);
}

.thumbnail-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail-preview.clickable {
    cursor: pointer;
}

.thumbnail-preview.clickable:hover {
    transform: scale(1.05);
}

.thumbnail-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 0.375rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
}

.text-content {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    font-size: 0.8rem;
}

.review-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.1), rgba(123, 44, 191, 0.05));
    border-top: 1px solid rgba(157, 78, 221, 0.2);
}

.actions-left,
.actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.extraction-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.extraction-status.warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.15));
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: 1px solid #3b82f6;
}

.btn-info:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #2563eb;
}

.btn-primary {
    background: linear-gradient(135deg, #9d4edd, #7b2cbf);
    color: #fff;
    border: 1px solid #9d4edd;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #7b2cbf, #5a189a);
    border-color: #7b2cbf;
}

.btn-success {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
    border: 1px solid #4ade80;
}

.btn-success:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
}

.btn-danger {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: #fff;
    border: 1px solid #f87171;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #ef4444;
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Image Modal */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.image-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
}

.image-modal-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.image-modal-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
}

.image-modal-content h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.image-modal-content img {
    max-width: 100%;
    max-height: calc(90vh - 4rem);
    border-radius: 12px;
    border: 2px solid rgba(157, 78, 221, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Filter Modal */
.filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.filter-modal.active {
    display: flex;
}

.filter-modal-content {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.98), rgba(20, 20, 35, 0.98));
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.3s ease;
}

.filter-modal-content::-webkit-scrollbar {
    width: 6px;
}

.filter-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.filter-modal-content::-webkit-scrollbar-thumb {
    background: rgba(157, 78, 221, 0.4);
    border-radius: 3px;
}

.filter-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 78, 221, 0.6);
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    margin: -1px -1px 0 -1px;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.15), rgba(123, 44, 191, 0.1));
    border-bottom: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 12px 12px 0 0;
    min-height: 48px;
}

.filter-sidebar-header h3 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding: 0.75rem 1rem;
    flex: 1;
    display: flex;
    align-items: center;
}

.btn-close-filter {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.btn-close-filter:hover {
    color: #fff;
}

.filter-multiselect-group {
    padding: 1rem 1.25rem;
}

.filter-label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.multiselect-dropdown {
    position: relative;
}

.multiselect-button {
    width: 100%;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.8), rgba(20, 20, 35, 0.8));
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 6px;
    padding: 0.8rem 0.75rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.multiselect-button:hover {
    border-color: rgba(157, 78, 221, 0.5);
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 35, 0.9));
}

.multiselect-text {
    flex: 1;
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.multiselect-button svg {
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.multiselect-menu.active ~ .multiselect-button svg {
    transform: rotate(180deg);
}

.multiselect-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.98), rgba(20, 20, 35, 0.98));
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    overflow: hidden;
    z-index: 100;
    display: none;
    flex-direction: column;
    max-height: 300px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.multiselect-menu.active {
    display: flex;
}

.multiselect-search {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(157, 78, 221, 0.2);
}

.multiselect-search-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 4px;
    padding: 0.5rem 0.625rem;
    color: #fff;
    font-size: 0.8rem;
}

.multiselect-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.multiselect-search-input:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.5);
}

.multiselect-options {
    overflow-y: auto;
    max-height: 200px;
}

.multiselect-options::-webkit-scrollbar {
    width: 6px;
}

.multiselect-options::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.multiselect-options::-webkit-scrollbar-thumb {
    background: rgba(157, 78, 221, 0.4);
    border-radius: 3px;
}

.multiselect-options::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 78, 221, 0.6);
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
}

.multiselect-option:hover {
    background: rgba(157, 78, 221, 0.15);
}

.multiselect-option input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #9d4edd;
}

.multiselect-option span {
    flex: 1;
}

.filter-actions {
    padding: 1rem 1.25rem;
    margin-top: auto;
}

.filter-actions .btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem;
}

/* Admin Search Filter Bar */
.admin-search-filter-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-wrapper-admin {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-input-admin {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.8), rgba(20, 20, 35, 0.8));
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.search-input-admin::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-input-admin:focus {
    outline: none;
    border-color: rgba(157, 78, 221, 0.5);
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 35, 0.9));
}

.search-btn-admin {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.search-btn-admin:hover {
    color: #9d4edd;
}

.btn-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-clear-filters {
    background: rgba(248, 113, 113, 0.2) !important;
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
}

.btn-clear-filters:hover {
    background: rgba(248, 113, 113, 0.3) !important;
    border-color: rgba(248, 113, 113, 0.6) !important;
}