/* =================================================================
   かげあて（kinder-shadow）ツール固有スタイル
   スコープは #app-kinder-shadow に限定
   ================================================================= */

#app-kinder-shadow {
    --ks-shadow-fill: #1f2430;
    /* シルエット塗り（黒に近いネイビー） */
    --ks-radius: 20px;
}

/* ダークモード時は影を少しだけ明るく（背景に沈まないように） */
[data-bs-theme="dark"] #app-kinder-shadow {
    --ks-shadow-fill: #0b0d12;
}

/* ---------- 共通パネル ---------- */
#app-kinder-shadow .ks-panel {
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: var(--ks-radius);
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

/* ---------- バッジ・アイコンボタン ---------- */
#app-kinder-shadow .ks-badge {
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border: 2px solid var(--bs-warning-border-subtle);
    border-radius: 999px;
    padding: .35rem 1rem;
}

#app-kinder-shadow .ks-badge .ks-star {
    font-size: 1.2rem;
}

#app-kinder-shadow .ks-icon-btn {
    min-width: 60px;
    min-height: 60px;
    font-size: 1.3rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 音オフ状態 */
#app-kinder-shadow .ks-icon-btn.ks-muted {
    opacity: .55;
    text-decoration: line-through;
}

/* ---------- モード選択ボタン ---------- */
#app-kinder-shadow .ks-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 1rem;
    min-height: 60px;
    border: 3px solid var(--bs-primary);
    border-radius: var(--ks-radius);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-body-color);
    transition: transform .12s ease, box-shadow .12s ease;
}

#app-kinder-shadow .ks-mode-btn:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    background: var(--bs-primary-bg-subtle);
}

@media (hover: hover) { #app-kinder-shadow .ks-mode-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    background: var(--bs-primary-bg-subtle);
} }

#app-kinder-shadow .ks-mode-btn:active {
    transform: scale(.97);
}

#app-kinder-shadow .ks-mode-emoji {
    font-size: 2.4rem;
    line-height: 1.25;
}

#app-kinder-shadow .ks-mode-label {
    font-weight: 800;
    font-size: 1.25rem;
}

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

/* min-height だけ 足すと 伸びた分が すべて 下に つき、文字が 上に 寄る
   （実測で 14px ずれていた）。inline-flex で 上下中央に そろえる。 */
#app-kinder-shadow .ks-level-group .btn {
    min-height: 52px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 進捗 ---------- */
#app-kinder-shadow .ks-progress {
    height: 14px;
    border-radius: 999px;
}

#app-kinder-shadow .ks-progress .progress-bar {
    background: var(--bs-primary);
    transition: width .3s ease;
}

#app-kinder-shadow .ks-qcount {
    min-width: 48px;
    text-align: right;
    font-size: 1.05rem;
}

#app-kinder-shadow .ks-prompt {
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
}

/* ---------- お題（大きな1つ） ---------- */
/* 絵文字の墨は ベースラインの 上0.94em・下0.25em＝1.19em ある。
   line-height:1 だと 下に はみ出して、すぐ下の 選択肢に くっつく（2026-08-19 指摘）。
   回転する かげは さらに 外へ 広がるので、下に 余白も とる。 */
#app-kinder-shadow .ks-bigitem {
    font-size: clamp(4.6rem, 20vw, 8rem);
    line-height: 1.25;
    margin-bottom: .5rem;
    display: inline-block;
    user-select: none;
    -webkit-user-select: none;
}

/* シルエット化：絵文字を真っ黒に塗る */
#app-kinder-shadow .ks-silhouette {
    filter: brightness(0) saturate(100%) drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
}

/* ダークでも影が見えるよう、暗背景では白っぽいシルエットにする */
[data-bs-theme="dark"] #app-kinder-shadow .ks-silhouette {
    filter: brightness(0) invert(1) opacity(.82) drop-shadow(0 3px 6px rgba(0, 0, 0, .6));
}

/* 回転影（むずかしい） */
#app-kinder-shadow .ks-rotated {
    transition: transform .5s ease;
}

/* お題が正解でカラーに戻る演出 */
#app-kinder-shadow .ks-reveal {
    animation: ks-pop .5s ease;
}

@keyframes ks-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ---------- 選択肢グリッド ---------- */
#app-kinder-shadow .ks-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    max-width: 460px;
    margin: 0 auto;
}

/* レベル1は選択肢が3つ。2列のままだと1つだけ次の行に残り、
   右側に大きな空きができて余白がちぐはぐに見える（2026-08-07 指摘）。
   3つのときだけ3列にして1行に収める（4つのときは 2×2 のまま） */
#app-kinder-shadow .ks-choices:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

#app-kinder-shadow .ks-choice {
    min-height: 96px;
    /* 回転した かげが 枠に あたらないよう、すこし 小さく・余白を 広く */
    font-size: clamp(2.5rem, 11.5vw, 3.5rem);
    line-height: 1.25;
    border: 3px solid var(--bs-border-color);
    border-radius: var(--ks-radius);
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
    user-select: none;
    -webkit-user-select: none;
    padding: .85rem;
}

#app-kinder-shadow .ks-choice:focus-visible {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}

@media (hover: hover) { #app-kinder-shadow .ks-choice:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
} }

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

#app-kinder-shadow .ks-choice.ks-correct {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    animation: ks-pop .5s ease;
}

#app-kinder-shadow .ks-choice.ks-wrong {
    animation: ks-shake .5s ease;
}

#app-kinder-shadow .ks-choice[disabled] {
    pointer-events: none;
}

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

/* ---------- かげあわせ（マッチング） ---------- */
#app-kinder-shadow .ks-match {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: 440px;
    margin: 0 auto;
}

#app-kinder-shadow .ks-match-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

#app-kinder-shadow .ks-match-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

#app-kinder-shadow .ks-match-item {
    min-height: 72px;
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    line-height: 1;
    border: 3px solid var(--bs-border-color);
    border-radius: 16px;
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    user-select: none;
    -webkit-user-select: none;
}

#app-kinder-shadow .ks-match-item:active {
    transform: scale(.95);
}

/* 選択中（1つ目にタップ） */
#app-kinder-shadow .ks-match-item.ks-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px var(--bs-primary-bg-subtle);
    transform: scale(1.05);
}

/* ペア成立済み */
#app-kinder-shadow .ks-match-item.ks-paired {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    pointer-events: none;
}

#app-kinder-shadow .ks-match-item.ks-wrong {
    animation: ks-shake .5s ease;
}

/* ---------- 正解演出オーバーレイ ---------- */
#app-kinder-shadow .ks-celebrate {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .25);
    pointer-events: none;
}

#app-kinder-shadow .ks-celebrate-inner {
    text-align: center;
    animation: ks-celebrate-in .5s cubic-bezier(.2, 1.4, .4, 1);
}

#app-kinder-shadow .ks-celebrate-emoji {
    font-size: clamp(5rem, 30vw, 10rem);
    line-height: 1.25;
}

#app-kinder-shadow .ks-celebrate-text {
    font-size: clamp(2rem, 10vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .5);
    margin-top: .3rem;
}

@keyframes ks-celebrate-in {
    0% { transform: scale(.3) rotate(-12deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* きらきら粒子 */
#app-kinder-shadow .ks-spark {
    position: fixed;
    font-size: 1.8rem;
    pointer-events: none;
    z-index: 1085;
    animation: ks-spark-fly .9s ease-out forwards;
}

@keyframes ks-spark-fly {
    0% { transform: translate(0, 0) scale(.4); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; }
}

/* ---------- セットクリア ---------- */
#app-kinder-shadow .ks-clear-emoji {
    font-size: clamp(4rem, 20vw, 6rem);
    line-height: 1.25;
    animation: ks-pop .6s ease;
}

#app-kinder-shadow .ks-new-sticker {
    font-size: clamp(4rem, 22vw, 6rem);
    line-height: 1.25;
    line-height: 1;
    animation: ks-celebrate-in .6s cubic-bezier(.2, 1.4, .4, 1);
}

/* ---------- シールちょう ---------- */
#app-kinder-shadow .ks-sticker-book {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 56px;
    align-items: center;
}

#app-kinder-shadow .ks-sticker-book .ks-sticker {
    font-size: 1.9rem;
    line-height: 1;
    animation: ks-pop .4s ease;
}

/* ---------- こたえの かいせつ・ヒント ---------- */
#app-kinder-shadow .ks-hint {
    margin-top: 1rem;
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.05rem, 3.5vw, 1.3rem);
    border-radius: 14px;
    padding: .6rem .9rem;
    animation: ks-pop .35s ease;
}

/* 正解時の かいせつ（あお系・ほめる） */
#app-kinder-shadow .ks-hint.ks-hint-good {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border: 2px solid var(--bs-primary-border-subtle);
}

/* 誤答時の やさしい ヒント（責めない・きいろ系） */
#app-kinder-shadow .ks-hint.ks-hint-warn {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
    border: 2px solid var(--bs-warning-border-subtle);
}

/* ---------- がんばりきろく ---------- */
#app-kinder-shadow .ks-records {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    text-align: center;
}

#app-kinder-shadow .ks-rec {
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 16px;
    padding: .75rem .4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
}

#app-kinder-shadow .ks-rec-num {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    font-weight: 900;
    line-height: 1;
    color: var(--kids-accent-text, var(--bs-primary));
}

#app-kinder-shadow .ks-rec-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    line-height: 1.25;
}

/* ---------- アクセシビリティ：モーション低減 ---------- */
@media (prefers-reduced-motion: reduce) {
    #app-kinder-shadow * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* スマホ: あそびの選択画面を画面内に収める */


/* PC は よこに 余裕が ある ので あそび4つを 2れつに
   （d-grid は れつ数を 指定して いない ので 1れつに なる・2026-08-21） */
@media (min-width: 992px) {
    #app-kinder-shadow .ks-panel .d-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}