*,*:before,*:after{box-sizing:border-box}:root{--c-red: #e4453a;--c-yellow: #f2c319;--c-green: #3fa65c;--c-blue: #2f7fd4;--c-dark: #16181d;--felt-1: #17543a;--felt-2: #0c2e1f;--ink: #f4f1e8;--ink-dim: #b9c4ba;--panel: rgba(9, 26, 18, .78);--line: rgba(255, 255, 255, .14);--card-w: 64px;--radius: 14px;font-size:16px}html,body,#root{height:100%;margin:0}body{font-family:Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(120% 90% at 50% 20%,var(--felt-1),var(--felt-2) 75%);background-attachment:fixed;color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0;touch-action:manipulation}input{font:inherit}h1,h2,h3,p{margin:0}.app{min-height:100%;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));gap:14px;width:100%;max-width:560px;margin:0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 22px;border-radius:999px;font-weight:700;letter-spacing:.02em;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;-webkit-user-select:none;user-select:none}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:linear-gradient(180deg,#f25c50,#cf3428);color:#fff;box-shadow:0 4px 14px #cf342873}.btn.secondary{background:#ffffff1f;border:1px solid var(--line);color:var(--ink)}.btn.ghost{background:none;color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px}.btn.big{width:100%;max-width:340px;font-size:1.1rem;min-height:52px}.btn.small{min-height:36px;padding:6px 12px;font-size:.9rem}.icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.2rem}.icon-btn.corner{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px}.field{display:flex;flex-direction:column;gap:6px;width:100%;max-width:340px}.field span{font-size:.85rem;color:var(--ink-dim)}.field input,.code-input{min-height:48px;border-radius:12px;border:1px solid var(--line);background:#00000047;color:var(--ink);padding:0 14px;outline:none}.field input:focus,.code-input:focus{border-color:var(--c-yellow)}.muted-text{color:var(--ink-dim)}.muted-text.small{font-size:.8rem}.pill{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:#ffffff24}.pill.off{background:#e4453a40;color:#ffb4ad;display:inline-flex;align-items:center;gap:4px}.spinner{width:42px;height:42px;margin-top:18vh;border-radius:50%;border:4px solid var(--line);border-top-color:var(--c-yellow);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pulse-text{animation:soft-pulse 1.6s ease-in-out infinite}@keyframes soft-pulse{50%{opacity:.55}}.toasts{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;width:min(92vw,380px)}.toast{padding:10px 16px;border-radius:12px;background:#14181eeb;border:1px solid var(--line);color:var(--ink);text-align:center;animation:toast-in .22s ease;box-shadow:0 6px 18px #0006}.toast.error{border-color:#e4453a99}@keyframes toast-in{0%{transform:translateY(-12px);opacity:0}}.reconnect-banner{position:fixed;top:0;left:0;right:0;z-index:70;text-align:center;padding:6px 12px;padding-top:max(6px,env(safe-area-inset-top));background:#a4471f;color:#fff;font-size:.85rem;font-weight:600;animation:soft-pulse 1.4s ease-in-out infinite}.home{justify-content:center;position:relative;text-align:center}.logo{font-size:clamp(3rem,14vw,4.6rem);font-weight:900;font-style:italic;letter-spacing:-.02em;text-shadow:0 4px 0 rgba(0,0,0,.35)}.logo-up{color:var(--c-yellow)}.tagline{color:var(--ink-dim);max-width:300px}.join-row{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px}.join-inputs{display:flex;gap:8px}.code-input{width:7.5ch;text-align:center;font-weight:800;font-size:1.2rem;letter-spacing:.18em;text-transform:uppercase;flex-shrink:0}.join-inputs .btn{flex:1}.invite-note{color:var(--c-yellow);font-weight:700}.lobby-head,.table-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}.room-code{font-size:clamp(2.6rem,13vw,4rem);font-weight:900;letter-spacing:.22em;padding:4px 10px 4px 20px;border:2px dashed var(--line);border-radius:var(--radius);background:#00000038}.lobby-players,.lobby-rules{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.lobby-players h2,.lobby-rules h2,.breakdown h2,.scoreboard h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);margin-bottom:10px}.lobby-players ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.lobby-players li{display:flex;align-items:center;gap:10px;min-height:44px}.lobby-players li.disconnected{opacity:.55}.avatar{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;background:linear-gradient(160deg,var(--c-blue),#164a80);color:#fff}.player-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kick{color:#ffb4ad;font-size:.95rem;min-width:34px;min-height:34px}.rule-row{display:flex;align-items:flex-start;gap:12px;padding:9px 0;cursor:pointer}.rule-row.readonly{cursor:default}.rule-row input{width:22px;height:22px;margin-top:2px;accent-color:var(--c-green);flex-shrink:0}.rule-text{display:flex;flex-direction:column;gap:2px}.rule-text small{color:var(--ink-dim)}.card{width:var(--card-w);aspect-ratio:5 / 7;border-radius:12%/8.5%;background:#fbf7ee;padding:5.5%;box-shadow:0 2px 6px #00000073;flex-shrink:0;-webkit-user-select:none;user-select:none}.card-sm{--card-w: 30px}.card-md{--card-w: 64px}.card-lg{--card-w: 92px}.card,.card *{pointer-events:none}.card-field{position:relative;width:100%;height:100%;border-radius:10%/7%;overflow:hidden;display:flex;align-items:center;justify-content:center}.color-red .card-field{background:linear-gradient(160deg,#f0655b,#c22e23)}.color-yellow .card-field{background:linear-gradient(160deg,#f8d23f,#dca909)}.color-green .card-field{background:linear-gradient(160deg,#52b96f,#2c8547)}.color-blue .card-field{background:linear-gradient(160deg,#4a94e0,#1f63ad)}.color-wild .card-field{background:linear-gradient(160deg,#2c2f36,#101216)}.card-swoosh{position:absolute;top:12%;right:-30%;bottom:12%;left:-30%;border-radius:50%;transform:rotate(24deg);border:3px solid rgba(255,255,255,.85);border-left-color:transparent;border-bottom-color:transparent;opacity:.9}.card-back .card-swoosh{border-color:#e4453ae6;border-left-color:transparent;border-bottom-color:transparent}.card-value{position:relative;font-size:calc(var(--card-w) * .42);font-weight:900;font-style:italic;color:#fff;text-shadow:calc(var(--card-w) * .03) calc(var(--card-w) * .03) 0 rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}.card-corner{position:absolute;font-size:calc(var(--card-w) * .16);font-weight:800;font-style:italic;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.4);line-height:1;display:flex}.card-corner.tl{top:6%;left:8%}.card-corner.br{bottom:6%;right:8%;transform:rotate(180deg)}.glyph-center{width:calc(var(--card-w) * .46);height:calc(var(--card-w) * .46)}.glyph-corner{width:calc(var(--card-w) * .17);height:calc(var(--card-w) * .17)}.color-wheel{display:inline-block;width:calc(var(--card-w) * .44);height:calc(var(--card-w) * .44);border-radius:50%;border:2px solid #fff;background:conic-gradient(var(--c-red) 0 25%,var(--c-yellow) 25% 50%,var(--c-green) 50% 75%,var(--c-blue) 75% 100%);transform:rotate(45deg)}.color-wheel.wheel-corner{width:calc(var(--card-w) * .15);height:calc(var(--card-w) * .15);border-width:1px}.wild4-center{position:relative;display:flex;align-items:center;justify-content:center}.wild4-label{position:absolute;font-size:calc(var(--card-w) * .2);font-style:italic;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.card-back .card-field{background:linear-gradient(160deg,#23304d,#10131f)}.card-back-logo{position:relative;font-size:calc(var(--card-w) * .24);font-weight:900;font-style:italic;color:var(--c-red);text-shadow:0 1px 0 rgba(255,255,255,.25);transform:rotate(-18deg)}.table{max-width:720px;gap:8px}.room-tag{font-size:.8rem;color:var(--ink-dim);letter-spacing:.08em}.opponents{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;width:100%}.seat{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;border-radius:var(--radius);border:2px solid transparent;min-width:84px;transition:border-color .2s ease,background .2s ease}.seat.active{border-color:var(--c-yellow);background:#f2c3191a;animation:seat-pulse 1.6s ease-in-out infinite}@keyframes seat-pulse{50%{box-shadow:0 0 18px #f2c31973}}.seat.offline{opacity:.5}.seat.catchable{border-color:var(--c-red);animation:seat-alarm .5s ease-in-out infinite}@keyframes seat-alarm{50%{box-shadow:0 0 16px #e4453ab3}}.seat-name{font-size:.8rem;font-weight:700;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat-fan{position:relative;display:flex;align-items:center;height:46px}.seat-fan .card{margin-left:-22px;box-shadow:0 1px 3px #00000080}.seat-fan .card:first-child{margin-left:0}.seat-count{margin-left:6px;font-weight:800;font-size:.95rem}.uno-badge{position:absolute;top:-8px;right:-6px;background:var(--c-red);color:#fff;font-weight:900;font-size:.7rem;font-style:italic;padding:3px 7px;border-radius:999px;box-shadow:0 2px 6px #0006;animation:badge-pop .35s cubic-bezier(.3,1.6,.6,1)}@keyframes badge-pop{0%{transform:scale(0)}}.center{display:flex;align-items:center;justify-content:center;gap:26px;padding:10px 0 4px}.draw-pile{position:relative;transition:transform .15s ease}.draw-pile:not(:disabled):hover{transform:translateY(-4px)}.draw-pile:disabled{cursor:default;filter:brightness(.85)}.pile-count{position:absolute;bottom:-8px;right:-8px;background:#000000bf;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:800;padding:2px 8px}.pile-penalty{position:absolute;top:-10px;right:-10px;background:var(--c-red);color:#fff;border-radius:999px;font-weight:900;padding:3px 8px;animation:badge-pop .3s ease}.discard-zone{position:relative;display:flex;align-items:center;gap:14px}.discard-glow{border-radius:18px;padding:7px;transition:box-shadow .25s ease,background .25s ease}.glow-red{background:#e4453a2e;box-shadow:0 0 24px 4px #e4453a8c}.glow-yellow{background:#f2c3192e;box-shadow:0 0 24px 4px #f2c3198c}.glow-green{background:#3fa65c33;box-shadow:0 0 24px 4px #3fa65c99}.glow-blue{background:#2f7fd433;box-shadow:0 0 24px 4px #2f7fd499}.card-slam{animation:card-slam .3s cubic-bezier(.2,1.4,.5,1)}@keyframes card-slam{0%{transform:translateY(-70px) rotate(-14deg) scale(1.15);opacity:.4}}.stack-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--c-red);color:#fff;font-weight:900;font-size:1rem;padding:4px 12px;border-radius:999px;box-shadow:0 2px 10px #00000080;animation:badge-pop .3s ease}.direction-arrow{width:44px;height:44px;color:#ffffff8c;transition:transform .5s cubic-bezier(.5,1.4,.4,1)}.direction-arrow.flipped{transform:scaleX(-1)}.status-line{min-height:1.4em;font-weight:700;color:var(--ink-dim);text-align:center}.status-line.my-turn{color:var(--c-yellow);animation:soft-pulse 1.4s ease-in-out infinite}.hand-area{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:10px}.hand{display:flex;overflow-x:auto;padding:20px 18px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.hand:after{content:"";flex:0 0 12px}.hand-card{flex:0 0 auto;margin-left:-20px;border-radius:12px;transition:transform .16s ease,filter .16s ease;animation:deal-in .35s ease backwards}.hand-card:first-child{margin-left:auto}.hand-card:last-child{margin-right:auto}@keyframes deal-in{0%{transform:translateY(60px) rotate(6deg);opacity:0}}.hand-card.playable{transform:translateY(-14px);z-index:1}.hand-card.playable .card{box-shadow:0 0 0 3px var(--c-yellow),0 8px 18px #00000080}.hand-card.playable:hover{transform:translateY(-22px) scale(1.04)}.hand-card.unplayable{filter:brightness(.55) saturate(.75);cursor:default}.action-bar{display:flex;justify-content:center;align-items:center;gap:12px;padding-bottom:4px}.uno-btn{background:linear-gradient(180deg,#666a72,#43464c);color:#fff;font-style:italic;font-weight:900;min-width:96px}.uno-btn.ready{background:linear-gradient(180deg,#f2c319,#d99f06);color:#4a3400;animation:uno-glow .9s ease-in-out infinite}@keyframes uno-glow{50%{box-shadow:0 0 22px #f2c319d9;transform:scale(1.05)}}.catch-btn{background:linear-gradient(180deg,#f25c50,#b02418);color:#fff;font-weight:900;animation:uno-glow .5s ease-in-out infinite}.event-feed{position:relative;width:100%;max-width:420px;min-height:66px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;pointer-events:none}.feed-item{font-size:.78rem;color:var(--ink);background:#00000059;padding:2px 10px;border-radius:999px;animation:feed-in .25s ease;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes feed-in{0%{transform:translateY(8px);opacity:0}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#050c08a8;display:flex;align-items:center;justify-content:center;padding:20px;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}}.modal{background:#12271c;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:16px;width:min(92vw,360px);box-shadow:0 18px 50px #0009;animation:modal-in .22s cubic-bezier(.3,1.4,.6,1)}@keyframes modal-in{0%{transform:scale(.85) translateY(14px);opacity:0}}.modal h3{font-size:1.1rem}.modal-actions{display:flex;gap:12px}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.color-choice{min-height:64px;border-radius:14px;font-weight:900;font-size:1.05rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .12s ease}.color-choice:active{transform:scale(.95)}.choice-red{background:linear-gradient(160deg,#f0655b,#c22e23)}.choice-yellow{background:linear-gradient(160deg,#f8d23f,#dca909)}.choice-green{background:linear-gradient(160deg,#52b96f,#2c8547)}.choice-blue{background:linear-gradient(160deg,#4a94e0,#1f63ad)}.swap-grid{display:flex;flex-direction:column;gap:10px;width:100%}.round-over{justify-content:center;text-align:center;position:relative;overflow:hidden}.winner-title{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:900}.winner-points{color:var(--c-yellow);font-weight:800;font-size:1.2rem}.breakdown,.scoreboard{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-align:left}.breakdown-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06)}.breakdown-row:first-of-type{border-top:none}.breakdown-name{font-weight:700;width:74px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breakdown-cards{display:flex;flex:1;overflow-x:auto;gap:0;padding:4px 0}.breakdown-cards .card{margin-left:-10px}.breakdown-cards .card:first-child{margin-left:0}.breakdown-points{font-weight:800;color:var(--c-yellow);flex-shrink:0}.scoreboard ol{list-style:none;margin:0;padding:0}.scoreboard li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06)}.scoreboard li:first-child{border-top:none}.scoreboard li.round-winner .player-name:after{content:" 🏆"}.rank{width:22px;height:22px;border-radius:50%;background:#ffffff1f;font-size:.75rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.score{font-weight:900;font-size:1.05rem}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.confetti span{position:absolute;top:-14px;border-radius:2px;animation:confetti-fall linear infinite}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(var(--spin, 720deg))}}.error-screen{justify-content:center}.error-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:360px}.error-card h1{font-size:1.4rem}.error-card p{color:var(--ink-dim)}@media(min-width:700px){:root{--card-w: 76px}.card-lg{--card-w: 104px}.hand{justify-content:center;flex-wrap:nowrap}}@media(max-height:620px){.card-lg{--card-w: 76px}.seat-fan{height:38px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}