.crash-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px calc(14px + var(--sab));
  color: #fff;
}
.crash-broke {
  margin-top: 40px;
  text-align: center;
}
.crash-history {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  min-height: 26px;
  overflow: hidden;
  align-items: center;
}
.crash-history-item {
  flex: none;
  border-radius: 99px;
  padding: 3px 9px;
  font-weight: 900;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: rgba(90, 58, 34, 0.75);
  color: #e0b98a;
}
.crash-history-item:first-child {
  box-shadow: 0 0 0 1.5px currentColor;
}
.crash-history-mid {
  background: rgba(111, 174, 62, 0.24);
  color: #a9dd72;
}
.crash-history-high {
  background: rgba(255, 201, 40, 0.24);
  color: #ffc928;
}
.crash-history-empty {
  font-weight: 800;
  font-size: 12.5px;
  opacity: 0.6;
}
.crash-stage {
  --crash-heat: 0;
  --crash-floor: 0;
  --crash-lift: 0;
  --crash-pet-width: min(150px, 18vh);
  --crash-floor-height: 72.2cqw;
  --crash-lift-height: 13vh;
  --crash-ground: calc(var(--crash-floor-height) * 0.054);
  --crash-scroll: calc(
    var(--crash-floor) * var(--crash-floor-height) - var(--crash-lift) * var(--crash-lift-height)
  );
  --crash-rider-bottom: calc(
    var(--crash-ground) + var(--crash-pet-width) * 0.3 + var(--crash-lift) *
      var(--crash-lift-height)
  );
  --crash-badge: min(28px, 3.4vh);
  --crash-fall-ease: cubic-bezier(0.55, 0, 1, 0.45);
  position: relative;
  flex: 1;
  min-height: 0;
  width: calc(100% + 16px);
  margin: 4px -8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: #fff8dc;
  box-shadow: 0 0 0 4px #170c06;
  container-type: inline-size;
}
.crash-world {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  transform: translateY(var(--crash-scroll));
}
.crash-floor {
  position: relative;
  flex: none;
  width: 100%;
  height: var(--crash-floor-height);
}
.crash-floor > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.crash-npc {
  position: absolute;
}
.crash-npc > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.crash-npc-head {
  overflow: hidden;
  border-radius: 50%;
}
.crash-npc > svg:nth-child(2),
.crash-floor.seen .crash-npc > svg:nth-child(1) {
  display: none;
}
.crash-floor.seen .crash-npc > svg:nth-child(2) {
  display: block;
}
.crash-floor.seen .crash-npc {
  animation: crash-npc-jump 0.5s cubic-bezier(0.2, 1.8, 0.4, 1);
}
.crash-floor.seen .crash-npc::after {
  content: "!";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: #e0243a;
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}
.crash-floor.seen .crash-npc-head::after {
  content: none;
}
@keyframes crash-npc-jump {
  40% {
    transform: translateY(-18%) scale(1.08);
  }
}
.crash-floor-hole {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26%;
  height: 7.5%;
  margin-left: -13%;
  border-radius: 46% 54% 0 0 / 80% 90% 0 0;
  background: #5a3a22;
  box-shadow: 0 -3px 0 #8a5a2b;
  opacity: 0;
}
.crash-floor-dirt {
  position: absolute;
  left: 30%;
  bottom: 30%;
  width: 11%;
  transform: scale(0);
}
.crash-floor-dirt:nth-of-type(2) {
  left: 58%;
  bottom: 52%;
  width: 13%;
}
.crash-floor-dirt:nth-of-type(3) {
  left: 4%;
  bottom: 62%;
  width: 9%;
}
.crash-floor:nth-child(even) .crash-floor-dirt {
  left: 60%;
  bottom: 18%;
}
.crash-floor:nth-child(even) .crash-floor-dirt:nth-of-type(2) {
  left: 20%;
  bottom: 56%;
}
.crash-floor:nth-child(even) .crash-floor-dirt:nth-of-type(3) {
  left: 84%;
  bottom: 66%;
}
.crash-floor.seen .crash-floor-hole {
  opacity: 1;
}
.crash-floor.seen .crash-floor-dirt {
  transform: scale(1) rotate(24deg);
  transition: transform 0.25s cubic-bezier(0.2, 1.8, 0.4, 1) 0.15s;
}
.crash-floor.seen .crash-floor-dirt:nth-of-type(2) {
  transform: scale(1) rotate(-50deg);
  transition-delay: 0.3s;
}
.crash-floor.seen .crash-floor-dirt:nth-of-type(3) {
  transform: scale(1) rotate(110deg);
  transition-delay: 0.45s;
}
.crash-grime {
  position: absolute;
  left: 3%;
  top: 34%;
  width: 14%;
  transform: scale(0);
  pointer-events: none;
}
.crash-grime:nth-of-type(2) {
  left: 80%;
  top: 46%;
  width: 17%;
}
.crash-grime:nth-of-type(3) {
  left: 22%;
  top: 70%;
  width: 12%;
}
.crash-grime:nth-of-type(4) {
  left: 84%;
  top: 22%;
  width: 13%;
}
.crash-grime:nth-of-type(5) {
  left: -4%;
  top: 14%;
  width: 18%;
}
.crash-grime:nth-of-type(6) {
  left: 70%;
  top: 76%;
  width: 20%;
}
.crash-grime.on {
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.2, 1.8, 0.4, 1);
}
.crash-multiplier {
  position: relative;
  margin-top: 8px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: min(20vw, 11vh, 84px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff6d8;
  color: color-mix(in srgb, #ffc928 calc(var(--crash-heat) * 100%), #fff6d8);
  -webkit-text-stroke: 10px #3a2212;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #3a2212;
  transform: scale(calc(1 + var(--crash-heat) * 0.1));
}
.crash-caption {
  position: relative;
  min-height: 24px;
  margin-top: 4px;
  padding: 2px 12px;
  border-radius: 99px;
  background: rgba(58, 34, 18, 0.86);
  font-weight: 900;
  font-size: 15px;
  text-align: center;
}
.crash-caption:empty {
  visibility: hidden;
}
.crash-rail {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.crash-milestone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--crash-badge);
  height: var(--crash-badge);
  border-radius: 50%;
  background: rgba(58, 34, 18, 0.8);
  color: rgba(255, 246, 216, 0.5);
}
.crash-milestone > svg {
  display: block;
  width: 68%;
  height: 68%;
}
.crash-milestone.on {
  background: #ffc928;
  color: #3a2212;
  box-shadow: 0 2px 0 #8a5a0a;
  animation: crash-milestone-pop 0.35s cubic-bezier(0.2, 1.8, 0.4, 1);
}
.crash-milestone-burst.on {
  background: #ff7fa0;
  color: #4a0a14;
  box-shadow: 0 2px 0 #8e0f20;
}
@keyframes crash-milestone-pop {
  from {
    transform: scale(0.4);
  }
}
.crash-toilet {
  position: absolute;
  left: 50%;
  bottom: var(--crash-ground);
  width: calc(var(--crash-pet-width) * 0.92);
  margin-left: calc(var(--crash-pet-width) * -0.46);
}
.crash-plunger {
  position: absolute;
  left: calc(50% - var(--crash-pet-width) * 0.92);
  bottom: var(--crash-ground);
  width: calc(var(--crash-pet-width) * 0.22);
}
.crash-paper-bin {
  position: absolute;
  left: calc(50% + var(--crash-pet-width) * 0.56);
  bottom: var(--crash-ground);
  width: calc(var(--crash-pet-width) * 0.32);
}
.crash-stink {
  position: absolute;
  left: 50%;
  bottom: calc(var(--crash-ground) + var(--crash-pet-width) * 0.42);
  width: calc(var(--crash-pet-width) * 1.7);
  margin-left: calc(var(--crash-pet-width) * -0.85);
  opacity: 0;
  transition: opacity 0.3s;
}
.crash-jet {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--crash-rider-bottom) - var(--crash-pet-width) * 0.2);
  bottom: max(
    -12px,
    calc(var(--crash-ground) + var(--crash-pet-width) * 0.34 - var(--crash-scroll))
  );
  width: calc(var(--crash-pet-width) * 0.3);
  margin-left: calc(var(--crash-pet-width) * -0.15);
  overflow: hidden;
  opacity: 0;
}
.crash-splash {
  position: absolute;
  left: 50%;
  bottom: calc(var(--crash-ground) + var(--crash-pet-width) * 0.3);
  width: calc(var(--crash-pet-width) * 0.8);
  margin-left: calc(var(--crash-pet-width) * -0.4);
  transform-origin: 50% 100%;
  opacity: 0;
}
.crash-toilet > svg,
.crash-plunger > svg,
.crash-paper-bin > svg,
.crash-stink > svg,
.crash-jet > svg,
.crash-splash > svg,
.crash-prolapse > svg,
.crash-fly > svg,
.crash-floor-dirt > svg,
.crash-grime > svg {
  display: block;
  width: 100%;
  height: auto;
}
.crash-stage-flying .crash-jet,
.crash-stage-flying .crash-splash {
  opacity: 1;
}
.crash-stage-flying .crash-stink,
.crash-stage-cashed .crash-stink,
.crash-stage-burst .crash-stink {
  opacity: 0.9;
}
.crash-stage-flying .crash-jet-flow {
  animation: crash-jet-flow calc(0.5s - var(--crash-heat) * 0.28s) linear infinite;
}
@keyframes crash-jet-flow {
  to {
    stroke-dashoffset: -120;
  }
}
.crash-stage-flying .crash-splash {
  animation: crash-splash-pulse 0.24s ease-in-out infinite alternate;
}
@keyframes crash-splash-pulse {
  to {
    transform: scale(1.08, 1.3);
  }
}
.crash-stink-line {
  animation: crash-stink-rise 1.6s ease-in-out infinite;
}
.crash-stink-line:nth-child(2) {
  animation-delay: -0.5s;
}
.crash-stink-line:nth-child(3) {
  animation-delay: -1s;
}
@keyframes crash-stink-rise {
  0% {
    transform: translateY(8px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
  }
}
.crash-rider {
  position: absolute;
  left: 50%;
  bottom: var(--crash-rider-bottom);
  width: var(--crash-pet-width);
  margin-left: calc(var(--crash-pet-width) / -2);
}
.crash-pet {
  position: relative;
  transform-origin: 50% 90%;
}
.crash-pet > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.crash-burst {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -30%;
  opacity: 0;
  pointer-events: none;
}
.crash-burst > svg {
  display: block;
  width: 100%;
  height: auto;
}
.crash-prolapse {
  position: absolute;
  left: 34%;
  top: 84%;
  width: 32%;
  transform-origin: 50% 0;
  opacity: 0;
}
.crash-fly {
  position: absolute;
  left: -14%;
  top: 14%;
  width: 13%;
  opacity: 0;
}
.crash-fly:nth-of-type(2) {
  left: 96%;
  top: 34%;
}
.crash-fly:nth-of-type(3) {
  left: 70%;
  top: -8%;
}
.crash-stage-flying .crash-fly {
  opacity: calc(var(--crash-heat) * 2.4 - 0.4);
  animation: crash-fly-buzz 0.9s linear infinite;
}
.crash-stage-flying .crash-fly:nth-of-type(2) {
  animation-duration: 1.2s;
  animation-direction: reverse;
}
.crash-stage-flying .crash-fly:nth-of-type(3) {
  animation-duration: 0.7s;
}
@keyframes crash-fly-buzz {
  25% {
    transform: translate(16px, -10px) rotate(14deg);
  }
  50% {
    transform: translate(4px, -20px) rotate(-10deg);
  }
  75% {
    transform: translate(-12px, -8px) rotate(8deg);
  }
}
.crash-stage-countdown .crash-multiplier {
  opacity: 0.6;
}
.crash-stage-countdown .crash-pet {
  animation: crash-pet-strain 0.18s ease-in-out infinite alternate;
}
@keyframes crash-pet-strain {
  to {
    transform: scale(1.05, 0.95);
  }
}
.crash-stage-flying .crash-rider,
.crash-stage-cashed .crash-rider {
  animation: crash-rider-float calc(2.2s - var(--crash-heat) * 1.5s) ease-in-out infinite;
}
.crash-stage-flying .crash-pet {
  animation: crash-pet-sway calc(1.9s - var(--crash-heat) * 1.3s) ease-in-out infinite;
}
@keyframes crash-rider-float {
  50% {
    transform: translateY(calc(-4px - var(--crash-heat) * 8px));
  }
}
@keyframes crash-pet-sway {
  25% {
    transform: rotate(calc(-2deg - var(--crash-heat) * 9deg));
  }
  75% {
    transform: rotate(calc(2deg + var(--crash-heat) * 9deg));
  }
}
.crash-stage-cashed .crash-multiplier {
  color: #b6f23a;
}
.crash-stage-burst .crash-multiplier {
  color: #ff7fa0;
  animation: crash-multiplier-shake 0.4s;
}
@keyframes crash-multiplier-shake {
  20% {
    transform: translateX(-10px) scale(1.12);
  }
  60% {
    transform: translateX(8px) scale(1.06);
  }
}
.crash-stage-burst .crash-caption {
  padding: 0 14px;
  font-family: var(--f-horror);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: #ff7fa0;
}
.crash-stage-burst .crash-world {
  transition: transform 0.9s var(--crash-fall-ease);
}
.crash-stage-burst .crash-rider {
  transition: bottom 0.9s var(--crash-fall-ease);
}
.crash-stage-burst .crash-prolapse {
  opacity: 1;
  animation: crash-prolapse-drop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes crash-prolapse-drop {
  from {
    transform: scaleY(0);
  }
}
.crash-stage-burst .crash-pet {
  transform-origin: 50% 55%;
  animation: crash-pet-tumble 0.9s linear both;
}
@keyframes crash-pet-tumble {
  to {
    transform: rotate(540deg);
  }
}
.crash-stage-splat .crash-pet {
  transform-origin: 50% 100%;
  animation: crash-pet-splat 0.25s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes crash-pet-splat {
  from {
    transform: scale(0.8, 1.2);
  }
  to {
    transform: scale(1.45, 0.34);
  }
}
.crash-stage-splat .crash-prolapse {
  opacity: 0;
  animation: none;
}
.crash-stage-splat .crash-burst {
  animation: crash-burst-pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes crash-burst-pop {
  from {
    opacity: 1;
    transform: scale(0.2) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: scale(1.5, 0.9);
  }
}
.crash-panel {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.crash-panel[hidden] {
  display: none;
}
.crash-auto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin-top: 4px;
}
.crash-auto-label {
  font-weight: 900;
  font-size: 12.5px;
  opacity: 0.8;
}
.crash-start {
  margin-top: 10px;
}
.crash-flight-note {
  min-height: 20px;
  font-weight: 800;
  font-size: 13.5px;
  text-align: center;
  opacity: 0.8;
}
.crash-cash {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 84px;
  margin-top: 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffd23f, #e09a16);
  color: #3a2212;
  box-shadow:
    0 6px 0 #8a5a0a,
    0 0 26px rgba(255, 201, 40, 0.55);
  font-family: var(--f-display);
  animation: crash-cash-pulse 0.9s ease-in-out infinite;
}
.crash-cash small {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.crash-cash b {
  font-size: 38px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.crash-cash:disabled {
  animation: none;
}
@keyframes crash-cash-pulse {
  50% {
    box-shadow:
      0 6px 0 #8a5a0a,
      0 0 44px rgba(255, 201, 40, 0.95);
  }
}
.crash-card .crash-card-icon {
  background: #3a2212;
  color: #ffc928;
}
.crash-card-tag {
  display: inline-block;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 900;
  margin-left: 6px;
  vertical-align: 3px;
  background: #b5703e;
  color: #170c06;
}