:root {
--bg: #1a1a2e;
--p1: #44e055;
--p2: #e04444;
--fg: #f0f0f0;
--accent: #ffcc00;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%;
background: var(--bg);
overflow: hidden;
font-family: 'Courier New', monospace;
color: var(--fg);
}
canvas {
display: block;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
image-rendering: pixelated;
}
#hud {
position: fixed;
top: 0; left: 0; width: 100%;
padding: 8px 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
pointer-events: none;
z-index: 10;
font-size: 14px;
text-shadow: 2px 2px 0 #000;
}
.hud-left, .hud-right {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 160px;
}
.hud-right { align-items: flex-end; }
.label { font-size: 18px; font-weight: bold; }
.hud-left .label { color: var(--p1); }
.hud-right .label { color: var(--p2); }
.score { font-size: 28px; font-weight: bold; }
.health-bar {
width: 120px; height: 12px;
border: 2px solid #555;
background: #222;
}
.health-fill {
height: 100%;
transition: width 0.2s;
}
.hud-left .health-fill { background: var(--p1); }
.hud-right .health-fill { background: var(--p2); }
.flag-status { font-size: 12px; color: var(--accent); }
.hud-center { text-align: center; flex: 1; }
.status { font-size: 22px; font-weight: bold; color: var(--accent); margin-bottom: 4px; }
.controls { font-size: 12px; opacity: 0.8; }
@media (max-width: 800px) {
.hud-left, .hud-right { min-width: 100px; }
.score { font-size: 20px; }
.status { font-size: 16px; }
.controls { font-size: 10px; }
}