/* Игровая карточка (макеты «темы.html», «сочинение.html»): форма игральной,
   раздаётся по одной с прокруткой вокруг оси, переворачивается рубашкой и
   обратно, при наведении увеличивается и покачивается. Лицо — светлое, как на
   макете: на тёмном столе карточка должна читаться предметом, а не панелью. */
.vx-gcard{position:relative;flex:none;perspective:1000px;outline:none;
  animation:vx-gcard-deal .7s cubic-bezier(.2,.9,.3,1.15) backwards;animation-delay:calc(var(--i, 0) * 120ms)}
.vx-gcard--md{width:190px;height:266px}
.vx-gcard--lg{width:210px;height:294px}
.vx-gcard--wide{width:250px;height:200px}
.vx-gcard--mini{width:168px;height:204px}
.vx-gcard--btn{cursor:pointer}
.vx-gcard--btn:focus-visible .vx-gcard__face{box-shadow:var(--ring),0 18px 40px rgba(0,0,0,.45)}
@keyframes vx-gcard-deal{
  from{transform:translateY(-110vh) rotateY(360deg) rotate(-12deg);opacity:0}
  60%{opacity:1}
}

.vx-gcard__hover{position:absolute;inset:0;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.vx-gcard--wobble:hover .vx-gcard__hover{transform:scale(1.07);animation:vx-gcard-wobble 1.6s ease-in-out infinite}
@keyframes vx-gcard-wobble{0%,100%{rotate:0deg}25%{rotate:-2.2deg}75%{rotate:2.2deg}}

.vx-gcard__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.3,.5,1)}
.vx-gcard--flipped .vx-gcard__inner{transform:rotateY(180deg)}

.vx-gcard__face,.vx-gcard__back{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden}
.vx-gcard__face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 20px;text-align:center;
  background:linear-gradient(160deg,var(--warm-050) 0%,var(--amber-200) 140%);color:var(--text-inverse);
  font:800 22px/1.18 var(--font-display);overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:10 4 4;
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.6);transition:box-shadow .25s}
.vx-gcard--lg .vx-gcard__face{font-size:24px}
.vx-gcard__face::after{content:"";position:absolute;inset:8px;border-radius:12px;border:1.5px dashed rgba(201,125,30,.35);pointer-events:none}

/* Рубашка: тёплый тёмный стол, янтарная штриховка, внутренняя рамка и печать
   с микрофоном — спека просила «интереснее, чем на макете». */
.vx-gcard__back{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:
    repeating-linear-gradient(45deg,rgba(245,173,69,.10) 0 9px,transparent 9px 18px),
    radial-gradient(circle at 50% 42%,var(--warm-700),var(--warm-850) 75%);
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
.vx-gcard__back::before{content:"";position:absolute;inset:10px;border-radius:12px;border:2px solid var(--amber-400);opacity:.75;pointer-events:none}
.vx-gcard__seal{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--text-inverse);color:var(--amber-300);box-shadow:0 0 0 5px rgba(245,173,69,.22),0 0 0 6px var(--amber-400)}
.vx-gcard__mark{font:900 17px var(--font-display);color:var(--amber-300);letter-spacing:.3px}

/* Выбрана: янтарная обводка и галочка, всплывающая пружиной. */
.vx-gcard--sel .vx-gcard__face{box-shadow:0 0 0 4px var(--amber-400),0 0 34px rgba(245,173,69,.55),0 18px 40px rgba(0,0,0,.45)}
.vx-gcard__check{position:absolute;top:-12px;right:-12px;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber-400);color:var(--text-inverse);box-shadow:0 4px 14px rgba(0,0,0,.4);
  animation:vx-gcard-pop .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes vx-gcard-pop{from{transform:scale(0)}}

.vx-gcard--dim{opacity:.45;filter:saturate(.6)}

/* Последние секунды шага: обводка пульсирует красным раз в секунду. */
.vx-gcard--alarm .vx-gcard__face{animation:vx-gcard-alarm 1s ease-in-out infinite}
@keyframes vx-gcard-alarm{50%{box-shadow:0 0 0 4px rgba(255,92,72,.85),0 0 50px rgba(255,92,72,.45),0 18px 40px rgba(0,0,0,.45)}}

@media (prefers-reduced-motion:reduce){
  .vx-gcard,.vx-gcard__check,.vx-gcard--alarm .vx-gcard__face{animation:none}
  .vx-gcard--wobble:hover .vx-gcard__hover{animation:none}
  .vx-gcard__inner,.vx-gcard__hover{transition:none}
}

/* Карточка реплики на голосовании (макет «.cand»): плашка роли сверху, текст слева. */
.vx-gcard--wide .vx-gcard__face{align-items:stretch;justify-content:flex-start;text-align:left;padding:16px 18px;font-size:19px}
/* Свой оборот — без кольца рубашки: на нём автор, а не печать. */
.vx-gcard__back--custom::before{display:none}
.vx-gcard__back--custom{padding:16px;text-align:center;gap:10px}

/* Плашка роли и текст реплики — общие для голосования и вскрытия. */
.vx-bl__role{align-self:flex-start;font:900 11px var(--font-display);letter-spacing:1px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:var(--text-inverse)}
.vx-bl__text{flex:1;display:flex;align-items:center;font:800 19px/1.25 var(--font-display);margin-top:6px;overflow-wrap:anywhere}

/* Лицо игрока в игре: аватар с рамкой или буквы на цвете игрока. */
.vx-pface{display:inline-grid;place-items:center;width:var(--pf);height:var(--pf);flex:none}
.vx-pface__img,.vx-pface__letter{width:var(--pf);height:var(--pf);border-radius:50%;display:grid;place-items:center;object-fit:cover}
.vx-pface__letter{background:var(--c);color:var(--text-inverse);font:900 calc(var(--pf) * .42) var(--font-display);user-select:none}
/* Карточка игрока («Лучший дубляж»): вместо бумаги — тёмная плашка, а фон его мини-профиля — полоской
   сверху, под аватаром. На всю карточку его не тянем: картинка широкая и низкая, в рост она расплывается. */
.vx-gcard--player .vx-gcard__face{justify-content:flex-start;gap:8px;padding:18px 12px 14px;color:var(--warm-050);isolation:isolate;
  background:linear-gradient(160deg,var(--warm-700),var(--warm-800));
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.18)}
.vx-gcard--player .vx-gcard__face::before{content:"";position:absolute;inset:1px 1px auto;height:54px;z-index:-1;border-radius:17px 17px 0 0;
  background:linear-gradient(rgba(20,17,16,0),rgba(20,17,16,.35)),var(--card-img, linear-gradient(120deg,var(--warm-600),var(--warm-700))) center/cover}
.vx-gcard--player .vx-gcard__face::after{display:none}