@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Nunito:wght@500;600;700;800&display=swap";:root{--felt-deep:#0f3d2e;--felt-mid:#1a5c43;--felt-light:#2a7a58;--wood:#5c3317;--wood-light:#8b5a2b;--cream:#f3e6c8;--ink:#1a140f;--gold:#e2b14a;--danger:#c44536;--card-w:72px;--card-h:100px;--shadow:0 10px 30px #00000059;color:var(--cream);background:var(--felt-deep);font-family:Nunito,system-ui,sans-serif;font-weight:600;line-height:1.35}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background-color:#0000;background-image:radial-gradient(at 30% 20%,#50b4782e,#0000 50%),radial-gradient(at 80% 80%,#00000059,#0000 45%),linear-gradient(160deg,#145239 0%,#0c2f23 45%,#164a35 100%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box}button,input,select{font:inherit}button{cursor:pointer;background:var(--gold);color:var(--ink);border:none;border-radius:12px;padding:.7rem 1.1rem;font-weight:800;transition:transform .12s,filter .12s;box-shadow:0 3px #9a7420}button:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}button:active:not(:disabled){box-shadow:none;transform:translateY(2px)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}button.ghost{color:var(--cream);background:0 0;box-shadow:inset 0 0 0 2px #f3e6c859}button.danger{background:var(--danger);color:#fff;box-shadow:0 3px #8a2f24}.app-shell{max-width:1100px;margin:0 auto;padding:1.25rem}.lobby{align-content:center;gap:1.5rem;min-height:100dvh;padding:2rem 1.25rem 3rem;display:grid}.brand{letter-spacing:-.03em;text-shadow:0 4px #00000040;margin:0;font-family:Fraunces,Georgia,serif;font-size:clamp(3.2rem,12vw,5.5rem);font-weight:700;line-height:.95;animation:.7s both rise}.tagline{opacity:.9;max-width:28rem;margin:0;font-size:1.1rem;animation:.7s 80ms both rise}.panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);background:#0a231ab8;border:1px solid #f3e6c81f;border-radius:20px;gap:.85rem;max-width:420px;padding:1.25rem;animation:.7s .14s both rise;display:grid}.panel label{gap:.35rem;font-size:.9rem;display:grid}.panel input,.panel select{color:var(--cream);background:#ffffff14;border:1px solid #f3e6c840;border-radius:10px;padding:.65rem .75rem}.panel input::placeholder{color:#f3e6c873}.row{flex-wrap:wrap;gap:.6rem;display:flex}.status{color:#b7f0cf;min-height:1.25rem;font-size:.92rem}.error{color:#ffb4a8}.table-wrap{gap:1rem;display:grid}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.topbar h1{margin:0;font-family:Fraunces,Georgia,serif;font-size:1.8rem}.scoreboard{flex-wrap:wrap;gap:.75rem;display:flex}.pill{background:#00000047;border-radius:999px;padding:.35rem .8rem;font-size:.9rem}.pill.glow{background:#e2b14a33;box-shadow:inset 0 0 0 1px #e2b14a59}.corner-badges{z-index:30;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:.6rem;display:flex;position:sticky;top:.5rem}.corner-badges>*{pointer-events:auto}.trump-badge,.score-badge{border:2px solid var(--gold);background:#0c1c14eb;border-radius:16px;width:fit-content;padding:.45rem .75rem .5rem;animation:.35s both pop;box-shadow:0 10px 28px #00000073}.trump-badge{grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:center;column-gap:.45rem;margin-left:auto;display:grid}.trump-badge .trump-label,.score-badge .score-label{letter-spacing:.12em;color:var(--gold);grid-column:1/-1;font-size:.7rem;font-weight:800}.trump-badge .trump-symbol{font-size:2rem;font-weight:800;line-height:1}.trump-badge .trump-name{font-size:1.05rem;font-weight:800}.trump-badge.red .trump-symbol,.trump-badge.red .trump-name{color:#ff6b6b}.trump-badge.black .trump-symbol,.trump-badge.black .trump-name{color:#f3e6c8}.score-badge{gap:.2rem;min-width:7.5rem;display:grid}.score-badge .score-row{grid-template-columns:1fr auto auto;align-items:baseline;gap:.35rem;font-weight:800;display:grid}.score-badge .score-who{opacity:.9;font-size:.85rem}.score-badge .score-game{font-variant-numeric:tabular-nums;color:var(--cream);font-size:1.25rem}.score-badge .score-hand{color:var(--gold);font-variant-numeric:tabular-nums;text-align:right;min-width:1.6rem;font-size:.8rem}.score-badge .score-row.us .score-who{color:#5dcb8a}.score-badge .score-row.them .score-who{color:#f0a0a0}@media (width>=720px){.corner-badges{margin:0;position:fixed;top:1rem;left:1rem;right:1rem}.trump-badge{margin-left:0}}.status-banner{background:#0006;border:1px solid #f3e6c826;border-radius:14px;padding:.7rem 1rem;animation:.35s both rise}.status-banner.waiting{border-color:#e2b14a8c;box-shadow:0 0 0 1px #e2b14a26}.status-banner .ready-bits{opacity:.85}.ready-flash{color:#b7f0cf;animation:.45s both pop}.tiny{opacity:.7;font-size:.8rem}.felt{background:radial-gradient(circle at 50% 45%, #ffffff0d, transparent 40%), linear-gradient(145deg, var(--felt-light), var(--felt-deep));border:10px solid var(--wood);border-radius:28px;grid-template-rows:auto 1fr auto;gap:.75rem;min-height:420px;padding:1rem;display:grid;position:relative;box-shadow:inset 0 0 60px #00000059,0 20px 50px #0006}.seats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;display:grid}@media (width>=720px){.seats{grid-template-columns:repeat(4,minmax(0,1fr))}}.table-cross{gap:.55rem;margin-bottom:.35rem;display:grid}.cross-top,.cross-bottom{justify-content:center;display:flex}.cross-top .seat,.cross-bottom .seat{width:min(100%,220px)}.cross-mid{grid-template-columns:1fr auto 1fr;align-items:start;gap:.45rem;display:grid}.cross-left,.cross-right{min-width:0}.cross-center-label{place-items:center;display:grid}.seat.partner-seat{border-color:#5dcb8a8c}.seat.seat-you{border-style:dashed}.seat{position:relative}.card-count-badge{font-variant-numeric:tabular-nums;background:var(--gold);color:#1a2a20;border-radius:999px;place-items:center;min-width:1.55rem;height:1.55rem;padding:0 .35rem;font-size:.85rem;font-weight:900;display:grid;position:absolute;top:-.35rem;right:-.35rem;box-shadow:0 4px 10px #00000059}.seat.receiving-deal{border-color:var(--gold);animation:.55s dealPulse;transform:scale(1.03);box-shadow:0 0 0 2px #e2b14a73}.deal-banner{font-size:1.02rem}.deal-stage{min-height:calc(var(--card-h) + 2.5rem);justify-items:center;gap:.85rem;display:grid}.deal-fly{min-height:var(--card-h);place-items:center;display:grid}.deal-fly.go .card{animation:.5s cubic-bezier(.2,.85,.25,1) both dealSwoosh}.deal-packet{min-height:var(--card-h);justify-content:center;align-items:center;display:flex;position:relative}.deal-packet .card{margin-left:-28px}.deal-packet .card:first-child{margin-left:0}.deal-packet-label{border:1px solid var(--gold);color:var(--gold);background:#0c1c14eb;border-radius:999px;padding:.15rem .45rem;font-size:.8rem;font-weight:800;position:absolute;bottom:-.35rem;right:-.35rem}.deal-fly.to-middle .card{transform:scale(.92)}.middle-pot{justify-items:center;gap:.35rem;display:grid}.deal-counts{flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:28rem;display:flex}.deal-count-chip{background:#00000059;border:1px solid #f3e6c833;border-radius:999px;padding:.3rem .65rem;font-size:.85rem;font-weight:700}.deal-count-chip.hot{border-color:var(--gold);color:var(--gold);background:#e2b14a38}.deal-count-chip.done{opacity:.55}.seat.has-play{justify-items:center;gap:.35rem;display:grid}.seat-play{min-height:calc(var(--card-h) * .92);place-items:center;display:grid}.seat-play .card{width:calc(var(--card-w) * .92);height:calc(var(--card-h) * .92)}.play-slot{width:calc(var(--card-w) * .92);height:calc(var(--card-h) * .92);background:#0000002e;border:1.5px dashed #f3e6c847;border-radius:10px}.cross-left .seat,.cross-right .seat{width:100%}.cross-left .seat-play,.cross-right .seat-play{margin-top:.15rem}.swing-pill{color:var(--gold);white-space:nowrap;background:#e2b14a38;border:1px solid #e2b14a73;border-radius:999px;padding:.35rem .75rem;font-size:.9rem;font-weight:800}.swing-pill.muted{opacity:.7;color:var(--cream);background:#00000040;border-color:#f3e6c840}.swing-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.trick-summary{background:#00000052;border-radius:12px;max-width:36rem;margin:0;padding:.55rem .75rem;font-size:.92rem;line-height:1.35}.seat{background:#00000038;border:2px solid #0000;border-radius:14px;padding:.55rem .7rem}.seat.active,.seat.waiting-seat{border-color:var(--gold);animation:1.4s infinite pulse;box-shadow:0 0 0 1px #e2b14a59}.seat.ready-seat{border-color:#5dcb8a;box-shadow:0 0 0 1px #5dcb8a40}.seat .name{font-weight:800}.seat-num{min-width:1.6rem;color:var(--gold);background:#e2b14a38;border-radius:6px;margin-right:.15rem;padding:.05rem .35rem;font-size:.85rem;display:inline-block}.seat .meta{opacity:.8;font-size:.8rem}.center-stage{text-align:center;place-items:center;gap:.75rem;padding:.5rem;display:grid}.trick{min-height:var(--card-h);flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.hand-area{gap:.6rem;display:grid}.hand{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.card{width:var(--card-w);height:var(--card-h);color:#1a1a1a;-webkit-user-select:none;user-select:none;background:#fffaf0;border:1px solid #d9cbb0;border-radius:10px;place-items:center;font-weight:800;transition:transform .15s,box-shadow .15s;display:grid;position:relative;box-shadow:0 6px 14px #00000047}.card.red{color:#c62828}.card.playable{cursor:pointer}.card.playable:hover{transform:translateY(-10px)scale(1.04);box-shadow:0 14px 24px #00000059}.card.dim{opacity:.4;filter:grayscale(.4)}.card.suit-ok{box-shadow:0 6px 14px #00000047,0 0 0 2px #e2b14a8c}.card.selected{outline:3px solid var(--gold);z-index:2;transform:translateY(-14px)scale(1.05);box-shadow:0 16px 28px #00000073}.card.fly-in,.deal-in{animation:.45s cubic-bezier(.2,.8,.2,1) both dealIn}.trick-card{animation:.4s cubic-bezier(.2,.85,.25,1) both playToTable}.trick-card.winner,.seat-play.won-trick .trick-card{outline:3px solid var(--gold);z-index:3;border-radius:12px;transform:scale(1.06);box-shadow:0 0 0 3px #e2b14a59,0 12px 24px #00000059}.trick-pause-banner{font-size:1.05rem}.card-seat-tag{text-overflow:ellipsis;white-space:nowrap;color:#fff;background:#000000b3;border-radius:4px;max-width:90%;padding:1px 4px;font-size:.65rem;line-height:1.2;position:absolute;top:4px;left:5px;overflow:hidden}.card .rank{font-size:1.15rem;line-height:1}.card .suit{font-size:1.4rem}.card.joker-card{color:#ffe566;background:linear-gradient(160deg,#1a1430 0%,#3b2060 45%,#1a1430 100%);border:2px solid #e2b14a;grid-template-rows:auto 1fr auto auto;gap:0;padding:.2rem .15rem .25rem}.card.joker-card .joker-corner{opacity:.9;justify-self:start;font-size:.75rem;line-height:1}.card.joker-card .joker-emblem{font-size:1.55rem;line-height:1}.card.joker-card .joker-word{letter-spacing:.08em;font-size:.72rem;font-weight:900;line-height:1}.card.joker-card .joker-sub{letter-spacing:.14em;color:#f3e6c8;opacity:.9;font-size:.58rem;font-weight:800}.card.joker-big{box-shadow:0 6px 14px #00000047,inset 0 0 0 1px #ffe56659}.card-role-tag{letter-spacing:.06em;white-space:nowrap;border-radius:4px;padding:1px 4px;font-size:.55rem;font-weight:900;line-height:1.15;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.jick-tag{color:#fff;background:#c62828}.jack-tag{color:var(--gold);background:#1a2a20}.card.jick-card{box-shadow:0 6px 14px #00000047,0 0 0 2px #c628288c}.card.trump-jack-card{box-shadow:0 6px 14px #00000047,0 0 0 2px #e2b14aa6}.card.back{color:#0000;background:repeating-linear-gradient(45deg,#1e3a8a,#1e3a8a 6px,#2747a0 6px 12px)}.hint{opacity:.85;font-size:.95rem}.actions{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.bid-row button{min-width:2.6rem;padding:.65rem .75rem}.trump-pick{gap:.55rem}.trump-suit-btn{justify-content:center;align-items:center;gap:.4rem;min-width:7.5rem;display:inline-flex}.trump-suit-symbol{font-size:1.35rem;line-height:1}.trump-suit-btn.red .trump-suit-symbol{color:#c62828}.trump-suit-btn.black .trump-suit-symbol{color:#1a1a1a}.summary{background:#00000059;border-radius:14px;max-width:36rem;padding:.9rem 1rem}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{background:#00000038}50%{background:#e2b14a29}}@keyframes dealIn{0%{opacity:0;transform:translateY(-24px)scale(.85)rotate(-4deg)}to{opacity:1;transform:translateY(0)scale(1)rotate(0)}}@keyframes dealSwoosh{0%{opacity:0;transform:translateY(-48px)scale(.55)rotate(-18deg)}55%{opacity:1;transform:translateY(6px)scale(1.08)rotate(3deg)}to{opacity:1;transform:translateY(0)scale(1)rotate(0)}}@keyframes dealPulse{0%{transform:scale(1)}40%{transform:scale(1.05)}to{transform:scale(1.03)}}@keyframes playToTable{0%{opacity:0;transform:translateY(40px)scale(.7)}60%{transform:translateY(-6px)scale(1.05)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media (width<=520px){:root{--card-w:58px;--card-h:82px}}.fun-bar{justify-items:center;gap:.45rem;margin-top:.35rem;display:grid}.fun-toggle{color:var(--cream);background:#0006;border-radius:999px;padding:.45rem 1rem;font-size:1rem;font-weight:800;box-shadow:inset 0 0 0 1px #f3e6c847}.fun-bar.open .fun-toggle{color:var(--gold);border:1px solid #e2b14a8c}.fun-panel{justify-items:center;gap:.45rem;width:100%;animation:.25s both rise;display:grid}.fun-reacts{flex-wrap:wrap;justify-content:center;gap:.45rem;display:flex}.help-fab{z-index:45;background:var(--gold);color:#1a2a20;border-radius:999px;width:3rem;height:3rem;font-size:1.45rem;font-weight:900;line-height:1;position:fixed;bottom:1rem;right:1rem;box-shadow:0 8px 22px #0006}.help-backdrop{z-index:50;background:#0000008c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.help-dialog{border:2px solid var(--gold);background:#123024;border-radius:18px;gap:.65rem;width:min(100%,22rem);padding:1.15rem 1.2rem 1rem;animation:.25s both pop;display:grid;box-shadow:0 18px 40px #00000080}.help-dialog h2{color:var(--gold);margin:0;font-family:Fraunces,Georgia,serif;font-size:1.45rem}.help-dialog p{margin:0;font-size:1.12rem;line-height:1.4}.help-dialog button{margin-top:.25rem}.fun-btn{color:var(--cream);background:#00000059;border-radius:999px;padding:.45rem .75rem;font-size:1.25rem;box-shadow:inset 0 0 0 1px #f3e6c833}.fun-btn.play{text-align:left;flex:1;font-size:.95rem}.ghost-fun{font-size:.95rem}.soundboard{background:#0a231ad9;border:1px solid #f3e6c81f;border-radius:16px;gap:.55rem;padding:.85rem;display:grid}.sound-list{gap:.35rem;display:grid}.sound-row{align-items:center;gap:.35rem;display:flex}.sound-label{gap:.25rem;font-size:.9rem;display:grid}.sound-label input{color:var(--cream);background:#ffffff14;border:1px solid #f3e6c840;border-radius:10px;padding:.55rem .65rem}.tiny-btn{padding:.35rem .55rem;font-size:.85rem}.reaction-layer{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.float-react{justify-items:center;animation:2.1s forwards floatUp;display:grid;position:absolute;bottom:18%;left:50%;transform:translate(-50%)}.float-emoji{filter:drop-shadow(0 6px 10px #00000059);font-size:3rem}.float-name{opacity:.9;font-size:.85rem}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,30px)scale(.7)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-120px)scale(1.15)}}
