.menu-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 12%, rgba(255, 145, 66, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, #100a06 0%, var(--bg) 70%);
}

/* Author CSS always beats the UA [hidden] rule regardless of specificity —
   without this, `display: flex` above would keep the screen visible even
   with the `hidden` attribute set. */
.menu-screen[hidden] { display: none; }

#mainSettingsScreen { z-index: 55; }

/* --- Main menu: the goggles' boot screen, not a dialog card ------------- */

.hero-screen {
  padding: 40px 24px;
  /* Flat, no gradient — matches the logo video's actual decoded
     background (--bg-video, not --bg) so the clip has no visible edge. */
  background: var(--bg-video);
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  width: min(420px, 100%);
}

.hero-content::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: 140%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 145, 66, 0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero-sub {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--osd-dim);
  margin: -6px 0 0;
  line-height: 1.55;
}

.load-overlay {
  /* Sits beside the setup sidebar, not over it — matches the sidebar's
     own width (see .setup-sidebar below) so the scene fields stay usable
     while a splat loads. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: min(400px, 100vw);
  z-index: 90;
  background: var(--bg-video);
  opacity: 1;
  transition: opacity 0.35s ease;
}
.load-overlay[hidden] { display: none; }
.load-overlay.fade-out { opacity: 0; }

.load-overlay-video,
.load-overlay-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.load-overlay-fallback { display: none; }

.load-spinner {
  /* The video is a flat 16:9 clip scaled to cover the pane, so its
     baked-in caption always sits ~15% of the pane height below center —
     offset from center (not from the video content) so this tracks it
     at any pane size, then nudged further to clear the caption text.
     Positioning lives here, separate from the spin animation below —
     an element can't have a static transform *and* an animated transform
     without one clobbering the other every frame. */
  position: absolute;
  top: calc(50% + 23vh);
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
}

.load-spinner-ring {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: load-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .load-overlay-video { display: none; }
  .load-overlay-fallback { display: block; }
}

@media (max-width: 640px) {
  /* Sidebar goes full-width here too (see .setup-sidebar) — no room
     beside it, so fall back to covering the whole screen. */
  .load-overlay { left: 0; }
}

.load-card {
  position: relative;
  width: min(540px, 92vw);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 30px 30px 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.card-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--accent-border);
  opacity: 0.7;
  pointer-events: none;
}
.card-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: var(--radius); }
.card-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: var(--radius); }
.card-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: var(--radius); }
.card-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: var(--radius); }

.load-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.logo-mark {
  color: var(--accent);
  line-height: 1;
  margin-top: 3px;
  flex-shrink: 0;
}

.brand-logo {
  position: relative;
  width: min(280px, 62vw);
  aspect-ratio: 4.5 / 1;
  overflow: hidden;
}

/* Hero-sized mark for the main-menu title screen */
.brand-logo--hero { width: min(720px, 88vw); }

.brand-logo-video,
.brand-logo-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.brand-logo-fallback { display: none; }

/* The video already ends on a still frame of the logo, matching --bg
   exactly, so it needs no fallback poster swap once playback finishes.
   Reduced-motion users get the static mark instead of the fade-in. */
@media (prefers-reduced-motion: reduce) {
  .brand-logo-video { display: none; }
  .brand-logo-fallback { display: block; }
}

.load-card h1 {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--osd);
}

.load-card .sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--osd-dim);
  margin: 0;
  line-height: 1.55;
}

/* Section heading, reused on the Setup screen (Scene transform / Ground) */
.menu-section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--osd-dim);
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-border);
}

.badge-experimental {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid rgba(255, 201, 77, 0.4);
  border-radius: 4px;
  vertical-align: middle;
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, 100%);
}

.menu-play-btn {
  padding: 18px;
  font-size: 15px;
  letter-spacing: 0.16em;
  border-radius: 8px;
  box-shadow: 0 0 36px rgba(255, 145, 66, 0.32);
}
.menu-play-btn:hover { box-shadow: 0 0 44px rgba(255, 145, 66, 0.44); }

.menu-secondary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-tile {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--osd-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.menu-tile:hover {
  border-color: var(--panel-border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--osd);
}

.menu-tile-icon { font-size: 18px; color: var(--accent); }

/* --- Setup screen: sidebar over the live preview canvas ------------------ */

.setup-screen {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none; /* clicks outside the sidebar reach the preview canvas */
}

.setup-sidebar {
  pointer-events: auto;
  position: absolute;
  inset: 0 auto 0 0;
  width: min(400px, 100vw);
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.setup-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--panel-border);
}

.setup-sidebar-header h1 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--osd);
}

.setup-brand-mark {
  height: 15px;
  width: auto;
  margin-left: auto;
  opacity: 0.5;
  flex-shrink: 0;
}

.setup-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border-strong) transparent;
}
.setup-sidebar-body::-webkit-scrollbar { width: 8px; }
.setup-sidebar-body::-webkit-scrollbar-thumb { background: var(--panel-border-strong); border-radius: 4px; }

.setup-sidebar-footer {
  padding: 16px 18px 20px;
  border-top: 1px solid var(--panel-border);
}
.setup-sidebar-footer .btn { width: 100%; padding: 14px; font-size: 12px; letter-spacing: 0.1em; }
.setup-sidebar-footer .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.drop-zone {
  border: 1.5px dashed var(--panel-border-strong);
  border-radius: 8px;
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--osd-dim);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.drop-zone:hover { border-color: var(--panel-border-strong); background: rgba(255, 255, 255, 0.02); }

.drop-zone.drag {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--osd);
}

.drop-zone strong { color: var(--accent); font-weight: 600; }

.drop-icon { font-size: 20px; opacity: 0.55; }
.drop-formats { font-size: 10px; opacity: 0.6; letter-spacing: 0.04em; }

.url-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

#urlInput {
  flex: 1;
  background: #100b07;
  border: 1px solid var(--panel-border);
  color: var(--osd);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}

#urlInput:focus { border-color: var(--accent-border); }
#urlInput::placeholder { color: var(--osd-faint); }

/* Generic flex button row — used by the calibration wizard overlay */
.demo-row {
  display: flex;
  align-items: center;
  margin-top: 14px;
}

.demo-btn {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 12px;
}

.demo-credit {
  margin: 8px 0 0;
  font-size: 10px;
  opacity: 0.6;
  text-align: center;
}

.demo-credit a {
  color: inherit;
}

.setup-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: var(--osd-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-divider::before,
.setup-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

.load-status {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--warn);
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.load-status.error { color: var(--armed); }

.load-status.busy::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 201, 77, 0.25);
  border-top-color: var(--warn);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

#calWizard {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 6, 0.75);
  backdrop-filter: blur(4px);
}

#calWizard .demo-row { justify-content: flex-end; gap: 8px; }
#calLive { font-size: 10.5px; line-height: 1.6; word-break: break-word; margin: 10px 0 16px; color: var(--osd-dim); }

.cal-steps {
  display: flex;
  gap: 6px;
  margin: -8px 0 18px;
}
.cal-steps .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--panel-border-strong);
}
.cal-steps .dot.done { background: var(--accent); }
.cal-steps .dot.active { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

@media (max-width: 640px) {
  .setup-sidebar { width: 100vw; border-right: none; }
}