* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Orbitron', sans-serif; user-select: none; }
body { background: #1e272e; overflow: hidden; color: #fff; }
#game-container { position: relative; width: 100vw; height: 100vh; }
#game-canvas { display: block; width: 100%; height: 100%; }

#ui-layer {
    position: absolute; top: 20px; left: 20px; right: 20px;
    display: flex; justify-content: space-between; align-items: flex-start;
    pointer-events: none; z-index: 10;
}

.player-hud {
    background: rgba(0,0,0,0.6); padding: 15px; border-radius: 10px;
    border: 3px solid; width: 250px; text-shadow: 0 0 5px #000;
}
.player-name { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; }
.hp-bar-bg { width: 100%; height: 20px; background: rgba(0,0,0,0.8); border-radius: 10px; overflow: hidden; }
.hp-bar { height: 100%; transition: width 0.2s; }

#hud-center { text-align: center; }
#timer { font-size: 3rem; font-weight: 900; color: #fff; text-shadow: 0 0 10px currentColor; }

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 100; text-align: center;
}
.hidden { display: none !important; }

button {
    padding: 15px 40px; font-size: 1.5rem; background: #2ed573; color: #fff; border: none; border-radius: 8px; cursor: pointer; text-transform: uppercase; font-weight: 700; transition: all 0.2s; pointer-events: auto; font-family: 'Orbitron', sans-serif;
}
button:hover { background: #7bed9f; transform: scale(1.05); box-shadow: 0 0 15px #2ed573; }
#start-screen h1 { margin-bottom: 20px; text-shadow: 0 0 20px currentColor; }
#game-over-screen h1 { font-size: 4rem; margin-bottom: 15px; }
#game-over-screen p { font-size: 1.5rem; margin-bottom: 30px; color: #ccc; white-space: pre-line; }