*{box-sizing:border-box}
body{margin:0;background:#111;color:#eee;font-family: 'Courier New', monospace; image-rendering: pixelated;}
#screen{position:relative; width:100vw; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center;}
#game{width:100vw; height:100vh; object-fit:contain; background:#000;}
#hud{position:absolute; top:12px; left:0; right:0; padding:0 20px; pointer-events:none;}
.hud-row{display:flex; align-items:center; gap:10px;}
.name{min-width:120px; font-weight:800; text-shadow:2px 2px 0 #000; letter-spacing:2px}
.name.right{text-align:right}
.bar{flex:1; height:24px; border:3px solid #333; background:#222; box-shadow:0 0 0 2px #000 inset; position:relative; overflow:hidden;}
.fill{height:100%; background:linear-gradient(90deg,#3cff6b,#15b02a); width:100%; transition:width .2s;}
.fill.enemy{background:linear-gradient(90deg,#ff3c57,#b01524);}
.timer{width:80px;text-align:center;font-size:22px;padding:2px 6px;border:3px solid #333;background:#222;box-shadow:0 0 0 2px #000 inset;}
.level{margin-top:8px;text-align:center;font-weight:700;text-shadow:2px 2px 0 #000;letter-spacing:1px}
.status{margin-top:6px;text-align:center;font-weight:800;font-size:20px;color:#ffd54a;text-shadow:3px 3px 0 #000}
#overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.65);}
.hidden{display:none;}
#overlay.hidden{ display:none !important; }
.panel{background:#1c1c1c; border:4px solid #444; padding:24px 28px; border-radius:12px; text-align:center; box-shadow:0 8px 0 #000;}
.title{font-size:44px; letter-spacing:3px; text-shadow:4px 4px 0 #000;}
.controls{opacity:.85; font-size:14px; margin-top:8px;}