@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Outfit:wght@500;700&display=swap";:root{--bg-color:#121212;--panel-bg:#181818d9;--panel-border:#ffffff14;--text-primary:#ededed;--text-secondary:#a0a0a0;--card-red:#ff3b30;--card-blue:#007aff;--card-green:#34c759;--card-yellow:#fc0;--card-wild:#222;--primary-btn:#2c2c2c;--primary-btn-hover:#3a3a3a;--danger-btn:#ff3b30;color:var(--text-primary);font-family:Inter,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);flex-direction:column;min-height:100vh;display:flex;overflow:hidden}#root{flex-direction:column;flex:1;display:flex}h1,h2,h3,h4{font-family:Outfit,sans-serif}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:16px;box-shadow:0 8px 32px #0000004d}.btn{background:var(--primary-btn);color:#fff;cursor:pointer;border:1px solid #ffffff1a;border-radius:8px;padding:12px 24px;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .2s}.btn:hover:not(:disabled){background:var(--primary-btn-hover);border-color:#fff3}.btn:active:not(:disabled){transform:translateY(1px)}.btn.danger{background:var(--danger-btn);border-color:#ff3b3080}.btn:disabled{opacity:.4;cursor:not-allowed}.input{border:1px solid var(--panel-border);color:#fff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0003;border-radius:8px;outline:none;width:100%;padding:12px 16px;font-family:Inter,sans-serif;font-size:1rem;transition:border-color .2s}.input:focus{border-color:var(--primary-btn)}select.input option{background-color:var(--bg-color);color:var(--text-primary)}.playing-card{color:#fff;text-shadow:1px 1px #0006;cursor:grab;-webkit-user-select:none;user-select:none;box-sizing:border-box;border:4px solid #fff;border-radius:8px;justify-content:center;align-items:center;width:90px;height:135px;font-family:Outfit,sans-serif;font-weight:800;display:flex;position:relative;box-shadow:2px 4px 12px #0006}.playing-card:active:not(.disabled){cursor:grabbing}.playing-card.disabled{cursor:not-allowed}.card-inner-oval{background:inherit;filter:brightness(1.1);border:2px solid #fff6;border-radius:50%/60%;justify-content:center;align-items:center;width:90%;height:90%;display:flex;position:relative;transform:rotate(-20deg)}.card-value{font-size:3.5rem;transform:rotate(20deg)}.card-corner{font-size:1.2rem;font-weight:700;position:absolute;transform:rotate(20deg)}.card-red{background-color:var(--card-red)}.card-blue{background-color:var(--card-blue)}.card-green{background-color:var(--card-green)}.card-yellow{background-color:var(--card-yellow)}.card-wild{background-color:var(--card-wild);background-image:linear-gradient(135deg,#ff3b3033 0%,#34c75933 50%,#007aff33 100%);border:2px solid #ffffff1a}.card-value{z-index:2;position:absolute}.card-corner{z-index:2;font-size:1.2rem;font-weight:700;position:absolute}.card-corner.top-left{top:8px;left:8px}.card-corner.bottom-right{bottom:8px;right:8px;transform:rotate(180deg)}.screen-container{flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex}.lobby-box{text-align:center;width:100%;max-width:400px;padding:32px}.game-container{flex-direction:column;width:100vw;height:100vh;display:flex;position:relative}.opponents-area{flex-wrap:wrap;justify-content:center;gap:16px;padding:16px;display:flex}.opponent-card{flex-direction:column;align-items:center;min-width:120px;padding:12px 24px;display:flex}.opponent-card.active-turn{border-color:var(--card-yellow);box-shadow:0 0 15px #eab30880}.table-center{flex:1;justify-content:center;align-items:center;gap:40px;display:flex}.deck-pile{position:relative}.deck-card{background:var(--card-wild);color:#0000;cursor:pointer;border-color:#555;position:absolute;top:0;left:0}.deck-card:before{content:"UNO";color:#ef4444;text-shadow:1px 1px #fff;font-size:1.5rem;position:absolute;transform:rotate(-30deg)}.deck-card:hover{transform:translateY(-5px)}.discard-pile{width:100px;height:150px;position:relative}.player-hand-area{flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex}.hand-cards{flex-wrap:wrap;justify-content:center;gap:-40px;max-width:100%;display:flex}.hand-cards>.playing-card{margin-left:-40px}.hand-cards>.playing-card:first-child{margin-left:0}.hand-cards>.playing-card:hover{margin-left:0;margin-right:40px}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.animate-enter{animation:.3s forwards slideDown}.color-selector-overlay{z-index:200;pointer-events:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-wheel{border:2px solid var(--panel-border);opacity:.95;border-radius:50%;width:140px;height:140px;position:relative;overflow:hidden;box-shadow:0 4px 16px #0006}.color-slice{cursor:pointer;border:none;width:50%;height:50%;transition:opacity .2s;position:absolute}.color-slice:hover{opacity:.8}.slice-red{top:0;left:0}.slice-blue{top:0;left:50%}.slice-yellow{top:50%;left:0}.slice-green{top:50%;left:50%}.color-wheel-center{background:var(--bg-color);text-align:center;pointer-events:none;border:2px solid var(--panel-border);width:50px;height:50px;color:var(--text-secondary);border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;font-weight:600;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.opponent{flex-direction:column;align-items:center;gap:16px;display:flex;position:absolute}.opponent-top{top:40px;left:50%;transform:translate(-50%)}.opponent-left{top:50%;left:40px;transform:translateY(-50%)}.opponent-right{top:50%;right:40px;transform:translateY(-50%)}.opponent-info{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;align-items:center;gap:12px;padding:8px 16px;transition:all .3s;display:flex;box-shadow:0 4px 12px #0003}.opponent-info.is-active{border-color:var(--card-yellow);transform:scale(1.05);box-shadow:0 0 20px #ffc10766}.opponent-avatar{background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.opponent-details{flex-direction:column;display:flex}.opponent-name{font-size:.9rem;font-weight:600}.opponent-cards-badge{color:var(--text-secondary);font-size:.75rem}.card-back-pattern{border-radius:inherit;color:#ffffff4d;background-color:#333;background-image:repeating-linear-gradient(45deg,#444 25%,#0000 25% 75%,#444 75%,#444),repeating-linear-gradient(45deg,#444 25%,#333 25% 75%,#444 75%,#444);background-position:0 0,10px 10px;background-repeat:repeat;background-size:20px 20px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.5rem;font-weight:700;display:flex}