.vocab-test-page {
  --app-top: #fffdf7;
  --app-middle: #f4f8ff;
  --app-bottom: #fff8f3;
  --app-text: #2c2b27;
  --app-subtext: #6b6558;
  --app-accent: #c17f54;
  --app-border: #c17f5440;
  --app-faint: #c17f5412;
  --app-input: #00000008;
  --app-line: #00000014;
  --app-track: #0000001f;
  min-height: calc(100vh - 108px);
  padding: 62px 0 88px;
  color: var(--app-text);
  background: linear-gradient(135deg, var(--app-top), var(--app-middle), var(--app-bottom));
}

.vocab-test-heading { max-width: 720px; text-align: center; }
.vocab-test-eyebrow {
  display: inline-block;
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.vocab-test-heading h1 { margin-top: 22px; font-size: clamp(44px, 5vw, 64px); }
.vocab-test-heading h1 em { color: var(--app-accent); }
.vocab-test-heading > p { max-width: 570px; margin: 18px auto 0; font-size: 17px; line-height: 1.55; }

.vocab-test-promises { display: flex; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.vocab-test-promises li {
  padding: 7px 12px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-top) 72%, transparent);
  color: var(--app-subtext);
  font-size: 12px;
}
.vocab-test-related { margin-top: 15px; font-size: 13px; }
.vocab-test-related a { color: var(--app-accent); text-decoration: underline; text-underline-offset: 3px; }

.vocab-test-stage { max-width: 520px; margin-top: 46px; }
.vocab-test-shell { width: 100%; }
.vocab-test-start {
  min-height: 500px;
  padding: 42px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background: linear-gradient(135deg, #ffeac8f2, #daecffe6, #f0e2ffeb);
  text-align: center;
}
.vocab-test-kicker { color: var(--app-subtext); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.vocab-test-question-mark { margin: 22px 0 8px; color: var(--app-accent); font: italic 300 76px/1 Crimson, serif; }
.vocab-test-start h2 { font-size: 32px; font-style: italic; }
.vocab-test-start > p:not(.vocab-test-kicker) { max-width: 390px; margin: 16px 0 28px; color: var(--app-subtext); font-size: 14px; line-height: 1.55; }

.vocab-app-primary {
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--app-accent), #8b7ec8);
  color: white;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.vocab-test-quiz {
  position: relative;
  min-height: 536px;
  padding: 22px 24px 28px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background: linear-gradient(135deg, #ffebd0, #ddeeff, #f1e4ff);
}
.vocab-test-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--app-subtext); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vocab-test-meta span { min-height: 35px; padding: 8px 13px; display: flex; align-items: center; border: 1px solid var(--app-border); border-radius: 99px; background: #fffdf799; }
.vocab-test-progress { height: 6px; margin: 15px 2px 0; overflow: hidden; border-radius: 99px; background: var(--app-track); }
.vocab-test-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-accent), #8b7ec8); transition: width .35s ease; }
.vocab-test-prompt { margin: 34px 0 0; color: var(--app-subtext); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.vocab-test-word { margin: 14px 0 28px; font: italic 300 clamp(47px, 8vw, 58px)/1.05 Crimson, serif; text-align: center; }
.vocab-test-word:focus { outline: none; }
.vocab-test-quiz.is-spelling { background: linear-gradient(135deg, #f0e2ffeb, #daecffe6, #ffeac8f2); }
.vocab-test-quiz.is-spelling .vocab-test-prompt::before {
  content: "Spelling check";
  display: block;
  margin-bottom: 8px;
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
}
.vocab-test-quiz.is-spelling .vocab-test-word {
  width: fit-content;
  min-width: 210px;
  margin: 14px auto 28px;
  padding: 14px 22px 16px;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: #fffdf7a8;
  font-size: clamp(36px, 7vw, 45px);
}
.vocab-test-answers { height: 246px; display: grid; grid-template-rows: repeat(4, 54px); gap: 10px; }
.vocab-test-answers button { width: 100%; min-width: 0; height: 54px; padding: 0 14px; border: 1px solid #c17f5438; border-radius: 14px; background: #ffffffd9; font-size: 15px; transition: background .12s, opacity .12s, transform .12s; }
.vocab-test-answers button:active:not(:disabled) { transform: scale(.98); }
.vocab-test-answers button:disabled { opacity: 1; }
.vocab-test-answers button.is-correct { border-color: #84a98c66; background: #84a98c2e; color: #2e7d32; }
.vocab-test-answers button.is-wrong { border-color: #e07b6559; background: #e07b6529; color: #c62828; }
.vocab-test-unsure { display: block; margin: 14px auto 0; padding: 4px 10px; color: var(--app-subtext); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }

.vocab-test-result { display: grid; gap: 16px; }
.vocab-test-result-hero { padding: 34px 28px; display: flex; align-items: center; flex-direction: column; gap: 16px; border: 1px solid var(--app-border); border-radius: 24px; background: linear-gradient(135deg, #ffeac8f2, #daecffe6, #f0e2ffeb); text-align: center; }
.vocab-test-result-hero h2 { font-size: 20px; font-style: italic; }
.vocab-test-total { display: flex; align-items: baseline; gap: 8px; }
.vocab-test-total strong { color: var(--app-text); font: 300 66px/1 Crimson, serif; font-variant-numeric: lining-nums tabular-nums; }
.vocab-test-total span { color: var(--app-subtext); font-size: 13px; }
.vocab-test-level { --level: #d4a373; padding: 8px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--level) 45%, transparent); border-radius: 99px; background: linear-gradient(135deg, color-mix(in srgb, var(--level) 28%, transparent), color-mix(in srgb, var(--level) 12%, transparent)); font-size: 13px; font-weight: 500; }
.vocab-test-level b { padding: 4px 11px; border-radius: 99px; background: var(--level); color: white; font-size: 11px; letter-spacing: .8px; }
.vocab-test-range { color: var(--app-subtext); font-size: 13px; }
.vocab-test-cta { padding: 26px 24px; border: 1px solid var(--app-border); border-radius: 24px; background: linear-gradient(135deg, #c17f5410, #8b7ec812); text-align: center; }
.vocab-test-cta h3 { font-size: 29px; font-style: italic; }
.vocab-test-cta p { max-width: 400px; margin: 12px auto 20px; color: var(--app-subtext); font-size: 13px; line-height: 1.55; }
.vocab-test-cta .vocab-app-primary { min-height: 60px; }
.vocab-test-result-details { overflow: hidden; border: 1px solid var(--app-border); border-radius: 24px; background: var(--app-top); }
.vocab-test-summary { padding: 18px 22px; color: var(--app-subtext); font-size: 13px; line-height: 1.55; text-align: center; }
.vocab-test-hardest { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 18px 22px; border-top: 1px solid var(--app-line); }
.vocab-test-hardest span { color: var(--app-subtext); font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.vocab-test-hardest strong { grid-row: span 2; color: var(--app-accent); font: italic 300 30px Crimson, serif; }
.vocab-test-hardest small { color: var(--app-subtext); }
.vocab-test-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vocab-test-result-actions button { min-height: 46px; color: var(--app-subtext); border: 1px solid var(--app-border); border-radius: 16px; background: transparent; font-size: 13px; }
.vocab-test-method { padding: 4px 20px 0; color: var(--app-subtext); font-size: 11px; line-height: 1.5; text-align: center; }

.vocab-test-page button:focus-visible,
.vocab-test-page a:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 4px; }

@media (max-width: 620px) {
  .vocab-test-page { min-height: calc(100vh - 82px); padding: 38px 0 64px; }
  .vocab-test-heading,
  .vocab-test-stage { width: min(100% - 40px, 520px); }
  .vocab-test-heading h1 { font-size: 41px; }
  .vocab-test-heading h1 br { display: none; }
  .vocab-test-heading > p { font-size: 15px; }
  .vocab-test-promises { gap: 5px; }
  .vocab-test-promises li { padding: 6px 9px; font-size: 11px; }
  .vocab-test-stage { margin-top: 34px; }
  .vocab-test-start { min-height: 485px; padding: 34px 24px; }
  .vocab-test-quiz { min-height: 520px; padding: 18px; }
  .vocab-test-meta { font-size: 10px; }
  .vocab-test-meta span { min-height: 31px; padding: 7px 10px; }
  .vocab-test-prompt { margin-top: 28px; }
  .vocab-test-word { margin-bottom: 24px; }
  .vocab-test-result-hero { padding: 30px 20px; }
  .vocab-test-total strong { font-size: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .vocab-test-progress span,
  .vocab-test-answers button { transition: none; }
}