/* =================================================================
   キッズナンプレ style.css
   すべて #app-kids-sudoku 配下にスコープ。ライト/ダーク両対応。
   色は Bootstrap 変数を基本にハードコード暗色を避ける。
   ================================================================= */

#app-kids-sudoku {
    --ks-cell-border: var(--bs-border-color);
    --ks-thick: var(--bs-emphasis-color);
}

/* モードボタン内の補足（かんたん 等） */
#app-kids-sudoku .ks-mode-note {
    font-size: 0.85rem;
    opacity: 0.75;
}

/* くだもの/絵柄トグルなどの無効表示 */
#app-kids-sudoku .ks-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* あそびかた・レベルのピル */
#app-kids-sudoku .ks-diff-btn {
    font-weight: 700;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
}
#app-kids-sudoku .ks-size-btn,
#app-kids-sudoku .ks-play-btn {
    font-weight: 700;
}

/* あそびかたによる表示切替（役割の区分） */
#app-kids-sudoku.ks-mode-quiz .ks-puzzle-only { display: none !important; }
#app-kids-sudoku:not(.ks-mode-quiz) .ks-quiz-only { display: none !important; }

/* がんばりきろくの追加行 */
#app-kids-sudoku .ks-rec-extra {
    text-align: center;
    line-height: 1.6;
}

/* ---------------- せいせき ---------------- */
#app-kids-sudoku .ks-rec-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--kids-accent-text, var(--bs-primary));
    line-height: 1.1;
}
#app-kids-sudoku .ks-rec-lbl {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    line-height: 1.1;
}

/* ---------------- 盤面 ---------------- */
#app-kids-sudoku .ks-board-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

#app-kids-sudoku .ks-board {
    display: grid;
    grid-template-columns: repeat(var(--ks-n, 4), 1fr);
    /* 行も きめる。きめないと セルの 中身の 高さで 行が ふくらみ、
       overflow: hidden で 下の 行が 切られる（2026-09-02 実機で 最下行が 半分に なった） */
    grid-template-rows: repeat(var(--ks-n, 4), 1fr);
    gap: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 外枠は太め */
    border: 3px solid var(--ks-thick);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bs-body-bg);
    touch-action: manipulation;
}

#app-kids-sudoku .ks-cell {
    /* リセット（button ベース） */
    appearance: none;
    border: 1px solid var(--ks-cell-border);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-weight: 700;
    /* 盤面サイズに応じて文字を自動縮小 */
    font-size: clamp(0.9rem, calc(52vw / var(--ks-n, 4)), 2.4rem);
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.08s ease;
    user-select: none;
    /* aspect-ratio は もたない。ばんめん側が 正方形で 行・列を 等分するので、
       ここで 比を きめると 中身の 高さと ぶつかって はみ出す */
    min-width: 0;
    min-height: 0;
}

/* ブロック境界の太線 */
#app-kids-sudoku .ks-cell.ks-bd-right {
    border-right: 3px solid var(--ks-thick);
}
#app-kids-sudoku .ks-cell.ks-bd-bottom {
    border-bottom: 3px solid var(--ks-thick);
}

/* 最初から埋まっている固定マス */
#app-kids-sudoku .ks-cell.ks-given {
    background: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    cursor: default;
    font-weight: 800;
}

/* 関連マス（同じ行・列・同値）をやわらかく強調 */
#app-kids-sudoku .ks-cell.ks-related {
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
}

/* 選択中マス */
#app-kids-sudoku .ks-cell.ks-selected {
    background: color-mix(in srgb, var(--bs-primary) 32%, var(--bs-body-bg));
    box-shadow: inset 0 0 0 3px var(--bs-primary);
}

/* 重複（まちがい）マス */
#app-kids-sudoku .ks-cell.ks-conflict {
    background: color-mix(in srgb, var(--bs-danger) 30%, var(--bs-body-bg));
    color: var(--bs-danger);
}

/* ヒントで埋めた瞬間のフラッシュ */
#app-kids-sudoku .ks-cell.ks-hint-flash {
    animation: ks-flash 0.9s ease;
}
@keyframes ks-flash {
    0%   { background: var(--bs-warning); transform: scale(1.15); }
    100% { background: var(--bs-body-bg); transform: scale(1); }
}

/* ヒント段階1：論理的に決まるマスをやわらかく光らせる */
#app-kids-sudoku .ks-cell.ks-hint-glow {
    animation: ks-glow 0.8s ease-in-out infinite alternate;
    box-shadow: inset 0 0 0 3px var(--bs-warning);
    z-index: 1;
}
@keyframes ks-glow {
    from { background: color-mix(in srgb, var(--bs-warning) 20%, var(--bs-body-bg)); }
    to   { background: color-mix(in srgb, var(--bs-warning) 55%, var(--bs-body-bg)); }
}

/* クイズ：「?」の対象マス */
#app-kids-sudoku .ks-cell.ks-quiz-target {
    background: color-mix(in srgb, var(--bs-primary) 24%, var(--bs-body-bg));
    color: var(--kids-accent-text, var(--bs-primary));
    font-weight: 900;
    box-shadow: inset 0 0 0 3px var(--bs-primary);
    animation: ks-pop 0.9s ease infinite alternate;
}

/* クイズ：選択肢ボタンの正誤フィードバック */
#app-kids-sudoku .ks-quiz-choice.ks-choice-correct {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
#app-kids-sudoku .ks-quiz-choice.ks-choice-wrong {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

/* まちがい時のゆれ */
#app-kids-sudoku .ks-cell.ks-shake {
    animation: ks-shake 0.5s ease;
}
@keyframes ks-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* ---------------- すうじパレット ---------------- */
#app-kids-sudoku .ks-palette {
    display: grid;
    /* 数字ボタン n 個 ＋ けす1個。折り返しやすいよう最小幅で自動配置 */
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}
#app-kids-sudoku .ks-pal-btn {
    font-weight: 800;
    font-size: 1.4rem;
    min-height: 56px;
    border: 2px solid var(--bs-primary);
    color: var(--kids-accent-text, var(--bs-primary));
    background: var(--bs-body-bg);
    border-radius: 12px;
    transition: transform 0.08s ease, background-color 0.12s ease;
}
@media (hover: hover) { #app-kids-sudoku .ks-pal-btn:hover {
    background: color-mix(in srgb, var(--bs-primary) 15%, var(--bs-body-bg));
} }
#app-kids-sudoku .ks-pal-btn:active {
    transform: scale(0.92);
}
#app-kids-sudoku .ks-pal-erase {
    border-color: var(--bs-secondary);
    color: var(--bs-secondary-color);
}

/* ---------------- クリア演出オーバーレイ ---------------- */
#app-kids-sudoku .ks-clear-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* すけると ばんめんの すうじが 読めて しまい、演出に 見えない */
    background: color-mix(in srgb, var(--bs-primary) 97%, transparent);
    border-radius: 8px;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
}
#app-kids-sudoku .ks-clear-overlay.ks-show {
    opacity: 1;
}
#app-kids-sudoku .ks-clear-inner {
    text-align: center;
    color: #fff;
    transform: scale(0.6);
    transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#app-kids-sudoku .ks-clear-overlay.ks-show .ks-clear-inner {
    transform: scale(1);
}
#app-kids-sudoku .ks-clear-stars {
    font-size: clamp(1.5rem, 6.5vw, 2.6rem);
    line-height: 1.25;
    animation: ks-pop 0.8s ease infinite alternate;
}
#app-kids-sudoku .ks-clear-title {
    font-size: clamp(1.8rem, 8.5vw, 3.2rem);
    font-weight: 900;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 0.3rem;
}
#app-kids-sudoku .ks-clear-time {
    font-size: 1.05rem;
    font-weight: 700;
    opacity: 0.95;
}
@keyframes ks-pop {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-8px) scale(1.08); }
}

/* ---------------- モバイル微調整 ---------------- */
@media (max-width: 400px) {
    #app-kids-sudoku .ks-palette {
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        gap: 6px;
    }
    #app-kids-sudoku .ks-pal-btn {
        font-size: 1.2rem;
        min-height: 48px;
    }
}

/* クリアの ボタンは 1行に する。2行に なると 演出が ばんめんから はみ出す */
#app-kids-sudoku .ks-clear-inner .btn {
    white-space: nowrap;
    font-size: 1rem;
    padding: 0.45rem 1rem;
}