/* "Do you know today's word?" on the landing page. Radio buttons and CSS, so it works with no
   script: a pick marks the right meaning with a tick and the picked wrong one with a cross (never by
   colour alone), Nomi takes his correct or wrong pose, and a line says which, with a link to /word.
   Option cards follow BRIEF.md's quiz answers; how they move is motion.css. */

.quiz { position: relative; margin-top: 52px; max-width: 600px; }
.quiz-card {
  position: relative; margin: 0; min-width: 0;
  border: 2px solid var(--ink); border-radius: 26px; background: var(--card); box-shadow: 0 5px 0 var(--ink);
  padding: 22px 18px 18px;
}
/* A legend floated so it lays out as a block inside the fieldset. */
.quiz-head { float: left; width: 100%; padding: 0; margin: 0; }
.quiz-head + * { clear: both; }
.quiz-ask {
  display: block; margin-top: 8px;
  font: 800 28px/1.12 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.02em;
}
.quiz-ask .hl { white-space: normal; }
.quiz-say { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 10px; }
.quiz-hint { font-size: 15px; color: var(--ink-2); }

.pick { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.option {
  display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 10px; padding: 12px 12px 12px 14px;
  border: 2px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line);
  font-size: 16px; line-height: 1.38; font-weight: 500; cursor: pointer;
}
.quiz-say + .pick + .option { margin-top: 16px; }
.option:hover { border-color: var(--peri); box-shadow: 0 4px 0 var(--peri); }
.pick:focus-visible + .option { outline: 3px solid var(--ink); outline-offset: 3px; }
.option .key {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--card);
  display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--mono); color: var(--ink-2);
}
.option .meaning { flex: 1; min-width: 0; }
.option .mark {
  flex: none; position: relative; width: 28px; height: 28px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--card);
  display: flex; align-items: center; justify-content: center;
}
.mark svg, .verdict-mark svg { width: 14px; height: 14px; stroke: var(--card); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mark .tick, .mark .cross { opacity: 0; }
.mark .sr { display: none; }

/* The right meaning, once anything is picked: picked, or shown after a wrong pick. */
.pick-right:checked + .option,
.quiz-card:has(.pick:checked) .pick-right + .option {
  border-color: var(--good); background: var(--good-soft); box-shadow: 0 4px 0 var(--good);
}
.pick-right:checked + .option .mark,
.quiz-card:has(.pick:checked) .pick-right + .option .mark { background: var(--good); border-color: var(--good); }
.pick-right:checked + .option .tick,
.quiz-card:has(.pick:checked) .pick-right + .option .tick { opacity: 1; }
.pick-right:checked + .option .said-right,
.quiz-card:has(.pick:checked) .pick-right + .option .said-right { display: block; }

/* The wrong meaning that was picked. */
.pick-wrong:checked + .option { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 4px 0 var(--bad); }
.pick-wrong:checked + .option .mark { background: var(--bad); border-color: var(--bad); }
.pick-wrong:checked + .option .cross { opacity: 1; }
.pick-wrong:checked + .option .said-wrong { display: block; }

/* The other wrong one steps back. */
.quiz-card:has(.pick:checked) .pick-wrong:not(:checked) + .option { opacity: 0.5; }
.quiz-card:has(.pick:checked) .quiz-hint { visibility: hidden; }

/* Nomi sits on the card's top edge, his shadow on its border. */
.mascot { position: absolute; z-index: 1; right: 14px; bottom: calc(100% - 8px); width: 104px; height: auto; overflow: visible; }
.mascot .m-eyes, .mascot .m-mouth, .mascot .m-blush, .mascot .m-sparkles, .mascot .m-sweat { transition: opacity 200ms ease; }
.pick-right:checked ~ .mascot .m-open,
.pick-right:checked ~ .mascot .m-smile { opacity: 0; }
.pick-right:checked ~ .mascot .m-happy,
.pick-right:checked ~ .mascot .m-blush,
.pick-right:checked ~ .mascot .m-grin,
.pick-right:checked ~ .mascot .m-sparkles { opacity: 1; }
.pick-wrong:checked ~ .mascot .m-open,
.pick-wrong:checked ~ .mascot .m-smile { opacity: 0; }
.pick-wrong:checked ~ .mascot .m-closed,
.pick-wrong:checked ~ .mascot .m-frown,
.pick-wrong:checked ~ .mascot .m-sweat { opacity: 1; }

.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-height: 48px; margin-top: 16px; }
.verdict p { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.4; }
.verdict-idle { font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.verdict .verdict-right, .verdict .verdict-wrong, .verdict .verdict-link { display: none; }
.verdict-mark { flex: none; width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.verdict-right .verdict-mark { background: var(--good); }
.verdict-wrong .verdict-mark { background: var(--bad); }
.verdict-right strong { color: var(--good-ink); }
.verdict-wrong strong { color: var(--bad-ink); }
.pick:checked ~ .verdict .verdict-idle { display: none; }
.pick-right:checked ~ .verdict .verdict-right,
.pick-wrong:checked ~ .verdict .verdict-wrong { display: flex; }
.pick:checked ~ .verdict .verdict-link { display: inline-flex; }

@media (min-width: 720px) {
  .quiz-card { padding: 26px 24px 22px; }
  .quiz-ask { font-size: 32px; }
  .mascot { right: 22px; width: 124px; }
}