/* Mode tabs and the multiple-choice quiz. Same rules as the rest: white boards, ink, line
   colours only on small areas, screentone on the result card. */

/* ---------- mode tabs ---------- */
.modes { display: flex; width: fit-content; margin-top: 14px; border: 1.5px solid var(--ink); border-radius: 2px; }
.modes button {
  min-height: 40px;
  padding: 6px 16px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: 700 0.9rem/1.2 var(--font-body);
  cursor: pointer;
}
:lang(ja) .modes button { font-family: var(--font-station); }
.modes button + button { border-left: 1.5px solid var(--ink); }
.modes button:hover { background: #f7f7f4; }
.modes button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* The quiz takes the console + line-list rows; the recall controls step aside. */
.app[data-mode="quiz"] .console, .app[data-mode="quiz"] .lines { display: none; }
.app:not([data-mode="quiz"]) .quiz { display: none; }
.quiz {
  grid-column: console;
  grid-row: console-start / lines-end;
  min-height: 0;
  overflow-y: auto;
  padding: 14px var(--gutter) 12px;
}

/* ---------- picker ---------- */
.quiz-intro { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.quiz-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quiz-mode {
  position: relative;
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 14px 44px 14px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, background-color 0.15s ease;
}
.quiz-mode:hover { background: #f7f7f4; }
.quiz-mode:active { transform: translateY(1px); }
.quiz-mode::after { /* a small ink triangle, like a signage arrow */
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 12px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
}
.quiz-mode-name { font: 400 1.3rem/1.2 var(--font-display); font-feature-settings: "palt"; }
.quiz-mode-desc { color: var(--ink-soft); font-size: 0.86rem; }
.quiz-mode-best { font: 600 0.8rem var(--font-num); color: var(--ink-soft); }

/* ---------- question ---------- */
.quiz-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.quiz-hud p { margin: 0; }
.quiz-progress { margin: 0 0 8px; font: 600 0.85rem var(--font-num); color: var(--ink-soft); }
:lang(ja) .quiz-progress { font-family: var(--font-station); }
.quiz-board .quiz-answer { color: var(--ink-soft); letter-spacing: 0.3em; }
.quiz-board .quiz-answer.revealed { color: var(--ink); letter-spacing: 0.06em; }
.board-band .terminus { font-size: 0.85em; opacity: 0.85; }

.quiz-options { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, background-color 0.15s ease;
}
.quiz-option:hover:not(:disabled) { background: #f7f7f4; }
.quiz-option:active:not(:disabled) { transform: translateY(1px); }
.quiz-key {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 700 0.8rem var(--font-num);
}
.quiz-option-ja { font: 700 1.15rem/1.2 var(--font-station); overflow-wrap: anywhere; }
.quiz-option-sub { font-size: 0.78rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.quiz-option.is-correct { border-color: var(--ok); background: #e2f0e7; box-shadow: inset 0 0 0 1.5px var(--ok); }
.quiz-option.is-wrong { border-color: var(--stamp); background: #f8e4e5; box-shadow: inset 0 0 0 1.5px var(--stamp); }
.quiz-option:disabled { cursor: default; }
.quiz-option:disabled:not(.is-correct):not(.is-wrong) { opacity: 0.45; }
.quiz-feedback { margin-top: 8px; }

/* ---------- answer log ---------- */
.quiz-log-wrap { margin-top: 18px; }
.quiz-log-wrap h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.quiz-log-wrap h3::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.quiz-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.quiz-log li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; gap: 8px; padding: 4px 8px; background: var(--surface); font-size: 0.9rem; }
.quiz-log-mark { font-weight: 700; }
.quiz-log li.ok .quiz-log-mark { color: var(--ok); }
.quiz-log li.ng .quiz-log-mark { color: var(--stamp); }
.quiz-log-ms { font: 600 0.82rem var(--font-num); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- result ---------- */
.quiz-result {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 18px;
  border-radius: 4px;
  background:
    radial-gradient(circle, rgb(32 110 100 / 0.13) 0 0.8px, transparent 1.2px) 0 0 / 4px 4px,
    var(--ticket);
}
.quiz-result-title { margin: 0; padding-right: 110px; font-size: 1rem; }
.quiz-score { margin: 8px 0 0; display: flex; align-items: baseline; gap: 6px; }
.quiz-score strong { font: 400 3.4rem/0.95 var(--font-display); }
.quiz-score span { font-weight: 700; color: var(--ink-soft); }
.quiz-newbest { margin: 6px 0 0; color: var(--stamp); font-weight: 700; }
.quiz-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quiz-meta dd { font-size: 1rem; }
.quiz-result .stamp.quiz-stamp { top: 10px; right: 12px; width: 100px; }

.quiz-review { margin-top: 18px; }
.quiz-review h3 { margin: 0 0 6px; font-size: 0.9rem; }
.quiz-review ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.quiz-review li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 2px;
}
.quiz-review li .roundel { grid-row: 1 / 3; }
.quiz-review-clue { font-size: 0.92rem; }
.quiz-review-chose { font-size: 0.78rem; color: var(--ink-soft); }

@media (max-width: 520px) {
  .quiz-meta { grid-template-columns: 1fr 1fr; }
  .quiz-meta div:nth-child(3) { border-left: 0; padding-left: 0; }
  .quiz-meta div:nth-child(n + 3) { border-top: 1px solid rgb(29 34 51 / 0.3); }
}

@media (max-width: 360px) {
  .quiz-option-ja { font-size: 1rem; }
  .quiz-option { padding: 8px; column-gap: 8px; }
}