/* =========================================================
   パシャシリーズ共通：通常テストUI / 正誤演出 / 単語一覧
   基準：パシャ単 通常単語テスト・単語一覧カード
   ========================================================= */

.pasha-standard-quiz,
.quiz-shell {
  width: min(640px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.pasha-quiz-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pasha-quiz-compact-nav,
.pasha-quiz-compact-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pasha-quiz-back,
.pasha-quiz-quit,
.pasha-quiz-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dark);
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.pasha-quiz-badge {
  background: var(--brand-soft);
}

.pasha-quiz-progress-wrap {
  margin: 0 0 12px;
}

.pasha-quiz-progress-text {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pasha-quiz-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1f1f1;
}

.pasha-quiz-progress > div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--brand), #ff8c61);
  transition: width .22s ease;
}

.pasha-standard-quiz .choices,
.quiz-shell .choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

.pasha-standard-quiz button.choice,
.quiz-shell button.choice {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 14px 16px;
  border: 1.5px solid #eedee5;
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(17,17,17,.04);
  text-align: left;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.pasha-standard-quiz button.choice:not(:disabled):hover,
.quiz-shell button.choice:not(:disabled):hover {
  border-color: #f2aac8;
  background: var(--brand-bg);
  color: var(--text);
  transform: none;
  box-shadow: 0 5px 16px rgba(214,51,108,.09);
}

.pasha-standard-quiz .choice-label,
.quiz-shell .choice-label {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.pasha-standard-quiz .choice-text,
.quiz-shell .choice-text {
  min-width: 0;
  color: inherit;
  overflow-wrap: break-word;
  word-break: normal;
}

.pasha-standard-quiz button.choice.correct,
.quiz-shell button.choice.correct {
  border-color: #34c759;
  background: #ecfdf3;
  color: #05603a;
  box-shadow: 0 0 0 3px rgba(52,199,89,.14);
}

.pasha-standard-quiz button.choice.correct .choice-label,
.quiz-shell button.choice.correct .choice-label {
  border-color: #34c759;
  background: #34c759;
  color: #fff;
}

.pasha-standard-quiz button.choice.wrong,
.quiz-shell button.choice.wrong {
  border-color: #ff3b30;
  background: #fff1f0;
  color: #912018;
  box-shadow: 0 0 0 3px rgba(255,59,48,.12);
}

.pasha-standard-quiz button.choice.wrong .choice-label,
.quiz-shell button.choice.wrong .choice-label {
  border-color: #ff3b30;
  background: #ff3b30;
  color: #fff;
}

/* 通常パシャ単と同じ全画面○×演出 */
.quiz-result-flash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
}
.quiz-result-flash-correct { animation: quizFlashCorrect .4s ease-out forwards; }
.quiz-result-flash-wrong { animation: quizFlashWrong .4s ease-out forwards; }
.quiz-result-mark {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  font-size: clamp(96px, 30vw, 190px);
  font-weight: 1000;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 16px 42px rgba(15,23,42,.18);
}
.quiz-result-mark-correct { color: #16a34a; animation: quizMarkPop .5s ease-out forwards; }
.quiz-result-mark-wrong { color: #dc2626; animation: quizMarkPop .5s ease-out forwards; }
.choice.quiz-answer-bounce { animation: quizAnswerBounce .3s ease-out; }
.choice.quiz-answer-shake { animation: quizAnswerShake .4s ease-in-out; }
.quiz-streak-banner {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 10000;
  max-width: min(92vw, 420px);
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), #ff8c61);
  color: #fff;
  box-shadow: 0 16px 34px rgba(214,51,108,.28);
  font-size: clamp(16px, 4.8vw, 22px);
  font-weight: 1000;
  letter-spacing: .02em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%);
}
.quiz-streak-banner.is-visible { animation: quizStreakSlide 2s ease-in-out forwards; }

@keyframes quizFlashCorrect {
  0% { opacity:0; background:radial-gradient(circle at center,rgba(34,197,94,.42),rgba(34,197,94,0) 58%); }
  28% { opacity:1; }
  100% { opacity:0; background:radial-gradient(circle at center,rgba(34,197,94,.12),rgba(34,197,94,0) 68%); }
}
@keyframes quizFlashWrong {
  0% { opacity:0; background:radial-gradient(circle at center,rgba(239,68,68,.42),rgba(239,68,68,0) 58%); }
  28% { opacity:1; }
  100% { opacity:0; background:radial-gradient(circle at center,rgba(239,68,68,.12),rgba(239,68,68,0) 68%); }
}
@keyframes quizMarkPop {
  0% { opacity:0; transform:scale(.62); }
  22% { opacity:1; transform:scale(1.08); }
  58% { opacity:.96; transform:scale(1); }
  100% { opacity:0; transform:scale(.92); }
}
@keyframes quizAnswerBounce {
  0% { transform:translateY(0) scale(1); }
  45% { transform:translateY(-6px) scale(1.02); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes quizAnswerShake {
  0%,100% { transform:translateX(0); }
  18% { transform:translateX(-7px); }
  36% { transform:translateX(7px); }
  54% { transform:translateX(-5px); }
  72% { transform:translateX(5px); }
}
@keyframes quizStreakSlide {
  0% { opacity:0; transform:translate(-50%,-120%); }
  12% { opacity:1; transform:translate(-50%,0); }
  82% { opacity:1; transform:translate(-50%,0); }
  100% { opacity:0; transform:translate(-50%,-120%); }
}

/* パシャ単標準の単語一覧カード */
.pasha-word-list {
  display: grid;
  gap: 8px;
  width: 100%;
}
.pasha-word-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid rgba(255,194,216,.78);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 18px rgba(194,37,92,.055);
  overflow: hidden;
  cursor: pointer;
}
.pasha-word-row:hover { border-color:#f2aac8; background:var(--brand-bg); }
.pasha-word-row:focus-visible { outline:3px solid rgba(214,51,108,.22); outline-offset:2px; }
.pasha-word-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ffc2d8;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}
.pasha-word-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}
.pasha-word-en {
  min-width: 0;
  max-width: 100%;
  color: #111827;
  font-size: clamp(18px,4.8vw,24px);
  font-weight: 1000;
  line-height: 1.08;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.pasha-word-ja {
  min-width: 0;
  max-width: 100%;
  color: #555;
  font-size: clamp(14px,3.7vw,17px);
  font-weight: 900;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
.pasha-word-trailing,
.pasha-word-speak {
  justify-self: end;
  flex-shrink: 0;
  min-width: 42px;
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid #ffcfe1;
  border-radius: 15px;
  background: var(--brand-bg);
  color: var(--brand-dark);
  box-shadow: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}
.pasha-word-trailing b { font-size:16px; line-height:.8; }

@media (max-width:520px) {
  .pasha-standard-quiz button.choice,
  .quiz-shell button.choice {
    min-height: 58px;
    padding: 12px 13px;
    border-radius: 15px;
    font-size: 16px;
  }
  .pasha-quiz-back,
  .pasha-quiz-quit,
  .pasha-quiz-badge { min-height:32px; padding:6px 9px; font-size:11px; }
  .pasha-word-row { gap:8px; min-height:62px; padding:9px 10px; }
}

@media (prefers-reduced-motion:reduce) {
  .quiz-result-flash-correct,
  .quiz-result-flash-wrong,
  .quiz-result-mark-correct,
  .quiz-result-mark-wrong,
  .choice.quiz-answer-bounce,
  .choice.quiz-answer-shake,
  .quiz-streak-banner.is-visible {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}