:root {
    --primary-red: #D42426;
    --primary-green: #165B33;
    --snow-white: #F8F9FA;
    --field-green: #4CAF50;
    --field-dark: #388E3C;
    --gold: #FFD700;
    --text-color: #333;
    --font-main: "Black Ops One", system-ui;
    --font-jp: "Reggae One", system-ui;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    /* Prevent text selection during game */
}

body {
    font-family: var(--font-main);
    background-color: #2c3e50;
    color: var(--text-color);
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

#game-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    background: url('stadium.png') no-repeat center center / cover;
    /* Stadium background */
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Desktop/Tablet: limit max size */
@media (min-width: 600px) {
    #game-container {
        width: 600px;
        height: 100vh;
        height: 100dvh;
        max-height: 900px;
    }
}

/* Snow Effect */
#snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Snow over everything */
    pointer-events: none;
    z-index: 20;
    /* Top layer */
}

.snowflake {
    position: absolute;
    color: white;
    font-size: 1em;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

/* Scoreboard */
#scoreboard {
    position: absolute;
    top: 2vh;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1vh 2vw;
    z-index: 30;
    /* Above snow */
    font-family: var(--font-jp);
}

.score-box {
    background: rgba(255, 255, 255, 0.9);
    padding: 1vh 4vw;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--primary-red);
}

.score-box.player-score {
    border-color: var(--primary-green);
}

.score-box .label {
    display: block;
    font-size: clamp(0.7rem, 3vw, 0.9rem);
    font-weight: bold;
}

.score-box span:not(.label) {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    font-weight: bold;
}

.timer-box {
    background: var(--primary-red);
    color: white;
    padding: 0.5vh 3vw;
    border-radius: 20px;
    font-weight: bold;
    font-size: clamp(0.8rem, 3.5vw, 1rem);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Field & Game Objects */
#field {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    /* background: url('grass.png') repeat center / 100px 100px; */
    /* Grass texture */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    perspective: 1000px;
    border-top: 5px solid white;
    /* Horizon line */
}

#goal-area {
    position: absolute;
    top: -20vh;
    background-image: url(net.png);
    background-size: 15px;
    /* Push back into 'distance' */
    width: min(80vw, 300px);
    height: 20vh;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.goal-post {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 8px solid white;
    border-bottom: none;
    box-sizing: content-box;
    z-index: 2;
    /* Net Effect */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

#santa,
#boy {
    /* font-size: 80px; Removed emoji size */
    width: min(40vw, 150px);
    /* Increased size */
    height: auto;
    position: absolute;
    bottom: -2vh;
    /* Lowered position */
    transition: transform 0.3s ease;
    z-index: 2;
    /* Behind the ball */
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
}

#santa img,
#boy img {
    width: 100%;
    height: auto;
    display: block;
}

/* Removed gloves style */

#penalty-spot {
    margin-bottom: 10vh;
    /* Increased for better thumb reach */
    z-index: 10;
    /* Above characters */
    cursor: pointer;
    padding: 3vh 5vw;
    /* Increase touch area */
    position: relative;
    /* Ensure z-index works */
}

.ball {
    font-size: clamp(50px, 12vw, 70px);
    /* Slightly larger ball */
    transition: transform 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4));
    position: relative;
    z-index: 20;
    /* Definitely above everything */
}

/* Animations */
.shoot-left {
    transform: translate(min(-25vw, -100px), max(-40vh, -320px)) scale(0.5) rotate(-360deg);
    transition: transform 0.6s cubic-bezier(0.68, 0, 0.265, 1.3);
}

.shoot-center {
    transform: translate(0, max(-40vh, -320px)) scale(0.5) rotate(-360deg);
    /* transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
    transition: transform 0.6s cubic-bezier(0.68, 0, 0.265, 1.3);
}

.shoot-right {
    transform: translate(min(25vw, 100px), max(-40vh, -320px)) scale(0.5) rotate(360deg);
    transition: transform 0.6s cubic-bezier(0.68, 0, 0.265, 1.3);
}

.dive-left {
    transform: translateX(min(-30vw, -120px)) rotate(-20deg);
}

/* Increased dive range */
.dive-right {
    transform: translateX(min(30vw, 120px)) rotate(20deg);
}

.jump {
    transform: translateY(0px);
}

/* Feedback */
#feedback-message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-size: clamp(2rem, 10vw, 4rem);
    font-weight: bold;
    color: var(--gold);
    text-shadow: 2px 2px 0 #000;
    z-index: 20;
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-family: var(--font-jp);
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Controls Hint */
#controls-hint {
    position: absolute;
    bottom: 2vh;
    width: 100%;
    text-align: center;
    color: white;
    font-size: clamp(0.7rem, 3vw, 1rem);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    font-family: var(--font-jp);
    padding: 0 2vw;
}

/* Overlays */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    color: white;
    text-align: center;
    backdrop-filter: blur(5px);
}

.overlay h1 {
    font-family: var(--font-jp);
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    margin-bottom: 2vh;
    color: var(--primary-red);
    text-shadow: 2px 2px 0 white;
    padding: 0 4vw;
}

.overlay p {
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-bottom: 3vh;
    line-height: 1.5;
    padding: 0 4vw;
}

.btn-primary {
    padding: 2vh 8vw;
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    background-color: var(--primary-green);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--font-jp);
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
    transform: scale(1.05);
    background-color: #1e7e45;
}

.hidden {
    display: none !important;
}