/* Root styles */
:root {
    /* Font Sizes */
    --font-xs: 22px;
    --font-sm: 26px;
    --font-md: 34px;
    --font-lg: 48px;
    --font-xl: 80px;

    /* Z-indexes */
    --z-interactive: 10;
    --z-car: 100;
    --z-modal: 500;
    --z-overlay: 999;

    /* Fonts */
    --primary-font: "Silkscreen", sans-serif;
    --secondary-font: "VT323", sans-serif;

    /* Colors */
    --primary: black;
    --secondary: white;

    --red-bright: rgb(255, 0, 0);
    --orange-bright: rgb(255, 128, 0);
    --yellow-bright: rgb(192, 192, 0);
    --green-bright: rgb(0, 255, 0);
    
    --red-light: rgb(255, 128, 128);
    --orange-light: rgb(255, 192, 128);
    --yellow-light: rgb(255, 255, 128);
    --green-light: rgb(128, 255, 128);
    --blue-light: rgb(0 128 255);

    --red-dark: rgb(128, 0, 0);
    --orange-dark: rgb(128, 64, 0);
    --yellow-dark: rgb(96, 96, 0);
    --green-dark: rgb(0, 128, 0);
    --blue-dark: rgb(0 64 128);
}

/* Body Styling */
body {
    margin: 0;
    color: var(--secondary);
    font-family: var(--primary-font);
    background-color: var(--primary);
    text-align: center;
    overflow: hidden;
}

img {
    pointer-events: none;
}

/* Project title styling */
/* Applies font styling and alignment for the game title */
.text {
    position: absolute;
    width: 70%;
    left: 50%;
    transform: translate(-50%, 0);
}

.border-white {
    border: 1px solid var(--secondary);
}

.parking-panic {
    top: 190px;
    font-size: var(--font-xl);
    line-height: 1.1;
}

.game-subtitle {
    top: 410px;
    font-size: var(--font-md);
    color: var(--yellow-light);
    font-family: var(--secondary-font);
}

.button:hover {
    outline: none;
    scale: 1.05;
    cursor: pointer;
}

.siren {
    position: absolute;
    height: 90px;
    top: 326px;
}

.left-siren {
    left: 250px;
}

.right-siren {
    right: 250px;
}

/* Scrollable game window container */
/* Central game window with fixed size and background */
.window {
    position: absolute;
    margin: auto;
    width: 1000px;
    height: 1000px;
    min-height: 1000px;
    min-width: 1000px;
    border-radius: 5px;
    transform-origin: top left;
    box-sizing: border-box;
    background-size: contain;
    transition: opacity 0.5s ease-in-out;
    
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#startup-window {
    z-index: var(--z-overlay);
    background-color: var(--primary);
    pointer-events: none;
}

#car-cover {
    position: absolute;
    bottom: -101px;
    left: 210px;
    width: 100px;
    height: 100px;
    background-color: black;
    z-index: var(--z-overlay);
}

/* Button styling for start and game buttons */
.start-button {
    width: 165px;
    height: 54px;
    font-size: var(--font-xs);
    background-color: #393737;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-interactive);
}

/* Animation: glowing red effect */
@keyframes glow-red {
    from {
        box-shadow: 0 0 3px 3px var(--red-light);
        /* Initial shadow */
    }

    to {
        box-shadow: 0 0 8px 8px var(--red-light);
        /* Final shadow */
    }
}

/* Animation: glowing green effect */
@keyframes glow-green {
    from {
        box-shadow: 0 0 3px 3px var(--green-light);
    }

    to {
        box-shadow: 0 0 8px 8px var(--green-light);
    }
}

/* Animation: glowing yellow effect */
@keyframes glow-yellow {
    from {
        box-shadow: 0 0 1px 1px var(--yellow-light);
    }

    to {
        box-shadow: 0 0 4px 4px var(--yellow-light);
    }
}

/* Animation: glowing white effect */
@keyframes glow-white {
    from {
        box-shadow: 0 0 1px 1px var(--secondary);
    }

    to {
        box-shadow: 0 0 4px 4px var(--secondary);
    }
}

/* Easy mode button styling */
/* Adds glow and green color to the easy mode button */
#easy-mode-button {
    top: 563px;
    left: 620px;
    color: var(--green-light);
    animation: glow-green 0.7s infinite alternate;
    /* Green glow animation */
}

/* Hard mode button styling */
/* Adds glow and red color to the hard mode button */
#hard-mode-button {
    top: 630px;
    left: 620px;
    color: var(--red-light);
    animation: glow-red 0.7s infinite alternate;
    /* Red glow animation */
}

.selected#easy-mode-button {
    background-color: var(--green-dark) !important;
}

.selected#hard-mode-button {
    background-color: var(--red-dark) !important;
}

.hidden {
    display: none;
}

.opacity-0 {
    opacity: 0;
}

.spotlight {
    position: absolute;
    /* Position relative to the car div */
    top: 50%;
    /* Center the spotlight vertically */
    left: 50%;
    /* Center the spotlight horizontally */
    transform: translate(-50%, -50%);
    /* Offset by half of its size for perfect centering */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    /* Create a fake overlay effect */
    background-color: transparent;
    /* Semi-transparent red spotlight */
    z-index: var(--z-overlay);
    pointer-events: none;
    /* Ensure the spotlight does not interfere with pointer events */
}

#car-spotlight {
    width: 200px;
    /* Spotlight diameter */
    height: 200px;
    /* Spotlight diameter */
    border-radius: 50%;
    /* Make it a circle */
}

#subtitle-spotlight {
    width: 90%;
    /* Spotlight diameter */
    height: 100%;
    /* Spotlight diameter */
    padding: 20px;
}

#loading-container {
    margin: 500px auto;
    width: 550px;
    font-size: var(--font-xs);
    color: var(--yellow-light);
}

/* Outer border */
#loading-bar {
    width: 400px;
    height: 30px;
    margin: -10px auto;
    border: 4px solid white;
    background-color: black;
}

#loading-tip {
    font-size: var(--font-md);
    font-family: var(--secondary-font);
    margin-top: 100px;
    color: var(--orange-light);
}

/* Pixelated progress bar */
.progress {
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        white,
        white 10px,
        black 10px,
        black 20px
    );
    width: 0%;
    transition: width 0.2s linear;
    image-rendering: pixelated;
}

#fullscreen {
    position: fixed;
    top: 17px;
    right: 15px;
    z-index: var(--z-overlay);

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fullscreen:hover {
    scale: 1.15;
}

#fullscreen img {
    width: 30px;
}