html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #000; color: #eee;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
}
canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; outline: none;
}

#overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #2a0f0a 0%, #000 75%);
  z-index: 10;
}
#overlay[hidden] { display: none; }
.card { width: min(92vw, 420px); text-align: center; padding: 24px; }
.card h1 { font-size: 28px; letter-spacing: 4px; color: #d94a36; margin: 0 0 16px; font-weight: 800; }
.card p { margin: 8px 0; }
.detail { font-size: 12px; opacity: .6; min-height: 1.2em; }
.hint { font-size: 12px; opacity: .7; margin-top: 16px; line-height: 1.5; }
.bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin: 12px 0; }
#progress { height: 100%; width: 0; background: #d94a36; transition: width .15s linear; }
#play {
  margin-top: 12px; padding: 14px 40px; font-size: 18px; font-weight: 800; letter-spacing: 3px;
  border: 0; border-radius: 8px; background: #d94a36; color: #fff; cursor: pointer;
}
#play:active { background: #b53826; }
#play[hidden] { display: none; }

/* touch controls */
#touch { position: absolute; inset: 0; z-index: 5; }
#touch[hidden] { display: none; }
#stick-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; }
#look-zone  { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; }
#stick {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25);
  display: none; transform: translate(-50%, -50%); pointer-events: none;
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.35); transform: translate(-50%, -50%);
}
.btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 800; letter-spacing: 1px; color: rgba(255,255,255,.85);
  background: rgba(217,74,54,.35); border: 2px solid rgba(255,255,255,.3);
  width: 84px; height: 84px; font-size: 14px;
}
.btn.active { background: rgba(217,74,54,.8); }
.btn.small { width: 60px; height: 60px; font-size: 12px; background: rgba(255,255,255,.12); }
.btn.tiny  { width: 44px; height: 44px; font-size: 11px; background: rgba(255,255,255,.12); border-radius: 8px; }
#btn-fire   { right: calc(24px + env(safe-area-inset-right)); bottom: calc(60px + env(safe-area-inset-bottom)); }
#btn-jump   { right: calc(130px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); }
#btn-weapon { right: calc(130px + env(safe-area-inset-right)); bottom: calc(110px + env(safe-area-inset-bottom)); }
#btn-score  { left: calc(16px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); }
#btn-menu   { right: calc(16px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); }