.bingo-main { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 16px; flex: 1; }
.match-panel, .history-panel { padding: 21px; }
.match-toolbar, .history-heading, .board-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.turn-label { color: var(--text-muted); font-size: .76rem; font-weight: 800; }
.status-text { min-height: 24px; color: var(--text-primary); font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }
.called-display { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 19px 0; padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 700; }
.called-display strong { min-width: 2.2ch; color: var(--accent-blue); font-family: var(--font-mono); font-size: 1.7rem; text-align: center; }
.boards-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 32px); }
.board-title { margin-bottom: 9px; }
.board-title h2, .history-heading h2 { font-family: var(--font-display); font-size: 1.05rem; }
.board-title span { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent-blue) 12%, transparent); color: var(--accent-blue); font-family: var(--font-mono); font-size: .78rem; font-weight: 700; }
.bingo-board { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 5px; }
.bingo-cell { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 9px; color: var(--text-primary); background: var(--color-surface-hover); font-family: var(--font-mono); font-size: clamp(.78rem, 2vw, 1rem); font-weight: 800; transition: transform .15s ease, background .15s ease, color .15s ease; }
.player-board .bingo-cell:not(:disabled) { cursor: pointer; }
.player-board .bingo-cell:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent-blue); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent-blue) 20%, transparent); }
.bingo-cell:focus-visible, .btn:focus-visible, .btn-icon:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-amber); outline-offset: 2px; }
.bingo-cell.is-called { border-color: var(--accent-emerald); color: #fff; background: var(--accent-emerald); }
.computer-board .bingo-cell { cursor: default; }
.computer-board .bingo-cell:not(.is-called):not(.is-revealed) { color: var(--text-muted); background: color-mix(in srgb, var(--color-surface-hover) 70%, var(--color-bg-dark)); }
.computer-board .bingo-cell:disabled { opacity: 1; }
.opponent-note { min-height: 20px; margin-top: 8px; color: var(--text-muted); font-size: .75rem; text-align: center; }
.history-panel { min-height: 360px; }
.call-history { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; list-style: none; }
.call-history li { display: grid; width: 37px; min-height: 37px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--text-secondary); font-family: var(--font-mono); font-size: .82rem; font-weight: 800; }
.call-history li:last-child { border-color: var(--accent-blue); color: #fff; background: var(--accent-blue); }
.history-empty { margin-top: 26px; color: var(--text-muted); font-size: .9rem; }
.line-explainer { display: flex; gap: 8px; margin-top: 26px; padding-top: 17px; border-top: 1px solid var(--color-border-subtle); color: var(--text-secondary); font-size: .82rem; line-height: 1.55; }
.line-explainer .material-symbols-outlined { color: var(--accent-blue); font-size: 19px; }
.bingo-guide { width: min(100%, 960px); margin: 4px auto 8px; padding: clamp(24px, 5vw, 52px); }
.guide-head { max-width: 720px; }
.guide-head > span { color: var(--accent-blue); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.bingo-guide h2 { margin-top: 9px; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.035em; line-height: 1.2; }
.bingo-guide p { color: var(--text-secondary); line-height: 1.8; }
.guide-head > p { margin-top: 15px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; margin-top: 35px; }
.guide-grid section { border-top: 2px solid var(--color-border); padding-top: 12px; }
.guide-grid h3 { margin-bottom: 8px; font-family: var(--font-display); font-size: 1.1rem; }
.guide-grid details { border-bottom: 1px solid var(--color-border-subtle); padding: 10px 0; }
.guide-grid summary { cursor: pointer; color: var(--text-primary); font-weight: 700; }
.guide-grid details p { padding-top: 8px; font-size: .9rem; }
.result-card { width: min(100%, 500px); }
.result-message { color: var(--accent-blue); font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; text-align: center; }
.result-detail { margin-top: 10px; color: var(--text-secondary); text-align: center; }
@media (max-width: 900px) { .bingo-main { grid-template-columns: 1fr; } .history-panel { min-height: 0; } }
@media (max-width: 700px) {
    .match-panel, .history-panel { padding: 14px; }
    .boards-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .board-section { min-width: 0; }
    .bingo-board { width: min(100%, 360px); margin-inline: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .bingo-cell { min-width: 0; aspect-ratio: 1; border-radius: 6px; }
    .guide-grid { grid-template-columns: 1fr; gap: 24px; }
    .match-toolbar .btn { padding: 9px 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }