:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f3e7;background:#0b1918;--gold:#e8cb83;--accent:#dfc68d;--red:#d74747;--yellow:#ffe033;--green:#218569;--blue:#347abb}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 30%,#23493e 0,#102925 48%,#091817 100%)}body:before{content:"";position:fixed;inset:12px;border:1px solid #e8cb8318;border-radius:24px;pointer-events:none}button,input{font:inherit}button{touch-action:manipulation;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button{border:0}button:disabled{cursor:default}main{max-width:820px;margin:auto;padding:24px 20px max(28px,env(safe-area-inset-bottom))}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.brand{font-size:29px;font-weight:950;font-style:italic;letter-spacing:-2px}.brand small{display:block;font-size:9px;font-weight:500;font-style:normal;letter-spacing:4px;color:#b5bda9;margin-top:3px}.icon{background:#ffffff08;color:#e6dfcb;border:1px solid #ffffff22;border-radius:50px;padding:10px 13px;font-size:12px}.eyebrow{letter-spacing:3px;font-size:10px;color:var(--gold);text-transform:uppercase}.lobby{text-align:center;max-width:450px;margin:8vh auto 0;animation:rise .7s both}.hero-cards{display:flex;justify-content:center;height:180px;align-items:center;margin-bottom:24px}.hero-cards .card{position:relative;margin:0 -20px;width:96px;height:145px;font-size:40px;transform:rotate(var(--angle));animation:float 4s ease-in-out infinite;animation-delay:var(--delay)}h1{font-size:38px;letter-spacing:-1px;margin:12px 0}p{color:#b5c2b7;font-size:14px;line-height:1.7}.join-form{display:flex;gap:9px;margin:26px 0 12px}input{min-width:0;width:100%;background:#0a1c1999;border:1px solid #cabd9144;border-radius:13px;color:#fff;padding:15px}.primary{background:linear-gradient(135deg,#f4dfa5,#d9b86a);color:#273126;font-weight:750;padding:14px 22px;border-radius:13px;white-space:nowrap;box-shadow:0 5px 20px #0002}.primary:active,.action:active{transform:scale(.96)}.muted{font-size:11px;color:#8ea398}.hidden{display:none!important}.players{display:flex;align-items:center;justify-content:space-between;gap:10px}.player{display:flex;align-items:center;gap:10px}.avatar{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:#ffffff0c;border:1px solid #ffffff25;color:var(--gold);font-weight:700}.player b{font-size:14px}.player small{display:block;color:#a5b7a8;font-size:11px;margin-top:4px}.pill{font-size:10px;letter-spacing:1px;border:1px solid #dbc48255;background:#d4bd7b0d;border-radius:50px;padding:7px 10px;color:#e8cb83}.opponent-cards{display:flex;justify-content:center;height:56px;margin:24px 0 6px}.mini{height:49px;width:33px;border-radius:5px;background:repeating-linear-gradient(45deg,#263e37,#263e37 3px,#2b443b 3px,#2b443b 5px);border:2px solid #e7ddc5;box-shadow:0 3px 6px #0004;margin-left:-12px;transform:rotate(var(--r))}.mini:first-child{margin-left:0}.table{position:relative;border-radius:50%;border:1px solid #d5c28920;min-height:248px;display:flex;justify-content:center;align-items:center;gap:38px;background:radial-gradient(ellipse,#ffffff04,transparent 70%);margin:0 12px}.table:before{content:"";position:absolute;inset:9px;border:1px solid #d5c2890c;border-radius:50%;pointer-events:none}.pile{text-align:center;position:relative}.pile-label{font-size:9px;letter-spacing:2px;color:#8ea598;margin-top:15px}.card{--ink:var(--red);position:relative;isolation:isolate;flex-shrink:0;width:76px;height:114px;border:4px solid #f2eddc;border-radius:12px;background:var(--ink);box-shadow:0 7px 10px #0005,inset 0 0 0 1px #0002;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:29px;font-weight:900;text-shadow:0 2px 2px #0003;padding:0;transition:transform .2s,filter .2s,box-shadow .2s}.card:before{content:"";position:absolute;inset:13px 5px;border-radius:50%;background:#fff;transform:skew(-19deg);opacity:.93;z-index:-1}.card .value{color:var(--ink);font-style:italic;letter-spacing:-2px}.card:after{content:attr(data-label);position:absolute;top:3px;left:4px;font-size:11px;font-style:italic;text-shadow:none}.card.red{--ink:var(--red)}.card.yellow{--ink:var(--yellow)}.card.green{--ink:var(--green)}.card.blue{--ink:var(--blue)}.card.black{--ink:#242b30;background:conic-gradient(from 20deg,#bd4b4b,#c49b32,#25846b,#347abb,#bd4b4b)}.card.back{--ink:#223b33;background:repeating-linear-gradient(45deg,#243f36,#243f36 4px,#29473b 4px,#29473b 8px)}.card.back:before{background:#132b23;border:1px solid #e4cc8e66;opacity:1}.card.back .value{color:var(--gold);font-size:22px;letter-spacing:-2px}.deck-stack{transform:rotate(-8deg);box-shadow:3px 3px 0 #c6c5b4,5px 5px 0 #304b3e,7px 7px 0 #bbbba8,10px 14px 20px #0005}.top-card{transform:rotate(8deg)}.color-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--active,#c8bb96);box-shadow:0 0 14px var(--active);margin-right:7px}.status{text-align:center;min-height:76px;padding:7px 0 13px}.status strong{font-size:17px;color:#e8d59f}.status p{font-size:12px;margin:7px 0;min-height:20px}.my-turn .status strong{animation:breathe 2s infinite}.hand-panel{border-top:1px solid #ffffff15;padding-top:19px}.hand-head{display:flex;justify-content:space-between;align-items:center}.hand-head b{font-size:13px}.hand-head span{font-size:11px;color:#9daf9f;margin-left:6px}.actions{display:flex;gap:7px}.action{border:1px solid #ffffff2a;background:#ffffff0b;color:#efe9d7;padding:10px 13px;border-radius:10px;font-size:12px;font-weight:600}.action:disabled{opacity:.25}.hand{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 6px;padding:25px 0 12px;min-height:154px}.hand .card{width:65px;height:98px;font-size:25px;animation:deal .4s both;animation-delay:var(--delay,0ms)}.hand .card:disabled{filter:saturate(.45) brightness(.7);box-shadow:0 4px 8px #0003}.hand .card:not(:disabled){box-shadow:0 0 0 1px #e8cb8366,0 7px 15px #0006}.hand .card:not(:disabled):hover{transform:translateY(-10px) rotate(-3deg)}.hand .card:active{transform:translateY(-16px) scale(1.04)}.start-wrap{text-align:center;margin:12px}.overlay{position:fixed;inset:0;background:#061512cc;backdrop-filter:blur(10px);z-index:20;display:grid;place-items:center;padding:24px}.modal{width:min(360px,100%);border:1px solid #d7bf7c44;border-radius:24px;padding:28px;background:#18352d;box-shadow:0 24px 90px #0008;text-align:center;animation:rise .25s both}.modal h2{font-size:23px;margin:12px 0}.colors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.colors button{border:2px solid #ffffff44;border-radius:14px;height:64px;color:white;font-weight:700;box-shadow:inset 0 0 25px #ffffff12}.footer{text-align:center;color:#789083;font-size:10px;line-height:1.8;margin-top:17px}.toast{position:fixed;top:22px;left:50%;transform:translateX(-50%);background:#eddfb6;color:#213b2e;border-radius:30px;padding:12px 22px;font-size:13px;font-weight:700;z-index:30;box-shadow:0 9px 40px #0005;white-space:nowrap;animation:rise .25s both}.confetti{position:fixed;top:-20px;width:8px;height:13px;pointer-events:none;z-index:40;animation:fall var(--duration) linear forwards}.flying{position:fixed;z-index:15;pointer-events:none;margin:0!important;transition:none!important}.pop{animation:land .45s ease-out}.shake{animation:shake .4s}.uno{color:#ffda8b!important}.connection{width:6px;height:6px;border-radius:50%;background:#7fbc8b;display:inline-block;margin-right:5px}@keyframes rise{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}@keyframes float{50%{translate:0 -10px}}@keyframes deal{from{opacity:0;transform:translateY(25px) rotate(-8deg)}to{opacity:1;transform:translateY(0)}}@keyframes land{0%{transform:rotate(-14deg) scale(1.3)}65%{transform:rotate(10deg) scale(.97)}100%{transform:rotate(8deg)}}@keyframes breathe{50%{text-shadow:0 0 22px #dec78d88}}@keyframes fall{to{transform:translateY(105vh) rotate(640deg)}}@keyframes shake{25%{translate:-5px}75%{translate:5px}}@media(max-width:420px){main{padding:20px 16px}.header{margin-bottom:18px}.table{min-height:220px;margin:0}.card{width:72px;height:108px}.hand .card{width:58px;height:88px;font-size:23px}.hand{gap:9px 5px}.action{padding:10px}.lobby{margin-top:5vh}h1{font-size:34px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.audio-wrap{position:relative}.audio-settings{position:absolute;right:0;top:48px;z-index:25;width:min(290px,calc(100vw - 40px));padding:18px;background:#16342e;border:1px solid #dfc68d44;border-radius:17px;box-shadow:0 15px 50px #0008}.audio-settings h2{font-size:14px;margin:0 0 14px}.audio-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin:14px 0;color:#e3e3cf}.audio-settings input[type=range]{width:135px;padding:0;accent-color:#dfc68d}.audio-settings select{max-width:155px;background:#0c2520;color:#f0e7cf;padding:8px;border:1px solid #dfc68d33;border-radius:8px;font:inherit}.audio-toggle{border:1px solid #dfc68d55;background:#ffffff09;color:#e8cb83;border-radius:8px;padding:7px 13px;min-width:50px}.audio-settings .muted{line-height:1.7;margin-bottom:0}
.seat-list{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.seat{flex:1 1 46px;max-width:140px;min-width:48px;text-align:center;padding:10px 3px;border-radius:15px;border:1px solid transparent;transition:background .25s,border-color .25s}.seat .avatar{margin:0 auto 7px;width:36px;height:36px}.seat b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;margin:auto}.seat small{display:block;font-size:10px;color:#90a99a;margin-top:4px}.seat.active{background:#dfc68d0d;border-color:#dfc68d66}.seat.active .avatar{box-shadow:0 0 0 4px #dfc68d0b;animation:breathe 1.8s infinite}.seat.bot .avatar{border-style:dashed}.seat.is-me .avatar{color:#c8e4ce}.seat.won .avatar{color:#ffe0a0;box-shadow:0 0 22px #dec78d77}.seat-count-pop{animation:countPop .35s}.table-meta{text-align:center;font-size:10px;color:#b2c0ae;letter-spacing:1px;margin:13px 0 4px}.room-setup{background:#ffffff05;border:1px solid #dfc68d22;border-radius:16px;padding:15px;margin:17px 0}.room-setup b{font-size:13px}.room-setup p{font-size:11px;margin:6px 0 12px}.bot-options{display:flex;gap:7px}.bot-options button{flex:1;border:1px solid #ffffff20;background:transparent;color:#b9c6b9;font-size:12px;padding:9px 4px;border-radius:9px}.bot-options button[aria-pressed=true]{color:#192c22;background:#ddc78e;border-color:#ddc78e}.table{transition:background .5s;min-height:220px}.table-flash{animation:tablePulse .65s}.move-banner{position:fixed;left:50%;top:40%;translate:-50% -50%;color:#f5dfab;font-size:34px;font-weight:900;letter-spacing:1px;pointer-events:none;z-index:16;text-shadow:0 8px 30px #000a;white-space:nowrap;animation:moveBanner .9s both}.motion-off *, .motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}.footer{font-size:9px}.status{min-height:76px}.hand{padding-top:22px}@keyframes countPop{50%{transform:scale(1.14)}}@keyframes tablePulse{40%{box-shadow:0 0 38px #dfc68d22}}@keyframes moveBanner{0%{opacity:0;transform:scale(.7) rotate(-4deg)}25%,70%{opacity:1;transform:scale(1) rotate(-4deg)}100%{opacity:0;transform:scale(1.12) translateY(-18px)}}
/* Preserve card colors when unavailable; shape, text and checkmarks carry meaning. */
.card.yellow .value{color:#493700;text-shadow:none}.card.yellow:after{color:#493700;font-weight:900}.card.yellow{border-color:#fff3a6}.card.yellow:before{opacity:1}.color-tag{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);background:#fff;color:#1a2823;border:1px solid #23382d55;border-radius:4px;padding:1px 4px;font:800 10px/1.3 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;text-shadow:none;white-space:nowrap}.hand .card:disabled{filter:none;border-color:#b8c1b9;box-shadow:0 3px 6px #0003}.hand .card.yellow:disabled{border-color:#e1cb60}.hand .card:not(:disabled){border-color:#fff;box-shadow:0 0 0 2px #f1d591,0 7px 15px #0006}.playable-mark{position:absolute;right:2px;top:2px;display:grid;place-items:center;background:#fff;color:#142c21;width:14px;height:14px;border-radius:50%;font:900 10px/1 sans-serif;text-shadow:none}.colors button[data-color=yellow]{color:#332800;border-color:#fff4b0}.colors button{font-size:17px}#activeColor{font-size:12px;color:#f0ead8;letter-spacing:1px}.hero-cards .yellow .value{font-size:34px}.footer{color:#a0b2a5}
.setting-line{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #ffffff12;padding-top:14px;margin-top:16px}.setting-line p{margin:5px 0 0}.rule-note{font-size:10px!important;color:#9db0a0!important;line-height:1.6}.seat-editor{display:grid;gap:7px;margin-top:13px}.seat-editor-row{display:flex;align-items:center;gap:9px;font-size:12px;padding:7px 0}.seat-index{color:var(--gold);width:17px}.seat-editor-row .seat-person{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat-editor-row button{padding:7px 12px;border-radius:7px;background:#ffffff0a;border:1px solid #ffffff22;color:#f1e5c4}.seat-editor-row button:disabled{opacity:.25}.penalty-status{color:#ffe033!important}
body.my-turn:before{border:2px solid #f5d77d;box-shadow:inset 0 0 35px #e8cb8315}.hand-panel{border-radius:16px;transition:background .25s,border-color .25s;padding:15px 10px 0;border:2px solid transparent;border-top:1px solid #ffffff15}.my-turn .hand-panel{border:2px solid #f5d77d;background:#eed38e0d;box-shadow:0 0 25px #e8cb8312}.turn-badge{display:inline-block;background:#ffe7a6;color:#203228;border:1px solid #fff1c7;border-radius:30px;padding:8px 20px;font-size:20px;font-weight:850;margin:0 0 11px;box-shadow:0 4px 20px #0003}.my-turn .seat.is-me{border:2px solid #ffe7a6;background:#f5d77d16}.my-turn .seat.is-me .avatar{background:#f5d77d;color:#1d382a}.my-turn #draw:enabled{background:#f1d58c;color:#183126;border-color:#fff1c7;font-weight:800}.my-turn #prompt{display:block;font-size:17px}.status{padding-top:10px}.my-turn .status{min-height:108px}
.rule-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:0 0 14px}.rule-actions .action{padding:12px 16px}.rule-actions #unoButton{background:#e8cb83;color:#1f3228}.rule-actions #catchUno{color:#ffe033;border-color:#ffe03388}.rules-detail{margin:14px 0;border:1px solid #dfc68d22;border-radius:13px;padding:12px 14px;color:#c5d3c6;font-size:12px}.rules-detail summary{cursor:pointer;color:#e1d7b9;font-weight:650}.rules-detail p{font-size:11px;line-height:1.8;margin:10px 0}.score-row{display:flex;justify-content:space-between;gap:12px;margin:11px 0}.score-row b{color:#e8cb83;font-variant-numeric:tabular-nums}.opening-colors{max-width:340px;margin:0 auto 12px;text-align:center}.opening-colors .colors{grid-template-columns:repeat(4,1fr);margin:10px 0}.opening-colors button{height:50px;font-size:14px}.wild-warning{color:#ffe033;font-weight:650;font-size:12px}.drawn-card{outline:3px dashed #fff;outline-offset:4px}#challengeEvidence .card{width:48px;height:74px;font-size:21px}#challengeEvidence{gap:9px;padding:15px 0 4px}#challengeEvidence .color-tag{font-size:9px}.rule-actions .action:disabled{opacity:.55}
.uno-control{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px;border:1px solid #dfc68d40;border-radius:12px;background:#081d1744}.uno-control #unoButton{flex-shrink:0;min-width:98px;background:#e8cb83;color:#203228;font-weight:850;opacity:1;min-height:42px}.uno-control #unoButton:disabled{background:#e8cb8318;border-color:#dfc68d44;color:#dfd4b7}.uno-control #unoHint{color:#c3d0c1;font-size:11px;line-height:1.7;flex:1;min-width:0}.uno-control #unoButton.uno-urgent{background:#ffe49b;box-shadow:0 0 0 2px #ffe49b44}.hand{padding-top:19px}
.chosen-card{margin:16px auto}.uno-choice{display:flex;gap:12px;align-items:center;text-align:left;margin:18px 0;padding:14px;background:#e8cb8312;border:1px solid #e8cb8355;border-radius:12px;cursor:pointer}.uno-choice input{width:23px;height:23px;flex-shrink:0;margin:0;padding:0;accent-color:#e8cb83}.uno-choice b{font-size:16px;color:#ffe49b}.uno-choice small{display:block;font-size:11px;color:#b5cbb7;margin-top:5px}#confirmPlay{display:block;width:100%;margin:16px 0 13px}#colorOverlay .modal{max-height:92dvh;overflow:auto}#colorOverlay .colors{margin:16px 0}.uno-control #unoButton{max-width:140px;font-size:12px}
.unified-header{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:18px 24px;background:#FBFCF8;color:#242821;font-size:12px}.unified-header a{color:#536B26;text-decoration:none}.uno-step-guide{border:1px solid #91ab7855;border-radius:14px;padding:14px 16px;background:#ffffff09;margin:8px 0 18px;color:#dce8cf}.uno-step-guide b{font-size:15px}.uno-step-guide p{font-size:12px;line-height:1.7;color:#b6c7af;margin:7px 0 0}
.uno-invite{display:grid;justify-items:center;gap:8px;margin:14px auto;padding:16px;max-width:440px;border:1px dashed #ffffff33;border-radius:16px;text-align:center}.uno-invite span{font-size:11px;letter-spacing:2px;opacity:.75}.uno-invite b{letter-spacing:3px}.uno-invite p{margin:0;font-size:12px;word-break:break-all;opacity:.85;user-select:all}