:root{--ground:#1a100c;--panel:#241712;--copper:#c8783a;--copper-light:#dd9350;--copper-dark:#6b4a33;--cream:#f8e6cc;--sand:#f5d3a8;--muted:#e3c7a3;--gold:#e7d28a;--pink:#e8466c;--pink-text:#ff8aa5;--face:#fbe9d0;--ink-red:#c21f45;--ink-black:#2a1810;--display:"Bungee", system-ui, sans-serif;--body:"Rubik", system-ui, sans-serif;--card-lg-w:112px;--card-lg-h:160px;--hand-card-w:84px;--hand-card-h:120px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--ground);color:var(--cream);font-family:var(--body);-webkit-tap-highlight-color:transparent;overflow-x:hidden}button,input{font:inherit;color:inherit}.background{z-index:-1;background-color:var(--ground);background-position:50%;background-size:cover;position:fixed;inset:0}.panel{background:var(--panel);border:3px solid var(--copper);box-shadow:6px 6px 0 var(--ground)}.btn{border:3px solid var(--copper);background:var(--ground);cursor:pointer;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:0 18px;font-weight:700;transition:transform .1s,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--sand)}.btn:active:not(:disabled){transform:translate(2px,2px)}.btn:disabled{border-color:var(--copper-dark);color:#b99a7a;cursor:default}.btn.primary{background:var(--pink);color:var(--ground);font-family:var(--display);box-shadow:4px 4px 0 var(--ground);border:0;font-weight:400}.btn.primary:active:not(:disabled){box-shadow:2px 2px 0 var(--ground)}.btn.primary:disabled{background:var(--copper-dark);color:#3a2418}.btn.small{min-height:36px;padding:0 12px;font-size:14px}.btn:focus-visible,.card:focus-visible,.draw-pile:focus-visible,.suit-btn:focus-visible,.pile:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.icon-btn{cursor:pointer;width:40px;height:40px;color:var(--muted);background:0 0;border:0;font-size:24px}.tag{font-family:var(--display);background:var(--copper);color:var(--ground);padding:3px 7px;font-size:11px}.tag.gold{background:var(--gold)}.tag.big{padding:6px 12px;font-size:20px;animation:.35s cubic-bezier(.2,.9,.3,1.3) both slam}.penalty{font-family:var(--display);background:var(--ground);color:var(--pink-text);padding:2px 6px;font-size:13px}.problem{color:var(--pink-text);margin:0;font-weight:700}.waiting{gap:6px;padding:0 10px;display:inline-flex}.waiting span{background:var(--copper);width:10px;height:10px;animation:1.2s infinite blink}.waiting span:nth-child(2){animation-delay:.2s}.waiting span:nth-child(3){animation-delay:.4s}@keyframes blink{50%{opacity:.2}}@keyframes slam{0%{opacity:0;transform:scale(2.4)rotate(-10deg)}60%{opacity:1;transform:scale(.92)rotate(2deg)}to{transform:none}}.landing,.lobby{place-content:center;justify-items:center;gap:28px;min-height:100dvh;padding:24px 16px;display:grid}.wordmark{font-family:var(--display);color:var(--sand);text-align:center;text-shadow:4px 4px 0 var(--ground);margin:0;font-size:clamp(32px,8vw,64px);font-weight:400}.landing-form,.lobby-panel{flex-direction:column;gap:16px;width:min(420px,100vw - 32px);padding:24px;display:flex}.field{min-width:0;color:var(--muted);flex-direction:column;gap:6px;font-size:13px;font-weight:700;display:flex}.field input{border:3px solid var(--copper);background:var(--ground);width:100%;min-width:0;min-height:48px;color:var(--cream);padding:0 12px;font-size:18px}.field input:focus{border-color:var(--gold);outline:none}.field.code input{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase}.join-row{align-items:flex-end;gap:10px;display:flex}.join-row .field{flex:1}.join-row .btn{flex:none;min-height:48px}.room-code{font-family:var(--display);text-align:center;letter-spacing:.08em;color:var(--sand);font-size:clamp(40px,14vw,56px)}.seat-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.seat-list li{background:var(--ground);align-items:center;gap:10px;min-height:48px;padding:6px 10px;display:flex}.seat-list li.me{box-shadow:inset 4px 0 0 var(--pink)}.seat-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:700;overflow:hidden}.avatar{background:var(--copper);width:32px;height:32px;color:var(--ground);font-family:var(--display);flex:none;place-items:center;display:grid}.lobby-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.table-screen{flex-direction:column;min-height:100dvh;display:flex}.bar{background:var(--panel);border-bottom:5px solid var(--copper);box-shadow:0 4px 0 var(--ground), 0 8px 0 var(--gold);align-items:center;gap:14px;padding:10px 16px;display:flex}.room-chip{font-family:var(--display);background:var(--copper);color:var(--ground);padding:5px 10px;font-size:14px}.timer{background:#3a2418;flex:1;height:10px}.timer div{background:var(--pink);height:100%}.timer.window div{background:var(--gold)}.table-main{flex-direction:column;flex:1;gap:18px;width:100%;max-width:1180px;margin:0 auto;padding:24px 20px 16px;display:flex}.opponents{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;display:grid}.opponent{background:var(--panel);border:3px solid var(--copper);flex-direction:column;gap:10px;padding:12px 14px;transition:box-shadow .2s,border-color .2s,transform .2s;display:flex;position:relative}.opponent.active{border-color:var(--gold);box-shadow:6px 6px 0 var(--gold);transform:translate(-2px,-2px)}.opponent.missed{border-color:var(--pink);box-shadow:6px 6px 0 var(--pink)}.opponent.away{opacity:.55}.opponent-head{align-items:center;gap:8px;min-height:24px;display:flex}.opponent-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:17px;font-weight:700;overflow:hidden}.bot-icon{fill:none;width:20px;height:20px;stroke:var(--muted);stroke-width:2px;stroke-linecap:square;flex:none}.fan{align-items:center;height:32px;padding-left:8px;display:flex}.fan .card-back{margin-left:-8px}.opponent-count{font-family:var(--display);color:var(--sand);margin-left:auto;font-size:28px}.call-out{animation:.35s both slam}.pop{z-index:20;pointer-events:none;font-family:var(--display);color:var(--pink);text-shadow:3px 3px 0 var(--ground), -1px -1px 0 var(--ground);white-space:nowrap;font-size:34px;animation:1.8s ease-out forwards pop;position:absolute;top:0;left:50%}.pop.last{color:var(--ground);background:var(--gold);text-shadow:none;box-shadow:4px 4px 0 var(--ground);padding:4px 10px;font-size:18px}@keyframes pop{0%{opacity:0;transform:translate(-50%,10px)scale(.4)}15%{opacity:1;transform:translate(-50%,-10px)scale(1.15)}70%{opacity:1;transform:translate(-50%,-18px)scale(1)}to{opacity:0;transform:translate(-50%,-40px)scale(1)}}.felt{border:6px solid var(--copper);min-height:320px;box-shadow:inset 0 0 0 6px var(--ground), inset 0 0 0 10px var(--gold);background:#1a100c8c;flex:1;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;padding:28px;transition:border-color .3s;display:grid;position:relative;overflow:hidden}.my-turn .felt{border-color:var(--pink)}.wheel{pointer-events:none;animation:240s linear infinite turn;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes turn{to{transform:translate(-50%,-50%)rotate(360deg)}}.draw-pile{cursor:default;background:0 0;border:0;justify-self:end;padding:0;position:relative}.draw-pile .card-back{box-shadow:inset 0 0 0 4px var(--gold), 6px 6px 0 var(--ground), 10px 10px 0 var(--copper)}.draw-pile.playable{cursor:pointer}.draw-pile.playable .card-back{box-shadow:inset 0 0 0 4px var(--gold), 0 0 0 5px var(--pink), 10px 10px 0 4px var(--ground);animation:1.4s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-6px)}}.pile-count{font-family:var(--display);background:var(--ground);color:var(--sand);padding:2px 8px;font-size:15px;position:absolute;bottom:-12px;right:-12px}.pile-zone{position:relative}.pile{width:var(--card-lg-w);height:var(--card-lg-h);cursor:pointer;background:0 0;border:0;padding:0;display:block;position:relative}.pile-card{transform:translateX(var(--dx,0)) rotate(var(--r,0));position:absolute;inset:0}.pile-card .card{box-shadow:inset 0 0 0 5px var(--face), inset 0 0 0 8px var(--copper), 5px 5px 0 2px var(--ground)}.pile-card.arrive{animation:.42s cubic-bezier(.2,.8,.2,1) both arrive}@keyframes arrive{0%{transform:translate(var(--fx,0), var(--fy,-200px)) rotate(calc(var(--r,0deg) - 40deg)) scale(.45)}to{transform:rotate(var(--r,0))}}.pile-card.staged .card{box-shadow:inset 0 0 0 5px var(--face), inset 0 0 0 8px var(--copper), 0 0 0 4px var(--pink), 8px 8px 0 4px var(--ground)}.peek{z-index:30;background:var(--panel);border:3px solid var(--gold);box-shadow:6px 6px 0 var(--ground);opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:min(86vw,420px);padding:10px 12px;transition:opacity .15s,transform .15s;display:flex;position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%)translateY(8px)}.pile-zone:hover .peek,.pile:focus-visible+.peek,.peek.open{opacity:1;transform:translate(-50%)}.peek-name{font-family:var(--display);color:var(--gold);font-size:13px}.peek-cards{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.peek-cards.many{gap:6px 0;padding-left:26px}.peek-cards.many .card{margin-left:-26px}.peek-cards.mini{gap:4px}.status{flex-direction:column;justify-self:start;align-items:flex-start;gap:12px;display:flex;position:relative}.pickup{font-family:var(--display);background:var(--pink);color:var(--ground);box-shadow:6px 6px 0 var(--ground);padding:6px 14px;font-size:76px;line-height:1;animation:.4s cubic-bezier(.2,.9,.3,1.3) both slam}.pickup.outgoing{background:var(--gold);font-size:40px;animation:none}.called{background:var(--face);color:var(--ink-black);box-shadow:6px 6px 0 var(--ground);padding:4px 14px;font-size:64px;line-height:1;animation:.4s cubic-bezier(.2,.9,.3,1.3) both slam}.called.red{color:var(--ink-red)}.direction{background:var(--ground);border:3px solid var(--copper);fill:none;width:44px;height:44px;stroke:var(--sand);stroke-width:2.6px;stroke-linecap:square;padding:6px;transition:transform .4s}.direction.ccw{transform:scaleX(-1)}.me{flex-direction:column;gap:6px;display:flex;position:relative}.me>.pop{top:40px}.controls{flex-wrap:wrap;justify-content:center;gap:10px;min-height:48px;display:flex}.controls .btn{min-height:48px}.last-card:not(:disabled){border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 3px var(--ground), 0 0 0 6px var(--gold)}.last-card.declared{background:var(--gold);color:var(--ground);border-color:var(--gold)}.suit-picker{gap:10px;display:flex}.suit-btn{background:var(--face);width:64px;height:64px;color:var(--ink-black);box-shadow:4px 4px 0 var(--ground);cursor:pointer;border:0;font-size:40px;animation:.3s both slam}.suit-btn.red{color:var(--ink-red)}.hand-wrap{padding:0 44px;position:relative}.hand{height:calc(var(--hand-card-h) + 30px);position:relative}.hand .card{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;transition:left .18s,transform .15s,filter .15s;position:absolute;bottom:4px}.hand .card.playable{cursor:pointer;box-shadow:inset 0 0 0 4px var(--face), inset 0 0 0 7px var(--copper), 0 0 0 4px var(--pink), 4px 4px 0 4px var(--ground);transform:translateY(-20px)}.hand .card.playable:hover{transform:translateY(-26px)}.hand .card.dim{filter:brightness(.82)saturate(.6)}.hand .card.dragging{cursor:grabbing;filter:none;transition:transform .12s,filter .15s;transform:translateY(-30px)rotate(-4deg)scale(1.06)}.arrange{flex-direction:column;gap:4px;display:flex;position:absolute;bottom:4px;right:0}.arrange-btn{border:2px solid var(--copper);background:var(--ground);width:38px;height:36px;color:var(--sand);font-family:var(--display);cursor:pointer;grid-auto-flow:column;place-items:center;gap:1px;padding:0;font-size:12px;line-height:1;display:grid}.arrange-btn:hover{border-color:var(--sand)}.arrange-btn:active{transform:translate(1px,1px)}.arrange-btn span{align-self:end;font-size:9px}.arrange-btn.suits{font-family:system-ui,sans-serif;font-size:15px}.arrange-btn.suits span{align-self:center;font-size:15px}.arrange-btn .red{color:var(--pink-text)}.arrange-btn svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:square;width:20px;height:20px}.status.hidden{visibility:hidden}.deal-layer{z-index:40;pointer-events:none;position:fixed;inset:0}.flight{animation:.38s cubic-bezier(.3,.7,.3,1) forwards fly;position:fixed;transform:translate(-50%,-50%)}@keyframes fly{to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(180deg) scale(.85)}}.flip-card{perspective:900px;position:absolute;inset:0}.flip-inner{width:100%;height:100%;transform-style:preserve-3d;position:relative}.flip-card.flipping .flip-inner{animation:.6s cubic-bezier(.3,.7,.3,1.2) forwards flip}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)scale(1.15)}to{transform:rotateY(180deg)}}.flip-back,.flip-front{backface-visibility:hidden;position:absolute;inset:0}.flip-back .card-back{width:100%;height:100%}.flip-front{transform:rotateY(180deg)}.history-btn{width:40px;padding:0}.history-btn svg{fill:none;stroke:currentColor;stroke-width:3.5px;flex:none;width:22px;height:22px}.history-btn.on{background:var(--copper);color:var(--ground)}.history{z-index:60;background:var(--panel);border:3px solid var(--copper);width:min(340px,100vw - 24px);box-shadow:6px 6px 0 var(--ground);flex-direction:column;display:flex;position:fixed;top:76px;bottom:12px;right:12px}.history-close{z-index:1;width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:26px;line-height:1;position:absolute;top:2px;right:6px}.history-list{overscroll-behavior:contain;flex:1;margin:0;padding:8px 0;list-style:none;overflow-y:auto}.entry{border-left:4px solid #0000;grid-template-columns:76px 1fr;align-items:center;gap:8px;padding:5px 12px;display:grid}.entry:nth-child(2n){background:#0000002e}.entry.mine{border-left-color:var(--copper)}.entry.nine{border-left-color:var(--gold)}.entry.start{border-bottom:2px dashed var(--copper-dark)}.entry-name{color:var(--sand);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;overflow:hidden}.entry-body{flex-wrap:wrap;align-items:center;gap:3px;display:flex}.entry-suit{color:var(--cream);margin-left:4px;font-size:20px;line-height:1}.entry-suit.red{color:var(--pink-text)}.entry-badge{font-family:var(--display);background:var(--ground);color:var(--sand);margin-left:4px;padding:1px 6px;font-size:12px}.entry-badge.pink{background:var(--pink);color:var(--ground)}s.entry-badge{color:var(--muted);text-decoration-thickness:2px}.entry-arrow{color:var(--copper-light)}.entry-target{font-size:13px;font-weight:700}.card.card-xs{width:24px;height:34px;font-family:var(--display);box-shadow:inset 0 0 0 2px var(--copper), 2px 2px 0 var(--ground);flex-direction:column;justify-content:center;align-items:center;font-size:11px;line-height:1;display:inline-flex}.mini-suit{font-family:system-ui,sans-serif;font-size:12px}.entry .card-back.card-xs{width:24px;height:34px}.card{background:var(--face);box-shadow:inset 0 0 0 4px var(--face), inset 0 0 0 7px var(--copper), 4px 4px 0 var(--ground);border:0;flex:none;padding:0;position:relative}.card.red{color:var(--ink-red)}.card.black{color:var(--ink-black)}.card-lg{width:var(--card-lg-w);height:var(--card-lg-h)}.card-md{width:var(--hand-card-w);height:var(--hand-card-h)}.card-sm{width:52px;height:74px}.card-xs{width:20px;height:30px}.corner{font-family:var(--display);flex-direction:column;align-items:center;font-size:22px;line-height:1;display:flex;position:absolute;top:9%;left:11%}.card-lg .corner{font-size:26px}.card-sm .corner{font-size:14px}.corner-suit{font-family:system-ui,sans-serif;font-size:.8em}.pip{place-items:center;padding-top:18%;font-size:42px;display:grid;position:absolute;inset:0}.card-lg .pip{font-size:56px}.card-sm .pip{font-size:24px}.card-back{background:var(--copper);color:var(--ground);box-shadow:inset 0 0 0 3px var(--gold);border:2px solid var(--ground);place-items:center;display:grid}.card-back svg{width:56%;height:56%}.card-back.card-xs svg{display:none}.win{z-index:50;background:radial-gradient(circle at 50% 40%,#241712d9,#1a100cf5);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:16px;animation:.4s both fade;display:flex;position:fixed;inset:0;overflow:hidden}@keyframes fade{0%{opacity:0}}.win-burst{aspect-ratio:1;place-items:center;width:min(420px,80vw);animation:.9s cubic-bezier(.2,.9,.3,1.2) both grow;display:grid;position:relative}.win-burst svg{width:100%;height:100%;animation:18s linear infinite spin;position:absolute;inset:0}.win-burst .wheel{width:62%;height:62%;animation:40s linear infinite spin-reverse}@keyframes grow{0%{transform:scale(0)rotate(-90deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spin-reverse{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(-360deg)}}.win-name{z-index:1;font-family:var(--display);color:var(--sand);text-align:center;text-shadow:5px 5px 0 var(--pink), 10px 10px 0 var(--ground);margin-top:-6vh;font-size:clamp(40px,10vw,88px);animation:.6s cubic-bezier(.2,.9,.3,1.3) .5s both slam}.standings{flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none;animation:.5s 1s both rise;display:flex}.standings li.ready{border-color:var(--gold)}.tick{fill:none;width:18px;height:18px;stroke:var(--gold);stroke-width:3.4px;stroke-linecap:square;animation:.3s both slam}.standings li{background:var(--panel);border:3px solid var(--copper);align-items:center;gap:10px;padding:8px 12px;font-weight:700;display:flex}.standing-count{font-family:var(--display);color:var(--sand);align-items:center;gap:6px;display:flex}.win-actions{opacity:0;gap:12px;transition:opacity .4s;display:flex}.win.stage-2 .win-actions{opacity:1}@keyframes rise{0%{opacity:0;transform:translateY(20px)}}.confetti{pointer-events:none;position:absolute;inset:0}.bit{width:12px;height:12px;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;position:absolute;top:-20px}.bit.diamond{transform:rotate(45deg)}.bit.tri{clip-path:polygon(50% 0,100% 100%,0 100%);width:14px}.bit.bar{width:5px;height:18px}@keyframes fall{to{transform:translate(var(--drift), 110vh) rotate(var(--spin))}}.toast{z-index:60;background:var(--pink);max-width:calc(100vw - 32px);color:var(--ground);box-shadow:4px 4px 0 var(--ground);cursor:pointer;border:0;padding:12px 18px;font-weight:700;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.offline{z-index:60;background:var(--pink);width:14px;height:14px;animation:1s infinite blink;position:fixed;top:12px;right:12px}@media (width<=900px){:root{--card-lg-w:84px;--card-lg-h:120px;--hand-card-w:62px;--hand-card-h:90px}.table-main{gap:12px;padding:12px 10px 8px}.opponents{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}.opponent{gap:4px;padding:8px 10px}.opponent-name{font-size:14px}.bot-icon{display:none}.opponent-count{font-size:22px}.fan .card-back{display:none}.fan{height:26px;padding:0}.pop{font-size:26px}.felt{gap:14px;min-height:230px;padding:18px 10px}.card-lg .corner{font-size:20px}.card-lg .pip{font-size:40px}.card-md .corner{font-size:16px}.card-md .pip{font-size:30px}.pickup{font-size:44px}.called{font-size:40px}.direction{width:36px;height:36px}.wheel{width:420px;height:420px}.me{margin-top:auto}.hand-wrap{padding:0 42px 0 4px}.arrange-btn{width:34px;height:28px}.history{max-height:55dvh;top:64px;bottom:auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.bit{display:none}}