/* 工具 04 · 开会摸鱼Bingo
   独立视觉：紫粉派对色卡片桌，圆角大格子 + BINGO 字母头 + 彩纸装饰。 */
.bg {
    --a1: #7748d4; --a1b: #dd4f8c; --a1s: #f1eaff; --a1i: #5a31ad;
    --a2: #c3a3ff; --a2b: #ff9ec4; --a2s: rgba(195, 163, 255, .16); --a2i: #dcc7ff;
    --h15-h1: clamp(30px, 3.8vw, 44px);
    --h15-h2: 21px;
}
.bg .bg-h1 { font-weight: 900; letter-spacing: -.025em; }
.bg-hero {
    border-color: #e3d6f7;
    background:
        radial-gradient(520px 220px at 12% -10%, rgba(242, 194, 48, .22), transparent 70%),
        radial-gradient(600px 260px at 88% 0%, rgba(221, 79, 140, .18), transparent 72%),
        linear-gradient(120deg, #faf6ff 0%, #fff7fb 100%);
}
.bg-hero::before { background: linear-gradient(180deg, var(--a1), var(--a1b), #f2c230); }
:root[data-theme="dark"] .bg .bg-hero {
    background: radial-gradient(520px 220px at 12% -10%, rgba(242, 194, 48, .1), transparent 70%),
                radial-gradient(600px 260px at 88% 0%, rgba(221, 79, 140, .12), transparent 72%),
                linear-gradient(120deg, #181326 0%, #1e1424 100%);
}
.bg-confetti { position: absolute; right: 26px; top: 24px; width: 130px; height: 110px; pointer-events: none; }
.bg-confetti i { position: absolute; width: 12px; height: 12px; border-radius: 3px; transform: rotate(24deg); opacity: .8; }
.bg-confetti i:nth-child(1) { left: 4px; top: 12px; background: #f2c230; }
.bg-confetti i:nth-child(2) { left: 52px; top: 2px; background: #dd4f8c; border-radius: 50%; }
.bg-confetti i:nth-child(3) { left: 96px; top: 30px; background: #7748d4; }
.bg-confetti i:nth-child(4) { left: 28px; top: 70px; background: #38bda2; border-radius: 50%; }
.bg-confetti i:nth-child(5) { left: 88px; top: 84px; background: #f2c230; }
@media (max-width: 620px) { .bg-confetti { display: none; } }
.bg-quick { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.bg-quick-f { display: grid; gap: 4px; min-width: 108px; }
.bg-quick-f > span { font-size: var(--h15-fs-12); font-weight: 700; color: var(--h15-ink-2); }
.bg-go { padding-left: 26px; padding-right: 26px; font-size: 15px; }

.bg-desk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .bg-desk { grid-template-columns: 1fr; } }
.bg-table { padding: 18px; border: 1px solid var(--h15-line); border-radius: 18px; background: var(--h15-card); box-shadow: var(--h15-shadow); }
.bg-table-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.bg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-tab { padding: 6px 14px; border: 1px solid var(--h15-line); border-radius: 999px; background: var(--h15-card); color: var(--h15-ink-2); font-family: inherit; font-size: var(--h15-fs-12); font-weight: 700; cursor: pointer; }
.bg-tab.is-on { background: var(--h15-accent); border-color: var(--h15-accent); color: #fff; }
:root[data-theme="dark"] .bg .bg-tab.is-on { color: #160d26; }
.bg-tab.has-line { border-color: var(--a1b); }
.bg-timer { display: flex; align-items: center; gap: 7px; }
.bg-timer-v { font-size: var(--h15-fs-18); font-weight: 800; color: var(--h15-accent-ink); }

.bg-bingo-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 7px; }
.bg-bingo-head span { text-align: center; font-family: var(--h15-font-num); font-size: 22px; font-weight: 900; letter-spacing: .1em; color: var(--h15-accent-ink); }
.bg-bingo-head span:nth-child(2) { color: var(--a1b); }
.bg-bingo-head span:nth-child(4) { color: #c99a1c; }
.bg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.bg-grid .bg-empty { grid-column: 1 / -1; }
.bg-cell {
    position: relative; min-height: 84px; padding: 9px 7px;
    display: grid; place-items: center; text-align: center;
    border: 1.5px solid var(--h15-line); border-radius: 12px;
    background: var(--h15-card-2); color: var(--h15-ink);
    font-family: inherit; font-size: var(--h15-fs-13); font-weight: 650; line-height: 1.5;
    cursor: pointer; transition: transform .13s, background .16s, border-color .16s;
}
.bg-cell:hover { border-color: var(--h15-accent); transform: translateY(-2px); }
.bg-cell.is-on { background: linear-gradient(140deg, var(--h15-accent-soft), rgba(221, 79, 140, .14)); border-color: var(--h15-accent); color: var(--h15-accent-ink); }
.bg-cell.is-on::after { content: "✓"; position: absolute; right: 7px; top: 4px; font-size: 13px; color: var(--a1b); font-weight: 900; }
.bg-cell.is-free { background: rgba(242, 194, 48, .16); border-color: #d9ab31; border-style: dashed; cursor: default; font-family: var(--h15-font-num); font-weight: 900; letter-spacing: .08em; }
.bg-cell.is-free:hover { transform: none; }
.bg-cell.is-line { box-shadow: 0 0 0 2px var(--a1b) inset; }
:root[data-theme="dark"] .bg .bg-cell.is-free { background: rgba(242, 194, 48, .1); }
@media (max-width: 620px) { .bg-cell { min-height: 66px; font-size: 12px; padding: 6px 3px; } .bg-bingo-head span { font-size: 18px; } .bg-table { padding: 12px; } }
.bg-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--h15-line); font-size: var(--h15-fs-12); color: var(--h15-ink-2); }
.bg-status b { color: var(--h15-accent-ink); }
.bg-actions { margin-top: 12px; }

.bg-bank .bg-cats { display: grid; gap: 8px; margin-bottom: 15px; padding: 12px; border-radius: 11px; background: var(--h15-card-2); }
.bg-lines-log { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--h15-line); }
.bg-lines-log ol { margin: 0; padding-left: 20px; font-size: var(--h15-fs-12); color: var(--h15-ink-2); line-height: 1.9; }
.bg-rules { margin-top: 20px; }
.bg-rule { padding: 15px 16px; border-radius: 12px; border: 1px solid var(--h15-line); background: var(--h15-card-2); }
.bg-rule .h15-h3 { color: var(--h15-accent-ink); }
.bg-rule .h15-lead { margin: 0; line-height: 1.85; }
.bg-faq .h15-faq-item:nth-child(odd) { border-left: 3px solid var(--h15-accent-soft); }
.bg-modal-box { text-align: center; border-top: 6px solid var(--h15-accent); }
.bg-modal-box .h15-modal-t { font-size: 30px; font-weight: 900; color: var(--h15-accent-ink); letter-spacing: .06em; }
.bg-bingo-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 12px 0; }
.bg-bingo-lines span { padding: 4px 12px; border-radius: 999px; background: var(--h15-accent-soft); color: var(--h15-accent-ink); font-size: var(--h15-fs-13); font-weight: 700; }