: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%;
    min-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;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    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,
.card,
.settings-card,
.result-card {
    background: var(--glass);
}


/* ===============================
   STROOPLY BRAND LOGO
================================ */


.strooply-logo {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 0px;

    user-select: none;

}



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


.logo-icon {

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;


    position: relative;


    filter:

        drop-shadow(
            0 8px 15px rgba(0,0,0,.18)
        )

        drop-shadow(
            0 22px 35px rgba(0,0,0,.25)
        );



    transition:

        transform .35s ease,

        filter .35s ease;

}



.logo-icon:hover {


    transform:

        translateY(-4px)

        scale(1.04);



    filter:

        drop-shadow(
            0 12px 20px rgba(0,0,0,.2)
        )

        drop-shadow(
            0 28px 45px rgba(0,0,0,.28)
        );

}



.strooply-svg {

    width:100%;

    height:100%;

}





/* ===============================
   TEXT AREA
================================ */


.logo-text {


    display:flex;

    flex-direction:column;

    align-items:center;

}





.logo-text h1 {


    margin:0;


    font-family:

        Poppins,

        "Segoe UI",

        Arial,

        sans-serif,
        
        Inter;



    font-size:50px;


    line-height:.95;


    font-weight:900;


    letter-spacing:-.5px;



    text-shadow:

        0 2px 0 rgba(255,255,255,.08),

        0 10px 25px rgba(0,0,0,.22),

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

}





/* ===============================
   BRAND COLOR
================================ */


.logo-highlight {


background:
linear-gradient(
    120deg,
    #ffffff 0%,
    #fde68a 20%,
    #facc15 38%,
    #34d399 62%,
    #10b981 82%,
    #047857 100%
);



    -webkit-background-clip:text;

    background-clip:text;


    color:transparent;



    filter:

        drop-shadow(
            0 0 8px rgba(250,204,21,.18)
        )

        drop-shadow(
            0 0 18px rgba(34,197,94,.12)
        );

}

.logo-highlight {

    background-size:200% auto;

    animation:
        gradientMove 6s ease infinite;

}


@keyframes gradientMove {

    0% {
        background-position:0% center;
    }

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

    100% {
        background-position:0% center;
    }

}



/* ===============================
   TAGLINE
================================ */


.logo-text p {


    margin:

        10px 0 20px;



    font-family:

        Inter,

        Poppins,

        Arial,

        sans-serif;



    font-size:14px;



    font-weight:700;



    letter-spacing:1.8px;



    text-transform:uppercase;



    color:

        rgba(255,255,255,.72);



    text-shadow:

        0 4px 15px rgba(0,0,0,.25);



}





/* ===============================
   OPTIONAL PREMIUM ANIMATION
================================ */


@keyframes logoFloat {


    0% {

        transform:

            translateY(0);

    }


    50% {

        transform:

            translateY(-5px);

    }


    100% {

        transform:

            translateY(0);

    }

}



.logo-icon {


    animation:

        logoFloat 4s ease-in-out infinite;

}




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


@media(max-width:600px){


    .logo-icon {

        width:85px;

        height:85px;

    }



    .logo-text h1 {

        font-size:44px;

    }



    .logo-text p {

        font-size:12px;

        letter-spacing:1.4px;

    }


}


/* 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;
}

.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;

}





.seo-introduction{

max-width:900px;

margin:40px auto;

padding:20px;

line-height:1.8;

}

.seo-introduction h2{

margin-bottom:16px;

font-size:1.8rem;

}

.seo-introduction p{

margin-bottom:16px;

}

.seo-introduction p:last-child{

margin-bottom:0;

}





/* =====================================================
   WEBSITE FOOTER
===================================================== */

.site-footer {

    width: 100%;

    margin-top: 5px;

    padding: 10px 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    text-align: center;

    font-size: 13px;

}

.site-footer a {

    color: var(--primary);
    text-decoration: none;
    opacity: .75;
    transition: .2s;


}

.site-footer a:hover {

    opacity: 1;

}

.footer-text {
    margin: 0;
}



/* MOBILE */

@media(max-width:480px) {

    body {
        align-items: stretch;
    }

    .container {
        width: 100vw;

        height: 100dvh;
        min-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;
    }
}


.container{
    padding-bottom:max(28px, env(safe-area-inset-bottom));
}

.screen{
    padding-bottom:max(35px, env(safe-area-inset-bottom));
}