:root{
    --bg1:#6C63FF;
    --bg2:#3A86FF;
    --bg3:#06D6A0;

    --white:#fff;
    --soft:#ffffffb8;

    --glass:#ffffff24;
    --glass-hover:#ffffff38;
    --border:#ffffff33;

    --danger:#ef4444;
    --success:#22c55e;
    --warning:#facc15;

    --radius:22px;
    --shadow:0 25px 60px #0004;

    --ease:.25s ease;
}


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;

    font-family:Inter,sans-serif;
    color:var(--white);

    overflow:hidden;
}

button{
    font-family:inherit;
}


/* BACKGROUND */

.background{
    position:fixed;
    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            135deg,
            var(--bg1),
            var(--bg2),
            var(--bg3)
        );

    background-size:300% 300%;

    animation:
        backgroundMove 18s ease infinite;
}

@keyframes backgroundMove{
    0%,
    100%{
        background-position:0 50%;
    }

    50%{
        background-position:100% 50%;
    }
}


/* APP CONTAINER */

.container{
    position:relative;

    width:min(430px,95vw);
    height:min(760px,94vh);

    padding:28px;

    overflow:hidden;

    border-radius:36px;

    background:var(--glass);
    border:1px solid var(--border);

    backdrop-filter:blur(22px);

    box-shadow:var(--shadow);
}


/* SCREENS */

.screen{
    position:absolute;
    inset:0;

    height:100%;
    min-height:0;

    padding:28px;

    display:flex;
    flex-direction:column;

    overflow-y:auto;

    opacity:0;
    pointer-events:none;

    transform:translateY(15px);

    transition:.3s ease;

    z-index:0;
}

.screen::-webkit-scrollbar{
    width:0;
}

.screen.active{
    opacity:1;
    pointer-events:auto;
    transform:none;
    z-index:1;
}


/* COMMON GLASS ELEMENTS */

.mode,
.secondary,
.statistics-card,
.settings-card,
.result-card{
    background:var(--glass);
}


/* LOGO */

.logo{
    text-align:center;

    margin:35px 0 45px;
}

.logo h1{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:10px;

    font-size:58px;
    font-weight:900;

    letter-spacing:-3px;
}

.logo h1 span{
    font-size:50px;
}

.logo p{
    margin-top:10px;

    color:var(--soft);

    font-size:15px;
}


/* HOME MENU */

.menu-buttons{
    display:flex;
    flex-direction:column;

    gap:18px;
}

.mode{
    display:flex;
    align-items:center;

    gap:20px;

    padding:20px;

    border:0;
    border-radius:24px;

    cursor:pointer;

    color:var(--white);

    transition:var(--ease);
}

.mode:hover{
    transform:translateY(-4px);
    background:var(--glass-hover);
}

.mode-icon{
    min-width:60px;

    font-size:44px;
    text-align:center;
}

.mode strong{
    display:block;
    font-size:19px;
}

.mode small{
    color:var(--soft);
}

.mode > div:last-child{
    text-align:left;
}


/* HOME ACTIONS */

.home-actions{
    margin-top:auto;
    padding-top:35px;

    display:flex;
    gap:15px;
}

.home-actions button{
    flex:1;

    padding:15px;

    border:0;
    border-radius:18px;

    cursor:pointer;

    color:var(--white);

    font-weight:700;

    background:var(--glass);

    transition:.2s;
}

.home-actions button:hover,
.secondary:hover{
    background:var(--glass-hover);
}


/* GAME HEADER */

.topbar{
    display:flex;

    justify-content:space-between;

    margin-bottom:45px;
}

.stat{
    text-align:center;
}

.stat small{
    display:block;

    color:var(--soft);
}

.stat strong{
    font-size:26px;
}


/* QUESTION */

.question{
    text-align:center;

    margin-bottom:35px;
}

#word{
    font-size:58px;

    font-weight:900;

    letter-spacing:-2px;

    user-select:none;

    text-shadow:0 5px 15px #0005;
}

#streak{
    height:30px;

    margin-bottom:10px;

    opacity:0;

    font-size:22px;
    font-weight:800;

    transition:.25s ease;
}

#progressContainer{
    display:none;

    width:100%;
    height:10px;

    margin-bottom:30px;

    overflow:hidden;

    border-radius:999px;

    background:var(--glass);
}

#progressBar{
    width:100%;
    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--success),
            var(--warning),
            var(--danger)
        );

    transition:
        width .15s linear,
        background .4s ease;
}


/* ANSWERS */

#answers{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;
}

.answer{
    padding:18px;

    border:0;
    border-radius:20px;

    cursor:pointer;

    background:white;

    font-size:18px;
    font-weight:800;

    box-shadow:
        0 10px 25px #0003;

    transition:.2s;
}

.answer:hover{
    transform:
        translateY(-4px)
        scale(1.02);
}

.answer:active{
    transform:scale(.96);
}

.answer:disabled{
    opacity:.92;
    cursor:default;
}

.answer.correct{
    background:var(--success);

    color:white!important;

    transform:scale(1.06);

    box-shadow:
        0 0 20px #22c55e99;
}

.answer.wrong{
    background:var(--danger);

    color:white!important;
}


/* ANIMATIONS */

.pop{
    animation:
        scorePop .25s;
}

@keyframes scorePop{
    50%{
        transform:scale(1.35);
    }
}

.combo-fire{
    color:var(--warning);

    text-shadow:
        0 0 12px gold,
        0 0 25px orange;
}


.show-streak{
    animation:
        streakShow .9s;
}

@keyframes streakShow{
    0%{
        opacity:0;
        transform:translateY(15px);
    }

    30%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translateY(-20px);
    }
}

.question-pop{
    animation:
        questionPop .3s ease;
}


/* GAME FOOTER */

.game-footer{
    margin-top:30px;
}

.secondary{
    width:100%;

    padding:15px;

    border:0;
    border-radius:18px;

    cursor:pointer;

    color:white;

    font-weight:700;

    transition:.2s;
}


/* RESULTS */

.trophy{
    text-align:center;

    font-size:75px;

    animation:
        trophyPop .6s;
}

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

    to{
        opacity:1;
        transform:none;
    }
}

#results h2{
    text-align:center;

    margin:20px 0 30px;
}

.results-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;
}

.result-card{
    padding:20px;

    border-radius:20px;

    text-align:center;
}

.result-card small{
    color:var(--soft);
}

.result-card strong{
    display:block;

    margin-top:10px;

    font-size:30px;
}

.result-buttons{
    margin-top:auto;

    padding-top:30px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

.result-buttons button{
    padding:16px;

    border:0;
    border-radius:18px;

    cursor:pointer;

    font-weight:800;
}

#playAgain{
    background:white;

    color:#333;
}


/* STATISTICS */

.page-title{
    text-align:center;

    margin-bottom:30px;

    font-size:28px;
}

#statisticsContainer{
    display:flex;

    flex-direction:column;

    gap:15px;

    overflow-y:auto;

    padding-right:4px;
}

.statistics-card{
    display:flex;

    flex-direction:column;

    gap:8px;

    padding:20px;

    border-radius:22px;
}

.statistics-row{
    display:flex;

    justify-content:space-between;

    margin-top:12px;

    color:white;
}

.stat-value{
    font-size:30px;

    font-weight:900;
}

.empty{
    text-align:center;

    opacity:.7;

    padding:35px 10px;
}

.page-actions{
    margin-top:auto;

    padding-top:30px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

#resetStatistics{
    margin-top:10px;
}


/* SETTINGS */

.settings-card{
    padding:10px;

    border-radius:22px;
}

.settings-card label{
    display:flex;

    justify-content:space-between;
    align-items:center;

    padding:18px;

    font-weight:700;
}

.settings-card label + label{
    border-top:
        1px solid var(--border);
}

.settings-card input{
    width:22px;
    height:22px;

    accent-color:var(--bg3);
}


/* DIALOG */

.dialog{
    position:fixed;

    inset:0;

    z-index:50;

    display:flex;

    justify-content:center;
    align-items:center;

    background:#0007;
}

.hidden{
    display:none!important;
}

.dialog-card{
    width:min(340px,90vw);

    padding:28px;

    border-radius:25px;

    background:white;

    color:#222;

    text-align:center;

    animation:
        dialogPop .25s ease;
}

.dialog-card p{
    margin-top:10px;

    color:#666;
}

.dialog-buttons{
    display:flex;

    gap:15px;

    margin-top:25px;
}

.dialog-buttons button{
    flex:1;

    padding:14px;

    border:0;

    border-radius:15px;

    cursor:pointer;
}

.danger{
    background:var(--danger);

    color:white;

    width:100%;

    padding:15px;

    border:0;
    border-radius:18px;

    cursor:pointer;

    font-weight:700;

    transition:.2s;
}


@keyframes dialogPop{
    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}


/* TIMER */

#timer{
    transition:
        color .4s ease,
        transform .2s ease;
}

.timer-warning{
    color:var(--warning);

    transform:scale(1.08);
}

.timer-danger{
    color:var(--danger);

    transform:scale(1.15);
}


/* BUTTON ACCESSIBILITY */

button:focus-visible{
    outline:
        3px solid #ffffffa6;
}

#statisticsContainer{
    scrollbar-width:thin;
    scrollbar-color:#ffffff66 transparent;
}

#statisticsContainer::-webkit-scrollbar{
    width:6px;
}

#statisticsContainer::-webkit-scrollbar-thumb{
    background:#ffffff66;
    border-radius:10px;
}

#resetStatistics{
    background:#ef4444;
    color:white;
    font-weight:900;
    box-shadow:0 8px 20px #ef444466;
    transition:.25s;
}

#resetStatistics:hover{
    transform:translateY(-3px);
    background:#dc2626;
}


/* ===========================
   HELP PAGE
=========================== */

#helpContainer{

    flex:1;

    overflow-y:auto;

    padding-right:6px;

}

#helpContainer::-webkit-scrollbar{

    width:6px;

}

#helpContainer::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.25);

    border-radius:999px;

}

.help-example{

    margin:20px auto;

    font-size:54px;

    font-weight:900;

    text-align:center;

}

.help-list{

    padding-left:20px;

    margin-top:10px;

    line-height:1.8;

}

.help-colors{

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

}

.help-color{

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

    padding:16px;

    border-radius:20px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

}

.help-color-circle{

    width:52px;
    height:52px;

    border-radius:14px;

    border:2px solid rgba(255,255,255,.4);

    box-shadow:
        0 6px 18px rgba(0,0,0,.25);

    flex-shrink:0;

}

.help-color strong{

    font-size:20px;
    display:block;

}

.help-color small{

    opacity:.75;
    display:block;
    margin-top:3px;

}

#helpContainer{

    flex:1;
    min-height:0;

    overflow-y:auto;

    padding-right:6px;

    display:flex;
    flex-direction:column;
    gap:18px;

}


/* MOBILE */

@media(max-width:480px){

    body{
        align-items:stretch;
    }

    .container{
        width:100vw;
        height:100vh;

        max-height:none;

        border-radius:0;
    }

    .screen{
        padding:22px;

        padding-bottom:35px;
    }

    .logo h1{
        font-size:48px;
    }

    .mode-icon{
        font-size:38px;
    }

    #word{
        font-size:46px;
    }

    .answer{
        padding:16px;

        font-size:16px;
    }
}