/* =================================================================
   カタカナれんしゅう 専用スタイル（すべて #app-kids-katakana でスコープ）
   ================================================================= */

#app-kids-katakana {
  --kk-accent: var(--bs-primary);
}

/* ---------- モードえらびボタン ---------- */
#app-kids-katakana .kk-mode-btn {
  border: 2px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  padding: 0.85rem 0.5rem;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
@media (hover: hover) { #app-kids-katakana .kk-mode-btn:hover {
  border-color: var(--bs-primary);
} }
#app-kids-katakana .kk-mode-btn.active {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 90, 195, 0.2);
}
#app-kids-katakana .kk-mode-btn.active .fs-3 {
  color: var(--kids-accent-text, var(--bs-primary));
}

/* ---------- パネル切りかえ ---------- */
#app-kids-katakana .kk-panel.d-none { display: none !important; }

/* ---------- 五十音ひょう ---------- */
#app-kids-katakana .kk-gojuon {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 460px;
  margin: 0 auto;
}
#app-kids-katakana .kk-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  font-weight: 700;
  border: 2px solid var(--bs-border-color);
  border-radius: 0.7rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease, border-color 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) { #app-kids-katakana .kk-cell:hover { border-color: var(--bs-primary); } }
#app-kids-katakana .kk-cell:active { transform: scale(0.94); }
#app-kids-katakana .kk-cell.done {
  background: var(--bs-success-bg-subtle);
  border-color: var(--bs-success);
}
#app-kids-katakana .kk-cell.done::after {
  content: "\2713"; /* ✓ */
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 0.75rem;
  color: var(--bs-success);
  font-weight: 900;
}
/* ヲ・ンなど こどもがあまり書かない字はうすく */
#app-kids-katakana .kk-cell.kk-rare { opacity: 0.72; }
#app-kids-katakana .kk-cell-empty {
  border: none;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

/* ---------- なぞりステージ ---------- */
#app-kids-katakana .kk-current-word {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 700;
}
#app-kids-katakana .kk-canvas-wrap {
  /* Canvas は自前で背景を描くので、テーマに依存しない暗色の枠を用意 */
  background: #2b2540;
  color: var(--bs-body-color);
  border-radius: 1rem;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  line-height: 0;
}
#app-kids-katakana #kk-canvas {
  width: min(78vw, 380px);
  height: min(78vw, 380px);
  max-width: 100%;
  border-radius: 0.6rem;
  touch-action: none; /* 指でなぞってもスクロールしない */
  cursor: crosshair;
  display: block;
}

/* ---------- クイズ ---------- */
#app-kids-katakana .kk-quiz-card {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 1rem;
}
#app-kids-katakana .kk-quiz-prompt {
  font-weight: 900;
  line-height: 1.1;
}
#app-kids-katakana .kk-quiz-prompt.kk-prompt-char {
  font-size: clamp(4.5rem, 22vw, 8rem);
  color: var(--kids-accent-text, var(--bs-primary));
}
#app-kids-katakana .kk-quiz-prompt.kk-prompt-word {
  font-size: clamp(3rem, 16vw, 5rem);
}
#app-kids-katakana .kk-quiz-prompt .kk-word-emoji { display: block; }
#app-kids-katakana .kk-quiz-prompt .kk-word-hira {
  font-size: clamp(1.6rem, 8vw, 2.6rem);
  color: var(--bs-body-color);
  margin-top: 0.2rem;
}

#app-kids-katakana .kk-choice {
  width: 100%;
  border: 2px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  padding: 0.6rem 0.4rem;
  min-height: 64px;
  transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
/* ことば・ききとりの えらびボタン（長い語も おさまるよう すこし小さめ・折り返し可） */
#app-kids-katakana .kk-choice.kk-choice-word {
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}
@media (hover: hover) { #app-kids-katakana .kk-choice:hover:not(:disabled) { border-color: var(--bs-primary); } }
#app-kids-katakana .kk-choice:active:not(:disabled) { transform: scale(0.96); }
#app-kids-katakana .kk-choice.correct {
  border-color: var(--bs-success);
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}
#app-kids-katakana .kk-choice.wrong {
  border-color: var(--bs-danger);
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
  animation: kk-shake 0.4s;
}
@keyframes kk-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
#app-kids-katakana .kk-feedback {
    text-align: center; /* 演出は画面の中央に出す */
  font-size: 1.25rem;
  font-weight: 800;
  min-height: 1.6em;
}
#app-kids-katakana .kk-feedback.ok { color: var(--bs-success); }
#app-kids-katakana .kk-feedback.ng { color: var(--bs-danger); }

@media (prefers-reduced-motion: reduce) {
  #app-kids-katakana .kk-choice.wrong { animation: none; }
}

/* ---------- レベルえらび ---------- */
#app-kids-katakana .kk-level-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.75rem;
  max-width: 640px;
  margin: 0 auto 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--bs-body-tertiary);
}
#app-kids-katakana .kk-level-label { font-weight: 800; color: var(--kids-accent-text, var(--bs-primary)); }
#app-kids-katakana .kk-level-bar .btn { font-weight: 700; }

/* ---------- 解説（なぜ そうなるか） ---------- */
#app-kids-katakana .kk-explain {
    text-align: center; /* 演出は画面の中央に出す */
  min-height: 0;
  margin-top: 0.4rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
  line-height: 1.35;
}
#app-kids-katakana .kk-explain:empty { display: none; }
#app-kids-katakana .kk-explain .kk-mnemo {
  display: block;
  margin-top: 0.15rem;
  color: var(--kids-accent-text, var(--bs-primary));
  font-weight: 800;
}

/* ---------- ききとりの スピーカーボタン ---------- */
#app-kids-katakana .kk-listen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 34vw, 132px);
  height: clamp(96px, 34vw, 132px);
  border: none;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-size: clamp(2.6rem, 12vw, 3.6rem);
  box-shadow: 0 6px 18px rgba(124, 90, 195, 0.35);
  transition: transform 0.12s ease;
}
/* ボタンと 下の せつめい文が くっついて 見えないように */
#app-kids-katakana .kk-listen-btn { margin-bottom: 0.9rem; }
#app-kids-katakana .kk-listen-btn:active { transform: scale(0.93); }
#app-kids-katakana .kk-listen-btn.kk-speaking { animation: kk-pulse 0.7s ease infinite; }
@keyframes kk-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(124, 90, 195, 0.35); }
  50% { box-shadow: 0 6px 26px rgba(124, 90, 195, 0.65); }
}

/* ---------- がんばりきろく ---------- */
#app-kids-katakana .kk-records {
  max-width: 640px;
  margin: 0.9rem auto 0;
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-weight: 700;
  color: var(--bs-secondary-color);
  background: var(--bs-body-tertiary);
  border-radius: 0.9rem;
}
#app-kids-katakana .kk-records b { color: var(--bs-body-color); }
#app-kids-katakana .kk-records-sep { margin: 0 0.5rem; opacity: 0.5; }

/* ---------- こまかい調整 ---------- */
#app-kids-katakana .kk-toughmode { padding: 0.4rem 1rem; border-radius: 999px; background: var(--bs-body-tertiary); }

@media (prefers-reduced-motion: reduce) {
  #app-kids-katakana .kk-listen-btn.kk-speaking { animation: none; }
}

/* スマホ: 文字を選ぶ一覧を画面内に収める */

/* レベルの4つは 402px で「むずか / しい」と折り返していた（文字が大きすぎた）。
   1行に おさまる大きさにして、横並びのまま 読めるようにする */
#app-kids-katakana #kk-level-bar .btn-group .btn {
    font-size: 0.85rem;
    padding-inline: 0.4rem;
    white-space: nowrap;
}