*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
canvas{display:block}

#overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#hud{position:absolute;left:12px;top:12px;color:#cfcfcf;font-family:Arial, sans-serif;font-size:14px;background:rgba(0,0,0,0.25);padding:8px;border-radius:6px;pointer-events:auto}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:28px;color:rgba(255,255,255,0.9);text-shadow:0 0 6px rgba(0,0,0,0.7);pointer-events:none}
#instructions{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(0,0,0,0.25);padding:6px 10px;border-radius:6px;color:#ddd;font-family:Arial;font-size:13px;pointer-events:none}
#death{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);pointer-events:auto}
#deathBox{background:#222;padding:20px;border-radius:8px;color:#fff;text-align:center}
#death.hidden{display:none}
button{cursor:pointer;padding:8px 12px;border-radius:6px;border:0;background:#2b7be3;color:#fff;font-weight:bold}
#crosshair{user-select:none}