:root {
  --ds-bg: #f4efe6;
  --ds-bg-deep: #ebe2d4;
  --ds-surface: rgba(255, 252, 247, 0.92);
  --ds-surface-strong: #fffdf9;
  --ds-surface-soft: rgba(255, 252, 247, 0.76);
  --ds-text: #22313d;
  --ds-muted: #66717c;
  --ds-primary: #315d74;
  --ds-primary-dark: #163f57;
  --ds-accent: #b48957;
  --ds-success: #2f7d55;
  --ds-success-soft: #e2f0e7;
  --ds-error: #b9473a;
  --ds-error-soft: #f6e4e0;
  --ds-line: rgba(62, 74, 87, 0.14);
  --ds-radius-sm: 12px;
  --ds-radius-md: 20px;
  --ds-radius-lg: 28px;
  --ds-shadow-sm: 0 10px 24px rgba(48, 43, 34, 0.06);
  --ds-shadow-lg: 0 20px 50px rgba(35, 49, 61, 0.12);
  --ds-font-heading: "EB Garamond", Georgia, "Times New Roman", serif;
  --ds-font-body: "Inter", "Segoe UI", Arial, sans-serif;
}

body.quiz-page {
  --quiz-accent: var(--ds-accent);
  --quiz-accent-soft: rgba(180, 137, 87, 0.14);
  min-height: 100vh;
  margin: 0;
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  background:
    radial-gradient(circle at top left, rgba(180, 137, 87, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(49, 93, 116, 0.12), transparent 26%),
    linear-gradient(180deg, #f8f4ed 0%, var(--ds-bg) 52%, var(--ds-bg-deep) 100%);
}

body.quiz-theme-medieval {
  --quiz-accent: #9b7841;
  --quiz-accent-soft: rgba(155, 120, 65, 0.14);
}

body.quiz-theme-modern {
  --quiz-accent: #87525d;
  --quiz-accent-soft: rgba(135, 82, 93, 0.13);
}

body.quiz-theme-rome {
  --quiz-accent: #a65f46;
  --quiz-accent-soft: rgba(166, 95, 70, 0.14);
}

body.quiz-theme-battles {
  --quiz-accent: #4d6675;
  --quiz-accent-soft: rgba(77, 102, 117, 0.14);
}

.quiz-page,
.quiz-page button,
.quiz-page select,
.quiz-page input {
  font-family: var(--ds-font-body);
}

.quiz-page h1,
.quiz-page h2,
.quiz-page h3 {
  color: var(--ds-text);
  font-family: var(--ds-font-heading);
  text-wrap: balance;
}

.quiz-page p {
  max-width: 72ch;
}

.quiz-page button,
.quiz-page select,
.quiz-page a {
  -webkit-tap-highlight-color: transparent;
}

.quiz-page :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--quiz-accent) 72%, white);
  outline-offset: 3px;
}

.quiz-page .primary,
.quiz-page .secondary {
  min-height: 46px;
  border-radius: var(--ds-radius-sm);
  font-weight: 800;
}

.quiz-page .primary {
  color: #fff;
  border: 1px solid var(--ds-primary-dark);
  background: var(--ds-primary-dark);
  box-shadow: var(--ds-shadow-sm);
}

.quiz-page .secondary {
  color: var(--ds-primary-dark);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
}

.quiz-page .text-link-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  color: var(--ds-primary-dark);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  font-weight: 800;
  text-decoration: none;
}

@media (hover: hover) {
  .quiz-page .primary:hover,
  .quiz-page .secondary:hover,
  .quiz-page .text-link-button:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-page *,
  .quiz-page *::before,
  .quiz-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}