:root{--felt-edge:#0a3a2d;--felt:#11543f;--felt-glow:#176b51;--page:#08251c;--ivory:#fbfbf7;--ink:#1a1a1a;--gold:#e8b23a;--gold-glow:#e8b23a4d;--suit-red:#c8102e;--suit-black:#1a1a1a;--suit-diamond-4c:#1457b8;--suit-club-4c:#1b7a3e;--text:#eaf3ee;--muted:#cde0d6;--error:#e5604d;--success:#5fb98a;--info:#8fb8ff;--serif:"Newsreader", Georgia, serif;--sans:"DM Sans", system-ui, sans-serif;--sp-2xs:2px;--sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-lg:16px;--sp-xl:24px;--sp-2xl:32px;--sp-3xl:48px;--r-card:6px;--r-btn:10px;--r-full:9999px;--ease-enter:cubic-bezier(.16, 1, .3, 1);--ease-exit:cubic-bezier(.4, 0, 1, 1);--ease-move:cubic-bezier(.4, 0, .2, 1);--dur-micro:80ms;--dur-short:.2s;--dur-medium:.32s;--dur-long:.6s;--table-max:720px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--sans);background:var(--page);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;line-height:1.5}h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.05}button{font-family:var(--sans);cursor:pointer}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.table{width:100%;max-width:var(--table-max);--hand-w:52px;--hand-h:73px;--hand-overlap:18px;margin:0 auto}.felt{border-radius:var(--sp-lg);padding:var(--sp-lg) var(--sp-md) var(--sp-xl);background:radial-gradient(120% 82% at 50% 24%, var(--felt-glow) 0%, var(--felt) 58%, var(--felt-edge) 100%);flex-direction:column;display:flex;position:relative;box-shadow:inset 0 0 90px #0006,0 30px 70px #00000080}.opps{align-items:flex-start;gap:var(--sp-md);margin-bottom:var(--sp-sm);flex-wrap:wrap;display:flex}.room{flex-direction:column;margin-top:2px;margin-right:auto;display:flex}.room-code{letter-spacing:.14em;color:var(--text);font-size:12px;font-weight:700}.room-round{color:var(--muted);font-size:11px}.opp-list{gap:var(--sp-sm);list-style:none;display:flex}.opp{flex-direction:column;align-items:center;gap:3px;width:60px;display:flex}.opp-av{border-radius:var(--r-full);width:28px;height:28px;color:var(--text);transition:box-shadow var(--dur-short) var(--ease-move), border-color var(--dur-short) var(--ease-move);background:#2f6553;border:2px solid #0000;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.opp.is-turn .opp-av{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-glow)}.opp-fan{align-items:flex-end;height:26px;padding-left:7px;display:flex}.cback{width:13px;height:20px;transform:rotate(calc((var(--j) - (var(--n) - 1) / 2) * 4deg));transform-origin:bottom;background:linear-gradient(150deg,#1f6149 0%,#0c3d2e 100%);border:1px solid #e8b23a38;border-radius:3px;margin-left:-7px;box-shadow:0 1px 2px #00000073}.cback:first-child{margin-left:0}.opp-meta{align-items:baseline;gap:4px;max-width:60px;display:flex}.opp-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.opp.is-turn .opp-name{color:var(--gold);font-weight:700}.opp-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.board-area{min-height:clamp(248px,46vh,470px);padding:var(--sp-sm) 0;display:flex;position:relative}.pcard{border-radius:var(--r-card);flex:none;position:relative}.pcard--board{width:var(--card-w);height:var(--card-h)}.pcard--hand{width:100%;height:100%}.pcard-img{width:100%;height:100%;display:block}.bcard{filter:drop-shadow(0 1px 2px #0006)}.bcard.is-inner{filter:drop-shadow(0 1px 1px #00000052)brightness(.97)}.bcard.is-edge{filter:drop-shadow(0 3px 5px #00000080)}.bcard.just-played{animation:pop var(--dur-medium) var(--ease-enter)}.board-grid{grid-template-columns:repeat(4, var(--card-w));justify-content:center;gap:var(--col-gap);flex:1;display:grid;position:relative}.seven-line{height:2px;box-shadow:0 0 18px 2px var(--gold-glow);opacity:.9;z-index:0;pointer-events:none;background:linear-gradient(90deg,#0000,#e8b23a80 12% 88%,#0000);position:absolute;top:50%;left:-2px;right:-2px;transform:translateY(-50%)}.col{z-index:1;grid-template-rows:1fr auto 1fr;justify-items:center;height:100%;display:grid;position:relative}.col-high{flex-direction:column;grid-row:1;align-self:end;align-items:center;display:flex}.col-seven{grid-row:2}.col-low{flex-direction:column;grid-row:3;align-self:start;align-items:center;display:flex}.col-high>*+*,.col-low>*+*{margin-top:calc(var(--vstep) - var(--card-h))}.is-seven{filter:drop-shadow(0 0 2px var(--gold)) drop-shadow(0 2px 5px #00000080)}.seven-ghost{width:var(--card-w);height:var(--card-h);border-radius:var(--r-card);opacity:.5;background:#ffffff0a;border:1px dashed #ffffff38;flex-direction:column;justify-content:center;align-items:center;line-height:.9;display:flex}.seven-ghost b{font-weight:700;font-size:calc(var(--card-w) * .4)}.seven-ghost i{font-style:normal;font-size:calc(var(--card-w) * .3)}.cue{justify-content:center;align-items:center;gap:var(--sp-sm);text-align:center;font-family:var(--serif);padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-btn);margin:var(--sp-md) auto var(--sp-sm);min-height:44px;font-size:16px;font-weight:600;display:flex}.cue--you{color:var(--gold);background:var(--gold-glow)}.cue--waiting{color:var(--muted);background:#ffffff0d;font-style:italic}.cue--blocked{color:var(--text);background:#e5604d29}.cue-dot{border-radius:var(--r-full);background:var(--gold);width:8px;height:8px;animation:pulse 2s var(--ease-move) infinite}.cue-tally{font-family:var(--sans);color:var(--gold);border-radius:var(--r-full);background:#e8b23a2e;padding:2px 9px;font-size:12px;font-weight:700}.cue-pass{font-family:var(--sans);color:var(--text);border-radius:var(--r-full);cursor:pointer;background:#ffffff1a;border:1px solid #fff3;min-height:36px;padding:6px 14px;font-size:13px;font-weight:700}.cue-pass:hover{background:#ffffff29}.cue-pass:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.hand{min-height:120px;padding-top:var(--sp-xl);justify-content:center;align-items:flex-end;display:flex}.hand--empty{align-items:center}.hand-clear{font-family:var(--serif);color:var(--muted);font-style:italic}.hand-card{--rot:calc((var(--i) - (var(--n) - 1) / 2) * 6.5deg);--lift:0px;width:var(--hand-w);height:var(--hand-h);transform-origin:bottom;transform:rotate(var(--rot)) translateY(var(--lift));transition:transform var(--dur-short) var(--ease-move), filter var(--dur-short) var(--ease-move);animation:deal var(--dur-medium) var(--ease-enter) backwards;animation-delay:calc(var(--i) * 45ms);cursor:default;background:0 0;border:0;margin-inline-start:calc(-1 * var(--hand-overlap));padding:0}.hand-card:first-child{margin-inline-start:0}.hand-card .pcard{filter:drop-shadow(0 4px 7px #00000080)}.hand-card.is-playable{--lift:-16px;cursor:pointer}.hand-card.is-playable .pcard{filter:drop-shadow(0 0 3px var(--gold)) drop-shadow(0 10px 16px #00000080)}.hand-card.is-playable:hover,.hand-card.is-playable:focus-visible{--lift:-28px}.hand-card:focus-visible{outline:none}.hand-card:focus-visible .pcard{outline:2px solid var(--text);outline-offset:3px}.hand-card.is-playable:focus-visible .pcard{outline-color:var(--gold)}.winner{justify-content:center;align-items:center;gap:var(--sp-md);text-align:center;padding:var(--sp-xl);border-radius:var(--sp-lg);z-index:3;animation:fade var(--dur-medium) var(--ease-enter);background:radial-gradient(120% 70% at 50% 42%,#176b518c 0%,#08251cf2 55%,#061c15fb 100%);flex-direction:column;display:flex;position:absolute;inset:0}.winner-kicker{color:var(--muted);letter-spacing:.04em;font-size:12px}.winner-title{font-family:var(--serif);letter-spacing:-.02em;color:var(--gold);text-shadow:0 2px 24px var(--gold-glow);text-wrap:balance;animation:riseGlow var(--dur-long) var(--ease-enter);font-size:clamp(28px,8vw,46px);font-weight:600}.winner-sub{color:var(--text);text-wrap:pretty;max-width:34ch;font-size:14px}.btn-gold{font-family:var(--sans);color:#3a2a08;background:linear-gradient(180deg, #f1c75f 0%, var(--gold) 100%);border-radius:var(--r-btn);min-height:44px;margin-top:var(--sp-xs);box-shadow:0 6px 18px var(--gold-glow), inset 0 1px 0 #fff6;cursor:pointer;transition:transform var(--dur-micro) var(--ease-move), box-shadow var(--dur-short) var(--ease-move);border:0;padding:12px 22px;font-size:15px;font-weight:700}.btn-gold:hover{box-shadow:0 10px 24px var(--gold-glow), inset 0 1px 0 #fff6;transform:translateY(-1px)}.btn-gold:active{transform:translateY(0)}.btn-gold:focus-visible{outline:2px solid var(--text);outline-offset:3px}.devbar{align-items:center;gap:var(--sp-sm) var(--sp-md);margin-top:var(--sp-lg);padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-btn);color:var(--muted);background:#0000002e;border:1px dashed #ffffff24;flex-wrap:wrap;font-size:12px;display:flex}.devbar-tag{letter-spacing:.03em;color:#ffffff73;font-weight:700}.seg{align-items:center;gap:6px;display:flex}.seg-label{color:#ffffff80}.seg-track{border-radius:var(--r-full);background:#00000047;padding:2px;display:flex}.seg-btn{color:var(--muted);border-radius:var(--r-full);cursor:pointer;background:0 0;border:0;padding:5px 10px;font-size:12px;font-weight:600}.seg-btn.is-on{color:var(--text);background:#ffffff1f}.seg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.devbar-toggle{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.devbar-toggle input{accent-color:var(--gold)}.devbar-deal{color:var(--text);border-radius:var(--r-full);cursor:pointer;background:0 0;border:1px solid #fff3;margin-left:auto;padding:6px 14px;font-size:12px;font-weight:600}.devbar-deal:hover{background:#ffffff14}.devbar-deal:focus-visible,.devbar-toggle:focus-within{outline:2px solid var(--gold);outline-offset:2px}@media (width>=640px){.table{--hand-w:62px;--hand-h:87px;--hand-overlap:22px}.felt{padding:var(--sp-xl) var(--sp-xl) var(--sp-2xl)}.cue{font-size:18px}.opp{width:72px}.opp-name{font-size:12px}}@keyframes pop{0%{opacity:.4;transform:scale(.7)}60%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes deal{0%{opacity:0;transform:rotate(var(--rot)) translateY(42px)}}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--gold-glow)}70%{box-shadow:0 0 0 7px #e8b23a00}to{box-shadow:0 0 #e8b23a00}}@keyframes riseGlow{0%{opacity:0;transform:scale(.92)translateY(10px)}}@keyframes fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.cue-dot{animation:none}}.app{align-items:center;gap:var(--sp-lg);min-height:100%;padding:var(--sp-xl) var(--sp-md) var(--sp-2xl);flex-direction:column;display:flex}.brand{font-family:var(--serif);letter-spacing:-.01em;color:var(--text);font-size:22px;font-weight:600}.brand em{color:var(--gold);font-style:italic}@media (width>=640px){.brand{font-size:26px}}