/* =================================================================
   かぞえてタッチ（kinder-count）専用スタイル
   すべて #app-kinder-count でスコープ。ライト/ダーク両対応。
   ================================================================= */

#app-kinder-count {
    --kc-accent: var(--bs-primary);
    --kc-radius: 1.25rem;
}

#app-kinder-count .kc-label {
    font-size: 1.05rem;
}

/* ------------- むずかしさ ------------- */
#app-kinder-count .kc-diff-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#app-kinder-count .kc-diff-group .btn {
    min-width: 84px;
    border-radius: 999px !important;
    margin: 0;
}

/* ------------- モードカード ------------- */
#app-kinder-count .kc-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.25rem 0.5rem;
    min-height: 168px;
    border: 3px solid var(--bs-border-color);
    border-radius: var(--kc-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    cursor: pointer;
}

#app-kinder-count .kc-mode-btn:focus-visible {
    border-color: var(--kc-accent);
    transform: translateY(-3px);
    box-shadow: 0 7px 0 rgba(124, 90, 195, 0.25);
    outline: none;
}

@media (hover: hover) { #app-kinder-count .kc-mode-btn:hover {
    border-color: var(--kc-accent);
    transform: translateY(-3px);
    box-shadow: 0 7px 0 rgba(124, 90, 195, 0.25);
    outline: none;
} }

#app-kinder-count .kc-mode-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

#app-kinder-count .kc-mode-emoji {
    font-size: 2.6rem;
    line-height: 1.25;
}

#app-kinder-count .kc-mode-title {
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.15;
}

#app-kinder-count .kc-mode-sub {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* ------------- シールちょう ------------- */
#app-kinder-count .kc-sticker-book {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-content: flex-start;
    max-width: 420px;
    min-height: 76px;
    padding: 12px;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--kc-radius);
    background: var(--bs-tertiary-bg);
}

#app-kinder-count .kc-sticker-book:empty::before {
    content: "あそぶと シールが たまるよ";
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    align-self: center;
    width: 100%;
    text-align: center;
}

#app-kinder-count .kc-sticker {
    font-size: 1.9rem;
    line-height: 1;
    animation: kc-pop 0.4s ease;
}

/* ------------- がんばりきろく ------------- */
#app-kinder-count .kc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 420px;
}

#app-kinder-count .kc-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    font-weight: 800;
    color: var(--bs-body-color);
}

#app-kinder-count .kc-stat-icon {
    font-size: 1.3rem;
    line-height: 1;
}

#app-kinder-count .kc-stat-val {
    font-size: 1.15rem;
}

/* ------------- ゲーム画面ヘッダー ------------- */
#app-kinder-count .kc-game-head .btn {
    min-width: 56px;
    min-height: 56px;
}

#app-kinder-count .kc-progress-dots {
    display: flex;
    gap: 8px;
}

#app-kinder-count .kc-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: transform 0.2s ease, background 0.2s ease;
}

#app-kinder-count .kc-dot.done {
    background: var(--bs-success);
    transform: scale(1.1);
}

#app-kinder-count .kc-dot.current {
    background: var(--kc-accent);
    box-shadow: 0 0 0 4px rgba(124, 90, 195, 0.2);
}

/* ------------- 出題文 ------------- */
#app-kinder-count .kc-question {
    font-size: clamp(1.2rem, 4.5vw, 1.7rem);
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#app-kinder-count .kc-q-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    padding: 0.05em 0.35em;
    border-radius: 0.6rem;
    background: var(--kc-accent);
    color: #fff;
    font-weight: 800;
}

/* ------------- ステージ ------------- */
#app-kinder-count .kc-stage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 190px;
    padding: 16px;
    border-radius: var(--kc-radius);
    background: var(--bs-tertiary-bg);
}

/* 数える対象（動物など） */
#app-kinder-count .kc-item {
    position: relative;
    font-size: clamp(2.6rem, 12vw, 4rem);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border: none;
    background: transparent;
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.12s ease, filter 0.12s ease;
    min-width: 60px;
    min-height: 60px;
}

#app-kinder-count .kc-item:active {
    transform: scale(0.9);
}

#app-kinder-count .kc-item.tapped {
    filter: drop-shadow(0 0 10px gold);
    animation: kc-glow 0.5s ease;
}

/* タップ時に出る数字バッジ */
#app-kinder-count .kc-item .kc-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.25em;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    background: var(--bs-success);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    animation: kc-pop 0.35s ease;
}

/* 個数が多いとき格子状に整列（数えやすさ支援・n>=6） */
#app-kinder-count .kc-stage.count-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 6px 8px;
    justify-items: center;
    align-items: center;
}

@media (max-width: 480px) {
    #app-kinder-count .kc-stage.count-grid {
        grid-template-columns: repeat(4, minmax(40px, 1fr));
    }
}

/* いくつかな？ の数える対象（タップ不可・純粋に見て数える） */
#app-kinder-count .kc-item.kc-static {
    cursor: default;
}

/* おなじかずどれ？ の集まり */
#app-kinder-count .kc-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    width: 100%;
}

#app-kinder-count .kc-group {
    flex: 1 1 140px;
    max-width: 220px;
    min-height: 140px;
    padding: 12px;
    border: 3px solid var(--bs-border-color);
    border-radius: var(--kc-radius);
    background: var(--bs-body-bg);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

#app-kinder-count .kc-group:active {
    transform: scale(0.97);
}

#app-kinder-count .kc-group:focus-visible {
    border-color: var(--kc-accent);
    outline: none;
}

@media (hover: hover) { #app-kinder-count .kc-group:hover {
    border-color: var(--kc-accent);
    outline: none;
} }

#app-kinder-count .kc-group .kc-g-emoji {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.25;
}

#app-kinder-count .kc-group.wrong {
    animation: kc-wobble 0.5s ease;
}

/* なかよしペア（1対1対応）: うえ・した2段を同じ列でそろえる */
#app-kinder-count .kc-match {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

#app-kinder-count .kc-match-row {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--kc-radius);
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
}

#app-kinder-count .kc-match-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 大きさは 列数に あわせて JS が row に 指定する（あふれ防止） */
    font-size: inherit;
    line-height: 1.25;
    min-height: 1.6em;
    min-width: 0;
}

/* あまり（片方に無いぶん）は うすいマルで「1対1のズレ」を見せる */
#app-kinder-count .kc-match-cell.kc-match-empty {
    /* セルの 幅と 高さが ちがうと 50% は 楕円に なる。正方形に してから 丸める */
    justify-self: center;
    align-self: center;
    width: 1.15em;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border: 2px dashed var(--bs-border-color);
    border-radius: 50%;
    opacity: 0.5;
}

/* なかよしペア／その他の 3択・選択ボタン */
#app-kinder-count .kc-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

#app-kinder-count .kc-choice {
    min-height: 60px;
    padding: 0.5rem 1.4rem;
    font-size: 1.2rem;
    font-weight: 800;
    border: 3px solid var(--kc-accent);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--kc-accent);
    cursor: pointer;
    transition: transform 0.1s ease, background 0.1s ease, color 0.1s ease;
}

#app-kinder-count .kc-choice:focus-visible {
    background: var(--kc-accent);
    color: #fff;
    outline: none;
}

@media (hover: hover) { #app-kinder-count .kc-choice:hover {
    background: var(--kc-accent);
    color: #fff;
    outline: none;
} }

#app-kinder-count .kc-choice:active {
    transform: scale(0.94);
}

#app-kinder-count .kc-choice.wrong {
    animation: kc-wobble 0.5s ease;
    border-color: var(--bs-warning);
}

/* すうじタッチ の数字 */
#app-kinder-count .kc-numtile {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    background: var(--kc-accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.12s ease, background 0.12s ease, opacity 0.3s ease;
}

#app-kinder-count .kc-numtile:active {
    transform: scale(0.92);
}

/* 押した すうじ（2026-09-16 指摘「タッチのあと、見た目の変化が乏しい」）。
   それまでは success（このサイトでは 青）＋ opacity .55 で、未タッチの 青と 見分けが つかなかった。
   色相を 変え（灰）・小さくし・金の ✓ を 乗せる。3つとも 変わる ので 一目で「済み」と 分かる */
#app-kinder-count .kc-numtile.done {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    transform: scale(0.72);
    box-shadow: none;
    cursor: default;
    animation: kc-pop 0.45s ease;
}

#app-kinder-count .kc-numtile.done::after {
    content: '✓';
    position: absolute;
    top: -14px;
    right: -14px;
    width: 1.35em;
    height: 1.35em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    color: #5a4200;
    background: #ffd54a;
    border: 3px solid var(--bs-body-bg);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* 押した 瞬間に ふくらんでから 縮む（変化が あった ことを 動きでも 伝える） */
@keyframes kc-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.3); }
    100% { transform: scale(0.72); }
}

#app-kinder-count .kc-numtile.shake {
    animation: kc-shake 0.4s ease;
}

#app-kinder-count .kc-board {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
}

/* ------------- 回答エリア（数字ボタン） ------------- */
#app-kinder-count .kc-answer {
    margin-top: 18px;
}

#app-kinder-count .kc-numpad {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

#app-kinder-count .kc-numbtn {
    min-width: 64px;
    min-height: 64px;
    font-size: 1.8rem;
    font-weight: 800;
    border: 3px solid var(--kc-accent);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    color: var(--kc-accent);
    cursor: pointer;
    transition: transform 0.1s ease, background 0.1s ease, color 0.1s ease;
}

#app-kinder-count .kc-numbtn:focus-visible {
    background: var(--kc-accent);
    color: #fff;
    outline: none;
}

@media (hover: hover) { #app-kinder-count .kc-numbtn:hover {
    background: var(--kc-accent);
    color: #fff;
    outline: none;
} }

#app-kinder-count .kc-numbtn:active {
    transform: scale(0.92);
}

#app-kinder-count .kc-numbtn.wrong {
    animation: kc-wobble 0.5s ease;
    border-color: var(--bs-warning);
}

/* 「ぜんぶタッチできたよ」ボタン */
#app-kinder-count .kc-done-btn {
    display: block;
    margin: 0 auto;
    min-height: 60px;
    font-size: 1.3rem;
    font-weight: 800;
    padding: 0.5rem 2rem;
    border-radius: 999px;
}

/* ------------- セットクリア ------------- */
#app-kinder-count .kc-clear-card {
    max-width: 460px;
    padding: 2.2rem 1.5rem;
    border-radius: var(--kc-radius);
    background: var(--bs-tertiary-bg);
    border: 3px solid var(--bs-warning);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#app-kinder-count .kc-clear-emoji {
    font-size: 4.5rem;
    line-height: 1.25;
    animation: kc-bounce 0.7s ease;
}

#app-kinder-count .kc-clear-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--bs-warning);
    margin-top: 0.3rem;
}

#app-kinder-count .kc-clear-sub {
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
    margin-top: 0.2rem;
}

#app-kinder-count .kc-clear-sticker {
    font-size: 3.4rem;
    margin-top: 0.6rem;
    animation: kc-pop 0.5s ease 0.2s both;
}

/* ------------- アニメーション ------------- */
@keyframes kc-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes kc-glow {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes kc-bounce {
    0% { transform: translateY(0) scale(0.6); }
    40% { transform: translateY(-18px) scale(1.1); }
    70% { transform: translateY(0) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes kc-wobble {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-6px) rotate(-3deg); }
    40% { transform: translateX(6px) rotate(3deg); }
    60% { transform: translateX(-4px) rotate(-2deg); }
    80% { transform: translateX(4px) rotate(2deg); }
}

@keyframes kc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* アニメーション減 設定を尊重 */
@media (prefers-reduced-motion: reduce) {
    #app-kinder-count * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}