/* =================================================================
   まねっこリズム（kinder-rhythm）ツール固有スタイル
   すべて #app-kinder-rhythm でスコープ。ライト/ダーク両対応
   ================================================================= */

/* ---- モードきりかえバー ---- */
#app-kinder-rhythm .kr-modebar {
    display: flex;
    gap: 0.5rem;
    /* 780px。説明を 入れた ので 520px（1こ110px）だと 文が 2行に われる（2026-08-24 実測） */
    max-width: 780px;
    padding: 0.4rem;
    background: var(--bs-tertiary-bg);
    border-radius: 1.25rem;
}

#app-kinder-rhythm .kr-modebtn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-height: 64px;
    padding: 0.5rem 0.25rem;
    border: 2px solid transparent;
    border-radius: 1rem;
    background: transparent;
    color: var(--bs-body-color);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

#app-kinder-rhythm .kr-modebtn .kr-modeemoji {
    font-size: 1.6rem;
    line-height: 1.25;
}

#app-kinder-rhythm .kr-modebtn .kr-modelabel {
    font-size: 0.9rem;
}

@media (hover: hover) { #app-kinder-rhythm .kr-modebtn:hover {
    background: var(--bs-secondary-bg);
} }

#app-kinder-rhythm .kr-modebtn.active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* ---- おとをちいさく ---- */
#app-kinder-rhythm .kr-quiet .form-check-input {
    width: 2.6em;
    height: 1.4em;
    cursor: pointer;
}

#app-kinder-rhythm .kr-quiet .form-check-label {
    cursor: pointer;
    padding-left: 0.3rem;
}

/* ---- ステージ枠 ---- */
#app-kinder-rhythm .kr-stage-wrap {
    max-width: 560px;
}

#app-kinder-rhythm .kr-stage {
    padding: 1rem 0.5rem;
}

/* ---- スタート画面 ---- */
#app-kinder-rhythm .kr-startbox {
    padding: 2rem 1rem;
}

#app-kinder-rhythm .kr-startemoji {
    font-size: clamp(2.6rem, 12vw, 4rem);
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

#app-kinder-rhythm .kr-starttext {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

#app-kinder-rhythm .kr-bigbtn {
    min-height: 68px;
    padding: 0.6rem 2.4rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #9d83d9, #7c5ac3);
    border: none;
    border-radius: 2rem;
    box-shadow: 0 6px 0 rgba(92, 63, 158, 0.5);
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}

#app-kinder-rhythm .kr-bigbtn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(92, 63, 158, 0.5);
}

/* ---- どうぶつボタン（2×2） ---- */
#app-kinder-rhythm .kr-animalgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    max-width: 400px;
    margin: 0 auto;
}

#app-kinder-rhythm .kr-animal {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.8rem, 15vw, 4.6rem);
    line-height: 1;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.75rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* 待ちの ときは ほんの少しだけ 落とす。落としすぎると 画面全体が
       にごって 見え、光った ときの 差も 分からなくなる（2026-08-20 指摘） */
    filter: saturate(0.95) brightness(1);
    transition: transform 0.1s, filter 0.12s, box-shadow 0.12s;
}

/* どうぶつごとの色 */
#app-kinder-rhythm .kr-dog   { background: #ffb347; }
#app-kinder-rhythm .kr-cat   { background: #ff8fab; }
#app-kinder-rhythm .kr-frog  { background: #7ed957; }
#app-kinder-rhythm .kr-chick { background: #ffd93b; }

#app-kinder-rhythm .kr-animal:active {
    transform: scale(0.94);
}

/* 入力を受け付けない間（出題の 再生中）は すこし 沈める。
   opacity で 透かすと 下地の 白が 混ざって にごるので brightness だけで 落とす */
#app-kinder-rhythm .kr-animal:disabled {
    cursor: default;
    filter: saturate(0.8) brightness(0.88);
}

/* 光る（出題時・タップ時）。
   :disabled と 同じ 詳細度だと 後ろに 書いた ほうが 勝つため、
   **:disabled より 後ろに 置き、:disabled 付きも 明示する**。
   これが 無いと 再生中に 光っても 色が 変わらず、動きだけの 弱い 変化になる
   （2026-08-20 指摘「もっと変化をつけたほうがわかりやすい」） */
#app-kinder-rhythm .kr-animal.kr-lit,
#app-kinder-rhythm .kr-animal.kr-lit:disabled {
    filter: saturate(2) brightness(1.4);
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.95), 0 0 38px 12px rgba(255, 199, 0, 0.9);
    z-index: 1;
}

/* ---- 太鼓ボタン ---- */
#app-kinder-rhythm .kr-drum {
    width: clamp(160px, 55vw, 240px);
    height: clamp(160px, 55vw, 240px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: clamp(5rem, 28vw, 8rem);
    line-height: 1;
    background: radial-gradient(circle at 50% 40%, #ffe1a8, #e8a33d);
    border: 6px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s, filter 0.12s, box-shadow 0.12s;
}

#app-kinder-rhythm .kr-drum:active {
    transform: scale(0.95);
}

#app-kinder-rhythm .kr-drum:disabled {
    cursor: default;
    filter: brightness(0.9);
}

/* どうぶつパッドと 同じ理由で :disabled より 後ろに 置く */
#app-kinder-rhythm .kr-drum.kr-lit,
#app-kinder-rhythm .kr-drum.kr-lit:disabled {
    filter: brightness(1.35) saturate(1.4);
    transform: scale(1.12);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.95), 0 0 40px 12px rgba(255, 199, 0, 0.9);
    z-index: 1;
}

#app-kinder-rhythm .kr-drum-free {
    width: clamp(130px, 40vw, 180px);
    height: clamp(130px, 40vw, 180px);
    font-size: clamp(4rem, 20vw, 6rem);
}

/* ---- メッセージ ---- */
#app-kinder-rhythm .kr-msg {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bs-body-color);
    margin: 1.25rem 0 1rem;
    min-height: 1.6em;
}

#app-kinder-rhythm .kr-msg.kr-msg-good { color: var(--kids-accent-text, var(--bs-primary)); }

/* ゆれる（おしい！のとき・優しく） */
#app-kinder-rhythm .kr-shake {
    animation: kr-shake 0.5s ease;
}

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

/* ---- サブボタン（もういちど きく など） ---- */
#app-kinder-rhythm .kr-subbtn {
    min-height: 52px;
    padding: 0.5rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kids-accent-text, var(--bs-primary));
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-primary);
    border-radius: 1.5rem;
    cursor: pointer;
    transition: background 0.12s;
}

@media (hover: hover) { #app-kinder-rhythm .kr-subbtn:hover {
    background: var(--bs-primary-bg-subtle);
} }

@keyframes kr-pop {
    0% { transform: scale(0.2); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- シールちょう ---- */
#app-kinder-rhythm .kr-stickerbook {
    max-width: 560px;
}

#app-kinder-rhythm .kr-best {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
}

#app-kinder-rhythm .kr-best strong {
    font-size: 1.3rem;
    color: var(--kids-accent-text, var(--bs-primary));
}

#app-kinder-rhythm .kr-stickergrid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 3rem;
    padding: 0.75rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.75rem;
}

#app-kinder-rhythm .kr-stickergrid .kr-sticker {
    font-size: 1.9rem;
    line-height: 1;
    animation: kr-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

#app-kinder-rhythm .kr-stickergrid .kr-sticker.kr-sticker-new {
    animation: kr-sticker-new 0.8s ease both;
}

@keyframes kr-sticker-new {
    0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.4) rotate(8deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

#app-kinder-rhythm .kr-sticker-empty {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    align-self: center;
}

/* ---- れんぞく日数 ---- */
#app-kinder-rhythm .kr-streak {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--kids-accent-text, var(--bs-primary));
    min-height: 1.2em;
    margin-top: 0.25rem;
}

/* ---- むずかしさバー（レベル選択） ---- */
#app-kinder-rhythm .kr-levelbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 480px;
    margin: 0 auto 0.75rem;
    padding: 0.4rem 0.6rem;
    background: var(--bs-tertiary-bg);
    border-radius: 1rem;
}

#app-kinder-rhythm .kr-levellabel {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    margin-right: 0.2rem;
}

#app-kinder-rhythm .kr-lvlbtn {
    min-height: 40px;
    padding: 0.25rem 0.55rem;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: -0.06em;
    background: var(--bs-body-bg);
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.8rem;
    cursor: pointer;
    filter: grayscale(0.6) opacity(0.7);
    transition: filter 0.12s, transform 0.08s, box-shadow 0.12s;
}

@media (hover: hover) { #app-kinder-rhythm .kr-lvlbtn:hover {
    filter: grayscale(0.2) opacity(0.95);
} }

#app-kinder-rhythm .kr-lvlbtn.active {
    filter: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-primary-bg-subtle);
    transform: translateY(-1px);
}

/* ---- おとの しゅるいバー（楽器きりかえ・リズム用） ---- */
#app-kinder-rhythm .kr-instbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 400px;
    margin: 0 auto 1rem;
    padding: 0.4rem;
    background: var(--bs-tertiary-bg);
    border-radius: 1rem;
}

#app-kinder-rhythm .kr-instbtn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    line-height: 1;
    background: var(--bs-body-bg);
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    cursor: pointer;
    filter: grayscale(0.5) opacity(0.75);
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.12s, transform 0.08s, box-shadow 0.12s;
}

@media (hover: hover) { #app-kinder-rhythm .kr-instbtn:hover {
    filter: grayscale(0.15) opacity(1);
} }

#app-kinder-rhythm .kr-instbtn:active {
    transform: scale(0.94);
}

#app-kinder-rhythm .kr-instbtn.active {
    filter: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}

/* ---- じゆうモードの楽器パッド ---- */
#app-kinder-rhythm .kr-instpads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

#app-kinder-rhythm .kr-instpad {
    width: clamp(72px, 22vw, 96px);
    height: clamp(72px, 22vw, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    line-height: 1;
    background: radial-gradient(circle at 50% 40%, #ffe1a8, #e8a33d);
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s, filter 0.12s, box-shadow 0.12s;
}

#app-kinder-rhythm .kr-instpad:active {
    transform: scale(0.93);
}

#app-kinder-rhythm .kr-instpad.kr-lit {
    filter: brightness(1.15);
    transform: scale(1.06);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.7), 0 0 24px 6px rgba(255, 199, 0, 0.7);
}

/* ---- きいて どっち？のスピーカー ---- */
#app-kinder-rhythm .kr-speaker {
    width: clamp(96px, 32vw, 140px);
    height: clamp(96px, 32vw, 140px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(3rem, 16vw, 4.6rem);
    line-height: 1;
    background: radial-gradient(circle at 50% 40%, #c9b6f0, #9d83d9);
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s, filter 0.12s, box-shadow 0.12s;
}

#app-kinder-rhythm .kr-speaker:active {
    transform: scale(0.95);
}

#app-kinder-rhythm .kr-speaker.kr-lit {
    filter: brightness(1.18);
    transform: scale(1.06);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7), 0 0 30px 8px rgba(157, 131, 217, 0.8);
}

/* きいて どっち？の えらぶボタン（injectされた .kr-animal を内包） */
#app-kinder-rhythm .kr-quizchoices {
    margin-top: 0.5rem;
}

#app-kinder-rhythm .kr-quizchoices[data-count="2"] {
    max-width: 320px;
}

/* ---- アニメーション無効化の配慮 ---- */
@media (prefers-reduced-motion: reduce) {
    #app-kinder-rhythm * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* スマホ: リズム面を画面内に収める */

/* ⭐の 数で 幅が 変わって いたので 等幅に した（.mach-btngrid）。
   4だんかいなので 1行に 4つ 入れる */


/* ⭐の 数で 幅が 変わって いた。4だんかいなので 1行に 4つ。
   **`display: grid` を ここで 明示する。** 共通の .mach-btngrid（詳細度 0,1,0）は
   ツール固有の `#app-… .xxx`（1,1,0）に 負けて display: flex の ままに なる */
#app-kinder-rhythm .kr-levelbar.mach-btngrid {
    display: grid;
    /* 中身は 「むずかしさ」の ラベル（span）＋ ⭐ボタン4つ。
       ラベルを 同じ 行に 置くと ボタンが 56px しか 取れず
       「⭐⭐⭐⭐」が 6px あふれる ので、**ラベルは 上の 行**に 出す。 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    row-gap: 0.25rem;
}

#app-kinder-rhythm .kr-levelbar.mach-btngrid > span {
    grid-column: 1 / -1;
    text-align: center;
}

@media (min-width: 576px) {
    /* ひろい 画面なら ラベルを 横に 置いても 入る */
    #app-kinder-rhythm .kr-levelbar.mach-btngrid {
        grid-template-columns: auto repeat(4, minmax(0, 1fr));
    }
    #app-kinder-rhythm .kr-levelbar.mach-btngrid > span { grid-column: auto; }
}

/* 共通の .mach-btngrid は 2れつ の ときに 「最後の 1個を まんなかへ」 という
   指定を 持つ（grid-column: 1/-1; width: 50%）。**れつ数を 上書きした ここでは
   その 1個だけが 太くなって しまう** ので 打ち消す。 */
#app-kinder-rhythm .kr-levelbar.mach-btngrid > :last-child:nth-child(odd),
#app-kinder-rhythm .kr-levelbar.mach-btngrid > .btn:last-of-type:nth-of-type(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
}

/* あそび4つ。説明を 入れた ので **スマホは 2れつ**（2026-08-24）。
   1れつだと 1こ 90px しか なく、説明が 3行に われて 最後の1文字が 孤立した。
   **`display: grid` を ここで 明示する。** 共通の .mach-btngrid（詳細度 0,1,0）は
   上の `#app-kinder-rhythm .kr-modebar`（1,1,0）に 負けて flex の ままに なる */
#app-kinder-rhythm .kr-modebar.mach-btngrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

@media (min-width: 576px) {
    #app-kinder-rhythm .kr-modebar.mach-btngrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}