@media (prefers-reduced-motion:reduce){ .die.roll,.ck.ghost,.tray.dst{animation:none} }
@media (prefers-reduced-motion:reduce){ .card,.trick{transition:none} .enter-0,.enter-1,.drawn,.float,.cta,.ava.turn,.btn.pulse{animation:none} }

/* =====================================================================
   UX слой (агент G): побиране в екрана, ред на състоянието, подсказки,
   напътствия, анимации. Размерите на картите (--cw) и дъската (--tbw)
   се задават от hubFit() в games/shared/fit.js според наличното място.
   ===================================================================== */
body[data-layout="game"] #hubApp{padding-block:6px 0}
#hubApp>#game,#hubApp>#tabla,#hubApp>#belot{position:relative; gap:8px; box-sizing:border-box}
.gbar{min-height:44px; row-gap:6px}
.back{min-height:40px; box-sizing:border-box}
.btn{min-height:40px; box-sizing:border-box}
.opt{height:40px}
.helpb .pi{width:20px; height:20px}

/* ---- лоби: превключвател на игрите (4 плочки) ---- */
.gsw{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; max-width:560px; box-sizing:border-box; border-radius:22px; gap:4px; padding:5px}
.gsw button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:58px; padding:6px 4px; border-radius:17px; font:700 clamp(12px,3.4vw,15px)/1.12 var(--body); text-align:center; transition:background .25s, color .25s, transform .2s}
.gsw button:active{transform:scale(.96)}
.gsw .gg{display:grid; place-items:center; height:22px; font-size:20px; color:var(--gold)}
.gsw button.on .gg{color:var(--ink)}
.gsw .gg svg.i{width:22px; height:22px}
.gsw .suitg{font:700 19px/1 var(--vint); letter-spacing:-.02em}
.gsw .suitg .r{font-style:normal; color:var(--hearts)}
.gsw button.on .suitg .r{color:#9c1f27}
.gsw .gl{display:block; max-width:100%; overflow-wrap:anywhere}

/* ---- ред на състоянието ---- */
.msg{display:flex; flex-direction:column; justify-content:center; gap:2px; box-sizing:border-box; min-height:58px; max-width:min(100%,52ch); width:100%; padding:6px 14px; border:1px solid var(--line); background:rgba(3,8,30,.55); line-height:1.3}
.msg:empty{visibility:visible}
.msg .ev{font-size:13px; color:var(--soft)}
.msg .do{font-size:15px; font-weight:600; color:var(--paper)}
.msg .do.me::before{content:''; display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(255,197,61,.25); vertical-align:1px; animation:mdot 1.4s ease-in-out infinite}
.msg .do.them::before{content:''; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--soft); vertical-align:1px; opacity:.7}
.msg .do.bad{color:#ffc2c8}
.msg .do.bad::before{content:'!'; display:inline-grid; place-items:center; width:18px; height:18px; margin-right:7px; border-radius:50%; background:#ff5d6c; color:#fff; font:700 12px/1 var(--num); vertical-align:1px}
@keyframes mdot{50%{opacity:.35}}
.msg.nope-soft{border-color:#ff5d6c; background:rgba(120,16,32,.45)}
.msg .tip{font-size:12px}

/* ---- грешен ход ---- */
.card.nope{box-shadow:0 0 0 3px #ff5d6c, 0 0 18px rgba(255,93,108,.7), 0 6px 14px var(--shade)!important}
.pt.nope::after,.barp.nope::after,.tray.nope::after{content:''; position:absolute; inset:0; border-radius:6px; box-shadow:inset 0 0 0 3px #ff5d6c; pointer-events:none}
.blbid .bb.nope{box-shadow:0 0 0 3px #ff5d6c}

/* ---- табло (горна лента) ---- */
.mscore .sa,.mscore .sb{display:inline-block}
.bump{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{30%{scale:1.35}}

/* ---- голям надпис върху масата ---- */
.callout{position:absolute; left:50%; top:50%; z-index:16; translate:-50% -50%; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 22px; border-radius:20px; background:rgba(6,12,40,.86); border:2px solid var(--gold); color:var(--gold); text-align:center; white-space:nowrap; box-shadow:0 14px 40px rgba(0,0,0,.5); animation:callout 1.5s cubic-bezier(.2,1.3,.4,1) forwards}
.callout b{font:700 clamp(30px,9vw,50px)/1 var(--num)}
.callout small{font:400 clamp(16px,4.6vw,24px)/1.1 var(--display); color:var(--paper)}
.callout i.sy{font-style:normal; font-size:40px; line-height:1}
.callout.them{border-color:#ff7a66} .callout.me{border-color:#46d39a} .callout.dbl{border-color:#ff5d6c; background:rgba(120,16,32,.9)}
@keyframes callout{0%{opacity:0; scale:.4} 14%{opacity:1; scale:1.1} 24%{scale:1} 82%{opacity:1; scale:1} 100%{opacity:0; scale:1.08}}

/* ---- раздаване (летящи гърбове) ---- */
.card.flyer{position:fixed; --w:44px; z-index:60; pointer-events:none; margin:0}

/* ---- обобщение в края ---- */
#hubApp>section>.overlay{position:absolute; inset:0; border-radius:24px; z-index:20; overflow:auto; display:grid; place-items:center; padding:14px; box-sizing:border-box}
.overlay .panel{position:relative; isolation:isolate; width:100%; max-width:400px; padding:18px 16px; border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)), var(--night2); border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.5); animation:panelin .42s cubic-bezier(.2,1.2,.4,1)}
@keyframes panelin{from{opacity:0; translate:0 18px; scale:.94}}
.panel .why{font-size:15px; text-wrap:balance}
.panel .why b{color:var(--gold)}
.duel{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; width:100%}
.duel .side{display:flex; flex-direction:column; align-items:center; min-width:56px; max-width:110px}
.duel .side small{font-size:11px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.duel .side b{font:700 30px/1 var(--num); font-variant-numeric:tabular-nums}
.duel .side.me b{color:#46d39a} .duel .side.them b{color:#ff7a66}
.dbar{position:relative; display:flex; height:12px; border-radius:99px; background:var(--shade); overflow:visible}
.dbar i{display:block; height:100%; transform-origin:left center}
.dbar i.me{background:#46d39a; border-radius:99px 0 0 99px} .dbar i.them{background:#ff7a66; border-radius:0 99px 99px 0; margin-left:auto; transform-origin:right center}
.dbar em{position:absolute; top:-15px; translate:-50% 0; font:700 10px var(--num); font-style:normal; color:var(--gold)}
.dbar em::after{content:''; position:absolute; left:50%; top:13px; width:2px; height:16px; background:var(--gold)}
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%}
.tiers.two{grid-template-columns:repeat(2,1fr)}
.tiers span{display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 4px; border-radius:12px; border:1px solid var(--line); color:var(--soft); font-size:11px; line-height:1.2; opacity:.6}
.tiers span b{font:700 18px/1 var(--num); color:var(--paper)}
.tiers span.on{opacity:1; border-color:var(--gold); background:rgba(255,197,61,.14); color:var(--paper)}
.tiers span.on b{color:var(--gold)}
.panel .mme{color:#46d39a} .panel .mthem{color:#ff7a66}
.blsc tr.raw td{color:var(--soft); font-size:13px; border-top:1px dashed var(--line)}
.victory .panel{border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,197,61,.35), 0 24px 70px rgba(255,160,40,.3)}
.rays{position:absolute; z-index:-1; left:50%; top:-30px; width:300px; height:300px; translate:-50% 0; border-radius:50%; background:repeating-conic-gradient(rgba(255,197,61,.2) 0 9deg, transparent 9deg 18deg); -webkit-mask:radial-gradient(circle, #000 20%, transparent 70%); mask:radial-gradient(circle, #000 20%, transparent 70%); animation:rays 14s linear infinite; pointer-events:none}
@keyframes rays{to{rotate:360deg}}
.victory .panel h2{animation:wint .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes wint{from{scale:.3; opacity:0}}

/* ---- напътствия ---- */
.coach{position:fixed; inset:0; z-index:85; pointer-events:none}
.cring{position:fixed; border-radius:16px; box-shadow:0 0 0 3px var(--gold), 0 0 0 9999px rgba(4,8,26,.58); transition:left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.cbub{position:fixed; box-sizing:border-box; pointer-events:auto; padding:14px 16px 12px; border-radius:18px; background:var(--paper); color:var(--ink); box-shadow:0 20px 50px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:4px}
.cbub .cstep{font:700 11px var(--num); letter-spacing:.12em; color:var(--gold3)}
.cbub b{font:400 18px/1.15 var(--display); color:var(--ink)}
.cbub p{margin:0; font-size:14px; line-height:1.45; color:#3a3d48}
.cbub .crow{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}
.cbub .btn.ghostb{border-color:transparent; color:#5a5f70}
.cbub .btn{min-height:40px}
.tourbtn{display:inline-flex; align-items:center; gap:8px; margin:0 0 12px}

/* ---- сантасе: решетка (портрет) ---- */
#hubApp>#game{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr auto auto auto; grid-template-areas:"bar bar" "os of" "tb tb" "msg msg" "hand hand" "me me"; align-items:center; column-gap:8px}
#game>.gbar{grid-area:bar} #game>.oppseat{grid-area:os; justify-content:flex-end; min-height:52px} #game>#opp{grid-area:of; align-self:center} #game>#table{grid-area:tb; align-self:stretch; margin:8px 9px} #game>#msg{grid-area:msg; justify-self:center} #game>#hand{grid-area:hand} #game>.meseat{grid-area:me}
#game .oppseat .ava{--s:52px}
#game .table{min-height:calc(var(--cw)*1.4*1.45 + 24px); padding:12px 16px; box-sizing:border-box}
#game .trick{height:calc(var(--cw)*1.4*1.45)}
#game .hand{height:calc(var(--cw)*1.4 + 30px)}
#game .opp{height:calc(var(--cw)*.5*1.4 + 16px)}
#game .opp .card{top:6px}
.trumpchip b{color:var(--paper); font-weight:700}
.deck .count{box-shadow:0 2px 6px var(--shade)}
.meseat{gap:6px 12px}
.acts{gap:6px}

/* ---- табла ---- */
#hubApp>#tabla{display:flex}
.tbwrap{max-width:min(740px,var(--tbw,740px)); flex:none}
.tbacts{flex-wrap:wrap; min-height:40px}
.pt .pnum{position:absolute; left:0; right:0; z-index:0; text-align:center; font:600 calc(var(--ck)*.27)/1 var(--num); color:rgba(255,236,200,.42); pointer-events:none}
.pt.t .pnum{top:calc(var(--ck)*-.32)} .pt.b .pnum{bottom:calc(var(--ck)*-.32)}
.die.land{animation:dland .5s cubic-bezier(.3,1.7,.5,1)}
.die.land:nth-child(2){animation-delay:.05s}
@keyframes dland{0%{translate:0 -40%; scale:1.2; rotate:-25deg} 60%{translate:0 4%; scale:.95} 100%{translate:0 0; scale:1; rotate:0deg}}
.impact{position:absolute; left:50%; z-index:3; width:var(--cs); height:var(--cs); translate:-50% 0; border-radius:50%; box-shadow:0 0 0 3px #ff7a66; pointer-events:none; animation:impact .6s ease-out forwards}
.pt.t .impact{top:2px} .pt.b .impact{bottom:2px}
@keyframes impact{from{scale:.6; opacity:1} to{scale:2.2; opacity:0}}
#tbUndo{display:inline-flex; align-items:center; gap:6px}

/* ---- белот ---- */
#hubApp>#belot{display:flex}
#belot .blstage{flex:1 0 auto; gap:8px}
#belot .bltable{flex:1 0 auto; margin:8px 9px}
.blbanner{min-height:50px; gap:4px 14px}
.bnmain{display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:4px 10px}
.blbanner .bns{width:38px; height:38px; font-size:26px}
.blbanner .bnc b{font-size:clamp(20px,6vw,28px)}
.bnstats{display:inline-flex; gap:6px}
.bst{display:flex; flex-direction:column; align-items:center; padding:2px 9px; border-radius:10px; background:rgba(3,8,30,.45); line-height:1.1}
.bst small{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.bst b{font:700 17px var(--num); font-variant-numeric:tabular-nums}
.bst i{font-style:normal} .bst i.us{color:var(--us)} .bst i.them{color:var(--them)}
.blwho{display:flex; align-items:center; justify-content:center; gap:5px; max-width:100%; flex-wrap:wrap}
.bltop .ava{--s:44px}
.blme{flex-wrap:wrap}
.blacts{margin-left:4px}
#belot .hand{height:calc(var(--cw)*1.4 + 30px)}

/* ---- телефон в пейзаж (ниска височина): масата вляво, информацията вдясно ---- */
@media (orientation:landscape) and (max-height:540px){
  body[data-layout="game"] #hubApp{max-width:none; padding-inline:12px}
  .gbar{min-height:40px}
  .msg{min-height:50px; padding:4px 10px} .msg .do{font-size:14px} .msg .ev{font-size:12px} .msg .tip{display:none}
  #hubApp>#game{grid-template-columns:minmax(0,1fr) minmax(190px,32%); grid-template-rows:auto auto auto 1fr auto; grid-template-areas:"bar bar" "tb os" "tb of" "tb msg" "hand me"; row-gap:4px}
  #game>.oppseat{justify-content:flex-start; min-height:40px} #game .oppseat .ava{--s:38px}
  #game>#table{margin:6px 8px}
  #game .table{min-height:calc(var(--cw)*1.4*1.1 + 16px); padding:8px 14px}
  #game .trick{width:calc(var(--cw)*2.25); height:calc(var(--cw)*1.4*1.1)}
  #game .trick .t1{top:0; left:0; transform:rotate(-7deg)}
  #game .trick .t0{top:auto; bottom:0; left:auto; right:0; transform:rotate(6deg)}
  #game .hand,#belot .hand{height:calc(var(--cw)*1.4*.74 + 22px); overflow-y:clip; overflow-x:visible}
  #game .hand .card,#belot .hand .card{bottom:calc(var(--cw)*1.4*-.26 + 2px)}
  #game>.meseat{flex-direction:column; gap:4px} #game .meseat .ava{--s:36px}
  #hubApp>#tabla{display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,30%); grid-template-rows:auto auto 1fr auto; grid-template-areas:"bar bar" "bd os" "bd msg" "bd me"; column-gap:12px; row-gap:6px}
  #tabla>.gbar{grid-area:bar} #tabla>.oppseat{grid-area:os; justify-content:flex-start} #tabla>.tbwrap{grid-area:bd; align-self:center} #tabla>.msg{grid-area:msg; align-self:center} #tabla>.meseat{grid-area:me; flex-direction:column}
  #tabla .oppseat .ava,#tabla .meseat .ava{--s:38px}
  #hubApp>#belot{display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,36%); grid-template-rows:auto auto auto 1fr auto auto; grid-template-areas:"bar bar" "top ban" "tb msg" "tb bid" "hand bid" "hand me"; column-gap:12px; row-gap:4px}
  #belot>.gbar{grid-area:bar} #belot>.blbanner{grid-area:ban; min-height:0; padding:4px 8px} #belot>.blstage{display:contents}
  #belot .bltop{grid-area:top; flex-direction:row; justify-content:center; gap:8px} #belot .bltop .blsay{min-height:0}
  #belot .bltop .ava{--s:34px}
  #belot .bltable{grid-area:tb; margin:6px 8px; padding:6px 10px}
  #belot .blmsg,#belot #blMsg{grid-area:msg} #belot #blBid{grid-area:bid; align-self:start} #belot #blHand{grid-area:hand} #belot .blme{grid-area:me; gap:4px 8px}
  #belot .blme .ava{--s:34px}
  .blbid .bb{min-width:56px; height:44px} .blbid .bb .bsy{font-size:20px} .blbid .btn{height:40px}
  .blbanner .bnc b{font-size:20px} .blbanner .bns{width:30px; height:30px; font-size:20px}
  .blside .ava{--s:34px}
}
@media (max-height:700px) and (orientation:portrait){
  .msg{min-height:52px} .msg .tip{display:none}
  #game .oppseat .ava{--s:44px}
  .bltop .ava{--s:38px} .blside .ava{--s:38px}
  .blsay{min-height:26px}
  .blbid .bb{min-width:54px; height:48px}
}

@media (prefers-reduced-motion:reduce){
  .trick.collect-0,.trick.collect-1,.bltrick[class*="go"]{opacity:0}
  .callout,.die.land,.impact,.bump,.overlay .panel,.rays,.victory .panel h2,.msg .do.me::before{animation:none}
  .cring{transition:none}
}

/* ---- поправки на подредбата ---- */
#hubApp>section>*{flex-shrink:0; min-width:0}
.gbar{flex-wrap:nowrap; gap:6px}
.gbar .match{margin-left:auto; white-space:nowrap}
.gbar .gtools{flex-wrap:nowrap}
@media (max-width:520px){ .gbar .bkt{display:none} .gbar .back{width:40px; padding:0; justify-content:center} .gbar .mlabel{display:none} .gbar .mscore{font-size:22px} }
@media (max-width:380px){ .gbar .gtools .picon-btn,.gbar .icon-btn{width:36px; height:36px} .gbar{gap:4px} }
.oppseat .bubble{left:auto; right:0; top:-8px; max-width:min(240px,100%); min-width:110px}
.msg{overflow-wrap:anywhere}
.bltop{flex-direction:row; justify-content:center; gap:8px}
.bltop .blsay{min-height:0}
.blbid{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:5px; width:100%; max-width:560px; justify-self:center; align-self:center; margin-inline:auto; box-sizing:border-box}
.blbid .bb,.blbid .btn{min-width:0; height:52px; padding:0 3px}
.blbid .bb.txt{font:700 11px/1.15 var(--body); min-width:0}
.blbid .btn{font-size:13px}
.blbid:has(.blcut){display:flex; flex-direction:column; align-items:center}
.blme .ava{--s:40px}
@media (orientation:landscape) and (max-height:540px){
  #game>.meseat{display:grid; grid-template-columns:auto 1fr; justify-items:start; align-items:center; gap:4px 8px}
  #game>.meseat .acts{grid-column:1/3; justify-content:flex-start}
  #tabla>.meseat{display:grid; grid-template-columns:auto 1fr; justify-items:start; align-items:center; gap:4px 8px}
  #tabla>.meseat .tbacts{grid-column:1/3; justify-content:flex-start; min-height:0}
  .oppseat .bubble{top:100%; z-index:40}
  .blbid{grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr))}
  .blbid .bb,.blbid .btn{height:42px}
}
.fitting .bubble,.fitting .callout{display:none!important}
@media (orientation:landscape) and (max-height:540px){
  #belot .blme{flex-wrap:nowrap; justify-content:flex-start}
  #belot .blme .blsay{display:none}
  #belot .blside .bltag{display:none}
  #belot .blside .blsay{min-height:24px}
  #belot .blside .blname{font-size:12px}
}
@media (orientation:landscape) and (max-height:540px){
  #hubApp>#game{grid-template-columns:minmax(0,1fr) minmax(96px,15%) minmax(110px,17%); grid-template-rows:auto auto 1fr auto; grid-template-areas:"bar bar bar" "tb os of" "tb msg msg" "hand me me"}
  #game>.oppseat{flex-direction:column; gap:2px; text-align:center}
  #game>.oppseat .info{align-items:center}
  #game>.oppseat .info b .stars{display:none}
  #game .opp{height:calc(var(--cw)*.5*1.4 + 14px)}
}
.fitting,.fitting *{transition:none!important}
@media (max-height:720px) and (orientation:portrait){
  .blside .bltag{display:none}
  .blbanner{min-height:42px; padding:4px 10px}
  #belot .bltable{padding:8px 8px; margin:6px 8px}
  .blme .blsay{min-height:0}
  #belot .blme{flex-wrap:nowrap}
  #hubApp>#belot,#belot .blstage{gap:6px}
}

/* =====================================================================
   Карти v3: по-големи карти в ръката, едър ъглов индекс, истинска
   подредба на знаците (7–10), емблеми на фигурите.
   ===================================================================== */
#hubApp{--hk:1}
@media (orientation:portrait) and (max-width:760px){ #hubApp{--hk:1.26} }
.card .idx{top:calc(var(--w)*.045); left:calc(var(--w)*.055); z-index:2}
.card .idx b{font-size:calc(var(--w)*.3); line-height:.92}
.card .idx i{font-size:calc(var(--w)*.24); margin-top:calc(var(--w)*-.01)}
.card .idx.br{bottom:calc(var(--w)*.045); right:calc(var(--w)*.055)}
.card .pips{position:absolute; inset:9% 17% 9% 17%; pointer-events:none}
.card .pips i{position:absolute; translate:-50% -50%; font-style:normal; font-family:var(--vint); font-size:calc(var(--w)*.21); line-height:1}
.card .pips i.dn{rotate:180deg}
.card .pip.ace{font-size:calc(var(--w)*.62)}
.card .face{inset:15% 17%; gap:calc(var(--w)*.01); font-size:calc(var(--w)*.34)}
.card .face .emb{width:calc(var(--w)*.3); height:calc(var(--w)*.3); opacity:.9}
.card .face span{line-height:.9}
.card .face i{font-size:.6em; line-height:1}
.card.mark::after{top:auto; bottom:calc(var(--w)*.07); left:calc(var(--w)*.07); right:auto}
/* ръката: по-едри карти на телефон в портрет */
.hand .card{--w:calc(var(--cw)*var(--hk))}
#game .hand,#belot .hand{height:calc(var(--cw)*var(--hk)*1.4 + 26px)}
.hand .card{bottom:8px}
button.card.playable:hover,button.card.playable:focus-visible{translate:0 -16px}
@media (hover:none){ button.card.playable:hover{translate:none} }
.hand .card.playable{box-shadow:inset 0 0 0 calc(var(--w)*.035) #fbf3dc, inset 0 0 0 calc(var(--w)*.045) rgba(122,84,36,.5), 0 0 0 1.5px rgba(255,197,61,.55), 0 6px 14px var(--shade)}
/* летящите гърбове при раздаване са с размера на истинските карти */
.card.flyer{--w:calc(var(--cw)*.8)}
@media (orientation:landscape) and (max-height:540px){
  #game .hand,#belot .hand{height:calc(var(--cw)*1.4*.74 + 22px)}
}

/* =====================================================================
   Табла: полетата се поставят чрез --r/--c. На телефон/таблет в портрет
   дъската е „изправена“ по дължината на екрана → пуловете са ~40% по-едри.
   ===================================================================== */
.pt{grid-row:var(--r); grid-column:var(--c)}
@media (orientation:portrait) and (max-width:760px){
  .tbwrap{max-width:min(560px,var(--tbw,560px))}
  .tbb{--ck:calc(100cqw / 11.5); --cs:calc(var(--ck)*.94);
    grid-template-columns:calc(var(--ck)*4.75) calc(var(--ck)*1.3) calc(var(--ck)*4.75);
    grid-template-rows:repeat(6,var(--ck)) calc(var(--ck)*1.05) repeat(6,var(--ck)) calc(var(--ck)*1.15);
    padding:calc(var(--ck)*.35)}
  .tbb .pt{grid-row:var(--c); grid-column:var(--r); flex-direction:row; padding:0 2px}
  .tbb .pt.b{flex-direction:row-reverse}
  .tbb .pt::before{left:0; right:auto; top:6%; bottom:6%; width:93%; height:auto; clip-path:polygon(0 0,100% 50%,0 100%)}
  .tbb .pt.b::before{left:auto; right:0; clip-path:polygon(100% 0,0 50%,100% 100%)}
  .tbb .pt .pnum{left:calc(var(--ck)*-.33); right:auto; top:50%; bottom:auto; width:calc(var(--ck)*.33); translate:0 -50%; font-size:calc(var(--ck)*.24)}
  .tbb .pt.b .pnum{left:auto; right:calc(var(--ck)*-.33)}
  .tbb .pt.t.sel .ck.top{translate:4px 0} .tbb .pt.b.sel .ck.top{translate:-4px 0}
  .tbb .pt .impact{top:50%; translate:0 -50%; left:2px} .tbb .pt.b .impact{left:auto; right:2px}
  .tbb .fld{grid-row:auto; grid-column:1/4}
  .tbb .fld.l{grid-row:1/7} .tbb .fld.r{grid-row:8/14}
  .tbb .barc{grid-area:7/1/8/4; margin:calc(var(--ck)*.1) 0; background:linear-gradient(180deg,var(--wood2),var(--wood) 50%,var(--wood2))}
  .tbb .trayc{grid-area:14/1/15/4; margin:calc(var(--ck)*.15) 0 0}
  .tbb .barp{grid-row:7; flex-direction:row; align-items:center; padding:0 4px}
  .tbb .barp.t{grid-column:1; justify-content:flex-end} .tbb .barp.b{grid-column:3; justify-content:flex-start}
  .tbb .barp .ck+.ck{margin-top:0; margin-left:calc(var(--cs)*-.4)}
  .tbb .barp.sel .ck.top{translate:0 -4px}
  .tbb .tray{grid-row:14; margin:calc(var(--ck)*.15) 0 0; flex-direction:row; padding:3px}
  .tbb .tray.t{grid-column:1} .tbb .tray.b{grid-column:3; flex-direction:row-reverse}
  .tbb .slab{width:calc((var(--ck)*4.75 - 22px) / 15); height:auto; align-self:stretch}
  .tbb .slab.c0{background:linear-gradient(90deg,#fffaf0,#d6c39a)} .tbb .slab.c1{background:linear-gradient(90deg,#4a4f5e,#0c0d12)}
  .tbb .dz{grid-row:auto; grid-column:1/4}
  .tbb .dz.r{grid-row:8/14} .tbb .dz.l{grid-row:1/7}
  .tbb .die{--d:calc(var(--ck)*1.25)}
  /* по-плътни редове над и под дъската */
  #tabla .oppseat,#tabla .meseat{gap:4px 10px}
  #tabla .oppseat .ava,#tabla .meseat .ava{--s:42px}
  #tabla>.msg{min-height:50px; padding:4px 12px} #tabla>.msg .tip{display:none}
  #hubApp>#tabla{gap:6px}
  #tabla>.meseat{display:grid; grid-template-columns:auto 1fr; align-items:center; justify-items:start}
  #tabla>.meseat .tbacts{grid-column:1/3; justify-self:stretch; justify-content:center}
}
/* козът се вижда по-ясно под тестето; точки и печеливша карта */
.deck{width:calc(var(--cw)*.74*1.4 + var(--cw)*.42)}
.deck .trump{left:calc(var(--cw)*.62)}
.deck .stack{z-index:2}
.float{font-size:clamp(26px,7vw,34px); color:#ffd36b; text-shadow:0 2px 0 #3a2400, 0 0 14px rgba(255,197,61,.8)}
.card.won{box-shadow:0 0 0 3px var(--gold), 0 0 22px 6px rgba(255,197,61,.75), 0 6px 14px var(--shade)!important}

/* Сантасе: резултатът под играчите се показва само в края на ръката (празната лента не заема място) */
#game .pill:empty{display:none}

/* =====================================================================
   Сантасе: по-едри и по-ясни карти. Масата се побира сама (hubFit смята
   --cw по наличното място), затова тук се задават само пропорциите.
   ===================================================================== */
@media (orientation:portrait), (min-height:541px){ #game{--hk:1.18} }
@media (orientation:portrait) and (max-width:760px){ #game{--hk:1.4} }
/* едър ъглов индекс — ранг и боя се четат и при силно застъпване в ръката */
#game .card .idx b{font-size:calc(var(--w)*.35)}
#game .card .idx i{font-size:calc(var(--w)*.28)}
/* тестето и козът са по-големи */
#game .deck{width:calc(var(--cw)*.88*1.4 + var(--cw)*.46); height:calc(var(--cw)*.88*1.4)}
#game .deck .card{--w:calc(var(--cw)*.88)}
#game .deck .trump{left:calc(var(--cw)*.7)}
#game .deck .count{left:calc(var(--cw)*.44 - 15px); top:calc(var(--cw)*.88*.7 - 15px)}
/* кои карти могат да се играят: светнати и леко повдигнати; останалите — притъмнени и снижени */
#game .hand .card{transition:translate .16s var(--pease, ease), scale .16s, filter .2s, box-shadow .2s}
#game .hand .card.playable{translate:0 -4px; box-shadow:inset 0 0 0 calc(var(--w)*.035) #fbf3dc, inset 0 0 0 calc(var(--w)*.045) rgba(122,84,36,.5), 0 0 0 2.5px var(--gold), 0 0 16px rgba(255,197,61,.45), 0 8px 16px var(--shade)}
#game .hand .card.dim{filter:brightness(.45) saturate(.3); translate:0 10px}
#game button.card.playable:hover,#game button.card.playable:focus-visible{translate:0 -20px}
/* докосване: картата се вдига ясно, преди да полети към масата */
#game button.card.playable:active{translate:0 -22px; scale:1.05}
@media (hover:none){ #game button.card.playable:hover{translate:0 -4px} }
/* нисък телефон в портрет: по-малки аватари и съобщение → повече място за картите */
@media (orientation:portrait) and (max-height:720px){
  #game>.oppseat{min-height:44px} #game .oppseat .ava{--s:40px}
  #game>.meseat{gap:4px 10px} #game .meseat .ava{--s:36px}
  #game>#msg{min-height:46px; padding:4px 12px}
  #game>#table{margin:6px 9px}
}