:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #fff; background: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100dvh; width: 100vw; overflow: hidden; background: #000; }
a { color: inherit; }
button, input { font: inherit; }
.wag-shell { min-height: 100dvh; height: 100dvh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.wag-image-stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
.wag-hero-picture { position: absolute; inset: 0; display: block; }
.wag-hero-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; background: transparent; }
.wag-choice { position: absolute; top: 0; bottom: 0; width: 50%; height: 100%; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wag-external { left: 0; }
.wag-shop { right: 0; }
.wag-choice:focus-visible { outline: 3px solid white; outline-offset: -6px; }
.wag-choice span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wag-age-panel { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); width: min(620px, calc(100% - 32px)); padding: 18px 22px; border: 1px solid #ffffff38; border-radius: 14px; background: #09070df2; box-shadow: 0 10px 50px #000a; }
.wag-age label { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; }
.wag-age input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; accent-color: #8cfa4f; }
.wag-age-buttons { display: flex; gap: 12px; margin-top: 14px; }
.wag-age-buttons button, .wag-age-buttons a { display: flex; justify-content: center; align-items: center; padding: 13px 16px; border-radius: 7px; border: 1px solid #ffffff40; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.wag-age-buttons button { flex: 1; background: #a1ee76; color: #091206; border-color: #a1ee76; }
.wag-age-buttons a { background: #ffffff0a; }
.wag-age-buttons :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wag-preview-note { position: absolute; bottom: 12px; padding: 12px; background: #000d; font-size: 12px; }
@media (max-aspect-ratio: 1/1) {
  html, body { height: 100dvh; width: 100vw; }
  .wag-shell, .wag-image-stage { height: 100dvh; width: 100vw; }

  .wag-choice { width: 50%; height: 100%; }
  .wag-age-panel { bottom: max(12px, env(safe-area-inset-bottom)); padding: 14px 16px; border-radius: 10px; }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .wag-needs-age { padding-bottom: 145px; }
  .wag-age-panel { padding: 12px 16px; bottom: 8px; }
}

video.wag-hero-image { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
video.wag-hero-image.wag-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { video.wag-hero-image { transition: none; } }

/* Keep the complete composition visible; fill remaining viewport space with the brand background. */
.wag-shell { background: radial-gradient(ellipse at center, #351443 0%, #180c24 65%, #100919 100%); }