:root{--table-green:#1b5e20;--table-green-light:#2e7d32;--table-felt:#256d28;--wood:#5d4037;--wood-light:#795548;--bg-dark:#0d1117;--bg-card:#161b22;--bg-surface:#1c2333;--gold:#f9a825;--gold-dark:#f57f17;--gold-glow:#f9a82566;--red:#d32f2f;--red-light:#ef5350;--green-accent:#4ecca3;--green-glow:#4ecca380;--text:#e8e8e8;--text-dim:#9e9e9e;--text-muted:#616161;--card-white:#fafafa;--card-border:#bdbdbd;--card-shadow:0 2px 6px #0000004d;--card-selected-shadow:0 0 12px #4ecca399;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-dark);color:var(--text);width:100vw;height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}#root{width:100vw;height:100vh}.btn{border-radius:var(--radius-sm);cursor:pointer;letter-spacing:.02em;border:none;outline:none;padding:.5rem 1.2rem;font-size:.9rem;font-weight:600;transition:all .2s}.btn-gold{background:linear-gradient(135deg, var(--gold), var(--gold-dark));color:#1a1a1a;box-shadow:0 2px 8px var(--gold-glow)}.btn-gold:hover{box-shadow:0 4px 14px var(--gold-glow);transform:translateY(-1px)}.btn-gold:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-outline{border:1.5px solid var(--text-dim);color:var(--text-dim);background:0 0}.btn-outline:hover{border-color:var(--text);color:var(--text)}.btn-danger{border:1.5px solid var(--red);color:var(--red);background:0 0}.btn-danger:hover{background:var(--red);color:#fff}.btn-green{background:var(--green-accent);color:#1a1a1a;font-weight:700}.btn-green:hover{box-shadow:0 0 12px var(--green-glow)}.btn-green:disabled{opacity:.4;cursor:not-allowed}.input{border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text);border:1.5px solid #333;outline:none;padding:.6rem 1rem;font-size:1rem;transition:border-color .2s}.input:focus{border-color:var(--gold);box-shadow:0 0 8px var(--gold-glow)}.input::placeholder{color:var(--text-muted)}.card-face{background:var(--card-white);border-radius:var(--radius-sm);border:1px solid var(--card-border);width:56px;height:80px;box-shadow:var(--card-shadow);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:space-between;align-items:center;padding:4px 6px;font-family:Georgia,Times New Roman,serif;transition:transform .15s,box-shadow .15s;display:flex;position:relative}.card-face .card-corner{align-self:flex-start;font-size:.75rem;font-weight:700;line-height:1}.card-face .card-corner-bottom{align-self:flex-end;transform:rotate(180deg)}.card-face .card-center{font-size:1.6rem;line-height:1}.card-face.card-red{color:var(--red)}.card-face.card-black{color:#212121}.card-face.card-joker-small{color:var(--red);background:linear-gradient(135deg,#fff 60%,#ffcdd2)}.card-face.card-joker-big{color:var(--gold-dark);background:linear-gradient(135deg,#fff 60%,#ffe082)}.card-hand{cursor:pointer;z-index:1;margin:0 -4px;position:relative}.card-hand:hover{z-index:5;transform:translateY(-6px)}.card-hand.card-selected{box-shadow:var(--card-selected-shadow);border-color:var(--green-accent);z-index:10;transform:translateY(-20px)}.card-back{background:repeating-linear-gradient(45deg,#1a237e,#1a237e 4px,#283593 4px 8px);border:2px solid #3949ab;border-radius:4px;width:40px;height:56px;margin:0 -3px;box-shadow:0 1px 4px #0000004d}.card-small{width:46px;height:66px;padding:3px 4px;font-size:.65rem}.card-small .card-center{font-size:1.3rem}.game-table{background:radial-gradient(ellipse at center, var(--table-green-light) 0%, var(--table-green) 70%, #14401a 100%);width:100%;height:100vh;position:relative;overflow:hidden}.game-table:before{content:"";pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");position:absolute;inset:0}.game-table:after{content:"";border:12px solid var(--wood);box-shadow:inset 0 0 30px #00000080, 0 0 0 4px var(--wood-light);pointer-events:none;z-index:50;border-radius:0;position:absolute;inset:0}.player-north{z-index:10;text-align:center;position:absolute;top:16px;left:50%;transform:translate(-50%)}.player-south{z-index:10;position:absolute;bottom:0;left:0;right:0}.player-east{z-index:10;text-align:center;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.player-west{z-index:10;text-align:center;position:absolute;top:50%;left:20px;transform:translateY(-50%)}.play-area{z-index:10;text-align:center;min-width:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)}.name-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text);background:#00000080;border:1.5px solid #0000;border-radius:20px;padding:4px 14px;font-size:.85rem;font-weight:600;transition:all .3s;display:inline-block}.name-badge.active-turn{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px var(--gold-glow);background:#f9a82533;animation:1.5s ease-in-out infinite alternate glow}@keyframes glow{0%{box-shadow:0 0 8px var(--gold-glow)}to{box-shadow:0 0 20px var(--gold-glow)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.overlay{z-index:100;background:#000000bf;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-surface);border-radius:var(--radius-lg);text-align:center;border:1px solid #2a3040;min-width:320px;padding:2rem 2.5rem;animation:.3s slideUp;box-shadow:0 12px 40px #00000080}.error-toast{background:var(--red);color:#fff;border-radius:var(--radius-md);z-index:200;padding:.5rem 1.5rem;font-weight:600;animation:.3s slideUp;position:absolute;top:16px;left:50%;transform:translate(-50%)}.lobby-page{background:var(--bg-dark);flex-direction:column;align-items:center;min-height:100vh;padding:2rem;display:flex;overflow-y:auto}.room-card{background:linear-gradient(135deg, var(--table-green) 0%, var(--table-green-light) 100%);border-radius:var(--radius-md);text-align:center;cursor:default;border:2px solid #ffffff1a;width:220px;padding:1.5rem;transition:all .2s}.room-card:hover{border-color:var(--gold);box-shadow:0 4px 20px var(--gold-glow);transform:translateY(-2px)}.room-page{background:linear-gradient(135deg, var(--table-green) 0%, #1a4a1e 100%);flex-direction:column;align-items:center;min-height:100vh;padding:2rem;display:flex}.seat{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:var(--radius-lg);text-align:center;background:#00000040;border:2px solid #ffffff26;width:150px;padding:1.5rem;transition:all .3s}.seat.occupied{border-color:#ffffff40}.seat.my-seat{border-color:var(--gold);box-shadow:0 0 12px var(--gold-glow)}.rank-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--gold);background:#00000080;border:1px solid #f9a8254d;border-radius:20px;align-items:center;gap:4px;padding:4px 12px;font-size:.9rem;font-weight:700;display:inline-flex}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#666}