/* =================================================================
   うえした・みぎひだり（kinder-position）
   すべて #app-kinder-position でスコープ
   ================================================================= */

#app-kinder-position {
    --kp-cell: clamp(64px, 20vw, 96px);   /* マスの大きさ（最小64px＝タップしやすい） */
    --kp-shelf: #d9b38c;                   /* たな枠の色（ライト） */
    --kp-accent: var(--bs-primary);
}

/* ---- コントロールバー ---- */
#app-kinder-position .kp-sticker-badge {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border: 1px solid var(--bs-warning-border-subtle);
    font-size: 0.95rem;
}

/* ---- モードせんたくカード ---- */
#app-kinder-position .kp-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 1.2rem 0.6rem;
    border: 3px solid var(--bs-border-color);
    border-radius: 1.2rem;
    background: var(--bs-body-bg);
    box-shadow: 0 4px 0 var(--bs-border-color);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: pointer;
    min-height: 130px;
}
#app-kinder-position .kp-mode-card:focus-visible {
    border-color: var(--kp-accent);
    outline: none;
    transform: translateY(-2px);
}

@media (hover: hover) { #app-kinder-position .kp-mode-card:hover {
    border-color: var(--kp-accent);
    outline: none;
    transform: translateY(-2px);
} }

#app-kinder-position .kp-mode-card:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--bs-border-color);
}
#app-kinder-position .kp-mode-emoji { font-size: 2.6rem; line-height: 1.25; }
#app-kinder-position .kp-mode-title { font-weight: 800; font-size: 1.05rem; margin-top: .3rem; }
#app-kinder-position .kp-mode-sub { font-size: 0.72rem; color: var(--bs-secondary-color); text-align: center; }

/* ---- ステージ ---- */
#app-kinder-position .kp-stage-card,
#app-kinder-position .kp-book-card {
    max-width: 680px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1.2rem;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

/* すすみドット */
#app-kinder-position .kp-dots { display: flex; gap: .35rem; }
#app-kinder-position .kp-dots .dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bs-border-color);
    transition: background .2s ease, transform .2s ease;
}
#app-kinder-position .kp-dots .dot.done {
    background: var(--bs-warning);
    transform: scale(1.15);
}

/* 出題文 */
#app-kinder-position .kp-instruction {
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.2rem, 5vw, 1.7rem);
    padding: .6rem .4rem;
    line-height: 1.5;
    min-height: 3.2rem;
}
#app-kinder-position .kp-instruction .kp-key {
    color: var(--kp-accent);
    background: var(--bs-primary-bg-subtle);
    border-radius: .6rem;
    padding: .05em .35em;
    white-space: nowrap;
}
#app-kinder-position .kp-instruction .kp-arrow { font-size: 1.3em; vertical-align: -.1em; }

#app-kinder-position .kp-progress .progress-bar {
    background: var(--bs-warning);
    transition: width .3s ease;
}

/* ---- プレイエリア共通 ---- */
#app-kinder-position .kp-play {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2rem;
    padding: .5rem 0;
    min-height: var(--kp-cell);
}

/* 3×3 グリッド（たな） */
#app-kinder-position .kp-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--kp-cell));
    grid-template-rows: repeat(3, var(--kp-cell));
    gap: 6px;
    padding: 10px;
    background: var(--kp-shelf);
    border-radius: 14px;
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12);
    max-width: 100%;
}
#app-kinder-position .kp-grid-wrap { text-align: center; }
#app-kinder-position .kp-grid-label {
    font-weight: 800;
    font-size: .95rem;
    margin-bottom: .35rem;
    color: var(--bs-secondary-color);
}

/* マス */
#app-kinder-position .kp-cell {
    width: var(--kp-cell);
    height: var(--kp-cell);
    border: none;
    border-radius: 10px;
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--kp-cell) * 0.5);
    line-height: 1;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
#app-kinder-position .kp-cell.tappable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
}

@media (hover: hover) { #app-kinder-position .kp-cell.tappable:hover {
    outline: none;
    box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
} }

#app-kinder-position .kp-cell.tappable:active { transform: scale(.94); }
#app-kinder-position .kp-cell.sample { cursor: default; }
#app-kinder-position .kp-cell.pulse { animation: kp-pulse 1.1s ease-in-out infinite; }
#app-kinder-position .kp-cell.pop { animation: kp-pop .5s ease; }
#app-kinder-position .kp-cell.wobble { animation: kp-wobble .5s ease; }
#app-kinder-position .kp-cell.correct-flash {
    background: var(--bs-success-bg-subtle);
    box-shadow: 0 0 0 4px var(--bs-success-border-subtle);
}

/* 見本の基準ボックス（はこ）色 */
#app-kinder-position .kp-cell.box-red { background: #ff6b6b; }
#app-kinder-position .kp-cell.box-blue { background: #4d8bff; }
#app-kinder-position .kp-cell.box-yellow { background: #ffcf4d; }
#app-kinder-position .kp-cell.box-green { background: #5fd08a; }

/* ---- 動物カード（おなじばしょ）---- */
#app-kinder-position .kp-palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin-top: .3rem;
}
#app-kinder-position .kp-card {
    width: var(--kp-cell);
    height: var(--kp-cell);
    border: 3px dashed var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    font-size: calc(var(--kp-cell) * 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease;
    -webkit-tap-highlight-color: transparent;
}
#app-kinder-position .kp-card.selected {
    border-color: var(--kp-accent);
    border-style: solid;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
}
#app-kinder-position .kp-card.used { opacity: .25; pointer-events: none; }

/* ---- みぎ？ひだり？ ---- */
#app-kinder-position .kp-lr-scene {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 200px;
    border-radius: 16px;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#app-kinder-position .kp-lr-kid { font-size: 4.5rem; }
#app-kinder-position .kp-lr-obj {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.6rem;
    animation: kp-float 2s ease-in-out infinite;
}
#app-kinder-position .kp-lr-obj.left { left: 6%; }
#app-kinder-position .kp-lr-obj.right { right: 6%; }
#app-kinder-position .kp-side-label {
    position: absolute;
    bottom: 6px;
    font-size: .8rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
}
#app-kinder-position .kp-side-label.left { left: 10px; }
#app-kinder-position .kp-side-label.right { right: 10px; }

/* 回答ボタン */
#app-kinder-position .kp-answers {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .8rem;
}
#app-kinder-position .kp-answers:empty { margin: 0; }
#app-kinder-position .kp-ans-btn {
    min-width: 130px;
    font-weight: 800;
    font-size: 1.25rem;
    padding: .8rem 1.4rem;
    border-radius: 1rem;
    border-width: 3px;
}
#app-kinder-position .kp-ans-btn .kp-arrow { font-size: 1.4em; vertical-align: -.12em; }

/* ---- むずかしさ せんたく ---- */
#app-kinder-position .kp-levels { max-width: 100%; }
#app-kinder-position .kp-level-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 800;
    font-size: .95rem;
    padding: .45rem 1rem;
    border: 3px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease, background .1s ease;
    -webkit-tap-highlight-color: transparent;
}
#app-kinder-position .kp-level-btn .kp-level-emoji { font-size: 1.15rem; line-height: 1.25; }
#app-kinder-position .kp-level-btn:focus-visible {
    border-color: var(--kp-accent);
    outline: none;
}

@media (hover: hover) { #app-kinder-position .kp-level-btn:hover {
    border-color: var(--kp-accent);
    outline: none;
} }

#app-kinder-position .kp-level-btn:active { transform: scale(.95); }
#app-kinder-position .kp-level-btn.active {
    border-color: var(--kp-accent);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    box-shadow: 0 0 0 3px var(--bs-primary-border-subtle);
}
#app-kinder-position .kp-stats { min-height: 1.2rem; }

/* ---- ヒント（不正解時の子ども語かいせつ）---- */
#app-kinder-position .kp-hint {
    margin: .6rem auto 0;
    max-width: 520px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    padding: .6rem .9rem;
    border-radius: .9rem;
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    border: 1px solid var(--bs-info-border-subtle);
}
#app-kinder-position .kp-hint::before { content: "💡 "; }
#app-kinder-position .kp-hint.kp-hint-show { animation: kp-pop .35s ease; }

/* ---- こたえの強調ハイライト（みぎ？ひだり？／どこにある？の救済）---- */
#app-kinder-position .kp-side-label.kp-side-hilite,
#app-kinder-position .kp-ans-btn.kp-hilite {
    animation: kp-hilite 1s ease-in-out infinite;
    border-radius: .6rem;
}
#app-kinder-position .kp-side-label.kp-side-hilite { padding: .1em .3em; }
@keyframes kp-hilite {
    0%, 100% { box-shadow: 0 0 0 0 var(--bs-warning); background: transparent; }
    50% { box-shadow: 0 0 0 5px var(--bs-warning-border-subtle); background: var(--bs-warning-bg-subtle); }
}

/* ---- どこにある？（whereis：なか/そと・まえ/うしろ・うえ/した・みぎ/ひだり）---- */
#app-kinder-position .kp-wi-scene {
    position: relative;
    width: 100%;
    max-width: 420px;
    min-height: 220px;
    border-radius: 16px;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    overflow: hidden;
}
#app-kinder-position .kp-wi-updown { flex-direction: column; }
#app-kinder-position .kp-wi-leftright { flex-direction: row; }
#app-kinder-position .kp-wi-slot {
    width: 88px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.9rem;
    line-height: 1;
}
#app-kinder-position .kp-wi-slot.ref {
    background: var(--bs-primary-bg-subtle);
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--bs-primary-border-subtle);
}
/* なか / そと
   入れものは 絵文字ではなく 口の開いた はこを CSS で 描く。
   絵文字の かご・ふくろに 生きものを 重ねても、平らな 絵なので
   「かぶっている」だけに 見えて「なか」に ならなかった（2026-08-19 指摘）。 */
#app-kinder-position .kp-wi-inout .kp-wi-box {
    position: relative;
    width: 132px;
    height: 92px;
    border: 8px solid #c9a227;
    border-top: none;                 /* 口が あいている */
    border-radius: 6px 6px 18px 18px;
    background: #fffdf3;
    box-shadow: inset 0 7px 12px rgba(0, 0, 0, .10), 0 5px 0 rgba(0, 0, 0, .12);
}
/* 手前の ふち（ここが 口だと わかるように） */
#app-kinder-position .kp-wi-inout .kp-wi-box::before {
    content: '';
    position: absolute;
    left: -8px; right: -8px; top: -8px;
    height: 8px;
    background: #e3bf3f;
    border-radius: 4px;
}
/* ふわふわの アニメは 付けない。
   kp-float が transform を 上書きして translate(-50%,-50%) を 打ち消すため、
   はこの まんなかに 置いたつもりが 右に ずれる（実測で 80px ずれていた）。 */
#app-kinder-position .kp-wi-inout .kp-wi-item {
    position: absolute;
    font-size: 2.6rem;
    line-height: 1.25;
}
#app-kinder-position .kp-wi-inout .kp-wi-item.in { top: 54%; left: 50%; transform: translate(-50%, -50%); }
#app-kinder-position .kp-wi-inout .kp-wi-item.out { top: 54%; right: 4%; transform: translateY(-50%); }
/* まえ / うしろ（ついたてを基準に前後） */
#app-kinder-position .kp-wi-frontback .kp-wi-panel {
    position: relative;
    z-index: 1;
    width: 156px;
    height: 112px;
    border-radius: 12px;
    background: #c9a227;
    box-shadow: 0 5px 0 rgba(0, 0, 0, .18);
}
#app-kinder-position .kp-wi-frontback .kp-wi-item {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3.2rem;
    line-height: 1;
}
#app-kinder-position .kp-wi-frontback .kp-wi-item.front { z-index: 2; transform: translate(-20%, 4%); }
#app-kinder-position .kp-wi-frontback .kp-wi-item.back { z-index: 0; transform: translate(-80%, -78%); }

/* ---- シールちょう ---- */
#app-kinder-position .kp-book {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: .4rem;
}
#app-kinder-position .kp-book .kp-sticker {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--bs-tertiary-bg);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--bs-warning-border-subtle);
    animation: kp-pop .4s ease;
}

/* ---- クリア えんしゅつ ---- */
#app-kinder-position .kp-celebrate {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#app-kinder-position .kp-celebrate-inner {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    animation: kp-pop .5s ease;
}
#app-kinder-position .kp-celebrate-emoji { font-size: 4.5rem; animation: kp-bounce 1s ease infinite; }
#app-kinder-position .kp-celebrate-text {
    font-size: 2rem;
    font-weight: 900;
    color: var(--bs-warning);
    margin: .3rem 0;
}
#app-kinder-position .kp-celebrate-sticker { font-size: 3.5rem; margin: .4rem 0; }
#app-kinder-position .kp-celebrate-sub { font-weight: 700; }

/* ---- アニメーション ---- */
@keyframes kp-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes kp-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes kp-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--bs-primary); } 50% { box-shadow: 0 0 0 6px var(--bs-primary-border-subtle); } }
@keyframes kp-wobble { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px) rotate(-4deg); } 75% { transform: translateX(8px) rotate(4deg); } }
@keyframes kp-float { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(-64%); } }
@media (prefers-reduced-motion: reduce) {
    #app-kinder-position * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---- ダーク時のたな色を落ち着かせる ---- */
[data-bs-theme="dark"] #app-kinder-position {
    --kp-shelf: #6b563f;
}
[data-bs-theme="dark"] #app-kinder-position .kp-mode-card {
    box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
}

/* ---- モバイル ---- */
@media (max-width: 380px) {
    #app-kinder-position { --kp-cell: clamp(60px, 26vw, 78px); }
}

/* スマホ: 見出し下の解説（おうちの方へ）は畳む。あそびの選択を先に見せる */
@media (max-width: 767.98px) {
    #app-kinder-position main > section:first-of-type .alert,
    #app-kinder-position .alert { display: none; }
}

/* 続き: あそびの一覧とむずかしさ選択を詰める */