/* ===========================
   RAIDŽIŲ LABIRINTAS v1.0 FINAL
=========================== */

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

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#eef5ff;

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

    min-height:100vh;

    padding:16px;

    color:#333;

}

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

.start-screen,
#gameScreen{

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

    background:#ffffff;

    border-radius:24px;

    padding:28px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

/* ===========================
   PRADŽIA
=========================== */

.title{

    text-align:center;
    color:#163b73;
    font-size:36px;
    margin-bottom:18px;

}

.robot{

    text-align:center;
    font-size:80px;
    margin-bottom:18px;

}

.story{

    text-align:center;
    font-size:20px;
    line-height:1.5;
    margin-bottom:14px;

}

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

#startButton,
#nextButton{

    width:100%;
    margin-top:14px;

    padding:14px;

    border:none;
    border-radius:14px;

    background:#2d6cdf;

    color:white;

    font-size:24px;
    font-weight:bold;

    cursor:pointer;

    transition:background .2s, transform .2s;

}

#startButton:hover,
#nextButton:hover{

    background:#1d57c0;

}

#startButton:focus,
#nextButton:focus,
.answer:focus{

    outline:3px solid #8ec5ff;
    outline-offset:3px;

}

/* ===========================
   ROBOTUKĖS KELIAS
=========================== */

.journey{

    margin-bottom:22px;

}

.journey-title{

    text-align:center;

    font-size:24px;
    font-weight:bold;

    color:#163b73;

    margin-bottom:16px;

}

#journeyPath{

    display:flex;

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

    gap:10px;

}

.journey-cell{

    width:34px;
    height:34px;

    border:3px solid #2d6cdf;

    border-radius:10px;

    background:#ffffff;

}

.robot-cell{

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

    font-size:24px;

    background:#d9ecff;

}

.journey-door{

    font-size:30px;

    margin-left:6px;

}

/* ===========================
   ŽAIDIMAS
=========================== */

.game-content{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.picture{

    font-size:90px;

    margin-bottom:12px;

}

.word{

    font-size:56px;
    font-weight:bold;

    letter-spacing:5px;

    margin-bottom:18px;

}

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

.answers{

    width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.answer{

    padding:16px;

    border:none;

    border-radius:14px;

    background:#2d6cdf;

    color:white;

    font-size:30px;
    font-weight:bold;

    cursor:pointer;

    transition:background .2s, transform .2s;

}

.answer:hover{

    background:#1d57c0;
    transform:translateY(-2px);

}

.answer:disabled{

    background:#d6d6d6;

    color:#666;

    cursor:default;

    transform:none;

}

/* ===========================
   PRANEŠIMAS
=========================== */

.feedback{

    margin-top:18px;

    text-align:center;

}

#message{

    min-height:36px;

    font-size:24px;
    font-weight:bold;

    color:#1d57c0;

    margin-bottom:14px;

}

/* ===========================
   AUTORYSTĖ
=========================== */

.footer{

    margin-top:28px;

    padding-top:18px;

    border-top:1px solid #e5ebf5;

    text-align:center;

    font-size:14px;

    line-height:1.7;

    color:#7083a5;

}

/* ===========================
   MAŽESNI EKRANAI
=========================== */

@media (max-width:768px){

    .title{

        font-size:30px;

    }

    .robot{

        font-size:64px;

    }

    .journey-title{

        font-size:20px;

    }

    #journeyPath{

        gap:6px;

    }

    .journey-cell{

        width:26px;
        height:26px;

    }

    .robot-cell{

        font-size:18px;

    }

    .journey-door{

        font-size:24px;

    }

    .picture{

        font-size:72px;

    }

    .word{

        font-size:44px;

    }

    .answer{

        font-size:24px;
        padding:14px;

    }

    .story{

        font-size:18px;

    }

}.footer {
    margin-top: 30px;
    padding: 16px 0;
    text-align: center;
    font-size: 14px;
    color: #666;
    border-top: 1px solid #e5e5e5;
}

.footer p {
    margin: 4px 0;
}