body.uno{--pod-back:#1d1a17;--uno-r:#e5484d;--uno-y:#f0b100;--uno-g:#2f9e61;--uno-b:#3273c8;--uno-w:#1d1a17;--uno-face:#fffaf4}
.uno:not(.uno-playing) #stage,.uno:not(.uno-playing) #hud{visibility:hidden;pointer-events:none}
.uno .hud [data-chips]{flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow:hidden;font-size:13px;font-weight:700;white-space:nowrap}
.uno .hud [data-chips] span{overflow:hidden;color:var(--color-muted);font-weight:500;text-overflow:ellipsis}

/* Стол: цвет борта и оттенок сукна — действующий цвет партии. */
.uno-scene{--rim:var(--uno-r)}
.uno-scene[data-color=y]{--rim:var(--uno-y)}
.uno-scene[data-color=g]{--rim:var(--uno-g)}
.uno-scene[data-color=b]{--rim:var(--uno-b)}
.uno-felt{position:absolute;inset:44px 22px 12px;overflow:hidden;border:7px solid var(--rim);border-radius:999px;background:color-mix(in srgb,var(--rim) 16%,#26221f);transition:border-color .35s,background-color .35s}
.uno-wash{position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;margin:-130% 0 0 -130%;border-radius:50%;opacity:0;pointer-events:none}
.uno-ring{position:absolute;left:50%;top:calc(50% + 16px);width:min(58%,240px);height:min(52%,280px);transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.uno-ring path{fill:none;stroke:var(--rim);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transform-origin:100px 100px;transition:transform .3s}
.uno-scene[data-dir="-1"] .uno-ring path{transform:scaleY(-1)}
.uno-ring ellipse{fill:none;stroke:var(--rim);stroke-width:3;stroke-linecap:round;stroke-dasharray:3 15;vector-effect:non-scaling-stroke;opacity:.75;animation:uno-ring 1.4s linear infinite}
.uno-scene[data-dir="-1"] .uno-ring ellipse{animation-direction:reverse}
@keyframes uno-ring{to{stroke-dashoffset:-18}}

.uno-seats{position:absolute;inset:0;z-index:2;pointer-events:none}

.uno-center{position:absolute;left:50%;top:calc(50% + 16px);z-index:1;display:flex;align-items:center;gap:22px;transform:translate(-50%,-50%)}
.uno-deck{position:relative;width:68px;height:100px;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation}
.uno-deck .uno-card{position:absolute;left:0;top:0;width:68px;height:100px}
.uno-deck .uno-card:nth-child(1){transform:translate(-4px,4px)}
.uno-deck .uno-card:nth-child(2){transform:translate(-2px,2px)}
.uno-deck b{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);color:#fff6ef;font-size:11px;font-variant-numeric:tabular-nums;opacity:.8}
.uno-deck:disabled{cursor:default}
.uno-deck.is-hot .uno-card:last-of-type{box-shadow:0 0 0 3px var(--color-signal)}
.uno-pile{position:relative;width:86px;height:128px}
.uno-pile .uno-card{position:absolute;inset:0;width:86px;height:128px;border-radius:11px}
.uno-pile .uno-card b{font-size:42px}.uno-pile .uno-card[data-wide] b{font-size:30px}.uno-pile .uno-card em{font-size:14px}
.uno-penalty{position:absolute;left:50%;top:calc(50% - 114px);z-index:2;transform:translate(-50%,-50%);text-align:center;color:#fff6ef;pointer-events:none}
.uno-penalty b{display:block;font-size:34px;font-weight:800;line-height:36px;color:var(--color-signal)}
.uno-penalty small{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.uno-say{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%);width:max-content;max-width:calc(100% - 84px);padding:5px 12px;border-radius:99px;background:#211c19e6;color:#fff6ef;font-size:12px;font-weight:600;line-height:16px;text-align:center;pointer-events:none}
.uno-say:empty{display:none}

/* Карта: цветное поле, светлая фигура масти и тёмное значение. Фигура у каждого цвета своя. */
.uno-card{--c:var(--uno-r);position:relative;display:block;flex:none;width:60px;height:88px;overflow:hidden;border:2px solid color-mix(in srgb,var(--c) 62%,#000);border-radius:9px;background:var(--c);color:var(--uno-w);font-weight:800;line-height:1;user-select:none}
.uno-card[data-c=y]{--c:var(--uno-y)}
.uno-card[data-c=g]{--c:var(--uno-g)}
.uno-card[data-c=b]{--c:var(--uno-b)}
.uno-card[data-c=w]{--c:var(--uno-w);border-color:var(--uno-face);color:var(--uno-face)}
.uno-card::before{content:"";position:absolute;left:50%;top:50%;width:92%;aspect-ratio:.8;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--c) 52%,#fff);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.uno-card[data-c=y]::before{width:86%;aspect-ratio:1;transform:translate(-50%,-58%);clip-path:polygon(50% 4%,100% 92%,0 92%)}
.uno-card[data-c=g]::before{width:70%;aspect-ratio:1;border-radius:16%;clip-path:none}
.uno-card[data-c=b]::before{width:76%;aspect-ratio:1;border-radius:50%;clip-path:none}
.uno-card[data-c=w]::before{content:none}
.uno-card b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:30px;letter-spacing:-.04em}
.uno-card[data-wide] b{font-size:22px}
.uno-card[data-v="6"] b,.uno-card[data-v="9"] b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}
.uno-card[data-v="6"] em,.uno-card[data-v="9"] em{text-decoration:underline}
.uno-card em{position:absolute;left:5px;top:4px;font-size:11px;font-style:normal}
.uno-card em+em{left:auto;top:auto;right:5px;bottom:4px;transform:rotate(180deg)}
.uno-card svg{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.uno-card em svg{position:static;display:block;width:11px;transform:none;stroke-width:3.5}
.uno-card .uno-suits{width:76%;stroke:none}
.uno-card[data-v="+4"] .uno-suits{opacity:.6}
.uno-card[data-c=w] b{text-shadow:0 0 0 var(--uno-w),1.5px 1.5px 0 var(--uno-w),-1.5px -1.5px 0 var(--uno-w),1.5px -1.5px 0 var(--uno-w),-1.5px 1.5px 0 var(--uno-w)}
.uno-card.is-back{--c:var(--uno-w);border-color:var(--uno-face)}
.uno-card.is-back::before{content:"";width:74%;aspect-ratio:.72;transform:translate(-50%,-50%);border-radius:0;background:var(--color-signal-deep);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.uno-card.is-back::after{content:"1";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--uno-face);font-size:150%;font-weight:800}
.uno-card.is-small{border-width:2px;border-radius:6px}

.uno-dock{gap:6px}
.uno-dock .tmr{height:10px}
.uno-dock .tmr b{font-size:11px}
.uno-hand{display:flex;justify-content:center;min-height:104px;padding:14px 2px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x}
.uno-hand::-webkit-scrollbar{display:none}
.uno-hand .uno-card{margin-left:var(--gap,4px);padding:0;font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;transition:transform .15s,opacity .15s}
.uno-hand .uno-card:first-child{margin-left:0}
.uno-hand .uno-card em{font-size:13px}
.uno-hand .uno-card.can{transform:translateY(-12px)}
.uno-hand.is-mine .uno-card:not(.can){opacity:.45}
.uno-hand .uno-card.is-new{animation:uno-new .35s cubic-bezier(.2,1.4,.4,1) both}
.uno-hand.is-dealing .uno-card{visibility:hidden}
@keyframes uno-new{from{opacity:0;transform:translateY(22px) scale(.8)}}
.uno-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:0 3px 3px 0}
.uno-actions .btn{min-height:46px;font-size:14px;font-weight:700;color:var(--color-ink)}
.uno-actions .btn.primary{color:var(--color-on-ink)}
.uno-actions .btn.is-call:not(:disabled){animation:uno-call .7s ease-in-out infinite alternate}
@keyframes uno-call{to{transform:scale(1.04)}}

.uno-pick{position:absolute;left:50%;top:calc(50% + 16px);z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(240px,calc(100% - 60px));padding:14px;transform:translate(-50%,-50%);border:1px solid var(--color-line);border-radius:var(--radius-2xl);background:var(--color-surface)}
.uno-pick p{font-size:14px;font-weight:700}
.uno-pick>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.uno-pick [data-pick]{position:relative;height:62px;border:0;border-radius:var(--radius-xl);cursor:pointer;touch-action:manipulation}
.uno-pick [data-pick]::before{content:"";position:absolute;left:50%;top:50%;height:58%;aspect-ratio:1;transform:translate(-50%,-50%);background:#fff;opacity:.5;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.uno-pick [data-pick=y]::before{clip-path:polygon(50% 4%,100% 92%,0 92%)}
.uno-pick [data-pick=g]::before{height:48%;border-radius:16%;clip-path:none}
.uno-pick [data-pick=b]::before{height:52%;border-radius:50%;clip-path:none}
.uno-pick [data-pick=r]{background:var(--uno-r)}.uno-pick [data-pick=y]{background:var(--uno-y)}.uno-pick [data-pick=g]{background:var(--uno-g)}.uno-pick [data-pick=b]{background:var(--uno-b)}
.uno-pick [data-pick]:active{transform:scale(.95)}

@media(max-width:360px){
  .uno-felt{inset:42px 14px 10px}
  .uno-hand .uno-card{width:54px;height:80px}.uno-hand .uno-card b{font-size:26px}
  .uno-center{gap:14px}
}
@media(max-height:700px) and (orientation:portrait){
  .uno-hand{min-height:92px;padding-top:12px}.uno-hand .uno-card{width:52px;height:76px}.uno-hand .uno-card b{font-size:25px}.uno-hand .uno-card[data-wide] b{font-size:19px}
  .uno-pile,.uno-pile .uno-card{width:66px;height:98px}.uno-pile .uno-card b{font-size:32px}.uno-pile .uno-card[data-wide] b{font-size:24px}.uno-deck,.uno-deck .uno-card{width:52px;height:76px}
  .uno-actions .btn{min-height:42px}
}
@media(max-height:540px) and (min-width:600px){
  .uno-felt{inset:40px 60px 10px}
  .uno-hand{flex-wrap:wrap;min-height:0;overflow:visible;padding-top:10px}.uno-hand .uno-card{width:46px;height:68px;margin:0 2px 4px}.uno-hand .uno-card b{font-size:22px}.uno-hand .uno-card[data-wide] b{font-size:17px}.uno-hand .uno-card.can{transform:translateY(-5px)}
}
@media(prefers-reduced-motion:reduce){.uno-ring ellipse,.uno-actions .btn.is-call,.uno-hand .uno-card.is-new{animation:none}.uno-felt,.uno-hand .uno-card{transition:none}}