/* ==========================================================================
   Uno – eigene Kartengestaltung, Fächer, Farbring
   ========================================================================== */
.uo, .uc, .uo-colors { --r: #c8372d; --y: #dea127; --g: #3d8b4a; --b: #2f63a8; --k: #231c18; }
.uo {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 12px; overflow: hidden; }
.uo.table { display: grid; grid-template-rows: auto 1fr; padding: 8px 24px 20px; gap: 14px; }

/* ---------- Karte ---------- */
.uc { --c: var(--k); --w: 70px; position: relative; flex: none; width: var(--w); aspect-ratio: 5 / 7.4; border-radius: calc(var(--w) * .1); container-type: inline-size;
  background: var(--grain), #fbf6ea; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 3px 6px rgba(0, 0, 0, .35), 0 10px 16px -8px rgba(0, 0, 0, .5);
  transition: transform .22s var(--spring), box-shadow .2s, opacity .2s; }
.uc::before { content: ""; position: absolute; inset: 6cqw; border-radius: 7cqw; background: var(--grain), var(--c); }
.uc.r { --c: var(--r); } .uc.y { --c: var(--y); } .uc.g { --c: var(--g); } .uc.b { --c: var(--b); } .uc.k { --c: var(--k); }
.uc .ov { position: absolute; left: 50%; top: 50%; width: 70cqw; height: 104cqw; transform: translate(-50%, -50%) rotate(28deg); border-radius: 50%; background: #fbf6ea; }
.uc .sym.plus, .uc .ix.plus { font-family: var(--text); font-weight: 800; letter-spacing: -.06em; }
.uc .sym.plus { font-size: 36cqw; }
.uc .sym { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c); font: 900 44cqw/1 var(--display); font-variation-settings: "opsz" 144, "SOFT" 0; letter-spacing: -.04em; text-shadow: 1.5cqw 1.5cqw 0 rgba(0, 0, 0, .18); }
.uc .sym svg { width: 52cqw; height: 52cqw; filter: drop-shadow(1.5cqw 1.5cqw 0 rgba(0, 0, 0, .18)); }
.uc .ix { position: absolute; color: #fbf6ea; font: 900 17cqw/1 var(--display); }
.uc .ix svg { width: 17cqw; height: 17cqw; }
.uc .i1 { top: 11cqw; left: 12cqw; } .uc .i2 { bottom: 11cqw; right: 12cqw; transform: rotate(180deg); }
.uc.k .ov { background: conic-gradient(var(--r) 0 25%, var(--b) 0 50%, var(--y) 0 75%, var(--g) 0); box-shadow: inset 0 0 0 3cqw #fbf6ea; }
.uc.k .sym { color: #fbf6ea; }
.uc.k.chosen-r::before { box-shadow: inset 0 0 0 4cqw var(--r); } .uc.k.chosen-y::before { box-shadow: inset 0 0 0 4cqw var(--y); }
.uc.k.chosen-g::before { box-shadow: inset 0 0 0 4cqw var(--g); } .uc.k.chosen-b::before { box-shadow: inset 0 0 0 4cqw var(--b); }
.uc.back::before { background: var(--grain), repeating-linear-gradient(45deg, rgba(251, 246, 234, .06) 0 2px, transparent 2px 7cqw), #231c18; }
.uc.back .ov { background: var(--r); transform: translate(-50%, -50%) rotate(-28deg); width: 62cqw; height: 96cqw; box-shadow: 0 0 0 2cqw #fbf6ea; }
.uc.back .sym { color: #f4d06a; font-size: 24cqw; transform: rotate(-28deg); text-shadow: 1cqw 1.5cqw 0 rgba(0, 0, 0, .35); }

/* ---------- Spieler ---------- */
.uo-rail { margin: 0 -6px; }
.rail-chip .unob { margin-left: 5px; padding: 2px 5px; border-radius: 4px; background: var(--r); color: #fff; font: 800 9px var(--text); letter-spacing: .1em; vertical-align: 2px; }

/* ---------- Tischmitte ---------- */
.uo-center { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; }
.uo-pile { position: relative; }
.uo-pile .uc { --w: clamp(74px, 22vw, 104px); }
.uo-deck .uc:nth-child(1) { position: absolute; transform: translate(4px, 4px) rotate(3deg); }
.uo-deck .uc:nth-child(2) { position: absolute; transform: translate(2px, 2px) rotate(1.5deg); }
.uo-deck .uc:nth-child(3) { position: relative; }
.uo-deck.can .uc:nth-child(3) { cursor: pointer; box-shadow: 0 0 0 3px var(--mustard), 0 10px 16px -6px rgba(0, 0, 0, .6); animation: uoNudge 1.6s ease-in-out infinite; }
@keyframes uoNudge { 50% { transform: translateY(-4px) rotate(-1deg); } }
.uo-disc { position: relative; display: grid; place-items: center; }
.uo-disc .ring { position: absolute; inset: -18px; border-radius: 50%; border: 6px solid var(--cc, var(--k)); opacity: .9; box-shadow: 0 0 0 2px rgba(0, 0, 0, .2), 0 0 26px color-mix(in srgb, var(--cc, #000) 50%, transparent); transition: border-color .4s; }
.uo-disc .ring.pulse { animation: uoPulse .6s var(--ease); }
@keyframes uoPulse { from { transform: scale(.82); opacity: .2; } }
.uo-dir { position: absolute; width: 230px; height: 230px; pointer-events: none; opacity: .35; transition: transform .6s var(--ease); }
.uo-dir.rev { transform: scaleX(-1); }
.uo-dir svg { width: 100%; height: 100%; animation: uoSpin 14s linear infinite; }
.uo-dir.rev svg { animation-direction: reverse; }
@keyframes uoSpin { to { transform: rotate(360deg); } }
.uo-penalty { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-4deg); z-index: 4; padding: 4px 10px; border-radius: 6px; background: var(--grain), var(--red); color: #fff; font: 800 18px var(--display); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); animation: popIn .4s var(--spring); }


.uo-btns { flex: none; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 44px; }
.uo-btns .btn { flex: 1 1 120px; max-width: 220px; }
.uo-btns .btn .av { --s: 24px; }
.btn.unobtn { --bg: var(--red); --fg: #fff6ea; --edge: var(--red-d); font-family: var(--display); font-size: 19px; letter-spacing: .06em; }
.btn.unobtn.big { animation: uoShout .8s ease-in-out infinite; }
@keyframes uoShout { 50% { transform: scale(1.06) rotate(-2deg); } }

/* ---------- Hand ---------- */
.uo-hand { flex: none; position: relative; --hw: min(92px, 23vw); overflow: visible; padding: 26px 10px 6px; }
.uo-fan { display: flex; justify-content: center; touch-action: none; }
.uo-fan .uc { --w: var(--hw); cursor: default; transform: translateY(var(--arc, 0)) rotate(var(--rot, 0)); transform-origin: 50% 120%; touch-action: none; }
.uo-fan .uc.ok { cursor: pointer; transform: translateY(calc(var(--arc, 0px) - 16px)) rotate(var(--rot, 0)); box-shadow: 0 0 0 2.5px var(--mustard), 0 14px 18px -8px rgba(0, 0, 0, .7); }
.uo-fan .uc.ok:hover { transform: translateY(calc(var(--arc, 0px) - 26px)) rotate(var(--rot, 0)); z-index: 50 !important; }
.uo-fan .uc.dim { filter: brightness(.8) saturate(.7); }
.uo-fan .uc.deal { animation: fxDeal .5s var(--spring) backwards; }
.uo-fan .uc.new { box-shadow: 0 0 0 2.5px #fbf6ea, 0 0 0 5px var(--teal), 0 14px 18px -8px rgba(0, 0, 0, .7); }
.uo-disc.drop-ok { outline: none; } .uo-disc.drop-ok .ring { border-style: dashed; } .uo-disc.drop-hover .ring { transform: scale(1.12); }

/* Farbwahl */
.uo-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.uo-colors button { aspect-ratio: 1.6; border: 0; border-radius: 12px; cursor: pointer; font: 800 18px var(--display); color: #fff; background: var(--grain), var(--cc); box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 10px 18px -8px rgba(0, 0, 0, .5); transition: transform .2s var(--spring); }
.uo-colors button:hover { transform: translateY(-3px) rotate(-1deg); }

/* Rufe */
.uo-shout { position: fixed; left: 50%; top: 38%; z-index: 65; transform: translate(-50%, -50%); pointer-events: none; display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 10px; color: #fff6ea; background: var(--grain), var(--red); font: 900 42px/1 var(--display); letter-spacing: .04em; box-shadow: var(--shadow-2); animation: uoShoutIn 1.6s var(--ease) forwards; }
.uo-shout .av { --s: 54px; }
.uo-shout.caught { background: var(--grain), var(--ink); font-size: 30px; }
@keyframes uoShoutIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-12deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); } 30% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -64%) rotate(-3deg); } }

/* ---------- Tisch ---------- */
.uo-backs { display: flex; margin-left: 4px; }
.uo-backs i { width: 10px; height: 15px; border-radius: 2px; background: #231c18; box-shadow: inset 0 0 0 1px #fbf6ea; margin-left: -5px; transform: rotate(calc(var(--k) * 4deg - 8deg)); }
.uo.table .uo-backs i { width: 16px; height: 24px; margin-left: -9px; }
.uo.table .uo-pile .uc { --w: clamp(120px, 13vw, 190px); }
.uo.table .uo-dir { width: min(56vh, 520px); height: min(56vh, 520px); }

@media (max-height: 700px) { .uo-pile .uc { --w: 74px; } .uo-hand { --hw: min(80px, 22vw); } .uo-dir { width: 180px; height: 180px; } }