:root {
  color-scheme: dark;
  font-family: "Andika", "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  place-items: center;
  background: #171717;
}

button {
  font: inherit;
}

.game-stage {
  position: relative;
  width: min(100vw, 200vh);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  container-type: inline-size;
  background: #dcecf4;
}

.background,
.media-video,
.home-screen,
.result-screen,
.loading-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.background,
.media-video {
  object-fit: cover;
}

.home-screen,
.result-screen {
  z-index: 1;
}

.loading-screen {
  z-index: 9;
  background: #1f262e;
}

.home-screen[hidden],
.result-screen[hidden],
.media-video[hidden],
.loading-screen[hidden],
.loading-error[hidden],
.loading-retry[hidden] {
  display: none;
}

.loading-art {
  position: absolute;
  top: 45.3472%;
  left: 40.8333%;
  width: 18.3333%;
  height: auto;
  pointer-events: none;
}

.loading-progress-track {
  position: absolute;
  top: 48.6806%;
  left: 42.8472%;
  width: 16.1111%;
  height: 2.5694%;
  overflow: hidden;
  border-radius: 999px;
}

.loading-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #e7fbff 0%, #8fe1ff 42%, #37a9ec 75%, #0a81cc 100%);
  box-shadow: inset 0 0 0.45cqi rgb(255 255 255 / 45%);
  transition: width 160ms ease-out;
}

.loading-percent,
.loading-label,
.loading-error {
  position: absolute;
  margin: 0;
  font-family: Georgia, serif;
  letter-spacing: 0.04em;
  text-align: center;
}

.loading-percent {
  top: 48.8889%;
  left: 60%;
  color: #e4f5ff;
  font-size: 0.8333cqi;
}

.loading-label {
  top: 56.0417%;
  left: 50%;
  color: rgb(228 245 255 / 80%);
  font-size: 0.8333cqi;
  transform: translateX(-50%);
}

.loading-error {
  top: 61%;
  left: 50%;
  width: 60%;
  color: #fff;
  font-family: "Andika", "Trebuchet MS", sans-serif;
  font-size: 0.9cqi;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.loading-retry {
  position: absolute;
  top: 66%;
  left: 50%;
  padding: 0.6cqi 1.6cqi;
  color: #173a54;
  font-weight: 700;
  font-size: 0.9cqi;
  background: #e4f5ff;
  border: 0.12cqi solid #fff;
  border-radius: 999px;
  cursor: pointer;
  transform: translateX(-50%);
}

.loading-retry:focus-visible {
  outline: 0.22cqi solid #fff;
  outline-offset: 0.3cqi;
}

.title-art {
  position: absolute;
  top: 1.5972%;
  left: 36.5625%;
  width: 26.875%;
  height: auto;
  pointer-events: none;
}

.image-button {
  position: absolute;
  z-index: 2;
  display: block;
  width: 23.4028%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.choice-one {
  top: 83.4028%;
  left: 26.4583%;
}

.choice-two {
  top: 83.4028%;
  left: 51.2153%;
}

.button-art {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 120ms ease-out;
}

.button-art-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104.3027%;
  max-width: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.choice-one .button-art-hover,
.choice-two .button-art-hover {
  top: -15.5963%;
  left: -2.1513%;
  transform: none;
}

.image-button:hover .button-art-hover,
.image-button:focus-visible .button-art-hover,
.image-button:active .button-art-hover {
  opacity: 1;
}

.image-button:hover > .button-art:not(.button-art-hover),
.image-button:focus-visible > .button-art:not(.button-art-hover),
.image-button:active > .button-art:not(.button-art-hover) {
  opacity: 0;
}

.image-button:focus-visible {
  outline: 0.22cqi solid #ffffff;
  outline-offset: 0.3cqi;
  border-radius: 1.1cqi;
}

.media-video {
  z-index: 4;
  background: #000;
}

.result-screen {
  z-index: 5;
}

.result-overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 80%);
  backdrop-filter: blur(10.9px);
}

.result-card {
  position: absolute;
  top: 14.375%;
  left: 33.1597%;
  z-index: 1;
  width: 33.6111%;
  height: auto;
}

.try-button,
.continue-button {
  width: 14.375%;
}

.try-button {
  top: 66.5278%;
  left: 42.7778%;
}

.continue-button {
  top: 69.3056%;
  left: 42.7778%;
}

.success-caption {
  position: absolute;
  top: 62.2222%;
  left: 34.6528%;
  z-index: 1;
  width: 30.7292%;
  margin: 0;
  color: #fff;
  font-size: 0.9722cqi;
  line-height: 1.5714;
  text-align: center;
}

.status-message:not(:empty) {
  position: absolute;
  bottom: 2.1%;
  left: 50%;
  z-index: 8;
  width: max-content;
  max-width: 75%;
  margin: 0;
  padding: 0.65cqi 1.1cqi;
  color: #fff;
  font-size: 0.8cqi;
  text-align: center;
  background: rgb(0 0 0 / 78%);
  border-radius: 0.45cqi;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .button-art {
    transition: none;
  }
}