* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #111; color: #eee; font-family: Arial, "Microsoft YaHei", sans-serif; overflow: hidden; }
#gameWrap { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
canvas { background: #1e2420; width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; image-rendering: crisp-edges; border: 1px solid #333; }
#hud { position: absolute; top: 10px; left: 10px; padding: 10px 12px; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; line-height: 1.8; font-size: 14px; }
#controls { position: absolute; bottom: 14px; left: 14px; display: none; gap: 8px; align-items: center; }
#controls button { min-width: 54px; min-height: 44px; margin: 2px; border: 0; border-radius: 8px; background: rgba(255,255,255,.16); color: #fff; font-size: 16px; }
#shoot, #interact { min-width: 82px !important; }
#overlay { position: absolute; inset: 0; background: rgba(0,0,0,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
#overlay.hidden { display: none; }
#overlay button { padding: 10px 18px; border-radius: 8px; border: 0; font-size: 16px; }
@media (pointer: coarse) { #controls { display: flex; } }