html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
canvas { display: block; width: 100vw; height: 100vh; }
#video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); z-index: 10;
}
#overlay.hidden { display: none; }
.card { text-align: center; padding: 2rem 2.5rem; border-radius: 16px; background: rgba(20,20,24,.9); }
.card h1 { margin: 0 0 .5rem; font-weight: 600; }
.card .hint { opacity: .6; font-size: .85rem; margin-top: 1rem; }
#start {
  font-size: 1.3rem; padding: .8rem 2.2rem; border: 0; border-radius: 999px;
  background: #2f7cf6; color: #fff; cursor: pointer;
}
#start:disabled { opacity: .5; }

#hud {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; z-index: 5; pointer-events: none; font-size: .8rem;
}
#hud > * { pointer-events: auto; }
#badge { color: #888; font-size: 1.1rem; }
#badge.live { color: #e33; }
#stats { opacity: .7; flex: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000; }
#gyro {
  font-size: 1.3rem; background: rgba(0,0,0,.5); border: 1px solid #555; border-radius: 8px;
  padding: 4px 10px; color: #fff;
}
#gyro.on { border-color: #2f7cf6; background: rgba(47,124,246,.4); }
/* Il VRButton di three.js e' position:absolute: lo riportiamo nel flusso dell'HUD */
#xr-slot button { position: static !important; transform: none !important; }