/* ==========================================
   Atminties treniruoklis
   SDL Framework v1.0
========================================== */

:root{
    --primary:#4F8EF7;
    --secondary:#FFD54F;
    --success:#45C16E;
    --error:#F15B5B;

    --background:#F4F8FF;
    --surface:#FFFFFF;
    --text:#2F3A4A;
    --border:#DCE6F7;

    --shadow:0 10px 25px rgba(0,0,0,.08);
    --radius:24px;
}

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

/* ==========================================
   BODY
========================================== */

body{

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

    background:var(--background);

    color:var(--text);

    display:flex;
    justify-content:center;

    padding:30px;

}

/* ==========================================
   APP
========================================== */

#app{

    width:100%;
    max-width:900px;

}

/* ==========================================
   EKRANAI
========================================== */

.screen{

    display:none;

    background:var(--surface);

    border-radius:var(--radius);

    padding:45px;

    text-align:center;

    box-shadow:var(--shadow);

}

.screen.active{

    display:block;

}

/* ==========================================
   PAVADINIMAI
========================================== */

h1{

    font-size:2.2rem;

    margin-bottom:20px;

}

h2{

    font-size:1.7rem;

    margin-bottom:18px;

}

p{

    font-size:1.2rem;

    margin-bottom:12px;

}

/* ==========================================
   ROBOTUKĖ
========================================== */

.robot{

    font-size:90px;

    margin:20px 0;

}

/* ==========================================
   MYGTUKAI
========================================== */

button{

    margin-top:25px;

    min-width:220px;

    height:60px;

    border:none;

    border-radius:18px;

    background:var(--primary);

    color:#fff;

    font-size:1.2rem;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

button:hover{

    transform:translateY(-2px);

}

button:active{

    transform:translateY(1px);

}

/* ==========================================
   GAME HEADER
========================================== */

.gameHeader{

    margin-bottom:30px;

}

.gameInfo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

}

/* ==========================================
   TIMER
========================================== */

#timer{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--secondary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    font-weight:bold;

}

/* ==========================================
   INSTRUKCIJA
========================================== */

#instruction{

    margin:30px 0;

    font-size:1.4rem;

    font-weight:600;

}

/* ==========================================
   PAVEIKSLĖLIAI
========================================== */

#imageContainer{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

/* ==========================================
   ATSAKYMAI
========================================== */

#answersContainer{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}

/* ==========================================
   KORTELĖS
========================================== */

.imageCard,
.answerCard{

    height:140px;

    background:#fff;

    border:3px solid var(--border);

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:70px;

}

.answerCard{

    cursor:pointer;

    transition:.2s;

}

.answerCard:hover{

    border-color:var(--primary);

    transform:scale(1.03);

}

/* ==========================================
   FEEDBACK
========================================== */

#feedbackIcon{

    font-size:90px;

    margin-bottom:20px;

}

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

.footer{

    margin-top:30px;

    padding:20px 0;

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

    text-align:center;

    color:#666;

    font-size:14px;

}

.footer p{

    margin:4px 0;

}

/* ==========================================
   MOBILIEJI
========================================== */

@media (max-width:700px){

    body{

        padding:15px;

    }

    .screen{

        padding:25px;

    }

    h1{

        font-size:1.8rem;

    }

    h2{

        font-size:1.4rem;

    }

    .robot{

        font-size:70px;

    }

    #imageContainer{

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

    }

}