/* Shared-table presentation. Chicago remains a point-scoring trick game. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');
body{background:linear-gradient(#0d192be0,#0d192bf5),url('assets/room.webp') center/cover fixed}
header{max-width:none;height:64px;padding:0 var(--s6);border-top:4px solid var(--red);background:#0d192bf5}
.brand img{display:block;object-fit:contain;max-width:100%}
main{max-width:1040px;padding:var(--s4) var(--s6)}
h1,h2,h3{font-family:'Barlow Condensed','Libre Franklin',sans-serif;letter-spacing:0}
h1{font-size:32px}.intro{margin-bottom:var(--s2)}.intro p{margin:var(--s1) 0}
.intro>div>p:last-child{font-size:var(--text-sm)}
.primary{background:var(--red);color:#fff;border-color:var(--red)}
.roundbar{font-size:var(--text-xs);margin:var(--s3) 0!important}
#table-stage{position:relative;isolation:isolate;height:472px}
.playing .felt{position:absolute;inset:44px 42px 74px;min-height:0;padding:0;border:12px solid #393332;border-radius:48%;background:radial-gradient(ellipse at 50% 30%,#20584c,#103e35);box-shadow:0 0 0 2px #a7865855,inset 0 0 0 2px #a7865840,0 14px 30px #060e1b70;z-index:-1}
.felt:after{content:'';position:absolute;inset:var(--s2);border:1px solid #d5c09430;border-radius:48%}
#opponents{position:absolute;inset:0;pointer-events:none}
.rail-seat{position:absolute;transform:translateX(-50%);width:108px;text-align:center;font-size:var(--text-xs)}
.position-1{left:12%;top:49%}.position-2{left:19%;top:10%}.position-3{left:50%;top:0}.position-4{left:81%;top:10%}.position-5{left:88%;top:49%}
.seat-portrait{display:block;width:64px;height:64px;object-fit:cover;border:2px solid #cab783;border-radius:50%;background:#071e49;margin:0 auto -5px;position:relative;z-index:1}
.nameplate{position:relative;z-index:2;background:#172b2b;border:1px solid #53644b;border-radius:6px;padding:var(--s1) var(--s2);color:#f9f3e7;line-height:1.3;box-shadow:0 3px 10px #0004}
.nameplate strong,.nameplate b{display:block;font-size:var(--text-sm)}.nameplate b{font-variant-numeric:tabular-nums}.nameplate small{font-size:var(--text-xs);font-weight:400}
.dealer{position:absolute;right:-8px;top:var(--s2);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:12px;font-weight:700;color:#1f2d23;background:#eee9d7;box-shadow:0 1px 5px #0008}
.rail-seat.active .nameplate,.rail-seat.active .seat-portrait{border-color:#dec58d;box-shadow:0 0 0 2px #dec58d38}
.rail-seat.out{opacity:.55}.rail-seat>small{display:block;line-height:1.3;font-size:var(--text-xs);color:#d1dccc;text-shadow:0 1px 3px #000}
.qualification{margin-top:var(--s1)}.seat-state{color:#b1c0d0!important}
.table-center{position:absolute;top:31%;left:50%;transform:translateX(-50%);width:56%;text-align:center;color:#f9f3e7}
#phase{font-size:var(--text-xs);letter-spacing:.06em;margin:0 0 var(--s1);color:#dec58d}
#table-title{font-size:24px;line-height:1.1}
#table-cards{margin-top:var(--s3);flex-wrap:nowrap;gap:6px}
#table-cards .card{width:48px;height:67px}
.played-label{color:#d1dccc;line-height:1.3}
.card.playing-card{position:relative;padding:0;flex-shrink:0}
.card.playing-card .card-readout{align-self:auto;font-size:inherit}.card.playing-card .card-emblem{font-size:74cqw}
.your-seat{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:410px;max-width:100%}
.playing .your-row{justify-content:center;gap:var(--s4);margin:0 0 var(--s2);font-size:var(--text-sm);color:#f9f3e7}
.your-row h2{font-family:'DM Sans',sans-serif;font-size:var(--text-sm)}
#your-dealer{font-size:var(--text-xs);font-weight:400;color:#dec58d}
.hand{gap:6px;flex-wrap:nowrap;min-height:82px}.hand .card{width:60px;height:82px}
#your-qualification{text-align:center;font-size:var(--text-xs);color:var(--muted);margin:var(--s3) 0 0;line-height:1.4}
.table-message{text-align:center;max-width:660px;margin:var(--s2) auto;color:var(--muted)}
#table-detail{font-size:var(--text-sm);margin:0;line-height:1.4}#last-trick{font-size:var(--text-xs);margin:var(--s1) 0 0;line-height:1.4}#last-trick:empty{display:none}
.action-panel{max-width:660px;margin:var(--s3) auto;background:#101d30e8;border:1px solid var(--line);border-radius:8px;padding:var(--s3)}
.playing #hint{margin:0 0 var(--s2);min-height:0;color:#d1dccc}#hint:empty{display:none}
#actions{min-height:0}#actions:empty{display:none}#actions button{min-height:44px}
.tools{margin:var(--s3) 0}
.panel{padding:var(--s4);margin:var(--s3) 0}details.panel,.recovery{padding:var(--s2) var(--s4)}summary{min-height:44px;display:flex;align-items:center;gap:var(--s2);font-size:var(--text-sm)}summary:before{content:'›'}details[open]>summary:before{transform:rotate(90deg)}
#scoreboard{margin:var(--s3) 0 0!important}
#account-tools{display:flex;align-items:center;justify-content:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--text-sm)}
#save-status{font-size:var(--text-xs);color:var(--muted);text-align:center;margin:var(--s2) 0}
footer{margin-top:var(--s4)}
[data-theme=light] body{background:linear-gradient(#f4f0e7f2,#f4f0e7fa),url('assets/room.webp') center/cover fixed}
[data-theme=light] .action-panel{background:var(--panel)}
[data-theme=light] .playing #hint{color:var(--muted)}
@media(max-width:600px){
 header{height:58px;padding:0 var(--s3)}header>div{gap:var(--s2)}
 .brand img{width:146px;height:46px}header button{font-size:12px;padding:var(--s2)}
 main{padding:var(--s3) var(--s2)}.playing main{padding-top:var(--s3)}
 .intro{padding:0 var(--s1);align-items:center}.intro button{max-width:none;font-size:12px;min-width:104px}
 h1{font-size:28px}.roundbar{gap:var(--s2);font-size:12px;line-height:1.4}.roundbar #profile{max-width:95px;text-align:right}
 #table-stage{height:448px}
 .playing .felt{inset:42px 16px 76px;border-width:8px;border-radius:46%}
 .rail-seat{width:76px}.seat-portrait{width:46px;height:46px}
 .nameplate{padding:var(--s1)}.nameplate strong,.nameplate b,.nameplate small{font-size:12px}
 .position-1{left:12%;top:50%}.position-5{left:88%;top:50%}.position-2{left:14%;top:10%}.position-4{left:86%;top:10%}
 .rail-seat>small{font-size:12px}
 .table-center{top:28%;width:58%}#table-title{font-size:22px}#phase{font-size:12px}
 #table-cards{margin-top:var(--s2);display:grid;grid-template-columns:repeat(3,max-content);justify-content:center;gap:var(--s2) var(--s1)}
 #table-stage[data-phase=offer] #table-cards{display:flex}
 #table-cards .card{width:36px;height:50px}
 #table-stage[data-phase=offer] #table-cards .card{width:52px;height:72px}
 .played-label{font-size:12px}
 .your-seat{width:310px}.playing .your-row{font-size:12px;gap:var(--s2)}
 .your-row h2,#your-score{font-size:12px}.hand{gap:var(--s1);min-height:72px}
 .hand .card{width:52px;height:72px;max-width:none}#your-qualification{font-size:12px;margin-top:var(--s2)}
 #table-detail{font-size:12px}#last-trick{font-size:12px}
 .action-panel{padding:var(--s2);margin:var(--s2) 0}.playing #hint{font-size:12px}
 #actions button{min-width:0;flex:1;font-size:12px;padding:var(--s2)}
 .tools{gap:var(--s1)}.tools button{font-size:12px;padding:var(--s2)}
}
@media(max-width:360px){
 .rail-seat{width:66px}.seat-portrait{width:42px;height:42px}
 .position-1{left:11%;top:50%}.position-5{left:89%;top:50%}
 .hand .card{width:50px;height:70px}
 #table-title{font-size:20px}
}
@media(min-width:601px) and (max-height:650px){
 #table-stage{height:430px}.seat-portrait{width:46px;height:46px}.rail-seat{width:92px}
 .table-center{top:28%}.hand .card{width:52px;height:72px}
}