/* =================================================================
   とけいのよみかた（kids-tokei）専用スタイル
   スコープはすべて #app-kids-tokei で限定
   色はテーマ変数（--bs-*）で light / dark 両対応
   ================================================================= */

#app-kids-tokei {
    /* 短針=あか / 長針=あお（子どもが色で役割を覚えられるよう固定） */
    --kt-hour: #e23b3b;
    --kt-min: #2f7be0;
    --kt-face-bg: var(--bs-body-bg);
    --kt-face-line: var(--bs-border-color);
    --kt-num: var(--bs-body-color);
    --kt-min-num: #2f7be0;
}

[data-bs-theme="dark"] #app-kids-tokei {
    --kt-hour: #ff6b6b;
    --kt-min: #6ea8ff;
    --kt-min-num: #8fbcff;
}

/* ---------------- モードえらび ---------------- */
#app-kids-tokei .kt-modebar {
    display: flex;
    gap: .5rem;
    max-width: 560px;
    flex-wrap: wrap;
    justify-content: center;
}

#app-kids-tokei .kt-modebtn {
    flex: 1 1 0;
    min-width: 120px;
    min-height: 60px;
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

#app-kids-tokei .kt-modebtn i {
    font-size: 1.3rem;
}

@media (hover: hover) { #app-kids-tokei .kt-modebtn:hover {
    transform: translateY(-2px);
} }

/* 選択中の 色は ほかの 選択肢（きざみの ピル）と 同じ primary に そろえる
   （同じ 画面で 選択状態の 色が 2種類に ならないように。金色は 見出し・記録の 装飾に 残す） */
#app-kids-tokei .kt-modebtn.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ---------------- せいせき ---------------- */
/* きろくは あそびの **ふりかえり**。主役では ないので 控えめに する。
   もとは 角丸999px の 大きな pill に 6項目＋アイコン2つを 詰めこみ、
   しかも **出題より 上**に 置いて いた（2026-09-03「UI が 中途半端」の 指摘）。
   ふりかえりは 下に、ひかえめに（[[ui-separation-and-flow]]） */
#app-kids-tokei .kt-record {
    max-width: 520px;
    padding: .6rem .8rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

/* 文字数で 幅が 変わって 行が ガタつく ので 等幅に する */
#app-kids-tokei .kt-record-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem .5rem;
}

#app-kids-tokei .kt-record-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    white-space: nowrap;
}

#app-kids-tokei .kt-record-item b {
    color: var(--bs-body-color);
}

@media (max-width: 419.98px) {
    #app-kids-tokei .kt-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#app-kids-tokei .kt-record-item b {
    font-size: 1.15rem;
    margin-left: .15rem;
}

/* ---------------- むずかしさ ---------------- */
/* 5つ ならぶ。flex+wrap だと 文字数で 幅が 決まり、
   「ちょうど100 / 30ぷん87 / 15ふん77px」と ガタついて 3+2 が 半端に 見えた。
   等幅グリッドに して そろえる（[[ui-separation-and-flow]]） */
#app-kids-tokei .kt-levelbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
    max-width: 420px;
    margin-inline: auto;
}
/* PC は 5つを よこ1れつに する。
 * 3れつ固定だと 5つが「3＋2」に なり、右下に からの ますが 空いたまま 残る。
 * 中身に 要るのは いちばん 長い「ちょうど」で 80px なので、
 * 5れつ（1ます 91px）なら 折り返さずに 入る（実測）。 */
@media (min-width: 640px) {
    #app-kids-tokei .kt-levelbar {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: 560px;
    }
}

#app-kids-tokei .kt-levelbtn {
    min-height: 44px;
    padding: .4rem 1rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

#app-kids-tokei .kt-levelbtn.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ---------------- 時計本体 ---------------- */
#app-kids-tokei .kt-clock-wrap {
    width: 100%;
    max-width: 340px;
}

#app-kids-tokei .kt-clock {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    touch-action: none;
    /* ドラッグ中に画面がスクロールしないように */
    user-select: none;
}

#app-kids-tokei .kt-face {
    fill: var(--kt-face-bg);
    stroke: var(--kt-face-line);
    stroke-width: 3;
}

#app-kids-tokei .kt-tick {
    stroke: var(--kt-face-line);
    stroke-width: 1;
}

#app-kids-tokei .kt-tick.is-major {
    stroke: var(--kt-num);
    stroke-width: 2.5;
}

#app-kids-tokei .kt-number {
    fill: var(--kt-num);
    font-weight: 800;
    font-size: 15px;
    text-anchor: middle;
    dominant-baseline: central;
}

#app-kids-tokei .kt-min-number {
    fill: var(--kt-min-num);
    font-weight: 700;
    font-size: 8px;
    text-anchor: middle;
    dominant-baseline: central;
}

#app-kids-tokei .kt-hand-hour {
    stroke: var(--kt-hour);
    stroke-width: 7;
    stroke-linecap: round;
    transition: transform .18s ease;
}

#app-kids-tokei .kt-hand-min {
    stroke: var(--kt-min);
    stroke-width: 5;
    stroke-linecap: round;
    transition: transform .18s ease;
}

/* ドラッグ操作中はトランジションを切る（追従を軽く） */
#app-kids-tokei .kt-draggable .kt-clock.is-dragging .kt-hand-hour,
#app-kids-tokei .kt-draggable .kt-clock.is-dragging .kt-hand-min {
    transition: none;
}

#app-kids-tokei .kt-center {
    fill: var(--kt-num);
}

#app-kids-tokei .kt-draggable .kt-clock {
    cursor: grab;
}

#app-kids-tokei .kt-draggable .kt-clock.is-dragging {
    cursor: grabbing;
}

/* ---------------- しつもん・こたえ ---------------- */
#app-kids-tokei .kt-question {
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 800;
}

#app-kids-tokei .kt-question b {
    color: var(--bs-warning);
}

#app-kids-tokei .kt-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    max-width: 420px;
    margin: 0 auto;
}

#app-kids-tokei .kt-choice {
    min-height: 60px;
    border: 2px solid var(--bs-primary);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .1s ease, background .1s ease;
}

@media (hover: hover) { #app-kids-tokei .kt-choice:hover {
    transform: translateY(-2px);
    background: var(--bs-primary-bg-subtle);
} }

#app-kids-tokei .kt-choice.is-correct {
    background: #22a06b;
    border-color: #22a06b;
    color: #fff;
    animation: kt-pop .4s ease;
}

#app-kids-tokei .kt-choice.is-wrong {
    background: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger);
    animation: kt-shake .4s ease;
}

#app-kids-tokei .kt-choice:disabled {
    cursor: default;
    opacity: .85;
}

/* ---------------- あわせる ---------------- */
#app-kids-tokei .kt-setnow {
    font-size: 1.15rem;
}

#app-kids-tokei .kt-setnow b {
    font-size: 1.5rem;
    color: var(--bs-warning);
}

#app-kids-tokei .kt-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

#app-kids-tokei .kt-stepper-label {
    width: 70px;
    font-weight: 700;
    text-align: right;
}

#app-kids-tokei .kt-step {
    width: 64px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

/* ---------------- ヒント・メッセージ ---------------- */
#app-kids-tokei .kt-hint-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

#app-kids-tokei .kt-hint-text.is-ok {
    color: #22a06b;
}

#app-kids-tokei .kt-hint-text.is-ng {
    color: var(--bs-danger);
}

/* ---------------- いまなんじ？ ---------------- */
#app-kids-tokei .kt-now-digital {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    font-weight: 800;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

#app-kids-tokei .kt-now-kana {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 700;
    color: var(--bs-warning);
}

#app-kids-tokei .kt-hari-legend {
    max-width: 340px;
    text-align: left;
    display: grid;
    gap: .5rem;
}

#app-kids-tokei .kt-hari-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
}

#app-kids-tokei .kt-hari-swatch {
    flex: 0 0 auto;
    width: 34px;
    height: 6px;
    border-radius: 3px;
}

#app-kids-tokei .kt-swatch-hour {
    width: 22px;
    height: 7px;
    background: var(--kt-hour);
}

#app-kids-tokei .kt-swatch-min {
    width: 34px;
    height: 5px;
    background: var(--kt-min);
}

/* ---------------- せいかい えんしゅつ ---------------- */
#app-kids-tokei .kt-celebrate {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, .12);
}

#app-kids-tokei .kt-celebrate-inner {
    text-align: center;
    animation: kt-pop .5s ease;
}

#app-kids-tokei .kt-celebrate-emoji {
    font-size: clamp(4rem, 20vw, 8rem);
    line-height: 1.25;
    animation: kt-bounce .6s ease infinite alternate;
}

#app-kids-tokei .kt-celebrate-text {
    margin-top: .5rem;
    font-size: clamp(2rem, 9vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}

/* ---------------- アニメーション ---------------- */
@keyframes kt-pop {
    0% { transform: scale(.6); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes kt-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-18px); }
}

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

@media (prefers-reduced-motion: reduce) {
    #app-kids-tokei .kt-hand-hour,
    #app-kids-tokei .kt-hand-min,
    #app-kids-tokei .kt-choice.is-correct,
    #app-kids-tokei .kt-choice.is-wrong,
    #app-kids-tokei .kt-clockbtn.is-correct,
    #app-kids-tokei .kt-clockbtn.is-wrong,
    #app-kids-tokei .kt-celebrate-inner,
    #app-kids-tokei .kt-celebrate-emoji {
        animation: none;
        transition: none;
    }
}

/* ---------------- 解説（かいせつ） ---------------- */
#app-kids-tokei .kt-explain {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.7;
    padding: .7rem .9rem;
    border-radius: .8rem;
    border: 2px solid transparent;
    text-align: center;
}

#app-kids-tokei .kt-explain b {
    font-weight: 900;
}

#app-kids-tokei .kt-explain.is-ok {
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
    color: var(--bs-body-color);
}

#app-kids-tokei .kt-explain.is-ng {
    background: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-body-color);
}

/* ---------------- けいさん ---------------- */
#app-kids-tokei .kt-keisan-base {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

/* ---------------- デジタル ---------------- */
#app-kids-tokei .kt-choice-digi {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

#app-kids-tokei .kt-digi-big {
    display: inline-block;
    font-size: clamp(2.6rem, 11vw, 4rem);
    font-weight: 800;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    padding: .3rem 1.4rem;
    border-radius: 1rem;
    background: var(--bs-tertiary-bg);
    border: 3px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

#app-kids-tokei .kt-clockgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    max-width: 440px;
}

#app-kids-tokei .kt-clockbtn {
    border: 3px solid var(--bs-primary);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    padding: .6rem;
    cursor: pointer;
    transition: transform .1s ease, background .1s ease, border-color .1s ease;
}

@media (hover: hover) { #app-kids-tokei .kt-clockbtn:hover {
    transform: translateY(-2px);
    background: var(--bs-primary-bg-subtle);
} }

#app-kids-tokei .kt-clockbtn-face {
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
    pointer-events: none;
}

#app-kids-tokei .kt-clockbtn.is-correct {
    border-color: #22a06b;
    background: rgba(34, 160, 107, .12);
    animation: kt-pop .4s ease;
}

#app-kids-tokei .kt-clockbtn.is-wrong {
    border-color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
    animation: kt-shake .4s ease;
}

#app-kids-tokei .kt-clockbtn:disabled {
    cursor: default;
    opacity: .9;
}

/* パネルの表示切り替え（hidden属性で制御） */
#app-kids-tokei .kt-panel[hidden] {
    display: none;
}

/* スマホ: 時計そのものを優先。あそび方の切り替えは1行に畳む */

/* 続き: 時計は主役だが、スマホでは画面の1/4程度に収める（読める大きさは保つ） */
@media (max-width: 767.98px) {
    #app-kids-tokei .kt-clock-wrap {
        max-width: 180px;
    }
}

/* 続き2: 出題パネル全体を画面内に収める（時計と答えの選択肢が同時に見える） */


/* モード 5つ。2れつ（最後の 1つは まんなかへ）。
   **`display: grid` を ここで 明示する。** 共通の .mach-btngrid（詳細度 0,1,0）は
   ツール固有の `#app-… .xxx`（1,1,0）に 負けて display: flex の ままに なる */
#app-kids-tokei .kt-modebar.mach-btngrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* PC は よこに 余裕が ある ので あそび5つを 1れつに。
   セレクタは 上の `.kt-modebar.mach-btngrid`（詳細度 1,2,0）に そろえる。
   `.kt-modebar` だけ だと 詳細度で 負けて 2れつの まま に なる */
@media (min-width: 992px) {
    #app-kids-tokei .kt-modebar.mach-btngrid {
        max-width: 900px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------- モードえらびを 詰める（2026-09-03） ----------
   5つ とも 説明（.mach-mode-sub）を 出すと それだけで 700px 近く 使い、
   **出題の とけいが 画面の 外**に 出て いた。
   えらんで いる ものだけ 説明を 出す（[[ui-separation-and-flow]]
   「説明つきの 選択肢は えらんだ ものだけ 下に 1行 出す」）。
   どれを えらぶかは アイコンと 名前で 分かる */
#app-kids-tokei .kt-modebtn:not(.is-active) .mach-mode-sub {
    display: none;
}

/* ---------- モードボタンを 1行に（2026-09-03） ----------
   アイコンを 名前の 上に 積んで いた ため 1つ 80〜90px、5つで 400px 近く 使い、
   出題の とけいが 画面の 下へ 押し出されて いた。
   よこ1行に して 高さを 半分に する。えらんで いる ものの 説明だけ 次の 行へ */
#app-kids-tokei .kt-modebtn {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .35rem;
    min-height: 52px;
    padding: .35rem .5rem;
}

#app-kids-tokei .kt-modebtn .mach-mode-sub {
    flex-basis: 100%;
}