:root{--bg:#0f172a;--panel:#1e293b;--text:#f1f5f9;--muted:#94a3b8;--accent:#f59e0b;--red:#ef4444;--yellow:#facc15;--green:#22c55e;--blue:#3b82f6;--wild:#111827}*{box-sizing:border-box}#root,body,html{height:100%;margin:0}body{background:radial-gradient(circle at top,#1e293b,var(--bg));color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-tap-highlight-color:transparent}.app{min-height:100%;flex-direction:column;padding:16px 16px env(safe-area-inset-bottom)}.app,main{display:flex}main{flex:1 1;flex-direction:column;align-items:center;gap:16px;max-width:720px;width:100%;margin:0 auto}h1,h2,h3{margin:0}.logo{font-size:64px;font-weight:900;letter-spacing:-2px;color:var(--accent);text-shadow:4px 4px 0 var(--red)}label{display:flex;flex-direction:column;gap:6px;width:100%;max-width:320px;color:var(--muted);font-size:14px}input{padding:12px;border-radius:10px;border:1px solid #334155;background:var(--panel);color:var(--text);font-size:16px;width:100%}.code-input{text-transform:uppercase;letter-spacing:6px;font-weight:700;text-align:center}form{width:100%;max-width:320px;display:flex;gap:8px}form button{flex:1 1}.divider{color:var(--muted)}button{padding:12px 18px;border-radius:10px;border:none;background:#334155;color:var(--text);font-size:16px;font-weight:600;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#111}button.ghost{background:transparent;color:var(--muted)}button.uno{font-weight:900}.banner,button.uno{background:var(--red)}.banner{color:#fff;text-align:center;padding:6px;border-radius:8px;margin-bottom:8px}.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--red);padding:10px 16px;border-radius:10px;z-index:20}.hint{color:var(--muted);font-size:14px;text-align:center}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.room-code{font-size:48px;font-weight:900;letter-spacing:10px;background:var(--panel);padding:12px 24px;border-radius:14px;cursor:pointer}.player-list{list-style:none;padding:0;margin:0;width:100%;max-width:360px;display:flex;flex-direction:column;gap:6px}.player-list li{display:flex;justify-content:space-between;background:var(--panel);padding:10px 14px;border-radius:10px}.player-list li.offline{opacity:.5}.ready{color:var(--green)}.not-ready{color:var(--muted)}.game{gap:12px}.players{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;align-items:center}.direction{font-size:24px;color:var(--muted)}.player{background:var(--panel);padding:8px 12px;border-radius:10px;text-align:center;min-width:90px;border:2px solid transparent;position:relative}.player.current{border-color:var(--accent)}.player.offline{opacity:.5}.player .name{font-size:13px;color:var(--muted)}.player .count{font-weight:700}.badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:900;padding:2px 6px;border-radius:6px}.badge,.catch{background:var(--red)}.catch{margin-top:4px;padding:4px 8px;font-size:12px}.table{gap:32px;justify-content:center;padding:16px 0}.draw-pile,.table{display:flex;align-items:center}.draw-pile{background:none;padding:0;flex-direction:column;gap:4px;color:var(--muted)}.discard{padding:6px;border-radius:16px;border:4px solid transparent}.discard.color-red{border-color:var(--red)}.discard.color-yellow{border-color:var(--yellow)}.discard.color-green{border-color:var(--green)}.discard.color-blue{border-color:var(--blue)}.status{text-align:center;min-height:44px}.turn{font-weight:700}.turn.mine{color:var(--accent)}.event{color:var(--muted);font-size:14px}.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:8px 0 24px;width:100%}.card{width:64px;height:96px;border-radius:10px;position:relative;padding:0;color:#fff;font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.4);border:3px solid #fff;transition:transform .12s}.card.color-red{background:var(--red)}.card.color-yellow{background:var(--yellow);color:#111}.card.color-green{background:var(--green)}.card.color-blue{background:var(--blue)}.card.color-wild{background:conic-gradient(var(--red) 0 25%,var(--yellow) 0 50%,var(--green) 0 75%,var(--blue) 0)}.card.back{background:repeating-linear-gradient(45deg,#111827 0 8px,#b91c1c 8px 16px)}.card .center{font-size:30px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-shadow:2px 2px 0 rgba(0,0,0,.35)}.card .corner{position:absolute;top:4px;left:6px;font-size:12px}.card .corner.bottom{top:auto;left:auto;bottom:4px;right:6px;transform:rotate(180deg)}.card.playable{transform:translateY(-10px);box-shadow:0 0 0 3px var(--accent),0 6px 12px rgba(0,0,0,.5);cursor:pointer}.card.dim{opacity:.55}.card:disabled{cursor:default}.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10}.color-picker{background:var(--panel);padding:24px;border-radius:16px;text-align:center}.swatches{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-top:16px}.swatch{width:80px;height:80px;border-radius:14px}.swatch.color-red{background:var(--red)}.swatch.color-yellow{background:var(--yellow)}.swatch.color-green{background:var(--green)}.swatch.color-blue{background:var(--blue)}.result table{border-collapse:collapse;min-width:280px}.result td,.result th{padding:8px 14px;text-align:left;border-bottom:1px solid #334155}.result tr.winner td{color:var(--accent);font-weight:700}@media (max-width:480px){.card{width:54px;height:82px}.card .center{font-size:24px}.logo{font-size:48px}}