/* =================================================================
   アルファベットれんしゅう（kids-abc）
   すべてのセレクタを #app-kids-abc でスコープする
   ================================================================= */

#app-kids-abc {
    --kab-round: 1rem;
}

/* 進捗ラッパ */
#app-kids-abc .kab-progress-wrap {
    width: 100%;
    max-width: 360px;
}

/* モード切替ボタン */
#app-kids-abc .kab-mode-btn {
    border-radius: 999px;
    font-weight: 700;
}

/* ---------- 共通カード ---------- */
#app-kids-abc .kab-card {
    border: 2px solid var(--bs-border-color);
    border-radius: var(--kab-round);
    background: var(--bs-body-bg);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* ---------- おぼえる：グリッド ---------- */
#app-kids-abc .kab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: .5rem;
}

#app-kids-abc .kab-grid-btn {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    font-weight: 800;
    border-radius: .8rem;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease, background-color .15s ease;
}

@media (hover: hover) { #app-kids-abc .kab-grid-btn:hover {
    background: var(--bs-primary-bg-subtle);
} }

#app-kids-abc .kab-grid-btn:active {
    transform: scale(.92);
}

#app-kids-abc .kab-grid-btn.is-done {
    border-color: var(--bs-success);
}

#app-kids-abc .kab-grid-btn .kab-check {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: .7rem;
    color: var(--bs-success);
}

/* ---------- おぼえる：詳細カード ---------- */
#app-kids-abc .kab-detail {
    text-align: center;
    padding: 1.5rem 1rem 2rem;
}

#app-kids-abc .kab-letter-big {
    font-size: clamp(4rem, 22vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--kids-accent-text, var(--bs-primary));
    letter-spacing: .05em;
}

#app-kids-abc .kab-letter-small {
    font-size: clamp(2rem, 10vw, 3.5rem);
    font-weight: 700;
    color: var(--bs-secondary-color);
    line-height: 1;
}

#app-kids-abc .kab-reading {
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 800;
}

#app-kids-abc .kab-word-emoji {
    font-size: clamp(3rem, 16vw, 5rem);
    line-height: 1.25;
}

#app-kids-abc .kab-word-text {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
    font-weight: 700;
}

/* ---------- おおもじ・こもじあわせ ---------- */
#app-kids-abc .kab-match-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

@media (max-width: 480px) {
    #app-kids-abc .kab-match-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .4rem;
    }
}

#app-kids-abc .kab-match-tile {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 7vw, 2.4rem);
    font-weight: 800;
    border-radius: .8rem;
    border: 3px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease, background-color .15s ease, border-color .15s ease, opacity .3s ease;
}

#app-kids-abc .kab-match-tile.is-selected {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    transform: scale(1.04);
}

#app-kids-abc .kab-match-tile.is-matched {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    cursor: default;
    opacity: .55;
}

#app-kids-abc .kab-match-tile.is-wrong {
    animation: kab-shake .4s ease;
    border-color: var(--bs-danger);
}

/* ---------- じゅんばんならべ ---------- */
#app-kids-abc .kab-order-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

#app-kids-abc .kab-order-tile {
    min-width: 56px;
    height: 64px;
    padding: 0 .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    font-weight: 800;
    border-radius: .8rem;
    border: 3px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
    transition: transform .1s ease, background-color .15s ease, border-color .15s ease;
}

#app-kids-abc .kab-order-tile.is-done {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    cursor: default;
}

#app-kids-abc .kab-order-tile.is-wrong {
    animation: kab-shake .4s ease;
    border-color: var(--bs-danger);
}

#app-kids-abc .kab-order-tile .kab-order-num {
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: .7rem;
    color: var(--bs-success);
    font-weight: 700;
}

/* ---------- なぞる ---------- */
#app-kids-abc .kab-trace-stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

#app-kids-abc .kab-trace-canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 2px solid var(--bs-border-color);
    border-radius: var(--kab-round);
    background: #fffdf5;
    touch-action: none;
    cursor: crosshair;
}

/* ダークモードでもノート面は明るく保つ（黒背景に黒文字を書かない）。
   罫線・手本は Canvas 側で固定色を描画するため data-bs-theme は不要 */
[data-bs-theme="dark"] #app-kids-abc .kab-trace-canvas {
    border-color: var(--bs-border-color);
}

#app-kids-abc .kab-trace-letters {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}

#app-kids-abc .kab-trace-pick {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    border-radius: .5rem;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    touch-action: manipulation;
}

#app-kids-abc .kab-trace-pick.is-active {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    color: var(--kids-accent-text, var(--bs-primary));
}

/* ---------- レベル切替バー（共通・pill） ---------- */
#app-kids-abc .kab-levels {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
}

#app-kids-abc .kab-level-btn {
    padding: .35rem .9rem;
    font-size: .95rem;
    font-weight: 700;
    border-radius: 999px;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease, background-color .15s ease, border-color .15s ease;
}

#app-kids-abc .kab-level-btn:active {
    transform: scale(.95);
}

#app-kids-abc .kab-level-btn.is-active {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

/* ---------- どのもじかな？（クイズ） ---------- */
#app-kids-abc .kab-quiz-prompt {
    text-align: center;
    padding: 1rem;
}

#app-kids-abc .kab-quiz-emoji {
    font-size: clamp(4rem, 20vw, 7rem);
    line-height: 1.25;
}

#app-kids-abc .kab-quiz-word {
    font-size: clamp(1.3rem, 6vw, 2rem);
    font-weight: 800;
}

#app-kids-abc .kab-quiz-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    max-width: 420px;
    margin: 0 auto;
}

#app-kids-abc .kab-quiz-choice {
    padding: 1rem;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    font-weight: 800;
    border-radius: .8rem;
    border: 3px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease, background-color .15s ease, border-color .15s ease;
}

#app-kids-abc .kab-quiz-choice:active {
    transform: scale(.95);
}

#app-kids-abc .kab-quiz-choice.is-correct {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

#app-kids-abc .kab-quiz-choice.is-wrong {
    border-color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
    animation: kab-shake .4s ease;
}

/* もじ→え（逆問題）：おおきな もじ */
#app-kids-abc .kab-quiz-bigletter {
    font-size: clamp(4rem, 20vw, 7rem);
    font-weight: 900;
    line-height: 1;
    color: var(--kids-accent-text, var(--bs-primary));
}

/* もじ→え：え（絵）の えらびカード */
#app-kids-abc .kab-quiz-pics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    max-width: 440px;
    margin: 0 auto;
}

#app-kids-abc .kab-quiz-pic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .8rem .5rem;
    border-radius: .8rem;
    border: 3px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease, background-color .15s ease, border-color .15s ease;
}

#app-kids-abc .kab-quiz-pic:active {
    transform: scale(.95);
}

#app-kids-abc .kab-quiz-pic .kab-pic-emoji {
    font-size: clamp(2.6rem, 13vw, 4rem);
    line-height: 1.25;
}

#app-kids-abc .kab-quiz-pic .kab-pic-word {
    font-size: clamp(1rem, 4.5vw, 1.4rem);
    font-weight: 800;
}

#app-kids-abc .kab-quiz-pic .kab-pic-jp {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

#app-kids-abc .kab-quiz-pic.is-correct {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
}

#app-kids-abc .kab-quiz-pic.is-wrong {
    border-color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
    animation: kab-shake .4s ease;
}

/* じゅんばん：ヒント帯（A B ？ D E） */
#app-kids-abc .kab-seq-strip {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    margin-top: .5rem;
}

#app-kids-abc .kab-seq-strip span {
    min-width: 2.2rem;
    padding: .2rem .3rem;
    border-radius: .5rem;
    font-size: clamp(1.4rem, 6vw, 2rem);
}

#app-kids-abc .kab-seq-dim {
    color: var(--bs-secondary-color);
    opacity: .55;
}

#app-kids-abc .kab-seq-cur {
    color: var(--kids-accent-text, var(--bs-primary));
    background: var(--bs-primary-bg-subtle);
}

#app-kids-abc .kab-seq-q {
    color: var(--bs-warning);
    border: 2px dashed var(--bs-warning);
}

/* 解説（まちがえたとき） */
#app-kids-abc .kab-explain {
    max-width: 460px;
    margin: .5rem auto 0;
    padding: .7rem .9rem;
    border-radius: .7rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.6;
    text-align: center;
}

@keyframes kab-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* スマホの畳み込み（max-height で切る手法）は 2026-07-29 に全廃。
   ページ全体のスクロールで全展開表示する */