/* Кодаркан — стили 3D-колоды (контейнер WebGL + CSS-3D фолбэк). Подключать вместе с deck.js */
.kd-deck{position:relative;width:100%;max-width:680px;height:clamp(360px,112vw,480px);margin:0 auto;
  --kd-gold:#f2c14e;--kd-gold2:#ffdf9e;--kd-muted:#a99fc4;
  --kd-back:radial-gradient(circle at 50% 32%,rgba(242,193,78,.22),transparent 55%),repeating-linear-gradient(45deg,#191238 0 10px,#151030 10px 20px);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:height .55s cubic-bezier(.4,0,.2,1)}
.kd-deck--gl .kd-gl{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:pan-y}
.kd-overlay{position:absolute;inset:0;pointer-events:none}
.kd-label{position:absolute;transform:translateX(-50%);white-space:nowrap;font-size:.85rem;color:var(--kd-muted);
  letter-spacing:.02em;transition:color .4s}
.kd-slot-ghost{position:absolute;border:1.5px dashed rgba(242,193,78,.35);border-radius:9%/5.25%;
  background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;
  color:rgba(242,193,78,.4);font-size:1.6rem;transition:opacity .4s}
.kd-slot-ghost.kd-filled{opacity:0}

/* ---------- CSS-3D фолбэк ---------- */
.kd-deck--css{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:8px 0}
.kd-css-slots{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;perspective:1200px;margin:6px auto 20px}
.kd-slot{width:118px;text-align:center}
.kd-slot .kd-card{position:relative;width:118px;height:202px;border-radius:11px;transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.4,0,.2,1);transform:rotate(var(--rot,0deg))}
.kd-slot.kd-flipped .kd-card{transform:rotate(var(--rot,0deg)) rotateY(180deg)}
.kd-face{position:absolute;inset:0;border-radius:11px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kd-empty{border:1.5px dashed rgba(242,193,78,.35);background:rgba(255,255,255,.02);display:flex;align-items:center;
  justify-content:center;color:rgba(242,193,78,.4);font-size:1.6rem}
.kd-slot .kd-back,.kd-slot .kd-front{display:none}
.kd-slot.kd-has .kd-empty{display:none}
.kd-slot.kd-has .kd-back,.kd-slot.kd-has .kd-front{display:block}
.kd-slot .kd-back{background:var(--kd-back) center/cover no-repeat;border:1.5px solid rgba(242,193,78,.55);
  box-shadow:0 12px 36px rgba(0,0,0,.5);animation:kdPop .45s cubic-bezier(.22,.9,.3,1.3)}
.kd-slot .kd-front{transform:rotateY(180deg);background:#1d1542 center/cover no-repeat;border:1.5px solid var(--kd-gold);
  box-shadow:0 14px 44px rgba(242,193,78,.22)}
/* страховка флипа без честного 3D (как .tcard.flip .tback) */
.kd-slot.kd-flipped .kd-back{opacity:0;transition:opacity .25s .4s}
.kd-slot .kd-label{position:static;transform:none;display:block;margin-top:10px}
.kd-slot.kd-flipped .kd-label{color:var(--kd-gold2)}
@keyframes kdPop{from{transform:translateY(40px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.kd-css-fan{position:relative;height:240px;width:100%;max-width:640px;margin:0 auto;perspective:1200px;transition:opacity .4s}
.kd-css-fan.kd-hidden{opacity:0;pointer-events:none;height:0;overflow:hidden}
.kd-fc{position:absolute;left:50%;top:8%;width:112px;height:192px;margin-left:-56px;border-radius:11px;cursor:pointer;
  transform-origin:50% 118%;transition:transform .4s cubic-bezier(.22,.9,.3,1.3),box-shadow .3s,opacity .4s;
  box-shadow:0 10px 30px rgba(0,0,0,.5);border:1.5px solid rgba(242,193,78,.6);
  background:var(--kd-back) center/cover no-repeat}
.kd-fc:hover{transform:var(--fan) translateY(-24px)!important;box-shadow:0 14px 40px rgba(242,193,78,.35);z-index:60!important}
.kd-fc.kd-used{opacity:0;pointer-events:none}
@media (max-width:420px){
  .kd-slot,.kd-slot .kd-card{width:98px}.kd-slot .kd-card{height:168px}
  .kd-fc{width:96px;height:164px;margin-left:-48px}.kd-css-fan{height:205px}
}
@media (prefers-reduced-motion:reduce){
  .kd-slot .kd-card,.kd-fc,.kd-slot .kd-back,.kd-css-fan{transition:none!important;animation:none!important}
}