/* ============================================================================
   YAZME · ПЕРСОНЫ · ШТОРКА ИГР В ШАПКЕ ПЕРСОНАЖА · 20.09.2026
   Файл: persona/assets/games_sheet.css   Скрипт: persona/assets/games_sheet.js
   Подключается: persona/profile.php, persona/chat.php — ПОСЛЕ profile.css и
   chat.css, чтобы поправки к шапкам побеждали при равной специфичности.

   ЧТО ЭТО. На месте «трёх точек» в шапке персонажа теперь вход в игры, а
   меню «Ещё» переехало на имя. Этот лист описывает: кнопку игр в обеих
   шапках, имя как кнопку и саму шторку — ленту обложек с одной кнопкой
   действия под ней.

   Своих цветов не заводит: всё из токенов раздела (tokens.css), поэтому
   шторка едет за темой сайта вместе со всем остальным.
   ========================================================================= */

/* ══════════════════════ ИМЯ КАК КНОПКА · ПРОФИЛЬ ══════════════════════
   Имя в «Кадре» открывает «Ещё». Кнопка не должна выглядеть кнопкой — она
   должна выглядеть как имя, у которого есть продолжение: отсюда кружок с
   тремя точками рядом, ровно тот же знак, что раньше стоял в шапке.

   ПОЧЕМУ КНОПКА ПОВЕРХ, А НЕ ВОКРУГ. <h1> внутри <button> — невалидная
   вложенность (заголовок не phrasing content), а h1 на этой странице
   единственный и нужен поисковику ровно таким. Поэтому заголовок остаётся
   заголовком, а нажимается прозрачная кнопка, растянутая поверх него. */
.pfk-namewrap{
  position:relative; display:inline-flex; align-items:flex-end; gap:10px;
  transition:transform var(--d-micro) var(--e-spring-soft);
}
.pfk-namewrap:active{ transform:scale(.99); }
.pfk-namewrap .pfk-name{ margin:0; }
.pfk-namedots{
  flex:none; display:grid; place-items:center;
  width:26px; height:26px; margin-bottom:9px;
  border-radius:var(--r-full);
  background:rgba(250,249,245,.18); color:#faf9f5;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pfk-namedots .pv-ic{ width:15px; height:15px; }
.pfk-namehit{
  position:absolute; inset:-10px -14px;
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--r-md); -webkit-tap-highlight-color:transparent;
}
.pfk-namehit:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }

/* ══════════════════════ ИМЯ КАК КНОПКА · ЧАТ ══════════════════════
   В капсуле чата имя было ссылкой на страницу персонажа (yzseo:chatlink) —
   единственной внутренней ссылкой с экрана. Ссылка осталась в разметке, но
   ушла с глаз (.pv-sr): робот и скринридер её видят, а палец на том же
   месте получает меню. Лицо слева не трогаем — на нём висит зум и кольцо
   истории (chat.js ищет .ch-pill-info .pv-mono), поэтому кнопка накрывает
   только текстовую часть капсулы. */
.ch-pill-info{ position:relative; }
.ch-pill-info > .grow{ position:relative; }
.ch-pill-hit{
  position:absolute; inset:-6px -8px;
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--r-full); -webkit-tap-highlight-color:transparent;
}
.ch-pill-hit:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }

/* ══════════════════════ КНОПКА ИГР В ШАПКАХ ══════════════════════
   Точка-огонёк зажигается, только когда у человека есть незакрытый стол:
   это единственный случай, когда от него действительно чего-то ждут. */
.yzg-btn{ position:relative; }
.yzg-btn .yzg-dot{
  position:absolute; top:-1px; right:-1px;
  width:10px; height:10px; border-radius:var(--r-full);
  background:var(--hero); border:2px solid var(--s0);
  animation:yzg-blink 2.4s var(--e-out) infinite;
}
.ch-fab.yzg-btn .yzg-dot{ border-color:var(--s2); }
@keyframes yzg-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion: reduce){ .yzg-btn .yzg-dot{ animation:none; } }

/* ══════════════════════ ШТОРКА ══════════════════════ */
.yzg-sheet .pv-sheet-head{ align-items:flex-start; }
.yzg-sub{
  margin:6px 0 0; color:var(--t3);
  font:500 var(--fs-small)/1.35 var(--f-ui);
}
.yzg-sub.warn{ color:var(--hero); }

/* ---------- лента обложек ----------
   Уезжает за края шторки: обрезанная пятая обложка у правого края — это и
   есть приглашение листать. Скроллбар прячем, полосу прокрутки заменяет
   сама обрезка. */
.yzg-rail{
  display:flex; gap:var(--sp3);
  margin:var(--sp2) calc(var(--sp5) * -1) 0;
  padding:2px var(--sp5) var(--sp3);
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  /* прокрутка к обложке не должна съедать отступ ленты */
  scroll-padding-inline:var(--sp5);
}
.yzg-rail::-webkit-scrollbar{ display:none; }
.yzg-cv{
  flex:none; width:106px; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:7px;
  margin:0; padding:0; border:0; background:none; color:var(--t1);
  cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent;
}
.yzg-cv b{
  font:600 var(--fs-small)/1.2 var(--f-ui);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.yzg-cv small{ color:var(--t3); font:500 11px/1.2 var(--f-ui); }
.yzg-art{
  position:relative; display:grid; place-items:center;
  width:100%; aspect-ratio:3/4; border-radius:var(--r-md);
  overflow:hidden; border:1px solid var(--hair2);
  background:radial-gradient(80% 100% at 50% 0%, var(--hero-lo), var(--s1));
  transition:border-color var(--d-std) var(--e-out), box-shadow var(--d-std) var(--e-out);
}
.yzg-cv.on .yzg-art{ border-color:var(--hero); box-shadow:0 0 0 2px var(--hero-lo), var(--sh-hero); }
.yzg-cv:active .yzg-art{ transform:scale(.98); }
.yzg-cv:focus-visible .yzg-art{ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }
.yzg-cv.off{ opacity:.45; cursor:default; }
.yzg-cv.off .yzg-art{ background:var(--s2); }
.yzg-art img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 14%;
}
.yzg-art .pv-ic{ width:30px; height:30px; color:var(--hero); }
.yzg-cv.off .yzg-art .pv-ic{ color:var(--t3); }
.yzg-art.story{ background:radial-gradient(80% 100% at 50% 0%, rgba(226,177,60,.14), var(--s1)); }
.yzg-art.story .pv-ic{ color:var(--mark); }

/* карты на обложке Дурака — тот же компонент, что на витрине игр */
.yzg-cards{ position:absolute; right:7px; bottom:7px; display:flex; gap:3px; }
.yzg-cards i{
  display:grid; place-items:center; width:19px; height:27px; border-radius:4px;
  background:#faf7ef; color:#1b1917; font:700 11px/1 var(--f-ui); font-style:normal;
  box-shadow:0 5px 10px -5px rgba(0,0,0,.7); transform:rotate(-8deg);
}
.yzg-cards i:nth-child(2){ transform:rotate(0); color:#c9352b; }
.yzg-cards i:nth-child(3){ transform:rotate(8deg); }

/* ---------- подпись выбранного и действие ---------- */
.yzg-meta{ display:flex; flex-direction:column; gap:4px; margin-top:var(--sp2); }
.yzg-meta b{ font:600 var(--fs-title)/1.15 var(--f-serif); color:var(--t1); }
.yzg-meta span{ color:var(--t3); font:500 var(--fs-small)/1.35 var(--f-ui); }
.yzg-act{ display:flex; gap:var(--sp2); margin-top:var(--sp4); }
.yzg-act .pv-btn{ flex:1; }
.yzg-act .pv-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.yzg-all{
  display:flex; align-items:center; justify-content:center; gap:var(--sp2);
  margin-top:var(--sp3); padding:var(--sp2);
  color:var(--t3); font:600 var(--fs-small)/1 var(--f-ui); text-decoration:none;
}
.yzg-all .pv-ic{ width:14px; height:14px; }

/* ---------- скелет на время загрузки ----------
   Шторка открывается мгновенно, данные приезжают следом: пустой прямоугольник
   вместо ленты честнее спиннера — он показывает, что именно грузится. */
.yzg-skel{ display:flex; gap:var(--sp3); margin:var(--sp2) 0 var(--sp3); }
.yzg-skel i{
  flex:none; width:106px; aspect-ratio:3/4; border-radius:var(--r-md);
  background:linear-gradient(100deg, var(--s2) 30%, var(--s3) 50%, var(--s2) 70%);
  background-size:200% 100%; animation:yzg-shim 1.2s linear infinite;
}
@keyframes yzg-shim{ from{ background-position:180% 0 } to{ background-position:-20% 0 } }
@media (prefers-reduced-motion: reduce){ .yzg-skel i{ animation:none; } }
.yzg-err{ margin:var(--sp4) 0 0; color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); }

/* На большом экране шторка раздела уже ограничена по ширине (--col), лента
   внутри неё просто не доезжает до края — обложки становятся крупнее. */
@media (min-width: 620px){
  .yzg-cv{ width:124px; }
  .yzg-skel i{ width:124px; }
}

/* ПИТОМЕЦ НА ДВОИХ (волна 1, 26.09.2026) */
/* ПИТОМЕЦ НА ДВОИХ (волна 1.5): цветная обложка */
.yzg-art.pet{ background:linear-gradient(160deg,#ffd9c8 0%,#ffc2d6 52%,#d9c8ff 100%); overflow:hidden; }
.yzg-art.pet .yzg-petart{ width:100%; height:100%; display:block; }