:root{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#f9f9fd;background:#0c1530}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#253e75,#0c1530 65%);min-height:100vh}.shell{max-width:980px;margin:auto;padding:22px 18px 50px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.brand>span{font-weight:1000;font-size:38px;color:#ffd64d;font-style:italic;text-shadow:3px 3px #e33b4c}.brand small{font-size:13px;color:#b6c8ef;margin-left:8px}.status{font-size:12px;color:#91eab7}.panel{background:#fff;color:#19284d;border-radius:24px;padding:25px;box-shadow:0 20px 60px #0004;max-width:550px;margin:35px auto}.entry h1{font-size:27px}.entry p,.muted{color:#6c7792;line-height:1.65}.entry label{display:block;margin:22px 0 12px;font-weight:700}.entry input{margin-top:8px}input{min-height:48px;padding:12px 15px;width:100%;border:1px solid #cdd5e4;border-radius:12px;font-size:16px;outline:none}input:focus{border-color:#597be5}button{cursor:pointer;font:inherit;font-weight:800;border:0;border-radius:12px;padding:12px 18px;color:#234074;background:#e9efff}button:disabled{opacity:.45;cursor:not-allowed}.primary{color:#fff;background:#516de5}.actions{display:flex;gap:10px;margin:16px 0}.joinRow{display:flex;gap:8px;margin-top:22px}.joinRow button{white-space:nowrap}.roomHead{display:flex;justify-content:space-between;align-items:center}.roomHead h1{font-size:38px;letter-spacing:5px;margin:2px 0}.roomHead small{color:#6e7898}.roomHead span{color:#576888}.lobbyPlayers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lobbyPlayer{background:#eef3ff;padding:12px;border-radius:12px}.full{width:100%;margin-top:22px}.hidden{display:none!important}.gameTop{display:flex;align-items:center;justify-content:space-between;color:#c5d5ff}.tiny{font-size:12px}.small{padding:8px 12px;font-size:12px}.players{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:25px auto 15px}.player{background:#223663;border:2px solid #3b5288;padding:14px;border-radius:15px;min-width:125px;text-align:center}.player.current{border-color:#ffda50;box-shadow:0 0 20px #ffdc5033}.player.me{background:#304b83}.player.offline{opacity:.55}.player .count{color:#c0d0f5;font-size:13px;margin-top:4px}.player .name{font-weight:700;word-break:break-all}.turnLabel{text-align:center;color:#ffe173;font-size:20px;font-weight:900;min-height:30px}.arena{height:200px;display:flex;justify-content:center;align-items:center;gap:28px;background:radial-gradient(ellipse,#254a69a8,transparent 68%)}.card{--card:#ddd;background:var(--card);border:5px solid #fff;border-radius:12px;color:#fff;width:90px;height:132px;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:0 7px 15px #0007;flex-shrink:0;user-select:none}.card:before{content:'';background:#ffffffeb;width:62%;height:77%;position:absolute;border-radius:50%;transform:rotate(-26deg)}.card .face{z-index:1;color:var(--card);font-weight:1000;font-size:32px;text-shadow:0 1px #ffffffaa}.card .corner{z-index:1;position:absolute;color:#fff;font-size:15px;top:4px;left:6px;font-weight:1000}.card .corner.bottom{top:auto;left:auto;bottom:3px;right:6px;transform:rotate(180deg)}.card.wild{--card:#23252e}.card.wild:before{background:conic-gradient(#e94e55 0 25%,#f2bd42 25% 50%,#3bbb74 50% 75%,#3f8aeb 75% 100%)}.card.wild .face{color:white;text-shadow:1px 2px 4px #000}.drawPile{background:#1c2134;border:5px solid white;transform:rotate(8deg);color:#ffdf54;font-size:27px;font-style:italic;border-radius:12px;width:90px;height:132px;box-shadow:0 7px 15px #0007}.drawPile span{font-style:normal;color:white;font-size:15px}.activity{color:#b6caee;text-align:center;min-height:27px}.handTitle{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.inlineButtons{display:flex;gap:8px}.unoBtn{background:#f1b439;color:#382509}.hand{display:flex;gap:6px;overflow-x:auto;padding:16px 0 24px;min-height:178px;scrollbar-width:thin}.hand .card{cursor:pointer;transition:transform .15s;border-width:4px}.hand .card:hover{transform:translateY(-10px)}.hand .card.unplayable{opacity:.65}.hand .card.drawn{box-shadow:0 0 0 3px #ffe35d,0 7px 15px #0007}.footTip{text-align:center;font-size:12px;color:#a2b7dc;line-height:1.6}.overlay{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:10;padding:20px}.modal{width:min(420px,100%);background:white;color:#17254a;border-radius:20px;padding:25px;text-align:center}.colors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.colors button{background:var(--c);color:#fff;min-height:80px;font-size:20px}.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:#fce4a9;color:#3a2916;border-radius:11px;padding:12px 18px;box-shadow:0 10px 35px #0006;z-index:20;max-width:90vw;text-align:center}.pile{position:relative}.colorChip{width:18px;height:18px;border:2px solid white;border-radius:50%;position:absolute;bottom:-6px;right:-6px;box-shadow:0 0 0 2px #182c4f}@media(max-width:550px){.shell{padding:12px 11px 40px}.panel{padding:20px 15px}.brand>span{font-size:32px}.player{min-width:92px;padding:10px 7px;font-size:13px}.players{gap:7px}.card{width:73px;height:112px}.card .face{font-size:26px}.drawPile{width:73px;height:112px}.hand .card{width:72px;height:110px}.arena{height:165px}.handTitle{font-size:14px}.inlineButtons button{font-size:12px;padding:8px 10px}}