/* =================================================================
 * じょうけんすいり（条件整理・論理推理パズル）固有スタイル
 * すべてのセレクタを #app-kids-suiri でスコープ
 * ================================================================= */

#app-kids-suiri {
    --sr-accent: #7c5ac3;
    --sr-ok: var(--bs-success);
    --sr-ng: var(--bs-danger);
}

/* ---------- がんばりきろく ---------- */
#app-kids-suiri .sr-record-box {
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 0.75rem 0.5rem;
}

#app-kids-suiri .sr-record-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bs-body-color);
}

/* ---------- しんちょくバー ---------- */
#app-kids-suiri .sr-progress {
    border-radius: 0;
}

#app-kids-suiri .sr-progress .progress-bar {
    transition: width 0.35s ease;
}

/* ---------- 共通パネル（ヒント・トレイ） ---------- */
#app-kids-suiri .sr-panel {
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bs-body-bg);
}

#app-kids-suiri .sr-panel-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

/* ---------- じょうけん（ヒント）リスト ---------- */
#app-kids-suiri .sr-conditions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#app-kids-suiri .sr-cond {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    font-weight: 700;
    line-height: 1.4;
    padding: 0.35rem 0.5rem;
    border-radius: 0.6rem;
    color: var(--bs-body-color);
}

#app-kids-suiri .sr-cond.is-ok {
    background: rgba(var(--bs-success-rgb), 0.12);
}

#app-kids-suiri .sr-cond.is-ng {
    background: rgba(220, 53, 69, 0.12);
}

#app-kids-suiri .sr-cond-mark {
    flex: 0 0 1.6em;
    text-align: center;
    font-size: 1.3em;
    font-weight: 800;
    line-height: 1.3;
}

#app-kids-suiri .sr-cond-mark.is-ok {
    color: var(--sr-ok);
}

#app-kids-suiri .sr-cond-mark.is-ng {
    color: var(--sr-ng);
}

#app-kids-suiri .sr-cond-mark.is-unknown {
    color: var(--bs-secondary-color);
}

/* ---------- ばん（配置エリア） ---------- */
#app-kids-suiri .sr-board {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 一列ならべ（横並び） */
#app-kids-suiri .sr-slots-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* 順位あて（縦積み） */
#app-kids-suiri .sr-slots-rank {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
}

#app-kids-suiri .sr-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 66px;
    min-height: 80px;
    padding: 0.4rem 0.5rem;
    border-radius: 1rem;
    border: 3px dashed var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.08s ease, border-color 0.15s ease;
}

/* 順位モードは横長（順位ラベル＋顔） */
#app-kids-suiri .sr-slots-rank .sr-slot {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.8rem;
    min-height: 62px;
    width: 100%;
}

#app-kids-suiri .sr-slot.is-empty .sr-slot-face {
    opacity: 0.4;
}

#app-kids-suiri .sr-slot.is-filled {
    border-style: solid;
    border-color: var(--sr-accent);
}

#app-kids-suiri .sr-slot.is-selected {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.4);
}

#app-kids-suiri .sr-slot:active {
    transform: scale(0.96);
}

#app-kids-suiri .sr-slot-face {
    font-size: 2.2rem;
    line-height: 1;
}

#app-kids-suiri .sr-slots-rank .sr-slot-face {
    font-size: 2rem;
}

#app-kids-suiri .sr-slot-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
}

#app-kids-suiri .sr-slots-rank .sr-slot-label {
    flex: 0 0 2.4em;
    font-size: 1.1rem;
    color: var(--sr-accent);
}

/* ---------- どうぶつトレイ ---------- */
#app-kids-suiri .sr-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    min-height: 70px;
    align-items: center;
}

#app-kids-suiri .sr-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0.4rem 0.5rem;
    border-radius: 1rem;
    border: 3px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.08s ease, border-color 0.15s ease;
}

#app-kids-suiri .sr-token.is-selected {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.4);
    transform: translateY(-3px);
}

#app-kids-suiri .sr-token:active {
    transform: scale(0.96);
}

#app-kids-suiri .sr-token-emoji {
    font-size: 2rem;
    line-height: 1.25;
}

#app-kids-suiri .sr-token-name {
    font-size: 0.8rem;
    font-weight: 700;
}

#app-kids-suiri .sr-tray-empty {
    font-weight: 700;
}

/* ---------- 対応表 ---------- */
#app-kids-suiri .sr-table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 auto;
}

#app-kids-suiri .sr-table th,
#app-kids-suiri .sr-table td {
    border: 2px solid var(--bs-border-color);
    text-align: center;
    padding: 0.25rem;
}

#app-kids-suiri .sr-table thead th {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

#app-kids-suiri .sr-table tbody th {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

#app-kids-suiri .sr-th-emoji {
    display: block;
    font-size: 1.5rem;
    line-height: 1.25;
}

#app-kids-suiri .sr-th-name {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
}

#app-kids-suiri .sr-cell {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.08s ease;
}

#app-kids-suiri .sr-cell.is-o {
    color: var(--sr-ok);
    background: rgba(var(--bs-success-rgb), 0.12);
}

#app-kids-suiri .sr-cell.is-x {
    color: var(--sr-ng);
    background: rgba(220, 53, 69, 0.10);
}

#app-kids-suiri .sr-cell:active {
    transform: scale(0.9);
}

/* ---------- 2だんベンチ（2×3グリッド） ---------- */
#app-kids-suiri .sr-bench {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.6rem 0.6rem;
    border-radius: 1.2rem;
    background: var(--bs-tertiary-bg);
}

#app-kids-suiri .sr-bench-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

#app-kids-suiri .sr-bench-rowlabel {
    flex: 0 0 2.8em;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sr-accent);
}

#app-kids-suiri .sr-bench-slot {
    min-width: 62px;
    min-height: 72px;
}

/* ---------- はんてい メッセージ ---------- */
#app-kids-suiri .sr-feedback {
    text-align: center; /* 演出は画面の中央に出す */
    min-height: 2.2rem;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0.6rem 0 0.2rem;
    line-height: 1.2;
}

#app-kids-suiri .sr-feedback.is-correct {
    color: var(--bs-success);
}

#app-kids-suiri .sr-feedback.is-wrong {
    color: var(--bs-danger);
}

#app-kids-suiri .sr-feedback.is-answer {
    color: var(--sr-accent);
}

/* ---------- アニメーション ---------- */
@keyframes sr-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

#app-kids-suiri .sr-feedback.is-animate {
    animation: sr-pop 0.4s ease;
}

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

#app-kids-suiri .sr-board.is-shake {
    animation: sr-shake 0.35s ease;
}

/* ---------- けっか ---------- */
#app-kids-suiri .sr-result-emoji {
    font-size: clamp(3.5rem, 16vw, 5rem);
    line-height: 1.25;
    margin-bottom: 0.5rem;
    animation: sr-pop 0.5s ease;
}

#app-kids-suiri .sr-result-box {
    background: var(--bs-body-tertiary-bg, var(--bs-tertiary-bg));
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 0.9rem 0.5rem;
}

#app-kids-suiri .sr-result-num {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bs-body-color);
}

#app-kids-suiri .sr-result-marks {
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    word-break: break-word;
}

/* ---------- モバイル微調整 ---------- */
@media (max-width: 575.98px) {
    #app-kids-suiri .sr-slot {
        min-width: 58px;
        min-height: 72px;
    }

    #app-kids-suiri .sr-slot-face {
        font-size: 1.9rem;
    }

    #app-kids-suiri .sr-token {
        min-width: 60px;
    }

    #app-kids-suiri .sr-bench-slot {
        min-width: 52px;
        min-height: 64px;
    }

    #app-kids-suiri .sr-bench-rowlabel {
        flex-basis: 2.2em;
        font-size: 0.8rem;
    }

    #app-kids-suiri .sr-cell {
        width: 42px;
        height: 42px;
        font-size: 1.4rem;
    }

    #app-kids-suiri .sr-th-emoji {
        font-size: 1.3rem;
    }
}

/* 402x703（iPhone 17 Pro）で「たしかめ」が画面外に出ることがあるので、
   もんだいが大きいときでも収まるように狭幅で詰める（2026-08-07 実測） */
@media (max-width: 575.98px) {
    #app-kids-suiri .sr-panel { border-radius: 0.7rem; }
    #app-kids-suiri .sr-tray { min-height: 56px; gap: 0.4rem; }
    #app-kids-suiri .sr-feedback { min-height: 1.8rem; font-size: 1.15rem; margin: 0.2rem 0; }
    /* ヒントは もんだいによって 3〜5行になる。行数が多いときに はみ出す元なので詰める。
       ただし詰めるのは 余白と行間まで。文字の大きさは下の「読みやすさの下限」で決める */
    #app-kids-suiri .sr-conditions { gap: 0.2rem; }
    #app-kids-suiri .sr-cond { gap: 0.35rem; line-height: 1.35; }
}

/* ---------- 読みやすさの下限（狭い画面での文字サイズは ここで一括して決める） ----------
   2026-08-11 赤間さんの実機指摘「文字が小さい」を受けて是正。
   2026-08-07 に「402x703 の1画面に収める」ため 6段の狭幅ブロックを積んで削った結果、
   ヒント本文が 16〜19.2px → 12.2px、なまえが 9.3px まで落ちていた。

   ★ 全部を1画面に押し込む必要はもう無い。
     同じ日に「たしかめ／こたえを みる」を sticky で画面下に貼り付けたので、
     ヒントや ばん が下に伸びてスクロールしても、操作ボタンは常に画面内にある。
     縦を稼ぐのは 余白・図版・行間で行い、読ませる文字は削らないこと。

   下限（年長〜小3が読む文字）:
     本文・案内文 … 16px / 見出し・なまえ … 12px 以上
   このブロックより後ろに font-size を書かないこと（同詳細度で後勝ちして下限が壊れる） */
@media (max-width: 575.98px) {
    /* 読ませる文字 */
    #app-kids-suiri .sr-cond { font-size: 1rem; }                     /* ヒント本文 */
    #app-kids-suiri #sr-question-title { font-size: 1.05rem; }        /* もんだい文 */
    #app-kids-suiri .sr-panel-label { font-size: 0.9rem; margin-bottom: 0.2rem; }
    #app-kids-suiri #sr-tray-wrap .sr-panel-label { font-size: 0.875rem; }  /* タップして えらんで… */
    /* なまえ。12px に戻すと 46px 固定の枠に3文字が入らず縦積みになるので、
       枠は なまえの長さに合わせて広がるようにし、語は折り返さない */
    #app-kids-suiri .sr-token-name { font-size: 0.75rem; line-height: 1.25; white-space: nowrap; }

    /* ヒントは スペースの位置で折り返す（keep-all）。
       文字を大きくすると1行に入らない回が出るが、そのまま折り返すと
       「となりどうし」の「し」だけが次の行に残って読みにくい */
    #app-kids-suiri .sr-cond { word-break: keep-all; overflow-wrap: break-word; }

    /* 記号・ラベル（読み物ではないが 12px を下回らせない） */
    #app-kids-suiri .sr-th-name { font-size: 0.75rem; }
    /* 「うしろ」が3文字なので 1.9em(24px) では1文字ずつ縦積みになる。
       ベンチは内寸193px／親337px と144px 余っているので、幅を持たせて1行にする */
    #app-kids-suiri .sr-bench-rowlabel { font-size: 0.8rem; white-space: nowrap; }
    #app-kids-suiri #sr-count { font-size: 0.85rem; }
}

/* いちばん大きいもんだい（ヒント5行・4x4の対応表）は、詰めても 402x703 に
   35〜50px 収まりきらない。そこで「たしかめ／つぎへ／こたえをみる」を
   狭い画面では画面の下に貼り付け、ヒントや ばん を上へスクロールしても
   いつでも押せるようにする（kids/hyakumasu と同じ手法・2026-08-07）。
   ※ .sr-solve に Bootstrap の position ユーティリティを付けないこと。
     position-relative 等は !important なので sticky が黙って無効になる */
/* カードでは いっさい クリップしない。
   - overflow: hidden … スクロールコンテナを作るので .sr-solve の sticky が効かない
   - overflow: clip  … sticky は効くが、iOS Safari では貼り付いている間 クリップ範囲が
     追従せず、下のボタンが左右で切られる（2026-08-07 実機で発生）
   角の丸めが要るのは上端の しんちょくバーだけなので、そこに直接かける。 */
#app-kids-suiri .sr-progress {
    border-top-left-radius: var(--bs-card-inner-border-radius, 0.5rem);
    border-top-right-radius: var(--bs-card-inner-border-radius, 0.5rem);
    overflow: hidden;   /* 中の progress-bar を角に合わせて切る。sticky とは無関係な要素 */
}

@media (max-width: 575.98px) {
    #app-kids-suiri .sr-solve {
        position: sticky;
        bottom: 0;
        z-index: 5;
        /* card-body の p-2（0.5rem）を打ち消して端まで敷く */
        margin: 0.2rem -0.5rem -0.5rem;
        padding: 0.35rem 0.5rem 0.5rem;
        background: var(--bs-card-bg, var(--bs-body-bg));
        border-top: 1px solid var(--bs-border-color);
        border-radius: 0 0 var(--bs-card-inner-border-radius, 0.5rem) var(--bs-card-inner-border-radius, 0.5rem);
    }

    #app-kids-suiri .sr-solve .btn-lg {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
}

/* いちばん大きい 4x4の たいおうひょう（レベル5）と 2だんベンチ（レベル6）は、
   ばん・トレイ・ヒントが 402x703 に入りきらない。狭い画面でだけ詰める。
   トレイは 6ひき が1行に並ぶ幅まで細くして、2行になるのを避ける（2026-08-07 実測） */
@media (max-width: 575.98px) {
    /* たいおうひょう */
    #app-kids-suiri .sr-table th,
    #app-kids-suiri .sr-table td { padding: 0.15rem; }
    #app-kids-suiri .sr-cell { width: 38px; height: 38px; font-size: 1.25rem; }
    #app-kids-suiri .sr-th-emoji { font-size: 1.1rem; }

    /* どうぶつトレイ */
    #app-kids-suiri .sr-token { min-width: 46px; padding: 0.2rem 0.25rem; border-width: 2px; }
    #app-kids-suiri .sr-token-emoji { font-size: 1.5rem; }

    /* 2だんベンチ */
    #app-kids-suiri .sr-bench-slot { min-width: 46px; min-height: 54px; }
    #app-kids-suiri .sr-bench-slot .sr-slot-face { font-size: 1.5rem; }
    #app-kids-suiri .sr-bench-rowlabel { flex-basis: 3.2em; }

    /* ヒント（レベルが上がると 6〜7こになる）。行間だけ詰める（文字は下限を守る） */
    #app-kids-suiri .sr-cond { line-height: 1.25; }
    #app-kids-suiri .sr-conditions { gap: 0.15rem; }

    /* 下に貼り付くバー自体も薄くする */
    #app-kids-suiri .sr-solve .sr-feedback { min-height: 1.4rem; }
}

/* 上の圧縮だけでは レベル3（じゅんいあて・5ひき）／5（4x4）／6（2だんベンチ）が
   まだ収まらないので、さらに詰める（2026-08-07 実測でここまで必要だった） */
@media (max-width: 575.98px) {
    /* じゅんいあて は縦に積むので、上の .sr-slot の min-height:72px が効くと
       5ひきで 392px になってしまう。横長の行なので低くてよい */
    #app-kids-suiri .sr-slots-rank { gap: 0.35rem; }
    #app-kids-suiri .sr-slots-rank .sr-slot { min-height: 50px; padding: 0.2rem 0.5rem; }
    #app-kids-suiri .sr-slots-rank .sr-slot-face { font-size: 1.7rem; }
    #app-kids-suiri .sr-slots-rank .sr-slot-label { font-size: 0.95rem; }

    #app-kids-suiri .sr-cell { width: 33px; height: 33px; font-size: 1.1rem; }
    #app-kids-suiri .sr-th-emoji { font-size: 1rem; }

    #app-kids-suiri .sr-bench { gap: 0.35rem; padding: 0.4rem; }
    #app-kids-suiri .sr-bench-slot { min-width: 44px; min-height: 48px; }
    #app-kids-suiri .sr-bench-slot .sr-slot-face { font-size: 1.4rem; }
    #app-kids-suiri .sr-tray { min-height: 56px; }
    #app-kids-suiri .sr-token-emoji { font-size: 1.35rem; }
}

/* さらに詰める（レベル3のじゅんいあて＝5ひき縦積み、レベル6のヒント7こ）。
   ここまでで 402x703 のどのもんだいでも ヒント・ばん・トレイが
   下の そうさバーの上に収まる（2026-08-07 実測） */
@media (max-width: 575.98px) {
    /* 本文の幅を稼ぐため 左右の余白と 行頭マークの幅を詰める（文字は削らない） */
    #app-kids-suiri .sr-cond { padding: 0.15rem 0.3rem; gap: 0.25rem; }
    #app-kids-suiri .sr-cond-mark { flex-basis: 1em; }

    #app-kids-suiri .sr-slot { min-height: 62px; }
    #app-kids-suiri .sr-slot-face { font-size: 1.7rem; }
    #app-kids-suiri .sr-slots-rank .sr-slot { min-height: 42px; }
    #app-kids-suiri .sr-slots-rank .sr-slot-face { font-size: 1.5rem; }

    #app-kids-suiri .sr-tray { min-height: 48px; }
}

/* 上の #app-kids-suiri .sr-slot（62px）は 2だんベンチ・じゅんいあて の
   スロットにも同じ詳細度で当たり、あとに書いた方が勝つ。ここで最後に上書きする */
@media (max-width: 575.98px) {
    #app-kids-suiri .sr-bench-slot { min-width: 44px; min-height: 46px; }
    #app-kids-suiri .sr-bench-slot .sr-slot-face { font-size: 1.4rem; }
    #app-kids-suiri .sr-slots-rank .sr-slot { min-height: 42px; }
    #app-kids-suiri .sr-slots-rank .sr-slot-face { font-size: 1.5rem; }
}

/* 2だんベンチ（6ひき）は、なまえが長いとトレイが2行になって 59px 高くなる。
   狭い画面では折り返さず1行に並べ、なまえの大きさで幅を吸収する（2026-08-07 実測） */
@media (max-width: 575.98px) {
    /* 2026-08-07 は「なまえが長い回だけトレイが2行になって59px高くなる」ので
       nowrap で1行に押し込んでいたが、なまえを 12px に戻すと
       「きゅうきゅうしゃ」のような長い回が6つ並んだとき 物理的に1行へ入らない
       （縮めると なまえが枠からはみ出す）。
       操作ボタンは sticky で常に画面内にあるので、素直に折り返してよい（2026-08-11） */
    #app-kids-suiri .sr-tray { flex-wrap: wrap; gap: 0.3rem; }
    #app-kids-suiri .sr-token { flex: 0 0 auto; min-width: 44px; }
    /* ヒントが7こになる回は行間だけ詰める */
    #app-kids-suiri .sr-cond { line-height: 1.2; }
}

/* あと十数pxだけ足りない回（ヒント7こ＋なまえが2行になる回）のための最終調整。
   文字は削らず 高さ・余白で稼ぐ */
@media (max-width: 575.98px) {
    #app-kids-suiri #sr-count { padding: 0.2rem 0.45rem; }
    #app-kids-suiri .sr-bench-slot { min-height: 42px; }
    #app-kids-suiri .sr-slots-rank .sr-slot { min-height: 40px; }
}

/* ヒントが2行に折り返す回のための最後の数px */
@media (max-width: 575.98px) {
    #app-kids-suiri .sr-conditions { gap: 0.1rem; }
    #app-kids-suiri .sr-tray { min-height: 40px; }
    #app-kids-suiri .sr-token-emoji { font-size: 1.25rem; }
    #app-kids-suiri .sr-token { padding: 0.15rem 0.2rem; }
}


/* PC で 選択肢が よこ1れつに 分配され、1つが 158px しか なく
   文字が 3〜5行に 割れて いた（2026-08-26 実機指摘・横断調査）。
   btn-group は 内容幅で 分配する ので、数が 多いと **幅の 広い PC ほど 狭く なる**。
   等幅グリッドで 折り返す（スマホ 2れつ ／ PC 3れつ）。 */
@media (min-width: 768px) {
    #app-kids-suiri .sui-optgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}