/* ============================================================================
   cardgen.ru — игральные карты v2
   ----------------------------------------------------------------------------
   Настоящая карта, а не «плашка с мастью»: правильная раскладка очков (пипсов)
   для каждого номинала, зеркальные углы, бумажная фактура, фигурные карты
   с гравированной рамкой.

   Размер задаётся переменной --w (ширина карты). Всё внутри — в em от
   font-size, который выводится из --w, поэтому карта масштабируется целиком.

   Разметка (см. js/visuals.js):
     <span class="cgcard cgcard--face is-red" style="--w:80px">
       <span class="cgcard__corner cgcard__corner--tl">…</span>
       <span class="cgcard__field">…пипсы или фигура…</span>
       <span class="cgcard__corner cgcard__corner--br">…</span>
     </span>
   ========================================================================== */

.cgcard {
  --w: 88px;
  --radius: calc(var(--w) * .085);

  position: relative;
  display: block;
  flex: none;
  width: var(--w);
  aspect-ratio: 5 / 7;
  font-size: calc(var(--w) / 10);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

/* ── лицо: бумага ──────────────────────────────────────────────────────── */

.cgcard--face {
  color: var(--suit-black);
  background:
    radial-gradient(120% 90% at 28% 12%, #FFFDF8 0%, #F7F3EA 46%, #EDE7DA 78%, #E2DBCB 100%);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .35),
    inset 0 0 0 .5px rgba(255, 255, 255, .85),
    0 calc(var(--w) * .045) calc(var(--w) * .11) rgba(0, 0, 0, .55),
    0 calc(var(--w) * .012) calc(var(--w) * .03) rgba(0, 0, 0, .35);
}

/* бумажное зерно: почти незаметное, но убирает «пластиковость» */
.cgcard--face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(94deg,
      rgba(120, 105, 80, .045) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(4deg,
      rgba(120, 105, 80, .035) 0 1px,
      transparent 1px 4px);
}

.cgcard--face.is-red { color: var(--suit-red); }

/* ── углы: ранг + масть, нижний повёрнут ───────────────────────────────── */

.cgcard__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .82;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.03em;
  z-index: 2;
}

.cgcard__corner--tl {
  top: .34em;
  left: .42em;
}

.cgcard__corner--br {
  bottom: .34em;
  right: .42em;
  transform: rotate(180deg);
}

.cgcard__corner b {
  font-size: 1.62em;
  font-weight: 600;
}

.cgcard__corner i {
  font-style: normal;
  font-size: 1.24em;
  line-height: 1;
  margin-top: .06em;
}

/* ── поле с очками ─────────────────────────────────────────────────────── */

.cgcard__field {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* пипс: масть, позиционируется в процентах поля */
.cgcard__pip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  line-height: 1;
  opacity: .95;
}

/* нижняя половина очков перевёрнута — как на настоящей карте */
.cgcard__pip--flip { transform: translate(-50%, -50%) rotate(180deg); }

/* туз: крупная масть в гравированной рамке */
.cgcard__ace {
  position: absolute;
  inset: 13% 15%;
  display: grid;
  place-items: center;
}

.cgcard__ace::before {
  content: "";
  position: absolute;
  inset: 0;
  border: .5px solid currentColor;
  border-radius: calc(var(--w) * .02);
  opacity: .3;
}

.cgcard__ace-suit {
  font-size: 4.6em;
  line-height: 1;
  filter: drop-shadow(0 .02em 0 rgba(0, 0, 0, .12));
}

/* ── фигурные карты: гравированная табличка с литерой ──────────────────── */

.cgcard__court {
  position: absolute;
  inset: 8.5% 10%;
  display: grid;
  place-items: center;
  border: .5px solid currentColor;
  border-radius: calc(var(--w) * .022);
  opacity: .92;
}

.cgcard__court::before {
  content: "";
  position: absolute;
  inset: .28em;
  border: .5px solid currentColor;
  border-radius: calc(var(--w) * .014);
  opacity: .55;
}

/* угловые штрихи-флероны */
.cgcard__court::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0 0, currentColor 0 .09em, transparent .09em) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 100% 0, currentColor 0 .09em, transparent .09em) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 0 100%, currentColor 0 .09em, transparent .09em) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 100% 100%, currentColor 0 .09em, transparent .09em) 0 0 / 100% 100% no-repeat;
  opacity: .45;
}

.cgcard__court-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
}

.cgcard__court-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .9;
  letter-spacing: -.04em;
}

.cgcard__court-suit {
  font-size: 1.15em;
  line-height: 1;
  opacity: .8;
}

/* тонкая орнаментальная линия под литерой */
.cgcard__court-rule {
  width: 1.7em;
  height: .5px;
  background: currentColor;
  opacity: .4;
  margin: .12em 0 .06em;
}

/* ── рубашка ───────────────────────────────────────────────────────────── */

.cgcard--back {
  background:
    radial-gradient(90% 70% at 50% 42%, #12493A 0%, #0B3329 52%, #07231C 100%);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .55),
    inset 0 0 0 .5px rgba(205, 169, 98, .28),
    0 calc(var(--w) * .045) calc(var(--w) * .11) rgba(0, 0, 0, .55);
}

/* гильош: диагональная решётка + ромб */
.cgcard--back::before {
  content: "";
  position: absolute;
  inset: .42em;
  border: .5px solid rgba(205, 169, 98, .42);
  border-radius: calc(var(--w) * .018);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(205, 169, 98, .16) 0 .5px,
      transparent .5px .5em),
    repeating-linear-gradient(-45deg,
      rgba(205, 169, 98, .16) 0 .5px,
      transparent .5px .5em);
}

/* медальон в центре */
.cgcard--back::after {
  content: "CG";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2.9em;
  height: 2.9em;
  border: .5px solid rgba(205, 169, 98, .55);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold-300);
  background:
    radial-gradient(circle, rgba(7, 35, 28, .96) 0%, rgba(7, 35, 28, .8) 70%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ── пустой слот (место под карту, которой ещё нет) ────────────────────── */

.cgcard--empty {
  background: rgba(246, 241, 231, .022);
  box-shadow: inset 0 0 0 .5px rgba(246, 241, 231, .1);
  border-radius: var(--radius);
}

/* ── состояния ─────────────────────────────────────────────────────────── */

.cgcard--dim { opacity: .5; filter: saturate(.55); }
.cgcard--win {
  box-shadow:
    0 0 0 1px var(--gold-300),
    0 0 calc(var(--w) * .5) rgba(226, 197, 137, .45),
    0 calc(var(--w) * .06) calc(var(--w) * .14) rgba(0, 0, 0, .6);
}

/* появление карты: короткий подъём с поворотом — как при раздаче */
@keyframes cgcard-deal {
  from {
    opacity: 0;
    transform: translateY(-.55em) rotate(-4deg) scale(.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cgcard--deal {
  animation: cgcard-deal 420ms var(--ease-out) backwards;
  animation-delay: var(--deal-delay, 0ms);
}

/* ============================================================================
   Фишки
   ========================================================================== */

.cgchips {
  display: inline-flex;
  align-items: center;
  gap: .38em;
}

/* стопка: диски, сложенные друг на друга */
.cgchips__stack {
  position: relative;
  width: 1em;
  height: 1em;
  flex: none;
}

.cgchips__disc {
  position: absolute;
  left: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      var(--chip-face, #1B5E4A) 0 46%,
      var(--chip-edge, #0E3A2E) 47% 62%,
      var(--chip-face, #1B5E4A) 63% 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .18),
    0 .5px 1.5px rgba(0, 0, 0, .55);
  /* прорези по краю — как у настоящей фишки */
  -webkit-mask:
    radial-gradient(circle, #000 0 62%, transparent 63%),
    conic-gradient(#000 0 12deg, transparent 12deg 30deg, #000 30deg 42deg,
      transparent 42deg 60deg, #000 60deg 72deg, transparent 72deg 90deg,
      #000 90deg 102deg, transparent 102deg 120deg, #000 120deg 132deg,
      transparent 132deg 150deg, #000 150deg 162deg, transparent 162deg 180deg,
      #000 180deg 192deg, transparent 192deg 210deg, #000 210deg 222deg,
      transparent 222deg 240deg, #000 240deg 252deg, transparent 252deg 270deg,
      #000 270deg 282deg, transparent 282deg 300deg, #000 300deg 312deg,
      transparent 312deg 330deg, #000 330deg 342deg, transparent 342deg 360deg);
  -webkit-mask-composite: source-over;
  mask:
    radial-gradient(circle, #000 0 62%, transparent 63%),
    conic-gradient(#000 0 12deg, transparent 12deg 30deg, #000 30deg 42deg,
      transparent 42deg 60deg, #000 60deg 72deg, transparent 72deg 90deg,
      #000 90deg 102deg, transparent 102deg 120deg, #000 120deg 132deg,
      transparent 132deg 150deg, #000 150deg 162deg, transparent 162deg 180deg,
      #000 180deg 192deg, transparent 192deg 210deg, #000 210deg 222deg,
      transparent 222deg 240deg, #000 240deg 252deg, transparent 252deg 270deg,
      #000 270deg 282deg, transparent 282deg 300deg, #000 300deg 312deg,
      transparent 312deg 330deg, #000 330deg 342deg, transparent 342deg 360deg);
}

.cgchips__amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* варианты номиналов: разные цвета набора */
.cgchips--low  { --chip-face: #1D6B54; --chip-edge: #0B3A2D; }
.cgchips--mid  { --chip-face: #8A2F2A; --chip-edge: #4E1815; }
.cgchips--high { --chip-face: #2B3A55; --chip-edge: #161F30; }
.cgchips--gold { --chip-face: #8A6A33; --chip-edge: #4C3A1B; }

/* ============================================================================
   3D-подача: карта лежит на поверхности, игрок смотрит на неё под углом
   ----------------------------------------------------------------------------
   Ключевая идея: карта не «висит» на экране плашкой, а лежит на столе и
   наклонена к зрителю. Перспектива + поворот по X даёт сокращение по высоте,
   тень под картой «привязывает» её к плоскости, блик сверху говорит, откуда свет.

   Угол подобран как типичный взгляд игрока на свои карманные карты: он сидит
   за столом, карты лежат чуть дальше его рук, глаза выше плоскости стола —
   отсюда наклон 18–26°. Больше 30° карта «заваливается», меньше 12° — снова
   выглядит плоской.
   ========================================================================== */

/* Контейнер задаёт перспективу. Чем меньше perspective, тем сильнее эффект. */
.hand3d {
  --tilt-x: 22deg;       /* наклон назад: верх карты дальше от зрителя */
  --tilt-z: 0deg;        /* поворот в плоскости стола */
  --tilt-y: 0deg;        /* лёгкий разворот к зрителю */
  --persp: 1000px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: var(--persp);
  perspective-origin: 50% 34%;
  transform-style: preserve-3d;
}

/* Сама карта в 3D. */
.hand3d > .cgcard,
.hand3d > .cgcard-slot {
  transform:
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    rotateZ(var(--tilt-z));
  transform-origin: 50% 78%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 420ms var(--ease-out), filter 420ms var(--ease-out);
}

/* Веер: вторая карта чуть повёрнута — как в руке. */
.hand3d--fan > .cgcard:nth-child(1) { --tilt-z: -3.2deg; --tilt-y: 2deg; }
.hand3d--fan > .cgcard:nth-child(2) { --tilt-z: 2.6deg; --tilt-y: -2deg; }

/* Тень под картой: эллипс, размытый, смещён вниз — «карта лежит». */
.cgcard-shadow {
  position: relative;
}

.cgcard-shadow::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -14%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .62) 0%, transparent 72%);
  filter: blur(6px);
  transform: translateZ(-1px);
  pointer-events: none;
  z-index: -1;
}

/* Блик: тонкая полоса света по верхней кромке карты. */
.hand3d .cgcard--face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    178deg,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 255, 255, .16) 3%,
    transparent 14%
  );
  opacity: .55;
  pointer-events: none;
  z-index: 3;
}

/* На общем столе карты лежат на сукне — наклон сильнее, они «дальше». */
.table-3d {
  perspective: 1500px;
  perspective-origin: 50% 18%;
}

.table-3d .cgcard {
  transform: rotateX(34deg);
  transform-origin: 50% 92%;
}

/* На устройстве игрока карты ближе к лицу — наклон мягче. */
.device-3d {
  perspective: 820px;
  perspective-origin: 50% 30%;
}

.device-3d .cgcard {
  transform: rotateX(19deg);
  transform-origin: 50% 74%;
}

/* Живой отклик: карта чуть приподнимается под пальцем. */
.hand3d > .cgcard.is-lifted {
  transform:
    rotateX(calc(var(--tilt-x) * .55))
    rotateY(var(--tilt-y))
    rotateZ(var(--tilt-z))
    translateY(-6px)
    scale(1.02);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5));
}

/* ============================================================================
   ПЕРСПЕКТИВА — без неё rotateX даёт плоское сжатие, а не объём
   ----------------------------------------------------------------------------
   rotateX без perspective — это ортографическая проекция: карта просто
   сплющивается по высоте и выглядит «плоско и неправильно». С perspective
   появляется трапеция: дальний край уже, ближний шире — глаз читает объём.

   Величина perspective подобрана по расстоянию до зрителя: на общем столе
   (2–3 метра от экрана) — больше, чтобы эффект был мягким; на телефоне
   (30 см) — меньше, чтобы карта «лежала» ощутимее.
   ========================================================================== */

/* ── общий стол ─────────────────────────────────────────────────────────── */

.board,
.seat-cards {
  perspective: 1400px;
  perspective-origin: 50% 8%;
}

/* карты борда: лежат на сукне, наклонены назад */
.board .cgcard {
  transform: rotateX(32deg) rotateZ(var(--card-tilt, 0deg));
  transform-origin: 50% 92%;
}

/* карманные карты мест: чуть ближе к зрителю, наклон мягче */
.seat-cards .cgcard {
  transform: rotateX(24deg);
  transform-origin: 50% 88%;
}

/* веер карманных карт: вторая карта повёрнута, как в руке */
.seat-cards .cgcard:nth-child(1) { --card-tilt: 0deg; }
.seat-cards .cgcard:nth-child(2) { --card-tilt: 0deg; }

/* ── устройство игрока ──────────────────────────────────────────────────── */

.device-hand {
  perspective: 900px;
  perspective-origin: 50% 10%;
}

.device-hand .cgcard {
  transform: rotateX(18deg);
  transform-origin: 50% 86%;
}

/* ── тень под картой: привязывает её к плоскости ────────────────────────── */

.board .cgcard::after,
.seat-cards .cgcard::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -12%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .5) 0%, transparent 74%);
  filter: blur(4px);
  z-index: -2;
  pointer-events: none;
}

/* ── туз: рамка тоньше, масть крупнее ───────────────────────────────────── */

.cgcard__ace {
  inset: 16% 20%;
}

.cgcard__ace::before {
  border-width: .3px;
  opacity: .22;
  border-radius: calc(var(--w) * .015);
}

.cgcard__ace-suit {
  font-size: 5.4em;
}

/* ── фигурные карты: табличка аккуратнее ────────────────────────────────── */

.cgcard__court {
  inset: 14% 18%;
  border-width: .4px;
  opacity: .85;
}

.cgcard__court::before {
  inset: .22em;
  border-width: .3px;
  opacity: .4;
}

.cgcard__court-letter {
  font-size: 2.9em;
}

/* Пипсы не должны заезжать под угловые блоки: держим поле в узких границах. */
.cgcard__pip {
  font-size: 1.42em;
}

/* Углы компактнее и плотнее к краю — как на настоящей карте. */
.cgcard__corner--tl { top: .28em; left: .34em; }
.cgcard__corner--br { bottom: .28em; right: .34em; }

.cgcard__corner b { font-size: 1.5em; }
.cgcard__corner i { font-size: 1.14em; }