/* Classroom play: a clear question, distinct choices, then the explanation. */
@media screen {
  .quiz-sheet {
    max-width: 1000px;
    margin: 24px auto 48px;
    padding: 28px;
    background: #30214e;
    color: #fff;
    border: 1px solid #74628f;
    border-radius: 20px;
    box-shadow: 0 8px 0 #120c2380;
    font-family: var(--sans);
  }
  .quiz-sheet button { font-family: var(--sans); }
  .quiz-bar {
    margin-bottom: 24px;
    padding-bottom: 0;
    border: 0;
    color: #e0d7f2;
    font-size: 14px;
    flex-wrap: wrap;
  }
  .quiz-bar button {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
  }
  .quiz-number {
    color: #eee5ff;
    font-size: 14px;
    letter-spacing: 0;
    margin: 0 0 10px;
  }
  .quiz-progress { display: flex; gap: 7px; margin-bottom: 24px; }
  .quiz-progress span { height: 6px; flex: 1; background: #74628f; border-radius: 4px; }
  .quiz-progress .done { background: #b7e5cb; }
  .quiz-progress .current { background: #f8d775; }
  .quiz-question-card { background: #fffdf7; color: #202639; padding: 28px; border-radius: 12px; }
  .quiz-sheet h1,
  html[data-look=arcade] .quiz-sheet h1 {
    font: 750 32px/1.35 var(--sans);
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 20px;
  }
  .quiz-sheet h1.quiz-prompt,
  html[data-look=arcade] .quiz-sheet h1.quiz-prompt {
    font: 750 clamp(23px, 2.4vw, 30px)/1.45 var(--sans);
    color: #202639;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .quiz-context {
    background: transparent;
    border-top: 1px solid #d8d4df;
    margin-top: 22px;
    padding: 16px 0 0;
    font-size: 15px;
    line-height: 1.65;
  }
  .quiz-context summary { min-height: 28px; }
  .quiz-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0 0; }
  .quiz-options > button {
    --tile: #ffb3a3;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    background: var(--tile);
    color: #182338;
    border: 3px solid transparent;
    border-radius: 10px;
    padding: 20px;
    min-height: 110px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 4px 0 #100a2080;
    transition: transform .12s ease, box-shadow .12s ease;
    overflow-wrap: anywhere;
  }
  .quiz-options > button:nth-child(2) { --tile: #9bd7ff; }
  .quiz-options > button:nth-child(3) { --tile: #f8d775; }
  .quiz-options > button:nth-child(4) { --tile: #c6b4ff; }
  .quiz-options > button > .quiz-letter {
    min-width: 38px;
    height: 38px;
    border: 2px solid #18233866;
    border-radius: 8px;
    font-size: 19px;
  }
  .quiz-options > button:hover:not(:disabled) { background: var(--tile); transform: translateY(-2px); }
  .quiz-options > button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #100a2080; }
  .quiz-options > button.selected {
    background: var(--tile);
    border: 3px solid #182338;
    outline: 3px solid #fff;
    outline-offset: 2px;
    padding: 20px;
  }
  .quiz-choice-note { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; }
  .quiz-options.answered > button:not(.correct):not(.wrong) { background: #e1dbe9; color: #4b4558; box-shadow: none; }
  .quiz-options > button.correct { background: #b7e5cb; border: 3px solid #1e6240; padding: 20px; }
  .quiz-options > button.wrong { background: #f6d7d0; border: 3px dashed #8e3d2d; padding: 20px; outline: 0; }
  .quiz-explanation {
    margin: 24px 0 0;
    padding: 22px 24px;
    background: #fffdf7;
    border: 0;
    border-radius: 12px;
    color: #202639;
    font-size: 17px;
    line-height: 1.65;
  }
  .quiz-explanation > strong { font-size: 22px; }
  .quiz-explanation p { margin: 8px 0 0; }
  .quiz-actions { border: 0; padding: 0; margin-top: 26px; flex-wrap: wrap; }
  .quiz-actions > button {
    min-height: 52px;
    font: 700 17px/1.4 var(--sans);
    padding: 13px 24px;
    border: 2px solid #e0d7f2;
    border-radius: 8px;
    background: transparent;
    color: #fff;
  }
  .quiz-actions > button.quiz-primary { background: #fffdf7; color: #30214e; border-color: #fffdf7; box-shadow: 0 4px 0 #100a2080; }
  .quiz-actions > button:disabled { background: #57466f; color: #ded5ed; border-color: #74628f; box-shadow: none; }
  .quiz-sheet button:focus-visible,
  .quiz-sheet summary:focus-visible { outline: 3px solid #f8d775; outline-offset: 5px; }
  .quiz-question-card summary:focus-visible { outline-color: #543787; }
  .quiz-options > button:focus-visible { outline: 3px solid #fff; }
  .quiz-finish-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #f8d775; color: #30214e; font-size: 36px; margin-bottom: 22px; }
  .quiz-score { color: #f8d775; font-size: 28px; font-weight: 700; }
  .quiz-review button { border: 1px solid #a08dbd; border-radius: 8px; background: #41305f; color: #fff; font-size: 16px; min-height: 56px; }

  /* Keep the arcade artwork; make the teaching screens easy to read aloud. */
  .play-header h1,
  html[data-look=arcade] .play-header h1 { font: 750 34px/1.25 var(--sans); letter-spacing: 0; margin-top: 22px; }
  .guided-stage,
  html[data-look=arcade] .guided-stage { border-radius: 14px; border-top: 5px solid var(--primary); }
  .guided-stage h2 { font-size: 28px; letter-spacing: 0; }
  .step-nav { gap: 10px; border: 0; }
  .step-nav button { border: 1px solid var(--line); border-radius: 9px; background: var(--white); font-weight: 700; }
  .step-nav button span { border-radius: 50%; padding: 4px 8px; }
  .step-nav button[aria-current=step] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
  .step-nav button[aria-current=step] span { border-color: currentColor; }
  .guided-game .btn,
  html[data-look=arcade] .guided-game .btn { min-height: 48px; font-size: 16px; border-radius: 8px; box-shadow: 0 3px 0 var(--line); }
  .guided-stage .sport-choice { min-height: 84px; border-radius: 10px; font-size: 19px; padding: 20px; }
  .guided-stage .sport-choice:first-child { background: #9bd7ff; color: #182338; }
  .guided-stage .sport-choice:nth-child(2) { background: #f8d775; color: #182338; }
  .guided-stage .sport-choice.is-correct { background: #b7e5cb; color: #183c29; border: 2px solid #418c60; }
  .guided-stage .sport-choice.is-wrong { background: #f6d7d0; color: #632c22; border: 2px dashed #a45343; }
  .sport-choice .sport-answer-label { display: block; margin-top: 10px; color: inherit; font: 700 14px/1.5 var(--sans); }
  .guided-stage .sport-answer-summary { max-width: none; padding: 16px 20px; border-radius: 8px; background: var(--inset); font-size: 18px; }
  .behavior-stage .story-option,
  html[data-look=arcade] .behavior-stage .story-option { min-height: 70px; border-radius: 10px; border-left: 5px solid #c6b4ff; padding: 18px 20px; font-size: 17px; line-height: 1.55; }
  .behavior-stage .story-option:nth-child(2) { border-left-color: #9bd7ff; }
  .behavior-stage .story-option:nth-child(3) { border-left-color: #f8d775; }
  html[data-size=large] .quiz-sheet h1.quiz-prompt { font-size: 34px; }
  html[data-size=large] .quiz-options > button { font-size: 21px; }
}
@media screen and (max-width: 700px) {
  .quiz-sheet { padding: 18px; margin: 18px 0 36px; border-radius: 14px; }
  .quiz-bar { gap: 6px 16px; margin-bottom: 16px; }
  .quiz-bar > span { font-size: 12px; }
  .quiz-progress { margin-bottom: 18px; }
  .quiz-question-card { padding: 20px; }
  .quiz-options { grid-template-columns: 1fr; gap: 13px; margin-top: 18px; }
  .quiz-options > button,
  .quiz-options > button.selected,
  .quiz-options > button.correct,
  .quiz-options > button.wrong { min-height: 80px; padding: 14px; gap: 12px; font-size: 17px; }
  .quiz-explanation { padding: 20px; font-size: 16px; }
  .quiz-actions { margin-top: 22px; }
  .quiz-actions > button { flex: 1; }
  .play-header h1,
  html[data-look=arcade] .play-header h1 { font-size: 29px; }
  .guided-stage h2 { font-size: 25px; }
  .step-nav { gap: 6px; }
  .step-nav button { font-size: 12px; gap: 6px; padding: 10px 6px; flex-direction: column; }
  .guided-game .btn,
  html[data-look=arcade] .guided-game .btn { font-size: 15px; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .quiz-options > button { transition: none; }
}
html[data-motion=reduced] .quiz-options > button { transition: none; }