.header-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.game-header-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Title sits in the background */
.title-overlay {
    position: absolute;
    z-index: 1;
    text-align: center;
    user-select: none;
}

.title-overlay h1 {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-family: "Hammersmith One", sans-serif;
    margin-top: 4px;
}

/* Top-right Scoreboard */
.score-board-wrapper {
    display: none;
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1;
    font-family: "Hammersmith One", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, #333);
    user-select: none;
    min-height: 80px;
}

#score-board-message {
    display: none;
}

/* Acorn layer covers the wrapper without blocking background clicks */
#acorn-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Let clicks pass through empty space */
}

/* Individual Acorn DOM Nodes */
.acorn {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto; /* Enable clicks directly on acorns */
    user-select: none;
    touch-action: manipulation;
    background-size: cover;
    background-position: center;
    transition: transform 0.1s ease;
}

.acorn:active {
    transform: scale(0.8); /* Satisfying shrink effect when tapped */
}

/* Fallback styles if SVGs/PNGs aren't loaded */
.acorn.orange:not([style*="background-image"]) { 
    background-color: #FF7A00; 
    border: 1.5px solid #FFF; 
}
.acorn.black:not([style*="background-image"]) { 
    background-color: #222222; 
    border: 1.5px solid #FFF; 
}
.acorn.golden:not([style*="background-image"]) { 
    background-color: #FFD700; 
    border: 1.5px solid #FFF; 
}

/* CSS Keyframe Animation for smooth falling */
@keyframes fall {
    0% {
        top: -36px;
        opacity: 1;
    }
    100% {
        top: 120px; /* Fall off bottom edge */
        opacity: 0.8;
    }
}

/* Floating score popup */
.score-popup {
    position: absolute;
    font-family: "Hammersmith One", sans-serif;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none; /* Ignore mouse/touch events */
    user-select: none;
    z-index: 10;
    animation: floatUpAndFade 0.8s ease-out forwards;
}

.score-popup.orange { color: #FF7A00; }
.score-popup.black  { color: #222222; }
.score-popup.golden { color: #FFD700; }

.score-popup.eagle { color: #d30d0d; font-size: 20px}

.score-popup.cable { color: #d30d0d; font-size: 20px}

@keyframes floatUpAndFade {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-25px) scale(1.2); /* Float up and enlarge slightly */
    }
}

/* ----- */
/* Floor Bounce & Squish Effect */
.acorn-bounce {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    z-index: 10;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: bounceAndFade 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fallback colors if SVG/image isn't present */
.acorn-bounce.orange:not([style*="background-image"]) { background-color: #FF7A00; border: 1.5px solid #FFF; }
.acorn-bounce.black:not([style*="background-image"])  { background-color: #222222; border: 1.5px solid #FFF; }
.acorn-bounce.golden:not([style*="background-image"]) { background-color: #FFD700; border: 1.5px solid #FFF; }

@keyframes bounceAndFade {
    0% {
        transform: translateY(0) scale(1, 1) rotate(0deg);
        opacity: 1;
    }
    15% {
        /* Impact Squish: Flattens horizontally on floor impact */
        transform: translateY(2px) scale(1.3, 0.6) rotate(5deg);
        opacity: 1;
    }
    55% {
        /* Rebound: Bounces back up ~28px while spinning */
        transform: translateY(-28px) scale(0.9, 1.1) rotate(-25deg);
        opacity: 0.9;
    }
    100% {
        /* Drops down & fades out */
        transform: translateY(10px) scale(0.7, 0.7) rotate(40deg);
        opacity: 0;
    }
}

/* Tap-Friendly Restart Button */
.restart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;            /* 48px tap-friendly touch target */
    height: 48px;
    margin-top: 4px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, background-color 0.15s ease;
}

/* Active touch/press state feedback */
.restart-btn:active {
    transform: scale(0.88) rotate(-15deg);
    background-color: rgba(255, 255, 255, 0.3);
}

.restart-btn svg {
    width: 22px;
    height: 22px;
}

/* Electric Cable Hazard */
.electric-cable {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: rgba(232, 251, 23, 0.3);
    pointer-events: auto;
    cursor: pointer;
    z-index: 15;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    display: none; /* Hidden until Level 4 */
}

/* Active Buzzing State (DANGEROUS) */
.electric-cable.buzzing {
    background-color: #E6F81A;
    box-shadow: 0 0 12px #E6F81A, 0 0 24px #E6F81A;
    animation: electricFlicker 0.15s infinite alternate;
}

@keyframes electricFlicker {
    0% { opacity: 0.85; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(-1px); }
}