:root{color-scheme:dark;font-family:system-ui,sans-serif;--bg:#080f20;--panel:#14233e;--ink:#f1f5ff;--muted:#a8bad3;--accent:#ff8a39;--table:#102b3d;--shine:#59dce7;--pattern:radial-gradient(circle at 20% 20%,#3984b51a 0,transparent 50%)}*{box-sizing:border-box}body{margin:0;background:var(--pattern),var(--bg);color:var(--ink);line-height:1.5}body[data-theme=monsters]{--accent:#ffd75f;--table:#163a50;--pattern:radial-gradient(circle at 80% 20%,#ffcf6630,transparent 40%)}body[data-theme=warriors]{--accent:#ffaa52;--table:#342244;--pattern:radial-gradient(ellipse at 80% 20%,#e7793e30,transparent 50%)}body[data-theme=blocks]{--accent:#8be29e;--table:#19372f;--pattern:repeating-linear-gradient(0deg,#4e8c4e0a 0 24px,transparent 24px 48px)}body[data-theme=neon]{--accent:#73f0fa;--table:#16223c;--shine:#ad7eff;--pattern:linear-gradient(120deg,#5b2c781c,transparent)}[hidden]{display:none!important}.uno-app{max-width:1280px;margin:auto;padding:24px 28px}header,.table-head,.toolbar,.hand-head,.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}header{font-size:12px;letter-spacing:.06em}a{color:#f3d69c}header a{text-decoration:none;font-weight:800}header span{color:var(--muted)}.uno-intro{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:65px 0 45px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:800}h1{font-size:clamp(35px,5vw,62px);line-height:1.06;letter-spacing:-.04em;margin:14px 0 20px}h1 em{font-style:normal;color:var(--accent)}p{color:var(--muted)}h2{font-size:20px}button,input,select{font:inherit}button{cursor:pointer;background:#20334f;color:var(--ink);border:1px solid #6a83a746;border-radius:12px;padding:12px 17px;font-size:14px;font-weight:750;min-height:44px}button:hover:not(:disabled){filter:brightness(1.15)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--accent);color:#101d32;border:none}input,select{width:100%;background:#0b172b;color:var(--ink);border:1px solid #566d91;border-radius:10px;padding:12px;font-size:16px}label{display:grid;gap:8px;font-size:13px;color:var(--muted)}.uno-panel{background:var(--panel);border-radius:20px;padding:24px;margin:24px 0}.setup{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:20px;align-items:end}.setup>.check{grid-column:span 2}.check{display:inline-flex;gap:8px;align-items:center;font-size:13px}.check input{width:18px;height:18px;flex-shrink:0}.uno-rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.room{text-align:left;display:flex;flex-direction:column;gap:14px;padding:20px;background:linear-gradient(145deg,#1c3150,#111e35);min-height:155px}.room strong{color:var(--accent);font-size:16px}.room span{color:var(--muted);font-weight:400}.room small{color:#9ae1c6}.room:disabled small{color:#f3b19b}.uno-status{min-height:26px;color:#f3d69c}.uno-art{position:relative;width:330px;height:250px;flex-shrink:0}.art-card{position:absolute;display:grid;place-items:center;width:115px;height:175px;box-shadow:0 12px 35px #0008;border:5px solid #f7f2df;border-radius:18px;font-size:58px;font-weight:900;top:35px;left:70px;transform:rotate(-23deg);font-style:normal}.art-card.blue{left:145px;top:12px;transform:rotate(8deg)}.art-card.wild{left:220px;top:45px;transform:rotate(26deg);font-size:42px}.red{background:linear-gradient(135deg,#bf314e,#7f1f3c)}.blue{background:linear-gradient(135deg,#327be0,#1d3c91)}.green{background:linear-gradient(135deg,#218a63,#0f503d)}.yellow{background:linear-gradient(135deg,#f7cb57,#c18720);color:#19233c!important}.wild{background:conic-gradient(from 30deg,#223256,#614070,#25493c,#364a72,#223256)}.table-head h1{font-size:32px;margin:5px 0}.toolbar{gap:8px}.subtle{font-size:13px}.uno-players{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0}.player{display:flex;align-items:center;gap:10px;padding:12px 17px;background:#14243d;border-radius:16px;border:2px solid transparent;max-width:250px}.player.active{border-color:var(--accent);box-shadow:0 0 24px #ff8a3918}.player small{display:block;color:var(--muted)}.player strong{overflow-wrap:anywhere}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#354b71;color:#f6d38e;font-weight:900}.uno-table{position:relative;border-radius:40% / 15%;background:radial-gradient(ellipse,var(--table),#0a1629);min-height:350px;padding:25px;text-align:center;box-shadow:inset 0 0 80px #060c1a60,0 10px 30px #0004}.table-orbit{position:absolute;inset:16px;border:1px solid #77b8c41c;border-radius:40% / 15%;pointer-events:none}.uno-turn{font-weight:800;color:var(--accent);margin:0 0 18px}.uno-piles{display:flex;justify-content:center;align-items:center;gap:38px}.uno-card{position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;width:91px;height:137px;padding:10px;border:4px solid #e9eef1;border-radius:15px;color:white;box-shadow:0 8px 18px #0005;transition:transform .2s,box-shadow .2s;isolation:isolate}.uno-card:before{content:'';position:absolute;inset:23px 7px;border:1px solid #fff5;border-radius:60% 40%;transform:rotate(20deg);z-index:-1}.uno-card .corner{font-size:17px;font-weight:900;text-align:left}.uno-card .center{font-size:34px;font-weight:950;letter-spacing:-.07em;line-height:1.1}.uno-card .bottom{text-align:right;font-size:11px;letter-spacing:.02em}.card-back{background:repeating-linear-gradient(125deg,#243b5d 0 10px,#263f6220 10px 15px),#111d34;align-items:center;color:#ffd19b}.card-back span{font-size:9px;letter-spacing:.13em}.card-back strong{font:900 27px system-ui;transform:rotate(-14deg)}.card-back small{font-size:9px}.uno-hand-panel{padding:20px;margin:24px 0;background:#111e34;border-radius:20px}.uno-hand{display:flex;gap:12px;overflow-x:auto;padding:18px 6px 24px;min-height:180px;scroll-snap-type:x proximity}.uno-hand .uno-card{scroll-snap-align:start}.uno-hand .uno-card:not(:disabled):hover{transform:translateY(-10px) rotate(-2deg);box-shadow:0 15px 30px #0006}.uno-hand .uno-card:disabled{opacity:.55}.hand-head>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hand-head h2{margin:0}.shout{background:#b92d4d;color:#fff}.uno-card.played{animation:land .3s ease-out}@keyframes land{from{transform:translateY(-25px) rotate(-10deg);opacity:.4}to{transform:none;opacity:1}}body[data-theme=blocks] .uno-card{border-radius:3px;box-shadow:5px 5px #0005}body[data-theme=neon] .uno-card{border-color:#9ee9ef;box-shadow:0 0 18px #7b72ff55}.color-picker{position:fixed;inset:0;background:#000b;z-index:100;display:grid;place-items:center;padding:20px}.color-picker>div{background:#172942;border-radius:20px;padding:25px;max-width:430px;width:100%}.color-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}[data-color=red]{background:#ac2844}[data-color=blue]{background:#235bb3}[data-color=green]{background:#147348}[data-color=yellow]{background:#e2b34a;color:#15213b}.rules p{font-size:14px}.rules summary{cursor:pointer;font-weight:800}footer{text-align:center;font-size:12px;color:var(--muted);margin:35px 0}.room:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #89edf3;outline-offset:4px}@media(max-width:900px){.uno-rooms{grid-template-columns:repeat(3,minmax(0,1fr))}.uno-art{transform:scale(.8);transform-origin:right center;width:280px}.setup{grid-template-columns:1fr 1fr}.setup>.check{grid-column:span 1}}@media(max-width:600px){.uno-app{padding:18px 14px}.uno-intro{padding:25px 0;display:block}.uno-art{margin:0 auto;height:210px;transform:scale(.85);transform-origin:center}.uno-rooms{grid-template-columns:1fr 1fr;gap:10px}.room{padding:15px}.setup{grid-template-columns:1fr}.setup>.check{grid-column:auto}header{font-size:10px;gap:9px}.uno-panel{padding:18px}.uno-card{width:79px;height:121px;padding:8px}.uno-card .center{font-size:29px}.uno-card .bottom{font-size:9px}.uno-piles{gap:26px}.uno-table{border-radius:26px;padding:20px 12px}.player{padding:9px;font-size:12px}.avatar{width:32px;height:32px}.uno-hand-panel{padding:14px}.toolbar button{font-size:12px;padding:10px}.hand-head>div{margin-top:10px}.table-head h1{font-size:27px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
.uno-chat{max-width:850px;margin:24px auto}.uno-chat form{display:flex;align-items:end;gap:12px}.uno-chat label{flex:1}#uno-chat-log{height:200px;overflow:auto;background:#0a172b;border-radius:12px;padding:12px;margin-bottom:14px}#uno-chat-log p{font-size:14px;margin:8px 0;overflow-wrap:anywhere}#uno-chat-log strong{color:#ffbd88}#uno-audio{display:flex;flex-wrap:wrap;gap:12px}#uno-audio>div{background:#13253e;border-radius:12px;padding:10px;font-size:12px}#uno-audio audio{display:block;max-width:230px;height:32px;margin-top:6px}
.avatar-choice{grid-column:1/-1;border:0;margin:0;padding:0;order:4}.avatar-choice legend{font-size:14px;margin-bottom:12px;color:var(--ink);font-weight:700}.avatar-choice small{display:block;color:var(--muted);margin-top:10px}#uno-avatar-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}#uno-avatar-picker button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:5px;background:#17253b;border:2px solid transparent;min-width:0}#uno-avatar-picker button[aria-pressed=true]{border-color:var(--accent);background:#263b54}#uno-avatar-picker span{font-size:11px}.uno-family-avatar{display:block;width:100%;max-width:105px;height:auto;border-radius:14px}.player .uno-family-avatar{width:63px;height:75px;flex-shrink:0}.setup>.primary{order:5}.setup>.check{order:3}body[data-theme=monsters] .card-back{background:radial-gradient(circle at center,#f0cb62 0 15%,#293d55 16% 20%,transparent 21%),linear-gradient(145deg,#3c5d81,#142645)}body[data-theme=warriors] .card-back{background:repeating-radial-gradient(ellipse at center,#e49a36 0 8px,#61436e 9px 13px,#222942 14px 22px)}body[data-theme=blocks] .card-back{background:repeating-conic-gradient(#347565 0 25%,#203e42 0 50%) 0/24px 24px}body[data-theme=neon] .card-back{background:repeating-linear-gradient(45deg,#2a1d4c 0 11px,#37a6b5 12px 13px,#11243e 14px 24px)}@media(max-width:600px){#uno-avatar-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.player .uno-family-avatar{width:50px;height:60px}.player{max-width:220px}}
/* Larger cards and a felt table with a clear center. */
.uno-table{background:radial-gradient(ellipse at center,#194b50,#112e3e 65%,#101c31);border:10px solid #263954;box-shadow:inset 0 0 0 2px #d6a65c66,inset 0 0 90px #0006,0 20px 50px #0006;min-height:430px;border-radius:150px;padding:32px}.uno-piles{gap:55px}.uno-piles .uno-card{width:118px;height:174px}.uno-card{border-width:5px;background-blend-mode:normal;box-shadow:0 8px 0 #050b1870,0 13px 22px #0006}.uno-card .center{font-size:44px;text-shadow:0 3px 2px #0004}.uno-card:before{background:#ffffff13;border:2px solid #ffffff70;inset:25px 8px}.uno-hand .uno-card{width:98px;height:145px}.uno-hand .uno-card .center{font-size:38px}#uno-total-label{max-width:350px;margin:20px auto 12px;text-align:left}#uno-total-label small{font-size:12px}.player:has(.uno-family-avatar){min-width:170px}@media(max-width:600px){.uno-table{border-width:5px;border-radius:35px;padding:24px 12px}.uno-piles .uno-card{width:98px;height:148px}.uno-hand .uno-card{width:83px;height:128px}.uno-hand .uno-card .center{font-size:31px}.uno-piles{gap:30px}}