:root{--card-ratio:240 / 336;--card-radius:14px;--card-color-red:#e61938;--card-color-blue:#0066e5;--card-color-green:#00a852;--card-color-yellow:#f5a600;--card-color-wild:#1e1b2e;--shadow-card-flat:0 4px 10px #00000026, 0 1px 3px #0000001a;--shadow-card-lift:0 14px 28px #00000040, 0 10px 10px #0000002e;--shadow-card-glow-red:0 0 24px #e6193873;--shadow-card-glow-blue:0 0 24px #0066e573;--shadow-card-glow-green:0 0 24px #00a85273;--shadow-card-glow-yellow:0 0 24px #f5a60073;--shadow-card-glow-wild:0 0 24px #a855f780}.card-wrapper{perspective:1000px;-webkit-user-select:none;user-select:none;cursor:pointer;will-change:transform;transition:transform .24s cubic-bezier(.34,1.56,.64,1),box-shadow .24s;display:inline-block;position:relative}.card-wrapper:hover:not(.non-interactive):not(.disabled){z-index:15;transform:translateY(-10px)scale(1.05)}.card-wrapper:active:not(.non-interactive):not(.disabled){transform:translateY(-2px)scale(.98)}.card-inner{width:100%;height:100%;transform-style:preserve-3d;border-radius:var(--card-radius);transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.card-wrapper.flipped .card-inner{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:var(--card-radius);width:100%;height:100%;box-shadow:var(--shadow-card-flat);background:#fff;justify-content:center;align-items:center;transition:box-shadow .25s;display:flex;position:absolute;top:0;left:0;overflow:hidden}.card-face.card-back-face{transform:rotateY(180deg)}.card-wrapper:hover .card-face{box-shadow:var(--shadow-card-lift)}.card-wrapper[data-color=red]:hover .card-face{box-shadow:var(--shadow-card-lift), var(--shadow-card-glow-red)}.card-wrapper[data-color=blue]:hover .card-face{box-shadow:var(--shadow-card-lift), var(--shadow-card-glow-blue)}.card-wrapper[data-color=green]:hover .card-face{box-shadow:var(--shadow-card-lift), var(--shadow-card-glow-green)}.card-wrapper[data-color=yellow]:hover .card-face{box-shadow:var(--shadow-card-lift), var(--shadow-card-glow-yellow)}.card-wrapper[data-color=wild]:hover .card-face{box-shadow:var(--shadow-card-lift), var(--shadow-card-glow-wild)}.card-svg{border-radius:var(--card-radius);width:100%;height:100%;display:block}.card-size-sm{width:72px;height:100.8px}.card-size-md{width:120px;height:168px}.card-size-lg{width:180px;height:252px}.card-size-xl{width:240px;height:336px}.card-size-hand{width:var(--hand-card-width,104px);height:var(--hand-card-height,145.6px)}.card-size-responsive{width:var(--hand-card-width,104px);height:var(--hand-card-height,145.6px);max-width:240px}.card-wrapper.selected{transform:translateY(-24px)scale(1.1);z-index:100!important}.card-wrapper.selected .card-face{box-shadow:0 0 0 3px #fff, 0 16px 32px #00000080, 0 0 24px #38bdf8cc, var(--shadow-card-lift)}.card-wrapper.non-interactive{cursor:default}.card-wrapper.disabled{opacity:.9;cursor:not-allowed;transform:none}@keyframes playable-glow-float{0%{transform:translateY(-8px);box-shadow:0 0 0 2.5px #38bdf8,0 8px 18px #38bdf873}50%{transform:translateY(-13px);box-shadow:0 0 0 3px #7dd3fc,0 12px 26px #38bdf8b3}to{transform:translateY(-8px);box-shadow:0 0 0 2.5px #38bdf8,0 8px 18px #38bdf873}}.hand-card-wrapper.is-playable.breathing{animation:2.4s ease-in-out infinite playable-glow-float}.hand-card-wrapper.is-playable.breathing:hover{animation:none}@keyframes landing-shockwave{0%{opacity:.9;transform:scale(.85);box-shadow:0 0 #38bdf8cc,0 0 20px #ffffffe6}50%{opacity:.7;transform:scale(1.08);box-shadow:0 0 0 16px #38bdf866,0 0 35px #38bdf899}to{opacity:0;transform:scale(1.15);box-shadow:0 0 0 32px #38bdf800,0 0 50px #38bdf800}}.discard-impact-ring{pointer-events:none;z-index:50;border:2px solid #38bdf8;border-radius:20px;animation:.5s cubic-bezier(.16,1,.3,1) forwards landing-shockwave;position:absolute;inset:-12px}.discard-pile-wrapper.landed{animation:.35s cubic-bezier(.34,1.56,.64,1) discard-thud}@keyframes discard-thud{0%{transform:scale(1.18)rotate(-4deg)}60%{transform:scale(.96)rotate(-1deg)}to{transform:scale(1)rotate(-2.5deg)}}.card-flight-overlay{pointer-events:none;z-index:9999;position:fixed;inset:0;overflow:hidden}.flying-card-element{will-change:transform, opacity;filter:drop-shadow(0 18px 30px #0009);pointer-events:none;position:absolute;top:0;left:0}.action-effect-overlay{z-index:8000;flex-direction:column;align-items:center;max-width:92vw;display:flex;position:fixed;top:66px;left:50%;transform:translate(-50%);pointer-events:none!important}.action-banner-skip,.action-banner-reverse,.action-banner-draw,.action-banner-wild4,.action-banner-uno,.action-banner-caught{-webkit-user-select:none;user-select:none;white-space:nowrap;border:1.5px solid #ffffffe6;border-radius:9999px;align-items:center;gap:8px;padding:7px 18px;display:inline-flex;pointer-events:none!important}.banner-title{letter-spacing:.04em;text-transform:uppercase;font-size:14px;font-weight:900;line-height:1}.banner-subtitle{opacity:.95;margin-left:2px;font-size:12px;font-weight:700;line-height:1}.action-banner-skip{color:#fff;background:linear-gradient(135deg,#e61938f5,#ba0d28f5);box-shadow:0 4px 18px #e6193880,0 8px 24px #0006}.action-banner-reverse{color:#fff;background:linear-gradient(135deg,#0066e5f5,#023c86f5);border-color:#38bdf8;box-shadow:0 4px 18px #0066e580,0 8px 24px #0006}.reverse-arrows-spin{animation:.8s cubic-bezier(.34,1.56,.64,1) forwards spin-reverse}@keyframes spin-reverse{0%{transform:rotate(0)scale(.7)}60%{transform:rotate(270deg)scale(1.15)}to{transform:rotate(360deg)scale(1)}}.action-banner-draw{color:#0f172a;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);box-shadow:0 4px 18px #f59e0b99,0 8px 24px #0006}.action-banner-draw .banner-subtitle{color:#451a03}.action-banner-wild4{color:#fff;text-shadow:0 1px 4px #00000080;background:linear-gradient(135deg,#ff1744 0%,#ff9100 25%,#00e676 50%,#2979ff 75%,#d500f9 100%);box-shadow:0 4px 22px #ffffff80,0 8px 24px #0006}.action-banner-uno{color:#fff;background:linear-gradient(135deg,#ff0844 0%,#ff4e50 100%);box-shadow:0 4px 20px #ff084499,0 8px 24px #0006}.action-banner-caught{color:#fff;background:linear-gradient(135deg,#991b1b 0%,#dc2626 100%);border-color:#f87171;box-shadow:0 4px 20px #dc2626b3,0 8px 24px #0006}.uno-celebration-container{z-index:8500;position:fixed;top:72px;left:50%;transform:translate(-50%);pointer-events:none!important}.uno-celebration-badge{transform-origin:50%;background:linear-gradient(135deg,#ff0844 0%,#ffb199 100%);border:4px solid #fff;border-radius:36px;flex-direction:column;align-items:center;gap:8px;padding:28px 56px;display:flex;box-shadow:0 0 60px #ff0844d9,0 25px 60px #000000b3}.uno-badge-text{color:#fff;text-shadow:0 4px 16px #0009;letter-spacing:.05em;font-size:64px;font-style:italic;font-weight:1000;line-height:1}.uno-badge-subtitle{color:#fff1f2;letter-spacing:.1em;text-transform:uppercase;font-size:16px;font-weight:800}.ai-status-indicator{color:#38bdf8;align-items:center;gap:4px;margin-top:2px;font-size:10px;font-weight:700;display:inline-flex}.thinking-dots{gap:3px;display:inline-flex}.thinking-dots span{background:#38bdf8;border-radius:50%;width:4px;height:4px;animation:1s ease-in-out infinite both bounce-dot}.thinking-dots span:first-child{animation-delay:-.32s}.thinking-dots span:nth-child(2){animation-delay:-.16s}.thinking-dots span:nth-child(3){animation-delay:0s}@keyframes bounce-dot{0%,80%,to{opacity:.4;transform:scale(0)}40%{opacity:1;transform:scale(1.1)}}.victory-celebration-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9500;background:#080c1cd9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.victory-card{text-align:center;background:linear-gradient(145deg,#1e1b2e 0%,#0f172a 100%);border:2px solid #ffffff2e;border-radius:28px;width:90%;max-width:520px;padding:36px 28px;position:relative;overflow:hidden;box-shadow:0 25px 60px #000000b3,0 0 50px #f5a60059}.victory-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#f5a60026 0%,#0000 65%);width:200%;height:200%;animation:20s linear infinite sunburst-spin;position:absolute;top:-50%;left:-50%}@keyframes sunburst-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.hand-card-wrapper.is-playable.breathing,.direction-icon,.reverse-arrows-spin,.uno-shout-btn.pulse-ready,.turn-pill,.opponent-uno-badge,.catch-uno-btn,.thinking-dots span,.victory-card:before{animation:none!important}}@media (width<=600px){.action-effect-overlay{max-width:90vw;top:52px}.action-banner-skip,.action-banner-reverse,.action-banner-draw,.action-banner-wild4,.action-banner-uno,.action-banner-caught{gap:6px;padding:5px 12px}.banner-title{font-size:11px}.banner-subtitle{font-size:10px}}.theme-selector-compact{background:#12101cb3;border:1px solid #ffffff1f;border-radius:8px;flex-shrink:0;align-items:center;gap:3px;padding:3px;display:inline-flex}@media (width<=640px){.theme-selector-compact .theme-toggle-label{display:none}.theme-selector-compact .theme-toggle-btn{gap:0;padding:5px 8px}}.theme-toggle-btn{color:#94a3b8;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.theme-toggle-btn:hover{color:#fff;background:#ffffff0f}.theme-toggle-btn.active{color:#fff;background:#3b82f6;box-shadow:0 2px 8px #3b82f666}.theme-toggle-btn.active.halloween{color:#fed7aa;background:linear-gradient(135deg,#b45309,#881337);box-shadow:0 2px 10px #e11d4866}.theme-selector-full{flex-direction:column;gap:14px;width:100%;display:flex}.theme-selector-header{flex-direction:column;gap:2px;display:flex}.theme-selector-title{color:#f1f5f9;margin:0;font-size:15px;font-weight:700}.theme-selector-subtitle{color:#94a3b8;font-size:12px}.theme-cards-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;display:grid}.theme-option-card{cursor:pointer;background:#141122;border:2px solid #ffffff14;border-radius:12px;flex-direction:column;justify-content:space-between;padding:16px;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.theme-option-card:hover{border-color:#ffffff40;transform:translateY(-2px);box-shadow:0 6px 20px #00000059}.theme-option-card.selected{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6,0 8px 24px #3b82f640}.theme-option-card.theme-card-halloween.selected{background:linear-gradient(#180d1e 0%,#100615 100%);border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b,0 8px 24px #f59e0b40}.theme-card-header{flex-direction:column;gap:6px;display:flex}.theme-card-badge-wrap{justify-content:space-between;align-items:center;display:flex}.theme-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:12px;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:700;display:inline-flex}.theme-badge.classic{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f64d}.theme-badge.halloween{color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d}.theme-active-pill{color:#10b981;align-items:center;gap:4px;font-size:11px;font-weight:700;display:inline-flex}.theme-name{color:#fff;margin:0;font-size:17px;font-weight:800}.theme-tagline{color:#94a3b8;margin:0;font-size:12px}.theme-card-body{flex-direction:column;gap:10px;margin:12px 0;display:flex}.theme-description{color:#cbd5e1;margin:0;font-size:13px;line-height:1.45}.theme-features-list{flex-wrap:wrap;gap:6px;display:flex}.theme-feature-tag{color:#94a3b8;background:#ffffff0d;border:1px solid #ffffff14;border-radius:6px;padding:3px 8px;font-size:11px}.theme-card-footer{margin-top:8px}.theme-select-btn{color:#fff;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:8px;width:100%;padding:8px 14px;font-size:13px;font-weight:700;transition:all .2s}.theme-select-btn:hover{background:#ffffff1f}.theme-select-btn.active{color:#fff;background:#3b82f6;border-color:#3b82f6}.theme-card-halloween .theme-select-btn.active{color:#fff;background:linear-gradient(135deg,#d97706,#be123c);border-color:#f59e0b}:root{--hand-card-width:104px;--hand-card-height:145.6px;--hand-card-overlap:-24px}.game-container{-webkit-user-select:none;user-select:none;flex-direction:column;max-width:1440px;height:calc(100vh - 65px);min-height:600px;margin:0 auto;padding:8px 16px;display:flex;position:relative;overflow:hidden}.game-top-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20;background:#171625e6;border:1px solid #ffffff1a;border-radius:12px;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;padding:8px 16px;display:flex}.game-status-pill{color:#e2e8f0;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex;overflow:hidden}.game-controls-group{flex-shrink:0;align-items:center;gap:8px;display:flex}.game-btn{color:#fff;cursor:pointer;background:#252238;border:1px solid #ffffff24;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.game-btn:hover:not(:disabled){background:#363252}.game-btn:disabled{opacity:.45;cursor:not-allowed}.game-btn.primary{background:#0284c7;border-color:#38bdf8}.game-btn.primary:hover:not(:disabled){background:#0369a1}.game-btn.draw-btn{color:#38bdf8;background:#1e293b;border-color:#38bdf8}.game-btn.draw-btn:hover:not(:disabled){color:#fff;background:#0f172a}.game-btn.danger{background:#e61938;border-color:#ff5a79}.game-btn.danger:hover:not(:disabled){background:#ba0d28}.game-arena{background:radial-gradient(circle at 50% 45%,#1b3558 0%,#10243e 50%,#091526 85%,#050b14 100%);border:4px solid #1e293b;border-radius:24px;outline:1px solid #ffffff26;flex-direction:column;flex:1;justify-content:space-between;min-height:0;padding:10px 16px 6px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 80px #0009,0 20px 40px #00000080}.game-arena:before{content:"";pointer-events:none;border:1px dashed #ffffff0f;border-radius:50%;width:90%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.opponents-row{z-index:5;flex-shrink:0;justify-content:center;align-items:center;gap:16px;min-height:76px;display:flex}.opponent-pod{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ad9;border:1px solid #ffffff1f;border-radius:12px;flex-direction:column;align-items:center;min-width:110px;padding:5px 12px;transition:all .25s;display:flex;position:relative}.opponent-pod.active-turn{background:#0f172af2;border-color:#38bdf8;transform:scale(1.03);box-shadow:0 0 22px #38bdf873}.opponent-header{align-items:center;gap:6px;margin-bottom:2px;display:flex}.opponent-avatar{font-size:16px}.opponent-name{color:#f1f5f9;font-size:12px;font-weight:700}.opponent-cards-badge{color:#38bdf8;background:#1e293b;border:1px solid #ffffff1a;border-radius:9999px;align-items:center;gap:3px;padding:1px 6px;font-size:10px;font-weight:700;display:inline-flex}.opponent-cards-visual{align-items:center;height:36px;margin-top:2px;display:flex}.mini-card-back{border-radius:4px;flex-shrink:0;width:26px;height:36.4px;margin-left:-17px;transition:transform .2s;overflow:hidden;box-shadow:-2px 2px 5px #0006}.mini-card-back:first-child{margin-left:0}.opponent-uno-badge{color:#fff;background:#e61938;border:1.5px solid #fff;border-radius:9999px;padding:2px 7px;font-size:9px;font-weight:900;animation:1s infinite alternate pulse-badge;position:absolute;top:-7px;right:-7px;box-shadow:0 2px 8px #e6193899}@keyframes pulse-badge{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes shake-attention{0%,to{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}.center-play-area{z-index:4;flex:1;justify-content:center;align-items:center;min-height:140px;max-height:200px;display:flex;position:relative}.center-table-console{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172a8c;border:1.5px solid #ffffff1a;border-radius:20px;justify-content:center;align-items:center;gap:28px;padding:10px 24px;display:flex;box-shadow:0 10px 25px #00000059}.pile-container{flex-direction:column;align-items:center;gap:5px;display:flex}.pile-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}.draw-pile-wrapper{cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1);position:relative}.draw-pile-wrapper:hover:not(.disabled){transform:translateY(-4px)scale(1.03)}.draw-pile-wrapper.disabled{cursor:not-allowed;opacity:.8}.draw-count-badge{color:#f8fafc;background:#020617;border:1.5px solid #ffffff4d;border-radius:6px;padding:2px 7px;font-size:11px;font-weight:800;position:absolute;bottom:-6px;right:-6px;box-shadow:0 2px 6px #00000080}.discard-pile-wrapper{transition:transform .2s;position:relative;transform:rotate(-2.5deg)}.active-color-indicator{flex-direction:column;align-items:center;gap:6px;min-width:110px;display:flex}.color-ring{border:3.5px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:all .3s;display:flex;box-shadow:0 0 24px #00000080}.color-ring.color-red{background:#e61938;box-shadow:0 0 24px #e61938b3}.color-ring.color-blue{background:#0066e5;box-shadow:0 0 24px #0066e5b3}.color-ring.color-green{background:#00a852;box-shadow:0 0 24px #00a852b3}.color-ring.color-yellow{background:#f5a600;box-shadow:0 0 24px #f5a600b3}.direction-icon{color:#fff;animation:7s linear infinite rotate-dir}.direction-icon.reverse{animation-direction:reverse}@keyframes rotate-dir{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.color-text-label{text-transform:uppercase;color:#fff;letter-spacing:.08em;background:#0006;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:900}.center-turn-indicator{color:#94a3b8;align-items:center;gap:4px;font-size:11px;font-weight:700;display:flex}.center-turn-indicator.human-turn{color:#38bdf8;font-weight:800}.human-hand-section{z-index:10;flex-direction:column;flex-shrink:0;align-items:center;width:100%;min-height:196px;display:flex;position:relative}.hand-toolbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;background:#0f172ad9;border:1px solid #ffffff1f;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:1040px;margin-bottom:clamp(14px,2vh,22px);padding:6px 14px;display:flex;position:relative}.hand-toolbar.active-turn-toolbar{border-color:#38bdf8;box-shadow:0 0 16px #38bdf84d}.hand-player-info{flex-shrink:0;align-items:center;gap:8px;display:flex}.player-name-tag{color:#fff;font-size:13px;font-weight:700}.turn-pill{color:#fff;background:#0284c7;border-radius:9999px;align-items:center;gap:4px;padding:2px 8px;font-size:10px;font-weight:800;animation:1.5s infinite alternate pulse-turn;display:inline-flex;box-shadow:0 0 10px #0284c780}@keyframes pulse-turn{0%{opacity:.85}to{opacity:1}}.hand-center-actions{flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.hand-right-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.uno-shout-btn{color:#fff;letter-spacing:.05em;cursor:pointer;background:linear-gradient(135deg,#ff3b5c 0%,#ba0d28 100%);border:2px solid #fff;border-radius:9999px;align-items:center;gap:5px;padding:6px 16px;font-size:12px;font-weight:900;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:inline-flex;box-shadow:0 4px 15px #e6193880}.uno-shout-btn:hover:not(:disabled){transform:translateY(-2px)scale(1.05);box-shadow:0 6px 20px #e61938b3}.uno-shout-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.uno-shout-btn.pulse-ready{animation:1.2s infinite alternate pulse-uno-ready}@keyframes pulse-uno-ready{0%{transform:scale(1);box-shadow:0 0 12px #e6193899}to{transform:scale(1.06);box-shadow:0 0 24px #e61938e6}}.uno-shout-btn.declared{background:#10b981;border-color:#a7f3d0;box-shadow:0 0 15px #10b98180;opacity:1!important}.hand-cards-container{width:100%;max-width:100%;min-height:calc(var(--hand-card-height) + 36px);scroll-behavior:smooth;z-index:10;justify-content:center;align-items:flex-end;padding:clamp(28px,3.8vh,36px) 20px clamp(6px,1vh,10px);display:flex;position:relative;overflow:auto visible}.hand-cards-container::-webkit-scrollbar{height:6px}.hand-cards-container::-webkit-scrollbar-track{background:#0003;border-radius:3px}.hand-cards-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.hand-cards-container::-webkit-scrollbar-thumb:hover{background:#fff6}.hand-card-wrapper{width:var(--hand-card-width);height:var(--hand-card-height);margin-left:var(--hand-card-overlap);cursor:pointer;will-change:transform;flex-shrink:0;transition:transform .28s cubic-bezier(.34,1.56,.64,1),margin .25s,opacity .22s,filter .22s,z-index 50ms;position:relative}.hand-card-wrapper .card-wrapper,.hand-card-wrapper .card-wrapper:hover,.hand-card-wrapper .card-wrapper.selected{transform:none!important}.hand-card-wrapper:first-child{margin-left:0}.hand-card-wrapper.is-playable{transform:translateY(-10px)}.hand-card-wrapper.is-playable .card-face{box-shadow:0 0 0 2.5px #38bdf8,0 8px 18px #38bdf873}.hand-card-wrapper.is-playable:hover{transform:translateY(-28px)scale(1.1);z-index:100!important}.hand-card-wrapper.is-playable:hover .card-face{box-shadow:0 0 0 3px #fff,0 18px 36px #0000008c,0 0 24px #38bdf8d9}.hand-card-wrapper.is-jumpable{cursor:pointer;transform:translateY(-8px)}.hand-card-wrapper.is-jumpable .card-face{animation:1.5s ease-in-out infinite alternate jumpable-glow;box-shadow:0 0 0 2.5px #f59e0b,0 8px 18px #f59e0b80}.hand-card-wrapper.is-jumpable:hover{transform:translateY(-24px)scale(1.1);z-index:100!important}@keyframes jumpable-glow{0%{box-shadow:0 0 0 2.5px #f59e0b,0 4px 12px #f59e0b66}to{box-shadow:0 0 0 3px #fbbf24,0 8px 24px #f59e0bd9}}.hand-card-wrapper.not-playable{opacity:.7;filter:brightness(.85)grayscale(.2);transform:translateY(0)}.hand-card-wrapper.not-playable:hover{opacity:.95;filter:none;transform:translateY(-12px)scale(1.04);z-index:80!important}.hand-card-wrapper.is-selected{margin-right:10px;margin-left:calc(var(--hand-card-overlap) + 10px);opacity:1!important;filter:none!important;z-index:150!important;transform:translateY(-20px)scale(1.08)!important}.hand-card-wrapper.is-selected:first-child{margin-left:0}.hand-card-wrapper.is-selected .card-face{box-shadow:0 0 0 3.5px #fff,0 22px 45px #000000a6,0 0 28px #38bdf8f2!important}.playable-dot{z-index:35;pointer-events:none;background:#38bdf8;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;top:-9px;left:50%;transform:translate(-50%);box-shadow:0 0 8px #38bdf8}.color-choice-modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.color-choice-box{text-align:center;background:#1e1b2e;border:2px solid #ffffff26;border-radius:20px;width:100%;max-width:440px;padding:32px;box-shadow:0 20px 40px #000000b3}.color-choice-title{color:#fff;margin-bottom:8px;font-size:22px;font-weight:800}.color-choice-subtitle{color:#94a3b8;margin-bottom:24px;font-size:14px}.color-buttons-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.color-pick-btn{color:#fff;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;border:3px solid #fff6;border-radius:12px;justify-content:center;align-items:center;height:64px;font-size:16px;font-weight:900;transition:all .2s;display:flex}.color-pick-btn:hover{border-color:#fff;transform:scale(1.05);box-shadow:0 0 20px #fff6}.color-pick-btn.red{background:#e61938}.color-pick-btn.blue{background:#0066e5}.color-pick-btn.green{background:#00a852}.color-pick-btn.yellow{color:#1e1b2e;background:#f5a600}.drawn-decision-bar{background:#0f172af2;border:1px solid #38bdf8;border-radius:10px;align-items:center;gap:8px;padding:4px 10px;font-size:12px;display:flex;box-shadow:0 0 16px #38bdf859}.privacy-shield-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:90;background:#0f172af5;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.privacy-shield-icon{font-size:48px}.privacy-shield-title{color:#fff;font-size:26px;font-weight:800}.privacy-shield-desc{color:#94a3b8;margin-bottom:8px;font-size:15px}.logs-panel{z-index:50;background:#171625;border:1px solid #ffffff26;border-radius:16px;flex-direction:column;width:320px;max-height:480px;display:flex;position:absolute;top:50px;right:16px;overflow:hidden;box-shadow:0 20px 40px #0009}.logs-header{background:#12111e;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:12px 16px;font-size:13px;font-weight:700;display:flex}.logs-list{flex-direction:column;gap:6px;padding:12px;font-size:12px;display:flex;overflow-y:auto}.log-item{color:#cbd5e1;background:#ffffff0a;border-radius:6px;padding:6px 10px;line-height:1.4}.log-item.play{border-left:3px solid #38bdf8}.log-item.action{border-left:3px solid #f5a600}.log-item.uno{color:#fff;border-left:3px solid #e61938;font-weight:700}.log-item.win{color:#34d399;border-left:3px solid #10b981;font-weight:700}@media (width<=768px){:root{--hand-card-width:80px;--hand-card-height:112px;--hand-card-overlap:-24px}.game-container{height:calc(100vh - 56px);padding:4px 6px}.game-arena{border-radius:18px;padding:6px}.center-play-area{min-height:120px}.center-table-console{gap:16px;padding:8px 16px}.center-table-console .card-size-md{width:96px;height:134.4px}.color-ring{width:44px;height:44px}.hand-toolbar{flex-wrap:wrap;gap:6px;margin-bottom:14px;padding:4px 8px}.hand-cards-container{justify-content:flex-start;padding:24px 10px 4px}.hand-card-wrapper.is-selected{margin-right:6px;margin-left:calc(var(--hand-card-overlap) + 6px);transform:translateY(-16px)scale(1.06)!important}}@media (width<=480px){:root{--hand-card-width:68px;--hand-card-height:95.2px;--hand-card-overlap:-28px}.center-table-console{gap:8px;padding:6px 10px}.center-table-console .card-size-md{width:76px;height:106.4px}.active-color-indicator{gap:3px;min-width:64px}.color-ring{width:36px;height:36px}.color-text-label{font-size:10px}.center-turn-indicator{font-size:9px}.opponents-row{gap:8px;min-height:56px}.opponent-pod{min-width:76px;padding:3px 6px}.opponent-avatar{font-size:13px}.opponent-name{text-overflow:ellipsis;white-space:nowrap;max-width:60px;font-size:10px;overflow:hidden}.opponent-cards-badge{padding:1px 4px;font-size:9px}}.difficulty-badge{letter-spacing:.04em;text-transform:uppercase;border-radius:6px;flex-shrink:0;align-items:center;padding:2px 8px;font-size:11px;font-weight:800;display:inline-flex}.difficulty-badge.difficulty-easy{color:#34d399;background:#10b98126;border:1px solid #34d39966}.difficulty-badge.difficulty-medium{color:#fbbf24;background:#f5a60026;border:1px solid #fbbf2466}.difficulty-badge.difficulty-hard{color:#f87171;background:#ef444426;border:1px solid #f8717166}.opponent-difficulty-tag{color:#94a3b8;letter-spacing:.05em;text-transform:uppercase;font-size:9px;font-weight:700}.local-game-container{-webkit-user-select:none;user-select:none;flex-direction:column;max-width:1440px;height:calc(100dvh - 52px);min-height:480px;margin:0 auto;padding:clamp(4px,1vh,12px) 16px;display:flex;position:relative;overflow:hidden auto}.game-status-row{flex-shrink:0;align-items:center;gap:8px;min-width:0;display:flex}.local-game-arena{--gap-opp-to-center:clamp(16px, 2.4vh, 24px);--gap-center-to-status:clamp(20px, 3vh, 28px);--gap-status-to-hand:clamp(20px, 3vh, 32px);--arena-pad-top:clamp(10px, 1.6vh, 18px);--arena-pad-bottom:clamp(16px, 2.4vh, 28px);width:100%;min-height:0;padding:var(--arena-pad-top) 16px var(--arena-pad-bottom) 16px;flex-direction:column;flex:1;justify-content:space-between;align-items:center;display:flex;position:relative;overflow:hidden auto}.local-opponents-row{width:100%;max-width:min(100%, calc(var(--opponent-count,3) * 170px + (var(--opponent-count,3) - 1) * 16px));margin:0 auto var(--gap-opp-to-center) auto;grid-template-columns:repeat(var(--opponent-count,3), minmax(0, 1fr));box-sizing:border-box;z-index:5;flex-shrink:0;justify-content:center;align-items:stretch;gap:clamp(8px,1.4vw,16px);min-height:auto;display:grid}.local-opponent-pod{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-sizing:border-box;background:#0f172ae0;border:1px solid #ffffff1f;border-radius:12px;flex-direction:column;justify-content:space-between;align-items:stretch;width:100%;min-width:0;padding:8px 12px;transition:border-color .22s,box-shadow .22s;display:flex;position:relative}.local-opponent-pod.active-turn{background:#0f172af5;border-color:#38bdf8;box-shadow:0 0 16px #38bdf866;transform:none!important}.local-opponent-pod .opponent-header{justify-content:space-between;align-items:center;gap:6px;width:100%;min-width:0;margin-bottom:2px;display:flex}.local-opponent-pod .opponent-header-left{flex:auto;align-items:center;gap:6px;min-width:0;display:flex;overflow:hidden}.local-opponent-pod .opponent-avatar{flex-shrink:0;justify-content:center;align-items:center;font-size:16px;line-height:1;display:inline-flex}.local-opponent-pod .opponent-name{color:#f8fafc;white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:12px;font-weight:700;line-height:1.2;overflow:hidden}.local-opponent-pod .opponent-cards-badge{color:#38bdf8;white-space:nowrap;background:#1e293bf2;border:1px solid #38bdf84d;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding:2px 7px;font-size:11px;font-weight:700;line-height:1.2;display:inline-flex}.local-opponent-pod .opponent-status-row{justify-content:space-between;align-items:center;width:100%;min-height:16px;margin:2px 0 4px;display:flex;overflow:hidden}.local-opponent-pod .opponent-difficulty-tag{color:#94a3b8;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;background:#ffffff0f;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:700}.local-opponent-pod .ai-status-indicator{color:#38bdf8;white-space:nowrap;align-items:center;gap:3px;font-size:9.5px;font-weight:700;display:inline-flex}.local-opponent-pod .ai-status-text{text-overflow:ellipsis;white-space:nowrap;max-width:65px;overflow:hidden}.local-opponent-pod .opponent-turn-pill{color:#38bdf8;white-space:nowrap;letter-spacing:.04em;background:#38bdf826;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:800}.local-opponent-pod .opponent-uno-badge{color:#fff;letter-spacing:.05em;background:#e61938;border:1px solid #fff;border-radius:9999px;flex-shrink:0;align-items:center;margin-left:auto;padding:1px 6px;font-size:9px;font-weight:900;animation:1s infinite alternate pulse-badge;display:inline-flex;box-shadow:0 0 8px #e6193899}.local-opponent-pod .opponent-cards-visual{justify-content:center;align-items:center;width:100%;height:32px;margin-top:2px;display:flex;overflow:visible}.local-opponent-pod .mini-card-back{border-radius:3.5px;flex-shrink:0;width:20px;height:28px;margin-left:-12px;transition:transform .2s;overflow:hidden;box-shadow:-1px 2px 5px #00000073}.local-opponent-pod .mini-card-back:first-child{margin-left:0}.local-opponent-pod .catch-uno-btn{color:#fff;cursor:pointer;text-align:center;white-space:nowrap;background:#e61938;border:1px solid #ff5a79;border-radius:6px;width:100%;margin-top:4px;padding:3px 6px;font-size:9px;font-weight:800;animation:1.2s ease-in-out infinite shake-attention}.local-center-play-area{width:100%;min-height:auto;max-height:none;margin-bottom:var(--gap-center-to-status);z-index:4;flex:1;justify-content:center;align-items:center;display:flex;position:relative}.local-center-table-console{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172a8c;border:1.5px solid #ffffff1a;border-radius:18px;justify-content:center;align-items:center;gap:clamp(14px,2vw,24px);padding:clamp(6px,1.2vh,10px) clamp(14px,2vw,22px);display:flex;box-shadow:0 10px 25px #00000059}.local-center-table-console .card-size-md{width:clamp(76px,11vh,114px);height:clamp(106px,15.4vh,160px)}.local-center-table-console .color-ring{width:clamp(38px,5.5vh,48px);height:clamp(38px,5.5vh,48px)}.local-center-table-console .pile-label{font-size:clamp(9px,1.3vh,11px)}.local-game-arena .draw-count-badge{z-index:5;padding:1px 6px;font-size:10px;bottom:4px;right:4px}.local-player-status-region{width:100%;margin-bottom:var(--gap-status-to-hand);z-index:8;flex-shrink:0;justify-content:center;align-items:center;display:flex}.local-hand-toolbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172ae0;border:1px solid #ffffff1f;border-radius:12px;gap:12px;width:100%;max-width:1040px;margin-bottom:0;padding:clamp(4px,.8vh,6px) clamp(10px,1.2vw,14px)}.local-player-hand-region{z-index:10;--hand-card-width:clamp(72px, 10.5vh, 104px);--hand-card-height:clamp(100px, 14.7vh, 145.6px);flex-direction:column;flex-shrink:0;justify-content:flex-end;align-items:center;width:100%;min-height:auto;display:flex;position:relative}.local-hand-cards-container{width:100%;max-width:100%;min-height:calc(var(--hand-card-height) + clamp(30px, 4.4vh, 44px));justify-content:center;align-items:flex-end;padding:clamp(28px,4vh,40px) 20px clamp(4px,1vh,8px);display:flex;overflow:auto visible}.local-player-hand-region .hand-card-wrapper.is-selected{margin-right:8px;margin-left:calc(var(--hand-card-overlap) + 8px);transform:translateY(-18px)scale(1.08)!important}@media (height<=760px){.local-game-container{min-height:480px;padding:3px 10px}.local-game-arena{--gap-opp-to-center:18px;--gap-center-to-status:22px;--gap-status-to-hand:18px;--arena-pad-top:6px;--arena-pad-bottom:12px}}@media (height<=660px){.local-game-container{min-height:420px;padding:2px 8px}.local-game-arena{--gap-opp-to-center:16px;--gap-center-to-status:20px;--gap-status-to-hand:16px;--arena-pad-top:4px;--arena-pad-bottom:8px}}@media (width<=1024px){.game-top-bar{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:6px;padding:8px 12px}.game-status-row{justify-content:space-between;align-items:center;width:100%;min-width:0;display:flex}.game-status-pill{gap:6px;max-width:75%;font-size:12px}.game-controls-group{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;align-items:center;gap:6px;width:100%;padding:2px 0 4px;display:flex;overflow-x:auto}.game-controls-group::-webkit-scrollbar{display:none}.game-controls-group .game-btn{white-space:nowrap;flex-shrink:0;min-height:32px;padding:4px 8px;font-size:11px}}@media (width<=600px){.local-game-container,.game-container{height:auto;min-height:calc(100dvh - 44px);padding:4px 6px max(6px, env(safe-area-inset-bottom,6px)) 6px;overflow:hidden auto}.game-top-bar{flex-direction:column;align-items:stretch;gap:6px;margin-bottom:4px;padding:6px 10px}.game-status-row{justify-content:space-between;align-items:center;width:100%;min-width:0;display:flex}.game-status-pill{gap:6px;max-width:70%;font-size:11px}.game-status-pill .brand-icon{flex-shrink:0;width:13px;height:13px}.difficulty-badge{letter-spacing:.02em;padding:2px 6px;font-size:9px}.game-controls-group{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;align-items:center;gap:5px;width:100%;padding:2px 0 4px;display:flex;overflow-x:auto}.game-controls-group::-webkit-scrollbar{display:none}.game-controls-group .game-btn{white-space:nowrap;flex-shrink:0;min-height:32px;padding:4px 8px;font-size:11px}.local-game-arena,.game-arena{--gap-opp-to-center:clamp(10px, 1.5vh, 16px);--gap-center-to-status:clamp(16px, 2.2vh, 22px);--gap-status-to-hand:clamp(16px, 2.4vh, 24px);--arena-pad-top:4px;--arena-pad-bottom:clamp(14px, 2vh, 20px);border-width:2px;border-radius:16px;padding:4px 6px clamp(14px,2vh,20px)}.local-opponents-row{grid-template-columns:repeat(var(--opponent-count,3), minmax(0, 1fr));width:100%;max-width:100%;margin-bottom:var(--gap-opp-to-center);gap:6px;padding:0 2px}.local-opponent-pod{border-radius:10px;padding:5px 6px}.local-opponent-pod .opponent-header{gap:3px;margin-bottom:1px}.local-opponent-pod .opponent-header-left{gap:4px}.local-opponent-pod .opponent-avatar{font-size:13px}.local-opponent-pod .opponent-name{font-size:10.5px;line-height:1.15}.local-opponent-pod .opponent-cards-badge{padding:1px 4px;font-size:9.5px}.local-opponents-row .cards-text{display:none}.local-opponent-pod .opponent-status-row{min-height:13px;margin:1px 0 2px}.local-opponent-pod .opponent-difficulty-tag{border-radius:3px;padding:0 3px;font-size:8px}.local-opponent-pod .ai-status-indicator{gap:2px;font-size:8.5px}.local-opponent-pod .ai-status-text{max-width:44px}.local-opponent-pod .opponent-turn-pill{padding:0 3px;font-size:8px}.local-opponent-pod .opponent-uno-badge{padding:0 4px;font-size:8px}.local-opponent-pod .opponent-cards-visual{height:22px;margin-top:1px}.local-opponent-pod .mini-card-back{border-radius:2.5px;width:15px;height:21px;margin-left:-9px}.local-opponent-pod .catch-uno-btn{padding:2px 3px;font-size:8px}.local-center-play-area{margin-bottom:var(--gap-center-to-status)}.local-center-table-console{border-radius:14px;gap:10px;padding:6px 12px}.local-center-table-console .card-size-md{width:60px;height:84px}.local-center-table-console .color-ring{width:32px;height:32px}.local-center-table-console .color-text-label,.local-center-table-console .center-turn-indicator{font-size:9px}.local-center-table-console .pile-label{font-size:8px}.local-center-table-console .draw-count-badge{padding:1px 4px;font-size:9px;bottom:2px;right:2px}.local-player-status-region{margin-bottom:var(--gap-status-to-hand)}.local-hand-toolbar{border-radius:10px;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:4px 8px}.local-hand-toolbar .hand-left-info{gap:6px;font-size:11px}.local-hand-toolbar .player-name-badge{font-size:11px}.local-hand-toolbar .turn-badge{padding:2px 6px;font-size:9px}.local-hand-toolbar .game-btn,.local-hand-toolbar .uno-shout-btn{min-height:34px;padding:5px 10px;font-size:11px}.local-player-hand-region{--hand-card-width:60px;--hand-card-height:84px}.local-hand-cards-container{min-height:calc(var(--hand-card-height) + 24px);-webkit-overflow-scrolling:touch;justify-content:safe center;padding:20px 8px 4px}.local-player-hand-region .hand-card-wrapper.is-selected{margin-right:4px;margin-left:calc(var(--hand-card-overlap) + 4px);transform:translateY(-12px)scale(1.05)!important}.local-player-hand-region .hand-card-wrapper.is-playable{transform:translateY(-5px)}.local-player-hand-region .hand-card-wrapper.is-playable:hover{transform:translateY(-10px)scale(1.04)}.local-player-hand-region .playable-dot{width:7px;height:7px;top:-6px}.color-choice-modal{padding:16px}.color-choice-box{border-radius:16px;max-width:320px;padding:20px 16px}.color-choice-title{margin-bottom:6px;font-size:18px}.color-choice-subtitle{margin-bottom:16px;font-size:12px}.color-buttons-grid{gap:10px}.color-pick-btn{border-radius:10px;height:48px;font-size:14px}}@media (width>=601px) and (width<=900px){.local-player-hand-region{--hand-card-width:80px;--hand-card-height:112px}.local-center-table-console .card-size-md{width:72px;height:100.8px}.local-hand-cards-container{justify-content:safe center}}.floating-emote-bubble{color:#fbbf24;pointer-events:none;z-index:60;white-space:nowrap;background:#0f172af0;border:1.5px solid #fbbf2480;border-radius:9999px;padding:3px 10px;font-size:20px;font-weight:800;line-height:1;position:absolute;top:-24px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0009,0 0 16px #f5a60066}.emote-toggle-btn{border-radius:8px;padding:4px 10px;font-size:11px;font-weight:600}.spectator-counter-badge{color:#c084fc;background:#a855f726;border:1px solid #a855f766;border-radius:6px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-flex}.multiplayer-container{color:#f8fafc;background:radial-gradient(circle at 50% 30%,#171b30 0%,#0d1020 100%);flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 64px);padding:24px 16px;display:flex}.lobby-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#1a2035d9;border:1px solid #ffffff1a;border-radius:20px;width:100%;max-width:520px;padding:28px 24px;box-shadow:0 16px 40px #00000080,0 0 30px #38bdf814}.lobby-header{text-align:center;margin-bottom:24px}.lobby-title{letter-spacing:-.5px;background:linear-gradient(135deg,#fff 0%,#94a3b8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:8px 0 4px;font-size:26px;font-weight:800}.lobby-subtitle{color:#94a3b8;margin:0;font-size:13px}.lobby-mode-tabs{background:#0f142399;border:1px solid #ffffff0f;border-radius:12px;margin-bottom:22px;padding:4px;display:flex}.lobby-mode-tab{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:9px 12px;font-size:13px;font-weight:600;transition:all .2s}.lobby-mode-tab.active{color:#0b1120;background:#38bdf8;box-shadow:0 2px 10px #38bdf859}.lobby-form-group{margin-bottom:18px}.lobby-label{text-transform:uppercase;letter-spacing:.5px;color:#cbd5e1;margin-bottom:7px;font-size:12px;font-weight:600;display:block}.lobby-input{color:#fff;box-sizing:border-box;background:#0f172ab3;border:1px solid #ffffff1f;border-radius:10px;outline:none;width:100%;padding:12px 16px;font-size:14px;font-weight:500;transition:border-color .2s,box-shadow .2s}.lobby-input:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf833}.lobby-input.room-code-input{letter-spacing:4px;text-transform:uppercase;text-align:center;font-size:20px;font-weight:800}.avatar-picker{justify-content:center;gap:10px;margin-top:8px;display:flex}.avatar-option{cursor:pointer;background:#0f172a99;border:2px solid #0000;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;font-size:24px;transition:transform .15s,border-color .15s;display:flex}.avatar-option:hover{transform:scale(1.1)}.avatar-option.selected{background:#38bdf826;border-color:#38bdf8;box-shadow:0 0 12px #38bdf84d}.lobby-btn{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:13px 20px;font-size:15px;font-weight:700;transition:all .2s;display:flex}.lobby-btn.primary{color:#fff;background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%);box-shadow:0 4px 14px #0284c766}.lobby-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#0369a1 0%,#075985 100%);transform:translateY(-1px)}.lobby-btn.primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.lobby-btn.secondary{color:#e2e8f0;background:#ffffff14;border:1px solid #ffffff1f}.lobby-btn.secondary:hover{background:#ffffff24}.lobby-btn.danger{color:#f87171;background:#ef444426;border:1px solid #ef44444d}.lobby-btn.danger:hover{background:#ef444440}.room-code-banner{background:#0f172ab3;border:1px dashed #38bdf866;border-radius:14px;flex-direction:column;align-items:center;margin-bottom:20px;padding:16px;display:flex}.room-code-label{text-transform:uppercase;color:#94a3b8;letter-spacing:1px;margin-bottom:4px;font-size:11px;font-weight:600}.room-code-value{letter-spacing:6px;color:#38bdf8;font-family:monospace;font-size:32px;font-weight:900}.room-code-actions{gap:8px;margin-top:10px;display:flex}.room-action-pill{color:#38bdf8;cursor:pointer;background:#38bdf81f;border:1px solid #38bdf840;border-radius:20px;align-items:center;gap:5px;padding:5px 12px;font-size:11px;transition:all .15s;display:flex}.room-action-pill:hover{background:#38bdf838}.player-roster{flex-direction:column;gap:10px;margin-bottom:22px;display:flex}.player-slot{background:#0f172a8c;border:1px solid #ffffff14;border-radius:12px;justify-content:space-between;align-items:center;padding:12px 16px;transition:border-color .2s;display:flex}.player-slot.is-me{background:#38bdf80f;border-color:#38bdf866}.player-slot.empty-slot{opacity:.5;color:#64748b;border-style:dashed;justify-content:center;font-size:13px}.slot-left{align-items:center;gap:12px;display:flex}.slot-avatar{font-size:22px}.slot-name{align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex}.slot-tag{text-transform:uppercase;border-radius:6px;padding:2px 6px;font-size:10px;font-weight:600}.slot-tag.host{color:#f5a600;background:#f5a60033;border:1px solid #f5a60066}.slot-tag.you{color:#38bdf8;background:#38bdf833;border:1px solid #38bdf866}.slot-right{align-items:center;gap:8px;display:flex}.connection-indicator{background:#10b981;border-radius:50%;width:8px;height:8px;box-shadow:0 0 6px #10b981}.connection-indicator.disconnected{background:#ef4444;box-shadow:0 0 6px #ef4444}.lobby-error{color:#fca5a5;background:#ef444426;border:1px solid #ef444459;border-radius:10px;align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;font-size:12px;display:flex}.catch-uno-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);border:none;border-radius:16px;margin-top:4px;padding:3px 8px;font-size:10px;font-weight:800;animation:1.2s infinite pulseCatch}@keyframes pulseCatch{0%{transform:scale(1);box-shadow:0 0 #ef4444b3}70%{transform:scale(1.05);box-shadow:0 0 0 6px #ef444400}to{transform:scale(1);box-shadow:0 0 #ef444400}}.round-timer-pill{color:#38bdf8;letter-spacing:.3px;background:#0f172abf;border:1px solid #38bdf859;border-radius:9999px;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:700;transition:all .25s;display:inline-flex}.round-timer-pill.urgent{color:#ef4444;background:#ef444433;border-color:#ef444499;animation:.8s ease-in-out infinite alternate timerPulse;box-shadow:0 0 10px #ef444466}.opponent-timer-badge{color:#38bdf8;background:#0f172abf;border:1px solid #38bdf866;border-radius:8px;align-items:center;gap:3px;padding:2px 7px;font-size:10px;font-weight:700;display:inline-flex}.opponent-timer-badge.urgent{color:#ef4444;background:#ef444440;border-color:#ef444499;animation:.8s ease-in-out infinite alternate timerPulse;box-shadow:0 0 8px #ef444466}.my-turn-timer-pill{color:#38bdf8;background:#38bdf826;border:1px solid #38bdf866;border-radius:9999px;align-items:center;gap:4px;padding:2px 9px;font-size:11px;font-weight:700;display:inline-flex}.my-turn-timer-pill.urgent{color:#ef4444;background:#ef444440;border-color:#ef444499;animation:.8s ease-in-out infinite alternate timerPulse;box-shadow:0 0 10px #ef444466}.center-turn-indicator.urgent{text-shadow:0 0 8px #ef444499;color:#ef4444!important}.center-timer-text{opacity:.9;font-size:11px;font-weight:800}.center-timer-bar-track{background:#ffffff1a;border:1px solid #ffffff26;border-radius:4px;width:120px;height:5px;margin-top:5px;overflow:hidden}.center-timer-bar-fill{background:linear-gradient(90deg,#38bdf8 0%,#0284c7 100%);border-radius:4px;height:100%;transition:width .25s linear}.center-timer-bar-fill.urgent{background:linear-gradient(90deg,#f59e0b 0%,#ef4444 100%);box-shadow:0 0 6px #ef4444cc}.modal-timer-pill{color:#38bdf8;background:#0f172acc;border:1px solid #38bdf859;border-radius:9999px;align-items:center;gap:6px;margin-bottom:16px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.modal-timer-pill.urgent{color:#ef4444;background:#ef444433;border-color:#ef444499;animation:.8s ease-in-out infinite alternate timerPulse;box-shadow:0 0 10px #ef444466}@keyframes timerPulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.timer-icon-spin{animation:1s ease-in-out infinite timerIconWiggle}@keyframes timerIconWiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}@media (width<=600px){.multiplayer-container{min-height:calc(100dvh - 44px);padding:12px 8px}.lobby-card{border-radius:16px;max-width:100%;padding:18px 12px}.lobby-title{font-size:20px}.avatar-picker{gap:6px}.avatar-option{border-radius:10px;width:38px;height:38px;font-size:20px}.room-code-value{letter-spacing:3px;font-size:24px}.game-status-row{flex-wrap:wrap;align-items:center;gap:5px;width:100%;display:flex}.room-action-pill{border-radius:14px;padding:2px 8px;font-size:10px}.turn-counter-badge{padding:2px 6px;font-size:10px}.round-timer-pill{padding:2px 7px;font-size:10px}.opponent-timer-badge{padding:1px 5px;font-size:9px}.center-timer-bar-track{width:80px;height:4px}.hand-player-info{gap:6px}.my-turn-timer-pill{padding:1px 7px;font-size:10px}.modal-timer-pill{margin-bottom:12px;padding:3px 10px;font-size:11px}}*{box-sizing:border-box;margin:0;padding:0}body{color:#fffffe;-webkit-font-smoothing:antialiased;background-color:#0f0e17;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}.gallery-container{max-width:1440px;margin:0 auto;padding:32px 24px 64px}.gallery-header{text-align:center;margin-bottom:32px}.header-badge{color:#a7a9be;background:#ffffff14;border:1px solid #ffffff26;border-radius:9999px;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex}.header-title{letter-spacing:-.02em;background:linear-gradient(135deg,#fff 0%,#e2e8f0 60%,#94a3b8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:12px;font-size:38px;font-weight:800}.header-subtitle{color:#a7a9be;max-width:680px;margin:0 auto 24px;font-size:16px}.stats-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.stat-pill{background:#1b1a28;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex}.stat-pill.success{color:#34d399;background:#10b98126;border-color:#10b98166}.stat-pill.color-red{color:#ff5a79;background:#e6193826;border-color:#e6193859}.stat-pill.color-blue{color:#4d9fff;background:#0066e526;border-color:#0066e559}.stat-pill.color-green{color:#38df87;background:#00a85226;border-color:#00a85259}.stat-pill.color-yellow{color:#ffc038;background:#f5a60026;border-color:#f5a60059}.stat-pill.color-wild{color:#c084fc;background:#a855f726;border-color:#a855f759}.stat-pill.neutral{color:#cbd5e1}.controls-panel{background:#171625;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;gap:16px;margin-bottom:24px;padding:20px 24px;display:flex}.search-box{width:100%;position:relative}.search-icon{color:#64748b;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search-input{color:#fff;background:#0d0c15;border:1px solid #ffffff1f;border-radius:10px;outline:none;width:100%;padding:12px 40px 12px 42px;font-size:15px;transition:border-color .2s}.search-input:focus{border-color:#38bdf8}.clear-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.filter-group-wrap{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.filter-item{align-items:center;gap:10px;display:flex}.filter-label{color:#94a3b8;align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.button-group{background:#0d0c15;border:1px solid #ffffff14;border-radius:8px;gap:3px;padding:3px;display:inline-flex}.toggle-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:500;transition:all .18s}.toggle-btn:hover{color:#fff;background:#ffffff0d}.toggle-btn.active{color:#fff;background:#3b82f6;font-weight:600}.toggle-btn.btn-col-red.active{background:#e61938}.toggle-btn.btn-col-blue.active{background:#0066e5}.toggle-btn.btn-col-green.active{background:#00a852}.toggle-btn.btn-col-yellow.active{background:#f5a600}.toggle-btn.btn-col-wild.active{background:#7c3aed}.select-dropdown{color:#fff;cursor:pointer;background:#0d0c15;border:1px solid #ffffff1a;border-radius:8px;outline:none;padding:8px 14px;font-size:13px}.display-toggles{border-top:1px solid #ffffff0f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;display:flex}.size-selector{align-items:center;gap:10px;display:flex}.flip-toggle-btn{color:#fff;cursor:pointer;background:#252238;border:1px solid #ffffff24;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.flip-toggle-btn:hover{background:#322e4c}.flip-toggle-btn.active{background:#7c3aed;border-color:#a78bfa}.card-back-showcase{background:linear-gradient(135deg,#1c192e 0%,#12101e 100%);border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:32px;margin-bottom:28px;padding:24px;display:flex}@media (width<=768px){.card-back-showcase{text-align:center;flex-direction:column}}.showcase-card-wrapper{flex-shrink:0}.showcase-content{flex:1}.badge-tag{color:#ff5a79;text-transform:uppercase;background:#e6193826;border:1px solid #e619384d;border-radius:9999px;margin-bottom:8px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-block}.showcase-content h2{margin-bottom:8px;font-size:22px;font-weight:700}.showcase-content p{color:#a7a9be;max-width:720px;margin-bottom:16px;font-size:14px}.showcase-actions{gap:12px;display:flex}.action-btn{color:#fff;cursor:pointer;background:#252238;border:1px solid #ffffff1f;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.action-btn:hover{background:#373352}.action-btn.primary{background:#3b82f6;border-color:#60a5fa}.action-btn.primary:hover{background:#2563eb}.results-header{color:#94a3b8;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;font-size:14px;display:flex}.results-count strong{color:#fff}.results-hint{color:#64748b;font-size:13px}.cards-grid{justify-content:center;gap:24px;display:grid}.cards-grid.size-sm{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px}.cards-grid.size-md{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:20px}.cards-grid.size-lg{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:28px}.cards-grid.size-xl{grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:32px}.grid-item{flex-direction:column;align-items:center;gap:8px;display:flex}.card-caption{color:#94a3b8;text-align:center;flex-direction:column;align-items:center;font-size:11px;line-height:1.3;display:flex}.card-caption-name{color:#e2e8f0;font-weight:600}.card-caption-id{color:#64748b;font-family:monospace;font-size:10px}.empty-state{text-align:center;color:#94a3b8;padding:64px 24px}.empty-state p{margin-bottom:16px;font-size:16px}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000bf;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-dialog{background:#171625;border:1px solid #ffffff26;border-radius:20px;width:100%;max-width:680px;overflow:hidden;box-shadow:0 25px 50px -12px #000000b3}.modal-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.modal-header h3{font-size:18px;font-weight:700}.modal-close-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;font-size:26px;line-height:1}.modal-close-btn:hover{color:#fff}.modal-body{align-items:center;gap:32px;padding:28px 24px;display:flex}@media (width<=600px){.modal-body{flex-direction:column}}.modal-preview{flex-direction:column;align-items:center;gap:12px;display:flex}.modal-flip-hint{color:#64748b;font-size:11px}.modal-info{flex:1}.modal-info h4{color:#e2e8f0;margin-bottom:16px;font-size:15px;font-weight:700}.info-table{flex-direction:column;gap:8px;margin-bottom:24px;display:flex}.info-row{border-bottom:1px solid #ffffff0d;justify-content:space-between;padding:6px 0;font-size:13px;display:flex}.info-key{color:#94a3b8}.info-val{color:#fff;font-weight:500}.font-mono{font-family:monospace}.capitalize{text-transform:capitalize}.font-bold{font-weight:700}.modal-actions{gap:12px;display:flex}.top-nav{z-index:50;-webkit-backdrop-filter:blur(16px);background:#12111ef0;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:10px 24px;display:flex;position:sticky;top:0}.nav-center-wrap{flex:1;justify-content:flex-end;align-items:center;gap:12px;min-width:0;display:flex}.nav-theme-container{flex-shrink:0}.nav-brand{-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:10px;display:flex}.brand-logo-badge{background:linear-gradient(135deg,#38bdf833 0%,#0284c733 100%);border:1px solid #38bdf859;border-radius:9px;justify-content:center;align-items:center;width:34px;height:34px;padding:1px;display:flex;overflow:hidden;box-shadow:0 0 14px #38bdf833}.brand-logo-img{object-fit:cover;border-radius:7px;width:100%;height:100%;display:block}.brand-icon{color:#38bdf8}.brand-text{letter-spacing:-.01em;color:#fff;white-space:nowrap;font-size:16px;font-weight:800}.brand-title-full{display:inline}.brand-title-short{display:none}.brand-badge{color:#34d399;letter-spacing:.02em;white-space:nowrap;background:#10b98126;border:1px solid #10b98159;border-radius:9999px;align-items:center;gap:6px;padding:3px 9px;font-size:11px;font-weight:700;display:inline-flex}.brand-badge .live-dot{background:#34d399;border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse-live;box-shadow:0 0 8px #34d399}@keyframes pulse-live{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.nav-tabs-wrapper{-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;max-width:100%;display:flex;overflow-x:auto}.nav-tabs-wrapper::-webkit-scrollbar{display:none}.nav-tabs{white-space:nowrap;background:#0f0e19bf;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:4px;padding:4px;display:inline-flex}.nav-tab{color:#94a3b8;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:7px;padding:7px 14px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;white-space:nowrap!important}.nav-tab-icon{color:#64748b;flex-shrink:0;transition:color .2s}.tab-label-full{display:inline}.tab-label-short{display:none}.nav-tab:hover{color:#f8fafc;background:#ffffff0f}.nav-tab:hover .nav-tab-icon{color:#94a3b8}.nav-tab.active{color:#fff;background:linear-gradient(135deg,#2d2948 0%,#201d35 100%);border:1px solid #ffffff29;box-shadow:0 4px 12px #0006,inset 0 1px #ffffff1f}.nav-tab.active .nav-tab-icon{color:#38bdf8}@media (width<=960px){.top-nav{gap:12px;padding:8px 16px}.nav-center-wrap{gap:8px}.brand-title-full{display:none}.brand-title-short{display:inline}.tab-label-full{display:none}.tab-label-short{display:inline}.nav-tab{gap:5px;padding:6px 11px;font-size:12px}}@media (width<=640px){.top-nav .nav-theme-container{display:none}}@media (width<=580px){.top-nav{gap:8px;min-height:48px;padding:6px 10px}.brand-badge{display:none}.brand-logo-badge{border-radius:8px;width:28px;height:28px}.brand-text{font-size:13px}.nav-tabs-wrapper{flex:1;min-width:0}.nav-tabs{gap:2px;padding:2px}.nav-tab{gap:3px;padding:4px 7px;font-size:11px}.nav-tab-icon{width:12px;height:12px}}@media (width<=420px){.top-nav{gap:6px;min-height:44px;padding:4px 6px}.brand-text{display:none}.nav-tab{padding:4px 6px;font-size:10px}}.specs-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:24px;display:grid}.spec-card{background:#171625;border:1px solid #ffffff14;border-radius:16px;padding:24px}.spec-card h3{color:#f1f5f9;margin-bottom:16px;font-size:18px;font-weight:700}.spec-card ul{flex-direction:column;gap:12px;list-style:none;display:flex}.spec-card li{color:#94a3b8;align-items:center;gap:8px;font-size:14px;display:flex}.spec-card strong{color:#e2e8f0}.spec-card code{color:#38bdf8;background:#0d0c15;border-radius:4px;padding:2px 6px;font-size:12px}.spec-swatch{border:1px solid #ffffff4d;border-radius:4px;width:14px;height:14px;display:inline-block}.code-example-card{background:#171625;border:1px solid #ffffff14;border-radius:16px;max-width:900px;margin-top:24px;margin-left:auto;margin-right:auto;padding:32px}.code-example-card h3{color:#38bdf8;margin:24px 0 12px;font-size:16px;font-weight:700}.code-example-card h3:first-child{margin-top:0}.code-block{color:#e2e8f0;background:#0d0c15;border:1px solid #ffffff14;border-radius:10px;padding:16px 20px;font-family:JetBrains Mono,Fira Code,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;overflow-x:auto}@media (width<=768px){.gallery-container{padding:16px 12px 48px}.header-title{font-size:26px}.header-subtitle{margin-bottom:16px;font-size:14px}.controls-panel{gap:12px;padding:14px}.filter-group-wrap{flex-direction:column;align-items:stretch;gap:12px}.filter-item{flex-direction:column;align-items:flex-start;gap:6px;width:100%}.button-group{-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;display:flex;overflow-x:auto}.button-group::-webkit-scrollbar{display:none}.toggle-btn{text-align:center;white-space:nowrap;flex:1;padding:6px 8px;font-size:12px}.display-toggles{flex-direction:column;align-items:stretch;gap:12px}.size-selector{justify-content:space-between}.specs-grid{grid-template-columns:1fr;gap:14px}.spec-card{padding:20px}.code-example-card{padding:18px}}.brand-text-block{flex-direction:column;justify-content:center;line-height:1.2;display:flex}.brand-creator{color:#94a3b8;letter-spacing:.01em;font-size:11px;font-weight:500}.brand-creator strong{color:#38bdf8;font-weight:700}.nav-actions-wrap{flex-shrink:0;align-items:center;gap:8px;display:flex}.bgm-toggle-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#94a3b8;cursor:pointer;-webkit-user-select:none;user-select:none;background:#0f172aa6;border:1px solid #ffffff1f;border-radius:9999px;flex-shrink:0;align-items:center;gap:6px;padding:5px 11px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.bgm-toggle-btn:hover{color:#e2e8f0;border-color:#38bdf866;transform:translateY(-1px)}.bgm-toggle-btn.playing{color:#34d399;background:linear-gradient(135deg,#10b98126,#38bdf826);border-color:#10b98173;box-shadow:0 0 12px #10b98133}.bgm-toggle-btn.muted{opacity:.8}.bgm-icon.active{color:#34d399;animation:2s ease-in-out infinite pulse-music}@keyframes pulse-music{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.bgm-waves{align-items:flex-end;gap:2px;height:12px;display:inline-flex}.wave-bar{background:#34d399;border-radius:1px;width:2px}.bar-1{height:6px;animation:.8s ease-in-out infinite alternate wave-anim}.bar-2{height:12px;animation:.6s ease-in-out .2s infinite alternate wave-anim}.bar-3{height:8px;animation:.7s ease-in-out .4s infinite alternate wave-anim}@keyframes wave-anim{0%{height:3px}to{height:12px}}@media (width<=580px){.bgm-text{display:none}.bgm-toggle-btn{padding:5px 8px}.brand-creator{font-size:10px}}.app-footer{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0e1ad9;border-top:1px solid #ffffff14;width:100%;margin-top:auto;padding:16px 24px}.footer-content{color:#94a3b8;justify-content:space-between;align-items:center;gap:16px;max-width:1200px;margin:0 auto;font-size:13px;display:flex}.footer-author-box,.footer-links{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.footer-author strong{color:#38bdf8;font-weight:700}.footer-sep{opacity:.4}.footer-gh-link{color:#38bdf8;font-weight:600;text-decoration:none;transition:color .15s}.footer-gh-link:hover{color:#7dd3fc;text-decoration:underline}@media (width<=600px){.footer-content{text-align:center;flex-direction:column;gap:8px}.footer-author-box,.footer-links{justify-content:center}}