*{box-sizing:border-box}html,body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:#000}#root{width:100%;height:100%;background:radial-gradient(circle at top,#1a1a1a,#000 80%);display:flex;flex-direction:column;align-items:center;justify-content:center}:root{--card-red: #ff0000;--card-green: #00ff00;--card-blue: #0000ff;--card-yellow: #ffff00;--card-pink: #ff00ff;--card-black: #000000;--uno-red: var(--card-red);--uno-blue: var(--card-blue);--uno-green: var(--card-green);--uno-yellow: var(--card-yellow)}.glass-panel{background:#1e1e24b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(0,0,0,.4);border-radius:24px;padding:3rem;box-shadow:0 20px 50px #00000080;max-width:480px;width:90%;text-align:center;margin:auto}h1{font-size:2rem;font-weight:900;margin-bottom:1.5rem;color:#fff;text-shadow:0 5px 15px rgba(0,0,0,.8);letter-spacing:2px}h2,h3{margin-top:0;color:#fff}p{color:#a0a0a0}input{width:100%;padding:16px;margin:12px 0;border-radius:12px;border:2px solid transparent;background:#2b2b36;color:#fff;font-size:1.1rem;text-align:center}input:focus{outline:none;background:#32323e;border-color:var(--card-blue)}button{width:100%;padding:16px;margin-top:16px;border-radius:12px;border:none;font-size:1rem;font-weight:700;cursor:pointer;background:var(--card-blue);color:#fff;transition:transform .1s}button:hover{transform:translateY(-2px)}button:active{transform:scale(.98)}button:disabled{background:#333;color:#666;cursor:not-allowed;transform:none}.room-item{display:flex;justify-content:space-between;align-items:center;background:#25252e;padding:16px;margin:10px 0;border-radius:12px;cursor:pointer}.room-item:hover{background:#2f2f3a;border:1px solid var(--card-green)}.player-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:25px 0}.player-tag{background:#ffffff0d;padding:8px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.1)}.game-area{width:100%;height:100%;display:flex;justify-content:center;align-items:center;perspective:1200px;overflow:hidden;background:radial-gradient(circle at center,#111,#000)}.poker-table{position:relative;width:100%;max-width:900px;min-width:900px;aspect-ratio:16 / 10;background-image:url(/table.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center;border:none}.player-label{position:absolute;background:linear-gradient(180deg,#222,#111);color:#aaa;padding:6px 14px;border-radius:6px;font-weight:700;font-size:.85rem;border:1px solid #444;box-shadow:0 4px 10px #000c;white-space:nowrap;z-index:20;text-transform:uppercase}.label-bottom{bottom:-40px;left:50%;transform:translate(-50%);border-color:var(--card-blue);color:#fff}.label-top{top:-40px;left:50%;transform:translate(-50%)}.label-left{left:-10px;top:50%;transform:translate(-100%,-50%) rotate(90deg)}.label-right{right:-10px;top:50%;transform:translate(100%,-50%) rotate(-90deg)}.dice-container{position:absolute;width:60px;height:60px;z-index:10}.dice-pos-bottom{bottom:10%;left:47%;transform:translate(-50%)}.dice-pos-top{top:10%;left:47%;transform:translate(-50%)}.dice-pos-left{left:7%;top:45%;transform:translateY(-50%)}.dice-pos-right{right:7%;top:45%;transform:translateY(-50%)}.scene{width:100%;height:100%;perspective:600px}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:translateZ(-30px)}.cube__face{position:absolute;width:60px;height:60px;background:#fdfdfd;border:1px solid #ccc;border-radius:10px;box-shadow:inset 0 0 15px #0000001a;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:4px;box-sizing:border-box}.cube__face--1{transform:rotateY(0) translateZ(30px)}.cube__face--2{transform:rotateY(-90deg) translateZ(30px)}.cube__face--3{transform:rotateY(180deg) translateZ(30px)}.cube__face--4{transform:rotateY(90deg) translateZ(30px)}.cube__face--5{transform:rotateX(-90deg) translateZ(30px)}.cube__face--6{transform:rotateX(90deg) translateZ(30px)}.dot{width:10px;height:10px;background:#111;border-radius:50%;align-self:center;justify-self:center;box-shadow:inset 0 1px 3px #000c}.cube__face--1 .dot{background:#d00;width:14px;height:14px}.cube__face--1 .dot:nth-child(1){grid-area:2 / 2}.cube__face--2 .dot:nth-child(1){grid-area:1 / 1}.cube__face--2 .dot:nth-child(2){grid-area:3 / 3}.cube__face--3 .dot:nth-child(1){grid-area:1 / 1}.cube__face--3 .dot:nth-child(2){grid-area:2 / 2}.cube__face--3 .dot:nth-child(3){grid-area:3 / 3}.cube__face--4 .dot:nth-child(1){grid-area:1 / 1}.cube__face--4 .dot:nth-child(2){grid-area:1 / 3}.cube__face--4 .dot:nth-child(3){grid-area:3 / 1}.cube__face--4 .dot:nth-child(4){grid-area:3 / 3}.cube__face--5 .dot:nth-child(1){grid-area:1 / 1}.cube__face--5 .dot:nth-child(2){grid-area:1 / 3}.cube__face--5 .dot:nth-child(3){grid-area:3 / 1}.cube__face--5 .dot:nth-child(4){grid-area:3 / 3}.cube__face--5 .dot:nth-child(5){grid-area:2 / 2}.cube__face--6 .dot:nth-child(1){grid-area:1 / 1}.cube__face--6 .dot:nth-child(2){grid-area:1 / 3}.cube__face--6 .dot:nth-child(3){grid-area:2 / 1}.cube__face--6 .dot:nth-child(4){grid-area:2 / 3}.cube__face--6 .dot:nth-child(5){grid-area:3 / 1}.cube__face--6 .dot:nth-child(6){grid-area:3 / 3}.card-wrapper{perspective:1000px;width:90px;height:130px;cursor:grab;position:relative;-webkit-user-select:none;user-select:none}.card-wrapper:active{cursor:grabbing}.playing-card{width:100%;height:100%;border-radius:10px;position:relative;box-sizing:border-box;padding:5px;box-shadow:-2px 2px 5px #0000004d;background-color:#fff}.bg-red{background-color:var(--card-red)}.bg-green{background-color:var(--card-green)}.bg-blue{background-color:var(--card-blue)}.bg-yellow{background-color:var(--card-yellow)}.bg-pink{background-color:var(--card-pink)}.bg-black{background-color:var(--card-black)}.card-frame{width:100%;height:100%;border:3px solid white;border-radius:6px;position:relative;display:flex;justify-content:center;align-items:center}.card-text-large{font-family:Poppins,sans-serif;font-weight:900;font-size:5rem;color:#fff;text-shadow:3px 3px 0px #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;line-height:1;z-index:2}.corner-val{position:absolute;font-family:Poppins,sans-serif;font-weight:800;font-size:1.2rem;color:#fff;text-shadow:2px 2px 0px #000,-1px -1px 0 #000,1px -1px 0 #000;z-index:2}.corner-tl{top:2px;left:5px}.corner-br{bottom:2px;right:5px;transform:rotate(180deg)}.pie-chart{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--card-pink) 0% 72deg,var(--card-yellow) 72deg 144deg,var(--card-red) 144deg 216deg,var(--card-blue) 216deg 288deg,var(--card-green) 288deg 360deg);border:2px solid white}.pie-chart-small{width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--card-pink) 0% 72deg,var(--card-yellow) 72deg 144deg,var(--card-red) 144deg 216deg,var(--card-blue) 216deg 288deg,var(--card-green) 288deg 360deg);border:1px solid white;display:inline-block}.prohibition-sign{width:60px;height:60px;border:6px solid white;border-radius:50%;position:relative;display:flex;justify-content:center;align-items:center;box-shadow:2px 2px #000,inset 2px 2px #000}.prohibition-bar{position:absolute;width:6px;height:100%;background:#fff;transform:rotate(-45deg);box-shadow:1px 0 #000}.ban-overlay{border-color:red;box-shadow:2px 2px #000}.ban-overlay .prohibition-bar{background:red}.prohibition-small{width:16px;height:16px;border:2px solid white;border-radius:50%;position:relative;display:inline-block}.prohibition-small:after{content:"";position:absolute;top:0;left:50%;height:100%;width:2px;background:#fff;transform:translate(-50%) rotate(-45deg)}.ban-small{border-color:red}.ban-small:after{background:red}.card-back{width:100%;height:100%;background:#111;border:4px solid white;border-radius:10px;display:flex;justify-content:center;align-items:center}.back-logo{width:70%;height:60%;background:linear-gradient(135deg,#ff5f5f,#f1c40f);border-radius:50%;transform:rotate(-25deg);border:2px solid white}.color-picker-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-150%);background:#000000e6;padding:15px;border-radius:12px;display:flex;gap:10px;z-index:200;box-shadow:0 5px 20px #000;border:1px solid #444}.color-btn{width:40px;height:40px;border-radius:50%;border:2px solid white;cursor:pointer;transition:transform .2s}.color-btn:hover{transform:scale(1.2)}.btn-red{background:var(--card-red)}.btn-blue{background:var(--card-blue)}.btn-green{background:var(--card-green)}.btn-yellow{background:var(--card-yellow)}.btn-pink{background:var(--card-pink)}.game-status-indicator{position:absolute;top:calc(50% - 110px);left:50%;transform:translate(-50%,-50%);background:#000c;padding:8px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;pointer-events:none;z-index:10;box-shadow:0 4px 10px #00000080}.status-dot{width:15px;height:15px;border-radius:50%;border:1px solid white}.controls-area{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:100;display:flex;gap:10px}.action-btn{padding:12px 24px;border-radius:30px;border:none;font-weight:700;cursor:pointer;box-shadow:0 4px 10px #00000080;transition:all .2s;text-transform:uppercase;font-size:.9rem}.btn-draw{background:linear-gradient(135deg,#3f8cff,#2980b9);color:#fff}.btn-pass{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.direction-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;opacity:.15;pointer-events:none;z-index:2;transition:transform .5s ease-in-out;color:#fff}.winner-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.winner-content{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);padding:40px;border-radius:20px;border:2px solid gold;text-align:center;box-shadow:0 0 50px #ffd7004d;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.winner-name{font-size:3rem;color:gold;font-weight:900;text-shadow:0 2px 0 black;margin:10px 0;font-family:Fredericka the Great,cursive}.modal-btn-group{display:flex;gap:20px;justify-content:center;margin-top:30px}.chalk-marks-container{position:absolute;display:flex;gap:4px;pointer-events:none;transform-origin:center center}.chalk-mark{width:4px;height:30px;background:#ffffffe6;border-radius:2px;box-shadow:0 0 2px #ffffff80;transform:rotate(-5deg)}.dice-pos-bottom .chalk-marks-container{top:50%;left:100%;transform:translateY(-50%);margin-left:15px}.dice-pos-top .chalk-marks-container{top:50%;right:100%;transform:translateY(-50%);margin-right:15px}.dice-pos-left .chalk-marks-container{top:100%;left:50%;transform:translate(-50%) rotate(90deg);margin-top:25px}.dice-pos-right .chalk-marks-container{bottom:100%;left:50%;transform:translate(-50%) rotate(90deg);margin-bottom:25px}.card-stack-counter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:#000000d9;border:2px solid white;border-radius:50%;color:#fff;font-family:Poppins,sans-serif;font-weight:900;font-size:1.2rem;display:flex;justify-content:center;align-items:center;z-index:200;box-shadow:0 4px 10px #00000080}.center-text-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Poppins,sans-serif;font-size:2.5rem;font-weight:900;color:#fff;text-align:center;text-shadow:0 4px 0 black,-2px -2px 0 black,2px -2px 0 black,-2px 2px 0 black,2px 2px 0 black;z-index:60;pointer-events:none;white-space:nowrap;animation:floatIn .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes floatIn{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}