/* ビンゴマシーン＆ビンゴカード（スコープは #app-bingo。印刷用は #bg-print-area） */

#app-bingo .bg-tabs .nav-link { display: inline-flex; align-items: center; font-weight: 600; }

/* ---------- マシーン ---------- */
#app-bingo .bg-machine {
    position: relative;
    background: var(--bs-tertiary-bg);
    border-top: 3px solid var(--bs-primary);
    padding: 1.25rem 1rem 1rem;
}
#app-bingo .bg-full-close { display: none; position: absolute; top: .75rem; right: .75rem; z-index: 2; }

#app-bingo .bg-display {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: .15em;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-size: clamp(4.5rem, 24vw, 10rem);
    min-height: 1.1em;
    color: var(--bs-emphasis-color);
}
#app-bingo .bg-display-col { font-size: .55em; color: var(--bs-primary); }
#app-bingo .bg-display.is-shuffling { opacity: .55; }
#app-bingo .bg-status { text-align: center; margin: .5rem 0 1rem; font-weight: 600; color: var(--bs-secondary-color); min-height: 1.5em; }

#app-bingo .bg-spin-wrap { max-width: 28rem; margin: 0 auto; }
#app-bingo .bg-spin { min-height: 60px; font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; }

#app-bingo .bg-sub {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    max-width: 28rem;
    margin: .75rem auto 1.25rem;
}
#app-bingo .bg-sub .btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; padding-inline: .25rem; }

#app-bingo .bg-board-head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; font-size: .9rem; }

/* 5行（B・I・N・G・O）× 15 */
#app-bingo .bg-board { display: grid; gap: 3px; }
#app-bingo .bg-row { display: grid; grid-template-columns: 1.4em repeat(15, minmax(0, 1fr)); gap: 3px; }
#app-bingo .bg-row-label { font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--bs-primary); }
#app-bingo .bg-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    opacity: .7;
}
/* 出た番号: 塗り＋太字（色だけに頼らない） */
#app-bingo .bg-cell.is-drawn { background: var(--bs-primary); color: #fff; font-weight: 800; opacity: 1; }
#app-bingo .bg-cell.is-last { outline: 3px solid #ffc107; outline-offset: -1px; }

#app-bingo .bg-history-wrap { margin-top: 1rem; font-size: .9rem; }
#app-bingo .bg-history {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
#app-bingo .bg-history li { padding: .1rem .45rem; background: var(--bs-body-bg); font-variant-numeric: tabular-nums; font-weight: 600; }
#app-bingo .bg-history li.is-last { background: #ffc107; color: #212529; }

@media (min-width: 768px) {
    #app-bingo .bg-cell { font-size: .9rem; }
}

/* 全画面（本物）と、それが使えない環境での代わり */
#app-bingo .bg-machine:fullscreen,
#app-bingo .bg-machine.is-fake-full {
    padding: 2rem clamp(1rem, 4vw, 4rem);
    overflow: auto;
    background: var(--bs-body-bg);
}
#app-bingo .bg-machine.is-fake-full { position: fixed; inset: 0; z-index: 2000; }
#app-bingo .bg-machine:fullscreen .bg-full-close,
#app-bingo .bg-machine.is-fake-full .bg-full-close { display: inline-flex; }
#app-bingo .bg-machine:fullscreen .bg-display,
#app-bingo .bg-machine.is-fake-full .bg-display { font-size: clamp(5rem, 28vh, 18rem); }
#app-bingo .bg-machine:fullscreen .bg-cell,
#app-bingo .bg-machine.is-fake-full .bg-cell { font-size: clamp(.8rem, 1.6vw, 1.4rem); aspect-ratio: auto; min-height: 2em; }
html.bg-noscroll, html.bg-noscroll body { overflow: hidden; }

/* ---------- カード作成 ---------- */
#app-bingo .bg-panel { background: var(--bs-tertiary-bg); border-top: 3px solid var(--bs-primary); }
#app-bingo .bg-panel-head { font-weight: 700; padding: .75rem 1rem .25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
#app-bingo .bg-panel-head > span { display: inline-flex; align-items: center; }
#app-bingo .bg-panel-body { padding: .75rem 1rem 1rem; }
#app-bingo .bg-msg { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); padding: .5rem .75rem; font-size: .9rem; }

#app-bingo .bg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

/* カード（画面・印刷で共通の形） */
.bg-card {
    background: #fff;
    color: #111;
    border: 2px solid #111;
    padding: .5rem;
    max-width: 22rem;
}
.bg-card-head, .bg-card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bg-card-head span { text-align: center; font-weight: 900; font-size: 1.4rem; line-height: 1.6; }
/* 正方形は表全体で取り、行を5等分する（マスごとに aspect-ratio を付けると、端数で行の線がずれる） */
.bg-card-grid { border-top: 2px solid #111; border-left: 2px solid #111; aspect-ratio: 1 / 1; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.bg-cc {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bg-cc.is-free { font-size: .7rem; font-weight: 800; letter-spacing: .05em; }
.bg-cc.is-hit { background: #7c5ac3; color: #fff; font-weight: 900; }
.bg-cc.is-hit::after { content: "✓"; font-size: .6em; margin-left: .1em; }
.bg-card-foot { display: flex; justify-content: space-between; font-size: .7rem; margin-top: .35rem; }
.bg-card-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: .85rem; }

#app-bingo .bg-check-summary { font-weight: 700; padding: .5rem .75rem; margin-bottom: .75rem; background: var(--bs-body-bg); }
#app-bingo .bg-check-summary.is-bingo { background: #ffc107; color: #212529; }
#app-bingo .bg-check-summary.is-error { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* 画面では印刷用の領域を出さない */
#bg-print-area { display: none; }

/* ---------- 印刷: A4 に 2×2 の4枚 ---------- */
@media print {
    @page { size: A4; margin: 10mm; }
    body > *:not(#bg-print-area) { display: none !important; }
    body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    #bg-print-area { display: block !important; }
    .bg-page {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8mm;
        height: 272mm;
        break-after: page;
        page-break-after: always;
    }
    .bg-page:last-child { break-after: auto; page-break-after: auto; }
    .bg-page .bg-card {
        max-width: none;
        width: 100%;
        break-inside: avoid;
        page-break-inside: avoid;
        align-self: start;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .bg-page .bg-card-head span { font-size: 22pt; }
    .bg-page .bg-cc { font-size: 18pt; }
    .bg-page .bg-cc.is-free { font-size: 9pt; }
    .bg-page .bg-card-foot { font-size: 8pt; }
    .bg-page .bg-card-id { font-size: 10pt; }
}