.crash-messages{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	flex-wrap: wrap;
	line-height: 1.2;
	z-index: 3;
	pointer-events: none;
}

.crash-message{
	text-align: center;
	display: none;
}

.crash-graph {
	height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    position: relative;
    flex-grow: 1;
	/* Inset chart + room so rotated rocket/flame aren’t clipped */
	padding: clamp(10px, 2.5vw, 18px);
	box-sizing: border-box;
	overflow: visible;
	border-radius: 0.5rem;
	background: radial-gradient(ellipse 120% 80% at 50% 100%, #1c2544 0%, #0d1224 42%, #060a14 100%);
}

.crash-space-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 10% 20%, rgba(255, 255, 255, 0.45) 50%, transparent 52%),
		radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.35) 50%, transparent 52%),
		radial-gradient(1px 1px at 70% 30%, rgba(255, 255, 255, 0.4) 50%, transparent 52%),
		radial-gradient(1.5px 1.5px at 85% 60%, rgba(200, 220, 255, 0.35) 50%, transparent 52%),
		radial-gradient(1px 1px at 55% 15%, rgba(255, 255, 255, 0.3) 50%, transparent 52%);
	background-size: 100% 100%;
	opacity: 0.9;
	animation: crash-stars-drift 80s linear infinite;
}

@keyframes crash-stars-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-3%, -2%, 0); }
}

/* Rocket is inline SVG: JS sets transform on #crash_rocket_rot so emoji + flame rotate atomically */
.crash-rocket-icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: auto;
	margin: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
}

.crash-rocket-icon.crash-rocket-visible {
	opacity: 1;
}

.crash-rocket-svg {
	display: block;
	width: clamp(4rem, 10vw, 5rem);
	height: auto;
	overflow: visible;
}

.crash-rocket-emoji {
	font-size: 44px;
	/* avoid CSS filter on SVG text — can composite above the flame ellipse despite paint order */
}

.crash-rocket-flame-ellipse {
	animation: crash-rocket-flame 0.32s ease-in-out infinite alternate;
}

@keyframes crash-rocket-flame {
	from { opacity: 0.82; }
	to { opacity: 1; }
}

.crash-graph canvas {
	position: relative;
	z-index: 2;
}

.crash-graph.starting .starting{
	display: block;
}

.crash-graph.progress .progress{
	display: block;
}

.crash-graph.crashed .progress{
	display: block;
}

.crash-graph.starting {
	color: #bbbbd2 !important; /* color */
}

.crash-graph.progress {
	color: #4caf50 !important; /* color */
}

.crash-graph.crashed {
	color: #F93131 !important; /* color */
}

.crash-graph .progress div:first-child {
	display: none;
}

.crash-graph.crashed .progress div:first-child {
	display: block;
}

#crash_history{
	overflow: hidden;
}

.crash-history .item {
	height: 32px;
    min-width: 54px;
    width: 50px;
	border-radius: 4px;
}

.crash-history .item.low {
    background-color: #ce4141; /* color */
}

.crash-history .item.medium {
    background-color: #9370db; /* color */
}

.crash-history .item.high {
    background-color: #4ca04b; /* color */
}

@media (max-width: 768px){
	.crash-message > div:nth-child(1){
		font-size: 20px;
	}

	.crash-message > div:nth-child(2){
		font-size: 40px;
		font-weight: bold;
	}

	.crash-graph {
		height: 300px !important;
	}
}

@media (min-width: 768px){
	.crash-message > div:nth-child(1){
		font-size: 40px;
	}

	.crash-message > div:nth-child(2){
		font-size: 60px;
		font-weight: bold;
	}
}

/* SKELETON */

.crash-history .skeleton.item-box {
    height: 32px;
    min-width: 54px;
    width: 50px;
    border-radius: 4px;
}

.skeleton.crash-graph-box {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}

/* END SKELETON */