/*
 * Adaptive quiz presentation
 *
 * The quiz engine supplies the route and question data. This file only adds the
 * friendly guide, variable-length bridge path, question formats, and transition
 * states. The selectors intentionally build on the original quiz class names so
 * an older saved route still has a complete, readable fallback.
 */

.adaptive-quiz-screen {
  /* The app restores the exact viewport after each adaptive rerender. Disable
     native scroll anchoring here so Chromium does not add a second nudge. */
  overflow-anchor: none;
}

.quiz-progress {
  --quiz-progress: 0%;
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding: 0.9rem 1rem 1rem;
  background: rgba(255, 254, 250, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.quiz-progress > div:first-child {
  min-width: 0;
}

.quiz-progress > .quiz-progress-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.65rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
}

.quiz-progress > .quiz-progress-copy strong {
  color: var(--ink);
  font-family: var(--font-rounded);
  font-size: 0.92rem;
}

.quiz-progress .progress-track {
  position: relative;
  height: 18px;
  overflow: visible;
  padding: 2px;
  background-color: #f5e0c3;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 24px,
    rgba(81, 16, 57, 0.13) 24px 27px
  );
  border: 2px solid var(--plum-dark);
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(81, 16, 57, 0.13);
}

.quiz-progress .progress-track > span {
  position: relative;
  overflow: hidden;
  min-width: 4px;
  background: var(--gold);
  border-right: 2px solid var(--gold-dark);
  border-radius: 4px;
  transition: width 360ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.quiz-progress .progress-track > span::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    rgba(81, 16, 57, 0.18) 23px 26px
  );
}

.quiz-progress .progress-track::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(13px, var(--quiz-progress), calc(100% - 13px));
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--plum-dark);
  content: "★";
  background: var(--paper);
  border: 2px solid var(--plum-dark);
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(81, 16, 57, 0.18);
  font-size: 0.8rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: left 360ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.bridge-mini {
  --question-count: 8;
  display: grid;
  max-width: 850px;
  align-items: end;
  gap: clamp(0.2rem, 0.8vw, 0.5rem);
  grid-template-columns: repeat(var(--question-count), minmax(0, 1fr));
  margin-bottom: 0.4rem;
}

.bridge-mini span {
  height: 14px;
  background: #f0e4dc;
  border: 2px solid var(--line-strong);
  border-radius: 5px 5px 2px 2px;
  box-shadow: 0 2px 0 rgba(81, 16, 57, 0.08);
  transform: rotate(-0.5deg);
  transition:
    height 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.bridge-mini span:nth-child(even) {
  transform: rotate(0.7deg);
}

.bridge-mini span.is-done {
  background: var(--gold);
  border-color: var(--gold-dark);
}

.bridge-mini span.is-current,
.bridge-mini span:nth-child(even).is-current {
  height: 20px;
  background: var(--pink);
  border-color: var(--plum-dark);
  box-shadow: 0 3px 0 rgba(81, 16, 57, 0.17);
  transform: translateY(-4px) rotate(-1deg);
}

/* The CSS-only bridge guide appears before any optional image can load. */
.quiz-guide {
  display: grid;
  max-width: 820px;
  align-items: center;
  gap: 1rem;
  grid-template-columns: 82px minmax(0, 1fr);
  margin: 0 auto 1rem;
}

.quiz-guide-avatar {
  position: relative;
  width: 74px;
  height: 68px;
  justify-self: center;
  background:
    radial-gradient(circle at 31% 44%, var(--ink) 0 3px, transparent 3.5px),
    radial-gradient(circle at 69% 44%, var(--ink) 0 3px, transparent 3.5px),
    var(--gold-soft);
  border: 3px solid var(--plum-dark);
  border-radius: 47% 47% 43% 43%;
  box-shadow:
    0 5px 0 rgba(81, 16, 57, 0.16),
    inset 0 -6px 0 rgba(242, 184, 71, 0.22);
  animation: bugar-hello 4.8s ease-in-out infinite;
}

.quiz-guide-avatar::before {
  position: absolute;
  top: -17px;
  left: 7px;
  width: 54px;
  height: 25px;
  content: "";
  background: var(--pink);
  border: 3px solid var(--plum-dark);
  border-bottom-width: 5px;
  border-radius: 22px 22px 8px 8px;
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, 0.22);
  transform: rotate(-3deg);
}

.quiz-guide-avatar::after {
  position: absolute;
  top: 34px;
  left: 22px;
  width: 25px;
  height: 15px;
  content: "";
  border-bottom: 4px solid var(--ink);
  border-radius: 0 0 50% 50%;
  transform: rotate(-2deg);
}

.quiz-guide-copy {
  position: relative;
  min-width: 0;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: 8px 18px 18px;
  box-shadow: 3px 4px 0 rgba(81, 16, 57, 0.08);
}

.quiz-guide-copy::before {
  position: absolute;
  top: 22px;
  left: -10px;
  width: 17px;
  height: 17px;
  content: "";
  background: var(--paper);
  border-bottom: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
  transform: rotate(45deg);
}

.quiz-guide-copy > :last-child {
  margin-bottom: 0;
}

.quiz-guide-copy strong,
.quiz-guide-name {
  color: var(--plum);
  font-family: var(--font-rounded);
  font-weight: 900;
}

.quiz-guide-copy p {
  color: var(--muted);
  line-height: 1.45;
}

/* Question formats share a sturdy card but each gets one recognizable accent. */
.quiz-card {
  --quiz-accent: var(--pink);
  --quiz-accent-dark: var(--pink-dark);
  --quiz-accent-soft: var(--pink-soft);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  box-shadow:
    0 6px 0 rgba(81, 16, 57, 0.07),
    var(--shadow-md);
}

.quiz-card::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 7px;
  content: "";
  background: var(--quiz-accent);
}

.quiz-card[data-question-format="welcome"] {
  --quiz-accent: var(--pink);
  --quiz-accent-dark: var(--pink-dark);
  --quiz-accent-soft: var(--pink-soft);
}

.quiz-card[data-question-format="scene"] {
  --quiz-accent: var(--teal);
  --quiz-accent-dark: var(--teal-dark);
  --quiz-accent-soft: var(--teal-soft);
}

.quiz-card[data-question-format="quick-pick"] {
  --quiz-accent: var(--gold);
  --quiz-accent-dark: var(--gold-dark);
  --quiz-accent-soft: var(--gold-soft);
}

.quiz-card[data-question-format="this-or-that"] {
  --quiz-accent: #8c4aa3;
  --quiz-accent-dark: #623173;
  --quiz-accent-soft: #f2e7f7;
}

.quiz-card[data-question-format="mission"] {
  --quiz-accent: #2f7d5a;
  --quiz-accent-dark: #20563e;
  --quiz-accent-soft: #e5f5e9;
}

.quiz-card[data-question-format="path"] {
  --quiz-accent: #e37263;
  --quiz-accent-dark: #9d463b;
  --quiz-accent-soft: #ffe5dc;
}

.quiz-card[data-question-format="postcard"] {
  --quiz-accent: #3978a8;
  --quiz-accent-dark: #265574;
  --quiz-accent-soft: #e8f3fb;
}

.quiz-card > .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 0.24rem 0.6rem;
  color: var(--quiz-accent-dark);
  background: var(--quiz-accent-soft);
  border: 1px solid color-mix(in srgb, var(--quiz-accent) 42%, white);
  border-radius: var(--radius-pill);
}

.quiz-card h1 {
  max-width: 740px;
  margin-bottom: 0.8rem;
}

.quiz-card .question-helper {
  max-width: 700px;
  margin: 0 0 1.35rem;
  padding-left: 0.8rem;
  color: var(--muted);
  border-left: 4px solid var(--quiz-accent);
}

.quiz-card .question-options {
  gap: 0.82rem;
  margin-top: 1.2rem;
}

.quiz-card[data-question-format="welcome"] .question-options,
.quiz-card[data-question-format="quick-pick"] .question-options,
.quiz-card[data-question-format="mission"] .question-options {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.quiz-card[data-question-format="this-or-that"] .question-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quiz-card[data-question-format="postcard"] .question-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quiz-card .option-button {
  --option-accent: var(--pink);
  --option-soft: var(--pink-soft);
  --option-tilt: -0.15deg;
  min-height: 68px;
  gap: 0.72rem;
  grid-template-columns: 36px 42px minmax(0, 1fr) 34px;
  padding: 0.75rem 0.85rem;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: 17px 14px 18px 13px;
  box-shadow: 3px 4px 0 rgba(81, 16, 57, 0.08);
  transform: rotate(var(--option-tilt));
  transition:
    opacity 170ms ease,
    transform 170ms ease,
    background-color 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

.quiz-card .option-button:nth-child(4n + 1) {
  --option-accent: var(--pink);
  --option-soft: var(--pink-soft);
}

.quiz-card .option-button:nth-child(4n + 2) {
  --option-accent: var(--teal);
  --option-soft: var(--teal-soft);
  --option-tilt: 0.18deg;
}

.quiz-card .option-button:nth-child(4n + 3) {
  --option-accent: var(--gold-dark);
  --option-soft: var(--gold-soft);
  --option-tilt: -0.08deg;
}

.quiz-card .option-button:nth-child(4n + 4) {
  --option-accent: #8c4aa3;
  --option-soft: #f2e7f7;
  --option-tilt: 0.12deg;
}

.quiz-card .option-button .option-letter {
  color: var(--ink);
  background: var(--option-soft);
  border: 1px solid color-mix(in srgb, var(--option-accent) 38%, white);
}

.quiz-card .option-button .option-emoji {
  width: 40px;
  height: 40px;
  background: var(--option-soft);
  border-color: color-mix(in srgb, var(--option-accent) 30%, white);
  border-radius: 12px 10px 13px;
  font-size: 1.35rem;
}

.quiz-card .option-button .option-copy {
  display: grid;
  gap: 0.12rem;
  font-size: 0.98rem;
  line-height: 1.35;
}

.quiz-card .option-button .option-copy strong {
  color: inherit;
  font: inherit;
  font-weight: 850;
}

.quiz-card .option-button .option-copy small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.quiz-card .option-button .option-check {
  color: white;
  background: var(--option-accent);
}

.quiz-card .option-button:focus-visible {
  z-index: 2;
  outline: 3px solid var(--plum-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--gold);
}

.quiz-card .quiz-actions :where(button, a):focus-visible {
  outline-color: var(--plum-dark);
  box-shadow: 0 0 0 6px var(--gold);
}

@media (hover: hover) and (pointer: fine) {
  .quiz-card .option-button:hover:not(:disabled) {
    background: var(--option-soft);
    border-color: var(--option-accent);
    box-shadow: 4px 6px 0 color-mix(in srgb, var(--option-accent) 18%, transparent);
    transform: translateY(-3px) rotate(0);
  }
}

.quiz-card .option-button.is-selected {
  background: var(--option-soft);
  border-color: var(--option-accent);
  box-shadow:
    inset 6px 0 0 var(--option-accent),
    3px 4px 0 color-mix(in srgb, var(--option-accent) 23%, transparent);
  transform: translateY(-1px) rotate(0);
  animation: adaptive-choice-pop 420ms cubic-bezier(0.2, 0.85, 0.2, 1.18);
}

.quiz-card .option-button.is-selected::after {
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  color: var(--option-accent);
  content: "✦";
  pointer-events: none;
  font-size: 0.82rem;
  animation: adaptive-choice-star 620ms ease-out both;
}

.quiz-card.is-answering .option-button:not(.is-selected) {
  opacity: 0.64;
  transform: scale(0.992);
}

.quiz-card.is-answering .option-button.is-selected {
  opacity: 1;
  filter: none;
}

.quiz-card .answer-sparkles {
  top: 0.3rem;
  right: 2.6rem;
  color: var(--option-accent);
  font-size: 0.92rem;
  animation: adaptive-sparkles 640ms ease-out both;
}

.quiz-card[data-question-format="quick-pick"] .option-button,
.quiz-card[data-question-format="mission"] .option-button {
  grid-template-columns: 34px 40px minmax(0, 1fr) 30px;
}

.quiz-card[data-question-format="this-or-that"] .option-button {
  min-height: 108px;
  align-content: center;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  grid-template-rows: auto auto;
}

.quiz-card[data-question-format="this-or-that"] .option-emoji {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.quiz-card[data-question-format="this-or-that"] .option-copy {
  grid-column: 2;
  grid-row: 2;
}

.quiz-card[data-question-format="this-or-that"] .option-letter,
.quiz-card[data-question-format="this-or-that"] .option-check {
  grid-row: 1 / span 2;
}

.quiz-card[data-question-format="path"] .question-options {
  position: relative;
  padding-left: 0.6rem;
  border-left: 3px dotted var(--quiz-accent);
}

.quiz-card[data-question-format="path"] .option-button:nth-child(even) {
  width: calc(100% - 1rem);
  margin-left: 1rem;
}

.quiz-card[data-question-format="path"] .option-letter {
  color: white;
  background: var(--quiz-accent);
  border-color: var(--quiz-accent-dark);
  border-radius: 50%;
}

.quiz-card[data-question-format="postcard"] .option-button {
  min-height: 148px;
  align-content: center;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  grid-template-rows: 52px auto;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(
      -45deg,
      var(--option-accent) 0 6px,
      white 6px 12px
    )
    border-box;
  border: 3px solid transparent;
}

.quiz-card[data-question-format="postcard"] .option-emoji {
  width: 48px;
  height: 48px;
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  font-size: 1.55rem;
}

.quiz-card[data-question-format="postcard"] .option-copy {
  grid-column: 2;
  grid-row: 2;
}

.quiz-card[data-question-format="postcard"] .option-letter,
.quiz-card[data-question-format="postcard"] .option-check {
  grid-row: 1 / span 2;
}

.quiz-card .quiz-actions {
  margin-top: 1.65rem;
  border-top-style: dashed;
}

.quiz-card .quiz-actions .primary-button {
  min-width: 160px;
}

.quiz-path-hint {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.quiz-transition-status {
  min-height: 1.5em;
  margin: 0.55rem 0 -0.3rem;
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
}

.quiz-note {
  max-width: 820px;
  margin-inline: auto;
}

.quiz-card.is-entering {
  animation: adaptive-question-enter 340ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.quiz-card.is-leaving {
  pointer-events: none;
  animation: adaptive-question-leave 180ms ease-in both;
}

.quiz-choice-celebration,
.choice-celebration {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.quiz-choice-celebration span,
.choice-celebration span {
  position: absolute;
  top: 56%;
  left: 50%;
  color: var(--quiz-accent);
  font-size: clamp(0.75rem, 2vw, 1.2rem);
  animation: adaptive-confetti 680ms ease-out both;
}

.quiz-choice-celebration span:nth-child(2),
.choice-celebration span:nth-child(2) {
  --confetti-x: 68px;
  --confetti-y: -62px;
  animation-delay: 30ms;
}

.quiz-choice-celebration span:nth-child(3),
.choice-celebration span:nth-child(3) {
  --confetti-x: -78px;
  --confetti-y: -44px;
  animation-delay: 60ms;
}

.quiz-choice-celebration span:nth-child(4),
.choice-celebration span:nth-child(4) {
  --confetti-x: 94px;
  --confetti-y: -15px;
  animation-delay: 90ms;
}

/* Result additions preserve the existing top-match and complete-ranking layout. */
.adaptive-result-note,
.adaptive-quiz-recap {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: var(--teal-soft);
  border: 1px solid rgba(18, 134, 127, 0.35);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius-sm);
}

.adaptive-result-note {
  text-align: left;
}

.adaptive-result-note > strong,
.adaptive-quiz-recap > strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-family: var(--font-rounded);
}

.adaptive-result-note > :last-child,
.adaptive-quiz-recap > :last-child {
  margin-bottom: 0;
}

.quiz-path-recap {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.quiz-path-recap span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0.25rem 0.65rem;
  color: var(--plum-dark);
  background: var(--gold-soft);
  border: 1px solid rgba(155, 102, 16, 0.28);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 900;
}

.results-body-layout .results-sidebar .all-match-panel {
  border-top: 5px solid var(--gold);
  box-shadow: var(--shadow-md);
}

.results-sidebar .all-match-list {
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

@keyframes bugar-hello {
  0%,
  78%,
  100% {
    transform: translateY(0) rotate(0);
  }
  84% {
    transform: translateY(-4px) rotate(-3deg);
  }
  90% {
    transform: translateY(0) rotate(2deg);
  }
}

@keyframes adaptive-choice-pop {
  0% {
    transform: scale(1) rotate(var(--option-tilt));
  }
  45% {
    transform: scale(1.025) rotate(-0.35deg);
  }
  75% {
    transform: scale(0.995) rotate(0.2deg);
  }
  100% {
    transform: translateY(-1px) scale(1) rotate(0);
  }
}

@keyframes adaptive-choice-star {
  0% {
    opacity: 0;
    transform: translate(-10px, 9px) scale(0.4) rotate(-25deg);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(4px, -9px) scale(1.35) rotate(20deg);
  }
}

@keyframes adaptive-sparkles {
  0% {
    opacity: 0;
    transform: translateY(9px) scale(0.7);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-15px) scale(1.25) rotate(8deg);
  }
}

@keyframes adaptive-question-enter {
  from {
    opacity: 0;
    transform: translateX(18px) rotate(0.15deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes adaptive-question-leave {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-14px);
  }
}

@keyframes adaptive-confetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--confetti-x, -52px)),
        calc(-50% + var(--confetti-y, -68px))
      )
      scale(1.2)
      rotate(100deg);
  }
}

@media (max-width: 760px) {
  .quiz-progress {
    gap: 0.7rem;
    grid-template-columns: 1fr;
  }

  .quiz-progress > .quiz-progress-copy {
    justify-content: flex-start;
    text-align: left;
  }

  .quiz-guide {
    gap: 0.75rem;
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .quiz-guide-avatar {
    width: 62px;
    height: 58px;
  }

  .quiz-guide-avatar::before {
    top: -15px;
    left: 5px;
    width: 48px;
    height: 23px;
  }

  .quiz-guide-avatar::after {
    top: 29px;
    left: 18px;
    width: 22px;
    height: 13px;
  }

  .quiz-card[data-question-format="welcome"] .question-options,
  .quiz-card[data-question-format="quick-pick"] .question-options,
  .quiz-card[data-question-format="mission"] .question-options,
  .quiz-card[data-question-format="postcard"] .question-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .quiz-progress {
    min-height: 138px;
    padding: 0.78rem;
    border-radius: 16px;
  }

  .quiz-progress > div:first-child {
    align-items: flex-start;
  }

  .bridge-mini {
    padding-inline: 0.75rem;
  }

  .quiz-guide {
    align-items: start;
    grid-template-columns: 54px minmax(0, 1fr);
    /* The welcome explanation is the tallest guide message. Reserving that
       space prevents shorter later messages from pulling the question card
       upward when the page is already at the top scroll boundary. */
    min-height: 178px;
  }

  .quiz-guide-avatar {
    width: 50px;
    height: 47px;
    margin-top: 0.55rem;
    border-width: 2px;
  }

  .quiz-guide-avatar::before {
    top: -12px;
    left: 4px;
    width: 39px;
    height: 19px;
    border-width: 2px;
    border-bottom-width: 4px;
  }

  .quiz-guide-avatar::after {
    top: 24px;
    left: 15px;
    width: 17px;
    height: 10px;
    border-bottom-width: 3px;
  }

  .quiz-guide-copy {
    padding: 0.72rem 0.8rem;
    border-radius: 7px 15px 15px;
  }

  .quiz-guide-copy::before {
    top: 18px;
    left: -8px;
    width: 13px;
    height: 13px;
  }

  .quiz-card[data-question-format="welcome"] .question-options,
  .quiz-card[data-question-format="quick-pick"] .question-options,
  .quiz-card[data-question-format="this-or-that"] .question-options,
  .quiz-card[data-question-format="mission"] .question-options,
  .quiz-card[data-question-format="postcard"] .question-options {
    grid-template-columns: 1fr;
  }

  .quiz-card[data-question-format="this-or-that"] .option-button,
  .quiz-card[data-question-format="postcard"] .option-button {
    min-height: 76px;
  }

  .quiz-card .option-button,
  .quiz-card[data-question-format="quick-pick"] .option-button,
  .quiz-card[data-question-format="mission"] .option-button {
    min-height: 64px;
    gap: 0.5rem;
    grid-template-columns: 30px 36px minmax(0, 1fr) 30px;
    padding-inline: 0.65rem;
  }

  .quiz-card .option-button .option-letter,
  .quiz-card .option-button .option-check {
    width: 30px;
    height: 30px;
  }

  .quiz-card .option-button .option-emoji {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }

  .quiz-card .quiz-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .quiz-card .quiz-actions > * {
    width: 100%;
  }

  .quiz-card[data-question-format="path"] .option-button:nth-child(even) {
    width: 100%;
    margin-left: 0;
  }

  .quiz-path-hint,
  .quiz-transition-status {
    text-align: center;
  }
}

@media (pointer: coarse) {
  .quiz-card .option-button,
  .quiz-card .quiz-actions button,
  .quiz-card .quiz-actions a {
    min-height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-guide-avatar,
  .quiz-card,
  .quiz-card.is-entering,
  .quiz-card.is-leaving,
  .quiz-card .option-button.is-selected,
  .quiz-card .option-button.is-selected::after,
  .quiz-card .answer-sparkles,
  .quiz-choice-celebration span,
  .choice-celebration span {
    animation: none !important;
  }

  .quiz-progress .progress-track > span,
  .quiz-progress .progress-track::after,
  .bridge-mini span,
  .quiz-card .option-button {
    transition: none !important;
  }

  .quiz-card.is-answering .option-button:not(.is-selected) {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .quiz-progress .progress-track,
  .quiz-progress .progress-track > span,
  .quiz-progress .progress-track::after,
  .quiz-card,
  .quiz-card .option-button,
  .quiz-guide-avatar,
  .quiz-guide-copy {
    border-color: CanvasText;
    forced-color-adjust: auto;
  }

  .quiz-card .option-button.is-selected {
    outline: 3px solid Highlight;
    outline-offset: -5px;
  }
}