/* ==========================
   Global Settings
========================== */

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


body {

    font-family: "Comic Sans MS",
                 "Arial Rounded MT Bold",
                 Arial,
                 sans-serif;

    background: #dff5ff;

    overflow: hidden;

}



button {

    cursor: pointer;

    border: none;

    border-radius: 25px;

    padding: 15px 35px;

    font-size: 20px;

    font-weight: bold;

    background: #ffcc33;

    color: #333;

    box-shadow: 0 5px 0 #d99d00;

    transition: 0.2s;

}


button:hover {

    transform: translateY(-3px);

}


button:active {

    transform: translateY(3px);

    box-shadow: none;

}



/* ==========================
   Screen System
========================== */


.screen {

    display: none;

    width: 100vw;

    height: 100vh;

}


.screen.active {

    display: flex;

}




/* ==========================
   Title Screen
========================== */


#title-screen {

    justify-content: center;

    align-items: center;

    background:

    linear-gradient(
        #8ed6ff,
        #d8ffd8
    );

}



.title-container {

    text-align: center;

}



.title-container h1 {


    font-size: 55px;

    color: #3b7d3b;

    margin-bottom: 20px;

    text-shadow:

    3px 3px white;


}


.subtitle {

    font-size: 25px;

    margin-bottom: 40px;

}

.instruction {

    font-size: 30px;

    margin-top: 40px;

    color: #555;

    font-weight: bold;

}



/* Tractor Selection */


.tractor-selection {

    display: flex;

    gap: 25px;

    justify-content: center;

    margin-bottom: 40px;

}



.tractor-card {


    width: 150px;

    height: 180px;

    background:white;

    border-radius:25px;

    padding:20px;

    box-shadow:

    0 8px 15px rgba(0,0,0,0.15);


    transition:0.25s;


}


.tractor-card:hover {


    transform:

    translateY(-10px)

    scale(1.05);


}



.tractor-image {


    font-size:70px;

    margin-bottom:10px;

}

.tractor-image img {

    max-width:90px;

    max-height:90px;

    object-fit:contain;

}


.tractor-card h2 {

    font-size:22px;

}




.red {

    color:red;

}


.blue {

    color:#008cff;

}


.yellow {

    color:#ffc400;

}


.green {

    color:#22aa55;

}



/* ==========================
   Game Screen
========================== */


#game-screen {

    position:relative;

}



#game-area {


    width:100%;

    height:100%;

    position:relative;

    overflow:hidden;


}



/* Sky */


.sky {


    position:absolute;

    width:100%;

    height:100%;

    background:

    linear-gradient(
        #87ceeb,
        #d7f9ff
    );


}



/* ==========================
   Farm Road
========================== */


.farm-road {


    position:absolute;

    width:100%;

    height:100%;


    display:flex;

    justify-content:center;


}



.grass {


    position:absolute;

    top:0;

    bottom:0;

    width:35%;

    background:

    repeating-linear-gradient(

        45deg,

        #8bd450,

        #8bd450 20px,

        #79c743 20px,

        #79c743 40px

    );


}



.grass.left {

    left:0;

}



.grass.right {

    right:0;

}




.road {


    width:30%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        #b58b58,

        #d7b77a,

        #b58b58

    );


}




/* Tractor */


#tractor {


    position:absolute;

    bottom:1px;

    left:50%;

    transform:translateX(-50%);


    font-size:90px;


    z-index:5;


}




/* ==========================
   YUMMIE
========================== */


#yummie {

    position:absolute;

    top:20px;

    right:20px;

    z-index:900;

    display:flex;

    flex-direction:column;

    align-items:center;

}


#yummie-message {


    display:none;

    position:absolute;

    right:120px;

    bottom:40px;

    width:250px;

    background:white;

    padding:20px;

    border-radius:20px;


    font-size:18px;


    box-shadow:

    0 5px 15px rgba(0,0,0,0.2);


}




/* ==========================
   Quiz
========================== */

#quiz-box {

    display:none;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:600px;


    padding:35px;

    background:white;

    border-radius:30px;

    text-align:center;

    z-index:1000;

  box-shadow:

    0 10px 25px rgba(0,0,0,.2);

}

#answer-buttons {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:30px;


}


.answer {


    background:#78d7ff;

    box-shadow:

    0 5px 0 #3ba8d8;


}


/* ==========================
   Messages
========================== */


#failure-box,
#success-box {


    display:none;


    position:absolute;

    top:50%;

    left:50%;


    transform:

    translate(-50%,-50%);


    background:white;

    padding:40px;

    border-radius:30px;


    text-align:center;

z-index:1200


}




#failure-box {


    border:5px solid #ff6666;

}



#success-box {


    border:5px solid #66cc66;

    width:min(820px, 92vw);
    max-height:92vh;
    overflow-y:auto;


}

#question-progress {
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:2px dashed #cfe4cf;
}

#question-progress-label {
    color:#4d684f;
    font-size:16px;
    font-weight:900;
    letter-spacing:1.2px;
    white-space:nowrap;
}

#question-progress-dots {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.question-progress-dot {
    width:16px;
    height:16px;
    border:3px solid #b8c8b9;
    border-radius:50%;
    background:#fff;
    transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.question-progress-dot.complete {
    border-color:#57b85b;
    background:#57b85b;
}

.question-progress-dot.current {
    border-color:#e5a800;
    background:#ffd44d;
    transform:scale(1.25);
    box-shadow:0 0 0 4px rgba(255, 212, 77, .28);
}

#game-intro h2 {
    color:#3b7d3b;
    font-size:34px;
    line-height:1.2;
}

#game-intro p {
    margin-top:14px;
    color:#555;
    font-size:18px;
    font-weight:600;
    line-height:1.4;
}

#question-text {
    font-size:30px;
    line-height:1.25;
}

#question-clue {
    display:none;
    margin-top:16px;
    padding-top:16px;
    border-top:2px dashed #a7d9a7;
    color:#3f6246;
    font-size:22px;
    font-weight:600;
    line-height:1.4;
}

.food-card-layout {
    display:grid;
    grid-template-columns:minmax(220px, 380px) 1fr;
    gap:30px;
    align-items:center;
    margin:22px 0;
    text-align:left;
}

#food-card-image {
    display:block;
    width:100%;
    max-height:52vh;
    object-fit:contain;
}

.food-facts h3 {
    color:#3b7d3b;
    font-size:30px;
    margin-bottom:20px;
}

.food-facts p {
    font-size:20px;
    line-height:1.45;
    margin:12px 0;
}

#next-button {
    min-width:170px;


}



/* ==========================
   Finish Screen
========================== */


#finish-screen {


    justify-content:center;

    align-items:center;


    background:

    linear-gradient(

    #fff3a6,

    #a8f0a8

    );


}



.finish-container {


    text-align:center;


}


.home {


    font-size:120px;


}



.finish-container h1 {


    font-size:55px;

    color:#4b8b4b;


}


.finish-container p {


    font-size:25px;

    margin:20px;


}



/* ==========================
   Responsive
========================== */


@media(max-width:700px){


    .tractor-selection {


        flex-wrap:wrap;


    }


    .tractor-card {


        width:120px;

        height:150px;


    }


    #quiz-box {


        width:90%;


    }

    #question-text {
        font-size:24px;
    }

    #question-progress {
        flex-direction:column;
        gap:12px;
        margin-bottom:16px;
        padding-bottom:14px;
    }

    #question-progress-label {
        font-size:14px;
    }

    .question-progress-dot {
        width:14px;
        height:14px;
    }

    #game-intro h2 {
        font-size:28px;
    }

    #game-intro p {
        font-size:16px;
    }

    #question-clue {
        font-size:18px;
    }

    #success-box {
        padding:22px;
    }

    .food-card-layout {
        grid-template-columns:1fr;
        gap:12px;
        text-align:center;
    }

    #food-card-image {
        width:min(280px, 70vw);
        max-height:45vh;
        margin:0 auto;
    }

    .food-facts h3 {
        font-size:25px;
        margin-bottom:10px;
    }

    .food-facts p {
        font-size:17px;
        margin:6px 0;
    }


}

/* =====================================
   Final Game Effects
===================================== */


/* Road Movement */


@keyframes roadMove {


    from {

        background-position-y:0;

    }


    to {

        background-position-y:500px;

    }


}



.road.moving {


    animation:

    roadMove 2s linear infinite;


}





/* Success Effect */


#success-box {


    animation:

    pop 0.5s ease;


}



@keyframes pop {


    0% {

        transform:

        translate(-50%,-50%)

        scale(0.5);

    }


    100% {


        transform:

        translate(-50%,-50%)

        scale(1);


    }

}





/* Failure Shake */


#failure-box {


    animation:

    shake 0.5s;


}




@keyframes shake {


    0% {

        transform:
        translate(-50%,-50%)
        rotate(0deg);

    }


    25% {


        transform:
        translate(-52%,-50%)
        rotate(-5deg);


    }


    50% {


        transform:
        translate(-48%,-50%)
        rotate(5deg);


    }


    100% {


        transform:
        translate(-50%,-50%)
        rotate(0);


    }


}







/* Mud Effect */


.mud {


    background:

    radial-gradient(
        brown,
        #5b3715
    );

}




/* Hot Summer Effect */


.hot {


    filter:

    brightness(1.3);

}







/* Leaf Effect */


.leaves {


    background:

    linear-gradient(
        45deg,
        orange,
        brown
    );

}






/* Winter Freeze */


.freeze {


    filter:

    grayscale(1)
    brightness(1.3);


}




/* Floating YUMMIE */

#yummie {


    animation:

    float 2s infinite alternate;


}



@keyframes float {


    from {

        transform:
        translateY(0);

    }


    to {


        transform:
        translateY(-10px);


    }


}




/* Button Animation */


button {


    transition:

    transform .2s;


}


button:hover {


    transform:

    scale(1.05);


}

/* Size adjustment for driving tractor */

#tractor {

    width: 600px;

    height: auto;

    object-fit: contain;

}

/* YUMMIE character image */

.yummie-image {

    width:120px;

    height:auto;

    object-fit:contain;

}

.field-item{

    position:absolute;

top:-100px;

width:350px;

z-index:50;

    animation:fall 7s linear forwards;

}

@keyframes fall{

    from{

        transform:
        translateY(0);

    }

    to{

        transform:
        translateY(120vh);

    }

}

.field-item{

    position:absolute;

    animation:fall 7s linear forwards;

}

@keyframes fall{

    from{

        transform:
        translateY(-120px);

    }

    to{

        transform:
        translateY(110vh);

    }

}

/* =========================
   GAME AREA
========================= */

#game-area {

    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;

    background:#79c850;

}



/* =========================
   FARM ROAD
========================= */


.farm-road {

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:flex;

}



/* Left / Right field */

.grass {

    width:35%;

    height:100%;

    background-color: #78bf45;
    background-image:
        linear-gradient(74deg, transparent 46%, rgba(37, 112, 42, .55) 47% 50%, transparent 51%),
        linear-gradient(106deg, transparent 46%, rgba(48, 139, 48, .48) 47% 50%, transparent 51%),
        linear-gradient(82deg, transparent 47%, rgba(173, 219, 91, .48) 48% 50%, transparent 51%),
        radial-gradient(ellipse at 25% 70%, rgba(44, 126, 42, .28) 0 4px, transparent 5px),
        radial-gradient(ellipse at 72% 25%, rgba(154, 210, 78, .32) 0 3px, transparent 4px),
        linear-gradient(90deg, #63ad3d, #86ca4b 48%, #70b73f);
    background-size:
        19px 30px,
        23px 34px,
        29px 38px,
        47px 43px,
        61px 55px,
        auto;
    box-shadow: inset -10px 0 18px rgba(49, 106, 34, .18);

}



/* Road */

.road {

    width:30%;

    height:100%;

    background-color: #aa885f;
    background-image:
        radial-gradient(ellipse at 18% 24%, #75614c 0 3px, transparent 4px),
        radial-gradient(ellipse at 72% 68%, #d9c09a 0 4px, transparent 5px),
        radial-gradient(ellipse at 42% 78%, #8a7258 0 2px, transparent 3px),
        radial-gradient(ellipse at 84% 18%, #c2a781 0 5px, transparent 6px),
        radial-gradient(ellipse at 31% 43%, rgba(93, 73, 54, .48) 0 6px, transparent 7px),
        repeating-linear-gradient(174deg, transparent 0 27px, rgba(91, 67, 44, .13) 28px 30px, transparent 31px 52px),
        linear-gradient(90deg, #96744f, #b6966c 18%, #c0a078 50%, #b6966c 82%, #96744f);
    background-size:
        43px 39px,
        57px 51px,
        31px 35px,
        79px 73px,
        97px 89px,
        auto,
        auto;
    border-left: 5px solid rgba(89, 69, 43, .32);
    border-right: 5px solid rgba(89, 69, 43, .32);

}



/* =========================
   TRACTOR FIXED
========================= */


#tractor {

    position:absolute;

    bottom:5px;

    left:50%;

    transform:translateX(-50%);

    width:600px;

    z-index:70;

    /* The tractor stays fixed while scenery moves toward the player. */
    animation:none;

}

#timer {

    position:absolute;

    top:20px;

    left:20px;

    background:white;

    padding:10px 20px;

    border-radius:15px;

    font-size:20px;

    font-weight:bold;

    z-index:1500;

}

#back-to-menu-button {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    padding: 10px 18px;
    font-size: 16px;
    background: #ffffff;
    color: #333;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}

/* =========================
   NORDIC STORYBOOK TITLE
========================= */

#title-screen {
    position:relative;
    display:none;
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    padding:clamp(24px, 4vw, 52px);
    color:#263b32;
    background-color:#f3efe4;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(126, 158, 125, .18) 0 2px, transparent 3px),
        radial-gradient(circle at 83% 12%, rgba(199, 145, 92, .16) 0 2px, transparent 3px),
        repeating-linear-gradient(8deg, rgba(73, 62, 45, .018) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, #f8f5ec 0%, #eee8da 100%);
    background-size:83px 83px, 109px 109px, auto, auto;
}

#title-screen.active {
    display:flex;
}

#title-screen::before,
#title-screen::after {
    content:"";
    position:absolute;
    pointer-events:none;
    border-radius:52% 48% 63% 37% / 39% 58% 42% 61%;
    filter:saturate(.85);
}

#title-screen::before {
    width:clamp(220px, 30vw, 470px);
    height:clamp(220px, 30vw, 470px);
    left:-12vw;
    bottom:-18vw;
    background:rgba(117, 145, 111, .24);
    transform:rotate(18deg);
}

#title-screen::after {
    width:clamp(180px, 24vw, 360px);
    height:clamp(180px, 24vw, 360px);
    right:-9vw;
    top:-13vw;
    background:rgba(201, 154, 105, .19);
    transform:rotate(-22deg);
}

#title-screen .title-container {
    position:relative;
    z-index:1;
    width:min(1120px, 100%);
    text-align:center;
}

.title-hero {
    max-width:820px;
    margin:0 auto clamp(24px, 3.5vh, 42px);
}

.title-badge {
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    color:#667d67;
    font-family:Arial, sans-serif;
    font-size:12px;
    font-weight:800;
    letter-spacing:2.4px;
}

.title-badge-leaf {
    color:#c78455;
    font-size:8px;
}

#title-screen .title-container h1 {
    display:flex;
    flex-direction:column;
    margin:0;
    color:#243c31;
    text-shadow:none;
    line-height:.95;
}

.title-yummy {
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(58px, 7vw, 94px);
    font-weight:500;
    letter-spacing:-4px;
}

.title-adventure {
    margin-top:10px;
    color:#bd744b;
    font-family:"Arial Rounded MT Bold", Arial, sans-serif;
    font-size:clamp(20px, 2.2vw, 31px);
    font-weight:700;
    letter-spacing:5px;
    text-transform:uppercase;
}

#title-screen .subtitle {
    margin:20px 0 0;
    color:#5e6d65;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(16px, 1.6vw, 21px);
    font-style:italic;
    line-height:1.5;
}

.season-heading {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:18px;
}

#title-screen .instruction {
    margin:0;
    color:#394c42;
    font-family:Arial, sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.season-heading-line {
    width:clamp(32px, 6vw, 78px);
    height:1px;
    background:#aab3a8;
}

#title-screen .tractor-selection {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:clamp(12px, 2vw, 22px);
    margin:0 0 28px;
}

#title-screen .tractor-card {
    --season-color:#809f7b;
    position:relative;
    width:auto;
    height:auto;
    min-height:218px;
    padding:22px 16px 18px;
    overflow:hidden;
    cursor:pointer;
    background:rgba(255, 253, 247, .82);
    border:2px solid rgba(62, 82, 69, .12);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(64, 57, 43, .08);
    outline:none;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

#title-screen .tractor-card[data-season="spring"] { --season-color:#80a878; }
#title-screen .tractor-card[data-season="summer"] { --season-color:#d6a83f; }
#title-screen .tractor-card[data-season="autumn"] { --season-color:#c4774c; }
#title-screen .tractor-card[data-season="winter"] { --season-color:#7d9dae; }

#title-screen .tractor-card::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:5px;
    background:var(--season-color);
    transform:scaleX(.28);
    transform-origin:center;
    opacity:.45;
    transition:transform .25s ease, opacity .25s ease;
}

#title-screen .tractor-card:hover,
#title-screen .tractor-card:focus-visible {
    transform:translateY(-6px);
    border-color:color-mix(in srgb, var(--season-color) 58%, white);
    box-shadow:0 18px 38px rgba(64, 57, 43, .13);
}

#title-screen .tractor-card.selected {
    transform:translateY(-7px);
    background:#fffdf7;
    border-color:var(--season-color);
    box-shadow:0 20px 42px rgba(64, 57, 43, .15), 0 0 0 3px color-mix(in srgb, var(--season-color) 20%, transparent);
}

#title-screen .tractor-card.selected::after {
    transform:scaleX(1);
    opacity:1;
}

.season-number {
    position:absolute;
    top:15px;
    left:17px;
    color:#9a9f98;
    font-family:Georgia, serif;
    font-size:13px;
}

.season-check {
    position:absolute;
    top:12px;
    right:13px;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    color:white;
    background:var(--season-color);
    border-radius:50%;
    font-size:14px;
    opacity:0;
    transform:scale(.5) rotate(-15deg);
    transition:opacity .2s ease, transform .2s ease;
}

#title-screen .tractor-card.selected .season-check {
    opacity:1;
    transform:scale(1) rotate(0);
}

#title-screen .tractor-image {
    display:flex;
    align-items:center;
    justify-content:center;
    height:118px;
    margin:4px 0 4px;
}

#title-screen .tractor-image img {
    width:min(150px, 92%);
    max-width:none;
    max-height:112px;
    object-fit:contain;
    filter:drop-shadow(0 8px 7px rgba(63, 55, 41, .13));
    transition:transform .25s ease;
}

#title-screen .tractor-card:hover .tractor-image img,
#title-screen .tractor-card.selected .tractor-image img {
    transform:scale(1.06) rotate(-1deg);
}

.season-card-copy h2,
#title-screen .tractor-card h2 {
    margin:0;
    color:#2f4438;
    font-family:Georgia, "Times New Roman", serif;
    font-size:23px;
    font-weight:500;
}

.season-card-copy p {
    margin-top:6px;
    color:#7a827c;
    font-family:Arial, sans-serif;
    font-size:12px;
    letter-spacing:.5px;
}

#title-screen #start-button {
    min-width:min(370px, 92vw);
    padding:17px 32px;
    color:#fffdf7;
    background:#304b3d;
    border:1px solid #304b3d;
    border-radius:999px;
    box-shadow:0 7px 0 #1f352a, 0 13px 24px rgba(48, 75, 61, .16);
    font-family:Arial, sans-serif;
    font-size:15px;
    font-weight:800;
    letter-spacing:1.5px;
}

#title-screen #start-button:hover:not(:disabled) {
    transform:translateY(-2px) scale(1.015);
}

#title-screen #start-button:active:not(:disabled) {
    transform:translateY(5px);
    box-shadow:0 2px 0 #1f352a;
}

#title-screen #start-button:disabled {
    cursor:not-allowed;
    color:#8a918b;
    background:#d9d9d1;
    border-color:#d1d1ca;
    box-shadow:0 5px 0 #bdbdb6;
}

.title-footnote {
    margin-top:15px;
    color:#838a84;
    font-family:Arial, sans-serif;
    font-size:11px;
    letter-spacing:1px;
}

@media(max-width:850px) {
    #title-screen {
        align-items:flex-start;
    }

    #title-screen .tractor-selection {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    #title-screen .tractor-card {
        min-height:190px;
    }

    #title-screen .tractor-image {
        height:95px;
    }

    #title-screen .tractor-image img {
        max-height:92px;
    }
}

@media(max-width:500px) {
    #title-screen {
        padding:28px 16px;
    }

    .title-badge {
        font-size:9px;
        letter-spacing:1.5px;
    }

    .title-yummy {
        letter-spacing:-2px;
    }

    .title-adventure {
        letter-spacing:2.5px;
    }

    #title-screen .tractor-selection {
        gap:10px;
    }

    #title-screen .tractor-card {
        min-height:165px;
        padding:18px 8px 14px;
        border-radius:16px;
    }

    #title-screen .tractor-image {
        height:80px;
    }

    #title-screen .tractor-image img {
        max-height:76px;
    }

    .season-card-copy h2,
    #title-screen .tractor-card h2 {
        font-size:19px;
    }

    .season-card-copy p {
        display:none;
    }
}

/* =========================
   NORDIC STORYBOOK GAME
========================= */

#game-area {
    background:#adbd9d;
}

.grass {
    background-color:#adbd9d;
    background-image:
        linear-gradient(74deg, transparent 46%, rgba(83, 105, 75, .19) 47% 50%, transparent 51%),
        linear-gradient(106deg, transparent 46%, rgba(91, 112, 81, .17) 47% 50%, transparent 51%),
        linear-gradient(82deg, transparent 47%, rgba(220, 226, 190, .30) 48% 50%, transparent 51%),
        radial-gradient(ellipse at 25% 70%, rgba(84, 104, 75, .13) 0 4px, transparent 5px),
        radial-gradient(ellipse at 72% 25%, rgba(224, 230, 194, .25) 0 3px, transparent 4px),
        repeating-linear-gradient(7deg, rgba(255, 252, 239, .025) 0 1px, transparent 1px 9px),
        linear-gradient(90deg, #9eaf90, #b9c7a7 48%, #a6b697);
    background-size:
        19px 30px,
        23px 34px,
        29px 38px,
        47px 43px,
        61px 55px,
        auto,
        auto;
    box-shadow:none;
}

.grass.left {
    box-shadow:inset -12px 0 24px rgba(58, 68, 51, .10);
}

.grass.right {
    box-shadow:inset 12px 0 24px rgba(58, 68, 51, .10);
}

.road {
    background-color:#cfbea1;
    background-image:
        radial-gradient(ellipse at 18% 24%, rgba(125, 113, 96, .38) 0 2px, transparent 3px),
        radial-gradient(ellipse at 72% 68%, rgba(241, 231, 211, .72) 0 3px, transparent 4px),
        radial-gradient(ellipse at 42% 78%, rgba(143, 128, 106, .34) 0 2px, transparent 3px),
        radial-gradient(ellipse at 84% 18%, rgba(232, 217, 190, .70) 0 4px, transparent 5px),
        radial-gradient(ellipse at 31% 43%, rgba(119, 103, 83, .18) 0 5px, transparent 6px),
        repeating-linear-gradient(174deg, transparent 0 27px, rgba(107, 91, 72, .05) 28px 30px, transparent 31px 52px),
        linear-gradient(90deg, #bcaa8e, #d1c0a3 18%, #dccbad 50%, #d1c0a3 82%, #bcaa8e);
    background-size:
        43px 39px,
        57px 51px,
        31px 35px,
        79px 73px,
        97px 89px,
        auto,
        auto;
    border-left:4px solid rgba(73, 67, 56, .17);
    border-right:4px solid rgba(73, 67, 56, .17);
    box-shadow:inset 18px 0 28px rgba(79, 68, 54, .08), inset -18px 0 28px rgba(79, 68, 54, .08);
}

#quiz-box,
#success-box,
#failure-box {
    color:#2f4438;
    background:rgba(255, 253, 247, .97);
    border-color:#879f80;
    box-shadow:0 18px 48px rgba(55, 55, 43, .18);
}

#quiz-box {
    border:1px solid rgba(75, 91, 80, .16);
}

#failure-box {
    border-color:#bd7967;
}

#question-text,
#game-intro h2,
.food-facts h3 {
    color:#304b3d;
}

#question-clue {
    color:#576b5d;
    border-top-color:#c9d0bf;
}

#question-progress {
    border-bottom-color:#d8d4c8;
}

#question-progress-label {
    color:#657266;
}

.question-progress-dot {
    border-color:#b9bcb2;
    background:#fffdf7;
}

.question-progress-dot.complete {
    border-color:#809f7b;
    background:#809f7b;
}

.question-progress-dot.current {
    border-color:#bd744b;
    background:#d79a6a;
    box-shadow:0 0 0 4px rgba(189, 116, 75, .18);
}

.answer {
    color:#243a31;
    background:#aec5bd;
    box-shadow:0 5px 0 #718e84;
}

.answer:hover {
    background:#bdd0c9;
}

#game-screen button:not(.answer),
#finish-screen button {
    color:#fffdf7;
    background:#c58a58;
    box-shadow:0 5px 0 #90613e;
}

#timer,
#game-screen #back-to-menu-button {
    color:#36483e;
    background:rgba(250, 247, 237, .92);
    border:1px solid rgba(63, 76, 67, .13);
    box-shadow:0 5px 16px rgba(48, 49, 39, .12);
    backdrop-filter:blur(5px);
}

#game-screen #back-to-menu-button {
    color:#43544a;
}

/* Difficulty selection modal */
.difficulty-modal[hidden] { display:none; }

.difficulty-modal {
    position:fixed;
    inset:0;
    z-index:5000;
    display:grid;
    place-items:center;
    padding:24px;
}

.difficulty-backdrop {
    position:absolute;
    inset:0;
    background:rgba(48, 57, 48, .38);
    backdrop-filter:blur(6px);
}

.difficulty-panel {
    position:relative;
    width:min(760px, 94vw);
    padding:38px;
    border:1px solid rgba(75, 91, 80, .16);
    border-radius:30px;
    background:#fffaf0;
    box-shadow:0 28px 80px rgba(48, 49, 39, .28);
    text-align:center;
    animation:difficultyRise .25s ease-out;
}

@keyframes difficultyRise {
    from { opacity:0; transform:translateY(18px) scale(.98); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

.difficulty-close {
    position:absolute;
    top:14px;
    right:16px;
    width:40px;
    height:40px;
    padding:0;
    border-radius:50%;
    color:#657266;
    background:#ece9dc;
    box-shadow:none;
    font-size:28px;
    line-height:1;
}

.difficulty-eyebrow {
    margin-bottom:8px;
    color:#bd744b;
    font-size:13px;
    font-weight:900;
    letter-spacing:.16em;
}

.difficulty-panel h2 {
    color:#304b3d;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(28px, 4vw, 42px);
}

.difficulty-season-label {
    margin:8px 0 26px;
    color:#718073;
    font-size:15px;
    font-weight:800;
    letter-spacing:.12em;
}

.difficulty-options {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

.difficulty-option {
    min-height:190px;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:2px solid transparent;
    border-radius:24px;
    color:#304b3d;
    background:#f2efe4;
    box-shadow:0 7px 0 #d8d2c2;
}

.difficulty-option.easy { background:#e4eedb; box-shadow:0 7px 0 #afc3a2; }
.difficulty-option.medium { background:#f7e9bd; box-shadow:0 7px 0 #d9bd68; }
.difficulty-option.hard { background:#ecd5c7; box-shadow:0 7px 0 #c88b69; }

.difficulty-option:hover,
.difficulty-option:focus-visible {
    transform:translateY(-5px);
    border-color:#607a68;
}

.difficulty-option.selected {
    border-color:#607a68;
    box-shadow:0 0 0 4px rgba(96, 122, 104, .16);
}

.difficulty-level { font-size:24px; font-weight:1000; letter-spacing:.06em; }
.difficulty-age { font-size:17px; font-weight:800; }
.difficulty-copy { max-width:170px; color:#657266; font-size:13px; font-weight:600; line-height:1.35; }

@media (max-width:650px) {
    .difficulty-panel { padding:34px 18px 24px; max-height:92vh; overflow:auto; }
    .difficulty-options { grid-template-columns:1fr; }
    .difficulty-option { min-height:112px; }
}

/* Tractor character names on the title screen */
.tractor-name {
    margin-top:2px;
    margin-bottom:8px;
    font-size:20px;
    font-weight:900;
    line-height:1.1;
    text-shadow:2px 2px 0 #fff;
}

.tractor-name.red { color:#e53935; }
.tractor-name.blue { color:#008cff; }
.tractor-name.yellow { color:#e0a800; }
.tractor-name.green { color:#22aa55; }

@media (max-width:700px) {
    .tractor-name { font-size:17px; }
}

#yummie-message {
    color:#34483d;
    background:#fffdf7;
    border:1px solid #ded9cc;
    box-shadow:0 10px 28px rgba(55, 55, 43, .14);
}

#finish-screen {
    background:
        radial-gradient(circle at 18% 22%, rgba(192, 139, 92, .13) 0 2px, transparent 3px),
        linear-gradient(145deg, #f7f3e9, #d7dfca);
    background-size:89px 89px, auto;
}

.finish-container h1 {
    color:#304b3d;
}

/* =========================
   POP TITLE + SUNNY GAME FIELD
   Final overrides intentionally live at the end of the file.
========================= */

#title-screen {
    color:#174f6f;
    background-color:#c9efff;
    background-image:linear-gradient(155deg, #bceaff 0%, #e6f8ff 62%, #fff2aa 100%);
    background-size:auto;
}

#title-screen::before {
    display:none;
}

#title-screen::after {
    width:clamp(210px, 25vw, 380px);
    height:clamp(210px, 25vw, 380px);
    right:-10vw;
    top:-12vw;
    background:#ffda55;
    opacity:.48;
    filter:none;
}

.title-badge {
    padding:8px 16px;
    color:#16769a;
    background:rgba(255,255,255,.82);
    border:2px solid #73cde8;
    border-radius:999px;
    box-shadow:0 4px 0 rgba(39,143,176,.18);
    font-size:13px;
}

.title-badge-leaf { color:#ff6b52; }

#title-screen .title-container h1 {
    color:#14769b;
    text-shadow:0 4px 0 #fff, 0 8px 0 rgba(41,139,174,.14);
}

.title-yummy {
    font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
    font-weight:1000;
    letter-spacing:1px;
}

.title-adventure {
    color:#ff624c;
    font-weight:1000;
    text-shadow:0 3px 0 #fff;
}

#title-screen .subtitle {
    color:#2c6b7d;
    font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
    font-style:normal;
    font-weight:800;
}

#title-screen .instruction {
    color:#17688a;
    font-size:14px;
    font-weight:1000;
}

.season-heading-line {
    height:3px;
    background:#65c5e4;
    border-radius:999px;
}

#title-screen .tractor-card {
    border-width:3px;
    border-color:var(--season-color);
    border-radius:26px;
    box-shadow:0 8px 0 var(--season-shadow), 0 16px 26px rgba(29,103,127,.12);
}

#title-screen .tractor-card[data-season="spring"] {
    --season-color:#45bc68;
    --season-shadow:#269447;
    background:#dcf8c9;
}

#title-screen .tractor-card[data-season="summer"] {
    --season-color:#f3b51b;
    --season-shadow:#d18e00;
    background:#fff2a6;
}

#title-screen .tractor-card[data-season="autumn"] {
    --season-color:#f06b43;
    --season-shadow:#cd452b;
    background:#ffd1ae;
}

#title-screen .tractor-card[data-season="winter"] {
    --season-color:#439ee8;
    --season-shadow:#2478bd;
    background:#d9efff;
}

#title-screen .tractor-card:hover,
#title-screen .tractor-card:focus-visible,
#title-screen .tractor-card.selected {
    background:color-mix(in srgb, var(--season-color) 16%, white);
    border-color:var(--season-color);
    box-shadow:0 11px 0 var(--season-shadow), 0 20px 30px rgba(29,103,127,.17);
}

.season-number {
    color:#27657b;
    font-family:"Arial Rounded MT Bold", Arial, sans-serif;
    font-size:15px;
    font-weight:1000;
}

.season-card-copy h2,
#title-screen .tractor-card h2 {
    color:#185b75;
    font-family:"Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
    font-size:25px;
    font-weight:1000;
}

.season-card-copy p {
    color:#397084;
    font-size:13px;
    font-weight:800;
}

#title-screen #start-button {
    color:#fff;
    background:#ff654d;
    border:3px solid #fff;
    box-shadow:0 8px 0 #c93e2e, 0 14px 24px rgba(201,62,46,.2);
    font-size:16px;
    font-weight:1000;
}

#title-screen #start-button:active:not(:disabled) {
    box-shadow:0 3px 0 #c93e2e;
}

#title-screen #start-button:disabled {
    color:#6a8791;
    background:#d9edf2;
    border-color:#fff;
    box-shadow:0 6px 0 #a9cbd5;
}

.title-footnote { color:#34758b; font-weight:800; }

#title-screen > #title-copyright {
    width:auto;
    position:fixed;
    left:auto;
    right:32px;
    bottom:28px;
    z-index:30;
    margin:0;
    padding:0;
    transform:none;
    border:0;
    border-radius:0;
    color:#26363b;
    background:transparent;
    box-shadow:none;
    font-family:Arial, Helvetica, sans-serif;
    text-align:right;
    backdrop-filter:none;
    visibility:visible;
    opacity:1;
}

.title-copyright-line {
    display:none;
}

.title-copyright p {
    margin:0;
    color:#26363b;
    font-size:12px;
    font-weight:800;
    line-height:1.45;
    letter-spacing:.025em;
}

@media (max-width:500px) {
    #title-screen > #title-copyright {
        width:auto;
        right:10px !important;
        bottom:12px !important;
        padding:0;
    }

    .title-copyright-line { margin-bottom:9px; }
    .title-copyright p { font-size:10px; }
}

.difficulty-backdrop { background:rgba(28, 91, 113, .34); }
.difficulty-panel { background:#fffdf2; border:3px solid #79cfea; }
.difficulty-eyebrow { color:#ff654d; }
.difficulty-panel h2 { color:#176b89; font-family:"Arial Rounded MT Bold", Arial, sans-serif; }

#game-screen #game-area {
    background:#78d653 !important;
}

#game-screen .grass {
    background-color:#78d653 !important;
    background-image:
        linear-gradient(73deg, transparent 44%, rgba(31,116,38,.36) 45% 49%, transparent 50%),
        linear-gradient(107deg, transparent 44%, rgba(35,125,42,.32) 45% 49%, transparent 50%),
        linear-gradient(82deg, transparent 46%, rgba(220,255,166,.55) 47% 50%, transparent 51%),
        radial-gradient(ellipse at 24% 68%, rgba(35,123,40,.22) 0 4px, transparent 5px),
        linear-gradient(90deg, #67c943, #8de163 50%, #69ca45) !important;
    background-size:17px 28px, 21px 32px, 19px 30px, 43px 39px, auto !important;
}

#game-screen .road {
    background-color:#d9a15f !important;
    background-image:
        radial-gradient(ellipse at 18% 24%, rgba(111,71,34,.42) 0 2px, transparent 3px),
        radial-gradient(ellipse at 72% 68%, rgba(255,226,169,.92) 0 3px, transparent 4px),
        radial-gradient(ellipse at 42% 78%, rgba(123,77,35,.35) 0 2px, transparent 3px),
        radial-gradient(ellipse at 84% 18%, rgba(255,218,150,.9) 0 4px, transparent 5px),
        radial-gradient(ellipse at 31% 43%, rgba(118,73,32,.25) 0 5px, transparent 6px),
        linear-gradient(90deg, #c58745, #dda761 18%, #e8b873 50%, #dda761 82%, #c58745) !important;
    border-left-color:#a96e35 !important;
    border-right-color:#a96e35 !important;
    box-shadow:inset 16px 0 22px rgba(105,61,24,.13), inset -16px 0 22px rgba(105,61,24,.13) !important;
}

/* =========================================================
   AUSTRALIAN SEASONAL PLAY FIELD
   Added after the existing game styles so the current title
   screen, difficulty modal and level-specific questions stay intact.
========================================================= */

#game-area .grass,
#game-area .road {
    position:relative;
    overflow:hidden;
    transition:background-color .45s ease, filter .45s ease;
}

#game-area .grass::after,
#game-area .road::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

/* Spring — fresh green grass and small Australian wildflowers. */
#game-area[data-season="spring"] .grass {
    background-color:#70cf55 !important;
    background-image:
        linear-gradient(74deg, transparent 45%, rgba(29,117,42,.42) 46% 49%, transparent 50%),
        linear-gradient(106deg, transparent 45%, rgba(45,139,50,.34) 46% 49%, transparent 50%),
        linear-gradient(90deg, #5fc745, #8bdf67 50%, #63c849) !important;
    background-size:18px 29px, 23px 33px, auto !important;
}

#game-area[data-season="spring"] .grass::after {
    opacity:1;
    background-image:
        radial-gradient(circle, #fffdf0 0 3px, #ffd94f 4px 5px, transparent 6px),
        radial-gradient(circle, #fff8d8 0 3px, #f29c45 4px 6px, transparent 7px),
        radial-gradient(circle, #ffe7fb 0 3px, #a967d1 4px 6px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #66aee8 3px 5px, transparent 6px);
    background-size:53px 61px, 71px 79px, 89px 73px, 97px 91px;
    background-position:8px 7px, 31px 23px, 57px 12px, 76px 46px;
}

#game-area[data-season="spring"] .road {
    background-color:#d2a66d !important;
    filter:saturate(1.02) brightness(1.04);
}

/* Summer — sun-bleached grass and a pale, dusty gravel road. */
#game-area[data-season="summer"] .grass {
    background-color:#bdca4e !important;
    background-image:
        linear-gradient(75deg, transparent 46%, rgba(112,122,37,.46) 47% 50%, transparent 51%),
        linear-gradient(105deg, transparent 46%, rgba(230,193,67,.55) 47% 50%, transparent 51%),
        linear-gradient(90deg, #aaba43, #d6cf60 50%, #b1bd45) !important;
    background-size:18px 32px, 27px 38px, auto !important;
}

#game-area[data-season="summer"] .grass::after {
    opacity:.78;
    background-image:
        repeating-linear-gradient(116deg, transparent 0 34px, rgba(247,220,105,.9) 35px 38px, transparent 39px 67px),
        radial-gradient(ellipse, rgba(242,202,74,.95) 0 5px, transparent 6px);
    background-size:auto, 74px 83px;
    background-position:0 0, 27px 19px;
}

#game-area[data-season="summer"] .road {
    background-color:#d4ad72 !important;
    filter:saturate(.88) brightness(1.1);
}

#game-area[data-season="summer"] .road::after {
    background:linear-gradient(90deg, rgba(255,246,211,.08), rgba(255,246,211,.24), rgba(255,246,211,.08));
}

/* Autumn — olive grass with slender eucalyptus-like leaf litter. */
#game-area[data-season="autumn"] .grass {
    background-color:#91b653 !important;
    background-image:
        linear-gradient(76deg, transparent 46%, rgba(70,119,45,.43) 47% 50%, transparent 51%),
        linear-gradient(104deg, transparent 46%, rgba(163,151,51,.4) 47% 50%, transparent 51%),
        linear-gradient(90deg, #7da548, #a8c25c 50%, #83a64b) !important;
    background-size:20px 32px, 27px 37px, auto !important;
}

#game-area[data-season="autumn"] .grass::after {
    opacity:1;
    background-image:
        radial-gradient(ellipse at center, #c9582f 0 6px, transparent 7px),
        radial-gradient(ellipse at center, #efa82e 0 7px, transparent 8px),
        radial-gradient(ellipse at center, #87502d 0 5px, transparent 6px),
        radial-gradient(ellipse at center, #d97c32 0 5px, transparent 6px);
    background-size:59px 53px, 73px 67px, 47px 61px, 83px 71px;
    background-position:5px 11px, 34px 29px, 19px 47px, 62px 8px;
}

#game-area[data-season="autumn"] .road {
    background-color:#bf874d !important;
    filter:saturate(1.08) brightness(1.02);
}

/* Winter — cool damp grass, wet gravel, frost and small puddles. */
#game-area[data-season="winter"] .grass {
    background-color:#7bae70 !important;
    background-image:
        linear-gradient(76deg, transparent 46%, rgba(54,109,64,.42) 47% 50%, transparent 51%),
        linear-gradient(104deg, transparent 46%, rgba(156,196,145,.5) 47% 50%, transparent 51%),
        linear-gradient(90deg, #6b9f64, #91c383 50%, #72a468) !important;
    background-size:20px 32px, 28px 38px, auto !important;
}

#game-area[data-season="winter"] .grass::after {
    opacity:.96;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.96) 0 2px, rgba(225,247,247,.75) 3px, transparent 4px),
        linear-gradient(78deg, transparent 46%, rgba(236,253,249,.78) 47% 52%, transparent 53%);
    background-size:19px 21px, 31px 37px;
}

#game-area[data-season="winter"] .road {
    background-color:#9a8971 !important;
    filter:saturate(.72) brightness(.98);
}

@media (prefers-reduced-motion:reduce) {
    #game-area .grass,
    #game-area .road { transition:none; }
}

/* =========================================================
   PLAYFUL DIFFICULTY LEVELS
   Each level has its own visual voice while remaining readable.
========================================================= */

.difficulty-option {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.difficulty-option::before {
    display:block;
    margin-bottom:2px;
    font-size:24px;
    line-height:1;
}

.difficulty-option.easy {
    border-color:#8fd45f;
    background:linear-gradient(160deg, #f3ffe8, #ccefae);
    box-shadow:0 8px 0 #75b84d, 0 12px 22px rgba(78, 145, 55, .18);
    transform:rotate(-1deg);
}

.difficulty-option.easy::before { content:"★"; color:#4da73d; }
.difficulty-option.easy .difficulty-level {
    color:#287c39;
    font-family:"Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
    font-size:28px;
    letter-spacing:.02em;
}

.difficulty-option.medium {
    border-color:#f2b843;
    background:linear-gradient(160deg, #fff9d5, #ffd879);
    box-shadow:0 8px 0 #d99a28, 0 12px 22px rgba(191, 126, 22, .18);
}

.difficulty-option.medium::before { content:"★★"; color:#dc8b16; letter-spacing:3px; }
.difficulty-option.medium .difficulty-level {
    color:#9b5b09;
    font-family:"Trebuchet MS", Arial, sans-serif;
    font-size:26px;
    font-weight:900;
    letter-spacing:.08em;
}

.difficulty-option.hard {
    border-color:#e66c70;
    background:linear-gradient(145deg, #ffe4df, #f3a6a2);
    box-shadow:0 8px 0 #bd4f58, 0 12px 22px rgba(151, 55, 64, .2);
    transform:rotate(1deg);
}

.difficulty-option.hard::before { content:"★★★"; color:#b83e4c; font-size:20px; letter-spacing:2px; }
.difficulty-option.hard .difficulty-level {
    color:#8f2637;
    font-family:Impact, "Arial Black", sans-serif;
    font-size:29px;
    letter-spacing:.12em;
    text-shadow:1px 2px 0 rgba(255,255,255,.65);
}

.difficulty-option.easy:hover,
.difficulty-option.easy:focus-visible { transform:translateY(-6px) rotate(-1deg) scale(1.02); }
.difficulty-option.medium:hover,
.difficulty-option.medium:focus-visible { transform:translateY(-6px) scale(1.02); }
.difficulty-option.hard:hover,
.difficulty-option.hard:focus-visible { transform:translateY(-6px) rotate(1deg) scale(1.02); }

/* Moving scenery stays on the grass and never crosses the tractor's road. */
.field-item {
    display:block;
    position:absolute;
    top:-380px;
    height:auto;
    z-index:12;
    object-fit:contain;
    pointer-events:none;
    animation:fieldSceneryFlow 7s linear forwards;
    filter:drop-shadow(0 5px 4px rgba(42, 76, 35, .18));
}

@keyframes fieldSceneryFlow {
    from { transform:translateY(0) rotate(var(--field-tilt, 0deg)); }
    to { transform:translateY(calc(100vh + 760px)) rotate(var(--field-tilt, 0deg)); }
}

@media (max-width:700px) {
    .field-item { max-width:300px; }
}

/* =========================================================
   FINISH CELEBRATION
========================================================= */

#finish-screen {
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,.72) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 22%, rgba(255,221,76,.55) 0 7px, transparent 8px),
        linear-gradient(145deg, #fff4a8, #b9ed9e 62%, #84d9c4);
    background-size:82px 82px, 116px 116px, auto;
}

.finish-container {
    position:relative;
    z-index:5;
    width:min(650px, 92vw);
    padding:30px 34px 36px;
    border:5px solid rgba(255,255,255,.9);
    border-radius:38px;
    background:rgba(255,253,235,.94);
    box-shadow:0 14px 0 rgba(52,132,91,.28), 0 28px 65px rgba(35,90,67,.22);
}

.finish-starburst {
    width:86px;
    height:86px;
    margin:-68px auto -25px;
    display:grid;
    place-items:center;
    color:#fff;
    background:#ffb629;
    clip-path:polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
    filter:drop-shadow(0 7px 0 #dc8021);
    animation:finishPop .7s cubic-bezier(.2, 1.5, .5, 1) both;
}

.finish-starburst span { font-size:42px; transform:translateY(-1px); }
.finish-tractor-medal {
    width:170px;
    height:128px;
    margin:20px auto 0;
    display:grid;
    place-items:center;
    border:5px solid #fff;
    border-radius:50%;
    background:linear-gradient(145deg, #9be777, #55c5ce);
    box-shadow:0 8px 0 #389778, 0 14px 28px rgba(40,116,83,.23);
    animation:homeBounce .8s .15s both;
}

#finish-tractor {
    width:190px;
    max-height:150px;
    object-fit:contain;
    filter:drop-shadow(0 8px 5px rgba(45,72,55,.23));
}
.finish-container h1 { margin:8px 0 4px; color:#277b57; font-family:"Arial Rounded MT Bold", Arial, sans-serif; }
.finish-container p { margin:10px; font-size:clamp(18px, 3vw, 24px); }

.finish-praise {
    color:#d9513f;
    font-family:"Arial Rounded MT Bold", Arial, sans-serif;
    font-weight:900;
    line-height:1.3;
    text-shadow:0 2px 0 #fff;
}

.finish-achievement {
    margin:20px auto;
    padding:17px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    border:3px dashed #f3b22e;
    border-radius:22px;
    color:#286445;
    background:#fff7c9;
}

.finish-ribbon {
    padding:5px 13px;
    border-radius:999px;
    color:#fff;
    background:#f06d55;
    font-size:12px;
    font-weight:1000;
    letter-spacing:.12em;
}

#finish-summary { font-size:clamp(20px, 3.5vw, 28px); }
#finish-score { color:#64745e; font-weight:800; }

.finish-confetti { position:absolute; inset:-90px -70px; pointer-events:none; }
.finish-confetti span {
    position:absolute;
    top:-12%;
    width:13px;
    height:24px;
    border-radius:4px;
    background:#ff6557;
    animation:confettiFall 3.2s ease-in infinite;
}
.finish-confetti span:nth-child(2n) { width:18px; height:18px; border-radius:50%; background:#3bbdd4; }
.finish-confetti span:nth-child(3n) { background:#f7bd28; transform:rotate(35deg); }
.finish-confetti span:nth-child(4n) { background:#73bd55; }
.finish-confetti span:nth-child(1) { left:4%; animation-delay:.1s; }
.finish-confetti span:nth-child(2) { left:13%; animation-delay:1.2s; }
.finish-confetti span:nth-child(3) { left:22%; animation-delay:.55s; }
.finish-confetti span:nth-child(4) { left:32%; animation-delay:1.8s; }
.finish-confetti span:nth-child(5) { left:42%; animation-delay:.25s; }
.finish-confetti span:nth-child(6) { left:52%; animation-delay:1.45s; }
.finish-confetti span:nth-child(7) { left:62%; animation-delay:.7s; }
.finish-confetti span:nth-child(8) { left:70%; animation-delay:2s; }
.finish-confetti span:nth-child(9) { left:79%; animation-delay:.35s; }
.finish-confetti span:nth-child(10) { left:87%; animation-delay:1.55s; }
.finish-confetti span:nth-child(11) { left:94%; animation-delay:.9s; }
.finish-confetti span:nth-child(12) { left:48%; animation-delay:2.3s; }

@keyframes finishPop {
    from { opacity:0; transform:scale(.15) rotate(-25deg); }
    to { opacity:1; transform:scale(1) rotate(0); }
}

@keyframes homeBounce {
    0% { opacity:0; transform:translateY(-25px) scale(.65); }
    65% { transform:translateY(5px) scale(1.08); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes confettiFall {
    0% { opacity:0; transform:translateY(0) rotate(0); }
    12% { opacity:1; }
    100% { opacity:0; transform:translateY(720px) rotate(560deg); }
}

.finish-party {
    position:absolute;
    inset-block:0;
    width:clamp(230px, 25vw, 440px);
    z-index:3;
    pointer-events:none;
}

.finish-party-left { left:0; }
.finish-party-right { right:0; }

.finish-party img {
    position:absolute;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 9px 7px rgba(45,77,57,.2));
}

.party-plant { width:clamp(150px, 15vw, 260px); bottom:-18px; z-index:4; }
.party-plant-one { left:-25px; }
.party-plant-two { right:-28px; }

.party-animal { z-index:6; animation:partyBob 2.5s ease-in-out infinite; }
.party-cow { width:clamp(150px, 17vw, 285px); left:-22px; top:10%; }
.party-chicken { width:clamp(70px, 7vw, 115px); left:48%; top:5%; animation-delay:.35s; }
.party-sheep { width:clamp(150px, 16vw, 270px); right:-18px; top:10%; animation-delay:.55s; }
.party-yummie { width:clamp(105px, 11vw, 180px); right:46%; top:3%; z-index:7; animation:partyBob 2.2s .2s ease-in-out infinite; }

.party-tractor { width:clamp(170px, 18vw, 300px); bottom:4%; z-index:5; }
.party-tractor-spring { left:-35px; transform:rotate(7deg); }
.party-tractor-summer { left:38%; bottom:16%; transform:rotate(-5deg) scale(.76); }
.party-tractor-autumn { right:-32px; transform:rotate(-7deg); }
.party-tractor-winter { right:39%; bottom:16%; transform:rotate(5deg) scale(.76); }

@keyframes partyBob {
    0%, 100% { transform:translateY(0) rotate(-1deg); }
    50% { transform:translateY(-13px) rotate(2deg); }
}

@media (max-width:650px) {
    .finish-container { padding:24px 18px 28px; }
    .finish-starburst { width:70px; height:70px; margin-top:-56px; }
    .finish-tractor-medal { width:135px; height:100px; }
    #finish-tractor { width:150px; }
    .finish-container h1 { font-size:clamp(34px, 10vw, 48px); }
    .finish-party { opacity:.5; width:34vw; }
    .party-tractor-summer,
    .party-tractor-winter,
    .party-chicken { display:none; }
}

@media (max-width:1100px) {
    .finish-party { opacity:.68; }
    .finish-container { width:min(610px, 72vw); }
}

@media (prefers-reduced-motion:reduce) {
    .finish-starburst,
    .finish-tractor-medal,
    .finish-party img,
    .finish-confetti span { animation:none; }
    .finish-confetti { display:none; }
}

/* =========================================================
   TRACTOR DUST
   Two loose clouds rise from the rear-wheel area while the
   road is moving. Particles use different paths and timings
   to avoid a mechanical, row-like pattern.
========================================================= */

.tractor-dust {
    position:absolute;
    left:50%;
    bottom:34px;
    width:min(500px, 58vw);
    height:205px;
    transform:translateX(-50%);
    z-index:74;
    pointer-events:none;
    overflow:visible;
}

.tractor-dust span {
    --dust-x:0px;
    --dust-y:-115px;
    --dust-scale:2.55;
    position:absolute;
    bottom:8px;
    width:46px;
    height:32px;
    border-radius:50%;
    background:rgba(203, 145, 69, .96);
    box-shadow:
        30px 12px 0 rgba(239, 199, 128, .88),
        -28px 16px 0 rgba(164, 104, 48, .76),
        7px -19px 0 rgba(225, 174, 94, .82);
    opacity:0;
}

.tractor-dust span:nth-child(odd) { left:17%; }
.tractor-dust span:nth-child(even) { right:17%; }
.tractor-dust span:nth-child(1) { --dust-x:-68px; --dust-y:-110px; animation-delay:0s; }
.tractor-dust span:nth-child(2) { --dust-x:64px; --dust-y:-104px; animation-delay:.35s; }
.tractor-dust span:nth-child(3) { --dust-x:-91px; --dust-y:-142px; animation-delay:.7s; }
.tractor-dust span:nth-child(4) { --dust-x:86px; --dust-y:-132px; animation-delay:1.05s; }
.tractor-dust span:nth-child(5) { --dust-x:-52px; --dust-y:-158px; animation-delay:1.4s; }
.tractor-dust span:nth-child(6) { --dust-x:56px; --dust-y:-151px; animation-delay:1.75s; }
.tractor-dust span:nth-child(7) { --dust-x:-104px; --dust-y:-121px; animation-delay:2.1s; }
.tractor-dust span:nth-child(8) { --dust-x:101px; --dust-y:-116px; animation-delay:2.45s; }

#game-screen.active .tractor-dust span {
    animation-name:tractorDustRise;
    animation-duration:2.45s;
    animation-timing-function:ease-out;
    animation-iteration-count:infinite;
}

@keyframes tractorDustRise {
    0% {
        opacity:0;
        transform:translate(0, 0) scale(.45);
        filter:blur(0);
    }
    12% { opacity:1; }
    62% { opacity:.82; }
    100% {
        opacity:0;
        transform:translate(var(--dust-x), var(--dust-y)) scale(var(--dust-scale));
        filter:blur(3px);
    }
}

/* Slightly adapt the dust to each road surface. */
#game-area[data-season="spring"] .tractor-dust span { background:rgba(210,158,91,.88); }
#game-area[data-season="summer"] .tractor-dust span { background:rgba(237,193,112,.98); }
#game-area[data-season="autumn"] .tractor-dust span { background:rgba(186,111,55,.92); }
#game-area[data-season="winter"] .tractor-dust span { background:rgba(165,142,105,.94); }

@media (max-width:700px) {
    .tractor-dust {
        bottom:25px;
        width:67vw;
        height:165px;
    }

    .tractor-dust span {
        width:31px;
        height:22px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .tractor-dust { display:none; }
}