/* =====================================================================
   Дурак — one dark graphite cloth card table. Everything (opponents, deck,
   discard, table cards, my hand) is absolutely placed on the felt.
   The felt is a size container: every size and band is derived from its
   own width/height (cqw/cqh), so it fits anything from ~450px to 900px tall
   without overflowing or scrolling.
   ===================================================================== */
.g-durak:not(.dk-fx) {
  container-type: size;
  /* bands & sizes (resolved on descendants, relative to this felt) */
  --c1: clamp(50px, 10cqh, 76px);                                   /* centre line of the top opponents */
  --hw: clamp(56px, min(21cqw, 15.5cqh), 100px);                   /* my hand card width               */
  --hh: calc(var(--hw) * 1.42 + 34px);                             /* hand band height                 */
  --zb: calc(var(--hh) + 40px);                                    /* table zone bottom (from bottom)  */
  --tz: calc(var(--c1) + 50px);                                    /* table zone top                   */
  /* table card: three beaten pairs must fit between the deck (left) and the discard pile (right) */
  --tw: clamp(34px, min(16.5cqw, (100cqw - var(--dw) * 1.35 - var(--pw) * 1.05 - 20px) / 4.14, (100cqh - var(--tz) - var(--zb) - 18px) / 3.36), 72px);
  --dw: clamp(38px, min(14cqw, 9.5cqh), 62px);                     /* deck card width                  */
  --pw: calc(var(--dw) * .88);                                     /* discard card width               */
  --fw: clamp(22px, min(7.5cqw, 5.5cqh), 32px);                    /* opponent fan card                */
  --dy: calc(var(--tz) + (100cqh - var(--tz) - var(--zb)) / 2 - 12px); /* deck / discard centre line   */

  position: relative; width: calc(100% + 28px); height: 600px; margin: -14px;
  border-radius: 20px; overflow: hidden; isolation: isolate;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .035) 0 1px, transparent 1px 4px),
    radial-gradient(60% 40% at 50% 46%, rgba(240, 24, 64, .05), transparent 70%),
    radial-gradient(125% 95% at 50% 46%, #232327 0%, #1c1c20 45%, #161618 75%, #121214 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 80px 10px rgba(0, 0, 0, .55);
}
/* side opponents sit lower on the arc, so the table starts below them */
.g-durak[data-n="3"], .g-durak[data-n="4"], .g-durak[data-n="5"] { --tz: calc(var(--c1) + 84px); }
.g-durak .dk-probe { position: absolute; left: 0; top: 0; width: var(--tw); height: 0; visibility: hidden; pointer-events: none; }

/* ---------- deck (left edge, half off-table) + trump pill ---------- */
.g-durak .dk-deckpos {
  position: absolute; z-index: 1; left: calc(var(--dw) * -.55); top: var(--dy); transform: translateY(-50%);
  width: calc(var(--dw) * 1.42); height: var(--dw);
}
.g-durak .dk-deck { position: absolute; inset: 0; z-index: 2; }
.g-durak .dk-dl { position: absolute; left: calc(50% - var(--dw) / 2); top: calc(50% - var(--dw) * .71); transform: translate(calc(var(--k) * -1.6px), calc(var(--k) * -1.6px)) rotate(90deg); }
.g-durak .dk-dl .pc3, .g-durak .dk-trump .pc3 { --cw: var(--dw); }
.g-durak .dk-dl .pc3-back { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 3px rgba(0, 0, 0, .35); }
.g-durak .dk-trump { position: absolute; z-index: 1; left: calc(var(--dw) * .98); top: calc(50% - var(--dw) * .71); }
.g-durak .dk-trump .pc3-face { box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.g-durak .dk-dcount {
  position: absolute; z-index: 3; left: calc(var(--dw) * .98); top: 50%; transform: translate(-50%, -50%);
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .72); color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.g-durak .dk-tpill {
  position: absolute; z-index: 3; left: 5px; top: calc(var(--dy) + var(--dw) * .71 + 8px);
  display: flex; flex-direction: column; align-items: center; gap: 1px; width: 46px; padding: 4px 0 5px; border-radius: 12px;
  background: rgba(0, 0, 0, .62); color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 700; line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.g-durak .dk-tpill b { font: 400 22px/1 system-ui, sans-serif; color: #fff; }
.g-durak .dk-tpill b.r { color: #ff4d63; }
.g-durak[data-deck="0"] .dk-tpill { top: var(--dy); transform: translateY(-50%); }

/* ---------- discard (right edge, messy pile) ---------- */
.g-durak .dk-discard {
  position: absolute; z-index: 1; right: calc(var(--pw) * -.42); top: var(--dy); transform: translateY(-50%);
  width: var(--pw); height: calc(var(--pw) * 1.42);
}
.g-durak .dk-pl { position: absolute; inset: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.g-durak .dk-pl .pc3 { --cw: var(--pw); }
.g-durak .dk-pl .pc3-back { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 4px rgba(0, 0, 0, .35); }

/* ---------- table cards ---------- */
.g-durak .dk-zone {
  position: absolute; z-index: 2; left: calc(var(--dw) * 1.35); right: calc(var(--pw) * 1.05); top: var(--tz); bottom: var(--zb);
  display: flex; align-items: center; justify-content: center; border-radius: 18px;
  transition: background .2s, box-shadow .2s;
}
.g-durak .dk-zone.drop, .g-durak .dk-zone.target { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 2px rgba(255, 226, 130, .3); }
.g-durak .dk-zone.drop.hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 2px rgba(255, 226, 130, .65); }
.g-durak .dk-pairs {
  --gap: 10px;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px var(--gap);
  max-width: calc(var(--tw) * 1.24 * 3 + var(--gap) * 2 + 1px);
}
.g-durak .dk-pair { position: relative; width: calc(var(--tw) * 1.24); height: calc(var(--tw) * 1.42 * 1.18 + 4px); }
.g-durak .dk-pair .pc3 { --cw: var(--tw); }
.g-durak .dk-att { position: absolute; left: 0; top: 0; }
.g-durak .dk-def { position: absolute; z-index: 2; left: calc(var(--tw) * .18); top: calc(var(--tw) * 1.42 * .18); transform: rotate(12deg); }
.g-durak .dk-pair .pc3-face { box-shadow: 0 3px 8px rgba(0, 0, 0, .35); transition: box-shadow .2s; }
.g-durak .dk-pair.canbeat { cursor: pointer; }
.g-durak .dk-pair.canbeat .dk-att .pc3-face { box-shadow: 0 0 0 2px rgba(255, 214, 90, .75), 0 0 14px rgba(255, 214, 90, .35); }
.g-durak .dk-pair.drop .dk-att .pc3-face, .g-durak .dk-pair.target .dk-att .pc3-face { box-shadow: 0 0 0 3px rgba(255, 214, 90, .95), 0 0 18px rgba(255, 214, 90, .5); }
.g-durak .dk-pair.hover .dk-att .pc3-face { box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(255, 255, 255, .55); }
.g-durak .dk-pair.picked .dk-att .pc3-face { box-shadow: 0 0 0 3px #fff; }
.g-durak .dk-end {
  padding: 10px 20px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 18px; font-weight: 800; white-space: nowrap; animation: dkPop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* ---------- opponents ---------- */
.g-durak .dk-seat { position: absolute; z-index: 3; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.g-durak .dk-ava { position: relative; z-index: 2; width: 44px; height: 44px; }
.g-durak .dk-ava .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .4); }
.g-durak .dk-seat.out .av, .g-durak .dk-me.out .av { filter: grayscale(1) brightness(.6); }
.g-durak .dk-out {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 10px; font-weight: 800;
}
.g-durak .dk-ribbon {
  position: absolute; z-index: 4; left: 50%; bottom: -7px; transform: translateX(-50%) rotate(-6deg);
  padding: 2px 8px; border-radius: 4px; background: #e0223f; color: #fff; font-size: 10px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4); animation: dkPop .4s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .5s;
}
.g-durak .dk-cnt {
  position: absolute; z-index: 4; right: -7px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; background: #fff; color: #1b1b1d; font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums;
}
.g-durak .dk-name {
  position: absolute; z-index: 3; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  max-width: 90px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-durak .dk-fan { position: absolute; z-index: 1; left: 50%; bottom: 50%; width: 0; height: 0; }
.g-durak .dk-fc { position: absolute; left: calc(var(--fw) * -.5); bottom: 0; transform-origin: 50% 160%; transform: rotate(calc(var(--k) * 11deg)); }
.g-durak .dk-fc .pc3 { --cw: var(--fw); }
.g-durak .dk-fc .pc3-back { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), 0 1px 3px rgba(0, 0, 0, .35); }
.g-durak .dk-fc .pc3-back::after { display: none; }
.g-durak .dk-fan.face .dk-fc { transform: rotate(calc(var(--k) * 13deg)); }
.g-durak .dk-fan.face .pc3 { --cw: calc(var(--fw) * 1.2); }
.g-durak[data-n="4"] .dk-fc, .g-durak[data-n="5"] .dk-fc { transform: rotate(calc(var(--k) * 9deg)); }

/* bright «Ваш ход» / «Ходит» / «Отбивается» pill above whoever must act */
.g-durak .dk-turn {
  position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 6px); translate: -50% 0;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, #ffe46b 0%, #ffbe2e 55%, #f39a0c 100%); color: #3a2200;
  font-size: 13px; font-weight: 800; line-height: 1.2;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .55);
  animation: dkPulse 1.5s ease-in-out infinite;
}
.g-durak .dk-turn.late { animation: dkLabelIn .3s ease-out 1.35s both, dkPulse 1.5s ease-in-out 1.65s infinite; }
/* avatars near the felt edge anchor their label inward so it never clips */
.g-durak .dk-me .dk-turn, .g-durak .dk-seat.el .dk-turn { left: -4px; translate: 0 0; transform-origin: 0 50%; }
.g-durak .dk-seat.er .dk-turn { left: auto; right: -4px; translate: 0 0; transform-origin: 100% 50%; }

/* timer ring around whoever must act */
.g-durak .dk-ring { position: absolute; z-index: 3; inset: -5px; width: 54px; height: 54px; transform: rotate(-90deg); pointer-events: none; }
.g-durak .dk-ring circle { fill: none; stroke-width: 3.5; }
.g-durak .dk-ring .bg { stroke: rgba(0, 0, 0, .35); }
.g-durak .dk-ring .fg {
  stroke: #ffd23f; stroke-linecap: round; stroke-dasharray: 144.5; stroke-dashoffset: 0;
  animation: dkDrain var(--dur) linear var(--del) forwards, dkLow .25s linear var(--low) forwards;
}
@keyframes dkDrain { to { stroke-dashoffset: 144.5; } }
@keyframes dkLow { to { stroke: #ff3b45; } }

/* ---------- me + action buttons (one row just above the hand) ---------- */
/* my avatar and the action button sit in the hand band's empty headroom, clear of the card tops */
.g-durak .dk-me { position: absolute; z-index: 4; left: 12px; bottom: calc(var(--hh) - 12px); width: 44px; height: 44px; }
.g-durak .dk-btns {
  position: absolute; z-index: 6; right: 12px; bottom: calc(var(--hh) - 11px);
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px;
}
.g-durak .dk-act {
  height: 42px; padding: 0 24px; border-radius: 21px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #ffe46b 0%, #ffbe2e 50%, #f39a0c 100%); color: #3a2200;
  font: 800 16px/1 var(--f-text); white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 -3px 0 rgba(170, 85, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .12s ease-out;
}
.g-durak .dk-act:active { transform: scale(.95); }
.g-durak .dk-act.sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 16px; }
.g-durak .dk-act.pop { animation: dkPop .32s cubic-bezier(.34, 1.56, .64, 1) both; }
.g-durak.dk-fx .dk-act-out { position: fixed; display: grid; place-items: center; padding: 0; animation: dkPopOut .22s ease-in forwards; }

/* ---------- my hand: arc fan, big cards, more overlap as it grows ---------- */
.g-durak .dk-hand {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 4px; height: var(--hh);
  --step: min(calc(var(--hw) * .52), calc((100% - var(--hw) - 28px) / var(--nm1)));
}
.g-durak .dk-hc {
  position: absolute; bottom: 12px; left: calc(50% + var(--o) * var(--step)); width: var(--hw); height: calc(var(--hw) * 1.42);
  margin-left: calc(var(--hw) / -2); transform: translateY(var(--drop)) rotate(var(--rot)); transform-origin: 50% 55%;
  touch-action: none;
}
.g-durak .dk-hc .pc3 { --cw: var(--hw); transition: transform .2s cubic-bezier(.2, .75, .25, 1), filter .2s; }
.g-durak .dk-hc .pc3-face { box-shadow: -3px 3px 8px rgba(0, 0, 0, .4); }
.g-durak .dk-hc[data-ok] { cursor: grab; }
.g-durak .dk-hc .pc3.dim { filter: brightness(.55); }
.g-durak .dk-hc .pc3.sel { transform: translateY(-22px); }
.g-durak .dk-hc .pc3.sel .pc3-face { box-shadow: 0 0 0 2px #ffd23f, 0 10px 20px rgba(0, 0, 0, .4); }
.g-durak .dk-hc .pc3.hint { transform: translateY(-12px); }
.g-durak .dk-hc .pc3.hint .pc3-face { box-shadow: 0 0 0 2px #fff, 0 8px 16px rgba(0, 0, 0, .35); }
@media (hover: hover) { .g-durak .dk-hc[data-ok] .pc3:not(.sel):hover { transform: translateY(-10px); } }

/* ---------- reveal helpers ---------- */
.g-durak .dk-wait { visibility: hidden; }
.g-durak .dk-land > .pc3 { animation: dkSettle .22s ease-out; }
.g-durak .dk-fan.dk-land { animation: dkFade .25s ease-out; }

/* ---------- effects layer (appended to <body>) ---------- */
.g-durak.dk-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.g-durak.dk-fx .dk-ghost { position: fixed; z-index: 1; will-change: transform; }
.g-durak.dk-fx .dk-ghost .pc3 { --cw: var(--gw, 50px); }
.g-durak.dk-fx .dk-ghost .pc3-in { transition-duration: .3s; }
.g-durak.dk-fx .dk-ghost .pc3-face { box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.g-durak.dk-fx .dk-drag { z-index: 3; }
.g-durak.dk-fx .dk-drag .pc3-face { box-shadow: 0 16px 30px -6px rgba(0, 0, 0, .55); }
.g-durak.dk-fx .dk-bubble {
  position: fixed; z-index: 4; padding: 7px 12px; border-radius: 14px; background: #fff; color: #17171a;
  font: 800 14px/1 var(--f-text); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  transform-origin: 0 50%; animation: dkBubble 1.8s ease-out forwards;
}
.g-durak.dk-fx .dk-bubble.l { translate: -100% 0; transform-origin: 100% 50%; }
.g-durak.dk-fx .dk-bubble::before {
  content: ""; position: absolute; top: 10px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.g-durak.dk-fx .dk-bubble.r::before { left: -4px; }
.g-durak.dk-fx .dk-bubble.l::before { right: -4px; }
/* centred «Ваш ход» / «Ход …» notice when the acting player changes */
.g-durak.dk-fx .dk-notice {
  position: fixed; z-index: 5; translate: -50% -50%; padding: 13px 26px; border-radius: 999px;
  background: rgba(10, 10, 12, .9); color: #fff; font: 800 19px/1.1 var(--f-text); white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .09);
  animation: dkNotice 1.6s ease-out forwards;
}
.g-durak.dk-fx .dk-notice.mine { color: #ffd54a; }

@keyframes dkPop { from { transform: scale(.4); opacity: 0; } }
@keyframes dkPopOut { to { transform: scale(.4); opacity: 0; } }
@keyframes dkSettle { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes dkFade { from { opacity: 0; } }
@keyframes dkPulse { 50% { transform: scale(1.07); } }
@keyframes dkLabelIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes dkBubble {
  0% { transform: scale(.3); opacity: 0; }
  14% { transform: scale(1.08); opacity: 1; }
  22% { transform: scale(1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.96); opacity: 0; }
}
@keyframes dkNotice {
  0% { transform: scale(.6); opacity: 0; }
  12% { transform: scale(1.06); opacity: 1; }
  20% { transform: scale(1); }
  78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.97); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .g-durak .dk-ring .fg, .g-durak .dk-turn, .g-durak .dk-turn.late { animation: none; }
  .g-durak .dk-act.pop, .g-durak .dk-ribbon, .g-durak .dk-land > .pc3, .g-durak .dk-end { animation: none; }
}