/* lh-player.css - broadcast page styling for lonehollow.org */
:root { color-scheme: dark; }
html, body { margin: 0; background: #000; }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}

.lh-wrap { max-width: 1280px; margin: 0 auto; }

/* 16:9 stage. aspect-ratio with a padding-top fallback for older browsers. */
.lh-stage { position: relative; width: 100%; background: #000; overflow: hidden; }
@supports not (aspect-ratio: 16 / 9) {
  .lh-stage::before { content: ""; display: block; padding-top: 56.25%; }
  .lh-stage > video { position: absolute; inset: 0; }
}
@supports (aspect-ratio: 16 / 9) { .lh-stage { aspect-ratio: 16 / 9; } }

.lh-stage > video {
  width: 100%; height: 100%; display: block;
  background: #000 center/contain no-repeat;
  object-fit: contain;
}

/* Overlays */
.lh-overlay {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  text-align: center; padding: 24px;
  background: rgba(0, 0, 0, .62);
}
.lh-overlay[data-show="1"] { display: flex; }
.lh-overlay p { margin: 0; max-width: 34em; }
.lh-title { font-size: 1.15rem; font-weight: 600; }
.lh-sub { opacity: .8; font-size: .95rem; }

.lh-btn {
  appearance: none; border: 0; border-radius: 999px; cursor: pointer;
  padding: 13px 26px; font: inherit; font-weight: 600;
  background: #fff; color: #000;
  min-height: 44px;                      /* comfortable touch target */
}
.lh-btn:focus-visible { outline: 3px solid #6cf; outline-offset: 3px; }

/* "Tap for sound" sits bottom-left so it never covers the control bar's centre */
.lh-unmute {
  position: absolute; left: 12px; bottom: 58px; display: none;
  align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .78); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 11px 18px; font: inherit; font-weight: 600; min-height: 44px;
}
.lh-unmute[data-show="1"] { display: inline-flex; }
.lh-unmute:focus-visible { outline: 3px solid #6cf; outline-offset: 3px; }

/* Spinner */
.lh-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: lh-spin 1s linear infinite;
}
@keyframes lh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lh-spinner { animation-duration: 2.5s; }
}

.lh-note { padding: 14px 16px; text-align: center; font-size: .92rem; opacity: .75; }
.lh-note a { color: #6cf; }