/* Reference surface: fixed regions, folded melds and in-place inspection. */
#match.stbl-layout .meld-line .card{left:var(--card-x)!important;transition:left .16s ease;max-height:none}
#match.stbl-layout .meld-line{max-height:none}
#match.stbl-layout .canasta-ribbon{width:var(--meld-span)!important;top:calc(var(--card-h)*.72)!important;height:calc(var(--card-h)*.2)!important;line-height:calc(var(--card-h)*.2)!important;font-size:clamp(10px,calc(var(--card-h)*.15),18px)!important;letter-spacing:.6px;box-shadow:0 2px 2px #0005}
#match.stbl-layout .meld-zone h3{font-size:17px!important;line-height:22px!important;background:#082421e8;border:1px solid #b9a46b80;border-radius:5px;padding:0 12px;left:50%!important;transform:translateX(-50%)!important;white-space:nowrap}
#match.stbl-layout .meld-line .card-index{left:5%!important;top:3%!important}
#match.stbl-layout .meld-line .card-pip{font-size:calc(var(--card-h)*.48)!important}
#match.stbl-layout .pile.action-available:before{content:'';display:block!important;position:absolute;z-index:9;width:23px;height:17px;left:22px;top:-20px;background:#f4cb4f;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 1px #000);pointer-events:none}
#match.stbl-layout #center{--pile-h:92px;--dead-w:63px;grid-template-columns:70px minmax(0,1fr) 94px!important;gap:14px!important}
#match.stbl-layout .felt .table-arena{grid-template-rows:var(--player-rail) minmax(0,1fr) 110px minmax(0,1fr)!important}
#match.stbl-layout #stockPile .deck-back,#match.stbl-layout #discardPile .card,#match.stbl-layout .empty-pile{width:63px!important;height:92px!important}
#match.stbl-layout #stockPile strong{top:70px!important;font-size:15px}
#match.stbl-layout #center #discardPile{max-width:none!important;width:100%;border:1px solid #c8d9ca60!important;border-radius:5px;height:94px!important;position:relative}
#match.stbl-layout #discardPile small{position:absolute;right:8px;bottom:5px;font-size:12px;opacity:.7}
#match.stbl-layout #discardPile .card-index b{font-size:27px!important}
#match.stbl-layout #discardPile .card-index i{font-size:15px!important}
#match.stbl-layout #discardPile .card-pip{font-size:40px!important}
#match.stbl-layout #center .discard-fan{overflow:visible!important}
#match.stbl-layout .discard-fan:before,#match.stbl-layout .discard-fan:after{height:90px;width:61px}
#match.stbl-layout #stockPile .deck-back{padding:0!important;font-size:38px!important}
#match.stbl-layout .seat.active-seat .turn-progress{height:7px!important;border-radius:2px}
#match.stbl-layout .turn-progress i{background:#37c76c}
#match.stbl-layout .urgent .turn-progress i{background:#efaa43}
#match.stbl-layout .active-seat:after{display:none!important}
#match.stbl-layout .court-art{position:absolute;width:75%;height:77%;right:0;bottom:0;object-fit:contain;pointer-events:none}
#match.stbl-layout .court-card .card-pip{display:none}
@media(max-width:700px) and (orientation:portrait){
 body.playing:has(.stbl-layout) main{padding:2px!important}
 #match.stbl-layout{--player-rail:65px;--player-width:54px;--player-height:64px;--portrait-size:40px;grid-template-rows:25px 19px minmax(0,1fr)!important;gap:2px}
 #match.stbl-layout .felt{padding:4px!important;border-radius:9px;--hand-space:104px;gap:8px}
 #match.stbl-layout .felt .table-arena{padding:0!important;grid-template-rows:65px minmax(0,1fr) 109px minmax(0,1fr)!important;gap:5px!important}
 #match.stbl-layout .hand-dock{padding:0!important}
 #match.stbl-layout .hand-heading{left:auto;right:0;top:-37px!important;flex-direction:row;width:74px;height:32px!important;gap:6px}
 #match.stbl-layout #opponents .seat-self,#match.stbl-layout #opponents .seat-self.seat-expanded{top:calc(100% - 61px)!important;left:2px!important}
 #match.stbl-layout .meld-own{padding-bottom:30px!important}
 #match.stbl-layout .meld-own h3{top:auto!important;bottom:0;z-index:9}
 #match.stbl-layout #opponents .seat-self .turn-progress{left:-2px!important;bottom:-7px!important;width:calc(100vw - 16px)!important;height:6px!important}
 #match.stbl-layout #center{grid-template-columns:66px minmax(0,1fr) 65px!important;gap:7px!important;--dead-w:58px}
 #match.stbl-layout #center>.dead-piles{width:65px!important}
 #match.stbl-layout .meld-zone h3{font-size:16px!important}
 #match.stbl-layout.four-seats #opponents .seat-west{left:-35px!important;top:45%!important}
 #match.stbl-layout.four-seats #opponents .seat-east{right:-35px!important;top:45%!important}
 #match.stbl-layout.four-seats #opponents .seat-west:is(.active-seat,.seat-expanded){left:0!important}
 #match.stbl-layout.four-seats #opponents .seat-east:is(.active-seat,.seat-expanded){right:0!important}
 #match.stbl-layout.four-seats #opponents .seat-west .mini-hand,#match.stbl-layout.four-seats #opponents .seat-east .mini-hand{display:none!important}
 #match.stbl-layout.hand-expanded .felt{--hand-space:clamp(165px,30dvh,260px)}
}
@media(max-height:540px) and (orientation:landscape){
 #match.stbl-layout{grid-template-rows:22px minmax(0,1fr)!important;gap:2px}
 #match.stbl-layout>#score,#match.stbl-layout>.row:has(#score){display:none!important}
 #match.stbl-layout .felt{grid-row:2!important;padding:4px!important;--hand-space:82px;gap:5px}
 #match.stbl-layout .felt .table-arena{padding:0!important;grid-template-columns:110px minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:40px minmax(0,1fr)!important;gap:5px!important}
 #match.stbl-layout .meld-own{grid-column:2!important;grid-row:2!important}
 #match.stbl-layout .meld-other{grid-column:3!important;grid-row:2!important}
 #match.stbl-layout #center{grid-column:1!important;grid-row:2!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important;height:100%!important;--pile-h:61px;--dead-w:42px;gap:4px!important}
 #match.stbl-layout #stockPile .deck-back,#match.stbl-layout #discardPile .card,#match.stbl-layout .empty-pile{width:42px!important;height:61px!important}
 #match.stbl-layout #center #discardPile{grid-row:2;grid-column:1/3;height:63px!important}
 #match.stbl-layout #stockPile strong{top:42px!important;font-size:12px}
 #match.stbl-layout #center>.dead-piles{width:48px!important;grid-column:2;grid-row:1}
 #match.stbl-layout #discardPile .card-index b{font-size:18px!important}
 #match.stbl-layout #discardPile .card-index i{font-size:11px!important}
 #match.stbl-layout #discardPile .card-pip{font-size:27px!important}
 #match.stbl-layout .discard-fan:before,#match.stbl-layout .discard-fan:after{width:40px;height:59px}
 #match.stbl-layout .hand-dock{padding-left:109px!important}
 #match.stbl-layout .meld-zone h3{font-size:14px!important}
 #match.stbl-layout .pile.action-available:before{top:-8px;left:27px;width:18px;height:12px}
 #match.stbl-layout.hand-expanded .felt{--hand-space:135px}
}
#match.stbl-layout #center #discardPile{width:100%!important;justify-self:stretch!important;min-width:0!important}
#match.stbl-layout #center #discardPile .discard-fan{width:100%!important}
#match.stbl-layout #center{height:110px!important}
#match.stbl-layout #center #discardPile small{white-space:nowrap}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout #opponents .seat-self:is(.seat-expanded,:not(.seat-expanded)){top:calc(100% - 62px)!important;left:2px!important}
 #match.stbl-layout #center>.dead-piles .mini-back{width:52px!important;height:76px!important}
 #match.stbl-layout #center>.dead-piles{height:92px!important}
 #match.stbl-layout #opponents .seat-self .turn-progress{display:none!important}
 #match.stbl-layout .hand-dock:has(.hand-turn-bar) .hand-turn-bar{display:block;position:absolute;left:0;top:-6px;width:100%;height:6px;background:#061c17;z-index:10}
 #match.stbl-layout .hand-turn-bar i{display:block;width:var(--remaining);height:100%;background:#35c569;transition:width .25s linear}
 #match.stbl-layout .hand-turn-bar.urgent i{background:#eca344}
}
.hand-turn-bar{display:none}
@media(max-height:540px) and (orientation:landscape){#match.stbl-layout #center{height:100%!important}}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout #center{grid-template-columns:66px minmax(0,1fr) 82px!important}
 #match.stbl-layout #center>.dead-piles{width:82px!important}
 #match.stbl-layout .meld-own h3{max-width:150px}
}
#match.stbl-layout.four-seats #opponents .seat-north{left:50%!important;transform:translateX(-50%)!important}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout.four-seats #opponents .seat-west{left:-20px!important}
 #match.stbl-layout.four-seats #opponents .seat-east{right:-20px!important}
 #match.stbl-layout.four-seats #opponents .seat-west:is(.active-seat,.seat-expanded){left:0!important}
 #match.stbl-layout.four-seats #opponents .seat-east:is(.active-seat,.seat-expanded){right:0!important}
}
@media(max-height:540px) and (orientation:landscape){
 #match.stbl-layout.four-seats .felt .table-arena{grid-template-columns:54px 96px minmax(0,1fr) minmax(0,1fr) 54px!important;gap:4px!important}
 #match.stbl-layout.four-seats #center{grid-column:2!important}
 #match.stbl-layout.four-seats .meld-own{grid-column:3!important}
 #match.stbl-layout.four-seats .meld-other{grid-column:4!important}
 #match.stbl-layout.four-seats #opponents .seat-north:is(.seat-expanded,:not(.seat-expanded)){height:39px!important;min-height:39px!important;width:92px!important;flex-direction:row!important;gap:4px;top:0!important;left:calc(50% - 46px)!important;transform:none!important}
 #match.stbl-layout.four-seats #opponents .seat-north img{width:30px!important;height:30px!important}
 #match.stbl-layout.four-seats #opponents .seat-north .seat-count{display:none!important}
 #match.stbl-layout.four-seats #opponents .seat-west .mini-hand,#match.stbl-layout.four-seats #opponents .seat-east .mini-hand{display:none!important}
 #match.stbl-layout #center #discardPile small{font-size:9px;bottom:3px;right:3px}
 #match.stbl-layout #center #discardPile{height:78px!important}
}
@media(min-height:541px) and (min-width:701px){
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-hand{left:22px;top:calc(100% + 8px)!important;width:34px;height:130px}
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-back{left:0!important;top:calc(var(--back-i)*min(12px,84px / max(1,var(--back-count) - 1)))!important}
}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-hand{display:block!important;left:20px;top:calc(100% + 5px)!important;width:24px;height:100px}
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-back{left:0!important;top:calc(var(--back-i)*min(9px,65px / max(1,var(--back-count) - 1)))!important}
 #match.stbl-layout.four-seats #opponents .seat-east .mini-hand{left:5px}
}
/* One card geometry for the hand, buying piles and concealed opponent hands. */
#match.stbl-layout{--surface-card-h:115px;--surface-card-w:79.35px}
#match.stbl-layout .felt .table-arena{grid-template-rows:max(var(--player-rail),calc(var(--surface-card-h) + 8px)) minmax(0,1fr) calc(var(--surface-card-h) + 24px) minmax(0,1fr)!important}
#match.stbl-layout #center{--pile-h:var(--surface-card-h);--dead-w:var(--surface-card-w);height:calc(var(--surface-card-h) + 24px)!important;grid-template-columns:calc(var(--surface-card-w) + 8px) minmax(0,1fr) calc(var(--surface-card-h) + 4px)!important}
#match.stbl-layout #stockPile .deck-back,#match.stbl-layout #discardPile .card,#match.stbl-layout .empty-pile{width:var(--surface-card-w)!important;height:var(--surface-card-h)!important}
#match.stbl-layout #center #discardPile{height:calc(var(--surface-card-h) + 2px)!important}
#match.stbl-layout #stockPile strong{top:calc(var(--surface-card-h) - 22px)!important}
#match.stbl-layout .discard-fan:before,#match.stbl-layout .discard-fan:after{height:calc(var(--surface-card-h) - 2px);width:calc(var(--surface-card-w) - 2px)}
#match.stbl-layout #center>.dead-piles{width:calc(var(--surface-card-h) + 4px)!important}
#match.stbl-layout #center>.dead-piles .mini-back{width:var(--surface-card-w)!important;height:var(--surface-card-h)!important}
#match.stbl-layout #opponents .seat .mini-hand .mini-back{width:var(--surface-card-w)!important;height:var(--surface-card-h)!important;font-size:32px;left:calc(var(--back-i) * min(17px,(100% - var(--surface-card-w)) / max(1,var(--back-count) - 1)))}
#match.stbl-layout #opponents .seat:not(.seat-self) .mini-hand,#match.stbl-layout #opponents .seat:not(.seat-self).active-seat .mini-hand{top:0!important;height:var(--surface-card-h);width:clamp(120px,22vw,300px)}
#match.stbl-layout .meld-zone.inspecting .meld-line:not(.meld-expanded){opacity:1!important;filter:none!important}
#match.stbl-layout .card{isolation:isolate;overflow:hidden}
#match.stbl-layout .meld-line .card{z-index:var(--card-i)}
#match.stbl-layout .canasta-ribbon{z-index:50}
#match.stbl-layout .court-art,#match.stbl-layout .joker-art{left:25%!important;right:0!important;top:0!important;bottom:0!important;width:75%!important;height:100%!important;object-fit:cover!important;object-position:52% 24%;filter:none!important}
#match.stbl-layout .court-card .card-index,#match.stbl-layout .joker-card .card-index{left:3%!important;top:3%!important;z-index:1}
#match.stbl-layout .joker-card .card-index b{font-size:calc(var(--card-h,var(--hand-h,100px))*.2)!important}
#match.stbl-layout .joker-word{display:none}
#match.stbl-layout .court-card .bottom{display:none}
@media(min-height:541px) and (min-width:701px){
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-hand{left:0!important;top:calc(100% + 8px)!important;width:var(--surface-card-w)!important}
}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout #center{grid-template-columns:calc(var(--surface-card-w) + 6px) minmax(0,1fr) calc(var(--surface-card-h) + 4px)!important;gap:5px!important}
 #match.stbl-layout #center #discardPile small{font-size:10px;right:4px;bottom:3px}
 #match.stbl-layout #opponents .seat-north .mini-hand{width:140px;left:calc(100% + 6px)}
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-hand{top:calc(100% + 5px)!important;width:var(--surface-card-w)!important}
 #match.stbl-layout.four-seats #opponents .seat-west .mini-hand{left:-30px!important}
 #match.stbl-layout.four-seats #opponents .seat-east .mini-hand{left:35px!important}
}
@media(max-height:540px) and (orientation:landscape){
 #match.stbl-layout .felt .table-arena{grid-template-rows:calc(var(--surface-card-h) + 4px) minmax(0,1fr)!important}
 #match.stbl-layout #center{height:100%!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important}
 #match.stbl-layout #center>.dead-piles{width:48px!important}
 #match.stbl-layout #center #discardPile{height:calc(var(--surface-card-h) + 17px)!important}
 #match.stbl-layout #opponents .seat-north .mini-hand{width:145px}
}
#match.stbl-layout .joker-card .card-index b{writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(7px,calc(var(--card-h,var(--hand-h,100px))*.095),12px)!important;letter-spacing:-1px;line-height:1.2}
#match.stbl-layout .joker-card .card-index i{display:none}
@media(min-width:701px) and (min-height:541px){
 #match.stbl-layout:not(.hand-expanded) .felt{--hand-space:calc(var(--surface-card-h) + 6px)}
 #match.stbl-layout .meld-own h3{top:4px!important;bottom:auto!important}
}
@media(max-height:540px) and (orientation:landscape){#match.stbl-layout .meld-own h3{top:4px!important;bottom:auto!important}}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout.four-seats #opponents .seat.seat-north .mini-hand{left:calc(100% + 6px)!important;width:140px!important}
 #match.stbl-layout.four-seats #opponents .seat.seat-west .mini-hand{left:-52px!important}
}
@media(max-height:540px) and (orientation:landscape){
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-hand{display:block!important;left:5px!important;top:calc(100% + 4px)!important;width:var(--surface-card-w)!important;height:calc(var(--surface-card-h) + 40px)}
 #match.stbl-layout.four-seats #opponents .seat:is(.seat-west,.seat-east) .mini-hand .mini-back{left:0!important;top:calc(var(--back-i)*min(4px,40px / max(1,var(--back-count) - 1)))!important}
}
/* The upper player shares the local player's left edge; match reference sits below the discard strip. */
#match.stbl-layout:is(.four-seats,:not(.four-seats)) #opponents .seat.seat-north:is(.seat-expanded,:not(.seat-expanded)){left:8px!important;right:auto!important;transform:none!important}
#match.stbl-layout #center .match-reference{position:absolute!important;left:0!important;right:0!important;top:calc(var(--surface-card-h) + 7px)!important;bottom:auto!important;width:100%!important;max-width:none!important;transform:none!important;justify-content:center!important;text-align:center;font-size:8px;line-height:11px;opacity:.6;white-space:nowrap;pointer-events:none}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout.four-seats #opponents .seat.seat-north:is(.seat-expanded,:not(.seat-expanded)){left:2px!important}
 #match.stbl-layout #center .match-reference{font-size:7px}
}
@media(max-height:540px) and (orientation:landscape){
 #match.stbl-layout #center .match-reference{top:auto!important;bottom:0!important;font-size:6px;line-height:7px;white-space:normal;overflow-wrap:anywhere}
}

/* Discard faces share the hand's proportions, including the narrow Joker index. */
#match.stbl-layout #discardPile .card{--card-h:var(--surface-card-h);--hand-h:var(--surface-card-h);border-radius:5px!important;z-index:1}
#match.stbl-layout #discardPile .card:last-child{z-index:2}
#match.stbl-layout #discardPile .card-index:not(.bottom){left:7%!important;top:5%!important;align-items:center}
#match.stbl-layout #discardPile .card-index b{font-size:calc(var(--surface-card-h)*.28)!important}
#match.stbl-layout #discardPile .card-index i{font-size:calc(var(--surface-card-h)*.17)!important}
#match.stbl-layout #discardPile .card-pip{left:36%!important;top:42%!important;right:auto!important;bottom:auto!important;font-size:calc(var(--surface-card-h)*.38)!important}
#match.stbl-layout #discardPile .court-card .card-index,#match.stbl-layout #discardPile .joker-card .card-index{left:3%!important;top:3%!important}
#match.stbl-layout #discardPile .joker-card .card-index b{font-size:clamp(7px,calc(var(--surface-card-h)*.095),12px)!important;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-1px;line-height:1.2!important}
#match.stbl-layout #discardPile .joker-card .card-index i{display:none}

/* Selection lifts only the chosen cards; the table remains visually stable. */
#match.stbl-layout #hand .card{translate:0 0;transition:translate .15s ease,box-shadow .15s}
#match.stbl-layout #hand .card.selected{translate:0 calc(var(--hand-h)*-.16);background:linear-gradient(145deg,#fffefa,#eee9dc)!important;filter:none;box-shadow:inset 0 0 0 2px #f4c954,0 4px 8px #0005!important}
#match.stbl-layout.buraco-table .meld-own.drop-ready{border-color:#e6d6a51a!important;background:#041d1a25;box-shadow:none}
@media(prefers-reduced-motion:reduce){#match.stbl-layout #hand .card{transition:none}}
#match.stbl-layout #hand .card.selected{z-index:100!important}

/* Reserve lift space even with no selection; controls never change the layout. */
#match.stbl-layout:not(.hand-expanded) .felt{--hand-space:calc(var(--surface-card-h)*1.16 + 12px)}
#match.stbl-layout .hand-heading{display:grid!important;grid-template-columns:repeat(2,30px);grid-auto-rows:30px;width:64px!important;gap:4px!important;height:auto!important}
#match.stbl-layout .hand-heading :is(.sort-cycle,.expand-hand,.clear-cards){position:relative!important;inset:auto!important;transform:none!important;display:grid!important;place-items:center;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;margin:0!important;font-size:20px!important;line-height:1!important;border-radius:7px!important;overflow:visible}
#match.stbl-layout .hand-heading .clear-cards:disabled{opacity:.35}
#match.stbl-layout .expand-hand:after{left:auto;right:0;top:auto;bottom:calc(100% + 6px);transform:none}
#match.stbl-layout .hand-dock{padding-left:178px!important}
#match.stbl-layout #hand{overflow-anchor:none;touch-action:manipulation}
#match.stbl-layout #hand .card{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(max-width:700px) and (orientation:portrait){
 #match.stbl-layout .hand-dock{padding-left:0!important}
 #match.stbl-layout .hand-heading{grid-template-columns:repeat(3,28px);grid-auto-rows:28px;width:92px!important;right:2px;left:auto;top:-35px!important}
 #match.stbl-layout .hand-heading :is(.sort-cycle,.expand-hand,.clear-cards){width:28px!important;min-width:28px!important;max-width:28px!important;height:28px!important;min-height:28px!important;font-size:18px!important}
}
@media(max-height:540px) and (orientation:landscape){#match.stbl-layout .hand-dock{padding-left:140px!important}}