/* =================================================================
 * 九九のれんしゅう（kids-kuku）  ※全セレクタを #app-kids-kuku でスコープ
 * ================================================================= */

#app-kids-kuku {
  --kk-ok: #22c55e;
  --kk-good: #f59e0b;
  --kk-weak: #ef4444;
}

/* モードバー：ボタンを大きく */
#app-kids-kuku .kk-modes .kk-mode-btn {
  font-weight: 700;
}
@media (max-width: 480px) {
  #app-kids-kuku .kk-modes .kk-mode-btn {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.95rem;
  }
}

/* だんえらびグリッド（3列） */
#app-kids-kuku .kk-dan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
#app-kids-kuku .kk-dan-btn {
  font-weight: 700;
}
#app-kids-kuku .kk-dan-btn.active {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

/* ---------------- おぼえる：フラッシュカード ---------------- */
#app-kids-kuku .kk-card {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 2;
  border-radius: 1.5rem;
  background: linear-gradient(160deg, rgba(124, 90, 195, 0.12), rgba(157, 131, 217, 0.05));
  border: 3px solid var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 8px 24px rgba(124, 90, 195, 0.18);
  transition: transform 0.12s ease;
}
#app-kids-kuku .kk-card:active { transform: scale(0.98); }
#app-kids-kuku .kk-card:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }

#app-kids-kuku .kk-card-shot {
  text-align: center;
  padding: 1rem;
}
#app-kids-kuku .kk-shiki {
  font-size: clamp(2.4rem, 12vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--bs-body-color);
}
#app-kids-kuku .kk-yomi {
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  font-weight: 700;
  color: var(--kids-accent-text, var(--bs-primary));
  margin-top: 0.4rem;
}
#app-kids-kuku .kk-answer {
  font-size: clamp(2rem, 10vw, 3.2rem);
  font-weight: 900;
  color: var(--kk-ok);
  margin-top: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#app-kids-kuku .kk-tap-hint {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  margin-top: 0.6rem;
}
#app-kids-kuku .kk-card.is-revealed .kk-answer { opacity: 1; transform: translateY(0); }
#app-kids-kuku .kk-card.is-revealed .kk-tap-hint { visibility: hidden; }

/* めくりアニメ */
@keyframes kkFlip {
  0% { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}
#app-kids-kuku .kk-flip { animation: kkFlip 0.35s ease; }

/* ---------------- テスト：設定パネル拡張 ---------------- */
/* れんぞく日数・れんしゅう回数 */
#app-kids-kuku .kk-streak {
  font-size: 0.95rem;
  background: rgba(124, 90, 195, 0.08);
  border-radius: 0.7rem;
  padding: 0.5rem 0.8rem;
}

/* もんだいの かたち（3つ） */
#app-kids-kuku .kk-fmt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
#app-kids-kuku .kk-fmt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-weight: 700;
  padding: 0.7rem 0.3rem;
  line-height: 1.2;
}
#app-kids-kuku .kk-fmt-name { font-size: clamp(0.85rem, 3.4vw, 1.05rem); }
#app-kids-kuku .kk-fmt-ex {
  font-size: clamp(0.65rem, 2.6vw, 0.85rem);
  font-weight: 600;
  opacity: 0.85;
}

/* はんい・レベルボタン（サブ説明つき） */
#app-kids-kuku .kk-range-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem 0.5rem;
  font-weight: 700;
  text-align: center;
}
#app-kids-kuku .kk-range-sub {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.8;
}

/* ---------------- テスト ---------------- */
#app-kids-kuku .kk-question {
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  font-weight: 900;
  color: var(--bs-body-color);
  letter-spacing: 0.02em;
}

/* 3択 */
#app-kids-kuku .kk-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 520px;
  margin: 0 auto;
}
#app-kids-kuku .kk-choice {
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  font-weight: 900;
  padding: 0.8rem 0.3rem;
  border: 2px solid var(--bs-primary);
  color: var(--kids-accent-text, var(--bs-primary));
  background: transparent;
  border-radius: 1rem;
}
@media (hover: hover) { #app-kids-kuku .kk-choice:hover:not(:disabled) { background: rgba(124, 90, 195, 0.1); } }
#app-kids-kuku .kk-choice.is-correct {
  background: var(--kk-ok) !important;
  border-color: var(--kk-ok) !important;
  color: #fff !important;
  animation: kkPop 0.3s ease;
}
#app-kids-kuku .kk-choice.is-wrong {
  background: var(--kk-weak) !important;
  border-color: var(--kk-weak) !important;
  color: #fff !important;
  animation: kkShake 0.4s ease;
}

/* テンキー */
#app-kids-kuku .kk-key-display {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 900;
  text-align: center;
  min-height: 2.4em;
  line-height: 2.4em;
  border: 2px dashed var(--bs-border-color);
  border-radius: 1rem;
  max-width: 360px;
  margin: 0 auto 1rem;
  color: var(--bs-body-color);
  letter-spacing: 0.1em;
}
#app-kids-kuku .kk-key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 360px;
  margin: 0 auto;
}
#app-kids-kuku .kk-key {
  font-size: 1.5rem;
  font-weight: 800;
  padding: 0.6rem 0;
}

/* タイマー（タイムアタック）
   タイムアタック中は「せいかい N」「⏱ Nびょう」「🔥×N」の 3つが よこに ならぶ。
   402px では 合計 327px／入る幅 328px と ぎりぎりで、**3つとも 2行に 割れて いた**
   （2026-08-25 実測）。数は 1文字 増えるので、割らせない 指定を 3つとも 付ける。 */
#app-kids-kuku .kk-timer {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--kids-accent-text, var(--bs-primary));
  white-space: nowrap;
}
#app-kids-kuku #kk-quiz-count { white-space: nowrap; }
#app-kids-kuku .kk-timer.kk-timer-low { color: var(--kk-weak); animation: kkPulse 0.6s ease infinite; }
@keyframes kkPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* はんてい */
#app-kids-kuku .kk-judge {
    text-align: center; /* 演出は画面の中央に出す */ min-height: 2.2em; font-weight: 800; font-size: 1.2rem; }
#app-kids-kuku .kk-judge-ng { color: var(--kk-weak); }
/* 不正解時の1行解説 */
#app-kids-kuku .kk-explain {
    text-align: center; /* 演出は画面の中央に出す */
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-top: 0.3rem;
}

/* 結果：自己ベスト */
#app-kids-kuku .kk-result-best { font-size: 1.1rem; font-weight: 700; }
#app-kids-kuku .kk-best-new { color: var(--kk-good); font-weight: 900; }
#app-kids-kuku .kk-review-list li { line-height: 1.5; }

/* コンボ */
#app-kids-kuku .kk-combo {
  font-weight: 900;
  color: var(--kk-good);
  font-size: 1.1rem;
  min-height: 1.4em;
  white-space: nowrap;
}
#app-kids-kuku .kk-combo-pop { animation: kkPop 0.35s ease; }

#app-kids-kuku .kk-result-emoji { font-size: clamp(3rem, 16vw, 4.5rem); line-height: 1.25; }
#app-kids-kuku .kk-result-score { font-size: 1.6rem; font-weight: 900; }
#app-kids-kuku .kk-review-box {
  background: var(--bs-body-tertiary, rgba(0, 0, 0, 0.04));
  border-radius: 0.9rem;
  padding: 1rem 1.2rem;
}

/* アニメ共通 */
@keyframes kkPop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes kkShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
#app-kids-kuku .kk-shake { display: inline-block; animation: kkShake 0.4s ease; }

/* ---------------- せいせきひょう（81マス） ---------------- */
#app-kids-kuku .kk-grid-wrap {
  display: flex;
  justify-content: center;
  overflow-x: auto;
}
#app-kids-kuku .kk-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  max-width: 520px;
}
#app-kids-kuku .kk-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(0.65rem, 2.6vw, 1rem);
  border-radius: 6px;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}
#app-kids-kuku .kk-cell.kk-head {
  background: var(--bs-primary);
  color: #fff;
  font-weight: 800;
}
#app-kids-kuku .kk-cell.kk-corner { background: var(--bs-primary); opacity: 0.7; }
#app-kids-kuku .kk-c-none { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
#app-kids-kuku .kk-c-ok { background: rgba(34, 197, 94, 0.75); color: #fff; }
#app-kids-kuku .kk-c-good { background: var(--kk-good); color: #fff; }
#app-kids-kuku .kk-c-weak { background: var(--kk-weak); color: #fff; }

/* れいれい（凡例） */
#app-kids-kuku .kk-leg { font-size: 0.9rem; display: inline-flex; align-items: center; }
#app-kids-kuku .kk-swatch {
  width: 1.1rem; height: 1.1rem; border-radius: 4px; display: inline-block; margin-right: 0.35rem;
}
#app-kids-kuku .kk-s-none { background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); }
#app-kids-kuku .kk-s-ok { background: rgba(34, 197, 94, 0.75); }
#app-kids-kuku .kk-s-good { background: var(--kk-good); }
#app-kids-kuku .kk-s-weak { background: var(--kk-weak); }

#app-kids-kuku .kk-master-count { font-size: 1.3rem; font-weight: 800; }

/* 早見表：対角線セル強調はcell-best（共通）に委譲。数字を中央寄せ */
#app-kids-kuku .kk-table th, #app-kids-kuku .kk-table td { text-align: center; font-weight: 600; }

/* 402px で 3列に すると、そもそも 字が 入らない（2026-08-25 実測）。
   ボタンの 内側 77px に 対して「タイムアタック」は 107px、「ぎゃく九九」は 83px。
   字を 小さく して しのいで いたが、それでも 窮屈で
   「60びょうで 何もん？」が「もん？」だけ 3行めに 落ちて いた。
   → **よこ1列に して、名前と れいを 横に ならべる。**
      字を 小さく する 方向では 解けない（読めなく なるだけ）。 */
#app-kids-kuku .kk-fmt-name {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    #app-kids-kuku .kk-fmt-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    #app-kids-kuku .kk-fmt-btn {
        flex-direction: row;
        justify-content: center;
        gap: 0.6rem;
        padding: 0.6rem 0.75rem;
        min-height: 48px;
    }

    #app-kids-kuku .kk-fmt-name { font-size: 1rem; }
    /* れいは「なにを こたえるか」の 見本。名前より ひかえめ だが 読める 大きさに */
    #app-kids-kuku .kk-fmt-ex { font-size: 0.9rem; white-space: nowrap; }
}

/* こたえかたの2つ。文字が大きいと「3たくから / えらぶ」と 折り返す */
#app-kids-kuku .kk-ans-group .btn {
    font-size: 0.95rem;
    padding-inline: 0.4rem;
}


/* PC は よこに 余裕が ある ので あそび3つを よこに ならべる。
   btn-group は flex の 中で 内容幅に 縮む ので、幅を あたえないと
   1れつの まま 縦に 積まれる（2026-08-21 の 実測で 判明） */
@media (min-width: 992px) {
    #app-kids-kuku .kk-modes.btn-group {
        width: 100%;
        max-width: 720px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* はんいの えらびかたは スマホで たて1れつ（1つが 長い ので 読みやすさ優先）。
   PC で 1れつの ままだと 幅1226pxの ボタンが 4段 積まれて 冗長（2026-09-03 実機で 指摘）。
   .d-grid（display: grid）に 列を 足すだけ で よこに ならぶ */
@media (min-width: 768px) {
  #app-kids-kuku .kk-range-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}