/* Not Uno card faces, shared by the TV and the phones. Size with --cw. */
.ucard, .ucard * { box-sizing: border-box; }
.ucard {
  width: var(--cw, 100px); aspect-ratio: 5 / 7.6; container-type: inline-size; position: relative; flex: none;
  /* the card is its own container, so its own box is sized from --cw, not cqw */
  border-radius: calc(var(--cw, 100px) * .09); background: #fbfbf8; padding: calc(var(--cw, 100px) * .055); user-select: none; -webkit-user-select: none;
  box-shadow: 0 calc(var(--cw, 100px) * .02) calc(var(--cw, 100px) * .07) rgba(0,0,0,.35), inset 0 0 0 calc(var(--cw, 100px) * .008) rgba(0,0,0,.1);
  font-family: "Avenir Next", "Inter", "Helvetica Neue", Arial, sans-serif;
}
.ucard .uc-inner { position: relative; width: 100%; height: 100%; border-radius: 6.5cqw; background: var(--uc, #1c1c1e); overflow: hidden; color: #fff; }
.ucard.c-yellow .uc-inner { color: #1b1b1b; }
.ucard .uc-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.ucard .uc-disc { position: absolute; left: 50%; top: 50%; width: 76cqw; height: 76cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.4cqw var(--uc), inset 0 0 0 3.6cqw rgba(255,255,255,.9), 0 2cqw 5cqw rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; color: var(--uc); }
.ucard.c-yellow .uc-disc { color: #d9a400; }
.ucard .uc-big { font-size: 50cqw; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.04em; text-shadow: 1.2cqw 1.2cqw 0 rgba(0,0,0,.14); transform: translateX(-1.5cqw); }
.ucard .uc-big.sm { font-size: 36cqw; }
.ucard .uc-big.ul { text-decoration: underline; text-decoration-thickness: 3cqw; text-underline-offset: 3cqw; }
.ucard .uc-sym { width: 50cqw; height: 50cqw; display: block; }
.ucard .uc-sym svg, .ucard .uc-corner svg { width: 100%; height: 100%; display: block; }
.ucard .uc-corner { position: absolute; font-size: 15cqw; font-weight: 900; font-style: italic; line-height: 1; width: 16cqw; height: 16cqw; display: flex; align-items: center; justify-content: center; text-shadow: 0 .8cqw 0 rgba(0,0,0,.25); }
.ucard .uc-corner.tl { left: 6cqw; top: 6cqw; }
.ucard .uc-corner.br { right: 6cqw; bottom: 6cqw; transform: rotate(180deg); }
.ucard.c-wild .uc-inner { background: radial-gradient(ellipse at 50% 40%, #2c2a33, #121118); }
.ucard .uc-wheel { position: absolute; left: 50%; top: 50%; width: 70cqw; height: 70cqw; transform: translate(-50%, -50%) rotate(-12deg); border-radius: 50%; box-shadow: 0 0 0 2.6cqw #fff, 0 3cqw 8cqw rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.ucard .uc-wtxt { transform: rotate(12deg); font-size: 15cqw; font-weight: 900; font-style: italic; color: #fff; background: rgba(0,0,0,.55); padding: 2cqw 5cqw; border-radius: 5cqw; letter-spacing: .02em; }
.ucard.k-wild4 .uc-wtxt { font-size: 26cqw; }
.ucard.k-wild4 .uc-corner { color: #fff; }
.ucard.k-back .uc-inner { background: radial-gradient(ellipse at 50% 35%, #2b2836, #13111a); }
.ucard .uc-ring { position: absolute; left: 50%; top: 50%; width: 80cqw; height: 80cqw; transform: translate(-50%, -50%) rotate(20deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%); opacity: .95; }
.ucard .uc-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-14deg); color: #fff; line-height: .9; }
.ucard .uc-logo small { font-size: 11cqw; font-weight: 800; letter-spacing: .3em; margin-left: .3em; color: #f6c90e; }
.ucard .uc-logo b { font-size: 30cqw; font-weight: 900; font-style: italic; letter-spacing: -.02em; text-shadow: 1.5cqw 1.5cqw 0 #e5383b; }
/* Store edition: CRAZY over EIGHTS, upright. */
.ucard .uc-logo.st small { letter-spacing: .2em; margin-left: .2em; }
.ucard .uc-logo.st b { font-size: 16cqw; font-style: normal; letter-spacing: .02em; text-shadow: 1cqw 1cqw 0 rgba(0,0,0,.45); }
.ucard.dim { filter: saturate(.45) brightness(.8); }
.uc-explain { background: var(--fill, rgba(120,120,128,.14)); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--text); }
.uc-explain .uc-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.uc-explain p { margin: 5px 0 0; }