@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{width:var(--card-width,90px);height:var(--card-height,135px);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;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}.settings-btn{z-index:100;background:var(--panel-bg);border:1px solid #fff3;padding:8px 12px;position:absolute;top:16px;right:16px}.center-table{background:#ffffff08;border-radius:24px;align-items:center;gap:40px;padding:60px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 100px #00000080}.player-hand-container{flex-direction:column;align-items:center;gap:20px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.bottom-controls-bar{align-items:center;gap:16px;display:flex;position:relative}.hand-cards-area{justify-content:center;width:100vw;max-width:800px;height:160px;display:flex;position:relative}@media (width<=768px){.settings-btn{border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:1rem;display:flex;top:10px;right:10px}.settings-btn-label{display:none}.center-table{border-radius:16px;gap:14px;padding:10px 16px;top:42%;-webkit-backdrop-filter:none!important;background:#161622f0!important;box-shadow:0 4px 16px #00000073!important}.center-discard-pile{width:68px!important;height:102px!important}.center-discard-pile .playing-card{--card-width:68px!important;--card-height:102px!important;border-width:2px!important;box-shadow:0 3px 10px #0006!important}.center-discard-pile .card-value{font-size:2.2rem!important}.center-discard-pile .card-corner{font-size:.85rem!important}.active-color-badge{border-radius:12px!important;gap:6px!important;padding:4px 8px!important;top:-28px!important}.active-color-badge span{font-size:.72rem!important}.active-color-badge div{width:10px!important;height:10px!important}.opponent-info{border-radius:12px;gap:6px;padding:4px 8px;-webkit-backdrop-filter:none!important;background:#161622eb!important;transition:border-color .15s,box-shadow .15s!important;box-shadow:0 2px 8px #00000059!important}.opponent-info.is-active{border-color:var(--card-yellow)!important;transform:none!important;box-shadow:0 0 10px #ffc10773!important}.opponent-avatar{width:22px;height:22px}.opponent-avatar svg{width:14px;height:14px}.opponent-name{text-overflow:ellipsis;white-space:nowrap;max-width:65px;font-size:.72rem;overflow:hidden}.opponent-cards-badge{font-size:.65rem}.opponent-hand{margin-top:2px!important}.opponent-hand .playing-card{border-width:1.5px!important;border-radius:4px!important;width:26px!important;height:39px!important;transition:none!important;box-shadow:1px 2px 5px #00000059!important}.opponent-hand .card-back-pattern{font-size:.55rem!important}.player-hand-container{bottom:calc(28px + env(safe-area-inset-bottom,0px));gap:8px;width:100vw;max-width:100vw;padding:0 8px}.bottom-controls-bar{flex-direction:column;gap:8px;width:100%;max-width:380px;padding:0 4px;display:flex}.mobile-controls-row-top{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.mobile-controls-row-buttons{gap:8px;width:100%;display:flex}.mobile-controls-row-buttons .btn{white-space:nowrap;flex:1;padding:10px 8px;font-size:.88rem}.hand-cards-area{width:100vw;max-width:100vw;height:125px;padding-bottom:6px;overflow:visible}.hand-cards-area .playing-card{transition:transform .12s ease-out,filter .12s ease-out!important;box-shadow:0 2px 8px #00000059!important}.quick-chat-btn{width:38px!important;height:38px!important}.quick-chat-btn svg{width:18px!important;height:18px!important}.quick-chat-menu{width:210px!important;max-height:260px!important;padding:12px!important;bottom:110%!important;left:0!important}.screen-container{padding:12px}.lobby-box{padding:20px}}