html, body {
  margin:0; width:100%; height:100%; overflow:hidden; background:#111; font-family:Arial,sans-serif;
}
canvas { display:block; }
#loading {
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(#111,#252525); color:white; z-index:20; text-align:center;
}
#loading h1 { font-size:clamp(40px,10vw,90px); margin:0 0 8px; letter-spacing:6px; }
#loading button {
  font-size:22px; padding:16px 32px; border:0; border-radius:12px; cursor:pointer; margin-top:20px;
}
.small { opacity:.7; padding:0 20px; }
.hidden { display:none !important; }
#hud { position:fixed; inset:0; pointer-events:none; color:white; z-index:10; }
#topbar {
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  display:flex; gap:40px; align-items:center; padding:10px 18px; border-radius:12px;
  background:rgba(0,0,0,.55); font-size:20px;
}
#timer { font-size:24px; font-weight:bold; }
#status {
  position:absolute; left:14px; top:14px; padding:10px 14px; border-radius:10px;
  background:rgba(0,0,0,.55); line-height:1.5;
}
#crosshair {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:32px; text-shadow:0 0 5px black;
}
#message {
  position:absolute; left:50%; top:22%; transform:translateX(-50%);
  font-size:24px; font-weight:bold; text-shadow:0 2px 6px black; text-align:center;
}
#controls {
  position:absolute; left:14px; bottom:14px; pointer-events:auto; display:none;
}
#controls button {
  min-width:62px; min-height:54px; margin:3px; border:0; border-radius:10px; font-weight:bold;
}
@media (pointer:coarse) {
  #controls { display:block; }
}