/* =================================================================
   くらべっこ（kinder-size）ツール固有スタイル
   すべて #app-kinder-size でスコープ／ライト・ダーク両対応
   ================================================================= */

#app-kinder-size {
    --ks-accent: var(--bs-primary);
    -webkit-tap-highlight-color: transparent;
}

/* タイトル下の説明などは既存の共通スタイルを利用 */

/* ---------- 共通: まるいアイコンボタン（60px 以上） ---------- */
#app-kinder-size .ks-icon-btn {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

/* ---------- ホーム: あそびえらびカード ---------- */
#app-kinder-size .ks-mode-card {
    cursor: pointer;
    border: 2px solid var(--bs-border-color);
    border-radius: 1.25rem;
    background: var(--bs-body-bg);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    height: 100%;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.1rem .6rem;
    text-align: center;
}

#app-kinder-size .ks-mode-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .14);
    border-color: var(--ks-accent);
    outline: none;
}

@media (hover: hover) { #app-kinder-size .ks-mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .14);
    border-color: var(--ks-accent);
    outline: none;
} }

#app-kinder-size .ks-mode-card:active {
    transform: translateY(-1px) scale(.98);
}

#app-kinder-size .ks-mode-emoji {
    font-size: clamp(2.4rem, 9vw, 3.2rem);
    line-height: 1.25;
}

#app-kinder-size .ks-mode-title {
    font-weight: 700;
    font-size: 1.05rem;
}

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

/* あそんだ かず（クリア回数）バッジ */
#app-kinder-size .ks-mode-count {
    margin-top: .1rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--bs-success);
}

#app-kinder-size .ks-mode-count:empty {
    display: none;
}

/* ---------- プレイ画面 ---------- */
#app-kinder-size #ks-play {
    max-width: 720px;
    margin: 0 auto;
}

#app-kinder-size .ks-question {
    background: var(--bs-tertiary-bg);
}

#app-kinder-size .ks-question-text {
    font-size: clamp(1.15rem, 4.5vw, 1.55rem);
    line-height: 1.5;
}

/* しんちょくドット */
#app-kinder-size .ks-progress .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: background .2s ease, transform .2s ease;
}

#app-kinder-size .ks-progress .dot.done {
    background: var(--bs-success);
}

#app-kinder-size .ks-progress .dot.current {
    background: var(--ks-accent);
    transform: scale(1.25);
}

/* しゅつだいエリア */
#app-kinder-size .ks-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(.6rem, 3vw, 1.4rem);
    min-height: 240px;
    padding: 1rem .4rem;
}

/* えらぶ ボタン（絵文字・バー・タワー共通の器）: タッチターゲット 60px+ */
#app-kinder-size .ks-choice {
    border: 3px solid transparent;
    border-radius: 1.1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .08);
    padding: .6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 72px;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    -webkit-user-select: none;
    user-select: none;
}

#app-kinder-size .ks-choice:focus-visible {
    border-color: var(--ks-accent);
    outline: none;
}

@media (hover: hover) { #app-kinder-size .ks-choice:hover {
    border-color: var(--ks-accent);
    outline: none;
} }

#app-kinder-size .ks-choice:active {
    transform: scale(.95);
}

/* 絵文字（大小くらべ）: サイズは JS が font-size をインライン指定 */
#app-kinder-size .ks-emoji {
    line-height: 1.25;
    display: block;
}

/* 多少くらべの グループ */
#app-kinder-size .ks-group {
    flex-direction: column;
    gap: .4rem;
    padding: .8rem;
    min-width: clamp(130px, 40vw, 180px);
}

#app-kinder-size .ks-group-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2rem .35rem;
    max-width: 100%;
}

#app-kinder-size .ks-group-items span {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    line-height: 1.1;
}

/* SVG（バー・タワー）は はみ出さない */
#app-kinder-size .ks-choice svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* せいかい/ふせいかい の一時マーク */
#app-kinder-size .ks-choice.is-correct {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 .35rem rgba(var(--bs-success-rgb), .25);
    animation: ks-pop .4s ease;
}

#app-kinder-size .ks-choice.is-wrong {
    animation: ks-shake .4s ease;
}

/* じゅんばん: えらび済み */
#app-kinder-size .ks-choice.is-picked {
    border-color: var(--bs-success);
    opacity: .55;
    pointer-events: none;
}

#app-kinder-size .ks-choice .ks-order-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bs-success);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    box-shadow: 0 .1rem .35rem rgba(0, 0, 0, .3);
}

#app-kinder-size .ks-choice {
    position: relative;
}

/* ---------- せいかい/ざんねん オーバーレイ ---------- */
#app-kinder-size .ks-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .28);
    pointer-events: none;
}

#app-kinder-size .ks-overlay-inner {
    position: relative;
    text-align: center;
}

#app-kinder-size .ks-overlay-mark {
    font-size: clamp(6rem, 30vw, 11rem);
    line-height: 1;
    animation: ks-pop .5s ease;
    filter: drop-shadow(0 .3rem .6rem rgba(0, 0, 0, .3));
}

#app-kinder-size .ks-overlay-chara {
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 1;
    animation: ks-bounce .6s ease infinite;
    margin-top: -.3rem;
}

#app-kinder-size .ks-overlay-text {
    color: #fff;
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    text-shadow: 0 .15rem .4rem rgba(0, 0, 0, .45);
    margin-top: .4rem;
}

/* せいかい/ざんねん の 1行かいせつ（子ども語） */
#app-kinder-size .ks-overlay-explain {
    color: #fff;
    font-weight: 700;
    font-size: clamp(.95rem, 3.8vw, 1.2rem);
    line-height: 1.5;
    max-width: min(88vw, 520px);
    margin: .5rem auto 0;
    padding: .35rem .8rem;
    background: rgba(0, 0, 0, .34);
    border-radius: .8rem;
    text-shadow: 0 .1rem .3rem rgba(0, 0, 0, .4);
}

#app-kinder-size .ks-overlay-explain:empty {
    display: none;
}

/* ざんねん（やさしめ）: マークを ？ 顔にしてゆらすだけ */
#app-kinder-size .ks-overlay.is-oops .ks-overlay-mark {
    animation: ks-shake .5s ease;
}

#app-kinder-size .ks-overlay.is-oops .ks-overlay-chara {
    animation: ks-shake .6s ease;
}

/* きらきら */
#app-kinder-size .ks-sparkles {
    position: absolute;
    inset: -30px;
    pointer-events: none;
}

#app-kinder-size .ks-sparkles .sp {
    position: absolute;
    font-size: 1.8rem;
    animation: ks-sparkle .8s ease forwards;
}

/* ---------- クリア画面 ---------- */
#app-kinder-size .ks-clear-card {
    max-width: 460px;
    background: var(--bs-tertiary-bg);
    border-radius: 1.5rem;
}

#app-kinder-size .ks-clear-stars {
    font-size: clamp(2.6rem, 12vw, 3.6rem);
    animation: ks-pop .5s ease;
}

#app-kinder-size .ks-earned-sticker {
    font-size: clamp(4rem, 20vw, 6rem);
    line-height: 1;
    animation: ks-bounce 1s ease infinite;
}

/* ---------- シールちょう ---------- */
#app-kinder-size + .modal .ks-sticker-grid,
.ks-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: .5rem;
    justify-items: center;
}

.ks-sticker-grid .ks-sticker {
    font-size: 2rem;
    line-height: 1;
    animation: ks-pop .4s ease;
}

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

@keyframes ks-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

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

@keyframes ks-sparkle {
    0% { transform: scale(.3) rotate(0); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: scale(1.3) rotate(40deg); opacity: 0; }
}

/* モーションを抑えたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
    #app-kinder-size .ks-overlay-chara,
    #app-kinder-size .ks-earned-sticker {
        animation: none !important;
    }
}

/* ---------- 小さい画面の微調整 ---------- */
@media (max-width: 575.98px) {
    #app-kinder-size .ks-stage {
        min-height: 200px;
        gap: .7rem;
    }
    #app-kinder-size .ks-group {
        min-width: 42vw;
    }
}

/* シールちょう・おと・よみあげ の 3つ。1行に 3つ 入れて 幅を そろえる
   （126〜182px と ばらついて いた・2026-08-21） */
#app-kinder-size .mach-btngrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app-kinder-size .mach-btngrid > .btn { padding-left: .4rem; padding-right: .4rem; font-size: .85rem; }

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