.kokugo-frame { --app-accent: var(--coral); --app-accent-soft: var(--coral-soft); }
.kr-home { max-width: 720px; margin: 24px auto; }
.kr-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.kr-level { min-width: 0; display: grid; gap: 6px; text-align: center; }
.kr-level strong { font-size: 20px; }
.kr-level small { font-size: 14px; }
.kr-menu { max-width: 440px; width: 100%; margin-inline: auto; }
.kr-quiz { max-width: 880px; width: 100%; margin-inline: auto; }
.kr-scene { display: grid; grid-template-columns: minmax(0, 1fr) 144px; align-items: center; gap: 16px; min-height: 160px; background: var(--yellow-soft); }
.kr-scene .kr-scene-text { margin: 0; font-size: 24px; line-height: 2.2; }
.kr-scene-text ruby { ruby-align: center; ruby-position: over; }
.kr-scene-text rt { font-size: 0.5em; line-height: 1.2; font-weight: 500; letter-spacing: 0; }
.kr-illustration { display: block; width: 144px; aspect-ratio: 1; background-image: url("./kotoba-rescue-scenes-v2.png"); background-size: 400% 200%; background-repeat: no-repeat; }
.kr-options { margin: 0; }
.kr-options .kg-choice { min-height: 110px; }
.kr-options .kg-choice strong { font-size: 22px; }
.kr-options .kg-reading { font-size: 14px; }
.kr-options .kg-choice:disabled { opacity: 1; }
.kr-options .is-correct { border: 3px solid var(--mint); background: var(--mint-soft); }
.kr-options .is-wrong { border: 3px dashed var(--coral); background: var(--coral-soft); }
.kr-answer-label { display: block; color: var(--ink); font-weight: 800; margin-top: 8px; }
.kr-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
.kr-feedback p { margin: 0; font-weight: 800; }
.kr-feedback button { min-width: 140px; }
.kr-result { max-width: 640px; width: 100%; margin: 24px auto; }
.kr-score { font-size: 64px; font-weight: 900; margin: 24px 0; text-align: center; }
@media (max-width: 720px) {
  .kr-home { margin-block: 12px; }
  .kr-levels { gap: 8px; }
  .kr-level { padding: 10px 4px; }
  .kr-level strong { font-size: 16px; }
  .kr-level small { font-size: 12px; }
  .kr-scene { grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; padding: 16px; min-height: 144px; }
  .kr-illustration { width: 90px; }
  .kr-scene .kr-scene-text { font-size: 19px; }
  .kr-options .kg-choice { min-height: 100px; padding: 10px 6px; }
  .kr-options .kg-choice strong { font-size: 18px; }
  .kr-options .kg-reading { font-size: 12px; }
}
@media (max-width: 360px) {
  .kr-quiz .kg-heading h1 { font-size: 22px; }
  .kr-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-scene { grid-template-columns: minmax(0, 1fr) 68px; }
  .kr-illustration { width: 68px; }
  .kr-scene .kr-scene-text { font-size: 18px; }
  .kr-options .kg-choice strong { font-size: 16px; }
}