/* Карта роли, версия «кино». Рубашка (выбор Сардора 07.10) — картинка: чёрная тиснёная кожа, золотая рамка, скрещённые
   пистолеты и роза, знак и «Mafia Offline» вдавлены в кожу лазером (webapp/card.js → cardBackHtml, tools/gen/cardback-emblem.mjs).
   Одна и та же в обеих темах: это вещь на столе. Лицо — фото роли во весь размер (webapp/photo.js), пока фото роли нет —
   прежнее лицо (персонаж на красном круге, app.css). Разметка — webapp/card.js.
   Переворот (.flip, .flip-in, .side, видимость сторон и её момент) — в app.css, здесь не трогается.
   Сторона цветом: мафия — красный, мирные — кость, сам за себя — охра (как табличка роли на казни, square.css). */

:root {
  /* рубашка: цвет кожи под картинкой, пока она грузится */
  --cb-leather: #0E0C0B;
  /* лицо */
  --cd-face: #0E0C0C;             /* под фото */
  --cd-frame: rgba(242, 236, 228, .16);
  --cd-text: #F5EFE7;
  --cd-muted: #CEC5BB;
  --cd-scrim: rgba(9, 7, 7, .94);
  --cd-scrim-mid: rgba(9, 7, 7, .8);
  --cd-mafia: #F4806F;            /* светлее --red-text: на затемнении поверх светлого фото 5,3:1, поверх белого 4,5:1 (расчёт 06.10) */
  --cd-town: #D8CAB2;
  --cd-solo: #D9B77A;
  --cd-idx-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  /* живая карта (cardlive.js): знак «играть» (слоновая кость в латунной обводке) и темнота «камера упала».
     Лицо карты — фото, тёмное кино в обеих темах, поэтому знак один на обе темы. */
  --cd-play-fill: #F2E8D7;
  --cd-play-fill-hover: #FFF7EA;
  --cd-play-line: #A9844C;
  --cd-play-shadow: rgba(8, 6, 5, .7);
  --cd-black: #060505;
}
:root[data-theme="light"] {
  --cd-frame: transparent;
}

/* ═════ рубашка ═════ */
/* Своя подложка вместо красной с ромбами (.card-back в app.css, в светлой теме — свои ромбы) и без её внутренней рамки.
   Видимость картинки не трогаем: сторону карты при перевороте выключает app.css (грабли iPhone в HANDOFF). */
.card-back.cb,
:root[data-theme="light"] .card-back.cb { display: block; background: var(--cb-leather); }
.card-back.cb::after { content: none; }
.cb-pic, .cb-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cb-pic { --lq-blur: 9px; } /* превью рубашки (11.10, card.js): размытая крошечная копия, пока картинка грузится */
.cb-pic img { object-fit: cover; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* ═════ лицо ═════ */
/* Прежнее лицо (персонаж на круге, название, команда, описание — app.css) остаётся всегда. Поверх — фото-слой .cf:
   прозрачный, пока фото роли нет или не загрузилось; .has-photo (photo.js) — слой непрозрачный и закрывает лицо целиком.
   Видимость слоя — только opacity: visibility у детей стороны карты на iPhone перебила бы выключение стороны при перевороте. */
.cf {
  position: absolute; inset: 0; z-index: 1; display: block; overflow: hidden; isolation: isolate; border-radius: inherit;
  background: var(--cd-face); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out);
}
.cf.has-photo { opacity: 1; }
/* превью лица (11.10, photo.js → data-lq): пока фото роли грузится — его размытая копия вместо пустой карты */
.cf.ph-lq { opacity: 1; --lq-blur: 9px; }
/* Без вспышки (Сардор 08.10: «сначала стик, потом фото, потом видео»): пока фото роли в пути (манифест или сама
   картинка), прежнее лицо не показываем — пустая карта цвета лица, потом сразу фото. Прежнее лицо видно, только когда
   фото этой роли нет (.no-photo — photo.js: нет в манифесте, версия «До fal», не загрузилось). Только opacity: тексты
   прежнего лица читает экранный диктор (слой фото — aria-hidden). Знак «играть» живой карты (.cf-play) — не прежнее
   лицо, а часть фото-слоя: его не гасим (11.10: из-за этого правила значок проявлялся и сразу пропадал). */
.card-face:has(> .cf:not(.no-photo)) > :not(.cf):not(.cf-play) { opacity: 0; }
/* Под фото прежнее лицо не видно — его живые анимации (дыхание, моргание) стоят. */
.cf.has-photo ~ *, .cf.has-photo ~ * * { animation-play-state: paused !important; }
.cf::after { content: ''; position: absolute; inset: 6px; z-index: 3; border: 1px solid var(--cd-frame); border-radius: 13px; pointer-events: none; }
.ph-pic, .ph-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ph-pic img { object-fit: cover; }
/* Затемнение снизу — только под надписью: фото остаётся видно целиком выше середины. */
.cf-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--cd-scrim) 0%, var(--cd-scrim-mid) 30%, rgba(9, 7, 7, 0) 60%);
}
.cf-idx {
  position: absolute; z-index: 2; top: 12px; inset-inline-start: 14px;
  font: 600 20px/1 var(--font-display); color: var(--cd-side); text-shadow: var(--cd-idx-shadow);
}
.cf-title {
  position: absolute; z-index: 2; inset-inline: 0; bottom: 0; display: grid; justify-items: center; text-align: center;
  padding: 0 14px 18px;
}
.cf-team {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 max(11px, 4.2cqw)/1.2 var(--font-body); color: var(--cd-side);
}
.cf-team::before, .cf-team::after { content: ''; width: 14px; height: 1px; background: currentColor; opacity: .85; }
.cf-name {
  margin-top: 4px; font: 600 clamp(22px, 12.5cqw, 40px)/1.02 var(--font-display); letter-spacing: .005em;
  color: var(--cd-text); text-wrap: balance; overflow-wrap: anywhere;
}
.cf-short { margin-top: 7px; max-width: 30ch; font-size: clamp(12px, 4.4cqw, 14px); line-height: 1.35; color: var(--cd-muted); text-wrap: pretty; }
.cf--mafia { --cd-side: var(--cd-mafia); }
.cf--town { --cd-side: var(--cd-town); }
.cf--solo { --cd-side: var(--cd-solo); }

/* Светлая тема: фото — как отпечаток на кремовой карте (поле 7 px — кремовое лицо карты под слоем), кадр тёмный, как кино. */
:root[data-theme="light"] .cf { inset: 7px; border-radius: 12px; }
:root[data-theme="light"] .cf::after { content: none; }

/* Открытие: кадр «оседает» (камера отъезжает на место), надпись поднимается — после ребра переворота. */
.flip.animate .cf .ph-pic { animation: cf-settle 900ms var(--ease-enter) 90ms backwards; }
.flip.animate .cf-team { animation: rise 360ms 300ms var(--ease-enter) backwards; }
.flip.animate .cf-name { animation: rise 380ms 340ms var(--ease-enter) backwards; }
.flip.animate .cf-short { animation: rise 360ms 400ms var(--ease-enter) backwards; }
.flip.animate .cf-idx { animation: fade 300ms 420ms ease backwards; }
@keyframes cf-settle { from { transform: scale(1.09); } }

/* ═════ живая карта (07.10, webapp/cardlive.js) ═════ */
/* Блик по лицу: тёплое пятно света бежит за пальцем/курсором (opacity и transform слоя), видно только у открытой карты. */
.card-glare {
  position: absolute; inset: -40%; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 244, 226, .34) 0%, rgba(255, 244, 226, .12) 22%, rgba(255, 244, 226, 0) 44%);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.flip.is-live .card-glare { transition: opacity 120ms linear, transform 120ms linear; }
/* Видео роли поверх фото (под затемнением надписи): один раз после паузы, проявляется, когда пошло, и растворяется
   в фото в конце (08.10, cardlive.js). Падение кадра у Мафии — WAAPI из cardlive.js, точка поворота — ниже центра. */
.cf .cf-video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  opacity: 0; transition: opacity 700ms var(--ease-out); pointer-events: none; transform-origin: 50% 60%;
}
.cf .cf-video.is-on { opacity: 1; }
/* «Камера упала»: под кадром — темнота, в неё ролик и гаснет. */
.cf .cf-dark { position: absolute; inset: 0; display: block; background: var(--cd-black); opacity: 0; pointer-events: none; }
/* Знак «играть» в правом верхнем углу лица (11.10, Сардор: «один треугольничек… нажимаешь — ещё раз видео»): видео
   сыграло — знак мягко проявляется (cardlive.js) и остаётся; нажатие — ролик заново, на время показа знак прячется.
   Сам знак — только треугольник: слоновая кость в латунной обводке, как тиснение на карте 1931, мягкая тень под ним —
   чтобы читался и на светлом кадре. Область нажатия — 44 px, центр треугольника — напротив буквы в левом углу (.cf-idx). */
.cf-play {
  position: absolute; z-index: 5; top: 2px; inset-inline-end: 2px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: none; color: var(--cd-play-line); cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  transition: opacity 180ms var(--ease-out), transform 140ms var(--ease-press);
}
.cf-play .ic {
  width: 26px; height: 26px; overflow: visible;
  filter: drop-shadow(0 1px 1.5px var(--cd-play-shadow));
}
.cf-play .ic path { fill: var(--cd-play-fill); stroke: currentColor; stroke-width: 1.5px; transition: fill 160ms var(--ease-out); }
@media (hover: hover) {
  .cf-play:hover { transform: scale(1.08); }
  .cf-play:hover .ic path { fill: var(--cd-play-fill-hover); }
}
.cf-play:active { transform: scale(.9); }
.cf-play:focus-visible { outline: 2px solid var(--cd-play-fill); outline-offset: -3px; }
.cf-play.is-hidden { opacity: 0; pointer-events: none; }
:root[data-theme="light"] .cf-play { top: 9px; inset-inline-end: 9px; }
@media (prefers-reduced-motion: reduce) {
  .card-glare { display: none; }
  .cf .cf-video, .cf-play, .cf-play .ic path { transition: none; }
  .cf-play:hover, .cf-play:active { transform: none; }
}