:root {
  --qa-bg: #0a0a0a;
  --qa-ink: #f5f0ea;
  --qa-muted: #a39a90;
  --qa-accent: #e61d2b;
  --qa-accent-2: #c4a574;
  --qa-panel: rgb(18 12 12 / 0.92);
  --qa-line: rgb(245 240 234 / 0.18);
  --qa-ok: #1f7a4d;
  --qa-bad: #ff8d8d;
  --qa-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: clamp(13px, min(3.525vw, 1.65dvh), 3.525vw);
}

html:not(.is-lang-ready) .qa-stage,
html:not(.is-lang-ready) .qa-legal {
  visibility: hidden;
}

html,
body {
  min-height: 100%;
  background: var(--qa-bg);
  color: var(--qa-ink);
  font-family: Alata, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html.is-away .qa-glow,
html.is-away .qa-ticket-box {
  animation-play-state: paused;
}

body.qa-page {
  font-size: 1rem;
  min-height: 100dvh;
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.qa-legal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  margin: 0;
  padding: 0.55rem 1.1rem calc(0.55rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--qa-muted) 92%, transparent);
  pointer-events: none;
}

.qa-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 48% at 50% -12%, color-mix(in srgb, var(--qa-accent) 28%, transparent), color-mix(in srgb, var(--qa-accent) 10%, transparent) 28%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in srgb, var(--qa-accent-2) 12%, transparent), transparent 50%),
    var(--qa-bg);
}

.qa-glow {
  position: absolute;
  width: 105vh;
  height: 105vh;
  left: 50%;
  top: -18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 32%,
    color-mix(in srgb, var(--qa-accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--qa-accent) 14%, transparent) 38%,
    color-mix(in srgb, var(--qa-accent) 6%, transparent) 58%,
    transparent 74%
  );
  filter: blur(72px);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 82%);
  animation: qa-pulse 5.5s var(--qa-ease) infinite alternate;
}

.qa-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.qa-coke,
.qa-oreo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.qa-oreo-splash {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.qa-stage {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

.qa-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 1.2rem 8vw 1.6rem;
  padding-left: max(8vw, 1.2rem, env(safe-area-inset-left) + 1rem);
  padding-right: max(8vw, 1.2rem, env(safe-area-inset-right) + 1rem);
  padding-bottom: max(2.8rem, calc(env(safe-area-inset-bottom) + 2.4rem));
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.qa-layer.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0s;
}

.qa-layer.is-on .qa-stack,
.qa-layer.is-on .qa-play {
  animation: qa-fade-up 0.55s var(--qa-ease) both;
}

.qa-stack,
.qa-play {
  width: 100%;
  max-width: 26rem;
  min-width: 0;
}

.qa-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.qa-popup {
  width: 100%;
  padding: 1.5rem 1.3rem 1.25rem;
  border: 0.055rem solid var(--qa-line);
  border-radius: 0.4rem;
  background: var(--qa-panel);
  box-shadow: 0 22px 40px rgb(42 12 18 / 0.12);
  backdrop-filter: blur(16px);
}

.qa-logo {
  display: block;
  width: 100%;
  height: auto;
}

.qa-brand {
  position: relative;
  display: block;
  width: 13.5rem;
  max-width: 100%;
}

.qa-reg {
  position: absolute;
  top: -0.12em;
  right: -0.62em;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.78;
  pointer-events: none;
}

.qa-wordmark {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.qa-kicker {
  margin: 0 0 0.35rem;
  color: var(--qa-accent);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.qa-kicker[hidden],
.qa-copy-wrap[hidden],
.qa-prize-ref[hidden] {
  display: none;
}

.qa-title {
  margin: 0 0 0.5rem;
  max-width: none;
  font-size: 1.7rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.qa-lede {
  margin: 0 0 1rem;
  color: var(--qa-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.qa-form {
  display: grid;
  gap: 0;
}

.qa-form label:not(.qa-check) {
  display: grid;
  gap: 0.28rem;
  margin-bottom: 0.75rem;
  color: var(--qa-muted);
  font-size: 0.82rem;
}

.qa-form input[type="text"],
.qa-form input[type="email"] {
  width: 100%;
  padding: 0.72rem 0.75rem;
  border: 0.08rem solid color-mix(in srgb, var(--qa-ink) 22%, transparent);
  border-radius: 0.4rem;
  background: rgb(255 255 255 / 0.72);
  color: var(--qa-ink);
  font: inherit;
}

.qa-form input:focus {
  outline: 0.06rem solid var(--qa-accent);
  outline-offset: 0.08rem;
  border-color: var(--qa-accent);
}

.qa-check {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.72rem 0.85rem;
  border: 0.08rem solid color-mix(in srgb, var(--qa-ink) 18%, transparent);
  border-radius: 0.2rem;
  color: var(--qa-ink);
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
}

.qa-check span {
  min-width: 0;
  white-space: normal;
}

.qa-check input {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--qa-accent);
}

.qa-privacy {
  color: var(--qa-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.qa-privacy:hover {
  filter: brightness(1.08);
}

.qa-err {
  min-height: 0;
  margin: 0 0 0.5rem;
  color: var(--qa-bad);
  font-size: 0.82rem;
}

.qa-skip,
.qa-cta,
.qa-ghost {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.2rem;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.qa-skip {
  margin: 0 0 0.7rem;
  border: 0.12rem solid var(--qa-ink);
  background: color-mix(in srgb, var(--qa-ink) 16%, transparent);
  color: var(--qa-ink);
}

.qa-skip:hover,
.qa-skip:focus-visible {
  background: color-mix(in srgb, var(--qa-ink) 26%, transparent);
  outline: none;
}

.qa-cta {
  border: 0;
  background: var(--qa-accent);
  color: #fff;
}

.qa-cta:hover { filter: brightness(1.08); }
.qa-cta:active { transform: scale(0.985); }

.qa-play {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-height: min(36rem, calc(100dvh - 2.4rem));
  overflow: visible;
}

.qa-ask-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.qa-hud {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.15rem 0 1.55rem;
}

.qa-progress {
  flex: 1;
  height: 0.34rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(17 17 17 / 0.12);
}

.qa-progress i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--qa-accent);
  transition: width 0.35s var(--qa-ease);
}

.qa-count {
  min-width: 2.4rem;
  text-align: right;
  color: var(--qa-muted);
  font-size: 0.72rem;
}

.qa-question {
  position: relative;
  width: 100%;
  margin: 0 0 1.1rem;
  font-size: 1.82rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.04em;
  text-align: center;
  color: transparent;
}

.qa-question.is-in {
  animation: qa-q-in 0.48s var(--qa-ease) both;
}

.qa-question.is-out {
  animation: qa-q-out 0.4s ease both;
}

.qa-q-outline,
.qa-q-fill {
  display: block;
  padding: 0.08em 0.1em 0.12em;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.qa-q-outline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.09em #243044;
  pointer-events: none;
  user-select: none;
}

.qa-q-fill {
  --qa-q-shine: #e61d2b;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(
    90deg,
    #ffffff 0%,
    color-mix(in srgb, var(--qa-q-shine) 10%, #fff) 35%,
    color-mix(in srgb, var(--qa-q-shine) 18%, #fff) 50%,
    color-mix(in srgb, var(--qa-q-shine) 10%, #fff) 65%,
    #ffffff 100%
  );
  background-size: 340% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: qa-irid-text 26s linear infinite;
}

.qa-answers {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: 0.85rem;
  padding: 0.35rem 0.1rem 1.4rem;
  overflow: visible;
  perspective: 980px;
  perspective-origin: 50% 80%;
  transition: gap 0.52s var(--qa-ease), padding 0.52s var(--qa-ease);
}

.qa-answers[data-count="3"] {
  gap: 1.15rem;
  padding-top: 0.7rem;
}

.qa-answers[data-count="3"] .qa-3d {
  --h: 4.2rem;
}

.qa-answers button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}

.qa-3d {
  --w: 22rem;
  --h: 3.7rem;
  --d: 16px;
  --rx: 0deg;
  --ry: 0deg;
  --z: 0px;
  --i: 0;
  isolation: isolate;
  position: relative;
  display: block;
  overflow: visible;
  width: 100%;
  height: var(--h);
  flex: 0 0 var(--h);
  padding: 0;
  background: transparent;
  color: inherit;
  transition: height 0.52s var(--qa-ease);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  touch-action: manipulation;
}

.qa-3d:focus,
.qa-3d:focus-visible {
  outline: none;
}

.qa-3d-box {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform:
    rotateX(calc(18deg + var(--rx)))
    rotateY(calc(-8deg + var(--ry)))
    translateZ(var(--z));
  transition: transform 0.22s var(--qa-ease);
  pointer-events: none;
}

.qa-3d:active:not(:disabled) .qa-3d-box,
.qa-3d.is-down .qa-3d-box {
  --z: -8px;
}

.qa-3d-face {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
}

.qa-3d-face.f1 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.06));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
  transform: rotateY(0deg) translateZ(calc(var(--d) / 2));
}

.qa-3d-face.f1:not(:has(.qa-key)) {
  grid-template-columns: minmax(0, 1fr);
}

.qa-3d-face.f1:not(:has(.qa-key)) .qa-3d-label {
  padding-left: 0.9rem;
}

.qa-3d-face.f2 {
  width: var(--d);
  height: var(--h);
  left: calc((var(--w) - var(--d)) / 2);
  background: rgb(0 0 0 / 0.32);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
}

.qa-3d-face.f3 {
  width: var(--w);
  height: var(--h);
  background: rgb(0 0 0 / 0.4);
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
}

.qa-3d-face.f4 {
  width: var(--d);
  height: var(--h);
  left: calc((var(--w) - var(--d)) / 2);
  background: rgb(255 255 255 / 0.12);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
}

.qa-3d-face.f5 {
  width: var(--w);
  height: var(--d);
  top: calc((var(--h) - var(--d)) / 2);
  background: rgb(255 255 255 / 0.16);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
}

.qa-3d-face.f6 {
  width: var(--w);
  height: var(--d);
  top: calc((var(--h) - var(--d)) / 2);
  background: rgb(0 0 0 / 0.42);
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
}

.qa-key {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.7rem;
  border-radius: 0.28rem;
  background: var(--qa-accent);
  color: #fff;
  font-size: 0.72rem;
}

.qa-3d-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0.35rem 0.85rem 0.35rem 0.45rem;
  text-align: left;
  line-height: 1.2;
  max-height: 100%;
}

.qa-3d.is-ok .qa-3d-face.f1 {
  background: color-mix(in srgb, var(--qa-ok) 78%, #0b1a10);
  color: #e8fff2;
  border-color: rgb(126 224 168 / 0.45);
}

.qa-3d.is-ok .qa-3d-face.f2 {
  background: color-mix(in srgb, #3d9a64 68%, #0c1a10);
}

.qa-3d.is-ok .qa-3d-face.f3 {
  background: color-mix(in srgb, #1f7a4d 78%, #08140c);
}

.qa-3d.is-ok .qa-3d-face.f4 {
  background: color-mix(in srgb, #a8ebc4 58%, #fff);
}

.qa-3d.is-ok .qa-3d-face.f5 {
  background: color-mix(in srgb, #c5f4d8 64%, #fff);
}

.qa-3d.is-ok .qa-3d-face.f6 {
  background: color-mix(in srgb, #18643e 82%, #07110a);
}

.qa-3d.is-bad .qa-3d-face.f1 {
  background: color-mix(in srgb, #c43b3b 82%, #1a0b0b);
}

.qa-3d:disabled { cursor: default; }

.qa-3d-shadow {
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: -0.5rem;
  height: 0.85rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.28);
  filter: blur(8px);
  pointer-events: none;
}

.qa-answers .qa-3d.is-in {
  animation: qa-btn-in 0.52s var(--qa-ease) both;
  animation-delay: calc(var(--i) * 70ms);
}

.qa-answers .qa-3d.is-out {
  animation: qa-btn-out 0.28s ease both;
  pointer-events: none;
}

.qa-answers .qa-3d.is-out-pick {
  animation: qa-btn-out-pick 0.4s var(--qa-ease) both;
  pointer-events: none;
}

.qa-answers .qa-3d.is-away {
  animation: qa-btn-away 0.42s ease both;
  pointer-events: none;
}

.qa-prize {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.qa-prize .qa-kicker,
.qa-prize .qa-title,
.qa-prize .qa-lede,
.qa-prize .qa-prize-ref,
.qa-prize .qa-copy-wrap,
.qa-prize .qa-share-wrap,
.qa-prize .qa-cta,
.qa-prize .qa-skip {
  position: relative;
  z-index: 2;
}

.qa-prize-visual {
  position: relative;
  z-index: 0;
  margin: 0.4rem auto 1.05rem;
  width: min(14.5rem, 82%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  background: transparent;
  animation: qa-prize-pop 0.65s var(--qa-ease) both;
}

.qa-prize-halo {
  position: absolute;
  z-index: 0;
  inset: -18%;
  pointer-events: none;
}

.qa-prize-star {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.qa-prize-star > span {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 61.2% 35%, 98% 35.5%, 68.2% 57.5%, 79.5% 91%, 50% 71%, 20.5% 91%, 31.8% 57.5%, 2% 35.5%, 38.8% 35%);
}

.qa-prize-star.is-a {
  width: 108%;
  height: 108%;
  filter: blur(44px);
  transform: translate(-50%, -50%);
  animation: qa-star-a 22s linear infinite;
}

.qa-prize-star.is-a > span {
  background: var(--qa-star, rgb(255 196 72 / 0.92));
}

.qa-prize-star.is-b {
  width: 96%;
  height: 96%;
  filter: blur(52px);
  transform: translate(-50%, -50%) rotate(36deg);
  animation: qa-star-b 28s linear infinite;
}

.qa-prize-star.is-b > span {
  background: var(--qa-star-2, rgb(255 255 255 / 0.92));
}

.qa-prize-visual[hidden] {
  display: none;
}

.qa-prize-visual img {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.18));
}

body.is-quiz .qa-prize-visual img {
  width: 94%;
  height: 94%;
}

body.is-persona .qa-prize-visual img {
  width: 105%;
  height: 105%;
}

.qa-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  margin: 0;
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 10px 18px rgb(0 0 0 / 0.18);
  font-size: 2.6rem;
}

.qa-badge[hidden] {
  display: none;
}

.qa-prize-ref {
  --dash: color-mix(in srgb, var(--qa-accent) 70%, var(--qa-accent-2));
  --dash-len: 0.87rem;
  --dash-gap: 0.73rem;
  --dash-w: 0.13rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.85rem;
  margin: 0 0 0.85rem;
  border: 0;
  border-radius: 0.7rem;
  color: var(--qa-accent);
  background-color: color-mix(in srgb, var(--qa-panel) 70%, #fff);
  background-image:
    repeating-linear-gradient(90deg, var(--dash) 0 var(--dash-len), transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap))),
    repeating-linear-gradient(90deg, var(--dash) 0 var(--dash-len), transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap))),
    repeating-linear-gradient(180deg, var(--dash) 0 var(--dash-len), transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap))),
    repeating-linear-gradient(180deg, var(--dash) 0 var(--dash-len), transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap)));
  background-size:
    100% var(--dash-w),
    100% var(--dash-w),
    var(--dash-w) 100%,
    var(--dash-w) 100%;
  background-position: top, bottom, left, right;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

.qa-prize-ref[hidden] {
  display: none;
}

.qa-popup .qa-title,
.qa-popup .qa-lede {
  text-align: left;
}

.qa-prize .qa-title,
.qa-prize .qa-lede {
  text-align: center;
}

.qa-prize .qa-cta {
  margin-top: 0.15rem;
}

.qa-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
}

.qa-share svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.qa-share-wrap {
  position: relative;
  width: 100%;
}

.qa-prize .qa-skip {
  margin: 0.55rem 0 0;
}

.qa-copy-wrap {
  position: relative;
  width: 100%;
}

.qa-copy-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  z-index: 2;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--qa-ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(0.35rem);
  transition: opacity 0.2s var(--qa-ease), transform 0.2s var(--qa-ease);
}

.qa-copy-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.qa-ghost {
  border: 0.08rem solid color-mix(in srgb, var(--qa-ink) 28%, transparent);
  background: transparent;
  color: var(--qa-ink);
}

@keyframes qa-irid-text {
  from { background-position: 0 0; }
  to { background-position: 340% 0; }
}

@keyframes qa-halo-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes qa-star-a {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes qa-star-b {
  from { transform: translate(-50%, -50%) rotate(36deg); }
  to { transform: translate(-50%, -50%) rotate(-324deg); }
}

@keyframes qa-prize-pop {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: none; }
}

@keyframes qa-pulse {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

@keyframes qa-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes qa-q-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes qa-q-out {
  to { opacity: 0; transform: scale(1.03); }
}

@keyframes qa-btn-in {
  from { opacity: 0; transform: translate3d(2.4rem, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes qa-btn-out {
  to { opacity: 0; transform: translate3d(-2.4rem, 0, 0); }
}

@keyframes qa-btn-out-pick {
  to { opacity: 0; transform: translate3d(-2.4rem, 0, 0); }
}

@keyframes qa-btn-away {
  to { opacity: 0; transform: translate3d(-1.8rem, 0, 0) scale(0.98); }
}

body.is-quiz {
  --qa-bg: #ffd6dc;
  --qa-ink: #2a0c12;
  --qa-muted: #8a4450;
  --qa-accent: #e61d2b;
  --qa-accent-2: #ffd54a;
  --qa-panel: rgb(255 248 246 / 0.94);
  --qa-line: rgb(230 29 43 / 0.16);
  --qa-star: rgb(230 29 43 / 0.88);
  --qa-star-2: rgb(255 246 247 / 0.95);
}

body.is-quiz .qa-reg {
  top: auto;
  bottom: 0.12em;
  right: -0.08em;
  color: #e61d2b;
  opacity: 0.92;
}

body.is-quiz [data-panel="result"] .qa-logo {
  filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgb(0 0 0 / 0.22));
}

body.is-quiz [data-panel="result"] .qa-reg {
  color: #fff;
  opacity: 0.96;
}

body.is-quiz.is-coke-deep .qa-count {
  color: #ffe4e7;
}

body.is-quiz.is-coke-deep .qa-progress {
  background: rgb(255 255 255 / 0.22);
}

body.is-persona.is-oreo-deep .qa-count {
  color: #14224a;
}

body.is-persona.is-oreo-deep .qa-progress {
  background: rgb(20 34 74 / 0.16);
}

body.is-quiz .qa-q-outline {
  -webkit-text-stroke-color: #2a0c12;
}

body.is-quiz .qa-q-fill {
  --qa-q-shine: #e61d2b;
}

body.is-quiz .qa-3d { color: #2a0c12; }

body.is-quiz .qa-3d-face.f1 {
  background: linear-gradient(180deg, #fff, #ffe8eb);
}

body.is-quiz .qa-3d.is-ok .qa-3d-face.f1 {
  background: color-mix(in srgb, #7ee0a8 78%, #fff);
  color: #0d3b24;
}

body.is-quiz .qa-3d.is-bad .qa-3d-face.f1 {
  background: color-mix(in srgb, #ff9aa0 76%, #fff);
  color: #2a0c12;
}

body.is-quiz .qa-cta { color: #fff; }

body.is-persona {
  --qa-bg: #c8ecff;
  --qa-ink: #14224a;
  --qa-muted: #4a5e88;
  --qa-accent: #1ea7e8;
  --qa-accent-2: #ffe08a;
  --qa-panel: rgb(255 252 247 / 0.94);
  --qa-line: rgb(30 167 232 / 0.2);
  --qa-star: rgb(12 132 214 / 0.95);
  --qa-star-2: rgb(214 240 255 / 0.96);
}

body.is-persona .qa-q-outline {
  -webkit-text-stroke-color: #1a140f;
}

body.is-persona .qa-q-fill {
  --qa-q-shine: #1ea7e8;
}

body.is-persona .qa-cta { color: #fff; }

body.is-persona .qa-3d { color: #14224a; }

body.is-persona .qa-3d-face.f1 {
  background: linear-gradient(180deg, #fff, #e4f5ff);
  border-color: rgb(30 167 232 / 0.28);
}

body.is-persona .qa-3d.is-ok .qa-3d-face.f1,
body.is-persona .qa-3d.is-pick .qa-3d-face.f1 {
  background: color-mix(in srgb, #1ea7e8 70%, #fff);
  color: #14224a;
  border-color: rgb(30 167 232 / 0.48);
}

body.is-persona .qa-3d.is-ok .qa-3d-face.f2,
body.is-persona .qa-3d.is-pick .qa-3d-face.f2 {
  background: color-mix(in srgb, #5eb8e8 68%, #d7f1ff);
}

body.is-persona .qa-3d.is-ok .qa-3d-face.f3,
body.is-persona .qa-3d.is-pick .qa-3d-face.f3 {
  background: color-mix(in srgb, #1488c4 78%, #0b2a44);
}

body.is-persona .qa-3d.is-ok .qa-3d-face.f4,
body.is-persona .qa-3d.is-pick .qa-3d-face.f4 {
  background: color-mix(in srgb, #b8e6ff 62%, #fff);
}

body.is-persona .qa-3d.is-ok .qa-3d-face.f5,
body.is-persona .qa-3d.is-pick .qa-3d-face.f5 {
  background: color-mix(in srgb, #d6f2ff 68%, #fff);
}

body.is-persona .qa-3d.is-ok .qa-3d-face.f6,
body.is-persona .qa-3d.is-pick .qa-3d-face.f6 {
  background: color-mix(in srgb, #0e6fa8 82%, #082238);
}

body.is-persona .qa-prize-star.is-a {
  width: 112%;
  height: 112%;
  filter: blur(46px);
}

body.is-persona .qa-prize-star.is-b {
  width: 100%;
  height: 100%;
  filter: blur(54px);
}

.qa-ticket-scene {
  --w: 20rem;
  --h: 27rem;
  --d: 6px;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 18.5rem;
  aspect-ratio: 3 / 4;
  margin: 0 auto 0.4rem;
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

.qa-flakes {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.qa-coin {
  --cx: 0px;
  --cy: 0px;
  --rx: 62deg;
  --ry: 10deg;
  --rz: -28deg;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: 3.35rem;
  height: 3.35rem;
  pointer-events: none;
  opacity: 0;
  perspective: 560px;
  transform: translate3d(calc(var(--cx) - 50%), calc(var(--cy) - 78%), 0);
  transform-style: preserve-3d;
  transition: opacity 0.12s ease;
}

.qa-coin.is-on {
  opacity: 1;
}

.qa-coin-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 0.42rem;
  border-radius: 50%;
  background: rgb(70 32 8 / 0.28);
  filter: blur(3px);
  transform: rotateX(70deg) scale(1.05, 0.55);
}

.qa-coin-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz)) rotateY(var(--ry));
}

.qa-coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff8d4 0 10%, transparent 16%),
    radial-gradient(circle at 50% 54%, #f3c64a 0 38%, #d8a228 56%, #f7d56c 70%, #c49218 72%, #e8c04a 100%);
  box-shadow:
    inset 0 0 0 0.09rem #f3dc88,
    inset 0 0 0 0.28rem #b88618,
    inset 0 0 0 0.34rem #f0c85a;
  backface-visibility: hidden;
}

.qa-coin-face.is-front {
  transform: translateZ(0.23rem);
}

.qa-coin-face.is-front::after {
  content: "";
  position: absolute;
  left: 28%;
  top: 22%;
  width: 22%;
  height: 16%;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.38);
  transform: rotate(-18deg);
}

.qa-coin-face.is-back {
  background:
    radial-gradient(circle at 68% 30%, #ffe9b0 0 8%, transparent 14%),
    radial-gradient(circle at 50% 50%, #e0b03a 0 46%, #a87814 100%);
  transform: rotateY(180deg) translateZ(0.23rem);
}

.qa-coin-rim {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.qa-coin-rim i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.56rem;
  height: 0.46rem;
  margin: -0.23rem 0 0 -0.28rem;
  background: linear-gradient(180deg, #ffe9a0, #c49218 40%, #7a560c);
  transform:
    rotateZ(calc(var(--i) * 18deg))
    translateY(-1.675rem)
    rotateX(90deg);
}

.qa-ticket-scene.is-hold,
.qa-ticket-scene.is-hold .qa-foil {
  cursor: none;
}

.qa-ticket-shadow {
  position: absolute;
  z-index: 0;
  left: 10%;
  right: 10%;
  bottom: -0.7rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgb(90 40 12 / 0.18);
  filter: blur(10px);
  pointer-events: none;
}

.qa-ticket-box {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(7deg);
  transform-origin: center 80%;
  animation: qa-ticket-idle 6.8s ease-in-out infinite alternate;
}

.qa-ticket-scene.is-hold .qa-ticket-box,
.qa-ticket-scene.is-clearing .qa-ticket-box,
.qa-ticket-scene.is-done .qa-ticket-box {
  animation: none;
  transform: rotateX(6deg);
  transition: transform 0.4s var(--qa-ease);
}

.qa-ticket-scene.is-enter .qa-ticket-box {
  animation: qa-ticket-unfold 1.15s cubic-bezier(0.22, 0.86, 0.28, 1) both;
}

.qa-ticket-lead {
  width: 100%;
  margin: 0 0 0.9rem;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--qa-ink);
}

body.is-lays .qa-ticket-lead {
  color: color-mix(in srgb, var(--qa-ink) 42%, #fff4d6);
}

.qa-ticket-prize {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.4rem 1.2rem 1.6rem;
  background-color: #fff6dc;
  background-image: url("ticket-prize.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  visibility: hidden;
}

.qa-ticket-scene.is-ready .qa-ticket-prize {
  opacity: 1;
  visibility: visible;
}

.qa-ticket-shot {
  display: block;
  width: min(78%, 11.5rem);
  height: auto;
  max-height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgb(90 40 12 / 0.22));
}

.qa-ticket-hint {
  position: absolute;
  z-index: 6;
  left: 58%;
  top: 48%;
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0;
  transform: translate(-10%, 10px);
  filter: drop-shadow(0 4px 6px rgb(90 40 12 / 0.28));
  transition: opacity 0.32s ease;
}

.qa-ticket-scene.is-hint .qa-ticket-hint {
  opacity: 1;
  animation: qa-ticket-hand 1s ease-in-out infinite;
}

.qa-ticket-scene.is-hold .qa-ticket-hint,
.qa-ticket-scene.is-clearing .qa-ticket-hint,
.qa-ticket-scene.is-done .qa-ticket-hint {
  opacity: 0;
}

.qa-ticket-sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 32%,
    rgb(255 255 255 / 0) 40%,
    rgb(255 255 255 / 0.72) 48%,
    rgb(255 228 140 / 0.5) 52%,
    transparent 62%
  );
  background-size: 240% 100%;
  background-position: 130% 0;
  opacity: 0;
}

.qa-ticket-scene.is-done .qa-ticket-sheen {
  animation: qa-ticket-sheen 1.15s ease both;
}

.qa-ticket-goo {
  position: absolute;
  width: 0;
  height: 0;
}

.qa-ticket-fx {
  position: absolute;
  z-index: 0;
  inset: -28%;
  pointer-events: none;
  overflow: visible;
}

.qa-ticket-blobs {
  position: absolute;
  inset: 0;
  filter: url("#qa-goo");
}

.qa-ticket-blobs i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s, 7rem);
  height: var(--s, 7rem);
  border-radius: 50%;
  background: var(--c, #ffd24a);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.qa-ticket-scene.is-done .qa-ticket-blobs i {
  animation: qa-ticket-blob 1.55s cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

.qa-ticket-blobs i:nth-child(1) { --s: 9.2rem; --x: -18%; --y: -8%; --c: #ff4d3a; animation-delay: 0.02s; }
.qa-ticket-blobs i:nth-child(2) { --s: 7.4rem; --x: 22%; --y: -14%; --c: #ffd24a; animation-delay: 0.08s; }
.qa-ticket-blobs i:nth-child(3) { --s: 8.1rem; --x: 16%; --y: 22%; --c: #ff8a1f; animation-delay: 0.04s; }
.qa-ticket-blobs i:nth-child(4) { --s: 6.6rem; --x: -24%; --y: 16%; --c: #ffe27a; animation-delay: 0.12s; }
.qa-ticket-blobs i:nth-child(5) { --s: 5.4rem; --x: 4%; --y: -26%; --c: #e21c2a; animation-delay: 0.16s; }
.qa-ticket-blobs i:nth-child(6) { --s: 7rem; --x: -6%; --y: 24%; --c: #ffc107; animation-delay: 0.1s; }

.qa-ticket-stars {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.qa-ticket-stars i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s, 0.7rem);
  height: var(--s, 0.7rem);
  background: var(--c, #fff);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgb(255 214 90 / 0.8));
}

.qa-ticket-scene.is-done .qa-ticket-stars i {
  animation: qa-ticket-star 1.15s ease-out both;
}

.qa-ticket-stars i:nth-child(1) { --x: -7.2rem; --y: -4.4rem; --s: 0.85rem; --c: #fff; animation-delay: 0.08s; }
.qa-ticket-stars i:nth-child(2) { --x: 6.8rem; --y: -5.2rem; --s: 0.62rem; --c: #ffd24a; animation-delay: 0.16s; }
.qa-ticket-stars i:nth-child(3) { --x: 8.2rem; --y: 1.4rem; --s: 0.95rem; --c: #fff; animation-delay: 0.12s; }
.qa-ticket-stars i:nth-child(4) { --x: 5.4rem; --y: 5.6rem; --s: 0.55rem; --c: #ff8a1f; animation-delay: 0.22s; }
.qa-ticket-stars i:nth-child(5) { --x: -1.2rem; --y: 6.8rem; --s: 0.78rem; --c: #ffe27a; animation-delay: 0.1s; }
.qa-ticket-stars i:nth-child(6) { --x: -7.8rem; --y: 3.2rem; --s: 0.7rem; --c: #fff; animation-delay: 0.2s; }
.qa-ticket-stars i:nth-child(7) { --x: -8.4rem; --y: -0.6rem; --s: 0.5rem; --c: #e21c2a; animation-delay: 0.14s; }
.qa-ticket-stars i:nth-child(8) { --x: 2.2rem; --y: -6.6rem; --s: 0.88rem; --c: #ffd24a; animation-delay: 0.18s; }
.qa-ticket-stars i:nth-child(9) { --x: 8.8rem; --y: -1.8rem; --s: 0.46rem; --c: #fff; animation-delay: 0.26s; }
.qa-ticket-stars i:nth-child(10) { --x: -4.6rem; --y: 5.8rem; --s: 0.6rem; --c: #ffc107; animation-delay: 0.24s; }

.qa-ticket-face {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
}

.qa-ticket-face.f1 {
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 0;
  background-color: #fff6dc;
  background-image: url("ticket-prize.svg");
  background-size: cover;
  background-position: center;
  -webkit-mask: url("ticket-stamp.svg") center / 100% 100% no-repeat;
  mask: url("ticket-stamp.svg") center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 16px rgb(90 40 12 / 0.16));
  transform: rotateY(0deg) translateZ(calc(var(--d) / 2));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.qa-ticket-face.f2,
.qa-ticket-face.f3,
.qa-ticket-face.f4,
.qa-ticket-face.f5,
.qa-ticket-face.f6 {
  opacity: 0;
}

.qa-ticket-face.f2 {
  width: var(--d);
  height: var(--h);
  left: calc((var(--w) - var(--d)) / 2);
  background: linear-gradient(180deg, #eceff4, #b7bec9);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
}

.qa-ticket-face.f3 {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #c9a227;
  -webkit-mask: url("ticket-stamp.svg") center / 100% 100% no-repeat;
  mask: url("ticket-stamp.svg") center / 100% 100% no-repeat;
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
}

.qa-ticket-face.f4 {
  width: var(--d);
  height: var(--h);
  left: calc((var(--w) - var(--d)) / 2);
  background: linear-gradient(180deg, #fff, #d8dde6);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
}

.qa-ticket-face.f5 {
  width: var(--w);
  height: var(--d);
  top: calc((var(--h) - var(--d)) / 2);
  background: linear-gradient(90deg, #fff7d6, #ffe08a);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
}

.qa-ticket-face.f6 {
  width: var(--w);
  height: var(--d);
  top: calc((var(--h) - var(--d)) / 2);
  background: #b7bec9;
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
}

.qa-foil {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}

.qa-ticket-scene.is-clearing .qa-foil {
  transition: opacity 0.4s ease;
}

body.is-lays {
  --qa-bg: #fffefb;
  --qa-ink: #5c1a12;
  --qa-muted: #8a5a32;
  --qa-accent: #e21c2a;
  --qa-accent-2: #f0c75a;
  --qa-panel: rgb(255 255 255 / 0.94);
  --qa-line: rgb(226 28 42 / 0.16);
  --qa-star: rgb(255 196 72 / 0.9);
  --qa-star-2: rgb(255 252 245 / 0.95);
}

body.is-lays .qa-atmosphere {
  background:
    radial-gradient(ellipse 78% 46% at 50% -10%, #fff6c8 0%, rgb(255 244 196 / 0.55) 28%, transparent 64%),
    radial-gradient(ellipse 48% 34% at 100% 108%, rgb(255 214 90 / 0.22), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #fffdf8 46%, #fff4d2 100%);
}

body.is-lays .qa-glow {
  background: radial-gradient(
    circle at 50% 32%,
    rgb(255 224 110 / 0.42) 0%,
    rgb(255 236 170 / 0.18) 42%,
    transparent 72%
  );
}

body.is-lays .qa-play {
  max-width: 22rem;
  align-items: center;
}

body.is-lays .qa-cta { color: #fff; }

body.is-lays .qa-prize.is-lose .qa-prize-halo {
  opacity: 0.28;
}

body.is-lays .qa-brand {
  width: 7.6rem;
}

body.is-lays .qa-logo {
  width: 100%;
}

@keyframes qa-ticket-idle {
  0% { transform: rotateX(8deg) rotateY(-5deg); }
  100% { transform: rotateX(5deg) rotateY(4deg); }
}

@keyframes qa-ticket-unfold {
  0% {
    transform: rotateX(38deg) rotateY(-8deg);
    transform-origin: 50% 92%;
  }
  72% {
    transform: rotateX(4deg) rotateY(3deg);
    transform-origin: center 80%;
  }
  100% {
    transform: rotateX(8deg) rotateY(-5deg);
    transform-origin: center 80%;
  }
}

@keyframes qa-ticket-hand {
  0%, 100% { transform: translate(-10%, 10px); }
  50% { transform: translate(-10%, -8px); }
}

@keyframes qa-ticket-sheen {
  0% {
    opacity: 0;
    background-position: 130% 0;
  }
  14% { opacity: 1; }
  78% {
    opacity: 1;
    background-position: -36% 0;
  }
  100% {
    opacity: 0;
    background-position: -52% 0;
  }
}

@keyframes qa-ticket-blob {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0);
  }
  58% { opacity: 1; }
  100% {
    opacity: 0.42;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
  }
}

@keyframes qa-ticket-star {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  62% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(48deg);
  }
}


@media (prefers-reduced-motion: reduce) {
  .qa-glow,
  .qa-q-fill,
  .qa-prize-halo,
  .qa-prize-star,
  .qa-prize-visual { animation: none; }
  .qa-layer.is-on .qa-stack,
  .qa-layer.is-on .qa-play,
  .qa-question.is-in,
  .qa-question.is-out,
  .qa-answers .qa-3d.is-in,
  .qa-answers .qa-3d.is-out,
  .qa-answers .qa-3d.is-out-pick,
  .qa-answers .qa-3d.is-away {
    animation: none;
  }
  .qa-ask-col {
    transition: none !important;
    transform: none !important;
  }
  .qa-3d-box { transform: rotateX(8deg); }
  .qa-ticket-box {
    animation: none;
    transform: none;
  }
  .qa-ticket-face:not(.f1) { display: none; }
  .qa-ticket-shadow { opacity: 0.45; }
  .qa-ticket-scene.is-enter .qa-ticket-box,
  .qa-ticket-scene.is-done .qa-ticket-sheen,
  .qa-ticket-scene.is-done .qa-ticket-blobs i,
  .qa-ticket-scene.is-done .qa-ticket-stars i,
  .qa-ticket-scene.is-hint .qa-ticket-hint {
    animation: none;
  }
  .qa-coin-3d {
    transform: rotateX(58deg) rotateZ(-24deg);
  }
}

@media (max-height: 700px) {
  html {
    font-size: clamp(12px, 1.61dvh, 13px);
  }
}

@media (max-width: 640px) {
  .qa-layer {
    padding: 1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  }
  .qa-play {
    min-height: calc(100dvh - 2rem);
    justify-content: center;
  }
  .qa-question { font-size: 1.52rem; }
}