body.durak{--pod-back:#68344d;--dk-face:#fffaf4;--dk-red:#be2a63;--dk-ink:#29231f;--dk-rim:#3a9a76}
.durak:not(.dk-playing) #stage,.durak:not(.dk-playing) #hud{visibility:hidden;pointer-events:none}
.durak .hud [data-chips]{flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow:hidden;font-size:13px;font-weight:700;white-space:nowrap}
.durak .hud [data-chips] span{overflow:hidden;color:var(--color-muted);font-weight:500;text-overflow:ellipsis}

.dk-felt{position:absolute;inset:44px 22px 12px;border:7px solid var(--dk-rim);border-radius:999px;background:#1d372e}
.dk-seats{position:absolute;inset:0;z-index:2;pointer-events:none}
.dk-center{position:absolute;left:50%;top:calc(50% + 22px);z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;transform:translate(-50%,-50%)}
.dk-piles{display:flex;align-items:flex-end;justify-content:space-between;width:196px}
.dk-deck,.dk-bita{position:relative;width:52px;height:76px}
.dk-deck .dk-card,.dk-bita .dk-card{position:absolute;left:0;top:0;width:52px;height:76px}
.dk-deck b,.dk-bita b{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);color:#fff6ef;font-size:11px;font-variant-numeric:tabular-nums;opacity:.8;white-space:nowrap}
/* Козырь лежит под колодой поперёк; когда колода кончилась, остаётся одна масть. */
.dk-trump{position:absolute;left:34px;top:0;width:52px;height:76px;transform:rotate(90deg);transform-origin:50% 50%}
.dk-trump .dk-card{position:static;width:52px;height:76px}
.dk-trump.is-suit{left:0;display:grid;place-items:center;transform:none;border:2px dashed #fff6ef55;border-radius:7px;color:#fff6ef;font-size:26px}
.dk-trump.is-suit.is-red{color:#ff8fc2}
.dk-bita .dk-card:first-child{transform:rotate(-14deg)}
.dk-bita .dk-card:nth-child(2){transform:rotate(9deg) translate(3px,-2px)}
.dk-bita.is-empty .dk-card{visibility:hidden}
.dk-table{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:24px 14px;width:252px;min-height:196px}
.dk-pair{position:relative;width:72px;height:86px}
.dk-pair .dk-card{position:absolute;left:0;top:0;width:58px;height:84px;transform:rotate(-4deg)}
.dk-pair .dk-card.is-def{left:16px;top:14px;transform:rotate(7deg)}
.dk-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}
.dk-say:empty{display:none}

/* Игральная карта: достоинство и масть в углу, крупная масть по центру. */
.dk-card{position:relative;display:block;flex:none;width:56px;height:82px;overflow:hidden;border:1px solid #ddd6ce;border-radius:7px;background:var(--dk-face);color:var(--dk-ink);font-weight:700;line-height:1;user-select:none}
.dk-card.is-red{color:var(--dk-red)}
.dk-card b{position:absolute;left:5px;top:4px;font-size:17px;letter-spacing:-.04em}
.dk-card i{position:absolute;left:5px;top:22px;font-size:13px;font-style:normal}
.dk-card em{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);font-size:30px;font-style:normal}
.dk-card.is-back{background:repeating-linear-gradient(45deg,#68344d,#68344d 3px,#78405a 3px,#78405a 6px);border:3px solid #f7eee4}
.dk-card.is-trump{box-shadow:inset 0 0 0 2px var(--color-warn)}
.dk-pair .dk-card b{font-size:17px}.dk-pair .dk-card i{font-size:13px}.dk-pair .dk-card em{font-size:30px}
.dk-deck .dk-card b,.dk-trump .dk-card b{font-size:14px}.dk-trump .dk-card em{font-size:22px}

.dk-dock{gap:6px}
.dk-dock .tmr{height:10px}
.dk-dock .tmr b{font-size:11px}
.dk-hand{display:flex;justify-content:center;min-height:98px;padding:14px 2px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x}
.dk-hand::-webkit-scrollbar{display:none}
.dk-hand .dk-card{margin-left:var(--gap,4px);padding:0;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform .15s,opacity .15s}
.dk-hand .dk-card:first-child{margin-left:0}
.dk-hand .dk-card.can{transform:translateY(-12px)}
.dk-hand.is-mine .dk-card:not(.can){opacity:.45}
.dk-hand .dk-card.is-new{animation:dk-new .35s cubic-bezier(.2,1.4,.4,1) both}
.dk-hand.is-dealing .dk-card{visibility:hidden}
@keyframes dk-new{from{opacity:0;transform:translateY(22px) scale(.8)}}
.dk-act{min-height:46px;margin:0 3px 3px 0;font-size:14px;font-weight:700;color:var(--color-ink)}
.dk-act.primary{color:var(--color-on-ink)}

.dk-pick{position:absolute;left:50%;bottom:54px;z-index:6;display:flex;gap:8px;padding:10px;transform:translateX(-50%);border:1px solid var(--color-line);border-radius:var(--radius-2xl);background:var(--color-surface)}

@media(max-width:360px){
  .dk-felt{inset:42px 14px 10px}
  .dk-hand .dk-card{width:50px;height:74px}
  .dk-table{width:226px;gap:20px 8px}.dk-pair{width:66px;height:80px}.dk-pair .dk-card{width:52px;height:76px}.dk-piles{width:180px}
}
@media(max-height:700px) and (orientation:portrait){
  .dk-hand{min-height:88px;padding-top:12px}.dk-hand .dk-card{width:48px;height:70px}.dk-hand .dk-card em{font-size:25px}
  .dk-center{gap:12px}.dk-table{min-height:150px;gap:14px 10px}.dk-pair{width:60px;height:70px}.dk-pair .dk-card{width:48px;height:68px}.dk-pair .dk-card.is-def{left:12px;top:10px}.dk-pair .dk-card em{font-size:24px}
  .dk-act{min-height:42px}
}
@media(max-height:540px) and (min-width:600px){
  .dk-felt{inset:40px 60px 10px}
  .dk-center{flex-direction:row;gap:26px;top:calc(50% + 14px)}.dk-piles{flex-direction:column;align-items:center;gap:30px;width:auto}
  .dk-hand{flex-wrap:wrap;min-height:0;overflow:visible;padding-top:10px}.dk-hand .dk-card{width:44px;height:64px;margin:0 2px 4px}.dk-hand .dk-card em{font-size:22px}.dk-hand .dk-card.can{transform:translateY(-5px)}
}
@media(prefers-reduced-motion:reduce){.dk-hand .dk-card{transition:none}.dk-hand .dk-card.is-new{animation:none}}