/* ===================================================
   SUP Žaidimų laboratorija
   Skaičių ekspedicija v0.3.0
=================================================== */

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

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f1f7ff;

    color:#0f172a;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:16px;

}

#app{

    width:100%;

    max-width:840px;

}

.screen{

    background:#ffffff;

    border-radius:24px;

    padding:26px;

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

}

.hidden{

    display:none;

}

h1{

    text-align:center;

    color:#0d3b66;

    margin-bottom:14px;

    font-size:2.4rem;

}

.subtitle{

    text-align:center;

    font-size:1.4rem;

    margin-bottom:20px;

    color:#1f2937;

}

button{

    display:block;

    width:100%;

    max-width:420px;

    margin:10px auto;

    padding:18px 22px;

    min-height:70px;

    font-size:24px;

    font-weight:700;

    border:3px solid transparent;

    border-radius:18px;

    cursor:pointer;

    background:#0d3b66;

    color:#ffffff;

    transition:.2s ease-in-out;

}

button:hover,

button:focus{

    background:#083054;

    outline:none;

}

button:focus-visible{

    outline:4px solid #f59e0b;

    outline-offset:4px;

}

.answer-button{

    width:100%;

    max-width:none;

    margin:10px 0;

    padding:18px 20px;

    min-height:70px;

    font-size:24px;

    line-height:1.35;

    text-align:left;

    border-radius:18px;

    border:3px solid transparent;

    background:#1d4ed8;

    color:#ffffff;

}

.answer-button:hover,

.answer-button:focus{

    background:#1e40af;

    border-color:#fde68a;

}

.answer-button:focus-visible{

    outline:4px solid #fde68a;

    outline-offset:4px;

}

.map-panel{

    margin-bottom:20px;

}

#map{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4, minmax(80px, 1fr));

    grid-template-rows:repeat(3, minmax(100px, auto));

    gap:14px;

    padding:12px;

    min-height:360px;

    margin-bottom:12px;

    background:#e2eff5;

    border-radius:28px;

}

.stop-0{ grid-column:1; grid-row:1; }

.stop-1{ grid-column:2; grid-row:1; }

.stop-2{ grid-column:3; grid-row:1; }

.stop-3{ grid-column:4; grid-row:1; }

.stop-4{ grid-column:4; grid-row:2; }

.stop-5{ grid-column:4; grid-row:3; }

.stop-6{ grid-column:3; grid-row:3; }

.stop-7{ grid-column:2; grid-row:3; }

.stop-8{ grid-column:1; grid-row:3; }

.stop-9{ grid-column:1; grid-row:2; }

.map-stop{

    position:relative;

    width:100%;

    min-height:120px;

    padding:12px;

    border-radius:18px;

    background:#d1d5db;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#1f2937;

    transition:background .7s ease, transform .7s ease, border-color .7s ease;

}

.map-stop .icon{

    font-size:2.4rem;

}

.map-stop .name{

    margin-top:10px;

    font-size:1rem;

    line-height:1.3;

}

.map-stop.current,

.map-stop.completed{

    background:#16a34a;

    color:#ffffff;

}

.map-stop.completed .checkmark{

    position:absolute;

    top:8px;

    right:8px;

    font-size:1rem;

}

.map-stop.current{

    box-shadow:0 0 0 4px rgba(16,185,129,.18);

    transform:scale(1.03);

}

.map-stop.future{

    background:#9ca3af;

    color:#0f172a;

}

#robot{

    position:absolute;

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.4rem;

    transition:left .7s ease, top .7s ease;

    z-index:2;

    pointer-events:none;

}

@keyframes arrivePulse {
    0% {
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }
    50% {
        box-shadow:0 0 0 18px rgba(255,255,255,0.3);
    }
    100% {
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }
}

.map-stop.arrived {
    animation: arrivePulse 0.45s ease forwards;
}

.progress{

    text-align:center;

    font-size:24px;

    font-weight:bold;

}

.robot-panel{

    text-align:center;

    margin:18px 0;

}

#robot{

    font-size:72px;

    margin-bottom:12px;

}

#message{

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    min-height:50px;

    padding:12px 14px;

    border-radius:18px;

    background:#f8fafc;

    border:2px solid #cbd5e1;

    margin-top:8px;

    white-space:pre-wrap;

    opacity:1;

    overflow:hidden;

    transition:opacity .3s ease, max-height .3s ease, min-height .3s ease, padding .3s ease, margin-top .3s ease, border-color .3s ease;

}

#message.is-hidden{

    opacity:0;

    max-height:0;

    min-height:0;

    padding-top:0;

    padding-bottom:0;

    margin-top:0;

    border-color:transparent;

}

.question-panel{

    margin-top:28px;

    text-align:center;

}

#question{

    font-size:2.4rem;

    margin-bottom:16px;

    color:#111827;

}

.question-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:16px;

}

.location-icon{

    font-size:1.8rem;

}

#location-name{

    font-size:1.1rem;

    font-weight:700;

    color:#0d3b66;

    margin:0;

}

.answers{

    margin-top:20px;

}

.finish-text{

    font-size:30px;

    text-align:center;

    margin:30px 0;

}

@media (max-height: 780px) {
    body {
        padding:8px;
    }

    .screen {
        padding:14px;
    }

    .map-panel {
        margin-bottom:16px;
    }

    #map {
        min-height:170px;
        gap:8px;
        padding:10px;
    }

    .map-stop {
        min-height:70px;
        padding:8px;
    }

    .map-stop .icon {
        font-size:1.75rem;
    }

    .robot-panel {
        margin:6px 0;
    }

    #robot {
        font-size:52px;
    }

    #message {
        min-height:36px;
        padding:10px 12px;
    }

    #question {
        font-size:1.85rem;
        margin-bottom:8px;
    }

    .question-header {
        gap:10px;
        margin-bottom:8px;
    }

    .location-icon {
        font-size:1.65rem;
    }

    .answers {
        margin-top:6px;
    }

    .answer-button {
        margin:6px 0;
        padding:10px 14px;
        min-height:52px;
        font-size:21px;
    }

    button {
        padding:12px 16px;
        min-height:56px;
        font-size:22px;
    }

    .finish-text {
        font-size:28px;
        margin:16px 0;
    }
}
.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;
}