body {
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Changed background to a geometrical pattern */
    background-color: #1a1a1a; /* Dark base color */
    background-image: repeating-linear-gradient(
        45deg,
        #2c2c2c 0,
        #2c2c2c 2px,
        #1a1a1a 2px,
        #1a1a1a 20px
    ), repeating-linear-gradient(
        -45deg,
        #2c2c2c 0,
        #2c2c2c 2px,
        #1a1a1a 2px,
        #1a1a1a 20px
    );
    position: relative;
    /* Changed font to Orbitron */
    font-family: 'Orbitron', sans-serif;
    color: #fff;
}

canvas {
    border: 1px solid #fff;
    background-color: #0077cc; /* Default background, level game.js overrides this */
    display: block;
}

#homeScreen, #gameContainer, #comingSoonMessage, #howToPlayMessage, #howToPlayMultiplayerMessage, #achievementsMessage, #levelSelectScreen, #multiplayerLobby {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border-radius: 10px;
    border: 2px solid #fff;
    z-index: 15;
}

#homeScreen h1, #multiplayerLobby h2, #multiplayerLevelSelectScreen h2 {
    /* Keep the same color or update if desired for Beatscape theme */
    color: #ffcc00;
    margin-bottom: 20px;
}

/* Style for all buttons within homeScreen, multiplayerLobby or message popups */
#homeScreen button,
#multiplayerLobby button,
#comingSoonMessage button,
#howToPlayMessage button,
#howToPlayMultiplayerMessage button,
#achievementsMessage button,
#multiplayerLevelSelectScreen button,
#levelSelectScreen button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #ffcc00;
    border: none;
    border-radius: 5px;
    color: #333;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-family: 'Orbitron', sans-serif; /* Apply Orbitron to buttons too */
}

/* Specific style for navigation buttons in level select screens */
#levelSelectScreen button:not(#spLevelSelectBack),
#multiplayerLevelSelectScreen button:not(#joinLobbyButton):not(#backToHomeButton) {
    display: inline-block;
    margin: 0 15px;
    width: 50px;
    height: 50px;
    font-size: 24px;
    line-height: 1;
    vertical-align: middle;
    padding: 0;
    box-sizing: border-box;
}

#homeScreen button:hover,
#multiplayerLobby button:not(.disabled):hover, /* Only hover if not disabled */
#comingSoonMessage button:hover,
#howToPlayMessage button:hover,
#howToPlayMultiplayerMessage button:hover,
#achievementsMessage button:hover,
#multiplayerLevelSelectScreen button:hover,
#levelSelectScreen button:hover {
    background-color: #ffdb4d;
}

/* Style for disabled buttons */
#multiplayerLobby button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc; /* Grey out disabled buttons */
    color: #666;
}

/* Add style for the multiplayer disclaimer message */
#multiplayerDisclaimer {
    font-size: 11px; /* Smaller font size */
    color: #aaa; /* Lighter grey color */
    margin-top: 5px; /* Small margin above */
    margin-bottom: 15px; /* More margin below if there are elements below */
    line-height: 1.4; /* Adjust line spacing */
}

/* Specific style for the How to Play button on home screen */
/* Positioned near the coming soon button */
#howToPlayButton {
    position: fixed;
    bottom: 10px;
    /* Adjusted position to be on the LEFT side */
    left: 10px; /* Position it on the left edge */
    right: auto; /* Remove the right positioning */
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    background-color: #555; /* Different color */
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
    z-index: 20;
    display: block;
    font-family: 'Orbitron', sans-serif;
}

#howToPlayButton:hover {
    background-color: #777;
}

#comingSoonButton {
    position: fixed;
    bottom: 10px;
    right: 10px; /* Keep this on the right edge */
    left: auto; /* Ensure left is not set */
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    background-color: #555;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
    z-index: 20;
    display: block;
    font-family: 'Orbitron', sans-serif;
}

#comingSoonButton:hover {
    background-color: #777;
}

/* Add style for the Achievements button */
#achievementsButton {
    position: fixed;
    bottom: 10px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the button's width */
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    background-color: #555; /* Same style as other info buttons */
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
    z-index: 20;
    display: block;
    font-family: 'Orbitron', sans-serif;
    /* Removed opacity/text-decoration from here */
    opacity: 1; /* Ensure button is not dimmed */
    text-decoration: none; /* Ensure no line-through */
}

#achievementsButton:hover {
    background-color: #777;
}

/* Style for How to Play message content */
#howToPlayMessage h2 {
    color: #ffcc00;
    margin-bottom: 15px;
}

#howToPlayMessage p {
    margin: 8px 0;
    font-size: 16px;
    color: #ccc; /* Lighter text color */
}

/* Style for How to Play Multiplayer message content */
#howToPlayMultiplayerMessage h2 {
    color: #ffcc00;
    margin-bottom: 15px;
}

#howToPlayMultiplayerMessage p {
    margin: 8px 0;
    font-size: 14px;
    color: #ccc; /* Lighter text color */
    text-align: left; /* Align text left for better readability */
}

#howToPlayMultiplayerMessage p strong {
    color: #ffcc00; /* Highlight section headers */
}

/* Add style for the How to Play Multiplayer button */
#howToPlayMultiplayerButton {
    position: fixed;
    bottom: 50px; /* Position above the other buttons */
    left: 10px; /* Position it on the left edge */
    right: auto; /* Remove the right positioning */
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    background-color: #555; /* Different color */
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
    z-index: 20;
    display: block;
    font-family: 'Orbitron', sans-serif;
}

#howToPlayMultiplayerButton:hover {
    background-color: #777;
}

/* Style for Achievements message content */
#achievementsMessage h2 {
    color: #ffcc00;
    margin-bottom: 15px;
}

#achievementsList {
    text-align: left; /* Align achievement text left */
    margin-bottom: 20px;
    max-height: 200px; /* Limit height and add scroll if needed */
    overflow-y: auto; /* Add scrollbar */
    padding-right: 15px; /* Add padding for scrollbar */
}

#achievementsList p {
     margin: 5px 0;
     font-size: 16px;
     color: #ccc; /* Lighter text color */
}

.achievement-unlocked {
    color: lime; /* Green for unlocked */
}

.achievement-locked {
    color: orange; /* Orange for locked */
}

/* Added style for Fullscreen button */
#fullscreenButton {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent */
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    z-index: 10; /* Above canvas, below popups */
    font-family: 'Orbitron', sans-serif;
}

#fullscreenButton:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Add style for Version Number Display */
#versionDisplay {
    position: absolute;
    top: 10px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for element width */
    color: #fff; /* White text */
    font-size: 14px;
    /* Pusob font not available via CDN. Using Orbitron as fallback. */
    font-family: 'Orbitron', sans-serif;
    z-index: 10; /* Above canvas, below popups */
    pointer-events: none; /* Allow interaction with elements behind */
}

/* Style for volume control - Positioned outside game container now */
#volumeControl {
    position: fixed; /* Use fixed to keep it in place relative to viewport */
    top: 10px;
    left: 10px; /* Positioned on the left side */
    color: #fff;
    font-size: 12px;
    z-index: 20; /* Higher z-index so it's above everything */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

#volumeControl label {
    margin-right: 5px; /* Space between label and slider */
}

#volumeControl input[type="range"] {
    vertical-align: middle; /* Align slider vertically */
    width: 80px; /* Adjust width as needed */
    cursor: pointer;
}

/* Style for the note below the volume slider */
#volumeNote {
    position: fixed; /* Fixed position like the control */
    top: 45px; /* Position slightly below the volume control */
    left: 10px;
    color: #ccc; /* Lighter color for the note */
    font-size: 10px; /* Smaller font size */
    text-align: left; /* Align text to the left */
    z-index: 20; /* Same z-index as volume control */
    width: 150px; /* Give it a width to wrap text */
    pointer-events: none; /* Allow clicks to pass through to elements behind */
}

/* Style for the second note below the volume slider */
#volumeNote2 {
    position: fixed; /* Fixed position */
    top: 70px; /* Position below the first note */
    left: 10px;
    color: #ccc; /* Lighter color */
    font-size: 10px; /* Smaller font size */
    text-align: left; /* Align text to the left */
    z-index: 20; /* Same z-index */
    width: 150px; /* Give it a width to wrap text */
    pointer-events: none; /* Allow clicks to pass through */
}

/* Add Style for Graphics Settings control */
#graphicsControl {
    position: fixed; /* Use fixed to keep it in place relative to viewport */
    top: 115px; /* Position below the volume notes, increased from 100px */
    left: 10px; /* Positioned on the left side */
    color: #fff;
    font-size: 12px;
    z-index: 20; /* Higher z-index so it's above everything */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

#graphicsControl label {
    margin-right: 5px; /* Space between label and select */
}

#graphicsControl select {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

/* Style for coming soon buttons */
.coming-soon {
    /* Dim the button */
    opacity: 0.6;
    cursor: default !important; /* Change cursor */
    background-color: #555 !important; /* Gray background */
    color: #ccc !important; /* Lighter text */
    text-decoration: line-through; /* Add line-through */
}

.coming-soon:hover {
     /* Prevent hover effect or make it subtle */
     background-color: #555 !important;
}

/* Style for the note below the bookshelf button */
#bookshelfNote {
    font-size: 10px; /* Smaller font size */
    color: #ccc; /* Lighter color */
    margin-top: -5px; /* Pull it closer to the button */
    /* Apply some coming-soon styles to the note */
    opacity: 0.8; /* Slightly less dim than the button */
    text-decoration: none; /* No line-through */
}

/* Style for hidden elements */
.hidden {
    display: none;
}

/* Style for Scratch/Wolf Tech Credits */
#credits {
    position: fixed;
    top: 10px;
    right: 10px;
    text-align: right; /* Align text to the right */
    color: #ccc; /* Lighter color */
    font-size: 10px; /* Smaller font size */
    z-index: 20; /* Above canvas, same as volume control */
    pointer-events: none; /* Allow clicks to pass through */
}

#credits p {
    margin: 0; /* Remove default paragraph margins */
    line-height: 1.2; /* Adjust line spacing */
}

/* Style for Loading Disclaimer */
#loadingDisclaimer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #ccc;
    font-size: 10px;
    z-index: 20;
    pointer-events: none;
    text-align: center;
}

#loadingDisclaimer p {
    margin: 0;
}

/* Style for Loading Screen */
#loadingScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 40px;
    border-radius: 15px;
    border: 2px solid #ffcc00;
    z-index: 25; /* Higher than other modals */
    min-width: 300px;
}

#loadingScreen h2 {
    color: #ffcc00;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
}

#loadingProgressContainer {
    width: 250px;
    height: 20px;
    background-color: #333;
    border: 2px solid #fff;
    border-radius: 10px;
    margin: 0 auto 15px auto;
    overflow: hidden;
}

#loadingProgressBar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ffcc00, #ff8800);
    border-radius: 8px;
    transition: width 0.3s ease;
}

#loadingPercentage {
    font-size: 24px;
    font-weight: bold;
    color: #ffcc00;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
}

#loadingStatus {
    font-size: 14px;
    color: #ccc;
    font-family: 'Orbitron', sans-serif;
}

/* Single Player Level Select Screen Styles */
#levelSelectScreen button {
    display: inline-block;
    margin: 0 15px;
    width: 50px;
    height: 50px;
    font-size: 24px;
    line-height: 1;
    vertical-align: middle;
    padding: 0;
    box-sizing: border-box;
}
#levelSelectScreen #levelSelectName {
    display: inline-block;
    font-size: 24px;
    color: #ffcc00;
    font-family: 'Orbitron', sans-serif;
    vertical-align: middle;
    margin: 0 10px;
}
#levelSelectScreen #spLevelSelectBack {
    display: block;
    margin: 20px auto 0 auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #555;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
}
#levelSelectScreen #spLevelSelectBack:hover {
    background-color: #777;
}

/* Multiplayer Level Select Screen Styles */
#multiplayerLevelSelectScreen {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     background-color: rgba(0, 0, 0, 0.8);
     padding: 30px;
     border-radius: 10px;
     border: 2px solid #fff;
     z-index: 15;
}

#multiplayerLevelSelectScreen #mpLevelSelect button {
    display: inline-block;
    margin: 0 15px;
    width: 50px;
    height: 50px;
    font-size: 24px;
    line-height: 1;
    vertical-align: middle;
    padding: 0;
    box-sizing: border-box;
}
#multiplayerLevelSelectScreen #mpLevelSelect #mpLevelSelectName {
    display: inline-block;
    font-size: 24px;
    color: #ffcc00;
    font-family: 'Orbitron', sans-serif;
    vertical-align: middle;
    margin: 0 10px;
}
#multiplayerLevelSelectScreen button#joinLobbyButton {
    margin-top: 20px;
}
#multiplayerLevelSelectScreen button#backToHomeButton {
    display: block;
    margin: 10px auto 0 auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #555;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
}
#multiplayerLevelSelectScreen button#backToHomeButton:hover {
    background-color: #777;
}

/* Multiplayer Lobby Specific Styles */
#multiplayerLobby #lobbyInfo {
    margin-bottom: 20px;
    text-align: left;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
}
#multiplayerLobby #lobbyInfo p,
#multiplayerLobby #lobbyInfo ul {
    margin: 5px 0;
    padding: 0;
}
#multiplayerLobby #lobbyInfo p {
    color: #ccc;
    font-size: 14px;
}
#multiplayerLobby #lobbyInfo #roomIdDisplay,
#multiplayerLobby #lobbyInfo #lobbyLevelDisplay {
    color: #fff;
    font-weight: bold;
}
#multiplayerLobby #lobbyInfo ul {
    list-style: none;
}
#multiplayerLobby #lobbyInfo li {
    margin-bottom: 3px;
    color: #ccc;
    font-size: 14px;
}

/* Progress Bar Styles */
#progressBarContainer {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Adjust width as needed */
    height: 25px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #fff;
    border-radius: 12px;
    overflow: hidden;
    z-index: 10; /* Above canvas, below popups */
}

#progressBarFill {
    height: 100%;
    width: 100%; /* Fill the container visually as players progress */
    background-color: #555; /* Background fill for the whole bar */
    position: absolute;
    top: 0;
    left: 0;
}

#playerMarkers {
    position: relative; /* Position markers relative to this container */
    height: 100%;
    width: 100%; /* Takes full width of container */
}

.player-marker {
    position: absolute;
    top: 0;
    width: 20px; /* Width of the marker */
    height: 100%; /* Takes full height of the bar */
    background-color: rgba(255, 0, 0, 0.8); /* Default marker color (will be overridden) */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: white;
    font-weight: bold;
    /* Use text shadow for readability */
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black;
    border-left: 1px solid rgba(255, 255, 255, 0.5); /* Separator line */
    border-right: 1px solid rgba(255, 255, 255, 0.5); /* Separator line */
    box-sizing: border-box; /* Include border in width */
}

/* Add a simple visual indicator for dead players */
.player-marker.dead {
    background-color: rgba(100, 100, 100, 0.8); /* Grey for dead players */
     text-decoration: line-through; /* Indicate death */
}


/* __DELETE_ME__ */

/* Style for level name text in level select screens */
#levelSelectScreen #levelSelectName,
#multiplayerLevelSelectScreen #mpLevelSelectName {
    display: inline-block;
    font-size: 24px;
    color: #ffcc00;
    font-family: 'Orbitron', sans-serif;
    vertical-align: middle;
    margin: 0 10px;
}

.coming-soon-text {
     opacity: 0.6;
     text-decoration: line-through;
}