/*
//=====================================================================================
*/

.limbo_controls .field
{
	margin-bottom: 14px;
}

.limbo_presets
{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	margin-top: 8px;
}

.limbo_presets .field_chip,
.limbo_counts .field_chip
{
	min-width: 0;
	height: 30px;
	padding: 0 4px;
}

.limbo_counts
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 8px;
}

.limbo_counts[hidden]
{
	display: none;
}

.limbo_odds
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 14px;
}

.limbo_odd
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	height: 52px;
	padding: 0 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--line);
}

.limbo_odd_label
{
	color: var(--text_mute);
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
}

.limbo_odd_value
{
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	color: var(--text);
	font: 650 15px/1.1 var(--font_body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.limbo_odd_value.is_profit
{
	color: #6ee7b7;
}

.limbo_odd_value .coin
{
	flex: none;
	width: 15px;
	height: 15px;
}

.limbo_odd_value output
{
	overflow: hidden;
	text-overflow: ellipsis;
}

.limbo_controls input:disabled
{
	opacity: 0.6;
}

.limbo_controls .play_button:disabled
{
	cursor: default;
	opacity: 0.6;
	filter: saturate(0.7);
}

/*
//=====================================================================================
*/

.limbo_stage
{
	gap: 12px;
}

.limbo_stage .stage_status
{
	flex: 0 1 auto;
	min-width: 0;
	max-width: 52%;
}

.limbo_stage .stage_label
{
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 26px;
}

.limbo_stage .recent_list
{
	flex: 1 1 0;
	min-width: 0;
}

.limbo_scene
{
	position: relative;
	flex: 1 1 0;
	min-height: 220px;
}

.limbo_cabinet
{
	position: absolute;
	inset: 0;
	padding: 5px;
	border-radius: 30px;
	background: #0f0a22;
	box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.85);
}

.limbo_bezel
{
	position: relative;
	height: 100%;
	padding: 12px;
	border-radius: 26px;
	background: radial-gradient(circle at 13px 13px, #fde68a 0 1.6px, #a16a12 2.4px, rgba(15, 10, 34, 0.6) 3.4px, transparent 4.4px), radial-gradient(circle at calc(100% - 13px) 13px, #fde68a 0 1.6px, #a16a12 2.4px, rgba(15, 10, 34, 0.6) 3.4px, transparent 4.4px), radial-gradient(circle at 13px calc(100% - 13px), #fde68a 0 1.6px, #a16a12 2.4px, rgba(15, 10, 34, 0.6) 3.4px, transparent 4.4px), radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #fde68a 0 1.6px, #a16a12 2.4px, rgba(15, 10, 34, 0.6) 3.4px, transparent 4.4px), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px), linear-gradient(180deg, #241a4c, #1d1438 40%, #171030);
	border: 1px solid rgba(245, 196, 81, 0.3);
}

.limbo_window
{
	position: relative;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	border-radius: 16px;
	background: linear-gradient(180deg, #171046, #3a1f7d 55%, #c4607f);
	box-shadow: 0 0 0 1.5px rgba(245, 196, 81, 0.45), 0 0 0 5px rgba(9, 6, 22, 0.55);
}

.limbo_window::after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 0 7px rgba(10, 6, 26, 0.18), inset 0 0 0 8px rgba(245, 196, 81, 0.12), inset 0 0 70px rgba(6, 4, 18, 0.42);
	pointer-events: none;
}

.limbo_sky,
.limbo_front
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.limbo_sky
{
	z-index: 1;
}

.limbo_front
{
	z-index: 3;
	pointer-events: none;
}

.limbo_title
{
	position: absolute;
	top: 18px;
	left: var(--column_left, 50%);
	right: 18px;
	z-index: 4;
	overflow: hidden;
	color: rgba(245, 196, 81, 0.72);
	font: 700 13px/1 var(--font_game);
	letter-spacing: 0.5em;
	text-align: center;
	white-space: nowrap;
	text-indent: 0.5em;
}

.limbo_readout
{
	position: absolute;
	top: var(--readout_top, 30%);
	left: var(--column_left, 50%);
	right: 18px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	transform: translateY(-50%);
	pointer-events: none;
	transition: opacity 0.35s var(--ease);
}

.limbo_readout.is_muted
{
	opacity: 0.1;
}

.limbo_caption
{
	color: rgba(245, 196, 81, 0.85);
	font: 700 11.5px/1 var(--font_game);
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(12, 6, 32, 0.9), 0 2px 10px rgba(12, 6, 32, 0.55);
	transition: color 0.3s var(--ease);
}

.limbo_value
{
	color: #ffffff;
	font: 700 var(--value_size, 64px)/0.95 var(--font_game);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-shadow: 0 3px 0 rgba(26, 10, 60, 0.6), 0 12px 26px rgba(8, 4, 24, 0.5);
	transition: color 0.3s var(--ease);
}

.limbo_sub
{
	padding: 5px 12px;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.78);
	font: 600 12.5px/1 var(--font_body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	background: rgba(10, 6, 28, 0.42);
	border: 1px solid rgba(245, 196, 81, 0.22);
}

.limbo_readout[data-state="win"] .limbo_value
{
	color: #86efac;
}

.limbo_readout[data-state="big"] .limbo_value
{
	color: #fcd34d;
}

.limbo_readout[data-state="loss"] .limbo_value
{
	color: #fda4af;
}

.limbo_readout[data-state="win"] .limbo_caption
{
	color: #86efac;
}

.limbo_readout[data-state="big"] .limbo_caption
{
	color: #fcd34d;
}

.limbo_readout[data-state="loss"] .limbo_caption
{
	color: #fda4af;
}

.limbo_readout.is_pop .limbo_value
{
	animation: limbo_pop 0.5s var(--ease);
}

/*
//=====================================================================================
*/

.limbo_balloon
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: var(--balloon_w, 160px);
	height: var(--balloon_h, 220px);
	overflow: visible;
	will-change: transform;
	filter: drop-shadow(0 14px 16px rgba(10, 4, 30, 0.35));
}

.limbo_balloon g
{
	transform-box: view-box;
}

.lb_part
{
	opacity: 0;
	transition: opacity 0.16s;
}

.limbo_balloon[data-state="idle"] .lb_eyes_open,
.limbo_balloon[data-state="idle"] .lb_mouth_smile,
.limbo_balloon[data-state="idle"] .lb_hand_rest,
.limbo_balloon[data-state="climb"] .lb_eyes_open,
.limbo_balloon[data-state="climb"] .lb_mouth_o,
.limbo_balloon[data-state="climb"] .lb_hand_rest,
.limbo_balloon[data-state="climb"] .lb_pull,
.limbo_balloon[data-state="win"] .lb_eyes_happy,
.limbo_balloon[data-state="win"] .lb_mouth_cheer,
.limbo_balloon[data-state="win"] .lb_cheer_left,
.limbo_balloon[data-state="win"] .lb_cheer_right,
.limbo_balloon[data-state="lose"] .lb_palm,
.limbo_balloon[data-state="lose"] .lb_mouth_frown,
.limbo_balloon[data-state="descend"] .lb_eyes_happy,
.limbo_balloon[data-state="descend"] .lb_mouth_smile,
.limbo_balloon[data-state="descend"] .lb_hand_rest,
.limbo_balloon[data-state="descend"] .lb_cheer_right,
.limbo_balloon[data-state="sink"] .lb_eyes_open,
.limbo_balloon[data-state="sink"] .lb_mouth_frown,
.limbo_balloon[data-state="sink"] .lb_hand_rest
{
	opacity: 1;
}

.lb_wrinkles
{
	opacity: 0;
	transition: opacity 0.4s;
}

.limbo_balloon[data-state="lose"] .lb_wrinkles,
.limbo_balloon[data-state="sink"] .lb_wrinkles
{
	opacity: 1;
}

.lb_float
{
	animation: lb_bob 3.6s ease-in-out infinite;
}

.lb_rig
{
	transform-origin: 120px 212px;
	animation: lb_sway 4.6s ease-in-out infinite;
}

.lb_inflate
{
	transform-origin: 120px 206px;
	transition: transform 0.6s var(--ease);
	animation: lb_breathe 3.6s ease-in-out infinite;
}

.lb_flame_size
{
	transform-origin: 120px 223px;
	transform: scale(0.42);
	transition: transform 0.22s var(--ease);
}

.lb_flame
{
	transform-origin: 120px 223px;
	animation: lb_flicker 0.17s ease-in-out infinite alternate;
}

.lb_blink
{
	transform-origin: 120px 254px;
	animation: lb_blink 4.4s ease-in-out infinite;
}

.lb_face
{
	transition: transform 0.3s var(--ease);
}

.lb_scarf_tail
{
	transform-origin: 129px 268px;
	animation: lb_flutter 0.9s ease-in-out infinite alternate;
}

.lb_head
{
	transform-origin: 120px 266px;
}

.limbo_balloon[data-state="idle"] .lb_scope
{
	transform-origin: 136px 274px;
	animation: lb_peek 8s ease-in-out infinite;
}

.limbo_balloon[data-state="idle"] .lb_face
{
	animation: lb_look 8s ease-in-out infinite;
}

.limbo_balloon[data-state="climb"] .lb_flame_size
{
	transform: scale(1.06);
}

.limbo_balloon[data-state="climb"] .lb_flame
{
	animation-duration: 0.08s;
}

.limbo_balloon[data-state="climb"] .lb_inflate
{
	animation: lb_stretch 0.7s var(--ease);
}

.limbo_balloon[data-state="climb"] .lb_rig
{
	animation: lb_swing 1.3s ease-out;
}

.limbo_balloon[data-state="climb"] .lb_scarf_tail
{
	animation: lb_stream 0.22s ease-in-out infinite alternate;
}

.limbo_balloon[data-state="climb"] .lb_pull
{
	transform-origin: 134px 274px;
	animation: lb_tug 0.2s ease-in-out infinite alternate;
}

.limbo_balloon[data-state="climb"] .lb_face
{
	transform: translateY(-1px);
}

.limbo_balloon[data-state="win"] .lb_flame_size,
.limbo_balloon[data-state="descend"] .lb_flame_size
{
	transform: scale(0.55);
}

.limbo_balloon[data-state="win"] .lb_cheer_left
{
	transform-origin: 106px 274px;
	animation: lb_wave_left 0.42s ease-in-out infinite alternate;
}

.limbo_balloon[data-state="win"] .lb_cheer_right,
.limbo_balloon[data-state="descend"] .lb_cheer_right
{
	transform-origin: 134px 274px;
	animation: lb_wave_right 0.42s ease-in-out infinite alternate;
}

.limbo_balloon[data-state="win"] .lb_pilot
{
	animation: lb_hop 0.42s ease-in-out infinite alternate;
}

.limbo_balloon[data-state="lose"] .lb_flame_size,
.limbo_balloon[data-state="sink"] .lb_flame_size
{
	transform: scale(0.22);
}

.limbo_balloon[data-state="lose"] .lb_inflate,
.limbo_balloon[data-state="sink"] .lb_inflate
{
	transform: scale(1.05, 0.9);
	animation: none;
}

.limbo_balloon[data-state="lose"] .lb_palm
{
	animation: lb_palm 0.32s var(--ease) both;
}

.limbo_balloon[data-state="lose"] .lb_head
{
	animation: lb_shake 0.9s ease-in-out 0.25s;
}

.limbo_balloon[data-state="lose"] .lb_face,
.limbo_balloon[data-state="sink"] .lb_face
{
	transform: translateY(1.4px);
}

.limbo_balloon[data-state="sink"] .lb_face
{
	transform: translateY(1.4px);
}

.limbo_balloon[data-state="sink"] .lb_scarf_tail
{
	animation: lb_droop 0.6s var(--ease) both;
}

@keyframes lb_bob
{
	0%,
	100%
	{
		transform: translateY(0);
	}

	50%
	{
		transform: translateY(-5px);
	}
}

@keyframes lb_sway
{
	0%,
	100%
	{
		transform: rotate(-1.3deg);
	}

	50%
	{
		transform: rotate(1.3deg);
	}
}

@keyframes lb_swing
{
	0%
	{
		transform: rotate(0deg);
	}

	18%
	{
		transform: rotate(4.5deg);
	}

	42%
	{
		transform: rotate(-3deg);
	}

	66%
	{
		transform: rotate(1.6deg);
	}

	100%
	{
		transform: rotate(0deg);
	}
}

@keyframes lb_breathe
{
	0%,
	100%
	{
		transform: scale(1, 1);
	}

	50%
	{
		transform: scale(1.012, 1.008);
	}
}

@keyframes lb_stretch
{
	0%
	{
		transform: scale(1, 1);
	}

	30%
	{
		transform: scale(0.96, 1.05);
	}

	65%
	{
		transform: scale(1.02, 0.98);
	}

	100%
	{
		transform: scale(1, 1);
	}
}

@keyframes lb_flicker
{
	from
	{
		transform: scale(0.94, 1.05) skewX(-3deg);
	}

	to
	{
		transform: scale(1.05, 0.95) skewX(3deg);
	}
}

@keyframes lb_blink
{
	0%,
	91%,
	100%
	{
		transform: scaleY(1);
	}

	94%
	{
		transform: scaleY(0.1);
	}

	97%
	{
		transform: scaleY(1);
	}
}

@keyframes lb_look
{
	0%,
	24%,
	46%,
	86%,
	100%
	{
		transform: translate(0, 0);
	}

	30%,
	40%
	{
		transform: translate(-2px, 0.3px);
	}

	54%,
	78%
	{
		transform: translate(1.8px, -0.4px);
	}
}

@keyframes lb_peek
{
	0%,
	46%,
	88%,
	100%
	{
		opacity: 0;
		transform: translateY(26px) rotate(0deg);
	}

	53%
	{
		opacity: 1;
		transform: translateY(0) rotate(2deg);
	}

	62%
	{
		opacity: 1;
		transform: translateY(0) rotate(-5deg);
	}

	72%
	{
		opacity: 1;
		transform: translateY(0) rotate(4deg);
	}

	81%
	{
		opacity: 1;
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes lb_flutter
{
	from
	{
		transform: rotate(-5deg) skewY(-2deg);
	}

	to
	{
		transform: rotate(5deg) skewY(3deg);
	}
}

@keyframes lb_stream
{
	from
	{
		transform: rotate(16deg) skewY(-4deg);
	}

	to
	{
		transform: rotate(24deg) skewY(4deg);
	}
}

@keyframes lb_droop
{
	to
	{
		transform: rotate(28deg) scale(0.92);
	}
}

@keyframes lb_tug
{
	from
	{
		transform: translateY(0);
	}

	to
	{
		transform: translateY(2.4px);
	}
}

@keyframes lb_wave_left
{
	from
	{
		transform: rotate(-10deg);
	}

	to
	{
		transform: rotate(9deg);
	}
}

@keyframes lb_wave_right
{
	from
	{
		transform: rotate(10deg);
	}

	to
	{
		transform: rotate(-9deg);
	}
}

@keyframes lb_hop
{
	from
	{
		transform: translateY(0);
	}

	to
	{
		transform: translateY(-3px);
	}
}

@keyframes lb_palm
{
	from
	{
		transform: translateY(14px);
	}

	to
	{
		transform: translateY(0);
	}
}

@keyframes lb_shake
{
	0%,
	100%
	{
		transform: rotate(0deg);
	}

	20%
	{
		transform: rotate(-6deg);
	}

	45%
	{
		transform: rotate(5deg);
	}

	70%
	{
		transform: rotate(-3deg);
	}
}

@keyframes limbo_pop
{
	0%
	{
		scale: 1;
	}

	35%
	{
		scale: 1.12;
	}

	100%
	{
		scale: 1;
	}
}

/*
//=====================================================================================
*/

@media (max-height: 860px) and (min-width: 1101px)
{
	.limbo_controls .field
	{
		margin-bottom: 12px;
	}

	.limbo_odds
	{
		margin-bottom: 12px;
	}
}

@media (max-height: 800px) and (min-width: 1101px)
{
	.limbo_controls .field_box
	{
		height: 42px;
	}

	.limbo_controls .segment
	{
		height: 32px;
	}

	.limbo_controls .play_button
	{
		height: 48px;
	}

	.limbo_controls .field,
	.limbo_odds
	{
		margin-bottom: 10px;
	}

	.limbo_presets,
	.limbo_counts
	{
		margin-top: 6px;
	}

	.limbo_presets .field_chip,
	.limbo_counts .field_chip
	{
		height: 26px;
	}

	.limbo_odd
	{
		height: 46px;
	}

	.limbo_page .session_chart
	{
		margin: 6px 0 8px;
	}
}

@media (max-height: 740px) and (min-width: 1101px)
{
	.limbo_page .session_chart
	{
		display: none;
	}

	.limbo_page .session_stats
	{
		margin-top: 8px;
	}

	.limbo_page .game_session
	{
		padding: 12px 16px;
	}
}

@media (max-width: 1100px)
{
	.limbo_scene
	{
		flex: none;
		height: clamp(340px, 74vw, 560px);
	}
}

@media (max-width: 600px)
{
	.limbo_cabinet
	{
		border-radius: 22px;
	}

	.limbo_bezel
	{
		padding: 8px;
		border-radius: 18px;
	}

	.limbo_title
	{
		display: none;
	}
}

/*
//=====================================================================================
*/