/* ===== Карточка покерота =====
   Карточка всегда верстается в базовом размере 600px (внутри всё в cqw) и масштабируется трансформом
   под --card-w. Так раскладка не ломается от минимального размера шрифта в WebView. */

.card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative;
  width: var(--card-w, 300px);
  aspect-ratio: 63 / 88;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.card-scale {
  position: absolute; left: 0; top: 0;
  width: 600px; height: 838px;
  transform: scale(var(--s, 0.5));
  transform-origin: 0 0;
  container-type: inline-size;
  perspective: 2200px;
}
.card-tilt {
  position: absolute; inset: 0;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
}
.card.tilting .card-tilt { transition: transform 0.06s linear; }
.card-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.card.is-flipped .card-flip { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0;
  border-radius: 4.6cqw;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.55);
}
.face.back { transform: rotateY(180deg); }
/* WebKit: прежний rotateY 600 мс; скрываем противоположную сторону
   по текущему углу. Маски/фильтры остаются внутри одной плоской face (0082). */
.card.safe-flip .card-flip { transition: none; }
.card.safe-flip .face { transform-style: flat; isolation: isolate; }
.card.safe-flip .face.back { display: none; }
.card.safe-flip.is-flipped .face.front { display: none; }
.card.safe-flip.is-flipped .face.back { display: block; }
.card.safe-flip.flipping[data-flip-side='front'] .face.front { display: block; }
.card.safe-flip.flipping[data-flip-side='front'] .face.back { display: none; }
.card.safe-flip.flipping[data-flip-side='back'] .face.front { display: none; }
.card.safe-flip.flipping[data-flip-side='back'] .face.back { display: block; }
.card.safe-flip.flipping :is(.c-photo, .c-creature) { animation: none; }
.card.safe-flip.flipping .c-art * { animation-play-state: paused; }
/* Оборот открыт и читается (flipCard в card.js, features/0024): карточка плоская, без 3D-поворота.
   На iPhone прокрутка внутри повёрнутого в 3D элемента после касания сбрасывается наверх. Выглядит так же. */
.card.reading .card-tilt, .card.reading .card-flip { transform: none; transform-style: flat; transition: none; }
.card.reading .face.front { visibility: hidden; }
.card.reading .face.back { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.card[data-rarity='rare'] .face.front,
.card[data-rarity='epic'] .face.front,
.card[data-rarity='legendary'] .face.front {
  box-shadow: 0 0 5cqw color-mix(in srgb, var(--rar) 55%, transparent), 0 2cqw 6cqw rgba(0, 0, 0, 0.55);
}

/* ---- Материал рамки по редкости ---- */
.frame { position: absolute; inset: 0; border-radius: inherit; }
.card[data-rarity='common'] .frame {
  background: linear-gradient(160deg, #d3d6db, #8d939c 42%, #c0c4ca 58%, #7c828b);
}
.card[data-rarity='uncommon'] .frame {
  background: linear-gradient(160deg, #9af5c1, #25a35e 42%, #6fe6a5 58%, #167a43);
}
.card[data-rarity='rare'] .frame {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #a9cbff, #2d6be0 40%, #8ab8ff 56%, #1a3f99);
}
.card[data-rarity='epic'] .frame {
  background: linear-gradient(125deg, #ff7ae0, #b44dff, #5a7bff, #3df2ff, #b44dff, #ff7ae0, #b44dff);
  background-size: 300% 300%;
  animation: holo-shift 6s linear infinite;
}
.card[data-rarity='legendary'] .frame {
  background: linear-gradient(115deg, #7a4d00, #ffd86b 18%, #fff7d1 26%, #ffc531 38%, #9e6500 55%, #ffe08a 72%, #fff7d1 78%, #7a4d00);
  background-size: 260% 260%;
  animation: holo-shift 3.5s linear infinite;
}
@keyframes holo-shift { to { background-position: 300% 300%; } }

/* ---- Содержимое ---- */
.c-body {
  position: absolute; inset: 3.2cqw;
  border-radius: 2.6cqw;
  background: linear-gradient(180deg, #1d1830, #120f1c 60%);
  box-shadow: inset 0 0 0 0.5cqw rgba(0, 0, 0, 0.45), inset 0 0 0 0.9cqw rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column;
  gap: 1.8cqw;
  padding: 2.6cqw;
  color: var(--text);
  font-family: var(--font-body);
}
.c-head { display: flex; align-items: center; gap: 2cqw; }
.c-name {
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.6cqw;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-type {
  flex: none;
  width: 8cqw; height: 8cqw;
  display: grid; place-items: center;
  font-size: 4.6cqw;
  border-radius: 50%;
  /* Тёмная подложка и обводка цвета типа: светлые эмодзи (стекло, звук) не сливаются с фоном */
  background: radial-gradient(circle at 35% 30%, #2c2640, #0e0b18 75%);
  box-shadow: 0 0 0 0.7cqw var(--type), 0 0 2.4cqw color-mix(in srgb, var(--type) 70%, transparent);
  text-shadow: 0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.8);
}

.c-art {
  position: relative;
  flex: none;
  height: 78cqw;
  border-radius: 2cqw;
  overflow: hidden;
  box-shadow: inset 0 0 0 0.6cqw rgba(0, 0, 0, 0.5);
}
/* Фон окна — диорама места обитания (habitats.js) */
.c-art-bg {
  position: absolute; inset: 0;
  background-color: #0b0a12;
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
}
.c-art-bg::after { /* сканлайны и лёгкая виньетка, чтобы существо читалось на любом фоне */
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(75% 65% at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.45));
}
.c-habitat {
  position: absolute; right: 2cqw; bottom: 2.4cqw;
  padding: 0.9cqw 2cqw;
  font-size: 2.4cqw;
  color: #fff;
  background: rgba(11, 10, 18, 0.7);
  border-radius: 99px;
}
.c-creature {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0.6cqw 0 rgba(0, 0, 0, 0.35));
}
.c-no {
  position: absolute; left: 2cqw; top: 2cqw;
  font-family: var(--font-pixel);
  font-size: 2.2cqw;
  color: #fff;
  text-shadow: 0.4cqw 0.4cqw 0 rgba(0, 0, 0, 0.6);
}
.c-rarity {
  position: absolute; left: 0; bottom: 2.4cqw;
  padding: 1cqw 3cqw 1cqw 2.4cqw;
  font-family: var(--font-pixel);
  font-size: 2.3cqw;
  color: #0b0a12;
  background: var(--rar);
  clip-path: polygon(0 0, 100% 0, calc(100% - 2cqw) 100%, 0 100%);
}

.c-stats { display: grid; gap: 1.1cqw; }
.c-stat { display: grid; grid-template-columns: 9cqw 1fr 4cqw; align-items: center; gap: 2cqw; }
.c-stat b { font-family: var(--font-pixel); font-weight: 400; font-size: 2.4cqw; color: var(--text-dim); }
.c-stat em { font-family: var(--font-pixel); font-style: normal; font-size: 2.6cqw; text-align: right; }
.pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9cqw; }
.pips i { height: 2.4cqw; background: #2c2640; box-shadow: inset 0 -0.5cqw 0 rgba(0, 0, 0, 0.3); }
.pips i.on { background: var(--acid); box-shadow: inset 0 -0.5cqw 0 rgba(0, 0, 0, 0.25), 0 0 1.2cqw rgba(200, 255, 46, 0.35); }

.c-traits { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.chip {
  font-size: 2.7cqw;
  line-height: 1;
  padding: 1cqw 1.8cqw;
  border-radius: 99px;
  background: #2a2440;
  color: var(--text);
  white-space: nowrap;
}
.type-chip { background: color-mix(in srgb, var(--type) 28%, #2a2440); }
.c-phrase {
  font-size: 3.1cqw;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.25;
  flex: 1;
  overflow: hidden;
}
.c-foot { display: flex; align-items: center; gap: 2cqw; }
.c-stage { font-family: var(--font-pixel); font-size: 2.1cqw; color: var(--acid); white-space: nowrap; }
.c-xp { flex: 1; height: 1.6cqw; background: #2c2640; }
.c-xp i { display: block; height: 100%; background: var(--acid); }
/* Опыт числом; ромбики редкости — в плашке редкости (features/0019), чтобы не путались с эволюцией */
.c-xpnum { font-family: var(--font-pixel); font-size: 2.1cqw; color: var(--text-dim); white-space: nowrap; }
.c-gems { font-family: var(--font-body); font-size: 2.4cqw; letter-spacing: 0.1cqw; margin-left: 0.6cqw; }
.c-gems s { text-decoration: none; opacity: 0.3; }

/* ---- Блики ---- */
.shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.22), transparent 45%);
  mix-blend-mode: overlay;
}
.holo {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  /* только по рамке: внутренняя панель остаётся читаемой */
  padding: 3.2cqw;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background:
    repeating-linear-gradient(115deg, #ff7ae0 0%, #7afcff 7%, #fff47a 14%, #b44dff 21%, #ff7ae0 28%);
  background-size: 400% 400%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: 0.22;
  transition: opacity 0.3s;
}
.card[data-rarity='legendary'] .holo {
  background: repeating-linear-gradient(115deg, #ffe08a 0%, #fff7d1 6%, #ffb347 12%, #ffe08a 18%);
  background-size: 400% 400%;
  background-position: var(--mx) var(--my);
}
.card.tilting .holo { opacity: 0.6; }
/* Перелив (features/0032): раз в несколько секунд по карточке проходит полоса света. Чем реже карта, тем ярче
   и цветнее: обычная — белый блик, необычная — зелёный, редкая — голубой, эпик — радуга, легенда — золото.
   Двигается transform псевдоэлемента — дёшево и в сетке коллекции */
.sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 8; mix-blend-mode: screen; }
.sheen::before {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: -70%; width: 50%;
  background: linear-gradient(100deg, transparent 0%, var(--sheen-c, rgba(255, 255, 255, 0.22)) 50%, transparent 100%);
  transform: translateX(0) skewX(-14deg);
  animation: sheen var(--sheen-t, 6s) ease-in-out infinite var(--sheen-d, 0s);
}
@keyframes sheen { 0%, 70% { transform: translateX(0) skewX(-14deg); } 100% { transform: translateX(420%) skewX(-14deg); } }
.card[data-rarity='uncommon'] .sheen { --sheen-c: rgba(61, 220, 132, 0.32); }
.card[data-rarity='rare'] .sheen { --sheen-c: rgba(110, 190, 255, 0.45); --sheen-t: 5s; }
.card[data-rarity='epic'] .sheen::before {
  background: linear-gradient(100deg, transparent 0%, rgba(255, 122, 224, 0.45) 30%, rgba(122, 252, 255, 0.55) 50%, rgba(255, 244, 122, 0.45) 70%, transparent 100%);
  animation-duration: 4.5s;
}
.card[data-rarity='legendary'] .sheen::before {
  background: linear-gradient(100deg, transparent 0%, rgba(255, 197, 49, 0.5) 30%, rgba(255, 247, 209, 0.7) 50%, rgba(255, 179, 71, 0.5) 70%, transparent 100%);
  animation-duration: 3.8s;
}
.card[data-state='mogged'] .sheen { display: none; }
/* Слои со смешиванием цветов на iPhone ломают 3D-переворот и просвечивают на обороте:
   прячем сразу при перевороте, а при возврате лицом показываем, когда карточка уже развернулась */
.sheen, .shine { transition: visibility 0s 0.6s; }
.holo { transition: opacity 0.3s, visibility 0s 0.6s; }
.card.is-flipped .sheen, .card.is-flipped .shine, .card.is-flipped .holo { visibility: hidden; transition: none; }
.card.is-flipped .c-art::after { display: none; }
@media (prefers-reduced-motion: reduce) { .sheen::before { animation: none; } }
.card[data-rarity='epic'] .c-art::after,
.card[data-rarity='legendary'] .c-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, transparent 55%);
  background-size: 250% 100%;
  background-position: calc(100% - var(--mx)) 0;
  mix-blend-mode: overlay;
}

/* ---- Мемность: эффекты внутри арта, растущие со стадией (0074) ---- */
.card { --meme-c1: #c8ff2e; --meme-c2: #3df2ff; --meme-period: 8.6s; --meme-shift: 0.9cqw; --meme-slice: 2.2cqw; }
.card[data-stage='3'] { --meme-c1: #3df2ff; --meme-c2: #c8ff2e; }
.card[data-stage='4'] { --meme-c1: #ff7ae0; --meme-c2: #3df2ff; --meme-period: 7.2s; --meme-shift: 1.5cqw; --meme-slice: 3.2cqw; }
.card[data-stage='5'] { --meme-c1: #ff7ae0; --meme-c2: #c8ff2e; --meme-period: 5.8s; --meme-shift: 2.2cqw; --meme-slice: 4.2cqw; }
.meme-aura, .meme-scanlines, .meme-glitch, .meme-lag, .fried-noise {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
}
/* 2. Странный: мягкая энергия по краям и пиксельные уголки вместо молний. */
.meme-aura {
  z-index: 1;
  background: radial-gradient(ellipse at 0% 48%, color-mix(in srgb, var(--meme-c1) 25%, transparent), transparent 35%),
    radial-gradient(ellipse at 100% 65%, color-mix(in srgb, var(--meme-c2) 22%, transparent), transparent 34%);
  box-shadow: inset 0 0 4cqw color-mix(in srgb, var(--meme-c1) 20%, transparent);
  animation: meme-breathe 4.8s ease-in-out infinite var(--meme-delay, 0s);
}
.meme-aura::after {
  content: ''; position: absolute; inset: 18% 2% 18%; opacity: 0.65;
  background: linear-gradient(var(--meme-c1), var(--meme-c1)) left top / 5cqw 0.55cqw no-repeat,
    linear-gradient(var(--meme-c1), var(--meme-c1)) left top / 0.55cqw 5cqw no-repeat,
    linear-gradient(var(--meme-c2), var(--meme-c2)) right bottom / 5cqw 0.55cqw no-repeat,
    linear-gradient(var(--meme-c2), var(--meme-c2)) right bottom / 0.55cqw 5cqw no-repeat;
}
@keyframes meme-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }
/* 3. Мемный: сканлайны и редкий срыв изображения на несколько пикселей. */
.meme-scanlines {
  z-index: 2; opacity: 0.12;
  background: repeating-linear-gradient(0deg, transparent 0 1.2cqw, rgba(10, 8, 25, 0.8) 1.2cqw 1.4cqw);
}
.meme-glitch {
  z-index: 3; opacity: 0;
  animation: meme-signal var(--meme-period) steps(1) infinite var(--meme-delay, 0s);
}
/* Срываются фрагменты самого покерота, а не тонкая линия или фон.
   Прозрачность PNG сохраняет сцену между фрагментами неподвижной. */
.meme-glitch::before, .meme-glitch::after {
  content: ''; position: absolute; inset: 0;
  background: var(--creature-photo) center / 100% 100% no-repeat;
}
.meme-glitch::before {
  clip-path: inset(30% 0 56% 0);
  transform: translateX(calc(-1 * var(--meme-slice)));
  filter: drop-shadow(-0.4cqw 0 0 var(--meme-c1));
}
.meme-glitch::after {
  clip-path: inset(58% 0 28% 0);
  transform: translateX(var(--meme-slice));
  filter: drop-shadow(0.4cqw 0 0 var(--meme-c2));
}
.card[data-stage='3'] .c-creature,
.card[data-stage='4'] .c-creature,
.card[data-stage='5'] .c-creature {
  animation: meme-jitter var(--meme-period) steps(1) infinite var(--meme-delay, 0s);
}
@keyframes meme-jitter {
  0%, 90%, 96%, 100% { transform: none; }
  91% { transform: translateX(calc(-1 * var(--meme-shift))); }
  92% { transform: translate(var(--meme-shift), -0.25cqw) skewX(1deg); }
  93% { transform: translateX(calc(-0.5 * var(--meme-shift))); }
  94% { transform: none; }
}
@keyframes meme-signal {
  0%, 90%, 96%, 100% { opacity: 0; transform: none; }
  91% { opacity: 0.95; transform: translateX(-1cqw); }
  92% { opacity: 0.7; transform: translateX(1cqw); }
  93% { opacity: 0.85; transform: translateY(2cqw); }
  94% { opacity: 0; }
}
/* 4. Проклятый: короткий лаг горизонтальными фрагментами и мемные наклейки. */
.meme-lag {
  z-index: 3; opacity: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--meme-c1) 38%, transparent) 0 35%, transparent 35% 58%, rgba(11, 10, 18, 0.45) 58% 100%) 0 37% / 100% 6cqw no-repeat,
    linear-gradient(90deg, transparent 0 14%, color-mix(in srgb, var(--meme-c2) 40%, transparent) 14% 72%, transparent 72%) 0 59% / 100% 3.3cqw no-repeat;
  animation: meme-lag var(--meme-period) steps(1) infinite var(--meme-delay, 0s);
}
@keyframes meme-lag {
  0%, 90%, 96%, 100% { opacity: 0; transform: none; }
  91% { opacity: 0.85; transform: translateX(1.6cqw); }
  92% { opacity: 0.55; transform: translateX(-1.2cqw); }
  93%, 94% { opacity: 0.7; transform: translateX(0.8cqw); }
  95% { opacity: 0; }
}
/* Короткий старт при открытии/листании большой карты; затем возвращается обычный ритм. */
.card.meme-await-intro :is(.c-photo, .c-creature, .meme-glitch, .meme-lag, .meme-ghost) { animation: none; }
.card.meme-intro .c-creature { animation: meme-intro-jitter 0.65s steps(1) 1; }
.card.meme-intro .meme-glitch { animation: meme-intro-signal 0.65s steps(1) 1; }
.card.meme-intro .meme-lag { animation: meme-intro-lag 0.65s steps(1) 1; }
@keyframes meme-intro-jitter {
  0%, 26% { transform: translateX(calc(-1 * var(--meme-shift))); }
  12%, 38% { transform: translate(var(--meme-shift), -0.25cqw) skewX(1deg); }
  50% { transform: translateX(calc(-0.5 * var(--meme-shift))); }
  64%, 100% { transform: none; }
}
@keyframes meme-intro-signal {
  0%, 26% { opacity: 0.95; transform: translateX(-1cqw); }
  12%, 38% { opacity: 0.7; transform: translateX(1cqw); }
  50% { opacity: 0.85; transform: translateY(2cqw); }
  64%, 100% { opacity: 0; transform: none; }
}
@keyframes meme-intro-lag {
  0%, 26% { opacity: 0.85; transform: translateX(1.6cqw); }
  12%, 38% { opacity: 0.55; transform: translateX(-1.2cqw); }
  50% { opacity: 0.7; transform: translateX(0.8cqw); }
  64%, 100% { opacity: 0; transform: none; }
}
.stickers { position: absolute; inset: 16% 0 18%; pointer-events: none; z-index: 4; }
.sticker {
  position: absolute; font-size: 5.5cqw; transform: rotate(var(--rot));
  filter: drop-shadow(0.25cqw 0 0 #fff) drop-shadow(-0.25cqw 0 0 #fff) drop-shadow(0 0.25cqw 0 #fff) drop-shadow(0.35cqw 0.5cqw 0 rgba(0,0,0,0.4));
}
/* 5. Абсолютный: более сильный срыв и цифровая зернистость только в арте. */
.card[data-stage='5'] .c-creature { filter: saturate(1.25) contrast(1.08); }
/* Глитч ограничен альфой существа. Архивные фото без вырезки не двигаем. */
.meme-glitch, .meme-lag, .meme-scanlines, .fried-noise { visibility: hidden; }
.c-art.creature-mask .meme-glitch { visibility: visible; }
.c-art.creature-mask :is(.meme-lag, .meme-scanlines, .fried-noise) {
  visibility: visible;
  mask-image: var(--creature-shape); -webkit-mask-image: var(--creature-shape);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
}
.fried-noise {
  z-index: 2; opacity: 0.12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
/* V: красный и голубой следы за силуэтом, синхронно с принятым глитчем (0077). */
.meme-ghosts {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden;
  mask-image: var(--ghost-clear); -webkit-mask-image: var(--ghost-clear);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
}
.meme-ghosts.ready { visibility: visible; }
.meme-ghost {
  position: absolute; inset: 0; opacity: 0; background: #ff4368;
  mask-image: var(--ghost-shape); -webkit-mask-image: var(--ghost-shape);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
  animation: meme-ghost-red var(--meme-period) steps(1) infinite var(--meme-delay, 0s);
}
.meme-ghost.cyan { background: #4ef3ff; animation-name: meme-ghost-cyan; }
@keyframes meme-ghost-red {
  0%, 90%, 96%, 100% { opacity: 0; transform: none; }
  91% { opacity: .2; transform: translateX(-1.5cqw); }
  92%, 93% { opacity: .7; transform: translateX(-4cqw); }
  94% { opacity: .28; transform: translate(-1.2cqw, .5cqw); }
}
@keyframes meme-ghost-cyan {
  0%, 90%, 96%, 100% { opacity: 0; transform: none; }
  91% { opacity: .2; transform: translateX(1.5cqw); }
  92%, 93% { opacity: .65; transform: translateX(4cqw); }
  94% { opacity: .25; transform: translate(1.2cqw, -.5cqw); }
}
.card.meme-intro .meme-ghost.red { animation: meme-intro-ghost-red .65s steps(1) 1; }
.card.meme-intro .meme-ghost.cyan { animation: meme-intro-ghost-cyan .65s steps(1) 1; }
@keyframes meme-intro-ghost-red {
  0% { opacity: .2; transform: translateX(-1.5cqw); }
  12%, 38% { opacity: .7; transform: translateX(-4cqw); }
  50% { opacity: .28; transform: translate(-1.2cqw, .5cqw); }
  64%, 100% { opacity: 0; transform: none; }
}
@keyframes meme-intro-ghost-cyan {
  0% { opacity: .2; transform: translateX(1.5cqw); }
  12%, 38% { opacity: .65; transform: translateX(4cqw); }
  50% { opacity: .25; transform: translate(1.2cqw, -.5cqw); }
  64%, 100% { opacity: 0; transform: none; }
}
.flare {
  position: absolute; width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; pointer-events: none;
  background: radial-gradient(circle, #fff 0 6%, rgba(255, 30, 30, 0.75) 12%, rgba(255, 0, 0, 0.25) 30%, transparent 62%);
  mix-blend-mode: screen; animation: flare 2.8s ease-in-out infinite alternate;
}
@keyframes flare { to { transform: scale(1.1); } }
/* Подписи поверх эффектов; эффекты не попадают на оборот или рубашку. */
.c-no, .c-wild, .c-evolve, .c-net, .c-lives, .c-rarity, .c-habitat { z-index: 6; }
.card:is(.is-flipped, .covered) :is(.meme-aura, .meme-scanlines, .meme-glitch, .meme-lag, .fried-noise, .meme-ghosts, .stickers, .flare) { visibility: hidden; }
.card:is(.is-flipped, .covered) .c-art * { animation-play-state: paused; }
.card[data-state='mogged'] :is(.meme-aura, .meme-scanlines, .meme-glitch, .meme-lag, .fried-noise, .meme-ghosts, .stickers, .flare) { display: none; }
.card[data-state='mogged'] :is(.c-photo, .c-creature) { animation: none; }
.page-hidden .card *, .screen:not(.active) .card * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .card :is(.meme-aura, .c-photo, .c-creature, .frame, .flare) { animation: none !important; }
  .meme-glitch, .meme-lag, .meme-ghosts { display: none; }
}

/* ---- Оборот: история и приёмы ---- */
/* Длинный оборот прокручивается пальцем внутри карточки (features/0022); класс scrolls ставит fitInfo() в card.js —
   тогда снизу затухание, пока не докрутили до конца (at-end) */
.c-body.info {
  gap: 1.4cqw; padding: 3.6cqw;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y; scrollbar-width: none;
}
.c-body.info::-webkit-scrollbar { display: none; }
.c-body.info > * { flex-shrink: 0; }
.c-body.info.scrolls:not(.at-end) {
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent);
}
.i-name { font-family: var(--font-display); font-weight: 700; font-size: 4.8cqw; line-height: 1.1; }
.i-sub { font-size: 3cqw; color: var(--text-dim); }
.c-body.info h4 {
  margin: 1.4cqw 0 0;
  font-family: var(--font-pixel); font-weight: 400; font-size: 2.3cqw; color: var(--acid);
}
.i-story { margin: 0; font-size: 3.5cqw; line-height: 1.4; }
.i-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqw; }
.i-moves li { background: #241f36; border-radius: 1.6cqw; padding: 1.6cqw 2.2cqw; display: grid; gap: 0.6cqw; }
.i-moves li div { display: flex; justify-content: space-between; gap: 2cqw; align-items: baseline; }
.i-moves b { font-size: 3.5cqw; }
.i-moves span { font-size: 2.6cqw; color: var(--text-dim); white-space: nowrap; }
.i-moves em { font-style: normal; font-size: 2.9cqw; color: #d8d0ee; }
.i-derived { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; margin-top: auto; }
.i-derived span { background: #241f36; border-radius: 1.4cqw; padding: 1.2cqw 0; text-align: center; font-size: 2.2cqw; color: var(--text-dim); }
.i-derived b { display: block; font-family: var(--font-pixel); font-weight: 400; font-size: 2.6cqw; color: var(--text); margin-top: 0.6cqw; }
.i-foot { font-size: 2.3cqw; color: var(--text-mute); text-align: center; }

/* ---- Рубашка (для пачки) ---- */
.face.back.cover { background: #170f2b; }
.cover { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; border: 2.4cqw solid #2a1d4a; }
.cover-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(200, 255, 46, 0.07) 0 2cqw, transparent 2cqw 6cqw),
    repeating-linear-gradient(-45deg, rgba(255, 61, 139, 0.07) 0 2cqw, transparent 2cqw 6cqw),
    radial-gradient(circle at 50% 45%, #3a1f6e, #170f2b 70%);
}
.cover-emblem {
  position: absolute; left: 50%; top: 42%;
  width: 34cqw; height: 34cqw;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--acid), #7fb800);
  box-shadow: 0 0 0 1.6cqw #170f2b, 0 0 0 2.6cqw var(--pink), 0 0 8cqw rgba(200, 255, 46, 0.4);
  display: grid; place-items: center;
}
.cover-emblem span { transform: rotate(-45deg); font-family: var(--font-pixel); font-size: 13cqw; color: #170f2b; }
.cover-logo {
  position: absolute; left: 0; right: 0; bottom: 20%;
  text-align: center; font-family: var(--font-pixel); font-size: 6.2cqw; color: var(--acid);
  text-shadow: 0.8cqw 0.8cqw 0 var(--pink);
}
.cover-sub { position: absolute; left: 0; right: 0; bottom: 13%; text-align: center; font-size: 3cqw; color: var(--text-dim); }

/* Аура редкости вокруг рубашки — подсказка до переворота */
.card-aura {
  position: absolute; inset: -6%;
  border-radius: 10cqw;
  background: radial-gradient(closest-side, var(--rar), transparent);
  filter: blur(4cqw);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card.covered[data-rarity='uncommon'] .card-aura { opacity: 0.35; }
.card.covered[data-rarity='rare'] .card-aura { opacity: 0.6; }
.card.covered[data-rarity='epic'] .card-aura { opacity: 0.8; animation: aura 1.2s ease-in-out infinite alternate; }
.card.covered[data-rarity='legendary'] .card-aura { opacity: 1; inset: -14%; animation: aura 0.6s ease-in-out infinite alternate; }
@keyframes aura { to { transform: scale(1.08); filter: blur(6cqw); } }

/* ---- Кладбище: MOGGED и «воскрешён» ---- */
.face.front.torn { overflow: visible; box-shadow: none; background: transparent; }
.piece { position: absolute; inset: 0; border-radius: 4.6cqw; overflow: hidden; }
.torn.mogged .piece { filter: grayscale(1) contrast(1.15) brightness(0.8); }
.torn.mogged .piece.a { transform: translate(-1.5cqw, -2cqw) rotate(-3.5deg); }
.torn.mogged .piece.b { transform: translate(1.5cqw, 2.5cqw) rotate(2.5deg); }
.seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.seam polyline { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.torn.mogged .seam { display: none; }
.torn.revived .seam polyline { stroke: rgba(20, 16, 30, 0.6); stroke-width: 1.5; stroke-dasharray: 2 1; }
.stamp {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%) rotate(-16deg);
  padding: 1.6cqw 4cqw;
  font-family: var(--font-display); font-weight: 900; font-size: 13cqw; letter-spacing: 0.04em;
  color: var(--mogged);
  border: 1.4cqw solid var(--mogged);
  border-radius: 2cqw;
  box-shadow: inset 0 0 0 0.6cqw rgba(11, 10, 18, 0.6);
  mix-blend-mode: normal;
  opacity: 0.95;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.6'/></filter><rect width='80' height='80' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.6'/></filter><rect width='80' height='80' filter='url(%23g)'/></svg>");
  z-index: 5;
}
/* Лейкопластырь (features/0026): телесный, скруглённые концы, дырочки и белая подушечка посередине */
.plaster {
  position: absolute; width: 30%; height: 8.5%;
  transform: translate(-50%, -50%) rotate(var(--a));
  border-radius: 99px;
  background:
    radial-gradient(circle, rgba(140, 82, 46, 0.35) 0 0.45cqw, transparent 0.55cqw) 0 0 / 2.8cqw 2.8cqw,
    linear-gradient(#f3c9a2, #dfa676);
  box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, 0.4), inset 0 0.5cqw 0 rgba(255, 255, 255, 0.35), inset 0 -0.6cqw 0 rgba(120, 70, 40, 0.18);
  z-index: 5;
}
.plaster::before {
  content: ''; position: absolute; left: 33%; right: 33%; top: 16%; bottom: 16%;
  border-radius: 1.2cqw;
  background: linear-gradient(#fdf8f0, #eadcc8);
  box-shadow: inset 0 0 0 0.35cqw rgba(170, 130, 90, 0.3);
}
.face.front.has-badges { overflow: visible; }
.card-badges {
  position: absolute; left: 4.5cqw; right: 4.5cqw; top: -1.6cqw; z-index: 6;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw;
  pointer-events: none;
}
.revived-badge, .hunt-season-badge {
  padding: 0.7cqw 1.7cqw; border-radius: 1.4cqw;
  background: #171221; border: 0.4cqw solid var(--acid); color: var(--acid);
  font: 600 2.9cqw/1.3 var(--font-body); white-space: nowrap;
  box-shadow: 0 0.7cqw 1.2cqw rgba(0, 0, 0, 0.5);
}
.hunt-season-badge { margin-left: auto; display: flex; align-items: center; gap: 1.1cqw; color: var(--cyan); border-color: var(--cyan); }
.hunt-season-badge strong { font: 400 2.4cqw/1.3 var(--font-pixel); }
/* Декор скрыт на обороте; к лицу возвращается сразу вместе с карточкой. */
.plaster, .card-badges, .revived-badge, .hunt-season-badge, .seam {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card.is-flipped :is(.plaster, .card-badges, .revived-badge, .hunt-season-badge, .seam) { visibility: hidden; transition: none; }
.card.covered .card-badges { visibility: hidden; }

/* Первооткрыватель на обороте */
.i-discoverer {
  font-size: 2.7cqw;
  color: var(--text-dim);
  text-align: center;
  padding: 1.4cqw;
  border: 0.3cqw dashed #3a3352;
  border-radius: 1.6cqw;
}
.i-discoverer b { color: var(--acid); font-weight: 500; }
.i-moves p { margin: 0; font-size: 2.7cqw; line-height: 1.3; color: var(--text-dim); font-style: italic; }

/* Не-PS1 стили: картинка в высоком разрешении, без пиксельного масштабирования */
.card:not(.style-ps1) .c-creature,
.card:not(.style-ps1) .c-art-bg { image-rendering: auto; }
.card:not(.style-ps1) .c-art-bg::after { background: radial-gradient(75% 65% at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.4)); }
.c-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-photo.retro { image-rendering: pixelated; }
.c-creature.composite-creature { image-rendering: auto; filter: none; }
.card[data-stage='5'] .c-creature.composite-creature { filter: saturate(1.25) contrast(1.08); }

/* ===== Лёгкая карточка для лент (коллекция, «Мир», выбор бойца, итог пачки) =====
   iOS WebKit делает из 3D-карточки (perspective, preserve-3d, backface-visibility, слои с mix-blend-mode,
   фильтры, бесконечные анимации) несколько композитных слоёв в исходном размере 600×838 — при десятках
   карточек это гигабайты памяти: Mini App вылетал, прокрутка дёргалась. Здесь карточка плоская и статичная;
   полная — только в окне «рассмотреть», в пачке, VS и эволюции. */
.card.lite .card-scale { perspective: none; }
.card.lite .card-tilt, .card.lite .card-flip { transform: none; transform-style: flat; transition: none; }
.card.lite .face { backface-visibility: visible; -webkit-backface-visibility: visible; box-shadow: none; }
.card.lite .face.back,
.card.lite .card-aura, .card.lite .shine, .card.lite .holo,
.card.lite .meme-scanlines, .card.lite .meme-glitch, .card.lite .meme-lag, .card.lite .fried-noise, .card.lite .meme-ghosts, .card.lite .flare,
.card.lite .c-art::after { display: none; }
.card.lite *, .card.lite *::before, .card.lite *::after { animation: none !important; }
.card.lite .frame, .card.lite .face.front, .card.lite .c-photo, .card.lite .c-creature, .card.lite .sticker { filter: none !important; }
.card.lite[data-rarity='epic'] .frame, .card.lite[data-rarity='legendary'] .frame { background-position: 30% 30%; }

/* ===== Жизни и потёртость (features/0016) ===== */
.c-lives { position: absolute; left: 2cqw; top: 6.4cqw; display: flex; gap: 0.6cqw; font-size: 3.4cqw; line-height: 1; }
.c-lives i { font-style: normal; color: #ff3d5a; text-shadow: 0.3cqw 0.3cqw 0 rgba(0, 0, 0, 0.7); }
.c-lives i.off { text-shadow: none; font-size: 1.1em; } /* 💔 — потерянная жизнь (features/0026) */
/* Потёртость — статичный слой поверх лица: царапины, загнутый уголок; на второй потерянной жизни — ещё трещина и пятно */
.wear { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; background-size: 100% 100%; }
.wear-1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88' preserveAspectRatio='none'><g fill='none' stroke='rgba(255,255,255,.28)' stroke-width='.22' stroke-linecap='round'><path d='M6 22 L14 19'/><path d='M44 9 L52 13'/><path d='M8 70 L13 66 L16 67'/><path d='M50 40 L56 35'/></g><path d='M63 78 L53 88 L63 88 Z' fill='rgba(11,10,18,.85)'/><path d='M63 78 L53 88 L55 80 Z' fill='rgba(230,225,240,.55)'/></svg>");
}
.wear-2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88' preserveAspectRatio='none'><g fill='none' stroke='rgba(255,255,255,.3)' stroke-width='.22' stroke-linecap='round'><path d='M6 22 L14 19'/><path d='M44 9 L52 13'/><path d='M8 70 L13 66 L16 67'/><path d='M50 40 L56 35'/><path d='M20 52 L27 49'/><path d='M36 76 L43 73'/></g><path d='M0 30 L6 33 L9 38 L15 40 L19 46 L26 47' fill='none' stroke='rgba(10,8,20,.8)' stroke-width='.6' stroke-linejoin='round'/><path d='M0 30.4 L6 33.4 L9 38.4' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='.25'/><ellipse cx='46' cy='60' rx='6' ry='3.5' fill='rgba(120,90,40,.18)'/><path d='M63 74 L49 88 L63 88 Z' fill='rgba(11,10,18,.85)'/><path d='M63 74 L49 88 L52 77 Z' fill='rgba(230,225,240,.55)'/><path d='M0 0 L7 0 L0 6 Z' fill='rgba(11,10,18,.8)'/></svg>");
}

/* ===== Стадия и эволюция по кнопке (features/0017) ===== */
.c-stage.s2, .c-stage.s3, .c-stage.s4, .c-stage.s5 { text-shadow: 0 0 1.4cqw rgba(200, 255, 46, 0.7); }
.c-evolve {
  position: absolute; left: 50%; top: 2cqw; transform: translateX(-50%); z-index: 4;
  padding: 1cqw 2.4cqw; border-radius: 99px;
  font-family: var(--font-pixel); font-size: 2.3cqw; white-space: nowrap;
  color: #0b0a12; background: #ffd23a; box-shadow: 0 0 2cqw rgba(255, 210, 58, 0.8);
}
/* Готов к эволюции: золотой ореол вокруг карточки (статичный в лентах, мерцает в окне) */
.card.evolve-ready { border-radius: 4.2%; box-shadow: 0 0 0 2px #ffd23a, 0 0 14px rgba(255, 210, 58, 0.55); }
.card.evolve-ready:not(.lite) { animation: evo-glow 1.6s ease-in-out infinite; }
@keyframes evo-glow { 50% { box-shadow: 0 0 0 3px #ffd23a, 0 0 30px rgba(255, 210, 58, 0.9); } }

/* Покерот в забеге «Захват сети» (features/0021) */
.c-net {
  position: absolute; left: 50%; top: 2cqw; transform: translateX(-50%); z-index: 4;
  padding: 1cqw 2.4cqw; border-radius: 99px;
  font-family: var(--font-pixel); font-size: 2.2cqw; white-space: nowrap;
  color: #04131a; background: var(--cyan);
  box-shadow: 0 0 2cqw rgba(61, 242, 255, 0.5);
}
.c-evolve + .c-net { top: 8cqw; }

/* ===== Android: облегчённые эффекты полной карточки (features/0102) =====
   Chromium на Android (Samsung, Huawei, Honor) при 3D-наклоне ломал слои: фон арта съезжал и обрезался, глитч
   рвался. Карточка там переворачивается как на iPhone (safe-flip: одна плоская сторона), а дорогие слои упрощены:
   без смешивания цветов, масок и фильтров на срезах глитча, без анимации фильтра blur и перерисовки рамки. */
.card.fx-safe :is(.shine, .sheen, .flare) { mix-blend-mode: normal; }
.card.fx-safe .shine { opacity: 0.5; }
.card.fx-safe .holo, .card.fx-safe .c-art::after { display: none; }
.card.fx-safe .meme-glitch::before, .card.fx-safe .meme-glitch::after { filter: none; }
.card.fx-safe .c-art.creature-mask :is(.meme-lag, .fried-noise) { display: none; }
.card.fx-safe .c-art.creature-mask .meme-scanlines { mask-image: none; -webkit-mask-image: none; }
.card.fx-safe :is(.frame, .card-aura) { animation: none; }
.card.fx-safe:is([data-rarity='epic'], [data-rarity='legendary']) .frame { background-position: 30% 30%; }
.card.fx-safe .c-creature { filter: none; }
.card.fx-safe .card-tilt { will-change: transform; }