@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}:root{--app-height:100dvh}body{background:var(--bg-color);min-height:100vh;min-height:var(--app-height,100dvh);height:var(--app-height,100dvh);flex-direction:column;display:flex;overflow:hidden}#root{flex-direction:column;flex:1;height:100%;max-height:100%;display:flex;overflow:hidden}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{height:100vh;height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);flex-direction:column;justify-content:center;align-items:center;width:100vw;padding:20px;display:flex}.lobby-box{text-align:center;width:100%;max-width:400px;padding:32px}.game-container{height:100vh;height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);flex-direction:column;width:100vw;display:flex;position:relative;overflow:hidden}.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}.opponent-score-badge{color:#f1f5f9;letter-spacing:.2px;font-size:.78rem;font-weight:600;line-height:1.2}.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{top:calc(max(8px, env(safe-area-inset-top,0px)) + 2px);z-index:100;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:1rem;display:flex;right:10px}.settings-btn-label{display:none}.mobile-game-container{box-sizing:border-box;width:100%;height:100%;max-height:100%;padding-top:calc(max(6px, env(safe-area-inset-top,0px)) + 36px);padding-bottom:max(6px, env(safe-area-inset-bottom,0px));flex-direction:column;justify-content:space-between;display:flex;position:relative;overflow:hidden}.mobile-opponents-section{box-sizing:border-box;flex-shrink:0;justify-content:space-evenly;align-items:flex-start;width:100%;padding:0 4px;display:flex}.mobile-center-section{box-sizing:border-box;flex:1;justify-content:space-between;align-items:center;width:100%;min-height:0;padding:0 8px;display:flex;position:relative}.mobile-flank-column{z-index:10;flex-direction:column;flex-shrink:0;justify-content:space-around;align-items:center;gap:6px;display:flex}.mobile-flank-left{margin-right:auto}.mobile-flank-right{margin-left:auto}.center-table{border-radius:16px;justify-content:center;align-items:center;gap:10px;padding:clamp(6px,1vh,10px) clamp(10px,3vw,16px);display:flex;-webkit-backdrop-filter:none!important;background:#161622f0!important;margin:auto!important;position:relative!important;top:auto!important;left:auto!important;transform:none!important;box-shadow:0 4px 16px #00000073!important}.center-discard-pile{width:clamp(56px,16vw,68px)!important;height:clamp(84px,12vh,102px)!important}.center-discard-pile .playing-card{--card-width:clamp(56px, 16vw, 68px)!important;--card-height:clamp(84px, 12vh, 102px)!important;border-width:2px!important;box-shadow:0 3px 10px #0006!important}.center-discard-pile .card-value{font-size:clamp(1.8rem,4.2vh,2.2rem)!important}.center-discard-pile .card-corner{font-size:clamp(.7rem,1.7vh,.85rem)!important}.active-color-badge{border-radius:12px!important;gap:5px!important;padding:3px 7px!important;top:-26px!important}.active-color-badge span{font-size:clamp(.65rem,1.5vh,.72rem)!important}.active-color-badge div{width:9px!important;height:9px!important}.opponent{gap:3px!important;position:relative!important;transform:none!important}.opponent-info{border-radius:10px;gap:5px;padding:3px 6px;-webkit-backdrop-filter:none!important;background:#161622f0!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:18px;height:18px}.opponent-avatar svg{width:12px;height:12px}.opponent-name{text-overflow:ellipsis;white-space:nowrap;max-width:clamp(46px,12vw,60px);font-size:clamp(.65rem,1.8vw,.7rem);line-height:1.15;overflow:hidden}.opponent-cards-badge{font-size:clamp(.58rem,1.6vw,.64rem);line-height:1.15}.opponent-score-badge{color:#f1f5f9;letter-spacing:.1px;font-size:clamp(.58rem,1.6vw,.65rem);font-weight:600;line-height:1.15}.opponent-hand{margin-top:1px!important}.opponent-hand .playing-card{border-width:1px!important;border-radius:3px!important;width:clamp(20px,5.5vw,24px)!important;height:clamp(30px,8vw,36px)!important;transition:none!important;box-shadow:1px 2px 4px #00000059!important}.opponent-hand .card-back-pattern{font-size:.5rem!important}.player-hand-container{box-sizing:border-box;flex-shrink:0;gap:clamp(2px,.4vh,4px);width:100%!important;max-width:100vw!important;padding:0 4px!important;position:relative!important;bottom:auto!important;left:auto!important;transform:none!important}.bottom-controls-bar{flex-direction:column;flex-shrink:0;gap:clamp(2px,.4vh,4px);width:100%;max-width:380px;padding:0 4px;display:flex}.mobile-controls-row-top{justify-content:space-between;align-items:center;gap:6px;width:100%;display:flex}.mobile-controls-row-buttons{gap:6px;width:100%;display:flex}.mobile-controls-row-buttons .btn{white-space:nowrap;flex:1;min-height:clamp(28px,3.6vh,34px);padding:clamp(4px,.8vh,7px) 8px;font-size:clamp(.76rem,2.2vw,.86rem)}.hand-cards-area{flex-shrink:0;justify-content:center;align-items:flex-end;width:100%;max-width:100vw;display:flex;position:relative;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}}.connection-status-pill{z-index:10000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;border-radius:9999px;align-items:center;gap:8px;padding:8px 18px;font-size:.875rem;font-weight:600;transition:all .3s;animation:.25s cubic-bezier(.16,1,.3,1) forwards fadeInDown;display:inline-flex;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0006,0 2px 6px #00000040}.connection-status-pill.reconnecting{color:#fff;background:#ea580ce6;border:1px solid #ffffff4d}.connection-status-pill.reconnected{color:#fff;background:#16a34ae6;border:1px solid #ffffff4d}.connection-status-pill .status-dot{background-color:#fff;border-radius:50%;width:8px;height:8px;display:inline-block}.connection-status-pill .status-dot.pulsing{animation:1.2s ease-in-out infinite pulseDot}.connection-status-pill .status-dot.online{background-color:#4ade80}@keyframes fadeInDown{0%{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%)}}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}@media (width<=768px){.connection-status-pill{padding:3px 10px;font-size:.72rem;top:10px;left:12px;transform:none}}