/* css/card-backs.css — рубашки карт из магазина (атрибут data-back).
 *
 * Жили в css/table-premium.css, который грузит только покерный стол: купленная рубашка
 * не работала ни в блэкджеке, ни в баккаре — половина игр рума не показывала косметику,
 * за которую заплачено. Вынесено отдельным файлом, чтобы его подключали все столы.
 *
 * Разметка у столов разная: в покере `.card.card-back[data-back]`, в казино —
 * `.cardx .card-back[data-back]`. Селекторы ниже покрывают оба варианта.
 */

/* ---------- рубашки карт (data-back) ---------- */
.card.card-back { position: relative; }
/* Гасим базовый градиент комнаты, чтобы под купленной рубашкой не просвечивал фон
   стола. Правило обязано стоять ДО правил конкретных рубашек: специфичность у них
   одинаковая ((0,3,0)), и решает порядок. Раньше оно стояло в конце файла и стирало
   background-image у самих рубашек — в казино от купленного дизайна оставалась только
   цветная рамка, а рисунок не показывался вовсе. */
.cardx .card-back[data-back] { background-image: none; }
/* монограмма в цвет рубашки: раньше content стирался у всех, а возвращался не всем —
   у walnut/leather/circuit/bronza/midnight_neon оставался пустой чёрный медальон */
.card.card-back[data-back] .card-back-inner::after { content: 'MB'; color: inherit; }
.cardx .card-back[data-back] .card-back-inner::after { content: 'MB'; color: inherit; }
.card.card-back[data-back="classic_blue"]  { background: repeating-linear-gradient(45deg, #2d49b8 0 3px, #1f3690 3px 6px); border-color: #dfe6ff; }
.cardx .card-back[data-back="classic_blue"]  { background: repeating-linear-gradient(45deg, #2d49b8 0 3px, #1f3690 3px 6px); border-color: #dfe6ff; }
.card.card-back[data-back="classic_blue"] .card-back-inner { border-color: rgba(255,255,255,.55); color: #fff; }
.cardx .card-back[data-back="classic_blue"] .card-back-inner { border-color: rgba(255,255,255,.55); color: #fff; }
.card.card-back[data-back="gold_monogram"] { background: #0c0a12; border-color: #e8c569; }
.cardx .card-back[data-back="gold_monogram"] { background: #0c0a12; border-color: #e8c569; }
.card.card-back[data-back="gold_monogram"] .card-back-inner { border-color: rgba(232,197,105,.8); color: #e8c569; }
.cardx .card-back[data-back="gold_monogram"] .card-back-inner { border-color: rgba(232,197,105,.8); color: #e8c569; }
.card.card-back[data-back="gold_monogram"] .card-back-inner::after { content: 'MB'; color: #e8c569; }
.cardx .card-back[data-back="gold_monogram"] .card-back-inner::after { content: 'MB'; color: #e8c569; }
.card.card-back[data-back="platinum"] { background: linear-gradient(160deg, #b9bdc5, #e9ebf0 50%, #9ea3ad); border-color: #fff; }
.cardx .card-back[data-back="platinum"] { background: linear-gradient(160deg, #b9bdc5, #e9ebf0 50%, #9ea3ad); border-color: #fff; }
.card.card-back[data-back="platinum"] .card-back-inner { border-color: rgba(60,64,72,.6); color: #3a3e46; }
.cardx .card-back[data-back="platinum"] .card-back-inner { border-color: rgba(60,64,72,.6); color: #3a3e46; }
.card.card-back[data-back="platinum"] .card-back-inner::after { content: 'MB'; color: #3a3e46; }
.cardx .card-back[data-back="platinum"] .card-back-inner::after { content: 'MB'; color: #3a3e46; }
.card.card-back[data-back="emerald"] { background: radial-gradient(circle at 50% 40%, #1f8f57, #0f5a38 70%); border-color: #e8c569; }
.cardx .card-back[data-back="emerald"] { background: radial-gradient(circle at 50% 40%, #1f8f57, #0f5a38 70%); border-color: #e8c569; }
.card.card-back[data-back="emerald"] .card-back-inner { border-color: rgba(232,197,105,.75); color: #e8c569; }
.cardx .card-back[data-back="emerald"] .card-back-inner { border-color: rgba(232,197,105,.75); color: #e8c569; }
.card.card-back[data-back="emerald"] .card-back-inner::after { content: ''; width: 38%; height: 38%; background: #e8c569; transform: rotate(45deg); border-radius: 2px; }
.cardx .card-back[data-back="emerald"] .card-back-inner::after { content: ''; width: 38%; height: 38%; background: #e8c569; transform: rotate(45deg); border-radius: 2px; }
.card.card-back[data-back="ruby_damask"] { background: repeating-conic-gradient(from 45deg, #7a1020 0deg 45deg, #a11a30 45deg 90deg); border-color: #f0c2cc; }
.cardx .card-back[data-back="ruby_damask"] { background: repeating-conic-gradient(from 45deg, #7a1020 0deg 45deg, #a11a30 45deg 90deg); border-color: #f0c2cc; }
.card.card-back[data-back="ruby_damask"] .card-back-inner { border-color: rgba(255,220,228,.6); color: #ffd9e1; }
.cardx .card-back[data-back="ruby_damask"] .card-back-inner { border-color: rgba(255,220,228,.6); color: #ffd9e1; }
.card.card-back[data-back="ruby_damask"] .card-back-inner::after { content: ''; width: 34%; height: 34%; background: #ffd9e1; transform: rotate(45deg); border-radius: 1px; box-shadow: 0 0 0 2px #7a1020, 0 0 0 3px #ffd9e1; }
.cardx .card-back[data-back="ruby_damask"] .card-back-inner::after { content: ''; width: 34%; height: 34%; background: #ffd9e1; transform: rotate(45deg); border-radius: 1px; box-shadow: 0 0 0 2px #7a1020, 0 0 0 3px #ffd9e1; }
.card.card-back[data-back="walnut"] { background: repeating-linear-gradient(100deg, #5a3a22 0 2px, #7a4e2e 2px 4px); border-color: #c9a46a; }
.cardx .card-back[data-back="walnut"] { background: repeating-linear-gradient(100deg, #5a3a22 0 2px, #7a4e2e 2px 4px); border-color: #c9a46a; }
.card.card-back[data-back="walnut"] .card-back-inner { border-color: rgba(201,164,106,.6); color: #e9cf9e; }
.cardx .card-back[data-back="walnut"] .card-back-inner { border-color: rgba(201,164,106,.6); color: #e9cf9e; }
.card.card-back[data-back="leather"] { background: #4a2f1c; border-color: #e8c569; }
.cardx .card-back[data-back="leather"] { background: #4a2f1c; border-color: #e8c569; }
.card.card-back[data-back="leather"] .card-back-inner { border: 1px dashed rgba(232,197,105,.7); color: #e8c569; }
.cardx .card-back[data-back="leather"] .card-back-inner { border: 1px dashed rgba(232,197,105,.7); color: #e8c569; }
.card.card-back[data-back="circuit"] { background: #061a16 repeating-linear-gradient(0deg, rgba(55,226,199,.25) 0 1px, transparent 1px 6px); border-color: #37e2c7; box-shadow: 0 0 8px rgba(55,226,199,.45); }
.cardx .card-back[data-back="circuit"] { background: #061a16 repeating-linear-gradient(0deg, rgba(55,226,199,.25) 0 1px, transparent 1px 6px); border-color: #37e2c7; box-shadow: 0 0 8px rgba(55,226,199,.45); }
.card.card-back[data-back="circuit"] .card-back-inner { border-color: rgba(55,226,199,.8); color: #37e2c7; }
.cardx .card-back[data-back="circuit"] .card-back-inner { border-color: rgba(55,226,199,.8); color: #37e2c7; }
.card.card-back[data-back="bronza_back"] { background: radial-gradient(circle at 30% 20%, #c47a3a, #5a3a1a 70%); border-color: #f0c48a; }
.cardx .card-back[data-back="bronza_back"] { background: radial-gradient(circle at 30% 20%, #c47a3a, #5a3a1a 70%); border-color: #f0c48a; }
.card.card-back[data-back="bronza_back"] .card-back-inner { border-color: rgba(240,196,138,.7); color: #f5d2a0; }
.cardx .card-back[data-back="bronza_back"] .card-back-inner { border-color: rgba(240,196,138,.7); color: #f5d2a0; }
.card.card-back[data-back="midnight_neon"] { background: #0b0b1a; border-color: #6f7aff; box-shadow: 0 0 8px rgba(111,122,255,.5); }
.cardx .card-back[data-back="midnight_neon"] { background: #0b0b1a; border-color: #6f7aff; box-shadow: 0 0 8px rgba(111,122,255,.5); }
.card.card-back[data-back="midnight_neon"] .card-back-inner { border-color: rgba(111,122,255,.8); color: #aab2ff; }
.cardx .card-back[data-back="midnight_neon"] .card-back-inner { border-color: rgba(111,122,255,.8); color: #aab2ff; }

/* ---------- медальон рубашки в казино ---------- */
/* В блэкджеке рубашка была одним div без внутреннего элемента: добавляем ему тот же
   медальон, что и на покерном столе, иначе монограмма рисоваться некуда. */
.cardx .card-back .card-back-inner {
  position: absolute; inset: 26%;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 6px;
  display: grid; place-items: center;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .06em;
  color: rgba(255,255,255,.8);
}
/* Монограмма нужна и без косметики. Рамку медальона выше добавили с центрированием
   по сетке, шрифтом и цветом — то есть под текст, — но сам content: 'MB' описан только
   для [data-back], для купленной рубашки. Игрок без косметики видел на закрытой карте
   пустой прямоугольник и принимал его за недорисованный слой. Цвет берём inherit:
   варианты [data-back] переопределяют color у самого медальона, и монограмма
   подхватывает их, а по умолчанию остаётся белёсой под базовый градиент рубашки. */
.cardx .card-back .card-back-inner::after { content: 'MB'; color: inherit; }


/* ---------- баккара ---------- */
/* Карта баккары рисуется своей разметкой (.mb-card-back в js/baccarat-table.js), и до
   сих пор ни один селектор этого файла в неё не попадал — купленная рубашка в баккаре
   не показывалась вовсе, хотя файл на страницу подключён. Скрипт теперь вешает карте
   классы cardx/card-back, и правила выше работают как есть; здесь остаётся снять
   собственную монограмму баккары в углу, иначе она задвоится с медальоном. */
.mb-card-back[data-back]::after { content: none; }