.bb{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px;align-items:center}
.bb-info{font-size:14px;color:var(--muted);min-height:20px;text-align:center}
.bb-info b{color:var(--ink);letter-spacing:3px}
.bb-slots{display:flex;gap:10px}
.bb-slot{width:58px;height:68px;border-radius:12px;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800}
.bb-slot.cur{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,111,106,.15)}
.bb-keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:400px}
.bb-key{font-size:20px;font-weight:700;padding:12px 0}
.bb-key.fn{font-size:15px}
.bb-key.ok{background:var(--accent);color:#fff;border-color:var(--accent);font-size:16px}
.bb-memo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted)}
#bb-memo{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.bb-memo{width:32px;height:32px;padding:0;font-weight:700;border-radius:8px}
.bb-memo.m1{background:#eee;color:#bbb;text-decoration:line-through}
.bb-memo.m2{background:#dff1e6;color:#1d7a43;border-color:#8cc9a2}
#bb-hist{width:100%}
.bb-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bb-col h3{font-size:14px;margin:0 0 6px;text-align:center}
.bb-tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:15px;border:1px solid var(--line)}
.bb-tbl th{background:#f3eee4;font-size:12px;color:var(--muted);padding:6px;font-weight:600}
.bb-tbl td{padding:7px 6px;text-align:center;border-top:1px solid var(--line)}
.bb-tbl td.g{font-weight:800;letter-spacing:3px;font-variant-numeric:tabular-nums}
.bb-tbl td.r{font-weight:800;color:var(--accent)}
.bb-tbl td.r.out{color:#c0392b}
.bb-tbl tr.win td{background:#fff3d6}
.bb-tbl td.empty{color:var(--muted);font-size:13px}
@media(max-width:480px){.bb-slot{width:48px;height:58px;font-size:28px}.bb-two{gap:6px}.bb-tbl{font-size:13px}.bb-tbl td.g{letter-spacing:1px}}
@media(max-width:480px){.bb-memo-row{flex-direction:column;gap:4px}#bb-memo{gap:3px;flex-wrap:nowrap}.bb-memo{width:29px;height:30px;font-size:13px}}