: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;--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);--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;display:flex;flex-direction:column;gap:var(--s-4);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:50}.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:.35}.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{font-size:13px;color:var(--muted);border:1px solid var(--panel-line);border-radius:7px;padding:3px 9px}.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 .you{color:var(--gold);font-weight:700}.status .fool{color:var(--red);font-weight:700}.opp{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-5);padding:var(--s-1) 0}.pod{display:flex;flex-direction:column;align-items:center;gap:6px}.pname{font-size:13px;color:var(--cream);background:var(--panel-2);border:1px solid var(--panel-line);border-radius:20px;padding:3px 12px;text-align:center;max-width:min(180px,60vw);overflow-wrap:anywhere}.pod.active .pname{color:#1a1326;background:var(--gold);border-color:var(--gold);box-shadow:0 0 20px #ffce4d73}.pod.off .pname{opacity:.5}.backs{display:flex}.back{width:28px;height:40px;border-radius:6px;margin-left:-17px;background:repeating-linear-gradient(45deg,#3a2f63 0,#3a2f63 5px,#2c2350 5px,#2c2350 10px);border:1.5px solid #4a3d7a;box-shadow:0 4px 8px #0006}.back:first-child{margin-left:0}.cnt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.center{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-5);padding:var(--s-4) 0 var(--s-5);min-height:var(--card-h)}.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: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)}.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-x:auto}.card-hit{background:none;border:none;padding:0;margin-left:-16px;flex:0 0 auto;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-hit:first-child{margin-left:0}.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-content:flex-start;justify-content:flex-end;flex:1 1 260px;max-height:220px;overflow-y:auto}.btn{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.3px;color:#fff;border:none;border-radius:var(--r-btn);padding:10px 16px 12px;min-height:44px;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){filter:brightness(1.08)}.btn:active{transform:translateY(3px) scale(.97)}.btn:disabled{opacity:.42;cursor:default}.btn:focus-visible,.card-hit:focus-visible,.input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.btn.green{background:var(--green);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;padding:8px 12px 10px;min-height:40px}.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}.input{font-family:var(--font-display);font-size:15px;padding:9px 11px;border-radius:9px;border:1px solid var(--panel-line);background:#120e1d;color:var(--cream);min-height:40px}.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}.status.your-turn{animation:pulse 1.8s ease-in-out infinite}.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}.center.droppable{outline:2px dashed var(--gold);outline-offset:10px;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)}}@keyframes pulse{0%,to{box-shadow:0 0 #ffce4d00}50%{box-shadow:0 0 20px #ffce4d73}}@media(prefers-reduced-motion:reduce){*,.card-hit,.pair .card,.trump,.status.your-turn,.pod.active .pname,.btn{animation:none!important;transition:none!important}.card-hit:hover,.card-hit.sel,.card-hit.sel:hover,.btn:active{transform:none}}