/* =================================================================
   えいごのたんご（kids-eigo）専用スタイル
   スコープは #app-kids-eigo に限定。ライト/ダーク両対応。
   ================================================================= */

#app-kids-eigo {
  --ke-accent: var(--bs-primary);
}

/* ---- モード選択（ホーム） ---- */
#app-kids-eigo .ke-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 150px;
  padding: 1.25rem 0.75rem;
  border: 3px solid var(--bs-border-color);
  border-radius: 1.25rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor: pointer;
}
#app-kids-eigo .ke-mode-btn:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 .6rem 1.2rem rgba(0, 0, 0, .12);
  border-color: var(--ke-accent);
  outline: none;
}

@media (hover: hover) { #app-kids-eigo .ke-mode-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 .6rem 1.2rem rgba(0, 0, 0, .12);
  border-color: var(--ke-accent);
  outline: none;
} }
#app-kids-eigo .ke-mode-emoji { font-size: 3rem; line-height: 1.25; }
#app-kids-eigo .ke-mode-title { font-size: 1.35rem; font-weight: 800; }
#app-kids-eigo .ke-mode-sub { font-size: .9rem; color: var(--bs-secondary-color); }

/* ---- せいせきサマリー ---- */
#app-kids-eigo .ke-rec-box {
  border: 2px solid var(--bs-border-color);
  border-radius: .9rem;
  padding: .6rem .4rem;
  text-align: center;
  background: var(--bs-body-bg);
  height: 100%;
}
#app-kids-eigo .ke-rec-emoji { font-size: 1.8rem; line-height: 1.25; }
#app-kids-eigo .ke-rec-label { font-weight: 700; font-size: .95rem; }
#app-kids-eigo .ke-rec-count { font-size: .78rem; color: var(--bs-secondary-color); }

/* ---- むずかしさ えらび（カテゴリ画面） ---- */
#app-kids-eigo .ke-level-caption { font-weight: 700; font-size: .95rem; color: var(--bs-secondary-color); }
#app-kids-eigo .ke-level-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
#app-kids-eigo .ke-level-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 92px;
  padding: .45rem .7rem;
  border: 2px solid var(--bs-border-color);
  border-radius: .8rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: transform .1s ease, border-color .1s ease, background-color .1s ease;
  cursor: pointer;
}
#app-kids-eigo .ke-level-btn:focus-visible { border-color: var(--ke-accent); outline: none; transform: translateY(-2px); }

@media (hover: hover) { #app-kids-eigo .ke-level-btn:hover { border-color: var(--ke-accent); outline: none; transform: translateY(-2px); } }
#app-kids-eigo .ke-level-btn.ke-level-on {
  border-color: var(--ke-accent);
  background: var(--bs-primary-bg-subtle);
  box-shadow: 0 0 0 2px var(--ke-accent) inset;
}
#app-kids-eigo .ke-level-label { font-weight: 800; font-size: .95rem; }
#app-kids-eigo .ke-level-sub { font-size: .68rem; color: var(--bs-secondary-color); }

/* ---- がんばりきろく: ごうけい ---- */
#app-kids-eigo .ke-rec-total {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: .5rem;
  border-radius: .7rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-body-color);
  margin-bottom: .3rem;
}
#app-kids-eigo .ke-rec-total strong { color: var(--ke-accent); font-size: 1.25rem; }

/* ---- クイズ: いみヒント ---- */
#app-kids-eigo .ke-quiz-hint { font-size: 1.05rem; font-weight: 700; color: var(--bs-secondary-color); margin-top: .2rem; }

/* ---- カテゴリ選択 ---- */
#app-kids-eigo .ke-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1rem .5rem;
  border: 3px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
#app-kids-eigo .ke-cat-card:focus-visible:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--ke-accent);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  outline: none;
}

@media (hover: hover) { #app-kids-eigo .ke-cat-card:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--ke-accent);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  outline: none;
} }
#app-kids-eigo .ke-cat-emoji { font-size: 2.6rem; line-height: 1.25; }
#app-kids-eigo .ke-cat-name { font-weight: 800; font-size: 1.05rem; }
#app-kids-eigo .ke-cat-badge { position: absolute; top: .35rem; right: .5rem; font-size: 1.1rem; }
#app-kids-eigo .ke-cat-all { border-color: var(--ke-accent); }
#app-kids-eigo .ke-cat-disabled { opacity: .4; cursor: not-allowed; }

/* ---- おぼえる: 単語カード ---- */
#app-kids-eigo .ke-card {
  border: 4px solid var(--ke-accent);
  border-radius: 1.5rem;
  background: var(--bs-body-bg);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
#app-kids-eigo .ke-card-emoji { font-size: clamp(4.5rem, 22vw, 8rem); line-height: 1.25; }
#app-kids-eigo .ke-card-en {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 800;
  letter-spacing: .04em;
  margin-top: .5rem;
  color: var(--ke-accent);
}
#app-kids-eigo .ke-card-kana { font-size: 1.4rem; font-weight: 700; color: var(--bs-body-color); }
#app-kids-eigo .ke-card-ja { font-size: 1.1rem; color: var(--bs-secondary-color); }

@keyframes ke-flip-in {
  0% { transform: rotateY(-90deg) scale(.9); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
#app-kids-eigo .ke-flip { animation: ke-flip-in .35s ease; }

/* ---- 4択の共通グリッド ---- */
#app-kids-eigo .ke-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  max-width: 520px;
  margin: 0 auto;
}
#app-kids-eigo .ke-choice {
  min-height: 96px;
  border: 3px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  transition: transform .1s ease, border-color .1s ease;
  cursor: pointer;
}
#app-kids-eigo .ke-choice:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--ke-accent);
  outline: none;
}

@media (hover: hover) { #app-kids-eigo .ke-choice:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--ke-accent);
  outline: none;
} }
#app-kids-eigo .ke-choice-emoji .ke-choice { font-size: 3.2rem; }
#app-kids-eigo .ke-choice-en { font-size: 1.5rem; font-weight: 800; }
#app-kids-eigo .ke-choice-kana { font-size: .85rem; color: var(--bs-secondary-color); }

#app-kids-eigo .ke-choice.ke-correct {
  border-color: var(--bs-success);
  background: var(--bs-success-bg-subtle);
  animation: ke-pop .3s ease;
}
#app-kids-eigo .ke-choice.ke-wrong {
  border-color: var(--bs-danger);
  background: var(--bs-danger-bg-subtle);
}
@keyframes ke-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---- 出題プロンプト ---- */
#app-kids-eigo .ke-quiz-q-label { font-size: 1rem; color: var(--bs-secondary-color); font-weight: 700; }
#app-kids-eigo .ke-quiz-en { font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; color: var(--ke-accent); letter-spacing: .03em; }
#app-kids-eigo .ke-quiz-kana { font-size: 1.2rem; font-weight: 700; }
#app-kids-eigo .ke-quiz-emoji { font-size: clamp(4rem, 20vw, 6.5rem); line-height: 1.25; }

/* ---- はんてい表示 ---- */
#app-kids-eigo .ke-feedback {
    text-align: center; /* 演出は画面の中央に出す */
  min-height: 2rem;
  font-size: 1.3rem;
  font-weight: 800;
  margin: .5rem 0;
}
#app-kids-eigo .ke-fb-ok { color: var(--bs-success); }
#app-kids-eigo .ke-fb-ng { color: var(--bs-danger); }

/* ---- スペルならべ ---- */
#app-kids-eigo .ke-spell-emoji { font-size: clamp(4rem, 20vw, 6.5rem); line-height: 1.25; }
#app-kids-eigo .ke-slots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}
#app-kids-eigo .ke-slot {
  width: 3.2rem;
  height: 3.8rem;
  border: 3px dashed var(--bs-border-color);
  border-radius: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  text-transform: lowercase;
  background: var(--bs-body-bg);
  color: var(--ke-accent);
}
#app-kids-eigo .ke-slot-filled { border-style: solid; border-color: var(--ke-accent); cursor: pointer; }
#app-kids-eigo .ke-slot.ke-correct { border-color: var(--bs-success); color: var(--bs-success); }
#app-kids-eigo .ke-slot.ke-shake { animation: ke-shake .4s; }
@keyframes ke-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
#app-kids-eigo .ke-tiles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
#app-kids-eigo .ke-tile {
  width: 3.4rem;
  height: 3.4rem;
  border: 3px solid var(--bs-border-color);
  border-radius: .6rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: 1.8rem;
  font-weight: 800;
  transition: transform .1s ease;
  cursor: pointer;
}
@media (hover: hover) { #app-kids-eigo .ke-tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ke-accent); } }
#app-kids-eigo .ke-tile-used { opacity: .25; pointer-events: none; }

/* ---- 進捗バー ---- */
#app-kids-eigo .ke-progress { height: 10px; }

/* ---- 結果 ---- */
#app-kids-eigo .ke-result-emoji { font-size: 4.5rem; line-height: 1.25; }
#app-kids-eigo .ke-result-score { font-size: 2.4rem; font-weight: 800; }

/* ---- モバイル微調整 ---- */
@media (max-width: 400px) {
  #app-kids-eigo .ke-slot { width: 2.7rem; height: 3.2rem; font-size: 1.6rem; }
  #app-kids-eigo .ke-tile { width: 2.9rem; height: 2.9rem; font-size: 1.5rem; }
  #app-kids-eigo .ke-choice-emoji .ke-choice { font-size: 2.6rem; }
}

/* さいごの カードまで 見たあとの いきさき（行き止まり ぼうし） */
#app-kids-eigo .ke-rem-done {
    border: 2px dashed var(--bs-warning);
    border-radius: 1rem;
    background: rgba(255, 193, 7, 0.10);
}