:root{--bg-dark: #0f172a;--bg-mat: #14532d;--bg-mat-texture: rgba(255, 255, 255, .05);--wood-border: #3f2e22;--accent: #fbbf24;--danger: #dc2626;--text-main: #f1f5f9;--card-w: 90px;--card-h: 126px;--opp-w: 40px;--opp-h: 60px;--shadow-card: 2px 4px 10px rgba(0, 0, 0, .5);--shadow-float: 0 20px 50px rgba(0, 0, 0, .6)}*,*:before,*:after{box-sizing:border-box}body{margin:0;background-color:var(--bg-dark);background-image:radial-gradient(circle at 50% 30%,#1e293b,#020617);color:var(--text-main);font-family:Segoe UI,system-ui,sans-serif;overflow:hidden;height:100vh;-webkit-user-select:none;user-select:none}.game-container{display:grid;grid-template-columns:200px 1fr 200px;grid-template-rows:140px 1fr 220px;height:100vh;width:100vw}.zone-top{grid-column:2;grid-row:1;display:flex;justify-content:center;align-items:flex-end;z-index:20;position:relative}.zone-left{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:flex-end;padding-right:15px;z-index:20;position:relative}.zone-right{grid-column:3;grid-row:2;display:flex;align-items:center;justify-content:flex-start;padding-left:15px;z-index:20;position:relative}.zone-center{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;position:relative;z-index:10}.zone-bottom{grid-column:1 / -1;grid-row:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:20px;position:relative;z-index:300;overflow:visible}.table-mat{background-color:var(--bg-mat);background-image:radial-gradient(var(--bg-mat-texture) 1px,transparent 1px);background-size:20px 20px;width:min(900px,95vw);height:min(450px,60vh);border-radius:100px;border:15px solid var(--wood-border);box-shadow:inset 0 0 80px #000c,0 30px 60px #00000080;display:flex;align-items:center;justify-content:center;position:relative}.name-tag{position:absolute;background:#000000d9;color:#e2e8f0;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,.2);white-space:nowrap;z-index:50;box-shadow:0 4px 10px #00000080;pointer-events:none}.name-tag.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 15px var(--accent)}.zone-top .name-tag{bottom:5px;left:50%;transform:translate(-50%)}.zone-left .name-tag{right:10px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}.zone-right .name-tag{left:10px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}.table-indicator{background:#0006;border:1px solid rgba(255,255,255,.2);color:#fffffff2;padding:6px 14px;border-radius:20px;display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700;text-transform:uppercase;box-shadow:0 4px 10px #0000004d}.start-title{color:var(--accent);font-size:28px;font-weight:900;text-shadow:0 4px 20px rgba(0,0,0,.9);text-align:center;text-transform:uppercase;letter-spacing:2px;animation:pulseSlow 2s infinite;z-index:50}.mat-die-pos{position:absolute;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}.mat-die-pos .dice-cube{pointer-events:auto}.mat-die-bottom{bottom:15%;left:50%;transform:translate(-50%)}.mat-die-top{top:15%;left:50%;transform:translate(-50%)}.mat-die-left{top:50%;left:15%;transform:translate(-50%,-50%)}.mat-die-right{top:50%;right:15%;transform:translate(50%,-50%)}.mat-die-name{background:#0009;padding:2px 8px;border-radius:4px;font-size:12px;color:#fff}.card{width:var(--card-w)!important;height:var(--card-h)!important;border-radius:10px;background:#fff;border:1px solid rgba(0,0,0,.2);position:relative;box-shadow:var(--shadow-card);display:flex;flex-direction:column;justify-content:space-between;padding:8px;font-weight:800;font-family:sans-serif;-webkit-user-select:none;user-select:none;transition:filter .2s,transform .1s}.card.R{background:linear-gradient(135deg,#ef4444,#991b1b);color:#fff;border:2px solid #fecaca}.card.G{background:linear-gradient(135deg,#22c55e,#14532d);color:#fff;border:2px solid #bbf7d0}.card.B{background:linear-gradient(135deg,#3b82f6,#1e3a8a);color:#fff;border:2px solid #bfdbfe}.card.Y{background:linear-gradient(135deg,#eab308,#854d0e);color:#fff;border:2px solid #fef08a}.card.P{background:linear-gradient(135deg,#ec4899,#be185d);color:#fff;border:2px solid #fbcfe8}.card.Wild{background:conic-gradient(from 180deg at 50% 50%,#ef4444,#eab308,#22c55e,#3b82f6 270deg,#ec4899,#ef4444 360deg);color:#fff;border:4px solid #111}.card.Wild:after{content:"";position:absolute;inset:4px;background:#0009;border-radius:6px;z-index:0}.card.Wild>*{z-index:1;position:relative}.card.Wild.R{border-color:#ef4444;box-shadow:0 0 15px #ef4444}.card.Wild.G{border-color:#22c55e;box-shadow:0 0 15px #22c55e}.card.Wild.B{border-color:#3b82f6;box-shadow:0 0 15px #3b82f6}.card.Wild.Y{border-color:#eab308;box-shadow:0 0 15px #eab308}.card.Wild.P{border-color:#ec4899;box-shadow:0 0 15px #ec4899}.card.back{background:repeating-linear-gradient(45deg,#1f2937,#1f2937 10px,#111827 10px 20px);border:3px solid #f1f5f9;display:grid;place-items:center}.card-center{font-size:48px;text-align:center;line-height:1;margin-top:-5px}.card-corner{font-size:20px;line-height:1}.card-disabled{filter:grayscale(100%) brightness(.6);cursor:not-allowed!important}.card-tooltip{position:absolute;bottom:130%;left:50%;transform:translate(-50%);background:#000000f2;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:99999;border:1px solid rgba(255,255,255,.3);box-shadow:0 10px 30px #000}.hand-card-wrapper:hover .card-tooltip{opacity:1}.hand-container{display:flex;justify-content:center;align-items:flex-end;height:180px;width:100%;position:relative;perspective:1000px;padding-bottom:20px;overflow:visible}.hand-container::-webkit-scrollbar{display:none}.hand-container{-ms-overflow-style:none;scrollbar-width:none}.hand-card-wrapper{position:relative;width:60px;height:var(--card-h);display:flex;justify-content:center;align-items:flex-end;transition:transform .2s ease,margin .2s ease;touch-action:none;cursor:pointer;flex-shrink:0}.hand-card-inner{transform-origin:50% 120%;transition:transform .2s cubic-bezier(.2,.8,.2,1)}.hand-container:not(.is-dragging) .hand-card-wrapper:hover{margin-left:20px;margin-right:20px;z-index:1000!important}.hand-container:not(.is-dragging) .hand-card-wrapper:hover .hand-card-inner{transform:translateY(-80px) scale(1.2) rotate(0)!important}.hand-card-wrapper.card-dimmed{filter:grayscale(100%) brightness(.6)}.hand-card-wrapper.card-blocked{cursor:not-allowed!important}.opp-card{background:linear-gradient(45deg,#1f2937,#111827);border:1px solid #94a3b8;border-radius:4px}.dice-cube{width:50px;height:50px;background:#e2e8f0;color:#0f172a;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;box-shadow:0 4px 6px #0000004d;cursor:default;transition:transform .2s,background .2s;pointer-events:auto}.dice-cube.active{background:#fbbf24;cursor:pointer;animation:pulse 1.5s infinite;box-shadow:0 0 15px #fbbf2499}.pile-stack{position:relative;transition:transform .1s}.pile-stack:before{content:"";position:absolute;inset:0;z-index:-1;background:#ffffff1a;border-radius:10px;transform:rotate(4deg)}.pile-stack:active{transform:scale(.95)}.danger-badge{position:absolute;top:-15px;right:-15px;background:var(--danger);color:#fff;font-weight:900;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:3px solid white;animation:pulseSlow 1s infinite;z-index:20}.pass-turn-btn{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);background:linear-gradient(to bottom,#dc2626,#991b1b);border:4px solid var(--wood-border);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:10px 40px;border-radius:12px;box-shadow:0 10px 20px #0009;cursor:pointer;z-index:150;transition:transform .1s}.pass-turn-btn:hover{transform:translate(-50%) scale(1.05)}.color-dot{width:18px;height:18px;border-radius:50%;border:2px solid white}.bg-R{background:#ef4444}.bg-G{background:#22c55e}.bg-B{background:#3b82f6}.bg-Y{background:#eab308}.bg-P{background:#ec4899}.flying-card-layer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3000}.flying-card{position:absolute;box-shadow:var(--shadow-float);transform-origin:center center;will-change:transform,left,top}.winner-announce{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:50px;font-weight:900;color:var(--accent);text-shadow:0 0 20px black;animation:popIn .5s;z-index:6000;text-align:center}.shuffle-card{position:absolute;width:var(--card-w);height:var(--card-h);background:repeating-linear-gradient(45deg,#1f2937,#1f2937 10px,#111827 10px 20px);border:2px solid white;border-radius:10px;top:50%;left:50%;margin-left:-45px;margin-top:-63px;box-shadow:0 5px 15px #00000080}.anim-shuffle-l{animation:shuffleLeft .8s infinite}.anim-shuffle-r{animation:shuffleRight .8s infinite}.shuffle-text{margin-top:80px;color:#fff;font-weight:700;font-size:20px;text-shadow:0 2px 5px black;text-align:center;animation:pulseSlow 1s infinite}.deal-fly-out{position:absolute;top:50%;left:50%;margin-left:-45px;margin-top:-63px;width:var(--card-w);height:var(--card-h);background:#334155;border:2px solid white;border-radius:10px;box-shadow:0 10px 20px #00000080;opacity:1;animation:flyOut .6s ease-in forwards}.first-card-anim{position:absolute;width:var(--card-w);height:var(--card-h);top:50%;left:50%;margin-left:-45px;margin-top:-63px;z-index:200;animation:flipToPile 1s cubic-bezier(.45,0,.55,1) forwards}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes pulseSlow{0%,to{opacity:1}50%{opacity:.7}}@keyframes shuffleLeft{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(-60px) rotate(-10deg)}}@keyframes shuffleRight{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(60px) rotate(10deg)}}@keyframes flyOut{to{transform:translate(var(--tx),var(--ty)) rotate(360deg);opacity:0}}@keyframes flipToPile{0%{transform:translate(60px) rotateY(180deg)}50%{transform:translate(0) translateY(-100px) rotateY(90deg) scale(1.3)}to{transform:translate(-60px) rotateY(0) scale(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.menu-screen{color:#fff;text-align:center}.input{padding:12px;border-radius:8px;border:1px solid #475569;background:#1e293b;color:#fff;font-size:16px;margin-bottom:20px;text-align:center;width:200px}.btn-primary{background:var(--accent);color:#000;border:none;padding:12px 30px;border-radius:8px;font-size:18px;cursor:pointer;transition:background .2s;font-weight:700}.btn-primary:hover{background:#f59e0b}.toast-container{position:absolute;bottom:200px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:2000;pointer-events:none}.toast-msg{background:#000c;color:#fff;padding:10px 20px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);animation:fadeUp .3s ease-out}.overlay-backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:4000;display:flex;align-items:center;justify-content:center}.btn{border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:700}.zone-top .opp-card,.zone-left .opp-card,.zone-right .opp-card{transition:opacity .3s}:root{--bg1:#0b1220;--txt:rgba(255,255,255,.92);--muted:rgba(255,255,255,.65);--line:rgba(255,255,255,.12);--shadow:0 18px 50px rgba(0,0,0,.45)}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--txt);background:radial-gradient(1200px 800px at 50% 0%,#123 0%,var(--bg1) 40%,#060b12 100%)}button,input{font:inherit}a{color:inherit;text-decoration:none}.app{min-height:100vh;display:flex;flex-direction:column;overflow:visible}.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:#0a101c99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#ffffff0d;color:var(--muted);font-size:13px}.row{display:flex;gap:12px;flex-wrap:wrap}.main{flex:1;padding:18px;display:flex;justify-content:center;overflow:visible}.panel{width:min(1200px,100%);border:1px solid var(--line);border-radius:18px;background:#0c12208c;box-shadow:var(--shadow);overflow:visible}.panelInner{padding:18px;overflow:visible}.toastWrap{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:9999}.toast{width:340px;border-radius:14px;border:1px solid var(--line);background:#0c1220c7;box-shadow:var(--shadow);padding:12px}.toastTitle{font-weight:900;margin:0 0 4px}.toastMsg{margin:0;color:var(--muted);font-size:13px;line-height:1.35}.toast.bad{border-color:#dc505073}.toast.ok{border-color:#3cb47873}