/*
 * The `hidden` attribute means display:none in the UA stylesheet, but any `display` rule
 * in this file beats it. `.gate` is display:grid and `#hud` is display:flex, so hiding
 * them did nothing and the start screen stayed painted over the live camera.
 * This cost a bench session to find. Keep it at the top.
 */
[hidden] { display: none !important; }

/* The student runtime. Full-bleed, high contrast, legible through a headset lens. */

.player-body {
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  height: 100dvh;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: #111;
  padding: 1.5rem;
  overflow-y: auto;
}
.gate-inner {
  max-width: 34rem;
}
.gate h1 {
  color: #fff;
}
.gate-meta,
.gate-note,
.gate-access {
  color: #c9c9c9;
}
.gate-note {
  font-size: 0.875rem;
  margin-top: 1.25rem;
}
.gate-access {
  border-left: 3px solid var(--gold);
  padding-left: 0.75rem;
}
.gate-error {
  color: #ff9b94;
  font-weight: 600;
  min-height: 1.4em;
}
.gate-modes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1.25rem 0;
}
.gate-modes button {
  background: transparent;
  border-color: #666;
  color: #ddd;
}
.gate-modes button[aria-pressed='true'] {
  background: var(--gold);
  border-color: var(--gold);
  color: #191919;
}

.hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: max(0.75rem, env(safe-area-inset-top)) 1rem max(0.75rem, env(safe-area-inset-bottom));
  pointer-events: none;
}
.hud > * {
  pointer-events: auto;
}

/*
 * In goggles mode the DOM HUD cannot be shown: one panel across the screen straddles the
 * lens divider, so each eye sees half of it and the two halves cannot be fused. The text is
 * drawn into the scene instead (Scene3D.setHud), once per eye at the same place. The DOM
 * copy stays in the document, visually hidden, so screen readers and the live regions keep
 * working exactly as in flat mode.
 */
.hud.stereo .hud-top,
.hud.stereo .hud-main,
.hud.stereo .say,
.hud.stereo .hud-bottom {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hud-top {
  max-width: 48vw;
  margin-inline: auto;
}

.hud-top {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.hud-top .pill {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}
.hud-top button.small {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.hud-main {
  margin-top: auto;
  background: rgba(0, 0, 0, 0.68);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  max-width: 36rem;
}
.hud-main h2 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  color: var(--gold);
}
.hud-main p {
  margin: 0;
  font-size: 1rem;
}

.say {
  margin: 0.6rem 0;
  min-height: 1.5em;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold);
  text-shadow: 0 1px 4px #000;
}

.hud-bottom {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.sensor-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sensor-button {
  background: var(--gold);
  color: #191919;
  border-color: var(--gold);
  padding: 0.7rem 1.2rem;
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}