/* Панель игроков у левого края игровых экранов (Game/PlayerPanel, PlayerTile).
   Плитка — фон купленной карточки с подсветкой по редкости, аватар с рамкой,
   отметка шага у края. Имя — в подсказке справа. */
.vx-ppanel{display:flex;flex-direction:column;gap:14px;padding:14px 12px;border-radius:26px;
  background:rgba(27,23,21,.88);border:1px solid var(--border-1);box-shadow:0 20px 50px rgba(0,0,0,.5);
  max-height:calc(100dvh - 220px);overflow-y:auto;overflow-x:visible;scrollbar-width:none;
  animation:vx-ppanel-in .6s cubic-bezier(.3,1.3,.5,1) backwards}
.vx-ppanel::-webkit-scrollbar{display:none}
@keyframes vx-ppanel-in{from{translate:-140% 0}}

.vx-ptile{position:relative;flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);animation:vx-ptile-in .5s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes vx-ptile-in{from{transform:scale(0) rotate(-20deg)}}
.vx-ptile:focus-visible{box-shadow:var(--ring)}
.vx-ptile__bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(rgba(20,17,16,.3),rgba(20,17,16,.3)),var(--card-img, linear-gradient(120deg,var(--warm-800),var(--warm-700))) center/cover}
.vx-ptile--rare{box-shadow:0 0 0 2px color-mix(in srgb,var(--rarity-rare) 60%,transparent)}
.vx-ptile--epic{box-shadow:0 0 0 2px color-mix(in srgb,var(--rarity-epic) 80%,transparent),0 0 14px color-mix(in srgb,var(--rarity-epic) 30%,transparent)}
.vx-ptile--legendary{box-shadow:0 0 0 2px color-mix(in srgb,var(--rarity-legendary) 85%,transparent),0 0 16px color-mix(in srgb,var(--rarity-legendary) 35%,transparent)}
.vx-ptile--off .vx-ptile__av{opacity:.5}

.vx-ptile__av{position:relative;display:inline-flex;z-index:1}
.vx-ptile__img,.vx-ptile__letter{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.vx-ptile__img{box-shadow:0 0 0 2px var(--player-ring),0 4px 10px rgba(0,0,0,.4)}
.vx-frame .vx-ptile__img{box-shadow:0 4px 10px rgba(0,0,0,.4)}
.vx-ptile__img img{width:100%;height:100%;object-fit:cover}
.vx-ptile__letter{font:900 16px var(--font-display);color:var(--text-inverse)}

.vx-ptile__host{position:absolute;left:-7px;top:-8px;z-index:2;font:900 9px/1 var(--font-display);letter-spacing:.5px;text-transform:uppercase;
  background:var(--text-inverse);color:var(--amber-300);padding:3px 5px;border-radius:999px}

/* Счётчик взятых реплик: новый номер — новый элемент, и он подпрыгивает. */
.vx-ptile__cnt{position:absolute;right:-7px;bottom:-7px;z-index:2;min-width:24px;height:24px;padding:0 6px;border-radius:999px;
  background:var(--warm-700);color:var(--text-2);font:900 12px/24px var(--font-display);text-align:center;
  box-shadow:0 0 0 3px rgba(27,23,21,.95);animation:vx-ptile-bump .45s cubic-bezier(.3,1.8,.5,1)}
.vx-ptile__cnt--has{background:var(--amber-400);color:var(--text-inverse)}
@keyframes vx-ptile-bump{40%{transform:scale(1.5)}}

/* Кольцо прогресса записи. */
.vx-ptile__ring{position:absolute;width:58px;height:58px;z-index:1;rotate:-90deg;pointer-events:none;
  animation:vx-ptile-ring .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes vx-ptile-ring{40%{scale:1.15}}
.vx-ptile__track,.vx-ptile__arc{fill:none;stroke-width:4}
.vx-ptile__track{stroke:rgba(255,255,255,.14)}
.vx-ptile__arc{stroke:var(--amber-400);stroke-linecap:round;stroke-dasharray:157.08;transition:stroke-dashoffset .6s cubic-bezier(.3,1.2,.5,1)}
.vx-ptile--ready .vx-ptile__arc{stroke:var(--status-ready)}
.vx-ptile__cap{position:absolute;bottom:-8px;left:50%;translate:-50% 0;z-index:2;font:900 10px/16px var(--font-display);padding:0 6px;border-radius:999px;
  background:var(--warm-700);color:var(--text-2);box-shadow:0 0 0 3px rgba(27,23,21,.95);white-space:nowrap}
.vx-ptile--ready .vx-ptile__cap{background:var(--status-ready);color:var(--text-inverse)}
.vx-ptile__check{position:absolute;right:-6px;top:-6px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--status-ready);color:var(--text-inverse);box-shadow:0 0 0 3px rgba(27,23,21,.95);animation:vx-ptile-bump .45s cubic-bezier(.3,1.8,.5,1)}
.vx-ptile__off{position:absolute;left:-6px;bottom:-6px;z-index:2;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--warm-700);color:var(--text-3);box-shadow:0 0 0 3px rgba(27,23,21,.95)}

/* Подсказка: имя, подробности, у себя — карандаш. Мостик ::before закрывает
   зазор между плиткой и подсказкой — мышь идёт к карандашу, подсказка не гаснет. */
.vx-ptile__tip{position:fixed;z-index:60;justify-self:start;align-self:center;margin-left:78px;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-radius:12px;
  background:var(--warm-050);color:var(--text-inverse);white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,translate .18s,visibility 0s .18s;translate:-6px 0}
.vx-ptile__tip::before{content:"";position:absolute;right:100%;top:-10px;bottom:-10px;width:26px}
.vx-ptile:hover .vx-ptile__tip,.vx-ptile:focus-within .vx-ptile__tip,.vx-ptile--editing .vx-ptile__tip{
  opacity:1;visibility:visible;pointer-events:auto;translate:0 0;transition:opacity .18s,translate .18s}
.vx-ptile__tiptext{display:flex;flex-direction:column;line-height:1.25}
.vx-ptile__tiptext b{font:900 15px var(--font-display)}
.vx-ptile__tiptext small{font:600 12px var(--font-text);color:#8a6a44}
.vx-ptile__tipbtn{width:28px;height:28px;flex:none;border:none;border-radius:8px;background:rgba(36,23,3,.08);color:var(--text-inverse);cursor:pointer;display:grid;place-items:center}
.vx-ptile__tipbtn:hover{background:rgba(36,23,3,.16)}
.vx-ptile__tipbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.vx-ptile__input{width:170px;border:none;border-radius:8px;padding:6px 8px;font:700 14px var(--font-text);color:var(--text-inverse);
  background:rgba(255,255,255,.7);box-shadow:inset 0 1px 3px rgba(120,80,30,.2);outline:none}

@media (prefers-reduced-motion:reduce){
  .vx-ppanel,.vx-ptile,.vx-ptile__cnt,.vx-ptile__ring,.vx-ptile__check{animation:none}
  .vx-ptile__arc,.vx-ptile__tip{transition:none}
}

/* Жетон игрока — на картах ролей и строках реплик, и летящий от плитки
   (js/fly.js). Новый жетон «приземляется». */
.vx-jet{width:28px;height:28px;flex:none;border-radius:50%;display:inline-grid;place-items:center;overflow:hidden;
  font:900 11px var(--font-display);color:var(--text-inverse);box-shadow:0 4px 8px rgba(0,0,0,.4)}
.vx-jet img{width:100%;height:100%;object-fit:cover}
.vx-jet--land{animation:vx-jet-land .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes vx-jet-land{from{transform:scale(1.8)}}
.vx-jet--flying{position:fixed;z-index:70;pointer-events:none;transition:left .7s cubic-bezier(.5,0,.3,1),top .7s cubic-bezier(.5,0,.3,1),transform .7s}
@media (prefers-reduced-motion:reduce){.vx-jet--land{animation:none}}