:root{--void: #15111f;--void-deep: #0b0913;--void-edge: #0a0810;--cream: #f5edd8;--cream-2: #ece0c2;--cream-edge: #e6d9b6;--ink: #221d31;--muted: #a79fc4;--panel: #1d1730;--panel-2: #211a35;--panel-line: #3a2f55;--red: #e8384f;--red-d: #9c2233;--red-light: #ff8496;--blue: #3d7bf4;--blue-d: #234aa0;--green: #2fbf71;--green-d: #1c7a47;--gold: #ffce4d;--gold-d: #b9a877;--purple: #7d5fff;--purple-d: #4a37a0;--font-display: "DotGothic16", system-ui, sans-serif;--font-num: "Archivo", system-ui, sans-serif;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--r-card: 9px;--r-btn: 12px;--r-panel: 12px;--r-frame: 20px;--card-w: clamp(44px, 11.5vw, 64px);--card-h: calc(var(--card-w) * 1.44);--control-h: clamp(40px, 5vw, 46px);--back-w: calc(var(--card-w) * .4);--back-h: calc(var(--back-w) * 1.44);--seat-w: clamp( 66px, 19vw, 128px );--gutter: clamp(8px, 2.2vw, 22px)}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--void-edge)}body{min-height:100vh;min-height:100dvh;background:var(--void-edge);color:var(--cream);font-family:var(--font-display);-webkit-font-smoothing:antialiased}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:var(--gutter)}.frame{position:relative;width:100%;max-width:980px;margin:auto;background:radial-gradient(120% 90% at 50% 16%,#221a36 0%,var(--void) 45%,var(--void-deep) 100%);border-radius:var(--r-frame);box-shadow:0 0 0 2px #2c2440,0 24px 60px #0009,inset 0 0 120px #0000008c;overflow:hidden;padding:clamp(12px,2.4vw,24px)}.frame:before,.frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;z-index:1}.frame:before{background:radial-gradient(130% 120% at 50% 40%,transparent 58%,rgba(0,0,0,.5) 100%)}.frame:after{background:repeating-linear-gradient(rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.3}.scene{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s-4)}.event-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none;border-radius:inherit}.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}.brand{font-size:clamp(20px,4.6vw,26px);letter-spacing:1px;color:var(--cream);text-shadow:0 2px 0 #000,0 0 18px rgba(255,206,77,.25);text-wrap:balance}.brand .accent{color:var(--gold)}.code-copy{display:inline-flex;align-items:center;gap:8px;min-height:38px;font-family:var(--font-display);color:var(--cream);background:var(--panel-2);border:1px solid var(--panel-line);border-radius:8px;padding:4px 12px;cursor:pointer}.code-copy:hover{border-color:var(--gold-d)}.code-copy .code-val{font-size:14px;letter-spacing:2px;color:var(--gold)}.code-copy .code-act{font-size:11px;color:var(--muted)}.code-copy.big{flex-direction:column;align-items:center;gap:4px;width:100%;padding:14px 16px;background:linear-gradient(180deg,#241c3c,#1a1430);border-color:var(--gold-d);box-shadow:inset 0 0 0 1px #ffce4d26}.code-copy.big .code-label{font-size:12px;letter-spacing:3px;color:var(--gold)}.code-copy.big .code-val{font-size:clamp(30px,8vw,46px);letter-spacing:6px;line-height:1;color:var(--cream);text-shadow:0 0 22px rgba(255,206,77,.35)}.code-copy.big .code-act{font-size:13px}.code-panel{align-items:center;text-align:center;gap:var(--s-3)}.trump{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-panel);padding:6px 14px 6px 8px;box-shadow:0 0 22px #ffce4d33,inset 0 0 0 1px #ffce4d2e;animation:bob 3.6s ease-in-out infinite}.trump .em{width:32px;height:42px;border-radius:7px;background:linear-gradient(#fff8e6,#f3e4bd);display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-weight:900;font-size:22px;color:var(--ink);box-shadow:0 3px 0 var(--gold-d),0 0 16px #ffce4d8c}.trump .em.red{color:var(--red)}.trump small{display:block;font-size:11px;letter-spacing:2px;color:var(--gold)}.trump strong{font-size:15px;color:var(--cream)}.status{font-size:14px;color:var(--cream);text-align:center;background:#140f218c;border:1px solid var(--panel-line);border-radius:var(--r-panel);padding:8px 12px;text-wrap:balance}.status .taking{color:var(--red-light);font-weight:700}.role-banner{font-family:var(--font-display);font-size:clamp(20px,4.6vw,30px);font-weight:700;letter-spacing:.5px;text-align:center;text-wrap:balance;padding:4px 12px;color:var(--cream)}.role-banner.attack,.role-banner.throwin{color:var(--gold)}.role-banner.defend{color:var(--blue)}.role-banner.finish{color:var(--green)}.role-banner.fool{color:var(--red)}.role-banner.wait{color:var(--muted);font-size:clamp(15px,3vw,20px);font-weight:600}.role-banner.attack,.role-banner.throwin,.role-banner.defend,.role-banner.finish{animation:rolePulse 1.9s ease-in-out infinite}@keyframes rolePulse{0%,to{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 18px currentColor}}.arena{display:flex;flex-direction:column;gap:var(--s-3);margin:var(--s-2) 0 var(--s-1)}.sky{position:relative;min-height:clamp(168px,27vh,248px)}.seat{position:absolute;transform:translate(-50%);width:var(--seat-w);display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px 10px;background:var(--panel-2);border:1.5px solid var(--panel-line);border-radius:14px;opacity:.6;transition:opacity .2s ease,box-shadow .2s ease,border-color .2s ease}.seat.attacker{border-color:var(--gold-d)}.seat.defender{border-color:var(--blue)}.seat.taking{border-color:var(--red)}.seat.active{opacity:1;border-color:var(--gold);box-shadow:0 0 26px #ffce4d66,inset 0 0 0 1px #ffce4d40}.seat.off{opacity:.38}.seat .pname{font-size:13px;color:var(--cream);text-align:center;background:none;border:none;padding:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.seat.active .pname{color:var(--gold)}.seat-tag{font-size:11px;letter-spacing:1px;padding:1px 8px;border-radius:10px;background:var(--gold);color:#1a1326;font-weight:700}.seat.defender .seat-tag{background:var(--blue);color:#fff}.seat-tag.taking{background:var(--red);color:#fff}.seat .seat-tag{font-size:9px;letter-spacing:.5px;padding:1px 5px}.backs{display:flex;height:var(--back-h)}.back{width:var(--back-w);height:var(--back-h);border-radius:5px;margin-left:calc(var(--back-w) * -.55);background:repeating-linear-gradient(45deg,#3a2f63 0,#3a2f63 5px,#2c2350 5px,#2c2350 10px);border:1.5px solid #4a3d7a;box-shadow:0 3px 6px #0006}.back:first-child{margin-left:0}.cnt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.you-plate{display:flex;align-items:center;justify-content:center;gap:var(--s-3);align-self:center;padding:5px 16px;border-radius:12px;border:1.5px solid var(--panel-line);background:var(--panel-2);opacity:.85}.you-plate.active{opacity:1;border-color:var(--gold);box-shadow:0 0 22px #ffce4d59}.you-plate.defender{border-color:var(--blue)}.you-plate.taking{border-color:var(--red)}.you-plate .pname{color:var(--cream);font-size:15px}.you-plate.active .pname{color:var(--gold)}.center-band{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);width:100%;max-width:620px;margin:0 auto;min-height:var(--card-h);padding:var(--s-2) var(--s-5) var(--s-5)}.center-band .pile{flex:0 0 auto}.center-band .pairs{flex:1 1 auto}.pile{position:relative;width:var(--card-w);height:var(--card-h)}.pile .d{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--r-card);background:repeating-linear-gradient(45deg,#3a2f63 0,#3a2f63 5px,#2c2350 5px,#2c2350 10px);border:1.5px solid #4a3d7a;box-shadow:0 6px 12px #00000073}.pile .d.discard{background:linear-gradient(#2a2142,#181128);border-color:#3a2f55}.pile .d2{transform:translate(3px,-3px)}.pile .d3{transform:translate(6px,-6px)}.pile .tag{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);width:max-content;font-size:11px;letter-spacing:.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.pairs{display:flex;flex-wrap:wrap;gap:28px var(--s-3);justify-content:center;align-items:center}.pair{position:relative;width:var(--card-w);height:var(--card-h)}.pair .def{position:absolute;top:14%;left:26%;transform:rotate(12deg)}.pair.open .card{outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 6px #00000038,0 12px 20px #00000073,0 0 16px #ffce4d8c}.pair.taking .card{outline:2px solid var(--red);outline-offset:2px;box-shadow:0 6px #00000038,0 12px 20px #00000073,0 0 16px #e8384f99}.pair-badge{position:absolute;bottom:-16px;left:50%;transform:translate(-50%);z-index:3;font-size:9px;font-weight:700;letter-spacing:.3px;padding:1px 6px;border-radius:8px;white-space:nowrap;color:var(--gold);background:#ffce4d2e;border:1px solid var(--gold)}.empty{color:var(--muted);font-size:14px}.card{width:var(--card-w);height:var(--card-h);border-radius:var(--r-card);background:linear-gradient(var(--cream),var(--cream-2));border:1px solid var(--cream-edge);box-shadow:0 6px #00000038,0 12px 20px #00000073;position:relative;color:var(--ink);font-family:var(--font-num);font-weight:900;-webkit-user-select:none;user-select:none}.card.red{color:var(--red)}.card .r{position:absolute;top:5px;left:7px;font-size:calc(var(--card-w) * .28);line-height:.9;text-align:center;font-variant-numeric:tabular-nums}.card .r small{display:block;font-size:calc(var(--card-w) * .2)}.card .r.b{top:auto;left:auto;bottom:5px;right:7px;transform:rotate(180deg)}.card .pip{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--card-w) * .55)}.card.joker{background:radial-gradient(circle at 50% 32%,#2a2142,#161029);border:1px solid var(--gold);color:var(--gold);box-shadow:0 6px #0000004d,0 12px 20px #00000080,inset 0 0 18px #ffce4d26}.card.joker .pip{text-shadow:0 0 14px rgba(255,206,77,.7)}.card.joker .r{font-family:var(--font-display);font-weight:600;font-size:calc(var(--card-w) * .2);letter-spacing:1px}.hand-wrap{padding-top:var(--s-4)}.hand-label{text-align:center;font-size:13px;color:var(--muted);margin-bottom:var(--s-2);font-variant-numeric:tabular-nums}.hand{display:flex;justify-content:center;align-items:flex-end;padding:38px var(--s-3) 32px;overflow:visible}.card-hit{background:none;border:none;padding:0;flex:0 0 auto;position:relative;cursor:grab;border-radius:var(--r-card);transform-origin:bottom center;transition:transform .2s cubic-bezier(.34,1.56,.64,1);touch-action:none}.card-deal,.card-tilt{display:block;transform-origin:bottom center}.card-hit:hover{z-index:5;transform:translateY(-20px) scale(1.08)}.card-hit.sel{outline:3px solid var(--gold);outline-offset:2px;transform:translateY(-14px)}.card-hit.sel:hover{transform:translateY(-26px) scale(1.08)}.card-hit.dragging{opacity:.22}.card-hit:active{cursor:grabbing}.card-hit.sel .card{box-shadow:0 6px #00000038,0 12px 20px #00000073,0 0 22px #ffce4d80}.foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}.log{font-size:13px;color:var(--cream);background:#140f21cc;border:1px solid var(--panel-line);border-radius:8px;padding:8px 12px;flex:1 1 240px;max-height:150px;overflow-y:auto}.log ul{list-style:none;display:flex;flex-direction:column;gap:3px}.acts{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;align-content:flex-start;justify-content:flex-end;flex:1 1 260px;overflow-y:auto;max-height:232px;padding-bottom:12px;margin-bottom:-12px}.btn{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.3px;color:#fff;border:none;border-radius:var(--r-btn);height:var(--control-h);padding:0 16px;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.3);transition:transform .12s ease-out,filter .12s ease-out}.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}.btn:active{transform:translateY(3px) scale(.97);filter:brightness(1.45)}.btn:disabled{opacity:.42;cursor:default}.btn:focus-visible,.card-hit:focus-visible,.input:focus-visible,.code-copy:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.btn.green{background:var(--green);color:var(--ink);text-shadow:none;box-shadow:0 5px 0 var(--green-d)}.btn.red{background:var(--red);box-shadow:0 5px 0 var(--red-d)}.btn.blue{background:var(--blue);box-shadow:0 5px 0 var(--blue-d)}.btn.purple{background:var(--purple);box-shadow:0 5px 0 var(--purple-d)}.btn.gold{background:var(--gold);color:var(--ink);text-shadow:none;box-shadow:0 5px 0 var(--gold-d)}.btn.cream{background:var(--cream);color:var(--ink);text-shadow:none;box-shadow:0 5px 0 var(--cream-edge)}.btn.ghost{background:var(--panel);color:var(--cream);box-shadow:0 5px #15101f;border:1px solid var(--panel-line)}.btn.sm{font-size:14px;height:calc(var(--control-h) - 4px);padding:0 13px}.lobby{display:flex;flex-direction:column;gap:var(--s-4);width:100%;max-width:520px;margin:0 auto}.panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-panel);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}.panel h2{font-size:14px;color:var(--gold);letter-spacing:1px}.field{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}.field label{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}.field.trump-change{flex-direction:column;align-items:stretch;gap:var(--s-3)}.trump-slider{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}.trump-name{flex:0 0 auto}.trump-slider input[type=range]{flex:1;min-width:120px;accent-color:var(--gold);cursor:pointer}.trump-slider input[type=range]:disabled{cursor:default;opacity:.4}.trump-val{font-variant-numeric:tabular-nums;color:var(--muted);min-width:6ch;text-align:right;font-size:13px}.input{font-family:var(--font-display);font-size:15px;padding:0 12px;height:var(--control-h);border-radius:9px;border:1px solid var(--panel-line);background:#120e1d;color:var(--cream)}.input::placeholder{color:var(--muted)}.players{list-style:none;display:flex;flex-direction:column;gap:5px}.players li{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:8px;padding:6px 12px;overflow-wrap:anywhere}.muted{color:var(--muted)}.tag{font-size:11px;color:var(--gold)}.err{color:var(--red)}.row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}.icon-btn{font-family:var(--font-display);font-size:18px;line-height:1;background:var(--panel);color:var(--cream);border:1px solid var(--panel-line);border-radius:10px;min-width:40px;min-height:40px;cursor:pointer;transition:filter .12s ease-out}.icon-btn:hover{filter:brightness(1.15)}.icon-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.drag-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-55%) rotate(-5deg);filter:drop-shadow(0 18px 22px rgba(0,0,0,.6));opacity:.96}.arena.droppable{outline:2px dashed var(--gold);outline-offset:-6px;border-radius:16px;background:#ffce4d0d}.reveal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);background:#0806109e;pointer-events:none;perspective:900px}.reveal-card{width:clamp(96px,26vw,132px);height:clamp(138px,37vw,190px);border-radius:var(--r-card);background:linear-gradient(var(--cream),var(--cream-2));border:1px solid var(--cream-edge);box-shadow:0 10px #00000040,0 22px 44px #0009,0 0 50px #ffce4d8c;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}.reveal-label{font-family:var(--font-num);font-weight:900;font-size:clamp(40px,11vw,60px);color:var(--ink)}.reveal-label.red{color:var(--red)}.reveal-cap{font-size:13px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}.trump .em{animation:trumpGlow .8s ease-out}@keyframes trumpGlow{0%{box-shadow:0 3px 0 var(--gold-d),0 0 #ffce4d00}35%{box-shadow:0 3px 0 var(--gold-d),0 0 34px #ffce4df2}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){*,.card-hit,.pair .card,.trump,.role-banner,.seat,.btn{animation:none!important;transition:none!important}.card-hit:hover,.card-hit.sel,.card-hit.sel:hover,.btn:active{transform:none}}.sound-panel{display:flex;align-items:center;gap:var(--s-3)}.volume{display:flex;align-items:center;gap:var(--s-2);flex:1}.volume input[type=range]{flex:1;accent-color:var(--gold);cursor:pointer}.volume-val{font-variant-numeric:tabular-nums;color:var(--muted);min-width:3.5ch;text-align:right;font-size:13px}@keyframes wf-breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.hand .card{animation:wf-breathe 5.5s ease-in-out infinite}.hand .card-hit:nth-child(2n) .card{animation-delay:-1.9s}.hand .card-hit:nth-child(3n) .card{animation-delay:-3.5s}@keyframes wf-shake{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-6px) rotate(-3deg)}35%{transform:translate(5px) rotate(2deg)}55%{transform:translate(-4px) rotate(-1.5deg)}75%{transform:translate(3px) rotate(1deg)}90%{transform:translate(-1px)}}.card-hit.shake .card{animation:wf-shake .45s ease-in-out}.flip3d{position:relative;transform-style:preserve-3d}.flip3d .card,.flip3d .card-back-face{backface-visibility:hidden}.card-back-face{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotateY(180deg);border-radius:var(--r-card);background:repeating-linear-gradient(45deg,#3a2f63 0,#3a2f63 5px,#2c2350 5px,#2c2350 10px);border:1.5px solid #4a3d7a;box-shadow:0 6px 12px #00000073}