/* Phone-first. The whole audience is holding a phone in a dark room, so this
 * is dark by default rather than theme-aware — a white flash in a blacked-out
 * arena is a genuine annoyance, and there is no second context to serve. */

:root {
  --bg:      #08090c;
  --fg:      #f2f3f5;
  --dim:     #8b8f98;
  --line:    #1e2027;
  --accent:  #00a9e0;   /* Movistar blue — placeholder until brand assets land */
  --warn:    #e0a800;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;   /* no pull-to-refresh mid-stream */
  /* The layout is sized to the viewport, so any scroll is a bug rather than
   * content. Landscape phones overflowed by 136px before this. */
  overflow: hidden;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  /* dvh, not vh or %: on a phone the URL bar makes 100vh taller than what you
   * can actually see, which pushes the transport off the bottom. Falls back to
   * 100% where dvh is unsupported. */
  height: 100%;
  height: 100dvh;
  /* Respect the notch and the home indicator; the transport must not sit under
   * either on the phones this actually ships to. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* --- bar ----------------------------------------------------------------- */

#bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: .02em;
}

#brand { color: var(--dim); }
#brand b { color: var(--fg); font-weight: 600; }

#count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;   /* no width jitter as the count ticks */
  color: var(--fg);
}

#count .dim { color: var(--dim); }

#count-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --- stage --------------------------------------------------------------- */

#stage {
  position: relative;
  flex: 1;
  display: flex;
  /* stretch, not centre: the player must be free to take the full height of
   * the stage, which is what makes `fill` work. Centring collapses it back to
   * its content height. */
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

#stage[aria-hidden="true"] { visibility: hidden; }

.video-js {
  width: 100%;
  height: 100%;
  background: #000;
}

/* --- immersive view ------------------------------------------------------ */

.arena-sphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  cursor: grab;
  /* Without this the browser claims the drag for scrolling and panning the
   * view fights the page on every phone. */
  touch-action: none;
}

.arena-sphere.grabbing { cursor: grabbing; }

/* The <video> is the texture source and must keep decoding, so it is hidden
 * with opacity rather than `display:none` — several browsers stop decoding a
 * display:none video, which would freeze the texture on the last frame. */
.arena-immersive .vjs-tech { opacity: 0; }
.arena-immersive .vjs-poster { display: none; }

/* video.js chrome sits above the canvas; the canvas covers the whole player,
 * so anything the user needs to click has to outrank it. */
.arena-immersive .vjs-control-bar,
.arena-immersive .vjs-big-play-button,
.arena-immersive .vjs-modal-dialog,
.arena-immersive .vjs-loading-spinner { z-index: 2; }

/* --- look controls ------------------------------------------------------- */

#look {
  position: absolute;
  z-index: 3;
  right: 16px;
  /* Clear of the video.js control bar, which owns the bottom of the player. */
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#look[hidden] { display: none; }

#look button {
  width: 44px;               /* thumb-sized: tapped one-handed, in a crowd */
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(8, 9, 12, .62);
  backdrop-filter: blur(6px);
  color: var(--fg);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

#look button:active { background: rgba(8, 9, 12, .85); }

#look button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- gate ---------------------------------------------------------------- */

#gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: var(--bg);
}

#gate[hidden] { display: none; }

#gate-inner {
  max-width: 34ch;
  text-align: center;
}

#gate-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--accent);
}

#gate[data-kind="full"]   #gate-icon { color: var(--warn); }
#gate[data-kind="failed"] #gate-icon { color: var(--warn); }

#gate-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
}

#gate-body {
  margin: 0;
  color: var(--dim);
  font-size: 14px;
}

#gate-retry {
  margin-top: 22px;
  /* 44px minimum: this is tapped by someone standing in a crowd, possibly
   * one-handed, possibly annoyed. */
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

#gate-retry:active { background: var(--line); }

.spinner {
  display: inline-block;
  width: 26px; height: 26px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner  { animation-duration: 2.4s; }
  #count-dot { animation: none; }
}

/* --- onboarding ---------------------------------------------------------- */

#onboard {
  position: absolute;
  inset: 0;
  z-index: 30;               /* above the admission gate, which runs after it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  /* The keyboard shrinks the viewport on a phone; let the panel scroll rather
   * than trapping the submit button under the keyboard. */
  overflow-y: auto;
}

#onboard[hidden] { display: none; }

#onboard-panel { width: 100%; max-width: 34ch; }

.step[hidden] { display: none; }

.step h1 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.step > p {
  margin: 0 0 20px;
  color: var(--dim);
  font-size: 14px;
}

.step .hint { font-size: 13px; }

#email-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101218;
  color: var(--fg);
  /* 16px minimum: iOS Safari zooms the whole page when focusing an input with
   * a smaller font, and never zooms back out. */
  font-size: 16px;
}

#email-input:focus { outline: none; border-color: var(--accent); }
#email-input.bad   { border-color: var(--warn); }

#email-consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 4px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.4;
}

#email-consent {
  flex: none;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

#email-consent-row a { color: var(--dim); }

#email-error {
  margin: 10px 0 0;
  color: var(--warn);
  font-size: 13px;
}

#email-error[hidden] { display: none; }

.step button:not(.link) {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #04222c;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.step button:not(.link):disabled { opacity: .45; cursor: default; }
.step button:not(.link):active:not(:disabled) { filter: brightness(1.1); }

.step .link {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* --- degraded ------------------------------------------------------------ */

#degraded {
  margin: 0;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--line);
  color: var(--dim);
  font-size: 12px;
  text-align: center;
}

#degraded[hidden] { display: none; }