/* One table composition. Coordinates follow the 1024 x 1536 reference.
   The trump is on the near rail as requested; game data stays live. */
.game-screen .game-wrap:has(#reference-table){max-width:680px!important;background:#170d08;display:block}
#reference-table{--gold:#c5a15e;--cream:#f3dfad;--portrait:clamp(48px,9dvh,92px);position:relative!important;isolation:isolate;display:block!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;background:url('/assets/table-salon-v2.webp') center/100% 100% no-repeat!important;overflow:hidden;color:var(--cream)}
/* Carved rail, embroidered inlay, and center plaque. */
#reference-table>.table-title{position:absolute!important;inset:0 0 auto!important;height:7%;min-height:46px;display:flex;justify-content:center;align-items:start;margin:0;padding:0;border:0;border-bottom:3px ridge var(--gold);background:linear-gradient(100deg,#332011ed,#190e08ed,#392414ed);box-shadow:0 4px 12px #0008;z-index:10}
#reference-table>.table-title:after{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(45deg,#cba359 0 2px,#213a58 2px 6px,#892931 6px 10px,#e2c17e 10px 12px);border-block:1px solid #b4904a;z-index:-1}
#reference-table .table-title>div:first-child{position:relative;flex:0 0 62%;max-width:62%;width:62%;height:calc(100% + 4px);text-align:center;padding:3px 6px 5px;border:1px solid var(--gold);border-top:0;border-radius:0 0 22px 22px;background:linear-gradient(115deg,#352516,#100c08 50%,#312012);box-shadow:0 2px 0 #49301a,0 4px 0 #a78241}
#reference-table .table-title>div:first-child>b{display:block;font:700 clamp(21px,5.7vw,35px)/1 Georgia;letter-spacing:1px;white-space:nowrap;color:#e6be76;text-shadow:0 2px #000}
#reference-table .table-title>div:first-child>b:before,#reference-table .table-title>div:first-child>b:after{content:none}
#reference-table .table-title small{display:block;font:clamp(11px,2.7vw,16px)/1.2 Georgia;margin:2px 0 0;color:var(--cream)}
.grape-ornament{position:absolute;width:37px;height:46px;left:-30px;top:0;filter:drop-shadow(0 1px 1px #000)}
.grape-ornament:last-child{left:auto;right:-30px;transform:scaleX(-1)}
/* Seats around the far and side rails. */
#reference-table .table-arena{position:absolute;inset:8% 0 39%;display:block;height:auto;min-height:0;padding:0;overflow:visible;isolation:isolate}
#reference-table .table-arena:before,#reference-table .table-arena:after{display:none}
#reference-table .opponents{display:contents}
#reference-table .table-arena .opponent{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:start;width:23%;height:auto;min-height:0;max-height:none;margin:0;padding:0;gap:0;border:0;background:none;box-shadow:none;z-index:3}
#reference-table [data-seat-position=north]{left:50%;top:0;transform:translateX(-50%)}
#reference-table [data-seat-position=west]{left:1%;top:37%}
#reference-table [data-seat-position=east]{right:1%;top:37%}
#reference-table [data-seat-position=northwest]{left:15%;top:0}
#reference-table [data-seat-position=northeast]{right:15%;top:0}
#reference-table [data-seat-position=southwest]{left:1%;bottom:0}
#reference-table [data-seat-position=southeast]{right:1%;bottom:0}
#reference-table .table-arena .profile-picture{position:relative;display:block;width:var(--portrait);height:var(--portrait);flex:none;border:3px solid #cfac63;border-radius:50%;overflow:hidden;z-index:2;box-shadow:0 0 0 2px #463019,0 3px 8px #0009}
#reference-table .profile-picture img{width:100%;height:100%;object-fit:cover}
#reference-table .table-arena .seat-details{position:relative;display:block;flex:none;width:100%;min-width:0;margin-top:-2px;padding:5px 3px 7px;border:1px solid var(--gold);border-radius:10px;text-align:center;color:var(--cream);background:linear-gradient(120deg,#21180f,#0d0d09 65%,#23180e);box-shadow:0 0 0 2px #342411,0 0 0 3px #a78240;z-index:3}
#reference-table .seat-details strong{display:block;font:700 clamp(13px,3.9vw,22px)/1.1 Georgia;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#reference-table .seat-stats{display:block!important;font:clamp(9px,2.4vw,14px)/1.3 Georgia!important;white-space:nowrap;margin-top:3px}
#reference-table .seat-score{display:table;position:relative;margin:4px auto -18px;padding:1px 7px;border:1px solid var(--gold);border-radius:12px;background:#110f09;color:#eac983;font:13px/17px Georgia}
#reference-table .seat-score small{font-size:7px}
#reference-table .seat-number{position:absolute;top:1px;left:4px;width:15px;height:15px;font-size:10px;z-index:5}
#reference-table .seat-roles{position:absolute;right:4px;top:-10px;font:8px/10px Arial;background:#1d1b10;border-radius:3px;padding:0 2px}
#reference-table .bid-progress{position:absolute;right:1px;bottom:-10px;font:8px/10px Arial;z-index:5}
#reference-table .active-turn>.profile-picture{border-color:#ffe194;box-shadow:0 0 0 2px #86683c,0 0 12px #eac86b88}
#reference-table .active-turn>.seat-details{border-color:#ffe194}
.seat-card-fan{position:absolute;top:17px;left:50%;width:0;height:58px;z-index:0;pointer-events:none}
.seat-card-fan i{position:absolute;left:-20px;width:40px;height:60px;transform-origin:50% 100%;transform:translateX(var(--fan-offset)) rotate(var(--fan-angle));border:2px solid #d9c395;border-radius:4px;background:repeating-conic-gradient(from 45deg,#a9915755 0 25%,transparent 0 50%) 0 0/8px 8px,#163458;box-shadow:inset 0 0 0 3px #b59a64,0 2px 4px #0008}
.seat-card-fan i:after{content:'❦';position:absolute;inset:7px;border:1px solid #d2b77b;border-radius:40%;display:grid;place-items:center;font:22px Georgia;color:#d2b77b}
/* Shared cards retain their sequential play order. */
#reference-table .felt-table{position:absolute;left:29%;top:35%;width:42%;height:64%;display:flex;align-items:center;justify-content:center;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;overflow:visible}
#reference-table.bidding-layout .felt-table{visibility:hidden}
#reference-table .trick-cards{position:relative;display:block;max-height:none;overflow:visible}
#reference-table .played-card{position:absolute;width:var(--trick-size);margin:0;transform:none}
#reference-table .played-card .playing-card{width:var(--trick-size);height:calc(var(--trick-size)*1.5);min-width:0}
#reference-table .trump-reason{display:none}
/* Broad fan occupies the lower third during bidding and play. */
#reference-table .hand-panel{position:absolute;inset:60% 1% 13%;display:flex;flex-direction:column;gap:5px;min-height:0;padding:0;margin:0;background:none;border:0;overflow:visible}
#reference-table .hand-heading{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 33px;width:83%;height:33px;min-height:33px;margin:0 auto;padding:4px 8px;border:1px solid var(--gold);border-radius:11px;background:linear-gradient(110deg,#24180e,#100e09);box-shadow:0 2px 0 #564020,0 4px 8px #0006}
#reference-table .hand-heading:before,#reference-table .hand-heading:after{content:'❧';color:#bc924a;font:17px Georgia;margin:0 7px}
#reference-table .turn-summary{font:700 clamp(11px,3.3vw,19px)/1.1 Georgia;text-align:center;color:var(--cream)}
#reference-table .hand-cards{position:relative;display:block;flex:1;min-height:0;width:100%;overflow:visible}
#reference-table .hand-cards>.arrange-card{position:absolute;width:var(--hand-card-width);height:calc(var(--hand-card-width)*1.5)}
#reference-table .hand-cards>.arrange-card>.playing-card{width:100%;height:100%;min-width:0;min-height:0}
#reference-table .hand-instruction,#reference-table .arrange-hint,#reference-table .play-guidance,#reference-table .arrange-status{display:none}
#reference-table .bid-picker{flex:none;padding:3px;background:#20180ee8;border:1px solid #9b783f;border-radius:8px}
#reference-table .bid-picker-label{display:none}
#reference-table .bid-options{display:flex;gap:3px}
#reference-table .bid-options button{flex:1;min-height:30px;padding:4px 0;border:1px solid #af8b4b;border-radius:5px;background:linear-gradient(#edd399,#cba45a);color:#281d10;font-size:12px}
#reference-table .bid-panel.waiting-line{flex:none;min-height:18px;padding:2px;font:10px Georgia}
/* Near rail: portrait, engraved nameplate and embroidered trump pennant. */
#reference-table>.opponent.self-seat{position:absolute!important;inset:auto 24% 3% 9%!important;width:auto!important;height:9%!important;min-height:52px!important;max-width:none!important;margin:0;padding:7px 12px 5px 65px!important;display:flex!important;align-items:center;justify-content:center;border:2px solid var(--gold)!important;border-radius:12px 22px 22px 12px!important;background:linear-gradient(110deg,#2d2012,#100d08)!important;box-shadow:inset 0 0 0 3px #96713a44,0 4px 9px #0009!important}
#reference-table>.self-seat>.profile-picture{position:absolute;left:-18px;top:50%;transform:translateY(-50%);width:72px;height:86px;flex:none;border:3px solid var(--gold);border-radius:50%;overflow:visible;box-shadow:0 0 0 3px #362410,0 0 0 4px #ac8541;z-index:2}
#reference-table>.self-seat>.profile-picture img{border-radius:50%}
#reference-table>.self-seat>.profile-picture:after{content:'';position:absolute;bottom:-14px;left:30%;right:30%;height:19px;background:linear-gradient(90deg,#214b89 33%,#dbb645 33% 66%,#a72e32 66%);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%);z-index:-1}
#reference-table>.self-seat>.seat-details{display:block;width:100%;margin:0;padding:0;border:0;background:none;box-shadow:none;text-align:center}
#reference-table>.self-seat strong{font-size:clamp(11px,3vw,17px);text-transform:uppercase;letter-spacing:.5px;padding-bottom:4px;border-bottom:1px solid #a27c3a}
#reference-table>.self-seat .seat-score{display:inline;background:none;border:0;font-size:11px;margin:0;padding:0}
#reference-table>.self-seat .seat-stats{font-size:11px!important}
#reference-table>.bottom-trump{position:absolute;inset:auto 2% 1.5% auto;display:block;width:19%;max-width:98px;height:13%;min-height:85px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;z-index:5}
.trump-pennant{display:none}
#reference-table>.bottom-trump .trump-pennant{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 3px #0009)}
#reference-table>.bottom-trump>div{display:none}
#reference-table .floating-game-nav button{border-color:var(--gold);background:linear-gradient(120deg,#45321b,#17120b);color:#e8c783}
/* Card faces share one bounded artwork area. */
.playing-card:has(.number-pips) .card-center{position:absolute!important;inset:15% 20%!important;display:block!important;background:none!important}
.number-pips{width:100%;height:100%;overflow:visible;fill:currentColor;font:27px Georgia}
.playing-card.ace-card{overflow:hidden;container-type:normal}
.playing-card.ace-card .card-center{inset:12% 17%!important;display:block!important;overflow:hidden;background:none;border:0}
.ace-artwork{width:100%;height:100%;display:block}
#reference-table[data-players="6"],#reference-table[data-players="7"]{--portrait:clamp(35px,6dvh,58px)}
#reference-table[data-players="7"] [data-seat-position=west],#reference-table[data-players="7"] [data-seat-position=east]{top:33%}
@media(orientation:landscape){.game-screen .game-wrap:has(#reference-table){max-width:calc(100dvh * .72)!important}#reference-table{--portrait:7dvh}#reference-table .table-title>div:first-child>b{font-size:4dvh}#reference-table .table-title small{font-size:2dvh}#reference-table .seat-details strong{font-size:2.2dvh}#reference-table .seat-stats{font-size:1.7dvh!important}#reference-table .hand-heading{flex-basis:24px;min-height:24px;height:24px}#reference-table>.self-seat>.profile-picture{width:8dvh;height:10dvh}#reference-table>.self-seat{padding-left:6dvh!important;min-height:0!important}#reference-table>.self-seat strong{font-size:2dvh}#reference-table>.self-seat .seat-stats{font-size:1.6dvh!important}}

/* Corner indices and seat markers remain outside the artwork. */
#reference-table .playing-card:has(.number-pips) .card-center:before,#reference-table .playing-card:has(.number-pips) .card-center:after{content:none}
#reference-table .hand-panel .card-corner{font-size:calc(var(--hand-card-width)*.11)!important;line-height:1;left:5px;top:5px}
#reference-table .hand-panel .card-corner b{font-size:calc(var(--hand-card-width)*.18)!important;line-height:1}
#reference-table .hand-panel .card-corner.bottom{right:5px;bottom:5px}
#reference-table>.self-seat>.seat-number{left:auto;right:-6px;top:-7px;width:16px;height:16px;font-size:10px;z-index:5}
#reference-table>.self-seat .seat-roles{right:12px;top:-12px}

#reference-table>.self-seat>.seat-details{min-width:0;max-width:100%;align-self:center}
#reference-table>.self-seat .seat-details strong{white-space:normal;overflow-wrap:anywhere;line-height:1.15;max-width:100%;padding:2px 0 5px}
#reference-table>.self-seat .seat-roles{top:-15px;right:20px}
#reference-table .profile-picture,#reference-table .profile-picture img,#reference-table .seat-details{animation:none!important;transition:none!important}