/* =================================================================
 * しんけいすいじゃく（kids-memory）style.css
 * スコープは #app-kids-memory に限定
 * ================================================================= */

/* --- ベストきろく・HUD の数字ボックス --- */
#app-kids-memory .km-best-box,
#app-kids-memory .km-hud-box {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 0.6rem 0.3rem;
}
#app-kids-memory .km-best-num,
#app-kids-memory .km-hud-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--kids-accent-text, var(--bs-primary));
}

/* --- オプション行 --- */
#app-kids-memory .km-option-row {
    background: var(--bs-body-tertiary-bg, var(--bs-tertiary-bg));
    border-radius: 14px;
    padding: 0.75rem 1rem;
}

/* --- ふたり対戦：プレイヤーの色 --- */
#app-kids-memory .km-dot {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    margin-right: 0.3em;
    vertical-align: -0.05em;
}
#app-kids-memory .km-dot-red { background: #ef4444; }
#app-kids-memory .km-dot-blue { background: #3b82f6; }

/* いま手番のプレイヤーを強調 */
#app-kids-memory .km-player-box.km-active {
    border-width: 3px;
    box-shadow: 0 0 0 0.2rem rgba(124, 90, 195, 0.25);
    transition: box-shadow 0.2s ease;
}
#app-kids-memory #km-p1-box.km-active { border-color: #ef4444; }
#app-kids-memory #km-p2-box.km-active { border-color: #3b82f6; }

#app-kids-memory .km-turn-banner {
    font-weight: 800;
    font-size: 1.1rem;
    padding: 0.4rem;
    border-radius: 12px;
    background: var(--bs-body-tertiary-bg, var(--bs-tertiary-bg));
}
#app-kids-memory .km-turn-banner.km-turn-p1 { color: #ef4444; }
#app-kids-memory .km-turn-banner.km-turn-p2 { color: #3b82f6; }

/* --- ボード（グリッド） --- */
#app-kids-memory .km-board {
    display: grid;
    grid-template-columns: repeat(var(--km-cols, 4), 1fr);
    gap: clamp(6px, 1.5vw, 12px);
    /* むずかしさに応じて JS が --km-cols を設定。最大幅を抑えてカードを大きく保つ */
    max-width: min(100%, 560px);
    touch-action: manipulation;
}
/* スーパー・むずかしいなど列が多いときは横幅を広げる */
#app-kids-memory .km-board.km-board-wide {
    max-width: min(100%, 720px);
}

/* --- 1枚のカード（3D フリップ） --- */
#app-kids-memory .km-card {
    position: relative;
    aspect-ratio: 1 / 1;
    /* タッチターゲット 44px 以上を保証 */
    min-width: 44px;
    min-height: 44px;
    perspective: 700px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}
#app-kids-memory .km-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.35, 1);
}
#app-kids-memory .km-card.is-flipped .km-card-inner,
#app-kids-memory .km-card.is-matched .km-card-inner {
    transform: rotateY(180deg);
}

#app-kids-memory .km-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(8px, 2.5vw, 16px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

/* うら面（伏せた状態）＝ブランド紫のグラデーション */
#app-kids-memory .km-face-front {
    background: linear-gradient(135deg, #9d83d9, #7c5ac3);
    color: #fff;
    font-size: clamp(1.2rem, 5vw, 2rem);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25);
}
#app-kids-memory .km-face-front i {
    opacity: 0.85;
}

/* おもて面（絵文字） */
#app-kids-memory .km-face-back {
    transform: rotateY(180deg);
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    font-size: clamp(1.6rem, 8vw, 3rem);
    line-height: 1;
}

/* おもて面が文字（絵とことば・けいさん）のとき＝小さめ＋折り返し可 */
#app-kids-memory .km-face-text {
    font-size: clamp(0.8rem, 3.6vw, 1.5rem);
    font-weight: 800;
    line-height: 1.12;
    padding: 0.15em 0.2em;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    color: var(--bs-body-color);
}
/* こたえの数字は大きく・ブランド色で目立たせる */
#app-kids-memory .km-face-num {
    font-size: clamp(1.4rem, 6.5vw, 2.4rem);
    color: var(--kids-accent-text, var(--bs-primary));
}

/* そろったカードの強調（あたり演出） */
#app-kids-memory .km-card.is-matched .km-face-back {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    animation: km-match-pop 0.5s ease;
}
@keyframes km-match-pop {
    0%   { transform: rotateY(180deg) scale(1); }
    45%  { transform: rotateY(180deg) scale(1.12); }
    100% { transform: rotateY(180deg) scale(1); }
}

/* めくれない状態（そろい済み）は操作不可に */
#app-kids-memory .km-card.is-matched {
    cursor: default;
    pointer-events: none;
}

/* 押したときのフィードバック（軽く沈む） */
#app-kids-memory .km-card:not(.is-matched):active .km-card-inner {
    filter: brightness(0.95);
}

/* --- 「あたり！」小バッジ（カード上に一瞬出す） --- */
#app-kids-memory .km-hit-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 3;
    background: #22c55e;
    color: #fff;
    font-weight: 800;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    font-size: clamp(0.7rem, 3vw, 1rem);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: km-hit 0.9s ease forwards;
}
@keyframes km-hit {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    70%  { opacity: 1; transform: translate(-50%, -70%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(1); }
}

/* --- おぼえるモードのカウントダウン・オーバーレイ --- */
#app-kids-memory .km-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}
#app-kids-memory .km-overlay-text {
    font-size: clamp(3rem, 18vw, 7rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 16px rgba(124, 90, 195, 0.9), 0 0 4px rgba(0, 0, 0, 0.5);
    animation: km-count 1s ease-in-out;
}
@keyframes km-count {
    0%   { transform: scale(0.4); opacity: 0; }
    30%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- コンボ演出 --- */
#app-kids-memory .km-combo-pop {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-weight: 900;
    font-size: clamp(1.2rem, 6vw, 2rem);
    color: #f59e0b;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
}
#app-kids-memory .km-combo-pop.km-combo-show {
    animation: km-combo 1s ease forwards;
}
@keyframes km-combo {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.5) rotate(-6deg); }
    30%  { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(3deg); }
    70%  { opacity: 1; transform: translateX(-50%) scale(1) rotate(-2deg); }
    100% { opacity: 0; transform: translateX(-50%) scale(1) rotate(0deg); }
}

/* --- 解説キャプション（あたったペアの意味を言葉で） --- */
#app-kids-memory .km-hint-caption {
    min-height: 2.2rem;
    margin: 0.75rem auto 0;
    max-width: 720px;
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.1rem, 4.5vw, 1.6rem);
    color: var(--kids-accent-text, var(--bs-primary));
    opacity: 0;
}
#app-kids-memory .km-hint-caption.km-hint-show {
    animation: km-hint 1.6s ease forwards;
}
@keyframes km-hint {
    0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
    18%  { opacity: 1; transform: translateY(0) scale(1.05); }
    35%  { opacity: 1; transform: translateY(0) scale(1); }
    85%  { opacity: 1; }
    100% { opacity: 0.35; }
}

/* --- けっか演出 --- */
#app-kids-memory .km-result-emoji {
    font-size: clamp(3rem, 12vw, 5rem);
    line-height: 1.25;
    animation: km-bounce 0.8s ease;
}
@keyframes km-bounce {
    0%   { transform: scale(0) rotate(-20deg); }
    60%  { transform: scale(1.2) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}
#app-kids-memory .km-newrecord {
    display: inline-block;
    font-weight: 900;
    font-size: 1.3rem;
    color: #f59e0b;
    animation: km-shine 1.2s ease infinite;
}
@keyframes km-shine {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* --- モーション設定を尊重（酔い対策） --- */
@media (prefers-reduced-motion: reduce) {
    #app-kids-memory .km-card-inner { transition-duration: 0.01ms; }
    #app-kids-memory .km-hit-badge,
    #app-kids-memory .km-overlay-text,
    #app-kids-memory .km-combo-pop.km-combo-show,
    #app-kids-memory .km-hint-caption.km-hint-show,
    #app-kids-memory .km-result-emoji,
    #app-kids-memory .km-newrecord,
    #app-kids-memory .km-card.is-matched .km-face-back {
        animation: none;
    }
    /* アニメを切っても解説文は読めるように表示は残す */
    #app-kids-memory .km-hint-caption.km-hint-show { opacity: 1; }
}

/* せってい画面の 選択群を 3れつに する（2026-08-26）。
   11テーマ×2れつ＝6行、ペア3つ×全幅、むずかしさ6つ×2行 で
   スタートまで 1186px あった。文字を 小さく しても 入らないので 並べかたを 変える。
   （共通の .mach-btngrid は 既定2れつ。列数だけ ツール側で 上書きする） */
/* 列数と「余った1個をまんなかへ」の 打ち消しは 共通の .mach-cols3 が やる。
   ここは 折り返しの 抑止だけ。*/
#app-kids-memory .km-grid-theme .btn,
#app-kids-memory .km-grid-pair .btn,
#app-kids-memory .km-grid-level .btn {
    white-space: nowrap;   /* 「スポーツ」が 2行に 割れない ように */
}