* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: #291619; display: grid; place-items: center; font-family: var(--ubuntu); color: white; touch-action: manipulation; user-select: none; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, [tabindex="0"]:focus-visible, input:focus-visible { outline: 4px solid #251507; outline-offset: 5px; }
h1:focus, h2:focus { outline: none; }
button:disabled { cursor: default; }
#circle { --diameter: 96vmin; width: var(--diameter); height: var(--diameter); container-type: inline-size; position: relative; border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 30% 20%, #eb5040, #d43f39 65%, #bd3430); box-shadow: inset 0 .15cqw .4cqw #fff2bf35, inset 0 -1cqw 3cqw #84260315, 0 0 0 1px #ffb6a140, 0 0 90px #0005; }
.sun-texture { position: absolute; inset: 0; opacity: .065; background: url(../brand/marca.png) no-repeat 95% 24% / 72%; pointer-events: none; }
.identity { position: absolute; top: 8.5%; left: 23%; width: 54%; display: flex; align-items: center; justify-content: space-between; gap: 5%; z-index: 3; }
.identity img { width: 36%; height: auto; }
.identity > span { font-size: 1.25cqw; line-height: 1.6; letter-spacing: .1em; max-width: 44%; }
.identity b { display: block; font-size: 2.2cqw; letter-spacing: .2em; }
.screen { position: absolute; inset: 0; text-align: center; }
.eyebrow { position: absolute; top: 17.5%; left: 17%; width: 66%; margin: 0; font-size: 1.25cqw; font-weight: 700; letter-spacing: .19em; }
h1 { position: absolute; top: 20%; width: 100%; margin: 0; font-size: 8.3cqw; letter-spacing: -.055em; line-height: 1.1; }
h1 em { font-family: var(--lora); font-weight: 500; }
.subtitle { position: absolute; top: 30%; left: 15%; width: 70%; margin: 0; font-family: var(--lora); font-size: 2cqw; }
.dori-note { position: absolute; left: 20%; top: 65%; width: 60%; padding: 1.2cqw 2cqw; border-radius: 1.8cqw; background: linear-gradient(145deg, #fffcf3, #fff0d5); color: var(--tinta); font-family: var(--lora); font-size: 1.75cqw; line-height: 1.4; box-shadow: inset 0 1px #fff, 0 .6cqw 0 #b44f1826, 0 1.2cqw 2.6cqw #6420051a; }
.dori-note b { font-family: var(--ubuntu); font-size: 2.2cqw; }
.dori-note p { margin: .65cqw 0 0; }
.primary { border: 0; border-radius: 99px; background: linear-gradient(175deg, #ffe776, var(--amarillo) 60%, #f6c92f); color: var(--tinta); min-height: 6.4cqw; padding: 1.5cqw 3.4cqw; font-weight: 700; font-size: 2.15cqw; box-shadow: inset 0 .2cqw .15cqw #fff5b4b3, 0 .45cqw 0 #b86c0c, 0 1cqw 1.8cqw #68230033; transition: box-shadow .15s, transform .15s; }
.primary span { margin-left: 2cqw; }
.primary:active { transform: translateY(.25cqw); box-shadow: inset 0 .1cqw .15cqw #fff5b480, 0 .15cqw 0 #b86c0c, 0 .5cqw 1cqw #68230026; }
.welcome-start { position: absolute; top: 81%; left: 28%; width: 44%; }
.welcome-footnote { position: absolute; top: 89%; width: 100%; font-size: 1.2cqw; margin: 0; }
#wheel-host { position: absolute; left: 44%; top: 32.5%; width: 34%; height: 34%; touch-action: none; z-index: 2; cursor: grab; }
#wheel-host:active { cursor: grabbing; }
#wheel-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#circle[data-screen="spinning"] #wheel-host { left: 19%; top: 26%; width: 62%; height: 62%; }
#spin-title { position: absolute; top: 21%; left: 15%; width: 70%; margin: 0; font-size: 4.3cqw; letter-spacing: -.03em; }
.spin-status { position: absolute; top: 86%; width: 100%; margin: 0; font-family: var(--lora); font-size: 2.1cqw; }
.category { position: absolute; top: 21%; left: 17%; width: 66%; margin: 0; font-size: 2.2cqw; color: var(--amarillo); font-weight: 700; }
#question-title { position: absolute; top: 27%; left: 18%; width: 64%; height: 11%; display: grid; place-items: center; margin: 0; font-size: 3.3cqw; line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
.question-instruction { position: absolute; top: 39%; width: 100%; margin: 0; font-family: var(--lora); font-size: 1.65cqw; }
.options { position: absolute; top: 44%; left: 18%; width: 64%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw; }
.option { display: flex; align-items: center; gap: 1.2cqw; min-height: 8.2cqw; border-radius: 1.6cqw; border: .22cqw solid #fff7e6; background: linear-gradient(145deg, #fffdf6, #fff0d8); color: var(--tinta); text-align: left; padding: 1.2cqw 1.6cqw; font-size: 1.95cqw; font-weight: 500; line-height: 1.25; box-shadow: inset 0 1px #fff, 0 .4cqw 0 #b14e1738, 0 .7cqw 1.6cqw #6823001a; }
.option .letter { display: grid; place-items: center; flex: none; width: 3.3cqw; height: 3.3cqw; border: 1px solid #ddc9b3; border-radius: 50%; font-size: 1.45cqw; background: #e8d2ab18; box-shadow: inset 0 .1cqw .25cqw #75441b14, 0 1px #fff; }
.option.wrong { background: #ffe4d2; border-color: #742606; }
.option.wrong .letter { border: 0; }
.option.correct { background: #e5f7d8; border-color: #386117; }
.option:disabled:not(.correct):not(.wrong) { opacity: .7; }
.feedback { position: absolute; top: 67%; left: 20%; width: 60%; font-family: var(--lora); font-size: 1.85cqw; line-height: 1.4; }
.feedback:not(:empty) { background: linear-gradient(145deg, #fffcf3, #fff0d5); color: var(--tinta); border-radius: 1.6cqw; padding: 1.2cqw 1.8cqw; box-shadow: inset 0 1px #fff, 0 .6cqw 1.8cqw #6823001a; }
.feedback b { display: block; font-family: var(--ubuntu); margin-bottom: .6cqw; font-size: 2.2cqw; }
#stamp { position: absolute; top: 80%; left: 27%; width: 46%; }
#complete .eyebrow { font-size: 1.15cqw; }
.seal { position: absolute; top: 23%; left: 41.5%; width: 17%; height: 17%; border-radius: 50%; border: .3cqw dashed #ffdf43; color: #ffdf43; display: flex; flex-direction: column; justify-content: center; gap: .3cqw; transform: rotate(-12deg); font-size: 1.55cqw; font-weight: 700; letter-spacing: .15em; }
.seal > span { font-size: 4cqw; line-height: 1; }
.seal small { font-size: .95cqw; }
#complete-title { position: absolute; top: 43%; left: 18%; width: 64%; margin: 0; font-size: 5.2cqw; line-height: 1.12; letter-spacing: -.035em; }
.stamp-invitation { position: absolute; top: 59%; left: 24%; width: 52%; font-family: var(--lora); font-size: 2.3cqw; line-height: 1.5; margin: 0; }
#again { position: absolute; top: 82%; left: 31%; width: 38%; }
.return-note { position: absolute; top: 90%; width: 100%; margin: 0; font-size: 1.15cqw; }
.progress { position: absolute; top: 90%; left: 30%; width: 40%; display: flex; justify-content: space-between; align-items: center; font-size: 1.55cqw; line-height: 1.3; }
.progress b { font-weight: 700; }
#hearts { color: var(--amarillo); letter-spacing: .15em; }
#circle[data-outcome="lost"] .seal { color: #fff4dc; border-color: #fff4dc; }
footer { position: absolute; bottom: 4%; left: 30%; width: 40%; text-align: center; font-size: 1cqw; opacity: .85; }
footer span { margin-left: 1cqw; }
#operator-access { position: absolute; top: 10%; left: 46%; width: 8%; height: 6%; padding: 0; color: white; background: transparent; border: 0; font-size: 2.5cqw; opacity: .65; z-index: 4; touch-action: none; }
#calibration-guide { display: none; position: absolute; inset: 1%; border: 2px dashed #ffdf43; border-radius: 50%; pointer-events: none; z-index: 5; }
#calibration-guide::before, #calibration-guide::after { content: ''; position: absolute; background: #ffdf4380; }
#calibration-guide::before { top: 50%; width: 100%; height: 1px; }
#calibration-guide::after { left: 50%; height: 100%; width: 1px; }
#calibration-guide span { position: absolute; top: 3%; width: 100%; text-align: center; font-size: 1.25cqw; }
#circle.calibrating #calibration-guide { display: block; }
dialog { --d: 96vmin; position: fixed; width: calc(var(--d) * .62); max-width: none; max-height: calc(var(--d) * .66); padding: calc(var(--d) * .035); border: 0; border-radius: calc(var(--d) * .025); color: var(--tinta); background: #fff8eb; font-size: calc(var(--d) * .019); box-shadow: 0 1cqw 5cqw #0004; }
dialog::backdrop { background: #231108b8; }
dialog h2 { font-size: calc(var(--d) * .029); margin: 0 0 calc(var(--d) * .015); }
dialog p { line-height: 1.45; }
dialog button, dialog .primary, dialog .secondary { font-size: calc(var(--d) * .019); min-height: calc(var(--d) * .058); padding: calc(var(--d) * .013) calc(var(--d) * .02); }
.operator-note { font-size: calc(var(--d) * .016); min-height: 1em; margin: calc(var(--d) * .012) 0; }
.sound-row { display: flex; justify-content: space-between; align-items: center; margin: calc(var(--d) * .02) 0; }
#sound { width: calc(var(--d) * .035); height: calc(var(--d) * .035); accent-color: #a93d00; }
.calibration-label { display: flex; justify-content: space-between; }
#diameter { width: 100%; height: calc(var(--d) * .04); accent-color: #a93d00; margin: calc(var(--d) * .012) 0; }
.secondary { border: 1px solid #b54a14; border-radius: 99px; color: #8f3509; background: transparent; font-weight: 500; }
.operator-actions { display: flex; gap: calc(var(--d) * .012); margin-top: calc(var(--d) * .02); }
.operator-actions > * { flex: 1; }
#idle { text-align: center; }
#confetti { position: absolute; inset: 18% 15%; pointer-events: none; overflow: hidden; }
#confetti i { position: absolute; left: var(--x); top: -5%; width: 1cqw; height: 2cqw; background: var(--color); animation: celebrate 2.5s ease-out forwards; animation-delay: var(--delay); }
@keyframes celebrate { to { transform: translateY(65cqw) rotate(540deg); opacity: 0; } }
@media (hover: hover) { .primary:hover { filter: brightness(1.04); } .option:enabled:hover { border-color: #ffdf43; background: #fff7db; } }
@media (prefers-reduced-motion: reduce) { #confetti { display: none; } *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 550px), (max-height: 550px) {
  .eyebrow { font-size: 1.55cqw; }
  .identity > span { font-size: 1.5cqw; }
  .subtitle { font-size: 2.4cqw; }
  .dori-note { font-size: 2.35cqw; top: 64%; }
  .primary { font-size: 2.7cqw; min-height: 9cqw; }
  .welcome-start { top: 81%; }
  .welcome-footnote { top: 91%; font-size: 1.5cqw; }
  #question-title { top: 25%; left: 16%; width: 68%; height: 14%; font-size: 3.2cqw; }
  .question-instruction { top: 40%; font-size: 2.1cqw; }
  .option { font-size: 2.5cqw; min-height: 7.5cqw; padding: 1.1cqw 1.6cqw; }
  .options { top: 43%; grid-template-columns: 1fr; gap: 1cqw; }
  .feedback { top: 70%; left: 17%; width: 66%; font-size: 2.2cqw; }
  .feedback b { font-size: 2.3cqw; }
  #stamp { top: 83%; font-size: 2.5cqw; }
  #again { top: 81%; }
  .return-note { top: 91%; font-size: 1.5cqw; }
  .progress { top: 92.5%; left: 31%; width: 38%; font-size: 1.6cqw; }
  footer { font-size: 1.25cqw; }
}