/* =================================================================
   かたちはめ（kinder-shape）ツール固有スタイル
   すべて #app-kinder-shape 配下にスコープする
   ================================================================= */

#app-kinder-shape {
    /* 穴（シルエット）の見た目。テーマで反転させる */
    --ks-hole: rgba(0, 0, 0, 0.14);
    --ks-hole-stroke: rgba(0, 0, 0, 0.26);
    /* ステージ背景（明るいクリーム調） */
    --ks-board: #fdf6e9;
    --ks-board-line: rgba(0, 0, 0, 0.06);
    user-select: none;
    -webkit-user-select: none;
}

[data-bs-theme="dark"] #app-kinder-shape {
    --ks-hole: rgba(255, 255, 255, 0.10);
    --ks-hole-stroke: rgba(255, 255, 255, 0.22);
    --ks-board: #2a2733;
    --ks-board-line: rgba(255, 255, 255, 0.05);
}

/* ---------- あそび きりかえ ---------- */
/* **まる型の 切り抜きを やめた**（2026-08-24）。
   1行の 横ならびの ころは 帯が まるく 見えて よかったが、
   説明を 入れて 3行の グリッドに した ため、
   `overflow: hidden` の まる型が **上の行の ボタンの 角を ななめに 削って いた**
   （ボタン側の 角丸は 18px なのに、切り抜きは 群の まる型で 行われる）。 */
#app-kinder-shape .ks-mode-switch {
    overflow: visible;
}

#app-kinder-shape .ks-mode-btn {
    border: 2px solid var(--bs-primary);
    background: var(--bs-body-bg);
    color: var(--kids-accent-text, var(--bs-primary));
    font-weight: 700;
    padding: 0.5rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 56px;
}

#app-kinder-shape .ks-mode-btn .ks-mode-emoji {
    font-size: 1.4rem;
    line-height: 1.25;
}

#app-kinder-shape .ks-mode-btn.active {
    background: var(--bs-primary);
    color: #fff;
}

/* ---------- ゲームカード ---------- */
#app-kinder-shape .ks-card {
    border: none;
    border-radius: 1.25rem;
    overflow: hidden;
}

#app-kinder-shape .ks-topbar {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

#app-kinder-shape .ks-icon-btn {
    font-size: 1.4rem;
    line-height: 1;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    padding: 0;
}

#app-kinder-shape .ks-icon-btn:active {
    transform: scale(0.92);
}

#app-kinder-shape .ks-icon-btn.is-off {
    opacity: 0.4;
}

#app-kinder-shape .ks-progress {
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    line-height: 1;
}

#app-kinder-shape .ks-sticker-count {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
    color: var(--bs-warning);
}

#app-kinder-shape .ks-sticker-count span {
    margin-left: 0.15em;
    color: var(--bs-body-color);
}

/* ---------- おだい ---------- */
#app-kinder-shape .ks-prompt {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    font-weight: 800;
    color: var(--bs-body-color);
    background: var(--bs-primary-bg-subtle);
    line-height: 1.4;
}

/* ---------- ステージ ---------- */
#app-kinder-shape .ks-stage {
    background:
        linear-gradient(var(--ks-board-line) 1px, transparent 1px) 0 0 / 100% 34px,
        var(--ks-board);
    padding: 1rem 0.75rem 1.25rem;
    min-height: 320px;
}

/* かたちはめ: 穴のならび */
#app-kinder-shape .ks-holes,
#app-kinder-shape .ks-pieces,
#app-kinder-shape .ks-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

#app-kinder-shape .ks-holes {
    min-height: 120px;
}

#app-kinder-shape .ks-tray {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px dashed var(--ks-hole-stroke);
}

#app-kinder-shape .ks-tray-label {
    text-align: center;
    font-weight: 700;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* 図形の枠（穴・ピース・選択肢 共通の当たり判定サイズ 60px 以上） */
#app-kinder-shape .ks-slot {
    width: clamp(76px, 22vw, 108px);
    height: clamp(76px, 22vw, 108px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    position: relative;
    transition: transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

#app-kinder-shape .ks-slot:active {
    transform: scale(0.94);
}

/* 空になった（はまった）ピース枠は場所だけ残す */
#app-kinder-shape .ks-slot.is-empty {
    visibility: hidden;
    pointer-events: none;
}

/* 選択中のピース */
#app-kinder-shape .ks-slot.is-selected {
    background: var(--bs-primary-bg-subtle);
    outline: 4px solid var(--bs-primary);
    outline-offset: -2px;
    animation: ks-pulse 0.9s ease-in-out infinite;
}

/* 穴がはまった状態 */
#app-kinder-shape .ks-slot.is-filled {
    cursor: default;
}

#app-kinder-shape .ks-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    transform-origin: center;
}

/* ヒント時に対応する穴を光らせる */
#app-kinder-shape .ks-slot.is-hint {
    animation: ks-hintglow 0.8s ease-in-out 2;
}

/* ---------- アニメーション ---------- */
@keyframes ks-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes ks-hintglow {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 10px var(--bs-warning)); }
}

/* 正しくはまった瞬間: ぱちっと */
#app-kinder-shape .ks-snap {
    animation: ks-snap 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ks-snap {
    0% { transform: scale(1.35); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* まちがい: やさしく ゆれる */
#app-kinder-shape .ks-shake {
    animation: ks-shake 0.5s ease;
}

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

/* せいかい: はねる */
#app-kinder-shape .ks-bounce {
    animation: ks-bounce 0.6s ease;
}

@keyframes ks-bounce {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-18px) scale(1.12); }
    60% { transform: translateY(0) scale(0.96); }
    100% { transform: translateY(0) scale(1); }
}

/* ---------- おうえん演出オーバーレイ ---------- */
#app-kinder-shape .ks-celebrate {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
    z-index: 20;
    text-align: center;
    /* 幕を敷く。敷かないと 下の せつめい文に 演出の文字が 重なって
       ただ 崩れているように 見える（他ツールと同じ方針） */
    background: rgba(0, 0, 0, 0.28);
}

#app-kinder-shape .ks-celebrate.show {
    display: flex;
}

#app-kinder-shape .ks-celebrate .ks-cele-face {
    font-size: clamp(4rem, 18vw, 7rem);
    animation: ks-celeface 0.7s ease;
    line-height: 1;
}

#app-kinder-shape .ks-celebrate .ks-cele-text {
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 2px var(--bs-primary);
    paint-order: stroke fill;   /* ふち文字は ふちを 字の後ろに 塗る（字が やせて 汚く見えるのを ふせぐ） */
    text-shadow: 0 3px 0 var(--bs-primary);
    margin-top: 0.4rem;
}

@keyframes ks-celeface {
    0% { transform: scale(0) rotate(-30deg); }
    60% { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}

/* きらきら（JS で複数生成） */
#app-kinder-shape .ks-spark {
    position: absolute;
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    animation: ks-spark 0.9s ease-out forwards;
    pointer-events: none;
}

@keyframes ks-spark {
    0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}

/* ---------- シールちょう ---------- */
#app-kinder-shape .ks-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 0.5rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: var(--bs-body-bg);
    border: 2px dashed var(--bs-border-color);
    min-height: 84px;
}

#app-kinder-shape .ks-book-slot {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    background: var(--bs-tertiary-bg);
    border: 2px dashed var(--bs-border-color);
}

#app-kinder-shape .ks-book-slot.filled {
    background: var(--bs-warning-bg-subtle);
    border-style: solid;
    border-color: var(--bs-warning);
    animation: ks-stickpop 0.5s ease;
}

@keyframes ks-stickpop {
    0% { transform: scale(0) rotate(-40deg); }
    70% { transform: scale(1.25) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ---------- モードきりかえ（5モード・折り返し対応） ---------- */
/* 説明を 2行めに 入れた ので **まる型（999px）を やめる**（2026-08-24）。
   まる型の まま 2行に すると、左右の 弧が 文字に かぶって 端の 1〜2字が 削られる
   （実際に「かたちはめ」の「あ」と「る」が 弧の 下に 入った）。 */
#app-kinder-shape .ks-mode-btn {
    border-radius: 1.15rem;
    min-height: 48px;
    padding: 0.4rem 0.7rem;
}

#app-kinder-shape .ks-mode-btn .ks-mode-emoji {
    font-size: 1.3rem;
}

#app-kinder-shape .ks-mode-btn .ks-mode-label {
    font-size: 0.95rem;
}

/* ---------- 見本の かたち（match / mono / nakama 共通） ---------- */
#app-kinder-shape .ks-sample {
    outline: 3px solid var(--bs-primary-border-subtle);
    outline-offset: -2px;
    background: var(--bs-body-bg);
}

#app-kinder-shape .ks-mono-name {
    font-weight: 800;
    color: var(--bs-body-color);
    margin-top: 0.25rem;
    font-size: 1.05rem;
}

/* ---------- みのまわり（mono） ---------- */
#app-kinder-shape .ks-mono-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 0.6rem;
    max-width: 520px;
    margin: 0 auto;
}

#app-kinder-shape .ks-mono-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.4rem;
    border-radius: 1rem;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    min-height: 96px;
    cursor: pointer;
    transition: transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

#app-kinder-shape .ks-mono-btn:active {
    transform: scale(0.94);
}

#app-kinder-shape .ks-mono-emoji {
    font-size: 2.6rem;
    line-height: 1.25;
}

#app-kinder-shape .ks-mono-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

#app-kinder-shape .ks-mono-btn.is-correct {
    border-color: var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
}

/* ---------- なかまさがし（nakama） ---------- */
#app-kinder-shape .ks-nakama-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 420px;
    margin: 0 auto;
    justify-items: center;
}

#app-kinder-shape .ks-nakama-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

#app-kinder-shape .ks-nakama-cell.is-found {
    background: var(--bs-success-bg-subtle);
    outline: 3px solid var(--bs-success);
    outline-offset: -2px;
    opacity: 0.9;
}

/* ---------- かたちの え（scene） ---------- */
#app-kinder-shape .ks-scene-hint {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

#app-kinder-shape .ks-scene {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 0.5rem auto;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    overflow: hidden;
}

#app-kinder-shape .ks-scene-part {
    position: absolute;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}

#app-kinder-shape .ks-scene-part:active {
    transform: scale(0.94);
}

/* シーンのパーツは 枠の高さいっぱいに描く（ks-svg 既定の height:auto を上書き） */
#app-kinder-shape .ks-scene-part .ks-svg {
    height: 100%;
}

#app-kinder-shape .ks-scene-part.is-found {
    filter: drop-shadow(0 0 6px var(--bs-success));
}

#app-kinder-shape .ks-scene-part.is-found::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 1.5px var(--bs-success);
    paint-order: stroke fill;   /* ふち文字は ふちを 字の後ろに 塗る（字が やせて 汚く見えるのを ふせぐ） */
}

/* ---------- がんばりきろく（stats） ---------- */
#app-kinder-shape .ks-stats-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    margin-bottom: 0.35rem;
}

#app-kinder-shape .ks-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#app-kinder-shape .ks-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    font-size: 0.95rem;
    font-weight: 700;
}

#app-kinder-shape .ks-stat b {
    color: var(--kids-accent-text, var(--bs-primary));
}

#app-kinder-shape .ks-stat-streak b {
    /* --bs-danger(#dc3545) は ダークの 背景で コントラスト 2.94。
       テーマで 明るさが 変わる -text-emphasis を つかう */
    color: var(--bs-danger-text-emphasis, var(--bs-danger));
}

/* reduce motion 尊重 */
@media (prefers-reduced-motion: reduce) {
    #app-kinder-shape * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* スマホ: かたちを置く面の下限を下げる（シールちょうの畳み込み=max-height は 2026-07-29 に全廃） */
@media (max-width: 767.98px) {
    #app-kinder-shape .ks-stage { min-height: 200px !important; }
}

/* 続き2 */
@media (max-width: 767.98px) {
    #app-kinder-shape .ks-stage { min-height: 170px !important; }
}
@media (max-width: 767.98px) { #app-kinder-shape .ks-stage { min-height: 148px !important; } }

/* 続き3 */
@media (max-width: 767.98px) { #app-kinder-shape .ks-book-grid { min-height: 70px !important; } }