/* ===== Daily Yu Man — gecompileerd uit style.scss ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100vh;
}

body {
  font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
  background:
    radial-gradient(120% 60% at 50% 50%, rgba(1, 9, 18, 0) 0%, rgba(1, 9, 18, 0.9) 100%),
    #010810;
  color: #ffffff;
  overflow-x: hidden;
}

/* ===== Gedeelde decoratieve achtergrond (achter alle schermen) ===== */
.deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.deco-img {
  position: absolute;
  opacity: 0.6;
  object-fit: cover;
}
.deco-img--tr {
  top: -4%;
  right: -8%;
  width: 49vw;
  max-width: 940px;
  transform: rotate(23.5deg);
}
.deco-img--bl {
  bottom: -6%;
  left: -8%;
  width: 30vw;
  max-width: 567px;
  transform: rotate(91.35deg) scaleY(-1);
}

.deco-path {
  position: absolute;
  opacity: 0.6;
  width: 38vw;
  max-width: 800px;
}
.deco-path--tr {
  top: -18%;
  right: -6%;
  transform: rotate(-55deg) scaleX(-1);
}
.deco-path--bl {
  bottom: -10%;
  left: -12%;
  transform: rotate(160deg) scaleX(-1);
}

/* ===== Schermen ===== */
.screen {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen.hidden {
  display: none;
}

.screen-title {
  font-family: 'Josefin Sans', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.125;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}

/* ===== Welkom scherm ===== */
.welcome-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -4vh;
}

.logo {
  position: relative;
  width: 241px;
  height: 241px;
  margin-bottom: 8px;
}
.logo img {
  position: absolute;
  display: block;
}
/* SVG's gebruiken preserveAspectRatio="none", dus expliciete breedte én hoogte */
.logo .logo-mark {
  top: 13.46%;
  left: 6.26%;
  width: 87.48%;
  height: 56.08%;
}
.logo .logo-banner {
  top: 74.69%;
  left: 6.26%;
  width: 87.48%;
  height: 11.85%;
}
.logo .logo-text {
  top: 77.67%;
  left: 21.32%;
  width: 57.36%;
  height: 5.42%;
}

.welcome-lead {
  font-size: 28px;
  line-height: 32px;
  color: #ffffff;
}
.welcome-lead:last-of-type {
  margin-bottom: 64px;
}

.welcome-triangle {
  position: absolute;
  bottom: 3.7%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  z-index: 1;
}

/* ===== CTA-knop (gedeeld) ===== */
.cta-button {
  background: #ff5c27;
  color: #ffffff;
  border: none;
  padding: 16px 32px 12px;
  font-family: 'Josefin Sans', 'Trebuchet MS', sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cta-button:hover {
  background: #ff6f40;
  transform: translateY(-2px);
}
.cta-button:active {
  transform: translateY(0);
}
.cta-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.cta-button--sm {
  padding: 12px 24px 8px;
  font-size: 18px;
  line-height: 24px;
}

/* ===== Rad scherm ===== */
.wheel-screen {
  gap: 24px;
  padding: 32px 16px;
}
.wheel-screen .screen-title {
  margin-bottom: 8px;
}

.wheel-stage {
  position: relative;
  width: 728px;
  height: 728px;
}

.wheel-img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 4.5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  will-change: transform;
}

.wheel-pointer-img {
  position: absolute;
  top: -5.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 10.3%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19.4%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* ===== Oefening / resultaat scherm ===== */
.result-screen {
  gap: 28px;
  padding: 32px 24px;
}
.result-screen .screen-title {
  font-size: 48px;
}

.video-frame {
  width: 100%;
  max-width: 880px;
}

.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.result-footer {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.result-triangle {
  width: 72px;
  height: 72px;
  justify-self: center;
}

.media-controls {
  display: flex;
  gap: 12px;
  justify-self: end;
}

.media-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.media-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .screen-title {
    font-size: 36px;
  }

  .logo {
    width: 180px;
    height: 180px;
  }

  .welcome-lead {
    font-size: 20px;
    line-height: 26px;
    padding: 0 1.5rem;
  }
  .welcome-lead:last-of-type {
    margin-bottom: 40px;
  }

  .cta-button {
    font-size: 20px;
    padding: 14px 28px 10px;
  }

  .welcome-triangle {
    width: 80px;
    height: 80px;
  }

  .wheel-stage {
    width: 88vw;
    height: 88vw;
    max-width: 420px;
    max-height: 420px;
  }

  .result-screen .screen-title {
    font-size: 30px;
  }

  .result-footer {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .result-triangle {
    width: 48px;
    height: 48px;
  }

  .media-btn {
    width: 38px;
    height: 38px;
  }
}