/* =================================================================
   すうじならべ（kinder-numbers）専用スタイル
   すべて #app-kinder-numbers でスコープ。ライト/ダーク両対応。
   ================================================================= */

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

#app-kinder-numbers .kn-label {
    font-size: 1.05rem;
}

/* ------------- グループ見出し（役割の区分） ------------- */
#app-kinder-numbers .kn-group-head {
    font-weight: 800;
    font-size: 1.05rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

/* ------------- だんかいカード ------------- */
#app-kinder-numbers .kn-mode-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.1rem 0.5rem;
    min-height: 160px;
    border: 3px solid var(--bs-border-color);
    border-radius: var(--kn-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-numbers .kn-mode-btn:focus-visible {
    border-color: var(--kn-accent);
    transform: translateY(-3px);
    box-shadow: 0 7px 0 rgba(124, 90, 195, 0.25);
    outline: none;
}

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

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

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

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

#app-kinder-numbers .kn-mode-sub {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

/* クリア回数バッジ（がんばりきろく） */
#app-kinder-numbers .kn-mode-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--bs-warning);
    line-height: 1;
}

/* ------------- シールちょう ------------- */
#app-kinder-numbers .kn-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(--kn-radius);
    background: var(--bs-tertiary-bg);
}

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

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

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

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

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

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

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

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

/* ------------- つぎにタッチするすうじ ------------- */
#app-kinder-numbers .kn-target {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.4rem;
}

#app-kinder-numbers .kn-target-label {
    font-size: clamp(1rem, 4vw, 1.3rem);
    font-weight: 800;
    color: var(--bs-secondary-color);
}

/* 盤面のすうじタイルと同じ「まる」にそろえる（2026-08-07）。
   角丸四角のままだと、探す対象と盤面の形がちがって見え、対応づけの手がかりにならない。 */
#app-kinder-numbers .kn-target-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    font-size: clamp(1.5rem, 6.5vw, 2.1rem);
    font-weight: 900;
    color: #fff;
    background: var(--kn-accent);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(124, 90, 195, 0.35);
    animation: kn-pop 0.35s ease;
}

/* ------------- quiz ビジュアル（かずと すうじの あそび） ------------- */
/* 出題エリアが quiz のときは高さを確保し、絵の折り返しを許可 */
#app-kinder-numbers .kn-target--quiz {
    min-height: 5.2rem;
    flex-wrap: wrap;
}

/* えのかず（fruits）を数える（count） */
#app-kinder-numbers .kn-fruit-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.45rem;
    max-width: 460px;
}

#app-kinder-numbers .kn-fruit {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    line-height: 1;
    animation: kn-pop 0.3s ease backwards;
}

/* おおきな すうじ（numcount の問い・neighbor の基準） */
/* 2026-08-07: 盤面のすうじタイルと同じ「まる」にそろえる。
   問いが角丸四角・こたえが円だと、同じ「すうじ」なのに別のものに見える。 */
#app-kinder-numbers .kn-bignum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    padding: 0;
    font-size: clamp(1.8rem, 7.5vw, 2.5rem);
    font-weight: 900;
    color: #fff;
    background: var(--kn-accent);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(124, 90, 195, 0.35);
}

/* neighbor の「？」（こたえがはいる場所） */
#app-kinder-numbers .kn-bignum--q {
    color: var(--kn-accent);
    background: transparent;
    border: 3px dashed var(--kn-accent);
    box-shadow: none;
}

#app-kinder-numbers .kn-neigh-arrow {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    font-weight: 900;
    color: var(--bs-secondary-color);
}

/* いくつと いくつ（合成）の帯 */
#app-kinder-numbers .kn-compose {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 420px;
    padding: 8px 12px;
    border-radius: 0.8rem;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
}

/* 丸マーク（あつまり・合成の共通パーツ） */
#app-kinder-numbers .kn-dotgroup {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 108px;
}

#app-kinder-numbers .kn-dotmark {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-sizing: border-box;
}

#app-kinder-numbers .kn-dot-fill {
    background: var(--kn-accent);
}

/* 合成の2色め（あわせて数える視覚） */
#app-kinder-numbers .kn-dot-fill2 {
    background: #d6559b;
}

/* まだ入っていないマス（missing のヒント） */
#app-kinder-numbers .kn-dot-open {
    background: transparent;
    border: 2px dashed var(--bs-secondary-color);
}

/* すうじタイルの「丸のあつまり」バリアント（numcount のこたえ・最大10こ）
   2026-08-07: セレクタを .kn-numtile.kn-numtile--dots に変更。
   .kn-numtile がこの下（後ろ）で背景に --kn-accent を指定しており、詳細度が同じだと
   後勝ちで青い円に戻ってしまい、中の青いドットが背景と同色で見えなくなっていた。
   ソース順に頼らず、クラス2つぶんの詳細度で確実に勝たせる（!important は使わない）。 */
#app-kinder-numbers .kn-numtile.kn-numtile--dots {
    width: 88px;
    height: 88px;
    margin-left: -44px;
    margin-top: -44px;
    padding: 7px;
    border-radius: 1.1rem;
    background: var(--bs-body-bg);
    border: 3px solid var(--kn-accent);
}

/* タイル内は最大10こ（4列×3行弱）を詰めて収める */
#app-kinder-numbers .kn-numtile--dots .kn-dotgroup {
    gap: 4px;
    max-width: 74px;
}

#app-kinder-numbers .kn-numtile--dots .kn-dotmark {
    width: 13px;
    height: 13px;
}

@media (max-width: 480px) {
    #app-kinder-numbers .kn-numtile.kn-numtile--dots {
        width: 74px;
        height: 74px;
        margin-left: -37px;
        margin-top: -37px;
        padding: 5px;
    }

    #app-kinder-numbers .kn-numtile--dots .kn-dotgroup {
        gap: 3px;
        max-width: 64px;
    }

    #app-kinder-numbers .kn-numtile--dots .kn-dotmark {
        width: 11px;
        height: 11px;
    }
}

/* ------------- ステージ・ボード ------------- */
#app-kinder-numbers .kn-stage {
    min-height: 200px;
    padding: 12px;
    border-radius: var(--kn-radius);
    background: var(--bs-tertiary-bg);
}

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

/* 数字タイル */
#app-kinder-numbers .kn-numtile {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    /* 座標はタイルの「中心」を指す（JS の格子配置と対応）。
       transform を使うと演出アニメーションと取り合いになるので負マージンで寄せる */
    margin-left: -32px;
    margin-top: -32px;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    background: var(--kn-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;
    -webkit-user-select: none;
    user-select: none;
}

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

#app-kinder-numbers .kn-numtile:focus-visible {
    outline: 3px solid var(--bs-warning);
    outline-offset: 2px;
}

/* タッチ済み: グレーにして「もう押さなくていい」ことを色で伝える（2026-08-07）。
   success（このサイトでは青）＋半透明だと、まだ押せる青いタイルと見分けがつかなかった。 */
#app-kinder-numbers .kn-numtile.done {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    box-shadow: none;
    opacity: 1;
    cursor: default;
}

#app-kinder-numbers .kn-numtile.kn-numtile--dots.done {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

#app-kinder-numbers .kn-numtile.done .kn-dot-fill,
#app-kinder-numbers .kn-numtile.done .kn-dot-fill2 {
    background: var(--bs-secondary-color);
}

#app-kinder-numbers .kn-numtile.shake {
    animation: kn-shake 0.4s ease;
}

/* 個数が多い（1〜10）ときは少し小さめに */
@media (max-width: 480px) {
    #app-kinder-numbers .kn-numtile {
        width: 54px;
        height: 54px;
        margin-left: -27px;
        margin-top: -27px;
        font-size: 1.7rem;
    }
}

/* ------------- セットクリア ------------- */
#app-kinder-numbers .kn-clear-card {
    max-width: 460px;
    padding: 2.2rem 1.5rem;
    border-radius: var(--kn-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-numbers .kn-clear-emoji {
    font-size: 4.5rem;
    line-height: 1.25;
    animation: kn-bounce 0.7s ease;
}

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

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

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

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

@keyframes kn-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 kn-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

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

/* スマホ: 選択グループを画面内に */