:root{--paper:#f4f0df;--ink:#20251b;--yellow:#f7ce48;--red:#d34d36;--felt:#466d51;--felt-dark:#294c36;--muted:#747766;--line:#c9c8b5;font-family:'DM Mono',monospace;color:var(--ink);background:var(--paper);font-synthesis:none;font-size:13px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--red);outline-offset:4px}a{color:inherit;text-decoration:none}button{border:0;background:none}input,select{border:1px solid #a9ae98;border-radius:0;background:#fffdf2;color:var(--ink);padding:12px;width:100%;min-width:0}input::placeholder{color:#838473}input:focus,select:focus{border-color:var(--ink)}[hidden]{display:none!important}.club-header{height:72px;margin:0 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.wordmark{font-family:'Gasoek One',sans-serif;font-size:23px;letter-spacing:-1px}.club-header nav{display:flex;gap:26px;align-items:center;font-size:11px}.club-header nav button{padding:8px 0}.club-header nav a span{color:var(--red)}#fullscreen{font-size:25px}.club-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 4% 22px}.eyebrow{font-size:9px;letter-spacing:1.5px;line-height:1.8;margin:0 0 10px}.club-heading h1{font-family:'Gasoek One',sans-serif;font-weight:400;letter-spacing:-2.6px;font-size:clamp(38px,4.5vw,70px);line-height:1.03;margin:0}.heading-suit{display:inline-block;color:var(--red);font-family:Georgia,serif;font-size:.9em;margin-left:20px;transform:rotate(12deg)}.club-note{font-size:11px;line-height:1.8;transform:rotate(-4deg);margin-right:25px}.connection{font-size:10px;text-align:center;min-height:14px;margin:0 4% 8px}.connection:empty{display:none}.connection.offline{background:var(--yellow);padding:10px}.error{background:#f7ded0;margin:12px 4%;padding:13px 18px;border-left:3px solid var(--red);line-height:1.6}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 296px;margin:0 4%;gap:36px}.table-workspace{min-width:0}.table-topline{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;border-top:1px solid var(--line);padding-top:14px;gap:12px}.table-topline span:last-child{color:var(--muted);text-align:right}.table-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#999c83 transparent}.table-stage{position:relative;height:482px;isolation:isolate;margin-top:0;min-width:100%}.sun-mark{position:absolute;right:1%;top:4%;font-size:125px;line-height:1;color:var(--red);transform:rotate(15deg);z-index:-1}.felt-table{position:absolute;left:7%;right:7%;top:28%;height:55%;border-radius:47% 48% 44% 46% / 49% 47% 50% 48%;border:9px solid var(--ink);background:var(--felt);box-shadow:0 8px 0 #b3925f,0 12px 0 var(--ink),0 24px 0 #dedac5;transform:rotate(-1.1deg)}.felt-table:after{content:'';position:absolute;inset:0;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.17' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.3;pointer-events:none}.felt-inner{position:absolute;inset:15px;border:1px solid #bfc79580;border-radius:inherit}.table-brand{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);font-family:'Gasoek One',sans-serif;font-size:35px;white-space:nowrap;text-align:center;letter-spacing:-1.5px;color:#cbd2aa;opacity:.48;line-height:1}.table-brand span{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:7px;display:block;margin:8px 0 0 8px}.table-stage.in-game .table-brand{opacity:.12}.table-footnote{position:absolute;bottom:2%;left:0;right:0;text-align:center;font-size:8px;letter-spacing:1.5px;color:#727862}.table-center{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:6;text-align:center;max-width:80%}.welcome-table-note{color:#e8ebd4;font-size:11px;margin-top:115px;white-space:nowrap}.table-card-row{display:flex;justify-content:center;gap:5px;min-height:64px}.pot-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--paper);margin:12px 0 0;padding:5px 10px;background:#294c36a3;border-radius:20px}.chip-dot{display:inline-block;width:15px;height:15px;background:var(--yellow);border:2px dashed var(--ink);border-radius:50%;box-shadow:0 2px 0 #b18338;vertical-align:middle}.center-label{font-size:9px;letter-spacing:1px;color:var(--paper);margin:0 0 10px}.table-result{color:var(--paper);font-size:13px;line-height:1.6;width:100%;margin:0 auto 12px;max-width:290px;text-wrap:balance}.seats{position:absolute;inset:0;pointer-events:none;z-index:5}.seat{position:absolute;left:var(--x);top:var(--y);width:136px;transform:translateX(-50%);text-align:center;pointer-events:auto;animation:arrive .42s both;animation-delay:var(--delay,0ms)}.seat-portrait{height:128px;overflow:hidden;position:relative;display:flex;align-items:flex-start;justify-content:center;filter:drop-shadow(3px 1px 0 #20251b25)}.seat-portrait img{height:260px;width:auto;max-width:none;object-fit:contain;transition:transform .3s}.seat[data-character=dolly] .seat-portrait img,.seat[data-character=bix] .seat-portrait img{height:235px}.seat[data-character=crumb] .seat-portrait img{height:250px}.seat.is-me .seat-portrait:after{content:'YOU';position:absolute;right:11px;bottom:9px;font-size:8px;letter-spacing:1px;background:var(--yellow);border:1px solid var(--ink);padding:3px 5px;transform:rotate(-8deg)}.seat-name{font-size:10px;display:inline-block;max-width:136px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid var(--ink);background:var(--paper);padding:5px 10px;box-shadow:2px 3px 0 #20251b;line-height:1.1;position:relative}.seat.is-active .seat-name{background:var(--yellow);box-shadow:2px 3px 0 var(--ink),0 0 0 4px #f7ce4838}.seat.is-active .seat-portrait img{transform:translateY(-5px)}.seat.is-folded .seat-portrait{filter:grayscale(.7);opacity:.55}.seat-subtitle{font-size:8px;margin:7px 0 0;letter-spacing:.3px;line-height:1.5}.seat-front .seat-subtitle{background:var(--paper);display:table;margin:6px auto 0;padding:1px 3px}.seat-bet{font-size:9px;position:absolute;top:154px;left:50%;transform:translateX(-50%);color:var(--paper);white-space:nowrap}.seat-front .seat-bet{top:-23px}.dealer-token{background:var(--paper);color:var(--ink);display:inline-flex;width:18px;height:18px;border:1px solid var(--ink);border-radius:100%;align-items:center;justify-content:center;font-size:8px;margin-left:4px}.seat-mini-hand{position:absolute;top:112px;left:50%;display:flex;transform:translateX(-50%) rotate(-7deg);pointer-events:none}.seat-mini-hand .playing-card{width:24px;height:34px;margin:0 -6px;font-size:9px;border-width:1px;border-radius:3px}.seat-mini-hand .playing-card .card-pip{font-size:16px}.seat-mini-hand .playing-card .card-corner{font-size:7px;top:2px;left:2px}.seat-mini-hand .playing-card .card-corner:last-child{right:2px;bottom:2px}.playing-card{width:48px;height:67px;background:#fffced;color:var(--ink);border:1.5px solid #1e271c;border-radius:5px;box-shadow:1px 3px 0 #16271d45;display:inline-flex;position:relative;align-items:center;justify-content:center;flex:none;animation:deal .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--delay,0ms)}.playing-card.red{color:#c74432}.card-pip{font-family:Georgia,serif;font-size:29px}.card-corner{position:absolute;top:4px;left:4px;font-family:Georgia,serif;font-size:11px;font-weight:700;line-height:.92}.card-corner small{display:block;font-size:9px}.card-corner:last-child{top:auto;left:auto;right:4px;bottom:4px;transform:rotate(180deg)}.playing-card.card-back{background:var(--red);border:4px solid #fff8df;outline:1px solid var(--ink);outline-offset:-1px;background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,#f5d7b444 3px,#f5d7b444 4px)}.card-back:after{content:'♠';font-size:25px;color:#fff7dc}.playing-card.card-empty{background:transparent;border:1px dashed #dce4bd77;box-shadow:none;opacity:.65}.trick-card{display:flex;align-items:center;flex-direction:column;gap:6px}.trick-card>small{color:var(--paper);font-size:7px;max-width:65px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.club-sidebar{border-left:1px solid var(--line);padding-left:30px;position:relative;padding-bottom:35px}.club-sidebar h2{font-family:'Gasoek One',sans-serif;font-weight:400;font-size:29px;letter-spacing:-1px;line-height:1.1;margin:0 0 24px}.field-label,fieldset legend{display:block;font-size:8px;letter-spacing:1px;margin:18px 0 9px;font-weight:500}fieldset{border:0;padding:0;margin:0}.avatar-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.avatar-option{height:40px;overflow:hidden;position:relative;border:1px solid transparent;background:#e7e5d3;padding:4px 2px 0;border-radius:22px 22px 8px 8px}.avatar-option img{width:100%;height:auto;min-height:55px;object-fit:cover;object-position:top;transition:transform .2s}.avatar-option:hover img{transform:translateY(-3px)}.avatar-option.selected{background:var(--yellow);border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}.game-picker{display:flex;gap:5px}.game-picker button{border:1px solid #afb29f;flex:1;padding:9px 3px;font-size:9px;white-space:nowrap}.game-picker button.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}.game-description{font-size:10px;line-height:1.7;min-height:33px;margin:12px 0;color:#686f5c}#chips-field small{display:block;font-size:8px;margin-top:7px;color:#747b67}.primary-button{background:var(--yellow);border:1px solid var(--ink);box-shadow:3px 4px 0 var(--ink);width:100%;padding:15px;margin-top:22px;text-align:left;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:space-between;transition:transform .15s,box-shadow .15s}.primary-button:hover{transform:translate(1px,1px);box-shadow:2px 3px 0 var(--ink)}.primary-button span{font-size:20px;line-height:1}.join-form{margin-top:24px;border-top:1px solid var(--line)}.join-row{display:flex;gap:0}.join-row input{flex:1}.join-row button{border:1px solid var(--ink);border-left:0;padding:0 12px;background:var(--paper);white-space:nowrap;font-size:11px}.join-row button:hover{background:var(--yellow)}#room-code{text-transform:uppercase}.small-note{font-size:9px;line-height:1.8;color:#727862;margin-top:16px}.club-stamp{transform:rotate(-9deg);margin:34px auto 10px;width:112px;border:2px solid #9a9e8555;border-radius:50%;height:112px;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#8a907575;font-size:9px;letter-spacing:1.2px;line-height:1.5}.club-stamp span:last-child{font-size:19px;margin-top:4px}.club-footer{margin:30px 4% 0;padding:22px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px}.club-footer>span{font-size:8px;letter-spacing:.6px;color:#787e68}.club-footer button{padding:0;font-size:9px}.action-rail{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;min-height:56px;padding:0 12px}.action-rail:empty{min-height:0}.action-rail .primary-button{width:auto;min-width:200px;margin:0}.action-button{border:1px solid var(--ink);background:#fffbed;padding:12px 20px;font-size:11px;box-shadow:2px 3px 0 var(--ink);transition:background .15s}.action-button:hover{background:var(--yellow)}.action-button.primary{background:var(--yellow)}.action-button.secondary{background:transparent;box-shadow:none}.action-amount{display:flex;align-items:center;gap:0}.action-amount input{width:78px;padding:11px 9px;border:1px solid var(--ink);border-right:0;height:40px}.action-amount button{height:40px}.turn-note{font-size:12px;line-height:1.7;text-align:center;margin:5px 0}.turn-note strong{font-weight:500}.last-event{text-align:center;font-size:10px;color:#6c755e;line-height:1.7;padding:0 16px;margin:17px 0 0;min-height:18px}.hand-workspace{margin:0 0 20px}.hand-heading{display:flex;justify-content:center;gap:18px;font-size:8px;letter-spacing:1px;color:#737a66;margin:0 0 12px}.hand-heading span:last-child{letter-spacing:0}.my-hand{display:flex;justify-content:center;align-items:end;gap:5px;min-height:83px;padding:8px 8px 4px;overflow-x:auto}.my-hand .playing-card{height:83px;width:57px;animation-delay:calc(var(--index,0)*35ms)}.my-hand .playing-card .card-pip{font-size:35px}.my-hand button.playing-card{cursor:pointer;transition:transform .18s,box-shadow .18s;margin-top:7px}.my-hand button.playing-card:hover,.my-hand button.playing-card:focus-visible{transform:translateY(-7px);box-shadow:2px 8px 0 #20251b25}.my-hand .playing-card.not-legal{opacity:.52;cursor:default}.my-hand .playing-card.is-legal{outline:2px solid var(--yellow);outline-offset:1px}.room-title{display:flex;align-items:start;justify-content:space-between;gap:12px}.room-title h2{font-size:29px;margin-bottom:15px}.room-code{font-size:11px;padding-top:7px;letter-spacing:2px}.invite-button{width:100%;text-align:left;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px}.invite-button:hover{color:var(--red)}.room-settings{font-size:9px;line-height:1.8;color:#6c745d;margin:16px 0 24px}.roster-heading{display:flex;justify-content:space-between;align-items:center}.roster-heading h3{font-size:11px;font-weight:500;margin:0}.roster-heading>span{font-size:9px;color:#747b67}.roster{list-style:none;padding:0;margin:10px 0 22px}.roster li{display:flex;align-items:center;gap:10px;min-height:45px;border-bottom:1px solid #d8dac8;font-size:10px}.roster-avatar{width:30px;height:35px;overflow:hidden;flex:none}.roster-avatar img{width:30px;height:auto}.roster-name{flex:1;min-width:0;overflow-wrap:anywhere}.roster-name small{display:block;font-size:8px;color:#747b67;margin-top:3px}.roster .remove-bot{font-size:20px;padding:5px}.status-dot{width:5px;height:5px;background:#6d9258;border-radius:50%;margin-right:4px;display:inline-block}.status-dot.disconnected{background:var(--red)}.leave-button{padding:14px 0 0;border-top:1px solid var(--line);margin-top:12px;text-align:left;width:100%;font-size:10px;display:flex;justify-content:space-between}.leave-button:hover{color:var(--red)}dialog{border:2px solid var(--ink);background:var(--paper);color:var(--ink);max-width:560px;width:calc(100% - 36px);max-height:calc(100dvh - 40px);padding:34px 36px;box-shadow:8px 8px 0 #20251b;font-size:12px;line-height:1.8}dialog::backdrop{background:#1b241999;backdrop-filter:blur(4px)}dialog h2{font-family:'Gasoek One',sans-serif;font-weight:400;letter-spacing:-1px;font-size:32px;line-height:1.1;margin:10px 0 22px}.dialog-close{position:absolute;top:10px;right:12px;font-size:30px}.rule-section{margin-top:24px;border-top:1px solid var(--line);padding-top:12px}.rule-section h3{font-size:14px}.rule-section p{font-size:11px}.team-score{color:var(--paper);font-size:10px;line-height:1.7;margin-top:12px}.table-stage.many-seats .seat{width:112px}.table-stage.many-seats .seat-portrait{height:110px}.table-stage.many-seats .seat-portrait img{height:225px}.table-stage.many-seats .seat-name{max-width:112px}.table-stage.many-seats .seat-mini-hand{top:94px}.table-stage.many-seats .seat-bet{top:138px}.table-stage.many-seats .seat-front .seat-bet{top:-23px}@keyframes arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes deal{from{opacity:0;translate:0 -12px;rotate:-5deg}to{opacity:1;translate:0 0;rotate:0deg}}@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 330px;gap:45px}.table-stage{height:545px}.seat-portrait{height:150px}.seat-portrait img{height:305px}.seat[data-character=dolly] .seat-portrait img,.seat[data-character=bix] .seat-portrait img{height:280px}.seat-bet{top:176px}.seat-mini-hand{top:134px}.table-card-row .playing-card{width:56px;height:77px}}@media(max-width:1100px){.workspace{gap:20px;grid-template-columns:minmax(0,1fr) 270px}.club-sidebar{padding-left:20px}.seat{width:110px}.seat-portrait{height:111px}.seat-portrait img{height:235px}.seat[data-character=dolly] .seat-portrait img,.seat[data-character=bix] .seat-portrait img{height:215px}.seat[data-character=crumb] .seat-portrait img{height:227px}.seat-mini-hand{top:95px}.seat-name{max-width:108px}.seat-bet{top:139px}.table-stage{height:448px}.playing-card{width:39px;height:56px}.card-pip{font-size:25px}.table-brand{font-size:27px}.sun-mark{font-size:95px}.table-footnote{bottom:0}}@media(max-width:800px){.club-header{height:61px}.wordmark{font-size:19px}.club-header nav{gap:16px;font-size:9px}.club-heading{margin:24px 4%}.club-heading h1{font-size:43px;letter-spacing:-2px}.club-note{display:none}.club-heading .eyebrow{font-size:8px}.workspace{grid-template-columns:1fr;gap:25px}.club-sidebar{border-left:0;border-top:1px solid var(--line);padding:25px 0 0;max-width:500px;width:100%;margin:0 auto}.club-sidebar h2 br{display:none}.club-sidebar h2{font-size:27px;margin-bottom:20px}.avatar-picker{gap:8px;max-width:360px}.avatar-option{height:49px}.game-picker button{font-size:11px;padding:12px}.club-stamp{display:none}.table-stage{height:437px}.seat-portrait{height:119px}.seat-portrait img{height:252px}.seat[data-character=dolly] .seat-portrait img,.seat[data-character=bix] .seat-portrait img{height:226px}.seat-mini-hand{top:103px}.seat-bet{top:145px}.table-brand{font-size:35px}.club-footer{font-size:8px;flex-wrap:wrap}.club-footer>span{order:3;flex-basis:100%;font-size:7px}.club-footer button{font-size:8px}.room-title h2{font-size:29px}body.has-room .club-heading{margin-bottom:16px}body.has-room .club-heading h1{font-size:32px}body.has-room .club-heading .eyebrow{display:none}body.has-room .workspace{gap:16px}body.has-room .table-stage{height:400px}.my-hand{justify-content:safe center}.my-hand .playing-card{width:47px;height:69px;margin-left:-6px}.my-hand .playing-card:first-child{margin-left:0}.hand-workspace{margin-top:15px}.action-rail{padding:0}.action-button{padding:12px 15px}.table-result{font-size:11px}.club-sidebar #room-panel{max-width:100%}.table-topline{font-size:8px}.last-event{font-size:9px}}@media(max-width:420px){.club-header nav{gap:10px}.club-header nav a{display:none}.club-heading h1{font-size:36px}.heading-suit{margin-left:10px}.table-stage{height:403px}.seat{width:90px}.seat-name{font-size:8px;max-width:90px;padding:5px 7px}.seat-subtitle{font-size:7px}.seat-portrait{height:108px}.seat-portrait img{height:226px}.seat[data-character=dolly] .seat-portrait img,.seat[data-character=bix] .seat-portrait img{height:202px}.seat[data-character=crumb] .seat-portrait img{height:220px}.seat-mini-hand{top:92px}.seat-bet{top:132px;font-size:8px}.seat.is-me .seat-portrait:after{font-size:6px;right:2px}.felt-table{left:2%;right:2%;border-width:7px}.felt-inner{inset:11px}.table-brand{font-size:29px}.table-brand span{font-size:8px;letter-spacing:5px}.sun-mark{font-size:82px}.table-card-row{gap:3px}.table-card-row>.playing-card{width:32px;height:46px}.card-pip{font-size:23px}.card-corner{font-size:9px;top:3px;left:3px}.card-corner small{font-size:7px}.card-corner:last-child{right:3px;bottom:3px}.table-card-row{min-height:46px}.welcome-table-note{font-size:8px;margin-top:95px}.table-footnote{font-size:7px}.action-button{padding:12px;font-size:10px}.turn-note{font-size:10px}.table-center{max-width:76%}.table-result{font-size:10px}body.has-room .table-stage{height:375px}.team-score{font-size:8px}.trick-card>small{font-size:6px}.trick-card .playing-card{width:32px;height:46px}.my-hand .playing-card{width:43px;height:63px;margin-left:-14px}.my-hand .playing-card .card-pip{font-size:29px}.my-hand .card-corner{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.room-title{flex-wrap:wrap;gap:0 12px}.room-code{font-size:9px;letter-spacing:1px;padding-top:0;margin-bottom:15px;flex-basis:100%}
/* Neutral sprites retain their original transparent canvas. These measured
   offsets centre their painted bounds without changing the source artwork. */
[data-character=moss]{--sprite-scale:2.3167;--canvas-ratio:1;--sprite-offset:0%}
[data-character=dolly]{--sprite-scale:1.7124;--canvas-ratio:1.2207;--sprite-offset:9.0411%}
[data-character=bix]{--sprite-scale:2.5536;--canvas-ratio:1.7656;--sprite-offset:21.6808%}
[data-character=patch]{--sprite-scale:1.7625;--canvas-ratio:1;--sprite-offset:0%}
[data-character=ren]{--sprite-scale:1.6;--canvas-ratio:1;--sprite-offset:0%}
[data-character=crumb]{--sprite-scale:1.5657;--canvas-ratio:1.1162;--sprite-offset:5.2055%}
[data-character=paul]{--sprite-scale:1.4905;--canvas-ratio:1;--sprite-offset:0%}
[data-character=gideon]{--sprite-scale:2.1423;--canvas-ratio:1;--sprite-offset:0%}
.seat{--portrait-height:260px;--portrait-width:136px}
.seat-front{top:59%}
.seat .seat-portrait img,.seat[data-character] .seat-portrait img{flex-shrink:0;height:min(var(--portrait-height),calc(var(--portrait-width) * var(--sprite-scale)));transform:translateX(var(--sprite-offset));max-width:none}
.seat.is-active .seat-portrait img{transform:translate(var(--sprite-offset),-5px)}
.seat:not(.seat-front) .seat-subtitle{color:#f1f2dc;text-shadow:0 1px 0 #263e27}
.avatar-option img{width:calc(100% * var(--canvas-ratio));max-width:none;min-height:0}
.roster-avatar img{width:calc(30px * var(--canvas-ratio));max-width:none}
.table-stage.many-seats .seat{--portrait-height:225px;--portrait-width:112px}
@media(min-width:1500px){.seat{--portrait-height:305px}}
@media(max-width:1100px){.seat{--portrait-height:235px;--portrait-width:110px}}
@media(max-width:800px){.seat{--portrait-height:252px}}
@media(max-width:420px){.seat{--portrait-height:226px;--portrait-width:90px}}
.welcome-table-note{margin:0;transform:translateY(-28px)}
.in-game .table-footnote{display:none}
.seat-mini-hand{left:calc(50% + 44px);top:105px;transform:rotate(8deg)}
.seat-right .seat-mini-hand{left:calc(50% - 61px);transform:rotate(-8deg)}
@media(min-width:801px){
  .has-room .club-header{height:58px}
  .has-room .club-heading{margin-top:16px;margin-bottom:16px}
  .has-room .club-heading h1{font-size:36px;letter-spacing:-1.8px}
  .has-room .club-heading .eyebrow,.has-room .club-note{display:none}
  .has-room .table-stage{height:340px}
  .has-room .seat{--portrait-height:185px;--portrait-width:100px;width:112px}
  .has-room .seat-front{top:64%}
  .has-room .seat-portrait{height:80px}
  .has-room .seat-name{font-size:9px;padding:4px 8px;max-width:110px}
  .has-room .seat-subtitle{font-size:8px;margin-top:5px}
  .has-room .seat-bet{top:124px}
  .has-room .seat-front .seat-bet{top:-24px}
  .has-room .seat-mini-hand{top:84px;left:calc(50% + 40px)}
  .has-room .seat-right .seat-mini-hand{left:calc(50% - 56px)}
  .has-room .seat.is-me .seat-portrait:after{right:9px;bottom:5px;font-size:6px}
  .has-room .hand-workspace{margin:0 0 10px}
  .has-room .hand-heading{margin-bottom:6px}
  .has-room .my-hand{min-height:80px;padding-top:4px;padding-bottom:4px}
  .has-room .my-hand .playing-card{height:72px;width:50px}
  .has-room .my-hand .playing-card .card-pip{font-size:31px}
  .has-room .last-event{margin-top:10px;font-size:9px}
  .has-room .club-footer{margin-top:18px}
  .has-room .sun-mark{font-size:88px}
}
@media(max-width:420px){.seat-mini-hand{top:87px;left:calc(50% + 33px)}.seat-right .seat-mini-hand{left:calc(50% - 49px)}}
.table-center{top:48%}
.seat.is-active .seat-portrait img{transform:translateX(var(--sprite-offset))}
.seat.is-active .seat-portrait{transform:translateY(-5px)}
.hand-count{position:absolute;right:-13px;bottom:-4px;min-width:17px;height:17px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font-size:8px;display:grid;place-items:center;transform:rotate(-8deg)}
.my-hand{scrollbar-width:thin;scrollbar-color:#a8ad91 transparent}
.my-hand::-webkit-scrollbar{height:5px}
.my-hand::-webkit-scrollbar-thumb{background:#a8ad91;border-radius:4px}
@media(min-width:801px){.has-room .seat-mini-hand{top:72px}.has-room .club-stamp{display:none}.has-room .club-sidebar{padding-bottom:0}}
@media(max-width:800px){.seat-bet{top:156px}.seat-front .seat-bet{top:-23px}.my-hand .playing-card{margin-left:0}.hand-heading{font-size:7px;gap:12px}}
@media(max-width:420px){.my-hand .playing-card{margin-left:0}body[data-game=spades] .my-hand .playing-card{margin-left:-14px}}
.playing-card.card-settled{animation:none}
.seat-front .seat-bet{left:calc(50% + 50px)}
.seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet{left:calc(50% - 43px);top:126px}
@media(min-width:801px){.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet{top:100px}}
body[data-game=spades] .my-hand .playing-card:first-child{margin-left:0}

/* Card-room refinement: make the game state and the next action easy to read. */
:root { --muted: #616950; --line: #c3c6af; }
button, input, select { border-radius: 3px; }
input, select { min-height: 44px; }
button:disabled { cursor: not-allowed; }
button:active:not(:disabled) { translate: 0 1px; }
.club-header nav { font-size: 12px; gap: 24px; }
.club-header nav button { min-height: 44px; }
.club-heading { margin-top: 25px; margin-bottom: 24px; }
.eyebrow { color: #535d44; font-size: 10px; letter-spacing: 1.2px; }
.club-note { color: #4d5941; font-size: 12px; }
.workspace { grid-template-columns: minmax(0, 1fr) 324px; gap: 28px; }
.club-sidebar { padding-left: 26px; padding-bottom: 0; }
.club-sidebar h2 { font-size: 27px; margin-bottom: 20px; }
.field-label, fieldset legend { font-size: 10px; letter-spacing: .8px; margin: 15px 0 8px; }
.avatar-picker { gap: 5px; padding-bottom: 4px; }
.avatar-option { height: 46px; border-radius: 22px 22px 5px 5px; }
.avatar-option:hover { background: #dddcc5; }
.avatar-option.selected { background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.game-picker { gap: 6px; }
.game-picker button { min-height: 42px; padding: 10px 4px; font-size: 10px; }
.game-picker button:not(.selected):hover { border-color: var(--ink); background: #e9e7d4; }
.game-description { font-size: 11px; line-height: 1.65; margin: 10px 0; min-height: 36px; color: #59634c; }
#chips-field small { font-size: 10px; line-height: 1.5; color: #616a52; }
.primary-button { margin-top: 18px; padding: 13px 15px; min-height: 46px; font-size: 13px; }
.join-form { margin-top: 22px; }
.join-row button { min-width: 66px; min-height: 44px; font-size: 12px; border-radius: 0 3px 3px 0; }
.join-row input, .join-row select { border-radius: 3px 0 0 3px; }
.small-note { font-size: 10px; line-height: 1.75; color: #5f694f; margin-top: 14px; }
.club-stamp { display: none; }
.table-topline { align-items: center; font-size: 10px; letter-spacing: .7px; padding-top: 12px; min-height: 31px; }
.table-topline span:last-child { color: #566149; }
.table-session { flex: none; border: 1px solid #b9bea4; padding: 4px 7px; border-radius: 3px; color: #526149; font-size: 9px; letter-spacing: .4px; }
.felt-table { background-color: #42694c; border-width: 8px; box-shadow: 0 6px 0 #ae8e58, 0 10px 0 var(--ink), 0 20px 0 #dedac5; }
.felt-inner { border-color: #c6d19b73; }
.table-brand { opacity: .35; }
.welcome-table-note { font-size: 12px; color: #f6f3dc; }
.table-footnote { font-size: 9px; color: #626d51; letter-spacing: 1px; }
.seat-name { font-size: 11px; padding: 6px 10px; border-radius: 2px; box-shadow: 2px 2px 0 var(--ink); }
.seat-subtitle { font-size: 9px; letter-spacing: 0; }
.seat:not(.seat-front) .seat-subtitle { display: table; margin: 6px auto 0; padding: 2px 5px; background: #294c36; border-radius: 3px; color: #f9f5de; text-shadow: none; }
.seat-front .seat-subtitle { padding: 2px 5px; background: var(--paper); border-radius: 3px; }
.seat.is-active .seat-name { box-shadow: 2px 2px 0 var(--ink), 0 0 0 3px #f7ce485c; }
.seat.is-active .seat-portrait { filter: drop-shadow(0 2px 0 #f7ce48); }
.pot-tag { font-size: 12px; font-weight: 500; padding: 7px 12px; background: #233f2c; margin-top: 10px; border: 1px solid #cbd6a544; }
.center-label { font-size: 10px; letter-spacing: .7px; }
.trick-card > small { font-size: 9px; line-height: 1.25; background: #294c36; border-radius: 2px; padding: 2px 4px; }
.table-result, .result-banner { color: var(--paper); font-size: 12px; line-height: 1.5; text-wrap: balance; }
.result-banner { background: #253e2d; border: 1px solid #ccd4a960; border-radius: 5px; padding: 9px 14px; margin: 0 auto 10px; box-shadow: 0 3px 0 #1e34282b; }
.result-banner strong { display: block; color: var(--yellow); font-size: 14px; margin-bottom: 3px; }
.result-banner small { display: block; font-size: 11px; }
.turn-status { min-height: 32px; margin: 0 auto 9px; padding: 7px 12px; text-align: center; font-size: 12px; line-height: 1.5; color: #536145; }
.turn-status:empty { display: none; }
.turn-status.is-your-turn { background: var(--yellow); color: var(--ink); width: fit-content; border: 1px solid var(--ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--ink); font-weight: 500; }
.turn-status.is-finished { color: #314e37; font-weight: 500; }
.hand-workspace { margin-bottom: 12px; }
.hand-heading { margin: 0 0 5px; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 10px; letter-spacing: .7px; color: #526046; line-height: 1.5; }
.hand-heading > span:first-child { font-weight: 500; color: #34452d; }
.hand-heading span:last-child { letter-spacing: 0; }
.hand-summary { color: #304b33; font-size: 11px; font-weight: 500; }
.my-hand { padding: 9px 8px 6px; gap: 7px; }
.my-hand .playing-card { box-shadow: 1px 3px 0 #28382748; }
.my-hand .playing-card.not-legal { opacity: .56; }
.my-hand .playing-card.is-legal { outline: 2px solid #ceab2e; outline-offset: 1px; box-shadow: 0 4px 0 #bd942c; }
.my-hand button.playing-card:hover, .my-hand button.playing-card:focus-visible { transform: translateY(-7px); outline-color: var(--ink); box-shadow: 0 7px 0 #c1a13566; }
.action-rail { min-height: 46px; gap: 8px; padding: 0 4px; }
.action-button { min-height: 44px; padding: 11px 16px; font-size: 12px; line-height: 20px; white-space: nowrap; }
.action-button.secondary { color: #725647; border-color: #b9ad95; }
.action-button.secondary:hover { background: #e9dfcd; }
.action-amount { border-radius: 3px; }
.action-amount input { width: 76px; min-height: 44px; height: 44px; font-size: 13px; border-radius: 3px 0 0 3px; }
.action-amount button { height: 44px; border-radius: 0 3px 3px 0; }
.action-help { text-align: center; font-size: 10px; line-height: 1.5; color: #5f6b51; margin: 9px 0 0; }
.action-help:empty { display: none; }
.turn-note { font-size: 12px; color: #516246; margin: 3px 0; }
.last-event { font-size: 11px; line-height: 1.5; color: #647052; margin-top: 13px; min-height: 16px; }
.room-code { font-size: 11px; letter-spacing: 1px; color: #59654c; }
.room-settings { font-size: 11px; line-height: 1.7; margin: 15px 0 20px; }
.invite-button { min-height: 44px; padding: 12px 0; font-size: 12px; }
.roster-heading h3 { font-size: 12px; }
.roster-heading > span { font-size: 10px; }
.roster { margin-top: 8px; margin-bottom: 20px; }
.roster li { min-height: 48px; font-size: 11px; }
.roster-name small { font-size: 9px; letter-spacing: .2px; }
.roster-avatar { height: 38px; }
.leave-button { min-height: 44px; font-size: 11px; padding: 14px 0 10px; }
.club-footer { margin-top: 25px; font-size: 10px; padding: 18px 0; }
.club-footer > span { font-size: 9px; line-height: 1.6; }
.club-footer button { min-height: 32px; font-size: 10px; }

@media (min-width: 801px) {
  body:not(.has-room) .club-heading h1 { font-size: clamp(42px, 4.5vw, 65px); }
  body:not(.has-room) .table-stage { height: 458px; }
  body:not(.has-room) .table-workspace { align-self: start; }
  .has-room .workspace { grid-template-columns: minmax(0, 1fr) 294px; gap: 28px; }
  .has-room .table-stage { height: 286px; }
  .has-room .seat-front { top: 61%; }
  .has-room .seat-portrait { height: 78px; }
  .has-room .seat-name { font-size: 10px; padding: 5px 8px; }
  .has-room .seat-subtitle { font-size: 9px; margin-top: 5px; }
  .has-room .seat.is-me .seat-portrait:after { font-size: 7px; bottom: 4px; }
  .has-room .seat-mini-hand { top: 65px; }
  .has-room .seat-bet { top: 119px; }
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet { top: 104px; }
  .has-room .seat-front .seat-bet { top: -15px; }
  .has-room .table-center { top: 50%; }
  .has-room .table-card-row .playing-card { height: 62px; width: 43px; }
  .has-room .table-card-row { min-height: 62px; }
  .has-room .hand-workspace { margin-bottom: 9px; }
  .has-room .hand-heading { font-size: 10px; margin-bottom: 2px; }
  .has-room .my-hand { min-height: 78px; padding-top: 5px; padding-bottom: 5px; }
  .has-room .my-hand .playing-card { height: 68px; width: 48px; }
  .has-room .last-event { font-size: 10px; margin-top: 9px; }
  .has-room .club-footer { margin-top: 18px; }
  .has-room .club-heading { margin-top: 13px; margin-bottom: 14px; }
  .has-room .turn-status { margin-top: 0; margin-bottom: 8px; }
}
@media (min-width: 1500px) {
  body:not(.has-room) .table-stage { height: 500px; }
  .has-room .workspace { grid-template-columns: minmax(0, 1fr) 320px; }
  .has-room .seat { --portrait-height: 185px; }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .club-sidebar { padding-left: 20px; }
  .has-room .workspace { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
  .action-button { padding-inline: 11px; }
}
@media (max-width: 800px) {
  .club-header { height: 58px; }
  .club-header nav { font-size: 11px; gap: 13px; }
  .club-heading { margin-top: 19px; margin-bottom: 20px; }
  .club-heading .eyebrow { font-size: 9px; }
  .workspace, .has-room .workspace { grid-template-columns: 1fr; gap: 20px; }
  .club-sidebar { padding: 22px 0 0; }
  .club-sidebar h2 { font-size: 29px; }
  .field-label, fieldset legend { font-size: 11px; margin-top: 17px; }
  input, select { font-size: 16px; }
  .avatar-picker { max-width: none; gap: 6px; }
  .avatar-option { height: 53px; }
  .game-picker button { font-size: 12px; }
  .game-description { font-size: 12px; }
  .small-note, #chips-field small { font-size: 11px; }
  .table-topline { font-size: 9px; gap: 8px; }
  .table-session { font-size: 8px; }
  body:not(.has-room) .table-stage { height: 325px; }
  body:not(.has-room) .seat { --portrait-height: 205px; --portrait-width: 96px; width: 100px; }
  body:not(.has-room) .seat-portrait { height: 94px; }
  body:not(.has-room) .seat-front { top: 60%; }
  body:not(.has-room) .seat-name { font-size: 9px; padding: 5px 7px; }
  body:not(.has-room) .seat-subtitle { font-size: 8px; }
  body:not(.has-room) .table-brand { font-size: 28px; }
  body:not(.has-room) .welcome-table-note { font-size: 9px; transform: translateY(-16px); }
  body:not(.has-room) .table-footnote { display: none; }
  body.has-room .table-stage { height: 321px; }
  body.has-room .seat { --portrait-height: 209px; --portrait-width: 94px; width: 100px; }
  body.has-room .seat-portrait { height: 94px; }
  body.has-room .seat-front { top: 58%; }
  body.has-room .seat-name { max-width: 100px; font-size: 9px; padding: 5px 7px; }
  body.has-room .seat-subtitle { font-size: 8px; margin-top: 5px; }
  body.has-room .seat-mini-hand { top: 78px; left: calc(50% + 30px); }
  body.has-room .seat-right .seat-mini-hand { left: calc(50% - 49px); }
  body.has-room .seat-bet { top: 139px; font-size: 9px; }
  body.has-room .seat-front .seat-bet { top: -15px; }
  body.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet { top: 108px; }
  body.has-room .seat.is-me .seat-portrait:after { font-size: 7px; bottom: 5px; right: 4px; }
  body.has-room .table-center { top: 48%; }
  .seat:not(.seat-front) .seat-subtitle { padding: 2px 3px; }
  .table-center { max-width: 76%; }
  .table-card-row { min-height: 51px; gap: 4px; }
  .table-card-row > .playing-card, .trick-card .playing-card { width: 35px; height: 51px; }
  .trick-card > small { font-size: 8px; max-width: 50px; }
  .center-label { font-size: 9px; }
  .pot-tag { font-size: 11px; padding: 5px 9px; margin-top: 7px; }
  .result-banner { font-size: 10px; padding: 6px 9px; margin-bottom: 7px; }
  .result-banner strong { font-size: 12px; }
  .result-banner small { font-size: 10px; }
  .turn-status { font-size: 12px; min-height: 32px; margin-bottom: 10px; padding: 7px 10px; }
  .hand-workspace { margin-top: 0; margin-bottom: 13px; }
  .hand-heading { font-size: 10px; gap: 3px 10px; margin-bottom: 4px; }
  .hand-heading span:last-child { font-size: 10px; }
  .my-hand { min-height: 90px; padding-top: 11px; padding-bottom: 7px; gap: 7px; }
  .my-hand .playing-card { width: 51px; height: 73px; margin-left: 0; }
  .my-hand .playing-card .card-pip { font-size: 31px; }
  body[data-game=spades] .my-hand .playing-card { margin-left: -11px; }
  body[data-game=spades] .my-hand .playing-card:first-child { margin-left: 0; }
  .action-rail { gap: 9px; }
  .action-button { font-size: 12px; padding: 11px 14px; }
  .action-amount input { width: 65px; font-size: 16px; }
  .action-help { font-size: 11px; margin-top: 9px; }
  .turn-note { font-size: 12px; }
  .last-event { font-size: 11px; margin-top: 12px; }
  .room-settings { font-size: 12px; }
  .roster li { font-size: 12px; min-height: 51px; }
  .roster-name small { font-size: 10px; }
  .club-footer { font-size: 10px; gap: 13px; margin-top: 23px; }
  .club-footer > span { font-size: 9px; }
  .club-footer button { font-size: 10px; }
}
@media (max-width: 420px) {
  .club-header nav { gap: 11px; }
  .club-heading h1 { font-size: 35px; }
  body.has-room .club-heading h1 { font-size: 30px; }
  body.has-room .club-heading { margin-top: 15px; margin-bottom: 15px; }
  .table-topline { font-size: 8px; letter-spacing: .5px; }
  .felt-table { left: 2%; right: 2%; border-width: 6px; }
  .table-brand { font-size: 26px; }
  .table-brand span { font-size: 8px; letter-spacing: 4px; }
  .card-corner { font-size: 10px; }
  .card-corner small { font-size: 8px; }
  .my-hand .card-corner { font-size: 12px; top: 4px; left: 4px; }
  .my-hand .card-corner small { font-size: 9px; }
  .my-hand .card-corner:last-child { bottom: 4px; right: 4px; }
  .sun-mark { font-size: 70px; }
  .table-footnote { font-size: 8px; }
}
.turn-status strong { display: inline; font-size: inherit; font-weight: 500; }
.turn-status strong + span::before { content: ' · '; }
.turn-status span { font-size: 11px; }
.turn-status.is-finished { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 8px; padding-bottom: 8px; }
.hand-recap { border-block: 1px solid var(--line); padding: 13px 0; margin: 16px 0; font-size: 11px; line-height: 1.65; }
.hand-recap h3 { font-size: 12px; margin: 0 0 8px; font-weight: 500; }
.hand-recap p { margin: 5px 0; }
.hand-recap ul { list-style: none; padding: 0; margin: 7px 0 0; }
.hand-recap li { padding: 4px 0; }
.hand-recap strong { font-weight: 500; }
@media (max-width: 800px) {
  .turn-status span { font-size: 11px; }
  .hand-recap { font-size: 12px; }
  .hand-recap h3 { font-size: 13px; }
}
.avatar-field, .game-field { margin-top: 14px; }
fieldset legend { margin-top: 0; }
.table-footnote { display: none; }
@media (min-width: 801px) {
  body:not(.has-room) .club-heading { margin-top: 19px; margin-bottom: 19px; }
  body:not(.has-room) .club-heading h1 { font-size: clamp(42px, 4.1vw, 61px); }
  body:not(.has-room) .club-sidebar h2 { font-size: 24px; margin-bottom: 14px; }
  body:not(.has-room) .field-label { margin-top: 12px; }
  body:not(.has-room) .game-description { font-size: 10px; min-height: 0; margin-block: 8px; }
  body:not(.has-room) .primary-button { margin-top: 15px; }
}
/* The front seat's caption extends past the felt; reserve its measured height. */
.has-room .table-viewport { padding-bottom: 18px; }
.hand-recap li strong, .hand-recap li span { display: block; }
.hand-recap li + li { margin-top: 7px; }
@media (min-width: 801px) {
  body:not(.has-room) .club-heading { margin-top: 14px; margin-bottom: 14px; }
  body:not(.has-room) .club-heading h1 { font-size: clamp(42px, 3.8vw, 58px); }
  body:not(.has-room) .primary-button { margin-top: 12px; }
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-portrait { height: 63px; }
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-mini-hand { top: 51px; }
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet { top: 89px; }
}
@media (max-width: 800px) {
  body.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-portrait { height: 72px; }
  body.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-mini-hand { top: 56px; }
  body.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet { top: 86px; }
  body:not(.has-room) .welcome-table-note { max-width: 180px; white-space: normal; font-size: 10px; line-height: 1.7; transform: translateY(7px); }
  body:not(.has-room) .seat-subtitle { display: none; }
}
/* Keep top-seat captions, shared cards, and the front-seat caption in separate rows. */
.seat-subtitle { white-space: nowrap; }
@media (min-width: 801px) {
  .has-room .table-stage { height: 320px; }
  .has-room .table-viewport { padding-bottom: 38px; }
  .has-room .seat-front { top: 73%; }
  .has-room .table-center { top: 56%; }
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-portrait { height: 78px; }
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-mini-hand { top: 65px; }
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet { top: 104px; }
}
@media (max-width: 800px) {
  body.has-room .table-stage { height: 350px; }
  body.has-room .table-viewport { padding-bottom: 30px; }
  body.has-room .seat-front { top: 68%; }
  body.has-room .table-center { top: 54%; }
  body.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-portrait { height: 94px; }
  body.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-mini-hand { top: 78px; }
  body.has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet { top: 108px; }
  body:not(.has-room) .seat:not(.seat-front) .seat-subtitle { display: none; }
}
/* Top-seat wagers sit beside the caption, including longer blackjack totals. */
@media (min-width: 801px) {
  .has-room .seat:not(.seat-front):not(.seat-left):not(.seat-right) .seat-bet {
    left: -8px;
    transform: translateX(-100%);
  }
}