/* Crash gambling mode */
.cr-panel {
  max-width: 920px;
  margin: 0 auto;
  --cr-orange: #ff8a2a;
  --cr-yellow: #ffd166;
  --cr-blue: #60c4ff;
  --cr-purple: #9b5fd6;
}
.cr-meter {
  position: relative;
  width: min(100%, 550px);
  height: auto;
  aspect-ratio: 550 / 309;
  margin: 0 auto 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60, 22, 42, .28), transparent 62%),
    radial-gradient(circle at 50% 42%, rgba(96, 196, 255, .08), transparent 46%),
    url('./crash_bg.png') center / cover no-repeat,
    #050409;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.cr-meter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 46px);
}
.cr-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, transparent 0 32%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.5) 100%),
    rgba(0,0,0,.24);
}
.cr-space {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}
.cr-space svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cr-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.cr-line {
  display: none;
}
.cr-mult {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  z-index: 4;
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(46px, 8vw, 72px);
  font-weight: 700;
  color: var(--cf-green, #38e06e);
  text-shadow: 0 0 26px currentColor;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  transition: color .12s, transform .12s;
}
.cr-state {
  position: absolute;
  z-index: 4;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--faint);
}
.cr-meter.is-running .cr-mult,
.cr-mult.mid {
  color: var(--cf-gold, #f2c14e);
}
.cr-mult.hot {
  color: #ff7a3a;
}
.cr-mult.crash {
  color: var(--cf-red, #ff2e3c);
  animation: crCrash .5s ease;
}
.cr-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, #ff6a4a, #b0202a);
}
.cr-flash.go {
  animation: crFlash .5s ease-out;
}
@keyframes crCrash {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  30% { transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes crFlash {
  0% { opacity: 0; }
  10% { opacity: .45; }
  100% { opacity: 0; }
}
.cr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cr-actions .cf-flip-btn {
  margin-top: 16px;
}
.cr-cashout-btn {
  background: linear-gradient(180deg, #168047, #0f5c33);
  border-color: #23b96a;
  box-shadow: 0 0 20px rgba(35, 185, 106, .35);
}
.cr-cashout-btn:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(35, 185, 106, .45);
}
@media (max-width: 560px) {
  .cr-actions {
    grid-template-columns: 1fr;
  }
  .cr-meter {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-mult.crash,
  .cr-flash.go {
    animation: none;
  }
}