/* ==================================================
   MOLIŪGŲ FESTIVALIS
   Pirmojo prototipo dizainas
================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    font-family: Arial, Helvetica, sans-serif;
    color: #49331f;

    background:
        linear-gradient(
            180deg,
            #fff7e4 0%,
            #f5dfb9 100%
        );
}


/* ==================================================
   PAGRINDINĖ SRITIS
================================================== */

.game-container {
    width: min(1180px, 96%);
    margin: auto;
    padding: 20px 0;
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}


/* ==================================================
   PRADŽIOS EKRANAS
================================================== */

.start-content {
    min-height: 620px;

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

    gap: 45px;
    padding: 35px 45px;

    background: rgba(255, 253, 246, 0.96);

    border: 3px solid #d58a37;
    border-radius: 32px;

    box-shadow:
        0 12px 30px rgba(88, 54, 22, 0.14);
}

.robot-box {
    flex: 0 1 42%;

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

.robot-image {
    display: block;

    width: min(390px, 100%);
    max-height: 500px;

    object-fit: contain;
}

.story-box {
    flex: 1;
    max-width: 540px;
}

.story-box h1 {
    margin: 0 0 30px;

    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: 1;

    color: #a64e19;
}

.story-box p {
    margin: 13px 0;

    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.45;
}


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

.panel,
.task-panel {
    min-height: 600px;

    padding: 32px;

    background: rgba(255, 253, 246, 0.96);

    border: 3px solid #d58a37;
    border-radius: 30px;

    box-shadow:
        0 12px 30px rgba(88, 54, 22, 0.14);
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.panel h2 {
    margin: 8px 0 10px;

    font-size: clamp(2rem, 4vw, 3rem);

    color: #934719;
}

.instruction {
    margin: 5px 0 28px;

    font-size: 1.3rem;
}


/* ==================================================
   SVORIUKAS
================================================== */

.small-robot {
    width: min(190px, 42vw);
    max-height: 220px;

    object-fit: contain;
}

.task-robot {
    width: 125px;
    height: 145px;

    object-fit: contain;
}

.finish-robot {
    width: min(240px, 55vw);
    max-height: 290px;

    object-fit: contain;
}


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

.main-button {
    min-width: 210px;
    min-height: 62px;

    margin-top: 26px;
    padding: 14px 28px;

    border: 0;
    border-radius: 18px;

    background: #b75b21;
    color: #ffffff;

    font-size: 1.25rem;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 6px 0 #843d16,
        0 9px 16px rgba(84, 48, 20, 0.18);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.main-button:hover {
    transform: translateY(-2px);
}

.main-button:active {
    transform: translateY(3px);

    box-shadow:
        0 3px 0 #843d16,
        0 5px 10px rgba(84, 48, 20, 0.15);
}

.main-button:focus-visible,
.path-button:focus-visible,
.pumpkin-button:focus-visible {
    outline: 4px solid #315f7d;
    outline-offset: 5px;
}


/* ==================================================
   TAKO PASIRINKIMAS
================================================== */

.path-options {
    width: min(820px, 100%);

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

    gap: 22px;

    margin-top: 12px;
}

.path-button {
    min-height: 180px;

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

    gap: 15px;
    padding: 20px;

    background: #fffaf0;

    border: 3px solid #d58a37;
    border-radius: 24px;

    color: #58371f;

    cursor: pointer;

    box-shadow:
        0 7px 0 #b86c2d,
        0 10px 18px rgba(88, 54, 22, 0.12);

    transition: transform 0.15s ease;
}

.path-button:hover {
    transform: translateY(-4px);
}

.path-button:active {
    transform: translateY(2px);
}

.path-button strong {
    font-size: 1.25rem;
}

.pumpkins {
    font-size: 2rem;
    line-height: 1.2;
}


/* ==================================================
   ŽAIDIMO ANTRAŠTĖ
================================================== */

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 14px;
}

#path-name,
#level-name {
    padding: 10px 20px;

    background: #fffaf0;

    border: 2px solid #d58a37;
    border-radius: 999px;

    font-weight: 700;

    color: #74401d;
}


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

.svoriukas-row {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-bottom: 30px;
}

.speech-box {
    position: relative;

    max-width: 580px;

    padding: 20px 28px;

    background: #fff4d7;

    border: 3px solid #d58a37;
    border-radius: 24px;

    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 700;

    color: #6f3c1a;
}

.speech-box::before {
    content: "";

    position: absolute;

    left: -18px;
    top: 50%;

    width: 28px;
    height: 28px;

    background: #fff4d7;

    border-left: 3px solid #d58a37;
    border-bottom: 3px solid #d58a37;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==================================================
   MOLIŪGŲ UŽDUOTIES VIETA
================================================== */

.pumpkin-area {
    min-height: 300px;

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

    gap: 32px;

    padding: 20px;
}


/* MOLIŪGO KORTELĖ */

.pumpkin-button {
    width: 230px;
    min-height: 270px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 20px 18px 18px;

    background: #fffdf7;

    border: 4px solid #cf7a2e;
    border-radius: 28px;

    cursor: pointer;

    box-shadow:
        0 7px 0 #aa5b23,
        0 11px 18px rgba(78, 48, 22, 0.13);

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.pumpkin-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 9px 0 #aa5b23,
        0 14px 22px rgba(78, 48, 22, 0.16);
}

.pumpkin-button:active {
    transform: translateY(2px);
}


/* TIKRAS MOLIŪGO PAVEIKSLĖLIS */

.pumpkin-image {
    display: block;

    width: 180px;
    height: 165px;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


/* ATSARGINIS EMOJI */

.pumpkin-button .pumpkin-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 180px;
    height: 165px;

    font-size: 5rem;
    line-height: 1;
}


/* SVORIO ETIKETĖ */

.pumpkin-weight {
    min-width: 105px;

    padding: 9px 18px;

    background: #f6e3bd;

    border: 2px solid #d6a45d;
    border-radius: 999px;

    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;

    color: #54351e;

    text-align: center;
}


/* PASIRINKIMO BŪSENOS */

.pumpkin-button.correct {
    border-color: #56834c;
}

.pumpkin-button.incorrect {
    border-color: #b85a4b;
}

.pumpkin-button:disabled {
    cursor: default;
    opacity: 1;
}
/* ==================================================
   ATSAKYMO REAKCIJOS
================================================== */

.pumpkin-button.correct {
    border-color: #56834c;

    animation: correctPulse 0.4s ease;
}

.pumpkin-button.incorrect {
    border-color: #b85a4b;

    animation: incorrectShake 0.35s ease;
}

.feedback {
    min-height: 48px;

    margin-top: 10px;

    text-align: center;

    font-size: 1.35rem;
    font-weight: 700;

    color: #70401e;
}

@keyframes correctPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

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

@keyframes incorrectShake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-7px);
    }

    75% {
        transform: translateX(7px);
    }
}


/* ==================================================
   PROTOTIPO PABAIGA
================================================== */

.finish-panel p {
    margin: 10px 0;

    font-size: 1.35rem;
    line-height: 1.4;
}


/* ==================================================
   2 LYGIS – SUDĖTIS
   VEŽIMAS IR KROVINYS
================================================== */

.load-status {
    width: min(720px, 100%);

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

    gap: 14px;

    margin: 0 auto 22px;
}

.load-status-item {
    min-height: 82px;

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

    padding: 10px 16px;

    background: #fff4d7;

    border: 2px solid #d58a37;
    border-radius: 18px;
}

.status-label {
    margin-bottom: 5px;

    font-size: 1rem;
    font-weight: 700;

    color: #80502a;
}

.load-status-item strong {
    font-size: 1.45rem;
    color: #55351e;
}


/* ==================================================
   VEŽIMO ZONA
================================================== */

.wagon-zone {
    position: relative;

    width: min(620px, 94%);
    height: 300px;

    margin: 5px auto 16px;

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

.wagon-image {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 100%;
    max-height: 270px;

    object-fit: contain;

    transform: translateX(-50%);

    pointer-events: none;
    user-select: none;
}


/* ==================================================
   MOLIŪGAI VEŽIME
================================================== */

.wagon-load {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 48px;

    width: 72%;
    height: 120px;

    transform: translateX(-50%);

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

    gap: 4px;

    pointer-events: auto;
}

.wagon-pumpkin {
    width: 82px;
    height: 82px;

    object-fit: contain;

    cursor: pointer;

    filter:
        drop-shadow(0 4px 3px rgba(71, 43, 18, 0.18));

    transition: transform 0.15s ease;
}

.wagon-pumpkin:hover {
    transform: translateY(-5px);
}


/* ==================================================
   SUDĖTIES UŽDUOTIES PAGALBA
================================================== */

.addition-help {
    margin: 8px 0 4px;

    text-align: center;

    font-size: 1.1rem;
    font-weight: 700;

    color: #70401e;
}

.addition-pumpkin-area {
    min-height: 250px;
    padding-top: 10px;
}


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

@media (max-width: 700px) {

    .load-status {
        grid-template-columns: 1fr;
        max-width: 360px;
    }

    .load-status-item {
        min-height: 65px;
    }

    .wagon-zone {
        height: 230px;
    }

    .wagon-load {
        top: 38px;
        height: 90px;
    }

    .wagon-pumpkin {
        width: 58px;
        height: 58px;
    }
}


/* ==================================================
   PORAŠTĖ
================================================== */

footer {
    padding: 8px 15px 14px;

    text-align: center;

    color: #74583e;

    font-size: 0.88rem;
    line-height: 1.3;
}

footer p {
    margin: 2px 0;
}


/* ==================================================
   PLANŠETĖS IR MAŽESNI EKRANAI
================================================== */

@media (max-width: 820px) {

    .game-container {
        width: 95%;
        padding: 12px 0;
    }

    .start-content {
        min-height: auto;

        flex-direction: column;

        gap: 12px;

        padding: 25px 20px;

        text-align: center;
    }

    .robot-image {
        width: min(230px, 65vw);
        max-height: 270px;
    }

    .story-box h1 {
        margin-bottom: 20px;
    }

    .path-options {
        grid-template-columns: 1fr;

        max-width: 520px;
    }

    .path-button {
        min-height: 125px;
    }

    .game-header {
        flex-direction: column;
    }

    .task-panel,
    .panel {
        min-height: auto;
        padding: 24px 16px;
    }

    .svoriukas-row {
        flex-direction: column;

        gap: 5px;
    }

    .speech-box::before {
        display: none;
    }

    .task-robot {
        width: 105px;
        height: 120px;
    }

    .pumpkin-button {
        min-width: 145px;
        min-height: 160px;
    }
}


/* ==================================================
   LABAI MAŽI EKRANAI
================================================== */

@media (max-width: 480px) {

    .pumpkin-area {
        gap: 15px;
        padding: 10px;
    }

    .pumpkin-button {
        min-width: 125px;
        min-height: 145px;

        padding: 12px;
    }

    .pumpkin-button .pumpkin-icon {
        font-size: 4rem;
    }

    .pumpkin-weight {
        font-size: 1.1rem;
    }

    .main-button {
        width: 100%;
        max-width: 290px;
    }
}


/* ==================================================
   SUMAŽINTAS JUDESYS
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* ==================================================
   2 LYGIS – KOMPAKTIŠKAS VIENO EKRANO IŠDĖSTYMAS
================================================== */

/* Mažesni tarpai užduoties viduje */

#addition-screen .task-panel {
    padding-top: 18px;
    padding-bottom: 18px;
}

#addition-screen .svoriukas-row {
    margin-bottom: 10px;
}


/* Informacijos kortelės */

#addition-screen .load-status {
    width: min(600px, 100%);
    gap: 10px;
    margin: 0 auto 10px;
}

#addition-screen .load-status-item {
    min-height: 62px;
    padding: 7px 12px;
}

#addition-screen .status-label {
    margin-bottom: 2px;
    font-size: 0.9rem;
}

#addition-screen .load-status-item strong {
    font-size: 1.25rem;
}


/* Vežimas */

#addition-screen .wagon-zone {
    width: min(500px, 88%);
    height: 220px;
    margin: 0 auto 5px;
}

#addition-screen .wagon-image {
    max-height: 215px;
}


/* Moliūgų vieta vežime */

#addition-screen .wagon-load {
    top: 28px;
    width: 68%;
    height: 100px;
}

#addition-screen .wagon-pumpkin {
    width: 70px;
    height: 70px;
}


/* Trumpa pagalba */

#addition-screen .addition-help {
    margin: 2px 0 8px;
    font-size: 1rem;
}


/* ==================================================
   PASIRENKAMI MOLIŪGAI
   Tik SUDĖTIES lygyje
================================================== */

#addition-screen .addition-pumpkin-area {
    min-height: 0;

    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;

    gap: 16px;

    padding: 0 10px 12px;
}

#addition-screen .pumpkin-button {
    width: 170px;
    min-height: 205px;

    flex: 0 1 170px;

    gap: 8px;

    padding: 12px 10px 10px;

    border-width: 3px;
    border-radius: 22px;

    box-shadow:
        0 5px 0 #aa5b23,
        0 8px 14px rgba(78, 48, 22, 0.12);
}

#addition-screen .pumpkin-image {
    width: 135px;
    height: 125px;
}

#addition-screen .pumpkin-button .pumpkin-icon {
    width: 135px;
    height: 125px;
    font-size: 4rem;
}

#addition-screen .pumpkin-weight {
    min-width: 82px;

    padding: 7px 14px;

    font-size: 1.2rem;
}


@media (max-width: 800px) {

    #addition-screen .addition-pumpkin-area {
        flex-wrap: wrap;
    }

    #addition-screen .pumpkin-button {
        width: 150px;
        flex-basis: 150px;
    }

    #addition-screen .pumpkin-image {
        width: 120px;
        height: 110px;
    }
}


/* Moliūgo mygtukas vežime – be fono ir rėmelio */

.wagon-pumpkin-button {
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    box-shadow: none;

    cursor: pointer;
}


/* Pakeliame moliūgus aukščiau į vežimą */

#addition-screen .wagon-load {
    top: 7px;
}

#addition-screen .wagon-pumpkin {
    transform: translateY(-18px);
}

#addition-screen .wagon-pumpkin:hover {
    transform: translateY(-23px);
}


/* TĘSTI mygtukas */

.addition-continue-button {
    display: block;
    margin: 10px auto 0;
}

.addition-continue-button[hidden] {
    display: none;
}


/* ==================================================
   3 LYGIS – ATIMU
   VEŽIMAS IR MOLIŪGŲ SVORIO ŽYMOS
================================================== */

#subtraction-screen .task-panel {
    min-height: 600px;

    padding-top: 18px;
    padding-bottom: 18px;
}

#subtraction-screen .svoriukas-row {
    margin-bottom: 16px;
}


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

#subtraction-screen .load-status {
    width: min(600px, 100%);

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

    gap: 10px;

    margin: 0 auto 14px;
}

#subtraction-screen .load-status-item {
    min-height: 68px;

    padding: 8px 14px;
}

#subtraction-screen .status-label {
    margin-bottom: 3px;

    font-size: 0.95rem;
}

#subtraction-screen .load-status-item strong {
    font-size: 1.35rem;
}


/* ==================================================
   ATIMU VEŽIMAS
================================================== */

#subtraction-screen .wagon-zone {
    position: relative;

    width: min(660px, 96%);
    height: 315px;

    margin: 0 auto 4px;

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

#subtraction-screen .wagon-image {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 100%;
    max-height: 285px;

    object-fit: contain;

    transform: translateX(-50%);

    pointer-events: none;
    user-select: none;
}


/* ==================================================
   MOLIŪGŲ ZONA VEŽIME
================================================== */

#subtraction-screen .wagon-load {
    position: absolute;

    z-index: 3;

    left: 50%;
    top: 32px;

    width: 72%;
    height: 125px;

    transform: translateX(-50%);

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

    gap: 8px;

    pointer-events: auto;
}


/* ==================================================
   MOLIŪGO MYGTUKAS
================================================== */

#subtraction-screen .wagon-pumpkin-button {
    position: relative;

    flex: 0 0 92px;

    width: 92px;
    height: 120px;

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

    padding: 0;
    margin: 0;

    overflow: visible;

    background: transparent;
    border: none;
    box-shadow: none;

    cursor: pointer;

    transform: translateY(-34px);

    transition: transform 0.15s ease;
}

#subtraction-screen .wagon-pumpkin-button:hover {
    transform: translateY(-39px);
}


/* ==================================================
   MOLIŪGO PAVEIKSLĖLIS
================================================== */

#subtraction-screen .wagon-pumpkin {
    display: block;

    width: 86px;
    height: 86px;

    object-fit: contain;

    transform: none;

    cursor: pointer;

    filter:
        drop-shadow(
            0 4px 3px
            rgba(71, 43, 18, 0.18)
        );
}

#subtraction-screen .wagon-pumpkin:hover {
    transform: none;
}


/* ==================================================
   SVORIO LENTELĖ
================================================== */

#subtraction-screen .wagon-weight-label {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 8px;

    transform: translateX(-50%);

    min-width: 62px;

    padding: 5px 9px;

    background: #fff4d7;

    border: 2px solid #d58a37;
    border-radius: 999px;

    color: #54351e;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;

    text-align: center;

    white-space: nowrap;

    pointer-events: none;
}


/* ==================================================
   PAGALBOS SAKINYS
================================================== */

#subtraction-screen .addition-help {
    margin: 4px 0 8px;

    text-align: center;

    font-size: 1.05rem;
    font-weight: 700;
}


/* ==================================================
   ATSAKYMO GRĮŽTAMASIS RYŠYS
================================================== */

#subtraction-screen .feedback {
    min-height: 48px;

    margin-top: 6px;
}


/* ==================================================
   KLAVIATŪROS FOKUSAS
================================================== */

#subtraction-screen .wagon-pumpkin-button:focus-visible {
    outline: 4px solid #315f7d;
    outline-offset: 5px;

    border-radius: 14px;
}


/* ==================================================
   IŠJUNGTAS MOLIŪGAS
================================================== */

#subtraction-screen .wagon-pumpkin-button:disabled {
    cursor: default;

    opacity: 1;
}
/* ==================================================
   ATIMU – PLANŠETĖS IR MAŽESNI EKRANAI
================================================== */

@media (max-width: 700px) {

    #subtraction-screen .task-panel {
        min-height: auto;
    }

    #subtraction-screen .load-status {
        grid-template-columns: repeat(2, 1fr);

        width: min(480px, 100%);

        margin-bottom: 12px;
    }

    #subtraction-screen .wagon-zone {
        width: min(540px, 96%);
        height: 255px;
    }

    #subtraction-screen .wagon-image {
        max-height: 235px;
    }

    #subtraction-screen .wagon-load {
        top: 38px;

        width: 76%;
        height: 108px;

        gap: 5px;
    }

    #subtraction-screen .wagon-pumpkin-button {
        flex-basis: 76px;

        width: 76px;
        height: 104px;

        transform: translateY(-28px);
    }

    #subtraction-screen .wagon-pumpkin-button:hover {
        transform: translateY(-32px);
    }

    #subtraction-screen .wagon-pumpkin {
        width: 70px;
        height: 70px;
    }

    #subtraction-screen .wagon-weight-label {
        top: 7px;

        min-width: 54px;

        padding: 4px 7px;

        font-size: 0.9rem;
    }
}


/* ==================================================
   ATIMU – LABAI MAŽI EKRANAI
================================================== */

@media (max-width: 480px) {

    #subtraction-screen .load-status {
        grid-template-columns: 1fr;

        max-width: 300px;
    }

    #subtraction-screen .load-status-item {
        min-height: 58px;
    }

    #subtraction-screen .wagon-zone {
        width: 100%;
        height: 220px;
    }

    #subtraction-screen .wagon-image {
        max-height: 205px;
    }

    #subtraction-screen .wagon-load {
        top: 34px;

        width: 82%;
        height: 92px;

        gap: 2px;
    }

    #subtraction-screen .wagon-pumpkin-button {
        flex-basis: 62px;

        width: 62px;
        height: 90px;

        transform: translateY(-23px);
    }

    #subtraction-screen .wagon-pumpkin-button:hover {
        transform: translateY(-26px);
    }

    #subtraction-screen .wagon-pumpkin {
        width: 58px;
        height: 58px;
    }

    #subtraction-screen .wagon-weight-label {
        top: 6px;

        min-width: 48px;

        padding: 3px 5px;

        font-size: 0.82rem;
    }
}


/* ==================================================
   MOLIŪGŲ FESTIVALIO FINALAS
   Kompaktiškas vieno ekrano išdėstymas
================================================== */

#prototype-finish-screen .festival-finish-panel {
    min-height: 0;

    padding: 16px 28px 18px;

    justify-content: flex-start;
}


/* Svoriukas */

#prototype-finish-screen .finish-robot {
    width: 115px;
    height: 115px;
    max-height: 115px;

    margin: 0 auto 2px;

    object-fit: contain;
}


/* Finalo antraštė */

#prototype-finish-screen .festival-finish-panel h2 {
    margin: 0 0 4px;

    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.05;
}


/* Pagrindinis sakinys */

#prototype-finish-screen .festival-finish-panel > p {
    margin: 3px 0;

    font-size: 1.18rem;
    line-height: 1.25;
}


/* ==================================================
   TRUMPA UŽDUOČIŲ REFLEKSIJA
================================================== */

#prototype-finish-screen .festival-summary {
    width: min(620px, 100%);

    margin: 5px auto 3px;
    padding: 7px 18px;

    background: #fff4d7;

    border: 2px solid #d58a37;
    border-radius: 18px;
}

#prototype-finish-screen .festival-summary p {
    margin: 2px 0;

    font-size: 1.05rem;
    line-height: 1.2;

    font-weight: 700;

    color: #70401e;
}


/* ==================================================
   FESTIVALIO VEŽIMAS
================================================== */

#prototype-finish-screen .festival-wagon {
    position: relative;

    width: min(430px, 80%);
    height: 180px;

    margin: 0 auto;

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

#prototype-finish-screen .festival-wagon-image {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 100%;
    max-height: 175px;

    object-fit: contain;

    transform: translateX(-50%);

    pointer-events: none;
    user-select: none;
}


/* ==================================================
   MOLIŪGAI FINALINIAME VEŽIME
================================================== */

#prototype-finish-screen .festival-pumpkin {
    position: absolute;

    z-index: 2;

    width: 70px;
    height: 70px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(71, 43, 18, 0.18)
        );
}

#prototype-finish-screen .festival-pumpkin-1 {
    left: 34%;
    top: 17px;

    transform: rotate(-7deg);
}

#prototype-finish-screen .festival-pumpkin-2 {
    left: 46%;
    top: 6px;

    transform: rotate(4deg);
}

#prototype-finish-screen .festival-pumpkin-3 {
    left: 57%;
    top: 19px;

    transform: rotate(8deg);
}


/* ==================================================
   FINALINĖ ŽINUTĖ
================================================== */

#prototype-finish-screen .festival-message {
    margin: 1px 0 3px;

    font-size: 1.15rem;
    line-height: 1.2;

    color: #6f3c1a;
}


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

#prototype-finish-screen .festival-buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 5px;
}

#prototype-finish-screen .festival-buttons .main-button {
    min-width: 235px;
    min-height: 54px;

    margin-top: 0;

    padding: 11px 20px;

    font-size: 1.08rem;
}


/* ==================================================
   FINALAS – ŽEMESNI KOMPIUTERIO EKRANAI
================================================== */

@media (max-height: 800px) and (min-width: 821px) {

    #prototype-finish-screen .festival-finish-panel {
        padding-top: 10px;
        padding-bottom: 12px;
    }

    #prototype-finish-screen .finish-robot {
        width: 90px;
        height: 90px;
        max-height: 90px;
    }

    #prototype-finish-screen .festival-finish-panel h2 {
        font-size: 1.9rem;
    }

    #prototype-finish-screen .festival-summary {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #prototype-finish-screen .festival-wagon {
        width: 370px;
        height: 145px;
    }

    #prototype-finish-screen .festival-wagon-image {
        max-height: 142px;
    }

    #prototype-finish-screen .festival-pumpkin {
        width: 58px;
        height: 58px;
    }

    #prototype-finish-screen .festival-pumpkin-1 {
        top: 13px;
    }

    #prototype-finish-screen .festival-pumpkin-2 {
        top: 3px;
    }

    #prototype-finish-screen .festival-pumpkin-3 {
        top: 14px;
    }

    #prototype-finish-screen .festival-buttons .main-button {
        min-height: 50px;

        padding-top: 9px;
        padding-bottom: 9px;
    }
}


/* ==================================================
   FINALAS – PLANŠETĖS
================================================== */

@media (max-width: 820px) {

    #prototype-finish-screen .festival-finish-panel {
        padding: 16px;
    }

    #prototype-finish-screen .finish-robot {
        width: 100px;
        height: 100px;
        max-height: 100px;
    }

    #prototype-finish-screen .festival-summary {
        max-width: 520px;
    }

    #prototype-finish-screen .festival-wagon {
        width: min(400px, 92%);
        height: 165px;
    }

    #prototype-finish-screen .festival-wagon-image {
        max-height: 160px;
    }

    #prototype-finish-screen .festival-buttons {
        gap: 10px;
    }

    #prototype-finish-screen .festival-buttons .main-button {
        margin-top: 0;
    }
}


/* ==================================================
   FINALAS – TELEFONAI
================================================== */

@media (max-width: 520px) {

    #prototype-finish-screen .festival-finish-panel h2 {
        font-size: 1.65rem;
    }

    #prototype-finish-screen .festival-summary {
        padding: 7px 10px;
    }

    #prototype-finish-screen .festival-summary p {
        font-size: 0.95rem;
    }

    #prototype-finish-screen .festival-wagon {
        width: 300px;
        max-width: 95%;
        height: 135px;
    }

    #prototype-finish-screen .festival-wagon-image {
        max-height: 132px;
    }

    #prototype-finish-screen .festival-pumpkin {
        width: 50px;
        height: 50px;
    }

    #prototype-finish-screen .festival-pumpkin-1 {
        top: 12px;
    }

    #prototype-finish-screen .festival-pumpkin-2 {
        top: 4px;
    }

    #prototype-finish-screen .festival-pumpkin-3 {
        top: 13px;
    }

    #prototype-finish-screen .festival-buttons {
        width: 100%;

        flex-direction: column;
    }

    #prototype-finish-screen .festival-buttons .main-button {
        width: min(290px, 100%);
        min-width: 0;
    }
}