:root{--bg:#0d1b2a;--bg2:#13283d;--felt:#16324a;--panel:#ffffff0f;--panel-b:#ffffff1f;--ink:#f2f5f8;--muted:#9fb2c4;--red:#e5484d;--yellow:#f5b301;--green:#2fa86a;--blue:#3b7cf6;--wild:#1b1f27;--accent:#ffd166;--radius:16px;--tint:var(--blue);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}button{font:inherit;color:inherit}input{font:inherit}.mono{letter-spacing:.08em;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.muted{color:var(--muted)}.screen{background:radial-gradient(1200px 700px at 50% 40%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%), radial-gradient(900px 600px at 50% 120%, var(--felt), transparent 70%), var(--bg);min-height:100dvh;padding:16px;transition:background .6s}.center-screen{flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex}.topbar{flex-wrap:wrap;align-items:center;gap:8px;max-width:1100px;margin:0 auto;display:flex}.topbar .logo{margin-right:auto}.panel{background:var(--panel);border:1px solid var(--panel-b);border-radius:var(--radius);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px}.panel h2,.panel h3{margin:0 0 8px}.logo{align-items:center;gap:14px;display:flex}.logo-cards{width:64px;height:64px;position:relative}.lc{border:2px solid #ffffffd9;border-radius:7px;width:34px;height:50px;position:absolute;top:7px;left:15px;box-shadow:0 4px 10px #00000059}.lc.red{background:var(--red);transform:rotate(-24deg)translate(-10px,4px)}.lc.yellow{background:var(--yellow);transform:rotate(-8deg)translate(-3px)}.lc.green{background:var(--green);transform:rotate(8deg)translate(4px)}.lc.blue{background:var(--blue);transform:rotate(24deg)translate(11px,4px)}.logo-text{letter-spacing:-.03em;background:linear-gradient(90deg, var(--red), var(--yellow), var(--green), var(--blue));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:56px;font-style:italic;font-weight:900}.logo.small .logo-cards{width:34px;height:34px}.logo.small .lc{border-width:1.5px;border-radius:4px;width:18px;height:26px;top:4px;left:8px}.logo.small .logo-text{font-size:26px}.tagline{color:var(--muted);text-align:center;margin:-6px 0 0}.btn{border:1px solid var(--panel-b);cursor:pointer;background:#ffffff14;border-radius:12px;padding:10px 16px;font-weight:700;transition:transform .12s,background .2s,opacity .2s}.btn:hover:not(:disabled){background:#ffffff24}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#1b1400;border-color:#0000}.btn.primary:hover:not(:disabled){background:#ffdc85}.btn.big{width:100%;padding:14px 18px;font-size:17px}.btn.small{padding:6px 12px;font-size:14px}.link{color:var(--muted);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:6px;text-decoration:underline}.chip{border:1px solid var(--panel-b);background:var(--panel);cursor:default;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}button.chip{cursor:pointer}.chip.ghost{background:0 0}.pill{color:var(--muted);white-space:nowrap;background:#ffffff1a;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700}.pill.playing{background:color-mix(in srgb, var(--green) 30%, transparent);color:#c9f2dc}input{border:1px solid var(--panel-b);width:100%;color:var(--ink);background:#00000040;border-radius:12px;outline:none;padding:12px 14px}input:focus{border-color:var(--accent)}.name-form{flex-direction:column;gap:12px;width:min(360px,100%);display:flex}.name-form label{font-weight:700}.lobby-grid{grid-template-columns:1fr 1.3fr;gap:16px;max-width:1100px;margin:28px auto 16px;display:grid}.lobby-grid .btn.big{margin:8px 0 16px}.join-row{gap:8px;display:flex}.join-row input{text-transform:uppercase;letter-spacing:.2em;font-family:ui-monospace,Menlo,monospace}.room-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.room-list li{background:#0000002e;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;display:flex}.room-list li>div{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.rules{max-width:1100px;margin:0 auto}.rules summary{cursor:pointer;font-weight:700}.rules li{color:var(--muted);margin:6px 0}.waiting{text-align:center;flex-direction:column;align-items:center;gap:12px;width:min(420px,100%);display:flex}.waiting>.muted:first-child{margin:0}.room-code{color:var(--accent);font-size:54px;font-weight:800;line-height:1}.seat-list{flex-direction:column;gap:6px;width:100%;margin:6px 0;padding:0;list-style:none;display:flex}.seat-list li{text-align:left;background:#0000002e;border-radius:12px;align-items:center;gap:10px;padding:8px 10px;display:flex}.seat-list li>span:nth-child(2){flex:1}.seat-list li.offline{opacity:.45}.seat-list em{color:var(--muted);font-style:normal}.x{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 4px;font-size:20px}.avatar{--h:200;background:hsl(var(--h) 55% 42%);border:2px solid #ffffff40;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;font-size:14px;font-weight:800;transition:box-shadow .3s;display:grid}.avatar.active{box-shadow:0 0 0 3px var(--accent), 0 0 18px var(--accent)}.card{--w:74px;--h:110px;--c:var(--wild);width:var(--w);height:var(--h);border-radius:calc(var(--w) * .14);border:calc(var(--w) * .055) solid #fff;background:repeating-linear-gradient(135deg, #ffffff12 0 6px, transparent 6px 12px), var(--c);color:#fff;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex:none;padding:0;font-weight:900;transition:transform .18s cubic-bezier(.3,1.4,.6,1),box-shadow .2s,filter .2s,opacity .2s;position:relative;box-shadow:0 6px 14px #00000059,inset 0 0 0 1px #00000026}.card:disabled{opacity:1}.card.c-red{--c:var(--red)}.card.c-yellow{--c:var(--yellow)}.card.c-green{--c:var(--green)}.card.c-blue{--c:var(--blue)}.card .corner{font-size:calc(var(--w) * .2);text-shadow:0 1px #0000004d;line-height:1;position:absolute}.card .tl{top:6%;left:9%}.card .br{bottom:6%;right:9%;transform:rotate(180deg)}.card .face{border-radius:calc(var(--w) * .12);color:var(--c);font-size:calc(var(--w) * .56);letter-spacing:-.04em;background:#fffffff2;place-items:center;line-height:1;display:grid;position:absolute;inset:16% 12%;box-shadow:inset 0 -3px #00000014}.card .face.wide{font-size:calc(var(--w) * .42)}.card.c-wild .face{background:#0f1218}.wheel{aspect-ratio:1;border-radius:50%;grid-template-columns:1fr 1fr;width:70%;display:grid;position:relative;overflow:hidden;transform:rotate(45deg)}.wheel .q.red{background:var(--red)}.wheel .q.yellow{background:var(--yellow)}.wheel .q.green{background:var(--blue)}.wheel .q.blue{background:var(--green)}.wheel b{color:#fff;font-size:calc(var(--w) * .3);text-shadow:0 2px 4px #0009;place-items:center;display:grid;position:absolute;inset:0;transform:rotate(-45deg)}.card.xs{--w:22px;--h:32px;border-width:1.5px;border-radius:4px}.card.lg{--w:100px;--h:148px}.card.back{background:radial-gradient(circle,#ffd16640,#0000 60%),repeating-linear-gradient(45deg,#1d2a3a 0 5px,#233449 5px 10px);place-items:center;display:grid}.back-mark{font-size:calc(var(--w) * .42);color:var(--accent);text-shadow:0 2px #0006;font-style:italic;font-weight:900}.card.xs .back-mark{display:none}.table{grid-template-rows:auto auto 1fr auto;gap:8px;padding-bottom:0;display:grid;overflow:hidden}.opponents{flex-wrap:wrap;justify-content:center;gap:10px 18px;padding-top:8px;display:flex}.opp{border:1px solid #0000;border-radius:14px;flex-direction:column;align-items:center;gap:6px;min-width:112px;padding:10px 12px 8px;transition:background .3s,border-color .3s;display:flex;position:relative}.opp.active{background:#ffd16614;border-color:#ffd16666}.opp.offline,.opp.waiting{opacity:.5}.opp-fan{align-items:flex-end;height:38px;display:flex}.opp-fan .card{transform:rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * .6px));margin:0 -7px}.opp-meta{align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex}.opp-meta .avatar{width:26px;height:26px;font-size:12px}.opp-name{text-overflow:ellipsis;white-space:nowrap;max-width:90px;overflow:hidden}.count{background:#00000059;border-radius:999px;padding:1px 8px;font-size:13px}.uno-badge{background:var(--red);color:#fff;border-radius:8px;padding:2px 7px;font-size:12px;font-style:italic;font-weight:900;position:absolute;top:-6px;right:-4px;transform:rotate(8deg);box-shadow:0 3px 8px #0006}.offline-tag{color:var(--muted);font-size:11px}.btn.catch{background:var(--red);z-index:2;border-color:#0000;padding:4px 10px;font-size:13px;animation:.8s infinite alternate pulse;position:absolute;bottom:-14px}.center{flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:230px;display:flex;position:relative}.piles{z-index:1;align-items:flex-start;gap:36px;display:flex}.pile{flex-direction:column;align-items:center;gap:8px;display:flex}.pile-label{color:var(--muted);font-size:13px}.color-dot{background:var(--c,#555);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:800}.color-dot.c-red{--c:var(--red)}.color-dot.c-yellow{--c:var(--yellow);color:#2a1f00}.color-dot.c-green{--c:var(--green)}.color-dot.c-blue{--c:var(--blue)}.card.back.draw-ready{cursor:pointer;box-shadow:0 0 0 3px var(--accent), 0 0 28px #ffd16673;animation:1.4s ease-in-out infinite bob}.card.landed{animation:.35s cubic-bezier(.2,1.3,.5,1) land}.dir{opacity:.13;pointer-events:none;width:300px;height:300px;margin:-170px 0 0 -150px;animation:14s linear infinite spin;position:absolute;top:50%;left:50%}.dir.ccw{animation-direction:reverse}.dir.ccw svg{transform:scaleX(-1)}.dir path{fill:none;stroke:var(--tint);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.status{text-align:center;z-index:1;min-height:24px;font-weight:700}.my-turn .status{color:var(--accent)}.me{background:linear-gradient(#0000,#00000059);margin:0 -16px;padding:6px 0 12px;position:relative}.actions{justify-content:center;align-items:center;gap:10px;min-height:46px;display:flex}.btn.uno{background:var(--red);border-color:#0000;padding:8px 22px;font-size:20px;font-style:italic;font-weight:900;animation:.7s infinite alternate pulse}.uno-armed{background:var(--red);color:#fff}.hand{scrollbar-width:thin;justify-content:safe center;padding:26px 24px 10px;display:flex;overflow:auto visible}.hand .card{margin-left:var(--overlap);margin-right:0}.hand .card:first-child{margin-left:0}.hand .card.playable{cursor:pointer;box-shadow:0 0 0 3px var(--accent), 0 10px 22px #00000073;transform:translateY(-10px)}.hand .card.playable:hover{z-index:5;transform:translateY(-22px)scale(1.04)}.hand .card.dim{filter:saturate(.55)brightness(.7)}.hand .card.dealt{animation:.4s cubic-bezier(.2,1.2,.5,1) backwards deal;animation-delay:var(--d)}.overlay{z-index:20;background:#050a1299;place-items:center;padding:16px;animation:.2s fade;display:grid;position:fixed;inset:0}.picker{text-align:center;background:#18293b;width:min(360px,100%)}.picker-grid{grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px;display:grid}.swatch{cursor:pointer;background:var(--c);border:3px solid #ffffffd9;border-radius:14px;height:74px;font-size:17px;font-weight:800;transition:transform .12s}.swatch:hover{transform:scale(1.04)}.swatch.c-red{--c:var(--red)}.swatch.c-yellow{--c:var(--yellow);color:#2a1f00}.swatch.c-green{--c:var(--green)}.swatch.c-blue{--c:var(--blue)}.result{text-align:center;background:#18293b;flex-direction:column;gap:12px;width:min(380px,100%);animation:.4s cubic-bezier(.2,1.4,.5,1) pop;display:flex}.trophy{font-size:54px}.scores{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.scores li{text-align:left;background:#0003;border-radius:10px;align-items:center;gap:10px;padding:6px 10px;display:flex}.scores li span:nth-child(2){flex:1}.toasts{pointer-events:none;z-index:15;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 32px);display:flex;position:fixed;top:64px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--panel-b);text-align:center;background:#0c1622e6;border-radius:12px;padding:8px 14px;font-size:14px;font-weight:600;animation:.25s ease-out drop}.toast.hit{border-color:var(--red)}.toast.uno{background:var(--red);border-color:#0000;font-style:italic;font-weight:900}.toast.win,.toast.big{border-color:var(--accent)}.conn-banner,.error-toast{z-index:30;text-align:center;border-radius:12px;max-width:calc(100% - 32px);padding:10px 16px;font-weight:700;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.conn-banner{background:#5b3d00;top:12px;bottom:auto}.error-toast{background:var(--red);cursor:pointer;animation:.2s drop}@keyframes pulse{to{transform:scale(1.07)}}@keyframes bob{50%{transform:translateY(-5px)}}@keyframes land{0%{opacity:0;transform:translateY(60px)rotate(-14deg)scale(1.15)}}@keyframes deal{0%{opacity:0;transform:translateY(-80px)rotate(10deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.85)}}@keyframes drop{0%{opacity:0;transform:translateY(-8px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (max-width:720px){.lobby-grid{grid-template-columns:1fr}.logo-text{font-size:44px}.card{--w:60px;--h:90px}.card.lg{--w:78px;--h:116px}.card.xs{--w:18px;--h:26px}.opp{min-width:90px;padding:8px 6px 6px}.opp-fan{height:30px}.opp-fan .card{margin:0 -6px}.piles{gap:24px}.dir{width:220px;height:220px;margin:-125px 0 0 -110px}.center{min-height:190px}.hand{justify-content:flex-start;padding-left:16px;padding-right:16px}.hand .card{margin-left:max(calc(20px - var(--w)), min(var(--overlap), -14px, calc((100vw - 32px - var(--w)) / var(--n) - var(--w))))}.topbar .logo-text{display:none}.topbar .chip{padding:5px 10px;font-size:13px}.room-code{font-size:44px}}