/* ============================================================
   あおぐみクイズ（JLPT）— 出題画面と順位表
   ------------------------------------------------------------
   色と書体は JLPT Study Lab の LP（site-files/theme/jlpt-lp.css）から採る。
   新しい色は足さない。

   この画面の要 = **空欄そのもの**。
   選んだ語が （　　） の中に入る。合っていれば枠の下線が緑、外れれば珊瑚色。
   問題の形（穴うめ）がそのまま操作になっているので、説明の文章が要らない。

   ⚠ セレクタは必ず .aq から始める。Cocoon の .entry-content 系に負けるため。
   ⚠ 出題順は毎回ばらばらなので 01 / 02 の番号は振らない（順番に意味が無い）。
     進み具合は上の点で表す。
   ============================================================ */

.aq {
  --aq-ink: #1d2340;
  --aq-indigo: #1B1A68;
  --aq-green: #78BE1E;
  --aq-leaf: #326E28;
  --aq-sky: #7BC8D9;
  --aq-sky-deep: #2CA8C3;
  --aq-sun: #FDDD42;
  --aq-coral: #F2685A;
  --aq-paper: #F2F7FA;
  --aq-card: #fff;
  --aq-line: #dfe7ee;

  --aq-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", sans-serif;
  --aq-sans: "IBM Plex Sans", "IBM Plex Sans JP", -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --aq-mono: "IBM Plex Mono", ui-monospace, monospace;

  font-family: var(--aq-sans);
  color: var(--aq-ink);
  line-height: 1.8;
}
.aq * { box-sizing: border-box; }

/* --- 頭 ---------------------------------------------------- */

.aq .aq-title {
  font-family: var(--aq-round);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  color: var(--aq-indigo);
  margin: 0 0 .3em;
}
.aq .aq-lead { margin: 0 0 1.2em; max-width: 34em; }

/* 名札。順位表に出るのはこの名前なので、始める前にちゃんと見せる。
   黄色は「自分」の色（順位表で自分の行に付く色と同じ）。 */
.aq .aq-player {
  background: #fffbe6;
  border: 1px solid #f2e3a0;
  border-left: 6px solid var(--aq-sun);
  border-radius: 14px;
  padding: 1em 1.2em 1.1em;
  margin: 0 0 1.2em;
  text-align: center;
}
.aq .aq-player-label {
  font-family: var(--aq-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a7a2a;
  margin: 0;
}
.aq .aq-nick {
  font-family: var(--aq-round);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.3;
  color: var(--aq-indigo);
  margin: .1em 0 0;
}
.aq .aq-nick-en {
  font-family: var(--aq-mono);
  font-size: .9rem;
  color: #55618a;
  margin: 0 0 .7em;
}

.aq .aq-reroll {
  font-family: var(--aq-mono);
  font-size: .8rem;
  border: 1px solid #e2cf7a;
  background: #fff;
  color: #6b5d17;
  border-radius: 999px;
  padding: .35em 1.2em;
  cursor: pointer;
}
.aq .aq-reroll:hover { border-color: var(--aq-sun); background: #fffdf3; }
.aq .aq-reroll:focus-visible { outline: 3px solid var(--aq-sky-deep); outline-offset: 2px; }

.aq .aq-player-note {
  font-size: .78rem;
  color: #8a7a2a;
  margin: .7em 0 0;
  line-height: 1.6;
}

.aq .aq-start {
  font-family: var(--aq-round);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: var(--aq-indigo);
  border: 0;
  border-radius: 999px;
  padding: .7em 1.8em;
  cursor: pointer;
}
.aq .aq-start:hover { background: #2b2a8c; }

/* 進み具合。出題順に意味は無いので 01/02 の番号は振らない */
.aq .aq-progress {
  font-family: var(--aq-mono);
  letter-spacing: .3em;
  color: var(--aq-sky-deep);
  margin: .8em 0 0;
}

/* --- 問題 ---------------------------------------------------- */

.aq .aq-items { list-style: none; margin: 1.6em 0 0; padding: 0; }

/* 1 問 = 1 枚。地の色・枠・番号札の 3 つで切れ目を作る。
   白い本文の上に白いカードを置くと境目が消えるので、地は薄い青（--aq-paper）にする。 */
.aq .aq-item {
  position: relative;
  background: var(--aq-paper);
  border: 2px solid var(--aq-line);
  border-radius: 16px;
  padding: 1.6em 1.1em 1.2em;
  margin: 0 0 1.6em;
}

/* 番号札。カードの上辺にまたがせて、どこから次の問題かを一目で分かるようにする */
.aq .aq-num {
  position: absolute;
  top: -.85em;
  left: 1em;
  font-family: var(--aq-mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--aq-indigo);
  border-radius: 999px;
  padding: .15em .9em;
}
.aq .aq-num:empty { display: none; }

/* 答え終わった問題は一段落とす。いま解く問題が浮いて見える */
.aq .aq-item.aq-done { background: var(--aq-card); }
.aq .aq-item.ok  { border-color: #cfe8a5; }
.aq .aq-item.ok  .aq-num { background: var(--aq-leaf); }
.aq .aq-item.ng  { border-color: #f6c4bd; }
.aq .aq-item.ng  .aq-num { background: var(--aq-coral); }

/* 日本語は大きく。学習者はゆっくり読む */
.aq .aq-q {
  font-family: var(--aq-round);
  font-size: clamp(1.25rem, 4.6vw, 1.5rem);
  line-height: 2;
  margin: 0 0 .2em;
}

/* ここが要 —— 選んだ語が入る枠 */
.aq .aq-slot {
  display: inline-block;
  min-width: 5.5em;
  text-align: center;
  border-bottom: 3px solid var(--aq-sky);
  margin: 0 .15em;
  color: var(--aq-indigo);
  transition: border-color .18s ease, background-color .18s ease;
}
.aq .aq-slot.filled { background: #eef8fb; }
.aq-item.ok  .aq-slot { border-bottom-color: var(--aq-green); }
.aq-item.ng  .aq-slot { border-bottom-color: var(--aq-coral); }

.aq .aq-q-en {
  font-size: .9rem;
  color: #55618a;
  margin: 0 0 .9em;
}

.aq .aq-choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5em;
}
.aq .aq-choice {
  width: 100%;
  font-family: var(--aq-round);
  font-size: 1.05rem;
  color: var(--aq-ink);
  /* カードの地が薄い青なので、選択肢は白で浮かせる（同じ色だと押せる場所が分からない） */
  background: var(--aq-card);
  border: 1px solid var(--aq-line);
  border-radius: 10px;
  padding: .75em .4em;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.aq .aq-choice:hover:not(:disabled) { background: #e8f1f7; }
.aq .aq-choice:active:not(:disabled) { transform: scale(.97); }
.aq .aq-choice.on { border-color: var(--aq-sky-deep); background: #eef8fb; }
.aq .aq-choice.ok { border-color: var(--aq-green); background: #f2fae6; color: var(--aq-leaf); }
.aq .aq-choice.ng { border-color: var(--aq-coral); background: #fdf0ee; }
.aq .aq-choice:disabled { cursor: default; }
.aq .aq-choice:focus-visible { outline: 3px solid var(--aq-sun); outline-offset: 2px; }

/* 正解の文の音声。答え合わせが済むまでは出さない（先に聞けたら答えが分かる） */
.aq .aq-play {
  display: none;
  font-family: var(--aq-round);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: var(--aq-sky-deep);
  border: 0;
  border-radius: 999px;
  padding: .7em 1.6em;
  margin-top: 1em;
  cursor: pointer;
}
.aq .aq-item.aq-done .aq-play { display: block; width: 100%; }
@media (min-width: 481px) {
  .aq .aq-item.aq-done .aq-play { display: inline-block; width: auto; }
}
.aq .aq-play:hover { background: #1d94ac; }
.aq .aq-play:active { transform: scale(.98); }
.aq .aq-play:focus-visible { outline: 3px solid var(--aq-sun); outline-offset: 2px; }

.aq .aq-verdict {
  font-size: .9rem;
  margin: .8em 0 0;
  color: #55618a;
}
.aq .aq-verdict:empty { display: none; }

/* --- 結果 ---------------------------------------------------- */

.aq .aq-result {
  border: 1px solid var(--aq-line);
  border-left: 6px solid var(--aq-sun);
  border-radius: 14px;
  background: var(--aq-card);
  padding: 1.1em 1.2em;
  margin: 1.4em 0;
}
.aq .aq-score {
  font-family: var(--aq-mono);
  font-size: 2.4rem;
  line-height: 1.2;
  color: var(--aq-indigo);
  margin: 0;
}
.aq .aq-rank {
  font-family: var(--aq-mono);
  margin: .2em 0 .9em;
  display: flex;
  align-items: baseline;
  gap: .5em;
  flex-wrap: wrap;
}
.aq .aq-rank-n { font-size: 1.6rem; color: var(--aq-indigo); }
.aq .aq-rank-name {
  font-family: var(--aq-round);
  color: #55618a;
  font-size: .9rem;
  margin-left: auto;
}

/* 結果の枠の中に出す、今週の上位 3 人 */
.aq .aq-mini {
  list-style: none;
  margin: 0;
  padding: .6em 0 0;
  border-top: 1px solid var(--aq-line);
  font-family: var(--aq-mono);
  font-size: .9rem;
}
.aq .aq-mini li { display: flex; gap: .7em; padding: .3em .4em; border-radius: 6px; }
.aq .aq-mini .n { color: var(--aq-sky-deep); min-width: 1.2em; text-align: right; }
.aq .aq-mini .who { font-family: var(--aq-round); }
.aq .aq-mini .pt { margin-left: auto; }
.aq .aq-mini .me { background: var(--aq-sun); font-weight: 700; }

/* --- 順位表 -------------------------------------------------- */

.aq .aq-board { margin-top: 2em; }
.aq .aq-board h3 {
  font-family: var(--aq-round);
  color: var(--aq-indigo);
  font-size: 1.2rem;
  margin: 0 0 .5em;
}
.aq .aq-board-tabs { margin: 0 0 .8em; display: flex; gap: .4em; flex-wrap: wrap; }
.aq .aq-board-tabs button {
  font-family: var(--aq-mono);
  font-size: .8rem;
  border: 1px solid var(--aq-line);
  background: transparent;
  border-radius: 999px;
  padding: .25em 1em;
  cursor: pointer;
  color: inherit;
}
.aq .aq-board-tabs button.on { background: var(--aq-indigo); color: #fff; border-color: var(--aq-indigo); }

.aq .aq-board-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: aq-rank;
  font-family: var(--aq-mono);
  font-size: .95rem;
}
.aq .aq-board-rows li {
  counter-increment: aq-rank;
  display: flex;
  gap: .8em;
  padding: .45em .6em;
  border-bottom: 1px solid var(--aq-line);
}
.aq .aq-board-rows li::before {
  content: counter(aq-rank);
  color: var(--aq-sky-deep);
  min-width: 1.6em;
  text-align: right;
}
.aq .aq-board-rows li.me {
  background: #fffbe6;
  border-left: 4px solid var(--aq-sun);
  border-radius: 6px 6px 0 0;
}
.aq .aq-board-rows .aq-empty { color: #55618a; }
.aq .aq-board-rows .aq-empty::before { content: ""; min-width: 0; }

/* --- 画面が狭いとき ------------------------------------------ */

@media (max-width: 480px) {
  .aq .aq-choices { grid-template-columns: 1fr; }
  .aq .aq-item { padding: .9em .8em 1em; }
}

@media (prefers-reduced-motion: reduce) {
  .aq * { transition: none !important; }
}

/* ============================================================
   一覧のカード（/quiz/ と /en/quizzes/・ショートコード aogumi_quiz_list）
   ------------------------------------------------------------
   一覧は**検索から最初に着くページ**。箇条書きのリンクだと「読むページ」に見えて、
   解く場所だと分からない。カードにして、押せることを形で見せる。

   カードの顔は **品詞のかな**（どうし／けいようし／めいし）。絵文字を置かないのは、
   ここで見せたいものが「中身が何か」だから。かなの下の線は出題画面の空所と同じ色で、
   このセットの色でもある。

   ⚠ セレクタは .aq から始める（Cocoon の .entry-content に負けるため）。
   ⚠ 色は上の 4 色から。珊瑚色（--aq-coral）は「間違い」の色なので一覧では使わない。
   ============================================================ */

.aq-list {
  --aq-ink: #1d2340;
  --aq-indigo: #1B1A68;
  --aq-sub: #55618a;
  --aq-card-bg: #fff;
  --aq-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", sans-serif;
  --aq-sans: "IBM Plex Sans", "IBM Plex Sans JP", -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --aq-mono: "IBM Plex Mono", ui-monospace, monospace;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
  margin: 1.6em 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--aq-sans);
}
.aq-list > li { margin: 0; padding: 0; list-style: none; }
.aq-list * { box-sizing: border-box; }

.aq-list .aq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5em;
  height: 100%;
  padding: 26px 20px 18px;
  border-radius: 16px;
  background: var(--aq-card-bg);
  /* 本文の地は白。影だけだと沈むので、細い線で紙から浮かせる */
  border: 1px solid rgba(27,26,104,.09);
  box-shadow: 0 5px 0 rgba(27,26,104,.10);
  color: var(--aq-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.aq-list .aq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 rgba(27,26,104,.13);
}
.aq-list .aq-card:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(27,26,104,.13); }
.aq-list .aq-card:focus-visible { outline: 3px solid var(--aq-accent); outline-offset: 3px; }

.aq-list .aq-card-bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: var(--aq-accent);
}

.aq-list .aq-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* 品詞のかな。下線は出題画面の空所と同じ引き方（このセットの色）。 */
.aq-list .aq-card-chip { display: flex; flex-direction: column; }
.aq-list .aq-card-kana {
  align-self: flex-start;
  font-family: var(--aq-round);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
  border-bottom: 3px solid var(--aq-accent);
  padding-bottom: 1px;
}
/* ⚠ ここは日本語が入る（動詞・形容詞）。等幅は日本語を持っていないので、
   かなだけ別の書体に落ちて間延びする。日本語が入りうる行は sans にする。 */
.aq-list .aq-card-kind {
  margin-top: 5px;
  font-family: var(--aq-sans);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--aq-sub);
}

.aq-list .aq-card-level {
  flex: none;
  padding: 3px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aq-accent) 22%, #fff);
  font-family: var(--aq-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: #2a3050;
}

.aq-list .aq-card-title {
  margin-top: .35em;
  font-family: var(--aq-round);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--aq-indigo);
}
.aq-list .aq-card-lead {
  flex: 1;
  font-size: .9rem;
  line-height: 1.75;
  color: #3c4566;
}

.aq-list .aq-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: .5em;
}
.aq-list .aq-card-meta {
  font-family: var(--aq-sans);   /* 「30 問・1 回 6 問」の日本語が等幅で間延びするため */
  font-size: .76rem;
  color: var(--aq-sub);
}
.aq-list .aq-card-go {
  flex: none;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--aq-indigo);
  color: #fff;
  font-family: var(--aq-round);
  font-weight: 700;
  font-size: .92rem;
  transition: background-color .18s ease;
}
.aq-list .aq-card:hover .aq-card-go { background: #2b2a8c; }

@media (prefers-reduced-motion: reduce) {
  .aq-list .aq-card,
  .aq-list .aq-card-go { transition: none; }
  .aq-list .aq-card:hover { transform: none; }
}