/*==================================================
    MODERN SETTINGS PANEL
    PART 1
==================================================*/

:root{

    --primary:#4F46E5;
    --primary-dark:#4338CA;
    --secondary:#7C3AED;

    --text:#1F2937;
    --text-light:#6B7280;

    --white:#ffffff;

    --shadow:
        0 20px 50px rgba(79,70,229,.18);

    --radius:20px;

}


/*==================================================
    FLOATING SETTINGS BUTTON
==================================================*/

#settingsButton{

    position:fixed;

    top:50%;
    right:22px;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    gap:10px;

    padding:15px 22px;

    border:none;
    outline:none;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        #6366F1,
        #7C3AED
    );

    color:#fff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

    cursor:pointer;

    z-index:99999;

    overflow:hidden;

    transition:.35s;

    box-shadow:

        0 18px 40px rgba(99,102,241,.35),
        0 8px 18px rgba(0,0,0,.15);

}


/* Glow */

#settingsButton::before{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:60px;

    background:

    linear-gradient(

        135deg,

        #818CF8,

        #8B5CF6,

        #EC4899

    );

    z-index:-2;

    filter:blur(18px);

    opacity:.65;

}


/* Shine */

#settingsButton::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

}


#settingsButton:hover::after{

    left:150%;

}


#settingsButton:hover{

    transform:

    translateY(-50%)

    translateX(-5px);

    box-shadow:

        0 30px 60px rgba(99,102,241,.45),

        0 12px 24px rgba(0,0,0,.18);

}


/* Active */

#settingsButton:active{

    transform:

    translateY(-50%)

    scale(.97);

}


/* Icon */

#settingsButton i{

    font-size:20px;

    animation:gearSpin 8s linear infinite;

}


/*==================================================
    BUTTON PULSE
==================================================*/

@keyframes pulseGlow{

    0%{

        box-shadow:

        0 0 0 0 rgba(99,102,241,.45);

    }

    70%{

        box-shadow:

        0 0 0 18px rgba(99,102,241,0);

    }

    100%{

        box-shadow:

        0 0 0 0 rgba(99,102,241,0);

    }

}

#settingsButton{

    animation:

    pulseGlow 3.5s infinite;

}


/*==================================================
    GEAR SPIN
==================================================*/

@keyframes gearSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*==================================================
        MODAL OVERLAY
==================================================*/

.theme-modal,
.theme-color-modal{

    display:none;

    position:fixed;

    inset:0;

    z-index:999999;

    background:

    rgba(15,23,42,.55);

    backdrop-filter:blur(10px);

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

    animation:

    fadeOverlay .3s ease;

}


/*==================================================
        MODAL CONTENT
==================================================*/

.theme-modal .theme-modal-content,
.theme-color-modal .theme-modal-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:

    translate(-50%,-50%);

    width:min(920px,92%);

    max-height:88vh;

    overflow-y:auto;

    background:#fff;

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:

        0 40px 90px rgba(0,0,0,.18);

    animation:

    modalShow .35s ease;

}


/*==================================================
        MODAL TITLE
==================================================*/

.theme-modal h4,
.theme-color-modal h4{

    margin-bottom:25px;

    font-size:30px;

    font-weight:700;

    color:#111827;

}


/*==================================================
        CLOSE BUTTON
==================================================*/

.theme-close-btn{

    position:absolute;

    right:18px;

    top:18px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F3F4F6;

    color:#374151;

    cursor:pointer;

    transition:.35s;

    font-size:20px;

}


.theme-close-btn:hover{

    background:#EF4444;

    color:#fff;

    transform:

    rotate(90deg)

    scale(1.08);

}



/*==================================================
        MODAL SCROLL
==================================================*/

.theme-modal-content{

    scrollbar-width:thin;

    scrollbar-color:

    #6366F1

    #EEF2FF;

}


.theme-modal-content::-webkit-scrollbar{

    width:8px;

}


.theme-modal-content::-webkit-scrollbar-track{

    background:#EEF2FF;

    border-radius:20px;

}


.theme-modal-content::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:

    linear-gradient(

        #6366F1,

        #7C3AED

    );

}


/*==================================================
        OPEN ANIMATION
==================================================*/

@keyframes modalShow{

    from{

        opacity:0;

        transform:

        translate(-50%,-45%)

        scale(.92);

    }

    to{

        opacity:1;

        transform:

        translate(-50%,-50%)

        scale(1);

    }

}



@keyframes fadeOverlay{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

    #settingsButton{

        bottom:20px;

        top:auto;

        right:16px;

        transform:none;

        padding:14px 18px;

        border-radius:18px;

        font-size:14px;

    }

    #settingsButton:hover{

        transform:translateY(-4px);

    }

    .theme-modal .theme-modal-content,
    .theme-color-modal .theme-modal-content{

        width:95%;

        padding:22px;

        border-radius:22px;

    }

    .theme-modal h4,
    .theme-color-modal h4{

        font-size:24px;

    }

}

/*==================================================
        PREMIUM THEME CARDS
        PART 2
==================================================*/


/*==============================
    THEME GRID
===============================*/

#theme-game-list{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:24px;

    padding:10px;

    margin-top:20px;

    max-height:65vh;

    overflow-y:auto;

}



/*==============================
      THEME CARD
===============================*/

.theme-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

    border:1px solid #EEF2FF;

    box-shadow:

        0 12px 28px rgba(0,0,0,.06);

}



/* Gradient Border */

.theme-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:2px;

    background:

    linear-gradient(

        135deg,

        #6366F1,

        #8B5CF6,

        #EC4899

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.35s;

}



/*==============================
      HOVER
===============================*/

.theme-card:hover{

    transform:

        translateY(-8px);

    box-shadow:

        0 28px 55px rgba(99,102,241,.18);

}



.theme-card:hover::before{

    opacity:1;

}



/*==============================
        IMAGE
===============================*/

.theme-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.45s;

}



.theme-card:hover img{

    transform:scale(1.08);

}



/* Dark Gradient Overlay */

.theme-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:90px;

    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.05)

    );

    pointer-events:none;

}



/*==============================
        CONTENT
===============================*/

.theme-title{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:18px;

}



/*==============================
        TITLE
===============================*/

.theme-card h3{

    margin:0;

    font-size:19px;

    font-weight:700;

    color:#111827;

}



.theme-card h6{

    margin-top:8px;

    font-size:14px;

    font-weight:500;

    color:#6B7280;

    line-height:1.6;

}



/*==============================
      CHECKMARK BADGE
===============================*/

.checkmark{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#E5E7EB;

    color:#9CA3AF;

    font-size:16px;

    transition:.3s;

}



/*==============================
     SELECTED CARD
===============================*/

.theme-card.selected{

    border-color:#6366F1;

    box-shadow:

        0 0 0 4px rgba(99,102,241,.15),

        0 24px 55px rgba(99,102,241,.25);

}



.theme-card.selected::before{

    opacity:1;

}



/*==============================
    CHECKMARK SELECTED
===============================*/

.theme-card.selected .checkmark{

    background:

    linear-gradient(

        135deg,

        #22C55E,

        #16A34A

    );

    color:#fff;

    animation:

        checkPop .35s ease;

}



/*==============================
     ACTIVE SCALE
===============================*/

.theme-card:active{

    transform:scale(.98);

}



/*==============================
      LABEL BADGE
===============================*/

.theme-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:

    linear-gradient(

        135deg,

        #6366F1,

        #7C3AED

    );

    color:#fff;

    font-size:12px;

    font-weight:600;

    padding:7px 12px;

    border-radius:50px;

    box-shadow:

        0 8px 18px rgba(99,102,241,.25);

}



/*==============================
      HOVER BADGE
===============================*/

.theme-card:hover .theme-badge{

    transform:translateY(-2px);

}



/*==============================
      CHECK ANIMATION
===============================*/

@keyframes checkPop{

    0%{

        transform:scale(.3);

        opacity:0;

    }

    70%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}



/*==============================
      IMAGE SHINE
===============================*/

.theme-image{

    position:relative;

    overflow:hidden;

}



.theme-image::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

    z-index:2;

}



.theme-card:hover .theme-image::before{

    left:150%;

}



/*==============================
      MOBILE
===============================*/

@media(max-width:768px){

    #theme-game-list{

        grid-template-columns:1fr;

        gap:18px;

    }

    .theme-card img{

        height:190px;

    }

    .theme-card h3{

        font-size:17px;

    }

    .theme-card h6{

        font-size:13px;

    }

}

/*==================================================
        PREMIUM COLOR CARDS
        PART 3
==================================================*/


/*=========================================
        COLOR GRID
=========================================*/

#color-list{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:22px;

    padding:10px;

    margin-top:20px;

    max-height:65vh;

    overflow-y:auto;

}


/*=========================================
        COLOR CARD
=========================================*/

.color-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:22px;

    cursor:pointer;

    transition:.35s;

    border:1px solid #EEF2FF;

    box-shadow:

        0 10px 25px rgba(0,0,0,.06);

}



/* Gradient Border */

.color-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:2px;

    background:

    linear-gradient(
        135deg,
        #6366F1,
        #8B5CF6,
        #EC4899
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.35s;

}



/*=========================================
            HOVER
=========================================*/

.color-card:hover{

    transform:
        translateY(-8px);

    box-shadow:

        0 24px 50px rgba(99,102,241,.18);

}

.color-card:hover::before{

    opacity:1;

}



/*=========================================
            IMAGE
=========================================*/

.color-card img{

    width:100%;

    height:145px;

    object-fit:cover;

    transition:.45s;

    display:block;

}



.color-card:hover img{

    transform:scale(1.08);

}



/*=========================================
        CONTENT
=========================================*/

.color-card h6{

    margin:0;

    padding:16px;

    font-size:15px;

    font-weight:600;

    color:#1F2937;

    text-align:center;

}



/*=========================================
        COLOR PREVIEW STRIP
=========================================*/

.color-preview{

    height:8px;

    width:100%;

}



/*=========================================
        CHECK ICON
=========================================*/

.color-card .checkmark{

    position:absolute;

    top:12px;

    right:12px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#F3F4F6;

    color:#9CA3AF;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}



/*=========================================
        SELECTED CARD
=========================================*/

.color-card.selected{

    border-color:#6366F1;

    box-shadow:

        0 0 0 4px rgba(99,102,241,.15),

        0 24px 55px rgba(99,102,241,.22);

}

.color-card.selected::before{

    opacity:1;

}



/*=========================================
        SELECTED CHECK
=========================================*/

.color-card.selected .checkmark{

    background:

    linear-gradient(
        135deg,
        #22C55E,
        #16A34A
    );

    color:#fff;

    animation:checkBounce .35s ease;

}



/*=========================================
        ACTIVE CLICK
=========================================*/

.color-card:active{

    transform:scale(.97);

}



/*=========================================
        SHINE EFFECT
=========================================*/

.color-image{

    position:relative;

    overflow:hidden;

}



.color-image::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

    z-index:2;

}



.color-card:hover .color-image::before{

    left:150%;

}



/*=========================================
        POP ANIMATION
=========================================*/

@keyframes checkBounce{

    0%{

        transform:scale(.2);

        opacity:0;

    }

    70%{

        transform:scale(1.2);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}



/*=========================================
        HOVER GLOW
=========================================*/

.color-card:hover{

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #fbfbff

    );

}



/*=========================================
        MOBILE
=========================================*/

@media(max-width:768px){

    #color-list{

        grid-template-columns:

        repeat(2,1fr);

        gap:16px;

    }

    .color-card img{

        height:120px;

    }

    .color-card h6{

        font-size:13px;

        padding:12px;

    }

}



@media(max-width:480px){

    #color-list{

        grid-template-columns:1fr;

    }

}

/*==================================================
        PART 4
        PREMIUM FINISHING
==================================================*/


/*=========================================
        BUTTON BADGE
=========================================*/

#settingsButton .badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 8px;

    margin-left:4px;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    color:#fff;

    background:linear-gradient(135deg,#EF4444,#F97316);

    border-radius:30px;

    box-shadow:0 6px 16px rgba(239,68,68,.30);

}


/*=========================================
        BUTTON FOCUS
=========================================*/

#settingsButton:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(99,102,241,.18),

        0 20px 45px rgba(99,102,241,.35);

}



/*=========================================
        MODAL HEADER
=========================================*/

.theme-modal-content{

    position:relative;

}

.theme-modal-content::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    border-radius:24px 24px 0 0;

    background:

    linear-gradient(

        90deg,

        #6366F1,

        #8B5CF6,

        #EC4899

    );

}



/*=========================================
        CARD HOVER GLOW
=========================================*/

.theme-card:hover,
.color-card:hover{

    filter:brightness(1.02);

}



/*=========================================
        SELECTED LABEL
=========================================*/

.theme-card.selected::after,
.color-card.selected::after{

    content:"Selected";

    position:relative;

    top:-10px;

    left:10px;

    background:

    linear-gradient(
        135deg,
        #22C55E,
        #16A34A
    );

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

    box-shadow:

        0 10px 20px rgba(34,197,94,.25);

}



/*=========================================
        IMAGE RADIUS FIX
=========================================*/

.theme-card img,
.color-card img{

    display:block;

}



/*=========================================
        MODAL FADE
=========================================*/

.theme-modal.show,
.theme-color-modal.show{

    display:block;

    animation:fadeIn .25s ease;

}



@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*=========================================
        CARD ENTRANCE
=========================================*/

.theme-card,
.color-card{

    animation:cardEntry .45s ease;

}



@keyframes cardEntry{

    from{

        opacity:0;

        transform:

            translateY(25px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}



/*=========================================
        STAGGER EFFECT
=========================================*/

.theme-card:nth-child(1),
.color-card:nth-child(1){animation-delay:.05s;}

.theme-card:nth-child(2),
.color-card:nth-child(2){animation-delay:.10s;}

.theme-card:nth-child(3),
.color-card:nth-child(3){animation-delay:.15s;}

.theme-card:nth-child(4),
.color-card:nth-child(4){animation-delay:.20s;}

.theme-card:nth-child(5),
.color-card:nth-child(5){animation-delay:.25s;}

.theme-card:nth-child(6),
.color-card:nth-child(6){animation-delay:.30s;}

.theme-card:nth-child(7),
.color-card:nth-child(7){animation-delay:.35s;}

.theme-card:nth-child(8),
.color-card:nth-child(8){animation-delay:.40s;}



/*=========================================
        HOVER ICON
=========================================*/

.theme-card:hover .checkmark,
.color-card:hover .checkmark{

    transform:scale(1.08);

}



/*=========================================
        RIPPLE EFFECT
=========================================*/

.theme-card,
.color-card{

    overflow:hidden;

}

.theme-card span.ripple,
.color-card span.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

    background:rgba(99,102,241,.25);

}



@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}



/*=========================================
        EMPTY STATE
=========================================*/

.empty-state{

    padding:60px 20px;

    text-align:center;

    color:#6B7280;

}

.empty-state i{

    font-size:48px;

    color:#D1D5DB;

    margin-bottom:20px;

}

.empty-state h5{

    margin-bottom:10px;

    font-size:20px;

    color:#111827;

}



/*=========================================
        LOADING
=========================================*/

.loading-spinner{

    width:42px;

    height:42px;

    border-radius:50%;

    border:4px solid #E5E7EB;

    border-top-color:#6366F1;

    animation:spin .8s linear infinite;

    margin:auto;

}



@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}



/*=========================================
        SMOOTH TRANSITIONS
=========================================*/

*{

    -webkit-tap-highlight-color:transparent;

}

.theme-card,
.color-card,
#settingsButton,
.theme-modal-content,
.checkmark,
.theme-close-btn{

    transition:

        all .30s ease;

}



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

@media(max-width:768px){

    .theme-modal-content{

        padding:20px;

    }

    .theme-modal-content::before{

        height:5px;

    }

    .theme-card.selected::after,
    .color-card.selected::after{

        font-size:10px;

        padding:5px 10px;

    }

}



/*=========================================
        DARK MODE READY
=========================================*/

body.dark-mode .theme-modal-content{

    background:#1F2937;

    color:#fff;

}

body.dark-mode .theme-card,
body.dark-mode .color-card{

    background:#111827;

    border-color:#374151;

}

body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{

    color:#F9FAFB;

}

body.dark-mode .theme-close-btn{

    background:#374151;

    color:#fff;

}

body.dark-mode .checkmark{

    background:#374151;

}



/*==================================================
            END OF CSS
==================================================*/