/* =================================================================
   かたちクイズ（kids-zukei）専用スタイル
   すべて #app-kids-zukei でスコープする
   ================================================================= */

#app-kids-zukei {
    /* こども向けにやわらかい角丸・大きめフォント */
    --zk-radius: 18px;
}

/* ---------- せいせきバー ---------- */
#app-kids-zukei .zk-record-bar {
    max-width: 560px;
    /* 破線は「まだ できて いない・仮の 場所」に 見える ので つかわない
       （2026-09-04 UI 精査）。きろくは 読む だけの 情報なので、
       線では なく **うすい 面**で しずかに 囲う */
    background: var(--bs-secondary-bg);
    border: 0;
    /* 999px は 1行に 収まる ときだけ まる。折り返して 縦に のびると
       たまご形に くずれる（2026-09-03 実機で 指摘）。高さが 変わっても
       形の 変わらない 固定の 角丸に する */
    border-radius: var(--zk-radius);
    padding: 0.5rem 1rem;
}

#app-kids-zukei .zk-record-item {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

/* ---------- モードえらび カード ---------- */
#app-kids-zukei .zk-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 1.4rem 0.5rem;
    border: 3px solid var(--bs-border-color);
    border-radius: var(--zk-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
    min-height: 140px;
}

#app-kids-zukei .zk-mode-card:focus-visible {
    border-color: var(--bs-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(124, 90, 195, 0.25);
    outline: none;
}

@media (hover: hover) { #app-kids-zukei .zk-mode-card:hover {
    border-color: var(--bs-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(124, 90, 195, 0.25);
    outline: none;
} }

#app-kids-zukei .zk-mode-card:active {
    transform: translateY(0);
}

#app-kids-zukei .zk-mode-emoji {
    font-size: 2.6rem;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

#app-kids-zukei .zk-mode-title {
    font-weight: 800;
    font-size: 1.15rem;
}

#app-kids-zukei .zk-mode-sub {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* ---------- レベルえらび ---------- */
#app-kids-zukei .zk-level-wrap {
    max-width: 520px;
}

#app-kids-zukei .zk-level-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

#app-kids-zukei .zk-level-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 1.1rem 0.5rem;
    border: 3px solid var(--bs-border-color);
    border-radius: var(--zk-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    min-height: 110px;
}

#app-kids-zukei .zk-level-btn:focus-visible {
    border-color: var(--bs-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(124, 90, 195, 0.22);
    outline: none;
}

@media (hover: hover) { #app-kids-zukei .zk-level-btn:hover {
    border-color: var(--bs-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(124, 90, 195, 0.22);
    outline: none;
} }

#app-kids-zukei .zk-level-stars {
    font-size: 1.2rem;
    color: #eab308;
    letter-spacing: 0.05rem;
    line-height: 1;
}

#app-kids-zukei .zk-level-name {
    font-weight: 800;
    font-size: 1.1rem;
}

#app-kids-zukei .zk-level-best {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

/* ---------- ゲーム画面 ---------- */
#app-kids-zukei .zk-game-wrap {
    max-width: 620px;
}

#app-kids-zukei .zk-q-counter {
    font-weight: 700;
    color: var(--bs-secondary-color);
}

#app-kids-zukei .zk-question {
    line-height: 1.5;
}

/* しゅつだいステージ（SVG を置く箱） */
#app-kids-zukei .zk-stage {
    background: var(--bs-body-bg);
    border: 3px solid var(--bs-border-color);
    border-radius: var(--zk-radius);
    padding: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 220px だと といと テンキーが 1画面に 入らない（2026-09-04 実測）。
       かたちは じゅうぶん 大きく 見える 範囲で 縮める */
    min-height: 156px;
}

#app-kids-zukei .zk-stage svg {
    max-width: 100%;
    height: auto;
}

/* 単体図形（なまえあて用）の大きさ */
#app-kids-zukei .zk-single-shape {
    width: 150px;
    height: 150px;
    max-width: 55vw;
}

/* かぞえよう・つみき の情景 SVG */
#app-kids-zukei .zk-scene {
    width: 100%;
    max-width: 460px;
    /* といと テンキーを 1画面に 収める ための 上限。
       **といが 2行に なる ばあいで 決める。** 100とおりの とい のうち
       36とおりが 402px で 2行に なる（tools/qwrap.mjs）。1行の ときだけ
       収まる 高さに すると、長い といの とき ✓ が 画面から 出る */
    max-height: 168px;
    height: auto;
}

/* ---------- こたえ: 4択（なまえあて / なかまわけ条件なし） ---------- */
#app-kids-zukei .zk-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

#app-kids-zukei .zk-choice-btn {
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: 800;
    border-radius: var(--zk-radius);
}

/* ---------- こたえ: テンキー ---------- */
#app-kids-zukei .zk-keypad {
    max-width: 320px;
    margin: 0 auto;
}

#app-kids-zukei .zk-keypad-display {
    height: 50px;
    border: 3px solid var(--bs-primary);
    border-radius: var(--zk-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    /* 行の 高さを 1 に する。ふつうの 1.5 だと 2rem の 数字が 48px に なり、
       50px の 箱（内側44px）から 2px はみ出して 上下が わずかに 切れる */
    line-height: 1;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

#app-kids-zukei .zk-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

#app-kids-zukei .zk-key {
    padding: 0.55rem 0;
    font-size: 1.6rem;
    font-weight: 800;
    border-radius: 14px;
}

/* ---------- こたえ: なかまわけ（タップ選択） ---------- */
#app-kids-zukei .zk-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

/* スマホでも 3れつの まま。2れつに すると 1ますが 180px に なり、
   6つ で 3だん＝540px。といと ボタンが 画面から 出る（2026-09-04 実測） */
@media (max-width: 420px) {
    #app-kids-zukei .zk-pick-grid {
        gap: 0.5rem;
    }
}

#app-kids-zukei .zk-pick-item {
    border: 3px solid var(--bs-border-color);
    border-radius: var(--zk-radius);
    background: var(--bs-body-bg);
    padding: 0.6rem;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

#app-kids-zukei .zk-pick-item svg {
    width: 74%;
    height: 74%;
}

#app-kids-zukei .zk-pick-item.is-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(124, 90, 195, 0.28) inset;
    transform: scale(0.96);
}

#app-kids-zukei .zk-pick-actions {
    margin-top: 1rem;
    text-align: center;
}

/* ---------- こたえ: 1つえらぶ（かたちさがし / なかまはずれ） ---------- */
#app-kids-zukei .zk-find-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

/* 基準端末（402px）でも **3れつ**（1つ 約115px）。
   420px で 2れつに 落として いた ため、6こで 3行＝540px を 占めて いた
   （2026-09-03 実機「答えも冗長」）。ごく せまい 端末だけ 2れつ */
#app-kids-zukei .zk-find-grid.is-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 2れつだと 1つが 大きく なりすぎる ので 幅を おさえる
       （3れつ 6こ の とき より 縦に のびないように） */
    max-width: 300px;
    margin-inline: auto;
}

@media (max-width: 340px) {
    #app-kids-zukei .zk-find-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#app-kids-zukei .zk-find-item {
    border: 3px solid var(--bs-border-color);
    border-radius: var(--zk-radius);
    background: var(--bs-body-bg);
    padding: 0.6rem;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

#app-kids-zukei .zk-find-item:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 6px 16px rgba(124, 90, 195, 0.22);
    outline: none;
}

@media (hover: hover) { #app-kids-zukei .zk-find-item:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 6px 16px rgba(124, 90, 195, 0.22);
    outline: none;
} }

#app-kids-zukei .zk-find-item svg {
    width: 74%;
    height: 74%;
}

#app-kids-zukei .zk-find-item.is-wrong {
    border-color: var(--bs-danger);
    animation: zk-shake 0.35s ease;
}

@keyframes zk-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ---------- みのまわり: 大きな絵文字 ---------- */
#app-kids-zukei .zk-life-emoji {
    font-size: clamp(4rem, 22vw, 7rem);
    line-height: 1.25;
    text-align: center;
}

/* ---------- ヒント / かいせつ ---------- */
#app-kids-zukei .zk-hint-box {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-info-border-subtle);
    border-radius: 14px;
    padding: 0.6rem 1rem;
    font-weight: 700;
    text-align: center;
}

/* 正解時のかいせつ（みどり）・不正解時のかいせつ（きいろ） */
#app-kids-zukei .zk-hint-box.zk-explain-ok {
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}

#app-kids-zukei .zk-hint-box.zk-explain-ng {
    background: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

#app-kids-zukei .zk-newbest {
    color: var(--bs-success);
    font-weight: 900;
}

/* ---------- せいかい / ざんねん フィードバック ---------- */
#app-kids-zukei .zk-feedback {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    z-index: 1080;
}

#app-kids-zukei .zk-feedback .zk-fb-emoji {
    font-size: 5.5rem;
    animation: zk-pop 0.5s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

#app-kids-zukei .zk-feedback .zk-fb-text {
    font-size: 2rem;
    font-weight: 900;
    padding: 0.3rem 1.4rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    animation: zk-pop 0.5s cubic-bezier(0.2, 1.4, 0.5, 1) 0.05s both;
}


#app-kids-zukei .zk-feedback.is-wrong .zk-fb-text {
    color: var(--kids-accent-text, var(--bs-primary));
}

@keyframes zk-pop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---------- けっか画面 ---------- */
#app-kids-zukei .zk-result-card {
    max-width: 480px;
    background: var(--bs-body-bg);
    border: 3px solid var(--bs-primary);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(124, 90, 195, 0.2);
}

#app-kids-zukei .zk-result-emoji {
    font-size: 4.5rem;
    animation: zk-pop 0.6s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

#app-kids-zukei .zk-result-stars {
    font-size: 2.4rem;
    letter-spacing: 0.2rem;
}

/* 動きを控えたい設定への配慮 */
@media (prefers-reduced-motion: reduce) {
    #app-kids-zukei .zk-mode-card,
    #app-kids-zukei .zk-feedback .zk-fb-emoji,
    #app-kids-zukei .zk-feedback .zk-fb-text,
    #app-kids-zukei .zk-result-emoji {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- おと・もどる・ヒント（小さな そうさボタン） ---------- */
/* 「細い ボーダー＋角丸」の 組み合わせは のっぺりして 安っぽく 見える
   （rules: avoid-ai-cliche-visuals。2026-09-04「音、戻る、ヒントの UI が 微妙に ださい」）。
   線では なく **面（うすい 地）**で 作り、アイコンと ことばは gap で はなす
   （me-1 の 4px だと くっついて 見える）。高さは タッチ目標の 44px を 保つ。 */
#app-kids-zukei .zk-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.4rem 1.05rem;
    border: 0;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

#app-kids-zukei .zk-chip i {
    font-size: 1.05em;
    opacity: 0.7;
}

#app-kids-zukei .zk-chip:active {
    background: var(--bs-tertiary-bg);
}

#app-kids-zukei .zk-chip-hint {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

#app-kids-zukei .zk-chip-hint i {
    opacity: 0.85;
}

/* ---------- テンキー ---------- */
/* サイトの 規定は `btn-light`（けいさん系10本と 同じ）。
   btn-outline-secondary は 数字が うすい グレーに なり 読みにくかった
   （2026-09-04 UI 精査）。地を 本文の 地に そろえ、下に 影を 敷いて
   「押せる かたまり」に 見せる。 */
#app-kids-zukei .zk-key.btn-light {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

#app-kids-zukei .zk-key.btn-light:active {
    transform: translateY(2px);
    box-shadow: none;
}

#app-kids-zukei .zk-key-del {
    color: var(--bs-secondary-color);
}