/* ---------- BELOT TABLE ---------- */
/* four seats around one felt: partner on top, opponents left and right, you at the bottom; bids show as chips under each seat */
.blstage{position:relative; display:flex; flex-direction:column; gap:10px}
.blseat{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; min-width:0}
.bltop .ava{--s:48px}
.blside{width:clamp(66px,19vw,104px)}
#belot{--us:#46d39a; --them:#ff7a66}
.blseat.us,.blme.us{--tc:var(--us)} .blseat.them{--tc:var(--them)}
#belot .blseat .ava{box-shadow:0 0 0 3px var(--tc,var(--paper)), 0 6px 14px var(--shade)}
#belot .blseat .ava.turn{box-shadow:0 0 0 3px var(--tc), 0 0 0 7px rgba(255,197,61,.6), 0 0 26px 6px rgba(255,197,61,.45); animation:blpulse 1.6s ease-in-out infinite}
@keyframes blpulse{50%{box-shadow:0 0 0 3px var(--tc), 0 0 0 10px rgba(255,197,61,.22), 0 0 30px 8px rgba(255,197,61,.3)}}
.blsay{min-height:30px; display:flex; align-items:flex-end; justify-content:center}
.bltag{display:inline-block; padding:1px 9px; border-radius:99px; font:700 11px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--soft)}
.bltag.us{background:var(--us)} .bltag.them{background:var(--them)}
.mscore b{font:700 12px var(--body); letter-spacing:.06em; text-transform:uppercase; vertical-align:middle}
.mscore b.us,.blsc th.us{color:var(--us)} .mscore b.them,.blsc th.them{color:var(--them)}
.blme{gap:10px 14px}
.blme .ava{--s:46px}
.blbanner{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; min-height:58px; padding:6px 14px; border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); border:1px solid var(--line); box-sizing:border-box}
.blbanner .bnl{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}
.blbanner .bnc{display:inline-flex; align-items:center; gap:10px}
.blbanner .bnc b{font:700 clamp(24px,7vw,32px)/1 'Old Standard TT', Georgia, serif; color:var(--gold)}
.blbanner .bns{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#f3e7c9; font-size:32px; box-shadow:0 0 0 2px var(--gold), 0 4px 10px var(--shade)}
.blbanner .bnw{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--soft)}
.blcut{display:flex; width:min(100%,420px); height:80px; align-items:flex-end; padding-top:16px; box-sizing:border-box}
.blcut .cb{flex:1 1 0; min-width:0; height:62px; padding:0; border:0; border-left:1px solid #f1e3bf; background:var(--back); cursor:pointer; transition:translate .15s ease}
.blcut .cb:first-child{border-radius:8px 0 0 8px; border-left:0} .blcut .cb:last-child{border-radius:0 8px 8px 0}
.blcut .cb:hover~.cb,.blcut .cb:focus-visible~.cb{translate:6px -14px}
.blcut .cb:hover,.blcut .cb:focus-visible{outline:none; box-shadow:inset 3px 0 0 var(--gold)}
.cuthint{width:100%; text-align:center; font-size:13px; color:var(--soft)}
.bltrick .cuta{animation:blcut .85s ease-in-out forwards}
@keyframes blcut{0%{translate:0 0; z-index:3} 45%{translate:90% -10%; z-index:3} 55%{translate:90% -10%; z-index:1} 100%{translate:0 0; z-index:1}}
.blside .ava{--s:clamp(40px,11vw,56px)}
.blname{font-size:13px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.blchip{display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:99px; background:#f6ecd2; color:var(--ink); font:700 14px var(--body); line-height:1.3; white-space:nowrap; box-shadow:0 0 0 2px var(--tc,var(--gold)), 0 3px 8px var(--shade)}
.blchip .sy{font-size:19px}
.blchip.pass{background:var(--shade); color:var(--soft)}
.blchip.dbl{background:var(--hearts); color:var(--paper)}
.sy{font-size:1.15em; line-height:1}
.sy.s0{color:var(--clubs)} .sy.s1{color:var(--diamonds)} .sy.s2{color:var(--hearts)} .sy.s3{color:var(--spades)}
.two .sy.s0,.two .sy.s3{color:var(--spades)} .two .sy.s1,.two .sy.s2{color:var(--hearts)}
.bltable{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px; padding:14px 10px; border-radius:90px; background:radial-gradient(ellipse at 50% 40%, var(--felt) 0%, var(--felt-deep) 85%); box-shadow:0 0 0 7px var(--rim), 0 0 0 9px var(--gold), 0 20px 44px var(--shade), inset 0 0 60px rgba(0,0,0,.4); margin:6px}
.bltrick{--tw:calc(var(--cw)*.72); position:relative; justify-self:center; width:calc(var(--tw)*2.9); height:calc(var(--tw)*1.4*2.1); transition:transform .3s ease-in, opacity .3s ease-in}
.bltrick .card{--w:var(--tw); position:absolute; left:50%; top:50%}
.bltrick .q0{transform:translate(-50%,-18%) rotate(4deg)}
.bltrick .q2{transform:translate(-50%,-82%) rotate(-4deg)}
.bltrick .q1{transform:translate(2%,-50%) rotate(9deg)}
.bltrick .q3{transform:translate(-102%,-50%) rotate(-9deg)}
.bltrick .bldeck{transform:translate(-50%,-50%); box-shadow:3px 3px 0 var(--paper), 6px 6px 0 var(--felt-deep), 0 8px 16px var(--shade)}

.blin1{animation:blin1 .3s cubic-bezier(.2,.8,.3,1)} .blin3{animation:blin3 .3s cubic-bezier(.2,.8,.3,1)}
@keyframes blin1{from{translate:120% 0; opacity:.2}}
@keyframes blin3{from{translate:-120% 0; opacity:.2}}
.blseat .bubble{left:50%; right:auto; top:auto; bottom:calc(100% + 6px); translate:-50% 0; white-space:nowrap; max-width:none; border-radius:14px}
.blside.l .bubble{left:0; translate:none; border-radius:14px 14px 14px 4px}
.blside.r .bubble{left:auto; right:0; translate:none; border-radius:14px 14px 4px 14px}
.bltop .bubble{top:calc(100% + 2px); bottom:auto}
.blseat .bubble{z-index:30}
.blbid{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center}
.blbid .bb{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:66px; height:58px; padding:0 10px; border-radius:12px; border:0; background:#f6ecd2; color:var(--ink); cursor:pointer; box-shadow:inset 0 0 0 1.5px #c9a35a, 0 3px 0 rgba(0,0,0,.35)}
.blbid .bb .bsy{font-size:26px; line-height:1}
.blbid .bb small{font:700 11px var(--body); color:var(--ink)}
.blbid .bb.s0{color:var(--clubs)} .blbid .bb.s1{color:var(--diamonds)} .blbid .bb.s2{color:var(--hearts)} .blbid .bb.s3{color:var(--spades)}
.two .blbid .bb.s0,.two .blbid .bb.s3{color:var(--spades)} .two .blbid .bb.s1,.two .blbid .bb.s2{color:var(--hearts)}
.blbid .bb.txt{font:700 14px var(--body); min-width:88px}
.blbid .bb[aria-disabled="true"]{opacity:.22; cursor:not-allowed}
.blbid .bb:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.blbid .btn{height:46px; padding-inline:18px}
.blstage .overlay{inset:-6px; border-radius:24px; place-items:start center; padding-top:28px}
.blsc{border-collapse:collapse; font:500 14px var(--body); min-width:230px}
.blsc th,.blsc td{padding:4px 10px; text-align:right; font-variant-numeric:tabular-nums}
.blsc th{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.blsc td:first-child,.blsc th:first-child{text-align:left; color:var(--soft)}
.blsc tr.tot td{border-top:1px solid var(--line); font:700 18px var(--num); color:var(--gold)}
.ocard .duo{display:flex}
.ocard .duo .ava{--s:64px}
.ocard .duo .ava+.ava{margin-left:-14px}
@media (prefers-reduced-motion:reduce){ .bltrick{transition:none} .blin1,.blin3,.bltrick .cuta,#belot .blseat .ava.turn{animation:none} }