/* ビンゴ固有の見た目（共通は ../common/base.css、カードと玉は card.css） */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage { position: relative; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- ビンゴマシン ---------- */
.mc-top { display: flex; align-items: center; justify-content: center; gap: 16px; }
.drum { width: min(240px, 44%) !important; flex: none; }
.drum-stand { fill: #8A6A4A; stroke: #4A3728; stroke-width: 3; }
.drum-chute { fill: #C9B8A0; stroke: #4A3728; stroke-width: 3; }
.drum-rim { fill: rgba(233, 226, 208, .35); stroke: #4A3728; stroke-width: 5; }
.drum-spoke { stroke: #4A3728; stroke-width: 2.5; opacity: .75; }
.drum-hub { fill: #8A6A4A; stroke: #4A3728; stroke-width: 3; }
.drum-arm { stroke: #4A3728; stroke-width: 6; stroke-linecap: round; }
.drum-knob { fill: #C8453B; stroke: #4A3728; stroke-width: 3; }
.drum-ball { stroke: #4A3728; stroke-width: 2; }
.mc-now { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ball.big { --size: clamp(120px, 34vw, 190px); }
.mc-count, .cg-count { margin: 0; font-weight: 700; color: var(--ink-sub); font-variant-numeric: tabular-nums; }

/* 出た数字（新しい順） */
.hist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 6px; overflow: hidden; min-height: 40px; }
.hist li { flex: none; }
.hist .ball { --size: 40px; border-width: 2px; filter: none; }
.hist .ball::before { inset: 14%; }
.hist .ball .ball-l { display: none; }
.hist .ball .ball-n { font-size: 15px; }
.hist li:first-child .ball { outline: 3px solid var(--accent); outline-offset: 2px; }
.hist.small { margin-top: 6px; min-height: 34px; }
.hist.small .ball { --size: 34px; }
.hist.small .ball .ball-n { font-size: 14px; }

.mc-btns .spin-btn, .cg-btns .draw-btn, .cg-btns .bingo-btn { min-height: 56px; font-size: 20px; padding: 0 28px; }
.mc-btns .spin-btn { min-width: 160px; }

/* 出た数字の表 */
.mc-table { margin-top: 14px; display: grid; gap: 3px; }
.mc-row { display: grid; grid-template-columns: 2.2em repeat(var(--n), minmax(0, 1fr)); gap: 3px; }
.mc-row .lab { display: flex; align-items: center; justify-content: center; font-weight: 800; border-radius: 4px; background: var(--ball); color: var(--ball-ink); border: 1.5px solid rgba(0,0,0,.3); font-size: 15px; }
.mc-row .lab.plain { background: transparent; color: var(--ink-sub); border: 0; font-size: 14px; font-weight: 700; }
.mc-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 4px;
  border: 1px solid var(--line); color: var(--ink-sub); font-size: clamp(14px, 2.6vw, 15px); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface);
  letter-spacing: -.04em; overflow: hidden;
}
.mc-cell.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mc-cell.last { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); outline: 2px solid var(--btn); outline-offset: 1px; }

/* 大きく表示（プロジェクター・大きな画面用） */
.machine.big {
  position: fixed; inset: 0; z-index: 200; margin: 0; padding: 2.5vh 2.5vw; overflow: hidden;
  background: #15171B; color: #F2F0EA;
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); grid-template-rows: 1fr auto auto; gap: 2vh 3vw;
  grid-template-areas: "now table" "hist table" "btns table";
}
.machine.big .mc-top { grid-area: now; flex-direction: column; justify-content: center; gap: 1vh; min-height: 0; }
.machine.big .drum { display: none; }
.machine.big .ball.big { --size: min(34vw, 62vh); }
.machine.big .mc-count { color: #C9CDD3; font-size: clamp(18px, 3.2vh, 40px); }
.machine.big .hist { grid-area: hist; justify-content: center; margin: 0; gap: 1vh; }
.machine.big .hist .ball { --size: clamp(34px, 6.5vh, 80px); }
.machine.big .hist .ball .ball-n { font-size: clamp(14px, 2.6vh, 32px); }
.machine.big .hist li:first-child { display: none; }
.machine.big .hist li:nth-child(n+7) { display: none; }
.machine.big .mc-btns { grid-area: btns; justify-content: center; margin: 0; }
.machine.big .mc-btns #undo, .machine.big .mc-btns #print-link { display: none; }
.machine.big .mc-btns .btn.sub { background: transparent; color: #DDE6F0; border-color: #7FA8D1; }
.machine.big .mc-table { grid-area: table; margin: 0; align-content: center; gap: .6vh; }
.machine.big .mc-row { gap: .5vw; }
.machine.big .mc-row .lab { font-size: clamp(16px, 3.4vh, 44px); }
.machine.big .mc-row .lab.plain { color: #C9CDD3; font-size: clamp(12px, 2vh, 24px); }
.machine.big .mc-cell { font-size: clamp(12px, min(2.6vh, 2.9vw), 34px); background: #22252B; border-color: #3A3D43; color: #8E949C; }
.machine.big .mc-cell.on { background: #F2F0EA; color: #15171B; border-color: #F2F0EA; }
.machine.big .mc-cell.last { background: #F6C443; color: #15171B; border-color: #F6C443; outline-color: #F6C443; }
/* 縦長の画面（スマホを縦にしたとき）は上下に並べる */
@media (max-aspect-ratio: 1/1) {
  .machine.big { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; grid-template-areas: "now" "hist" "btns" "table"; }
  .machine.big .ball.big { --size: min(60vw, 34vh); }
}
body.big-open { overflow: hidden; }

/* ---------- カードで遊ぶ ---------- */
.cg-top { display: flex; align-items: center; gap: 14px; }
.ball.mid { --size: 96px; }
.cg-info { flex: 1; min-width: 0; }
.timer { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 6px; }
.timer span { display: block; height: 100%; width: 0; background: var(--accent); }
.cg-board { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; }
.cg-me .bcard { --cell: clamp(44px, min(calc((100vw - 76px) / 5), 6.6vh), 64px); }
.cg-me { max-width: none; display: flex; flex-direction: column; align-items: center; }
.who { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; line-height: 1.4; margin: 0 0 4px; }
.who .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4A3728; color: #fff; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* 成功・注意・失敗の色の地の文字は、白ではなく背景の色（ライト・ダークとも 4.5:1 以上。D12） */
.badge { font-size: 14px; font-weight: 800; border-radius: 999px; padding: 0 8px; line-height: 1.6; }
.badge.reach { background: var(--warn); color: var(--bg); }
.badge.bingo { background: var(--ng); color: var(--bg); }
.cg-cpus { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cpu-box { display: flex; flex-direction: column; align-items: center; }
.cpu-box .bcard { --cell: clamp(16px, calc((100vw - 110px) / 16), 24px); padding: 3px; border-width: 1.5px; }
.cpu-box .bc-grid { gap: 1.5px; }
.cpu-box .bc-cell { border-width: 1px; font-size: calc(var(--cell) * .46); border-radius: 2px; }
.cpu-box .bc-head { border-width: 1px; border-radius: 2px; }
.cpu-box .bc-cell.need { border-width: 1.5px; }
.cpu-box .who { font-size: 14px; }
.cg-me .bcard.is-reach { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn); }
.cg-me .bcard.is-bingo { border-color: var(--ng); box-shadow: 0 0 0 3px var(--ng); }
.cg-btns { justify-content: center; }
.bingo-btn { background: var(--ng); border-color: var(--ng); color: var(--bg); }
.bingo-btn.ready { animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ng) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bingo-btn.ready { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ng) 35%, transparent); } }

.common-btns { margin-top: 8px; }
.callout { z-index: 20; font-size: clamp(22px, 5.5vw, 32px); }
.result-box { z-index: 25; top: 8%; }
.result-box li { font-size: 16px; flex-wrap: wrap; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .mc-btns .spin-btn, .cg-btns .draw-btn { flex: 1 1 auto; }
  .cg-btns .bingo-btn { flex: 1 1 auto; }
  .ball.mid { --size: 76px; }
  .result-box { inset: 6% 3% auto; padding: 16px; }
}

/* 英語のページ: CPU の小さなカードの名札（「1 away」「BINGO」）は、入らなければ名前の下へ回す（3人が1段に並ぶように） */
:root:lang(en) .cpu-box .who { flex-wrap: wrap; justify-content: center; row-gap: 2px; max-width: 108px; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */