/* ═══════════════════════════════════════════════
   SCENE 1 — TITLE SCREEN
═══════════════════════════════════════════════ */

#scene-1 {
    background-image: url('../assets/backgrounds/title-bg.png');
    background-size: cover;
    background-position: center;
    background-color: #29b6f6;
    container-type: size;
}

#scene1-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
}



#scene1-center {
    position: absolute;
    top: 40%;
    left: 50%;
    translate: -50% -50%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqh;
    animation: scene1Float 4s ease-in-out infinite;
}

#scene1-title-img {
    width: clamp(240px, 48cqw, 660px);
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 20px rgba(0, 60, 160, 0.5));
}

#scene1-tagline {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.9rem, 1.8cqw, 1.2rem);
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
}

#play-button {
    position: absolute;
    bottom: 14%;
    left: 50%;
    translate: -50% 0;
    z-index: 10;
    background: linear-gradient(135deg, #FF8F00, #E65100);
    color: #ffffff;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.2rem, 2.8cqw, 1.75rem);
    font-weight: 400;
    padding: 14px 56px;
    border: none;
    border-radius: 9999px;
    box-shadow: 0 8px 28px rgba(230, 81, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: scale 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#play-button:hover {
    scale: 1.07;
    box-shadow: 0 14px 36px rgba(230, 81, 0, 0.7);
    filter: brightness(1.08);
}

#play-button:active {
    scale: 0.96;
}

@keyframes scene1Float {

    0%,
    100% {
        translate: -50% -50%;
    }

    50% {
        translate: -50% calc(-50% - 12px);
    }
}



/* ═══════════════════════════════════════════════
   SCENE 2 — GAMEPLAY (Center Tank + Embedded Grid)
═══════════════════════════════════════════════ */

#scene-2 {
    background: linear-gradient(160deg, #071938 0%, #0d2b5a 40%, #082416 100%);
    overflow: hidden;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    container-type: size;
}

.gameplay-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    container-type: size;
}

.gameplay-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5cqh 3cqw;
    flex-shrink: 0;
    z-index: 20;
}

/* Central area holding Tank + Grid */
.gameplay-center-wrapper {
    flex: 1;
    position: relative;
    margin: 0 3cqw 2.5cqh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
}

/* Main Tank structure occupying center area */
.tank-section-wide {
    position: absolute;
    inset: 3.5cqh 0 0 0;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Faucet assembly mounted on top-left of the tank */
.faucet-assembly {
    position: absolute;
    top: -3.2cqh;
    left: 3cqw;
    display: flex;
    align-items: flex-end;
    z-index: 15;
}

.faucet-pipe-h {
    width: clamp(50px, 9cqw, 120px);
    height: clamp(12px, 2.2cqh, 22px);
    background: linear-gradient(180deg, #29B6F6, #0277BD);
    border-radius: 2cqh 0 0 2cqh;
    box-shadow: 0 0.4cqh 1.2cqh rgba(0, 0, 0, 0.3),
        inset 0 0.4cqh 0.6cqh rgba(255, 255, 255, 0.2);
}

.faucet-body {
    width: clamp(26px, 3.8cqw, 50px);
    height: clamp(30px, 5.2cqh, 52px);
    background: linear-gradient(160deg, #0288D1, #01579B);
    border-radius: 0.8cqh;
    position: relative;
    box-shadow: 0 0.5cqh 1.5cqh rgba(0, 0, 0, 0.35);
}

.faucet-handle {
    position: absolute;
    top: -1.2cqh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(38px, 6cqw, 75px);
    height: clamp(8px, 1.3cqh, 14px);
    background: linear-gradient(180deg, #4FC3F7, #0288D1);
    border-radius: 1cqh;
    box-shadow: 0 0.3cqh 0.8cqh rgba(0, 0, 0, 0.3);
}

.faucet-nozzle {
    position: absolute;
    bottom: -2.2cqh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(10px, 1.5cqw, 18px);
    height: clamp(14px, 2.2cqh, 22px);
    background: linear-gradient(180deg, #0277BD, #01579B);
    border-radius: 0 0 0.6cqh 0.6cqh;
}

.faucet-drip {
    position: absolute;
    bottom: -1.4cqh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(8px, 1.2cqw, 14px);
    height: clamp(10px, 1.8cqh, 16px);
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background: radial-gradient(circle at 35% 35%, #81D4FA, #0288D1);
    animation: tapDrip 1.1s ease-in infinite;
}

/* ── The main tank body ── */

.tank-body-wide {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(13, 71, 161, 0.45), rgba(21, 101, 192, 0.55), rgba(13, 71, 161, 0.65));
    border-radius: 2cqh;
    border: 0.4cqh solid #0277BD;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1cqh 4cqh rgba(0, 0, 0, 0.4),
        inset 0 0.3cqh 0 rgba(255, 255, 255, 0.2),
        inset 0 -0.3cqh 0 rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.tank-water-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg, rgba(41, 182, 246, 0.85) 0%, rgba(2, 136, 209, 0.85) 50%, rgba(1, 87, 155, 0.9) 100%);
    transition: height 0.5s ease;
    z-index: 2;
}

.tank-water-fill::before {
    content: '';
    position: absolute;
    top: -0.8cqh;
    left: -5%;
    right: -5%;
    height: 1.8cqh;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    animation: tankWaterWave 2.5s ease-in-out infinite;
}

.tank-body-wide::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2cqw;
    width: 0.2cqw;
    min-width: 2px;
    background: repeating-linear-gradient(180deg,
            rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 2px,
            transparent 2px, transparent 10%);
    z-index: 3;
    pointer-events: none;
}

.tank-overflow-left,
.tank-overflow-right {
    display: none;
    position: absolute;
    top: -0.3cqh;
    width: 1.5cqw;
    min-width: 8px;
    max-width: 18px;
    background: linear-gradient(180deg, #29B6F6, #0288D1);
    border-radius: 0 0 0.5cqh 0.5cqh;
}

.tank-overflow-left {
    left: -1.5cqw;
}

.tank-overflow-right {
    right: -1.5cqw;
}

.tank-body-wide.is-overflowing .tank-overflow-left {
    display: block;
    animation: tankOverflowLeft 1.5s ease-in infinite;
}

.tank-body-wide.is-overflowing .tank-overflow-right {
    display: block;
    animation: tankOverflowRight 1.5s ease-in 0.3s infinite;
}

.tank-body-wide.is-overflowing .tank-water-fill {
    height: 100% !important;
    animation: overflowWiggle 0.4s ease-in-out infinite;
}

/* ── Board floating inside middle of tank ── */

.board-area {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ── Game Over / Victory overlays ── */

.game-over-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.game-over-card {
    background: white;
    border-radius: 3cqh;
    padding: 4cqh 5cqw;
    text-align: center;
    box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, 0.4);
    max-width: 90cqw;
    animation: gameOverShake 0.6s ease;
}

.game-over-title {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.3rem, 3.5cqw, 1.9rem);
    color: #D32F2F;
    margin-bottom: 1.5cqh;
}

.game-over-subtitle {
    font-size: clamp(0.8rem, 1.8cqw, 1rem);
    color: #546E7A;
    font-weight: 600;
    margin-bottom: 3cqh;
}

/* ═══════════════════════════════════════════════
   SCENE 3 — INTERACTIVE GARDEN (tap system)
═══════════════════════════════════════════════ */

#scene-3 {
    background: linear-gradient(180deg, #1565C0 0%, #42A5F5 35%, #8D6E63 70%, #5D4037 100%);
    overflow: hidden;
    padding: 0;
    container-type: size;
}

.scene3-sky-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52%;
    background: linear-gradient(180deg, #0d47a1 0%, #1e88e5 40%, #64b5f6 75%, #bbdefb 100%);
    z-index: 0;
}

/* Caption bar */
.scene3-caption {
    position: absolute;
    top: 2.5cqh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.9rem, 2.2cqw, 1.4rem);
    color: white;
    text-shadow: 0 0.2cqh 1cqh rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    z-index: 25;
    background: rgba(0, 0, 0, 0.3);
    padding: 1cqh 3cqw;
    border-radius: 5cqh;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0.5cqh 2cqh rgba(0, 0, 0, 0.2);
}

/* ── Pipe System ── */

/* Vertical supply pipe from top-center */
.pipe-supply {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(16px, 2.5cqw, 30px);
    height: 18cqh;
    background: linear-gradient(90deg, #37474F 0%, #90A4AE 45%, #546E7A 100%);
    z-index: 5;
    border-radius: 0 0 0.5cqw 0.5cqw;
    box-shadow: inset -0.3cqw 0 0.6cqw rgba(0, 0, 0, 0.3);
}

/* Horizontal main pipe spanning width */
.pipe-horizontal {
    position: absolute;
    top: 18cqh;
    left: 4cqw;
    right: 4cqw;
    height: clamp(14px, 2.8cqh, 24px);
    background: linear-gradient(180deg, #B0BEC5 0%, #455A64 60%, #78909C 100%);
    border-radius: 1.5cqh;
    z-index: 5;
    box-shadow: 0 0.5cqh 1.5cqh rgba(0, 0, 0, 0.3),
        inset 0 0.3cqh 0.5cqh rgba(255, 255, 255, 0.2);
}

/* Junction circles where branches meet the horizontal pipe */
.pipe-junction {
    position: absolute;
    top: 18cqh;
    transform: translate(-50%, -20%);
    width: clamp(22px, 3.8cqw, 42px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #90A4AE, #263238);
    border: 0.3cqh solid #1C313A;
    z-index: 7;
    box-shadow: 0 0.3cqh 1cqh rgba(0, 0, 0, 0.4);
}

.pipe-junction--tree {
    left: 18%;
}

.pipe-junction--ground {
    left: 50%;
}

.pipe-junction--bushes {
    left: 82%;
}

/* Vertical branch drops from horizontal pipe down to taps */
.pipe-drop {
    position: absolute;
    top: calc(18cqh + 1.4cqh);
    width: clamp(12px, 2cqw, 24px);
    height: 7cqh;
    background: linear-gradient(90deg, #37474F 0%, #90A4AE 45%, #546E7A 100%);
    z-index: 5;
    border-radius: 0 0 0.5cqw 0.5cqw;
    transform: translateX(-50%);
    box-shadow: inset -0.2cqw 0 0.5cqw rgba(0, 0, 0, 0.25);
}

.pipe-drop--tree {
    left: 18%;
}

.pipe-drop--ground {
    left: 50%;
}

.pipe-drop--bushes {
    left: 82%;
}

/* ── Interactive Tap Buttons ── */

.pipe-tap-btn {
    position: absolute;
    top: calc(18cqh + 8.4cqh);
    transform: translate(-50%, -50%);
    z-index: 15;
    width: clamp(42px, 6.5cqw, 75px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #EF5350, #C62828);
    border: 0.4cqh solid #7F0000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 2.4cqw, 30px);
    box-shadow: 0 0.6cqh 1.8cqh rgba(0, 0, 0, 0.45),
        inset 0 0.3cqh 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease, background 0.4s ease, border-color 0.4s ease;
}

.pipe-tap-btn::before {
    content: '💧';
}

.pipe-tap-btn:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0.8cqh 2.2cqh rgba(0, 0, 0, 0.5), 0 0 0 0.4cqw rgba(239, 83, 80, 0.4);
}

.pipe-tap-btn:active:not(:disabled) {
    transform: translate(-50%, -50%) scale(0.94);
}

.pipe-tap-btn.tap--open {
    background: radial-gradient(circle at 35% 30%, #29B6F6, #01579B);
    border-color: #0277BD;
    cursor: default;
    animation: tapOpenPulse 0.5s ease;
}

.pipe-tap-btn.tap--open::before {
    content: '✓';
    color: white;
    font-weight: 900;
}

.tap-pos--tree {
    left: 18%;
}

.tap-pos--ground {
    left: 50%;
}

.tap-pos--bushes {
    left: 82%;
}

.tap-label {
    display: none;
}

/* ── Water Streams ── */

.water-stream {
    position: absolute;
    width: clamp(10px, 1.4cqw, 18px);
    transform: translateX(-50%);
    top: calc(18cqh + 11cqh);
    background: repeating-linear-gradient(180deg,
            rgba(129, 212, 250, 0.95) 0px,
            rgba(2, 136, 209, 0.95) 12px,
            rgba(129, 212, 250, 0.95) 24px);
    border-radius: 0.6cqw;
    height: 0;
    opacity: 0;
    z-index: 6;
    transition: height 0.75s ease-out, opacity 0.2s ease;
    box-shadow: 0 0 1.2cqw rgba(41, 182, 246, 0.7);
}

.water-stream.stream--flowing {
    opacity: 1;
    animation: streamWaterShimmer 0.5s linear infinite;
}

.stream--tree {
    left: 18%;
}

.stream--ground {
    left: 50%;
}

.stream--bushes {
    left: 82%;
}

/* ── Garden Zones ── */

.scene3-garden {
    position: absolute;
    top: 48%;
    left: 3cqw;
    right: 3cqw;
    height: 38%;
    display: flex;
    z-index: 10;
    gap: 2cqw;
}

.scene3-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

/* ── Plant containers ── */

.garden-plant {
    width: 90%;
    height: 90%;
    border-radius: 2cqh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5cqh;
    padding: 1.5cqh 1cqw;
    transition: all 0.6s ease;
}

.plant--dry {
    background: rgba(109, 76, 65, 0.4);
    border: 0.3vh dashed #8D6E63;
    backdrop-filter: blur(4px);
}

.plant--dry .plant-emoji {
    font-size: clamp(2.2rem, 6cqw, 5.5rem);
    filter: sepia(1) saturate(0.2) brightness(0.6);
    transition: filter 0.8s ease, transform 0.8s ease;
    display: block;
    line-height: 1;
}

.plant--healthy {
    background: rgba(46, 125, 50, 0.45);
    border: 0.3vh solid #4CAF50;
    box-shadow: 0 0.8vh 2.5vh rgba(76, 175, 80, 0.4);
    backdrop-filter: blur(4px);
}

.plant--healthy .plant-emoji {
    font-size: clamp(2.2rem, 6cqw, 5.5rem);
    filter: none;
    display: block;
    line-height: 1;
}

.plant-label {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.7rem, 1.4cqw, 1.1rem);
    color: white;
    text-shadow: 0 0.2cqh 0.6cqh rgba(0, 0, 0, 0.4);
    letter-spacing: 0.05cqw;
}

.fading-out {
    animation: plantFadeOut 0.5s ease forwards !important;
}

.growing-in {
    animation: plantGrowIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Ground zone (center) */
.zone--ground .garden-plant {
    display: none;
}

.ground-surface {
    width: 95%;
    height: 90%;
    border-radius: 2vh;
    position: relative;
    overflow: hidden;
    transition: background 1.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.3vh solid rgba(255, 255, 255, 0.2);
}

.ground-surface.ground-dirt {
    background: linear-gradient(180deg, #8D6E63 0%, #5D4037 100%);
    box-shadow: inset 0 0.5vh 1.5vh rgba(0, 0, 0, 0.3);
}

.ground-surface.ground-wet {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    box-shadow: inset 0 0.5vh 1.5vh rgba(0, 0, 0, 0.2), 0 0.8vh 2.5vh rgba(76, 175, 80, 0.4);
    border-color: #81C784;
}


.ground-blooms {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1cqh 1cqw;
    flex-wrap: wrap;
    gap: 0.5cqw;
    pointer-events: none;
}

.ground-bloom-item {
    font-size: clamp(0.9rem, 2.2cqw, 2rem);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.ground-bloom-item.bloom-in {
    opacity: 1;
    transform: scale(1);
}

/* Dirt ground base at very bottom */
.scene3-ground-base {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(180deg, #6D4C41 0%, #4E342E 100%);
    border-radius: 2cqw 2cqw 0 0;
    z-index: 3;
    transition: background 2s ease;
}

.scene3-ground-base.base--green {
    background: linear-gradient(180deg, #388E3C 0%, #1B5E20 100%);
}

/* All-done banner */
.scene3-done-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(27, 94, 32, 0.93);
    color: white;
    padding: 2.5cqh 5cqw;
    border-radius: 2cqw;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1rem, 2.5cqw, 1.7rem);
    z-index: 30;
    backdrop-filter: blur(10px);
    border: 0.2cqh solid rgba(255, 255, 255, 0.3);
    display: none;
    text-align: center;
    animation: victoryMessageFadeIn 0.5s ease;
    box-shadow: 0 1.5cqh 5cqh rgba(0, 0, 0, 0.35);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   SCENE 4 — ENDING SCREEN
═══════════════════════════════════════════════ */

#scene-4 {
    background: linear-gradient(180deg, #1E88E5 0%, #64B5F6 30%, #4CAF50 60%, #2E7D32 100%);
    overflow: hidden;
    container-type: size;
}

.scene4-bg-elements {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.scene4-tree-left {
    position: absolute;
    bottom: 0;
    left: 2%;
    font-size: clamp(60px, 12cqw, 120px);
    animation: floatUpDown 5s ease-in-out infinite;
}

.scene4-tree-right {
    position: absolute;
    bottom: 0;
    right: 2%;
    font-size: clamp(60px, 12cqw, 120px);
    animation: floatUpDown 5s ease-in-out 1.5s infinite;
}

.scene4-flower-left {
    position: absolute;
    bottom: 5%;
    left: 14%;
    font-size: clamp(22px, 4.5cqw, 50px);
    animation: floatUpDown 3.5s ease-in-out 0.5s infinite;
}

.scene4-flower-right {
    position: absolute;
    bottom: 5%;
    right: 14%;
    font-size: clamp(22px, 4.5cqw, 50px);
    animation: floatUpDown 4s ease-in-out 2s infinite;
}

.scene4-bird-1 {
    position: absolute;
    top: 18%;
    font-size: clamp(1rem, 2cqw, 1.6rem);
    animation: birdFly 9s linear infinite;
}

.scene4-bird-2 {
    position: absolute;
    top: 12%;
    font-size: clamp(0.8rem, 1.5cqw, 1.2rem);
    animation: birdFly2 12s linear 3s infinite;
}

.scene4-butterfly-1 {
    position: absolute;
    top: 30%;
    left: 8%;
    font-size: clamp(0.9rem, 1.8cqw, 1.3rem);
    animation: butterflyFloat 10s ease-in-out infinite;
}

.scene4-butterfly-2 {
    position: absolute;
    top: 38%;
    right: 12%;
    font-size: clamp(0.8rem, 1.5cqw, 1.1rem);
    animation: butterflyFloat 8s ease-in-out -4s infinite;
}

.scene4-content-card {
    position: relative;
    z-index: 10;
    text-align: center;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(16px);
    border-radius: 3cqh;
    padding: clamp(24px, 4.5cqh, 52px) clamp(28px, 5.5cqw, 70px);
    box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, 0.25), 0 0 0 0.2cqh rgba(255, 255, 255, 0.5);
    animation: victoryMessageFadeIn 0.8s ease, victoryPulse 2.5s ease 1s infinite;
    max-width: 88cqw;
}

.scene4-title {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.8rem, 5.5cqw, 3.8rem);
    color: #1B5E20;
    margin-bottom: 1.2cqh;
    text-shadow: 0 0.2cqh 1.2cqh rgba(0, 100, 0, 0.15);
}

.scene4-message {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.82rem, 1.8cqw, 1.05rem);
    color: #37474F;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 2.5cqh;
}

.scene4-final-score-box {
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    color: white;
    border-radius: 2cqh;
    padding: 1.5cqh 4cqw;
    margin-bottom: 2.8cqh;
    display: inline-block;
}

.scene4-score-label {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.65rem, 1.2cqw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.2cqw;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.5cqh;
}

.scene4-score-number {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.8rem, 4.5cqw, 3.2rem);
    color: #FFD54F;
    letter-spacing: 0.3cqw;
    text-shadow: 0 0.2cqh 1cqh rgba(0, 0, 0, 0.2);
}

.scene4-buttons {
    display: flex;
    gap: 1.5cqw;
    justify-content: center;
    flex-wrap: wrap;
}