:root{--bg-0:#02030a;--bg-1:#060a18;--bg-2:#0b1228;--panel:#0e162ec7;--panel-edge:#5aaaff47;--gold:#ffd24a;--gold-dim:#b9912a;--saber-blue:#38b6ff;--saber-cyan:#59f3ff;--saber-green:#56ff8a;--saber-red:#ff3b4e;--saber-purple:#b66bff;--ink:#eaf2ff;--ink-dim:#93a4c8;--card-face:#f5f1e4;--card-red:#c0202e;--card-black:#14171f;--ok:#56ff8a;--danger:#ff3b4e;--radius:14px;--shadow:0 8px 28px #0000008c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{color:var(--ink);background:radial-gradient(1200px 700px at 50% -10%, #11203f 0%, transparent 60%), radial-gradient(900px 600px at 90% 110%, #1a1030 0%, transparent 55%), linear-gradient(180deg, var(--bg-1), var(--bg-0));overscroll-behavior:none;-webkit-user-select:none;user-select:none;background-attachment:fixed;font-family:Segoe UI,Trebuchet MS,system-ui,sans-serif;font-size:13px;overflow:hidden}#root:before{content:"";pointer-events:none;opacity:.5;background-image:radial-gradient(1px 1px at 20% 30%,#fff,#0000),radial-gradient(1px 1px at 75% 18%,#cfe6ff,#0000),radial-gradient(1px 1px at 40% 70%,#fff,#0000),radial-gradient(2px 2px at 85% 60%,#fff,#0000),radial-gradient(1px 1px at 12% 85%,#bcd2ff,#0000),radial-gradient(1px 1px at 60% 45%,#fff,#0000),radial-gradient(1.5px 1.5px at 30% 12%,#fff,#0000);animation:6s ease-in-out infinite alternate twinkle;position:fixed;inset:0}@keyframes twinkle{0%{opacity:.32}to{opacity:.6}}h1,h2,h3{letter-spacing:.06em;margin:0;font-weight:800}.app{flex-direction:column;max-width:720px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}.sw-btn{appearance:none;border:1px solid var(--panel-edge);color:var(--ink);letter-spacing:.04em;cursor:pointer;background:linear-gradient(#283c6e99,#101a36b3);border-radius:12px;padding:11px 16px;font-size:14px;font-weight:700;transition:transform 80ms,box-shadow .2s,filter .2s;box-shadow:0 2px #0006}.sw-btn:active{transform:translateY(1px)scale(.99)}.sw-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.sw-btn.primary{color:#fff;background:linear-gradient(#2a6cff,#1840b6);border-color:#7fb6ff;box-shadow:0 0 18px #38b6ff80}.sw-btn.gold{color:#2a1c00;background:linear-gradient(#ffd870,#d9a72c);border-color:#ffe9a8;box-shadow:0 0 16px #ffd24a73}.sw-btn.danger{color:#fff;background:linear-gradient(#f56,#b51322);border-color:#ff9aa4;box-shadow:0 0 16px #ff3b4e80}.sw-btn.ghost{background:#141e3c80}.sw-btn.sm{border-radius:10px;padding:7px 11px;font-size:12px}.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tag{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);font-size:11px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#5a96ff59;border-radius:8px}.card{width:var(--cw,52px);height:calc(var(--cw,52px) * 1.42);color:#37475f;cursor:pointer;background:linear-gradient(160deg,#eef1f6,#dce2ec);border:1px solid #c2cad8;border-radius:8px;flex-direction:column;flex:none;justify-content:flex-start;padding:3px 4px;transition:transform .12s,box-shadow .15s,margin .12s;display:flex;position:relative;box-shadow:0 3px 8px #0006}.card .corner{flex-direction:column;align-items:flex-start;font-weight:800;line-height:.96;display:flex}.card .corner .r{font-size:calc(var(--cw,52px) * .36)}.card .corner .s{font-size:calc(var(--cw,52px) * .46);margin-top:1px}.card.s-spades{color:#15309e;background:linear-gradient(160deg,#c9dcfb,#9cbcf0);border-color:#88a8e6}.card.s-hearts{color:#bd0f2c;background:linear-gradient(160deg,#fbcdd7,#f29db0);border-color:#e495a4}.card.s-diamonds{color:#cf6500;background:linear-gradient(160deg,#fbe0b6,#f1c178);border-color:#e6bd76}.card.s-clubs{color:#0c7f37;background:linear-gradient(160deg,#c4ecd1,#98d9af);border-color:#8ad0a2}.card.s-joker{color:#4f4868;background:linear-gradient(160deg,#e6e1f0,#cfc7e2);border-color:#bfb6d6}.card.s-joker .corner .s{font-size:calc(var(--cw,52px) * .3);letter-spacing:0;margin-top:0}.joker-helm{width:calc(var(--cw,52px) * .66);height:calc(var(--cw,52px) * .66);margin-top:1px;display:block}.card.selected{box-shadow:0 0 0 2px var(--saber-cyan), 0 10px 18px #00000080;transform:translateY(-16px)}.card.dim{filter:brightness(.7)saturate(.7);cursor:default}.card.disabled{cursor:default}.card.back{color:#8fb6ff;background:radial-gradient(circle at 50% 40%,#24407e 0%,#0c1838 60%),#0c1838;border:1px solid #2f55a8;justify-content:center;align-items:center}.card.back:after{content:"⚙";font-size:calc(var(--cw,52px) * .6);opacity:.65;text-shadow:0 0 10px #2a6cff}.card.tiny{--cw:30px}.card.mini{--cw:42px;border-radius:6px;padding:2px 4px}.hand{flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:0;min-height:116px;padding:22px 6px 4px;display:flex;overflow:hidden}.hand .card.selected{z-index:5}.meld{border:1px solid var(--panel-edge);background:#080e208c;border-radius:9px;align-items:center;gap:0;padding:3px 4px;display:inline-flex}.meld .card.mini{margin-left:-26px}.meld .card.mini:first-child{margin-left:0}.meld.canasta-limpa{border-color:var(--saber-cyan);box-shadow:0 0 12px #59f3ff66}.meld.canasta-suja{border-color:var(--gold);box-shadow:0 0 12px #ffd24a59}.meld.canasta-real{border-color:var(--saber-purple);box-shadow:0 0 16px #b66bff8c}.meld.target{outline:2px dashed var(--saber-green);outline-offset:2px}.meld-badge{background:#0006;border-radius:5px;margin-left:3px;padding:1px 4px;font-size:9px;font-weight:800}.topbar{align-items:center;gap:8px;padding:5px 10px;font-size:12px;display:flex}.topbar .score-pill{align-items:center;gap:8px;font-weight:800;display:flex}.table-scroll{flex-direction:column;flex:1;gap:8px;padding:4px 8px 8px;display:flex;overflow-y:auto}.seat{align-items:center;gap:10px;padding:8px 10px;transition:opacity .3s,transform .2s;display:flex}.seat:not(.active){opacity:.6}.seat.active{opacity:1;box-shadow:0 0 0 2px var(--gold), 0 0 24px #ffd24a8c;animation:1.3s ease-in-out infinite seatPulse;transform:scale(1.06)}@keyframes seatPulse{50%{box-shadow:0 0 0 2px var(--gold), 0 0 34px #ffd24ad9}}.playing-badge{letter-spacing:.08em;color:#2a1c00;background:linear-gradient(#ffd870,#d9a72c);border-radius:6px;margin-top:2px;padding:1px 5px;font-size:9px;font-weight:800;box-shadow:0 0 10px #ffd24a99}.dock.my-turn{box-shadow:0 -2px 22px #ffd24a47}.dock.my-turn .hint{color:var(--gold);font-weight:800}.seat.partner{border-left:3px solid var(--saber-green)}.seat.opponent{border-left:3px solid var(--saber-red)}.avatar{border:1px solid var(--panel-edge);background:radial-gradient(circle at 40% 30%,#2a3a66,#0c1430);border-radius:50%;flex:none;place-items:center;width:44px;height:44px;font-size:24px;display:grid}.seat .who{flex:1;min-width:0}.seat .who .nm{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:800;overflow:hidden}.seat .who .ti{color:var(--ink-dim);font-size:11px}.seat .count{align-items:center;gap:4px;font-size:13px;font-weight:800;display:flex}.thinking{color:var(--saber-cyan);font-size:12px;animation:1s infinite pulse}@keyframes pulse{50%{opacity:.4}}.center-piles{justify-content:center;align-items:center;gap:22px;padding:6px 0 2px;display:flex}.pile{flex-direction:column;align-items:center;gap:4px;display:flex}.pile .lbl{color:var(--ink-dim);letter-spacing:.1em;font-size:11px}.pile .stk{position:relative}.seat.compact{text-align:center;flex-direction:column;align-items:center;gap:4px;min-width:84px;padding:7px 8px}.seat.compact .avatar{width:34px;height:34px;font-size:19px}.seat.compact .who{flex:none;width:100%}.seat.compact .who .nm{font-size:12px;line-height:1.1}.seat.compact .who .ti{font-size:10px}.seat.compact .count{font-size:12px}.board{align-items:stretch;gap:10px;padding:4px 2px;display:flex}.draw-pile{flex-direction:column;flex:none;align-items:center;gap:4px;display:flex}.draw-pile .lbl{color:var(--ink-dim);letter-spacing:.12em;font-size:10px}.stock-stack{cursor:default;width:44px;height:62px;position:relative}.stock-stack .card.tiny{--cw:44px;margin:0;position:absolute;inset:0}.stock-stack .s2{opacity:.6;transform:translate(3px,3px)}.stock-stack .s3{opacity:.35;transform:translate(6px,6px)}.discard-wrap{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.discard-wrap .lbl{color:var(--ink-dim);letter-spacing:.12em;justify-content:space-between;font-size:10px;display:flex}.discard-tray{border:1px solid var(--panel-edge);background:#080e2080;border-radius:12px;align-items:center;min-height:50px;padding:5px 6px;display:flex;overflow-x:auto}.discard-tray .card.mini{--cw:30px;margin-left:-11px}.discard-tray .card.mini:first-child{margin-left:0}.discard-tray .card.mini.top{box-shadow:0 0 0 2px var(--gold), 0 4px 10px #00000080;z-index:2}.discard-empty{color:var(--ink-dim);opacity:.5;padding:0 6px;font-size:12px}.can-draw{cursor:pointer}.stock-stack.can-draw{border-radius:8px;animation:1.6s ease-in-out infinite drawPulse}.discard-tray.can-draw{border-color:var(--saber-green);animation:1.6s ease-in-out infinite drawPulse}@keyframes drawPulse{50%{box-shadow:0 0 16px #56ff8a80}}.table{flex:1;grid-template-rows:1fr 1fr;grid-template-columns:auto 1fr auto;gap:3px;min-height:0;padding:4px;display:grid;overflow:hidden}.seat-ul{grid-area:1/1;place-self:start center}.seat-bl{grid-area:2/1;place-self:end center}.seat-ur{grid-area:1/3;place-self:start center}.seat-br{grid-area:2/3;place-self:end center}.center{flex-direction:column;grid-area:1/2/span 2;gap:4px;min-width:0;min-height:0;display:flex;overflow:hidden}.center .board{flex:none}.turn{text-align:center;flex:none;min-height:14px;font-size:12px;font-weight:800}.meld-area{border:2px solid var(--panel-edge);border-radius:14px;flex-direction:column;flex:1 1 0;min-height:0;padding:3px 6px 5px;display:flex}.meld-area.theirs{background:#ff3b4e0f;border-color:#ff5a688c}.meld-area.mine{background:#56ff8a0f;border-color:#56ff8a80}.melds-scroll{flex:auto;min-height:0;overflow:hidden auto}.meld-area .melds-row{align-content:flex-start}.meld-area .zone-label{flex:none;font-size:10px}.seat.side{text-align:center;flex-direction:column;gap:3px;width:60px;min-width:60px;padding:7px 4px}.seat.side .avatar{width:32px;height:32px;font-size:18px}.seat.side .who{width:100%}.seat.side .who .nm{white-space:normal;font-size:10.5px;line-height:1.05}.seat.side .who .ti{display:none}.seat.side .count{font-size:11px}.melds-zone{flex-direction:column;gap:6px;display:flex}.melds-row{flex-wrap:wrap;align-content:flex-start;gap:5px;padding:3px 2px;display:flex;overflow:visible}.zone-label{align-items:center;gap:8px;display:flex}.zone-label .dot{border-radius:50%;width:9px;height:9px}.dot.mine{background:var(--saber-green)}.dot.theirs{background:var(--saber-red)}.dock{border-top:1px solid var(--panel-edge);padding-bottom:env(safe-area-inset-bottom,0);background:linear-gradient(#060a1866,#040610eb)}.actions{flex-wrap:wrap;justify-content:center;gap:5px;padding:4px 8px 8px;display:flex}.actions .sw-btn{padding:8px 12px;font-size:13px}.hint{text-align:center;color:var(--gold);min-height:14px;padding:1px 8px;font-size:11px;line-height:1.3}.screen{flex-direction:column;flex:1;gap:16px;padding:18px 16px 28px;display:flex;overflow-y:auto}.logo{text-align:center;margin-top:8vh}.logo .crawl{letter-spacing:.3em;color:var(--gold);text-shadow:0 0 16px #ffd24a80;font-size:clamp(13px,3.6vw,18px)}.logo .title{color:#fff;text-shadow:0 0 24px #38b6ff8c,0 4px #0a1a44;margin:6px 0;font-size:clamp(40px,13vw,72px);line-height:.92}.logo .sub{color:var(--ink-dim);letter-spacing:.2em;font-size:13px}.menu-actions{flex-direction:column;gap:12px;margin-top:28px;display:flex}.char-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;display:grid}.char-card{cursor:pointer;text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;transition:transform .1s;display:flex}.char-card:active{transform:scale(.97)}.char-card .avatar{width:50px;height:50px;font-size:26px}.char-card .cn{font-size:12px;font-weight:800;line-height:1.05}.char-card .cs{color:var(--ink-dim);font-size:10px}.char-card.selected{outline:2px solid var(--saber-cyan);box-shadow:0 0 16px #59f3ff66}.char-card.light{border:1px solid #56ff8a4d}.char-card.dark{border:1px solid #ff3b4e4d}.char-card.neutral{border:1px solid var(--panel-edge)}.side-badge{letter-spacing:.1em;text-transform:uppercase;font-size:9px}.side-light{color:var(--saber-green)}.side-dark{color:var(--saber-red)}.side-neutral{color:var(--ink-dim)}.overlay{z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#02040cb8;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{width:100%;max-width:460px;max-height:86vh;padding:18px;overflow-y:auto}.modal h2{text-align:center;margin-bottom:12px}.score-table{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px}.score-table td,.score-table th{text-align:right;padding:5px 6px}.score-table th:first-child,.score-table td:first-child{text-align:left}.score-table tr.total td{border-top:1px solid var(--panel-edge);color:var(--gold);font-weight:800}.win-banner{text-align:center;color:var(--gold);text-shadow:0 0 20px #ffd24a99;margin-bottom:8px;font-size:26px}.log-feed{color:var(--ink-dim);max-height:120px;padding:6px 10px;font-size:12px;line-height:1.5;overflow-y:auto}.log-feed .latest{color:var(--ink)}.toast{border:1px solid var(--gold);color:var(--gold);z-index:40;background:#080e20f2;border-radius:12px;padding:10px 16px;font-weight:700;animation:.25s toastIn;position:fixed;bottom:96px;left:50%;transform:translate(-50%);box-shadow:0 0 20px #ffd24a66}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,10px)}}.install-banner{z-index:60;border-bottom:1px solid var(--gold);background:linear-gradient(#101a36fa,#0a1026fa);align-items:center;gap:10px;max-width:720px;margin:0 auto;padding:10px 12px;animation:.5s both slideDown;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 4px 20px #00000080}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}}.install-banner .ib-icon{font-size:24px}.install-banner .ib-text{flex-direction:column;flex:1;font-size:11.5px;line-height:1.3;display:flex}.install-banner .ib-text b{color:var(--gold);font-size:13px}.install-banner .ib-text span{color:var(--ink-dim)}@keyframes dealIn{0%{opacity:0;transform:translateY(46px)scale(.82)rotate(-6deg)}60%{opacity:1}to{opacity:1;transform:translateY(0)scale(1)rotate(0)}}.card.deal-in{animation:.85s cubic-bezier(.22,1,.36,1) both dealIn}@keyframes discardLand{0%{opacity:0;transform:translate(-30px,-120px)rotate(-28deg)scale(1.18)}70%{opacity:1}to{opacity:1;transform:translate(0)rotate(0)scale(1)}}.card.discard-land{animation:.5s ease-out both discardLand}@keyframes meldPop{0%{opacity:0;transform:translateY(-18px)scale(.5)}to{opacity:1;transform:translateY(0)scale(1)}}.card.meld-pop{animation:.5s cubic-bezier(.2,1,.3,1.4) both meldPop}@keyframes pileFloat{50%{transform:translateY(-3px)}}.center-piles .stk{animation:3.2s ease-in-out infinite pileFloat}@keyframes turnPulse{50%{text-shadow:0 0 18px var(--gold)}}.deal-overlay{z-index:50;background:radial-gradient(700px 500px at 50% 45%,#14285099,#0000 70%),#02040cf5;flex-direction:column;justify-content:center;align-items:center;gap:18px;animation:.4s both overlayFade;display:flex;position:fixed;inset:0}.deal-overlay.out{animation:.5s forwards overlayOut}@keyframes overlayFade{0%{opacity:0}}@keyframes overlayOut{to{opacity:0;visibility:hidden}}.deal-stage{width:220px;height:200px;position:relative}.deal-stage .dcard{background:radial-gradient(circle at 50% 38%,#24407e,#0c1838 62%);border:1px solid #2f55a8;border-radius:9px;width:70px;height:99px;margin:-50px 0 0 -35px;animation:.9s ease-in-out riffle,.95s cubic-bezier(.5,0,.5,1) 1.05s forwards dealFly;position:absolute;top:50%;left:50%;box-shadow:0 6px 16px #0000008c}.deal-stage .dcard:after{content:"⚙";color:#6f9bff;opacity:.7;place-items:center;font-size:30px;display:grid;position:absolute;inset:0}@keyframes riffle{0%,to{transform:translate(var(--ox,0), 0) rotate(var(--or,0deg))}25%{transform:translate(calc(var(--ox,0px) - 26px), -6px) rotate(-10deg)}50%{transform:translate(var(--ox,0), 4px) rotate(2deg)}75%{transform:translate(calc(var(--ox,0px) + 26px), -4px) rotate(9deg)}}@keyframes dealFly{to{transform:translate(var(--tx,0), var(--ty,0)) rotate(var(--tr,0deg)) scale(.7);opacity:0}}.deal-title{letter-spacing:.12em;color:#fff;text-shadow:0 0 22px #38b6ff99;font-size:clamp(26px,8vw,44px);font-weight:800;animation:.6s both titlePop}.deal-sub{color:var(--gold);letter-spacing:.2em;font-size:14px;animation:.7s .1s both titlePop}@keyframes titlePop{0%{opacity:0;transform:translateY(12px)scale(.9)}}.modal{animation:.4s cubic-bezier(.2,1,.3,1.1) both modalIn}@keyframes modalIn{0%{opacity:0;transform:translateY(24px)scale(.92)}}.batida-flash{text-align:center;letter-spacing:.15em;color:var(--saber-cyan);text-shadow:0 0 24px var(--saber-cyan);margin-bottom:6px;font-size:30px;font-weight:800;animation:.8s both batidaFlash}@keyframes batidaFlash{0%{opacity:0;transform:scale(.6)}50%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.win-saber{background:linear-gradient(90deg, #fff, var(--saber-cyan));height:6px;box-shadow:0 0 18px var(--saber-cyan);border-radius:3px;margin:6px auto 14px;animation:.7s cubic-bezier(.3,0,.2,1) both ignite}@keyframes ignite{0%{opacity:0;width:0}to{opacity:1;width:78%}}.win-banner{animation:1.6s ease-in-out infinite alternate winGlow}@keyframes winGlow{0%{text-shadow:0 0 16px #ffd24a80}to{text-shadow:0 0 34px #ffd24ae6,0 0 60px #ffd24a66}}.spark{background:var(--gold);width:6px;height:6px;box-shadow:0 0 10px var(--gold);border-radius:50%;animation:1.1s ease-out forwards sparkOut;position:absolute}@keyframes sparkOut{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--sx), var(--sy)) scale(.3)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:1ms!important}}