:root {
  --fg: #ffffff;
  --fg-dim: #cfd3dd;
  --bg: #05070b;

  /* Palette */
  --brand-orange: #f29846;   /* Start button */
  --btn-grey:     #d6d8de;   /* Mute/Restart */
  --accent-border: rgba(214, 216, 222, 0.45);
  --accent-fill:   rgba(214, 216, 222, 0.12);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Futura, "Futura PT", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#app { position: relative; height: 100vh; width: 100vw; overflow: hidden; }

/* Dual-video stage — subtle crossfade */
#video-stage { position: absolute; inset: 0; }
#video-stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: black;
  opacity: 0;
  transition: opacity 220ms ease-in-out;
  will-change: opacity;
}
#video-stage video.active { opacity: 1; }

/* Overlay (arrows) */
#overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 24px; pointer-events: none;
}
#overlay .choices {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6vh;
}
#overlay .label {
  margin-right: 12px;
  font-weight: 700;
  color: var(--fg-dim);
  opacity: 0.95;
}
.key {
  border: 1px solid var(--accent-border);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--fg);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.key.selected {
  border-color: var(--btn-grey);
  box-shadow: 0 0 0 2px var(--accent-border);
  background: var(--accent-fill);
}
.hidden { display: none; }

/* HUD — controls left, status right (consistent across hero/experience) */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  pointer-events: none;
}
#hud .controls { display: flex; gap: 8px; pointer-events: auto; order: 0; }
#status         { font-size: 0.9rem; color: var(--fg-dim); pointer-events: auto; order: 1; }

/* Buttons */
#hud button, .start-btn {
  border: none; padding: 10px 16px; border-radius: 12px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
}
.start-btn { background: var(--brand-orange); color: #19130f; }
#hud button  { background: var(--btn-grey);     color: #111; }
#hud button:hover, .start-btn:hover { filter: brightness(0.93); }

/* Loading overlay */
.loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,0.92);
  color: var(--fg-dim);
  font-size: 1.1rem; letter-spacing: 0.02em;
}
.loading.hidden { display: none; }

/* Hero / start screen */
.hero {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(1200px 800px at 50% 30%, rgba(214,216,222,0.08), rgba(5,7,11,0.98));
  padding: 24px;
}
.hero.hidden { display: none; }
.hero-inner {
  max-width: 980px; width: 90%;
  display: grid; gap: 20px; justify-items: center; text-align: center;
}
#hero-image {
  width: 100%; max-width: 640px; height: auto;
  border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.hero-text h1 { margin: 10px 0 0; font-size: 2.2rem; font-weight: 800; color: var(--fg); }
.hero-text h2 { margin: 6px 0 8px; font-size: 1.2rem; font-weight: 700; color: var(--fg-dim); }
.hero-text p  { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--fg-dim); }
.start-btn { margin-top: 12px; }
.hero-hint { margin-top: 6px; font-size: 0.95rem; color: var(--fg-dim); }