:root {
  --violet: #2b145f;
  --violet-bright: #55308f;
  --plum: #210e4d;
  --yellow: #ffd12b;
  --ink: #281058;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  align-items: center;
  background: #e6f1f7;
  display: flex;
  font-family: "DM Sans", sans-serif;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

.quiz-shell {
  aspect-ratio: 9 / 16;
  background:
    radial-gradient(circle at 87% 20%, rgba(119, 79, 180, .58) 0 7%, transparent 32%),
    linear-gradient(150deg, var(--plum) 0%, var(--violet) 49%, #3c1c7b 100%);
  container-type: inline-size;
  color: var(--white);
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  min-height: 600px;
  overflow: hidden;
  padding: clamp(28px, 5.2vh, 100px) clamp(26px, 5vw, 96px) clamp(24px, 4vh, 74px);
  position: relative;
  width: min(100vw, 56.25vh);
}

.topbar, .home-content, .bottom-area, .screen { position: relative; z-index: 2; }
.screen { display: flex; flex: 1; flex-direction: column; }
.topbar { align-items: flex-start; display: flex; justify-content: space-between; }

.brand { display: inline-flex; line-height: 1; text-decoration: none; width: clamp(150px, 18cqw, 240px); }
.brand img { display: block; height: auto; width: 100%; }
.brand-name { font-family: "Outfit", sans-serif; font-size: clamp(32px, 6cqw, 66px); font-weight: 800; letter-spacing: 0; }
.brand sup { font-size: 11px; font-weight: 700; margin: 4px 0 0 3px; }
.brand-rule { background: var(--yellow); height: 3px; margin: 7px 0 6px; width: 100%; }
.brand-tagline { font-size: 8px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.edition { border: 1px solid rgba(255,255,255,.48); font-size: 9px; letter-spacing: 1.15px; padding: 8px 9px; }

@media (max-width: 767px) { .brand { width: 108px; } }

.home-content { margin-top: clamp(55px, 11vh, 205px); }
.eyebrow { align-items: center; display: flex; font-size: clamp(9px, 1.4cqw, 15px); font-weight: 700; gap: 9px; letter-spacing: 1.25px; }
.eyebrow span { background: var(--yellow); border-radius: 50%; height: 8px; width: 8px; }
h1 { font-family: "Outfit", sans-serif; font-size: clamp(42px, 11cqw, 117px); font-weight: 700; letter-spacing: 0; line-height: .98; margin: 18px 0 26px; }
h1 em { color: var(--yellow); font-style: normal; }
.intro { font-size: clamp(14px, 3cqw, 28px); line-height: 1.4; margin: 0; max-width: 390px; }
.home-action { margin-top: clamp(42px, 8vh, 150px); max-width: 430px; }
.home-action > span { color: rgba(255, 255, 255, .77); display: block; font-size: clamp(10px, 1.65cqw, 17px); font-weight: 700; letter-spacing: 1px; margin-bottom: 13px; text-transform: uppercase; }
.home-action .start-button { animation: action-arrival .6s .15s both; border: 2px solid var(--white); box-shadow: 0 10px 0 #d7cdec, 0 0 0 8px rgba(255, 255, 255, .12); }

.orbit { animation: orbit-float 5s ease-in-out infinite; height: clamp(180px, 24vh, 460px); margin: clamp(15px, 3vh, 55px) auto 0; position: relative; width: clamp(180px, 24vh, 460px); }
.orbit::before, .orbit::after { border: clamp(4px, .65cqw, 8px) solid rgba(255, 255, 255, .9); border-radius: 50%; content: ""; inset: 12%; position: absolute; }
.orbit::before { animation: orbit-spin 12s linear infinite; transform: rotate(34deg) scaleY(.56); }
.orbit::after { animation: orbit-spin-reverse 16s linear infinite; border-color: rgba(255, 255, 255, .36); transform: rotate(-36deg) scaleY(.72); }
.orbit-line { border: clamp(4px, .65cqw, 8px) solid rgba(255, 255, 255, .62); border-radius: 50%; height: 76%; left: 12%; position: absolute; top: 12%; transform: rotate(90deg) scaleY(.48); width: 76%; }
.orbit-center { align-items: center; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 clamp(10px, 1.6cqw, 18px) rgba(255, 209, 43, .12); display: flex; height: 30%; justify-content: center; left: 35%; position: absolute; top: 35%; width: 30%; z-index: 2; }
.orbit-center span { color: var(--violet); font-family: "Outfit", sans-serif; font-size: clamp(45px, 6vw, 92px); font-weight: 600; line-height: 1; }
.orbit-dot { background: var(--white); border: 2px solid rgba(43, 20, 95, .18); border-radius: 50%; box-shadow: 0 3px 8px rgba(16, 5, 45, .24); height: 8%; position: absolute; width: 8%; z-index: 3; }
.dot-one { animation: dot-pulse 2.8s ease-in-out infinite; left: 21%; top: 14%; }.dot-two { animation: dot-pulse 2.8s .7s ease-in-out infinite; right: 15%; top: 40%; }.dot-three { animation: dot-pulse 2.8s 1.4s ease-in-out infinite; bottom: 18%; left: 31%; }

@keyframes action-arrival { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.bottom-area { margin-top: auto; }
.start-button { align-items: center; background: var(--white); border: 0; box-shadow: 0 8px 0 #d7cdec; color: var(--ink); cursor: pointer; display: flex; font-family: "Outfit", sans-serif; font-size: clamp(14px, 3cqw, 25px); font-weight: 700; justify-content: space-between; letter-spacing: .9px; padding: clamp(18px, 2.4vh, 42px) clamp(19px, 4cqw, 42px); transition: transform .2s ease, box-shadow .2s ease; width: 100%; }
.start-button:hover { box-shadow: 0 4px 0 #d7cdec; transform: translateY(4px); }.start-button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.arrow { font-family: sans-serif; font-size: 1.5em; font-weight: 400; }
.disclaimer { color: rgba(255,255,255,.75); font-size: clamp(8px, .85vw, 13px); line-height: 1.35; margin: 20px auto 0; max-width: 350px; text-align: center; }

.question-screen { margin-top: clamp(36px, 7vh, 130px); }
.progress { font-size: clamp(9px, 1.45cqw, 15px); font-weight: 700; letter-spacing: 1px; }
.progress-track { background: rgba(255, 255, 255, .25); height: 5px; margin-top: 12px; overflow: hidden; width: 100%; }
.progress-track i { background: var(--yellow); display: block; height: 100%; transition: width .3s ease; }
.question-number { color: var(--yellow); font-family: "Outfit", sans-serif; font-size: clamp(48px, 12cqw, 125px); font-weight: 800; line-height: 1; margin-top: clamp(26px, 4vh, 70px); }
.question-screen h1 { font-size: clamp(28px, 6.7cqw, 70px); line-height: 1.04; margin: 14px 0 clamp(28px, 4vh, 62px); }
.options { display: grid; gap: clamp(11px, 1.4vh, 20px); }
.option { align-items: center; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .43); color: var(--white); cursor: pointer; display: flex; font: 700 clamp(16px, 3.3cqw, 34px) "DM Sans", sans-serif; gap: clamp(15px, 2.5cqw, 28px); min-height: clamp(64px, 9vh, 134px); padding: 15px; text-align: left; transition: background .2s ease, border-color .2s ease, transform .2s ease; width: 100%; }
.option:hover { background: rgba(255, 255, 255, .18); }
.option.selected { background: var(--white); border-color: var(--white); color: var(--ink); transform: translateX(6px); }
.option:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.option b { align-items: center; background: rgba(255, 255, 255, .2); border-radius: 50%; display: flex; font-family: "Outfit", sans-serif; font-size: .8em; height: clamp(32px, 5cqw, 52px); justify-content: center; width: clamp(32px, 5cqw, 52px); }
.option.selected b { background: var(--yellow); }
.confirm-button:disabled { background: rgba(255, 255, 255, .26); box-shadow: none; color: rgba(255, 255, 255, .55); cursor: not-allowed; transform: none; }

.feedback-screen { margin-top: clamp(50px, 10vh, 180px); }
.feedback-icon { align-items: center; background: var(--yellow); border: 8px solid rgba(255,255,255,.9); border-radius: 50%; color: var(--violet); display: flex; font-family: "Outfit", sans-serif; font-size: clamp(50px, 10cqw, 110px); font-weight: 800; height: clamp(115px, 21cqw, 210px); justify-content: center; margin-bottom: clamp(28px, 5vh, 70px); width: clamp(115px, 21cqw, 210px); }
.feedback-screen.incorrect .feedback-icon { background: var(--white); }
.feedback-screen h1 { font-size: clamp(42px, 10cqw, 105px); margin: 15px 0 19px; }
.feedback-copy { font-size: clamp(17px, 3.4cqw, 34px); line-height: 1.35; margin: 0; }
.claim { border-left: 4px solid var(--yellow); margin-top: clamp(28px, 4vh, 55px); padding-left: 16px; }
.claim span { color: var(--yellow); display: block; font-size: clamp(9px, 1.5cqw, 15px); font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; }
.claim strong { font-family: "Outfit", sans-serif; font-size: clamp(19px, 4.2cqw, 40px); line-height: 1.05; }
.claim p, .references { font-size: clamp(10px, 1.65cqw, 16px); line-height: 1.35; margin: 12px 0 0; }
.references { color: rgba(255,255,255,.72); }
.final-screen { margin-top: clamp(80px, 16vh, 300px); }
.final-sparkles { color: var(--yellow); font-family: "Outfit", sans-serif; font-size: clamp(35px, 7cqw, 75px); letter-spacing: 15px; margin-bottom: clamp(35px, 6vh, 95px); }
.final-sparkles span { color: var(--white); }
.final-screen h1 { margin-bottom: 24px; }

.sun-ray { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; height: 700px; position: absolute; width: 700px; }.ray-one { right: -490px; top: 120px; }.ray-two { bottom: -500px; left: -490px; }
.next-screen-message { background: var(--yellow); bottom: 0; color: var(--ink); font-weight: 700; left: 0; padding: 22px; position: absolute; text-align: center; transform: translateY(100%); transition: transform .35s ease; width: 100%; z-index: 5; }.next-screen-message.visible { transform: translateY(0); }

@media (max-aspect-ratio: 9 / 16) { .quiz-shell { min-height: 100vh; width: 100vw; } }

@media (min-width: 768px) and (min-height: 700px) and (orientation: landscape) {
  body { background: var(--plum); }
  .quiz-shell { aspect-ratio: auto; height: 100vh; max-height: none; min-height: 700px; padding: clamp(32px, 5vh, 68px) clamp(58px, 8vw, 132px) clamp(28px, 4vh, 52px); width: 100vw; }
  .topbar { width: min(100%, 1180px); }
  .screen { margin: 0 auto; max-width: 1180px; width: 100%; }
  .home-content { margin-top: clamp(30px, 7vh, 78px); max-width: 660px; }
  h1 { font-size: clamp(52px, 5vw, 86px); }
  .intro { font-size: clamp(16px, 1.7vw, 23px); max-width: 500px; }
  .home-action { margin-top: clamp(28px, 5vh, 52px); }
  .bottom-area { margin-left: auto; margin-right: auto; max-width: 1180px; width: 100%; }
  .start-button { font-size: clamp(16px, 1.5vw, 22px); max-width: 520px; padding: clamp(18px, 2.4vh, 28px) clamp(22px, 2.8vw, 38px); }
  .disclaimer { margin-left: 0; text-align: left; }
  .question-screen { margin-top: clamp(24px, 5vh, 58px); max-width: 950px; }
  .question-number { font-size: clamp(60px, 7vw, 96px); margin-top: 22px; }
  .question-screen h1 { font-size: clamp(30px, 3.4vw, 52px); margin: 8px 0 22px; max-width: 900px; }
  .options { grid-template-columns: repeat(3, 1fr); }
  .option { font-size: clamp(17px, 1.7vw, 25px); min-height: 100px; }
  .option.selected { transform: translateY(-5px); }
  .feedback-screen { margin-top: clamp(30px, 7vh, 82px); max-width: 750px; }
  .feedback-icon { height: 120px; margin-bottom: 24px; width: 120px; }
  .feedback-screen h1 { font-size: clamp(48px, 5vw, 72px); }
  .feedback-copy { font-size: clamp(18px, 2vw, 28px); }
  .final-screen { margin-top: clamp(50px, 11vh, 130px); max-width: 750px; }
}

@media (min-width: 768px) and (orientation: portrait) {
  body { background: var(--plum); }
  .quiz-shell { aspect-ratio: auto; max-height: none; min-height: 100svh; padding-left: clamp(48px, 7vw, 88px); padding-right: clamp(48px, 7vw, 88px); width: 100vw; }
  .brand { width: 190px; }
  .edition { font-size: 11px; }
  .question-screen h1 { font-size: clamp(34px, 5.8cqw, 60px); }
  .option { min-height: clamp(76px, 8vh, 110px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-action .start-button { animation: none; }
}

@media (max-height: 950px) and (min-aspect-ratio: 9 / 16) {
  .quiz-shell { min-height: 0; }
  .home-content { margin-top: 44px; }
  h1 { font-size: 48px; margin: 12px 0 16px; }
  .intro { font-size: 14px; line-height: 1.32; }
  .home-action { margin-top: 28px; }
  .disclaimer { margin-top: 14px; }
  .question-screen { margin-top: 25px; }
  .question-number { font-size: 44px; margin-top: 20px; }
  .question-screen h1 { font-size: 27px; margin: 8px 0 18px; }
  .option { font-size: 15px; min-height: 55px; }
  .feedback-screen { margin-top: 28px; }
  .feedback-icon { height: 75px; margin-bottom: 18px; width: 75px; }
  .feedback-screen h1 { font-size: 38px; margin: 8px 0; }
  .feedback-copy { font-size: 15px; }
  .claim { margin-top: 18px; }
  .final-screen { margin-top: 48px; }
  .final-sparkles { margin-bottom: 30px; }
}