:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background: #000; }
.page-shell {
  width: 100%; height: 100vh; height: 100dvh;
  display: grid; place-items: center; overflow: hidden; background: #000;
}
.ad-stage {
  position: relative; isolation: isolate; width: 100%; height: 100%;
  overflow: hidden; background: #000;
}
@media (min-width: 768px), (orientation: landscape) {
  .ad-stage { width: min(100%, calc(100vh * 9 / 16)); width: min(100%, calc(100dvh * 9 / 16)); aspect-ratio: 9 / 16; }
}
.ad-video, .ad-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-video { z-index: 1; }
.video-failed .ad-video { visibility: hidden; }
.overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.top-gradient, .bottom-gradient { position: absolute; left: 0; right: 0; pointer-events: none; }
.top-gradient { top: 0; height: 20%; background: linear-gradient(#0004, transparent); }
.bottom-gradient { bottom: 0; height: 23%; background: linear-gradient(transparent, #0005); }
.cta {
  position: absolute; z-index: 20; left: calc(var(--safe-left) + 18px); right: calc(var(--safe-right) + 18px);
  min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 22px; border-radius: 29px; background: #ff2d55; color: #fff;
  text-decoration: none; text-align: center; font-size: 1.25rem; font-weight: 700; line-height: 1.25;
  overflow-wrap: anywhere; box-shadow: 0 3px 16px #0002; -webkit-tap-highlight-color: transparent;
  pointer-events: auto; opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}
.cta.top { top: calc(var(--safe-top) + 18px); }
/* Reserve a separate row below the CTA, including when its text wraps. */
.cta.bottom { bottom: calc(var(--safe-bottom) + 18px + var(--badge-height, 30px) + 16px); }
.cta.is-hidden { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
.cta-arrow { flex: 0 0 auto; }
.cta:active { filter: brightness(.94); }
.cta:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ad-badge {
  position: absolute; z-index: 10; left: calc(var(--safe-left) + 16px); bottom: calc(var(--safe-bottom) + 18px);
  padding: 6px 10px; border-radius: 9px; background: #202020e8; color: #fffffff5;
  font-size: .875rem; font-weight: 500; line-height: 1.25;
}
.ad-badge.is-hidden { visibility: hidden; }
.ad-video.awaiting-playback { cursor: pointer; }
.ad-video:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.debug-panel {
  position: absolute; z-index: 30; left: 12px; right: 12px; top: 32%; max-height: 45%; overflow: auto;
  border: 1px solid #ffffff50; border-radius: 10px; padding: 12px; background: #080808e8; color: #fff;
  font-size: .8125rem;
}
.debug-panel summary { cursor: pointer; }
.debug-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.debug-panel button { padding: 10px; border: 1px solid #ffffff50; border-radius: 6px; background: #222; color: #fff; font: inherit; }
.debug-panel output { display: block; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; transform: none; } }