/* 野球成績計算ツール専用スタイル。本文幅のまま縦に積む(2カラムにしない)。 */
.pt-bb-panel {
    background: linear-gradient(135deg, #f0f9ff, #f0fdf4);
    border: 1px solid #bbf7d0;
    border-radius: 0.8rem;
    padding: 1rem;
    margin: 1rem 0;
}

/* ページ内リンク(#bb-batter など)で飛んだとき、固定ナビの下に隠れないようにする。
   スマホ幅では --pt-gnav-height が auto になり(ナビが2段になる)、calc()が効かないため、固定値にしている。
   ナビの高さ(PC 3.5rem、スマホ 約5.3rem)+余白に足りる 6.5rem。 */
.pt-bb-panel {
    scroll-margin-top: 6.5rem;
}

.pt-bb-panel__title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
}

.pt-bb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}

.pt-bb-chip {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
    color: #334155;
    cursor: pointer;
}

.pt-bb-chip.is-active {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.pt-bb-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
    gap: 0.5rem 0.6rem;
    margin: 0 0 0.6rem;
}

.pt-bb-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 700;
}

.pt-bb-field[hidden] { display: none; }

.pt-bb-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    font-size: 1rem;
    background: #fff;
}

.pt-bb-input--sm {
    padding: 0.3rem;
    font-size: 0.9rem;
    min-width: 3.2rem;
}

.pt-bb-focus {
    font-size: 1.15rem;
    margin: 0.5rem 0;
}

.pt-bb-focus strong { font-size: 1.5rem; }

.pt-bb-sub {
    color: #64748b;
    font-size: 0.85rem;
}

.pt-bb-tablehead {
    margin: 0.8rem 0 0.3rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.pt-bb-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pt-bb-scroll table { min-width: 28rem; }

.pt-bb-reverse {
    background: #fff;
    border: 1px dashed #86efac;
    border-radius: 0.6rem;
    padding: 0.8rem;
    margin-top: 0.8rem;
}

.pt-bb-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    align-items: flex-end;
    margin: 0 0 0.5rem;
}

.pt-bb-inline .pt-bb-field { width: 7rem; }

.pt-bb-games th,
.pt-bb-games td { padding: 0.2rem; text-align: center; white-space: nowrap; }

.pt-bb-out { font-weight: 700; min-width: 3.6rem; }

.pt-bb-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }

.pt-bb-btn {
    border: 1px solid #16a34a;
    background: #fff;
    color: #15803d;
    border-radius: 0.4rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.pt-bb-btn--main { background: #16a34a; color: #fff; }

.pt-bb-formula { background: #f8fafc; border-left: 4px solid #16a34a; padding: 0.6rem 0.9rem; margin: 0.5rem 0; }
.pt-bb-formula p { margin: 0.15rem 0; }

.pt-bb-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }

/* ---------- UI整理(タブ・グループ・カード・折りたたみ) ---------- */
.pt-bb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; margin: 0 0 0.6rem; }
.pt-bb-head .pt-bb-panel__title { margin: 0; }
.pt-bb-tools { display: flex; gap: 0.4rem; }
.pt-bb-tool { border: 1px solid #86efac; background: #fff; color: #166534; border-radius: 0.4rem; padding: 0.25rem 0.7rem; font-size: 0.8rem; cursor: pointer; }
.pt-bb-tool:hover { background: #f0fdf4; }

/* タブ: JSが動いたときだけ(is-on)、ボタンらしい見た目にする。JSなしなら普通のリンクの並び */
.pt-bb-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.pt-bb-tab { display: inline-block; padding: 0.45rem 1rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #334155; text-decoration: none; font-size: 0.92rem; font-weight: 700; }
.pt-bb-tabs.is-on { margin: 0.8rem 0; }
.pt-bb-tab.is-active { background: #16a34a; border-color: #16a34a; color: #fff; }
.pt-bb-stage [hidden] { display: none !important; }
.pt-bb-stage.is-tabbed .pt-bb-panel { margin-top: 0.4rem; }

/* 入力のまとまり */
.pt-bb-group { background: rgba(255,255,255,0.7); border: 1px solid #dcfce7; border-radius: 0.6rem; padding: 0.55rem 0.7rem 0.15rem; margin: 0 0 0.6rem; }
.pt-bb-group[hidden] { display: none; }
.pt-bb-group__title { margin: 0 0 0.4rem; font-size: 0.82rem; font-weight: 700; color: #166534; }
.pt-bb-group__title small { margin-left: 0.5rem; font-weight: 400; color: #64748b; }
.pt-bb-field small { display: block; font-weight: 400; font-size: 0.7rem; color: #94a3b8; line-height: 1.2; }
.pt-bb-fields--ip { grid-template-columns: minmax(6.2rem, 8rem) auto; align-items: end; }
.pt-bb-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }
.pt-bb-group--a { border-left: 4px solid #2563eb; }
.pt-bb-group--b { border-left: 4px solid #ea580c; }

/* ⅓ ⅔ のボタン */
.pt-bb-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 0.4rem; overflow: hidden; background: #fff; }
.pt-bb-seg__btn { border: 0; background: transparent; padding: 0.5rem 0.9rem; font-size: 1rem; color: #334155; cursor: pointer; min-width: 2.6rem; }
.pt-bb-seg__btn + .pt-bb-seg__btn { border-left: 1px solid #cbd5e1; }
.pt-bb-seg__btn.is-active { background: #16a34a; color: #fff; }

/* 結果カード */
.pt-bb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; margin: 0.5rem 0; }
.pt-bb-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.6rem; padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pt-bb-card__label { font-size: 0.75rem; color: #64748b; }
.pt-bb-card__value { font-size: 1.35rem; line-height: 1.25; color: #0f172a; overflow-wrap: anywhere; }
.pt-bb-card__sub { font-size: 0.72rem; color: #64748b; overflow-wrap: anywhere; }
.pt-bb-card.is-focus { grid-column: 1 / -1; background: #16a34a; border-color: #16a34a; }
.pt-bb-card.is-focus .pt-bb-card__label, .pt-bb-card.is-focus .pt-bb-card__sub { color: #dcfce7; }
.pt-bb-card.is-focus .pt-bb-card__value { color: #fff; font-size: 2rem; }

/* 折りたたみ(逆算・試合別) */
.pt-bb-details { background: #fff; border: 1px solid #86efac; border-radius: 0.6rem; margin-top: 0.8rem; }
.pt-bb-details > summary { cursor: pointer; padding: 0.6rem 0.8rem; font-weight: 700; font-size: 0.92rem; color: #166534; }
.pt-bb-details__body { padding: 0 0.8rem 0.8rem; }
.pt-bb-details--panel { margin-top: 0; }