body {
    margin: 0;
    overflow: hidden;
    background-color: #87CEEB;
    /* Sky blue fallback */
    font-family: 'Courier New', Courier, monospace;
}

#button-container {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hud-button {
    padding: 8px 14px;
    background: rgba(40, 40, 40, 0.85);
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.hud-button:hover {
    background: rgba(60, 60, 60, 0.9);
}

canvas {
    display: block;
}

/* HUD Layout */
#hud-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: 'Consolas', 'Monaco', monospace;
    pointer-events: none;
    /* Let clicks pass through */
}

#stats-container {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    pointer-events: none;
}

.hud-box {
    background-color: rgba(40, 40, 40, 0.85);
    /* Dark Grey */
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    color: #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.grid-title {
    text-align: center;
    border-bottom: 1px solid #555;
    margin-bottom: 5px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #fff;
}

.control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 15px;
    font-size: 0.9em;
}

.control-grid div:nth-child(odd) {
    color: #aaa;
    text-align: right;
}

.control-grid div:nth-child(even) {
    color: #fff;
    font-weight: bold;
    text-align: left;
}

/* Stats Box */
.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-label {
    width: 95px;
    text-align: right;
    font-weight: bold;
    color: #aaa;
}

.progress-track {
    width: 150px;
    height: 10px;
    background-color: #222;
    border: 1px solid #444;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background-color: #00ff00;
    transition: width 0.1s linear;
}

#speed-bar {
    background-color: #00bcd4;
    /* Cyan */
}

#alt-bar {
    background-color: #ff9800;
    /* Orange */
}

#laser-bar {
    background-color: #e91e63;
    /* Pink/Red */
}

.stat-val {
    width: 80px;
    text-align: left;
    font-family: monospace;
}

/* Minimap Override */
#minimap-container canvas {
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    /* Remove circle if we want box look, or keep? User said "left of mini map" implies distinct boxes. Let's keep circle or square? User said "grid to hold values". Let's make minimap square to match. */
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Bomb Tracker View */
#bomb-tracker {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    top: auto !important;
    right: auto !important;
    width: 320px;
    height: 240px;
    border: 2px solid #ff9800;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    z-index: 100;
    background-color: #000;
    pointer-events: none;
}

#bomb-tracker canvas {
    display: block;
}

#bomb-tracker-label {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(255, 152, 0, 0.9);
    color: #000;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 2px;
    z-index: 101;
    letter-spacing: 1px;
}

/* Loading Assets Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: 'Orbitron', sans-serif;
}

#loading-content {
    text-align: center;
}

#loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid #00ff00;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-text {
    color: #00ff00;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    margin-bottom: 20px;
}

#loading-progress-container {
    width: 300px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
}

#loading-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00ff00, #00cc00);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
    animation: fillProgress 5s ease-out forwards;
}

@keyframes fillProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}