body {
    background: #222;
    margin: 0;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
}

.game-container {
    width: 100%;
    height: 100vh;
    background: #1a472a;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.7);
    border: 2px solid #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* This centers the container */
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Game field with fixed size */
#game-field {
    width: 320px !important;
    height: 420px !important;
    margin: 0 auto;
    position: relative;
    background: #1a472a;
}

/* Start Screen Container */
#start-screen {
    position: relative;
    
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* Base image styles */
.start-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Desktop Image - shown by default */
.desktop-image {
    display: block;
    object-fit: fill;
}

/* Mobile Image - hidden by default */
.mobile-image {
    display: none;
    object-fit:fill
}

/* Button styles */
.arabic-button {
    position: absolute;
    z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 628px) {
    /* Show mobile image, hide desktop image */
    .mobile-image {
        display: block;
    }
    
    .desktop-image {
        display: none;
    }
    
    /* Adjust button position for mobile */
    .arabic-button {
        bottom: 15%;
    }
    
    .game-container {
        border-radius: 0;
    }
    
    #game-field {
        transform: scale(0.9);
        transform-origin: center;
    }
    
    /* Mobile specific styles */
    .mobile-start .start-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .mobile-start .arabic-button {
        padding: 15px 40px;
        font-size: 24px;
    }
}

@media (min-width: 1024px) {
    .game-container {
        max-width: 800px;
    }
    
    #game-field {
        transform: scale(1.1);
        transform-origin: center;
    }
}

.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

.game-title {
    font-size: 58px;
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,2.7);
    color: #fff;
    z-index: 10;
}

.start-screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
}

#game-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    flex: 1; /* Allow to grow */
}

h1, h2 {
    color: #fff;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.button {
    font-size: 18px;
    padding: 12px 28px;
    background: linear-gradient(to bottom, #fff, #f0f0f0);
    color: #1a472a;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 0 #ccc, 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.button:hover::before {
    animation: button-shine 1.5s infinite;
    opacity: 1;
}



@keyframes button-shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    20%, 100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Fullscreen Button Style */
.fullscreen-btn {
    margin-bottom: 3rem;
    padding: 12px 28px;
    background: linear-gradient(90deg, #1a472a 60%, #00c6fb 100%);
    color: #fff;
    border: none;
    border-radius: 15px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 198, 251, 0.15), 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 2;
}
.fullscreen-btn:hover {
    background: linear-gradient(90deg, #00c6fb 60%, #1a472a 100%);
    color: #1a472a;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 198, 251, 0.28), 0 4px 12px rgba(0,0,0,0.18);
}
.fullscreen-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 198, 251, 0.15), 0 1px 4px rgba(0,0,0,0.18);
}
.fullscreen-btn .fullscreen-icon {
    width: 1.3em;
    height: 1.3em;
    display: inline-block;
    background: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 7H5v4H3V5c0-1.1.9-2 2-2h6v2H7v2zm6-2v2h2v2h2V5c0-1.1-.9-2-2-2h-6v2h4zm4 12h-2v2h-2v2h6c1.1 0 2-.9 2-2v-6h-2v4zm-12 2v-2H5v-2H3v6c0 1.1.9 2 2 2h6v-2H7z"/></svg>') no-repeat center/contain;
    vertical-align: middle;
}

/* Media Queries for Responsiveness */

/* For very small screens, let it take up the full screen */
@media (max-width: 320px) {
    .game-container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: none;
        min-width: 0;
    }
}

.button:hover {
    background: linear-gradient(to bottom, #fff, #e8e8e8);
    transform: translateY(-3px);
    box-shadow: 0 6px 0 #ccc, 0 8px 20px rgba(0,0,0,0.4);
    color: #0a3720;
}

.button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #ccc, 0 2px 5px rgba(0,0,0,0.2);
}

.button:disabled {
    background: #eee;
    color: #aaa;
    cursor: not-allowed;
    box-shadow: 0 2px 0 #ddd, 0 3px 5px rgba(0,0,0,0.1);
    transform: none;
}

#play-again {
    animation: button-appear 1s ease-out 0.9s forwards;
    opacity: 0;
    transform: translateY(20px);
    font-size: 22px;
    padding: 15px 35px;
    background: linear-gradient(to bottom, #fff, #f0f0f0);
    color: #1a472a;
    border-radius: 15px;
    box-shadow: 0 6px 0 #ccc, 0 8px 20px rgba(0,0,0,0.4), 0 0 30px rgba(255,255,255,0.4);
    transition: all 0.3s ease;
}

#play-again:hover {
    background: linear-gradient(to bottom, #fff, #e0e0e0);
    transform: translateY(-5px);
    box-shadow: 0 8px 0 #ccc, 0 12px 25px rgba(0,0,0,0.5), 0 0 40px rgba(255,255,255,0.6);
}

#play-again:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #ccc, 0 4px 8px rgba(0,0,0,0.3);
}

@keyframes button-appear {
    to { opacity: 1; transform: translateY(0); }
}

/* Arabic button styling */
.arabic-button {
    font-size: 2rem;
    padding: 16px 45px;
    background: linear-gradient(45deg, #FF9500, #FF6D00);
    color: #fff;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 6px 0 #D67600, 0 8px 20px rgba(0,0,0,0.5);
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    position: absolute;
    transform: translateX(-50%);
    z-index: 10;
    overflow: hidden;
    animation: button-pulse 2s infinite alternate;
    direction: rtl; /* For proper Arabic text display */
    font-family: 'Arial', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 3rem;
}

.button-text {
    position: relative;
    z-index: 2;
}

.button-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shine-effect 3s infinite;
    z-index: 1;
}

@keyframes shine-effect {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

@keyframes button-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 6px 0 #D67600, 0 8px 20px rgba(255, 140, 0, 0.4);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 0 6px 0 #D67600, 0 8px 30px rgba(255, 140, 0, 0.7);
    }
}

.arabic-button:hover {
    background: linear-gradient(45deg, #FFA726, #FF8F00);
    box-shadow: 0 8px 0 #D67600, 0 12px 25px rgba(0,0,0,0.6);
    transform: translate(-50%, -2px);
}

.arabic-button:active {
    box-shadow: 0 2px 0 #D67600, 0 4px 8px rgba(0,0,0,0.4);
    transform: translate(-50%, 4px);
    background: linear-gradient(45deg, #FF8F00, #F57C00);
}

/* Start image container */
.start-image-container {
    width: 100%;
    margin: 0;
    text-align: center;
    position: relative;
    flex: 1;
    display: flex;
    align-items: end;
    justify-content: center;
    overflow: hidden;
}

.start-image {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s;
}

.team-select-card {
    width: 100%;
    height: 100%;
    background: url('assets/choose-team.png') no-repeat center center;
    background-size: cover;
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.controls-info {
    width: 90%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    backdrop-filter: blur(5px);
    color: white;
    text-align: left;
}

.controls-info h3 {
    margin-top: 0;
    margin-bottom: 8px;
    text-align: center;
}

.controls-info ul {
    margin: 0;
    padding-left: 20px;
}

.controls-info li {
    margin-bottom: 6px;
}

.key-hint {
    display: none;
}

.boost-hint {
    display: none;
}

@keyframes hintPulse {
    0% { opacity: 0.8; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
}

@keyframes fadeOut {
    from { opacity: 0.8; }
    to { opacity: 0; visibility: hidden; }
}

/* AI backoff indicator animation */
.ai-backoff-indicator {
    animation: backoff-pulse 0.5s ease-in-out infinite alternate;
    transition: opacity 0.3s ease;
}

@keyframes backoff-pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
}

/* AI timeout indicator animation */
.ai-timeout-indicator {
    transition: opacity 0.3s ease;
}

@keyframes timeout-pulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.team-select-title {
    font-size: 32px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    margin-bottom: 10px;
    text-align: center;
    font-weight: 200px;
}

.team-selection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}


.flags-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 20px;
    width: 100%;
}

.flag-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.flag-option::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    transition: all 0.3s ease;
    opacity: 0;
}

.flag-option:hover::before {
    animation: flag-shine 1.5s infinite;
    opacity: 1;
}

@keyframes flag-shine {
    0% {
        left: -50%;
        top: -50%;
    }
    100% {
        left: 150%;
        top: 150%;
    }
}

.flag-option.selected, .flag-option:hover {
    border: 3px solid #FFD700; /* Gold border */
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 20px rgba(255, 215, 0, 0.5);
    z-index: 2;
    animation: flag-pulse 1.5s infinite alternate;
}

@keyframes flag-pulse {
    0% {
        box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 20px rgba(255, 215, 0, 0.5);
    }
    100% {
        box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

#start-game-button-container {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.scoreboard {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    border-radius: 0 0 12px 12px;
    font-size: 18px;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.team {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flag-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.score, .timer {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Field container to hold the field and stands */
.field-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 1000px; /* Maximum width for the entire container */
}

/* Game field with fixed size */

/* Stands styling - digital display boards */
.stand {
    height: 420px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    perspective: 800px;
    transform-style: preserve-3d;
    overflow: hidden;
    border: 3px solid rgba(40, 40, 40, 1);
    border-top: 4px solid #444;
    border-bottom: 4px solid #444;
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.8),
        0 0 30px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    flex: 1;
    max-width: 150px;
    margin: 0 -2px; /* Slight overlap to prevent gaps */
}

/* Adjust stand width on larger screens */
@media (min-width: 1200px) {
    .stand {
        max-width: 150px;
    }
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    .stand {
        max-width: 80px;
    }
    .stand img {
        min-width: 40px;
    }
}

.stand-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.15),
            transparent 15%,
            transparent 85%,
            rgba(0,0,0,0.3)
        ),
        linear-gradient(to right,
            rgba(0,0,0,0.2),
            transparent 30%,
            transparent 70%,
            rgba(0,0,0,0.2)
        );
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}

/* Stadium seating effect */
.stand::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Horizontal seat rows */
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 8px,
            rgba(0, 0, 0, 0.3) 8px,
            rgba(0, 0, 0, 0.3) 9px
        ),
        /* Vertical supports */
        repeating-linear-gradient(
            to right,
            transparent,
            transparent 19px,
            rgba(0, 0, 0, 0.2) 19px,
            rgba(0, 0, 0, 0.2) 20px
        );
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}

.stand-left {
    border-radius: 18px 0 0 18px;
    margin-right: 0;
    background: linear-gradient(to right, #333, #222);
}

.stand-right {
    border-radius: 0 18px 18px 0;
    margin-left: 0;
    background: linear-gradient(to left, #333, #222);
    width: 50%;
    position: relative;
    float: left;
}

/* Ensure 3D perspective is maintained */
.stand-left .stand-screen {
    transform-origin: right center;
}

.stand-right .stand-screen {
    transform-origin: left center;
}

@keyframes logo-vertical-scroll-left {
    0% {
        transform: rotateY(-20deg) translateY(100%);
        filter: brightness(1.4) drop-shadow(0 0 10px rgba(0, 162, 255, 0.8));
    }
    25% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(0, 162, 255, 0.7));
    }
    50% {
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(0, 162, 255, 0.6));
    }
    75% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(0, 162, 255, 0.7));
    }
    100% {
        transform: rotateY(-20deg) translateY(-100%);
        filter: brightness(1.4) drop-shadow(0 0 10px rgba(0, 162, 255, 0.8));
    }
}

@keyframes logo-vertical-scroll-right {
    0% {
        transform: rotateY(20deg) translateY(100%);
        filter: brightness(1.4) drop-shadow(0 0 10px rgba(0, 162, 255, 0.8));
    }
    25% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(0, 162, 255, 0.7));
    }
    50% {
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(0, 162, 255, 0.6));
    }
    75% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(0, 162, 255, 0.7));
    }
    100% {
        transform: rotateY(20deg) translateY(-100%);
        filter: brightness(1.4) drop-shadow(0 0 10px rgba(0, 162, 255, 0.8));
    }
}

/* Crowd effect in stands */
.stand-crowd {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px
    );
    background-size: 4px 4px;
    opacity: 0.5;
    z-index: 2;
    animation: crowd-movement 10s ease-in-out infinite;
}

@keyframes crowd-movement {
    0%, 100% {
        background-position: 0 0;
        opacity: 0.5;
    }
    25% {
        background-position: 1px 0;
        opacity: 0.6;
    }
    50% {
        background-position: 1px 1px;
        opacity: 0.5;
    }
    75% {
        background-position: 0 1px;
        opacity: 0.6;
    }
}

/* Stadium lights flicker effect */
.stand-lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    z-index: 2;
    opacity: 0;
    animation: lights-flicker 8s ease-in-out infinite;
}

@keyframes lights-flicker {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.3; }
    52% { opacity: 0.1; }
    54% { opacity: 0.3; }
    56% { opacity: 0.1; }
    58% { opacity: 0.3; }
    60%, 90% { opacity: 0.1; }
}

/* Digital screen covering the entire stand */
.stand-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 30, 60, 0.8);
    overflow: hidden;
    z-index: 4;
    box-shadow:
        inset 0 0 20px rgba(0, 120, 255, 0.4),
        0 0 15px rgba(0, 120, 255, 0.3);
    border: 2px solid rgba(0, 100, 255, 0.2);
    /* Add subtle LED pixel effect */
    background-image:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 150, 255, 0.1) 0%,
            rgba(0, 0, 0, 0) 1px
        );
    background-size: 3px 3px;
    perspective: 800px;
    transform-style: preserve-3d;
}

/* Digital screen effects */
.stand-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* LED pixels */
        repeating-linear-gradient(
            to right,
            transparent,
            transparent 2px,
            rgba(0, 100, 255, 0.05) 2px,
            rgba(0, 100, 255, 0.05) 3px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 2px,
            rgba(0, 100, 255, 0.05) 2px,
            rgba(0, 100, 255, 0.05) 3px
        ),
        /* Screen glare */
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0) 80%,
            rgba(255, 255, 255, 0.15)
        );
    pointer-events: none;
    z-index: 6;
    animation: screen-flicker 8s infinite;
}

@keyframes screen-flicker {
    0%, 100% { opacity: 1; }
    98% { opacity: 1; }
    98.5% { opacity: 0.8; }
    99% { opacity: 1; }
}

/* Stand structure container */
.stand-structure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
}

/* Screen content container */
.screen-content {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    top: 0;
}

/* Left screen scrolling animation */
.screen-content-left {
    animation: scroll-down 30s linear infinite;
}

/* Right screen scrolling animation */
.screen-content-right {
    animation: scroll-up 30s linear infinite;
}

/* Content items for the screen */
.content-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
}

/* Make sponsor images take 70% of screen width */
.content-item img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Special styling for the cup image */
.content-item img[src*="cup.png"] {
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.7));
}

/* Rotation for left stand (facing right) */
.face-right {
    transform: perspective(800px) rotateY(20deg) scale(1.2);
    transform-origin: right center;
}

/* Rotation for right stand (facing left) */
.face-left {
    transform: perspective(800px) rotateY(-20deg) scale(1.2);
    transform-origin: left center;
}

/* Scrolling animations */
@keyframes scroll-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%); /* Move up by half the content height for seamless loop */
    }
}

@keyframes scroll-up {
    0% {
        transform: translateY(-50%); /* Start from halfway point */
    }
    100% {
        transform: translateY(0); /* Scroll up to top */
    }
}

/* Screen glow effect */
.stand-screen {
    animation: screen-glow 8s ease-in-out infinite alternate;
}

@keyframes screen-glow {
    0% {
        box-shadow: inset 0 0 15px rgba(0, 100, 255, 0.3);
    }
    100% {
        box-shadow: inset 0 0 25px rgba(0, 100, 255, 0.5);
    }
}

@keyframes logo-vertical-scroll {
    0% {
        transform: translateY(100%);
        filter: brightness(1.2) drop-shadow(0 0 5px rgba(0, 162, 255, 0.7));
    }
    50% {
        filter: brightness(1) drop-shadow(0 0 3px rgba(0, 162, 255, 0.5));
    }
    100% {
        transform: translateY(-100%);
        filter: brightness(1.2) drop-shadow(0 0 5px rgba(0, 162, 255, 0.7));
    }
}

#game-field.game-field {
    width: 320px;
    height: 420px;
    background-color: #2ecc71;
    position: relative;
    overflow: hidden;
    transform-origin: 0 0;
    transform: scale(1);
}

/* Responsive scaling */
@media (min-width: 768px) {
    #game-field {
        transform: scale(1.2);
    }
}

@media (min-width: 1024px) {
    #game-field {
        transform: scale(1.5);
    }
}

@media (min-width: 1440px) {
    #game-field {
        transform: scale(1.8);
    }
}

.game-container {
    position: relative;
    width: 100%;
    height: 100vh;
    max-width: 100%;
    margin: 0 auto;
    background-color: #2c3e50;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Matter.js canvas styling */
#game-field canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important; /* Above field image but below players */
    pointer-events: auto !important; /* Canvas must receive mouse events */
}

/* Field shadow overlay for 3D effect */
#game-field.game-field::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,0.03) 0%,
            rgba(0,0,0,0.2) 100%
        ),
        /* Stadium lights effect */
        radial-gradient(
            ellipse at 20% 0%,
            rgba(255,255,255,0.15) 0%,
            rgba(255,255,255,0) 50%
        ),
        radial-gradient(
            ellipse at 80% 0%,
            rgba(255,255,255,0.15) 0%,
            rgba(255,255,255,0) 50%
        ),
        /* Corner shadows */
        radial-gradient(
            circle at 0% 0%,
            rgba(0,0,0,0.2) 0%,
            rgba(0,0,0,0) 30%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(0,0,0,0.2) 0%,
            rgba(0,0,0,0) 30%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(0,0,0,0.2) 0%,
            rgba(0,0,0,0) 30%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(0,0,0,0.2) 0%,
            rgba(0,0,0,0) 30%
        );
    pointer-events: none;
    z-index: 3; /* Above field markings (z-index: 2) */
}

/* Field boundaries */
.field-boundaries {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.boundary {
    position: absolute;
    background: #fff;
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.boundary-top-left {
    top: 0;
    left: 0;
    width: calc(50% - 40px);
    height: 3px;
}

.boundary-top-right {
    top: 0;
    right: 0;
    width: calc(50% - 40px);
    height: 3px;
}

.boundary-bottom-left {
    bottom: 0;
    left: 0;
    width: calc(50% - 40px);
    height: 3px;
}

.boundary-bottom-right {
    bottom: 0;
    right: 0;
    width: calc(50% - 40px);
    height: 3px;
}

.boundary-left {
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
}

.boundary-right {
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
}



/* Textured 2D ball */
.textured-ball {
    width: 10px;
    height: 10px;
    position: absolute;
    background-image: url('ball/texture.avif');
    background-size: cover;
    border-radius: 20%;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transform-origin: center center;
    transition: box-shadow 0.3s;
}

/* Powered-up ball */
.textured-ball.powered-up {
    box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.7);
}

/* Ball trail elements */
.ball-trail-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 90;
    transition: opacity 0.3s;
}

/* Power-up flash animation */
@keyframes powerUpFlash {
    0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Escape mode pulse animation */
@keyframes escape-pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Backoff pulse animation */
@keyframes backoff-pulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Powered-up impact effect */
.impact-effect.powered-up {
    background-color: rgba(255, 0, 0, 0.5) !important;
    box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.3);
}

.ball-shadow {
    width: 30px;
    height: 10px;
    position: absolute;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    z-index: 15;
    pointer-events: none;
    filter: blur(2px);
    transition: transform 0.1s, opacity 0.1s;
    transform-origin: center center;
}

.ball-shadow.elevated {
    transform: scale(0.7, 0.3);
    opacity: 0.5;
    filter: blur(3px);
}

.ball-shadow.high {
    transform: scale(0.5, 0.2);
    opacity: 0.3;
    filter: blur(4px);
}

.ball-trail {
    width: 30px;
    height: 30px;
    position: absolute;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    z-index: 14;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s, transform 0.1s;
}

.ball-trail.visible {
    opacity: 0.4;
}

.ball-bounce {
    animation: bounce 0.2s ease-out;
}

.ball-fast {
    filter: blur(2px);
}

/* Impact effect for collisions */
.impact-effect {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 25;
    pointer-events: none;
    animation: impact 0.3s ease-out forwards;
}

@keyframes impact {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes bounce {
    0% { transform: scale(0.8); }
    50% { transform: scale(var(--bounce-scale)); }
    100% { transform: scale(1); }
}

/* Goal animations */
@keyframes goalFlash {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

@keyframes goalText {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes countdownPulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
        opacity: 0.95;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.4);
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

#end-screen {
    background: url('assets/choose-team.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

#end-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for better text readability */
    z-index: 0;
}

.end-screen-decoration {
    position: absolute;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 1;
}

.end-screen-decoration.top-left {
    top: 20px;
    left: 20px;
    background-image: url('assets/decoration-corner.png');
    transform: rotate(0deg);
    animation: decoration-fade-in 1.2s ease-out forwards, decoration-float 4s ease-in-out infinite;
}

.end-screen-decoration.top-right {
    top: 20px;
    right: 20px;
    background-image: url('assets/decoration-corner.png');
    transform: rotate(90deg);
    animation: decoration-fade-in 1.2s ease-out 0.2s forwards, decoration-float 4s ease-in-out 0.5s infinite;
}

.end-screen-decoration.bottom-left {
    bottom: 20px;
    left: 20px;
    background-image: url('assets/decoration-corner.png');
    transform: rotate(270deg);
    animation: decoration-fade-in 1.2s ease-out 0.4s forwards, decoration-float 4s ease-in-out 1s infinite;
}

.end-screen-decoration.bottom-right {
    bottom: 20px;
    right: 20px;
    background-image: url('assets/decoration-corner.png');
    transform: rotate(180deg);
    animation: decoration-fade-in 1.2s ease-out 0.6s forwards, decoration-float 4s ease-in-out 1.5s infinite;
}

@keyframes decoration-fade-in {
    from { opacity: 0; transform: scale(0.8) rotate(var(--rotation, 0deg)); }
    to { opacity: 0.6; transform: scale(1) rotate(var(--rotation, 0deg)); }
}

@keyframes decoration-float {
    0% { transform: translateY(0) rotate(var(--rotation, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--rotation, 0deg)); }
    100% { transform: translateY(0) rotate(var(--rotation, 0deg)); }
}

.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

#end-screen h1 {
    font-size: 42px;
    margin-top: 40px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(255,255,255,0.4);
    animation: title-appear 1s ease-out forwards;
    opacity: 0;
    transform: translateY(-20px);
    font-weight: bold;
}

@keyframes title-appear {
    to { opacity: 1; transform: translateY(0); }
}

.winner-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.winner-flag {
    width: 150px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 0 30px rgba(255,255,255,0.7), 0 0 60px rgba(255,255,255,0.3);
    animation: flag-appear 0.8s ease-out forwards, winner-glow 3s infinite alternate, flag-rotate 15s linear infinite;
    opacity: 0;
    transform: scale(0.8);
    position: relative;
}

.winner-flag::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    animation: border-pulse 2s ease-in-out infinite;
}

@keyframes border-pulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.5); }
    50% { border-color: rgba(255, 255, 255, 0.9); }
}

@keyframes flag-appear {
    to { opacity: 1; transform: scale(1); }
}

@keyframes winner-glow {
    from { box-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(255,255,255,0.2); filter: brightness(1); }
    to { box-shadow: 0 0 40px rgba(255,255,255,0.9), 0 0 80px rgba(255,255,255,0.4); filter: brightness(1.3); }
}

@keyframes flag-rotate {
    0% { transform: perspective(800px) rotateY(0deg); }
    5% { transform: perspective(800px) rotateY(5deg); }
    10% { transform: perspective(800px) rotateY(0deg); }
    15% { transform: perspective(800px) rotateY(-5deg); }
    20% { transform: perspective(800px) rotateY(0deg); }
    100% { transform: perspective(800px) rotateY(0deg); }
}

#winner-text {
    font-size: 32px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 15px rgba(255,255,255,0.3);
    margin: 15px 0;
    animation: text-appear 1s ease-out 0.3s forwards;
    opacity: 0;
    transform: translateY(20px);
    font-weight: bold;
}

@keyframes text-appear {
    to { opacity: 1; transform: translateY(0); }
}

.final-score {
    font-size: 56px;
    font-weight: bold;
    margin: 15px 0 35px 0;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(255,255,255,0.5);
    animation: score-appear 1s ease-out 0.6s forwards, score-glow 2s ease-in-out 1.5s infinite alternate;
    opacity: 0;
    transform: scale(0.8);
    letter-spacing: 5px;
}

@keyframes score-appear {
    to { opacity: 1; transform: scale(1); }
}

@keyframes score-glow {
    from { text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(255,255,255,0.5); }
    to { text-shadow: 0 2px 15px rgba(0,0,0,0.9), 0 0 30px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,0.4); }
}

/* Field markings using CSS instead of Matter.js */
.field-markings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2; /* Above the field background */
}



.center-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-50%);
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
    /* Worn grass effect in center circle */
    background: radial-gradient(
        circle,
        rgba(22, 100, 22, 0.7) 0%,
        rgba(29, 122, 29, 0) 70%
    );
}

/* Field logo in center */
.field-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    background-image: url('field/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    z-index: 0; /* Above the center circle but below players */
    opacity: 0.9; /* Slightly transparent to blend with field */
    pointer-events: none;
}

.center-spot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.penalty-area-top {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 140px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
    /* Worn effect in goal area */
    background: linear-gradient(
        to bottom,
        rgba(22, 100, 22, 0.5) 0%,
        rgba(29, 122, 29, 0) 100%
    );
}

.penalty-area-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 140px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
    /* Worn effect in goal area */
    background: linear-gradient(
        to top,
        rgba(22, 100, 22, 0.5) 0%,
        rgba(29, 122, 29, 0) 100%
    );
}

/* Penalty spots */
.penalty-spot-top {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.penalty-spot-bottom {
    position: absolute;
    bottom: 60px;
    left: 50%;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.corner-arc {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
}

.corner-arc-top-left {
    top: 0;
    left: 0;
    border-top: none;
    border-left: none;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
}

.corner-arc-top-right {
    top: 0;
    right: 0;
    border-top: none;
    border-right: none;
    border-left: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
}

.corner-arc-bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: none;
    border-left: none;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    border-top: 2px solid rgba(255, 255, 255, 0.9);
}

.corner-arc-bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: none;
    border-right: none;
    border-left: 2px solid rgba(255, 255, 255, 0.9);
    border-top: 2px solid rgba(255, 255, 255, 0.9);
}


/* Player styles */
.player {
    width: 80px; /* Bigger player */
    height: 140px; /* Bigger player */
    position: absolute;
    background-size: contain;
    background-position: center bottom; /* Position from bottom to align feet */
    background-repeat: no-repeat;
    border-radius: 0; /* Remove circular shape */
    z-index: 40;
    pointer-events: none;
    box-shadow: none; /* Remove box/border around player */
    transition: transform 0.1s;
    cursor: default;
    transform: translate(-50%, -50%);
}

/* Mirror player 1 (the one user controls) */
.player1 {
    transform: translate(-50%, -50%) scaleX(-1); /* Mirror horizontally */
}

/* Shadow under player */
.player::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 25px;
    background: rgba(0,0,0,0.4); /* Darker shadow */
    border-radius: 50%;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%) scale(1, 0.3);
    filter: blur(6px);
    z-index: -1;
    opacity: 0.8;
}

.player-boosting {
    filter: brightness(1.2) contrast(1.1);
}

.boost-effect {
    animation: boost-pulse 0.5s infinite alternate;
}

/* Crowd effects for top and bottom of field */
.crowd-top {
    position: relative;
    width: 100%;
    height: 30px;
    background: #222;
    overflow: hidden;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.5);
    bottom: 15px;
}

.crowd-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Stadium seating rows */
        linear-gradient(to bottom,
            #333 0%, #222 15%,
            #333 15%, #222 30%,
            #333 30%, #222 45%,
            #333 45%, #222 60%,
            #333 60%, #222 75%,
            #333 75%, #222 90%,
            #333 90%, #222 100%
        ),
        /* Small dots pattern to represent people - row 1 */
        radial-gradient(circle at 5% 20%, rgba(255,50,50,0.7) 0%, rgba(255,50,50,0) 2px),
        radial-gradient(circle at 10% 40%, rgba(50,255,50,0.7) 0%, rgba(50,255,50,0) 2px),
        radial-gradient(circle at 15% 60%, rgba(50,50,255,0.7) 0%, rgba(50,50,255,0) 2px),
        radial-gradient(circle at 20% 30%, rgba(255,255,50,0.7) 0%, rgba(255,255,50,0) 2px),
        radial-gradient(circle at 25% 50%, rgba(255,50,255,0.7) 0%, rgba(255,50,255,0) 2px),
        /* Row 2 */
        radial-gradient(circle at 30% 25%, rgba(255,150,50,0.7) 0%, rgba(255,150,50,0) 2px),
        radial-gradient(circle at 35% 45%, rgba(150,255,50,0.7) 0%, rgba(150,255,50,0) 2px),
        radial-gradient(circle at 40% 65%, rgba(50,150,255,0.7) 0%, rgba(50,150,255,0) 2px),
        radial-gradient(circle at 45% 35%, rgba(255,100,100,0.7) 0%, rgba(255,100,100,0) 2px),
        radial-gradient(circle at 50% 55%, rgba(100,255,100,0.7) 0%, rgba(100,255,100,0) 2px),
        /* Row 3 */
        radial-gradient(circle at 55% 30%, rgba(100,100,255,0.7) 0%, rgba(100,100,255,0) 2px),
        radial-gradient(circle at 60% 50%, rgba(255,200,50,0.7) 0%, rgba(255,200,50,0) 2px),
        radial-gradient(circle at 65% 70%, rgba(50,255,200,0.7) 0%, rgba(50,255,200,0) 2px),
        radial-gradient(circle at 70% 40%, rgba(200,50,255,0.7) 0%, rgba(200,50,255,0) 2px),
        radial-gradient(circle at 75% 60%, rgba(255,50,200,0.7) 0%, rgba(255,50,200,0) 2px),
        /* Row 4 */
        radial-gradient(circle at 80% 25%, rgba(150,150,255,0.7) 0%, rgba(150,150,255,0) 2px),
        radial-gradient(circle at 85% 45%, rgba(255,150,150,0.7) 0%, rgba(255,150,150,0) 2px),
        radial-gradient(circle at 90% 65%, rgba(150,255,150,0.7) 0%, rgba(150,255,150,0) 2px),
        radial-gradient(circle at 95% 35%, rgba(255,255,150,0.7) 0%, rgba(255,255,150,0) 2px),
        radial-gradient(circle at 98% 55%, rgba(150,255,255,0.7) 0%, rgba(150,255,255,0) 2px);
    background-size: 100% 100%,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
    z-index: 1;
}

.crowd-bottom {
    position: relative;
    width: 100%;
    height: 30px;
    background: #222;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    margin-top: 2px;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.5);
}

.crowd-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Stadium seating rows */
        linear-gradient(to top,
            #333 0%, #222 15%,
            #333 15%, #222 30%,
            #333 30%, #222 45%,
            #333 45%, #222 60%,
            #333 60%, #222 75%,
            #333 75%, #222 90%,
            #333 90%, #222 100%
        ),
        /* Small dots pattern to represent people - row 1 */
        radial-gradient(circle at 3% 30%, rgba(255,50,50,0.7) 0%, rgba(255,50,50,0) 2px),
        radial-gradient(circle at 8% 50%, rgba(50,255,50,0.7) 0%, rgba(50,255,50,0) 2px),
        radial-gradient(circle at 13% 70%, rgba(50,50,255,0.7) 0%, rgba(50,50,255,0) 2px),
        radial-gradient(circle at 18% 40%, rgba(255,255,50,0.7) 0%, rgba(255,255,50,0) 2px),
        radial-gradient(circle at 23% 60%, rgba(255,50,255,0.7) 0%, rgba(255,50,255,0) 2px),
        /* Row 2 */
        radial-gradient(circle at 28% 35%, rgba(255,150,50,0.7) 0%, rgba(255,150,50,0) 2px),
        radial-gradient(circle at 33% 55%, rgba(150,255,50,0.7) 0%, rgba(150,255,50,0) 2px),
        radial-gradient(circle at 38% 75%, rgba(50,150,255,0.7) 0%, rgba(50,150,255,0) 2px),
        radial-gradient(circle at 43% 45%, rgba(255,100,100,0.7) 0%, rgba(255,100,100,0) 2px),
        radial-gradient(circle at 48% 65%, rgba(100,255,100,0.7) 0%, rgba(100,255,100,0) 2px),
        /* Row 3 */
        radial-gradient(circle at 53% 40%, rgba(100,100,255,0.7) 0%, rgba(100,100,255,0) 2px),
        radial-gradient(circle at 58% 60%, rgba(255,200,50,0.7) 0%, rgba(255,200,50,0) 2px),
        radial-gradient(circle at 63% 80%, rgba(50,255,200,0.7) 0%, rgba(50,255,200,0) 2px),
        radial-gradient(circle at 68% 50%, rgba(200,50,255,0.7) 0%, rgba(200,50,255,0) 2px),
        radial-gradient(circle at 73% 70%, rgba(255,50,200,0.7) 0%, rgba(255,50,200,0) 2px),
        /* Row 4 */
        radial-gradient(circle at 78% 35%, rgba(150,150,255,0.7) 0%, rgba(150,150,255,0) 2px),
        radial-gradient(circle at 83% 55%, rgba(255,150,150,0.7) 0%, rgba(255,150,150,0) 2px),
        radial-gradient(circle at 88% 75%, rgba(150,255,150,0.7) 0%, rgba(150,255,150,0) 2px),
        radial-gradient(circle at 93% 45%, rgba(255,255,150,0.7) 0%, rgba(255,255,150,0) 2px),
        radial-gradient(circle at 97% 65%, rgba(150,255,255,0.7) 0%, rgba(150,255,255,0) 2px);
    background-size: 100% 100%,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
    z-index: 1;
}

/* Camera flashes in the crowd - top */
.crowd-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 3%),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 2%),
        radial-gradient(circle at 50% 60%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 3%),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 2%),
        radial-gradient(circle at 90% 50%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 3%);
    z-index: 2;
    opacity: 0;
    animation: camera-flashes-top 5s infinite;
}

/* Camera flashes in the crowd - bottom */
.crowd-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 3%),
        radial-gradient(circle at 40% 60%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 2%),
        radial-gradient(circle at 60% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 3%),
        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 2%);
    z-index: 2;
    opacity: 0;
    animation: camera-flashes-bottom 5s infinite;
}

/* Additional random camera flashes for top crowd */
.crowd-top .flash1, .crowd-top .flash2, .crowd-top .flash3, .crowd-top .flash4, .crowd-top .flash5 {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.8);
    z-index: 3;
    transform-origin: center center;
    /* Default flash color if not specified */
    --flash-color: rgba(255,255,255,0.8);
}

.crowd-top .flash1 {
    top: 30%;
    left: 15%;
    --flash-color: rgba(255, 220, 180, 0.9); /* Warm white */
}

.crowd-top .flash2 {
    top: 40%;
    left: 65%;
    animation-delay: 1s;
    --flash-color: rgba(200, 220, 255, 0.9); /* Cool white */
}

.crowd-top .flash3 {
    top: 20%;
    left: 85%;
    animation-delay: 2s;
    --flash-color: rgba(255, 255, 200, 0.9); /* Warm yellow */
}

.crowd-top .flash4 {
    top: 50%;
    left: 35%;
    animation-delay: 1.5s;
    --flash-color: rgba(220, 255, 220, 0.9); /* Light green */
}

.crowd-top .flash5 {
    top: 25%;
    left: 55%;
    animation-delay: 0.7s;
    --flash-color: rgba(255, 200, 200, 0.9); /* Light red */
}

.crowd-top .flash1::before,
.crowd-top .flash2::before,
.crowd-top .flash3::before,
.crowd-top .flash4::before,
.crowd-top .flash5::before,
.crowd-bottom .flash1::before,
.crowd-bottom .flash2::before,
.crowd-bottom .flash3::before,
.crowd-bottom .flash4::before,
.crowd-bottom .flash5::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    background: transparent;
    box-shadow:
        0 0 4px 2px var(--flash-color),
        0 0 8px 4px rgba(255,255,255,0.4);
    opacity: 0;
    border-radius: 50%;
    z-index: -1;
    animation: flash-rays 4s infinite;
    animation-delay: inherit;
}

/* Additional random camera flashes for bottom crowd */
.crowd-bottom .flash1, .crowd-bottom .flash2, .crowd-bottom .flash3, .crowd-bottom .flash4, .crowd-bottom .flash5 {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.8);
    z-index: 3;
    transform-origin: center center;
    /* Default flash color if not specified */
    --flash-color: rgba(255,255,255,0.8);
}

.crowd-bottom .flash1 {
    top: 40%;
    left: 25%;
    animation: flash-starburst 4.5s infinite;
    animation-delay: 0.5s;
    --flash-color: rgba(200, 200, 255, 0.9); /* Light blue */
}

.crowd-bottom .flash2 {
    top: 50%;
    left: 45%;
    animation: flash-starburst 3.5s infinite;
    animation-delay: 1.5s;
    --flash-color: rgba(255, 230, 200, 0.9); /* Light orange */
}

.crowd-bottom .flash3 {
    top: 30%;
    left: 75%;
    animation: flash-starburst 5.5s infinite;
    animation-delay: 2.5s;
    --flash-color: rgba(230, 200, 255, 0.9); /* Light purple */
}

.crowd-bottom .flash4 {
    top: 45%;
    left: 10%;
    animation: flash-starburst 3.8s infinite;
    animation-delay: 0.3s;
    --flash-color: rgba(200, 255, 230, 0.9); /* Light cyan */
}

.crowd-bottom .flash5 {
    top: 35%;
    left: 90%;
    animation: flash-starburst 4.8s infinite;
    animation-delay: 2.2s;
    --flash-color: rgba(255, 255, 255, 0.9); /* Pure white */
}

@keyframes flash-rays {
    0%, 100% { opacity: 0; width: 0; height: 0; }
    1% { opacity: 0; width: 0; height: 0; }
    1.5% { opacity: 0.9; width: 30px; height: 30px; }
    3% { opacity: 0.5; width: 40px; height: 40px; }
    5% { opacity: 0; width: 50px; height: 50px; }
}

@keyframes flash-starburst {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
        box-shadow: 0 0 0px rgba(255,255,255,0);
        background: rgba(255,255,255,0);
    }
    1% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 10px 2px var(--flash-color, rgba(255,255,255,0.8));
        background: var(--flash-color, rgba(255,255,255,0.8));
    }
    2% {
        opacity: 1;
        transform: scale(2) rotate(45deg);
        box-shadow: 0 0 15px 5px var(--flash-color, rgba(255,255,255,0.9));
        background: var(--flash-color, rgba(255,255,255,0.9));
    }
    3% {
        opacity: 0.8;
        transform: scale(2.5) rotate(90deg);
        box-shadow: 0 0 20px 8px var(--flash-color, rgba(255,255,255,0.7));
        background: var(--flash-color, rgba(255,255,255,0.7));
    }
    4% {
        opacity: 0.4;
        transform: scale(3) rotate(180deg);
        box-shadow: 0 0 25px 10px var(--flash-color, rgba(255,255,255,0.4));
        background: var(--flash-color, rgba(255,255,255,0.4));
    }
    5% {
        opacity: 0;
        transform: scale(3.5) rotate(360deg);
        box-shadow: 0 0 30px 12px rgba(255,255,255,0);
        background: rgba(255,255,255,0);
    }
    60% { opacity: 0; transform: scale(0); }
}

@keyframes camera-flashes-top {
    0%, 100% { opacity: 0; }
    10% { opacity: 0; }
    11% { opacity: 1; }
    13% { opacity: 0; }
    20% { opacity: 0; }
    21% { opacity: 0.8; }
    22% { opacity: 0; }
    45% { opacity: 0; }
    46% { opacity: 1; }
    47% { opacity: 0; }
    70% { opacity: 0; }
    71% { opacity: 0.9; }
    73% { opacity: 0; }
}

@keyframes camera-flashes-bottom {
    0%, 100% { opacity: 0; }
    30% { opacity: 0; }
    31% { opacity: 0.6; }
    32% { opacity: 0; }
    60% { opacity: 0; }
    61% { opacity: 0.7; }
    62% { opacity: 0; }
    85% { opacity: 0; }
    86% { opacity: 0.8; }
    87% { opacity: 0; }
}

/* Moving colored lights to represent crowd */
.crowd-top .lights, .crowd-bottom .lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.crowd-top .lights {
    background: linear-gradient(90deg,
        rgba(255, 0, 0, 0.2) 0%,
        rgba(0, 0, 255, 0.2) 20%,
        rgba(255, 255, 0, 0.2) 40%,
        rgba(0, 255, 0, 0.2) 60%,
        rgba(255, 0, 255, 0.2) 80%,
        rgba(255, 165, 0, 0.2) 100%
    );
    animation: crowd-lights 8s infinite linear;
}

.crowd-bottom .lights {
    background: linear-gradient(90deg,
        rgba(0, 255, 0, 0.2) 0%,
        rgba(255, 0, 255, 0.2) 20%,
        rgba(255, 165, 0, 0.2) 40%,
        rgba(255, 0, 0, 0.2) 60%,
        rgba(0, 0, 255, 0.2) 80%,
        rgba(255, 255, 0, 0.2) 100%
    );
    animation: crowd-lights 8s infinite linear reverse;
}

/* Crowd wave effect */
.crowd-wave {
    display: none; /* Hide crowd wave */
}

@media (max-width: 1320px){
    .game-container {
        width: 100%;
        height:  100vh;
        border-radius: 4vw;
    }
    h1 { font-size: 5vw; }
    h2 { font-size: 3vw; }
    .button { font-size: 3vw; }
    .scoreboard { font-size: 3vw; }
    .score, .timer { font-size: 3vw; }
    .selected-flag { width: 14vw; height: 14vw; }
    .flag-option { width: 5vw; height: 5vw; }
}
@media (max-height: 1900px){
    h1 { font-size: 4vh; }
    h2 { font-size: 4vh; }
    .button { font-size: 1rem; }
    .scoreboard { font-size: 3vh; }
    .score, .timer { font-size: 3vh; }
    .selected-flag { width: 14vh; height: 14vh; }
    .flag-option { width: clamp(2vh, 4vh, 8vh); height: clamp(2vh, 4vh, 8vh); }
    #start-game-button-container{
        display: flex;
        flex-direction: row;
    }
}
@media (max-height: 1000px){
    h1 { font-size: 4vh; }
    h2 { font-size: 4vh; }
    .button { font-size: 1rem; }
    .scoreboard { font-size: 3vh; }
    .score, .timer { font-size: 3vh; }
    .selected-flag { width: 14vh; height: 14vh; }
    .flag-option { width: 4vh; height: 4vh; }
    #start-game-button-container{
        display: flex;
        flex-direction: row;
    }
}

@media (max-height: 600px){
    .team-selection-container{
        height: 40vh;
        max-height: 100%;
    }
    .flags-grid{
        display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vh;
  padding: 2vh;
  justify-items: center;
  align-items: center;
    }
    h1 { font-size: 2vw; }
    h2 { font-size: 1vw; }
    .button { font-size: 2vh; }
    .scoreboard { font-size: 3vw; }
    .score, .timer { font-size: 3vw; }
    .selected-flag { width: 2vh; height: 2vh; }
    .flag-option { width: 6vh; height: 6vh; }
    #start-game-button-container{
        display: flex;
        flex-direction: row;
    }
}


/* Field image styling */
.field-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none; /* Make the image non-interactive */
    user-select: none; /* Prevent selection */
    -webkit-user-drag: none; /* Prevent dragging in webkit browsers */
}

/* Player info bar styling */
.user-info-bar {
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 5px;
    margin-bottom: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Player info section */
.user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
}

/* Player images */
.user-image {
    width: 40px;
    height: 40px;
    border-radius: 0;
    background-color: #333;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    margin-bottom: 3px;
}

.user1-image {
    background-image: url('users/mohammed.jpg');
    background-color: #007bff;
}

.user2-image {
    background-image: url('users/ziad.jpg');
    background-color: #dc3545;
}

/* Player names */
.user-name {
    color: #fff;
    margin: 0;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.goal-glow {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
    animation: pulse 1.5s infinite alternate;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.goal-glow.visible {
    opacity: 1;
}

@keyframes pulse {
    from {
        box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
    }
    to {
        box-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00;
    }
}

/* Middle screen */
.middle-screen {
    width: 200px;
    height: 40px;
    background-color: rgba(0, 30, 60, 0.8);
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    box-shadow: 
        inset 0 0 10px rgba(0, 120, 255, 0.4),
        0 0 5px rgba(0, 120, 255, 0.3);
    border: 1px solid rgba(0, 100, 255, 0.3);
    /* Add subtle LED pixel effect */
    background-image:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 150, 255, 0.1) 0%,
            rgba(0, 0, 0, 0) 1px
        );
    background-size: 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

/* Flag display in middle screen */
.flag-display {
    width: 40px;
    height: 30px;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(0, 140, 255, 0.7);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease-out;
}

/* Flag shine effect */
.flag-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: flag-shine 4s infinite ease-in-out;
}

@keyframes flag-shine {
    0% { left: -150%; }
    30%, 100% { left: 150%; }
}

/* Adding a transition class for flag change effect */
.flag-display.flag-transition {
    animation: flag-transition 0.5s ease-out;
}

@keyframes flag-transition {
    0% { filter: brightness(1); transform: scale(1); }
    10% { filter: brightness(1.5) contrast(1.2); transform: scale(1.05); }
    20% { filter: brightness(0.8) contrast(0.9); transform: scale(0.98); }
    30% { filter: brightness(1.3) contrast(1.1); transform: scale(1.02); }
    40% { filter: brightness(0.9) contrast(1); transform: scale(0.99); }
    50% { filter: brightness(1.4) contrast(1.2); transform: scale(1.03); }
    60% { filter: brightness(0.8) contrast(0.9); transform: scale(0.97); }
    70% { filter: brightness(1.5) contrast(1.1); transform: scale(1.05); }
    80% { filter: brightness(0.9) contrast(1); transform: scale(0.98); }
    100% { filter: brightness(1) contrast(1); transform: scale(1); }
}

/* Screen glare/reflection on flag */
.flag-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: flag-shine 4s infinite ease-in-out;
}

/* Flag transition animations */
@keyframes flag-flicker {
    0%, 95%, 100% { background: rgba(255, 255, 255, 0); }
    96% { background: rgba(255, 255, 255, 0.3); }
    97% { background: rgba(255, 255, 255, 0.1); }
    98% { background: rgba(255, 255, 255, 0.4); }
    99% { background: rgba(255, 255, 255, 0.2); }
}

@keyframes flag-shine {
    0% { left: -150%; }
    30%, 100% { left: 150%; }
}

/* Content items for middle screen */
.middle-screen .content-item {
    min-width: 40px;
    height: 40px;
    margin: 0 5px;
    flex-shrink: 0;
}

/* Middle screen image styling */
.middle-screen .content-item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 3px rgba(0, 162, 255, 0.7));
}

/* Screen content for middle screen */
.screen-content-middle {
    display: none; /* Hide the scrolling content since we're using flag display now */
}

/* Bottom screen container */
.bottom-screen-container {
    width: 100%;
    height: 60px; /* Increased from 40px */
    background: rgba(0, 0, 0, 0.8); /* Darker background for better contrast */
    padding: 0; /* Removed padding */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0; /* Removed margin */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5); /* Add shadow at top edge */
}

/* Bottom screen */
.bottom-screen {
    width: 100%; /* Changed from 95% to 100% */
    height: 60px; /* Increased from 50px */
    background-color: rgba(0, 45, 90, 0.9); /* Darker, more saturated blue */
    overflow: hidden;
    position: relative;
    border-radius: 0; /* Removed border radius */
    box-shadow: 
        inset 0 0 10px rgba(0, 140, 255, 0.6),
        0 0 8px rgba(0, 140, 255, 0.5);
    border: none; /* Removed border */
    /* LED pixel effect */
    background-image:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 180, 255, 0.2) 0%,
            rgba(0, 0, 0, 0) 1px
        );
    background-size: 2px 2px; /* Smaller pixels */
}

/* Bottom screen content */
.screen-content-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    animation: scroll-left-bottom 12s linear infinite; /* Animation for the single container */
    width: 100%; /* Just using 100% width since we have one container */
}

/* Circle images in content items */
.circle-img {
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 4px rgba(0, 180, 255, 0.6) !important;
}

/* Content items for bottom screen */
.bottom-screen .content-item {
    width: 100%; /* Take full width of the container */
    padding: 0 10px; /* Small padding */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Evenly space the logos */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Bottom screen image styling */
.bottom-screen .content-item img {
    width: 30%; /* Auto width to preserve aspect ratio */
    height: 100px; /* Match the sponsor-logo height */
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 0 3px rgba(0, 180, 255, 0.8));
}

/* Bottom screen scrolling animation */
@keyframes scroll-left-bottom {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Screen glow effects */
.bottom-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* LED pixels */
        repeating-linear-gradient(
            to right,
            transparent,
            transparent 2px,
            rgba(0, 100, 255, 0.05) 2px,
            rgba(0, 100, 255, 0.05) 3px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 2px,
            rgba(0, 100, 255, 0.05) 2px,
            rgba(0, 100, 255, 0.05) 3px
        ),
        /* Screen glare */
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0) 80%,
            rgba(255, 255, 255, 0.15)
        );
    pointer-events: none;
    z-index: 5;
    animation: screen-flicker-bottom 10s infinite;
}

/* Unique flicker animation for bottom screen */
@keyframes screen-flicker-bottom {
    0%, 100% { opacity: 1; }
    94% { opacity: 1; }
    94.5% { opacity: 0.6; }
    95% { opacity: 1; }
    97% { opacity: 1; }
    97.5% { opacity: 0.8; }
    98% { opacity: 1; }
}

/* Pulsing glow for bottom screen */
.bottom-screen {
    animation: bottom-screen-glow 4s ease-in-out infinite alternate;
}

@keyframes bottom-screen-glow {
    0% {
        box-shadow: 
            inset 0 0 8px rgba(0, 140, 255, 0.6),
            0 0 6px rgba(0, 140, 255, 0.5);
    }
    100% {
        box-shadow: 
            inset 0 0 15px rgba(0, 180, 255, 0.8),
            0 0 12px rgba(0, 180, 255, 0.7);
    }
}

/* Text elements in bottom screen */
.info-text {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 4px rgba(0, 140, 255, 0.8);
    white-space: nowrap;
}

/* Sponsor logos in bottom screen */
.sponsor-logo {
    height: 50px !important;
    width: auto !important;
    max-width: 30%; /* Limit width to ensure all three fit */
    background-color: transparent;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)) !important;
    margin: 0 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.sponsor-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

/* Bottom screen scrolling animation */
@keyframes scroll-left-bottom {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Sponsor banner below the field */
.sponsor-banner {
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    position: relative;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sponsor-banner-content {
    display: flex;
    height: 100%;
    animation: sponsor-scroll 20s linear infinite;
    white-space: nowrap;
}

.sponsor-item {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 30px;
}

.sponsor-item img {
    height: 20px;
    object-fit: contain;
    background-color: white;
    border-radius: 4px;
    padding: 3px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

@keyframes sponsor-scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-180%);
    }
}

/* Specific styling for Puma logo */
.puma-logo {
    background-color: white !important;
    padding: 5px !important;
    border-radius: 5px !important;
}

/* Remove the previously added styling that we don't need anymore */
.puma-placeholder {
    display: none;
}

img[src*="puma.png"] {
    display: inline-block;
}






.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #2196F3;
}

input:focus + .toggle-slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Performance mode class that will be applied to the game container */
.performance-mode .stand-screen,
.performance-mode .screen-content,
.performance-mode .stand-overlay,
.performance-mode .stand-crowd,
.performance-mode .stand-lights,
.performance-mode .flash1,
.performance-mode .flash2,
.performance-mode .flash3,
.performance-mode .flash4,
.performance-mode .flash5,
.performance-mode .crowd-top::after,
.performance-mode .crowd-bottom::after,
.performance-mode .bottom-screen,
.performance-mode .ball-trail,
.performance-mode .impact-effect {
    display: none !important;
}

.performance-mode .ball-shadow {
    opacity: 0.2;
    filter: none;
}

.performance-mode .stand {
    background: #222;
    box-shadow: none;
    border: 1px solid #444;
}

/* In-game performance toggle at menu screen */
.performance-option {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}

.performance-option .performance-label {
    margin-right: 10px;
    font-size: 14px;
}

.performance-text {
    color: #ffffff;
    font-size: 14px;
    margin-left: 10px;
    opacity: 0.8;
}

/* Performance mode class that will be applied to the game container */
.performance-mode .stand-overlay,
.performance-mode .stand-crowd,
.performance-mode .stand-lights,
.performance-mode .flash1,
.performance-mode .flash2,
.performance-mode .flash3,
.performance-mode .flash4,
.performance-mode .flash5,
.performance-mode .crowd-top::after,
.performance-mode .crowd-bottom::after,
.performance-mode .ball-trail,
.performance-mode .impact-effect {
    display: none !important;
}

/* Keep the screen content visible in performance mode but simplify animations */
.performance-mode .stand-screen {
    box-shadow: none;
    animation: none;
    background-image: none;
}

.performance-mode .stand-screen::after {
    display: none;
}

/* Ensure screen content is always visible in performance mode */
.performance-mode .screen-content,
.performance-mode .screen-content-left,
.performance-mode .screen-content-right,
.performance-mode .screen-content-bottom,
.performance-mode .content-item,
.performance-mode .sponsor-logo {
    display: flex !important;
    opacity: 1 !important;
}

/* Slow down animations in performance mode */
.performance-mode .screen-content {
    animation-duration: 60s !important; /* Slow down animations */
}

.performance-mode .bottom-screen {
    box-shadow: none;
    animation: none;
    background-image: none;
    display: flex !important;
}

.performance-mode .bottom-screen::before {
    display: none;
}

.performance-mode .ball-shadow {
    opacity: 0.2;
    filter: none;
}

.performance-mode .stand {
    background: #222;
    box-shadow: none;
    border: 1px solid #444;
}

/* Simplify sponsor logo effects in performance mode */
.performance-mode .sponsor-logo {
    box-shadow: none;
    filter: none !important;
    transition: none;
    display: inline-block !important;
}

.performance-mode .sponsor-logo:hover {
    transform: none;
    box-shadow: none;
}

/* Keep side screen animations at normal speed in performance mode */
.performance-mode .screen-content-left {
    animation: scroll-down 30s linear infinite !important; /* Same as non-performance mode */
}

.performance-mode .screen-content-right {
    animation: scroll-up 30s linear infinite !important; /* Same as non-performance mode */
}

/* Keep bottom screen animations at normal speed in performance mode */
.performance-mode .screen-content-bottom {
    animation: scroll-left-bottom 12s linear infinite !important; /* Same as non-performance mode */
}

/* Sponsor banner should also maintain normal speed */
.performance-mode .sponsor-banner-content {
    animation: sponsor-scroll 20s linear infinite !important; /* Same as non-performance mode */
}