/* =================================================================
   めいろあそび（kinder-maze）ツール固有スタイル
   すべて #app-kinder-maze でスコープ
   ================================================================= */

/* ---- バッジ類 ---- */
#app-kinder-maze .km-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    line-height: 1.2;
}

#app-kinder-maze .km-level-badge {
    color: var(--kids-accent-text, var(--bs-primary));
    background: rgba(124, 90, 195, 0.12);
}

#app-kinder-maze .km-star-badge {
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    min-height: 2rem;
}

#app-kinder-maze .km-star-badge .km-star-off {
    opacity: 0.25;
    filter: grayscale(1);
}

/* ---- せってい（せかい・あそびかた・おおきさ の選択） ---- */
#app-kinder-maze .km-set-group {
    margin-bottom: 0.6rem;
}

#app-kinder-maze .km-set-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

#app-kinder-maze .km-set-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#app-kinder-maze .km-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.1;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
    min-height: 40px;
}

#app-kinder-maze .km-chip:active {
    transform: scale(0.94);
}

#app-kinder-maze .km-chip.is-active {
    border-color: var(--bs-primary);
    background: rgba(124, 90, 195, 0.14);
    color: var(--kids-accent-text, var(--bs-primary));
}

#app-kinder-maze .km-chip-emoji {
    font-size: 1.1rem;
}

#app-kinder-maze .km-level-row .km-level-chip {
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
}

/* ---- がんばりきろく ---- */
#app-kinder-maze .km-rec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

#app-kinder-maze .km-rec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.25rem;
    border-radius: 12px;
    background: var(--bs-tertiary-bg);
}

#app-kinder-maze .km-rec-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--kids-accent-text, var(--bs-primary));
    line-height: 1.1;
}

#app-kinder-maze .km-rec-cap {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    line-height: 1.15;
    margin-top: 0.15rem;
}

/* ---- めいろ描画エリア ---- */
#app-kinder-maze .km-board-wrap {
    background: var(--bs-body-bg);
}

#app-kinder-maze .km-stage {
    /* ドラッグ中のスクロール・ズームを抑止 */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg);
    border-radius: 16px;
    padding: 10px;
    overflow: hidden;
}

#app-kinder-maze #km-svg {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    cursor: pointer;
}

/* SVG内の要素 */
#app-kinder-maze .km-wall {
    stroke: var(--bs-body-color);
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0.85;
}

#app-kinder-maze .km-cell-path {
    /* プレイヤーが通った軌跡（既定＝のはら／むらさき） */
    fill: rgba(124, 90, 195, 0.16);
}

/* せかい（テーマ）ごとの軌跡色・ステージ背景の色合い */
#app-kinder-maze .km-stage[data-km-theme="mori"] { background: rgba(76, 145, 80, 0.14); }
#app-kinder-maze .km-stage[data-km-theme="mori"] .km-cell-path { fill: rgba(76, 145, 80, 0.20); }
#app-kinder-maze .km-stage[data-km-theme="umi"] { background: rgba(56, 132, 214, 0.14); }
#app-kinder-maze .km-stage[data-km-theme="umi"] .km-cell-path { fill: rgba(56, 132, 214, 0.20); }
#app-kinder-maze .km-stage[data-km-theme="sora"] { background: rgba(90, 96, 200, 0.16); }
#app-kinder-maze .km-stage[data-km-theme="sora"] .km-cell-path { fill: rgba(120, 110, 220, 0.22); }
#app-kinder-maze .km-stage[data-km-theme="okashi"] { background: rgba(231, 111, 168, 0.14); }
#app-kinder-maze .km-stage[data-km-theme="okashi"] .km-cell-path { fill: rgba(231, 111, 168, 0.20); }

#app-kinder-maze .km-player {
    /* うさぎ本体：移動をなめらかに */
    transition: transform 0.12s ease-out;
}

#app-kinder-maze .km-player.km-hop {
    animation: km-hop 0.32s ease;
}

@keyframes km-hop {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-6px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
}

#app-kinder-maze .km-star.km-star-got {
    animation: km-pop 0.4s ease forwards;
}

@keyframes km-pop {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.8); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* きらきら演出 */
#app-kinder-maze .km-sparkle {
    animation: km-sparkle 0.7s ease forwards;
    transform-origin: center;
}

@keyframes km-sparkle {
    0%   { transform: scale(0) rotate(0deg); opacity: 1; }
    60%  { transform: scale(1.4) rotate(90deg); opacity: 1; }
    100% { transform: scale(0.4) rotate(160deg); opacity: 0; }
}

/* ---- 十字キー ---- */
#app-kinder-maze .km-dpad {
    display: grid;
    grid-template-columns: repeat(3, 68px);
    grid-template-rows: repeat(3, 68px);
    gap: 6px;
    justify-content: center;
}

#app-kinder-maze .km-dir-btn {
    width: 68px;
    height: 68px;
    font-size: 1.6rem;
    border-radius: 18px;
    border: 3px solid var(--bs-primary);
    color: var(--kids-accent-text, var(--bs-primary));
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s ease, background 0.12s ease;
}

#app-kinder-maze .km-dir-btn:active {
    transform: scale(0.9);
    background: var(--bs-primary);
    color: #fff;
}

#app-kinder-maze .km-dpad-center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

/* ---- クリア演出オーバーレイ ---- */
#app-kinder-maze .km-clear-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 16px;
    z-index: 5;
    animation: km-fade 0.25s ease;
}

@keyframes km-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#app-kinder-maze .km-clear-card {
    text-align: center;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    animation: km-bounce-in 0.5s cubic-bezier(0.18, 1.4, 0.5, 1);
    max-width: 90%;
}

@keyframes km-bounce-in {
    0%   { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

#app-kinder-maze .km-clear-emoji {
    font-size: 2rem;
    animation: km-wobble 0.9s ease infinite;
}

@keyframes km-wobble {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

#app-kinder-maze .km-clear-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--kids-accent-text, var(--bs-primary));
    margin-top: 0.25rem;
}

#app-kinder-maze .km-clear-sub {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kids-warm-text, #a06a00);
}

/* ---- シールちょう ---- */
#app-kinder-maze .km-sticker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 2rem;
    padding: 6px;
    border: 2px dashed var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-tertiary-bg);
}

#app-kinder-maze .km-sticker-grid span {
    font-size: 1.25rem;
    animation: km-pop-in 0.4s ease;
}

@keyframes km-pop-in {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

#app-kinder-maze .km-sticker-empty {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    align-self: center;
}

/* ---- モーションを控える設定への配慮 ---- */
@media (prefers-reduced-motion: reduce) {
    #app-kinder-maze .km-player,
    #app-kinder-maze .km-clear-card,
    #app-kinder-maze .km-clear-emoji,
    #app-kinder-maze .km-sparkle {
        animation: none !important;
        transition: none !important;
    }
}

/* ---- 縦積みになる幅（〜991px）: めいろと十字キーを1画面に収める ----
   2026-08-07。十字キーが画面外にあると、スクロールを知らない子どもには
   存在しないのと同じ。めいろは正方形（cols === rows）なので、max-width を
   絞れば高さも同じだけ縮む。
   415px = ヘッダ＋みだし＋バッジ行＋カード余白＋十字キー(180px) の実測合計。
   画面が低いときも 180px は確保する（clamp は下限が優先される）。 */
@media (max-width: 991.98px) {
    #app-kinder-maze #km-svg {
        max-width: clamp(180px, calc(100svh - 415px), 520px);
    }

    #app-kinder-maze .km-stage {
        padding: 6px;
    }
}

/* ---- モバイル微調整 ---- */
@media (max-width: 767.98px) {
    #app-kinder-maze .km-dpad {
        grid-template-columns: repeat(3, 56px);
        grid-template-rows: repeat(3, 56px);
        gap: 6px;
    }
    #app-kinder-maze .km-dir-btn {
        width: 56px;
        height: 56px;
        font-size: 1.35rem;
    }
    #app-kinder-maze .km-badge {
        font-size: 0.82rem;
        padding: 0.3rem 0.6rem;
    }
}

/* エリア内スクロール（max-height + overflow-y:auto で畳む手法）は 2026-07-29 に全廃。
   子どもには「切れている先がある」ことが分からないため、常に全展開で見せる */

/* おおきさ（5〜12）は 数字だけ なので 1行に 4つ 入れる */


/* おおきさ（5〜12）は 数字だけ なので 1行に 4つ。
   **`display: grid` を ここで 明示する。** 共通の .mach-btngrid（詳細度 0,1,0）は
   ツール固有の `#app-… .xxx`（1,1,0）に 負けて display: flex の ままに なる */
#app-kinder-maze #km-level-row.mach-btngrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 共通の .mach-btngrid は 2れつ の ときに 「最後の 1個を まんなかへ」 という
   指定を 持つ（grid-column: 1/-1; width: 50%）。**れつ数を 上書きした ここでは
   その 1個だけが 太くなって しまう** ので 打ち消す。 */
#app-kinder-maze #km-level-row.mach-btngrid > :last-child:nth-child(odd),
#app-kinder-maze #km-level-row.mach-btngrid > .btn:last-of-type:nth-of-type(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
}