@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100vh}body{display:flex;align-items:center;justify-content:center;background:#0a1628;font-family:Fredoka,Segoe UI,system-ui,sans-serif}.screen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:1.5rem;position:relative;overflow:hidden}.screen-uno{background:radial-gradient(ellipse 120% 80% at 50% 20%,#1a3a5c,#0a1628 45%,#050d18);justify-content:flex-start;padding-top:3rem;padding-bottom:1.5rem}.uno-bg-cards{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:linear-gradient(115deg,rgba(224,58,45,.12) 0%,transparent 40%),linear-gradient(245deg,rgba(14,99,184,.12) 0%,transparent 35%),linear-gradient(335deg,rgba(28,156,76,.1) 0%,transparent 38%),linear-gradient(25deg,rgba(236,186,28,.1) 0%,transparent 40%)}.uno-bg-cards:before,.uno-bg-cards:after{content:"";position:absolute;width:120px;height:170px;border-radius:14px;border:4px solid rgba(255,255,255,.15);box-shadow:0 20px 50px #0006}.uno-bg-cards:before{left:-2rem;top:18%;background:linear-gradient(145deg,#e03a2d,#9a2018);transform:rotate(-18deg);opacity:.35}.uno-bg-cards:after{right:-1.5rem;bottom:12%;background:linear-gradient(145deg,#0e63b8,#063666);transform:rotate(22deg);opacity:.35}.top-bar{position:absolute;top:0;right:0;left:0;display:flex;justify-content:flex-end;align-items:center;padding:.75rem 1rem;z-index:10}.lang-wrap{display:flex;align-items:center;gap:.35rem;background:#00000059;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.25rem .6rem .25rem .5rem;cursor:pointer}.lang-icon{font-size:1rem;opacity:.9}.lang-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:#fff;border:none;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;max-width:11rem;padding:.2rem .25rem}.lang-select option{color:#111}.home-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:0 1.25rem}.home-uno .home-center{margin-top:auto;margin-bottom:auto}.uno-badge{font-size:.75rem;font-weight:700;letter-spacing:.35em;color:#f5c542;text-shadow:0 0 20px rgba(245,197,66,.5)}.uno-logo{font-size:clamp(3rem,12vw,5rem);font-weight:700;line-height:1;background:linear-gradient(180deg,#fff,#f5c542 45%,#e03a2d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))}.uno-logo.small{font-size:clamp(2rem,8vw,3rem)}.uno-tagline{color:#ffffffbf;font-size:1.05rem;max-width:22rem}.home-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem;width:min(100%,280px)}.btn-play{padding:.95rem 2rem;font-size:1.25rem;font-weight:700;color:#0a1628;background:#fff;border:none;border-radius:14px;cursor:pointer;font-family:inherit;box-shadow:0 8px #b8c4d4,0 14px 32px #00000059;transition:transform .08s ease,box-shadow .08s ease}.btn-play:active{transform:translateY(4px);box-shadow:0 4px #b8c4d4,0 8px 20px #0000004d}.btn-play:hover{filter:brightness(1.05)}.btn-play.btn-yellow{background:linear-gradient(180deg,#ffe066,#f5c542);color:#3d2e00;box-shadow:0 8px #c9a02e,0 14px 32px #00000059}.btn-play.btn-yellow:active{box-shadow:0 4px #c9a02e,0 8px 20px #0000004d}.btn-secondary{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;color:#fff;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:12px;cursor:pointer;font-family:inherit}.btn-secondary:hover{background:#ffffff24}.auth-text{color:#ffffffe0;font-size:1.05rem;margin:0 0 .5rem}.vs-container{display:flex;flex-direction:column;align-items:center;gap:1.25rem;position:relative;z-index:1;width:min(100%,520px);padding:0 1rem}.vs-players{display:flex;align-items:center;justify-content:center;gap:2rem}.vs-player{display:flex;flex-direction:column;align-items:center;gap:.5rem}.vs-avatar{width:88px;height:88px;border-radius:50%;background:#00000059;border:3px solid rgba(255,255,255,.35);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff}.chip-letter{font-weight:700}.vs-avatar img{width:100%;height:100%;object-fit:cover}.vs-name{color:#fff;font-weight:600;font-size:.95rem}.vs-label{color:#ffffff8c;font-size:.85rem}.vs-vs{color:#f5c542;font-size:1.75rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.4)}.vs-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.lobby-list{display:flex;flex-direction:column;gap:.85rem;margin-top:.5rem;width:100%}.lobby-card{padding:.85rem 1rem;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#00000059;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.lobby-main{display:flex;align-items:center;gap:1rem;flex:1;min-width:0}.lobby-vs{display:flex;align-items:center;gap:1rem}.lobby-title{color:#fff;font-weight:700;font-size:.95rem}.lobby-subtitle{color:#ffffff8c;font-size:.82rem}.lobby-actions{display:flex;gap:.5rem}.game-shell{position:relative;z-index:1;width:min(100%,480px);display:flex;flex-direction:column;align-items:center;gap:1rem;padding:0 .75rem 1rem;margin-top:2rem}.game-status{color:#fff;font-size:1.15rem;font-weight:600;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.35)}.opponent-bar{width:100%;display:flex;flex-direction:column;gap:.5rem;align-items:center}.player-chip{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:600;font-size:.9rem}.player-chip img{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.3);object-fit:cover}.chip-count{color:#ffffff8c;font-size:.8rem;margin-left:.25rem}.opponent-hand{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;min-height:2.5rem}.more-cards{align-self:center;color:#ffffff80;font-size:.85rem}.table-area{display:flex;gap:2rem;align-items:flex-end;justify-content:center;margin:.5rem 0}.pile{display:flex;flex-direction:column;align-items:center;gap:.35rem}.pile-deck{position:relative}.pile-deck--draw-turn .deck-draw-card{animation:deck-pulse 1.25s ease-in-out infinite;cursor:pointer}@keyframes deck-pulse{0%,to{transform:rotate(-12deg) scale(1);filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}50%{transform:rotate(-12deg) scale(1.06);filter:drop-shadow(0 12px 22px rgba(255,205,0,.35))}}.deck-draw-hint{color:#ffcd00;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));pointer-events:none;line-height:0;margin:-.15rem 0 .1rem}.deck-draw-arrow{width:36px;height:42px;display:block;margin:0 auto;animation:deck-arrow-nudge .9s ease-in-out infinite}@keyframes deck-arrow-nudge{0%,to{transform:translateY(0);opacity:1}50%{transform:translateY(5px);opacity:.9}}.deck-draw-hitbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;border-radius:14px}.deck-draw-hitbox:focus-visible{outline:2px solid #ffcd00;outline-offset:4px}.deck-draw-hitbox .uno-deck-icon{pointer-events:none}.pile-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffffff73}.pile-meta{font-size:.8rem;color:#ffffff80}.discard-stack{position:relative;display:flex;align-items:center;justify-content:center}.color-hint{position:absolute;bottom:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 12px #0006}.color-hint.c-red{background:#e4002b}.color-hint.c-blue{background:#0956bf}.color-hint.c-green{background:#1da941}.color-hint.c-yellow{background:#ffcd00}.uno-card{--uno-bg: #333;--uno-ink: #fff;position:relative;width:56px;height:80px;border-radius:11px;flex-shrink:0;box-shadow:0 4px #00000040,0 8px 20px #00000073;border:3px solid #f5f5f0;overflow:hidden;background:var(--uno-bg)}.uno-card-face{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px}.uno-corner{position:absolute;z-index:2;font-weight:800;line-height:1;padding:2px 4px;border-radius:4px;background:#fff;color:var(--uno-ink);font-size:.55rem;box-shadow:0 1px 2px #0003}.uno-corner--tl{top:4px;left:4px}.uno-corner--br{bottom:4px;right:4px;transform:rotate(180deg)}.uno-center{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.uno-oval{width:78%;height:52%;min-height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px #00000014;color:var(--uno-ink)}.uno-oval--draw2{width:88%;height:58%;min-height:40px}.uno-oval--tilted{transform:rotate(-38deg);overflow:visible}.uno-card--tilted-symbol,.uno-card--tilted-symbol .uno-card-face{overflow:visible}.uno-corner--icon{display:flex;align-items:center;justify-content:center;padding:1px 2px;min-width:1.1rem;min-height:1rem}.uno-corner-svg{width:13px;height:13px;display:block}.uno-card--large .uno-corner-svg{width:18px;height:18px}.uno-card--hand .uno-corner-svg{width:11px;height:11px}.uno-sym-svg.uno-sym-skip,.uno-sym-svg.uno-sym-reverse{overflow:visible}.uno-num{font-weight:800;font-size:1.35rem;line-height:1;color:var(--uno-ink)}.uno-sym-svg{width:70%;height:70%;max-width:42px;max-height:42px;display:block}.uno-card--large .uno-sym-svg{max-width:64px;max-height:64px}.uno-sym-draw2{width:92%;height:92%;max-width:none;max-height:none}.uno-card-face--wild{background:#0d0d0d;justify-content:center;gap:2px}.uno-wild-emblem{width:58%;max-width:52px;margin-top:2px}.uno-sym-wild-logo{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.uno-wild-word{font-size:.45rem;font-weight:800;letter-spacing:.35em;color:#fff;text-indent:.35em}.uno-wild-plus4{font-size:.95rem;font-weight:800;color:#e4002b;text-shadow:0 0 1px #fff;margin-top:1px}.uno-card--large .uno-wild-word{font-size:.62rem}.uno-card--large .uno-wild-plus4{font-size:1.35rem}.uno-card--large{width:88px;height:126px;border-radius:14px}.uno-card--large .uno-num{font-size:2.1rem}.uno-card--large .uno-corner{font-size:.72rem;padding:3px 5px}.uno-card--hand{width:52px;height:76px;border-radius:10px}.uno-card--hand .uno-num{font-size:1.15rem}.uno-card--hand .uno-corner{font-size:.5rem;padding:1px 3px}.uno-card--hand .uno-wild-word{font-size:.38rem}.uno-card--hand .uno-wild-plus4{font-size:.78rem}.uno-card--back{background:radial-gradient(ellipse 80% 70% at 50% 45%,#1a1a1a,#000 75%),repeating-conic-gradient(from 0deg at 50% 50%,#e4002b,#e4002b 12deg,#ffcd00 12deg,#ffcd00 24deg);border-color:#fff;display:flex;align-items:center;justify-content:center}.uno-card--back:before{content:"";position:absolute;top:10%;right:10%;bottom:10%;left:10%;border-radius:8px;border:2px solid rgba(255,255,255,.25);pointer-events:none}.uno-deck-icon{position:relative;z-index:1;transform:rotate(-12deg);color:#ffcd00;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-shadow:1px 1px 0 #e4002b,-1px -1px 0 #b01020}.uno-card--large .uno-deck-icon{font-size:1rem}.uno-card-slot{width:88px;height:126px;border-radius:14px;border:3px dashed rgba(255,255,255,.2);background:#0003}.uno-card.c-red{--uno-bg: #e4002b;--uno-ink: #e4002b}.uno-card.c-blue{--uno-bg: #0956bf;--uno-ink: #0956bf}.uno-card.c-green{--uno-bg: #1da941;--uno-ink: #1da941}.uno-card.c-yellow{--uno-bg: #ffcd00;--uno-ink: #b8860b}.uno-card.c-wild{--uno-bg: #0d0d0d;--uno-ink: #fff;border-color:#f0f0e8}.my-hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%;min-height:92px;padding:.5rem 0}.hand-btn{background:none;border:none;padding:0;cursor:default;border-radius:12px;transition:transform .12s ease}.hand-btn.can-play{cursor:pointer}.hand-btn.can-play:hover:not(:disabled){transform:translateY(-10px);filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}.hand-btn:disabled{opacity:.55}.game-actions{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:.5rem}.btn-back,.btn-reset{padding:.55rem 1.35rem;font-size:.95rem;font-weight:600;color:#fff;background:transparent;border:2px solid rgba(255,255,255,.35);border-radius:10px;cursor:pointer;font-family:inherit}.btn-back:hover,.btn-reset:hover{background:#ffffff14}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal.hidden{display:none}.modal-panel{background:linear-gradient(180deg,#1a3352,#0a1628);border:2px solid rgba(255,255,255,.2);border-radius:18px;padding:1.5rem 1.75rem;text-align:center;color:#fff;font-weight:600;box-shadow:0 24px 60px #00000080}.color-choices{display:flex;gap:1rem;margin-top:1.25rem;justify-content:center}.color-choice{width:52px;height:52px;border-radius:50%;border:4px solid rgba(255,255,255,.5);cursor:pointer;transition:transform .1s ease}.color-choice:hover{transform:scale(1.08)}.dot-red{background:#e03a2d}.dot-blue{background:#0e63b8}.dot-green{background:#1c9c4c}.dot-yellow{background:#f5c542}.lobby-screen .vs-container{margin-top:2rem}.home-loading .home-center{margin-top:auto;margin-bottom:auto}