.loading-screen{z-index:1000;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-logo{gap:.5rem;margin-bottom:2rem;display:flex}.logo-letter{text-shadow:3px 3px #0000004d;font-size:4rem;font-weight:900}.loading-cards{justify-content:center;width:140px;height:80px;margin-bottom:2rem;display:flex;position:relative}.loading-card{border-radius:8px;width:50px;height:70px;position:absolute;box-shadow:0 4px 8px #0000004d}.loading-card-0{background:var(--uno-red,#ed1c24);z-index:4;left:0}.loading-card-1{background:var(--uno-blue,#0072bc);z-index:3;left:30px}.loading-card-2{background:var(--uno-green,#00a651);z-index:2;left:60px}.loading-card-3{background:var(--uno-yellow,#ffde00);z-index:1;left:90px}.loading-text{color:#ffffffe6;text-align:center;margin-bottom:1rem;font-size:1.1rem}.loading-dots{gap:.5rem;display:flex}.loading-dot{background:var(--uno-yellow,#ffde00);border-radius:50%;width:10px;height:10px}.instruction-screen{z-index:1000;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.instruction-logo{gap:.4rem;margin-bottom:2rem;display:flex}.instruction-logo span{text-shadow:3px 3px #0000004d;font-size:3.5rem;font-weight:900}.logo-u{color:#ed1c24}.logo-n{color:#0072bc}.logo-o{color:#00a651}.instruction-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff14;border:1px solid #ffffff1a;border-radius:20px;width:100%;max-width:340px;padding:28px 24px}.instruction-title{color:#fff;text-align:center;margin:0 0 20px;font-size:20px;font-weight:800}.instruction-steps{flex-direction:column;gap:14px;display:flex}.instruction-step{align-items:center;gap:12px;display:flex}.step-num{color:#fff;background:linear-gradient(135deg,#ed1c24,#c41920);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:15px;font-weight:800;display:flex}.step-text{color:#ffffffe6;font-size:15px;line-height:1.3}.step-text b{color:#ffde00}.instruction-hint{color:#ffffff80;text-align:center;margin:20px 0 0;font-size:13px;line-height:1.4}.error-screen{z-index:1000;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:fixed;inset:0}.error-card{background:var(--uno-red,#ed1c24);border-radius:12px;justify-content:center;align-items:center;width:120px;height:160px;margin-bottom:1.5rem;display:flex;box-shadow:0 8px 24px #0006}.error-face{width:80px;height:80px;position:relative}.error-eye{background:#fff;border-radius:50%;width:16px;height:16px;position:absolute;top:20px}.error-eye:after{content:"";background:#1a1a2e;border-radius:50%;width:8px;height:8px;position:absolute;top:4px;left:4px}.error-eye-left{left:15px}.error-eye-right{right:15px}.error-mouth{border:4px solid #fff;border-top:none;border-radius:0 0 40px 40px;width:40px;height:20px;position:absolute;bottom:15px;left:50%;transform:translate(-50%)rotate(180deg)}.error-title{color:#fff;margin:0 0 .5rem;font-size:2rem;font-weight:700}.error-message{color:#fffc;text-align:center;max-width:300px;margin-bottom:1.5rem;font-size:1rem;line-height:1.5}.error-retry-btn{background:var(--uno-green,#00a651);color:#fff;cursor:pointer;border:none;border-radius:50px;padding:.875rem 2rem;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #00a65166}.error-retry-btn:hover{box-shadow:0 6px 16px #00a65180}.error-retry-btn:active{transform:scale(.98)}.error-boundary{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.error-boundary-content{text-align:center;max-width:400px}.error-icon{color:#ed1c24;width:80px;height:80px;margin:0 auto 24px}.error-icon svg{width:100%;height:100%}.error-boundary h1{color:#fff;margin:0 0 12px;font-size:24px;font-weight:700}.error-boundary p{color:#ffffffb3;margin:0 0 24px;font-size:16px;line-height:1.5}.error-details{text-align:left;color:#ff6b6b;white-space:pre-wrap;word-break:break-word;background:#0000004d;border-radius:8px;margin-bottom:24px;padding:12px;font-size:12px;overflow-x:auto}.retry-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#00a651,#008040);border:none;border-radius:28px;padding:14px 32px;font-size:16px;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #00a65166}.retry-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #00a65180}.retry-button:active{transform:scale(.98)}.opponents-bar{z-index:20;height:68px;padding:0 12px;overflow:visible}.opponents-scroll{scrollbar-width:none;-ms-overflow-style:none;justify-content:center;gap:8px;padding:10px 4px 8px;display:flex;overflow:auto visible}.opponents-scroll::-webkit-scrollbar{display:none}.opponent-card{background:#ffffff14;border:2px solid #0000;border-radius:14px;flex-shrink:0;align-items:center;gap:6px;min-width:100px;padding:6px 10px 6px 6px;transition:all .2s;display:flex;position:relative}.opponent-card.active{background:#ffde001f;border-color:#ffde0066}.opponent-card.disconnected{opacity:.5}.turn-glow{pointer-events:none;background:0 0;border-radius:15px;position:absolute;inset:-1px;box-shadow:0 0 12px #ffde0066}.opponent-avatar{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:relative}.opponent-avatar span{color:#fff;text-shadow:0 1px 2px #0000004d;font-size:14px;font-weight:700}.disconnected-badge{background:#0009;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.disconnected-badge svg{color:#ff6b6b;width:16px;height:16px}.opponent-info{flex-direction:column;gap:2px;min-width:0;display:flex}.opponent-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:60px;font-size:12px;font-weight:600;overflow:hidden}.opponent-cards{align-items:center;display:flex}.mini-card{background:linear-gradient(135deg,#8b0000,#600000);border:1px solid #ed1c24;border-radius:2px;flex-shrink:0;width:10px;height:14px}.cards-overflow{color:#fff9;margin-left:3px;font-size:10px}.card-count-badge{color:#fff;background:linear-gradient(135deg,#333,#222);border:1.5px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-6px;right:-6px}.uno-badge{color:#fff;white-space:nowrap;background:linear-gradient(135deg,#ed1c24,#c41920);border-radius:8px;padding:2px 6px;font-size:9px;font-weight:700;position:absolute;top:-8px;left:50%;transform:translate(-50%);box-shadow:0 2px 6px #ed1c2480}.catch-button{color:#fff;cursor:pointer;white-space:nowrap;z-index:10;background:linear-gradient(135deg,#00a651,#008040);border:none;border-radius:8px;padding:3px 8px;font-size:9px;font-weight:700;position:absolute;bottom:-8px;left:50%;transform:translate(-50%);box-shadow:0 2px 6px #00a65180}.catch-button:active{transform:translate(-50%)scale(.95)}.uno-card{cursor:default;-webkit-user-select:none;user-select:none;transform-origin:bottom;border-radius:clamp(6px,1.5vw,12px);flex-shrink:0;transition:transform .2s ease-out,box-shadow .2s ease-out,filter .2s ease-out;position:relative;overflow:hidden;box-shadow:0 2px 8px #0006}.uno-card__image{border-radius:inherit;pointer-events:none;object-fit:cover;width:100%;height:100%;display:block}.uno-card--playable{cursor:pointer;filter:brightness()}.uno-card--playable:hover{z-index:10;transform:translateY(-8px)scale(1.05);box-shadow:0 8px 24px #00000080}.uno-card--playable:active{transform:translateY(-4px)scale(1.02)}.uno-card--disabled{filter:brightness(.55)saturate(.6);cursor:default}.uno-card--disabled:hover{transform:none;box-shadow:0 2px 8px #0006}.uno-card--selected{z-index:20;filter:brightness(1.1);transform:translateY(-20px);box-shadow:0 12px 30px #0009,0 0 0 3px #ffffffe6}.uno-card--selected.uno-card--playable:hover{transform:translateY(-24px)scale(1.02)}@media (width<=480px){.uno-card--selected{transform:translateY(-14px)}.uno-card--selected.uno-card--playable:hover{transform:translateY(-16px)scale(1.02)}}.play-area{flex-direction:column;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:visible}.play-area-bg{pointer-events:none;background:radial-gradient(#00502826 0%,#0000 70%);border-radius:50%;position:absolute;inset:10%}.direction-ring{pointer-events:none;z-index:0;width:220px;height:220px;position:absolute}.direction-ring-arrows{width:100%;height:100%;position:relative}.dir-arrow{font-size:16px;position:absolute}.dir-arrow-top{top:0;left:50%;transform:translate(-50%)rotate(-90deg)}.dir-arrow-right{top:50%;right:0;transform:translateY(-50%)}.dir-arrow-bottom{bottom:0;left:50%;transform:translate(-50%)rotate(90deg)}.dir-arrow-left{top:50%;left:0;transform:translateY(-50%)rotate(180deg)}.discard-pile-container{z-index:1;position:relative}.discard-shadow-cards{pointer-events:none;position:absolute;top:0;left:0}.shadow-card{background:linear-gradient(135deg,#333,#222);border-radius:10px;width:120px;height:168px;position:absolute;box-shadow:0 2px 6px #0000004d}.discard-pile{z-index:5;position:relative}.table-message{z-index:10;pointer-events:none;color:#fff;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;border-radius:16px;justify-content:center;align-items:center;width:fit-content;margin:0 auto;padding:6px 20px;font-size:14px;font-weight:700;line-height:1.4;display:flex;position:absolute;bottom:12%;left:0;right:0}.player-hand{height:150px;padding:4px 16px calc(8px + env(safe-area-inset-bottom,0px));z-index:50;box-sizing:border-box;flex-direction:column;display:flex;position:relative;overflow:clip visible}.hand-count-badge{z-index:20;background:#0009;border-radius:8px;align-items:baseline;gap:3px;padding:2px 8px;display:flex;position:absolute;top:-8px;left:12px}.hand-count-badge span:first-child{color:#fff;font-size:13px;font-weight:700}.hand-count-label{color:#fff9;font-size:10px}.hand-scroll{flex:1;justify-content:center;align-items:flex-end;display:flex;overflow:clip visible}.hand-cards{box-sizing:border-box;align-items:flex-end;max-width:100%;display:flex}.hand-card-wrapper{transform-origin:bottom;cursor:pointer;touch-action:none;flex-shrink:0;position:relative}.hand-card-wrapper.selected{z-index:100!important}.hand-card-wrapper.dragging{z-index:200!important}.hand-card-wrapper.fanned{filter:brightness(1.1);z-index:150!important}.pulse-ring{pointer-events:none;z-index:-1;border:2px solid #ffffffb3;border-radius:12px;position:absolute;inset:-5px}.shaking{animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-6px)}}@media (width<=480px){.player-hand{height:140px}}.action-bar{justify-content:center;align-items:center;gap:10px;height:48px;padding:0 16px;display:flex;overflow:visible}.action-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:28px;justify-content:center;align-items:center;gap:6px;padding:12px 20px;font-size:15px;font-weight:700;transition:box-shadow .2s;display:flex;box-shadow:0 4px 12px #0000004d}.action-btn:active{box-shadow:0 2px 8px #0000004d}.action-icon{font-size:18px}.action-text-large{letter-spacing:1px;font-size:20px;font-weight:900}.action-btn--draw{color:#fff;background:linear-gradient(135deg,#0072bc,#005a96)}.action-btn--draw:hover{box-shadow:0 4px 16px #0072bc80}.action-btn--pass{color:#fff;background:linear-gradient(135deg,#666,#444)}.action-btn--pass:hover{box-shadow:0 4px 16px #64646480}.action-btn--uno{color:#fff;background:linear-gradient(135deg,#ed1c24,#c41920);padding:14px 32px;box-shadow:0 4px 20px #ed1c2480}.action-btn--uno:hover{box-shadow:0 6px 24px #ed1c2499}.action-btn--catch{color:#fff;background:linear-gradient(135deg,#00a651,#008040);box-shadow:0 4px 16px #00a65180}.action-btn--catch:hover{box-shadow:0 6px 20px #00a65199}@media (width<=400px){.action-bar{gap:8px;min-height:48px;padding:6px 12px}.action-btn{border-radius:24px;padding:10px 16px;font-size:13px}.action-icon,.action-text-large{font-size:16px}.action-btn--uno{padding:12px 24px}}.turn-timer{width:44px;height:44px;position:relative}.turn-timer.opponent-turn{opacity:.85;width:38px;height:38px}.timer-ring{width:100%;height:100%}.timer-text{text-shadow:0 1px 2px #0000004d;font-size:15px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.opponent-turn .timer-text{font-size:12px}.turn-timer.urgent .timer-text{animation:.5s ease-in-out infinite pulse-text}@keyframes pulse-text{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.2)}}.turn-hint{text-align:center;-webkit-backdrop-filter:blur(8px);border-radius:16px;justify-content:center;align-items:center;max-width:300px;min-height:28px;margin:0 auto 4px;padding:4px 14px;font-size:12px;font-weight:600;line-height:1.4;display:flex}.turn-hint--action{color:#6fdf9a;background:#00a65133;border:1px solid #00a6514d}.turn-hint--alert{color:#ff8a8a;background:#ed1c2433;border:1px solid #ed1c244d;animation:1.5s ease-in-out infinite hint-pulse}.turn-hint--wait{color:#ffffff80;background:#ffffff14;border:1px solid #ffffff1a}@keyframes hint-pulse{0%,to{opacity:1}50%{opacity:.7}}.special-overlay{z-index:900;pointer-events:none;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.special-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.special-text{text-shadow:0 4px 20px #00000080,0 0 60px;font-size:min(120px,25vw);font-weight:900;line-height:1}.special-icon{text-shadow:0 4px 20px #00000080,0 0 60px;font-size:min(120px,25vw);line-height:1}.special-rainbow{background:linear-gradient(135deg,#ed1c24,#0072bc,#00a651,#ffde00);-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 20px #00000080);-webkit-background-clip:text;background-clip:text}.color-change-circle{border-radius:50%;justify-content:center;align-items:center;width:min(160px,40vw);height:min(160px,40vw);display:flex;box-shadow:0 0 60px}.color-change-text{color:#fff;text-shadow:0 2px 4px #00000080;font-size:min(24px,5vw);font-weight:900}.color-picker-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.color-picker-modal{text-align:center;background:linear-gradient(135deg,#2d2d4a 0%,#1a1a2e 100%);border-radius:24px;width:90%;max-width:320px;padding:32px;box-shadow:0 20px 60px #00000080,0 0 0 2px #ffffff1a}.color-picker-title{color:#fff;text-shadow:0 2px 4px #0000004d;margin:0 0 24px;font-size:24px;font-weight:700}.color-picker-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px;display:grid}.color-picker-button{aspect-ratio:1;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:100%;transition:box-shadow .2s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000004d,inset 0 2px 4px #fff3}.color-picker-button:before{content:"";border-radius:inherit;background:linear-gradient(135deg,#ffffff4d 0%,#0000 50%);position:absolute;inset:0}.color-picker-button:hover{box-shadow:0 8px 24px #0006,inset 0 2px 4px #ffffff4d}.color-picker-button:active{box-shadow:0 2px 8px #0000004d,inset 0 2px 8px #0003}.color-picker-button:focus{outline:none;box-shadow:0 4px 12px #0000004d,0 0 0 4px #ffffff80}.color-picker-button-label{color:#fff;text-shadow:0 1px 3px #00000080;z-index:1;font-size:14px;font-weight:700;position:relative}.color-picker-button[style*=FFDE00] .color-picker-button-label{color:#1a1a2e;text-shadow:none}.color-picker-timer{align-items:center;gap:12px;display:flex}.color-picker-timer-bar{background:#fff3;border-radius:4px;flex:1;height:8px;overflow:hidden}.color-picker-timer-fill{background:linear-gradient(90deg,#ed1c24,#ffde00);border-radius:4px;height:100%}.color-picker-timer-text{color:#fffc;min-width:30px;font-size:14px;font-weight:600}@media (width<=360px){.color-picker-modal{padding:24px}.color-picker-title{font-size:20px}.color-picker-grid{gap:12px}}.game-over-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:500;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.confetti-piece{pointer-events:none;border-radius:2px;width:10px;height:10px;position:absolute;top:0}.game-over-content{text-align:center;background:linear-gradient(135deg,#2d2d4a 0%,#1a1a2e 100%);border-radius:24px;flex-direction:column;align-items:center;gap:20px;width:90%;max-width:340px;padding:32px;display:flex;box-shadow:0 20px 60px #00000080}.game-over-icon{font-size:64px;line-height:1}.game-over-title{color:#fff;text-shadow:0 2px 4px #0000004d;margin:0;font-size:32px;font-weight:900}.game-over-title.winner{background:linear-gradient(135deg,#ffde00,#ffb800);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.winner-info{align-items:center;gap:12px;display:flex}.winner-avatar{color:#fff;background:linear-gradient(135deg,#ed1c24,#0072bc);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:700;display:flex}.winner-name{color:#fff;font-size:18px;font-weight:600}.score-breakdown{background:#0003;border-radius:16px;width:100%;padding:16px}.score-breakdown h3{color:#ffffffb3;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px;font-size:12px;font-weight:600}.player-scores{flex-direction:column;gap:8px;display:flex}.score-row{background:#ffffff0d;border-radius:10px;align-items:center;gap:12px;padding:8px 12px;display:flex}.score-row.winner-row{background:#ffde0026;border:1px solid #ffde004d}.rank{color:#fff;background:#ffffff1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex}.winner-row .rank{color:#1a1a2e;background:#ffde00}.player-name{color:#fff;text-align:left;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:14px;font-weight:500;overflow:hidden}.cards-left{color:#fff9;flex-shrink:0;font-size:13px}.winner-row .cards-left{color:#ffde00;font-size:16px}.user-stats-summary{text-align:center;background:#0072bc26;border:1px solid #0072bc4d;border-radius:12px;width:100%;padding:12px}.stats-line{color:#ffffffe6;font-size:13px;font-weight:500}.new-game-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#00a651,#008040);border:none;border-radius:16px;width:100%;padding:16px 32px;font-size:18px;font-weight:700;transition:box-shadow .2s;box-shadow:0 4px 16px #00a65166}.new-game-btn:hover{box-shadow:0 6px 20px #00a65180}@media (width<=400px){.game-over-content{gap:16px;padding:24px}.game-over-icon{font-size:48px}.game-over-title{font-size:26px}.score-breakdown{padding:12px}.score-row{gap:8px;padding:6px 10px}.new-game-btn{padding:14px 24px;font-size:16px}}.toast-container{z-index:2000;pointer-events:none;flex-direction:column;align-items:center;gap:8px;max-width:90%;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.toast{cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;align-items:center;gap:8px;max-width:100%;padding:12px 20px;font-size:14px;font-weight:600;display:flex;box-shadow:0 4px 20px #0000004d}.toast-icon{flex-shrink:0;font-size:16px}.toast-message{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.toast--info{color:#fff;background:linear-gradient(135deg,#0072bcf2,#005a96f2)}.toast--success{color:#fff;background:linear-gradient(135deg,#00a651f2,#008240f2)}.toast--warning{color:#1a1a2e;background:linear-gradient(135deg,#ffde00f2,#ffb400f2)}.toast--error{color:#fff;background:linear-gradient(135deg,#ed1c24f2,#c41920f2)}@media (width<=400px){.toast-container{top:12px}.toast{border-radius:10px;padding:10px 16px;font-size:13px}}.sound-toggle{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background-color .2s;display:flex}.sound-toggle:hover{background:#ffffff40}.sound-toggle svg{color:#fff;width:18px;height:18px}.sound-toggle.disabled svg{opacity:.5}.game-table{width:100vw;height:100dvh;padding-top:env(safe-area-inset-top,0px);box-sizing:border-box;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);grid-template-rows:68px 1fr 48px 150px;grid-template-columns:1fr;display:grid;position:fixed;top:0;left:0;overflow:visible}.draw-pile-widget{z-index:30;opacity:.5;cursor:default;transition:opacity .2s;position:absolute;top:72px;left:10px}.draw-pile-widget.active{opacity:1;cursor:pointer}.draw-pile-badge{color:#fff;background:#000c;border:1.5px solid #ffffff4d;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 3px;font-size:9px;font-weight:700;display:flex;position:absolute;bottom:-2px;right:-2px}.draw-stack-badge{color:#fff;background:linear-gradient(135deg,#ed1c24,#c41920);border-radius:12px;justify-content:center;align-items:center;min-width:24px;height:24px;font-size:12px;font-weight:900;display:flex;position:absolute;top:-4px;left:-4px;box-shadow:0 2px 8px #ed1c2480}.top-right-cluster{z-index:30;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:72px;right:10px}.floating-uno-btn{z-index:60;color:#fff;letter-spacing:1px;cursor:pointer;background:linear-gradient(135deg,#ed1c24,#c41920);border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:18px;font-weight:900;display:flex;position:absolute;bottom:155px;right:16px;box-shadow:0 4px 20px #ed1c2499}.reconnecting-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.reconnecting-content{color:#fff;flex-direction:column;align-items:center;gap:16px;font-size:18px;font-weight:600;display:flex}.reconnecting-spinner{border:4px solid #fff3;border-top-color:#ed1c24;border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-toast{top:env(safe-area-inset-top,12px);color:#fff;z-index:1001;text-align:center;background:linear-gradient(135deg,#ed1c24,#c41920);border-radius:12px;max-width:90%;padding:10px 20px;font-size:13px;font-weight:600;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #ed1c2466}@media (width<=480px){.game-table{grid-template-rows:64px 1fr 44px 140px}.floating-uno-btn{width:56px;height:56px;font-size:15px;bottom:145px}.draw-pile-widget,.top-right-cluster{top:68px}}.ready-screen{z-index:100;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;position:fixed;top:0;left:0}.ready-content{text-align:center;width:100%;max-width:320px;padding:24px}.ready-content h2{color:#fff;margin:0 0 8px;font-size:2rem}.ready-subtitle{color:#fff9;margin:0 0 24px;font-size:14px}.ready-players{flex-direction:column;gap:10px;margin-bottom:24px;display:flex}.ready-player{background:#ffffff14;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;transition:background .3s;display:flex}.ready-player.is-ready{background:#00a65126}.ready-avatar{color:#fff;background:linear-gradient(135deg,#ed1c24,#0072bc);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:700;display:flex}.ready-name{color:#fff;text-align:left;flex:1;font-size:15px;font-weight:500}.ready-status{font-size:18px}.ready-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#00a651,#00c853);border:none;border-radius:14px;width:100%;padding:14px;font-size:18px;font-weight:700}.ready-waiting{color:#ffffff80;font-size:14px}:root{--uno-red:#ed1c24;--uno-blue:#0072bc;--uno-green:#00a651;--uno-yellow:#ffde00;--uno-black:#1a1a2e;--bg-dark:#1a1a2e;--bg-medium:#16213e;--bg-light:#0f3460;--text-primary:#fffffff2;--text-secondary:#ffffffb3;--text-muted:#ffffff80}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{overscroll-behavior:none;touch-action:manipulation;width:100vw;height:100dvh;position:fixed;overflow:hidden}body{background:linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 50%, var(--bg-light) 100%);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.game-table,.card,.hand-card,.opponent,.action-btn{-webkit-user-select:none;user-select:none}button,.card,.hand-card,.draw-pile{touch-action:manipulation}button,.card,.hand-card{transition:transform .2s,box-shadow .2s}button{outline:none;font-family:inherit}button:focus-visible{outline:2px solid var(--uno-yellow);outline-offset:2px}::-webkit-scrollbar{display:none}*{-ms-overflow-style:none;scrollbar-width:none}@supports (padding-top:env(safe-area-inset-top)){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}.reconnecting-banner{color:#fff;z-index:1000;background:linear-gradient(135deg,#ff6b35f2,#ed1c24f2);justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:600;animation:.3s slideDown;display:flex;position:fixed;top:0;left:0;right:0}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.reconnecting-spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}