/* ============================================================
   UNO — feature styles (mobile-first, reuses base theme tokens)
   Card visuals pair with frontend/uno/cards.js
   ============================================================ */

/* ============================================================
   UNO ARENA — full-bleed dark club for lobby + room, every theme.
   (brickstacker-style: game chrome apna, app chrome hidden)
   ============================================================ */
.uo-arena {
  margin: -12px -16px calc(-28px - env(safe-area-inset-bottom, 0px));
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 44px;
  min-height: 100dvh;
  background:
    radial-gradient(120% 34% at 50% 0%, rgba(229,72,77,.13), transparent 62%),
    radial-gradient(110% 44% at 50% 108%, rgba(90,59,208,.15), transparent 60%),
    linear-gradient(180deg, #151022 0%, #0C0916 100%);
  color: #F2EDFA;
}
/* in-arena text that otherwise follows the (possibly light) theme */
.uo-arena .spk-name { color: #F5F0FA; }
.uo-arena .spk-kicker { color: #FFDF9E; text-shadow: 0 0 12px rgba(255,196,86,.4); }
.uo-arena .uo-code-chip {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #FFDF9E;
}
.uo-arena .uo-hand-label { color: rgba(235,228,248,.5); }
.uo-arena .uo-status { color: rgba(235,228,248,.55); }
.uo-arena .uo-youbar-inner {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.uo-arena .uo-youname { color: #F5F0FA; }
.uo-arena .uo-youcards { color: rgba(235,228,248,.6); }
.uo-arena .uo-seatchip {
  color: #F2EDFA; background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.uo-arena .uo-exit {
  color: #FF9CA0;
  background: rgba(90,20,26,.5); border-color: rgba(229,72,77,.45);
}
.uo-arena .muted { color: rgba(235,228,248,.55); }
/* light-theme cards still read fine on the dark felt — keep them */

/* ============================================================
   LOBBY v2 — arcade poster: top strip, card-fan stage,
   chunky action machines, how-to drawer
   ============================================================ */
.ul-top {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 0 0;
}
.ul-brand {
  font-family: var(--font-card, 'Baloo 2', sans-serif);
  font-weight: 800; font-style: italic;
  font-size: 22px; letter-spacing: 1px;
  color: #fff;
  text-shadow:
    -1px -1px 0 #E0342B, 1px -1px 0 #E0342B,
    -1px 1px 0 #E0342B, 1px 1px 0 #E0342B,
    0 4px 14px rgba(224,52,43,.45);
  margin-right: auto;
}
.ul-coins {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 13px; font-weight: 800; color: #FFDF9E;
}

.ul-stage {
  position: relative;
  margin-top: 14px;
  border-radius: 26px;
  padding: 26px 18px 20px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(229,72,77,.22), transparent 65%),
    radial-gradient(70% 60% at 50% 110%, rgba(90,59,208,.22), transparent 65%),
    linear-gradient(170deg, #241A38 0%, #150F24 70%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 40px -14px rgba(0,0,0,.6);
}
.ul-stage::after {
  content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,214,120,.7), rgba(229,72,77,.7), transparent);
}
.ul-fan {
  position: relative;
  height: 72px;
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 10px;
}
.ul-fan .uo-card { position: relative; margin: 0 -9px; }
.ul-fan-card { display: block; animation: ulFloat 3.4s ease-in-out infinite; }
@keyframes ulFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* shine sweep across the stage every few seconds */
.ul-stage::before {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: 0;
  width: 70px; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent);
  transform: translateX(-180%) skewX(-16deg);
  animation: ulShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ulShine {
  0%, 58% { transform: translateX(-180%) skewX(-16deg); }
  92%, 100% { transform: translateX(620%) skewX(-16deg); }
}
.ul-title {
  font-family: var(--font-card, 'Baloo 2', sans-serif);
  font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: 5px;
  background: linear-gradient(92deg, #FFD469 8%, #FF8A8E 52%, #FF6B70 94%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 12px rgba(229,72,77,.4));
}
.ul-tag {
  margin-top: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
  color: rgba(235,228,248,.6);
}
.ul-live {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  color: rgba(235,228,248,.85);
}
.ul-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ECC71;
  box-shadow: 0 0 10px rgba(46,204,113,.9);
  animation: ulBlink 1.8s ease-in-out infinite;
}
@keyframes ulBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.ul-actions { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.ul-act {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  padding: 15px 16px;
  border-radius: 20px;
  color: #F5F0FA;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 50%),
    linear-gradient(160deg, #221B33 0%, #150F24 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 26px -12px rgba(0,0,0,.6);
  transition: transform .12s ease, filter .12s ease;
  overflow: hidden;
}
.ul-act { transition: transform .18s cubic-bezier(.34,1.4,.64,1), filter .18s ease, box-shadow .2s ease; }
.ul-act:active { transform: translateY(1px) scale(.975); filter: brightness(1.12); }
.ul-act::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px;
  border-radius: 99px;
  background: var(--edge, #8B5CF6);
  box-shadow: 0 0 12px var(--edge, #8B5CF6);
}
.ul-act.k-create { --edge: #F5B93E; }
.ul-act.k-join { --edge: #8B5CF6; }
.ul-act.k-bot { --edge: #2ECC71; }
.ul-act[disabled] { opacity: .55; }
.ul-ic {
  flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: #FFDF9E;
}
.ul-ic svg { width: 22px; height: 22px; }
.k-join .ul-ic { color: #B9A5FF; }
.k-bot .ul-ic { color: #7DF2B0; }
.ul-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ul-name { font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.ul-sub { font-size: 12px; font-weight: 600; color: rgba(235,228,248,.6); }
.ul-cost {
  flex-shrink: 0;
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
  padding: 7px 12px; border-radius: 999px;
}
.ul-cost.gold { color: #FFDF9E; background: rgba(245,185,62,.14); border: 1px solid rgba(245,185,62,.4); }
.ul-cost.free { color: #7DF2B0; background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.4); }
.ul-go { flex-shrink: 0; font-size: 26px; font-weight: 700; color: rgba(235,228,248,.5); line-height: 1; }

.ul-how {
  margin: 14px auto 4px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,.22);
  color: rgba(235,228,248,.7);
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
}
.ul-how svg { width: 16px; height: 16px; }
.ul-rule { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; margin-top: 10px; }
.ul-tick {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--glow-accent);
}

/* ============================================================
   PREMIUM LOBBY v3 — logo hero + mode cards
   ============================================================ */
.ul-top { justify-content: space-between; }

.ul-hero {
  position: relative;
  margin-top: 12px;
  border-radius: 28px;
  padding: 30px 14px 22px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(224,52,43,.25), transparent 62%),
    radial-gradient(80% 60% at 50% 115%, rgba(90,59,208,.25), transparent 62%),
    linear-gradient(175deg, #221636 0%, #130D22 70%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 20px 44px -14px rgba(0,0,0,.65);
}
.ul-hero::before {
  content: ''; position: absolute; top: -45%; bottom: -45%; left: 0;
  width: 72px; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent);
  transform: translateX(-180%) skewX(-16deg);
  animation: ulShine 6s ease-in-out infinite;
  pointer-events: none;
}
.ul-logo {
  position: relative; z-index: 1;
  font-family: var(--font-card, 'Baloo 2', sans-serif);
  font-style: italic; font-weight: 800;
  font-size: 66px; line-height: 1; letter-spacing: 3px;
  color: #FFD23F;
  transform: rotate(-4deg);
  -webkit-text-stroke: 2.5px #141414;
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 rgba(20,20,20,.9)) drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
.ul-logo::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 46%;
  width: 196px; height: 96px;
  transform: translate(-50%,-50%) rotate(-6deg);
  background: radial-gradient(ellipse at center, #E0342B 58%, #A81E15 74%, transparent 75%);
  border-radius: 50%;
}
.ul-kicker {
  position: relative; z-index: 1;
  margin-top: 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 3.4px;
  color: rgba(235,228,248,.62);
}
.ul-hero .ul-live { margin-top: 14px; }

.ul-modes-label {
  text-align: center;
  margin: 20px 0 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 3.2px;
  color: rgba(235,228,248,.5);
}
.ul-modes { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ul-mode {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 15px 16px;
  border-radius: 22px;
  color: #F5F0FA;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #251C3D 0%, #150F26 100%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 14px 28px -12px rgba(0,0,0,.65);
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), filter .18s ease;
  overflow: hidden;
}
.ul-mode:active { transform: scale(.975); filter: brightness(1.12); }
.ul-mode[disabled] { opacity: .55; }
.ul-art {
  flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 17px;
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.25),
    0 6px 14px rgba(0,0,0,.4);
}
.m-create .ul-art { background: linear-gradient(160deg, #FFD97A, #E8930C); color: #3A2200; }
.m-join .ul-art { background: linear-gradient(160deg, #9D7BFF, #5B2BD8); color: #fff; }
.m-bot .ul-art { background: linear-gradient(160deg, #3ED598, #149A68); color: #06281C; }
.ul-art .uo-svgic { width: 30px; height: 30px; }
.ul-pill {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; letter-spacing: .4px;
  padding: 7px 12px; border-radius: 999px;
}
.ul-pill.gold { color: #FFDF9E; background: rgba(245,185,62,.14); border: 1px solid rgba(245,185,62,.42); }
.ul-pill.violet { color: #D3C2FF; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.45); }
.ul-pill.green { color: #7DF2B0; background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.42); }

/* ---------- Game page entry post ---------- */
.uo-entry {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  margin-top: 12px; padding: 15px;
  border-radius: 22px; color: var(--stage-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 46%),
    linear-gradient(160deg, #3A1220 0%, #240B18 55%, #2E0F1C 100%);
  box-shadow:
    inset 0 0 0 1px rgba(229, 72, 77, .38),
    0 0 0 1px rgba(245, 185, 62, .18),
    0 14px 30px rgba(0,0,0,.42),
    0 0 26px rgba(229, 72, 77, .14);
  transition: transform .14s ease, box-shadow .2s ease;
  overflow: hidden;
}
.uo-entry::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,185,62,.6), rgba(229,72,77,.65), transparent);
}
.uo-entry:active {
  transform: scale(.977);
  box-shadow:
    inset 0 0 0 1px rgba(229,72,77,.6),
    0 8px 20px rgba(0,0,0,.5),
    0 0 34px rgba(229,72,77,.28);
}
.uo-entry-art {
  position: relative; flex-shrink: 0; width: 86px; height: 86px;
}
/* miniature REAL cards fanned — same visual system as the game */
.uo-mini-fan { position: absolute; inset: 0; }
.uo-mini-fan .uo-card { position: absolute; left: 50%; top: 50%; }
.uo-mini-fan .f1 { transform: translate(-88%,-54%) rotate(-16deg); }
.uo-mini-fan .f2 { transform: translate(-62%,-58%) rotate(-5deg); }
.uo-mini-fan .f3 { transform: translate(-36%,-56%) rotate(7deg); }
.uo-mini-fan .front {
  transform: translate(-50%,-44%) rotate(-4deg) scale(1.06);
  z-index: 3;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.25),
    0 8px 18px rgba(0,0,0,.55),
    0 0 18px rgba(255,214,120,.35);
}
.uo-entry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.uo-entry-kicker { font-size: 9px; font-weight: 800; letter-spacing: 2.6px; color: #FF8A8E; text-shadow: 0 0 10px rgba(229,72,77,.5); }
.uo-entry-title {
  font-size: 23px; line-height: 1.05; font-weight: 800; letter-spacing: 4px;
  background: linear-gradient(92deg, #FFD469 8%, #FF8A8E 52%, #FF6B70 94%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(229,72,77,.45));
}
.uo-entry-sub { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: rgba(235,228,248,.66); }
.uo-entry-chev { flex-shrink: 0; align-self: center; font-size: 26px; font-weight: 700; color: var(--stage-gold); }

/* ============================================================
   CARDS — matches reference-cards/*.png
   white frame · inset solid panel · big tilted white oval ·
   card-colored center artwork · large white corners
   sizes: sz-xs (post fan) · sz-sm (hand) · sz-lg (discard)
   ============================================================ */
.uo-card {
  --cw: 62px; --ch: 90px; --rad: 12px;
  --body: #F2544B;
  --frame: 3px;                  /* white frame thickness */
  --numsize: 34px;               /* center numeral — big like the reference */
  --cornsize: 17px;              /* corner index */
  --font-card: 'Baloo 2', 'Manrope', sans-serif;
  position: relative; flex-shrink: 0;
  width: var(--cw); height: var(--ch);
  border-radius: var(--rad);
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
  background: #FFFFFF;                          /* the frame */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 0 0 1px #D9D9D9,
    0 4px 10px rgba(0,0,0,.35);
}
/* faint print weave on the color panel */
.uo-card::after {
  content: ''; position: absolute; z-index: 1;
  inset: var(--frame);
  border-radius: max(5px, calc(var(--rad) - var(--frame) + 1px));
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.uo-card::before {                              /* inset colored panel */
  content: ""; position: absolute; z-index: 0;
  inset: var(--frame);
  border-radius: max(5px, calc(var(--rad) - var(--frame) + 1px));
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 34%),
    linear-gradient(0deg, rgba(0,0,0,.16), rgba(0,0,0,0) 30%),
    var(--body);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.uo-card.sz-lg { --cw: 84px; --ch: 122px; --rad: 15px; --numsize: 46px; --cornsize: 22px; --frame: 4px; }
.uo-card.sz-xs { --cw: 34px; --ch: 49px; --rad: 7px;  --numsize: 18px; --cornsize: 11px; --frame: 2.5px; }

.uo-card.c-r { --body: #F2544B; }
.uo-card.c-y { --body: #FBA919; }
.uo-card.c-g { --body: #3DA639; }
.uo-card.c-b { --body: #5B5FEF; }
.uo-card.c-w { --body: #101014; }

/* sprite faces (CC0 deck) — baked artwork, frame + ring only */
.uo-card.sprite { background-color: #FFFFFF; }
.uo-card.sprite::before { display: none; }
.uo-card.sprite {
  box-shadow:
    inset 0 0 0 3px #FFFFFF,
    inset 0 0 0 4px rgba(0,0,0,.10),
    0 0 0 1px #D9D9D9,
    0 4px 10px rgba(0,0,0,.35);
}

/* big tilted white oval — same character/placement as the references */
.uo-card .oval {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 102%; height: 50%;
  transform: translate(-50%,-50%) rotate(-24deg);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: inset -3px -5px 10px rgba(0,0,0,.10);
}

/* +4 Wild: oval slimmed and stretched — sweeps from the left end up to
   the right upper corner (white-on-white overflow is invisible by design) */
.uo-card.c-w .oval:not(.quad) {
  width: 118%;
  height: 45%;
  transform: translate(-50%,-50%) rotate(-38deg);
}
/* smaller "+4" corner labels on this card */
.uo-card.c-w .cnr {
  font-size: calc(var(--cornsize) * 0.7);
}
/* thick 15px white frame on the +4 wild card */
.uo-card.c-w { --frame: 15px; }
.uo-card.c-w.sz-xs { --frame: 7px; }

/* Colour Change: four-color quadrant ellipse (reference colours) */
.uo-card .oval.quad {
  width: 92%; height: 52%;
  background: conic-gradient(from -122deg at 50% 50%,
    #F2544B 0 25%, #6A6AE8 0 50%, #3DA639 0 75%, #FBA919 0);
  box-shadow:
    0 0 0 2.5px #FFFFFF,
    inset 0 0 0 1px rgba(255,255,255,.35);
}

/* central numeral — flat print ink, tall like the reference */
.uo-card .big {
  position: relative; z-index: 2;
  font-family: var(--font-card);
  font-size: var(--numsize); line-height: 1; font-weight: 800;
  letter-spacing: -0.02em;
  transform: scaleY(1.07);
}

/* vector symbol centers tilt with the oval */
.uo-card .sym { position: relative; z-index: 2; display: block; }
.uo-card .sym.center-sym {
  width: 58%;
  transform: rotate(-30deg);
}
.uo-card .sym.center-sym svg { width: 100%; height: auto; display: block; }

/* +2: two overlapping card-colored mini-cards, black outlines */
.uo-card .d2-stack { width: 62%; aspect-ratio: 1 / 1.05; }
.uo-card .d2-mini {
  position: absolute; left: 50%; top: 50%;
  width: 52%; height: 62%;
  border-radius: 15%;
  border: 2.5px solid #1F1F1F;
}
.uo-card .d2-mini.back  { transform: translate(-88%,-34%) rotate(-30deg); }
.uo-card .d2-mini.front { transform: translate(-12%,-66%) rotate(-30deg); }

/* Wild +4: four overlapping mini-cards rendered as one inline SVG */
.uo-card .w4-stack { width: 76%; display: block; }
.uo-card .w4-stack svg { width: 100%; height: auto; display: block; }

/* corner indices — flat white print like the reference */
.uo-card .cnr {
  position: absolute; z-index: 3;
  font-family: var(--font-card);
  font-size: var(--cornsize); font-weight: 800; color: #FFFFFF;
  line-height: 0.9; letter-spacing: -0.02em;
  max-width: 46%;
}
.uo-card .cnr.tl { top: 4%; left: 7%; }
.uo-card .cnr.br { bottom: 4%; right: 7%; transform: rotate(180deg); }
.uo-card .cnr.mini-svg { width: 30%; }
.uo-card .cnr.mini-svg svg { width: 100%; height: auto; display: block; }
.uo-card.sz-xs .cnr { display: none; }

/* wild corner: miniature four-color ellipse, white ring, same tilt */
.uo-card .cnr.quad-mini {
  width: 26%; aspect-ratio: 1 / 1.25; padding: 0; max-width: none;
  border-radius: 50%;
  background: conic-gradient(from -122deg at 50% 50%,
    #F2544B 0 25%, #6A6AE8 0 50%, #3DA639 0 75%, #FBA919 0);
  box-shadow: 0 0 0 2px #FFFFFF;
  transform: rotate(-30deg);
}
.uo-card.sz-lg .cnr.quad-mini { width: 24%; }

/* empty discard slot before first play */
.uo-card.empty-slot {
  background: var(--card-2);
  border: 2px dashed var(--stroke-strong);
  box-shadow: none;
}
.uo-card.empty-slot::before { display: none; }

/* ---------- player hand — fanned like a real hand of cards ---------- */
.uo-hand-wrap { margin-top: 12px; }
.uo-hand-label { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--muted); margin-bottom: 10px; }
.uo-hand {
  display: flex; align-items: flex-end; justify-content: center;
  overflow-x: auto; overflow-y: visible;
  padding: 20px 16px 56px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* wider than the screen: start-aligned so every card is reachable by
   scrolling (centered overflow would clip the left edge unreachably);
   touch-action off — the swipe is fully driven by JS speed control */
.uo-hand.wide { justify-content: flex-start; touch-action: none; }
.uo-hand::-webkit-scrollbar { display: none; }
.uo-hand .uo-card + .uo-card { margin-left: -10px; }
.uo-hand.tight .uo-card + .uo-card { margin-left: -18px; }
.uo-hand .uo-card {
  transform-origin: 50% 50%;
  transform: translateY(var(--dy, 0px)) rotate(var(--rot, 0deg));
  /* no transform/filter transition here: while the fan is swiped the cards
     must track the scroll exactly, fast flings included — any easing would
     make them lag and wobble behind the finger */
  transition: box-shadow .2s ease;
  position: relative;
  will-change: transform;
}
/* only freshly dealt/drawn cards animate in — never the whole hand */
.uo-hand .uo-card.dealt { animation: uoDeal .34s cubic-bezier(.30,1.2,.55,1) both; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes uoDeal {
  from { opacity: 0; margin-top: 16px; }
  to { opacity: 1; margin-top: 0; }
}
/* picked = the one card the player tapped: just rises, no ring/line.
   Everything else in the hand always looks identical. */
.uo-hand .uo-card.picked {
  transform: translateY(calc(var(--dy, 0px) - 11px)) rotate(var(--rot, 0deg)) scale(1.06);
  animation: uoPick .2s cubic-bezier(.3,1.35,.55,1);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.4),
    0 18px 26px rgba(0,0,0,.55);
  z-index: 99 !important;
}
@keyframes uoPick {
  from { transform: translateY(var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(1); }
}

.uo-seated { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.uo-seatchip {
  padding: 9px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  color: var(--text); background: var(--card); border: 1.5px solid var(--stroke-strong);
}

/* flying card ghosts (play → discard, draw → hand) */
.uo-fly {
  position: fixed; z-index: 9999; pointer-events: none;
  will-change: transform, opacity;
  transition: transform .38s cubic-bezier(.22,.85,.25,1), opacity .38s ease;
}

/* ---------- header ---------- */
.uo-head { display: flex; align-items: center; gap: 10px; }
.uo-head-title { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.uo-code-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 11px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--stroke-strong);
  font-size: 12.5px; font-weight: 800; letter-spacing: 2px; color: var(--gold);
}
.uo-exit {
  padding: 7px 13px; border-radius: 999px; flex-shrink: 0;
  font-size: 12px; font-weight: 800; letter-spacing: .8px; color: var(--danger);
  background: var(--danger-soft); border: 1px solid rgba(var(--danger-rgb),.4);
}
.uo-exit:active { transform: scale(.95); }

/* ---------- lobby ---------- */
.uo-hero {
  position: relative; margin-top: 14px; padding: 20px 18px;
  border-radius: 24px; overflow: hidden; text-align: center;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(229,72,77,.2), transparent 70%),
    linear-gradient(165deg, #2A1030 0%, #170D22 60%, #20101F 100%);
  box-shadow: inset 0 0 0 1px rgba(255,209,102,.25), 0 16px 36px rgba(0,0,0,.45);
}
.uo-hero-logo {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(160deg, #221A33, #120D1E);
  border: 2.5px solid #FFE7A8; transform: rotate(-6deg);
  font-size: 21px; font-weight: 800; letter-spacing: 1px; color: #FFE7A8;
  box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 20px rgba(255,214,120,.3);
}
.uo-hero h1 {
  margin-top: 12px; font-size: 24px; font-weight: 800; letter-spacing: 6px;
  background: linear-gradient(92deg, #FFD469 10%, #FF8A8E 55%, #FF6B70 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 12px rgba(229,72,77,.4));
}
.uo-hero p { margin-top: 5px; font-size: 12px; font-weight: 600; color: rgba(230,222,248,.6); letter-spacing: 1.2px; }
.uo-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-top: 12px; padding: 15px 16px; border-radius: 18px; color: var(--text);
  background: var(--card); border: 1px solid var(--stroke-strong);
  transition: transform .13s ease;
}
.uo-opt:active { transform: scale(.98); }
.uo-opt[disabled] { opacity: .55; }
.uo-opt-ic {
  flex-shrink: 0; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--card-2); border: 1px solid var(--stroke-strong);
}
.uo-svgic { display: block; width: 26px; height: 26px; }
.uo-svgic svg { width: 100%; height: 100%; display: block; }
.uo-opt-body { flex: 1; min-width: 0; }
.uo-opt-name { font-size: 15px; font-weight: 800; }
.uo-opt-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.uo-opt-cost {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 800; color: var(--gold);
}

/* ---------- game table & players-around-table layout ---------- */
.uo-board { user-select: none; -webkit-user-select: none; }

.uo-opps {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 10px; flex-wrap: wrap;
}
/* seat zones around the oval: top strip + rail-side seats */
.uo-seats-top { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.uo-seats-top:empty { display: none; }
.uo-seat-side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; }
.uo-seat-side.left { left: -2px; }
.uo-seat-side.right { right: -2px; }
.uo-seat-side:empty { display: none; }
.uo-opp.side {
  flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 9px 7px;
  border-radius: 18px;
}
.uo-opp.side .uo-opp-count { top: -8px; right: -8px; }
.uo-opp {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px solid var(--stroke-strong);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.uo-opp.turn {
  border-color: rgba(255,209,102,.9);
  box-shadow:
    0 0 0 1.5px rgba(255,209,102,.4),
    0 0 22px rgba(245,185,62,.5),
    0 6px 16px rgba(0,0,0,.45);
}
.uo-opp.thinking { border-color: rgba(125,242,176,.6); }

/* premium circular avatar */
.uo-avatar {
  position: relative; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.32), transparent 46%),
    linear-gradient(160deg, #5A3BD0, #33206B);
  border: 2px solid #FFFFFF55;
}
.uo-avatar.bot {
  color: #7DF2B0;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(160deg, #14231C, #0C1712);
  border-color: #3DD68C88;
}
.uo-avatar.you {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.32), transparent 46%),
    linear-gradient(160deg, #B8541B, #6E2E08);
  border-color: #FFD9B088;
}
.uo-avatar.empty {
  background: var(--card-2); color: var(--muted);
  border-style: dashed; font-size: 17px;
}
.bot-svg { display: block; width: 22px; height: 22px; }
.bot-svg svg { width: 100%; height: 100%; display: block; }

/* card-count bubble on the avatar */
.uo-opp .uo-opp-count {
  position: absolute; top: -6px; right: -2px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #17111F;
  background: linear-gradient(180deg, #FFE29A, #F0B93C);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 1.5px #FFFFFF66;
}
.uo-opp.turn .uo-opp-count { background: linear-gradient(180deg,#FFF3C9,#FFC53D); }

.uo-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.uo-opp-name {
  font-size: 12px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
  display: inline-flex; align-items: center;
}
.uo-opp-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  color: var(--muted); text-transform: uppercase;
}
.uo-opp.thinking .uo-opp-sub { color: #7DF2B0; }
.uo-opp.thinking .uo-opp-sub::after {
  content: ""; display: inline-block; margin-left: 4px; vertical-align: 1px;
  width: 3px; height: 3px; border-radius: 50%; background: currentColor;
  animation: thinkDot 1s ease-in-out infinite;
}
@keyframes thinkDot { 0%,100% { opacity:.25 } 50% { opacity:1 } }
.host-mark { display: inline-flex; color: #FFDF9E; }
.host-mark svg { width: 11px; height: 11px; }

/* the table — wooden casino rail around a green felt oval */
.uo-table-wrap { position: relative; margin-top: 12px; }
.uo-table {
  position: relative;
  border-radius: 120px;
  padding: 13px;
  background:
    linear-gradient(165deg, #7A4A26 0%, #5A3418 38%, #3A2110 72%, #2A170B 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,220,160,.4),
    inset 0 -4px 8px rgba(0,0,0,.55),
    0 0 0 2px #1C1008,
    0 20px 44px rgba(0,0,0,.5);
}
.uo-felt {
  position: relative;
  border-radius: 108px;
  padding: 30px 12px 32px;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(85% 60% at 50% 36%, #23755285 0%, transparent 62%),
    radial-gradient(120% 100% at 50% 42%, #1C5B43 0%, #123B2C 58%, #0B2A20 100%);
  box-shadow:
    inset 0 2px 18px rgba(0,0,0,.5),
    inset 0 -8px 20px rgba(0,0,0,.35);
}
/* stitched ring on the felt */
.uo-felt::after {
  content: ''; position: absolute; inset: 10px;
  border-radius: 98px;
  border: 1.5px dashed rgba(255,255,255,.12);
  pointer-events: none;
}
/* felt tint follows the live color (separate layer: safe if color-mix is unsupported) */
.uo-felt::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(62% 52% at 50% 46%,
    color-mix(in srgb, var(--uc, transparent) 13%, transparent), transparent 72%);
  pointer-events: none;
}
/* slow orbit ring shows turn direction (reverses with play) */
.uo-felt-arrows {
  position: absolute; inset: 20px 30px;
  border: 2px dashed rgba(255,255,255,.09);
  border-radius: 50%;
  pointer-events: none;
  animation: uoOrbit 26s linear infinite;
}
.uo-felt-arrows.ccw { animation-direction: reverse; }
@keyframes uoOrbit { to { transform: rotate(360deg); } }
.table-glow {
  position: absolute; left: 50%; top: 50%;
  width: 78%; height: 74%;
  transform: translate(-50%,-50%);
  border-radius: 40px;
  background: radial-gradient(closest-side,
    rgba(255, 196, 60, .13), transparent 72%);
  pointer-events: none;
}


.uo-center {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 170px;
  width: 100%;
}
/* draw pile LEFT, discard RIGHT — like a real table */
.uo-center-inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 9vw, 44px);
  width: 100%;
}
.uo-pile { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.uo-pile-label {
  font-size: 9px; font-weight: 800; letter-spacing: 2.4px;
  color: rgba(235,228,248,.5);
}

/* draw pile — layered card backs with a live count badge */
.uo-deckpile {
  position: relative; width: 84px; height: 122px;
  border-radius: 15px; border: none; padding: 0;
  background: none; cursor: pointer;
  --cw: 84px;
  transition: transform .14s ease;
}
.uo-deckpile:active { transform: scale(.95); }
.uo-deckpile::before {
  content: ""; position: absolute; inset: 0; border-radius: 15px;
  box-shadow:
    3px 3px 0 #17102C, 6px 6px 0 #221A33,
    9px 9px 16px rgba(0,0,0,.5);
}
.uo-deckpile .backface { border-radius: 15px; }
.uo-deck-count {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  z-index: 2;
  min-width: 30px; padding: 2px 8px;
  border-radius: 999px;
  background: #0E161D;
  border: 1.5px solid rgba(255,255,255,.22);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  font-size: 11px; font-weight: 800; color: #FFE7A8;
  text-align: center;
}
.backface {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #2A2A33 0%, #101014 55%, #08080B 100%);
  border: 3px solid #FFFFFF;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.5);
}
/* real-UNO style slanted wordmark */
.backface::after {
  content: 'UNO';
  font-family: var(--font-card, 'Baloo 2', sans-serif);
  font-weight: 800;
  font-style: italic;
  font-size: calc(var(--cw, 64px) * 0.34);
  letter-spacing: -0.02em;
  color: #E0342B;
  transform: rotate(-18deg);
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 3px 8px rgba(0,0,0,.6);
}
.backface .bf-oval,
.backface .bf-stripe { display: none; }
.backface .bf-dot {
  position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%;
  z-index: 1;
}
.backface .d-r { left: 8px;  background: #EF3B3B; }
.backface .d-y { left: 17px; background: #FFC400; }
.backface .d-g { right: 17px; background: #1FBF57; }
.backface .d-b { right: 8px;  background: #2F80ED; }

/* room sound toggle */
.uo-sound {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(235,228,248,.85);
}
.uo-sound:active { transform: scale(.92); }
.uo-sound svg { width: 18px; height: 18px; }

/* direction badge — sits in the gap between the piles, never overlapping */
.uo-dirbadge {
  align-self: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.4);
  border: 1.5px solid rgba(255,223,158,.4);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.4);
}
.uo-dir {
  width: 19px; height: 19px; font-style: normal;
  color: rgba(255,223,158,.95);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  transition: transform .3s ease;
}
.uo-dir svg { width: 100%; height: 100%; display: block; }
.uo-dirbadge.ccw .uo-dir { transform: scaleX(-1); }

/* discard pile — visual focus of the table */
.uo-discard-wrap { position: relative; }
.uo-discard-wrap .ghost {
  position: absolute; inset: 0; border-radius: 13px;
  background: linear-gradient(165deg, #241C38, #14101F);
  border: 2px solid rgba(255,255,255,.35);
}
.uo-discard-wrap .ghost.g1 { transform: rotate(-8deg) translate(-4px, 2px); opacity: .45; }
.uo-discard-wrap .ghost.g2 { transform: rotate(6deg) translate(4px, 1px); opacity: .7; }
.uo-color-ring {
  position: absolute; inset: -9px; border-radius: 16px; z-index: 3;
  border: 3px solid var(--uc, transparent);
  filter: drop-shadow(0 0 9px var(--uc, transparent));
  pointer-events: none;
}
.uo-discard-wrap > .uo-card.sz-lg { position: relative; z-index: 2; }
@keyframes uoPop {
  0% { transform: scale(.72) rotate(-4deg); }
  70% { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.uo-card.pop { animation: uoPop .3s cubic-bezier(.2,1.3,.4,1); }

.uo-effect {
  margin-top: 8px; padding: 7px 10px; border-radius: 11px; text-align: center;
  font-size: 11.5px; font-weight: 700; color: #FFC9CB;
  background: rgba(90,20,26,.35); border: 1px solid rgba(229,72,77,.3);
}

/* ---------- current-user bar ---------- */
.uo-youbar { margin-top: 12px; }
.uo-youbar-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--stroke-strong);
}
.uo-youmeta { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.uo-youname {
  font-size: 12.5px; font-weight: 800; color: var(--text);
  display: inline-flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uo-youcards { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.uo-status {
  font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  text-align: right; color: var(--muted);
}
.uo-status.mine {
  color: #0F2B1C;
  background: linear-gradient(180deg, #7CF2B4, #2FBF7F);
  padding: 6px 12px; border-radius: 999px;
  animation: uoPulse 1.6s ease-in-out infinite;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.uo-status [data-countdown].urgent {
  color: #B91C1C;
  animation: uoBlink .6s ease-in-out infinite;
}
@keyframes uoBlink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
}
.uo-status.think { color: #7DF2B0; }
@keyframes uoPulse { 0%,100% { box-shadow: 0 0 0 rgba(124,242,180,0);} 50% { box-shadow: 0 0 16px rgba(124,242,180,.5);} }

/* ---------- actions ---------- */
.uo-actions { display: flex; gap: 10px; margin-top: 4px; justify-content: flex-end; align-items: center; }
.uo-actions .grow { flex: 1; }
.uo-btn {
  flex: 1; padding: 13px 0; border-radius: 16px; text-align: center;
  font-size: 14px; font-weight: 800; letter-spacing: 1.2px; color: #fff;
  transition: transform .12s ease, opacity .15s ease;
}
.uo-btn:active { transform: scale(.97); }
.uo-btn[disabled] { opacity: .45; }
.uo-btn.draw {
  background: linear-gradient(135deg, #6C8CFF, #3050D8);
  box-shadow: 0 8px 18px rgba(48,80,216,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.uo-btn.pass {
  background: linear-gradient(135deg, #FFB35C, #E07A0C);
  box-shadow: 0 8px 18px rgba(224,122,12,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.uo-btn.chat {
  flex: 0 0 54px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--stroke-strong);
  color: var(--gold); position: relative;
}
.uo-btn.chat svg { width: 20px; height: 20px; }
.uo-chat-dot {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  border-radius: 999px; padding: 0 4px; display: grid; place-items: center;
  background: #EF3B42; color: #fff; font-size: 9.5px; font-weight: 800;
}

/* ---------- chat ---------- */
.uo-chat-box { display: flex; flex-direction: column; height: 56vh; }
.uo-chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.uo-msg {
  max-width: 82%; padding: 7px 11px; border-radius: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(240,236,250,.92);
  font-size: 12.5px; line-height: 1.35; word-break: break-word;
}
.uo-msg.mine { align-self: flex-end; background: rgba(var(--accent-rgb),.16); border-color: rgba(var(--accent-rgb),.4); }
.uo-msg b { font-size: 10.5px; color: #FFDF9E; display: block; margin-bottom: 1px; }
.uo-chat-input { display: flex; gap: 8px; margin-top: 10px; }
.uo-chat-input input {
  flex: 1; padding: 11px 13px; border-radius: 13px;
  background: var(--card-2); border: 1px solid var(--stroke-strong);
  color: var(--text); font-size: 13px; outline: none;
}
.uo-chat-input button {
  flex-shrink: 0; padding: 0 16px; border-radius: 13px;
  background: var(--gradient); color: var(--on-accent); font-weight: 800; font-size: 13px;
}

/* ---------- wild color picker ---------- */
.uo-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.uo-pick {
  aspect-ratio: 1; border-radius: 16px;
  border: 3px solid rgba(255,255,255,.9);
  transition: transform .12s ease;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.35),
    inset 0 -6px 10px rgba(0,0,0,.28),
    0 8px 16px rgba(0,0,0,.4);
}
.uo-pick:active { transform: scale(.9); }
.uo-pick.r { background: linear-gradient(160deg,#FF8A8E,#D31A24); }
.uo-pick.y { background: linear-gradient(160deg,#FFE084,#E8A400); }
.uo-pick.g { background: linear-gradient(160deg,#7CEAB2,#149356); }
.uo-pick.b { background: linear-gradient(160deg,#9DB2FF,#2E4BD8); }

/* ---------- result ---------- */
.uo-result { text-align: center; padding: 8px 4px 4px; }
.uo-res-badge {
  display: inline-grid; place-items: center; width: 88px; height: 88px;
  border-radius: 50%; color: #FFE7A8;
  background: radial-gradient(circle at 34% 28%, #2E2154, #17102C);
  border: 2.5px solid #FFE7A8;
  box-shadow: 0 0 26px rgba(255,214,120,.3);
}
.uo-res-badge svg { width: 40px; height: 40px; }
.uo-res-badge.win {
  color: #FFF3C9;
  box-shadow: 0 0 34px rgba(255,214,120,.55);
}
.uo-result h2 { margin-top: 14px; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.uo-result p { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* ---------- lobby code input ---------- */
.uo-code-input {
  width: 100%; padding: 14px;
  border-radius: 15px;
  background: var(--card-2);
  border: 2px solid var(--stroke-strong);
  color: var(--text);
  font-size: 24px; font-weight: 800; letter-spacing: 10px;
  text-align: center; text-transform: uppercase;
  outline: none; caret-color: var(--gold);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.uo-code-input:focus {
  border-color: #FFE7A8;
  box-shadow: 0 0 0 3px rgba(255,231,168,.18), 0 0 18px rgba(245,185,62,.25);
}
.uo-code-input.err {
  border-color: #EF3B42;
  box-shadow: 0 0 0 3px rgba(239,59,66,.16);
  animation: uoShake .4s ease;
}
@keyframes uoShake {
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.sheet.shake { animation: uoShake .35s ease; }

@media (max-width: 350px) {
  .uo-card { --cw: 50px; --ch: 73px; --rad: 9px; --numsize: 25px; }
  .uo-card.sz-lg { --cw: 66px; --ch: 96px; --numsize: 34px; }
  .uo-hand .uo-card + .uo-card { margin-left: -20px; }
  .uo-center-inner { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .uo-hand .uo-card.dealt,
  .uo-card.pop,
  .uo-status.mine,
  .uo-opp.turn::after { animation: none !important; }
  .uo-fly { display: none !important; }
}