.uno-screen { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; color: #fff; }
.uno-opp { display: flex; align-items: center; gap: 8px; font: 600 13px system-ui; }
.uno-backs { display: flex; }
.uno-back { width: 18px; height: 27px; border-radius: 4px; margin-left: -8px; border: 1.5px solid #fff;
  background: repeating-linear-gradient(45deg, #1f2937, #1f2937 3px, #374151 3px, #374151 6px); }
.uno-back:first-child { margin-left: 0; }
.uno-felt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
.uno-colordot { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); padding: 5px 12px; border-radius: 20px; font: 600 12px system-ui; }
.uno-piles { display: flex; gap: 18px; align-items: center; }
.uno-draw { width: 56px; height: 84px; border-radius: 9px; border: 3px solid #fff; display: flex; align-items: center; justify-content: center;
  font: 800 13px system-ui; color: #fff; background: repeating-linear-gradient(45deg, #1f2937, #1f2937 4px, #374151 4px, #374151 8px); }
.uno-status { font: 700 13px system-ui; }
.uno-hand { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 10px 6px; background: rgba(0,0,0,.22); border-radius: 12px; max-width: 483px; margin: 0 auto; }
.uno-actions { display: flex; gap: 8px; }
.uno-card { width: 56px; height: 84px; border-radius: 9px; border: 3px solid #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.uno-card .uc-pip { background: #fff; width: 38px; height: 58px; border-radius: 50% / 40%; display: flex; align-items: center; justify-content: center; font: 900 22px system-ui; }
.uc-red { background: #d32f2f; } .uc-yellow { background: #f9a825; } .uc-green { background: #388e3c; } .uc-blue { background: #1976d2; } .uc-wild { background: #222; }
.uc-red .uc-pip { color: #d32f2f; } .uc-yellow .uc-pip { color: #f9a825; } .uc-green .uc-pip { color: #388e3c; } .uc-blue .uc-pip { color: #1976d2; } .uc-wild .uc-pip { color: #222; }
.uno-card.playable { outline: 3px solid #ffe14d; outline-offset: 1px; transform: translateY(-6px); }
.uno-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; }
.uno-swatch.sm { width: 14px; height: 14px; }
.uno-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.uno-picker { background: #fff; color: #333; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.uno-picker-title { font: 700 16px system-ui; }