/* =================================================================
 * おえかきボード 固有スタイル
 * すべてのセレクタを #app-kids-oekaki でスコープ
 * ================================================================= */

#app-kids-oekaki {
    --oe-radius: 1rem;
}

/* ---------- どうぐ（メインツール） ---------- */
#app-kids-oekaki .oe-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

#app-kids-oekaki .oe-tool {
    flex: 1 1 0;
    min-width: 76px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    font-weight: 700;
    border: 2px solid var(--bs-border-color);
    border-radius: var(--oe-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

#app-kids-oekaki .oe-tool i {
    font-size: 1.4rem;
}

#app-kids-oekaki .oe-tool span {
    font-size: 0.85rem;
}

#app-kids-oekaki .oe-tool:active {
    transform: scale(0.95);
}

#app-kids-oekaki .oe-tool.active {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
    color: var(--kids-accent-text, var(--bs-primary));
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

/* ---------- そうさボタン ---------- */
#app-kids-oekaki .oe-actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

#app-kids-oekaki .oe-action {
    flex: 1 1 0;
    min-width: 72px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    font-weight: 700;
    font-size: 0.8rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

#app-kids-oekaki .oe-action i {
    font-size: 1.1rem;
}

#app-kids-oekaki .oe-action:disabled {
    opacity: 0.4;
}

#app-kids-oekaki .oe-action-clear {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

#app-kids-oekaki .oe-action-save {
    border-color: var(--bs-success);
    color: var(--bs-success);
}

#app-kids-oekaki .oe-action:not(:disabled):active {
    transform: scale(0.95);
}

/* ---------- キャンバス ---------- */
#app-kids-oekaki .oe-board-wrap {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

#app-kids-oekaki #oe-canvas {
    display: block;
    width: 100%;
    height: auto;
    /* 紙のように つねに白い おえかきボード */
    background: #ffffff;
    border: 3px solid var(--bs-border-color);
    border-radius: var(--oe-radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    /* えがいている あいだ スクロールさせない */
    touch-action: none;
    cursor: crosshair;
}

#app-kids-oekaki .oe-stamp-hint {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
}

#app-kids-oekaki .oe-stamp-hint span {
    font-size: 1.1rem;
}

/* ---------- パネル共通 ---------- */
#app-kids-oekaki .oe-panel-label {
    font-weight: 700;
    color: var(--bs-body-color);
}

/* ---------- ふでいろ ---------- */
#app-kids-oekaki .oe-colors {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.4rem;
}

#app-kids-oekaki .oe-color {
    aspect-ratio: 1 / 1;
    min-height: 44px;
    border: 3px solid var(--bs-border-color);
    border-radius: 0.6rem;
    padding: 0;
    cursor: pointer;
    transition: transform 0.08s ease;
}

#app-kids-oekaki .oe-color:active {
    transform: scale(0.9);
}

#app-kids-oekaki .oe-color.active {
    border-color: var(--bs-body-color);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--bs-body-color) 35%, transparent);
    transform: scale(1.06);
}

/* あかるい色（白・きいろ）でも わくが見えるように */
#app-kids-oekaki .oe-color[data-light="1"] {
    border-color: #bdbdbd;
}

/* ---------- ふとさ ---------- */
#app-kids-oekaki .oe-sizes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

#app-kids-oekaki .oe-size {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    cursor: pointer;
}

#app-kids-oekaki .oe-size .oe-size-dot {
    background: var(--bs-body-color);
    border-radius: 50%;
    display: block;
}

#app-kids-oekaki .oe-size.active {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--bs-success) 25%, transparent);
}

#app-kids-oekaki .oe-size:active {
    transform: scale(0.95);
}

/* ---------- スタンプ ---------- */
#app-kids-oekaki .oe-stamps {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.4rem;
}

#app-kids-oekaki .oe-stamp {
    aspect-ratio: 1 / 1;
    min-height: 44px;
    font-size: 1.6rem;
    line-height: 1;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.6rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#app-kids-oekaki .oe-stamp.active {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--bs-warning) 30%, transparent);
    transform: scale(1.05);
}

#app-kids-oekaki .oe-stamp:active {
    transform: scale(0.9);
}

/* ---------- ぬりえ ---------- */
#app-kids-oekaki .oe-nurie {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

#app-kids-oekaki .oe-nurie-btn {
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    font-weight: 700;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
}

#app-kids-oekaki .oe-nurie-btn .oe-nurie-emoji {
    font-size: 1.5rem;
    line-height: 1.25;
}

#app-kids-oekaki .oe-nurie-btn span {
    font-size: 0.8rem;
}

#app-kids-oekaki .oe-nurie-btn:active {
    transform: scale(0.95);
}

/* ---------- おえかきの おだい ---------- */
#app-kids-oekaki .oe-odai-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

#app-kids-oekaki .oe-odai-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

#app-kids-oekaki .oe-odai-cat .oe-odai-cat-ico {
    font-size: 1.1rem;
    line-height: 1;
}

#app-kids-oekaki .oe-odai-cat:active {
    transform: scale(0.94);
}

#app-kids-oekaki .oe-odai-cat.active {
    border-color: var(--bs-warning);
    background: color-mix(in srgb, var(--bs-warning) 16%, transparent);
    box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--bs-warning) 30%, transparent);
}

/* いまの おだい ひょうじ */
#app-kids-oekaki .oe-odai-display {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 2px dashed color-mix(in srgb, var(--bs-warning) 55%, var(--bs-border-color));
    border-radius: var(--oe-radius);
    background: color-mix(in srgb, var(--bs-warning) 8%, var(--bs-body-bg));
    margin-bottom: 0.75rem;
}

#app-kids-oekaki .oe-odai-emoji {
    font-size: 2.8rem;
    line-height: 1.25;
    flex: 0 0 auto;
}

#app-kids-oekaki .oe-odai-textwrap {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

#app-kids-oekaki .oe-odai-lead {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
}

#app-kids-oekaki .oe-odai-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bs-body-color);
    line-height: 1.3;
}

#app-kids-oekaki .oe-odai-hint {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

/* おだい そうさボタン */
#app-kids-oekaki .oe-odai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#app-kids-oekaki .oe-odai-next,
#app-kids-oekaki .oe-odai-done {
    flex: 1 1 0;
    min-width: 140px;
    min-height: 52px;
    font-weight: 800;
    font-size: 1rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
}

#app-kids-oekaki .oe-odai-next {
    background: var(--bs-primary);
    color: #fff;
}

#app-kids-oekaki .oe-odai-done {
    background: var(--bs-body-bg);
    color: var(--bs-success);
    border-color: var(--bs-success);
}

#app-kids-oekaki .oe-odai-done:disabled {
    opacity: 0.4;
}

#app-kids-oekaki .oe-odai-next:active,
#app-kids-oekaki .oe-odai-done:not(:disabled):active {
    transform: scale(0.96);
}

#app-kids-oekaki .oe-odai-score {
    margin-top: 0.6rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

@media (max-width: 420px) {
    #app-kids-oekaki .oe-odai-emoji {
        font-size: 2.2rem;
    }
    #app-kids-oekaki .oe-odai-title {
        font-size: 1rem;
    }
}

/* ---------- せいかい・ほぞん演出 ---------- */
@keyframes oe-pop {
    0% { transform: scale(0.6); opacity: 0; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

#app-kids-oekaki .oe-praise {
    text-align: center; /* 演出は画面の中央に出す */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1080;
    background: var(--bs-success);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    padding: 1rem 2rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    animation: oe-pop 0.4s ease both;
    pointer-events: none;
}

/* ---------- レスポンシブ（せまい画面） ---------- */
@media (max-width: 420px) {
    /* 6れつに すると 16しょくが **3行**に なり、色パレットだけで 174px 使って
       ふとさが 画面の 外に 出て いた。8れつ（2行）に して 80px 取り返す */
    #app-kids-oekaki .oe-stamps {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    #app-kids-oekaki .oe-tool span {
        font-size: 0.75rem;
    }
}

/* 2026-08-21: ここに 中身の 無い @media（セレクタが 「,」で 終わって いた）と
   過去の 試行錯誤の コメントが 残って いた ので 取り除いた。
   スマホの レイアウトは この ファイルの いちばん 下に まとめて 書き直して いる。 */

/* どうぐの名前が 折り返さないように（「ぬりつ / ぶし」になっていた） */
#app-kids-oekaki .oe-tool span,
#app-kids-oekaki .oe-action span {
    white-space: nowrap;
    font-size: 0.68rem;
}


/* おだいの ジャンル 7つ。1行に 3つ。
   **`display: grid` を ここで 明示する。** 共通の .mach-btngrid（詳細度 0,1,0）は
   ツール固有の `#app-… .xxx`（1,1,0）に 負けて display: flex の ままに なる */
#app-kids-oekaki .oe-odai-cats.mach-btngrid {
    display: grid;
    /* モーダルの 中は 幅が せまい（402px の 端末で 実質 354px）。
       3れつに すると 「どうぶ／つ」「ひと・／おはな／し」と
       最後の 1文字が 孤立して 折り返す（2026-08-21 指摘）ので 2れつ */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 折り返させない。入りきらない ときは 字を 小さく する */
#app-kids-oekaki .oe-odai-cats.mach-btngrid > .btn {
    white-space: nowrap;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* 「つぎの おだい」「かけた！」も 折り返させない */
#app-kids-oekaki .oe-odai-actions .btn {
    white-space: nowrap;
}

/* 402px より せまい 端末（iPhone SE など）では 字を 少し 小さく。
   375px で 「ひと・おはなし」「つぎの おだい」が 2行に なって いた */
@media (max-width: 400px) {
    #app-kids-oekaki .oe-odai-cats.mach-btngrid > .btn { font-size: 0.8rem; }
    #app-kids-oekaki .oe-odai-actions .btn { font-size: 0.85rem; padding-left: .6rem; padding-right: .6rem; }
}

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

/* 2れつ なので 奇数個の ときに 最後が 1個 余る。まんなかへ */
#app-kids-oekaki .oe-odai-cats.mach-btngrid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.25rem);
}


/* =================================================================
 * スマホの レイアウト（2026-08-21 に 組み直し）
 * -----------------------------------------------------------------
 * それまでは 道具60 + そうさ52 + キャンバス285 で、**色パレットが top=591、
 * ふとさが top=818**。画面（703px）の 外に あって、
 * **描きながら 色や ふとさを 変えられなかった**。
 *
 * かき直しの 方針:
 *   ・キャンバスが 主役。高さは そのまま
 *   ・そうさ（もどる・けす・ほぞん）は **キャンバスの すぐ下**へ（HTML で 移した）
 *   ・色は 8れつ×2行、ふとさは 1行、ラベルは 小さく
 *   ・h1 も 小さく
 * これで 「どうぐ・キャンバス・そうさ・いろ・ふとさ」が 1画面に 入る
 * ================================================================= */
@media (max-width: 575.98px) {
    #app-kids-oekaki > section:first-of-type { margin-top: .5rem !important; margin-bottom: .5rem !important; }
    #app-kids-oekaki > section:first-of-type h1 { font-size: 1.25rem; margin-bottom: 0 !important; }

    #app-kids-oekaki .oe-toolbar { gap: .35rem; }
    #app-kids-oekaki .oe-tool { min-height: 48px; }
    #app-kids-oekaki .oe-tool i { font-size: 1.15rem; }

    #app-kids-oekaki .oe-actionbar { gap: .35rem; margin-top: .5rem; margin-bottom: 0 !important; }
    #app-kids-oekaki .oe-action { min-height: 46px; }

    #app-kids-oekaki .oe-panel { margin-bottom: .25rem !important; }
    #app-kids-oekaki .oe-panel-label {
        font-size: .78rem;
        margin-bottom: .2rem;
    }
    #app-kids-oekaki .oe-colors { gap: .3rem; }
    #app-kids-oekaki .oe-color { min-height: 40px; border-width: 2px; }
    #app-kids-oekaki .oe-sizes { gap: .35rem; }

    /* キャンバスは 幅で 大きさを 決める（canvas に height を 入れると 絵が つぶれる）。
       **上限を 付けない。** 346px に 絞って いた ことが あるが、
       そうすると どうぐバー（378px）より 32px せまく なり、canvas は display:block なので
       みぎだけが あく（text-align:center は ブロックには 効かない）。
       絞る 目的だった 「ふとさ」の 見出しは、絞っても 794px で どのみち 画面外
       （画面 703px）だった ので、24px を 捨てる 意味が 無い。2026-08-23 実測。 */
    #app-kids-oekaki #oe-canvas { margin-inline: auto; }

    /* キャンバスの まわりの あきを 詰める */
    #app-kids-oekaki > section.mb-3 { margin-bottom: .5rem !important; }
}

/* h1 の 大きさは CSS で 決める（index.php の インライン style を 外した）。
   インラインは スタイルシートより 強い ので、スマホで 小さく できなかった */
#app-kids-oekaki .oe-title { font-size: clamp(1.5rem, 4vw, 2rem); }

@media (max-width: 575.98px) {
    #app-kids-oekaki .oe-title { font-size: 1.25rem; }
}

/* ---------- よびだし（おだい・スタンプ・ぬりえ） ---------- */
#app-kids-oekaki .oe-callbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

#app-kids-oekaki .oe-call {
    min-height: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    line-height: 1.25;
    font-size: 0.78rem;
    font-weight: 700;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.7rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    white-space: nowrap;
}

#app-kids-oekaki .oe-call i { font-size: 1.05rem; color: var(--bs-primary); }
#app-kids-oekaki .oe-call:active { transform: scale(0.96); }

/* モーダルの 中の パネルは カードの 枠を 二重に しない */
.oe-modal .card { box-shadow: none !important; }
.oe-modal .card-body { padding: 0; }

/* おだいが 決まったら よびだしボタンで 分かる ように */
#app-kids-oekaki .oe-call.is-set {
    border-color: var(--bs-warning);
    background: color-mix(in srgb, var(--bs-warning) 12%, var(--bs-body-bg));
}

/* =================================================================
 * PC（992px〜）は 2れつ ——「かく ところ」と「どうぐ」を 左右に 分ける
 *
 * それまで すべての ボタンが 画面幅 いっぱいに 伸び、
 * どうぐ1つが 340px・いろ1マスが 170px角 に なって いた（2026-08-21 指摘）。
 * ひだりを かく ところ（どうぐ・キャンバス・そうさ）に まとめ、
 * みぎに いろ・よびだし・ふとさ を 置いて、幅を キャンバスに そろえる。
 * ================================================================= */
@media (min-width: 992px) {
    #app-kids-oekaki .oe-layout {
        display: grid;
        /* ひだりの 上限は 780px。ただし **そうさボタンまで 1画面に 入る** よう、
           画面の 高さからも 上限を かける（キャンバスは よこ4:たて3） */
        grid-template-columns: minmax(0, min(780px, calc((100vh - 380px) * 4 / 3))) 320px;
        gap: 1.5rem;
        align-items: start;
        justify-content: center;
    }

    /* キャンバスの 上限は レイアウトが 決める（board-wrap の 820px は 使わない） */
    #app-kids-oekaki .oe-board-wrap {
        max-width: none;
    }

    /* みぎれつは 幅が せまい ので、いろは 4れつ×4だん の 正方形に */
    #app-kids-oekaki .oe-colors {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
    }

    /* パネルの 見出しは みぎれつでも 読みやすい 大きさに */
    #app-kids-oekaki .oe-side .oe-panel-label {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }
}

/* せつめい文の 幅（index.php の インライン style を CSS へ 移した） */
#app-kids-oekaki .oe-lead { max-width: 720px; }

@media (min-width: 992px) {
    /* PC は よこに 余裕が ある ので 1行に おさめ、たてを 説明に 使わない */
    #app-kids-oekaki .oe-lead { max-width: none; }
    #app-kids-oekaki > section:first-of-type {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
}