:root {
  --g-quiz-max: 560px;
  --g-quiz-edge: 14px;
  --g-quiz-a-h: 54px;
  --g-quiz-key: 30px;
  --g-quiz-border: 2px;
  --g-quiz-ring: 3px;
  --g-quiz-foot: 54px;
  --g-quiz-sr: 1px;
  --g-quiz-track: 0.04em;
  --g-quiz-dim: 0.55;
  --g-quiz-pop: 1.03;
}

#game-dom .qz {
  position: absolute;
  left: var(--g-quiz-edge);
  right: var(--g-quiz-edge);
  max-height: calc(100% - var(--qz-top) - var(--g-quiz-edge) - var(--safe-bottom));
  max-width: var(--g-quiz-max);
  margin: 0 auto;
  overflow-y: auto;
  padding: var(--gap-l);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--clay);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  animation: qz-in var(--t-med) var(--ease);
}

#game-dom .qz-meta {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--g-quiz-track);
}

#game-dom .qz-q {
  margin: 0 0 var(--gap-xs);
  font-size: var(--fs-l);
  font-weight: var(--fw-x);
  line-height: var(--lh);
  letter-spacing: var(--track-title);
}

#game-dom .qz-answers {
  display: grid;
  gap: var(--gap-s);
}

#game-dom .qz-a {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  min-height: var(--g-quiz-a-h);
  width: 100%;
  margin: 0;
  padding: var(--gap-s) var(--gap-m);
  border: var(--g-quiz-border) solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-b);
  font-size: var(--fs-m);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--clay);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease), background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}

#game-dom .qz-a:active {
  transform: scale(var(--press));
  box-shadow: var(--clay-press);
}

#game-dom .qz-a:focus {
  outline: none;
}

#game-dom .qz-a:focus-visible {
  outline: var(--g-quiz-ring) solid var(--accent);
  outline-offset: var(--g-quiz-border);
}

#game-dom .qz-k {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--g-quiz-key);
  height: var(--g-quiz-key);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: var(--fw-x);
  font-size: var(--fs-s);
}

#game-dom .qz-t {
  flex: 1;
  min-width: 0;
}

#game-dom .qz-m {
  flex: none;
  display: grid;
  place-items: center;
  min-width: var(--g-quiz-key);
}

#game-dom .qz-a.right {
  background: var(--accent-soft);
  border-color: var(--accent);
  animation: qz-pop var(--t-med) var(--ease-bounce);
}

#game-dom .qz-a.right .qz-k {
  background: var(--accent);
  color: var(--on-accent);
}

#game-dom .qz-a.wrong {
  background: var(--danger-soft);
  border-color: var(--danger);
}

#game-dom .qz-a.wrong .qz-k {
  background: var(--danger);
  color: var(--on-accent);
}

#game-dom .qz-a.dim {
  opacity: var(--g-quiz-dim);
}

#game-dom .qz-a[aria-disabled='true'] {
  cursor: default;
}

#game-dom .qz-x {
  color: var(--danger);
  font-size: var(--fs-l);
  line-height: 1;
}

#game-dom .qz-foot {
  min-height: var(--g-quiz-foot);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-xs);
}

#game-dom .qz-fb {
  margin: 0;
  font-weight: var(--fw-x);
  font-size: var(--fs-m);
  animation: qz-in var(--t-med) var(--ease);
}

#game-dom .qz-fb.good {
  color: var(--good);
}

#game-dom .qz-fb.bad {
  color: var(--ink);
}

#game-dom .qz-src {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
}

#game-dom .qz-end {
  align-items: center;
  text-align: center;
  padding: var(--gap-xl) var(--gap-l);
}

#game-dom .qz-sr {
  position: absolute;
  width: var(--g-quiz-sr);
  height: var(--g-quiz-sr);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes qz-in {
  from {
    opacity: 0;
    transform: translateY(var(--gap-s));
  }
}

@keyframes qz-pop {
  50% {
    transform: scale(var(--g-quiz-pop));
  }
}
