/* mx-crash v2 — оформление Crash поверх crash.v1.css: многослойный огонь с искрами, свечение монеты,
   вспышка в момент краша, новая таблица ставок раунда. Разметка — public/js/crash.js (v2). */

/* ---------- огонь: контейнер .cr-flame повёрнут по направлению полёта (transform-origin 0 50%), слои внутри */
html body .cr-page .cr-flame {
  background: none !important;
  filter: none !important;
  border-radius: 0 !important;
  height: 46% !important;
  margin-top: -23% !important;
  animation: none !important;
  overflow: visible !important;
}
html body .cr-page .cr-flame > i,
html body .cr-page .cr-flame > b { position: absolute; display: block; pointer-events: none; }
html body .cr-page .cr-flame__outer {
  left: 18%; top: -14%; width: 84%; height: 128%;
  border-radius: 50% 100% 100% 50% / 50% 50% 50% 50%;
  background: linear-gradient(90deg, rgba(255, 160, 60, .95) 0%, rgba(255, 110, 30, .85) 40%, rgba(255, 70, 60, .45) 75%, rgba(255, 60, 60, 0) 100%);
  filter: blur(2.2px);
  transform-origin: 0 50%;
  animation: crFlameOuter .17s ease-in-out infinite alternate;
}
html body .cr-page .cr-flame__mid {
  left: 20%; top: 14%; width: 60%; height: 72%;
  border-radius: 50% 100% 100% 50% / 50% 50% 50% 50%;
  background: linear-gradient(90deg, #ffe07a 0%, #ffb02e 45%, rgba(255, 130, 40, .5) 80%, rgba(255, 130, 40, 0) 100%);
  filter: blur(1px);
  transform-origin: 0 50%;
  animation: crFlameMid .11s ease-in-out infinite alternate;
}
html body .cr-page .cr-flame__core {
  left: 22%; top: 31%; width: 30%; height: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 50%, #ffffff 0%, #fff7d2 45%, rgba(255, 240, 180, 0) 100%);
  box-shadow: 0 0 10px 3px rgba(255, 226, 130, .65);
  transform-origin: 0 50%;
  animation: crFlameCore .09s ease-in-out infinite alternate;
}
html body .cr-page .cr-spark {
  left: 36%; width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%;
  background: #ffd24a;
  box-shadow: 0 0 6px 1px rgba(255, 176, 0, .8);
  opacity: 0;
  animation: crSpark .8s linear infinite;
}
html body .cr-page .cr-spark:nth-child(even) { background: #ff9a3c; }
html body .cr-page .cr-spark:nth-child(3n) { width: 3px; height: 3px; }
@keyframes crFlameOuter { 0% { transform: scale(.9, .86); } 100% { transform: scale(1.08, 1.1); } }
@keyframes crFlameMid   { 0% { transform: scale(.92, .9); } 100% { transform: scale(1.06, 1.08); } }
@keyframes crFlameCore  { 0% { transform: scale(.95); opacity: .9; } 100% { transform: scale(1.1); opacity: 1; } }
@keyframes crSpark {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(66px, -7px) scale(.35); opacity: 0; }
}
html body .cr-page .cr-spark:nth-child(odd) { animation-name: crSparkB; }
@keyframes crSparkB {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(60px, 8px) scale(.35); opacity: 0; }
}

/* ---------- свечение вокруг монеты в полёте */
html body .cr-page .cr-coin::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 190%; height: 190%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 90, .32) 0%, rgba(255, 150, 50, .12) 42%, rgba(255, 150, 50, 0) 70%);
  opacity: 0;
  transition: opacity .4s;
  z-index: 0;
  pointer-events: none;
}
html body .cr-page .cr-coin--fly::before { opacity: 1; animation: crGlow 1.3s ease-in-out infinite; }
@keyframes crGlow { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.12); } }

/* ---------- вспышка в момент краша (в точке, где была монета) */
html body .cr-page .cr-burst {
  position: absolute;
  width: 11%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
}
@supports not (aspect-ratio: 1 / 1) { html body .cr-page .cr-burst { height: 18%; } }
html body .cr-page .cr-burst::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 160%; height: 160%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 214, 74, .7) 35%, rgba(255, 90, 60, 0) 70%);
  animation: crFlash .55s ease-out forwards;
}
html body .cr-page .cr-burst i {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 225, 110, 1);
  box-shadow: 0 0 10px rgba(255, 214, 74, .7), inset 0 0 10px rgba(255, 214, 74, .35);
  animation: crRing .75s cubic-bezier(.15, .8, .3, 1) forwards;
}
html body .cr-page .cr-burst i + i { border-color: rgba(255, 110, 110, 1); box-shadow: 0 0 10px rgba(255, 91, 91, .6); animation-delay: .1s; }
@keyframes crFlash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes crRing  { 0% { opacity: 1; transform: scale(.55); } 100% { opacity: 0; transform: scale(2.6); } }
html body .cr-page .cr-scene--crashed .cr-coin { transition: transform 1.1s cubic-bezier(.3, .6, .4, 1), opacity .9s ease .25s; }

/* ---------- таблица ставок раунда (v2) */
html body .cr-page .cr-bets--v2 {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
}
body.light-theme .cr-page .cr-bets--v2 { background: #f5f6fa; border-color: #e6e9f2; }
html body .cr-page .cr-bets__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px; }
html body .cr-page .cr-bets__title { font-size: 15px; font-weight: 800; color: #fff; -webkit-text-fill-color: #fff; }
body.light-theme .cr-page .cr-bets__title { color: #1e2235; -webkit-text-fill-color: #1e2235; }
html body .cr-page .cr-bets__count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #8a93a8; -webkit-text-fill-color: #8a93a8; }
html body .cr-page .cr-bets__count i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .9); animation: crLive 1.6s ease-in-out infinite; }
@keyframes crLive { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
html body .cr-page .cr-bets--v2 .cr-bets__head {
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  padding: 4px 18px 8px !important;
  border-bottom: 0 !important;
  font-size: 11px !important;
}
html body .cr-page .cr-bet {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  margin: 0 6px 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  color: #d5dbe8;
  -webkit-text-fill-color: #d5dbe8;
  font-size: 13px;
  font-weight: 600;
  transition: background .25s, opacity .25s;
}
body.light-theme .cr-page .cr-bet { background: #fff; color: #2b3145; -webkit-text-fill-color: #2b3145; box-shadow: 0 1px 2px rgba(20, 28, 48, .06); }
html body .cr-page .cr-bet--st1 { background: rgba(34, 197, 94, .11); }
body.light-theme .cr-page .cr-bet--st1 { background: #eafaf0; }
html body .cr-page .cr-bet--st2 { opacity: .55; }
html body .cr-page .cr-bet--me { box-shadow: inset 0 0 0 1px rgba(74, 128, 245, .7); }
html body .cr-page .cr-bet__user { display: flex; align-items: center; gap: 8px; min-width: 0; }
html body .cr-page .cr-bet__ava {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-style: normal; font-size: 12px; font-weight: 800;
  color: #fff; -webkit-text-fill-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
html body .cr-page .cr-bet__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .cr-page .cr-bet__amt { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html body .cr-page .cr-bet__amt img { width: 15px; height: 15px; display: block; }
html body .cr-page .cr-bet__pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
html body .cr-page .cr-bet__pill--win  { background: rgba(34, 197, 94, .18); color: #4ade80; -webkit-text-fill-color: #4ade80; }
html body .cr-page .cr-bet__pill--lose { background: rgba(239, 68, 68, .16); color: #ff7b7b; -webkit-text-fill-color: #ff7b7b; }
html body .cr-page .cr-bet__pill--auto { background: rgba(74, 128, 245, .16); color: #8db3ff; -webkit-text-fill-color: #8db3ff; }
html body .cr-page .cr-bet__pill--wait { background: rgba(255, 255, 255, .08); color: #aeb6c8; -webkit-text-fill-color: #aeb6c8; font-weight: 700; }
body.light-theme .cr-page .cr-bet__pill--win  { background: #d9f5e3; color: #15803d; -webkit-text-fill-color: #15803d; }
body.light-theme .cr-page .cr-bet__pill--lose { background: #fde2e2; color: #b91c1c; -webkit-text-fill-color: #b91c1c; }
body.light-theme .cr-page .cr-bet__pill--auto { background: #e0e9ff; color: #2f5fd6; -webkit-text-fill-color: #2f5fd6; }
body.light-theme .cr-page .cr-bet__pill--wait { background: #eceef4; color: #6b7385; -webkit-text-fill-color: #6b7385; }
html body .cr-page .cr-bet__win { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #8a93a8; -webkit-text-fill-color: #8a93a8; }
html body .cr-page .cr-bet__win.win { color: #4ade80; -webkit-text-fill-color: #4ade80; font-weight: 800; }
html body .cr-page .cr-bet__win.lose { color: #ff7b7b; -webkit-text-fill-color: #ff7b7b; }
body.light-theme .cr-page .cr-bet__win.win { color: #15803d; -webkit-text-fill-color: #15803d; }
body.light-theme .cr-page .cr-bet__win.lose { color: #b91c1c; -webkit-text-fill-color: #b91c1c; }
html body .cr-page .cr-bets--v2 .cr-bets__head span:last-child { text-align: right; }
html body .cr-page .cr-bets--v2 .cr-bets__empty { padding: 10px 14px 16px; }
@media (max-width: 480px) {
  html body .cr-page .cr-bets--v2 .cr-bets__head { grid-template-columns: 1.4fr .9fr 1.05fr .85fr !important; padding: 2px 14px 6px !important; }
  html body .cr-page .cr-bet { grid-template-columns: 1.4fr .9fr 1.05fr .85fr; padding: 7px 8px; margin: 0 5px 5px; font-size: 12px; gap: 4px; }
  html body .cr-page .cr-bet__ava { flex-basis: 22px; width: 22px; height: 22px; font-size: 11px; }
  html body .cr-page .cr-bet__pill { font-size: 11px; padding: 3px 6px; }
  html body .cr-page .cr-bet__amt img { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .cr-page .cr-flame__outer, html body .cr-page .cr-flame__mid, html body .cr-page .cr-flame__core, html body .cr-page .cr-spark,
  html body .cr-page .cr-coin--fly::before, html body .cr-page .cr-bets__count i { animation: none !important; }
}