/* assets/css/games.css - Premium Senior Gaming Hub V2 Stylesheet */

/* Header Visual Enhancement (Reference Image Match) */
body:has(.gaming-hub-wrapper) .header {
    background-color: #080918 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:has(.gaming-hub-wrapper) .desktop-nav .nav-link.active {
    background: rgba(168, 85, 247, 0.2) !important;
    border: 1.6px solid #a855f7 !important;
    border-radius: 50px !important;
    padding: 0.38rem 1.15rem !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.65) !important;
    font-weight: 700 !important;
}

body:has(.gaming-hub-wrapper) .header-actions .register-btn {
    background: #ffffff !important;
    color: #0e0e1a !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    border: none !important;
    padding: 0.5rem 1.35rem !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important;
}

body:has(.gaming-hub-wrapper) .header-actions .btn-outline {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1.4px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important;
    padding: 0.48rem 1.25rem !important;
}

.gaming-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #2b1b17 0%, #4a2720 50%, #6e2a22 100%);
    border-radius: 24px;
    padding: 3.5rem 3rem;
    color: #ffffff;
    margin-bottom: 2.5rem;
    box-shadow: 0 20px 45px rgba(43, 27, 23, 0.28);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.gaming-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px),
                      radial-gradient(circle, rgba(243, 156, 18, 0.2) 2px, transparent 2px);
    background-size: 40px 40px, 70px 70px;
    background-position: 0 0, 20px 20px;
    opacity: 0.6;
}

.gaming-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.gaming-hero-text {
    max-width: 650px;
}

.gaming-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffd166;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gaming-hero-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 3rem;
    line-height: 1.15;
    margin: 0 0 1rem 0;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.gaming-hero-desc {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1.75rem;
}

.gaming-pillars-row {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.gaming-pillar-chip {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-gaming-start {
    background: linear-gradient(135deg, #e04b3b 0%, #f39c12 100%);
    color: #ffffff !important;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(224, 75, 59, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-gaming-start:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 32px rgba(224, 75, 59, 0.6);
}

.gaming-hero-stats-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 270px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.gaming-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.gaming-stat-box {
    background: rgba(0, 0, 0, 0.18);
    padding: 0.85rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gaming-stat-val {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffd166;
}

.gaming-stat-lbl {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    margin-top: 0.2rem;
}

/* =============================================================
   2. CATEGORY HUBS & GAME CARDS
   ============================================================= */
.gaming-category-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow: 0 6px 24px rgba(36, 23, 18, 0.05);
    border: 1.5px solid rgba(36, 23, 18, 0.06);
    margin-bottom: 2.5rem;
    transition: border-color 0.3s ease;
}

.gaming-category-wrapper:hover {
    border-color: rgba(224, 75, 59, 0.25);
}

/* =============================================================
   VIBRANT & CINEMATIC SENIOR GAMING DESIGN SYSTEM (REFERENCE UI)
   ============================================================= */

/* 1. Neon Floating Background Atmosphere Elements */
.neon-side-wings {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.neon-side-item {
    position: absolute;
    pointer-events: none;
    user-select: none;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.neon-item-left-1 { top: 180px; left: calc(50% - 660px); animation: floatSideNeon 7s infinite ease-in-out alternate; }
.neon-item-left-2 { top: 380px; left: calc(50% - 645px); animation: floatSideNeon 9s infinite ease-in-out alternate -2s; }
.neon-item-left-3 { top: 580px; left: calc(50% - 655px); animation: floatSideNeon 8s infinite ease-in-out alternate -4s; }

.neon-item-right-1 { top: 220px; right: calc(50% - 655px); animation: floatSideNeon 8s infinite ease-in-out alternate -1s; }
.neon-item-right-2 { top: 430px; right: calc(50% - 645px); animation: floatSideNeon 10s infinite ease-in-out alternate -3s; }
.neon-item-right-3 { top: 640px; right: calc(50% - 655px); animation: floatSideNeon 7s infinite ease-in-out alternate -5s; }

@keyframes floatSideNeon {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0.75; }
    50%  { transform: translateY(-12px) rotate(6deg); opacity: 1; }
    100% { transform: translateY(8px) rotate(-4deg); opacity: 0.8; }
}

@media (max-width: 1350px) {
    .neon-side-wings { display: none; }
}

/* 2. Hero Banner - Dual Column Cinematic Gaming Lounge */
.gaming-hero-banner {
    position: relative;
    padding: 2.2rem 2.8rem;
    margin-bottom: 2rem;
    border-radius: 28px;
    background: radial-gradient(circle at 80% 40%, rgba(255, 122, 0, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.22) 0%, transparent 50%),
                linear-gradient(135deg, #140e2b 0%, #1c133a 45%, #2a1542 80%, #1a0f2e 100%) !important;
    color: #ffffff;
    box-shadow: 0 25px 60px rgba(8, 9, 21, 0.8), 0 0 35px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 122, 0, 0.35);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    overflow: hidden;
}

.hero-left-content {
    flex: 1 1 560px;
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.hero-senior-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(251, 191, 36, 0.12);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(251, 191, 36, 0.45);
    padding: 0.35rem 0.95rem;
    border-radius: 50px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fbbf24;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.hero-main-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 2.55rem;
    line-height: 1.18;
    color: #ffffff;
    margin: 0 0 0.85rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-gradient-text {
    background: linear-gradient(90deg, #ff7a00 0%, #ff007f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(255, 0, 127, 0.4));
}

.hero-main-desc {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0 0 1.35rem;
}

.hero-stat-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.hero-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.95rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.hero-stat-pill:hover {
    transform: translateY(-2px);
    border-color: #fbbf24;
    background: rgba(255, 255, 255, 0.14);
}

.hero-btn-history {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.hero-btn-history:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffd166;
    color: #ffd166;
    transform: translateY(-2px);
}

/* Right 3D Stage Visual */
.hero-right-stage {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hero-neon-screen {
    width: 250px;
    height: 120px;
    border-radius: 16px;
    background: radial-gradient(circle, #1a1038 0%, #0d0720 100%);
    border: 2px solid #00d2ff;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.6), inset 0 0 20px rgba(0, 210, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: -20px;
    position: relative;
    z-index: 1;
}

.neon-screen-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.neon-line-1 {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.55rem;
    font-weight: 900;
    color: #ff7a00;
    text-shadow: 0 0 10px rgba(255, 122, 0, 0.8);
    line-height: 1;
}

.neon-line-2 {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.45rem;
    font-weight: 900;
    color: #ec4899;
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
    line-height: 1;
}

.neon-line-3 {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
    line-height: 1.1;
}

.hero-gamepad-pedestal {
    position: relative;
    width: 260px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.pedestal-disc {
    position: absolute;
    bottom: 8px;
    width: 210px;
    height: 38px;
    background: radial-gradient(ellipse at center, #2e1a5e 0%, #150c30 70%);
    border-radius: 50%;
    border: 2px solid #00d2ff;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.65), 0 10px 25px rgba(0, 0, 0, 0.9);
}

.pedestal-glow {
    position: absolute;
    bottom: 0;
    width: 240px;
    height: 50px;
    background: radial-gradient(ellipse at center, rgba(0, 210, 255, 0.45) 0%, transparent 70%);
    filter: blur(12px);
}

.gamepad-3d-visual {
    position: relative;
    z-index: 3;
    animation: floatController 6s infinite ease-in-out alternate;
}

@keyframes floatController {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(3px); }
}

@media (max-width: 991px) {
    .hero-right-stage { display: none; }
}

/* 3. Category Filter Deck with Cyan Neon Glowing Border */
.category-filter-card {
    background: rgba(14, 11, 28, 0.94) !important;
    backdrop-filter: blur(20px);
    border-radius: 26px;
    padding: 1.35rem 1.8rem;
    margin-bottom: 2rem;
    box-shadow: 0 18px 50px rgba(8, 9, 21, 0.7), 0 0 25px rgba(0, 210, 255, 0.35);
    border: 1.6px solid #00d2ff;
}

.category-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cat-deck-icon {
    font-size: 1.4rem;
}

.cat-deck-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
}

.category-header-right {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.category-filter-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
}

.cat-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    outline: none;
    user-select: none;
}

.cat-tab-icon {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* 🌸 Flower Rotating / Spinning Animation */
.cat-filter-relaxation .cat-tab-icon {
    display: inline-block;
    animation: spinFlower 7s linear infinite;
    transform-origin: center center;
}

@keyframes spinFlower {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 🎵 Music Playing / Bouncing Rhythm Animation */
.cat-filter-nostalgia .cat-tab-icon {
    display: inline-block;
    animation: musicPlaying 1.35s ease-in-out infinite;
    transform-origin: 50% 90%;
}

@keyframes musicPlaying {
    0%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.4));
    }
    25% {
        transform: translateY(-5px) scale(1.18) rotate(-14deg);
        filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
    }
    50% {
        transform: translateY(0) scale(1.05) rotate(0deg);
        filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.5));
    }
    75% {
        transform: translateY(-5px) scale(1.18) rotate(14deg);
        filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
    }
}

/* ✋ Hand Waving / Shaking Animation */
.cat-filter-motor .cat-tab-icon {
    display: inline-block;
    animation: handShaking 1.7s ease-in-out infinite;
    transform-origin: 75% 75%;
}

@keyframes handShaking {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(18deg); }
    30% { transform: rotate(-16deg); }
    45% { transform: rotate(16deg); }
    60% { transform: rotate(-12deg); }
    75% { transform: rotate(8deg); }
}

/* 🧠 Thinking Brain Glowing Pulse Animation */
.cat-filter-cognitive .cat-tab-icon {
    display: inline-block;
    animation: brainThinking 2.2s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes brainThinking {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(255, 65, 108, 0.4));
    }
    50% {
        transform: scale(1.22);
        filter: drop-shadow(0 0 10px rgba(255, 65, 108, 0.9));
    }
}

/* 👥 Social People Bouncing / Nodding Animation */
.cat-filter-social .cat-tab-icon {
    display: inline-block;
    animation: socialBouncing 2.4s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes socialBouncing {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-4px) scale(1.12); }
    65% { transform: translateY(0) scale(1.04); }
}

/* ⭐ All Games Star Shimmer & Twinkle Animation */
.cat-filter-all .cat-tab-icon {
    display: inline-block;
    animation: starShimmer 2s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes starShimmer {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
    }
    50% {
        transform: scale(1.25) rotate(18deg);
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.95));
    }
}

/* 🎮 Header Deck Controller Floating Wobble */
.cat-deck-icon {
    display: inline-block;
    animation: gamepadFloat 3s ease-in-out infinite;
}

@keyframes gamepadFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-3px) rotate(-6deg); }
    70% { transform: translateY(-3px) rotate(6deg); }
}

.cat-tab-title {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.cat-tab-count {
    font-size: 0.82rem;
    font-weight: 700;
    opacity: 0.85;
}

.cat-filter-btn:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.cat-filter-btn.active {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.75), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-3px) scale(1.03);
    color: #ffffff !important;
}

/* 4. Game Cards Grid & Cards (.game-card-v2) */
.games-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.6rem;
}

.game-card-v2 {
    background: rgba(16, 12, 34, 0.95) !important;
    backdrop-filter: blur(16px);
    border-radius: 24px;
    border: 1.6px solid #00d2ff;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(8, 9, 21, 0.7), 0 0 20px rgba(0, 210, 255, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.game-card-v2:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 55px rgba(8, 9, 21, 0.85), 0 0 30px rgba(0, 210, 255, 0.55);
    border-color: #38bdf8;
}

.game-card-thumb-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #080915;
}

.game-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.game-card-v2:hover .game-card-thumb-wrap img {
    transform: scale(1.06);
}

.game-card-cat-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 10px rgba(236, 72, 153, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.game-card-level-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(14, 11, 28, 0.9);
    backdrop-filter: blur(8px);
    color: #ffd166;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 209, 102, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.game-card-content-wrap {
    padding: 1.3rem 1.4rem 0.4rem;
}

.game-card-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.35rem;
    color: #ffffff;
    margin: 0 0 0.4rem;
    font-weight: 800;
    line-height: 1.25;
}

.game-card-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0 0 1rem;
    min-height: 2.6rem;
}

.game-card-progress-section {
    margin-top: 0.5rem;
}

.card-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.35rem;
}

.card-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    overflow: hidden;
}

.card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd166, #ff8c00);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 209, 102, 0.8);
    transition: width 0.4s ease;
}

.game-card-actions-wrap {
    padding: 0.8rem 1.4rem 1.35rem;
    display: flex;
    gap: 0.65rem;
}

.game-card-play-btn {
    background: linear-gradient(90deg, #ff007f 0%, #ff7a00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.75rem 1.4rem !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(255, 0, 127, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    flex: 1 !important;
    cursor: pointer;
}

.game-card-play-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 28px rgba(255, 0, 127, 0.65) !important;
    filter: brightness(1.12);
}

.game-card-gear-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    padding: 0.75rem 1.1rem !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    cursor: pointer;
}

.game-card-gear-btn:hover {
    border-color: #ffd166 !important;
    color: #ffd166 !important;
    background: rgba(255, 209, 102, 0.15) !important;
    transform: translateY(-2px);
}

/* Bottom Quick Links Card */
.gaming-bottom-links-card {
    margin-top: 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.4rem 1.8rem;
    background: rgba(14, 11, 28, 0.94);
    border-radius: 22px;
    box-shadow: 0 14px 40px rgba(8, 9, 21, 0.7);
    border: 1.5px solid rgba(0, 210, 255, 0.4);
}

/* =============================================================
   3. GLOBAL FLOATING SOUND WIDGET
   ============================================================= */
.jaish-audio-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

.audio-toggle-bubble {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3d00 0%, #ff8500 50%, #ffa100 100%);
    color: #ffffff;
    border: 2.5px solid #ffffff;
    box-shadow: 0 8px 25px rgba(255, 61, 0, 0.55), 0 0 22px rgba(255, 133, 0, 0.75);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    outline: none;
    font-size: 1.35rem;
    line-height: 1;
}

.audio-toggle-bubble:hover {
    transform: scale(1.12);
    box-shadow: 0 12px 32px rgba(255, 61, 0, 0.7), 0 0 30px rgba(255, 133, 0, 0.95);
}

.audio-bubble-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 3px;
    color: #ffffff;
}

.audio-control-popup {
    position: absolute;
    bottom: 78px;
    right: 0;
    width: 290px;
    background: rgba(16, 12, 34, 0.96);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 16px 45px rgba(8, 9, 21, 0.8), 0 0 20px rgba(255, 133, 0, 0.3);
    border: 1.5px solid rgba(255, 133, 0, 0.4);
    animation: popIn 0.25s ease forwards;
}

.audio-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(36, 23, 18, 0.08);
}

.audio-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--dark-brown, #241712);
}

.audio-close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: rgba(36, 23, 18, 0.5);
    line-height: 1;
}

.audio-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.audio-lbl-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark-brown, #241712);
}

.audio-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.audio-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.audio-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}

.audio-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .audio-slider {
    background-color: #27ae60;
}

input:checked + .audio-slider:before {
    transform: translateX(20px);
}

.audio-volume-slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.audio-range {
    flex: 1;
    accent-color: var(--accent, #e04b3b);
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
}

.audio-vol-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(36, 23, 18, 0.65);
    min-width: 35px;
    text-align: right;
}

.audio-popup-footer {
    border-top: 1px solid rgba(36, 23, 18, 0.08);
    padding-top: 0.75rem;
    margin-top: 0.85rem;
    text-align: center;
    color: rgba(36, 23, 18, 0.5);
    font-size: 0.75rem;
}

/* =============================================================
   4. LEVEL SELECTION MODAL
   ============================================================= */
.jaish-level-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(36, 23, 18, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.level-modal-content {
    background: #ffffff;
    border-radius: 24px;
    max-width: 580px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.25rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.level-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid rgba(36, 23, 18, 0.08);
}

.level-modal-close {
    background: rgba(36, 23, 18, 0.06);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark-brown, #241712);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.level-modal-close:hover {
    background: rgba(224, 75, 59, 0.15);
    color: var(--accent, #e04b3b);
}

.level-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.level-card-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--primary-bg, #fcf6f4);
    border-radius: 14px;
    border: 1.5px solid rgba(36, 23, 18, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
}

.level-card-item:hover {
    transform: scale(1.02);
    border-color: var(--accent, #e04b3b);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(224, 75, 59, 0.12);
}

.level-card-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e04b3b 0%, #f39c12 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(224, 75, 59, 0.3);
}

.level-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--dark-brown, #241712);
    margin-bottom: 0.2rem;
}

.level-card-desc {
    font-size: 0.85rem;
    color: rgba(36, 23, 18, 0.68);
}

.level-play-btn {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.9rem !important;
    border-radius: 50px !important;
}

.level-modal-footer {
    text-align: center;
    margin-top: 1.75rem;
}

/* =============================================================
   5. ACHIEVEMENTS & TOAST NOTIFICATION
   ============================================================= */
.jaish-achievement-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10001;
    display: none;
}

.achievement-toast-card {
    background: linear-gradient(135deg, #2b1b17 0%, #4a2720 100%);
    color: #ffffff;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    border: 2px solid #ffd166;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 360px;
}

.achievement-icon-glow {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.6));
    animation: bounce 1.2s infinite alternate;
}

.achievement-badge-pill {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffd166;
    margin-bottom: 0.2rem;
}

.achievement-toast-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
}

.achievement-toast-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.15rem;
}

/* =============================================================
   6. CATEGORY FILTER TABS & FOCUS WELLNESS MODAL
   ============================================================= */
.cat-filter-btn {
    background: #ffffff;
    color: var(--dark-brown);
    border: 1.5px solid rgba(36, 23, 18, 0.12);
    padding: 0.65rem 1.35rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(36, 23, 18, 0.04);
}

.cat-filter-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 6px 16px rgba(224, 75, 59, 0.15);
}

.cat-filter-btn.active {
    background: linear-gradient(135deg, #e04b3b 0%, #f39c12 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(224, 75, 59, 0.35);
}

/* Full-Screen / Full-Page Senior Wellness Popup Modal */
.full-wellness-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(18, 10, 8, 0.88);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    animation: fadeIn 0.25s ease-out;
}

.full-wellness-popup-card {
    background: linear-gradient(145deg, #2b1710 0%, #1c0e08 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    width: 100%;
    max-width: 760px;
    padding: 2.75rem 2.5rem;
    color: #ffffff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
    position: relative;
    text-align: center;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.popup-mood-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.popup-mood-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 1.4rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popup-mood-btn:hover, .popup-mood-btn:focus {
    transform: translateY(-5px) scale(1.04);
    background: linear-gradient(135deg, rgba(224,75,59,0.35), rgba(243,156,18,0.35));
    border-color: #ffd166;
    box-shadow: 0 10px 25px rgba(243, 156, 18, 0.25);
}

.popup-mood-emoji {
    font-size: 3.2rem;
    margin-bottom: 0.4rem;
    transition: transform 0.2s ease;
}

.popup-mood-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
}

.popup-mood-desc {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.15rem;
}

/* Breathing Pacer inside Popup */
.popup-breathing-box {
    margin: 2rem auto;
    position: relative;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-breathing-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
    border: 2px dashed rgba(16, 185, 129, 0.5);
    animation: breathPulse 8s infinite ease-in-out;
}

.popup-breathing-core {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    animation: breathCore 8s infinite ease-in-out;
}

/* Stretching & Posture Video Cards inside Popup */
.popup-stretch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
    text-align: left;
}

.popup-stretch-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.popup-stretch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 209, 102, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.popup-stretch-video-box {
    width: 100%;
    height: 180px;
    background: #000000;
    position: relative;
    overflow: hidden;
}

.popup-stretch-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popup-stretch-info {
    padding: 1.15rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.popup-stretch-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: #ffd166;
    margin: 0 0 0.35rem;
}

.popup-stretch-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
    margin: 0 0 0.6rem;
}

.popup-stretch-badge {
    font-size: 0.76rem;
    color: rgba(255, 209, 102, 0.85);
    font-weight: 600;
}

.focus-step-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.focus-step-indicator.active {
    background: linear-gradient(135deg, #e04b3b 0%, #f39c12 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(224, 75, 59, 0.6);
}

.focus-step-indicator.completed {
    background: #27ae60;
    color: #ffffff;
    border-color: transparent;
}

/* Breathing Circle Animation */
.breathing-visual-box {
    margin: 2rem auto;
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breathing-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(59, 130, 246, 0.15) 100%);
    border: 2px dashed rgba(16, 185, 129, 0.4);
    animation: breathPulse 8s infinite ease-in-out;
}

.breathing-ring-inner {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: breathCore 8s infinite ease-in-out;
}

@keyframes breathPulse {
    0%, 100% { transform: scale(0.85); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.9; }
}

@keyframes breathCore {
    0%, 100% { transform: scale(0.9); }
    50% { transform: scale(1.15); }
}

/* =============================================================
   7. ANIMATIONS & RESPONSIVE
   ============================================================= */
@keyframes popIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

@media (max-width: 992px) {
    .gaming-hero-title { font-size: 2.3rem; }
    .gaming-hero-banner { padding: 2.5rem 1.75rem; }
    .gaming-hero-content { flex-direction: column; align-items: flex-start; }
    .gaming-hero-stats-card { width: 100%; }
}

@media (max-width: 600px) {
    .gaming-hero-title { font-size: 1.9rem; }
    .btn-gaming-start { width: 100%; justify-content: center; }
    .game-cards-grid { grid-template-columns: 1fr; }
    .jaish-audio-widget { bottom: 16px; right: 16px; }
    .audio-toggle-bubble { width: 54px; height: 54px; font-size: 1.2rem; }
    .audio-control-popup { width: 260px; }
    .focus-wellness-container { padding: 2rem 1.25rem; }
}

/* =============================================================
   8. DYNAMIC ANIMATED DEEP DARK GAMING ZONE BACKGROUND
   ============================================================= */
/* =============================================================
   8. DYNAMIC ANIMATED DEEP DARK GAMING ZONE BACKGROUND (ROOM ATMOSPHERE)
   ============================================================= */
body:has(.gaming-hub-wrapper),
body:has(.rec-page-container),
body:has(.game-zone-result-card),
body:has(.games-page),
body:has(.game-container),
body.embed-game-body,
.embed-game-body,
body.gaming-lounge-theme {
    background: #080a18 !important;
    color: #ffffff !important;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Blurred Ambient Room Backdrop for All Game Pages */
body:has(.gaming-hub-wrapper)::before,
body:has(.rec-page-container)::before,
body:has(.game-zone-result-card)::before,
body:has(.games-page)::before,
body:has(.game-container)::before,
body.embed-game-body::before,
.embed-game-body::before,
body.gaming-lounge-theme::before {
    content: '';
    position: fixed;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: url('../images/games/gaming_lounge_backdrop.jpg') center top / cover no-repeat !important;
    filter: blur(28px) brightness(0.38) saturate(1.3);
    -webkit-filter: blur(28px) brightness(0.38) saturate(1.3);
    z-index: 0;
    pointer-events: none;
    transform: scale(1.15);
}

body:has(.gaming-hub-wrapper) .app-container,
body:has(.rec-page-container) .app-container,
body:has(.game-zone-result-card) .app-container,
body:has(.games-page) .app-container,
body:has(.game-container) .app-container,
body.embed-game-body .app-container {
    position: relative;
    z-index: 1;
}

body:has(.gaming-hub-wrapper) .gaming-hub-wrapper,
body:has(.rec-page-container) .rec-page-container {
    position: relative;
    z-index: 1;
}

.gaming-ambient-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background: transparent;
}

/* Warm Cozy Room Lamps & Lighting (Reference Visual Match) */
.ambient-lamp {
    position: absolute;
    width: 60px;
    height: 90px;
    z-index: 1;
    pointer-events: none;
}

.ambient-lamp-left {
    top: 50px;
    left: calc(50% - 620px);
}

.ambient-lamp-right {
    top: 80px;
    right: calc(50% - 610px);
}

.lamp-shade {
    width: 44px;
    height: 34px;
    background: linear-gradient(180deg, #ff9900 0%, #ff5500 100%);
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    border-radius: 4px;
    box-shadow: 0 0 25px rgba(255, 153, 0, 0.9), 0 0 50px rgba(255, 85, 0, 0.6);
}

.lamp-glow-cone {
    position: absolute;
    top: 30px;
    left: -60px;
    width: 165px;
    height: 220px;
    background: radial-gradient(ellipse at top center, rgba(255, 170, 0, 0.35) 0%, rgba(255, 120, 0, 0.12) 45%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.ambient-wall-star {
    position: absolute;
    top: 45px;
    right: calc(50% - 460px);
    opacity: 0.85;
    filter: drop-shadow(0 0 16px rgba(255, 140, 0, 0.85));
    z-index: 1;
    animation: floatSideNeon 8s infinite ease-in-out alternate;
}

.ambient-wall-square {
    position: absolute;
    top: 40px;
    left: calc(50% - 20px);
    opacity: 0.75;
    filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.85));
    z-index: 1;
}

/* Floating Side Neon Elements */
.neon-side-wings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.neon-side-item {
    position: absolute;
    pointer-events: none;
    animation: floatSideNeon 6s infinite ease-in-out alternate;
}

.neon-item-left-1 { top: 380px; left: calc(50% - 640px); animation-delay: 0s; }
.neon-item-left-2 { top: 510px; left: calc(50% - 650px); animation-delay: -2s; }
.neon-item-left-3 { top: 640px; left: calc(50% - 635px); animation-delay: -4s; }

.neon-item-right-1 { top: 400px; right: calc(50% - 640px); animation-delay: -1s; }
.neon-item-right-2 { top: 530px; right: calc(50% - 655px); animation-delay: -3s; }
.neon-item-right-3 { top: 660px; right: calc(50% - 635px); animation-delay: -5s; }

@keyframes floatSideNeon {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-14px) scale(1.05); }
}

@media (max-width: 1350px) {
    .neon-side-wings, .ambient-lamp, .ambient-wall-star, .ambient-wall-square {
        display: none !important;
    }
}

/* =============================================================
   HERO BANNER - CINEMATIC 3D GAMING LOUNGE
   ============================================================= */
.gaming-hero-banner {
    position: relative;
    z-index: 12 !important;
    border-radius: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    background: rgba(14, 10, 30, 0.55) !important;
    backdrop-filter: blur(3px);
    padding: 1.25rem 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.hero-left-content {
    max-width: 620px;
    position: relative;
    z-index: 3;
}

.hero-main-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.hero-gradient-text {
    background: linear-gradient(90deg, #ff7a00 0%, #ff007f 60%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-main-desc {
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.hero-right-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}

.btn-gaming-start {
    background: linear-gradient(135deg, #ff007f 0%, #ff5e3a 50%, #ff9500 100%);
    color: #ffffff !important;
    padding: 0.75rem 1.6rem;
    border-radius: 50px;
    font-size: 0.96rem;
    font-weight: 800;
    border: none;
    box-shadow: 0 6px 20px rgba(255, 0, 127, 0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-gaming-start:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 25px rgba(255, 0, 127, 0.55);
}

.hero-btn-history {
    background: rgba(255, 255, 255, 0.07);
    border: 1.4px solid rgba(255, 180, 0, 0.55);
    color: #ffd166 !important;
    padding: 0.75rem 1.4rem;
    border-radius: 50px;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.hero-btn-history:hover {
    background: rgba(255, 180, 0, 0.15);
    transform: translateY(-2px);
    border-color: #ffd166;
}

@media (max-width: 991px) {
    .gaming-hero-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.4rem 1.5rem;
        gap: 1.2rem;
    }
    .hero-left-content {
        max-width: 100%;
    }
    .hero-main-title {
        font-size: 1.65rem;
    }
    .hero-right-actions {
        width: 100%;
    }
}

/* =============================================================
   CATEGORY LOBBY DECK (CYAN NEON GLOWING BORDER)
   ============================================================= */
.category-filter-card {
    position: relative;
    z-index: 12 !important;
    background: rgba(10, 14, 34, 0.72) !important;
    backdrop-filter: blur(4px);
    border: 2px solid #00d2ff !important;
    box-shadow: 0 0 28px rgba(0, 210, 255, 0.45), inset 0 0 18px rgba(0, 210, 255, 0.15) !important;
    border-radius: 22px !important;
    padding: 1.4rem 2rem !important;
    margin-bottom: 2rem !important;
}

.category-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-header-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cat-deck-icon {
    font-size: 1.4rem;
}

.cat-deck-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.category-header-right {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.category-filter-tabs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.cat-filter-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1.2px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    padding: 0.6rem 1.35rem;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cat-filter-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.35);
}

.cat-filter-btn.active {
    background: linear-gradient(135deg, #9333ea 0%, #c026d3 50%, #ec4899 100%) !important;
    border: 1.6px solid #f472b6 !important;
    box-shadow: 0 0 22px rgba(192, 38, 211, 0.7) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* =============================================================
   GAME CARDS GRID - VIBRANT ARCADE TILES
   ============================================================= */
.games-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

@media (max-width: 1024px) {
    .games-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .games-grid-layout {
        grid-template-columns: 1fr;
    }
}

.game-card-v2 {
    position: relative;
    z-index: 12 !important;
    background: rgba(10, 14, 34, 0.75) !important;
    backdrop-filter: blur(4px);
    border-radius: 22px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border: 2px solid #00d2ff !important;
    box-shadow: 0 0 22px rgba(0, 210, 255, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.game-card-v2:nth-child(2) {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.35) !important;
}

.game-card-v2:nth-child(3) {
    border-color: #a855f7 !important;
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.35) !important;
}

.game-card-v2:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 35px rgba(0, 210, 255, 0.5) !important;
}

.game-card-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #000;
}

.game-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.game-card-v2:hover .game-card-thumb-wrap img {
    transform: scale(1.06);
}

.game-card-cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(147, 51, 234, 0.9);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
    letter-spacing: 0.8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.game-card-level-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: #ffd166;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.game-card-content-wrap {
    padding: 1.4rem 1.4rem 0.8rem;
}

.game-card-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0 0 0.45rem 0;
    line-height: 1.25;
}

.game-card-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 1.1rem;
    min-height: 42px;
}

.game-card-progress-section {
    margin-bottom: 0.5rem;
}

.card-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.35rem;
}

.card-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    overflow: hidden;
}

.card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffb703, #fbbf24);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
    border-radius: 50px;
}

.game-card-actions-wrap {
    padding: 0 1.4rem 1.4rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.game-card-play-btn {
    flex: 1;
    background: linear-gradient(90deg, #ff007a 0%, #ff5e3a 50%, #ff9500 100%);
    color: #ffffff !important;
    font-size: 0.98rem;
    font-weight: 800;
    padding: 0.7rem 1.2rem;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 6px 18px rgba(255, 0, 127, 0.4);
    transition: all 0.25s ease;
}

.game-card-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 0, 127, 0.6);
}

.game-card-gear-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1.4px solid rgba(255, 255, 255, 0.22);
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.7rem 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.25s ease;
}

.game-card-gear-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

/* =============================================================
   FLOATING ORANGE SOUND TOGGLE (BOTTOM RIGHT)
   ============================================================= */
.audio-toggle-bubble {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35 0%, #f72585 100%);
    border: 3.5px solid #ffffff;
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.85), 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.audio-toggle-bubble:hover {
    transform: scale(1.12) translateY(-4px);
    box-shadow: 0 0 35px rgba(255, 107, 53, 1), 0 15px 35px rgba(0, 0, 0, 0.6);
}

.audio-bubble-icon {
    font-size: 1.45rem;
    line-height: 1;
}

.audio-bubble-label {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    margin-top: 2px;
    text-transform: uppercase;
}

.gaming-bottom-links-card {
    position: relative;
    z-index: 12 !important;
    background: rgba(10, 14, 34, 0.72) !important;
    backdrop-filter: blur(4px);
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px;
    padding: 1.4rem 2rem;
    margin-top: 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header,
.site-header,
.footer,
.site-footer {
    position: relative;
    z-index: 100 !important;
    background-color: var(--dark-brown, #241712) !important;
}

/* =============================================================
   9. IN-HUB GAME PLAY MODAL POPUP
   ============================================================= */
/* Background Blur when Game Play Modal is Active */
body.game-modal-open .gaming-hub-wrapper,
body.game-modal-open .header,
body.game-modal-open footer {
    filter: blur(18px) brightness(0.55) !important;
    -webkit-filter: blur(18px) brightness(0.55) !important;
    transition: filter 0.3s ease !important;
    pointer-events: none !important;
}

.game-play-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 7, 18, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 1vw;
    overflow: hidden;
    animation: fadeIn 0.25s ease-out;
}

.game-play-modal-container {
    background: #ffffff;
    border-radius: 24px;
    width: 96vw;
    max-width: 1120px;
    height: 96vh;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(255, 0, 127, 0.25);
    border: 2px solid rgba(0, 210, 255, 0.45);
    border-radius: 24px;
    background: #090c1e;
    position: relative;
    animation: popIn 0.3s ease-out;
}

.game-play-modal-header {
    background: #070918 !important;
    color: #ffffff;
    padding: 0.65rem 1.6rem;
    min-height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
}

.game-play-modal-header button[onclick*="closeGamePlayModal"]:first-child {
    background: rgba(14, 24, 52, 0.9) !important;
    border: 1.8px solid #38bdf8 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 0.45rem 1.25rem !important;
    font-weight: 700 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
    transition: all 0.2s ease !important;
}

.game-play-modal-header button[onclick*="closeGamePlayModal"]:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.6) !important;
}

.game-play-modal-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
}

.game-play-modal-level-badge {
    background: linear-gradient(135deg, #ff007f 0%, #ff5e3a 50%, #ff9500 100%) !important;
    color: #ffffff !important;
    font-size: 0.82rem;
    font-weight: 900;
    padding: 0.35rem 1.1rem;
    border-radius: 50px;
    letter-spacing: 0.8px;
    box-shadow: 0 0 16px rgba(255, 94, 58, 0.7);
    border: none !important;
    text-transform: uppercase;
}

.game-play-modal-header #modalMusicToggleBtn {
    background: rgba(22, 16, 45, 0.9) !important;
    border: 1.8px solid #a855f7 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 0.45rem 1.15rem !important;
    font-weight: 800 !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4) !important;
    transition: all 0.2s ease !important;
}

.game-play-modal-header button[onclick*="restartCurrentGame"] {
    background: rgba(14, 24, 52, 0.9) !important;
    border: 1.8px solid #38bdf8 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 0.45rem 1.15rem !important;
    font-weight: 800 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
    transition: all 0.2s ease !important;
}

.game-play-modal-header button[onclick*="closeGamePlayModal"]:last-child {
    background: rgba(45, 12, 28, 0.9) !important;
    border: 1.8px solid #ff007f !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 0.45rem 1.15rem !important;
    font-weight: 800 !important;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.4) !important;
    transition: all 0.2s ease !important;
}

.game-play-iframe {
    width: 100%;
    height: calc(100% - 56px);
    border: none;
    background: transparent !important;
    flex: 1;
    overflow: hidden;
}

/* Also support in-hub-game-modal-overlay alias */
.in-hub-game-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 7, 18, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 1vw;
    overflow: hidden;
    animation: fadeIn 0.25s ease-out;
}

/* Level Selection Modal Dialog */
.level-select-modal-dialog {
    background: linear-gradient(145deg, #1e1338, #110924);
    border: 2px solid rgba(245, 158, 11, 0.5);
    border-radius: 24px;
    width: 92vw;
    max-width: 600px;
    padding: 2rem 1.75rem;
    color: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(245, 158, 11, 0.25);
    animation: popIn 0.25s ease-out;
    position: relative;
    z-index: 1000000;
}
.level-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}
@media (max-width: 600px) {
    .level-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.level-card-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 0.85rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.level-card-item:hover {
    transform: translateY(-3px);
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}
.level-card-item.completed {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}
.level-card-item.locked {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
}
.level-card-item .lvl-num {
    font-size: 1rem;
    font-weight: 800;
    color: #ffd166;
    margin-bottom: 0.3rem;
}
.level-card-item .lvl-status {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}
.level-card-item .lvl-score {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

/* =============================================================
   GLOBAL GAME-PLAYING UI (REFERENCE DESIGN SOURCE OF TRUTH)
   ============================================================= */
html.embed-game-html,
html:has(.embed-game-body),
body.embed-game-body,
.embed-game-body {
    background: #080a18 !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
}

/* Vibrant Photorealistic Gaming Room Backdrop from Reference Image */
.embed-game-body::before {
    content: '';
    position: fixed;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: url('../images/games/gaming_lounge_backdrop.jpg') center top / cover no-repeat !important;
    filter: blur(28px) brightness(0.38) saturate(1.3);
    -webkit-filter: blur(28px) brightness(0.38) saturate(1.3);
    z-index: 0;
    pointer-events: none;
    transform: scale(1.15);
}

.embed-game-body .app-container {
    position: relative !important;
    z-index: 1 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Enable smooth scrolling & dragging for Result Page or any embed page needing scrolling */
body.embed-game-body.is-result-page,
body.embed-game-body:has(.game-result-wrapper) {
    overflow-y: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

body.embed-game-body.is-result-page .app-container,
body.embed-game-body:has(.game-result-wrapper) .app-container {
    overflow-y: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: block !important;
}

body.embed-game-body.is-result-page .main-content,
body.embed-game-body:has(.game-result-wrapper) .main-content {
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 0.5rem 1rem !important;
}

/* Custom Senior-Friendly Scrollbars */
body.embed-game-body::-webkit-scrollbar,
body.embed-game-body .app-container::-webkit-scrollbar,
.game-play-iframe::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.embed-game-body::-webkit-scrollbar-track,
body.embed-game-body .app-container::-webkit-scrollbar-track,
.game-play-iframe::-webkit-scrollbar-track {
    background: rgba(10, 14, 30, 0.6);
}
body.embed-game-body::-webkit-scrollbar-thumb,
body.embed-game-body .app-container::-webkit-scrollbar-thumb,
.game-play-iframe::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff6b6b 0%, #ff8e53 100%);
    border-radius: 10px;
}

.embed-game-body .main-content,
.embed-game-body .embed-main-content {
    flex: 1 1 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.4rem 1.5rem !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.embed-game-body .games-page,
.embed-game-body .section-padding,
.embed-game-body .container {
    flex: 1 1 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 900px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Post-it Sticky Note (Already embedded in the reference room wallpaper outside the game box) */
.embed-game-body .games-page::before {
    display: none !important;
}

/* Main Central Neon Glowing Glass Arena Panel */
.embed-game-body .game-container {
    flex: 1 1 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0.85rem 1.6rem 0.65rem !important;
    background: rgba(12, 15, 34, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 24px !important;
    border: 2px solid #ff007f !important;
    box-shadow: 0 0 35px rgba(255, 0, 127, 0.35), 0 0 70px rgba(0, 210, 255, 0.2), inset 0 0 25px rgba(168, 85, 247, 0.15) !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    position: relative !important;
    color: #ffffff !important;
}

.embed-game-body .game-container::-webkit-scrollbar {
    width: 6px;
}
.embed-game-body .game-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.embed-game-body .game-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff007f, #00d2ff);
    border-radius: 10px;
}

/* Non-embedded standalone game page container */
.games-page:not(.embed-game-body .games-page) .game-container {
    background: rgba(18, 14, 32, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.15) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
}
.games-page:not(.embed-game-body .games-page) .game-container h1,
.games-page:not(.embed-game-body .games-page) .game-container h2,
.games-page:not(.embed-game-body .games-page) .game-container h3,
.games-page:not(.embed-game-body .games-page) .game-container p,
.games-page:not(.embed-game-body .games-page) .game-container span[style*="color: var(--dark-brown)"] {
    color: #ffffff !important;
}

/* Pre-Game Screens Dark Theme Cohesion */
.games-page .mood-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #ffffff !important;
}
.games-page .mood-btn span {
    color: #ffffff !important;
}
.games-page .mood-btn:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    transform: translateY(-4px);
}
.games-page .stretch-card {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
.games-page .stretch-card .stretch-title {
    color: #ffd166 !important;
}
.games-page .stretch-card .stretch-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}
.games-page .timer-countdown-box {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #ffffff !important;
}
.games-page #timerCountdown {
    color: #ffffff !important;
}
.games-page #stretchTimerNotice {
    color: #a7f3d0 !important;
}

.game-container::before,
.embed-game-body .game-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff007f 0%, #a855f7 35%, #00d2ff 70%, #ff9500 100%);
    border-radius: 24px 24px 0 0;
    z-index: 5;
}

/* Header Row inside Game Frame */
.embed-game-body .game-container > div:first-child {
    margin-bottom: 0.35rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.embed-game-body .eyebrow {
    display: none !important;
}

.embed-game-body h1,
.game-container h1 {
    font-size: 1.35rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.embed-game-body h1 span,
.game-container h1 span {
    color: #ffd166 !important;
}

.embed-game-body p,
.embed-game-body #levelInstructions,
.embed-game-body #rhythmTitle {
    font-size: 0.88rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Universal Senior-Friendly High-Contrast Text Overrides */
.embed-game-body [style*="color: var(--dark-brown)"],
.embed-game-body [style*="color: #241712"],
.embed-game-body [style*="color: rgba(36, 23, 18"],
.embed-game-body [style*="color: rgba(36,23,18"] {
    color: #ffffff !important;
}

.embed-game-body [style*="color: var(--accent)"] {
    color: #ffd166 !important;
}

/* Badges inside Game Header (Level / Pairs / Moves) */
.embed-game-body .game-container > div:first-child > div:last-child {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.embed-game-body .game-container > div:first-child .badge,
.embed-game-body .game-container > div:first-child div[style*="border-radius: 50px"] {
    padding: 0.3rem 0.95rem !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

/* 1st Badge (Level): Gold/Amber */
.embed-game-body .game-container > div:first-child div[style*="border-radius: 50px"]:nth-child(1) {
    background: rgba(251, 191, 36, 0.15) !important;
    border: 1.5px solid #fbbf24 !important;
    color: #ffd166 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.35) !important;
}

/* 2nd Badge (Pairs / Primary Metric): Emerald Green */
.embed-game-body .game-container > div:first-child div[style*="border-radius: 50px"]:nth-child(2) {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1.5px solid #10b981 !important;
    color: #34d399 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35) !important;
}

/* 3rd Badge (Moves / Secondary Metric): Purple/Violet */
.embed-game-body .game-container > div:first-child div[style*="border-radius: 50px"]:nth-child(3) {
    background: rgba(168, 85, 247, 0.15) !important;
    border: 1.5px solid #a855f7 !important;
    color: #c084fc !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.35) !important;
}

/* Level Navigation Pills Bar */
.embed-game-body .game-container > div:has(> a[href*="level="]),
.embed-game-body .game-container > div:has(> button[href*="level="]),
.embed-game-body .game-container > div:has(> button[onclick*="selectLevel"]),
.embed-game-body .game-container > div:has(> button[onclick*="loadLevel"]) {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important;
    padding: 0.25rem 0.5rem !important;
    display: inline-flex !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    margin: 0 auto 0.45rem !important;
    width: fit-content !important;
}

.embed-game-body a.btn-primary,
.embed-game-body button.btn-primary {
    background: linear-gradient(135deg, #ff007f 0%, #ff5e3a 50%, #ff9500 100%) !important;
    border: 1.5px solid #ffe066 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    padding: 0.28rem 0.95rem !important;
    font-size: 0.82rem !important;
    box-shadow: 0 0 18px rgba(255, 94, 58, 0.8) !important;
}

.embed-game-body a.btn-outline,
.embed-game-body button.btn-outline {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #cbd5e1 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    padding: 0.28rem 0.9rem !important;
    font-size: 0.82rem !important;
    transition: all 0.2s ease !important;
}

.embed-game-body a.btn-outline:hover,
.embed-game-body button.btn-outline:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

/* Inner Gameplay Arena Container (Subtle Neon Dashed Stage) */
.embed-game-body .memory-board-wrapper,
.embed-game-body .unscramble-play-wrapper,
.embed-game-body .trivia-play-wrapper,
.embed-game-body .tambola-play-wrapper,
.embed-game-body .breathing-play-wrapper {
    background: rgba(7, 10, 24, 0.55) !important;
    border: 1.5px dashed rgba(168, 85, 247, 0.35) !important;
    border-radius: 20px !important;
    padding: 0.75rem 1rem !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Memory Match Cards (Exact 100% Visual Parity with Reference Photo) */
.embed-game-body #memoryBoard,
.embed-game-body .memory-board {
    margin: 0 auto !important;
    display: grid !important;
    justify-content: center !important;
    align-content: center !important;
}

.embed-game-body .memory-card-wrap {
    perspective: 1000px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.embed-game-body .memory-card-wrap:hover {
    transform: scale(1.08) translateY(-3px) !important;
}

.embed-game-body .memory-card-back {
    background: linear-gradient(145deg, #ff2a85 0%, #ff5e3a 45%, #ff9500 100%) !important;
    border: 2.5px solid #ffe066 !important;
    box-shadow: 0 8px 25px rgba(255, 42, 133, 0.45), 0 0 15px rgba(255, 149, 0, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.embed-game-body .card-back-ornament {
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1.5px dashed rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.embed-game-body .card-back-ornament::after {
    content: "⭐";
    line-height: 1 !important;
}

.embed-game-body .memory-card-front {
    background: linear-gradient(145deg, #ffffff 0%, #fffcf5 100%) !important;
    border: 2.5px solid #38bdf8 !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.embed-game-body .memory-card-wrap.is-matched .memory-card-front {
    background: linear-gradient(145deg, #eafaf1 0%, #d5f5e3 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.7) !important;
}

/* 4 Columns: Level 1 (4x3 = 12 cards), Level 2 (4x4 = 16 cards) */
.embed-game-body .board-cols-4 {
    gap: 0.7rem !important;
}
.embed-game-body .board-cols-4 .memory-card-wrap {
    width: 82px !important;
    height: 82px !important;
}
.embed-game-body .board-cols-4 .memory-card-back,
.embed-game-body .board-cols-4 .memory-card-front {
    border-radius: 16px !important;
}
.embed-game-body .board-cols-4 .card-back-ornament {
    width: 38px !important;
    height: 38px !important;
}
.embed-game-body .board-cols-4 .card-back-ornament::after {
    font-size: 1.35rem !important;
}
.embed-game-body .board-cols-4 .memory-card-front {
    font-size: 2.2rem !important;
}

/* 5 Columns: Level 3 (5x4 = 20 cards) */
.embed-game-body .board-cols-5 {
    gap: 0.55rem !important;
}
.embed-game-body .board-cols-5 .memory-card-wrap {
    width: 70px !important;
    height: 70px !important;
}
.embed-game-body .board-cols-5 .memory-card-back,
.embed-game-body .board-cols-5 .memory-card-front {
    border-radius: 14px !important;
}
.embed-game-body .board-cols-5 .card-back-ornament {
    width: 32px !important;
    height: 32px !important;
}
.embed-game-body .board-cols-5 .card-back-ornament::after {
    font-size: 1.15rem !important;
}
.embed-game-body .board-cols-5 .memory-card-front {
    font-size: 1.9rem !important;
}

/* 6 Columns: Level 4 (6x4 = 24 cards), Level 5 (6x5 = 30 cards) */
.embed-game-body .board-cols-6 {
    gap: 0.42rem !important;
}
.embed-game-body .board-cols-6 .memory-card-wrap {
    width: 56px !important;
    height: 56px !important;
}
.embed-game-body .board-cols-6 .memory-card-back,
.embed-game-body .board-cols-6 .memory-card-front {
    border-radius: 11px !important;
    border-width: 2px !important;
}
.embed-game-body .board-cols-6 .card-back-ornament {
    width: 26px !important;
    height: 26px !important;
    border-width: 1.2px !important;
}
.embed-game-body .board-cols-6 .card-back-ornament::after {
    font-size: 0.95rem !important;
}
.embed-game-body .board-cols-6 .memory-card-front {
    font-size: 1.6rem !important;
}

/* Specific extra compact refinement for Level 5 (6x5 = 30 cards) to guarantee zero arena overflow */
.embed-game-body .board-level-5,
.embed-game-body .board-cols-6.board-level-5 {
    gap: 0.36rem !important;
}
.embed-game-body .board-level-5 .memory-card-wrap,
.embed-game-body .board-cols-6.board-level-5 .memory-card-wrap {
    width: 52px !important;
    height: 52px !important;
}
.embed-game-body .board-level-5 .memory-card-back,
.embed-game-body .board-level-5 .memory-card-front,
.embed-game-body .board-cols-6.board-level-5 .memory-card-back,
.embed-game-body .board-cols-6.board-level-5 .memory-card-front {
    border-radius: 10px !important;
    border-width: 2px !important;
}
.embed-game-body .board-level-5 .card-back-ornament,
.embed-game-body .board-cols-6.board-level-5 .card-back-ornament {
    width: 24px !important;
    height: 24px !important;
}
.embed-game-body .board-level-5 .card-back-ornament::after,
.embed-game-body .board-cols-6.board-level-5 .card-back-ornament::after {
    font-size: 0.88rem !important;
}
.embed-game-body .board-level-5 .memory-card-front,
.embed-game-body .board-cols-6.board-level-5 .memory-card-front {
    font-size: 1.45rem !important;
}

/* Word Unscramble in Dark Neon Aesthetic */
.embed-game-body #userAnswer {
    min-height: 44px !important;
    height: 48px !important;
    font-size: 1.45rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.2rem !important;
    letter-spacing: 4px !important;
    border-radius: 16px !important;
    border: 2px dashed #00d2ff !important;
    background: rgba(0, 210, 255, 0.08) !important;
    color: #ffd166 !important;
    font-weight: 900 !important;
}

.embed-game-body #lettersContainer button {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ff007f 0%, #ff5e3a 50%, #ff9500 100%) !important;
    border: 2px solid #ffe066 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 94, 58, 0.45) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.embed-game-body #lettersContainer button:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 10px 24px rgba(255, 0, 127, 0.6) !important;
}

/* Trivia & Quiz Option Panels */
.embed-game-body .game-container > div[style*="background-color: var(--primary-bg)"],
.embed-game-body .game-container > div[style*="background: var(--primary-bg)"],
.embed-game-body .game-container > div[style*="background-color: var(--white)"],
.embed-game-body .game-container > div[style*="background: #fff8f5"],
.embed-game-body .game-container > div[style*="background: var(--white)"] {
    padding: 0.65rem 1.1rem !important;
    margin-bottom: 0.45rem !important;
    border-radius: 16px !important;
    background: rgba(16, 18, 42, 0.9) !important;
    border: 1.8px solid #a855f7 !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3) !important;
    color: #ffffff !important;
}

.embed-game-body #clueText,
.embed-game-body #questionText,
.embed-game-body #dialogueText,
.embed-game-body #lyricsText,
.embed-game-body #pollQuestion {
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Clue & Excerpt Eyebrow Labels */
.embed-game-body div[style*="letter-spacing: 1.2px"],
.embed-game-body span[style*="letter-spacing: 1px"],
.embed-game-body span[style*="letter-spacing: 1.2px"] {
    color: #ffd166 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(255, 209, 102, 0.5) !important;
}

.embed-game-body #wordProgressText,
.embed-game-body #qNum,
.embed-game-body #qTotal,
.embed-game-body #pollNum,
.embed-game-body #pollTotal,
.embed-game-body #roundNum,
.embed-game-body #roundTotal {
    color: #38bdf8 !important;
    font-weight: 800 !important;
}

/* Options / Choices Interactive Cards */
.embed-game-body #optionsContainer,
.embed-game-body #choicesContainer {
    gap: 0.65rem !important;
    margin-bottom: 0.6rem !important;
}

.embed-game-body #optionsContainer button,
.embed-game-body #choicesContainer button {
    padding: 0.65rem 1.15rem !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    background: rgba(18, 24, 52, 0.88) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    text-align: left;
}

.embed-game-body #optionsContainer button:hover,
.embed-game-body #choicesContainer button:hover {
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    background: rgba(56, 189, 248, 0.22) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.55) !important;
}

.embed-game-body #optionsContainer button.btn-correct,
.embed-game-body #optionsContainer button[style*="#27ae60"],
.embed-game-body #optionsContainer button[style*="#10b981"] {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #a7f3d0 !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.6) !important;
}

.embed-game-body #optionsContainer button.btn-wrong,
.embed-game-body #optionsContainer button[style*="#e04b3b"],
.embed-game-body #optionsContainer button[style*="#ef4444"] {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.6) !important;
}

/* Antakshari Special Display */
.embed-game-body #targetLetter {
    font-size: 2.4rem !important;
    color: #ffd166 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 15px rgba(255, 209, 102, 0.6) !important;
    margin: 0.15rem 0 !important;
}

.embed-game-body #prevLyrics {
    color: #e2e8f0 !important;
    font-style: italic !important;
    font-size: 1.05rem !important;
}

/* Memory Trigger Card (Nostalgia Games) */
.embed-game-body #memoryTrigger {
    background: rgba(28, 14, 40, 0.95) !important;
    border: 1.8px solid #ff007f !important;
    border-radius: 16px !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.4) !important;
    padding: 0.85rem 1.25rem !important;
    margin-bottom: 0.65rem !important;
}

.embed-game-body #memoryPromptTitle {
    color: #ff5e3a !important;
    font-weight: 800 !important;
}

.embed-game-body #memoryPromptText {
    color: #ffffff !important;
}

/* Community Polls Results Bar */
.embed-game-body #resultsBar {
    background: rgba(14, 18, 42, 0.95) !important;
    border: 1.8px solid #00d2ff !important;
    border-radius: 18px !important;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.35) !important;
    padding: 1.1rem 1.4rem !important;
    margin-bottom: 0.65rem !important;
}

.embed-game-body #opt1Label,
.embed-game-body #opt2Label {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
}

/* Digital Rangoli Art */
.embed-game-body #patternTitle {
    color: #ffd166 !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    text-shadow: 0 0 10px rgba(255, 209, 102, 0.5) !important;
}

.embed-game-body .level-btn {
    border-radius: 50% !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.embed-game-body .level-btn.active-level {
    background: linear-gradient(135deg, #ff007f 0%, #ff5e3a 50%, #ff9500 100%) !important;
    border: 1.5px solid #ffe066 !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(255, 94, 58, 0.75) !important;
}

.embed-game-body #svgContainer {
    background: rgba(10, 14, 32, 0.95) !important;
    border: 2px solid #00d2ff !important;
    border-radius: 20px !important;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.35) !important;
    padding: 0.5rem !important;
}

.embed-game-body .color-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.embed-game-body .color-btn.selected {
    transform: scale(1.22) !important;
    box-shadow: 0 0 16px #ffffff, 0 0 25px rgba(255, 255, 255, 0.8) !important;
    border: 3px solid #ffffff !important;
}

/* Tambola in Dark Neon Aesthetic */
.embed-game-body #currentNumber {
    font-size: 2.2rem !important;
    min-width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 35%, #ffd166, #ff7a00, #ff007f) !important;
    border: 3px solid #ffffff !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 25px rgba(255, 122, 0, 0.8) !important;
}

.embed-game-body #recentNumbers {
    color: #ffd166 !important;
    font-weight: 800 !important;
}

.embed-game-body #tambolaTicket {
    max-width: 540px !important;
    background: rgba(12, 16, 36, 0.95) !important;
    border-radius: 18px !important;
    border: 2px solid #00d2ff !important;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.35) !important;
    padding: 8px !important;
    gap: 4px !important;
    margin: 0 auto 0.45rem !important;
}

.embed-game-body .tambola-cell {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    height: 34px !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
}

.embed-game-body .tambola-cell.is-marked {
    background: linear-gradient(135deg, #ff007f, #ff7a00) !important;
    border-color: #ffe066 !important;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.6) !important;
    color: #ffffff !important;
}

/* Tic Tac Toe Board */
.embed-game-body #tttBoard {
    max-width: 270px !important;
    gap: 10px !important;
    padding: 12px !important;
    margin: 0 auto 0.45rem !important;
    background: rgba(10, 14, 34, 0.9) !important;
    border-radius: 20px !important;
    border: 2px solid #38bdf8 !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.4) !important;
}

.embed-game-body .ttt-cell {
    font-size: 2.6rem !important;
    height: 76px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    transition: all 0.2s ease !important;
}

.embed-game-body .ttt-cell:hover {
    transform: scale(1.05) !important;
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: #38bdf8 !important;
}

/* Bubble Pop Arena */
.embed-game-body #bubbleArena {
    height: 44vh !important;
    max-height: 320px !important;
    margin-bottom: 0.45rem !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at 50% 25%, rgba(14, 28, 56, 0.9) 0%, rgba(7, 10, 24, 0.95) 100%) !important;
    border: 2px solid #00d2ff !important;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.4) !important;
}

/* Guided Breathing */
.embed-game-body #relaxCircle {
    width: 155px !important;
    height: 155px !important;
    margin: 0.45rem auto !important;
    border: 3.5px solid #38bdf8 !important;
    box-shadow: 0 0 50px rgba(56, 189, 248, 0.6), inset 0 0 30px rgba(168, 85, 247, 0.4) !important;
    background: radial-gradient(circle, rgba(56,189,248,0.3) 0%, rgba(168,85,247,0.2) 60%, transparent 100%) !important;
}

.embed-game-body #relaxCircle #breathAction {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
}

/* Bottom Guidance & Controls Deck (100% Reference Match) */
.embed-game-body .game-container > div:last-child {
    background: rgba(10, 14, 34, 0.85) !important;
    border: 1.5px solid rgba(255, 0, 127, 0.5) !important;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.25) !important;
    border-radius: 50px !important;
    padding: 0.5rem 1.4rem !important;
    margin-top: 0.35rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    border-top: none !important;
}

.embed-game-body #feedbackMessage,
.embed-game-body #feedbackText,
.embed-game-body #tttFeedback,
.embed-game-body #pollFeedback,
.embed-game-body #memoryFeedback {
    min-height: 20px !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.embed-game-body button[onclick*="restart"],
.embed-game-body button[onclick*="restartLevel"] {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    padding: 0.45rem 1.35rem !important;
    border-radius: 50px !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.5) !important;
    transition: all 0.2s ease !important;
}

.embed-game-body button[onclick*="restart"]:hover,
.embed-game-body button[onclick*="restartLevel"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.7) !important;
}

.embed-game-body button[onclick*="exitToGameHub"],
.embed-game-body button[onclick*="finishBreathing"] {
    background: linear-gradient(90deg, #ff007f 0%, #ff5e3a 50%, #ff9500 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    padding: 0.45rem 1.5rem !important;
    border-radius: 50px !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.5) !important;
    transition: all 0.2s ease !important;
}

.embed-game-body button[onclick*="exitToGameHub"]:hover,
.embed-game-body button[onclick*="finishBreathing"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.75) !important;
}

/* Result & Report Page in Dark Neon */
.embed-game-body .game-container:has(> div:first-child[style*="font-size: 4rem"]),
.embed-game-body .game-container:has(.section-title) {
    padding: 0.85rem 1.6rem !important;
    background: rgba(12, 14, 32, 0.9) !important;
    border: 2px solid #00d2ff !important;
    box-shadow: 0 0 35px rgba(0, 210, 255, 0.35) !important;
    color: #ffffff !important;
}

.embed-game-body .section-title {
    font-size: 1.4rem !important;
    margin: 0.1rem 0 !important;
    color: #ffffff !important;
}

.embed-game-body .game-container > div[style*="grid-template-columns: repeat(auto-fit"] > div {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
}

.embed-game-body div[style*="AI Activity & Wellness Insights"],
.embed-game-body div[style*="AI Activity & Wellness Insights"],
.embed-game-body div[style*="Download Your Wellness Activity Report"] {
    background: rgba(14, 18, 42, 0.9) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
    border-radius: 16px !important;
    color: #ffffff !important;
}

/* =============================================================
   MOBILE & TABLET RESPONSIVE REFINEMENTS (1024px, 768px, 480px, 390px, 375px)
   ============================================================= */
@media (max-width: 1024px) {
    .category-filter-tabs {
        gap: 0.6rem;
    }
    .cat-filter-btn {
        padding: 0.55rem 1.1rem;
        font-size: 0.92rem;
    }
    .gaming-hero-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    .hero-right-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .full-wellness-popup-card {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 2rem 1.25rem !important;
    }
    .popup-stretch-grid {
        grid-template-columns: 1fr !important;
    }
    .mood-recommendation-deck {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 1.25rem !important;
    }
    .gaming-bottom-links-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .game-zone-result-card {
        padding: 2.2rem 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .cat-filter-btn {
        padding: 0.45rem 0.85rem;
        font-size: 0.85rem;
    }
    .popup-mood-grid {
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)) !important;
        gap: 0.65rem !important;
    }
    .popup-mood-btn {
        padding: 0.9rem 0.4rem !important;
    }
    .popup-mood-emoji {
        font-size: 2.2rem !important;
    }
    .hero-main-title {
        font-size: 1.7rem !important;
    }
    .btn-gaming-start, .hero-btn-history {
        width: 100% !important;
        text-align: center;
        justify-content: center;
    }
    .report-sheet {
        padding: 1.5rem 1rem !important;
    }
}

@media (max-width: 390px) {
    .cat-filter-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
    .game-card-title {
        font-size: 1.1rem !important;
    }
}