body {
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #333;
    font-family: sans-serif;
    user-select: none; /* Prevent text selection on mobile */
    -webkit-user-select: none; /* For Safari */
    -ms-touch-action: manipulation; /* For IE/Edge touch */
    touch-action: manipulation; /* For modern browsers touch */
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute items vertically */
    align-items: center;
    background-color: #000; /* Black background for canvas */
}

#game-info {
    position: absolute; /* Position it above the canvas */
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 20px;
    text-align: left;
    box-sizing: border-box;
    z-index: 10;
    display: flex; /* Use flexbox for game info */
    justify-content: space-between; /* Space out items */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 5px; /* Spacing between info items */
}

#game-info span {
    padding: 0 5px; /* Add some padding to separate */
}

#gameCanvas {
    background-color: #87CEEB; /* Sky blue background */
    display: block; /* Remove extra space below canvas */
    border: 2px solid #555;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    touch-action: none; /* Prevent default touch actions like scrolling/zooming on canvas */
    flex-grow: 1; /* Allow canvas to take available space */
}

/* --- Cockpit Controls Styles --- */
#cockpit-controls {
    width: 100%;
    height: 100px; /* Fixed height for the control panel */
    background: linear-gradient(to bottom, #333 0%, #1a1a1a 100%);
    border-top: 2px solid #555;
    display: flex;
    justify-content: space-around; /* Distribute panels */
    align-items: center;
    padding: 5px 0;
    box-sizing: border-box;
    z-index: 10;
    position: relative; /* Needed for any absolute positioning inside */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.7);
}

.cockpit-panel {
    display: flex;
    flex-direction: column; /* Default for up/down */
    align-items: center;
    justify-content: center;
    gap: 5px; /* Space between buttons within a panel */
    flex: 1; /* Distribute space evenly */
}

#cockpit-center-panel {
    flex-direction: row; /* For left/right buttons */
}

#cockpit-right-panel {
    flex-direction: row; /* For shoot/shop buttons */
    gap: 15px; /* More space for action buttons */
}

.cockpit-control-button {
    background-color: #555; /* Dark grey/metallic look */
    border: 2px solid #888;
    color: #eee;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px; /* Larger font for better touch */
    cursor: pointer;
    border-radius: 10px; /* Rounded corners for a softer look */
    user-select: none;
    -webkit-user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    min-width: 60px;
    min-height: 60px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
}

.cockpit-control-button:active {
    background-color: #777;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
    transform: translateY(1px); /* Slight press effect */
}

/* Specific styles for action buttons */
.shoot-button {
    background-color: #e74c3c; /* Red for fire */
    border-color: #c0392b;
}
.shoot-button:active {
    background-color: #c0392b;
}

.shop-button {
    background-color: #3498db; /* Blue for shop */
    border-color: #2980b9;
    font-size: 18px; /* Smaller font for text + emoji */
    padding: 5px 10px; /* Adjust padding for text */
}
.shop-button:active {
    background-color: #2980b9;
}

.pause-button {
    background-color: #f39c12; /* Orange for pause */
    border-color: #e67e22;
}
.pause-button:active {
    background-color: #e67e22;
}

/* Shop Overlay Styles */
#shop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Ensure it's on top of everything */
}

#shop-content {
    background-color: #1a1a1a; /* Darker to match cockpit */
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto; /* Enable scrolling for many items */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    border: 2px solid #555;
}

#shop-content h2 {
    margin-top: 0;
    color: #e67e22; /* Orange accent */
}

#shop-upgrades, #shop-planes, #shop-maps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.shop-item {
    background-color: #333; /* Slightly lighter blue/grey */
    border: 1px solid #e67e22;
    border-radius: 8px;
    padding: 15px;
    width: 200px; /* Fixed width for items, will wrap */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; /* Center content within item */
}

.shop-item-icon {
    width: 60px; /* Size of the image preview */
    height: 60px;
    object-fit: contain; /* Ensure image scales properly */
    margin: 10px 0; /* Space around the icon */
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background for transparency */
    padding: 5px;
}

.shop-item h3 {
    margin-top: 0;
    color: #f1c40f; /* Yellow accent */
}

.shop-item p {
    margin: 5px 0;
    font-size: 0.9em;
}

/* Common button styles for Buy/Equip */
.buy-button, .equip-button, .plane-action-button, .map-action-button {
    background-color: #27ae60; /* Green buy button */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
    width: 100%; /* Make button fill item width */
    box-sizing: border-box;
}

.buy-button:hover:not(:disabled), .equip-button:hover:not(:disabled), .plane-action-button:hover:not(:disabled), .map-action-button:hover:not(:disabled) {
    background-color: #229954;
}

.buy-button:disabled, .equip-button:disabled, .plane-action-button:disabled, .map-action-button:disabled {
    background-color: #7f8c8d; /* Grey for disabled buttons */
    cursor: not-allowed;
}

.equip-button {
    background-color: #3498db; /* Blue for equip */
}
.equip-button:hover:not(:disabled) {
    background-color: #2980b9;
}

.equipped {
    background-color: #8e44ad; /* Purple for equipped */
    cursor: default !important; /* Override cursor for equipped state */
}

#closeShopButton {
    background-color: #e74c3c; /* Red close button */
    margin-top: 20px;
}

#closeShopButton:active {
    background-color: #c0392b;
}

/* Pause Overlay Styles */
#pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Darker than shop */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 101; /* On top of shop */
}

#pause-content {
    background-color: #2c3e50; /* Dark blue/grey */
    color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 2px solid #3498db; /* Blue border accent */
}

#pause-content h2 {
    margin-top: 0;
    color: #ecf0f1; /* Light grey/white */
    font-size: 2.5em;
}

#settings-section {
    background-color: #34495e; /* Slightly lighter inner section */
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#settings-section h3 {
    margin: 0;
    color: #a2d9ce; /* Teal accent */
    font-size: 1.5em;
}

/* .control-button is used for #closeShopButton, keep its base styles */
.control-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    user-select: none;
    -webkit-user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    flex: 1; /* Allow buttons to grow and shrink */
    min-width: 60px; /* Minimum width for buttons */
    max-width: 20%; /* Limit button width for better distribution */
}

.control-button:active {
    background-color: #45a049;
}

/* Specific styles for pause menu buttons */
#resumeButton {
    background-color: #2ecc71; /* Emerald green */
}
#resumeButton:active {
    background-color: #27ae60;
}

#soundToggleButton {
    background-color: #9b59b6; /* Amethyst purple */
}
#soundToggleButton:active {
    background-color: #8e44ad;
}

#closePauseMenuButton {
    background-color: #e74c3c; /* Alizarin red */
}
#closePauseMenuButton:active {
    background-color: #c0392b;
}

/* Scoreboard Styles */
#scoreboard-overlay {
    position: absolute;
    top: 5px; /* Just below game-info */
    right: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 8px;
    max-height: 50%;
    overflow-y: auto;
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through to canvas */
    max-width: 250px;
}

#scoreboard-overlay h3 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    color: #f1c40f;
    font-size: 1.2em;
}

#scoreboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.scoreboard-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scoreboard-item:last-child {
    border-bottom: none;
}

.scoreboard-item.self {
    background-color: rgba(255, 255, 255, 0.15); /* Highlight current player */
    border-radius: 5px;
    padding: 5px;
    margin: 2px 0;
}

.scoreboard-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #3498db;
}

.scoreboard-username {
    font-weight: bold;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scoreboard-score {
    font-size: 0.9em;
    color: #bdc3c7;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #game-container {
        width: 800px; /* Max width for desktop */
        height: 600px; /* Max height for desktop */
        flex-direction: column;
        justify-content: flex-start; /* Align content to top for desktop */
    }

    #game-info {
        position: static; /* Position normally within the flow on desktop */
        width: auto;
        padding: 5px 10px;
        background: none;
        color: white;
        text-align: center;
        margin-bottom: 10px;
    }

    #gameCanvas {
        width: 800px;
        height: 600px;
        flex-grow: 0;
    }

    #cockpit-controls { /* Targeting new ID */
        position: static; /* Controls below canvas on desktop */
        margin-top: 10px;
        width: auto;
        height: 80px; /* Slightly smaller height on desktop */
        padding: 0;
        background: linear-gradient(to bottom, #333 0%, #1a1a1a 100%);
        flex-wrap: nowrap; /* Prevent wrapping on desktop */
        box-shadow: none; /* No shadow needed for static position */
    }

    .cockpit-control-button { /* Targeting new class */
        padding: 8px;
        font-size: 24px;
        min-width: 50px;
        min-height: 50px;
        margin: 4px;
        border-radius: 8px;
    }
    .shop-button, .pause-button {
        font-size: 16px;
    }

    /* Shop desktop adjustments */
    #shop-content {
        max-width: 700px; /* Wider shop on desktop */
        max-height: 500px;
    }

    .shop-item {
        width: 180px; /* Adjust item width */
    }

    /* Pause menu desktop adjustments */
    #pause-content {
        max-width: 500px;
        padding: 25px;
    }

    .control-button {
        max-width: none; /* Let them expand more */
        font-size: 20px;
    }

    #scoreboard-overlay {
        max-height: 80%; /* More height on desktop */
        max-width: 300px;
    }
}