.bg-area{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(520px,94%)}
#bg-letters{display:flex;align-items:center;gap:6px}
#bg-letters em{font-style:normal;font-size:13px;font-weight:700;color:#5c554b;margin-right:4px}
#bg-letters span{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #d9d0bd;display:flex;align-items:center;justify-content:center;font-weight:900;color:#b9ae9a}
#bg-letters span.on{background:#d0543a;border-color:#d0543a;color:#fff}
#bg-board{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;background:#fffaf0;padding:10px;border-radius:14px;box-shadow:0 8px 18px rgba(70,40,10,.22)}
.bg-cell{aspect-ratio:1;border:2px solid #e4dccd;border-radius:10px;background:#fff;font-size:clamp(18px,5vw,28px);font-weight:800;color:#262320;padding:0;position:relative;cursor:default}
.bg-cell.can{cursor:pointer}
.bg-cell.can:hover{border-color:#2f6f6a;background:#f1f8f6}
.bg-cell.empty{background:#f4efe6;border-style:dashed}
.bg-cell.m{background:#fde3d9;color:#a7402b;border-color:#f0b9a6}
.bg-cell.m::after{content:"";position:absolute;inset:16%;border:3px solid rgba(208,84,58,.7);border-radius:50%}
.bg-cell.line{background:#d0543a;color:#fff;border-color:#d0543a}
.bg-cell.line::after{border-color:rgba(255,255,255,.75)}
.bg-cell.last{box-shadow:0 0 0 3px #f0b43a}
#bg-opp{width:100%;background:rgba(255,255,255,.7);border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:12px}
.bg-opp-h{font-size:14px;font-weight:700;flex:1}.bg-opp-h b{color:#2f4f7f;font-size:17px;margin-left:4px}
.bg-mini{display:grid;grid-template-columns:repeat(5,18px);gap:2px}
.bg-mini i{width:18px;height:18px;border-radius:4px;background:#2f4f7f;font-style:normal;font-size:9px;color:#fff;display:flex;align-items:center;justify-content:center}
.bg-mini.rev i{background:#fff;color:#262320;border:1px solid #d9d0bd}
.bg-mini.rev i.m{background:#c9d6ea}
.bg-mini.rev i.line{background:#2f4f7f;color:#fff}
#bg-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.bg-hint{font-size:13px;color:#5c554b;background:#fff;border-radius:8px;padding:6px 10px}
#bg-called{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;max-width:100%}
#bg-called span{font-size:12px;color:#5c554b;margin-right:4px}
#bg-called i{font-style:normal;font-size:12px;background:#fff;border:1px solid #e4dccd;border-radius:6px;padding:2px 6px}
#bg-called i.last{background:#f0b43a;border-color:#f0b43a;color:#fff;font-weight:800}
#bg-hand{position:absolute;inset:-10px;background:rgba(38,35,32,.92);border-radius:16px;display:none;align-items:center;justify-content:center;z-index:5;text-align:center;color:#fff;padding:20px}
#bg-hand b{font-size:22px}#bg-hand p{color:#ddd;margin:10px 0 18px;line-height:1.6}
