*,*:before,*:after{box-sizing:border-box}:root{--c-red: #ed1c24;--c-yellow: #ffcf00;--c-green: #3fa542;--c-blue: #0b6bcb;--c-dark: #16181d;--felt-1: #2668cf;--felt-2: #0c2258;--ink: #f6f4ec;--ink-dim: #b7c4e4;--panel: rgba(6, 19, 52, .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(2.6rem,12vw,4.2rem);font-weight:900;font-style:italic;letter-spacing:.01em;color:var(--c-yellow);text-shadow:.045em .045em 0 #7d0d12;background:var(--c-red);border:.09em solid #fbf7ee;border-radius:50%;padding:.42em .72em .5em;transform:rotate(-7deg);box-shadow:0 10px 26px #00000073,inset 0 -.12em #0000002e}.logo-sub{font-size:1.15rem;font-weight:800;font-style:italic;color:var(--c-yellow);text-shadow:1px 1px 0 rgba(0,0,0,.4);margin-top:-4px;letter-spacing:.04em}.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,#f4443c,#c8121a);border:2px solid rgba(255,207,0,.85);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}.segmented{display:grid;grid-template-columns:1fr;gap:10px}.seg-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px;min-height:58px;border-radius:12px;border:2px solid var(--line);background:#00000038;transition:border-color .15s ease,background .15s ease}.seg-btn small{color:var(--ink-dim);font-size:.72rem}.seg-btn.selected{border-color:var(--c-yellow);background:#ffcf001f}.seg-btn:disabled{cursor:default;opacity:.9}.seg-btn:disabled:not(.selected){opacity:.55}.rule-row.inert{opacity:.45}.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:calc(var(--card-w) * .055);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:var(--c-red)}.color-yellow .card-field{background:var(--c-yellow)}.color-green .card-field{background:var(--c-green)}.color-blue .card-field{background:var(--c-blue)}.color-wild .card-field{background:#17181c}.card-oval{position:absolute;left:50%;top:50%;width:128%;height:58%;transform:translate(-50%,-50%) rotate(-33deg);background:#fbf7ee;border-radius:50%;box-shadow:0 0 0 calc(var(--card-w) * .015) #0000001f}.color-wild .card-oval,.wheel-corner{background:conic-gradient(var(--c-red) 0 25%,var(--c-blue) 25% 50%,var(--c-yellow) 50% 75%,var(--c-green) 75% 100%);box-shadow:0 0 0 calc(var(--card-w) * .02) #fbf7ee}.card-value{position:relative;font-size:calc(var(--card-w) * .46);font-weight:900;font-style:italic;text-shadow:calc(var(--card-w) * .028) calc(var(--card-w) * .028) 0 rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}.color-red .card-value{color:var(--c-red)}.color-yellow .card-value{color:var(--c-yellow)}.color-green .card-value{color:var(--c-green)}.color-blue .card-value{color:var(--c-blue)}.color-wild .card-value{color:#fff;text-shadow:calc(var(--card-w) * .028) calc(var(--card-w) * .028) 0 rgba(0,0,0,.8)}.v-underline{border-bottom:.07em solid currentColor;line-height:1.05}.color-wild .glyph-center,.color-wild .glyph-corner{filter:drop-shadow(.04em .04em 0 rgba(0,0,0,.7))}.glyph-pair{display:inline-flex;align-items:center}.glyph-pair>:last-child{margin-left:calc(var(--card-w) * -.14)}.card-corner .glyph-pair>:last-child{margin-left:calc(var(--card-w) * -.05)}.glyph-stack{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.glyph-sub{font-size:calc(var(--card-w) * .2);margin-top:calc(var(--card-w) * -.04)}.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.wheel-corner{display:inline-block;width:calc(var(--card-w) * .19);height:calc(var(--card-w) * .11);border-radius:50%;transform:rotate(-33deg)}.card-back .card-field{background:#d7212a}.card-back .card-oval{background:#17181c;box-shadow:none}.card-sm .card-back-logo,.card-sm.card-back .card-oval{display:none}.card-back-logo{position:relative;font-size:calc(var(--card-w) * .3);font-weight:900;font-style:italic;color:var(--c-yellow);text-shadow:calc(var(--card-w) * .02) calc(var(--card-w) * .02) 0 #a3131a;transform:rotate(-14deg)}.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;animation:deal-in .3s ease backwards}.seat-fan .card:nth-child(2){animation-delay:.05s}.seat-fan .card:nth-child(3){animation-delay:.1s}.seat-fan .card:nth-child(4){animation-delay:.15s}.seat-fan .card:nth-child(5){animation-delay:.2s}.seat-fan .card:nth-child(6){animation-delay:.25s}.seat-fan .card:nth-child(7){animation-delay:.3s}.seat-fan .card:first-child{margin-left:0}.seat-count{margin-left:6px;font-weight:800;font-size:.95rem}.seat.eliminated{opacity:.45;filter:saturate(.4)}.out-badge{position:absolute;top:-8px;right:-6px;background:#23262d;border:1px solid var(--line);color:#ffb4ad;font-weight:900;font-size:.65rem;padding:3px 7px;border-radius:999px;animation:badge-pop .35s cubic-bezier(.3,1.6,.6,1)}.seat-count.danger{color:#ffb4ad;animation:soft-pulse 1s ease-in-out infinite}.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:#ed1c242e;box-shadow:0 0 24px 4px #ed1c2499}.glow-yellow{background:#ffcf002e;box-shadow:0 0 24px 4px #ffcf008c}.glow-green{background:#3fa54233;box-shadow:0 0 24px 4px #3fa542a6}.glow-blue{background:#0b6bcb33;box-shadow:0 0 24px 4px #0b6bcba6}.glow-wild{background:#ffffff24;box-shadow:0 0 24px 4px #ffffff73}.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}.arrow-spin{display:inline-flex;animation:spin-once .6s ease}@keyframes spin-once{0%{transform:rotate(-360deg)}}.direction-arrow{width:44px;height:44px;color:#ffffff8c}.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:#03081aa8;display:flex;align-items:center;justify-content:center;padding:20px;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}}.modal{background:#142a60;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,#f4443c,#c8121a)}.choice-yellow{background:linear-gradient(160deg,#ffd935,#e4b400);color:#4a3400;text-shadow:none}.choice-green{background:linear-gradient(160deg,#4cba50,#2f8c33)}.choice-blue{background:linear-gradient(160deg,#2a83e2,#0855a8)}.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;flex-wrap:wrap;gap:4px;padding:4px 0}.breakdown-cards .card{box-shadow:0 1px 4px #0006}.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))}}.fx-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;pointer-events:none;overflow:hidden}.fx-fly{position:fixed;transition:transform .45s cubic-bezier(.35,.7,.3,1);will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}.fx-splash{position:fixed;transform:translate(-50%,-50%);font-weight:900;font-style:italic;font-size:.95rem;padding:4px 14px;border-radius:999px;background:#080c1ae0;border:1px solid var(--line);color:var(--ink);white-space:nowrap;animation:splash-pop 1.1s cubic-bezier(.3,1.4,.5,1) forwards;box-shadow:0 6px 18px #00000073}.fx-splash.big{font-size:1.7rem;padding:10px 26px}@keyframes splash-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}26%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) translateY(-16px) scale(.95)}}.fx-splash.tone-yellow{color:var(--c-yellow);border-color:#ffcf008c}.fx-splash.tone-red{color:#ff9d95;border-color:#ed1c2499}.fx-splash.tone-green{color:#8ce296;border-color:#3fa54299}.fx-splash.tone-blue{color:#a5c9ff;border-color:#0b6bcba6}.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}}