/* 得点板（スコアボード） */

#app-scoreboard .sb-settings-toggle {
    width: 100%;
    border: 0;
    text-align: start;
    color: var(--bs-body-color);
}
#app-scoreboard .sb-settings-toggle .sb-caret { transition: transform .2s; }
#app-scoreboard .sb-settings-toggle:not(.collapsed) .sb-caret { transform: rotate(180deg); }

/* 選択肢は同じ幅のグリッドで折り返す（チーム数はスマホで 3＋2、点数は5つ横並び） */
#app-scoreboard .sb-choices { display: grid; gap: .375rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#app-scoreboard #sb-count { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 576px) { #app-scoreboard #sb-count { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
#app-scoreboard .sb-choices .btn { white-space: nowrap; padding-inline: .25rem; }

#app-scoreboard .sb-team-edit { display: grid; gap: .5rem; }
@media (min-width: 768px) { #app-scoreboard .sb-team-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; } }
#app-scoreboard .sb-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
#app-scoreboard .sb-colors { display: flex; gap: .25rem; }
#app-scoreboard .sb-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--sb-color);
    border: 2px solid transparent;
    outline: 2px solid transparent;
}
#app-scoreboard .sb-swatch[aria-checked="true"] {
    border-color: var(--bs-body-bg);
    outline-color: var(--bs-emphasis-color);
}

/* ---- 得点板本体 ---- */
#app-scoreboard .sb-board {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    #app-scoreboard .sb-board[data-teams="5"],
    #app-scoreboard .sb-board[data-teams="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* スマホ縦で2チームは上下に並べる */
@media (max-width: 575.98px) and (orientation: portrait) {
    #app-scoreboard .sb-board[data-teams="2"] { grid-template-columns: minmax(0, 1fr); }
}

#app-scoreboard .sb-team {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 4px solid var(--sb-color);
    min-width: 0;
}
/* チーム色は帯と枠で示す（数字は本文色のまま） */
#app-scoreboard .sb-band {
    background: var(--sb-color);
    color: #fff;
    font-weight: 800;
    text-align: center;
    padding: .375rem .5rem;
    font-size: clamp(.95rem, 7cqi, 1.6rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#app-scoreboard .sb-score {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--bs-emphasis-color);
    padding: .25em 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
#app-scoreboard .sb-num {
    font-family: 'DSEG7 Classic', ui-monospace, monospace;
    line-height: 1.1;
    white-space: nowrap;
    /* 3桁で枠いっぱい。桁が増えたら縮める */
    font-size: min(30cqi, 12rem);
}
#app-scoreboard .sb-num[data-len="1"],
#app-scoreboard .sb-num[data-len="2"] { font-size: min(38cqi, 12rem); }
#app-scoreboard .sb-num[data-len="4"] { font-size: min(22cqi, 9rem); }
#app-scoreboard .sb-num[data-len="5"] { font-size: min(17cqi, 7rem); }
/* 変わった数字だけ、透明度と数px のずれで知らせる（拡大はしない） */
#app-scoreboard .sb-num.sb-flash { animation: sb-flash .15s ease-out; }
@keyframes sb-flash { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }

#app-scoreboard .sb-btns {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
    padding: 0 8px 8px;
}
#app-scoreboard .sb-btns .btn {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    font-size: 1.1rem;
    padding-inline: .25rem;
    white-space: nowrap;
}
#app-scoreboard .sb-step-txt { font-variant-numeric: tabular-nums; }

#app-scoreboard .sb-toolbar { margin-top: 1rem; }
#app-scoreboard .sb-last { min-height: 1.5em; }

#app-scoreboard .sb-reset-row { margin-top: .75rem; }

/* ---- 全画面: 得点板だけを画面いっぱいに ----
   本物（:fullscreen）と、要素の全画面が使えない環境（iPhone の Safari）の代わり（.is-fake-full）を同じ見た目にする */
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) {
    background: var(--bs-body-bg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
#app-scoreboard .sb-wrap.is-fake-full { position: fixed; inset: 0; z-index: 2000; }
html.sb-noscroll, html.sb-noscroll body { overflow: hidden; }
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board {
    flex: 1 1 auto;
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
}
/* 全画面の並べ方は画面の向きで決める。横長: 2・3チームは横1列、4は 2×2（低い画面では横1列）、5・6は3列 */
@media (orientation: landscape) {
    #app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board[data-teams="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board[data-teams="3"],
    #app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board[data-teams="5"],
    #app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board[data-teams="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 500px) {
    #app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board[data-teams="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 縦長: 3チームまでは上下に1列、4〜6チームは2列 */
@media (orientation: portrait) {
    #app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board { grid-template-columns: minmax(0, 1fr); }
    #app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-board:is([data-teams="4"], [data-teams="5"], [data-teams="6"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 数字の大きさは、帯とボタンを除いた数字の欄の幅・高さで決める（チームの枠の高さで決めると帯に重なる） */
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-score { container-type: size; overflow: hidden; padding: 0; }
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-num { font-size: min(30cqi, 75cqb); }
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-num[data-len="1"],
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-num[data-len="2"] { font-size: min(38cqi, 80cqb); }
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-num[data-len="4"] { font-size: min(22cqi, 75cqb); }
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-num[data-len="5"] { font-size: min(17cqi, 75cqb); }
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-toolbar { margin-top: 8px; }
/* 全画面ではリセットを出さない（試合中に押し間違えないため。戻ればいつでも押せる） */
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-reset-row,
#app-scoreboard .sb-wrap:is(:fullscreen, .is-fake-full) .sb-last { display: none; }

@media (prefers-reduced-motion: reduce) {
    #app-scoreboard .sb-num.sb-flash { animation: none; }
}