/* ============================================================
   ОБЩИЙ ВИД КАЗИНО — карты, кости, фишки, стол.
   Подключается после style.css и перекрывает плоскую отрисовку:
   один файл поднимает вид сразу у всех карточных и кубиковых игр.
   ============================================================ */

:root {
  --felt: url('/img/games/shared/felt.jpg?v=52');
  --card-back: url('/img/games/shared/card-back.png?v=52');
}

/* ---------- игровой стол ---------- */

.card-table,
.g-stage .table-felt {
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .55)),
    var(--felt);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 207, 77, .22);
  border-radius: 18px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- игральные карты ---------- */

.pcard,
.bj-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #f3f4f8 55%, #e7e9f0 100%);
  color: #16181f;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 9px;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

/* Блик по глянцу карты */
.pcard::after,
.bj-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%);
  opacity: .5;
  pointer-events: none;
}

.pcard.red,
.bj-card.red { color: #d32f3d; }

.pcard .mid,
.bj-card .mid {
  font-size: 210%;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* Нижний угол карты (перевёрнутые ранг и масть) на мелком размере читается
   как мусор вроде «♦9». В настоящих играх на маленьких картах его не рисуют —
   убираем, оставляем верхний угол и крупную масть по центру. */
.pcard .bot,
.bj-card .bot { display: none; }

.pcard > div:first-child,
.bj-card > div:first-child {
  font-size: 105%;
  letter-spacing: -.02em;
  line-height: 1;
}

/* Рубашка — настоящая картинка вместо заливки */
.pcard.back,
.bj-card.back {
  background-image: var(--card-back);
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 207, 77, .35);
}
.pcard.back::after,
.bj-card.back::after { opacity: .25; }

/* Карта прилетает на стол с лёгким разворотом */
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(-18px) rotate(-8deg) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.pcard, .bj-card { animation: cardDeal .34s cubic-bezier(.2, .9, .3, 1) backwards; }

/* Выигравшая сторона стола подсвечивается золотом */
.ct-box.win,
.ct-val.win {
  color: var(--gold, #ffd873);
}
.ct-box.win .ct-cards .bj-card {
  box-shadow: 0 0 0 2px rgba(255, 216, 115, .85), 0 8px 18px rgba(0, 0, 0, .5);
}

/* ---------- кости ---------- */

.die {
  background: linear-gradient(155deg, #fdfdfd 0%, #eceef4 60%, #d9dce6 100%);
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 14%;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, .45),
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 0 -3px 6px rgba(0, 0, 0, .12);
}
.die i {
  background: radial-gradient(circle at 35% 30%, #4a4f5e, #14161d 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25);
}

/* Бросок: кубик подпрыгивает и крутится */
@keyframes dieRoll {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  35%  { transform: translateY(-26px) rotate(190deg) scale(1.06); }
  70%  { transform: translateY(0) rotate(340deg) scale(.97); }
  85%  { transform: translateY(-6px) rotate(360deg) scale(1.02); }
  100% { transform: translateY(0) rotate(360deg) scale(1); }
}
.die.rolling { animation: dieRoll .6s cubic-bezier(.25, .8, .35, 1); }

/* ---------- фишки ---------- */

/* Имя .chip уже занято кнопками категорий в каталоге игр — своя фишка
   называется иначе, иначе её картинка ложится на фильтры каталога. */
.casino-chip {
  width: 34px;
  height: 34px;
  background-image: url('/img/games/shared/chip.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}

/* ---------- общие эффекты выигрыша ---------- */

/* Летящая монета — её создаёт casino-fx.js для любой игры */
.fx-coin {
  position: fixed;
  width: 26px;
  height: 26px;
  background-image: url('/img/games/tower/coin.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 999;
  will-change: transform, opacity;
}

@keyframes fxShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 3px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 3px); }
}
.fx-shake { animation: fxShake .42s ease-out; }

/* Золотая вспышка по краю экрана при крупном выигрыше */
@keyframes fxGlow {
  from { opacity: .85; }
  to { opacity: 0; }
}
.fx-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  box-shadow: inset 0 0 120px rgba(255, 200, 80, .75);
  animation: fxGlow .7s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .bj-card, .die.rolling { animation: none; }
  .fx-shake { animation: none; }
}

/* ---------- Chicken Road: нарисованная курица и машины ---------- */

/* Вместо самодельной SVG-курицы — нормальный персонаж картинкой */
.croad-chicken svg { display: none !important; }
/* Сбитая курица: картинка та же, но обесцвеченная и с подтёком тени —
   раньше эту роль играл отдельный SVG, который мы спрятали */
.croad-chicken.dead {
  filter: grayscale(.55) brightness(.75) drop-shadow(0 4px 8px rgba(0, 0, 0, .7));
}
.croad-chicken {
  background-image: url('/img/games/shared/chicken.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}

/* Машины: четыре разных вида сверху вместо цветных прямоугольников */
.croad-car.v-bus   { background-image: url('/img/games/shared/car-bus.png?v=52') !important; }
.croad-car.v-truck { background-image: url('/img/games/shared/car-truck.png?v=52') !important; }
.croad-car.v-taxi  { background-image: url('/img/games/shared/car-taxi.png?v=52') !important; }
.croad-car.v-sport { background-image: url('/img/games/shared/car-sport.png?v=52') !important; }

.croad-car {
  background-image: url('/img/games/shared/car-sport.png?v=52') !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5));
}
.croad-car i,
.croad-car::before,
.croad-car::after { display: none !important; }

/* ---------- Crash / Aviator: ракета вместо значка ---------- */

.crash-plane, .crash-rocket, .aviator-plane {
  background-image: url('/img/games/shared/rocket.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 14px rgba(255, 140, 60, .6));
}
.crash-plane > *, .crash-rocket > *, .aviator-plane > * { display: none; }

/* ---------- Колесо фортуны и рулетка ---------- */

/* Сектора остаются нарисованными кодом (они зависят от коэффициентов),
   а сверху ложится золотой обод картинкой — колесо выглядит как настоящее. */
.wheel-wrap { position: relative; }
.wheel-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: min(252px, 104%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background-image: url('/img/games/shared/wheel.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: screen;
  opacity: .45;
  pointer-events: none;
}
.wheel-svg { filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .6)) saturate(1.15); }

/* Указатель сверху — золотой, с тенью */
.wheel-ptr { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7)); }

/* ---------- Balloon: настоящий шар ---------- */
.balloon-art {
  background-image: url('/img/games/shared/balloon.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}
.balloon-art > * { display: none; }

/* ---------- Goal: вратарь и мяч картинками ---------- */
.keeper svg { display: none !important; }
.keeper {
  background-image: url('/img/games/shared/keeper.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
.goal-ball, .ball {
  background-image: url('/img/games/shared/ball.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.goal-ball svg, .ball svg { display: none !important; }
.goal-frame {
  border-color: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35);
}

/* ---------- Shell Game: золотые стаканы ---------- */
.cup {
  background-image: url('/img/games/shared/cup.png?v=52') !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
}
.cup::before, .cup::after { display: none !important; }
.cup-ball {
  background-image: url('/img/games/shared/plinko-ball.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ---------- Horse Race: лошадь вместо значка ---------- */
.track .runner, .horse {
  background-image: url('/img/games/shared/horse.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.track .runner > *, .horse > * { display: none; }

/* ---------- Plinko: светящийся шарик ---------- */
.plinko-ball, .plinko .ball {
  background-image: url('/img/games/shared/plinko-ball.png?v=52');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 200, 90, .8));
}

/* ---------- Слоты: нарисованные символы вместо эмодзи ----------
   Windows рисует эмодзи плоскими глифами — барабаны выглядели дёшево.
   Сам символ остаётся в разметке (по нему считаются линии), но текст
   прячем и показываем картинку. */
.slot-cell {
  background-size: 78%;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
  text-shadow: none !important;
}
.slot-cell.hit {
  filter: drop-shadow(0 0 10px rgba(255, 210, 90, .9));
}

.slot-cell[data-sym="🍒"] { background-image: url('/img/games/slots/cherry.png?v=52'); }
.slot-cell[data-sym="🍋"] { background-image: url('/img/games/slots/lemon.png?v=52'); }
.slot-cell[data-sym="🍊"] { background-image: url('/img/games/slots/orange.png?v=52'); }
.slot-cell[data-sym="🍇"] { background-image: url('/img/games/slots/grape.png?v=52'); }
.slot-cell[data-sym="🔔"] { background-image: url('/img/games/slots/bell.png?v=52'); }
.slot-cell[data-sym="💎"] { background-image: url('/img/games/slots/diamond.png?v=52'); }
.slot-cell[data-sym="🃏"] { background-image: url('/img/games/slots/joker.png?v=52'); }
.slot-cell[data-sym="⭐"] { background-image: url('/img/games/slots/star.png?v=52'); }
.slot-cell[data-sym="🍀"] { background-image: url('/img/games/slots/clover.png?v=52'); }
.slot-cell[data-sym="🍉"] { background-image: url('/img/games/slots/melon.png?v=52'); }
.slot-cell[data-sym="7️⃣"] { background-image: url('/img/games/slots/seven.png?v=52'); }
.slot-cell[data-sym="💲"] { background-image: url('/img/games/slots/dollar.png?v=52'); }
.slot-cell[data-sym="📖"] { background-image: url('/img/games/slots/book.png?v=52'); }
.slot-cell[data-sym="𓂀"] { background-image: url('/img/games/slots/eye.png?v=52'); }
.slot-cell[data-sym="🔱"] { background-image: url('/img/games/slots/trident.png?v=52'); }
.slot-cell[data-sym="🪬"] { background-image: url('/img/games/slots/amulet.png?v=52'); }

/* Символы без своей картинки (буквы A K Q J) остаются текстом */
.slot-cell[data-sym="A"], .slot-cell[data-sym="K"],
.slot-cell[data-sym="Q"], .slot-cell[data-sym="J"] {
  color: #ffd873 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6) !important;
  font-weight: 900;
}