:root {
  --transition-speed: 0.5s;
}

body {
  margin: 0;
  min-width: 100dvw;
  min-height: 100dvh;
  overflow: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

page {
  display: block;
  position: relative;
  width: fit-content;
  height: fit-content;
}

video {
  width: 100dvw;
  height: 100dvh;
  object-fit: cover;
  display: block;
}

.hotlinks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hotlink {
  position: absolute;
  width: 1.5%;
  height: 0px;
  padding-top: 1.5%;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.hotlink[data-id="1"] {
  left: 2.4%;
  top: 83.8%;
  width: 7.5%;
  padding-top: 8.5%;
}
.hotlink[data-id="2"] {
  left: 18.7%;
  top: 79.1%;
  width: 12.5%;
  padding-top: 10.5%;
}
.hotlink[data-id="3"] {
  left: 31.1%;
  top: 82.8%;
  width: 8.5%;
  padding-top: 8.5%;
}
.hotlink[data-id="4"] {
  left: 38%;
  top: 76.2%;
  width: 5.5%;
  padding-top: 11.5%;
}
.hotlink[data-id="5"] {
  left: 49.9%;
  top: 80.2%;
  width: 12.5%;
  padding-top: 13.5%;
}
.hotlink[data-id="6"] {
  left: 62.8%;
  top: 82.2%;
  width: 8.5%;
  padding-top: 8.5%;
}
.hotlink[data-id="7"] {
  left: 74%;
  top: 79.9%;
  width: 7.5%;
  padding-top: 12.5%;
}
.hotlink[data-id="8"] {
  left: 86.5%;
  top: 78%;
  width: 10.5%;
  padding-top: 7.5%;
}
.hotlink[data-id="9"] {
  left: 94.4%;
  top: 70%;
  width: 6.5%;
  padding-top: 13.5%;
}
.hotlink[data-id="10-3"] {
  left: 61.6%;
  top: 41.6%;
  width: 3.5%;
  padding-top: 3.5%;
}
.hotlink[data-id="10-1"] {
  left: 63.6%;
  top: 48.6%;
  width: 4.5%;
  padding-top: 4.5%;
}
.hotlink[data-id="10-2"] {
  left: 68.8%;
  top: 47.6%;
  width: 4.5%;
  padding-top: 4.5%;
}

.hotlink[data-id="11"] {
  left: 95.6%;
  top: 85.6%;
  width: 9%;
  padding-top: 6%;
}

.hotlink[data-id="10-1"],
.hotlink[data-id="10-2"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed) ease;
}

body:has(.callouts .callout[data-for="10"].active) .hotlinks .hotlink[data-id="10-1"],
body:has(.callouts .callout[data-for="10"].active) .hotlinks .hotlink[data-id="10-2"] {
  opacity: 1;
  pointer-events: auto;
}

.callouts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.callout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
  pointer-events: none;
}

.callout img {
  width: 100%;
  object-fit: contain;
}

.callout.active {
  opacity: 1;
}

.callout[data-for="1"] {
  top: 47%;
  left: 4%;
  width: 35%;
  transform: rotateZ(-5deg);
  transform-origin: 0% 100%;
}
.callout[data-for="9"] {
  top: 40%;
  left: 63%;
  width: 32%;
  transform: rotateZ(0deg);
  transform-origin: 0% 100%;
}
.callout[data-for="11"] {
  top: 37%;
  left: 73%;
  width: 24%;
  transform: rotateZ(0deg);
  transform-origin: 0% 100%;
}
.callout[data-for="8"] {
  top: 50%;
  left: 50%;
  width: 57%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-5deg);
  transform-origin: 50% 50%;
}

.callout[data-for="6"] {
  top: 50%;
  left: 50%;
  width: 52%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-5deg);
  transform-origin: 50% 50%;
}

.callout[data-for="7"] {
  top: 50%;
  left: 50%;
  width: 47%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-5deg);
  transform-origin: 50% 50%;
}

.callout[data-for="5"] {
  top: 50%;
  left: 50%;
  width: 76%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-5deg);
  transform-origin: 50% 50%;
}

.callout[data-for="4"] {
  top: 50%;
  left: 50%;
  width: 79%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-5deg);
  transform-origin: 50% 50%;
}

.callout[data-for="3"] {
  top: 50%;
  left: 50%;
  width: 59%;
  transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.callout[data-for="10"] {
  top: 50%;
  left: 50%;
  width: 56%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-5deg);
  transform-origin: 50% 50%;
}

.callout[data-for="10-3"] {
  top: 12%;
  left: 62%;
  width: 35%;
  transform: rotateZ(0deg);
  transform-origin: 0% 100%;
}

.age-verification-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 998;
  pointer-events: all;
}

body:has(.callout[data-for="10"].active) .age-verification-overlay {
  display: block;
}

/* Ensure age callout and its hotlinks are above the overlay */
body:has(.callout[data-for="10"].active) .callout[data-for="10"] {
  z-index: 999;
  pointer-events: all;
}

body:has(.callout[data-for="10"].active) .hotlink[data-id="10-1"],
body:has(.callout[data-for="10"].active) .hotlink[data-id="10-2"] {
  z-index: 1000;
  pointer-events: all;
}

/* Force other elements below the overlay */
body:has(.callout[data-for="10"].active) .hotlinks .hotlink:not([data-id="10-1"]):not([data-id="10-2"]),
body:has(.callout[data-for="10"].active) .callout:not([data-for="10"]) {
  z-index: 997;
}

.rotate-device-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.rotate-device-message img {
  max-width: 70%;
  height: auto;
}

/* Only show rotation message and hide content in portrait mode on mobile */
@media (max-width: 480px) and (orientation: portrait) {
  page {
    display: none;
  }
  
  .rotate-device-message {
    display: flex;
  }
}