/* Games Section Styles */



/* Content Screens (for Games Menu, Store, etc.) */

.content-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: radial-gradient(circle at center, #2b111e, #000000);

    z-index: 250;

    overflow-y: auto;

    padding: 20px;

    opacity: 1;

    visibility: visible;

    transition: opacity 0.3s, visibility 0.3s;

    overscroll-behavior: none;

    /* Prevent rubber-banding/overscroll */

}



.content-screen.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}



.screen-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;

}

/* Adjust header alignment to remove black top space */
#notifications-screen .screen-header {
    margin-top: -15px;
}



.back-btn {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s;

}



.back-btn:hover {

    background: rgba(255, 255, 255, 0.2);

}



.back-icon {

    width: 24px;

    height: 24px;

    fill: #fff;

}



.screen-header h2 {

    font-size: 1.8rem;

    background: var(--primary-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



/* Games Grid */

.games-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: 20px;

    padding: 10px;

}



.game-card {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 10px;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    /* For info button positioning */

}



.game-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(255, 64, 129, 0.3);

    border-color: var(--primary-color);

}



.game-card.coming-soon {

    opacity: 0.5;

    cursor: not-allowed;

}



.game-card.coming-soon:hover {

    transform: none;

    box-shadow: none;

}



.game-icon-wrapper {

    width: 100%;

    aspect-ratio: 1;

    margin: 0 auto 10px;

    border-radius: 15px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Game Info Button Styles */

.game-info-btn {

    position: absolute;

    bottom: 12px;

    left: 12px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 202, 40, 0.7);

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    cursor: pointer;

    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    z-index: 10;

}



.game-info-btn:hover {

    background: #ffca28;

    color: #000;

    transform: scale(1.2) rotate(15deg);

    box-shadow: 0 0 15px rgba(255, 202, 40, 0.4);

    border-color: #ffca28;

}



.game-info-btn i {

    pointer-events: none;

}



.game-icon {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.placeholder-icon {

    font-size: 50px;

}



.game-card h3 {

    font-size: 1rem;

    margin: 0;

    color: #fff;

    font-weight: 600;

}



.game-description {

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.6);

    margin-bottom: 10px;

}



.game-reward {

    font-size: 0.8rem;

    color: var(--primary-color);

    padding: 5px 10px;

    background: rgba(255, 64, 129, 0.1);

    border-radius: 10px;

    display: inline-block;

}



/* Ultra-Smooth Pure Inner Glow for LexJump - Fixed Visibility */

.lex-jump-card .game-icon-wrapper,

.lex-maze-card .game-icon-wrapper,

.lex-horror-card .game-icon-wrapper,

.lex-hockey-card .game-icon-wrapper,

.lex-puzzle-card .game-icon-wrapper,

.lex-drift-card .game-icon-wrapper {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

    background: #000;

    /* Ensure solid background for inner glow visibility */

}



.lex-jump-card .game-icon-wrapper::after,

.lex-maze-card .game-icon-wrapper::after,

.lex-horror-card .game-icon-wrapper::after,

.lex-hockey-card .game-icon-wrapper::after,

.lex-puzzle-card .game-icon-wrapper::after,

.lex-drift-card .game-icon-wrapper::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: 15px;

    z-index: 2;

    pointer-events: none;

}



/* Ultra-Smooth Pure Inner Glow - Synchronized */

.lex-drift-card .game-icon-wrapper::after {

    animation: redInnerGlowSmooth 3s infinite ease-in-out;

}



.lex-jump-card .game-icon-wrapper::after {

    animation: blueInnerGlowSmooth 3s infinite ease-in-out;

}



.lex-maze-card .game-icon-wrapper::after {

    animation: whiteInnerGlowSmooth 3s infinite ease-in-out;

}



.lex-horror-card .game-icon-wrapper::after {

    animation: horrorInnerGlowSmooth 3s infinite ease-in-out;

}



.lex-hockey-card .game-icon-wrapper::after {

    animation: greenInnerGlowSmooth 3s infinite ease-in-out;

}



.lex-puzzle-card .game-icon-wrapper::after {

    animation: purpleInnerGlowSmooth 3s infinite ease-in-out;

}



@keyframes redInnerGlowSmooth {



    0%,

    100% {

        box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.7), inset 0 0 8px rgba(255, 0, 0, 0.4);

    }



    50% {

        box-shadow: inset 0 0 50px rgba(255, 0, 0, 1), inset 0 0 25px rgba(255, 0, 0, 1);

    }

}



.game-card .game-icon {

    border-radius: 15px;

    display: block;

    width: 100%;

}



@keyframes blueInnerGlowSmooth {



    0%,

    100% {

        box-shadow: inset 0 0 15px rgba(0, 242, 254, 0.4), inset 0 0 5px rgba(0, 242, 254, 0.2);

    }



    50% {

        box-shadow: inset 0 0 45px rgba(0, 242, 254, 0.8), inset 0 0 20px rgba(0, 242, 254, 1);

    }

}



@keyframes whiteInnerGlowSmooth {



    0%,

    100% {

        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.2);

    }



    50% {

        box-shadow: inset 0 0 45px rgba(255, 255, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 1);

        border: 2px solid rgba(255, 255, 255, 0.3);

    }

}



@keyframes redInnerGlowSmooth {



    0%,

    100% {

        box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.4), inset 0 0 5px rgba(255, 0, 0, 0.2);

    }



    50% {

        box-shadow: inset 0 0 45px rgba(255, 0, 0, 0.8), inset 0 0 20px rgba(255, 0, 0, 1);

    }

}



@keyframes horrorInnerGlowSmooth {



    0%,

    100% {

        box-shadow: inset 0 0 30px #000, 0 0 15px rgba(255, 255, 255, 0.5);

        /* White mist low */

    }



    50% {

        box-shadow: inset 0 0 90px #000, 0 0 35px rgba(255, 255, 255, 0.8);

        /* White mist high */

    }

}



@keyframes greenInnerGlowSmooth {



    0%,

    100% {

        box-shadow: inset 0 0 15px rgba(0, 255, 100, 0.4), inset 0 0 5px rgba(0, 255, 100, 0.2);

    }



    50% {

        box-shadow: inset 0 0 45px rgba(0, 255, 100, 0.8), inset 0 0 20px rgba(0, 255, 100, 1);

    }

}



@keyframes orangeInnerGlowSmooth {



    0%,

    100% {

        box-shadow: inset 0 0 15px rgba(255, 165, 0, 0.4), inset 0 0 5px rgba(255, 165, 0, 0.2);

    }



    50% {

        box-shadow: inset 0 0 45px rgba(255, 165, 0, 0.8), inset 0 0 20px rgba(255, 165, 0, 1);

    }

}



/* LexMaze Control Pad */

.maze-controls { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 199px; height: 199px; z-index: 310; } #maze-up { top: 0; left: 67px; } #maze-down { bottom: 0; left: 67px; } #maze-left { left: 0; top: 67px; } #maze-right { right: 0; top: 67px; } .maze-btn { position: absolute; width: 65px; height: 65px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3); color: white; font-size: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 12px; transition: background 0.2s, transform 0.2s; user-select: none; touch-action: manipulation; } .maze-btn:active { background: rgba(255, 255, 255, 0.3); transform: scale(0.95); }



.maze-btn i {

    pointer-events: none;

}



/* Game Screen (Full Screen Game) */



.games-container {

    padding: 20px;

}



.game-screen {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: #000;

    z-index: 300;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 0;

    margin: 0;

    overflow: hidden;

}







.game-screen.active {

    display: flex;

}



.game-header {

    display: none;

}



.game-title {

    font-size: 1.5rem;

    background: var(--primary-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.close-game-btn {

    background: rgba(255, 64, 129, 0.2);

    border: 1px solid #ff4081;

    color: #ff4081;

    padding: 8px 20px;

    border-radius: 20px;

    cursor: pointer;

    font-weight: bold;

    transition: all 0.3s;

}



.close-game-btn:hover {

    background: rgba(255, 64, 129, 0.4);

}



.game-canvas-container {

    position: relative;

    background: #000;

    padding: 0;

    margin: 0;

    width: 100vw;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



#lex-jump-canvas {

    display: block;

    width: 100% !important;

    height: 100% !important;

    cursor: pointer;

}



/* Game Return Button */

.game-return-btn {

    position: absolute;

    top: 20px;

    right: 20px;

    /* Positioned to the right */

    width: 45px;

    height: 45px;

    background: rgba(0, 0, 0, 0.5);

    /* Higher contrast */

    backdrop-filter: blur(8px);

    border: 2px solid rgba(255, 255, 255, 0.3);

    color: white;

    border-radius: 50%;

    /* Circular */

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 1000;

    transition: all 0.2s ease;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

}



.game-return-btn:hover {

    background: rgba(0, 0, 0, 0.7);

    transform: scale(1.1);

}



.game-return-btn svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}



.goal-toast {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(0, 0, 0, 0.8);

    color: #00FF00;

    padding: 20px 40px;

    border: 2px solid #00FF00;

    border-radius: 10px;

    font-size: 32px;

    font-weight: bold;

    z-index: 1000;

    animation: popIn 0.3s ease-out;

    box-shadow: 0 0 30px #00FF00;

}



@keyframes popIn {

    0% {

        transform: translate(-50%, -50%) scale(0);

    }



    80% {

        transform: translate(-50%, -50%) scale(1.2);

    }



    100% {

        transform: translate(-50%, -50%) scale(1);

    }

}



/* LexHockey Full Screen Overrides */

#lex-hockey-screen {

    padding: 0;

    overflow: hidden;

    background: #000;

}



#faq-screen {

    padding: 10px;

}



#lex-hockey-screen .game-header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 10;

    background: transparent;

    pointer-events: none;

    /* Let clicks pass through to game */

    padding: 20px;

}



#lex-hockey-screen .game-header button {

    pointer-events: auto;

    /* Re-enable buttons */

    background: rgba(255, 0, 0, 0.5);

    border: 1px solid rgba(255, 0, 0, 0.8);

}



#lex-hockey-screen .game-header h2 {

    display: none;

    /* Hide title to save space, score is enough */

}



#lex-hockey-screen .game-canvas-container {

    width: 100vw;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}



#lex-hockey-canvas {

    width: 100%;

    height: 100%;

    display: block;

}



/* LexPuzzle Styles */

.puzzle-container {

    width: 100vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: #000;

    position: relative;

    padding-top: 60px;

    /* Space for header */

}



.puzzle-roulette {

    width: 150px;

    height: 150px;

    border: 3px solid orange;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 20px;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

}



.roulette-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.roulette-img.faded {

    opacity: 0.5;

    filter: grayscale(80%);

}



.roulette-img.selected {

    opacity: 1;

    filter: none;

    animation: flashSelect 0.5s ease-out;

}



@keyframes flashSelect {

    0% {

        transform: scale(0.8);

        filter: brightness(2);

    }



    50% {

        transform: scale(1.1);

    }



    100% {

        transform: scale(1);

        filter: brightness(1);

    }

}



.puzzle-timer {

    font-size: 28px;

    font-weight: bold;

    color: white;

    margin-bottom: 10px;

}



#lex-puzzle-canvas {

    border: 2px solid orange;

    background: #333;

    box-shadow: 0 0 20px rgba(255, 165, 0, 0.3);

}



.hidden {

    display: none !important;

}



/* LexHorror Styles */

.horror-container {

    position: relative;

    width: 100vw;

    height: 100vh;

    background: #000;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    /* Dialogue at bottom */

}



.horror-bg {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    min-width: 100%;

    min-height: 100%;

    object-fit: cover;

    z-index: 1;

    opacity: 0;

    transition: opacity 2s ease-in-out;

    animation: horrorFloat 8s ease-in-out infinite;

}



@keyframes horrorFloat {



    0%,

    100% {

        transform: translate(-50%, -50%) translateX(0) translateY(0);

    }



    25% {

        transform: translate(-50%, -50%) translateX(-10px) translateY(5px);

    }



    50% {

        transform: translate(-50%, -50%) translateX(5px) translateY(-8px);

    }



    75% {

        transform: translate(-50%, -50%) translateX(-5px) translateY(10px);

    }

}



#horror-monster-layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle, transparent 20%, #000 90%);

    pointer-events: none;

    z-index: 2;

}



.horror-dialogue-box {

    position: relative;

    z-index: 10;

    width: 90%;

    max-width: 600px;

    background: rgba(0, 0, 0, 0.85);

    border: 2px solid #8b0000;

    /* Dark Red */

    padding: 20px;

    margin-bottom: 50px;

    border-radius: 10px;

    box-shadow: 0 0 30px rgba(139, 0, 0, 0.3);

    text-align: center;

}



#horror-text {

    font-family: 'Nosifer', cursive;

    color: #ff0000;

    font-size: 1.2rem;

    line-height: 1.6;

    margin-bottom: 20px;

    text-shadow: 2px 2px 4px #000;

    min-height: 60px;

}



.horror-choices {

    display: flex;

    flex-direction: column;

    gap: 15px;

    opacity: 0;

    transition: opacity 0.5s ease-in;

}



.horror-choices.visible {

    opacity: 1;

}



.horror-choice-btn {

    background: transparent;

    border: 1px solid #ff4040;

    color: #ff4040;

    padding: 12px 20px;

    font-family: 'Nosifer', cursive;

    /* or a readable fallback if needed */

    font-size: 1rem;

    cursor: pointer;

    transition: all 0.3s;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.horror-choice-btn:hover {

    background: rgba(139, 0, 0, 0.4);

    box-shadow: 0 0 15px #ff0000;

    transform: scale(1.02);

}



.horror-exit {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 20;

    font-family: 'Nosifer', cursive;

    font-size: 0.8rem;

    color: #555;

    border-color: #555;

    background: transparent;

    border: 1px solid #555;

    padding: 5px 15px;

    border-radius: 5px;

}



.horror-exit:hover {

    color: #ff0000;

    border-color: #ff0000;

}



#horror-jumpscare {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

}



.jumpscare-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    /* Cover ensures we don't see black edges during shake */

    animation: scareShakeIntense 0.08s infinite;

}



.jumpscare-flicker {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    animation: flicker 0.15s infinite;

    pointer-events: none;

}



@keyframes scareShakeIntense {

    0% {

        transform: translate(0, 0) scale(1.1) rotate(0deg);

    }



    10% {

        transform: translate(-15px, 12px) scale(1.1) rotate(-2deg);

    }



    20% {

        transform: translate(18px, -10px) scale(1.1) rotate(1deg);

    }



    30% {

        transform: translate(-12px, -15px) scale(1.1) rotate(-1deg);

    }



    40% {

        transform: translate(10px, 18px) scale(1.1) rotate(2deg);

    }



    50% {

        transform: translate(-20px, 8px) scale(1.1) rotate(-2deg);

    }



    60% {

        transform: translate(15px, -12px) scale(1.1) rotate(1deg);

    }



    70% {

        transform: translate(-8px, 15px) scale(1.1) rotate(-1deg);

    }



    80% {

        transform: translate(12px, -18px) scale(1.1) rotate(2deg);

    }



    90% {

        transform: translate(-18px, 10px) scale(1.1) rotate(-2deg);

    }



    100% {

        transform: translate(0, 0) scale(1.1) rotate(0deg);

    }

}



@keyframes flicker {



    0%,

    100% {

        opacity: 0;

    }



    10%,

    30%,

    50%,

    70%,

    90% {

        opacity: 0.8;

    }



    20%,

    40%,

    60%,

    80% {

        opacity: 0;

    }

}



.horror-death-screen {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    z-index: 110;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

}



#horror-death-text {

    font-family: 'Nosifer', cursive;

    color: #ff0000;

    font-size: 2rem;

    text-align: center;

    text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000;

    line-height: 1.8;

    max-width: 800px;

}









/* --- LexStore Styles - Ultimate Compact Redesign --- */

.store-layout-wrapper {

    display: flex;

    flex-direction: column;

    flex: 1;

}



.store-header-sticky {

    position: sticky;

    top: 0;

    z-index: 100;

    background: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    padding: 10px 0;

    margin: 0;

    /* Reset margins for clean flow */

}



/* Gender Toggle - Compact */

.gender-toggle {

    display: flex;

    justify-content: center;

    gap: 30px;

    margin-bottom: 15px;

}



.gender-btn {

    background: transparent !important;

    border: none !important;

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    opacity: 0.4;

    transition: 0.3s ease;

    padding: 5px 15px;

    border-radius: 100px;

}



.gender-icon-circle {

    width: 32px;

    height: 32px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.9rem;

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.gender-btn span {

    color: #fff;

    font-size: 0.95rem;

    font-weight: 700;

}



.gender-btn.active {

    opacity: 1;

    background: rgba(255, 255, 255, 0.08) !important;

}



#men-btn.active .gender-icon-circle {

    background: rgba(0, 136, 255, 0.2);

    border-color: #0088ff;

    color: #0088ff;

    box-shadow: 0 0 15px rgba(0, 136, 255, 0.3);

}



#women-btn.active .gender-icon-circle {

    background: rgba(255, 64, 129, 0.2);

    border-color: #ff4081;

    color: #ff4081;

    box-shadow: 0 0 15px rgba(255, 64, 129, 0.3);

}



/* Category Chips */

.store-categories {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding: 5px 20px;

    scrollbar-width: none;

    -ms-overflow-style: none;

}



.store-categories::-webkit-scrollbar {

    display: none;

}



.cat-chip {

    flex: 0 0 auto;

    background: rgba(255, 255, 255, 0.03) !important;

    border: 1px solid rgba(255, 255, 255, 0.05) !important;

    color: rgba(255, 255, 255, 0.6) !important;

    padding: 8px 18px;

    border-radius: 100px;

    font-size: 0.85rem;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

}



.cat-chip:hover {

    background: rgba(255, 255, 255, 0.08) !important;

}



.cat-chip.active {

    background: var(--primary-gradient) !important;

    color: #000 !important;

    font-weight: 800;

    border: none !important;

    box-shadow: 0 5px 15px rgba(255, 64, 129, 0.3);

}



.product-view-area {

    flex: 1;

    overflow-y: auto;

    padding: 10px;

}







/* Soft Pulsing Glow - Gender Specific & Softened */

@keyframes softGlowMen {

    0% {

        filter: grayscale(0) opacity(1) drop-shadow(0 0 8px rgba(0, 136, 255, 0.15));

    }



    50% {

        filter: grayscale(0) opacity(1) drop-shadow(0 0 25px rgba(0, 136, 255, 0.3));

    }



    100% {

        filter: grayscale(0) opacity(1) drop-shadow(0 0 8px rgba(0, 136, 255, 0.15));

    }

}



@keyframes softGlowWomen {

    0% {

        filter: grayscale(0) opacity(1) drop-shadow(0 0 8px rgba(255, 64, 129, 0.15));

    }



    50% {

        filter: grayscale(0) opacity(1) drop-shadow(0 0 25px rgba(255, 64, 129, 0.3));

    }



    100% {

        filter: grayscale(0) opacity(1) drop-shadow(0 0 8px rgba(255, 64, 129, 0.15));

    }

}



/* Apply Men Glow - Subtle Aura */

.men-view .cat-btn.active .cat-icon-img {

    filter: grayscale(0) opacity(1);

    animation: softGlowMen 3s infinite ease-in-out;

    transform: translateY(-8px) scale(1.15);

}



/* Apply Women Glow - Subtle Aura */

.women-view .cat-btn.active .cat-icon-img {

    filter: grayscale(0) opacity(1);

    animation: softGlowWomen 3s infinite ease-in-out;

    transform: translateY(-8px) scale(1.15);

}



.cat-btn.active span {

    color: #fff;

    transform: translateY(-5px);

}



.men-view .cat-btn.active span {

    text-shadow: 0 0 10px rgba(0, 136, 255, 0.4);

}



.women-view .cat-btn.active span {

    text-shadow: 0 0 10px rgba(255, 64, 129, 0.4);

}



.store-layout-wrapper {

    padding: 0;

    margin: 0;

    width: 100%;

    flex: 1;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



/* Click Feedback */

.cat-btn:active,

.gender-btn:active {

    transform: scale(0.9) !important;

    transition: 0.1s;

}



/* Full Width Grid - Edge to Edge */

.product-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 4px;

    /* Even Tighter gap */

    padding: 0;

    /* NO padding at all */

    width: 100%;

}



.product-card {

    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.95));

    /* Darker, sleek background */

    border: 1px solid rgba(255, 255, 255, 0.08);

    /* Subtle border */

    border-radius: 12px;

    /* Less rounded for more "serious" look */

    overflow: hidden;

    position: relative;

    transition: all 0.2s ease;

    display: flex;

    flex-direction: column;

}



/* Zoom Button - Below image, right aligned */

.zoom-btn {

    align-self: flex-end;

    /* Align to right in flex container */

    margin: 5px 8px 0 0;

    /* Top margin, right margin */

    width: 28px;

    height: 28px;

    /* Slightly smaller */

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 0.8rem;

    cursor: pointer;

    z-index: 10;

    transition: 0.2s;

}



.zoom-btn:hover {

    background: #ffca28;

    color: #000;

    border-color: #ffca28;

}



.product-image {

    width: 100%;

    aspect-ratio: 1 / 1.1;

    /* Slightly taller aspect ratio if needed, or keeping sqaure */

    aspect-ratio: 1 / 1;

    background: #000;

    position: relative;

    overflow: hidden;

}



.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;

}



.product-info {

    padding: 10px 8px;

    /* Compact padding */

    text-align: center;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 8px;

}



/* Product Number - Clean & Professional */

.product-info h3 {

    margin: 0;

    font-size: 1.2rem;

    color: #fff;

    font-weight: 700;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Clean font */

}



.product-price {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin: 0;

    /* Remove margin */

}



/* Elegant Price Styling */

.price-val {

    font-size: 1.1rem;

    font-weight: 700;

    color: #ffca28;

    /* Gold instead of Green */

    font-family: 'Times New Roman', serif;

    /* Elegant serif for numbers */

    letter-spacing: 0.5px;

}



.price-unit {

    font-size: 0.65rem;

    color: rgba(255, 255, 255, 0.4);

    text-transform: uppercase;

    font-family: sans-serif;

    letter-spacing: 1px;

}



.buy-btn {

    width: 100%;

    background: linear-gradient(to bottom, #ffca28, #ffb300) !important;

    /* Gold Gradient */

    border: none !important;

    color: #000 !important;

    padding: 8px 0 !important;

    /* Compact button height */

    border-radius: 6px !important;

    /* Sharper corners */

    font-weight: 700 !important;

    font-size: 0.85rem !important;

    cursor: pointer !important;

    transition: 0.2s !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

}



.buy-btn:hover {

    filter: brightness(1.1);

    transform: translateY(-1px);

}



.buy-btn:hover {

    background: #fff !important;

    box-shadow: 0 5px 15px rgba(255, 202, 40, 0.4);

}



.store-placeholder {

    grid-column: 1 / -1;

    text-align: center;

    padding: 60px 20px;

    color: rgba(255, 255, 255, 0.3);

}



.store-placeholder i {

    font-size: 3rem;

    margin-bottom: 20px;

}



/* Charge Screen Styles */

.charge-container {

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

}



.charge-card {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 25px;

    padding: 0 0 40px 0;

    /* Remove top padding, keep side/bottom padding for content */

    width: 100%;

    max-width: 400px;

    text-align: center;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

    overflow: hidden;

    /* To clip the character image to the card corners */

}



.charge-icon-wrapper {

    margin-bottom: 5px;

    /* Tiny gap to let the fade breathe */

    display: flex;

    justify-content: center;

    width: 100%;

    /* Gradient fade at the bottom for image entry */

    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);

    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);

    border-bottom: none !important;

    /* Remove solid golden line */

    box-shadow: none !important;

}



.charge-assets-img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;

}



@keyframes coinPulseGlow {



    0%,

    100% {

        filter: drop-shadow(0 0 5px rgba(255, 202, 40, 0.3));

        transform: scale(1);

    }



    50% {

        filter: drop-shadow(0 0 12px rgba(255, 202, 40, 0.5));

        transform: scale(1.03);

    }

}



.charge-card h3 {

    font-size: 1.5rem;

    margin-bottom: 10px;

    color: #fff;

}



.charge-card p {

    color: rgba(255, 255, 255, 0.6);

    margin-bottom: 30px;

}



.charge-input-group {

    display: flex;

    flex-direction: column;

    gap: 15px;

    padding: 0 30px;

    /* Re-add side padding for the input group */

}



.charge-input-group input {

    background: #150a15;

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 15px;

    border-radius: 12px;

    color: #fff;

    font-size: 1.1rem;

    text-align: center;

    letter-spacing: 2px;

    transition: 0.3s;

}



.charge-input-group input:focus {

    border-color: #ffca28;

    background: rgba(0, 0, 0, 0.5);

    outline: none;

    box-shadow: 0 0 15px rgba(255, 202, 40, 0.2);

}



/* Autofill Overrides */

.charge-input-group input:-webkit-autofill,

.charge-input-group input:-webkit-autofill:hover {

    -webkit-text-fill-color: #fff !important;

    -webkit-box-shadow: 0 0 0px 1000px #150a15 inset !important;

    transition: background-color 5000s ease-in-out 0s;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.charge-status {

    margin-top: 20px;

    font-weight: 500;

    font-size: 0.95rem;

    min-height: 24px;

}



.charge-status.success {

    color: #4caf50;

    text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);

}



.charge-status.error {

    color: #f44336;

    text-shadow: 0 0 10px rgba(244, 67, 54, 0.3);

}



.charge-info {

    text-align: center;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.9rem;

    max-width: 300px;

}



.charge-info h4 {

    color: #fff;

    margin-bottom: 5px;

}



/* Zero Padding specific for Store Screen to override .content-screen */

#store-screen {

    padding: 0 !important;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}





/* Ensure sticky header sits at top correctly with no parent padding interference */

.store-header-sticky {

    padding: 10px 5px;

    /* Add small padding only to header content */

    margin-top: 0px;

    /* Reduced to bring it right under the main header */

}



/* Specific adjustment for screen header in store to reduce gap */

#store-screen .screen-header {

    margin-bottom: 0px !important;

    padding: 15px 20px;

    flex-shrink: 0;

}



@media (max-width: 480px) {

    .content-screen {

        padding: 12px;

    }



    .screen-header {

        margin-bottom: 20px;

        gap: 10px;

    }



    .screen-header h2 {

        font-size: 1.4rem;

    }



    .games-grid {

        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

        gap: 12px;

    }



    .game-card h3 {

        font-size: 0.9rem;

    }

}



@media (max-height: 600px) {

    .screen-header {

        margin-bottom: 15px;

    }



    .game-icon-wrapper {

        height: 80px;

    }

}



/* --- VIP Carousel Transition: Standard Fade (Reverted) --- */

#vip-active-img {

    /* No transition for instant switch */

    transition: none;

    opacity: 1;

    transform: none;

    filter: none;

}



.vip-active-img-changing {

    opacity: 0 !important;

    transform: none !important;

    filter: none !important;

}

/* ==========================================================================
   RESTORED LATEST COMPILED RULES (CHESS, APPLE GAME & HOTFIXES)
   ========================================================================== */

/* Restored compiled rule */
.content-screen {
    position:fixed;top:0;left:0;width:100%;height:100vh;background:radial-gradient(circle at center,#2b111e,#000);z-index:800;overflow-y:auto;padding:20px;opacity:1;visibility:visible;transition:opacity .3s,visibility .3s;overscroll-behavior:none
}

/* Restored compiled rule */
.back-btn:active {
    transform:scale(0.95)!important
}

/* Restored compiled rule */
.lex-jump-card .game-icon-wrapper,.lex-maze-card .game-icon-wrapper,.lex-horror-card .game-icon-wrapper,.lex-hockey-card .game-icon-wrapper,.lex-puzzle-card .game-icon-wrapper,.lex-drift-card .game-icon-wrapper,.lex-chess-card .game-icon-wrapper,.lex-apple-card .game-icon-wrapper,.lex-blast-card .game-icon-wrapper,.lex-shoot-card .game-icon-wrapper {
    position:relative;overflow:hidden;border-radius:15px;background:#000;will-change:box-shadow;transform:translateZ(0)
}

/* Restored compiled rule */
.lex-jump-card .game-icon-wrapper:after,.lex-maze-card .game-icon-wrapper:after,.lex-horror-card .game-icon-wrapper:after,.lex-hockey-card .game-icon-wrapper:after,.lex-puzzle-card .game-icon-wrapper:after,.lex-drift-card .game-icon-wrapper:after,.lex-chess-card .game-icon-wrapper:after,.lex-apple-card .game-icon-wrapper:after,.lex-blast-card .game-icon-wrapper:after,.lex-shoot-card .game-icon-wrapper:after {
    content:"";position:absolute;inset:0;border-radius:15px;z-index:2;pointer-events:none;will-change:box-shadow;transform:translateZ(0)
}

/* Restored compiled rule */
.lex-chess-card .game-icon-wrapper:after {
    animation:orangeInnerGlowSmooth 3s infinite ease-in-out
}

/* Restored compiled rule */
.lex-apple-card .game-icon-wrapper:after {
    animation:pinkInnerGlowSmooth 3s infinite ease-in-out
}

/* Restored compiled rule */
.lex-blast-card .game-icon-wrapper:after {
    animation:yellowInnerGlowSmooth 3s infinite ease-in-out
}

/* Restored compiled rule */
.lex-shoot-card .game-icon-wrapper:after {
    animation:grayInnerGlowSmooth 3s infinite ease-in-out
}

/* Restored compiled rule */
#lex-chess-screen {
    background:radial-gradient(circle at center,#4e342e,#21130d)!important
}

/* Restored compiled rule */
#store-screen .back-btn,#missions-screen .back-btn {
    right:20px
}

/* Restored compiled rule */
.like-container {
    position:absolute;top:10px;left:10px;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:6px;cursor:pointer;z-index:10;border:1px solid rgba(255,255,255,.1);transition:all .3s ease
}

/* Restored compiled rule */
.like-container:hover {
    background:#000000b3;transform:scale(1.05)
}

/* Restored compiled rule */
.like-container i {
    color:#ffffff80;font-size:1rem;transition:color .3s ease,transform .3s cubic-bezier(.175,.885,.32,1.275)
}

/* Restored compiled rule */
.like-container i.liked {
    color:#f36!important;text-shadow:0 0 10px rgba(255,51,102,.6)!important
}

/* Restored compiled rule */
.like-count {
    color:#fff;font-size:.85rem;font-weight:700
}

/* Restored compiled rule */
.pop-anim {
    animation:heartPop .5s cubic-bezier(.175,.885,.32,1.275) forwards
}

/* Restored compiled rule */
.card-actions {
    display:flex;justify-content:space-between;align-items:center;padding:8px 10px 0;width:100%;box-sizing:border-box
}

/* Restored compiled rule */
.like-container {
    position:static!important;margin:0!important
}

/* Restored compiled rule */
#lex-chess-container {
    display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:20px
}

/* Restored compiled rule */
.chess-header {
    display:flex;justify-content:space-between;align-items:center;width:95%;max-width:400px;background:#0009;padding:10px 20px;border-radius:15px;border:1px solid rgba(255,202,40,.3);box-shadow:0 4px 15px #00000080
}

/* Restored compiled rule */
.chess-player {
    display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff;font-size:.9rem;font-weight:700
}

/* Restored compiled rule */
.chess-avatar {
    font-size:2rem;background:linear-gradient(135deg,#2a2a2a,#111);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:2px solid #ffca28;box-shadow:0 0 10px #ffca2833
}

/* Restored compiled rule */
.chess-status {
    color:#ffca28;font-size:1.1rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.8)
}

/* Restored compiled rule */
.chess-board {
    display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:95vw;height:95vw;max-width:400px;max-height:400px;border:6px solid #2c1e0b;border-radius:4px;box-shadow:0 10px 30px #000c;background:#4a3622
}

/* Restored compiled rule */
.chess-square {
    display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer
}

/* Restored compiled rule */
.chess-square.light {
    background:#e8d0aa
}

/* Restored compiled rule */
.chess-square.dark {
    background:#8b5a2b
}

/* Restored compiled rule */
.chess-square.selected:after {
    content:"";position:absolute;inset:0;border:3px solid #ffeb3b;background:#ffeb3b4d;pointer-events:none
}

/* Restored compiled rule */
.chess-square.valid-move:after {
    content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:#0006;pointer-events:none
}

/* Restored compiled rule */
.chess-square.capture-move:after {
    content:"";position:absolute;inset:0;border:4px solid #4caf50;background:#4caf504d;pointer-events:none
}

/* Restored compiled rule */
.chess-square.in-check {
    background:#ff4c4c!important;box-shadow:inset 0 0 15px #960000cc
}

/* Restored compiled rule */
.chess-piece {
    font-size:2.5rem;line-height:1;user-select:none;-webkit-user-select:none;transition:transform .2s ease;filter:drop-shadow(0px 4px 2px rgba(0,0,0,.5))
}

/* Restored compiled rule */
.chess-piece:active {
    transform:scale(1.2) translateY(-5px)
}

/* Restored compiled rule */
.chess-piece.w {
    color:#fff;text-shadow:0 -1px 0 #cccccc,0 1px 0 #999999,0 2px 0 #777777,0 3px 0 #555555
}

/* Restored compiled rule */
.chess-piece.b {
    color:#111;text-shadow:0 -1px 0 #333333,0 1px 0 #000000,0 2px 0 #000000,0 3px 0 #000000
}

/* Restored compiled rule */
.apple-logo-spin {
    animation:lex-apple-spin-in .5s cubic-bezier(.34,1.56,.64,1) forwards
}

/* Restored compiled rule */
body.game-active #menu-btn {
    display:none!important
}

/* Restored compiled rule */
[dir=rtl] .bot-msg {
    border-bottom-left-radius:15px;border-bottom-right-radius:2px
}

/* Restored compiled rule */
[dir=rtl] .user-msg {
    border-bottom-right-radius:15px;border-bottom-left-radius:2px
}

/* Restored compiled media query */
@media(max-height:800px) {
    .compact-help .modal-top-img {
        max-height:90px;width:auto
    }
    .compact-help h2 {
        font-size:1.1rem!important;margin:5px 0!important
    }
    .compact-help .vip-help-steps p {
        font-size:.8rem!important;margin-bottom:2px!important;line-height:1.25
    }
    .compact-help .payment-info {
        padding:5px!important;margin:3px 0!important;font-size:.8rem
    }
    .compact-help .modal-buttons {
        margin-top:5px!important
    }
    .compact-help .modal-buttons button {
        padding:8px!important;font-size:.95rem!important
    }
}

/* Restored compiled media query */
@media(max-height:650px) {
    .compact-help .modal-top-img {
        max-height:60px
    }
    .compact-help h2 {
        font-size:.95rem!important
    }
    .compact-help .vip-help-steps p {
        font-size:.72rem!important
    }
    .logo {
        margin-bottom:1rem
    }
}

/* Restored compiled media query */
@media(max-height:700px) {
    .modal-content {
        padding:20px;max-height:95vh
    }
    .sticker h2 {
        font-size:1.2rem;margin:.5rem 0!important
    }
    .vip-help-steps p {
        font-size:.85rem!important;margin-bottom:5px!important
    }
}

/* Restored compiled media query */
@media(max-width:400px) {
    .acc-part-user {
        font-size:1.3rem
    }
    .mission-item {
        padding:12px;gap:10px
    }
}

/* Restored compiled media query */
@media(max-width:340px) {
    .acc-part-user {
        font-size:1.1rem
    }
    .mission-item {
        flex-wrap:wrap;justify-content:center;text-align:center;padding:15px 10px
    }
}

/* Restored compiled media query */
@media(max-width:600px) {
    .faq-article-header h1 {
        font-size:1.5rem
    }
}

/* Restored compiled media query */
@media(min-width:768px) {
    .vip-full-img {
        object-fit:contain;background-color:transparent
    }
}

/* Restored compiled media query */
@media(max-width:480px) {
    .content-screen {
        padding:12px
    }
    #store-screen .back-btn,#missions-screen .back-btn {
        right:12px
    }
    .leader-name {
        font-size:.9rem
    }
}

/* Restored compiled media query */
@media(max-height:600px) {
    .screen-header {
        margin-bottom:15px
    }
}

/* Restored compiled media query */
@media(max-width:380px) {
    .chess-piece {
        font-size:2rem
    }
}

/* Custom Glowing Keyframe Animations */
@keyframes purpleInnerGlowSmooth {
    0%, 100% {
        box-shadow: inset 0 0 15px rgba(106, 27, 154, 0.4), inset 0 0 5px rgba(106, 27, 154, 0.2);
    }
    50% {
        box-shadow: inset 0 0 45px rgba(106, 27, 154, 0.8), inset 0 0 20px rgba(106, 27, 154, 1);
    }
}

@keyframes pinkInnerGlowSmooth {
    0%, 100% {
        box-shadow: inset 0 0 15px rgba(233, 30, 99, 0.4), inset 0 0 5px rgba(233, 30, 99, 0.2);
    }
    50% {
        box-shadow: inset 0 0 45px rgba(233, 30, 99, 0.8), inset 0 0 20px rgba(233, 30, 99, 1);
    }
}

@keyframes yellowInnerGlowSmooth {
    0%, 100% {
        box-shadow: inset 0 0 15px rgba(255, 235, 59, 0.4), inset 0 0 5px rgba(255, 235, 59, 0.2);
    }
    50% {
        box-shadow: inset 0 0 45px rgba(255, 235, 59, 0.8), inset 0 0 20px rgba(255, 235, 59, 1);
    }
}

@keyframes grayInnerGlowSmooth {
    0%, 100% {
        box-shadow: inset 0 0 15px rgba(158, 158, 158, 0.4), inset 0 0 5px rgba(158, 158, 158, 0.2);
    }
    50% {
        box-shadow: inset 0 0 45px rgba(158, 158, 158, 0.8), inset 0 0 20px rgba(158, 158, 158, 1);
    }
}