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

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

.wheel_counts[hidden]
{
	display: none;
}

.wheel_counts .field_chip
{
	height: 30px;
}

.wheel_scene
{
	position: relative;
	flex: 1 1 0;
	min-height: 220px;
	overflow: hidden;
	border-radius: 30px;
}

.wheel_canvas
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wheel_pill
{
	color: color-mix(in srgb, rgb(var(--pill)) 45%, #fff);
	background: rgba(var(--pill), 0.24);
	box-shadow: inset 0 0 0 1px rgba(var(--pill), 0.4);
}

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

.wheel_legend
{
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
}

.legend_item
{
	display: inline-flex;
	flex: 0 1 132px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	height: 38px;
	padding: 0 10px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--line);
	transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.legend_swatch
{
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: linear-gradient(160deg, color-mix(in srgb, rgb(var(--pill)) 70%, #fff), rgb(var(--pill)) 55%, color-mix(in srgb, rgb(var(--pill)) 70%, #000));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.legend_value
{
	color: var(--text);
	font: 700 14px/1 var(--font_game);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.legend_chance
{
	overflow: hidden;
	color: var(--text_mute);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.legend_item.is_hit
{
	background: rgba(var(--pill), 0.22);
	border-color: color-mix(in srgb, rgb(var(--pill)) 70%, #fff);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	animation: legend_hit 0.6s var(--ease) both;
}

.legend_item.is_hit .legend_chance
{
	color: color-mix(in srgb, rgb(var(--pill)) 40%, #fff);
}

.wheel_legend_note
{
	align-self: center;
	color: var(--text_mute);
	font-size: 13px;
}

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

	40%
	{
		scale: 1.08;
	}

	100%
	{
		scale: 1;
	}
}

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

.wheel_host
{
	--host_pace: 1;
	position: absolute;
	left: var(--host_x, 0px);
	top: var(--host_y, 0px);
	z-index: 1;
	width: var(--host_w, 0px);
	height: var(--host_h, 0px);
	overflow: visible;
	pointer-events: none;
}

.wheel_host.is_quick
{
	--host_pace: 0.6;
}

.wheel_host g,
.wheel_host ellipse,
.wheel_host path,
.wheel_host use
{
	transform-box: view-box;
}

.host_body
{
	transform-origin: 100px 288px;
}

.host_shadow
{
	transform-origin: 100px 290px;
}

.host_torso
{
	transform-origin: 100px 236px;
}

.host_head
{
	transform-origin: 100px 140px;
}

.host_antenna
{
	transform-origin: 100px 44px;
}

.host_blink
{
	transform-origin: 100px 84px;
}

.host_arm_mic
{
	transform-origin: 58px 163px;
}

.host_forearm_mic
{
	transform-origin: 44.5px 195px;
}

.host_arm_point
{
	transform-origin: 142px 163px;
}

.host_forearm_point
{
	transform-origin: 157.5px 192px;
}

.wheel_host .host_star
{
	transform-box: fill-box;
	transform-origin: center;
}

.host_sweat
{
	opacity: 0;
	transform-origin: 151px 61px;
}

.host_face
{
	display: none;
}

.wheel_host.is_idle .host_face_idle,
.wheel_host.is_spin .host_face_happy,
.wheel_host.is_rush .host_face_happy,
.wheel_host.is_small .host_face_happy,
.wheel_host.is_watch .host_face_wide,
.wheel_host.is_win .host_face_star,
.wheel_host.is_big .host_face_star,
.wheel_host.is_lose .host_face_sad
{
	display: inline;
}

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

@media (prefers-reduced-motion: no-preference)
{
	.host_blink
	{
		animation: host_blink 4.6s ease-in-out infinite;
	}

	.wheel_host.is_idle .host_body
	{
		animation: host_bob 2.8s ease-in-out infinite;
	}

	.wheel_host.is_idle .host_shadow
	{
		animation: host_shadow_bob 2.8s ease-in-out infinite;
	}

	.wheel_host.is_idle .host_head
	{
		animation: host_look 6.4s ease-in-out infinite;
	}

	.wheel_host.is_idle .host_antenna
	{
		animation: host_sway 2.2s ease-in-out infinite alternate;
	}

	.wheel_host.is_idle .host_arm_point
	{
		animation: host_present 9s ease-in-out infinite;
	}

	.wheel_host.is_idle .host_forearm_point
	{
		animation: host_present_hand 9s ease-in-out infinite;
	}

	.wheel_host.is_idle .host_arm_mic
	{
		animation: host_mic 2.8s ease-in-out infinite;
	}

	.wheel_host.is_spin .host_body
	{
		animation: host_lunge calc(0.76s * var(--host_pace)) cubic-bezier(0.3, 0.6, 0.3, 1) both;
	}

	.wheel_host.is_spin .host_arm_point
	{
		animation: host_swing calc(0.76s * var(--host_pace)) cubic-bezier(0.45, 0, 0.3, 1) both;
	}

	.wheel_host.is_spin .host_forearm_point
	{
		animation: host_swing_hand calc(0.76s * var(--host_pace)) cubic-bezier(0.45, 0, 0.3, 1) both;
	}

	.wheel_host.is_spin .host_arm_mic
	{
		animation: host_mic_brace calc(0.76s * var(--host_pace)) ease-out both;
	}

	.wheel_host.is_spin .host_head,
	.wheel_host.is_rush .host_head
	{
		animation: host_tilt 0.4s var(--ease) both;
	}

	.wheel_host.is_rush .host_body
	{
		animation: host_hop 0.32s ease-in-out infinite alternate;
	}

	.wheel_host.is_rush .host_shadow
	{
		animation: host_hop_shadow 0.32s ease-in-out infinite alternate;
	}

	.wheel_host.is_rush .host_arm_point
	{
		animation: host_cheer 0.32s ease-in-out infinite alternate;
	}

	.wheel_host.is_rush .host_forearm_point
	{
		animation: host_cheer_hand 0.4s var(--ease) both;
	}

	.wheel_host.is_rush .host_arm_mic
	{
		animation: host_mic_up 0.4s var(--ease) both;
	}

	.wheel_host.is_rush .host_antenna
	{
		animation: host_wiggle 0.16s ease-in-out infinite alternate;
	}

	.wheel_host.is_watch .host_body
	{
		animation: host_lean 0.6s var(--ease) both;
	}

	.wheel_host.is_watch .host_head
	{
		animation: host_peer 0.6s var(--ease) both;
	}

	.wheel_host.is_watch .host_arm_point
	{
		animation: host_fist 0.6s var(--ease) both;
	}

	.wheel_host.is_watch .host_forearm_point
	{
		animation: host_fist_hand 0.6s var(--ease) both;
	}

	.wheel_host.is_watch .host_arm_mic
	{
		animation: host_mic_hold 0.6s var(--ease) both;
	}

	.wheel_host.is_watch .host_antenna
	{
		animation: host_tremble 0.12s linear infinite alternate;
	}

	.wheel_host.is_small .host_body
	{
		animation: host_bounce calc(0.5s * var(--host_pace)) ease-in-out 2;
	}

	.wheel_host.is_small .host_head
	{
		animation: host_nod calc(0.5s * var(--host_pace)) ease-in-out 2;
	}

	.wheel_host.is_small .host_arm_point
	{
		animation: host_thumb calc(0.5s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_small .host_forearm_point
	{
		animation: host_thumb_hand calc(0.5s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_win .host_body,
	.wheel_host.is_big .host_body
	{
		animation: host_jump calc(0.7s * var(--host_pace)) cubic-bezier(0.3, 0, 0.4, 1) 3;
	}

	.wheel_host.is_big .host_body
	{
		animation-name: host_jump_big;
		animation-iteration-count: 4;
	}

	.wheel_host.is_win .host_shadow,
	.wheel_host.is_big .host_shadow
	{
		animation: host_jump_shadow calc(0.7s * var(--host_pace)) cubic-bezier(0.3, 0, 0.4, 1) 3;
	}

	.wheel_host.is_big .host_shadow
	{
		animation-iteration-count: 4;
	}

	.wheel_host.is_win .host_arm_point,
	.wheel_host.is_big .host_arm_point
	{
		animation: host_hooray_point calc(0.35s * var(--host_pace)) ease-in-out infinite alternate;
	}

	.wheel_host.is_win .host_forearm_point,
	.wheel_host.is_big .host_forearm_point
	{
		animation: host_hooray_hand calc(0.35s * var(--host_pace)) ease-in-out infinite alternate;
	}

	.wheel_host.is_win .host_arm_mic,
	.wheel_host.is_big .host_arm_mic
	{
		animation: host_hooray_mic calc(0.35s * var(--host_pace)) ease-in-out infinite alternate;
	}

	.wheel_host.is_win .host_forearm_mic,
	.wheel_host.is_big .host_forearm_mic
	{
		animation: host_hooray_mic_hand calc(0.35s * var(--host_pace)) ease-in-out infinite alternate;
	}

	.wheel_host.is_win .host_antenna,
	.wheel_host.is_big .host_antenna
	{
		animation: host_twirl calc(0.7s * var(--host_pace)) ease-in-out 3;
	}

	.wheel_host.is_win .host_star,
	.wheel_host.is_big .host_star
	{
		animation: host_star 0.5s ease-in-out infinite alternate;
	}

	.host_star_late
	{
		animation-delay: -0.25s !important;
	}

	.wheel_host.is_lose .host_body
	{
		animation: host_shrug calc(0.9s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_lose .host_head
	{
		animation: host_droop calc(0.9s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_lose .host_arm_point
	{
		animation: host_shrug_point calc(0.6s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_lose .host_forearm_point
	{
		animation: host_shrug_point_hand calc(0.6s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_lose .host_arm_mic
	{
		animation: host_shrug_mic calc(0.6s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_lose .host_forearm_mic
	{
		animation: host_shrug_mic_hand calc(0.6s * var(--host_pace)) var(--ease) both;
	}

	.wheel_host.is_lose .host_sweat
	{
		animation: host_sweat calc(1.5s * var(--host_pace)) ease-in calc(0.25s * var(--host_pace)) both;
	}

	.wheel_host.is_lose .host_antenna
	{
		animation: host_wilt calc(0.9s * var(--host_pace)) var(--ease) both;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.wheel_host.is_lose .host_sweat
	{
		opacity: 1;
	}
}

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

@keyframes host_blink
{
	0%, 90%, 96%, 100%
	{
		transform: scaleY(1);
	}

	93%
	{
		transform: scaleY(0.08);
	}
}

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

	50%
	{
		transform: translateY(-3.5px) scale(1.008, 0.995);
	}
}

@keyframes host_shadow_bob
{
	0%, 100%
	{
		transform: scaleX(1);
		opacity: 1;
	}

	50%
	{
		transform: scaleX(0.93);
		opacity: 0.85;
	}
}

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

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

	55%
	{
		transform: rotate(-2deg);
	}

	75%
	{
		transform: rotate(4deg);
	}
}

@keyframes host_sway
{
	from
	{
		transform: rotate(-7deg);
	}

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

@keyframes host_present
{
	0%, 52%, 92%, 100%
	{
		transform: rotate(0deg);
	}

	60%, 82%
	{
		transform: rotate(-44deg);
	}

	71%
	{
		transform: rotate(-50deg);
	}
}

@keyframes host_present_hand
{
	0%, 52%, 92%, 100%
	{
		transform: rotate(0deg);
	}

	60%, 82%
	{
		transform: rotate(48deg);
	}

	71%
	{
		transform: rotate(40deg);
	}
}

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

	50%
	{
		transform: rotate(-4deg);
	}
}

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

	32%
	{
		transform: translate(-4px, 2px) rotate(-4deg);
	}

	62%
	{
		transform: translate(5px, 0) rotate(5deg);
	}

	100%
	{
		transform: translate(2px, 0) rotate(2deg);
	}
}

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

	32%
	{
		transform: rotate(-150deg);
	}

	62%
	{
		transform: rotate(-12deg);
	}

	100%
	{
		transform: rotate(-30deg);
	}
}

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

	32%
	{
		transform: rotate(70deg);
	}

	62%
	{
		transform: rotate(20deg);
	}

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

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

	40%
	{
		transform: rotate(14deg);
	}

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

@keyframes host_tilt
{
	to
	{
		transform: rotate(7deg);
	}
}

@keyframes host_hop
{
	from
	{
		transform: translateY(0) scale(1.02, 0.98);
	}

	to
	{
		transform: translateY(-6px) scale(0.99, 1.01);
	}
}

@keyframes host_hop_shadow
{
	from
	{
		transform: scaleX(1);
	}

	to
	{
		transform: scaleX(0.86);
	}
}

@keyframes host_cheer
{
	from
	{
		transform: rotate(-118deg);
	}

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

@keyframes host_cheer_hand
{
	to
	{
		transform: rotate(60deg);
	}
}

@keyframes host_mic_up
{
	to
	{
		transform: rotate(18deg);
	}
}

@keyframes host_wiggle
{
	from
	{
		transform: rotate(-12deg);
	}

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

@keyframes host_lean
{
	to
	{
		transform: translateX(5px) rotate(5deg);
	}
}

@keyframes host_peer
{
	to
	{
		transform: translate(4px, 3px) rotate(9deg);
	}
}

@keyframes host_fist
{
	to
	{
		transform: rotate(-30deg);
	}
}

@keyframes host_fist_hand
{
	to
	{
		transform: rotate(-52deg);
	}
}

@keyframes host_mic_hold
{
	to
	{
		transform: rotate(-8deg);
	}
}

@keyframes host_tremble
{
	from
	{
		transform: rotate(-3deg);
	}

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

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

	45%
	{
		transform: translateY(-9px);
	}

	80%
	{
		transform: translateY(0) scale(1.03, 0.97);
	}
}

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

	50%
	{
		transform: translateY(3px) rotate(9deg);
	}
}

@keyframes host_thumb
{
	to
	{
		transform: rotate(-58deg);
	}
}

@keyframes host_thumb_hand
{
	to
	{
		transform: rotate(5deg);
	}
}

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

	12%
	{
		transform: translateY(0) scale(1.06, 0.92);
	}

	50%
	{
		transform: translateY(-26px) scale(0.97, 1.04);
	}

	88%
	{
		transform: translateY(0) scale(1.05, 0.94);
	}
}

@keyframes host_jump_big
{
	0%, 100%
	{
		transform: translateY(0) rotate(0deg) scale(1, 1);
	}

	12%
	{
		transform: translateY(0) rotate(0deg) scale(1.07, 0.9);
	}

	50%
	{
		transform: translateY(-38px) rotate(-6deg) scale(0.96, 1.05);
	}

	88%
	{
		transform: translateY(0) rotate(0deg) scale(1.06, 0.93);
	}
}

@keyframes host_jump_shadow
{
	0%, 100%
	{
		transform: scaleX(1);
		opacity: 1;
	}

	50%
	{
		transform: scaleX(0.66);
		opacity: 0.55;
	}
}

@keyframes host_hooray_point
{
	from
	{
		transform: rotate(-62deg);
	}

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

@keyframes host_hooray_hand
{
	from
	{
		transform: rotate(9deg);
	}

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

@keyframes host_hooray_mic
{
	from
	{
		transform: rotate(67deg);
	}

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

@keyframes host_hooray_mic_hand
{
	from
	{
		transform: rotate(-104deg);
	}

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

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

	50%
	{
		transform: rotate(-16deg);
	}
}

@keyframes host_star
{
	from
	{
		transform: scale(0.82) rotate(-12deg);
	}

	to
	{
		transform: scale(1.12) rotate(12deg);
	}
}

@keyframes host_shrug
{
	0%
	{
		transform: translateY(0);
	}

	35%
	{
		transform: translateY(-4px);
	}

	100%
	{
		transform: translateY(1px) rotate(-1.5deg);
	}
}

@keyframes host_droop
{
	to
	{
		transform: translateY(3px) rotate(-9deg);
	}
}

@keyframes host_shrug_point
{
	to
	{
		transform: rotate(-40deg);
	}
}

@keyframes host_shrug_point_hand
{
	to
	{
		transform: rotate(7deg);
	}
}

@keyframes host_shrug_mic
{
	to
	{
		transform: rotate(40deg);
	}
}

@keyframes host_shrug_mic_hand
{
	to
	{
		transform: rotate(-95deg);
	}
}

@keyframes host_sweat
{
	0%
	{
		opacity: 0;
		transform: translateY(-4px) scale(0.6);
	}

	25%
	{
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	85%
	{
		opacity: 1;
		transform: translateY(14px) scale(0.95);
	}

	100%
	{
		opacity: 0;
		transform: translateY(18px) scale(0.9);
	}
}

@keyframes host_wilt
{
	to
	{
		transform: rotate(-24deg);
	}
}

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

@media (max-height: 800px) and (min-width: 1101px)
{
	.wheel_legend
	{
		min-height: 32px;
	}

	.legend_item
	{
		height: 32px;
		gap: 6px;
		padding: 0 8px;
	}

	.legend_value
	{
		font-size: 13px;
	}

	.legend_swatch
	{
		width: 12px;
		height: 12px;
	}

	.wheel_stage
	{
		gap: 10px;
	}
}

@media (max-height: 700px) and (min-width: 1101px)
{
	.wheel_stage
	{
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

@container (max-width: 700px)
{
	.wheel_legend
	{
		gap: 6px;
	}

	.legend_item
	{
		gap: 5px;
		padding: 0 6px;
	}

	.legend_value
	{
		font-size: 12.5px;
	}

	.legend_chance
	{
		font-size: 11px;
	}

	.legend_swatch
	{
		width: 10px;
		height: 10px;
	}
}

@media (max-width: 1100px)
{
	.wheel_scene
	{
		flex: none;
		height: clamp(320px, 72vw, 560px);
	}

	.wheel_legend
	{
		flex-wrap: wrap;
	}
}

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