:root {
  --bg: #05050b;
  --cyan: #22d3ee;
  --yellow: #fde047;
  --pink: #f72585;
  --orange: #ff7a3d;
  --violet: #9b5cff;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  background:
    radial-gradient(circle at 50% 8%, rgba(89, 18, 77, 0.22), transparent 28%),
    radial-gradient(circle at 10% 32%, rgba(34, 211, 238, 0.08), transparent 24%),
    radial-gradient(circle at 88% 36%, rgba(247, 37, 133, 0.09), transparent 26%),
    var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  isolation: isolate;
}

.stage {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.4vw, 24px);
}

.hidden { display: none; }

.contact-toggle,
.contact-close {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
}

.starfield::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.05), transparent 22%),
    radial-gradient(circle at 50% 68%, rgba(255, 122, 61, 0.08), transparent 38%),
    radial-gradient(circle at 18% 24%, rgba(34, 211, 238, 0.08), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(247, 37, 133, 0.08), transparent 28%);
}

.star-layer {
  position: absolute;
  inset: -26vmax;
  transform-origin: 50% 50%;
  animation: hyperspace 9.5s linear infinite;
  will-change: transform, opacity;
}

.star-layer .star {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.92;
  box-shadow: 0 0 0.45rem currentColor;
}

.star-layer.layer-1 { animation-delay: 0s; }
.star-layer.layer-2 { animation-delay: -1.9s; }
.star-layer.layer-3 { animation-delay: -3.8s; }
.star-layer.layer-4 { animation-delay: -5.7s; }
.star-layer.layer-5 { animation-delay: -7.6s; }
.star-layer.layer-1 {
  animation-name: hyperspaceSoftStart;
  animation-duration: 8.8s;
}

.poster {
  position: relative;
  height: min(100%, calc(100vw * 1.5));
  width: min(100%, calc(100dvh / 1.5));
  aspect-ratio: 2 / 3;
  filter: drop-shadow(0 0 28px rgba(34, 211, 238, 0.22)) drop-shadow(0 18px 50px rgba(0, 0, 0, 0.75));
  user-select: none;
}

.contact-toggle {
  position: fixed;
  left: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 8;
  width: clamp(34px, 4vw, 44px);
  height: clamp(34px, 4vw, 44px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 24, 0.84);
  color: var(--yellow);
  border: 2px solid rgba(34, 211, 238, 0.72);
  box-shadow: 0 0 0 1px rgba(6, 8, 14, 0.3), 0 0 1.2rem rgba(34, 211, 238, 0.2);
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 900;
  line-height: 1;
}

.contact-toggle:hover,
.contact-toggle:focus-visible {
  transform: translateY(-1px);
  background: rgba(14, 22, 38, 0.95);
  box-shadow: 0 0 0 1px rgba(6, 8, 14, 0.3), 0 0 1.4rem rgba(253, 224, 71, 0.24);
  outline: none;
}

.contact-panel {
  position: fixed;
  left: clamp(14px, 2vw, 24px);
  bottom: clamp(62px, 7vw, 78px);
  z-index: 8;
  min-width: min(88vw, 320px);
  padding: 16px 48px 16px 16px;
  border-radius: 18px;
  background: rgba(7, 11, 20, 0.92);
  border: 1px solid rgba(34, 211, 238, 0.34);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.38), 0 0 2rem rgba(34, 211, 238, 0.12);
  color: #f8fbff;
  backdrop-filter: blur(16px);
}

.contact-panel p {
  margin: 0;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.45;
}

.contact-panel a {
  color: var(--cyan);
  font-weight: 700;
  text-decoration: none;
}

.contact-panel a:hover,
.contact-panel a:focus-visible {
  color: var(--yellow);
  outline: none;
}

.contact-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fbff;
  font-size: 20px;
  line-height: 1;
}

.contact-close:hover,
.contact-close:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hotspot {
  position: absolute;
  display: block;
  z-index: 4;
}

.checkbox-zone {
  left: 10.7%;
  top: 79.75%;
  width: 40.5%;
  height: 4.7%;
  cursor: pointer;
}

.checkbox-zone input {
  position: absolute;
  left: 0;
  top: 8%;
  width: 12.8%;
  height: 78%;
  opacity: 0;
  cursor: pointer;
}

.fake-check {
  position: absolute;
  left: 1.05%;
  top: 3%;
  width: 11.8%;
  height: 85%;
  display: grid;
  place-items: center;
  font-size: clamp(12px, 2.5vw, 32px);
  font-weight: 1000;
  line-height: 1;
  color: #061014;
  opacity: 0;
  pointer-events: none;
  text-shadow: 1px 1px 0 #ffe88a;
}

.checkbox-zone input:checked + .fake-check { opacity: 1; }

.download-zone {
  left: 10.6%;
  top: 84.25%;
  width: 37.4%;
  height: 10.8%;
  border-radius: 1.2vw;
}

.download-zone:not(.disabled) {
  cursor: pointer;
}

.download-zone:not(.disabled):focus-visible,
.download-zone:not(.disabled):hover {
  outline: min(0.6vw, 6px) solid rgba(34, 211, 238, 0.8);
  outline-offset: min(0.45vw, 5px);
  background: rgba(34, 211, 238, 0.08);
}

.download-zone.disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

.download-zone.disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.18);
}

.donate-zone {
  left: 60.9%;
  top: 90.75%;
  width: 25%;
  height: 6.1%;
  border-radius: 1vw;
}

.donate-zone:focus-visible,
.donate-zone:hover {
  outline: min(0.55vw, 6px) solid rgba(253, 224, 71, 0.92);
  outline-offset: min(0.35vw, 4px);
  background: rgba(253, 224, 71, 0.08);
}

.robot-gate {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  place-items: center;
  background: #fff;
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
}

.robot-gate.done { display: none; }

.captcha-card {
  width: min(92vw, 430px);
  height: 118px;
  display: grid;
  grid-template-columns: 54px 1fr 92px;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background: #fafafa;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  cursor: pointer;
}

.captcha-box-wrap {
  position: relative;
  width: 36px;
  height: 36px;
}

.captcha-box-wrap input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.captcha-box {
  position: absolute;
  inset: 0;
  border: 3px solid #b7b7b7;
  border-radius: 3px;
  background: #fff;
}

.captcha-spinner {
  position: absolute;
  inset: -2px;
  border: 4px solid #d7d7d7;
  border-top-color: #4285f4;
  border-radius: 50%;
  opacity: 0;
  animation: spin 0.75s linear infinite;
}

.robot-gate.loading .captcha-box { opacity: 0; }
.robot-gate.loading .captcha-spinner { opacity: 1; }

.captcha-text {
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1;
  white-space: nowrap;
  margin-left: -25px;
}

.captcha-brand {
  justify-self: end;
  text-align: center;
  color: #777;
  line-height: 1.1;
}

.captcha-logo {
  display: block;
  font-size: 38px;
  color: #4285f4;
  font-weight: 700;
}

.captcha-name {
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.captcha-links {
  display: block;
  font-size: 9px;
  margin-top: 4px;
}

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

@keyframes hyperspace {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.12);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(2.6);
  }
}

@keyframes hyperspaceSoftStart {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.34);
  }
  18% {
    opacity: 0.06;
  }
  38% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(2.35);
  }
}

@media (max-aspect-ratio: 2 / 3) {
  .stage { padding: 0; }
  .poster {
    width: 100vw;
    height: 150vw;
  }

  .contact-panel {
    min-width: min(92vw, 320px);
    bottom: clamp(58px, 10vw, 74px);
  }

  .star-layer {
    inset: -34vmax;
  }
}

@media (min-aspect-ratio: 2 / 3) {
  .poster {
    height: 100dvh;
    width: calc(100dvh / 1.5);
  }
}