/* ===================================== */
/* 01 RESET */
/* ===================================== */
@font-face{

    font-family:"Vatsal-logo";

    src:url("../../assets/data/vatsal-logo-font.ttf")
    format("truetype");

    font-display:swap;
}
@font-face{

    font-family:"pinkend";

    src:url("../../assets/data/pinkend.ttf")
    format("truetype");

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

html{
    font-size:16px;
}

body{
    min-height:100vh;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
background:#000000;
    color:white;
}

/* ===================================== */
/* 02 VARIABLES */
/* ===================================== */

:root{
    --bg:#000000;
    --text:#ffffff;

    --lightGray:#3a3a3c;
    --gray:#565758;
    --green:#6aaa64;
    --darkGreen:#538d4e;

    --yellow:#c9b458;
    --darkYellow:#b59f3b;

    --gray:#787c7e;
    --lightGray:#d3d6da;

    --black:#000000;
    --white:#ffffff;

    --headerHeight:60px;

    --tileSize:62px;

    --keyboardKey:#d3d6da;

    --shadow:
        0 2px 10px
        rgba(0,0,0,.08);

}

/* ===================================== */
/* 03 GLOBAL */
/* ===================================== */

body{
    background:var(--bg);
    color:var(--text);
}

.screen{
    display:none;
    min-height:100vh;
}

.screen.active{
    display:flex;
    flex-direction:column;
}

.hidden{
    display:none !important;
}

h1,h2,h3{
    font-weight:700;
}

button{
    font-family:inherit;
}

input{
    font-family:inherit;
}
/* ===================================== */
/* 04 BUTTONS */
/* ===================================== */

.icon-btn{

    width:42px;
    height:42px;

    border:none;
    border-radius:8px;

    background:#f3f3f3;

    cursor:pointer;

    transition:.2s;
}

.icon-btn:hover{
    background:#e7e7e7;
}

.primary-btn{

    border:none;

    background:var(--green);

    color:white;

    font-size:1rem;

    font-weight:700;

    padding:14px 28px;

    border-radius:10px;

    cursor:pointer;
}

.primary-btn:disabled{

    opacity:.45;

    cursor:not-allowed;
}

/* ===================================== */
/* 05 START SCREEN */
/* ===================================== */

.site-brand .vatsal-home{

    text-align:left;

    font-size: 18px;

    font-weight:700;

    padding:24px 0;
    
    font-family:"Vatsal-logo";
    
    text-decoration:none;

    color:white
}

.start-header{

    width:min(700px,95%);

    margin:0 auto;

    display:grid;

    grid-template-columns:
        50px
        1fr
        100px;

    align-items:center;
}

.game-title{

    text-align:center;

    font-size:3.3rem ;

    letter-spacing:2px;

    font-family:"pinkend";
}

.header-right{

    display:flex;

    justify-content:flex-end;

    gap:8px;
}

.mode-section{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:32px;

    font-family: arial, Helvetica, sans-serif;
}

.mode-grid{

    display:flex;

    gap:20px;
}

.mode-card{

    width:150px;

    height:90px;

    border:2px solid
    var(--lightGray);

    border-radius:14px;

    cursor:pointer;

    transition:.2s;

    display:flex;

    justify-content:center;

    align-items:center;
}

.mode-card:hover{

    border-color:var(--green);
}

.mode-card input{
    display:none;
}

.mode-card span{

    font-size:1.1rem;

    font-weight:700;
}

.mode-card:has(input:checked){

    background:var(--green);

    color:white;

    border-color:var(--green);
}
/* INSERT BEFORE (add this new rule block just above it): */
#start-game-btn:disabled{

    opacity:.45;

    cursor:not-allowed;
}

#start-game-btn{

    width:220px;

    height:56px;

    border:none;

    border-radius:12px;

    background:var(--green);

    color:white;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;
}
/* ===================================== */
/* 06 GAME HEADER */
/* ===================================== */

.game-header{

    width:min(700px,95%);

    margin:0 auto;

    height:var(--headerHeight);

    display:grid;

    grid-template-columns:
        50px
        1fr
        100px;

    align-items:center;

    border-bottom:
        1px solid
        var(--lightGray);
}

.game-header-title{

    text-align:center;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-weight:700;

    font-size:1.2rem;
}

#current-mode{

    color:var(--gray);

    font-size:.9rem;

    letter-spacing:1px;
}

#guess-counter{

    text-align:center;

    margin:16px 0;

    font-size:.95rem;

    color:var(--gray);
}

/* ===================================== */
/* 07 BOARD */
/* ===================================== */

#board-container{

    display:flex;

    justify-content:center;

    align-items:center;

    flex:1;
}

#board{

    display:grid;

    gap:6px;
}

.board-row{

    display:grid;

    grid-template-columns:
        repeat(5,var(--tileSize));

    gap:6px;
}

/* ===================================== */
/* 08 TILES */
/* ===================================== */

.tile{

    width:var(--tileSize);

    height:var(--tileSize);

    border:
        2px solid
        var(--lightGray);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    font-weight:700;

    text-transform:uppercase;

    user-select:none;

    transition:
        background .25s,
        border .25s,
        color .25s;
}

.tile.filled{

    border-color:
        var(--gray);
}

.tile.correct{

    background:
        var(--green);

    border-color:
        var(--green);

    color:white;
}

.tile.present{

    background:
        var(--yellow);

    border-color:
        var(--yellow);

    color:white;
}

.tile.absent{

    background:
        var(--gray);

    border-color:
        var(--gray);

    color:white;
}
/* ===================================== */
/* 09 KEYBOARD */
/* ===================================== */

#keyboard{

    width:min(500px,95vw);

    margin:
        0 auto
        20px auto;
}

.keyboard-row{

    display:flex;

    justify-content:center;

    gap:6px;

    margin-bottom:6px;
}

.key{

    min-width:34px;

    height:58px;

    border:none;

    border-radius:6px;

    background:
        var(--keyboardKey);

    font-weight:700;

    cursor:pointer;

    user-select:none;

    transition:.2s;
}

.key:hover{
    opacity:.9;
}

.key.large{

    min-width:62px;
}

.key.correct{

    background:
        var(--green);

    color:white;
}

.key.present{

    background:
        var(--yellow);

    color:white;
}

.key.absent{

    background:
        var(--gray);

    color:white;
}

/* ===================================== */
/* 10 RESULT PANEL */
/* ===================================== */

#result-panel{

    width:min(500px,95%);

    margin:
        10px auto;

    text-align:center;
}

/* REPLACE WITH: */
.result-card{

    background:#1e1e1f;
    border:
        1px solid
        var(--lightGray);

    border-radius:14px;

    padding:18px;

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

.result-answer{

    margin-top:10px;

    font-weight:700;
}

.play-again-btn{

    margin-top:16px;

    border:none;

    background:
        var(--green);

    color:white;

    padding:
        12px 22px;

    border-radius:10px;

    cursor:pointer;
}

/* ===================================== */
/* 11 TOAST */
/* ===================================== */

#toast{

    position:fixed;

    top:20px;

    left:50%;

    transform:
        translateX(-50%);

    background:
        var(--black);

    color:white;

    padding:
        12px 18px;

    border-radius:8px;

    font-weight:700;

    z-index:9999;

    opacity:0;

    pointer-events:none;
}

#toast.show{

    opacity:1;
}
/* ===================================== */
/* 12 MODALS */
/* ===================================== */

.modal{

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;
}

.modal.hidden{
    display:none;
}

.modal-content{

    width:min(600px,95%);

    max-height:90vh;

    overflow:auto;

    background:white;

    border-radius:16px;

    padding:24px;

    position:relative;
    
    color:black;}


.close-modal{

    position:absolute;

    right:15px;

    top:15px;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    cursor:pointer;
}

.example-section{

    margin-top:24px;
}

.example-row{

    display:flex;

    gap:4px;

    margin-bottom:10px;
}

.example-tile{

    width:44px;

    height:44px;

    border:
        2px solid
        var(--lightGray);

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;
}

.example-tile.green{

    background:
        var(--green);

    border-color:
        var(--green);

    color:white;
}

.example-tile.yellow{

    background:
        var(--yellow);

    border-color:
        var(--yellow);

    color:white;
}

/* ===================================== */
/* 13 STATS */
/* ===================================== */

.stats-grid{

    display:grid;

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

    gap:10px;

    margin-top:20px;
}

/* REPLACE WITH: */
.stat-box{

    background:#1e1e1f;

    border:
        1px solid
        var(--lightGray);

    border-radius:10px;

    padding:12px;

    text-align:center;
}

.stat-value{

    font-size:1.4rem;

    font-weight:700;
}

.stat-label{

    margin-top:4px;

    font-size:.8rem;

    color:var(--gray);
}

.countdown{

    margin-top:15px;

    font-size:1.2rem;

    font-weight:700;

    color:
        var(--green);
}
/* ===================================== */
/* 14 ANIMATIONS */
/* ===================================== */

.pop{
    animation:pop .12s;
}

@keyframes pop{

    0%{
        transform:scale(.85);
    }

    100%{
        transform:scale(1);
    }
}

.flip{

    animation:
        flip .6s ease;
}

@keyframes flip{

    0%{
        transform:
            rotateX(0);
    }

    50%{
        transform:
            rotateX(90deg);
    }

    100%{
        transform:
            rotateX(0);
    }
}

.shake{

    animation:
        shake .5s;
}

@keyframes shake{

    10%,90%{
        transform:
            translateX(-2px);
    }

    20%,80%{
        transform:
            translateX(4px);
    }

    30%,50%,70%{
        transform:
            translateX(-6px);
    }

    40%,60%{
        transform:
            translateX(6px);
    }
}

.bounce{

    animation:
        bounce .8s;
}

@keyframes bounce{

    0%,100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-12px);
    }
}

.toast-fade{

    animation:
        toastFade
        2s forwards;
}

@keyframes toastFade{

    0%{
        opacity:0;
    }

    15%{
        opacity:1;
    }

    85%{
        opacity:1;
    }

    100%{
        opacity:0;
    }
}

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

@media (max-width:600px){

    :root{

        --tileSize:54px;
    }

    .game-title{

        font-size:1.5rem;
    }

    .mode-grid{

        flex-direction:column;
    }

    .mode-card{

        width:220px;
    }

    .key{

        min-width:28px;

        height:52px;

        font-size:.9rem;
    }

    .key.large{

        min-width:52px;
    }

    .stats-grid{

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

@media (max-width:400px){

    :root{

        --tileSize:48px;
    }

    .game-header-title{

        font-size:1rem;
    }

    .key{

        min-width:24px;

        height:48px;

        font-size:.8rem;
    }
}
#below-keyboard{

    width:min(500px,95vw);

    margin:
        12px auto
        20px auto;

    text-align:center;
}

#daily-status{

    width:min(400px,90%);

    margin-top:16px;

    text-align:center;
}