/* ============================================================
   anime-quiz.css — アニメクイズ（/quiz/）と作品ページの「登場するクイズ」
   ページ chrome は anime-season.css（body.anime-season-page）を継承し、
   色は style.css のデザイントークン（--ink / --rule / --indigo / --vod-flat 等）だけを使う。
   スマホ優先: 1 カラム・タップ領域 48px 以上。
   ============================================================ */

/* ── ページ上部 ─────────────────────────────────────── */
.anime-quiz-page .aq-lead {
  margin: .5rem 0 0;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--ink-muted);
}
.anime-quiz-page .aq-lead a { color: var(--indigo); }
.aq-lead__count {
  display: inline-block;
  margin-left: .4rem;
  color: var(--ink);
  font-weight: 700;
}
.aq-score {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--ink);
}
.aq-score [data-aq-correct] { font-weight: 700; color: var(--indigo); }

/* 幅・余白・見出しは曜日別ページ等と同じ（.anime-season-main__inner / .anime-section）に揃える。
   クイズ部分だけ幅を絞って中央寄せにすると、ヘッダーや下のランキングと左端がずれるため */
.aq-section > .anime-section__title { margin-bottom: .75rem; }

/* ── 問題カード ─────────────────────────────────────── */
.aq-list { display: grid; gap: 1rem; }
.aq-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1rem;
  scroll-margin-top: 5rem;
}
.aq-card--featured { border-color: var(--indigo); box-shadow: inset 3px 0 0 var(--indigo); }
.aq-card__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin: 0 0 .5rem;
}
.aq-card__no {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--indigo);
  line-height: 1.3;
}
.aq-card__no::before, .aq-card__no::after { display: none; } /* 親テーマの h2 装飾を打ち消す */
/* .anime-section 内の h2 には親テーマ・anime-season.css の見出し装飾（余白 20px・22px 等）が
   より強い指定で当たるので、同じ強さ以上で打ち消して問題文と左端を揃える */
.anime-quiz-page .anime-section .aq-card .aq-card__no {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.15rem;
  line-height: 1.3;
}
.aq-card__meta {
  margin: 0;
  display: flex;
  gap: .75rem;
  font-size: .75rem;
  color: var(--ink-muted);
}
.aq-card__work {
  margin: 0 0 .35rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
}
.aq-card__question {
  margin: 0 0 .9rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
}

/* ── 4 択 ──────────────────────────────────────────── */
.aq-choices { display: grid; gap: .5rem; }
/* PC は 2 列（横に長い 1 列ボタンにしない）。スマホは 1 列 */
@media (min-width: 768px) {
  .aq-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.aq-choice {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 52px;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .aq-choice:not(:disabled):hover { background: var(--hover-bg); border-color: var(--indigo); }
}
.aq-choice:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.aq-choice:disabled { cursor: default; }
.aq-choice__mark { flex: 0 0 auto; font-size: 1.1rem; color: var(--indigo); }
.aq-choice__label { flex: 1 1 auto; word-break: break-word; }
.aq-choice__state { flex: 0 0 auto; font-size: .75rem; font-weight: 700; }
.aq-choice.is-chosen { border-color: var(--indigo); background: var(--indigo-soft); }
/* 正誤は色だけで伝えない（「正解」「あなたの回答」の文字を併記） */
.aq-choice.is-correct {
  border-color: var(--vod-flat);
  background: var(--vod-flat-soft);
  box-shadow: inset 0 0 0 1px var(--vod-flat);
}
.aq-choice.is-correct .aq-choice__state { color: var(--vod-flat); }
.aq-choice.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.aq-choice.is-wrong .aq-choice__state { color: var(--danger); }
.aq-card.is-answered .aq-choice:not(.is-correct):not(.is-wrong) { opacity: .7; }

.aq-card__status { margin: .5rem 0 0; min-height: 0; font-size: .8rem; color: var(--ink-muted); }
.aq-card__status:empty { display: none; }
.aq-card__status.is-error { color: var(--danger); font-weight: 700; }
/* 回答後は下の「正解！/残念！」と同じ内容なので、読み上げ用にだけ残して見た目は隠す */
.aq-card.is-answered .aq-card__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── 回答後 ────────────────────────────────────────── */
.aq-card__result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.aq-result__verdict {
  margin: 0 0 .25rem;
  font-size: 1.25rem;
  font-weight: 800;
  outline: none;
}
.aq-result__verdict.is-correct { color: var(--vod-flat); }
.aq-result__verdict.is-wrong { color: var(--ink); }
.aq-result__answer { margin: 0 0 .6rem; font-size: 1rem; color: var(--ink); }
.aq-result__answer strong { font-size: 1.08rem; }
.aq-result__explain {
  margin: 0 0 1rem;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--ink);
}

/* 「この作品を見返す」: 広告に見えないよう、ボタンではなく静かな面＋テキストリンク */
.aq-rewatch {
  margin: 0 0 1rem;
  padding: .85rem;
  background: var(--ground);
  border: 1px solid var(--rule);
}
.aq-rewatch__title {
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: .98rem;
  font-weight: 700;
  color: var(--ink);
}
.aq-rewatch__title::before, .aq-rewatch__title::after,
.aq-appeared__title::before, .aq-appeared__title::after { display: none; }
.aq-rewatch__body { display: flex; gap: .75rem; align-items: flex-start; }
.aq-rewatch__thumb { flex: 0 0 96px; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rule); }
.aq-rewatch__thumb img,
.aq-appeared__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aq-rewatch__info { flex: 1 1 auto; min-width: 0; }
.aq-rewatch__lead { margin: 0 0 .35rem; font-size: .82rem; font-weight: 700; color: var(--vod-flat); }
.aq-rewatch__lead--muted { color: var(--ink-muted); font-weight: 400; }
.aq-vod-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.aq-vod-chip {
  margin: 0;
  padding: .2rem .55rem;
  border: 1px solid var(--vod-flat);
  border-radius: 999px;
  background: #fff;
  font-size: .78rem;
  color: var(--vod-flat);
}
.aq-rewatch__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--indigo);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aq-rewatch__link::before { content: '→'; margin-right: .3rem; text-decoration: none; }

/* 今回登場したアニメ */
.aq-appeared__title {
  margin: 0 0 .5rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.aq-appeared__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.aq-appeared__item { margin: 0; border-bottom: 1px solid var(--rule); }
.aq-appeared__link {
  display: flex;
  gap: .7rem;
  align-items: center;
  min-height: 56px;
  padding: .55rem .25rem;
  color: var(--ink);
  text-decoration: none;
}
@media (hover: hover) {
  a.aq-appeared__link:hover { background: var(--hover-bg); }
  a.aq-appeared__link:hover .aq-appeared__name { color: var(--indigo); text-decoration: underline; }
}
.aq-appeared__link:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.aq-appeared__thumb { flex: 0 0 72px; width: 72px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rule); }
.aq-appeared__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.aq-appeared__name { font-size: .92rem; font-weight: 700; line-height: 1.4; word-break: break-word; }
.aq-appeared__vod { font-size: .78rem; color: var(--ink-muted); }
.aq-appeared__more { font-size: .78rem; color: var(--indigo); font-weight: 700; }
.aq-appeared__more::before { content: '→ '; }

/* ── もっと見る ─────────────────────────────────────── */
.aq-more { margin: 1.25rem 0 0; text-align: center; }
.aq-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 48px;
  padding: .5rem 1.5rem;
  border: 1px solid var(--indigo);
  background: #fff;
  color: var(--indigo);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) { .aq-more__btn:hover { background: var(--indigo-soft); } }
.aq-more__btn:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.aq-more__btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.aq-more__status { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-muted); }
.aq-more__status:empty { display: none; }

/* 「次の問題へ」: 解説のすぐ下（配信情報・作品紹介より上）。回答後の主操作なので塗りボタン */
.aq-result__next { margin: 0 0 1rem; }
.aq-result__next:empty { display: none; }
.aq-next__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: .5rem 1rem;
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.aq-next__btn::after { content: ' →'; white-space: pre; }
@media (hover: hover) { .aq-next__btn:hover { filter: brightness(1.1); } }
.aq-next__btn:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.aq-next__btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.aq-next__status { margin: .4rem 0 0; font-size: .8rem; color: var(--ink-muted); }
.aq-next__status:empty { display: none; }
.aq-next__end, .aq-end-note {
  margin: 0;
  padding: .7rem .85rem;
  border: 1px dashed var(--rule);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink);
  outline: none;
}
.aq-end-note { margin: 1.25rem 0 0; text-align: center; }
.aq-next__end a { color: var(--indigo); font-weight: 700; }
.aq-card__no:focus { outline: none; }
.aq-card__no:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.aq-related__list { margin: 0; padding: 0 0 0 1.2em; line-height: 2; font-size: .9rem; }
.aq-related__list a { color: var(--indigo); }

@media (max-width: 480px) {
  .aq-card { padding: .85rem; }
  .aq-rewatch__thumb { flex-basis: 80px; width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .aq-choice, .aq-more__btn, .aq-next__btn { transition: none; }
}

/* ── 作品ページ「この作品が登場するアニメクイズ」 ──────────────── */
.anime-quiz-links__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.anime-quiz-links__list li { margin: 0; border-bottom: 1px solid var(--rule); }
.anime-quiz-links__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 52px;
  padding: .55rem .25rem;
  color: var(--ink);
  text-decoration: none;
}
@media (hover: hover) {
  .anime-quiz-links__item:hover { background: var(--hover-bg); }
  .anime-quiz-links__item:hover .anime-quiz-links__cta { text-decoration: underline; }
}
.anime-quiz-links__item:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.anime-quiz-links__no { flex: 0 0 auto; font-weight: 800; color: var(--indigo); }
.anime-quiz-links__q { flex: 1 1 auto; min-width: 0; font-size: .88rem; line-height: 1.5; }
.anime-quiz-links__cta { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--indigo); }
.anime-quiz-links__cta::after { content: ' →'; }