:root {
  --paper: #ffffff;
  --panel: #f5f9ff;
  --ink: #07111f;
  --muted: #5e6a78;
  --blue: #0071e3;
  --blue-deep: #0047c2;
  --yellow: #ffd60a;
  --good: #17a773;
  --bad: #e03b5d;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(0,113,227,0.16), transparent 30vw),
    linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px clamp(16px, 3vw, 42px);
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid rgba(0,113,227,0.24);
  backdrop-filter: blur(18px);
}

.brand,
.mini-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0,113,227,0.35);
  border-radius: 50%;
  font-weight: 900;
}

.mini-stats span {
  border: 1px solid rgba(0,113,227,0.28);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(255,255,255,0.78);
  font-size: 0.86rem;
  font-weight: 900;
}

.view { display: none; }
.view.active { display: block; }

.hero {
  min-height: calc(100dvh - 73px);
  padding: clamp(28px, 5vw, 70px) clamp(16px, 5vw, 72px);
}

.hero-type {
  display: grid;
  max-width: 940px;
  margin-bottom: clamp(26px, 4vw, 46px);
  font-size: clamp(4rem, 8.4vw, 8.8rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0;
}

.hero-type span:nth-child(even) { margin-left: clamp(20px, 13vw, 170px); }

.setup-panel,
.question-card,
.results article,
.review-item {
  border: 1px solid rgba(0,113,227,0.28);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(0,71,194,0.08);
}

.setup-panel {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 4vw, 42px);
  background: var(--panel);
  width: 100%;
  max-width: 100%;
}

.kicker {
  margin: 0;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 0;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.88;
  letter-spacing: 0;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mode {
  min-height: 154px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0,113,227,0.28);
  background: white;
  padding: 16px;
  text-align: left;
}

.mode.active {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: white;
}

.mode:hover:not(.active) {
  background: var(--yellow);
}

.mode strong { font-size: 1.35rem; line-height: 1; }
.mode span { color: inherit; opacity: 0.76; }

.setup-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.setup-controls label {
  display: grid;
  gap: 9px;
  font-weight: 900;
}

input[type="range"] {
  accent-color: var(--blue);
}

.primary-action,
.secondary-action,
.quiz-hud button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(0,113,227,0.34);
  border-radius: 999px;
  padding: 0 20px;
  background: var(--blue);
  color: white;
  font-weight: 900;
}

.secondary-action {
  background: white;
  color: var(--ink);
}

.quiz {
  padding: 22px clamp(16px, 5vw, 72px) 60px;
}

.quiz-hud {
  position: sticky;
  top: 74px;
  z-index: 9;
  display: grid;
  grid-template-columns: 88px repeat(3, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.quiz-hud span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid rgba(0,113,227,0.28);
  border-radius: 999px;
  background: var(--panel);
  font-weight: 900;
}

.timer-track {
  height: 12px;
  border: 1px solid rgba(0,113,227,0.28);
  background: #dcecff;
  margin-bottom: 18px;
}

.timer-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform-origin: left center;
}

.question-card {
  min-height: 520px;
  padding: clamp(24px, 5vw, 60px);
}

#context {
  display: none;
  white-space: pre-wrap;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(0,113,227,0.28);
  background: var(--paper);
  color: var(--muted);
}

#context.has-context { display: block; }

#question {
  max-width: 980px;
  margin: 16px 0 34px;
  font-size: clamp(2.3rem, 6vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.option {
  min-height: 86px;
  border: 1px solid rgba(0,113,227,0.28);
  background: white;
  padding: 16px;
  text-align: left;
  font-weight: 900;
  transition: transform 160ms ease, background 160ms ease;
}

.option:hover:not(:disabled) {
  transform: translateY(-4px);
  background: var(--yellow);
}

.option.correct { background: var(--good); color: white; }
.option.incorrect { background: var(--bad); color: white; }
.option:disabled { cursor: default; }

.next {
  display: none;
  margin-top: 18px;
}

.results {
  padding: clamp(36px, 7vw, 88px) clamp(16px, 5vw, 72px);
}

.results h2 {
  max-width: 880px;
  font-size: clamp(3.4rem, 11vw, 11rem);
  line-height: 0.82;
  letter-spacing: 0;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 32px 0;
}

.results article {
  min-height: 190px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.results article span {
  font-size: clamp(2.7rem, 6vw, 6rem);
  font-weight: 900;
  letter-spacing: 0;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.review-list {
  display: none;
  gap: 10px;
  margin-top: 28px;
}

.review-list.open {
  display: grid;
}

.review-item {
  padding: 18px;
}

.review-item strong {
  display: block;
  margin-bottom: 10px;
}

@media (max-width: 800px) {
  .topbar,
  .mini-stats,
  .setup-controls,
  .mode-grid,
  .options,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .topbar,
  .mini-stats {
    align-items: flex-start;
  }

  .hero {
    overflow-x: hidden;
    padding-left: 16px;
    padding-right: 16px;
  }

  .mode-grid {
    width: calc(100vw - 76px);
    max-width: 100%;
  }

  .setup-panel {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .hero-type {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
    line-height: 0.86;
  }

  .quiz-hud {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-card {
    min-height: 0;
    padding: 22px;
  }

  #question {
    font-size: clamp(2.15rem, 11vw, 3.8rem);
    line-height: 1;
  }
}