/* Pro intro: robust, accessible, minimal */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000;
  color: #e6e6e6;
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #000;
  isolation: isolate;
}

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}
.stage.ready .stage__video { opacity: 1; }
.stage.exit .stage__video { opacity: 0; }

.hud {
  position: absolute;
  top: clamp(12px, 2vh, 20px);
  right: clamp(12px, 2vh, 20px);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.btn {
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
  padding: .6rem 1rem;
  border: 1px solid #4a4a4a;
  background: rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(6px);
  color: #f0f0f0;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, background .2s ease, opacity .2s ease;
}
.btn:hover { background: rgba(0,0,0,.6); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn--primary { border-color: #19f3; }
.btn--ghost { border-color: #8885; color: #ddd; }

.tapstart {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

/* Respect reduced motion: add a little note off-screen for screen readers */
@media (prefers-reduced-motion: reduce) {
  .stage__video { animation: none !important; }
}