/* Galaxy 71 — NFT карточки звёзд (стили).
 * Copyright © 2026 Bratish Ltd & ExeCode Studio. All rights reserved.
 *
 * Стили извлечены из утверждённого mockups/mockup_nft_cards.html (Ехе 2026-04-23).
 * SVG-генератор находится в static/nft.js.
 */

@import url('_tokens.css');

@import url('_motion.css');
/* ===== Карточка ===== */
.nft-card {
  width: 330px;
  background: linear-gradient(160deg, #14142a, #0a0a18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(var(--black-rgb), 0.6), 0 0 0 1px rgba(var(--white-rgb), 0.04);
  transition: transform .2s;
}
.nft-card:hover { transform: translateY(-4px); }

/* Рамка по редкости */
.nft-card.common    { box-shadow: 0 20px 60px rgba(var(--black-rgb), 0.6), 0 0 0 1px rgba(var(--rarity-common-rgb), 0.3); }
.nft-card.uncommon  { box-shadow: 0 20px 60px rgba(var(--black-rgb), 0.6), 0 0 0 1px rgba(var(--rarity-uncommon-rgb), 0.5), 0 0 16px rgba(var(--rarity-uncommon-rgb), 0.15); }
.nft-card.rare      { box-shadow: 0 20px 60px rgba(var(--black-rgb), 0.6), 0 0 0 1px rgba(var(--rarity-rare-rgb), 0.5), 0 0 20px rgba(var(--rarity-rare-rgb), 0.15); }
.nft-card.epic      { box-shadow: 0 20px 60px rgba(var(--black-rgb), 0.6), 0 0 0 2px rgba(var(--violet-rgb), 0.6), 0 0 28px rgba(var(--violet-rgb), 0.2); }
.nft-card.legendary { box-shadow: 0 20px 60px rgba(var(--black-rgb), 0.6), 0 0 0 2px rgba(var(--gold-bright-rgb), 0.8), 0 0 36px rgba(var(--gold-bright-rgb), 0.25); }
.nft-card.mythic {
  box-shadow: 0 20px 60px rgba(var(--black-rgb), 0.6),
              0 0 0 2px rgba(var(--rarity-epic-pink-rgb), 0.9),
              0 0 40px rgba(var(--rarity-epic-pink-rgb), 0.3),
              0 0 60px rgba(var(--rarity-epic-green-rgb), 0.15);
}

/* SVG-контейнер */
.nft-card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* NFT v2 WebGL canvas: жёсткая изоляция repaint-барьером.
     В /cabinet и /admin/orphans есть sticky-элементы (header/toolbar/aside) —
     при скролле они пересчитываются и каскадные repaint'ы задевали canvas внутри,
     вызывая визуальное «трясение». contain: paint + content-visibility говорит
     браузеру: всё что внутри этого блока — изолировано, repaint'ы родителя не задевают. */
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}
.nft-card-visual svg,
.nft-card-visual canvas {
  width: 100%; height: 100%;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Бейдж редкости.
 * 2026-05-17 фикс: position по умолчанию static. absolute ТОЛЬКО внутри .nft-card-visual
 * (иначе badge всплывает в верхний левый угол body когда родитель не имеет position:relative —
 * репорт Ехе: «COMMON-плашка торчит в углу страницы в админке»). */
.nft-rarity-badge {
  padding: 5px 12px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.nft-card-visual .nft-rarity-badge {
  position: absolute; top: 12px; left: 12px;
}
.nft-rarity-common    { background: rgba(var(--rarity-common-bg-rgb), 0.4); color: #d0d0e0; border: 1px solid rgba(var(--rarity-common-border-rgb), 0.3); }
.nft-rarity-uncommon  { background: rgba(var(--rarity-uncommon-rgb), 0.2); color: #a8ffc4; border: 1px solid rgba(var(--rarity-uncommon-rgb), 0.5); }
.nft-rarity-rare      { background: rgba(var(--rarity-rare-rgb), 0.25); color: #a8c4ff; border: 1px solid rgba(var(--rarity-rare-rgb), 0.5); }
.nft-rarity-epic      { background: rgba(var(--violet-rgb), 0.25); color: #d4b0ff; border: 1px solid rgba(var(--violet-rgb), 0.6); }
.nft-rarity-legendary { background: rgba(var(--gold-bright-rgb), 0.3); color: #ffe494; border: 1px solid rgba(var(--gold-bright-rgb), 0.8); text-shadow: 0 0 8px rgba(var(--gold-bright-rgb), 0.5); }
.nft-rarity-mythic {
  background: linear-gradient(90deg, rgba(var(--rarity-epic-pink-rgb), 0.4), rgba(var(--rarity-epic-green-rgb), 0.4));
  color: #fff; border: 1px solid rgba(var(--rarity-legendary-rgb), 0.8);
  text-shadow: 0 0 10px rgba(var(--rarity-legendary-rgb), 0.7);
  animation: nft-mythic-glow 2.5s ease-in-out infinite;
}
@keyframes nft-mythic-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--rarity-legendary-rgb), 0.3); }
  50%      { box-shadow: 0 0 16px rgba(var(--rarity-legendary-rgb), 0.8); }
}

/* Логотип Galaxy 71 */
.nft-card-brand {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; color: #ffd369;
  font-weight: 700; letter-spacing: .5px;
  opacity: .75;
}

/* Инфо-блок */
.nft-card-info {
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(var(--white-rgb), 0.04);
}
.nft-card-name {
  font-size: 20px; font-weight: 700;
  line-height: 1.2; margin: 0 0 6px;
  /* 2026-05-21: единая высота имени — ровно 2 строки (под 3 слова),
     карточки не прыгают; имя длиннее 2 строк — обрезается «…». */
  min-height: 48px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nft-card.common    .nft-card-name { color: #d8d8e8; }
.nft-card.uncommon  .nft-card-name { color: #a8ffc4; }
.nft-card.rare      .nft-card-name { color: #a8c4ff; }
.nft-card.epic      .nft-card-name {
  background: linear-gradient(90deg, #d4b0ff, #f8e1ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nft-card.legendary .nft-card-name {
  background: linear-gradient(90deg, #ffd369, #ffa050, #ff7088);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nft-card.mythic .nft-card-name {
  background: linear-gradient(90deg, #ff6ac8, #b388ff, #6ae3ff, #7fffd4, #ffd369);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nft-name-rainbow 8s linear infinite;
  background-size: 400% 100%;
}
@keyframes nft-name-rainbow {
  from { background-position: 0% 50%; }
  to   { background-position: 400% 50%; }
}

.nft-card-owner { font-size: 12px; color: #8090a8; margin-bottom: 14px; }
.nft-card-owner b { color: #ffd369; font-weight: 600; }

.nft-card-meta {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: 11px; color: #7080a0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  border-top: 1px solid rgba(var(--white-rgb), 0.04);
  padding-top: 12px; margin-top: 10px;
}
.nft-card-meta .k { color: #50607a; letter-spacing: .5px; text-transform: uppercase; font-size: 10px; }
.nft-card-meta .v { color: #b8c4d8; text-align: right; word-break: break-all; }
.nft-card-meta .v.hex { color: #8ab4ff; }
.nft-card-meta .v.code { color: #ffd369; font-weight: 600; letter-spacing: .5px; }

.nft-card-actions {
  display: flex; gap: 8px; margin-top: 14px;
}
.nft-card-btn {
  flex: 1;
  padding: 8px 12px; font-size: 12px; font-weight: 600;
  background: rgba(var(--gold-bright-rgb), 0.12); color: #ffd369;
  border: 1px solid rgba(var(--gold-bright-rgb), 0.3);
  border-radius: 8px; cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.nft-card-btn:hover { background: rgba(var(--gold-bright-rgb), 0.2); }
.nft-card-btn.secondary {
  background: rgba(var(--rarity-rare-rgb), 0.1); color: #8ab4ff;
  border-color: rgba(var(--rarity-rare-rgb), 0.3);
}
.nft-card-btn.secondary:hover { background: rgba(var(--rarity-rare-rgb), 0.2); }

/* Secondary actions: каждая в отдельной строке (block button/link).
   Используется renderCard в nft_v3.js для public_page/verify/claim/delete
   когда они не входят в PRIMARY flex-группу (download/share). */
.nft-card-action-row { margin-top: 10px; }
.nft-card-action-row .nft-card-btn {
  flex: none; display: block; width: 100%;
  text-align: center; text-decoration: none;
  box-sizing: border-box;
}

/* Marketplace «продать / снять с продажи» — блок .mk-row в .nft-card-info.
   Общий для /cabinet и /gallery (логика — static/mk_market.js). */
.mk-row .mk-price-row { display: flex; gap: 6px; margin-bottom: 6px; }
.mk-row .mk-price-row .cur {
  display: flex; align-items: center; padding: 0 10px;
  background: #1a1a30; border: 1px solid #2a2a48; border-radius: 7px; color: #8090b0;
}
.mk-row .mk-price-inp {
  flex: 1; min-width: 0; background: #1a1a30; border: 1px solid #2a2a48;
  border-radius: 7px; color: #e8e8f0; padding: 8px; font-size: 14px;
  -moz-appearance: textfield; appearance: textfield;
}
.mk-row .mk-price-inp::-webkit-outer-spin-button,
.mk-row .mk-price-inp::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.mk-row .mk-price-inp:focus { outline: none; border-color: #ffd369; }
.mk-row .mk-listed {
  text-align: center; font-size: 12.5px; color: #ffd369; margin-bottom: 6px;
  background: rgba(255,211,105,0.08); border: 1px solid rgba(255,211,105,0.25);
  border-radius: 7px; padding: 6px;
}
.nft-card-btn.mk-sell { background: #ffd369; color: #1a1400; border-color: #ffd369; }
.nft-card-btn.mk-unlist { background: transparent; color: #ff6b6b; border-color: #ff6b6b; }

/* Grand-карты: фиолетовый акцент. Применяется к карточке (glow) и badge
   (override golden craft-badge при `class="craft-badge grand-badge"`).
   grand_variant: 1=magnetar, 2=galaxy, 3=blackhole (см. nft_v3.js GRAND_VARIANT_LABELS). */
.nft-card.is-grand {
  box-shadow: 0 0 0 1px rgba(192,132,255,0.55), 0 0 26px rgba(192,132,255,0.22);
}
.craft-badge.grand-badge {
  border-color: #c084ff;
  color: #c084ff;
  text-shadow: 0 0 8px rgba(192,132,255,0.4);
}

/* TYPE-бейдж: craft — золотой, found (найдена на карте) — спокойный синий. 2026-05-21. */
.craft-badge { color: #ffd369; font-weight: 600; }
.craft-badge.found-badge { color: #8fb7ff; }


/* ============ АНИМАЦИИ внутри SVG ============
 * Ключ к работе анимаций для SVG-элементов:
 *   transform-box: view-box  (НЕ fill-box! fill-box ломается для <circle>)
 *   transform-origin: center (или px относительно viewBox)
 *
 * Все opacity/scale-анимации работают на любом SVG-элементе через CSS.
 * Прозрачность сильнее (был 0.82 → теперь 0.65) чтобы breath был заметнее.
 */

@keyframes nft-breath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .65; transform: scale(1.06); }
}
@keyframes nft-pulse-core {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(0.92); }
}
@keyframes nft-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes nft-spin-med  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes nft-spin-fast { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes nft-twinkle {
  0%, 100% { opacity: .9; }
  50%      { opacity: .15; }
}
@keyframes nft-ray-flicker {
  0%, 100% { opacity: .45; }
  50%      { opacity: .95; }
}
@keyframes nft-flash {
  0%, 100% { opacity: .8; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* Применение: transform-box: view-box → координаты SVG viewBox (200,200 = центр 400x400) */
svg.nft-svg .a-breath    { animation: nft-breath 3.5s ease-in-out infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-core      { animation: nft-pulse-core 2s ease-in-out infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-spin-slow { animation: nft-spin-slow 40s linear infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-spin-med  { animation: nft-spin-med  22s linear infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-spin-fast { animation: nft-spin-fast 12s linear infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-orbit     { animation: nft-spin-med 16s linear infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-orbit-fast{ animation: nft-spin-fast 9s linear infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-twinkle   { animation: nft-twinkle 3s ease-in-out infinite; }
svg.nft-svg .a-twinkle-2 { animation: nft-twinkle 4.5s ease-in-out infinite .5s; }
svg.nft-svg .a-twinkle-3 { animation: nft-twinkle 2.2s ease-in-out infinite 1.2s; }
svg.nft-svg .a-rays      { animation: nft-ray-flicker 2.4s ease-in-out infinite; }
svg.nft-svg .a-flash     { animation: nft-flash 3s ease-in-out infinite; transform-origin: 200px 200px; transform-box: view-box; }
svg.nft-svg .a-spin-rev  { animation: nft-spin-med 22s linear infinite reverse; transform-origin: 200px 200px; transform-box: view-box; }

/* prefers-reduced-motion — уважаем */
@media (prefers-reduced-motion: reduce) {
  svg.nft-svg .a-breath, svg.nft-svg .a-core,
  svg.nft-svg .a-spin-slow, svg.nft-svg .a-spin-med, svg.nft-svg .a-spin-fast,
  svg.nft-svg .a-orbit, svg.nft-svg .a-orbit-fast,
  svg.nft-svg .a-twinkle, svg.nft-svg .a-twinkle-2, svg.nft-svg .a-twinkle-3,
  svg.nft-svg .a-rays, svg.nft-svg .a-flash, svg.nft-svg .a-spin-rev,
  .nft-card.mythic .nft-card-name,
  .nft-rarity-mythic { animation: none !important; }
}

/* ===== Модалка карточки звезды на /play (View-режим) ===== */
.zvezda-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.zvezda-modal[hidden] { display: none; }
.zvezda-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 5, 24, 0.78);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
/* Кант вокруг карточки: padding 36px по горизонтали = +50% к старому 24px,
   визуально воздух вокруг карточки. overflow-x:hidden убирает горизонтальный
   scrollbar (он появлялся из-за box-shadow карточки выходящего за 330px). */
.zvezda-modal__body {
  position: relative; z-index: 1;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  /* 6.1 (Ехе 2026-05-18): scrollbar обёртки убран — при flip rotateY он
   * мерцал светлой полосой справа. Внутренний скролл теперь на .nft-card-back. */
  overflow: hidden;
  padding: 18px 36px;
}
.zvezda-modal__close {
  position: absolute; top: 4px; right: 4px;
  width: 36px; height: 36px;
  border: 1px solid rgba(var(--white-rgb), 0.18);
  background: rgba(20, 20, 42, 0.9);
  color: #e7ecf3;
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  cursor: pointer; z-index: 2;
}
.zvezda-modal__close:hover { background: rgba(40, 40, 70, 1); }

/* Кнопка claim в карточке (orange-amber, как owner-orphan) */
.nft-card-actions .nft-card-btn.act-claim {
  background: linear-gradient(135deg, #ffb84a, #ff8c1a);
  color: #1a1a1a;
  font-weight: 700;
  border: none;
}
.nft-card-actions .nft-card-btn.act-claim:hover {
  background: linear-gradient(135deg, #ffc66e, #ffa040);
}
.nft-card-actions .nft-card-btn.act-claim:disabled {
  opacity: .55; cursor: wait;
}

/* ===== Toggle режима в баре /play (две кнопки с подсветкой активной) ===== */
.play-mode-group {
  display: inline-flex;
  gap: 6px;
}
.play-mode-group .play-mode-btn {
  opacity: 0.55;
  transition: opacity .15s, background .15s;
}
.play-mode-group .play-mode-btn.active {
  opacity: 1;
  background: rgba(76, 179, 255, 0.18);
  border-color: rgba(76, 179, 255, 0.55);
  box-shadow: inset 0 -2px 0 #4cb3ff;
}

@media (max-width: 380px) {
  .zvezda-modal__body { padding: 14px 22px; }
  .nft-card { width: calc(100vw - 60px); max-width: 330px; }
}


/* =============================================================
 * BACK-SIDE FLIP (по дизайну mockups/nft_card_back_v3.html + mockup_render_card_unified.html)
 * Каждая карточка завёрнута в .card-scene > .card-flip > [.nft-card, .nft-card-back]
 * Кнопка [data-nft-action="passport"] на front переворачивает → rotateY(180deg)
 * Кнопка [data-nft-action="back"] на back возвращает обратно
 * ============================================================= */
.card-scene { perspective: 1400px; user-select: none; position: relative; }
.card-flip {
  position: relative; width: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.card-scene.flipped .card-flip { transform: rotateY(180deg); }
.card-flip > .nft-card { backface-visibility: hidden; }
.card-flip > .nft-card-back {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  transform: rotateY(180deg); backface-visibility: hidden;
  background: linear-gradient(165deg, #16162e, #0b0b1a);
  border-radius: 14px;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.05);
}

.nft-card-back .back-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 15px; border-bottom: 1px solid #2a2a48;
  flex-wrap: wrap; row-gap: 4px;
}
.nft-card-back .back-head .ttl {
  font-size: 12px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: #ffd369;
}
.nft-card-back .back-head .rar { font-size: 11px; font-weight: 800; color: #8ab4ff; }
.nft-card-back .back-head .series {
  flex-basis: 100%;
  font-size: 9.5px; color: #8090a8; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  text-align: right;
}
.nft-card-back .back-head .series b { color: #ffd369; font-weight: 800; }

.nft-card-back .back-body {
  padding: 12px 15px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(138,180,255,0.28) transparent;
}
.nft-card-back .back-body::-webkit-scrollbar { width: 6px; }
.nft-card-back .back-body::-webkit-scrollbar-track { background: transparent; }
.nft-card-back .back-body::-webkit-scrollbar-thumb {
  background: rgba(138,180,255,0.25); border-radius: 3px;
}
.nft-card-back .back-body::-webkit-scrollbar-thumb:hover {
  background: rgba(138,180,255,0.45);
}

.nft-card-back .sect-ttl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #ffd369; border-left: 2px solid #ffd369;
  padding-left: 7px; margin-bottom: 6px; font-weight: 700;
}
.nft-card-back .passport {
  display: grid; grid-template-columns: auto 1fr;
  gap: 5px 10px; font-size: 11px;
}
.nft-card-back .passport .k {
  color: #8090a8; text-transform: uppercase; letter-spacing: 0.4px;
  font-size: 10px; font-weight: 600;
}
.nft-card-back .passport .v {
  text-align: right; font-variant-numeric: tabular-nums; color: #d8e0f0;
}
.nft-card-back .passport .v.code {
  color: #ffd369; font-family: ui-monospace, Consolas, monospace; font-size: 10px;
}
.nft-card-back .stats {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 6px 9px; align-items: center; font-size: 10.5px;
}
.nft-card-back .stats .lbl {
  color: #a0b0c8; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600;
}
.nft-card-back .stats .track {
  height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
}
.nft-card-back .stats .fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--acc, #8ab4ff), color-mix(in srgb, var(--acc, #8ab4ff) 55%, #fff));
}
.nft-card-back .stats .num {
  color: #b8c4d8; min-width: 34px; text-align: right; font-weight: 600;
}
.nft-card-back .lore {
  font-size: 11.5px; line-height: 1.55; color: #c0c8d8; font-style: italic;
  background: rgba(138,180,255,0.04);
  border: 1px solid rgba(138,180,255,0.18); border-radius: 8px; padding: 10px 12px;
}
.nft-card-back .craft-chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px;
  background: rgba(255,211,105,0.07);
  border: 1px solid rgba(255,211,105,0.28);
  border-radius: 8px; padding: 10px 12px;
  color: #d8e0f0;
}
.nft-card-back .craft-chain b { color: #e8e8f0; font-weight: 700; }
.nft-card-back .craft-chain .arrow { color: #8090a8; }
.nft-card-back .craft-chain .out { color: #ffd369; font-weight: 800; }
.nft-card-back .natural-note {
  font-size: 11px; color: #a0b0c8; font-style: italic;
  border: 1px dashed #3a3a58; border-radius: 8px; padding: 10px 12px;
}

.nft-card-back .cs-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.nft-card-back .cs-item {
  display: grid; grid-template-columns: 8px 1fr auto;
  gap: 4px 8px; align-items: start;
  padding: 6px 9px;
  background: rgba(138,180,255,0.04);
  border: 1px solid rgba(138,180,255,0.12);
  border-radius: 6px;
  transition: background .2s, border-color .2s, transform .15s;
  cursor: default;
}
.nft-card-back .cs-item:hover {
  background: rgba(138,180,255,0.12);
  border-color: rgba(138,180,255,0.4);
  transform: translateX(2px);
}
.nft-card-back .cs-item:hover .cs-name { color: #fff; }
.nft-card-back .cs-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 4px;
  box-shadow: 0 0 6px currentColor;
}
.nft-card-back .cs-name {
  font-size: 11px; font-weight: 600; color: #d8e0f0;
  grid-column: 2; line-height: 1.25;
}
.nft-card-back .cs-chunk {
  font-size: 10px; color: #ffd369;
  font-family: ui-monospace, Consolas, monospace;
  grid-column: 3; align-self: center;
}
.nft-card-back .cs-sub {
  grid-column: 2; font-size: 9.5px;
  color: #8090a8; text-transform: uppercase; letter-spacing: 0.3px;
  line-height: 1.2;
}

.nft-card-back .proof {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 9px; color: #5a6080;
  display: flex; gap: 8px; align-items: center;
  padding: 6px 0 0; border-top: 1px dashed rgba(138,180,255,0.18);
  margin-top: 4px; line-height: 1.2;
}
.nft-card-back .proof .sig-label { color: #8090a8; font-weight: 700; flex-shrink: 0; }
.nft-card-back .proof .sig-value { color: #8ab4ff; word-break: break-all; }

.nft-card-back .back-actions {
  padding: 10px 15px 12px; display: flex; flex-direction: column; gap: 7px;
}

/* Кнопка «✦ Паспорт звезды →» на front — block-row фиолетовая (как в утв. мокапе
   mockups/mockup_render_card_unified.html:341-345). 17.05 Ехе хотел compact — я
   сделал dashed/transparent самовольно, не сходилось с мокапом. Возврат. */
.nft-card-action-row .nft-card-btn[data-nft-action="passport"] {
  background: rgba(192,132,255,0.10);
  color: #c084ff;
  border-color: rgba(192,132,255,0.35);
}

/* Shimmer glow для топ-тиров на back */
@keyframes shimmer-gold {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,211,105,0.45), 0 0 18px rgba(255,211,105,0.20); }
  50%      { box-shadow: 0 0 0 1px rgba(255,211,105,0.80), 0 0 36px rgba(255,211,105,0.45); }
}
.nft-card-back.is-legendary { animation: shimmer-gold 3.5s ease-in-out infinite; }
@keyframes shimmer-rainbow {
  0%   { box-shadow: 0 0 0 1px rgba(255,110,199,0.5), 0 0 24px rgba(255,110,199,0.4); }
  25%  { box-shadow: 0 0 0 1px rgba(127,255,212,0.5), 0 0 24px rgba(127,255,212,0.4); }
  50%  { box-shadow: 0 0 0 1px rgba(138,180,255,0.5), 0 0 24px rgba(138,180,255,0.4); }
  75%  { box-shadow: 0 0 0 1px rgba(255,211,105,0.5), 0 0 24px rgba(255,211,105,0.4); }
  100% { box-shadow: 0 0 0 1px rgba(255,110,199,0.5), 0 0 24px rgba(255,110,199,0.4); }
}
.nft-card-back.is-mythic { animation: shimmer-rainbow 6s linear infinite; }


/* === 6.1 (Ехе 2026-05-18): scrollbar при flip карточки на /play.
 * Причина: .zvezda-modal__body имел overflow-y:auto + max-height:calc(100vh-24px).
 * Во время rotateY(180deg) контент back-side временно distort'ил bbox →
 * scrollbar мигал. Фикс: убран overflow с обёртки (выше в этом файле,
 * .zvezda-modal__body), внутренний скролл теперь на самом back-side. */
.card-flip > .nft-card-back { overflow-y: auto; overflow-x: hidden; }

/* Карточка-памятник (сгоревшая в крафте звезда) — золотой мемориал. 2026-06-09 */
.nft-card.is-monument { border-color: rgba(255,207,90,.45); box-shadow: 0 0 0 1px rgba(255,207,90,.25), 0 6px 28px rgba(255,180,40,.18); }
.nft-card.is-monument .nft-rarity-badge { background: rgba(255,207,90,.18); color: #ffcf5a; border: 1px solid rgba(255,207,90,.5); }
.nft-card.is-monument .nft-card-name { color: #ffcf5a; }
.nft-monument-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(255,207,90,.16); color: #ffcf5a; border: 1px solid rgba(255,207,90,.45); }
.nft-card-monument { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid rgba(255,207,90,.3); border-radius: 10px; background: linear-gradient(180deg, rgba(255,207,90,.07), rgba(255,207,90,.02)); }
.nft-card-monument .mon-epi { font-size: 12px; line-height: 1.5; color: #d8c89a; }
.nft-card-monument .mon-line { margin-top: 6px; font-size: 11px; color: #9aa6b2; }
.nft-card-monument .mon-line b { color: #ffe6a3; }
/* Эпитафия памятника на ОБОРОТЕ карточки (перенесена с лица 22.06). */
.back-monument { margin-bottom: 12px; padding: 11px 12px; border: 1px solid rgba(255,207,90,.3); border-radius: 10px; background: linear-gradient(180deg, rgba(255,207,90,.07), rgba(255,207,90,.02)); }
.back-monument .sect-ttl { color: #ffcf5a; margin-bottom: 6px; }
.back-monument .mon-epi { font-size: 12.5px; line-height: 1.5; color: #d8c89a; }
.back-monument .mon-line { margin-top: 6px; font-size: 11px; color: #9aa6b2; }
.back-monument .mon-line b { color: #ffe6a3; }