* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000;
  font-family: -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; user-select: none;
  -webkit-user-select: none; touch-action: none; }
#wrap { position: fixed; inset: 0; }
#view { display: block; width: 100%; height: 100%; background: #111; }

/* HUD */
#hud { position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top,8px) + 8px) 14px 0; }
.hud-left { display: flex; flex-direction: column; gap: 6px; }
.hud-right { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.hbar { position: relative; width: 150px; height: 24px; background: #3a0000;
  border: 2px solid #000; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
#healthFill { height: 100%; width: 100%; background: linear-gradient(180deg,#5dff5d,#19b419); transition: width .15s; }
.hbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 #000; }
#weapon { background: rgba(0,0,0,.6); color: #ffd24d; font-weight: 900; font-size: 14px;
  padding: 3px 10px; border-radius: 6px; border: 1px solid #ffd24d; align-self: flex-start; }
#kills { background: rgba(0,0,0,.6); color: #ff6b6b; font-weight: 900; font-size: 16px;
  padding: 4px 12px; border-radius: 6px; }
#boostTimer { background: rgba(0,80,160,.7); color: #cfe8ff; font-weight: 900; font-size: 14px;
  padding: 3px 10px; border-radius: 6px; }
#boostTimer.hidden { display: none; }

/* Floating joystick */
#joyBase { position: absolute; width: 130px; height: 130px; border-radius: 50%; z-index: 6;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 2px solid rgba(255,255,255,.35); display: none; left: 0; top: 0; pointer-events: none; }
#joyBase.show { display: block; }
#joyKnob { position: absolute; width: 60px; height: 60px; border-radius: 50%; left: 35px; top: 35px;
  background: radial-gradient(circle at 35% 30%, #eee, #888); border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.5); }
#fireBtn { position: absolute; right: 18px; bottom: calc(env(safe-area-inset-bottom,16px) + 22px);
  width: 100px; height: 100px; border-radius: 50%; font-size: 46px; z-index: 6;
  border: 4px solid #fff; background: radial-gradient(circle at 35% 30%, #ff8a3d, #c0252a);
  box-shadow: 0 5px 0 #7d0000; }
#fireBtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #7d0000; }

/* overlays */
.overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(circle at 50% 30%, #5a1010, #1a0505 75%); color: #fff; }
.overlay.hidden { display: none; }
.overlay h1 { font-size: clamp(30px, 9vw, 48px); text-shadow: 0 0 18px rgba(255,60,30,.6), 2px 2px 0 #000; }
.sub { font-size: 16px; opacity: .92; max-width: 340px; line-height: 1.5; }
.howto { display: flex; flex-direction: column; gap: 6px; font-size: 14px;
  background: rgba(0,0,0,.35); padding: 14px 18px; border-radius: 12px; }
.btn { background: #c0252a; color: #fff; border: 3px solid #fff; border-radius: 12px;
  padding: 14px 32px; font-size: 19px; font-weight: 900; cursor: pointer; box-shadow: 0 5px 0 #7d0000; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #7d0000; }
.btn.ghost { background: rgba(255,255,255,.15); box-shadow: 0 4px 0 rgba(0,0,0,.4); border-color: rgba(255,255,255,.5); font-size: 16px; padding: 11px 24px; }
#heroPreview { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; display: none; border: 3px solid #fff; }
#heroPreview.show { display: block; }
.home { color: #fff; opacity: .8; text-decoration: none; font-weight: 800; font-size: 15px; margin-top: 4px; }
#msgFlash { position: absolute; top: 26%; left: 0; right: 0; text-align: center; z-index: 7;
  font-size: 22px; font-weight: 900; color: #ffe35c; text-shadow: 2px 2px 0 #000; pointer-events: none;
  opacity: 0; transition: opacity .2s; }
#msgFlash.show { opacity: 1; }